/* PartFab Produktion
   Material från hallen: pulverlackerat stål som bas, PEI-plattans brons som enda märkesfärg och filamentets
   färger som den enda riktiga färgen. Byggplattan sedd ovanifrån är bildspråket. Archivo med bredd-axel:
   utdragen för rubriker och siffror (maskinskylt), normal bredd för allt man läser. */

@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url("/static/fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-style: normal; font-display: swap; font-weight: 800;
  src: url("/static/fonts/unbounded-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url("/static/fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ------------------------------------------------------------------ tokens
   PartFabs egna färger, samma som partfab.fi: kol, ben och signalorange. Orange används sparsamt (det aktiva,
   det viktigaste, framsteg). Byggplattan i bilderna behåller PEI-plattans brons, för det är den färgen den har. */
:root {
  --bg: #0f1012;
  --side: #0b0c0d;
  --surface: #16171a;
  --surface-2: #1e2023;
  --sunk: #0a0b0c;
  --ink: #f4f3ef;
  --ink-2: #a3a5a8;
  --ink-3: #6c6f74;
  --rule: #2a2c30;
  --rule-2: #1d1f22;
  --lift: inset 0 1px 0 rgba(255, 255, 255, .045);
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0) 120px);
  --pei: #ff6a00;
  --pei-hi: #ff8533;
  --pei-lo: #ff9a57;
  --pei-wash: #2e1b0d;
  --on-pei: #160a00;
  --plate: #c08d42;
  --plate-lo: #7a5218;
  --go: #46c486;
  --go-wash: #10251a;
  --warn: #f2b544;
  --warn-wash: #2b220d;
  --stop: #f2685a;
  --stop-wash: #331512;
  --focus: #7ba3ff;
  --plate-edge: #3a2a10;
  --ring: rgba(255, 255, 255, .22);
  --shadow-pop: 0 18px 50px -18px rgba(0, 0, 0, .75), 0 2px 6px rgba(0, 0, 0, .35);
  --r-s: 7px;
  --r: 10px;
  --r-l: 13px;
  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --side-w: 228px;
  --top-h: 0px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #e6e8e4; --side: #dde0db; --surface: #f7f8f5; --surface-2: #edefea; --sunk: #dee1dc;
  --ink: #191c1a; --ink-2: #535b56; --ink-3: #858c87; --rule: #cfd3ce; --rule-2: #e1e4df;
  --pei: #e25d00; --pei-hi: #ff6a00; --pei-lo: #9a3f00; --pei-wash: #fde3cf; --on-pei: #fff;
  --go: #1c7146; --go-wash: #d8ebdf; --warn: #a5600a; --warn-wash: #f5e5c7; --stop: #b1332a; --stop-wash: #f5dcd8;
  --focus: #2258d0; --plate-edge: #6f4f1f; --ring: rgba(0, 0, 0, .16);
  --shadow-pop: 0 18px 50px -18px rgba(25, 28, 26, .35), 0 2px 6px rgba(25, 28, 26, .06); color-scheme: light;
}

/* ------------------------------------------------------------------ bas */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 64px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 420 15px/1.5 var(--font); font-stretch: 100%;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
small, .k { font-size: 13px; color: var(--ink-2); }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.r { text-align: right; }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.i.sm { width: 15px; height: 15px; }
svg.i.lg { width: 22px; height: 22px; }

.display { font-size: clamp(30px, 3.2vw, 40px); line-height: 1.02; font-weight: 740; font-stretch: 110%; letter-spacing: -0.025em; }
h1 { font-size: clamp(24px, 2.4vw, 30px); line-height: 1.12; font-weight: 690; font-stretch: 108%; letter-spacing: -0.018em; }
h2 { font-size: 18.5px; line-height: 1.22; font-weight: 690; font-stretch: 108%; letter-spacing: -0.008em; }
h3 { font-size: 16px; line-height: 1.25; font-weight: 660; font-stretch: 104%; }
.lede { font-size: 15.5px; color: var(--ink-2); max-width: 70ch; margin-top: 8px; text-wrap: pretty; }
.lede b { color: var(--ink); font-weight: 650; }

/* ------------------------------------------------------------------ skalet: menyn till vänster, sidan till höger */
.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh;
  background: linear-gradient(90deg, var(--side) calc(var(--side-w) - 1px), var(--rule-2) calc(var(--side-w) - 1px) var(--side-w), transparent var(--side-w)); }
body.hall .shell { display: block; background: var(--bg); }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 26px;
  padding: 22px 14px 16px; background: var(--side); border-right: 1px solid var(--rule-2); scrollbar-width: thin; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; white-space: nowrap; flex: none; }
.sidebar .brand { padding: 2px 8px; }
.sidebar .brand .mark { width: 36px; height: 36px; }
.brand .word { font: 800 17px/1 "Unbounded", var(--font); letter-spacing: -0.01em; }
.brand .word span { color: var(--pei); }
.mark { width: 32px; height: 32px; flex: none; display: block; }
.sidenav { display: grid; gap: 20px; }
.sidenav .grp { display: grid; gap: 2px; }
.sidenav a { position: relative; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 10px;
  text-decoration: none; color: var(--ink-2); font-weight: 580; font-size: 15px; white-space: nowrap; }
.sidenav a svg.i { opacity: .75; }
.sidenav a:hover { color: var(--ink); background: color-mix(in srgb, var(--surface-2) 65%, transparent); }
.sidenav a.on { color: var(--ink); background: var(--surface-2); }
.sidenav a.on svg.i { color: var(--pei); opacity: 1; }
.sidenav a.on::before { content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--pei); }
.dot { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--pei); color: var(--on-pei); font-size: 11.5px;
  font-weight: 760; display: inline-grid; place-items: center; font-stretch: 100%; font-variant-numeric: tabular-nums; }
.sidenav a .dot { margin-left: auto; }
.side-end { margin-top: auto; display: grid; gap: 14px; }
.side-tools { display: grid; gap: 2px; }
.side-tools a { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; border-radius: 9px; color: var(--ink-3);
  font-size: 14px; font-weight: 560; text-decoration: none; }
.side-tools a:hover, .side-tools a.on { color: var(--ink); background: var(--surface-2); }
.simflag { font-size: 12.5px; color: var(--warn); display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.simflag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 3px var(--warn-wash); flex: none; }
.iconbtn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; color: var(--ink-2); text-decoration: none;
  background: none; border: 0; cursor: pointer; }
.iconbtn:hover, .iconbtn.on { background: var(--surface-2); color: var(--ink); }
.content { min-width: 0; width: 100%; max-width: 1280px; margin: 0 auto;
  padding: 40px max(44px, env(safe-area-inset-right, 0px)) 96px max(44px, env(safe-area-inset-left, 0px)); }
.mtop, .tabbar { display: none; }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: max(28px, env(safe-area-inset-left, 0px)); padding-right: max(28px, env(safe-area-inset-right, 0px)); }

/* mobil och smal surfplatta: menyn glider in från vänster, de viktigaste sidorna i en flikrad där tummen är */
@media (max-width: 900px) {
  :root { --top-h: calc(56px + env(safe-area-inset-top, 0px)); }   /* hemskärmsappen: under klockan och Dynamic Island */
  .shell { display: block; background: none; }
  .sidebar { position: fixed; z-index: 70; left: 0; top: 0; bottom: 0; height: auto; width: min(300px, 86vw); transform: translateX(-104%);
    transition: transform .22s ease; box-shadow: var(--shadow-pop); padding-top: max(22px, env(safe-area-inset-top, 0px)); }
  html.navopen .sidebar { transform: none; }
  html.navopen { overflow: hidden; }
  .scrim { position: fixed; inset: 0; z-index: 65; background: rgba(0, 0, 0, .62); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
  .mtop { display: flex; position: sticky; top: 0; z-index: 40; height: var(--top-h); align-items: center; gap: 6px;
    padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
    background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rule-2); }
  .mtop .brand .mark { width: 28px; height: 28px; }
  .mtop [data-scan] { color: var(--pei); }                     /* skanna med kameran: orange, Hallen bredvid är vit */
  .mtop .ttl { flex: 1; min-width: 0; margin-left: 6px; font-size: 17px; font-weight: 740; font-stretch: 114%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: calc(62px + env(safe-area-inset-bottom, 0px)); padding: 0 2px env(safe-area-inset-bottom, 0px); background: var(--side);
    border-top: 1px solid var(--rule); }
  .tabbar a, .tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    text-decoration: none; color: var(--ink-3); font: 640 10.5px/1 var(--font); font-stretch: 86%; background: none; border: 0; cursor: pointer; }
  .tabbar svg.i { width: 21px; height: 21px; }
  .tabbar a.on { color: var(--ink); }
  .tabbar a.on svg.i { color: var(--pei); }
  .tabbar a.on::after { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2.5px; border-radius: 0 0 3px 3px; background: var(--pei); }
  .tabbar .dot { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 17px; height: 17px; font-size: 10px; padding: 0 4px; }
  .content { padding: 22px max(16px, env(safe-area-inset-right, 0px)) calc(100px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }
@media (max-width: 640px) { .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); } }
html { scroll-padding-top: calc(var(--top-h) + 64px); }

/* ------------------------------------------------------------------ sidhuvud och sektioner */
.pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 24px; margin-bottom: 30px; flex-wrap: wrap; }
.pagehead > div:first-child { min-width: 0; max-width: 820px; }
.over { font-size: 14px; color: var(--ink-2); display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; }
.over + h1, .over + .display { margin-top: 10px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
form.inline { display: inline; margin: 0; }
.section { margin-top: 44px; }
.section:first-child { margin-top: 0; }
.sh { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.sh p { color: var(--ink-2); font-size: 14px; margin-top: 4px; }
.count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; margin-left: 8px; border-radius: 11px;
  background: var(--pei); color: var(--on-pei); font-size: 12.5px; font-weight: 740; font-stretch: 100%; vertical-align: 3px; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 40px; align-items: start; }
section + .cols, .figures + .cols { margin-top: 48px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1240px) { .cols { grid-template-columns: 1fr; gap: 12px; } }
@media (max-width: 800px) { .grid2 { grid-template-columns: 1fr; } }
.side > * + * { margin-top: 40px; }
.side h2 { margin-bottom: 14px; }

/* ytor används sparsamt: för saker som hör ihop */
.panel { background: var(--sheen), var(--surface); border: 1px solid var(--rule-2); border-radius: var(--r-l); box-shadow: var(--lift), 0 1px 2px rgba(0, 0, 0, .25); }
.panel.pad { padding: 24px; }
.panel > .ph { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 0; }
.panel > .pb { padding: 16px 24px 24px; }
.blank { padding: 28px 24px; color: var(--ink-2); font-size: 14.5px; }
.blank b { color: var(--ink); }
.hr { height: 1px; background: var(--rule-2); margin: 20px 0; }

/* ------------------------------------------------------------------ knappar och fält */
.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: var(--r-s); border: 1px solid var(--rule); background: linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0)), var(--surface-2);
  color: var(--ink); box-shadow: var(--lift), 0 1px 2px rgba(0, 0, 0, .3);
  font: 600 14.5px/1 var(--font); letter-spacing: .005em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .12s, border-color .12s, transform .06s, box-shadow .12s; }
.btn:hover { border-color: color-mix(in srgb, var(--ink-3) 80%, transparent); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: linear-gradient(180deg, #fff, #e9e7e1); border-color: #fff; color: #111214; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.btn.primary:hover { background: color-mix(in srgb, var(--ink) 84%, var(--pei)); }
.btn.pei { background: linear-gradient(180deg, var(--pei-hi), var(--pei)); border-color: var(--pei); color: var(--on-pei); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 6px 18px -8px color-mix(in srgb, var(--pei) 70%, transparent); }
.btn.pei:hover { background: var(--pei-hi); border-color: var(--pei-hi); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); box-shadow: none; }
.btn.ghost:hover { color: var(--ink); background: var(--surface-2); }
.btn.danger { color: var(--stop); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 13.5px; border-radius: 7px; }
.btn.lg { height: 48px; padding: 0 22px; font-size: 16px; }
.btn.block { width: 100%; }
.btn svg.i { margin-left: -2px; }

input, select, textarea { font: inherit; color: var(--ink); background: var(--sunk); border: 1px solid var(--rule); border-radius: var(--r-s);
  padding: 9px 12px; min-height: 42px; width: 100%; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: color-mix(in srgb, var(--pei) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pei) 16%, transparent); }
input[type="color"] { padding: 3px; width: 48px; height: 42px; cursor: pointer; flex: none; }
input[type="checkbox"], input[type="radio"] { width: 18px; min-height: 18px; height: 18px; accent-color: var(--pei); flex: none; }
textarea { min-height: 96px; resize: vertical; }
label { display: grid; gap: 6px; font-size: 13.5px; font-weight: 620; color: var(--ink); align-content: start; }
label.check { display: flex; gap: 10px; align-items: center; font-weight: 500; font-size: 14.5px; }
.hint { font-weight: 400; color: var(--ink-3); font-size: 12.5px; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px 20px; }
.fixedval { display: grid; gap: 6px; font-size: 13.5px; font-weight: 620; align-content: start; }
.fixedval .val { display: flex; align-items: center; min-height: 42px; padding: 0 12px; border-radius: var(--r-s);
  background: var(--sunk); border: 1px solid var(--rule-2); font-weight: 560; font-size: 15px; }
.fields .wide { grid-column: 1 / -1; }
.inrow { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.inrow > label { flex: 1 1 140px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.formblock + .formblock { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--rule-2); }
.formblock > h2 { margin-bottom: 4px; }
.formblock > p { color: var(--ink-2); font-size: 14px; margin-bottom: 18px; }

/* ------------------------------------------------------------------ meddelanden */
.flash { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: var(--r); margin-bottom: 28px; font-weight: 560; }
.flash.ok { background: var(--go-wash); color: var(--go); }
.flash.err { background: var(--stop-wash); color: var(--stop); }
.flash .x { margin-left: auto; background: none; border: 0; color: inherit; cursor: pointer; font-size: 20px; line-height: 1; padding: 0 4px; }
.note { padding: 12px 14px; border-radius: var(--r-s); background: var(--surface-2); color: var(--ink-2); font-size: 14px; }
.note.warn { background: var(--warn-wash); color: var(--warn); }
.note b { color: inherit; }

/* chips: färgad text på svag ton, alltid gemener */
.chip { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 9px 0 8px; border-radius: 7px; font-size: 12.5px; font-weight: 620;
  background: var(--surface-2); color: var(--ink-2); white-space: nowrap; vertical-align: middle; letter-spacing: .005em;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent); }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px color-mix(in srgb, currentColor 70%, transparent); }
.chip.plain::before { display: none; }
.chip.ok { background: var(--go-wash); color: var(--go); }
.chip.risk { background: var(--warn-wash); color: var(--warn); }
.chip.late { background: var(--stop-wash); color: var(--stop); }
.chip.new { background: var(--pei-wash); color: var(--pei-lo); }
.chip.sale::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--pei); opacity: 1; }
.chip.prod::before { background: var(--pei); opacity: 1; }
.chip.run { background: var(--pei-wash); color: var(--pei-lo); }
.chip.run::before { background: var(--pei); opacity: 1; animation: pulse 1.6s ease-in-out infinite; }
.chip.lost { color: var(--ink-3); }
.chip.pei { background: var(--pei); color: var(--on-pei); }
.picker .state .chip { height: 30px; padding: 0 12px; font-size: 14px; }
@keyframes pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .chip.run::before { animation: none; } }

/* ------------------------------------------------------------------ spolar */
.spools { display: inline-flex; gap: 5px; align-items: center; flex-wrap: wrap; vertical-align: middle; }
.spool { --c: #999; width: 20px; height: 20px; border-radius: 50%; flex: none; display: inline-block; position: relative;
  background: radial-gradient(circle, #0b0c0d 0 15%, #3a3d42 16% 22%, transparent 23%),
    repeating-radial-gradient(circle, rgba(255, 255, 255, .07) 0 1px, rgba(0, 0, 0, .07) 1px 2px),
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 78%, #fff) 0, var(--c) 45%, color-mix(in srgb, var(--c) 80%, #000) 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 1px 3px rgba(0, 0, 0, .5); }
.spool.sm { width: 16px; height: 16px; }
.spool.lg { width: 34px; height: 34px; }
.spool.xl { width: 56px; height: 56px; }
.spool.unknown { background: radial-gradient(circle, var(--surface) 0 17%, transparent 18%),
  repeating-linear-gradient(45deg, color-mix(in srgb, var(--ink-3) 70%, transparent) 0 1.5px, var(--surface-2) 1.5px 4.5px);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink-3) 70%, transparent); }
.spool.empty { background: radial-gradient(circle, var(--ink-3) 0 9%, transparent 10%); box-shadow: inset 0 0 0 1.5px var(--rule); }
.ams { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.ams .unit { display: inline-flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--surface-2); }

/* ------------------------------------------------------------------ byggplattan */
svg.plate { display: block; width: 100%; height: auto; max-width: 100%; overflow: visible; border-radius: 9px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 16px 30px -18px rgba(0, 0, 0, .85); }
svg.plate .pei-edge { fill: none; stroke: rgba(255, 236, 200, .16); stroke-width: 1.5; }
svg.plate .o-plan { opacity: .32; }
svg.plate .nozzle { stroke: var(--pei-hi); stroke-width: 1.6; filter: drop-shadow(0 0 2.5px var(--pei)); }
svg.plate.s-byt-filament { box-shadow: 0 0 0 3px var(--warn), 0 16px 30px -18px rgba(0, 0, 0, .85); }
svg.plate.s-väntar { opacity: .55; }

/* ------------------------------------------------------------------ Idag: att göra */
.todo { background: var(--sheen), var(--surface); border: 1px solid var(--rule-2); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--lift), 0 1px 2px rgba(0, 0, 0, .25); }
.todo .t { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px 14px 16px;
  text-decoration: none; color: inherit; }
.todo .t + .t { border-top: 1px solid var(--rule-2); }
a.t:hover, .todo .t:has(a.cover:hover) { background: var(--surface-2); }
.todo .ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); }
.todo .t.u0 .ic { background: var(--pei-wash); color: var(--pei-lo); }
.todo .t.u0.alert .ic { background: var(--stop-wash); color: var(--stop); }
.todo .t b { display: block; font-weight: 650; font-size: 15.5px; }
.todo .t small { display: block; margin-top: 2px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo .more { padding: 12px 18px; border-top: 1px solid var(--rule-2); font-size: 14px; }
.allclear { display: flex; gap: 14px; align-items: center; padding: 22px; }

/* ------------------------------------------------------------------ hallen (skrivarbänken) */
.bench { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); background: var(--sheen), var(--surface); border: 1px solid var(--rule-2);
  border-radius: var(--r-l); overflow: hidden; box-shadow: var(--lift), 0 1px 2px rgba(0, 0, 0, .25); }
.machine { padding: 24px; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 22px; align-items: start; position: relative;
  text-decoration: none; color: inherit; }
.machine + .machine { border-left: 1px solid var(--rule-2); }
a.machine:hover { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.machine .name { display: flex; align-items: baseline; gap: 8px; }
.machine .name h2 { font-size: 24px; font-stretch: 110%; font-weight: 700; }
.machine .name small { color: var(--ink-3); }
.machine .job { margin-top: 10px; font-size: 15px; line-height: 1.35; }
.machine .job b { font-weight: 660; display: block; }
.machine .eta { margin-top: 6px; font-size: 13.5px; color: var(--ink-2); }
.machine .bar { height: 4px; border-radius: 2px; background: var(--sunk); margin-top: 12px; overflow: hidden; }
.machine .bar i { display: block; height: 100%; background: var(--pei); border-radius: 2px; }
.machine .then { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--rule); font-size: 13.5px; color: var(--ink-2); }
.machine .then b { color: var(--ink); font-weight: 620; }
.machine .ams { margin-top: 14px; }
.machine.off .plate-wrap { opacity: .4; filter: grayscale(1); }
.plate-wrap { position: relative; }
.plate-wrap .pct { position: absolute; right: 8px; bottom: 8px; background: rgba(20,16,10,.74); color: #fff; font-size: 12px; font-weight: 680;
  padding: 2px 7px; border-radius: 9px; font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .machine + .machine { border-left: 0; border-top: 1px solid var(--rule-2); } }
@media (max-width: 560px) { .machine { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 20px; } .machine .name h2 { font-size: 21px; } }

/* ------------------------------------------------------------------ listor av order */
.olist { background: var(--sheen), var(--surface); border: 1px solid var(--rule-2); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--lift), 0 1px 2px rgba(0, 0, 0, .25); }
.orow { display: grid; grid-template-columns: minmax(170px, 1.3fr) minmax(150px, 1.4fr) 104px minmax(160px, 1fr); gap: 20px; align-items: center;
  padding: 16px 22px; text-decoration: none; color: inherit; }
.orow + .orow { border-top: 1px solid var(--rule-2); }
a.orow:hover { background: var(--surface-2); }
.orow .who h3 { font-size: 16.5px; font-stretch: 108%; }
.orow .who .sub { margin-top: 6px; display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--ink-3); flex-wrap: wrap; }
.orow .who .sub .spool { width: 16px; height: 16px; }
.orow .who .sub .spools { gap: 3px; }
.orow .units { text-align: right; }
.orow .units b { font-size: 20px; font-weight: 740; font-stretch: 110%; font-variant-numeric: tabular-nums; }
.orow .units small { display: block; color: var(--ink-3); }
.orow .when { font-size: 13.5px; color: var(--ink-2); display: grid; gap: 5px; justify-items: start; }
.orow .when b { color: var(--ink); font-weight: 620; }
.orow.head { padding-top: 11px; padding-bottom: 11px; font-size: 12.5px; color: var(--ink-3); font-weight: 620; background: var(--surface-2); }
@media (max-width: 860px) { .orow { grid-template-columns: 1fr auto; } .orow .stripcell, .orow.head { display: none; } .orow .when { grid-column: 1 / -1; } }

.strip { display: flex; flex-wrap: wrap; gap: 3px; }
.strip i { width: 13px; height: 13px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--ink-3); opacity: .7; }
.strip i.klar { background: var(--pei); box-shadow: none; opacity: 1; }
.strip i.printas { background: linear-gradient(to top, var(--pei) var(--p, 30%), var(--pei-wash) var(--p, 30%)); box-shadow: inset 0 0 0 1.5px var(--pei); opacity: 1; }
.strip i.byt-filament { box-shadow: inset 0 0 0 1.5px var(--warn); opacity: 1; }
.strip i.väntar { box-shadow: inset 0 0 0 1.5px var(--rule); }
.strip.none { color: var(--ink-3); font-size: 13px; }
.meter { height: 6px; border-radius: 3px; background: var(--sunk); overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--pei); border-radius: 3px; }
.meter.done i { background: var(--go); }

/* tabeller */
.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th { text-align: left; font-weight: 620; color: var(--ink-3); font-size: 12.5px; padding: 0 12px 10px 0; white-space: nowrap; }
.table td { padding: 12px 12px 12px 0; border-top: 1px solid var(--rule-2); vertical-align: middle; }
.table th.r, .table td.r { text-align: right; }
.table tr.link { cursor: pointer; }
.table tr.link:hover td { background: var(--surface-2); }
.table td:first-child, .table th:first-child { padding-left: 0; }
.panel .table { margin: 0; }
.tablewrap { overflow-x: auto; }

/* listor i sidokolumnen */
.nextlist { display: grid; }
.nextlist .n { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--rule); }
.nextlist .n:first-child { border-top: 0; padding-top: 2px; }
.nextlist time { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; line-height: 1.3; }
.nextlist time b { display: block; color: var(--ink); font-size: 15px; font-weight: 700; }
.nextlist .what { font-size: 14.5px; line-height: 1.35; min-width: 0; }
.nextlist .what small { display: block; color: var(--ink-3); }
.log { display: grid; gap: 10px; font-size: 13.5px; }
.log div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; color: var(--ink-2); }
.log time { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.figs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule-2); border: 1px solid var(--rule); border-radius: var(--r-l); overflow: hidden; }
.figs > a, .figs > div { background: var(--surface); padding: 16px 18px; text-decoration: none; color: inherit; }
.figs > a:hover { background: var(--surface-2); }
.figs .v { font-size: 22px; font-weight: 700; font-stretch: 110%; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.figs .k { margin-top: 2px; display: block; }

/* ------------------------------------------------------------------ orderns sida */
.stepper { position: relative; display: flex; gap: 0; margin-top: 28px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; list-style: none; padding-left: 0; }
.stepper li { flex: 1 1 0; min-width: 112px; position: relative; padding: 18px 12px 0 0; font-size: 13px; line-height: 1.3; color: var(--ink-3); }
.stepper li::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: var(--rule); }
.stepper li::after { content: ""; position: absolute; left: 0; top: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--rule); }
.stepper li.done { color: var(--ink-2); }
.stepper li.done::before { background: var(--pei); }
.stepper li.done::after { background: var(--pei); box-shadow: none; }
.stepper li.now { color: var(--ink); font-weight: 690; }
.stepper li.now::after { background: var(--surface); box-shadow: inset 0 0 0 3px var(--pei), 0 0 0 4px var(--pei-wash); }

.nextstep { margin-top: 30px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 22px;
  border-radius: var(--r-l); background: var(--pei-wash); color: var(--ink); }
.nextstep .ic { width: 52px; height: 52px; border-radius: 14px; background: var(--pei); color: var(--on-pei); display: grid; place-items: center; }
.nextstep .ic svg.i { width: 24px; height: 24px; }
.nextstep small { color: var(--pei-lo); font-weight: 650; font-size: 12.5px; display: block; }
.nextstep h2 { font-size: 20px; margin-top: 2px; }
.nextstep p { color: var(--ink-2); font-size: 14.5px; margin-top: 4px; }
.nextstep.done { background: var(--go-wash); }
.nextstep.done .ic { background: var(--go); }
.nextstep.done small { color: var(--go); }
@media (max-width: 700px) { .nextstep { grid-template-columns: 44px minmax(0, 1fr); } .nextstep .ic { width: 44px; height: 44px; } .nextstep > .actions { grid-column: 1 / -1; } }

.subnav { position: sticky; top: var(--top-h); z-index: 20; margin: 34px 0 0; background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.subnav a { padding: 13px 12px; text-decoration: none; color: var(--ink-2); font-weight: 580; font-size: 14.5px; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav a:hover { color: var(--ink); }
.subnav a.on { color: var(--ink); border-bottom-color: var(--pei); }
.osec { padding-top: 44px; }
.osec > .sh h2 { font-size: 22px; }

.figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-l); }
.figures > div { padding: 20px 22px; min-width: 0; }
.figures > div + div { border-left: 1px solid var(--rule-2); }
.figures .v { font-size: 32px; font-weight: 700; font-stretch: 110%; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.figures .v small { font-size: 17px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.figures .k { margin-top: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
@media (max-width: 760px) { .figures { grid-template-columns: 1fr 1fr; } .figures > div:nth-child(3) { border-left: 0; } .figures > div:nth-child(n+3) { border-top: 1px solid var(--rule-2); } }

.plates { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 18px; }
.pl { display: grid; gap: 12px; margin: 0; align-content: start; }
.pl figcaption { display: grid; gap: 2px; font-size: 13.5px; }
.pl figcaption b { font-size: 15px; font-weight: 690; font-stretch: 110%; }
.pl figcaption .st { display: flex; gap: 8px; align-items: center; color: var(--ink-2); }

.proofs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.proof { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-l); overflow: hidden; display: grid; }
.proof .img { aspect-ratio: 4 / 3; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; }
.proof .img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.proof .img .none { color: var(--ink-3); font-size: 13px; }
.proof .body { padding: 14px 16px 16px; display: grid; gap: 8px; }
.proof .body .h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.proof .body .h b { font-size: 17px; font-weight: 700; font-stretch: 110%; }
.proof .body p { font-size: 13.5px; color: var(--ink-2); }
.proof.chosen { border-color: var(--go); box-shadow: 0 0 0 1px var(--go); }
.proof .decide { display: flex; gap: 6px; flex-wrap: wrap; }

.steps { display: grid; gap: 12px; }
.stepc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; align-items: center; padding: 16px 18px; border-radius: var(--r);
  background: var(--surface); border: 1px solid var(--rule); }
.stepc h3 { display: flex; gap: 10px; align-items: baseline; }
.stepc h3 .num { font-size: 22px; font-weight: 700; font-stretch: 110%; }
.stepc h3 .of { color: var(--ink-3); font-weight: 500; font-size: 14px; }
.stepc .meter { grid-column: 1 / -1; }
.stepc .add { display: flex; gap: 6px; flex-wrap: wrap; }
.stepc.full { border-color: color-mix(in srgb, var(--go) 50%, var(--rule)); }
.weigh { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; }
.weigh .res { font-size: 26px; font-weight: 700; font-stretch: 110%; min-width: 110px; text-align: right; font-variant-numeric: tabular-nums; }

.kv { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px 14px; font-size: 14.5px; }
.kv dt { color: var(--ink-2); }
.colors { display: grid; gap: 14px; }
.colors .c { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.colors .c b { font-weight: 650; }
.colors .c small { display: block; color: var(--ink-3); }
.price { display: grid; gap: 8px; font-size: 14.5px; }
.price .row { display: flex; justify-content: space-between; gap: 12px; }
.price .row span:first-child { color: var(--ink-2); }
.price .tot { padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--rule); font-weight: 720; font-size: 16px; }
.price .tot span:first-child { color: var(--ink); }
.tip { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-s); background: var(--surface-2); font-size: 13.5px; color: var(--ink-2); }
.tip b { color: var(--ink); }
.copybox { position: relative; background: var(--surface-2); border-radius: var(--r); padding: 14px 16px; font-size: 14.5px; line-height: 1.55; }
.copybox .lang { font-size: 12px; font-weight: 700; color: var(--ink-3); display: block; margin-bottom: 6px; }
.copybox .btn { position: absolute; top: 10px; right: 10px; }
.copybox p { padding-right: 76px; }
.timeline { display: grid; gap: 0; }
.timeline .ev { display: grid; grid-template-columns: 90px 14px minmax(0, 1fr); gap: 12px; font-size: 14px; }
.timeline .ev time { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 13px; padding-top: 1px; }
.timeline .ev .dot { position: relative; }
.timeline .ev .dot::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--rule-2); }
.timeline .ev .dot::after { content: ""; position: absolute; left: 3px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.timeline .ev.k-mallbild .dot::after, .timeline .ev.k-offert .dot::after { background: var(--pei); }
.timeline .ev.k-status .dot::after { background: var(--ink); }
.timeline .ev p { padding-bottom: 14px; color: var(--ink-2); }
.timeline .ev p b { color: var(--ink); font-weight: 620; }

/* ------------------------------------------------------------------ säljtavlan */
.board { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 16px; overflow-x: auto; padding-bottom: 6px; }
.bcol { background: var(--surface-2); border-radius: var(--r-l); padding: 12px; display: grid; gap: 10px; align-content: start; min-height: 220px; }
.bcol > header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 6px 4px; }
.bcol > header h2 { font-size: 15.5px; }
.bcol > header small { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.bcol > header h2 .cnt { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; margin-left: 8px;
  border-radius: 11px; background: var(--surface); color: var(--ink-2); font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; vertical-align: 2px; }
.bcol.yes { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pei) 45%, transparent); }
.bcol.yes.has { background: var(--pei-wash); box-shadow: none; }
.bcol.yes .emptycol { color: var(--pei-lo); }
.deal { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); padding: 14px; display: grid; gap: 8px; text-decoration: none; color: inherit;
  box-shadow: 0 1px 0 rgba(0,0,0,.03); }
.deal:hover { border-color: var(--ink-3); }
.deal .h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.deal .h b { font-weight: 680; font-size: 15px; line-height: 1.25; }
.deal .h .v { font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
.deal .m { font-size: 13px; color: var(--ink-2); display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; }
.deal .thumbs { display: flex; gap: 6px; }
.deal .thumbs img { width: 52px; height: 40px; object-fit: cover; border-radius: 6px; border: 1px solid var(--rule); background: var(--surface-2); }
.deal .fu { font-size: 12.5px; font-weight: 650; }
.deal .fu.sen { color: var(--stop); }
.deal .fu.idag { color: var(--warn); }
.deal .fu.later { color: var(--ink-3); font-weight: 500; }
.bcol .emptycol { padding: 18px 8px; font-size: 13.5px; color: var(--ink-3); text-align: center; }

.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0; }
.calc .in { padding: 24px; border-right: 1px solid var(--rule-2); display: grid; gap: 16px; align-content: start; }
.calc .out { padding: 24px; display: grid; gap: 18px; align-content: start; }
.calc .big { display: flex; gap: 28px; flex-wrap: wrap; }
.calc .big div .v { font-size: 30px; font-weight: 700; font-stretch: 110%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.calc .big div .k { display: block; margin-top: 4px; }
.tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 6px; }
.tiers a { display: grid; gap: 2px; padding: 9px 10px; border-radius: 9px; background: var(--surface-2); text-decoration: none; color: inherit; }
.tiers a b { font-size: 15px; font-weight: 720; font-variant-numeric: tabular-nums; }
.tiers a small { font-size: 12px; }
.tiers a.on { background: var(--ink); color: var(--surface); }
.tiers a.on small { color: color-mix(in srgb, var(--surface) 70%, transparent); }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } .calc .in { border-right: 0; border-bottom: 1px solid var(--rule-2); } }

/* ------------------------------------------------------------------ lager */
.shopping { display: grid; gap: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-l); overflow: hidden; }
.shopping .s { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 18px; }
.shopping .s + .s { border-top: 1px solid var(--rule-2); }
.shopping .s b { font-weight: 660; }
.shopping .s small { display: block; }
.shopping .s .amt { font-size: 18px; font-weight: 700; font-stretch: 110%; font-variant-numeric: tabular-nums; }
.shopping .s.urgent small { color: var(--stop); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; }
.fcard { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-l); padding: 18px; display: grid; gap: 14px; }
.fcard .h { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.fcard .h b { font-size: 16px; font-weight: 680; display: block; }
.fcard .h small { display: block; }
.fcard .kg { font-size: 28px; font-weight: 700; font-stretch: 110%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fcard .kg small { font-size: 15px; color: var(--ink-3); font-weight: 600; }
.gauge { position: relative; height: 10px; border-radius: 5px; background: var(--sunk); overflow: hidden; }
.gauge i { position: absolute; top: 0; bottom: 0; left: 0; background: var(--ink-3); border-radius: 5px; }
.gauge i.need { background: repeating-linear-gradient(135deg, var(--pei) 0 4px, color-mix(in srgb, var(--pei) 60%, transparent) 4px 8px); }
.gauge .low { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--stop); }
.fcard .facts { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); flex-wrap: wrap; }
.fcard .facts b { color: var(--ink); font-weight: 650; }
.fcard form { display: flex; gap: 6px; flex-wrap: wrap; }
.fcard form input { width: 90px; min-height: 34px; height: 34px; padding: 4px 9px; }

/* ------------------------------------------------------------------ ekonomi */
.bars { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; height: 220px; padding-top: 26px; margin-top: 8px; }
.bars .b { display: flex; flex-direction: column; gap: 8px; height: 100%; min-width: 0; text-align: center; }
.bars .b .col { flex: 1; position: relative; border-bottom: 1px solid var(--rule); }
.bars .b i { position: absolute; left: 0; right: 0; bottom: 0; min-height: 3px; border-radius: 8px 8px 2px 2px;
  background: color-mix(in srgb, var(--pei) 32%, var(--surface-2)); }
.bars .b.now i { background: var(--pei); }
.bars .b small { font-size: 12.5px; }
.bars .b .v { position: absolute; left: 0; right: 0; font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.bars .b.now .v { color: var(--ink); }

/* ------------------------------------------------------------------ plan: tidslinje */
.tl { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-l); overflow: hidden; }
.tl .scroll { overflow-x: auto; }
.tl .inner { min-width: 980px; }
.tl .row { display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.tl .row + .row { border-top: 1px solid var(--rule-2); }
.tl .lab { padding: 16px 18px; display: grid; gap: 6px; align-content: center; border-right: 1px solid var(--rule-2); background: var(--surface); position: sticky; left: 0; z-index: 2; }
.tl .lab b { font-size: 17px; font-weight: 700; font-stretch: 110%; }
.tl .track { position: relative; height: 76px; }
.tl .days { height: 48px; }
.tl .day { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--rule-2); }
.tl .day.weekend { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--ink) 5%, transparent) 6px 7px); }
.tl .work { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--pei) 7%, transparent); }
.tl .days .day span { position: absolute; left: 6px; top: 6px; padding: 1px 5px; border-radius: 5px; background: var(--surface); z-index: 2;
  font-size: 13px; color: var(--ink-2); white-space: nowrap; font-weight: 560; }   /* nu-linjen går bakom dagens namn */
.tl .days .day.today span { color: var(--ink); font-weight: 720; }
.tl .tick { position: absolute; bottom: 4px; font-size: 11px; color: var(--ink-3); transform: translateX(-50%); font-variant-numeric: tabular-nums; }
.tl .now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--pei); z-index: 1; }
.tl .days .now::after { content: "nu"; position: absolute; top: 27px; left: 4px; padding: 0 5px; border-radius: 5px; font-size: 11px;
  line-height: 16px; font-weight: 760; color: var(--on-pei); background: var(--pei); }
.tl .b { position: absolute; top: 16px; height: 44px; border-radius: 8px; background: var(--c); color: var(--ink-on); display: flex; align-items: center; gap: 7px;
  padding: 0 10px; overflow: hidden; white-space: nowrap; font-size: 13px; font-weight: 620; text-decoration: none; min-width: 0;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.16), 0 1px 0 rgba(0,0,0,.06); }
.tl .b span { overflow: hidden; text-overflow: ellipsis; }
.tl .b .acc { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--a); box-shadow: 0 0 0 1.5px rgba(255,255,255,.7); }
.tl .b.printas { box-shadow: inset 0 0 0 2px var(--pei), 0 0 0 3px var(--pei-wash); }
.tl .b.byt-filament::before, .tl .b.swap::before { content: ""; width: 6px; align-self: stretch; margin-left: -10px; margin-right: 2px;
  background: repeating-linear-gradient(180deg, var(--warn) 0 4px, transparent 4px 8px); }
.tl .b.narrow { padding: 0; justify-content: center; }
.tl .b.narrow span { display: none; }
.tl .legend { display: flex; gap: 22px; flex-wrap: wrap; padding: 14px 18px; border-top: 1px solid var(--rule-2); font-size: 13px; color: var(--ink-2); }
.tl .legend i { display: inline-block; width: 18px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 7px; }
.lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 28px; }
.lane h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.lane > small { display: block; margin-bottom: 12px; }
.q { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--rule); align-items: center; }
.q .qimg { width: 52px; height: 38px; border-radius: 9px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule-2); display: grid; place-items: center; overflow: hidden; }
.q .qimg img { width: 44px; height: auto; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .55)); }
.q .sw { width: 30px; height: 30px; border-radius: 7px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); position: relative; }
.q b { font-weight: 640; }
.q small { display: block; margin-top: 2px; }
.q .swapnote { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: 13px; color: var(--warn); }
.q .swapnote span { display: inline-flex; align-items: center; gap: 6px; }
.q.now b::after { content: "printas"; margin-left: 8px; font-size: 12px; font-weight: 650; color: var(--pei-lo); background: var(--pei-wash); padding: 2px 7px; border-radius: 9px; }
details.more { border-top: 1px solid var(--rule); }
details.more summary { cursor: pointer; padding: 12px 0; color: var(--ink-2); font-size: 14px; font-weight: 580; list-style: none; }
details.more summary::-webkit-details-marker { display: none; }
details.more summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 10px; border-radius: 6px; background: var(--surface-2); font-weight: 700; }
details.more[open] summary::before { content: "−"; }

/* flikar inom en sida */
/* linjen under är en skugga inuti, så att flikarna kan rulla i sidled på mobilen utan att sidan blir bredare */
.tabs { display: flex; gap: 4px; margin: -12px 0 30px; box-shadow: inset 0 -1px 0 var(--rule); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; white-space: nowrap; padding: 12px 14px; text-decoration: none; color: var(--ink-2); font-weight: 600; border-bottom: 2px solid transparent; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--pei); }

/* ------------------------------------------------------------------ skrivare och underhåll */
.pcard { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-l); padding: 26px; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 30px; }
.pcard + .pcard { margin-top: 22px; }
.pcard .id { display: grid; gap: 10px; align-content: start; }
.pcard .id h2 { font-size: 24px; font-stretch: 110%; font-weight: 700; }
.pcard .id code { font: 600 12.5px/1 var(--font); color: var(--ink-3); }
.pcard.off .id svg { opacity: .4; filter: grayscale(1); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 10px; }
.slot { border: 1px solid var(--rule); border-radius: var(--r); padding: 12px; display: grid; gap: 8px; background: var(--bg); }
.slot .h { display: flex; gap: 10px; align-items: center; font-weight: 650; font-size: 14px; }
.slot .r { display: flex; gap: 6px; text-align: left; }
.slot .r select { flex: 1; min-width: 0; }
.maint { display: grid; gap: 0; }
.maint .m { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--rule-2); }
.maint .m:first-child { border-top: 0; }
.maint .m b { font-weight: 620; font-size: 14.5px; }
.maint .m small { display: block; }
.maint .m .meter i { background: var(--ink-3); }
.maint .m.soon .meter i { background: var(--warn); }
.maint .m.due .meter i { background: var(--stop); }
h3.sub { margin: 26px 0 6px; font-size: 15px; }
@media (max-width: 760px) { .pcard { grid-template-columns: 1fr; } .maint .m { grid-template-columns: 1fr auto; } .maint .m .meter { grid-column: 1 / -1; } }

/* ------------------------------------------------------------------ kunder */
.avatar { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; font-stretch: 110%; font-size: 14px;
  background: var(--surface-2); color: var(--ink-2); flex: none; }
.cust { display: flex; gap: 12px; align-items: center; }
.cust b { font-weight: 650; display: block; }
.cust small { display: block; }
.langtag { font-size: 11.5px; font-weight: 750; padding: 2px 6px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); }

/* ------------------------------------------------------------------ utskrifter */
.paper { background: #fff; color: #111; max-width: 780px; margin: 0 auto; padding: 48px; border-radius: 14px; border: 1px solid var(--rule); }
.paper h1 { font-size: 30px; color: #111; }
.paper .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 28px 0; font-size: 14.5px; }
.paper table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
.paper th { text-align: left; font-size: 12.5px; color: #666; font-weight: 620; padding: 0 0 8px; border-bottom: 1px solid #ccc; }
.paper td { padding: 12px 0; border-bottom: 1px solid #e3e3e3; }
.paperword { font: 800 21px/1 "Unbounded", var(--font); letter-spacing: -0.01em; color: #141517; }
.paperword span { color: #ff6a00; }
.paper .ref { margin-top: 36px; padding: 18px 20px; border-radius: 12px; background: #f3ead8; color: #4d3610; font-size: 14.5px; }
.paper .ref b { color: #2c1e06; }
.binlabel { width: 100mm; min-height: 60mm; background: #fff; color: #111; border: 1px solid #bbb; border-radius: 10px; padding: 14px 16px;
  display: grid; grid-template-columns: 1fr 34mm; gap: 12px; margin: 0 auto; }
.binlabel h2 { font-size: 26px; font-stretch: 125%; font-weight: 820; color: #111; }
.binlabel .qr svg { width: 34mm; height: 34mm; }
.binlabel p { font-size: 13px; margin-top: 4px; }
@media screen { .binlabel { max-width: 100%; } }

.sheets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 22px; align-items: start; }
.ls { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-l); padding: 24px; display: grid; gap: 14px; align-content: start; break-inside: avoid; }
.ls header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ls header h2 { font-size: 26px; font-stretch: 125%; font-weight: 820; }
.ls .first { font-size: 14.5px; }
.ls .first b { font-weight: 650; }
.ls .sl { display: grid; grid-template-columns: 34px 40px minmax(0, 1fr) 22px; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule-2); }
.ls .sl .no { font-size: 22px; font-weight: 820; font-stretch: 120%; color: var(--ink-3); }
.ls .sl.chg .no { color: var(--pei); }
.ls .sl .nm b { font-weight: 650; }
.ls .sl .nm small { display: block; }
.ls .sl .tag { font-size: 12px; font-weight: 700; color: var(--pei-lo); background: var(--pei-wash); padding: 2px 7px; border-radius: 9px; margin-left: 6px; }
.box { width: 20px; height: 20px; border: 1.5px solid var(--ink-3); border-radius: 5px; display: inline-block; vertical-align: middle; }
.ls .later { font-size: 13.5px; color: var(--ink-2); display: grid; gap: 6px; }
.ls .later div { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ls .checks { display: flex; gap: 18px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 13.5px; }
.ls .checks span { display: inline-flex; gap: 8px; align-items: center; }
.labels { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.label { background: #fff; color: #111; border-radius: 14px; border: 1px solid var(--rule); padding: 20px; display: grid; gap: 6px; justify-items: center; text-align: center; break-inside: avoid; }
.label svg.qrc { width: 150px; height: 150px; }
.label b { font-size: 26px; font-weight: 820; font-stretch: 125%; }
.label code { font: 600 13px/1 var(--font); color: #555; letter-spacing: .02em; }

/* ------------------------------------------------------------------ guiden */
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.phase { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-l); padding: 20px; display: grid; gap: 12px; align-content: start; }
.phase .n { width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: var(--surface); display: grid; place-items: center; font-weight: 700; font-stretch: 110%; }
.phase h2 { font-size: 18px; }
.phase ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); }
.phase ol b { color: var(--ink); font-weight: 620; }
@media (max-width: 1000px) { .flow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .flow { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ HALLEN: skärmen i verkstaden
   Fyller en 1080p-skärm och ska gå att läsa på tre meters håll. Skrivarna som stora kort, plattan med de riktiga
   öppnarna som bild, siffrorna stora. Orange bara där någon måste göra något. */
body.hall { background: radial-gradient(1400px 520px at 50% -12%, #1a1c20 0%, rgba(15, 16, 18, 0) 70%), var(--bg); background-attachment: fixed; }
.hallbox { max-width: 1840px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; gap: 18px;
  padding: calc(20px + env(safe-area-inset-top, 0px)) max(28px, env(safe-area-inset-right, 0px)) 24px max(28px, env(safe-area-inset-left, 0px)); }
.hallbar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; }
.hallbar .brand .mark { width: 38px; height: 38px; }
.hallbar .clock { font-size: 34px; font-weight: 620; font-stretch: 108%; font-variant-numeric: tabular-nums; letter-spacing: -.015em; min-width: 104px; text-align: right; }
.scanform { position: relative; display: flex; }
.scanform > svg.i { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; color: var(--ink-3); pointer-events: none; }
.scanin { height: 62px; font-size: 19px; font-weight: 520; border-radius: 13px; border: 1px solid var(--rule); background: var(--sunk); padding: 0 22px 0 58px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55); }
.scanin::placeholder { color: var(--ink-3); }
.scanin:focus { border-color: #3a3d42; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55); }   /* fältet har alltid fokus i hallen: lugnt, ikonen visar att det tar emot */
.scanform:focus-within > svg.i { color: var(--pei); }
.halltabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 15px; background: var(--sunk);
  border: 1px solid var(--rule-2); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5); }
.halltabs a { display: flex; align-items: center; justify-content: center; gap: 11px; height: 56px; min-width: 0; border-radius: 11px; text-decoration: none;
  color: var(--ink-2); font-weight: 620; font-size: 17.5px; letter-spacing: .005em; transition: color .15s, background-color .15s; }
.halltabs a span:not(.dot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.halltabs a svg.i { width: 21px; height: 21px; opacity: .8; }
.halltabs a:hover { color: var(--ink); background: rgba(255, 255, 255, .025); }
.halltabs a.on { color: var(--ink); background: var(--sheen), var(--surface-2); box-shadow: var(--lift), 0 2px 10px rgba(0, 0, 0, .45); }
.halltabs a.on svg.i { color: var(--pei); opacity: 1; }
.halltabs a .dot { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px; font-size: 13.5px; }
.hallbox > .flash { margin: 0; font-size: 16px; }
.hallmain { flex: 1; display: flex; flex-direction: column; gap: 16px; min-height: 0; }

/* skrivarna */
.hgrid { flex: 1; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); align-items: stretch; }
.htile { position: relative; display: flex; flex-direction: column; gap: 20px; min-width: 0; padding: 24px 26px 26px; border-radius: 18px; text-decoration: none; color: inherit;
  background: var(--sheen), var(--surface); border: 1px solid var(--rule-2); box-shadow: var(--lift), 0 24px 48px -32px rgba(0, 0, 0, .95);
  transition: border-color .2s, box-shadow .2s, transform .12s; }
.htile:hover { border-color: var(--rule); }
.htile:active { transform: scale(.996); }
.htile.t-pei { border-color: color-mix(in srgb, var(--pei) 60%, transparent);
  box-shadow: var(--lift), 0 0 0 1px color-mix(in srgb, var(--pei) 30%, transparent), 0 22px 44px -34px color-mix(in srgb, var(--pei) 70%, transparent); }
.htile.t-late { border-color: color-mix(in srgb, var(--stop) 55%, transparent); }
.htop { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.htop h2 { font-size: 32px; line-height: 1; font-weight: 720; font-stretch: 112%; letter-spacing: -.02em; white-space: nowrap; }
.htop h2 small { margin-left: 12px; font-size: 14px; font-weight: 560; font-stretch: 100%; letter-spacing: .02em; color: var(--ink-3); }
.led { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 15px 0 13px; border-radius: 10px; font-size: 16px; font-weight: 620;
  white-space: nowrap; background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.led::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.led.run { color: var(--ink); }
.led.run::before { background: var(--pei); box-shadow: 0 0 10px var(--pei); animation: pulse 1.8s ease-in-out infinite; }
.led.ok { color: var(--go); }
.led.risk { color: var(--warn); }
.led.late { color: var(--stop); }
.led.plain { color: var(--ink-3); }
.led.plain::before { box-shadow: none; }
.led.pei { background: linear-gradient(180deg, var(--pei-hi), var(--pei)); color: var(--on-pei); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.led.pei::before { background: var(--on-pei); box-shadow: none; }
.hplate { flex: 1; min-height: 0; display: grid; place-items: center; }
.hplate svg.plate { width: max(180px, min(100%, calc(100vh - 560px), 600px)); }   /* allt på kortet ryms även på en 1366×768-skärm */
.hjob b { display: block; font-size: 24px; line-height: 1.15; font-weight: 650; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hjob > span { display: block; margin-top: 6px; font-size: 16.5px; color: var(--ink-2); }
.hjob .nr { color: var(--ink-3); font-variant-numeric: tabular-nums; margin-right: 6px; }
.hprog { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 12px 18px; }
.hprog .pct { font-size: 56px; line-height: .86; font-weight: 680; font-stretch: 108%; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.hprog .pct small { font-size: 26px; margin-left: 4px; color: var(--ink-3); letter-spacing: 0; }
.hprog .eta { text-align: right; font-size: 16.5px; line-height: 1.35; color: var(--ink-2); }
.hprog .eta b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.hbar { grid-column: 1 / -1; display: block; height: 8px; border-radius: 5px; background: var(--sunk); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7); overflow: hidden; }
.hbar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, color-mix(in srgb, var(--pei) 55%, #ffd2ad), var(--pei));
  box-shadow: 0 0 14px color-mix(in srgb, var(--pei) 55%, transparent); transition: width 1s ease; }
.hcta { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 64px; padding: 0 20px; border-radius: 13px; font-size: 17.5px; font-weight: 620; }
.hcta svg.i { flex: none; }
.hcta.pei { background: linear-gradient(180deg, var(--pei-hi), var(--pei)); color: var(--on-pei); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.hcta.pei b { font-weight: 760; white-space: nowrap; }
.hcta.go { background: var(--go-wash); color: var(--go); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--go) 25%, transparent); }
.hhint { text-align: center; color: var(--ink-3); font-size: 15px; }

/* ett steg i taget: plattan är ute, printar, kollen, startad */
.stage { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: start; padding: 32px;
  border-radius: 18px; background: var(--sheen), var(--surface); border: 1px solid var(--rule-2); box-shadow: var(--lift), 0 24px 48px -32px rgba(0, 0, 0, .95); }
.stage .visual { display: grid; gap: 14px; position: sticky; top: 20px; }
.stage .visual svg.plate { width: max(220px, min(100%, calc(100vh - 300px))); justify-self: center; }
.stagemain { display: flex; flex-direction: column; min-width: 0; }
.stage .kicker { font-size: 16px; color: var(--ink-2); font-weight: 580; }
.stage h1 { font-size: 44px; line-height: 1.04; font-weight: 720; font-stretch: 110%; letter-spacing: -.025em; margin-top: 10px; }
.stage h1 .sub { display: block; margin-top: 8px; font-size: 26px; line-height: 1.15; font-weight: 560; letter-spacing: -.01em; color: var(--ink-3); }
.stage h1.started { display: flex; align-items: center; gap: 16px; }
.stage .ask { font-size: 21px; margin-top: 26px; font-weight: 600; }
.stagenote { margin-top: 12px; font-size: 15px; }
.bigpct { margin-top: 26px; display: flex; align-items: baseline; gap: 6px; font-size: 92px; line-height: .9; font-weight: 660; font-stretch: 108%; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.bigpct small { font-size: 36px; color: var(--ink-3); letter-spacing: 0; }
.bigpct em { margin-left: auto; font-style: normal; font-size: 20px; letter-spacing: 0; font-weight: 560; color: var(--ink-2); }
.bad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 14px; }
.bad button { height: 86px; border-radius: 15px; border: 1px solid var(--rule); background: var(--sheen), var(--surface-2); color: var(--ink); box-shadow: var(--lift), 0 2px 6px rgba(0, 0, 0, .35);
  font: 680 34px/1 var(--font); font-stretch: 108%; cursor: pointer; font-variant-numeric: tabular-nums; transition: border-color .12s, transform .06s; }
.bad button:hover, .bad button:focus-visible { border-color: var(--ink-3); }
.bad button:active { transform: translateY(1px); }
.bad button.zero { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 14px; height: 96px; font-size: 28px; font-weight: 700;
  background: linear-gradient(180deg, #5ad79a, var(--go)); border-color: var(--go); color: #06140c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 14px 30px -16px color-mix(in srgb, var(--go) 80%, transparent); }
.bad button.zero svg.i { width: 30px; height: 30px; stroke-width: 2.6; }
.bad button.all { grid-column: 1 / -1; height: 62px; font-size: 21px; font-weight: 640; color: var(--stop);
  background: var(--stop-wash); border-color: color-mix(in srgb, var(--stop) 45%, transparent); }
.badmore { display: flex; align-items: end; gap: 10px; margin-top: 12px; }
.badmore label { display: grid; gap: 6px; font-size: 14px; color: var(--ink-2); font-weight: 560; }
.badmore input { width: 150px; height: 52px; font-size: 22px; font-variant-numeric: tabular-nums; }
.badmore .btn { height: 52px; padding: 0 20px; }
.reasons { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.reasons label { display: inline-flex; align-items: center; gap: 9px; padding: 11px 15px; border-radius: 11px; background: var(--surface-2); border: 1px solid var(--rule);
  font-weight: 560; font-size: 15.5px; cursor: pointer; }
.reasons label:has(input:checked) { border-color: color-mix(in srgb, var(--pei) 70%, transparent); background: var(--pei-wash); color: var(--pei-lo); }
.reasons input { width: 16px; height: 16px; min-height: 16px; box-shadow: none; }
.big-go { width: 100%; height: 96px; border-radius: 16px; border: 0; cursor: pointer; font: 720 28px/1 var(--font); font-stretch: 108%; letter-spacing: -.01em;
  background: linear-gradient(180deg, var(--pei-hi), var(--pei)); color: var(--on-pei); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 18px 40px -18px color-mix(in srgb, var(--pei) 80%, transparent); }
.loadlist { display: grid; gap: 10px; margin-top: 16px; }
.loadlist .l { display: grid; grid-template-columns: 70px 56px minmax(0, 1fr); gap: 16px; align-items: center; background: var(--sunk); border-radius: 13px; padding: 12px 18px;
  box-shadow: inset 0 0 0 1px var(--rule-2); }
.loadlist .l .slotno { font-size: 14px; color: var(--ink-2); font-weight: 600; }
.loadlist .l .slotno b { display: block; font-size: 32px; color: var(--ink); font-stretch: 112%; font-weight: 720; line-height: 1; font-variant-numeric: tabular-nums; }
.loadlist .l .nm { font-size: 20px; font-weight: 640; }
.loadlist .l .nm small { display: block; font-weight: 450; font-size: 14px; }
.done-mark { display: inline-grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; font-size: 28px; font-weight: 800;
  background: linear-gradient(180deg, #5ad79a, var(--go)); color: #06140c; box-shadow: 0 0 0 6px var(--go-wash); }
.hallfoot { display: flex; gap: 10px; flex-wrap: wrap; }
.hallfoot .btn { height: 54px; font-size: 16.5px; padding: 0 24px; border-radius: 12px; }

/* efterbehandla och leverera */
.hcards { display: grid; gap: 16px; align-content: start; }
.hcard { background: var(--sheen), var(--surface); border: 1px solid var(--rule-2); border-radius: 18px; padding: 24px; display: grid; gap: 18px;
  box-shadow: var(--lift), 0 24px 48px -32px rgba(0, 0, 0, .95); }
.hcard .h { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.hcard .h h2 { font-size: 28px; font-weight: 700; font-stretch: 110%; letter-spacing: -.015em; }
.hcard .h small { font-size: 16px; color: var(--ink-2); }
.hpack { font-size: 18px; color: var(--ink-2); }
.hsteps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.hstep { background: var(--sunk); border-radius: 15px; padding: 18px; display: grid; gap: 14px; box-shadow: inset 0 0 0 1px var(--rule-2); }
.hstep .t { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.hstep .t b { font-size: 17px; font-weight: 640; }
.hstep .t span { font-size: 34px; font-weight: 680; font-stretch: 108%; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hstep .t span small { font-size: 16px; color: var(--ink-3); font-weight: 560; letter-spacing: 0; }
.hstep .meter { height: 6px; }
.hstep .plus { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hstep .plus button { height: 58px; border-radius: 11px; border: 1px solid var(--rule); background: var(--sheen), var(--surface-2); color: var(--ink); box-shadow: var(--lift);
  font: 660 19px/1 var(--font); cursor: pointer; font-variant-numeric: tabular-nums; }
.hstep .plus button:hover { border-color: var(--ink-3); }
.hstep .plus button.all { background: linear-gradient(180deg, var(--pei-hi), var(--pei)); border-color: var(--pei); color: var(--on-pei); }
.hstep.full { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--go) 55%, transparent); }
.hempty { flex: 1; display: grid; place-content: center; padding: 48px 24px; text-align: center; color: var(--ink-2); font-size: 18px; line-height: 1.5;
  background: var(--sheen), var(--surface); border-radius: 18px; border: 1px solid var(--rule-2); }
.hempty b { color: var(--ink); font-size: 22px; font-weight: 650; }

/* telefon och smal skärm: samma hall, staplad */
@media (max-width: 760px) {
  .hallbox { gap: 12px; padding: calc(12px + env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 18px max(14px, env(safe-area-inset-left, 0px)); }
  .hallbar { gap: 10px; }
  .hallbar .brand .mark { width: 30px; height: 30px; }
  .hallbar .clock { font-size: 20px; min-width: 0; }
  .scanin { height: 50px; font-size: 16px; padding-left: 46px; }
  .scanform > svg.i { left: 15px; width: 20px; height: 20px; }
  .halltabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .halltabs a { height: 46px; font-size: 15px; gap: 8px; }
  .htile { padding: 18px; gap: 14px; }
  .htop h2 { font-size: 24px; }
  .led { height: 32px; font-size: 13.5px; padding: 0 11px 0 10px; }
  .hplate svg.plate { width: min(100%, 300px); }
  .hjob b { font-size: 19px; }
  .hprog .pct { font-size: 40px; }
  .stage { grid-template-columns: 1fr; gap: 22px; padding: 18px; }
  .stage .visual { position: static; }
  .stage .visual svg.plate { width: min(100%, 280px); }
  .stage h1 { font-size: 30px; }
  .stage h1 .sub { font-size: 19px; }
  .bigpct { font-size: 60px; }
  .bad { grid-template-columns: repeat(3, 1fr); }
  .bad button { height: 66px; font-size: 26px; }
  .bad button.zero { height: 72px; font-size: 22px; }
  .hcard { padding: 18px; }
  .hcard .h h2 { font-size: 22px; }
}

/* ------------------------------------------------------------------ utskrift */
@media print {
  :root { --bg: #fff; --surface: #fff; --surface-2: #f2f2f2; --ink: #000; --ink-2: #333; --ink-3: #666; --rule: #bbb; --rule-2: #ddd; color-scheme: light; }
  body { background: #fff; }
  .sidebar, .mtop, .tabbar, .scrim, .noprint, .flash { display: none !important; }
  .shell { display: block; }
  .content { padding: 0; max-width: none; }
  .paper { border: 0; padding: 0; }
  .ls, .label { border-color: #bbb; }
  .sheets { grid-template-columns: 1fr 1fr; }
}
.hstep .plus form, .hallfoot form { display: contents; }
.hstep .plus button:disabled, .stepc .btn:disabled { opacity: .35; cursor: default; }

/* kundlistan */
.cust a { text-decoration: none; }
tr.link:hover .cust b { text-decoration: underline; text-underline-offset: 3px; }
.tl .b span b { font-weight: 760; font-variant-numeric: tabular-nums; }

details.adv { margin-top: 18px; }
details.adv summary { cursor: pointer; font-size: 14px; font-weight: 620; color: var(--ink-2); width: fit-content; }
details.adv summary:hover { color: var(--ink); }
details.adv > p { font-size: 13.5px; color: var(--ink-3); margin: 8px 0 14px; }

.formsheet { padding: 30px 32px 32px; }
@media (max-width: 640px) { .formsheet { padding: 20px 18px 22px; } }
input[type=file] { padding: 7px 8px; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
input[type=file]::file-selector-button { font: inherit; font-weight: 640; color: var(--ink); background: var(--surface-2); border: 1px solid var(--rule);
  border-radius: 8px; padding: 6px 12px; margin-right: 12px; cursor: pointer; }
input[type=file]:hover::file-selector-button { border-color: var(--ink-3); }

/* PostNord */
.sh.tight { margin-bottom: 14px; }
.shipbox { margin-top: 24px; }
.shipbox h3 { display: flex; gap: 8px; align-items: center; }
.ship { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; align-items: center; padding: 14px 0; }
.ship + .ship { border-top: 1px solid var(--rule-2); }
.ship .what small { display: block; }
.ship .ids { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ship .ids span { font-size: 13px; font-weight: 650; background: var(--surface-2); border-radius: 6px; padding: 3px 8px; letter-spacing: .02em; }
.ship .actions { grid-column: 1 / -1; }
.shipline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--ink-2); font-size: 15px; margin-top: 6px; }
.shipline .num { color: var(--ink); font-weight: 650; }
@media (max-width: 640px) { .ship { grid-template-columns: 1fr; } .ship .ids { justify-content: flex-start; } }

/* inloggning */
body.loginpage { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background:
  radial-gradient(900px 520px at 50% 30%, color-mix(in srgb, var(--pei) 10%, var(--bg)) 0%, var(--bg) 70%); }
.loginbox { width: min(440px, 100%); background: var(--sheen), var(--surface); border: 1px solid var(--rule-2); border-radius: 20px; padding: 38px 36px 32px;
  box-shadow: var(--lift), 0 40px 90px -40px rgba(0, 0, 0, .95); }
.loginbrand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.loginbrand .mark { width: 38px; height: 38px; }
.loginbrand .word { font: 800 21px/1 "Unbounded", var(--font); letter-spacing: -0.01em; }
.loginbrand .word span { color: var(--pei); }
.loginbox h1 { font-size: 28px; font-weight: 700; font-stretch: 108%; letter-spacing: -0.02em; }
.loginbox .lede { margin-top: 6px; color: var(--ink-2); font-size: 15px; }
.loginbox .lede code { font-size: 13.5px; background: var(--surface-2); padding: 2px 6px; border-radius: 6px; }
.loginbox .flash { margin: 16px 0 0; }
.loginform { display: grid; gap: 14px; margin-top: 22px; }
.loginform .btn { width: 100%; justify-content: center; margin-top: 6px; height: 52px; font-size: 16.5px; border-radius: 11px; }
.loginform input { min-height: 50px; font-size: 16.5px; border-radius: 10px; }
.loginhelp { margin-top: 18px; font-size: 13px; color: var(--ink-3); }
.totp { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.totp .qr { width: 150px; height: 150px; background: #fff; border-radius: 12px; padding: 6px; border: 1px solid var(--rule); }
.totp .qr svg { width: 100%; height: 100%; display: block; }
.totp code { display: block; margin-top: 4px; font-size: 13px; word-break: break-all; background: var(--surface-2); padding: 6px 8px; border-radius: 8px; }
.setupsteps { margin: 16px 0 16px 20px; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink-2); }
.loginbox .totp { margin-top: 4px; }
.loginbox .totp > div:last-child { flex: 1 1 140px; min-width: 0; }
/* ---- Online: adressen och telefonen */
.online { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: start; }
.online .addr { font-size: 18px; font-weight: 680; word-break: break-all; }
.online .qr { width: 150px; height: 150px; background: #fff; border-radius: 12px; padding: 6px; border: 1px solid var(--rule); }
.online .qr svg { width: 100%; height: 100%; display: block; }
.online ul { margin: 12px 0 0 18px; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink-2); }
.online code, .online-off code { background: var(--surface-2); padding: 2px 7px; border-radius: 6px; font-size: 13.5px; }
@media (max-width: 640px) { .online { grid-template-columns: 1fr; } }
.usermenu { position: relative; }
.usermenu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.usermenu summary:hover, .usermenu[open] summary { background: var(--surface-2); }
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu .avatar { width: 32px; height: 32px; font-size: 12px; background: var(--pei-wash); color: var(--pei-lo); }
.usermenu .who-line { display: grid; min-width: 0; line-height: 1.25; }
.usermenu .who-line b { font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu .who-line small { font-size: 12px; color: var(--ink-3); }
.usermenu[open] .menu { display: grid; }
.usermenu .menu { display: none; position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); background: var(--surface); border: 1px solid var(--rule);
  border-radius: 14px; box-shadow: var(--shadow-pop); padding: 6px; z-index: 50; gap: 2px; }
.usermenu .menu a, .usermenu .menu button { display: flex; gap: 10px; align-items: center; padding: 9px 12px; border-radius: 9px; text-decoration: none; color: var(--ink);
  font: inherit; font-size: 14.5px; background: none; border: 0; text-align: left; cursor: pointer; width: 100%; }
.usermenu .menu a:hover, .usermenu .menu button:hover { background: var(--surface-2); }

/* ---- Ukko-fakturor under Ekonomi */
.table.ukko td { vertical-align: top; padding-top: 12px; padding-bottom: 12px; }
.table.ukko .linkcell { min-width: 240px; }
.linkform { display: flex; gap: 8px; align-items: center; }
.linkform select { height: 32px; font-size: 13.5px; padding: 0 8px; max-width: 260px; min-width: 0; flex: 1; }
@media (max-width: 720px) { .linkform { flex-wrap: wrap; } .linkform select { max-width: none; } }
@media (max-width: 720px) {
  .table.ukko thead { display: none; }
  .table.ukko tbody tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "inv amt" "cust status" "date due" "order order";
    gap: 6px 14px; padding: 14px 0; border-bottom: 1px solid var(--rule-2); }
  .table.ukko tbody tr:last-child { border-bottom: 0; }
  .table.ukko td { padding: 0; border: 0; min-width: 0; }
  .table.ukko .c-inv { grid-area: inv; } .table.ukko .c-amt { grid-area: amt; }
  .table.ukko .c-cust { grid-area: cust; } .table.ukko .c-status { grid-area: status; text-align: right; }
  .table.ukko .c-date { grid-area: date; font-size: 13.5px; color: var(--ink-2); }
  .table.ukko .c-due { grid-area: due; font-size: 13.5px; color: var(--ink-2); text-align: right; }
  .table.ukko .c-date::before, .table.ukko .c-due::before { content: attr(data-label) " "; }
  .table.ukko .c-order { grid-area: order; min-width: 0; padding-top: 4px; }
}

/* ------------------------------------------------------------------ kalkyl */
.kcalc { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
.kin { padding: 24px; border-right: 1px solid var(--rule-2); display: grid; gap: 16px; align-content: start; }
.kin .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qtychips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.chipbtn { height: 30px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink-2);
  font: 650 13px/1 var(--font); font-variant-numeric: tabular-nums; cursor: pointer; }
.chipbtn:hover { color: var(--ink); border-color: var(--ink-3); }
.chipbtn.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.kout { padding: 26px 28px 24px; display: grid; gap: 18px; align-content: start; min-width: 0; }
.kbig { display: flex; gap: 14px 34px; flex-wrap: wrap; align-items: flex-end; }
.kbig > div { display: grid; gap: 4px; }
.kbig .v { font-size: 26px; font-weight: 700; font-stretch: 110%; letter-spacing: -0.02em; line-height: 1; }
.kbig .main .v { font-size: 44px; font-stretch: 110%; color: var(--pei); }
.kbig .main.neg .v { color: var(--stop); }
.kbig .k { font-size: 13px; color: var(--ink-2); }
.kbar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--sunk); gap: 2px; }
.kbar i { display: block; height: 100%; min-width: 2px; }
.kbar i:first-child { border-radius: 7px 0 0 7px; }
.kbar i:last-child { border-radius: 0 7px 7px 0; }
.kbar .c1, .klegend .c1 { background: #8b8c90; }
.kbar .c2, .klegend .c2 { background: #6d6e73; }
.kbar .c3, .klegend .c3 { background: #55565b; }
.kbar .c4, .klegend .c4 { background: #a9aaa6; }
.kbar .c5, .klegend .c5 { background: #c9c8c3; }
.kbar .c6, .klegend .c6 { background: #43444a; }
.kbar .c7, .klegend .c7 { background: #e2e1dc; }
.kbar .profit, .klegend .profit { background: var(--pei); }
.klegend .loss { background: var(--stop); }
.klegend { list-style: none; margin: -6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--ink-2); }
.klegend li { display: inline-flex; align-items: center; gap: 7px; }
.klegend li i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.klegend b { color: var(--ink); font-weight: 650; }
.klines { display: grid; gap: 0; font-size: 14.5px; border-top: 1px solid var(--rule-2); }
.klines > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--rule-2); }
.klines > div span:first-child { color: var(--ink-2); }
.klines .tot { font-size: 16px; }
.klines .tot span:first-child { color: var(--ink); font-weight: 650; }
.klines .tot b { color: var(--pei); font-weight: 760; }
.klines .cust { border-bottom: 0; font-size: 13px; color: var(--ink-3); }
.klines .cust span:first-child { color: var(--ink-3); }
.kfacts { font-size: 14px; color: var(--ink-2); }
.kfacts b { color: var(--ink); }
.ktiers .table td, .ktiers .table th { padding-top: 9px; padding-bottom: 9px; }
.ktiers tr.on td { background: var(--pei-wash); }
.ktiers tr.on td:first-child { box-shadow: inset 3px 0 0 var(--pei); padding-left: 10px; }
@media (max-width: 860px) { .kcalc { grid-template-columns: 1fr; } .kin { border-right: 0; border-bottom: 1px solid var(--rule-2); } .kbig .main .v { font-size: 38px; } }

.kmonth { margin-top: 16px; display: grid; gap: 12px; }
.kmonth .h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kmonth .h b { font-size: 22px; font-weight: 700; font-stretch: 110%; white-space: nowrap; }
.kmonth .meter { height: 10px; border-radius: 5px; }
.kmonth p { font-size: 14.5px; color: var(--ink-2); max-width: 82ch; }
.kmonth p b { color: var(--ink); }
.kmonth p.faint { color: var(--ink-3); font-size: 13.5px; }
.kfixed { margin-top: 16px; padding: 10px 20px 14px; }
.kfixed .row { display: grid; grid-template-columns: minmax(0, 1.6fr) 110px 80px 80px auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--rule-2); }
.kfixed .row.head { border-top: 0; font-size: 12.5px; color: var(--ink-3); font-weight: 620; padding: 6px 0 4px; }
.kfixed .row input, .kfixed .row select { min-height: 36px; height: 36px; padding: 6px 10px; }
.kfixed .row input.r { text-align: right; }
.kfixed .acts { display: flex; gap: 4px; justify-content: flex-end; }
.kfixed .foot { font-size: 12.5px; color: var(--ink-3); padding-top: 10px; border-top: 1px solid var(--rule-2); }
@media (max-width: 760px) {
  .kfixed .row { grid-template-columns: 1fr 1fr; }
  .kfixed .row input[name=name] { grid-column: 1 / -1; }
  .kfixed .row.head { display: none; }
  .kfixed .acts { grid-column: 1 / -1; justify-content: flex-start; }
}
.figures.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .figures.three { grid-template-columns: 1fr; } .figures.three > div + div { border-left: 0; border-top: 1px solid var(--rule-2); } }

/* ------------------------------------------------------------------ nästa steg */
.advice { display: grid; gap: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-l); overflow: hidden; }
.adv-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 8px 20px; align-items: start; padding: 18px 22px; }
.adv-item + .adv-item { border-top: 1px solid var(--rule-2); }
.adv-item .area { font-size: 12.5px; font-weight: 650; color: var(--ink-3); padding-top: 3px; }
.adv-item.p1 .area { color: var(--pei); }
.adv-item h3 { font-size: 16px; font-weight: 680; font-stretch: 104%; }
.adv-item p { font-size: 14px; color: var(--ink-2); margin-top: 4px; max-width: 78ch; }
.adv-item .do b { color: var(--ink); }
.adv-item small { display: block; margin-top: 8px; font-size: 12.5px; }
.adv-item .acts { display: flex; gap: 6px; align-items: center; }
.adv-item.claude { grid-template-columns: minmax(0, 1fr) auto; }
.adv-item.claude h3::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--pei); margin-right: 10px; vertical-align: 2px; }
@media (max-width: 700px) {
  .adv-item { grid-template-columns: 1fr; }
  .adv-item .acts { justify-content: flex-start; }
}

/* ------------------------------------------------------------------ inkorgen
   Listan är som orderlistan: en yta med rader. I tråden är kundens mejl ljusa ytor och dina egna nedsänkta,
   så man ser direkt vem som skrev sist. Ett utkast har signalorange kant: det har inte gått iväg än. */
.mailsetup { margin-bottom: 26px; }
.mailsetup a { color: var(--ink); font-weight: 620; }
.mailbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule); margin: -12px 0 22px; }
.mailbar .tabs { margin: 0; box-shadow: none; overflow: visible; flex-wrap: wrap; }
.mailbar .tabs a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; margin-bottom: -1px; }
.mailbar .tabs a .n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2);
  font-size: 11.5px; font-weight: 740; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.mailbar .tabs a.on .n { background: var(--pei); color: var(--on-pei); }
.mailsearch { flex: 0 1 300px; padding-bottom: 8px; }
.mailsearch input { min-height: 38px; padding: 7px 12px; }

.mlist { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-l); overflow: hidden; }
.mrow { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto 76px; gap: 6px 22px; align-items: center;
  padding: 14px 22px; text-decoration: none; color: inherit; position: relative; }
.mrow + .mrow { border-top: 1px solid var(--rule-2); }
.mrow:hover { background: var(--surface-2); }
.mrow .who { min-width: 0; display: grid; }
.mrow .who b, .mrow .what b { font-weight: 560; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow .who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); font-size: 12.5px; }
.mrow .what { min-width: 0; display: grid; gap: 2px; }
.mrow .snip { color: var(--ink-3); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow .snip i { font-style: normal; color: var(--ink-2); }
.mrow .tags { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.mrow .cnt { font-size: 12px; font-weight: 650; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mrow .when { font-size: 13px; color: var(--ink-3); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mrow.unread .who b, .mrow.unread .what b { font-weight: 720; color: var(--ink); }
.mrow.unread .when { color: var(--ink); font-weight: 620; }
.mrow.unread::before { content: ""; position: absolute; left: 9px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--pei); }
.mailfoot { font-size: 13px; margin-top: 12px; }
@media (max-width: 860px) {
  .mrow { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 18px 14px 22px; gap: 4px 12px; }
  .mrow .who { grid-column: 1; grid-row: 1; }
  .mrow .when { grid-column: 2; grid-row: 1; }
  .mrow .what { grid-column: 1 / -1; }
  .mrow .tags { grid-column: 1 / -1; justify-content: flex-start; }
  .mrow .tags:empty { display: none; }
  .mailsearch { flex-basis: 100%; }
  .mrow.unread::before { top: 22px; margin-top: 0; }
}

/* tråden */
.threadhead h1 { overflow-wrap: anywhere; }
.threadhead .over a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink-2); font-weight: 600; }
.threadhead .over a:hover { color: var(--ink); }
.threadmain { min-width: 0; }
.convo { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.msg { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-l); padding: 18px 22px 20px; min-width: 0; }
.msg.mine { background: var(--sunk); border-color: var(--rule-2); }
.msg.bulk { opacity: .78; }
.msg.last:not(.mine) { border-color: color-mix(in srgb, var(--ink-3) 70%, var(--rule)); }
.msg .mh { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-bottom: 12px; }
.msg .av { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2);
  font-weight: 700; font-stretch: 110%; font-size: 13px; }
.msg.mine .av { background: var(--pei-wash); color: var(--pei-lo); font-size: 11.5px; }
.msg .from { display: grid; min-width: 0; }
.msg .from b { font-weight: 680; }
.msg .from small { color: var(--ink-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg time { font-size: 13px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mbody { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15px; line-height: 1.6; max-width: 76ch; color: var(--ink); }
.msg.mine .mbody { color: color-mix(in srgb, var(--ink) 86%, var(--ink-2)); }
.quoted { margin-top: 12px; }
.quoted summary { cursor: pointer; font-size: 13px; color: var(--ink-3); width: fit-content; }
.quoted summary:hover { color: var(--ink-2); }
.quoted .mbody { margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--rule); color: var(--ink-2); font-size: 14px; }
.matts { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.matt { display: grid; gap: 8px; justify-items: start; }
.matt .file { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border: 1px solid var(--rule); border-radius: var(--r);
  text-decoration: none; background: var(--bg); max-width: 300px; }
.matt .file:hover { border-color: var(--ink-3); }
.matt .file.off { opacity: .7; }
.matt .file img { width: 52px; height: 52px; object-fit: contain; border-radius: 6px; flex: none;
  background: repeating-conic-gradient(#d9d9d9 0 25%, #f4f4f4 0 50%) 0 0 / 12px 12px; }
.matt .ext { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2);
  font-size: 11px; font-weight: 760; flex: none; }
.matt .nm { display: grid; min-width: 0; }
.matt .nm b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matt .nm small { font-size: 12px; color: var(--ink-3); }
.msg.fresh { border-style: dashed; }
.sentatts { margin-top: 12px; font-size: 13.5px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; }
.fresh-note { margin-top: 10px; font-size: 12.5px; }

/* svara: utkast, Claude och verktygen */
.replies { margin-top: 34px; }
.draft { background: var(--surface); border: 1px solid color-mix(in srgb, var(--pei) 55%, var(--rule)); border-radius: var(--r-l);
  padding: 16px 20px 18px; display: grid; gap: 12px; scroll-margin-top: calc(var(--top-h) + 24px); }
.draft + .draft { margin-top: 14px; }
.draft:target { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pei) 22%, transparent); }
.draft.failed { border-color: var(--stop); }
.draft .dh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.draft .tag { font-size: 12px; font-weight: 720; color: var(--pei-lo); background: var(--pei-wash); padding: 3px 8px; border-radius: 6px; }
.draft .src { font-size: 13px; color: var(--ink-3); }
.dfields { display: grid; gap: 8px; }
.dfields label { grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 10px; font-weight: 560; color: var(--ink-3); font-size: 13.5px; }
.dfields input { min-height: 38px; padding: 7px 11px; }
.draft textarea { min-height: 180px; background: var(--sunk); border-color: var(--rule-2); line-height: 1.6; font-size: 15px; padding: 12px 14px; }
.datts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.datt { border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: var(--bg); max-width: 560px; }
.datt .thumb { display: block; background: #18191c; }
.datt .thumb img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: contain; }
.datt .cap { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; font-size: 13.5px; min-width: 0; flex-wrap: wrap; }
.datt .cap a, .datt .cap span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.datt .cap small { color: var(--ink-3); }
.datt .cap small.bad { color: var(--stop); }
.datt .cap .btn { margin-left: auto; }
.datt.gone { border-color: var(--stop); }
.dactions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dactions .danger { margin-left: auto; }
.btn.attach { position: relative; overflow: hidden; }
.btn.attach input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; min-height: 0; padding: 0; }
.btn.attach:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.asked { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; margin-top: 14px; padding: 14px 18px;
  border-radius: var(--r); background: var(--pei-wash); color: var(--ink); }
.asked > svg.i { color: var(--pei); margin-top: 2px; }
.asked p { font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.asked small { display: block; margin-top: 4px; color: var(--ink-3); }
.replytools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.replytools.after, .asked + .replytools { margin-top: 18px; }
.replytools .tool { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-l); padding: 16px 18px 18px;
  display: grid; gap: 12px; align-content: start; }
.replytools .tool p { font-size: 13.5px; color: var(--ink-2); }
.replytools .tool .btn { justify-self: start; }
.replytools textarea { min-height: 76px; }
@media (max-width: 1000px) { .replytools { grid-template-columns: 1fr; } }

/* sidan av tråden: kunden och mallbilden */
.threadside > * + * { margin-top: 18px; }
.sidecard h2 { margin-bottom: 12px; }
.custline { font-size: 15px; line-height: 1.45; }
.custline a { text-decoration: none; }
.custline small { color: var(--ink-3); }
.dealline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 14px;
  border-radius: var(--r); background: var(--surface-2); text-decoration: none; }
.dealline:hover { background: color-mix(in srgb, var(--surface-2) 80%, var(--ink-3)); }
.dealline > span:first-child { display: grid; }
.dealline b { font-weight: 720; font-stretch: 112%; }
.dealline small { color: var(--ink-3); }
.inq { display: grid; gap: 12px; }
.inq p, .sidecopy { font-size: 14px; color: var(--ink-2); }
.mockform { display: grid; gap: 18px; }
.mockform fieldset { display: grid; gap: 8px; }
.mockform legend { font-size: 13.5px; font-weight: 620; margin-bottom: 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; }
.logopick { display: grid; gap: 6px; }
.logo-opt { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px; border-radius: var(--r);
  border: 1px solid var(--rule-2); cursor: pointer; font-weight: 500; position: relative; }
.logo-opt input { position: absolute; opacity: 0; pointer-events: none; }
.logo-opt:has(input:checked) { border-color: var(--pei); background: var(--pei-wash); }
.logo-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.lthumb { width: 52px; height: 52px; border-radius: 7px; display: grid; place-items: center; overflow: hidden; font-size: 11px; font-weight: 760;
  color: #444; background: repeating-conic-gradient(#d9d9d9 0 25%, #f4f4f4 0 50%) 0 0 / 12px 12px; }
.lthumb img { width: 100%; height: 100%; object-fit: contain; }
.lname { display: grid; min-width: 0; }
.lname b { font-size: 13.5px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lname small { font-size: 12px; color: var(--ink-3); }
.swatches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.sw { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 9px; font-weight: 500; font-size: 13.5px; cursor: pointer;
  position: relative; border: 1px solid transparent; }
.sw input { position: absolute; opacity: 0; pointer-events: none; }
.sw i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 1px var(--ring); flex: none; }
.sw span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw:hover { background: var(--surface-2); }
.sw:has(input:checked) { border-color: var(--pei); background: var(--pei-wash); }
.sw:has(input:checked) span { font-weight: 650; }
.sw:has(input:disabled) { opacity: .4; cursor: not-allowed; }
.sw:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
.mockform label.check { flex-wrap: wrap; font-size: 14px; }
select.mini { width: auto; min-height: 34px; padding: 4px 8px; font-size: 14px; }
ol.setup { margin: 0 0 20px 20px; padding: 0; display: grid; gap: 6px; font-size: 14.5px; color: var(--ink-2); max-width: 76ch; }
ol.setup a { color: var(--ink); }
.sw small { color: var(--ink-3); font-weight: 500; font-size: 12px; }
.sw.out i { opacity: .55; }

/* ------------------------------------------------------------------ skrivarna live
   Varje skrivare är ett kort: kameran överst, sedan jobbet, temperaturer, rullarna och knapparna.
   Färgen på chippet är läget; ett fel får dessutom röd kant så det syns på håll. */
.rigs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1100px) { .rigs { grid-template-columns: 1fr; } }
.rig { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-l); overflow: hidden; display: grid;
  grid-template-rows: auto 1fr; scroll-margin-top: calc(var(--top-h) + 20px); }
.rig.t-stop { border-color: var(--stop); }
.rig.t-warn { border-color: color-mix(in srgb, var(--warn) 60%, var(--rule)); }
.rig.t-off .cam { opacity: .55; }
.cam { position: relative; aspect-ratio: 16 / 9; background: var(--sunk); overflow: hidden; }
.cam a, .cam img { display: block; width: 100%; height: 100%; }
.cam img { object-fit: cover; }
.cam .chip { position: absolute; left: 12px; top: 12px; box-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.nocam { width: 100%; height: 100%; display: grid; place-items: center; }
.nocam svg.plate { width: auto; height: 82%; }
.rb { padding: 16px 20px 18px; display: grid; gap: 12px; align-content: start; }
.rh { display: flex; align-items: center; gap: 10px; }
.rh h2 { font-size: 22px; font-stretch: 110%; font-weight: 700; }
.rh small { color: var(--ink-3); }
.rh .lamp { margin-left: auto; }
.rh .iconbtn.on { color: var(--warn); background: var(--warn-wash); }
.job { font-size: 15px; font-weight: 560; min-height: 1.5em; }
.pbar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--pei); border-radius: 4px; transition: width .6s; }
.pmeta { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-2); margin-top: -4px; }
.pmeta b { color: var(--ink); font-variant-numeric: tabular-nums; }
.temps { display: flex; gap: 6px 18px; flex-wrap: wrap; font-size: 13.5px; color: var(--ink-3); }
.temps b { color: var(--ink-2); font-weight: 650; font-variant-numeric: tabular-nums; }
.hms { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hms li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; color: var(--stop); background: var(--stop-wash); padding: 8px 10px; border-radius: var(--r-s); }
.rmsg { font-size: 13.5px; }
.amsrow { display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; border-radius: var(--r); background: var(--sunk); }
.ams-s { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; gap: 2px 4px; align-items: center; }
.ams-s .spool { width: 24px; height: 24px; grid-row: 1 / 3; }
.ams-s small { font-size: 11px; color: var(--ink-3); font-weight: 650; line-height: 1; }
.ams-s .left { width: 5px; height: 12px; border-radius: 2px; background: var(--surface-2); position: relative; overflow: hidden; display: block; }
.ams-s .left b { position: absolute; left: 0; right: 0; bottom: 0; background: var(--go); }
.ams-s .left.low b { background: var(--stop); }
.ams-s.empty { opacity: .55; }
.ctrl { display: flex; gap: 8px; flex-wrap: wrap; }
.ctrl:empty { display: none; }
.due { display: grid; gap: 6px; }
.dueitem { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: var(--r-s); background: var(--surface-2); }
.dueitem.now { background: var(--warn-wash); }
.dueitem span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; min-width: 0; }
.dueitem span b { font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dueitem small { color: var(--ink-3); white-space: nowrap; }
.dueitem.now small { color: var(--warn); }
.rmore { margin-top: 2px; }
.rmore .maint { margin-bottom: 18px; }
.rset .slots { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.found { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; font-size: 14px; color: var(--ink-2); }
.reason { display: grid; grid-template-columns: 160px 1fr 40px; gap: 12px; align-items: center; padding: 4px 0; font-size: 14px; }
.reason .meter i { background: var(--warn); }

/* kameraväggen */
.camsel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -10px 0 20px; }
.camsel .k { font-size: 13.5px; font-weight: 620; color: var(--ink-2); margin-right: 4px; }
.camchip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: 18px; border: 1px solid var(--rule);
  font-size: 14px; font-weight: 600; cursor: pointer; }
.camchip:has(input:checked) { background: var(--surface-2); border-color: var(--ink-3); }
.wall { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wall.n1 { grid-template-columns: 1fr; }
.wall.n5, .wall.n6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 800px) { .wall { grid-template-columns: 1fr; } }
.tile { position: relative; margin: 0; aspect-ratio: 16 / 9; background: #08090a; border-radius: var(--r); overflow: hidden; border: 1px solid var(--rule); }
.tile.t-stop { border-color: var(--stop); box-shadow: 0 0 0 2px var(--stop); }
.tile.t-warn { border-color: var(--warn); }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-off { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ink-3); font-size: 14px; padding: 20px; text-align: center; }
.tile figcaption { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  background: linear-gradient(rgba(0, 0, 0, .62), transparent); color: #f2f1ed; }
.tile figcaption b { font-size: 17px; font-weight: 700; font-stretch: 110%; }
.tile .tmeta { margin-left: auto; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.tile .tjob { position: absolute; left: 14px; bottom: 16px; right: 14px; color: #f2f1ed; font-size: 13.5px; font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .tbar { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: rgba(255, 255, 255, .12); }
.tile .tbar b { display: block; height: 100%; background: var(--pei); transition: width .6s; }
.wall:fullscreen { background: #050506; padding: 12px; gap: 12px; align-content: center; }
.wall:fullscreen .tile { border-radius: 10px; }
body.hall .wall { margin-top: 4px; }

/* ---------------------------------------------------------------- färglåset på ordern */
.lockbox { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 16px;
  padding: 18px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); }
.lockbox.bad { box-shadow: inset 0 0 0 1.5px var(--warn); }
.lockbox figure { margin: 0; }
.lockpics { display: grid; gap: 10px; }
.lockbox img { width: 100%; height: auto; display: block; border-radius: 10px; background: #18191c; }
.lockbox figcaption { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.lockbox h3 { margin: 0 0 6px; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.lockbox p { margin: 0 0 10px; color: var(--ink-2); }
.lockcols { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; margin-bottom: 10px; }
.lockcols span { display: inline-flex; align-items: center; gap: 7px; }
.lockcols i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--ring); }
.lockerr { color: var(--warn) !important; display: flex; gap: 8px; align-items: flex-start; font-weight: 550; }
.unlock summary { cursor: pointer; font-size: 13.5px; color: var(--ink-2); }
.unlock form { margin-top: 10px; }
@media (max-width: 720px) { .lockbox { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- hallen: kollen före start */
.stage.check { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.checkside { display: grid; gap: 14px; }
.camtile { position: relative; border-radius: 14px; overflow: hidden; background: #08090a; aspect-ratio: 16 / 9; box-shadow: 0 0 0 1px var(--rule-2), 0 18px 40px -24px rgba(0, 0, 0, .9); }
.camtile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.camtile.off img { visibility: hidden; }
.camtile.off::after { content: "Kameran svarar inte just nu"; position: absolute; inset: 0; display: grid; place-items: center;
  color: #9a9ea6; font-size: 15px; font-weight: 600; }
.camtile span { position: absolute; left: 12px; top: 12px; background: rgba(8, 9, 10, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: 13.5px; font-weight: 620; padding: 5px 10px; border-radius: 8px; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compare.one { grid-template-columns: 1fr; }
.compare figure { margin: 0; padding: 14px; border-radius: 13px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule-2); }
.compare img { width: 100%; aspect-ratio: 62 / 34; object-fit: contain; display: block; }
.compare.one img { aspect-ratio: auto; max-height: 150px; }
.compare figcaption { font-size: 13.5px; color: var(--ink-3); margin-top: 8px; }
.cols-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.colchip { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 6px; border-radius: 22px; background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--rule-2); font-size: 15px; font-weight: 580; color: var(--ink-2); }
.colchip .spool.lg { width: 32px; height: 32px; }
.checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; }
.ck { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 16px; border-radius: 13px; background: var(--sunk);
  box-shadow: inset 0 0 0 1px var(--rule-2); }
.ck b { font-size: 18px; font-weight: 640; display: block; line-height: 1.3; }
.ck p { margin: 3px 0 0; color: var(--ink-2); font-size: 15px; }
.ck form { margin-top: 12px; }
.ck .loadlist { margin-top: 12px; }
.ckmark { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 17px; background: var(--surface-2); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--rule); }
.ck.ok .ckmark { background: linear-gradient(180deg, #5ad79a, var(--go)); color: #06140c; box-shadow: 0 0 12px -2px color-mix(in srgb, var(--go) 70%, transparent); }
.ck.fail { background: var(--stop-wash); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stop) 35%, transparent); }
.ck.fail .ckmark { background: var(--stop); color: #1d0905; box-shadow: none; }
.ck.warn .ckmark { background: var(--warn); color: #1d1503; box-shadow: none; }
.ck.wait .ckmark { animation: ckpulse 1.2s ease-in-out infinite; }
@keyframes ckpulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ck.wait .ckmark { animation: none; } }
/* startknappen sitter kvar längst ner i bild även när listan är lång */
.gobox { position: sticky; bottom: 0; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch;
  margin-top: 20px; padding: 16px 0 4px; background: linear-gradient(180deg, rgba(22, 23, 26, 0), var(--surface) 22px); }
.gobox form { display: contents; }
.gobox .btn { height: 96px; padding: 0 26px; font-size: 19px; }
.gobox .gonote { grid-column: 1 / -1; margin: 2px 0 0; min-height: 1.4em; font-size: 15px; }
.big-go:disabled { background: var(--surface-2); color: var(--ink-3); cursor: default; box-shadow: inset 0 0 0 1px var(--rule); }
.runbar { height: 12px; border-radius: 7px; background: var(--sunk); margin-top: 20px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7); }
.runbar i { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, color-mix(in srgb, var(--pei) 55%, #ffd2ad), var(--pei)); }
.runbtns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.runbtns form { display: contents; }
@media (max-width: 860px) { .stage.check { grid-template-columns: 1fr; } .gobox .btn { height: 72px; } .big-go { height: 72px; font-size: 22px; } }

/* ---------------------------------------------------------------- nya skrivare i nätverket */
.foundlist { display: grid; gap: 10px; }
.found1 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px) auto; gap: 16px; align-items: end; }
.found1 b { display: block; font-size: 17px; }
.found1 small { color: var(--ink-2); }
.found1 .found-err { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 14px; }
@media (max-width: 760px) { .found1 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- inställningar: programvaran */
.swline { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 18px; }
.swline > div { padding: 12px 14px; border-radius: var(--r); background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule-2); }
.swline small { display: block; }
.swline b { display: block; margin-top: 4px; font-size: 15.5px; font-weight: 620; }

/* ---------------------------------------------------------------- första starten: Välkommen till PartFab OS */
.welcomepage { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.welcome { width: min(100%, 620px); padding: 44px 48px; border-radius: 22px; background: var(--sheen), var(--surface); border: 1px solid var(--rule-2);
  box-shadow: var(--lift), 0 40px 90px -40px rgba(0, 0, 0, .95); }
.wbrand { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 640; color: var(--ink-2); letter-spacing: .01em; }
.wbrand .mark { width: 34px; height: 34px; }
.welcome h1 { margin-top: 34px; font-size: 38px; line-height: 1.08; font-weight: 700; font-stretch: 108%; letter-spacing: -.025em; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wlede { margin-top: 14px; font-size: 17.5px; line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.wlede b { color: var(--ink); font-weight: 640; }
.welcome .flash { margin: 22px 0 0; }
.wform { display: grid; gap: 18px; margin-top: 30px; }
.wform label { font-size: 14.5px; }
.wform input { min-height: 54px; font-size: 18px; padding: 12px 16px; border-radius: 11px; }
.wform .btn { margin-top: 8px; height: 60px; font-size: 18px; border-radius: 12px; }
.wnext { list-style: none; counter-reset: w; margin: 30px 0 0; padding: 0; display: grid; gap: 10px; }
.wnext li { counter-increment: w; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 14px; padding: 14px 16px; border-radius: 13px;
  background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule-2); }
.wnext li::before { content: counter(w); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
  font-size: 15px; background: var(--surface-2); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule); }
.wnext b { font-size: 16.5px; font-weight: 640; }
.wnext span { font-size: 14.5px; color: var(--ink-2); }
.wactions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.wactions form { display: contents; }
.wactions .btn { height: 56px; font-size: 17px; border-radius: 12px; }
.wnote { margin-top: 14px; font-size: 14px; }
@media (max-width: 640px) { .welcome { padding: 30px 22px; } .welcome h1 { font-size: 30px; } }

/* ------------------------------------------------------------------ felsidor (404, 500): lugnt, en väg vidare */
.errorpage { max-width: 560px; margin: clamp(48px, 12vh, 140px) auto 0; padding: 0 4px; }
.errorpage .errcode { font: 800 13px/1 var(--font); font-stretch: 125%; letter-spacing: .08em; color: var(--pei-lo);
  margin-bottom: 14px; }
.errorpage h1 { font: 800 clamp(28px, 4.2vw, 40px)/1.08 var(--font); font-stretch: 112%; letter-spacing: -.01em; }
.errorpage .lede { margin-top: 12px; color: var(--ink-2); font-size: 16px; max-width: 46ch; }
.errorpage .actions { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; }

.bars { position: relative; }
.bars .barsnote { position: absolute; inset: 0 0 34px; display: grid; place-items: center; text-align: center; padding: 0 12%;
  color: var(--ink-3); font-size: 14px; }

/* ------------------------------------------------------------------ kameran som streckkodsläsare (telefon, iPad, Mac) */
.scanner { position: fixed; inset: 0; z-index: 1000; background: #050506; color: #f4f3ef; overflow: hidden;
  -webkit-user-select: none; user-select: none; }
.scanner[hidden] { display: none; }
html.scanning, html.scanning body { overflow: hidden; }
.scanner .scam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; }
.scanner.live .scam { opacity: 1; }
.sshade { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.sframe { position: relative; width: min(72vw, 52vh, 330px); aspect-ratio: 1; border-radius: 26px;
  box-shadow: 0 0 0 100vmax rgba(5, 5, 6, .58); transition: box-shadow .2s; }
.sframe i { position: absolute; width: 46px; height: 46px; border: 0 solid #ff6a00; transition: border-color .15s; }
.sframe i:nth-child(1) { left: 0; top: 0; border-width: 5px 0 0 5px; border-top-left-radius: 26px; }
.sframe i:nth-child(2) { right: 0; top: 0; border-width: 5px 5px 0 0; border-top-right-radius: 26px; }
.sframe i:nth-child(3) { right: 0; bottom: 0; border-width: 0 5px 5px 0; border-bottom-right-radius: 26px; }
.sframe i:nth-child(4) { left: 0; bottom: 0; border-width: 0 0 5px 5px; border-bottom-left-radius: 26px; }
.sline { position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; border-radius: 2px; background: #ff6a00;
  box-shadow: 0 0 14px 2px rgba(255, 106, 0, .7); opacity: 0; }
.scanner.live .sline { opacity: .9; animation: sweep 2.2s ease-in-out infinite; }
@keyframes sweep { 0%, 100% { transform: translateY(-110px); } 50% { transform: translateY(110px); } }
@media (prefers-reduced-motion: reduce) { .scanner.live .sline { animation: none; } }
.scanner.hit .sframe i { border-color: #46c486; }
.scanner.hit .sframe { box-shadow: 0 0 0 100vmax rgba(5, 5, 6, .7), inset 0 0 0 3px rgba(70, 196, 134, .5); }
.scanner.hit .sline { opacity: 0; }
.snocam { position: absolute; inset: 0; display: none; place-items: center; color: #3a3d42; }
.snocam svg.i { width: 120px; height: 120px; stroke-width: 1.2; }
.scanner.photo .sshade, .scanner.photo .scam { display: none; }
.scanner.photo .snocam { display: grid; }
.stop { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 8px;
  padding: max(14px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px)); }
.stitle { text-align: center; font-size: 17px; font-weight: 700; letter-spacing: .01em; }
.sbtn { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 0; cursor: pointer; color: #f4f3ef;
  background: rgba(30, 32, 35, .62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.sbtn svg.i { width: 22px; height: 22px; }
.sbtn[data-scan-torch] { grid-column: 3; }
.sbtn.on { background: #f4f3ef; color: #050506; }
.sfoot { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 14px; justify-items: center;
  padding: 18px max(16px, env(safe-area-inset-right, 0px)) max(22px, calc(env(safe-area-inset-bottom, 0px) + 12px)) max(16px, env(safe-area-inset-left, 0px));
  background: linear-gradient(180deg, rgba(5, 5, 6, 0), rgba(5, 5, 6, .82) 34%); }
.shint { max-width: 420px; text-align: center; font-size: 16px; line-height: 1.4; font-weight: 560; color: #f4f3ef; min-height: 2.8em; }
.shint.ok { color: #6be0a5; }
.shint.err { color: #ff8b80; }
.shint.warn { color: #f2c46b; }
.sphoto { display: none; position: relative; overflow: hidden; }
.sphoto input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.scanner.photo .sphoto { display: inline-flex; }
.smanual { display: flex; gap: 8px; width: min(100%, 420px); }
.smanual input { flex: 1; min-width: 0; height: 48px; border-radius: 12px; font-size: 16px; color: #f4f3ef;
  background: rgba(30, 32, 35, .7); border: 1px solid rgba(255, 255, 255, .12); padding: 0 14px; }
.smanual input::placeholder { color: #8b8e93; }
.smanual .btn { height: 48px; }
html.utan-kamera [data-scan] { display: none !important; }
html.kollar-kamera [data-scan] { visibility: hidden; }

/* hallen: kameraknappen bredvid fältet för streckkodsläsaren (bara där det finns en kamera) */
.hallbar { grid-template-columns: auto minmax(0, 1fr) auto auto; }
.hallbar .htitle { display: none; }
.scamera { display: inline-flex; align-items: center; gap: 10px; height: 62px; padding: 0 22px; border-radius: 13px; border: 0; cursor: pointer;
  font: 680 17px/1 var(--font); background: linear-gradient(180deg, var(--pei-hi), var(--pei)); color: var(--on-pei);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 24px -14px color-mix(in srgb, var(--pei) 80%, transparent); }
.scamera svg.i { width: 24px; height: 24px; }
.halltabs .tabscan { display: none; }
.hnote { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; text-decoration: none; color: var(--ink);
  background: var(--pei-wash); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pei) 40%, transparent); font-size: 16px; line-height: 1.4; }
.hnote svg.i { color: var(--pei); flex: none; }

/* plattan är ute: den som bara tar ut plattan åt någon annan */
.stagemain .later { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule-2); display: grid; gap: 10px; }
.stagemain .later .btn { justify-content: center; width: 100%; height: 62px; font-size: 17.5px; gap: 10px; }
.stagemain .later p { font-size: 14.5px; line-height: 1.45; }
.stagemain .later.first { margin-top: 22px; padding-top: 0; border-top: 0; }

/* Att kolla: plattor som togs ut utan att kollas */
.hcard.tocheck { border-color: color-mix(in srgb, var(--pei) 45%, transparent); }
.qcrow { display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-areas: "vis info" "vis bad" "vis why"; gap: 10px 20px;
  align-items: center; padding-top: 18px; border-top: 1px solid var(--rule-2); }
.qcvis { grid-area: vis; display: grid; place-items: center; }
.qcvis svg.plate { width: 132px; }
.qcinfo { grid-area: info; display: grid; gap: 3px; min-width: 0; }
.qcinfo b { font-size: 20px; font-weight: 680; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qcinfo span { color: var(--ink-2); font-size: 15.5px; }
.qcbad { grid-area: bad; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.qcbad button:not(.btn) { height: 52px; min-width: 52px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--rule); cursor: pointer;
  background: var(--sheen), var(--surface-2); color: var(--ink); box-shadow: var(--lift); font: 660 20px/1 var(--font); font-variant-numeric: tabular-nums; }
.qcbad button.zero { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; font-size: 17px; font-weight: 700;
  background: linear-gradient(180deg, #5ad79a, var(--go)); border-color: var(--go); color: #06140c; }
.qcbad input { width: 92px; height: 52px; font-size: 18px; font-variant-numeric: tabular-nums; }
.qcbad .btn { height: 52px; }
.qcwhy { grid-area: why; display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-2); font-weight: 560; }
.qcwhy select { height: 42px; width: auto; }

/* spolarna: AMS:en som den ser ut framför en, med platserna att byta markerade */
.amsmap { display: grid; gap: 12px; margin: 14px 0 4px; }
.amsu { display: grid; gap: 6px; }
.amsn { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.bays { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 440px; padding: 8px; border-radius: 16px;
  background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule-2); }
.bay { position: relative; display: grid; justify-items: center; gap: 7px; padding: 14px 4px 9px; border-radius: 11px; background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--rule-2); }
.bay .spool.xl { width: 48px; height: 48px; }
.bay .no { font-size: 13px; font-weight: 720; color: var(--ink-3); font-variant-numeric: tabular-nums; line-height: 1; }
.bay.swap { box-shadow: inset 0 0 0 2px var(--pei), 0 0 0 4px var(--pei-wash); }
.bay.swap .no { color: var(--pei-lo); }
.bay.swap > .spool.xl { opacity: .45; }
.bay .to { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); width: 48px; height: 48px; display: grid; place-items: center; }
.bay .to .spool.lg { width: 48px; height: 48px; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--pei); }
.bay .rem { display: block; width: 64%; height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.bay .rem b { display: block; height: 100%; background: var(--go); }
.bay .rem.low b { background: var(--stop); }
.loadsteps { list-style: none; display: grid; gap: 8px; margin: 10px 0 12px; padding: 0; }
.loadsteps li { display: grid; gap: 5px; padding: 12px 14px; border-radius: 12px; background: var(--sunk); box-shadow: inset 0 0 0 1px var(--rule-2); }
.loadsteps .where { font-size: 13.5px; font-weight: 740; color: var(--pei-lo); }
.loadsteps .what { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 17px; line-height: 1.3; }
.loadsteps .what b { font-weight: 680; }
.loadsteps .what small { flex-basis: 100%; color: var(--ink-3); font-size: 13.5px; }

/* telefonen i hallen: flikarna längst ned där tummen är, kameran i mitten, skrivarna som rader */
@media (max-width: 760px) {
  .hallbar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .hallbar .htitle { display: block; font-size: 21px; font-weight: 740; letter-spacing: -.01em; }
  .hallbar .scanform, .hallbar .scamera { display: none; }
  .hallbox { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  .halltabs { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; grid-template-columns: repeat(2, minmax(0, 1fr)) 78px repeat(2, minmax(0, 1fr));
    gap: 0; padding: 6px max(6px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px));
    border-radius: 0; background: color-mix(in srgb, var(--side) 90%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    box-shadow: 0 -1px 0 var(--rule-2); }
  .halltabs a { position: relative; flex-direction: column; gap: 5px; height: 56px; font-size: 11.5px; font-weight: 640; border-radius: 10px; }
  .halltabs a svg.i { width: 23px; height: 23px; }
  .halltabs a.on { background: transparent; box-shadow: none; }
  .halltabs a .dot { position: absolute; top: 1px; left: calc(50% + 5px); min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; font-size: 11px; }
  .halltabs .tabscan { display: grid; place-items: center; justify-self: center; align-self: start; width: 64px; height: 64px; margin-top: -24px;
    border-radius: 50%; border: 0; cursor: pointer; background: linear-gradient(180deg, var(--pei-hi), var(--pei)); color: var(--on-pei);
    box-shadow: 0 0 0 6px var(--bg), 0 12px 26px -8px color-mix(in srgb, var(--pei) 85%, transparent); }
  .halltabs .tabscan svg.i { width: 29px; height: 29px; }
  .halltabs .tabscan:active { transform: scale(.96); }

  .hgrid { flex: none; gap: 10px; align-content: start; }
  .htile { align-content: start; display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "plate top" "plate job" "prog prog" "cta cta";
    column-gap: 14px; row-gap: 6px; padding: 14px; border-radius: 16px; }
  .htop { grid-area: top; }
  .htop h2 { font-size: 21px; }
  .htop h2 small { display: none; }
  .hplate { grid-area: plate; align-self: start; }
  .hplate svg.plate { width: 96px; }
  .hjob { grid-area: job; align-self: start; min-width: 0; }
  .hjob b { font-size: 16.5px; }
  .hjob > span { font-size: 13.5px; margin-top: 3px; }
  .hprog { grid-area: prog; margin-top: 6px; }
  .hprog .pct { font-size: 30px; }
  .hprog .pct small { font-size: 16px; }
  .hprog .eta { font-size: 14px; }
  .hcta { grid-area: cta; min-height: 48px; margin-top: 6px; padding: 0 14px; font-size: 15px; }
  .hcta svg.i { width: 20px; height: 20px; }
  .hhint { display: none; }
  .led { height: 28px; font-size: 12.5px; }

  .stage .stagemain { order: -1; }                     /* på telefonen: vad som ska göras först, kameran och bilden sedan */
  .qcrow { grid-template-columns: 80px minmax(0, 1fr); grid-template-areas: "vis info" "bad bad" "why why"; }
  .qcvis svg.plate { width: 80px; }
  .qcbad button.zero { flex: 1 1 100%; justify-content: center; height: 56px; }
  .qcbad button:not(.btn):not(.zero) { min-width: 48px; height: 50px; padding: 0 10px; }
  .qcbad input { flex: 1 1 56px; width: auto; min-width: 0; height: 50px; }
  .qcbad .btn { height: 50px; padding: 0 16px; }
  .bay .spool.xl, .bay .to, .bay .to .spool.lg { width: 40px; height: 40px; }
  .bay .to { top: 14px; }
}

/* konton: ny person loggar in med telefonen */
.phonejoin { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 22px; align-items: center; margin: 0 0 26px; padding: 20px;
  border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--rule-2); }
.phonejoin .qr { background: #fff; border-radius: 12px; padding: 8px; }
.phonejoin .qr svg { display: block; width: 100%; height: auto; }
.phonejoin h3 { font-size: 19px; margin-bottom: 8px; }
.phonejoin ol { margin: 0 0 8px; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; line-height: 1.45; }
@media (max-width: 560px) { .phonejoin { grid-template-columns: 1fr; } .phonejoin .qr { max-width: 200px; } }