/* ============================================================================
   RegWatch theme — "Counsel" (light) + "Midnight" (dark), per the standing
   design spec. ALL color is driven by CSS custom properties so the light/dark
   toggle + auto schedule is free: tokens are defined on :root (Counsel) and
   redefined under :root[data-theme="dark"] (Midnight). Never hardcode hex in
   component rules.
   ========================================================================== */
:root, :root[data-theme="light"] {
  color-scheme: light;

  /* surfaces */
  --bg: #f3f3ee;            /* paper ground */
  --panel: #ffffff;         /* card surface */
  --panel-2: #f4f5f1;       /* secondary surface / inputs / insets */
  --elevated: #ffffff;
  --border: #e3e4dd;        /* hairline */
  --shadow: 0 6px 20px rgba(20, 27, 46, .07);
  --radius: 15px;

  /* ink */
  --text: #16203a;          /* deep navy */
  --muted: #5a6478;

  /* primary accent — emerald */
  --brand: #0e7a5c;
  --brand-dark: #0b5e47;    /* darker (hover / headings) */
  --brand-tint: #e7f1ec;    /* soft accent tint (chips, pills, insets) */
  --accent-ink: #0c5c46;    /* text on the soft tint */
  --btn-ink: #ffffff;       /* text on accent fills */
  --focus: rgba(14, 122, 92, .16);
  --chip-bd: #cfe4da;

  /* status roles */
  --good: #12916e;          /* success / money */
  --good-bg: #e7f1ec;
  --good-bd: #cfe4da;
  --movement: #a9791f;      /* gold — attention, not alarm */
  --movement-bg: #f6efdd;
  --movement-bd: #e7d6a8;
  --danger: #c0452f;        /* brick */
  --danger-bg: #f8e7e2;
  --danger-bd: #eec7bd;
  --accent: #b0832a;        /* gold — secondary accent (btn.accent) */

  /* chrome */
  --glass: rgba(255, 255, 255, .82);
  --topbar-ink: #16203a;
  --toast-bg: #16203a;
  --toast-ink: #ffffff;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #12141c;
  --panel: #1b1e29;
  --panel-2: #232733;
  --elevated: #232733;
  --border: #2a2e3d;
  --shadow: 0 10px 26px rgba(0, 0, 0, .42);

  --text: #e9ebf4;
  --muted: #969bb0;

  --brand: #8f7ff2;         /* luminous lavender */
  --brand-dark: #b3a6ff;    /* lighter (hover / headings) */
  --brand-tint: #262247;
  --accent-ink: #b3a6ff;
  --btn-ink: #14161f;       /* near-black on accent fills */
  --focus: rgba(143, 127, 242, .30);
  --chip-bd: #33305c;

  --good: #37e0c8;          /* cyan money */
  --good-bg: #16302c;
  --good-bd: #2f5a50;
  --movement: #e0b24d;      /* gold */
  --movement-bg: #322a17;
  --movement-bd: #5a4a24;
  --danger: #ff6b78;
  --danger-bg: #3a1f24;
  --danger-bd: #5e2f37;
  --accent: #e0b24d;        /* gold */

  --glass: rgba(27, 30, 41, .82);
  --topbar-ink: #e9ebf4;
  --toast-bg: #232733;
  --toast-ink: #e9ebf4;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
  min-height: 100vh;
  transition: background-color .25s ease, color .25s ease;
}

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  background: var(--glass); backdrop-filter: saturate(180%) blur(12px);
  color: var(--topbar-ink);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: 0 0 16px 16px;
}
/* Build badge, top-left: sits in the top bar's 12px top padding above the logo, below the
   notch, clear of the L/D/A toggle on the right. Tiny on purpose.
   FIXED 2026-09-25: the badge had no background of its own, so on a real iPhone it rendered
   over whatever happened to be behind it there (the translucent status bar, the topbar's
   own blur, the app icon) and came out as an illegible smudge, even though --muted computed
   fine against a flat swatch. §4's own lesson: a color is only as good as what's actually
   behind it, not a swatch you assumed. Fix: an opaque --panel chip so the contrast below is
   real, not assumed, in either theme, whatever sits underneath.
   --muted on --panel: 5.95:1 light, 6.02:1 dark (both pass 4.5:1).
   Failure state on --panel: light #a5361f is 6.67:1, dark --danger #ff6b78 is 6.03:1. */
.app-version {
  position: fixed; z-index: 1100; pointer-events: none;   /* above the PIN gate (1000) */
  top: calc(env(safe-area-inset-top, 0px) + 1px);
  left: calc(env(safe-area-inset-left, 0px) + 16px);
  font: 600 9px/9px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .2px; color: var(--muted); white-space: nowrap;
  background: var(--panel); border: 1px solid var(--border); border-radius: 4px;
  padding: 0 4px;
}
.app-version.fail { color: #a5361f; font-weight: 700; }
:root[data-theme="dark"] .app-version.fail { color: var(--danger); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: 19px; letter-spacing: .2px; min-width: 0; }
.brand > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-logo {
  height: 34px; width: 34px; object-fit: cover;
  border-radius: 9px; box-sizing: border-box;
  flex: 0 0 auto; box-shadow: 0 2px 6px rgba(0, 0, 0, .22);
}
.top-right { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.conn { font-size: 12px; font-weight: 600; background: var(--panel-2); color: var(--muted); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.conn.ok { color: var(--good); }
.conn.bad { color: var(--danger); }

/* L / D / Auto segmented pill (theme toggle) */
.seg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--panel-2); }
.seg button {
  border: none; background: none; color: var(--muted); cursor: pointer;
  font-size: 12px; font-weight: 700; line-height: 1; padding: 6px 9px; border-radius: 999px;
  min-height: 30px; min-width: 30px; touch-action: manipulation; transition: background .15s, color .15s;
}
.seg button.active { background: var(--brand); color: var(--btn-ink); }

.view {
  padding: 16px calc(16px + env(safe-area-inset-right)) 16px calc(16px + env(safe-area-inset-left));
  max-width: 980px; margin: 0 auto;
}

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  display: flex; background: var(--glass); backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
  box-shadow: 0 -2px 16px rgba(20, 27, 46, .06);
}
.tab {
  flex: 1 1 0; min-width: 0; background: none; border: none; color: var(--muted); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 1px 7px; transition: color .15s, transform .1s;
}
.tab .tab-ico { font-size: 18px; line-height: 1; filter: grayscale(.35); opacity: .8; transition: filter .15s, opacity .15s, transform .15s; }
.tab .tab-lbl { font-size: 10px; font-weight: 600; letter-spacing: -.1px; white-space: nowrap; }
.tab.active { color: var(--brand); }
.tab.active .tab-ico { filter: none; opacity: 1; transform: translateY(-1px) scale(1.08); }
.tab:active { transform: scale(.94); }

h1 { font-family: var(--font-serif); font-size: 25px; font-weight: 700; margin: 6px 0 16px; color: var(--text); letter-spacing: -.2px; }
h2 { font-size: 16px; margin: 20px 0 8px; color: var(--text); }
p.muted, .muted { color: var(--muted); }
small.muted { font-size: 12px; }

.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 15px; margin-bottom: 12px;
  box-shadow: var(--shadow);
  transition: transform .12s, box-shadow .12s, background-color .25s, border-color .25s;
}
.card .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.card h3 { margin: 0 0 4px; font-size: 15px; color: var(--text); }

.chip {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.countdown {
  display: inline-block; margin-top: 7px; font-size: 12px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: var(--brand-tint); color: var(--accent-ink); border: 1px solid var(--chip-bd);
}
.countdown.urgent { background: var(--movement-bg); color: var(--movement); border-color: var(--movement-bd); }

.chip.movement { background: var(--movement-bg); color: var(--movement); border-color: var(--movement-bd); }
.chip.ok { background: var(--good-bg); color: var(--good); border-color: var(--good-bd); }
.chip.tier1 { background: var(--movement-bg); color: var(--movement); border-color: var(--movement-bd); }

/* ---- dashboard ---- */
.brief-card {
  background: var(--panel);
  border: 1px solid var(--border); border-left: 4px solid var(--brand);
  border-radius: 14px; padding: 13px 16px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.brief-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.brief-title { font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--brand-dark); }
.brief-refresh {
  background: none; border: none; color: var(--brand); font-size: 17px; line-height: 1; cursor: pointer;
  border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; min-height: 38px; padding: 0; margin: -8px -6px -8px 0; /* big touch target, no extra visual footprint */
  touch-action: manipulation;
}
.brief-refresh:hover { background: var(--brand-tint); }
.brief-refresh:disabled { opacity: .5; cursor: default; }
.brief-refresh.spin { display: inline-block; animation: spin .7s linear infinite; }
/* Collapsed to 3 lines by default (§17: never fully expand rich generated text
   just because the data exists — this alone was ~350px of the ~500px card,
   the single largest thing on the whole dashboard, sitting above everything
   else on every visit). line-clamp needs a fixed line-height to size right. */
.brief-body { font-size: 14px; line-height: 1.5; color: var(--text); }
.brief-body.clamped {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--brief-lines, 3);
  overflow: hidden;
}
.brief-more[hidden] { display: none; }
.brief-more {
  background: none; border: none; padding: 4px 0 0; margin: 0; font: inherit;
  font-size: 12.5px; font-weight: 700; color: var(--brand); cursor: pointer;
  min-height: 30px; touch-action: manipulation; display: block;
}
.brief-foot { font-size: 11px; color: var(--muted); margin-top: 7px; }
.brief-load { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; }

/* OIRA / regulatory-lifecycle pipeline */
.pipe-status { border-radius: 10px; padding: 9px 12px; margin: 2px 0 4px; }
.pipe-status.active { background: var(--brand-tint); border: 1px solid var(--chip-bd); }
.pipe-status.done { background: var(--good-bg); border: 1px solid var(--good-bd); }
.pipe-status.todo { background: var(--panel-2); border: 1px solid var(--border); }
.pipe-status-t { font-size: 13.5px; font-weight: 700; color: var(--text); }
.pipe-status-s { font-size: 12px; color: var(--muted); margin-top: 2px; }
.pipe { display: flex; align-items: flex-start; margin: 14px 0 2px; }
.pipe-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.pipe-step::before { content: ""; position: absolute; top: 12px; left: -50%; width: 100%; height: 2px; background: var(--border); z-index: 0; }
.pipe-step:first-child::before { display: none; }
.pipe-step.done::before, .pipe-step.active::before { background: var(--good); }
.pipe-dot {
  width: 26px; height: 26px; border-radius: 50%; z-index: 1;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800;
  background: var(--panel); border: 2px solid var(--border); color: var(--muted);
}
.pipe-step.done .pipe-dot { background: var(--good); border-color: var(--good); color: var(--btn-ink); }
.pipe-step.active .pipe-dot { background: var(--brand); border-color: var(--brand); color: var(--btn-ink); box-shadow: 0 0 0 4px var(--brand-tint); }
.pipe-lbl { font-size: 11px; font-weight: 700; margin-top: 6px; line-height: 1.2; color: var(--text); }
.pipe-step.todo .pipe-lbl { color: var(--muted); }
.pipe-date { font-size: 10px; color: var(--muted); margin-top: 2px; line-height: 1.2; }

.card.past { background: var(--panel-2); }
.card.past h3 { color: var(--muted); }

/* expandable inbox events */
.card.evt { cursor: pointer; }
.card.evt:hover { box-shadow: var(--shadow); border-color: var(--chip-bd); }
.evt-hint { color: var(--brand); font-weight: 650; user-select: none; }
.evt-detail { margin-top: 10px; border-top: 2px solid var(--brand-tint); padding-top: 9px; cursor: default; }
.evt-kv { display: flex; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.45; }
.evt-kv span:first-child { flex: 0 0 128px; color: var(--muted); font-weight: 600; }
.evt-kv span:last-child { flex: 1; word-break: break-word; }
.evt-kv:last-of-type { border-bottom: none; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(98px, 1fr)); gap: 10px; margin-bottom: 18px; }
.tile {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 13px 11px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 2px; transition: transform .1s, box-shadow .12s, border-color .25s;
}
.tile.click { cursor: pointer; }
.tile.click:hover { border-color: var(--chip-bd); }
.tile.click:active { transform: scale(.97); }
.tile .num { font-size: 25px; font-weight: 800; line-height: 1.05; letter-spacing: -.5px; color: var(--brand-dark); }
.tile .lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.tile .sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.tile.alert .num { color: var(--movement); }
.tile.good .num { color: var(--good); }

.feed-item { display: flex; gap: 10px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--border); }
.feed-item:first-child { padding-top: 0; }
.feed-item:last-child { padding-bottom: 0; border-bottom: none; }
.feed-tag {
  flex: 0 0 auto; margin-top: 1px; font-size: 10px; font-weight: 800; letter-spacing: .04em;
  padding: 3px 7px; border-radius: 6px;
}
.feed-tag.mv { background: var(--movement-bg); color: var(--movement); }
.feed-tag.info { background: var(--brand-tint); color: var(--accent-ink); }
.feed-tag.warn { background: var(--movement-bg); color: var(--movement); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  background: var(--brand); color: var(--btn-ink); border: none;
  border-radius: 12px; padding: 10px 16px; font-size: 14px; font-weight: 650; cursor: pointer; text-decoration: none;
  transition: filter .15s, transform .06s, box-shadow .15s; box-shadow: 0 1px 2px rgba(20, 27, 46, .12);
  touch-action: manipulation;
}
.btn.chip-btn { padding: 7px 12px; font-size: 13px; min-height: 34px; }
.btn:active { transform: translateY(1px); }
.btn:hover { filter: brightness(1.06); }
.btn.accent { background: var(--accent); color: var(--btn-ink); }
.btn.accent:hover { filter: brightness(1.05); }
.btn.secondary { background: var(--panel); color: var(--brand); border: 1.5px solid var(--border); box-shadow: none; }
.btn.secondary:hover { background: var(--brand-tint); border-color: var(--chip-bd); }
.btn.tiny { min-height: 30px; padding: 5px 10px; font-size: 12px; font-weight: 600; border-radius: 9px; box-shadow: none; }
.btn:disabled { opacity: .55; cursor: default; box-shadow: none; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* one-click copy button */
.copy-btn {
  flex: 0 0 auto; background: var(--brand-tint); color: var(--accent-ink);
  border: 1px solid var(--chip-bd); border-radius: 8px; cursor: pointer;
  min-width: 30px; min-height: 30px; font-size: 14px; line-height: 1; padding: 0 7px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.copy-btn:hover { filter: brightness(.97); }
.copy-btn:active { transform: scale(.92); }

label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 5px; font-weight: 650; }
input, select, textarea {
  width: 100%; background: var(--panel-2); color: var(--text);
  border: 1.5px solid var(--border); border-radius: 12px; padding: 11px;
  font-size: 16px; /* >=16 avoids iOS focus-zoom */
  font-family: inherit; transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--brand); background: var(--panel);
  box-shadow: 0 0 0 4px var(--focus);
}
textarea { min-height: 110px; resize: vertical; }

label.check { display: flex; flex-direction: row; align-items: center; gap: 9px; margin: 12px 0 2px; color: var(--text); font-weight: 600; cursor: pointer; }
label.check input[type="checkbox"] { width: 18px; height: 18px; margin: 0; flex: 0 0 auto; accent-color: var(--brand); cursor: pointer; }
label.check span { font-size: 13px; }

/* Appearance controls (Settings) */
.appearance .field { margin-top: 12px; }
.appearance .row2 { display: flex; gap: 12px; flex-wrap: wrap; }
.appearance .row2 > div { flex: 1 1 130px; }
.appearance .seg { margin-top: 2px; }
.appearance .seg button { padding: 8px 14px; font-size: 13px; min-height: 36px; }

.banner {
  border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; font-size: 13px;
  border: 1px solid var(--border); line-height: 1.45;
}
.banner.warn { background: var(--movement-bg); border-color: var(--movement-bd); color: var(--movement); }
.banner.info { background: var(--brand-tint); border-color: var(--chip-bd); color: var(--accent-ink); }
.banner.err  { background: var(--danger-bg); border-color: var(--danger-bd); color: var(--danger); }

.event-sev { font-weight: 800; font-size: 12px; letter-spacing: .03em; }
.event-sev.movement { color: var(--movement); }
.event-sev.info { color: var(--muted); }
.kv { font-size: 12px; color: var(--muted); margin-top: 4px; word-break: break-word; }

.ai-summary {
  margin: 8px 0 2px; padding: 11px 13px; font-size: 14px; line-height: 1.45;
  background: var(--brand-tint); border-left: 3px solid var(--brand);
  border-radius: 10px; color: var(--text);
}
.ai-badge {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .06em;
  background: var(--brand); color: var(--btn-ink); border-radius: 5px; padding: 1px 6px; margin-right: 5px;
  vertical-align: middle;
}
.redline {
  margin: 10px 0 2px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--panel-2); overflow: hidden;
}
.redline > summary {
  cursor: pointer; padding: 10px 13px; font-size: 13px; font-weight: 700; color: var(--brand-dark);
  list-style: none; user-select: none;
}
.redline > summary::-webkit-details-marker { display: none; }
.redline > summary::before { content: "▸ "; color: var(--brand); }
.redline[open] > summary::before { content: "▾ "; }
.redline > pre {
  margin: 0; padding: 0 14px 13px; white-space: pre-wrap; word-break: break-word;
  font-family: inherit; font-size: 13px; line-height: 1.5; color: var(--text);
}

.ask-answer {
  white-space: pre-wrap; margin-top: 14px; padding: 15px 16px; line-height: 1.55;
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--brand);
  border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text);
}

/* inline loading indicator */
.loading { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; padding: 14px 2px; }
.spinner {
  width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%;
  border: 2.5px solid var(--brand-tint); border-top-color: var(--brand);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* transient toast feedback */
#toast-wrap {
  position: fixed; left: 0; right: 0; bottom: calc(82px + env(safe-area-inset-bottom)); z-index: 50;
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 16px; pointer-events: none;
}
.toast {
  pointer-events: auto; width: fit-content; max-width: 560px; white-space: pre-line;
  background: var(--toast-bg); color: var(--toast-ink); padding: 11px 16px; border-radius: 12px;
  font-size: 13.5px; font-weight: 550; line-height: 1.42; box-shadow: 0 8px 28px rgba(20, 27, 46, .3);
  animation: toastin .22s ease; border: 1px solid var(--border);
}
.toast.ok { background: var(--good); color: var(--btn-ink); border-color: transparent; }
.toast.err { background: var(--danger); color: #fff; border-color: transparent; }
.toast.info { background: var(--brand); color: var(--btn-ink); border-color: transparent; }
.toast.out { opacity: 0; transform: translateY(8px); transition: opacity .26s, transform .26s; }
@keyframes toastin { from { opacity: 0; transform: translateY(10px); } }

/* smooth momentum scrolling inside code/raw blocks on iOS */
pre, .redline > pre, .ask-answer { -webkit-overflow-scrolling: touch; }

/* phone-width refinements */
@media (max-width: 430px) {
  .evt-kv span:first-child { flex-basis: 104px; }
  h1 { font-size: 22px; }
  .brief-card, .card { border-radius: 14px; }
  .brand { font-size: 17px; }
  .conn { display: none; }         /* keep the topbar tidy on phones */
}

@media (min-width: 768px) {
  .view { padding: 24px; }
}

/* --- Agency picker (Topic & agency watch) --- */
.ag-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 8px; }
.ag-results { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 230px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ag-results:empty { display: none; }
.ag-opt {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: var(--panel-2); color: var(--text); border: 1.5px solid var(--border); border-radius: 10px;
  padding: 9px 11px; font-size: 14px; font-family: inherit; cursor: pointer; min-height: 40px;
  touch-action: manipulation; transition: background .12s, border-color .12s;
}
.ag-opt:hover { background: var(--brand-tint); border-color: var(--chip-bd); }
.ag-opt:active { transform: translateY(1px); }
.ag-opt-short { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--muted); }
.ag-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; align-items: center; }
.ag-chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--brand-tint); color: var(--accent-ink);
  border: 1px solid var(--chip-bd); border-radius: 999px; padding: 5px 6px 5px 11px; font-size: 13px; font-weight: 600; line-height: 1.2;
}
.ag-x {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px;
  border: none; border-radius: 50%; background: var(--chip-bd); color: var(--accent-ink);
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0; touch-action: manipulation;
}
.ag-x:hover { filter: brightness(.95); }
.ag-x:active { transform: scale(.9); }

/* --- Settings: compact notification rows (replaces 3 stacked h2 sections) --- */
.notif-row { padding: 10px 0; border-bottom: 1px solid var(--border); }
.notif-row:last-child { border-bottom: none; padding-bottom: 2px; }
.notif-row .btn-row { margin-top: 8px; }

/* --- break-glass PIN keypad (§2) --- */
#pin-gate {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px calc(24px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
  background: var(--bg); overflow: hidden;
}
.pin-panel { width: 100%; max-width: 320px; text-align: center; }
.pin-logo { border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, .22); }
.pin-title { font-family: var(--font-serif); font-size: 24px; font-weight: 700; color: var(--text); margin-top: 12px; }
.pin-sub { color: var(--muted); font-size: 14px; margin-top: 2px; }
.pin-gate{--pk-s:clamp(56px,min(10vh,22vw),84px);--pk-ink:var(--text);--pk-muted:var(--muted);--pk-line:var(--border);--pk-surface:var(--panel);--pk-accent:var(--brand);--pk-accent-ink:var(--panel);--pk-bad:var(--danger);
  display:flex;flex-direction:column;align-items:center;gap:clamp(12px,2.5vh,22px);
  touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.pin-gate[hidden]{display:none}
.pin-dots{display:flex;gap:10px}
.pin-dots span{width:14px;height:14px;border-radius:50%;border:2px solid var(--pk-ink);box-sizing:border-box}
.pin-dots span.on{background:var(--pk-ink)}
.pin-gate.busy .pin-dots span.on{animation:pinpulse .9s ease-in-out infinite}
@keyframes pinpulse{50%{opacity:.35}}
.pin-gate.bad .pin-dots{animation:pinshake .35s}
@keyframes pinshake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.pin-msg{min-height:1.3em;font-size:16px;line-height:1.3;color:var(--pk-muted);text-align:center;font-weight:700}
.pin-gate.bad .pin-msg{color:var(--pk-ink)}
.pin-pad{touch-action:manipulation;display:grid;grid-template-columns:repeat(3,var(--pk-s));gap:clamp(10px,2vh,16px)}
.pin-pad button{height:var(--pk-s);width:var(--pk-s);border-radius:50%;border:1px solid var(--pk-line);background:var(--pk-surface);color:var(--pk-ink);
  font-family:inherit;font-weight:700;font-size:clamp(26px,4vh,32px);line-height:1;padding:0;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}
.pin-pad button:active{background:var(--pk-accent);color:var(--pk-accent-ink)}
.pin-pad button:disabled{opacity:.5}
.pin-pad .pin-del{border:none;background:transparent;font-size:24px}
@media (max-height:600px){.pin-gate{--pk-s:56px;gap:8px}.pin-pad{gap:8px}}
.pin-panel .pin-gate { margin-top: clamp(8px, 2vh, 20px); }
.pin-foot { color: var(--muted); font-size: 12px; margin-top: clamp(8px, 2vh, 22px); line-height: 1.45; }
.pin-panel.shake { animation: pinshake .42s; }
@keyframes pinshake { 0%,100%{ transform: translateX(0); } 20%,60%{ transform: translateX(-8px); } 40%,80%{ transform: translateX(8px); } }

/* ============================================================================
   WIDE-SCREEN LAYOUT (2026-09-29, §3: fill the window, avoid page scrolling)
   Before this the whole app was one 980px column, so on a 1700px window ~750px
   sat empty and every view was a long scroll. Everything below the phone
   baseline is gated behind a min-width query, so phones are unchanged.
     <760px    phone: single column, page scrolls (as before)
     760-1099  iPad portrait / small window: two-column dashboard, page scrolls
     1100+     desktop window / iPad landscape: LEFT RAIL instead of the bottom
               tab bar, the page itself stops scrolling, dashboard is fixed-height
               panels (2 columns, 3 from 1360) that scroll on their own only if
               their content is taller than the window.
   ========================================================================== */

/* baseline (phone): these wrappers are plain stacked blocks, same look as before */
.dash-head h1 { margin-bottom: 2px; }
.dash-head .kv { margin: 0 0 14px; }
.dash-col, .set-col, .detail-col { min-width: 0; }
.dash { display: flex; flex-direction: column; }
.dash-l { display: contents; }              /* wrapper only matters on wide screens */
.dash-a { order: 1; } .dash-b { order: 2; } .dash-c { order: 3; }

@media (min-width: 760px) {
  :root { --brief-lines: 8; }
  .dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 20px; align-items: start; }
  .dash-a { grid-column: 1; grid-row: 1 / span 2; }
  .dash-b { grid-column: 2; grid-row: 1; }
  .dash-c { grid-column: 2; grid-row: 2; }
  .dash-b > h2:first-child { margin-top: 0; }
  /* monitor cards: one dense row each instead of a tall block (also used by the wide layout below) */
  .dash-c .card { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 11px 14px; margin-bottom: 10px; }
  .dash-c .card .row { flex: 1 1 220px; min-width: 0; }
  .dash-c .card .btn-row { margin: 0; flex: 0 0 auto; }
  .dash-c .card h3 { margin: 0 0 2px; font-size: 14px; }
  .dash-c .card .countdown { margin-top: 4px; }
}

@media (min-width: 1100px) {
  :root { --rail: 92px; --brief-lines: 14; }

  /* app shell: header on top, rail on the left, ONE scroll region (or none) in the middle */
  html, body { height: 100%; }
  body {
    display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; padding-bottom: 0;
  }
  .topbar { grid-column: 1 / -1; grid-row: 1; position: relative; }
  .tabbar {
    grid-column: 1; grid-row: 2; position: static; flex-direction: column; justify-content: flex-start; gap: 4px;
    padding: 12px 8px calc(12px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
    border-top: none; border-right: 1px solid var(--border); box-shadow: none; overflow-y: auto;
  }
  .tab { flex: 0 0 auto; padding: 10px 2px 8px; border-radius: 12px; gap: 4px; }
  .tab .tab-ico { font-size: 22px; }
  .tab .tab-lbl { font-size: 11px; }
  .tab.active { background: var(--brand-tint); }
  .view {
    grid-column: 2; grid-row: 2; min-height: 0; margin: 0; max-width: none; overflow-y: auto;
    padding: 18px max(28px, calc((100% - 1760px) / 2)) 24px;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  }
  #toast-wrap { bottom: 24px; }

  /* mouse-driven windows can afford denser controls; touch (iPad) keeps the big targets */
  @media (pointer: fine) {
    .btn { min-height: 38px; padding: 8px 16px; }
    .btn.chip-btn { min-height: 32px; }
  }

  /* ---- Dashboard: fixed-height panels, no page scroll ---- */
  #view[data-view="monitors"] { display: flex; flex-direction: column; overflow: hidden; }
  .dash-head { flex: 0 0 auto; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
  .dash-head h1 { margin: 0; }
  .dash-head .kv { margin: 0; font-size: 13px; }
  #view[data-view="monitors"] > .banner { flex: 0 0 auto; }
  /* two panels: LEFT = brief, tiles, needs attention, monitors; RIGHT = recent activity (full height) */
  .dash { flex: 1 1 auto; min-height: 0; align-items: stretch; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); column-gap: 22px; row-gap: 0; }
  .dash-l { display: block; grid-column: 1; grid-row: 1; }
  .dash-b { grid-column: 2; grid-row: 1; }
  .dash-l, .dash-b {
    overflow-y: auto; min-height: 0; padding: 2px 8px 16px 2px;   /* room so card shadows are not clipped */
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  }
  .dash-c { margin-top: 8px; }
  .brief-body { font-size: 15px; }
  .dash-col > h2 { position: sticky; top: 0; z-index: 2; background: var(--bg); margin: 0 0 6px; padding: 4px 0; }
  .dash-col > h2:not(:first-child) { margin-top: 12px; }
  .dash-c > h2:first-child { margin-top: 4px; }
  .brief-card { margin-bottom: 12px; }
  .tiles { margin-bottom: 4px; }
  /* monitor cards: one dense row each instead of a tall block */
  .dash-c .card { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 11px 14px; margin-bottom: 10px; }
  .dash-c .card .row { flex: 1 1 220px; min-width: 0; }
  .dash-c .card .btn-row { margin: 0; flex: 0 0 auto; }
  .dash-c .card h3 { margin: 0 0 2px; font-size: 14px; }
  .dash-c .card .countdown { margin-top: 4px; }

  /* shorter windows (a laptop is ~900px tall; a big monitor ~1300px keeps the two-panel layout above):
     spend fewer lines on the brief (it still expands on "Show more"), and when the window is also wide
     enough, split into THREE side-by-side panels (brief+tiles+attention | recent activity | monitors)
     so nothing has to stack up and scroll. Tried and rejected: two-across monitor cards, which made
     every title wrap to three lines and the panel taller, not shorter. */
  @media (max-height: 1050px) {
    :root { --brief-lines: 6; }
  }
  @media (min-width: 1360px) and (max-height: 1050px) {
    :root { --brief-lines: 9; }
    .dash { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); }
    .dash-l { display: contents; }
    .dash-a { grid-column: 1; grid-row: 1; }
    .dash-b { grid-column: 2; grid-row: 1; }
    .dash-c { grid-column: 3; grid-row: 1; margin-top: 0; }
    .dash-a, .dash-c {
      overflow-y: auto; min-height: 0; padding: 2px 8px 16px 2px;
      scrollbar-width: thin; scrollbar-color: var(--border) transparent;
    }
    .dash-c > h2:first-child { margin-top: 0; }
  }

  /* ---- card-list views: a responsive grid instead of one long column ---- */
  #view[data-view="inbox"],#view[data-view="topics"], #view[data-view="pipeline"] {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
    column-gap: 18px; align-content: start; align-items: start;
  }
  #view[data-view="inbox"] > *, #view[data-view="topics"] > *, #view[data-view="pipeline"] > * { min-width: 0; }
  #view[data-view="inbox"] > :is(h1, h2, p, .kv, .banner, .loading, details),
  #view[data-view="topics"] > :is(h1, h2, p, .kv, .banner, .loading, details),
  #view[data-view="pipeline"] > :is(h1, h2, p, .kv, .banner, .loading, details) { grid-column: 1 / -1; }
  #view[data-view="topics"] > details.redline { max-width: 760px; }

  /* ---- two-column pages ---- */
  .ask-grid { display: grid; grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); gap: 0 26px; align-items: start; }
  .ask-answer { margin-top: 0; max-height: calc(100dvh - 250px); overflow-y: auto; }
  .set-grid, .detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; align-items: start; }
  #view[data-view="add"] { padding-inline: max(28px, calc((100% - 720px) / 2)); }   /* a form, not a dashboard */
}