/* ============================================================
   THE MINISTRY OF SWEET NOTHINGS — game stylesheet
   The Sorting Parlour: manila paper under pink CRT phosphor.

   The pastel reskin was reverted; this is the house skin again. Navy room,
   neon-pink phosphor, gold pins, manila forms, mono type, CRT scanlines.
   The WORDS are the Ministry's (they live in story.js / UI_COPY and were
   never part of the skin) — only the paint went back.

   The accessibility work that shipped bundled with the reskin was KEPT and
   re-expressed in this palette. It is marked "a11y (kept)" wherever it lands.
   ============================================================ */
:root{
  --bg:#12101f; --bg2:#1a1a2e; --panel:#252542;
  --pink:#ff69b4; --pink-dim:#b34b82; --gold:#ffc94d;
  --paper:#e9dfc6; --paper-dark:#d8cba8; --ink:#2c2a33;
  --c0:#ff69b4; --c1:#ff4d5e; --c2:#a06bff; --c3:#4ecfe0; --clean:#5fd98f;
  --mono:'Cascadia Mono','Consolas','Courier New',monospace;
  /* a11y (kept): SECONDARY INK ON THE DARK PANELS. The retired value here was
     #8b87ad, which lands 3.5-4.0:1 on the panel gradients — under AA at the
     8-10px this ink is always used at (chest-shelf labels, CLASS 0..3 under
     the stamps, raid tick marks, drawer sub-heads). This is the dark-room
     counterpart of the pastel build's --trim-ink (#254A67 on powder blue):
     same job, opposite end of the value scale, same lavender hue as before.
     Measures 6.0:1 on the brightest panel (.stamp.sel), 6.7-8.4:1 elsewhere.
     Secondary ink on MANILA is a different problem and uses #5c5443. */
  --trim-ink:#b8b3d4;
}
*{box-sizing:border-box; margin:0; -webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  background:
    radial-gradient(1200px 600px at 50% -10%, #241f42 0%, transparent 60%),
    var(--bg);
  color:#d8d4e8; font-family:var(--mono); overflow:hidden;
  user-select:none; -webkit-user-select:none; touch-action:manipulation;
}
button{font-family:var(--mono);}

/* CRT wash over everything */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:90;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.13) 0 1px, transparent 1px 3px);
  mix-blend-mode:overlay;
}

/* ---------------- boot ---------------- */
#boot{
  position:fixed; inset:0; z-index:100; background:#0a0916;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s; cursor:pointer;
}
#boot.gone{opacity:0; pointer-events:none;}
#boot pre{
  color:var(--pink); font-size:clamp(10px,2.4vw,15px); line-height:1.7;
  text-shadow:0 0 12px rgba(255,105,180,.7); white-space:pre-wrap;
  padding:24px; max-width:660px;
}
.cursor{animation:blink .8s steps(1) infinite;}
@keyframes blink{50%{opacity:0}}

/* ---------------- gate screens (login / indexing / no-content / clock-out) -- */
.gate{
  position:fixed; inset:0; z-index:70; background:rgba(10,9,22,.88);
  display:none; align-items:center; justify-content:center; text-align:center;
  backdrop-filter:blur(3px);
}
.gate.show{display:flex;}
.gate .card{
  background:var(--paper); color:var(--ink); max-width:min(88vw,420px);
  padding:26px 28px; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.7);
  transform:rotate(-.6deg);
}
.gate .card::before{
  content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%) rotate(-2deg);
  width:90px; height:24px; background:rgba(255,248,222,.55); box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.gate h2{font-size:14px; letter-spacing:.28em; margin-bottom:12px; color:#8a2f4f;}
.gate p{font-size:12px; line-height:1.7; letter-spacing:.04em;}
.gate .small{margin-top:12px; font-size:10px; color:#5c5443;}
.gate .bar{margin:16px auto 0; width:80%; height:12px; border:1px solid #9a8f74; background:#f4ecd8;}
.gate .bar i{display:block; height:100%; width:0%; background:var(--pink-dim); transition:width .4s;}
.gate button{
  margin-top:16px; background:var(--ink); color:var(--paper); border:0; padding:9px 20px;
  font-size:11px; letter-spacing:.16em; cursor:pointer; border-radius:3px;
}

/* ---------------- app frame ---------------- */
#app{
  height:100%; display:grid; gap:10px; padding:10px;
  grid-template-rows:auto 1fr auto auto;
  grid-template-columns:minmax(190px,250px) minmax(140px,185px) 1fr minmax(120px,170px);
  grid-template-areas:
    "top top top top"
    "guide lockers desk rack"
    "raid raid raid raid"
    "ticker ticker ticker ticker";
  max-width:1480px; margin:0 auto;
}
/* lockers collapsed → track 2 shrinks to a slim rail (base 4-col template) */
#app.lockersMin{
  grid-template-columns:minmax(190px,250px) 44px 1fr minmax(120px,170px);
}

/* wide desktop: promote SHIFT ORDERS to its own 5th column right of the rack */
@media (min-width:1101px){
  #app.hasOrders{
    max-width:1680px;
    grid-template-columns:minmax(190px,250px) minmax(140px,185px) 1fr minmax(120px,170px) minmax(200px,250px);
    grid-template-areas:
      "top top top top top"
      "guide lockers desk rack orders"
      "raid raid raid raid raid"
      "ticker ticker ticker ticker ticker";
  }
  /* lockers collapsed in the 5-col template: rail at 44px, orders column intact.
     Higher specificity (0,3,0) than both #app.hasOrders and #app.lockersMin, so it wins. */
  #app.hasOrders.lockersMin{
    grid-template-columns:minmax(190px,250px) 44px 1fr minmax(120px,170px) minmax(200px,250px);
  }
  /* without hasOrders (certify / old server / demo) the 5th area is gone — don't let
     #ordersCol auto-place into a stray implicit row */
  #app:not(.hasOrders) #ordersCol{display:none;}
}

/* below wide desktop: no orders column — the quest chip in the top band takes over */
@media (max-width:1100px){
  #ordersCol{display:none;}
  #questChip.on{display:flex;}
}

/* ---------------- top bar ---------------- */
#topbar{
  grid-area:top; display:flex; align-items:center; gap:14px; min-width:0;
  background:linear-gradient(180deg,#2b2950,var(--panel));
  border:1px solid #3c3a6b; border-radius:8px; padding:8px 14px;
  box-shadow:0 4px 18px rgba(0,0,0,.5);
}
#crest{width:34px; height:34px; flex:0 0 auto; filter:drop-shadow(0 0 6px rgba(255,105,180,.55));}
#titleblock{line-height:1.15; min-width:0; overflow:hidden;}
/* a11y (kept): "MINISTRY OF SWEET NOTHINGS" is a long wordmark and used to
   slide under the rank pin around 1000px. It now clips with an ellipsis at
   EVERY width instead of colliding. */
#titleblock b{
  display:block; color:var(--pink); letter-spacing:.22em; font-size:clamp(10px,1.9vw,14px);
  text-shadow:0 0 10px rgba(255,105,180,.55); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
#titleblock small{display:block; color:var(--trim-ink); font-size:clamp(8px,1.5vw,10px); letter-spacing:.12em;}
#spacer{flex:1;}
#rank{
  display:flex; align-items:center; gap:8px; background:#1c1b33;
  border:1px solid #45406e; border-radius:6px; padding:5px 10px; white-space:nowrap;
}
#rank .pin{width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffe08a, var(--gold) 60%, #8a6a1f);
  box-shadow:0 0 8px rgba(255,201,77,.6);}
#rank.t0 .pin{background:radial-gradient(circle at 35% 30%, #d8d4e8, #8b87ad 60%, #4a4668); box-shadow:none;}
#rank span{font-size:11px; color:#cfc9ea; letter-spacing:.08em;}
#xpChip{font-size:10px; color:var(--trim-ink); letter-spacing:.08em; white-space:nowrap;}
#xpChip b{color:var(--gold);}
#shift{display:flex; flex-direction:column; gap:3px; width:clamp(90px,16vw,150px);}
#shift label{font-size:9px; color:var(--trim-ink); letter-spacing:.18em; white-space:nowrap;}
#shift label.ot{color:var(--gold);}
#shiftbar{height:10px; border:1px solid #56517f; border-radius:2px; background:#14132a; overflow:hidden; display:flex;}
#shiftbar i{flex:1; margin:1px; background:transparent; border-radius:1px;}
#shiftbar i.on{background:var(--pink); box-shadow:0 0 6px rgba(255,105,180,.8);}
#trayBtn{
  position:relative; background:#1c1b33; border:1px solid #45406e; color:#cfc9ea;
  border-radius:6px; padding:6px 12px; font-size:11px;
  letter-spacing:.1em; cursor:pointer; transition:.15s;
}
#trayBtn:hover{border-color:var(--pink); color:#fff;}
#trayBtn .badge{
  position:absolute; top:-7px; right:-7px; background:var(--pink); color:#1a1024;
  font-weight:bold; font-size:10px; border-radius:50%; width:18px; height:18px;
  display:none; align-items:center; justify-content:center;
  box-shadow:0 0 10px rgba(255,105,180,.9); animation:pulse 1.6s infinite;
}
#trayBtn .badge.show{display:flex;}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
#optsBtn{
  background:#1c1b33; border:1px solid #45406e; color:#cfc9ea; border-radius:6px;
  padding:6px 10px; font-size:13px; line-height:1; cursor:pointer; transition:.15s;
}
#optsBtn:hover{border-color:var(--pink); color:#fff;}

/* admin gold-desk bar */
#adminBar{
  grid-area:top; display:none; position:relative; top:calc(100% + 4px);
}
#app.admin #topbar{border-color:var(--gold);}
#goldDesk{
  display:none; align-items:center; gap:10px; background:#2a2312; border:1px solid #6b5a1f;
  border-radius:6px; padding:5px 10px; font-size:10px; color:var(--gold); letter-spacing:.14em;
}
#goldDesk.show{display:flex;}
#goldDesk button{
  background:#1c1b33; border:1px solid #6b5a1f; color:var(--gold); border-radius:4px;
  padding:4px 8px; font-size:10px; letter-spacing:.1em; cursor:pointer;
}
#goldDesk button.on{background:var(--gold); color:#2a2312; font-weight:bold;}

/* ---------------- evidence lockers (pack rail) ---------------- */
#lockers{grid-area:lockers; display:flex; flex-direction:column; min-height:0;
  background:#16142a; border:1px solid #3c3a6b; border-radius:8px; padding:8px;}
/* a11y (kept): shelf micro-labels on --trim-ink, not #8b87ad — see :root */
#lockers h6{font-size:9px; color:var(--trim-ink); letter-spacing:.24em; text-align:center; margin:2px 0 8px;}
#lockerList{flex:1; overflow-y:auto; min-height:0; display:flex; flex-direction:column; gap:8px;
  scrollbar-width:thin; scrollbar-color:#45406e transparent;}
.lockerHint{color:var(--trim-ink); font-size:10px; letter-spacing:.12em; text-align:center; padding:12px 4px;}
/* ---- lockers collapse toggle ---- */
#lockersToggle{
  flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:6px;
  background:#211f3e; border:1px solid #45406e; color:var(--trim-ink); border-radius:6px;
  padding:4px; margin-bottom:8px; cursor:pointer; font-family:var(--mono); font-size:10px;
  letter-spacing:.16em; transition:.15s;
}
#lockersToggle:hover{border-color:var(--pink-dim); color:#cfc9ea;}
#lockersToggle .ltChev{font-size:11px; line-height:1; transition:transform .2s;}
#lockersToggle .ltCap{display:none;}
/* desktop collapsed: the toggle IS the rail — whole thing clickable, vertical label */
#app.lockersMin #lockers{padding:6px 2px; overflow:hidden;}
#app.lockersMin #lockers h6,
#app.lockersMin #lockerList{display:none;}
#app.lockersMin #lockersToggle{
  flex:1 1 auto; flex-direction:column; gap:12px; margin-bottom:0; padding:10px 2px; height:100%;
}
#app.lockersMin #lockersToggle .ltChev{transform:rotate(180deg);}
#app.lockersMin #lockersToggle .ltCap{
  display:block; writing-mode:vertical-rl; text-orientation:mixed;
  letter-spacing:.24em; font-size:9px; color:var(--trim-ink);
}

/* guide column: RULES panel (desktop); SHIFT ORDERS clipboard now lives in #ordersCol */
#guideCol{grid-area:guide; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:10px;
  scrollbar-width:thin; scrollbar-color:#45406e transparent;}
/* orders column: SHIFT ORDERS clipboard, own track to the right of the rack (wide desktop) */
#ordersCol{grid-area:orders; min-height:0; overflow-y:auto; padding-top:9px;
  scrollbar-width:thin; scrollbar-color:#45406e transparent;}
#fieldGuide{flex:0 0 auto;
  background:#16142a; border:1px solid #3c3a6b; border-radius:8px; padding:14px 12px;}
#fieldGuide h6{font-size:12px; color:var(--pink,#ff69b4); letter-spacing:.26em; text-align:center;
  margin:2px 0 12px; border-bottom:1px dashed #3c3a6b; padding-bottom:8px;}
#fieldGuide h6 + .fgRule, #fieldGuide h6 + .fgLine{margin-top:0;}
#fieldGuide h6:not(:first-child){margin-top:18px;}
.fgLine{color:#aca7c9; font-size:11px; letter-spacing:.05em; line-height:1.55; margin:0 0 7px;
  font-family:var(--mono);}
.fgLine kbd{display:inline-block; background:#211f3e; border:1px solid #45406e; border-bottom-width:2px;
  border-radius:3px; padding:1px 5px; font-size:10px; color:#fff; font-family:var(--mono);
  letter-spacing:.08em; margin-right:3px;}
.fgRule{color:#e3d3ec; font-size:12.5px; font-weight:bold; letter-spacing:.04em; line-height:1.6;
  margin:0 0 11px; font-family:var(--mono);}
.fgRule::before{content:'§ '; color:var(--pink,#ff69b4);}
.locker{
  position:relative; background:linear-gradient(180deg,#2b2950,#211f3e);
  border:1px solid #45406e; border-radius:8px; padding:10px 8px 8px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:6px; transition:.15s;
  color:#cfc9ea; font-family:var(--mono); text-align:center; flex:0 0 auto; width:100%;
}
.locker:hover{border-color:var(--pink-dim);}
.locker.sel{border-color:var(--pink); box-shadow:0 0 16px -5px var(--pink), inset 0 0 12px -8px var(--pink); color:#fff;}
/* manila folder stack, drawn in CSS */
.folder{position:relative; width:52px; height:38px; flex:0 0 auto;}
.folder::before{content:""; position:absolute; left:0; top:6px; width:22px; height:8px;
  background:var(--paper-dark); border-radius:3px 3px 0 0;}
.folder::after{content:""; position:absolute; inset:10px 0 0 0;
  background:linear-gradient(160deg,var(--paper),var(--paper-dark)); border-radius:3px;
  box-shadow:0 2px 5px rgba(0,0,0,.45);}
.folder .sheets{position:absolute; left:5px; right:5px; top:5px; height:8px; z-index:1;}
.folder .sheets::before,.folder .sheets::after{content:""; position:absolute; left:2px; right:2px;
  height:4px; background:#f4ecd8; border:1px solid #c9bc9c; border-bottom:0;}
.folder .sheets::before{top:1px; transform:rotate(-1.5deg);}
.folder .sheets::after{top:3px; left:5px; right:0; transform:rotate(1deg);}
.locker .lname{font-size:9.5px; letter-spacing:.08em; line-height:1.35; max-width:100%;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.locker .lstat{font-size:8px; letter-spacing:.14em; color:var(--trim-ink);}
.locker.sel .lstat{color:var(--pink);}
/* not installed = ghost locker.
   a11y (kept): DESATURATED, not dimmed to the point of illegibility — it still
   has to be readable to be requisitioned. The blanket opacity:.62 that used to
   sit here composited the label down to 2.4:1 against the room; the dashed
   border and the NOT ON THE SHELF stamp already say "not here" on their own. */
.locker.ghost{border-style:dashed; filter:saturate(.35);}
.locker.ghost .lstat{color:#bb9053;}   /* 4.71:1 on the ghost card */
.locker.ghost::after{
  /* The only user-facing string outside story.js: ::before/::after content
     cannot be sourced from the copy tables. Keep it in step with UI_COPY.chests. */
  content:"NOT ON THE SHELF"; position:absolute; top:16px; left:50%; z-index:2;
  transform:translateX(-50%) rotate(-7deg); font-size:9.5px; font-weight:bold; letter-spacing:.14em;
  color:#ff8080; border:2px solid #ff8080; padding:3px 7px; background:rgba(18,16,31,.94);
  border-radius:3px; white-space:nowrap; box-shadow:0 1px 6px rgba(0,0,0,.55);
}
.locker .loadTag{font-size:8px; letter-spacing:.2em; color:#12101f; background:var(--pink);
  border-radius:3px; padding:2px 8px; font-weight:bold; opacity:0; transition:.15s;}
.locker:hover .loadTag,.locker.sel .loadTag{opacity:1;}
.locker.sel .loadTag{background:var(--clean);}
.locker.ghost .loadTag{background:var(--gold); opacity:1;}

/* ---------------- drop surface ---------------- */
#dropZone{position:fixed; inset:0; z-index:95; display:none; align-items:center; justify-content:center;
  background:rgba(10,9,22,.82); backdrop-filter:blur(3px);
  border:3px dashed var(--pink); outline:6px solid rgba(255,105,180,.12); outline-offset:-14px;}
#dropZone.show{display:flex;}
#dropZone *{pointer-events:none;}
.dropCard{text-align:center; color:#fff; display:flex; flex-direction:column; gap:8px; align-items:center;}
.dropCard .dropIcon{font-size:52px; filter:drop-shadow(0 0 18px rgba(255,105,180,.8)); animation:pulse 1.2s infinite;}
.dropCard b{letter-spacing:.3em; font-size:16px; color:var(--pink); text-shadow:0 0 12px rgba(255,105,180,.7);}
.dropCard span{font-size:11px; color:var(--trim-ink); letter-spacing:.14em;}

/* secondary gate button */
.gate button.ghost{background:transparent; color:var(--ink); border:1px solid #9a8f74; margin-left:8px;}

/* ---------------- booth settings (options) ---------------- */
#gateOpts{z-index:88;}
#gateOpts .card{max-width:min(92vw,440px); width:100%; max-height:86vh; overflow-y:auto;
  text-align:left; scrollbar-width:thin;}
#gateOpts h2{text-align:center;}
.optSec{margin:16px 0 6px; font-size:9px; letter-spacing:.26em; color:#8a2f4f;
  border-bottom:1px dashed #9a8f74; padding-bottom:4px;}
.optRow{display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.08em; padding:6px 0;}
.optRow label{flex:1;}
.optRow input[type=range]{flex:2; min-width:0; accent-color:#b34b82;}
.optRow input[type=checkbox]{width:16px; height:16px; accent-color:#b34b82;}
.optVal{min-width:28px; text-align:right; color:#5c5443; font-size:10px;}
.keyRow{display:flex; align-items:center; gap:10px; padding:6px 4px; font-size:11px;
  letter-spacing:.08em; cursor:pointer; border-bottom:1px dotted rgba(154,143,116,.4);}
.keyRow:hover{background:rgba(154,143,116,.15);}
.keyRow span.klabel{flex:1; pointer-events:none;}
.keyRow .kbd{background:var(--ink); color:var(--paper); padding:3px 10px; border-radius:3px;
  font-size:10px; letter-spacing:.12em; min-width:96px; text-align:center; pointer-events:none;}
.keyRow.arm .kbd{background:#8a2f4f; animation:blink 1s steps(1) infinite;}
.keyRow.deny .kbd{background:#c95b5b;}
.optBtns{display:flex; justify-content:center; gap:8px; margin-top:6px;}

/* ---------------- desk / dossier ---------------- */
#desk{grid-area:desk; position:relative; display:flex; align-items:center; justify-content:center; min-height:0; min-width:0; perspective:900px;}
#dossier{
  position:relative; width:min(100%,640px); min-width:0; height:100%; max-height:640px;
  background:linear-gradient(160deg,var(--paper) 0%,var(--paper-dark) 100%);
  border-radius:4px; padding:12px 14px 14px;
  box-shadow:0 14px 40px rgba(0,0,0,.65), inset 0 0 60px rgba(120,90,40,.12);
  display:flex; flex-direction:column; gap:8px; color:var(--ink);
  transition:transform .35s cubic-bezier(.5,-.2,.7,.3), opacity .35s;
}
#dossier.out{transform:translateX(120%) rotate(9deg); opacity:0;}
#dossier.in{transition:none; transform:translateX(-120%) rotate(-7deg); opacity:0;}
#dossier::before,#dossier::after{
  content:""; position:absolute; width:74px; height:22px;
  background:rgba(255,248,222,.5); box-shadow:0 1px 3px rgba(0,0,0,.25);
}
#dossier::before{top:-8px; left:26px; transform:rotate(-5deg);}
#dossier::after{top:-8px; right:26px; transform:rotate(6deg);}
.coffee{position:absolute; bottom:14px; right:20px; width:58px; height:58px; border-radius:50%;
  border:7px solid rgba(93,58,20,.14); pointer-events:none;
  -webkit-mask:radial-gradient(circle at 30% 20%, transparent 28%, #000 30%);}
#caseHead{display:flex; align-items:baseline; gap:10px; border-bottom:2px solid rgba(44,42,51,.5); padding-bottom:5px;}
#caseHead b{font-size:clamp(12px,2.2vw,16px); letter-spacing:.14em; white-space:nowrap;}
#caseHead small{color:#5c5443; font-size:10px; letter-spacing:.1em;}
#caseHead .stampedTag{margin-left:auto; font-size:9px; color:#8a2f4f; border:1px solid #8a2f4f;
  padding:2px 6px; letter-spacing:.2em; transform:rotate(-3deg); opacity:.75; white-space:nowrap;}
#caseHead .stampedTag.goldTag{color:#6b5a1f; border-color:#6b5a1f;}

/* light-table */
#scanRow{flex:1; min-height:0; display:flex; gap:6px;}
#zoomRail{flex:0 0 auto; width:34px; display:flex; flex-direction:column; align-items:center;
  gap:8px; padding:2px 0;}
#lensBtn{width:30px; height:30px; border-radius:6px; background:#211f3e; border:1px solid #45406e;
  color:#cfc9ea; cursor:pointer; font-size:14px; line-height:1; padding:0;}
#lensBtn.on{background:var(--pink); border-color:var(--pink); color:#12101f;
  box-shadow:0 0 10px -2px var(--pink);}
#zoomSlider{flex:1; min-height:0; writing-mode:vertical-lr; direction:rtl; width:26px;
  accent-color:var(--pink); cursor:pointer;}
#zoomVal{font-size:9px; color:#5c5443; font-family:var(--mono); letter-spacing:.06em;}
#scanWrap{flex:1; min-height:0; position:relative; border:3px solid #3a3548; border-radius:3px;
  background:#0e0d1a; overflow:hidden; cursor:crosshair; touch-action:none;}
#scanWrap.lens{cursor:zoom-in;}
#zoomFrame{position:absolute; inset:0; transform-origin:0 0; will-change:transform;}
#scanImg{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  max-width:100%; max-height:100%; pointer-events:none; image-rendering:auto;}
#loupe{position:absolute; width:180px; height:180px; border-radius:50%; overflow:hidden;
  border:3px solid var(--pink); background:#0e0d1a; display:none; pointer-events:none; z-index:6;
  box-shadow:0 6px 22px rgba(0,0,0,.65), 0 0 14px -4px var(--pink);}
#loupe.show{display:block;}
#loupe canvas{width:100%; height:100%; display:block;}
#scanFx{position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(0deg, rgba(255,105,180,.045) 0 2px, transparent 2px 4px);}
#beam{position:absolute; left:0; right:0; height:26%; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,105,180,.10),transparent);
  animation:sweep 5.5s linear infinite;}
@keyframes sweep{0%{top:-30%}100%{top:110%}}
/* the box layer matches the displayed image rect, not the whole light-table */
#boxLayer{position:absolute;}

/* seals
   a11y (kept): c0..c3 are a LEARNED LABEL ENCODING, and a seal sits on
   arbitrary user content, not on the page skin - so the skin revert does not
   make its contrast problem go away. Every seal keeps the DOUBLE RING it
   gained: a pearl hairline inside a dark halo, which guarantees an edge
   against a light or a dark neighbour alike. box-shadow ONLY, because
   box-shadow paints outside the border box and therefore cannot move the
   labelling rect - wire coordinates stay byte-identical. */
.seal{position:absolute; border:2px solid; border-radius:2px; cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,255,255,.85), 0 0 0 2.5px rgba(12,8,20,.72),
             0 0 14px -2px currentColor, inset 0 0 0 1px rgba(255,255,255,.5),
             inset 0 0 20px -6px currentColor;
  animation:sealIn .18s ease-out;}
/* live censor field: pixelated resample of the evidence under the seal */
.seal .px{position:absolute; inset:0; width:100%; height:100%; display:block;
  pointer-events:none; image-rendering:pixelated;}
@keyframes sealIn{from{transform:scale(1.15); opacity:0}}
/* the class tag is the one place a class colour is a FILL, and it always
   carries near-black ink. a11y (kept): dark hairline so the chip holds an
   edge over a bright frame. */
.seal .tag{position:absolute; top:-16px; left:-2px; font-size:9px; letter-spacing:.12em;
  background:currentColor; padding:1px 6px; border-radius:2px 2px 0 0; white-space:nowrap; pointer-events:none;
  box-shadow:0 0 0 1px rgba(12,8,20,.6);}
.seal .tag i{color:#12101f; font-style:normal; font-weight:bold;}
.seal .x{position:absolute; right:-11px; top:-11px; width:22px; height:22px; border-radius:50%;
  background:#12101f; color:#fff; border:1px solid currentColor; font-size:11px; line-height:20px;
  text-align:center; cursor:pointer; box-shadow:0 0 0 1px rgba(255,255,255,.55);}
/* corner drag-handles (fat-finger friendly) */
.seal .h{position:absolute; width:22px; height:22px; margin:-11px; border-radius:50%;}
.seal .h::after{content:""; position:absolute; inset:6px; border-radius:50%;
  background:currentColor; box-shadow:0 0 6px currentColor;}
.seal .h.nw{left:0; top:0; cursor:nwse-resize;}
.seal .h.ne{right:0; top:0; margin-right:-11px; cursor:nesw-resize;}
.seal .h.sw{left:0; bottom:0; margin-bottom:-11px; cursor:nesw-resize;}
.seal .h.se{right:0; bottom:0; margin-right:-11px; margin-bottom:-11px; cursor:nwse-resize;}

#rubber{position:absolute; inset:0; display:none; align-items:center; justify-content:center; pointer-events:none; z-index:5;}
/* the verdict slam is a rubber stamp again (the lipstick kiss went with the
   pastel skin), but a11y (kept): it is SIZED TO FIT. The verdict words are
   long ("FILED WITH LOVE", "NOTHING TO KEEP") and #scanWrap clips, so the old
   40px/.25em ran off both edges of the frame. clamp(13px,2.4vw,28px)/.16em
   fits every shipped verdict at 1400px and at phone widths alike. */
#rubber div{
  border:5px solid; border-radius:6px; padding:8px 26px; font-size:clamp(13px,2.4vw,28px);
  font-weight:bold; letter-spacing:.16em; transform:rotate(-14deg) scale(3); opacity:0; white-space:nowrap;
}
#rubber.go{display:flex;}
#rubber.go div{animation:slam .38s cubic-bezier(.2,1.4,.4,1) forwards;}
@keyframes slam{60%{transform:rotate(-14deg) scale(.92); opacity:1}
  100%{transform:rotate(-14deg) scale(1); opacity:1}}

#hint{font-size:10px; color:#5c5443; letter-spacing:.08em; text-align:center; min-height:13px;}

/* ---------------- stamp rack ---------------- */
#rack{grid-area:rack; display:flex; flex-direction:column; gap:8px; min-height:0;}
#rack h6{font-size:9px; color:var(--trim-ink); letter-spacing:.24em; text-align:center; margin:2px 0;}
.stamp{
  flex:1; min-height:44px; display:flex; align-items:center; gap:9px; padding:6px 10px;
  background:linear-gradient(180deg,#2b2950,#211f3e);
  border:1px solid #45406e; border-radius:8px; cursor:pointer; color:#cfc9ea;
  font-size:11px; letter-spacing:.06em; transition:.13s;
  box-shadow:0 3px 0 #14132a; text-align:left;
}
.stamp:active{transform:translateY(2px); box-shadow:0 1px 0 #14132a;}
/* the pad. a11y (kept): the class colour never floats free - it sits in a
   near-black well ringed in pearl, so c0..c3 stay separable from each other
   and from whatever the rack is painted on. Rings are box-shadow only, so the
   swatch geometry the player learns to aim at is unchanged.
   Measured on the pad: c3 (#4ecfe0) reads 9.91:1 (it was 1.27:1 unpadded on
   the pastel wall, which is what this fix was originally for). */
.stamp .dot{width:17px; height:17px; border-radius:3px; flex:0 0 auto;
  background:var(--sc);   /* flat fallback first: an engine that drops the
                             color-mix line below must still show the class colour */
  background:radial-gradient(120% 120% at 30% 25%, var(--sc), color-mix(in srgb, var(--sc) 72%, #120a18));
  box-shadow:0 0 0 2px #17121F, 0 0 0 3px rgba(255,255,255,.85), 0 0 9px -1px var(--sc);}
.stamp.sel{border-color:var(--sc); color:#fff; background:linear-gradient(180deg,#343060,#262347);
  box-shadow:0 3px 0 #14132a, 0 0 16px -4px var(--sc), inset 0 0 12px -6px var(--sc);}
.stamp small{display:block; color:var(--trim-ink); font-size:8px; letter-spacing:.14em;}
#fileBtn{
  min-height:64px; border-radius:10px; border:2px solid var(--pink);
  background:radial-gradient(120% 160% at 50% 0%, #ff8ac6 0%, var(--pink) 40%, #c2337f 100%);
  color:#2a0a1c; font-weight:bold; font-size:14px;
  letter-spacing:.2em; cursor:pointer; box-shadow:0 5px 0 #7c1f52, 0 0 26px -4px var(--pink);
  transition:.12s;
}
#fileBtn:active{transform:translateY(4px); box-shadow:0 1px 0 #7c1f52;}
#fileBtn:disabled{filter:grayscale(.7) brightness(.7); cursor:default;}
#fileBtn small{display:block; font-weight:normal; font-size:9px; letter-spacing:.14em; opacity:.75;}
/* zero seals = the FILE button becomes the clean ruling */
#fileBtn.clean{border-color:var(--clean);
  background:radial-gradient(120% 160% at 50% 0%, #a8f0c6 0%, var(--clean) 40%, #2f9c5f 100%);
  box-shadow:0 5px 0 #1c5c38, 0 0 26px -4px var(--clean); color:#0c2b1a; font-size:12px;}
#fileBtn.clean:active{box-shadow:0 1px 0 #1c5c38;}
#app.admin #fileBtn{border-color:var(--gold);
  background:radial-gradient(120% 160% at 50% 0%, #ffe08a 0%, var(--gold) 40%, #b8860b 100%);
  box-shadow:0 5px 0 #6b5a1f, 0 0 26px -4px var(--gold); color:#2a2312;}
/* recall / amend — clearly secondary to FILE IT */
#rewindBtn{display:none; flex:0 0 auto; min-height:26px; padding:5px 6px;
  background:#1c1b33; border:1px dashed #45406e; color:var(--trim-ink); border-radius:6px;
  font-size:9px; letter-spacing:.14em; cursor:pointer; transition:.15s;}
#rewindBtn.show{display:block;}
#rewindBtn:hover{border-color:var(--pink-dim); color:#cfc9ea;}
#rewindBtn.amending{border-style:solid; border-color:var(--gold); color:var(--gold);}

/* ---------------- ticker ---------------- */
#ticker{grid-area:ticker; overflow:hidden; background:#0e0d1a; border:1px solid #3c3a6b;
  border-radius:6px; padding:6px 0; white-space:nowrap;}
#ticker span{display:inline-block; padding-left:100%; animation:crawl 26s linear infinite;
  color:var(--pink); font-size:11px; letter-spacing:.18em; text-shadow:0 0 8px rgba(255,105,180,.5);}
@keyframes crawl{to{transform:translateX(-100%)}}

/* ---------------- commendation ticket ---------------- */
#commend{position:fixed; inset:0; z-index:80; display:none; align-items:flex-start; justify-content:center;
  background:rgba(10,9,22,.72); backdrop-filter:blur(2px);}
#commend.go{display:flex;}
#ticket{
  margin-top:9vh; width:min(88vw,360px); background:var(--paper); color:var(--ink);
  padding:18px 20px 26px; position:relative; text-align:center;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),96% 100%,92% calc(100% - 8px),88% 100%,84% calc(100% - 8px),80% 100%,76% calc(100% - 8px),72% 100%,68% calc(100% - 8px),64% 100%,60% calc(100% - 8px),56% 100%,52% calc(100% - 8px),48% 100%,44% calc(100% - 8px),40% 100%,36% calc(100% - 8px),32% 100%,28% calc(100% - 8px),24% 100%,20% calc(100% - 8px),16% 100%,12% calc(100% - 8px),8% 100%,4% calc(100% - 8px),0 100%);
  box-shadow:0 20px 50px rgba(0,0,0,.7);
  animation:printout .55s cubic-bezier(.2,1.2,.4,1);
}
@keyframes printout{from{transform:translateY(-115%);}to{transform:translateY(0);}}
/* dismissal: snatched off the printer and pinned up (~200ms, matches TICKET_OUT_MS) */
#ticket.out{animation:ticketpin .2s cubic-bezier(.4,0,.6,1) forwards;}
@keyframes ticketpin{from{transform:translateY(0) scale(1); opacity:1;} to{transform:translateY(-18%) scale(.9); opacity:0;}}
#ticket h3{letter-spacing:.3em; font-size:12px; border-bottom:1px dashed #9a8f74; padding-bottom:8px; margin-bottom:10px;}
#ticket .grade{font-size:74px; font-weight:bold; color:#b3236b; line-height:1;
  text-shadow:2px 2px 0 rgba(179,35,107,.25); animation:gradepop .5s .25s cubic-bezier(.2,2,.4,1) backwards;}
#ticket .grade.gC{color:#5c5443; text-shadow:2px 2px 0 rgba(92,84,67,.25);}
@keyframes gradepop{from{transform:scale(2.6) rotate(10deg); opacity:0}}
#ticket .row{font-size:11px; letter-spacing:.14em; margin-top:8px; color:#5c5443;}
#ticket .xp{font-size:15px; color:#8a5a00; font-weight:bold; letter-spacing:.2em; margin-top:6px;}
#ticket button{margin-top:14px; font-size:11px; letter-spacing:.16em;
  background:var(--ink); color:var(--paper); border:0; padding:8px 18px; cursor:pointer; border-radius:3px;}

/* ---------------- mail tray drawer ---------------- */
#drawer{position:fixed; top:0; right:0; bottom:0; z-index:85; width:min(92vw,340px);
  background:linear-gradient(180deg,#2b2950,#1a1a2e); border-left:2px solid var(--pink);
  box-shadow:-18px 0 50px rgba(0,0,0,.6); transform:translateX(105%); transition:transform .3s cubic-bezier(.2,1,.3,1);
  display:flex; flex-direction:column; padding:16px;}
#drawer.open{transform:none;}
#drawer h4{color:var(--pink); letter-spacing:.22em; font-size:12px; margin-bottom:4px;}
#drawer p.sub{color:var(--trim-ink); font-size:10px; letter-spacing:.1em; margin-bottom:12px;}
#slips{flex:1; overflow-y:auto; min-height:0;}
.slip{background:var(--paper); color:var(--ink); padding:10px 12px; margin-bottom:10px;
  font-size:11px; line-height:1.5; border-radius:2px; box-shadow:0 3px 10px rgba(0,0,0,.4);
  transform:rotate(-.6deg); animation:slipIn .35s backwards;}
.slip:nth-child(even){transform:rotate(.8deg);}
.slip b{color:#b3236b;}
.slip .r{color:#1c7a45; font-weight:bold; letter-spacing:.12em;}
.slip.empty{color:#5c5443; text-align:center; letter-spacing:.14em;}
@keyframes slipIn{from{transform:translateY(14px); opacity:0}}
#trayTotal{margin-top:10px; min-height:46px; background:var(--clean); border:0; border-radius:8px;
  font-weight:bold; letter-spacing:.18em; font-size:12px; color:#0c2b1a;
  display:flex; align-items:center; justify-content:center;}
#closeDrawer{position:absolute; top:10px; right:12px; background:none; border:0; color:var(--trim-ink);
  font-size:18px; cursor:pointer;}

/* ---------------- SHIFT ORDERS drawer (phone; mirror of the mail tray) ----------------
   Base is display:none for the tab; the phone media query flips #ordersTab.on to flex,
   so this whole feature is invisible on desktop where the #ordersCol clipboard is used. */
#ordersTab{
  display:none; position:fixed; left:0; top:40%; z-index:84;
  flex-direction:column; align-items:center; justify-content:center; gap:9px;
  width:32px; min-height:120px; padding:12px 3px; border:0; cursor:pointer;
  /* edge of the manila clipboard poking out of the booth wall */
  background:linear-gradient(120deg,var(--paper),var(--paper-dark));
  border-radius:0 9px 9px 0; box-shadow:5px 4px 16px rgba(0,0,0,.6);
  color:#8a2f4f; font-family:var(--mono);
}
#ordersTab .otLabel{writing-mode:vertical-rl; letter-spacing:.28em; font-size:11px; font-weight:bold;}
#ordersTab .otTally{writing-mode:horizontal-tb; background:var(--ink); color:var(--paper);
  font-size:9px; letter-spacing:.05em; padding:2px 5px; border-radius:3px;}
/* daily order fulfilled: go green like #questChip.done */
#ordersTab.done{color:#0c2b1a;}
#ordersTab.done .otTally{background:#1c7a45; color:#eafff1;}

#ordersDrawer{position:fixed; top:0; left:0; bottom:0; z-index:84; width:min(88vw,340px);
  background:linear-gradient(180deg,#2b2950,#1a1a2e); border-right:2px solid var(--pink);
  box-shadow:18px 0 50px rgba(0,0,0,.6); transform:translateX(-105%); transition:transform .3s cubic-bezier(.2,1,.3,1);
  display:flex; flex-direction:column; padding:16px;}
#ordersDrawer.open{transform:none;}
#ordersDrawerClose{position:absolute; top:10px; right:12px; background:none; border:0; color:var(--trim-ink);
  font-size:18px; cursor:pointer; z-index:3;}
/* manila clipboard face inside the drawer — same visual language as #clipboard */
#ordersClipboard{flex:1; min-height:0; display:flex; flex-direction:column; position:relative; margin-top:10px;
  background:linear-gradient(172deg,#efe7d2 0%,#e3d8bb 100%); color:var(--ink);
  border-radius:6px 6px 5px 5px; padding:22px 13px 14px;
  box-shadow:0 8px 22px rgba(0,0,0,.5), inset 0 0 40px rgba(120,90,40,.10);}
#ordersClipboard .clipClip{position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:78px; height:18px; border-radius:5px;
  background:linear-gradient(180deg,#c9c9d2,#8a8a97 60%,#5f5f6b);
  box-shadow:0 2px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.5); z-index:2;}
#ordersClipboard .clipClip::after{content:""; position:absolute; left:50%; top:5px; transform:translateX(-50%);
  width:30px; height:7px; border-radius:4px; background:#3a3a44; box-shadow:inset 0 1px 2px rgba(0,0,0,.6);}
#ordersDrawerBody{flex:1; min-height:0; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:#8a8a97 transparent;}
#ordersDrawerBody::-webkit-scrollbar{width:6px;}
#ordersDrawerBody::-webkit-scrollbar-thumb{background:#8a8a97; border-radius:3px;}

/* ---------------- demo banner ---------------- */
#demoBanner{
  position:fixed; left:50%; bottom:52px; transform:translateX(-50%) rotate(-1deg);
  z-index:60; display:none; background:var(--paper); color:var(--ink);
  padding:8px 16px; font-size:10px; letter-spacing:.14em; box-shadow:0 6px 20px rgba(0,0,0,.5);
  text-align:center; line-height:1.6;
}
#demoBanner.show{display:block;}
#demoBanner b{color:#8a2f4f;}
#demoBanner a{color:#8a2f4f;}

/* ============================================================
   QUESTS — SHIFT ORDERS clipboard, quota pips, raid bar, memos
   Manila carbon-paper work orders under the pink CRT.
   ============================================================ */

/* ---- mobile daily-progress chip (top band; desktop uses the clipboard) ---- */
#questChip{display:none; align-items:center; gap:6px; background:#1c1b33; border:1px solid #45406e;
  color:#e9dfc6; border-radius:6px; padding:6px 10px; font-size:11px; letter-spacing:.08em;
  cursor:pointer; white-space:nowrap; font-family:var(--mono);}
#questChip .qcIcon{color:var(--pink); font-size:12px;}
#questChip.done{border-color:var(--clean); color:var(--clean); background:#12241a;}
#questChip.done .qcIcon{color:var(--clean);}

/* ---- the clipboard (shared render target: desktop panel + mobile gate) ---- */
#clipboard{flex:0 0 auto; display:none; position:relative;
  background:linear-gradient(172deg,#efe7d2 0%,#e3d8bb 100%); color:var(--ink);
  border-radius:6px 6px 5px 5px; padding:20px 13px 14px; margin-top:2px;
  box-shadow:0 8px 22px rgba(0,0,0,.5), inset 0 0 40px rgba(120,90,40,.10);}
#clipboard.on{display:block;}
/* the metal spring clip at the top of the board */
#clipboard .clipClip{position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  width:78px; height:18px; border-radius:5px;
  background:linear-gradient(180deg,#c9c9d2,#8a8a97 60%,#5f5f6b);
  box-shadow:0 2px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.5); z-index:2;}
#clipboard .clipClip::after{content:""; position:absolute; left:50%; top:5px; transform:translateX(-50%);
  width:30px; height:7px; border-radius:4px; background:#3a3a44; box-shadow:inset 0 1px 2px rgba(0,0,0,.6);}

/* shared clipboard content (also used inside #gateQuests) */
.clipForm{font-family:var(--mono); position:relative;}
.clipHdr{display:flex; justify-content:space-between; align-items:baseline; gap:8px;
  font-size:9px; letter-spacing:.18em; color:#8a2f4f; border-bottom:2px solid rgba(44,42,51,.4);
  padding-bottom:6px; margin-bottom:10px; flex-wrap:wrap;}
.clipHdr .clipTimer{color:#5c5443; letter-spacing:.1em; font-size:8.5px;}
.clipSec{position:relative; padding:8px 0 10px; border-bottom:1px dashed rgba(120,90,40,.45);}
.clipSec:last-of-type{border-bottom:0;}
.clipSec h5{font-size:11px; letter-spacing:.22em; color:#3a2f1f; margin-bottom:6px; font-weight:bold;}
.clipTask{font-size:12px; letter-spacing:.1em; color:var(--ink); font-weight:bold;}
.clipNum{font-size:11px; letter-spacing:.14em; color:#5c5443; margin-top:3px;}
.clipNum.big{font-size:20px; color:#8a2f4f; letter-spacing:.1em; font-weight:bold; margin:2px 0 6px;}
.clipNumSm{color:#5c5443; font-size:10px;}
.clipLine{font-size:11px; letter-spacing:.1em; color:#5c5443; margin:2px 0;}
.clipLine b{color:#3a2f1f; font-size:12px;}

/* hand tally — pen strokes in groups of five (CSS only) */
.tally{display:flex; flex-wrap:wrap; gap:9px 12px; margin:8px 0 2px; align-items:flex-end; min-height:24px;}
.tg{position:relative; display:inline-flex; gap:3px; height:22px; padding-right:3px;}
.tm{width:2px; height:20px; background:rgba(44,42,51,.16); border-radius:1px; transform:rotate(2deg);}
.tm.on{background:#2b2333; box-shadow:0 0 1px rgba(0,0,0,.4);}
.tm.slash{position:absolute; left:-3px; top:9px; width:calc(100% + 4px); height:2px; transform:rotate(-24deg);
  transform-origin:center;}

/* stretch line + checkbox */
.clipStretch{display:flex; align-items:center; gap:7px; margin-top:9px; font-size:10px;
  letter-spacing:.08em; color:#5c5443; line-height:1.35;}
.clipStretch .chk{flex:0 0 auto; width:15px; height:15px; border:1.5px solid #8a7a52; border-radius:2px;
  display:flex; align-items:center; justify-content:center; font-size:12px; color:#1c7a45; background:#f4ecd8;}
.clipStretch .chk.on{border-color:#1c7a45; background:#dff0e2;}

/* FULFILLED rubber stamp on a completed section */
.clipSec .stampFx{position:absolute; right:2px; top:26px; transform:rotate(-13deg);
  border:3px solid #1c7a45; color:#1c7a45; font-size:15px; font-weight:bold; letter-spacing:.14em;
  padding:3px 10px; border-radius:4px; opacity:.82; pointer-events:none;
  box-shadow:inset 0 0 6px rgba(28,122,69,.25); text-shadow:0 0 1px rgba(28,122,69,.3);}
.clipSec.fulfilled h5{color:#1c7a45;}

/* weekly day-pips (Mon..Sun) */
.pips{display:flex; gap:5px; margin:2px 0 8px;}
.pip{flex:1; height:16px; border:1px solid #a2955f; border-radius:2px; background:#f4ecd8;
  display:flex; align-items:center; justify-content:center; font-size:8px; color:#a2955f; letter-spacing:0;}
.pip.on{background:#c2337f; border-color:#8a2f4f; color:#f4ecd8;}
.pips.met .pip.on{background:#1c7a45; border-color:#155c34;}
.pip.req{box-shadow:0 3px 0 -1px #8a2f4f;}
.pips.met .pip.req{box-shadow:0 3px 0 -1px #1c7a45;}
.clipReq{font-size:8.5px; letter-spacing:.12em; color:#8a7a52; margin:-4px 0 8px;}

/* raffle tickets */
.clipTickets{display:flex; align-items:center; gap:7px; font-size:10.5px; letter-spacing:.1em; color:#5c5443;}
.clipTickets b{color:#8a2f4f;}
.tkt{position:relative; display:inline-block; width:22px; height:13px; background:#e6c860;
  border:1px solid #9a7a1f; border-radius:2px;
  -webkit-mask:radial-gradient(circle at 0 50%, transparent 3px, #000 3.5px),
    radial-gradient(circle at 100% 50%, transparent 3px, #000 3.5px);
  -webkit-mask-composite:source-in; mask-composite:intersect;}
.tkt.spent{background:#cfc7b0; border-color:#a89f86;}

/* monthly ARCHIVE RELEASE approved line */
.clipStamp.approved{margin-top:8px; display:inline-block; transform:rotate(-2deg);
  border:2px solid #1c7a45; color:#1c7a45; font-size:9.5px; font-weight:bold; letter-spacing:.08em;
  padding:4px 8px; border-radius:3px; opacity:.9;}

/* streak footer row */
.clipStreak{display:flex; flex-direction:column; gap:1px; margin-top:10px; padding-top:9px;
  border-top:2px solid rgba(44,42,51,.4); font-size:11px; letter-spacing:.1em; color:#3a2f1f;}
.clipStreak b{color:#8a2f4f; font-size:13px;}
.clipStreak small{color:#5c5443; font-size:9px; letter-spacing:.12em;}

/* frozen — SUSPENDED PENDING REVIEW */
.clipForm.frozen .tally,.clipForm.frozen .pips,.clipForm.frozen .clipNum,
.clipForm.frozen .clipNum.big,.clipForm.frozen .clipLine b{filter:grayscale(1); opacity:.5;}
.clipForm .suspend{position:absolute; top:44%; left:50%; transform:translate(-50%,-50%) rotate(-15deg);
  border:4px solid #c0392b; color:#c0392b; font-size:16px; font-weight:bold; letter-spacing:.16em;
  padding:6px 14px; border-radius:5px; white-space:nowrap; pointer-events:none; z-index:3;
  background:rgba(244,236,216,.35); box-shadow:0 0 0 2px rgba(192,57,43,.2);}
.clipForm .suspendNote{margin-top:12px; font-size:9.5px; letter-spacing:.08em; color:#a03a2e;
  line-height:1.5; text-align:center;}

/* ---- SHIFT ORDERS inside the mobile gate ---- */
#gateQuests .card{max-width:min(94vw,420px); width:100%; max-height:88vh; overflow-y:auto;
  text-align:left; background:linear-gradient(172deg,#efe7d2,#e3d8bb); transform:none;
  scrollbar-width:thin;}
#gateQuests .card::before{display:none;}
.gateX{position:absolute; top:8px; right:10px; margin:0; background:none; border:0; color:#8a2f4f;
  font-size:16px; cursor:pointer; padding:2px 6px; letter-spacing:0; z-index:2;}
#gateQuestsBody .clipHdr{padding-right:30px;}   /* keep the timer clear of the ✕ */

/* ---- THE ARCHIVE raid bar (department gauge) ---- */
#raidBar{grid-area:raid; display:none; align-items:center; gap:14px;
  background:linear-gradient(180deg,#201d3c,#16142a); border:1px solid #3c3a6b; border-radius:8px;
  padding:8px 16px; box-shadow:0 3px 14px rgba(0,0,0,.45), inset 0 0 30px rgba(255,105,180,.05);}
#raidBar.on{display:flex;}
.raidLabel{flex:0 0 auto; line-height:1.1;}
.raidLabel b{display:block; color:var(--pink); letter-spacing:.22em; font-size:13px;
  text-shadow:0 0 10px rgba(255,105,180,.55);}
.raidLabel small{display:block; color:var(--trim-ink); letter-spacing:.16em; font-size:8px;}
.raidTrack{flex:1; position:relative; height:22px; min-width:0; border:2px solid #4a4570; border-radius:4px;
  background:#0e0d1a;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 2px, transparent 2px 4px);
  overflow:visible;}
.raidFill{height:100%; width:0%; border-radius:2px 0 0 2px;
  background:linear-gradient(90deg,#8a2f4f,#c2337f 60%,#ff69b4);
  box-shadow:0 0 14px -2px var(--pink), inset 0 0 12px -4px rgba(255,255,255,.4);
  transition:width 1.1s cubic-bezier(.3,.9,.3,1);
  /* chunky segmented look: hard notches cut through the fill */
  -webkit-mask:repeating-linear-gradient(90deg, #000 0 13px, transparent 13px 16px);
  mask:repeating-linear-gradient(90deg, #000 0 13px, transparent 13px 16px);}
.raidTicks{position:absolute; inset:0; pointer-events:none;}
.raidTick{position:absolute; top:-2px; bottom:-2px; transform:translateX(-50%);}
.raidTick i{position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);
  background:rgba(255,255,255,.22);}
.raidTick em{position:absolute; left:50%; top:100%; transform:translateX(-50%); margin-top:3px;
  font-style:normal; font-size:8px; color:var(--trim-ink); letter-spacing:.04em;}
/* the 100% label sits at the far edge — nudge it back inside the track */
.raidTick[data-m="100"] em{transform:translateX(-90%);}
.raidTick.crossed i{background:var(--gold); box-shadow:0 0 6px var(--gold);}
.raidTick.crossed em{color:var(--gold);}
.raidReadout{flex:0 0 auto; font-size:11px; letter-spacing:.1em; color:#cfc9ea; white-space:nowrap;}

/* ---- the Directrice's Notes overlay ---- */
#memo{position:fixed; inset:0; z-index:82; display:none; align-items:center; justify-content:center;
  background:rgba(10,9,22,.8); backdrop-filter:blur(3px);}
#memo.go{display:flex;}
.memoPaper{background:var(--paper); color:var(--ink); width:min(90vw,440px); padding:22px 26px 24px;
  position:relative; box-shadow:0 24px 60px rgba(0,0,0,.75); transform:rotate(-.4deg);
  border-left:5px solid #8a2f4f; animation:printout .5s cubic-bezier(.2,1.2,.4,1);}
.memoLetterhead{font-size:12px; letter-spacing:.2em; color:#8a2f4f; font-weight:bold;
  border-bottom:2px solid #8a2f4f; padding-bottom:8px; margin-bottom:10px;}
.memoLetterhead small{display:block; color:#5c5443; font-size:8.5px; letter-spacing:.16em;
  font-weight:normal; margin-top:3px;}
.memoSubject{font-size:11px; letter-spacing:.12em; color:#3a2f1f; font-weight:bold; margin-bottom:10px;}
.memoSubject::before{content:'RE: ';}
#memoBody{font-family:var(--mono); font-size:12px; line-height:1.75; color:#2c2a33; white-space:pre-wrap;
  min-height:120px; letter-spacing:.02em;}
#memoClose{margin-top:14px; background:var(--ink); color:var(--paper); border:0; padding:9px 20px;
  font-size:11px; letter-spacing:.16em; cursor:pointer; border-radius:3px; font-family:var(--mono);}

/* ---- quest + memo slips in the mail drawer ---- */
.slip.quest{background:#f2ead2; border-left:4px solid #8a2f4f; transform:rotate(.5deg);}
.slip.quest .qk{display:block; color:#8a2f4f; font-weight:bold; letter-spacing:.14em; font-size:9px;
  margin-bottom:3px;}
.slip.memo{background:#efe6cd; border-left:4px solid #b8860b; transform:rotate(-.5deg); cursor:pointer;}
.slip.memo .qk{display:block; color:#8a5a00; font-weight:bold; letter-spacing:.14em; font-size:9px;
  margin-bottom:3px;}
.slip.memo:hover{filter:brightness(1.03);}

/* ============================================================
   MOBILE / PORTRAIT — rack drops to a thumb row at the bottom
   ============================================================ */
@media (max-width:640px), (orientation:portrait) and (max-width:900px){
  #app{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto 1fr auto auto auto;
    grid-template-areas:"top" "lockers" "desk" "rack" "raid" "ticker";
    gap:8px; padding:8px;
  }
  /* top bar must wrap so its nowrap flex row can't force horizontal overflow */
  #topbar{flex-wrap:wrap; row-gap:8px; gap:10px; padding:7px 10px;}
  #titleblock{min-width:0; flex:1 1 auto;}
  #titleblock b{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  /* case head: drop the decorative stamp and let the ids wrap instead of overflow */
  #caseHead{flex-wrap:wrap;}
  #caseHead .stampedTag{display:none;}
  /* lockers become a horizontal shelf under the top bar */
  #lockers{flex-direction:row; align-items:center; padding:6px; gap:6px;}
  #lockers h6{display:none;}
  /* toggle is a slim chevron at the left of the shelf; reset the desktop vertical rail */
  #lockersToggle{flex:0 0 auto; flex-direction:row; align-self:stretch; height:auto;
    margin-bottom:0; padding:4px 8px;}
  #lockersToggle .ltChev{transform:rotate(90deg);}   /* points up = collapse the shelf */
  /* mobile collapsed: shelf becomes a slim one-line strip (rows are auto → height collapses) */
  #app.lockersMin #lockers{flex-direction:row; align-items:center; padding:4px 6px; overflow:hidden;}
  #app.lockersMin #lockerList{display:none;}
  #app.lockersMin #lockersToggle{flex:1 1 auto; flex-direction:row; justify-content:flex-start;
    gap:8px; height:auto; padding:4px 8px;}
  #app.lockersMin #lockersToggle .ltChev{transform:rotate(-90deg);}   /* points down = expand */
  #app.lockersMin #lockersToggle .ltCap{display:block; writing-mode:horizontal-tb;
    text-orientation:mixed; letter-spacing:.2em; font-size:10px;}
  #guideCol{display:none;}   /* no room on the phone shelf — clipboard lives in the left-edge drawer */
  /* SHIFT ORDERS retire the top-bar chip on phones in favour of the left-edge drawer.
     The ≤1100 block above sets #questChip.on{display:flex}; this block is LATER in the
     stylesheet at equal specificity (0,1,1), so its display:none wins the cascade for any
     viewport that matches both queries (all phone widths). The chip therefore survives
     only for 641–1100px LANDSCAPE windows, which never match this phone block. */
  #questChip.on{display:none;}
  #ordersTab.on{display:flex;}
  /* the department gauge stays visible during play, compacted */
  #raidBar{gap:8px; padding:6px 10px;}
  .raidLabel b{font-size:11px; letter-spacing:.14em;}
  .raidLabel small{display:none;}
  /* readout wraps to two short lines and yields its width to the track */
  .raidReadout{font-size:9px; letter-spacing:.04em; white-space:normal; text-align:right; max-width:120px;}
  /* ticks: keep all five 2px lines (they don't overlap), but hide the labels that
     clump into "1025 50 7500" at narrow widths — leave only 50 + 100 legible */
  .raidTick em{display:none;}
  .raidTick[data-m="50"] em,
  .raidTick[data-m="100"] em{display:block;}
  #lockerList{flex-direction:row; overflow-x:auto; overflow-y:hidden; gap:6px; padding-bottom:2px;}
  .locker{width:104px; padding:8px 6px 6px;}
  .folder{width:40px; height:30px;}
  .locker.ghost::after{top:10px;}
  #rank span{display:none;}
  #xpChip{display:none;}
  #shift{width:74px;}
  #rack{flex-direction:row; align-items:stretch; flex-wrap:wrap;}
  #rack h6{display:none;}
  .stamp{flex-direction:column; justify-content:center; gap:4px; padding:6px 4px; font-size:9px; text-align:center; min-height:58px;}
  .stamp small{display:none;}
  #fileBtn{flex:1.4; min-height:58px; font-size:12px;}
  #fileBtn.clean{font-size:10px;}
  #fileBtn small{display:none;}
  /* recall drops to a slim full-width strip under the thumb row */
  #rewindBtn.show{flex:1 1 100%; order:9; min-height:24px; padding:3px 6px;}
  #optsBtn{padding:6px 8px;}
  #dossier{max-height:none;}
  #demoBanner{bottom:110px; width:88vw;}
}

/* ============================================================
   STORYFRAME — clock-in ritual, end-of-shift ledger, morning post,
   handwritten notes. All user-facing copy lives in story.js (STORY);
   this section is chrome only. Font stacks are system cursive with
   web-safe fallbacks — no hosted webfont, so it renders offline in
   WebView2 and behind the same-origin CSP.
   ============================================================ */

/* ---- Feature 1: dated punch-card stamp over the shift card ---- */
#shift{position:relative;}
#punchStamp{position:absolute; top:-6px; right:-8px; z-index:4; display:none;
  flex-direction:column; align-items:center; padding:2px 8px; transform:rotate(-11deg);
  border:2px solid #1c7a45; border-radius:4px; color:#1c7a45; background:rgba(233,223,198,.92);
  box-shadow:0 1px 5px rgba(0,0,0,.4); pointer-events:none; text-align:center; white-space:nowrap;}
#punchStamp.go{display:flex; animation:punchSlam .4s cubic-bezier(.2,1.4,.4,1), punchFade .5s 2.1s forwards;}
#punchStamp b{font-size:12px; font-weight:bold; letter-spacing:.12em; line-height:1;}
#punchStamp small{font-size:7px; letter-spacing:.22em; margin-top:1px;}
@keyframes punchSlam{0%{transform:rotate(-11deg) scale(2.4); opacity:0}
  60%{transform:rotate(-11deg) scale(.94); opacity:1} 100%{transform:rotate(-11deg) scale(1); opacity:1}}
@keyframes punchFade{to{opacity:0}}

/* ---- Feature 2: clock-out affordance in the top band ---- */
#clockOutBtn{display:none; background:#2a2312; border:1px solid #6b5a1f; color:var(--gold);
  border-radius:6px; padding:6px 12px; font-size:11px; letter-spacing:.12em; cursor:pointer;
  font-family:var(--mono); white-space:nowrap; transition:.15s;}
#clockOutBtn.show{display:block;}
#clockOutBtn:hover{background:var(--gold); color:#2a2312;}

/* ---- Feature 1/4: briefing strip above the desk (clock-in + 'briefing' beats) ---- */
#briefingStrip{position:absolute; top:0; left:0; right:0; z-index:6; margin:0 auto;
  max-width:min(100%,640px); display:none; align-items:center; justify-content:space-between; gap:10px;
  background:linear-gradient(180deg,#f2ead0,#e2d6b4); color:#3a2f1f; border:1px solid #b7a678;
  border-radius:0 0 7px 7px; padding:7px 14px; font-size:11px; letter-spacing:.1em; font-weight:bold;
  box-shadow:0 6px 18px rgba(0,0,0,.45); cursor:pointer;
  transform:translateY(-120%); opacity:0;
  transition:transform .35s cubic-bezier(.2,1,.3,1), opacity .3s;}
#briefingStrip.show{display:flex; transform:none; opacity:1;}
#briefingStrip #briefingText{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#briefingStrip .briefDismiss{flex:0 0 auto; font-size:8px; letter-spacing:.16em; color:#8a7a52; font-weight:normal;}

/* ---- Feature 4b: reusable handwritten note component ---- */
.storyNote{position:relative; background:var(--note-paper,#f3ecd6); color:var(--note-ink,#2c2a33);
  transform:rotate(var(--note-tilt,-2deg)); padding:11px 13px 9px; border-radius:2px;
  box-shadow:0 4px 12px rgba(0,0,0,.35); font-size:14px; line-height:1.5; letter-spacing:.01em;
  font-family:"Segoe Print","Bradley Hand","Comic Sans MS",cursive;}
.storyNote::before{content:""; position:absolute; top:-7px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:52px; height:15px; background:rgba(255,248,222,.5); box-shadow:0 1px 2px rgba(0,0,0,.2);}
.storyNote .noteInk{display:block;}
.storyNote .noteSign{display:block; margin-top:6px; font-size:11px; opacity:.78; text-align:right;}
.storyNote .noteDoodle{position:absolute; top:-9px; right:9px; font-size:20px; transform:rotate(9deg);
  color:var(--note-ink,#2c2a33); opacity:.75;}
/* the three canonical hands (bible §6C) — typeface differs; ink/paper/tilt come from JS.
   Every human in this world is ink and only ink: no faces, no voices, no portraits. */
/* Miss Cherish, Floor Matron — bubbly, round, generous. The warmth of the building. */
.hand-cherish{font-family:"Comic Sans MS","Segoe Print","Bradley Hand",cursive; font-size:14.5px; letter-spacing:.015em;}
/* Maribel, Desk 12 — neat blue ballpoint, tidy and small, a little anxious. */
.hand-maribel{font-family:"Segoe Script","Lucida Handwriting","Bradley Hand",cursive; font-size:13px; letter-spacing:-.01em;}
/* The unsigned dissenter — cramped red pen on official stationery. Never signs. */
.hand-redpen{font-family:"Segoe Print","Bradley Hand",cursive; font-weight:bold; font-size:13px;
  letter-spacing:-.02em; line-height:1.35;}

/* note clipped to the dossier edge (story-beat attach point) */
#caseNote{position:absolute; right:-6px; bottom:58px; z-index:7; width:min(46%,220px); pointer-events:none;}
#caseNote .storyNote{pointer-events:auto; cursor:pointer; animation:noteClip .4s cubic-bezier(.2,1.3,.4,1);}
@keyframes noteClip{from{transform:rotate(var(--note-tilt,-2deg)) translateY(-16px) scale(.9); opacity:0;}}

/* post-waiting nudge note pinned near the mail tray (mail-tray attach point) */
#postWaiting{position:fixed; top:74px; right:16px; z-index:83; width:200px; display:none; cursor:pointer;}
#postWaiting.show{display:block; animation:noteClip .45s cubic-bezier(.2,1.3,.4,1);}

/* ---- Feature 2: end-of-shift ledger ---- */
#gateLedger .card{max-width:min(92vw,440px); width:100%; text-align:left;}
#gateLedger .ledgerHead{text-align:center; margin-bottom:4px;}
#gateLedger h2{text-align:center;}
.ledgerTbl{width:100%; border-collapse:collapse; margin:12px 0 4px; font-size:12px;}
.ledgerTbl td{padding:6px 4px; border-bottom:1px dashed #b7a678;}
.ledgerTbl .lgLabel{color:#5c5443; letter-spacing:.12em;}
.ledgerTbl .lgVal{text-align:right; font-weight:bold; color:#3a2f1f; letter-spacing:.08em;}
.ledgerTbl .lgSubRow td{padding-top:0;}
.ledgerTbl .lgSubRow .lgVal{font-weight:normal; color:#5c5443; font-size:10px;}
.ledgerPending{margin:10px 0 4px; padding:8px 10px; background:rgba(138,47,79,.08);
  border-left:3px solid #8a2f4f; color:#8a2f4f; font-size:10.5px; letter-spacing:.08em; font-weight:bold;}

/* ---- Feature 3: mail digest header slip ---- */
.slip.digest{background:#f6eecf; border-left:4px solid #1c7a45; transform:rotate(-.4deg);}
.slip.digest .qk{display:block; color:#1c7a45; font-weight:bold; letter-spacing:.14em; font-size:9px; margin-bottom:3px;}
.slip.digest .cosign{display:block; margin-top:5px; font-size:9px; letter-spacing:.05em; color:#5c5443; font-style:italic;}

/* ============================================================
   HONEY — the voice, rendered as type (bible §6A, §6B, §6D-bis).
   THE THIRD CHANNEL, AND IT MUST NEVER BE CONFUSED WITH THE OTHER TWO:
     humans = handwriting  (.storyNote / .hand-* — cursive, paper, tilted)
     forms  = starchy print (#memo, .gate, the mono UI — manila, boxy)
     HONEY  = THIS         — no paper, no mono, no tilt, no texture. A soft
              pastel plate of light with wide, unhurried, sentence-case type.
              She is a voice given a typeface; she never leaves handwriting
              and she never wears the Ministry's letterhead.
   Font stack is system-geometric with web-safe fallbacks — no hosted
   webfont, so it renders offline in WebView2 behind the same-origin CSP.
   Click-through by design (pointer-events:none): a caption may never take
   a click that belonged to the desk, a seal, or the FILE button.
   ============================================================ */
#honey{
  position:fixed; left:0; right:0; z-index:86; bottom:clamp(74px,11vh,124px);
  display:flex; justify-content:center; pointer-events:none;
  /* right padding keeps her clear of the stamp rack column so the caption never
     sits over FILE IT — she is click-through anyway, but the verb stays legible */
  padding:0 clamp(14px,14vw,196px) 0 14px;
  opacity:0; transform:translateY(10px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,1,.3,1);
}
#honey.show{opacity:1; transform:none;}
.honeyPanel{
  display:flex; align-items:flex-start; gap:12px; max-width:min(96vw,640px);
  padding:13px 20px 14px; border-radius:16px;
  background:linear-gradient(165deg, rgba(255,238,246,.97), rgba(250,222,236,.95) 55%, rgba(240,214,240,.95));
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 0 0 1px rgba(214,143,182,.45), 0 10px 34px rgba(255,105,180,.22), 0 2px 10px rgba(0,0,0,.4);
}
/* the glyph — a status light shaped like the theme, never a creature */
.honeyMark{flex:0 0 auto; width:26px; height:26px; margin-top:2px; filter:drop-shadow(0 1px 2px rgba(180,80,130,.35));}
.honeyMark .hmHeart{fill:#e46ba6;}
.honeyMark .hmKey{fill:#fdeef6;}
.honeyBody{min-width:0;}
.honeyName{
  font-family:"Century Gothic","Futura","Trebuchet MS","Segoe UI",sans-serif;
  display:flex; align-items:center; gap:5px;
  font-size:9.5px; letter-spacing:.42em; font-weight:bold; color:#b2447d;
  text-transform:uppercase; margin-bottom:5px;
}
/* three bars on a fixed, perfectly even cadence — they answer to nothing she
   says. The evenness IS the character (§6A); never make this reactive. */
.honeyName .honeyBeat{
  width:2px; height:8px; border-radius:1px; background:#e08cb8; opacity:.45;
  animation:honeyPulse 1.6s steps(1,end) infinite;
}
.honeyName .honeyBeat:nth-child(2){animation-delay:.4s;}
.honeyName .honeyBeat:nth-child(3){animation-delay:.8s;}
@keyframes honeyPulse{0%,49%{opacity:.9} 50%,100%{opacity:.3}}
.honeyLine{
  font-family:"Century Gothic","Futura","Trebuchet MS","Segoe UI",sans-serif;
  font-size:15px; line-height:1.55; letter-spacing:.045em; color:#4d2740;
  min-height:1.55em;
}
/* rare, one-shot lines get a slightly warmer plate — the same voice, on the
   evenings she chooses to say something. No new words, just a little more light. */
#honey.rare .honeyPanel{
  box-shadow:0 0 0 1px rgba(214,143,182,.6), 0 12px 40px rgba(255,105,180,.34), 0 2px 10px rgba(0,0,0,.45);
  background:linear-gradient(165deg, rgba(255,244,250,.98), rgba(252,226,240,.96) 55%, rgba(244,220,246,.96));
}

/* ---- storyframe responsive (phones / narrow) ---- */
@media (max-width:640px), (orientation:portrait) and (max-width:900px){
  #clockOutBtn{padding:5px 8px; font-size:9px; letter-spacing:.08em;}
  #briefingStrip{font-size:9.5px; padding:6px 10px;}
  #briefingStrip .briefDismiss{display:none;}
  #postWaiting{top:auto; bottom:120px; right:10px; width:170px;}
  #caseNote{width:min(58%,180px); bottom:46px;}
  .storyNote{font-size:12.5px;}
  /* phone: ride high enough to clear the thumb row (rack + FILE IT live at
     the bottom edge) and the demo banner. Still click-through either way. */
  #honey{bottom:158px; padding:0 8px;}
  .honeyPanel{gap:9px; padding:9px 13px 10px; border-radius:12px;}
  .honeyMark{width:20px; height:20px;}
  .honeyLine{font-size:12.5px; line-height:1.45;}
}