/* app.q2med.com shell: navy rail | Ask Q2Med column | workspace sheet, plus
   the shared page system every view is built from (DESIGN_GUIDE.md). Tokens
   come from app-tokens.css. This file is unlayered, so it outranks Tailwind's
   layers: style app-* classes and legacy q2-* component classes only, never
   bare elements inside .app-legacy. */

body.app-page {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
body.app-page button, body.app-page input, body.app-page select, body.app-page textarea { font-family: inherit; }
body.app-page :focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
body.app-page ::selection { color: var(--navy); background: #d9efff; }
.app-sr-only { position: absolute !important; top: 0; left: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.app-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.app-shell { display: flex; height: 100vh; height: 100dvh; min-height: 0; }

/* ── Rail: the navy navigation anchor. Exactly one item, the current area, is a filled blue tile. ── */
.app-rail { flex: 0 0 var(--app-rail-w); width: var(--app-rail-w); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 0 12px; box-sizing: border-box; background: var(--rail-bg); color: var(--rail-ink); }
.app-rail-mark { display: block; width: 34px; padding: 2px 0 14px; }
.app-rail-mark img { display: block; width: 34px; height: auto; }
.app-rail-item { width: 66px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 7px; border-radius: var(--r-lg); font-size: 11.5px; font-weight: 500; line-height: 1.2; color: var(--rail-ink); text-decoration: none; transition: background .15s ease, color .15s ease; }
.app-rail-pill { width: 36px; height: 26px; display: grid; place-items: center; color: inherit; }
.app-rail-pill .app-icon { width: 20px; height: 20px; }
.app-rail-item:hover { background: var(--rail-hover); color: var(--rail-ink-strong); }
.app-rail-item.is-active { background: var(--rail-active); color: var(--rail-ink-strong); font-weight: 600; }
.app-rail-item.is-active:hover { background: var(--action-hover); }
.app-rail-label { white-space: nowrap; }
.app-rail-spacer { flex: 1; }
.app-rail-btn { position: relative; width: 40px; height: 40px; border-radius: var(--r-md); border: 0; background: transparent; color: var(--rail-ink); display: grid; place-items: center; cursor: pointer; text-decoration: none; padding: 0; }
.app-rail-btn:hover, .app-rail-btn[aria-expanded="true"] { background: var(--rail-hover); color: var(--rail-ink-strong); }
.app-rail-badge { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--err-dot); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--rail-bg); box-sizing: border-box; }
.app-rail-badge-tasks { left: 0; right: auto; background: var(--action); }
.app-rail-badge[hidden], .app-rail .support-unread-badge[hidden] { display: none; }
.app-rail .support-unread-badge { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--action); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--rail-bg); box-sizing: border-box; }
.app-rail-avatar { position: relative; width: 36px; height: 36px; margin-top: 8px; border-radius: 50%; border: 0; padding: 0; background: var(--action); color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; cursor: pointer; }
.app-rail-avatar:hover, .app-rail-avatar[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--rail-line); }
.app-rail-avatar.is-current { box-shadow: 0 0 0 2px var(--rail-bg), 0 0 0 4px var(--rail-ink-strong); }
.app-rail-avatar.is-simulating { background: var(--att-fill); color: var(--att); box-shadow: 0 0 0 2px var(--att-dot); }

.app-pop { position: fixed; left: calc(var(--app-rail-w) + 6px); bottom: 12px; z-index: 70; width: 300px; max-height: min(520px, calc(100vh - 24px)); overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-pop); box-sizing: border-box; color: var(--ink); }
.app-pop[hidden] { display: none; }
.app-pop-head { padding: 12px 14px 10px; border-bottom: 1px solid var(--line-rule); }
.app-pop-title { font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-pop-sub { font-size: 12px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-pop-section { padding: 6px; border-bottom: 1px solid var(--line-rule); }
.app-pop-section:last-child { border-bottom: 0; }
.app-pop-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 6px 8px 4px; }
.app-pop-item { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; padding: 8px; border: 0; border-radius: var(--r-md); background: transparent; font-size: 13px; font-weight: 500; color: var(--body); text-align: left; text-decoration: none; cursor: pointer; }
.app-pop-item:hover { background: var(--fill-hover); color: var(--ink); }
.app-pop-item.is-current { color: var(--action); font-weight: 600; background: var(--action-fill); }
.app-pop-item .app-icon { width: 16px; height: 16px; color: var(--muted); }
.app-pop-item.is-current .app-icon { color: var(--action); }
.app-pop-item.is-danger { color: var(--err); }
.app-pop-item.is-danger .app-icon { color: var(--err); }
.app-pop-item .app-pop-check { margin-left: auto; color: var(--ok); }
.app-pop-sim { margin: 6px; padding: 10px; border-radius: var(--r-md); background: var(--att-fill); border: 1px solid var(--att-line); font-size: 12px; color: var(--att); }
.app-pop-sim strong { display: block; color: var(--ink); font-size: 13px; margin-top: 2px; }
.app-pop-sim .app-btn { margin-top: 8px; width: 100%; }
.app-notif-list { max-height: 360px; overflow-y: auto; }
.app-notif-item { display: block; width: 100%; box-sizing: border-box; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line-row); background: transparent; text-align: left; cursor: pointer; }
.app-notif-item:hover { background: var(--fill-hover); }
.app-notif-item.is-unread { box-shadow: inset 3px 0 0 var(--action); background: var(--action-fill); }
.app-notif-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.app-notif-title { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.app-notif-body { font-size: 12px; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.app-notif-time { flex: none; font-size: 11.5px; color: var(--meta); margin-top: 1px; }
.app-notif-empty { padding: 28px 14px; text-align: center; font-size: 13px; color: var(--muted); }
.app-notif-empty[hidden] { display: none; }
.app-pop-foot { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; border-top: 1px solid var(--line-rule); }
.app-pop-link { border: 0; background: none; padding: 0; font-size: 12.5px; font-weight: 600; color: var(--link); cursor: pointer; }
.app-pop-link:hover { text-decoration: underline; }

/* ── Ask Q2Med column: the thread (agent-chat.js) mounts in .app-chat-mount ── */
.app-chat { flex: 0 0 var(--app-chat-w); width: var(--app-chat-w); display: flex; min-height: 0; transition: flex-basis .25s ease, width .25s ease; }
.app-chat.is-collapsed { flex-basis: var(--app-chat-strip-w); width: var(--app-chat-strip-w); background: var(--panel); border-right: 1px solid var(--line-shell); box-sizing: border-box; }
.app-chat-strip { display: none; width: var(--app-chat-strip-w); flex: none; flex-direction: column; align-items: center; padding-top: 8px; box-sizing: border-box; }
.app-chat.is-collapsed .app-chat-strip { display: flex; }
.app-chat-strip-btn { width: 40px; height: 40px; border-radius: var(--r-lg); border: 1px solid var(--line-input); background: var(--card); color: var(--action); display: grid; place-items: center; cursor: pointer; box-shadow: var(--sh-card); }
.app-chat-strip-btn:hover { border-color: var(--action-line); background: var(--action-fill); }
.app-chat-strip-btn { position: relative; }
.app-chat.has-update .app-chat-strip-btn::after { content: ''; position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%; background: var(--action); box-shadow: 0 0 0 2px var(--card); }
.app-chat-strip-label { writing-mode: vertical-rl; transform: rotate(180deg); margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .02em; white-space: nowrap; }
.app-chat-panel { flex: 1; min-width: 0; display: flex; flex-direction: column; margin: 0; background: var(--panel); border: 0; border-right: 1px solid var(--line-shell); border-radius: 0; overflow: hidden; }
.app-chat.is-collapsed .app-chat-panel { display: none; }
.app-chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line-rule); }
.app-chat-head h2 { margin: 0; flex: 1; font-size: 14px; font-weight: 600; color: var(--ink); }
.app-chat-body { flex: 1; overflow-y: auto; padding: 18px 16px; font-size: 13.5px; line-height: 1.55; color: var(--body); }
.app-chat-body p { margin: 0 0 14px; }
.app-chat-mount { flex: 1; min-height: 0; display: flex; }
.app-chat-scrim { display: none; position: fixed; inset: 0; z-index: 50; background: rgba(11, 37, 69, .32); }

/* ── Workspace temporary tabs (app-workspace.js) ─────────────────────────
   Artifacts opened from Ask Q2Med, laid exactly over the sheet so the page
   underneath is never moved or unmounted (an unsaved form survives). These
   are open documents, so they keep a boxed tab rather than page navigation. */
.app-ws { position: fixed; z-index: 40; display: flex; flex-direction: column; box-sizing: border-box; background: var(--page); border: 0; border-radius: 0; box-shadow: none; overflow: hidden; }
.app-ws[hidden] { display: none; }
.app-ws-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--line-rule); background: var(--panel); }
.app-ws-tabwrap { display: inline-flex; align-items: center; max-width: 280px; min-width: 0; }
.app-ws-tab { max-width: 100%; min-width: 0; }
.app-ws-tab .app-icon { width: 15px; height: 15px; }
.app-ws-tab-label { overflow: hidden; text-overflow: ellipsis; }
.app-ws-close { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; }
.app-ws-close:hover { background: var(--fill-hover); color: var(--ink); }
.app-ws-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 10px; }
.app-ws-pane { flex: 1; min-height: 0; overflow-y: auto; }
.app-ws-pane[hidden] { display: none; }
.app-ws-bar .app-tab { height: 30px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--r-md); font-size: 13px; }
.app-ws-bar .app-tab:hover { background: var(--fill-hover); color: var(--ink); }
.app-ws-bar .app-tab.is-active, .app-ws-bar .app-tab[aria-selected="true"] { background: var(--card); border-color: var(--line); color: var(--ink); }

/* ── Workspace sheet ──────────────────────────────────────────────────── */
main.app-sheet { flex: 1 1 auto; min-width: 0; margin: 0; background: var(--page); border: 0; border-radius: 0; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; -webkit-overflow-scrolling: touch; }

/* ── Page header: two-tone serif title, subtitle, one primary action ─────
   <header class="app-head">
     <div class="app-head-text">
       <p class="app-head-kicker">Settings</p>              (optional breadcrumb)
       <h1 class="app-head-title">Proactive <span class="app-title-accent">Shortages</span></h1>
       <p class="app-head-sub">…</p>
     </div>
     <div class="app-head-side">
       <p class="app-head-status">Updated 23 Oct · 10:02</p>   (optional)
       <div class="app-head-actions">outlined…, then ONE .app-btn-primary</div>
     </div>
   </header>
   then <nav class="app-tabs app-page-tabs"> and <div class="app-body">. */
.app-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 28px var(--page-gutter) 18px; }
.app-head-text { min-width: 0; flex: 1 1 420px; }
.app-head-kicker { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; font-size: var(--fs-meta); font-weight: 500; color: var(--meta); }
.app-head-kicker a { color: var(--meta); text-decoration: none; }
.app-head-kicker a:hover { color: var(--action); }
.app-head-title { margin: 0; font-family: var(--serif); font-size: var(--fs-title); font-weight: 600; letter-spacing: -.025em; line-height: 1.12; color: var(--navy); overflow-wrap: anywhere; }
.app-head-title.is-record { font-size: var(--fs-record); letter-spacing: -.02em; }
.app-title-accent, .app-head-title .app-title-accent { color: var(--action); }
.app-head-sub { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--body); max-width: 760px; }
.app-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.app-head-status { margin: 0; font-size: var(--fs-meta); color: var(--meta); text-align: right; }
.app-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.app-head-actions .app-btn { height: var(--control-h-lg); padding: 0 16px; font-size: 14px; }
.app-head + .app-tabs, .app-page-tabs { margin: 0 var(--page-gutter); padding: 0; }
.app-body { padding: 22px var(--page-gutter) 40px; }
.app-body-narrow { max-width: 880px; }
.app-stack { display: flex; flex-direction: column; gap: var(--page-gap); }

/* ── Tabs: page navigation, underlined; the selected tab is action blue ─── */
.app-tabs { display: flex; gap: 4px 12px; flex-wrap: wrap; padding: 0; border-bottom: 1px solid var(--line-input); }
.app-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 10px 8px 9px; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; box-sizing: border-box; font-size: 14px; font-weight: 500; color: var(--body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.app-tab:hover { color: var(--ink); }
.app-tab.is-active, .app-tab[aria-selected="true"], .app-tab[aria-current="page"] { color: var(--action); border-bottom-color: var(--action); font-weight: 600; }
.app-tab-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 99px; background: var(--fill-chip); color: var(--body); font-size: 11.5px; font-weight: 600; }
.app-tab.is-active .app-tab-count, .app-tab[aria-selected="true"] .app-tab-count { background: var(--action-fill); color: var(--action-ink); }
.app-tab-close { margin-left: 2px; border: 0; background: none; color: var(--faint); padding: 0; cursor: pointer; font-size: 14px; line-height: 1; }

/* ── Buttons: one solid blue primary per view; everything else outlined ── */
.app-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--control-h); padding: 0 14px; border-radius: var(--r-md); border: 1px solid var(--line-input); background: var(--card); color: var(--ink); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; box-sizing: border-box; }
.app-btn:hover { background: var(--fill-hover); border-color: var(--line-strong); }
.app-btn:disabled, .app-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.app-btn .app-icon { width: 16px; height: 16px; }
.app-btn-primary { background: var(--action); border-color: var(--action); color: #fff; }
.app-btn-primary:hover { background: var(--action-hover); border-color: var(--action-hover); color: #fff; }
.app-btn-secondary { color: var(--action); border-color: var(--action-line); }
.app-btn-secondary:hover { background: var(--action-fill); border-color: var(--action); }
.app-btn-quiet { border-color: transparent; background: transparent; color: var(--body); }
.app-btn-quiet:hover { background: var(--fill-hover); border-color: transparent; color: var(--ink); }
.app-btn-danger { color: var(--err); }
.app-btn-danger:hover { background: var(--err-fill); border-color: var(--err); }
.app-btn-lg { height: var(--control-h-lg); padding: 0 16px; font-size: 14px; }
.app-btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.app-btn-icon { width: var(--control-h); padding: 0; }
.app-btn-sm.app-btn-icon { width: 30px; }
.app-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--link); text-decoration: none; cursor: pointer; }
.app-link:hover { text-decoration: underline; }

/* ── Cards: white, 12px corners, soft border, generous padding ────────── */
.app-card { background: var(--card); border: 1px solid var(--line-input); border-radius: var(--r-lg); box-shadow: var(--sh-card); }
.app-card.is-selected { border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.app-card-body { padding: 20px; }
.app-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 18px 20px 12px; }
.app-card-head + .app-card-body { padding-top: 4px; }
.app-section-title { margin: 0; font-family: var(--serif); font-size: var(--fs-section); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--navy); }
.app-card-title { margin: 0; font-size: var(--fs-card); font-weight: 600; line-height: 1.35; color: var(--ink); }
.app-card-text { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.app-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--line-row); font-size: var(--fs-meta); color: var(--muted); }
.app-tile { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--fill-tile); color: var(--body); display: grid; place-items: center; flex: none; }

/* ── Stat cards: four equal cards, big number, short label ───────────── */
.app-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.app-stats.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.app-stat { display: flex; align-items: center; gap: 14px; min-width: 0; min-height: 80px; padding: 12px 16px; box-sizing: border-box; border: 1px solid var(--line-input); border-radius: var(--r-lg); background: var(--card); color: var(--navy); font: inherit; text-align: left; text-decoration: none; }
a.app-stat, button.app-stat { cursor: pointer; transition: border-color .15s ease; }
a.app-stat:hover, button.app-stat:hover { border-color: var(--line-strong); }
.app-stat.is-active, .app-stat[aria-pressed="true"], .app-stat[aria-current="true"] { border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.app-stat-icon { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; background: var(--action-fill); color: var(--action); }
.app-stat-icon .app-icon, .app-stat-icon svg { width: 24px; height: 24px; }
.app-stat-icon.is-red { background: var(--err-fill); color: var(--err); }
.app-stat-icon.is-amber { background: var(--att-fill); color: var(--att); }
.app-stat-icon.is-green { background: var(--ok-fill); color: var(--ok); }
.app-stat-icon.is-neutral { background: var(--neutral-fill); color: var(--navy); }
.app-stat-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.app-stat-value { font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -.01em; color: var(--navy); font-variant-numeric: tabular-nums; }
.app-stat-unit { font-size: 15px; font-weight: 500; color: var(--muted); }
.app-stat-label { font-size: 14px; line-height: 1.35; color: var(--body); }
.app-stat-note { font-size: var(--fs-small); line-height: 1.4; color: var(--muted); }
.app-stat-chevron { margin-left: auto; color: var(--meta); }
/* Each card sizes its own contents, so four cards survive a narrow sheet (chat open). */
.app-stat { container-type: inline-size; }
.app-stat-value { white-space: nowrap; }
@container (max-width: 200px) {
  .app-stat-icon { width: 38px; height: 38px; flex-basis: 38px; }
  .app-stat-icon .app-icon, .app-stat-icon svg { width: 20px; height: 20px; }
  .app-stat-value { font-size: 24px; }
  .app-stat-label { font-size: 13px; }
}
@container (max-width: 100px) {
  .app-stat-icon { display: none; }
  .app-stat-value { font-size: 22px; }
}

/* ── Filter chips: outlined; the selected view is a filled navy chip ──── */
.app-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.app-filter { display: inline-flex; align-items: center; gap: 8px; min-height: var(--control-h); padding: 0 14px; box-sizing: border-box; border: 1px solid var(--line-input); border-radius: var(--r-md); background: var(--card); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; }
.app-filter:hover { border-color: var(--line-strong); }
.app-filter-count { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.app-filter.is-active, .app-filter[aria-pressed="true"], .app-filter[aria-current="true"] { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.app-filter.is-active .app-filter-count, .app-filter[aria-pressed="true"] .app-filter-count, .app-filter[aria-current="true"] .app-filter-count { color: rgba(255, 255, 255, .82); }

/* ── Badges: icon + colour + text, so status never relies on colour alone ── */
.app-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r-sm); background: var(--fill-chip); color: var(--body); font-size: 12px; font-weight: 600; white-space: nowrap; }
.app-pill, .app-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; box-sizing: border-box; border-radius: var(--r-sm); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; white-space: nowrap; background: var(--fill-chip); color: var(--body); }
.app-pill svg, .app-badge svg, .app-badge .app-icon { width: 12px; height: 12px; stroke-width: 2.2; }
.app-pill-ok, .app-badge-ok { background: var(--ok-fill); color: var(--ok); }
.app-pill-att, .app-badge-att, .app-badge-listed { background: var(--att-fill); color: var(--att); }
.app-pill-err, .app-badge-err, .app-badge-shortage { background: var(--err-fill); color: var(--err); }
.app-pill-info, .app-badge-info, .app-badge-upcoming { background: var(--action-fill); color: var(--action-ink); }
.app-pill-plum { background: var(--plum-fill); color: var(--plum); }
.app-pill-rust { background: var(--rust-fill); color: var(--rust); }
.app-pill-navy { background: var(--navy); color: #fff; }
.app-badge-neutral { background: var(--neutral-fill); color: var(--muted); }
.app-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
body:not(.radar-page) :is(.app-badge-ok, .app-pill-ok, .q2-chip-green, .app-badge-att, .app-badge-listed, .app-pill-att, .q2-chip-amber, .app-badge-err, .app-badge-shortage, .app-pill-err, .q2-chip-red):not(:has(svg, .app-dot, .q2-dot, .badge-dot))::before { content: ''; flex: none; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--badge-icon) center / contain no-repeat; mask: var(--badge-icon) center / contain no-repeat; }
:is(.app-badge-ok, .app-pill-ok, .q2-chip-green) { --badge-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m5%2012%205%205%209-10%22%2F%3E%3C%2Fsvg%3E"); }
:is(.app-badge-att, .app-badge-listed, .app-pill-att, .q2-chip-amber) { --badge-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%207v5l3%202%22%2F%3E%3C%2Fsvg%3E"); }
:is(.app-badge-err, .app-badge-shortage, .app-pill-err, .q2-chip-red) { --badge-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22M12%208v4m0%204h.01%22%2F%3E%3C%2Fsvg%3E"); }
/* An IPU listing reads as a warning triangle; other amber states (review soon, late) keep the clock. */
.app-badge-listed { --badge-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%204%202.5%2020h19L12%204Z%22%2F%3E%3Cpath%20d%3D%22M12%2010v4m0%203v.1%22%2F%3E%3C%2Fsvg%3E"); }

/* ── Forms ────────────────────────────────────────────────────────────── */
.app-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.app-help { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.app-input { width: 100%; box-sizing: border-box; height: 38px; padding: 0 12px; border: 1px solid var(--line-input); border-radius: var(--r-md); background: var(--card); color: var(--ink); font-size: 14px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
textarea.app-input { height: auto; min-height: 88px; padding: 9px 12px; line-height: 1.5; resize: vertical; }
.app-input:focus { border-color: var(--action); box-shadow: var(--focus-ring); }
.app-input::placeholder { color: var(--faint); }
.app-field + .app-field { margin-top: 14px; }

.app-switch { position: relative; display: inline-flex; align-items: center; width: 38px; height: 22px; flex: none; border-radius: 99px; border: 0; padding: 0; background: var(--line-dash); cursor: pointer; transition: background .15s ease; }
.app-switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(11, 37, 69, .2); transition: transform .15s ease; }
.app-switch[aria-checked="true"] { background: var(--action); }
.app-switch[aria-checked="true"]::after { transform: translateX(16px); }

/* ── Tables: uppercase muted headings, bold primary cell, one row = one item ── */
.app-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line-input); border-radius: var(--r-lg); background: var(--card); }
.app-table { width: 100%; border-collapse: collapse; font-size: 13.5px; color: var(--body); }
.app-table th { height: 38px; padding: 0 14px; text-align: left; font-size: var(--fs-label); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--fill-row); border-bottom: 1px solid var(--line-row); white-space: nowrap; }
.app-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-row); vertical-align: middle; }
.app-table tbody tr:last-child td { border-bottom: 0; }
.app-table tbody tr:hover { background: var(--fill-hover); }
.app-table tr.is-clickable, .app-table tr[data-href] { cursor: pointer; }
.app-table .app-num { text-align: right; font-variant-numeric: tabular-nums; }
.app-table .app-strong, .app-cell-primary { font-size: 14px; font-weight: 600; color: var(--ink); }
.app-cell-meta { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.app-row-chevron { width: 16px; height: 16px; color: var(--meta); }

/* ── Data tables follow the Proactive Shortages pattern (26 Oct 2026, DESIGN_GUIDE §5) ──
   A grey header band, hairline column dividers, 14 px rows, sentence-case icon badges and a
   labelled open button. View-local table classes are listed so every table reads the same.
   Dividers sit on the right edge so a hidden column (the board's column picker) leaves no gap. */
body.app-page :is(.app-table, .sh-table, .q-table, .user-table, .brk-table) { border-collapse: separate; border-spacing: 0; }
body.app-page :is(.app-table, .sh-table, .q-table, .user-table, .brk-table) > thead > tr > th { height: 40px; padding: 10px 16px; background: var(--fill-row); color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; border-bottom: 1px solid var(--line-row); }
body.app-page :is(.app-table, .sh-table, .q-table, .user-table, .brk-table) > tbody > tr > td { padding: 14px 16px; border-bottom: 1px solid var(--line-input); }
body.app-page :is(.app-table, .sh-table, .q-table, .user-table, .brk-table) > :is(thead, tbody) > tr > :is(th, td):not(:last-child) { border-right: 1px solid var(--line-row); }
body.app-page :is(.app-table, .sh-table, .q-table, .user-table, .brk-table) > tbody > tr:last-child > td { border-bottom: 0; }
body.app-page :is(.app-table, .sh-table, .q-table, .user-table, .brk-table) .app-cell-meta { font-size: 13px; }
/* A row that opens a page ends in an outlined "Open" button; one that opens a panel says "Details". */
.app-row-open { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 10px; box-sizing: border-box; border: 1px solid var(--line-input); border-radius: var(--r-sm); background: var(--card); box-shadow: 0 1px 1px rgba(16, 24, 40, .04); color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; }
.app-row-open .app-icon, .app-row-open svg { flex: none; width: 15px; height: 15px; color: var(--meta); }
.app-row-open:hover, tr:hover .app-row-open { border-color: var(--action); color: var(--action); text-decoration: none; }
.app-row-open:hover :is(.app-icon, svg), tr:hover .app-row-open :is(.app-icon, svg) { color: var(--action); }
.app-row-open:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
/* Data previews (Data Lake files, lake intelligence) keep the file's own header wording, but share the grid. */
body.app-page :is(.lake-table, .li-table) > thead > tr > th { background: var(--fill-row); }
body.app-page :is(.lake-table, .li-table) > :is(thead, tbody) > tr > :is(th, td):not(:last-child) { border-right: 1px solid var(--line-row); }
@media (max-width: 719px) { .app-row-open { height: var(--touch-h); padding: 0 12px; } }

/* ── Side column: narrower, smaller headings, supports the main column ── */
.app-with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--page-gap); align-items: start; }
.app-aside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.app-aside-title { margin: 0; font-size: var(--fs-aside); font-weight: 600; line-height: 1.3; color: var(--navy); }

/* ── Disclosure: full-width summary with a trailing chevron ─────────── */
.app-disclosure { background: var(--card); border: 1px solid var(--line-input); border-radius: var(--r-lg); }
.app-disclosure > summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 20px; box-sizing: border-box; font-size: 14px; font-weight: 600; color: var(--ink); list-style: none; cursor: pointer; }
.app-disclosure > summary::-webkit-details-marker { display: none; }
.app-disclosure > summary::after { content: ''; flex: none; width: 7px; height: 7px; margin-left: auto; border-right: 1.5px solid var(--meta); border-bottom: 1.5px solid var(--meta); transform: rotate(45deg); }
.app-disclosure[open] > summary::after { transform: rotate(225deg); }
.app-disclosure > summary:hover { color: var(--action); }
.app-disclosure-body { padding: 0 20px 18px; }

.app-alert { padding: 12px 16px; border-radius: var(--r-md); font-size: 13.5px; line-height: 1.5; border: 1px solid transparent; }
.app-alert-ok { background: var(--ok-fill); color: var(--ok); border-color: var(--ok-line); }
.app-alert-err { background: var(--err-fill); color: var(--err); border-color: var(--err-line); }
.app-alert-att { background: var(--att-fill); color: var(--att); border-color: var(--att-line); }
.app-alert-info { background: var(--action-fill); color: var(--action-ink); border-color: var(--action-line); }
.app-empty { padding: 28px 20px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--muted); }
.app-meta { font-size: var(--fs-meta); color: var(--meta); }
.app-mono { font-family: var(--mono); font-size: 12px; }

/* ── Legacy page bodies: Tailwind + q2-* markup mapped onto the system ── */
.app-legacy {
  max-width: 1280px;
  margin: 0 auto;
  padding-bottom: 40px;
  color: var(--body);
  --color-navy: var(--navy);
  --color-page: var(--sheet);
  --color-action: var(--action);
  --color-action-hover: var(--action-hover);
  --color-brand: var(--action);
  --color-body: var(--body);
  --color-muted: var(--muted);
  --color-faint: var(--faint);
  --color-rowhover: var(--fill-hover);
  --q2-hairline: var(--line);
  --q2-hairline-strong: var(--line-input);
  --q2-grad: linear-gradient(var(--action), var(--action));
  --q2-shadow-card: var(--sh-card);
  --q2-shadow-btn: none;
}
/* Page header band (pharmacy-search .q2-band): white behind the text, the diagonal wash on the right. */
body.app-page .q2-band { border-bottom: 1px solid rgba(10, 37, 64, .08); }
.q2-band > :not(.q2-band-wash) { position: relative; }
body.app-page .auth-wash-wrap { display: none; }
body.app-page .q2-title { font-family: var(--serif); font-size: var(--fs-title); font-weight: 600; letter-spacing: -.025em; line-height: 1.12; color: var(--navy); }
body.app-page .q2-title-accent { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--action); -webkit-text-fill-color: currentColor; }
body.app-page .q2-subtitle { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--body); }
.app-legacy .q2-btn, .app-legacy .q2-btn-outline, .app-legacy .q2-btn-danger { border-radius: var(--r-md); box-shadow: none; }
.app-legacy .q2-btn:hover, .app-legacy .q2-btn-danger:hover { transform: none; }
.app-legacy .q2-card { border-radius: var(--r-lg); border-color: var(--line-input); }
body.app-page .q2-chip > svg { width: 12px; height: 12px; flex: none; }
.app-legacy.cr-page { background: transparent; font-family: inherit; }
.app-legacy.cr-page .cr-header { background: transparent; border-bottom-color: var(--line-rule); }
.app-legacy.cr-page button.cr-primary { background: var(--action); border-color: var(--action); }
.app-legacy.cr-page a { color: var(--link); }
.app-legacy-center { min-height: 100%; display: flex; align-items: center; justify-content: center; max-width: none; padding: 48px 16px; box-sizing: border-box; }
/* Wide pages (the radar's 1280px tables, the case board): the whole sheet width, at least its height. */
.app-legacy-wide { max-width: none; min-height: 100%; box-sizing: border-box; }
/* Full-height pages whose panes scroll on their own (case record, SPC review): exactly the sheet. */
.app-legacy-fill { max-width: none; height: 100%; padding-bottom: 0; box-sizing: border-box; }
/* A page that draws its own sheet (the full-page chat): the shell sheet is only a frameless slot. */
body.app-page.app-own-sheet main.app-sheet { margin: 0; border: 0; border-radius: 0; background: transparent; overflow: hidden; }

/* ── Bare shell: gate pages with no rail (2FA required, subscribe, no site) ── */
body.app-page.app-bare { overflow: auto; }
body.app-page.app-bare .app-shell { display: block; height: auto; min-height: 100vh; min-height: 100dvh; }
body.app-page.app-bare main.app-sheet { margin: 0; border: 0; border-radius: 0; background: var(--page); overflow: visible; min-height: 100vh; min-height: 100dvh; }

/* ── Gate pages: sign-in, sign-up, password, invite, 2FA verify, no site,
   subscribe, blocked request (body.auth-page): one centred white card on the
   ground, logo, serif two-tone title, full-width primary. ── */
body.auth-page { min-height: 100vh; min-height: 100dvh; margin: 0; display: flex; align-items: center; justify-content: center; padding: 48px 16px; box-sizing: border-box; background: var(--page); font-family: var(--sans); color: var(--body); }
.auth-card { width: 100%; max-width: 420px; box-sizing: border-box; padding: 32px; background: var(--card); border: 1px solid var(--line-input); border-radius: var(--r-lg); box-shadow: var(--sh-card); }
.auth-top { margin-bottom: 26px; text-align: center; }
.auth-logo { display: inline-flex; }
.auth-logo img { display: block; height: 26px; width: auto; }
.auth-heading { margin: 22px 0 0; font-family: var(--serif); font-size: var(--fs-title); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; color: var(--navy); }
.auth-sub { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-form .app-input { height: 42px; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; font-size: 13.5px; }
.auth-check { display: inline-flex; align-items: center; gap: 8px; color: var(--body); cursor: pointer; }
.auth-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--action); cursor: pointer; }
.auth-submit { width: 100%; height: var(--control-h-lg); margin-top: 4px; font-size: 14.5px; }
.auth-alert { margin-top: 20px; }
.auth-alert.is-top { margin: 0 0 20px; }
.auth-alert a { color: inherit; font-weight: 600; text-decoration: underline; }
.auth-link { color: var(--link); font-weight: 600; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }
.auth-foot { margin: 24px 0 0; text-align: center; font-size: 13.5px; color: var(--muted); }
@media (max-width: 480px) { body.auth-page { padding: 24px 16px; } .auth-card { padding: 26px 20px; } .auth-heading { font-size: var(--fs-title-phone); } }

/* ── Widgets written for the old 280px sidebar ───────────────────────── */
@media (min-width: 720px) {
  body.app-page #feedback-panel, body.app-page #support-panel { left: calc(var(--app-rail-w) + 6px); right: auto; top: auto; bottom: 12px; max-width: calc(100vw - var(--app-rail-w) - 18px); }
  body.app-page #feedback-panel { width: 360px; }
  body.app-page #support-panel { width: 380px; height: min(560px, calc(100dvh - 24px)); }
}

/* ── Case page (views/app/shortages/case.ejs) ────────────────────────────
   Header, the eight-tab strip, the Case form's twelve fields, the identity
   card and the case-team card. The old record sections inside the tabs keep
   their sf-* rules in the view, re-pointed at these tokens. */
.app-case { container: app-case / inline-size; min-height: 100%; display: flex; flex-direction: column; color: var(--body); }
.app-case-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px 24px; padding: 24px var(--page-gutter) 16px; }
.app-case-head-text { min-width: 0; }
.app-case-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.app-case-crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--fs-meta); font-weight: 500; color: var(--meta); }
.app-case-crumbs a { color: var(--meta); text-decoration: none; }
.app-case-crumbs a:hover { color: var(--action); }
.app-case-title { margin: 6px 0 0; font-family: var(--serif); font-size: var(--fs-record); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--navy); overflow-wrap: anywhere; }
.app-case-strength { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.app-case-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.app-case-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; box-sizing: border-box; border-radius: var(--r-sm); background: var(--fill-chip); font-size: 12px; font-weight: 600; color: var(--body); white-space: nowrap; }
.app-case-tag.is-mono, .app-case-mono { font-family: var(--mono); font-size: 12px; font-weight: 500; }
.app-case-tag[hidden] { display: none; }
.app-case-saved { justify-content: flex-end; min-height: 18px; }
.app-case-owner { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-meta); color: var(--muted); text-decoration: none; }
.app-case-owner:hover { color: var(--action); }

.app-case-tabs { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 4px 6px; padding: 0 var(--page-gutter); background: linear-gradient(var(--line-input), var(--line-input)) var(--page-gutter) 100% / calc(100% - 2 * var(--page-gutter)) 1px no-repeat, var(--page); }
.app-case-tabs .app-tab { position: relative; }
.app-case-tab-dot { display: none; width: 6px; height: 6px; border-radius: 50%; background: var(--att-dot); }
.app-case-tabs .app-tab[data-has-proposal="true"] .app-case-tab-dot { display: inline-block; }

.app-case-body { flex: 1; padding: 22px var(--page-gutter) 32px; }
.app-case-panel { display: flex; flex-direction: column; gap: var(--page-gap); }
.app-case-panel[hidden] { display: none !important; }
.app-case-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px var(--page-gutter); border-top: 1px solid var(--line-rule); font-size: var(--fs-small); color: var(--muted); }
.app-case-foot p { margin: 0; }

.app-case-top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--page-gap); align-items: start; }
.app-case-form-card { padding: 20px; }
.app-case-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.app-case-progress { font-size: var(--fs-small); color: var(--meta); }
.app-case-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-top: 14px; }
.app-case-fact { min-width: 0; }
.app-case-fact-label { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.app-case-req { color: var(--err); }
.app-case-fact-value { display: flex; align-items: center; gap: 8px; min-height: 38px; box-sizing: border-box; padding: 7px 10px; border-radius: var(--r-md); border: 1px dashed var(--line-dash); background: var(--fill-hover); font-size: 13px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.app-case-fact-value.is-filled { border-style: solid; border-color: var(--line-input); background: var(--card); }
.app-case-fact-value.is-empty { color: var(--muted); font-weight: 400; }
.app-case-fact-value.is-unconfirmed { border-style: solid; border-color: var(--att-line); background: var(--att-fill); color: var(--att); }
.app-case-fact-src { margin-left: auto; padding-left: 6px; font-size: var(--fs-small); font-weight: 500; color: var(--meta); white-space: nowrap; }
.app-case-fact .sf-input { min-height: 38px; }
.app-case-form-note { margin: 14px 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--muted); }

.app-case-team { padding: 20px; }
.app-case-team-head { display: flex; align-items: flex-start; gap: 10px; }
/* The case-team column supports the case form beside it, so its title sits one step below the form's part headings (DESIGN_GUIDE §1 point 11). */
.app-case-team .app-case-team-head .app-card-title { font-size: 14px; }
.app-case-team-sub { margin: 2px 0 0; font-size: var(--fs-small); color: var(--muted); }
.app-case-jobs { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.app-case-job { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); background: var(--fill-row); }
.app-case-ring { width: 18px; height: 18px; flex: none; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-dash); display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; }
.app-case-ring svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.app-case-job[data-s="done"] .app-case-ring { background: var(--navy); box-shadow: none; }
.app-case-job[data-s="running"] .app-case-ring { box-shadow: inset 0 0 0 2px var(--navy); animation: app-case-pulse 1.2s ease-in-out infinite; }
.app-case-job[data-s="failed"] .app-case-ring { background: var(--att-dot); box-shadow: none; }
.app-case-job-text { display: flex; flex-direction: column; min-width: 0; }
.app-case-job-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.app-case-job-detail { font-size: 12px; color: var(--muted); line-height: 1.4; }
.app-case-job[data-s="failed"] .app-case-job-detail { color: var(--att); }
.app-case-team-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-row); }
.app-case-team-note { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
@keyframes app-case-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.app-case-ask { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border: 1px solid var(--line-input); border-radius: var(--r-lg); background: var(--card); }
.app-case-ask p { flex: 1; margin: 0; font-size: 13px; line-height: 1.5; color: var(--body); }
.app-case-ask strong { color: var(--ink); }

.app-case-identity-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 20px; border: 1px solid var(--line-input); border-radius: var(--r-lg); background: var(--card); font-size: 13.5px; color: var(--body); }
.app-case-identity-line p { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.app-case-identity-line strong { color: var(--ink); }
.app-case-identity-tick { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-fill); color: var(--ok); flex: none; }
.app-case-identity-tick.is-manual { background: var(--fill-chip); color: var(--body); }
.app-case-identity-tick .app-icon { width: 13px; height: 13px; stroke-width: 2.4; }
.app-case-identity-line + .app-case-identity-card { margin-top: 8px; }
.app-case-identity-card { padding: 20px; border-color: var(--att-line); }
.app-case-identity-card[hidden], .app-case-identity-panel[hidden] { display: none; }
.app-case-identity-head { display: flex; align-items: flex-start; gap: 12px; }
.app-case-identity-text { min-width: 0; }
.app-case-identity-kicker { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: var(--r-sm); background: var(--att-fill); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--att); }
.app-case-identity-claim { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--body); overflow-wrap: anywhere; }
.app-case-identity-claim strong { color: var(--ink); font-weight: 600; }
.app-case-identity-note { margin: 4px 0 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.app-case-match { font-size: 12px; font-weight: 600; color: var(--att); white-space: nowrap; }
.app-case-identity-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.app-case-identity-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-row); }
.app-case-identity-sub { margin: 0 0 8px; font-size: 12px; color: var(--muted); line-height: 1.45; }
.app-case-identity-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.app-case-identity-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); background: var(--fill-row); }
.app-case-identity-list li.app-case-identity-empty { display: block; font-size: 12.5px; color: var(--muted); }
.app-case-identity-option { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-case-identity-name { font-size: 13px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.app-case-identity-meta { font-size: 12px; color: var(--muted); }
.app-case-identity-panel .app-input + .app-case-identity-list { margin-top: 8px; }
.app-case-identity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.app-case-identity-msg { margin: 10px 0 0; font-size: 12.5px; color: var(--body); }
.app-case-identity-msg:empty { display: none; }
.app-case-link { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--link); cursor: pointer; }
.app-case-link:hover { text-decoration: underline; }

.app-case-stub { display: flex; align-items: flex-start; gap: 14px; padding: 20px; background: var(--card); box-shadow: none; }
.app-case-stub .app-card-text { max-width: 640px; }
.app-case-stub-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.app-case-tasks .app-card-text { max-width: 720px; }

.app-case-acts { position: relative; list-style: none; margin: 10px 0 0; padding: 0; }
.app-case-acts::before { content: ''; position: absolute; left: 12.5px; top: 14px; bottom: 14px; width: 1.5px; background: var(--line); }
.app-case-act { position: relative; display: flex; gap: 11px; padding: 7px 0; }
.app-case-av { position: relative; z-index: 1; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--fill-avatar); display: grid; place-items: center; font-size: 10px; font-weight: 600; color: var(--body); }
.app-case-av.is-system { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.app-case-av.is-system img { display: block; width: 16px; height: auto; }
.app-case-act-text { margin: 0; font-size: 13px; line-height: 1.45; color: var(--body); overflow-wrap: anywhere; }
.app-case-act-text strong { color: var(--ink); font-weight: 600; }
.app-case-act-meta { margin: 1px 0 0; font-size: var(--fs-small); color: var(--meta); }
.app-case-empty { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); }
.app-case-acts + .app-case-acts { margin-top: 0; }
.app-case-activity-card .app-case-link { margin-top: 8px; }

.sf-site-table tr.app-case-site-focus td { background: var(--att-fill); }
.sf-site-table tr.app-case-site-focus td:first-child { box-shadow: inset 3px 0 0 var(--att-dot); }

@container app-case (max-width: 860px) {
  .app-case-top { grid-template-columns: minmax(0, 1fr); }
}
@container app-case (max-width: 560px) {
  .app-case-facts, .app-case-identity-grid { grid-template-columns: minmax(0, 1fr); }
  .app-case-ask { flex-wrap: wrap; }
}
@media (max-width: 719px) {
  .app-case-head { flex-direction: column; padding: 20px var(--page-gutter) 12px; }
  .app-case-head-side { align-items: flex-start; }
  .app-case-tabs { position: static; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .app-case-body { padding-top: 18px; }
  .app-case-title { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .app-case-job[data-s="running"] .app-case-ring { animation: none; }
}

/* The step guide under the case header (public/js/app-case-guide.js,
   docs-v2/SHORTAGE_CASE_FLOW_PLAN.md): the next step and its one action,
   then every step done / current / to do. Tabs carry the step numbers. */
.app-case-guide { min-width: 0; margin: 0 var(--page-gutter) 14px; padding: 14px 18px 12px; }
.app-case-guide[hidden] { display: none; }
.app-guide-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.app-guide-now { min-width: 0; flex: 1 1 320px; }
.app-guide-kicker { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--action-ink); }
.app-guide-title { margin: 2px 0 0; font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: var(--navy); }
.app-guide-detail { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--body); overflow-wrap: anywhere; }
.app-guide-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.app-guide-actions .app-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-guide-steps { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line-row); list-style: none; }
.app-guide-step { display: inline-flex; align-items: center; }
.app-guide-step + .app-guide-step::before { content: ""; width: 14px; height: 1px; margin: 0 4px 0 0; background: var(--line-strong); }
.app-guide-step[data-optional="true"]::before { background: none; border-top: 1px dashed var(--line-strong); }
.app-guide-step-link { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 2px 8px 2px 3px; border-radius: 99px; font-size: 12.5px; font-weight: 500; color: var(--body); text-decoration: none; }
.app-guide-step-link:hover { background: var(--fill-hover); color: var(--ink); }
.app-guide-step-link:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.app-guide-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--fill-chip); color: var(--muted); font-size: 11.5px; font-weight: 700; flex: none; }
.app-guide-mark svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.app-guide-step[data-s="done"] .app-guide-mark { background: var(--ok-fill); color: var(--ok); }
.app-guide-step[data-s="done"] .app-guide-step-link { color: var(--muted); }
.app-guide-step[data-s="current"] .app-guide-mark { background: var(--action); color: #fff; }
.app-guide-step[data-s="current"] .app-guide-step-link { color: var(--ink); font-weight: 600; background: var(--action-fill); }
.app-guide-step[data-s="blocked"] .app-guide-step-link { color: var(--faint); }
/* The case at a glance (Gary's QA 27 Oct, docs-v2/SHORTAGE_CASE_QA_27OCT.md #13): five tiles
   under the header, each opening its tab; colour only where it means something. */
.app-case-dash { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 var(--page-gutter) 14px; }
.app-dash-tile { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 12px 14px 13px; border: 1px solid var(--line-input); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--sh-card); color: var(--navy); text-decoration: none; transition: border-color .15s ease; }
.app-dash-tile:hover { border-color: var(--line-strong); }
.app-dash-tile:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.app-dash-k { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.app-dash-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--line-dash); flex: none; }
.app-dash-v { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: var(--navy); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.app-dash-v.is-name { font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: 2.6em; }
.app-dash-note { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.app-dash-tile.is-red .app-dash-k::before { background: var(--err-dot); }
.app-dash-tile.is-red .app-dash-v { color: var(--err); }
.app-dash-tile.is-green .app-dash-k::before { background: var(--ok-dot); }
.app-dash-tile.is-green .app-dash-note { color: var(--ok); font-weight: 600; }
.app-dash-tile.is-amber .app-dash-k::before { background: var(--att-dot); }
.app-dash-tile.is-blue .app-dash-k::before { background: var(--action); }
@container app-case (max-width: 1100px) { .app-dash-v { font-size: 19px; } .app-dash-v.is-name { font-size: 14px; } .app-dash-tile { padding: 11px 12px 12px; } }
@container app-case (max-width: 760px) { .app-case-dash { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container app-case (max-width: 480px) { .app-case-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#case-sourcing .sf-sourcing-row { grid-template-columns: 210px minmax(0, 1fr); }

/* The case form's numbered parts (like the old record's numbered sections). */
.app-part-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.app-part-n { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; margin-top: 1px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 13.5px; font-weight: 700; }
.app-part-text { flex: 1; min-width: 0; }
.app-part-title { margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--navy); }
.app-part-sub { margin: 2px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.app-part-head .app-case-progress { flex: none; margin-top: 6px; }
.app-part-fill { flex: none; }
.app-part-fill .app-icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#case-details .sf-section-title, #case-verification .sf-section-title { font-size: 16px; }
.app-memory[hidden] { display: none; }

/* Cost of the shortage: the money first, large (red extra spend, green saving). */
.app-cost-headline { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 4px; }
.app-cost-amount { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.app-cost-headline.is-spend .app-cost-amount { color: var(--err); }
.app-cost-headline.is-saving .app-cost-amount { color: var(--ok); }
.app-cost-rate { font-size: 13px; font-weight: 500; color: var(--muted); }
#cost-summary [data-option-cost] > strong { font-size: 14px; color: var(--ink); }
#cost-summary [data-option-cost] p { margin: 4px 0 0; font-size: 13px; color: var(--body); }
#cost-summary [data-option-cost] p:last-child { font-size: 12px; color: var(--muted); }

/* A tab's step: its bar at the top (one action), the Next link at the bottom, and its mark in the tab strip. */
.app-step-slot:empty { display: none; }
.app-step-bar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--line-input); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--sh-card); }
.app-step-bar[data-s="current"] { border-color: var(--action-line); box-shadow: inset 4px 0 0 var(--action), var(--sh-card); }
.app-step-mark { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--fill-chip); color: var(--muted); font-size: 15px; font-weight: 700; }
.app-step-mark svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.app-step-bar[data-s="current"] .app-step-mark { background: var(--action); color: #fff; }
.app-step-bar[data-s="done"] .app-step-mark { background: var(--ok-fill); color: var(--ok); }
.app-step-text { flex: 1; min-width: 0; }
.app-step-kicker { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--meta); }
.app-step-bar[data-s="current"] .app-step-kicker { color: var(--action-ink); }
.app-step-bar[data-s="done"] .app-step-kicker { color: var(--ok); }
.app-step-title { margin: 1px 0 0; font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; color: var(--navy); }
.app-step-detail { margin: 3px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--body); overflow-wrap: anywhere; }
.app-step-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.app-step-actions .app-btn svg, .app-step-next .app-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app-step-next { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; padding: 14px 0 0; border-top: 1px solid var(--line-rule); font-size: 13.5px; font-weight: 600; color: var(--body); }
.app-case-tab-mark { display: none; }
.app-case-tabs .app-tab[data-step-state="done"] .app-case-tab-mark { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 5px; border-radius: 50%; background: var(--ok-fill); color: var(--ok); }
.app-case-tab-mark svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.app-case-tabs .app-tab[data-step-state="current"] .app-case-tab-mark { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--action); }
.app-case-tabs .app-tab[data-step-state="current"] .app-case-tab-mark svg { display: none; }
@container app-case (max-width: 640px) { .app-step-bar { flex-wrap: wrap; } .app-step-actions { width: 100%; } }
.app-tab.is-reference { margin-inline-start: 10px; }
.app-case-tabs .app-tab { padding-inline: 6px; flex: none; }
.app-tab.is-reference::before { content: ""; position: absolute; left: -12px; top: 12px; bottom: 12px; width: 1px; background: var(--line-strong); }
.app-case-part { margin: 0 0 2px; font-size: var(--fs-meta); font-weight: 500; color: var(--meta); }
.app-case-verified, .app-case-owner-line { margin: 2px 0 0; font-size: 13px; color: var(--body); }
.app-case-owner-line a { color: var(--link); font-weight: 600; text-decoration: none; }
.app-case-owner-line a:hover { text-decoration: underline; }
.app-case-lake { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--line-input); border-radius: var(--r-md); background: var(--panel); }
.app-case-lake[hidden] { display: none; }
.app-case-lake-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.app-case-lake-title { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.app-case-lake-note { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--body); }
.app-case-lake-note:first-child { margin-top: 0; }
.app-case-lake-note a { color: var(--link); font-weight: 600; }
.app-case-lake-caveat { color: var(--muted); font-size: 12.5px; }
.app-case-lake-kicker { font-weight: 600; color: var(--ink); margin-right: 4px; }
.app-case-lake-src, .app-case-lake-pack { color: var(--muted); font-size: 12px; }
.app-case-lake-listed { display: block; margin-bottom: 2px; }
.app-case-pack { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.app-case-pack-choices { flex-wrap: wrap; }
.app-case-pack-entry { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.app-case-pack-entry .sf-input { flex: 1 1 220px; min-width: 0; }
.app-case-pack .app-case-form-note { margin: 0; }
.app-case-lake-cost { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.app-case-lake-table { overflow-x: auto; border: 1px solid var(--line-input); border-radius: var(--r-md); background: var(--card); }
.app-case-lake-table .app-table td { padding: 8px 12px; }
.app-case-lake-table .app-table th { height: 32px; padding: 0 12px; }
.app-case-review { margin-bottom: 4px; }
.app-case-review .app-case-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.app-case-review-links { margin: 8px 2px 0; font-size: 13px; color: var(--muted); }
.app-case-review-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.app-case-measures { margin-top: 14px; }
.app-case-signoff-steps { margin-bottom: 14px; }
.app-case-signoff-steps .sf-taskcard { border: 0; border-radius: 0; box-shadow: none; padding: 0; background: transparent; }
/* Step 7: Owner and Pharmacist sign-off side by side, each with its controls on the same line (QA #7). */
.app-signoff-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 12px; align-items: stretch; }
.app-signoff-box { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px 16px; border: 1px solid var(--line-input); border-radius: var(--r-md); background: var(--card); }
.app-signoff-top { flex: 1; min-width: 0; }
.app-signoff-state { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--body); overflow-wrap: anywhere; }
.app-signoff-controls { display: flex; gap: 8px; align-items: center; }
.app-signoff-controls .sf-input { flex: 1; min-width: 0; height: 36px; min-height: 36px; font-size: 13px; }
.app-signoff-controls button { flex: none; height: 36px; font-size: 12.5px; white-space: nowrap; }
.app-signoff-note { width: 100%; margin-top: 10px; font-size: 13px; }
.app-signoff-provenance { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-row); font-size: 12.5px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.app-signoff-provenance p { margin: 4px 0 0; }
@container app-case (max-width: 720px) { .app-signoff-grid { grid-template-columns: minmax(0, 1fr); } }
#case-stock .sf-site-table { min-width: 760px; }
#case-stock .sf-site-table td:first-child { white-space: nowrap; }
.app-case-consultant > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--link); margin: 4px 0 8px; }
@container app-case (max-width: 720px) {
  .app-case-guide { padding: 12px 14px 10px; }
  .app-guide-steps { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .app-guide-step-label { white-space: nowrap; }
}

/* ── SPC review (views/app/shortages/spc-review.ejs) ─────────────────────
   The full review behind "Start full review": header with the short product
   beside the option, the review card (its sf-* rules stay in the view,
   re-pointed at these tokens) and the decision box Mark complete opens. */
.app-review { container: app-review / inline-size; min-height: 100%; display: flex; flex-direction: column; color: var(--body); }
.app-review-head { padding: 24px var(--page-gutter) 18px; border-bottom: 1px solid var(--line-input); }
.app-review-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.app-review-head-text { min-width: 0; }
.app-review-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.app-review-pills { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.app-review-back { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.app-review-title { margin: 6px 0 0; font-family: var(--serif); font-size: var(--fs-record); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; color: var(--navy); }
.app-review-compare { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 12px; margin-top: 16px; }
.app-review-product { min-width: 0; padding: 14px 16px; border: 1px solid var(--line-input); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--sh-card); }
.app-review-product.is-option { border-color: var(--action-line); }
.app-review-product-k { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.app-review-product.is-option .app-review-product-k { color: var(--action-ink); }
.app-review-product-name { margin-top: 3px; font-size: 15px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.app-review-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12px; color: var(--body); }
.app-review-facts[hidden] { display: none; }
.app-review-fact { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; }
.app-review-fact-k { font-size: var(--fs-small); font-weight: 600; color: var(--muted); }
.app-review-fact-v { overflow-wrap: anywhere; }
.app-review-fact-v.is-empty { color: var(--muted); }
.app-review-vs { align-self: center; font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--meta); }
.app-review-body { flex: 1; padding: 22px var(--page-gutter) 32px; }
.app-review-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.app-review-signoff { padding: 20px; background: var(--ok-fill); border: 1px solid var(--ok-line); border-radius: var(--r-lg); }
.app-review-again { margin-top: 10px; width: 100%; }
.app-review-again[hidden] { display: none; }
.app-review-decision { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding: 14px 16px; background: var(--card); border: 1px solid var(--att-line); border-radius: var(--r-lg); box-shadow: var(--sh-card); }
.app-review-decision[hidden] { display: none; }
.app-review-decision[data-state="settled"], .app-review-decision[data-state="none"] { border-color: var(--line); }
.app-review-decision-text { flex: 1; min-width: 220px; }
.app-review-decision-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.app-review-decision-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.app-review-decision-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 7px 10px; border-radius: var(--r-md); background: var(--att-fill); font-size: 12.5px; color: var(--body); }
.app-review-decision-list li[data-state="applied"] { background: var(--ok-fill); }
.app-review-decision-list li[data-state="discarded"], .app-review-decision-list li[data-state="stale"] { background: var(--fill-row); }
.app-review-decision-field { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.app-review-decision-diff s { color: var(--muted); }
.app-review-decision-diff b { color: var(--ink); }
.app-review-decision-state { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted); }
.app-review-decision-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); }
.app-review-decision-note:empty { display: none; }
.app-review-decision-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.app-review-decision-actions [hidden] { display: none; }
@container app-review (max-width: 760px) {
  .app-review .sf-cmp-colhead, .app-review .sf-cmp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; }
  .app-review .sf-cmp-colhead > div:first-child { display: none; }
  .app-review .sf-cmp-label { grid-column: 1 / -1; padding-top: 0; }
  .app-review .sf-section-sub, .app-review .app-review-indent { margin-inline-start: 0; }
  .app-review .sf-grid2 { grid-template-columns: minmax(0, 1fr); }
}
@container app-review (max-width: 560px) {
  .app-review-compare, .app-review-pair { grid-template-columns: minmax(0, 1fr); }
  .app-review-vs { display: none; }
}
@media (max-width: 719px) {
  .app-review-head { padding: 20px var(--page-gutter) 14px; }
  .app-review-head-row { flex-direction: column; }
  .app-review-head-side { align-items: flex-start; }
  .app-review-pills { justify-content: flex-start; }
  .app-review-body { padding: 18px var(--page-gutter) 24px; }
  .app-review-title { font-size: 26px; }
}

/* ── Narrower screens ─────────────────────────────────────────────────── */
@media (max-width: 1099px) {
  .app-chat, .app-chat:not(.is-collapsed) { flex-basis: var(--app-chat-strip-w); width: var(--app-chat-strip-w); }
  .app-chat:not(.is-collapsed) .app-chat-strip { display: flex; }
  .app-chat:not(.is-collapsed) .app-chat-panel { position: fixed; z-index: 60; left: var(--app-rail-w); top: 0; bottom: 0; width: min(var(--app-chat-w), calc(100vw - var(--app-rail-w) - 16px)); box-shadow: var(--sh-pop); }
  /* The overlay column behaves as a dialog: a scrim behind it, Esc and outside click close it. */
  .app-chat:not(.is-collapsed) ~ .app-chat-scrim { display: block; }
  body:has(.app-chat:not(.is-collapsed)) #help-fab { display: none; }
  .app-with-aside { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 899px) {
  .app-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 719px) {
  body.app-page { overflow: auto; }
  .app-shell { flex-direction: column; height: auto; min-height: 100vh; min-height: 100dvh; }
  .app-rail { flex: none; width: auto; height: 56px; flex-direction: row; gap: 0; padding: 0 10px; position: sticky; top: 0; z-index: 30; background: var(--rail-bg); }
  .app-rail-mark { display: flex; align-items: center; height: 42px; padding: 0 8px 0 0; width: 28px; }
  .app-rail-mark img { width: 28px; }
  .app-rail-item { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: var(--r-md); }
  .app-rail-label { display: none; }
  .app-rail-btn { width: 40px; height: 42px; }
  .app-rail-avatar { flex: none; width: 40px; height: 40px; margin: 0 0 0 4px; }
  /* Phones: Ask Q2Med is a button at the foot of the screen that opens over the page. */
  .app-chat, .app-chat:not(.is-collapsed) { position: fixed; z-index: 55; left: 12px; bottom: 12px; width: auto; flex: none; }
  .app-chat .app-chat-strip, .app-chat:not(.is-collapsed) .app-chat-strip { display: flex; width: auto; padding: 0; }
  .app-chat-strip-label { display: none; }
  .app-chat:not(.is-collapsed) .app-chat-strip { display: none; }
  .app-chat:not(.is-collapsed) .app-chat-panel { left: 0; right: 0; top: 56px; bottom: 0; width: auto; margin: 0; border-radius: 0; border-width: 1px 0 0; }
  main.app-sheet { margin: 0; overflow: visible; }
  .app-pop { left: 8px; right: 8px; width: auto; top: 62px; bottom: auto; }
  body.app-page { --page-gutter: 18px; }
  /* Room under the content for the floating Ask Q2Med and help buttons. */
  main.app-sheet { padding-bottom: 88px; }
  .app-chat-strip-btn { width: var(--touch-h); height: var(--touch-h); }
  .app-input { height: var(--touch-h); }
  /* Tab strips scroll sideways; a fade at the edge says there is more. */
  .app-tabs { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); padding-right: 24px; }
  .app-head { padding: 20px var(--page-gutter) 14px; }
  .app-head-side { align-items: flex-start; }
  .app-head-status { text-align: left; }
  .app-head-actions { justify-content: flex-start; }
  .app-head-actions .app-btn, .app-btn, .app-filter { min-height: var(--touch-h); }
  .app-body { padding: 18px var(--page-gutter) 32px; }
  .app-head-title { font-size: var(--fs-title-phone); }
  .app-head-title.is-record { font-size: 24px; }
  body.app-page .q2-title { font-size: var(--fs-title-phone); }
  .app-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .app-stat { gap: 10px; padding: 12px; }
  .app-stat-icon { width: 36px; height: 36px; flex-basis: 36px; }
  .app-stat-label { font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .app-chat, .app-switch, .app-switch::after { transition: none; }
}

@media print {
  .app-chat, .app-ws { display: none !important; }
}

/* ── Licensed options tab (views/app/shortages/_options_tab.ejs, P3) ───── */
.app-opts { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.app-opts-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.app-opts-sub { margin: 4px 0 0; font-size: 14px; color: var(--muted); line-height: 1.5; max-width: 66ch; }
.app-opts-formulary { margin: 0; font-size: var(--fs-meta); color: var(--meta); }
.app-opts-suggestion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid var(--att-line); background: var(--att-fill); border-radius: var(--r-md); }
.app-opts-suggestion[hidden] { display: none; }
.app-opts-suggestion p { margin: 0; flex: 1 1 280px; font-size: 13px; color: var(--ink); line-height: 1.45; }
.app-opts-suggestion-ico { color: var(--att); font-size: 15px; }
.app-opts-suggestion-actions { display: flex; gap: 8px; }
.app-opts-tools { display: flex; flex-direction: column; gap: 8px; }
.app-opts-tools[hidden] { display: none; }
.app-opts-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.app-opts-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--line-input); border-radius: var(--r-md); background: var(--card); color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.app-opts-chip:hover { border-color: var(--line-strong); }
.app-opts-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--card); font-weight: 600; }
.app-opts-chip-count { font-weight: 600; font-variant-numeric: tabular-nums; opacity: .8; }
.app-opts-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.app-opts-search { flex: 1 1 240px; max-width: 360px; }
.app-opts-status { flex: 0 0 auto; width: auto; min-width: 150px; }
.app-opts-count { margin: 0; font-size: var(--fs-meta); color: var(--muted); }
.app-opts-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line-input); border-radius: var(--r-lg); }
.app-opts-table-wrap:empty { display: none; }
.app-opts-table td { vertical-align: top; }
.app-opts-table th[aria-sort] { padding: 0 8px; }
.app-opts-sort { border: 0; background: none; padding: 0 6px; height: 32px; font: inherit; font-size: var(--fs-label); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.app-opts-sort:hover { color: var(--ink); }
.app-opts-name { font-weight: 600; color: var(--ink); }
.app-opts-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.app-opts-prov, .app-opts-register { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.app-opts-lane { font-size: 12px; color: var(--body); margin-right: 4px; }
.app-opts-row.is-suggested { background: var(--att-fill); }
.app-opts-row.is-suggested:hover { background: var(--att-fill); }
.app-opts-actions { text-align: right; }
.app-opts-actions-in { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.app-opts-actions-in .app-btn { white-space: nowrap; }
.app-opts-compare { border: 0; background: none; padding: 2px 0; font: inherit; font-size: 12px; font-weight: 600; color: var(--link); cursor: pointer; white-space: nowrap; }
.app-opts-compare:hover { text-decoration: underline; }
.app-opts-closest-actions .app-opts-compare { align-self: center; margin-right: 6px; }
.app-opts-title { margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--navy); }
.app-opts-sub strong { color: var(--ink); }
.app-opts-pres { min-width: 110px; }
.app-opts-x { border: 0; background: none; color: var(--att); font-size: 16px; line-height: 1; padding: 0 6px; cursor: pointer; }
.app-opts-x:hover { color: var(--err); }
.app-opts-none td { color: var(--muted); font-size: 13px; }
.app-opts-empty { margin: 0; }
.app-opts-editor { border-top: 1px solid var(--line-row); padding-top: 12px; }
.app-opts-editor > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--link); }
.app-opts-editor-note { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.app-opts-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@container app-case (max-width: 720px) {
  .app-opts { padding: 14px; }
  .app-opts-search { max-width: none; }
}
/* Six columns that fit beside the Ask Q2Med column: the action is always on screen (QA #2). */
.app-opts-table { table-layout: fixed; width: 100%; min-width: 760px; }
.app-opts-table th:nth-child(1) { width: 25%; } .app-opts-table th:nth-child(2) { width: 19%; } .app-opts-table th:nth-child(3) { width: 14%; }
.app-opts-table th:nth-child(4) { width: 16%; } .app-opts-table th:nth-child(5) { width: 11%; } .app-opts-table th:nth-child(6) { width: 15%; }
.app-opts-table td { overflow-wrap: anywhere; }
.app-opts-table .app-pill { white-space: normal; height: auto; min-height: 22px; line-height: 1.35; padding-top: 2px; padding-bottom: 2px; }
.app-opts-option { min-width: 0; }
/* Choosing one option for SPC review (docs-v2/SHORTAGE_CASE_FLOW_PLAN.md F3/F5) */
.app-opts-closest { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--action-line); border-radius: var(--r-lg); background: var(--action-fill); }
.app-opts-closest.is-chosen { border-color: var(--ok-line); background: var(--ok-fill); }
.app-opts-closest-text { min-width: 0; flex: 1 1 280px; }
.app-opts-closest-text p { margin: 0; }
.app-opts-closest-k { font-size: var(--fs-small); font-weight: 600; color: var(--action-ink); }
.app-opts-closest.is-chosen .app-opts-closest-k { color: var(--ok); }
.app-opts-closest-text .app-opts-closest-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 2px; font-size: 15px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.app-opts-closest-text .app-opts-closest-meta { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--body); }
.app-opts-closest-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.app-opts-choose-error { margin: 0; }
.app-opts-choose-error[hidden] { display: none; }
.app-opts-row.is-chosen, .app-opts-row.is-chosen:hover { background: var(--ok-fill); }
.app-opts-status-cell { display: flex; flex-wrap: wrap; gap: 4px; }