/* Inbox Agent — "Signal" console stylesheet.
   A dark, dense operations console where PRIORITY is the visual language: the four-tier
   palette (ULTRA/HIGH/NORMAL/LOW) is the accent system and ULTRA red is reserved. Saturation is
   therefore spent on priority alone, and there is no accent hue at all: the primary action is the
   highest-CONTRAST object on a page rather than the most colorful one (--action), links are ink
   plus an underline, and every other interactive cue (rings, active borders, selected labels) is a
   neutral separated by lightness (--brand/--brand-2). The tier palette is the only color in the
   app. One source of truth for tier colors and type. */

/* Display face — vendored (offline, like alpine/htmx). Variable weight 300–700. */
@font-face {
  font-family: "Space Grotesk";
  src: url("/static/fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}

:root {
  /* Default theme is dark (the console's identity); [data-theme="light"] below overrides the
     surface/ink/semantic tokens. color-scheme keeps native UI (scrollbars, pickers) in sync. */
  color-scheme: dark;

  /* Surfaces — cool dark slate, layered for depth. */
  --bg:        #0d1117;
  --surface:   #161b22;   /* cards, inputs */
  --surface-2: #1c2331;   /* hover, elevated, segmented track */
  --inset:     #0f141b;   /* code/pre/provenance blocks */
  --line:      #283039;
  --line-2:    #3a4452;   /* hover / stronger borders */

  --ink:   #e8eef5;       /* primary text */
  --ink-2: #c3cdd9;
  --muted: #8a96a6;       /* secondary text */
  --faint: #69737f;

  /* Interactive neutral — there is no accent hue. The tier palette owns saturation outright, so
     "interactive" is carried by contrast: --brand is the visible hairline/ring, --brand-2 the
     full-contrast ink for link text and selected state. Kept under the --brand-* names because
     ~40 component rules already read them; only the values changed, not the roles. */
  --brand:     #c3cdd9;   /* focus outlines, active borders, selected-chip hairline */
  --brand-2:   #e8eef5;   /* link + selected label: reads as ink, never as priority */
  --brand-ink: #0d1117;   /* text on the rare filled brand surface (Tagify active row) */
  --ring:      rgba(195, 205, 217, .34);
  --link-line: #4a5563;   /* resting link underline — present, but quieter than the text */

  /* Primary action — contrast, not hue. The tier palette owns saturation on this app (an ULTRA
     badge must be the loudest thing on any page), so the primary button is the highest-contrast
     object instead of the most colorful one. */
  --action:     #e8eef5;
  --action-hi:  #ffffff;   /* hover */
  --action-ink: #0d1117;   /* text on a filled action button */
  --press:      rgba(0, 0, 0, .5);   /* button drop/press shadow */

  /* Tier palette — canonical, tuned for contrast on dark. */
  --tier-ultra:  #ff5d52;
  --tier-high:   #f6a93b;
  --tier-normal: #36c2ce;
  --tier-low:    #79838f;

  /* Semantic state (pills, flashes) — accent + tinted fill + hairline. */
  --ok:   #46d394; --ok-bg:   rgba(70, 211, 148, .12); --ok-line:   rgba(70, 211, 148, .32);
  --warn: #ff7a6e; --warn-bg: rgba(255, 122, 110, .12); --warn-line: rgba(255, 122, 110, .34);
  /* info has no hue left to use, so it separates from --muted by lightness: bright ink on a faint
     neutral fill, against muted's dim ink on --surface-2. */
  --info: #e8eef5; --info-bg: rgba(195, 205, 217, .12); --info-line: rgba(195, 205, 217, .30);
  /* Filled-destructive button only (--warn above stays the text/hairline accent). Split out so the
     fill can carry AA-passing label contrast without shifting the accent everything else uses. */
  --warn-fill: #ff7a6e; --warn-hi: #ff8d82; --warn-ink: #2a0805;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .30);

  /* Component tokens that must flip with the theme (referenced below instead of literals). */
  --topbar-bg: rgba(13, 17, 23, .82);   /* translucent app-shell bar */
  --code-ink:  #d6dee8;                 /* inline code text */
  --bulk-bg:   #212a38;                 /* bulk-action bar — lifted a step past --surface-2 so it
                                           still reads as "rows are selected" without a hue */
  --bulk-line: #46525f;
  --tagify-bg:    #252e3b;              /* Tagify chips */
  --tagify-hover: #2f3947;
  --glow:      rgba(195, 205, 217, .045);  /* page top wash (was a hardcoded brand rgba) */
  --scrim:     rgba(3, 6, 12, .66);     /* modal overlay backdrop */
  --cal-invert: .8;                     /* date/time picker glyph: invert on dark, not on light */

  --font-ui: system-ui, "Segoe UI", Roboto, sans-serif;
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Consolas, monospace;
}

/* --- Light theme — same layout & tier language, inverted surfaces ------------ */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:        #f6f8fb;
  --surface:   #ffffff;
  --surface-2: #eef1f6;
  --inset:     #f1f4f8;
  --line:      #dde2ea;
  --line-2:    #c4ccd8;

  --ink:   #18212e;
  --ink-2: #36414f;
  --muted: #5b6675;
  --faint: #8893a1;

  --brand:     #36414f;
  --brand-2:   #18212e;   /* link text — full ink on white */
  --brand-ink: #ffffff;
  --ring:      rgba(54, 65, 79, .26);
  --link-line: #a9b3c0;

  /* Primary action inverts with the ground: near-ink on light, as near-white on dark. */
  --action:     #1b2532;
  --action-hi:  #2a3746;
  --action-ink: #ffffff;
  --press:      rgba(16, 24, 40, .18);

  /* Tier palette stays (the priority language is identical); badges carry dark text already. */

  /* Semantic accents deepened for legibility on light; translucent fills/lines still read. */
  --ok:   #0f9d63; --ok-bg:   rgba(15, 157, 99, .12);  --ok-line:   rgba(15, 157, 99, .30);
  --warn: #d6432f; --warn-bg: rgba(214, 67, 47, .10);  --warn-line: rgba(214, 67, 47, .28);
  --info: #18212e; --info-bg: rgba(54, 65, 79, .08); --info-line: rgba(54, 65, 79, .22);
  /* Deeper than --warn so white label text clears AA on the fill (the accent stays #d6432f). */
  --warn-fill: #cc3d29; --warn-hi: #b8331f; --warn-ink: #ffffff;

  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .08);

  --topbar-bg: rgba(255, 255, 255, .82);
  --code-ink:  #26313f;
  --bulk-bg:   #e7ebf1;
  --bulk-line: #bcc5d1;
  --tagify-bg:    #e9edf3;
  --tagify-hover: #dce2ea;
  --glow:      rgba(54, 65, 79, .035);
  --scrim:     rgba(23, 33, 46, .42);
  --cal-invert: 0;
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }

body {
  font-family: var(--font-ui);
  max-width: 1080px;
  margin: 0 auto;
  padding: 1.4rem 1.15rem 5rem;
  color: var(--ink);
  background:
    radial-gradient(1100px 460px at 50% -260px, var(--glow), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.01em; color: var(--ink); }
h1 { font-size: 1.7rem; font-weight: 600; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; font-weight: 600; margin: 1.8rem 0 .6rem; }
h3 { font-size: 1rem; font-weight: 600; margin: 0 0 .5rem; }

/* With no accent hue, a link can't be "the coloured text" — so it's ink plus a standing underline,
   which is the affordance colour was standing in for anyway. Hover firms the rule rather than
   adding it, so nothing shifts under the cursor. */
a {
  color: var(--brand-2); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px;
  text-decoration-color: var(--link-line);
  transition: text-decoration-color .12s ease;
}
a:hover { color: var(--brand-2); text-decoration-color: currentColor; }
/* Chrome links are objects, not prose: a nav item, tab, button or card already carries its own
   affordance (fill, hairline, tab rule), so it opts out of the underline. */
.topnav a, .subnav a, .seg-tab, .account .signout, .topbar .brand, .log-card, .btn, .btn-google {
  text-decoration: none;
}
.muted { color: var(--muted); }
strong, b { color: var(--ink-2); }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.4rem 0; }

code {
  background: var(--inset); color: var(--code-ink); padding: .1rem .35rem;
  border-radius: 5px; font-family: var(--font-mono); font-size: .85em;
  border: 1px solid var(--line);
}
pre {
  background: var(--inset); color: var(--ink-2); padding: .75rem .85rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  white-space: pre-wrap; font-family: var(--font-mono); font-size: .82rem;
  margin: .4rem 0; overflow-x: auto;
}

/* Focus visibility — quality floor. */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }

/* --- Eyebrow: a small mono uppercase label above a title or section ---------- */
.eyebrow {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
  margin: 0 0 .35rem;
}

/* --- Top bar (sticky app shell) -------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 1rem .9rem; flex-wrap: wrap;
  margin: -1.4rem -1.15rem 1.3rem; padding: .8rem 1.15rem;
  background: var(--topbar-bg);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.topbar .brand {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: -0.01em; color: var(--ink); margin-right: auto;
}
.topbar .brand:hover { text-decoration: none; color: var(--ink); }
/* Brand logo: the Inbox Agent mark (envelope flap + heartbeat). */
.brand-logo { height: 1.6em; width: auto; display: block; }

.topnav { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.topnav a {
  color: var(--muted); font-size: .9rem; font-weight: 500;
  padding: .35rem .6rem; border-radius: 7px;
}
.topnav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.topnav a.is-active { color: var(--ink); background: var(--surface-2); }

/* Account chip + sign-out, right-aligned. */
.account {
  display: inline-flex; align-items: center; gap: .55rem;
  padding-left: .9rem; margin-left: .2rem; border-left: 1px solid var(--line);
}
.account .who {
  font-family: var(--font-mono); font-size: .78rem; color: var(--muted);
  max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account .signout {
  display: inline-flex; align-items: center; gap: .3rem;
  color: var(--muted); font-size: .85rem; padding: .3rem .55rem; border-radius: 7px;
}
.account .signout:hover { color: var(--warn); background: var(--surface-2); text-decoration: none; }

/* Theme toggle — lives in the app shell so it's on every page. Cycles auto → light → dark and
   shows the mode you're IN (not the one you'd switch to, which stops reading as a direction once
   there are three): a monitor for auto, a sun for light, a moon for dark. Keyed on
   [data-theme-pref] — the choice — because auto has no palette of its own to match on. Auto is
   also the resting state: with no attribute at all (JS off) the monitor is what shows. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; flex: none; padding: 0; border: 0; cursor: pointer;
  border-radius: 7px; background: transparent; color: var(--muted);
}
.theme-toggle:hover { color: var(--ink); background: var(--surface-2); }
.theme-toggle .icon-sun, .theme-toggle .icon-moon { display: none; }
:root[data-theme-pref="light"] .theme-toggle .icon-monitor,
:root[data-theme-pref="dark"]  .theme-toggle .icon-monitor { display: none; }
:root[data-theme-pref="light"] .theme-toggle .icon-sun  { display: inline-block; }
:root[data-theme-pref="dark"]  .theme-toggle .icon-moon { display: inline-block; }

/* --- Segmented section nav (admin tools, dev tools) ------------------------ */
.subnav {
  display: inline-flex; align-items: center; gap: .15rem; flex-wrap: wrap;
  margin: -.3rem 0 1.4rem; padding: .25rem; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line);
}
.subnav a {
  color: var(--muted); font-size: .85rem; font-weight: 500;
  padding: .35rem .8rem; border-radius: 7px;
}
.subnav a:hover { color: var(--ink); text-decoration: none; }
.subnav a.is-active { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }

/* --- Page header: eyebrow + title + description | actions ------------------ */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.page-head > .ph-text { min-width: 0; }
.page-head h1 { margin: 0; }
.page-head p { margin: .45rem 0 0; color: var(--muted); max-width: 64ch; }
.page-head .actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* --- Page-head info popover: an on-demand "how this page works" panel ------ */
.info-pop { position: relative; display: inline-flex; vertical-align: middle; margin-left: .5rem; font-size: 1rem; text-transform: none; }
.info-pop-btn { color: var(--info); background: var(--info-bg); box-shadow: inset 0 0 0 1px var(--info-line); }
.info-pop-btn:hover { color: var(--info); filter: brightness(1.12); }
.info-pop-panel {
  /* A span, not a div/p — see the info_pop macro comment. position:absolute already blockifies
     it; display:block is kept for clarity. Resets every inheritable property an eyebrow/flash/
     heading ancestor might otherwise leak in (uppercase, tracking, weight, size, color). */
  display: block; position: absolute; top: calc(100% + .5rem); left: 0; z-index: 40;
  width: min(28rem, 82vw);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .9rem 1rem;
  color: var(--muted); font-family: var(--font-ui); font-size: .86rem;
  font-weight: 400; letter-spacing: normal; text-transform: none; line-height: 1.5;
}

/* --- Buttons -------------------------------------------------------------- */
/* Primary reads --action (see the token note): contrast carries "this is the button", so the only
   saturated fills left on a page are the tier badges. Hover/press are explicit colors + elevation
   rather than filter: brightness(), which drifted the label's contrast along with the fill. */
.btn {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--action); color: var(--action-ink);
  padding: .55rem 1rem; border-radius: 9px; text-decoration: none; border: 0;
  font-family: var(--font-ui); font-size: .92rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 2px var(--press);
  transition: background .12s ease, color .12s ease, box-shadow .12s ease, transform .06s ease;
}
.btn:hover { background: var(--action-hi); box-shadow: 0 3px 8px var(--press); text-decoration: none; }
.btn:active { transform: translateY(1px); box-shadow: inset 0 1px 2px var(--press); }
.btn--ghost {
  background: var(--surface); color: var(--ink-2); font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--line);
}
/* Secondary gets its own feedback: the hairline firms up, it doesn't just tint. */
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--sm { padding: .34rem .68rem; font-size: .84rem; }
.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .7rem 0; }
.btn.is-disabled { opacity: .4; pointer-events: none; }
/* A ghost button acting as a selected chip (e.g. the active settings template). */
.btn--ghost.is-active { color: var(--brand-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--brand); }
/* Destructive confirm (delete an instruction, disconnect). Ghost until hovered, so a row of
   actions doesn't read as a row of warnings. */
.btn--danger { color: var(--warn); }
.btn--ghost.btn--danger:hover { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line); }
/* Filled destructive keeps its own color through hover — it must not pick up the neutral action
   fill, so these outrank .btn:hover on specificity rather than on source order. */
.btn--danger:not(.btn--ghost) { background: var(--warn-fill); color: var(--warn-ink); }
.btn--danger:not(.btn--ghost):hover { background: var(--warn-hi); color: var(--warn-ink); }

/* --- Cards & stats -------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem 1.2rem; margin: .8rem 0; box-shadow: var(--shadow);
}
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; }
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1rem 1.1rem; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.stat .n { font-family: var(--font-mono); font-size: 1.9rem; font-weight: 600; line-height: 1; color: var(--ink); }
.stat .k {
  color: var(--muted); font-size: .72rem; margin-top: .45rem;
  text-transform: uppercase; letter-spacing: .08em; font-family: var(--font-mono);
}
.stat--alert .n { color: var(--tier-ultra); }
.stat--alert::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--tier-ultra); }

/* --- Tables --------------------------------------------------------------- */
table {
  border-collapse: collapse; width: 100%; margin-top: 1rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
th {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--faint); font-weight: 600; font-family: var(--font-mono); background: var(--inset);
}
tbody tr:hover { background: var(--surface-2); }

/* --- Tier badges (color + label, never color alone — a11y) ---------------- */
.badge {
  display: inline-block; color: #0c0f14; border-radius: var(--radius-sm);
  padding: .12rem .5rem; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
}
.badge--ultra  { background: var(--tier-ultra); color: #2a0805; }
.badge--high   { background: var(--tier-high); color: #2c1903; }
.badge--normal { background: var(--tier-normal); color: #042023; }
.badge--low    { background: var(--tier-low); color: #0c1116; }
/* Not a tier: the leader's own sent mail, which we deliberately leave unprioritized. Outlined
   rather than filled so it never reads as a rank among the four. */
.badge--outbound {
  background: transparent; color: var(--muted);
  border: 1px dashed var(--line-2); padding: calc(.12rem - 1px) calc(.5rem - 1px);
  font-weight: 600; letter-spacing: .02em;
}

/* Tier dots — the same palette as a small disc (legends, inline markers). */
.tier-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 999px; flex: none; }
.tier-dot--ultra  { background: var(--tier-ultra); }
.tier-dot--high   { background: var(--tier-high); }
.tier-dot--normal { background: var(--tier-normal); }
.tier-dot--low    { background: var(--tier-low); }

/* --- Signal bar: the tier mix as one stacked bar (signature element) ------- */
.signal { margin: .2rem 0 .3rem; }
.signal-track {
  display: flex; height: .7rem; border-radius: 999px; overflow: hidden;
  background: var(--inset); box-shadow: inset 0 0 0 1px var(--line);
}
.signal-seg { height: 100%; }
.signal-seg--ultra  { background: var(--tier-ultra); }
.signal-seg--high   { background: var(--tier-high); }
.signal-seg--normal { background: var(--tier-normal); }
.signal-seg--low    { background: var(--tier-low); }
.signal-legend { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin-top: .6rem; }
.signal-key {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: .76rem; color: var(--muted);
}
.signal-key b { color: var(--ink); font-weight: 600; }
/* When the bar filters a list (see the signal_bar macro's link_base), the segments and keys
   are anchors — keep them looking identical, and only hint at the affordance on hover. */
a.signal-seg { display: block; }
a.signal-seg:hover, a.signal-seg:focus-visible { filter: brightness(1.15); }
a.signal-key { text-decoration: none; }
a.signal-key:hover, a.signal-key:focus-visible { color: var(--ink); }
a.signal-key:hover b { text-decoration: underline; }

/* --- Status pills (soft, dotted — for state, NOT priority) ----------------- */
.pill {
  display: inline-flex; align-items: center; gap: .32rem;
  padding: .12rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .01em;
  background: var(--surface-2); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line);
}
.pill::before { content: ""; width: .42rem; height: .42rem; border-radius: 999px; background: currentColor; }
.pill--ok   { background: var(--ok-bg);   color: var(--ok);   box-shadow: inset 0 0 0 1px var(--ok-line); }
.pill--info { background: var(--info-bg); color: var(--info); box-shadow: inset 0 0 0 1px var(--info-line); }
.pill--warn { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line); }
.pill--muted { background: var(--surface-2); color: var(--muted); }

.dot { font-size: .7rem; vertical-align: middle; }
.dot--unread { color: var(--brand-2); }

.peek { text-decoration: none; cursor: pointer; color: var(--muted); padding: 0 .2rem; }
.peek:hover { color: var(--ink); }

/* --- Empty states: an invitation to act, not a shrug --------------------- */
.empty {
  text-align: center; padding: 2.4rem 1.2rem; color: var(--muted);
  border: 1px dashed var(--line-2); border-radius: var(--radius); background: var(--surface);
}
.empty .icon { width: 1.8rem; height: 1.8rem; color: var(--faint); margin-bottom: .5rem; }
.empty h3 { color: var(--ink-2); margin: 0 0 .3rem; }
.empty p { margin: 0 auto; max-width: 42ch; }
.empty .btn-row { justify-content: center; margin-top: 1rem; }
/* Inside a card that already has a border (the "no rows match" state under a filter). */
.empty--inline { border: 0; background: transparent; padding: 1.6rem 1rem .4rem; }

/* --- Notice / status page (message.html: connect + auth confirmations) ---- */
.notice {
  max-width: 30rem; margin: 2.5rem auto 0; text-align: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.7rem 1.6rem;
}
.notice h1 { font-size: 1.35rem; margin: 0; }
.notice p { margin: .55rem auto 0; color: var(--muted); max-width: 42ch; }
.notice pre { text-align: left; margin: 1rem 0 0; white-space: pre-wrap; word-break: break-word; }
.notice .btn-row { justify-content: center; margin: 1.4rem 0 0; }
.notice-icon {
  width: 3rem; height: 3rem; border-radius: 50%; margin: 0 auto 1rem;
  display: grid; place-items: center;
  background: var(--info-bg); color: var(--info); box-shadow: inset 0 0 0 1px var(--info-line);
}
.notice-icon .icon { width: 1.5rem; height: 1.5rem; }
.notice--ok   .notice-icon { background: var(--ok-bg);   color: var(--ok);   box-shadow: inset 0 0 0 1px var(--ok-line); }
.notice--warn .notice-icon { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line); }
.notice--info .notice-icon { background: var(--info-bg); color: var(--info); box-shadow: inset 0 0 0 1px var(--info-line); }

/* --- Sign-in hero (landing.html: the menu-less, pre-OAuth entry point) ----- */
.signin {
  max-width: 33rem; margin: clamp(2.5rem, 9vh, 5.5rem) auto 0;
  text-align: center;
}
.signin .brand-logo { height: 3rem; margin: 0 auto .95rem; }
.signin .eyebrow { margin-bottom: .55rem; }
.signin h1 { font-size: 2rem; margin: 0 0 .55rem; }
.signin .lead { color: var(--muted); font-size: 1.02rem; margin: 0 auto; max-width: 44ch; }
.signin .lead strong { color: var(--tier-ultra); }
.signin .btn-row { justify-content: center; margin: 1.9rem 0 0; }
.signin .assurance {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.5rem;
  font-size: .82rem; color: var(--muted);
}
.signin .assurance .icon { width: .95rem; height: .95rem; color: var(--ok); }
.signin .tier-legend {
  display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem 1.3rem;
  margin: 2.6rem auto 0; padding-top: 1.6rem; border-top: 1px solid var(--line);
}

/* --- Google-branded sign-in button (per Google's identity guidelines) ------
   Brand colors are intentionally hardcoded (not app tokens) for compliance;
   dark surface is the default (console identity), white flips in for light. */
.btn-google {
  display: inline-flex; align-items: center; gap: .7rem;
  height: 44px; padding: 0 1.1rem 0 .85rem; border-radius: 10px;
  background: #131314; color: #e3e3e3; border: 1px solid #8e918f;
  font-family: "Roboto", var(--font-ui); font-size: .95rem; font-weight: 500;
  letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.btn-google:hover {
  text-decoration: none; color: #e3e3e3; border-color: #b8bbba;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5); background: #1b1b1c;
}
.btn-google:focus-visible { outline-offset: 3px; }
.btn-google .g-logo { width: 18px; height: 18px; flex: none; display: block; }
:root[data-theme="light"] .btn-google {
  background: #fff; color: #1f1f1f; border-color: #747775;
}
:root[data-theme="light"] .btn-google:hover {
  color: #1f1f1f; border-color: #747775; background: #f7f8f8;
  box-shadow: 0 1px 3px rgba(60, 64, 67, .18);
}

/* --- Forms ---------------------------------------------------------------- */
.field { margin: .9rem 0; }
.field--tight { margin: .2rem 0 .6rem; }
.field > label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; color: var(--ink-2); }
.field .hint { color: var(--muted); font-size: .82rem; margin: .2rem 0 .45rem; }
input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="time"], input[type="number"], input[type="date"], input[type="search"],
textarea, select {
  width: 100%; padding: .52rem .65rem; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-family: inherit; font-size: .92rem;
  background: var(--inset); color: var(--ink); line-height: 1.3;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); background: var(--surface);
}
textarea { min-height: 7rem; resize: vertical; }
input[type="time"] { height: 2.35rem; }
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; filter: invert(var(--cal-invert)); }
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Tagify theming — match the dark native inputs (tuning tags + tz select). */
.tagify {
  --tags-border-color: var(--line);
  --tags-hover-border-color: var(--line-2);
  --tags-focus-border-color: var(--brand);
  --tag-bg: var(--tagify-bg);
  --tag-hover: var(--tagify-hover);
  --tag-text-color: var(--ink);
  --tag-remove-btn-color: var(--muted);
  --input-color: var(--ink);
  --placeholder-color: var(--faint);
  --tag-inset-shadow-size: 1.1em;
  border-radius: var(--radius-sm); background: var(--inset); color: var(--ink); font-size: .92rem;
}
.tagify--focus { background: var(--surface); box-shadow: 0 0 0 3px var(--ring); }
.tagify__input { color: var(--ink); }
.tagify--select { min-width: 15rem; min-height: 2.35rem; }
.tagify--select .tagify__input { padding-block: .4rem; }
.tagify--select .tagify__input::before { color: var(--faint); }
.tagify__dropdown {
  --tagify-dd-color-primary: var(--brand);
  --tagify-dd-bg-color: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow); overflow: hidden; color: var(--ink);
}
.tagify__dropdown .tagify__dropdown__item { font-size: .9rem; border-radius: 6px; color: var(--ink-2); }
.tagify__dropdown .tagify__dropdown__item--active { background: var(--brand); color: var(--brand-ink); }

/* Settings tabs (Alpine-toggled is-active). */
.seg-tabs { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: 1.4rem 0; }
.seg-tab {
  padding: .55rem .95rem; font-weight: 600; font-size: .92rem; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer;
}
.seg-tab:hover { color: var(--ink); text-decoration: none; }
.seg-tab.is-active { color: var(--brand-2); border-bottom-color: var(--brand); }

.check { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; color: var(--ink-2); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); width: auto; }
.matrix td, .matrix th { text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: left; }

/* A master channel switch with its connector (webhook / number / schedule) inline. */
.switch-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.switch-row:last-child { border-bottom: 0; }
.switch-row .chan { min-width: 8.5rem; font-weight: 600; color: var(--ink-2); }
.switch-row .connector { flex: 1; min-width: 14rem; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.switch-row .connector input[type="time"] { max-width: 8rem; }
.switch-row .connector select { max-width: 9rem; }

/* --- Flash / inline messages --------------------------------------------- */
.flash {
  background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok);
  padding: .65rem .85rem; border-radius: var(--radius-sm); margin: .7rem 0; font-size: .9rem;
}
.flash--err { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.inline-err { margin: .5rem 0 0; font-size: .82rem; padding: .45rem .6rem; }

/* --- Impersonation ("acting as") banner ---------------------------------- */
.impersonation-banner {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  background: var(--warn-bg); border-bottom: 1px solid var(--warn-line); color: var(--warn);
  padding: .5rem 1rem; font-size: .88rem;
}
.impersonation-banner--readonly { filter: none; opacity: .95; }
.impersonation-banner__mode {
  text-transform: uppercase; font-size: .72rem; letter-spacing: .04em;
  border: 1px solid currentColor; border-radius: var(--radius-sm); padding: 0 .35rem;
}
.impersonation-banner__ro { font-style: italic; }
.impersonation-banner__stop { margin-left: auto; }
.impersonation-banner__stop button {
  background: var(--surface); border: 1px solid currentColor; color: inherit;
  border-radius: var(--radius-sm); padding: .25rem .6rem; font-size: .82rem; cursor: pointer;
}

.feedback-form { display: inline; }
.feedback-form button {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; padding: .3rem .55rem; font-size: .85rem; white-space: nowrap; color: var(--ink-2);
}
.feedback-form button:hover { background: var(--surface-2); }

/* Re-classify control: tier + fix on one line, a roomy note box below. */
.reclassify { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .5rem; min-width: 11rem; }
.reclassify select, .reclassify button, .reclassify .note-input {
  padding: .32rem .55rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: inherit; font-size: .85rem; background: var(--inset); color: var(--ink); cursor: pointer;
}
.reclassify .note-input { flex: 1 1 100%; cursor: text; }
.reclassify button { background: var(--surface); color: var(--ink-2); font-weight: 600; }
.reclassify button:hover { background: var(--surface-2); }
.reclassify .note-input:focus, .reclassify select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); background: var(--surface);
}
.fb-status { display: inline-block; }
.fb-ok { color: var(--ok); font-size: .8rem; margin-left: .4rem; white-space: nowrap; }
.fb-err { color: var(--warn); font-size: .82rem; margin-left: .4rem; }
/* Reactive rule proposal shown inline after a reclassify. */
.rule-propose { display: inline-flex; align-items: center; gap: .4rem; margin-left: .5rem; font-size: .8rem; }
.fb-link { font-size: .8rem; white-space: nowrap; }

/* The learning panel: what a correction could become, each option with the check that was run
   against the leader's own decisions before it's offered. */
.learn { margin-top: .5rem; display: flex; flex-direction: column; gap: .45rem; }
.learn-lede { font-size: .8rem; }
.learn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.learn-item {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
  padding: .45rem .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--inset);
}
.learn-item.is-recommended { border-color: var(--brand); background: var(--surface); }
.learn-main { flex: 1 1 16rem; min-width: 0; }
.learn-what { margin: 0; font-size: .85rem; overflow-wrap: anywhere; }
.learn-what .pill { margin-left: .35rem; }
.learn-check { margin: .15rem 0 0; font-size: .78rem; overflow-wrap: anywhere; }
/* The one verdict that must read as a warning: this contradicts a correction they already made. */
.learn-check--conflicts { color: var(--warn); }
.learn-actions { flex: none; display: flex; align-items: center; gap: .35rem; }
.learn-more { font-size: .8rem; }

/* The same check, offered in the instruction editor for anything hand-written. */
.fx-check-row { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.fx-check-host { flex: 1 1 14rem; min-width: 0; }
.fx-check-line { margin: 0; font-size: .82rem; color: var(--ink-2); overflow-wrap: anywhere; }
.fx-check-line.fx-check--conflicts { color: var(--warn); }
.fx-check-eg { margin: .15rem 0 0; font-size: .78rem; overflow-wrap: anywhere; }

/* Compact line items — existing rules/guidance/suggestions listed inside their section card,
   under the "Add …" form. */
.line-items { margin-top: 1rem; border-top: 1px solid var(--line); }
.line-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem .1rem; border-bottom: 1px solid var(--line); font-size: .9rem;
}
.line-item:last-child { border-bottom: 0; }
.line-item .li-main { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-item .li-actions { flex: none; display: flex; align-items: center; gap: .4rem; }
.htmx-request.btn { opacity: .6; pointer-events: none; }

/* --- Fixture overview (settings → Rules): every rule / guidance / collapse / category in one
   table. The table scrolls inside its own box so a long condition summary never scrolls the page. */
.table-scroll { overflow-x: auto; }
.fx-title { display: block; font-weight: 600; overflow-wrap: anywhere; }
.fx-catches, .fx-note, .fx-expiry { display: block; font-size: .8rem; overflow-wrap: anywhere; }
/* The review-by line: a state, not a detail of what the instruction catches. */
.fx-expiry { margin-top: .15rem; font-variant-numeric: tabular-nums; }
.fx-happens { font-size: .88rem; color: var(--ink-2); overflow-wrap: anywhere; }
.fx-edit { white-space: nowrap; text-align: right; }
.row-actions { display: inline-flex; gap: .35rem; justify-content: flex-end; }
/* The row actions are secondary to the row's content — reveal them on hover/focus, keeping them
   permanently visible on touch (no hover) so nothing becomes unreachable. */
.ov-table tbody tr { transition: background .12s ease; }
.ov-table tbody tr:hover { background: var(--surface-2); }
.ov-table .row-actions { opacity: .55; transition: opacity .12s ease; }
.ov-table tr:hover .row-actions, .ov-table .row-actions:focus-within { opacity: 1; }
@media (hover: none) { .ov-table .row-actions { opacity: 1; } }

/* Overview card: header, find-an-item toolbar, facet chips. */
.ov-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem 1.4rem; }
.ov-head .eyebrow { margin-bottom: .2rem; }
.ov-lede { margin: 0; font-size: .85rem; max-width: 72ch; }
.ov-count {
  flex: none; font-family: var(--font-mono); font-size: .78rem; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ov-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: .9rem 0 .2rem; }
.ov-search {
  flex: 1 1 16rem; display: flex; align-items: center; gap: .45rem;
  background: var(--inset); border: 1px solid var(--line); border-radius: 9px; padding: 0 .6rem;
}
.ov-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.ov-search .icon { width: .95rem; height: .95rem; color: var(--faint); flex: none; }
.ov-search input {
  flex: 1; min-width: 0; background: none; border: 0; padding: .45rem 0;
  color: var(--ink); font-size: .88rem;
}
.ov-search input:focus { outline: none; box-shadow: none; }
.ov-search input::-webkit-search-cancel-button { filter: invert(var(--cal-invert)); }
.chip-row { display: flex; flex-wrap: wrap; gap: .35rem; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  background: var(--surface); color: var(--muted); border: 0; box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 999px; padding: .26rem .66rem; font-family: var(--font-ui); font-size: .8rem;
  transition: color .12s ease, background .12s ease, box-shadow .12s ease;
}
.chip:hover { color: var(--ink); background: var(--surface-2); }
.chip.is-on { color: var(--brand-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--brand); }
.chip-n { font-family: var(--font-mono); font-size: .72rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.chip.is-on .chip-n { color: var(--brand-2); }

/* Suggestions: the mined proposals, above the list because they're the one thing on this page
   that's new since the leader last looked. Each opens the editor — never applied for them. */
.sug { border-color: var(--info-line); background: linear-gradient(var(--info-bg), var(--info-bg)), var(--surface); }
.sug-head { display: flex; gap: .8rem; align-items: flex-start; }
.sug-head p { margin: 0; }
.sug-head .muted { font-size: .85rem; max-width: 74ch; margin-top: .15rem; }
.sug-icon {
  flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px;
  background: var(--info-bg); color: var(--info); box-shadow: inset 0 0 0 1px var(--info-line);
}
.sug-icon .icon { width: 1.05rem; height: 1.05rem; }
.sug-list { list-style: none; margin: .9rem 0 0; padding: 0; border-top: 1px solid var(--info-line); }
.sug-item {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem;
  flex-wrap: wrap; padding: .7rem 0; border-bottom: 1px solid var(--line);
}
.sug-item:last-child { border-bottom: 0; padding-bottom: 0; }
.sug-main { flex: 1 1 22rem; min-width: 0; }
/* The title reads as prose ("Meta for Business — Marketing Emails"); the exact sender it would
   match sits under it in mono, since that's the part the leader is agreeing to. */
.sug-sender {
  margin: 0; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  font-weight: 600; font-size: .92rem; overflow-wrap: anywhere;
}
.sug-addr {
  margin: .15rem 0 0; font-family: var(--font-mono); font-size: .78rem; overflow-wrap: anywhere;
}
.sug-why { margin: .2rem 0 0; font-size: .84rem; }
.sug-actions { flex: none; display: flex; gap: .4rem; align-items: center; }

/* Narrow screens: four columns of config would squeeze to one word per line, so each row
   becomes a stacked card instead. (x-show toggles inline display, which still wins.) */
@media (max-width: 680px) {
  .ov-table, .ov-table tbody, .ov-table tr, .ov-table td { display: block; width: 100%; }
  .ov-table thead { display: none; }
  .ov-table tr { padding: .75rem 0; border-bottom: 1px solid var(--line); }
  .ov-table tr:last-child { border-bottom: 0; }
  .ov-table td { border: 0; padding: .1rem 0; }
  .ov-table .fx-edit { text-align: left; padding-top: .55rem; }
  .ov-table .row-actions { justify-content: flex-start; opacity: 1; }
  .ov-toolbar .ov-search { flex-basis: 100%; }
  .sec-head .sec-actions { width: 100%; }
  .sec-head .sec-actions .btn { flex: 1; justify-content: center; }
}
/* Visually hidden but read by screen readers — for the header of the actions column. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- Icons (vendored Lucide sprite, /static/icons.svg) -------------------- */
.icon {
  width: 1.05em; height: 1.05em; flex: none; display: inline-block;
  vertical-align: -0.16em; stroke: currentColor; fill: none;
}
.spin { animation: spin .8s linear infinite; transform-origin: center; }
@keyframes spin { to { transform: rotate(360deg); } }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.95rem; height: 1.95rem; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--radius-sm); background: var(--surface); color: var(--muted);
  box-shadow: inset 0 0 0 1px var(--line);
}
.icon-btn:hover { color: var(--brand-2); background: var(--surface-2); }
.icon-btn:disabled { opacity: .5; cursor: default; }
/* Toggle-style icon button (the review card's feedback pencil) while its panel is open. */
.icon-btn.is-on { color: var(--brand-2); background: var(--surface-2); }
.btn .icon { margin-right: .05rem; }

/* --- Review: per-card re-run action -------------------------------------- */
.rerun-host { display: inline-flex; align-items: center; }
.rerun-status { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; }
.rerun-status.running { color: var(--muted); }
.rerun-status.done { color: var(--ok); }

/* --- Review: filter bar + bulk bar + pagination -------------------------- */
.filterbar, .bulkbar {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: end;
  margin: .9rem 0; padding: .8rem .9rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.filterbar label, .bulkbar label { display: flex; flex-direction: column; gap: .25rem; font-size: .74rem; color: var(--muted); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em; }
.filterbar label.grow { flex: 1 1 12rem; }
/* Two selects reading as one phrase under a single label ("Priority: at least — HIGH"). */
.filterbar .sel-pair { display: flex; gap: .4rem; }
.filterbar select, .filterbar input, .bulkbar select, .bulkbar input {
  padding: .42rem .55rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: .9rem; background: var(--inset); color: var(--ink); text-transform: none; letter-spacing: 0;
}
.filterbar select:focus, .filterbar input:focus, .bulkbar select:focus, .bulkbar input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); background: var(--surface);
}
.dev-fetch { display: flex; align-items: center; gap: .6rem; margin: .7rem 0; }
/* Restates the active tier filter in words — "HIGH and above" is worth spelling out. */
.filter-note { margin: -.4rem 0 .9rem; font-size: .82rem; }
.filter-note b { color: var(--ink); font-weight: 600; }
.bulkbar { background: var(--bulk-bg); border-color: var(--bulk-line); align-items: center; }
.bulkbar[hidden] { display: none; }
.bulk-count { font-weight: 600; font-size: .85rem; color: var(--ink); align-self: center; font-family: var(--font-mono); }
.bulkbar .note-input { flex: 1 1 12rem; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.1rem 0; flex-wrap: wrap; }
.pager .muted { font-family: var(--font-mono); font-size: .8rem; }
.pager-links { display: flex; gap: .5rem; }

/* --- Review: one thin, list-like card per row ---------------------------- */
.cards-toolbar { display: flex; align-items: center; gap: .6rem; margin: .8rem 0 .2rem; }
.cards-toolbar .selall { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--muted); cursor: pointer; }
.log-cards { display: flex; flex-direction: column; gap: .5rem; margin: .7rem 0 1rem; }
.log-card {
  display: flex; flex-direction: column; gap: .3rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: .6rem .85rem; transition: border-color .12s ease;
}
.log-card:hover { border-color: var(--line-2); }
.lc-line { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .7rem; }
.lc-tier { flex: none; }
.lc-main { flex: 1 1 12rem; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lc-subject { font-weight: 600; color: var(--ink); }
.lc-from { margin-left: .45rem; font-size: .85rem; }
.lc-aside { flex: none; font-size: .8rem; white-space: nowrap; font-family: var(--font-mono); color: var(--muted); }
.lc-actions { flex: none; display: flex; align-items: center; gap: .4rem; }
.lc-why { margin: 0; font-size: .82rem; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.log-card .fb {
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem;
  margin: 0; padding-top: .5rem; border-top: 1px solid var(--line);
}
.log-card .reclassify { margin: 0; }
.log-card .reclassify .note-input { flex: 1 1 8rem; }
.tag-direct {
  display: inline-block; padding: 0 .4rem; border-radius: 999px;
  background: var(--ok-bg); color: var(--ok); font-size: .68rem; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--ok-line);
}

/* --- Thread grouping in the review log ---------------------------------- */
.thread-group {
  border: 1px solid var(--line); border-radius: var(--radius); padding: .45rem; background: var(--inset);
  display: flex; flex-direction: column; gap: .4rem;
}
.thread-head {
  display: flex; align-items: center; gap: .5rem; padding: .15rem .3rem;
  width: 100%; background: none; border: 0; border-radius: var(--radius);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.thread-head:hover { background: var(--surface); }
.thread-head:hover .lc-subject { text-decoration: underline; }
.thread-head .lc-subject { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-caret { flex: none; width: 1em; font-size: .8rem; color: var(--muted); }
.thread-count { flex: none; font-family: var(--font-mono); font-size: .78rem; }
.thread-msgs { display: flex; flex-direction: column; gap: .4rem; }
.thread-group .log-card { background: var(--surface); }

/* --- Follow-ups: sent mail waiting on a reply ---------------------------- */
/* Overdue count on the nav's Follow-ups entry. */
.nav-count {
  display: inline-block; min-width: 1.2rem; padding: 0 .3rem; border-radius: 999px;
  background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line);
  font-size: .68rem; font-weight: 700; text-align: center;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
}
.fu-section { margin: 1.6rem 0 .4rem; color: var(--ink-2); }
/* Reuses the review card's layout; not clickable (no detail modal here). */
.fu-card { cursor: default; }
.fu-card .lc-actions form { margin: 0; display: inline-flex; align-items: center; gap: .4rem; }
/* Date pickers ride inside flex rows here — auto width, not the form default's 100%. */
.fu-card .lc-actions input[type="date"] { width: auto; padding: .3rem .45rem; font-size: .8rem; }
.log-card .fb input[type="date"] { width: auto; padding: .3rem .45rem; font-size: .85rem; }

/* --- Tier chips + per-category bars (info / admin stats) ----------------- */
.tier-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.tier-chip {
  display: inline-flex; align-items: baseline; gap: .3rem;
  padding: .14rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .03em;
}
.tier-chip b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tier-chip--ultra  { background: var(--tier-ultra); color: #2a0805; }
.tier-chip--high   { background: var(--tier-high); color: #2c1903; }
.tier-chip--normal { background: var(--tier-normal); color: #042023; }
.tier-chip--low    { background: var(--tier-low); color: #0c1116; }
.cat-bars { display: flex; flex-direction: column; gap: .35rem; margin-top: .6rem; }
.cat-bar { display: grid; grid-template-columns: 9rem 1fr 2.5rem; align-items: center; gap: .6rem; font-size: .82rem; }
.cat-name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.cat-name { text-decoration: none; }
a.cat-name:hover, a.cat-name:focus-visible { color: var(--ink); text-decoration: underline; }
.cat-track { background: var(--inset); border-radius: 999px; height: .55rem; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.cat-fill { display: block; height: 100%; background: var(--tier-normal); border-radius: 999px; }
.cat-count { text-align: right; color: var(--muted); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --- Card → detail modal ------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50; padding: 1rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--scrim); backdrop-filter: blur(2px);
}
.modal-overlay[hidden] { display: none; }
.modal {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  width: 100%; max-width: 580px; max-height: 85vh; overflow: auto; padding: 1.5rem 1.6rem;
}
.modal-close {
  position: absolute; top: .55rem; right: .7rem; background: none; border: 0;
  line-height: 1; color: var(--muted); cursor: pointer; padding: .3rem;
}
.modal-close:hover { color: var(--ink); }
body.modal-open { overflow: hidden; }
.modal:focus { outline: none; }
/* The settings editor: a form, not a detail read-out — wider, and with a sticky action bar so
   "Add instruction" is reachable without scrolling the three steps back down. */
.modal--wide { max-width: 820px; }
.modal--wide h3 { margin: 0 1.6rem .1rem 0; }
.modal-sub { margin: 0 0 .9rem; font-size: .86rem; }
.modal-foot {
  position: sticky; bottom: -1.5rem; z-index: 1;
  display: flex; align-items: center; justify-content: flex-end; gap: .6rem; flex-wrap: wrap;
  margin: 1rem -1.6rem -1.5rem; padding: .85rem 1.6rem;
  background: var(--surface); border-top: 1px solid var(--line);
}
.modal-foot .check { margin-right: auto; }
/* Template starters, inside the editor where they prefill the form below them. */
.tmpl-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  padding: .6rem .7rem; margin-bottom: .5rem;
  background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.tmpl-row .scope-lbl {
  font-size: .74rem; color: var(--muted); font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: .05em; margin-right: .2rem;
}
.detail h3 { margin: 0 1.5rem .15rem 0; }
.detail .meta { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; font-size: .86rem; margin: .8rem 0; font-family: var(--font-mono); }
.detail .meta b { color: var(--faint); font-weight: 600; margin-right: .35rem; text-transform: uppercase; font-size: .92em; letter-spacing: .04em; }
.detail .seen { background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .7rem .85rem; margin: .9rem 0; }
.detail .seen-title { margin: 0 0 .45rem; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); font-family: var(--font-mono); }
.detail .seen p { margin: .18rem 0; font-size: .88rem; word-break: break-word; }
.detail .seen .lbl { display: inline-block; min-width: 4.75rem; color: var(--muted); font-weight: 600; font-family: var(--font-mono); font-size: .82rem; }

/* --- Motion: respect reduced-motion ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .spin { animation: none; }
  .btn:active { transform: none; }
}

/* --- Settings: section header (title + lede | primary action) --------------
   Every tab opens the same way: what this is, and the one thing you'd come here to do. The
   mechanism itself is explained once, in the editor's numbered steps — never twice. */
.sec-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem 1.6rem; flex-wrap: wrap; margin: 1.5rem 0 .2rem;
}
.sec-head .sec-text { flex: 1 1 30rem; min-width: 0; }
.sec-head h2 { margin: 0 0 .3rem; }
.sec-head p { margin: 0; max-width: 68ch; font-size: .9rem; }
.sec-head .sec-actions { flex: none; display: flex; gap: .5rem; align-items: center; padding-top: .2rem; }

/* Numbered circles shared by the editor's form steps. */
.step-num {
  flex: none; width: 1.55rem; height: 1.55rem; border-radius: 999px;
  display: inline-grid; place-items: center;
  font-family: var(--font-mono); font-size: .76rem; font-weight: 600;
  color: var(--brand-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2);
}

/* --- Settings: numbered steps inside the add/edit forms --------------------
   Each form walks the same stages the strip names: a circled number + stage
   name per step, a hairline rail connecting them top to bottom. */
.steps { display: flex; flex-direction: column; margin: .7rem 0 .2rem; }
.step { position: relative; padding: 0 0 .8rem 2.25rem; }
.step::before {
  content: ""; position: absolute; left: .74rem; top: 1.75rem; bottom: -.1rem;
  width: 1px; background: var(--line);
}
.step:last-child { padding-bottom: .2rem; }
.step:last-child::before { display: none; }
.step > .step-num { position: absolute; left: 0; top: .05rem; }
.step-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; min-height: 1.65rem; }
.step-title {
  font-family: var(--font-mono); font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2);
}
.step-sub { font-size: .84rem; color: var(--muted); }
.step .cond-builder { margin: .45rem 0 .2rem; }
/* Inside a step the rail + number already give structure, so the filterbar sheds its box —
   only the condition builder keeps its chrome (it's the one composite widget). */
.step .filterbar { margin: .45rem 0 .2rem; padding: 0; background: transparent; border: 0; }
.step .hint { color: var(--muted); font-size: .82rem; margin: .35rem 0 0; }

/* Checkboxes/radios inside a filterbar read as one inline phrase — row layout, UI case
   (the column/uppercase-mono treatment is for the input-title labels around them). */
.filterbar label.check {
  flex-direction: row; align-items: center; gap: .4rem;
  font-family: var(--font-ui); font-size: .88rem;
  text-transform: none; letter-spacing: 0; color: var(--ink-2);
}

/* --- Segmented radio choice (e.g. a category's "decided by", guidance scope) ---- */
.seg-choice {
  display: inline-flex; align-items: center; gap: .2rem;
  padding: .22rem; border-radius: 999px;
  background: var(--inset); border: 1px solid var(--line);
}
.seg-choice label {
  position: relative; display: inline-flex; align-items: center;
  padding: .3rem .8rem; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font-family: var(--font-ui); font-size: .85rem; font-weight: 500; color: var(--muted);
  text-transform: none; letter-spacing: 0;
}
.seg-choice label:hover { color: var(--ink); }
.seg-choice input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.seg-choice label:has(input:checked) {
  background: var(--surface-2); color: var(--ink); font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.seg-choice label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
/* The filterbar's column-label treatment must not re-stack the segments. */
.filterbar .seg-choice label { flex-direction: row; }

/* --- Gmail label chips (auto-tag list rows) --------------------------------- */
.label-chip {
  display: inline-flex; align-items: center; gap: .3rem; vertical-align: -.14em;
  padding: .04rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 600;
  background: var(--tagify-bg); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line);
}
.label-chip .icon { width: .72rem; height: .72rem; color: var(--muted); }

/* --- Settings: condition (filter) builder -------------------------------- */
.cond-builder {
  display: flex; flex-direction: column; gap: .5rem;
  margin: .6rem 0 .9rem; padding: .8rem .9rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.cond-builder .cb-head { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; }
.cond-builder .cb-head label { display: flex; flex-direction: column; gap: .25rem; font-size: .74rem; color: var(--muted); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em; }
.cond-builder .cb-head label.check { flex-direction: row; align-items: center; gap: .4rem; text-transform: none; letter-spacing: 0; font-family: var(--font-ui); font-size: .85rem; }
.cond-builder .cb-adv { margin-left: auto; }
.cond-builder .cb-row { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.cond-builder .cb-row .grow { flex: 1 1 12rem; }
.cond-builder select, .cond-builder input[type="text"] {
  padding: .42rem .55rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: .9rem; background: var(--inset); color: var(--ink);
}
/* A clause reads left-to-right — [field] [operator] [value] [×] — so its controls must size to
   their content, not inherit the full-width treatment every other form control gets. */
.cond-builder .cb-row > select, .cond-builder .cb-row > input[type="text"] { width: auto; min-width: 0; }
.cond-builder .cb-row > select { flex: 0 1 13rem; }
.cond-builder .cb-row > input[type="text"] { flex: 1 1 11rem; }
.cond-builder .cb-row > .btn { margin-left: auto; }
.cond-builder select:focus, .cond-builder input[type="text"]:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); background: var(--surface);
}
.cond-builder .cb-group {
  display: flex; flex-direction: column; gap: .5rem;
  padding: .6rem .7rem; margin-left: 1rem;
  background: var(--inset); border: 1px dashed var(--line); border-radius: var(--radius-sm);
}
.cond-builder .cb-actions { display: flex; gap: .5rem; }
.filterbar .scope-lbl { align-self: center; font-size: .74rem; color: var(--muted); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em; }
.cond-builder .cb-join { font-size: .68rem; font-weight: 700; color: var(--faint); font-family: var(--font-mono); letter-spacing: .1em; margin: .15rem 0 .15rem .3rem; }