/* 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(.2,.7,.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 .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:.72rem;padding:.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:.94}
.semicond{font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-stretch:75%;text-transform:uppercase;letter-spacing:.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:.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:.02em}
.t-body{font-size:1rem}
.t-small{font-size:.85rem;color:var(--ink-60)}
.t-fact{font-family:var(--mono);font-size:.85rem}
.t-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.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:.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:.7rem 1rem;background:var(--white);border-bottom:2px solid var(--ink)}
.appbar img{width:96px}
.appbar .who{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-decoration:none;
  padding:.9em .2em} /* touch target */
.appbar--lime{background:var(--lime);border-bottom-color:rgba(41,41,39,.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:.7rem;margin-bottom:.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:.04em;font-size:1rem;
  padding:.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:.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:.78rem;padding:.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 .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:.45rem;width:100%}
.field label{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase}
.field .hint{font-size:.78rem;color:var(--ink-60)}
.input{font-family:var(--disp);font-size:1rem;padding:.8em .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:.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:.68rem;color:var(--ink);font-weight:700}
.field--error .err::before{content:"! ";color:var(--red)}
.otp{display:flex;gap:.5rem}
.otp .input{width:3em;text-align:center;font-family:var(--mono);font-size:1.3rem;font-weight:700;padding:.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:.7rem;cursor:pointer;font-size:.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:.78rem;letter-spacing:.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:.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:.3rem}
.dropzone .sub{font-size:.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:.66rem;letter-spacing:.06em;border:2px solid var(--ink);background:var(--white);padding:.35em .7em;text-transform:uppercase;display:inline-flex;align-items:center;gap:.45em}
.chip i{width:.6em;height:.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:.55rem;border-width:1.5px;padding:.25em .5em}

.badge{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.3em .7em;display:inline-block}
.badge--paid{background:var(--lime);color:var(--ink)}
.badge--printing{background:var(--ink);color:var(--lime)}
.badge--qc{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.badge--ready{background:var(--lime-deep);color:var(--ink)}
/* D3: refund badge text in ink (red-on-red-tint was 3.73:1); red keeps the border */
.badge--refund{background:var(--red-tint);color:var(--ink);box-shadow:inset 0 0 0 2px var(--red)}
.badge--muted{background:var(--ink-12);color:var(--ink-60)}

/* ================= 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:.8rem 1rem;border-bottom:2px solid var(--ink-12);font-family:var(--mono);font-size:.7rem}
.order-card .oc-body{padding:.9rem 1rem}
.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 .3rem;overflow-wrap:anywhere}
.order-card .oc-meta{font-family:var(--mono);font-size:.7rem;color:var(--ink-60);line-height:1.8;margin:0}

.docket{border:2px solid var(--ink);background:var(--white);font-family:var(--mono);font-size:.76rem}
.docket .row{display:flex;justify-content:space-between;gap:1rem;padding:.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:.9rem;padding:.7rem 1rem}
.docket .fine{padding:.5rem 1rem .8rem;font-size:.62rem;color:var(--ink-60);line-height:1.7;font-family:var(--disp)}
.docket--stale{opacity:.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:.7rem .9rem .5rem;display:block}
.pkg .p-name{font-variation-settings:"wdth" 75,"wght" 700;font-weight:700;font-stretch:75%;text-transform:uppercase;font-size:.9rem;display:block}
.pkg .p-desc{font-size:.76rem;color:var(--ink-60);display:block;margin-top:.15rem}
.pkg .p-price{font-family:var(--mono);font-weight:700;font-size:.8rem;border-top:1.5px solid var(--ink-12);padding:.5rem .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,.25)}

/* ================= STATUS & TICKET ================= */
.status-strip{border:2px solid var(--ink);background:var(--white);font-family:var(--mono);font-size:.74rem}
.status-strip .row{display:flex;justify-content:space-between;gap:1rem;padding:.7rem .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:.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 .4em}
.st--now{background:var(--lime);padding: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,.25))}
.ticket .t-top{background:var(--lime);padding:1.1rem 1.2rem .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 .4rem;text-align:center}
.ticket .lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.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:.1em 0;font-family:var(--mono);letter-spacing:.04em}
.ticket .sub{font-family:var(--mono);font-size:.66rem;line-height:1.8;color:var(--ink-60)}
.ticket .tear{border-top:2px dashed var(--ink-30);margin:1rem .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:.6rem;letter-spacing:.08em;text-transform:uppercase;padding:.8rem 1.2rem 1rem;color:var(--ink-60)}

/* ================= FEEDBACK ================= */
.toast{border:2px solid var(--ink);background:var(--white);padding:.8rem 1rem;display:flex;gap:.8rem;align-items:flex-start}
.toast .mark{font-family:var(--mono);font-weight:700;flex:none}
.toast p{margin:0;font-size:.86rem}
.toast small{display:block;font-family:var(--mono);font-size:.64rem;color:var(--ink-60);margin-top:.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:.3rem}
.empty p{font-size:.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:.6rem 1rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.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:.4rem 0 .4rem .7rem;font-size:.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:.72rem;letter-spacing:.04em;padding:.9em .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:.6rem;bottom:.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:.7rem;font-weight:700;border:2px solid var(--lime);opacity:.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:.6rem;font-size:.62rem}
.dev-panel .dp-body h3{margin:.2rem 0 .4rem;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
.dev-panel .dp-body a{display:block;color:var(--chalk);text-decoration:none;padding:.32em .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:.85rem clamp(1.5rem,4vw,3rem)}
  .appbar img{width:112px}
  .appbar .who{font-size:.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:.78rem;letter-spacing:.04em;text-decoration:none;
    padding:.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)}
}