/* ── Fonts (self-hosted Inter, variable weight) ──────────────── */
/* Single variable woff2 covers all weights we use (400/500/600/700).
   Latin subset loads on every page (~48KB); latin-ext is fetched only
   when an accented character is rendered. unicode-range copied verbatim
   from @fontsource-variable/inter so the browser splits requests
   identically to Google Fonts' CSS. */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/static/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ── Reset ─────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg: #f5f2ec;
  --surface: #ffffff;
  --surface-hover: #f0ede6;

  /* Borders */
  --border: #e3ddd4;
  --border-subtle: #eae6df;

  /* Text */
  --text: #1a1810;
  --text-2: #5c5750;
  --text-3: #9a958d;

  /* Accent — deep navy */
  --accent: #1b3a5c;
  --accent-h: #132d47;
  --accent-light: #e7eef6;
  --accent-mid: rgba(27, 58, 92, 0.1);

  /* Unread */
  --unread-bg: #eef4fc;
  --unread-hover: #e4edf8;

  /* Star */
  --star: #c4872a;
  --star-light: rgba(196, 135, 42, 0.11);

  /* Sidebar (dark navy) */
  --nav-bg: #182332;
  --nav-hover: rgba(255, 255, 255, 0.07);
  --nav-active: rgba(255, 255, 255, 0.12);
  --nav-text: rgba(255, 255, 255, 0.6);
  --nav-text-active: #ffffff;
  --nav-label: rgba(255, 255, 255, 0.3);
  --nav-border: rgba(255, 255, 255, 0.07);
  --nav-accent: #5ba8f5;

  /* Typography */
  --sans: "Inter Variable", "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: Georgia, "Times New Roman", serif;

  /* Spacing */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;

  /* Radius */
  --r1: 4px;
  --r2: 6px;
  --r3: 8px;
  --rfull: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.07);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);

  /* Layout */
  --topbar-h: 60px;
  --nav-w: 224px;

  --t: 120ms ease;
}

/* ── Base ──────────────────────────────────────────────────── */
html,
body {
  height: 100%;
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── Top Bar ───────────────────────────────────────────────── */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: 0 var(--s4);
  z-index: 200;
  box-shadow: var(--shadow-sm);
}

.topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
  white-space: nowrap;
  min-width: calc(var(--nav-w) - var(--s4) - var(--s4));
}

.brand__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background-color: var(--text);
  color: var(--bg);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  flex-shrink: 0;
}

.content-topbar__brand .brand__mark {
  width: 26px;
  height: 26px;
  font-size: 13px;
}

@media (max-width: 720px) {
  .content-topbar__brand .brand__mark {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
}

.topbar__search {
  flex: 1;
  max-width: 560px;
  position: relative;
}

.topbar__search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
  display: flex;
}

.topbar__search-input {
  width: 100%;
  height: 38px;
  padding: 0 var(--s3) 0 38px;
  background: var(--bg);
  border: 1.5px solid transparent;
  border-radius: var(--rfull);
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--text);
  outline: none;
  transition:
    border-color var(--t),
    box-shadow var(--t),
    background var(--t);
}

.topbar__search-input::placeholder {
  color: var(--text-3);
}

.topbar__search-input:focus {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-mid);
}

.topbar__spacer {
  flex: 1;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-shrink: 0;
}

.topbar__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 34px;
  padding: 0 var(--s3);
  border-radius: var(--r2);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border: 1.5px solid var(--border);
  cursor: pointer;
  background: var(--surface);
  color: var(--text-2);
  transition:
    border-color var(--t),
    color var(--t),
    background var(--t);
}

.topbar__btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

/* Mobile-only chrome buttons (hamburger, search-icon trigger, back-arrow
   inside the search-open state). Hidden on desktop; the @media block
   further down toggles them based on body[data-mobile-search]. */
.topbar__menu,
.topbar__mobile-search,
.topbar__search-back {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--text);
  cursor: pointer;
  border-radius: var(--r1);
  flex-shrink: 0;
}

.topbar__menu:hover,
.topbar__mobile-search:hover,
.topbar__search-back:hover {
  background: var(--surface-hover);
}

/* ── Mobile drawer ──────────────────────────────────────────── */
.mobile-drawer,
.mobile-drawer__backdrop {
  display: none;
}

@media (max-width: 768px) {
  .topbar__menu {
    display: inline-flex;
  }

  .mobile-drawer__backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 300;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--t);
  }

  body[data-mobile-drawer="open"] .mobile-drawer__backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 340px);
    background: var(--nav-bg);
    z-index: 310;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform var(--t);
    overflow-y: auto;
    padding-left: env(safe-area-inset-left);
    padding-bottom: env(safe-area-inset-bottom);
    outline: none;
  }

  body[data-mobile-drawer="open"] .mobile-drawer {
    transform: translateX(0);
  }

  /* Lock background scroll while the drawer is open. */
  body[data-mobile-drawer="open"] {
    overflow: hidden;
  }

  .mobile-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s4) var(--s4) var(--s2);
    color: var(--nav-text-active);
  }

  .mobile-drawer__title {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--nav-label);
  }

  .mobile-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 0;
    color: var(--nav-text);
    cursor: pointer;
    border-radius: var(--r1);
  }

  .mobile-drawer__close:hover {
    background: var(--nav-hover);
    color: var(--nav-text-active);
  }

  .mobile-drawer__nav {
    display: flex;
    flex-direction: column;
    padding: var(--s2) 0 var(--s3);
    border-bottom: 1px solid var(--nav-border);
  }

  .mobile-drawer__nav-link {
    padding: 10px var(--s4);
    font-size: 14px;
    font-weight: 500;
    color: var(--nav-text);
    text-decoration: none;
  }

  .mobile-drawer__nav-link:hover {
    background: var(--nav-hover);
    color: var(--nav-text-active);
  }

  /* The drawer reuses the existing <Sidebar /> component, which carries
     `.sidebar { display: none }` on mobile from further down. Re-enable it
     when nested inside the drawer wrapper. */
  .mobile-drawer__sidebar {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .mobile-drawer__sidebar .sidebar {
    display: flex;
    width: 100%;
  }
}

/* ── Reader Shell ───────────────────────────────────────────── */
.reader {
  display: flex;
  height: 100vh;
  padding-top: var(--topbar-h);
  overflow: hidden;
}

/* ── Sidebar (dark) ─────────────────────────────────────────── */
.sidebar {
  width: var(--nav-w);
  flex-shrink: 0;
  background: var(--nav-bg);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: var(--s3) 0 var(--s5);
  scrollbar-width: none;
}

.sidebar::-webkit-scrollbar {
  display: none;
}

.sidebar__label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--nav-label);
  padding: var(--s4) var(--s4) var(--s2);
}

.sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 8px var(--s4);
  font-size: 13.5px;
  color: var(--nav-text);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--t),
    color var(--t);
  border-radius: 0 var(--rfull) var(--rfull) 0;
  margin-right: var(--s3);
  position: relative;
}

.sidebar__item:hover {
  background: var(--nav-hover);
  color: var(--nav-text-active);
}

.sidebar__item.is-active {
  background: var(--nav-active);
  color: var(--nav-text-active);
  font-weight: 500;
}

.sidebar__item.is-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--nav-accent);
  border-radius: 0 2px 2px 0;
}

.sidebar__count {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--nav-label);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}

.sidebar__item.is-active .sidebar__count {
  color: rgba(255, 255, 255, 0.45);
}

.sidebar__icon {
  flex-shrink: 0;
  opacity: 0.75;
}

.sidebar__item.is-active .sidebar__icon,
.sidebar__item:hover .sidebar__icon {
  opacity: 1;
}

.sidebar__divider {
  height: 1px;
  background: var(--nav-border);
  margin: var(--s2) var(--s4);
}

/* ── Main Panel ─────────────────────────────────────────────── */
.main-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
}

/* ── Letter List ────────────────────────────────────────────── */
.letter-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.letter-list::-webkit-scrollbar {
  width: 5px;
}
.letter-list::-webkit-scrollbar-track {
  background: transparent;
}
.letter-list::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.main-panel.has-detail .letter-list {
  display: none;
}

/* ── Letter List Bar ────────────────────────────────────────── */
.letter-list__bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 5;
  flex-shrink: 0;
}

.letter-list__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

.letter-list__count {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--rfull);
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}

/* ── Bulk action bar ────────────────────────────────────────── */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 var(--s4);
  height: 34px;
  background: var(--accent-light);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 45px;
  z-index: 4;
  flex-shrink: 0;
}

.bulk-bar[hidden] {
  display: none;
}

.bulk-bar__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  margin-right: var(--s2);
  white-space: nowrap;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.bulk-bar__count:hover {
  text-decoration: underline;
}

.bulk-bar__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: var(--r1);
  cursor: pointer;
  color: var(--text-2);
  transition:
    background var(--t),
    color var(--t);
  padding: 0;
}

.bulk-bar__icon-btn:hover {
  background: rgba(27, 58, 92, 0.1);
  color: var(--accent);
}

.bulk-bar__icon-btn[hidden] {
  display: none;
}

/* ── Letter Item — Gmail single-line columnar row ───────────── */
/*
   Grid columns:
   [check 40px] [star 32px] [sender 190px] [subject 1fr] [year 56px]
*/
/* Single-row Gmail "compact" desktop density. A two-row variant was tried
   and reverted: hero lines are often short or absent, so the extra row
   bought dead space rather than breathing room. Mobile gets its own
   two-row override further down — the narrow viewport packs content
   differently. */
.letter-item {
  display: grid;
  grid-template-columns: 40px 32px 200px 1fr auto;
  align-items: center;
  height: 50px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  color: inherit;
  user-select: none;
  transition: background var(--t);
}

.letter-item[hidden] {
  display: none;
}

.letter-item:hover {
  background: var(--surface-hover);
  box-shadow: inset 0 -1px 0 var(--border);
}

.letter-item.is-unread {
  background: var(--surface);
  font-weight: 400; /* children override */
}

.letter-item.is-selected {
  background: var(--accent-light) !important;
}

.letter-item.is-checked {
  background: var(--accent-light);
}

/* ── Checkbox cell ───────────────────────────────────────────── */
.letter-item__check {
  grid-column: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 100%;
  cursor: default;
}

.letter-item__checkbox {
  /* 24×24 hit area for WCAG 2.5.8; visual stays 15×15 via inner box-shadow trick */
  width: 24px;
  height: 24px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  position: relative;
}

.letter-item__checkbox::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  transform: translate(-50%, -50%);
  border: 1.5px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  box-sizing: border-box;
  transition:
    background var(--t),
    border-color var(--t);
}

.letter-item__checkbox:hover::before {
  border-color: var(--accent);
}

.letter-item__checkbox:checked::before {
  background: var(--accent);
  border-color: var(--accent);
}

.letter-item__checkbox:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 8px;
  transform: translate(-50%, -60%) rotate(45deg);
  border: solid #fff;
  border-width: 0 2px 2px 0;
}

.letter-item__checkbox:focus-visible::before {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Star cell ───────────────────────────────────────────────── */
.letter-item__star {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--border);
  padding: 0;
  transition: color var(--t);
}

.letter-item__star:hover {
  color: var(--star);
}

.letter-item__star.is-starred {
  color: var(--star);
}

/* ── Sender (company name + tier) ────────────────────────────── */
.letter-item__sender {
  grid-column: 3;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: var(--s3);
  min-width: 0;
}

.letter-item.is-unread .letter-item__sender {
  font-weight: 700;
}

/* ── Meta (year · kind · reading time) — right edge ──────────── */
.letter-item__meta {
  grid-column: 5;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-3);
  padding-right: var(--s4);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.letter-item__year {
  font-variant-numeric: tabular-nums;
}

.letter-item.is-unread .letter-item__meta {
  color: var(--text-2);
}

.letter-item.is-unread .letter-item__year {
  font-weight: 700;
}

.letter-item.is-selected .letter-item__meta {
  color: var(--accent);
}

.letter-item__readtime {
  color: var(--text-3);
}

.letter-item.is-unread .letter-item__readtime {
  color: var(--text-3);
  font-weight: 400;
}

.letter-item__kind-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--surface-hover, #eee);
  color: var(--text-2);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.letter-item.is-selected .letter-item__kind-badge {
  background: var(--accent);
  color: #fff;
}

/* ── Subject (author + hero line) ────────────────────────────── */
.letter-item__subject {
  grid-column: 4;
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  padding-right: var(--s4);
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.letter-item__subject-author {
  color: var(--text);
  flex-shrink: 0;
}

.letter-item.is-unread .letter-item__subject-author {
  color: var(--text);
  font-weight: 600;
}

.letter-item__hero {
  color: var(--text-3);
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Notable quotes are verbatim, wrapped in "" — italicise them so they
   read as the author's voice rather than chrome. */
.letter-item__hero--quote {
  font-style: italic;
}

/* FTS match excerpts render <mark> for the matched span. */
.letter-item__hero mark {
  background: var(--accent-mid);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

/* ── Avatar (detail view only) ──────────────────────────────── */
.avatar {
  position: relative;
  flex-shrink: 0;
}

.avatar--sm {
  width: 36px;
  height: 36px;
}
.avatar--md {
  width: 40px;
  height: 40px;
}
.avatar--lg {
  width: 48px;
  height: 48px;
}

.avatar__img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--border);
  display: block;
}

.avatar__initials {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.2px;
  line-height: 1;
}

.avatar--lg .avatar__initials {
  font-size: 16px;
}

.avatar__badge {
  position: absolute;
  bottom: -2px;
  right: -3px;
  width: 17px;
  height: 17px;
  border-radius: var(--r1);
  border: 1.5px solid var(--surface);
  object-fit: contain;
  background: #fff;
}

/* ── Letter Detail Panel ────────────────────────────────────── */
.letter-detail {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  display: none;
  flex-direction: column;
  background: var(--bg);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.letter-detail::-webkit-scrollbar {
  width: 5px;
}
.letter-detail::-webkit-scrollbar-track {
  background: transparent;
}
.letter-detail::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.main-panel.has-detail .letter-detail {
  display: flex;
}

/* ── Detail Toolbar ─────────────────────────────────────────── */
.detail-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 8px var(--s4);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 10;
  flex-shrink: 0;
  box-shadow: 0 1px 0 var(--border);
}

/* Reading progress bar — mobile-only. Desktop already has the sticky TOC
   sidebar with active-link highlighting, which signals position better than
   a thin progress strip. Hidden by default; the mobile media query below
   pins it fixed at the top of the viewport. */
.detail-progress {
  display: none;
}
.detail-progress__fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  /* Subtle glow lifts the fill off the background so the moving edge reads
     as motion rather than blending into adjacent dark text. */
  box-shadow: 0 0 6px rgba(27, 58, 92, 0.55);
  transition: width 80ms linear;
}

.detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r2);
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  transition:
    background var(--t),
    color var(--t);
  flex-shrink: 0;
}

.detail-back:hover {
  background: var(--bg);
  color: var(--text);
}

.detail-back svg {
  flex-shrink: 0;
}

.detail-eyebrow {
  font-size: 13px;
  color: var(--text-3);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 var(--s2);
}

.detail-actions {
  display: flex;
  align-items: center;
  gap: var(--s1);
  flex-shrink: 0;
}

.detail-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--r2);
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--text-3);
  text-decoration: none;
  transition:
    color var(--t),
    background var(--t);
}

.detail-action:hover {
  color: var(--accent);
  background: var(--accent-light);
}

.detail-action.is-starred {
  color: var(--star);
  background: var(--star-light);
}

.detail-action.is-copied {
  position: relative;
  color: var(--accent);
  background: var(--accent-light);
}
.detail-action.is-copied::after {
  content: "Copied!";
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text);
  color: var(--surface);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  animation: copied-fade 1.6s ease forwards;
}
@keyframes copied-fade {
  0% {
    opacity: 0;
    transform: translate(-50%, -2px);
  }
  15%,
  80% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -2px);
  }
}

.detail-action--icon {
  width: 32px;
  padding: 0;
  justify-content: center;
}

/* ── Letter Article ─────────────────────────────────────────── */
.letter-article {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  padding: var(--s7) var(--s6) var(--s8);
}

.letter-article__header {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  margin-bottom: var(--s5);
}

.letter-article__meta {
  flex: 1;
  min-width: 0;
}

.letter-article__title {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: -0.4px;
  margin-bottom: var(--s2);
}

.letter-article__byline {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-3);
  flex-wrap: wrap;
}

.letter-article__author {
  color: var(--text-2);
  font-weight: 500;
}
.letter-article__sep {
  opacity: 0.6;
}
.letter-article__source-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.letter-article__source-link:hover {
  border-bottom-color: var(--accent);
}
.letter-article__source-link svg {
  width: 12px;
  height: 12px;
  opacity: 0.8;
}

.letter-article__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-3);
}
.letter-article__action-meta {
  color: var(--text-3);
}

.letter-article__tags {
  display: flex;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
}

.letter-article__divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--s5) 0;
}

/* ── /best landing page (task 45) ────────────────────────────── */
.best-page {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s6) var(--s5);
}
.best-page__header {
  margin-bottom: var(--s7, 48px);
}
.best-page__header h1 {
  font-size: 32px;
  line-height: 1.2;
  margin: 0 0 var(--s4) 0;
}
.best-page__intro p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-muted, #3a3a3a);
}
.best-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.best-item__link {
  display: flex;
  gap: var(--s4);
  padding: var(--s4);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.best-item__link:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}
.best-item__avatar {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-light);
  overflow: hidden;
}
.best-item__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.best-item__body {
  flex: 1;
  min-width: 0;
}
.best-item__title-row {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s1);
}
.best-item__title {
  font-weight: 600;
  font-size: 16px;
}
.best-item__newreader {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.best-item__note {
  margin: 0 0 var(--s2) 0;
  font-style: italic;
  color: var(--ink-muted, #4a4a4a);
  line-height: 1.5;
}
.best-item__meta {
  font-size: 13px;
  color: var(--ink-muted, #6a6a6a);
}

/* ── Row tier dot (task 45) ──────────────────────────────────── */
.letter-item__tier {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
}
.letter-item__tier--essential {
  background: var(--accent);
}
.letter-item__tier--strong {
  background: var(--accent);
  opacity: 0.55;
}
.letter-item__tier--notable {
  background: var(--ink-muted, #6a6a6a);
  opacity: 0.5;
}

/* ── Editorial strip + reading time (task 45) ────────────────── */
.editorial-strip {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s3);
  font-size: 14px;
  line-height: 1.5;
}
.editorial-strip__pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.editorial-strip__pill--essential {
  background: var(--accent);
  color: #fff;
}
.editorial-strip__pill--strong {
  background: var(--accent-light);
  color: var(--accent);
  border: 1px solid var(--accent);
}
.editorial-strip__pill--notable {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border-subtle);
}
.editorial-strip__newreader {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}
.editorial-strip__note {
  color: var(--ink-muted, #4a4a4a);
  font-style: italic;
}

/* ── Letter Body ─────────────────────────────────────────────── */
.letter-body {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.85;
  color: var(--text);
}

.letter-body p {
  margin-bottom: 1.3em;
}
.letter-body p:last-child {
  margin-bottom: 0;
}

.letter-body__label {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: var(--s4);
}

.letter-body__empty {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text-3);
  font-style: italic;
}

/* ── Structured summary (task 28) ───────────────────────────── */
.letter-summary {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
}
.letter-summary > * + * {
  margin-top: var(--s5);
}
.letter-summary__heading {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--accent);
  margin: 0 0 var(--s3);
  padding-top: var(--s4);
  border-top: 1px solid var(--border, #ddd);
}
/* The first heading in the section already has the section's own top margin
   from `.letter-summary > * + *`; the editor's-take aside and hero quote sit
   above it, so a hairline above the very first eyebrow would double up.
   The vertical-rhythm gap from `letter-summary > * + *` (s5) covers the
   first-heading separation. */
.letter-summary > :first-child .letter-summary__heading,
.letter-summary > :first-child > .letter-summary__heading {
  border-top: 0;
  padding-top: 0;
}
.letter-summary__label {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  margin-bottom: var(--s2);
}
.letter-summary__editors-take {
  border-left: 3px solid var(--accent);
  padding: var(--s3) var(--s4);
  background: rgba(0, 0, 0, 0.02);
}
.letter-summary__editors-take p {
  margin: 0;
  font-style: italic;
}
.letter-summary__dials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  font-family: var(--sans);
  font-size: 12px;
}
.letter-summary__dials .dial {
  padding: 2px 8px;
  border: 1px solid var(--border, #ddd);
  border-radius: 12px;
  color: var(--text-2);
}
.letter-summary__key-passage {
  padding: var(--s3) var(--s4);
  background: rgba(0, 0, 0, 0.02);
  border-radius: 4px;
}
.letter-summary__sections ul,
.letter-summary__risks ul,
.letter-summary__anecdotes ul,
.letter-summary__lessons ul,
.letter-summary__mistakes ul,
.letter-summary__predictions ul,
.letter-summary__prior-predictions ul,
.letter-summary__position-theses ul {
  margin: 0;
  padding-left: var(--s4);
}
.letter-summary__sections li,
.letter-summary__risks li,
.letter-summary__anecdotes li,
.letter-summary__lessons li,
.letter-summary__mistakes li,
.letter-summary__predictions li,
.letter-summary__prior-predictions li,
.letter-summary__position-theses li {
  margin-bottom: var(--s1);
}
.letter-summary .section-pages {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-3);
}
.numbers-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s3) var(--s5);
  align-items: start;
}
.numbers-strip .number {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.numbers-strip .number-surface {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  line-height: 1.2;
}
.numbers-strip .number-label {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.3;
}
.numbers-table {
  margin: 0;
  background: transparent;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.numbers-table + .numbers-table {
  margin-top: var(--s5);
}
.numbers-table__period {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-3);
  font-weight: 400;
  white-space: nowrap;
  margin-left: 2px;
}
.numbers-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 14px;
  background: transparent;
}
.numbers-table thead th {
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
  text-align: right;
  padding: var(--s1) var(--s2);
  border-bottom: 2px solid var(--border);
  background: transparent;
}
.numbers-table thead th:first-child {
  text-align: left;
}
.numbers-table tbody th {
  font-weight: 500;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  text-align: left;
  color: var(--text);
  padding: var(--s2);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: baseline;
  background: transparent;
}
.numbers-table tbody td {
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: var(--s2);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text);
  vertical-align: baseline;
  background: transparent;
}
/* Current-period column carries the headline number — bold to anchor the eye. */
.numbers-table tbody td:nth-child(3) {
  font-weight: 700;
}
/* Δ column reads as a secondary annotation, not a primary number. */
.numbers-table tbody td:nth-child(4) {
  color: var(--text-2);
  font-weight: 500;
  white-space: nowrap;
}
.numbers-table tbody tr:last-child th,
.numbers-table tbody tr:last-child td {
  border-bottom: 0;
}
.numbers-table--snapshot tbody td {
  font-weight: 600;
}
.letter-summary__subheading {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-2);
  font-weight: 600;
  margin: 0 0 var(--s2);
}
.letter-summary__quotes blockquote {
  position: relative;
  border-left: 2px solid var(--accent);
  padding: var(--s2) var(--s4);
  margin: 0 0 var(--s3);
  font-family: var(--serif, Georgia, "Source Serif Pro", serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text-1);
}
.letter-summary__quotes blockquote::before {
  content: "“";
  position: absolute;
  left: -2px;
  top: -8px;
  font-size: 38px;
  color: var(--accent);
  opacity: 0.45;
  font-family: var(--serif, Georgia, serif);
  pointer-events: none;
}
.letter-summary__quotes blockquote p {
  margin: 0;
}
.letter-summary__quotes blockquote footer {
  font-family: var(--sans);
  font-size: 12px;
  font-style: normal;
  color: var(--text-3);
  margin-top: var(--s1);
}

.letter-summary__hero-quote {
  position: relative;
  margin: var(--s3) 0 var(--s4);
  padding: var(--s3) var(--s4) var(--s3) var(--s6);
  border-left: 4px solid var(--accent);
  background: rgba(0, 0, 0, 0.015);
  border-radius: 0 var(--r2, 4px) var(--r2, 4px) 0;
  font-family: var(--serif, Georgia, "Source Serif Pro", serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  color: var(--text-1);
}
.letter-summary__hero-quote::before {
  content: "“";
  position: absolute;
  left: 14px;
  top: 0;
  font-size: 56px;
  line-height: 1;
  color: var(--accent);
  opacity: 0.45;
  font-family: var(--serif, Georgia, serif);
  pointer-events: none;
}
.letter-summary__hero-quote p {
  margin: 0;
  position: relative;
}
.letter-summary__hero-quote a[data-citation] {
  font-style: normal;
  font-family: var(--sans);
  font-size: 12px;
  margin-left: 4px;
  vertical-align: baseline;
}
@media (max-width: 640px) {
  .letter-summary__hero-quote {
    font-size: 18px;
    padding: var(--s3) var(--s3) var(--s3) var(--s5);
  }
  .letter-summary__hero-quote::before {
    font-size: 48px;
  }
}
.chip-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.chip {
  display: inline-block;
  padding: 2px 8px;
  font-family: var(--sans);
  font-size: 12px;
  border: 1px solid var(--border, #ddd);
  border-radius: 12px;
  color: var(--text-2);
  background: #fff;
}
.chip--theme {
  border-color: var(--accent);
}
.chip--entity {
  background: rgba(0, 0, 0, 0.02);
}

/* Task 49 — chip verification states surfaced to the admin verification pane.
   On the public site no chip ever has a chip-wrap-- modifier (verifications
   prop is undefined), so these styles are admin-only in practice but defined
   on the shared sheet because the StructuredSummary render is shared.

   Default (unverified) is intentionally invisible — verification chrome around
   every [N] superscript would make the reader render unreadable in the admin
   pane. Only verified, flagged, and keyboard-focused states render visibly. */
.chip-wrap {
  position: relative;
  display: inline;
}
.chip-wrap--unverified {
  /* no chrome — keep the citation marker visually identical to the public
     site. The presence of data-chip-path is enough for keyboard traversal
     and the click handler. */
}
.chip-wrap--verified {
  background: rgba(22, 163, 74, 0.1);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.5);
}
.chip-wrap--flagged {
  background: rgba(220, 38, 38, 0.1);
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.55);
}
.chip-wrap--focused,
[data-chip-path].chip-wrap--focused {
  box-shadow: 0 0 0 2px #1b3a5c;
  border-radius: 3px;
}
.chip-badge {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  vertical-align: super;
  margin-left: 1px;
  font-size: 0; /* hide the inner glyph; we only want the dot */
  line-height: 0;
}
.chip-badge--verified {
  background: #16a34a;
}
.chip-badge--flagged {
  background: #dc2626;
}
/* Themes / entity chips are themselves the chip — they wear their state via
   the same chip-wrap--{state} classes on the chip element itself. The badge
   sits inline with the chip text, so we keep the dot styling but bump the
   font back to readable for the chip context. */
.chip.chip-wrap--verified {
  border-color: #16a34a;
  background: rgba(22, 163, 74, 0.08);
}
.chip.chip-wrap--flagged {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}
/* Letter article — when a structured summary is present we render a 2-column
   grid: the article body and a sticky sidebar TOC. Sticky positioning is
   relative to the .letter-detail scroll container (the only scroll context
   on this page), so the TOC stays glued under the toolbar as the reader
   scrolls. Mobile collapses to a single column with the TOC pinned above
   the body. */
.letter-article--with-toc {
  max-width: 1040px;
  display: grid;
  grid-template-columns: minmax(0, 700px) 220px;
  column-gap: var(--s7);
}
.letter-article--with-toc .letter-article__main {
  min-width: 0;
}
.letter-article__toc-rail {
  position: sticky;
  /* Toolbar inside .letter-detail is sticky at top: 0 and ~49px tall; offset
     the TOC below it so it never disappears under the action buttons. */
  top: 60px;
  align-self: start;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.letter-toc {
  font-family: var(--sans);
  font-size: 13px;
}
.letter-toc__label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  margin-bottom: var(--s2);
}
.letter-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.letter-toc__list li {
  margin: 0;
}
.letter-toc__link {
  display: block;
  padding: 4px 0 4px 12px;
  color: var(--text-2);
  text-decoration: none;
  border-left: 2px solid var(--border);
  line-height: 1.4;
  transition:
    color var(--t),
    border-color var(--t);
}
.letter-toc__link:hover {
  color: var(--text-1);
  border-left-color: var(--accent);
}
.letter-toc__link.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
  font-weight: 500;
}
/* Anchor jumps land below the sticky toolbar. Toolbar height ≈ 49px. */
.letter-summary [id^="ls-"] {
  scroll-margin-top: 64px;
}
/* Mobile / narrow viewports: hide the desktop rail. Pin the progress bar
   to the top of the viewport since the toolbar isn't sticky here (window
   scrolls, not .letter-detail). */
@media (max-width: 1024px) {
  .letter-article--with-toc {
    display: block;
    max-width: 700px;
  }
  .letter-article__toc-rail {
    display: none;
  }
  .detail-progress {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 250;
    pointer-events: none;
    /* Soft accent-tinted track so the empty portion is visibly part of the
     same scale as the fill, but quiet enough to disappear on first read. */
    background: var(--accent-mid);
  }
  /* Letter detail mobile: drop the fixed topbar so reading reclaims the
     full viewport. Reader scrolls up to reveal navigation again. Scoped via
     :has() so only the detail view (not the list) flips this. */
  body:has(.main-panel.has-detail) .topbar {
    position: static;
    inset: auto;
  }
  body:has(.main-panel.has-detail) .reader {
    padding-top: 0;
  }
}
.letter-summary__collapse {
  display: block;
  min-width: 0;
}
.letter-summary__collapsed-item {
  display: none !important;
}
.letter-summary__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s3);
  padding: 4px 0;
  background: none;
  border: 0;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-3);
  cursor: pointer;
  text-align: left;
}
.letter-summary__toggle::before {
  content: "+";
  font-weight: 600;
  opacity: 0.7;
}
.letter-summary__collapse[data-collapse-open] .letter-summary__toggle::before {
  content: "−";
}
.letter-summary__toggle:hover {
  color: var(--accent);
}
.letter-summary__quote-list {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.letter-summary__entities {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.entity-group {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--s2) var(--s3);
  align-items: start;
  font-family: var(--sans);
  font-size: 13px;
}
.entity-group__label {
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding-top: 4px;
}
.entity-group__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
@media (max-width: 720px) {
  .entity-group {
    grid-template-columns: 1fr;
  }
}
.letter-summary__crossrefs {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text-3);
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--border, #ddd);
}
.letter-summary__crossrefs a {
  color: var(--accent);
}

/* ── Tags ───────────────────────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s2);
  border-radius: var(--rfull);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  background: var(--accent-light);
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t);
}

.tag:hover {
  background: #d8e6f5;
}

/* ── Empty + Loading ─────────────────────────────────────────── */
.list-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s8) var(--s5);
  text-align: center;
  gap: var(--s3);
  flex: 1;
}

.list-empty__text {
  font-size: 14px;
  color: var(--text-3);
}

.detail-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s8) var(--s5);
  user-select: none;
}

.detail-empty__icon {
  width: 44px;
  height: 44px;
  color: var(--border);
}

.detail-empty__text {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-3);
}

.detail-empty__hint {
  font-size: 12px;
  color: var(--text-3);
  opacity: 0.7;
}

.detail-empty__kbd {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--border);
  font-family: var(--sans);
  font-size: 11px;
  color: var(--text-3);
  background: var(--surface);
}

.pane-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

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

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Tighten the sticky detail toolbar so the back-chevron sits flush with
     the screen edge — Gmail-style. The button itself becomes icon-only
     (square hit target) and loses internal horizontal padding. */
  .detail-toolbar {
    padding-left: var(--s2);
    padding-right: var(--s2);
    gap: 2px;
  }
  .detail-back {
    width: 32px;
    padding: 0;
    justify-content: center;
    gap: 0;
    font-size: 0;
  }

  .sidebar {
    display: none;
  }

  .reader {
    flex-direction: column;
    height: auto;
    overflow: auto;
  }

  .main-panel {
    height: auto;
    overflow: visible;
  }

  .letter-list {
    overflow: visible;
  }

  .main-panel.has-detail .letter-list {
    display: none;
  }
  .main-panel.has-detail .letter-detail {
    display: flex;
    min-height: calc(100vh - var(--topbar-h));
  }

  /* Mobile: 2-row layout like Gmail mobile */
  .letter-item {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    grid-template-rows: auto auto;
    height: auto;
    padding: 10px 14px 10px 0;
    align-items: start;
  }

  .letter-item__check {
    display: none;
  }

  /* star spans both rows, vertically centered */
  .letter-item__star {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    width: 32px;
    height: 32px;
  }

  /* row 1: company name */
  .letter-item__sender {
    grid-column: 2;
    grid-row: 1;
    font-size: 13.5px;
    padding-right: var(--s3);
    padding-bottom: 3px;
  }

  /* row 1 right: meta (year · kind · summary read time) */
  .letter-item__meta {
    grid-column: 3;
    grid-row: 1;
    padding-right: 0;
    gap: 6px;
  }

  /* Hide the kind badge on mobile to keep the right edge tight — most
     letters are annual; quarterlies are rare in the launch corpus. The
     badge still renders on the detail page. */
  .letter-item__meta .letter-item__kind-badge {
    display: none;
  }

  /* row 2: author + hero line, spans col 2–3 */
  .letter-item__subject {
    grid-column: 2 / 4;
    grid-row: 2;
    font-size: 13px;
  }

  /* Default mobile topbar: [☰] [Brand centered] [🔍]. Tapping the search
     icon flips body[data-mobile-search="open"] which hides hamburger +
     brand + search-trigger and reveals the search-input + back button,
     so the topbar becomes [←] [search input]. Filtering happens via the
     existing reader.js handler on .topbar__search-input — no overlay,
     no second list. */
  .topbar__menu,
  .topbar__mobile-search {
    display: inline-flex;
  }

  .topbar {
    gap: var(--s2);
    padding: 0 var(--s2);
  }

  /* Brand grows to fill the middle so it sits centered between hamburger
     (left) and search-icon (right); both flank buttons are the same 40px
     width so text-align:center renders dead-centre on the viewport. */
  .topbar__brand {
    flex: 1;
    min-width: 0;
    text-align: center;
    font-size: 15px;
  }

  /* Kept rendered (not display:none) so a synchronous .focus() inside the
     search-icon click handler triggers the iOS keyboard. Hidden visually
     via opacity + offscreen sizing instead. */
  .topbar__search {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    max-width: none;
  }

  body[data-mobile-search="open"] .topbar__menu,
  body[data-mobile-search="open"] .topbar__brand,
  body[data-mobile-search="open"] .topbar__mobile-search {
    display: none;
  }

  body[data-mobile-search="open"] .topbar__search-back {
    display: inline-flex;
  }

  body[data-mobile-search="open"] .topbar__search {
    position: relative;
    width: auto;
    height: auto;
    overflow: visible;
    opacity: 1;
    pointer-events: auto;
    flex: 1;
  }

  /* iOS auto-zooms inputs whose computed font-size is < 16px on focus,
     which scales the page and produces horizontal scroll. Force 16px on
     mobile to suppress that zoom. */
  .topbar__search-input {
    font-size: 16px;
  }

  .letter-article {
    padding: var(--s5) var(--s4) var(--s7);
  }

  .letter-article__title {
    font-size: 20px;
  }
  .letter-body {
    font-size: 16px;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  :root {
    --nav-w: 180px;
  }
}

/* ── Letter body — markdown rendered HTML ────────────────────── */
.letter-body h1,
.letter-body h2,
.letter-body h3,
.letter-body h4 {
  font-family: var(--sans);
  color: var(--text);
  margin-top: 1.6em;
  margin-bottom: 0.5em;
  line-height: 1.3;
}

.letter-body h1 {
  font-size: 20px;
  font-weight: 700;
}
.letter-body h2 {
  font-size: 17px;
  font-weight: 700;
}
.letter-body h3 {
  font-size: 15px;
  font-weight: 600;
}

.letter-body ul,
.letter-body ol {
  padding-left: 1.4em;
  margin-bottom: 1.2em;
}
.letter-body li {
  margin-bottom: 0.4em;
}

.letter-body strong {
  font-weight: 700;
  color: var(--text);
}
.letter-body em {
  font-style: italic;
}

.letter-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.letter-body a:hover {
  color: var(--accent-h);
}

.letter-body blockquote {
  border-left: 3px solid var(--border);
  padding-left: var(--s4);
  margin: 1.2em 0;
  color: var(--text-2);
  font-style: italic;
}

.letter-body hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 2em 0;
}

/* ── Detail actions separator ────────────────────────────────── */
.detail-actions__sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 var(--s1);
  flex-shrink: 0;
}

/* ── Disabled nav items ──────────────────────────────────────── */
.detail-action.is-disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

/* ── Date in byline ──────────────────────────────────────────── */
.letter-article__date {
  color: var(--text-3);
}
.letter-article__updated {
  margin-top: var(--s4);
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-3);
}

/* ── Full-page letter (standalone / SEO URL) ─────────────────── */
.letter-page {
  max-width: 700px;
  margin: 0 auto;
  padding: var(--s5) var(--s5) var(--s8);
}

.letter-page-back {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  margin-bottom: var(--s5);
  transition: color var(--t);
}

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

/* ── Sidebar filter sections ─────────────────────────────────── */
.sidebar__item--more {
  /* hidden by default; shown when expand button is clicked */
}

.sidebar__expand-btn {
  display: block;
  width: calc(100% - var(--s3));
  text-align: left;
  padding: 6px var(--s4);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--nav-accent);
  transition: color var(--t);
  border-radius: 0 var(--rfull) var(--rfull) 0;
  margin-right: var(--s3);
}

.sidebar__expand-btn:hover {
  color: #fff;
}

/* ── Filter chips ────────────────────────────────────────────── */
.filter-chips {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  padding: var(--s2) var(--s4);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--s2);
  border-radius: var(--rfull);
  font-size: 12px;
  font-weight: 500;
  background: var(--accent-light);
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition:
    border-color var(--t),
    background var(--t);
}

.filter-chip:hover {
  background: #d8e6f5;
  border-color: var(--accent);
}

.filter-chip__x {
  font-size: 14px;
  line-height: 1;
  opacity: 0.7;
}

.filter-chips__clear {
  font-size: 12px;
  color: var(--text-3);
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-left: var(--s1);
  transition: color var(--t);
}

.filter-chips__clear:hover {
  color: var(--text-2);
}

/* ── Letter list share button ────────────────────────────────── */
.letter-list__share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r2);
  color: var(--text-3);
  transition:
    color var(--t),
    background var(--t);
  flex-shrink: 0;
}

.letter-list__share-btn:hover {
  color: var(--accent);
  background: var(--accent-light);
}

/* ── Pagination ──────────────────────────────────────────────── */
.letter-list__pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s4);
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.letter-list__page-btn {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 var(--s3);
  border-radius: var(--r2);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  border: 1.5px solid var(--border);
  background: var(--surface);
  transition:
    border-color var(--t),
    color var(--t),
    background var(--t);
}

.letter-list__page-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-light);
}

/* ── Empty state clear link ──────────────────────────────────── */
.list-empty__clear {
  font-size: 13px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Search highlight (<mark> from ts_headline) ──────────────── */
mark {
  background: #fff3b0;
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}

/* ── Entity header (company / author profile pages) ──────────── */
.entity-header {
  border-bottom: 1px solid var(--border);
  padding: var(--s5) var(--s5) 0;
}

.entity-header__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  padding-bottom: var(--s4);
}

.entity-header__img {
  width: 48px;
  height: 48px;
  border-radius: var(--r3);
  object-fit: contain;
  flex-shrink: 0;
  border: 1px solid var(--border-subtle);
}

.entity-header__img--round {
  border-radius: 50%;
}

.entity-header__initials {
  width: 48px;
  height: 48px;
  border-radius: var(--r3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
}

.entity-header__initials--round {
  border-radius: 50%;
}

.entity-header__body {
  min-width: 0;
}

.entity-header__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--s1);
  line-height: 1.3;
}

.entity-header__desc {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.5;
  margin: 0 0 var(--s2);
}

.entity-header__link {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}

.entity-header__link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Content pages (articles / principles) ───────────────────── */

/* Topbar */
.content-topbar {
  display: flex;
  align-items: center;
  gap: var(--s5);
  height: var(--topbar-h);
  padding: 0 var(--s6);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.content-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
  text-decoration: none;
  color: var(--text);
  flex-shrink: 0;
  white-space: nowrap;
}

.content-topbar__nav {
  display: flex;
  gap: var(--s4);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.content-topbar__nav::-webkit-scrollbar {
  display: none;
}

.content-topbar__nav-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  padding: var(--s1) var(--s2);
  border-radius: var(--r1);
  white-space: nowrap;
  scroll-snap-align: start;
  transition:
    color var(--t),
    background var(--t);
}

/* Mobile: horizontal nav strip is replaced by the hamburger + drawer pattern
   from the reader (same JS handler, same drawer markup). Drop the strip
   entirely below 768px so it doesn't fight the hamburger for space. */
@media (max-width: 768px) {
  .content-topbar {
    gap: var(--s2);
    padding: 0 var(--s2);
  }

  .content-topbar__brand {
    font-size: 14px;
  }

  .content-topbar__nav {
    display: none;
  }
}

.content-topbar__nav-link:hover,
.content-topbar__nav-link.is-active {
  color: var(--text);
  background: var(--surface-hover);
}

.content-topbar__nav-link.is-active {
  color: var(--accent);
  font-weight: 600;
}

/* Page wrapper — full-height flex column so footer always sits at bottom */
.content-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Page layout */
.content-page {
  flex: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--s7) var(--s6);
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--s8);
  align-items: start;
}

@media (max-width: 900px) {
  .content-page {
    grid-template-columns: 1fr;
    gap: var(--s6);
    padding: var(--s5) var(--s4);
  }
}

.content-page__body {
  min-width: 0;
}

/* Article header */
.content-header {
  margin-bottom: var(--s6);
}

.content-header__title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: var(--s3);
}

.content-header__date {
  font-size: 13px;
  color: var(--text-3);
  display: block;
  margin-bottom: var(--s3);
}

.content-header__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.content-header__entity {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s4);
}

.content-header__entity-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--r2);
}

.content-header__entity-img--round {
  border-radius: 50%;
}

.content-header__entity-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-2);
}

/* Prose */
.content-prose {
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  font-family: var(--serif);
}

.content-prose h2 {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: var(--s7) 0 var(--s4);
  line-height: 1.3;
  scroll-margin-top: calc(var(--topbar-h) + var(--s4));
}

.content-prose h3 {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin: var(--s5) 0 var(--s3);
}

.content-prose p {
  margin-bottom: var(--s4);
}

.content-prose ul,
.content-prose ol {
  margin: 0 0 var(--s4) var(--s5);
}

.content-prose li {
  margin-bottom: var(--s2);
}

.content-prose blockquote {
  border-left: 3px solid var(--accent);
  padding-left: var(--s4);
  margin: var(--s5) 0;
  color: var(--text-2);
  font-style: italic;
}

.content-prose a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.content-prose a:hover {
  color: var(--accent-h);
}

.content-prose strong {
  font-weight: 700;
  color: var(--text);
}

.content-prose code {
  font-family: ui-monospace, monospace;
  font-size: 0.875em;
  background: var(--surface-hover);
  padding: 0.1em 0.35em;
  border-radius: var(--r1);
}

/* Sidebar */
.content-sidebar {
  position: sticky;
  top: calc(var(--topbar-h) + var(--s5));
}

@media (max-width: 900px) {
  .content-sidebar {
    position: static;
    order: -1;
  }
}

.content-sidebar__section {
  margin-bottom: var(--s5);
}

.content-sidebar__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: var(--s2);
}

.content-toc__link {
  display: block;
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
  padding: var(--s1) 0;
  border-left: 2px solid var(--border);
  padding-left: var(--s3);
  transition:
    color var(--t),
    border-color var(--t);
}

.content-toc__link:hover,
.content-toc__link.is-active {
  color: var(--accent);
  border-left-color: var(--accent);
}

.content-toc__link.is-active {
  font-weight: 500;
}

.content-sidebar__letter {
  display: block;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  padding: var(--s1) 0;
  transition: color var(--t);
}

.content-sidebar__letter:hover {
  color: var(--accent-h);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Footer */
.content-footer {
  margin-top: auto;
  padding: var(--s5) var(--s6);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
}

.content-footer__back {
  font-size: 13px;
  color: var(--text-2);
  text-decoration: none;
}

.content-footer__back:hover {
  color: var(--accent);
}

.content-footer__legal {
  font-size: 13px;
  color: var(--text-2);
}

.content-footer__legal a {
  color: var(--text-2);
  text-decoration: none;
}

.content-footer__legal a:hover {
  color: var(--accent);
}

.content-footer__sep {
  color: var(--text-2);
}

/* Index pages */
.content-index-page {
  flex: 1;
  max-width: 780px;
  margin: 0 auto;
  padding: var(--s7) var(--s6);
}

@media (max-width: 600px) {
  .content-index-page {
    padding: var(--s5) var(--s4);
  }
}

.content-index-page__header {
  margin-bottom: var(--s6);
}

.content-index-page__title {
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--s2);
}

.content-index-page__desc {
  font-size: 15px;
  color: var(--text-2);
  line-height: 1.5;
}

.content-index-page__section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: var(--s7) 0 var(--s4);
}

.content-tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s5);
}

.content-tag-filter__all {
  font-size: 12px;
  font-weight: 500;
  padding: 3px var(--s3);
  border-radius: var(--rfull);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-2);
  text-decoration: none;
  transition:
    background var(--t),
    color var(--t);
}

.content-tag-filter__all.is-active,
.content-tag-filter__all:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.tag.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Content cards */
.content-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.content-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  padding: var(--s5);
  text-decoration: none;
  transition:
    border-color var(--t),
    box-shadow var(--t);
}

.content-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.content-card__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--s2);
  line-height: 1.35;
}

.content-card__excerpt {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.55;
  margin-bottom: var(--s3);
}

.content-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}

.content-card__date {
  font-size: 12px;
  color: var(--text-3);
}

.content-empty {
  font-size: 14px;
  color: var(--text-3);
  padding: var(--s7) 0;
  text-align: center;
}

/* ── Reading paths (task 46) ─────────────────────────────────── */

/* Filter chip rows on /paths. Hidden by the route until total ≥ 20. */
.paths-filters {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  margin-bottom: var(--s5);
}
.paths-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}
.paths-filter-row__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted, #6a6a6a);
  margin-right: var(--s2);
}
.tag__count {
  opacity: 0.65;
  font-weight: 400;
  margin-left: 2px;
}

.path-page {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s6) var(--s5);
}
.path-page__header {
  margin-bottom: var(--s7, 48px);
}
.path-page__title {
  font-size: 32px;
  line-height: 1.2;
  margin: 0 0 var(--s3) 0;
}
.path-page__meta {
  font-size: 13px;
  color: var(--ink-muted, #6a6a6a);
  margin-bottom: var(--s3);
}
.path-page__sep {
  color: var(--border-subtle);
}
.path-page__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s4);
}
.path-page__intro p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-muted, #3a3a3a);
}

.path-sequence {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: path-seq;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}
.path-entry__link {
  display: flex;
  gap: var(--s4);
  padding: var(--s4);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.path-entry__link:hover {
  border-color: var(--accent);
  background: var(--accent-light);
}
.path-entry__position {
  flex: 0 0 28px;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink-muted, #999);
  line-height: 1.2;
}
.path-entry__avatar {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-light);
  overflow: hidden;
}
.path-entry__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.path-entry__body {
  flex: 1;
  min-width: 0;
}
.path-entry__title-row {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s1);
}
.path-entry__title {
  font-weight: 600;
  font-size: 16px;
}
.path-entry__tier {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}
.path-entry__tier--strong {
  color: var(--ink-muted, #5a5a5a);
}
.path-entry__tier--notable {
  color: var(--ink-muted, #8a8a8a);
}
.path-entry__blurb {
  margin: 0 0 var(--s2) 0;
  font-style: italic;
  color: var(--ink-muted, #4a4a4a);
  line-height: 1.5;
}
.path-entry__meta {
  font-size: 13px;
  color: var(--ink-muted, #6a6a6a);
}
.path-entry__sep {
  color: var(--border-subtle);
}

/* "Appears in reading paths" footer on letter detail pages */
.letter-paths {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--border-subtle);
}
.letter-paths__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted, #6a6a6a);
  margin-bottom: var(--s2);
}
.letter-paths__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.letter-paths__link {
  color: var(--accent);
  text-decoration: none;
}
.letter-paths__link:hover {
  text-decoration: underline;
}

/* ── Citation markers (inline footnote-style links) ──────────── */
.citation-marker {
  text-decoration: none;
  color: var(--accent);
  font-weight: 500;
  margin-left: 1px;
  border-radius: 2px;
  padding: 0 2px;
  transition: background var(--t);
}

.citation-marker:hover,
.citation-marker:focus-visible {
  background: var(--accent-light);
  outline: none;
}

.citation-marker sup {
  font-size: 0.72em;
  font-variant-numeric: tabular-nums;
}

.citation-broken {
  color: var(--text-3);
  font-size: 0.85em;
  border-bottom: 1px dotted var(--text-3);
  cursor: help;
}

/* ── PDF modal ─────────────────────────────────────────────── */
.pdf-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  background: var(--nav-bg);
}

.pdf-modal__bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 8px var(--s4);
  background: var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  color: rgba(255, 255, 255, 0.85);
  flex: 0 0 auto;
  min-height: 48px;
}

.pdf-modal__bar-left,
.pdf-modal__bar-center,
.pdf-modal__bar-right {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.pdf-modal__bar-left {
  flex: 1 1 0;
  min-width: 0;
}

.pdf-modal__bar-center {
  flex: 0 0 auto;
}

.pdf-modal__bar-right {
  flex: 1 1 0;
  justify-content: flex-end;
}

.pdf-modal__title {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pdf-modal__title strong {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdf-modal__subtitle {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdf-modal__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  border-radius: var(--r2);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--t),
    color var(--t);
}

.pdf-modal__icon-btn:hover,
.pdf-modal__icon-btn:focus-visible {
  background: var(--nav-hover);
  color: #fff;
  outline: none;
}

.pdf-modal__icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.pdf-modal__icon-btn.is-copied {
  position: relative;
  color: #fff;
  background: var(--nav-hover);
}
.pdf-modal__icon-btn.is-copied::after {
  content: "Link copied";
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  animation: copied-fade 1.6s ease forwards;
}

.pdf-modal__page-indicator {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
  padding: 0 6px;
  min-width: 56px;
  text-align: center;
}

.pdf-modal__zoom {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r2);
  padding: 0 6px 0 8px;
  height: 28px;
  transition: border-color var(--t);
}

.pdf-modal__zoom:focus-within {
  border-color: var(--nav-accent);
  background: rgba(255, 255, 255, 0.1);
}

.pdf-modal__zoom-input {
  width: 36px;
  background: transparent;
  border: 0;
  outline: none;
  color: #fff;
  font: inherit;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 500;
  text-align: right;
  padding: 0;
  -moz-appearance: textfield;
}

.pdf-modal__zoom-input::-webkit-outer-spin-button,
.pdf-modal__zoom-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.pdf-modal__zoom-suffix {
  color: rgba(255, 255, 255, 0.6);
  font-size: 13px;
  margin-left: 2px;
  pointer-events: none;
}

.pdf-modal__icon-btn [data-fit-icon] {
  display: none;
}

.pdf-modal__icon-btn[data-fit="width"] [data-fit-icon="page"] {
  display: block;
}

.pdf-modal__icon-btn[data-fit="page"] [data-fit-icon="width"] {
  display: block;
}

.pdf-modal__icon-btn:not([data-fit]) [data-fit-icon="page"] {
  display: block;
}

.pdf-modal__divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 4px;
}

.pdf-modal__frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: var(--nav-bg);
  display: block;
}

body.pdf-modal-open {
  overflow: hidden;
}

@media (max-width: 720px) {
  .pdf-modal__bar {
    padding: 6px var(--s2);
    gap: var(--s2);
  }

  .pdf-modal__title strong {
    font-size: 13px;
  }

  /* Hide the whole title block on mobile (not just the subtitle). The user
     just clicked through from the letter page — they know what they're
     reading. Toolbar real estate is too tight to render the title legibly. */
  .pdf-modal__title {
    display: none;
  }

  /* On mobile we hide the "Open PDF in new tab" affordance (browser PDF
     viewers on phones are usually worse than the inline one anyway) but
     KEEP the copy-link button — sharing a passage from a phone is the
     case where this control matters most. */
  .pdf-modal__bar-right > a.pdf-modal__icon-btn {
    display: none;
  }

  /* Compact page indicator: "12 / 47" instead of "Page 12 of 47". The right
     X close button on bar-right is enough; drop the redundant left close. */
  .pdf-modal__page-word {
    display: none;
  }
  .pdf-modal__bar-left > [data-modal-close] {
    display: none;
  }
}

.pdf-modal__page-slash {
  display: none;
  padding: 0 4px;
  opacity: 0.5;
}
@media (max-width: 720px) {
  .pdf-modal__page-slash {
    display: inline;
  }
}

/* ── Quotes (task 47) ─────────────────────────────────────────── */

.quotes-hub,
.quotes-filtered {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--s5) var(--s5) var(--s7);
}

/* Hub view */
.quotes-hub__header {
  margin-bottom: var(--s6, 40px);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--rule, #e6e3da);
}
.quotes-hub__header h1 {
  font-size: 36px;
  line-height: 1.15;
  margin: 0 0 var(--s3) 0;
  letter-spacing: -0.01em;
}
.quotes-hub__lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-muted, #3a3a3a);
  margin: 0;
  max-width: 60ch;
}
.quotes-hub__section {
  margin-top: var(--s6, 40px);
}
.quotes-hub__section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s4);
}
.quotes-hub__section-head h2 {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted, #3a3a3a);
  margin: 0;
}
.quotes-hub__section-meta {
  font-size: 13px;
  color: var(--ink-muted, #3a3a3a);
}
.quotes-hub__see-all {
  font-size: 13px;
  color: var(--accent, #4a5d7e);
  text-decoration: none;
}
.quotes-hub__see-all:hover {
  text-decoration: underline;
}
.quotes-hub__kind-hint {
  font-size: 13px;
  color: var(--ink-muted, #3a3a3a);
  margin-top: var(--s2);
  font-style: italic;
}

/* Filtered view */
.quotes-breadcrumb {
  font-size: 13px;
  color: var(--ink-muted, #3a3a3a);
  margin-bottom: var(--s4);
}
.quotes-breadcrumb a {
  color: var(--accent, #4a5d7e);
  text-decoration: none;
}
.quotes-breadcrumb a:hover {
  text-decoration: underline;
}
.quotes-breadcrumb__sep {
  margin: 0 6px;
  opacity: 0.5;
}
.quotes-breadcrumb__current {
  color: var(--ink, #1a1a1a);
}
.quotes-filtered__header {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--rule, #e6e3da);
  margin-bottom: var(--s4);
}
.quotes-filtered__title {
  flex: 1;
  min-width: 0;
}
.quotes-filtered__title h1 {
  font-size: 28px;
  line-height: 1.2;
  margin: 0 0 4px 0;
  letter-spacing: -0.01em;
}
.quotes-filtered__count {
  font-size: 14px;
  color: var(--ink-muted, #3a3a3a);
  margin: 0;
}

/* Avatar shared between author cards and quote cards */
.quote-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  background: var(--chip-bg, #efece4);
  color: var(--ink-muted, #3a3a3a);
  font-weight: 600;
  vertical-align: middle;
}
.quote-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Kind filter strip — chips with counts */
.quote-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: var(--s3) 0;
}
.quote-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--rule, #e6e3da);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink, #1a1a1a);
  text-decoration: none;
  background: #fff;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.quote-chip:hover {
  border-color: var(--ink-muted, #3a3a3a);
}
.quote-chip.is-active {
  background: var(--ink, #1a1a1a);
  color: #fff;
  border-color: var(--ink, #1a1a1a);
}
.quote-chip__count {
  font-size: 11px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* Author grid (hub) */
.quotes-author-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s3);
}
.quotes-author-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--rule, #e6e3da);
  border-radius: 8px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.15s,
    transform 0.15s;
}
.quotes-author-card:hover {
  border-color: var(--ink-muted, #3a3a3a);
  transform: translateY(-1px);
}
.quotes-author-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.quotes-author-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #1a1a1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quotes-author-card__count {
  font-size: 12px;
  color: var(--ink-muted, #3a3a3a);
  margin-top: 2px;
}

/* Quote list & card */
.quotes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.quotes-list > li {
  border-bottom: 1px solid var(--rule, #e6e3da);
}
.quotes-list > li:last-child {
  border-bottom: none;
}
.quote-card {
  display: flex;
  gap: var(--s4);
  padding: var(--s4) 0;
  align-items: flex-start;
}
.quote-card__avatar-link {
  display: block;
  flex-shrink: 0;
}
.quote-card__body {
  flex: 1;
  min-width: 0;
}
.quote-card__text {
  font-size: 19px;
  line-height: 1.55;
  margin: 0;
  color: var(--ink, #1a1a1a);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  quotes: "\201C" "\201D";
}
.quote-card__text::before {
  content: open-quote;
  margin-right: 2px;
}
.quote-card__text::after {
  content: close-quote;
  margin-left: 1px;
}
.quote-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: var(--s3);
  font-size: 13px;
  color: var(--ink-muted, #3a3a3a);
}
.quote-card__author {
  color: var(--ink, #1a1a1a);
  font-weight: 600;
  text-decoration: none;
}
.quote-card__author:hover {
  text-decoration: underline;
}
.quote-card__letter {
  color: var(--ink-muted, #3a3a3a);
  text-decoration: none;
}
.quote-card__letter:hover {
  text-decoration: underline;
}
.quote-card__sep {
  opacity: 0.4;
}
.quote-card__kind {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 3px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  background: var(--chip-bg, #efece4);
  color: var(--ink-muted, #3a3a3a);
  font-family: var(--font-sans, system-ui);
}
.quote-card__kind--aphorism {
  background: #f0e9d6;
  color: #6b5616;
}
.quote-card__kind--thesis {
  background: #e3eaf1;
  color: #2f4a6a;
}
.quote-card__kind--mistake {
  background: #f3e3e3;
  color: #7a3838;
}
.quote-card__kind--lesson {
  background: #ede3f1;
  color: #553a6e;
}
.quote-card__kind--definition {
  background: #e3f1e8;
  color: #2f5e3f;
}
.quote-card__cite {
  margin-left: auto;
  font-size: 12px;
  color: var(--accent, #4a5d7e);
  text-decoration: none;
  white-space: nowrap;
}
.quote-card__cite:hover {
  text-decoration: underline;
}

/* Pagination */
.quotes-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule, #e6e3da);
  font-size: 14px;
}
.quotes-pagination__link {
  color: var(--accent, #4a5d7e);
  text-decoration: none;
}
.quotes-pagination__link:hover:not(.quotes-pagination__link--disabled) {
  text-decoration: underline;
}
.quotes-pagination__link--disabled {
  color: var(--ink-muted, #3a3a3a);
  opacity: 0.4;
}
.quotes-pagination__pos {
  color: var(--ink-muted, #3a3a3a);
}
.quotes-empty {
  text-align: center;
  color: var(--ink-muted, #3a3a3a);
  padding: var(--s6) 0;
}

@media (max-width: 640px) {
  .quotes-hub,
  .quotes-filtered {
    padding: var(--s4) var(--s4) var(--s6);
  }
  .quotes-hub__header h1 {
    font-size: 28px;
  }
  .quotes-filtered__title h1 {
    font-size: 22px;
  }
  .quote-card {
    gap: var(--s3);
  }
  .quote-card__text {
    font-size: 17px;
  }
  .quote-card__cite {
    margin-left: 0;
    width: 100%;
  }
  .quotes-author-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}