:root{
  --bg:#070c14;
  --panel:#0d1524;
  --panel2:#132033;
  --raise:#1a2c44;
  --sunk:#04070c;
  --line:#1c2c42;
  --line2:#284058;
  --line3:#3a5878;

  --text:#e6eefb;
  --dim:#8298b5;
  --faint:#5a708c;

  --good:#3ddc97;
  --bad:#ff6b6b;
  --warn:#ffb648;
  --cyan:#35d6f0;

  --accent:#2f81f7;
  --accent2:#7fb4ff;
  --on-accent:#ffffff;

  --mono:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;

  --r-sm:5px; --r:8px; --r-lg:11px; --r-xl:16px;
  --ease:cubic-bezier(.3,0,.2,1);
}

[data-accent="blue"]  { --accent:#2f81f7; --accent2:#7fb4ff; --on-accent:#ffffff; }
[data-accent="cyan"]  { --accent:#35d6f0; --accent2:#8ae9fa; --on-accent:#021418; }
[data-accent="teal"]  { --accent:#2fe0bd; --accent2:#7df0da; --on-accent:#04120f; }
[data-accent="violet"]{ --accent:#a98bff; --accent2:#c7b3ff; --on-accent:#ffffff; }
[data-accent="amber"] { --accent:#ffa629; --accent2:#ffc46b; --on-accent:#12150f; }
[data-accent="green"] { --accent:#4ade80; --accent2:#8ceaae; --on-accent:#051408; }

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}

body{
  background:transparent;
  color:var(--text);
  font:13.5px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
  user-select:none;
}

body.standalone{background:var(--bg)}

button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
[hidden]{display:none !important}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:5px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--line3);background-clip:padding-box}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── The handheld ──────────────────────────────────────────────────────── */

#root{
  position:fixed;inset:0;
  display:grid;place-items:center;
  opacity:0;pointer-events:none;
  transition:opacity .2s var(--ease);
}
#root.open{opacity:1;pointer-events:auto}

/* The shell's paint lives on .skin, not on .device, because the live car
   window is a HOLE: every layer stacked behind it has to be able to get out of
   the way, and a mask on .device would take its children with it. */
.device{
  --shell:#161a1f;
  position:relative;
  width:min(1660px,96vw);
  height:min(940px,95vh);
  padding:20px 52px;
  border-radius:30px;
  background:transparent;
  box-shadow:0 50px 110px -34px rgba(0,0,0,.95);
  transform:scale(.982);
  transition:transform .26s var(--ease);
}
#root.open .device{transform:scale(1)}

/* The home screen is two short rows of apps. At the size every other screen
   needs, most of the glass sat empty under them, so this one screen — and only
   this one — comes in. Anything with a parts list, an order book or a car on it
   keeps the full size. */
body[data-screen="apps"] .device{
  width:min(1080px,82vw);
  height:min(640px,78vh);
}

.device .skin{
  position:absolute;inset:0;z-index:0;
  border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,#22262c 0%,var(--shell) 14%,#0d0f12 88%,#08090b 100%);
  box-shadow:
    0 2px 0 rgba(255,255,255,.07) inset,
    0 -2px 0 rgba(0,0,0,.6) inset;
}

.device::before,
.device::after{
  content:"";position:absolute;top:26px;bottom:26px;width:34px;
  border-radius:16px;pointer-events:none;
  background:
    repeating-linear-gradient(180deg,#232428 0 4px,#1b1c20 4px 8px),
    linear-gradient(90deg,#2a2c31,#15171a);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 -1px 2px rgba(0,0,0,.6) inset;
}
.device::before{left:9px}
.device::after{right:9px}

/* The desk machine: slim bezel, hinge strip, no grips. */
.device[data-device="laptop"]{
  width:min(1720px,97vw);
  height:min(960px,96vh);
  padding:14px 16px 26px;
  border-radius:14px 14px 6px 6px;
}
.device[data-device="laptop"] .skin{
  background:linear-gradient(180deg,#2b2e33 0%,#1d2024 10%,#131518 92%,#0b0c0e 100%);
}
.device[data-device="laptop"]::before{
  content:"";left:0;right:0;top:auto;bottom:0;width:auto;height:18px;
  border-radius:0 0 6px 6px;
  background:linear-gradient(180deg,#202327,#0d0f11);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset;
}
.device[data-device="laptop"]::after{
  content:"";left:50%;right:auto;top:auto;bottom:5px;
  transform:translateX(-50%);
  width:120px;height:4px;border-radius:3px;
  background:#2c3036;box-shadow:none;
}
.device[data-device="laptop"] .led{left:14px;top:12px;transform:none}
.device[data-device="laptop"] .port{display:none}

.frame{
  position:relative;height:100%;z-index:1;
  background:transparent;
  border-radius:12px;
  overflow:hidden;
  display:grid;
  grid-template-rows:52px minmax(0,1fr) auto;
  /* A grid with rows and no column gets one implicit column sized to its
     content, which the sheet cannot afford: that shell is a fixed 360px, so
     the tuning and stance panels were painting ~24px wider than the glass and
     losing the right edge of every row behind overflow:hidden. */
  grid-template-columns:minmax(0,1fr);
  box-shadow:
    0 0 0 1px #04070c,
    0 0 0 4px #17191d,
    0 0 0 5px rgba(255,255,255,.04);
}

/* The screen's own paint, separated for the same reason .skin is. */
.frame::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--bg);
  box-shadow:0 10px 30px rgba(0,0,0,.6) inset;
}

.frame > .bar{position:relative;z-index:2}
.frame > .split{position:relative;z-index:1}

/* Glass, kept faint so it never touches legibility. */
.frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:30;
  background:linear-gradient(118deg,
    rgba(255,255,255,.05) 0%,
    rgba(255,255,255,.015) 18%,
    transparent 40%);
}

.led{
  position:absolute;left:24px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;z-index:2;
  background:var(--cyan);
  box-shadow:0 0 9px 1px color-mix(in srgb,var(--cyan) 65%,transparent);
  animation:led 2.6s ease-in-out infinite;
}
.led.off{background:#3a3d42;box-shadow:none;animation:none}
@keyframes led{0%,100%{opacity:1}50%{opacity:.42}}

.port{
  position:absolute;right:24px;top:50%;transform:translateY(-50%);
  width:8px;height:26px;border-radius:4px;z-index:2;
  background:linear-gradient(180deg,#0a0b0d,#16181b);
  box-shadow:0 1px 0 rgba(255,255,255,.05),0 2px 4px rgba(0,0,0,.6) inset;
}

/* ── Top bar ───────────────────────────────────────────────────────────── */

.bar{
  display:flex;align-items:center;gap:6px;
  padding:0 18px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}

.logo{
  display:flex;align-items:center;gap:10px;
  padding-right:18px;margin-right:8px;
  border-right:1px solid var(--line);height:100%;
}
.logo i{
  width:27px;height:27px;border-radius:8px;
  background:linear-gradient(150deg,var(--accent),#1450a8);
  display:grid;place-items:center;
  font-style:normal;font-weight:800;font-size:13px;color:#fff;
}
.logo .t{font-weight:640;letter-spacing:-.01em}
.logo .s{font-size:10.5px;color:var(--faint);margin-top:1px}

.bar .sp{flex:1}

.who{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--dim);white-space:nowrap}
.who i{
  width:7px;height:7px;border-radius:50%;background:var(--good);font-style:normal;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 20%,transparent);
}
.who i.off{background:var(--faint);box-shadow:0 0 0 3px color-mix(in srgb,var(--faint) 20%,transparent)}

.xbtn{
  width:30px;height:30px;border-radius:var(--r);
  display:grid;place-items:center;color:var(--faint);transition:.15s;
}
.xbtn:hover{background:var(--panel2);color:var(--bad)}
.xbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* ── Split: the subject on the left, the work on the right ─────────────── */

.split{display:grid;grid-template-columns:460px minmax(0,1fr);min-height:0;overflow:hidden}
.split.wide{grid-template-columns:minmax(0,1fr)}
.split.wide .subject{display:none}

/* No background: the live car window is cut through this column, and a
   gradient here would be one more thing painted over the hole. */
.subject{
  border-right:1px solid var(--line);
  background:transparent;
  overflow-y:auto;padding:20px;
}

/* ── The car ───────────────────────────────────────────────────────────── */

.hero{
  border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line2);margin-bottom:16px;
}
.hero .art,
.hero .meta{
  background:radial-gradient(120% 90% at 50% 0%,var(--raise),var(--panel2) 60%,var(--panel));
}

/* The live one is a HOLE, not a picture. The page is an overlay, so where
   nothing is painted the game shows through, and a scripted camera puts the
   real vehicle behind it.

   Nothing above it in the stack may paint either, which is what .cut is for.
   Square across the top so the hole and the frame around it are the same
   shape — a rounded corner over a square hole leaks daylight. */
.hero.live{border-radius:0 0 var(--r-xl) var(--r-xl);border-top:0}
.hero .view{
  position:relative;height:300px;
  background:transparent;
}
.hero .view::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(7,12,20,.42),transparent 26%,transparent 74%,rgba(7,12,20,.55)),
    radial-gradient(130% 85% at 50% 50%,transparent 58%,rgba(7,12,20,.4));
}

/* Cuts a rectangle out of a paint layer: one mask covering the whole box, a
   second covering the window, and xor leaves everything but the overlap.
   The rectangle is measured by the page and written in as pixels, so it
   follows the panel across resolutions instead of being guessed at.
   A zero-sized second layer composites to nothing, which is the no-hole
   state — that is what the defaults are for. */
.cut,
.frame::before{
  -webkit-mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000);
          mask-image:linear-gradient(#000,#000),linear-gradient(#000,#000);
  -webkit-mask-size:100% 100%,var(--cw,0px) var(--ch,0px);
          mask-size:100% 100%,var(--cw,0px) var(--ch,0px);
  -webkit-mask-position:0 0,var(--cx,0px) var(--cy,0px);
          mask-position:0 0,var(--cx,0px) var(--cy,0px);
  -webkit-mask-repeat:no-repeat,no-repeat;
          mask-repeat:no-repeat,no-repeat;
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}
.hero .view .hint{
  position:absolute;left:0;right:0;bottom:9px;text-align:center;
  font:9.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);z-index:2;
}

/* The drawn one, for when the live camera is off or nothing is connected. */
.hero .art{height:150px;display:grid;place-items:center;position:relative}
.hero .art svg{width:82%;filter:drop-shadow(0 16px 20px rgba(0,0,0,.6))}

.hero .meta{padding:15px 17px;border-top:1px solid var(--line)}
.hero .plate{
  display:inline-block;margin-bottom:11px;
  font:700 14px/1 var(--mono);letter-spacing:.11em;
  padding:8px 11px;border-radius:var(--r);
  background:var(--sunk);border:1px solid var(--line2);color:var(--accent2);
}
.hero h1{font-size:19px;font-weight:620;letter-spacing:-.02em}
.hero .sub{
  font:10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-top:7px;
}

.stat{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;
  padding:12px 14px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--panel);margin-bottom:7px;
}
.stat .k{font:10px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--faint)}
.stat .n{font:650 16px/1 var(--mono);white-space:nowrap}
.stat.t-warn .n{color:var(--warn)}
.stat.t-bad .n{color:var(--bad)}
.stat.t-cool .n{color:var(--cyan)}

.trk{height:4px;background:var(--sunk);border-radius:2px;margin-top:9px;overflow:hidden}
.trk i{display:block;height:100%;background:var(--good);transition:width .4s var(--ease)}
.trk.t-warn i{background:var(--warn)}
.trk.t-bad i{background:var(--bad)}
.trk.t-none i{background:var(--line3)}
.trk.t-cool i{background:var(--cyan)}

.subject h3{
  font:10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:18px 0 11px;
}
.fit{
  display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  padding:9px 12px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line);margin-bottom:6px;font-size:12px;
}
.fit .m{font:9.5px/1 var(--mono);color:var(--faint);letter-spacing:.08em;text-transform:uppercase}

.nocar{
  padding:30px 18px;text-align:center;color:var(--faint);
  border:1px dashed var(--line2);border-radius:var(--r-lg);
  font-size:12.5px;line-height:1.6;
}
.nocar b{display:block;color:var(--dim);font-weight:600;margin-bottom:7px}

/* ── The work area ─────────────────────────────────────────────────────── */

.work{display:grid;min-height:0;min-width:0;overflow:hidden}

.panel{min-width:0;min-height:0;overflow:hidden;display:none}
.panel.on{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0}

/* Panels render tree | grid | side, in that order. Here those become the pill
   bar, the scrolling body and the bill along the bottom — so the layout comes
   from the stylesheet rather than from rewriting every panel. */
.tree{
  min-width:0;
  padding:15px 22px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  overflow:visible;background:none;
}
.tree .grp{
  font:9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);padding:0 4px 0 0;margin-right:2px;
}
.tree .grp:not(:first-child){margin-left:10px}
.tn{
  display:inline-flex;align-items:center;gap:7px;width:auto;
  padding:8px 14px;border-radius:var(--r);
  border:1px solid var(--line2);background:var(--panel);
  font-size:12px;color:var(--dim);text-align:left;transition:.15s;white-space:nowrap;
}
.tn:hover{border-color:var(--line3);color:var(--text);background:var(--panel)}
.tn.on{
  background:color-mix(in srgb,var(--accent) 18%,transparent);
  border-color:var(--accent);color:var(--accent2);font-weight:590;
}
.tn .n{flex:none;overflow:visible}
.tn .b{
  font:10px/1 var(--mono);padding:0;border:0;background:none;
  color:var(--faint);letter-spacing:.04em;
}
.tn.on .b{color:var(--accent2)}
.tn .b.warn{color:var(--bad)}
.tn .b.good{color:var(--good)}

.grid{overflow-y:auto;overflow-x:hidden;padding:20px 22px;min-height:0;min-width:0;background:none}

.gh{display:flex;align-items:baseline;gap:13px;margin:0 0 13px}
.gh:not(:first-child){margin-top:24px}
.gh h2{font-size:14.5px;font-weight:640;letter-spacing:-.01em}
.gh .cap{
  font:10px/1 var(--mono);color:var(--faint);
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;margin-left:auto;
}

/* The bill: a strip along the bottom, so the work keeps the width. */
.side{
  min-width:0;
  border-top:1px solid var(--line);border-left:0;
  background:var(--panel);
  display:flex;align-items:center;gap:20px;
  padding:13px 22px;min-height:0;
}
.side .sh{display:none}
.side .lines{
  display:flex;align-items:center;gap:7px;flex:1;min-width:0;
  overflow-x:auto;overflow-y:hidden;padding:0;scrollbar-width:none;
}
.side .lines::-webkit-scrollbar{display:none}
.side .ln{
  display:flex;align-items:center;gap:9px;
  padding:8px 12px;border-radius:var(--r);
  background:var(--panel2);border:1px solid var(--line);border-bottom:1px solid var(--line);
  font-size:12px;white-space:nowrap;
}
.side .ln .m{display:none}
.side .ln .a{font:650 12px/1 var(--mono);color:var(--accent2)}
.side .ln .del{width:18px;height:18px}
.side .tot{
  display:flex;align-items:center;gap:16px;
  padding:0;border:0;background:none;white-space:nowrap;
}
.side .tr{display:none}
.side .tr.big{
  display:flex;flex-direction:column;align-items:flex-end;gap:5px;
  font:650 21px/1 var(--mono);color:var(--text);margin:0;letter-spacing:-.02em;
}
.side .tr.big span:first-child{
  font:9.5px/1 var(--mono);letter-spacing:.11em;color:var(--faint);
  text-transform:uppercase;font-weight:400;
}
.side .go{width:auto}
.side .sub{width:auto;margin-top:0}

.pills{
  padding:15px 22px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
}
.pill{
  padding:8px 14px;border-radius:var(--r);
  border:1px solid var(--line2);background:var(--panel);
  font-size:12px;color:var(--dim);transition:.15s;white-space:nowrap;
}
.pill:hover{border-color:var(--line3);color:var(--text)}
.pill.on{
  background:color-mix(in srgb,var(--accent) 18%,transparent);
  border-color:var(--accent);color:var(--accent2);font-weight:590;
}
.pill .n{font:10px/1 var(--mono);opacity:.7;margin-left:4px}
.pill.warn .n{color:var(--bad);opacity:1}
.pills .sp{flex:1}

.body{overflow-y:auto;padding:20px 22px}

.sec{display:flex;align-items:baseline;gap:13px;margin:0 0 13px}
.sec:not(:first-child){margin-top:24px}
.sec h2{font-size:14.5px;font-weight:640;letter-spacing:-.01em}
.sec .ln{flex:1;height:1px;background:var(--line)}
.sec .cap{
  font:10px/1 var(--mono);color:var(--faint);
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:11px}

.c{
  position:relative;overflow:hidden;text-align:left;
  border-radius:var(--r-lg);border:1px solid var(--line);
  background:var(--panel);padding:14px;
  transition:transform .16s var(--ease),border-color .16s,background .16s,box-shadow .16s;
}
.c:hover{border-color:var(--line2);background:var(--panel2);transform:translateY(-2px)}
.c.on{
  border-color:var(--accent);
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 15%,var(--panel)),var(--panel));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent);
}
.c[disabled]{opacity:.42;pointer-events:none}
.c .idx{font:9.5px/1 var(--mono);color:var(--faint);letter-spacing:.11em}
.c .nm{font-size:13.5px;font-weight:570;margin:10px 0 13px;line-height:1.3}
.c .fr{display:flex;align-items:center;justify-content:space-between;gap:8px}
.c .pr{font:650 13px/1 var(--mono);color:var(--dim)}
.c.on .pr{color:var(--accent2)}
.c .delta{font:10px/1 var(--mono);color:var(--good);margin-top:8px}

.st{
  font:9.5px/1 var(--mono);letter-spacing:.1em;padding:4px 7px;border-radius:4px;
  background:var(--sunk);color:var(--faint);border:1px solid var(--line);white-space:nowrap;
}
.st.f{color:var(--good);border-color:color-mix(in srgb,var(--good) 32%,transparent)}
.st.p{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 42%,transparent)}
.st.w{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 34%,transparent)}
.st.b{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 34%,transparent)}

/* A row of small choices inside a grid: which part of the car is being
   painted, and which finish. Same button as the tree, laid out here. */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.chips .tn{flex:none;padding:7px 12px;white-space:nowrap}

/* Chrome, the brushed metals and the golds have no flat colour — chrome is
   black in the game files because it is all reflection. The swatch gets a
   sheen so it reads as metal rather than as a dull blue square. */
.sw.shaded{background-image:linear-gradient(145deg,rgba(255,255,255,.6),rgba(255,255,255,0) 36%,rgba(0,0,0,.4) 60%,rgba(255,255,255,.3))}

.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:7px}
.sw{aspect-ratio:1;border-radius:var(--r);border:1px solid var(--line2);position:relative;transition:.15s}
.sw:hover{transform:scale(1.06);border-color:var(--line3)}
.sw.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.sw .lbl{
  position:absolute;inset:auto 0 0 0;padding:4px;
  font:9px/1.2 var(--mono);text-align:center;
  background:rgba(0,0,0,.62);border-radius:0 0 7px 7px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.rows{display:flex;flex-direction:column;gap:8px}
.row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:13px 15px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--panel);
  transition:.15s;text-align:left;width:100%;
}
.row:hover{border-color:var(--line2);background:var(--panel2)}
.row .t{font-size:13px;font-weight:550}
.row .m{
  font:10.5px/1 var(--mono);color:var(--faint);
  letter-spacing:.07em;margin-top:6px;text-transform:uppercase;
}
.row .a{font:650 14px/1 var(--mono);text-align:right}
.row .acts{display:flex;align-items:center;gap:9px}

.empty{
  padding:46px 20px;text-align:center;color:var(--faint);
  border:1px dashed var(--line2);border-radius:var(--r-lg);background:var(--panel);
}
.empty .t{font-size:13.5px;color:var(--dim);font-weight:550;margin-bottom:6px}
.empty .s{font-size:12px;line-height:1.55;max-width:400px;margin:0 auto}

/* ── The bill, along the bottom ────────────────────────────────────────── */

.bill{
  border-top:1px solid var(--line);background:var(--panel);
  padding:13px 22px;display:flex;align-items:center;gap:20px;
}
.bill .chips{display:flex;gap:7px;flex:1;overflow-x:auto;min-width:0;scrollbar-width:none}
.bill .chips::-webkit-scrollbar{display:none}
.bchip{
  display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:var(--r);
  background:var(--panel2);border:1px solid var(--line);font-size:12px;white-space:nowrap;
}
.bchip b{font:650 12px/1 var(--mono);color:var(--accent2)}
.bchip .x{color:var(--faint);cursor:pointer;font-size:14px;line-height:1}
.bchip .x:hover{color:var(--bad)}
.bchip .m{font:9.5px/1 var(--mono);color:var(--faint);letter-spacing:.08em;text-transform:uppercase}

.bill .none{flex:1;font-size:12px;color:var(--faint);line-height:1.5}
.bill .tot{text-align:right;white-space:nowrap}
.bill .tot .k{font:9.5px/1 var(--mono);letter-spacing:.11em;color:var(--faint);text-transform:uppercase}
.bill .tot .n{font:650 22px/1 var(--mono);margin-top:7px;letter-spacing:-.02em}
.bill .acts{display:flex;gap:8px}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.mini{
  padding:9px 14px;border:1px solid var(--line2);background:var(--panel);
  border-radius:var(--r);font-size:12px;color:var(--dim);font-weight:500;
  transition:.15s;white-space:nowrap;
}
.mini:hover{color:var(--text);border-color:var(--line3);background:var(--raise)}
.mini.hot{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:640}
.mini.hot:hover{background:var(--accent2);border-color:var(--accent2)}
.mini.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 32%,transparent)}
.mini.danger:hover{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}
.mini[disabled]{opacity:.4;pointer-events:none}

.go{
  padding:12px 20px;border-radius:var(--r);
  background:var(--accent);color:var(--on-accent);
  font-weight:640;font-size:13px;transition:.15s;white-space:nowrap;
  box-shadow:0 8px 22px -10px var(--accent);
}
.go:hover{background:var(--accent2)}
.go[disabled]{opacity:.35;pointer-events:none;box-shadow:none}

.sub{
  padding:12px 16px;border:1px solid var(--line2);border-radius:var(--r);
  background:transparent;color:var(--dim);font-weight:520;font-size:12.5px;white-space:nowrap;
}
.sub:hover{color:var(--text);background:var(--panel2)}
.sub[disabled]{opacity:.35;pointer-events:none}

/* ── Forms ─────────────────────────────────────────────────────────────── */

.field{margin-bottom:14px}
.field > label{
  display:block;font:9.5px/1 var(--mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin-bottom:8px;
}
.field .hint{font-size:11px;color:var(--faint);margin-top:7px;line-height:1.5}

input[type=text],input[type=number],select,textarea{
  width:100%;padding:10px 12px;
  background:var(--sunk);border:1px solid var(--line2);
  border-radius:var(--r);font-size:12.5px;transition:.15s;
}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--accent)}
textarea{resize:vertical;min-height:70px;font-family:var(--sans)}
select{cursor:pointer}
input[type=range]{accent-color:var(--accent);padding:0}

.check{display:flex;align-items:center;gap:10px;padding:9px 0;cursor:pointer}
.check input{
  appearance:none;width:34px;height:19px;border-radius:12px;
  background:var(--line2);position:relative;transition:.18s;flex:none;cursor:pointer;
}
.check input::after{
  content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;
  border-radius:50%;background:var(--dim);transition:.18s var(--ease);
}
.check input:checked{background:color-mix(in srgb,var(--accent) 45%,transparent)}
.check input:checked::after{transform:translateX(15px);background:var(--accent)}
.check .cl{font-size:12.5px}
.check .cs{font-size:11px;color:var(--faint);margin-top:3px}

.split2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ── Toasts ────────────────────────────────────────────────────────────── */

#toasts{
  position:fixed;top:18px;right:18px;z-index:60;
  display:flex;flex-direction:column;gap:8px;pointer-events:none;
}
.toast{
  display:flex;align-items:center;gap:10px;
  padding:11px 15px;min-width:240px;
  background:var(--panel2);border:1px solid var(--line2);
  border-left:3px solid var(--accent);border-radius:var(--r);
  font-size:12.5px;box-shadow:0 14px 30px -14px rgba(0,0,0,.9);
  animation:toast-in .22s var(--ease);
}
.toast.good{border-left-color:var(--good)}
.toast.error{border-left-color:var(--bad)}
.toast.warn{border-left-color:var(--warn)}
@keyframes toast-in{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* ── HUD ───────────────────────────────────────────────────────────────── */

body.open #hud{display:none}

#hud{
  position:fixed;left:18px;top:50%;transform:translateY(-50%);
  z-index:40;width:232px;
  background:rgba(13,21,36,.94);border:1px solid var(--line2);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.9);
  animation:hud-in .25s var(--ease);
}
#hud.right{left:auto;right:18px}
@keyframes hud-in{from{opacity:0;transform:translateY(-50%) translateX(-10px)}to{opacity:1;transform:translateY(-50%)}}
.hh{
  padding:10px 13px;background:var(--panel2);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:9px;
}
.hh .t{font-size:12px;font-weight:600}
.hh .p{font:10.5px/1 var(--mono);letter-spacing:.08em;color:var(--accent2)}
.hb{padding:11px 13px;display:flex;flex-direction:column;gap:9px}
.hr{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11.5px}
.hr .k{color:var(--faint);font:10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.hr .v{font:650 11.5px/1 var(--mono)}

/* ── Modal ─────────────────────────────────────────────────────────────── */

#modal{
  position:fixed;inset:0;z-index:70;
  display:grid;place-items:center;
  background:rgba(3,6,11,.74);backdrop-filter:blur(3px);
}
.sheet{
  width:min(540px,92vw);max-height:86vh;overflow:hidden;
  background:var(--panel);border:1px solid var(--line2);
  border-radius:var(--r-xl);
  display:grid;grid-template-rows:auto 1fr auto;
  box-shadow:0 30px 70px -26px rgba(0,0,0,.95);
  animation:sheet-in .2s var(--ease);
}
@keyframes sheet-in{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
.sheet .mh{padding:16px 18px;border-bottom:1px solid var(--line)}
.sheet .mh .t{font-size:14.5px;font-weight:650}
.sheet .mh .s{font-size:12px;color:var(--faint);margin-top:5px;line-height:1.5}
.sheet .mb{padding:16px 18px;overflow-y:auto}
.sheet .mf{padding:14px 18px;border-top:1px solid var(--line);display:flex;gap:9px;justify-content:flex-end}

/* ── Builder ───────────────────────────────────────────────────────────── */

.shopcard{
  padding:13px 15px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--panel);
  margin-bottom:7px;width:100%;text-align:left;transition:.15s;
}
.shopcard:hover{border-color:var(--line2);background:var(--panel2)}
.shopcard.on{
  border-color:var(--accent);
  background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 14%,var(--panel)),var(--panel));
}
.shopcard .nm{font-size:13px;font-weight:600;display:flex;justify-content:space-between;gap:9px;align-items:center}
.shopcard .m{
  font:9.5px/1 var(--mono);color:var(--faint);
  letter-spacing:.08em;margin-top:7px;text-transform:uppercase;
}
.shopcard.new{border-style:dashed;text-align:center;color:var(--dim);font-size:12.5px;padding:15px}

.placegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:10px}
.place{
  padding:15px;border-radius:var(--r-lg);
  border:1px dashed var(--line2);background:var(--panel);
  text-align:left;transition:.15s;
}
.place:hover{border-color:var(--accent);border-style:solid;background:var(--panel2)}
.place .k{font:9.5px/1 var(--mono);color:var(--accent);letter-spacing:.11em}
.place .nm{font-size:13px;font-weight:580;margin:9px 0 6px}
.place .m{font-size:10.5px;color:var(--faint);line-height:1.45}

.pointlist{display:flex;flex-direction:column;gap:7px}
.point{
  display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:13px;align-items:center;
  padding:12px 15px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--panel);
}
.point .kind{width:8px;height:8px;border-radius:2px;background:var(--cyan)}
.point .t{font-size:12.5px;font-weight:530}
.point .m{font:9.5px/1 var(--mono);color:var(--faint);letter-spacing:.07em;margin-top:6px}
.point .acts{display:flex;gap:7px}

.placing{
  position:fixed;inset:auto 0 26px 0;z-index:50;
  display:grid;place-items:center;pointer-events:none;
}
.placing .box{
  padding:12px 18px;background:rgba(13,21,36,.94);
  border:1px solid var(--line2);border-radius:var(--r-lg);
  font-size:12.5px;color:var(--dim);
}
.placing b{color:var(--accent2)}

/* ── The connected car's work order ────────────────────────────────────── */

.callout{
  display:block;width:100%;text-align:left;margin-bottom:14px;
  padding:13px 15px;border-radius:var(--r-lg);
  border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);
  background:color-mix(in srgb,var(--warn) 9%,var(--panel));
  transition:.15s;
}
.callout:hover{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,var(--panel))}
.callout.on{
  border-color:color-mix(in srgb,var(--accent) 50%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,var(--panel));
}
.callout .k{font:9.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--warn)}
.callout.on .k{color:var(--accent2)}
.callout .v{font:650 15px/1 var(--mono);margin:9px 0 7px}
.callout .m{font:9.5px/1 var(--mono);letter-spacing:.07em;color:var(--faint);text-transform:uppercase}

/* ── Work order lines ──────────────────────────────────────────────────── */

.row.lit{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 7%,var(--panel))}

.tag{
  display:inline-block;margin-left:9px;vertical-align:1px;
  font:9px/1 var(--mono);letter-spacing:.11em;padding:4px 7px;border-radius:5px;
  background:color-mix(in srgb,var(--accent) 22%,transparent);color:var(--accent2);
}
.tag.warn{background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn)}

.ol{
  /* Name, price, then room for BOTH an action and the remove button. With only
     three tracks a row carrying either Fit or Do it alongside the × pushed the
     × onto a second line and stood the row up to double height. Empty auto
     tracks collapse, so rows with fewer children are unchanged. */
  display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:12px;align-items:center;
  font-size:12px;padding:6px 10px;border-radius:6px;
  background:var(--sunk);border:1px solid var(--line);
}
.ol .c{font:10px/1 var(--mono);letter-spacing:.08em;color:var(--faint);margin-right:8px}
.ol .p{font:600 12px/1 var(--mono);color:var(--accent2)}
/* .mini is the shop's general button and is sized for a section header. Inside
   a line of an order it sets the row height, so it comes in here only. */
.ol .mini{padding:4px 11px;font-size:11px}
.ol .del{
  width:20px;height:20px;border-radius:5px;color:var(--faint);
  display:grid;place-items:center;font-size:14px;line-height:1;transition:.15s;
}
.ol .del:hover{background:color-mix(in srgb,var(--bad) 22%,transparent);color:var(--bad)}

/* ── The shop boundary, in the builder ─────────────────────────────────── */

.zone{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;
  padding:15px 17px;border-radius:var(--r-lg);
  border:1px dashed var(--line2);background:var(--panel);
}
.zone.on{border-style:solid;border-color:color-mix(in srgb,var(--good) 45%,transparent)}
.zone .t{font-size:13px;font-weight:560;margin-bottom:7px}
.zone .m{font-size:11.5px;color:var(--faint);line-height:1.5;max-width:520px}
.zone .acts{display:flex;gap:8px}

/* ── Out of stock ──────────────────────────────────────────────────────── */

.c.dry{opacity:.62}
.c.dry:hover{opacity:1}
.dry .stk{color:var(--warn)}
.stk{
  font:9px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-left:8px;
}

/* ── The bench ─────────────────────────────────────────────────────────── */

/* Not the tablet and not a hologram: a machine bolted to the wall over the
   workbench, with the camera looking down at the bench behind it. Solid,
   because you are reading numbers off it while holding a grinder. */
.device[data-device="bench"]{
  --shell:#1b1e22;
  width:min(1180px,90vw);
  height:min(760px,88vh);
  padding:16px;
  border-radius:18px;
}
.device[data-device="bench"] .skin{
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.014) 0 2px,transparent 2px 6px),
    linear-gradient(180deg,#2a2f35 0%,#1b1e22 12%,#101315 90%,#0a0c0e 100%);
  box-shadow:
    0 2px 0 rgba(255,255,255,.08) inset,
    0 -2px 0 rgba(0,0,0,.7) inset;
}
.device[data-device="bench"]::before,
.device[data-device="bench"]::after{
  content:"";position:absolute;top:auto;bottom:auto;
  width:10px;height:10px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#4a5058,#20242a 60%,#0d0f11);
  box-shadow:0 1px 1px rgba(0,0,0,.8);
}
.device[data-device="bench"]::before{left:7px;top:7px}
.device[data-device="bench"]::after{right:7px;top:7px}
.device[data-device="bench"] .led{left:auto;right:7px;top:auto;bottom:7px;transform:none}
.device[data-device="bench"] .port{display:none}

.device[data-device="bench"] .frame{
  border-radius:10px;
  box-shadow:
    0 0 0 1px #05080c,
    0 0 0 3px #22262b,
    0 14px 34px rgba(0,0,0,.7) inset;
}

/* The raw material the shop has, across the top. It is the first thing you
   want to know and the reason you walked over. */
.stockbar{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
  margin-bottom:20px;
}
.mat{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;
  padding:13px 15px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--panel);
}
.mat .dot{width:10px;height:10px;border-radius:3px;background:var(--line3)}
.mat[data-mat="scrap"] .dot{background:#8a94a3}
.mat[data-mat="steel"] .dot{background:#5f7fa8}
.mat[data-mat="rubber"] .dot{background:#3c4147}
.mat[data-mat="glass"] .dot{background:#5fd0e0}
.mat .k{font:9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.mat .n{font:650 19px/1 var(--mono);margin-top:7px}
.mat.out .n{color:var(--bad)}

.recipes{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}

.rc{
  display:flex;flex-direction:column;
  padding:0;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line2);background:var(--panel);
  transition:.15s;
}
.rc:hover{border-color:var(--line3)}
.rc.short{opacity:.72}
.rc.short:hover{opacity:1}

.rc .rh{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:14px 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--panel2),var(--panel));
}
.rc .nm{font-size:14.5px;font-weight:620;letter-spacing:-.01em}
.rc .ct{font:9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:7px}
.rc .shelf{text-align:right;white-space:nowrap}
.rc .shelf .n{display:block;font:650 22px/1 var(--mono);color:var(--accent2)}
.rc .shelf.none .n{color:var(--faint)}
.rc .shelf .k{display:block;font:9px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-top:6px}

.rc .needs{display:flex;flex-direction:column;gap:11px;padding:15px 16px;flex:1}
.rc .nd{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
.rc .nd .l{font-size:12px;color:var(--dim)}
.rc .nd .v{font:600 11.5px/1 var(--mono);color:var(--good)}
.rc .nd.no .v{color:var(--bad)}
.rc .nd .trk{grid-column:1 / -1;margin-top:0}

.rc .ra{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;align-items:center;
  padding:0 16px 16px;
}
.rc .qty{
  display:flex;align-items:center;gap:2px;
  border:1px solid var(--line2);border-radius:var(--r);background:var(--sunk);
}
.rc .qty button{width:28px;height:34px;color:var(--dim);font-size:15px;transition:.15s}
.rc .qty button:hover{color:var(--accent2);background:var(--panel2)}
.rc .qty span{min-width:22px;text-align:center;font:600 12.5px/1 var(--mono)}

/* ── The sheet: a sidebar over the car ─────────────────────────────────── */

/* Tuning is not a screen with a picture of a car on it. The car is the screen,
   rendered by the game at full size, and the panel is a sheet of glass pinned
   to the top left of it. There is no window to punch and nothing to cut: the
   sheet is opaque, and everything that is not the sheet is simply not painted. */

body[data-layout="sheet"] #root{place-items:start;padding:22px}
body[data-layout="sheet"] .device{
  width:360px;height:auto;max-height:calc(100vh - 44px);
  padding:0;border-radius:var(--r-xl);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.9);
  transform:none;z-index:2;
}
body[data-layout="sheet"] .device .skin,
body[data-layout="sheet"] .device::before,
body[data-layout="sheet"] .device::after,
body[data-layout="sheet"] .device .led,
body[data-layout="sheet"] .device .port{display:none}

body[data-layout="sheet"] .frame{
  height:auto;max-height:calc(100vh - 44px);
  border-radius:var(--r-xl);
  grid-template-rows:auto minmax(0,1fr);
  box-shadow:0 0 0 1px rgba(255,255,255,.06);
}
body[data-layout="sheet"] .frame::before{
  background:rgba(11,16,26,.93);
  box-shadow:none;
}
body[data-layout="sheet"] .frame::after{display:none}

body[data-layout="sheet"] .bar{
  padding:0 8px 0 14px;height:52px;
  background:none;border-bottom:1px solid var(--line);
}
body[data-layout="sheet"] .bar .logo{border-right:0;padding-right:10px;margin-right:0}
body[data-layout="sheet"] .bar .logo i{width:22px;height:22px;border-radius:7px;font-size:11px}
body[data-layout="sheet"] .bar .who{display:none}
body[data-layout="sheet"] .nav{display:none}

/* One column: the list, and the total under it. */
body[data-layout="sheet"] .split{grid-template-columns:minmax(0,1fr)}
body[data-layout="sheet"] .subject{display:none}
body[data-layout="sheet"] .work{grid-template-rows:minmax(0,1fr) auto}
body[data-layout="sheet"] .panel{grid-template-columns:minmax(0,1fr)}
body[data-layout="sheet"] .panel .tree{
  grid-column:1;border-right:0;border-bottom:1px solid var(--line);
  flex-direction:row;overflow-x:auto;overflow-y:hidden;
  padding:11px 12px;gap:6px;scrollbar-width:none;
}
body[data-layout="sheet"] .panel .tree::-webkit-scrollbar{display:none}
body[data-layout="sheet"] .panel .tree .grp{display:none}
body[data-layout="sheet"] .panel .tree .tn{white-space:nowrap;flex:none;padding:7px 12px}
body[data-layout="sheet"] .grid{padding:12px}
body[data-layout="sheet"] .gh{margin-bottom:10px}
body[data-layout="sheet"] .gh h2{font-size:13px}

/* The option rows: an icon, a name, a price, and a Set bar on the fitted one. */
body[data-layout="sheet"] .cards{display:flex;flex-direction:column;gap:7px}
body[data-layout="sheet"] .cards .c{
  display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:center;
  padding:11px 13px;text-align:left;
}
body[data-layout="sheet"] .cards .c .idx{
  grid-row:1 / span 2;align-self:center;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--sunk);border:1px solid var(--line2);
  font:8px/1 var(--mono);letter-spacing:.04em;color:var(--faint);
  overflow:hidden;padding:0;
}
body[data-layout="sheet"] .cards .c .nm{margin:0;font-size:13px;font-weight:570}
body[data-layout="sheet"] .cards .c .fr{margin-top:6px;justify-content:flex-start;gap:9px}
body[data-layout="sheet"] .cards .c .pr{
  font:600 10.5px/1 var(--mono);padding:4px 7px;border-radius:5px;
  background:var(--sunk);border:1px solid var(--line);color:var(--dim);
}
body[data-layout="sheet"] .cards .c .st{margin-left:auto}
body[data-layout="sheet"] .cards .c.on{
  border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 10%,var(--panel));
  padding-bottom:0;
}
body[data-layout="sheet"] .cards .c.on::after{
  content:"✓ Set";grid-column:1 / -1;
  margin:11px -13px 0;padding:7px 0;
  background:var(--accent);color:var(--on-accent);
  font:600 11px/1 var(--sans);text-align:center;
  border-radius:0 0 var(--r-lg) var(--r-lg);
}

/* The total and the action, along the bottom of the sheet. */
body[data-layout="sheet"] .side{
  flex-direction:column;align-items:stretch;gap:10px;
  padding:12px;border-top:1px solid var(--line);background:var(--panel);
}
body[data-layout="sheet"] .side .sh{
  display:flex;align-items:center;justify-content:space-between;
  font:9.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--faint);
}
body[data-layout="sheet"] .side .lines{
  display:flex;flex-direction:column;gap:5px;overflow-y:auto;max-height:118px;
}

/* A few things on the list and the total block ate the sheet: with three
   picks on it the parts above were down to 130 pixels, which is not enough
   to show one row of swatches.
   Capping the total's HEIGHT does not fix it — the panel is a grid and the
   row it sits in keeps the space whether the box uses it or not, so the
   sheet just gains a dead strip. The sheet lays its three parts out with
   flex instead: the list takes what is left and the total takes what it
   needs, up to half. */
/* .on, not .panel. A screen is hidden by `.panel{display:none}` and shown by
   `.panel.on{display:grid}`, and `body[...] .panel` outranks both — so laying
   the sheet out here without the .on turned every screen on at once and
   stacked the home apps, the vehicle and the tuning list down one column. */
body[data-layout="sheet"] .panel.on{display:flex;flex-direction:column}
body[data-layout="sheet"] .panel.on .tree{flex:none}
body[data-layout="sheet"] .panel.on .grid{flex:1 1 auto;min-height:0}
/* The total does not shrink. It was flex:0 1 auto, and flex shrinks items in
   proportion to their size — so next to a parts list thousands of pixels long
   both lost about ninety percent, and the work order came out a sliver with
   the top of a button showing. It takes what it needs, up to half, and
   scrolls inside that; the list is the thing that gives way. */
body[data-layout="sheet"] .panel.on .side{flex:0 0 auto;max-height:50%;overflow-y:auto}
/* A column here, so the base strip's align-items:center left every line a
   narrow box floating in the middle. */
body[data-layout="sheet"] .side .lines{max-height:160px;align-items:stretch}
body[data-layout="sheet"] .side .ln > div:first-child{flex:1;min-width:0}
body[data-layout="sheet"] .side .ln{white-space:normal}
body[data-layout="sheet"] .side .ln .m{display:block}
body[data-layout="sheet"] .side .tot{flex-direction:column;align-items:stretch;gap:9px}
body[data-layout="sheet"] .side .tr.big{flex-direction:row;justify-content:space-between;align-items:baseline}
body[data-layout="sheet"] .side .go{width:100%;min-height:46px;padding:13px 16px;font-size:14px}

/* One slot at a time: the category's slots as a row of tabs, a step either
   side. Scrolls sideways under a fade rather than wrapping — seventeen
   cosmetic slots wrapped would be six rows before the first part. */
body[data-layout="sheet"] .panel.on .slots{flex:none}
.slots{
  display:flex;align-items:center;gap:6px;min-width:0;
  padding:9px 10px;border-bottom:1px solid var(--line);
}
.slots .rail{
  position:relative;flex:1;min-width:0;
  display:flex;align-items:center;gap:6px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  padding:0 12px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%);
}
.slots .rail::-webkit-scrollbar{display:none}
.slots .sl{
  flex:none;white-space:nowrap;
  padding:6px 12px;border-radius:999px;
  border:1px solid var(--line2);background:var(--sunk);
  font-size:11.5px;color:var(--dim);transition:.15s;
}
.slots .sl:hover{color:var(--text);border-color:var(--line3)}
.slots .sl.on{
  background:color-mix(in srgb,var(--accent) 18%,transparent);
  border-color:var(--accent);color:var(--accent2);font-weight:600;
}
/* Something on this slot is on the list. With one slot showing, this is the
   only place the rest of what you have picked is visible. */
.slots .sl.picked::after{
  content:"";display:inline-block;width:6px;height:6px;margin-left:7px;
  border-radius:50%;background:var(--accent);vertical-align:1px;
}
.slots .step{
  flex:none;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;padding:0;
  border:1px solid var(--line2);background:var(--panel);
  color:var(--dim);font-size:17px;line-height:1;transition:.15s;
}
.slots .step:hover{color:var(--text);border-color:var(--line3)}
.slots .step[disabled]{opacity:.28;pointer-events:none}

/* ── The tablet's home screen ──────────────────────────────────────────── */

/* The home screen IS the screen, not a strip of icons along the top of one.
   On a tablet this wide the apps spread into a single row and left a page of
   nothing under them, so the wall is capped to four across and sat in the
   middle of whatever room it has.

   Centred with auto MARGINS rather than justify-content, because auto margins
   only ever absorb space that exists: on a screen too short for the wall,
   centring clips the top off and there is no way to scroll back up to it. */
[data-panel="apps"] .grid{
  display:flex;flex-direction:column;align-items:center;
  gap:26px;overflow-y:auto;
}
[data-panel="apps"] .gh{width:100%;max-width:760px;margin:auto 0 0}

.apps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(160px,100%),1fr));
  gap:30px 20px;width:100%;max-width:760px;margin:0 0 auto;
}

.app{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:11px;
  padding:4px;background:none;border:0;
}
.app .ic{
  width:92px;height:92px;border-radius:26px;
  display:grid;place-items:center;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.14) inset;
  transition:transform .14s var(--ease);
}
.app:hover .ic{transform:translateY(-3px)}
.app:active .ic{transform:translateY(0)}
.app .ic svg{
  width:46px;height:46px;fill:none;
  stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.app .lb{font-size:13.5px;font-weight:550;color:var(--dim);text-align:center;line-height:1.3}
.app:hover .lb{color:var(--text)}
.app .bdg{
  position:absolute;top:-4px;right:18px;
  min-width:24px;height:24px;padding:0 7px;border-radius:12px;
  display:grid;place-items:center;
  background:var(--bad);color:#fff;
  font:700 12.5px/1 var(--sans);
  box-shadow:0 0 0 2px var(--bg);
}

.app[data-tone="blue"]   .ic{background:linear-gradient(160deg,#3b8cf7,#1f5fc4)}
.app[data-tone="violet"] .ic{background:linear-gradient(160deg,#a173ff,#6f3fd6)}
.app[data-tone="pink"]   .ic{background:linear-gradient(160deg,#f45ba8,#c32b78)}
.app[data-tone="orange"] .ic{background:linear-gradient(160deg,#ff9a3c,#e2661a)}
.app[data-tone="amber"]  .ic{background:linear-gradient(160deg,#ffc046,#e09000)}
.app[data-tone="green"]  .ic{background:linear-gradient(160deg,#42d68a,#1d9d5d)}
.app[data-tone="brown"]  .ic{background:linear-gradient(160deg,#b08155,#7d5533)}
.app[data-tone="grey"]   .ic{background:linear-gradient(160deg,#7d8794,#565e69)}

/* ── The servicing diagram ─────────────────────────────────────────────── */

/* The car in the middle with what is worn leading off it, rather than a table
   of percentages. You read this and know which corner to walk to. */
.diagram{
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:0 18px;align-items:center;
}
.diagram .col{display:flex;flex-direction:column;gap:12px;min-width:0}
.diagram .col.left{align-items:stretch}
.diagram .col.right{align-items:stretch}

.diagram .car{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:0 10px;min-width:210px;
}
.diagram .car .art{width:100%;max-width:300px}
.diagram .car .art svg{width:100%;height:auto;display:block;fill:var(--line2)}
.diagram .car .nm{font-size:13px;font-weight:570;color:var(--dim);margin-top:10px}
.diagram .car .od{font:10px/1 var(--mono);letter-spacing:.11em;color:var(--faint)}

.sv{display:flex;align-items:center;gap:0;min-width:0}
.sv.right{flex-direction:row-reverse}

/* The line out to the car. Short, and it points the right way. */
.sv .lead{
  flex:none;width:20px;height:1px;background:var(--line2);position:relative;
}
.sv .lead::after{
  content:"";position:absolute;top:-2px;width:5px;height:5px;border-radius:50%;
  background:var(--line3);
}
.sv.left .lead::after{right:-2px}
.sv.right .lead::after{left:-2px}
.sv.due .lead{background:color-mix(in srgb,var(--bad) 60%,transparent)}
.sv.due .lead::after{background:var(--bad)}

.sv .in{
  flex:1;min-width:0;
  padding:11px 13px;border-radius:var(--r-lg);
  border:1px solid var(--line);background:var(--panel);
}
.sv.due .in{border-color:color-mix(in srgb,var(--bad) 45%,transparent)}

.sv .hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.sv .hd .k{font-size:12.5px;font-weight:540;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv .hd .v{font:650 12px/1 var(--mono);color:var(--good)}
.sv .hd .v.t-warn{color:var(--warn)}
.sv .hd .v.t-bad{color:var(--bad)}

.sv .ft{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px}
.sv .ft .m{
  font:9px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sv .wr{
  flex:none;width:26px;height:26px;border-radius:var(--r);
  display:grid;place-items:center;
  border:1px solid var(--line2);background:var(--sunk);
  color:var(--dim);transition:.15s;
}
.sv .wr:hover{border-color:var(--accent);color:var(--accent2);background:var(--panel2)}
.sv .wr svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sv.due .wr{border-color:color-mix(in srgb,var(--bad) 55%,transparent);color:var(--bad)}
.sv.due .wr:hover{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}

/* Too narrow for three columns: the car goes on top and the cards stack. */
@media (max-width:1000px){
  .diagram{grid-template-columns:minmax(0,1fr)}
  .diagram .car{grid-row:1;margin-bottom:16px}
  .diagram .col.left{grid-row:2}
  .diagram .col.right{grid-row:3;margin-top:12px}
  .sv.right{flex-direction:row}
  .sv.right .lead::after{right:-2px;left:auto}
}

/* ── Toggles and sliders, for the stance sheet ─────────────────────────── */

.toggle{
  display:flex;align-items:center;gap:11px;
  padding:10px 0;cursor:pointer;
}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.toggle .sw{
  flex:none;width:34px;height:19px;border-radius:10px;
  background:var(--sunk);border:1px solid var(--line2);
  position:relative;transition:.16s var(--ease);
}
.toggle .sw::after{
  content:"";position:absolute;left:2px;top:2px;
  width:13px;height:13px;border-radius:50%;
  background:var(--line3);transition:.16s var(--ease);
}
.toggle input:checked + .sw{background:color-mix(in srgb,var(--accent) 30%,transparent);border-color:var(--accent)}
.toggle input:checked + .sw::after{left:17px;background:var(--accent)}
.toggle .lb{font-size:12.5px;color:var(--dim)}
.toggle input:checked ~ .lb{color:var(--text)}
.toggle .pr{
  margin-left:auto;font:600 10.5px/1 var(--mono);
  padding:4px 7px;border-radius:5px;
  background:var(--sunk);border:1px solid var(--line);color:var(--accent2);
}

.field.slide{margin-bottom:14px}
.field.slide label{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:8px;
}
.field.slide .rd{font:600 11px/1 var(--mono);color:var(--accent2)}
.field.slide input[type="range"]{
  width:100%;accent-color:var(--accent);
  height:4px;background:var(--sunk);border-radius:2px;
}

/* ── The tablet chrome: a way home, and a dock ─────────────────────────── */

.back{
  flex:none;width:30px;height:30px;border-radius:var(--r);
  display:grid;place-items:center;margin-right:2px;
  color:var(--dim);transition:.15s;
}
.back:hover{background:var(--panel2);color:var(--text)}
.back svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* What the tablet is plugged into. */
.link{
  font:9.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;
  padding:6px 11px;border-radius:20px;
  background:color-mix(in srgb,var(--good) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--good) 35%,transparent);
  color:var(--good);white-space:nowrap;margin-right:14px;
}

.dock{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:4px;
  padding:9px 14px;
  background:var(--panel);border-top:1px solid var(--line);
}
.dock .sp{flex:1}
.dk{
  display:flex;align-items:center;gap:8px;
  padding:8px 13px;border-radius:var(--r);
  font-size:12px;color:var(--dim);transition:.15s;white-space:nowrap;
}
button.dk:hover{background:var(--panel2);color:var(--text)}
.dk svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dk.state{
  cursor:default;font:9.5px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);padding-left:19px;position:relative;
}
.dk.state::before{
  content:"";position:absolute;left:7px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;background:var(--faint);
}
.dk.state.on{color:var(--good)}
.dk.state.on::before{background:var(--good);box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 20%,transparent)}

/* The home screen is the whole screen. A column of car stats next to a wall
   of apps is two ideas fighting. */
body[data-layout="sheet"] .dock{display:none}

/* The sheet is narrow. A header row of title, caption and a button does not
   fit on one line in it, and the button was the bit that fell off the end. */
body[data-layout="sheet"] .gh{flex-wrap:wrap;gap:8px 10px}
body[data-layout="sheet"] .gh .cap{white-space:normal;margin-left:auto;text-align:right;max-width:100%}
body[data-layout="sheet"] .gh .mini{margin-left:0}