/* ═══════════════════════════════════════════════════════════════════════
   Sanduq — operator console

   A control room, not a dashboard template. Lifted slate-blue surfaces — dark
   enough that the lit lanes still read as lit, bright enough to work under mall
   lighting with the phone at half brightness. Mint for money and health, amber
   and crimson kept in reserve so that when something does turn amber you look
   at it. One foil gradient — mint → sky → violet — appears on the brand mark
   and the two figures that matter, and nowhere else.

   Four real surface levels plus a recessed well, so the machine reads as an
   object you could put your hand into rather than a flat card.

   Accents are stored as bare RGB triplets. Every wash, ring and tinted border
   in this file is `rgb(var(--x-rgb) / a)`, so changing one triplet moves the
   colour and all thirty of its tints together. Hard-coding `rgba(61, 220, 151,
   .14)` next to a token is how a palette ends up half-migrated.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --canvas-rgb: 18 23 28;
  --canvas:    rgb(var(--canvas-rgb));
  --surface:   #1A2128;
  --raised:    #222C35;
  --raised-2:  #2D3A46;
  --well:      #0D1318;

  --line:      #35434F;
  --line-2:    #4A5D6D;
  --edge:      rgba(255, 255, 255, .07);

  --text:      #F3F8FB;
  --dim:       #AEBCC7;
  --mute:      #8697A4;

  --mint-rgb:    52 231 164;
  --sky-rgb:     88 204 255;
  --violet-rgb: 171 153 255;
  --amber-rgb:  255 196  82;
  --crimson-rgb: 255 112 134;

  --mint:      rgb(var(--mint-rgb));
  --sky:       rgb(var(--sky-rgb));
  --violet:    rgb(var(--violet-rgb));
  --amber:     rgb(var(--amber-rgb));
  --crimson:   rgb(var(--crimson-rgb));
  --mint-ink:  #05291B;          /* ink on a mint button, and the foot of a full lane */

  --shadow:    rgba(3, 6, 9, .8);

  --foil: linear-gradient(100deg, var(--mint) 0%, var(--sky) 48%, var(--violet) 100%);

  --r:     16px;
  --r-md:  11px;
  --r-sm:  8px;
  --pad:   clamp(14px, 3.5vw, 30px);
  --gap:   clamp(14px, 2.4vw, 22px);

  --display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --body:    "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}

* { box-sizing: border-box; }
.sprite { display: none; }

html, body {
  margin: 0; background: var(--canvas); color: var(--text);
  font-family: var(--body); font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}

body {
  min-height: 100dvh;
  background-image:
    radial-gradient(90ch 60ch at 12% -20%, rgb(var(--mint-rgb) / .07), transparent 60%),
    radial-gradient(70ch 50ch at 100% 0%, rgb(var(--violet-rgb) / .055), transparent 58%);
  background-attachment: fixed;
}

svg { width: 1em; height: 1em; fill: none; stroke: currentColor;
      stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* shared atoms ---------------------------------------------------------- */

.label {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--mute);
}
.mono-strong {
  font-family: var(--mono); font-weight: 600; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.muted-note { font-size: 13.5px; color: var(--mute); margin: 10px 4px; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.card {
  background: linear-gradient(180deg, var(--raised), var(--surface) 70%);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: 0 1px 0 var(--edge) inset, 0 26px 50px -42px var(--shadow);
}

/* ── top bar ──────────────────────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  padding: 10px var(--pad);
  padding-top: max(10px, env(safe-area-inset-top));
  background: rgb(var(--canvas-rgb) / .84);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; flex: none; }
.brand__mark {
  width: 20px; height: 20px; border-radius: 6px; background: var(--foil);
  box-shadow: 0 0 20px -6px var(--mint);
  position: relative;
}
.brand__mark::after {
  content: ""; position: absolute; inset: 5px 5px auto 5px; height: 2px;
  border-radius: 2px; background: rgba(0, 0, 0, .55);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .55), 0 8px 0 rgba(0, 0, 0, .55);
}
.brand__word {
  font-family: var(--display); font-weight: 800; font-size: 17px;
  letter-spacing: -.02em;
}

.nav { display: none; gap: 2px; margin-left: 6px; }
@media (min-width: 760px) { .nav { display: flex; } }

.nav__tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; text-decoration: none;
  font-size: 13.5px; font-weight: 500; color: var(--dim);
  transition: background .15s ease, color .15s ease;
}
.nav__tab svg { font-size: 15px; opacity: .8; }
.nav__tab:hover { color: var(--text); background: var(--raised-2); }
.nav__tab.is-on { color: var(--text); background: var(--raised-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.nav__tab.is-on svg { color: var(--mint); opacity: 1; }

.topbar__acts { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }

.live {
  display: none; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  color: var(--mute); text-transform: uppercase;
}
@media (min-width: 640px) { .live { display: inline-flex; } }
.live__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint);
             box-shadow: 0 0 0 3px rgb(var(--mint-rgb) / .14); }
.live.is-stale .live__dot { background: var(--amber); box-shadow: 0 0 0 3px rgb(var(--amber-rgb) / .14); }

.ghostbtn, .iconbtn {
  background: none; border: 1px solid var(--line); color: var(--dim);
  border-radius: 9px; cursor: pointer; font-family: var(--body);
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.ghostbtn { padding: 7px 12px; font-size: 12.5px; font-weight: 500; }
.iconbtn { width: 32px; height: 32px; display: grid; place-items: center; font-size: 15px; flex: none; }
.ghostbtn:hover, .iconbtn:hover { color: var(--text); border-color: var(--line-2); background: var(--raised-2); }
.ghostbtn:focus-visible, .iconbtn:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.iconbtn.is-spinning svg { animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── page ─────────────────────────────────────────────────────────────── */

.wrap {
  max-width: 1240px; margin: 0 auto;
  padding: clamp(16px, 3vw, 30px) var(--pad) calc(96px + env(safe-area-inset-bottom));
}
@media (min-width: 760px) { .wrap { padding-bottom: 60px; } }

.view { display: grid; gap: var(--gap); }
.view[hidden] { display: none; }

.secthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 4px;
}
.secttitle {
  font-family: var(--display); font-weight: 700; font-size: 19px;
  letter-spacing: -.015em; margin: 0;
}

/* segmented control */
.seg {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--well); border: 1px solid var(--line); border-radius: 11px;
}
.seg--wide { width: 100%; }
.seg--wide .seg__btn { flex: 1; text-align: center; }
.seg__btn {
  background: none; border: 0; color: var(--dim); cursor: pointer;
  padding: 7px 13px; border-radius: 8px; white-space: nowrap;
  font-family: var(--body); font-size: 12.5px; font-weight: 500;
  transition: background .14s ease, color .14s ease;
}
.seg__btn:hover { color: var(--text); }
.seg__btn.is-on { background: var(--raised-2); color: var(--text); box-shadow: 0 1px 0 var(--edge) inset; }
.seg__btn:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }

/* ── hero: the figure you opened the app for ──────────────────────────── */

.hero {
  display: grid; grid-template-columns: 1fr; gap: 0;
  background: linear-gradient(180deg, var(--raised), var(--surface) 70%);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden;
  box-shadow: 0 1px 0 var(--edge) inset, 0 26px 50px -42px var(--shadow);
}
@media (min-width: 780px) { .hero { grid-template-columns: minmax(260px, .8fr) 1.2fr; } }

.hero__lead {
  padding: clamp(20px, 3vw, 30px);
  display: grid; align-content: center; gap: 6px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 780px) { .hero__lead { border-bottom: 0; border-right: 1px solid var(--line); } }

.hero__figure {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(34px, 7vw, 52px); line-height: 1; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  background: var(--foil); -webkit-background-clip: text; background-clip: text;
  color: transparent; width: fit-content;
}
.hero__sub { font-size: 13px; color: var(--dim); }
.hero__sub b { color: var(--text); font-weight: 600; }

.hero__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .hero__grid { grid-template-columns: repeat(4, 1fr); } }

.stat {
  padding: clamp(14px, 2vw, 20px);
  display: grid; gap: 5px; align-content: start;
  border-right: 1px solid var(--line); border-top: 1px solid var(--line);
}
.hero__grid .stat:nth-child(-n+2) { border-top: 0; }
@media (min-width: 560px) { .hero__grid .stat { border-top: 0; } }
.stat:last-child { border-right: 0; }
@media (max-width: 559px) { .stat:nth-child(2n) { border-right: 0; } }

.stat__value {
  font-family: var(--mono); font-size: 19px; font-weight: 600; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat__value--warn { color: var(--amber); }
.stat__value--bad  { color: var(--crimson); }
.stat__value--good { color: var(--mint); }
.stat__hint { font-size: 11.5px; color: var(--dim); }

/* ── fleet: cities → sites → machines ─────────────────────────────────── */

.cities { display: grid; gap: 26px; }

.cityhead {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-bottom: 9px; margin-bottom: 13px;
  border-bottom: 1px solid var(--line);
}
.cityhead__name {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text);
}
.cityhead__meta { font-size: 12px; color: var(--mute); }
.cityhead__money { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--dim); }
.cityhead__money b { color: var(--text); font-weight: 600; }

.sites { display: grid; gap: var(--gap); }
@media (min-width: 720px)  { .sites { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1500px) { .sites { grid-template-columns: repeat(3, 1fr); } }

.site { padding: 16px; display: grid; gap: 14px; align-content: start; }
.site--alert { border-color: rgb(var(--crimson-rgb) / .22); }

.site__head { display: flex; align-items: flex-start; gap: 10px; }
.site__name {
  font-family: var(--display); font-weight: 700; font-size: 17px;
  letter-spacing: -.015em; margin: 0 0 3px;
}
.site__addr {
  font-size: 12px; color: var(--mute); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.site__go {
  flex: none; display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid var(--line); color: var(--dim); text-decoration: none; font-size: 14px;
}
.site__go:hover { color: var(--mint); border-color: var(--mint); }

.site__meter { display: grid; gap: 6px; }
.meter__top {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-family: var(--mono); font-size: 11px; color: var(--mute);
}
.meter__top b { color: var(--text); font-weight: 600; font-size: 12.5px; }

.bar { height: 6px; border-radius: 999px; background: var(--well);
       border: 1px solid var(--line); overflow: hidden; }
/* `display: block` is load-bearing: the fill is a <span>, and width and
   height are ignored on a non-replaced inline box. */
.bar__fill { display: block; height: 100%; border-radius: 999px; background: var(--mint);
             transition: width .55s cubic-bezier(.22, 1, .36, 1); }
.bar__fill--low  { background: var(--amber); }
.bar__fill--bad  { background: var(--crimson); }

.site__machines { display: grid; gap: 6px; }

/* Explicit placement, not auto-flow. The chips get a row of their own so a
   machine with three of them cannot squeeze the name column to nothing -
   which is exactly what an `auto` right-hand column does once they wrap. */
.mrow {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 5px 11px;
  padding: 9px 10px; border-radius: var(--r-md);
  background: var(--well); border: 1px solid transparent;
  width: 100%; text-align: left; cursor: pointer; color: inherit;
  font: inherit; transition: border-color .14s ease, background .14s ease;
}
.mrow > .dot   { grid-column: 1; grid-row: 1; }
.mrow__main    { grid-column: 2; grid-row: 1; }
.mrow__right   { display: contents; }
.mrow__money   { grid-column: 3; grid-row: 1; justify-self: end; }
.mrow__chips   { grid-column: 2 / -1; grid-row: 2; }
.mrow:hover { border-color: var(--line-2); background: var(--raised-2); }
.mrow:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }

.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mute); flex: none; }
.dot.is-online  { background: var(--mint);    box-shadow: 0 0 0 3px rgb(var(--mint-rgb) / .14); }
.dot.is-offline { background: var(--crimson); box-shadow: 0 0 0 3px rgb(var(--crimson-rgb) / .14); }

.mrow__main { min-width: 0; }
.mrow__name {
  font-size: 13.5px; font-weight: 600; display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mrow__spot {
  display: block; font-size: 11.5px; color: var(--mute); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.mrow__chips { display: flex; gap: 4px; flex-wrap: wrap; }
.mrow__money { font-family: var(--mono); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* status chips */
.chip {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line);
  color: var(--dim); white-space: nowrap;
}
.chip--fault { border-color: rgb(var(--crimson-rgb) / .4);  color: var(--crimson); background: rgb(var(--crimson-rgb) / .09); }
.chip--low   { border-color: rgb(var(--amber-rgb) / .38); color: var(--amber);   background: rgb(var(--amber-rgb) / .08); }
.chip--empty { border-color: var(--line-2); color: var(--dim); }
.chip--good  { border-color: rgb(var(--mint-rgb) / .35); color: var(--mint);    background: rgb(var(--mint-rgb) / .08); }
.chip--app   { border-color: rgb(var(--sky-rgb) / .38); color: var(--sky); }

.badge {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  padding: 3px 9px; border-radius: 999px;
  background: rgb(var(--crimson-rgb) / .12); color: var(--crimson);
  border: 1px solid rgb(var(--crimson-rgb) / .28);
}
.badge--quiet { background: none; color: var(--mute); border-color: var(--line); }
.badge--calm  { background: rgb(var(--mint-rgb) / .1); color: var(--mint); border-color: rgb(var(--mint-rgb) / .28); }

/* ── machine view ─────────────────────────────────────────────────────── */

.picker {
  display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.picker::-webkit-scrollbar { display: none; }

.pick {
  flex: none; display: grid; gap: 3px; justify-items: start;
  padding: 9px 14px; border-radius: var(--r-md); cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--dim);
  font: inherit; text-align: left;
  transition: border-color .14s ease, color .14s ease, background .14s ease;
}
.pick:hover { border-color: var(--line-2); color: var(--text); }
.pick.is-on { background: var(--raised-2); border-color: var(--line-2); color: var(--text); }
.pick.is-on .pick__name { color: var(--mint); }
.pick__name {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.pick__site { font-size: 11px; color: var(--mute); white-space: nowrap; }

.mhead {
  padding: 14px 16px; display: flex; align-items: center;
  gap: 12px 18px; flex-wrap: wrap;
}
.mhead__where { display: grid; gap: 3px; min-width: 0; flex: 1; }
.mhead__site { font-family: var(--display); font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.mhead__spot { font-size: 12.5px; color: var(--dim); }
.mhead__facts { display: flex; gap: 8px 16px; flex-wrap: wrap; align-items: center; }
.mhead__fact { display: grid; gap: 1px; }
.mhead__fact span:last-child { font-family: var(--mono); font-size: 12.5px; }

.linkbtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 9px; text-decoration: none;
  border: 1px solid var(--line); color: var(--dim); font-size: 12.5px; font-weight: 500;
}
.linkbtn:hover { color: var(--mint); border-color: var(--mint); }

/* ledger */
.ledger { display: grid; grid-template-columns: 1fr; overflow: hidden; }
@media (min-width: 800px) {
  .ledger { grid-template-columns: minmax(240px, .85fr) 1.15fr; }
  .ledger .facts { grid-column: 1 / -1; }
}
.ledger__take {
  padding: clamp(18px, 3vw, 26px); display: grid; align-content: center; gap: 5px;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 800px) { .ledger__take { border-bottom: 0; border-right: 1px solid var(--line); } }

.ledger__week { padding: clamp(16px, 3vw, 22px); display: grid; gap: 14px; align-content: start; }
.ledger__weekhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

.spark { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 82px; }

/* The bar row must be `1fr`: a percentage height only resolves against a
   parent with a definite height, so a content-sized row leaves every bar at
   min-height. */
.spark__day { display: grid; grid-template-rows: 1fr auto; gap: 6px; justify-items: center; height: 100%; }
.spark__bar {
  align-self: end; width: 100%; border-radius: 3px 3px 2px 2px; min-height: 3px;
  background: linear-gradient(180deg, rgb(var(--sky-rgb) / .5), rgb(var(--violet-rgb) / .22));
  transition: height .55s cubic-bezier(.22, 1, .36, 1);
}
.spark__day--today .spark__bar {
  background: linear-gradient(180deg, var(--mint), var(--sky));
  box-shadow: 0 0 16px -4px var(--mint);
}
.spark__tag { font-family: var(--mono); font-size: 9px; letter-spacing: .08em;
              color: var(--mute); text-transform: uppercase; }
.spark__day--today .spark__tag { color: var(--text); }

.facts { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
@media (min-width: 620px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.facts .stat { border-top: 0; }
@media (max-width: 619px) { .facts .stat:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* the coil */
.coil { padding: clamp(16px, 3vw, 24px); }
.coil__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.coil__title {
  font-family: var(--display); font-weight: 800; font-size: clamp(22px, 4vw, 30px);
  line-height: 1; letter-spacing: -.03em; margin: 0 0 6px;
}
.coil__sub { margin: 0; font-size: 13px; color: var(--dim); max-width: 52ch; }
.coil__fill { text-align: right; flex: none; display: grid; gap: 2px; justify-items: end; }
.coil__fillnum {
  font-family: var(--mono); font-weight: 700; font-size: clamp(20px, 3vw, 26px);
  font-variant-numeric: tabular-nums; color: var(--mint); line-height: 1;
}

.cabinet {
  background: var(--well); border: 1px solid #2B3742; border-radius: 12px;
  padding: clamp(10px, 2vw, 16px);
  box-shadow: 0 14px 32px -20px var(--shadow) inset, 0 1px 0 rgba(255, 255, 255, .025);
}
.coil__grid { display: grid; gap: 10px; }
.layer { display: grid; grid-template-columns: 26px 1fr; align-items: end; gap: 10px; }
.layer__tag {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  color: var(--mute); padding-bottom: 20px;
}
.layer__lanes {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: clamp(3px, .9vw, 8px); align-items: end;
}

.lane {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer;
  display: grid; gap: 5px; justify-items: center; color: inherit; font: inherit;
}
.lane__track {
  position: relative; width: 100%; height: clamp(62px, 13vw, 92px);
  border-radius: 4px; background: #141B22; border: 1px solid var(--line); overflow: hidden;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.lane:hover .lane__track, .lane:focus-visible .lane__track {
  transform: translateY(-4px); border-color: var(--line-2);
  box-shadow: 0 10px 20px -12px var(--shadow);
}
.lane:focus-visible { outline: none; }
.lane:focus-visible .lane__track { box-shadow: 0 0 0 2px var(--sky); }

.lane__fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0;
  transition: height .6s cubic-bezier(.22, 1, .36, 1);
}
.lane--ok .lane__fill {
  background: linear-gradient(0deg, var(--mint-ink), var(--mint));
  box-shadow: 0 0 14px -3px rgb(var(--mint-rgb) / .55);
}
.lane--low .lane__fill { background: linear-gradient(0deg, #7A5410, var(--amber)); }
.lane--fault .lane__fill {
  background: repeating-linear-gradient(45deg, var(--crimson) 0 5px, rgb(var(--crimson-rgb) / .45) 5px 10px);
}
.lane--empty .lane__track { border-style: dashed; border-color: var(--line-2); }
.lane__code { font-family: var(--mono); font-size: 9px; color: var(--mute); font-variant-numeric: tabular-nums; }
.lane--fault .lane__code, .lane--empty .lane__code { color: var(--dim); }

.legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--mute);
}
.legend__item { display: inline-flex; align-items: center; gap: 7px; }
.sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.sw--ok { background: linear-gradient(0deg, var(--mint-ink), var(--mint)); }
.sw--low { background: var(--amber); }
.sw--empty { border: 1px dashed var(--line-2); }
.sw--fault { background: var(--crimson); }

/* ── panels and rows ──────────────────────────────────────────────────── */

.cols { display: grid; gap: var(--gap); }
@media (min-width: 860px) { .cols { grid-template-columns: 1fr 1fr; align-items: start; } }

.panel { padding: 15px 15px 11px; }
.panel--alert { border-color: rgb(var(--crimson-rgb) / .22); }
.panel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 11px; padding: 0 4px;
}
.panel__title {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; color: var(--dim); margin: 0;
}

.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.row {
  display: grid; grid-template-columns: 42px 1fr auto;
  align-items: center; gap: 12px; padding: 10px 8px; border-radius: var(--r-sm);
  width: 100%; border: 0; background: none; color: inherit; font: inherit;
  text-align: left; transition: background .14s ease;
}
button.row { cursor: pointer; }
button.row:hover { background: var(--raised-2); }
button.row:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; }

.row__code { font-family: var(--mono); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.row__code--ok    { color: var(--mint); }
.row__code--low   { color: var(--amber); }
.row__code--empty { color: var(--dim); }
.row__code--fault { color: var(--crimson); }
.rank { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--mute); text-align: center; }

.row__main { min-width: 0; }
.row__name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__meta { font-size: 12px; color: var(--dim); margin-top: 1px; }
.row__right {
  font-family: var(--mono); font-size: 12px; color: var(--dim);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.row__right b { color: var(--text); font-weight: 600; }

.row--bar { position: relative; overflow: hidden; }
.row--bar::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--share, 0%);
  background: linear-gradient(90deg, rgb(var(--mint-rgb) / .14), rgb(var(--sky-rgb) / .03));
  border-radius: var(--r-sm); pointer-events: none;
}
.row--bar > * { position: relative; }

/* ── stock ────────────────────────────────────────────────────────────── */

.stores { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.storecard {
  padding: 13px 14px; border-radius: var(--r-md); cursor: pointer; text-align: left;
  background: var(--surface); border: 1px solid var(--line); color: inherit; font: inherit;
  display: grid; gap: 4px; transition: border-color .14s ease, background .14s ease;
}
.storecard:hover { border-color: var(--line-2); background: var(--raised); }
.storecard.is-on { border-color: var(--mint); background: rgb(var(--mint-rgb) / .05); }
.storecard__name { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.storecard__nums { font-family: var(--mono); font-size: 11.5px; color: var(--dim); font-variant-numeric: tabular-nums; }

.table { display: grid; gap: 2px; }

/* The header and the body rows are two separate grids that must line up, so
   every column is stated explicitly. An `auto` track anywhere here silently
   sizes to different content in the two grids and the headings drift off
   their numbers. */
.table {
  --cols: 2fr 1.15fr 118px 132px 292px;
}
.table--cover { --cols: 2.1fr 1fr 1fr 1fr; }

.trow {
  display: grid; gap: 4px 12px; padding: 11px 10px; border-radius: var(--r-sm);
  grid-template-columns: 1fr; transition: background .14s ease;
}
.trow:hover { background: var(--raised-2); }
.trow--head {
  display: none; padding: 4px 10px 8px;
  font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mute); border-bottom: 1px solid var(--line);
}
.trow--head:hover { background: none; }
@media (min-width: 1000px) {
  .trow { grid-template-columns: var(--cols); align-items: center; }
  .trow--head { display: grid; }
  .trow__meta { display: contents; }
}

.trow__product { display: grid; gap: 2px; min-width: 0; }
.trow__name { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.trow__sub { font-family: var(--mono); font-size: 10.5px; color: var(--mute); }

.cell { display: grid; gap: 1px; align-content: center; min-width: 0; }
.cell__label {
  font-family: var(--mono); font-size: 8.5px; font-style: normal;
  letter-spacing: .13em; text-transform: uppercase; color: var(--mute);
}
@media (min-width: 1000px) { .cell__label { display: none; } }
.cell__main { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.cell__sub { font-family: var(--mono); font-size: 10.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.cell--where .cell__main { font-family: var(--body); font-size: 12.5px; color: var(--dim); }
.cell--qty .cell__main { font-size: 17px; font-weight: 600; }
.cell--qty.is-out .cell__main { color: var(--crimson); }
.cell--qty.is-low .cell__main { color: var(--amber); }

.trow__acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
@media (min-width: 1000px) { .trow__acts { justify-content: flex-end; flex-wrap: nowrap; } }

/* on narrow screens the row folds into a card, and the cell labels come back */
@media (max-width: 999px) {
  .trow { background: var(--well); border: 1px solid var(--line); margin-bottom: 6px; }
  .trow__meta { display: flex; gap: 8px 20px; flex-wrap: wrap; }
  .trow__acts { margin-top: 6px; }
}

.plan { display: grid; gap: 10px; }
.plansite { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.plansite__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 13px; background: var(--well);
}
.plansite__name { font-weight: 600; font-size: 14px; }
.plansite__take { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--mint); }
.planmachine { padding: 10px 13px; border-top: 1px solid var(--line); }
.planmachine__head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
  font-family: var(--mono); font-size: 11px; color: var(--dim);
}
.planlanes { display: flex; flex-wrap: wrap; gap: 5px; }
.planlane {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 7px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); color: var(--dim);
  font-family: var(--mono); font-size: 11px;
}
.planlane:hover { border-color: var(--line-2); color: var(--text); }
.planlane b { color: var(--text); font-weight: 600; }
.planlane--fault { border-color: rgb(var(--crimson-rgb) / .35); }
.planlane--empty { border-style: dashed; }

/* ── sheet ────────────────────────────────────────────────────────────── */

.sheet { position: fixed; inset: 0; z-index: 60; }
.sheet[hidden] { display: none; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(6, 10, 14, .72); backdrop-filter: blur(3px); }

.sheet__card {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, var(--raised), var(--surface) 60%);
  border-top: 1px solid var(--line-2); border-radius: 20px 20px 0 0;
  padding: 18px var(--pad) calc(22px + env(safe-area-inset-bottom));
  display: grid; gap: 15px; max-height: 90dvh; overflow-y: auto;
  grid-template-columns: minmax(0, 1fr);   /* two inputs side by side must not widen the sheet */
  animation: rise .22s cubic-bezier(.22, 1, .36, 1);
}
@media (min-width: 620px) {
  .sheet__card {
    left: 50%; bottom: auto; top: 50%; right: auto; transform: translate(-50%, -50%);
    width: min(480px, 92vw); border: 1px solid var(--line-2); border-radius: var(--r);
    animation: pop .2s cubic-bezier(.22, 1, .36, 1);
    box-shadow: 0 40px 90px -30px var(--shadow);
  }
}
@keyframes rise { from { transform: translateY(16px); opacity: .5; } }
@keyframes pop  { from { transform: translate(-50%, -47%); opacity: .5; } }

.sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sheet__titles { display: grid; gap: 3px; min-width: 0; }
.sheet__eyebrow { font-family: var(--mono); font-size: 10.5px; font-weight: 600;
                  letter-spacing: .12em; color: var(--mint); text-transform: uppercase; }
.sheet__title { font-family: var(--display); font-weight: 700; font-size: 21px; letter-spacing: -.02em; }
.sheet__body { display: grid; gap: 15px; grid-template-columns: minmax(0, 1fr); }

.kv {
  margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 7px 14px;
  font-size: 13px; padding: 13px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.kv dt {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--mute); align-self: center;
}
.kv dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.kv .warn { color: var(--crimson); font-family: var(--body); }

.field { display: grid; gap: 7px; grid-template-columns: minmax(0, 1fr); }
.field__label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .11em;
                text-transform: uppercase; color: var(--mute); }
.field__row { display: flex; gap: 8px; }
.field__hint { font-size: 12px; color: var(--mute); }

.input, .select {
  flex: 1; min-width: 0; background: var(--well); border: 1px solid var(--line);
  color: var(--text); border-radius: 9px; padding: 11px 12px;
  font-family: var(--mono); font-size: 16px; font-variant-numeric: tabular-nums;
}
.select { font-family: var(--body); font-size: 14px; appearance: none;
          background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%),
                            linear-gradient(135deg, var(--mute) 50%, transparent 50%);
          background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
          background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
          padding-right: 32px; }
.input:focus, .select:focus { outline: 2px solid var(--sky); outline-offset: -1px; border-color: transparent; }

.btn {
  background: var(--raised-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 11px 14px; font-family: var(--body);
  font-size: 13.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: border-color .14s ease, background .14s ease, opacity .14s ease;
}
.btn:hover { border-color: var(--line-2); }
.btn:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }
.btn[disabled] { opacity: .42; cursor: not-allowed; }
.btn--primary { background: var(--mint); color: var(--mint-ink); border-color: var(--mint); font-weight: 600; }
.btn--primary:hover { background: #5CF2B5; border-color: #5CF2B5; }
.btn--ghost { background: none; color: var(--dim); }
.btn--ghost:hover { color: var(--text); }
.btn--danger { background: none; color: var(--crimson); border-color: rgb(var(--crimson-rgb) / .38); }
.btn--danger:hover { border-color: var(--crimson); }
.btn--sm { padding: 6px 10px; font-size: 12px; border-radius: 7px; }

.divider { height: 1px; background: var(--line); margin: 2px 0; }

.note { margin: 0; font-size: 12px; color: var(--mute); }
.note--warn { color: var(--amber); }

/* ── mobile tab bar ───────────────────────────────────────────────────── */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: rgb(var(--canvas-rgb) / .93); backdrop-filter: blur(18px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 760px) { .tabbar { display: none; } }

.tabbar__tab {
  display: grid; justify-items: center; gap: 3px; padding: 9px 0 8px;
  text-decoration: none; color: var(--mute); font-size: 10.5px; font-weight: 500;
}
.tabbar__tab svg { font-size: 20px; }
.tabbar__tab.is-on { color: var(--mint); }

/* ── toast ────────────────────────────────────────────────────────────── */

.toast {
  position: fixed; left: 50%; bottom: calc(78px + env(safe-area-inset-bottom));
  transform: translate(-50%, 16px);
  background: var(--text); color: var(--canvas);
  padding: 11px 17px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 80; max-width: calc(100vw - 28px); text-align: center;
  box-shadow: 0 20px 40px -18px var(--shadow);
}
@media (min-width: 760px) { .toast { bottom: 26px; } }
.toast.is-up { opacity: 1; transform: translate(-50%, 0); }
.toast.is-bad { background: var(--crimson); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ── profit ───────────────────────────────────────────────────────────── */

/* Revenue, then what is taken out of it, then what is left. Widths are a
   share of revenue, so the shrinking bar *is* the argument. */
.waterfall { display: grid; gap: 11px; padding: 4px 4px 8px; }

.wfrow { display: grid; grid-template-columns: 130px 1fr auto; align-items: center; gap: 12px; }
@media (max-width: 620px) { .wfrow { grid-template-columns: 96px 1fr auto; gap: 9px; } }

.wfrow__label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--mute);
}
.wfrow__track { height: 22px; border-radius: 6px; background: var(--well);
                border: 1px solid var(--line); overflow: hidden; }
.wfrow__bar { display: block; height: 100%; border-radius: 5px;
              transition: width .55s cubic-bezier(.22, 1, .36, 1); }
.wfrow__bar--revenue { background: linear-gradient(90deg, rgb(var(--sky-rgb) / .55), rgb(var(--sky-rgb) / .28)); }
.wfrow__bar--cogs    { background: linear-gradient(90deg, rgb(var(--amber-rgb) / .55), rgb(var(--amber-rgb) / .25)); }
.wfrow__bar--rent    { background: linear-gradient(90deg, rgb(var(--crimson-rgb) / .5), rgb(var(--crimson-rgb) / .22)); }
.wfrow__bar--net     { background: linear-gradient(90deg, var(--mint), rgb(var(--mint-rgb) / .45));
                       box-shadow: 0 0 18px -6px var(--mint); }
.wfrow__value {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.wfrow--net .wfrow__value { color: var(--mint); font-size: 15px; }
.wfrow--net .wfrow__label { color: var(--text); }

.table--slots { --cols: 2fr 90px 108px 128px 1fr; }
.table--sites { --cols: 1.7fr 78px 116px 116px 116px 120px; }

/* The ranking bar sits behind the row rather than in its own column: a fifth
   number would compete with the four that matter. */
.slotbar { position: relative; height: 6px; border-radius: 999px;
           background: var(--well); border: 1px solid var(--line); overflow: hidden; min-width: 60px; }
.slotbar__fill { display: block; height: 100%; border-radius: 999px; background: var(--mint);
                 transition: width .55s cubic-bezier(.22, 1, .36, 1); }

.net-good { color: var(--mint); }
.net-bad  { color: var(--crimson); }
.net-unknown { color: var(--mute); font-family: var(--body); font-size: 12px; }

/* ── alerts ───────────────────────────────────────────────────────────── */

.alertpill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 8px; border-radius: 999px; text-decoration: none;
  background: rgb(var(--crimson-rgb) / .14); color: var(--crimson);
  border: 1px solid rgb(var(--crimson-rgb) / .35);
  font-family: var(--mono); font-size: 11px; font-weight: 600;
}
.alertpill[hidden] { display: none; }
.alertpill:hover { background: rgb(var(--crimson-rgb) / .22); }
.alertpill svg { font-size: 13px; }

.alerts { padding: 15px 15px 11px; border-color: rgb(var(--crimson-rgb) / .3); }
.alerts[hidden] { display: none; }

.alertrow {
  display: grid; grid-template-columns: 8px 1fr auto; align-items: start;
  gap: 12px; padding: 10px 8px; border-radius: var(--r-sm);
}
.alertrow:hover { background: var(--raised-2); }
.alertrow__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; }
.alertrow__dot--high   { background: var(--crimson); box-shadow: 0 0 0 3px rgb(var(--crimson-rgb) / .16); }
.alertrow__dot--medium { background: var(--amber);   box-shadow: 0 0 0 3px rgb(var(--amber-rgb) / .16); }
.alertrow__dot--low    { background: var(--mute); }
/* Block, not inline: these are spans, and inline boxes ignore the margin that
   separates a title from its body — they run together on one line. */
.alertrow__main  { min-width: 0; }
.alertrow__title { display: block; font-size: 14px; font-weight: 600; }
.alertrow__body  { display: block; font-size: 12.5px; color: var(--dim); margin-top: 2px; }
.alertrow__since {
  font-family: var(--mono); font-size: 10.5px; color: var(--mute);
  white-space: nowrap; text-align: right;
}
.alertrow__go {
  display: block; margin-top: 4px; font-family: var(--body); font-size: 11.5px;
  color: var(--sky); text-decoration: none;
}
.alertrow__go:hover { text-decoration: underline; }

/* Invoices screen: the search box takes the room the title would. */
#i-search { flex: 1; min-width: 0; }
/* An invoice number is wider than a lane code, and its two lines stack. */
#i-list .row { grid-template-columns: 84px minmax(0, 1fr) auto; }
#i-list .row__code { white-space: nowrap; }
#i-list .row__name, #i-list .row__meta { display: block; }
.i-emails .row__name, .i-emails .row__meta { display: block; }
.i-emails .row { grid-template-columns: 64px minmax(0, 1fr); }
.i-email { flex: 1; min-width: 0; }
.i-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
@media (max-width: 560px) { #i-list .row { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 8px; } }
/* Sales: one search box, status filter and export serve all three tabs; only the open tab's list shows. */
#sl-search { flex: 1; min-width: 0; }
.sl-filters { margin-top: -6px; flex-wrap: wrap; gap: 10px; }
#o-list .row, #r-list .row { grid-template-columns: 84px minmax(0, 1fr) auto; }
#o-list .row__code, #r-list .row__code { white-space: nowrap; }
#o-list .row__name, #o-list .row__meta, #r-list .row__name, #r-list .row__meta { display: block; }
@media (max-width: 560px) { #o-list .row, #r-list .row { grid-template-columns: 72px minmax(0, 1fr) auto; gap: 8px; } }
#sl-custom[hidden], #p-custom[hidden] { display: none; }
#sl-status { flex: 0 0 auto; width: auto; }