/* ===================================================================
   iSAT: design system - aligned to Altio Advisory (altioadvisory.com)
   Editorial, serif-led, premium-consultancy aesthetic.
   Mobile-first: base targets 320px; layers up at 768px and 1024px.
   =================================================================== */

/* ===================================================================
   :root tokens
   =================================================================== */
:root {
  /* ---- Brand & ink ---- */
  --navy:        #1f3a5f;
  --navy-deep:   #15293f;
  --navy-ink:    #0e1c2d;
  --blue:        #3b6fa5;
  --blue-strong: #335f8f;
  --blue-bright: #5b8fc4;
  --blue-100:    #d7e4f1;
  --blue-50:     #eaf1f8;

  /* ---- Neutrals ---- */
  --paper:    #ffffff;
  --paper-2:  #f6f8fb;
  --mist:     #eef2f7;
  --line:     #e4e9f0;
  --line-2:   #d3dbe6;
  --text:     #243140;
  --muted:    #5d6b7b;
  --faint:    #8a96a4;

  /* ---- Status palette (iSAT-specific, pharmacovigilance) ---- */
  --ok:       #1f7a4a;
  --ok-bg:    #e2efe6;
  --warn:     #b56b00;
  --warn-bg:  #fde9c8;
  --warn-bg-soft: #eaf1f8;
  --danger:   #a8332a;
  --danger-bg:#fde7e3;
  --danger-bg-soft: #fff5f3;

  /* ---- Type ---- */
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ---- Shape ---- */
  --radius:    4px;
  --radius-lg: 10px;

  /* ---- Layout ---- */
  --container: 1180px;
  --narrow:    780px;

  /* ---- Rhythm ---- */
  --section-y: clamp(2.5rem, 6vw, 5rem);
  --gutter:    clamp(1rem, 4vw, 2.5rem);

  --shadow-sm: 0 1px 2px rgba(15, 28, 45, .05), 0 2px 8px rgba(15, 28, 45, .04);
  --shadow-md: 0 8px 24px rgba(15, 28, 45, .08), 0 2px 6px rgba(15, 28, 45, .05);
  --shadow-lg: 0 24px 60px rgba(15, 28, 45, .14);

  /* ---- Responsive design tokens (added 2026-06-27) ----
     Single source of truth for breakpoints, side gutters, spacing
     and type scale. New code should use these rather than raw values. */
  --bp-phone:  720px;
  --bp-tablet: 1024px;
  --bp-laptop: 1280px;

  /* Side gutter scales: tight on phone, comfortable on laptop. */
  --page-gutter: clamp(0.875rem, 3vw, 1.5rem);

  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  --text-xs:   0.75rem;     /* caption, label, count */
  --text-sm:   0.825rem;    /* footnote, muted body */
  --text-base: 0.95rem;     /* default body */
  --text-lg:   1.1rem;      /* subsection / strong label */
  --text-xl:   1.35rem;     /* section heading */
  --text-2xl:  1.7rem;      /* page heading */
}

/* Container utility: every page surface should use this so side padding
   stays consistent. The .container--narrow variant caps reading width. */
.container {
  width: 100%;
  margin-left: auto; margin-right: auto;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
  max-width: 1500px;
}
.container--narrow { max-width: 880px; }
.container--medium { max-width: 1200px; }

/* ===================================================================
   Base + reset
   =================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 88px;
  overscroll-behavior: none;
}
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  min-height: 100vh;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

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

a {
  color: var(--blue-strong);
  text-decoration: none;
  transition: color .18s ease;
}
a:hover { color: var(--navy); }

::selection { background: var(--blue); color: #fff; }

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

button { font-family: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }

code, pre { font-family: var(--mono); }

.hidden { display: none !important; }

.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  background: var(--navy); color: #fff;
  padding: .6rem 1rem;
  border-radius: var(--radius);
  z-index: 200;
  font-weight: 600;
  font-size: .95rem;
  transition: top .2s ease;
}
.skip-link:focus { top: 1rem; color: #fff; }

/* ===================================================================
   Typography
   =================================================================== */
h1, h2, h3, h4 {
  margin: 0 0 .6em;
  color: var(--navy-ink);
  font-weight: 600;
}

h1, h2 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.012em;
  overflow-wrap: break-word;
  hyphens: auto;
}

h1 { font-size: clamp(1.7rem, 5vw, 2.6rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.85rem); line-height: 1.18; }
h3 {
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.005em;
}
h4 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .4em;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

strong { color: var(--navy-ink); font-weight: 600; }

/* ===================================================================
   Layout helpers
   =================================================================== */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.narrow {
  max-width: var(--narrow);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main {
  display: block;
  padding-block: clamp(1.25rem, 3vw, 2.25rem);
}

section.view {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Editorial eyebrow (uppercase letterspaced label with leading bar). */
.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--blue-strong);
  margin-bottom: .9rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.4rem; height: 1px;
  background: var(--blue);
  vertical-align: middle;
  margin-right: .6rem;
  transform: translateY(-2px);
}

.lede {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  color: var(--muted);
  font-weight: 400;
  max-width: 60ch;
}

/* ===================================================================
   Header / topbar - 3-zone CSS Grid

   Layout: [brand] [center: topnav] [right: actions]

   The 1fr middle column is the one that compresses when the viewport
   gets tight - topnav links inside it shrink their padding rather than
   overlapping the actions to their right. flex-shrink: 0 only sits on
   things that must never compress (identity, sign-out, action pills);
   the central column does the breathing.
   =================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 100;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(.5rem, 1.5vw, 1.25rem);
  padding: .65rem var(--gutter);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.topbar-right {
  display: flex; align-items: center; gap: .65rem;
  justify-self: end;
}
.topbar.scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(15, 28, 45, .04), 0 8px 30px rgba(15, 28, 45, .05);
}

/* Brand block at left. */
.brand-block {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  flex-shrink: 0;
  min-width: 0;
}
.brand-mark {
  width: 32px; height: 32px;
  flex: 0 0 32px;
  border-radius: 6px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-title {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy-ink);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.brand-sub {
  font-size: .72rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* (tenant chip + topbar-spacer removed 2026-06-26 - topbar is now a
   3-zone grid; the middle column absorbs slack instead of a spacer.
   Tenant chip was eating header width and didn't earn its place in
   the day-to-day flow.) */

/* Desktop primary nav. Hidden on phone + tablet via the @media block
   further down; replaced there by the .nav-toggle hamburger + .nav-overlay. */
.topnav {
  display: none;
  align-items: center;
  gap: .1rem;
  min-width: 0;
}
@media (min-width: 1025px) {
  .topnav:not(.hidden) { display: inline-flex; }
}
.topnav-link {
  position: relative;
  font-size: clamp(.82rem, 0.7vw + 0.55rem, .92rem);
  font-weight: 500;
  color: var(--text);
  padding: .5rem clamp(.4rem, 0.7vw, .85rem);
  border-radius: var(--radius);
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .18s ease, background-color .18s ease;
}
.topnav-link::after {
  content: "";
  position: absolute;
  left: clamp(.4rem, 0.7vw, .85rem); right: clamp(.4rem, 0.7vw, .85rem); bottom: .3rem;
  height: 1.5px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.topnav-link:hover { color: var(--navy); }
.topnav-link:hover::after,
.topnav-link.active::after { transform: scaleX(1); }
.topnav-link.active { color: var(--navy); }

/* ============================================================================
   Hamburger nav (phone + tablet, <=1024px). The desktop .topnav is hidden
   under this width via the @media (min-width: 1025px) rule above; this block
   provides the replacement: a 3-line icon in .topbar-right that opens a
   full-screen fade overlay with stacked links + identity + actions.
   ============================================================================ */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.nav-toggle:hover { background: var(--paper-2); }
.nav-toggle-bar {
  display: block;
  width: 18px; height: 2px;
  background: var(--navy);
  border-radius: 1px;
}
@media (max-width: 1024px) {
  .nav-toggle:not(.hidden) { display: inline-flex; }
  /* At phone width, fold identity + About + Sign out into the overlay too. */
  .topbar-right > .who-block,
  .topbar-right > .about-ai-pill,
  .topbar-right > #logout {
    display: none;
  }
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(14, 28, 45, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  display: flex;
  flex-direction: column;
}
.nav-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.nav-overlay-inner {
  background: var(--paper);
  width: min(420px, 100vw);
  height: 100%;
  margin-left: auto;       /* slide-from-right effect via flex alignment */
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: -8px 0 24px rgba(14, 28, 45, .14);
}
.nav-overlay-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.nav-overlay-head .brand-title {
  font-family: var(--serif);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--navy-ink);
}
.nav-close {
  width: 36px; height: 36px;
  background: transparent;
  border: 0;
  font-size: 1.6rem; line-height: 1;
  color: var(--muted);
  cursor: pointer;
  border-radius: var(--radius);
}
.nav-close:hover { color: var(--navy-ink); background: var(--paper-2); }

.nav-overlay-links {
  display: flex; flex-direction: column;
  padding: var(--space-3) 0;
  flex: 1;
  overflow-y: auto;
}
.nav-overlay-links .topnav-link {
  display: block;
  font-family: var(--sans);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--navy-ink);
  padding: var(--space-3) var(--space-5);
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  white-space: normal;
}
.nav-overlay-links .topnav-link::after { display: none; }
.nav-overlay-links .topnav-link.active {
  color: var(--navy);
  background: var(--blue-50);
}
.nav-overlay-links .topnav-link:hover { background: var(--paper-2); }

.nav-overlay-actions {
  display: flex; flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--paper-2);
}
.nav-overlay-actions .who-block {
  display: flex; flex-direction: column;
  margin-bottom: var(--space-2);
}
.nav-overlay-actions .who-name {
  font-weight: 600;
  color: var(--navy-ink);
}
.nav-overlay-actions .who-role {
  font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted);
}
.nav-overlay-actions .about-ai-pill,
.nav-overlay-actions #logout {
  display: inline-flex;
  width: 100%;
  justify-content: center;
}

@media (min-width: 1025px) {
  .nav-overlay { display: none; }
  .nav-toggle  { display: none; }
}

/* Mobile hamburger toggle (uses a checkbox-hack for JS-free interaction). */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: #fff;
  padding: 0;
  position: relative;
  flex-shrink: 0;
  margin-left: auto;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 2px;
  background: var(--navy);
  transform: translate(-50%, -50%);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle span::before { transform: translate(-50%, -7px); }
.nav-toggle span::after  { transform: translate(-50%, 5px); }

/* Mobile drop-down: a <details> element renders an interactive disclosure
   without JavaScript. When open, the mobile-nav surfaces below the topbar. */
.mobile-nav {
  position: absolute;
  left: 0; right: 0; top: 100%;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  padding: .75rem var(--gutter) 1.25rem;
  max-height: calc(100dvh - 4.5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-nav .topnav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.mobile-nav .topnav-link {
  display: block;
  padding: .8rem .25rem;
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  font-weight: 500;
}
.mobile-nav .topnav-link::after { display: none; }
.mobile-nav .topnav-link.active {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* Topbar action cluster (About-this-AI pill, who, sign-out). */
.about-ai-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--blue-strong);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  padding: .45rem .75rem;
  border-radius: 99rem;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.about-ai-pill:hover {
  background: var(--blue-100);
  color: var(--navy);
  border-color: var(--blue);
}
.about-ai-pill svg { color: currentColor; }

/* Two-line compact identity block (name on top, roles below).
   Replaces the old single-line .who that ran ~32 chars wide.
   Sits in the topbar's right zone with flex-shrink: 0 so the topnav
   compresses first, not the identity. */
.who-block {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 1px;
  line-height: 1.1;
  flex-shrink: 0;
  max-width: 22ch;
}
.who-block.hidden { display: none; }
.who-name {
  color: var(--navy-ink);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.who-role {
  color: var(--muted);
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}
.topbar-btn { flex-shrink: 0; }

.topbar-btn {
  font-size: .85rem;
  font-weight: 600;
  color: var(--navy);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: .5rem 1rem;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.topbar-btn:hover {
  border-color: var(--navy);
  background: var(--paper-2);
}

/* ===================================================================
   Buttons (altio variants)
   =================================================================== */
.btn,
button[type="submit"],
#verdict-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  padding: .85rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.btn-primary,
#verdict-form button[type="submit"] {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.btn-primary:hover,
#verdict-form button[type="submit"]:hover {
  background: var(--navy-ink);
  color: #fff;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-accent { background: var(--blue); color: #fff; border-color: var(--blue); }
.btn-accent:hover {
  background: var(--blue-strong); color: #fff;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--line-2);
}
.btn-ghost:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: var(--paper-2);
}

/* ===================================================================
   Login view
   =================================================================== */
#view-login {
  min-height: calc(100vh - 7rem);
  display: grid;
  place-items: center;
  padding-block: clamp(2rem, 6vw, 4rem);
}

.login-card {
  width: 100%;
  max-width: 460px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  text-align: left;
}
.login-card h1 {
  font-size: clamp(1.6rem, 4vw, 2.1rem);
  margin-bottom: 1.25rem;
}

.cfr-banner {
  font-size: .85rem;
  line-height: 1.5;
  color: var(--text);
  background: var(--warn-bg-soft);
  border: 1px solid #f0d684;
  border-left: 3px solid var(--warn);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  margin-bottom: 1.5rem;
}
.cfr-banner strong { color: #5a3c00; }

.google-signin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  width: 100%;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: .85rem 1.25rem;
  transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.google-signin-btn:hover {
  border-color: var(--navy);
  background: var(--paper-2);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.google-signin-btn:active { transform: translateY(1px); }
.google-signin-btn .google-g { width: 18px; height: 18px; flex: 0 0 18px; }

.login-hint {
  margin-top: 1rem;
  font-size: .82rem;
  color: var(--muted);
}

.err {
  color: var(--danger);
  font-size: .85rem;
  min-height: 1.2em;
  margin-top: .75rem;
}

.hint {
  color: var(--muted);
  font-size: .85rem;
  margin: 0 0 1rem;
}

/* ===================================================================
   Dashboard / triage queue
   =================================================================== */
.dash-header {
  margin-bottom: 1.5rem;
  max-width: 70ch;
}
.dash-header h1 { margin-bottom: .35em; }
.dash-header .hint { font-size: .95rem; }

/* (.tabs / .tab removed: only used by the legacy view-dashboard
   queue switcher which is gone with the lanes redesign.) */

/* Filter row (form fields). */
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1rem;
}
.filter-row label {
  display: grid;
  gap: .25rem;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  flex: 1 1 140px;
  min-width: 0;
}
.filter-row label.grow { flex: 2 1 200px; }
.filter-row select,
.filter-row input,
.field input, .field textarea, .field select {
  font-family: var(--sans);
  font-size: .93rem;
  font-weight: 400;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  padding: .6rem .8rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: #fff;
  width: 100%;
  min-width: 0;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.filter-row select:focus,
.filter-row input:focus,
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-50);
}

/* Data tables. Wrapped in a horizontal-scroll container so the page never
   scrolls horizontally - the table does. */
.queue,
#view-audit,
#view-fairness,
#view-modelcard,
#view-evidence,
#view-review {
  overflow: visible;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  /* Keep native table layout so thead column widths align with tbody
     cells. The previous `display: block` + per-section `display: table`
     made each row-group its own table, so column widths resolved
     independently and headers drifted out of alignment with values. */
  table-layout: auto;
}
/* For pages where horizontal scroll is needed on very wide tables,
   wrap the table in `.table-scroll` (a separate div). The table itself
   stays a real table so alignment holds. */
.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }

/* At phone + small-tablet widths, every .data-table that isn't already
   inside a .table-scroll wrapper degrades gracefully into a horizontally
   scrollable block. Column alignment can drift slightly under display:
   block, but that's preferable to truncated unreadable cells. */
@media (max-width: 1023px) {
  .data-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .data-table thead,
  .data-table tbody {
    display: table;
    width: 100%;
    table-layout: auto;
  }
}
.data-table th,
.data-table td {
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}
.data-table th {
  font-size: .74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
.data-table th[data-sort] { cursor: pointer; user-select: none; }
.data-table th[data-sort]:hover { color: var(--navy); }
.data-table th.sort-asc::after  { content: " \25B2"; font-size: .65rem; color: var(--blue); margin-left: .35em; }
.data-table th.sort-desc::after { content: " \25BC"; font-size: .65rem; color: var(--blue); margin-left: .35em; }

/* Case rows in the triage queue ARE clickable (whole row navigates). */
.data-table tbody tr { cursor: pointer; transition: background-color .15s ease; }
.data-table tbody tr:hover { background: var(--blue-50); }
.data-table tbody tr:last-child td { border-bottom: 0; }
/* Read-only tables (model card perf, anything inside the model card panel
   or perf dimension block) shouldn't suggest interactivity - reset the
   clickable affordance on tbody rows. */
.mc-perf-dim .data-table tbody tr,
.modelcard-panel-body .data-table tbody tr,
.modelcard-prose .data-table tbody tr { cursor: default; }
.mc-perf-dim .data-table tbody tr:hover,
.modelcard-panel-body .data-table tbody tr:hover,
.modelcard-prose .data-table tbody tr:hover { background: transparent; }

.data-table code,
code.report-id {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--navy);
  background: var(--mist);
  padding: .15rem .4rem;
  border-radius: 3px;
}

/* Badges (status, seriousness, expectedness). Badges are NOT clickable.
   No hover transform / shadow / color shift. */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .2rem .55rem;
  border-radius: 99rem;
  background: var(--mist);
  color: var(--muted);
  white-space: nowrap;
}
.badge-serious-death,
.badge-serious-life-threatening {
  background: var(--danger-bg);
  color: var(--danger);
}
.badge-serious-hospitalized,
.badge-serious-disability {
  background: var(--warn-bg);
  color: var(--warn);
}
.badge-serious-other-serious {
  background: var(--warn-bg-soft);
  color: #806400;
}
.badge-serious-non-serious {
  background: var(--mist);
  color: var(--muted);
}
.badge-listed   { background: var(--ok-bg);     color: var(--ok); }
.badge-unlisted { background: var(--danger-bg); color: var(--danger); }
.badge-status-open   { background: var(--blue-50); color: var(--blue-strong); }
.badge-status-signed { background: var(--ok-bg);   color: var(--ok); }

.quality-icon {
  color: var(--warn);
  font-weight: 700;
  font-size: .82rem;
}

/* Pager. */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.25rem;
  font-size: .85rem;
  color: var(--muted);
}
.pager button {
  font-size: .85rem;
  font-weight: 600;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: .5rem 1rem;
  transition: border-color .18s ease, background-color .18s ease;
}
.pager button:hover:not(:disabled) {
  border-color: var(--navy);
  background: var(--paper-2);
}

.navlinks {
  margin-top: 1.5rem;
  font-size: .9rem;
}

/* Inline "draft response" / "open pack" anchor in aggregates table - this IS
   a clickable element so hover is permitted. */
.agg-action {
  font-weight: 600;
  color: var(--blue-strong);
}
.agg-action:hover { color: var(--navy); text-decoration: underline; }

/* ===================================================================
   Signal detail (case card)
   The case-card itself is a static container - not clickable, no hover.
   =================================================================== */
.back {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--blue-strong);
  margin-bottom: 1rem;
}
.back:hover { color: var(--navy); }

.case-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.case-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.case-header h1 {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.2vw, 1.85rem);
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.case-header .case-meta {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 500;
}

.case-card h2 {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  margin: 1.75rem 0 .75rem;
  color: var(--navy-ink);
}

.section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .75rem 1.25rem;
  margin: .75rem 0 1rem;
}
.section-grid .cell { font-size: .88rem; line-height: 1.4; }
.section-grid .cell label {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--faint);
  margin-bottom: .2rem;
}

.subcard {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: .75rem 0 1.1rem;
}
.subcard h3 {
  margin: 0 0 .65rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--blue-strong);
  font-weight: 600;
}
.subcard ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: .88rem;
}

.narrative {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
}
.narrative p { margin: 0 0 .85rem; }
.narrative p:last-child { margin: 0; }

.citations { list-style: none; padding: 0; margin: 0; }
.citations li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .55rem;
  padding: .55rem 0;
  border-bottom: 1px solid var(--line);
  font-size: .85rem;
}
.citations li:last-child { border-bottom: 0; }
.citations a { font-family: var(--mono); font-size: .8rem; color: var(--blue-strong); }
.citations a:hover { color: var(--navy); text-decoration: underline; }
.citations .src { color: var(--muted); font-size: .78rem; }
.citations .ref { color: var(--text); font-family: var(--mono); font-size: .82rem; }
.citations .conf { color: var(--faint); font-size: .76rem; margin-left: auto; }

/* ===================================================================
   Verdict form + electronic signature receipt
   =================================================================== */
.form-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.form-card h2 {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  margin: 0 0 1rem;
  color: var(--navy-ink);
}

#verdict-form { display: grid; gap: 1rem; }
#verdict-form label {
  display: grid;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
#verdict-form select,
#verdict-form textarea {
  font-family: var(--sans);
  font-size: .93rem;
  font-weight: 400;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  padding: .65rem .85rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: #fff;
  width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
#verdict-form select:focus,
#verdict-form textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-50);
}
#verdict-form textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.5;
}

.form-row { display: flex; flex-direction: column; gap: 1rem; }
.form-row.two > * { flex: 1; }

.cfr-inline {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.5;
  background: var(--mist);
  border-left: 3px solid var(--blue);
  padding: .65rem .85rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--blue-strong);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  border-radius: 50%;
  margin-left: .5rem;
  cursor: help;
  position: relative;
}
.tooltip:hover::after,
.tooltip:focus::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + .4rem);
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy-ink);
  color: #fff;
  font-size: .72rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  padding: .5rem .7rem;
  border-radius: var(--radius);
  white-space: normal;
  width: max-content;
  max-width: 240px;
  z-index: 50;
  box-shadow: var(--shadow-md);
}

/* §11.50 receipt card. NOT clickable - no hover effect. */
.receipt-wrapper { margin-top: 1.5rem; }
.receipt-card {
  background: linear-gradient(160deg, var(--paper) 0%, var(--paper-2) 100%);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: var(--shadow-md);
}
.receipt-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding-bottom: .85rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.receipt-head h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  color: var(--navy-ink);
}
.receipt-cfr {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--blue-strong);
}

.receipt-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem 1.5rem;
  margin: 0;
}
.receipt-fields > div { display: grid; gap: .2rem; }
.receipt-fields dt {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--faint);
}
.receipt-fields dd {
  margin: 0;
  font-size: .9rem;
  color: var(--navy-ink);
  word-break: break-word;
}

.trunc {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--text);
  background: var(--mist);
  padding: .15rem .4rem;
  border-radius: 3px;
  word-break: break-all;
  display: inline-block;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.trunc.expanded { word-break: break-all; }

.receipt-binding { grid-column: 1 / -1; margin-top: .5rem; padding-top: .85rem; border-top: 1px solid var(--line); }
.receipt-binding dt {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--blue-strong);
}
.binding-hash {
  display: block;
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--navy-ink);
  background: var(--mist);
  padding: .5rem .65rem;
  border-radius: var(--radius);
  word-break: break-all;
  margin-top: .3rem;
}
.binding-cite {
  font-size: .76rem;
  color: var(--muted);
  margin-top: .35rem;
  line-height: 1.4;
}

.receipt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.25rem;
}
.receipt-actions button {
  font-size: .85rem;
  font-weight: 600;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: .55rem 1rem;
  transition: border-color .18s ease, background-color .18s ease;
}
.receipt-actions button:hover {
  border-color: var(--navy);
  background: var(--paper-2);
}
.receipt-actions button:first-child {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.receipt-actions button:first-child:hover {
  background: var(--navy-ink);
  border-color: var(--navy-ink);
}

.receipt-audit {
  margin-top: 1rem;
  font-size: .85rem;
}
.receipt-audit summary {
  cursor: pointer;
  color: var(--muted);
  padding: .5rem 0;
  font-weight: 500;
}
.receipt-audit summary:hover { color: var(--navy); }
.receipt-audit pre {
  background: var(--navy-ink);
  color: #cfe0f1;
  padding: 1rem;
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: .78rem;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ===================================================================
   AI extraction (claim badges, dropped-claim disclosure, retag)
   =================================================================== */
.ai-extraction {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  margin: .5rem 0 1rem;
}
.ai-extraction-head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
}
.ai-live-badge,
.ai-cached-badge {
  display: inline-flex;
  align-items: center;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .25rem .6rem;
  border-radius: 99rem;
}
.ai-live-badge {
  background: var(--ok-bg);
  color: var(--ok);
  border: 1px solid #b9d7c4;
}
.ai-cached-badge {
  background: var(--blue-50);
  color: var(--blue-strong);
  border: 1px solid var(--blue-100);
}

.ai-claims { list-style: none; padding: 0; margin: 0; }
.ai-claim {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  padding: .65rem 0;
  border-bottom: 1px dashed var(--line);
}
.ai-claim:last-child { border-bottom: 0; }
.ai-claim-text {
  flex: 1 1 200px;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--text);
}

/* AI claim badge IS clickable (opens claim modal) - hover allowed. */
.ai-claim-badge {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .76rem;
  font-weight: 600;
  color: var(--ok);
  background: var(--ok-bg);
  border: 1px solid #b9d7c4;
  border-radius: 99rem;
  padding: .25rem .6rem;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.ai-claim-badge:hover {
  background: #c8e0d2;
  border-color: var(--ok);
  color: var(--ok);
}
.ai-claim-check { font-family: var(--mono); font-weight: 700; }
.ai-claim-cite-count { color: var(--muted); font-weight: 500; }

.ai-dropped-note {
  margin-top: .9rem;
  font-size: .82rem;
  color: var(--muted);
  background: var(--mist);
  border-left: 3px solid var(--faint);
  padding: .6rem .85rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.ai-extraction-error {
  border-color: #f0c7c0;
  background: var(--danger-bg-soft);
}
.ai-error-text {
  color: var(--danger);
  font-size: .9rem;
  font-weight: 500;
  margin: 0 0 .6rem;
}
.ai-retry-btn {
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: .45rem .9rem;
  transition: border-color .18s ease, background-color .18s ease;
}
.ai-retry-btn:hover {
  border-color: var(--navy);
  background: var(--paper-2);
}
.ai-retry-btn:disabled { opacity: .55; cursor: progress; }

/* Claim modal cited evidence cards (NOT clickable, no hover). */
.claim-modal-label {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--faint);
  margin: .85rem 0 .4rem;
}
.claim-modal-claim {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  margin-bottom: 1rem;
}
.claim-modal-claim p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--navy-ink);
}
.claim-modal-cites { display: flex; flex-direction: column; gap: .65rem; }
.ai-cite-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .75rem .9rem;
}
.ai-cite-field {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--blue-strong);
  margin-bottom: .35rem;
}
.ai-cite-range {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  margin-left: .35rem;
}
.ai-cite-body {
  font-size: .85rem;
  color: var(--text);
  line-height: 1.5;
  word-break: break-word;
}
.ai-citation-mark {
  background: #fff2a8;
  color: var(--navy-ink);
  padding: 0 .15rem;
  border-radius: 2px;
}

/* ===================================================================
   Similar past reports panel (cards NOT clickable, no hover)
   =================================================================== */
.similar-section { margin: .5rem 0 1rem; }

.similar-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .5rem;
}
.similar-count {
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy-ink);
}
.similar-latency {
  font-size: .76rem;
  color: var(--muted);
  font-family: var(--mono);
}
.similar-subtitle {
  font-size: .82rem;
  color: var(--muted);
  margin: 0 0 .75rem;
}

.similar-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
}
.similar-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem 1rem;
}
.similar-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .35rem;
}
.similar-id {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--blue-strong);
  background: var(--blue-50);
  padding: .1rem .4rem;
  border-radius: 3px;
}
.similar-match {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--blue-strong);
}
.similar-drug {
  font-size: .92rem;
  font-weight: 600;
  color: var(--navy-ink);
  margin-bottom: .4rem;
}
.similar-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .5rem;
}
.similar-chip {
  font-size: .7rem;
  font-weight: 500;
  color: var(--blue-strong);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
  padding: .12rem .5rem;
  border-radius: 99rem;
  white-space: nowrap;
}
.similar-chip.chip-soc {
  color: var(--muted);
  background: var(--mist);
  border-color: var(--line);
}
.similar-snippet {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.45;
  margin: 0;
}
.similar-empty {
  font-size: .85rem;
  color: var(--muted);
}
.similar-error {
  font-size: .85rem;
  color: var(--danger);
  background: var(--danger-bg-soft);
  border: 1px solid #f0c7c0;
  border-radius: var(--radius);
  padding: .75rem 1rem;
}
.similar-error-text { margin: 0 0 .35rem; }

/* The retry link IS clickable - hover permitted. */
.similar-retry { font-weight: 600; color: var(--blue-strong); }
.similar-retry:hover { color: var(--navy); text-decoration: underline; }

.similar-skeletons {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
}
.similar-skel {
  height: 72px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, #f0f2f6 0%, #e8ebf0 50%, #f0f2f6 100%);
  background-size: 200% 100%;
  animation: similar-skel-shimmer 1.6s ease-in-out infinite;
  border: 1px solid var(--line);
}
@keyframes similar-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===================================================================
   Audit log + drawer
   =================================================================== */
.tip-line {
  color: var(--muted);
  font-size: .82rem;
  margin-bottom: 1rem;
}
.tip-line code {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--navy);
  background: var(--mist);
  padding: .1rem .4rem;
  border-radius: 3px;
}

.drawer {
  position: fixed;
  inset: 0;
  background: rgba(15, 28, 45, .45);
  z-index: 150;
  display: flex;
  justify-content: flex-end;
  overscroll-behavior: contain;
}
.drawer-inner {
  width: min(560px, 92vw);
  height: 100%;
  background: #fff;
  padding: 1.5rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.drawer-inner h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
  margin: 0 0 1rem;
  padding-right: 4rem;
}
.drawer-close {
  position: absolute;
  top: 1rem; right: 1rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: .35rem .75rem;
}
.drawer-close:hover { border-color: var(--navy); background: var(--paper-2); }
.drawer pre {
  font-family: var(--mono);
  font-size: .78rem;
  line-height: 1.55;
  color: var(--navy-ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ===================================================================
   Evidence binder
   =================================================================== */
.evidence-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-top: 1rem;
}
.ev-left,
.ev-right {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  min-width: 0;
}
.ev-searchlabel {
  display: grid;
  gap: .35rem;
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 1rem;
}
.ev-searchlabel input {
  font-family: var(--sans);
  font-size: .93rem;
  font-weight: 400;
  color: var(--text);
  text-transform: none;
  letter-spacing: 0;
  padding: .6rem .8rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.ev-searchlabel input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-50);
}
.ev-results {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  max-height: 70vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Evidence result row IS clickable (selects the obligation) - hover allowed. */
.ev-result {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .65rem .8rem;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.ev-result:hover { border-color: var(--blue); background: var(--blue-50); }
.ev-result.active {
  border-color: var(--blue);
  background: var(--blue-50);
  box-shadow: inset 3px 0 0 var(--blue);
}
.ev-result .ev-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-bottom: .35rem;
}
.ev-result .ev-id {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  color: var(--navy);
}
.ev-result .ev-force {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--blue-strong);
  background: var(--blue-50);
  padding: .1rem .4rem;
  border-radius: 3px;
}
.ev-result .ev-fw {
  font-size: .72rem;
  color: var(--muted);
}
.ev-result .ev-action {
  font-size: .85rem;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: .25rem;
}
.ev-result .ev-evcount {
  font-size: .72rem;
  color: var(--faint);
}
.ev-result .ev-add { margin-right: .25rem; }

.ev-right { padding: 1.25rem; }
.ev-detail h2 {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 2.4vw, 1.4rem);
  margin: 0 0 1rem;
}
.ev-detail .ev-obligation {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  font-size: .92rem;
  line-height: 1.55;
}
.ev-detail .ev-obligation .ev-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--muted);
}
.ev-detail .ev-obligation .ev-meta span strong { color: var(--navy-ink); }

.ev-evidence-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  margin-bottom: .65rem;
}
.ev-evidence-card .ev-fpath {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--navy);
  margin-bottom: .35rem;
  word-break: break-all;
}
.ev-evidence-card .ev-section {
  font-size: .76rem;
  color: var(--muted);
  font-family: var(--mono);
}
.ev-evidence-card .ev-excerpt {
  font-size: .85rem;
  color: var(--text);
  line-height: 1.5;
  margin: .5rem 0 .35rem;
  white-space: pre-wrap;
}
.ev-evidence-card .ev-modified {
  font-size: .72rem;
  color: var(--faint);
}

.ev-export-bar {
  position: sticky;
  bottom: 1rem;
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: var(--navy);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: .85rem 1.1rem;
  box-shadow: var(--shadow-md);
  font-size: .9rem;
  font-weight: 500;
}
.ev-export-bar button {
  font-size: .85rem;
  font-weight: 600;
  color: var(--navy);
  background: #fff;
  border: 1px solid #fff;
  border-radius: var(--radius);
  padding: .55rem 1rem;
  transition: background-color .18s ease;
}
.ev-export-bar button:hover { background: var(--blue-50); }

/* ===================================================================
   Fairness scan
   =================================================================== */
.fairness-body { margin-top: .5rem; }

.fairness-corpus {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  margin-bottom: 1.5rem;
  font-size: .88rem;
}
.fairness-corpus .label {
  display: inline-block;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--faint);
  margin-right: .5rem;
}

.fairness-dim {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.fairness-dim h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  font-family: var(--sans);
  font-size: 1rem;
  margin: 0 0 .75rem;
}

/* Parity pills (NOT clickable, no hover). */
.parity-pill {
  display: inline-flex;
  align-items: center;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: .2rem .5rem;
  border-radius: 99rem;
}
.parity-pill.pass { background: var(--ok-bg);     color: var(--ok); }
.parity-pill.fail { background: var(--danger-bg); color: var(--danger); }

.fairness-dim table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  display: block;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.fairness-dim th, .fairness-dim td {
  padding: .5rem .65rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.fairness-dim th {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  background: var(--paper-2);
}
.fairness-dim tr.flagged td { background: var(--danger-bg-soft); }
.fairness-dim tr.flagged td:first-child { color: var(--danger); font-weight: 600; }

.fairness-breaches,
.fairness-mitigations { margin-top: 1.5rem; }
.fairness-breaches h2,
.fairness-mitigations h2 {
  font-family: var(--serif);
  font-size: 1.2rem;
  margin: 0 0 .75rem;
}
.fairness-breach,
.fairness-mitigation {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  margin-bottom: .65rem;
  font-size: .88rem;
}
.fairness-breach { border-left: 3px solid var(--danger); }
.fairness-mitigation { border-left: 3px solid var(--ok); }
.fairness-mitigation strong,
.fairness-breach strong {
  display: block;
  margin-bottom: .25rem;
  color: var(--navy-ink);
}

/* ===================================================================
   Model Card view
   =================================================================== */
.modelcard-actions {
  display: flex;
  justify-content: flex-end;
  margin: .5rem 0 1rem;
}
.modelcard-actions button {
  font-size: .85rem;
  font-weight: 600;
  color: #fff;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  padding: .55rem 1.1rem;
  transition: background-color .18s ease;
}
.modelcard-actions button:hover {
  background: var(--navy-ink);
  border-color: var(--navy-ink);
}

.modelcard-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}
.modelcard-prose {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 2rem);
  min-width: 0;
}
.modelcard-prose h1 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  margin: 0 0 1rem;
}
.modelcard-prose h2 {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.5vw, 1.45rem);
  margin: 1.75rem 0 .85rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--line);
}
.modelcard-prose h3 {
  font-family: var(--sans);
  font-size: 1rem;
  margin: 1.25rem 0 .5rem;
}
.modelcard-prose code {
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--navy);
  background: var(--mist);
  padding: .1rem .4rem;
  border-radius: 3px;
}
.modelcard-prose ul { padding-left: 1.4rem; }
.modelcard-prose p { margin: .65rem 0; line-height: 1.6; }

.mc-provenance {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .35rem 1.25rem;
  margin: 0 0 1rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
}
.mc-provenance dt {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--faint);
}
.mc-provenance dd {
  margin: 0;
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--navy-ink);
  word-break: break-word;
}
.mc-provenance dd.normal {
  font-family: var(--sans);
  font-size: .88rem;
}

.mc-perf-dim {
  margin: 1rem 0;
  padding: .9rem 1rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.mc-perf-dim h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin: 0 0 .65rem;
  font-size: .95rem;
}

.mc-limitations {
  padding-left: 1.25rem;
  margin: .5rem 0 1rem;
}
.mc-limitations li { margin: .35rem 0; font-size: .9rem; line-height: 1.5; }

.mc-governance {
  margin-top: 1.5rem;
  border-top: 1px solid var(--line);
  padding-top: 1rem;
}
.mc-governance summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--blue-strong);
  padding: .35rem 0;
}
.mc-governance summary:hover { color: var(--navy); }

/* System Identity card. Floated right inside the prose article; needs
   to read cleanly in a narrow column (~280px) so the layout is stacked
   (label above value), not a 2-column grid. */
.modelcard-identity {
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #e8eef5;
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.25rem 1.25rem;
  box-shadow: var(--shadow-lg);
  min-width: 0;
}
.modelcard-identity h2 {
  color: #fff;
  font-family: var(--serif);
  font-size: 1rem;
  margin: 0 0 .85rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  letter-spacing: 0;
  text-transform: none;
}
.modelcard-identity dl {
  margin: 0;
  display: block;
}
.modelcard-identity dt {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #97a7b8;
  margin: .75rem 0 .15rem;
}
.modelcard-identity dt:first-of-type { margin-top: 0; }
.modelcard-identity dd {
  margin: 0;
  font-family: var(--sans);
  font-size: .88rem;
  line-height: 1.35;
  color: #fff;
  word-break: break-word;
}
.modelcard-identity dd.normal { font-size: .88rem; color: #e8eef5; }
.modelcard-identity .fairness-headline {
  margin-top: 1.1rem;
  padding-top: .85rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  display: block;
}
.modelcard-identity .fairness-headline dt {
  margin: .75rem 0 .15rem;
}
.modelcard-identity .fairness-headline dt:first-of-type { margin-top: 0; }
.modelcard-identity .fairness-headline a {
  display: inline-block;
  margin-top: .85rem;
  font-weight: 600;
  font-size: .85rem;
  color: var(--blue-bright);
}
.modelcard-identity .fairness-headline a:hover { color: #fff; }

.modal-close {
  font-size: .82rem;
  font-weight: 600;
  color: var(--navy);
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: .3rem .65rem;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.modal-close:hover {
  border-color: var(--navy);
  background: var(--paper-2);
}

/* ===================================================================
   <dialog>-based prompt / confirm + toast (replaces window.prompt /
   confirm / alert per the Stage A UX work, 2026-06-26). The dialog
   element gives us focus management + ESC + backdrop click for free;
   the toast handles non-blocking confirmations and errors.
   =================================================================== */
.app-dialog {
  border: 0;
  border-radius: var(--radius-lg);
  padding: 0;
  width: min(520px, 92vw);
  background: var(--paper);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}
.app-dialog::backdrop {
  background: rgba(15, 28, 45, .55);
  backdrop-filter: blur(2px);
}
.app-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.4rem 1.5rem 1.25rem;
  margin: 0;
}
.app-dialog-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.35rem;
  color: var(--navy-ink);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -.005em;
}
.app-dialog-body { display: flex; flex-direction: column; gap: .65rem; }
.app-dialog-message { margin: 0; color: var(--text); line-height: 1.5; }
.app-dialog-helper { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.app-dialog-input {
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: .55rem .75rem;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.app-dialog-input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-50);
}
textarea.app-dialog-input { resize: vertical; min-height: 90px; line-height: 1.5; }
.app-dialog-err {
  margin: 0; color: var(--danger); font-size: .85rem;
}
.app-dialog-actions {
  display: flex; gap: .5rem; justify-content: flex-end;
  padding-top: .25rem;
}
.app-dialog .btn-primary,
.app-dialog .btn-ghost,
.app-dialog .btn-danger {
  font-family: var(--sans); font-weight: 600; font-size: .9rem;
  padding: .55rem 1rem; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.app-dialog .btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.app-dialog .btn-primary:hover { background: var(--navy-ink); }
.app-dialog .btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.app-dialog .btn-danger:hover { background: #8a2a22; }
.app-dialog .btn-ghost { background: transparent; color: var(--navy); border-color: var(--line-2); }
.app-dialog .btn-ghost:hover { background: var(--paper-2); border-color: var(--navy); }

/* Toasts: top-right stack, non-blocking. */
#app-toast-stack {
  position: fixed; top: 80px; right: 24px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 250;
  max-width: 360px;
}
.app-toast {
  background: var(--navy-ink);
  color: #fff;
  font-size: .9rem;
  line-height: 1.45;
  padding: .7rem 1rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0; transform: translateX(20px);
  transition: opacity .18s ease, transform .18s ease;
}
.app-toast.shown { opacity: 1; transform: translateX(0); }
.app-toast-error { background: var(--danger); }
.app-toast-success { background: var(--ok); }

/* Session-expired banner: a top-of-page, full-width strip that an
   in-progress 401 surfaces. Persistent (not auto-dismissed) so the user
   can re-auth via the button without losing visible state. */
.auth-expired-banner {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 300;
  display: flex; align-items: center; justify-content: center;
  gap: 16px;
  padding: 10px 16px;
  background: var(--danger);
  color: #fff;
  font-size: .9rem;
  font-family: var(--sans);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
.auth-expired-banner.hidden { display: none; }
.auth-expired-text { font-weight: 500; }
.auth-expired-banner .auth-expired-btn {
  background: #fff;
  color: var(--danger);
  border: 0;
  padding: 6px 14px;
  border-radius: var(--radius);
  font-weight: 600;
  cursor: pointer;
}
.auth-expired-banner .auth-expired-btn:hover { background: #f2f2f2; }

/* ===================================================================
   Command palette (Cmd+K / Ctrl+K). Stage C.
   =================================================================== */
.app-palette {
  border: 0; padding: 0;
  width: min(560px, 92vw);
  max-height: 70vh;
  background: transparent;
  margin-top: 12vh;
}
.app-palette::backdrop {
  background: rgba(15, 28, 45, .45);
  backdrop-filter: blur(2px);
}
.palette-shell {
  background: var(--paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.palette-search {
  border: 0; outline: none;
  font-family: var(--sans);
  font-size: 1rem;
  padding: 16px 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  color: var(--text);
}
.palette-list {
  max-height: 50vh;
  overflow-y: auto;
  padding: 6px;
}
.palette-empty {
  padding: 24px; color: var(--muted); font-style: italic;
  font-size: .9rem; text-align: center;
}
.palette-row {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%;
  background: transparent; border: 0;
  padding: 10px 14px;
  font-family: var(--sans); font-size: .92rem;
  color: var(--text); text-align: left; cursor: pointer;
  border-radius: var(--radius);
}
.palette-row:hover, .palette-row.active {
  background: var(--blue-50); color: var(--navy-ink);
}
.palette-row-group {
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--faint);
}
.palette-row.active .palette-row-group { color: var(--blue-strong); }
.palette-foot {
  padding: 10px 18px;
  font-size: .75rem; color: var(--faint);
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  display: flex; gap: 6px; align-items: center;
}
.palette-foot kbd {
  display: inline-block;
  font-family: var(--mono); font-size: .68rem;
  padding: 2px 6px; border-radius: 3px;
  background: var(--paper); border: 1px solid var(--line-2);
  color: var(--muted);
  margin-right: 2px;
}

/* ===================================================================
   Modals (citation, claim, reauth)
   =================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 28, 45, .55);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overscroll-behavior: contain;
}
.modal-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: var(--shadow-lg);
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal-card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.3rem;
  margin: 0 0 .85rem;
  padding-right: 3rem;
}
.modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
}

.citation-fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .4rem 1rem;
  margin: 0 0 1rem;
}
.citation-fields > div { display: contents; }
.citation-fields dt {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--faint);
}
.citation-fields dd {
  margin: 0;
  font-size: .9rem;
  color: var(--navy-ink);
}
.citation-excerpt {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  margin-bottom: 1rem;
  font-size: .88rem;
  line-height: 1.55;
}

/* citation-link IS clickable - hover allowed. */
.citation-link {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-weight: 600;
  font-size: .9rem;
  color: var(--blue-strong);
}
.citation-link:hover { color: var(--navy); }

/* ===================================================================
   Toasts
   =================================================================== */
.toast {
  position: fixed;
  bottom: 1.25rem; right: 1.25rem;
  background: var(--navy-ink);
  color: #fff;
  padding: .85rem 1.1rem;
  border-radius: var(--radius);
  font-size: .85rem;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  z-index: 250;
  max-width: 320px;
  line-height: 1.45;
}

/* ===================================================================
   Print styles (§11.50 receipt + model card)
   =================================================================== */
@media print {
  :root { --section-y: 0; --gutter: 0; }
  html, body { background: #fff; color: #000; }
  .topbar,
  .modal-backdrop,
  .drawer,
  .toast,
  .receipt-actions,
  .modelcard-actions,
  .no-print,
  .back,
  .skip-link,
  .ev-export-bar,
  .nav-toggle,
  .mobile-nav,
  .pager,
  .filter-row {
    display: none !important;
  }
  main { padding: 0; }
  section.view { padding: 0; max-width: none; }
  .case-card,
  .receipt-card,
  .form-card,
  .modelcard-prose,
  .modelcard-identity,
  .modelcard-layout {
    box-shadow: none;
    border: 0;
    background: #fff !important;
    color: #000 !important;
    border-radius: 0;
    padding: 0;
  }
  .modelcard-identity {
    border-top: 1px solid #000;
    padding-top: 1rem;
    margin-top: 1rem;
  }
  .modelcard-identity h2,
  .modelcard-identity dt,
  .modelcard-identity dd { color: #000 !important; }
  .receipt-card { border-top: 2px solid #000; padding-top: 1rem; }
  .narrative { background: transparent; border: 0; padding: 0; border-left: 0; }
  a { color: #000; text-decoration: underline; }
  pre, code { color: #000; background: transparent; }
}

/* ===================================================================
   Responsive: mobile-first base above; layer up at 768 and 1024.
   =================================================================== */

/* Tablet portrait and up: relax the topbar, broaden tables, two-column
   layouts where the content benefits. */
@media (min-width: 768px) {
  body { font-size: 1.0625rem; line-height: 1.6; }

  /* Topbar: surface the desktop nav, hide the hamburger. */
  .nav-toggle,
  .mobile-nav { display: none !important; }
  .topnav { display: inline-flex; }
  .topnav .topnav-link { display: inline-flex; align-items: center; }

  /* Login card breathing room. */
  .login-card { padding: 2.5rem 2.75rem; }

  /* Receipt: two columns of fields. */
  .receipt-fields { grid-template-columns: 1fr 1fr; }

  /* Verdict form: 'verdict' and 'meaning' side by side. */
  .form-row { flex-direction: row; }

  /* Similar past reports: two cards per row. */
  .similar-list,
  .similar-skeletons { grid-template-columns: repeat(2, 1fr); }
}

/* Topbar density at the 1024 target: the desktop nav fits but the optional
   chrome (tenant chip, brand subtitle, who-am-I name, button labels) must
   compress so the rightmost link is not clipped. Above 1280 everything
   relaxes back. */
/* Topbar density: the 3-zone grid + clamp-based topnav-link
   padding/font means the layout breathes dynamically across widths
   without separate breakpoint overrides. We only hide the brand
   subtitle below 1200px since the brand title alone is enough. */
@media (max-width: 1199px) {
  .brand-sub { display: none; }
}

/* Desktop: container width capped at 1180; evidence binder splits;
   model card uses a sidebar. */
@media (min-width: 1024px) {
  main { padding-block: clamp(1.5rem, 3vw, 2.5rem); }

  /* Evidence binder: 380px sidebar + flexible detail pane. */
  .evidence-split {
    grid-template-columns: minmax(320px, 380px) 1fr;
    align-items: start;
  }

  /* Model Card: prose + dark identity sidebar. */
  .modelcard-layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  }

  /* Similar past reports: 3-up. */
  .similar-list,
  .similar-skeletons { grid-template-columns: repeat(3, 1fr); }
}

/* Phones in the 320-480 band: dial down padding, stack the eyebrow tighter,
   make sure no element forces horizontal overflow. */
@media (max-width: 480px) {
  :root {
    --gutter: .85rem;
    --section-y: 1.5rem;
  }
  .topbar { gap: .5rem; padding: .65rem .85rem; }
  .brand-text { display: none; }
  .who { max-width: 12ch; }
  .login-card { padding: 1.25rem; }
  .case-header h1 { font-size: 1.25rem; }
  .receipt-card { padding: 1rem; }
  .receipt-head { flex-direction: column; align-items: flex-start; }
  .modal-card { padding: 1rem; }
  .modelcard-prose,
  .modelcard-identity { padding: 1rem; }
  .data-table { font-size: .82rem; }
  .data-table th, .data-table td { padding: .55rem .65rem; }
  .topbar-btn,
  .modelcard-pill { padding: .4rem .65rem; font-size: .76rem; }
}

/* ===================================================================
   HOME (v3 redesign, 2026-06-24) - the showroom
   The post-login landing surface. Lanes are reasons a person walked
   in, not feature cards. Editorial type + warm paper + ink + rule.
   Regulator-red reserved for the active (RFI) lane and consequential
   moments only. Honors the v2.5 spec but rejects its SaaS aesthetic.
   =================================================================== */
:root {
  /* Canvas is the page background behind clickable cards. The cards
     themselves carry the warm beige (--home-card-bg). Stylistic rule:
     cards are warm, canvas is neutral - so the cards visually pop. */
  /* Home / workflow surface tokens. Aligned to Altio Advisory brand
     (navy/blue editorial system, cool paper, restrained color budget).
     The previous warm-beige palette is retired - state-color only,
     decoration via type + space + line. */
  --home-canvas:      #ffffff;
  --home-card-bg:     #f6f8fb;
  --home-ink:         var(--navy-ink);
  --home-muted:       #5d6b7b;
  --home-muted-soft:  #8a96a4;
  --home-rule:        var(--line);
  --home-accent:      #335f8f;
  --home-accent-soft: #eaf1f8;
}

.home-canvas {
  background: var(--home-canvas);
  min-height: calc(100vh - 88px);
}
.home-stage {
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 3.5rem) 4rem;
}
.home-lede { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.home-h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.6vw, 2.875rem);
  line-height: 1.18;
  font-weight: 500;
  color: var(--home-ink);
  letter-spacing: -0.012em;
  margin: 0 0 1rem;
}
.home-sub {
  font-family: var(--sans);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.55;
  color: var(--home-muted);
  margin: 0;
  max-width: 720px;
}
.home-prompt {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-weight: 400;
  color: var(--home-muted);
  text-align: center;
  padding: 1.75rem 0 2.25rem;
  letter-spacing: 0.005em;
}
.lanes { border-top: 1px solid var(--home-rule); }
.lane {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "kicker meta"
    "body   meta";
  column-gap: 2rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--home-rule);
  color: var(--home-ink);
  text-decoration: none;
  transition: background 180ms ease;
}
.lane:hover { background: rgba(140, 100, 80, 0.025); }
.lane-soon:hover { background: rgba(0, 0, 0, 0.015); }
.lane-kicker {
  grid-area: kicker;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.085em;
  color: var(--home-muted);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.lane-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--home-muted-soft);
  display: inline-block;
}
.lane-dot-active { background: var(--home-accent); box-shadow: 0 0 0 3px var(--home-accent-soft); }
.lane-body { grid-area: body; }
.lane-headline {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.8vw, 1.375rem);
  font-weight: 400;
  line-height: 1.35;
  color: var(--home-ink);
  margin: 0 0 0.4rem;
  letter-spacing: -0.005em;
}
.lane-soon .lane-headline { color: var(--home-muted); }
.lane-desc {
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--home-muted);
  margin: 0;
  max-width: 620px;
}
.lane-meta {
  grid-area: meta;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  text-align: right;
  font-family: var(--sans);
  font-size: 0.8125rem;
  gap: 0.5rem;
  min-width: 180px;
  padding-top: 0.1rem;
}
.lane-status { color: var(--home-muted); font-weight: 500; }
.lane-active .lane-status { color: var(--home-accent); font-weight: 600; }
.lane-cta { font-weight: 600; font-size: 0.875rem; color: var(--home-ink); }
.lane-active .lane-cta { color: var(--home-accent); }
.lane-soon .lane-cta { color: var(--home-muted-soft); }

@media (max-width: 720px) {
  .lane {
    grid-template-columns: 1fr;
    grid-template-areas: "kicker" "body" "meta";
  }
  .lane-meta {
    align-items: flex-start;
    text-align: left;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 0.75rem;
  }
}

.home-trust {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--home-rule);
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--home-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
  align-items: center;
}
.trust-item { color: var(--home-muted); }
#trust-user-name { color: var(--home-ink); font-weight: 500; }
.trust-link {
  color: var(--home-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--home-rule);
  padding-bottom: 1px;
  cursor: pointer;
}
.trust-link:hover { color: var(--home-ink); border-bottom-color: var(--home-ink); }
.trust-sep { color: var(--home-muted-soft); }

/* On the home + RFI surfaces, hide the SaaS-y nav and About-this-AI pill;
   the trust band carries the secondary surfaces, and the topbar
   slips into the warm canvas. */
body.home-active .topnav,
body.home-active .about-ai-pill { display: none; }
body.home-active .topbar {
  background: var(--home-canvas);
  border-bottom: 1px solid var(--home-rule);
  box-shadow: none;
}

/* ===================================================================
   RFI LANE (v3 redesign, 2026-06-24 PM build)
   Two surfaces: upload (four-tier intake) and hub (letter beside drafts).
   The lane is the test-drive. Editorial type throughout; regulator-red
   used only on the lane mark, the sign CTA, and active states. The
   "notary moment" sign page is its own thing inside the hub.
   =================================================================== */

.rfi-stage { max-width: 1080px; }
.rfi-back { color: var(--home-muted); }
.rfi-eyebrow {
  color: var(--home-accent);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 0 0 0.85rem;
}

/* Tier pills - educate the buyer that iSAT classifies, no pre-sort needed */
.tier-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin: 1.75rem 0 1.75rem;
}
@media (max-width: 900px) { .tier-bar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .tier-bar { grid-template-columns: 1fr; } }
.tier-pill {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.875rem 1rem;
  background: var(--paper);
  border: 1px solid var(--home-rule);
  border-top: 2px solid var(--home-ink);
  font-family: var(--sans);
}
/* Tier strip with a darker, WCAG-AA-conformant top accent (>=4.5:1
   contrast against the paper background). The previous outline-only
   colours read pale against cool paper. */
.tier-pill[data-tier="A"] { border-top-color: #2c4019; border-top-width: 4px; }
.tier-pill[data-tier="B"] { border-top-color: #3d2f0f; border-top-width: 4px; }
.tier-pill[data-tier="C"] { border-top-color: #1a3447; border-top-width: 4px; }
.tier-pill[data-tier="D"] { border-top-color: var(--danger);  border-top-width: 4px; }
.tier-name {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--home-muted);
}
.tier-what {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--home-ink);
  line-height: 1.2;
}
.tier-ex {
  font-size: 0.75rem;
  color: var(--home-muted);
  line-height: 1.4;
}

/* Drop zone - the actual upload affordance */
.dropzone {
  margin-top: 1.5rem;
  padding: 2.25rem 2rem 2rem;
  background: var(--paper);
  border: 1px dashed var(--home-muted-soft);
  text-align: center;
  transition: border-color 180ms ease, background 180ms ease;
  position: relative;
}
.dropzone.is-dragover {
  border-color: var(--home-accent);
  background: var(--home-accent-soft);
}
.dropzone-prompt {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--home-ink);
  margin: 0 0 0.75rem;
}
.dropzone-or {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--home-muted-soft);
  margin: 0 0 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.dropzone-pick-btn {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--home-accent);
  background: transparent;
  border: 1px solid var(--home-accent);
  padding: 0.55rem 1.25rem;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.dropzone-pick-btn:hover { background: var(--home-accent); color: var(--paper); }
.dropzone-hint {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--home-muted);
  margin: 1rem 0 0;
}
.rfi-file-input { display: none; }

/* Sources received list - shows each doc with its assigned tier */
.sources-received { margin-top: 2.25rem; }
.sources-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--home-rule);
}
.sources-h2 {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--home-ink);
  margin: 0;
}
.sources-count {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--home-muted);
  margin-left: 0.25rem;
}
.sources-checksum {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--home-muted);
}
.source-list { list-style: none; padding: 0; margin: 0; }
.source-item {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--home-rule);
  font-family: var(--sans);
  font-size: 0.875rem;
}
.source-item:last-child { border-bottom: none; }
.source-tier-mark {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--home-ink);
  background: var(--home-canvas);
  border: 1px solid var(--home-rule);
}
.source-tier-mark[data-tier="A"] { color: #4a5e3a; border-color: #4a5e3a; }
.source-tier-mark[data-tier="B"] { color: #5d4a1f; border-color: #5d4a1f; }
.source-tier-mark[data-tier="C"] { color: #2c4a5e; border-color: #2c4a5e; }
.source-tier-mark[data-tier="D"] { color: var(--home-accent); border-color: var(--home-accent); }
.source-name {
  color: var(--home-ink);
  font-weight: 500;
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.source-desc {
  color: var(--home-muted);
  font-size: 0.8125rem;
}
.source-actions {
  display: flex; gap: 0.75rem;
  color: var(--home-muted);
  font-size: 0.75rem;
}
.source-action-btn {
  background: none; border: none; padding: 0;
  color: var(--home-muted); cursor: pointer;
  font-family: var(--sans); font-size: 0.75rem;
  border-bottom: 1px dotted var(--home-rule);
}
.source-action-btn:hover { color: var(--home-ink); border-bottom-color: var(--home-ink); }

/* Guardrail - the credibility moment */
.guardrail {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  background: var(--home-accent-soft);
  border-left: 3px solid var(--home-accent);
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--home-ink);
  line-height: 1.55;
}
.guardrail p { margin: 0 0 0.5rem; }
.guardrail p:last-child { margin-bottom: 0; }
.guardrail-fineprint {
  font-size: 0.8125rem;
  color: var(--home-muted);
  font-style: italic;
}

.rfi-cta-row {
  display: flex; justify-content: flex-end;
  margin-top: 2rem;
}
.btn-primary.rfi-analyze-btn {
  background: var(--home-accent);
  color: var(--paper);
  border: none;
  padding: 0.75rem 1.75rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease;
}
.btn-primary.rfi-analyze-btn:hover { background: #6e2222; }
.btn-primary.rfi-analyze-btn:disabled {
  background: var(--home-muted-soft);
  cursor: not-allowed;
}

/* Analyze overlay - the seven named steps, no spinner */
.rfi-overlay {
  position: fixed; inset: 0;
  background: rgba(26, 26, 26, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  z-index: 1000;
}
.rfi-overlay.hidden { display: none; }
.rfi-overlay-card {
  background: var(--paper);
  max-width: 640px; width: 100%;
  padding: 2.5rem 2.75rem;
  border: 1px solid var(--home-rule);
  max-height: 88vh; overflow-y: auto;
}
.rfi-overlay-h2 {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--home-ink);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.rfi-overlay-sub {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--home-muted);
  margin: 0 0 2rem;
}
.rfi-steps { list-style: none; padding: 0; margin: 0; }
.rfi-step {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.875rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--home-rule);
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--home-muted-soft);
  opacity: 0.5;
  transition: opacity 280ms ease, color 280ms ease;
}
.rfi-step:last-child { border-bottom: none; }
.rfi-step.is-active { color: var(--home-ink); opacity: 1; }
.rfi-step.is-done { color: var(--home-ink); opacity: 1; }
.rfi-step.is-done .step-text::before {
  content: "\2713";
  display: inline-block;
  margin-right: 0.5rem;
  color: var(--home-accent);
  font-weight: 700;
}
.step-tier {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--home-muted);
  align-self: center;
  white-space: nowrap;
}

/* HUB - two-column document and drafts */
.rfi-hub-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 3vw, 2rem) 3rem;
}
.rfi-hub-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--home-rule);
}
.rfi-hub-meta {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 0.5rem;
}
.rfi-sign-btn {
  background: var(--home-ink);
  color: var(--paper);
  border: none;
  padding: 0.65rem 1.5rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease;
}
.rfi-sign-btn:hover { background: var(--home-accent); }
.rfi-sign-btn:disabled {
  background: var(--home-muted-soft);
  cursor: not-allowed;
}
.rfi-hub-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.75rem;
  margin-top: 1.5rem;
}
@media (max-width: 900px) { .rfi-hub-body { grid-template-columns: 1fr; } }

/* Letter pane - regulator's letter typeset as a document */
.rfi-letter-pane {
  background: var(--paper);
  border: 1px solid var(--home-rule);
  padding: 2.5rem 2.75rem;
  font-family: var(--serif);
  color: var(--home-ink);
  line-height: 1.6;
  font-size: 1rem;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}
.rfi-letter-header {
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--home-rule);
  font-family: var(--sans);
}
.rfi-letter-agency {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--home-ink);
  margin: 0 0 0.5rem;
}
.rfi-letter-date {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--home-muted);
  margin: 0;
}
.rfi-letter-ref {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--home-muted);
  margin: 0.25rem 0 0;
}
.rfi-letter-greeting { margin: 0 0 1.25rem; }
.rfi-letter-preamble { margin: 0 0 1.5rem; color: var(--home-muted); }
.rfi-letter-considerations { list-style: none; padding: 0; margin: 0; counter-reset: cons; }
.rfi-letter-consid {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0.75rem;
  padding: 1rem 0.5rem 1.125rem;
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: border-left-color 180ms ease, padding-left 180ms ease, background 180ms ease;
}
.rfi-letter-consid:hover {
  border-left-color: var(--home-rule);
  padding-left: 0.875rem;
  background: rgba(0, 0, 0, 0.012);
}
.rfi-letter-consid.is-current {
  border-left-color: var(--home-accent);
  padding-left: 0.875rem;
  background: var(--home-accent-soft);
}
.rfi-letter-consid.is-accepted::before { content: "\2713"; color: var(--home-accent); position: absolute; }
.rfi-consid-num {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--home-muted);
  padding-top: 0.15rem;
}
.rfi-consid-text {
  font-family: var(--serif);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--home-ink);
}
.rfi-consid-accepted-flag {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--home-accent);
  margin-top: 0.5rem;
  display: block;
}

/* Drafts pane - the right side, sticky, shows the draft for the current consideration */
.rfi-drafts-pane {
  background: var(--paper);
  border: 1px solid var(--home-rule);
  padding: 2rem 2.25rem;
  position: sticky;
  top: 1.5rem;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  font-family: var(--sans);
  color: var(--home-ink);
}
.rfi-draft-status {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--home-accent);
  margin: 0 0 0.5rem;
}
.rfi-draft-num {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--home-muted);
  margin: 0 0 1rem;
}
.rfi-draft-body {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--home-ink);
}
.rfi-draft-body .draft-cite {
  color: var(--home-accent);
  border-bottom: 1px dotted var(--home-accent);
  cursor: pointer;
  font-style: normal;
}
.rfi-draft-evidence {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--home-rule);
  font-size: 0.8125rem;
  color: var(--home-muted);
}
.rfi-draft-evidence-h {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--home-muted);
  margin: 0 0 0.5rem;
}
.rfi-draft-actions {
  display: flex; gap: 0.75rem; align-items: center;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--home-rule);
}
.rfi-accept-btn {
  background: var(--home-ink);
  color: var(--paper);
  border: none;
  padding: 0.6rem 1.25rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms ease;
}
.rfi-accept-btn:hover { background: var(--home-accent); }
.rfi-accept-btn:disabled { background: var(--home-muted-soft); cursor: not-allowed; }
.rfi-edit-link {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--home-muted);
  background: none; border: none; padding: 0;
  cursor: pointer;
  border-bottom: 1px dotted var(--home-rule);
}
.rfi-edit-link:hover { color: var(--home-ink); border-bottom-color: var(--home-ink); }
.rfi-draft-empty {
  text-align: center;
  padding: 3rem 1rem;
  font-family: var(--serif);
  font-style: italic;
  color: var(--home-muted);
}

/* Sign moment - the notary page */
.rfi-sign-stage {
  max-width: 720px;
  margin: 2.5rem auto 4rem;
  padding: 3rem clamp(1.5rem, 5vw, 4rem);
  background: var(--paper);
  border: 1px solid var(--home-rule);
  font-family: var(--serif);
  color: var(--home-ink);
  text-align: center;
}
.rfi-sign-rule { border: none; border-top: 1px solid var(--home-rule); margin: 1.5rem 0; }
.rfi-sign-title {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--home-ink);
  margin: 0 0 0.5rem;
}
.rfi-sign-agency {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--home-muted);
  margin: 0 0 1.5rem;
  letter-spacing: 0.05em;
}
.rfi-sign-meta {
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 0.5rem 1.5rem;
  margin: 1.5rem 0 2rem;
  font-family: var(--sans);
  font-size: 0.875rem;
}
.rfi-sign-meta dt { color: var(--home-muted); font-weight: 500; }
.rfi-sign-meta dd { color: var(--home-ink); margin: 0; }
.rfi-sign-statement {
  text-align: left;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.7;
  margin: 1.5rem 0;
  color: var(--home-ink);
}
.rfi-sign-name {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--home-ink);
  margin: 0;
}
.rfi-sign-name-meta {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--home-muted);
  margin: 0.5rem 0 0;
}
.rfi-sign-binding-label {
  font-family: var(--sans);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--home-muted);
  margin: 2rem 0 0.75rem;
}
.rfi-sign-binding {
  font-family: var(--mono);
  font-size: 0.875rem;
  color: var(--home-ink);
  letter-spacing: 0.05em;
  line-height: 1.8;
}
.rfi-sign-action {
  margin-top: 2.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
}
.rfi-sign-confirm-btn {
  background: var(--home-accent);
  color: var(--paper);
  border: none;
  padding: 0.85rem 2.25rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 180ms ease;
}
.rfi-sign-confirm-btn:hover { background: #6e2222; }
.rfi-sign-confirm-btn:disabled { background: var(--home-muted-soft); cursor: not-allowed; }
.rfi-sign-cancel {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--home-muted);
  background: none; border: none; padding: 0;
  border-bottom: 1px dotted var(--home-rule);
  cursor: pointer;
}
.rfi-sign-cancel:hover { color: var(--home-ink); border-bottom-color: var(--home-ink); }
.rfi-sign-submitted {
  font-family: var(--serif);
  font-style: italic;
  color: var(--home-muted);
  margin-top: 1.5rem;
}

/* ===================================================================
   ENGINE ROOM (live spine drill-down, 2026-06-25)
   Two-column editorial layout on the warm-paper home canvas. The
   buyer pushes real bytes through the spine and sees the router
   decision, content hash, redactions, ontology pin, applied rules,
   and per-mode retrieval scores. Reuses --home-canvas / --home-ink /
   --home-accent / --home-accent-soft - no new colour tokens.
   =================================================================== */
.home-engine-link {
  margin-top: 1.5rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--home-muted);
}
.home-engine-link .trust-link {
  color: var(--home-ink);
  border-bottom: 1px solid var(--home-rule);
}
.home-engine-link .trust-link:hover { border-bottom-color: var(--home-accent); color: var(--home-accent); }

.engine-stage {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.25rem, 5vw, 3.5rem) 5rem;
  color: var(--home-ink);
}
.engine-back {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--home-muted);
  text-decoration: none;
  border-bottom: 1px dotted var(--home-rule);
  padding-bottom: 1px;
}
.engine-back:hover { color: var(--home-accent); border-bottom-color: var(--home-accent); }

.engine-header { margin: 1.5rem 0 2.25rem; }
.engine-h1 {
  font-family: var(--serif);
  font-size: clamp(1.875rem, 4vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--home-ink);
  margin: 0 0 0.75rem;
}
.engine-sub {
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--home-muted);
  margin: 0;
  max-width: 720px;
}

.engine-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  border-top: 1px solid var(--home-rule);
  padding-top: 2.5rem;
}
@media (min-width: 880px) {
  .engine-grid { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

.engine-col {
  display: flex;
  flex-direction: column;
}
.engine-h2 {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--home-ink);
  margin: 0 0 0.5rem;
}
.engine-hint {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--home-muted);
  line-height: 1.55;
  margin: 0 0 1.25rem;
}

.engine-label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--home-muted);
  margin: 0.5rem 0 0.35rem;
  display: block;
}
.engine-input {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--home-ink);
  background: var(--paper);
  border: 1px solid var(--home-rule);
  padding: 0.55rem 0.75rem;
  border-radius: 2px;
}
.engine-input:focus {
  outline: none;
  border-color: var(--home-accent);
  box-shadow: 0 0 0 2px var(--home-accent-soft);
}
.engine-textarea {
  resize: vertical;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  min-height: 8rem;
}

.engine-cta-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1rem 0 0.75rem;
}
.engine-btn {
  background: var(--home-accent);
  color: var(--paper);
  border: none;
  padding: 0.65rem 1.5rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 180ms ease;
  border-radius: 2px;
}
.engine-btn:hover { background: #6e2222; }
.engine-btn:disabled { background: var(--home-muted-soft); cursor: not-allowed; }
.engine-status {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--home-muted);
  font-style: italic;
}

.engine-result {
  margin-top: 1.25rem;
  padding: 1.25rem;
  background: var(--paper);
  border: 1px solid var(--home-rule);
  border-radius: 2px;
}
.engine-kv {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0.4rem 1rem;
  margin: 0 0 0.75rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
}
.engine-kv dt {
  color: var(--home-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.6875rem;
  align-self: center;
}
.engine-kv dd { margin: 0; color: var(--home-ink); }
.engine-kv-sub {
  color: var(--home-muted);
  font-style: italic;
  margin-left: 0.5rem;
  font-size: 0.75rem;
}

.engine-mono {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--home-ink);
}

.engine-rules { margin: 0; padding: 0; list-style: none; }
.engine-rules li {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--home-ink);
  line-height: 1.6;
}

.engine-mode-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--home-rule);
  color: var(--home-ink);
  margin-right: 0.35rem;
  border-radius: 2px;
}
.engine-mode-badge[data-mode="kg"]      { border-color: var(--home-accent); color: var(--home-accent); }
.engine-mode-badge[data-mode="vector"]  { border-color: var(--home-ink); }
.engine-mode-badge[data-mode="keyword"] { border-color: var(--home-muted); color: var(--home-muted); }

.engine-hits { margin-top: 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.engine-hit {
  padding: 0.85rem 1rem;
  border: 1px solid var(--home-rule);
  background: var(--home-canvas);
  border-radius: 2px;
}
.engine-hit-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
  font-size: 0.75rem;
}
.engine-hit-rank {
  font-family: var(--sans);
  font-weight: 700;
  color: var(--home-accent);
}
.engine-hit-id { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.engine-hit-fused { font-family: var(--mono); color: var(--home-muted); }
.engine-hit-snippet {
  font-family: var(--serif);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--home-ink);
  margin: 0 0 0.6rem;
}

.engine-bars { display: flex; flex-direction: column; gap: 0.3rem; }
.engine-bar-row {
  display: grid;
  grid-template-columns: 4rem 1fr 3rem;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--home-muted);
}
.engine-bar-label { text-transform: lowercase; }
.engine-bar-track {
  height: 6px;
  background: var(--home-rule);
  border-radius: 1px;
  overflow: hidden;
  display: flex;
}
.engine-bar-fill {
  height: 100%;
  background: var(--home-accent);
  transition: width 240ms ease;
}
.engine-bar-val { text-align: right; color: var(--home-ink); }

.engine-err {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--home-accent);
  margin: 0;
}

.engine-auth-notice {
  margin-top: 2rem;
  padding: 0.75rem 1rem;
  background: var(--home-accent-soft);
  border: 1px solid var(--home-accent);
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--home-ink);
  border-radius: 2px;
}
.engine-auth-notice a { color: var(--home-accent); font-weight: 600; }

.engine-health-ribbon {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--home-rule);
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(26, 26, 26, 0.7);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.engine-ribbon-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  font-size: 11px;
}
.engine-ribbon-sep { color: rgba(26, 26, 26, 0.35); }
.engine-ribbon-body { color: rgba(26, 26, 26, 0.7); }

/* ===================================================================
   LANE: DAILY / RECURRING / COMMITTEE (v3.1 build, 2026-06-25)
   Editorial paper + ink + regulator-red. Mirrors the RFI lane shape.
   =================================================================== */

.lane-stage {
  padding-bottom: 4rem;
}
.lane-back {
  display: inline-block;
  margin-top: 0.5rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--home-muted);
  text-decoration: none;
}
.lane-back:hover { color: var(--home-accent); }
.lane-eyebrow {
  color: var(--home-accent);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.085em;
  margin: 0 0 0.4rem;
}
.lane-h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.125rem;
  color: var(--home-ink);
  margin: 1.75rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--home-rule);
}
.lane-fineprint {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--home-muted);
  font-style: italic;
  margin: 0.75rem 0 0;
}
.lane-mono {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--home-ink);
}

.lane-split {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
  margin-top: 1.5rem;
  align-items: start;
}
.lane-main { min-width: 0; }
.lane-trace {
  position: sticky;
  top: 1.25rem;
  background: var(--home-accent-soft);
  border: 1px solid var(--home-rule);
  border-radius: 4px;
  padding: 1.1rem 1.1rem 1.25rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--home-ink);
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
}
.lane-trace-h {
  margin: 0 0 0.6rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--home-accent);
}
.lane-trace-empty {
  margin: 0;
  font-style: italic;
  color: var(--home-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.lane-trace-empty-inline {
  font-style: italic;
  color: var(--home-muted-soft);
}
.lane-trace-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.45rem;
}
.lane-trace-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 0.5rem;
  align-items: baseline;
}
.lane-trace-k {
  font-family: var(--sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--home-muted);
}
.lane-trace-v {
  font-family: var(--serif);
  font-size: 0.875rem;
  color: var(--home-ink);
  word-break: break-word;
}
.lane-trace-row.mono .lane-trace-v,
.lane-trace-v code {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--home-ink);
}
.lane-trace-tier {
  display: inline-block;
  background: var(--home-ink);
  color: var(--home-canvas);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.6875rem;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  letter-spacing: 0.06em;
}
.lane-trace-reason {
  font-family: var(--sans);
  font-size: 0.6875rem;
  color: var(--home-muted);
  font-style: italic;
}
.lane-trace-rule {
  display: inline-block;
  background: var(--home-canvas);
  border: 1px solid var(--home-rule);
  padding: 0.05rem 0.35rem;
  margin: 0.1rem 0.15rem 0 0;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--home-ink);
}
.lane-trace-stack { display: grid; gap: 0.6rem; }
.lane-trace-card {
  background: var(--home-canvas);
  border: 1px solid var(--home-rule);
  border-radius: 3px;
  padding: 0.65rem 0.75rem;
}
.lane-trace-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.lane-trace-card-label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--home-ink);
}
.lane-trace-card-body {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.2rem 0.6rem;
  font-size: 0.75rem;
}
.lane-trace-card-body dt {
  font-family: var(--sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--home-muted);
}
.lane-trace-card-body dd {
  margin: 0;
  font-family: var(--serif);
  color: var(--home-ink);
  word-break: break-word;
}
.lane-trace-card-body dd.mono { font-family: var(--mono); font-size: 0.75rem; }

.lane-cta-row {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.lane-primary {
  background: var(--home-accent);
  color: var(--home-canvas);
  border: 1px solid var(--home-accent);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.9375rem;
  padding: 0.65rem 1.1rem;
  border-radius: 3px;
  cursor: pointer;
}
.lane-primary:hover:not(:disabled) { background: #6e2222; border-color: #6e2222; }
.lane-primary:disabled { opacity: 0.55; cursor: not-allowed; }
.lane-secondary {
  background: transparent;
  color: var(--home-ink);
  border: 1px solid var(--home-rule);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.9375rem;
  padding: 0.65rem 1.1rem;
  border-radius: 3px;
  cursor: pointer;
}
.lane-secondary:hover:not(:disabled) { border-color: var(--home-ink); }
.lane-secondary:disabled { opacity: 0.55; cursor: not-allowed; }

.lane-live {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--home-rule);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--home-muted);
  align-items: center;
}
.lane-live-label {
  text-transform: uppercase;
  letter-spacing: 0.085em;
  font-weight: 700;
  color: var(--home-muted-soft);
}
.lane-live-stat {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.lane-live-val {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--home-ink);
  font-weight: 600;
}
.lane-live-pulse {
  display: inline-block;
  margin-left: 0.35rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--home-accent);
  font-weight: 700;
  animation: lane-live-pulse 1.6s ease-out forwards;
}
@keyframes lane-live-pulse {
  0%   { opacity: 0;   transform: translateY(0); }
  20%  { opacity: 1;   transform: translateY(-4px); }
  100% { opacity: 0;   transform: translateY(-14px); }
}

/* Daily queue */
.daily-queue-table {
  width: 100%;
  background: transparent;
  font-family: var(--sans);
}
.daily-queue-table thead th {
  background: transparent;
  font-family: var(--sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--home-muted);
  border-bottom: 1px solid var(--home-rule);
  padding: 0.6rem 0.5rem;
  text-align: left;
}
.daily-queue-table tbody tr.daily-row {
  cursor: pointer;
  border-bottom: 1px solid var(--home-rule);
  transition: background 120ms ease;
}
.daily-queue-table tbody tr.daily-row:hover { background: rgba(140, 100, 80, 0.05); }
.daily-queue-table tbody td {
  padding: 0.7rem 0.5rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--home-ink);
  vertical-align: top;
}
.priority-chip {
  display: inline-block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
}
.priority-high {
  background: var(--home-accent);
  color: var(--home-canvas);
}
.priority-medium {
  background: #d6a23a;
  color: var(--home-canvas);
}
.priority-low {
  background: var(--home-rule);
  color: var(--home-muted);
}

/* Daily case */
.daily-case-h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin: 0.5rem 0 1rem;
}
.daily-case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem 1.5rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: var(--home-canvas);
  border: 1px solid var(--home-rule);
  border-radius: 3px;
}
.daily-case-grid .cell {
  font-family: var(--serif);
  font-size: 0.9375rem;
  color: var(--home-ink);
}
.daily-case-grid .cell label {
  display: block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--home-muted);
  margin-bottom: 0.2rem;
}
.daily-case-narrative {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--home-ink);
}

/* Recurring prep */
.recurring-meta-grid,
.committee-meta-grid {
  margin: 0;
  padding: 1rem;
  background: var(--home-canvas);
  border: 1px solid var(--home-rule);
  border-radius: 3px;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 1rem;
}
.recurring-meta-grid dt,
.committee-meta-grid dt {
  font-family: var(--sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--home-muted);
  align-self: baseline;
}
.recurring-meta-grid dd,
.committee-meta-grid dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 0.9375rem;
  color: var(--home-ink);
}
.recurring-sources {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.recurring-source-item {
  display: grid;
  grid-template-columns: 28px 1fr max-content;
  gap: 0.75rem;
  align-items: center;
  padding: 0.65rem 0.75rem;
  background: var(--home-canvas);
  border: 1px solid var(--home-rule);
  border-radius: 3px;
}
.recurring-source-name {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--home-ink);
}
.recurring-source-desc {
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--home-muted);
}
.recurring-source-status {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--home-muted);
  text-align: right;
}
.lane-composed {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--home-accent-soft);
  border: 1px solid var(--home-rule);
  border-radius: 3px;
}
/* Form inputs used by the cadence-aware compose panels (recurring,
   committee, ad-hoc, rfi-compose). Keep the look consistent with the
   rest of the lane surface. */
.lane-input {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.45rem 0.55rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  border: 1px solid var(--home-rule);
  border-radius: 3px;
  background: var(--home-bg);
  color: var(--home-fg);
}
.lane-input:focus {
  outline: none;
  border-color: var(--home-accent);
  box-shadow: 0 0 0 2px var(--home-accent-soft);
}
textarea.lane-input {
  min-height: 6rem;
  resize: vertical;
}
/* HA RFI `<requires_evidence>` markers — yellow background so the
   reviewer sees what still needs a citation before sign-off. */
mark.requires-evidence {
  background: #fff4b8;
  padding: 0.05rem 0.25rem;
  border-radius: 2px;
}
/* "Recent in this section" listing in the trace pane. */
.recent-assessments {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: grid;
  gap: 0.3rem;
}
.recent-assessment-item {
  font-size: 0.8125rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--home-rule);
  border-radius: 3px;
  background: var(--home-bg);
}
.recent-assessment-item:hover {
  background: var(--home-accent-soft);
}
/* 3.5 envelope inline drawer — provenance + watermark detail expandable
   under each assessment / committee pack / RFI output. */
details.envelope-drawer {
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--home-rule);
  border-radius: 3px;
  background: var(--home-bg);
}
details.envelope-drawer > summary {
  cursor: pointer;
  font-weight: 600;
  font-family: var(--sans);
  font-size: 0.875rem;
}
details.envelope-drawer[open] > summary {
  margin-bottom: 0.75rem;
}
.envelope-grid {
  font-size: 0.8125rem;
}
.recurring-hits {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: grid;
  gap: 0.45rem;
}
.recurring-hit {
  display: grid;
  grid-template-columns: 70px 60px 1fr;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.8125rem;
}
.recurring-hit-mode code {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--home-ink);
}
.recurring-hit-score {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--home-accent);
  font-weight: 600;
}
.recurring-hit-snippet {
  font-family: var(--serif);
  color: var(--home-ink);
}

/* Committee prep */
.committee-agenda {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}
.committee-agenda-item {
  padding: 0.9rem 1rem;
  background: var(--home-canvas);
  border: 1px solid var(--home-rule);
  border-left: 3px solid var(--home-muted-soft);
  border-radius: 3px;
}
.committee-agenda-case     { border-left-color: var(--home-ink); }
.committee-agenda-signal   { border-left-color: var(--home-accent); }
.committee-agenda-closeout { border-left-color: var(--home-muted); }
.committee-agenda-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
}
.committee-agenda-kind {
  font-family: var(--sans);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--home-muted);
  font-weight: 700;
}
.committee-agenda-title {
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  color: var(--home-ink);
  flex: 1;
}
.committee-agenda-status {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--home-muted);
}
.committee-agenda-summary {
  margin: 0;
  font-family: var(--serif);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--home-ink);
}

@media (max-width: 900px) {
  .lane-split {
    grid-template-columns: 1fr;
  }
  .lane-trace {
    position: static;
    max-height: none;
  }
}

/* ==========================================================================
   TWO-ROLE COLLABORATIVE WORKFLOW (ADR 0033)
   ========================================================================== */

/* "About this AI" combined meta surface as a SIDE PANEL.
   Slides in from the right, ~92vw wide so the model card prose,
   fairness tables, and evidence two-pane all have room. Visually
   distinct from the workflow: navy header chrome + small "System
   info" tag + yellow accent rule so the user knows this is
   information ABOUT the AI, not part of the decision-support flow.
   Toggles on the topbar pill; click-outside-to-close. */
.about-ai-panel {
  position: fixed; top: 0; right: 0;
  /* Right-sized: ~720px reading width on a desktop laptop, 95vw on a
     narrow tablet. Tables inside the panel are styled to fit this
     width responsively (horizontal scroll inside .table-scroll wrappers,
     compressed dt/dd grids), not by making the panel wider. */
  width: min(720px, 95vw); height: 100vh;
  background: #f5f7fa;
  border-left: 1px solid #2a3a55;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.22);
  z-index: 200;
  display: flex; flex-direction: column;
  overscroll-behavior: contain;
}
/* Tables inside the panel get a horizontal-scroll wrapper so wide
   columns (fairness Precision / Recall / N) stay readable instead of
   crushing into one another. */
.about-ai-panel .data-table { font-size: .82rem; }
.about-ai-panel .data-table th,
.about-ai-panel .data-table td { padding: .55rem .65rem; white-space: nowrap; }
.about-ai-panel .mc-perf-dim .data-table,
.about-ai-panel .fairness-dim table {
  display: block; overflow-x: auto; max-width: 100%;
  border: 1px solid var(--line); border-radius: 6px;
}
.about-ai-panel .mc-perf-dim .data-table thead,
.about-ai-panel .mc-perf-dim .data-table tbody,
.about-ai-panel .fairness-dim table thead,
.about-ai-panel .fairness-dim table tbody {
  display: table; width: 100%; table-layout: auto;
}
/* The model card prose narrows nicely - the floated identity card
   becomes smaller proportionally. The evidence two-pane gracefully
   stacks at narrow widths. */
.about-ai-panel .evidence-split { grid-template-columns: 1fr; gap: 1rem; }
.about-ai-panel .ev-left { max-height: 40vh; overflow-y: auto; }
.about-ai-panel .modelcard-identity-floated { width: 220px; max-width: 50%; }
.about-ai-panel .modelcard-prose h1 { font-size: 1.45rem; }
.about-ai-panel .modelcard-prose h2 { font-size: 1.1rem; }
.about-ai-header {
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: start;
  padding: 1.5rem clamp(1rem, 3vw, 2.25rem) 1.25rem;
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #cdd9e6;
  border-bottom: 4px solid #ffd166;
}
.about-ai-tag {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: #ffd166; padding: 0; margin-bottom: .25rem;
}
.about-ai-header h1 {
  font-family: var(--serif); margin: 0 0 .4rem; color: #fff;
  font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 500;
}
.about-ai-lede { margin: 0; max-width: 720px; line-height: 1.55; color: #cdd9e6; font-size: .95rem; }
.about-ai-lede strong { color: #ffd166; font-weight: 600; }
/* Back-to-workflow button: high contrast on the navy header. Uses the
   yellow accent (--header rule color) so it's instantly readable and
   visually anchored to the header chrome. */
.about-ai-back-btn {
  background: transparent; color: #ffd166; border: 1.5px solid #ffd166;
  font-weight: 600;
  align-self: start;
}
.about-ai-back-btn:hover { background: #ffd166; color: #0b1a30; border-color: #ffd166; }
.about-ai-back-btn:focus-visible {
  outline: 2px solid #fff; outline-offset: 2px;
}

.about-ai-tabs {
  display: flex; gap: 0; padding: 0 clamp(1rem, 3vw, 2.25rem);
  background: #1a2842; border-bottom: 1px solid #2a3a55;
}
.about-ai-tab {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  background: transparent; border: 0; border-bottom: 3px solid transparent;
  padding: .85rem 1.25rem; cursor: pointer; color: #97a7b8;
  font: inherit; text-align: left;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.about-ai-tab:hover { color: #fff; background: rgba(255,255,255,.05); }
.about-ai-tab.active { color: #fff; border-bottom-color: #ffd166; }
.about-ai-tab-eyebrow { font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; opacity: .75; }
.about-ai-tab-title { font-size: 1rem; font-weight: 600; }

.about-ai-body {
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: #f5f7fa;
  flex: 1; overflow-y: auto;
}
.about-tab-panel { background: transparent; }
.about-tab-panel.hidden { display: none; }
/* Tighter spacing on the model card prose inside the panel - drop the
   inner card border since the section already provides the chrome. */
#about-tab-modelcard .modelcard-prose { background: #fff; border: 1px solid var(--line); }
#about-tab-modelcard .modelcard-layout { display: block; }
/* Evidence keeps its 2-pane split */
#about-tab-evidence .evidence-split { background: #fff; }

/* Float the system-identity card right inside the prose article so the
   Intended-purpose text wraps around it. Sections below it (Foundation,
   Performance, Limitations) get .mc-clear to break the float and span
   the full prose width. This pattern works in both side panel and
   full-page views since the identity lives inside the article in both. */
.modelcard-identity-floated {
  float: right;
  width: 280px;
  max-width: 45%;
  margin: 0 0 1rem 1.25rem;
  /* Smaller padding when floated so it doesn't dominate the prose width. */
  padding: 1rem 1.15rem !important;
}
.modelcard-prose .mc-clear { clear: right; }
/* After the article ends, also clear so the prose container's height
   includes the floated identity. */
.modelcard-prose::after { content: ""; display: block; clear: both; }

.role-select-wrap { max-width: 960px; margin: 24px auto; padding: 0 24px; }
.role-select-wrap h1 { margin: 4px 0; font-family: Georgia, "Times New Roman", serif; }
.role-select-lede { color: #555; max-width: 720px; margin: 4px 0 16px; }
.role-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; }
.role-card {
  text-align: left; background: var(--home-card-bg); border: 2px solid #e8d8c0;
  border-radius: 10px; padding: 20px 22px; cursor: pointer; color: inherit;
  font: inherit; display: flex; flex-direction: column; gap: 6px;
  transition: border-color 120ms ease, transform 80ms ease;
}
.role-card:hover { border-color: var(--blue); transform: translateY(-1px); }
.role-card.selected { border-color: var(--blue); background: #fff; }
.role-card.default { border-color: #b07; }
.role-card-title { font-family: Georgia, "Times New Roman", serif; font-size: 1.35rem; letter-spacing: -0.01em; }
.role-card-sub { color: var(--blue); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.role-card-body { color: #444; line-height: 1.5; margin-top: 4px; font-size: 0.92rem; }
.role-card-default { color: #b07; font-size: 0.75rem; margin-top: 8px; font-weight: 600; }
@media (max-width: 800px) { .role-cards { grid-template-columns: 1fr; } }

.wf-home { max-width: 1080px; margin: 40px auto; padding: 0 24px; }
.wf-home-header { margin-bottom: 32px; }
.wf-home-header h1 { font-family: Georgia, serif; margin: 4px 0; }
.wf-home-actions { display: flex; gap: 12px; margin-top: 14px; }
.wf-home-section { margin-top: 28px; }
.wf-home-section h2 { font-size: 1.05rem; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; font-family: inherit; }
.wf-count { background: #f0e7d8; color: #666; font-size: 0.8rem; border-radius: 10px; padding: 2px 8px; }
.wf-empty { font-style: italic; margin: 6px 0 0; }

/* Section headers carry blocker context. "Waiting on you" sections
   get red urgency treatment; "waiting on the team" gets neutral; done
   gets muted. The per-row left-border (.wf-row-blocker-*) reinforces
   the section's urgency at the individual-row level. */
.wf-section-on-you h2 { color: #842; }
.wf-section-on-you h2::before {
  content: ""; display: inline-block;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue); margin-right: 6px; vertical-align: middle;
}
.wf-section-on-team h2 { color: #5a4a2a; }
.wf-section-available h2 { color: #1a3a72; }
.wf-section-done h2 { color: #555; }
.wf-section-sub {
  margin: -6px 0 12px;
  font-size: .8rem; color: #666; font-style: italic;
}
.wf-count-urgent {
  background: var(--blue); color: #fff;
}

.wf-list { list-style: none; padding: 0; margin: 0; }
.wf-row {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center;
  gap: 10px; background: var(--home-card-bg); border: 1px solid var(--line); border-radius: 6px;
  padding: 12px 16px; margin-bottom: 8px;
  border-left: 4px solid var(--line);  /* default; overridden by blocker class */
}
.wf-row-blocker-on-you { border-left-color: var(--blue); }
.wf-row-blocker-on-team { border-left-color: var(--blue); }
.wf-row-blocker-available { border-left-color: #1a3a72; }
.wf-row-blocker-done { border-left-color: #1a5e1a; opacity: .8; }
/* Blocker eyebrow: small italic line inside the row explaining
   concretely what is blocking the request. */
.wf-row-blocker {
  grid-column: 1 / -1;
  margin-top: 4px;
  font-size: .78rem; color: #842; font-style: italic;
}
.wf-row-blocker-on-team .wf-row-blocker { color: #7a5a00; }
.wf-row-blocker-available .wf-row-blocker { color: #1a3a72; }
.wf-row-blocker-done .wf-row-blocker { color: #5a5a5a; }
.wf-row-dim { opacity: 0.6; }
.wf-row-main {
  display: grid; grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 12px; align-items: baseline; background: none; border: none;
  padding: 0; text-align: left; color: inherit; cursor: pointer;
  font: inherit; width: 100%;
}
.wf-row-main:hover .wf-row-intent { text-decoration: underline; }
.wf-row-section { color: var(--blue); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.wf-row-intent { color: #222; }
.wf-row-meta { grid-column: 1 / -1; font-size: 0.82rem; color: #666; margin-top: 4px; }
.wf-scope-chip { background: #efe7d8; border-radius: 4px; padding: 2px 6px; font-size: 0.78rem; font-family: monospace; }
.wf-row-state { font-size: 0.78rem; padding: 4px 10px; border-radius: 12px; background: #eee; white-space: nowrap; }
.wf-state-pending     { background: #fde7c2; color: #7a4a00; }
.wf-state-drafting    { background: #d8e6fa; color: #1a3a72; }
.wf-state-in_review   { background: #fce4c2; color: #7a3a00; }
.wf-state-needs_revision { background: #f7d3d3; color: #842; }
.wf-state-signed      { background: #d4eed4; color: #1a5e1a; }
.wf-state-cancelled   { background: #ddd; color: #555; }
.wf-pick-btn { white-space: nowrap; }

/* Stage A thread layout: artifact owns the main canvas, persistent
   right rail carries context (people + attached). Header is sticky
   and carries the *primary* action of this screen (Edit and sign /
   Re-draft / Claim). The 1180-max container matches the brand site. */
.wf-thread {
  max-width: 1180px; margin: 0 auto 32px; padding: 0 24px;
}
.wf-thread-header {
  position: sticky;
  top: 54px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
  z-index: 80;
  padding: 14px 24px;
  margin: 0 -24px 24px;
}
.wf-thread-head-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
}
.wf-back-btn {
  padding: 6px 10px; font-size: 1.1rem; line-height: 1;
  border-radius: var(--radius);
}
.wf-thread-title { min-width: 0; }
.wf-thread-title .eyebrow {
  font-size: .7rem; line-height: 1.2; margin: 0 0 6px;
  color: var(--blue-strong);
}
.wf-thread-title .eyebrow::before { display: none; }
.wf-thread-title h1 {
  font-family: var(--serif); margin: 0;
  font-size: 1.5rem; line-height: 1.25; font-weight: 500;
  color: var(--navy-ink);
  letter-spacing: -.012em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-thread-scope {
  font-size: .85rem; color: var(--muted);
  margin: 4px 0 0;
}
.wf-state-tag {
  display: inline-block; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 8px; border-radius: 99rem;
  background: var(--mist); color: var(--muted);
  vertical-align: middle;
}
.wf-state-in_review { background: var(--blue-50); color: var(--blue-strong); }
.wf-state-drafting,
.wf-state-needs_revision { background: #fef3e0; color: #b56b00; }
.wf-state-signed { background: var(--ok-bg); color: var(--ok); }
.wf-state-cancelled { background: var(--mist); color: var(--faint); }
.wf-state-pending { background: var(--mist); color: var(--muted); }

/* ===================================================================
   .chip - unified pill component (Stage B).
   One base + state modifiers. Replaces ~10 variant chips that had
   accumulated over the build (wf-cite-chip, wf-att-chip, wf-input-tag,
   wf-sugg-tag, wf-pp-*, wf-cite-inline, sv-source-link, etc.). The
   variants stay as alias-classes for back-compat in templates that
   still reference them.
   =================================================================== */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--sans);
  font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 3px;
  background: var(--mist); color: var(--muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Type modifiers - keep the brand palette, restrained accent use. */
.chip--source,
.chip--label,
.chip--icsr,
.chip--protocol,
.chip--ha-letter,
.chip--literature,
.chip--psur,
.chip--other,
.chip--src { background: var(--blue-50); color: var(--blue-strong); }
.chip--file { background: var(--ok-bg); color: var(--ok); }
.chip--unknown { background: #fef3e0; color: #b56b00; }
.chip--state-open { background: var(--blue-50); color: var(--blue-strong); }
.chip--state-warn { background: #fef3e0; color: #b56b00; }
.chip--state-done { background: var(--ok-bg); color: var(--ok); }
.chip--state-fail { background: var(--danger-bg); color: var(--danger); }
/* Removed-from-prose inline chip - clickable, slightly larger. */
.chip--inline {
  font-size: .82em; padding: 1px 6px 2px;
  cursor: pointer;
  border: 1px solid var(--blue-100);
  background: var(--blue-50); color: var(--blue-strong);
}
.chip--inline:hover { background: var(--blue-strong); color: #fff; border-color: var(--blue-strong); }

/* Stage A two-column grid: main canvas + persistent right rail.
   On narrow viewports the rail folds beneath the main column. */
.wf-thread-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 980px) {
  .wf-thread-grid { grid-template-columns: 1fr; }
}
.wf-thread-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* Right rail: collapsible context sections (people, attached, etc.). */
.wf-rail {
  display: flex; flex-direction: column; gap: 20px;
  position: sticky; top: 140px;
  /* Top offset = topbar 54 + sticky thread header ~80 */
}
.rail-section {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.rail-section-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.rail-section-title {
  font-family: var(--sans);
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted);
  margin: 0; flex: 1;
}
.rail-section-count {
  font-size: .7rem; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.rail-section-add {
  width: 22px; height: 22px;
  background: transparent; border: 1px dashed var(--line-2);
  border-radius: 99rem;
  font-size: .9rem; line-height: 1; color: var(--blue-strong);
  cursor: pointer;
}
.rail-section-add:hover { border-color: var(--blue); background: var(--blue-50); }
.rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rail-row {
  display: flex; align-items: center; gap: 8px;
  font-size: .85rem; line-height: 1.4;
}
.rail-role {
  font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--faint);
  flex-shrink: 0; width: 70px;
}
.rail-row-pending .rail-role { color: var(--warn); }
.rail-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.rail-row-x {
  background: transparent; border: 0; color: var(--faint);
  font-size: 1rem; cursor: pointer; padding: 0 4px;
}
.rail-row-x:hover { color: var(--danger); }
.rail-chip {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  background: transparent; border: 0;
  padding: 4px 6px; border-radius: var(--radius);
  text-align: left; cursor: pointer;
  font: inherit; color: var(--text);
}
.rail-chip:hover { background: var(--paper-2); }
.rail-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; font-size: .85rem; }
.rail-empty {
  font-size: .82rem; color: var(--faint);
  font-style: italic; line-height: 1.4; margin: 0;
}

/* Header action group + overflow kebab. */
.wf-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.wf-actions .btn-primary,
.wf-actions .btn-ghost {
  font-family: var(--sans); font-weight: 600; font-size: .9rem;
  padding: .55rem 1rem; border-radius: var(--radius);
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.wf-actions .btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.wf-actions .btn-primary:hover { background: var(--navy-ink); }
.wf-actions .btn-ghost { background: transparent; color: var(--navy); border-color: var(--line-2); }
.wf-actions .btn-ghost:hover { background: var(--paper-2); border-color: var(--navy); }
.wf-overflow-wrap { position: relative; }
.wf-overflow-btn {
  background: transparent; border: 1px solid var(--line-2);
  width: 36px; height: 36px; border-radius: var(--radius);
  font-size: 1.1rem; line-height: 1; color: var(--muted); cursor: pointer;
  padding: 0;
}
.wf-overflow-btn:hover { border-color: var(--navy); color: var(--navy); }
.wf-overflow-menu {
  position: absolute; right: 0; top: calc(100% + 4px);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  min-width: 180px; padding: 4px; z-index: 60;
  display: flex; flex-direction: column;
}
.wf-overflow-menu.hidden { display: none; }
.wf-overflow-item {
  text-align: left; padding: 8px 12px; font-size: .88rem;
  background: transparent; border: 0; border-radius: 3px;
  color: var(--text); cursor: pointer;
}
.wf-overflow-item:hover { background: var(--paper-2); color: var(--navy-ink); }
.wf-overflow-danger { color: var(--danger); }
.wf-overflow-danger:hover { background: var(--danger-bg); color: var(--danger); }

/* Hide the legacy participant / attachments strips - the rail and
   inputs panel cover the same surface area without the stacking. */
.wf-participants, .wf-attachments-strip { display: none; }
/* Stage D thread filter chips: All / Conversation / Drafts. Drives a
   data-filter attribute on .wf-timeline; CSS hides node kinds that
   don't match. Zero-JS-per-node, one source of truth. */
.wf-thread-filters {
  display: flex; gap: 6px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}
.wf-filter-chip {
  background: transparent; border: 0;
  font-family: var(--sans); font-size: .78rem; font-weight: 600;
  color: var(--muted); cursor: pointer;
  padding: 6px 12px; border-radius: 99rem;
  transition: background .15s, color .15s;
}
.wf-filter-chip:hover { background: var(--paper-2); color: var(--navy); }
.wf-filter-chip.active { background: var(--blue-50); color: var(--blue-strong); }

/* When filter=conversation, hide drafts/returns/signs/invites - keep
   the request node + acceptance + comments + uninvites visible. When
   filter=drafts, hide everything except request + drafts + returns + signs. */
.wf-timeline[data-filter="conversation"] .wf-node-draft,
.wf-timeline[data-filter="conversation"] .wf-node-return,
.wf-timeline[data-filter="conversation"] .wf-node-sign,
.wf-timeline[data-filter="conversation"] .wf-node-invite,
.wf-timeline[data-filter="drafts"] .wf-node-comment,
.wf-timeline[data-filter="drafts"] .wf-node-invite,
.wf-timeline[data-filter="drafts"] .wf-node-uninvite,
.wf-timeline[data-filter="drafts"] .wf-node-accept { display: none; }

/* Stage B timeline: separators not cards. The DRAFT is the only event
   that owns a card (it's the thing being read + signed). Comments,
   invites, returns, accepts, signs, uninvites are minimal entries -
   a small role tag + body + meta line, separated by hairlines. */
.wf-timeline { display: flex; flex-direction: column; gap: 0; }
.wf-node {
  background: transparent; border: 0; border-radius: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.wf-node:last-child { border-bottom: 0; }
.wf-node-header {
  display: flex; gap: 10px; align-items: baseline;
  margin-bottom: 6px;
}
.wf-node-tag {
  font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted);
  flex-shrink: 0;
}
.wf-node-meta {
  font-size: .8rem; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.wf-node-body {
  margin: 0; line-height: 1.6; color: var(--text);
  font-size: .95rem;
}

/* Per-event accents - color = state-relevance only, no decoration. */
.wf-tag-draft   { color: var(--blue-strong); }
.wf-tag-return  { color: var(--warn); }
.wf-tag-comment { color: var(--muted); }
.wf-tag-invite,
.wf-tag-uninvite { color: var(--muted); }
.wf-tag-accept,
.wf-tag-sign    { color: var(--ok); }

/* The DRAFT is the only node that owns visual weight. Lifted card,
   readable serif disposition / narrative blocks, scientist notes
   call-out. This is what the physician comes here to read. */
.wf-node-draft {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 22px 26px;
  margin: 8px 0;
  box-shadow: var(--shadow-sm);
}
.wf-node-draft .wf-node-header { padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.wf-node-draft .wf-node-tag { color: var(--blue-strong); font-size: .72rem; }

/* Sign event: a quiet success bar to mark the terminal moment. */
.wf-node-sign {
  background: var(--ok-bg);
  border: 1px solid #c8e0d0;
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 8px 0;
}

.wf-scientist-notes {
  background: var(--paper-2);
  border-left: 3px solid var(--blue-100);
  border-radius: 0;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.wf-scientist-notes-label {
  font-weight: 700; font-size: .65rem;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--blue-strong); margin-bottom: 4px;
}
.wf-scientist-notes p { margin: 0; line-height: 1.55; color: var(--text); }

.wf-draft-body { color: var(--text); line-height: 1.7; }
.wf-bodyline { margin: 8px 0; font-size: .95rem; }
.wf-disposition,
.wf-narrative {
  background: transparent;
  border-left: 3px solid var(--line-2);
  padding: 4px 14px;
  margin: 12px 0;
  font-family: var(--serif);
  font-size: 1.02rem; line-height: 1.65;
  color: var(--navy-ink);
}

.wf-cite-strip {
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.wf-cite-label {
  font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-bottom: 8px;
}
.wf-cite-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wf-cite-chip {
  display: inline-flex; align-items: center;
  background: var(--blue-50); color: var(--blue-strong);
  border: 1px solid var(--blue-100); border-radius: 3px;
  padding: 3px 8px; cursor: pointer;
  font-family: var(--mono); font-size: .76rem;
}
.wf-cite-chip:hover { background: var(--blue-strong); color: #fff; border-color: var(--blue-strong); }

.wf-actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.wf-actions-secondary { margin-top: 6px; }
.wf-danger-btn { color: #842; border-color: #c97a7a; }

/* ADR 0035 conversation composer. Collapsed to a single-line input
   until the user focuses it; then expands to a 3-row textarea + the
   action row. Reduces vertical chrome at rest. */
.wf-comment-composer {
  margin-top: 4px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 8px 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wf-comment-composer:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-50);
}
.wf-comment-composer textarea {
  width: 100%; box-sizing: border-box;
  font: inherit; resize: vertical;
  border: 0; padding: 6px 0;
  background: transparent; color: var(--text);
  line-height: 1.45;
  min-height: 28px;
}
.wf-comment-composer textarea:focus { outline: none; }
.wf-comment-composer[data-state="expanded"] textarea { min-height: 72px; }
.wf-comment-actions {
  display: none;
  gap: 8px; align-items: center; justify-content: flex-end;
  border-top: 1px solid var(--line);
  padding-top: 8px; margin-top: 8px;
}
.wf-comment-composer[data-state="expanded"] .wf-comment-actions { display: flex; }
.wf-intent-attach-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: .4rem .75rem; font-size: .82rem; color: var(--navy);
  cursor: pointer;
}
.wf-intent-attach-btn:hover { border-color: var(--navy); background: var(--paper-2); }

/* Bottom-of-thread strips: participants + attachments. With the thread
   auto-scrolled to the bottom on open + a sticky header at the top,
   these are the "always in view" reference surfaces for the user's
   working position. Same chip shell / beige palette as the rest of
   the form so they read as one coherent surface. */
.wf-attachments-strip {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 8px 0 0;
  padding: 8px 12px;
  background: var(--home-card-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.wf-attachments-strip-empty .wf-attachments-empty {
  color: #888; font-style: italic; font-size: .82rem;
}
.wf-attachments-label {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: #666;
}
.wf-attachments-count {
  background: var(--blue); color: #fff;
  font-size: .68rem; padding: 1px 6px; border-radius: 8px;
  margin-left: 4px;
}
.wf-attachments-chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Distinguish uploaded attachments (FILE tag) from cited library
   sources (typed tag: ICSR / LABEL / etc.). Same chip shell, different
   tag color. */
.wf-att-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .76rem;
  padding-left: 0;
}
.wf-att-chip-tag {
  background: rgba(255,255,255,.25);
  color: #fff;
  font-size: .58rem; font-weight: 700;
  letter-spacing: .05em;
  padding: 2px 5px;
  border-radius: 3px 0 0 3px;
  margin: 0;
}
.wf-att-chip-uploaded .wf-att-chip-tag { background: #1f7a4a; }
.wf-att-chip-source .wf-att-chip-tag { background: var(--blue); }

/* Inputs panel (Phase 1 of bucketed-inputs build). Pre-drafting
   consolidation surface. Sits between the timeline and the comment
   composer. Each named bucket is a collapsible card; per-bucket
   actions live in the bucket foot; the panel as a whole has a
   compact head with the bucket count + new-bucket affordance. */
.wf-inputs-panel {
  margin: 16px 0 8px;
  padding: 14px 16px;
  background: var(--home-card-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.wf-inputs-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.wf-inputs-title { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.wf-inputs-eyebrow {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--blue);
}
.wf-inputs-count { font-size: .82rem; color: #555; }
.wf-inputs-add-bucket {
  font-size: .82rem; font-weight: 600;
  padding: 6px 12px; border-radius: 4px;
  background: #fff; color: #2a2a2a; border: 1px dashed var(--blue);
  cursor: pointer;
}
.wf-inputs-add-bucket:hover { background: var(--blue); color: #fff; }
.wf-inputs-empty {
  margin: 0; padding: 12px 0;
  font-size: .9rem; color: #5d6b7b; line-height: 1.5;
}

/* Draft-from-these-inputs action row at the bottom of the panel.
   The button is the only primary action in the panel; the hint
   on the right explains the affordance to non-scientists and the
   disabled case. */
.wf-inputs-draft-action {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.wf-inputs-draft-btn {
  font-size: .92rem; font-weight: 600;
  padding: 8px 16px;
  white-space: nowrap;
}
.wf-inputs-draft-btn:disabled {
  opacity: .5; cursor: not-allowed;
}
.wf-inputs-draft-hint {
  font-size: .82rem; color: #5d6b7b; line-height: 1.4;
  flex: 1;
}

/* Library-suggestion modal (Phase 3 of bucketed-inputs build).
   Sits between the lead clicking Draft from these inputs and the
   spine assembling. One row per candidate; checkbox + auto-suggested
   target bucket dropdown; Skip or Add-selected. */
.wf-sugg-card {
  max-width: 720px; width: min(720px, 92vw);
  background: #fff; padding: 24px;
  border-radius: 8px; box-shadow: 0 20px 40px rgba(0,0,0,.16);
}
.wf-sugg-card h2 {
  margin: 0 0 8px; font-size: 1.3rem; font-family: var(--serif, Georgia, serif);
}
.wf-sugg-card .hint {
  font-size: .88rem; color: #555; margin: 0 0 18px;
  line-height: 1.5;
}
.wf-sugg-list { list-style: none; padding: 0; margin: 0 0 18px; }
.wf-sugg-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px; align-items: start;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.wf-sugg-row:last-child { border-bottom: 0; }
.wf-sugg-pick {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
}
.wf-sugg-pick input[type=checkbox] { margin-top: 4px; }
.wf-sugg-main { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.wf-sugg-tag {
  font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: var(--blue);
  padding: 2px 6px; border-radius: 3px;
}
.wf-sugg-label { font-weight: 500; color: #2a2a2a; }
.wf-sugg-sub { color: #888; font-size: .78rem; }
.wf-sugg-why {
  font-size: .78rem; color: #5d6b7b;
  font-style: italic; max-width: 220px;
}
.wf-sugg-target {
  font-size: .78rem; color: #555; white-space: nowrap;
}
.wf-sugg-target-sel {
  font-size: .82rem; padding: 3px 6px;
  border: 1px solid var(--line-2); border-radius: 3px;
  background: #fff;
}
.wf-sugg-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 12px;
}

.wf-bucket {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 8px;
  overflow: hidden;
}
.wf-bucket:last-child { margin-bottom: 0; }
.wf-bucket-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: #f6f8fb;
  border-bottom: 1px solid var(--line);
}
.wf-bucket-toggle {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0;
  background: transparent; border: 0; cursor: pointer;
  padding: 0; text-align: left;
  font-family: inherit;
}
.wf-bucket-chev {
  font-size: .72rem; color: #888; font-family: monospace;
  display: inline-block; width: 12px;
}
.wf-bucket-toggle[aria-expanded="false"] .wf-bucket-chev::before { content: ">"; }
.wf-bucket-toggle[aria-expanded="true"]  .wf-bucket-chev { transform: none; }
.wf-bucket-toggle[aria-expanded="false"] .wf-bucket-chev { content: ">"; }
.wf-bucket-name {
  font-size: .92rem; font-weight: 600; color: #2a2a2a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wf-bucket-count {
  background: var(--blue); color: #fff;
  font-size: .68rem; font-weight: 600;
  padding: 2px 8px; border-radius: 99rem;
}
.wf-bucket-actions { display: flex; gap: 6px; }
.wf-bucket-rename, .wf-bucket-delete {
  background: transparent; border: 0;
  font-size: .72rem; font-weight: 600;
  color: #5d6b7b; cursor: pointer;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 6px;
}
.wf-bucket-rename:hover { color: #2a2a2a; }
.wf-bucket-delete:hover { color: var(--blue); }

.wf-input-list {
  list-style: none; margin: 0; padding: 0;
}
.wf-input-list.hidden { display: none; }
.wf-input-row {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  font-size: .88rem;
}
.wf-input-row:last-child { border-bottom: 0; }
.wf-input-empty {
  padding: 10px 12px;
  color: #999; font-style: italic; font-size: .82rem;
}
.wf-input-main {
  flex: 1; min-width: 0;
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  background: transparent; border: 0; padding: 0; text-align: left;
  font-family: inherit; font-size: inherit; color: inherit;
  cursor: pointer;
}
.wf-input-comment-body { cursor: default; }
.wf-input-tag {
  font-size: .62rem; font-weight: 700; letter-spacing: .08em;
  color: #fff; background: var(--blue);
  padding: 2px 6px; border-radius: 3px;
  flex-shrink: 0;
}
.wf-input-source .wf-input-tag { background: var(--blue); }
.wf-input-attachment .wf-input-tag { background: #1f7a4a; }
.wf-input-comment .wf-input-tag { background: var(--blue); }
.wf-input-label { font-weight: 500; color: #2a2a2a; }
.wf-input-sub { color: #888; font-size: .75rem; }
.wf-input-via {
  color: #5d6b7b; font-style: italic; font-size: .72rem;
  background: #eaf1f8; padding: 2px 6px; border-radius: 3px;
}
.wf-input-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.wf-input-move {
  font-size: .72rem; padding: 2px 4px;
  border: 1px solid var(--line-2); border-radius: 3px;
  background: #fff; color: #444; cursor: pointer;
}
.wf-input-x {
  background: transparent; border: 0; color: #888;
  font-size: .92rem; font-weight: 600; cursor: pointer;
  padding: 0 6px;
}
.wf-input-x:hover { color: var(--blue); }
.wf-bucket-foot {
  display: flex; gap: 6px;
  padding: 8px 12px;
  background: #f6f8fb; border-top: 1px solid var(--line);
}
.wf-bucket-foot.hidden { display: none; }
.wf-bucket-foot button {
  font-size: .72rem; font-weight: 600;
  padding: 4px 10px;
  background: transparent; color: #5d6b7b; border: 1px dashed var(--line-2);
  border-radius: 4px; cursor: pointer;
}
.wf-bucket-foot button:hover { background: #fff; color: #2a2a2a; border-color: var(--blue); border-style: solid; }

/* Inline citation chips rendered by _renderProseWithCitations. Appear
   anywhere prose is shown (request intent, comment body, draft fields,
   return message). Compact, click-to-open. */
.wf-cite-inline {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-family: inherit; font-size: .82em;
  padding: 1px 6px 2px;
  background: #eaf1f8; color: #335f8f;
  border: 1px solid #d7e4f1; border-radius: 4px;
  cursor: pointer;
  vertical-align: baseline;
}
.wf-cite-inline:hover { background: #335f8f; color: #fff; border-color: #335f8f; }
.wf-cite-inline:hover .wf-cite-tag { background: rgba(255,255,255,.18); color: #fff; }
.wf-cite-source { background: #eaf1f8; color: #335f8f; border-color: #d7e4f1; }
.wf-cite-attachment { background: #eaf1f8; color: #1f7a4a; border-color: #d7e4f1; }
.wf-cite-attachment:hover { background: #1f7a4a; color: #fff; border-color: #1f7a4a; }
.wf-cite-unknown { background: #f6f8fb; color: #5d6b7b; border-color: var(--line); cursor: help; }
.wf-cite-tag {
  font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  color: rgba(0,0,0,.5); text-transform: uppercase;
}

/* @-typeahead overlay used by _wireCitationTypeahead. Positioned by JS
   under the active textarea, dismissed on blur or ESC or whitespace. */
.wf-cite-ta {
  z-index: 1000;
  background: #fff;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  max-height: 280px; overflow-y: auto;
  padding: 4px;
}
.wf-cite-ta-empty {
  padding: 10px 12px;
  font-size: .82rem; color: #888; font-style: italic;
}
.wf-cite-ta-row {
  display: flex; align-items: baseline; gap: 8px;
  width: 100%;
  background: transparent; border: 0;
  padding: 6px 10px;
  text-align: left; cursor: pointer;
  font-family: inherit; font-size: .88rem;
  border-radius: 4px;
}
.wf-cite-ta-row:hover, .wf-cite-ta-row.active {
  background: #eaf1f8; color: #2a2a2a;
}
.wf-cite-ta-tag {
  font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  color: #fff; background: var(--blue);
  padding: 2px 6px; border-radius: 3px;
  flex-shrink: 0;
}
.wf-cite-ta-label { font-weight: 500; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-cite-ta-sub { color: #888; font-size: .72rem; flex-shrink: 0; }

/* Source viewer pin affordance. Lives in the source-viewer head when
   the viewer was opened with a workflow-request context. */
.sv-actions { margin-top: 10px; }

/* Participant strip (ADR 0035): who's in the conversation, who's
   drafting, who's pending. Pending chips are clickable to remove
   (physician / admin only). Lives JUST ABOVE the attachments strip,
   below the comment composer so both stay in view after scroll-to-
   bottom on open. */
.wf-participants {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 14px 0 8px;
  padding: 8px 12px;
  background: var(--home-card-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.wf-participants-label {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; color: #666; margin-right: 4px;
}
.wf-participant-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-2); background: #fff;
  border-radius: 4px; padding: 4px 10px;
  font: inherit; font-size: .8rem;
}
.wf-pp-role {
  font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: #888;
}
.wf-pp-name { color: #222; font-weight: 500; }
.wf-pp-requester { border-color: #1a3a72; }
.wf-pp-requester .wf-pp-role { color: #1a3a72; }
.wf-pp-drafter { border-color: #1a5e1a; background: #f6fbf6; }
.wf-pp-drafter .wf-pp-role { color: #1a5e1a; }
.wf-pp-pending { border-color: var(--blue); background: #fdf6e8; }
.wf-pp-pending .wf-pp-role { color: #7a5a00; }
.wf-pp-removable { cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.wf-pp-removable:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.wf-pp-removable:hover .wf-pp-role { color: rgba(255,255,255,.85); }
.wf-pp-removable:hover .wf-pp-name { color: #fff; }
.wf-pp-x { font-size: .9rem; line-height: 1; opacity: .7; }
.wf-pp-removable:hover .wf-pp-x { opacity: 1; }

/* Small + button next to the "In this conversation" label - opens the
   invite modal. Icon-only (no "Invite" word) since the placement next
   to the participants label is self-explanatory. */
.wf-pp-add {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: #fff; color: var(--blue);
  border: 1px dashed var(--blue); border-radius: 50%;
  cursor: pointer; font: inherit; font-size: 1rem; font-weight: 700;
  line-height: 1;
  transition: background .15s ease, color .15s ease, border-style .15s ease;
}
.wf-pp-add:hover { background: var(--blue); color: #fff; border-style: solid; }

/* Staged-attachment chips above the comment-composer's action row.
   Reuses the .wf-att-summary class for the chip container. */
.wf-comment-composer .wf-att-summary {
  margin: 0 0 8px;
}
.wf-att-staging {
  display: flex; flex-direction: column; gap: 6px;
  margin: 8px 0;
}
.wf-att-staged-row {
  display: flex; gap: 10px; align-items: center;
  background: #fff; border: 1px solid var(--line-2);
  border-radius: 4px; padding: 6px 10px;
}
.wf-att-staged-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wf-att-staged-name { font-weight: 600; color: #222; font-size: .92rem; }
.wf-att-staged-size { font-size: .72rem; color: #666; }

/* Composer fits on a single laptop screen at >=900px: 2-column form layout
   so the page does not scroll for the section/cadence/scope/intent +
   due/scientists/actions split. Chip strips replace native selects for
   Section + Cadence: every option is visible at once, one click to pick. */
.wf-compose {
  max-width: 1200px; margin: 0 auto;
  padding: 18px 20px 32px;
  font-family: var(--sans);
  color: var(--navy-ink);
}
.wf-compose-header {
  margin-bottom: 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.wf-compose-header h1 {
  font-family: var(--serif);
  font-size: 1.5rem; font-weight: 500;
  letter-spacing: -.012em;
  margin: 2px 0 0;
  color: var(--navy-ink);
}
.wf-compose-header .docws-doc-back {
  align-self: flex-start;
  margin-bottom: 2px;
}

.wf-form { display: flex; flex-direction: column; gap: 14px; }
.wf-form-2col {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  column-gap: 28px;
  row-gap: 14px;
  align-items: start;
}
@media (max-width: 899px) {
  .wf-form-2col { grid-template-columns: 1fr; column-gap: 0; }
}
.wf-form-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wf-field { display: flex; flex-direction: column; gap: 5px; }
.wf-field-label {
  font-family: var(--sans);
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted);
}
.wf-field-hint {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--faint);
  margin-left: 4px;
}

/* Chip strip: segmented buttons replacing native selects for small
   closed enumerations (Section + Cadence). One click to pick; all
   options visible at once. */
.wf-chip-strip {
  display: flex; gap: 6px;
  flex-wrap: wrap;
}
.wf-chip {
  background: var(--paper);
  color: var(--navy-ink);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 7px 12px;
  font: inherit;
  font-size: .88rem;
  line-height: 1.25;
  cursor: pointer;
  text-align: left;
  display: inline-flex; flex-direction: column; gap: 1px;
  min-width: 0;
}
.wf-chip:hover { border-color: var(--navy); }
.wf-chip.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.wf-chip .wf-chip-main {
  font-weight: 600;
  font-size: .9rem;
}
.wf-chip .wf-chip-sub {
  font-size: .7rem;
  color: var(--muted);
  text-transform: lowercase;
}
.wf-chip.active .wf-chip-sub { color: rgba(255, 255, 255, .78); }

/* Multi-chip widget: a text input that turns typed terms into removable
   chips. Used for compounds (1..N per request). Stores comma-joined
   value in a hidden input for backend compat. */
.wf-multi-chip {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  padding: 5px 8px;
  background: #fff;
  min-height: 36px;
}
/* Match the global :focus-visible ring (line 107) since the inner input
   is borderless and the wrapper is the visual unit. */
.wf-multi-chip:focus-within {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.wf-multi-chip-list { display: contents; }
/* The chip is the click target. Hover makes the remove affordance
   unmistakable: red-tint background, danger-coloured text + line-through,
   bigger x indicator. No tiny click targets. */
.wf-multi-chip-item {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--blue-50);
  color: var(--navy-ink);
  border: 1px solid var(--blue-100);
  border-radius: 3px;
  padding: 4px 10px 4px 10px;
  font: inherit;
  font-size: .9rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.wf-multi-chip-item:hover,
.wf-multi-chip-item:focus-visible {
  background: var(--danger-bg);
  border-color: var(--danger);
  color: var(--danger);
  outline: none;
}
.wf-multi-chip-item:hover .wf-multi-chip-text,
.wf-multi-chip-item:focus-visible .wf-multi-chip-text {
  text-decoration: line-through;
}
.wf-multi-chip-text { display: inline-block; }
.wf-multi-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  color: var(--muted);
  font-size: 1.1rem; line-height: 1;
  font-weight: 500;
  pointer-events: none;
}
.wf-multi-chip-item:hover .wf-multi-chip-x,
.wf-multi-chip-item:focus-visible .wf-multi-chip-x {
  color: var(--danger);
  font-weight: 700;
}
.wf-multi-chip-input {
  flex: 1; min-width: 120px;
  background: transparent;
  border: 0; outline: 0;
  font: inherit; font-size: .9rem;
  color: var(--navy-ink);
  padding: 4px 0;
}

/* Lane pill: shows which lane the user clicked "+ New" from, right of the
   page headline. Italic Newsreader so it reads as a context tag, not a
   second heading. */
.wf-lane-pill {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--serif); font-style: italic;
  font-size: .9rem; font-weight: 500;
  color: var(--muted);
  vertical-align: middle;
}
.wf-lane-pill::before { content: "/ "; color: var(--faint); }
/* House-style form controls. All input types iSAT uses get the same
   beige border + white bg so the form reads as one coherent surface. */
.wf-field input[type="text"],
.wf-field input[type="date"],
.wf-field input[type="search"],
.wf-field input[type="number"],
.wf-field input[type="email"],
.wf-field select,
.wf-field textarea {
  font: inherit; border: 1px solid var(--line-2); border-radius: 4px;
  padding: 8px 10px; background: #fff; color: inherit;
  width: 100%; box-sizing: border-box;
  /* Strip the browser default search-field chrome (rounded corners +
     magnifier on macOS) so search reads identically to a text input. */
  -webkit-appearance: none; appearance: none;
}
.wf-field textarea { font-family: inherit; resize: vertical; }
.wf-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.wf-field-block { display: flex; flex-direction: column; gap: 12px; }
.wf-form-actions { margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .wf-field-row { grid-template-columns: 1fr; }
}

/* ===================================================================
   Nominate-scientists picker + attach affordance.

   Style notes:
   - Same beige border (var(--line-2)) and white bg as every other form input
     so the search box + result list read as part of the same form
     surface, not a foreign island.
   - Chip palette uses the warm-paper system (--home-card-bg + a darker
     beige for the selected state) instead of red/navy that clashed
     with the rest of the form.
   - Responsive: at <=480px the result row stacks name above tags; at
     <=320px the form remains usable without horizontal scroll.
   =================================================================== */

/* Selected-scientist chips: warm beige with a hover-to-remove. */
.wf-sci-selected-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px; min-height: 22px;
}
.wf-sci-none { font-size: .8rem; }
/* The whole chip is a remove button. Click anywhere to remove; the "x"
   is a visual affordance. Hover state highlights the entire chip so the
   click-to-remove behaviour is discoverable. */
.wf-sci-chosen-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #efe7d8; color: #5a4a2a;
  border: 1px solid var(--line-2);
  border-radius: 4px; padding: 3px 10px;
  font: inherit; font-size: .82rem; font-weight: 500;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.wf-sci-chosen-chip:hover {
  background: var(--blue); border-color: var(--blue); color: #fff;
}
.wf-sci-chip-x { font-size: .85rem; line-height: 1; opacity: .7; }
.wf-sci-chosen-chip:hover .wf-sci-chip-x { opacity: 1; }

/* Typeahead wrapper: positioned so the results menu can overlay
   content below the input as an absolute-positioned dropdown. */
.wf-typeahead { position: relative; }
.wf-typeahead-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  border: 1px solid var(--line-2); border-radius: 4px;
  max-height: 240px; overflow-y: auto;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  z-index: 50;
}
.wf-typeahead-menu.hidden { display: none; }
.wf-typeahead-selected { margin-bottom: 6px; }
/* Backward compat: a few earlier callers still target .wf-sci-results
   directly. Keep it bordered + scrollable inline. */
.wf-sci-results {
  border: 1px solid var(--line-2); border-radius: 4px;
  max-height: 240px; overflow-y: auto;
  background: #fff; margin-top: 6px;
}
.wf-sci-empty { padding: 12px; margin: 0; font-style: italic; color: #999; font-size: .82rem; }
.wf-sci-row {
  display: block;
  background: none; border: 0; border-bottom: 1px solid #f0e7d8;
  padding: 8px 12px; width: 100%; text-align: left; font: inherit;
  cursor: pointer; color: inherit;
}
.wf-sci-row:last-child { border-bottom: 0; }
.wf-sci-row:hover { background: #fdf6e8; }
.wf-sci-row-name { font-weight: 600; color: #222; font-size: .92rem; }
.wf-sci-row-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.wf-sci-tag { background: #efe7d8; color: #5a4a2a; font-size: 0.7rem; padding: 1px 6px; border-radius: 6px; }

/* Attach-document affordance: a small button BELOW the textarea on a
   foot row alongside the attachment chips. Trying to absolutely
   overlay it on the textarea caused the textarea to render at its
   default width on narrow viewports and the button to overlap content
   on mobile. A foot row works at every breakpoint. */
.wf-intent-wrap { display: block; width: 100%; }
/* The intent textarea is the heart of the form - give it room to
   breathe so a multi-line description does not feel squeezed.
   resize: vertical (inherited from .wf-field textarea) still lets
   the user grow it if they want more. */
#wf-rq-intent { min-height: 140px; }
.wf-intent-attach-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fff; border: 1px solid var(--line-2); border-radius: 4px;
  padding: 6px 12px; font: inherit; font-size: .8rem;
  color: #5a4a2a; cursor: pointer;
  align-self: flex-start;
  margin-top: 6px;
}
.wf-intent-attach-btn:hover { background: #efe7d8; border-color: var(--blue); color: #3a2a0a; }
.wf-att-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.wf-att-chosen-chip {
  display: inline-flex; align-items: stretch; gap: 0;
  background: #efe7d8; color: #5a4a2a;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  font-size: .8rem;
  overflow: hidden;
}
.wf-att-chosen-edit {
  background: none; border: 0; color: inherit; font: inherit;
  padding: 4px 8px; cursor: pointer;
}
.wf-att-chosen-edit:hover { background: #fdf6e8; text-decoration: underline; }
.wf-att-chosen-remove {
  background: transparent; color: #5a4a2a; border: 0;
  border-left: 1px solid var(--line-2);
  width: 26px;
  font: inherit; font-size: .8rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.wf-att-chosen-remove:hover { background: var(--blue); color: #fff; }
.wf-att-backdrop { z-index: 350; }
.wf-att-card { max-width: 720px; width: 100%; }

/* ---- Composer responsive rules (320 / 768 / 1024 breakpoints) ----
   Source order matters: the LATER matching @media rule wins the
   cascade tie when both fire. Below we list the BROADER rule (<=768)
   first and the NARROWER rule (<=480) second so that at narrow
   widths the narrow rule's overrides win.
   =================================================================== */
/* Tablet (<=768px): tighter horizontal padding on the composer. */
@media (max-width: 768px) {
  .wf-compose { padding: 0 16px; }
}
/* Mobile (<=480px): form actions stack and span full width; tighter
   margins so the composer fits a 320px viewport comfortably. */
@media (max-width: 480px) {
  .wf-compose { margin: 16px auto; padding: 0 12px; }
  .wf-form { gap: 14px; }
  .wf-form-actions { flex-direction: column; }
  .wf-form-actions button { width: 100%; }
}

/* Nominees + attachments inside the request thread */
.wf-nominees { margin-top: 12px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wf-nominees-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #666; }
.wf-nominee-chip {
  background: #efe7d8; color: #444; font-size: .78rem;
  padding: 2px 8px; border-radius: 10px; font-family: monospace;
}
.wf-attachments-summary { margin-top: 8px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.wf-att-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #666; }
.wf-att-chip {
  background: #1a3a72; color: #fff; border: none; border-radius: 4px;
  padding: 3px 9px; font-size: .78rem; cursor: pointer;
  font-family: monospace;
}
.wf-att-chip:hover { background: var(--blue); }

.wf-recent-returns { background: #eaf1f8; border-left: 4px solid var(--blue); border-radius: 4px; padding: 10px 14px; margin-top: 10px; }
.wf-recent-returns ul { margin: 4px 0 0; padding-left: 20px; }
.wf-recent-returns li { margin-bottom: 4px; }

.wf-compose-grid { display: grid; grid-template-columns: 360px 1fr; gap: 24px; align-items: flex-start; }
.wf-sources-picker { background: #fffaf5; border: 1px solid var(--line); border-radius: 6px; padding: 16px; max-height: 720px; overflow-y: auto; }
.wf-sources-picker h2 { margin-top: 0; font-size: 1rem; }
.wf-sources-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; font-size: 0.85rem; }
.wf-sources-filters label { display: flex; align-items: center; gap: 8px; }
.wf-source-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.wf-source-item { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; border: 1px solid transparent; }
.wf-source-item:hover { background: #fff; border-color: var(--line); }
.wf-source-pick { display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.wf-source-pick input[type="checkbox"] { float: left; margin-right: 8px; }
.wf-source-name { font-size: 0.92rem; color: #222; }
.wf-source-meta { font-size: 0.78rem; color: #777; }
.wf-source-preview { background: none; border: 1px solid var(--line-2); border-radius: 4px; padding: 2px 8px; font-size: 0.78rem; cursor: pointer; color: #1a3a72; }
.wf-source-preview:hover { background: #1a3a72; color: #fff; border-color: #1a3a72; }
.wf-source-pinned { background: #fdf6e8; border-left: 3px solid #b07; padding-left: 6px; }
.wf-pinned-tag { background: #b07; color: #fff; font-size: 0.68rem; padding: 1px 6px; border-radius: 8px; margin-left: 6px; vertical-align: middle; }
.wf-origin-tag { display: inline-block; font-size: 0.68rem; padding: 1px 6px; border-radius: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-right: 4px; vertical-align: middle; }
.wf-origin-internal { background: #d8e6fa; color: #1a3a72; }
.wf-origin-external { background: #f0e2d4; color: #7a4a00; }
.wf-sources-sub { font-size: 0.72rem; font-weight: 400; color: #777; text-transform: uppercase; letter-spacing: 0.04em; margin-left: 8px; }
.wf-sources-picker .hint { font-size: 0.78rem; color: #666; margin: 4px 0 12px; line-height: 1.45; }

/* Edit-and-sign modal */
.wf-edit-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 300; display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto; }
.wf-edit-card { background: #fff; max-width: 760px; width: 100%; padding: 28px 32px; border-radius: 8px; position: relative; box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
.wf-edit-card h2 { font-family: Georgia, serif; margin: 0 0 8px; }
.wf-edit-card .hint { font-size: 0.85rem; color: #555; margin: 0 0 16px; line-height: 1.55; }
.wf-edit-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.wf-edit-label { font-size: 0.85rem; font-weight: 600; color: #555; }
.wf-edit-field textarea { font: inherit; border: 1px solid var(--line-2); border-radius: 4px; padding: 8px 10px; background: #fff; resize: vertical; }
.wf-draft-form { display: flex; flex-direction: column; gap: 16px; }

@media (max-width: 900px) {
  .wf-compose-grid { grid-template-columns: 1fr; }
  .wf-sources-picker { max-height: 320px; }
  .wf-field-row { grid-template-columns: 1fr; }
}

.source-viewer { position: fixed; top: 0; right: 0; height: 100vh; width: 520px; max-width: 92vw; background: #fff; box-shadow: -6px 0 24px rgba(0, 0, 0, 0.15); z-index: 200; overflow-y: auto; padding: 20px 24px 60px; }
.source-viewer-close { position: sticky; top: 10px; left: 100%; background: #fafafa; border: 1px solid #ddd; border-radius: 4px; width: 32px; height: 32px; font: inherit; cursor: pointer; z-index: 1; float: right; }
.sv-header { margin-bottom: 16px; }
.sv-header h2 { font-family: Georgia, serif; margin: 4px 0; }
.sv-content { background: #fafafa; border: 1px solid #eed; border-radius: 4px; padding: 12px 14px; font-family: monospace; font-size: 0.88rem; line-height: 1.5; white-space: pre-wrap; color: #222; }
.sv-metadata { margin-top: 12px; font-size: 0.85rem; color: #555; }
.sv-metadata div { display: grid; grid-template-columns: 140px 1fr; gap: 6px; padding: 2px 0; }
.sv-metadata dt { font-weight: 600; }
.sv-metadata dd { margin: 0; }
.sv-source-list { list-style: none; padding: 0; margin: 0; }
.sv-source-list li { margin-bottom: 6px; }
.sv-source-link { display: block; background: none; border: 1px solid #ddd; border-radius: 4px; padding: 8px 10px; width: 100%; text-align: left; cursor: pointer; font: inherit; }
.sv-source-link:hover { border-color: var(--blue); }
.sv-source-name { display: block; font-weight: 500; }
.sv-source-link .muted { display: block; font-size: 0.78rem; margin-top: 2px; }

/* Workflow toast: floating confirmation at the bottom of the viewport
   for post-action feedback ("Removed X from the conversation"). Slides
   up + auto-dismisses after ~4s. */
.wf-toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #2a3a55; color: #fff;
  border-radius: 6px; padding: 12px 18px;
  font: inherit; font-size: .88rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  z-index: 1000;
  max-width: 90vw;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}
.wf-toast-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.wf-toast-error { background: #842; }

/* Login banner: shown when the OIDC callback bounces back with an
   ?err=oidc-network query (transient DNS hiccup on the host). */
.login-banner {
  background: #eaf1f8; color: #842;
  border: 1px solid #c97a7a; border-left: 4px solid var(--blue);
  border-radius: 4px; padding: 10px 12px;
  margin-bottom: 14px;
  font-size: .9rem; line-height: 1.45;
}

/* Legacy aliases: .primary-btn and .ghost-btn historically had their own
   regulator-red look. They are now aliased to the canonical .btn-primary
   / .btn-ghost editorial styling so callers using either name render
   consistently. Eventually all callers should be renamed; this alias
   preserves visual continuity without template churn. */
.primary-btn {
  background: var(--navy);
  color: #fff;
  border: 1px solid var(--navy);
  border-radius: var(--radius);
  padding: 8px 16px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.primary-btn:hover {
  background: var(--navy-ink);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.ghost-btn {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 8px 16px;
  font: inherit;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease;
}
.ghost-btn:hover {
  background: var(--paper-2);
  border-color: var(--navy);
  color: var(--navy);
}

/* Primary button with an inline brand icon (Slack / Teams / Google Chat).
   Icon needs a white "chip" so the brand colors stay readable. */
.wf-primary-with-icon {
  display: inline-flex; align-items: center; gap: 8px;
}
.wf-primary-with-icon svg {
  background: #fff; border-radius: 3px; padding: 1px;
}
.wf-skip-ping { font-size: .82rem; padding: 6px 12px; }

/* ============================================================================
   ADR 0036 - Doc-as-workspace surface
   Split-pane editor (brief / response [/ response_2]) with right rail for
   inline comments + (Phase 2) recommended sources + (Phase 3) proposal diff.
   ============================================================================ */

.wf-workspace {
  max-width: 1380px;
  margin: 0 auto 32px;
  padding: 0 24px;
}

.wf-ws-header {
  position: sticky;
  top: 54px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
  z-index: 80;
  padding: 14px 24px 10px;
  margin: 0 -24px 24px;
}
.wf-ws-head-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
}
.wf-ws-title { min-width: 0; }
.wf-ws-title .eyebrow {
  font-size: .7rem; line-height: 1.2; margin: 0 0 6px;
  color: var(--blue-strong);
}
.wf-ws-title .eyebrow::before { display: none; }
.wf-ws-title h1 {
  font-family: var(--serif); margin: 0;
  font-size: 1.5rem; line-height: 1.25; font-weight: 500;
  color: var(--navy-ink);
  letter-spacing: -.012em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wf-ws-actions { display: flex; gap: 8px; align-items: center; }
.wf-locked-note { font-size: .85rem; color: var(--muted); font-style: italic; }

.wf-ws-participants {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px;
}
.wf-pp {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 99rem; padding: 3px 10px;
  font-size: .8rem;
}
.wf-pp-name { color: var(--navy-ink); font-weight: 500; }
.wf-pp-role {
  font-size: .65rem; color: var(--muted); text-transform: uppercase;
  letter-spacing: .06em;
}
.wf-pp-tag {
  font-size: .6rem; text-transform: uppercase; letter-spacing: .08em;
  padding: 1px 6px; border-radius: 3px; font-weight: 700;
}
.wf-pp-tag-initiator { background: var(--blue-50); color: var(--blue-strong); }

.wf-ws-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1100px) {
  .wf-ws-grid { grid-template-columns: 1fr; }
}

.wf-ws-pages { display: flex; flex-direction: column; gap: 18px; }

.wf-pages-grid {
  display: grid;
  gap: 18px;
}
.wf-pages-cols-2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.wf-pages-cols-3 {
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 5fr);
}
@media (max-width: 900px) {
  .wf-pages-cols-2, .wf-pages-cols-3 { grid-template-columns: 1fr; }
}

.wf-page {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  min-height: 320px;
}
.wf-page-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  border-radius: 6px 6px 0 0;
}
.wf-page-head h3 {
  margin: 0; font-family: var(--sans);
  font-size: .85rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--navy-ink);
}
.wf-page-meta { font-size: .75rem; color: var(--muted); }
.wf-page-close {
  background: transparent; border: 0; cursor: pointer;
  color: var(--muted); font-size: 1.1rem; line-height: 1; padding: 0 4px;
}
.wf-page-close:hover { color: var(--danger); }

.wf-page-body {
  flex: 1; padding: 14px 16px;
  font-family: var(--serif);
  font-size: .98rem; line-height: 1.55;
  color: var(--navy-ink);
  white-space: pre-wrap; word-wrap: break-word;
  min-height: 260px;
}
.wf-page-readonly {
  background: var(--paper); border: 0;
}
.wf-page-editor {
  border: 0; outline: 0; resize: vertical;
  background: #fff;
  width: 100%; box-sizing: border-box;
}
.wf-page-editor:focus { outline: 2px solid var(--blue-100); outline-offset: -2px; }
.wf-page-editor[readonly] { background: var(--paper); cursor: default; }

.wf-page-foot {
  padding: 6px 14px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  border-radius: 0 0 6px 6px;
  font-size: .75rem; color: var(--muted);
}

.wf-page-add {
  background: var(--paper); border: 1px dashed var(--line);
  border-radius: 6px; padding: 14px; text-align: center;
  font-size: .9rem;
}

.wf-ws-rail {
  position: sticky; top: 140px;
  display: flex; flex-direction: column; gap: 16px;
}

.wf-ic-section { padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.wf-ic-section h4 {
  font-family: var(--sans); margin: 0 0 6px;
  font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--navy-ink);
  display: flex; align-items: center; gap: 8px;
}
.rail-count { background: var(--blue-50); color: var(--blue-strong); font-size: .7rem; padding: 1px 7px; border-radius: 10px; }
.rail-help { font-size: .8rem; color: var(--muted); margin: 0 0 8px; }
.wf-ic-new-btn { margin-bottom: 10px; }
.wf-ic-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wf-ic-row {
  background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
  padding: 8px 10px;
}
.wf-ic-row.resolved { opacity: 0.6; }
.wf-ic-anchor { font-size: .78rem; color: var(--blue-strong); font-style: italic; margin-bottom: 4px; }
.wf-ic-body { font-size: .88rem; line-height: 1.45; color: var(--navy-ink); }
.wf-ic-meta { font-size: .72rem; color: var(--muted); margin-top: 3px; }
.wf-ic-reply { margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--line); }
.wf-ic-actions { display: flex; gap: 6px; margin-top: 6px; }
.wf-ic-actions .btn-ghost { font-size: .75rem; padding: 3px 8px; }
.wf-ic-resolved summary { font-size: .8rem; color: var(--muted); cursor: pointer; margin-top: 10px; }

/* Phase 2: recommended sources + scratch panels in the right rail. */
.wf-rec-section, .wf-scratch-section {
  padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 6px;
}
.wf-rec-section h4, .wf-scratch-section h4 {
  font-family: var(--sans); margin: 0 0 6px;
  font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--navy-ink);
  display: flex; align-items: center; gap: 8px;
}
.wf-rec-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wf-rec-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
  padding: 8px 10px;
}
.wf-rec-open {
  background: transparent; border: 0; padding: 0; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
}
.wf-rec-name {
  font-family: var(--sans); font-size: .85rem; font-weight: 600;
  color: var(--navy-ink); line-height: 1.3;
}
.wf-rec-name:hover { color: var(--blue-strong); }
.wf-rec-meta { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.wf-rec-why { font-size: .76rem; font-style: italic; line-height: 1.3; margin-top: 2px; }
.wf-rec-cite { font-size: .75rem; padding: 3px 8px; align-self: start; }

.wf-scratch-textarea {
  width: 100%; box-sizing: border-box;
  font-family: var(--sans); font-size: .85rem; line-height: 1.45;
  border: 1px solid var(--line); border-radius: 4px;
  padding: 8px 10px; background: var(--paper);
  resize: vertical;
}
.wf-scratch-textarea:focus { outline: 2px solid var(--blue-100); outline-offset: -1px; background: #fff; }
.wf-scratch-foot { margin-top: 4px; text-align: right; }

/* Phase 3: AI proposal panel + diff renderer. */
.wf-prop-section { padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.wf-prop-section h4 {
  font-family: var(--sans); margin: 0 0 6px;
  font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--navy-ink);
  display: flex; align-items: center; gap: 8px;
}
.wf-prop-regen-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.wf-prop-detail {
  border: 1px solid var(--blue-100); border-radius: 6px;
  padding: 10px 12px; background: #fcfdff;
  margin-top: 8px;
}
.wf-prop-head { margin-bottom: 8px; }
.wf-prop-head h5 { margin: 0; font-size: .85rem; font-family: var(--sans); color: var(--navy-ink); font-weight: 600; }
.wf-prop-sub { font-size: .72rem; color: var(--muted); }
.wf-prop-diff {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem; line-height: 1.45;
  max-height: 280px; overflow: auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
  padding: 6px 8px;
}
.wf-diff-row { display: flex; gap: 4px; padding: 1px 0; white-space: pre-wrap; word-wrap: break-word; }
.wf-diff-sigil { color: var(--muted); flex-shrink: 0; user-select: none; }
.wf-diff-text { flex: 1; }
.wf-diff-add { background: #e6f4ea; }
.wf-diff-add .wf-diff-sigil { color: #1a5e1a; }
.wf-diff-del { background: #fdecea; text-decoration: line-through; }
.wf-diff-del .wf-diff-sigil { color: #842; }
.wf-diff-eq { color: var(--muted); }

.wf-prop-edit-wrap { margin-top: 8px; }
.wf-prop-edit-wrap summary { font-size: .8rem; color: var(--muted); cursor: pointer; }
.wf-prop-edit {
  width: 100%; box-sizing: border-box;
  font-family: var(--sans); font-size: .85rem;
  border: 1px solid var(--line); border-radius: 4px;
  padding: 6px 8px; background: #fff;
  margin-top: 6px;
}
.wf-prop-save { margin-top: 6px; font-size: .75rem; padding: 3px 10px; }

.wf-prop-actions { display: flex; gap: 8px; margin-top: 10px; }
.wf-prop-actions .btn-primary, .wf-prop-actions .btn-ghost { font-size: .8rem; padding: 4px 10px; }
.wf-prop-foot { margin-top: 8px; font-size: .7rem; }

/* ============================================================================
   ADR 0036 v3 (revised 2026-06-27 after feedback_references_are_principles) -
   Document workspace in Altio editorial. Replaces the v2 teal/paper/chevron
   PSUR aesthetic. Layout: editorial canvas (center) + collapsible right panel
   (navy header). Sections sit as hairline-ruled blocks; AI panel opens via a
   quiet inline "Ask AI" link on each section header. The universal diff-preview
   rule (ADR 0038): every proposed change shows additions + deletions explicitly
   before approve, including each cascaded dependent-refresh.
   ============================================================================ */

.docws {
  --rule: #d8d1c4;
  --paper: #fdfbf7;
  --ink: var(--navy-ink);
  --muted: #5d6b7b;
  --navy: var(--navy);
  --navy-hover: #14253c;
  --blue: var(--blue);
  --sage-ins: #ecf2e9;
  --sage-ins-border: #b6caaa;
  --red-del: #f7e6e1;
  --red-del-border: #d6a99c;

  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: calc(100vh - 88px);
  background: var(--paper);
  margin: -24px;
  font-family: var(--sans);
  color: var(--ink);
}
.docws.rp-open  { grid-template-columns: minmax(0, 1fr) min(480px, 40vw); }
.docws.rp-closed { grid-template-columns: minmax(0, 1fr) 28px; }

/* Phone + small tablet: workspace becomes single-column. The AI panel
   takes over the whole viewport when opened so the user is not forced
   to read prose through a 192px column. */
@media (max-width: 767px) {
  .docws,
  .docws.rp-open,
  .docws.rp-closed {
    grid-template-columns: 1fr;
  }
  .docws .docws-rp {
    position: fixed;
    inset: 0;
    z-index: 180;
    background: var(--paper);
    border-left: 0;
  }
  .docws.rp-closed .docws-rp { display: none; }
  .docws .docws-rp-toggle {
    position: absolute;
    top: 8px; right: 8px; left: auto;
  }
  /* Tighten main padding on phone so the document body uses more screen. */
  .docws-main {
    padding: 14px 16px 60px;
  }
}

/* The v2 teal left rail is dropped: the topbar covers navigation. */
.docws-nav { display: none; }

/* ----- Main canvas (editorial paper) ----- */
.docws-main {
  display: flex; flex-direction: column;
  padding: 18px 28px 60px;
  min-width: 0;
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
}
.docws-doc-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px;
  margin-bottom: 6px;
}
.docws-doc-back {
  background: transparent; color: var(--blue);
  border: 0; padding: 0;
  font: inherit; font-size: .85rem;
  cursor: pointer;
}
.docws-doc-back:hover { color: var(--navy); text-decoration: underline; }
.docws-doc-title {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--serif);
  font-size: 1.55rem; font-weight: 500;
  color: var(--ink);
  letter-spacing: -.012em;
}
.docws-doc-name { letter-spacing: -.012em; }
.docws-doc-meta {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--muted);
  margin: 0 0 22px;
}
.docws-doc-meta-sep { margin: 0 8px; color: #b9b6ac; }
.docws-details-btn {
  background: transparent; color: var(--navy);
  border: 1px solid var(--rule); border-radius: 4px;
  padding: 4px 10px; font-size: .78rem;
  font-family: var(--sans);
  cursor: pointer;
}
.docws-details-btn:hover { background: #f3eee2; }

/* Keep the .docws-paper class for back-compat with the JS markup. No card. */
.docws-paper {
  background: transparent;
  padding: 0;
  box-shadow: none;
  flex: 1;
  min-width: 0;
  position: relative;
}
.docws-paper-date { display: none; }
.docws-paper-eyebrow {
  margin: 0 0 4px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  text-align: left;
}
.docws-paper-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 4px 0 32px;
}

/* ----- Sections (hairline-separated, no cards) ----- */
.docws-section {
  position: relative;
  padding: 18px 0 22px;
}
.docws-section + .docws-section { border-top: 1px solid var(--rule); }
.docws-section-brief { padding: 12px 0 24px; }
.docws-section-brief + .docws-section { border-top: 1px solid var(--rule); }
.docws-section-eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--muted);
  margin-bottom: 6px;
}
/* The v2 chevron is replaced by an inline "Ask AI" link in the section head. */
.docws-chev { display: none; }
.docws-section-locked .docws-ask-ai { display: none; }

.docws-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.docws-section-title {
  flex: 1;
  background: transparent;
  border: 0; outline: 0;
  font-family: var(--serif);
  font-size: 1.18rem; font-weight: 500;
  letter-spacing: -.005em;
  color: var(--ink);
  padding: 2px 0;
  border-bottom: 1px solid transparent;
}
.docws-section-title:hover, .docws-section-title:focus {
  border-bottom-color: var(--rule);
}
.docws-section-title-static {
  font-family: var(--serif);
  font-size: 1.18rem; font-weight: 500;
  color: var(--ink);
}
.docws-section-actions {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: .82rem;
}
.docws-deps-chip {
  background: transparent; color: var(--muted);
  font-family: var(--sans);
  font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 0;
}
.docws-deps-chip::before { content: "depends on "; }
.docws-ask-ai {
  background: transparent;
  color: var(--blue);
  border: 0; padding: 0;
  font: inherit; font-size: .85rem; font-weight: 500;
  cursor: pointer;
}
.docws-ask-ai:hover { color: var(--navy); text-decoration: underline; }
.docws-ask-ai.active { color: var(--muted); cursor: default; text-decoration: none; }
.docws-section-menu {
  background: transparent; border: 0;
  color: var(--muted); cursor: pointer;
  font: inherit; padding: 2px 4px;
  border-radius: 3px;
}
.docws-section-menu:hover { background: #f3eee2; color: var(--ink); }

.docws-section-body {
  width: 100%; box-sizing: border-box;
  font-family: var(--sans);
  font-size: .95rem; line-height: 1.62;
  color: var(--ink);
  background: transparent;
  border: 0; outline: 0;
  padding: 0;
  white-space: pre-wrap; word-wrap: break-word;
  resize: none;
  min-height: 70px;
}
.docws-section-body:focus { outline: none; }
.docws-section-readonly { min-height: 0; }
.docws-section-foot {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: .72rem;
  color: var(--muted);
}

.docws-add-section {
  margin-top: 32px;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  text-align: left;
}
.docws-add-btn {
  background: transparent;
  color: var(--blue);
  border: 0; padding: 0;
  font: inherit; font-size: .9rem;
  cursor: pointer;
}
.docws-add-btn:hover { color: var(--navy); text-decoration: underline; }

/* The v2 zoom toolbar is dropped: PSUR chrome with no purpose here. */
.docws-zoom { display: none; }

.docws-footer-actions {
  display: flex; gap: 12px; justify-content: flex-end;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

/* ----- Right panel (AI workbench, navy header on cool paper) ----- */
.docws-rp {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  border-left: 1px solid var(--rule);
  overflow: hidden;
}
.docws.rp-closed .docws-rp { background: transparent; }
.docws.rp-closed .docws-rp-content { display: none; }
.docws-rp-toggle {
  position: absolute;
  top: 14px; left: -14px;
  width: 28px; height: 28px;
  background: var(--navy);
  color: #fff;
  border: 0; border-radius: 50%;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 600; font-size: .8rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  z-index: 5;
}
.docws-rp-toggle:hover { background: var(--navy-hover); }

.docws-rp-content {
  display: flex; flex-direction: column;
  height: 100%;
  background: var(--paper);
}
.docws-rp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  background: var(--navy);
  color: #fff;
  flex-shrink: 0;
}
.docws-rp-head-title {
  font-family: var(--sans);
  font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
}
.docws-rp-head-scope {
  font-family: var(--serif); font-style: italic;
  font-size: .92rem; font-weight: 500;
  text-transform: none; letter-spacing: 0;
  display: block; margin-top: 2px;
  color: #d6e0ec;
}
.docws-rp-back {
  background: transparent;
  color: #fff;
  border: 0; cursor: pointer;
  font: inherit; font-size: .85rem;
  padding: 0;
}
.docws-rp-back:hover { text-decoration: underline; }
.docws-rp-head-icons { display: inline-flex; gap: 4px; }
.docws-rp-icon {
  background: transparent; color: #fff;
  border: 0; padding: 4px 6px;
  border-radius: 3px; cursor: pointer;
  font: inherit; font-size: .9rem; line-height: 1;
}
.docws-rp-icon:hover { background: rgba(255, 255, 255, .12); }

.docws-rp-top {
  flex: 1;
  overflow: auto;
  background: var(--paper);
  padding: 18px 20px 14px;
  color: var(--ink);
}
.docws-rp-bottom {
  position: relative;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: 14px 20px 18px;
  color: var(--ink);
}
.docws-rp-pullup { display: none; }

/* ---- Sources stack (right panel top) ---- */
.docws-sources-browser { display: flex; flex-direction: column; gap: 12px; }
.docws-sources-stack-title {
  font-family: var(--sans);
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted);
}
.docws-sources-toolbar {
  position: relative;
  display: flex; align-items: center; gap: 8px;
}
.docws-sources-search {
  flex: 1;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 6px 12px;
  background: #fff;
  font: inherit;
  font-size: .85rem;
  color: var(--ink);
}
.docws-sources-search:focus { outline: 2px solid var(--blue); outline-offset: -2px; }
.docws-sources-filter {
  background: transparent; color: var(--muted);
  border: 1px solid var(--rule);
  border-radius: 4px;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.docws-sources-filter.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.docws-sources-filter-pop {
  position: absolute;
  top: 36px; right: 0;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 8px 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
  z-index: 10;
  min-width: 180px;
}
.docws-sources-filter-row {
  display: flex; align-items: center; gap: 6px;
  font-size: .82rem; padding: 3px 0;
  cursor: pointer;
}
.docws-sources-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.docws-sources-row {
  display: grid; grid-template-columns: 1fr auto; gap: 8px;
  align-items: baseline;
  border-bottom: 1px solid var(--rule);
  padding: 10px 0;
}
.docws-sources-row:last-child { border-bottom: 0; }
.docws-sources-open {
  background: transparent; border: 0; padding: 0;
  text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
}
.docws-sources-name {
  font-family: var(--serif);
  font-size: .98rem; font-weight: 500;
  font-style: italic;
  color: var(--ink); line-height: 1.3;
}
.docws-sources-open:hover .docws-sources-name { color: var(--navy); }
.docws-sources-meta {
  font-family: var(--sans);
  font-size: .68rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
}
.docws-sources-cite {
  background: transparent; color: var(--blue);
  border: 0; padding: 0; font: inherit; font-size: .82rem;
  cursor: pointer;
}
.docws-sources-cite:hover { color: var(--navy); text-decoration: underline; }
.docws-sources-empty { color: var(--muted); font-style: italic; font-size: .85rem; text-align: center; padding: 20px 0; }

/* ---- Source viewer (right panel) ---- */
.docws-source-view { display: flex; flex-direction: column; gap: 8px; }
.docws-source-back {
  background: transparent; color: var(--blue);
  border: 0; padding: 0; font: inherit; font-size: .82rem;
  text-align: left; cursor: pointer;
  align-self: flex-start;
}
.docws-source-back:hover { color: var(--navy); text-decoration: underline; }
.docws-source-view h4 { margin: 4px 0 0; font-family: var(--serif); font-style: italic; font-size: 1rem; font-weight: 500; }
.docws-source-meta { font-family: var(--sans); font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.docws-source-content {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem; line-height: 1.55;
  white-space: pre-wrap;
  max-height: 60vh; overflow: auto;
  color: var(--ink);
}

/* ---- Section editor / generate (right panel bottom) ---- */
.docws-section-editor { display: flex; flex-direction: column; gap: 10px; }
.docws-section-editor-head h4 {
  margin: 0;
  font-family: var(--sans);
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted);
}
.docws-prompt {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 8px 10px;
  background: #fff;
  font: inherit;
  font-size: .9rem;
  color: var(--ink);
  resize: vertical;
  min-height: 80px;
}
.docws-prompt:focus { outline: 2px solid var(--blue); outline-offset: -2px; }
.docws-prompt-actions { display: flex; justify-content: flex-end; }
.docws-prompt-actions .btn-primary {
  background: var(--navy); color: #fff; border: 0;
  border-radius: 4px; padding: 7px 16px;
  font: inherit; font-size: .85rem; font-weight: 500;
  cursor: pointer;
}
.docws-prompt-actions .btn-primary:hover { background: var(--navy-hover); }
.docws-prompt-actions .btn-primary:disabled { background: #93a8b6; cursor: wait; }

/* ---- Proposal preview with universal diff (ADR 0038) ---- */
.docws-proposal-view {
  display: flex; flex-direction: column; gap: 12px;
}
.docws-prop-accept { display: none; }
.docws-prop-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 14px 16px;
}
.docws-prop-card h4 {
  margin: 0 0 4px;
  font-family: var(--sans);
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted);
}
.docws-prop-card-sub {
  display: block; margin-top: 2px;
  font-family: var(--serif); font-style: italic;
  font-weight: 500; font-size: 1rem;
  text-transform: none; letter-spacing: 0;
  color: var(--ink);
}
.docws-diff {
  margin: 10px 0 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .82rem; line-height: 1.55;
  white-space: pre-wrap; word-wrap: break-word;
  background: #fafaf6;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 10px 12px;
  max-height: 280px; overflow: auto;
  color: var(--ink);
}
.docws-diff-line { display: block; padding: 0 4px; }
.docws-diff-ins {
  background: var(--sage-ins);
  border-left: 3px solid var(--sage-ins-border);
}
.docws-diff-ins::before { content: "+ "; color: #3d6d22; font-weight: 700; }
.docws-diff-del {
  background: var(--red-del);
  border-left: 3px solid var(--red-del-border);
  text-decoration: line-through;
  color: #7a3a2a;
}
.docws-diff-del::before { content: "- "; color: #7a3a2a; font-weight: 700; }
.docws-diff-ctx { color: var(--muted); }
.docws-diff-ctx::before { content: "  "; }
.docws-diff-empty {
  color: var(--muted); font-style: italic;
  text-align: center; padding: 10px;
}
.docws-prop-edit-label {
  font-family: var(--sans);
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted);
  margin: 4px 0 4px;
}
.docws-prop-body {
  width: 100%; box-sizing: border-box;
  border: 1px solid var(--rule); border-radius: 4px;
  background: #fff;
  font-family: var(--sans);
  font-size: .9rem; line-height: 1.55;
  color: var(--ink);
  padding: 8px 10px;
  resize: vertical;
  min-height: 140px;
}
.docws-prop-body:focus { outline: 2px solid var(--blue); outline-offset: -2px; }
.docws-prop-foot {
  margin-top: 6px;
  font-family: var(--sans);
  font-size: .7rem;
  color: var(--muted);
}
.docws-prop-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 4px;
}
.docws-prop-actions .btn-primary {
  background: var(--navy); color: #fff; border: 0;
  border-radius: 4px; padding: 7px 16px;
  font: inherit; font-size: .85rem; font-weight: 500;
  cursor: pointer;
}
.docws-prop-actions .btn-primary:hover { background: var(--navy-hover); }
.docws-prop-actions .btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 4px;
  padding: 6px 14px; font: inherit; font-size: .85rem;
  cursor: pointer;
}
.docws-prop-actions .btn-ghost:hover { background: #f3eee2; }

/* Dependent-refresh queue indicator (sequential review per ADR 0038) */
.docws-dep-queue {
  font-family: var(--sans);
  font-size: .72rem;
  color: var(--muted);
  padding: 4px 8px;
  background: #f3eee2;
  border-radius: 3px;
  display: inline-block;
  margin-bottom: 10px;
}

/* ---- Done success (compact, no smiley) ---- */
.docws-success-modal {
  border: 0; padding: 0;
  background: transparent;
  width: min(420px, 90vw);
}
.docws-success-modal::backdrop { background: rgba(14, 28, 45, .55); }
.docws-success-inner {
  background: var(--paper);
  padding: 28px 32px 32px;
  border-radius: 6px;
  font-family: var(--sans);
  text-align: left;
}
.docws-success-inner h2 {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 1.35rem; font-weight: 500;
  color: var(--ink);
}
.docws-success-inner p { margin: 0 0 20px; font-size: .92rem; color: var(--ink); line-height: 1.5; }
.docws-success-icon { display: none; }
.docws-success-ok {
  background: var(--navy); color: #fff;
  border: 0; border-radius: 4px;
  padding: 8px 20px; font: inherit; font-weight: 500;
  cursor: pointer;
}
.docws-success-ok:hover { background: var(--navy-hover); }

/* ---- Dependents review modal (sequential per ADR 0038) ---- */
.docws-deps-modal {
  border: 0; padding: 0;
  background: transparent;
  width: min(520px, 92vw);
}
.docws-deps-modal::backdrop { background: rgba(14, 28, 45, .55); }
.docws-deps-inner {
  position: relative;
  background: var(--paper);
  padding: 28px 32px;
  border-radius: 6px;
  font-family: var(--sans);
}
.docws-deps-close {
  position: absolute; top: 12px; right: 14px;
  background: transparent; border: 0;
  font-size: 1.1rem; cursor: pointer;
  color: var(--muted);
}
.docws-deps-close:hover { color: var(--ink); }
.docws-deps-inner h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 1.2rem; font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
}
.docws-deps-inner > p {
  margin: 0 0 18px;
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.5;
}
.docws-deps-list { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; }
.docws-deps-row {
  border-bottom: 1px solid var(--rule);
  padding: 10px 0;
}
.docws-deps-row:last-child { border-bottom: 0; }
.docws-deps-row label {
  display: flex; align-items: flex-start; gap: 10px;
  cursor: pointer;
  color: var(--ink);
  font-size: .92rem;
  line-height: 1.4;
}
.docws-deps-row label .muted { color: var(--muted) !important; font-size: .78rem; }
.docws-dep-check { margin-top: 3px; }
.docws-deps-actions { display: flex; justify-content: flex-end; gap: 10px; }
.docws-deps-skip {
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 4px;
  padding: 8px 16px; font: inherit; font-size: .9rem;
  cursor: pointer;
}
.docws-deps-skip:hover { background: #f3eee2; }
.docws-deps-submit {
  background: var(--navy); color: #fff;
  border: 0; border-radius: 4px;
  padding: 8px 18px;
  font: inherit; font-size: .9rem; font-weight: 500;
  cursor: pointer;
}
.docws-deps-submit:hover { background: var(--navy-hover); }

/* ============================================================================
   Requests home in 4 lanes (Safety assessments / Committee packs / HA RFIs /
   Ad-hoc). Editorial: small-caps Inter kickers in navy, hairline separators,
   no card backgrounds. The 6px navy dot marks rows that need THIS viewer's
   action. Recently-signed is intentionally absent here; signed history lives
   on each medicine's medical record.
   Responsive: 4 cols >=1280px, 2x2 grid 720-1280px, 1 col <720px.
   ============================================================================ */

.wf-lanes-home {
  max-width: 1500px;
  margin: 0 auto;
  padding: 18px 20px 40px;
  font-family: var(--sans);
  color: var(--navy-ink);
  background: var(--paper);
  min-height: calc(100vh - 88px);
}
.wf-lanes-header { margin-bottom: 18px; max-width: 720px; }
.wf-lanes-header .eyebrow {
  font-family: var(--sans);
  font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted);
  margin: 0;
}
.wf-lanes-header h1 {
  margin: 6px 0 6px;
  font-family: var(--serif);
  font-size: 1.7rem; font-weight: 500;
  letter-spacing: -.01em;
  color: var(--navy-ink);
}
.wf-lanes-lede {
  margin: 0;
  font-size: .94rem;
  color: var(--muted);
  line-height: 1.5;
}

.wf-lanes-grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 1279px) {
  .wf-lanes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .wf-lanes-grid { grid-template-columns: 1fr; }
}

.wf-lane {
  border-left: 1px solid var(--line);
  padding: 16px 16px 22px;
  display: flex; flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.wf-lane:first-child { border-left: 0; }
@media (max-width: 1279px) {
  .wf-lane:nth-child(2n+1) { border-left: 0; }
  .wf-lane:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 719px) {
  .wf-lane { border-left: 0; }
  .wf-lane + .wf-lane { border-top: 1px solid var(--line); }
}

.wf-lane-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 4px;
}
.wf-lane-head-text { min-width: 0; }
.wf-lane-title {
  margin: 0;
  font-family: var(--sans);
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--navy);
}
.wf-lane-sub {
  margin: 3px 0 0;
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--muted);
  font-style: italic;
}
.wf-lane-new {
  background: transparent;
  color: var(--blue);
  border: 0; padding: 0;
  font: inherit; font-size: .82rem;
  cursor: pointer;
  white-space: nowrap;
}
.wf-lane-new:hover { color: var(--navy); text-decoration: underline; }

.wf-lane-bucket {
  display: flex; flex-direction: column;
  gap: 6px;
}
.wf-bucket-title {
  margin: 0;
  font-family: var(--sans);
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted);
  display: flex; align-items: center; gap: 8px;
}
.wf-bucket-title.wf-bucket-on-you { color: var(--navy-ink); }
.wf-bucket-title.wf-bucket-on-you::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--navy);
  flex-shrink: 0;
}
.wf-bucket-count {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-weight: 500;
  color: var(--muted);
  font-size: .68rem;
}

.wf-lane-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
.wf-lane-row {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  display: flex; align-items: flex-start; gap: 10px;
}
.wf-lane-row:first-child { border-top: 0; padding-top: 6px; }
.wf-row-open {
  flex: 1; min-width: 0;
  background: transparent; border: 0; padding: 0;
  text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
}
.wf-row-title {
  font-family: var(--serif);
  font-size: .98rem; font-weight: 500;
  font-style: italic;
  color: var(--navy-ink);
  line-height: 1.32;
  letter-spacing: -.005em;
}
.wf-row-open:hover .wf-row-title { color: var(--navy); }
.wf-row-meta {
  font-family: var(--sans);
  font-size: .72rem;
  color: var(--muted);
  line-height: 1.35;
}
.wf-lane-pick {
  background: transparent;
  color: var(--blue);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 3px 10px;
  font: inherit; font-size: .74rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.wf-lane-pick:hover { background: var(--blue-50); color: var(--navy); border-color: var(--blue); }
.wf-lane-empty {
  margin: 4px 0 0;
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--muted);
  font-style: italic;
}

.wf-lanes-footer-link {
  margin: 28px 0 0;
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--muted);
  text-align: right;
}
.wf-lanes-footer-link a {
  color: var(--blue);
  text-decoration: none;
}
.wf-lanes-footer-link a:hover { color: var(--navy); text-decoration: underline; }


/* ============================================================================
   Admin console (per-tenant). User roster + tenant metadata. Editorial
   styling: navy eyebrow, paper-stock background already inherited from
   .view, hairline divider above the user table.
   ============================================================================ */

#view-admin .admin-tenant-card {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 18px 0;
  margin: 12px 0 24px;
}
#view-admin .admin-tenant-card h2 {
  font-family: var(--editorial, "Tiempos", Georgia, serif);
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 12px;
  color: var(--navy);
}
#view-admin .admin-meta {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 6px 16px;
  margin: 0;
}
#view-admin .admin-meta dt {
  color: var(--ink-soft);
  font-size: 13px;
}
#view-admin .admin-meta dd {
  margin: 0;
  font-size: 14px;
  color: var(--ink);
  word-break: break-all;
}
#view-admin .admin-section-h {
  font-family: var(--editorial, "Tiempos", Georgia, serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--navy);
  margin: 24px 0 12px;
}
#view-admin .role-chip {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--paper-soft, #f6f4ef);
  color: var(--navy);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

/* ============================================================================
   A11y focus-ring rescue (2026-06-27, B3 consolidation).

   Many older rules in this stylesheet set `outline: none` on `:focus` to
   suppress the mouse-click outline. That defeats keyboard a11y because it
   also suppresses the keyboard `:focus-visible` ring. These rules bring
   back the editorial focus ring (2px navy-blue, 2px offset) for keyboard
   focus on every interactive element, overriding any per-element
   suppressor. Mouse focus stays clean; keyboard users see the ring.
   ============================================================================ */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--blue) !important;
  outline-offset: 2px !important;
}