/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  --navy:       #1b3a5c;
  --navy-dark:  #122840;
  /* #0072ce measured 4.429:1 on --bg and 4.313:1 on --blue-light (#428) --
     both below the 4.5 AA floor for the normal-size text that uses this token
     (a status pill, an active nav link). It clears AA on --surface already
     (4.886:1), and it never renders as text on --navy anywhere on the site --
     every navy surface pairs with white text instead -- so darkening only
     moves ratios up. #006dc6 is the minimal darkening that clears BOTH
     failing pairs (4.756 on --bg, 4.631 on --blue-light), confirmed against
     the rendered token, not just the ratio: it reads as the same brand blue. */
  --blue:       #006dc6;
  --blue-light: #e8f2fc;
  /* #00857c measured 4.097:1 on --bg (#428) -- below the 4.5 AA floor for the
     12px/700 text that uses it there. It already clears AA on --surface
     (4.520:1, barely) and, like --blue, is never used as text on --navy.
     #007c73 is the minimal darkening that clears --bg (4.609:1) while reading
     as the same brand teal. */
  --teal:       #007c73;
  --bg:         #f1f4f8;
  --surface:    #ffffff;
  --text:       #1a202c;
  /* Muted text is read on --bg as often as on --surface, and --bg is the
     harder background. #64748b cleared AA on white (4.76:1) but not on --bg
     (4.31:1), which is where the Research Projects caveat actually sits --
     measured from the rendered page, not the declared token (#410). This is
     the minimal darkening that clears 4.5:1 on BOTH (4.50 on --bg, 4.97 on
     --surface). Lighten it and 12px body text stops meeting AA. */
  --muted:      #617188;
  --border:     #dde3ec;
  --radius:     8px;
  --radius-lg:  12px;
  --shadow:     0 1px 3px rgba(27,58,92,.07), 0 4px 16px rgba(27,58,92,.06);
  --shadow-hover: 0 4px 16px rgba(27,58,92,.12), 0 8px 32px rgba(27,58,92,.09);
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-sans:  'Segoe UI', system-ui, -apple-system, sans-serif;
  --sidebar-w:  260px;
  --header-h:   56px;
}

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Site header ─────────────────────────────────────────────────────────────  */
.site-logo-bar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 8px 24px;
  display: flex;
  align-items: center;
}
.site-logo-bar img {
  height: 48px;
  width: auto;
  display: block;
}
/* The header WRAPS, at every width (#339).
 *
 * It was a nowrap row with a pinned height, and a nowrap row has exactly one way
 * to handle content it cannot fit: push it out of view. Measured at 1280px with
 * a superadmin session, its min-content width was 1682px — so 402px of it,
 * including the role chip and Sign out, was unreachable on every page. The
 * clipping was not a long-name artifact; the shortest name any account renders
 * overflowed too.
 *
 * `min-height` rather than `height`, because a second row has to be able to make
 * the band taller. On a wide screen nothing wraps and the header is the same
 * 56px band it has always been.
 *
 * This arrangement already existed below 860px, which is the whole story of the
 * defect: the one layout that cannot clip was reserved for the width nobody had
 * reported.
 *
 * Deliberately redundant with `.site-nav`'s own wrap below. Measured at 1280px,
 * either one alone brings the overflow to zero and they produce different
 * headers — this one keeps the nav on a single line and moves the session block
 * to its own row; the nav's own keeps the session in place and stacks the nav.
 * Removing BOTH puts 88px back over the edge. Both are kept because they fail at
 * different widths: a viewport narrower than the nav needs the nav's rule, and a
 * nav wider than the row needs this one. */
.site-header {
  background: var(--navy);
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 24px;
  /* Column gap unchanged; the row gap is what a wrapped session block sits on. */
  gap: 6px 32px;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
.site-header .site-title {
  font-family: var(--font-serif);
  font-size: 17px;
  color: #fff;
  font-weight: normal;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.site-header .site-title span {
  opacity: .6;
  font-size: 13px;
  margin-left: 8px;
  font-family: var(--font-sans);
  letter-spacing: 0;
}
.site-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.site-nav a {
  color: rgba(255,255,255,.8);
  font-size: 13px;
  padding: 6px 14px;
  /* A label breaks BETWEEN destinations, never inside one (#339). Left to wrap,
     "Research Landscape" stacked onto two lines and "Cross-Faculty View" onto
     three — which made the nav 78px tall and saved nothing: it was still 588px
     wide, because the longest word sets the floor either way. */
  white-space: nowrap;
  border-radius: var(--radius);
  transition: background 0.15s, color 0.15s;
}
.site-nav a:hover, .site-nav a.active {
  background: rgba(255,255,255,.12);
  color: #fff;
  text-decoration: none;
}

/* ── First-run banner (#626) ─────────────────────────────────────────────────  */
.first-run-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1280px;
  margin: 16px auto 0;
  padding: 12px 20px;
  background: var(--blue-light);
  border: 1.5px solid var(--blue);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
}
.first-run-banner[hidden] { display: none; }
.first-run-banner-link {
  color: var(--blue);
  font-weight: 600;
  white-space: nowrap;
}
.first-run-banner-dismiss {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
}
.first-run-banner-dismiss:hover { color: var(--text); }

/* ── Page shell ──────────────────────────────────────────────────────────────  */
.page-shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* ── Search bar ──────────────────────────────────────────────────────────────  */
.search-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  align-items: center;
}
.search-bar input, .search-bar select {
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 9px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-bar input { flex: 1; min-width: 200px; }
.search-bar input:focus, .search-bar select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,114,206,.12);
}
.search-bar select { cursor: pointer; }
.result-count {
  font-size: 13px;
  color: var(--muted);
  margin-left: auto;
  white-space: nowrap;
}

/* ── Faculty grid ────────────────────────────────────────────────────────────  */
.faculty-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.faculty-card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1.5px solid transparent;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
  cursor: pointer;
}
.faculty-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--blue-light);
  transform: translateY(-2px);
}
.faculty-card h3 {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: normal;
  color: var(--navy);
  line-height: 1.3;
}
.faculty-card h3 a { color: inherit; }
.faculty-card h3 a:hover { color: var(--blue); text-decoration: none; }
.card-meta {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.card-badge {
  background: var(--bg);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
}
.card-badge.badge-ok   { background: #e6f7f0; color: #1a7f4e; }
.card-badge.badge-warn { background: #fef3e2; color: #92550a; }
.card-badge.badge-miss { background: #fde8e8; color: #9b1c1c; }

/* A leadership designation (#171). Distinct from the three completeness
 * states, which are a traffic-light scale — this is not a better or worse
 * state, it is a different kind of fact, so it takes the site's own navy
 * rather than a rung on that scale. The badge always carries the designation's
 * text, so the colour is never what conveys it (CLAUDE.md). */
.card-badge.badge-leadership { background: var(--blue-light); color: var(--navy); }

/* ── Buttons ─────────────────────────────────────────────────────────────────
 * Promoted out of profile.css by #106: the profile page's collapse/expand pair
 * and the cross-faculty view's "load more" are the same control, and a second
 * copy of the rule is a divergence waiting to happen. Only the outline variant
 * exists; the source's primary/success variants drove editor and download
 * controls that are not part of this port.
 */
.btn {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn-outline:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.btn:disabled {
  cursor: default;
  opacity: 0.6;
}

/* ── Provenance ──────────────────────────────────────────────────────────────
 * Promoted out of profile.css by #106, for the same reason as .btn: both pages
 * render blocks through site/cv-render.js, so both emit these notes. The source
 * bundle carried no provenance, so there was nothing to show; the read path
 * does, and CLAUDE.md asks that a value carry where it came from. Shown only
 * where a block is not straight from the CV, so the note means something when
 * it appears.
 */
.provenance-note {
  font-size: 11px;
  color: var(--muted);
  margin: -4px 0 14px;
  font-style: italic;
}

/* ── Empty state ─────────────────────────────────────────────────────────────  */
.empty-state {
  text-align: center;
  padding: 64px 0;
  color: var(--muted);
  font-size: 15px;
}

/* ── Profile layout ──────────────────────────────────────────────────────────  */
.profile-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 860px) {
  .profile-layout { grid-template-columns: 1fr; }
  .profile-sidebar { position: static !important; }
}

/* ── Profile sidebar ─────────────────────────────────────────────────────────  */
.profile-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  max-height: calc(100vh - var(--header-h) - 40px);
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.sidebar-head {
  padding: 0 18px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.sidebar-head h2 {
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: normal;
  color: var(--navy);
  line-height: 1.35;
}
.sidebar-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.5;
}
/* #486. The generated-CV download, directly under the name. */
.profile-header-actions {
  margin: 8px 0 4px;
}
.profile-header-actions .btn {
  text-decoration: none;
  display: inline-block;
}

/* #486. The CV metadata block, directly under the name and the entry count.
   Same scale as .sidebar-meta because it is the same kind of fact; the first
   line carries the top margin so the block reads as one group. */
.sidebar-cv-meta {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.5;
}
.sidebar-cv-meta:first-of-type {
  margin-top: 6px;
}
.section-nav { list-style: none; padding: 4px 0; }
.section-nav li a {
  display: block;
  padding: 5px 18px;
  font-size: 12.5px;
  color: var(--muted);
  border-left: 2px solid transparent;
  transition: color 0.1s, border-color 0.1s, background 0.1s;
  line-height: 1.4;
}
.section-nav li a:hover,
.section-nav li a.active {
  color: var(--blue);
  border-left-color: var(--blue);
  background: var(--blue-light);
  text-decoration: none;
}

/* ── Profile content ─────────────────────────────────────────────────────────  */
.profile-content { min-width: 0; }
.profile-header {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 28px 32px;
  margin-bottom: 20px;
}
.profile-header h1 {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: normal;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.profile-header .meta-row {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* ── CV Sections ─────────────────────────────────────────────────────────────  */
.cv-section {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px 32px;
  margin-bottom: 16px;
  scroll-margin-top: calc(var(--header-h) + 20px);
}
.cv-section h2 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: normal;
  color: var(--navy);
  border-bottom: 2px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
}
.subsection-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 20px 0 8px;
}
.subsection-label:first-child { margin-top: 0; }
.group-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 14px 0 6px;
  padding: 3px 8px;
  background: var(--bg);
  border-radius: 4px;
  display: inline-block;
}

/* #673/#680: a CV sub-heading row (site/cv-render.js's headingText/row-heading
 * branch) -- structure, not a numbered publication or a table column. Same
 * weight/color family as .group-label, deliberately NOT the navy
 * `.cv-table thead th` treatment a real column header uses, and NOT
 * text-transform: uppercase -- the row's own text is already all-caps by the
 * classification rule that put it here (scripts/heading.py), so forcing it
 * again would be redundant rather than a real style choice. */
.row-heading {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin: 14px 0 6px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

/* ── Tables ──────────────────────────────────────────────────────────────────  */
.table-wrap {
  overflow-x: auto;
  margin-bottom: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.cv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: auto;
}
.cv-table thead th {
  background: var(--navy);
  color: rgba(255,255,255,.9);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 9px 12px;
  text-align: left;
  white-space: normal;
  max-width: 300px;
}
/* First column is usually a short year/status — shrink it to content width */
.cv-table th:first-child,
.cv-table td:first-child {
  width: 1%;
  white-space: nowrap;
}
.cv-table tbody tr:nth-child(even) { background: #f8fafc; }
.cv-table tbody tr:hover { background: var(--blue-light); }
.cv-table td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.5;
}
.cv-table tbody tr:last-child td { border-bottom: none; }

/* Grant section: title header — full-width navy banner per grant */
#grant_support .cv-table thead th.grant-title-th,
#grant_review  .cv-table thead th.grant-title-th {
  background: var(--navy);
  color: #fff;
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 12px;
  border-bottom: none;
  vertical-align: top;
  line-height: 1.5;
}
/* Fallback: old multi-column grant thead (non-title columns) */
#grant_support .cv-table thead th:not(.grant-title-th),
#grant_review  .cv-table thead th:not(.grant-title-th) {
  background: #dce8f4;
  color: var(--navy);
  text-transform: none;
  letter-spacing: normal;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.5;
}
#grant_support .cv-table td,
#grant_review  .cv-table td {
  color: var(--muted);
}
/* "Title of Project:" body rows also get navy highlight */
#grant_support .cv-table tr.grant-title-row td,
#grant_review  .cv-table tr.grant-title-row td {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
}

/* Teaching category sub-header rows (e.g. "UME Course Instruction…") */
.cv-table tr.cat-header-row td {
  background: #eef2f7;
  color: var(--navy);
  font-weight: 600;
  font-size: 12px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ── Bibliography list ───────────────────────────────────────────────────────  */
.bib-list {
  list-style: none;
  counter-reset: bib;
  padding: 0;
}
.bib-list li {
  counter-increment: bib;
  padding: 6px 0 6px 2.5em;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.6;
  position: relative;
}
.bib-list li:last-child { border-bottom: none; }
.bib-list li::before {
  content: counter(bib) ".";
  position: absolute;
  left: 0;
  color: var(--muted);
  font-size: 12px;
  min-width: 2em;
  text-align: right;
  padding-right: 6px;
}

/* ── Citation link badges ────────────────────────────────────────────────────  */
.cite-links { display: inline-flex; gap: 5px; margin-left: 8px; vertical-align: middle; flex-wrap: wrap; }
.cite-link {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
  line-height: 1.6;
}
.cite-link:hover { opacity: 0.8; text-decoration: underline; }
.cite-link.cite-pubmed { background: #e0f2e9; color: #166534; border-color: #bbf7d0; }
.cite-link.cite-doi    { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.cite-link.cite-url    { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }

/* ── Cross-section view ──────────────────────────────────────────────────────  */
.section-picker-bar {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px 24px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.section-picker-bar label {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
}
.section-picker-bar select {
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 8px 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  outline: none;
  flex: 1;
  min-width: 200px;
}
.section-picker-bar select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,114,206,.12);
}
.cross-faculty-entry {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px 28px;
  margin-bottom: 16px;
}
.cross-faculty-entry h3 {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: normal;
  color: var(--navy);
  margin-bottom: 12px;
}
.cross-faculty-entry h3 a { color: inherit; }
.cross-faculty-entry h3 a:hover { color: var(--blue); text-decoration: none; }
/* Paging control (#106). The cross-faculty view pages by faculty at 10 per
 * request, so this holds the "load more" button between pages and is empty on
 * the last one. */
.cross-more {
  display: flex;
  justify-content: center;
  margin: 8px 0 24px;
}

/* ── Back link / nav ─────────────────────────────────────────────────────────  */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}
.back-link:hover { color: var(--blue); text-decoration: none; }

/* ── Utility ─────────────────────────────────────────────────────────────────  */
.text-muted  { color: var(--muted); }
.text-small  { font-size: 12px; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.hidden { display: none !important; }

/* ── Responsive ──────────────────────────────────────────────────────────────  */
@media (max-width: 640px) {
  .page-shell { padding: 20px 16px 48px; }
  .cv-section { padding: 18px 16px; }
  .profile-header { padding: 20px 16px; }
  .cross-faculty-entry { padding: 16px; }
  .faculty-grid { grid-template-columns: 1fr; }
}

/* ── Session header (#103) ───────────────────────────────────────────────────
   Added to the ported stylesheet rather than shipped separately: the source
   header had no session state, because the source deployment had no sessions.
   Sits at the right of .site-header, after .site-nav.                        */
.site-session {
  display: flex;
  align-items: center;
  gap: 10px;
  /* A flex item defaults to min-width:auto and so refuses to shrink below its
     own content. Without this the session block widens the row instead of
     wrapping to the next one (#339). */
  min-width: 0;
  margin-left: 20px;
  padding-left: 20px;
  border-left: 1px solid rgba(255,255,255,.18);
  font-size: 12px;
  color: rgba(255,255,255,.8);
  white-space: nowrap;
}
.session-who { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
.session-role {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: rgba(255,255,255,.16);
  border-radius: 4px;
  padding: 2px 7px;
}
/* Both of these say what they mean in words. The muted colour is emphasis, not
   the message (CLAUDE.md: never colour alone). */
.session-note { color: rgba(255,255,255,.7); font-style: italic; }
.site-session .session-action {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── The account's own delegate id (#179) ─────────────────────────────────────
   A disclosure, not a field: 36 characters of hexadecimal in a header that is
   otherwise words. Closed it is one word wide; open it drops a panel BELOW the
   header rather than widening it, because .site-session is nowrap and an inline
   uuid would push the sign-out link off the end on a narrow window.           */
.session-delegate-id { position: relative; }
.session-delegate-id > summary {
  cursor: pointer;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  /* The default marker is a coloured triangle; the state is already carried by
     the panel being on screen or not, and by the element's own aria semantics
     (CLAUDE.md: never colour alone). */
  list-style: none;
}
.session-delegate-id > summary::-webkit-details-marker { display: none; }
.session-delegate-id > summary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.session-delegate-id[open] > .delegate-id-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  /* 36 characters plus padding: a uuid on one line. Narrower and it wraps
     mid-identifier, which reads like two values. */
  width: 42ch;
  white-space: normal;
  background: var(--surface);
  color: var(--text, #1f2937);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(18,40,64,.18);
  padding: 10px 12px;
}
.delegate-id-value {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  /* Selectable in one gesture: this value exists to be copied out. */
  user-select: all;
  word-break: break-all;
}
.delegate-id-note {
  margin: 8px 0 0;
  font-size: 11px;
  font-style: normal;
  color: var(--muted);
  line-height: 1.45;
}

/* ── "My Profiles", when there are several (#262) ─────────────────────────────
   Same shape as .session-delegate-id above and for the same reason: .site-session
   is nowrap, so one inline link per record pushed the sign-out control off the
   end once a delegate held more than a couple. Closed, this is one trigger
   whatever the count; open, the panel drops BELOW the header rather than
   widening it.

   Declarations are that disclosure's, not new chrome. Only the panel's sizing
   differs, because the content differs: a list of names rather than one uuid. */
.session-my-profiles { position: relative; }
.session-my-profiles > summary {
  cursor: pointer;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  /* The state is carried by the panel being on screen and by the element's own
     aria semantics, not by a coloured triangle (CLAUDE.md: never colour alone). */
  list-style: none;
}
.session-my-profiles > summary::-webkit-details-marker { display: none; }
.session-my-profiles > summary:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.session-my-profiles[open] > .my-profiles-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 30;
  /* Wide enough for a full "Last, First M., M.D., Ph.D." without wrapping every
     row, and capped so a thirty-record delegate gets a scrolling panel rather
     than a flyout running off the bottom of the viewport (#262). */
  width: 34ch;
  max-height: 60vh;
  overflow-y: auto;
  white-space: normal;
  background: var(--surface);
  color: var(--text, #1f2937);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(18,40,64,.18);
  padding: 6px;
}
.my-profiles-item {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius);
  color: var(--text, #1f2937);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.35;
}
.my-profiles-item:hover { background: var(--bg); }
.my-profiles-item:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

/* ── "Records you can edit" (#441) ────────────────────────────────────────────
   The landing an account with no owned record and one grant reaches instead of
   a dead end. Plain list chrome, reusing the surface/border/radius tokens the
   rest of the site uses -- this page has no reference counterpart to match, so
   it borrows rather than invents. */
/* This page's own title wrapper. NOT `.dash-header`, which #274 scoped to the
   dashboard and which a test pins to index.html alone -- a second user would
   quietly turn a page-scoped rule into a site-wide one. Same typography, its
   own class, following what projects.html does with `.proj-header-row`. */
.records-header h1 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: normal;
  color: var(--navy);
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}

.records-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin: 26px 0 10px;
}
.records-heading:first-child { margin-top: 0; }

.record-list { list-style: none; margin: 0; padding: 0; }

.record-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 8px;
}

.record-link {
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
}
.record-link:hover { text-decoration: underline; }
.record-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* The provenance line carries the whole of why a row is here, so it is text at
   readable contrast rather than a muted afterthought -- CLAUDE.md: colour never
   carries the meaning on its own. */
.record-provenance {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* Explicit, not an absence: a page rendering nothing is indistinguishable from
   a page that failed, and the account most likely to land here holding nothing
   is the one that was told it had access. */
.records-empty {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  text-align: center;
}
.records-empty-title { margin: 0; font-size: 15px; color: var(--text); }
.records-empty-hint {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

.records-note {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

/* ── Needs-attention queue (#585) ─────────────────────────────────────────────
   The delegate's own landing question -- "what needs me today" -- ahead of the
   plain lists above. Rows reuse `.record-item`/`.record-link` outright (same
   card, same link) and add only the state line beneath the name. */
.workspace-summary {
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.workspace-signals {
  margin: 6px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* A count is the signal; the colour underneath is decoration, never the only
   carrier of it (CLAUDE.md) -- both variants render a full sentence. */
.issue-badge {
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
}
.issue-badge--clean {
  background: var(--bg);
  color: var(--muted);
}
/* The site's one existing warning trio (site/style.css's `.fch-failure`,
   the failed-parse card), reused rather than a new colour invented for this
   page alone. */
.issue-badge--flagged {
  background: #fef2f2;
  color: #b91c1c;
}

.parse-flag {
  font-size: 12px;
  color: #b91c1c;
}

.record-updated {
  font-size: 12px;
  color: var(--muted);
}

/* The subtitle is 351px of the header's 1682px min-content — the largest single
   consumer, and the only one that is neither a destination nor a control (#339).
   It is the site's own name, so it is hidden by width rather than deleted: above
   this breakpoint the row has room for it and it renders exactly as before.

   1500px, not 1440px: the acceptance width is 1440, and a breakpoint sitting on
   the number it is meant to satisfy leaves no margin for a longer account name
   or a browser that rounds a device pixel the other way. */
@media (max-width: 1500px) {
  .site-header .site-title span { display: none; }
  /* The rule that separates the session block from the nav is a vertical line
     drawn on its left edge. That reads as a divider while the two share a row
     and as a stray mark once the block has wrapped onto its own — and below this
     width it usually has. The 32px column gap does the separating instead. */
  .site-session { margin-left: 0; padding-left: 0; border-left: none; }
}

@media (max-width: 860px) {
  /* Wrapping, the flexible height and the session block's chrome are all
     handled above now; what stays here is the narrow-screen spacing. */
  .site-header { gap: 8px; padding: 8px 16px; }
}

/* ── Shell placeholder ───────────────────────────────────────────────────────
   The landing shipped with the shell, replaced when the dashboard lands.      */
.shell-placeholder {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 32px 34px;
  max-width: 60ch;
}
.shell-placeholder h1 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: normal;
  color: var(--navy);
  margin-bottom: 12px;
}
.shell-placeholder p { margin-bottom: 10px; }
.shell-placeholder .muted { color: var(--muted); font-size: 13px; }

/* ── Assistant widget (#109) ───────────────────────────────────────────────
   Appended as one delimited block so it stays separable from the shell's
   styles, which are owned elsewhere. Every colour comes from the tokens above
   rather than the source widget's hardcoded hexes, so the widget follows the
   site's palette instead of carrying a second one. */

.fch-root { position: fixed; inset: auto 24px 24px auto; z-index: 900; }

.fch-button {
  position: relative; width: 52px; height: 52px; border-radius: 50%;
  background: var(--navy); color: #fff; border: none; cursor: pointer;
  font-size: 22px; box-shadow: var(--shadow-hover);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .18s;
}
.fch-button:hover { background: var(--navy-dark); transform: scale(1.06); }
.fch-button:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.fch-unread {
  position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px;
  padding: 0 4px; background: #dc2626; color: #fff; border-radius: 99px;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.fch-unread[hidden] { display: none; }

.fch-panel {
  position: absolute; bottom: 64px; right: 0;
  width: 390px; max-width: calc(100vw - 32px);
  height: 580px; max-height: calc(100vh - 140px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-hover);
  display: flex; flex-direction: column; overflow: hidden;
}
.fch-panel[hidden] { display: none; }

.fch-header {
  background: var(--navy); color: #fff; padding: 12px 14px;
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.fch-heading { flex: 1; font-size: 14px; font-weight: 600; }
.fch-heading small { display: block; font-size: 11px; font-weight: 400; opacity: .78; }
.fch-icon-button {
  background: none; border: none; color: #fff; cursor: pointer;
  font-size: 14px; opacity: .8; padding: 4px 6px; border-radius: var(--radius);
}
.fch-icon-button:hover { opacity: 1; background: rgba(255,255,255,.15); }
.fch-icon-button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

.fch-log {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}

.fch-message { max-width: 92%; font-size: 13px; line-height: 1.55; }
.fch-user {
  align-self: flex-end; background: var(--navy); color: #fff;
  padding: 9px 14px; border-radius: 14px 14px 4px 14px;
  white-space: pre-wrap; word-break: break-word;
}
.fch-assistant {
  align-self: flex-start; background: var(--bg); color: var(--text);
  padding: 10px 14px; border-radius: 14px 14px 14px 4px;
}
.fch-assistant p { margin: 0 0 6px; }
.fch-assistant p:last-child { margin: 0; }
.fch-assistant ul, .fch-assistant ol { margin: 4px 0 4px 18px; padding: 0; }
.fch-assistant li { margin: 3px 0; }
.fch-assistant code {
  font-family: ui-monospace, monospace; font-size: 12px;
  background: var(--border); padding: 1px 5px; border-radius: 3px;
}

/* Provenance: what the answer was actually built from. */
.fch-provenance {
  margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 3px;
}
.fch-provenance-item { font-size: 11px; color: var(--muted); }

.fch-failure {
  align-self: stretch; background: #fef2f2; color: #b91c1c;
  border: 1px solid #fecaca; border-radius: var(--radius);
  padding: 9px 12px; font-size: 12px;
}

.fch-pending {
  align-self: flex-start; background: var(--bg);
  border-radius: 14px 14px 14px 4px; padding: 11px 16px;
  display: flex; gap: 5px; align-items: center;
}
.fch-pending span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
  display: inline-block; animation: fch-dot 1.2s infinite;
}
.fch-pending span:nth-child(2) { animation-delay: .2s; }
.fch-pending span:nth-child(3) { animation-delay: .4s; }
@keyframes fch-dot { 0%,80%,100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) {
  .fch-pending span { animation: none; }
  .fch-button { transition: none; }
}

.fch-welcome { align-self: center; text-align: center; color: var(--muted); font-size: 12px; padding: 18px 10px; }
.fch-welcome-title { color: var(--text); font-weight: 600; margin-bottom: 4px; }
.fch-chips { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.fch-chip {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 7px 12px; font-size: 11px; color: var(--text);
  cursor: pointer; text-align: left; font: inherit; font-size: 11px;
}
.fch-chip:hover { background: var(--blue-light); border-color: var(--blue); }

.fch-composer { padding: 10px 12px 4px; border-top: 1px solid var(--border); flex-shrink: 0; }
.fch-composer-row { display: flex; gap: 8px; align-items: flex-end; }
.fch-input {
  flex: 1; font: inherit; font-size: 13px; padding: 8px 12px;
  border: 1.5px solid var(--border); border-radius: 10px;
  resize: none; outline: none; line-height: 1.4; max-height: 100px;
  overflow-y: auto; box-sizing: border-box;
}
.fch-input:focus { border-color: var(--blue); }
.fch-send {
  background: var(--navy); color: #fff; border: none; border-radius: 10px;
  padding: 0 15px; cursor: pointer; font-size: 15px; height: 38px;
  min-width: 42px; flex-shrink: 0;
}
.fch-send:hover:not(:disabled) { background: var(--navy-dark); }
.fch-send:disabled { opacity: .45; cursor: not-allowed; }

.fch-composer-meta {
  display: flex; justify-content: space-between; gap: 8px;
  min-height: 16px; padding: 3px 2px 0; font-size: 11px; color: var(--muted);
}
.fch-counter.at-limit { color: #b91c1c; font-weight: 600; }


@media (max-width: 440px) {
  .fch-root { inset: auto 14px 14px auto; }
  .fch-panel { width: calc(100vw - 28px); }
}

/* ── Directory page (#104) ───────────────────────────────────────────────────
   Ported from the source page's inline <style>. Kept here rather than inline so
   the shell's stylesheet stays the one place page styling lives.             */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.hidden { display: none; }


/* Subdivision groups */
.subdivision-group { margin-bottom: 36px; }
.subdivision-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: normal;
  color: var(--navy);
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--navy);
}
.subdiv-count {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  background: var(--navy);
  color: #fff;
  border-radius: 10px;
  padding: 1px 8px;
}
.card-subdiv {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: #dce8f4;
  color: var(--navy);
  border-radius: 4px;
  padding: 2px 7px;
}

/* The card is the summary trigger; the name is not a separate nav target. */
.faculty-card { cursor: pointer; }
.faculty-card h3 a { pointer-events: none; }
.faculty-card:hover h3 { color: var(--blue); }
.faculty-card:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* ── Summary modal ───────────────────────────────────────────────────────── */
.summary-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(3px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .2s;
}
.summary-overlay.visible { opacity: 1; }
.summary-modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,.25);
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(20px) scale(.98);
  transition: transform .22s;
}
.summary-overlay.visible .summary-modal { transform: none; }
.summary-modal-header {
  background: var(--navy);
  color: #fff;
  padding: 22px 26px 18px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.summary-modal-header h2 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: normal;
  margin: 0 0 4px;
}
.summary-appt { font-size: 12px; opacity: .8; line-height: 1.4; }
.summary-close {
  margin-left: auto;
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  opacity: .75;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.summary-close:hover { opacity: 1; background: rgba(255,255,255,.15); }
.summary-modal-body { padding: 24px 26px; }
.summary-text { font-size: 14px; line-height: 1.75; color: var(--text); margin-bottom: 20px; }
.summary-error { font-size: 14px; line-height: 1.7; color: #9b1c1c; }

/* The source's four stat cards (#483, owner ruling 2026-08-08), at its own
   measurements: .summary-stats and .summary-stat, read from its
   site/directory.html rather than matched by eye. They sit above the
   provenance line, which stays — the ruling adopts the cards and keeps
   everything else the modal already had. */
.summary-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}
.summary-stat {
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 14px;
  text-align: center;
  min-width: 90px;
}
.summary-stat .stat-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  display: block;
  line-height: 1.2;
}
.summary-stat .stat-lbl {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  display: block;
  margin-top: 2px;
}
/* A withheld H-index is an em dash, not a number, so it must not wear the
   number's weight and colour — otherwise "—" reads as a measured value. */
.summary-stat .stat-val.stat-none { color: var(--muted); font-weight: 600; }

/* Provenance, in place of the source's highlight chips: what the answer was
   built from, so a partial summary cannot read as a complete one. */
.summary-prov {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  font-size: 12px;
  color: var(--muted);
}
.summary-prov-warn { color: #92550a; font-weight: 600; }

/* Loading skeleton */
.summary-skeleton { display: flex; flex-direction: column; gap: 10px; padding: 24px 26px; }
.skeleton-line {
  height: 14px;
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: shimmer 1.4s infinite;
}
.skeleton-line.short { width: 60%; }
.skeleton-line.med   { width: 80%; }
@keyframes shimmer { 0% { background-position: 200% 0 } 100% { background-position: -200% 0 } }
@media (prefers-reduced-motion: reduce) {
  .skeleton-line { animation: none; }
  .summary-overlay, .summary-modal { transition: none; }
}

.summary-modal-footer {
  padding: 0 26px 22px;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.btn {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1.5px solid transparent;
}
.btn-outline { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--navy); }
.btn-primary { background: var(--navy); color: #fff; text-decoration: none; }
.btn-primary:hover { background: var(--navy-dark); text-decoration: none; }

/* ── Workroom (#713, #727) ────────────────────────────────────────────────
 * Shapes taken from the ruled mock (docs/design/713/alt-b-workroom-pages.html)
 * -- UI-change governance holds the mock as the spec, so these reuse this
 * file's own tokens and the existing .card-badge palette rather than
 * inventing a parallel one.
 */
.workroom-subnav {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: -22px -24px 22px;
  padding: 0 24px;
}
.workroom-subnav a {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.workroom-subnav a:hover { color: var(--blue); text-decoration: none; }
.workroom-subnav a.current {
  color: var(--navy);
  font-weight: 600;
  border-bottom-color: var(--blue);
}

/* Workbench toggle + technical-pages row (#907). The toggle sits between
   the two nav rows rather than beside the primary one, so it reads as
   "reveals what's below" rather than as a seventh tab competing with the
   six stakeholder ones above it. */
.workroom-workbench-toggle-row {
  display: flex;
  justify-content: flex-end;
  margin: 0 -24px;
  padding: 6px 24px;
  border-bottom: 1px solid var(--border);
}
.workroom-workbench-toggle {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
}
.workroom-workbench-toggle:hover { color: var(--blue); }
.workroom-workbench-nav {
  display: flex;
  gap: 4px;
  margin: 0 -24px 18px;
  padding: 0 24px 8px;
  border-bottom: 1px dashed var(--border);
}
/* `display: flex` above beats the UA stylesheet's own `[hidden] { display:
   none }` -- a more specific author rule always wins over that default, so
   without this the `hidden` ATTRIBUTE is set correctly (confirmed by the
   DOM-stub tests) while the element stays visually flexed regardless. Same
   fix this codebase already applies at `.first-run-banner[hidden]`,
   `.fch-unread[hidden]`, `.fch-panel[hidden]` -- found by review round 1,
   via a real browser, because a DOM stub with no CSS engine cannot see a
   cascade defeat like this one. */
.workroom-workbench-nav[hidden] { display: none; }
.workroom-workbench-nav a {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  border-radius: 4px;
}
.workroom-workbench-nav a:hover { color: var(--blue); background: var(--bg); }
.workroom-workbench-nav a.current { color: var(--navy); font-weight: 600; background: var(--bg); }

.workroom-intro { font-size: 13px; color: var(--muted); margin: 0 0 20px; }

.workroom-back {
  display: inline-block;
  font-size: 13px;
  color: var(--blue);
  text-decoration: none;
  margin-bottom: 16px;
}
.workroom-back:hover { text-decoration: underline; }

/* #1026: one decision, one card -- replaces the former flex-row list, whose
   long titles wrapped and broke the row's own vertical alignment against
   its sibling badge/link (a card has no sibling to misalign with). */
.workroom-decision-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.workroom-decision-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.workroom-decision-title { margin: 0 0 8px; font-size: 16px; line-height: 1.35; }
.workroom-decision-title a { color: var(--text); text-decoration: none; }
.workroom-decision-title a:hover { color: var(--blue); }
.workroom-decision-field { font-size: 13px; line-height: 1.6; color: var(--text); margin: 8px 0 0; }
.workroom-decision-field strong { color: var(--muted); font-weight: 600; }

/* #1163 (#904 phase 5): a generated digest's own "Fine line" -- status,
   date, provenance, then a real link to the source (never shown first). */
.workroom-decision-fine-line { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 10px 0 0; }
.workroom-decision-fine-line a { color: var(--blue); text-decoration: none; }
.workroom-decision-fine-line a:hover { text-decoration: underline; }

/* #1163: the ADR-digest and issue-digest card groups added below the
   existing manifest-driven list -- same card/list styling, its own
   section heading. */
.workroom-decision-group { font-size: 14px; font-weight: 600; margin: 24px 0 12px; color: var(--muted); }

.workroom-decision-tech { margin-top: 12px; font-size: 12px; }
.workroom-decision-tech summary { cursor: pointer; color: var(--muted); list-style: none; }
.workroom-decision-tech summary::-webkit-details-marker { display: none; }
.workroom-decision-tech ul { list-style: none; margin: 6px 0 0; padding: 0; color: var(--muted); }
.workroom-decision-tech li { padding: 3px 0; }
.workroom-decision-tech a { color: var(--muted); text-decoration: underline; }
.workroom-decision-tech a:hover { color: var(--blue); }

.workroom-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.workroom-status-open        { background: #fef3e2; color: #92550a; }
.workroom-status-ruled       { background: #e6f7f0; color: #1a7f4e; }
.workroom-status-superseded  { background: #eeecea; color: #6b6459; }

.workroom-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.workroom-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 600;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.workroom-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.workroom-table tr:hover td { background: var(--bg); }
.workroom-table a { color: var(--text); text-decoration: none; font-weight: 600; }
.workroom-table a:hover { color: var(--blue); }

.workroom-reference-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 700px) { .workroom-reference-list { grid-template-columns: 1fr; } }
.workroom-reference-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.workroom-reference-card a { color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; }
.workroom-reference-card a:hover { color: var(--blue); }

.workroom-markdown { font-size: 14px; line-height: 1.7; color: var(--text); }
.workroom-markdown h1,
.workroom-markdown h2,
.workroom-markdown h3 { color: var(--navy); margin: 22px 0 8px; }
.workroom-markdown h1:first-child,
.workroom-markdown h2:first-child,
.workroom-markdown h3:first-child { margin-top: 0; }
.workroom-markdown p { margin: 0 0 14px; }
.workroom-markdown code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--bg);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.9em;
}
.workroom-markdown pre {
  background: var(--navy-dark);
  color: #e8f2fc;
  border-radius: var(--radius);
  padding: 14px 16px;
  overflow-x: auto;
}
.workroom-markdown pre code { background: none; padding: 0; color: inherit; }
/* A rendered mermaid diagram is not a code sample -- the dark card above
 * was written for one and was never a background MERMAID_THEME's neutral
 * palette (site/workroom.js, #800) was designed to sit on. `renderMarkdown`
 * marks the wrapping <pre> once it finds a mermaid block inside it. */
.workroom-markdown pre.mermaid-pre {
  background: #f8f7f5;
  color: #2d2a26;
  border: 1px solid #b6b1a9;
}
.workroom-markdown table { border-collapse: collapse; width: 100%; margin: 0 0 14px; font-size: 13px; }
.workroom-markdown th, .workroom-markdown td { border: 1px solid var(--border); padding: 6px 10px; text-align: left; }
.workroom-markdown blockquote {
  border-left: 3px solid var(--border);
  margin: 0 0 14px;
  padding: 2px 14px;
  color: var(--muted);
}

/* #753: a decision's own design-mock links, listed below its rendered
 * README. Reuses .workroom-markdown's own heading treatment rather than
 * inventing a new one. */
.workroom-mocks { margin-top: 24px; padding-top: 4px; border-top: 1px solid var(--border); }
.workroom-mocks h2 { color: var(--navy); font-size: 15px; margin: 0 0 8px; }
.workroom-mocks-list { list-style: none; margin: 0; padding: 0; }
.workroom-mocks-list li { margin: 0 0 6px; }
.workroom-mocks-list a { color: var(--blue); font-size: 13px; text-decoration: none; }
.workroom-mocks-list a:hover { text-decoration: underline; }

/* #837: Architecture screen. `.workroom-markdown pre` already carries
 * `overflow-x: auto` above (#800) -- the ER diagram inherits that same
 * rule every fenced block, mermaid included, already has. This wrapper
 * makes the "the page body never scrolls sideways" property explicit and
 * named for this one section specifically, rather than relying only on the
 * inherited rule holding for a diagram this wide (17 tables) in every
 * future mermaid/browser combination. */
.architecture-schema { overflow-x: auto; max-width: 100%; }
/* Mermaid's own default (`useMaxWidth: true`, set on every SVG it renders,
 * MERMAID_THEME does not override it) makes a diagram SHRINK to fit its
 * container -- `width="100%"` plus an inline `max-width` pinned to the
 * diagram's natural size -- which is the opposite of what a horizontal
 * SCROLL container is for: at a narrow viewport the 17-table ER diagram
 * would get smaller and less legible instead of staying full-size and
 * letting `.architecture-schema` above scroll to it. Overridden here,
 * scoped to this one diagram only -- MERMAID_THEME itself (site/workroom.js,
 * #800) stays the one shared init every OTHER Workroom diagram, pipeline.md's
 * two included, still renders through unchanged. `max-width: none` needs
 * `!important` to beat mermaid's own inline style; `width: auto` does not,
 * since an SVG's `width` PRESENTATION ATTRIBUTE already loses to any plain
 * stylesheet rule in the cascade. */
.architecture-schema svg {
  max-width: none !important;
}
.architecture-migration-line { color: var(--muted); font-style: italic; }

/* #203: rules for elements this change removed were deleted with them.
   A stylesheet that outlives its markup is how a later reader concludes a
   component still exists. */

/* Workroom Roadmap (#844 phase 1). Delivered/dropped/open reuse the same
   green/grey/amber semantics .workroom-status-ruled and .workroom-status-open
   already use elsewhere on this page, rather than a third palette. */
.roadmap-summary { margin-bottom: 20px; }
.roadmap-counts { font-size: 13px; color: var(--muted); margin: 4px 0 8px; }
.roadmap-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--border);
  margin-bottom: 4px;
}
.roadmap-bar-delivered { background: #1a7f4e; }
.roadmap-bar-dropped { background: var(--muted); }
.roadmap-bar-open { background: #92550a; }

/* #871: the "as of" + manual Refresh row every successful load shows,
   stale or fresh -- .roadmap-stale (still used as a modifier class) keeps
   its own established amber for the stale case specifically. */
.roadmap-freshness-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
}
.roadmap-freshness { font-size: 12px; color: var(--muted); margin: 0; }
.roadmap-freshness-row.roadmap-stale .roadmap-freshness { color: #92550a; }
.roadmap-refresh {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 6px;
  border: 1px solid var(--blue);
  background: var(--surface);
  color: var(--blue);
  cursor: pointer;
  flex-shrink: 0;
}

/* #871: the loading state `mountRoadmap` paints BEFORE the fetch starts --
   a slow cold compute is a visible skeleton, never a blank pane. */
.roadmap-skeleton-bar {
  height: 14px;
  border-radius: 4px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: roadmap-skeleton-pulse 1.4s ease-in-out infinite;
}
.roadmap-skeleton-bar:nth-child(3) { width: 90%; }
.roadmap-skeleton-bar:nth-child(4) { width: 70%; }
.roadmap-skeleton-bar:nth-child(5) { width: 80%; }
@keyframes roadmap-skeleton-pulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .roadmap-skeleton-bar { animation: none; background: var(--border); }
}

.roadmap-epics { display: flex; flex-direction: column; gap: 10px; }
.roadmap-epic {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.roadmap-epic summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}
.roadmap-epic summary::-webkit-details-marker { display: none; }
.roadmap-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.roadmap-epic-title { color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; }
.roadmap-epic-title:hover { color: var(--blue); }
.roadmap-epic .roadmap-bar { margin-top: 10px; }
.roadmap-narrative { font-size: 13px; line-height: 1.6; color: var(--text); margin: 6px 0 0; }

.roadmap-children { margin-top: 10px; font-size: 13px; }
.roadmap-children summary { cursor: pointer; color: var(--muted); list-style: none; }
.roadmap-children summary::-webkit-details-marker { display: none; }
.roadmap-children ul { list-style: none; margin: 6px 0 0; padding: 0; }
.roadmap-children li { padding: 4px 0; border-top: 1px solid var(--border); }
.roadmap-children li:first-child { border-top: none; }
.roadmap-children a { color: var(--text); text-decoration: none; }
.roadmap-children a:hover { color: var(--blue); }
.roadmap-labels { color: var(--muted); font-size: 11px; margin-left: 8px; }

.roadmap-attention { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--border); }
.roadmap-attention h2 { color: var(--navy); font-size: 16px; margin: 0 0 10px; }
.roadmap-attention-group { margin-bottom: 14px; }
.roadmap-attention-group h3 { font-size: 13px; color: var(--muted); margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.03em; }
.roadmap-attention-group ul { list-style: none; margin: 0; padding: 0; }
.roadmap-attention-group li { padding: 4px 0; font-size: 13px; }
.roadmap-attention-group a { color: var(--text); text-decoration: none; font-weight: 600; }
.roadmap-attention-group a:hover { color: var(--blue); }

/* ── Your Requests (#905) ── bucket sections reuse .roadmap-skeleton-bar,
   .roadmap-freshness-row/.roadmap-freshness/.roadmap-refresh/.roadmap-stale
   and .empty-state above rather than duplicating them -- only the
   bucket/card/chip layout below is new. */
.requests-bucket { margin-top: 24px; }
.requests-bucket:first-of-type { margin-top: 20px; }
.requests-bucket h2 { color: var(--navy); font-size: 16px; margin: 0 0 10px; }
.requests-cards { display: flex; flex-direction: column; gap: 10px; }
.requests-card { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.requests-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.requests-card-title { color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; }
.requests-card-title:hover { color: var(--blue); }
.requests-chip { flex: none; font-size: 11px; color: var(--muted); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
.requests-meta { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.requests-copy { font-size: 13px; line-height: 1.5; color: var(--text); margin: 6px 0 0; white-space: pre-line; }
.requests-copy-missing { color: var(--muted); font-style: italic; }

/* #908: Today's own three zones -- reuses .requests-cards/.requests-card
   directly for the card layout (identical shape), only the zone/state
   layout below is new. */
.today-zone { margin-top: 24px; }
.today-zone:first-of-type { margin-top: 20px; }
.today-zone h2 { color: var(--navy); font-size: 16px; margin: 0 0 10px; }
.today-state-counts { font-size: 13px; color: var(--text); margin: 0 0 6px; }
.today-state-editorial { font-size: 13px; color: var(--muted); font-style: italic; margin: 0; }