/* GST Operations — weight capture (WP6, screen 5).
 *
 * Design tokens are lifted verbatim from docs/GST_App_UI_Mockup.html :root.
 * Do not re-mix these values here; the mockup is the authority.
 *
 * Roboto Condensed is NOT vendored: no licensed font file ships with this
 * repo and the screen must work with no network in a refrigerated truck, so
 * an external font link is not an option. The stack below is the mockup's own
 * fallback chain; drop RobotoCondensed-{400,700,800}.woff2 into
 * app/static/fonts/ and un-comment the @font-face blocks to switch over.
 */

:root{
  --green:#117b53; --green-dark:#0c5a3c; --green-tint:#e9f3ee;
  --red:#a6152e; --red-tint:#f9ecee;
  --paper:#fbfaf7; --card:#ffffff; --ink:#191917; --ink-2:#5c5c56; --ink-3:#9a9a92;
  --line:#e6e4dd; --line-2:#d8d5cc;
  --mono-nums: "tnum" 1, "lnum" 1;
}

/*
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:400;
  font-display:swap;src:url('/static/fonts/RobotoCondensed-Regular.woff2') format('woff2')}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:700;
  font-display:swap;src:url('/static/fonts/RobotoCondensed-Bold.woff2') format('woff2')}
@font-face{font-family:'Roboto Condensed';font-style:normal;font-weight:800;
  font-display:swap;src:url('/static/fonts/RobotoCondensed-ExtraBold.woff2') format('woff2')}
*/

*{margin:0;padding:0;box-sizing:border-box}
html{font-size:16px;-webkit-text-size-adjust:100%}
body{
  font-family:'Roboto Condensed','Arial Narrow',Arial,sans-serif;
  background:var(--paper); color:var(--ink);
  -webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
}
[hidden]{display:none !important}

/* ── Tricolor ribbon: the one brand flourish ─────────────── */
.ribbon{height:6px;display:flex}
.ribbon i{flex:3;background:var(--green)}
.ribbon i:nth-child(2){flex:1;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ribbon i:nth-child(3){flex:3;background:var(--red)}

/* ── Top bar ─────────────────────────────────────────────── */
.topbar{background:var(--green-dark);color:#fff;padding:12px 16px 14px}
.topbar .row{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* The owner's Shield on the landing, top-left, and the block is the way home
   (V. Boucher 2026-08-09, first field-test drive). Placed by WIDTH, height
   following the ratio — the rule both document renderers already place it by.
   The DRIVER shells (base.html) do not use it: a driver arrives at a run and
   has nowhere else to be, which is why they carry no home link at all.

   NO WHITE PLATE, BECAUSE THE ARTWORK BRINGS ITS OWN (2026-08-10, the owner's
   original vector). The brand guide's contrast rule is unchanged — the colour
   Shield belongs on a LIGHT background and this bar is green-dark — but the
   vector's outer shield path is filled white, so it arrives on the green
   already on white, in the shape of the Shield rather than a rectangle. The
   chip was there for the raster, which was an opaque white rectangle.

   26px / 34px, DOWN FROM 32px / 40px, IS THE SAME DRAWN SHIELD: the reset's
   `box-sizing:border-box` meant 3px of padding a side came out of the box, so
   the raster drew at 26px and 34px. Those are now the box itself. */
.brand-home{display:flex;align-items:center;gap:9px;text-decoration:none;color:inherit}
.brand-home .logo{width:26px;height:auto;flex-shrink:0;display:block}
.wordmark{font-weight:800;font-size:1.05rem;letter-spacing:.04em;line-height:1}
.wordmark span{color:#f3c9d1}
.crumb{font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(255,255,255,.6);font-weight:500;margin-top:8px}
.topbar h1{font-size:1.5rem;font-weight:800;letter-spacing:.01em;margin-top:2px}
.topbar .hint{font-size:.82rem;font-weight:300;color:rgba(255,255,255,.75);margin-top:4px}
.topbar .who{font-size:.72rem;font-weight:300;color:rgba(255,255,255,.6);margin-top:6px}
.topbar .who b{font-weight:700;color:rgba(255,255,255,.85)}
.lang{background:transparent;color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.35);
  border-radius:7px;padding:5px 11px;font-family:inherit;font-size:.75rem;font-weight:700;
  letter-spacing:.12em;text-decoration:none;line-height:1.4}

/* ── The bell (the notifications ruling, V. Boucher 2026-09-22) ───────────
   THE SAME BELL THE OFFICE SHELL DRAWS (orders.css, where the reasoning for
   every rule is written down once: why `<details>` and no script, why the box
   is absolute, why that width, why the "i" is a `title`). The mockup has no
   bell, so both copies are built out of tokens it does have and nothing new is
   minted.

   TWO DIFFERENCES, AND BOTH ARE THE BAR IT SITS IN. This one is on the
   green-dark top bar, so the SUMMARY takes the bar's own whites — the same two
   values `.lang` beside it wears — while the DROP-DOWN is identical, because it
   hangs below the bar on the card tokens like every other panel on this page.

   `.top-acts` IS THE CORNER ITSELF: the bell and the language pill in one box,
   so the pill stays hard against the right edge and the bell arrives beside it
   rather than displacing it. */
.top-acts{display:flex;align-items:center;gap:10px}
details.bell{position:relative}
details.bell>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;
  gap:6px;color:rgba(255,255,255,.85);font-size:.85rem}
details.bell>summary::-webkit-details-marker{display:none}
details.bell>summary:hover{color:#fff}
details.bell>summary:focus-visible{outline:2px solid var(--green);outline-offset:2px}
details.bell .n-icon{font-size:1.1rem;font-weight:300}
.bell-drop{position:absolute;right:0;top:calc(100% + 6px);z-index:30;
  width:min(420px,calc(100vw - 32px));background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:0 6px 16px rgba(25,25,23,.08);padding:8px 0;
  text-align:left;text-transform:none;letter-spacing:normal;font-size:.9rem;color:var(--ink)}
/* THE ROWS ARE LINKS AND THIS SHEET HAD NO `.link` RULE (the review of
   2026-09-22, minor 1): orders.css minted `.link` for the office column and
   this sheet never needed it until the bell put anchors on the home page. The
   same three declarations as orders.css:326, scoped to the drop-down — green
   because every link in the app is green, and no new token. */
.bell-drop .link{color:var(--green);font-weight:700;text-decoration:none}
.bell-drop .link:hover{text-decoration:underline}
.bell-drop h3{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);
  font-weight:500;padding:8px 16px 4px;display:flex;align-items:center;gap:8px}
.bell-row{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 16px;border-top:1px solid var(--line)}
.bell-row .i{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border:1px solid var(--line-2);border-radius:99px;
  font-size:.65rem;font-weight:700;color:var(--ink-3);cursor:help}
.bell-more{color:var(--ink-3)}
.bell-foot{padding:10px 16px;border-top:1px solid var(--line)}

/* ── Status / queue strip ────────────────────────────────── */
.statusbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:9px 16px;background:var(--card);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:5}
.net{font-size:.8rem;color:var(--ink-2);font-weight:400;flex:1;min-width:120px}
.net.off{color:var(--red);font-weight:700}
/* The office is unreachable but the radio is up and the work is safe on the
   phone: louder than "con señal", quieter than the red of a dead radio. The
   amber is the one WP4 already uses for its stale-cost badge (orders.css
   .badge.stale) rather than a fourth colour invented here — the mockup :root
   carries no amber token, so caution reuses the value already shipped. */
.net.stale{color:#8a5a12;font-weight:700}
.badge{display:inline-flex;align-items:center;gap:6px;background:#f1f0ea;color:var(--ink-2);
  border-radius:99px;padding:4px 11px;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase}
.badge b{font-size:.95rem;letter-spacing:0;font-feature-settings:var(--mono-nums);color:var(--ink)}
.badge.pending{background:var(--red-tint);color:var(--red)}
.badge.pending b{color:var(--red)}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{font-family:inherit;font-size:.9rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border:none;border-radius:8px;padding:10px 18px;cursor:pointer;display:inline-block;
  text-decoration:none;line-height:1.2}
.btn.primary{background:var(--green);color:#fff}
.btn.primary:active{background:var(--green-dark)}
.btn.ghost{background:transparent;color:var(--ink-2);border:1px solid var(--line-2)}
.btn.ghost:active{border-color:var(--ink-3);color:var(--ink)}
.btn.danger{background:transparent;color:var(--red);border:1px solid var(--red)}
.btn.small{font-size:.72rem;padding:7px 11px;letter-spacing:.08em}
.btn.block{display:block;width:100%}
.btn[disabled]{opacity:.45}
.btn.tall{min-height:56px;font-size:1.05rem}

/* ── Banner (non-blocking; red is a signal, never decoration) ── */
.banner{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;
  margin:10px 12px 0;padding:13px 15px;border-radius:10px;
  background:var(--red-tint);border:1px solid var(--red)}
.banner .b-title{display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--red)}
.banner .b-msg{display:block;font-size:.95rem;color:var(--ink);margin-top:3px}
.banner.note{background:#f5f4ef;border-color:var(--line-2)}
.banner.note .b-title{color:var(--ink-3)}
.banner.good{background:var(--green-tint);border-color:var(--green)}
.banner.good .b-title{color:var(--green)}

/* ── Totals ──────────────────────────────────────────────── */
.totals{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 8px;text-align:center}
.stat .k{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.stat .v{font-size:1.6rem;font-weight:800;font-feature-settings:var(--mono-nums);line-height:1.15}
.stat.alert .v{color:var(--red)}
.stat.good .v{color:var(--green)}

/* ── Vendor picker ───────────────────────────────────────── */
.picker{padding:4px 12px 96px}
/* The landing page's ways-in. A list, not a run of paragraphs: each link is its
   own item in normal flow with real spacing between them (V. Boucher,
   2026-08-05 — the buttons were overlapping because an inline <a> gets no box
   height from its padding, and the reset zeroes paragraph margins). Wrapped row
   on a desktop, one full-width tap target per line on a phone. */
.link-stack{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:0 2px 22px}
.link-stack li{margin:0}
/* EVERY ACTION ON THIS PAGE IS SOLID GREEN (V. Boucher 2026-08-09, first
   field-test drive — the landing's action stack only; every other screen keeps
   the mockup's primary/ghost distinction). The second line inside one of those
   buttons is `.item-es`, which is ink-2 — grey on green, unreadable — so it is
   given the white the button already prints its first line in. */
.link-stack .btn.primary .item-es{color:rgba(255,255,255,.82)}
/* THE STEP NUMBER (V. Boucher 2026-08-09, second drive). The same ordinal the
   office rail prints, on the rail's own groups in the rail's order — since the
   regroup (batch N4) the home page draws the rail's table itself — because the
   home page and the rail have to tell one story about what to do next. Only
   Buying's first three steps carry one; nobody works a drawer of tools top to
   bottom. */
.link-stack .step{margin-right:8px;font-feature-settings:var(--mono-nums);
  color:rgba(255,255,255,.7)}
@media(max-width:560px){
  .link-stack{flex-direction:column;gap:9px}
  .link-stack .btn{display:block;text-align:center}
}
.section-h{font-size:1.15rem;font-weight:800;letter-spacing:.01em;margin:6px 2px 2px}
.section-hint{font-size:.85rem;font-weight:300;color:var(--ink-2);margin:0 2px 12px;line-height:1.35}
.vendor-card{display:block;width:100%;text-align:left;font-family:inherit;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:15px 16px;margin-bottom:10px;cursor:pointer}
.vendor-card:active{border-color:var(--green)}
.vendor-card.done{opacity:.62}
.vendor-card .v-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vendor-card .v-name{font-size:1.3rem;font-weight:800;letter-spacing:.03em}
.vendor-card .v-prog{display:block;font-size:1rem;font-weight:700;margin-top:5px;
  font-feature-settings:var(--mono-nums)}
.vendor-card.done .v-prog{color:var(--green)}
.vendor-card .v-lines{display:block;font-size:.78rem;font-weight:300;color:var(--ink-3);margin-top:2px}

/* ── One vendor ──────────────────────────────────────────── */
.vendor-bar{display:flex;align-items:center;gap:12px;padding:10px 12px 2px}
.vendor-bar .vb-who{min-width:0}
.vendor-bar .vb-who b{display:block;font-size:1.2rem;font-weight:800;letter-spacing:.03em;line-height:1.1}
.vendor-bar .vb-who span{display:block;font-size:.8rem;font-weight:300;color:var(--ink-2);
  font-feature-settings:var(--mono-nums)}

/* ── Line cards ──────────────────────────────────────────── */
.lines{padding:0 12px 96px}
.wt-card{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:14px 15px 16px;margin-bottom:10px}
.wt-card.active{border-color:var(--green);box-shadow:0 0 0 2px var(--green-tint)}
.wt-card.flag{border-color:var(--red);background:#fffdfd}
.wt-card.done{opacity:.62}
/* Field prompts on the line card — the weight prompt, the Brand prompt and the
   count question. V. Boucher, G2 relook 2026-08-04, driving run 2494 on a
   phone: "the field prompts need to be more contrast and maybe a little
   bigger". .62rem of --ink-3 is caption grey; on a bright phone at 2 AM in a
   cold warehouse it is the line you skip, and the prompt that names WHICH case
   you are weighing is not skippable. So: full-strength --ink instead of the
   third-tier grey, and one real step up the mockup's own size scale
   (.62 -> .85rem) at 700 rather than 500. Tracking eases to the .1em the count
   step already used, so the extra size buys legibility instead of width. No
   new colour and no new size — both come from tokens/values already on file. */
.wt-card .lbl{font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  font-weight:700;display:block;margin-bottom:5px}
.item-name{font-weight:800;font-size:1.15rem;display:block;line-height:1.2}
.item-es{display:block;font-weight:300;font-size:.82rem;color:var(--ink-2);margin-top:1px}
.meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:.78rem;color:var(--ink-2);font-weight:300}
.meta b{font-weight:700;color:var(--ink);font-feature-settings:var(--mono-nums)}
.progress{font-size:.95rem;font-weight:800;font-feature-settings:var(--mono-nums);white-space:nowrap}
.progress small{font-weight:300;font-size:.72rem;color:var(--ink-2);letter-spacing:.12em;
  text-transform:uppercase;display:block}

.chip{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.08em;padding:3px 9px;
  border-radius:99px;text-transform:uppercase}
.chip.ok{background:var(--green-tint);color:var(--green)}
.chip.warn{background:var(--red-tint);color:var(--red)}
.chip.route{background:#f1f0ea;color:var(--ink-2);letter-spacing:.12em}
.chip.count{background:#f1f0ea;color:var(--ink-2);font-feature-settings:var(--mono-nums)}
.chip.count.warn{background:var(--red-tint);color:var(--red)}

/* count step — the first question on every line */
.count-step{margin-top:12px;padding:12px 12px 10px;border:1px solid var(--line-2);
  border-radius:10px;background:#faf9f5}
/* The count question is the first thing asked on every line, and it kept its
   one-step lead over the other two prompts through the 2026-08-04 lift
   (.72 -> .95rem); contrast, weight and tracking are the shared rule above. */
.count-step .lbl{font-size:.95rem}
.count-row{display:flex;gap:10px;align-items:stretch;margin-top:6px}
.count-row .wt-in{flex:1;min-width:96px;text-align:center}
.count-row .btn{flex:1.2;white-space:nowrap}
.count-step .section-hint{margin:8px 0 0;font-size:.78rem}
.count-note{font-size:.8rem;color:var(--ink-2);font-weight:400;margin-top:8px}

/* the weight the driver has to stand behind — red is the signal, and this one
   BLOCKS, so it gets the full panel rather than a note under the field */
.wt-confirm{margin-top:12px;padding:13px 14px;border-radius:10px;
  background:var(--red-tint);border:1px solid var(--red)}
.wt-confirm .wc-msg{font-size:.95rem;line-height:1.35;color:var(--ink)}
.wt-confirm .wc-actions{display:flex;gap:9px;margin-top:11px}
.wt-confirm .wc-actions .btn{flex:1}
.wt-confirm .btn.danger{background:var(--red);color:#fff;border-color:var(--red)}
.wt-card.asking{border-color:var(--red)}
.line-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.line-actions .btn{flex:1}

/* capture form */
.capture-row{display:flex;gap:10px;align-items:flex-end;margin-top:12px;flex-wrap:wrap}
.field{flex:1;min-width:118px}
.wt-in,.txt-in{font-family:inherit;font-feature-settings:var(--mono-nums);
  border:1px solid var(--line-2);border-radius:7px;background:#fff;color:var(--ink);
  width:100%;padding:12px 12px}
.wt-in{text-align:right;font-size:1.6rem;font-weight:800;min-height:56px}
.txt-in{font-size:1rem;font-weight:700;text-transform:uppercase}
.wt-in:focus,.txt-in:focus{outline:2px solid var(--green);outline-offset:0;border-color:var(--green)}
/* Placeholders are stated rather than left to the browser's own grey, which
   differs per engine and is nobody's design decision. The Brand placeholder is
   an INSTRUCTION ("escribe la marca") and takes --ink-2, darker than any UA
   default. The weight placeholder is a shaped zero and deliberately stays the
   quieter --ink-3 at 400: a dark bold 0.0 in a 1.6rem field would read as a
   captured weight, and a placeholder that can be mistaken for a captured
   weight is the one thing this screen must never do. */
.txt-in::placeholder{color:var(--ink-2);opacity:1}
.wt-in::placeholder{color:var(--ink-3);opacity:1;font-weight:400}
.wt-in.bad,.txt-in.bad{border-color:var(--red);color:var(--red)}
.field-msg{font-size:.78rem;color:var(--red);font-weight:400;margin-top:4px}
.packer-note{font-size:.8rem;color:var(--ink-2);font-weight:300;margin-top:6px;line-height:1.35}
.row-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.row-actions .btn{flex:1}

/* per-case list */
.cases{list-style:none;margin-top:12px;border-top:1px solid var(--line);padding-top:8px}
.cases li{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);
  font-size:.9rem;flex-wrap:wrap}
.cases .c-note{flex-basis:100%;font-size:.8rem;line-height:1.3;color:var(--red);font-weight:400}
.cases li:last-child{border-bottom:none}
.cases .c-n{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  font-weight:500;min-width:52px}
.cases .c-w{font-weight:800;font-feature-settings:var(--mono-nums);flex:1}
.cases li.bad .c-w{color:var(--red)}
.cases li.shorted .c-w{color:var(--ink-3);text-decoration:line-through}
.cases li.queued .c-w::after{content:"·";color:var(--ink-3);margin-left:6px}

/* ── Sticky footer ───────────────────────────────────────── */
.dock{position:fixed;left:0;right:0;bottom:0;background:var(--ink);color:#fff;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));display:flex;gap:12px;
  align-items:center;justify-content:space-between;z-index:6}
.dock .t-k{font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55);font-weight:500}
.dock .t-v{font-size:1.35rem;font-weight:800;font-feature-settings:var(--mono-nums);line-height:1.1}
.dock .btn.ghost{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.32)}

/* ── Dialog ──────────────────────────────────────────────── */
dialog{border:none;border-radius:12px;padding:0;width:min(94vw,420px);background:var(--card);
  color:var(--ink);font-family:inherit}
dialog::backdrop{background:rgba(25,25,23,.55)}
.dlg-head{padding:16px 18px 8px;font-size:1.1rem;font-weight:800}
.dlg-body{padding:0 18px 8px}
.dlg-foot{display:flex;gap:10px;padding:12px 18px 16px}
.dlg-foot .btn{flex:1}
.opt{display:flex;align-items:center;gap:11px;padding:12px 2px;border-bottom:1px solid var(--line);
  font-size:1rem;cursor:pointer}
.opt:last-of-type{border-bottom:none}
.opt input{width:22px;height:22px;accent-color:var(--green)}

/* ── Close review ────────────────────────────────────────── */
.review{padding:12px 12px 96px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:12px}
.panel-head{padding:13px 16px;border-bottom:1px solid var(--line)}
.panel-head h2{font-size:1rem;font-weight:700;letter-spacing:.02em}
.panel-head .hint{display:block;font-size:.8rem;color:var(--ink-3);font-weight:300;margin-top:2px}
.miss{list-style:none}
.miss li{display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--line)}
.miss li:last-child{border-bottom:none}
.miss .n{font-size:1.35rem;font-weight:800;color:var(--red);font-feature-settings:var(--mono-nums)}
.miss .n small{display:block;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;text-align:right}
.muted{color:var(--ink-3);font-weight:300}

@media(min-width:720px){
  .lines,.review,.picker,.vendor-bar{max-width:760px;margin:0 auto}
  .totals{max-width:760px;margin:0 auto}
  .topbar{padding:16px 24px 18px}
  .brand-home .logo{width:34px}
}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}

/* ── Who this phone thinks you are (WP10 D5) ─────────────── */
/* The chip is not decoration: money and weights are written against this
   person. `.who-stale` marks an identity that came from the offline snapshot
   rather than from the network — a memory, and it has to read as one. */
.who-stale{display:inline-block;margin-left:6px;font-size:.68rem;font-weight:400;
  letter-spacing:.06em;color:var(--ink-3);text-transform:none}
.switch-user{margin-top:8px}

/* ── The "This week" strip on the home page (nav plan A1) ───── */
/* WHERE THE WEEK ACTUALLY STANDS, directly under the alarms and above the ways
   in. It is deliberately NOT `.link-stack`: those are the page's ACTIONS and
   they are solid green (V. Boucher 2026-08-09); these are FACTS, and a fact
   dressed as a button is a page with twenty equally loud things on it. One
   card, one line per fact, the mockup's own paper/ink tokens.

   GREEN AND RED ARE SIGNALS (build rule 5), AND EACH IS ONE STATE WORD. The
   engine writes `ok` on a fact that is DONE — the week closed out, the costs
   live — and `failed` on a fact that is a FAILURE, which today is the one
   about invoices that did not reach QuickBooks and only while its count is not
   zero. `pending` is work still ahead and wears plain ink, because a page
   where everything undone is red is a page where red means nothing. The two
   rules below key on the STATE and never on which fact it is: one word per
   meaning is what stops "not closed out yet" and "three never reached the
   books" from ever sharing a colour. */
.week-strip{list-style:none;margin:0 2px 22px;padding:0;background:var(--card);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.week-strip li{margin:0;border-bottom:1px solid var(--line)}
.week-strip li:last-child{border-bottom:none}
.week-strip a{display:block;padding:11px 16px;font-size:.95rem;font-weight:400;
  color:var(--ink);text-decoration:none;font-feature-settings:var(--mono-nums)}
.week-strip a:hover{background:#f5f4ef}
.week-strip a:focus-visible{outline:2px solid var(--green);outline-offset:-2px}
/* DONE, and the only green on the strip. */
.week-strip li[data-state="ok"]{background:var(--green-tint)}
.week-strip li[data-state="ok"] a{color:var(--green-dark);font-weight:700}
/* ...and a FAILURE, the only red. */
.week-strip li[data-state="failed"]{background:var(--red-tint)}
.week-strip li[data-state="failed"] a{color:var(--red);font-weight:700}