/* Pronto — tokens.css
   Ported from pronto-component-library.html (The Slash, v1).
   Tokens are the contract: anything not listed here is not in the system.
   Deviations from the library are marked D# and listed in the build report. */

/* ================= TOKENS ================= */
:root {
  --lime: #aadb25;
  --lime-deep: #93c511;
  --lime-tint: #edf6ce;
  --ink: #292927;
  --ink-60: #6b6b66;
  --ink-30: #c9c9c4;
  --ink-12: #eceee2;
  --white: #ffffff;
  --chalk: #f4f6ea;
  --red: #d8451f;
  --red-tint: #fbe9e3;
  --disp: "Archivo", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --cut: 10px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  /* Motion budget: one curve, 150–250ms, opacity/transform only */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --t1: 150ms;
  --t2: 200ms;
  --t3: 250ms;
  /* D1: focus ring follows surface — ink on light and on lime (8.9:1), lime on ink.
     (Library used red everywhere; brand sheet allows red only for errors and
     focus-on-lime, but red-on-lime is 2.69:1 — under the 3:1 non-text floor —
     so red is errors-only here, full stop.) */
  --focus: var(--ink);
}
.bg-ink {
  --focus: var(--lime);
}

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

/* ================= BASE ================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--chalk);
  color: var(--ink);
  font-family: var(--disp);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
img,
svg {
  max-width: 100%;
  display: block;
}
::selection {
  background: var(--ink);
  color: var(--lime);
}
a {
  color: var(--ink);
}
p {
  margin: 0 0 0.8rem;
}
button {
  font: inherit;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--lime);
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0.6em 1em;
  z-index: 100;
}
.skip-link:focus {
  left: 0;
}

/* Type roles — library "Foundations" */
.cond {
  font-variation-settings:
    "wdth" 62,
    "wght" 800;
  font-weight: 800;
  font-stretch: 62%;
  text-transform: uppercase;
  line-height: 0.94;
}
.semicond {
  font-variation-settings:
    "wdth" 75,
    "wght" 700;
  font-weight: 700;
  font-stretch: 75%;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.mono {
  font-family: var(--mono);
}
.t-hero {
  font-variation-settings:
    "wdth" 62,
    "wght" 800;
  font-weight: 800;
  font-stretch: 62%;
  text-transform: uppercase;
  font-size: 2.6rem;
  line-height: 0.94;
}
.t-h1 {
  font-variation-settings:
    "wdth" 68,
    "wght" 800;
  font-weight: 800;
  font-stretch: 68%;
  text-transform: uppercase;
  font-size: 1.7rem;
  line-height: 1;
}
.t-h2 {
  font-variation-settings:
    "wdth" 75,
    "wght" 700;
  font-weight: 700;
  font-stretch: 75%;
  text-transform: uppercase;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
.t-body {
  font-size: 1rem;
}
.t-small {
  font-size: 0.85rem;
  color: var(--ink-60);
}
.t-fact {
  font-family: var(--mono);
  font-size: 0.85rem;
}
.t-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* The slash — one per composition. */
.slashword {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.slashword::after {
  content: "";
  position: absolute;
  left: -3%;
  right: -3%;
  top: 50%;
  height: 0.13em;
  background: var(--slash, var(--ink));
  transform: translateY(-50%) rotate(-8deg);
}

/* ================= APP SHELL ================= */
/* Order path: single centred column, correct at 360, comfortable to 1280. */
.shell {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--chalk);
}
@media (min-width: 600px) {
  .shell {
    border-left: 2px solid var(--ink);
    border-right: 2px solid var(--ink);
  }
}
.shell--lime {
  background: var(--lime);
}
main.flow {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  background: var(--white);
  border-bottom: 2px solid var(--ink);
}
.appbar img {
  width: 96px;
}
.appbar .who {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 0.9em 0.2em;
} /* touch target */
.appbar--lime {
  background: var(--lime);
  border-bottom-color: rgba(41, 41, 39, 0.15);
}
.appbar--ink {
  background: var(--ink);
  border-bottom-color: #4a4a46;
}
.appbar--ink .who {
  color: var(--chalk);
}

/* CTA dock — one primary action, states the consequence. */
.cta-dock {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 1rem;
  background: var(--white);
  border-top: 2px solid var(--ink-12);
}
.cta-dock .line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  margin-bottom: 0.7rem;
}
.cta-dock .line b {
  font-weight: 700;
  white-space: nowrap;
}
.cta-dock--bare {
  background: transparent;
  border-top: none;
}

/* ================= BUTTONS ================= */
.btn {
  border: none;
  cursor: pointer;
  font-family: var(--disp);
  font-variation-settings:
    "wdth" 75,
    "wght" 800;
  font-weight: 800;
  font-stretch: 75%;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1rem;
  padding: 0.9em 1.8em;
  min-height: 48px;
  background: var(--ink);
  color: var(--lime);
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%
  );
  transition: transform var(--t1) var(--ease);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
}
.btn:active {
  transform: translateY(1px);
}
.btn--lime {
  background: var(--lime);
  color: var(--ink);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
  clip-path: none;
}
.btn--danger {
  background: var(--red);
  color: var(--white);
}
.btn--sm {
  font-size: 0.78rem;
  padding: 0.7em 1.3em;
  --cut: 7px;
}
.btn--lg {
  font-size: 1.15rem;
  padding: 1em 2.2em;
  --cut: 13px;
}
.btn--block {
  width: 100%;
  text-align: center;
}
.btn[disabled],
.btn[aria-disabled="true"] {
  background: var(--ink-30);
  color: var(--white);
  cursor: not-allowed;
  transform: none;
}
.btn--loading {
  position: relative;
  color: transparent;
}
.btn--loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 1em;
  height: 1em;
  border: 2.5px solid var(--lime);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn--lime.btn--loading::after {
  border-color: var(--ink);
  border-top-color: transparent;
}
@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

/* ================= FORMS ================= */
.field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: 100%;
}
.field label {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.field .hint {
  font-size: 0.78rem;
  color: var(--ink-60);
}
.input {
  font-family: var(--disp);
  font-size: 1rem;
  padding: 0.8em 0.9em;
  min-height: 48px;
  border: 2px solid var(--ink);
  background: var(--white);
  color: var(--ink);
  width: 100%;
}
.input::placeholder {
  color: var(--ink-30);
}
.input--mono {
  font-family: var(--mono);
  letter-spacing: 0.08em;
}
.field--error .input {
  border-color: var(--red);
}
/* D4: error text in ink with a red mark (red small text on white was 4.38:1) */
.field--error .err {
  font-family: var(--mono);
  font-size: 0.68rem;
  color: var(--ink);
  font-weight: 700;
}
.field--error .err::before {
  content: "! ";
  color: var(--red);
}
.otp {
  display: flex;
  gap: 0.5rem;
}
.otp .input {
  width: 3em;
  text-align: center;
  font-family: var(--mono);
  font-size: 1.3rem;
  font-weight: 700;
  padding: 0.5em 0;
}
select.input {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 49%, var(--ink) 50%),
    linear-gradient(-45deg, transparent 49%, var(--ink) 50%);
  background-position:
    calc(100% - 18px) 55%,
    calc(100% - 12px) 55%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.stepper {
  display: inline-flex;
  border: 2px solid var(--ink);
  background: var(--white);
}
.stepper button {
  border: none;
  background: var(--white);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 1.1rem;
  width: 48px;
  min-height: 44px;
  cursor: pointer;
  color: var(--ink);
}
.stepper button:focus-visible {
  outline-offset: -3px;
}
.stepper .val {
  font-family: var(--mono);
  font-weight: 700;
  min-width: 3em;
  text-align: center;
  border-left: 2px solid var(--ink);
  border-right: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  font-size: 0.95rem;
  min-height: 48px;
}
.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.switch .track {
  width: 52px;
  height: 28px;
  border: 2px solid var(--ink);
  background: var(--white);
  position: relative;
  flex: none;
  transition: background var(--t1) var(--ease);
}
.switch .track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--ink);
  transition: transform var(--t1) var(--ease);
}
.switch input:checked + .track {
  background: var(--lime);
}
.switch input:checked + .track::after {
  transform: translateX(24px);
}
.switch input:focus-visible + .track {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.seg {
  display: inline-flex;
  border: 2px solid var(--ink);
  background: var(--white);
}
.seg label {
  font-family: var(--disp);
  font-variation-settings:
    "wdth" 80,
    "wght" 700;
  font-weight: 700;
  font-stretch: 80%;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  border-right: 2px solid var(--ink);
}
.seg label:last-child {
  border-right: none;
}
.seg input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.seg label span {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0.55em 1.1em;
}
.seg input:checked + span {
  background: var(--ink);
  color: var(--lime);
}
.seg label:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.dropzone {
  width: 100%;
  border: 2px dashed var(--ink);
  background: var(--lime-tint);
  padding: 2rem 1.4rem;
  text-align: center;
  cursor: pointer;
  font-family: var(--disp);
  color: var(--ink);
}
.dropzone .big {
  font-variation-settings:
    "wdth" 68,
    "wght" 800;
  font-weight: 800;
  font-stretch: 68%;
  text-transform: uppercase;
  font-size: 1.4rem;
  display: block;
  margin-bottom: 0.3rem;
}
.dropzone .sub {
  font-size: 0.82rem;
  color: var(--ink-60);
  display: block;
}
.dropzone.is-over {
  background: var(--lime);
}
.dropzone.is-over .sub {
  color: var(--ink);
}

/* ================= CHIPS & BADGES ================= */
.chip {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  border: 2px solid var(--ink);
  background: var(--white);
  padding: 0.35em 0.7em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}
.chip i {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: var(--ink);
  flex: none;
}
.chip--colour i {
  background: var(--lime-deep);
}
.chip--photo {
  background: var(--chalk);
}
.chip--photo i {
  background: transparent;
  border: 1.5px solid var(--ink);
}
.chip--sm {
  font-size: 0.55rem;
  border-width: 1.5px;
  padding: 0.25em 0.5em;
}

.badge {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3em 0.7em;
  display: inline-block;
}
/* ================= LINE TONES (G-177) =================
   🔴 ONE CLASS PER `LineTone` FROM @pronto/client-logic, AND ALL EIGHT ARE
   HERE. `order-line.test.ts` asserts every tone the mapper can return has a
   `.badge--<tone> {` rule in this file, so the two lists cannot drift.

   🔴 AND THERE IS NO `.badge--<status>` IN THIS FILE ANY MORE — WHICH IS A
   STATEMENT THIS BLOCK PREVIOUSLY MADE WHILE FIVE SAT THIRTY LINES ABOVE IT.
   The cold review found `.badge--paid`, `.badge--printing` and `.badge--qc`
   (`quality_check`, abbreviated) still declared — literal OrderStatus values,
   one namespace away from the tones, contradicting the claim in the sentence
   that named them. They were also DEAD: `OrderLine` is the only consumer of
   any badge class in either client and it renders `badge--${line.tone}`, so
   `--paid`, `--printing`, `--qc`, `--refund` and `--muted` had no reader left.
   Removed rather than left with a note, because a status-named class sitting
   in the file is one autocomplete away from being used.

   ⚠️ `.badge--ready` WAS ONE OF THE FIVE, and the `ready` TONE was rendering
   off it by coincidence — written for a different purpose, before tones
   existed, and never redeclared here. The stylesheet-binding test passed on
   that coincidence. It is now declared below with the other seven.

   The palette is the brand sheet's badge set (pronto-website's M11): lime for
   the customer's move, ink for ours-in-progress, ink-12 for finished,
   red-bordered for needs-you. `--red` on `--red-tint` measured 3.73:1, so
   every red tone keeps ink text and spends the red on the border — the same D3
   ruling the removed `.badge--refund` carried. */
.badge--preparing {
  background: var(--white);
  color: var(--ink-60);
  box-shadow: inset 0 0 0 2px var(--ink-12);
}
/* The customer's move, and the only tone that is a solid lime fill. */
.badge--payable {
  background: var(--lime);
  color: var(--ink);
}
.badge--counter {
  background: var(--lime-tint);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--lime-deep);
}
.badge--queue {
  background: var(--white);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.badge--working {
  background: var(--ink);
  color: var(--lime);
}
.badge--ready {
  background: var(--lime-deep);
  color: var(--ink);
}
.badge--done {
  background: var(--ink-12);
  color: var(--ink-60);
}
.badge--attention {
  background: var(--red-tint);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--red);
}
/* 🔴 THE NEUTRAL FACE FOR A TONE THIS STYLESHEET DOES NOT KNOW (G-208).
   Tones are the SERVER's set now and travel as a bare string, so this build can
   meet one it has no rule for. `badgeFace` maps that here rather than
   interpolating it into a class name, which would render an unstyled span — a
   badge that looks missing rather than plain. It claims nothing: it is the
   `--preparing` face with no border, so an unknown situation cannot borrow the
   lime of "your move" or the red of "this needs you". */
.badge--plain {
  background: var(--white);
  color: var(--ink-60);
  box-shadow: inset 0 0 0 2px var(--ink-12);
}

/* ================= CARDS & DOCKET ================= */
.order-card {
  display: block;
  border: 2px solid var(--ink);
  background: var(--white);
  text-decoration: none;
  color: var(--ink);
}
.order-card .oc-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1rem;
  border-bottom: 2px solid var(--ink-12);
  font-family: var(--mono);
  font-size: 0.7rem;
}
.order-card .oc-body {
  padding: 0.9rem 1rem;
}
/* The filename (G-177). `overflow-wrap: anywhere` is load-bearing and not
   defensive tidiness: `displayFilename` caps the LENGTH at 44 characters but
   says nothing about where a line may break, and a 44-character name with no
   spaces in it — `Introductory-Mass-Gain-Programme-Week-01.pdf` has none — has
   no break opportunity at all without this, so it would overflow a card that
   is narrower than it is. The truncation and this rule solve different halves
   of the same string. */
.order-card .oc-title {
  font-variation-settings:
    "wdth" 75,
    "wght" 700;
  font-weight: 700;
  font-stretch: 75%;
  text-transform: uppercase;
  font-size: 1rem;
  margin: 0 0 0.35rem;
  overflow-wrap: anywhere;
}
/* 🔴 THE AMOUNT IS BOLD AND IN INK — IT IS WHAT THE CARD IS SCANNED FOR.
   This was `--ink-60` at regular weight, which is the treatment this sheet
   gives to secondary metadata everywhere else, and the money read as an
   afterthought under a title. On a history screen the two things a customer
   scans for are WHICH FILE and HOW MUCH; the filename is the title above and
   this is the other one, so it gets full contrast and 700. `tabular-nums`
   keeps a column of prices aligned on the desktop grid, where the cards sit
   three and four across and the digits line up down the column. */
.order-card .oc-meta {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  margin: 0;
}

/* 🔴 THE SENTENCE IS NOT A FIGURE, SO IT DOES NOT GET THE FIGURE'S TREATMENT.
   `.oc-meta` is deliberately bold ink with `tabular-nums` because the amount is
   half of what a history screen is scanned for. `PRICE_NOT_YET_TAKEN` is a
   33-character sentence, and inheriting that styling made "We show your price
   before you pay" shout at the same volume as ₦3,050 while carrying none of the
   same information. Noticed by the cold review, which pointed out that the
   chunk's whole subject is how the card is scanned. */
.order-card .oc-meta--nofigure {
  font-weight: 400;
  color: var(--ink-60);
  font-size: 0.7rem;
  letter-spacing: 0;
}

.docket {
  border: 2px solid var(--ink);
  background: var(--white);
  font-family: var(--mono);
  font-size: 0.76rem;
}
.docket .row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 1rem;
  border-bottom: 1.5px solid var(--ink-12);
}
.docket .row span:last-child {
  font-weight: 700;
  white-space: nowrap;
}
.docket .row--svc {
  background: var(--lime-tint);
}
.docket .row--refund {
  background: var(--red-tint);
  color: var(--red);
}
.docket .row--total {
  border-top: 2px solid var(--ink);
  border-bottom: none;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.7rem 1rem;
}
.docket .fine {
  padding: 0.5rem 1rem 0.8rem;
  font-size: 0.62rem;
  color: var(--ink-60);
  line-height: 1.7;
  font-family: var(--disp);
}
.docket--stale {
  opacity: 0.55;
}

.pkg {
  width: 100%;
  border: 2px solid var(--ink);
  background: var(--white);
  cursor: pointer;
  text-align: left;
  font-family: var(--disp);
  padding: 0;
  display: block;
  color: var(--ink);
}
.pkg .p-head {
  padding: 0.7rem 0.9rem 0.5rem;
  display: block;
}
.pkg .p-name {
  font-variation-settings:
    "wdth" 75,
    "wght" 700;
  font-weight: 700;
  font-stretch: 75%;
  text-transform: uppercase;
  font-size: 0.9rem;
  display: block;
}
.pkg .p-desc {
  font-size: 0.76rem;
  color: var(--ink-60);
  display: block;
  margin-top: 0.15rem;
}
.pkg .p-price {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.8rem;
  border-top: 1.5px solid var(--ink-12);
  padding: 0.5rem 0.9rem;
  display: block;
}
.pkg--on {
  background: var(--lime);
}
.pkg--on .p-desc {
  color: var(--ink);
}
.pkg--on .p-price {
  border-top-color: rgba(41, 41, 39, 0.25);
}

/* ================= STATUS & TICKET ================= */
.status-strip {
  border: 2px solid var(--ink);
  background: var(--white);
  font-family: var(--mono);
  font-size: 0.74rem;
}
.status-strip .row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1.5px solid var(--ink-12);
}
.status-strip .row:last-child {
  border-bottom: none;
}
.st {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: opacity var(--t3) var(--ease);
}
/* D2: library set done-text in lime-deep on white (2.05:1, fails AA) —
   done rows read as ink on lime-tint instead: past=tint, now=lime, next=grey. */
.st--done {
  background: var(--lime-tint);
  padding: 0 0.4em;
}
.st--now {
  background: var(--lime);
  padding: 0 0.4em;
}
.st--wait {
  color: var(--ink-30);
}

.ticket {
  width: min(330px, 100%);
  background: var(--white);
  filter: drop-shadow(0 12px 24px rgba(41, 41, 39, 0.25));
}
.ticket .t-top {
  background: var(--lime);
  padding: 1.1rem 1.2rem 0.9rem;
  clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%);
}
.ticket .t-top img {
  width: 120px;
}
.ticket .t-mid {
  padding: 1rem 1.2rem 0.4rem;
  text-align: center;
}
.ticket .lbl {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.ticket .code {
  font-variation-settings:
    "wdth" 62,
    "wght" 800;
  font-weight: 800;
  font-stretch: 62%;
  font-size: clamp(2.6rem, 16vw, 3.6rem);
  line-height: 1;
  margin: 0.1em 0;
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
.ticket .sub {
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.8;
  color: var(--ink-60);
}
.ticket .tear {
  border-top: 2px dashed var(--ink-30);
  margin: 1rem 0.9rem 0;
  position: relative;
}
.ticket .tear::before,
.ticket .tear::after {
  content: "";
  position: absolute;
  top: -9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--stagebg, var(--chalk));
}
.ticket .tear::before {
  left: -17px;
}
.ticket .tear::after {
  right: -17px;
}
.ticket .t-foot {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.8rem 1.2rem 1rem;
  color: var(--ink-60);
}

/* ================= FEEDBACK ================= */
.toast {
  border: 2px solid var(--ink);
  background: var(--white);
  padding: 0.8rem 1rem;
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
}
.toast .mark {
  font-family: var(--mono);
  font-weight: 700;
  flex: none;
}
.toast p {
  margin: 0;
  font-size: 0.86rem;
}
.toast small {
  display: block;
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--ink-60);
  margin-top: 0.2rem;
}
.toast--good {
  border-color: var(--lime-deep);
}
.toast--good .mark {
  color: var(--lime-deep);
}
.toast--bad {
  border-color: var(--red);
  background: var(--red-tint);
}
.toast--bad .mark {
  color: var(--red);
}

.empty {
  border: 2px dashed var(--ink-30);
  padding: 2rem 1.4rem;
  text-align: center;
}
.empty .cond {
  font-size: 1.3rem;
  display: block;
  margin-bottom: 0.3rem;
}
.empty p {
  font-size: 0.84rem;
  color: var(--ink-60);
  margin: 0 0 1rem;
}

/* Contract bar — "this is exactly what will print" */
.contract {
  background: var(--ink);
  color: var(--chalk);
  padding: 0.6rem 1rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.contract b {
  color: var(--lime);
  font-weight: 700;
}

/* Trust rule — lime-deep left bar, where doubt occurs */
.promise {
  border-left: 4px solid var(--lime-deep);
  padding: 0.4rem 0 0.4rem 0.7rem;
  font-size: 0.78rem;
  color: var(--ink-60);
  margin: 0;
}
.promise b {
  color: var(--ink);
}

/* ================= NAV ================= */
.tabbar {
  border: 2px solid var(--ink);
  background: var(--white);
  display: flex;
}
.tabbar a {
  flex: 1;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--disp);
  font-variation-settings:
    "wdth" 80,
    "wght" 700;
  font-weight: 700;
  font-stretch: 80%;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.9em 0.4em;
  border-right: 2px solid var(--ink);
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tabbar a:last-child {
  border-right: none;
}
.tabbar a[aria-current] {
  background: var(--ink);
  color: var(--lime);
}
.tabbar a:focus-visible {
  outline-offset: -3px;
}

/* ================= DEV STATE SWITCHER (skeleton only) ================= */
.dev-panel {
  position: fixed;
  right: 0.6rem;
  bottom: 0.6rem;
  z-index: 90;
  font-family: var(--mono);
}
.dev-panel summary {
  list-style: none;
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--lime);
  font-size: 0.7rem;
  font-weight: 700;
  border: 2px solid var(--lime);
  opacity: 0.5;
}
.dev-panel[open] summary {
  opacity: 1;
}
.dev-panel summary::-webkit-details-marker {
  display: none;
}
.dev-panel .dp-body {
  position: absolute;
  right: 0;
  bottom: 52px;
  width: 230px;
  max-height: 60vh;
  overflow: auto;
  background: var(--ink);
  color: var(--chalk);
  border: 2px solid var(--lime);
  padding: 0.6rem;
  font-size: 0.62rem;
}
.dev-panel .dp-body h3 {
  margin: 0.2rem 0 0.4rem;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lime);
}
.dev-panel .dp-body a {
  display: block;
  color: var(--chalk);
  text-decoration: none;
  padding: 0.32em 0.4em;
  border-bottom: 1px solid #4a4a46;
}
.dev-panel .dp-body a:hover {
  background: #3a3a37;
}
.dev-panel .dp-body a[aria-current] {
  color: var(--lime);
  font-weight: 700;
}

/* ================= MOTION DISCIPLINE ================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  /* Loading buttons fall back to a static mark, no spinner */
  .btn--loading::after {
    content: "···";
    border: none;
    width: auto;
    height: auto;
    position: static;
    color: var(--lime);
    font-family: var(--mono);
    font-weight: 700;
  }
  .btn--lime.btn--loading::after {
    color: var(--ink);
  }
  .btn--loading {
    color: transparent;
    display: inline-flex;
  }
}

/* ==================================================================
   DESKTOP APP SHELL
   Mobile is the source of truth; everything below only adds width.
   .col-main / .col-side are display:contents on mobile, so the phone
   layout is byte-identical — they only become columns at 900px.
   ================================================================== */
.col-main,
.col-side {
  display: contents;
}

/* App-bar nav — desktop only; the tabbar owns navigation on mobile. */
.appnav {
  display: none;
}

/* Tablet: the frame widens before it dissolves at 900px. */
@media (min-width: 600px) and (max-width: 899px) {
  .shell {
    max-width: 600px;
  }
}

@media (min-width: 900px) {
  /* The frame dissolves: the app owns the viewport like the site does. */
  .shell {
    max-width: none;
    border-left: none;
    border-right: none;
  }

  .appbar {
    padding: 0.85rem clamp(1.5rem, 4vw, 3rem);
  }
  .appbar img {
    width: 112px;
  }
  .appbar .who {
    font-size: 0.68rem;
  }

  .appnav {
    display: flex;
    gap: 1.6rem;
    margin-left: auto;
    margin-right: 1.8rem;
  }
  .appnav a {
    font-variation-settings:
      "wdth" 80,
      "wght" 700;
    font-weight: 700;
    font-stretch: 80%;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    padding: 0.6em 0;
    border-bottom: 3px solid transparent;
  }
  .appnav a[aria-current] {
    border-bottom-color: var(--lime);
  }
  .appbar--ink .appnav a {
    color: var(--chalk);
  }
  .appbar--ink .appnav a[aria-current] {
    border-bottom-color: var(--lime);
  }

  /* Content rides a real page grid instead of a phone column. */
  main.flow {
    width: 100%;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(1.5rem, 4vw, 3rem);
    padding-right: clamp(1.5rem, 4vw, 3rem);
  }

  /* Screens that read as one column (ticket, forms) stay centred and calm. */
  main.flow--narrow > * {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }
  /* the action follows the content up here — nothing pins to the fold */
  main.flow--narrow .cta-dock {
    margin-top: 1.8rem;
    position: static;
    padding-bottom: 2.5rem;
  }

  /* Two-column screens: work on the left, decision on the right. */
  main.flow--split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
    padding-bottom: 2.5rem;
  }
  main.flow--split > .col-main,
  main.flow--split > .col-side {
    display: block;
    min-width: 0;
  }
  main.flow--split > .col-side {
    position: sticky;
    top: 1.5rem;
  }
  /* the dock stops being a bottom bar and becomes the side panel's foot */
  main.flow--split .cta-dock {
    position: static;
    margin-top: 1rem;
    border: 2px solid var(--ink);
    border-top: 2px solid var(--ink);
    padding: 1.1rem;
    box-shadow: 6px 6px 0 var(--ink);
  }
  main.flow--split .cta-dock--bare {
    border: none;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  /* Print-shop depth: hard offset shadows on the things you can "pick up".
     Desktop-only — mobile stays flat and light. */
  .docket,
  .order-card,
  .status-strip,
  .toast {
    box-shadow: 5px 5px 0 var(--ink);
  }
  .order-card {
    transition:
      transform var(--t1) var(--ease),
      box-shadow var(--t1) var(--ease);
  }
  .order-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--ink);
  }
}