/* ==========================================================================
   Lexlegis design system — elite edition.
   Editorial graphite + indigo, gold accent, Fraunces display + Inter UI.
   Sits on top of Bootstrap 5. All existing class names preserved.
   ========================================================================== */

:root {
  color-scheme: light;
  /* surfaces */
  --bg:            #f6f6f4;
  --bg-tint:       #efefea;
  --bg-elev:       #ffffff;
  --bg-elev-2:     #fafaf7;
  --surface:       #ffffff;
  --surface-ink:   #0b0e17;
  --ink-fg:        #ffffff;

  /* lines */
  --border:        rgba(15, 18, 32, 0.07);
  --border-strong: rgba(15, 18, 32, 0.13);
  --border-soft:   rgba(15, 18, 32, 0.04);

  /* text */
  --text:          #0b0e17;
  --text-muted:    #4a4f63;
  --text-subtle:   #7f8497;
  --text-faint:    #a9adbd;

  /* brand — Lexlegis indigo */
  --brand:         #3b3aa6;
  --brand-600:     #2f2e90;
  --brand-700:     #25257a;
  --brand-50:      #eef0fd;
  --brand-100:     #dfe2fb;
  --ring:          rgba(59, 58, 166, 0.18);

  /* accent — editorial gold (sparingly for highlights & elite cues) */
  --gold:          #b08a3e;
  --gold-600:      #8f6d28;
  --gold-50:       #fbf5e7;

  /* semantics */
  --ok:    #1a7f4d;
  --ok-50: #e6f5ec;
  --warn:  #b26a05;
  --warn-50: #fbf2e1;
  --err:   #ad1f1f;
  --err-50: #fbe9e9;
  --info:  #0d6fb8;
  --info-50: #e6f1fa;

  /* radius */
  --radius-xs:  6px;
  --radius-sm:  8px;
  --radius:    12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 32px;

  /* shadow */
  --shadow-xs: 0 1px 1px rgba(15,18,32,.04);
  --shadow-sm: 0 1px 2px rgba(15,18,32,.05), 0 1px 1px rgba(15,18,32,.03);
  --shadow:    0 8px 28px rgba(15,18,32,.07), 0 2px 4px rgba(15,18,32,.04);
  --shadow-lg: 0 28px 56px rgba(15,18,32,.12), 0 8px 16px rgba(15,18,32,.06);
  --shadow-inset: inset 0 0 0 1px rgba(15,18,32,.05);

  /* layout */
  --sidebar-w:           272px;
  --sidebar-w-collapsed:  76px;

  /* type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Fraunces", "Iowan Old Style", "Times New Roman", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* gradients */
  --grad-brand: linear-gradient(135deg, #3b3aa6 0%, #6d59d9 55%, #06b6d4 100%);
  --grad-gold:  linear-gradient(135deg, #b08a3e 0%, #d9b265 100%);
  --grad-ink:   linear-gradient(180deg, #0b0e17 0%, #1b1f33 100%);
  /* Hero-only base: a lifted, richer navy so the greeting card reads as a
     deep evening sky rather than near-black. Used by .hero--ink + .sky--*. */
  --grad-hero:  linear-gradient(165deg, #2b3160 0%, #3a4178 52%, #4a5290 100%);

  /* grain (very subtle paper feel) */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.045 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg:            #06070d;
  --bg-tint:       #0a0c14;
  --bg-elev:       #10131d;
  --bg-elev-2:     #161a26;
  --surface:       #10131d;
  --surface-ink:   #e8eaf1;
  --ink-fg:        #0b0e17;

  --border:        rgba(255,255,255,.07);
  --border-strong: rgba(255,255,255,.14);
  --border-soft:   rgba(255,255,255,.035);

  --text:          #e8eaf1;
  --text-muted:    #aab0c4;
  --text-subtle:   #7a8098;
  --text-faint:    #565b71;

  --brand:         #8d8cf3;
  --brand-600:     #6d6ce8;
  --brand-700:     #5754d6;
  --brand-50:      rgba(141,140,243,.12);
  --brand-100:     rgba(141,140,243,.22);
  --ring:          rgba(141,140,243,.28);

  --gold:          #d9b265;
  --gold-600:      #b08a3e;
  --gold-50:       rgba(217,178,101,.12);

  --ok:    #4ade80;
  --warn:  #f0b057;
  --err:   #f47f7f;
  --info:  #5cb1f0;
  --ok-50:    rgba(26,127,77,.14);
  --warn-50:  rgba(178,106,5,.14);
  --err-50:   rgba(173,31,31,.14);
  --info-50:  rgba(13,111,184,.14);

  --shadow-xs: 0 1px 1px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.35);
  --shadow:    0 8px 32px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.4);
  --shadow-lg: 0 30px 60px rgba(0,0,0,.65);
  --shadow-inset: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--text); }

/* ---------- view size (user-selectable UI scale) ----------
   Scales the whole rem-based UI by adjusting the root font-size. Set as a
   class on <html> (persisted in localStorage; applied pre-paint by the boot
   script in base_app.html). Default = no class = the browser's base size.
   Percentages keep the user's own browser font preference as the baseline. */
html.lex-view-sm { font-size: 90%; }
html.lex-view-lg { font-size: 110%; }
html.lex-view-xl { font-size: 120%; }

body {
  font-family: var(--font-sans);
  font-feature-settings: "cv11","ss01","ss02","tnum","zero";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.006em;
}

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-600); }
hr { border-color: var(--border); opacity: 1; }

.text-muted  { color: var(--text-muted) !important; }
.text-subtle { color: var(--text-subtle); }
.text-faint  { color: var(--text-faint); }
.font-mono   { font-family: var(--font-mono); }
.font-serif  { font-family: var(--font-serif); font-feature-settings: "ss01"; }
.font-tabular { font-variant-numeric: tabular-nums; }

.display-serif {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.022em;
  font-feature-settings: "ss01","ss02";
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-subtle);
}
.eyebrow::before {
  content: ""; width: 18px; height: 1px; background: var(--text-subtle);
  display: inline-block;
}
.eyebrow--gold { color: var(--gold-600); }
.eyebrow--gold::before { background: var(--gold); }

::selection { background: var(--brand-100); color: var(--brand-700); }
[data-theme="dark"] ::selection { background: rgba(141,140,243,.32); color: #fff; }

/* ---------- buttons ---------- */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 500;
  padding: .55rem 1.05rem;
  font-size: .92rem;
  border: 1px solid transparent;
  transition: background-color .14s, color .14s, border-color .14s, transform .04s, box-shadow .14s;
  letter-spacing: -.003em;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }

.btn-primary {
  background: var(--brand); border-color: var(--brand); color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

.btn-dark { background: var(--surface-ink); border-color: var(--surface-ink); color: var(--ink-fg); }
.btn-dark:hover { background: #1b1f33; border-color: #1b1f33; color: #fff; }

.btn-outline-secondary {
  background: var(--surface); border-color: var(--border-strong); color: var(--text);
}
.btn-outline-secondary:hover { background: var(--bg-elev-2); color: var(--text); border-color: var(--border-strong); }

.btn-ghost {
  background: transparent; color: var(--text-muted); border-color: transparent;
}
.btn-ghost:hover { background: var(--bg-elev-2); color: var(--text); }

.btn-gold {
  background: var(--gold); border-color: var(--gold); color: #fff;
}
.btn-gold:hover { background: var(--gold-600); border-color: var(--gold-600); color: #fff; }

.btn-danger {
  background: var(--danger, #dc2626); border-color: var(--danger, #dc2626); color: #fff;
}
.btn-danger:hover { background: var(--danger-600, #b91c1c); border-color: var(--danger-600, #b91c1c); color: #fff; }

.btn-sm { padding: .35rem .75rem; font-size: .82rem; border-radius: var(--radius-xs); }
.btn-lg { padding: .8rem 1.4rem; font-size: 1rem; border-radius: var(--radius); }

.btn .icon { width: 16px; height: 16px; vertical-align: -.18em; }
.btn--with-icon { display: inline-flex; align-items: center; gap: .5rem; }

/* ----- standard back navigation control ----- */
.back-link {
  display: inline-flex; align-items: center; gap: .3rem;
  margin-bottom: .9rem;
  padding: .28rem .55rem .28rem .4rem;
  font-size: .85rem; font-weight: 500;
  color: var(--text-muted);
  background: transparent; border-radius: var(--radius-sm);
  transition: background-color .14s, color .14s;
}
.back-link:hover { background: var(--bg-elev-2); color: var(--text); }
.back-link .icon { width: 16px; height: 16px; }

.segmented {
  display: inline-flex; padding: 3px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  gap: 2px;
}
.segmented__item {
  border: 0; background: transparent;
  padding: .35rem .85rem; border-radius: 8px;
  font-size: .85rem; font-weight: 500;
  color: var(--text-muted); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: .4rem;
}
.segmented__item:hover { color: var(--text); }
.segmented__item.is-active {
  background: var(--brand-50); color: var(--brand);
  box-shadow: var(--shadow-sm);
}

/* Prominent, primary-navigation variant of the segmented control — used for
   the Automations sub-tabs (Automation · Scheduled · Activity). */
.segmented--tabs {
  padding: 4px; border-radius: 12px; gap: 4px;
}
.segmented--tabs .segmented__item {
  padding: .6rem 1.4rem; font-size: .98rem; font-weight: 600;
  letter-spacing: .01em;
}
.segmented--tabs .segmented__item.is-active {
  background: var(--brand); color: #fff; box-shadow: var(--shadow);
}

/* ---------- forms ---------- */
.form-control, .form-select {
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: .65rem .85rem;
  font-size: .92rem;
  transition: border-color .12s, box-shadow .12s, background-color .12s;
}
.form-control::placeholder { color: var(--text-faint); }
.form-control:focus, .form-select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring);
  background-color: var(--surface);
  color: var(--text);
}

/* Non-editable fields: keep readable contrast in both themes.
   Bootstrap's default :disabled / [readonly] background is light gray, which
   collides with our dark-theme light text and produces white-on-white. */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.form-select[readonly],
textarea.form-control:disabled,
textarea.form-control[readonly] {
  background-color: var(--bg-elev-2);
  color: var(--text-muted);
  border-color: var(--border);
  opacity: 1;
}
.form-control:disabled,
.form-select:disabled {
  cursor: not-allowed;
}

/* Restore chevron on <select> — the shared rule above sets background-color
   only, so the SVG arrow needs to be reapplied here to mark dropdowns visually
   distinct from text inputs. */
.form-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237f8497' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: 14px 14px;
  padding-right: 2.4rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
[data-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23aab0c4' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
/* Native date/time inputs: our explicit .form-control background/color stops
   WebKit inheriting the :root dark color-scheme, so the calendar-picker icon
   (and spin buttons) render dark-on-dark and vanish. Pin the scheme on the
   element itself so the UA draws its internal parts in the matching theme. */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="week"] {
  color-scheme: dark;
}
/* Native dropdown popups (the open <option> list) inherit the select's text
   color but are drawn on the OS panel — in dark mode that's light text on a
   white panel, so dial codes / country names go invisible. Pin both so the
   options stay legible in either theme. */
.form-select option,
.form-select optgroup {
  background-color: var(--surface);
  color: var(--text);
}
.form-select-sm {
  background-position: right .65rem center;
  background-size: 12px 12px;
  padding-right: 2rem;
}
.form-label { font-weight: 500; color: var(--text); margin-bottom: .35rem; font-size: .88rem; }
.form-text  { color: var(--text-muted); }

.input-with-icon { position: relative; }
.input-with-icon .icon {
  position: absolute; left: .85rem; top: 50%;
  width: 16px; height: 16px;
  transform: translateY(-50%); color: var(--text-subtle); pointer-events: none;
}
.input-with-icon .form-control { padding-left: 2.4rem; }

/* ---------- cards / surfaces ---------- */
.surface {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.surface--padded { padding: 1.75rem; }
.surface--lg     { border-radius: var(--radius-xl); padding: 2.25rem; }
.surface--flush  { padding: 0; overflow: hidden; }
.surface--quiet  { background: var(--bg-elev-2); box-shadow: none; }
.surface--ink    { background: var(--surface-ink); color: var(--ink-fg); border-color: color-mix(in srgb, var(--ink-fg) 12%, transparent); }
.surface--ink * { color: var(--ink-fg); }
.surface--ink .text-muted { color: color-mix(in srgb, var(--ink-fg) 70%, transparent) !important; }
.surface--ink .text-subtle { color: color-mix(in srgb, var(--ink-fg) 55%, transparent); }
.surface--ink .btn-ghost {
  background: color-mix(in srgb, var(--ink-fg) 5%, transparent);
  border-color: color-mix(in srgb, var(--ink-fg) 14%, transparent);
  color: color-mix(in srgb, var(--ink-fg) 85%, transparent);
}
.surface--ink .btn-ghost:hover {
  background: color-mix(in srgb, var(--ink-fg) 12%, transparent);
  color: var(--ink-fg);
}

/* ---------- settings cards ----------
 * Shared by the profile, org settings and Regulatory Monitor screens. A card is
 * a titled section (__head) over a stack of labelled field groups (__body >
 * .settings-group); groups are divided by a rule, which --last drops. Spacing
 * here is the 4px scale (.5/.75/1/1.25/1.75rem) — keep new values on it.
 */
.settings-card__head { margin-bottom: 1.25rem; }
.settings-card__head h2 {
  font-size: 1.05rem;
  font-weight: 650;
  margin: 0 0 .25rem;
  letter-spacing: -.01em;
}
.settings-card__head p {
  color: var(--text-subtle);
  font-size: .875rem;
  line-height: 1.5;
  margin: 0;
  max-width: 68ch;
}

.settings-card__body { display: flex; flex-direction: column; }

.settings-group {
  padding-bottom: 1.25rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
/* Last group in a card never carries a trailing rule, with or without the
   explicit modifier — templates are inconsistent about setting it. */
.settings-group:last-child,
.settings-group--last {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}

.settings-group__label {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-subtle);
  margin-bottom: .75rem;
}

.surface__header {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.surface__body { padding: 1.5rem; }
.surface__footer {
  padding: .85rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--bg-elev-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* KPI card — bold typographic, light gold underline on the value */
.kpi {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.25rem;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  position: relative; overflow: hidden;
}
.kpi__label  { color: var(--text-subtle); font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.kpi__value  {
  font-family: var(--font-serif);
  font-weight: 500; font-size: 2.15rem; letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.kpi__delta  { font-size: .82rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: .35rem; margin-top: .25rem; }
.kpi__delta.up   { color: var(--ok); }
.kpi__delta.down { color: var(--err); }
.kpi__delta.flat { color: var(--text-subtle); }
.kpi__spark {
  margin-top: .5rem; height: 28px;
  background: linear-gradient(180deg, var(--brand-50) 0%, transparent 100%);
  border-radius: 6px;
}

/* ---------- layout shell ---------- */
:root { --topbar-h: 52px; }
/* The top bar lives inside the content column (right of the sidebar), so
   the shell itself stays full-height and the sidebar spans the full window
   independently of the top bar.

   The bottom status bar is `position: fixed`, so it doesn't occupy flow
   space — we reserve room for it explicitly here by subtracting
   `--statusbar-h` from both the shell's min-height and the sidebar's
   height. Without this the sidebar (and any anchored bottom items in
   the content column) render BEHIND the bar. The `, 0px` fallback keeps
   the math safe on pages that don't render the status bar. */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: calc(100dvh - var(--statusbar-h, 0px));
  transition: grid-template-columns .18s ease;
  visibility: visible !important;
}
.app-shell.is-collapsed,
html.lex-sidebar-collapsed .app-shell { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
.app-shell__content { min-width: 0; }

/* Settings & Account surface — sidebar-free shell (base_settings.html). Single
   column, no sidebar; the slim top bar reuses .focus-topbar (see AI run pages). */
.app-shell--settings { grid-template-columns: 1fr; }

/* Back control — a compact horizontal pill (icon + label on one line). */
.settings-back {
  display: inline-flex; align-items: center; gap: .4rem;
  height: 34px; padding: 0 .8rem 0 .55rem;
  border-radius: 9px;
  background: var(--bg-elev-2); color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: .875rem; font-weight: 500; line-height: 1;
  transition: background-color .14s, color .14s, border-color .14s, transform .04s;
}
.settings-back:hover { background: var(--bg-tint); color: var(--text); border-color: var(--border-strong); }
.settings-back:active { transform: translateY(1px); }
.settings-back svg { flex: 0 0 auto; }

/* Right side of the settings top bar + its Sign out button. */
.settings-topbar__right { margin-left: auto; }
.settings-signout {
  display: inline-flex; align-items: center; gap: .45rem;
  height: 34px; padding: 0 .85rem;
  border-radius: 9px;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: .875rem; font-weight: 500; line-height: 1; cursor: pointer;
  transition: background-color .14s, color .14s, border-color .14s;
}
.settings-signout:hover {
  color: var(--danger, #dc2626);
  border-color: color-mix(in srgb, var(--danger, #dc2626) 45%, var(--border));
  background: color-mix(in srgb, var(--danger, #dc2626) 8%, transparent);
}
.settings-signout svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* ---- Settings left nav rail -------------------------------------------- */
/* The account-area switch (.settings-tabs--primary) + the current area's
   sub-nav (.dock) are rendered inside the page content by the nav partials,
   then pulled out into a fixed vertical menu panel on the left. Content is
   padded to clear it. On mobile the rail collapses to a horizontal scroller. */
.app-shell--settings { --settings-rail-w: 252px; --settings-topbar-h: 53px; }

.settings-railnav {
  position: fixed; z-index: 20;
  top: var(--settings-topbar-h); left: 0; bottom: var(--statusbar-h, 0px);
  width: var(--settings-rail-w);
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1rem .7rem 1.25rem;
  background: var(--bg-elev); border-right: 1px solid var(--border);
  overflow-y: auto; overscroll-behavior: contain;
}

/* Each area group: an uppercase title + its sub-links. */
.settings-nav-group { display: flex; flex-direction: column; }
.settings-nav-group + .settings-nav-group {
  margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--border);
}
.settings-nav-group__title {
  padding: .3rem .65rem .35rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-faint); text-decoration: none;
}
.settings-nav-group__title:hover { color: var(--text-muted); }
.settings-nav-group__title.is-current { color: var(--brand); }

.settings-nav-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .05rem;
}
.settings-nav-link {
  display: block; padding: .45rem .65rem; border-radius: 8px;
  font-size: .9rem; font-weight: 500; color: var(--text-muted);
  text-decoration: none; white-space: nowrap;
  transition: background-color .12s, color .12s;
}
.settings-nav-link:hover { background: var(--bg-elev-2); color: var(--text); }
.settings-nav-link.is-active { background: var(--surface-ink); color: var(--ink-fg); }

/* Content clears the fixed rail on desktop. */
@media (min-width: 992px) {
  .settings-main.main {
    max-width: none; margin-inline: 0;
    padding-left: calc(var(--settings-rail-w) + clamp(1.25rem, 3vw, 2.5rem));
    padding-right: clamp(1.25rem, 3vw, 2.5rem);
  }
}

/* Mobile: rail sits above the content; each group's links scroll horizontally. */
@media (max-width: 991.98px) {
  .settings-railnav {
    position: static; inset: auto; width: auto;
    border-right: 0; border-bottom: 1px solid var(--border);
    padding: .5rem 0 .75rem; margin-bottom: 1rem; overflow: visible;
  }
  .settings-nav-list {
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto; gap: .25rem;
  }
  .settings-nav-link { flex: 0 0 auto; }
}

.sidebar {
  background: var(--bg-elev);
  border-right: 1px solid var(--border);
  padding: 0 .85rem 1rem;
  position: sticky; top: 0;
  height: calc(100dvh - var(--statusbar-h, 0px));
  overflow-y: auto; overflow-x: hidden;
  transition: padding .18s ease;
  display: flex; flex-direction: column;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
.sidebar:hover::-webkit-scrollbar-thumb { background: var(--border-strong); }

.sidebar__header {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  /* Match the top bar: same height + bottom border, full-bleed across the
     sidebar's horizontal padding, so the logo sits on the top bar's line and
     the seam runs continuously into the content's top bar. */
  height: var(--topbar-h);
  flex: 0 0 var(--topbar-h);
  margin: 0 -.85rem .75rem;
  padding: 0 .85rem;
  border-bottom: 1px solid var(--border);
}
.sidebar__brand {
  display: flex; align-items: center; gap: .65rem;
  font-family: var(--font-serif);
  font-weight: 600; font-size: 1.18rem;
  /* .65rem left inset == the nav link padding, so the logo/mark sits in the
     exact same column as every nav icon — identical in expanded and collapsed. */
  padding: .25rem .65rem;
  letter-spacing: -.022em;
  color: var(--text); text-decoration: none;
  min-width: 0; flex: 1;
}
.sidebar__brand:hover { color: var(--text); }
.sidebar__brand-mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--grad-ink);
  display: grid; place-items: center; color: #fff; font-weight: 700;
  flex: 0 0 30px;
  font-family: var(--font-serif);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.18);
}
.sidebar__brand-mark::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, transparent 55%, rgba(217,178,101,.55));
  mix-blend-mode: overlay;
}
.sidebar__logo { display: block; flex: 0 0 auto; }
.sidebar__logo--full { height: 40px; width: auto; max-width: 80%; }
.sidebar__logo--short { width: 26px; height: 26px; display: none; }
/* Dark mode swaps to a purpose-built dark logo (light wordmark, dark badge
   tile with the white "L" preserved). The old `filter: invert(1)` flipped the
   whole image, turning the badge into a white tile with a black "L" — i.e. a
   "reversed", muddy mark. Swapping the source via `content` keeps the badge
   identity intact and the wordmark legible. */
[data-theme="dark"] .sidebar__logo--full  { content: url("../img/logo/new-logo-dark.svg"); }
[data-theme="dark"] .sidebar__logo--short { content: url("../img/logo/new-short-dark.svg"); }
.sidebar__collapse {
  width: 30px; height: 30px;
  border: 1px solid var(--border-strong);
  background: var(--bg-elev-2);
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--text-muted);
  flex: 0 0 30px;
  cursor: pointer;
  transition: transform .18s ease, background-color .12s, color .12s, border-color .12s;
}
.sidebar__collapse:hover { background: var(--brand-50); color: var(--brand); border-color: var(--brand-100); }
.sidebar__collapse:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
.sidebar__collapse .icon { width: 16px; height: 16px; }

.sidebar__nav { margin-top: .25rem; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.sidebar__section {
  margin-top: .45rem;
  padding-top: .45rem;
  border-top: 1px solid var(--border);
}
.sidebar__section--bottom { margin-top: auto; }
.sidebar__section-label {
  font-size: .66rem; font-weight: 700; letter-spacing: .16em;
  color: var(--text); text-transform: uppercase;
  padding: 0 .6rem .3rem;
  display: flex; align-items: center; gap: .4rem;
}
.sidebar__section-tag {
  font-size: .6rem; font-weight: 600; letter-spacing: .08em;
  padding: 1px 6px; border-radius: 999px; margin-left: 6px;
  background: var(--bg-elev-2); color: var(--text-muted);
  text-transform: uppercase;
}
.sidebar__section-tag--beta { background: var(--info-50); color: var(--info); letter-spacing: .04em; }
.sidebar__section-toggle {
  width: 100%; border: 0; background: transparent;
  font-family: inherit; cursor: pointer; text-align: left;
  justify-content: space-between;
  transition: color .12s;
}
.sidebar__section-toggle:hover { color: var(--brand); }
.sidebar__section-chevron {
  width: 14px; height: 14px; flex: 0 0 14px;
  transition: transform .15s ease;
}
.sidebar__section--collapsible.is-collapsed .sidebar__section-chevron {
  transform: rotate(-90deg);
}
.sidebar__section--collapsible.is-collapsed .sidebar__section-items {
  display: none;
}
/* Pre-paint accordion: base_app.html stamps `lex-sb-open-<key>` on <html> for
   the persisted open group so it renders expanded before app.js runs (no flash).
   One rule per collapsible group key. */
html.lex-sb-open-aid          .sidebar__section[data-section-key="aid"].is-collapsed .sidebar__section-items,
html.lex-sb-open-mira_group   .sidebar__section[data-section-key="mira_group"].is-collapsed .sidebar__section-items,
html.lex-sb-open-lex_search   .sidebar__section[data-section-key="lex_search"].is-collapsed .sidebar__section-items,
html.lex-sb-open-library      .sidebar__section[data-section-key="library"].is-collapsed .sidebar__section-items,
html.lex-sb-open-clm          .sidebar__section[data-section-key="clm"].is-collapsed .sidebar__section-items,
html.lex-sb-open-matter_mgmt  .sidebar__section[data-section-key="matter_mgmt"].is-collapsed .sidebar__section-items,
html.lex-sb-open-integrations .sidebar__section[data-section-key="integrations"].is-collapsed .sidebar__section-items {
  display: block;
}
html.lex-sb-open-aid          .sidebar__section[data-section-key="aid"].is-collapsed .sidebar__section-chevron,
html.lex-sb-open-mira_group   .sidebar__section[data-section-key="mira_group"].is-collapsed .sidebar__section-chevron,
html.lex-sb-open-lex_search   .sidebar__section[data-section-key="lex_search"].is-collapsed .sidebar__section-chevron,
html.lex-sb-open-library      .sidebar__section[data-section-key="library"].is-collapsed .sidebar__section-chevron,
html.lex-sb-open-clm          .sidebar__section[data-section-key="clm"].is-collapsed .sidebar__section-chevron,
html.lex-sb-open-matter_mgmt  .sidebar__section[data-section-key="matter_mgmt"].is-collapsed .sidebar__section-chevron,
html.lex-sb-open-integrations .sidebar__section[data-section-key="integrations"].is-collapsed .sidebar__section-chevron {
  transform: none;
}
.app-shell.is-collapsed .sidebar__section--collapsible.is-collapsed .sidebar__section-items,
html.lex-sidebar-collapsed .sidebar__section--collapsible.is-collapsed .sidebar__section-items {
  display: block;
}
.sidebar__link {
  position: relative;
  display: flex; align-items: center; gap: .65rem;
  padding: .33rem .65rem;
  border-radius: 9px;
  color: var(--text-muted);
  font-weight: 500; font-size: .9rem; line-height: 1.25;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .12s, color .12s;
}
.sidebar__link--soon { opacity: .7; }
.sidebar__link--soon[aria-disabled="true"] {
  color: var(--text-faint);
  cursor: default;
  opacity: .55;
}
.sidebar__link--soon[aria-disabled="true"]:hover { background: transparent; color: var(--text-faint); }
/* Locked feature: shown but not usable, with a trailing lock glyph (the
   "show but disable" org option). Reuses the muted --soon treatment. */
.sidebar__lock { margin-left: auto; display: inline-flex; flex: 0 0 auto; opacity: .8; }
.sidebar__lock svg { width: 14px; height: 14px; }
.sidebar__link--locked { cursor: default; }
/* When the row still has a destination it links to the feature-unavailable
   page, so it reads as restricted-but-explorable rather than inert: pointer
   cursor, and it brightens on hover the way a live row does. */
a.sidebar__link--locked { cursor: pointer; }
a.sidebar__link--locked:hover,
a.sidebar__link--locked:focus-visible {
  opacity: .85;
  color: var(--text-muted);
  background: var(--bg-elev-2);
}
a.sidebar__link--locked:hover .sidebar__lock { opacity: 1; }

/* Right-aligned circular % loader: shown by JS while files under this nav item's
   surface are processing (Library OCR / KB indexing). A determinate conic ring
   (the masked donut shows whatever's behind it, so it survives hover/active bg
   changes) with the percentage in the centre. */
.sidebar__progress {
  margin-left: auto; flex: 0 0 auto;
  position: relative; width: 20px; height: 20px;
}
.sidebar__progress[hidden] { display: none; }
.sidebar__progress::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--brand) calc(var(--p, 0) * 3.6deg),
              color-mix(in srgb, currentColor 22%, transparent) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent 6px, #000 6.5px);
          mask: radial-gradient(farthest-side, transparent 6px, #000 6.5px);
}
/* Indeterminate (no real % yet) → gentle spin so it still reads as "working". */
.sidebar__progress.is-indeterminate::before {
  background: conic-gradient(var(--brand) 90deg,
              color-mix(in srgb, currentColor 22%, transparent) 0);
  animation: spin .8s linear infinite;
}
.sidebar__progress > span {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 7px; font-weight: 700; line-height: 1; color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.sidebar__link:hover { background: var(--bg-elev-2); color: var(--text); }
.sidebar__link.active {
  background: var(--brand-50); color: var(--brand);
  box-shadow: inset 0 0 0 1px rgba(59,58,166,.08);
}
.sidebar__link.active::before {
  content: ""; position: absolute; left: -1rem; top: 50%;
  width: 3px; height: 18px; border-radius: 0 3px 3px 0;
  background: var(--brand);
  transform: translateY(-50%);
}
.sidebar__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar__label b { font-weight: 600; color: var(--text); }
.sidebar__label .sidebar__sub {
  font-weight: 400;
  color: var(--text-subtle);
}
.sidebar__label .sidebar__sub::before {
  content: "\00B7";
  margin: 0 .4em;
  color: var(--text-faint);
}
.sidebar__link.active .sidebar__label b,
.sidebar__link.active .sidebar__label .sidebar__sub { color: inherit; }
.sidebar__link .icon { width: 18px; height: 18px; flex: 0 0 18px; }
.sidebar__link-mark {
  width: 18px; height: 18px; flex: 0 0 18px;
  border-radius: 5px;
  background: var(--grad-brand);
  color: #fff; font-weight: 700; font-size: .65rem;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.sidebar__link-mark--ghost {
  background: transparent;
  color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--border);
  font-weight: 600; font-size: .85rem; line-height: 1;
}
.sidebar__link:hover .sidebar__link-mark--ghost {
  color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong);
}
button.sidebar__link {
  width: 100%; border: 0; background: transparent;
  font-family: inherit; cursor: pointer; text-align: left;
}
.sidebar__link--logout { color: var(--text-muted); margin-top: 0; width: 100%; }
.sidebar__link--logout:hover { background: var(--danger-50, rgba(220,38,38,.08)); color: var(--danger, #dc2626); }
.sidebar__footer {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  padding-top: .6rem;
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  z-index: 1;
}
.sidebar__footer form { width: 100%; }
.sidebar__link-badge {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: .7rem; font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg-elev-2); color: var(--text-muted);
}
.sidebar__link.active .sidebar__link-badge { background: rgba(59,58,166,.12); color: var(--brand); }
.sidebar__link-badge--beta {
  background: var(--info-50); color: var(--info);
  text-transform: uppercase; letter-spacing: .04em;
}
.sidebar__link.active .sidebar__link-badge--beta { background: var(--info-50); color: var(--info); }
.sidebar__link-badge--new {
  background: var(--success-50, rgba(16,185,129,.12));
  color: var(--success, #10b981);
  text-transform: uppercase; letter-spacing: .04em;
}
.sidebar__link.active .sidebar__link-badge--new {
  background: var(--success-50, rgba(16,185,129,.12));
  color: var(--success, #10b981);
}
.sidebar__link-badge--count {
  font-variant-numeric: tabular-nums;
  min-width: 1.25rem;
  text-align: center;
  padding: 1px 6px;
}
.app-shell.is-collapsed .sidebar__link-badge,
html.lex-sidebar-collapsed .sidebar__link-badge { display: none; }

.org-switcher {
  width: 100%;
  display: flex; align-items: center; gap: .65rem;
  padding: .65rem;
  border-radius: var(--radius);
  background: var(--bg-elev-2); border: 1px solid var(--border);
  margin: .55rem 0 1rem;
  text-align: left; color: var(--text);
  transition: background-color .12s, border-color .12s;
}
.org-switcher:hover { background: var(--bg-elev); border-color: var(--border-strong); }
.org-switcher__mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--grad-brand);
  color: white; font-weight: 700; font-size: .82rem;
  display: grid; place-items: center; flex: 0 0 30px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.org-switcher__name { font-weight: 600; font-size: .92rem; letter-spacing: -.005em; }
.org-switcher__plan { font-size: .7rem; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }

/* ---------- collapsed sidebar variant ---------- */
.app-shell.is-collapsed .sidebar,
html.lex-sidebar-collapsed .sidebar { padding: 0 .85rem 1.25rem; }
.app-shell.is-collapsed .sidebar__label,
html.lex-sidebar-collapsed .sidebar__label { display: none; }
/* Minimised: hide the Lexlegis logo entirely. The header then keeps the SAME
   fixed top-bar height as expanded (only the collapse button remains), so the
   nav below starts at the same vertical position — nothing is pushed down. */
.app-shell.is-collapsed .sidebar__brand,
html.lex-sidebar-collapsed .sidebar__brand { display: none; }
.app-shell.is-collapsed .sidebar__collapse,
html.lex-sidebar-collapsed .sidebar__collapse { transform: rotate(180deg); margin-left: .65rem; }
/* Keep the expanded header geometry (row, fixed height, full-bleed seam); just
   left-align the lone collapse button into the icon column. */
.app-shell.is-collapsed .sidebar__header,
html.lex-sidebar-collapsed .sidebar__header { justify-content: flex-start; }
.app-shell.is-collapsed .org-switcher,
html.lex-sidebar-collapsed .org-switcher { justify-content: flex-start; padding: .65rem; }
/* Hide the group name but KEEP its height (both the plain label and the
   collapsible toggle carry .sidebar__section-label) so rows below don't shift
   up when collapsed. `display: flex` overrides the generic `.sidebar__label
   { display: none }` collapsed rule (the labels also carry that class) — that
   display:none removed them from layout, which is why the height vanished.
   nowrap+overflow keeps it to the same single-line height. */
.app-shell.is-collapsed .sidebar__section-label,
html.lex-sidebar-collapsed .sidebar__section-label {
  display: flex; visibility: hidden;
  white-space: nowrap; overflow: hidden; pointer-events: none;
}
/* Keep links at the SAME position as expanded — identical padding (both axes),
   just left-aligned. Different vertical padding would make every row taller and
   drift the whole list down, so match expanded's .33rem exactly. */
.app-shell.is-collapsed .sidebar__link,
html.lex-sidebar-collapsed .sidebar__link { justify-content: flex-start; padding: .33rem .65rem; }
/* Section spacing is inherited from the base rule (.45rem) so group gaps are the
   same in both states — no extra collapsed margin/padding that widens them. */
.app-shell.is-collapsed .sidebar__link.active::before,
html.lex-sidebar-collapsed .sidebar__link.active::before { display: none; }

.tooltip.lex-tip { --bs-tooltip-zindex: 1080; pointer-events: none; }
.tooltip.lex-tip .tooltip-inner {
  background: var(--surface-ink); color: var(--ink-fg);
  padding: .35rem .65rem; border-radius: 6px;
  font-size: .78rem; font-weight: 500; max-width: none;
  box-shadow: var(--shadow);
}
.tooltip.lex-tip .tooltip-arrow::before { border-right-color: var(--surface-ink); }
/* Help-badge tooltips sit above their label and wrap to a readable width. */
.tooltip.lex-tip.bs-tooltip-top .tooltip-inner,
.tooltip.lex-tip.bs-tooltip-auto .tooltip-inner { max-width: 16rem; text-align: left; }
.tooltip.lex-tip.bs-tooltip-top .tooltip-arrow::before { border-top-color: var(--surface-ink); }

/* "?" help badge next to a plan-limit label. */
.lex-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1rem; height: 1rem; margin-left: .3rem;
  border-radius: 50%; border: 1px solid var(--border, #cbd2dd);
  color: var(--muted, #6b7280); background: transparent;
  font-size: .68rem; font-weight: 700; line-height: 1; cursor: help;
  vertical-align: middle; user-select: none;
}
.lex-help:hover, .lex-help:focus { color: var(--ink, #111); border-color: currentColor; outline: none; }

/* Editorial popover — used for "why?" style explanations in forms.
   Rectangular, no arrow, theme-aware, comfortable reading width. */
.popover.lex-pop {
  --bs-popover-zindex: 1080;
  --bs-popover-max-width: 320px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
}
.popover.lex-pop .popover-arrow { display: none; }
.popover.lex-pop .popover-header {
  background: transparent;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: -.005em;
  padding: .65rem .85rem;
}
.popover.lex-pop .popover-header::before { display: none; }
.popover.lex-pop .popover-body {
  color: var(--text-muted);
  font-size: .82rem;
  line-height: 1.5;
  padding: .7rem .85rem .8rem;
}
[data-theme="dark"] .popover.lex-pop {
  background: var(--bg-elev-2);
  border-color: var(--border-strong);
  box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 6px 14px rgba(0,0,0,.45);
}

/* ---------- mobile menu trigger ---------- */
.mobile-menu-trigger {
  position: fixed; top: .75rem; left: .75rem; z-index: 1001;
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
}

.icon-btn {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent;
  color: var(--text-muted);
  position: relative;
  transition: background-color .12s, color .12s;
}
.icon-btn:hover { background: var(--bg-elev-2); color: var(--text); }
.icon-btn--dot::after {
  content: ""; position: absolute; top: 8px; right: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); border: 2px solid var(--bg-elev);
}

.kbd {
  font-family: var(--font-mono);
  font-size: .7rem; font-weight: 600;
  padding: 1px 6px; border-radius: 5px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text-subtle);
}

.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--grad-brand);
  color: white; font-weight: 600; font-size: .82rem;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.avatar--lg { width: 56px; height: 56px; font-size: 1.05rem; }
.avatar--xl { width: 72px; height: 72px; font-size: 1.4rem; border-radius: 18px; }
.avatar--square { border-radius: 9px; }
.avatar--photo {
  object-fit: cover;
  background: transparent;
  padding: 0;
}
/* Platform-owned (seeded) items: a neutral shield mark, not a person chip. */
.avatar--system {
  background: var(--bg-elev-2);
  color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--border);
}

.avatar-stack { display: inline-flex; }
.avatar-stack .avatar { width: 28px; height: 28px; font-size: .7rem; border: 2px solid var(--bg-elev); }
.avatar-stack .avatar + .avatar { margin-left: -.45rem; }

/* ---- Avatar / identity-image editor (users, orgs, teams) ------------- */
/* The chip with an overflow "edit" button and a dropdown of actions
   (upload / initials / colour / reset). Shared by the profile page and the
   org/team settings pages via templates/partials/_avatar_editor.html. */
.avatar-edit { position: relative; }
.avatar-edit__face {
  box-shadow: 0 6px 20px rgba(15,18,32,.18), inset 0 0 0 1px rgba(255,255,255,.18);
}
.avatar-edit__btn {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--bg-elev, #fff);
  background: var(--text, #0b0e17);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15,18,32,.20);
  transition: transform .12s ease, box-shadow .12s ease;
  padding: 0;
}
.avatar-edit__btn:hover,
.avatar-edit__btn:focus-visible {
  transform: scale(1.06);
  box-shadow: 0 6px 14px rgba(15,18,32,.26);
  outline: none;
}
.avatar-edit__btn .bi { font-size: 18px; line-height: 1; }

.avatar-edit__menu {
  min-width: 240px;
  padding: 6px;
  border: 1px solid var(--border, rgba(15,18,32,.08));
  border-radius: 12px;
}
.avatar-edit__menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: .92rem;
}
.avatar-edit__menu .dropdown-item:hover,
.avatar-edit__menu .dropdown-item:focus {
  background: var(--bg-elev-2, #f3f3ef);
}
.avatar-edit__menu .dropdown-item .bi {
  width: 16px;
  font-size: 15px;
  text-align: center;
  flex: 0 0 auto;
}
.avatar-edit__menu form { width: 100%; }
.avatar-edit__menu form .dropdown-item { width: 100%; }
.avatar-edit__menu .dropdown-divider { margin: 6px 4px; }
.avatar-edit__hint {
  color: var(--text-subtle, #6b7180);
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}

/* ---- Initials text input + colour swatch row ------------------------- */
.avatar-edit__colors { padding-inline: 10px; }
.avatar-edit__row-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-subtle, #6b7180);
  margin-bottom: 6px;
}
.avatar-edit__initials-input { max-width: 5.5rem; text-transform: uppercase; }
.avatar-edit__swatches {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 6px;
}
.avatar-edit__swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(15,18,32,.12);
  padding: 0;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}
.avatar-edit__swatch:hover,
.avatar-edit__swatch:focus-visible {
  transform: scale(1.1);
  outline: none;
}
.avatar-edit__swatch.is-active {
  box-shadow: 0 0 0 2px var(--bg-elev, #fff), 0 0 0 4px var(--text, #0b0e17);
}
.avatar-edit__swatch--default {
  background: var(--grad-brand, linear-gradient(135deg,#3b3aa6,#6d59d9,#06b6d4));
}

/* ---------- main ---------- */
.main { padding: 2rem clamp(1.5rem, 3.5vw, 3.25rem) 4rem; max-width: 1480px; margin-inline: auto; }

.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 2.25rem;
}
.page-header h1 {
  font-family: var(--font-serif);
  font-size: 2.05rem; font-weight: 500; letter-spacing: -.022em;
  margin: 0;
}
.page-header__sub { color: var(--text-muted); margin: .25rem 0 0; max-width: 60ch; }
.page-header__eyebrow { margin-bottom: .55rem; }

/* Horizontal tab strip used on settings sub-pages */
.settings-tabs {
  display: flex; flex-wrap: wrap; gap: .25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}
.settings-tabs__link {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem .9rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-weight: 500; font-size: .92rem;
  text-decoration: none;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.settings-tabs__link:hover {
  color: var(--text);
  background: var(--bg-elev-2);
  border-top-left-radius: 6px; border-top-right-radius: 6px;
}
.settings-tabs__link.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
.settings-tabs__link .icon { width: 16px; height: 16px; flex: 0 0 16px; }

/* Editorial hero panel */
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-2xl);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  margin-bottom: 2rem;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: var(--grain);
  opacity: .45; mix-blend-mode: multiply;
  pointer-events: none;
}
.hero__inner { position: relative; z-index: 1; display: grid; gap: 1.25rem; }
.hero__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.hero__greeting { display: flex; align-items: flex-start; gap: 1rem; }
.hero--ink .hero__avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.14); }
.hero__title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 500; letter-spacing: -.024em;
  margin: 0; line-height: 1.05;
}
.hero__sub {
  color: var(--text-muted);
  max-width: 64ch; font-size: 1.02rem;
}
.hero__icon {
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--brand);
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
}
.hero__icon svg { width: 28px; height: 28px; }
.hero__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.hero__view {
  position: absolute;
  right: clamp(1.5rem, 3vw, 2.5rem);
  bottom: clamp(1.5rem, 3vw, 2.5rem);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: .26rem .9rem;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: var(--radius-2xl);
  background: transparent;
  white-space: nowrap;
}
.hero__view-label {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.hero__view-name {
  font-family: var(--font-serif);
  font-size: .92rem;
  letter-spacing: .01em;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 10px rgba(4,8,20,.3);
}
.hero__stats {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}
.hero__stat-label { color: var(--text-subtle); font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.hero__stat-value { font-family: var(--font-serif); font-weight: 500; font-size: 1.75rem; letter-spacing: -.018em; }

.hero--indigo  { background:
  radial-gradient(800px 320px at -10% -10%, rgba(59,58,166,.12), transparent 60%),
  radial-gradient(600px 320px at 110% 110%, rgba(217,178,101,.10), transparent 60%),
  var(--bg-elev); }
.hero--violet  { background:
  radial-gradient(800px 320px at -10% -10%, rgba(124,58,237,.12), transparent 60%),
  radial-gradient(600px 320px at 110% 110%, rgba(34,211,238,.10), transparent 60%),
  var(--bg-elev); }
.hero--rose    { background:
  radial-gradient(800px 320px at -10% -10%, rgba(244,114,182,.12), transparent 60%),
  radial-gradient(600px 320px at 110% 110%, rgba(251,191,36,.10), transparent 60%),
  var(--bg-elev); }
.hero--amber   { background:
  radial-gradient(800px 320px at -10% -10%, rgba(245,158,11,.16), transparent 60%),
  radial-gradient(600px 320px at 110% 110%, rgba(99,102,241,.10), transparent 60%),
  var(--bg-elev); }
.hero--emerald { background:
  radial-gradient(800px 320px at -10% -10%, rgba(16,185,129,.14), transparent 60%),
  radial-gradient(600px 320px at 110% 110%, rgba(59,58,166,.08), transparent 60%),
  var(--bg-elev); }
.hero--sky     { background:
  radial-gradient(800px 320px at -10% -10%, rgba(14,165,233,.14), transparent 60%),
  radial-gradient(600px 320px at 110% 110%, rgba(99,102,241,.10), transparent 60%),
  var(--bg-elev); }
.hero--teal    { background:
  radial-gradient(800px 320px at -10% -10%, rgba(20,184,166,.14), transparent 60%),
  radial-gradient(600px 320px at 110% 110%, rgba(167,139,250,.10), transparent 60%),
  var(--bg-elev); }
.hero--fuchsia { background:
  radial-gradient(800px 320px at -10% -10%, rgba(217,70,239,.13), transparent 60%),
  radial-gradient(600px 320px at 110% 110%, rgba(34,211,238,.10), transparent 60%),
  var(--bg-elev); }
.hero--slate   { background:
  radial-gradient(800px 320px at -10% -10%, rgba(100,116,139,.16), transparent 60%),
  radial-gradient(600px 320px at 110% 110%, rgba(217,178,101,.10), transparent 60%),
  var(--bg-elev); }
.hero--ink {
  background:
    radial-gradient(900px 400px at 100% 0%, rgba(141,140,243,.40), transparent 62%),
    radial-gradient(700px 400px at 0% 100%, rgba(217,178,101,.24), transparent 62%),
    var(--grad-hero);
  color: #fff; border-color: rgba(255,255,255,.12);
}
.hero--ink .hero__title,
.hero--ink .hero__sub,
.hero--ink .hero__stat-value { color: #fff; }
.hero--ink .hero__sub { color: rgba(255,255,255,.78); }
.hero--ink .hero__stat-label { color: rgba(255,255,255,.55); }
.hero--ink .hero__icon { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); color: #fff; }
.hero--ink .hero__stats { border-top-color: rgba(255,255,255,.08); }

/* Hero CTA buttons. The BEM .btn--primary / .btn--ghost variants are used only
   on the dark ink hero (error pages + the feature-denied screen) and the global
   stylesheet doesn't otherwise define them, so a bare .btn would fall back to
   Bootstrap's dark body-colour text and vanish against the dark surface. Styled
   here for the dark hero so they stay legible regardless of the active theme;
   the gold fill carries dark ink text for contrast in both gold shades. */
.hero--ink .btn--primary {
  background: var(--gold); border-color: var(--gold);
  color: #1b1f33; box-shadow: var(--shadow-sm);
}
.hero--ink .btn--primary:hover {
  background: var(--gold-600); border-color: var(--gold-600); color: #1b1f33;
}
.hero--ink .btn--ghost {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.92);
}
.hero--ink .btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ---- weather / time-of-day hero sky ------------------------------------- */
/* Minimalist: the hero rides on the lifted `--grad-hero` navy base and the
   active sky only washes a single, subtle weather-tinted glow into the
   top-right corner — a quiet hint of conditions, not a full scene. The
   weather SVG art rides faintly on top. `.hero.sky--x` (specificity 0,2,0)
   overrides `.hero--ink`'s background; its white-text rules still apply. */
.hero.sky--morning  { background: radial-gradient(820px 380px at 100% 0%, rgba(255,184,120,.22), transparent 62%), var(--grad-hero); }
.hero.sky--noon     { background: radial-gradient(820px 380px at 100% 0%, rgba(110,178,240,.22), transparent 62%), var(--grad-hero); }
.hero.sky--evening  { background: radial-gradient(820px 380px at 100% 0%, rgba(240,140,108,.22), transparent 62%), var(--grad-hero); }
.hero.sky--night    { background: radial-gradient(820px 380px at 100% 0%, rgba(120,138,215,.20), transparent 62%), var(--grad-hero); }

.hero.sky--clear-day    { background: radial-gradient(820px 380px at 100% 0%, rgba(96,172,238,.24), transparent 62%), var(--grad-hero); }
.hero.sky--clear-night  { background: radial-gradient(820px 380px at 100% 0%, rgba(124,142,222,.20), transparent 62%), var(--grad-hero); }
.hero.sky--partly-day   { background: radial-gradient(820px 380px at 100% 0%, rgba(126,184,232,.22), transparent 62%), var(--grad-hero); }
.hero.sky--partly-night { background: radial-gradient(820px 380px at 100% 0%, rgba(120,138,212,.18), transparent 62%), var(--grad-hero); }
.hero.sky--clouds       { background: radial-gradient(820px 380px at 100% 0%, rgba(160,174,194,.20), transparent 62%), var(--grad-hero); }
.hero.sky--fog          { background: radial-gradient(820px 380px at 100% 0%, rgba(176,186,196,.18), transparent 62%), var(--grad-hero); }
.hero.sky--rain         { background: radial-gradient(820px 380px at 100% 0%, rgba(96,146,206,.22), transparent 62%), var(--grad-hero); }
.hero.sky--snow         { background: radial-gradient(820px 380px at 100% 0%, rgba(188,210,238,.22), transparent 62%), var(--grad-hero); }
.hero.sky--thunder      { background: radial-gradient(820px 380px at 100% 0%, rgba(154,124,218,.24), transparent 62%), var(--grad-hero); }

/* Decorative SVG art layer — above the gradient, below the content. */
.hero__sky {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden; border-radius: inherit;
}
.hero__wx {
  position: absolute; top: 0; right: 0;
  width: clamp(190px, 40%, 380px); height: 100%;
  opacity: .4;  /* faint, sketch-like — present but not loud */
}

/* Reveal only the SVG groups the active sky needs (opacity-cross-faded). */
.hero__wx .wx { opacity: 0; transition: opacity .5s ease; }
.sky--clear-day .wx--sun,
.sky--noon .wx--sun,
.sky--morning .wx--sun { opacity: 1; }
.sky--clear-night .wx--moon, .sky--clear-night .wx--stars,
.sky--night .wx--moon, .sky--night .wx--stars,
.sky--partly-night .wx--moon, .sky--partly-night .wx--stars { opacity: 1; }
.sky--partly-day .wx--sun, .sky--partly-day .wx--cloud { opacity: 1; }
.sky--partly-night .wx--cloud { opacity: .9; }
.sky--clouds .wx--cloud { opacity: 1; }
.sky--fog .wx--fog { opacity: 1; }
.sky--rain .wx--rain { opacity: 1; }
.sky--snow .wx--snow { opacity: 1; }
.sky--thunder .wx--thunder { opacity: 1; }

/* Time-of-day sun pose — independent of the weather condition, driven by the
   greeting's clock bands (`.tod--morning|day|evening`). A clear *summer*
   evening still resolves to a day sky (the sun's technically up), so without
   this the art would show a high-noon sun under "Good evening". Lowering and
   warming the sun for morning/evening keeps the celestial pose honest to the
   greeting while the weather chip stays accurate. */
.hero__wx .wx--sun { transition: opacity .5s ease, transform .6s ease, filter .6s ease; }
.tod--morning .wx--sun { transform: translateY(16px); filter: saturate(1.08) hue-rotate(-4deg); }
/* Evening is its own dusk scene — the bright sun is gone entirely (even when
   live weather resolved a still-sunlit "day" sky), replaced by a low horizon
   afterglow. Placed after the sky-driven reveals so it wins the 0,2,0 tie. */
.tod--evening .wx--sun { opacity: 0; }
.tod--evening .wx--dusk { opacity: 1; }

/* When live weather upgrades an evening/morning to a day sky, keep the warm
   corner wash instead of the cold blue clear-/partly-day one (specificity
   0,3,0 beats the 0,2,0 `.hero.sky--clear-day` rule above). */
.hero.tod--evening.sky--clear-day, .hero.tod--evening.sky--partly-day { background: radial-gradient(820px 380px at 100% 0%, rgba(240,140,108,.22), transparent 62%), var(--grad-hero); }
.hero.tod--morning.sky--clear-day, .hero.tod--morning.sky--partly-day { background: radial-gradient(820px 380px at 100% 0%, rgba(255,184,120,.22), transparent 62%), var(--grad-hero); }

/* Weather-art animations. */
.wx-rays { transform-box: fill-box; transform-origin: center; animation: wx-spin 26s linear infinite; }
@keyframes wx-spin { to { transform: rotate(360deg); } }
.wx-glow { transform-box: fill-box; transform-origin: center; animation: wx-pulse 4s ease-in-out infinite; }
@keyframes wx-pulse { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.1); } }
.wx-cloud-a { animation: wx-drift 9s ease-in-out infinite; }
.wx-cloud-b { animation: wx-drift 12s ease-in-out infinite reverse; }
@keyframes wx-drift { 0%,100% { transform: translateX(-4px); } 50% { transform: translateX(5px); } }
.wx-star { animation: wx-twinkle 3s ease-in-out infinite; }
@keyframes wx-twinkle { 0%,100% { opacity: .35; } 50% { opacity: 1; } }
.wx-drop { animation: wx-fall 1s linear infinite; }
@keyframes wx-fall { 0% { transform: translateY(-6px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(34px); opacity: 0; } }
.wx-flake { animation: wx-flake-fall 3s linear infinite; }
@keyframes wx-flake-fall { 0% { transform: translateY(-6px) translateX(0); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(42px) translateX(7px); opacity: 0; } }
.wx-bolt { animation: wx-bolt 3.2s steps(1, end) infinite; }
@keyframes wx-bolt { 0%,8%,100% { opacity: 0; } 3% { opacity: 1; } 6% { opacity: .2; } }
.wx-flash { animation: wx-flash 3.2s steps(1, end) infinite; }
@keyframes wx-flash { 0%,6%,100% { opacity: 0; } 2% { opacity: .4; } 4% { opacity: .08; } }

@media (prefers-reduced-motion: reduce) {
  .hero__wx * { animation: none !important; }
  .wx-drop, .wx-flake, .wx-bolt { opacity: 1; }
  .wx-flash { opacity: 0; }
}

/* Live weather chip in the hero meta row. */
.hero__meta { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.hero__weather {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .26rem .7rem; border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.24);
  color: #fff; font-size: .84rem; line-height: 1;
  text-shadow: 0 1px 8px rgba(4,8,20,.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero__weather i { font-size: 1rem; color: #fff; }
.hero__weather-temp { font-weight: 600; font-variant-numeric: tabular-nums; }
.hero__weather-sep { opacity: .55; }

/* ---- access-denied contacts -------------------------------------------- */
/* "Who can give you access" — shared by the full 403 page
   (errors/feature_denied.html, on the dark .hero--ink) and the AJAX popup
   (partials/_access_denied_modal.html, --compact, on a light modal surface). */
.access-contacts {
  margin-top: .5rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.access-contacts--compact {
  margin-top: 1rem; padding: 0; border: 0; background: transparent;
}
.access-contacts__title {
  font-family: var(--font-serif);
  font-size: 1.1rem; font-weight: 500; margin: 0 0 .25rem;
}
.access-contacts__hint {
  color: var(--text-subtle); font-size: .92rem; margin: 0 0 1rem;
}
.access-contacts__groups {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.access-contacts__role {
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-subtle); margin-bottom: .4rem;
}
.access-contacts__list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem;
}
.access-contacts__person { display: flex; flex-direction: column; gap: .1rem; }
.access-contacts__name { font-weight: 600; font-size: .95rem; }
.access-contacts__email {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .88rem; color: var(--gold-600); text-decoration: none;
  word-break: break-word;
}
.access-contacts__email:hover { text-decoration: underline; }

/* On the dark hero (the full 403 page) flip to light-on-dark. */
.hero--ink .access-contacts {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1);
}
.hero--ink .access-contacts__title,
.hero--ink .access-contacts__name { color: #fff; }
.hero--ink .access-contacts__hint { color: rgba(255,255,255,.62); }
.hero--ink .access-contacts__role { color: rgba(255,255,255,.55); }
.hero--ink .access-contacts__email { color: var(--gold); }

/* legacy surface-hero (still used a few spots) */
.surface-hero {
  display: flex; align-items: center; gap: 1.25rem;
  padding: 1.75rem;
  border-radius: var(--radius-2xl);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.25rem;
  position: relative; overflow: hidden;
}
.surface-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--grain); opacity: .4; mix-blend-mode: multiply;
}
.surface-hero > * { position: relative; z-index: 1; }
.surface-hero__icon {
  width: 60px; height: 60px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--brand);
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
}
.surface-hero__icon svg { width: 28px; height: 28px; }
.surface-hero--indigo  { background:
  radial-gradient(700px 280px at -10% -10%, rgba(59,58,166,.12), transparent 60%), var(--bg-elev); }
.surface-hero--violet  { background:
  radial-gradient(700px 280px at -10% -10%, rgba(124,58,237,.12), transparent 60%), var(--bg-elev); }
.surface-hero--rose    { background:
  radial-gradient(700px 280px at -10% -10%, rgba(244,114,182,.14), transparent 60%), var(--bg-elev); }
.surface-hero--amber   { background:
  radial-gradient(700px 280px at -10% -10%, rgba(245,158,11,.16), transparent 60%), var(--bg-elev); }
.surface-hero--emerald { background:
  radial-gradient(700px 280px at -10% -10%, rgba(16,185,129,.14), transparent 60%), var(--bg-elev); }
.surface-hero--sky     { background:
  radial-gradient(700px 280px at -10% -10%, rgba(14,165,233,.14), transparent 60%), var(--bg-elev); }
.surface-hero--teal    { background:
  radial-gradient(700px 280px at -10% -10%, rgba(20,184,166,.14), transparent 60%), var(--bg-elev); }
.surface-hero--fuchsia { background:
  radial-gradient(700px 280px at -10% -10%, rgba(217,70,239,.13), transparent 60%), var(--bg-elev); }
.surface-hero--slate   { background:
  radial-gradient(700px 280px at -10% -10%, rgba(100,116,139,.16), transparent 60%), var(--bg-elev); }

/* ---------- product card grid ---------- */
.product-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.product-card {
  display: flex; flex-direction: column; gap: .75rem;
  padding: 1.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  transition: transform .14s, box-shadow .14s, border-color .14s;
  color: var(--text);
  position: relative; overflow: hidden;
}
.product-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--brand-50) 0%, transparent 40%);
  opacity: 0; transition: opacity .14s;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--border-strong);
  color: var(--text);
}
.product-card:hover::before { opacity: .8; }
.product-card > * { position: relative; z-index: 1; }
.product-card__head { display: flex; align-items: center; gap: .65rem; }
.product-card__icon {
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--surface); color: var(--brand);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  box-shadow: var(--shadow-xs);
}
.product-card__icon svg { width: 20px; height: 20px; }
.product-card__name { font-weight: 600; letter-spacing: -.005em; }
.product-card__tag  { color: var(--text-muted); font-size: .88rem; line-height: 1.45; }
.product-card__cta {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; font-weight: 600; color: var(--brand);
  margin-top: auto;
}
/* Locked surface card: shown but disabled (the "show but disable" org option). */
.product-card--locked { opacity: .6; cursor: default; }
.product-card--locked:hover { transform: none; box-shadow: none; border-color: var(--border); }
.product-card--locked:hover::before { opacity: 0; }
.product-card__lock { margin-left: auto; display: inline-flex; color: var(--text-muted); }
.product-card__lock svg { width: 16px; height: 16px; }
.product-card__cta--locked { color: var(--text-muted); font-weight: 500; }

/* ---------- quickstart (org dashboard "Get started") ---------- */
.quickstart {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.qs-card {
  display: flex; flex-direction: column; gap: .85rem;
  padding: 1.35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
}
.qs-card__head { display: flex; align-items: center; gap: .7rem; }
.qs-card__icon {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: var(--surface); color: var(--brand);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  box-shadow: var(--shadow-xs);
}
.qs-card__icon svg { width: 20px; height: 20px; }
.qs-card__name { font-weight: 600; letter-spacing: -.005em; }
.qs-card__tag  { color: var(--text-muted); font-size: .8rem; }
.qs-card__intro { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--text); }
.qs-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .5rem;
}
.qs-steps li {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: .85rem; line-height: 1.4; color: var(--text-muted);
}
.qs-steps__num {
  flex: none; width: 20px; height: 20px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--brand); background: var(--brand-50);
  border: 1px solid var(--border);
}
.qs-card__cta {
  display: inline-flex; align-items: center; gap: .35rem;
  margin-top: auto; align-self: flex-start;
  padding: .5rem .9rem; border-radius: var(--radius);
  font-size: .82rem; font-weight: 600;
  color: #fff; background: var(--brand);
  text-decoration: none; transition: filter .14s, transform .14s;
}
.qs-card__cta:hover { filter: brightness(1.06); transform: translateY(-1px); color: #fff; }

/* ---------- auth pages ---------- */
.auth-shell {
  min-height: 100dvh;
  display: grid; grid-template-columns: 1fr;
  background: var(--bg);
}
@media (min-width: 992px) {
  .auth-shell { grid-template-columns: 1.05fr 1fr; }
}
.auth-shell__art {
  display: none; padding: 3rem;
  background:
    radial-gradient(900px 600px at 10% 10%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(700px 500px at 90% 80%, rgba(217,178,101,.16), transparent 60%),
    var(--grad-ink);
  color: #e7e9f1;
}
@media (min-width: 992px) { .auth-shell__art { display: flex; flex-direction: column; justify-content: space-between; } }
.auth-shell__art h2 {
  font-family: var(--font-serif); font-weight: 500;
  letter-spacing: -.022em; font-size: 2.2rem; max-width: 32ch;
}
.auth-shell__art p  { color: #a4a9bd; max-width: 44ch; }
.auth-shell__art-features { display: grid; gap: 1rem; margin-top: 2rem; }
.auth-shell__feature {
  display: flex; gap: .85rem; align-items: flex-start;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  padding: 1rem; border-radius: 14px;
}
.auth-shell__feature .icon { color: #a5b4fc; width: 22px; height: 22px; flex: 0 0 22px; }

.auth-shell__form {
  display: grid; align-items: center; justify-items: center;
  padding: 2rem 1.25rem;
}
.auth-card { width: 100%; max-width: 440px; }
.auth-card__brand {
  display: flex; align-items: center; gap: .65rem;
  font-family: var(--font-serif);
  font-weight: 600; font-size: 1.18rem;
  margin-bottom: 2.25rem;
  letter-spacing: -.018em;
}
/* Real SVG wordmark inside the auth brand link (light form card + dark art
   panel). Height-constrained so the wide logo scales down without the
   sidebar's `max-width: 80%` cap distorting it. */
.auth-card__logo  { height: 30px; width: auto; max-width: 170px; }
.auth-shell__logo { height: 32px; width: auto; max-width: 180px; display: block; flex: 0 0 auto; }
.auth-card h1 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -.022em; margin-bottom: .25rem; }
.auth-card p.lead { color: var(--text-muted); font-size: .98rem; }

.auth-divider {
  display: flex; align-items: center; gap: .75rem;
  color: var(--text-subtle); font-size: .8rem;
  margin: 1.25rem 0;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* ---------- signed-out landing ---------- */
body.signedout-page {
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(59,58,166,.06), transparent 60%),
    radial-gradient(700px 500px at 95% 110%, rgba(217,178,101,.08), transparent 60%),
    var(--bg);
  color: var(--text);
  min-height: 100dvh;
  font-family: var(--font-sans);
}

.so {
  min-height: 100dvh;
  max-width: 620px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 2rem;
}

.so__brand {
  display: inline-flex; align-items: center;
  text-decoration: none;
  justify-self: start;
}
.so__logo {
  height: 36px; width: auto;
  opacity: .92;
  transition: opacity .15s;
}
.so__brand:hover .so__logo { opacity: 1; }
[data-theme="dark"] .so__logo { filter: brightness(0) invert(1); }

.so__card {
  align-self: center;
  text-align: center;
  display: grid;
  gap: 1rem;
  justify-items: center;
}

.so__badge {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .7rem; border-radius: 999px;
  background: var(--gold-50);
  border: 1px solid rgba(176,138,62,.32);
  color: var(--gold-600); font-size: .75rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
}

.so__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(2rem, 5vw, 2.8rem);
  letter-spacing: -.028em; margin: 0; color: var(--text);
}

.so__lede {
  color: var(--text-muted); margin: 0;
  max-width: 48ch;
  font-size: 1rem; line-height: 1.55;
}

.so__actions {
  display: grid; gap: .6rem;
  width: 100%; max-width: 340px;
  margin-top: .75rem;
}
.so__btn { padding: .7rem 1rem; font-weight: 500; }

.btn-outline-light {
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
}
.btn-outline-light:hover {
  background: var(--bg-elev-2);
  color: var(--text);
  border-color: var(--border-strong);
}

.signedout-page .btn-ghost { color: var(--text-muted); }
.signedout-page .btn-ghost:hover { background: var(--bg-elev-2); color: var(--text); }

/* ----- rotating lawyer quote ----- */
.so__quote {
  margin: 1.25rem 0 0;
  padding: 1.25rem 1.25rem 1rem;
  max-width: 52ch;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  position: relative;
}
.so__quote-mark {
  width: 26px; height: 26px;
  color: var(--gold);
  opacity: .55;
  margin: -2px auto .5rem;
  display: block;
}
.so__quote-text {
  font-family: var(--font-serif);
  font-size: 1.08rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--text);
  margin: 0 0 .6rem;
  font-weight: 400;
  letter-spacing: -.005em;
}
.so__quote-author {
  font-size: .82rem;
  color: var(--text-subtle);
  letter-spacing: .01em;
}

/* ----- Kick-reason badge + details card shown when a fresh sign-in
        elsewhere on the same account knocks this browser out. ----- */
.so__badge--alert {
  background: var(--err-50);
  border-color: rgba(173,31,31,.32);
  color: var(--err);
}

.so__kick {
  width: 100%;
  max-width: 460px;
  text-align: left;
  margin-top: .25rem;
  padding: .9rem 1rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.so__kick-label {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: .5rem;
}
.so__kick-row {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}
.so__kick-row strong { color: var(--text); }
.so__kick-meta { color: var(--text-subtle); font-size: .82rem; }
.so__kick-when { text-align: right; }
.so__kick-ua {
  margin-top: .65rem;
  font-size: .78rem;
  color: var(--text-subtle);
}
.so__kick-ua summary { cursor: pointer; }
.so__kick-ua-text {
  margin-top: .35rem;
  color: var(--text-muted);
  word-break: break-all;
}
.so__hint {
  color: var(--text-subtle);
  font-size: .85rem;
  max-width: 48ch;
  margin: 0;
}
.so__hint strong { color: var(--text); }

/* ---------- Library surface tabs ---------- */
.lib-shell {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.lib-shell__content { min-width: 0; }

/* Horizontal tab strip — sits above the content so tables/cards get full width. */
.lib-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .1rem;
  border-bottom: 1px solid var(--border);
}
.lib-tabs__link {
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem .8rem;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  font-size: .9rem; font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.lib-tabs__link .icon { width: 16px; height: 16px; flex: 0 0 16px; }
.lib-tabs__label { min-width: 0; }
.lib-tabs__link:hover {
  color: var(--text);
  background: var(--bg-elev-2);
  border-top-left-radius: 6px; border-top-right-radius: 6px;
}
.lib-tabs__link.is-active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 600;
}

/* Thin divider between logical groups (Overview · Library · Masters). */
.lib-tabs__sep {
  flex: 0 0 auto;
  width: 1px; height: 18px;
  margin: 0 .4rem;
  background: var(--border);
}

.lib-tabs__count {
  flex: 0 0 auto;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--bg-elev-2);
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  text-align: center;
  border: 1px solid var(--border);
}
.lib-tabs__link:hover .lib-tabs__count {
  background: var(--surface);
  color: var(--text);
}
.lib-tabs__link.is-active .lib-tabs__count {
  background: var(--brand);
  color: #fff;
  border-color: transparent;
}

/* ---------- SSO buttons (Google / Microsoft) ---------- */
.sso-buttons {
  display: grid; gap: .6rem;
  margin-bottom: .25rem;
}
.sso-form { margin: 0; }
.sso-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  gap: .7rem;
  width: 100%;
  min-height: 46px;
  padding: .65rem 1rem;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: .94rem;
  font-weight: 500;
  letter-spacing: -.003em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: background-color .14s, border-color .14s, box-shadow .14s, transform .04s;
}
.sso-btn:hover {
  color: var(--text);
  background: var(--bg-elev);
  border-color: var(--text-subtle);
  box-shadow: var(--shadow-sm);
}
.sso-btn:active { transform: translateY(1px); }
.sso-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
.sso-btn__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: 0 0 20px;
}
.sso-btn__icon svg { width: 100%; height: 100%; display: block; }
.sso-btn__label { white-space: nowrap; }
.sso-btn__label strong { font-weight: 600; }
.sso-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

/* "Last used" pill — hint to returning users which option they picked
   previously. Pinned top-right of SSO buttons; an inline variant sits
   next to the "Forgot?" link, and a primary variant rides the blue
   "Sign in" button. */
.last-used-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  background: var(--brand-50, rgba(59, 58, 166, .1));
  color: var(--brand);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.5;
  border-radius: 999px;
  border: 1px solid rgba(59, 58, 166, .22);
  white-space: nowrap;
  pointer-events: none;
}
.last-used-pill::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brand);
}
/* Top-right corner of an SSO button. The .sso-btn is already
   position:relative, so this just absolute-positions inside it. */
.last-used-pill--corner {
  position: absolute;
  top: 6px;
  right: 8px;
}
/* Wrap the email input so the pill can dock inside the field's
   top-right corner without disturbing the input's own layout. */
.last-used-anchor { position: relative; }
.last-used-pill--field {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}

/* ---------- timeline ---------- */
.timeline { display: flex; flex-direction: column; }
.timeline__item {
  display: grid; grid-template-columns: 36px 1fr auto;
  gap: .85rem; padding: .95rem .25rem;
  border-bottom: 1px solid var(--border);
}
.timeline__item:last-child { border-bottom: none; }
/* Clickable rows link through to the run's output page. */
a.timeline__item--link {
  color: inherit; text-decoration: none;
  border-radius: 10px; transition: background .12s ease;
}
a.timeline__item--link:hover { background: var(--brand-50); }
a.timeline__item--link:hover .timeline__title { color: var(--brand); }
/* Linkable surface the viewer can't open — looks inert, toasts on click. */
.timeline__item--locked { cursor: not-allowed; }
.timeline__dot {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--brand-50); color: var(--brand);
  display: grid; place-items: center;
  border: 1px solid rgba(59,58,166,.08);
}
.timeline__dot svg { width: 16px; height: 16px; }
.timeline__title { font-weight: 500; letter-spacing: -.005em; }
.timeline__meta  { color: var(--text-subtle); font-size: .82rem; margin-top: 2px; }
.timeline__time  { color: var(--text-subtle); font-size: .82rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

.feed { display: flex; flex-direction: column; gap: .5rem; }
.feed__item {
  display: grid; grid-template-columns: 8px 1fr auto;
  gap: .85rem; padding: .75rem .9rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  align-items: center;
}
.feed__item:hover { border-color: var(--border-strong); }
.feed__bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.feed__bullet--gold { background: var(--gold); }
.feed__bullet--ok { background: var(--ok); }
.feed__bullet--warn { background: var(--warn); }
.feed__bullet--err { background: var(--err); }

/* ---------- empty state ---------- */
.empty-state {
  display: grid; place-items: center;
  padding: 4rem 1rem;
  background: var(--bg-elev);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-xl);
  text-align: center;
}
.empty-state__inner { max-width: 42ch; display: grid; gap: .65rem; justify-items: center; }
.empty-state__icon {
  width: 52px; height: 52px; border-radius: 16px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  color: var(--text-subtle);
  display: grid; place-items: center;
  margin-bottom: .25rem;
}
.empty-state h3 { font-family: var(--font-serif); font-weight: 500; letter-spacing: -.018em; margin: 0; }

/* ---------- pills / tags ---------- */
.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .22rem .65rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  background: var(--brand-50); color: var(--brand);
  border: 1px solid transparent;
}
.pill--neutral { background: var(--bg-elev-2); color: var(--text-muted); }
.pill--outline { background: transparent; border-color: var(--border-strong); color: var(--text-muted); }
.pill--ok      { background: var(--ok-50); color: var(--ok); }
.pill--warn    { background: var(--warn-50); color: var(--warn); }
.pill--err     { background: var(--err-50); color: var(--err); }
.pill--info    { background: var(--info-50); color: var(--info); }
.pill--gold    { background: var(--gold-50); color: var(--gold-600); }
.pill--dark    { background: var(--surface-ink); color: var(--ink-fg); }
.pill .dot     { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Closable output-type pill in the Ask composer. */
.compose__mode-pill-x {
  display: inline-flex; align-items: center; justify-content: center;
  margin: -.1rem -.28rem -.1rem .05rem; padding: 0;
  width: 16px; height: 16px; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
  opacity: .65; transition: opacity .12s ease, background-color .12s ease;
}
.compose__mode-pill-x:hover {
  opacity: 1; background: color-mix(in srgb, currentColor 18%, transparent);
}

.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .65rem; border-radius: 999px;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  font-size: .82rem; font-weight: 500; color: var(--text);
}
.chip:hover { background: var(--bg-elev-2); border-color: var(--border-strong); }
.chip--active { background: var(--surface-ink); color: var(--ink-fg); border-color: var(--surface-ink); }
/* An ACTIVE chip needs its own hover, and this rule must stay after the two
   above. `.chip:hover` (a class + a pseudo-class) outranks `.chip--active` (one
   class), so hovering an active chip repainted the BACKGROUND to --bg-elev-2
   while leaving the text at --ink-fg — which is the inverse foreground, meant
   for the dark --surface-ink fill. The result was white-on-near-white in the
   light theme and black-on-near-black in dark: the label vanished in both.
   Keep the ink pair intact and signal hover with opacity instead. */
.chip--active:hover,
.chip--active:focus-visible {
  background: var(--surface-ink);
  color: var(--ink-fg);
  border-color: var(--surface-ink);
  opacity: .85;
}

/* ---------- alerts ---------- */
.alert {
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--bg-elev);
  color: var(--text);
}
.alert-success { border-color: rgba(26,127,77,.25); background: var(--ok-50); color: var(--ok); }
.alert-danger  { border-color: rgba(173,31,31,.25); background: var(--err-50); color: var(--err); }
.alert-warning { border-color: rgba(178,106,5,.25); background: var(--warn-50); color: var(--warn); }
.alert-info    { border-color: var(--border-strong); background: var(--bg-elev); color: var(--text); }

/* ---------- floating notification stack ---------- */
.toast-stack {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  max-width: min(380px, calc(100vw - 2rem));
  pointer-events: none;
}
.toast-stack__item {
  pointer-events: auto;
  margin: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06);
  backdrop-filter: saturate(1.1);
  animation: lex-toast-in .18s ease-out both;
}
.toast-stack__item.fade-out { animation: lex-toast-out .4s ease-in both; }
@keyframes lex-toast-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes lex-toast-out {
  to { opacity: 0; transform: translateY(-6px); }
}
@media (max-width: 575.98px) {
  .toast-stack { top: .5rem; right: .5rem; left: .5rem; max-width: none; }
}

/* ---------- tables ---------- */
.table {
  color: var(--text); margin: 0;
  --bs-table-bg: transparent;
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: var(--bg-elev-2);
  --bs-table-striped-color: var(--text);
  --bs-table-hover-bg: var(--bg-elev-2);
  --bs-table-hover-color: var(--text);
}
.table th {
  color: var(--text-subtle); font-weight: 600; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .1em;
  border-bottom: 1px solid var(--border);
}
.table > :not(caption) > * > * {
  border-bottom-color: var(--border); padding: .85rem 1rem;
  background-color: transparent;
  color: var(--text);
}
.table-rows {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
}
.table-rows th, .table-rows td { padding: .85rem 1rem; text-align: left; }
.table-rows th {
  color: var(--text-subtle); font-weight: 600; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .1em;
  border-bottom: 1px solid var(--border);
}
.table-rows tbody tr { transition: background-color .1s; }
.table-rows tbody tr:hover { background: var(--bg-elev-2); }
.table-rows tbody td { border-bottom: 1px solid var(--border); }
.table-rows tbody tr:last-child td { border-bottom: 0; }
/* Whole-row link (core.tables row_href_field). The row is the affordance, so
   make the cursor + hover read as clickable and give keyboard focus a ring. */
.data-table__row--link { cursor: pointer; }
.data-table__row--link:hover { background: var(--bg-elev); }
.data-table__row--link:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

/* ---------- uniform data table ---------- */
.data-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.data-table__head {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .65rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.data-table__search { flex: 1 1 240px; min-width: 220px; max-width: 360px; }
.data-table__search .form-control { padding-left: 2.4rem; }
.data-table__filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.data-table__new { margin-left: auto; }

.data-table__body { width: 100%; }
.data-table__table { width: 100%; }
.data-table__th { white-space: nowrap; }
.data-table__sort {
  display: inline-flex; align-items: center; gap: .3rem;
  color: inherit; text-decoration: none;
}
.data-table__sort:hover { color: var(--text); }
.data-table__sort.is-active { color: var(--brand); }

.data-table__actions-col { width: 44px; }
.data-table__select-col { width: 40px; text-align: center; }
.data-table__select-col .form-check-input { margin: 0; cursor: pointer; }
.data-table__bulkbar {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
}
.data-table__bulkbar .data-table__bulkcount { margin-right: auto; }
.data-table__overflow {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-xs);
  color: var(--text-subtle);
  cursor: pointer;
  transition: background-color .12s, color .12s, border-color .12s;
}
.data-table__overflow:hover {
  background: var(--bg-elev-2);
  border-color: var(--border-strong);
  color: var(--text);
}
.data-table__overflow:focus-visible {
  outline: none; box-shadow: 0 0 0 4px var(--ring);
}

/* Row-action overflow menu. The action icons (templates/icons/_*.svg) carry
   no intrinsic width/height, so without an explicit size here they render at
   the replaced-element default (~300px) and blow the menu items up. Size the
   menu like the other compact dropdowns (cf. .oa-menu) and pin the icons. */
/* Dark-mode legibility for every data-table dropdown — the row-actions menu
   AND the filter chips' menus.
   Bootstrap 5.3 themes its components from [data-bs-theme], which this app
   never sets (the palette is switched with [data-theme] instead). So a
   .dropdown-menu keeps Bootstrap's LIGHT defaults on a dark surface: hover
   paints a pale grey while the inherited label stays pale, and the text
   disappears. .oa-menu already works around this for the topbar; these menus
   had no colour theming at all.

   Driven through Bootstrap's own custom properties rather than by overriding
   its rules: `.dropdown-item.active` and `.dropdown-item:hover` have IDENTICAL
   specificity (two classes + a pseudo-class ties with three classes), so
   overriding means whichever is written last silently wins and the other never
   applies. Setting the variables avoids that fight and covers states we
   haven't enumerated. */
.data-table__menu,
.data-table__filters .dropdown-menu {
  --bs-dropdown-bg: var(--bg-elev);
  --bs-dropdown-border-color: var(--border);
  --bs-dropdown-color: var(--text);
  --bs-dropdown-link-color: var(--text);
  /* Neutral wash keyed off the text colour: darkens a light menu, lightens a
     dark one, and always contrasts with the label. */
  --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--text) 9%, transparent);
  --bs-dropdown-link-hover-color: var(--text);
  /* Selected row gets a tint, not a saturated fill — the data-table marks
     "All <filter>" as .active whenever a filter is unset, so a solid brand bar
     would sit in every dropdown by default. */
  --bs-dropdown-link-active-bg: color-mix(in srgb, var(--brand) 16%, transparent);
  --bs-dropdown-link-active-color: var(--text);
}
.data-table__filters .dropdown-item.active { font-weight: 600; }

.data-table__menu {
  --bs-dropdown-min-width: 11rem;
  padding: .3rem;
}
.data-table__menu .dropdown-item {
  display: flex; align-items: center; gap: .55rem;
  padding: .45rem .55rem;
  border-radius: var(--radius-xs);
  font-size: .875rem;
}
.data-table__menu .dropdown-item .icon,
.data-table__menu .dropdown-item svg {
  width: 16px; height: 16px; flex: 0 0 16px;
  opacity: .85;
}

.data-table__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  padding: .75rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--bg-elev);
}
.data-table__pager { display: inline-flex; gap: .2rem; }
.data-table__pager-btn {
  display: inline-grid; place-items: center;
  min-width: 30px; height: 30px;
  padding: 0 .55rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  color: var(--text-muted);
  font-size: .85rem; font-weight: 500;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background-color .12s, color .12s, border-color .12s;
}
.data-table__pager-btn:hover {
  background: var(--bg-elev-2);
  color: var(--text);
  border-color: var(--border-strong);
}
.data-table__pager-btn.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.data-table__pager-btn.is-disabled {
  opacity: .4; pointer-events: none;
}
.data-table__pager-ellipsis {
  display: inline-grid; place-items: center; min-width: 22px;
  color: var(--text-subtle); font-size: .85rem;
}

.data-table__empty {
  margin: 0;
  border: 0; border-radius: 0;
  background: var(--surface);
  padding: 3rem 1rem;
}

/* "Created by" cell — avatar + name + meta */
.cell-actor {
  display: inline-flex; align-items: center; gap: .5rem;
  min-width: 0;
}
.cell-actor__name { font-weight: 500; color: var(--text); }
.cell-actor__meta { color: var(--text-subtle); font-size: .8rem; }

/* status indicators */
.status {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .82rem; font-weight: 500;
}
.status .dot { width: 8px; height: 8px; border-radius: 50%; }
.status--ok .dot   { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-50); }
.status--warn .dot { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-50); }
.status--err .dot  { background: var(--err); box-shadow: 0 0 0 3px var(--err-50); }
.status--info .dot { background: var(--info); box-shadow: 0 0 0 3px var(--info-50); }
.status--idle .dot { background: var(--text-faint); }

/* ---------- compose / prompt ---------- */
.compose {
  position: relative;            /* anchors the floating top-right mic */
  background: var(--bg-elev);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 1rem 1rem .75rem;
  box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s;
}
.compose:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring), var(--shadow); }
.compose textarea {
  width: 100%; border: 0; resize: none; outline: none; background: transparent;
  color: var(--text); font-size: 1rem; font-family: inherit; min-height: 90px;
  line-height: 1.55;
}
.compose textarea::placeholder { color: var(--text-faint); }
/* Live character counter (compose-charcount.js). Hidden until the typed prompt
   nears its maxlength, then surfaces as a quiet right-aligned cue. */
.compose__count {
  margin-top: .4rem; text-align: right;
  font-size: .72rem; color: var(--text-faint);
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.compose__count[hidden] { display: none; }
.compose__count.is-near { color: var(--warn, #b8860b); }
.compose__count.is-max { color: var(--danger, #dc3545); font-weight: 600; }
/* Context-window token meter (token-meter.js) — sits beside the char counter,
   hidden until the prompt+attachments near the model window. */
.compose__tokens {
  margin-top: .4rem; text-align: right;
  font-size: .72rem; color: var(--warn, #b8860b);
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.compose__tokens[hidden] { display: none; }
.compose__tokens.is-near { color: var(--warn, #b8860b); }
.compose__tokens.is-max { color: var(--danger, #dc3545); font-weight: 600; }
.compose__bar {
  display: flex; align-items: center; gap: .5rem;
  border-top: 1px solid var(--border);
  padding-top: .65rem; margin-top: .5rem;
}
/* Draft composer bar: the format chips (Document type, Input Document, Research
   before drafting) and the Improve + Draft action group share one row — the
   group keeps its margin-left:auto (.ms-auto) so it pins to the right. When the
   chips grow too wide to fit, flex-wrap drops the action group onto the next
   row (still right-aligned), rather than forcing a break unconditionally. */
.compose__bar--wrap-ask { flex-wrap: wrap; }
.compose__chip {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: 999px; padding: .3rem .65rem;
  font-size: .78rem; font-weight: 500; color: var(--text-muted); cursor: pointer;
}
.compose__chip:hover { background: var(--bg-elev); color: var(--text); }
.compose__chip .icon { width: 14px; height: 14px; }
/* Toggle chips (e.g. "+ Org Knowledge Base") show their on-state with the
   brand accent and a tinted fill; the + glyph rotates into a subtle check-feel. */
.compose__chip.is-active {
  background: var(--brand-bg, rgba(99, 102, 241, .12));
  border-color: var(--brand); color: var(--text);
}
.compose__chip[data-org-kb-toggle].is-active svg { transform: rotate(45deg); transition: transform .15s; }

/* Attached-file chips shown above the compose bar */
.compose__files {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: .65rem; padding-top: .65rem;
  border-top: 1px solid var(--border);
}
.compose__file {
  display: inline-flex; align-items: center; gap: .4rem;
  max-width: 100%;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: 8px; padding: .3rem .5rem .3rem .55rem;
  font-size: .8rem; color: var(--text);
}
.compose__file svg { flex: 0 0 auto; color: var(--text-muted); }
/* Attention flash when a chip is freshly added (e.g. picking a house-style
   template): starts fully brand-coloured with a ring + slight pop, then the
   colour fades away to the normal chip so the user sees it was just added. */
.compose__file--flash { animation: composeChipFlash 1.5s cubic-bezier(.2,.7,.3,1) 1; }
.compose__file--flash svg,
.compose__file--flash .compose__file-x { animation: composeChipFlashFg 1.5s cubic-bezier(.2,.7,.3,1) 1; }
@keyframes composeChipFlash {
  0% {
    background: var(--brand); border-color: var(--brand); color: #fff;
    box-shadow: 0 0 0 5px var(--ring); transform: scale(1.06);
  }
  100% {
    background: var(--bg-elev-2); border-color: var(--border); color: var(--text);
    box-shadow: 0 0 0 0 rgba(0,0,0,0); transform: scale(1);
  }
}
@keyframes composeChipFlashFg {
  0%   { color: #fff; }
  100% { color: var(--text-muted); }
}
@media (prefers-reduced-motion: reduce) {
  .compose__file--flash,
  .compose__file--flash svg,
  .compose__file--flash .compose__file-x { animation: none; }
}
.compose__file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 18rem; }
.compose__file-size { font-size: .72rem; font-family: var(--font-mono, monospace); }
.compose__file-x {
  border: 0; background: transparent; cursor: pointer; line-height: 1;
  color: var(--text-faint); font-size: 1rem; padding: 0 .15rem;
}
.compose__file-x:hover { color: var(--text); }
/* "+N" / "Show less" overflow pill — collapses the chip list past 3 files. */
.compose__file-more {
  cursor: pointer; font-weight: 600; color: var(--text-muted);
  font-size: .8rem; line-height: 1; padding: .3rem .6rem;
}
.compose__file-more:hover { background: var(--bg-elev); color: var(--text); border-color: var(--brand); }
/* Attach-order badge on a chip (MIRA) — the file's "File N" number so the user
   can say "compare File 1 and File 3". */
.compose__file-num {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
  border-radius: 999px; background: var(--brand); color: #fff;
  font-size: .68rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
}
.compose__file.is-error .compose__file-num { background: var(--text-faint); }

/* "Address files by number" tip pill + popover (Interact + Draft). */
/* inline-block so the wrapper hugs the pill — the popover (left:0) then sits
   directly above the pill instead of the full-width row's left edge. */
.compose__tip { position: relative; display: inline-block; margin-top: .5rem; }
.compose__tip-btn {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 999px;
  padding: .25rem .6rem; font-size: .74rem; font-weight: 600; color: var(--text-muted);
}
.compose__tip-btn:hover { color: var(--text); border-color: var(--brand); }
.compose__tip-btn svg { flex: 0 0 auto; color: var(--brand); }
.compose__tip-pop {
  position: absolute; left: 0; bottom: calc(100% + .4rem); z-index: 20;
  width: min(22rem, 80vw); padding: .65rem .75rem;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow);
  /* The composer sits in a centered hero — pin the popover's own text left so
     the lead + File N → name rows read normally instead of inheriting center. */
  text-align: left;
}
.compose__tip-lead { margin: 0 0 .5rem; font-size: .78rem; color: var(--text-muted); line-height: 1.45; }
.compose__tip-lead em { font-style: normal; color: var(--text); }
.compose__tip-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
/* min-width:0 so the row (a grid item) can shrink below its content's
   min-content width — otherwise a long unbroken filename expands the row past
   the popover before .compose__tip-name's ellipsis can apply. */
.compose__tip-row { display: flex; align-items: center; gap: .5rem; font-size: .8rem; min-width: 0; }
.compose__tip-n {
  flex: 0 0 auto; font-weight: 700; color: var(--brand);
  font-variant-numeric: tabular-nums; min-width: 3.2rem;
}
/* flex:1 + min-width:0 so a long name truncates with an ellipsis instead of
   overflowing the popover (flex items default to min-width:auto). */
.compose__tip-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.compose.is-dropping { border-color: var(--brand); box-shadow: 0 0 0 4px var(--ring), var(--shadow); }

/* "Ask on this" selection pill — floats by the selected answer text on a
   finished Ask/Interact run; click quotes the passage into the follow-up box.
   Fixed-positioned and appended to <body> by ask-on-this.js. */
.ask-on-this {
  position: fixed; z-index: 1090; display: none;
  align-items: center; gap: .35rem;
  padding: .32rem .62rem;
  font-size: .78rem; font-weight: 600; line-height: 1;
  color: #fff; background: var(--brand); border: none; border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  cursor: pointer; white-space: nowrap;
  transition: transform .1s ease, filter .12s ease;
}
.ask-on-this.is-visible { display: inline-flex; }
.ask-on-this:hover { filter: brightness(1.07); }
.ask-on-this:active { transform: scale(.97); }
.ask-on-this svg { flex: 0 0 auto; }

/* Inline composer validation message (e.g. "Ask a fuller question…"). */
.compose__error {
  color: var(--danger, #dc3545);
  font-size: .82rem; font-weight: 500;
  margin-top: .5rem;
}

/* ===== Interact: composer "+" menu + scope submenu ===== */
/* Composer "Improve" + icon-only send (MIRA landing composer). */
.compose__improve { display: inline-flex; align-items: center; gap: .4rem; }
.compose__improve svg { width: 15px; height: 15px; color: var(--brand); flex: 0 0 auto; }
.compose__improve.is-busy { opacity: .85; pointer-events: none; }
/* While improving: swap the sparkle icon for a spinner so the working state
   reads at a glance (the label also flips to "Improving…" in JS). */
.compose__improve.is-busy svg { display: none; }
.compose__improve.is-busy::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid var(--brand); border-top-color: transparent;
  animation: compose-improve-spin .6s linear infinite;
}
@keyframes compose-improve-spin { to { transform: rotate(360deg); } }
/* Transient feedback for the Improve button (Interact composer). Floats above
   the button so it never reflows the toolbar; auto-hidden from JS. */
.compose__send-group { position: relative; }
.compose__improve-note {
  position: absolute; bottom: calc(100% + .4rem); right: 0;
  max-width: min(360px, 72vw); padding: .35rem .6rem; border-radius: .5rem;
  font-size: .78rem; line-height: 1.3; font-weight: 500; white-space: normal;
  background: var(--brand-soft, #eef2ff); color: var(--brand, #3b4ce2);
  border: 1px solid color-mix(in srgb, var(--brand, #3b4ce2) 22%, transparent);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .12); z-index: 5;
}
.compose__improve-note.is-error {
  background: #fef2f2; color: #b42318; border-color: #fecdca;
}
.compose__improve-note.is-ok {
  background: #ecfdf3; color: #027a48; border-color: #abefc6;
}
.compose__go { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .85rem; }
.compose__go .compose__ask-label { font-weight: 600; }
.compose__go svg { width: 16px; height: 16px; }

.compose__plus { position: relative; display: inline-flex; }
.compose__plus-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.compose__plus-btn svg { width: 16px; height: 16px; }
.compose__plus-btn:hover,
.compose__plus-btn[aria-expanded="true"] {
  background: var(--bg-elev); color: var(--text); border-color: var(--brand);
}
/* A non-Auto mode is active — accent the trigger so the pick is visible. */
.compose__plus-btn.is-set {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand); border-color: var(--brand);
}
.compose__menu, .compose__submenu {
  position: absolute; z-index: 40; min-width: 16rem; max-width: min(26rem, 92vw);
  background: var(--bg-elev, var(--bg)); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-lg, var(--shadow));
  padding: .35rem; display: grid; gap: .1rem;
}
.compose__menu { bottom: calc(100% + .5rem); left: 0; }
.compose__submenu { left: calc(100% + .4rem); bottom: 0; min-width: 17rem; }
/* "Take input from Ask" flyout — a self-contained grounding form, so its
   options nest in a side panel instead of inserting rows into the menu. */
.compose__submenu--pad { padding: .5rem .55rem; gap: .35rem; }
.compose__field-label {
  font-size: .68rem; font-weight: 600; letter-spacing: .03em;
  text-transform: uppercase; color: var(--text-faint); margin: .15rem .15rem 0;
}
.compose__ask-opts { display: grid; gap: .35rem; transition: opacity .12s; }
.compose__ask-opts[aria-hidden="true"] { opacity: .45; pointer-events: none; }
.compose__segmented {
  display: flex; gap: .2rem; padding: .15rem; border-radius: 9px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
}
.compose__seg {
  flex: 1 1 0; border: 0; background: transparent; cursor: pointer;
  border-radius: 7px; padding: .32rem .25rem; font-size: .74rem; font-weight: 500;
  color: var(--text-muted); white-space: nowrap;
}
.compose__seg:hover { color: var(--text); }
.compose__seg[aria-checked="true"] {
  background: var(--bg-elev); color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.compose__menu-item {
  display: flex; align-items: center; gap: .65rem; width: 100%;
  background: transparent; border: 0; border-radius: 9px; cursor: pointer;
  padding: .5rem .6rem; text-align: left; color: var(--text); font-size: .9rem;
}
.compose__menu-item:hover { background: var(--bg-elev-2); }
/* Left-aligned checkbox for the sources-modal branch rows (Legal research / Org KB).
   Reflects the row's aria-checked state — both branches start checked. */
.compose__menu-cbx {
  flex: 0 0 auto; position: relative;
  width: 18px; height: 18px; border-radius: 5px;
  border: 1.6px solid var(--border-strong); background: var(--bg-elev);
  transition: background .12s, border-color .12s;
}
.compose__menu-cbx::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); transition: transform .12s;
}
.compose__menu-item--cbx[aria-checked="true"] .compose__menu-cbx {
  background: var(--brand); border-color: var(--brand);
}
.compose__menu-item--cbx[aria-checked="true"] .compose__menu-cbx::after {
  transform: rotate(45deg) scale(1);
}
.compose__menu-ic { display: inline-flex; color: var(--text-muted); flex: 0 0 auto; }
.compose__menu-label { display: grid; gap: .05rem; flex: 1 1 auto; min-width: 0; }
.compose__menu-label strong { font-weight: 600; font-size: .9rem; color: var(--text); }
.compose__menu-label small { color: var(--text-muted); font-size: .74rem; }
.compose__menu-hint, .compose__menu-value { color: var(--text-muted); font-size: .78rem; flex: 0 0 auto; }
.compose__menu-chev { color: var(--text-faint); flex: 0 0 auto; }
.compose__menu-check { color: var(--brand); flex: 0 0 auto; visibility: hidden; }
.compose__menu-item[aria-checked="true"] .compose__menu-check { visibility: visible; }
/* Always-on source (Lexlegis KB): checked but not toggleable. */
.compose__menu-item[aria-disabled="true"] { cursor: default; }
.compose__menu-item[aria-disabled="true"]:hover { background: transparent; }
.compose__menu-item[aria-disabled="true"] .compose__menu-check { color: var(--text-muted); }
.compose__menu-item.is-over { color: var(--danger, #dc3545); }
.compose__menu-sep { height: 1px; background: var(--border); margin: .3rem .25rem; }
.compose__submenu-foot {
  font-size: .78rem; color: var(--text-muted);
  border-top: 1px solid var(--border); margin-top: .25rem; padding: .5rem .6rem .35rem;
}
.compose__submenu-foot strong { color: var(--brand); font-weight: 600; }
/* MIRA chat: mode flyouts mirror whole surfaces, so they can be tall — cap the
   height and scroll within. The "Choose files" row sits under its toggle. */
.compose__submenu--scroll { max-height: min(70vh, 30rem); overflow-y: auto; }
.compose__menu-item--indent { padding-left: 1.4rem; }

/* Mode tag row ("Ask ✕") above the "+ pills" row; understated, with a clear ×. */
.compose__modebar:not([hidden]) { display: flex; align-items: center; padding: .1rem .15rem .35rem; }
.compose__mode-tag {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--bg-elev-2); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px;
  padding: .24rem .3rem .24rem .55rem; font-size: .78rem; font-weight: 500;
}
.compose__mode-tag__dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--brand); opacity: .7; }
.compose__mode-tag__name { color: var(--text); font-weight: 600; }
.compose__mode-tag__x {
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 0; background: transparent; color: var(--text-faint);
  width: 1rem; height: 1rem; border-radius: 50%; cursor: pointer;
}
.compose__mode-tag__x:hover { background: var(--border); color: var(--text); }
/* The active mode's option pills — inline, right after the "+"; each opens a
   small chooser (.compose__pillmenu) for that option category. */
.compose__barpills:not([hidden]) { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.compose__pill-wrap { position: relative; display: inline-flex; }
.compose__pill {
  display: inline-flex; align-items: baseline; gap: .4rem; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-elev-2); color: var(--text);
  border-radius: 999px; padding: .3rem .75rem; font-size: .8rem; line-height: 1.2;
}
.compose__pill:hover, .compose__pill.is-open { border-color: var(--brand); background: var(--bg-elev); }
.compose__pill.is-set { border-color: var(--brand); }
.compose__pill-val { color: var(--brand); font-weight: 600; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compose__pill-val:empty { display: none; }
.compose__pillmenu {
  position: absolute; bottom: calc(100% + .4rem); left: 0; z-index: 40;
  min-width: 15rem; max-width: min(24rem, 92vw); max-height: 60vh; overflow-y: auto;
  background: var(--bg-elev, var(--bg)); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg, var(--shadow)); padding: .35rem; display: grid; gap: .1rem;
}
.compose__pillmenu .compose__scope { display: grid; gap: .35rem; padding: .15rem .25rem; }
/* "Select knowledge source" opens this roomy modal body (radios + scope selects). */
.compose__optmodal-body { display: grid; gap: .15rem; }
.compose__optmodal-body .compose__scope { display: grid; gap: .5rem; padding: .25rem .15rem 0; }

/* Compose-bar chip popovers (Draft: document type / output template). The
   chip anchors a [data-pop-menu] that reuses .compose__menu styling. */
.compose__pop { position: relative; display: inline-flex; }
/* The document-type list runs to a dozen rows — cap its height and let it
   scroll rather than overrun the top of the viewport. Widen it and keep each
   label on one line so long names ("Petition (writ / SLP / review)") don't wrap. */
.compose__pop-menu {
  left: 0; right: auto; max-height: min(60vh, 26rem); overflow-y: auto;
  min-width: 22rem; max-width: min(32rem, 92vw);
}
.compose__pop-menu .compose__menu-label { white-space: nowrap; }
.compose__chip-chev { color: var(--text-faint); flex: 0 0 auto; transition: transform .12s; }
.compose__chip[aria-expanded="true"] { background: var(--bg-elev); color: var(--text); border-color: var(--brand); }
.compose__chip[aria-expanded="true"] .compose__chip-chev { transform: rotate(180deg); }

/* ===== Interact: "Select prompt" picker modal ===== */
.picker-modal__content { height: 70vh; max-height: 620px; }
.picker-modal__content .modal-body { display: flex; flex-direction: column; min-height: 0; gap: .6rem; }
.picker-modal__search { flex: 0 0 auto; }
.picker-modal__list { flex: 1 1 auto; overflow-y: auto; min-height: 0; display: grid; gap: .4rem; align-content: start; }
.picker-modal__item {
  display: grid; gap: .15rem; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: 10px; padding: .6rem .75rem;
  background: var(--bg-elev-2); transition: border-color .12s, background .12s;
}
.picker-modal__item:hover { border-color: var(--brand); background: var(--bg-elev); }
.picker-modal__item.is-picked { border-color: var(--brand); background: var(--brand-tint, var(--bg-elev)); box-shadow: inset 3px 0 0 var(--brand); }
.picker-modal__item-top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.picker-modal__item-name { font-weight: 600; font-size: .9rem; color: var(--text); }
.picker-modal__item-meta { font-size: .72rem; flex: 0 0 auto; }
.picker-modal__item-desc { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Staged-upload status: spinner, in-progress + failed chips, modal error rows. */
.picker-spin {
  display: inline-block; width: 12px; height: 12px; vertical-align: -1px;
  border: 2px solid var(--border); border-top-color: var(--brand);
  border-radius: 50%; animation: spin .7s linear infinite;
}
/* The chip shows its own inline picker-spin + % in the size cell, so suppress
   the generic .is-loading::after spinner (and its reserved padding) — otherwise
   the chip shows two spinners at once. */
.compose__file.is-loading { opacity: .8; pointer-events: auto; cursor: default; padding-right: .5rem; }
.compose__file.is-loading::after { display: none; }
.compose__file.is-error {
  border-color: var(--danger, #dc3545);
  color: var(--danger, #dc3545);
  background: var(--danger-bg, rgba(220, 53, 69, .08));
}
.compose-files-modal__table tr.is-error .compose-files-modal__name { color: var(--danger, #dc3545); }
.compose-files-modal__err { font-size: .74rem; color: var(--danger, #dc3545); margin-top: .15rem; white-space: normal; }

/* Over the 20-file / 10 MB cap: flag the chip row + Manage pill in red. */
.compose__files.is-over { border-top-color: var(--danger, #dc3545); }
.compose__chip.is-over {
  color: var(--danger, #dc3545);
  border-color: var(--danger, #dc3545);
  background: var(--danger-bg, rgba(220, 53, 69, .08));
}
.compose__chip-count { color: inherit; opacity: .7; font-variant-numeric: tabular-nums; }
/* The warning triangle only appears on the Manage chip while over the limit. */
.compose__chip-warn { display: none; }
.compose__chip.is-over .compose__chip-warn { display: inline-flex; }

/* ===== Interact: attached-files manager modal ===== */
/* Fixed height: header + stats + footer stay put, only the table scrolls. */
.compose-files-modal__content { height: 70vh; max-height: 620px; }
/* Pin the close (×) to the top-right — the title+hint block is tall, so the
   default vertically-centred header would float the button to the middle. */
.compose-files-modal .modal-header { align-items: flex-start; }
.compose-files-modal .modal-header .btn-close { margin-top: .15rem; }
.compose-files-modal__content .modal-body {
  display: flex; flex-direction: column; min-height: 0;
}
.compose-files-modal__hint {
  margin-top: .35rem; font-size: .82rem; color: var(--text-muted);
}
/* "Why a limit?" rationale + (admin-only) upgrade nudge under the hint.
   Hidden during normal file management; revealed only once the batch is over a
   cap (the JS toggles `.is-over` on the modal root). */
.compose-files-modal__why {
  display: none;
  margin-top: .5rem; font-size: .8rem; line-height: 1.5; color: var(--text-muted);
}
.compose-files-modal.is-over .compose-files-modal__why { display: block; }
.compose-files-modal__why strong { color: var(--text); }
.compose-files-modal__upgrade {
  display: inline-block; margin-left: .25rem; font-weight: 600; white-space: nowrap;
}
.compose-files-modal__why-note { margin-left: .25rem; font-style: italic; }
.compose-files-modal__scroll {
  flex: 1 1 auto; overflow-y: auto; min-height: 0;
  border: 1px solid var(--border); border-radius: 10px;
}
/* Short / narrow screens: the header copy (hint + "Why a limit?") can grow tall
   enough to crowd the file list down to a sliver. Instead of the fixed-height
   layout where only the table scrolls (which pins the footer off-screen), let
   the whole modal scroll as one — header, stats, table and footer together — so
   the Close/Done buttons are always reachable by scrolling. */
@media (max-height: 720px), (max-width: 575.98px) {
  .compose-files-modal__content { height: auto; max-height: none; }
  .compose-files-modal .modal-header { max-height: none; overflow: visible; }
  .compose-files-modal__hint,
  .compose-files-modal__why { font-size: .76rem; line-height: 1.4; margin-top: .3rem; }
  .compose-files-modal__scroll { flex: 0 0 auto; overflow: visible; }
}

/* Live counter boxes — green within limit, red when over. */
.compose-files-modal__stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-bottom: .9rem;
}
.compose-files-modal__stat {
  display: flex; flex-direction: column; gap: .15rem;
  border: 1px solid var(--border); border-radius: 10px; padding: .55rem .75rem;
  transition: border-color .15s, background .15s, color .15s;
}
.compose-files-modal__stat-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted);
}
.compose-files-modal__stat-value { font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.compose-files-modal__stat.is-ok {
  border-color: var(--success, #28a745);
  background: var(--success-bg, rgba(40, 167, 69, .08));
  color: var(--success, #28a745);
}
.compose-files-modal__stat.is-over {
  border-color: var(--danger, #dc3545);
  background: var(--danger-bg, rgba(220, 53, 69, .08));
  color: var(--danger, #dc3545);
}
.compose-files-modal__stat.is-ok .compose-files-modal__stat-label,
.compose-files-modal__stat.is-over .compose-files-modal__stat-label { color: inherit; opacity: .8; }

.compose-files-modal__table th {
  position: sticky; top: 0; z-index: 1; background: var(--bg-elev-2, var(--bg));
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); font-weight: 600;
}
.compose-files-modal__sort {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  font: inherit; color: inherit; display: inline-flex; align-items: center; gap: .3rem;
}
.compose-files-modal__sort:hover { color: var(--text); }
.compose-files-modal__sort-arrow { font-size: .65rem; color: var(--brand); }
.compose-files-modal__name {
  max-width: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.compose-files-modal__size { white-space: nowrap; }
.compose-files-modal__del {
  border: 0; background: transparent; cursor: pointer; line-height: 1;
  color: var(--text-faint); font-size: 1.15rem; padding: 0 .35rem; border-radius: 6px;
}
.compose-files-modal__del:hover { color: var(--danger, #dc3545); background: var(--bg-elev); }

/* ===== Ask: modern, centered AI research stage ===== */
.ask-stage {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  min-height: min(72vh, 680px);
  padding: 2rem 0 1.5rem;
}
/* Soft branded ambient glow — indigo behind the prompt, a warm gold
   accent in the corner — gives the clean stage the site's flavour
   without a boxed-in card. */
.ask-stage::before {
  content: ""; position: fixed; pointer-events: none; z-index: -1;
  /* Pin to the full content column (right of the sidebar) and the full
     viewport height, behind all page content, so the wash fills the
     whole area instead of being clipped to the stage box. */
  inset: 0 0 0 var(--sidebar-w);
  background:
    radial-gradient(900px 560px at 50% 18%,  rgba(99,102,241,.28), transparent 62%),
    radial-gradient(680px 460px at 96% 100%, rgba(217,178,101,.14), transparent 66%),
    radial-gradient(620px 440px at 2% 96%,   rgba(124,58,237,.12), transparent 68%);
}
html.lex-sidebar-collapsed .ask-stage::before,
.app-shell.is-collapsed .ask-stage::before { inset: 0 0 0 var(--sidebar-w-collapsed); }
@media (max-width: 991.98px) { .ask-stage::before { inset: 0; } }
.ask-stage__inner { position: relative; z-index: 1; }
.ask-stage__inner {
  width: 100%; max-width: 920px;
  display: grid; gap: 1.75rem; justify-items: center;
}
.ask-stage__head { display: grid; gap: .75rem; justify-items: center; }
.ask-stage__head .eyebrow { color: var(--brand); }
.ask-stage__head .eyebrow::before { background: var(--brand); }
.ask-stage__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 3.6vw, 2.85rem);
  font-weight: 500; letter-spacing: -.026em; line-height: 1.04;
  margin: 0;
}
.ask-stage__sub {
  color: var(--text-muted); max-width: 58ch;
  font-size: 1.04rem; line-height: 1.55; margin: 0 auto;
  /* Reserve a steady height (≈3 lines) so the intro paragraph occupies the
     same vertical space on every AI home (Ask / Interact / Draft / MIRA) —
     a shorter blurb no longer floats the compose box up. Keeps the input
     box starting from the same place across surfaces. */
  min-height: calc(1.04rem * 1.55 * 3);
}
/* Expandable variant (Ask) — collapses to one line with a "more" toggle, so it
   shouldn't reserve the 3-line height the other surfaces use. */
.ask-stage__sub[data-sub-expand] { min-height: 0; }
.ask-stage__sub-more {
  appearance: none; background: none; border: 0; padding: 0 .15rem; margin-left: .35ch;
  color: var(--brand); cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; gap: .15ch; vertical-align: middle;
}
.ask-stage__sub-more-chev { transition: transform .3s ease; }
.ask-stage__sub[data-sub-expand].is-open .ask-stage__sub-more-chev { transform: rotate(180deg); }
/* The rest slides open below the lead: grid 0fr→1fr gives a smooth height
   transition that also works with multi-line wrapping text. */
.ask-stage__sub-rest {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .35s ease, opacity .3s ease, margin-top .35s ease;
}
.ask-stage__sub-rest-in { overflow: hidden; }
.ask-stage__sub[data-sub-expand].is-open .ask-stage__sub-rest {
  grid-template-rows: 1fr; opacity: 1; margin-top: .35rem;
}
@media (prefers-reduced-motion: reduce) {
  .ask-stage__sub-rest { transition: none; }
}

/* Compose box — larger, rounder, full-width within the stage */
.compose--ai {
  width: 100%; margin: 0;
  border-radius: var(--radius-xl);
  padding: 1.15rem 1.25rem .85rem;
  box-shadow: var(--shadow-lg, var(--shadow));
}
.compose--ai textarea {
  text-align: left; min-height: 84px; font-size: 1.08rem;
}
/* Keep typed text clear of the floating top-right mic (.compose__mic--float,
   ~34px wide at right .8rem) so characters don't run underneath it. Scoped to
   when the mic is actually revealed (JS drops [hidden] where dictation works)
   so there's no dead gap when it isn't shown. */
.compose--ai:has(.compose__mic--float:not([hidden])) textarea {
  padding-right: 2.5rem;
}

/* Per-doc-type tip pill under the compose bar (house-style template + research
   nudge). Text is swapped by JS from the selected document type. */
.compose__hint {
  display: flex; align-items: flex-start; justify-content: flex-start; gap: .4rem;
  margin-top: .5rem; text-align: left;
  font-size: .72rem; line-height: 1.4; color: var(--text-faint);
}
.compose__hint[hidden] { display: none; }
.compose__hint svg { flex: 0 0 auto; margin-top: .1rem; width: 13px; height: 13px; color: var(--brand); opacity: .8; }
.compose__hint-body { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.compose__hint-input { display: block; }
.compose__hint-input[hidden] { display: none; }
/* Actionable phrases inside the tip ("Take input from Ask", "template", the
   input-document nudge) — read as links, jump to the matching "+" action. */
.compose__hint-link {
  color: var(--text-faint); font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.compose__hint-link:hover { color: var(--text-faint); text-decoration-thickness: 2px; }

/* Voice-input mic button (compose bar) */
.compose__mic {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 999px; cursor: pointer;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  color: var(--text-muted);
  transition: color .15s, border-color .15s, background .15s;
}
.compose__mic:hover { color: var(--text); border-color: var(--brand); }
.compose__mic-icon { position: relative; z-index: 1; }
.compose__mic-pulse { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.compose__mic.is-recording {
  color: #fff; border-color: transparent;
  background: var(--danger, #dc2626);
}
.compose__mic.is-recording .compose__mic-pulse {
  box-shadow: 0 0 0 0 rgba(220,38,38,.55);
  animation: lex-mic-pulse 1.4s ease-out infinite;
}
@keyframes lex-mic-pulse {
  to { box-shadow: 0 0 0 12px rgba(220,38,38,0); }
}
@media (prefers-reduced-motion: reduce) {
  .compose__mic.is-recording .compose__mic-pulse { animation: none; }
}
/* Transcribing — the clip has been sent to Amazon Transcribe and we're waiting
   on text. The icon spins; clicks are ignored until it returns. */
.compose__mic.is-transcribing {
  color: var(--brand); cursor: progress;
}
.compose__mic.is-transcribing .compose__mic-icon {
  animation: lex-mic-spin .9s linear infinite;
}
@keyframes lex-mic-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .compose__mic.is-transcribing .compose__mic-icon { animation: none; }
}
/* Floating variant — pinned to the top-right corner of the input box. Idle
   colour is the brand accent (matches the Library "Improve" control). The
   borderless treatment keeps it light over the textarea; recording state
   (red, defined above, higher specificity) still wins. */
.compose__mic--float {
  position: absolute; top: .7rem; right: .8rem; z-index: 3;
  width: 34px; height: 34px;
  background: transparent; border-color: transparent;
  color: var(--brand);
}
.compose__mic--float:hover {
  color: var(--brand); border-color: var(--brand);
  background: var(--bg-elev-2);
}
/* Compact variant — sits inline in a composer toolbar (MIRA chat send row,
   Draft's "Ask AI" panel) next to small buttons. */
.compose__mic--sm { width: 32px; height: 32px; }
.compose__mic--sm .compose__mic-icon { width: 15px; height: 15px; }

/* In-box "Choose Prompt" affordance (Draft composer) — a leading button pinned
   to the top-LEFT of the input, aligned to mirror the floating mic (top-right).
   The bar is out of room, so the prompt picker lives inside the box. While the
   box is empty it shows its "Choose Prompt" label; once the user starts writing
   it collapses to an icon so it stays out of the way. */
.compose__prompt {
  position: absolute; top: .82rem; left: 1rem; z-index: 3;  /* left edge matches the "+" button (form's 1rem padding) */
  display: inline-flex; align-items: center; justify-content: center;
  height: 30px; min-width: 30px; padding: 0 .3rem;      /* same size as the "+" button */
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-elev-2); color: var(--text-muted);
  cursor: pointer; overflow: hidden;
  transition: color .15s, border-color .15s, background .15s;
}
.compose__prompt svg { width: 16px; height: 16px; }
.compose__prompt-ic { flex: none; position: relative; z-index: 1; }
.compose__prompt-label {
  position: relative; z-index: 1;
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  font-size: .78rem; font-weight: 500;
  transition: max-width .18s ease, opacity .15s ease, margin-left .18s ease;
  /* Intro — on load the label starts expanded ("Choose Prompt…") to announce the
     control, holds briefly, then collapses back to the icon. Plays once.
     `backwards` applies the first keyframe (expanded) during the start delay too,
     so there's no icon-only flash before the animation begins. */
  animation: lex-prompt-intro 2.4s ease .3s 1 backwards;
}
@keyframes lex-prompt-intro {
  0%   { max-width: 7rem; opacity: 1; margin-left: .3rem; }
  65%  { max-width: 7rem; opacity: 1; margin-left: .3rem; }
  100% { max-width: 0;    opacity: 0; margin-left: 0; }
}
.compose__prompt:hover,
.compose__prompt:focus-visible {
  color: var(--brand); border-color: var(--brand);
  background: var(--bg-elev); outline: none;
}
/* Reserve a left gutter for the icon (matches the mic's right gutter) — the
   placeholder/text keeps its natural position and is never pushed across. */
.compose--ai:has(.compose__prompt) textarea { padding-left: 3rem; }
/* The "Choose Prompt" label reveals on hover/focus as an overlay pill (solid
   background) so it never shifts the placeholder or the typed text. */
.compose__prompt:hover .compose__prompt-label,
.compose__prompt:focus-visible .compose__prompt-label {
  max-width: 7rem; opacity: 1; margin-left: .3rem;
}
@media (prefers-reduced-motion: reduce) {
  .compose__prompt-label { transition: none; animation: none; }
}
/* Interact variant — the in-box prompt button doubles as a popover toggle
   (Prompt Library / Question Set), so the pinned circle is the WRAPPER and the
   button inside it lays out normally. The menu drops down from the circle. */
.compose__prompt-pop {
  position: absolute; top: .82rem; left: 1rem; z-index: 3;
}
.compose__prompt-pop .compose__prompt { position: static; top: auto; left: auto; }
.compose__prompt-pop .compose__pop-menu { top: calc(100% + .5rem); bottom: auto; left: 0; }

/* Example-question chips below the box */
/* Floated out of the centered flow and pinned just below the composer, so
   expanding the chips grows downward without shifting the input box off the
   page's vertical centre. */
.ask-examples {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 1.4rem;
  display: grid; gap: .85rem; justify-items: center; width: 100%;
}
.ask-examples__label {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: .4ch;
  font-size: .7rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-subtle);
}
.ask-examples__label::-webkit-details-marker { display: none; }
.ask-examples__label:hover { color: var(--text); }
.ask-examples__chev { transition: transform .2s ease; }
.ask-examples[open] .ask-examples__chev { transform: rotate(180deg); }
.ask-examples__grid {
  display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center;
}
.example-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 999px; padding: .5rem .95rem;
  font-size: .85rem; font-weight: 500; color: var(--text-muted);
  cursor: pointer; text-align: left;
  transition: border-color .15s, color .15s, background .15s, transform .12s;
}
.example-chip:hover {
  border-color: var(--brand); color: var(--text);
  background: var(--bg-elev-2); transform: translateY(-1px);
}
.example-chip svg { width: 15px; height: 15px; color: var(--brand); flex: 0 0 auto; }

/* Recent runs — minimised as a centered pill toggle, expands inline.
   margin-top clears the absolutely-positioned .ask-examples (which floats
   below the centered composer and is out of normal flow) so the two don't
   overlap on shorter viewports. position/z-index keep the pill clickable. */
.ask-recent { max-width: 920px; margin: 3.5rem auto 0; position: relative; z-index: 2; }
.ask-recent__details { width: 100%; }
.ask-recent__toggle {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: .55rem;
  width: max-content; margin: 0 auto;
  padding: .5rem 1rem;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 999px;
  font-size: .85rem; font-weight: 500; color: var(--text-muted);
  transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
}
.ask-recent__toggle::-webkit-details-marker { display: none; }
.ask-recent__toggle:hover {
  border-color: var(--brand); color: var(--text);
  box-shadow: 0 0 0 4px var(--ring);
}
.ask-recent__count {
  font-family: var(--font-mono, monospace); font-size: .72rem; font-weight: 600;
  color: var(--text); background: var(--bg-elev-2);
  border-radius: 999px; padding: .04rem .42rem;
}
.ask-recent__chev { color: var(--text-subtle); transition: transform .15s ease; }
.ask-recent__details[open] .ask-recent__chev { transform: rotate(180deg); }
.ask-recent__body { margin-top: 1.1rem; text-align: left; }
.ask-recent__footer { display: flex; justify-content: flex-end; margin-top: .65rem; }
.ask-recent__more {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--brand); font-size: .85rem; font-weight: 600;
  text-decoration: none;
}
.ask-recent__more:hover { color: var(--brand-600); }
.ask-recent__more span { transition: transform .15s ease; }
.ask-recent__more:hover span { transform: translateX(3px); }

@media (max-width: 992px) {
  .ask-stage { min-height: 0; padding: 1.25rem 0; }
}

/* Read-aloud button — active (speaking) state on the run page */
[data-read-aloud].is-speaking { color: var(--brand); }
[data-read-aloud].is-speaking .read-aloud__speaker {
  animation: lex-read-pulse 1.1s ease-in-out infinite;
}
@keyframes lex-read-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  [data-read-aloud].is-speaking .read-aloud__speaker { animation: none; }
}

/* lex-search: typeahead dropdown anchored to the query field */
.compose__field { position: relative; }
.suggest-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
  margin: 0; padding: .35rem; list-style: none;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow);
  max-height: 320px; overflow-y: auto;
}
.suggest-list__item {
  padding: .5rem .65rem; border-radius: calc(var(--radius) - 4px);
  cursor: pointer; color: var(--text); font-size: .92rem; line-height: 1.4;
}
.suggest-list__item:hover { background: var(--bg-elev-2); }

/* compact inline search form used on the results page hero */
.compose--bar { display: flex; align-items: center; gap: .75rem; padding: .65rem .65rem .65rem 1rem; }
.compose--bar .compose__field { flex: 1 1 auto; }
.compose--bar textarea { min-height: 0; height: 2.4rem; padding-top: .45rem; }
.hero--compact { padding-top: 1.5rem; padding-bottom: 1.5rem; }

/* whole result row is a link */
.doc-row--link { text-decoration: none; color: inherit; }
.doc-row--link:hover { color: inherit; }
.doc-row__snippet { font-size: .85rem; line-height: 1.45; }

/* prompt suggestion grid */
.suggest-grid {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.suggest {
  display: grid; gap: .35rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text); cursor: pointer;
  transition: border-color .12s, transform .12s, box-shadow .12s;
  text-align: left;
}
.suggest:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow-sm); color: var(--text); }
.suggest__eyebrow { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); }
.suggest__title { font-weight: 500; letter-spacing: -.005em; }
.suggest__hint { font-size: .82rem; color: var(--text-muted); }

/* ---------- two-column workbench ---------- */
/* Single-line clickable prompt row (Interact "Starter prompts" rail) —
   matches the saved-prompt rows in the Ask rail. */
button.doc-row--prompt {
  display: block; width: 100%; text-align: left;
  background: none; cursor: pointer;
  padding: .7rem 1rem; color: inherit; font: inherit;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: 0; border-bottom: 1px solid var(--border);
}
button.doc-row--prompt:last-child { border-bottom: 0; }
button.doc-row--prompt:hover { color: var(--text); background: var(--bg-elev-2); }
.workbench {
  display: grid; gap: 1.25rem;
  grid-template-columns: minmax(0, 1fr) 320px;
}
@media (max-width: 992px) {
  .workbench { grid-template-columns: 1fr; }
}
.workbench__main { min-width: 0; }
.workbench__rail { display: grid; gap: 1rem; align-content: start; }
.rail-card {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.25rem;
}
.rail-card__title {
  font-size: .76rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-subtle); margin-bottom: .85rem;
}

/* Lex-search facet rail: the rail stretches to the results column height
   (grid items stretch by default), and the facet cards split that height
   evenly via flex so the rail total === results total. Each card's option
   list scrolls internally instead of growing the card. */
.workbench__rail--facets {
  display: flex; flex-direction: column; gap: 1rem;
  min-height: 0;            /* allow children to shrink + scroll */
}
.workbench__rail--facets .rail-card--fixed { flex: 0 0 auto; padding: .85rem 1.25rem; }
.facet-card {
  flex: 1 1 0; min-height: 120px;        /* equal share of the rail height */
  display: flex; flex-direction: column;
  padding: 1rem 1.1rem;
}
.facet-card__title {
  display: flex; align-items: center; gap: .5rem; flex: 0 0 auto;
  margin-bottom: .6rem;
}
.facet-card__list {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: grid; gap: .55rem; align-content: start;
  padding-right: .25rem;     /* breathing room for the scrollbar */
}
.facet-card__list::-webkit-scrollbar { width: 8px; }
.facet-card__list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }
.facet-card__actions {
  flex: 0 0 auto; display: flex; gap: .5rem; align-items: center;
  margin-top: .75rem; padding-top: .65rem; border-top: 1px solid var(--border);
}
@media (max-width: 992px) {
  /* Stacked layout — no shared height; cap each list so cards stay compact. */
  .workbench__rail--facets { display: grid; }
  .facet-card { min-height: 0; }
  .facet-card__list { max-height: 240px; }
}

/* definition list / spec grid */
.spec-grid {
  display: grid; gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.spec-grid > div { background: var(--bg-elev); padding: 1rem 1.1rem; }
.spec-grid dt { color: var(--text-subtle); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 .35rem; }
.spec-grid dd { margin: 0; font-weight: 500; }

/* pipeline (matter-stage kanban-ish) */
.pipeline {
  display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.pipeline__col {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem;
  min-height: 280px;
}
.pipeline__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 .35rem .65rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: .75rem;
}
.pipeline__head h3 { font-size: .85rem; font-weight: 600; margin: 0; letter-spacing: -.005em; }
.pipeline__count {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  background: var(--bg-elev); color: var(--text-muted);
  padding: 1px 7px; border-radius: 999px; border: 1px solid var(--border);
}
.pipeline__card {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 10px; padding: .85rem .9rem; margin-bottom: .55rem;
  display: grid; gap: .4rem;
  box-shadow: var(--shadow-xs);
  cursor: grab;
}
.pipeline__card:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.pipeline__card h4 { font-size: .9rem; font-weight: 500; margin: 0; letter-spacing: -.005em; }
.pipeline__card-meta { display: flex; align-items: center; gap: .5rem; font-size: .76rem; color: var(--text-subtle); }
.pipeline__card-meta .avatar { width: 20px; height: 20px; font-size: .65rem; }

/* horizontal stage bar */
.stages {
  display: flex; gap: .35rem;
  padding: .35rem; background: var(--bg-elev-2);
  border-radius: 12px; border: 1px solid var(--border);
}
.stages__item {
  flex: 1; padding: .55rem .75rem; border-radius: 9px;
  background: transparent; color: var(--text-muted);
  font-size: .82rem; font-weight: 500;
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
}
.stages__item.is-active { background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-xs); }
.stages__item .count { font-family: var(--font-mono); font-size: .72rem; color: var(--text-subtle); }

/* serif numeric stat */
.metric {
  font-family: var(--font-serif);
  font-weight: 500; letter-spacing: -.022em;
  font-size: 2.4rem; line-height: 1; font-variant-numeric: tabular-nums;
}
.metric--xl { font-size: 3.2rem; }

/* progress ring */
.ring {
  --val: 0;
  width: 64px; height: 64px;
  border-radius: 50%;
  background:
    conic-gradient(var(--brand) calc(var(--val) * 1%), var(--bg-elev-2) 0);
  display: grid; place-items: center;
  position: relative;
}
.ring::after {
  content: ""; position: absolute; inset: 6px;
  background: var(--bg-elev); border-radius: 50%;
}
.ring > * { position: relative; z-index: 1; }
.ring__num { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 500; }

/* step / instruction list */
.steps { display: grid; gap: .75rem; counter-reset: step; }
.steps__item {
  display: grid; grid-template-columns: 32px 1fr; gap: .85rem;
  padding: .85rem; border-radius: 12px;
  background: var(--bg-elev); border: 1px solid var(--border);
}
.steps__item::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-serif); font-weight: 500; font-size: 1.1rem;
  color: var(--brand);
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--brand-50); display: grid; place-items: center;
}
.steps__title { font-weight: 500; letter-spacing: -.005em; }
.steps__hint { color: var(--text-muted); font-size: .88rem; margin-top: 2px; }

/* doc / case row */
.doc-row {
  display: grid; grid-template-columns: 40px 1fr auto;
  align-items: center; gap: .85rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--border);
}
.doc-row:hover { background: var(--bg-elev-2); }
.doc-row:last-child { border-bottom: 0; }
.doc-row__icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  color: var(--text-muted);
  display: grid; place-items: center;
}
.doc-row__icon svg { width: 18px; height: 18px; }
.doc-row__title { font-weight: 500; letter-spacing: -.005em; }
.doc-row__meta { color: var(--text-subtle); font-size: .82rem; margin-top: 2px; }
.doc-row__right { text-align: right; font-size: .8rem; color: var(--text-subtle); white-space: nowrap; }
/* Colour-coded run status in the "Recent" lists (Ask / Interact / Draft). */
.doc-row__status { font-weight: 600; }
.doc-row__status--complete { color: var(--success, #16a34a); }
.doc-row__status--failed   { color: var(--danger, #dc2626); }
.doc-row__status--running,
.doc-row__status--queued   { color: var(--warning, #d97706); }

/* price card */
.plan {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 2rem 1.75rem;
  display: grid; gap: 1rem;
  overflow: hidden;
}
.plan--featured {
  background: var(--surface-ink); color: var(--ink-fg);
  border-color: var(--surface-ink);
}
.plan--featured * { color: var(--ink-fg); }
.plan--featured .text-muted { color: color-mix(in srgb, var(--ink-fg) 70%, transparent) !important; }
.plan--featured::before {
  content: ""; position: absolute; inset: -1px;
  background: radial-gradient(700px 280px at 100% 0%, rgba(217,178,101,.35), transparent 50%);
  pointer-events: none;
}
.plan > * { position: relative; z-index: 1; }
.plan__name { font-family: var(--font-serif); font-weight: 500; font-size: 1.5rem; letter-spacing: -.018em; }
.plan__price {
  display: flex; align-items: baseline; gap: .35rem;
  font-family: var(--font-serif);
  letter-spacing: -.022em;
}
.plan__price-amt { font-size: 2.6rem; font-weight: 500; line-height: 1; }
.plan__price-unit { color: var(--text-muted); font-size: .92rem; }
.plan--featured .plan__price-unit { color: rgba(255,255,255,.7); }
.plan__features { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.plan__features li { display: flex; gap: .55rem; align-items: flex-start; font-size: .92rem; }
.plan__check {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--brand-50); color: var(--brand);
  display: grid; place-items: center; flex: 0 0 18px;
  font-size: .7rem; font-weight: 700;
}
.plan--featured .plan__check { background: rgba(217,178,101,.18); color: var(--gold); }
.plan__cta { margin-top: auto; }
.plan__badge {
  position: absolute; top: 1rem; right: 1rem;
  background: var(--gold-50); color: var(--gold-600);
  font-size: .68rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase;
  padding: .25rem .55rem; border-radius: 999px;
  border: 1px solid rgba(176,138,62,.25);
}
.plan--featured .plan__badge { background: rgba(217,178,101,.22); color: #f3d99a; border-color: rgba(217,178,101,.35); }

/* usage bar */
.usage { display: grid; gap: .35rem; }
.usage__bar {
  height: 8px; border-radius: 999px;
  background: var(--bg-elev-2);
  overflow: hidden;
}
.usage__fill { height: 100%; background: var(--grad-brand); border-radius: inherit; }
.usage__fill--gold { background: var(--grad-gold); }
.usage__fill--warn { background: linear-gradient(90deg, var(--warn) 0%, #f59e0b 100%); }
.usage__row { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; color: var(--text-muted); }

/* mini calendar */
.minical {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  background: var(--bg-elev); padding: .85rem;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.minical__day {
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  font-size: .76rem; font-variant-numeric: tabular-nums;
  border-radius: 6px; color: var(--text-muted);
}
.minical__day--header { font-weight: 600; color: var(--text-faint); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }
.minical__day--today { background: var(--brand); color: #fff; }
.minical__day--has { color: var(--text); font-weight: 600; position: relative; }
.minical__day--has::after { content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }

/* inline tabs */
.tabs {
  display: flex; gap: .35rem; align-items: center;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
  overflow-x: auto;
}
.tabs__item {
  padding: .65rem 1rem; border-radius: 0;
  background: transparent; border: 0; color: var(--text-muted);
  font-weight: 500; font-size: .92rem;
  position: relative; cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.tabs__item:hover { color: var(--text); }
.tabs__item.is-active { color: var(--text); }
.tabs__item.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--brand);
}

.section-title {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 0 1rem;
}
.section-title h2 {
  font-family: var(--font-serif);
  font-size: 1.35rem; font-weight: 500; letter-spacing: -.018em;
  margin: 0;
}
.section-title__hint { color: var(--text-subtle); font-size: .85rem; }

.callout {
  display: flex; gap: .85rem; align-items: flex-start;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--gold-50) 0%, var(--bg-elev) 80%);
  border: 1px solid rgba(176,138,62,.25);
}
.callout__icon {
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--gold); color: #fff;
  display: grid; place-items: center; flex: 0 0 32px;
}
.callout__title { font-weight: 600; font-size: .92rem; letter-spacing: -.005em; }
.callout__body  { font-size: .85rem; color: var(--text-muted); }

.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.gold-text { color: var(--gold-600); }
[data-theme="dark"] .gold-text { color: var(--gold); }

.grid-cards-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-cards-3 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-cards-4 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* Small square icon badge used at the top of feature cards. */
.icon-tile {
  width: 40px; height: 40px; border-radius: 11px;
  background: var(--brand-50); border: 1px solid var(--border);
  color: var(--brand);
  display: grid; place-items: center;
}
.icon-tile svg, .icon-tile .icon { width: 20px; height: 20px; }

/* MS Word add-in page — hero split + task-pane mockup -------------------- */
.msword-hero__inner {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 2rem; align-items: center;
}
.msword-hero__copy { min-width: 0; }
.msword-hero__media { display: flex; justify-content: center; }

/* A stylised Microsoft Word task pane — communicates the product without a
   binary screenshot. Swap for a real <img> when one is available. */
.msword-pane {
  width: 100%; max-width: 360px;
  background: #fff; border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 48px -24px rgba(16,24,40,.35);
}
.msword-pane__bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .6rem .8rem; border-bottom: 1px solid var(--border);
  background: var(--bg-elev-2);
}
.msword-pane__dot { width: 9px; height: 9px; border-radius: 50%; background: #d3d7df; }
.msword-pane__tab {
  margin-left: auto; font-size: .72rem; font-weight: 600;
  color: var(--text-subtle); letter-spacing: .04em; text-transform: uppercase;
}
.msword-pane__head {
  display: flex; align-items: center; gap: .55rem;
  padding: .9rem .9rem .4rem;
}
.msword-pane__head img { width: 22px; height: 22px; }
.msword-pane__head b { font-size: .92rem; letter-spacing: -.01em; color: var(--text); }
.msword-pane__tools {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  padding: .5rem .9rem .2rem;
}
.msword-pane__tool {
  display: flex; align-items: center; gap: .45rem;
  padding: .5rem .6rem; border-radius: 9px;
  border: 1px solid var(--border); background: var(--bg-elev);
  font-size: .8rem; font-weight: 500; color: var(--text);
}
.msword-pane__tool svg, .msword-pane__tool .icon { width: 15px; height: 15px; color: var(--brand); }
.msword-pane__card {
  margin: .6rem .9rem 1rem; padding: .75rem .8rem;
  border-radius: 10px; background: var(--brand-50);
  border: 1px solid var(--border);
}
.msword-pane__card p { font-size: .8rem; color: var(--text); margin: 0 0 .5rem; line-height: 1.45; }
.msword-pane__cite {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .7rem; font-weight: 600; color: var(--brand);
  background: #fff; border: 1px solid var(--border);
  border-radius: 999px; padding: .15rem .5rem;
}
.msword-pane__cite svg, .msword-pane__cite .icon { width: 13px; height: 13px; }
@media (max-width: 860px) {
  .msword-hero__inner { grid-template-columns: 1fr; }
  .msword-hero__media { justify-content: flex-start; }
}

/* WhatsApp page — hero split + chat mockup ------------------------------- */
.wa-hero__inner {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 2rem; align-items: center;
}
.wa-hero__copy { min-width: 0; }
.wa-hero__media { display: flex; justify-content: center; }

/* A stylised WhatsApp chat — communicates the product without a screenshot. */
.wa-chat {
  width: 100%; max-width: 340px;
  background: #e7ded4; border: 1px solid var(--border);
  border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 48px -24px rgba(16,24,40,.35);
}
.wa-chat__bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .85rem; background: #075e54; color: #fff;
}
.wa-chat__avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: #fff; display: flex; align-items: center; justify-content: center;
}
.wa-chat__avatar img { width: 20px; height: 20px; }
.wa-chat__name { font-size: .9rem; font-weight: 600; letter-spacing: -.01em; }
.wa-chat__status { font-size: .7rem; opacity: .8; }
.wa-chat__body {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1rem .85rem;
}
.wa-bubble {
  max-width: 82%; padding: .5rem .7rem; border-radius: 10px;
  font-size: .8rem; line-height: 1.45; color: var(--text);
  box-shadow: 0 1px 1px rgba(16,24,40,.08);
}
.wa-bubble--in { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.wa-bubble--out { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 2px; }
.wa-bubble__meta {
  display: block; margin-top: .25rem;
  font-size: .62rem; color: var(--text-subtle); text-align: right;
}
.wa-bubble__cite {
  display: inline-flex; align-items: center; gap: .3rem;
  margin-top: .35rem; font-size: .68rem; font-weight: 600; color: #075e54;
}
.wa-bubble__cite svg, .wa-bubble__cite .icon { width: 13px; height: 13px; }
@media (max-width: 860px) {
  .wa-hero__inner { grid-template-columns: 1fr; }
  .wa-hero__media { justify-content: flex-start; }
}

.rule-text {
  display: flex; align-items: center; gap: .75rem;
  color: var(--text-subtle); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .12em; font-weight: 600;
  margin: 1.25rem 0;
}
.rule-text::before, .rule-text::after { content:""; flex: 1; height: 1px; background: var(--border); }

/* dock — sub-navigation under page header */
.dock {
  display: flex; align-items: center; gap: .35rem;
  padding: .35rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-xs);
  margin-bottom: 1.25rem; overflow-x: auto;
}
.dock__item {
  padding: .5rem .9rem; border-radius: 9px;
  font-size: .88rem; font-weight: 500; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: .5rem;
  white-space: nowrap; text-decoration: none;
}
.dock__item:hover { background: var(--bg-elev-2); color: var(--text); }
.dock__item.is-active { background: var(--surface-ink); color: var(--ink-fg); }
.dock__item .icon { width: 16px; height: 16px; }
.dock__item .pill { background: color-mix(in srgb, var(--ink-fg) 18%, transparent); color: var(--ink-fg); }
.dock__item:not(.is-active) .pill { background: var(--bg-elev-2); color: var(--text-muted); }
/* Let the overflow dropdown escape the dock's scroll-clipping box. */
.dock--has-overflow { overflow: visible; }
.dock__overflow { margin-left: auto; display: inline-flex; position: relative; }
.dock__more {
  border: 0; background: transparent; font: inherit; cursor: pointer;
  line-height: 1; font-size: 1.15rem; letter-spacing: .05em; padding: .4rem .7rem;
}
.dock__more::after { display: none; }            /* drop Bootstrap caret */
.dock__more[aria-expanded="true"] { background: var(--bg-elev-2); color: var(--text); }
.dock__overflow-menu { min-width: 11rem; border-radius: 10px; }
.dock__overflow-item { display: flex; align-items: center; gap: .55rem; }

/* member row */
.member-row {
  display: grid; grid-template-columns: 40px 1fr auto;
  align-items: center; gap: .85rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--border);
}
.member-row:last-child { border-bottom: 0; }

/* file/document tile (grid view) */
.tile {
  display: grid; gap: .55rem;
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.tile:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.tile__top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.tile__icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--brand-50); color: var(--brand);
  display: grid; place-items: center;
  border: 1px solid rgba(59,58,166,.08);
}
.tile__title { font-weight: 600; letter-spacing: -.005em; font-size: .95rem; }
.tile__meta { color: var(--text-subtle); font-size: .8rem; }

/* expandable card */
.detail-card {
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
}
.detail-card__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
}
.detail-card__title { font-family: var(--font-serif); font-weight: 500; font-size: 1.1rem; letter-spacing: -.012em; margin: 0; }
.detail-card__body { padding: 1.25rem; }

/* ---------- mobile ---------- */
@media (max-width: 991.98px) {
  .app-shell,
  .app-shell.is-collapsed { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; inset: 0 30% 0 0;
    transform: translateX(-100%);
    transition: transform .18s;
    z-index: 1000;
    box-shadow: var(--shadow-lg);
    padding: 1.25rem 1rem !important;
  }
  .sidebar.is-open { transform: translateX(0); }
  .app-shell.is-collapsed .sidebar__label,
  .app-shell.is-collapsed .sidebar__section-label { display: revert; }
  /* On mobile the "collapsed" sidebar is a full slide-out overlay, not a mini
     rail — restore the logo (the desktop rule hides it). */
  .app-shell.is-collapsed .sidebar__brand { display: flex; justify-content: flex-start; }
  .app-shell.is-collapsed .sidebar__logo--full { display: block; }
  .app-shell.is-collapsed .sidebar__logo--short { display: none; }
  .app-shell.is-collapsed .sidebar__link { justify-content: flex-start; padding: .55rem .65rem; }
  .app-shell.is-collapsed .org-switcher { justify-content: flex-start; padding: .65rem .75rem; }
  .app-shell.is-collapsed [data-tip]::after { display: none; }
  .sidebar__collapse { display: none; }
  .sidebar-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.4);
    opacity: 0; pointer-events: none; transition: opacity .18s; z-index: 999;
  }
  .sidebar.is-open + .sidebar-backdrop { opacity: 1; pointer-events: auto; }

  .page-header { flex-direction: column; align-items: flex-start; }
  .hero { padding: 1.5rem; border-radius: var(--radius-xl); }
}

/* ---------- loading state ---------- */
@keyframes lex-spin { to { transform: rotate(360deg); } }

/* While a click is in flight we dim the element and block further
   interaction — but the content stays visible (no blanked text). A small
   spinner sits at the right edge so it never overlaps the label. */
.is-loading {
  position: relative;
  cursor: progress !important;
  pointer-events: none;
  opacity: .6;
  transition: opacity .12s ease;
  padding-right: 1.9em;
}
.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  right: .6em;
  margin-top: -.5em;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: lex-spin .7s linear infinite;
}
.icon-btn.is-loading { padding-right: 0; }
.icon-btn.is-loading::after {
  inset: 0;
  margin: auto;
  top: auto;
  width: 14px;
  height: 14px;
}

/* ---------- htmx ---------- */
.htmx-indicator { opacity: 0; transition: opacity .18s; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* Per-row navigation spinner: sits in the trailing grid column and only
   appears (via .htmx-indicator) while that row's click is in flight. */
.row-spinner {
  display: inline-block;
  flex: 0 0 auto;
  width: 1.05em; height: 1.05em;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--brand);
  animation: lex-spin .7s linear infinite;
}

.nav-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px; z-index: 10000;
  background: linear-gradient(90deg, var(--brand), var(--gold));
  transform-origin: left;
  transform: scaleX(0);
  transition: transform .35s ease, opacity .25s ease;
  pointer-events: none;
}
.htmx-request .nav-progress { transform: scaleX(.8); opacity: 1; }
.htmx-request.nav-progress  { transform: scaleX(.8); opacity: 1; }

/* ---------- Sources picker modal ---------- */
.sources-modal__dialog { max-width: 760px; }
.sources-modal__content {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  /* Bound the dialog to the viewport so a tall file list never pushes the
     header out of view or floats the footer mid-screen — header, tabs and
     footer stay put while the body is the one scrolling region. */
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 3.5rem);
}
.sources-modal__header,
.sources-modal__tabs,
.sources-modal__footer { flex: 0 0 auto; }
.sources-modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sources-modal__header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem .35rem;
}
.sources-modal__title {
  margin: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em;
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--text);
}
.sources-modal__step { color: var(--text); font-weight: 700; }
.sources-modal__help {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 999px;
  color: var(--text-subtle); cursor: help;
}
.sources-modal__sub {
  margin: .15rem 0 0; font-size: .82rem; color: var(--text-muted);
}
.sources-modal__close {
  background: transparent; border: 0; color: var(--text-subtle);
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  display: grid; place-items: center;
  margin: -.25rem -.35rem 0 0;
}
.sources-modal__close:hover { background: var(--bg-elev-2); color: var(--text); }

.sources-modal__tabs {
  display: flex; gap: .25rem; padding: .35rem 1.25rem 0;
  border-bottom: 1px solid var(--border);
}
.sources-tab {
  display: inline-flex; align-items: center; gap: .4rem;
  background: transparent; border: 0; cursor: pointer;
  padding: .6rem .35rem .7rem;
  font-size: .85rem; font-weight: 500; color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-right: .85rem;
}
.sources-tab:hover { color: var(--text); }
.sources-tab.is-active {
  color: var(--text); border-bottom-color: var(--text);
}

.sources-modal__body { padding: 1rem 1.25rem 1.1rem; }
.sources-pane { display: none; }
.sources-pane.is-active { display: block; }
.sources-pane__hint {
  font-size: .82rem; color: var(--text-muted); margin-bottom: .65rem;
}

.sources-cols {
  display: grid; grid-template-columns: minmax(220px, 1fr) 1.3fr;
  gap: .85rem;
  border: 1px solid var(--border); border-radius: 12px;
  overflow: hidden;
  background: var(--bg-elev);
}
.sources-cols__left {
  max-height: 340px; overflow-y: auto;
  border-right: 1px solid var(--border);
  padding: .35rem;
  background: var(--bg-elev);
}
.sources-cols__right {
  padding: .85rem .9rem;
  display: grid; gap: .15rem; align-content: start;
  min-height: 280px;
}

.src-country {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  padding: .55rem .65rem;
  background: transparent; border: 0; border-radius: 8px;
  font-size: .9rem; color: var(--text); cursor: pointer; text-align: left;
}
.src-country:hover { background: var(--bg-elev-2); }
.src-country.is-active {
  background: var(--brand-50); font-weight: 600; color: var(--brand);
  box-shadow: inset 3px 0 0 var(--brand);
}
.src-country__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-country__meta {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--text-subtle);
}
.src-country__count {
  display: inline-grid; place-items: center; min-width: 22px;
  padding: 0 .35rem; height: 18px; border-radius: 999px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  font-size: .72rem; font-weight: 600; color: var(--text-muted);
}
.src-country.is-active .src-country__count {
  background: var(--brand-50); border-color: transparent; color: var(--brand);
}

/* File-count badge on the "Org knowledge base" branch of the sources modal —
   makes the covered file count prominent (the whole KB is used, no per-file pick). */
.sources-modal__kb-count {
  display: inline-grid; place-items: center; min-width: 24px;
  margin-left: auto; padding: 0 .45rem; height: 20px; border-radius: 999px;
  background: var(--brand-50); border: 1px solid transparent;
  font-size: .75rem; font-weight: 700; color: var(--brand);
}
.compose__menu-item[aria-checked="true"] .sources-modal__kb-count {
  background: var(--brand); color: #fff;
}

.src-cat {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .55rem; border-radius: 8px;
  cursor: pointer; font-size: .9rem; color: var(--text);
}
.src-cat:hover { background: var(--bg-elev-2); }
.src-cat input[type="radio"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.src-cat__dot {
  width: 16px; height: 16px; border-radius: 999px;
  border: 1.5px solid var(--border-strong); background: var(--bg-elev);
  flex: 0 0 16px; position: relative; transition: border-color .12s;
}
.src-cat__dot::after {
  content: ""; position: absolute; inset: 3px; border-radius: 999px;
  background: var(--brand); transform: scale(0); transition: transform .12s;
}
.src-cat.is-active .src-cat__dot { border-color: var(--brand); }
.src-cat.is-active .src-cat__dot::after { transform: scale(1); }
.src-cat input[type="radio"]:focus-visible + .src-cat__dot {
  box-shadow: 0 0 0 3px var(--brand-50);
}

/* Org Knowledge base tab — "Select all" master + scrollable file checkboxes
   (shared by Ask + Draft via templates/partials/_org_kb_tab.html). */
.orgkb { display: grid; gap: .5rem; }
.orgkb__all {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .7rem; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-elev-2);
  font-size: .9rem; color: var(--text);
}
.orgkb__all-label { font-weight: 500; }
.orgkb__all-label strong { font-weight: 700; }
.orgkb__list {
  /* Viewport-aware so the list shows as many rows as fit while "Select all"
     and the modal footer stay in view; the modal body scrolls as a fallback
     on short screens (see .sources-modal__content/.__body). */
  max-height: min(48vh, 420px); overflow-y: auto;
  border: 1px solid var(--border); border-radius: 10px;
  padding: .3rem; background: var(--bg-elev);
  display: grid; gap: .1rem; align-content: start;
}
.orgkb__row { cursor: pointer; }
.orgkb__row.is-muted { opacity: .65; cursor: default; }
/* Rows locked out once the per-file selection cap is reached. */
.orgkb__row.is-locked { opacity: .45; cursor: not-allowed; }
.orgkb__state { padding: 1.4rem .6rem; text-align: center; }
/* Live "N of 25 files selected" cap counter. */
.orgkb__cap { padding: 0 .2rem; }
.orgkb__cap.is-max { color: var(--danger, #dc2626); font-weight: 600; }
/* Square tick used by the select-all master and each file row. */
.orgkb__box { position: absolute; opacity: 0; pointer-events: none; }
.orgkb__tick {
  width: 16px; height: 16px; border-radius: 5px;
  border: 1.5px solid var(--border-strong); background: var(--bg-elev);
  flex: 0 0 16px; position: relative; transition: border-color .12s, background .12s;
}
.orgkb__tick::after {
  content: ""; position: absolute; left: 4.5px; top: 1.5px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); transform-origin: center;
  transition: transform .12s;
}
.orgkb__box:checked + .orgkb__tick { background: var(--brand); border-color: var(--brand); }
.orgkb__box:checked + .orgkb__tick::after { transform: rotate(45deg) scale(1); }
.orgkb__box:focus-visible + .orgkb__tick { box-shadow: 0 0 0 3px var(--brand-50); }
.orgkb__name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sources-empty {
  display: grid; place-items: center; text-align: center;
  gap: .35rem; padding: 2rem 1rem;
  color: var(--text-muted);
  border: 1px dashed var(--border-strong); border-radius: 12px;
  background: var(--bg-elev-2);
  min-height: 280px;
  align-content: center;
}
.sources-empty__title { color: var(--text); font-weight: 600; font-size: .95rem; }
.sources-empty__sub { font-size: .82rem; margin: 0 0 .65rem; max-width: 28rem; }
.sources-web__input { display: flex; gap: .5rem; width: min(420px, 100%); }
.sources-web__input .form-control { flex: 1; }

.sources-modal__footer {
  display: flex; justify-content: flex-end; gap: .5rem;
  padding: .85rem 1.25rem 1.1rem;
  border-top: 1px solid var(--border);
  background: var(--bg-elev-2);
}

/* ==========================================================================
   Research run — focus shell (no sidebar)
   Used by /ask/run/ — full-bleed two pane layout.
   ========================================================================== */
.focus-shell {
  /* Leave room for the fixed global statusbar (footer) at the bottom.
     Use a BOUNDED height (not min-height) so the `1fr` content row is
     constrained to the viewport and the inner `.research-pane__body`
     scrolls internally — which is what the sticky header, sticky
     follow-up composer and the scroll-to-latest button all rely on.
     With min-height the shell grew past the viewport and the whole
     window scrolled, so per-frame auto-scroll had nothing to pin. */
  height: calc(100vh - var(--statusbar-h, 0px));
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bg);
  overflow: hidden;
}

/* ---------- top bar ---------- */
.focus-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 1rem;
  padding: .6rem 1rem;
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}
.focus-topbar__left {
  display: flex; align-items: center; gap: .65rem;
  min-width: 0; flex: 1;
}
.focus-topbar__right {
  display: flex; align-items: center; gap: .5rem;
  flex-shrink: 0;
}
.focus-back {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--bg-elev-2); color: var(--text-muted);
  border: 1px solid var(--border);
  transition: background-color .14s, color .14s, transform .04s;
}
.focus-back:hover { background: var(--bg-tint); color: var(--text); }
.focus-back:active { transform: translateY(1px); }
.focus-topbar__brand { display: flex; align-items: center; gap: .5rem; }
.focus-topbar__brand .sidebar__brand-mark {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--surface-ink); color: var(--ink-fg);
  display: grid; place-items: center;
  font-family: var(--font-serif); font-weight: 500;
}
.focus-topbar__brand .focus-topbar__logo {
  width: 26px; height: 26px; display: block; flex: 0 0 auto;
}
/* Devil's Advocate: the brand tile carries the mask icon, not a letter. */
.focus-topbar__brand .da-brand-mark svg { width: 16px; height: 16px; }
[data-theme="dark"] .focus-topbar__brand .focus-topbar__logo {
  content: url("../img/logo/new-short-dark.svg");
}
.focus-topbar__brand-text {
  font-weight: 500; letter-spacing: -.005em; font-size: .92rem;
}
.focus-topbar__divider {
  width: 1px; height: 20px; background: var(--border-strong);
  margin: 0 .15rem;
}
.focus-topbar__query {
  display: flex; align-items: center; gap: .55rem;
  min-width: 0; flex: 1;
}
.focus-topbar__mode { flex-shrink: 0; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- team-workspace pill (trust cue in the top bar) ---------- */
.team-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  flex-shrink: 0;
  padding: .28rem .5rem .28rem .32rem;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--bg-elev), var(--bg-elev-2));
  border: 1px solid var(--border-strong);
  text-decoration: none; color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.team-pill:hover {
  border-color: var(--brand);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 18%, transparent);
  transform: translateY(-1px);
}
/* Centered variant for the Ask home hero — sits above the eyebrow.
   The hero head is a `justify-items: center` grid, so it centers itself. */
.team-pill--center { margin-bottom: .25rem; }

/* Simple variant — just a status dot + the team name. Symmetric padding
   since there's no leading avatar/mark to offset. */
.team-pill--simple { padding: .28rem .6rem; gap: .4rem; }
.team-pill--simple .dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent);
}
.team-pill--simple .team-pill__name { max-width: 22ch; }

/* Solo nudge — shown when the active workspace is the user's private space.
   Amber-tinted to read as a gentle "switch to a team" prompt, not an error. */
.team-pill--nudge {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--warn) 10%, var(--bg-elev)),
    color-mix(in srgb, var(--warn) 6%, var(--bg-elev-2)));
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border-strong));
}
.team-pill--nudge:hover {
  border-color: var(--warn);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--warn) 22%, transparent);
}
.team-pill__mark--nudge {
  background: var(--warn-50);
  color: var(--warn);
  text-shadow: none;
}
.team-pill__badge--nudge { background: var(--warn-50); color: var(--warn); }
.team-pill__mark {
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 7px;
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: .8rem;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
.team-pill__body {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0; line-height: 1.1;
}
.team-pill__name {
  font-weight: 600; font-size: .82rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 13ch;
}
.team-pill__meta {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .68rem; font-weight: 500; color: var(--text-muted);
}
.team-pill__badge {
  display: inline-flex; align-items: center; gap: .3rem;
  flex-shrink: 0;
  padding: .14rem .45rem;
  border-radius: 999px;
  font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--ok-50); color: var(--ok);
}
.team-pill__badge .dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}

@media (max-width: 1100px) {
  .team-pill__body { display: none; }
  .team-pill__badge { display: none; }
}
.focus-topbar__q {
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0; max-width: 46ch;
  font-size: .92rem;
  color: var(--text);
}

.focus-topbar__status {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .78rem; font-weight: 600;
  padding: .25rem .55rem;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: 999px;
}
.focus-topbar__status.status--info { color: var(--info); }
.focus-topbar__status.status--ok   { color: var(--ok); }
.focus-topbar__status.status--warn { color: var(--warn); }
.focus-topbar__status .dot {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent);
}
.focus-topbar__status.status--info .dot { animation: pulse-dot 1.2s ease-in-out infinite; }
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 18%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, currentColor 6%, transparent); }
}
.focus-meter {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .55rem;
  font-size: .76rem; color: var(--text-muted);
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: 999px;
}
.focus-meter--model { color: var(--text); }
/* Meter cluster (conversation-total usage) — click anywhere on it to copy. */
.focus-meters {
  display: inline-flex; align-items: center; gap: .4rem;
  cursor: pointer; border-radius: 999px;
  transition: opacity .12s ease;
  position: relative;
}
.focus-meters:hover { opacity: .85; }
.focus-meters.is-copied::after {
  content: "Copied"; position: absolute; top: calc(100% + .35rem); right: 0;
  font-size: .7rem; font-weight: 600; color: var(--ok);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; padding: .15rem .45rem; white-space: nowrap;
  box-shadow: var(--shadow);
}

.focus-topbar__actions {
  display: inline-flex; align-items: center; gap: .25rem;
  padding-left: .5rem; margin-left: .25rem;
  border-left: 1px solid var(--border);
}
.focus-topbar__split { margin-left: .25rem; }

@media (max-width: 992px) {
  .focus-meter, .focus-meters, .focus-topbar__divider { display: none; }
  .focus-topbar__brand-text { display: none; }
}

/* ---------- two-pane research grid ---------- */
.research-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 0;
  min-height: 0;
}
@media (max-width: 1100px) {
  .research-grid { grid-template-columns: minmax(0, 1fr) 380px; }
}
@media (max-width: 880px) {
  .research-grid { grid-template-columns: 1fr; }
}
.research-pane {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
}
.research-pane--answer {
  border-right: 1px solid var(--border);
  background: var(--bg-elev);
}
.research-pane--sources { background: var(--bg); }

/* While a fresh run is streaming we hide the sources rail entirely and let the
   answer take the full width; once the `sources` SSE frame populates the rail
   we drop --solo and the aside animates in (see .is-revealing below). */
.research-grid--solo { grid-template-columns: minmax(0, 1fr); }
.research-grid--solo .research-pane--sources { display: none; }
.research-grid--solo .research-pane--answer { border-right: 0; }

@keyframes sources-reveal {
  from { opacity: 0; transform: translateX(28px); }
  to   { opacity: 1; transform: translateX(0); }
}
.research-pane--sources.is-revealing {
  animation: sources-reveal .5s cubic-bezier(.2, .7, .3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .research-pane--sources.is-revealing { animation: none; }
}

.research-pane__head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem;
  padding: .85rem 1.4rem;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 5;
  background: inherit;
}
.research-pane__head-right { display: flex; gap: .25rem; }
.research-pane__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 1.05rem; letter-spacing: -.012em; margin: 0;
}

/* ---------- left pane: tabs ---------- */
.research-tabs { display: inline-flex; gap: 0; }
.research-tabs__item {
  border: 0; background: transparent;
  padding: .5rem .8rem;
  font-size: .88rem; font-weight: 500;
  color: var(--text-subtle); cursor: pointer;
  border-radius: 8px;
}
.research-tabs__item:hover { color: var(--text); background: var(--bg-elev-2); }
.research-tabs__item.is-active {
  color: var(--text);
  background: var(--bg-elev-2);
  box-shadow: inset 0 -2px 0 var(--brand);
}

/* ---------- left pane: scrolling body ---------- */
.research-pane__body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  min-width: 0;
  overflow-wrap: anywhere;   /* inherits to all content — long tokens wrap */
  padding: 1.8rem clamp(1.25rem, 5vw, 3rem) 8rem;
  scroll-behavior: smooth;
}
/* ---------- threaded follow-up: prior conversation, shown above the new turn ---------- */
/* The earlier turns lead the page; the "Latest follow-up" divider closes the
   section into the current question, which the page scrolls to on load. */
.research-thread { margin-bottom: 1.4rem; }
.research-thread[hidden] { display: none; }
.research-thread__eyebrow { margin-bottom: .9rem; }
.thread-turn {
  border-left: 2px solid var(--border);
  padding: 0 0 .2rem 1rem;
  margin-bottom: 1.3rem;
}
.thread-turn__q {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  margin-bottom: .4rem;
}
.thread-turn__role {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-subtle);
}
.thread-turn__qtext {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 1.02rem; line-height: 1.3; color: var(--text);
  text-decoration: none; border-bottom: 1px solid transparent;
}
.thread-turn__qtext:hover { border-bottom-color: var(--border-strong); }
/* Prior answers read as supporting context — slightly muted and tighter than
   the live answer so the eye lands on the latest turn. */
.thread-turn__a { color: var(--text-muted); font-size: .95rem; }
.thread-turn__a > :first-child { margin-top: 0; }
/* "Latest follow-up" divider between the thread and the current question. */
.research-thread__now {
  display: flex; align-items: center; gap: .75rem;
  margin: .4rem 0 1.4rem; color: var(--text-subtle);
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.research-thread__now::before,
.research-thread__now::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

.research-question { margin-bottom: 1.6rem; }
.research-question__text {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(1.35rem, 2.1vw, 1.75rem); line-height: 1.25;
  letter-spacing: -.018em; margin: .35rem 0 .35rem;
  max-width: 92ch;
}

/* Inline rename — a pencil in the top bar (next to .focus-topbar__q) turns the
   page heading ([data-run-title-edit]) into an editable field. See the shared
   partials/_run_title.html. */
.focus-topbar__rename {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--text-muted, #6b7280);
  opacity: .6; transition: opacity .12s ease, background-color .12s ease, color .12s ease;
}
.focus-topbar__query:hover .focus-topbar__rename { opacity: .85; }
.focus-topbar__rename:hover { opacity: 1; background: var(--surface-2, rgba(0,0,0,.06)); color: var(--text, #1f2430); }
/* While editing, relax the title's ellipsis clamp so the full text is visible
   and show a field-like highlight in the top bar itself. */
.focus-topbar__q.is-editing {
  outline: none; overflow: visible; max-width: 60ch;
  background: var(--surface-1, #fff);
  border: 1px solid var(--accent, #6b7cff);
  border-radius: 6px; padding: .08rem .4rem;
  color: var(--text);
}
.research-question__body {
  margin: .35rem 0 .25rem; max-width: 92ch;
  color: var(--text-muted); font-size: .98rem; line-height: 1.55;
}
.research-question__meta { margin-top: .25rem; }

/* ---------- thinking block ---------- */
.thinking {
  background: linear-gradient(180deg, var(--bg-elev-2), color-mix(in srgb, var(--brand-50) 50%, var(--bg-elev-2)));
  border: 1px dashed color-mix(in srgb, var(--brand) 35%, var(--border));
  border-radius: var(--radius);
  padding: 0;
  margin: 0 0 1.6rem;
  max-width: 92ch;
  overflow: hidden;
}
.thinking__head {
  display: flex; align-items: center; gap: .55rem;
  padding: .7rem 1rem;
  cursor: pointer; list-style: none;
  font-weight: 500; font-size: .9rem;
  color: var(--text);
}
.thinking__head::-webkit-details-marker { display: none; }
.thinking__icon {
  width: 24px; height: 24px; border-radius: 7px;
  background: var(--brand-50); color: var(--brand);
  display: grid; place-items: center; flex-shrink: 0;
}
.thinking__title { font-weight: 600; letter-spacing: -.005em; }
.thinking__hint  { font-size: .78rem; }
.thinking__chev  {
  margin-left: auto; color: var(--text-subtle);
  transition: transform .18s ease;
}
.thinking[open] .thinking__chev { transform: rotate(180deg); }
.thinking__steps {
  list-style: none; padding: 0 1rem 1rem; margin: 0;
  display: grid; gap: .45rem;
  font-size: .88rem; color: var(--text-muted);
}
.thinking__steps li {
  display: grid; grid-template-columns: 78px 1fr; gap: .65rem;
  padding: .5rem .7rem;
  background: color-mix(in srgb, var(--bg-elev) 80%, transparent);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
}
.thinking__step-tag {
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand);
  background: var(--brand-50);
  padding: 2px 8px; border-radius: 999px;
  text-align: center;
  align-self: start;
}

/* ---------- markdown answer ---------- */
.answer-md {
  max-width: 92ch;
  font-size: 1rem; line-height: 1.7; color: var(--text);
  /* Long unbreakable runs (URLs, S3 keys, hashes the model echoes) must wrap
     instead of widening the column and shoving the sources pane off-screen. */
  overflow-wrap: anywhere;
  min-width: 0;
}
.answer-md > * + * { margin-top: 1rem; }
.answer-md h2 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 1.35rem; letter-spacing: -.012em;
  margin: 1.8rem 0 .25rem;
}
.answer-md h2:first-child { margin-top: .25rem; }
.answer-md h3 {
  font-weight: 600; font-size: 1.04rem; letter-spacing: -.006em;
  margin: 1.3rem 0 .2rem;
}
.answer-md p { margin: 0; }
.answer-md ul, .answer-md ol { padding-left: 1.4rem; margin: 0; }
.answer-md ul li, .answer-md ol li { margin: .25rem 0; }
.answer-md blockquote {
  margin: 1.25rem 0 0;
  padding: 0 0 0 1rem;
  border-left: 3px solid var(--border-strong);
  color: var(--text-muted); font-style: italic;
}
.answer-md code {
  font-family: var(--font-mono); font-size: .9em;
  background: var(--bg-elev-2); padding: 1px 6px; border-radius: 4px;
}
.answer-md pre {
  font-family: var(--font-mono); font-size: .88em;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  overflow-x: auto;
  line-height: 1.55;
}
.answer-md pre code {
  background: transparent; padding: 0; border-radius: 0;
}
.answer-md a {
  color: var(--brand);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.answer-md a:hover { color: color-mix(in srgb, var(--brand) 75%, #000); }
.answer-md strong { font-weight: 600; color: var(--text); }
.answer-md em { font-style: italic; }
.answer-md hr {
  border: 0; border-top: 1px solid var(--border);
  margin: 1.6rem 0;
}
.answer-md h4 {
  font-weight: 600; font-size: .98rem; letter-spacing: -.004em;
  margin: 1.1rem 0 .2rem;
}
.answer-md h5, .answer-md h6 {
  font-weight: 600; font-size: .92rem;
  margin: 1rem 0 .2rem; color: var(--text-muted);
}
.answer-md img {
  max-width: 100%; height: auto;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* GFM tables — professional, scrollable, zebra-rowed. */
.answer-md table {
  width: 100%;
  margin: 1.2rem 0 .25rem;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .94rem;
  line-height: 1.5;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface);
}
/* Wrap tables in a scroll container at narrow widths.
   Without a wrapper, `overflow-x` on the table itself doesn't work
   reliably, so we apply it to a generated ::after pseudo-frame instead. */
.answer-md .table-wrap,
.answer-md table { display: table; }
.answer-md thead {
  background: var(--bg-elev-2);
}
.answer-md thead th {
  font-weight: 600;
  text-align: left;
  color: var(--text);
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
  letter-spacing: -.002em;
}
.answer-md tbody td {
  padding: .6rem .85rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.answer-md tbody tr:last-child td { border-bottom: 0; }
.answer-md tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-elev-2) 45%, transparent); }
.answer-md tbody tr:hover td { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.answer-md th[align="right"],
.answer-md td[align="right"] { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: .92em; }
.answer-md th[align="center"],
.answer-md td[align="center"] { text-align: center; }
.answer-md td code { font-size: .85em; }

/* Scroll wrap (injected by the streaming JS / hand-applied for server
   renders) — keeps wide tables from blowing out the column. */
.answer-md .md-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.2rem 0 .25rem;
  border-radius: var(--radius-sm);
}
.answer-md .md-table-wrap > table {
  margin: 0;
  min-width: 100%;
}

/* Hover "Copy" button on markdown tables (md-table-copy.js).
   The shell is the positioning context; the inner .md-table-wrap keeps its
   horizontal scroll, so the button stays pinned while wide tables scroll. */
.md-table-shell {
  position: relative;
  margin: 1.2rem 0 .25rem;
}
.md-table-shell > .md-table-wrap { margin: 0; }
.md-table-copy {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .5rem;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1;
  color: var(--text-subtle);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .12s ease, transform .12s ease, color .12s, border-color .12s;
}
.md-table-shell:hover .md-table-copy,
.md-table-copy:focus-visible {
  opacity: 1;
  transform: translateY(0);
}
.md-table-copy:hover {
  color: var(--brand);
  border-color: var(--brand);
}
.md-table-copy:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--ring); }
.md-table-copy.is-copied { color: var(--brand); border-color: var(--brand); opacity: 1; }
.md-table-copy.is-failed { color: var(--danger, #c0392b); border-color: var(--danger, #c0392b); opacity: 1; }
/* Touch / coarse-pointer devices have no hover — keep the button visible. */
@media (hover: none) {
  .md-table-copy { opacity: 1; transform: none; }
}
/* Keep chat spacing compact (chat tables carry their own bottom margin). */
.chat-msg__bubble .md-table-shell { margin: .2rem 0 .6rem; }

.callout {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: .85rem 1rem;
  font-style: normal !important; color: var(--text) !important;
  font-size: .95rem;
}
.callout--gold { border-left-color: var(--gold); background: var(--gold-50); }

/* =========================================================================
   Rich draft editor — formatting toolbar, AI-on-select bubble + preview panel
   (templates/ai_draft/run.html). Markdown stays the source of truth; this is
   the editing chrome layered over the contenteditable .answer-md.
   ========================================================================= */
.answer-md--editing {
  outline: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 1px var(--border-strong), 0 0 0 4px color-mix(in srgb, var(--brand) 8%, transparent);
  padding: 1rem 1.1rem;
  margin: -.5rem -.25rem 0;
  transition: box-shadow .15s ease;
  cursor: text;
}
.answer-md--editing:focus { box-shadow: 0 0 0 1px var(--brand), 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent); }
.answer-md--editing ::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); }
.answer-md-source {
  width: 100%; min-height: 60vh;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-elev-2);
  color: var(--text);
  padding: 1rem 1.1rem;
  font-family: var(--font-mono);
  font-size: .86rem; line-height: 1.65;
  resize: vertical;
}
.answer-md-source:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }

/* ---- Formatting toolbar — a full-width bar docked flush beneath the header,
   spanning the whole page as you scroll. It breaks out of the canvas padding
   (negative margins) so it reads as a second header strip; the bar never scales
   (only the page zooms). ---- */
.md-toolbar {
  position: sticky; top: 0; z-index: 12;
  /* Full-bleed: cancel the .doc-canvas padding so the bar reaches every edge. */
  margin: -.6rem clamp(-2.5rem, -4vw, -.75rem) .7rem;
  display: flex; align-items: center; gap: .06rem;
  padding: .4rem clamp(.75rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1);
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  box-shadow: 0 6px 16px -8px rgba(15,18,32,.26), var(--shadow-sm);
  flex-wrap: nowrap;         /* one row across the page width; overflow folds into ⋯ */
}
.md-toolbar[hidden] { display: none; }
/* The folding row of controls — grows to fill, never pushes zoom off the edge. */
.md-toolbar__main {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: .06rem;
}
/* Font family / size pickers — sit at the left, styled to match the buttons. */
.md-toolbar__select {
  flex: 0 0 auto; height: 30px;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .4rem center;
  color: var(--text); font: inherit; font-size: .8rem;
  padding: 0 1.35rem 0 .5rem;
  cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.md-toolbar__select:hover { background-color: var(--bg-elev-2); }
.md-toolbar__select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 14%, transparent); }
.md-toolbar__select--font { min-width: 8.5em; max-width: 11em; text-overflow: ellipsis; }
.md-toolbar__select--size { width: 4.2em; padding-right: 1.2rem; }
.md-toolbar__select--layout { flex: 0 0 auto; min-width: 7em; }
/* Overflow (⋯) button + its pop-out tray of the buttons that didn't fit. */
.md-toolbar__ovbtn { flex: 0 0 auto; }
.md-toolbar__ovbtn[hidden] { display: none; }
.md-toolbar__ovmenu {
  position: fixed; z-index: 1092;
  display: flex; flex-wrap: wrap; align-items: center; gap: .1rem;
  max-width: 260px; padding: .3rem;
  background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  animation: md-ai-pop .14s cubic-bezier(.16,1,.3,1);
}
.md-toolbar__ovmenu[hidden] { display: none; }
.md-toolbar__ovmenu .md-toolbar__sep { display: none; }   /* no stray dividers in the tray */
.md-toolbar__btn {
  position: relative; flex: 0 0 auto;
  width: 30px; height: 30px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-xs);
  background: transparent; color: var(--text-muted);
  line-height: 1; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.md-toolbar__btn svg { display: block; }
.md-toolbar__btn--text {
  width: auto; min-width: 30px; padding: 0 .5rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .01em;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;       /* keep "• List" / "1. List" on a single line */
}
.md-toolbar__btn:hover { background: var(--bg-elev-2); color: var(--text); }
.md-toolbar__btn:active { background: color-mix(in srgb, var(--brand) 12%, transparent); }
.md-toolbar__btn.is-active { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.md-toolbar__sep { flex: 0 0 auto; width: 1px; height: 18px; margin: 0 .22rem; background: var(--border); }

/* Custom tooltip (shows the shortcut) — used across the editor chrome. */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; left: 50%; top: calc(100% + 7px); transform: translateX(-50%);
  z-index: 60; white-space: nowrap;
  padding: .28rem .5rem;
  background: var(--surface-ink); color: var(--ink-fg);
  font-size: .72rem; font-weight: 500; letter-spacing: .01em;
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow);
  opacity: 0; animation: tip-in .12s ease-out .35s forwards;
  pointer-events: none;
}
[data-tip]:hover::before {
  content: ""; position: absolute; left: 50%; top: calc(100% + 2px); transform: translateX(-50%) rotate(45deg);
  width: 7px; height: 7px; background: var(--surface-ink); z-index: 60;
  opacity: 0; animation: tip-in .12s ease-out .35s forwards;
}
@keyframes tip-in { from { opacity: 0; } to { opacity: 1; } }

/* Sidebar links carry data-tip, but their tooltip is driven by the gated
   Bootstrap "lex-tip" (app.js) which only shows when the rail is collapsed or
   the label is truncated. Suppress the global CSS pseudo-tooltip here so a
   sidebar item never shows two tooltips at once. */
.sidebar [data-tip]:hover::after,
.sidebar [data-tip]:hover::before { content: none; display: none; }

/* Dropdown menu (line/paragraph spacing, page layout). */
.doc-menu {
  position: fixed; z-index: 1092; min-width: 188px;
  padding: .35rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  animation: md-ai-pop .14s cubic-bezier(.16,1,.3,1);
}
.doc-menu[hidden] { display: none; }
.doc-menu__label {
  padding: .35rem .55rem .2rem;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-subtle);
}
.doc-menu__sep { height: 1px; margin: .3rem .2rem; background: var(--border); }
.doc-menu__item {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .4rem .55rem;
  border: 0; border-radius: var(--radius-xs);
  background: transparent; color: var(--text);
  font: inherit; font-size: .85rem; text-align: left; cursor: pointer;
}
.doc-menu__item:hover { background: var(--bg-elev-2); }
.doc-menu__check { flex: 0 0 auto; color: var(--brand); opacity: 0; }
.doc-menu__item.is-on .doc-menu__check { opacity: 1; }
.doc-menu__item.is-on { color: var(--brand); font-weight: 600; }

/* ---- Text-colour / highlight picker ---- */
.md-toolbar__btn--color { flex-direction: column; gap: 1px; }
.md-toolbar__colorbar {
  display: block; width: 16px; height: 3px; border-radius: 1px;
  background: currentColor; pointer-events: none;
}
.md-toolbar__colorbar--none {
  background:
    linear-gradient(45deg, transparent 44%, #dc2626 44%, #dc2626 56%, transparent 56%),
    var(--bg-elev-2);
  box-shadow: inset 0 0 0 1px var(--border);
}
.doc-menu--color { min-width: 196px; }
.doc-menu__swatches {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: .28rem;
  padding: .25rem .3rem;
}
.doc-menu__swatch {
  width: 22px; height: 22px; padding: 0; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--text) 18%, transparent);
  border-radius: var(--radius-xs);
  transition: transform .1s ease, box-shadow .1s ease;
}
.doc-menu__swatch:hover {
  transform: scale(1.12);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 45%, transparent);
}
.doc-menu__coloroff .md-toolbar__colorbar {
  width: 16px; height: 16px; border-radius: var(--radius-xs);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* ---- Zoom control (topbar) ---- */
.doc-zoom {
  display: inline-flex; align-items: center; gap: .1rem;
  padding: .1rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-elev-2);
}
.doc-zoom[hidden] { display: none; }
.doc-zoom__btn {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer;
}
.doc-zoom__btn:hover { background: var(--surface); color: var(--text); }
.doc-zoom__val {
  min-width: 44px; height: 24px; padding: 0 .35rem;
  border: 0; background: transparent; color: var(--text);
  font-size: .76rem; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
  border-radius: var(--radius-xs);
}
.doc-zoom__val:hover { background: var(--surface); }

/* ---- AI selection bubble — a clean, professional action bar (blue theme) ---- */
.md-ai-bubble {
  position: fixed; z-index: 1090;
  display: flex; align-items: center; gap: .05rem;
  padding: .25rem;
  background: linear-gradient(135deg, #1d6fd0 0%, #0d6fb8 52%, #0a5a98 100%);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px -8px rgba(13,111,184,.55), 0 2px 8px rgba(10,40,80,.28);
  animation: md-ai-pop .14s cubic-bezier(.16,1,.3,1);
}
.md-ai-bubble[hidden] { display: none; }
.md-ai-bubble__brand {
  display: inline-flex; align-items: center; gap: .28rem;
  padding: 0 .45rem 0 .35rem; height: 28px;
  color: #fff; font-size: .72rem; font-weight: 700;
  letter-spacing: .04em;
}
.md-ai-bubble__btn {
  display: inline-flex; align-items: center; gap: .34rem;
  padding: 0 .55rem; height: 28px;
  border: 0; border-radius: var(--radius-xs);
  background: transparent; color: rgba(255,255,255,.88);
  font-size: .8rem; font-weight: 550; white-space: nowrap; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.md-ai-bubble__btn:hover { background: rgba(255,255,255,.18); color: #fff; }
.md-ai-bubble__ic { flex: 0 0 auto; color: rgba(255,255,255,.78); }
.md-ai-bubble__btn:hover .md-ai-bubble__ic { color: #fff; }
.md-ai-bubble__btn--ask { color: #fff; font-weight: 650; }
.md-ai-bubble__btn--ask .md-ai-bubble__ic { color: #fff; }
.md-ai-bubble__btn--ask:hover { background: rgba(255,255,255,.26); }
.md-ai-bubble__sep { width: 1px; height: 18px; margin: 0 .18rem; background: rgba(255,255,255,.22); }
/* On tight widths, collapse to icons only. */
@media (max-width: 720px) { .md-ai-bubble__lbl { display: none; } .md-ai-bubble__btn { padding: 0 .4rem; } }

/* ---- AI streaming preview panel ---- */
.md-ai-panel {
  position: fixed; z-index: 1091;
  width: min(460px, calc(100vw - 20px));
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: md-ai-pop .16s cubic-bezier(.16,1,.3,1);
}
.md-ai-panel[hidden] { display: none; }
.md-ai-panel__head {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .8rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev-2);
}
.md-ai-panel__title { font-weight: 650; font-size: .88rem; color: var(--text); letter-spacing: -.01em; }
.md-ai-panel__title::before { content: "✦"; color: var(--gold); margin-right: .4rem; }
.md-ai-panel__status {
  margin-left: auto; font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-subtle);
}
.md-ai-panel__status.is-run { color: var(--brand); }
.md-ai-panel__status.is-run::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .35rem;
  border-radius: 50%; background: var(--brand); animation: pulse-dot 1.1s ease-in-out infinite;
  vertical-align: middle;
}
.md-ai-panel__status.is-ok { color: var(--ok, #2a9d63); }
.md-ai-panel__status.is-warn { color: var(--gold-600); }
.md-ai-panel__status.is-err { color: var(--danger, #c0392b); }
.md-ai-panel__x {
  border: 0; background: transparent; color: var(--text-subtle);
  width: 22px; height: 22px; border-radius: var(--radius-xs);
  font-size: .8rem; cursor: pointer; line-height: 1;
}
.md-ai-panel__x:hover { background: var(--bg-elev); color: var(--text); }
.md-ai-panel__ask { display: flex; gap: .4rem; padding: .65rem .8rem 0; }
.md-ai-panel__ask[hidden] { display: none; }
.md-ai-panel__input {
  flex: 1 1 auto; min-width: 0;
  padding: .5rem .7rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg-elev); color: var(--text); font-size: .85rem;
}
.md-ai-panel__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }
.md-ai-panel__body {
  padding: .85rem .9rem;
  max-height: min(46vh, 420px); overflow-y: auto;
  font-size: .92rem; line-height: 1.6; color: var(--text);
}
.md-ai-panel__body:empty { display: none; }
.md-ai-panel__cursor {
  display: inline-block; width: 2px; height: 1.05em; vertical-align: text-bottom;
  background: var(--brand); border-radius: 1px;
  animation: md-ai-blink 1s steps(2) infinite;
}
.md-ai-panel__err { color: var(--danger, #c0392b); font-size: .86rem; }
.md-ai-panel__foot {
  display: flex; align-items: center; gap: .4rem;
  padding: .6rem .8rem;
  border-top: 1px solid var(--border);
  background: var(--bg-elev-2);
}
.md-ai-panel__actions { display: contents; }
.md-ai-panel__actions[hidden] { display: none; }
.md-ai-panel__discard { margin-left: auto; color: var(--text-subtle); }
@keyframes md-ai-pop { from { opacity: 0; transform: translateY(4px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes md-ai-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .md-ai-bubble, .md-ai-panel { animation: none; }
  .md-ai-panel__cursor, .md-ai-panel__status.is-run::before { animation: none; }
}

/* =========================================================================
   Document canvas — the draft as a printable "page" floating on a soft canvas,
   with the sources rail moved to a slide-in drawer. (ai_draft/run.html)
   ========================================================================= */
.research-grid--canvas { grid-template-columns: minmax(0, 1fr); }
.research-pane--canvas { border-right: 0; }

/* The scrolling canvas surface — a faint dotted texture over a soft grey. */
.doc-canvas {
  background-color: color-mix(in srgb, var(--bg) 86%, var(--text) 8%);
  background-image: radial-gradient(circle at 1px 1px,
    color-mix(in srgb, var(--text) 7%, transparent) 1px, transparent 0);
  background-size: 22px 22px;
  padding: .6rem clamp(.75rem, 4vw, 2.5rem) 2.5rem;
}
.doc-stage { width: 100%; margin: 0 auto; }

/* Brief header — lighter, sits on the canvas above the page, aligned to it. */
.doc-brief {
  width: calc(210mm * var(--doc-zoom, 1)); max-width: 100%; margin: .4rem auto 1rem; padding: 0 .25rem;
}
.doc-brief .research-question__text { font-size: clamp(1.2rem, 2.4vw, 1.6rem); }

/* The page itself — true A4 (210×297mm) with 1-inch (25.4mm) margins, so what
   you edit is what prints / exports. Only the page scales on zoom (set via JS:
   `zoom`), so its layout footprint grows and the canvas scrolls correctly. */
.doc-paper {
  position: relative;
  width: 210mm; max-width: 100%; margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(15,18,32,.08), 0 22px 60px -26px rgba(15,18,32,.32);
  padding: 25.4mm;
  min-height: 297mm;
  transition: box-shadow .2s ease;
}
.doc-paper:focus-within {
  box-shadow: 0 1px 3px rgba(15,18,32,.08), 0 26px 64px -22px rgba(15,18,32,.4);
}

/* Serif document body — reads like a real brief, and matches the .docx/PDF.
   Line height and paragraph spacing are driven by the document's CSS vars,
   set from the toolbar's spacing menu (--doc-lh / --doc-para). */
.answer-md--doc {
  font-family: var(--doc-font, Georgia, "Times New Roman", "Noto Serif", serif);
  font-size: var(--doc-fs, 1.02rem); line-height: var(--doc-lh, 1.85); color: var(--text);
  -webkit-font-smoothing: auto;
}
.answer-md--doc > * + * { margin-top: var(--doc-para, .95em); }
.answer-md--doc h2, .answer-md--doc h3,
.answer-md--doc h4 { font-family: inherit; letter-spacing: -.005em; }
.answer-md--doc code, .answer-md--doc pre { font-family: var(--font-mono); }
.answer-md--doc p { text-align: justify; }

/* Lists — clear hanging indent, aligned markers, sensible margins + nesting.
   Scoped under .doc-paper so the doc indent reliably beats the generic
   `.answer-md ul` rule (equal specificity otherwise) and any base reset that
   zeroes list padding — otherwise the `outside` markers collapse back to the
   body's left edge and the bullets read as un-indented. The whole list is
   inset from the body with a left margin (carries the markers in too); the
   padding only holds the marker→text gap. */
.doc-paper .answer-md--doc ul,
.doc-paper .answer-md--doc ol { margin: var(--doc-para, .95em) 0 0 1em; padding-left: 1.5em; list-style-position: outside; }
.doc-paper .answer-md--doc li { margin: .35em 0; padding-left: .25em; text-align: left; }
.doc-paper .answer-md--doc li::marker { color: var(--text-muted); font-weight: 600; }
.doc-paper .answer-md--doc ul { list-style: disc; }
.doc-paper .answer-md--doc ol { list-style: decimal; }
.doc-paper .answer-md--doc ul ul { list-style: circle; }
.doc-paper .answer-md--doc ul ul ul { list-style: square; }
.doc-paper .answer-md--doc li > ul,
.doc-paper .answer-md--doc li > ol { margin: .3em 0 .15em; padding-left: 1.5em; }
.doc-paper .answer-md--doc li > p { margin: 0; }

/* Editing feels seamless on the page — drop the standalone focus ring. */
.doc-paper .answer-md--editing { box-shadow: none; padding: 0; margin: 0; }
.doc-paper .answer-md--editing:focus { box-shadow: none; }

/* ---- Pageless layout — one continuous sheet, no page breaks ---- */
.doc-paper.is-pageless {
  width: calc(min(150ch, 100%)); min-height: 0;
  padding: clamp(1.6rem, 3.5vw, 2.6rem) clamp(1.6rem, 5vw, 3.4rem);
}

/* ---- Real page breaks — non-editable spacers inserted between blocks. Each
   gives the bottom margin of one page, a grey gap (the space between sheets),
   and the top margin of the next, with the page number stamped in the footer
   (bottom margin). Heights are set in mm by JS, so zoom scales them cleanly. */
.doc-pagebreak {
  position: relative; width: 100%;
  user-select: none; -webkit-user-modify: read-only;
}
.doc-pagebreak__gap {
  position: absolute; left: -25.4mm; right: -25.4mm;
  background: color-mix(in srgb, var(--bg) 86%, var(--text) 8%);   /* canvas grey */
  box-shadow: inset 0 8px 8px -8px rgba(15,18,32,.28),
              inset 0 -8px 8px -8px rgba(15,18,32,.28);
}
.doc-pagebreak__foot {
  position: absolute; left: 0; right: 0; transform: translateY(-100%);
  padding-bottom: 4px; text-align: center;
  font-family: var(--font-sans, system-ui), sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: .03em;
  color: var(--text-faint);
}
/* The spacer must occupy EXACTLY the mm height JS sets for it. The paragraph
   spacing rule (`.answer-md--doc > * + *`) otherwise adds a stray margin-top to
   the spacer AND to the block that follows it. That extra margin isn't in the
   pagination math, so it pushes each page past A4 — and because pages 2+ re-anchor
   their height off the (now margin-shifted) block position, the error compounds
   on every successive page. Zeroing both keeps the spacer flush after the last
   block of a page and the next page's first block flush at the top of its
   content area, so every sheet stays a true 297mm. (Higher specificity than the
   `> * + *` rule, so it wins.) */
.answer-md--doc > .doc-pagebreak,
.answer-md--doc > .doc-pagebreak + * { margin-top: 0; }

/* ---- Find-in-document bar + highlights ---- */
::highlight(doc-find) { background: color-mix(in srgb, var(--gold) 38%, transparent); }
::highlight(doc-find-current) { background: var(--gold); color: #1a1407; }
/* The AI selection bubble/panel takes focus away from the editable, which greys
   out the native ::selection — paint the AI target range so it stays clearly
   highlighted for as long as the AI bar/panel is acting on it. */
::highlight(ai-sel) { background: color-mix(in srgb, var(--brand) 30%, transparent); }
.doc-find {
  position: fixed; top: calc(var(--topbar-h, 52px) + .5rem); right: 1.5rem; z-index: 1093;
  display: flex; align-items: center; gap: .3rem;
  padding: .3rem .35rem .3rem .55rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: var(--shadow);
  color: var(--text-subtle);
}
.doc-find[hidden] { display: none; }
.doc-find__input {
  width: 180px; border: 0; background: transparent; outline: none;
  font: inherit; font-size: .85rem; color: var(--text);
}
.doc-find__count {
  font-size: .74rem; font-variant-numeric: tabular-nums; color: var(--text-subtle);
  padding: 0 .15rem; white-space: nowrap;
}
.doc-find__nav, .doc-find__x {
  width: 26px; height: 26px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer;
}
.doc-find__nav:hover, .doc-find__x:hover { background: var(--bg-elev-2); color: var(--text); }

/* ---- Autosave status chip (topbar) ---- */
.doc-save {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 0 .5rem; height: 28px;
  font-size: .78rem; font-weight: 500; color: var(--text-subtle);
  white-space: nowrap; user-select: none;
}
.doc-save[hidden] { display: none; }
.doc-save__ok { color: var(--ok, #2a9d63); }
.doc-save__spin {
  display: none; width: 12px; height: 12px; flex: 0 0 auto;
  border: 2px solid var(--border-strong); border-top-color: var(--text-subtle);
  border-radius: 50%; animation: spin .7s linear infinite;
}
.doc-save[data-state="saving"] .doc-save__ok { display: none; }
.doc-save[data-state="saving"] .doc-save__spin { display: inline-block; }
.doc-save[data-state="error"] { color: var(--danger, #c0392b); }
.doc-save[data-state="error"] .doc-save__ok,
.doc-save[data-state="error"] .doc-save__spin { display: none; }

/* Redraft composer — same card as Ask / Interact, centred under the page,
   compact so it doesn't eat the canvas. */
.research-pane--canvas .research-followup {
  width: calc(210mm * var(--doc-zoom, 1)); max-width: 100%; margin: 0 auto;
  padding: .5rem clamp(.5rem, 3vw, 1rem) .6rem;
  background: linear-gradient(180deg, transparent,
    color-mix(in srgb, var(--bg) 86%, var(--text) 8%) 45%);
}
.research-pane--canvas .research-followup__inner {
  padding: .35rem .4rem .35rem .7rem; align-items: center; border-radius: 999px;
}
.research-pane--canvas .research-followup__inner > svg:first-child { color: var(--gold); flex: 0 0 auto; }
.research-pane--canvas .research-followup__input {
  min-height: 0; max-height: 88px; padding: .25rem 0;
}
.research-pane--canvas .research-followup .btn-primary { border-radius: 999px; }

/* ---- Export menu ---- */
.doc-export { position: relative; }
.doc-export__menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 230px; padding: .35rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  animation: md-ai-pop .14s cubic-bezier(.16,1,.3,1);
}
.doc-export__menu[hidden] { display: none; }
.doc-export__item {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .55rem .6rem;
  border: 0; border-radius: var(--radius-xs);
  background: transparent; color: var(--text);
  font: inherit; font-size: .86rem; text-align: left; text-decoration: none; cursor: pointer;
}
.doc-export__item:hover { background: var(--bg-elev-2); color: var(--text); }
.doc-export__item svg { color: var(--text-subtle); flex: 0 0 auto; }
.doc-export__item span { display: flex; flex-direction: column; line-height: 1.25; }
.doc-export__sub { font-size: .74rem; color: var(--text-subtle); }

/* ---- Sources / details drawer ---- */
.doc-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1100;
  width: min(420px, 92vw);
  background: var(--bg);
  border-left: 1px solid var(--border-strong);
  box-shadow: -24px 0 60px -28px rgba(15,18,32,.4);
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.16,1,.3,1);
  overflow-y: auto; overscroll-behavior: contain;
}
.doc-drawer.is-open { transform: translateX(0); }
.doc-drawer__close {
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: var(--radius-xs);
  background: var(--surface); color: var(--text-muted); cursor: pointer;
}
.doc-drawer__close:hover { background: var(--bg-elev-2); color: var(--text); }
.doc-drawer__scrim {
  position: fixed; inset: 0; z-index: 1099;
  background: rgba(15,18,32,.32);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: page-loader-in .18s ease-out;
}
.doc-drawer__scrim[hidden] { display: none; }

/* ---- AI discoverability coachmark ---- */
.doc-coach {
  position: fixed; z-index: 1085; left: 50%; bottom: 5.5rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: .6rem;
  max-width: 92vw; padding: .6rem .7rem .6rem .9rem;
  background: var(--surface-ink); color: var(--ink-fg);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  font-size: .84rem; font-weight: 500;
  animation: md-ai-pop .22s cubic-bezier(.16,1,.3,1);
}
.doc-coach[hidden] { display: none; }
.doc-coach__spark { color: var(--gold); font-size: 1rem; }
.doc-coach kbd {
  font: inherit; font-size: .76rem; font-weight: 600;
  padding: .05rem .4rem; border-radius: 6px;
  background: color-mix(in srgb, var(--ink-fg) 14%, transparent);
}
.doc-coach__x {
  margin-left: .2rem; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: color-mix(in srgb, var(--ink-fg) 12%, transparent); color: inherit;
  font-size: .8rem; line-height: 1;
}
.doc-coach__x:hover { background: color-mix(in srgb, var(--ink-fg) 22%, transparent); }

@media (max-width: 880px) {
  .doc-canvas { padding: .5rem .5rem 4.5rem; }
  .doc-paper { padding: 1.4rem 1.2rem; }
  /* Keep the full-bleed bar matched to the narrower canvas padding. */
  .md-toolbar { margin: -.5rem -.5rem .7rem; padding: .4rem .5rem; }
}

/* ---- Print / Save-as-PDF — isolate the page, drop all chrome (the browser
   paginates A4 natively; the screen-only page spacers are removed). ---- */
@media print {
  .sidebar, .statusbar, .focus-topbar, .doc-brief, .thinking,
  .md-toolbar, .md-ai-bubble, .md-ai-panel, .doc-coach,
  .doc-find, .doc-menu, .doc-pagebreak,
  .research-followup, .scroll-bottom, .doc-drawer, .doc-drawer__scrim,
  .page-loader { display: none !important; }
  html, body, .focus-shell, .research-grid, .research-pane,
  .research-pane__body, .doc-canvas, .doc-stage {
    height: auto !important; overflow: visible !important;
    background: #fff !important; display: block !important;
  }
  .doc-canvas { padding: 0 !important; background-image: none !important; }
  .doc-stage { max-width: none; }
  .doc-paper {
    width: auto !important; max-width: none; margin: 0; padding: 0;
    border: 0; border-radius: 0; box-shadow: none; min-height: 0;
    zoom: 1 !important;                 /* never print the on-screen zoom */
  }
  .answer-md--doc {
    color: #000 !important;
    font-family: var(--doc-font, Georgia, "Times New Roman", serif);
    font-size: var(--doc-fs, 11.5pt); line-height: var(--doc-lh, 1.5);
  }
  .answer-md--doc a { color: #000 !important; text-decoration: none; }
  /* Keep headings/tables/list items from splitting across pages. */
  .answer-md--doc h1, .answer-md--doc h2, .answer-md--doc h3, .answer-md--doc h4 { break-after: avoid; }
  .answer-md--doc table, .answer-md--doc blockquote, .answer-md--doc pre,
  .answer-md--doc li { break-inside: avoid; }
  /* True A4 pagination with a page-number footer (engines that support it;
     others get the browser's own print-dialog footer). */
  @page {
    size: A4; margin: 25.4mm;
    @bottom-right { content: "Page " counter(page) " of " counter(pages);
                    font: 9pt Georgia, serif; color: #555; }
  }
}

/* ---------- Page loader + skeleton ---------- */
.page-loader {
  position: fixed; inset: 0; z-index: 1080;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  -webkit-backdrop-filter: blur(7px) saturate(1.1);
  backdrop-filter: blur(7px) saturate(1.1);
  animation: page-loader-in .18s ease-out;
}
.page-loader[hidden] { display: none; }
/* A real modal: a centred card with depth, an entrance animation, a branded
   spinner and an indeterminate progress bar. */
.page-loader__card {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  width: min(360px, 92vw);
  padding: 2rem 1.75rem 1.5rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .42), 0 2px 8px -2px rgba(0, 0, 0, .22);
  animation: page-loader-card-in .24s cubic-bezier(.16, 1, .3, 1);
}
@keyframes page-loader-card-in {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.page-loader__spinner {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--brand) 16%, transparent);
  border-top-color: var(--brand);
  animation: spin .7s linear infinite;
}
.page-loader__title {
  font-weight: 650; font-size: 1.06rem; letter-spacing: -.012em; color: var(--text);
}
.page-loader__sub { color: var(--text-muted); font-size: .88rem; margin-top: .18rem; }
.page-loader__bar {
  width: 100%; height: 3px; margin-top: .35rem;
  border-radius: 999px; overflow: hidden;
  background: color-mix(in srgb, var(--border-strong) 45%, transparent);
}
.page-loader__bar span {
  display: block; height: 100%; width: 38%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  animation: page-loader-bar 1.15s ease-in-out infinite;
}
@keyframes page-loader-bar {
  0%   { transform: translateX(-130%); }
  100% { transform: translateX(330%); }
}
@media (prefers-reduced-motion: reduce) {
  .page-loader__card,
  .page-loader__spinner,
  .page-loader__bar span { animation: none !important; }
}

/* Ask-run loader — a compact, centred card with a single rotating status line
   (see [data-loader-msg]) instead of a skeleton stack. */
.run-loader__card {
  width: min(420px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.25rem 2rem;
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .35);
  display: grid;
  justify-items: center;
  text-align: center;
  gap: .9rem;
}
.run-loader__spinner {
  width: 34px; height: 34px;
  border: 3px solid var(--border-strong);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.run-loader__msg {
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--text);
  min-height: 1.5em;
  transition: opacity .18s ease;
}
.run-loader__sub { color: var(--text-muted); font-size: .88rem; }

/* shimmer skeleton — used in the loader card and inside the answer pane
   while we wait for the first streamed delta. */
.skeleton-stack { display: grid; gap: .7rem; }
.skeleton-line {
  height: .8rem; border-radius: 5px;
  background: linear-gradient(90deg,
    var(--bg-elev-2) 0%,
    color-mix(in srgb, var(--bg-elev-2) 50%, var(--brand) 18%) 50%,
    var(--bg-elev-2) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
.skeleton-line--short { width: 62%; }
.skeleton-line--xs    { width: 38%; height: .65rem; }
.skeleton-line--lg    { height: 1.1rem; width: 45%; margin-bottom: .25rem; }

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes page-loader-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Submit-button progress bar + spinner ----------
   The primary submit button of each AI composer (Ask / Interact / Draft and the
   MIRA chat send button) doubles as a progress indicator: while the request is
   being prepared its background fills left→right and the trailing arrow becomes
   a rotating spinner. Driven by static/js/compose-progress.js (window.composeProgress). */
.compose__ask { position: relative; overflow: hidden; }
/* Keep the label/arrow/spinner above the fill overlay. */
.compose__ask > :not(.compose__ask-fill) { position: relative; z-index: 1; }
.compose__ask-fill {
  position: absolute; inset: 0; z-index: 0;
  transform-origin: left center; transform: scaleX(0);
  background: rgba(255, 255, 255, .30);
  pointer-events: none;
}
/* Keep the button looking live (not greyed) while it fills — it's disabled
   only to block a second submit, not to read as inactive. */
.compose__ask.is-progressing,
.compose__ask.is-progressing:disabled { opacity: 1; cursor: progress; }
/* Trailing arrow → spinner swap while progressing. */
.compose__ask-spin {
  display: none; width: 14px; height: 14px; flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
}
.compose__ask.is-progressing .compose__ask-spin { display: inline-block; }
.compose__ask.is-progressing .compose__ask-arrow { display: none; }
@media (prefers-reduced-motion: reduce) {
  .compose__ask-spin { animation: none !important; }
}

/* Follow-up composer is hidden while the parent run is streaming so the
   user can't double-submit on top of a generating answer. */
.research-followup[hidden] { display: none !important; }

/* ---------- Improve modal ---------- */
.improve-modal .modal-dialog { max-width: 820px; }
.improve-modal__content {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.improve-modal__header {
  padding: 1.1rem 1.25rem .85rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 6%, transparent), transparent);
}
.improve-modal__title-wrap {
  display: flex; align-items: flex-start; gap: .8rem;
}
.improve-modal__icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-50); color: var(--brand);
  flex: 0 0 auto;
}
.improve-modal__title {
  font-family: var(--font-serif);
  font-weight: 500; font-size: 1.18rem;
  letter-spacing: -.012em;
  margin: 0; color: var(--text);
}
.improve-modal__sub {
  margin: .15rem 0 0; color: var(--text-muted); font-size: .9rem;
}
.improve-modal__body {
  padding: 1rem 1.25rem;
  display: grid; gap: .75rem;
  min-height: 51vh; max-height: 66vh; overflow-y: auto;
}
.improve-modal__footer {
  padding: .85rem 1.25rem 1.1rem;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: .55rem;
  background: var(--bg-elev-2);
}
.improve-modal__footer-actions {
  display: flex; gap: .55rem; margin-left: auto;
}

.improve-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
.improve-card[hidden] { display: none; }
.improve-card__head {
  padding: .55rem .85rem;
  background: var(--bg-elev-2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  font-size: .8rem;
}
.improve-card__label {
  font-weight: 600; color: var(--text-muted);
  letter-spacing: .02em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: .35rem;
}
.improve-card__editable-tag {
  font-weight: 500; text-transform: none; letter-spacing: 0;
  font-size: .72rem; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  padding: .14rem .55rem; border-radius: 999px;
  display: inline-flex; align-items: center; gap: .3rem;
}
.improve-card__rationale {
  display: block; margin: 0;
  padding: .45rem .95rem .1rem;
  font-weight: 400; color: var(--text-muted); font-size: .78rem;
  text-transform: none; letter-spacing: 0;
  font-style: italic; line-height: 1.4;
}
.improve-card__rationale[hidden] { display: none; }
.improve-card__body {
  padding: .8rem .95rem;
  color: var(--text); font-size: .95rem; line-height: 1.55;
  white-space: pre-wrap;
}
.improve-card__note {
  padding: 0 .95rem .7rem;
  margin-top: -.35rem;
}
.improve-card__note[hidden] { display: none; }

/* Editable rewrite textarea — looks like the card body, behaves like an input. */
.improve-card__editor {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  resize: vertical;
  padding: .8rem .95rem;
  color: var(--text); font-size: .95rem; line-height: 1.55;
  font-family: inherit;
  min-height: 12.1em;
  outline: none;
}
.improve-card__editor:focus {
  background: color-mix(in srgb, var(--brand) 4%, transparent);
}

.improve-card--original .improve-card__head { color: var(--text-muted); }
.improve-card--improved {
  border-color: color-mix(in srgb, var(--brand) 35%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}
.improve-card--improved .improve-card__head {
  background: color-mix(in srgb, var(--brand) 8%, var(--bg-elev-2));
  color: var(--brand);
}
.improve-card--improved .improve-card__label { color: var(--brand); }
.improve-card--loading .improve-card__body { padding: 1rem .95rem; }
/* Gatekeeper rejection — the prompt isn't legal research. */
.improve-card--blocked {
  border-color: color-mix(in srgb, var(--danger, #d92d20) 35%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger, #d92d20) 8%, transparent);
}
.improve-card--blocked .improve-card__head,
.improve-card--blocked .improve-card__label { color: var(--danger, #d92d20); }
.improve-card--blocked .improve-card__body {
  padding: .85rem .95rem;
  line-height: 1.5;
  color: var(--danger, #d92d20);
  font-weight: 600;
  background: color-mix(in srgb, var(--danger, #d92d20) 8%, transparent);
  border-radius: 8px;
}
.improve-card__hint {
  margin: 0 auto 0 .25rem;
  font-size: .78rem; line-height: 1.4;
  font-weight: 400; text-transform: none; letter-spacing: 0;
  color: var(--text-muted);
}

.improve-card__spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin-right: .25rem;
  vertical-align: -2px;
}

/* Strength chip — used on the run page meta line and inside the
   improve modal next to "Your question". */
.strength-chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--font-mono); font-size: .78em; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  vertical-align: .1em;
  border: 1px solid transparent;
}
.strength-chip[hidden] { display: none; }
.strength-chip__icon { font-family: inherit; font-size: .9em; line-height: 1; }
.strength-chip__suffix { opacity: .55; font-weight: 500; }
.strength-chip--weak {
  background: color-mix(in srgb, #d33 14%, transparent);
  color: #b32;
  border-color: color-mix(in srgb, #d33 30%, transparent);
}
.strength-chip--workable {
  background: color-mix(in srgb, #d9a534 18%, transparent);
  color: #8a6312;
  border-color: color-mix(in srgb, #d9a534 35%, transparent);
}
.strength-chip--sharp {
  background: color-mix(in srgb, #1a9b58 16%, transparent);
  color: #0f6638;
  border-color: color-mix(in srgb, #1a9b58 35%, transparent);
}
.research-question__original { margin-top: .5rem; }
.research-question__original summary { cursor: pointer; user-select: none; }
.research-question__original summary:hover { color: var(--text); }

/* inline citation chip */
.cite {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .72em; font-weight: 600;
  padding: 0 5px; border-radius: 5px;
  margin: 0 1px; vertical-align: .12em;
  background: var(--brand-50); color: var(--brand);
  text-decoration: none;
  transition: background-color .12s, color .12s, transform .04s;
}
.cite:hover { background: var(--brand); color: #fff; }

/* streaming caret */
.answer-cursor {
  display: inline-block;
  width: 8px; height: 1.05em;
  margin-left: 2px; vertical-align: -.15em;
  background: var(--brand);
  animation: blink-caret .9s steps(2, start) infinite;
}
.answer-cursor--inline {
  width: 2px; height: 1.05em;
  margin-left: 1px;
  background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 35%, transparent));
  border-radius: 1px;
  box-shadow: 0 0 8px color-mix(in srgb, var(--brand) 55%, transparent);
  animation: blink-caret .8s steps(2, start) infinite;
}
@keyframes blink-caret { to { opacity: 0; } }

/* "still working" shimmer — shown by static/js/stream-shimmer.js on its own
   line where the stream stalled (worker queued / provider slow). Hidden while
   text is flowing; a rotating present-participle word sweeps a highlight. */
.stream-shimmer {
  display: flex; align-items: center;
  margin-top: .85rem;
  font-size: .92rem; font-weight: 500;
  letter-spacing: .005em;
  user-select: none;
  animation: stream-shimmer-in .2s ease-out;
}
.stream-shimmer[hidden] { display: none; }
.stream-shimmer__word {
  background-image: linear-gradient(
    100deg,
    var(--text-subtle) 0%,
    var(--text-subtle) 38%,
    var(--text) 50%,
    var(--text-subtle) 62%,
    var(--text-subtle) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: stream-shimmer-sweep 1.5s linear infinite;
}
@keyframes stream-shimmer-sweep {
  0%   { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}
@keyframes stream-shimmer-in {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stream-shimmer { animation: none; }
  .stream-shimmer__word {
    animation: none;
    -webkit-text-fill-color: var(--text-subtle); color: var(--text-subtle);
  }
}

/* live-streaming answer body — subtle fade-in on each markdown re-render
   plus a soft right-edge glow that tracks the writing head. */
.answer-md.is-streaming {
  position: relative;
}
.answer-md.is-streaming > *:last-child {
  animation: stream-fade-in .18s ease-out;
}
@keyframes stream-fade-in {
  from { opacity: .35; transform: translateY(1px); }
  to   { opacity: 1;   transform: none; }
}

/* status pill heartbeat while the run is in flight. */
.status.is-pulsing { animation: status-pulse 1.6s ease-in-out infinite; }
@keyframes status-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 35%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand)  0%, transparent); }
}
.status.is-pulsing .dot {
  animation: dot-pulse 1.2s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: .6; }
}

/* ---------- follow-up composer ---------- */
.research-followup {
  position: sticky; bottom: 0; z-index: 4;
  margin: 0 clamp(1.25rem, 5vw, 3rem);
  padding: .9rem 0 1.1rem;
  background: linear-gradient(180deg, transparent, var(--bg-elev) 28%);
}
.research-followup__inner {
  display: flex; align-items: flex-end; gap: .6rem;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: .5rem .75rem;
  box-shadow: var(--shadow);
  color: var(--text-subtle);
}
.research-followup:focus-within .research-followup__inner {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring), var(--shadow);
}
/* Multi-line composer: starts at ~2 rows, grows with content (capped in JS),
   no manual resize handle. */
.research-followup__input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  font: inherit; color: var(--text);
  padding: .3rem 0;
  line-height: 1.45;
  resize: none;
  min-height: calc(1.45em * 2 + .6rem); /* show at least 2 rows */
  max-height: 200px;
  overflow-y: auto;
}
/* The leading icon, mod-key hint, mic and submit align to the bottom row of
   the growing box (instead of one sitting flush while the others float up). */
.research-followup__inner > svg { flex: none; margin-bottom: .55rem; }
.research-followup__inner > .text-subtle,
.research-followup__inner > .compose__mic,
.research-followup__inner > button[type="submit"] { margin-bottom: .35rem; }
.research-followup__hints {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin-top: .55rem;
}
.chip-suggestion {
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  color: var(--text-muted);
  padding: .25rem .65rem;
  font-size: .78rem; font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .12s, color .12s, border-color .12s;
}
.chip-suggestion:hover {
  color: var(--text); background: var(--bg-elev); border-color: var(--border-strong);
}

/* ---------- scroll-to-latest button ---------- */
/* Anchored to the answer pane (made relative), floating above the sticky
   follow-up composer. Hidden until the reader scrolls up; while the run is
   streaming it gains a spinning loader ring + a gently bobbing arrow. */
.research-pane--answer { position: relative; }
.scroll-bottom {
  position: absolute;
  left: 50%;
  bottom: 6.75rem;                 /* clears the follow-up composer */
  transform: translateX(-50%) translateY(6px);
  z-index: 6;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, bottom .2s ease,
              background-color .15s ease;
}
.scroll-bottom.is-visible {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.scroll-bottom:hover { background: var(--bg-elev-2); }
.scroll-bottom:active { transform: translateX(-50%) translateY(1px); }
/* While streaming the composer is hidden but the Stop bar sits at the bottom,
   so park the scroll button just above it. */
.scroll-bottom.is-streaming { bottom: 4.9rem; }
.scroll-bottom__arrow { display: block; position: relative; z-index: 1; }
.scroll-bottom.is-streaming .scroll-bottom__arrow {
  animation: scroll-bottom-bob 1.15s ease-in-out infinite;
}
/* Spinning loader ring around the circle while streaming. */
.scroll-bottom.is-streaming::before {
  content: "";
  position: absolute; inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--brand) 0turn, transparent .68turn);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: scroll-bottom-spin .85s linear infinite;
}
@keyframes scroll-bottom-spin { to { transform: rotate(1turn); } }
@keyframes scroll-bottom-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2.5px); } }
@media (prefers-reduced-motion: reduce) {
  .scroll-bottom,
  .scroll-bottom__arrow,
  .scroll-bottom.is-streaming::before { animation: none !important; }
}

/* ---------- bottom Stop bar (only while streaming) ---------- */
/* Anchored to the answer pane (position: relative), centered at the bottom.
   Replaces the old top-bar Stop button; data-action="stop" keeps the same JS
   wiring. Hidden on every terminal state (server-rendered + JS finalize). */
.research-stopbar {
  position: absolute;
  left: 1.5rem;
  bottom: 1.5rem;
  z-index: 6;
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .95rem;
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  font: inherit; font-size: .85rem; font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease, transform .12s ease, border-color .15s ease;
}
.research-stopbar[hidden] { display: none; }
.research-stopbar:hover { background: color-mix(in srgb, var(--danger, #dc2626) 12%, var(--surface)); color: var(--danger, #dc2626); border-color: var(--danger, #dc2626); }
.research-stopbar:active { transform: translateY(1px); }
.research-stopbar svg { flex: none; }

/* ---------- "you stopped this run" banner ---------- */
/* Sits under the partial answer on a cancelled run — live (revealed by
   finalize()) and on reload (server-rendered visible). */
.stop-note {
  display: flex; align-items: center; gap: .55rem;
  margin: 1.1rem 0 .25rem;
  padding: .7rem .9rem;
  border-radius: 10px;
  border: 1px solid rgba(178,106,5,.25);
  background: var(--warn-50);
  color: var(--warn);
  font-size: .9rem; font-weight: 500;
}
.stop-note[hidden] { display: none; }
.stop-note svg { flex: none; }

/* ---------- thread rail — left-edge turn navigator (jump between turns) ---------- */
/* A vertical stack of bars, one per conversation turn; hovering the rail reveals
   the turn titles and clicking jumps to that turn. Fixed to the left edge so it
   sits the same on every surface (Ask / Interact / Draft run + MIRA chat). The
   rail hides itself (JS) when there are fewer than two turns to map. */
.thread-rail {
  position: fixed; left: .55rem; top: 50%; transform: translateY(-50%);
  z-index: 30; display: flex; align-items: center;
}
.thread-rail[hidden] { display: none; }
/* Right-aligned variant — pinned to the right edge of the streaming pane
   (Ask / Interact / Draft include the rail inside .research-pane--answer, a
   positioned ancestor). Its flyout opens leftward, into the answer column. */
.thread-rail--right {
  position: absolute; left: auto; right: .4rem; top: 50%;
  transform: translateY(-50%);
}
.thread-rail__bars {
  display: flex; flex-direction: column; gap: 7px;
  padding: .55rem .45rem;
}
.thread-rail__bar {
  appearance: none; border: 0; padding: 0; cursor: pointer;
  width: 16px; height: 4px; border-radius: 999px;
  background: var(--border-strong, #cfcfcf); opacity: .85;
  transition: width .16s ease, background-color .16s ease, opacity .16s ease;
}
.thread-rail__bar:hover { width: 22px; background: var(--text-muted); opacity: 1; }
/* Scroll-spy: the turn currently in view gets a longer, solid bar. */
.thread-rail__bar.is-active { width: 28px; background: var(--text, #1a1a1a); opacity: 1; }
.thread-rail__bar.is-current { background: var(--brand); }

/* Hover / focus panel — the titles list, flies out to the right of the bars. */
.thread-rail__panel {
  position: absolute; left: calc(100% + .35rem); top: 50%;
  transform: translateY(-50%) translateX(-6px);
  width: min(300px, 70vw); max-height: min(60vh, 460px); overflow-y: auto;
  padding: .4rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 18px 48px -14px rgba(0, 0, 0, .42);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.thread-rail:hover .thread-rail__panel,
.thread-rail:focus-within .thread-rail__panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}
/* Right-aligned rail: flyout sits to the LEFT of the bars and slides in from it. */
.thread-rail--right .thread-rail__panel {
  left: auto; right: calc(100% + .35rem);
  transform: translateY(-50%) translateX(6px);
}
.thread-rail--right:hover .thread-rail__panel,
.thread-rail--right:focus-within .thread-rail__panel {
  transform: translateY(-50%) translateX(0);
}
.thread-rail__head {
  font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-subtle); padding: .4rem .55rem .35rem;
}
.thread-rail__list { list-style: none; margin: 0; padding: 0; }
.thread-rail__item {
  position: relative;
  display: flex; align-items: flex-start; gap: .55rem; width: 100%;
  text-align: left; border: 0; background: transparent; cursor: pointer;
  padding: .5rem .55rem; border-radius: 9px; color: var(--text);
  font: inherit; font-size: .86rem; line-height: 1.35;
  transition: background-color .12s ease;
}
.thread-rail__item:hover { background: var(--bg-elev); }
.thread-rail__item.is-active { background: color-mix(in srgb, var(--brand) 9%, transparent); }
.thread-rail__item.is-active::before {
  content: ""; position: absolute; left: 2px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 2px; background: var(--brand);
}
.thread-rail__num {
  flex: 0 0 auto; width: 20px; height: 20px; margin-top: .05rem;
  display: grid; place-items: center; border-radius: 6px;
  font-size: .7rem; font-weight: 700;
  background: var(--bg-elev-2); color: var(--text-muted);
}
/* "Now" pill marking the current turn (which closes the list). */
.thread-rail__tag {
  flex: 0 0 auto; margin-top: .1rem;
  padding: .08rem .4rem; border-radius: 999px;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--brand); color: #fff;
}
.thread-rail__item.is-current { font-weight: 600; }
.thread-rail__item.is-current .thread-rail__num { background: var(--brand); color: #fff; }
.thread-rail__q {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* No room for a left rail on narrow screens. */
@media (max-width: 760px) { .thread-rail { display: none; } }

/* Brief tint when a turn is jumped to (reused by the rail). */
.thread-turn.is-hot, .research-question.is-hot, .chat-msg.is-hot {
  animation: turn-hot 1.5s ease-out;
  border-radius: 8px;
}
@keyframes turn-hot {
  0%   { background: color-mix(in srgb, var(--brand) 16%, transparent); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .thread-rail__panel,
  .thread-rail__bar,
  .thread-turn.is-hot,
  .research-question.is-hot,
  .chat-msg.is-hot { animation: none !important; transition: none !important; }
}

/* ---------- right pane: filters ---------- */
.research-filters {
  display: flex; flex-wrap: wrap; gap: .35rem;
  padding: .7rem 1.4rem;
  border-bottom: 1px solid var(--border);
}
.filter-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .65rem;
  font-size: .78rem; font-weight: 500;
  color: var(--text-muted);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .12s, color .12s, border-color .12s;
}
.filter-chip:hover { color: var(--text); border-color: var(--border-strong); }
.filter-chip.is-active {
  color: var(--ink-fg); background: var(--surface-ink); border-color: var(--surface-ink);
}
.filter-chip__count {
  font-family: var(--font-mono); font-size: .68rem;
  background: color-mix(in srgb, currentColor 14%, transparent);
  padding: 1px 6px; border-radius: 999px;
}
.filter-chip.is-active .filter-chip__count {
  background: color-mix(in srgb, var(--ink-fg) 18%, transparent); color: var(--ink-fg);
}

/* ---------- right pane: sources list ---------- */
.sources-list {
  list-style: none; padding: .9rem 1rem 0; margin: 0;
  display: grid; gap: .7rem;
  overflow-y: auto;
  flex: 1; min-height: 0;
}
/* "Referred only" rail view (default): hide sources the answer never cited.
   The empty/loading placeholder card has no data-cited attribute, so it is
   never caught by this rule. Flip to "All" via the rail-head segmented toggle. */
.sources-list.is-referred-only .source-card[data-cited="0"] { display: none; }

/* Compact segmented toggle that lives in the Sources rail head. */
.segmented--xs { padding: 2px; border-radius: 8px; }
.segmented--xs .segmented__item {
  padding: .2rem .55rem; font-size: .74rem; font-weight: 600;
}

/* Draft drawer: the toggle sits on its own row (clears the close button). */
.src-filter-row { display: flex; justify-content: flex-end; padding: .6rem 1rem 0; }

/* Shown only when "Referred only" is on but the answer cited nothing. */
.src-filter__empty {
  margin: .9rem 1rem 0; padding: .7rem .85rem;
  border: 1px dashed var(--border); border-radius: var(--radius);
  font-size: .8rem; color: var(--text-subtle);
}
.src-filter__empty button {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  color: var(--brand); font-weight: 600; font-size: inherit;
  text-decoration: underline;
}
.source-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem 1rem 1rem;
  display: grid; gap: .55rem;
  min-width: 0;
  overflow-wrap: anywhere;   /* long web URLs / file keys wrap inside the card */
  transition: border-color .14s, box-shadow .14s, transform .04s, background-color .14s;
  scroll-margin-top: 80px;
  cursor: pointer;           /* whole card opens the chunk modal */
}
.source-card:hover {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring), var(--shadow-sm);
  background: var(--bg-elev-2);
  transform: translateY(-1px);
}
/* The interactive controls inside a card keep their own affordance/behaviour. */
.source-card a,
.source-card button { cursor: pointer; }
/* The empty/loading placeholder card isn't clickable. */
.source-card[data-sources-loading],
.source-card:not([data-src-n]) { cursor: default; }
.source-card.is-hot {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring);
}
.source-card.is-focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--ring), var(--shadow-sm);
}
.source-card__head {
  display: grid; grid-template-columns: 22px 1fr auto;
  align-items: center; gap: .55rem;
}
.source-card__num {
  width: 22px; height: 22px; border-radius: 6px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  background: var(--brand); color: #fff;
}
.source-card__court {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  min-width: 0;
}
.source-card__score {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .72rem; color: var(--text-subtle);
}
.source-card__score-bar {
  --val: 0;
  width: 38px; height: 4px; border-radius: 99px;
  background: linear-gradient(90deg, var(--brand) calc(var(--val) * 1%), var(--bg-elev-2) 0);
  display: block;
}
.source-card__title {
  font-weight: 600; font-size: .95rem; letter-spacing: -.005em;
  color: var(--text); line-height: 1.3;
  /* Long document/file titles wrap to at most two lines, then ellipsis. */
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  word-break: break-word; overflow-wrap: anywhere;
}
.source-card__cite { font-size: .72rem; color: var(--text-subtle); }
/* Linked sources (KB presign redirect / web) read as clickable. */
a.source-card__title { text-decoration: none; cursor: pointer; }
a.source-card__title:hover { color: var(--brand); text-decoration: underline; }
a.source-card__cite { text-decoration: none; cursor: pointer; }
a.source-card__cite:hover { color: var(--brand); }
.source-card__excerpt {
  margin: 0; font-size: .82rem; color: var(--text-muted); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.source-card__tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.tag-mini {
  font-size: .68rem; font-weight: 500;
  padding: 2px 7px; border-radius: 999px;
  background: var(--bg-elev-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.tag-mini--ok   { background: var(--ok-50);   color: var(--ok);   border-color: transparent; }
.tag-mini--warn { background: var(--warn-50); color: var(--warn); border-color: transparent; }
.tag-mini--err  { background: var(--err-50);  color: var(--err);  border-color: transparent; }
.source-card__foot {
  display: flex; flex-wrap: wrap; gap: .3rem;
  margin-top: .15rem;
}
.source-card__foot .btn-sm { padding: .3rem .65rem; font-size: .78rem; }

/* Compact icon buttons on each source card: Copy · Read · Open. */
.source-act {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elev);
  color: var(--text-subtle);
  cursor: pointer;
  text-decoration: none;
  transition: color .14s, border-color .14s, background-color .14s;
}
.source-act:hover {
  color: var(--brand);
  border-color: var(--border-strong);
  background: var(--bg-elev-2);
}
.source-act.is-copied {
  color: var(--ok);
  border-color: var(--ok);
}

/* ---------- source chunk modal ---------- */
.src-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: grid; place-items: center;
  padding: 1.5rem;
}
.src-modal[hidden] { display: none; }
.src-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 18, 28, .55);
  backdrop-filter: blur(2px);
}
.src-modal__card {
  position: relative;
  width: min(720px, 100%);
  max-height: min(80vh, 720px);
  display: flex; flex-direction: column;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-lg, 0 24px 60px rgba(0, 0, 0, .35));
  overflow: hidden;
  animation: src-modal-in .18s ease;
}
@keyframes src-modal-in {
  from { opacity: 0; transform: translateY(8px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .src-modal__card { animation: none; }
}
.src-modal__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem .85rem;
  border-bottom: 1px solid var(--border);
}
.src-modal__heading { min-width: 0; }
.src-modal__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 1.1rem; letter-spacing: -.012em; margin: .15rem 0 0;
  overflow-wrap: anywhere;
}
.src-modal__close {
  border: 0; background: transparent;
  font-size: 1.5rem; line-height: 1;
  color: var(--text-subtle); cursor: pointer;
  padding: 0 .25rem; border-radius: 6px;
}
.src-modal__close:hover { color: var(--text); }
.src-modal__body {
  padding: 1.1rem 1.25rem;
  overflow: auto; min-height: 0;
}
.src-modal__chunk {
  margin: 0;
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--font-sans, inherit);
  font-size: .9rem; line-height: 1.6; color: var(--text);
}
.src-modal__foot {
  display: flex; justify-content: flex-end; gap: .5rem;
  padding: .85rem 1.25rem;
  border-top: 1px solid var(--border);
}
body.src-modal-open { overflow: hidden; }

/* ---------- PDF source drawer (slides in from the right, same window) ---------- */
.pdf-drawer { position: fixed; inset: 0; z-index: 1300; }
.pdf-drawer[hidden] { display: none; }
.pdf-drawer__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 18, 28, .55);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .28s ease;
}
.pdf-drawer.is-open .pdf-drawer__backdrop { opacity: 1; }
.pdf-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(880px, 92vw);
  display: flex; flex-direction: column;
  background: var(--bg-elev);
  border-left: 1px solid var(--border);
  box-shadow: -24px 0 60px rgba(0, 0, 0, .35);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.pdf-drawer.is-open .pdf-drawer__panel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
  .pdf-drawer__panel, .pdf-drawer__backdrop { transition: none; }
}
.pdf-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .75rem 1rem; flex: 0 0 auto;
  border-bottom: 1px solid var(--border);
}
.pdf-drawer__title {
  font-weight: 600; font-size: .92rem; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdf-drawer__close {
  border: 0; background: transparent;
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  color: var(--text-subtle); padding: 0 .25rem; border-radius: 6px;
}
.pdf-drawer__close:hover { color: var(--text); }
.pdf-drawer__frame {
  flex: 1 1 auto; width: 100%; border: 0; background: #2b2f33;
}
body.pdf-drawer-open { overflow: hidden; }

/* Doc-type pill next to the eyebrow ("Judgment" / "Circular" / …). */
.src-modal__doctype {
  margin-left: .5rem; vertical-align: 1px;
  text-transform: none; letter-spacing: 0;
}
.src-modal__doctype[hidden] { display: none; }

/* Deep-dive view inside the modal body. */
.src-modal__back {
  display: inline-flex; align-items: center; gap: .25rem;
  border: 0; background: transparent;
  color: var(--text-subtle); cursor: pointer;
  font-size: .8rem; padding: 0 0 .65rem;
}
.src-modal__back:hover { color: var(--brand); }
.src-modal__dive-loading {
  display: flex; align-items: center; gap: .6rem;
  color: var(--text-subtle); font-size: .88rem;
  padding: .4rem 0;
}
.src-modal__dive-body { font-size: .92rem; line-height: 1.6; }
.src-modal__dive-body :first-child { margin-top: 0; }

/* ---------- confidence + hints ---------- */
.research-confidence {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: .8rem;
  margin: 1rem; padding: .85rem 1rem;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.research-confidence__val {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 1.15rem; letter-spacing: -.012em;
}
.research-confidence__bar {
  height: 6px; border-radius: 99px; overflow: hidden;
  background: var(--bg-elev-2);
}
.research-confidence__bar > span {
  display: block; height: 100%;
  width: calc(var(--val) * 1%);
  background: linear-gradient(90deg, var(--brand), var(--gold));
}
.kbd-hints {
  display: flex; flex-wrap: wrap; gap: .65rem;
  padding: 0 1rem 1.1rem;
  font-size: .76rem; color: var(--text-subtle);
}
.kbd-hints > div { display: inline-flex; align-items: center; gap: .35rem; }
.kbd-hints .kbd { font-size: .68rem; }

/* ---------- profile signature editor ---------- */
/* Editor and preview share the same vertical envelope: ~5 lines min,
   ~8 lines max (line-height 1.6 × 0.95rem font), then they scroll.
   Padding matches Bootstrap's .form-control so the ghost lines up. */
.sig-editor__toolbar {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .5rem;
}
.sig-editor__toolbar .btn-group { gap: .15rem; }
.sig-editor__toolbar .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  line-height: 1;
  border-radius: .375rem;
}
.sig-editor__toolbar .btn > i { font-size: 1rem; line-height: 1; }
.sig-editor__toolbar .btn:hover { background: var(--bg-elev); }
.sig-editor__toolbar .btn.is-active {
  background: var(--bg-elev-2);
  color: var(--brand);
}
.sig-editor__stack { position: relative; }
.sig-editor__surface,
.sig-preview {
  line-height: 1.6;
  height: 13rem; /* fixed (~8 lines) so editor + preview always match */
  overflow-y: auto;
  white-space: pre-wrap;
}
/* On md+ the two columns sit side-by-side; the editor side has a toolbar
   above its surface, the preview side doesn't. Offset the preview down by
   the toolbar's vertical footprint (2rem button + .5rem margin) so the
   surfaces share a top AND a bottom. On mobile (stacked) we drop the
   offset — it would just look like dead space. */
@media (min-width: 768px) {
  .sig-preview { margin-top: 2.5rem; }
}
.sig-editor__surface { position: relative; z-index: 1; background: transparent; }
.sig-editor__surface:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 .15rem color-mix(in srgb, var(--brand) 25%, transparent);
}
.sig-editor__ghost {
  position: absolute;
  inset: 0;
  padding: .375rem .75rem; /* matches .form-control */
  line-height: 1.6;
  color: var(--text-subtle);
  opacity: .7;
  pointer-events: none;
  display: none;
  overflow: hidden;
  border-radius: inherit;
}
.sig-editor.is-empty .sig-editor__ghost { display: block; }

/* ---------- Bootstrap modal: theme-aware surface, borders, close button ----------
   Bootstrap defaults a white modal-content with light borders and a dark
   close-button icon. In dark mode that left the dialog stuck white while
   form-controls inside resolved to the dark --surface, producing a broken
   white-modal/dark-input combo. Bind the modal to our tokens so it follows
   the active theme. */
.modal-content {
  background-color: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
.modal-header,
.modal-footer {
  border-color: var(--border);
}
.modal-title { color: var(--text); }
[data-theme="dark"] .modal-content {
  box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .55);
}
[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(2);
}

/* Phone-change modal input group: shrink font so the dial code + ISO
   ("+91 IN") fits in the select without truncation, and keep the phone
   input visually balanced with it. */
.phone-modal__input-group .form-select,
.phone-modal__input-group .form-control {
  font-size: .88rem;
}
.phone-modal__input-group .phone-isd {
  flex: 0 0 auto;
  width: auto;
  min-width: 6.25rem;
  padding-right: 2rem;
}

/* ---- Team switcher (sidebar dropdown) ---------------------------------- */
.sidebar__team-switcher { position: relative; }
.sidebar__team-switcher__trigger {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  gap: .45rem;                 /* tighter than the default .7rem so badge + chevron sit snug */
}
.sidebar__team-switcher.is-open .sidebar__team-switcher__trigger {
  background: var(--bg-elev-2);
  border-color: var(--border);
  color: var(--text);
}
/* Label takes the leftover space and truncates, so the Active badge and the
   chevron always have room to render flush on the right. */
.sidebar__team-switcher__trigger .sidebar__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Badge: smaller + no auto-margin (the label's flex already pushes us right). */
.sidebar__team-switcher__trigger .sidebar__link-badge {
  margin-left: 0;
  padding: 1px 6px;
  font-size: .62rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.sidebar__team-switcher__chevron {
  width: 12px; height: 12px;
  margin-left: 0;
  flex: 0 0 12px;
  transition: transform .15s ease;
  opacity: .7;
}
.sidebar__team-switcher.is-open .sidebar__team-switcher__chevron {
  transform: translateX(2px);
  opacity: 1;
}
/* The dropdown ALWAYS overlays as a true pop-out sub-menu sitting OUTSIDE
   the sidebar's overflow clip. Position is `fixed` so it escapes the
   sidebar's `overflow: hidden` / `overflow-y: auto`; JS sets `top` and
   `left` when the menu opens, anchored to the trigger's bounding rect. */
.sidebar__team-switcher__menu {
  position: fixed;
  top: 0; left: 0;
  min-width: 240px;
  max-width: 280px;
  padding: 6px;
  border-radius: 10px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  box-shadow: 0 14px 30px -16px rgba(15, 18, 32, .28),
              0 0 0 1px var(--border-soft, var(--border));
  display: flex; flex-direction: column; gap: 2px;
  z-index: 1050;            /* above sidebar (1000 on mobile) + topbar */
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}
.sidebar__team-switcher__menu .sidebar__link {
  padding: .35rem .55rem;
  font-size: .9rem;
}
.sidebar__team-switcher__sep {
  height: 1px;
  background: var(--border);
  margin: 4px 2px;
}
.sidebar__team-switcher__more {
  color: var(--text-muted);
  font-style: italic;
}
.sidebar__team-switcher__more:hover { color: var(--text); }
.sidebar__team-switcher__kbd {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .65rem;
  letter-spacing: .04em;
  opacity: .65;
}
/* Collapsed sidebar: same overlay rules apply — only the chevron hides
   because the trigger label is also hidden in collapsed mode. */
html.lex-sidebar-collapsed .sidebar__team-switcher__chevron,
.app-shell.is-collapsed .sidebar__team-switcher__chevron { display: none; }
html.lex-sidebar-collapsed .sidebar__team-switcher__kbd,
.app-shell.is-collapsed .sidebar__team-switcher__kbd { display: none; }

/* ---- Team invite (per-row role select on team_create) ----------------- */
.team-invite {
  display: flex; flex-direction: column;
  gap: .35rem;
  max-height: 18rem;
  overflow-y: auto;
  padding: .25rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elev);
}
.team-invite__row {
  display: flex; align-items: center; gap: .75rem;
  padding: .35rem .55rem;
  border-radius: 7px;
}
.team-invite__row:hover { background: var(--bg-elev-2); }
.team-invite__person {
  flex: 1 1 auto;
  min-width: 0;
  display: flex; align-items: center; gap: .55rem;
}
.team-invite__person .small { line-height: 1.2; }
.team-invite__role {
  flex: 0 0 auto;
  width: auto;
  min-width: 8.5rem;
}

/* ---- Team colour picker (swatch grid + custom native input) ------------ */
.team-color {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.team-color__swatches {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
}
.team-color__swatch {
  width: 18px; height: 18px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  box-shadow:
    inset 0 0 0 1px rgba(15, 18, 32, .08),
    0 0 0 2px transparent;
  transition: transform .12s ease, box-shadow .12s ease;
}
.team-color__swatch:hover { transform: scale(1.08); }
.team-color__swatch.is-active {
  box-shadow:
    inset 0 0 0 2px #fff,
    0 0 0 2px var(--text);
  transform: scale(1.05);
}
.team-color__custom {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .7rem .3rem .35rem;
  border-radius: 999px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  font-size: .8rem;
  color: var(--text-muted);
  cursor: pointer;
  margin: 0;
  transition: color .12s, border-color .12s;
}
.team-color__custom:hover {
  color: var(--text);
  border-color: var(--border-strong);
}
.team-color__custom .form-control-color,
.team-color__custom input[type="color"] {
  width: 18px; height: 18px;
  min-width: 18px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.team-color__custom input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.team-color__custom input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 50%;
}
.team-color__custom input[type="color"]::-moz-color-swatch {
  border: 0;
  border-radius: 50%;
}

/* Team name field: colour dot + full-width name input. The dot mirrors the
   selected team colour live (see team_form.html). */
.team-name-field {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.team-name-field__dot {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(15, 18, 32, .12),
    0 0 0 3px var(--bg-elev-1);
  transition: background .12s ease;
}
.team-name-field .form-control { flex: 1; }

/* Slug help: inline "?" button toggling a small floating explainer. */
.slug-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .35rem;
}
.slug-help { position: relative; display: inline-flex; }
.slug-help__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg-elev-3, var(--bg-elev-2));
  color: var(--text-muted);
  font-size: .7rem; font-weight: 700; line-height: 1;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.slug-help__btn:hover,
.slug-help__btn[aria-expanded="true"] {
  background: var(--text);
  color: var(--bg-elev-1);
}
.slug-help__pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: min(320px, 78vw);
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .7rem .8rem;
  border-radius: 10px;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(15, 18, 32, .18);
  font-size: .78rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--text-muted);
  white-space: normal;
  text-align: left;
}
.slug-help__pop[hidden] { display: none; }
.slug-help__pop strong { color: var(--text); }
.slug-help__pop code {
  font-size: .74rem;
  word-break: break-all;
}
.slug-help__pop::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--bg-elev-1);
}

/* ---- Dashboard view switcher (Org / My / Team pills) ------------------- */
.dashboard-switcher {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: 1.25rem;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.dashboard-switcher__tab {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .35rem .75rem;
  font-size: .85rem; font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border-radius: 7px;
  text-decoration: none;
  transition: background-color .12s, color .12s, box-shadow .12s;
}
.dashboard-switcher__tab:hover {
  color: var(--text);
  background: var(--bg-elev);
}
.dashboard-switcher__tab.is-active {
  color: var(--text);
  background: var(--bg-elev);
  box-shadow:
    0 1px 2px rgba(15, 18, 32, .06),
    inset 0 0 0 1px var(--border);
}
.dashboard-switcher__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-faint);
  transition: background-color .12s;
}
.dashboard-switcher__tab.is-active .dashboard-switcher__dot--org   { background: #4f46e5; }
.dashboard-switcher__tab.is-active .dashboard-switcher__dot--you   { background: #d9b265; }
.dashboard-switcher__tab.is-active .dashboard-switcher__dot--team  { background: #06b6d4; }

/* Team tabs (Private + recent) live in the same strip after a thin separator. */
.dashboard-switcher {
  flex-wrap: wrap;
  max-width: 100%;
}
.dashboard-switcher__sep {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 4px 6px;
}
.dashboard-switcher__tab--team {
  padding: .3rem .55rem .3rem .4rem;
  gap: .4rem;
  font-size: .82rem;
}
.dashboard-switcher__tab--team .dashboard-switcher__team-mark {
  width: 16px; height: 16px;
  border-radius: 4px;
  font-size: .6rem;
  flex: 0 0 16px;
}
.dashboard-switcher__team-label {
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "More ▾" overflow trigger + popup wrapper. */
.dashboard-switcher__more { position: relative; }
.dashboard-switcher__tab--more {
  cursor: pointer;
  border: 0;
  background: transparent;
  font-family: inherit;
  color: var(--text-muted);
}
.dashboard-switcher__tab--more:hover {
  color: var(--text);
  background: var(--bg-elev);
}
.dashboard-switcher__chevron {
  width: 12px; height: 12px;
  transition: transform .15s ease;
  opacity: .75;
}
.dashboard-switcher__more.is-open .dashboard-switcher__chevron {
  transform: rotate(180deg);
  opacity: 1;
}
.dashboard-switcher__more.is-open .dashboard-switcher__tab--more {
  color: var(--text);
  background: var(--bg-elev);
}

/* Popup below the More chevron. */
.dashboard-switcher__team-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  max-width: 320px;
  padding: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow:
    0 12px 28px -12px rgba(15, 18, 32, .25),
    0 0 0 1px var(--border-soft);
  z-index: 30;
  display: flex; flex-direction: column; gap: 1px;
}
.dashboard-switcher__team-menu-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-faint);
  padding: 4px 8px 6px;
}
.dashboard-switcher__team-item {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .4rem .55rem;
  border-radius: 7px;
  border: 0; background: transparent;
  color: var(--text);
  text-decoration: none;
  font: inherit; font-size: .85rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.dashboard-switcher__team-item:hover {
  background: var(--bg-elev-2);
  color: var(--text);
}
.dashboard-switcher__team-item.is-active {
  background: var(--brand-50);
  color: var(--brand);
}
.dashboard-switcher__team-mark {
  width: 18px; height: 18px;
  border-radius: 5px;
  background: var(--grad-brand);
  color: #fff; font-weight: 700; font-size: .65rem;
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  flex: 0 0 18px;
}
.dashboard-switcher__team-mark--ghost {
  background: transparent;
  color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--border);
}
.dashboard-switcher__team-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-switcher__team-tag {
  margin-left: auto;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--brand);
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--brand-50);
}
.dashboard-switcher__team-kbd {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: .04em;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--bg-elev-2);
  color: var(--text-muted);
}
.dashboard-switcher__team-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 2px;
}

/* ---- Dashboard: quick jump, matter cards, performance ------------------ */
.dashboard-actions {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
}

/* "Quick jump" — a wrap of compact feature shortcuts. */
.quick-jump {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.quick-jump__item {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .8rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  text-decoration: none;
  font-size: .85rem;
  font-weight: 500;
  transition: background-color .12s, box-shadow .12s, transform .08s;
}
.quick-jump__item:hover {
  background: var(--bg-elev-2);
  box-shadow: 0 4px 12px -6px rgba(15, 18, 32, .25);
  transform: translateY(-1px);
  color: var(--text);
}
.quick-jump__icon {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--brand-50, rgba(99, 102, 241, .12));
  color: var(--brand, #6366f1);
}
.quick-jump__icon svg { width: 15px; height: 15px; }

/* Responsive grid of compact matter tiles. */
.matter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .65rem;
}
.matter-card {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .7rem .8rem;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  transition: background-color .12s, box-shadow .12s, transform .08s;
}
.matter-card:hover {
  background: var(--bg-elev-2);
  box-shadow: 0 6px 16px -8px rgba(15, 18, 32, .28);
  transform: translateY(-1px);
}
.matter-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.matter-card__ref { font-variant-numeric: tabular-nums; }
.matter-card__title { font-size: .9rem; }
.matter-card__meta { min-height: 1em; }
.matter-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .15rem;
}

/* Overlapping member avatars. */
.avatar-stack {
  display: inline-flex;
  align-items: center;
}
.avatar-stack > .avatar,
.avatar-stack > img.avatar {
  margin-left: -7px;
  box-shadow: 0 0 0 2px var(--bg-elev);
}
.avatar-stack > :first-child { margin-left: 0; }

/* Tiny team colour chips on a matter card. */
.team-chip-row { display: inline-flex; gap: 3px; }
.team-chip-mini {
  width: 18px; height: 18px;
  border-radius: 5px;
  display: grid; place-items: center;
  color: #fff; font-size: .6rem; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

/* Active-matter detail card (Team dashboard). */
.matter-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.matter-detail__people { margin-top: .75rem; }

/* Matter status breakdown bar + legend (Team performance). */
.matter-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--bg-elev-2);
}
.matter-bar__seg { display: block; min-width: 4px; }
.matter-bar__seg--open    { background: #4f46e5; }
.matter-bar__seg--active  { background: #16a34a; }
.matter-bar__seg--on_hold { background: #d97706; }
.matter-bar__seg--closed  { background: #94a3b8; }
.matter-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  font-size: .8rem;
  color: var(--text-muted);
}
.matter-legend__item { display: inline-flex; align-items: center; gap: .35rem; }
.matter-legend__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
}

/* ---- Top bar (header, content-column only) ----------------------------- */
/* Bootstrap-navbar-like header that sits at the top of the content column
   (the area to the right of the sidebar). Normal body font, regular text
   colour — restrained but clearly visible. */
.topbar {
  position: sticky;
  top: 0;
  height: var(--topbar-h);
  z-index: 45;                 /* above content, below modals (1050) */
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: .9375rem;         /* 15px — matches Bootstrap navbar */
  line-height: 1.4;
  user-select: none;
  -webkit-user-select: none;
}
.topbar__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 1rem;
  gap: .25rem;
}
.topbar__cluster {
  display: flex; align-items: center; gap: .25rem;
}
/* Left cluster (the workspace switcher) absorbs the free space so it pins to
   the far left while the existing items stay right-aligned (flex-end inner). */
.topbar__cluster--left { margin-right: auto; min-width: 0; }

/* Combined Team / Matter switcher — opens the workspace modal (also g w).
   Modern SaaS workspace switcher (à la Linear / Vercel): a colored monogram,
   the active MATTER on top, the TEAM small beneath, and the standard "unfold"
   (chevrons up/down) affordance. Ghost button that lifts on hover.
   "needs-matter" turns the monogram + matter line amber as a call to action. */
.workspace-pill {
  display: inline-flex; align-items: center; gap: .55rem;
  max-width: min(52vw, 520px);
  height: 44px; padding: 0 .55rem;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 10px;
  color: var(--text); font: inherit; cursor: pointer;
  white-space: nowrap; overflow: hidden;
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.workspace-pill:hover {
  background: var(--bg-elev-2);
  border-color: var(--border);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.workspace-pill:focus-visible {
  outline: 2px solid var(--accent, #6366f1); outline-offset: 1px;
}
/* Colored monogram (matter initial, tinted by the team's colour). */
.workspace-pill__mono {
  display: inline-flex; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 8px;
  align-items: center; justify-content: center;
  color: #fff; font-size: .82rem; font-weight: 700; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.workspace-pill__mono--empty {
  background: var(--bg-elev-2); color: var(--text-muted);
  box-shadow: inset 0 0 0 1px var(--border);
}
.workspace-pill__mono .icon,
.workspace-pill__mono svg { width: 16px; height: 16px; }
.workspace-pill__col {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  min-width: 0; line-height: 1.2; text-align: left;
}
/* Primary — the matter name. */
.workspace-pill__matter {
  font-size: .9rem; font-weight: 500; letter-spacing: -.01em; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30ch;
}
/* Secondary — the team, small and muted, on the line below. */
.workspace-pill__team {
  font-size: .72rem; font-weight: 500; color: var(--text-muted); text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30ch;
}
.workspace-pill__chevron { color: var(--text-muted); flex: 0 0 auto; margin-left: .15rem; opacity: .8; }
.workspace-pill:hover .workspace-pill__chevron { color: var(--text); opacity: 1; }
/* No active matter → amber call-to-action. */
.workspace-pill--needs-matter .workspace-pill__mono--empty {
  color: var(--warning, #d97706);
  box-shadow: inset 0 0 0 1px var(--warning, #d97706);
  background: var(--warning-50, rgba(217,119,6,.12));
}
.workspace-pill--needs-matter .workspace-pill__matter { color: var(--warning, #d97706); }

/* Chart shortcut sitting beside the pill — subtle, muted icon button that
   opens the team & matter org chart. */
.topbar__chart {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 36px; height: 36px; border-radius: 9px;
  color: var(--text-muted); border: 1px solid transparent; text-decoration: none;
  transition: background-color .12s, border-color .12s, color .12s;
}
.topbar__chart:hover {
  background: var(--bg-elev-2); border-color: var(--border); color: var(--text);
}
.topbar__chart:focus-visible { outline: 2px solid var(--accent, #6366f1); outline-offset: 1px; }
.topbar__chart svg { width: 16px; height: 16px; }

/* When a matter lands from the modal, the top-bar box "accepts" it with a
   single throb: a colored background flash + a glowing ring that expands once
   and settles. Plays on the freshly-loaded page (see wsPlayLanding in app.js)
   so the user's eye is drawn to where their new team/matter now lives. */
.workspace-pill--landing { animation: ws-pill-land .7s ease-out; }
@keyframes ws-pill-land {
  0% {
    background: var(--accent-50, rgba(99,102,241,.16));
    box-shadow: 0 0 0 0 rgba(99,102,241,.30);
    transform: scale(1);
  }
  35% {
    background: var(--accent-50, rgba(99,102,241,.16));
    box-shadow: 0 0 0 3px var(--accent-50, rgba(99,102,241,.28)),
                0 0 10px 2px var(--accent-50, rgba(99,102,241,.22));
    transform: scale(1.025);
  }
  100% {
    background: transparent;
    box-shadow: 0 0 0 7px rgba(99,102,241,0);
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .workspace-pill--landing { animation: none; }
}

@media (max-width: 768px) {
  .workspace-pill__team { display: none; }
}

/* Forced workspace pick (post-login gate): darken the backdrop a touch beyond
   Bootstrap's default so the locked, non-dismissible modal reads as a deliberate
   gate. The class lives on <body> only while the forced modal is up. */
body.ws-force-pick .modal-backdrop.show { opacity: .78; }

/* Workspace modal — two panes (teams | matters). */
.workspace-modal__head { align-items: flex-start; }
.workspace-modal__head-text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.workspace-modal__subtitle {
  margin: 0; font-size: .82rem; line-height: 1.35; color: var(--text-muted); max-width: 62ch;
}
.workspace-modal__step {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; margin-right: .4rem; border-radius: 999px;
  background: var(--accent-50, rgba(99,102,241,.12)); color: var(--accent, #6366f1);
  font-size: .68rem; font-weight: 700; vertical-align: text-bottom;
}
.workspace-modal__body { display: grid; grid-template-columns: 1fr 1.3fr; gap: 0; padding: 0; }
.workspace-modal__pane { display: flex; flex-direction: column; min-width: 0; padding: 1rem; }
.workspace-modal__pane--teams { border-right: 1px solid var(--border); }
.workspace-modal__pane-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem;
}
.workspace-modal__pane-title {
  font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.workspace-modal__add { font-size: .8rem; text-decoration: none; white-space: nowrap; }
.workspace-modal__search { margin-bottom: .5rem; }
.workspace-modal__list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 62vh; overflow-y: auto; min-height: 14rem;
}
.workspace-modal__row {
  display: flex; align-items: center; gap: .55rem; width: 100%; text-align: left;
  padding: .5rem .6rem; border: 0; background: transparent; border-radius: 8px;
  cursor: pointer; color: var(--text); font: inherit;
}
.workspace-modal__row:hover { background: var(--bg-elev-2); }
.workspace-modal__row.is-active,
.workspace-modal__row.is-selected { background: var(--accent-50, rgba(99,102,241,.1)); }
.workspace-modal__mark {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: .75rem; font-weight: 700;
}
.workspace-modal__row-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.workspace-modal__row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-modal__row-sub {
  font-size: .72rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.workspace-modal__row-parent { font-size: .68rem; color: var(--text-faint); }
/* Sub-team rows sit indented under their parent. */
.workspace-modal__row--sub { padding-left: 1.6rem; }
.workspace-modal__row--sub .workspace-modal__mark { width: 22px; height: 22px; flex-basis: 22px; }
/* Matter count badge on the right of a team row. */
.workspace-modal__count {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  color: var(--text-muted); font-size: .68rem; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.workspace-modal__count svg { width: 11px; height: 11px; }
.workspace-modal__active-pill { flex: 0 0 auto; }
.workspace-modal__team-only { margin-bottom: .5rem; align-self: flex-start; }

/* Footer — selection summary + confirm, with a shortcut hint. */
.workspace-modal__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; padding: .75rem 1rem; border-top: 1px solid var(--border);
}
.workspace-modal__hint { font-size: .78rem; color: var(--text-muted); }
.workspace-modal__hint kbd {
  display: inline-block; padding: .05rem .35rem; border-radius: 5px;
  border: 1px solid var(--border); background: var(--bg-elev-2);
  font-size: .72rem; font-family: inherit; line-height: 1.4; color: var(--text);
}
.workspace-modal__foot-apply { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.workspace-modal__selection {
  font-size: .85rem; color: var(--text-muted); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.workspace-modal__selection strong { color: var(--text); font-weight: 600; }
.workspace-modal__selection-sep { color: var(--text-muted); margin: 0 .15rem; }
.workspace-modal__confirm:disabled { opacity: .55; cursor: not-allowed; }

@media (max-width: 640px) {
  .workspace-modal__body { grid-template-columns: 1fr; }
  .workspace-modal__pane--teams { border-right: 0; border-bottom: 1px solid var(--border); }
  .workspace-pill__seg--team .workspace-pill__text { max-width: 10ch; }
  .workspace-modal__foot { flex-direction: column; align-items: stretch; }
  .workspace-modal__foot-apply { justify-content: space-between; }
}
.topbar__item {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 38px;
  padding: 0 .75rem;
  color: var(--text);
  text-decoration: none;
  border: 0; background: transparent;
  font: inherit;
  white-space: nowrap;
  border-radius: 6px;
  transition: background-color .12s, color .12s;
  cursor: default;
}
a.topbar__item, button.topbar__item { cursor: pointer; }
.topbar__item:hover {
  background: var(--bg-elev-2);
  color: var(--text);
}
.topbar__feedback {
  padding: 0 .85rem; height: 30px; font-size: .82rem; font-weight: 600;
  color: #fff; background: var(--brand, var(--primary, #6366f1));
  border-radius: 999px; gap: .4rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.topbar__feedback:hover { color: #fff; background: var(--brand-600, var(--primary-600, #4f46e5)); }
.topbar__feedback svg, .topbar__feedback .icon { width: 15px; height: 15px; }
.topbar__item--icon { padding: 0; width: 38px; justify-content: center; position: relative; }
.topbar__item--icon .icon,
.topbar__item--icon svg { width: 18px; height: 18px; }
/* User avatar button: holds the member's real avatar (photo or initials
   chip) so the account menu reads as a person. Same 38px hit-target as the
   other icon buttons; the avatar carries its own background, so the button
   stays transparent and just lifts on hover. */
.topbar__item--avatar { border-radius: 999px; background: transparent; }
.topbar__item--avatar:hover { background: var(--bg-elev-2); }
.topbar__avatar {
  width: 28px; height: 28px; font-size: .72rem;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.topbar__item--avatar img.topbar__avatar { object-fit: cover; }
/* Account + help menu items carry leading SVGs (not glyph spans); size to match. */
.topbar__user .topbar__menu-item .icon,
.topbar__user .topbar__menu-item svg,
.topbar__help .topbar__menu-item .icon,
.topbar__help .topbar__menu-item svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--text-muted); }
/* Sign out turns red only on hover — destructive cue across the whole row
   (icon + text). Scoped under .topbar__user to outrank the base
   .topbar__menu-item:hover colour and the menu-item svg colour. */
.topbar__user .topbar__menu-item--danger:hover { background: var(--danger-50, rgba(220,38,38,.08)); color: var(--danger, #dc2626); }
.topbar__user .topbar__menu-item--danger:hover span { color: var(--danger, #dc2626); }
.topbar__user .topbar__menu-item--danger:hover .icon,
.topbar__user .topbar__menu-item--danger:hover svg { color: var(--danger, #dc2626); }
/* Unread-count bubble on the notification bell. Red pill anchored to the
   top-right of the button; text caps at "9+" (template + notifications.js). */
.topbar__badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}
.topbar__label { letter-spacing: inherit; }
.topbar__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand, #6366f1);
  flex: 0 0 8px;
}
.topbar__dot--ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
}
/* Trial countdown pill — sits at the head of the right cluster, links to the
   plans page. Neutral while there's runway; amber in the last 3 days; red once
   the budget is spent. */
.topbar__trial {
  display: inline-flex; align-items: center; gap: .5rem;
  height: 38px;
  padding: 0 .7rem;
  margin-right: .15rem;
  border-radius: 999px;
  text-decoration: none;
  font-size: .82rem; font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-elev-2);
  box-shadow: inset 0 0 0 1px var(--border);
  white-space: nowrap;
  transition: background-color .12s, color .12s, box-shadow .12s;
}
.topbar__trial:hover { color: var(--text); background: var(--bg-elev-3, var(--bg-elev-2)); }
.topbar__trial-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand, #6366f1);
  flex: 0 0 7px;
}
.topbar__trial--ending {
  color: var(--warning, #b45309);
  background: var(--warning-50, rgba(245,158,11,.10));
  box-shadow: inset 0 0 0 1px var(--warning-200, rgba(245,158,11,.35));
}
.topbar__trial--ending .topbar__trial-dot { background: var(--warning, #f59e0b); }
.topbar__trial--ended {
  color: var(--danger, #dc2626);
  background: var(--danger-50, rgba(220,38,38,.08));
  box-shadow: inset 0 0 0 1px var(--danger-200, rgba(220,38,38,.35));
}
.topbar__trial--ended .topbar__trial-dot { background: var(--danger, #dc2626); }
.topbar__chevron { opacity: .65; margin-left: .15rem; transition: transform .15s; }
.topbar__team.is-open .topbar__chevron,
.topbar__notif.is-open .topbar__chevron,
.topbar__view.is-open .topbar__chevron { transform: rotate(180deg); opacity: 1; }
.topbar__team.is-open .topbar__item--button,
.topbar__notif.is-open .topbar__item--button,
.topbar__view.is-open .topbar__item--button,
.topbar__help.is-open .topbar__item--button {
  background: var(--bg-elev-2);
  color: var(--text);
}
/* Small-A / large-A glyph on the view-size trigger — the universal
   text-size affordance. Muted by default; firms up on hover/open. */
.topbar__item--view { padding: 0 .55rem; gap: .3rem; }
.topbar__view-mark {
  display: inline-flex; align-items: baseline; gap: 1px;
  color: var(--text-subtle);
  transition: color .12s;
}
.topbar__view-a { font-weight: 600; line-height: 1; }
.topbar__view-a--sm { font-size: .7rem; }
.topbar__view-a--lg { font-size: 1.02rem; }
.topbar__item--view:hover .topbar__view-mark,
.topbar__view.is-open .topbar__view-mark { color: var(--text); }
.topbar__view .topbar__chevron { margin-left: 0; }
.topbar__kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .75rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg-elev-2);
  color: var(--text-muted);
  margin-left: auto;
}

/* Downward popup (team switcher + notifications panel) */
.topbar__team, .topbar__notif, .topbar__help { position: relative; }
.topbar__menu {
  position: absolute;
  right: 0; top: calc(100% + 6px);
  min-width: 240px;
  padding: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px -12px rgba(15, 18, 32, .25),
              0 0 0 1px var(--border-soft);
  display: flex; flex-direction: column; gap: 1px;
  z-index: 46;
  font-size: .875rem;
  color: var(--text);
}
.topbar__menu--notif { min-width: 280px; }
.topbar__menu-label {
  font-size: .6875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-faint);
  padding: 6px 8px 8px;
}
.topbar__menu-item {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .45rem .55rem;
  border-radius: 6px;
  border: 0; background: transparent;
  color: var(--text);
  text-decoration: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.topbar__menu-item:hover {
  background: var(--bg-elev-2);
  color: var(--text);
}
.topbar__menu-glyph {
  width: 16px; height: 16px;
  display: grid; place-items: center;
  color: var(--text-muted);
  font-weight: 600;
}
.topbar__menu-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.topbar__menu-empty {
  padding: .75rem .65rem .85rem;
  font-size: .875rem;
  color: var(--text-faint);
}
/* Notifications dropdown: fixed header (label + "mark all read"), then a
   scrolling list. The list caps at ~10 rows so a scrollbar appears beyond
   that; the header stays put while the list scrolls. */
.topbar__menu-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem;
  padding: 6px 8px 8px;
}
.topbar__menu-head .topbar__menu-label { padding: 0; }
.topbar__menu-action-form { margin: 0; display: flex; }
.topbar__menu-action {
  border: 0; background: transparent;
  color: var(--brand, #6366f1);
  font: inherit; font-size: .75rem; font-weight: 600;
  padding: 0; cursor: pointer;
}
.topbar__menu-action:hover { text-decoration: underline; }

.notif-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1px;
  max-height: min(70vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.notif-item {
  display: flex; align-items: stretch;
  border-radius: 6px;
}
.notif-item:hover { background: var(--bg-elev-2); }
.notif-item__link {
  display: flex; align-items: flex-start; gap: .55rem;
  flex: 1 1 auto; min-width: 0;
  padding: .5rem .55rem;
  text-decoration: none; color: var(--text);
}
.notif-item__avatar { flex: 0 0 32px; }
.notif-item__body {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1 1 auto; min-width: 0;
}
.notif-item__title {
  font-weight: 600; font-size: .8125rem; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-item__text {
  color: var(--text-muted); font-size: .8125rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-item__time { font-size: .6875rem; }
.notif-item__dot {
  flex: 0 0 8px; width: 8px; height: 8px; margin-top: .4rem;
  border-radius: 50%;
  background: var(--brand, #6366f1);
}
.notif-item__read-form { margin: 0; display: flex; align-items: flex-start; }
.notif-item__read {
  border: 0; background: transparent;
  color: var(--text-faint);
  cursor: pointer;
  padding: .5rem .55rem;
  font-size: .875rem; line-height: 1.3;
}
.notif-item__read:hover { color: var(--text); }

/* View-size menu: each row has a graded "A" glyph + a check on the active one */
.topbar__view { position: relative; }
.topbar__menu--view { min-width: 220px; }
.topbar__menu--view .topbar__menu-glyph {
  font-family: var(--font-serif);
  color: var(--text-muted);
}
.topbar__view-glyph--sm { font-size: .72rem; }
.topbar__view-glyph--md { font-size: .9rem; }
.topbar__view-glyph--lg { font-size: 1.05rem; }
.topbar__view-glyph--xl { font-size: 1.2rem; }
.topbar__menu--view .topbar__menu-item.is-active { color: var(--text); font-weight: 500; }
.topbar__menu--view .topbar__menu-item.is-active .topbar__menu-glyph { color: var(--brand); }
.topbar__menu-check {
  margin-left: auto;
  color: var(--brand);
  opacity: 0;
}
.topbar__menu-item.is-active .topbar__menu-check { opacity: 1; }

/* ---- Status bar (bottom) ----------------------------------------------- */
:root { --statusbar-h: 30px; }
.app-shell .main { padding-bottom: calc(2rem + var(--statusbar-h)); }

.statusbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--statusbar-h);
  z-index: 40;                 /* below modals (1050) and offcanvas, above content */
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  color: var(--text-faint);
  font-size: 11.5px;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: auto;
}
.statusbar__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 .75rem;
  gap: 1rem;
}

/* Left side is a static read-only breadcrumb — no click targets, no hover
   highlight, just continuous text separated by a small chevron. */
.statusbar__crumb {
  display: inline-flex; align-items: center;
  gap: .45rem;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}
.statusbar__crumb-item {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
}
.statusbar__crumb-sep {
  opacity: .4;
  flex: 0 0 10px;
}
.statusbar__crumb-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  margin-left: .25rem;
  border-radius: 4px;
  color: inherit;
  opacity: .55;
  text-decoration: none;
  transition: background-color .12s, color .12s, opacity .12s;
}
.statusbar__crumb-icon:hover {
  background: var(--bg-elev-2);
  color: var(--text-muted);
  opacity: 1;
}
.statusbar__cluster {
  display: flex; align-items: center; gap: .25rem;
}
.statusbar__item {
  display: inline-flex; align-items: center; gap: .4rem;
  height: calc(var(--statusbar-h) - 8px);
  padding: 0 .6rem;
  color: inherit;
  text-decoration: none;
  border: 0; background: transparent;
  font: inherit;
  white-space: nowrap;
  border-radius: 4px;
  transition: background-color .12s, color .12s;
  cursor: default;
}
a.statusbar__item, button.statusbar__item {
  cursor: pointer;
}
.statusbar__item:hover {
  background: var(--bg-elev-2);
  color: var(--text-muted);
}
.statusbar__item--hint { padding: 0 .45rem; }
.statusbar__version {
  /* Read-only build stamp — muted, non-interactive, tabular for stable width. */
  color: var(--text-muted);
  opacity: .7;
  font-variant-numeric: tabular-nums;
  cursor: default;
}
.statusbar__item--brand {
  /* Same font weight and size as everything else — no emphasis. */
  font-weight: inherit;
  letter-spacing: inherit;
  color: inherit;
}
.statusbar__item--brand:hover { background: transparent; color: inherit; }
.statusbar__sep {
  display: inline-flex; align-items: center;
  color: inherit;
  opacity: .35;
  padding: 0 .25rem;
  font: inherit;
  line-height: 1;
  pointer-events: none;
}
.statusbar__logout {
  display: inline-flex; align-items: center; margin: 0;
}
.statusbar__power { flex: 0 0 12px; opacity: .7; }
.statusbar__item--logout:hover .statusbar__power { opacity: 1; }

/* Sound on/off toggle (statusbar). Icon + label swap on aria-pressed. */
.statusbar__item--sound { gap: .3rem; }
.statusbar__sound { flex: 0 0 12px; opacity: .7; }
.statusbar__item--sound:hover .statusbar__sound { opacity: 1; }
.statusbar__sound--off,
.statusbar__sound-label--off { display: none; }
.statusbar__item--sound[aria-pressed="false"] .statusbar__sound--on,
.statusbar__item--sound[aria-pressed="false"] .statusbar__sound-label--on { display: none; }
.statusbar__item--sound[aria-pressed="false"] .statusbar__sound--off { display: inline-block; }
.statusbar__item--sound[aria-pressed="false"] .statusbar__sound-label--off { display: inline; }
.statusbar__item--sound[aria-pressed="false"] { opacity: .65; }
.statusbar__label { letter-spacing: inherit; }
.statusbar__label--faint { color: inherit; }
.statusbar__tag {
  /* Inherit font; no chip background or brand colour until hover. */
  font: inherit;
  text-transform: none;
  letter-spacing: inherit;
  color: inherit;
  opacity: .6;
  padding: 0;
  background: transparent;
}
.statusbar__tag--active { color: inherit; background: transparent; }
.statusbar__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: transparent !important;
  box-shadow: inset 0 0 0 1px currentColor;
  opacity: .45;
  flex: 0 0 6px;
}
.statusbar__dot--ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
  opacity: .35;
}
.statusbar__org-mark, .statusbar__user-mark {
  /* Drop the chip — render the initial in the same faint text as everything else. */
  width: auto; height: auto;
  border-radius: 0;
  background: transparent;
  color: inherit;
  display: inline;
  font: inherit;
  letter-spacing: inherit;
  flex: 0 0 auto;
  opacity: .7;
}
.statusbar__user-mark { border-radius: 0; }
.statusbar__chevron { opacity: .35; margin-left: 1px; }
.statusbar__team.is-open .statusbar__chevron { opacity: .8; }
.statusbar__team.is-open .statusbar__item--button {
  background: var(--bg-elev-2);
  color: var(--text-muted);
}
.statusbar__kbd {
  font: inherit;
  letter-spacing: inherit;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  opacity: .55;
  margin-left: auto;
}

/* Upward popup */
.statusbar__team { position: relative; }
.statusbar__menu {
  position: absolute;
  left: 0; bottom: calc(100% + 4px);
  min-width: 220px;
  padding: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px -12px rgba(15, 18, 32, .25),
              0 0 0 1px var(--border-soft);
  display: flex; flex-direction: column; gap: 1px;
  z-index: 41;
  font-size: 12px;
  color: var(--text);
}
.statusbar__menu-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-faint);
  padding: 4px 8px 6px;
}
.statusbar__menu-item {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .35rem .5rem;
  border-radius: 6px;
  border: 0; background: transparent;
  color: var(--text);
  text-decoration: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.statusbar__menu-item:hover {
  background: var(--bg-elev-2);
  color: var(--text);
}
.statusbar__menu-glyph {
  width: 14px; height: 14px;
  display: grid; place-items: center;
  color: var(--text-muted);
  font-weight: 600;
}
.statusbar__menu-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

/* ── Plan limits popover (statusbar "Plan" crumb) ─────────────────────── */
.statusbar__plan { position: relative; display: inline-flex; }
.statusbar__plan-toggle {
  display: inline-flex; align-items: center; gap: .25rem;
  border: 0; background: transparent;
  font: inherit; letter-spacing: inherit; color: inherit;
  cursor: pointer; padding: 0 .15rem; border-radius: 4px;
}
.statusbar__plan-toggle:hover { color: var(--text); }
.statusbar__plan-chevron { opacity: .45; transition: transform .12s ease; }
.statusbar__plan.is-open .statusbar__plan-chevron {
  opacity: .8; transform: rotate(180deg);
}

.plan-pop {
  /* Fixed (not absolute) so it escapes the statusbar crumb's overflow:hidden
     clip. `left` is set in JS from the toggle's position on open. */
  position: fixed;
  left: .75rem; bottom: calc(var(--statusbar-h) + 6px);
  width: 280px; max-height: 60vh; overflow-y: auto;
  padding: 8px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 28px -12px rgba(15, 18, 32, .25),
              0 0 0 1px var(--border-soft);
  z-index: 42;
  font-size: 12px;
  color: var(--text);
}
.plan-pop__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; padding: 2px 4px 8px;
}
.plan-pop__title {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-faint);
}
.plan-pop__plan {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
}
.plan-pop__list { list-style: none; margin: 0; padding: 0; }
.plan-pop__row { padding: .35rem .35rem .4rem; border-radius: 6px; }
.plan-pop__row + .plan-pop__row { margin-top: 1px; }
.plan-pop__row-top {
  display: flex; align-items: baseline; justify-content: space-between; gap: .6rem;
}
.plan-pop__label { color: var(--text-muted); }
.plan-pop__scope {
  margin-left: .4rem; padding: 0 .3rem; border-radius: 4px;
  font-size: 9px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--accent, #6366f1); background: var(--bg-elev-2);
  vertical-align: middle;
}
.plan-pop__value {
  font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap;
}
.plan-pop__inf { font-size: 13px; line-height: 1; color: var(--text-faint); }
.plan-pop__bar {
  margin-top: .3rem; height: 4px; border-radius: 999px;
  background: var(--bg-elev-2); overflow: hidden;
}
.plan-pop__bar-fill {
  display: block; height: 100%; border-radius: 999px;
  background: var(--accent, #6366f1);
}
.plan-pop__row--warning .plan-pop__bar-fill { background: #f59e0b; }
.plan-pop__row--warning .plan-pop__value { color: #b45309; }
.plan-pop__row--breached .plan-pop__bar-fill { background: #ef4444; }
.plan-pop__row--breached .plan-pop__value { color: #dc2626; font-weight: 600; }
.plan-pop__foot {
  display: block; margin-top: 8px; padding: .45rem .35rem 0;
  border-top: 1px solid var(--border);
  color: var(--text-muted); text-decoration: none; font-weight: 500;
}
.plan-pop__foot:hover { color: var(--text); }
.plan-pop__empty, .plan-pop__loading {
  padding: .6rem .4rem; color: var(--text-faint); text-align: center;
}

/* Hide the verbose user name on narrow screens — keep just the chip. */
@media (max-width: 720px) {
  .statusbar__item .statusbar__label { display: none; }
  .statusbar__item .statusbar__tag { display: none; }
  .statusbar__item--brand .statusbar__label { display: inline; }
  .statusbar__team .statusbar__item .statusbar__label { display: inline; }
  /* Text-only items on the right (Feedback, Help) collapse to keep the
     bar tidy; the power-button sign-out stays as an icon-only target. */
  .statusbar__cluster--right .statusbar__item:not(.statusbar__item--logout) { display: none; }
  .statusbar__cluster--right .statusbar__sep:not(:last-of-type) { display: none; }
}

/* ---- Sign-out confirmation modal --------------------------------------- */
.signout-modal .modal-content { border-radius: 14px; }

/* ---- Delete confirmation modal ----------------------------------------- */
.confirm-delete-modal .modal-content { border-radius: 14px; }
.confirm-delete-modal__message { line-height: 1.5; }
.confirm-delete-modal__input { font-family: var(--font-mono, ui-monospace, monospace); }
.confirm-delete-modal code[data-confirm-delete-word] { font-weight: 600; }

/* ---- Row "Deleting…" state --------------------------------------------- */
.data-table__row--deleting,
.lib-folders__row--deleting { opacity: 0.6; pointer-events: none; }
.deleting-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.78rem; font-weight: 600; color: var(--danger, #dc2626);
  white-space: nowrap;
}
.deleting-badge__spinner {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--border, rgba(0,0,0,0.18));
  border-top-color: var(--danger, #dc2626);
  animation: del-spin 0.7s linear infinite;
}
@keyframes del-spin { to { transform: rotate(360deg); } }

/* ---- Team-switch confirmation modal ------------------------------------ */
.team-switch-modal .modal-content { border-radius: 14px; }
.team-switch-modal .modal-body { line-height: 1.5; }
.team-switch-modal__name { color: var(--brand); }

/* ---- Team switcher modal ----------------------------------------------- */
.team-switcher-modal .modal-content { border-radius: 14px; }
.team-switcher-modal__controls {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: .55rem;
  margin-bottom: .75rem;
}
@media (max-width: 540px) {
  .team-switcher-modal__controls { grid-template-columns: 1fr; }
}
.team-switcher-modal__table-wrap {
  height: 60vh;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.team-switcher-modal__table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-size: .88rem;
}
.team-switcher-modal__table thead th {
  position: sticky; top: 0;
  background: var(--bg-elev);
  color: var(--text-muted);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: left;
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--border);
}
.team-switcher-modal__table th.num,
.team-switcher-modal__table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.team-switcher-modal__table tbody td {
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.team-switcher-modal__table tbody tr:last-child td { border-bottom: 0; }
.team-switcher-modal__row {
  cursor: pointer;
  transition: background-color .12s;
}
.team-switcher-modal__row:hover,
.team-switcher-modal__row:focus-visible {
  background: var(--bg-elev-2);
  outline: none;
}
.team-switcher-modal__row.is-active {
  background: var(--brand-50);
}
.team-switcher-modal__row.is-active td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.team-switcher-modal__cell-name {
  display: inline-flex; align-items: center; gap: .55rem;
  min-width: 0;
}
.team-switcher-modal__mark {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 600;
  color: #fff;
  flex: 0 0 22px;
}
.team-switcher-modal__name {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Org chart (modern, zoomable, searchable) -------------------------- */
.orgchart {
  --orgchart-bg: var(--bg-elev);
  --orgchart-card-w: 168px;
  --orgchart-card-h: 86px;
  --orgchart-gap-x: 18px;
  --orgchart-gap-y: 34px;
  --orgchart-line: var(--border-strong);
  margin-top: 1rem;
  background: var(--orgchart-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
  isolation: isolate;
}

/* ── Toolbar ──────────────────────────────────────────────────────────── */
.orgchart__toolbar {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem .75rem;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.orgchart__search {
  position: relative;
  flex: 1 1 320px;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: 0 .65rem;
  height: 36px;
  background: var(--bg-elev-2);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-muted);
  transition: border-color .12s, background-color .12s;
}
.orgchart__search:focus-within {
  background: var(--bg-elev);
  border-color: var(--brand);
  color: var(--text);
}
.orgchart__search-input {
  flex: 1;
  border: 0; background: transparent; outline: 0;
  font: inherit; font-size: .9rem;
  color: var(--text);
  height: 100%;
}
.orgchart__search-input::placeholder { color: var(--text-faint); }
.orgchart__search-count {
  font-size: .75rem;
  color: var(--text-faint);
  padding-left: .35rem;
  border-left: 1px solid var(--border);
}
.orgchart__search-count:empty { display: none; }
.orgchart__search-kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .7rem;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg-elev);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.orgchart__search:focus-within .orgchart__search-kbd { display: none; }

.orgchart__viewtoggle {
  display: inline-flex;
  background: var(--bg-elev-2);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.orgchart__viewbtn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: 0 .65rem; height: 30px;
  border: 0; background: transparent;
  border-radius: 6px;
  font: inherit; font-size: .8rem; font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color .12s, color .12s;
}
.orgchart__viewbtn:hover { color: var(--text); }
.orgchart__viewbtn.is-active {
  background: var(--bg-elev);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(15,18,32,.08);
}

.orgchart__zoom {
  display: inline-flex; align-items: center;
  background: var(--bg-elev-2);
  border-radius: 8px;
  padding: 3px;
  gap: 1px;
}
.orgchart__zoombtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px;
  padding: 0 .4rem;
  border: 0; background: transparent;
  border-radius: 6px;
  font: inherit; font-size: .85rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color .12s, color .12s;
}
.orgchart__zoombtn:hover { background: var(--bg-elev); color: var(--text); }
.orgchart__zoombtn--value { min-width: 52px; font-variant-numeric: tabular-nums; font-size: .78rem; }
.orgchart__zoombtn--fit { padding: 0 .5rem; }

/* ── Canvas + stage (pan & zoom) ─────────────────────────────────────── */
.orgchart__canvas {
  position: relative;
  height: 70vh;
  min-height: 460px;
  overflow: hidden;
  cursor: grab;
  background:
    radial-gradient(circle at 1px 1px, var(--border-soft, var(--border)) 1px, transparent 1px) 0 0 / 22px 22px,
    var(--bg);
}
.orgchart__canvas.is-panning { cursor: grabbing; }
.orgchart__canvas[hidden] { display: none; }
.orgchart__stage {
  position: absolute;
  top: 50%; left: 50%;
  /* Scale about the centre so zooming out keeps the tree centred (the pan/zoom
     maths in app.js assumes a centre origin). With a 0 0 origin a wide tree
     drifts up-left on fit and you have to drag it back into view. */
  transform-origin: 50% 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: transform .15s ease;
  will-change: transform;
}
.orgchart__canvas.is-panning .orgchart__stage,
.orgchart__canvas.is-zooming .orgchart__stage { transition: none; }
/* Curved connectors from a shared matter up to each team that handles it. The
   SVG sits inside the transformed stage (so it pans/zooms with the cards) and
   never intercepts clicks. */
.orgchart__links {
  position: absolute;
  top: 0; left: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.orgchart__link {
  fill: none;
  stroke: var(--brand, #6366f1);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
  opacity: .5;
}
/* Shared-matters band: matters handled by more than one team, shown once. */
.orgchart__shared {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
.orgchart__shared-label {
  font-size: .7rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-subtle, #94a3b8);
}
.orgchart__shared-row {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
.orgchart__shared-row .orgchart__node--matter { margin: 0; }
/* The shared-band matter cards stack above the connector SVG. */
.orgchart__shared-row .orgchart__card { position: relative; z-index: 1; }

.orgchart__hint {
  position: absolute;
  left: 12px; bottom: 10px;
  font-size: .72rem;
  color: var(--text-faint);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  padding: 3px 8px;
  border-radius: 6px;
  pointer-events: none;
  opacity: .8;
}

/* ── Tree rows + connectors (drawn with pseudo-elements) ─────────────── */
.orgchart__row {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  justify-content: center;
  gap: var(--orgchart-gap-x);
  position: relative;
}
.orgchart__node {
  position: relative;
  padding-top: var(--orgchart-gap-y);
  display: flex; flex-direction: column; align-items: center;
  min-width: var(--orgchart-card-w);
}
.orgchart__row--root > .orgchart__node { padding-top: 0; }

/* drop line into each child */
.orgchart__node::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: 1px; height: var(--orgchart-gap-y);
  background: var(--orgchart-line);
}
.orgchart__row--root > .orgchart__node::before { display: none; }

/* horizontal sibling rail */
.orgchart__node::after {
  content: "";
  position: absolute;
  top: 0; height: 1px;
  background: var(--orgchart-line);
}
.orgchart__node:only-child::after { display: none; }
.orgchart__node:first-child::after { left: 50%; right: calc(var(--orgchart-gap-x) / -2); }
.orgchart__node:last-child::after  { left: calc(var(--orgchart-gap-x) / -2); right: 50%; }
.orgchart__node:not(:first-child):not(:last-child)::after {
  left: calc(var(--orgchart-gap-x) / -2);
  right: calc(var(--orgchart-gap-x) / -2);
}
.orgchart__node > .orgchart__row {
  position: relative;
  margin-top: var(--orgchart-gap-y);
}
.orgchart__node > .orgchart__row::before {
  content: "";
  position: absolute;
  top: calc(var(--orgchart-gap-y) * -1); left: 50%;
  width: 1px; height: var(--orgchart-gap-y);
  background: var(--orgchart-line);
}

/* ── Card (small + modern) ───────────────────────────────────────────── */
.orgchart__card {
  position: relative;
  display: flex; flex-direction: column;
  gap: .45rem;
  width: var(--orgchart-card-w);
  min-height: var(--orgchart-card-h);
  padding: .55rem .65rem .5rem;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15,18,32,.05);
  transition: transform .12s, box-shadow .12s, border-color .12s, opacity .15s;
  overflow: hidden;
}
.orgchart__card:hover {
  transform: translateY(-1px);
  border-color: var(--border-strong);
  box-shadow: 0 10px 20px -14px rgba(15,18,32,.25), 0 1px 2px rgba(15,18,32,.07);
  color: var(--text);
}
.orgchart__card-accent {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
}
.orgchart__node.is-active > .orgchart__card {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-50), 0 6px 18px -12px rgba(59,58,166,.35);
}
.orgchart__node.is-match > .orgchart__card {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-50);
}
.orgchart__node.is-dim > .orgchart__card { opacity: .25; }

.orgchart__card-head {
  display: flex; align-items: center; gap: .5rem;
  padding-left: .25rem;
}
.orgchart__card-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.orgchart__card-name {
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}
.orgchart__card-sub {
  font-size: .68rem;
  color: var(--text-faint);
  letter-spacing: .01em;
  font-variant-numeric: tabular-nums;
}
.orgchart__card-sub-label { font-weight: 400; }
.orgchart__card-foot {
  padding-left: .25rem;
  margin-top: auto;
}
.orgchart__card-foot .avatar-stack .avatar {
  width: 18px; height: 18px; font-size: .55rem;
  border-width: 1.5px;
}

.orgchart__mark {
  color: #fff;
  border-radius: 6px;
  display: grid; place-items: center;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
  flex: 0 0 auto;
}
.orgchart__mark--sm { width: 24px; height: 24px; font-size: .7rem; }
.orgchart__mark--org {
  width: 32px; height: 32px;
  font-size: .9rem;
  border-radius: 8px;
  background: var(--grad-brand, var(--brand, #6366f1));
}

/* Org root card — the anchor at the top of the tree, visually distinct
   from the team nodes below it. */
.orgchart__node--org { padding-top: 0; }
.orgchart__node--org::before,
.orgchart__node--org::after { display: none; }
.orgchart__card--org {
  width: 210px;
  min-height: 96px;
  background: linear-gradient(180deg, var(--bg-elev) 0%, var(--bg-elev-2) 100%);
  border: 1px solid var(--border-strong);
  box-shadow: 0 4px 14px -10px rgba(15,18,32,.25), 0 1px 2px rgba(15,18,32,.06);
}
.orgchart__card--org:hover {
  border-color: var(--brand);
  box-shadow: 0 10px 22px -12px rgba(59,58,166,.35), 0 1px 2px rgba(15,18,32,.07);
}
.orgchart__card--org .orgchart__card-name {
  font-size: .9rem;
  font-weight: 700;
  max-width: 140px;
}
.orgchart__card--org .orgchart__card-sub { font-size: .7rem; }
.orgchart__card-accent--org {
  background: var(--grad-brand, var(--brand, #6366f1)) !important;
  width: 4px;
}
.orgchart__card-orgtag {
  display: inline-block;
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--brand-50);
  color: var(--brand);
}

.orgchart__avatar-more {
  background: var(--bg-elev-2) !important;
  color: var(--text-muted) !important;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--border-strong) !important;
}
.avatar-stack--xs .avatar { width: 18px; height: 18px; font-size: .55rem; }

/* ── Matter chips on team cards ──────────────────────────────────────── */
/* The whole card stays clickable (switch team) via a stretched link painted
   above the static head/foot. Matter chips lift above that link with their
   own z-index so they remain individually clickable. */
.orgchart__card-link {
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
}
.orgchart__card-head,
.orgchart__card-foot { position: relative; z-index: 0; }
.orgchart__card--has-matters { width: 188px; }

.orgchart__matters {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 3px;
  padding-left: .25rem;
}
.orgchart__matter {
  display: flex; align-items: center; gap: .4rem;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  font-size: .68rem; line-height: 1.35;
  color: var(--text-muted);
  text-decoration: none;
  transition: background-color .12s, border-color .12s, color .12s;
}
.orgchart__matter:hover {
  background: var(--bg-elev);
  border-color: var(--brand);
  color: var(--text);
}
.orgchart__matter-dot {
  flex: 0 0 auto;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-faint);
}
.orgchart__matter-title {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.orgchart__matter--more {
  justify-content: center;
  background: transparent;
  border-style: dashed;
  color: var(--text-faint);
  font-weight: 600;
}
.orgchart__matter--more:hover { color: var(--brand); }
.orgchart__table-matters {
  color: var(--brand); text-decoration: none; font-variant-numeric: tabular-nums;
}
.orgchart__table-matters:hover { text-decoration: underline; }
/* status dot colours mirror the matter status badge variants */
.orgchart__matter--primary   .orgchart__matter-dot { background: var(--brand); }
.orgchart__matter--success   .orgchart__matter-dot { background: var(--ok); }
.orgchart__matter--warning   .orgchart__matter-dot { background: var(--warn); }
.orgchart__matter--secondary .orgchart__matter-dot { background: var(--text-faint); }

/* ── Matter sub-nodes (rendered as tree children of a team) ──────────── */
.orgchart__card--matter {
  width: 168px;
  min-height: 64px;
  gap: .25rem;
  border-style: dashed;
}
.orgchart__card-accent--matter { background: var(--text-faint); }
.orgchart__matter-node-head {
  display: flex; align-items: center; gap: .35rem;
}
.orgchart__matter-eyebrow {
  font-size: .6rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-faint);
}
.orgchart__matter-node-title {
  font-size: .78rem; font-weight: 600; line-height: 1.25;
  color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.orgchart__card--matter-more {
  justify-content: center; align-items: center;
  background: transparent;
}
.orgchart__card--matter-more .orgchart__matter-node-title {
  color: var(--text-faint); font-weight: 600;
}
/* status accent mirrors the matter status badge variants */
.orgchart__card--matter-primary   .orgchart__card-accent--matter,
.orgchart__card--matter-primary   .orgchart__matter-dot { background: var(--brand); }
.orgchart__card--matter-success   .orgchart__card-accent--matter,
.orgchart__card--matter-success   .orgchart__matter-dot { background: var(--ok); }
.orgchart__card--matter-warning   .orgchart__card-accent--matter,
.orgchart__card--matter-warning   .orgchart__matter-dot { background: var(--warn); }
.orgchart__card--matter-secondary .orgchart__card-accent--matter,
.orgchart__card--matter-secondary .orgchart__matter-dot { background: var(--text-faint); }

/* ── Teams-only diagram: card click → matters drawer ─────────────────── */
/* The card-link overlay is now a <button> (opens the drawer) — strip native
   button chrome so it behaves like the old stretched anchor. */
.orgchart__card-link {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0; padding: 0; margin: 0;
  width: 100%; cursor: pointer; font: inherit;
}
.orgchart__card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .4rem;
}

/* Matters count pill — the affordance that the card opens its matters. */
.orgchart__matters-pill {
  position: relative; z-index: 0; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  font-size: .64rem; font-weight: 700; color: var(--text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: border-color .12s, color .12s, background-color .12s;
}
.orgchart__matters-pill svg { width: 11px; height: 11px; }
.orgchart__matters-pill-label { display: none; }
.orgchart__matters-pill.is-empty { opacity: .5; }
.orgchart__card:hover .orgchart__matters-pill {
  border-color: var(--brand); color: var(--brand); background: var(--brand-50);
}

/* Selected (its drawer is open) + hovered-branch trail highlight. */
.orgchart__card.is-selected {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--brand-50), 0 12px 26px -16px rgba(59,58,166,.45);
}
.orgchart__card.is-trail { border-color: var(--brand); }

/* ── Collapse / expand toggle (sits on the connector under a parent) ──── */
.orgchart__collapse {
  position: relative; z-index: 3;
  margin: 4px 0 0;
  display: inline-flex; align-items: center; gap: 3px;
  height: 20px; padding: 0 7px; border-radius: 999px;
  background: var(--bg-elev); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  font-size: .64rem; font-weight: 700; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 2px rgba(15,18,32,.06);
  transition: border-color .12s, color .12s, transform .12s;
}
.orgchart__collapse:hover { border-color: var(--brand); color: var(--brand); }
.orgchart__collapse svg { transition: transform .15s ease; }
.orgchart__node.is-collapsed > .orgchart__collapse svg { transform: rotate(-90deg); }
.orgchart__collapse-count { line-height: 1; }
/* Folded sub-tree — hidden unless a search is active (then everything shows). */
.orgchart__node.is-collapsed > .orgchart__row { display: none; }
.orgchart.is-searching .orgchart__node.is-collapsed > .orgchart__row { display: flex; }

/* ── Matters drawer (overlay, slides in from the right) ──────────────── */
.orgchart-drawer { position: fixed; inset: 0; z-index: 1050; }
.orgchart-drawer[hidden] { display: none; }
.orgchart-drawer__scrim {
  position: absolute; inset: 0; background: rgba(15,18,32,.35);
  opacity: 0; transition: opacity .2s ease;
}
.orgchart-drawer.is-open .orgchart-drawer__scrim { opacity: 1; }
.orgchart-drawer__panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: min(420px, 92vw);
  display: flex; flex-direction: column;
  background: var(--bg-elev); border-left: 1px solid var(--border);
  box-shadow: -24px 0 48px -28px rgba(15,18,32,.5);
  transform: translateX(100%);
  transition: transform .24s cubic-bezier(.4,0,.2,1);
  outline: none;
}
.orgchart-drawer.is-open .orgchart-drawer__panel { transform: translateX(0); }
.orgchart-drawer__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem;
  padding: 1rem 1.1rem .75rem; border-bottom: 1px solid var(--border);
}
.orgchart-drawer__eyebrow {
  font-size: .62rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand);
}
.orgchart-drawer__title { font-size: 1.05rem; font-weight: 700; margin: .1rem 0 0; line-height: 1.2; }
.orgchart-drawer__meta { font-size: .78rem; color: var(--text-muted); margin-top: .1rem; }
.orgchart-drawer__close {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px;
  background: transparent; border: 1px solid transparent; color: var(--text-muted); cursor: pointer;
}
.orgchart-drawer__close:hover { background: var(--bg-elev-2); border-color: var(--border); color: var(--text); }
.orgchart-drawer__search {
  display: flex; align-items: center; gap: .45rem;
  margin: .75rem 1.1rem 0; padding: .4rem .6rem;
  border: 1px solid var(--border); border-radius: 8px; color: var(--text-muted);
}
.orgchart-drawer__search-input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
  font: inherit; font-size: .85rem; color: var(--text);
}
.orgchart-drawer__statuses {
  display: flex; flex-wrap: wrap; gap: .35rem;
  padding: .6rem 1.1rem .25rem;
}
.orgchart-drawer__statuses:empty { display: none; }
.orgchart-drawer__chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: 3px 9px; border-radius: 999px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  color: var(--text-muted); cursor: pointer;
  font-size: .72rem; font-weight: 600; white-space: nowrap;
  transition: border-color .12s, color .12s, background-color .12s;
}
.orgchart-drawer__chip:hover { border-color: var(--border-strong); color: var(--text); }
.orgchart-drawer__chip.is-active {
  border-color: var(--brand); color: var(--brand); background: var(--brand-50);
}
.orgchart-drawer__chip-n { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.orgchart-drawer__chip.is-active .orgchart-drawer__chip-n { color: var(--brand); }
.orgchart-drawer__body { flex: 1; overflow-y: auto; padding: .75rem 1.1rem 1rem; }
.orgchart-drawer__group { margin-bottom: 1rem; }
.orgchart-drawer__group-head {
  display: flex; align-items: center; gap: .4rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); margin: .3rem 0 .45rem;
}
.orgchart-drawer__group-n { margin-left: auto; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.orgchart-drawer__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.orgchart-drawer__dot--primary   { background: var(--brand); }
.orgchart-drawer__dot--success   { background: var(--ok); }
.orgchart-drawer__dot--warning   { background: var(--warn); }
.orgchart-drawer__dot--secondary { background: var(--text-faint); }
.orgchart-drawer__item {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .45rem .55rem; border-radius: 7px;
  text-decoration: none; color: var(--text); border: 1px solid transparent;
  min-width: 0; overflow: hidden;
}
a.orgchart-drawer__item:hover { background: var(--bg-elev-2); border-color: var(--border); }
.orgchart-drawer__item-title {
  flex: 1 1 auto; min-width: 0; font-size: .85rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.orgchart-drawer__item-ref { flex: 0 0 auto; }
.orgchart-drawer__item-ref { font-size: .7rem; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.orgchart-drawer__foot {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .75rem 1.1rem; border-top: 1px solid var(--border);
}
.orgchart-drawer__loading, .orgchart-drawer__empty { color: var(--text-muted); font-size: .85rem; padding: 1rem .25rem; }
.orgchart-drawer__cap { color: var(--text-faint); font-size: .72rem; text-align: center; padding: .5rem 0; }
@media (prefers-reduced-motion: reduce) {
  .orgchart-drawer__panel, .orgchart-drawer__scrim { transition: none; }
}

/* ── Table view ──────────────────────────────────────────────────────── */
.orgchart__table-wrap {
  padding: .75rem;
  background: var(--bg-elev);
  max-height: 70vh;
  overflow: auto;
}
.orgchart__table-wrap[hidden] { display: none; }
.orgchart__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .85rem;
}
.orgchart__table thead th {
  position: sticky; top: 0;
  background: var(--bg-elev);
  text-align: left;
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-faint);
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--border);
  z-index: 1;
}
.orgchart__table tbody td {
  padding: .55rem .75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.orgchart__table tbody tr:hover td { background: var(--bg-elev-2); }
.orgchart__table tbody tr.is-active td { background: var(--brand-50); }
.orgchart__table tbody tr.is-hidden { display: none; }
.orgchart__table-team {
  display: inline-flex; align-items: center; gap: .5rem;
}
.orgchart__table-name { font-weight: 500; }
.orgchart__table-faint { color: var(--text-faint); }
.orgchart__table-leads {
  color: var(--text-muted);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.orgchart__table-empty {
  padding: 1.5rem;
  text-align: center;
  color: var(--text-faint);
  font-size: .85rem;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .orgchart { --orgchart-card-w: 150px; }
  .orgchart__card-name { max-width: 90px; }
  .orgchart__canvas { height: 60vh; }
  .orgchart__viewbtn span,
  .orgchart__viewtoggle .orgchart__viewbtn { font-size: 0; }
  .orgchart__viewbtn svg { width: 14px; height: 14px; }
}

/* Answer-actions bar — sits at the END of the streamed answer (copy /
   download / print / listen / save / share), not in the top bar. */
.answer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin: 1.25rem 0 .25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border, #e6e8ee);
}
.answer-actions[hidden] { display: none; }

/* ===================================================================
   Output actions — reusable copy / download / print toolbar
   (templates/partials/_output_actions.html + js/output-actions.js)
   =================================================================== */
.output-actions { display:inline-flex; align-items:center; gap:.35rem; }
.output-actions[hidden] { display:none; }

/* A trigger + its anchored menu. */
.oa-group { position: relative; display: inline-flex; }

/* Dropdown caret on menu triggers. */
.oa-caret { transition: transform .14s ease; opacity:.7; }
.oa-group.is-open .oa-caret { transform: rotate(180deg); }

/* Anchored dropdown panel. Opens UPWARD from the left edge of its trigger:
   the toolbar sits at the bottom-left of the scrollable answer pane, so a
   downward menu would be clipped by the container / viewport edge, and a
   right-anchored menu would overflow off the left of the screen. */
.oa-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: auto;
  min-width: 230px;
  background: var(--bg-elev, #fff);
  border: 1px solid var(--border, #e6e8ee);
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(16,18,27,.16);
  padding: 8px;
  z-index: 1300;
  margin: 0;
}
.oa-menu[hidden] { display: none; }
/* In a top bar the toolbar sits at the top-RIGHT, so the default upward,
   left-anchored menu spills above the viewport and off the right edge. Drop it
   DOWN from the trigger and anchor its RIGHT edge so it stays on screen. */
.focus-topbar .oa-menu {
  top: calc(100% + 8px);
  bottom: auto;
  left: auto;
  right: 0;
}
.oa-menu .topbar__menu-head {
  padding: .35rem .6rem .15rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-subtle, #6b7280);
}
.oa-menu .dropdown-item {
  width: 100%;
  border: 0;
  background: none;
  border-radius: 8px;
  padding: .5rem .6rem;
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  cursor: pointer;
  color: inherit;
  text-align: left;
}
.oa-menu .dropdown-item:hover,
.oa-menu .dropdown-item:focus-visible {
  background: var(--bg-elev-2, #f3f4f8);
  outline: none;
}
.oa-menu .dropdown-item svg { flex: 0 0 auto; opacity: .85; }
.oa-menu .dropdown-item__sub {
  margin-left: auto;
  font-size: .72rem;
  color: var(--text-subtle, #6b7280);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Transient "Copied" / error confirmation toast. */
.oa-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  background: var(--text, #15171e);
  color: #fff;
  font-size: .85rem;
  font-weight: 500;
  padding: .55rem .95rem;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(16,18,27,.28);
  opacity: 0;
  pointer-events: none;
  z-index: 2000;
  transition: opacity .16s ease, transform .16s ease;
}
.oa-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.oa-toast--error { background: var(--danger, #c0392b); }

/* "Include citations?" choice shown before a Copy / Download on opted-in
   surfaces (Ask / Interact runs). Markup is built in static/js/output-actions.js. */
.oa-modal { position: fixed; inset: 0; z-index: 2100; display: flex;
  align-items: center; justify-content: center; padding: 1rem; }
.oa-modal[hidden] { display: none; }
.oa-modal__backdrop { position: absolute; inset: 0; background: rgba(16,18,27,.45);
  backdrop-filter: blur(2px); }
.oa-modal__panel { position: relative; width: 100%; max-width: 420px;
  background: var(--bg-elev, #fff); color: var(--text, #15171e);
  border: 1px solid var(--border, #e6e8ee); border-radius: 16px;
  box-shadow: 0 24px 64px rgba(16,18,27,.28); padding: 1.25rem; }
.oa-modal__head { display: flex; align-items: center; gap: .6rem; margin-bottom: .35rem; }
.oa-modal__icon { display: inline-flex; flex: 0 0 auto; width: 36px; height: 36px;
  align-items: center; justify-content: center; border-radius: 10px;
  background: var(--bg-elev-2, #f3f4f8); color: var(--brand, #6d4aff); }
.oa-modal__title { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.oa-modal__lead { margin: 0 0 .9rem; font-size: .85rem; color: var(--text-subtle, #6b7280); }
.oa-modal__opt { display: flex; gap: .65rem; align-items: flex-start;
  padding: .7rem .8rem; margin-bottom: .5rem; border: 1px solid var(--border, #e6e8ee);
  border-radius: 12px; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.oa-modal__opt:hover { background: var(--bg-elev-2, #f3f4f8); }
.oa-modal__opt input { margin-top: .15rem; flex: 0 0 auto; accent-color: var(--brand, #6d4aff); }
.oa-modal__opt:has(input:checked) { border-color: var(--brand, #6d4aff);
  background: color-mix(in srgb, var(--brand, #6d4aff) 7%, transparent); }
.oa-modal__opt-body { display: flex; flex-direction: column; gap: .15rem; }
.oa-modal__opt-title { font-weight: 600; font-size: .9rem; }
.oa-modal__opt-sub { font-size: .78rem; color: var(--text-subtle, #6b7280); line-height: 1.4; }
.oa-modal__actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .9rem; }

/* ===========================================================================
   Cookie consent banner (GDPR / ePrivacy / CCPA) — pinned bottom-left,
   site-wide. Markup: partials/_cookie_consent.html · logic: js/cookie-consent.js
   =========================================================================== */
.cc-root {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 2147483000; /* above app chrome, modals, toasts */
  width: 420px;
  max-width: calc(100vw - 40px);
}
.cc-card {
  background: var(--bg-elev);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px 22px 20px;
}
.cc-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.32rem;
  font-weight: 600;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.cc-text {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 18px;
}
.cc-link {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cc-link:hover { color: var(--brand-700); }

/* Buttons */
.cc-actions { display: flex; flex-direction: column; gap: 10px; }
.cc-actions-row { display: flex; gap: 10px; }
.cc-actions-row .cc-btn { flex: 1; }
.cc-btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 11px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
  font-family: inherit;
}
.cc-btn--primary { background: var(--brand); color: #fff; }
.cc-btn--primary:hover { background: var(--brand-700); }
.cc-btn--outline {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}
.cc-btn--outline:hover { border-color: var(--text-subtle); }
.cc-btn--ghost {
  background: var(--bg-tint);
  border-color: var(--border);
  color: var(--text);
}
.cc-btn--ghost:hover { background: var(--bg-elev-2); }
.cc-btn--block { width: 100%; margin-top: 4px; }

/* Category list (settings panel) */
.cc-cats { list-style: none; margin: 0 0 16px; padding: 0; }
.cc-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--bg-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px;
  margin-bottom: 10px;
}
.cc-cat-meta { display: flex; flex-direction: column; gap: 2px; }
.cc-cat-name { font-size: 0.92rem; font-weight: 600; }
.cc-cat-desc { font-size: 0.8rem; color: var(--text-subtle); }
.cc-cat-state {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin: 0;
}
.cc-required { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }
.cc-state-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 22px;
  text-align: right;
}
.cc-toggle {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Switch */
.cc-switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--text-faint);
  transition: background .16s ease;
  flex: none;
}
.cc-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease;
}
.cc-switch--on { background: var(--brand); }
.cc-switch--on .cc-knob { transform: translateX(18px); }
.cc-switch--locked { background: var(--brand); opacity: 0.85; cursor: not-allowed; }

@media (max-width: 520px) {
  .cc-root { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .cc-actions-row { flex-direction: column; }
}

/* Legal / policy pages (e.g. Cookie Policy) */
.legal { max-width: 760px; margin: 0 auto; padding: 40px 24px 80px; }
.legal__brand { display: inline-block; margin-bottom: 28px; }
.legal__doc h1 { font-family: "Fraunces", Georgia, serif; font-size: 2.1rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 6px; }
.legal__doc h2 { font-size: 1.18rem; font-weight: 700; margin: 30px 0 8px; }
.legal__doc h3 { font-size: 1rem; font-weight: 600; margin: 20px 0 4px; }
.legal__doc p { font-size: 0.95rem; line-height: 1.65; color: var(--text-muted); margin: 0 0 12px; }
.legal__doc code { background: var(--bg-tint); padding: 1px 6px; border-radius: 6px; font-size: 0.85em; }
.legal__meta { color: var(--text-subtle); font-size: 0.85rem !important; }
.legal__tag { display: inline-block; font-size: 0.7rem; font-weight: 600; vertical-align: middle; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--ok-50); color: var(--ok); }
.legal__tag--opt { background: var(--info-50); color: var(--info); }
.legal__back { margin-top: 36px; }
.legal__back a { color: var(--brand); }

/* ---- Team / org logo filling a colour-chip slot --------------------- */
/* Pairs with partials/_team_chip.html: when a team or org has an uploaded
   logo, the switcher / org-chart "mark" shows the image instead of the
   initials. The caller's base class keeps the size, border-radius and
   box-shadow; this only swaps the fill. Inline background-image supplies
   the URL. */
.team-mark--photo {
  background-color: var(--bg-elev, #fff);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: transparent;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10);
}

/* ==========================================================================
   MIRA console — Kanban board, On/Off switch, and small console helpers.
   Used by the MIRA sub-surfaces (Activity, Tools, External Call, Skills,
   Automation, Scheduled, Timesheet, Your Agent, Chat).
   ========================================================================== */

/* ---------- Kanban (Activity board) ---------- */
.kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
@media (max-width: 1100px) { .kanban { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .kanban { grid-template-columns: 1fr; } }
.kanban__col {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: .75rem;
  min-height: 120px;
  display: flex; flex-direction: column; gap: .65rem;
}
.kanban__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; padding: .15rem .25rem .4rem;
  font-weight: 600; font-size: .9rem; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.kanban__head .count {
  font-size: .78rem; color: var(--text-subtle);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: .05rem .5rem; font-variant-numeric: tabular-nums;
}
.kanban__card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  padding: .85rem .9rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.kanban__card-top {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-size: .72rem; color: var(--text-subtle);
}
.kanban__card-title { font-weight: 600; font-size: .92rem; color: var(--text); line-height: 1.3; }
.kanban__card-meta  { font-size: .78rem; color: var(--text-subtle); }
.kanban__card-note  {
  font-size: .82rem; color: var(--text-muted); font-style: italic;
  background: var(--bg-elev-2); border-radius: var(--radius-sm);
  padding: .5rem .6rem; line-height: 1.4;
}
.kanban__bar { height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; }
.kanban__bar > span { display: block; height: 100%; background: var(--gold); }

/* ---------- On/Off switch (persisted toggle) ---------- */
.switch {
  --w: 38px; --h: 22px;
  position: relative; display: inline-flex; align-items: center; gap: .55rem;
  border: 0; background: transparent; cursor: pointer; padding: 0;
  font-size: .82rem; color: var(--text-subtle); font-weight: 500;
}
.switch__track {
  width: var(--w); height: var(--h);
  background: var(--border-strong); border-radius: 999px;
  position: relative; transition: background-color .15s ease; flex: none;
}
.switch__track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: calc(var(--h) - 4px); height: calc(var(--h) - 4px);
  background: #fff; border-radius: 50%;
  box-shadow: var(--shadow-sm); transition: transform .15s ease;
}
.switch--on .switch__track { background: var(--ok); }
.switch--on .switch__track::after { transform: translateX(calc(var(--w) - var(--h))); }
.switch[disabled] { cursor: default; opacity: .55; }
.switch.is-busy { opacity: .6; pointer-events: none; }

/* ---------- console misc ---------- */
.mira-toolbar {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.mira-toolbar .form-control, .mira-toolbar .form-select { max-width: 320px; }
.mira-cat-head {
  display: flex; align-items: center; justify-content: space-between;
  margin: 1.5rem 0 .75rem; padding-bottom: .35rem;
  border-bottom: 1px solid var(--border);
}
.mira-cat-head h3 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--text-subtle); margin: 0;
}
.mira-cat-head .count { font-size: .78rem; color: var(--text-faint); }
.conn-card { position: relative; }
.conn-card.is-roadmap { opacity: .62; }
.agent-chip {
  font-size: .72rem; color: var(--text-subtle);
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: 999px; padding: .1rem .5rem; font-weight: 500;
}
.mira-detail {
  position: sticky; top: 1rem;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.1rem;
}
.mira-detail__label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-subtle); font-weight: 700; margin-bottom: .2rem;
}
.lock-pill {
  font-size: .72rem; color: var(--text-subtle);
  display: inline-flex; align-items: center; gap: .3rem;
  border: 1px dashed var(--border-strong); border-radius: 999px; padding: .15rem .55rem;
}

/* ---------- MIRA Tools & APIs — uniform catalogue cards ----------
   One card system shared by connected apps, native tools and connectors so
   every tile is the same width and height regardless of how many sit in a
   category. ``auto-fill`` (not ``auto-fit``) keeps a lone card at its natural
   width instead of stretching it across the whole row. */
.mira-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.mira-tcard {
  display: flex; flex-direction: column;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.15rem; min-height: 172px;
}
.mira-tcard.is-roadmap { opacity: .62; }
.mira-tcard__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .5rem; margin-bottom: .4rem;
}
.mira-tcard__name { font-weight: 600; line-height: 1.3; }
.mira-tcard__cat {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  font-size: .66rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-subtle); font-weight: 600; margin-bottom: .55rem;
}
.mira-tcard__desc {
  font-size: .85rem; line-height: 1.45; color: var(--text-subtle);
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
.mira-tcard__desc--empty { color: var(--text-faint); font-style: italic; }
.mira-tcard__foot {
  margin-top: auto; padding-top: 1rem;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}

/* How a connected app links: org-wide (one shared firm login) vs per-user. Shown
   as a pill on every card (the at-a-glance hint) and echoed in the intro copy. */
.scope-pill {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  text-transform: none; padding: .12rem .45rem; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap; vertical-align: middle;
}
.scope-pill--org  { background: var(--info-subtle, #e7f1fb); color: var(--info, #2b6cb0); }
.scope-pill--user { background: var(--brand-subtle, #ece9fb); color: var(--brand, #5b4bd6); }

/* Header action cluster (view toggle, export, search) sitting at the page top-right. */
.page-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.page-actions .form-control { max-width: 240px; }
.page-actions .segmented__item { text-decoration: none; }

/* Compact inline stat strip — a lighter alternative to the full .kpi row, used
   inside a page header (e.g. Your Agent) to summarise a roster at a glance. */
.mira-stats { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.mira-stats__item { display: flex; flex-direction: column; gap: .1rem; }
.mira-stats__value {
  font-family: var(--font-serif); font-weight: 500; font-size: 1.4rem;
  letter-spacing: -.015em; line-height: 1; font-variant-numeric: tabular-nums;
}
.mira-stats__label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-subtle); font-weight: 600;
}

/* Long invite emails must wrap instead of widening the column and shoving the
   Resend action out of the card. */
.invite-email-cell { max-width: 0; }
.invite-email-cell > div { overflow-wrap: anywhere; word-break: break-word; }

/* Leading-cell layout for table rows that pair a title with sub-meta. */
.table-rows .cell-lead { display: flex; flex-direction: column; gap: .12rem; }
.table-rows .cell-lead small { color: var(--text-subtle); }
.table-rows td.cell-num { font-variant-numeric: tabular-nums; text-align: right; }
.table-rows th.cell-num { text-align: right; }

/* ---------- Skills catalogue + reference files ---------- */
.skill-card { display: flex; flex-direction: column; }
.skill-card__label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-subtle); font-weight: 700; margin: .5rem 0 .35rem;
}
.ref-list { display: flex; flex-direction: column; }
.ref-row {
  display: flex; align-items: center; gap: .55rem;
  padding: .4rem 0; font-size: .88rem;
  border-bottom: 1px solid var(--border);
}
.ref-row:last-child { border-bottom: 0; }
.ref-row__icon { flex: none; display: inline-flex; color: var(--text-subtle); }
.ref-row__icon svg { width: 15px; height: 15px; }
.ref-row__name { color: var(--text); }
.ref-row__name--off { color: var(--text-faint); text-decoration: line-through; }
.ref-row--toggle { padding: .5rem 0; }

/* Reference files as a distinct, self-contained section within the skill card —
   a bordered, tinted panel so it reads as its own block (not loose rows), with
   the "Add reference files" action anchored as its footer. */
.ref-section {
  margin-top: .85rem; padding: .7rem .8rem .8rem;
  background: var(--bg-subtle, rgba(127,127,127,.05));
  border: 1px solid var(--border); border-radius: var(--radius, 10px);
}
.ref-section__head {
  display: flex; align-items: center; gap: .5rem; margin-bottom: .15rem;
}
.skill-card__label.mb-0 { margin-bottom: 0; }
.ref-section__count {
  font-size: .66rem; font-weight: 700; line-height: 1;
  padding: .12rem .4rem; border-radius: 999px;
  background: var(--bg-elev); border: 1px solid var(--border); color: var(--text-subtle);
}
.ref-section .ref-row:first-of-type { padding-top: .15rem; }
.ref-section__empty, .ref-section__more { padding: .35rem 0 .1rem; }
.ref-section__add {
  margin-top: .65rem; display: inline-flex; align-items: center; gap: .4rem;
}
.ref-section__add svg { vertical-align: -2px; }

/* ---------- MIRA Chat — immersive conversation (focus-shell) ---------- */
/* The shell is three rows: topbar (auto) / scrolling conversation (1fr) /
   sticky composer (auto). The middle row owns the scroll so the topbar and
   composer stay pinned and the scroll-to-latest button has something to pin. */
.mira-chat { grid-template-rows: auto 1fr auto; position: relative; }
.mira-chat__body {
  overflow-y: auto; scroll-behavior: smooth;
  padding: 1.6rem 1rem 1.4rem;
}
.mira-chat__column { width: 100%; max-width: 64rem; margin: 0 auto; }

/* Reset the legacy bounded-box stream styling — the body row scrolls now. */
.mira-chat .chat-stream {
  display: flex; flex-direction: column; gap: 1.6rem;
  min-height: 0; max-height: none; overflow: visible;
  padding: 0; border: 0; background: transparent; box-shadow: none;
}

/* ---- intro / empty state ---- */
/* Landing (no messages yet): center the intro + composer as one group in the
   middle of the screen, hero-style, rather than docking the composer at the
   bottom. Auto margins on the body/composer split the slack above and below. */
.mira-chat.is-empty { display: flex; flex-direction: column; }
.mira-chat.is-empty .mira-chat__body {
  flex: 0 0 auto; overflow: visible; margin-top: auto;
}
.mira-chat.is-empty .mira-chat__composer {
  margin-bottom: auto;
  border-top: 0; background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.chat-intro { margin: auto; max-width: 36rem; text-align: center; padding: 2.5rem 0 1.5rem; }
.chat-intro__spark {
  display: inline-grid; place-items: center; width: 54px; height: 54px;
  border-radius: 16px; margin-bottom: 1rem;
  background: var(--brand-50); color: var(--brand); border: 1px solid var(--brand-100);
}
.chat-intro__spark svg { width: 26px; height: 26px; }
.chat-intro .eyebrow { justify-content: center; }
.chat-intro__title {
  font-family: var(--font-serif); font-weight: 500; letter-spacing: -.02em;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin: .4rem 0 .6rem; color: var(--text);
}
.chat-intro__sub { color: var(--text-muted); line-height: 1.65; margin: 0 auto; max-width: 32rem; }
.chat-intro__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1.5rem; }
.chat-suggest {
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); font-size: .85rem; padding: .5rem .85rem;
  border-radius: 999px; cursor: pointer; transition: border-color .14s, color .14s, background-color .14s, transform .14s;
}
.chat-suggest:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); transform: translateY(-1px); }

/* ---------- Document canvas (slide-in artifact viewer) ---------- */
.mira-chat { --canvas-w: 460px; transition: padding-right .22s ease; }
.mira-chat.has-canvas { padding-right: var(--canvas-w); }

.mira-canvas {
  position: fixed; top: 0; right: 0; bottom: var(--statusbar-h, 0px);
  width: var(--canvas-w); max-width: 100vw; z-index: 45;
  display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--border);
  box-shadow: -18px 0 48px -28px rgba(0, 0, 0, .45);
  transform: translateX(100%); transition: transform .24s cubic-bezier(.22, .61, .36, 1);
}
.mira-canvas.is-open { transform: translateX(0); }

/* Drag-to-resize grip on the canvas's left edge. */
.mira-canvas__resizer {
  position: absolute; left: -4px; top: 0; bottom: 0; width: 11px; z-index: 6;
  cursor: ew-resize; touch-action: none;
  display: flex; align-items: center; justify-content: center;
}
.mira-canvas__grip {
  width: 4px; height: 48px; border-radius: 3px; background: var(--border);
  transition: background-color .14s, height .14s;
}
.mira-canvas__resizer:hover .mira-canvas__grip { background: var(--brand); height: 72px; }
.mira-chat.is-resizing .mira-canvas__grip { background: var(--brand); }
/* While dragging, kill transitions so the panel tracks the cursor 1:1, and
   suppress text selection across the page. */
.mira-chat.is-resizing,
.mira-chat.is-resizing .mira-canvas { transition: none; }
.mira-chat.is-resizing { user-select: none; }
.mira-chat.is-resizing * { cursor: ew-resize !important; }

.mira-canvas__head {
  display: flex; align-items: center; gap: .6rem;
  padding: .7rem .9rem; border-bottom: 1px solid var(--border); background: var(--bg-elev);
  position: relative; z-index: 2;   /* keep the header (+ Download menu) above the body's editor toolbar */
}
.mira-canvas__badge {
  font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-50); border: 1px solid var(--brand-100);
  padding: .15rem .45rem; border-radius: 6px; white-space: nowrap;
}
.mira-canvas__title {
  font-size: .98rem; font-weight: 600; margin: 0; flex: 1 1 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text);
}
.mira-canvas__head-actions { display: flex; align-items: center; gap: .4rem; }
.mira-canvas__dl { position: relative; }
.mira-canvas__dl-menu {
  position: absolute; right: 0; top: calc(100% + .35rem); z-index: 5; min-width: 168px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 14px 38px -20px rgba(0, 0, 0, .5); padding: .3rem;
}
.mira-canvas__dl-item {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  color: var(--text); font-size: .86rem; padding: .45rem .55rem; border-radius: 7px;
  cursor: pointer; text-decoration: none;
}
.mira-canvas__dl-item:hover { background: var(--brand-50); color: var(--brand); }
.mira-canvas__close, .mira-canvas__icon-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--border); background: var(--surface); border-radius: 8px;
  color: var(--text-muted); cursor: pointer;
}
.mira-canvas__close:hover { color: var(--text); border-color: var(--brand); }
.mira-canvas__icon-btn { color: var(--brand); border-color: var(--brand-100); background: var(--brand-50); }
.mira-canvas__icon-btn:hover { background: var(--brand); color: #fff; border-color: var(--brand); }

.mira-canvas__body { flex: 1 1 auto; overflow-y: auto; padding: 1.2rem; background: var(--bg); }
.mira-canvas__loading, .mira-canvas__error { color: var(--text-muted); text-align: center; padding: 2rem 0; }
.mira-canvas__error { color: var(--danger, #c0392b); }

/* Source PDF mode — the in-app PDF.js viewer fills the panel edge-to-edge. */
.mira-canvas[data-kind="pdf"] .mira-canvas__body { padding: 0; overflow: hidden; background: #2b2f33; }
.mira-canvas__frame { width: 100%; height: 100%; min-height: 100%; border: 0; display: block; }

/* Editable document mode — the in-app editor fills the panel; toolbar pinned. */
.mira-canvas[data-kind="editable"] .mira-canvas__body { padding: 0; overflow: hidden; }
.mira-editor { display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* The shared .md-toolbar is built for Draft's full-bleed .doc-canvas; inside the
   canvas it must sit flush in its own strip (no negative margins, lighter shadow)
   and stay UNDER the header so the Download dropdown opens on top of it. */
.mira-editor .md-toolbar {
  flex: none; position: static; margin: 0; border-radius: 0; z-index: 1;
  flex-wrap: wrap; row-gap: .15rem;
  box-shadow: var(--shadow-sm);
}
.mira-editor .answer-md {
  flex: 1 1 auto; overflow-y: auto; margin: 0; padding: 1.6rem 1.8rem;
  background: #fff; color: #14110b; border-radius: 0; outline: none;
}
.mira-editor__status {
  margin-left: auto; align-self: center; white-space: nowrap;
  font-size: .72rem; color: var(--text-faint); padding: 0 .55rem;
}

/* Word preview — a serif "paper" matching ai_draft's canvas. */
.mira-canvas__paper {
  background: #fff; color: #14110b; font-family: var(--font-serif, Georgia, serif);
  line-height: 1.7; padding: 2.4rem 2.2rem; border-radius: 6px;
  border: 1px solid var(--border); box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
}
.mira-canvas__paper h1, .mira-canvas__paper h2, .mira-canvas__paper h3 { font-weight: 600; line-height: 1.25; margin: 1.3em 0 .5em; }
.mira-canvas__paper h1 { font-size: 1.5rem; }
.mira-canvas__paper h2 { font-size: 1.25rem; }
.mira-canvas__paper h3 { font-size: 1.08rem; }
.mira-canvas__paper p { margin: 0 0 .9em; }
.mira-canvas__paper ul, .mira-canvas__paper ol { margin: 0 0 .9em 1.3em; }
.mira-canvas__paper table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.mira-canvas__paper th, .mira-canvas__paper td { border: 1px solid #d9d2c4; padding: .4rem .55rem; text-align: left; }
.mira-canvas__paper blockquote { border-left: 3px solid var(--brand); margin: 1em 0; padding: .2em 0 .2em 1em; color: #4a4536; }

/* Spreadsheet preview — zebra tables, one per sheet. */
.mira-canvas__sheet { display: flex; flex-direction: column; gap: 1.4rem; }
.mira-canvas__sheet-name { font-weight: 600; font-size: .9rem; color: var(--text-muted); margin-bottom: .3rem; }
.mira-canvas__table { border-collapse: collapse; width: 100%; font-size: .84rem; background: var(--surface); }
.mira-canvas__table th { background: #0b0e17; color: #fff; font-weight: 600; text-align: left; padding: .5rem .6rem; position: sticky; top: 0; }
.mira-canvas__table td { border: 1px solid var(--border); padding: .42rem .6rem; color: var(--text); vertical-align: top; }
.mira-canvas__table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--bg-elev) 60%, transparent); }

/* Presentation preview — a stack of 16:9-ish slide cards. */
.mira-canvas__deck { display: flex; flex-direction: column; gap: 1.1rem; }
.mira-canvas__slide {
  background: #fff; color: #14110b; border: 1px solid var(--border);
  border-radius: 6px; padding: 1.4rem 1.6rem; box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
}
.mira-canvas__slide-no { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .4rem; }
.mira-canvas__slide-title { font-family: var(--font-serif, Georgia, serif); font-size: 1.2rem; font-weight: 600; margin: 0 0 .6rem; }
.mira-canvas__slide ul { margin: 0 0 0 1.2rem; line-height: 1.6; }

/* Artifact chips under a message. */
.chat-artifacts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.chat-artifact-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: .5rem .7rem; cursor: pointer; color: var(--text); max-width: 320px;
  transition: border-color .14s, box-shadow .14s, transform .14s;
}
.chat-artifact-chip:hover { border-color: var(--brand); box-shadow: 0 6px 18px -12px rgba(0, 0, 0, .4); transform: translateY(-1px); }
.chat-artifact-chip__ic { display: inline-grid; place-items: center; color: var(--brand); }
.chat-artifact-chip__ic svg { width: 18px; height: 18px; }
.chat-artifact-chip__name { font-size: .86rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-artifact-chip__badge {
  font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); background: var(--bg-elev); border: 1px solid var(--border);
  padding: .1rem .35rem; border-radius: 5px;
}

/* "Applied …" chips — the sub-skills / reference files MIRA used this turn. */
.chat-skills { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.chat-skill-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .2rem .5rem .2rem .35rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-tint);
  font-size: .78rem; color: var(--text-muted); max-width: 22rem;
}
.chat-skill-chip__tag {
  font-size: .6rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand); background: var(--bg-elev); border: 1px solid var(--border);
  padding: .08rem .35rem; border-radius: 999px; flex: none;
}
.chat-skill-chip[data-kind="reference"] .chat-skill-chip__tag { color: var(--text-muted); }
.chat-skill-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Scrim — mobile overlay behind the canvas. */
.mira-canvas__scrim { position: fixed; inset: 0; z-index: 44; background: rgba(0, 0, 0, .42); }

/* ---------- Sources rail (research-mode turns) ----------
   A docked right panel — same push mechanism as the canvas — that holds the
   grounding sources for the active answer. Reveals when a turn produces sources;
   inline [n] citations in the answer scroll to its cards. The artifact canvas
   takes precedence: while it's open the rail tucks away (canvas width wins). */
.mira-chat { --sources-w: 360px; }
.mira-chat.has-sources { padding-right: var(--sources-w); }
.mira-chat.has-sources.has-canvas { padding-right: var(--canvas-w); }
.mira-sources {
  position: fixed; top: 0; right: 0; bottom: var(--statusbar-h, 0px);
  width: var(--sources-w); max-width: 100vw; z-index: 40;
  display: flex; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--border);
  box-shadow: -18px 0 48px -28px rgba(0, 0, 0, .45);
  transform: translateX(100%); transition: transform .24s cubic-bezier(.22, .61, .36, 1);
}
.mira-chat.has-sources .mira-sources { transform: translateX(0); }
.mira-chat.has-sources.has-canvas .mira-sources { transform: translateX(100%); }
.mira-sources__head {
  display: flex; align-items: center; gap: .6rem;
  padding: .75rem .9rem; border-bottom: 1px solid var(--border); background: var(--bg-elev);
}
.mira-sources__title { font-weight: 600; font-size: .92rem; margin: 0; color: var(--text); }
.mira-sources__count { font-size: .78rem; color: var(--text-muted); }
.mira-sources__close {
  margin-left: auto; display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 8px; border: 1px solid transparent; background: transparent;
  color: var(--text-muted); cursor: pointer; transition: background-color .14s, color .14s;
}
.mira-sources__close:hover { background: var(--surface); color: var(--text); }
.mira-sources__body { flex: 1; overflow-y: auto; padding: .85rem; }
.mira-sources__body .sources-list { margin: 0; padding: 0; list-style: none; }

/* Topbar toggle pill — reopens the rail after it's been closed. */
.focus-topbar__sources {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .8rem; color: var(--text-muted);
  border: 1px solid var(--border); background: var(--surface);
  padding: .28rem .6rem; border-radius: 999px; cursor: pointer;
  transition: border-color .14s, color .14s, background-color .14s;
}
.focus-topbar__sources:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.focus-topbar__sources[hidden] { display: none; }

@media (max-width: 991px) {
  .mira-chat.has-canvas { padding-right: 0; }
  .mira-canvas { width: min(100vw, 520px); top: 0; bottom: 0; z-index: 1050; }
  .mira-canvas__resizer { display: none; }
  .mira-chat.has-sources { padding-right: 0; }
  .mira-sources { width: min(100vw, 420px); z-index: 1040; }
}

/* PDF path — print only the canvas document. */
@media print {
  body * { visibility: hidden !important; }
  .mira-canvas, .mira-canvas * { visibility: visible !important; }
  .mira-canvas { position: absolute; inset: 0; width: 100%; box-shadow: none; border: 0; transform: none; }
  .mira-canvas__head, .mira-canvas__scrim, .mira-canvas__resizer { display: none !important; }
  .mira-canvas__body { overflow: visible; padding: 0; }
  .mira-canvas__paper { border: 0; box-shadow: none; padding: 0; }
}

/* ---- message rows ---- */
.chat-msg { display: flex; gap: .85rem; align-items: flex-start; }
.chat-msg__avatar {
  flex: none; width: 30px; height: 30px; border-radius: 9px; margin-top: 1.35rem;
  display: grid; place-items: center;
}
.chat-msg__avatar svg { width: 17px; height: 17px; }
/* The user turn shows the person's uploaded photo (or initials chip) so they
   see themselves, matching the topbar and member lists. Both fill the box. */
.chat-msg__avatar-img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; display: block; }
.chat-msg__avatar-ini { width: 100%; height: 100%; border-radius: inherit; display: grid; place-items: center; font-size: .72rem; font-weight: 700; }
.chat-msg--assistant .chat-msg__avatar { background: var(--brand-50); color: var(--brand); border: 1px solid var(--brand-100); }
.chat-msg--user .chat-msg__avatar { background: var(--bg-elev-2); color: var(--text-muted); border: 1px solid var(--border); overflow: hidden; }
.chat-msg__main { min-width: 0; flex: 1; }
.chat-msg__who {
  font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--text-faint); margin: 0 0 .3rem .15rem;
}
.chat-msg__bubble { line-height: 1.6; font-size: .95rem; color: var(--text); }
/* User turn: tinted contained bubble. Assistant turn: open prose card. */
.chat-msg--user .chat-msg__bubble {
  background: var(--brand); color: #fff;
  border-radius: 14px; border-top-left-radius: 4px;
  padding: .7rem 1rem; display: inline-block; max-width: 100%;
}
.chat-msg--user .chat-msg__bubble a { color: #fff; text-decoration: underline; }
.chat-msg--assistant .chat-msg__bubble {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; border-top-left-radius: 4px;
  padding: .85rem 1.1rem; box-shadow: var(--shadow-xs);
}

/* chat-tuned markdown: tight spacing, sans headings */
.chat-msg__bubble > :first-child { margin-top: 0; }
.chat-msg__bubble > :last-child { margin-bottom: 0; }
.chat-msg__bubble p { margin: 0 0 .6rem; }
.chat-msg__bubble h1, .chat-msg__bubble h2, .chat-msg__bubble h3, .chat-msg__bubble h4 {
  font-family: var(--font-sans); font-weight: 650; line-height: 1.3;
  margin: 1rem 0 .45rem; letter-spacing: -.01em;
}
.chat-msg__bubble h1 { font-size: 1.12rem; }
.chat-msg__bubble h2 { font-size: 1.05rem; }
.chat-msg__bubble h3 { font-size: .98rem; }
.chat-msg__bubble h4 { font-size: .92rem; }
.chat-msg__bubble ul, .chat-msg__bubble ol { margin: 0 0 .6rem; padding-left: 1.25rem; }
.chat-msg__bubble li { margin: .2rem 0; }
.chat-msg__bubble li > ul, .chat-msg__bubble li > ol { margin: .2rem 0; }
.chat-msg__bubble a { color: var(--brand); }
.chat-msg__bubble blockquote {
  margin: .6rem 0; padding: .2rem 0 .2rem .85rem;
  border-left: 3px solid var(--border-strong); color: var(--text-muted);
}
.chat-msg__bubble hr { border: 0; border-top: 1px solid var(--border); margin: .9rem 0; }
.chat-msg__bubble pre {
  background: var(--bg-tint); border: 1px solid var(--border); border-radius: 10px;
  padding: .8rem .9rem; overflow-x: auto; font-size: .84rem; margin: 0 0 .6rem;
}
.chat-msg__bubble code {
  font-family: var(--font-mono); font-size: .85em;
  background: var(--bg-tint); padding: .12em .4em; border-radius: 5px;
}
.chat-msg__bubble pre code { background: none; padding: 0; }
.chat-msg__bubble table {
  border-collapse: collapse; margin: 0 0 .6rem; font-size: .88rem;
  display: block; overflow-x: auto; max-width: 100%;
}
.chat-msg__bubble th, .chat-msg__bubble td {
  border: 1px solid var(--border); padding: .4rem .6rem; text-align: left;
}
.chat-msg__bubble th { background: var(--bg-tint); font-weight: 600; }

/* per-message action row (copy) */
.chat-msg__actions { display: flex; gap: .4rem; margin: .4rem 0 0 .15rem; }
.chat-act {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid transparent; background: transparent;
  color: var(--text-faint); font-size: .76rem; font-weight: 600;
  padding: .25rem .5rem; border-radius: 7px; cursor: pointer;
  transition: color .12s ease, background-color .12s ease;
}
.chat-act:hover { color: var(--text); background: var(--bg-tint); }
.chat-act.is-done { color: var(--ok); }

/* ---------------------------------------------------------------------------
   Ask-style reading layout for MIRA chat
   The conversation reads like an Ask "research run" rather than chat cards:
   a centered reading column where the user's turn is a serif question echo
   and MIRA's answer flows as borderless document prose — no avatars, no
   boxed bubbles. The multi-turn flow is unchanged; only the per-message
   chrome is restyled, so this covers both server-rendered and live-streamed
   turns (both emit the same .chat-msg markup). See ai_ask/run.html.
   --------------------------------------------------------------------------- */
.mira-chat__column { max-width: 52rem; }              /* Ask-like reading measure */
.mira-chat .chat-stream { gap: 2.6rem; }              /* document rhythm between turns */

/* No avatar gutter — stack the turn as a single column (Ask has no avatars). */
.mira-chat .chat-msg { display: block; }
.mira-chat .chat-msg__avatar { display: none; }

/* User turn → serif question echo (like .research-question__text), no bubble.
   The "You" label becomes a quiet gold eyebrow above it. */
.mira-chat .chat-msg--user .chat-msg__who {
  color: var(--gold, var(--brand)); font-size: .68rem; letter-spacing: .07em;
  margin: 0 0 .35rem;
}
/* User turns render at normal, uniform body size (no oversized hero serif) so a
   typed message reads consistently with the rest of the conversation. A slightly
   heavier weight keeps it distinguishable as the user's line. */
.mira-chat .chat-msg--user .chat-msg__bubble {
  background: none; color: var(--text);
  border: 0; border-radius: 0; padding: 0; max-width: none; display: block;
  font-family: var(--font-sans); font-weight: 500;
  font-size: 1rem; line-height: 1.55; letter-spacing: normal;
}
.mira-chat .chat-msg--user .chat-msg__bubble a { color: var(--text); text-decoration: none; }
.mira-chat .chat-msg--user .chat-msg__files { font-family: var(--font-sans); font-weight: 400; }
/* (legacy) is-compact now matches the base — kept so older markup stays uniform. */
.mira-chat .chat-msg--user .chat-msg__bubble.is-compact {
  font-family: var(--font-sans); font-weight: 400;
  font-size: 1rem; line-height: 1.55; letter-spacing: normal;
}

/* MIRA turn → borderless flowing prose (like .answer-md). Drop the "MIRA"
   label and the card box; let the answer carry the page. */
.mira-chat .chat-msg--assistant .chat-msg__who { display: none; }
.mira-chat .chat-msg--assistant .chat-msg__bubble {
  background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none;
  font-size: 1rem; line-height: 1.7;
}
.mira-chat .chat-msg--assistant .chat-msg__bubble h1,
.mira-chat .chat-msg--assistant .chat-msg__bubble h2 {
  font-family: var(--font-serif); font-weight: 500; letter-spacing: -.012em;
}
.mira-chat .chat-msg--assistant .chat-msg__bubble h2 { font-size: 1.35rem; margin: 1.8rem 0 .25rem; }
.mira-chat .chat-msg--assistant .chat-msg__bubble h3 { font-size: 1.04rem; margin: 1.3rem 0 .2rem; }

/* Live "working" activity row (thinking / routing / consulting a specialist) */
.chat-activity { display: flex; align-items: center; gap: .6rem; color: var(--text-muted); font-size: .9rem; }
.chat-activity__label { font-style: italic; }
/* "Created the document" confirmation — success tint, upright (not the italic
   "working" voice), with the check glyph sized to the text. */
.chat-activity--done { color: var(--success, #16a34a); }
.chat-activity--done .chat-activity__label { font-style: normal; }
.chat-activity--done svg { width: 15px; height: 15px; flex: none; }
.chat-typing { display: inline-flex; gap: 4px; align-items: center; }
.chat-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--brand);
  display: inline-block; animation: chatType 1.1s ease-in-out infinite;
}
.chat-typing i:nth-child(2) { animation-delay: .18s; }
.chat-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes chatType {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-4px); opacity: 1; }
}
/* Blinking caret shown at the end of streaming text */
.chat-cursor {
  display: inline-block; width: 7px; height: 1.05em; vertical-align: -2px;
  margin-left: 2px; background: var(--brand); border-radius: 1px;
  animation: chatCaret 1s steps(1) infinite;
}
@keyframes chatCaret { 50% { opacity: 0; } }

/* Shimmering "what MIRA is doing" label shown next to the caret while a tool
   runs after some answer text has already streamed (e.g. building a document). */
.chat-doing { display: inline-flex; align-items: baseline; gap: .45rem; }
.chat-doing__txt {
  font-size: .92rem; font-weight: 500; letter-spacing: .005em;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--text-muted) 70%, transparent) 30%,
    var(--brand) 50%,
    color-mix(in srgb, var(--text-muted) 70%, transparent) 70%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: chatDoingShimmer 1.5s linear infinite;
}
@keyframes chatDoingShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .chat-doing__txt { animation: none; -webkit-text-fill-color: var(--text-muted); color: var(--text-muted); }
}

/* Live agent-activity surface: shows only the *currently active* step as one
   modern, ticking row (skill breadcrumb · action · elapsed), plus a quiet tally
   of completed steps — instead of stacking every tool call into a growing list. */
.chat-steps {
  display: flex; flex-direction: column; gap: .3rem;
  margin: 0 0 .8rem; padding: .55rem .75rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-tint);
}
.chat-steps[hidden] { display: none; }
.chat-step {
  display: flex; align-items: center; gap: .5rem; font-size: .88rem;
  color: var(--text); min-width: 0;
  animation: chatStepIn .22s ease both;
}
@keyframes chatStepIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
/* Skill breadcrumb — the specialist the live action runs under. */
.chat-step__skill {
  font-size: .72rem; font-weight: 600; letter-spacing: .01em;
  color: var(--brand); background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: 999px;
  padding: .06rem .5rem; flex: none; max-width: 14rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-step__label { line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-step__time {
  margin-left: auto; flex: none; font-size: .76rem; color: var(--text-faint);
  font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .3s ease;
}
.chat-step.is-slow .chat-step__time { opacity: 1; }
.chat-step__dot {
  width: 13px; height: 13px; flex: none; border-radius: 50%;
  border: 2px solid var(--brand); border-top-color: transparent;
  animation: chatStepSpin .7s linear infinite;
}
@keyframes chatStepSpin { to { transform: rotate(360deg); } }
/* Per-step done check in the flat "Step N: …" list (green tick, dot-sized). */
.chat-step__check { display: inline-flex; flex: none; width: 13px; height: 13px; color: var(--ok, var(--brand)); }
/* Quiet "N done" tally under the live row — keeps progress felt without clutter. */
.chat-step__tally {
  display: flex; align-items: center; gap: .3rem;
  font-size: .76rem; color: var(--text-muted);
}
.chat-step__tally[hidden] { display: none; }
.chat-step__tally svg { color: var(--ok, var(--brand)); flex: none; }
/* Clickable variant — the tally expands into the full list of completed steps. */
.chat-step__tally--toggle {
  appearance: none; border: 0; background: none; cursor: pointer;
  font: inherit; padding: .1rem .15rem; border-radius: var(--radius-xs, 5px);
  align-self: flex-start; transition: color .15s ease;
}
.chat-step__tally--toggle:hover { color: var(--text); }
/* Inline variant — the tally rides on the live row beside the action (not on a
   row of its own), so the count + chevron sit next to the running specialist;
   the elapsed timer still anchors to the far right. */
.chat-step__tally--inline { align-self: center; flex: none; margin-left: .15rem; }
.chat-steps__chev { color: var(--text-faint); transition: transform .18s ease; }
.chat-step__tally--toggle[aria-expanded="true"] .chat-steps__chev,
.chat-think__toggle[aria-expanded="true"] .chat-steps__chev { transform: rotate(180deg); }
/* The steps headline doubles as the expand toggle: full-width, reset button
   chrome, chevron pushed to the right. The running variant keeps the live timer
   before the chevron via margin-left:auto on .chat-step__time. */
.chat-steps__head {
  appearance: none; border: 0; background: none; cursor: pointer;
  width: 100%; text-align: left; font: inherit; color: inherit; padding: 0;
}
.chat-steps__head .chat-steps__chev { margin-left: .35rem; }
/* The expanded list of completed steps. */
.chat-steps__list {
  list-style: none; margin: .1rem 0 0; padding: .15rem 0 0;
  display: flex; flex-direction: column; gap: .3rem;
  border-top: 1px solid var(--border);
}
.chat-steps__list[hidden] { display: none; }
.chat-step--recap { font-size: .82rem; color: var(--text-muted); }
.chat-step--recap .chat-step__label { white-space: normal; }
/* The reload-time recap sits inline above the answer — a touch tighter. */
.chat-steps--recap { margin: 0 0 .55rem; }

/* --- Steps as an inline indicator on the "MIRA's thinking" row ------------- */
.chat-think__head { display: flex; align-items: center; gap: .5rem; }
.chat-think__head .chat-think__toggle { flex: none; }
/* Drop the standalone card chrome; sit at the far right as a compact chip that
   anchors the popover. */
.chat-think__head .chat-steps {
  flex: 1 1 0; min-width: 0; margin: 0; padding: 0; border: 0; background: none;
  position: relative; display: flex; flex-direction: row; justify-content: flex-end;
}
.chat-think__head .chat-steps[hidden] { display: none; }
.chat-think__head .chat-steps__head {
  width: auto; max-width: 100%; display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; color: var(--text-muted);
}
.chat-think__head .chat-steps__head:hover { color: var(--text); }
.chat-steps__current { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* The popover list of every step, anchored under the indicator (right-aligned). */
.chat-steps__pop {
  position: absolute; right: 0; top: calc(100% + .35rem); z-index: 30;
  min-width: 16rem; max-width: 26rem; max-height: 16rem; overflow-y: auto;
  margin: 0; padding: .45rem .6rem; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-elev, var(--bg));
  box-shadow: var(--shadow-md, 0 8px 28px rgba(0,0,0,.14));
}
/* Standalone reload indicator (a turn with steps but no persisted reasoning) —
   the same chip + popover, just not nested in a thinking row. */
.chat-steps--solo {
  margin: 0 0 .55rem; padding: 0; border: 0; background: none;
  position: relative; display: inline-flex; flex-direction: row;
}
.chat-steps--solo .chat-steps__head {
  width: auto; display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; color: var(--text-muted);
}
.chat-steps--solo .chat-steps__head:hover { color: var(--text); }

/* Collapsible reasoning log — MIRA's streamed `thinking` is kept here instead of
   flashing past in the status line. Auto-expands during quiet gaps (live). */
.chat-think { margin: 0 0 .55rem; }
.chat-think[hidden] { display: none; }
.chat-think__toggle {
  appearance: none; border: 0; background: none; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .1rem .15rem; border-radius: var(--radius-xs, 5px);
  font-size: .78rem; color: var(--text-muted); transition: color .15s ease;
}
.chat-think__toggle:hover { color: var(--text); }
.chat-think__title { font-weight: 500; }
.chat-think__dots {
  width: 6px; height: 6px; flex: none; border-radius: 50%;
  background: var(--brand); opacity: .8;
}
.chat-think:not(.chat-think--recap) .chat-think__dots { animation: thinkPulse 1.3s ease-in-out infinite; }
@keyframes thinkPulse { 0%, 100% { opacity: .25; } 50% { opacity: .9; } }
.chat-think__body { margin-top: .3rem; }
.chat-think__body[hidden] { display: none; }
.chat-think__text {
  max-height: 11rem; overflow-y: auto;
  font-size: .8rem; line-height: 1.5; color: var(--text-muted);
  white-space: pre-wrap; word-break: break-word;
  padding: .55rem .7rem; border-left: 2px solid var(--border);
  background: var(--bg-tint); border-radius: var(--radius-sm);
}
.chat-status:empty { display: none; }
.chat-status { margin-bottom: .4rem; }
/* Quiet-gap reassurance shown under the status during long tool calls. */
.chat-reassure { color: var(--text-faint); font-size: .8rem; margin: -.1rem 0 .5rem; font-style: italic; }

/* Meta bar above a streaming reply: live connection chip + elapsed clock. */
.chat-meta {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .5rem; font-size: .76rem; color: var(--text-muted);
}
.chat-conn { display: inline-flex; align-items: center; gap: .35rem; }
.chat-conn i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); flex: none; }
.chat-conn__txt { letter-spacing: .01em; }
.chat-conn--connecting i,
.chat-conn--reconnecting i { background: #d9a400; animation: chatConnPulse 1s ease-in-out infinite; }
.chat-conn--live i { background: #1faa59; }
.chat-conn--done i { background: #1faa59; }
.chat-conn--error i { background: #d6453d; animation: none; }
@keyframes chatConnPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.chat-elapsed { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Failure block: the friendly lead + a disclosure carrying the raw reason. */
.chat-error { color: #d6453d; margin-top: .5rem; font-size: .92rem; line-height: 1.4; }
.chat-error__more { margin-top: .45rem; color: var(--text-muted); }
.chat-error__more summary { cursor: pointer; font-size: .82rem; }
.chat-error__more code {
  display: block; margin-top: .3rem; padding: .4rem .55rem;
  white-space: pre-wrap; word-break: break-word; font-size: .8rem;
  color: var(--text-muted); background: var(--bg-tint); border-radius: var(--radius-xs);
}
.chat-error--stopped { color: var(--text-muted); }
.chat-error__actions { margin-top: .55rem; }
/* Edit affordance under a user turn — quiet until the row is hovered. */
.chat-msg__actions--user { opacity: 0; transition: opacity .12s ease; }
.chat-msg--user:hover .chat-msg__actions--user,
.chat-msg__actions--user:focus-within { opacity: 1; }
.chat-edit-btn {
  border: 1px solid transparent; background: transparent; cursor: pointer;
  font-size: .8rem; color: var(--text-muted); padding: .1rem .4rem; border-radius: var(--radius-xs);
}
.chat-edit-btn:hover { color: var(--text); background: var(--bg-tint); }

/* ---- composer (sticky bottom row of the focus-shell) ---- */
.mira-chat__composer {
  padding: .75rem 1rem 1rem;
  background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--border);
}
/* The composer reuses Ask's `.compose` box; this tweaks the in-chat fit. */
.chat-compose {
  width: 100%; max-width: 64rem; margin: 0 auto;
  padding: .65rem .7rem .55rem;
}
.chat-compose textarea { min-height: 46px; max-height: 200px; }
.chat-compose .compose__bar { align-items: center; }
/* Labelled send button (Send + arrow), matching Ask/Interact. */
.chat-compose__send {
  height: 38px; border-radius: 10px;
  display: inline-flex; align-items: center; gap: .4rem;
}
.chat-compose__send .compose__ask-label { font-weight: 600; }

/* ---------- MIRA Chat home (landing) ---------- */
.mira-home__spark {
  display: inline-grid; place-items: center; width: 50px; height: 50px;
  border-radius: 15px; margin-bottom: .85rem;
  background: var(--brand-50); color: var(--brand); border: 1px solid var(--brand-100);
}
.mira-home__spark svg { width: 24px; height: 24px; }
.mira-home .ask-stage__head { display: grid; justify-items: center; }

.mira-recent { max-width: 56rem; margin: 1.5rem auto 0; padding: 0 1rem; }
.mira-recent__head { display: flex; align-items: center; gap: .55rem; margin-bottom: .9rem; }
.mira-recent__title {
  font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); margin: 0;
}
.mira-recent__count {
  display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem;
  border-radius: 999px; font-size: .72rem; font-weight: 700;
  background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text-muted);
}
/* One conversation per line (Ask-style stacked list). */
.mira-recent__grid {
  display: grid; gap: .7rem;
  grid-template-columns: 1fr;
}
.mira-chatcard {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem .95rem; border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-xs); text-decoration: none; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mira-chatcard:hover {
  border-color: var(--brand); transform: translateY(-2px);
  box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--brand) 40%, transparent);
}
.mira-chatcard__icon {
  flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand); border: 1px solid var(--brand-100);
}
.mira-chatcard__icon svg { width: 18px; height: 18px; }
.mira-chatcard__body { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.mira-chatcard__title {
  font-weight: 600; font-size: .92rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mira-chatcard__meta {
  font-size: .78rem; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mira-chatcard__go { flex: none; color: var(--text-faint); transition: color .15s ease, transform .15s ease; }
.mira-chatcard:hover .mira-chatcard__go { color: var(--brand); transform: translateX(2px); }
.mira-recent__empty {
  display: flex; align-items: center; gap: .85rem;
  padding: 1.1rem 1.15rem; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
  background: var(--bg-elev-2);
}
.mira-recent__empty-title { font-weight: 600; color: var(--text); }

/* ---------- Clarifying-questions modal wizard ----------
   Mirrors the `.improve-modal` treatment (brand-tinted header + icon, serif
   title, themed footer) so it's identical in feel to the Ask modal. */
.mira-clarify .modal-dialog { max-width: 680px; }
.mira-clarify__content {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); box-shadow: 0 24px 64px -16px rgba(0, 0, 0, .35);
  overflow: hidden;
}
.mira-clarify__header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 1.25rem .95rem; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 6%, transparent), transparent);
}
.mira-clarify__title-wrap { display: flex; align-items: flex-start; gap: .8rem; }
.mira-clarify__icon {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: var(--brand-50); color: var(--brand);
}
.mira-clarify__icon svg { width: 20px; height: 20px; }
.mira-clarify__title {
  font-family: var(--font-serif); font-weight: 500; font-size: 1.24rem;
  letter-spacing: -.012em; margin: .15rem 0 0; color: var(--text);
}
.mira-clarify__sub { margin: .3rem 0 0; color: var(--text-muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.mira-clarify__body {
  padding: 1.3rem 1.25rem;
  overflow-x: hidden;            /* clip the horizontal slide track */
  overflow-y: auto;             /* let tall option lists scroll, not clip */
  max-height: min(62vh, 540px);
}
.mira-clarify__footer {
  display: flex; align-items: center; gap: .6rem;
  padding: .85rem 1.25rem 1.05rem; border-top: 1px solid var(--border);
  background: var(--bg-elev-2);
}
.mira-clarify__head-actions { display: inline-flex; align-items: center; gap: .35rem; }
.clarify-skip, .clarify-skip-all {
  color: color-mix(in srgb, var(--text) 55%, transparent);
  text-decoration: none; font-size: .82rem; padding: .15rem .35rem;
}
.clarify-skip:hover, .clarify-skip-all:hover { color: var(--text); text-decoration: underline; }
/* "Pick an option…" prompt shown when the user clicks Next without choosing. */
.clarify-hint {
  margin-top: .85rem; font-size: .85rem; color: var(--danger, #c0392b);
  background: color-mix(in srgb, var(--danger, #c0392b) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger, #c0392b) 25%, transparent);
  border-radius: var(--radius-sm); padding: .5rem .7rem;
}
/* Each footer action stacks its button over a faint keyboard-shortcut hint
   that sits OUTSIDE (below) the button rather than inside it. */
.clarify-btn-cell {
  display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
}
.clarify-btn { line-height: 1.15; }
.clarify-kbd {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: .62rem; font-weight: 500; letter-spacing: .02em;
  color: color-mix(in srgb, var(--text) 45%, transparent);
  background: none; border: 0; padding: 0; opacity: .85;
}
/* One step shown at a time — no side-by-side track, so adjacent steps can
   never peek through regardless of overflow/clip quirks. */
.clarify-track { position: relative; width: 100%; }
.clarify-step { display: none; box-sizing: border-box; padding: .1rem; }
.clarify-step.is-active { display: block; animation: clarify-fade .2s ease; }
@keyframes clarify-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.clarify-q {
  font-family: var(--font-serif); font-weight: 500; font-size: 1.12rem;
  letter-spacing: -.01em; margin-bottom: 1rem; line-height: 1.45; color: var(--text);
}
.clarify-opt {
  display: flex; align-items: flex-start; gap: .7rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .7rem .85rem; margin-bottom: .5rem; cursor: pointer;
  background: var(--bg-elev); font-size: .94rem; color: var(--text);
  transition: background-color .12s, border-color .12s, box-shadow .12s;
}
.clarify-opt:hover { background: var(--bg-elev-2); border-color: var(--border-strong); }
.clarify-opt input { margin: .15rem 0 0; flex: none; accent-color: var(--brand); }
.clarify-opt:has(input:checked) {
  border-color: var(--brand); background: var(--brand-50);
  box-shadow: inset 0 0 0 1px var(--brand);
}
/* Option label + optional one-liner explanation; the top (best) choice is tagged. */
.clarify-opt__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.clarify-opt__label { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.clarify-opt__hint { color: var(--text-muted); font-size: .8rem; line-height: 1.35; }
.clarify-opt__rec {
  font-size: .66rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-50, rgba(99, 102, 241, .12));
  border: 1px solid var(--brand); border-radius: 999px; padding: .05rem .4rem;
}
.clarify-opt--rec { border-color: var(--brand); }
.mira-clarify textarea.form-control { min-height: 92px; }
/* Inline free-text inside the "Write your own" option box. */
.clarify-other-inline {
  flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text);
  font-size: .94rem; padding: 0; outline: none;
}
.clarify-other-inline::placeholder { color: var(--text-muted); }
/* File-question picker (library reference + upload). */
.clarify-file__tabs { display: flex; gap: .4rem; margin-bottom: .7rem; }
.clarify-file__tab {
  border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-muted);
  border-radius: 999px; padding: .3rem .8rem; font-size: .85rem; cursor: pointer;
}
.clarify-file__tab.is-active { border-color: var(--brand); background: var(--brand-50); color: var(--brand); }
.clarify-file__list {
  display: flex; flex-direction: column; gap: .35rem;
  max-height: 220px; overflow-y: auto;
}
.clarify-libfile {
  display: flex; align-items: center; gap: .6rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .5rem .7rem; font-size: .9rem; color: var(--text); background: var(--bg-elev);
}
.clarify-libfile:hover { background: var(--bg-elev-2); }
.clarify-libfile input { accent-color: var(--brand); flex: none; }
.clarify-libfile:has(input:checked) { border-color: var(--brand); background: var(--brand-50); }
.clarify-file__drop {
  display: block; text-align: center; cursor: pointer; color: var(--text-muted);
  border: 1.5px dashed var(--border-strong); border-radius: var(--radius-sm);
  padding: 1.1rem; font-size: .9rem;
}
.clarify-file__drop:hover { border-color: var(--brand); color: var(--brand); }
.clarify-file__staged { display: flex; flex-direction: column; gap: .35rem; margin-top: .6rem; }
.clarify-chip {
  font-size: .85rem; color: var(--text); background: var(--bg-tint);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .4rem .6rem;
}
.clarify-chip.is-error { color: var(--danger, #b91c1c); border-color: currentColor; }
.clarify-dots { display: flex; gap: 6px; align-items: center; }
.clarify-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); transition: all .2s; }
.clarify-dot.is-active { width: 22px; border-radius: 999px; background: var(--brand); }

/* ===== Draft — Track Changes (MS-Word-style redline review layer) ===== */
.answer-md--doc { --trk-color: #c4341c; }            /* single-author redline accent */
.trk { cursor: default; }
.trk-ins {
  color: var(--trk-color);
  text-decoration: underline;
  text-decoration-thickness: .07em;
  text-underline-offset: .14em;
  background: color-mix(in srgb, var(--trk-color) 9%, transparent);
  border-radius: 2px;
}
.trk-del {
  color: var(--trk-color);
  text-decoration: line-through;
  text-decoration-thickness: .08em;
  opacity: .82;
}
.trk-ins.trk-block, .trk-del.trk-block { display: block; }
/* The hover Accept/Reject popover. */
.trk-pop {
  position: fixed; z-index: 1090;
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .22rem .3rem;
  background: var(--bg-elev, #fff);
  border: 1px solid var(--border-strong, #d8d8d8);
  border-radius: 9px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .16);
  font-size: .72rem; line-height: 1;
}
.trk-pop[hidden] { display: none; }
.trk-pop__lbl { color: var(--text-muted, #666); font-weight: 600; padding: 0 .25rem; white-space: nowrap; }
.trk-pop__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px;
  border: 1px solid transparent; background: transparent;
  color: var(--text, #333); cursor: pointer;
}
.trk-pop__btn--ok:hover { background: rgba(26, 142, 53, .14); color: #1a7f37; border-color: rgba(26, 142, 53, .3); }
.trk-pop__btn--no:hover { background: rgba(192, 28, 40, .12); color: #c01c28; border-color: rgba(192, 28, 40, .3); }
/* Track-changes toggle lit while active. */
.md-toolbar__btn.is-track.is-active { color: var(--trk-color); }

/* ==========================================================================
   "Select from this matter" document picker (templates/partials/_matter_docs_modal.html,
   driven by static/js/attach-menu.js). Searchable, select-all, file-type chips.
   ========================================================================== */
.mdocs .modal-header { border-bottom: 1px solid var(--border); }
.mdocs__lead { margin-bottom: .75rem; }

/* Search toolbar */
.mdocs__tools { display: flex; align-items: center; gap: .625rem; margin-bottom: .625rem; }
.mdocs__search { position: relative; flex: 1 1 auto; }
.mdocs__search svg {
  position: absolute; left: .65rem; top: 50%; transform: translateY(-50%);
  color: var(--text-subtle); pointer-events: none;
}
.mdocs__search-input {
  width: 100%; padding: .45rem .7rem .45rem 2.1rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  font-size: .9rem; background: var(--bg-elev); color: var(--text);
}
.mdocs__search-input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring);
}

/* Sortable table — wide layout, columns truncate the name instead of wrapping */
.mdocs__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mdocs__th {
  position: sticky; top: 0; z-index: 1;
  background: var(--bg-elev); color: var(--text-subtle);
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  text-align: left; padding: .5rem .55rem; cursor: pointer;
  border-bottom: 1px solid var(--border-strong); white-space: nowrap; user-select: none;
}
.mdocs__th[data-sort]:hover { color: var(--text); }
.mdocs__th.is-sort { color: var(--brand); }
.mdocs__th--check  { width: 2.5rem; cursor: default; }
.mdocs__th--type   { width: 4.5rem; }
.mdocs__th--size   { width: 5.5rem; text-align: right; }
.mdocs__th--status { width: 7rem; }
.mdocs__arrow { margin-left: .25rem; font-weight: 700; }

.mdocs__row { cursor: pointer; }
.mdocs__row:hover { background: var(--bg-tint); }
.mdocs__row.is-checked { background: var(--brand-50); }
.mdocs__row.is-disabled { cursor: default; opacity: .6; }
.mdocs__row.is-disabled:hover { background: transparent; }
.mdocs__cell {
  padding: .4rem .55rem; border-bottom: 1px solid var(--border-soft);
  vertical-align: middle; font-size: .9rem; color: var(--text);
}
.mdocs__cell--check { width: 2.5rem; }
.mdocs__check { margin: 0; }
.mdocs__row.is-disabled .mdocs__check { cursor: default; }
.mdocs__cell--name {
  max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mdocs__cell--size { text-align: right; color: var(--text-subtle); font-variant-numeric: tabular-nums; }

/* File-type chip */
.mdocs__ext {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.6rem; height: 1.5rem; border-radius: var(--radius-xs);
  font-size: .6rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: #fff; background: var(--text-subtle);
}
.mdocs__ext[data-kind="pdf"]   { background: #c0392b; }
.mdocs__ext[data-kind="img"]   { background: #2980b9; }
.mdocs__ext[data-kind="doc"]   { background: var(--brand); }
.mdocs__ext[data-kind="sheet"] { background: #1a7f4d; }
.mdocs__ext[data-kind="file"]  { background: #6b7180; }

/* Status badges */
.mdocs__badge {
  display: inline-block; font-size: .68rem; font-weight: 600;
  padding: .18rem .5rem; border-radius: 999px; white-space: nowrap;
}
.mdocs__badge--ok      { color: var(--ok); background: var(--ok-50); }
.mdocs__badge--pending { color: var(--text-subtle); background: var(--bg-tint); }

.mdocs__empty { padding: 1.25rem .5rem; text-align: center; }
.mdocs__selected { font-weight: 600; }

/* No-documents state — explanatory empty state when the matter has no docs */
.mdocs__none { padding: 1.75rem 1.25rem; text-align: center; }
.mdocs__none-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.25rem; height: 3.25rem; margin-bottom: .85rem; border-radius: 50%;
  background: var(--bg-tint); color: var(--text-subtle);
}
.mdocs__none-title { margin: 0 0 .4rem; font-weight: 600; }
.mdocs__none-text { margin: 0 auto .55rem; max-width: 30rem; color: var(--text-subtle); font-size: .85rem; }
.mdocs__none-hint { margin: 0 auto; max-width: 30rem; color: var(--text-subtle); font-size: .8rem; }
/* "Entire matter documents" while it confirms the matter has docs to search */
.compose__menu-item.is-loading { opacity: .6; pointer-events: none; }

/* Files / Folders switch inside the "From this matter" modal */
.mdocs__tabs {
  display: inline-flex; gap: 2px; margin-bottom: .75rem; padding: 3px;
  background: var(--bg-tint); border-radius: 8px;
}
.mdocs__tab {
  border: 0; background: transparent; color: var(--text-subtle);
  font-size: .82rem; font-weight: 600; padding: .3rem .85rem; border-radius: 6px;
  cursor: pointer;
}
.mdocs__tab:hover { color: var(--text); }
.mdocs__tab.is-active { background: var(--bg-elev); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.06); }

/* Folder tree picker (Folders tab; shares the .mdocs modal shell) */
.mfolders__list { display: flex; flex-direction: column; gap: 1px; }
.mfolders__row {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: .45rem .55rem; border: 0; background: transparent; text-align: left;
  color: var(--text); font-size: .9rem; cursor: pointer; border-radius: 6px;
}
.mfolders__row:hover { background: var(--bg-tint); }
.mfolders__row.is-checked { background: var(--brand-50); }
.mfolders__row.is-disabled { cursor: default; opacity: .5; }
.mfolders__row.is-disabled:hover { background: transparent; }
.mfolders__row svg { color: var(--text-subtle); flex: 0 0 auto; }
.mfolders__name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mfolders__count { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

/* Master Lists — clickable group rows + in-use "can't delete" help marker */
.master-lists-row { cursor: pointer; }
.master-lists-row:hover { background: var(--bg-tint); }
.master-help {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--bg-tint); color: var(--text-subtle);
  font-size: .72rem; font-weight: 700; cursor: help; line-height: 1;
}

/* --- V2 launch announcement (My / Team dashboards) ------------------------ */
.v2-welcome {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap;
  border-color: color-mix(in srgb, var(--gold) 45%, var(--border));
  background:
    linear-gradient(120deg,
      color-mix(in srgb, var(--gold) 10%, transparent),
      transparent 60%),
    var(--surface, var(--bg-elev-1));
}
.v2-welcome__body { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.v2-welcome__emblem {
  flex: none; width: 46px; height: 46px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gold-600, var(--gold));
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent);
}
.v2-welcome__emblem svg { width: 23px; height: 23px; }
.v2-welcome__badge {
  display: inline-flex; align-items: center; flex: none;
  padding: .18rem .5rem; border-radius: 999px;
  background: var(--gold); color: #1a1305;
  font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; line-height: 1;
}
.v2-welcome__text { min-width: 0; }
.v2-welcome__actions { display: flex; align-items: center; gap: .65rem; flex: none; }
/* "Take the tour" callout inside the What's-new modal */
.v2-welcome__tour {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin: 1rem 0;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md, 12px);
  background: var(--bg-tint);
}
.v2-welcome__tour-text { min-width: 0; }
.v2-welcome__tour .btn { flex: none; }

/* =========================================================================
   Devil's Advocate — moot-court board (MIRA sub-surface)
   ========================================================================= */
/* ---------- Home / landing ---------- */
.da-home { max-width: 1080px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.da-home__head { margin-bottom: 1.5rem; }
.da-home__title { display: flex; align-items: flex-start; gap: .9rem; }
.da-home__mark {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: var(--gold-50); color: var(--gold-600);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}
.da-home__mark svg { width: 24px; height: 24px; }
.da-home__title h1 { font-size: 1.5rem; margin: 0 0 .2rem; }
.da-home__sub { color: var(--text-muted); margin: 0; max-width: 60ch; }
.da-intro {
  display: flex; align-items: flex-start; gap: .9rem;
  margin-bottom: 1.25rem; padding: 1rem 1.15rem; border-radius: 14px;
  background: linear-gradient(180deg, var(--gold-50), transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 24%, var(--border));
}
.da-intro__mark {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; color: var(--gold-600);
  background: color-mix(in srgb, var(--gold) 14%, transparent);
}
.da-intro__mark .icon { width: 20px; height: 20px; }
.da-intro__text { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--text-muted); max-width: 78ch; }
.da-intro__text strong { color: var(--text); }
.da-intro__text em { font-style: italic; color: var(--gold-600); font-weight: 600; }
.da-home__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
@media (max-width: 820px) { .da-home__grid { grid-template-columns: 1fr; } }
.da-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.15rem 1.15rem 1.3rem;
}
.da-card__title { font-size: 1rem; margin: 0 0 .9rem; }
.da-form { display: flex; flex-direction: column; gap: 1.05rem; }
.da-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
@media (max-width: 520px) { .da-form__row { grid-template-columns: 1fr; } }
.da-field { display: flex; flex-direction: column; gap: .4rem; margin: 0; }
.da-form .form-control, .da-form .form-select { width: 100%; }
.da-field__label { font-size: .82rem; font-weight: 600; color: var(--text-muted); }
.da-field__opt { font-weight: 400; color: var(--text-faint); }
.da-roles { display: flex; flex-wrap: wrap; gap: .5rem; }
.da-role, .da-check {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .4rem .7rem; border: 1px solid var(--border); border-radius: 9px;
  cursor: pointer; font-size: .9rem; background: var(--bg-elev);
}
.da-role:has(input:checked) {
  border-color: var(--gold); background: var(--gold-50); color: var(--gold-600); font-weight: 600;
}
.da-check { border: none; padding: 0; background: none; }
.da-note {
  display: flex; align-items: flex-start; gap: .5rem; margin: 0;
  padding: .6rem .75rem; border-radius: 9px; font-size: .82rem;
  color: var(--text-muted); background: var(--gold-50);
  border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent);
}
.da-note .icon { width: 15px; height: 15px; flex: none; margin-top: .1rem; color: var(--gold-600); }
.da-note--sm { font-size: .76rem; padding: .5rem .6rem; }
.da-parties { display: flex; flex-direction: column; gap: .5rem; }
.da-party { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: .6rem; }
.da-party__role { font-size: .82rem; font-weight: 600; color: var(--text-muted); }
@media (max-width: 520px) { .da-party { grid-template-columns: 1fr; gap: .2rem; } }
.da-form__go { align-self: flex-start; margin-top: .3rem; }
.da-form__go svg { width: 16px; height: 16px; }
.da-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.da-list__link {
  display: flex; flex-direction: column; gap: .15rem;
  padding: .6rem .7rem; border-radius: 9px; border: 1px solid transparent;
  transition: background-color .12s, border-color .12s;
}
.da-list__link { gap: .35rem; }
.da-list__link:hover { background: var(--bg-tint); border-color: var(--border); }
.da-list__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.da-list__name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da-list__meta { font-size: .8rem; color: var(--text-muted); }
.da-list__stats { display: flex; flex-wrap: wrap; gap: .25rem .8rem; margin-top: .1rem; }
.da-stat { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; color: var(--text-faint); }
.da-stat .icon { width: 12px; height: 12px; }
.da-stat--time { margin-left: auto; }
.da-tag {
  flex: none; display: inline-flex; align-items: center; gap: .25rem;
  font-size: .68rem; font-weight: 700; padding: .12rem .45rem; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .03em;
}
.da-tag .icon { width: 11px; height: 11px; }
.da-tag--verdict { background: var(--gold-50); color: var(--gold-600); }
.da-tag--live { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger-600); }
.da-tag--new { background: var(--bg-tint); color: var(--text-faint); }
.da-empty { color: var(--text-muted); font-size: .9rem; }

/* ---------- Board shell ---------- */
.da-topbar__match { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.da-topbar__vs { color: var(--text-faint); font-size: .8rem; font-weight: 600; }
.da-pill--devil {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  color: var(--danger-600); border: 1px solid color-mix(in srgb, var(--danger) 34%, transparent);
}
.da-main { display: flex; flex-direction: column; min-height: 0; }
.da-board { flex: 1; overflow-y: auto; padding: 1rem 1.1rem 1.4rem; }
.da-print-head { display: none; }

.da-columns {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1rem; align-items: start; max-width: 1300px; margin: 0 auto;
}
@media (max-width: 780px) {
  .da-columns { grid-template-columns: 1fr; }
  .da-vs { display: none; }
}
.da-col {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: .85rem; min-height: 220px;
  display: flex; flex-direction: column; gap: .6rem;
}
.da-col--devil { border-color: color-mix(in srgb, var(--danger) 22%, var(--border)); }
.da-col__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.da-col__badge {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 700; font-size: .9rem;
  padding: .3rem .6rem; border-radius: 8px;
}
.da-col__badge svg { width: 15px; height: 15px; }
.da-col__badge--our { background: var(--gold-50); color: var(--gold-600); }
.da-col__badge--devil { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger-600); }
.da-vs {
  align-self: center; font-weight: 800; letter-spacing: .05em;
  color: var(--text-faint); font-size: .8rem;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; border: 1px dashed var(--border);
  background: var(--bg-elev); margin-top: 2.2rem;
}

.da-files { display: flex; flex-wrap: wrap; gap: .3rem; }
.da-file-chip {
  font-size: .72rem; color: var(--text-muted);
  background: var(--bg-tint); border: 1px solid var(--border);
  border-radius: 6px; padding: .12rem .4rem; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.da-turns { display: flex; flex-direction: column; gap: .6rem; }
.da-turn {
  border-radius: 11px; padding: .7rem .8rem;
  border: 1px solid var(--border); background: var(--bg-elev);
  animation: da-in .18s ease-out;
}
@keyframes da-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.da-turn--our { background: var(--gold-50); border-color: color-mix(in srgb, var(--gold) 30%, transparent); }
.da-turn--devil { background: color-mix(in srgb, var(--danger) 6%, var(--surface)); }
.da-turn__who { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-bottom: .3rem; }
.da-turn__body { font-size: .93rem; line-height: 1.55; word-wrap: break-word; }
.da-turn__body > :first-child { margin-top: 0; }
.da-turn__body > :last-child { margin-bottom: 0; }
.da-turn__err { color: var(--danger-600); font-size: .85rem; margin-top: .4rem; }
.da-turn.is-streaming .da-turn__body::after {
  content: "▍"; animation: da-blink 1s step-end infinite; color: var(--text-faint);
}
@keyframes da-blink { 50% { opacity: 0; } }
.da-cite a { color: var(--accent); text-decoration: none; font-weight: 600; font-size: .72em; }

/* ---------- Topbar title + role pills + token meters ---------- */
.da-topbar__match { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.da-topbar__title { font-weight: 700; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 42vw; }
.da-topbar__roles { display: flex; align-items: center; gap: .35rem; }
.da-pill--devil { display: inline-flex; align-items: center; gap: .3rem; }
.da-pill--devil .icon { width: 13px; height: 13px; }
.da-meters { display: flex; gap: .35rem; }
.da-meter {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; padding: .18rem .5rem; border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg-elev);
}
.da-meter__k { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-faint); }
.da-meter__v { font-variant-numeric: tabular-nums; font-weight: 600; }
.da-meter--our .da-meter__k { color: var(--gold-600); }
.da-meter--devil .da-meter__k { color: var(--danger-600); }

/* ---------- Per-side files bar ---------- */
.da-facts { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-bottom: .8rem; }
/* Before the match starts these are hidden via [hidden]; the explicit display
   above would otherwise beat the attribute's default display:none. */
.da-facts[hidden], .da-composer[hidden] { display: none; }
.da-facts__side { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.da-facts__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 1px dashed var(--border); background: var(--bg-elev);
  border-radius: 8px; padding: .35rem .6rem; cursor: pointer; font: inherit;
  font-size: .82rem; color: var(--text-muted);
}
.da-facts__btn:hover { border-color: var(--gold); color: var(--text); }
.da-facts__dot { width: 8px; height: 8px; border-radius: 50%; }
.da-facts__dot--our { background: var(--gold); }
.da-facts__dot--devil { background: var(--danger); }

/* ---------- Chat thread (You right, Devil left) ---------- */
.da-thread { display: flex; flex-direction: column; gap: 1rem; max-width: 940px; margin: 0 auto; }
.da-thread__empty { text-align: center; color: var(--text-muted); padding: 3rem 1rem; }

/* ---------- First-run "Set up your case" onboarding panel ---------- */
.da-onboard {
  text-align: left; padding: 0; color: var(--text);
  max-width: 620px; margin: 1.5rem auto;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 6px 24px -14px rgba(15, 18, 32, .28);
}
.da-onboard__head {
  display: flex; gap: .8rem; align-items: flex-start;
  padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--border-soft);
}
.da-onboard__mark {
  flex: none; display: inline-grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent);
}
.da-onboard__mark .icon { width: 20px; height: 20px; color: var(--danger-600, #b91c1c); }
.da-onboard__title { margin: 0 0 .15rem; font-size: 1.05rem; font-weight: 700; }
.da-onboard__sub { margin: 0; font-size: .86rem; line-height: 1.5; color: var(--text-muted); }

.da-onboard__steps { list-style: none; margin: 0; padding: .5rem .6rem; display: flex; flex-direction: column; gap: .1rem; }
.da-onboard__step {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .8rem; padding: .7rem .6rem; border-radius: 11px;
}
.da-onboard__step + .da-onboard__step { border-top: 1px solid var(--border-soft); border-radius: 0; }
.da-onboard__step:last-child { border-radius: 0 0 11px 11px; }
.da-onboard__num {
  flex: none; display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg-elev); border: 1px solid var(--border);
  font-size: .78rem; font-weight: 700; color: var(--text-muted);
}
.da-onboard__step.is-done .da-onboard__num { background: var(--gold); border-color: var(--gold); color: #fff; }
.da-onboard__body { min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.da-onboard__label {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  font-size: .88rem; font-weight: 600; color: var(--text);
}
.da-onboard__opt {
  font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint); padding: .05rem .35rem; border-radius: 5px;
  background: var(--bg-elev); border: 1px solid var(--border-soft);
}
.da-onboard__count { font-size: .76rem; font-weight: 600; color: var(--gold-600); }
.da-onboard__actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.da-onboard__check { flex: none; font-size: 1rem; color: var(--gold-600); opacity: 0; transition: opacity .15s ease; }
.da-onboard__step.is-done .da-onboard__check { opacity: 1; }
.da-onboard__step--go .da-onboard__body { gap: .5rem; }
.da-onboard__step--go .btn svg { width: 15px; height: 15px; }
.da-onboard__hint { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--text-muted); }
.da-onboard__case {
  width: 100%; min-height: 7.5rem; resize: vertical;
  border: 1px solid var(--border-strong); border-radius: 11px;
  background: var(--surface); color: var(--text);
  padding: .6rem .7rem; font: inherit; line-height: 1.5;
  transition: border-color .14s, box-shadow .14s;
}
.da-onboard__case:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-50); }
.da-onboard__case::placeholder { color: var(--text-faint); }
.da-onboard__tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.da-onboard__go { margin-left: auto; }
.da-onboard__err { color: var(--danger-600, #b91c1c); font-size: .82rem; margin: 0; }
.da-onboard__note {
  display: flex; align-items: flex-start; gap: .5rem; margin: 0;
  padding: .7rem 1.2rem 1.1rem; font-size: .8rem; line-height: 1.45;
  color: var(--text-muted);
}
.da-onboard__note .icon { width: 15px; height: 15px; flex: none; margin-top: .1rem; color: var(--gold-600); }
@media (max-width: 520px) {
  .da-onboard__step { grid-template-columns: auto 1fr; }
  .da-onboard__check { display: none; }
}
.da-msg { display: flex; flex-direction: column; gap: .3rem; max-width: 82%; animation: da-in .18s ease-out; }
.da-msg--our { align-self: flex-end; align-items: flex-end; }
.da-msg--devil { align-self: flex-start; align-items: flex-start; }
.da-msg__who {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--text-faint);
}
.da-msg__mask .icon { width: 14px; height: 14px; color: var(--danger-600); }
.da-msg__bubble { font-size: .93rem; line-height: 1.55; padding: .7rem .9rem; border-radius: 13px; word-wrap: break-word; }
.da-msg__bubble > :first-child { margin-top: 0; }
.da-msg__bubble > :last-child { margin-bottom: 0; }
.da-msg__bubble--our {
  background: var(--gold-50); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-bottom-right-radius: 4px;
}
.da-msg__bubble--devil {
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--danger) 20%, var(--border));
  border-bottom-left-radius: 4px;
}
.da-msg.is-streaming .da-msg__bubble::after {
  content: "▍"; animation: da-blink 1s step-end infinite; color: var(--text-faint);
}
.da-msg__sources {
  display: inline-flex; align-items: center; gap: .3rem;
  border: 1px solid var(--border); background: var(--bg-elev);
  border-radius: 999px; padding: .2rem .6rem; cursor: pointer;
  font-size: .74rem; color: var(--text-muted); font: inherit;
}
.da-msg__sources:hover { border-color: var(--accent); color: var(--accent); }
.da-msg__err { color: var(--danger-600); font-size: .85rem; margin-top: .4rem; }

/* ---------- Suggested-replies modal ---------- */
[data-da-hints-modal] .da-modal__card { width: min(620px, 100%); }
.da-hints-loading { display: flex; align-items: center; gap: .6rem; color: var(--text-muted); padding: 1.5rem .2rem; }
.da-hints { display: flex; flex-direction: column; gap: .65rem; }
.da-hint {
  display: flex; align-items: stretch; gap: .75rem;
  border: 1px solid var(--border); border-radius: 12px;
  padding: .8rem .85rem; background: var(--bg-elev);
  transition: border-color .12s, box-shadow .12s;
}
.da-hint:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--border)); box-shadow: var(--shadow-sm); }
.da-hint__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.da-hint__title { font-weight: 700; font-size: .9rem; line-height: 1.3; }
.da-hint__detail { font-size: .84rem; line-height: 1.5; color: var(--text); }
.da-hint__why {
  display: flex; gap: .45rem; align-items: baseline;
  font-size: .78rem; line-height: 1.45; color: var(--text-muted);
  padding: .4rem .55rem; border-radius: 8px;
  background: var(--gold-50); border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent);
}
.da-hint__why-k { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .68rem; color: var(--gold-600); flex: none; }
.da-hint__use {
  flex: none; align-self: center; white-space: nowrap;
  border: 1px solid var(--gold); background: var(--gold-50); color: var(--gold-600);
  border-radius: 8px; padding: .4rem .7rem; cursor: pointer; font: inherit;
  font-size: .8rem; font-weight: 600; transition: background-color .12s;
}
.da-hint__use:hover { background: var(--gold); color: #fff; }
.da-empty--verdict { text-align: center; padding: 1.4rem .5rem; font-weight: 600; color: var(--gold-600); }
.da-modal__foot--tight { border-top: none; padding-top: .3rem; }
.da-spinner {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 2px solid var(--border); border-top-color: var(--gold);
  animation: da-spin .8s linear infinite;
}
@media (max-width: 640px) { .da-topbar__title { max-width: 40vw; } .da-msg { max-width: 92%; } }

/* ---------- Stage (board + right sources rail) ---------- */
.da-stage {
  display: grid; grid-template-columns: minmax(0, 1fr) 0;
  gap: 0; max-width: 1640px; margin: 0 auto;
  transition: grid-template-columns .22s ease;
}
.da-stage:has(.da-rail.is-open) { grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; }
.da-stage__main { min-width: 0; }
.da-rail {
  min-width: 0; overflow: hidden; opacity: 0;
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface); align-self: start;
  max-height: calc(100vh - var(--statusbar-h, 0px) - 140px);
  display: flex; flex-direction: column;
  position: sticky; top: .5rem; transition: opacity .2s ease;
}
.da-rail:not(.is-open) { border: none; pointer-events: none; }
.da-rail.is-open { opacity: 1; }
.da-rail__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem;
  padding: .7rem .85rem .6rem; border-bottom: 1px solid var(--border); flex: none;
}
.da-rail__titles { min-width: 0; }
.da-rail__titles .research-pane__title { margin: 0; font-size: 1rem; }
.da-rail__x { border: none; background: none; cursor: pointer; color: var(--text-muted); font-size: .95rem; line-height: 1; padding: .1rem; }
.da-rail__filter { padding: .6rem .8rem .2rem; flex: none; }
.da-rail__filter .segmented { width: 100%; }
.da-rail__filter .segmented__item { flex: 1; }
/* Reuse Ask's .sources-list / .source-card styling; just make the list scroll
   inside the docked rail. */
.da-rail .sources-list { overflow-y: auto; padding: .55rem .7rem .8rem; margin: 0; flex: 1; min-height: 0; }
.da-rail .source-card { cursor: default; }   /* no source-modal in the debate rail */
.da-rail .src-filter__empty { margin: 0 .8rem .3rem; }
@media (max-width: 900px) {
  .da-stage:has(.da-rail.is-open) { grid-template-columns: 1fr; }
  .da-rail { position: static; max-height: none; }
}

/* ---------- Verdict — a formal, court-document panel ---------- */
.da-verdict.is-empty { display: none; }
.da-verdict {
  max-width: 820px; margin: 2rem auto 0;
  border: 1px solid var(--border); border-top: 3px solid var(--gold);
  border-radius: 6px; padding: 1.75rem 2rem 2rem;
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.da-verdict__head { text-align: center; margin-bottom: 1.25rem; }
.da-verdict__seal {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: 50%; color: var(--gold-600);
  background: var(--gold-50); border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  margin-bottom: .55rem;
}
.da-verdict__seal svg { width: 21px; height: 21px; }
.da-verdict__kicker {
  display: block; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-faint); margin-bottom: .2rem;
}
.da-verdict__title {
  margin: 0; font-family: var(--font-serif); font-feature-settings: "ss01";
  font-size: 1.6rem; font-weight: 600; letter-spacing: 0;
  padding-bottom: .7rem; position: relative;
}
.da-verdict__title::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 54px; height: 2px; background: var(--gold);
}
/* Prose typography comes from the shared .answer-md class (same as Ask / Draft). */
.da-source { display: flex; gap: .55rem; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 9px; background: var(--bg-elev); }
.da-source__n { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: .72rem; font-weight: 700; background: var(--accent-50); color: var(--accent); }
.da-source__title { font-weight: 600; font-size: .85rem; }
.da-source__excerpt { font-size: .8rem; color: var(--text-muted); margin-top: .15rem; }
.da-source:target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-50); }

/* ---------- Composer ---------- */
.da-composer {
  flex: none; border-top: 1px solid var(--border);
  background: var(--bg-elev); padding: .75rem 1.1rem 1rem;
}
/* Input + action bar share ONE rounded, focus-highlighted field (modern chat
   composer) instead of a bare textarea with buttons floated alongside it. */
.da-composer__box {
  max-width: 940px; margin: 0 auto;
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface);
  padding: .55rem .6rem;
  transition: border-color .14s, box-shadow .14s;
}
.da-composer__box:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-50); }
.da-composer__input {
  width: 100%; resize: none; min-height: 44px; max-height: 200px;
  border: none; background: none; padding: .35rem .25rem;
  font: inherit; line-height: 1.5; color: var(--text);
}
.da-composer__input:focus { outline: none; box-shadow: none; }
.da-composer__input::placeholder { color: var(--text-faint); }
/* Action bar inside the field: the "Suggest replies" pill on the left, "Your Turn" on the right. */
.da-composer__bar { display: flex; align-items: center; gap: .4rem; padding-top: .1rem; }
/* Pill chip button (mirrors the composer chips in Ask / Interact / Draft). */
.da-pill-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--border); background: var(--bg-elev);
  border-radius: 999px; padding: .32rem .7rem; cursor: pointer; font: inherit;
  font-size: .8rem; font-weight: 500; color: var(--text-muted);
  transition: border-color .12s, background-color .12s, color .12s;
}
.da-pill-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-600); background: var(--gold-50); }
.da-pill-btn:disabled { opacity: .5; cursor: not-allowed; }
.da-pill-btn.is-loading { opacity: .6; pointer-events: none; }
.da-composer__hint { margin-right: auto; }
.da-composer__err { color: var(--danger-600); font-size: .82rem; margin: .5rem auto 0; max-width: 940px; }
.da-field__hint { font-size: .75rem; color: var(--text-faint); }

/* Your-Turn button: progress spinner while the Devil is arguing. */
.da-send__spin { display: none; animation: da-spin 1s linear infinite; }
@keyframes da-spin { to { transform: rotate(360deg); } }
.da-send.is-busy .da-send__arrow { display: none; }
.da-send.is-busy .da-send__spin { display: inline-block; }
.da-progress {
  position: relative; height: 3px; border-radius: 3px; overflow: hidden;
  background: var(--gold-50); max-width: 940px; margin: 0 auto .55rem;
}
.da-progress > span {
  position: absolute; inset: 0; width: 40%; border-radius: 3px;
  background: var(--gold); animation: da-indeterminate 1.15s ease-in-out infinite;
}
@keyframes da-indeterminate {
  0% { left: -40%; } 100% { left: 100%; }
}

/* ---------- Settings popover ---------- */
.da-settings { position: relative; }
.da-settings__pop {
  position: absolute; right: 0; top: calc(100% + .4rem); z-index: 40;
  width: 260px; padding: .8rem; display: flex; flex-direction: column; gap: .6rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-lg);
}

/* ---------- Attach menu ---------- */
.da-attach { position: relative; }
.da-attach__count {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px;
  margin-left: .35rem; padding: 0 4px; border-radius: 8px; font-size: .68rem; font-weight: 700;
  background: var(--bg-tint); color: var(--text-muted);
}
.da-attach__menu {
  position: absolute; left: 0; top: calc(100% + .35rem); z-index: 40;
  min-width: 190px; padding: .3rem; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow-lg);
}
.da-attach__menu button {
  text-align: left; padding: .45rem .55rem; border: none; background: none;
  border-radius: 7px; cursor: pointer; font: inherit; color: var(--text);
}
.da-attach__menu button:hover { background: var(--bg-tint); }

/* ---------- Matter picker modal ---------- */
.da-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: rgba(0,0,0,.45); padding: 1rem; }
.da-modal__card { width: min(520px, 100%); max-height: 80vh; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.da-modal__head { display: flex; align-items: center; justify-content: space-between; padding: .85rem 1rem; border-bottom: 1px solid var(--border); font-weight: 700; }
.da-modal__x { border: none; background: none; cursor: pointer; font-size: 1rem; color: var(--text-muted); }
.da-modal__body { padding: .6rem 1rem; overflow-y: auto; }
.da-modal__foot { display: flex; justify-content: flex-end; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--border); }
.da-matter-row { display: flex; align-items: center; gap: .55rem; padding: .45rem .3rem; border-radius: 8px; cursor: pointer; }
.da-matter-row:hover { background: var(--bg-tint); }
.da-matter-row.is-disabled { opacity: .55; cursor: not-allowed; }
.da-matter-row__name { flex: 1; font-size: .88rem; }
.da-matter-row__pending { font-size: .72rem; color: var(--text-faint); }

/* ---------- Print (full case incl. sources) ---------- */
@media print {
  .focus-topbar, .da-composer, .da-vs { display: none !important; }
  .da-board { overflow: visible; height: auto; }
  .da-print-head { display: block; text-align: center; margin-bottom: 1rem; }
  .da-print-head h1 { font-size: 1.3rem; margin: 0 0 .2rem; }
  .da-columns { grid-template-columns: 1fr 1fr; }
  /* Force the sources rail to print inline below the board, even if collapsed. */
  .da-stage { display: block; }
  .da-rail { opacity: 1 !important; border: 1px solid var(--border) !important;
             max-height: none; position: static; margin-top: 1rem; }
  .da-rail__x { display: none; }
}