/* INTERKEPT shared design system (docs/INTERKEPT-UX-PLAN.md section 3, Phase 2).
   Seeded from public/f/app.css, which already passes WCAG AA. Everything here is namespaced
   (--ui-*, .ui-*) because the HUD still carries its own --accent/--text/--green variables and
   theme.js rewrites --accent at runtime; the two systems must not collide while the HUD is
   being converted screen by screen.

   Theme: follows the HUD's own switch. theme.js puts data-theme="light|dark" on <html>; with
   no attribute the device setting decides. Every text pair below is >= 4.5:1, every
   control border >= 3:1 (ratios in the plan).

   Motion: none. No animation or transition is defined in this file, so nothing here needs a
   reduced-motion override. */

:root {
  --ui-bg: #F6F3EC;
  --ui-card: #FFFFFF;
  --ui-ink: #1F2933;
  --ui-mute: #5C6670;
  --ui-accent: #2F6F73;
  --ui-accent-ink: #FFFFFF;
  --ui-warn: #8A5200;
  --ui-danger: #B42318;
  --ui-ok: #2E7D4F;
  --ui-info: #2C5C9A;
  --ui-line: #E4DFD3;
  --ui-line-strong: #8A857A;
  --ui-r-card: 18px;
  --ui-r-input: 12px;
  --ui-r-chip: 999px;
  --ui-tap: 48px;
  --ui-s1: 4px; --ui-s2: 8px; --ui-s3: 12px; --ui-s4: 16px; --ui-s5: 24px; --ui-s6: 32px; --ui-s7: 48px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ui-bg: #14181C; --ui-card: #1D2329; --ui-ink: #E8ECEF; --ui-mute: #9AA5B0;
    --ui-accent: #6CC1C6; --ui-accent-ink: #0E1417; --ui-warn: #E9B45C; --ui-danger: #F28B82;
    --ui-ok: #6FCF97; --ui-info: #8DB4F0; --ui-line: #2B333B; --ui-line-strong: #66717C;
  }
}
:root[data-theme="dark"] {
  --ui-bg: #14181C; --ui-card: #1D2329; --ui-ink: #E8ECEF; --ui-mute: #9AA5B0;
  --ui-accent: #6CC1C6; --ui-accent-ink: #0E1417; --ui-warn: #E9B45C; --ui-danger: #F28B82;
  --ui-ok: #6FCF97; --ui-info: #8DB4F0; --ui-line: #2B333B; --ui-line-strong: #66717C;
}

/* ── scope ─────────────────────────────────────────────────────────────────── */
.ui {
  background: var(--ui-bg); color: var(--ui-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 18px; line-height: 1.45; font-weight: 400; letter-spacing: normal; text-transform: none;
  border-radius: 24px; padding: var(--ui-s4);
  max-width: 640px; margin: 0 auto;
}
.ui *, .ui *::before, .ui *::after { box-sizing: border-box; }
.ui :focus-visible { outline: 3px solid var(--ui-accent); outline-offset: 2px; border-radius: 10px; }
.ui h1, .ui h2, .ui p, .ui ul { margin: 0; padding: 0; }
.ui ul { list-style: none; }
.ui button, .ui input { font: inherit; letter-spacing: normal; text-transform: none; }
.ui > * + * { margin-top: var(--ui-s4); }
.ui-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── type scale (em, so it follows the 18px scope and the user's own zoom) ───── */
.ui-hero   { font-size: 1.5em;  line-height: 1.2;  font-weight: 700; overflow-wrap: anywhere; }
.ui-h2     { font-size: 1.1em;  line-height: 1.3;  font-weight: 700; margin-bottom: var(--ui-s2); }
.ui-title  { font-size: 1em;    line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.ui-meta   { font-size: .875em; line-height: 1.4;  font-weight: 500; color: var(--ui-mute); }
.ui-eyebrow{ font-size: .8em;   line-height: 1.3;  font-weight: 700; color: var(--ui-mute); letter-spacing: .06em; text-transform: uppercase; }
.ui-clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-clamp3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ── surfaces ─────────────────────────────────────────────────────────────── */
.ui-card { background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: var(--ui-r-card); padding: var(--ui-s4); }
.ui-card > * + * { margin-top: var(--ui-s2); }
.ui-priority { border-left: 6px solid var(--ui-accent); }
.ui-priority .ui-actions { margin-top: var(--ui-s4); }
.ui-list { background: var(--ui-card); border: 1px solid var(--ui-line); border-radius: var(--ui-r-card); overflow: hidden; }
.ui-row { display: flex; align-items: center; gap: var(--ui-s3); min-height: 64px; padding: var(--ui-s2) var(--ui-s4); border-top: 1px solid var(--ui-line); }
.ui-row:first-child { border-top: 0; }
.ui-row > .ui-grow { flex: 1 1 auto; min-width: 0; }
.ui-time { flex: 0 0 5.6em; color: var(--ui-mute); font-size: .875em; font-variant-numeric: tabular-nums; font-weight: 500; }
.ui-empty { padding: var(--ui-s4); color: var(--ui-mute); }

/* ── buttons ──────────────────────────────────────────────────────────────── */
.ui-actions { display: flex; flex-wrap: wrap; gap: var(--ui-s2); }
.ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-s2);
  min-height: var(--ui-tap); padding: 0 var(--ui-s5); border-radius: 14px; border: 2px solid transparent;
  background: transparent; color: var(--ui-ink); font-weight: 700; text-align: center; text-decoration: none; cursor: pointer;
}
.ui-btn--primary { background: var(--ui-accent); color: var(--ui-accent-ink); min-height: 56px; flex: 1 1 8em; }
.ui-btn--ghost   { border-color: var(--ui-line-strong); background: var(--ui-card); }
.ui-btn--quiet   { color: var(--ui-mute); }
.ui-btn--sm      { padding: 0 var(--ui-s4); flex: 0 0 auto; }
.ui-btn[disabled] { opacity: .55; cursor: default; }

/* disclosure pill: a neutral count, never red -- the number is information, not an alarm */
.ui-pill {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ui-s3); width: 100%;
  min-height: 56px; padding: 0 var(--ui-s4); border-radius: var(--ui-r-chip);
  background: var(--ui-card); border: 2px solid var(--ui-line-strong); font-weight: 600; cursor: pointer; text-align: left;
}
.ui-count { display: inline-block; min-width: 2em; padding: 0 var(--ui-s2); margin-right: var(--ui-s2); border-radius: var(--ui-r-chip); background: var(--ui-line); text-align: center; font-variant-numeric: tabular-nums; }
.ui-pill-hint { color: var(--ui-mute); font-size: .875em; font-weight: 500; }

/* ── form field ───────────────────────────────────────────────────────────── */
.ui-field { display: flex; gap: var(--ui-s2); }
.ui-input {
  flex: 1 1 auto; min-width: 0; min-height: var(--ui-tap); padding: 0 var(--ui-s3);
  border-radius: var(--ui-r-input); border: 2px solid var(--ui-line-strong); background: var(--ui-card); color: var(--ui-ink);
}
.ui-input::placeholder { color: var(--ui-mute); opacity: 1; }
.ui-status:not(:empty) { margin-top: var(--ui-s2); }

/* ── Brain Ops: study / focus cards on the Now tab ─────────────────────── */
.ui-brain > * + * { margin-top: var(--ui-s3); }
.ui-brain-on { border-color: var(--ui-accent); border-left-width: 6px; }
.ui-bigclock { font-size: 2.4em; line-height: 1.1; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: var(--ui-s1); }
.ui-check { display: flex; align-items: center; gap: var(--ui-s3); min-height: var(--ui-tap); margin-top: var(--ui-s2); color: var(--ui-mute); font-size: .95em; }
.ui-check input { width: 26px; height: 26px; flex: 0 0 auto; }
.ui-more summary { cursor: pointer; min-height: var(--ui-tap); display: flex; align-items: center; color: var(--ui-mute); font-weight: 600; }

/* ── small screens ────────────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .ui { padding: var(--ui-s3); border-radius: 18px; }
  .ui-btn { padding: 0 var(--ui-s4); }
  .ui-row { padding-left: var(--ui-s3); padding-right: var(--ui-s3); }
}