/* qc-station-header.css — THE STATION HEADER, for every station screen.
 *
 * WHY THIS FILE EXISTS (user, 20 Sep 2026)
 * ----------------------------------------
 * "why this header is changed when we click on the checklist — the header
 *  should be always the same as we have in station".
 *
 * Station Mode is two PAGES: station.html (what to do here) and index.html in
 * kiosk mode (the check itself). They drew two different headers, so tapping a
 * tile swapped the station name, the clock, the refresh and the operator chip
 * for a bare white bar with a "Back to station" pill. One station, one header —
 * so the rules moved out of station.html, VERBATIM, into this file, and both
 * pages link it. The markup is in qc-station-header.js for the same reason.
 *
 * NOTHING WAS REDESIGNED IN THE MOVE. Every rule below is the one that was in
 * station.html; test/browser/station-header-check.js diffs the computed style
 * of every header element against a recorded baseline and fails on any change.
 *
 * INDEX.HTML FIGHTS THIS FILE. station.html deliberately does not load
 * index.html's global CSS ("button { color:#FFF!important }" and friends); the
 * kiosk page has no such luxury, so index.html's kiosk block re-states the few
 * rules its globals would otherwise win. Anything added here that a global
 * could beat must be added there too.
 *
 * The tokens (--u, --pad, --tap, the chrome and status inks) come with the
 * header because the header is drawn in them. .stdesign is the scope: put it on
 * the element that wraps the header, exactly as station.html does.
 */
/* ═══ THE APPROVED STATION SCREEN ════════════════════════════════════════════
   Copied mechanically from public/kit/design/station.html (the design
   reference, Administration → UI Kit). House rule: the reference changes
   first, then the app follows — and "follows" means these exact rules, not a
   hand-written approximation of them ("copy MES-Lite, don't recreate").

   The reference scales every size by --u so one page can draw a phone and a
   55-inch board side by side. A real kiosk IS one screen, so --u is 1 here and
   the touch sizes are the real ones: 60px, 76px (see the reference §1 — our
   own judgement from gloved-fingertip geometry, not a cited standard).
   ═══════════════════════════════════════════════════════════════════════════ */
.stdesign{--u:1;--pad:20px;--gap:18px;--tap:60px;--tap-lg:76px;
  --pg-border:var(--rule,rgba(0,0,0,.12));--pg-muted:#71717A;--pg-text:#18181B;color:#18181B;
  --pg-soft:var(--neutral-tint);--app-bg:transparent;
  /* The header's own ink. `inherit` left it resolving to WHITE ON WHITE — the
     station name, the clock and "Nobody signed on" were invisible (measured,
     19 Sep 2026). Neutrals, not brand colours: chrome must not move when a
     tenant's accent does. */
  --chrome-bg:transparent;--chrome-border:var(--rule,rgba(0,0,0,.12));--chrome-text:#18181B;--chrome-muted:#71717A;
  --bad:var(--danger);--bad-solid:var(--danger-dark);--bad-bg:var(--danger-tint);--bad-ink:var(--danger-dark);--on-bad:#fff;
  --warn-solid:#B45309;--warn-bg:var(--warn-tint);--warn-ink:#8A4A00;--on-warn:#fff;
  --info-solid:var(--info-dark);--info-bg:var(--info-tint);--info-ink:var(--info-dark);--on-info:#fff;
  --ok-bg:var(--ok-tint);--ok-ink:var(--ok-darker);
  --idle:var(--neutral);--idle-bg:var(--neutral-tint);--idle-ink:#4B5563;}
/* Guarded, the way the design reference guards it: the OS preference only
   applies when the page has not been told otherwise. data-theme is always
   set by the boot script above, so in practice the theme decides. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .stdesign{--pg-border:rgba(255,255,255,.14);--pg-soft:rgba(255,255,255,.06);
    --chrome-border:rgba(255,255,255,.14);--chrome-text:#F2F2F2;--chrome-muted:#A6A6AA;
    --pg-text:#F2F2F2;--pg-muted:#A6A6AA;color:#F2F2F2;
    --idle-ink:#C9CBD1;--warn-ink:#FFC978;--bad-ink:#FF9E96;--info-ink:#8FC2FF;}
}
:root[data-theme="dark"] .stdesign{--pg-border:rgba(255,255,255,.14);--pg-soft:rgba(255,255,255,.06);
  --chrome-border:rgba(255,255,255,.14);--chrome-text:#F2F2F2;--chrome-muted:#A6A6AA;
  --pg-text:#F2F2F2;--pg-muted:#A6A6AA;color:#F2F2F2;
  --idle-ink:#C9CBD1;--warn-ink:#FFC978;--bad-ink:#FF9E96;--info-ink:#8FC2FF;}
.st-hd{flex:none;display:flex;align-items:center;gap:calc(14px*var(--u));padding:calc(10px*var(--u)) var(--pad);background:var(--chrome-bg);border-bottom:1px solid var(--chrome-border);color:var(--chrome-text)}
.st-mark{width:calc(26px*var(--u));height:calc(26px*var(--u));border-radius:50%;border:calc(3px*var(--u)) solid var(--brand);flex:none}
.st-sep{width:1px;align-self:stretch;background:var(--chrome-border);flex:none}
.st-tile{width:calc(40px*var(--u));height:calc(40px*var(--u));border-radius:calc(11px*var(--u));display:grid;place-items:center;flex:none;color:var(--mc,var(--info));background:color-mix(in srgb,var(--mc,var(--info)) 14%,transparent)}
.st-tile svg{width:60%;height:60%}
.st-where{flex:1;min-width:0}
.st-where h1{font-size:calc(1.02rem*var(--u));font-weight:750;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-where p{font-size:calc(.76rem*var(--u));color:var(--chrome-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:calc(1px*var(--u))}
.st-where p b{color:var(--chrome-text);font-weight:600}
.st-clock{text-align:right;flex:none;font-variant-numeric:tabular-nums}
.st-clock .t{font-size:calc(1.16rem*var(--u));font-weight:700;line-height:1.1}
.st-clock .d{font-size:calc(.7rem*var(--u));color:var(--chrome-muted)}
.st-op{display:flex;align-items:center;gap:calc(9px*var(--u));flex:none;padding:calc(5px*var(--u)) calc(9px*var(--u));border-radius:calc(10px*var(--u));border:1px solid var(--chrome-border);min-height:var(--tap)}
/* The reference hard-codes its own green here; the APP must follow the tenant's
   accent, and carry the matched ink with it (both halves of the pair, always
   together — a half-overridden pair is how white-on-white happens). */
/* THE SEAT. A filled green circle with a "+" read as an ADD button and said
   nothing about who was there (user, 19 Sep 2026). The convention every chat
   and mail client already taught people is used instead, and it needs no words:
     · nobody signed on → a GREY DASHED silhouette. An empty seat looks empty.
     · signed on        → their INITIALS on the brand colour, with a green
                          PRESENCE DOT, exactly as the application draws a user.
   Colour is never the only signal: the shape changes too (silhouette vs
   letters), so it still reads for a colour-blind operator and in a photograph
   of a screen, which is how these get reported. */
.st-av{width:calc(34px*var(--u));height:calc(34px*var(--u));border-radius:50%;background:var(--brand);color:var(--brand-contrast);font-weight:700;font-size:calc(.72rem*var(--u));display:grid;place-items:center;flex:none;position:relative}
.st-av svg{width:calc(18px*var(--u));height:calc(18px*var(--u))}
.st-av.is-empty{background:var(--pg-soft);color:var(--pg-muted);border:1px dashed var(--pg-border)}
/*  The presence dot rides the avatar, so "somebody is here" survives even when
    the name is too long to draw. --chrome-bg is transparent, so the ring is cut
    from the header's own surface rather than a guessed white. */
.st-av.is-on::after{content:'';position:absolute;right:calc(-1px*var(--u));bottom:calc(-1px*var(--u));
  width:calc(11px*var(--u));height:calc(11px*var(--u));border-radius:50%;background:var(--ok-ink);
  box-shadow:0 0 0 calc(2px*var(--u)) var(--pg-card,#fff)}
.st-op .nm{display:block;font-size:calc(.8rem*var(--u));font-weight:650;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-op .rl{display:block;font-size:calc(.66rem*var(--u));color:var(--chrome-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The chip must FIT ITS NAME. It was flex:none beside a flexible title, so the
   name was clipped to a few characters ("Nobody signed on" cut, user 19 Sep).
   It now gets the room it needs and the STATION TITLE gives way first — the
   title is already truncated by design and is the less urgent of the two. */
.st-op{background:transparent;cursor:pointer;color:inherit;font:inherit;
  flex:0 1 auto;max-width:min(46vw,340px);min-width:0;overflow:hidden}
.st-op > span{min-width:0;overflow:hidden}
.st-where{flex:1 1 0;min-width:0}
@media (max-width:900px){ .st-op .rl{display:none} .st-clock .d{display:none} }
@media (max-width:640px){ .st-op .nm{display:none} .st-sep{display:none} }
/* HEADER ACTIONS — Back, Refresh, Settings (and Lock, once it exists).
   One class, so a button added later cannot look different from the ones
   already there. The application header carries Back and Refresh and the
   station is the same product, so it carries them too (user, 19 Sep 2026). */
.st-gear,.st-act{width:var(--tap);height:var(--tap);border-radius:calc(10px*var(--u));border:1px solid var(--chrome-border);background:transparent;color:var(--chrome-text);display:grid;place-items:center;flex:none;cursor:pointer}
.st-gear svg,.st-act svg{width:calc(19px*var(--u));height:calc(19px*var(--u))}
/* A HEADER BUTTON ANSWERS THE POINTER (user, 20 Sep 2026: "no hover for both
   buttons"). It had :active only — which a mouse shows for the instant of the
   click and a finger never shows at all — so Back and Refresh looked like
   printed marks rather than controls. */
.st-act:hover:not([disabled]){background:var(--pg-soft)}
.st-act:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.st-act:active:not([disabled]){background:var(--pg-soft);transform:scale(.96)}
.st-user:hover{background:var(--pg-soft)}
.st-act[disabled]{opacity:.38;cursor:default}
/*  At a phone width the header keeps only what a person cannot work without:
    where they are, who they are, and the way back. */
@media (max-width:640px){ #stRefresh{display:none!important} }
/* ── THE AVATAR SECTION ──────────────────────────────────────────────────
   Mirrors index.html's #userAvatar / #userDropdown: identity text then the
   circle, and a panel beneath it with head / body / foot. Written here rather
   than reused because those classes live inside index.html's global CSS, which
   this page deliberately does not load (see the file header). */
.st-user{display:flex;align-items:center;gap:calc(9px*var(--u));flex:0 1 auto;max-width:min(46vw,340px);min-width:0;
  padding:calc(5px*var(--u)) calc(9px*var(--u));border-radius:calc(10px*var(--u));border:1px solid var(--chrome-border);
  background:transparent;color:var(--chrome-text);cursor:pointer;min-height:var(--tap);overflow:hidden}
.st-user:active{background:var(--pg-soft)}
.st-ident{min-width:0;text-align:right;overflow:hidden;display:block}
.st-ident .nm{display:block;font-size:calc(.8rem*var(--u));font-weight:650;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-ident .rl{display:block;font-size:calc(.66rem*var(--u));color:var(--chrome-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-hd{position:relative}
.st-menu{position:absolute;top:calc(100% + 8px);right:var(--pad);z-index:60;width:min(320px,calc(100vw - 32px));
  background:var(--pg-card,#fff);color:var(--pg-text);border:1px solid var(--pg-border);border-radius:calc(14px*var(--u));
  box-shadow:0 18px 44px rgba(0,0,0,.18);overflow:hidden}
.st-menu[hidden]{display:none}
.st-menu-head{padding:calc(16px*var(--u)) calc(16px*var(--u)) calc(12px*var(--u));text-align:center;border-bottom:1px solid var(--pg-border)}
.st-menu-av{width:calc(52px*var(--u));height:calc(52px*var(--u));border-radius:50%;background:var(--brand);color:var(--brand-contrast);
  font-weight:700;font-size:calc(1.05rem*var(--u));display:grid;place-items:center;margin:0 auto calc(8px*var(--u))}
.st-menu-av.is-empty{background:var(--pg-soft);color:var(--pg-muted);border:1px dashed var(--pg-border)}
.st-menu-av svg{width:calc(26px*var(--u));height:calc(26px*var(--u))}
.st-menu-name{font-size:calc(.95rem*var(--u));font-weight:700;line-height:1.2}
.st-menu-sub{font-size:calc(.75rem*var(--u));color:var(--pg-muted);margin-top:calc(2px*var(--u))}
.st-chip{display:inline-block;margin-top:calc(8px*var(--u));padding:calc(3px*var(--u)) calc(10px*var(--u));border-radius:999px;
  background:var(--pg-soft);color:var(--pg-muted);font-size:calc(.68rem*var(--u));font-weight:650}
.st-menu-body{padding:calc(10px*var(--u)) calc(14px*var(--u))}
.st-kv{display:flex;align-items:center;justify-content:space-between;gap:calc(12px*var(--u));padding:calc(7px*var(--u)) 0;
  border-bottom:1px solid var(--pg-border);font-size:calc(.78rem*var(--u))}
.st-kv:last-child{border-bottom:0}
.st-kv .k{color:var(--pg-muted);flex:none}
.st-kv .v{font-weight:650;min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/*  The foot row is copied from the application's own account menu
    (public/kit/qc-shell.css → .user-dropdown .acct-fbtn), to its numbers:
    a 40px circle tinted 13% with the button's OWN colour, a 19px icon inside
    it, and an 11px/500 label under it. Mine drew a 17px icon under a 600-weight
    label on a plain white circle, which is why it read as big text beside a
    small grey glyph with no colour (user, 19 Sep 2026). The icon carries the
    meaning here; the word is the caption, not the button. */
.st-menu-foot{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;
  padding:calc(10px*var(--u)) calc(6px*var(--u)) calc(12px*var(--u));border-top:1px solid var(--pg-border)}
.qc-ui.qc-ui.qc-ui.stdesign .st-fbtn{display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;cursor:pointer;
  color:var(--pg-text);font:inherit;font-size:calc(.6875rem*var(--u))!important;font-weight:500!important;line-height:1.2;text-align:center;
  padding:2px!important;border-radius:10px;min-height:0!important}
.qc-ui.qc-ui.qc-ui.stdesign .st-fbtn .c{width:calc(40px*var(--u));height:calc(40px*var(--u));border-radius:50%;display:grid;place-items:center;
  color:var(--fc,var(--pg-muted));background-color:color-mix(in srgb,var(--fc,var(--pg-muted)) 13%,transparent);
  transition:background-color .15s ease}
.qc-ui.qc-ui.qc-ui.stdesign .st-fbtn .c svg{width:calc(19px*var(--u))!important;height:calc(19px*var(--u))!important}
.qc-ui.qc-ui.qc-ui .st-fbtn:hover .c{background-color:color-mix(in srgb,var(--fc,var(--pg-muted)) 24%,transparent)}
.st-fbtn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.qc-ui.qc-ui.qc-ui .st-fbtn[disabled]{opacity:.4;cursor:default}
@media (max-width:640px){ .st-ident{display:none} .st-user{padding:calc(5px*var(--u))} }


/* ── THE SIGN-ON IS A LOGIN SURFACE, NOT A POPUP ─────────────────────────
   (user, 20 Sep 2026: "that login window is not looking like a login window —
   can we use the same style we have after locking, to unlock?")
   It was a kit modal floating over the job list, which reads as a settings
   dialog rather than the front door of the station. It now uses the LOCK
   SCREEN's surface — the same full-bleed panel, the same seat at the top, the
   same single column — so the two moments a person identifies themselves at a
   station look like one thing.
   Only the FRAME is restyled: the ID / PIN / e-mail block inside is the same
   markup, moved in and out, so nothing about signing on changed. */
.st-signon .st-signonbox { width: min(520px, 100%); }
.st-signon .st-signon-slot { width: 100%; text-align: left; }
.st-signon .st-signon-slot > p:first-child { text-align: center; }
/* Inside a login surface the block is the form, so it fills the column. */
.st-signon .st-signon-slot .form-row,
.st-signon .st-signon-slot input,
.st-signon .st-signon-slot .qcui-tabs { width: 100%; }
/* The roster below the form is a shortcut, not the main event: it is quieter
   and scrolls on its own rather than pushing Sign on off a short screen. */
.st-signon .st-signon-slot #whoPeople,
.st-signon .st-signon-slot .st-people {
  max-height: min(34vh, 260px); overflow-y: auto;
}
@media (max-height: 700px) {
  .st-signon .st-lockav { width: calc(56px * var(--u)); height: calc(56px * var(--u)); }
}
/* The seat on the sign-on surface follows the same empty/occupied rule as the
   header chip: a dashed silhouette when nobody is there. */
.st-signon .st-lockav.is-empty {
  background: var(--pg-soft); color: var(--pg-muted); border: 2px dashed var(--pg-border);
}
.st-signon .st-lockav svg { width: 46%; height: 46%; }