/* ============================================================================
   Briefwell — containerless interface system.

   Principles
   ­ Hierarchy comes from type, weight, color, and whitespace — hairline rules,
     not boxes. The only true cards are the assistant panel and toasts.
   ­ One-knob responsive: a fluid root font-size plus the --d density variable
     scale the whole UI; rem-based spacing tokens follow automatically. Two
     structural breakpoints only (rail → top bar; column pruning + sheet).
   ­ Numbers are always mono + tabular. The data is the star.
   ­ Dark is home; light is a first-class equal. Motion is fast, sparse, and
     removed entirely under prefers-reduced-motion.
   ========================================================================== */

/* ---------- reset ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

[hidden] {
  display: none !important;
}

img,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* ---------- tokens ---------- */

:root {
  /* the knob: fluid base size × density */
  --d: 1;
  font-size: clamp(15px, 12.4px + 0.22vw, 17.5px);

  --sp-1: calc(0.3rem * var(--d));
  --sp-2: calc(0.55rem * var(--d));
  --sp-3: calc(0.9rem * var(--d));
  --sp-4: calc(1.4rem * var(--d));
  --sp-5: calc(2.2rem * var(--d));
  --sp-6: calc(3.4rem * var(--d));

  --fs-2xs: 0.66rem;
  --fs-xs: 0.72rem;
  --fs-sm: 0.815rem;
  --fs-base: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.25rem;
  --fs-title: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem);
  --fs-hero: clamp(1.55rem, 1.2rem + 1.4vw, 2.2rem);

  --font-ui: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;
  /* display voice — same Inter family as the marketing site (no serif anymore);
     kept as a separate token so heading sites stay independently tunable. */
  --font-serif: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --rail-w: 5.7rem; /* narrow icon-over-label rail (editorial) */
  --saved-w: 15rem; /* saved-views sidebar (Signals only) */
  --ease: cubic-bezier(0.25, 0.6, 0.3, 1);
  --speed: 140ms;
}

/* Palette: matched to the marketing site. Light is a clean white page with
   #1a1a2e navy ink, #f7f8fa raised rails, hairline borders, and the Briefwell
   blue (#2f5cf6) as the single interactive accent. Dark is a neutral dark
   navy with the same blue lifted for legibility. Semantics (ok/warn/bad) stay
   red/green/amber but are tuned to the marketing palette style.
   All text/background pairings hold WCAG AA at their rendered sizes. */

/* LIGHT is the primary theme: white page, navy ink, hairline rules, the
   marketing blue for every interactive surface, and a deep blue for the
   primary (Assign) button + assignee avatar. */
:root,
:root[data-theme='light'] {
  color-scheme: light;

  --bg: #ffffff; /* white page */
  --bg-raise: #ffffff; /* raised surfaces — assistant panel, toasts, modals (border + shadow carry the lift) */
  --bg-rail: #f7f8fa; /* rail / saved-views / sticky headers — the marketing card gray */
  --ink: #1a1a2e; /* marketing navy ink */
  --ink-2: rgba(26, 26, 46, 0.62);
  --ink-3: rgba(26, 26, 46, 0.45);
  --line: rgba(0, 0, 0, 0.07);
  --line-strong: rgba(0, 0, 0, 0.12);
  --hover: rgba(47, 92, 246, 0.04);

  /* Brand accent: Briefwell blue — the marketing site's single interactive color.
     The fill is the same blue for primary actions; hover darkens to #2549d8. */
  --accent: #2f5cf6; /* links, "In review", interactive tint/text */
  --accent-soft: rgba(47, 92, 246, 0.09);
  --accent-fill: #2f5cf6; /* filled primary (Assign/Post/Send) */
  --on-accent: #ffffff; /* text on the hot badge fill */
  --on-fill: #ffffff; /* text on a solid filled button */
  --ring: 0 0 0 3px rgba(47, 92, 246, 0.22); /* soft focus ring on inputs/controls */

  --accent-cool: #2549d8; /* darker blue secondary (hover/pressed variant) */
  --accent-cool-soft: rgba(37, 73, 216, 0.1);

  --navy: #2549d8; /* deep blue — assignee avatar + Assign button */
  --hot: #e0563f; /* high-intensity — detail overline tint, open-signals badge */

  /* severity tiers — critical red → amber → gold → muted, in the marketing
     pill style (strong ink, soft tint). Intensity, not pure danger. */
  --tier-critical: #d3492f;
  --tier-critical-soft: rgba(224, 86, 63, 0.1);
  --tier-high: #c26803;
  --tier-high-soft: rgba(217, 119, 6, 0.11);
  --tier-medium: #94770f;
  --tier-medium-soft: rgba(148, 119, 15, 0.11);
  --tier-low: #6b7280;
  --tier-low-soft: rgba(107, 114, 128, 0.1);

  --ok: #15803d; /* Actioned */
  --ok-soft: rgba(34, 197, 94, 0.11);
  --warn: #b45309;
  --warn-soft: rgba(217, 119, 6, 0.11);
  --bad: #d3492f; /* "New" status + errors */
  --bad-soft: rgba(224, 86, 63, 0.09);

  --shadow: 0 24px 56px -24px rgba(15, 25, 70, 0.2), 0 4px 14px -8px rgba(15, 25, 70, 0.1);
  --shadow-sm: 0 1px 2px rgba(15, 25, 70, 0.05);
  /* a soft blue glow rising from the top — the briefwell light, now in brand blue */
  --glow: radial-gradient(66rem 30rem at 50% -9rem, rgba(47, 92, 246, 0.06), transparent 66%);
  --briefwell-grad: linear-gradient(96deg, #2f5cf6 0%, #5b7dff 52%, #8fa8ff 100%);

  /* liquid glass — frosted white: a translucent surface that lets the page
     ghost through, a luminous top-edge sheen, a fine light border, and soft
     depth so the assistant floats. The semi-opaque background is also the
     no-backdrop-filter fallback (still legible). */
  --glass-bg: color-mix(in srgb, #ffffff 82%, transparent);
  --glass-blur: blur(20px) saturate(175%);
  --glass-border: rgba(0, 0, 0, 0.1);
  --glass-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.72), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  --glass-shadow: 0 22px 55px -22px rgba(15, 25, 70, 0.28), 0 4px 16px -8px rgba(15, 25, 70, 0.14);
  --glass-well: color-mix(in srgb, var(--ink) 4%, transparent);
}

/* DARK is the first-class counterpart: a neutral dark navy with the same
   Briefwell blue lifted for legibility, muted semantics, layered depth. */
:root[data-theme='dark'] {
  color-scheme: dark;

  /* neutral dark navy, layered: bg (floor) → bg-rail (rail/headers) →
     bg-raise (cards/panels/menus) each a legible step up so depth reads without
     boxes; hairlines are lifted enough to catch the eye on the dark floor. */
  --bg: #0e1018;
  --bg-raise: #171a24;
  --bg-rail: #12141d;
  --ink: #eceef4;
  --ink-2: rgba(236, 238, 244, 0.62);
  --ink-3: rgba(236, 238, 244, 0.42);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);
  --hover: rgba(91, 125, 255, 0.08);

  /* Brand accent: the same Briefwell blue, lifted for legibility on dark. */
  --accent: #5b7dff; /* links, "In review", tint/text */
  --accent-soft: rgba(91, 125, 255, 0.14);
  --accent-fill: #3b63f0; /* filled primary buttons */
  --on-accent: #ffffff; /* text on the hot badge fill */
  --on-fill: #ffffff; /* text on the solid blue fill */
  --ring: 0 0 0 3px rgba(91, 125, 255, 0.28);

  --accent-cool: #8fa8ff; /* lighter blue secondary */
  --accent-cool-soft: rgba(143, 168, 255, 0.16);

  --navy: #3b56c4; /* deep blue — assignee avatar + Assign button */
  --hot: #ff7a5c; /* high-intensity — detail overline tint, open-signals badge */

  /* severity tiers — the same intensity scale lifted for the dark floor */
  --tier-critical: #ff8266;
  --tier-critical-soft: rgba(255, 130, 102, 0.15);
  --tier-high: #f0a34e;
  --tier-high-soft: rgba(240, 163, 78, 0.14);
  --tier-medium: #d9bc55;
  --tier-medium-soft: rgba(217, 188, 85, 0.13);
  --tier-low: #8b93a7;
  --tier-low-soft: rgba(139, 147, 167, 0.14);

  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, 0.14);
  --warn: #f0a34e;
  --warn-soft: rgba(240, 163, 78, 0.13);
  --bad: #f87171;
  --bad-soft: rgba(248, 113, 113, 0.14);

  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.78), 0 4px 16px -8px rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --glow: radial-gradient(66rem 30rem at 50% -9rem, rgba(91, 125, 255, 0.09), transparent 66%);
  --briefwell-grad: linear-gradient(96deg, #3b63f0 0%, #5b7dff 52%, #8fa8ff 100%);

  /* liquid glass — smoked dark: a translucent navy pane lifted just enough to
     read as glass over the dark floor, a faint white top-edge sheen, a fine
     luminous border, and a deep drop shadow. */
  --glass-bg: color-mix(in srgb, #1a1f2e 68%, transparent);
  --glass-blur: blur(22px) saturate(150%);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  --glass-shadow: 0 26px 62px -22px rgba(0, 0, 0, 0.85), 0 6px 20px -10px rgba(0, 0, 0, 0.65);
  --glass-well: color-mix(in srgb, #ffffff 6%, transparent);
}

/* ---------- document ---------- */

html {
  height: 100%;
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* thin, neutral scrollbars that match the hairline system */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--ink-3);
  background-clip: padding-box;
}

/* ---------- utilities ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.94em;
}

.num,
.time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.muted,
.muted-text {
  color: var(--ink-2);
}

.bad-text {
  color: var(--bad);
}

.time {
  color: var(--ink-2);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

/* overline — the section-heading voice used everywhere */
.panel-head h2,
.stat-label,
.data-table th,
.comments-title,
.vertical-badge {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* profile card titles — sentence-case, a step up from the overline voice */
.pf-head h2 {
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.48em 1.05em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg-raise);
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition:
    border-color var(--speed) var(--ease),
    background var(--speed) var(--ease),
    color var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease),
    transform var(--speed) var(--ease),
    filter var(--speed) var(--ease);
}

.btn:hover {
  border-color: var(--ink-3);
  background: color-mix(in srgb, var(--accent) 4%, var(--bg-raise));
}

.btn:active {
  transform: translateY(0.5px);
}

.btn:disabled {
  opacity: 0.55;
  cursor: default;
  box-shadow: none;
  transform: none;
  filter: none;
}

/* solid filled primary — crisp accent fill, contrasting text, tactile press */
.btn-primary {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--on-fill);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  filter: brightness(0.92); /* #2f5cf6 → ~#2549d8, the marketing hover */
  background: var(--accent-fill);
  border-color: var(--accent-fill);
}

.btn-primary:active {
  filter: brightness(0.85);
  transform: translateY(0.5px);
}

/* inline/utility size — squarer 9px radius (the pill stays for standalone CTAs) */
.btn-sm {
  padding: 0.3em 0.8em;
  border-radius: 9px;
  font-size: var(--fs-xs);
}

.btn-block {
  width: 100%;
}

/* ghost / secondary — same pill geometry as .btn so the set reads as one system */
.ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  padding: 0.48em 1.05em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  transition:
    border-color var(--speed) var(--ease),
    background var(--speed) var(--ease),
    transform var(--speed) var(--ease);
}

.ghost:hover {
  border-color: var(--ink-3);
  background: var(--hover);
}

.ghost:active {
  transform: translateY(0.5px);
}

.link-btn {
  color: var(--accent);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  border-radius: 3px;
}

.link-btn:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 7px;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1;
}

.icon-btn:hover {
  color: var(--ink);
  background: var(--hover);
}

.icon-btn:active {
  transform: translateY(0.5px);
}

/* ---------- form primitives ---------- */

.select {
  appearance: none;
  padding: 0.38em 1.9em 0.38em 0.75em;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23858c9b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7em center;
  color: var(--ink);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition:
    border-color var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease);
}

.select:hover {
  border-color: var(--ink-3);
}

.select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.select option {
  background: var(--bg-raise);
  color: var(--ink);
}

/* ============================================================================
   full-page screens (boot / auth / no-access)
   ========================================================================== */

.screen {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--sp-5) var(--sp-4);
}

.screen-glow {
  background-image: var(--glow);
}

.boot-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.spinner {
  width: 1.6rem;
  height: 1.6rem;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.error-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  max-width: 26rem;
  text-align: center;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

/* auth: a centered card on the blue-glow white screen — the marketing card
   treatment (white, hairline border, soft shadow) */

.auth-card {
  width: min(25rem, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: clamp(1.6rem, 3vw, 2.3rem) clamp(1.4rem, 3vw, 2rem);
  background: var(--bg-raise);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(15, 25, 70, 0.04),
    0 18px 44px -22px rgba(15, 25, 70, 0.16);
}

:root[data-theme='dark'] .auth-card {
  box-shadow: var(--shadow);
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--sp-3);
}

.auth-card h1 {
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.hint {
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.hint strong {
  color: var(--ink);
  font-weight: 500;
}

#auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

#auth-form input {
  width: 100%;
  padding: 0.65em 0.85em;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-size: var(--fs-md);
  transition:
    border-color var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease);
}

#auth-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

#auth-form input::placeholder {
  color: var(--ink-3);
}

#auth-form .btn-primary {
  margin-top: var(--sp-2);
}

.auth-sent-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}

.auth-msg {
  min-height: 1.3em;
}

.auth-msg.error {
  color: var(--bad);
}

/* ============================================================================
   app shell — rail + main
   ========================================================================== */

#app-view {
  display: grid;
  grid-template-columns: var(--rail-w) auto minmax(0, 1fr);
  min-height: 100dvh;
}

#sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) 0.55rem;
  background: var(--bg-rail);
  border-right: 1px solid var(--line);
}

.sidebar-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
}

/* saved-views sidebar — Signals sub-nav; a grid column shown only on the Signals
   tab (its [hidden] collapses the auto track to zero width). */
#saved-views {
  grid-column: 2;
  position: sticky;
  top: 0;
  height: 100dvh;
  width: var(--saved-w);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: clamp(1.3rem, 2vw, 2.4rem) var(--sp-3) var(--sp-4);
  background: var(--bg-rail);
  border-right: 1px solid var(--line);
  overflow-y: auto;
}

.sv-title {
  font-family: var(--font-serif);
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}

.sv-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sv-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border-radius: 9px;
  color: var(--ink-2);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: left;
  transition:
    color var(--speed) var(--ease),
    background var(--speed) var(--ease);
}

.sv-item:hover {
  color: var(--ink);
  background: var(--hover);
}

.sv-item.sv-on {
  color: var(--ink);
  background: var(--accent-soft);
}

.sv-item-icon {
  display: inline-flex;
  flex: none;
  color: var(--ink-3);
}

.sv-item.sv-on .sv-item-icon {
  color: var(--accent);
}

.sv-item-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sv-item-count {
  flex: none;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.sv-item.sv-on .sv-item-count {
  color: var(--ink-2);
}

.sv-sep {
  height: 1px;
  margin: var(--sp-2) 0.6rem;
  background: var(--line);
}

.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
}

/* Real Briefwell logo (self-hosted PNG via background-image, theme-swapped, no JS).
   The rail is narrow, so it shows the square mark; the auth screen shows the full
   lockup. CSP img-src 'self' covers these. */
/* Canonical logo/mark files (served from the site root) — swap them to rebrand
   everywhere. The full lockup is theme-swapped: navy-on-transparent for light,
   the luminous dark variant for dark. */
/* ?v= busts stale browser copies whenever a logo file is re-exported — bump it
   together with any logo change. Both the mark (rail/favicon) and the lockup
   (auth screens) swap to their dark variants under data-theme='dark'. */
.brand-logo {
  display: block;
  width: 38px;
  height: 38px;
  background: center / contain no-repeat url(/BriefwellMark.png?v=6);
}

:root[data-theme='dark'] .brand-logo {
  background-image: url(/BriefwellMarkDark.png?v=6);
}

.auth-brand .brand-logo-lg {
  width: 141px;
  height: 32px;
  background-image: url(/BriefwellLogo.png?v=6);
}

:root[data-theme='dark'] .auth-brand .brand-logo-lg {
  background-image: url(/BriefwellLogoDark.png?v=6);
}

/* collapse/expand the rail; chevron points left while expanded, right while collapsed */
.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  flex: none;
  border-radius: 8px;
  color: var(--ink-3);
  transition:
    color var(--speed) var(--ease),
    background var(--speed) var(--ease);
}

.sidebar-toggle:hover {
  color: var(--ink);
  background: var(--hover);
}

.sidebar-toggle svg {
  transition: transform var(--speed) var(--ease);
}

:root[data-rail='collapsed'] .sidebar-toggle svg {
  transform: rotate(180deg);
}

.nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  width: 100%;
}

/* icon-over-label, centered — the editorial rail */
.nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  padding: 0.6rem 0.2rem;
  border-radius: 10px;
  color: var(--ink-2);
  font-size: var(--fs-2xs);
  font-weight: 500;
  text-align: center;
  transition:
    color var(--speed) var(--ease),
    background var(--speed) var(--ease);
}

.nav-item:hover {
  color: var(--ink);
  background: var(--hover);
}

.nav-item.active {
  color: var(--ink);
  background: var(--bg-raise);
  box-shadow: var(--shadow-sm);
}

.nav-icon {
  display: inline-flex;
  flex: none;
}

.nav-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.nav-item.active .nav-icon {
  color: var(--accent);
}

/* the Signals open-count rides the icon's top-right corner */
.nav-badge {
  position: absolute;
  top: 0.35rem;
  right: 0.9rem;
  min-width: 1rem;
  padding: 0 0.2rem;
  border-radius: 999px;
  background: var(--hot);
  color: var(--on-accent);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.sidebar-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
}

.foot-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}

/* the narrow editorial rail has no room for these — the workspace switcher and
   sign-out live in Profile (the email opens it); the vertical badge is decorative */
#sidebar .vertical-badge,
#sidebar #customer-select,
#sidebar .user-row {
  display: none;
}

.vertical-badge {
  letter-spacing: 0.1em;
  line-height: 1.4;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 8px;
  color: var(--ink-2);
  transition:
    color var(--speed) var(--ease),
    background var(--speed) var(--ease);
}

.theme-toggle:hover {
  color: var(--ink);
  background: var(--hover);
}

.tt-icon {
  display: inline-flex;
}

.tt-icon svg {
  width: 0.95rem;
  height: 0.95rem;
}

/* dark shows the sun (tap → light); light shows the moon */
:root:not([data-theme='light']) .tt-moon {
  display: none;
}

:root[data-theme='light'] .tt-sun {
  display: none;
}

.user-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  min-width: 0;
}

.user-email {
  flex: 1;
  min-width: 0;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  border-radius: 3px;
  transition: color var(--speed) var(--ease);
}

/* the email doubles as the Profile shortcut */
button.user-email:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* "Sign out" never wraps — the email truncates instead */
.user-row .link-btn {
  flex: none;
  white-space: nowrap;
}

/* ---------- collapsed rail (desktop only; below 900px the rail is a top bar) ---------- */

@media (min-width: 901px) {
  /* Lock the frame in place: the shell (rail, saved-views, header) stays pinned to
     the viewport and only the main column scrolls — vertically, naturally. Nothing
     scrolls horizontally. (Mobile keeps a sticky top bar + natural page scroll.) */
  html,
  body {
    height: 100dvh;
    overflow: hidden;
  }

  #app-view {
    transition: grid-template-columns var(--speed) var(--ease);
    height: 100dvh;
    overflow: hidden;
  }

  #main {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* collapsed drops the rail to an icon-only strip (labels hidden) */
  :root[data-rail='collapsed'] #app-view {
    grid-template-columns: 3.4rem auto minmax(0, 1fr);
  }

  :root[data-rail='collapsed'] #sidebar {
    padding-inline: 0.35rem;
  }

  /* nav labels vanish; icons keep their rem sizes */
  :root[data-rail='collapsed'] .nav-item {
    font-size: 0;
  }

  :root[data-rail='collapsed'] .nav-item {
    padding: 0.55rem 0;
    gap: 0;
  }
}

/* ---------- main column ---------- */

#main {
  grid-column: 3; /* always the wide column, even when the saved-views column is hidden */
  min-width: 0;
  width: 100%;
  max-width: 108rem; /* keeps ultrawide honest; content centers in the remainder */
  margin-inline: auto;
  padding: clamp(1.3rem, 2vw, 2.4rem) clamp(1.1rem, 3.2vw, 3.4rem) 7.5rem;
}

.page-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: clamp(1.1rem, 2vw, 1.9rem);
}

#page-title {
  font-family: var(--font-serif);
  font-size: var(--fs-hero);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.status-line {
  margin-left: auto;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-2xs);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.error-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-left: 2px solid var(--bad);
  background: var(--bad-soft);
  border-radius: 0 8px 8px 0;
  font-size: var(--fs-sm);
}

.error-banner span:first-child {
  flex: 1;
  min-width: 0;
}

.view-panel {
  animation: fade-in 180ms var(--ease);
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ============================================================================
   toolbars — filters, search, counts
   ========================================================================== */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-3);
}

.toolbar:empty {
  display: none;
}

.search-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 12rem;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--speed) var(--ease);
}

.search-wrap:focus-within {
  border-bottom-color: var(--accent);
}

.search-icon {
  display: inline-flex;
  color: var(--ink-3);
}

.search-input {
  flex: 1;
  min-width: 0;
  padding: 0.4em 0;
  background: transparent;
  border: none;
  font-size: var(--fs-sm);
}

.search-input:focus {
  outline: none;
}

.search-input::placeholder {
  color: var(--ink-3);
}

.toolbar-note {
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.count-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
}

.count-total {
  font-weight: 600;
  font-size: var(--fs-sm);
}

.count-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--ink-2);
  font-size: var(--fs-xs);
}

/* ============================================================================
   status primitives
   ========================================================================== */

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}

.dot-ok {
  background: var(--ok);
}

.dot-warn {
  background: var(--warn);
}

.dot-bad {
  background: var(--bad);
}

.dot-accent {
  background: var(--accent);
}

.dot-muted {
  background: var(--ink-3);
}

.status-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  white-space: nowrap;
}

.status-label {
  font-size: var(--fs-xs);
  color: var(--ink-2);
  text-transform: capitalize;
}

.badge {
  font-size: var(--fs-2xs);
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge-ok {
  color: var(--ok);
}

.badge-accent {
  color: var(--accent);
}

.badge-bad {
  color: var(--bad);
}

.badge-muted {
  color: var(--ink-3);
}

/* Clean colored label — the tier reads by its ink color + word, no pill, no dot. */
.tier {
  display: inline-flex;
  align-items: center;
  color: var(--tier-ink, var(--tier-low));
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.2;
}

.tier-label {
  font-variant-numeric: normal;
}

.tier-critical {
  --tier-ink: var(--tier-critical);
}
.tier-high {
  --tier-ink: var(--tier-high);
}
.tier-medium {
  --tier-ink: var(--tier-medium);
}
.tier-low {
  --tier-ink: var(--tier-low);
}

/* larger detail-page variant */
.tier-lg {
  font-size: var(--fs-sm);
}

/* ============================================================================
   tables — hairline rows, overline headers (the profile API-keys table)
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  margin-inline: calc(-1 * var(--sp-2));
  padding-inline: var(--sp-2);
}

.data-table {
  width: 100%;
  min-width: 40rem;
  /* separate (not collapse) so the header hairline travels with sticky <th>s */
  border-collapse: separate;
  border-spacing: 0;
}

.data-table th {
  padding: 0 0.65rem 0.55rem;
  border-bottom: 1px solid var(--line-strong);
  text-align: left;
  white-space: nowrap;
}

/* Sticky headers where the table fits without a horizontal scroll container
   (an overflow-x wrapper would defeat viewport-sticky). Below this width the
   wrapper scrolls horizontally instead — pruned columns keep tables short. */
@media (min-width: 960px) {
  .table-wrap {
    overflow-x: visible;
  }

  .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg-rail);
    padding-top: 0.45rem; /* breathing room when stuck to the viewport edge */
  }
}

.data-table td {
  padding: 0.62rem 0.65rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  vertical-align: middle;
}

/* column shaping */

.td-name {
  max-width: 15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td-key {
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-2);
  font-size: var(--fs-xs);
}

.td-time,
.td-status {
  white-space: nowrap;
}

/* empty-state note inside a detail section (also used by the signal drawer) */
.detail-none {
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-style: italic;
}

.inline-error {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  color: var(--bad);
  font-size: var(--fs-xs);
}

/* ---------- feedback ---------- */

.fb-area {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.fb-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.28rem 0.4rem;
  border-radius: 7px;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: 500;
  transition:
    color var(--speed) var(--ease),
    background var(--speed) var(--ease);
}

.fb-btn:hover {
  color: var(--ink);
  background: var(--hover);
}

/* the recorded verdict reads as quiet colored text — never a filled pill */
.fb-btn.selected.fb-up {
  color: var(--ok);
  font-weight: 600;
}

.fb-btn.selected.fb-down {
  color: var(--bad);
  font-weight: 600;
}

.fb-detail {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.fb-note-text {
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-style: italic;
}

.fb-editor {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  width: min(26rem, 100%);
}

.fb-textarea {
  width: 100%;
  padding: 0.55em 0.7em;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  font-size: var(--fs-sm);
  resize: vertical;
}

.fb-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.fb-editor-actions {
  display: flex;
  gap: var(--sp-2);
}

/* ---------- triage ---------- */

.triage-select {
  appearance: none;
  padding: 0.22em 1.5em 0.26em 0.7em;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23858c9b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55em center;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: capitalize;
  cursor: pointer;
  transition: border-color var(--speed) var(--ease);
}

.triage-select:hover {
  border-color: var(--line-strong);
}

.triage-select option {
  background: var(--bg-raise);
  color: var(--ink);
  font-weight: 400;
  letter-spacing: normal;
}

.triage-select.st-new {
  color: var(--bad);
  border-color: var(--bad-soft);
}

.triage-select.st-review {
  color: var(--accent);
  border-color: var(--accent-soft);
}

.triage-select.st-actioned {
  color: var(--ok);
  border-color: var(--ok-soft);
}

.triage-select.st-dismissed {
  color: var(--ink-3);
}

/* ---------- comments — the team thread on a signal ---------- */

.comments {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
}

.comments-head {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.comments-count {
  color: var(--ink-3);
  font-size: var(--fs-2xs);
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-1) 0 var(--sp-2);
  max-width: 38rem;
}

/* one comment = a quiet "Name · 2d ago" meta line over softer prose, set off
   by a 2px hairline gutter; whitespace does the separating — no avatars, no
   bubbles */
.comment {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
  padding-left: var(--sp-2);
  border-left: 2px solid var(--line);
}

.comment-head {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.comment-author {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: -0.005em;
}

.comment-head .time {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--ink-3);
}

.comment-sep {
  color: var(--ink-3);
  font-size: var(--fs-2xs);
}

.comment-body {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.comment-pending {
  opacity: 0.55;
  border-left-color: var(--accent-soft);
}

.comments-note {
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-style: italic;
}

.comments-error {
  color: var(--bad);
  font-style: normal;
}

/* composer — a proper boxed field (matches the profile inputs) with the Post
   action tucked inside its right edge */
.comment-composer {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  max-width: 38rem;
  margin-top: var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg);
  transition:
    border-color var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease);
}

.comment-composer:focus-within {
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.comment-input {
  flex: 1;
  min-width: 0;
  padding: 0.55em 0.2em 0.55em 0.8em;
  background: transparent;
  border: none;
  font-size: var(--fs-sm);
  line-height: 1.45;
  resize: none;
}

.comment-input:focus {
  outline: none;
}

.comment-input::placeholder {
  color: var(--ink-3);
}

.comment-post {
  flex: none;
  padding: 0.55em 0.9em;
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* @mention picker — a small combobox listbox anchored above the composer, so it
   never gets clipped at the bottom of the drill-in drawer */
.mention-menu {
  position: absolute;
  z-index: 40;
  left: 0;
  bottom: calc(100% + 4px);
  width: min(20rem, 100%);
  max-height: 13rem;
  overflow: auto;
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-raise);
  box-shadow: var(--shadow);
}

.mention-opt {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  padding: 0.35em 0.55em;
  border-radius: 7px;
  cursor: pointer;
}

.mention-opt-active {
  background: var(--hover);
}

.mention-opt-name {
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--ink);
}

.mention-opt-email {
  overflow: hidden;
  font-size: var(--fs-2xs);
  color: var(--ink-3);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* an @mention token inside a rendered comment body — an accent-tinted pill, not
   a link */
.mention-pill {
  padding: 0 0.18em;
  border-radius: 4px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 550;
}

/* ============================================================================
   signals feed — a calm, keyboard-navigable stream grouped by day, led by the
   AI preview headline; premium Linear/Notion surface, hairline dividers
   ========================================================================== */

/* the little AI-summary sparkle that marks a machine-written headline */
.ai-spark {
  display: inline-flex;
  flex: none;
  color: var(--accent);
}

.sig-group {
  display: flex;
  flex-direction: column;
}

.sig-group-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.35rem 0.25rem 0.5rem;
  background: linear-gradient(var(--bg) 72%, transparent);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.sig-group-count {
  color: var(--ink-3);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0;
}

.sig-more-wrap {
  display: flex;
  justify-content: center;
  padding: var(--sp-2) 0 var(--sp-1);
}

.sig-more {
  color: var(--ink-2);
}

/* ============================================================================
   signal detail markdown briefing (shared .chg / .prov styling below)
   ========================================================================== */

/* the briefing markdown reads like a short report */
.md {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  color: var(--ink);
  font-size: var(--fs-sm);
  line-height: 1.62;
}

.md p {
  overflow-wrap: anywhere;
}

.md .md-h {
  margin-top: 0.35rem;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
}

.md .md-h1 {
  font-size: var(--fs-md);
}

.md .md-h2,
.md .md-h3 {
  font-size: var(--fs-base);
  color: var(--ink-2);
}

.md ul,
.md ol {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-left: 1.3rem;
}

.md li {
  list-style: disc;
  overflow-wrap: anywhere;
}

.md ol li {
  list-style: decimal;
}

.md code {
  padding: 0.08em 0.4em;
  border-radius: 5px;
  background: var(--hover);
  font-family: var(--font-mono);
  font-size: 0.88em;
}

.md strong {
  font-weight: 600;
}

/* fenced ``` code block — body is textContent, wraps, scrolls if wide */
.md-pre {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.1rem 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--hover);
  overflow-x: auto;
}

.md-pre-lang {
  align-self: flex-start;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.md-pre code {
  padding: 0;
  background: none;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.86em;
  line-height: 1.5;
  white-space: pre;
}

/* the change in human terms (before → after over readable field labels) */
.chg {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.chg-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.8rem;
}

.chg-field {
  min-width: 8rem;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.chg-vals {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.chg-val {
  padding: 0.05em 0.4em;
  border-radius: 5px;
  overflow-wrap: anywhere;
}

.chg-del {
  background: var(--bad-soft);
  color: var(--bad);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--bad) 55%, transparent);
}

.chg-ins {
  background: var(--ok-soft);
  color: var(--ok);
}

.chg-arrow {
  color: var(--ink-3);
}

.chg-more {
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-style: italic;
}

/* quiet provenance / trust line */
.prov {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.prov-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.prov-item {
  color: var(--ink-2);
}

.prov-sep {
  color: var(--ink-3);
}

.prov-rule {
  color: var(--ink-3);
}

/* ============================================================================
   custom fields — Notion-like properties (drawer .cf-* + admin .cfa-*)
   ========================================================================== */

/* ---------- shared value chips ---------- */

/* field-type label on an admin row (select/text/number…) — quiet meta text */
.cf-type {
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

/* "AI" provenance chip on a field value (drawer) and the created_by chip (admin) */
.cf-ai {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  color: var(--accent);
  font-size: var(--fs-2xs);
  font-weight: 650;
  letter-spacing: 0.06em;
}

.cf-by {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: var(--ink-3);
  font-size: var(--fs-2xs);
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cf-by-ai {
  color: var(--accent);
}

/* ---------- drawer Fields section ---------- */

.cf {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.cf-note {
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-style: italic;
}

.cf-error {
  color: var(--bad);
  font-style: normal;
}

.cf-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-width: 40rem;
}

.cf-row {
  display: grid;
  grid-template-columns: minmax(6rem, 11rem) 1fr;
  gap: 0.3rem 1rem;
  align-items: start;
}

.cf-label-wrap {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
  min-width: 0;
}

.cf-label {
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.cf-value-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.6rem;
  min-width: 0;
}

.cf-value-main {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  max-width: 100%;
  min-width: 0;
}

.cf-val {
  font-size: var(--fs-sm);
  color: var(--ink);
  overflow-wrap: anywhere;
}

.cf-val-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.cf-val-bool {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

.cf-bool-yes {
  color: var(--ok);
}

.cf-bool-yes svg {
  color: var(--ok);
}

.cf-bool-no {
  color: var(--ink-2);
}

/* click-to-edit convenience on non-url values (the edit button is the a11y path) */
.cf-clickable {
  cursor: pointer;
  border-radius: 5px;
  padding: 0 0.15em;
  transition: background var(--speed) var(--ease);
}

.cf-clickable:hover {
  background: var(--hover);
}

.cf-edit {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 0.15rem;
  border-radius: 6px;
  color: var(--ink-3);
  opacity: 0;
  transition:
    opacity var(--speed) var(--ease),
    color var(--speed) var(--ease),
    background var(--speed) var(--ease);
}

.cf-row:hover .cf-edit,
.cf-value-main:focus-within .cf-edit,
.cf-edit:focus-visible {
  opacity: 1;
}

.cf-edit:hover {
  color: var(--ink);
  background: var(--hover);
}

.cf-revert {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  flex: none;
  padding: 0.12em 0.55em;
  border-radius: 999px;
  color: var(--ink-3);
  font-size: var(--fs-2xs);
  transition:
    color var(--speed) var(--ease),
    background var(--speed) var(--ease);
}

.cf-revert:hover {
  color: var(--accent);
  background: var(--hover);
}

.cf-revert:disabled {
  opacity: 0.55;
  cursor: default;
}

/* touch: no hover, so the edit affordance stays visible */
@media (hover: none) {
  .cf-edit {
    opacity: 1;
  }
}

/* inline edit + add controls */
.cf-input {
  width: 100%;
  max-width: 22rem;
  padding: 0.42em 0.6em;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-sm);
  transition: border-color var(--speed) var(--ease);
}

.cf-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.cf-input::placeholder {
  color: var(--ink-3);
}

.cf-control-select {
  background-color: var(--bg);
}

.cf-editor {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
}

.cf-editor-actions {
  display: flex;
  gap: var(--sp-2);
}

.cf-add {
  margin-top: 0.1rem;
}

.cf-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0.15em;
  border-radius: 6px;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  transition: color var(--speed) var(--ease);
}

.cf-add-btn:hover {
  color: var(--accent);
}

.cf-add-panel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--hover);
  max-width: 30rem;
}

.cf-add-head {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cf-add-defs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.cf-def-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  max-width: 100%;
  padding: 0.25em 0.7em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--ink);
  font-size: var(--fs-xs);
  transition:
    border-color var(--speed) var(--ease),
    color var(--speed) var(--ease);
}

.cf-def-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.cf-def-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cf-def-chip-type {
  color: var(--ink-3);
  font-size: var(--fs-2xs);
}

.cf-def-chip:hover .cf-def-chip-type {
  color: var(--accent);
}

.cf-add-sep {
  height: 1px;
  background: var(--line);
}

.cf-newfield-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  transition: color var(--speed) var(--ease);
}

.cf-newfield-btn:hover {
  color: var(--accent);
}

.cf-add-editor {
  width: 100%;
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--line);
}

.cf-add-editor-label {
  margin-bottom: 0.35rem;
  font-size: var(--fs-xs);
  font-weight: 600;
}

.cf-newfield {
  align-items: stretch;
}

.cf-nf-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
}

.cf-nf-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}

@media (max-width: 640px) {
  .cf-row {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

/* ---------- admin management section ---------- */

.cfa-add-btn {
  margin-bottom: var(--sp-3);
}

.cfa-groups {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.cfa-group-head {
  margin-bottom: 0.2rem;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cfa-desc {
  color: var(--ink-3);
  font-size: var(--fs-xs);
  max-width: 40rem;
  overflow-wrap: anywhere;
}

.cfa-desc-input {
  min-height: 3.2rem;
  resize: vertical;
  line-height: 1.5;
}

.cfa-empty {
  margin-top: var(--sp-2);
}

/* ============================================================================
   overview — metric strip + attention + signals
   ========================================================================== */

.metric-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
  gap: var(--sp-3) var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-left: var(--sp-3);
  border-left: 1px solid var(--line);
  min-width: 0;
}

.stat:first-child {
  padding-left: 0;
  border-left: none;
}

.stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2.1rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.stat-accent .stat-value {
  color: var(--accent);
}

.stat-bad .stat-value {
  color: var(--bad);
}

.stat-warn .stat-value {
  color: var(--warn);
}

.stat-ok .stat-value {
  color: var(--ok);
}

.stat-sub {
  color: var(--ink-3);
  font-size: var(--fs-2xs);
}

.ov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: var(--sp-4) var(--sp-6);
  margin-top: var(--sp-4);
}

.panel {
  min-width: 0;
}

.panel-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: var(--sp-1);
}

.panel-sub {
  color: var(--ink-3);
  font-size: var(--fs-2xs);
}

.attn-row,
.signal-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: 100%;
  padding: 0.6rem 0.25rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: var(--fs-sm);
  transition: background var(--speed) var(--ease);
}

.attn-row:hover,
.signal-row:hover {
  background: var(--hover);
}

.attn-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
  flex: 1;
}

.attn-title {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attn-detail {
  color: var(--ink-3);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attn-go {
  display: inline-flex;
  color: var(--ink-3);
  flex: none;
}

.attn-row:hover .attn-go {
  color: var(--accent);
}

/* top-signals row: tier · preview-led headline over entity/kind/status · time */
.signal-row {
  gap: var(--sp-3);
}

/* Fixed-width tier column so the headline column aligns regardless of the
   severity word length (CRITICAL vs HIGH); label left-aligned within it. */
.signal-row > .tier {
  flex: none;
  width: 5rem;
  justify-content: flex-start;
}

.signal-main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1;
}

.signal-headline {
  display: flex;
  align-items: center;
  gap: 0.4em;
  min-width: 0;
}

.signal-text {
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signal-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.7rem;
  min-width: 0;
}

.signal-entity {
  max-width: 16rem;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.all-clear {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: var(--sp-3) 0.25rem;
  color: var(--ok);
  font-size: var(--fs-sm);
}

.all-clear.muted {
  color: var(--ink-3);
}

.ov-more {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: 0.25rem;
}

/* ============================================================================
   states — empty, skeleton, toast
   ========================================================================== */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
}

/* flat: a quiet icon, no circle chip (design voice: no decorative circles) */
.empty-icon {
  display: inline-flex;
  color: var(--ink-3);
  margin-bottom: var(--sp-1);
}

.empty-state h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.empty-state p {
  max-width: 26rem;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.skel {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
}

.skel-bar {
  height: 0.95rem;
  border-radius: 5px;
  background: var(--line);
  animation: shimmer 1.3s ease-in-out infinite;
}

.skel-bar:nth-child(odd) {
  width: 82%;
}

.skel-bar:nth-child(3n) {
  width: 64%;
}

@keyframes shimmer {
  50% {
    opacity: 0.45;
  }
}

#toast-region {
  position: fixed;
  bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1.1em;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 10px;
  background: var(--bg-raise);
  box-shadow: var(--shadow);
  font-size: var(--fs-sm);
  white-space: nowrap;
  animation: toast-in 160ms var(--ease);
}

.toast-ok {
  color: var(--ok);
  border-left-color: var(--ok);
}

.toast-bad {
  color: var(--bad);
  border-left-color: var(--bad);
}

.toast-out {
  animation: toast-out 200ms var(--ease) forwards;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* ============================================================================
   assistant — bottom-centered ask pill that expands into a centered chat pane
   (the one true card)
   ========================================================================== */

.assistant {
  position: fixed;
  inset-inline: 0;
  bottom: calc(clamp(0.9rem, 2.5vw, 1.5rem) + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  display: flex;
  justify-content: center;
  padding-inline: 0.75rem;
  pointer-events: none; /* the full-width strip must not block clicks beside the pill */
}

.assistant > * {
  pointer-events: auto;
}

/* collapsed: a fully-rounded, blurred pill — input + resume + circular send */

.as-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
  padding: 0.4rem 0.4rem 0.4rem 1.05rem;
  border: 1px solid var(--glass-border);
  border-radius: 9999px;
  background: var(--bg-raise); /* fallback for no color-mix */
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--glass-sheen);
  transition:
    border-color var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease);
}

.as-pill:focus-within {
  border-color: var(--accent);
  box-shadow: var(--glass-shadow), var(--glass-sheen), var(--ring);
}

.as-pill-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-sm);
}

.as-pill-input:focus {
  outline: none; /* focus reads on the pill border via :focus-within */
}

.as-pill-input::placeholder {
  color: var(--ink-3);
}

/* small rounded icon buttons (pane header + pill resume) */

.as-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  color: var(--ink-2);
  flex: none;
  transition:
    color var(--speed) var(--ease),
    background var(--speed) var(--ease);
}

.as-iconbtn:hover {
  color: var(--ink);
  background: var(--hover);
}

/* pill "recent chats": the pane header's Recent control, sized to sit beside the
   circular Send button — same glyph, same ghost hover treatment */
.as-resume {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

/* open: a centered pane sharing the pill's spot, flying up from it */

.as-panel {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 42rem;
  margin-inline: auto;
  height: min(60vh, 40rem);
  height: min(60svh, 40rem);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: var(--bg-raise); /* fallback for no color-mix */
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  /* The trailing 100vmax spread is a backdrop scrim: it dims the page behind the
     open panel so it reads as one clear layer (never "overlapping" the content),
     with no separate scrim element. The shadow is paint only, so the existing
     outside-click dismissal still fires. */
  box-shadow:
    var(--glass-shadow),
    var(--glass-sheen),
    0 0 0 100vmax rgba(10, 13, 26, 0.34);
  overflow: hidden;
  animation: pane-in 260ms var(--ease);
}

@keyframes pane-in {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
}

.as-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px 8px 8px 16px;
  border-bottom: 1px solid var(--line);
  flex: none;
}

.as-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.as-head-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.as-head-divider {
  width: 1px;
  height: 16px;
  margin-inline: 4px;
  background: var(--line-strong);
}

/* recent-chats dropdown, anchored under the history button */

.as-history-wrap {
  position: relative;
  display: inline-flex;
}

.as-history-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 5;
  width: 16rem;
  max-height: 16rem;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  background: var(--bg-raise); /* fallback for no color-mix */
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow), var(--glass-sheen);
}

.as-history-item {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border-radius: 7px;
  text-align: left;
  transition: background var(--speed) var(--ease);
}

.as-history-item:hover,
.as-history-item.active {
  background: var(--hover);
}

.as-history-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: var(--fs-sm);
}

.as-history-time {
  flex: none;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
}

.as-history-empty {
  padding: 0.8rem;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  text-align: center;
}

/* conversation: user turns are accent-tinted bubbles on the right; assistant
   turns are flat text on the left — no bubble, no border, no shadow */

.as-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  overscroll-behavior: contain;
}

.as-msg {
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.as-user {
  align-self: flex-end;
  max-width: 85%;
  padding: 8px 14px;
  border-radius: 16px;
  background: var(--accent-soft);
  font-size: var(--fs-sm);
}

.as-assistant {
  align-self: flex-start;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  color: var(--ink);
  font-size: var(--fs-sm);
}

/* tick + "Went to Sources" — a tool actually executed for this reply */
.as-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2em 0.65em;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: var(--fs-2xs);
  white-space: nowrap;
}

.as-chip svg {
  color: var(--ok);
  flex: none;
}

/* assistant reply rendered as markdown: tighter than the report `.md`, and the
   bubble's pre-wrap must not apply (block layout already handles wrapping) */
.as-md {
  gap: 0.5rem;
  width: 100%;
  white-space: normal;
}

.as-md .md-h {
  margin-top: 0.1rem;
}

.as-md ul,
.as-md ol {
  gap: 0.25rem;
}

/* inline echarts chart card: canvas + a CSV/PNG download bar */
.as-chart {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-raise);
}

.as-chart-plot {
  width: 100%;
  height: 260px;
}

.as-chart-bar {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

.as-chart-btn {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink-2);
  font-size: var(--fs-2xs);
  transition:
    background var(--speed) var(--ease),
    color var(--speed) var(--ease);
}

.as-chart-btn:hover:not(:disabled) {
  background: var(--hover);
  color: var(--ink);
}

.as-chart-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.as-chart-err {
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.as-note {
  align-self: flex-start;
  display: flex;
  align-items: flex-start;
  gap: 0.45em;
  color: var(--warn);
  font-size: var(--fs-xs);
}

/* flat loading row: rotating spinner + "Thinking…", gently pulsing */

.as-loading {
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink-3);
  animation: soft-pulse 1.8s ease-in-out infinite;
}

.as-loading svg {
  animation: spin 900ms linear infinite;
  flex: none;
}

@keyframes soft-pulse {
  50% {
    opacity: 0.55;
  }
}

/* empty state: centered prompt + full-width starter pills in a narrow column */

.as-starters {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: var(--sp-3);
}

.as-hello-title {
  color: var(--ink);
  font-size: var(--fs-base);
  font-weight: 500;
  text-align: center;
}

.as-hello-sub {
  color: var(--ink-2);
  font-size: var(--fs-xs);
  text-align: center;
  margin-bottom: 0.5rem;
}

.as-starter {
  width: 100%;
  max-width: 320px;
  padding: 0.5em 1em;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  text-align: center;
  transition:
    color var(--speed) var(--ease),
    border-color var(--speed) var(--ease),
    background var(--speed) var(--ease);
}

.as-starter:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--hover);
}

/* composer: a fully-rounded bordered pill — transparent auto-growing textarea
   with a trailing circular send (up-arrow → filled-square stop while in flight) */

.as-composer {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin: 12px;
  padding: 0.35rem 0.35rem 0.35rem 1rem;
  border: 1px solid var(--glass-border);
  border-radius: 9999px;
  background: var(--glass-well);
  transition:
    border-color var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease);
}

.as-composer:focus-within {
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.as-input {
  flex: 1;
  min-width: 0;
  padding: 0.22rem 0;
  background: transparent;
  border: none;
  font-size: var(--fs-sm);
  line-height: 1.45;
  resize: none;
  max-height: 160px;
  overflow-y: auto;
}

.as-input:focus {
  outline: none; /* focus reads on the composer border via :focus-within */
}

.as-input::placeholder {
  color: var(--ink-3);
}

.as-send {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-fill);
  color: var(--on-fill);
  flex: none;
  box-shadow: var(--shadow-sm);
  transition:
    filter var(--speed) var(--ease),
    background var(--speed) var(--ease);
}

.as-send-lg {
  width: 28px;
  height: 28px;
}

.as-send:hover {
  filter: brightness(1.08);
}

.as-send:disabled {
  cursor: default;
  filter: none;
}

/* while a response is in flight the send button reads as a filled-square "stop"
   on a secondary fill */
.as-send.as-send-stop {
  background: var(--line-strong);
  color: var(--ink);
}

.as-send.as-send-stop svg rect {
  fill: currentColor;
  stroke: none;
}

/* ============================================================================
   inline links — validated external URLs
   ========================================================================== */

/* validated http(s) external link — reads as the hostname integrated into the
   card; the ↗ glyph only surfaces on hover/keyboard focus (no persistent
   underlined-link look) */
.ext-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  max-width: 100%;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  text-decoration: none;
  border-radius: 3px;
  transition: color var(--speed) var(--ease);
}

.ext-link .ext-host {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ext-link svg {
  flex: none;
  opacity: 0;
  transition: opacity var(--speed) var(--ease);
}

.ext-link:hover,
.ext-link:focus-visible {
  color: var(--accent);
}

.ext-link:hover svg,
.ext-link:focus-visible svg {
  opacity: 1;
}

/* ============================================================================
   inline actions (sources: run now / pause · profile: key row actions)
   ========================================================================== */

.td-actions {
  white-space: nowrap;
  text-align: right;
}

th.td-actions {
  text-align: right;
}

.act-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.75em;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
  transition:
    color var(--speed) var(--ease),
    border-color var(--speed) var(--ease),
    background var(--speed) var(--ease);
}

.act-btn:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--hover);
}

.act-btn:active {
  transform: translateY(0.5px);
}

.act-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.act-btn.act-running {
  color: var(--accent);
  border-color: var(--accent-soft);
}

.act-btn.act-running svg {
  animation: spin 900ms linear infinite;
}

/* ============================================================================
   sources — a light health page: one calm card per source
   ========================================================================== */

/* editorial ledger: full-width source rows on hairline dividers — the health
   label leads its own column so the page scans top-to-bottom like a report. */
.src-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line-strong);
}

.src-row {
  display: grid;
  grid-template-columns: minmax(7.5rem, 10rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-2) var(--sp-3) 0.9rem;
  border-bottom: 1px solid var(--line);
  transition:
    background var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease);
}

.src-row:hover {
  background: var(--hover);
}

/* a quiet accent edge marks the rows that need attention */
.src-row.src-bad {
  box-shadow: inset 3px 0 0 var(--bad);
}

.src-row.src-warn {
  box-shadow: inset 3px 0 0 var(--warn);
}

/* health status leads the row (dot + label, from statusCell) */
.src-lead {
  display: flex;
  min-width: 0;
}

.src-lead .status-label {
  font-weight: 500;
}

.src-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.src-head {
  display: flex;
  align-items: baseline;
  gap: 0.4rem 0.7rem;
  flex-wrap: wrap;
  min-width: 0;
}

.src-id {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15rem 0.55rem;
  min-width: 0;
}

.src-name {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22rem;
}

/* adapter as a small mono tag chip, not a floating label */
.src-adapter {
  flex: none;
  align-self: center;
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-3);
  font-size: var(--fs-2xs);
  line-height: 1.5;
}

.src-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1.4rem;
}

.src-run,
.src-next {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4em;
  color: var(--ink-2);
  font-size: var(--fs-xs);
}

.src-run-label {
  color: var(--ink-2);
  text-transform: capitalize;
}

.src-run-when {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.src-dot-sep {
  color: var(--ink-3);
}

.src-next-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.src-next-val {
  color: var(--ink-2);
}

.src-next-when {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* calm "Briefwell is on it" note — reassuring, never alarming. A soft neutral wash
   with the brand accent, not a red error box: a broken pipeline is ours to fix. */
.src-onit-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5em;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--ink-2);
  font-size: var(--fs-xs);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.src-onit-row svg {
  flex: none;
  margin-top: 0.15em;
  color: var(--accent);
}

/* the fuller drawer note */
.src-onit {
  padding: var(--sp-3);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  background: var(--accent-soft);
}

.src-onit-head {
  display: flex;
  align-items: center;
  gap: 0.45em;
  color: var(--accent);
  font-weight: 600;
}

.src-onit-title {
  font-size: var(--fs-sm);
}

.src-onit-body {
  margin-top: 0.4rem;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.src-onit-detail {
  margin-top: 0.5rem;
}

.src-onit-detail > summary {
  color: var(--ink-3);
  font-size: var(--fs-xs);
  cursor: pointer;
  list-style: none;
}

.src-onit-detail > summary::-webkit-details-marker {
  display: none;
}

.src-onit-err {
  margin-top: 0.4rem;
  padding: 0.5rem 0.6rem;
  border-radius: 7px;
  background: var(--glass-well);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 12rem;
  overflow-y: auto;
}

.src-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* narrow: health + identity stay side by side; actions drop to their own row */
@media (max-width: 620px) {
  .src-row {
    grid-template-columns: minmax(6rem, auto) minmax(0, 1fr);
    row-gap: var(--sp-2);
  }

  .src-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* ============================================================================
   profile — flat hairline sections (type + whitespace, no boxes) with a
   sticky "on this page" rail that scroll-spies the sections. On narrow
   screens the rail becomes a jump-pill row above the content.
   ========================================================================== */

/* content column capped for reading; the rail pushed to the far right edge */
.profile {
  display: grid;
  grid-template-columns: minmax(0, 48rem) 10.5rem;
  justify-content: space-between;
  gap: 0 var(--sp-5);
  align-items: start;
}

.pf-body {
  min-width: 0;
}

/* ---------- "on this page" rail (sticky inside the scrolling #main) -------- */

.pf-toc {
  position: sticky;
  top: var(--sp-2);
}

.pf-toc-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 1px solid var(--line);
}

.pf-toc-link {
  text-align: left;
  padding: 0.34em 0.75em;
  margin-left: -1px;
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
  transition:
    color var(--speed) var(--ease),
    background var(--speed) var(--ease),
    border-color var(--speed) var(--ease);
}

.pf-toc-link:hover {
  color: var(--ink);
  background: var(--hover);
}

.pf-toc-on {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 600;
}

@media (max-width: 900px) {
  .profile {
    display: flex;
    flex-direction: column;
  }

  /* the rail becomes a jump-pill row above the content */
  .pf-toc {
    order: -1;
    position: static;
    overflow-x: auto;
    margin-bottom: var(--sp-2);
    -webkit-overflow-scrolling: touch;
  }

  .pf-toc-inner {
    flex-direction: row;
    gap: var(--sp-1);
    border-left: none;
  }

  .pf-toc-link {
    margin-left: 0;
    padding: 0.3em 0.85em;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
  }

  .pf-toc-on {
    border-color: var(--accent);
    background: var(--accent-soft);
  }
}

/* ---------- identity header (flat, type only) ---------- */

.pf-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding-bottom: var(--sp-4);
  scroll-margin-top: var(--sp-3);
}

.pf-hero-who {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.pf-hero-email {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.pf-hero-meta {
  color: var(--ink-2);
  font-size: var(--fs-xs);
}

.pf-hero-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.pf-hero-switch {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ---------- flat sections — settings rows: title/description left, content
   right (every non-head child auto-places into the content column) ---------- */

.pf-section {
  display: grid;
  grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-5);
  align-items: start;
  padding: var(--sp-4) 0 var(--sp-5);
  border-top: 1px solid var(--line);
  min-width: 0;
  scroll-margin-top: var(--sp-3);
}

.pf-section > .pf-head {
  grid-column: 1;
}

.pf-section > :not(.pf-head) {
  grid-column: 2;
  min-width: 0;
}

/* buttons are actions, not bars — never stretch to the column width */
.pf-section > .btn {
  justify-self: start;
}

@media (max-width: 700px) {
  .pf-section {
    display: block;
  }

  .pf-section > .pf-head {
    margin-bottom: var(--sp-3);
  }

  .pf-section > :not(.pf-head) {
    margin-bottom: var(--sp-3);
  }
}

.pf-desc {
  margin-top: 0.4rem;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  line-height: 1.55;
}

/* status + whisper actions on one line */
.pf-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

/* revealed inline editor: proper boxed input + save/cancel */
.pf-editor {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.pf-input {
  flex: 1;
  min-width: min(15rem, 100%);
  padding: 0.45em 0.75em;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg);
  font-size: var(--fs-sm);
  transition:
    border-color var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease);
}

.pf-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.pf-input::placeholder {
  color: var(--ink-3);
}

/* statuses inside profile sections read as a dot + plain word, not shouting
   caps — Enabled/Paused/Connected/Linked/active/revoked */
.pf-section .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.pf-section .badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* one quiet button voice inside sections — actions shouldn't compete with
   content; the accent is reserved for focus and the active rail link */
.pf-section .btn-primary {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
  font-weight: 500;
  box-shadow: none;
}

.pf-section .btn-primary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.pf-note {
  color: var(--ink-2);
  font-size: var(--fs-xs);
  max-width: 34rem;
}

/* generic control row inside a section (workspace switch, status rows) */
.pf-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* the section grid's row-gap owns vertical rhythm — no extra margins inside */
.pf-hero-switch .pf-row,
.pf-hero .pf-row {
  margin-top: 0;
}

/* theme: a two-option segmented pill */
.pf-theme {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}

.pf-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.32em 0.95em;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  transition:
    color var(--speed) var(--ease),
    background var(--speed) var(--ease);
}

.pf-theme-btn:hover {
  color: var(--ink);
}

.pf-theme-btn[aria-pressed='true'] {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* the shown-once plaintext key */
.key-once {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-3);
  padding: var(--sp-3);
  border-left: 2px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--accent-soft);
}

.key-once-title {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.key-once-warn {
  color: var(--ink-2);
  font-size: var(--fs-xs);
}

.key-once-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.key-once-value {
  flex: 1;
  min-width: min(16rem, 100%);
  padding: 0.5em 0.7em;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
}

.key-once-value:focus {
  outline: none;
  border-color: var(--accent);
}

.td-revoked {
  color: var(--ink-3);
}

.key-revoked td {
  color: var(--ink-3);
}

/* name inputs sit side by side inside the identity header's editor */
.pf-input-name {
  flex: 0 1 11rem;
  min-width: min(9rem, 100%);
}

.pf-hero .pf-editor {
  margin-top: var(--sp-2);
}

.pf-hero .pf-actions {
  margin-top: 0.2rem;
}

/* ============================================================================
   connectors — delivery-channel management (admin-only profile section)
   ========================================================================== */

.cn-empty {
  margin-top: var(--sp-3);
}

.cn-list {
  margin-top: 0;
}

.cn-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}

.cn-row > .bt {
  margin-top: 0.1rem;
}

.cn-main {
  flex: 1 1 16rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.cn-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.cn-type {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.cn-summary {
  color: var(--ink-2);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}

.cn-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}

/* row actions whisper until hovered — no bordered pill stacks anywhere in the
   settings sections or the identity header */
.pf-section .act-btn,
.pf-hero .act-btn {
  border-color: transparent;
  color: var(--ink-3);
  padding: 0.3em 0.6em;
  border-radius: 6px;
}

.pf-section .act-btn:hover,
.pf-hero .act-btn:hover {
  border-color: transparent;
  color: var(--ink);
  background: var(--hover);
}

.pf-section .act-btn.bad-text:hover {
  background: var(--bad-soft);
}

/* ---------- brand tiles — real logos on a quiet white chip ------------------
   A white chip in both themes so each service's official logo colors render
   true (Notion's black mark needs it on dark). A hairline ring only — no
   drop shadows. Email/webhook keep semantic glyphs on a neutral chip. */

.bt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  border-radius: 8px;
  background: #fff;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.09);
  user-select: none;
}

/* non-brand tiles (email, webhook, unknown types) sit on the theme surface */
.bt-email,
.bt-webhook {
  background: var(--bg-rail);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.bt-lg {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 9px;
  font-size: 1rem;
}

.bt-sm {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 7px;
  font-size: 0.72rem;
}

.bt-mono {
  font-weight: 700;
  line-height: 1;
}

.bt svg {
  width: 56%;
  height: 56%;
}

.bt-logo {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

/* ---------- gallery — card grid of destinations, grouped by category --------- */

.cn-gallery {
  gap: var(--sp-2);
}

.cn-gallery-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}

.cn-gallery-close {
  flex: none;
}

.cn-cat {
  margin-top: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.cn-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(12.5rem, 100%), 1fr));
  gap: var(--sp-2);
}

.cn-card {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2);
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition:
    border-color var(--speed) var(--ease),
    background var(--speed) var(--ease);
}

.cn-card:hover {
  border-color: var(--line-strong);
  background: var(--hover);
}

.cn-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.06rem;
  min-width: 0;
}

.cn-card-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}

.cn-card-desc {
  font-size: var(--fs-2xs);
  color: var(--ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- the add/edit form — an accent-edged panel, like the shown-once key */

.cn-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: var(--sp-3) 0;
  padding: var(--sp-3);
  border-left: 2px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: var(--bg-rail);
}

.cn-back {
  align-self: flex-start;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  border-radius: 3px;
}

.cn-back:hover {
  color: var(--ink);
}

.cn-form-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.cn-form-headtext {
  min-width: 0;
}

.cn-form-title {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.cn-form-desc {
  color: var(--ink-2);
  font-size: var(--fs-xs);
}

.cn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: var(--sp-3);
}

.cn-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.cn-field-wide {
  grid-column: 1 / -1;
}

.cn-label {
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.cn-star {
  color: var(--accent);
}

.cn-input {
  width: 100%;
  padding: 0.45em 0.65em;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-sm);
  transition: border-color var(--speed) var(--ease);
}

.cn-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.cn-input::placeholder {
  color: var(--ink-3);
}

.cn-textarea {
  min-height: 7rem;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.cn-select {
  background-color: var(--bg);
}

.cn-hint {
  color: var(--ink-3);
  font-size: var(--fs-2xs);
}

.cn-field-err {
  color: var(--bad);
  font-size: var(--fs-2xs);
}

.cn-field-invalid .cn-input,
.cn-field-invalid .chips {
  border-color: var(--bad);
}

/* secret inputs: password field + show/hide toggle */
.cn-secret {
  position: relative;
}

.cn-secret .cn-input {
  padding-right: 2.3rem;
}

.cn-eye {
  position: absolute;
  top: 50%;
  right: 0.3rem;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 6px;
  color: var(--ink-3);
}

.cn-eye:hover {
  color: var(--ink);
  background: var(--hover);
}

.cn-adv summary {
  cursor: pointer;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  user-select: none;
  border-radius: 3px;
}

.cn-adv summary:hover {
  color: var(--ink);
}

.cn-adv[open] summary {
  margin-bottom: var(--sp-2);
}

.cn-form-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
}

/* ---------- chip (tag) input — email recipients -------------------------------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg);
  cursor: text;
  transition: border-color var(--speed) var(--ease);
}

.chips:focus-within {
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.chips-bad {
  border-color: var(--bad);
}

.chips-bad .chips-input {
  color: var(--bad);
}

.chips-input {
  flex: 1 1 7rem;
  min-width: 5rem;
  padding: 0.22em 0.25em;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-sm);
}

.chips-input:focus {
  outline: none;
}

.chips-input::placeholder {
  color: var(--ink-3);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 100%;
  padding: 0.16em 0.6em;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--hover);
  color: var(--ink);
  font-size: var(--fs-xs);
  line-height: 1.4;
  cursor: pointer;
  transition:
    border-color var(--speed) var(--ease),
    background var(--speed) var(--ease);
}

.chip svg {
  flex: none;
  opacity: 0.55;
}

.chip:hover {
  border-color: var(--bad);
  background: var(--bad-soft);
}

.chip:hover svg {
  opacity: 1;
  color: var(--bad);
}

.chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- rule picker — routing by rule NAME, never raw UUIDs ---------------- */

.rp {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.rp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.rp-chips:empty {
  display: none;
}

.rp-anchor {
  position: relative;
  max-width: 24rem;
}

.rp-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  padding: 0.42em 0.75em;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-sm);
  text-align: left;
  transition: border-color var(--speed) var(--ease);
}

.rp-btn:hover,
.rp-btn[aria-expanded='true'] {
  border-color: var(--accent);
}

.rp-btn svg {
  flex: none;
  color: var(--ink-3);
  transform: rotate(90deg);
  transition: transform var(--speed) var(--ease);
}

.rp-btn[aria-expanded='true'] svg {
  transform: rotate(270deg);
}

.rp-btn-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-pop {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 13rem;
  overflow: auto;
  padding: 0.3rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg-raise);
  box-shadow: var(--shadow);
}

.rp-opt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35em 0.5em;
  border-radius: 7px;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.rp-opt:hover,
.rp-opt:focus {
  background: var(--hover);
  outline: none;
}

.rp-opt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.rp-tick {
  display: inline-flex;
  justify-content: center;
  width: 1rem;
  flex: none;
  color: var(--accent);
  visibility: hidden;
}

.rp-opt-on .rp-tick {
  visibility: visible;
}

.rp-opt-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rp-opt-muted {
  flex: none;
  color: var(--ink-3);
  font-size: var(--fs-2xs);
}

.rp-loading {
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

/* ============================================================================
   segmented view switch (Signals: Notable | All activity)
   ========================================================================== */

.seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
}

.seg-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 0.9em;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
  transition:
    color var(--speed) var(--ease),
    background var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease);
}

.seg-btn:hover:not(.seg-on) {
  color: var(--ink);
  background: var(--hover);
}

.seg-btn.seg-on {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* ============================================================================
   all-activity feed — lighter rows than signals (the raw change stream)
   ========================================================================== */

.act-feed {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.act-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: 0.6rem 0.55rem;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
  scroll-margin: 4rem;
  transition:
    background var(--speed) var(--ease),
    border-color var(--speed) var(--ease);
}

.act-row + .act-row {
  box-shadow: 0 -1px 0 var(--line);
}

.act-row:hover {
  background: var(--hover);
  box-shadow: none;
}

.act-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.act-row > .badge {
  flex: none;
  margin-top: 0.1rem;
}

.act-main {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1;
}

.act-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

.act-entity {
  min-width: 0;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.act-summary {
  color: var(--ink-2);
  font-size: var(--fs-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.act-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem 0.7rem;
  min-width: 0;
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.act-type {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  color: var(--ink-2);
}

.act-src {
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}

.act-meta .time {
  margin-left: auto;
}

.act-badge {
  flex: none;
  margin-left: auto;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.act-alerted {
  color: var(--accent);
}

.act-below {
  color: var(--ink-3);
  font-weight: 500;
}

/* the event drawer's context note (sub-threshold explanation) */
.detail-note {
  color: var(--ink-2);
  font-size: var(--fs-xs);
  line-height: 1.5;
  margin-bottom: var(--sp-2);
}

/* provenance "Source —" link line (alert + event drawers) */
.prov-source {
  align-items: baseline;
}

.prov-src-label {
  color: var(--ink-3);
}

/* ============================================================================
   source edit drawer (LEFT slide-in) + rules & thresholds (admin)
   ========================================================================== */

.drawer-scrim {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(6, 8, 13, 0.5);
  backdrop-filter: blur(2px);
}

.drawer-scrim:not([hidden]) {
  animation: scrim-in var(--speed) var(--ease);
}

/* a glassy panel that slides in from the LEFT edge */
.src-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 101;
  width: min(440px, calc(100vw - var(--sp-4)));
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--glass-border);
  background: var(--glass-bg);
  box-shadow: var(--glass-sheen), var(--glass-shadow);
  overflow: hidden;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .src-drawer {
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
  }
}

.src-drawer:not([hidden]) {
  animation: drawer-in var(--speed) var(--ease);
}

@keyframes drawer-in {
  from {
    opacity: 0.4;
    transform: translateX(-14px);
  }
}

/* a blue gradient hairline down the leading edge — the brand through-line */
.src-drawer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: var(--briefwell-grad);
  opacity: 0.9;
}

.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--line);
}

.drawer-title {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.drawer-sub {
  margin-top: 0.15rem;
  color: var(--ink-3);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}

.drawer-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  overflow-y: auto;
}

.drawer-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
}

@media (max-width: 30rem) {
  .src-drawer {
    width: 100vw;
  }
}

/* checkbox rows in the edit form (enabled / render) span the grid */
.cn-check {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  font-size: var(--fs-sm);
  cursor: pointer;
}

.cn-check input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--accent);
  cursor: pointer;
}

/* cadence: number + unit select */
.src-cadence {
  display: flex;
  gap: var(--sp-2);
}

.src-cadence-num {
  width: 5.5rem;
  flex: none;
}

.src-cadence-unit {
  flex: 1;
  min-width: 0;
}

.src-adv {
  grid-column: unset;
}

/* the full-config JSON textarea: monospace + tabular so the stored object reads
   clearly and its structure is scannable */
.src-adv-area {
  min-height: 8rem;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.5;
  tab-size: 2;
}

.src-edit-error {
  margin-top: calc(-1 * var(--sp-1));
}

/* --- rules & thresholds section (below the source grid) --- */

.src-rules-host {
  display: block;
}

/* a considered settings panel below the sources ledger, led by a display heading
   and a strong hairline — the same editorial rhythm as Overview / Signals. */
.src-sec {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line-strong);
}

.src-sec-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: var(--sp-2);
}

.src-sec-title {
  font-family: var(--font-serif);
  font-size: var(--fs-title);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}

.src-sec-sub {
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.rule-list {
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.rule-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--line);
  transition: background var(--speed) var(--ease);
}

.rule-row:hover {
  background: var(--hover);
}

.rule-main {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.rule-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
}

.rule-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22rem;
}

.rule-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.8rem;
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.rule-meta-item {
  color: var(--ink-3);
}

.rule-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-3) var(--sp-4);
  flex-wrap: wrap;
}

/* threshold editor as a considered little control group: overline label, then a
   numeric input paired with its Save on one line */
.rule-th {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}

.rule-th-label {
  flex-basis: 100%;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.rule-th-input {
  width: 5.5rem;
  padding: 0.35em 0.55em;
  text-align: center;
}

.rule-th-save {
  margin-top: 0;
}

@media (max-width: 560px) {
  .rule-row {
    grid-template-columns: 1fr;
  }

  .rule-controls {
    align-items: center;
  }

  .act-src {
    max-width: 9rem;
  }
}

.rule-adv {
  grid-column: 1 / -1;
  margin-top: 0.2rem;
}

.rule-json {
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  line-height: 1.5;
  white-space: pre;
  overflow-x: auto;
}

.src-rules-empty {
  margin-top: var(--sp-3);
}

/* ============================================================================
   Signals — editorial header, index table, and full-page detail
   ========================================================================== */

/* ---- header: subtitle + right-aligned controls ---- */

.sig-header {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}

.sig-subtitle {
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

.sig-subtitle::first-letter {
  color: var(--hot);
  font-weight: 600;
}

.sig-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.sig-search {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 12rem;
  padding: 0.42rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg-raise);
  transition: border-color var(--speed) var(--ease);
}

.sig-search:focus-within {
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.sig-search-icon {
  display: inline-flex;
  color: var(--ink-3);
}

.sig-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: var(--fs-sm);
}

.sig-search-input:focus {
  outline: none;
}

.sig-search-input::placeholder {
  color: var(--ink-3);
}

/* Filters / Priority pill controls (icon + native select) */
.sig-ctl {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.55rem 0.32rem 0.7rem;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--bg-raise);
  color: var(--ink-2);
  transition:
    border-color var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease);
}

.sig-ctl:hover {
  border-color: var(--ink-3);
}

.sig-ctl:focus-within {
  border-color: var(--accent);
  box-shadow: var(--ring);
}

.sig-select {
  appearance: none;
  padding: 0 1.5em 0 0.1em;
  border: none;
  background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23858c9b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.2em center;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
}

.sig-select:focus {
  outline: none;
}

.sig-select option {
  background: var(--bg-raise);
  color: var(--ink);
  font-weight: 400;
}

/* ---- the index table ---- */

.sig-table-wrap {
  margin-top: var(--sp-2);
}

.sig-table {
  width: 100%;
  min-width: 46rem;
  border-collapse: separate;
  border-spacing: 0;
}

.sig-table th {
  padding: 0 0.9rem 0.7rem;
  border-bottom: 1px solid var(--line-strong);
  text-align: left;
  white-space: nowrap;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* every column header sorts — click or Enter/Space toggles the direction */
.sig-table th.th-sortable {
  cursor: pointer;
  user-select: none;
  transition: color var(--speed) var(--ease);
}
.sig-table th.th-sortable:hover,
.sig-table th.th-sortable:focus-visible {
  color: var(--ink);
  outline: none;
}
.sig-table th.th-sorted {
  color: var(--ink);
}
.th-caret {
  margin-left: 0.32em;
  color: var(--accent);
  font-weight: 700;
}

.sig-table td {
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
  vertical-align: middle;
}

.sig-tr {
  cursor: pointer;
  scroll-margin: 5rem;
  transition: background var(--speed) var(--ease);
}

.sig-tr:hover {
  background: var(--hover);
}

.sig-tr.sig-sel {
  background: var(--accent-soft);
}

.sig-tr:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 6px;
}

.td-sev,
.th-sev {
  width: 6.2rem;
  white-space: nowrap;
}

.td-signal {
  max-width: 20rem;
}

.sig-name {
  color: var(--ink);
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sig-name-sub {
  display: flex;
  align-items: center;
  gap: 0.3em;
  margin-top: 0.15rem;
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.sig-name-sub-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td-data {
  max-width: 12rem;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td-detected {
  white-space: nowrap;
}

.td-detected .time {
  font-size: var(--fs-xs);
}

/* colored status text — New / In review / Actioned / Dismissed */
.st-text {
  font-size: var(--fs-sm);
  font-weight: 500;
  white-space: nowrap;
}

.st-new {
  color: var(--bad);
}

.st-review {
  color: var(--accent);
}

.st-actioned {
  color: var(--ok);
}

.st-dismissed {
  color: var(--ink-3);
}

/* assignee — a quiet first name, never an avatar */
.td-assignee {
  white-space: nowrap;
}

.assignee-name {
  color: var(--ink-2);
  font-size: var(--fs-xs);
}

.assignee-name.assignee-me {
  color: var(--accent);
  font-weight: 600;
}

.assignee-none {
  color: var(--ink-3);
}

.td-url {
  max-width: 15rem;
}

.td-url .ext-link {
  color: var(--accent);
}

.td-url .ext-link svg {
  opacity: 1;
}

/* ---- full-page detail ---- */

.sig-detail {
  animation: fade-in 180ms var(--ease);
}

.detail-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.detail-bar-left {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  min-width: 0;
}

.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ink);
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: 6px;
}

.detail-back:hover {
  color: var(--accent);
}

.detail-esc {
  padding: 0.05rem 0.4rem;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.crumb {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}

.crumb-cur {
  color: var(--ink-2);
}

.crumb-sep {
  color: var(--ink-3);
  opacity: 0.6;
}

.detail-bar-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.detail-assign {
  background: var(--navy);
  border-color: var(--navy);
}

.detail-assign:hover {
  background: var(--navy);
  border-color: var(--navy);
  filter: brightness(1.1);
}

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: var(--sp-6);
  align-items: start;
}

.detail-main {
  min-width: 0;
}

.detail-overline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--sp-2);
  color: var(--hot);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.detail-overline .ov-sep {
  opacity: 0.55;
}

.detail-title {
  font-family: var(--font-serif);
  font-size: var(--fs-hero);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.detail-sub {
  color: var(--ink-3);
  font-size: var(--fs-sm);
}

/* small, secondary meta row: the severity tier sits here (not the focal point),
   next to the triage state + detected time */
.detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 0.85rem;
  margin-top: var(--sp-3);
}

/* the all-activity event detail keeps a small badge line here */
.detail-score {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: var(--sp-3);
}

.detail-section {
  margin-top: var(--sp-5);
}

.detail-h {
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--sp-2);
}

.detail-cap {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--sp-2);
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.detail-cap .ov-sep {
  opacity: 0.55;
}

/* signal-data key/value list */
.sd {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.sd-list {
  display: flex;
  flex-direction: column;
}

.sd-row {
  display: grid;
  grid-template-columns: minmax(7rem, 12rem) 1fr;
  gap: 0.4rem 1.5rem;
  align-items: baseline;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

.sd-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

/* small sparkle marking an AI-assessed field value */
.sd-ai {
  display: inline-flex;
  flex: none;
  color: var(--accent);
  opacity: 0.85;
}

.sd-value {
  color: var(--ink);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.sd-value.ext-link {
  color: var(--accent);
}

.sd-value.ext-link svg {
  opacity: 1;
}

/* internal-review rail — three quiet zones (triage, feedback, thread) separated
   by hairlines and whitespace */
.ir-rail {
  min-width: 0;
  padding-left: var(--sp-4);
  border-left: 1px solid var(--line);
}

.ir-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.ir-field {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: center;
  gap: var(--sp-2);
}

.ir-label {
  color: var(--ink-3);
  font-size: var(--fs-xs);
}

.ir-field .triage-select {
  width: 100%;
  padding: 0.4em 1.6em 0.4em 0.7em;
  border-radius: 8px;
  font-size: var(--fs-sm);
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}

.ir-fb {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
}

/* pull the whisper buttons' padding out of the flow so their text lines up
   with the labels above */
.ir-fb .fb-area {
  margin-left: -0.4rem;
}

.ir-rail .comments {
  border-top: none;
  padding-top: var(--sp-4);
}

/* ---- saved-views: horizontal chip bar on narrow viewports ---- */

@media (max-width: 900px) {
  #saved-views {
    position: static;
    height: auto;
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-right: none;
    border-bottom: 1px solid var(--line);
    background: var(--bg-rail);
    overflow-x: auto;
    scrollbar-width: none;
  }

  #saved-views::-webkit-scrollbar {
    display: none;
  }

  .sv-title {
    display: none;
  }

  .sv-list {
    flex-direction: row;
    gap: var(--sp-1);
  }

  .sv-item {
    white-space: nowrap;
  }

  .sv-sep {
    width: 1px;
    height: 1.4rem;
    margin: 0 0.2rem;
  }

  .detail-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
  }

  .ir-rail {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--line);
    padding-top: var(--sp-4);
  }
}

@media (max-width: 640px) {
  .sig-table {
    min-width: 34rem;
  }

  /* prune the derived data columns on a phone; keep the essentials scrollable */
  .th-data,
  .td-data,
  .th-detected,
  .td-detected {
    display: none;
  }
}

/* ============================================================================
   responsive — rail folds to a top bar, then columns prune
   ========================================================================== */

@media (max-width: 900px) {
  #app-view {
    display: block;
  }

  #sidebar {
    position: sticky;
    top: 0;
    z-index: 60;
    height: auto;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-right: none;
    border-bottom: 1px solid var(--line);
    background: var(--bg-rail);
  }

  .brand {
    padding: 0;
  }

  /* the rail is a top bar here — collapse doesn't apply */
  .sidebar-toggle {
    display: none;
  }

  .nav {
    flex-direction: row;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  .nav-item {
    padding: 0.4rem 0.65rem;
    white-space: nowrap;
  }

  .sidebar-foot {
    margin-top: 0;
    margin-left: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-2);
    padding: 0;
  }

  .foot-row {
    gap: var(--sp-2);
  }

  .vertical-badge,
  .user-email {
    display: none;
  }

  #main {
    padding-bottom: 8rem;
  }
}

@media (max-width: 640px) {
  .page-head {
    flex-wrap: wrap;
  }

  .data-table {
    min-width: 0;
  }

  /* prune low-priority columns on the profile API-keys table */
  .td-key,
  .td-lastused {
    display: none;
  }

  .td-name {
    max-width: 9rem;
  }

  .signal-entity,
  .signal-row .signal-meta .status-cell {
    display: none;
  }

  /* the centered pill/pane already spans near-full width here; just give the
     pane more of the short viewport */
  .as-panel {
    height: min(72svh, 40rem);
  }
}

/* ---------- motion off ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .skel-bar {
    animation: none;
  }
}

/* ---------- glass fallbacks ---------- */

/* Where the frost can't render (no backdrop-filter support), make the assistant
   surfaces fully opaque so text never reads over live page content. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .as-pill,
  .as-panel,
  .as-history-menu,
  .src-drawer {
    background: var(--bg-raise);
  }
}

/* Respect the OS "reduce transparency" preference: drop the blur and the sheen
   for solid, calm surfaces that still match the theme. */
@media (prefers-reduced-transparency: reduce) {
  .as-pill,
  .as-panel,
  .as-history-menu {
    background: var(--bg-raise);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--shadow);
  }

  .as-pill:focus-within {
    box-shadow: var(--shadow), var(--ring);
  }

  .as-composer {
    background: var(--bg);
  }

  .src-drawer {
    background: var(--bg-raise);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: var(--shadow);
  }
}

/* ---------- Data sources (client-data enrichment) ---------- */
.cd-body { display: flex; flex-direction: column; gap: 22px; }
.cd-sub { display: flex; flex-direction: column; gap: 9px; }
.cd-sub-title { font-size: 12px; font-weight: 600; opacity: 0.62; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; }
.cd-ctx { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.cd-ctx-actions { display: flex; align-items: center; gap: var(--sp-2); }
.cd-ctx-preview {
  color: var(--ink-2);
  font-size: var(--fs-sm);
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cd-context { width: 100%; resize: vertical; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--glass-border, rgba(0,0,0,0.12)); background: var(--bg-raise, transparent); font: inherit; color: inherit; }
.cd-connect-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.cd-list { display: flex; flex-direction: column; gap: 6px; }
.cd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; border: 1px solid var(--glass-border, rgba(0,0,0,0.1)); border-radius: 9px; background: var(--bg-raise, transparent); }
.cd-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cd-row-name { font-weight: 600; font-size: 14px; }
.cd-row-meta { font-size: 12px; opacity: 0.58; font-family: var(--font-mono); }
.cd-row-err { font-size: 12px; color: var(--bad); }
.cd-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.cd-danger { color: var(--bad); }
.cd-empty { font-size: 13px; opacity: 0.5; margin: 4px 0; }
.cd-form { display: flex; flex-direction: column; gap: 11px; padding: 15px; border: 1px solid var(--glass-border, rgba(0,0,0,0.1)); border-radius: 11px; margin-bottom: 12px; background: var(--bg-rail, rgba(0,0,0,0.02)); }
.cd-field { display: flex; flex-direction: column; gap: 4px; }
.cd-field-label { font-size: 12px; opacity: 0.68; }
.cd-input { padding: 8px 11px; border-radius: 8px; border: 1px solid var(--glass-border, rgba(0,0,0,0.14)); background: var(--bg-raise, transparent); font: inherit; color: inherit; width: 100%; }
.cd-creds { display: flex; flex-direction: column; gap: 11px; }
.cd-files { display: flex; flex-direction: column; gap: 11px; }
.cd-upload { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; align-self: flex-start; }
.cd-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

/* ---------- Sign-in: OAuth providers ---------- */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.15rem 0;
  color: var(--ink-3);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.auth-oauth {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.btn-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--bg-raise);
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-weight: 500;
  border-radius: 10px;
  padding: 0.62rem 1rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-oauth:hover {
  background: var(--hover);
  border-color: var(--accent);
}
.btn-oauth svg {
  flex: 0 0 auto;
}

/* ============================================================================
   Act-agent actions — the response system of record
   ========================================================================== */

/* per-alert Actions section on the signal detail page: a flat, hairline list */
.aa-list {
  display: flex;
  flex-direction: column;
}

.aa-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}

.aa-item:first-child {
  padding-top: 0.35rem;
}

.aa-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.aa-int {
  color: var(--ink);
  font-weight: 600;
  font-size: var(--fs-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aa-title {
  color: var(--ink);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.aa-reason {
  color: var(--ink-2);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}

.aa-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  align-self: flex-start;
  margin-top: 0.15rem;
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.aa-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.aa-link-arrow {
  font-family: var(--font-mono);
}

/* workspace Actions table — reuses .sig-table th/td styling; column widths + cells */
.aa-table-wrap {
  margin-top: var(--sp-2);
}

.aa-action-main {
  color: var(--ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.td-aa-action,
.th-aa-action {
  max-width: 18rem;
}

.td-aa-signal,
.th-aa-signal {
  max-width: 18rem;
}

.aa-signal {
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aa-decided,
.td-aa-decided,
.th-aa-decided,
.td-aa-when,
.th-aa-when,
.td-aa-status,
.th-aa-status,
.td-aa-link,
.th-aa-link {
  white-space: nowrap;
}

.aa-decided {
  color: var(--ink-2);
  font-size: var(--fs-xs);
}

.aa-none {
  color: var(--ink-3);
}