/* =============================================================================
   KP Task v6 — styles. Mobile first (314/360/390), tablet portrait 700–1023 (bottom bar, dense full-width rows),
   tablet landscape 1024–1279 (compact icon rail + two panes), PC 1280+ (full rail + two panes).
   Language: MERIDIAN v2 (projects/29_Design_Systems, the KP operations design language) on the KP shell —
   navy #1e3a5f primary, Calibri (the KP estate font; Meridian's Inter is not used here), no emoji, inline SVG only.
   Meridian tics kept: slate page + white 10px cards with a slate-tinted shadow; 6px controls; uppercase micro-labels;
   tabular numbers in columns, proportional on big figures; a 2px navy rule under the screen header; status = dot + word,
   never colour alone; the two-token semantic split (bright marks, darker AA text); restrained .18s motion.
   One hue = one meaning: red is ONLY urgent / overdue. Amber = high / blocked. Slate = low.
   ============================================================================= */
:root {
  color-scheme: light;
  --font: Calibri, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: Consolas, "Cascadia Mono", ui-monospace, Menlo, monospace;

  --bg: #f1f5f9; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #eef2f7;
  --line: #e2e8f0; --line-strong: #cbd5e1;
  --ink: #0f172a; --ink-2: #475569; --muted: #64748b; --faint: #64748b; --mark-faint: #94a3b8;

  --navy: #1e3a5f; --navy-700: #172e4d; --navy-50: #e9eff7; --navy-100: #d3dfef; --navy-200: #b3c6e0;
  --accent: #2563eb; --accent-hover: #1d4ed8; --accent-solid: #2563eb; --accent-ink: #ffffff; --accent-soft: #dbeafe; --focus: #2563eb;
  --primary: #1e3a5f; --primary-hover: #2b4d78; --primary-ink: #ffffff;

  --ok: #15803d; --ok-mark: #16a34a; --ok-bg: #dcfce7;
  --amber: #b45309; --amber-mark: #d97706; --amber-bg: #fef3c7;
  --red: #b91c1c; --red-mark: #dc2626; --red-bg: #fee2e2;
  --grey: #64748b; --grey-mark: #94a3b8; --grey-bg: #f1f5f9;

  --chart-ontime: #2563eb; --chart-late: #a16207;
  --chart-urgent: #dc2626; --chart-high: #d97706; --chart-normal: #2563eb; --chart-low: #94a3b8;
  --chart-grid: #eef2f7;

  --team-navy: #1e3a5f; --team-teal: #0f7b7b; --team-green: #2e7d32; --team-olive: #6b7d1a;
  --team-plum: #7a3e8c; --team-rose: #b23a6b; --team-sand: #a0762a; --team-slate: #5b6b7d;

  --rail-bg: #1e3a5f; --rail-ink: #d6e0ee; --rail-muted: #93a9c6; --rail-active: rgba(255,255,255,.14);

  --shadow-1: 0 1px 2px rgba(15,23,42,.05);
  --shadow-2: 0 1px 3px rgba(15,23,42,.08), 0 4px 12px rgba(15,23,42,.05);
  --shadow-3: 0 12px 32px rgba(15,23,42,.14);
  --r-sm: 6px; --r: 10px; --r-modal: 8px; --r-lg: 14px; --r-pill: 999px;
  --tap: 44px; --nav-h: 60px;
  --rail-w: 232px; --frame-w: 1240px; --narrow-w: 760px;
  --dur-fast: .12s; --dur: .18s; --ease: cubic-bezier(.4,0,.2,1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1120; --surface: #1e293b; --surface-2: #0f172a; --surface-3: #273449;
    --line: #334155; --line-strong: #475569;
    --ink: #f1f5f9; --ink-2: #cbd5e1; --muted: #94a3b8; --faint: #94a3b8; --mark-faint: #64748b;
    --navy-50: #1b2a42; --navy-100: #24375a; --navy-200: #2f4a78;
    --accent: #60a5fa; --accent-hover: #93c5fd; --accent-solid: #2563eb; --accent-ink: #ffffff; --accent-soft: rgba(59,130,246,.18); --focus: #60a5fa;
    --primary: #2563eb; --primary-hover: #1d4ed8; --primary-ink: #ffffff;
    --ok: #4ade80; --ok-mark: #4ade80; --ok-bg: rgba(34,197,94,.15);
    --amber: #fbbf24; --amber-mark: #fbbf24; --amber-bg: rgba(217,119,6,.18);
    --red: #f87171; --red-mark: #f87171; --red-bg: rgba(220,38,38,.18);
    --grey: #94a3b8; --grey-mark: #64748b; --grey-bg: #273449;
    --chart-ontime: #3b82f6; --chart-late: #b17410;
    --chart-urgent: #f87171; --chart-high: #fbbf24; --chart-normal: #3b82f6; --chart-low: #64748b;
    --chart-grid: #26334a;
    --team-navy: #7fa6d9; --team-teal: #3fbdbd; --team-green: #5fc06a; --team-olive: #a9bf3f;
    --team-plum: #c07fd3; --team-rose: #e5729f; --team-sand: #d7a94e; --team-slate: #9bacbf;
    --rail-bg: #0f172a; --rail-ink: #cbd5e1; --rail-muted: #8393aa; --rail-active: rgba(255,255,255,.10);
    --shadow-1: 0 1px 2px rgba(0,0,0,.40); --shadow-2: 0 1px 3px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.35); --shadow-3: 0 12px 32px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1120; --surface: #1e293b; --surface-2: #0f172a; --surface-3: #273449;
  --line: #334155; --line-strong: #475569;
  --ink: #f1f5f9; --ink-2: #cbd5e1; --muted: #94a3b8; --faint: #94a3b8; --mark-faint: #64748b;
  --navy-50: #1b2a42; --navy-100: #24375a; --navy-200: #2f4a78;
  --accent: #60a5fa; --accent-hover: #93c5fd; --accent-solid: #2563eb; --accent-ink: #ffffff; --accent-soft: rgba(59,130,246,.18); --focus: #60a5fa;
  --primary: #2563eb; --primary-hover: #1d4ed8; --primary-ink: #ffffff;
  --ok: #4ade80; --ok-mark: #4ade80; --ok-bg: rgba(34,197,94,.15);
  --amber: #fbbf24; --amber-mark: #fbbf24; --amber-bg: rgba(217,119,6,.18);
  --red: #f87171; --red-mark: #f87171; --red-bg: rgba(220,38,38,.18);
  --grey: #94a3b8; --grey-mark: #64748b; --grey-bg: #273449;
  --chart-ontime: #3b82f6; --chart-late: #b17410;
  --chart-urgent: #f87171; --chart-high: #fbbf24; --chart-normal: #3b82f6; --chart-low: #64748b;
  --chart-grid: #26334a;
  --team-navy: #7fa6d9; --team-teal: #3fbdbd; --team-green: #5fc06a; --team-olive: #a9bf3f;
  --team-plum: #c07fd3; --team-rose: #e5729f; --team-sand: #d7a94e; --team-slate: #9bacbf;
  --rail-bg: #0f172a; --rail-ink: #cbd5e1; --rail-muted: #8393aa; --rail-active: rgba(255,255,255,.10);
  --shadow-1: 0 1px 2px rgba(0,0,0,.40); --shadow-2: 0 1px 3px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.35); --shadow-3: 0 12px 32px rgba(0,0,0,.55);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.45 var(--font); min-height: 100dvh; overflow-x: hidden; overscroll-behavior-y: contain; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
h1 { font-size: 24px; } h2 { font-size: 19px; } h3 { font-size: 17px; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { border: 0; background: transparent; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .55; }
a { color: var(--accent); }
/* One icon system: 22px default, 1.8 stroke, round caps. Smaller sizes are set per slot (16 in meta rows, 18 in controls, 24 in the tab bar). */
svg.i { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; display: inline-block; vertical-align: middle; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sheet-body:focus, .cam-body:focus, .main:focus { outline: none; }   /* programmatic focus targets, not controls */
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.skip { position: fixed; top: -80px; left: 12px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); z-index: 99; }
.skip:focus { top: 10px; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.tnum { font-variant-numeric: tabular-nums; }
img { display: block; max-width: 100%; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* ---------- buttons (6px, weight 600, ≥44px; press = 1px sink) ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 16px; border-radius: var(--r-sm); font-weight: 600; font-size: 16px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur-fast); white-space: nowrap; }
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-danger { color: var(--red); border-color: var(--line-strong); }
.btn-danger:hover { background: var(--red-bg); }
.btn-ok { color: var(--ok); }
.btn-block { width: 100%; }
.btn-lg { min-height: 50px; font-size: 17px; }
.btn-icon { width: var(--tap); height: var(--tap); padding: 0; border-radius: var(--r-sm); border: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); }
.btn-icon:hover { background: var(--surface-3); }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row > .btn { flex: 1 1 auto; }
.btn-row.end { justify-content: flex-end; }
.btn-row.end > .btn { flex: 0 0 auto; }

/* ---------- chips (choices) · pills (status: dot + word) · avatars · rings ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); font-weight: 600; font-size: 15px; color: var(--ink-2); transition: background var(--dur), border-color var(--dur), color var(--dur); }
.chip:hover { background: var(--surface-2); }
.chip.on { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; }
.chips.big .chip { flex: 1 1 calc(50% - 8px); justify-content: center; min-height: 48px; font-size: 16px; }
.chip-marker { width: 10px; height: 10px; border-radius: 50%; background: var(--grey-mark); flex-shrink: 0; }
.chip.p-urgent .chip-marker { background: var(--red-mark); } .chip.p-high .chip-marker { background: var(--amber-mark); } .chip.p-normal .chip-marker { background: var(--navy); } .chip.p-low .chip-marker { background: var(--grey-mark); }
.chip.on .chip-marker { outline: 2px solid rgba(255,255,255,.75); }
:root[data-theme="dark"] .chip.p-normal .chip-marker { background: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip.p-normal .chip-marker { background: var(--accent); } }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px; border-radius: var(--r-pill); font-size: 15px; font-weight: 700; line-height: 1.4; white-space: nowrap; max-width: 100%; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.pill .pill-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill-urgent { color: var(--red); background: var(--red-bg); }
.pill-high { color: var(--amber); background: var(--amber-bg); }
.pill-low { color: var(--grey); background: var(--grey-bg); }
.pill-done { color: var(--ok); background: var(--ok-bg); }
.pill-blocked { color: var(--ink-2); background: var(--surface-3); }
.pill-plain { color: var(--ink-2); background: var(--surface-3); }
.pill-plain::before { display: none; }
.pill-kind { color: var(--accent); background: var(--accent-soft); }
.pill-kind::before { display: none; }
.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--navy-100); color: var(--navy); font-size: 15px; font-weight: 700; letter-spacing: 0; flex-shrink: 0; border: 2px solid var(--surface); }
:root[data-theme="dark"] .avatar { color: #e8edf4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .avatar { color: #e8edf4; } }
.avatar-lg { width: 56px; height: 56px; font-size: 20px; }
.avatar-md { width: 40px; height: 40px; font-size: 15px; }
.avatars { display: inline-flex; flex-direction: row-reverse; }
.avatars .avatar + .avatar { margin-right: -6px; }
.ring { flex-shrink: 0; }
.ring-track { stroke: var(--surface-3); }
.ring-fill { stroke: var(--accent); }
.ring-full .ring-fill, .ring-tick { stroke: var(--ok-mark); }
.team-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--team-slate); flex-shrink: 0; }
.team-navy { background: var(--team-navy); } .team-teal { background: var(--team-teal); } .team-green { background: var(--team-green); } .team-olive { background: var(--team-olive); }
.team-plum { background: var(--team-plum); } .team-rose { background: var(--team-rose); } .team-sand { background: var(--team-sand); } .team-slate { background: var(--team-slate); }
/* rc7b: the brand mark is Jakub's logo (navy square + white mark, drawn by util.js kpMark); same in light and dark. */
.kp-mark { width: 34px; height: 34px; display: block; flex-shrink: 0; }
.kp-mark svg { display: block; width: 100%; height: 100%; }

/* ---------- app frame ---------- */
.app { display: block; min-height: 100dvh; }
.rail { display: none; }
/* overflow-x: clip (not hidden) — a stray wide element can never widen the layout viewport, and sticky still works. */
.main { padding: 0 16px calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); max-width: 720px; margin: 0 auto; min-width: 0; overflow-x: clip; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--line); }
.tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 14px; font-weight: 600; color: var(--muted); min-height: var(--tap); border-radius: var(--r-sm); position: relative; min-width: 0; }
.tab > span:not(.badge) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab svg.i { width: 24px; height: 24px; }
.tab.on { color: var(--navy); }
:root[data-theme="dark"] .tab.on { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tab.on { color: var(--accent); } }
/* New task: a navy square in the bar, level with the other tabs — no float, no glow. */
.tab-add .fab { width: 46px; height: 46px; border-radius: var(--r-sm); background: var(--primary); color: var(--primary-ink); display: grid; place-items: center; font-size: 0; }
.tab-add .fab svg.i { width: 26px; height: 26px; stroke-width: 2.4; }
/* Unread alerts: a count on the bell. Accent (not red — red is only urgent / overdue). */
.badge { position: absolute; top: 2px; left: calc(50% + 4px); min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--accent-solid); color: #fff; font-size: 14px; font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--surface); }

/* Next-task strip (phone + tablet): the most urgent open task, always in view at the top of My tasks. */
.next-strip { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 8px 10px 8px 12px; margin: 0 0 12px; border-radius: var(--r-sm); background: var(--navy); color: #fff; box-shadow: var(--shadow-2); text-align: left; }
.next-strip svg.i { width: 20px; height: 20px; color: #fff; }
.next-strip .ns-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.next-strip .ns-label { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: rgba(255,255,255,.75); line-height: 1.2; }
.next-strip .ns-title { font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next-strip .ns-due { flex-shrink: 0; font-size: 15px; font-weight: 600; color: rgba(255,255,255,.85); white-space: nowrap; font-variant-numeric: tabular-nums; }
.next-strip.over { background: var(--red-mark); }
.next-strip.over .ns-label, .next-strip.over .ns-due { color: rgba(255,255,255,.9); }
.next-strip .chev { color: rgba(255,255,255,.7); width: 20px; height: 20px; }
:root[data-theme="dark"] .next-strip { background: var(--navy-100); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .next-strip { background: var(--navy-100); } }
:root[data-theme="dark"] .next-strip.over { background: #7f1d1d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .next-strip.over { background: #7f1d1d; } }
@media (min-width: 1024px) { .next-strip { display: none; } }

/* "Turn on alerts" card: shown once on My tasks until answered or dismissed. */
.alerts-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; margin: 18px 0 0; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent-solid); box-shadow: var(--shadow-1); }
.alerts-card .alert-ic { margin-top: 2px; }
.alerts-card .ac-text { flex: 1; min-width: 0; }
.alerts-card .ac-title { font-weight: 700; }
.alerts-card .ac-body { color: var(--muted); font-size: 15px; margin-top: 2px; }
.alerts-card .ac-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.alerts-card .ac-actions .btn { padding: 0 14px; }

/* View header: compact, a 2px navy rule under it (the Meridian table rule), the first row sits high. */
.vhead { display: flex; align-items: flex-end; gap: 12px; padding: 14px 0 10px; margin-bottom: 4px; border-bottom: 2px solid var(--navy); }
:root[data-theme="dark"] .vhead { border-bottom-color: var(--accent-solid); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vhead { border-bottom-color: var(--accent-solid); } }
.vhead-text { min-width: 0; flex: 1; }
.vhead h1 { font-size: 24px; overflow-wrap: anywhere; }
.vhead .sub { color: var(--ink-2); font-size: 15px; margin-top: 2px; overflow-wrap: anywhere; }   /* wraps; never an ellipsis */
.vhead .sub .over { color: var(--red); font-weight: 700; }
.vhead-actions { display: flex; gap: 6px; flex-shrink: 0; align-self: center; }
.vhead-actions .btn { padding: 0 14px; }
.filter-btn.active { border-color: var(--accent); color: var(--accent); }
.filter-btn .count { background: var(--accent-solid); color: #fff; border-radius: var(--r-pill); min-width: 22px; height: 22px; font-size: 14px; line-height: 22px; text-align: center; padding: 0 6px; font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; background: var(--surface-3); border-radius: var(--r-sm); padding: 3px; gap: 2px; }
.seg button { min-height: 44px; padding: 0 12px; border-radius: 4px; font-weight: 600; color: var(--muted); font-size: 15px; min-width: 0; }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.seg.block { display: flex; } .seg.block button { flex: 1; }

/* ---------- task groups & rows ----------
   A group is one white block with hairline rows (a table, not card soup). Each row: a 3px left edge for importance,
   the title, one meta line, the "who" avatars, then the trailing control. */
.group { margin-top: 10px; }
.group-head { display: flex; align-items: baseline; gap: 8px; padding: 10px 2px 6px; font-size: 14px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; min-width: 0; overflow-wrap: anywhere; }
.group-head .n { font-weight: 700; color: var(--mark-faint); font-variant-numeric: tabular-nums; }
.group-head.over { color: var(--red); }
.cards { display: flex; flex-direction: column; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); overflow: hidden; }
/* Every row the same height; an open preview is a separate area under the row (grid-column 1 / -1), so the row itself
   never changes height. The row is its own size container: a NARROW row (a phone, the list beside a detail pane)
   hides what it cannot afford, whatever the screen is. */
.card { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: stretch; background: var(--surface); border-top: 1px solid var(--line); border-left: 3px solid transparent; transition: background var(--dur) var(--ease); container-type: inline-size; container-name: card; }
.card:first-child { border-top-color: transparent; }   /* keeps every row the same height; the block's own border draws the top line */
.card:hover { background: var(--surface-2); }
.card.sel { background: var(--accent-soft); }
.card.p-urgent { border-left-color: var(--red-mark); }
.card.p-high { border-left-color: var(--amber-mark); }
.card.p-low { border-left-color: var(--line-strong); }
.card.done { opacity: .78; }
.card-main { display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px; text-align: left; height: 64px; min-width: 0; }
.card-text { min-width: 0; flex: 1; overflow: hidden; }
.card-title { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The meta line: importance · due · status. Only the DUE text may shrink and end in an ellipsis on a wide row; on a
   narrow row the due text is the one thing that is never cut (see the container rule). Never a second line. */
.card-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: 15px; color: var(--muted); height: 22px; white-space: nowrap; overflow: hidden; min-width: 0; font-variant-numeric: tabular-nums; }
.card-meta > * { display: inline-flex; align-items: center; line-height: 22px; flex-shrink: 0; }
.card-meta .due { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-meta .due svg.i { vertical-align: -3px; margin-right: 4px; }
.card-meta svg.i { width: 16px; height: 16px; stroke-width: 2; }
.card-meta .due.over { color: var(--red); font-weight: 700; }
.card-meta .due.today { color: var(--ink-2); font-weight: 600; }
.card-meta .st { color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
/* Blocked is the one status that must be seen: amber (never red — red is urgent/overdue), a word, and a shape. */
.card-meta .st.blocked { color: var(--amber); background: var(--amber-bg); border: 1px dashed var(--amber-mark); border-radius: 4px; padding: 0 7px 0 5px; font-weight: 700; line-height: 20px; }
.card .pill { padding: 0 8px 0 7px; line-height: 22px; font-size: 15px; gap: 5px; }
.card .pill::before { width: 7px; height: 7px; }
.card-side { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.card-peek { width: 44px; display: flex; align-items: center; justify-content: center; color: var(--muted); border-left: 1px solid var(--line); }
.card-peek:hover { background: var(--surface-3); color: var(--ink-2); }
.card-peek svg.i { width: 20px; height: 20px; transition: transform var(--dur) var(--ease); }
.card.peeked .card-peek svg.i { transform: rotate(90deg); }
.card-quick { display: flex; align-items: center; justify-content: center; min-width: 60px; padding: 0 10px; border-left: 1px solid var(--line); font-weight: 700; color: var(--accent); font-size: 15px; }
.card-quick:hover { background: var(--accent-soft); }
.card-quick.done-q { color: var(--ok); }
.card-preview { grid-column: 1 / -1; border-top: 1px solid var(--line); padding: 10px 14px 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 4px; }
.cp-title { font-weight: 700; overflow-wrap: anywhere; }
.cp-desc { white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; color: var(--ink-2); overflow-wrap: anywhere; }
.cp-facts { color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
/* Progress in the preview: only where the row's ring is hidden (narrow rows), never twice on one row. */
.cp-progress { display: none; align-items: center; gap: 8px; color: var(--ink-2); font-size: 15px; font-weight: 600; }
.card.removed { opacity: .78; }
.card.removed .card-title { color: var(--muted); text-decoration: line-through; }
.hint-row { display: flex; justify-content: space-between; gap: 10px; }
.count-hint { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.count-hint.at-limit { color: var(--amber); font-weight: 700; }
.team-avatar { color: #fff; border-color: var(--surface); }
.team-avatar svg.i { width: 18px; height: 18px; stroke-width: 2; }
.perf-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.perf-filters .row2 { flex: 1 1 100%; }
/* NARROW row (<= 440px — every phone, the list beside a detail pane): the title gets two lines and most of the width.
   The ring moves into the peek preview; the avatar shows only when the task is someone else's (on My tasks every row is
   mine); "In progress" is said by the quick word (Done / Finish); and there is ONE trailing control — the quick action
   when the row has one, else the peek chevron — never both. Rows stay equal: 76px. */
@container card (max-width: 440px) {
  .card-main { height: 76px; gap: 0; padding: 0 6px 0 10px; }
  .card-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.22; overflow-wrap: anywhere; }
  .card-side .ring, .card-side .who-me { display: none; }
  .card-side > .avatars, .card-side > .team-avatar { margin-left: 8px; }
  .card-meta .st:not(.blocked) { display: none; }
  .card-meta .due { flex-shrink: 0; overflow: visible; }
  .card:has(.card-quick) .card-peek { display: none; }
  .cp-progress { display: flex; }
}
/* The narrowest rows (<= 330px — a 314–360 phone): the importance word folds to its coloured dot (the row's left edge
   and its label say it), so the due text and a Blocked chip always have the width. Same whenever Blocked is on the row. */
@container card (max-width: 330px) {
  .card-meta { gap: 6px; }
  .card .pill { padding: 0; width: 12px; height: 12px; min-width: 12px; border-radius: 50%; overflow: hidden; justify-content: center; }
  .card .pill .pill-text { display: none; }
  .card .pill::before { width: 8px; height: 8px; }
  .card-quick { min-width: 54px; padding: 0 8px; }
}
.card-meta:has(.st.blocked) .pill { padding: 0; width: 12px; height: 12px; min-width: 12px; border-radius: 50%; overflow: hidden; justify-content: center; }
.card-meta:has(.st.blocked) .pill .pill-text { display: none; }
.card-meta:has(.st.blocked) .pill::before { width: 8px; height: 8px; }
/* WIDE row (>= 600px — a tablet in portrait, a full-width list): one line, title then meta side by side, 56px. */
@container card (min-width: 600px) {
  .card-main { height: 56px; }
  .card-text { display: flex; align-items: center; gap: 14px; }
  .card-title { flex: 1 1 auto; min-width: 0; }
  .card-meta { flex: 0 0 auto; margin: 0; max-width: 52%; }
}
.state-team .state-body { max-width: none; }
.state-team .over { color: var(--red); font-weight: 700; }
.state-team .btn { margin-top: 8px; }

/* ---------- states: quiet, left-aligned, no decoration ---------- */
.state { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 4px; padding: 22px 16px; color: var(--muted); }
.state-title { font-weight: 700; color: var(--ink); font-size: 17px; overflow-wrap: anywhere; }
.state-body { max-width: 48ch; overflow-wrap: anywhere; }
.state-ic { display: none; }
.state-empty { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r); margin-top: 10px; }
.state-empty .btn { margin-top: 8px; }
.state-error { flex-direction: row; align-items: flex-start; background: var(--red-bg); border: 1px solid var(--line); border-left: 4px solid var(--red-mark); border-radius: var(--r-sm); color: var(--ink); padding: 14px; gap: 12px; }
.state-error svg.i { color: var(--red); margin-top: 2px; }
.state-error .state-title { color: var(--red); }
.state-error .state-body { max-width: none; }
.state-loading { flex-direction: row; justify-content: center; align-items: center; padding: 28px; }
.spinner { width: 20px; height: 20px; border: 3px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Inline notices: tinted, a 4px semantic left edge. */
.notice { display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm); border: 1px solid var(--line); border-left: 4px solid var(--line-strong); background: var(--surface-2); color: var(--ink-2); font-size: 15px; align-items: flex-start; }
.notice svg.i { flex-shrink: 0; margin-top: 1px; }
.notice-error { background: var(--red-bg); border-left-color: var(--red-mark); color: var(--ink); }
.notice-error svg.i { color: var(--red); }
.notice-ok { background: var(--ok-bg); border-left-color: var(--ok-mark); }
.notice-ok svg.i { color: var(--ok); }
.notice-warn { background: var(--amber-bg); border-left-color: var(--amber-mark); }
.notice-warn svg.i { color: var(--amber); }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field > label, .field-label { font-weight: 700; font-size: 14px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.hint { color: var(--muted); font-size: 15px; }
input[type=text], input[type=password], input[type=date], input[type=time], input[type=email], input[type=search], select, textarea { width: 100%; min-height: var(--tap); padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: 17px; transition: border-color var(--dur), box-shadow var(--dur); }
textarea { min-height: 88px; resize: vertical; line-height: 1.4; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
input::placeholder, textarea::placeholder { color: var(--mark-faint); }
.row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.row2 input, .row2 select { min-width: 0; }   /* a date field's native minimum must never push the row past a 314 phone */
.add-time { align-self: flex-start; padding: 0 10px; margin-top: 2px; }
.disclose-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 6px 0; border-top: 1px solid var(--line); width: 100%; text-align: left; border-radius: var(--r-sm); }
.switch:first-of-type { border-top: 0; }
.switch:hover { background: var(--surface-2); }
.switch .sw-text { font-weight: 600; }
.switch .sw-sub { color: var(--muted); font-size: 15px; font-weight: 400; }
.toggle { position: relative; width: 44px; height: 26px; border-radius: 13px; background: var(--line-strong); flex-shrink: 0; transition: background var(--dur); display: inline-block; }
.toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform var(--dur) var(--ease); }
.switch[aria-checked="true"] .toggle { background: var(--accent-solid); }
.switch[aria-checked="true"] .toggle::after { transform: translateX(18px); }
.checkrow { display: flex; align-items: center; gap: 12px; min-height: var(--tap); padding: 6px 4px; border-radius: var(--r-sm); cursor: pointer; }
.checkrow:hover { background: var(--surface-2); }
.checkrow input { width: 22px; height: 22px; accent-color: var(--accent-solid); flex-shrink: 0; margin: 0; }
.checkrow .ck-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.checkrow .ck-sub { color: var(--muted); font-size: 15px; }
.checkrow.done .ck-text { text-decoration: line-through; color: var(--muted); }
.people-pick { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-sm); max-height: 260px; overflow: auto; }
.people-pick > * { flex-shrink: 0; }   /* a capped column flex box must scroll, never squash its rows into each other */
.people-pick .checkrow { padding: 6px 10px; border-radius: 0; border-bottom: 1px solid var(--line); }
.people-pick .checkrow:last-child { border-bottom: 0; }
/* rc7b person picker: search, chosen chips, group heads (the list itself is the .people-pick box above). */
.pick-search-wrap { margin: 0 0 8px; }
.pick-chosen { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.pick-chip { display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap); max-width: 100%; padding: 0 8px 0 12px; border-radius: var(--r-sm); border: 1px solid var(--accent-solid); background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600; }
.pick-chip .pick-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-chip svg.i { flex-shrink: 0; }
.pick-chip:hover { background: var(--surface-2); }
.people-pick .pick-group { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }
.people-pick .pick-group:last-of-type { border-bottom: 0; }
.people-pick .pick-head { position: sticky; top: 0; z-index: 1; padding: 4px 10px; background: var(--surface-2); color: var(--muted); font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--line); }
.pick-none { margin: 0; padding: 12px 10px; color: var(--muted); }
.pick-status { margin: 4px 0 0; color: var(--muted); font-size: 14px; min-height: 0; }
.pick-status:empty { margin: 0; }
.cl-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.cl-row input { flex: 1; min-width: 0; }
.form-error { color: var(--red); font-weight: 600; margin: 4px 0 12px; display: flex; gap: 8px; align-items: flex-start; }
.form-error svg.i { flex-shrink: 0; }
.temp-pw { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px dashed var(--line-strong); }
.temp-pw code { font-family: var(--mono); font-size: 22px; letter-spacing: .04em; flex: 1; word-break: break-all; }
.colour-pick { display: flex; flex-wrap: wrap; gap: 10px; }
.colour-pick button { width: 44px; height: 44px; border-radius: 50%; border: 3px solid transparent; display: grid; place-items: center; position: relative; }
.colour-pick button.on { border-color: var(--ink); }
.colour-pick button .team-dot { width: 26px; height: 26px; }
.colour-pick button svg.i { position: absolute; color: #fff; width: 18px; height: 18px; stroke-width: 3; }

/* ---------- lists (people, teams, alerts, settings): one block, hairline rows, no decoration per row ---------- */
.list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-1); }
.lrow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 56px; border-top: 1px solid var(--line); text-align: left; width: 100%; min-width: 0; }
.lrow:first-child { border-top: 0; }
button.lrow:hover { background: var(--surface-2); }
.lrow-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lrow-title { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow-title.wrap2 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; line-height: 1.3; }
.lrow-sub { display: block; color: var(--muted); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow-sub.wrap { white-space: normal; overflow-wrap: anywhere; }
.lrow .chev { color: var(--mark-faint); flex-shrink: 0; }
.lrow-end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.lrow-when { color: var(--muted); font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lrow.unread { background: var(--accent-soft); }
.lrow.unread .lrow-title { font-weight: 700; }
.lrow.unread .lrow-when { color: var(--muted); }   /* the dot says unread; the time stays quiet */
.lrow .dot-unread { width: 10px; height: 10px; border-radius: 50%; background: var(--accent-solid); flex-shrink: 0; }
.lrow .status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--grey-mark); flex-shrink: 0; }
.lrow .status-dot.ok { background: var(--ok-mark); }
.lrow .status-dot.amber { background: var(--amber-mark); }
.lrow.off { opacity: .6; }
.lrow-alert { align-items: flex-start; }
.lrow-alert .alert-ic { margin-top: 2px; }
.lrow-alert .lrow-when { margin-top: 2px; }
.lrow-alert .dot-unread { margin-top: 10px; }
/* Archived teams (Teams screen): a quiet collapsed section under the active list; each row keeps its Restore. */
.archived-teams { margin-top: 18px; border-bottom: 1px solid var(--line); }
.archived-teams .section-body { padding: 4px 0 16px; }
.lrow-archived .alert-ic { opacity: .55; }
.lrow-archived .lrow-title { color: var(--ink-2); }
.lrow-archived .btn { padding: 0 14px; flex-shrink: 0; }
.lrow-archived .btn svg.i { width: 18px; height: 18px; }
.lrow-archived { flex-wrap: wrap; }
.lrow-note { flex: 1 0 100%; }
.lrow-note:empty { display: none; }
.lrow-note .form-error { margin: 4px 0 0; white-space: normal; }
/* A row's leading mark: the icon itself (meaning: the alert type, a team colour) — no grey circle behind it. */
.alert-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: transparent; color: var(--ink-2); flex-shrink: 0; }
.alert-ic svg.i { width: 22px; height: 22px; }
.alert-ic.soon { color: var(--mark-faint); }
.alert-ic.overdue { color: var(--red); }
.alert-ic.done { color: var(--ok); }
.alert-ic.assigned { color: var(--navy); }
.alert-ic .team-dot { width: 14px; height: 14px; }
:root[data-theme="dark"] .alert-ic.assigned { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .alert-ic.assigned { color: var(--accent); } }
.section-gap { height: 18px; }
.h-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 18px 0 8px; }
.h-row h2 { font-size: 17px; }

/* ---------- sheets / dialogs ---------- */
dialog { border: 0; padding: 0; background: var(--surface); color: var(--ink); max-width: none; max-height: none; }
dialog:not([open]) { display: none !important; }   /* .sheet/.modal/.cam set display:flex; a closed dialog must still vanish */
dialog::backdrop { background: rgba(15,23,42,.55); }
.sheet { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; height: calc(100dvh - 36px); max-height: calc(100dvh - 36px); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-3); display: flex; flex-direction: column; overflow: hidden; }
.sheet[open] { animation: sheet-up .22s var(--ease); }
@keyframes sheet-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; align-items: center; gap: 6px; padding: 8px 8px 6px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; min-height: 56px; }
.sheet-head h2 { flex: 1; font-size: 18px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 8px auto 0; flex-shrink: 0; }
.sheet-body { flex: 1; overflow: auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; container-type: inline-size; }
.sheet-foot { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); flex-shrink: 0; }
.sheet-foot .btn { flex: 1; }
.sheet-foot .btn.btn-ghost { flex: 0 0 auto; }
/* A refused save, said right above the buttons (the body may be scrolled away from the field). */
.sheet-foot .foot-msg { flex: 1 0 100%; display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 15px; font-weight: 600; color: var(--red); overflow-wrap: anywhere; }
.sheet-foot .foot-msg.warn { color: var(--amber); }
.sheet-foot .foot-msg svg.i { width: 18px; height: 18px; margin-top: 2px; }
/* Inline confirm for an irreversible step (archive a team): replaces the button it came from, never a browser dialog. */
.confirm-strip { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); border-left: 4px solid var(--red-mark); margin-top: 14px; }
.confirm-strip .cs-text { font-weight: 600; }
.confirm-strip .cs-sub { color: var(--muted); font-size: 15px; font-weight: 400; }
.confirm-strip .btn-row > .btn { flex: 1 1 auto; }
.modal { position: fixed; inset: 0; margin: auto; width: min(92vw, 440px); max-height: 86dvh; border-radius: var(--r-modal); box-shadow: var(--shadow-3); display: flex; flex-direction: column; overflow: hidden; }
.modal .sheet-body { padding-top: 14px; }
.modal h2 { font-size: 19px; margin-bottom: 8px; }
.modal .sheet-head { padding: 12px 8px 10px 18px; }
.modal-text { color: var(--ink-2); margin-bottom: 14px; }

/* ---------- task detail ---------- */
.detail-top { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; margin-bottom: 2px; }
.detail-ref { color: var(--muted); font-family: var(--mono); font-size: 15px; }
.detail-title { font-size: 22px; line-height: 1.25; font-weight: 700; overflow-wrap: anywhere; }
.detail-head-row { display: flex; justify-content: flex-end; align-items: center; gap: 8px; min-height: 36px; }
.detail-title.done { color: var(--muted); }
.detail-signals { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 15px; min-width: 0; }
.detail-signals .pill { max-width: 100%; min-width: 0; }
.detail-signals .due { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.detail-signals .due.over { color: var(--red); font-weight: 700; }
.detail-signals .due svg.i { width: 18px; height: 18px; }
.status-ctl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.status-ctl button { min-height: 48px; border-radius: var(--r-sm); border: 1px solid var(--line-strong); font-weight: 600; font-size: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink-2); background: var(--surface); line-height: 1.15; padding: 4px 2px; transition: background var(--dur), border-color var(--dur), color var(--dur); }
.status-ctl button svg.i { width: 18px; height: 18px; stroke-width: 2; }
/* A narrow detail pane (small PC window) folds the four status buttons into two rows instead of squeezing the words. */
@container (max-width: 400px) { .status-ctl { grid-template-columns: 1fr 1fr; } }
.status-ctl button.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.status-ctl button.on.s-done { background: var(--ok-mark); border-color: var(--ok-mark); }
.status-ctl button.s-done { color: var(--ok); }
:root[data-theme="dark"] .status-ctl button.on { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .status-ctl button.on { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; } }
:root[data-theme="dark"] .status-ctl button.on.s-done { color: #0b1120; }
.blocked-note { display: flex; gap: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--amber-bg); border-left: 4px solid var(--amber-mark); color: var(--ink); font-size: 15px; }
.blocked-note svg.i { color: var(--amber); flex-shrink: 0; }
.progress-row { display: flex; align-items: center; gap: 12px; }
.progress-row .pr-text { flex: 1; min-width: 0; }
.progress-row .pr-pct { font-weight: 800; font-size: 18px; letter-spacing: -.01em; }
.progress-row .pr-sub { color: var(--muted); font-size: 15px; }
.progress-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.progress-steps button { min-height: var(--tap); border-radius: var(--r-sm); border: 1px solid var(--line-strong); font-weight: 600; background: var(--surface); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.progress-steps button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.disclose { margin-top: 4px; }
.disclose-head { display: flex; align-items: center; gap: 6px; min-height: var(--tap); cursor: pointer; list-style: none; color: var(--accent); font-weight: 600; user-select: none; }
.disclose-head::-webkit-details-marker { display: none; }
.disclose[open] .section-chev { transform: rotate(90deg); }
.disclose .people-pick { margin-top: 6px; }
.section { border-top: 1px solid var(--line); }
.section:last-of-type { border-bottom: 1px solid var(--line); }
.section-head { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 2px; cursor: pointer; list-style: none; font-weight: 700; color: var(--ink); user-select: none; }
.section-head::-webkit-details-marker { display: none; }
.section-head svg.i { color: var(--muted); }
.section-title { flex: 1; }
.section-count { color: var(--muted); font-weight: 700; font-size: 14px; background: var(--surface-3); border-radius: var(--r-pill); padding: 0 9px; line-height: 24px; font-variant-numeric: tabular-nums; }
.section-chev { transition: transform var(--dur) var(--ease); }
.section[open] .section-chev { transform: rotate(90deg); }
.section-body { padding: 4px 2px 16px; }
.kv { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px 12px; font-size: 16px; }
.kv dt { color: var(--muted); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kv dd .pill { max-width: 100%; white-space: normal; margin-left: 0; }
/* A narrow detail pane (tablet landscape beside the list) keeps the value column usable: a shorter key column. */
@container (max-width: 480px) { .kv { grid-template-columns: 92px minmax(0, 1fr); gap: 8px 10px; } }
.desc { white-space: pre-wrap; line-height: 1.5; margin-bottom: 14px; }
.who-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.who-row .avatar { border-color: transparent; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.sq { aspect-ratio: 1 / 1; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-3); border: 1px solid var(--line); position: relative; display: grid; place-items: center; color: var(--muted); }
.sq img { width: 100%; height: 100%; object-fit: cover; }
.sq .sq-label { position: absolute; left: 6px; bottom: 6px; background: rgba(15,23,42,.72); color: #fff; font-size: 14px; font-weight: 700; padding: 2px 7px; border-radius: 4px; }
.sq.empty { border-style: dashed; }
.sq.add { border-style: dashed; cursor: pointer; font-weight: 600; color: var(--accent); flex-direction: column; gap: 4px; }
.sq.add:hover { background: var(--accent-soft); }
button.sq { padding: 0; text-align: center; }
.comment { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.comment:first-child { border-top: 0; }
.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; gap: 8px; align-items: baseline; font-size: 15px; color: var(--muted); }
.comment-meta b { color: var(--ink); }
.comment-text { white-space: pre-wrap; margin-top: 2px; overflow-wrap: anywhere; }
.comment-photos { display: flex; gap: 8px; margin-top: 8px; }
.comment-photos .sq { width: 84px; }
.composer { display: flex; gap: 8px; align-items: flex-end; margin-top: 12px; }
.composer textarea { min-height: 48px; flex: 1; min-width: 0; }
.composer .btn-icon { border: 1px solid var(--line-strong); }
.timeline { display: flex; flex-direction: column; gap: 0; }
.tl { display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding: 8px 0; position: relative; }
.tl::before { content: ""; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: var(--line); }
.tl-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); display: grid; place-items: center; position: relative; z-index: 1; }
.tl-dot svg.i { width: 14px; height: 14px; stroke-width: 2.4; color: var(--muted); }
.tl-dot.done { border-color: var(--ok-mark); } .tl-dot.done svg.i { color: var(--ok); }
.tl-text { font-size: 16px; overflow-wrap: anywhere; } .tl-when { color: var(--muted); font-size: 15px; }
.menu { position: absolute; right: 8px; top: 52px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-modal); box-shadow: var(--shadow-3); min-width: 200px; z-index: 5; padding: 6px; display: flex; flex-direction: column; }
.menu button { display: flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 0 12px; border-radius: var(--r-sm); text-align: left; font-weight: 600; width: 100%; }
.menu button:hover { background: var(--surface-2); }
.menu button.danger { color: var(--red); }
.menu-wrap { position: relative; }
/* Head-row actions: Send report (for anyone who can see the task) beside the manage menu (for those who can change it). */
.detail-head-actions, #taskDialogActions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.detail-head-actions .rp-btn { padding: 0 12px; min-height: 40px; }
.detail-head-actions .rp-btn svg.i { width: 20px; height: 20px; }

/* ---------- send report ---------- */
.rp-preview { display: flex; align-items: center; gap: 14px; padding: 12px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); }
.rp-sheet { width: 104px; flex-shrink: 0; aspect-ratio: 794 / 1123; background: #fff; border: 1px solid var(--line-strong); border-radius: 4px; box-shadow: var(--shadow-1); overflow: hidden; display: grid; place-items: center; color: var(--grey); padding: 0; }
.rp-sheet:disabled { opacity: 1; }
.rp-sheet img { width: 100%; height: 100%; object-fit: contain; }
.rp-sheet svg.i { color: var(--red); }
.rp-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rp-title { font-weight: 700; overflow-wrap: anywhere; }
.rp-cap { color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
.rp-cap-error { color: var(--red); font-weight: 600; }
.rp-caprow { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; margin: 4px 0 0 -12px; }
.rp-caprow .btn-ghost { padding: 0 12px; }
@media (min-width: 700px) { .rp-sheet { width: 136px; } }
.recips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: var(--tap); padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); cursor: text; }
.recips:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.recips input[type=email] { flex: 1 1 160px; min-width: 140px; min-height: 36px; padding: 4px 8px; border: 0; background: transparent; font-size: 17px; }
.recips input[type=email]:focus { outline: none; box-shadow: none; }
.rchip { display: inline-flex; align-items: center; gap: 2px; min-height: 40px; padding: 0 0 0 12px; border-radius: var(--r-pill); background: var(--navy-50); color: var(--navy); font-weight: 600; font-size: 15px; max-width: 100%; }
.rchip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rchip > button { width: 44px; height: 40px; border-radius: 0 999px 999px 0; display: grid; place-items: center; color: inherit; }
.rchip > button:hover { background: var(--navy-100); }
.rchip > button svg.i { width: 18px; height: 18px; stroke-width: 2.2; }
:root[data-theme="dark"] .rchip { color: #e8edf4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rchip { color: #e8edf4; } }
.recent { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -6px 0 16px; }
.recent:empty { display: none; }
.recent-label { color: var(--muted); font-size: 15px; font-weight: 600; margin-right: 2px; }
.recent .chip { min-height: 40px; padding: 0 12px; font-weight: 500; }
.rp-honest { margin-top: -4px; }
#reportDialogFoot .btn-ghost:first-child { flex: 0 0 auto; }
#reportDialogFoot .btn { flex: 1 1 auto; }

/* ---------- completion flow ---------- */
.step-title { font-size: 17px; font-weight: 700; margin: 6px 0 4px; }
.step-sub { color: var(--muted); margin-bottom: 12px; overflow-wrap: anywhere; }
.evidence { display: grid; grid-template-columns: repeat(2, minmax(0, 240px)); gap: 12px; margin-bottom: 18px; }   /* two tiles side by side; on a tablet they do not drift to the far edges */
.evidence .sq { aspect-ratio: 1 / 1; }
.evidence .ev-label { font-weight: 700; margin-bottom: 6px; display: flex; justify-content: space-between; }
.evidence .ev-label .ok { color: var(--ok); }
.sigpad { background: #fff; touch-action: none; width: 100%; height: 170px; display: block; cursor: crosshair; border: 1px solid var(--line-strong); border-radius: var(--r-sm); }
.sig-row { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 14px; }

/* ---------- camera + crop (engine markup; ids load-bearing) ---------- */
.cam { position: fixed; inset: 0; margin: 0; width: 100%; height: 100dvh; max-height: 100dvh; background: #0b1119; color: #e8edf4; display: flex; flex-direction: column; border-radius: 0; }
.cam .cam-body { flex: 1; overflow: auto; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px; max-width: 560px; width: 100%; margin: 0 auto; }
.cam h3 { font-size: 18px; color: #fff; }
.cam .hint { color: #b7c3d3; }
.camstage { position: relative; overflow: hidden; aspect-ratio: 1 / 1; background: #000; border-radius: var(--r-sm); width: 100%; }
.camstage video, .camstage img.ghost { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camstage img.ghost { pointer-events: none; }
.camstage .grid3 { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.14) 1px, transparent 1px); background-size: 33.333% 33.333%; }
.nocam { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; text-align: center; color: #e8edf4; font-weight: 600; }
#ghostCtl { display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: #b7c3d3; }
#ghostCtl > div { display: flex; justify-content: space-between; }
#ghostRange { width: 100%; accent-color: #7fb0f0; min-height: 32px; }
.cam-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cam-actions .btn { background: transparent; color: #e8edf4; border-color: #3b4961; padding: 0 10px; min-width: 0; flex: 0 1 auto; }
@media (max-width: 360px) { .cam-actions { gap: 8px; } .cam-actions .btn { font-size: 15px; padding: 0 8px; } }
.shutter { width: 72px; height: 72px; border-radius: 50%; background: #fff; border: 5px solid #8da2bd; box-shadow: 0 0 0 3px #0b1119 inset; flex-shrink: 0; }
.shutter:active { transform: scale(.95); }
.cropstage { position: relative; overflow: hidden; height: 46vh; min-height: 240px; cursor: crosshair; touch-action: none; user-select: none; background: #000; border-radius: var(--r-sm); }
.cropstage img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.cropbox { position: absolute; border: 2px solid #7fb0f0; background: rgba(127,176,240,.16); display: none; box-shadow: 0 0 0 9999px rgba(0,0,0,.42); }

/* ---------- toasts: a surface card with a 4px semantic left edge ---------- */
/* The host is invisible until it holds a toast: no empty pill ever paints. */
.toasts { position: fixed; left: 12px; right: 12px; bottom: calc(var(--nav-h) + 14px + env(safe-area-inset-bottom)); z-index: 90; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toasts:empty { display: none; }
.toast { display: flex; align-items: center; gap: 12px; max-width: 520px; width: 100%; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 4px solid var(--line-strong); box-shadow: var(--shadow-3); font-weight: 600; pointer-events: auto; animation: toast-in var(--dur) var(--ease); }
.toast.out { opacity: 0; transition: opacity var(--dur); }
.toast-msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast-error { border-left-color: var(--red-mark); }
.toast-ok { border-left-color: var(--ok-mark); }
.toast-warn { border-left-color: var(--amber-mark); }
/* A new alert (a task given to you, a comment, something overdue): navy edge with a bell, and one tap opens it. */
.toast-alert { border-left-color: var(--navy); }
:root[data-theme="dark"] .toast-alert { border-left-color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toast-alert { border-left-color: var(--accent); } }
.toast-alert svg.i { width: 20px; height: 20px; color: var(--navy); flex-shrink: 0; }
:root[data-theme="dark"] .toast-alert svg.i { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toast-alert svg.i { color: var(--accent); } }
.toast-act { min-height: 40px; padding: 0 12px; border-radius: var(--r-sm); background: var(--accent-soft); color: var(--accent); font-weight: 700; flex-shrink: 0; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- sign in ---------- */
.auth { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 28px 22px; box-shadow: var(--shadow-2); }
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.auth-brand h1 { font-size: 24px; }
.auth-brand .sub { color: var(--muted); font-size: 15px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 15px; margin: 18px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.demo-hint { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 8px; }
.demo-hint summary { cursor: pointer; color: var(--muted); font-size: 15px; min-height: var(--tap); display: flex; align-items: center; gap: 6px; }
.demo-hint table { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 6px; }
.demo-hint td { padding: 5px 4px; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.demo-hint code { font-family: var(--mono); color: var(--ink); }
.ms-pick .lrow { min-height: 64px; }

/* ---------- performance: KPI tiles (micro-label · 800 figure · caption), chart cards ---------- */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 14px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; box-shadow: var(--shadow-1); min-width: 0; }
.tile .t-label { color: var(--muted); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.tile .t-value { font-size: 30px; font-weight: 800; line-height: 1.15; margin-top: 4px; letter-spacing: -.5px; overflow-wrap: anywhere; }
.tile .t-value.over { color: var(--red); }
.tile .t-sub { color: var(--muted); font-size: 15px; margin-top: 2px; }
.chart-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; margin-bottom: 12px; box-shadow: var(--shadow-1); min-width: 0; }
.chart-card h3 { font-size: 16px; margin-bottom: 2px; }
.chart-card .c-sub { color: var(--muted); font-size: 15px; margin-bottom: 10px; }
.chart-card svg { width: 100%; height: auto; display: block; overflow: visible; }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 15px; color: var(--ink-2); margin-top: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.legend i.ontime { background: var(--chart-ontime); } .legend i.late { background: var(--chart-late); }
.c-grid { stroke: var(--chart-grid); stroke-width: 1; }
.c-axis { fill: var(--muted); font-size: 15px; font-family: var(--font); }
.c-val { fill: var(--ink-2); font-size: 15px; font-weight: 700; font-family: var(--font); }
.c-ontime { fill: var(--chart-ontime); } .c-late { fill: var(--chart-late); }
.c-urgent { fill: var(--chart-urgent); } .c-high { fill: var(--chart-high); } .c-normal { fill: var(--chart-normal); } .c-low { fill: var(--chart-low); }
.c-bar-hit { fill: transparent; cursor: pointer; }
.c-bar-hit:hover + rect, .c-bar-hit:focus + rect { opacity: .8; }
.hbar-list { display: flex; flex-direction: column; gap: 4px; }
.hbar { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; align-items: center; gap: 10px; min-height: var(--tap); padding: 2px 6px; border-radius: var(--r-sm); text-align: left; width: 100%; }
button.hbar:hover { background: var(--surface-2); }
.hbar .hb-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 8px; min-width: 0; }
.hbar .hb-name span { overflow: hidden; text-overflow: ellipsis; }
.hbar .hb-track { height: 16px; background: var(--surface-3); border-radius: 0 4px 4px 0; overflow: hidden; display: flex; gap: 2px; }
.hbar .hb-fill { height: 100%; background: var(--chart-ontime); border-radius: 0 4px 4px 0; min-width: 2px; }
.hbar .hb-fill.late { background: var(--chart-late); }
.hbar .hb-val { font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 2.2em; text-align: right; white-space: nowrap; }
.hbar .hb-val .lt { color: var(--muted); font-weight: 400; }
/* Narrow screens: the name (and the number) on one line, the bar underneath — a 46-char team name never fights the bar. */
@media (max-width: 480px) {
  .hbar { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 6px; }
  .hbar .hb-track { grid-column: 1 / -1; }
}
.win-pick { margin-bottom: 8px; }
.win-pick button { padding: 0 6px; white-space: nowrap; }
/* Four windows: one row from 400px; a 2 × 2 grid below it (never wider than the phone). */
@media (max-width: 399px) { .seg.win-pick { display: grid; grid-template-columns: 1fr 1fr; } }

/* ---------- more: profile line, then equal icon tiles; the words live in the sheet behind each tile ---------- */
.profile { display: flex; align-items: center; gap: 14px; padding: 16px 0 18px; }
.profile > div { min-width: 0; }
.profile .p-name { font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.profile .p-sub { color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
.nav-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nav-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 104px; padding: 12px 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); color: var(--ink); text-align: center; min-width: 0; transition: background var(--dur), border-color var(--dur), transform var(--dur-fast); }
.nav-tile:hover { background: var(--surface-2); border-color: var(--line-strong); }
.nav-tile:active { transform: translateY(1px); }
.nav-tile .nt-ic { width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--navy-50); color: var(--navy); display: grid; place-items: center; }
.nav-tile .nt-ic svg.i { width: 24px; height: 24px; stroke-width: 2; }
.nav-tile .nt-label { font-weight: 600; font-size: 15px; line-height: 1.2; max-width: 100%; overflow-wrap: anywhere; }
.nav-tile .nt-sub { font-size: 14px; color: var(--muted); line-height: 1.1; margin-top: -4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-tile.danger .nt-ic { background: var(--red-bg); color: var(--red); }
:root[data-theme="dark"] .nav-tile .nt-ic { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-tile .nt-ic { color: var(--accent); } }
.foot-note { margin: 18px 2px; }
.install-hint { font-size: 15px; color: var(--muted); padding: 4px 14px 12px; }
.list-label { font-weight: 700; color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: .05em; margin: 16px 2px 6px; }

/* ---------- tablet PORTRAIT (700–1023): the bottom bar stays; the width is used, not stretched ----------
   Task rows are one wide line each (title · meta · who · control — the >= 600px row rule); the task opens as a
   centred sheet; tiles and charts go four / two across; lists stay one column. */
@media (min-width: 700px) and (max-width: 1023px) {
  .main { max-width: 900px; padding-left: 24px; padding-right: 24px; }
  .toasts { left: 24px; right: 24px; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .nav-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sheet { inset: 0; margin: auto; width: min(92vw, 640px); height: auto; max-height: 90dvh; border-radius: var(--r-modal); }
  .sheet[open] { animation: none; }
  .charts-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}

/* ---------- desktop (two-pane) ----------
   The rail sits at the left edge; everything in the main column lives inside one centred frame
   (--frame-w, narrower for list screens) so a wide monitor never shows a dead right half. */
.pane-detail { display: none; }
@media (min-width: 1024px) {
  .app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100dvh; }
  .tabbar { display: none; }
  .rail { display: flex; flex-direction: column; position: sticky; top: 0; height: 100dvh; background: var(--rail-bg); color: var(--rail-ink); padding: 18px 12px; gap: 2px; }
  .rail-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; font-weight: 700; font-size: 18px; color: #fff; }
  .rail .tab { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 0 12px; min-height: 46px; color: var(--rail-muted); font-size: 16px; border-radius: var(--r-sm); }
  .rail .tab:hover { background: rgba(255,255,255,.07); color: #fff; }
  .rail .tab.on { background: var(--rail-active); color: #fff; }
  .rail .tab .badge { position: static; margin-left: auto; box-shadow: none; background: #fff; color: var(--navy); }
  .rail .tab-add { margin: 10px 0 14px; }
  .rail .tab-add .fab { margin: 0; width: auto; height: 46px; border-radius: var(--r-sm); padding: 0 14px; display: flex; gap: 10px; justify-content: flex-start; background: #fff; color: var(--navy); font-weight: 700; font-size: 16px; }
  .rail .spacer { flex: 1; }
  .rail .rail-user { display: flex; align-items: center; gap: 10px; padding: 10px 8px; color: var(--rail-ink); font-size: 15px; min-width: 0; }
  .rail .rail-user span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail .rail-user .avatar { background: rgba(255,255,255,.16); color: #fff; border-color: transparent; }
  .main { padding: 0 32px 40px; max-width: none; margin: 0; }
  .main > * { max-width: var(--frame-w); margin-left: auto; margin-right: auto; }
  .main > .main-narrow { max-width: var(--narrow-w); }
  .main > .main-wide { max-width: 1100px; }
  .vhead { padding: 24px 0 12px; }
  .two-pane { display: grid; grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); gap: 24px; align-items: start; }
  .pane-list { min-width: 0; }
  .pane-detail { display: block; position: sticky; top: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-1); min-height: 200px; max-height: calc(100dvh - 48px); overflow: auto; padding: 22px 24px; container-type: inline-size; margin-top: 24px; }
  /* Nothing picked yet: a quiet dashed outline, not a tall empty box. */
  .pane-detail:has(> .state-empty:only-child) { background: transparent; border: 1px dashed var(--line-strong); box-shadow: none; }
  .pane-detail .state-empty { background: transparent; border: 0; margin: 0; padding: 32px 16px; }
  .pane-detail .detail-title { font-size: 24px; }
  .modal { width: min(92vw, 520px); }
  .sheet { inset: 0; margin: auto; width: min(94vw, 680px); height: auto; max-height: 88dvh; border-radius: var(--r-modal); }
  .sheet[open] { animation: none; }
  .toasts { left: var(--rail-w); right: 0; bottom: 24px; align-items: center; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .nav-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .charts-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .chips.big .chip { flex: 1 1 auto; }
}
/* ---------- tablet LANDSCAPE (1024–1279): two panes, so the rail is a compact icon column, not a 232px sidebar ----------
   Icon above a short label, the unread count on the bell, the person as an avatar only. The list keeps 360–420px and
   the detail pane gets the rest (about 440px at 1024, 560px at 1180). */
@media (min-width: 1024px) and (max-width: 1279px) {
  :root { --rail-w: 100px; }   /* "Performance" fits under its icon at 14px */
  .rail { padding: 14px 8px; }
  .rail-brand { justify-content: center; padding: 4px 0 14px; }
  .rail-brand .rail-brand-text { display: none; }
  .rail .tab { flex-direction: column; justify-content: center; gap: 4px; padding: 6px 2px; min-height: 60px; font-size: 14px; text-align: center; }
  .rail .tab .badge { position: absolute; top: 4px; right: 4px; margin: 0; min-width: 20px; height: 20px; line-height: 20px; font-size: 14px; padding: 0 5px; }
  .rail .tab-add { margin: 6px 0 10px; }
  .rail .tab-add .fab { flex-direction: column; justify-content: center; gap: 4px; height: auto; min-height: 60px; padding: 6px 2px; font-size: 14px; white-space: normal; line-height: 1.15; text-align: center; }
  .rail .rail-user { justify-content: center; padding: 10px 0; }
  .rail .rail-user span:last-child { display: none; }
  .main { padding: 0 24px 32px; }
  .vhead { padding: 20px 0 12px; }
  .two-pane { grid-template-columns: minmax(360px, 420px) minmax(0, 1fr); gap: 20px; }
  .pane-detail { padding: 18px 20px; top: 16px; max-height: calc(100dvh - 32px); margin-top: 16px; }
  .pane-detail .detail-title { font-size: 22px; }
}
@media (min-width: 1280px) {
  .two-pane { grid-template-columns: minmax(380px, 460px) minmax(0, 1fr); gap: 28px; }
}
@media (min-width: 1400px) {
  .main { padding: 0 48px 48px; }
  .two-pane { grid-template-columns: minmax(400px, 480px) minmax(0, 1fr); gap: 32px; }
}
@media (min-width: 1800px) {
  :root { --frame-w: 1400px; --narrow-w: 800px; }
  .two-pane { grid-template-columns: minmax(420px, 500px) minmax(0, 1fr); gap: 36px; }
}
@media (min-width: 2200px) {
  :root { --frame-w: 1560px; --narrow-w: 840px; }
  .main > .main-wide { max-width: 1200px; }
}
@media print { .tabbar, .rail, .toasts { display: none !important; } }