/* Valani booth order pad.
   Original dark tokens retained for print; light screen tokens are defined below:
   ground #0B0F10, panel #141A1C, teal #12A79E, violet #7B7DFF, amber #C98219.
   Neutrals are lifted from the already-shipped portal stylesheet.

   Colour carries meaning and only that meaning:
     teal   = committed, already counted, tier reached
     violet = reachable, the break you have not hit yet
     amber  = a human has to look at this, but nothing is blocked
*/

/* ------------------------------------------------------------------ tokens */
:root{
  --ground:#0B0F10;
  --panel:#141A1C;
  --panel-2:#1B2224;
  --panel-3:#222B2D;
  --line:rgba(237,231,218,.12);
  --line-2:rgba(237,231,218,.24);

  --ink:#EDE7DA;
  --body:#B9C0BB;
  --muted:#7E8A86;

  --have:#12A79E;
  --next:#7B7DFF;
  --look:#C98219;

  --have-dim:rgba(18,167,158,.16);
  --next-dim:rgba(123,125,255,.16);
  --look-dim:rgba(201,130,25,.16);

  --display:"Avenir Next Condensed","Archivo Narrow","Roboto Condensed",
            "Oswald","Arial Narrow",system-ui,sans-serif;
  --ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --data:ui-monospace,"SF Mono",Menlo,"Cascadia Mono",monospace;

  --tap:56px;
  --r:14px;
  --r-sm:9px;

  --top:60px;
  --pricerail:118px;
  --pad:clamp(14px,2.4vw,28px);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html,body{height:100%}
body{
  background:var(--ground);
  color:var(--body);
  font-family:var(--ui);
  font-size:16px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
  touch-action:manipulation;
}

button,input,select,textarea{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--look);outline-offset:2px;border-radius:4px}

/* ------------------------------------------------------------------- boot */
.boot{
  position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:22px;
  background:var(--ground);z-index:90;
}
.boot--gone{display:none}
.boot__mark{opacity:.9}
.boot__mark img{display:block;width:140px;height:auto}
.billing-same{display:flex;align-items:center;gap:10px;min-height:48px;margin-top:12px;cursor:pointer;font-size:.95rem}
.billing-same input{width:20px;height:20px;flex:none;accent-color:var(--have)}
.boot__msg{
  font-family:var(--data);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.boot__msg--bad{color:var(--look);max-width:34rem;text-align:center;letter-spacing:.06em;text-transform:none;font-size:.85rem;line-height:1.6}

/* ------------------------------------------------------------------ shell */
.app{
  height:100dvh;
  display:grid;
  grid-template-rows:var(--top) minmax(0,1fr) auto;
  background:var(--ground);
}

.rail{display:flex;align-items:center;gap:var(--pad)}

.rail--top{
  padding:0 var(--pad);
  border-bottom:1px solid var(--line);
  background:rgba(11,15,16,.86);
  backdrop-filter:blur(12px);
  padding-top:env(safe-area-inset-top);
  height:calc(var(--top) + env(safe-area-inset-top));
}
.rail__mark{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.rail__mark img{display:block;height:22px;width:auto}
.rail__pad{
  font-family:var(--data);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);border-left:1px solid var(--line);padding-left:12px;
}
.rail__status{margin-left:auto;display:flex;align-items:center;gap:10px;flex:0 0 auto}
.rail__actions,.rail__facts{display:flex;align-items:center;gap:10px}
.rail__actions button.pill{min-width:44px;min-height:44px;font-size:.75rem}

.pill{
  font-family:var(--data);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  padding:7px 11px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap;
}
.pill--ghost{color:var(--ink);border-color:var(--line-2)}
.pill--ghost:active{background:var(--panel-2)}
.pill--net[data-state="on"]{color:var(--have);border-color:rgba(18,167,158,.4);background:var(--have-dim)}
.pill--net[data-state="off"]{color:var(--look);border-color:rgba(201,130,25,.45);background:var(--look-dim)}

/* ------------------------------------------------------------------ trail
   Seven numbered steps. The numbering is real: the line gates the MOQ and the
   tier ladder, so the order of these steps changes the price. */
.trail{display:flex;align-items:stretch;gap:2px;overflow:hidden;flex:1 1 auto;min-width:0}
.trail__step{
  display:flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;
  min-width:0;color:var(--muted);transition:color .18s ease,background .18s ease;
}
.trail__step[disabled]{opacity:.4}
.trail__n{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--data);font-size:.62rem;background:var(--panel-2);color:var(--muted);
}
.trail__label{
  font-family:var(--data);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.trail__step--done{color:var(--body)}
.trail__step--done .trail__n{background:var(--have-dim);color:var(--have)}
.trail__step--here{background:var(--panel);color:var(--ink)}
.trail__step--here .trail__n{background:var(--have);color:#08110F;font-weight:700}
@media (max-width:900px){
  .trail__step .trail__label{display:none}
  .trail__step--here .trail__label{display:block}
}

/* ------------------------------------------------------------------ stage */
.stage{
  overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:var(--pad) var(--pad) 26px;
  scroll-behavior:smooth;
}
.screen{max-width:1180px;margin:0 auto;animation:rise .26s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

.head{margin-bottom:20px}
.head__eyebrow{
  font-family:var(--data);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--have);
  display:block;margin-bottom:8px;
}
.head__title{
  font-family:var(--display);font-weight:600;font-size:clamp(1.9rem,4.4vw,2.9rem);
  line-height:1;letter-spacing:.012em;text-transform:uppercase;color:var(--ink);
}
.head__sub{margin-top:9px;color:var(--body);max-width:56ch;font-size:.96rem}
.head__sub b{color:var(--ink);font-weight:600}

/* ------------------------------------------------------------------ cards */
.grid{display:grid;gap:12px}
.grid--accounts{grid-template-columns:repeat(auto-fill,minmax(272px,1fr))}
.grid--lines{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--colours{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.grid--two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

.card{
  display:block;width:100%;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;transition:border-color .16s ease,background .16s ease,transform .12s ease;
}
.card:active{transform:scale(.986)}
.card:hover{border-color:var(--line-2)}
.card--on{border-color:var(--have);background:linear-gradient(180deg,var(--have-dim),transparent 62%)}
.card__name{font-family:var(--display);font-size:1.24rem;letter-spacing:.014em;text-transform:uppercase;color:var(--ink);line-height:1.06}
.card__meta{margin-top:10px;display:flex;flex-wrap:wrap;gap:5px 14px;font-family:var(--data);font-size:.66rem;color:var(--muted)}
.card__meta b{color:var(--body);font-weight:400}
.card__foot{
  margin-top:12px;padding-top:11px;border-top:1px solid var(--line);
  font-family:var(--data);font-size:.66rem;color:var(--muted);display:flex;justify-content:space-between;gap:10px;
}
.card__foot b{color:var(--body);font-weight:400}

/* line cards carry the tier ladder preview, which is the whole point of the step */
.linecard__bands{display:flex;gap:3px;margin-top:13px}
.linecard__band{
  flex:1;text-align:center;padding:7px 2px;border-radius:6px;background:var(--panel-2);
  font-family:var(--data);font-size:.58rem;color:var(--muted);line-height:1.5;
}
.linecard__band b{display:block;color:var(--body);font-weight:400;font-size:.62rem}

/* ------------------------------------------------------------------ filters */
.filters{
  display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap;
  position:sticky;top:calc(var(--pad) * -1);z-index:4;
  background:linear-gradient(180deg,var(--ground) 74%,transparent);
  padding:var(--pad) 0 12px;margin-top:calc(var(--pad) * -1);
}
.search{
  flex:1 1 280px;display:flex;align-items:center;gap:10px;min-height:var(--tap);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:0 15px;
}
.search:focus-within{border-color:var(--have)}
.search__in{flex:1;min-width:0;height:var(--tap);color:var(--ink);font-size:1rem}
.search__in::placeholder{color:var(--muted)}
.search__clear{
  font-family:var(--data);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding:8px;
}
.chips{display:flex;gap:7px;overflow-x:auto;padding-bottom:3px;scrollbar-width:none;max-width:100%}
.chips::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;padding:11px 15px;border-radius:999px;border:1px solid var(--line);background:var(--panel);
  font-family:var(--data);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;
}
.chip--on{background:var(--ink);color:var(--ground);border-color:var(--ink);font-weight:600}
.chip__n{opacity:.55;margin-left:6px}

/* ------------------------------------------------------------------ styles list */
.styles{display:grid;gap:8px}
.style{
  display:grid;grid-template-columns:82px minmax(0,1fr) auto;align-items:center;gap:16px;
  width:100%;text-align:left;min-height:var(--tap);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px 16px;
  transition:border-color .16s ease,transform .12s ease;
}
.style:active{transform:scale(.994)}
.style:hover{border-color:var(--line-2)}
.style--on{border-color:var(--have);background:linear-gradient(90deg,var(--have-dim),transparent 44%)}
.style__no{
  font-family:var(--data);font-size:1rem;color:var(--ink);letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
}
.style__body{min-width:0}
.style__desc{color:var(--ink);font-size:1rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.style__spec{margin-top:4px;font-family:var(--data);font-size:.63rem;color:var(--muted);display:flex;gap:12px;flex-wrap:wrap}
.style__right{text-align:right;flex:0 0 auto}
.style__price{
  font-family:var(--display);font-size:1.44rem;color:var(--ink);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;line-height:1;
}
.style__price--none{font-size:.72rem;font-family:var(--data);color:var(--look);letter-spacing:.1em;text-transform:uppercase}
.style__from{font-family:var(--data);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* ------------------------------------------------------------------ colour tiles
   There is no hex value anywhere in the source data, so this does not paint a
   swatch it cannot stand behind. The client's own four-letter code is the tile. */
.colour{
  position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 13px 13px;text-align:left;min-height:112px;display:flex;flex-direction:column;gap:9px;
  transition:border-color .16s ease,background .16s ease,transform .12s ease;
}
.colour:active{transform:scale(.978)}
.colour--on{border-color:var(--have);background:linear-gradient(180deg,var(--have-dim),transparent 70%)}
.colour__code{
  font-family:var(--data);font-size:1.16rem;letter-spacing:.15em;color:var(--ink);
}
.colour--on .colour__code{color:var(--have)}
.colour__name{font-size:.82rem;color:var(--body);line-height:1.28;margin-top:auto}
.colour__parts{display:flex;gap:3px;margin-top:2px}
.colour__part{
  height:3px;flex:1;border-radius:2px;background:var(--panel-3);
}
.colour--on .colour__part{background:rgba(18,167,158,.5)}
.colour__tick{
  position:absolute;top:11px;right:11px;width:20px;height:20px;border-radius:50%;
  border:1px solid var(--line-2);
}
.colour--on .colour__tick{background:var(--have);border-color:var(--have)}
.colour--on .colour__tick::after{
  content:"";position:absolute;left:6px;top:3px;width:5px;height:10px;
  border:solid #08110F;border-width:0 2px 2px 0;transform:rotate(42deg);
}

/* ------------------------------------------------------------------ notice */
.notice{
  border:1px solid var(--line);border-left:3px solid var(--look);border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--panel);padding:14px 16px;margin:14px 0;
}
.notice--flat{border-left-color:var(--muted)}
.notice--have{border-left-color:var(--have)}
.notice__t{
  font-family:var(--data);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--look);
  display:block;margin-bottom:6px;
}
.notice--flat .notice__t{color:var(--muted)}
.notice--have .notice__t{color:var(--have)}
.notice__b{font-size:.9rem;color:var(--body);line-height:1.55}
.notice__b b{color:var(--ink);font-weight:600}

/* ------------------------------------------------------------------ size grid */
.gridwrap{
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden;margin-bottom:14px;
}
.gridscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sizetable{border-collapse:separate;border-spacing:0;width:100%;min-width:max-content}
.sizetable th,.sizetable td{border-bottom:1px solid var(--line);padding:0}
.sizetable tr:last-child th,.sizetable tr:last-child td{border-bottom:none}

.sz__corner{
  position:sticky;left:0;z-index:3;background:var(--panel-2);
  min-width:172px;max-width:172px;padding:11px 14px !important;text-align:left;
  font-family:var(--data);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  border-right:1px solid var(--line);
}
.sz__h{
  background:var(--panel-2);padding:11px 6px !important;min-width:70px;
  font-family:var(--display);font-size:.98rem;letter-spacing:.06em;color:var(--body);text-transform:uppercase;
}
.sz__h--up{color:var(--look)}
.sz__h--dead{color:var(--muted);opacity:.6}
.sz__hup{display:block;font-family:var(--data);font-size:.54rem;letter-spacing:.08em;color:var(--look);margin-top:2px;text-transform:none}
.sz__h--total{min-width:96px;color:var(--ink)}
.sz__h--tier{min-width:132px;color:var(--ink)}

.sz__row{
  position:sticky;left:0;z-index:2;background:var(--panel);
  min-width:172px;max-width:172px;padding:9px 14px !important;text-align:left;
  border-right:1px solid var(--line);
}
.sz__code{font-family:var(--data);font-size:.86rem;letter-spacing:.12em;color:var(--ink)}
.sz__cname{font-size:.7rem;color:var(--muted);line-height:1.25;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:146px}

.cell{
  width:100%;height:54px;display:grid;place-items:center;
  font-family:var(--data);font-size:1.06rem;font-variant-numeric:tabular-nums;
  color:var(--ink);background:transparent;border-right:1px solid var(--line);
  transition:background .13s ease;
}
.cell--zero{color:#3E4A4C}
.cell--dead{color:#2B3436;background:repeating-linear-gradient(135deg,transparent,transparent 5px,rgba(237,231,218,.03) 5px,rgba(237,231,218,.03) 10px)}
.cell--on{background:var(--have-dim);box-shadow:inset 0 0 0 2px var(--have);border-radius:3px}
.cell--up{color:var(--look)}

.sz__tot{
  padding:0 12px !important;text-align:right;font-family:var(--display);font-size:1.34rem;
  color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.02em;
  border-right:1px solid var(--line);
}
.sz__tot--zero{color:var(--muted)}
.sz__tier{padding:8px 12px !important;text-align:left;min-width:132px}

.tierbadge{
  display:inline-flex;flex-direction:column;gap:2px;
  font-family:var(--data);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
}
.tierbadge__t{color:var(--have)}
.tierbadge__t--under{color:var(--look)}
.tierbadge__p{color:var(--ink);font-size:.86rem;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.tierbadge__n{color:var(--next);text-transform:none;letter-spacing:.01em;font-size:.62rem}
.tierbadge--idle{color:var(--muted)}

.sz__footrow .sz__row{background:var(--panel-2)}
.sz__footlab{font-family:var(--data);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.sz__colsum{
  height:44px;display:grid;place-items:center;background:var(--panel-2);
  font-family:var(--data);font-size:.86rem;color:var(--body);font-variant-numeric:tabular-nums;
  border-right:1px solid var(--line);
}
.sz__colsum--zero{color:#3E4A4C}

/* keypad */
.pad{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.pad__box{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.pad__t{
  font-family:var(--data);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  display:block;margin-bottom:10px;
}
.pad__t b{color:var(--have);font-weight:400}
.pad__keys{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.pad__quick{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.key{
  min-height:var(--tap);border-radius:var(--r-sm);background:var(--panel-2);border:1px solid transparent;
  font-family:var(--data);font-size:1.16rem;color:var(--ink);font-variant-numeric:tabular-nums;
  transition:background .12s ease,transform .1s ease;
}
.key:active{transform:scale(.95);background:var(--panel-3)}
.key--quick{font-size:1rem;color:var(--have);background:var(--have-dim)}
.key--quick:active{background:rgba(18,167,158,.28)}
.key--warn{color:var(--look);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase}
.key--go{background:var(--panel-3);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase}

/* ------------------------------------------------------- quantity editor
   The host is created by app.js outside #stage, so a committed quantity can
   repaint the grid without taking the editor or its focus with it. */
.qtyeditor-host[hidden]{display:none !important}
.qtyeditor-host{
  position:fixed;left:0;right:0;z-index:90;pointer-events:none;
  font-family:var(--ui);color:var(--ink)
}
.qtyeditor__veil{
  position:absolute;inset:0;background:rgba(23,45,50,.22);
  backdrop-filter:blur(2px);pointer-events:auto
}
.qtyeditor__panel{
  position:absolute;pointer-events:auto;background:var(--panel);border:1px solid var(--line-2);
  box-shadow:0 20px 60px rgba(23,45,50,.24);display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto auto;overflow:hidden
}
.qtyeditor__panel:focus{outline:none}
.qtyeditor__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:16px 18px 12px;border-bottom:1px solid var(--line);background:var(--panel)
}
.qtyeditor__eyebrow{
  display:block;font-size:.72rem;font-weight:650;letter-spacing:.04em;color:var(--muted);margin-bottom:3px
}
.qtyeditor__head h2{font-family:var(--display);font-size:1.42rem;line-height:1.1;color:var(--ink)}
.qtyeditor__head h2 span{color:var(--have)}
.qtyeditor__head p{font-size:.76rem;color:var(--muted);margin-top:5px}
.qtyeditor__head .qtyeditor__progress{color:var(--have);font-weight:700;margin-top:3px}
.qtyeditor__cancel{
  min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel-2);color:var(--body);font:650 .8rem var(--ui)
}
.qtyeditor__body{min-height:0;overflow:auto;padding:14px 18px;display:grid;gap:14px}
.qtyeditor__entry{min-width:0}
.qtyeditor__value{
  display:grid;place-items:center;min-height:62px;margin-bottom:10px;border:1px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--ground);font:600 2.2rem/1 var(--data);
  color:var(--ink);font-variant-numeric:tabular-nums
}
.qtyeditor__keys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.qtyeditor__key{
  min-height:56px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2);
  color:var(--ink);font:600 1.3rem var(--data);font-variant-numeric:tabular-nums
}
.qtyeditor__key:active,.qtyeditor__quick button:active,.qtyeditor__nav button:active,
.qtyeditor__done:active,.qtyeditor__cancel:active{transform:scale(.97)}
.qtyeditor__key--word{font:650 .76rem var(--ui);color:var(--look)}
.qtyeditor__key--back{font-family:var(--ui);font-size:1.25rem;color:var(--body)}
.qtyeditor__aside{display:grid;align-content:start;gap:12px;min-width:0}
.qtyeditor__quick>span{
  display:block;font-size:.72rem;font-weight:650;color:var(--muted);margin-bottom:7px
}
.qtyeditor__quick>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.qtyeditor__quick button{
  min-height:44px;border:1px solid var(--have);border-radius:var(--r-sm);
  background:var(--have-dim);color:var(--have);font:650 .9rem var(--data)
}
.qtyeditor__totals{
  display:grid;gap:7px;padding:12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--ground)
}
.qtyeditor__totals p{display:flex;justify-content:space-between;gap:14px;font-size:.76rem;color:var(--muted)}
.qtyeditor__totals b{color:var(--ink);font-weight:650;text-align:right;font-variant-numeric:tabular-nums}
.qtyeditor__totals .qtyeditor__price-note{
  display:block;margin-top:2px;padding-top:8px;border-top:1px solid var(--line);
  color:var(--next);font-weight:650
}
.qtyeditor__status{min-height:18px;padding:0 18px;font-size:.72rem;color:var(--look)}
.qtyeditor__nav{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 18px}
.qtyeditor__nav button{
  min-height:44px;border:1px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--panel-2);color:var(--body);font:650 .8rem var(--ui)
}
.qtyeditor__nav button[disabled]{opacity:.48}
.qtyeditor__done{
  min-height:56px;margin:0 18px calc(14px + env(safe-area-inset-bottom));border:0;
  border-radius:var(--r-sm);background:var(--have);color:#fff;font:700 1rem var(--ui)
}
.qtyeditor-host--sheet .qtyeditor__panel{
  left:50%;right:auto;bottom:0;transform:translateX(-50%);width:min(620px,100%);
  max-height:min(680px,100%);border-radius:var(--r) var(--r) 0 0;border-bottom:0
}
.qtyeditor-host--popover .qtyeditor__panel{
  width:min(660px,calc(100vw - 24px));max-height:calc(100% - 24px);border-radius:var(--r)
}
.qtyeditor-host--popover .qtyeditor__body{grid-template-columns:minmax(230px,1fr) minmax(210px,.9fr)}
body.qty-editor-open{overscroll-behavior:none}

@media screen and (max-width:620px){
  .qtyeditor__head{padding:13px 14px 10px}
  .qtyeditor__body{padding:11px 14px}
  .qtyeditor__status{padding:0 14px}
  .qtyeditor__nav{padding:7px 14px}
  .qtyeditor__done{margin-left:14px;margin-right:14px}
  /* The total is the decision the rep needs while typing. Quick additions
     remain one short internal scroll below it on a narrow phone. */
  .qtyeditor__totals{order:-1}
}

@media screen and (min-width:621px) and (max-width:799px){
  .qtyeditor-host--sheet .qtyeditor__body{grid-template-columns:minmax(230px,1fr) minmax(210px,.9fr)}
}

@media screen and (max-height:620px) and (min-width:560px){
  .qtyeditor-host--sheet .qtyeditor__panel{
    width:min(844px,100%);height:100%;max-height:100%;border-radius:0;
    grid-template-columns:minmax(360px,1.25fr) minmax(250px,.8fr);
    grid-template-rows:auto minmax(0,1fr) auto auto auto
  }
  .qtyeditor__head{grid-column:1/-1;grid-row:1;padding:6px 12px}
  .qtyeditor__head h2{font-size:1.16rem}
  .qtyeditor__head p{margin-top:3px}
  .qtyeditor-host--sheet .qtyeditor__body{display:contents}
  .qtyeditor__entry{
    grid-column:1;grid-row:2/6;align-self:start;min-height:0;overflow:hidden;
    padding:5px 0 5px 12px
  }
  .qtyeditor__value{min-height:40px;font-size:1.65rem;margin-bottom:4px}
  .qtyeditor__keys{gap:4px}
  .qtyeditor__key{min-height:44px}
  .qtyeditor__aside{
    grid-column:2;grid-row:2;min-height:0;overflow:auto;padding:7px 12px 3px 10px;gap:8px
  }
  .qtyeditor__quick>span{margin-bottom:4px}
  .qtyeditor__quick>div{gap:4px}
  .qtyeditor__totals{padding:8px;gap:4px}
  .qtyeditor__status{grid-column:2;grid-row:3;padding:0 12px 0 10px;min-height:14px}
  .qtyeditor__nav{grid-column:2;grid-row:4;padding:4px 12px 4px 10px;gap:5px}
  .qtyeditor__done{
    grid-column:2;grid-row:5;min-height:44px;margin:0 12px calc(5px + env(safe-area-inset-bottom)) 10px
  }
}

@media (prefers-reduced-motion:reduce){
  .qtyeditor__key,.qtyeditor__quick button,.qtyeditor__nav button,.qtyeditor__done,.qtyeditor__cancel{transition:none}
}

/* ------------------------------------------------------------------ options */
.opts{display:grid;gap:9px}
.opt{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;min-height:var(--tap);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px 16px;
}
.opt--on{border-color:var(--have);background:var(--have-dim)}
.opt__box{
  flex:0 0 auto;width:22px;height:22px;border-radius:6px;border:1px solid var(--line-2);position:relative;
}
.opt--round .opt__box{border-radius:50%}
.opt--on .opt__box{background:var(--have);border-color:var(--have)}
.opt--on .opt__box::after{
  content:"";position:absolute;left:7px;top:3px;width:5px;height:11px;
  border:solid #08110F;border-width:0 2px 2px 0;transform:rotate(42deg);
}
.opt__l{display:block;flex:1;min-width:0}
.opt__name{display:block;color:var(--ink);font-size:1rem;line-height:1.25}
.opt__note{display:block;font-family:var(--data);font-size:.63rem;color:var(--muted);margin-top:4px;line-height:1.35}
.opt__cost{
  font-family:var(--data);font-size:.82rem;color:var(--look);font-variant-numeric:tabular-nums;flex:0 0 auto;
}
.opt__cost--free{color:var(--muted)}

.stepper{display:flex;align-items:center;gap:11px}
.stepper__b{
  width:var(--tap);height:var(--tap);border-radius:var(--r-sm);background:var(--panel-2);
  font-size:1.5rem;color:var(--ink);display:grid;place-items:center;
}
.stepper__b:active{background:var(--panel-3)}
.stepper__b[disabled]{opacity:.3}
.stepper__v{
  min-width:66px;text-align:center;font-family:var(--display);font-size:1.7rem;color:var(--ink);
  font-variant-numeric:tabular-nums;
}

.field{display:block;min-width:0;margin-bottom:12px}
.field__l{
  font-family:var(--data);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  display:block;margin-bottom:7px;
}
.field__i{
  display:block;width:100%;min-width:0;max-width:100%;min-height:var(--tap);background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:0 15px;color:var(--ink);font-size:1rem;
}
.field__i[type="date"]{inline-size:100%;min-inline-size:0;max-inline-size:100%;font-size:16px}
.field__i:focus{border-color:var(--have);outline:none}
/* The art team box. A textarea because their own written instruction is a
   sentence ("copy designs from VA 1600S"), not a value. */
.field__i--tall{min-height:76px;line-height:1.5;resize:vertical;font-family:inherit}

/* ---- the art catalogue, 2026-09-04 ---------------------------------------
   324 designs across two brands. Built to work the same on Sally's Windows
   laptop, Asim's iPhone and an iPad at the booth, so the grid is fluid rather
   than a fixed column count, and every tile is a real touch target. */
.art__box{margin-top:12px;padding:12px;border-radius:var(--r-sm);background:var(--panel-2);border:1px solid var(--line)}
.art__chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.chip{
  font-family:var(--data);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 11px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--muted);min-height:34px;
}
.chip--on{border-color:var(--have);color:var(--have);background:var(--have-dim)}
.art__grid{
  display:grid;gap:10px;margin-top:4px;
  grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
}
.art{
  display:flex;flex-direction:column;gap:4px;padding:6px;text-align:left;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);
  min-height:44px;
}
.art--on,.art:active{border-color:var(--have);background:var(--have-dim)}
.art__i{
  width:100%;aspect-ratio:1/.93;object-fit:contain;border-radius:4px;
  background:#fff;display:block;
}
.art__i--none{
  display:flex;align-items:center;justify-content:center;background:var(--panel-2);
  font-family:var(--data);font-size:.55rem;color:var(--muted);text-transform:uppercase;
}
.art__n{font-family:var(--data);font-size:.66rem;color:var(--ink);letter-spacing:.04em}
.art__s{color:var(--warn);font-style:normal}
.art__t{
  font-size:.66rem;color:var(--muted);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.art__picked{
  display:flex;gap:12px;align-items:center;margin-top:10px;padding:10px;
  border-radius:var(--r-sm);border:1px solid var(--have);background:var(--have-dim);
}
.art__picked .art__i{width:64px;flex:0 0 64px}
.art__pb{flex:1 1 auto;min-width:0;font-size:.86rem;color:var(--ink)}
.art__pb .opt__note{display:block;margin-top:3px}
.opt__note--warn{color:var(--warn)}

@media print{
  .art__box,.art__chips,.art__grid{display:none !important}
}
/* A note under a field, for the ones where what to type is not obvious from
   the label: the ship date that the office sets, the ink colours the factory
   is never told. Same muted weight as a placement note, deliberately quieter
   than the label above it. */
.field__note{
  display:block;margin:-6px 0 12px;font-size:.78rem;color:var(--muted);line-height:1.5;
}

/* Yes / No / Not asked. Three states, because their paper form has a Y/N box
   and a rep who never asked leaves it empty, which is a third answer. Every
   button is a full tap target: this gets used standing up, on a tablet, while
   somebody is talking. */
.yn{display:flex;gap:8px;flex-wrap:wrap}
.yn__b{
  min-height:var(--tap);padding:0 16px;border-radius:var(--r-sm);background:var(--panel-2);
  border:1px solid var(--line);color:var(--body);font-size:.92rem;
}
.yn__b--on{background:var(--panel-3);border-color:var(--have);color:var(--ink)}
.yn__b--clear{color:var(--muted)}
.yn__b--clear.yn__b--on{color:var(--ink)}
.yn__b:active{background:var(--panel-3)}

/* ------------------------------------------------------------------ review */
.rev{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:12px}
.rev__h{
  display:flex;align-items:baseline;gap:14px;padding:14px 17px;border-bottom:1px solid var(--line);
  background:var(--panel-2);flex-wrap:wrap;
}
.rev__no{font-family:var(--data);font-size:.92rem;color:var(--ink);letter-spacing:.04em}
.rev__desc{color:var(--body);font-size:.9rem;flex:1;min-width:0}
.rev__amt{font-family:var(--display);font-size:1.3rem;color:var(--ink);font-variant-numeric:tabular-nums}
.rev__line{
  display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:12px;align-items:center;
  padding:11px 17px;border-bottom:1px solid var(--line);font-family:var(--data);font-size:.78rem;
}
.rev__line:last-child{border-bottom:none}
.rev__lc{color:var(--ink);letter-spacing:.06em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rev__lc small{color:var(--muted);letter-spacing:0;margin-left:8px;font-size:.9em}
.rev__lq,.rev__lp,.rev__le{text-align:right;font-variant-numeric:tabular-nums;color:var(--body)}
.rev__le{color:var(--ink);min-width:84px}
.rev__lp{min-width:64px}
.rev__lq{min-width:52px}

.calc{display:grid;gap:1px;background:var(--line);border-radius:var(--r-sm);overflow:hidden;margin-top:12px}
.calc__r{
  display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:12px;align-items:center;
  background:var(--panel);padding:10px 14px;font-family:var(--data);font-size:.74rem;
}
.calc__n{color:var(--muted);font-size:.62rem}
.calc__l{color:var(--body);min-width:0}
.calc__v{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
.calc__r--zero .calc__l,.calc__r--zero .calc__v{color:var(--muted)}
.calc__r--tot{background:var(--panel-2)}
.calc__r--tot .calc__l,.calc__r--tot .calc__v{color:var(--ink)}
.calc__r--flag .calc__v{color:var(--look)}

.sig{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;
}
.sigpad{
  width:100%;height:170px;background:var(--panel-2);border:1px dashed var(--line-2);border-radius:var(--r-sm);
  display:block;touch-action:none;cursor:crosshair;
}
.sig__row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:11px;flex-wrap:wrap}
.sig__hint{font-family:var(--data);font-size:.62rem;letter-spacing:.1em;color:var(--muted)}

.totals{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:12px}
.totals__r{display:flex;justify-content:space-between;gap:16px;padding:8px 0;font-family:var(--data);font-size:.82rem}
.totals__r b{color:var(--ink);font-weight:400;font-variant-numeric:tabular-nums}
.totals__r--big{border-top:1px solid var(--line);margin-top:7px;padding-top:14px}
.totals__r--big span{font-family:var(--display);font-size:1.16rem;letter-spacing:.05em;text-transform:uppercase;color:var(--body)}
.totals__r--big b{font-family:var(--display);font-size:2rem;color:var(--have);letter-spacing:.02em}

/* ------------------------------------------------------------------ price rail
   The signature. The five printed tier bands, made kinetic. Filled to where the
   focused line actually is, with the next break priced and counted. */
.rail--price{
  border-top:1px solid var(--line);background:var(--panel);
  padding:12px var(--pad);padding-bottom:calc(12px + env(safe-area-inset-bottom));
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--pad);align-items:center;
  min-height:var(--pricerail);
}

.ladder{min-width:0}
.ladder__top{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.ladder__for{
  font-family:var(--data);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:44ch;
}
.ladder__for b{color:var(--body);font-weight:400}
.ladder__gap{
  font-family:var(--display);font-size:1.16rem;letter-spacing:.02em;text-transform:uppercase;color:var(--next);
  margin-left:auto;text-align:right;
}
.ladder__gap b{font-variant-numeric:tabular-nums;font-weight:600}
.ladder__gap--top{color:var(--have)}
.ladder__gap--under{color:var(--look)}

.ladder__bands{display:flex;gap:3px;height:46px}
.band{
  flex:1;min-width:0;border-radius:6px;background:var(--panel-2);position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;padding:0 8px;
  transition:background .3s cubic-bezier(.2,.7,.3,1);
}
.band__fill{
  position:absolute;left:0;top:0;bottom:0;width:0;background:var(--have-dim);
  transition:width .42s cubic-bezier(.2,.7,.3,1);
}
.band__q{
  position:relative;font-family:var(--data);font-size:.55rem;letter-spacing:.1em;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.band__p{
  position:relative;font-family:var(--data);font-size:.82rem;color:var(--body);
  font-variant-numeric:tabular-nums;line-height:1.25;
}
.band--done{background:var(--have-dim)}
.band--done .band__q{color:rgba(18,167,158,.8)}
.band--done .band__p{color:var(--have)}
.band--here{background:var(--have);box-shadow:0 0 0 1px var(--have)}
.band--here .band__fill{display:none}
.band--here .band__q{color:rgba(8,17,15,.72)}
.band--here .band__p{color:#08110F;font-weight:700}
.band--next{background:var(--next-dim);box-shadow:inset 0 0 0 1px rgba(123,125,255,.45)}
.band--next .band__q{color:rgba(123,125,255,.85)}
.band--next .band__p{color:var(--next)}
.band--pulse{animation:pulse .5s ease}
@keyframes pulse{
  0%{transform:scaleY(1)}
  38%{transform:scaleY(1.14)}
  100%{transform:scaleY(1)}
}

.railend{display:flex;align-items:center;gap:var(--pad);flex:0 0 auto}
.money{text-align:right}
.money__l{font-family:var(--data);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:block}
.money__v{
  font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.5rem);letter-spacing:.015em;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1;display:block;margin-top:3px;
}
.money__s{font-family:var(--data);font-size:.6rem;color:var(--muted);display:block;margin-top:5px;letter-spacing:.05em}
.money__s b{color:var(--body);font-weight:400}

.go{
  min-height:var(--tap);padding:0 clamp(20px,3vw,34px);border-radius:var(--r);
  background:var(--have);color:#06100E;
  font-family:var(--display);font-size:1.16rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  display:flex;align-items:center;gap:10px;transition:transform .12s ease,opacity .16s ease;
}
.go:active{transform:scale(.97)}
.go[disabled]{opacity:.28}
.go--ghost{background:var(--panel-2);color:var(--body);font-weight:400}
.go--wide{width:100%;justify-content:center;margin-top:12px}

.back{
  font-family:var(--data);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding:14px 4px;display:inline-flex;align-items:center;gap:8px;
}
.back:active{color:var(--ink)}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

.empty{
  border:1px dashed var(--line-2);border-radius:var(--r);padding:34px 22px;text-align:center;
}
.empty__t{font-family:var(--display);font-size:1.3rem;text-transform:uppercase;color:var(--body);letter-spacing:.03em}
.empty__b{margin-top:8px;font-size:.9rem;color:var(--muted);max-width:44ch;margin-inline:auto}

.jsonbox{
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;
  font-family:var(--data);font-size:.66rem;color:var(--body);white-space:pre;overflow:auto;max-height:290px;
  line-height:1.6;
}

@media (max-width:760px){
  .rail--price{grid-template-columns:1fr;gap:11px;padding-top:10px}
  .railend{justify-content:space-between}
  .ladder__bands{height:42px}
  .band__q{font-size:.5rem}
  .style{grid-template-columns:64px minmax(0,1fr) auto;gap:11px}
}

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

/* ------------------------------------------------------------------ saving
   The order is written to this device on every meaningful change. The
   indicator says exactly that and nothing more: saved on this device, with the
   time. Never "synced", never "uploaded", because neither of those happened.
   Amber when it is not saving, because that is the one state a rep must not
   miss. */
.pill--save{font-variant-numeric:tabular-nums}
.pill--save[data-state="saved"]{color:var(--have);border-color:rgba(18,167,158,.4);background:var(--have-dim)}
.pill--save[data-state="saving"]{color:var(--next);border-color:rgba(123,125,255,.45);background:var(--next-dim)}
.pill--save[data-state="failed"]{color:var(--look);border-color:rgba(201,130,25,.45);background:var(--look-dim)}

/* The office indicator. A different fact from the save indicator beside it, so
   it is a different pill, and it is hidden until there is something true to
   say. wait is queued or going, have is the office answering that it holds a
   copy, bad is the office refusing one. */
.pill--office{font-variant-numeric:tabular-nums}
.pill--office[data-state="wait"]{color:var(--next);border-color:rgba(123,125,255,.45);background:var(--next-dim)}
.pill--office[data-state="have"]{color:var(--have);border-color:rgba(18,167,158,.4);background:var(--have-dim)}
.pill--office[data-state="bad"]{color:var(--look);border-color:rgba(201,130,25,.45);background:var(--look-dim)}

/* the orders this device is holding */
.saved{margin-top:22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.saved__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 14px;margin-bottom:10px}
.saved__where{font-family:var(--data);font-size:.6rem;letter-spacing:.06em;color:var(--muted)}
.saved__none{font-size:.86rem;color:var(--muted);padding:6px 0;line-height:1.55;max-width:62ch}
.saved__item{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin-bottom:9px}
.saved__item--here{border-color:var(--have);background:var(--have-dim)}
.saved__row{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  width:100%;text-align:left;padding:11px 10px;border-radius:var(--r-sm);
  border:0;
}

/* The delete, added 2026-09-04. Asim, live on the call, having typed a junk
   order: "how do I get rid of it?" Deliberately quiet until it is wanted:
   a small ghost control under the row, and only the confirm is loud. */
.saved__tools{display:flex;justify-content:flex-end;padding:0 10px 8px}
.saved__del{
  font-family:var(--data);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:6px 10px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:transparent;min-height:44px;
}
.saved__del:active{color:var(--warn);border-color:var(--warn)}
.saved__confirm{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  padding:10px;margin:0 0 8px;border-radius:var(--r-sm);
  border:1px solid var(--warn);background:var(--panel-2);
}
.saved__cq{flex:1 1 22ch;min-width:0;font-size:.82rem;color:var(--ink);line-height:1.5}
.saved__confirm .key{min-height:44px;padding:0 14px;font-size:.8rem}
.saved__row:active{background:var(--panel-2)}
.saved__row--here{background:var(--have-dim)}
.saved__no{font-family:var(--data);font-size:.72rem;color:var(--body);letter-spacing:.04em;white-space:nowrap}
.saved__b{min-width:0}
.saved__buyer{display:block;color:var(--ink);font-size:.96rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved__meta{display:block;font-family:var(--data);font-size:.6rem;color:var(--muted);margin-top:3px}
.saved__amt{
  font-family:var(--display);font-size:1.18rem;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.saved__tag{
  display:block;font-family:var(--data);font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-top:3px;
}
.saved__row--here .saved__tag{color:var(--have)}

/* ------------------------------------------------- confirmation document
   Produced on this device from the order in memory. The pricing audit under
   each colourway is the part the paper process at the booth cannot do. */
.doc__act{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.doc{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(18px,3vw,34px);color:var(--body);
}
.doc__head{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start;
  border-bottom:1px solid var(--line-2);padding-bottom:16px;
}
.doc__brand{display:flex;flex-direction:column;gap:10px}
.doc__logo--screen{display:block;height:26px;width:auto}
.doc__logo--print{display:none}
.doc__kind{
  font-family:var(--display);font-size:1.7rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink);line-height:1;
}
.doc__ref{text-align:right}
.doc__no{display:block;font-family:var(--data);font-size:1.02rem;color:var(--have);letter-spacing:.06em}
.doc__rmeta{display:block;font-family:var(--data);font-size:.64rem;color:var(--muted);margin-top:4px}
.doc__origin{margin-top:14px;font-size:.83rem;color:var(--muted);line-height:1.6;max-width:84ch}
.doc__origin b{color:var(--look);font-weight:600}
.doc__parties{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin-top:16px;
  padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.doc__plabel{
  display:block;font-family:var(--data);font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}
.doc__pline{display:block;color:var(--ink);font-size:.9rem;line-height:1.5}
.doc__pline--none{color:var(--muted)}
.doc__blk{margin-top:20px;break-inside:avoid;page-break-inside:avoid}
.doc__blkh{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.doc__style{font-family:var(--data);font-size:.92rem;color:var(--ink);letter-spacing:.04em}
.doc__sdesc{flex:1;min-width:0;color:var(--ink);font-size:.94rem}
.doc__sdesc small{display:block;color:var(--muted);font-size:.78rem;margin-top:2px}
.doc__samt{font-family:var(--display);font-size:1.22rem;color:var(--ink);font-variant-numeric:tabular-nums}
.doc__t{width:100%;border-collapse:collapse;margin-top:10px;font-size:.85rem}
.doc__t th{
  font-family:var(--data);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:7px 8px;border-bottom:1px solid var(--line-2);font-weight:400;
}
.doc__t td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--body)}
.doc__c1{color:var(--ink);letter-spacing:.05em}
.doc__c2{font-family:var(--data)}
.doc__c3{font-family:var(--data);font-size:.77rem}
.doc__c3 small{display:block;color:var(--muted);font-size:.92em;margin-top:2px}
.doc__t th.doc__cn,.doc__t td.doc__cn{
  text-align:right;font-family:var(--data);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.doc__ext{color:var(--ink)}
.doc__audit td{padding-top:0}
.doc__aline{display:block;font-size:.73rem;color:var(--muted);line-height:1.6}
.doc__aline b{color:var(--body);font-weight:600}
.doc__sep{color:var(--line-2)}
.doc__warn{
  display:block;margin-top:5px;font-size:.75rem;color:var(--look);line-height:1.55;
  border-left:2px solid var(--look);padding-left:9px;
}
.doc__srow td{
  border-top:1px solid var(--line-2);border-bottom:none;font-family:var(--data);font-size:.77rem;
  color:var(--ink);letter-spacing:.04em;padding-top:9px;
}
.doc__tot{margin-top:22px;border-top:1px solid var(--line-2);padding-top:14px;break-inside:avoid;page-break-inside:avoid}
.doc__totr{display:flex;justify-content:space-between;gap:16px;padding:5px 0;font-family:var(--data);font-size:.79rem}
.doc__totr b{color:var(--ink);font-weight:400;font-variant-numeric:tabular-nums}
.doc__totr--big{border-top:1px solid var(--line);margin-top:8px;padding-top:12px}
.doc__totr--big span{
  font-family:var(--display);font-size:1.1rem;letter-spacing:.05em;text-transform:uppercase;color:var(--body);
}
.doc__totr--big b{font-family:var(--display);font-size:1.8rem;color:var(--have)}
.doc__totn{margin-top:8px;font-size:.75rem;color:var(--look);line-height:1.55}
.doc__accept{margin-top:24px;break-inside:avoid;page-break-inside:avoid}
.doc__sig{display:block;max-width:340px;width:100%;border-radius:var(--r-sm);border:1px solid var(--line);margin-bottom:8px}
.doc__sigline{display:block;width:min(340px,100%);height:52px;border-bottom:1px solid var(--line-2);margin-bottom:8px}
.doc__foot{margin-top:22px;padding-top:12px;border-top:1px solid var(--line);font-size:.71rem;color:var(--muted);line-height:1.6}

/* ------------------------------------------------------------------ print
   The buyer's copy, through the browser's own print to PDF. Paper is white, so
   for this one medium the ground colour becomes the ink. No hue is added: the
   greys here are the ground colour at opacity, and teal and amber keep the
   meanings they carry on screen. */
@media print{
  @page{size:letter portrait;margin:11mm}
  html,body{height:auto;background:#fff;color:var(--ground);-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .app{display:block;height:auto;background:#fff}
  .rail--top,.rail--price,.boot,.doc__act,.trail,.pill,.go,#jsonout,.jsonbox{display:none !important}
  .stage{overflow:visible;padding:0;display:block}
  .screen{max-width:none;margin:0;animation:none}
  .doc{background:#fff;border:0;border-radius:0;padding:0;color:var(--ground);font-size:9.4pt}
  .doc__logo--screen{display:none}
  .doc__logo--print{display:block;height:21pt;width:auto}
  .doc__kind{font-size:19pt;color:var(--ground)}
  .doc__no{font-size:11pt;color:var(--ground)}
  .doc__rmeta,.doc__plabel,.doc__origin,.doc__aline,.doc__foot,.doc__t th,.doc__sdesc small,.doc__c3 small{color:rgba(11,15,16,.62)}
  .doc__head{border-bottom:1.2pt solid var(--ground);padding-bottom:8pt}
  .doc__parties{border-top:.5pt solid rgba(11,15,16,.34);border-bottom:.5pt solid rgba(11,15,16,.34);padding:8pt 0;margin-top:10pt;gap:10pt}
  .doc__pline,.doc__c1,.doc__c2,.doc__c3,.doc__ext,.doc__sdesc,.doc__style,.doc__samt,.doc__totr b,.doc__t td{color:var(--ground)}
  .doc__pline--none{color:rgba(11,15,16,.62)}
  .doc__blk{margin-top:11pt}
  .doc__t{font-size:8.4pt;margin-top:6pt}
  .doc__t td,.doc__t th{padding:3.4pt 5pt;border-bottom:.4pt solid rgba(11,15,16,.22)}
  .doc__c3{font-size:7.9pt}
  .doc__aline{font-size:7.4pt}
  .doc__aline b{color:var(--ground)}
  .doc__sep{color:rgba(11,15,16,.34)}
  .doc__warn{font-size:7.6pt;border-left-width:1.4pt}
  .doc__srow td{border-top:.9pt solid var(--ground);color:var(--ground);padding-top:5pt}
  .doc__tot{border-top:1.2pt solid var(--ground);margin-top:12pt;padding-top:8pt}
  .doc__totr--big b{color:var(--ground);font-size:16pt}
  .doc__totn{font-size:7.6pt}
  .doc__sig{border:.4pt solid rgba(11,15,16,.34);max-width:210pt;filter:invert(1)}
  .doc__sigline{border-bottom:.7pt solid var(--ground)}
  .doc__foot{border-top:.4pt solid rgba(11,15,16,.22);font-size:7pt;margin-top:12pt;padding-top:6pt}
}

/* A note the sheet itself is ambiguous about, printed rather than hidden. */
.doc__note{display:block;margin-top:5px;font-size:.72rem;color:var(--muted);line-height:1.55;border-left:2px solid var(--line-2);padding-left:9px}
@media print{
  .doc__note{font-size:7.2pt;color:rgba(11,15,16,.62);border-left-color:rgba(11,15,16,.34)}
}

/* ================================================================ 2026-09-02
   Changes asked for on the call: the sales order document, the tier override,
   and the art number field. No new colour: teal is committed, violet is a
   break not yet reached, amber is a human decision. An override is amber
   because that is exactly what it is.                                       */

/* ------------------------------------------------------- the tier override */
.tierovr{
  display:block;margin-top:7px;width:100%;
  background:transparent;border:1px solid var(--line-2);border-radius:var(--r-sm);
  color:var(--body);font-family:var(--ui);font-size:.7rem;letter-spacing:.04em;
  text-transform:uppercase;padding:8px 6px;min-height:36px;cursor:pointer;
}
.tierovr:active{background:var(--panel-3)}
.tierovr--on{border-color:var(--look);color:var(--look);background:var(--look-dim)}
.tierbadge--ovr{border-left:2px solid var(--look);padding-left:8px}
.tierbadge__t--ovr{color:var(--look)}
.tierbadge__n--ovr{color:var(--look);text-transform:none;letter-spacing:.01em;font-size:.62rem}
.pad__box--wide{grid-column:1/-1}
.opts--tier{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.rev__line--ovr{border-left:2px solid var(--look);padding-left:8px}
.rev__ovr{
  margin:6px 0 10px;padding:9px 11px;border-left:2px solid var(--look);
  background:var(--look-dim);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:.76rem;color:var(--body);line-height:1.6;
}
.rev__ovr b{color:var(--look);font-weight:600}
.card--wide{grid-column:1/-1}

/* --------------------------------------------------- the developer view
   The JSON is still here, still complete, and no longer sitting beside the
   thing a buyer is meant to look at. Asim, on seeing it on screen: "I can't
   understand that shit." He is right, it was never for him.                */
.devbox{
  margin-top:26px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);padding:0;
}
.devbox__s{
  list-style:none;cursor:pointer;padding:14px 16px;min-height:var(--tap);
  display:flex;align-items:center;color:var(--muted);
  font-family:var(--ui);font-size:.74rem;letter-spacing:.09em;text-transform:uppercase;
}
.devbox__s::-webkit-details-marker{display:none}
.devbox__s::before{content:"+";margin-right:10px;color:var(--muted);font-size:1rem}
.devbox[open] .devbox__s::before{content:"-"}
.devbox__n{padding:0 16px;color:var(--muted);font-size:.79rem;line-height:1.6;max-width:80ch}
.devbox__a{display:flex;gap:10px;flex-wrap:wrap;padding:12px 16px 16px}

/* ------------------------------------------------------ the sales order
   Laid out the way their own workbook lays it out. On screen it is on the
   ground colour like everything else; on paper it is black on white.       */
.so__head{display:flex;align-items:flex-start;gap:18px;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.so__co{flex:1;text-align:center}
.so__coname{
  display:block;font-family:var(--display);font-size:1.14rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);
}
.so__coline{display:block;font-family:var(--display);font-size:.82rem;letter-spacing:.1em;color:var(--body);text-transform:uppercase}
.so__title{
  font-family:var(--display);font-style:italic;font-size:2rem;text-align:center;
  color:var(--ink);margin-top:16px;font-weight:600;letter-spacing:.02em;
}
.so__stamp{
  text-align:center;font-family:var(--data);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--have);margin-top:4px;
}
.so__parties{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:20px}
.so__parties .doc__party{border:1px solid var(--line-2);border-radius:var(--r-sm);padding:11px 13px}
.so__fields{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:18px}
.so__f{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:3px 0}
.so__fl{
  font-family:var(--display);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;
}
.so__fv{font-family:var(--data);font-size:.82rem;color:var(--ink);text-align:right}
.so__fv--pad{color:var(--have)}
.so__fv--none{flex:1;border-bottom:1px solid var(--line);min-height:1em}
.so__origin{margin-top:16px;font-size:.79rem;color:var(--muted);line-height:1.6;max-width:88ch}
.so__origin b{color:var(--look);font-weight:600}
.so__band{
  margin-top:20px;text-align:center;font-family:var(--display);font-style:italic;
  font-size:1.24rem;letter-spacing:.06em;color:var(--ink);
}
.so__t{width:100%;border-collapse:collapse;margin-top:12px;font-size:.8rem}
.so__t th,.so__t td{padding:5px 6px;border:1px solid var(--line);vertical-align:middle}
.so__h1 th,.so__h2 th{
  font-family:var(--display);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);font-weight:400;text-align:center;
}
.so__h1 .so__cc,.so__h2 .so__cc,.so__h1 .so__cpo,.so__h2 .so__cpo{border:0}
.so__csz{border-bottom:1px solid var(--line-2)}
.so__cband{color:var(--body);font-family:var(--data);text-transform:none;letter-spacing:.02em}
.so__cc{color:var(--ink);letter-spacing:.05em;white-space:nowrap}
.so__cpo{white-space:nowrap;min-width:64px}
.so__cq{text-align:center;font-family:var(--data);font-variant-numeric:tabular-nums;color:var(--body);min-width:34px}
.so__cn{text-align:right;font-family:var(--data);font-variant-numeric:tabular-nums;color:var(--body);white-space:nowrap}
.so__cn small{display:block;font-size:.66rem;color:var(--look);letter-spacing:.04em;text-transform:uppercase}
.so__cx{color:var(--ink)}
.so__srow td{background:var(--panel-2);border-top:1px solid var(--line-2)}
.so__no{font-family:var(--data);color:var(--ink);text-align:center;background:var(--panel-2)}
.so__sdesc{color:var(--ink);font-size:.86rem;letter-spacing:.03em}
.so__sdesc small{display:block;color:var(--muted);font-size:.75rem;margin-top:3px;letter-spacing:.01em}
.so__r--ovr .so__cc{border-left:2px solid var(--look)}
.so__trow td{background:var(--panel-2);color:var(--ink);font-weight:600}
.so__trow .so__cc{font-family:var(--display);letter-spacing:.08em;text-transform:uppercase}
.so__foot{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:20px;break-inside:avoid;page-break-inside:avoid}
.so__ftotals{border-top:1px solid var(--line-2);padding-top:10px}
.so__ft{display:flex;justify-content:space-between;gap:16px;padding:4px 0;font-family:var(--data);font-size:.82rem}
.so__ft b{color:var(--ink);font-weight:400;font-variant-numeric:tabular-nums}
.so__ft--big span{font-family:var(--display);font-size:1rem;letter-spacing:.05em;text-transform:uppercase;color:var(--body)}
.so__ft--big b{font-family:var(--display);font-size:1.5rem;color:var(--have)}
.so__ft--note span{color:var(--muted);font-size:.74rem}
.doc__ovr{
  display:block;margin-top:6px;padding:8px 10px;font-size:.75rem;line-height:1.6;
  color:var(--body);background:var(--look-dim);border-left:2px solid var(--look);
}
.doc__ovr b{color:var(--look);font-weight:600}
.doc__warn--wide{display:block;margin-top:14px}
.so__ovrsum{
  margin-top:20px;padding:12px 14px;border:1px solid var(--look);border-radius:var(--r-sm);
  background:var(--look-dim);break-inside:avoid;page-break-inside:avoid;
}
.so__ovrline{margin-top:6px;font-size:.82rem;color:var(--body);line-height:1.65}
.so__ovrline b{color:var(--look);font-weight:600}
/* The Y/N shipping answers, printed as one line under the field columns and
   only where the rep actually answered. */
.so__ship{
  margin-top:12px;font-family:var(--data);font-size:.78rem;letter-spacing:.06em;
  color:var(--ink);
}
.so__terms{margin-top:24px;break-inside:avoid;page-break-inside:avoid}
.so__comment{font-size:.8rem;color:var(--ink);line-height:1.6}
.so__tlabel{margin-top:10px;font-family:var(--display);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--body)}
.so__term{font-size:.68rem;color:var(--muted);line-height:1.55;margin-top:5px}

@media (max-width:720px){
  .so__parties,.so__fields,.so__foot{grid-template-columns:1fr;gap:14px}
  .so__t{font-size:.74rem}
}

/* --------------------------------------------------------- printed paper
   Letter portrait, their layout, black on white. The size grid has to hold
   its shape across a page break, so the header repeats and a style block is
   kept whole where it fits.                                                */
@media print{
  .devbox,.doc__act{display:none !important}
  .doc--so{font-size:9pt}
  .so__head{border-bottom:1.4pt solid var(--ground);padding-bottom:8pt}
  .so__coname{font-size:13pt;color:var(--ground)}
  .so__coline{font-size:8.6pt;color:var(--ground)}
  .so__title{font-size:20pt;color:var(--ground);margin-top:10pt}
  .so__stamp{font-size:7.6pt;color:var(--ground)}
  .so__parties{margin-top:10pt;gap:16pt}
  /* Square, like the boxes on their own paperwork. */
  .so__parties .doc__party{border:.7pt solid var(--ground);border-radius:0;padding:5pt 7pt}
  .so__fields{margin-top:9pt;gap:16pt}
  .so__fl{font-size:7.4pt;color:rgba(11,15,16,.72)}
  .so__fv{font-size:8.2pt;color:var(--ground)}
  .so__fv--pad{color:var(--ground);font-weight:700}
  .so__fv--none{border-bottom:.5pt solid rgba(11,15,16,.5)}
  .so__origin{font-size:7.2pt;color:rgba(11,15,16,.66);margin-top:8pt}
  .so__origin b{color:var(--ground)}
  .so__band{font-size:13pt;color:var(--ground);margin-top:10pt}
  .so__ship{font-size:8pt;color:var(--ground);margin-top:7pt}
  .so__t{font-size:7.8pt;margin-top:7pt}
  .so__t th,.so__t td{padding:2.6pt 3.4pt;border:.5pt solid rgba(11,15,16,.5)}
  .so__h1 th,.so__h2 th{font-size:6.6pt;color:rgba(11,15,16,.72)}
  .so__cband,.so__cq,.so__cn,.so__cc,.so__cx,.so__sdesc,.so__no,.so__trow td{color:var(--ground)}
  .so__srow td,.so__no,.so__trow td{background:rgba(11,15,16,.07)}
  .so__sdesc small{color:rgba(11,15,16,.66);font-size:6.9pt}
  .so__cn small{color:var(--ground)}
  .so__ft{font-size:8pt}
  /* On paper these labels were the ground colour at screen opacity, which is a
     pale grey on white and all but invisible in the print preview. Caught in a
     print to PDF, not by reading the stylesheet. */
  .so__ft span,.so__ft--big span,.so__ft--note span,.doc__plabel{color:var(--ground)}
  .so__ft b,.so__ft--big b{color:var(--ground)}
  .so__ft--big b{font-size:14pt}
  .doc__ovr{font-size:7.2pt;background:none;border-left-width:1.6pt;border-left-color:var(--ground);color:var(--ground)}
  .so__ovrsum{border:.8pt solid var(--ground);background:none;padding:6pt 8pt}
  .so__ovrline{font-size:7.4pt;color:var(--ground)}
  .so__ovrline b,.doc__ovr b{color:var(--ground)}
  .so__terms{margin-top:12pt}
  .so__comment{font-size:8pt;color:var(--ground)}
  .so__tlabel{font-size:7.4pt;color:var(--ground)}
  .so__term{font-size:6.2pt;color:rgba(11,15,16,.78);margin-top:2.4pt}
  .so__t thead{display:table-header-group}
  .so__t tr{break-inside:avoid;page-break-inside:avoid}
}

/* ==================================================================== phone
   PHONE TOLERANCE. Added 2026-09-02 as a separate, appended block so it can
   be read, reviewed or reverted in one piece.

   The iPad is still the target and nothing here is aimed at changing it. This
   only stops a phone from breaking. No colour is added, no type family, case
   or letter-spacing convention changes, nothing is deleted from the layout.

   Every rule is scoped to `screen`, because the print stylesheet renders at
   roughly 733px inside the 11mm letter margins and would otherwise pick up a
   max-width narrow rule meant for a handset.

   Measured, not eyeballed: tools/measure-390.js renders the real screens out
   of app.js into 390px frames and counts what crosses the viewport and what
   is under 44px. Before this block: 135 elements escaping, 86 targets under
   44px, all 8 screens scrolling sideways.
   ==================================================================== */

/* ---- 1. the shell can never be forced wider than the viewport ----------
   .app is a grid. A grid item's automatic minimum size is its min-content
   width, so the header rail's 899px of nowrap pills was widening the single
   column and dragging the stage and the price rail out with it. One cause,
   most of the overflow. */
.app{grid-template-columns:minmax(0,1fr)}
.rail--top,.stage,.rail--price{min-width:0}

/* ---- 2. touch target floor ---------------------------------------------
   Deliberately NOT inside a media query. 34px step buttons and a 30px
   Install button are under the 44px minimum on the iPad too. Only genuinely
   tappable things are raised: the save and network pills are status text and
   keep their size. */
.trail__step{min-height:44px;min-width:44px;justify-content:center}
button.pill{min-height:44px;display:inline-flex;align-items:center}
.chip{min-height:44px;display:inline-flex;align-items:center}
.tierovr{min-height:44px}
.back{min-height:44px}
.search__clear{min-height:44px;display:inline-flex;align-items:center}

/* the trail scrolls inside itself instead of clipping what will not fit */
.trail{overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.trail::-webkit-scrollbar{display:none}

/* a status pill can never be wider than the rail holding it */
.pill{max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* ---- 3. narrow: the price rail keeps its zero minimum -------------------
   The existing 760px rule replaced minmax(0,1fr) with 1fr, which is
   minmax(auto,1fr), so min-content could push the column past the viewport
   again after rule 1 had fixed it. */
@media screen and (max-width:760px){
  .rail--price{grid-template-columns:minmax(0,1fr);min-height:0}
  .ladder,.ladder__top,.ladder__for,.ladder__gap,.ladder__bands,.railend,.money{min-width:0}
  .chips,.filters{min-width:0}

  /* total and the primary button share a row, and the button drops to its own
     full width row rather than pushing the rail sideways */
  .railend{flex-wrap:wrap;gap:10px}
  .money{flex:1 1 auto}
  .railend .go{flex:1 1 150px;justify-content:center;text-align:center}

  /* the five bands stay. They are the signature and they still fit at 390px
     once the padding is tightened. The price gets an ellipsis so a wider
     number degrades visibly rather than being silently clipped by .band. */
  .band{padding:0 5px}
  .band__p{font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* the sales order table scrolls inside its own block, so the document
     header, totals and terms stay where they are */
  .doc__blk{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* ---- the header becomes two rows ----
     Row 1 is identity and state, row 2 is the trail with room for a real
     touch target. Nothing is dropped except the "Order pad" caption, which
     the window title already carries. */
  .rail--top{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    height:auto;
    row-gap:4px;column-gap:10px;
    padding:6px var(--pad);
    padding-top:calc(6px + env(safe-area-inset-top));
  }
  .rail__mark{grid-column:1;grid-row:1}
  .rail__pad{display:none}
  .rail__status{
    grid-column:2;grid-row:1;justify-self:end;min-width:0;
    flex-wrap:wrap;justify-content:flex-end;row-gap:5px;
  }
  .trail{grid-column:1 / -1;grid-row:2;flex:none;width:100%}

  /* The trail collapses to seven numbered targets. The label is redundant on
     a phone: every screen already prints "Step N of 7" and names itself in
     the title, so hiding it costs nothing and buys 7 x 44px that fit. */
  .trail__step .trail__label,
  .trail__step--here .trail__label{display:none}
}

/* the grid row for the header follows it to auto once the header stacks */
@media screen and (max-width:760px){
  .app{grid-template-rows:auto minmax(0,1fr) auto}
}

/* ---- 4. below 380px the five bands genuinely stop fitting ---------------
   Only then does the ladder fall back to the current tier and the next one,
   which is the pair that is actually being decided at the booth. If a band
   is neither, and nothing is marked yet, all five stay: the :has() guard is
   what makes that true. On an engine without :has() the whole rule is
   dropped and all five show, which is the old behaviour. */
@media screen and (max-width:379px){
  .ladder__bands:has(.band--here) .band:not(.band--here):not(.band--next),
  .ladder__bands:has(.band--next) .band:not(.band--here):not(.band--next){display:none}
}

/* ---- 5. two truncation rules that were never able to fire ---------------
   .style__desc and .sz__cname are spans whose parents are a plain block and a
   table cell, so both stayed inline boxes. overflow, text-overflow and
   max-width do not apply to a non-replaced inline box, so the ellipsis these
   rules ask for has never happened and a long description simply ran on. It
   was invisible while the page was 899px wide. Blockifying them is what makes
   the existing rule do what it already says. Not scoped to a media query:
   the same run-on happens on the iPad, it just has further to run. */
.style__desc{display:block}
.sz__cname{display:block}

/* ==================================================== onboarding and identity
   Added 2026-09-02 as its own appended block so it reads, reviews and reverts
   in one piece, the same way the phone tolerance block above does.

   Three things live here and nothing else changes:
     .gate    who is holding the pad, first launch and every handover
     .coach   the seven card walkthrough, spotlighting the real control
     .addr    the ship to address on step 1, and .who under it

   No colour is introduced. Teal stays committed, violet stays reachable,
   amber stays a human has to look at this.
   ========================================================================= */

/* ---- the ? in the header ------------------------------------------------- */
.pill--help{
  min-width:44px;justify-content:center;font-family:var(--display);
  font-size:.9rem;letter-spacing:0;padding:7px 10px;
}

/* The HTML hidden attribute works through the UA rule [hidden]{display:none},
   which any class rule setting display beats on specificity. .gate sets
   display:grid, so hidden did nothing and the emptied gate kept painting a
   full screen 94% opaque blurred pane over the whole app at z-index 95.
   This puts hidden back in charge for every overlay in this file. */
.gate[hidden],.coach[hidden],.who[hidden],.addr[hidden]{display:none !important}

/* ---- who is on the pad --------------------------------------------------- */
.gate{
  position:fixed;inset:0;z-index:95;display:grid;place-items:center;
  padding:calc(env(safe-area-inset-top) + 18px) 18px 18px;
  background:rgba(11,15,16,.94);backdrop-filter:blur(14px);overflow-y:auto;
}
.gate__panel{
  width:min(460px,100%);background:var(--panel);border:1px solid var(--line-2);
  border-radius:var(--r);padding:22px;
}
.gate__eyebrow{
  display:block;font-family:var(--data);font-size:.6rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--have);margin-bottom:10px;
}
.gate__title{
  font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,5vw,2.2rem);
  line-height:1.02;letter-spacing:.014em;text-transform:uppercase;color:var(--ink);
}
.gate__sub{margin-top:9px;color:var(--body);font-size:.9rem;line-height:1.55}
.gate__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.gate__who{
  min-height:var(--tap);background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r-sm);color:var(--ink);font-family:var(--display);
  font-size:1.06rem;letter-spacing:.05em;text-transform:uppercase;
}
.gate__who:active{transform:scale(.985);background:var(--panel-3)}
.gate__who--other{grid-column:1 / -1;color:var(--body);font-size:.94rem}
/* An odd number of names leaves the last one alone in a two column row, which
   reads like a mistake. It spans instead. Self adjusting: with an even list
   nothing matches, so removing a name needs no CSS change. */
.gate__who:nth-last-child(2):nth-child(odd){grid-column:1 / -1}
.gate__row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.gate__row .go{flex:1 1 auto;justify-content:center}

/* ---- the walkthrough ----------------------------------------------------
   The whole layer is untappable and only the card takes a tap, so the pad
   underneath is never blocked and the highlighted control can still be used.
   That is deliberate: a walkthrough that traps a rep at a booth is worse than
   no walkthrough. */
.coach{position:fixed;inset:0;z-index:80;pointer-events:none}
.coach__veil,.coach__hole{position:fixed;pointer-events:none}
.coach__veil{inset:0;background:rgba(11,15,16,.72)}
.coach__hole{
  border-radius:var(--r-sm);border:2px solid var(--have);
  box-shadow:0 0 0 9999px rgba(11,15,16,.72),0 0 0 4px rgba(18,167,158,.28);
}
.coach__card{
  position:fixed;pointer-events:auto;width:min(360px,calc(100vw - 24px));
  background:var(--panel);border:1px solid var(--have);border-radius:var(--r);
  padding:16px;box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.coach__card--mid{
  left:50%;top:50%;transform:translate(-50%,-50%);
}
.coach__count{
  display:block;font-family:var(--data);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--have);
}
.coach__label{
  display:block;margin-top:7px;font-family:var(--display);font-size:1.16rem;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink);line-height:1.1;
}
.coach__text{margin-top:8px;color:var(--body);font-size:.9rem;line-height:1.55}
.coach__note{margin-top:8px;color:var(--muted);font-size:.78rem;line-height:1.5}
.coach__row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.coach__row .go{flex:1 1 auto;justify-content:center;min-height:44px}

/* ---- the ship to address on step 1 --------------------------------------- */
.addr{
  margin-top:20px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:16px;
}
.addr__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:5px 14px;margin-bottom:12px}
.addr__note{font-family:var(--data);font-size:.6rem;letter-spacing:.06em;color:var(--muted)}
.addr .card{background:var(--panel-2)}
.addr__city{display:grid;grid-template-columns:1fr;gap:0}
.card__addr{
  display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
  font-family:var(--data);font-size:.72rem;color:var(--body);line-height:1.6;
}
.card__addr i{color:var(--look);font-style:normal}

/* ---- who is on the pad, on step 1 ---------------------------------------- */
.who{
  margin-top:14px;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;
}
.who__l{font-family:var(--data);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.who__v{font-family:var(--display);font-size:1.06rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.who .go{margin-left:auto;min-height:44px}

/* Neither layer belongs on paper. */
@media print{
  .gate,.coach,.who,.addr{display:none !important}
}

/* Narrow: the address columns and the name grid stop being two up. */
@media screen and (max-width:520px){
  .gate__grid{grid-template-columns:1fr}
  .who .go{margin-left:0;width:100%;justify-content:center}
}

/* Order entry stays explicit when the pad already holds saved work. */
.pill--new{background:var(--have);color:#08110F;border-color:var(--have);font-weight:700;white-space:nowrap}
.buyer-results{display:grid;gap:8px;margin-top:12px}
.buyer-result{min-height:64px;padding:12px 16px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;text-align:left}
.buyer-result .card__name{font-size:1rem}
.buyer-result .card__meta{margin:0;text-align:right;font-size:.8rem}
.buyer-selected{margin:12px 0}
.buyer-selected .card__meta{overflow-wrap:anywhere}
.buyer-extra{border-top:1px solid var(--line);margin-top:12px}
.buyer-extra>summary{cursor:pointer;min-height:48px;padding:14px 4px;font-size:.95rem}
.order-home__actions{margin-bottom:12px;flex-wrap:wrap}
.order-home__recent{color:var(--muted);margin:0 0 28px}
.new-order-notice{max-width:1180px;margin:0 auto 24px}
.new-order-notice .actions{margin-top:14px;flex-wrap:wrap}
#trail[hidden],#priceRail[hidden]{display:none}

/* Artwork groups keep repeated styles and colours distinguishable. */
.art-group{padding:14px 0;margin:0 0 14px;border-bottom:1px solid var(--line)}
.art-group__label{display:block;font-weight:600;color:var(--ink);margin:0 0 10px}
.art-group .actions{margin-top:8px;flex-wrap:wrap}
.art-group__note{color:var(--muted);margin:0 0 20px}
.rev>.art-group{padding:14px 18px;margin:0}

/* The test designation stays outside the scrolling stage on every screen. */
.app{grid-template-rows:auto var(--top) minmax(0,1fr) auto}
.test-mode-banner{
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:4px 14px;
  padding:7px 14px;background:#f5c451;color:#171b1c;
  font:600 12px/1.3 var(--ui);text-align:center;
}
.test-mode-banner strong{letter-spacing:.06em}
.test-order-label{
  padding:12px 16px;background:#fff3cf;color:#282114;border:2px solid #a37200;
  font-weight:700;text-align:center;
}
@media screen and (max-width:760px){
  .app{grid-template-rows:auto auto minmax(0,1fr) auto}
  .test-mode-banner{font-size:11px;padding:6px 10px;gap:2px 8px}
}
@media print{
  .test-mode-banner{display:none !important}
  .test-order-label{color:#000;background:#fff;border:2px solid #000;break-inside:avoid}
}


/* September 2026: a bright order desk for phone, tablet and booth use.
   Screen-only tokens preserve the document's existing print colour contract.
   Valani teal remains the active action; violet and amber retain their meanings. */
@media screen {
  :root{
    color-scheme:light;
    --ground:#F3F6F7;
    --panel:#FFFFFF;
    --panel-2:#EDF2F3;
    --panel-3:#E2E9EB;
    --line:#D7E1E3;
    --line-2:#A5B8BD;
    --ink:#172D32;
    --body:#344D54;
    --muted:#52666C;
    --have:#087F78;
    --next:#5251B8;
    --look:#956000;
    --warn:#956000;
    --have-dim:#E5F4F1;
    --next-dim:#EEEDFB;
    --look-dim:#FFF2D6;
    --r:12px;
  }
  .boot{background:#0B0F10}
  .boot__msg{color:#AABBB7}
  .boot__msg--bad{color:#F5C451}
  .rail--top{background:#FFFFFF;backdrop-filter:none}
  .rail__mark img,.doc__logo--screen{filter:brightness(0);opacity:.88}
  .rail__mark img{height:30px;width:auto}
  .rail__pad{letter-spacing:.1em}
  .pill{font-family:var(--ui);font-size:.7rem;letter-spacing:0;text-transform:none;padding:7px 10px}
  .pill--new{color:#FFFFFF}
  .trail__label{font-family:var(--ui);font-size:.75rem;letter-spacing:0;text-transform:none}
  .trail__step--here{background:var(--have-dim);color:var(--have)}
  .trail__step--here .trail__n{color:#FFFFFF}
  .trail__step[disabled]{opacity:.65}
  .head__eyebrow{font-family:var(--ui);font-size:.72rem;font-weight:600;letter-spacing:.08em}
  .head__title{font-size:clamp(1.9rem,3.5vw,2.6rem)}
  .head__sub{font-size:.94rem}
  .card--on,.style--on,.colour--on{background:var(--have-dim)}
  .card--on,.style--on,.colour--on,.opt--on{box-shadow:inset 3px 0 0 var(--have)}
  .card__meta,.card__foot,.style__spec,.opt__note,.addr__note,.saved__where,
  .saved__meta,.saved__tag,.gate__eyebrow,.coach__count,.coach__note,.sig__hint,
  .field__l,.pad__t,.notice__t{font-family:var(--ui);font-size:.75rem;letter-spacing:.01em}
  .style__from{font-family:var(--ui);font-size:.68rem;letter-spacing:0}
  .card__name{line-height:1.2}
  .chip{font-family:var(--ui);font-size:.78rem;letter-spacing:0;text-transform:none}
  .chip--on{background:var(--have-dim);border-color:var(--have);color:var(--have)}
  .chip__n{opacity:1;color:var(--muted)}
  .cell--zero,.sz__colsum--zero{color:#697D82}
  .cell--dead{color:#7C8B8F;background:repeating-linear-gradient(135deg,#F0F3F4,#F0F3F4 5px,#E5EBED 5px,#E5EBED 10px)}
  .colour--on .colour__tick::after,.opt--on .opt__box::after{border-color:#FFFFFF}
  .band--done .band__q{color:var(--have)}
  .band--here .band__q,.band--here .band__p{color:#FFFFFF}
  .band--next .band__q{color:var(--next)}
  .band--next{box-shadow:inset 0 0 0 1px #B7B5E0}
  .band__q{letter-spacing:0}
  .rail--price{box-shadow:0 -3px 12px rgba(23,45,50,.04)}
  .go{color:#FFFFFF;letter-spacing:.025em}
  .go--ghost{color:var(--body);border:1px solid var(--line)}
  .go[disabled]{background:#DDE6E8;color:#63767C;opacity:1}
  .back{font-family:var(--ui);font-size:.78rem;letter-spacing:0;text-transform:none}
  .search:focus-within,.field__i:focus{box-shadow:0 0 0 3px var(--have-dim)}
  .gate{background:rgba(231,239,241,.94);backdrop-filter:blur(8px)}
  .gate__panel{box-shadow:0 12px 40px rgba(23,45,50,.12)}
  .coach__veil{background:rgba(23,45,50,.42)}
  .coach__hole{box-shadow:0 0 0 9999px rgba(23,45,50,.42),0 0 0 4px rgba(8,127,120,.18)}
  .coach__card{box-shadow:0 12px 30px rgba(23,45,50,.2)}
  /* Canvas data remains unchanged: invert presentation so both new and saved
     signatures show dark strokes on a pale writing area, as in print. */
  .sigpad,.doc__sig{filter:invert(1)}
  .buyer-result .card__meta{font-size:.82rem}
  .test-mode-banner{background:#FFF0C2;color:#583B00;border-bottom:1px solid #D9B957}
  .test-mode-banner strong{letter-spacing:.02em}
  :focus-visible{outline:3px solid var(--have);outline-offset:3px}
}
@media screen and (max-width:760px){
  .rail--top{column-gap:8px}
  .rail__status{gap:5px}
  .pill{font-size:.65rem;padding:6px 8px}
  .buyer-result{align-items:flex-start;flex-direction:column;gap:5px}
  .buyer-result .card__meta{text-align:left}
  .grid--two,.grid--lines{grid-template-columns:minmax(0,1fr)}
  .rev__line{grid-template-columns:minmax(0,1fr) auto auto;gap:8px;padding:11px 13px}
  .rev__lc{grid-column:1 / -1;white-space:normal;overflow:visible}
  .rev__lq{text-align:left}
  .rev__lp,.rev__le{min-width:0}
  .head{margin-bottom:16px}
  .head__title{line-height:1.08}
  .stage{padding-top:18px}
}
@media screen and (max-width:379px){
  .grid--accounts{grid-template-columns:minmax(0,1fr)}
  .grid--colours{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail__mark img{height:26px}
  .style{grid-template-columns:48px minmax(0,1fr) auto;gap:8px;padding:12px}
  .style__price{font-size:1.18rem}
  .style__from{max-width:76px;line-height:1.25}
}
@media screen and (max-width:760px){
  /* Keep the colour visible while leaving room for two size cells on phones. */
  .sz__corner,.sz__row{min-width:112px;max-width:112px;padding-left:10px !important;padding-right:10px !important}
  .sz__cname{max-width:92px}
  .sz__code{font-size:.8rem}
}
@media screen and (max-width:379px){
  .sz__corner,.sz__row{min-width:96px;max-width:96px}
  .sz__cname{max-width:76px}
}

/* Build status is separate from order progress and never appears on printouts. */
@media screen {
  .app{grid-template-rows:auto var(--top) minmax(0,1fr) auto auto}
  .release-footer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 12px;padding:5px 12px max(5px,env(safe-area-inset-bottom));font-size:.7rem;color:var(--muted);background:var(--panel);border-top:1px solid var(--line)}
  .release-footer button{font:inherit;font-weight:650;color:var(--have);background:var(--have-dim);border:1px solid var(--have);border-radius:7px;padding:7px 12px;min-height:32px;cursor:pointer}
  .release-footer[data-state="available"] #releaseStatus{color:var(--have);font-weight:600}
}
@media screen and (max-width:760px){.app{grid-template-rows:auto auto minmax(0,1fr) auto auto}}
@media print{.release-footer{display:none !important}}

/* Optional garment previews supplement the exact colour name, never replace it. */
@media screen {
  .colour__name{font-weight:650;font-size:.92rem;color:var(--ink);margin-top:0;overflow-wrap:anywhere}
  .colour__code{font-size:.7rem;letter-spacing:.09em;color:var(--muted)}
  .colour__tick{z-index:1;background:var(--panel);box-shadow:0 0 0 3px var(--panel)}
  .garment-preview{display:inline-block;flex:none;overflow:hidden;background:#fff;border-radius:7px;vertical-align:middle}
  .garment-preview[hidden]{display:none !important}
  .garment-preview__img{display:block;width:100%;height:100%;object-fit:contain}
  .garment-preview--tile{display:block;width:100%;aspect-ratio:1;margin-bottom:3px}
  .colour--photo{gap:6px;padding:10px}
  .garment-preview--size{display:block;width:38px;height:38px;margin:0 0 5px}
  .garment-preview--review{width:34px;height:34px;margin-right:8px}
}
@media screen and (max-width:760px){.grid--colours{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media print{.garment-preview{display:none !important}}

/* September 2026 phone pass: keep the working controls close to the field
   they change, and give the scrolling order most of the small viewport. */
@media screen and (max-width:620px){
  .app{grid-template-rows:auto auto minmax(0,1fr) auto auto}
  .test-mode-banner{min-height:30px;padding:4px 8px;line-height:1.2}

  .rail--top{
    grid-template-columns:auto minmax(0,1fr);grid-template-rows:44px 18px 44px;
    row-gap:0;column-gap:6px;padding:1px 10px 3px;padding-top:1px
  }
  .rail__mark{grid-column:1;grid-row:1;align-self:center}
  .rail__mark img{height:24px}
  .rail__status{display:contents}
  .rail__actions{grid-column:2;grid-row:1;justify-self:end;gap:3px;min-width:0}
  .rail__facts{
    grid-column:1/-1;grid-row:2;justify-self:end;min-width:0;max-width:100%;
    gap:6px;overflow:hidden;white-space:nowrap
  }
  .rail__status .pill{flex:0 1 auto;min-width:0;min-height:44px;padding:5px 7px;font-size:.75rem}
  .rail__status .pill--new{flex:0 0 auto;min-width:76px;white-space:nowrap}
  .rail__status .pill--help{flex:0 0 44px;width:44px;min-width:44px;padding:0}
  .rail__status #btnInstall{flex:0 0 auto;min-width:56px}
  .rail__status .pill--save,.rail__status .pill--office{
    flex:1 1 auto;min-width:42px;max-width:88px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
  }
  .rail__status .pill--save[data-state="failed"]{max-width:96px;font-weight:700}
  .rail__status .pill--net[data-state="on"]{display:none}
  .rail__status .pill--net[data-state="off"]{max-width:60px;font-weight:700}
  .rail__status:has(.pill--office:not([hidden])) .pill--save[data-state="saved"]{display:none}
  .rail__facts .pill{
    min-width:0;max-width:none;min-height:18px;height:18px;padding:0 3px;border:0;
    background:transparent;font-size:.68rem;overflow:visible;text-overflow:clip
  }
  .trail{grid-column:1/-1;grid-row:3;display:flex;gap:3px;overflow-x:auto}
  .trail__step{flex:0 0 44px;width:44px;min-width:44px;min-height:44px;padding:4px;border-radius:10px}
  .trail__n{width:26px;height:26px}

  .stage{padding:12px 12px 18px}
  .head{margin-bottom:12px}
  .head__eyebrow{margin-bottom:5px}
  .head__title{font-size:1.72rem}
  .head__sub{margin-top:6px;font-size:.88rem;line-height:1.42}
  .card,.addr,.saved{min-width:0;padding:13px}

  .field--date{min-width:0}
  .field--date .field__i{min-width:0;max-width:100%}
  .field--date .yn{margin-top:10px !important}
  .field--date .field__note{margin:8px 0 14px;line-height:1.4}

  .saved{margin-top:14px}
  .saved__head{margin-bottom:9px}
  .saved__item{margin-bottom:10px}
  .saved__row{grid-template-columns:minmax(0,1fr) auto;gap:5px 10px;padding:12px}
  .saved__no{grid-column:1/-1;grid-row:1}
  .saved__b{grid-column:1;grid-row:2}
  .saved__amt{grid-column:2;grid-row:2;align-self:start}
  .saved__buyer{font-size:.94rem}
  .saved__meta{white-space:normal;line-height:1.4}
  .saved__tools{border-top:1px solid var(--line);padding:6px 8px;min-height:56px;align-items:center}
  .saved__confirm{margin:0;border-width:1px 0 0;border-radius:0;padding:9px}

  .opt{align-items:flex-start}

  .rail--price{padding:7px 10px calc(7px + env(safe-area-inset-bottom));gap:7px}
  .rail--price[data-has-quantity="false"] .ladder{display:none}
  .rail--price[data-step="1"] .ladder,
  .rail--price[data-step="2"] .ladder,
  .rail--price[data-step="3"] .ladder,
  .rail--price[data-step="4"] .ladder{display:none}
  .rail--price[data-has-quantity="false"]{grid-template-columns:minmax(0,1fr)}
  .railend{flex-wrap:nowrap;gap:10px}
  .money{flex:1 1 auto;min-width:0;text-align:left}
  .money__l{font-size:.52rem}
  .money__v{font-size:1.55rem;margin-top:1px}
  .money__s{font-size:.56rem;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .railend .go{flex:1 1 152px;min-height:48px;padding:0 12px;font-size:.92rem;justify-content:center;text-align:center}
  .ladder__top{margin-bottom:5px}
  .ladder__bands{height:38px}
  .release-footer:not([data-state="available"]):not([data-state="failed"]){display:none}

  .qtyeditor-host--sheet .qtyeditor__panel{
    width:100%;height:100%;max-height:100%;border-radius:0
  }
  .qtyeditor__head{padding:9px 12px 7px;gap:10px}
  .qtyeditor__head h2{font-size:1.2rem}
  .qtyeditor__head p{margin-top:2px}
  .qtyeditor__cancel{padding:0 9px}
  .qtyeditor__body{
    display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"quick" "entry" "totals";
    align-content:start;gap:7px;padding:7px 12px
  }
  .qtyeditor__entry{grid-area:entry}
  .qtyeditor__aside{display:contents}
  .qtyeditor__quick{grid-area:quick;min-width:0}
  .qtyeditor__quick>span{margin-bottom:3px}
  .qtyeditor__quick>div{gap:4px}
  .qtyeditor__quick button{min-height:44px}
  .qtyeditor__value{min-height:46px;margin-bottom:5px;font-size:1.8rem}
  .qtyeditor__keys{gap:5px}
  .qtyeditor__key{min-height:46px}
  .qtyeditor__totals{grid-area:totals;order:initial;gap:3px;padding:7px}
  .qtyeditor__totals p{font-size:.69rem}
  .qtyeditor__totals .qtyeditor__price-note{padding-top:5px}
  .qtyeditor__status{min-height:12px;padding:0 12px;font-size:.68rem}
  .qtyeditor__nav{padding:5px 12px;gap:6px}
  .qtyeditor__done{min-height:48px;margin:0 12px calc(6px + env(safe-area-inset-bottom))}
}

@media screen and (max-width:620px) and (max-height:620px){
  .qtyeditor__quick>span{display:none}
  .qtyeditor__quick>div{display:flex;overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
  .qtyeditor__quick>div::-webkit-scrollbar{display:none}
  .qtyeditor__quick button{flex:0 0 58px}
  .qtyeditor__totals p:not(:last-child){display:none}
}

/* Lane E: previous step remains reachable beside the primary action. */
.railend .railback{flex:0 0 auto;min-width:64px;min-height:48px;padding:0 12px}
#priceRail[data-mockup="true"] .ladder{display:none}
@media(max-width:600px){
  .railend{gap:8px}
  .railend .railback{flex:0 0 56px;min-width:56px;padding:0 6px}
  .railend .money{flex:0 1 96px}
  .railend .money__v{font-size:1.45rem}
  .railend .go:not(.railback){flex:1 1 130px;min-width:0}
}

/* Quick-add is physically before the digits on both desktop and phones. */
.qtyeditor__entry .qtyeditor__quick{margin-bottom:8px}
@media screen and (max-width:620px){.qtyeditor__body{grid-template-areas:"entry" "totals"}}
@media screen and (min-width:621px) and (max-height:560px){
  .qtyeditor__entry .qtyeditor__quick>div{grid-template-columns:repeat(6,minmax(0,1fr))}
  .qtyeditor__entry .qtyeditor__quick>span{display:none}
}

.artist-count{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.artist-count .key{min-width:44px;min-height:44px}
.artist-count [aria-pressed="true"]{background:var(--teal,#226f70);color:white}

/* Booth delivery remains visible across order screens. */
.booth-status{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:4px 14px;font-size:12px;background:#edf4f3;flex-shrink:0}
/* Device enrolment banner. Non blocking by construction: it is painted into
   the status strip, which no screen depends on and no order flow reads. */
.booth-status .notice--device{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 12px;border-left-color:var(--look)}
.booth-status .notice--device .notice__t{margin-bottom:0}
.booth-status .notice--device .notice__b{flex:1 1 28ch;min-width:0}
.booth-status .notice--device .pill{margin-left:auto}
.booth-status details{margin-left:auto}.booth-status details[open]{flex-basis:100%}.booth-status .notice{margin:0}.booth-status .pill{min-height:32px}.booth-status details span{display:block;max-width:55ch}@media print{.booth-status{display:none}}

.print-colours{display:flex;flex-wrap:wrap;gap:8px}.print-colour{display:inline-flex;align-items:center;gap:6px}.print-swatch{width:22px;height:22px;border:1px solid #808080;display:inline-block;border-radius:50%}.field select{max-width:100%}

.paper-order-photo{max-width:100%;max-height:420px;object-fit:contain}

.qtyeditor__delivery{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:3px 12px;font-size:12px}.qtyeditor__delivery button{min-height:32px;padding:4px 10px;border:1px solid #b4c8c5;background:#edf4f3;border-radius:6px;color:#164c49}
/* Test banner, header, booth status, scrolling stage, totals, release controls. */
@media screen{.app{grid-template-rows:auto var(--top) auto minmax(0,1fr) auto auto}}
@media screen and (max-width:760px){.app{grid-template-rows:auto auto auto minmax(0,1fr) auto auto}}