/* ============================================================
   MyHealthLog — Shared Staff Shell
   staff-shell.css   ·   SHELL_VERSION is declared in staff-shell.js

   One stylesheet for Administration, Support, Feedback and
   Diagnostics. Loaded before any app-specific CSS.

   Floor 9: tokens are identical across apps. The :root block below
   is now the single source for them — it was previously duplicated
   inline in four pages (verified byte-identical in three; Feedback
   additionally declared three app-scoped --cat-* tokens, which stay
   with Feedback).

   Breakpoints (§4.1). CSS cannot use custom properties in media
   queries, so these three numbers are the only hard-coded values
   in the file and they appear nowhere else:
       narrow   < 640px    phones
       medium   640–1024   tablets, split windows
       wide     > 1024     desktop

   Administration Phase 1 — Deployment Layer
   CONFIDENTIAL — INTERNAL USE ONLY
   ============================================================ */

/* The wordmark face. Here rather than in each page's font link because the
   shell is what renders the wordmark — a page that forgot to request it
   would fall back to Georgia with nothing to say so. Must stay the first
   rule in the file: @import after any other rule is ignored. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap');

/* ─── Tokens ───────────────────────────────────────────── */

:root {
  --bg:#0a0c10; --sf:#111318; --sf2:#181c24; --sf3:#1e2330;
  --bd:#252b38; --bd2:#2e3548;
  --tx:#e8eaf0; --tx2:#9aa0b4; --tx3:#5c6480; --tx4:#3a4058;
  --ac:#3b82f6; --ac2:#2563eb; --acg:#10b981; --acr:#ef4444;
  --acy:#f59e0b; --acp:#8b5cf6;
  --rx:8px; --rs:6px;
  --font:'DM Mono',monospace;
  --sans:'DM Sans',system-ui,sans-serif;
  --mhl-brand-dark:#E8ECF2; --mhl-brand-accent:#6BA3E0;

  /* Shell-only spacing and sizing. Not app tokens — layout constants. */
  --shell-header-h:56px;
  --shell-banner-h:24px;
  --shell-nav-w:216px;
  --shell-gap:16px;
  --shell-tap:44px;          /* §4.3 minimum hit target */
}

/* ─── Reset ────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--tx);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* §4.3 — focus is always visible, never removed. */
:focus-visible {
  outline: 2px solid var(--ac);
  outline-offset: 2px;
  border-radius: var(--rs);
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* ─── Environment banner (§3.1) ────────────────────────── */
/* Source of truth is the hostname, never the token. */

.shell-env {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--shell-banner-h);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.shell-env--production { background: var(--acr); color: #fff; }
.shell-env--test       { background: var(--sf3); color: var(--tx2); border-bottom: 1px solid var(--bd); }

/* ─── Audit failure banner (Fix 5 F6, inherited) ───────── */

.shell-audit-banner {
  position: fixed;
  /* BELOW the header, not level with it. Both are fixed, so a banner at the
     same offset covers the chrome instead of pushing it down — the header,
     app switcher and logout all disappeared behind it. */
  top: calc(var(--shell-banner-h) + var(--shell-header-h));
  left: 0; right: 0;
  z-index: 49;
  background: var(--acy);
  color: #1f2937;
  font-weight: 600;
  font-size: 13px;
  padding: 10px 44px 10px 16px;
  text-align: center;
}
.shell-audit-banner button {
  position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%);
  background: none; border: 0;
  font-size: 20px; line-height: 1; color: inherit;
  min-width: var(--shell-tap); min-height: var(--shell-tap);
}

/* ─── Header (§3) ──────────────────────────────────────── */

.shell-header {
  position: fixed;
  top: var(--shell-banner-h); left: 0; right: 0;
  height: var(--shell-header-h);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 var(--shell-gap);
  background: var(--sf);
  border-bottom: 1px solid var(--bd);
}
.shell-header__menu {
  display: none;                      /* wide: sidebar is fixed */
  background: none; border: 0;
  color: var(--tx2);
  min-width: var(--shell-tap); min-height: var(--shell-tap);
  font-size: 18px;
}
/* Wordmark (DL #290 / P4b). Restored from the pre-shell Administration
   page, where it was the only branded element — the S1 header replaced it
   with plain monospace text. Same face, weight and three-part colouring. */
.mhl-wordmark {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}
.mhl-wm-1, .mhl-wm-3 { color: var(--mhl-brand-dark); }
.mhl-wm-2            { color: var(--mhl-brand-accent); }

.shell-header__brand { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.shell-header__staff {
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mhl-brand-accent);
}
.shell-header__app {
  font-size: 13px;
  color: var(--tx2);
  border-left: 1px solid var(--bd2);
  padding-left: 12px;
  white-space: nowrap;
}
.shell-header__spacer { flex: 1; }
.shell-header__actions { display: flex; align-items: center; gap: 8px; }

/* Session chip — display_label ONLY. Never the token or a prefix. */
.shell-chip {
  font-family: var(--font);
  font-size: 11px;
  color: var(--tx2);
  background: var(--sf2);
  border: 1px solid var(--bd);
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}
.shell-chip--warn { color: var(--acy); border-color: var(--acy); }

.shell-btn {
  white-space: nowrap;          /* 'Apps ▾' wrapped to two lines at 375px */
  background: var(--sf2);
  border: 1px solid var(--bd);
  color: var(--tx);
  border-radius: var(--rs);
  padding: 0 14px;
  min-height: var(--shell-tap);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px;
}
.shell-btn:hover { border-color: var(--bd2); background: var(--sf3); }
.shell-btn--primary { background: var(--ac); border-color: var(--ac); color: #fff; }
.shell-btn--primary:hover { background: var(--ac2); border-color: var(--ac2); }
.shell-btn--danger { background: var(--acr); border-color: var(--acr); color: #fff; }
.shell-btn--quiet { background: none; border-color: transparent; color: var(--tx2); }
.shell-btn[disabled] { opacity: .45; cursor: not-allowed; }
.shell-btn--icon { padding: 0; min-width: var(--shell-tap); justify-content: center; }

/* ─── App switcher (§3, requirement A) ─────────────────── */

.shell-switcher { position: relative; }
.shell-switcher__menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 260px;
  background: var(--sf2);
  border: 1px solid var(--bd2);
  border-radius: var(--rx);
  padding: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
}
.shell-switcher__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  min-height: var(--shell-tap);
  padding: 8px 10px;
  background: none; border: 0;
  border-radius: var(--rs);
  color: var(--tx);
  text-align: left;
  text-decoration: none;
}
.shell-switcher__item:hover { background: var(--sf3); }
.shell-switcher__item[aria-current="page"] { background: var(--sf3); border: 1px solid var(--bd2); }
/* Out of scope: greyed, still listed, and says why in text — colour is
   never the only carrier of state (§4.3). */
.shell-switcher__item--locked { color: var(--tx3); cursor: not-allowed; }
.shell-switcher__item--locked:hover { background: none; }
.shell-switcher__why { margin-left: auto; font-size: 11px; color: var(--tx3); }

/* ─── Layout ───────────────────────────────────────────── */

.shell-body {
  padding-top: calc(var(--shell-banner-h) + var(--shell-header-h));
  min-height: 100vh;
  display: flex;
}
.shell-body--with-audit-banner {
  padding-top: calc(var(--shell-banner-h) + var(--shell-header-h) + 42px);
}

.shell-nav {
  width: var(--shell-nav-w);
  flex: 0 0 var(--shell-nav-w);
  border-right: 1px solid var(--bd);
  background: var(--sf);
  padding: var(--shell-gap) 10px;
}
.shell-nav__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  min-height: var(--shell-tap);
  padding: 8px 12px;
  margin-bottom: 2px;
  background: none; border: 0;
  border-radius: var(--rs);
  color: var(--tx2);
  text-align: left;
  font-size: 13px;
}
a.shell-nav__item { text-decoration: none; }
.shell-nav__item:hover { background: var(--sf2); color: var(--tx); }
/* A group label, not a control: no hit target, no hover. */
.shell-nav__heading {
  margin: 14px 12px 4px;
  font-size: 11px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.shell-nav__item[aria-current="true"] { background: var(--sf3); color: var(--tx); }
.shell-nav__scrim { display: none; }
/* Identity and logout live in the header on a wide screen and move into
   the nav drawer on a phone, where the header cannot hold them. */
.shell-nav__foot { display: none; }

.shell-main {
  flex: 1;
  min-width: 0;                       /* lets wide tables scroll, not stretch */
  padding: var(--shell-gap);
}

.shell-footer {
  border-top: 1px solid var(--bd);
  padding: 12px var(--shell-gap);
  color: var(--tx3);
  font-family: var(--font);
  font-size: 11px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}

/* ─── Cards, panels, badges ────────────────────────────── */

.shell-card {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: var(--rx);
  padding: var(--shell-gap);
}
.shell-panel-title { font-size: 16px; font-weight: 700; margin: 0 0 2px; }
.shell-panel-sub   { font-size: 12px; color: var(--tx2); margin: 0 0 var(--shell-gap); }

.shell-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--bd2);
  color: var(--tx2);
  background: var(--sf2);
}
.shell-badge--tier    { color: var(--mhl-brand-accent); border-color: var(--mhl-brand-accent); }
.shell-badge--ok      { color: var(--acg); border-color: var(--acg); }
.shell-badge--warn    { color: var(--acy); border-color: var(--acy); }
.shell-badge--danger  { color: var(--acr); border-color: var(--acr); }
.shell-badge--test    { color: var(--acp); border-color: var(--acp); }
/* Which app a customer record came from (BP, Glucose). Neutral on purpose:
   no app is a warning. The text carries the meaning, not the colour. */
.shell-badge--app     { color: var(--tx); border-color: var(--bd2); }

/* ─── Refusal card (§2.4) ──────────────────────────────── */

.shell-refusal { max-width: 460px; margin: 12vh auto; text-align: center; }
.shell-refusal__chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0; }

/* ─── T3 desktop-only card (§4.4) ──────────────────────── */

.shell-desktop-only { max-width: 420px; margin: 14vh auto; text-align: center; }

/* ─── Help (§5) ────────────────────────────────────────── */

.shell-help-dot {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  margin-left: 6px;
  border-radius: 50%;
  border: 1px solid var(--bd2);
  background: var(--sf2);
  color: var(--tx3);
  font-size: 11px; line-height: 1;
  vertical-align: middle;
}
/* The dot itself is small, but its tap area is not (§4.3). */
.shell-help-dot::after {
  content: ''; position: absolute;
  min-width: var(--shell-tap); min-height: var(--shell-tap);
}
.shell-help-dot { position: relative; }

.shell-tip {
  position: fixed;
  z-index: 80;
  max-width: 280px;
  background: var(--sf3);
  border: 1px solid var(--bd2);
  border-radius: var(--rs);
  padding: 10px 12px;
  font-size: 12px;
  color: var(--tx);
  box-shadow: 0 6px 24px rgba(0,0,0,.5);
}

.shell-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 100%;
  z-index: 90;
  background: var(--sf);
  border-left: 1px solid var(--bd);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .18s ease-out;
}
.shell-drawer[data-open="true"] { transform: translateX(0); }
.shell-drawer__head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px var(--shell-gap);
  border-bottom: 1px solid var(--bd);
}
.shell-drawer__body { flex: 1; overflow-y: auto; padding: var(--shell-gap); }
.shell-drawer__section { margin-bottom: 22px; }
.shell-drawer__section h3 { font-size: 13px; margin: 0 0 6px; }
.shell-drawer__section p  { font-size: 13px; color: var(--tx2); margin: 0 0 8px; line-height: 1.65; }
.shell-scrim {
  position: fixed; inset: 0; z-index: 85;
  background: rgba(0,0,0,.6);
}

/* ─── Toasts and dialogs (§3) ──────────────────────────── */

.shell-toast {
  position: fixed;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  z-index: 100;
  background: var(--sf2);
  border: 1px solid var(--bd2);
  border-radius: var(--rx);
  padding: 12px 18px;
  font-size: 13px;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
  max-width: calc(100vw - 32px);
}
.shell-toast--err  { border-color: var(--acr); }
.shell-toast--warn { border-color: var(--acy); }

.shell-dialog {
  position: fixed; inset: 0; z-index: 95;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.7);
  padding: 16px;
}
.shell-dialog__box {
  background: var(--sf);
  border: 1px solid var(--bd2);
  border-radius: var(--rx);
  padding: 22px;
  width: 100%; max-width: 420px;
}
.shell-dialog__title { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.shell-dialog__desc  { font-size: 13px; color: var(--tx2); line-height: 1.7; margin: 0 0 16px; }
.shell-dialog__row   { display: flex; gap: 10px; margin-top: 16px; }
.shell-dialog__row .shell-btn { flex: 1; justify-content: center; }

.shell-input, .shell-select, .shell-textarea {
  width: 100%;
  min-height: var(--shell-tap);
  background: var(--sf2);
  border: 1px solid var(--bd);
  border-radius: var(--rs);
  padding: 10px 12px;
  color: var(--tx);
  font-family: var(--font);
  font-size: 13px;
}
.shell-textarea { min-height: 90px; resize: vertical; }
.shell-label { display: block; font-size: 12px; color: var(--tx2); margin-bottom: 6px; }

/* ─── Queue + detail (§4.2) ────────────────────────────── */

.shell-split { display: flex; gap: var(--shell-gap); min-height: 0; }
.shell-split__list   { flex: 0 0 320px; min-width: 0; }
.shell-split__detail { flex: 1; min-width: 0; }
.shell-split__back   { display: none; }

/* ─── Tables that become cards (§4.2) ──────────────────── */

.shell-table-wrap { overflow-x: auto; }
.shell-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.shell-table th, .shell-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--bd);
  white-space: nowrap;
}
.shell-table th { color: var(--tx3); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }

/* ─── Utilities ────────────────────────────────────────── */

.shell-stack > * + * { margin-top: var(--shell-gap); }
.shell-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.shell-muted { color: var(--tx2); }
.shell-mono  { font-family: var(--font); }
.shell-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.shell-empty { text-align: center; color: var(--tx3); padding: 36px 16px; }

/* ============================================================
   MEDIUM — 640 to 1024
   ============================================================ */

@media (max-width: 1024px) {
  .shell-nav { width: 180px; flex-basis: 180px; }
  .shell-split__list { flex-basis: 260px; }
}

/* ============================================================
   NARROW — under 640. Phones.
   Two panes become two screens; tables become cards; the sidebar
   becomes a drawer. Nothing is squeezed side by side.
   ============================================================ */

@media (max-width: 639px) {

  .shell-header { gap: 8px; padding: 0 10px; }
  .shell-header__menu { display: inline-flex; align-items: center; justify-content: center; }
  .shell-header__app  { display: none; }         /* the nav drawer names it */

  /* At 375px the header cannot hold wordmark + Apps + help + chip +
     Log out: the chip and Log out were pushed off the right edge
     entirely. Both move into the nav drawer, which is where a phone
     user reaches for navigation anyway. */
  /* Only the STAFF tag goes. The old rule here hid every span inside the
     wordmark, which with the three-span mark would blank the logo. */
  .shell-header__staff { display: none; }
  .shell-header .shell-chip,
  .shell-header__actions > .shell-btn--quiet:last-child { display: none; }
  .shell-nav__foot {
    display: block;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--bd);
  }
  .shell-nav__foot .shell-chip { display: inline-block; margin-bottom: 10px; }
  .shell-nav__foot .shell-btn  { width: 100%; justify-content: center; }

  .shell-body { display: block; }

  /* Sidebar becomes a drawer (§4.2) */
  .shell-nav {
    position: fixed;
    top: calc(var(--shell-banner-h) + var(--shell-header-h));
    /* z-index 70 keeps the drawer above the audit banner (49) */
    bottom: 0; left: 0;
    width: 260px; flex-basis: auto;
    z-index: 70;
    transform: translateX(-100%);
    transition: transform .18s ease-out;
    overflow-y: auto;
  }
  .shell-nav[data-open="true"] { transform: translateX(0); }
  .shell-nav__scrim { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(0,0,0,.6); }

  .shell-main { padding: 12px; }

  /* Queue + detail: two screens, not two panes */
  .shell-split { display: block; }
  .shell-split__list, .shell-split__detail { flex: none; width: 100%; }
  .shell-split[data-view="list"]   .shell-split__detail { display: none; }
  .shell-split[data-view="detail"] .shell-split__list   { display: none; }
  .shell-split[data-view="detail"] .shell-split__back   { display: inline-flex; margin-bottom: 12px; }

  /* Tables become cards. Each cell carries its own label via
     data-label, so no header row is needed. */
  .shell-table, .shell-table tbody, .shell-table tr, .shell-table td { display: block; width: 100%; }
  .shell-table thead { display: none; }
  .shell-table tr {
    background: var(--sf);
    border: 1px solid var(--bd);
    border-radius: var(--rx);
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  .shell-table td {
    border: 0;
    padding: 5px 0;
    white-space: normal;
    display: flex; justify-content: space-between; gap: 12px;
  }
  .shell-table td::before {
    content: attr(data-label);
    color: var(--tx3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    flex: 0 0 auto;
  }
  .shell-table td[data-secondary] { display: none; }
  .shell-table tr[data-expanded="true"] td[data-secondary] { display: flex; }

  /* Forms: single column, large inputs (§4.2) */
  .shell-form-2col { display: block; }
  .shell-form-2col > * + * { margin-top: 12px; }

  /* Help drawer is full screen on a phone (§5) */
  .shell-drawer { width: 100%; border-left: 0; }

  /* Dashboard tiles: one column, roadmap collapsed (§4.2) */
  .shell-tiles { display: block; }
  .shell-tiles > * + * { margin-top: 10px; }

  .shell-toast { left: 12px; right: 12px; bottom: 12px; transform: none; max-width: none; }
}

/* Wide-only: the two-screen back control never shows. */
@media (min-width: 640px) {
  .shell-split__back { display: none !important; }
}

/* Respect reduced motion — the drawers are the only animation. */
@media (prefers-reduced-motion: reduce) {
  .shell-drawer, .shell-nav { transition: none; }
}