/* ══════════════════════════════════════════════════════════════════════════
   app-chrome.css — ONE header, ONE control shape, ONE phone baseline
   (owner feedback 2026-09-08: "the top bar is all over the place; too many
   round corners; not mobile friendly; increase clarity").

   Loaded LAST in every page's <head>, after the page's own <style>, so these
   rules win ties. Selectors are deliberately anchored on `body > header` /
   `:root` so they out-rank the per-page `header{}` and `.btn-hdr{}` copies
   without touching those files' internals. Page-specific layout below the
   header is untouched except for the phone baseline at the bottom.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. Contrast: darker secondary text and borders (light theme only; the
       dark palette already has enough separation). ─────────────────────── */
:root {
  --text-secondary: #4b5563;
  --text-tertiary: #6b7280;
  --text-muted: #b6bcc6;
  --border: #d7dbe1;
  --border-subtle: #e6e9ee;
  --radius: 3px;
}
[data-theme="dark"] {
  --text-secondary: #cbd5e1;
  --text-tertiary: #a9b4c4;  /* was #94a3b8 — 3.8:1 on dense-table rows */
  --text-muted: #475569;
  --border: #334155;
  --border-subtle: #1e293b;
}

/* ── 1a. Readable secondary text (owner 2026-09-24: "light grey on white is
       very hard to read"). Every page names its greys differently (--faint,
       --muted, --text-tertiary, --text-muted); the page's own :root and
       [data-theme="dark"] blocks are out-ranked here by the doubled selector,
       whatever the load order. Targets: >= 4.5:1 on white AND on the light
       grey panel fills (#f0f2f5 / #f4f6f9); in dark, >= 4.5:1 on #0d1117–#1e293b.
       The hierarchy stays (muted darker than faint), just shifted into range. */
:root:not([data-theme="dark"]) {
  --faint: #636b78;          /* was #9ca3af — 2.5:1 */
  --muted: #4b5563;          /* was #6b7280 — 4.3:1 on panel grey */
  --text-tertiary: #5f6773;  /* was #9ca3af — 2.5:1 */
  --text-muted: #6b7280;     /* was #b6bcc6 / #d1d5db — 1.8:1 */
}
:root[data-theme="dark"] {
  --faint: #8b949e;          /* was #484f58 — 2.1:1 */
  --muted: #a3adb8;          /* was #8b949e */
  --text-tertiary: #a9b4c4;  /* was #94a3b8 — 3.8:1 on dense-table rows */
  --text-muted: #a8b1bd;     /* was #475569 — 2.4:1 */
}
/* The inactive language button was dimmed to 55 % (3.5:1). */
body > header .aml-lang-opt:not(.active) { opacity: .8; }

[hidden] { display: none !important; }

/* ── 1b. "Larger text" = whole-page zoom (app-chrome.js). ──────────────────── */
html[data-ui-zoom="large"] { zoom: 1.15; }
html[data-ui-zoom="extra-large"] { zoom: 1.3; }

/* ── 2. The header ──────────────────────────────────────────────────────── */
body > header {
  position: sticky; top: 0; z-index: 100;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 8px;
  min-height: 50px; height: auto;
  padding: 6px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  transition: none;
  /* Same typeface on every page, whatever the page's own --sans says. */
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-family: var(--sans);
}
body > header .logo,
body > header .logo-wrap {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--text);
  white-space: nowrap; min-width: 0;
}
body > header .logo-badge {
  display: inline-block;
  background: var(--danger); color: #fff;
  font: 700 10.5px/1 var(--sans);
  letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 7px; border-radius: var(--radius);
}
body > header .logo-text,
body > header .logo > span:not(.logo-badge):not(.logo-sub),
body > header .logo > a:not(.logo-badge) {
  font: 600 14px/1.2 var(--sans);
  letter-spacing: 0; color: var(--text);
}
body > header .logo-sub,
body > header .logo-page {
  font: 400 12px/1.2 var(--sans);
  color: var(--text-secondary);
}
/* The title block itself (app-chrome.js wraps bare badges / text / <h1> into
   it), so no page's own `.logo{font-size…}` or text-transform leaks through. */
body > header .logo { font: 600 14px/1.2 var(--sans); text-transform: none; letter-spacing: 0; }
body > header .logo:hover .logo-text { text-decoration: underline; text-underline-offset: 3px; }
body > header .logo-text { text-transform: none; }
/* A one-line page description kept inside the header (registry_review). */
body > header > p {
  flex: 1 1 100%; order: 99; margin: 0 0 2px;
  font: 400 12px/1.4 var(--sans); color: var(--text-secondary);
}
/* Pages without design-system.css (registry_review): the header still needs
   the tokens the rules above use. Scoped to the header only. */
body > header.chrome-bare {
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --surface: #ffffff; --surface-dim: #f3f4f6; --text: #111827;
  --danger: #dc2626; --accent: #2563eb; --accent-dim: #dbeafe;
  font-family: var(--sans);
}
body > header .header-divider,
body > header .header-sep {
  width: 1px; height: 26px; background: var(--border); margin: 0 4px; flex: 0 0 auto;
}
body > header .header-logo { height: 32px; width: auto; }
body > header .header-gap,
body > header .hgap { flex: 1 1 auto; min-width: 8px; }
body > header .navlink,
body > header .btn-hdr,
body > header .btn-hdr-primary,
body > header .btn-hdr-secondary,
body > header .btn-hdr-tertiary,
body > header .aml-auth-status,
body > header .aml-auth-header-button {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  font: 600 12px/1 var(--sans);
  text-decoration: none; white-space: nowrap;
  box-shadow: none; cursor: pointer;
  transition: none;
}
body > header .btn-hdr:hover,
body > header .navlink:hover {
  background: var(--surface-dim); border-color: var(--text-tertiary); color: var(--text);
  box-shadow: none; filter: none;
}
body > header .hdr-cta {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px; border: 1px solid var(--accent);
  font: 700 12px/1 var(--sans); box-shadow: none; transform: none;
}
body > header .btn-hdr-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
body > header .btn-hdr-primary:hover { background: var(--accent-hover, var(--accent)); color: #fff; }
body > header .btn-hdr-secondary { background: var(--surface-dim); }
body > header .btn-hdr-tertiary,
body > header .btn-utility,
body > header #theme-btn,
body > header #ui-size-btn,
body > header #sound-finish-btn,
body > header #sound-count-btn {
  background: transparent; border-color: transparent;
  color: var(--text-secondary); font-weight: 500;
}
body > header .btn-hdr-tertiary:hover,
body > header .btn-utility:hover {
  border-color: var(--border); background: var(--surface-dim); color: var(--text);
}
body > header #ui-size-btn[aria-pressed="true"],
body > header .btn-hdr-tertiary.is-on { color: var(--accent); background: var(--accent-dim); border-color: transparent; }
body > header .btn-hdr-divider { width: 1px; align-self: center; height: 22px; margin: 0 2px; background: var(--border); }
body > header .btn-hdr-dot { font-size: 9px; }
body > header .theme-icon { font-size: 13px; }
body > header .aml-readonly-badge { border-radius: var(--radius); }
/* Retire the per-group tints (home/nav/utility) — one neutral family. */
body > header .btn-home,
body > header .btn-nav { background: var(--surface); border-color: var(--border); color: var(--text); }
body > header .btn-nav:hover,
body > header .btn-home:hover { background: var(--surface-dim); border-color: var(--text-tertiary); color: var(--text); }

/* ── 3. Shape: squared controls everywhere. Radius only — no sizing. ────── */
button, .btn, [class*="btn-"], [class^="btn"],
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea,
.card, .panel, .stat, .tile, .box, .modal, .modal-panel, .dialog, .popover, .dropdown, .menu,
[class*="card"], [class*="panel"], [class*="modal"], [class*="popover"], [class*="tooltip"],
.pill, .badge, .chip, .tag, .kbd, .alert, .note, .banner, .toast,
[class*="pill"], [class*="badge"], [class*="chip"], [class*="tag-"], [class*="alert"] {
  border-radius: var(--radius) !important;
}
/* keep genuinely circular things circular */
.dot, [class*="dot"], .avatar, .spinner, .loader, input[type="radio"], .swatch, [class*="swatch"] { border-radius: 50% !important; }
input[type="checkbox"] { border-radius: 2px !important; }
/* no lift-on-hover, no glow */
.card:hover, [class*="card"]:hover, .stat:hover, .tile:hover { transform: none !important; }

/* ── 4. Phone baseline (≤ 720 px) ───────────────────────────────────────── */
@media (max-width: 720px) {
  body > header { padding: 6px 10px; gap: 5px 6px; }
  body > header .header-gap,
  body > header .hgap,
  body > header .header-sep,
  body > header .header-divider,
  body > header .btn-hdr-divider,
  body > header .header-logo { display: none; }
  /* Preference toggles are noise on a phone; the language switch stays. */
  body > header .btn-utility,
  body > header #ui-size-btn,
  body > header #theme-btn,
  body > header #sound-finish-btn,
  body > header #sound-count-btn { display: none; }
  body > header .logo { flex: 1 1 100%; }
  body > header .logo-sub { display: none; }
  body > header .btn-hdr,
  body > header .navlink { height: 28px; padding: 0 8px; font-size: 11.5px; }
  main, .container, .page, .wrap, .content { padding-left: 12px !important; padding-right: 12px !important; }
  /* Wide tables scroll inside themselves instead of the whole page. */
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  input, select, textarea { max-width: 100%; }
  .toolbar, .filter-extras, .topbar { flex-wrap: wrap; }
}

/* ── 5. Phones held sideways and small tablets (721–960 px) + short landscape
       viewports (2026-09-10). Landscape phones are 812–932 px wide, so they
       slipped past the 720 px baseline: every header wrapped to two rows, and
       the "Larger text" / dark-mode toggles, dividers and the read-only badge
       cost a whole row of a 390 px tall screen. Same reductions as ≤720 px,
       minus the full-width logo. ────────────────────────────────────────── */
@media (min-width: 721px) and (max-width: 960px), (max-height: 520px) {
  body > header { padding: 5px 10px; gap: 4px 6px; min-height: 44px; }
  body > header .header-gap,
  body > header .hgap { min-width: 4px; }
  body > header .header-sep,
  body > header .header-divider,
  body > header .btn-hdr-divider { display: none; }
  body > header .btn-utility,
  body > header #ui-size-btn,
  body > header #theme-btn,
  body > header #sound-finish-btn,
  body > header #sound-count-btn,
  body > header .aml-readonly-badge { display: none; }
  body > header .logo-sub { display: none; }
  body > header .btn-hdr,
  body > header .navlink,
  body > header .aml-auth-status,
  body > header .aml-auth-header-button { height: 28px; padding: 0 8px; font-size: 11.5px; }
}
/* On every phone-sized screen the floating ticket button shrinks out of the
   way of the last table row / the bottom-right action buttons. */
@media (max-width: 960px), (max-height: 520px) {
  /* body is a column flex container (design-system.css). A page wrapper with
     `margin:0 auto` (main.wrap, .wrap) is a flex item with auto cross-axis
     margins, so it is NOT stretched to the body width but gets its fit-content
     width — and a nowrap table inside an overflow:auto box still contributes
     its intrinsic width (1,300–1,800 px on the risk, morphology and qPCR
     report pages). The wrapper then runs past the phone screen and the page
     scrolls sideways. Dropping the auto margins (centering is moot when the
     viewport is narrower than any max-width) plus min-width:0 lets the wrapper
     take the body width, so the table scrolls inside its own .table-wrap. */
  body > *:not(header) { min-width: 0 !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } /* !important: page rules like .wrap{max-width;margin:0 auto} out-rank this selector */
  /* Stacked two-pane workspace (design-system ≤768: .left-panel max-height
     45vh but overflow:visible): the list ran out of its box and the detail
     pane was painted over it (seen on CMTA Sorting session). Scroll inside. */
  .workspace .left-panel { overflow-y: auto; }
  body > header .aml-readonly-badge { display: none; }
  #tk-float-btn { bottom: 10px !important; right: 10px !important; padding: 7px 10px !important; font-size: 11.5px !important; }
  /* Shared tab bars (design-system .tabs): one line that scrolls sideways,
     instead of wrapping to three rows or cutting the last tabs off. */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-left: 12px; padding-right: 12px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab, .tabs > .tab { flex: 0 0 auto; white-space: nowrap; padding-left: 12px; padding-right: 12px; }
}
body > header .logo-page::before { content: '· '; }
