/* ============================================================
   iÅlesund ToolBox - app shell + tools
   ============================================================ */

/* Source Sans Pro (latin subset), bundled so the board renders
   identically on every machine. SIL Open Font License 1.1 -
   see fonts/LICENSE.md */
@font-face{
  font-family:'Source Sans Pro';
  font-style:normal;font-weight:400;font-display:block;
  src:url('../fonts/SourceSansPro-400.woff2') format('woff2');
}
@font-face{
  font-family:'Source Sans Pro';
  font-style:normal;font-weight:600;font-display:block;
  src:url('../fonts/SourceSansPro-600.woff2') format('woff2');
}
/* Open Sans - board price tags and all property-card text */
@font-face{
  font-family:'Open Sans';
  font-style:normal;font-weight:400;font-display:block;
  src:url('../fonts/OpenSans-400.woff2') format('woff2');
}
@font-face{
  font-family:'Open Sans';
  font-style:italic;font-weight:400;font-display:block;
  src:url('../fonts/OpenSans-400i.woff2') format('woff2');
}
@font-face{
  font-family:'Open Sans';
  font-style:normal;font-weight:600;font-display:block;
  src:url('../fonts/OpenSans-600.woff2') format('woff2');
}
@font-face{
  font-family:'Open Sans';
  font-style:normal;font-weight:700;font-display:block;
  src:url('../fonts/OpenSans-700.woff2') format('woff2');
}
@font-face{
  font-family:'Open Sans';
  font-style:normal;font-weight:800;font-display:block;
  src:url('../fonts/OpenSans-800.woff2') format('woff2');
}

:root{
  --bg:#0d1117;
  --bg-2:#141b24;
  --bg-3:#1b2530;
  --bg-4:#22303d;
  --line:#2a3744;
  --line-2:#374757;
  --txt:#e6edf3;
  --txt-2:#9fb0c0;
  --txt-3:#6b7f92;
  --brand-red:#E8422F;      /* the red from the iÅlesund logo */
  --accent:#2ec4b6;
  --accent-2:#1ea89b;
  --accent-dim:rgba(46,196,182,.15);
  --warn:#f0a202;
  --danger:#ef476f;
  --ok:#57cc99;
  --radius:10px;
  --radius-sm:7px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --sans:"Source Sans Pro","Segoe UI",system-ui,-apple-system,sans-serif;
  --nav-w:212px;
  --insp-w:320px;
  --bar-h:52px;
}

*{box-sizing:border-box}
/* Must come before any rule that sets `display` on a hideable element:
   an author `display` would otherwise beat the browser's [hidden] rule. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--sans);font-size:13.5px;line-height:1.45;
  overflow:hidden;-webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit;color:inherit}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px;border:2px solid var(--bg-2)}
::-webkit-scrollbar-track{background:transparent}

/* ---------------- app bar ---------------- */
.appbar{
  height:var(--bar-h);display:flex;align-items:center;gap:12px;padding:0 12px;
  background:var(--bg-2);border-bottom:1px solid var(--line);position:relative;z-index:30;
}
.hamburger{
  background:none;border:0;font-size:18px;color:var(--txt-2);cursor:pointer;
  width:34px;height:34px;border-radius:var(--radius-sm);display:none;
}
.hamburger:hover{background:var(--bg-3);color:var(--txt)}
.brand{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;padding:4px 6px;border-radius:var(--radius-sm)}
.brand:hover{background:var(--bg-3)}
.brand-logo{
  width:28px;height:28px;border-radius:7px;display:block;object-fit:cover;
  background:#F6DEC0;
}
.brand-i{color:var(--brand-red);font-weight:700}
.brand-text{font-size:14px;letter-spacing:.2px;white-space:nowrap}
.brand-text b{font-weight:700}
.appbar-tool{color:var(--txt-3);font-size:13px;display:flex;align-items:center;gap:8px;min-width:0}
.appbar-tool .crumb-sep{opacity:.5}
.appbar-tool .crumb-name{color:var(--txt);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appbar-tool .crumb-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The open game's own name, in place of the tool's. It is the title of
   what is on screen, so it is heavier than a breadcrumb - and it is a
   button, because that is where renaming happens. */
.crumb-name.named{min-width:0;display:flex;align-items:center}
.crumb-name-btn{
  display:flex;align-items:center;gap:8px;min-width:0;max-width:42vw;
  background:none;border:1px dashed transparent;border-radius:var(--radius-sm);
  padding:3px 8px;margin:-3px -8px;cursor:text;color:var(--txt);
}
.crumb-name-btn b{
  font:800 15px var(--sans);letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.crumb-pen{color:var(--txt-3);font-size:12px;flex:none;opacity:.55;transition:opacity .12s}
.crumb-name-btn:hover{border-color:var(--line-2)}
.crumb-name-btn:hover .crumb-pen{opacity:1;color:var(--accent)}
.crumb-name-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.crumb-edit{
  width:min(42vw,340px);font:800 15px var(--sans);
  padding:2px 8px;border-radius:var(--radius-sm);
}
/* undo/redo sit with the tool name, not with the document actions on the right */
.crumb-actions{display:flex;align-items:center;gap:6px;flex:none;margin-left:6px}
.hist-btn{
  background:var(--bg-3);border:1px solid var(--line);color:var(--txt);
  height:28px;padding:0 10px;border-radius:var(--radius-sm);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:560;
  white-space:nowrap;
}
.hist-btn .hist-ico{font-size:15px;line-height:1;color:var(--accent)}
.hist-btn:hover:not(:disabled){background:var(--bg-4);border-color:var(--accent)}
.hist-btn:active:not(:disabled){transform:translateY(1px)}
.hist-btn:disabled{opacity:.4;cursor:default;color:var(--txt-3)}
.hist-btn:disabled .hist-ico{color:var(--txt-3)}
/* the label is the first thing to go when the bar runs out of room */
@media (max-width:1100px){ .hist-btn .hist-label{display:none} .hist-btn{padding:0 8px} }
.spacer{flex:1}

/* ---------------- the tool's own actions, top right ----------------
   One pill per action, in a pill-shaped tray of their own, so the row
   reads as a single control rather than five loose buttons. Uppercase
   and bold because these are the five things you do to the whole game
   - they should be findable without reading. */
.appbar-actions{
  display:flex;align-items:center;gap:4px;
  background:var(--bg);border:1px solid var(--line);
  border-radius:999px;padding:4px;
}
.appbar-actions:empty{display:none;border:0;padding:0}
.appbar-actions .pill{
  appearance:none;border:1px solid transparent;background:transparent;
  color:var(--txt-2);cursor:pointer;white-space:nowrap;
  height:32px;padding:0 15px;border-radius:999px;
  font:700 12px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:6px;
  transition:background .12s,color .12s,border-color .12s,transform .08s;
}
.appbar-actions .pill:hover{background:var(--bg-3);color:var(--txt);border-color:var(--line-2)}
.appbar-actions .pill:active{transform:translateY(1px)}
.appbar-actions .pill:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* the one that produces the print files gets the weight of the accent */
.appbar-actions .pill.go{
  background:var(--accent);border-color:var(--accent);color:#04211f;
  box-shadow:0 1px 0 rgba(0,0,0,.25);
}
.appbar-actions .pill.go:hover{background:var(--accent-2);border-color:var(--accent-2);color:#04211f}

/* A narrow bar tightens the pills rather than hiding any of them - all
   five are things you need, and a word is what you navigate by. */
@media (max-width:1280px){
  .appbar-actions .pill{padding:0 11px;letter-spacing:.04em}
}
@media (max-width:1040px){
  .appbar-actions{gap:2px;padding:3px}
  .appbar-actions .pill{padding:0 9px;font-size:11.5px;height:29px}
}

/* ---------------- layout ---------------- */
.layout{display:flex;height:calc(100% - var(--bar-h));}
.sidenav{
  width:var(--nav-w);flex:0 0 var(--nav-w);background:var(--bg-2);
  padding:10px 8px;overflow:auto;
  display:flex;flex-direction:column;min-height:0;
}
.main{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;overflow:hidden}

/* drag the panel wider - the notepad is in there, so how wide it should
   be is a matter of taste rather than something to decide for everyone */
.nav-grip{
  flex:0 0 5px;cursor:col-resize;background:var(--line);
  position:relative;z-index:5;transition:background .12s;
}
.nav-grip:hover,body.resizing .nav-grip{background:var(--accent)}
.nav-grip::after{content:"";position:absolute;inset:0 -3px}   /* easier to grab */
body.resizing{cursor:col-resize;user-select:none}

/* The same handle on the other side, between the stage and the panel -
   the crop preview and the colour swatches are worth more room than a
   fixed 320 px, and how much is a matter of taste. */
.insp-grip{
  flex:0 0 5px;cursor:col-resize;background:var(--line);
  position:relative;z-index:5;transition:background .12s;
}
.insp-grip:hover,body.resizing .insp-grip{background:var(--accent)}
.insp-grip::after{content:"";position:absolute;inset:0 -3px}

/* ---------------- notepad ----------------
   Belongs to the game, so it travels with it. Always here, whichever
   tool is open. */
.notes{
  margin-top:auto;padding-top:12px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;min-height:400px;
}
.notes-head{
  display:flex;align-items:baseline;gap:8px;padding:0 8px 6px;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt-3);font-weight:700;
}
.notes-head .notes-hint{letter-spacing:0;text-transform:none;color:var(--txt-3);opacity:.75}
.notes-area{
  flex:1;width:100%;min-height:360px;resize:vertical;
  background:var(--bg);color:var(--txt);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:8px 9px;
  font:12.5px/1.55 var(--sans);
}
.notes-area:focus{outline:none;border-color:var(--accent)}
.notes-area::placeholder{color:var(--txt-3)}

.nav-label{
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--txt-3);
  padding:8px 8px 6px;font-weight:700;
}
.nav-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:8px 10px;border-radius:var(--radius-sm);background:none;border:0;
  color:var(--txt-2);cursor:pointer;margin-bottom:2px;
}
.nav-item:hover{background:var(--bg-3);color:var(--txt)}
.nav-item.active{background:var(--accent-dim);color:var(--txt)}
.nav-item.active .nav-ico{background:var(--accent);color:#04211f}
.nav-item[disabled]{opacity:.45;cursor:default}
.nav-ico{
  width:26px;height:26px;flex:0 0 26px;border-radius:7px;background:var(--bg-4);
  display:grid;place-items:center;font-size:14px;
}
.nav-name{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-soon{margin-left:auto;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);border:1px solid var(--line-2);padding:1px 5px;border-radius:20px}

/* ---------------- generic controls ---------------- */
.btn{
  display:inline-flex;align-items:center;gap:6px;justify-content:center;
  background:var(--bg-3);border:1px solid var(--line);color:var(--txt);
  padding:6px 11px;border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;
}
.btn:hover{background:var(--bg-4);border-color:var(--line-2)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#04211f;font-weight:600}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.ghost{background:none;border-color:transparent;color:var(--txt-2)}
.btn.ghost:hover{background:var(--bg-3);color:var(--txt)}
.btn.danger{color:var(--danger);border-color:transparent;background:none}
.btn.danger:hover{background:rgba(239,71,111,.12)}
.btn.sm{padding:3px 8px;font-size:12px}
.btn.icon{padding:5px 8px}

.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.field > label{font-size:11px;color:var(--txt-2);display:flex;justify-content:space-between;align-items:center;gap:6px}
.field > label .hint{color:var(--txt-3);font-size:10.5px;font-family:var(--mono)}
input[type=text],input[type=email],input[type=password],input[type=number],select,textarea{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:6px 8px;width:100%;outline:none;
}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=number]:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}
input[type=number]{font-family:var(--mono)}
input[type=range]{width:100%;accent-color:var(--accent)}
input[type=color]{width:100%;height:28px;padding:2px;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm)}
.row{display:flex;gap:8px}
.row > *{flex:1;min-width:0}

/* a slider next to the number it controls - drag to get close, type to be exact */
.slidenum{display:flex;align-items:center;gap:8px}
.slidenum input[type=range]{flex:1;min-width:0}
/* wide enough for the longest value two decimals can make, "-180,00" */
.slidenum input[type=number]{flex:0 0 78px;width:78px;padding:5px 6px;text-align:right;font-size:12px}
.check{display:flex;align-items:center;gap:8px;cursor:pointer;padding:3px 0;color:var(--txt-2)}
.check input{accent-color:var(--accent);width:14px;height:14px}
.seg{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.seg button{flex:1;background:none;border:0;padding:5px 4px;color:var(--txt-2);cursor:pointer;font-size:12px}
.seg button:hover{background:var(--bg-3)}
.seg button.on{background:var(--accent);color:#04211f;font-weight:600}

/* ---------------- home / tool grid ---------------- */
.home{padding:32px 28px;overflow:auto}
.home h1{font-size:24px;margin:0 0 6px;font-weight:650}
.home .sub{color:var(--txt-2);margin:0 0 26px;max-width:620px}
/* Big picture boxes: the artwork is what you aim at, the words explain it. */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;max-width:1180px}
.tool-card{
  background:var(--bg-2);border:1px solid var(--line);border-radius:18px;
  padding:0;overflow:hidden;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;
  transition:border-color .12s,transform .12s,box-shadow .12s;
}
.tool-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.tool-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tool-card.soon{opacity:.55;cursor:default}
.tool-card.soon:hover{border-color:var(--line);transform:none;box-shadow:none}
.tool-card .card-art{
  aspect-ratio:1/1;background:var(--bg-4);display:grid;place-items:center;overflow:hidden;
}
.tool-card .card-art img{width:100%;height:100%;object-fit:cover;display:block}
.tool-card .card-art.glyph span{font-size:56px;line-height:1}
.tool-card .card-text{padding:14px 16px 16px}
.tool-card h3{margin:0 0 4px;font-size:16px;font-weight:680;letter-spacing:.2px}
.tool-card p{margin:0;color:var(--txt-2);font-size:12.5px}
.tool-card .card-count{
  display:inline-block;margin-top:8px;font-size:11px;color:var(--txt-3);
  background:var(--bg-4);border-radius:99px;padding:2px 9px;
}
/* group entries in the side nav show their artwork too */
.nav-ico img{border-radius:5px;display:block;object-fit:cover}

/* ---------------- workspace (3-pane tool) ---------------- */
.work{display:flex;height:100%;min-height:0}
.work-side{
  width:var(--insp-w);flex:0 0 var(--insp-w);background:var(--bg-2);
  display:flex;flex-direction:column;min-height:0;
}
.work-side.left{border-right:1px solid var(--line)}
.work-side.right{border-left:1px solid var(--line)}
.work-stage{flex:1;min-width:0;position:relative;background:#090c10}
.side-scroll{overflow:auto;padding:12px;flex:1;min-height:0}

/* ---------- sections ----------
   Every section in a side panel is a pill, top level and nested alike:
   shut it is one line with a title in it, open it grows downwards and
   the controls sit inside the same rounded box. So the border and the
   background belong to the SECTION and the header is only the part you
   click - which is also why the header is a bold pill label rather than
   the small grey caption this used to be. Those are headings you read
   past; these are controls you aim at.

   The `collapsed` rules are written against the class rather than
   against `.panel`, so a nested `.subpanel` gets them too. Missing that
   is exactly how the first folding sections toggled a class and hid
   nothing at all. */
.panel, .subpanel{
  margin:0 0 10px;overflow:hidden;
  background:var(--bg-4);
  border:1px solid var(--line-2);border-radius:22px
}
.panel:last-child{margin-bottom:0}
.panel:hover, .subpanel:hover{border-color:var(--txt-3)}
.panel:not(.collapsed), .subpanel:not(.collapsed){
  background:var(--bg-2);border-color:var(--accent)
}
.panel-head{
  display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;
  margin:0;padding:11px 16px;border-radius:0;
  font-size:12.5px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txt)
}
.panel-head:hover{color:#fff}
.panel:not(.collapsed)>.panel-head,
.subpanel:not(.collapsed)>.panel-head{background:var(--accent-dim)}
.panel-head .tw{font-size:10px;color:var(--accent);flex:0 0 auto;transition:transform .15s}
.collapsed>.panel-head .tw{transform:rotate(-90deg)}
/* the title holds its line; the badge gives way if the panel is narrow */
.panel-head>span:nth-of-type(2){white-space:nowrap}
.panel-head .badge{
  margin-left:auto;background:var(--bg);border-radius:20px;padding:1px 6px;
  font-size:9.5px;font-weight:700;letter-spacing:0;text-transform:none;
  flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.panel-body{padding:4px 14px 12px}
.collapsed>.panel-body{display:none}
.panel-body>:last-child{margin-bottom:0}

/* A panel inside a panel. The inspector had grown to one long column
   where the field you wanted was always somewhere in the middle of it,
   so the parts that are adjustments rather than identity - placement,
   cropping - are shut until asked for.

   The header IS the button, and it is deliberately a big bold pill
   rather than the small grey caption the top-level panels use: those
   are headings you read past, this is a control you aim at. */
/* A panel with no chrome of its own. The logo inspector's sections ARE
   the pills - placement, cropping, the field - so a fourth pill around
   them would only be a box around a box. */
.panel.bare{background:none;border:0;border-radius:0;overflow:visible;margin-bottom:0}
.panel.bare>.panel-head{display:none}
.panel.bare>.panel-body{padding:0}

/* A section inside a section. Same pill, one step in - the indent comes
   from the parent's own body padding, and the darker ground separates
   the two levels without a second visual language. */
.subpanel{background:var(--bg-3)}
.subpanel:not(.collapsed){background:var(--bg)}
.subpanel>.panel-head{font-size:12px}

/* A section that is NOT inside another panel - the card page's placement
   and cropping stand beside its Logo panel, not in it - so it carries a
   top-level pill's weight. The recessed look would be describing a
   nesting that is not there. */
.subpanel.flat{background:var(--bg-4)}
.subpanel.flat:not(.collapsed){background:var(--bg-2)}
.subpanel.flat>.panel-head{font-size:12.5px}

/* ---------- the price and colour pages ----------
   These two panels are almost entirely buttons, so the buttons are the
   design: big, bold, and only as many as there are real choices. */
.btn.big{
  padding:12px 16px;font-size:13px;font-weight:800;letter-spacing:.02em;
  border-radius:999px
}
.btn.wide{width:100%;justify-content:center}
/* a big ghost is still a button you press, so it keeps an edge - without
   one "Ingen farge" reads as a link in the middle of the panel */
.btn.big.ghost{border-color:var(--line-2);color:var(--txt)}
.btn.big.ghost:hover{border-color:var(--txt-3);background:var(--bg-3)}
input.big{
  padding:11px 13px;font-size:16px;font-weight:700;letter-spacing:.01em;
  border-radius:12px
}

/* A row of choices, each one a pill you can see and hit - the export
   dialog is nothing but decisions, so the decisions are the design
   rather than words hidden behind drop-downs. */
.pickrow{display:flex;flex-wrap:wrap;gap:8px}
.pickrow .btn.big{flex:0 1 auto}
/* the label over such a row is a heading, not a caption */
.field.big{margin-bottom:16px}
.field.big > label{
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--txt-2);margin-bottom:2px
}

/* the usual prices, as one row of taps rather than ten fields */
.chipbar{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.btn.chip{
  padding:7px 11px;font-size:12px;font-weight:800;border-radius:999px;
  background:var(--bg-3);border:1px solid var(--line-2)
}
.btn.chip:hover{background:var(--bg-4);border-color:var(--txt-3)}

/* The ten measured inks. Each one names itself: the board is printed, so
   what matters is WHICH ink this is, not a hex code nobody prints. */
.swatchgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.swatch{
  position:relative;height:52px;border-radius:14px;cursor:pointer;
  border:2px solid var(--line-2);padding:0;overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center
}
.swatch:hover{border-color:#fff}
.swatch.on{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
.swatch>span{
  width:100%;padding:3px 4px;font-size:10.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;
  color:#fff;background:rgba(0,0,0,.45);text-shadow:0 1px 2px rgba(0,0,0,.6)
}
.swatch.on::after{
  content:'✓';position:absolute;top:5px;right:8px;
  font-size:15px;font-weight:900;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)
}
/* The colour picker: drag anywhere in either strip. Both are plain CSS
   gradients, so there is no canvas to keep in step and the knob is just
   a positioned dot. */
.pick{margin-bottom:10px;touch-action:none;user-select:none}
.pick-sv{
  position:relative;height:130px;border-radius:12px;cursor:crosshair;
  border:1px solid var(--line-2)
}
.pick-hue{
  position:relative;height:22px;margin-top:10px;border-radius:999px;cursor:ew-resize;
  border:1px solid var(--line-2);
  background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)
}
.pick-knob{
  position:absolute;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;
  border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.55),0 1px 4px rgba(0,0,0,.5);
  pointer-events:none
}

/* ---------- crop editor ---------- */
.crop-stage{
  position:relative;overflow:hidden;margin-bottom:8px;
  border:1px solid var(--line);border-radius:var(--radius-sm);
  background:
    linear-gradient(45deg,var(--bg-3) 25%,transparent 25%,transparent 75%,var(--bg-3) 75%) 0 0/16px 16px,
    linear-gradient(45deg,var(--bg-3) 25%,transparent 25%,transparent 75%,var(--bg-3) 75%) 8px 8px/16px 16px,
    var(--bg);
  touch-action:none;user-select:none
}
.crop-stage canvas{display:block;width:100%;height:auto}
/* The shadow paints everything OUTSIDE the box, so the kept area is the
   only part at full strength - no need for four separate cover divs. */
.crop-box{
  position:absolute;box-sizing:border-box;
  border:1px solid #fff;box-shadow:0 0 0 9999px rgba(0,0,0,.5);
  cursor:move
}
.crop-box::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,transparent calc(33.33% - .5px),rgba(255,255,255,.35) calc(33.33% - .5px),rgba(255,255,255,.35) calc(33.33% + .5px),transparent calc(33.33% + .5px)),
    linear-gradient(to right,transparent calc(66.66% - .5px),rgba(255,255,255,.35) calc(66.66% - .5px),rgba(255,255,255,.35) calc(66.66% + .5px),transparent calc(66.66% + .5px)),
    linear-gradient(to bottom,transparent calc(33.33% - .5px),rgba(255,255,255,.35) calc(33.33% - .5px),rgba(255,255,255,.35) calc(33.33% + .5px),transparent calc(33.33% + .5px)),
    linear-gradient(to bottom,transparent calc(66.66% - .5px),rgba(255,255,255,.35) calc(66.66% - .5px),rgba(255,255,255,.35) calc(66.66% + .5px),transparent calc(66.66% + .5px))
}
/* Handles sit just INSIDE the box. Centred on the edges they would be
   half cut off by the stage's overflow whenever a side is uncropped -
   which is how every logo starts. */
.crop-h{position:absolute;background:#fff;border:1px solid rgba(0,0,0,.45);border-radius:2px;width:10px;height:10px}
.crop-h.nw{top:1px;   left:1px}
.crop-h.ne{top:1px;   right:1px}
.crop-h.sw{bottom:1px;left:1px}
.crop-h.se{bottom:1px;right:1px}
.crop-h.n {top:1px;   left:50%;margin-left:-5px}
.crop-h.s {bottom:1px;left:50%;margin-left:-5px}
.crop-h.w {left:1px;  top:50%; margin-top:-5px}
.crop-h.e {right:1px; top:50%; margin-top:-5px}
.crop-h.n,.crop-h.s{cursor:ns-resize}
.crop-h.w,.crop-h.e{cursor:ew-resize}
.crop-h.nw,.crop-h.se{cursor:nwse-resize}
.crop-h.ne,.crop-h.sw{cursor:nesw-resize}
.crop-empty{display:grid;place-items:center;height:110px}

/* dropzone */
.dropzone{
  border:1.5px dashed var(--line-2);border-radius:var(--radius);padding:18px 12px;text-align:center;
  color:var(--txt-3);cursor:pointer;transition:.12s;font-size:12.5px;
}
.dropzone:hover,.dropzone.over{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.dropzone b{display:block;color:var(--txt-2);font-size:13px;margin-bottom:2px}

/* The one on a page of its own - "drop a logo here and every note gets
   it" - is the biggest thing you do on that page, so it is a big pill
   with a heading you can read at a glance rather than a dashed box with
   two lines of grey. */
.dropzone.hero{
  border-radius:999px;padding:22px 30px;border-width:2px;
  background:var(--bg-2);
}
.dropzone.hero b{
  font-size:16px;font-weight:800;letter-spacing:.01em;color:var(--txt);
  margin-bottom:4px
}
.dropzone.hero span{font-size:12px}
.dropzone.hero:hover b,.dropzone.hero.over b{color:var(--accent)}

/* ---------------- saved games (the ÅPNE dialog) ----------------
   Two different actions per row, so two different targets: the name on
   the left renames, the button on the right opens. */
.save-row{
  display:flex;align-items:center;gap:10px;padding:6px 8px;
  border:1px solid transparent;border-radius:var(--radius-sm);
}
.save-row:hover{background:var(--bg-3)}
.save-row.here{border-color:var(--accent);background:var(--accent-dim)}
/* Just the name. Renaming moved to the breadcrumb, where the name of the
   open game is - see .crumb-name-btn. */
.save-name{
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--txt);font:600 13.5px var(--sans);
}
.save-when{flex:none;font-variant-numeric:tabular-nums}
/* the delete button stays quiet until you are on the row */
.save-del{flex:none;color:var(--txt-3)}
.save-row:hover .save-del:not(:disabled){color:var(--danger)}
.save-del:disabled{opacity:.3}
/* asking before deleting, in the row itself */
.save-row.asking{background:rgba(239,71,111,.10);border-color:var(--danger)}
.save-ask{flex:1;min-width:0;font-size:13px;color:var(--txt);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn.danger.solid{background:var(--danger);border-color:var(--danger);color:#fff;font-weight:600}
.btn.danger.solid:hover{background:#e03060;border-color:#e03060;color:#fff}

/* Turn the deck over - centred at the top of the card page.
   The same big bold pill the side page's own sections use: it is the one
   control that changes what the whole page is about, so it is aimed at,
   not read past. It says where pressing it goes - BAKSIDE from the
   front, FORSIDE from the back - rather than which side is showing,
   which the page itself makes plain. */
.flip-bar{display:flex;align-items:center;justify-content:center;justify-self:center}
.btn.big.flip{padding:12px 24px;font-size:14px;letter-spacing:.09em;gap:9px}
.flip-turn{font-size:17px;line-height:1;color:var(--accent)}
.btn.big.flip:hover .flip-turn{color:var(--accent-2)}

/* A card editor: one dark stage that scrolls, with the two buttons
   floating over the top of it. No strip of its own behind them - the bar
   is transparent and lets the pointer through, so what is under it is
   the card's stage, which is what you drag and zoom. Three columns, so
   the flip button is in the middle of the view and not merely to the
   right of whatever sits on the left. */
.card-view{position:relative;flex:1;min-width:0;display:flex;min-height:0}
.card-scroll{
  flex:1;min-width:0;display:grid;
  background:#090c10;overflow:auto;
  /* room at the top for the floating buttons, so a centred card never
     sits under them */
  padding:74px 20px 20px;
  /* Centred while it fits, "safe" centred once it does not: a card
     zoomed taller than the stage would otherwise overflow equally above
     and below, and the part above a centred item cannot be scrolled to -
     the top of the card would be unreachable. */
  align-items:center;align-items:safe center;
  justify-items:center;justify-items:safe center
}
.card-top{
  position:absolute;top:0;left:0;right:0;z-index:3;pointer-events:none;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding:14px 18px 0
}
/* Only the buttons themselves take the pointer. The third column is an
   empty spacer and would otherwise swallow a drag started under it, over
   a third of the stage. */
.card-top>.btn,.card-top>.flip-bar{pointer-events:auto}
/* Centred, but "safe" centred: a card zoomed wider than the stage would
   otherwise hang off BOTH sides, and the half that overflows to the left
   of a centred item cannot be scrolled to. */
.card-stage{
  display:flex;flex-direction:column;gap:12px;width:100%;
  align-items:center;align-items:safe center
}
.btn.big.backpill{justify-self:start;padding:12px 22px;font-size:14px;letter-spacing:.09em;gap:7px}
.back-arrow{font-size:19px;line-height:1;color:var(--accent);margin-top:-2px}
.btn.big.backpill:hover .back-arrow{color:var(--accent-2)}

/* The back of a deck is ONE picture, so the flipped overview is ONE
   card - see panels.backOnly. */
.backonly{
  flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:22px;overflow:auto
}
.backonly .tiny{text-align:center;max-width:420px}
.backcard{padding:0;border:0;background:none;cursor:pointer;line-height:0;border-radius:2px}
.backcard:hover .card-drop{box-shadow:0 0 0 2px var(--accent)}
.backcard:focus-visible{outline:2px solid var(--accent);outline-offset:5px}

/* drop a picture straight onto the card you are looking at */
.card-drop{position:relative;border-radius:2px;transition:box-shadow .12s}
.card-drop-over{box-shadow:0 0 0 3px var(--accent),0 0 26px rgba(46,196,182,.45)}
.card-drop-over::after{
  content:attr(data-drop);position:absolute;left:50%;top:12px;transform:translateX(-50%);
  background:var(--accent);color:#04211f;font:700 11px var(--sans);
  letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px;
  white-space:nowrap;pointer-events:none;
}

/* ---------------- side page: heading, stats, meter ----------------
   The card tools' side panel is a page you work on, not a pile of
   controls, so it gets a heading, its numbers in a block you can read at
   a glance, and one row of actions rather than buttons scattered about. */
.side-head{
  padding:12px 12px 10px;border-bottom:1px solid var(--line);background:var(--bg-2);
  position:sticky;top:0;z-index:2;
}
.side-head h2{margin:0;font-size:14px;font-weight:700;letter-spacing:.01em;color:var(--txt)}
.side-head .side-sub{margin:2px 0 0;font-size:11.5px;color:var(--txt-3)}
.side-actions{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.side-actions .btn{flex:1 1 auto}
/* Only stepping is left in this row - leaving the card and exporting it
   moved to the card itself and to the top bar - so the two buttons share
   the width instead of being 30 px of glyph beside a word. */
.side-actions .btn.step{flex:1 1 0;justify-content:center;text-align:center}

.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:10px}
.stat{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:7px 8px;text-align:center;
}
.stat b{display:block;font-size:16px;font-weight:700;color:var(--txt);font-variant-numeric:tabular-nums;line-height:1.15}
.stat span{display:block;font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-3);margin-top:2px}
.stat.wide{grid-column:span 3;text-align:left;display:flex;align-items:baseline;gap:8px}
.stat.wide b{font-size:13px}
.stat.wide span{margin:0}

.meter{height:6px;border-radius:6px;background:var(--bg-4);overflow:hidden;margin:2px 0 6px}
.meter i{display:block;height:100%;background:var(--accent);transition:width .12s,background .12s}
.meter.warn i{background:var(--warn)}
.meter.full i{background:var(--danger)}

/* ---------------- writing straight on the card ----------------
   A Prøv lykken card is nothing but its text, so the text is typed on the
   card itself. This field lies over the card's text box with the same font,
   size and line height, and its own text is INVISIBLE: what you read is
   the canvas underneath - exactly what will print - while the caret, the
   selection, the keyboard and the clipboard stay the browser's own.
   Everything here that could move a glyph by a pixel is pinned, because
   the field and the canvas have to wrap the same words the same way. */
.card-edit{
  position:absolute;box-sizing:border-box;margin:0;border:0;padding:0;
  resize:none;overflow:hidden;background:transparent;
  color:transparent;-webkit-text-fill-color:transparent;caret-color:#111;
  white-space:pre-wrap;overflow-wrap:normal;word-break:normal;
  letter-spacing:normal;text-align:left;text-indent:0;
  border-radius:2px;transition:box-shadow .12s;cursor:text;
}
/* translucent, so the drawn text still reads through a selection */
.card-edit::selection{background:rgba(38,110,235,.26);color:transparent;-webkit-text-fill-color:transparent}
.card-edit::-moz-selection{background:rgba(38,110,235,.26);color:transparent}
.card-edit:hover{box-shadow:0 0 0 1px rgba(0,0,0,.13)}
/* The outline of the text box while you are writing in it comes from a class
   the tool sets on focus and clears on blur, not from :focus itself - the
   same flag that tells the canvas to drop its placeholder. One state, one
   source: with :focus doing it as well, the ring could be left drawn on a
   field nothing was focused in. */
.card-edit:focus{outline:none}
.card-edit.writing{box-shadow:0 0 0 1px rgba(0,0,0,.28)}
.card-edit.full,.card-edit.full:hover{box-shadow:0 0 0 1px var(--warn)}
.card-edit.full{caret-color:var(--warn)}

/* logo library */
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.lib-item{
  position:relative;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);
  aspect-ratio:1;display:grid;place-items:center;cursor:grab;overflow:hidden;padding:6px;
}
.lib-item:hover{border-color:var(--accent)}
.lib-item.used{border-color:var(--accent-2)}
.lib-item.used::after{content:"";position:absolute;top:3px;right:3px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.lib-item img{max-width:100%;max-height:100%;object-fit:contain;pointer-events:none;
  background:conic-gradient(#20303c 0 25%,#1a2732 0 50%,#20303c 0 75%,#1a2732 0);background-size:12px 12px}
.lib-item .x{
  position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:4px;border:0;
  background:rgba(0,0,0,.6);color:#fff;font-size:11px;line-height:1;cursor:pointer;display:none;
}
.lib-item:hover .x{display:block}
.lib-name{font-size:9.5px;color:var(--txt-3);text-align:center;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}

/* slot list */
.slot-list{display:flex;flex-direction:column;gap:2px;max-height:340px;overflow:auto}
.slot-row{
  display:flex;align-items:center;gap:8px;padding:5px 7px;border-radius:var(--radius-sm);
  cursor:pointer;color:var(--txt-2);font-size:12.5px;border:1px solid transparent;
}
.slot-row:hover{background:var(--bg-3)}
.slot-row.sel{background:var(--accent-dim);border-color:var(--accent);color:var(--txt)}
.slot-row .dot{width:7px;height:7px;border-radius:50%;background:var(--line-2);flex:0 0 7px}
.slot-row.filled .dot{background:var(--accent)}
.slot-row .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot-row .sub{font-size:10.5px;color:var(--txt-3);font-family:var(--mono)}

/* stage */
.stage-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.stage-hud{
  position:absolute;left:10px;bottom:10px;display:flex;gap:6px;align-items:center;
  background:rgba(13,17,23,.85);border:1px solid var(--line);border-radius:var(--radius);
  padding:5px 8px;font-size:12px;color:var(--txt-2);backdrop-filter:blur(6px);z-index:5;
}
.stage-hud .k{font-family:var(--mono);color:var(--txt)}
.stage-tools{
  position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:6px;z-index:5;
}
.stage-tools .btn{background:rgba(20,27,36,.9);backdrop-filter:blur(6px)}
.stage-empty{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:2;
  color:var(--txt-3);text-align:center;padding:40px;
}
.stage-empty .big{font-size:15px;color:var(--txt-2);margin-bottom:6px}
.stage.dragover{outline:2px dashed var(--accent);outline-offset:-8px}

/* toasts */
.toasts{position:fixed;right:14px;bottom:14px;display:flex;flex-direction:column;gap:8px;z-index:100;pointer-events:none}
.toast{pointer-events:auto;
  background:var(--bg-3);border:1px solid var(--line-2);border-left:3px solid var(--accent);
  padding:9px 14px;border-radius:var(--radius-sm);box-shadow:var(--shadow);
  animation:slideIn .18s ease-out;max-width:340px;font-size:12.5px;
}
.toast.err{border-left-color:var(--danger)}
.toast.warn{border-left-color:var(--warn)}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

/* modal */
.modal-root{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:90;padding:20px}
.modal{
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--radius);
  box-shadow:var(--shadow);width:min(480px,100%);max-height:86vh;display:flex;flex-direction:column;
}
.modal h2{margin:0;padding:14px 16px;font-size:15px;border-bottom:1px solid var(--line);font-weight:620}
.modal-body{padding:16px;overflow:auto}
.modal-foot{padding:12px 16px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}

.muted{color:var(--txt-3)}
.tiny{font-size:11px}
.mono{font-family:var(--mono)}
hr.sep{border:0;border-top:1px solid var(--line);margin:12px 0}

/* ---------------- responsive ---------------- */
@media (max-width:1100px){
  :root{--insp-w:280px}
}
@media (max-width:860px){
  .hamburger{display:grid;place-items:center}
  .brand-text{display:none}
  .sidenav{
    position:absolute;top:var(--bar-h);bottom:0;left:0;z-index:25;
    transform:translateX(-100%);transition:transform .18s;box-shadow:var(--shadow);
  }
  body.nav-open .sidenav{transform:none}
  .work{flex-direction:column}
  .work-side{
    width:100%;flex:0 0 auto;max-height:46%;
    border:0;border-top:1px solid var(--line);
  }
  .work-side.left{order:3}
  .work-side.right{order:2;max-height:40%}
  /* stacked, so there is no side edge left to drag */
  .insp-grip{display:none}
  .work-stage{order:1;flex:1 1 40%;min-height:220px}
}

/* ---------- who is signed in, and where the work is going ----------
   Sits outside .appbar-actions on purpose: that box is cleared and
   rebuilt by every tool as it mounts, and this must not blink out
   each time you step between the board and the cards. */
.appbar-user{display:flex;align-items:center;gap:8px;padding-left:10px;min-width:0}
.appbar-user:empty{display:none}
.cloud-who{font-size:12px;color:var(--txt-3);max-width:190px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.cloud-who.warn{color:var(--warn,#f0a202)}
@media (max-width:900px){.cloud-who{display:none}}

/* ---------------- signing in ----------------
   Two places a board can be saved to, and they look identical from the
   inside. So this screen is not a form to get past - it is the place
   the tool says where the work is going. The buttons ARE the design,
   the same way the price and colour panels are.

   Tracking is set per size, not once: the title is large enough that
   default spacing reads loose, the labels small enough that they need
   more. One letter-spacing for both would be wrong at one end. */
.modal.signin{max-width:420px;width:100%}
.modal.signin h2{
  padding:22px 24px 4px;border-bottom:none;
  font-size:23px;font-weight:800;letter-spacing:-.015em;line-height:1.1;
}
.modal.signin .modal-body{padding:14px 24px 4px}
.modal.signin .modal-foot{
  padding:16px 24px 22px;border-top:none;
  flex-direction:column-reverse;gap:10px;
}
.modal.signin .modal-foot .btn{
  width:100%;justify-content:center;
  padding:14px 18px;font-size:14px;font-weight:800;letter-spacing:.03em;
  border-radius:999px;
}
.modal.signin .modal-foot .btn.primary{font-size:15px}
/* The press is the feedback, and it belongs on pointer-down - waiting
   for the click to land reads as a dead control. */
.modal.signin .modal-foot .btn:active{transform:scale(.97)}
.modal.signin .modal-foot .btn[disabled]{transform:none}

.signin-field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px}
.signin-field > label{
  font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--txt-2);
}
.signin-field > input{
  padding:14px 18px;font-size:16px;font-weight:600;
  border-radius:999px;background:var(--bg);border:1px solid var(--line-2);
}
.signin-field > input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}

/* Says what went wrong without taking the dialog away - and holds its
   line so the buttons do not jump when it appears. */
.signin-err{
  margin:0 0 6px;min-height:1.2em;
  font-size:13px;font-weight:700;color:var(--danger);
}
.signin-note{
  margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--txt-3);
}

/* ---- the app bar: which of the two places is it saving to ---- */
.cloud-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px 5px 10px;border-radius:999px;
  font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  background:var(--bg-3);border:1px solid var(--line);color:var(--txt-2);
  max-width:230px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.cloud-pill .dot{width:7px;height:7px;border-radius:999px;background:var(--ok);flex:0 0 auto}
.cloud-pill.warn{color:var(--warn);border-color:rgba(240,162,2,.35);background:rgba(240,162,2,.10)}
.cloud-pill.warn .dot{background:var(--warn)}
.appbar-user .btn{
  border-radius:999px;padding:6px 14px;
  font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
}
.appbar-user .btn:active{transform:scale(.96)}
@media (max-width:900px){.cloud-pill{max-width:none;font-size:0;gap:0;padding:7px}
  .cloud-pill .dot{width:9px;height:9px}}

@media (prefers-reduced-motion:reduce){
  .modal.signin .modal-foot .btn:active,.appbar-user .btn:active{transform:none}
}

/* ---------------- the sign-in gate ----------------
   Nothing of the tool is behind this; boot() stops before mounting, so
   the gate is the whole page until somebody signs in. */
.gate{
  position:fixed;inset:0;z-index:120;
  display:grid;place-items:center;padding:24px;overflow:auto;
  background:radial-gradient(900px 600px at 50% -10%,#16222e 0%,var(--bg) 62%);
}
body.gated{overflow:hidden}
.gate-card{
  width:100%;max-width:396px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:20px;
  padding:34px 30px 26px;box-shadow:var(--shadow);text-align:left;
}
.gate-logo{display:block;margin:0 0 16px;border-radius:10px}
/* large text: tighter tracking and leading, heavier weight - the same
   discipline the rest of the tool uses, one step up in scale */
.gate-title{
  margin:0;font-size:27px;font-weight:800;letter-spacing:-.02em;line-height:1.08;
  color:var(--txt);
}
.gate-sub{margin:8px 0 24px;font-size:14px;line-height:1.45;color:var(--txt-2)}
.gate-go{
  width:100%;justify-content:center;margin-top:4px;
  padding:15px 18px;font-size:15px;font-weight:800;letter-spacing:.03em;
  border-radius:999px;
}
.gate-go:active{transform:scale(.97)}
.gate-go[disabled]{transform:none}
.gate-note{margin:18px 0 0;font-size:12.5px;line-height:1.5;color:var(--txt-3)}
@media (max-width:420px){
  .gate-card{padding:26px 20px 20px;border-radius:16px}
  .gate-title{font-size:23px}
}
@media (prefers-reduced-motion:reduce){ .gate-go:active{transform:none} }

/* ---------------- SPILL SJEKKLISTE ----------------
   Lista er nesten bare knapper og tall, saa knappene og tallene ER
   designet - samme linje som pris- og fargepanelene. */
.chk{max-width:900px;margin:0 auto;padding:26px 22px 80px;height:100%;overflow:auto}
.chk-loading{color:var(--txt-3);font-size:14px;padding:24px 2px}

.chk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap}
.chk-titles h1{
  margin:0 0 4px;font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.05;
}
.chk-titles p{margin:0;color:var(--txt-2);font-size:14px}
.chk-score{flex:0 0 232px;min-width:200px}
.chk-scoreline{font-size:13.5px;font-weight:700;color:var(--txt-2);letter-spacing:.01em}
.chk-scoreline b{font-size:26px;font-weight:800;color:var(--txt);letter-spacing:-.02em;margin-right:3px}
.chk-bar{height:7px;border-radius:999px;background:var(--bg-3);margin-top:8px;overflow:hidden}
.chk-barfill{
  display:block;height:100%;width:0;border-radius:999px;background:var(--ok);
  transition:width .5s cubic-bezier(.22,1,.36,1);
}

.chk-list{display:flex;flex-direction:column;gap:12px;margin-top:26px}

.chk-game{
  background:var(--bg-2);border:1px solid var(--line);border-radius:16px;overflow:hidden;
  transition:border-color .2s ease,transform .18s ease,opacity .18s ease;
}
.chk-game:hover{border-color:var(--line-2)}
.chk-game.done{border-color:rgba(87,204,153,.28)}
.chk-game.fresh{animation:chk-in .32s cubic-bezier(.22,1,.36,1)}
.chk-game.going{opacity:0;transform:scale(.97)}
@keyframes chk-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.chk-ghead{display:flex;align-items:flex-start;gap:12px;padding:15px 17px;cursor:pointer}
.chk-chev{
  flex:0 0 auto;width:15px;color:var(--txt-3);font-size:21px;line-height:19px;text-align:center;
  transition:transform .22s cubic-bezier(.22,1,.36,1);
}
.chk-game.open .chk-chev{transform:rotate(90deg)}
.chk-num{
  flex:0 0 auto;font-family:var(--mono);font-size:12px;color:var(--txt-3);
  min-width:18px;text-align:right;line-height:21px;
}
.chk-gtitle{flex:1;min-width:0}
.chk-name{
  font-size:18px;font-weight:800;letter-spacing:-.01em;color:var(--txt);
  outline:none;border-radius:7px;padding:1px 6px;margin:-1px -6px;display:inline-block;max-width:100%;
}
.chk-name:focus{background:var(--bg-4)}
.chk-note{
  font-size:12.5px;color:var(--txt-3);margin-top:3px;outline:none;
  border-radius:6px;padding:1px 6px;margin-left:-6px;min-height:1.15em;
}
/* Ti kort med "Notat om status" under hvert navn er ti ganger den
   samme beskjeden. Den dukker opp når man nærmer seg feltet. */
.chk-note:empty:before{content:attr(data-empty);color:var(--txt-3);opacity:0;
  transition:opacity .15s ease}
.chk-game:hover .chk-note:empty:before,.chk-note:focus:empty:before{opacity:.5}
.chk-note:focus{background:var(--bg-4)}

.chk-meta{display:flex;align-items:center;gap:9px;margin-top:9px;flex-wrap:wrap}
.chk-metalabel{
  font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--txt-3);
}
.chk-frist{
  font-family:var(--mono);font-size:12px;color:var(--txt-2);outline:none;
  border-radius:6px;padding:2px 7px;background:var(--bg-3);min-width:3.2em;display:inline-block;
}
.chk-frist:empty:before{content:attr(data-empty);color:var(--txt-3);opacity:.6}
.chk-frist:focus{background:var(--bg-4);color:var(--txt)}
.chk-lev{
  border:1px solid var(--line);background:var(--bg-3);color:var(--txt-2);cursor:pointer;
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 13px;border-radius:999px;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.chk-lev:active{transform:scale(.95)}
.chk-lev.levert{background:rgba(87,204,153,.14);color:var(--ok);border-color:rgba(87,204,153,.38)}
.chk-lev.arbeid{background:var(--accent-dim);color:var(--accent);border-color:rgba(46,196,182,.36)}
.chk-lev.innsendt{background:rgba(61,77,254,.16);color:#93a0ff;border-color:rgba(61,77,254,.38)}
.chk-lev.transport{background:rgba(240,162,2,.13);color:var(--warn);border-color:rgba(240,162,2,.36)}

.chk-gright{display:flex;align-items:center;gap:6px;flex:0 0 auto;padding-top:2px}
.chk-pill{
  font-family:var(--mono);font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;
  white-space:nowrap;border:1px solid var(--line);background:var(--bg-3);color:var(--txt-2);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.chk-pill.all{background:rgba(87,204,153,.15);color:var(--ok);border-color:rgba(87,204,153,.4)}
.chk-pill.some{background:rgba(239,71,111,.12);color:var(--danger);border-color:rgba(239,71,111,.34)}
.chk-del{
  border:none;background:none;color:var(--txt-3);cursor:pointer;font-size:17px;line-height:1;
  padding:5px 9px;border-radius:999px;font-weight:700;
}
.chk-del:hover{background:rgba(239,71,111,.14);color:var(--danger)}
.chk-del.armed{
  background:var(--danger);color:#fff;font-size:11px;letter-spacing:.05em;text-transform:uppercase;
}

/* The one measured value here: the body animates on its own height, set
   in JS after layout, because auto cannot be transitioned. */
.chk-body{
  height:0;overflow:hidden;
  transition:height .28s cubic-bezier(.22,1,.36,1);
}
.chk-game.open .chk-body{border-top:1px solid var(--line)}
.chk-cat{padding:13px 17px 4px}
.chk-cat + .chk-cat{border-top:1px solid var(--line)}
.chk-chead{display:flex;align-items:center;gap:10px;margin-bottom:7px}
.chk-cname{
  flex:1;font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--txt-2);outline:none;border-radius:6px;padding:1px 6px;margin-left:-6px;
}
.chk-cname:focus{background:var(--bg-4)}
.chk-ccount{font-family:var(--mono);font-size:11.5px;color:var(--txt-3)}

.chk-parts{display:flex;flex-direction:column;gap:2px}
.chk-part{padding:7px 0}
.chk-prow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chk-pname{
  flex:1;min-width:90px;font-size:14.5px;font-weight:600;color:var(--txt);
  outline:none;border-radius:6px;padding:2px 6px;margin-left:-6px;
}
.chk-pname:focus{background:var(--bg-4)}
.chk-role{
  font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 10px;border-radius:999px;white-space:nowrap;border:1px solid transparent;
}
.chk-role.selger{background:rgba(61,77,254,.16);color:#93a0ff;border-color:rgba(61,77,254,.34)}
.chk-role.tekniker{background:rgba(251,99,223,.13);color:#f2a4e6;border-color:rgba(251,99,223,.3)}

.chk-status{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;flex:0 0 auto;
  padding:8px 16px;border-radius:999px;border:1px solid transparent;
  font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.chk-status .dot{width:8px;height:8px;border-radius:999px;transition:background .2s ease}
.chk-status.missing{background:rgba(239,71,111,.12);border-color:rgba(239,71,111,.32);color:var(--danger)}
.chk-status.missing .dot{background:var(--danger)}
.chk-status.done{background:rgba(87,204,153,.15);border-color:rgba(87,204,153,.38);color:var(--ok)}
.chk-status.done .dot{background:var(--ok)}
.chk-status:active{transform:scale(.95)}

.chk-pnote{
  margin-top:7px;width:100%;font-size:12.5px;
  background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:7px 11px;
  color:var(--txt);outline:none;
}
.chk-pnote:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}

.chk-add{
  margin-top:14px;width:100%;cursor:pointer;
  border:1.5px dashed var(--line-2);background:none;color:var(--txt-2);
  font-size:13.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:17px;border-radius:999px;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.chk-add:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.chk-add:active{transform:scale(.99)}

@media (max-width:640px){
  .chk{padding:20px 14px 70px}
  .chk-titles h1{font-size:25px}
  .chk-score{flex-basis:100%;margin-top:14px}
  .chk-gright{flex-direction:column-reverse;align-items:flex-end}
}
@media (prefers-reduced-motion:reduce){
  .chk-barfill,.chk-chev,.chk-note:empty:before,.chk-body,.chk-pill,.chk-status,.chk-lev{transition:none}
  .chk-game.fresh{animation:none}
  .chk-status:active,.chk-lev:active,.chk-add:active{transform:none}
}