/* Henry Fan Research Lab — styles.css
   Architecture: CSS custom properties, two-column sidebar layout,
   per-paper color identity, dark mode, mobile drawer.
*/

/* ============================================================
   1. DESIGN TOKENS — LIGHT MODE
   ============================================================ */
:root {
  /* Background layers */
  --bg:      #faf8f3;
  --bg-2:    #f3f0e6;
  --surface: #ffffff;
  --border:  #dcd8cd;

  /* Ink — three-tier hierarchy on light surfaces.
     --ink-3 must stay ≥ 4.5:1 against --bg (#faf8f3); #6f6a62 ≈ 5.3:1. */
  --ink:   #1a1814;
  --ink-2: #4a4640;
  --ink-3: #6f6a62;

  /* Paper 01 — Crimson */
  --p1:    #9b1c1c;
  --p1-bg: #fff7f7;
  --p1-bd: #fbd5d5;
  --p1-dim:#fca5a5;

  /* Paper 02 — Navy */
  --p2:    #1e3a8a;
  --p2-bg: #f0f5ff;
  --p2-bd: #c7d7fd;
  --p2-dim:#93b4fb;

  /* Paper 03 — Forest */
  --p3:    #065f46;
  --p3-bg: #f0fdf6;
  --p3-bd: #a7f3d0;
  --p3-dim:#6ee7b7;

  /* Sidebar */
  --sb-bg:  #131110;
  --sb-fg:  #ccc7bc;
  /* --sb-dim is the tertiary-text color on dark surfaces. It must
     stay above WCAG AA (4.5:1) against --sb-bg; #8a857c measures ~5.1:1. */
  --sb-dim: #8a857c;

  /* Typography */
  --serif: 'DM Serif Display', Georgia, serif;
  --sans:  'DM Sans', system-ui, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* Sizing */
  --sb-w: 224px;
  --radius: 4px;
}

/* ============================================================
   2. DARK MODE OVERRIDES
   ============================================================ */
[data-theme="dark"] {
  --bg:      #131110;
  --bg-2:    #1a1815;
  --surface: #1f1d1a;
  --border:  #2e2b26;

  --ink:   #e8e3da;
  --ink-2: #a8a39a;
  /* --ink-3 on dark surfaces must also clear 4.5:1; #948f85 ≈ 5.7:1 on --bg-2. */
  --ink-3: #948f85;

  --p1-bg: #1f0f0f;
  --p1-bd: #5c2020;
  --p2-bg: #0d1525;
  --p2-bd: #1e3366;
  --p3-bg: #091a11;
  --p3-bd: #14432a;

  /* Accent-as-text remap. The crisp brand tones (#9b1c1c / #1e3a8a / #065f46)
     are designed for white; paired with the dark accent backgrounds above they
     drop below 3:1 and become unreadable. Swap them to the -dim variants in
     dark mode so callout strong, venue tags, and "hours" labels stay legible. */
  --p1: #fca5a5;
  --p2: #93b4fb;
  --p3: #6ee7b7;

  /* sidebar stays dark in both modes */
}

/* ============================================================
   3. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; height: 100%; }

/* Users who request reduced motion get zero non-essential animation.
   Keeping the value above 0 avoids an old Safari bug where 0s could
   fall through to a later !important rule. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------ Skip link ------
   Visible only when focused by a keyboard user. Lets screen-reader
   and Tab users jump past the sidebar nav to the main content. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -44px;
  z-index: 300;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 14px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 8px;
  outline: 2px solid var(--p2);
  outline-offset: 2px;
}

/* ------ Focus-visible ------
   Keyboard-only focus ring. Click interactions stay untouched. */
:focus-visible {
  outline: 2px solid var(--p2);
  outline-offset: 2px;
  border-radius: 2px;
}
.sb-link:focus-visible,
.sb-back:focus-visible,
.topbar-back:focus-visible,
.theme-btn:focus-visible {
  outline-color: #f0ece4;
  outline-offset: 1px;
}
/* Remove the faded outline on :focus (non-keyboard) for pointer users. */
:focus:not(:focus-visible) { outline: none; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--p2); text-decoration: none; border-bottom: 1px solid rgba(30,58,138,0.3); transition: border-color 0.15s; }
a:hover { border-bottom-color: var(--p2); }

[data-theme="dark"] a { color: var(--p2-dim); border-bottom-color: rgba(147,180,251,0.3); }
[data-theme="dark"] a:hover { border-bottom-color: var(--p2-dim); }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.2; margin: 0 0 0.5em; }
h4 { font-family: var(--sans); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-2); margin: 24px 0 8px; }

code, pre, kbd { font-family: var(--mono); font-size: 0.88em; }
pre {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--p1);
  padding: 14px 18px;
  overflow-x: auto;
  line-height: 1.5;
  border-radius: var(--radius);
  color: var(--ink);
}
code { background: var(--bg-2); padding: 1px 5px; border-radius: 2px; }
pre code { background: none; padding: 0; }

p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 22px; }
li { margin-bottom: 4px; }
strong { font-weight: 600; }
em { font-style: italic; }

table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { background: var(--bg-2); font-family: var(--sans); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-2); }

/* ============================================================
   4. TWO-COLUMN LAYOUT
   ============================================================ */
.layout {
  display: grid;
  grid-template-columns: var(--sb-w) 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

/* topbar: only rendered on mobile */
.topbar {
  display: none;
  align-items: center;
  justify-content: space-between;
  background: var(--sb-bg);
  color: var(--sb-fg);
  padding: 12px 18px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 200;
  grid-column: 1 / -1;
}
.topbar button {
  background: none;
  border: 1px solid var(--sb-dim);
  color: var(--sb-fg);
  font-size: 18px;
  padding: 2px 10px;
  cursor: pointer;
  border-radius: 3px;
}

/* sidebar */
.sidebar {
  grid-column: 1;
  grid-row: 1 / -1;
  background: var(--sb-bg);
  color: var(--sb-fg);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 100;
  /* custom scrollbar */
  scrollbar-width: thin;
  scrollbar-color: var(--sb-dim) transparent;
}
.sidebar::-webkit-scrollbar { width: 4px; }
.sidebar::-webkit-scrollbar-thumb { background: var(--sb-dim); border-radius: 2px; }

/* main pane */
.main {
  grid-column: 2;
  grid-row: 1 / -1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mobile-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.25s;
}
.mobile-overlay.show { opacity: 1; }

/* ============================================================
   5. SIDEBAR INTERNALS
   ============================================================ */
.sb-head {
  padding: 18px 16px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sb-back {
  display: block;
  font-size: 11px;
  color: var(--sb-fg);
  letter-spacing: 0.04em;
  border-bottom: none;
  margin-bottom: 14px;
  transition: color 0.15s;
  opacity: 0.75;
}
.sb-back:hover { opacity: 1; }
.topbar-back {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--sb-fg);
  border-bottom: none;
  opacity: 0.8;
  white-space: nowrap;
}
.topbar-back:hover { opacity: 1; }

.sb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb-icon { font-size: 22px; line-height: 1; }
.sb-name {
  font-family: var(--serif);
  font-size: 16px;
  color: #f0ece4;
  line-height: 1.15;
}
.sb-ver {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--sb-dim);
  margin-top: 1px;
}

.sb-stats {
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sb-stat {
  text-align: center;
  font-family: var(--sans);
}
.sb-stat strong {
  display: block;
  font-size: 14px;
  color: #f0ece4;
  font-weight: 700;
}
.sb-stat span {
  font-size: 10px;
  color: var(--sb-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sb-nav { flex: 1; padding: 8px 0; overflow-y: auto; }

.sb-group { margin-bottom: 4px; }
.sb-group-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sb-dim);
  padding: 8px 16px 4px;
}

.sb-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 16px;
  font-size: 13px;
  color: var(--sb-fg);
  border-bottom: none;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
  border-radius: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sb-link:hover { background: rgba(255,255,255,0.07); color: #fff; }
.sb-link.active { background: rgba(255,255,255,0.1); color: #fff; }

/* per-paper accent on sb-link */
.sb-link.p1 .sb-dot { background: var(--p1-dim); }
.sb-link.p2 .sb-dot { background: var(--p2-dim); }
.sb-link.p3 .sb-dot { background: var(--p3-dim); }
.sb-link.p1.active { color: var(--p1-dim); }
.sb-link.p2.active { color: var(--p2-dim); }
.sb-link.p3.active { color: var(--p3-dim); }

.sb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sb-dim);
  flex-shrink: 0;
}

.sb-foot {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.theme-btn {
  width: 100%;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--sb-fg);
  font-family: var(--mono);
  font-size: 12px;
  padding: 7px 12px;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s;
}
.theme-btn:hover { background: rgba(255,255,255,0.14); }

/* ============================================================
   6. MASTHEAD
   ============================================================ */
.mast {
  background: #131110;
  color: #e8e3da;
  padding: 48px 0 36px;
}
.mast .content { max-width: 860px; margin: 0 auto; padding: 0 40px; }

.mast-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sb-dim);
  margin-bottom: 12px;
}
.mast h1 {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 400;
  color: #f0ece4;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.mast-sub {
  font-size: 18px;
  color: #a8a39a;
  line-height: 1.55;
  max-width: 620px;
  margin: 0 0 20px;
  font-style: italic;
}
/* Masthead metadata — semantic <dl> rendered as an inline key/value row. */
.mast-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--sb-dim);
  margin: 0 0 28px;
}
.mast-meta > div { display: inline-flex; gap: 6px; }
.mast-meta dt {
  color: var(--sb-dim);
  font-weight: 400;
}
.mast-meta dt::after { content: ':'; margin-right: 2px; }
.mast-meta dd {
  margin: 0;
  color: #ccc7bc;
  font-weight: 600;
}

/* paper pills row */
.paper-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ppill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 3px;
  font-family: var(--sans);
  font-size: 13px;
  text-decoration: none;
  border-bottom: none;
  transition: transform 0.12s, box-shadow 0.12s;
}
.ppill:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.3); }

.ppill.p1 { background: #3a0808; border: 1px solid #6b1414; color: var(--p1-dim); }
.ppill.p2 { background: #0a1530; border: 1px solid #1e3a6e; color: var(--p2-dim); }
.ppill.p3 { background: #031a0d; border: 1px solid #0e3320; color: var(--p3-dim); }

.ppill-num {
  font-family: var(--mono);
  font-size: 11px;
  opacity: 0.7;
}
.ppill-name { font-weight: 600; }
.ppill-stage {
  font-size: 11px;
  opacity: 0.6;
  border-left: 1px solid rgba(255,255,255,0.15);
  padding-left: 8px;
}

/* ============================================================
   6b. PROGRAM ARC + 8-STEP MODELING SURFACE
   A live progress bar computed on page load, plus a legend that
   makes Anderson's 8-step modeling vocabulary first-class on the
   page (referenced everywhere downstream: log entries, mentor
   emails, draft section headings).
   ============================================================ */
.arc-section {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  padding: 26px 0 22px;
}
.arc-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 22px;
  align-items: center;
}
.arc-label-col { padding-right: 8px; border-right: 1px solid var(--border); }
.arc-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.arc-week {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink);
  line-height: 1.1;
  margin-top: 4px;
}
.arc-pct {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  margin-top: 3px;
}

.arc-track-col { min-width: 0; }
.arc-track {
  position: relative;
  height: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: visible;
}
.arc-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2%;
  background: linear-gradient(90deg, var(--p1), var(--p2) 50%, var(--p3));
  border-radius: 999px 0 0 999px;
  transition: width 0.6s ease-out;
}
.arc-cursor {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 2%;
  width: 2px;
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--surface);
  transform: translateX(-1px);
  transition: left 0.6s ease-out;
}
[data-theme="dark"] .arc-cursor {
  background: #f0ece4;
}
.arc-ms {
  position: absolute;
  top: 22px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  white-space: nowrap;
  transform: translateX(-50%);
}
.arc-ms i {
  display: block;
  width: 1px;
  height: 6px;
  margin: 0 auto 3px;
  background: var(--ink-3);
  opacity: 0.6;
}
.arc-ms-12 { left: 23.08%; } /* 12 / 52 */
.arc-ms-26 { left: 50%; }    /* 26 / 52 */
.arc-ms-52 { left: 100%; transform: translateX(-100%); text-align: right; }
.arc-ms-52 i { margin-right: 0; }

.arc-dates {
  margin-top: 38px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  display: flex;
  gap: 8px;
  justify-content: space-between;
}
.arc-dates time { color: var(--ink-2); }

/* ---- Today strip ----
   Three cells between the arc row and the 8-step legend: today's
   weekday, the active-or-next §03 Workflow ritual, and the next
   mentor-call countdown. Populated live by JS. Subtle green accent
   when a ritual is active ("has-active") or the mentor call is in
   progress ("mentor-live") so the dashboard can tell Henry that
   now is the time without yelling. */
.today-strip {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 14px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.today-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.today-ritual-cell {
  padding-left: 16px;
  border-left: 1px solid var(--border);
}
.today-mentor-cell {
  padding-left: 16px;
  border-left: 1px solid var(--border);
}
.today-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.today-day {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.1;
}
.today-ritual-name {
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.today-sub {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.35;
}
.today-strip.has-active .today-ritual-cell {
  border-left-color: #2e7d52;
}
.today-strip.has-active .today-ritual-cell .today-eyebrow {
  color: #2e7d52;
}
[data-theme="dark"] .today-strip.has-active .today-ritual-cell {
  border-left-color: #6fb587;
}
[data-theme="dark"] .today-strip.has-active .today-ritual-cell .today-eyebrow {
  color: #6fb587;
}
.today-strip.mentor-live .today-mentor-cell {
  border-left-color: #b7791f;
}
.today-strip.mentor-live .today-mentor-cell .today-eyebrow {
  color: #b7791f;
}
[data-theme="dark"] .today-strip.mentor-live .today-mentor-cell {
  border-left-color: #d9a85d;
}
[data-theme="dark"] .today-strip.mentor-live .today-mentor-cell .today-eyebrow {
  color: #d9a85d;
}
@media (max-width: 720px) {
  .today-strip {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .today-ritual-cell,
  .today-mentor-cell {
    padding-left: 0;
    padding-top: 12px;
    border-left: none;
    border-top: 1px solid var(--border);
  }
  .today-strip.has-active .today-ritual-cell {
    border-top-color: #2e7d52;
    border-left-color: transparent;
  }
  .today-strip.mentor-live .today-mentor-cell {
    border-top-color: #b7791f;
    border-left-color: transparent;
  }
}

/* ---- Anderson's 8-step track ---- */
.eight-step { margin-top: 24px; }
.eight-step-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.eight-step-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eight-step-hint {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
}
.eight-step-track {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
}
.eight-step-track li {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 10px 9px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  min-width: 0;
}
.eight-step-track .step-num {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
}
.eight-step-track .step-name {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* A thin directional arrow between steps, as a ::after glyph on each li
   except the last. Uses CSS only so it's visual and never read out loud. */
.eight-step-track li:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  width: 6px;
  height: 1px;
  background: var(--border);
  transform: translateY(-0.5px);
  pointer-events: none;
}

/* visually-hidden utility for screen-reader-only headings like #arc-heading */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   7. MAIN CONTENT AREA
   ============================================================ */
.main-content {
  flex: 1;
  background: var(--bg);
}
.content {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ============================================================
   8. SECTIONS
   ============================================================ */
section {
  padding: 52px 0 0;
  scroll-margin-top: 24px;
}
section + section { /* spacing handled by padding */ }

section h2 {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 16px;
}
section h2 .num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-3);
  margin-right: 10px;
  vertical-align: middle;
}

.lede {
  font-style: italic;
  color: var(--ink-2);
  font-size: 16px;
  margin: 0 0 24px;
  line-height: 1.6;
}

.callout {
  background: var(--bg-2);
  border-left: 4px solid var(--p1);
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 15px;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--ink);
}
.callout strong { color: var(--p1); }

/* ============================================================
   9. PAPER CARDS
   ============================================================ */
article.paper-card {
  margin: 32px 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  scroll-margin-top: 24px;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px -12px rgba(0,0,0,0.08);
}

/* per-paper color identity on top border */
article.paper-card.p1-card { border-top: 4px solid var(--p1); }
article.paper-card.p2-card { border-top: 4px solid var(--p2); }
article.paper-card.p3-card { border-top: 4px solid var(--p3); }

.paper-head {
  padding: 28px 32px 0;
  background: var(--surface);
}
.paper-bignum {
  font-family: var(--serif);
  font-size: 72px;
  line-height: 1;
  opacity: 0.07;
  margin-bottom: -36px;
  color: var(--ink);
  user-select: none;
}
.paper-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 2px;
  background: var(--bg-2);
  color: var(--ink-2);
  border: 1px solid var(--border);
}
.tag.venue { background: var(--p2-bg); color: var(--p2); border-color: var(--p2-bd); }
.tag.status { background: var(--bg-2); color: var(--ink-3); }
.tag.alt    { background: var(--p2-bg); color: var(--p2); border-color: var(--p2-bd); }
.tag.warn   { background: #fff8ee; color: #92400e; border-color: #fcd89a; }
[data-theme="dark"] .tag.warn { background: #1f1200; color: #fcd89a; border-color: #5c3a00; }

.paper-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 8px;
}
.paper-working {
  font-style: italic;
  font-size: 14px;
  color: var(--ink-3);
  margin: 0 0 20px;
}

.paper-body {
  padding: 0 32px 24px;
}
.paper-abstract {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-2);
  margin: 16px 0 20px;
  padding: 16px 20px;
  background: var(--bg-2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* ============================================================
   10. DETAILS / SUMMARY ACCORDION
   ============================================================ */
details.pd, details.pid {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  background: var(--surface);
}
details.pd + details.pd { margin-top: 0; }

details.pd summary, details.pid summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  list-style: none;
  user-select: none;
  transition: background 0.12s;
}
details.pd summary::-webkit-details-marker,
details.pid summary::-webkit-details-marker { display: none; }

details.pd summary:hover, details.pid summary:hover {
  background: var(--bg-2);
  color: var(--ink);
}

/* +/− indicator */
details.pd summary::after,
details.pid summary::after {
  content: '+';
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 400;
  color: var(--ink-3);
  flex-shrink: 0;
  margin-left: 12px;
  line-height: 1;
}
details[open].pd summary::after,
details[open].pid summary::after {
  content: '−';
}

.pd-body, .pid-body {
  padding: 14px 18px 16px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink);
}
.pd-body ol, .pd-body ul,
.pid-body ol, .pid-body ul {
  margin: 0 0 0.5em;
  padding-left: 20px;
}
.pd-body li, .pid-body li { margin-bottom: 6px; }
.pd-body strong, .pid-body strong { font-weight: 600; }

/* p1/p2/p3 tinting on summary */
.p1-card details.pd summary { border-left: 3px solid var(--p1-dim); }
.p2-card details.pd summary { border-left: 3px solid var(--p2-dim); }
.p3-card details.pd summary { border-left: 3px solid var(--p3-dim); }

/* Expand/Collapse all — JS-injected affordance at the top of each
   paper and PI body. Tiny, quiet, keyboard-accessible. */
.accordion-toggle {
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  cursor: pointer;
  padding: 2px 0 10px;
  margin: 0 0 4px;
  align-self: flex-start;
  transition: color 0.12s;
}
.accordion-toggle:hover { color: var(--ink); }
.accordion-toggle[aria-pressed="true"] { color: var(--p2); }

/* ============================================================
   11. PAPER PULSE
   Log-driven "heartbeat" for each paper card. Replaces the old
   static Kanban (which never updated from any real data source).
   Content is computed from the research-log localStorage entries
   by renderPaperState() and re-rendered on every log mutation.
   Four visual rows: label, 8-step coverage dots, one-line stats
   (entries / last-entry age / last-step), and the most recent
   "what moved" quote.
   ============================================================ */
.paper-pulse {
  margin: 4px 32px 28px;
  padding: 18px 22px 20px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.paper-pulse .pulse-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.paper-pulse .pulse-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.paper-pulse .pulse-dots {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.paper-pulse .pulse-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.paper-card.p1-card .pulse-dot.on { background: var(--p1); border-color: var(--p1); }
.paper-card.p2-card .pulse-dot.on { background: var(--p2); border-color: var(--p2); }
.paper-card.p3-card .pulse-dot.on { background: var(--p3); border-color: var(--p3); }
.paper-pulse .pulse-dots-count {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}
.paper-pulse .pulse-summary {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
}
.paper-pulse .pulse-summary strong {
  color: var(--ink);
  font-weight: 700;
}
.paper-pulse .pulse-empty {
  font-style: italic;
  color: var(--ink-3);
}
.paper-pulse .pulse-quote {
  margin: 12px 0 0;
  padding: 6px 0 6px 14px;
  border-left: 3px solid var(--border);
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.45;
  font-style: italic;
}
.paper-card.p1-card .pulse-quote { border-left-color: var(--p1); }
.paper-card.p2-card .pulse-quote { border-left-color: var(--p2); }
.paper-card.p3-card .pulse-quote { border-left-color: var(--p3); }

/* Stalled pulse — the paper hasn't been logged in STALLED_DAYS+
   days. Amber left border + a small warning pill at the top of
   the pulse body. Amber is WCAG AA against both --bg-2 tones. */
.paper-pulse.stalled {
  border-left: 3px solid #b7791f;
  padding-left: 19px;
}
[data-theme="dark"] .paper-pulse.stalled {
  border-left-color: #d9a85d;
}
.pulse-stale-warn {
  display: inline-block;
  margin: 0 0 10px;
  padding: 3px 9px;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a4f0c;
  background: #fdf2dc;
  border: 1px solid #ead3a4;
  border-radius: 3px;
}
[data-theme="dark"] .pulse-stale-warn {
  color: #f4c77a;
  background: #2a1f0e;
  border-color: #5a4418;
}

/* Live status tag — when the log has entries for a paper, the
   static "Backlog" tag is replaced in-place by a live step label
   (e.g. "§3 State ideal") colored with the paper's accent. */
.tag.status.live {
  background: var(--bg);
  border-color: var(--ink-2);
  color: var(--ink);
}
.paper-card.p1-card .tag.status.live {
  background: var(--p1-bg);
  color: var(--p1);
  border-color: var(--p1-bd);
}
.paper-card.p2-card .tag.status.live {
  background: var(--p2-bg);
  color: var(--p2);
  border-color: var(--p2-bd);
}
.paper-card.p3-card .tag.status.live {
  background: var(--p3-bg);
  color: var(--p3);
  border-color: var(--p3-bd);
}

/* Masthead pill stage gets a slight lift when live; no change
   when it still reads "Not started". */
.ppill-stage.live {
  opacity: 0.85;
  font-family: var(--mono);
  letter-spacing: 0.01em;
}

/* ============================================================
   12. PI CARDS (PhD section)
   ============================================================ */
article.pi-card {
  margin: 24px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  scroll-margin-top: 24px;
  background: var(--surface);
}
.pi-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.pi-num {
  font-family: var(--serif);
  font-size: 48px;
  line-height: 1;
  color: var(--ink-3);
  opacity: 0.4;
  flex-shrink: 0;
  margin-top: -4px;
}
.pi-info { flex: 1; }
.pi-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.pi-name {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  margin-bottom: 4px;
}
.pi-sub {
  font-size: 13px;
  color: var(--ink-3);
  font-style: italic;
}
.pi-body { padding: 12px 24px 20px; }

/* ============================================================
   13. WORKFLOW GRID
   ============================================================ */
.workflow-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 16px 0 24px;
}
.day-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.day-card h4 {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 4px;
}
.day-card .hours {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--p1);
  margin-bottom: 8px;
}
.day-card ul {
  margin: 0;
  padding-left: 16px;
  font-size: 13px;
  color: var(--ink-2);
}
.day-card li { margin-bottom: 3px; }

/* ============================================================
   14. RESEARCH LOG
   ============================================================ */
.log-form {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin: 16px 0 24px;
  font-family: var(--sans);
}
.log-form label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-2);
  margin-top: 14px;
}
.log-form label:first-child { margin-top: 0; }
.log-form input,
.log-form select,
.log-form textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  margin-top: 4px;
  border-radius: var(--radius);
  transition: border-color 0.15s;
}
.log-form input:focus,
.log-form select:focus,
.log-form textarea:focus {
  outline: none;
  border-color: var(--p2);
}
.log-form textarea { min-height: 72px; resize: vertical; }

/* Paper + step side-by-side on wide screens; stack on narrow. */
.log-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.log-form-row label { margin-top: 0; }
@media (max-width: 560px) {
  .log-form-row { grid-template-columns: 1fr; }
}

/* ---- Log controls: text search + filter chips ---- */
.log-controls {
  margin: 16px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.log-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
}
.log-search {
  flex: 1;
  min-width: 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 9px 14px;
  box-sizing: border-box;
}
.log-search:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
.log-search::placeholder { color: var(--ink-3); }
.log-search-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
}

/* ---- Filter chip row ---- */
.log-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.log-chip {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px 5px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.log-chip:hover { background: var(--bg-2); color: var(--ink); }
.log-chip.active { color: var(--ink); border-color: var(--ink-2); background: var(--bg-2); }
.log-chip.p1.active { border-color: var(--p1); color: var(--p1); }
.log-chip.p2.active { border-color: var(--p2); color: var(--p2); }
.log-chip.p3.active { border-color: var(--p3); color: var(--p3); }
.log-chip-count {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  background: var(--border);
  color: var(--ink-2);
  padding: 1px 6px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}

/* ---- Step tag inside a log entry ---- */
.log-feed .step-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: 1px 7px;
  margin-left: 6px;
  border-radius: 2px;
  letter-spacing: 0.03em;
}
.log-feed .log-notes {
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.55;
}
.log-feed .log-empty {
  color: var(--ink-3);
  font-style: italic;
  border-left: none;
  padding-left: 0;
}

/* Last-exported footer — dim by default, amber if overdue or if
   entries exist but no export has ever happened. The one place on
   the page that nags about data integrity. */
.log-export-note {
  margin: 14px 0 0;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}
.log-export-note [data-last-export] {
  font-family: var(--mono);
  color: var(--ink-2);
}
.log-export-note.warn {
  padding: 8px 12px;
  background: #fdf2dc;
  border: 1px solid #ead3a4;
  border-radius: var(--radius);
  color: #7a4f0c;
}
.log-export-note.warn [data-last-export] { color: #7a4f0c; }
[data-theme="dark"] .log-export-note.warn {
  background: #2a1f0e;
  border-color: #5a4418;
  color: #f4c77a;
}
[data-theme="dark"] .log-export-note.warn [data-last-export] { color: #f4c77a; }

.log-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.log-form button {
  padding: 9px 18px;
  border: none;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.log-form button:hover { opacity: 0.85; }
.log-form button[type="submit"] { background: var(--ink); color: var(--bg); }
[data-theme="dark"] .log-form button[type="submit"] { background: #e8e3da; color: #131110; }
.log-form button.secondary { background: var(--bg); color: var(--ink-2); border: 1px solid var(--border); }

/* log feed */
.log-feed {
  list-style: none;
  padding: 0;
  margin: 0;
}
.log-feed li {
  border-left: 3px solid var(--border);
  padding: 10px 0 10px 16px;
  margin-bottom: 12px;
  font-size: 14px;
  position: relative;
}
.log-feed li.paper-1 { border-left-color: var(--p1); }
.log-feed li.paper-2 { border-left-color: var(--p2); }
.log-feed li.paper-3 { border-left-color: var(--p3); }
.log-feed .when {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}
.log-feed .which {
  font-family: var(--sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-left: 8px;
}
.log-feed .what {
  display: block;
  margin-top: 4px;
  color: var(--ink);
}
.log-feed .delete {
  position: absolute;
  top: 10px;
  right: 0;
  background: none;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  line-height: 1;
}
.log-feed .delete:hover { color: var(--p1); }

/* ============================================================
   15. TEMPLATE GRID
   ============================================================ */
.template-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 16px 0;
  font-family: var(--sans);
}
.template-grid a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background 0.12s, border-color 0.12s;
}
.template-grid a:hover {
  background: var(--bg-2);
  border-color: var(--p2-bd);
}
.template-grid a strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 3px;
}
.template-grid a span {
  color: var(--ink-3);
  font-size: 12px;
}

/* ============================================================
   16. FOOTER
   ============================================================ */
footer {
  border-top: 1px solid var(--border);
  margin-top: 64px;
  padding: 28px 0 60px;
  background: var(--bg-2);
}
footer .content {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-3);
}
footer p { margin: 0 0 6px; }
footer code { font-size: 11px; }

/* ============================================================
   17. UTILITY
   ============================================================ */
.papers-intro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 20px 0 32px;
}
.papers-intro-card {
  border-radius: var(--radius);
  padding: 16px 18px;
  border: 1px solid var(--border);
}
.papers-intro-card.p1 { background: var(--p1-bg); border-color: var(--p1-bd); }
.papers-intro-card.p2 { background: var(--p2-bg); border-color: var(--p2-bd); }
.papers-intro-card.p3 { background: var(--p3-bg); border-color: var(--p3-bd); }
.papers-intro-card .pc-num {
  font-family: var(--mono);
  font-size: 11px;
  margin-bottom: 4px;
}
.papers-intro-card.p1 .pc-num { color: var(--p1); }
.papers-intro-card.p2 .pc-num { color: var(--p2); }
.papers-intro-card.p3 .pc-num { color: var(--p3); }
.papers-intro-card .pc-title {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  line-height: 1.3;
}

/* ============================================================
   18. MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .topbar { display: flex; }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sb-w);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 150;
  }
  .sidebar.open { transform: translateX(0); }

  .mobile-overlay { display: block; pointer-events: none; }
  .mobile-overlay.show { pointer-events: auto; }

  .main { grid-column: 1; }

  .mast { padding: 32px 0 24px; }
  .mast .content { padding: 0 20px; }
  .mast h1 { font-size: 32px; }
  .mast-sub { font-size: 16px; }

  .content { padding: 0 20px; }

  .kanban-cols { grid-template-columns: repeat(2, 1fr); }
  .workflow-grid { grid-template-columns: 1fr; }
  .template-grid { grid-template-columns: 1fr; }
  .papers-intro-grid { grid-template-columns: 1fr; }

  .paper-head { padding: 20px 18px 0; }
  .paper-body { padding: 0 18px 18px; }
  .paper-kanban { padding: 0 18px 20px; }
  .paper-bignum { font-size: 52px; margin-bottom: -26px; }

  section { padding: 36px 0 0; }
  section h2 { font-size: 24px; }

  .pi-head { flex-direction: column; gap: 10px; }
  .pi-num { font-size: 36px; }

  /* Arc collapses to stacked layout. The cursor and milestones stay
     visible; the 8-step track becomes a 4×2 grid so names stay legible. */
  .arc-section { padding: 18px 0 16px; }
  .arc-row { grid-template-columns: 1fr; gap: 14px; }
  .arc-label-col { border-right: none; padding-right: 0; }
  .arc-week { font-size: 19px; }
  .arc-dates { margin-top: 34px; }
  .eight-step-track { grid-template-columns: repeat(4, 1fr); }
  .eight-step-track li:not(:last-child)::after { display: none; }
  .eight-step-hint { display: none; }
}

@media (max-width: 480px) {
  .kanban-cols { grid-template-columns: 1fr; }
  .paper-pills { flex-direction: column; }
  .ppill { width: 100%; }
}

/* ============================================================
   18b. MENTOR DIALOG — draft-from-log generator
   Native <dialog> for the weekly mentor-update draft. Padded panel
   on top of a dimmed backdrop; monospace textarea for the generated
   markdown so column widths read cleanly. On narrow viewports the
   dialog goes full-bleed so the textarea gets real estate to edit in.
   ============================================================ */
.mentor-dialog {
  max-width: 720px;
  width: calc(100vw - 48px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--ink);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}
.mentor-dialog::backdrop {
  background: rgba(20, 18, 14, 0.55);
}
[data-theme="dark"] .mentor-dialog::backdrop {
  background: rgba(0, 0, 0, 0.7);
}
.mentor-dialog-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px 20px;
  margin: 0;
}
.mentor-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.mentor-dialog-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.mentor-dialog-x {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-2);
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.mentor-dialog-x:hover { background: var(--bg); color: var(--ink); }
.mentor-dialog-lede {
  margin: 0;
  font-size: 0.93rem;
  color: var(--ink-2);
  line-height: 1.55;
}
.mentor-dialog textarea {
  width: 100%;
  min-height: 340px;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  resize: vertical;
  box-sizing: border-box;
}
.mentor-dialog textarea:focus {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
.mentor-dialog-btns {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.mentor-dialog-btns button {
  padding: 9px 18px;
  border: none;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.mentor-dialog-btns button:hover { opacity: 0.85; }
.mentor-dialog-btns #mentor-copy { background: var(--ink); color: var(--bg); }
[data-theme="dark"] .mentor-dialog-btns #mentor-copy { background: #e8e3da; color: #131110; }
.mentor-dialog-btns button.secondary {
  background: var(--bg);
  color: var(--ink-2);
  border: 1px solid var(--border);
}
@media (max-width: 640px) {
  .mentor-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border: none;
  }
  .mentor-dialog-form {
    height: 100%;
    padding: 18px 18px 16px;
  }
  .mentor-dialog textarea { flex: 1; min-height: 200px; }
}

/* Help dialog is narrower and content-sized — it's a reference card,
   not a text editor, so it shouldn't claim the full 820px canvas. */
.help-dialog { max-width: 460px; }
.help-shortcuts {
  margin: 4px 0 14px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.help-shortcuts > div {
  display: grid;
  grid-template-columns: 72px 1fr;
  align-items: baseline;
  gap: 12px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.help-shortcuts dt { margin: 0; }
.help-shortcuts dd {
  margin: 0;
  font: 400 13px/1.4 var(--sans);
  color: var(--ink-2);
}
.help-shortcuts kbd {
  display: inline-block;
  min-width: 28px;
  padding: 3px 8px;
  font: 600 12px/1 var(--mono);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 3px;
  text-align: center;
}
[data-theme="dark"] .help-shortcuts > div { background: var(--bg-2); }
[data-theme="dark"] .help-shortcuts kbd { background: var(--bg); }

/* ============================================================
   19. PRINT
   A PhD committee member or mentor might want a paper copy of the
   lab brief. Hide all chrome, force light colors, open every accordion,
   and let the browser paginate naturally. Page-break rules try to keep
   each paper card whole.
   ============================================================ */
@media print {
  :root {
    --bg: #ffffff;
    --bg-2: #fafafa;
    --surface: #ffffff;
    --ink: #000000;
    --ink-2: #222222;
    --ink-3: #555555;
    --border: #bbbbbb;
  }
  html, body { background: #ffffff !important; color: #000000 !important; }
  .skip-link, .topbar, .sidebar, .mobile-overlay, .sb-foot,
  .arc-section, .accordion-toggle, .log-form, .log-filter,
  .log-feed .delete, .mentor-dialog, .help-dialog { display: none !important; }
  .layout { display: block; }
  .main { display: block; }
  .main-content { background: #ffffff !important; }
  .mast { background: #ffffff !important; color: #000000 !important; padding: 0 0 20px; border-bottom: 2px solid #000; }
  .mast h1, .mast-sub, .mast-eyebrow, .mast-meta, .mast-meta dt, .mast-meta dd {
    color: #000000 !important;
  }
  .content { max-width: none; padding: 0; }
  a {
    color: #000 !important;
    border-bottom: 1px solid #000 !important;
  }
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #555;
    word-break: break-all;
  }
  /* Force all accordions open so the printed copy has every section. */
  details { border: none !important; }
  details[class] > summary { list-style: none; color: #000 !important; }
  details[class] > summary::after { content: '' !important; }
  .pd-body, .pid-body { border-top: 1px solid #ccc; padding: 8px 0 12px; }
  details:not([open]) > *:not(summary) { display: block !important; }
  details > summary { pointer-events: none; }

  article.paper-card, article.pi-card {
    page-break-inside: avoid;
    break-inside: avoid;
    border: 1px solid #888 !important;
    box-shadow: none !important;
    margin: 18px 0;
  }
  section { page-break-before: auto; }
  h1, h2, h3, h4 { page-break-after: avoid; }
  .workflow-grid, .template-grid, .papers-intro-grid {
    page-break-inside: avoid;
  }
  pre { border: 1px solid #888 !important; }
}