/* =============================================================
   TOKENS
   ============================================================= */
:root {
  /* type */
  --serif: "EB Garamond", "Cormorant Garamond", "Adobe Garamond Pro", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* neutrals */
  --bg:           #ffffff;
  --bg-warm:      #fbfaf7;
  --bg-warmer:    #f5f1e8;
  --pane-bg:      #fafafa;
  --ink:          #1a1a1a;
  --ink-soft:     #3a3a3a;
  --muted:        #6a6a6a;
  --muted-soft:   #9a9a9a;
  --rule:         #e6e6e6;
  --rule-warm:    #ece8df;
  --hairline:     #f0ede5;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.04);
  --shadow-md:    0 4px 12px rgba(0,0,0,.06);

  /* layout */
  --topbar-h: 48px;
  --lane-h: 96px;
  --lane-rail-w: 188px;
  --era-strip-h: 26px;
  --axis-h: 28px;
  --pane-w-detail: 0%;
  --pane-w-time: 100%;
  --transition: 320ms cubic-bezier(.4,.0,.2,1);

  /* dot tiers */
  --dot-tier1: 18px;
  --dot-tier2: 12px;
  --dot-tier3: 8px;

  /* edges */
  --edge-w: 1.25px;
  --edge-w-lit: 2px;

  /* school defaults (overridden by data registries) */
  --c-advaita: #2563eb;
  --c-vishishtadvaita: #059669;
  --c-dvaita: #d97706;
  --c-bhedabheda: #9333ea;
  --c-acintya: #db2777;
  --c-shuddha: #be123c;
  --c-avibhaga: #0891b2;
  --c-trika: #475569;
  --c-cross: #475569;
  --c-proto: #6b7280;
}

/* =============================================================
   BASE
   ============================================================= */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; }
a { color: inherit; }

/* =============================================================
   TOPBAR
   ============================================================= */
.topbar {
  height: var(--topbar-h);
  padding: 0 18px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 320;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.topbar h1 {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
.topbar h1 .title-short { display: none; }
.topbar h1 .title-full { display: inline; }
.topbar .subtitle {
  font-family: var(--sans);
  font-size: 12px; color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 1;
  min-width: 0;
}
.topbar .spacer { flex: 1 1 auto; min-width: 0; }
.topbar-btn {
  background: none;
  border: 1px solid var(--rule);
  padding: 6px 11px;
  min-height: 44px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px; font-weight: 500;
  color: var(--ink);
  transition: border-color 140ms ease, background 140ms ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.topbar-btn:hover { border-color: var(--ink); background: var(--bg-warm); }
.topbar-btn--icon {
  display: inline-flex; align-items: center; gap: 6px;
}
.topbar-btn--icon svg { display: block; flex-shrink: 0; }
.topbar-btn.is-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* =============================================================
   STAGE / PANES
   ============================================================= */
.stage {
  display: grid;
  grid-template-columns: var(--pane-w-time) var(--pane-w-detail);
  height: calc(100vh - var(--topbar-h));
  height: calc(100svh - var(--topbar-h));
  height: calc(100dvh - var(--topbar-h));
  transition: grid-template-columns var(--transition);
  overflow: hidden;
}
/* Unified right-side panel: fixed-clamp width, the timeline flexes on the
   left. Wider than the legacy detail-only pane to fit translation/article
   reading without taking over the screen. */
body.is-detail-open {
  --pane-w-time: 1fr;
  --pane-w-detail: clamp(440px, 36vw, 560px);
}

/* =============================================================
   TIMELINE
   ============================================================= */
.timeline-pane {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

/* Reset-view button: visible only in Network mode. Re-frames the canvas at
   default zoom and the initial focus year. */
.reset-view-btn {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 6;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.reset-view-btn:hover {
  background: var(--bg-warm);
  color: var(--ink);
  border-color: var(--ink-soft);
}
.reset-view-btn[hidden] { display: none; }

/* Space-held: grab cursor everywhere over the timeline. */
body.is-space-pan .timeline-scroller,
body.is-space-pan .timeline-scroller * { cursor: grab !important; }
.timeline-scroller {
  position: relative;
  height: 100%;
  overflow: auto;
  scroll-behavior: auto;
}
.timeline-scroller::-webkit-scrollbar { width: 8px; height: 8px; }
.timeline-scroller::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 4px; }
.timeline-scroller::-webkit-scrollbar-thumb:hover { background: #b8b8b8; }

.canvas {
  position: relative;
  margin-left: var(--lane-rail-w);
  margin-top: var(--era-strip-h);
}

/* sticky lane rail */
.lane-rail {
  position: sticky;
  left: 0;
  top: var(--era-strip-h);
  width: var(--lane-rail-w);
  background: var(--bg);
  border-right: 1px solid var(--rule);
  box-shadow: 2px 0 6px rgba(0,0,0,.04);
  z-index: 8;
  float: left;
  margin-top: calc(-1 * var(--era-strip-h));   /* align to top of canvas */
  padding-top: var(--era-strip-h);
  /* Stack rows in a strict column. Each row is locked to --lane-h, so
     the rail's vertical positions are guaranteed to match the dot layer's
     lane_index * --lane-h offsets regardless of how many sub-rows the
     comparator group expands into. */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.lane-row {
  /* Locked row height: rail rows and canvas rows BOTH derive from --lane-h.
     min/max-height pin the box so a long lane-name with -webkit-line-clamp
     cannot push a row taller than --lane-h, which would desync the rail
     from the dot positions (which are computed at lane_index * --lane-h). */
  height: var(--lane-h);
  min-height: var(--lane-h);
  max-height: var(--lane-h);
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 12px 0 14px;
  border-bottom: 1px solid var(--rule);
  cursor: default;
  gap: 10px;
}
.lane-row:last-child { border-bottom: none; }
.lane-row.lane-row--group {
  cursor: pointer;
  background: var(--bg-warm);
}
.lane-row.lane-row--group:hover { background: var(--bg-warmer); }
.lane-row .swatch-bar {
  display: inline-block;
  width: 4px; height: 28px;
  border-radius: 2px;
  flex-shrink: 0;
}
.lane-row.lane-row--group .swatch-bar {
  background: linear-gradient(to bottom, #16a34a 0%, #14b8a6 18%, #ca8a04 36%, #6d28d9 54%, #65a30d 72%, #57534e 90%);
}
.lane-row .lane-meta {
  display: flex; flex-direction: column; gap: 1px;
  min-width: 0;
  flex: 1;
}
.lane-row .lane-name {
  font-family: var(--sans);
  font-size: 13px; font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.2;
  /* allow up to 2 lines, then ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  hyphens: auto;
}
.lane-row .lane-count {
  font-family: var(--sans);
  font-size: 10.5px;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.lane-row .lane-chevron {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 11px;
  font-family: var(--sans);
  transition: transform 180ms ease;
}
.lane-row.is-expanded .lane-chevron { transform: rotate(90deg); }
.lane-row.lane-row--sub {
  background: var(--bg-warm);
  padding-left: 24px;
}
.lane-row.lane-row--sub .lane-name { font-size: 12px; font-weight: 500; }
.lane-row.lane-row--sub .swatch-bar { width: 3px; height: 22px; }

/* sticky era strip */
.era-strip {
  position: sticky;
  top: 0;
  height: var(--era-strip-h);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--hairline);
  z-index: 7;
  pointer-events: none;
}
.era-label {
  position: absolute;
  top: 0;
  height: var(--era-strip-h);
  display: flex; align-items: center;
  padding: 0 10px;
  font-family: var(--sans);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* svg layer (era bands + edges) */
.timeline-svg {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
}

/* dots layer */
.timeline-dots {
  position: absolute;
  top: 0; left: 0;
}

/* date-range bars (drawn in svg) — see SVG fill in JS */

/* axis */
.timeline-axis {
  position: relative;
  height: var(--axis-h);
  border-top: 1px solid var(--rule);
  margin-top: 4px;
}
.year-tick {
  position: absolute;
  top: 0;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
  transform: translateX(-50%);
  padding-top: 10px;
}
.year-tick::before {
  content: "";
  display: block;
  width: 1px; height: 6px;
  background: var(--rule);
  position: absolute; left: 50%; top: 0;
  transform: translateX(-0.5px);
}

/* dots */
.thinker-dot {
  position: absolute;
  cursor: pointer;
  transform: translate(-50%, -50%);
  outline: none;
}
/* invisible 44x44 hit area for touch (centered on the dot) */
.thinker-dot::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.thinker-dot .node {
  background: var(--dot-color);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--dot-color);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.thinker-dot--tier-1 .node { width: var(--dot-tier1); height: var(--dot-tier1); border-width: 2.5px; }
.thinker-dot--tier-2 .node { width: var(--dot-tier2); height: var(--dot-tier2); }
.thinker-dot--tier-3 .node { width: var(--dot-tier3); height: var(--dot-tier3); border-width: 1.5px; opacity: 0.85; }
.thinker-dot--oral  .node { border-style: dashed; opacity: 0.85; }

.thinker-dot:hover .node {
  transform: scale(1.18);
  box-shadow: 0 0 0 1px var(--dot-color), 0 0 0 5px rgba(0,0,0,.05);
}
.thinker-dot.is-active .node {
  transform: scale(1.3);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--dot-color), 0 0 0 8px rgba(0,0,0,.06);
}
.thinker-dot:focus-visible .node {
  outline: 2px solid var(--dot-color);
  outline-offset: 4px;
}

/* Cluster fan: when a tight cluster is hovered/focused, each member slides
   horizontally by --fan-dx so every dot has its own clickable column. */
.thinker-dot {
  transition: transform 180ms ease;
}
.thinker-dot.is-fanned {
  transform: translate(-50%, -50%) translateX(var(--fan-dx, 0px));
  z-index: 6;
}
/* Tiny stack marker so users know more dots live behind this one. */
.thinker-dot--in-cluster::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--dot-color);
  transform: translate(8px, -10px);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.thinker-dot--in-cluster.is-fanned::after { opacity: 0; }
.timeline-dots.has-cluster-fan .thinker-dot:not(.is-fanned):not(.is-active) {
  opacity: 0.35;
}

/* labels — also a click target so users can select a thinker by tapping the
   name tag, not just the small dot. Implemented as a <button> so it gets
   native keyboard / a11y semantics. */
.thinker-dot .label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  /* Reset button defaults so it visually matches the old label. */
  background: transparent;
  border: 0;
  padding: 3px 4px;        /* generous hit area around the text */
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: 1.1;
  border-radius: 3px;
  transition: background-color 140ms ease;
}
.thinker-dot .label:hover {
  background: rgba(0,0,0,0.04);
}
.thinker-dot .label:focus-visible {
  outline: 2px solid var(--dot-color);
  outline-offset: 1px;
}
.thinker-dot.label-above .label { bottom: 10px; }
.thinker-dot.label-below .label { top: 10px; }
.thinker-dot .name {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  background: rgba(255,255,255,0.92);
  padding: 1px 4px;
  border-radius: 2px;
  pointer-events: none;     /* clicks go to the parent .label button */
}
.thinker-dot--tier-1 .name { font-size: 11.5px; font-weight: 600; }
.thinker-dot .dates {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 10px;
  color: var(--muted);
  margin-top: 1px;
  background: rgba(255,255,255,0.85);
  padding: 0 3px;
  border-radius: 2px;
  pointer-events: none;
}
.thinker-dot.is-active .name {
  border: 1px solid var(--dot-color);
  z-index: 5;
}

/* edges */
.lineage-edge {
  fill: none;
  stroke: var(--edge-color, #aaa);
  stroke-width: var(--edge-w);
  stroke-opacity: 0.55;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
  transition: stroke-opacity 160ms ease, stroke-width 160ms ease;
}
.lineage-edge--polemical {
  stroke: #94a3b8;
  stroke-dasharray: 4 3;
  stroke-opacity: 0.5;
}
.lineage-edge.is-lit {
  stroke-opacity: 1;
  stroke-width: var(--edge-w-lit);
}

/* hover dim others */
.timeline-dots.has-hover .thinker-dot:not(:hover):not(.is-active) {
  opacity: 0.35;
  transition: opacity 160ms ease;
}

/* date-range bars (drawn in SVG too) */
.date-bar {
  fill: var(--dot-color);
  fill-opacity: 0.45;
}
.date-bar--oral {
  fill: none;
  stroke: var(--dot-color);
  stroke-dasharray: 3 2;
  stroke-opacity: 0.5;
  stroke-width: 2;
}

/* era-band rects */
.era-band { pointer-events: none; }

/* lane separators (rendered as svg lines) */
.lane-separator {
  stroke: var(--rule);
  stroke-width: 1;
  pointer-events: none;
}

/* =============================================================
   UNIFIED RIGHT-SIDE PANEL — five tabs, one host
   (Thinker / Translation / Article / Citation / Source)
   ============================================================= */
.detail-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--rule);
  background: var(--pane-bg);
  padding: 0;
  opacity: 0;
  transition: opacity var(--transition);
  pointer-events: none;
  min-height: 0;
  overflow: hidden;
}

/* Drag handle on the LEFT edge of the panel. Lets the reader widen the
   pane for translation work or narrow it to give the canvas more room.
   Width is committed via inline style on .detail-pane; see app.js. */
.dp-resize-handle {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 6px;
  margin-left: -3px;
  z-index: 5;
  cursor: col-resize;
  background: transparent;
  transition: background 140ms ease;
  touch-action: none;
}
.dp-resize-handle:hover,
.dp-resize-handle.is-dragging {
  background: var(--rule);
}
body.is-resizing-pane,
body.is-resizing-pane * {
  cursor: col-resize !important;
  user-select: none !important;
}
body.is-resizing-pane .stage {
  transition: none !important;
}
body.is-detail-open .detail-pane {
  opacity: 1;
  pointer-events: auto;
  z-index: 40;
}

.dp-tabbar {
  display: flex; align-items: stretch;
  height: 36px;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
  background: var(--bg);
  padding: 0 6px 0 6px;
  gap: 0;
  position: sticky;
  top: 0;
  z-index: 3;
}
.dp-tab {
  background: none; border: none;
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}
.dp-tab[hidden] { display: none; }
.dp-tab:hover { color: var(--ink-soft); }
.dp-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.dp-tab-spacer { flex: 1; }
/* Close button: an explicit affordance so the panel can be dismissed.
   Bordered + labeled so it reads as a button rather than glyph noise. */
.dp-close {
  position: static;
  margin: 0 2px 0 4px;
  height: 26px;
  align-self: center;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 3px;
  line-height: 1;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.dp-close .dp-close-glyph {
  font-size: 15px;
  line-height: 1;
  font-weight: 500;
  display: inline-block;
  transform: translateY(-0.5px);
}
.dp-close:hover {
  background: var(--bg-warm);
  color: var(--ink);
  border-color: var(--ink-soft);
}
.dp-close:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* =============================================================
   PANEL OVERFLOW SAFETY
   Long file names, Sanskrit compounds, citation source-tree paths,
   and bare URLs would otherwise punch out the right edge of the
   panel. Force every text-bearing descendant to wrap.
   ============================================================= */
.detail-pane,
.detail-pane .dp-pane,
.detail-pane .dp-pane-body,
.detail-pane .dp-pane-head,
.detail-pane #detailContent,
.detail-pane .work-card,
.detail-pane .work-card .title,
.detail-pane .work-card .title-line,
.detail-pane .work-card .summary,
.detail-pane .work-card .ascr,
.detail-pane .work-card .ascr-notes,
.detail-pane .read-full-link,
.detail-pane .cite-source-tree,
.detail-pane .cite-source-tree-item,
.detail-pane .cite-source-file,
.detail-pane .cite-source-name,
.detail-pane .cite-passage,
.detail-pane .cite-passage-anchor,
.detail-pane .cpa-locus,
.detail-pane .cpa-sk,
.detail-pane .cpa-en {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.detail-pane a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.dp-panes {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}
.dp-pane {
  flex: 1;
  display: none;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.dp-pane.is-active { display: flex; }
.dp-pane[hidden] { display: none; }

.dp-pane-head {
  padding: 14px 22px 10px;
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
  background: var(--bg);
}
.dp-pane-head .dp-eyebrow {
  font-family: var(--sans);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 3px;
}
.dp-pane-head .dp-title {
  margin: 0;
  font-family: var(--sans);
  font-size: 14.5px; font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.dp-pane-head .dp-attrib {
  font-family: var(--serif);
  font-size: 12px;
  color: var(--ink-soft);
  margin: 4px 0 0;
}
.dp-pane-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  font-size: 14px;
  line-height: 1.55;
}
.dp-empty {
  color: var(--muted);
  font-style: italic;
  font-size: 13px;
  padding: 24px 22px;
  font-family: var(--serif);
}

/* Thinker pane: existing detailContent rendering, unchanged. */
#dpPaneThinker { overflow: hidden; }
#dpPaneThinker > #detailContent {
  flex: 1;
  overflow-y: auto;
  max-width: 760px;
  margin: 0 auto;
  padding: 26px 36px 88px;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.55;
}

.close-btn {
  background: none; border: none;
  font-size: 28px; line-height: 1; cursor: pointer; color: var(--muted);
}
.close-btn:hover { color: var(--ink); }

.detail-hero h2 {
  margin: 0 0 4px;
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.detail-hero .romanization {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  color: var(--muted);
}
.detail-hero .meta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.school-pill, .tier-pill {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px; font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 10px;
  border-radius: 999px;
}
.school-pill {
  background: var(--dot-color);
  color: #fff;
}
.tier-pill {
  background: var(--rule-warm);
  color: var(--ink-soft);
}
.detail-hero .dates-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--muted);
  margin: 4px 0 16px;
}

.thesis {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  border-left: 3px solid var(--dot-color);
  padding: 4px 0 4px 16px;
  margin: 14px 0 28px;
  color: var(--ink);
}

.section-head {
  font-family: var(--sans);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin: 40px 0 12px;
}

.lineage-block {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.lineage-block .lin-row { margin: 4px 0; }
.lineage-block .lin-label {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 8px;
}
.lineage-block a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.lineage-block a:hover {
  border-bottom-color: var(--ink);
}

/* work card */
.work-card {
  background: #ffffff;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--dot-color);
  border-radius: 4px;
  padding: 22px 26px;
  margin: 14px 0;
}
.work-card + .work-card { margin-top: 18px; }

.work-card .title-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-bottom: 6px;
}
.work-card .title {
  font-family: var(--sans);
  font-size: 14.5px; font-weight: 600;
  color: var(--ink);
}
.work-card .ascr {
  font-family: var(--sans);
  font-size: 11px; font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  flex-shrink: 0;
}
.work-card .summary {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  margin: 6px 0 10px;
  color: var(--ink);
}
.work-card .ascr-notes {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--muted);
  margin: 4px 0 8px;
}

.source-status {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 11px;
  color: var(--muted);
  margin: 8px 0 12px;
  padding: 6px 10px;
  border-radius: 3px;
  background: var(--bg-warm);
  font-weight: 500;
}
.source-status .dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.source-status--present {
  background: #f0fdf4;
  color: #166534;
}
.source-status--present .dot { background: #16a34a; }
.source-status--missing {
  background: #fef3c7;
  color: #92400e;
}
.source-status--missing .dot { background: #d97706; }
/* Dim "Read full work" button when text is not in corpus — translation will be a placeholder */
.work-card[data-source-status="primary-text-not-in-corpus"] .read-full-link,
.work-card[data-source-status="degraded-on-disk"] .read-full-link {
  opacity: 0.6;
  font-style: italic;
}
.read-full-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans);
  font-size: 13px; font-weight: 600;
  color: var(--dot-color);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
  transition: gap 180ms ease, opacity 180ms ease;
  cursor: pointer;
  background: none; border-left: none; border-right: none; border-top: none;
}
.read-full-link::after { content: "→"; transition: transform 180ms ease; }
.read-full-link:hover { gap: 10px; opacity: 0.85; }
.read-full-link:hover::after { transform: translateX(2px); }

.passages-nested {
  margin-top: 18px;
  padding-left: 16px;
  border-left: 2px solid var(--school-light, var(--rule));
}
.passages-nested .nested-head {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
}

/* passage card */
.passage-card {
  background: var(--bg-warm);
  border: 1px solid var(--rule-warm);
  border-radius: 3px;
  padding: 18px 22px;
  margin: 10px 0;
}
.passage-card .locus {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
}
.passage-card .sanskrit {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.5;
  font-weight: 500;
  margin: 8px 0 10px;
  color: var(--ink);
  font-feature-settings: "liga" 0, "clig" 0;
}
.passage-card .english {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  margin: 0 0 12px;
  color: var(--ink);
}
.passage-card .why {
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 8px 0 0;
}
.passage-card details {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--rule);
}
.passage-card summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--sans);
  font-size: 11px; font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 0;
}
.passage-card summary::before {
  content: "▸ ";
  display: inline-block;
  margin-right: 4px;
  transition: transform 160ms ease;
}
.passage-card details[open] summary::before { transform: rotate(90deg); }
.passage-card details[open] {
  background: #fffdf6;
  padding: 12px 16px 14px;
  border-radius: 3px;
  border-top: none;
  margin-top: 10px;
}

/* panini tables */
.panini-section { margin-top: 14px; }
.panini-section h4 {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 14px 0 6px;
}
.panini-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 13px;
}
.panini-table th {
  text-align: left;
  font-weight: 600;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: bottom;
}
.panini-table td {
  padding: 8px 10px 8px 0;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
  color: var(--ink-soft);
  line-height: 1.45;
}
.panini-table td:first-child {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
}

/* comparative claim cards */
.compclaim-card {
  background: #ffffff;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--verdict-color, var(--rule));
  border-radius: 4px;
  padding: 18px 22px;
  margin: 12px 0;
  position: relative;
}
.compclaim-card[data-verdict="genuine-disagreement"]   { --verdict-color: #b91c1c; --verdict-bg: #fee2e2; --verdict-fg: #7f1d1d; }
.compclaim-card[data-verdict="real-disagreement"]      { --verdict-color: #b91c1c; --verdict-bg: #fee2e2; --verdict-fg: #7f1d1d; }
.compclaim-card[data-verdict="terminological"]         { --verdict-color: #1d4ed8; --verdict-bg: #dbeafe; --verdict-fg: #1e3a8a; }
.compclaim-card[data-verdict="terminological-equivalence"] { --verdict-color: #1d4ed8; --verdict-bg: #dbeafe; --verdict-fg: #1e3a8a; }
.compclaim-card[data-verdict="parallel-structure"]     { --verdict-color: #047857; --verdict-bg: #d1fae5; --verdict-fg: #064e3b; }
.compclaim-card[data-verdict="shared-presupposition"]  { --verdict-color: #047857; --verdict-bg: #d1fae5; --verdict-fg: #064e3b; }
.compclaim-card[data-verdict="contested"]              { --verdict-color: #b45309; --verdict-bg: #fef3c7; --verdict-fg: #78350f; }
.verdict-pill {
  position: absolute;
  top: 14px; right: 18px;
  font-family: var(--sans);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--verdict-bg, var(--rule));
  color: var(--verdict-fg, var(--ink));
}
.compclaim-card .pair {
  font-family: var(--sans);
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-soft);
  margin: 0 96px 8px 0;
}
.compclaim-card .body p {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  margin: 6px 0;
}
.compclaim-card .body em {
  color: var(--muted);
  font-style: italic;
}

/* =============================================================
   PERSPECTIVES — interpretive readings, explicitly flagged
   ============================================================= */
.perspective-card {
  background: #fffaf0;
  border: 1px solid #e7d9b8;
  border-left: 4px solid #b45309;
  border-radius: 4px;
  padding: 18px 22px 16px;
  margin: 12px 0;
  position: relative;
}
.perspective-pill {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: #fef3c7;
  color: #78350f;
  vertical-align: middle;
}
.perspective-card .perspective-pill {
  position: absolute;
  top: 14px; right: 18px;
}
.perspective-pill--inline {
  margin-right: 6px;
  position: static;
  font-size: 9px;
  padding: 2px 7px;
}
.perspective-title {
  font-family: var(--serif);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0 96px 6px 0;
  color: var(--ink);
}
.perspective-subtitle {
  font-family: var(--serif);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 4px 0 10px;
}
.perspective-disclaimer {
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.55;
  color: #78350f;
  background: #fef9e7;
  border: 1px dashed #d6b873;
  border-radius: 3px;
  padding: 8px 10px;
  margin: 8px 0 12px;
}
.perspective-disclaimer em {
  font-style: italic;
  font-weight: 600;
  color: #7c2d12;
}
.perspective-open {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  background: var(--ink);
  color: #ffffff;
  border: none;
  border-radius: 3px;
  padding: 8px 14px;
  cursor: pointer;
}
.perspective-open:hover { background: #1f2937; }
@media (max-width: 720px) {
  .perspective-card .perspective-pill { top: auto; bottom: 14px; right: 14px; }
  .perspective-title { margin-right: 0; padding-bottom: 0; }
}

/* prose helpers */
em { font-style: italic; }
strong { font-weight: 600; }

/* =============================================================
   READING MODE
   ============================================================= */
body.is-reading-mode .timeline-pane { display: none; }
body.is-reading-mode .stage { grid-template-columns: 100%; }
body.is-reading-mode .detail-pane {
  background: var(--bg-warm);
  border-left: none;
  opacity: 1;
  pointer-events: auto;
}
body.is-reading-mode #detailContent {
  max-width: 720px;
  padding: 56px 32px 120px;
}
body.is-reading-mode .thesis { font-size: 17px; }
body.is-reading-mode .passage-card .sanskrit { font-size: 18px; }
body.is-reading-mode .work-card .summary { font-size: 15.5px; }
body.is-reading-mode .passage-card .english { font-size: 15.5px; }

.reading-nav {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 10px;
  margin-bottom: 30px;
}
.reading-nav button {
  background: none; border: none;
  font-family: var(--sans);
  font-size: 12px; font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 3px;
}
.reading-nav button:hover { background: var(--bg-warmer); }
.reading-nav .current {
  font-style: italic;
  color: var(--muted);
}

/* =============================================================
   ABOUT MODAL
   ============================================================= */
.about-modal {
  position: fixed; inset: 0;
  background: rgba(20,20,20,0.45);
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 40px 20px;
}
.about-modal.is-open { display: flex; }
.about-card {
  position: relative;
  background: var(--bg);
  max-width: 640px;
  width: 100%;
  border-radius: 6px;
  padding: 36px 44px 32px;
  box-shadow: var(--shadow-md);
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.65;
  max-height: 90vh;
  overflow-y: auto;
}
.about-card h2 {
  font-family: var(--sans);
  font-size: 20px; font-weight: 600;
  margin: 0 0 12px;
}
.about-card p { margin: 12px 0; }
.about-card .about-meta {
  margin-top: 20px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}
.about-card a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* =============================================================
   GLOSSARY POPOVER
   ============================================================= */
.glossary-popover {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: var(--shadow-md);
  padding: 16px 20px 18px;
  max-width: 420px;
  width: 420px;
  max-height: min(70vh, 640px);
  overflow-y: auto;
  z-index: 280;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
}
.glossary-popover::-webkit-scrollbar { width: 6px; }
.glossary-popover::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 3px; }
.glossary-popover .gp-close {
  position: absolute;
  top: 8px; right: 10px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  font-size: 20px; line-height: 1;
  cursor: pointer; color: var(--muted);
  border-radius: 4px;
  z-index: 2;
}
.glossary-popover .gp-close:hover,
.glossary-popover .gp-close:focus-visible {
  color: var(--ink);
  background: var(--rule-warm);
  outline: none;
}
.glossary-popover .gp-term {
  font-family: "Noto Serif", var(--serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  padding-right: 32px; /* clear the X close button */
}
.glossary-popover .gp-literal {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  margin: 4px 0 12px;
}
.glossary-popover .gp-label {
  display: block;
  font-family: var(--sans);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.glossary-popover .gp-invariant { margin-bottom: 12px; }
.glossary-popover .gp-perschool { border-top: 1px solid var(--rule); padding-top: 10px; }
.glossary-popover .gp-framing {
  margin: 6px 0 12px 0;
  padding: 8px 10px;
  background: #f3f6fb;
  border-left: 3px solid #4a6fa5;
  border-radius: 3px;
  font-size: 13px;
  line-height: 1.5;
}
.glossary-popover .gp-framing-status {
  font-weight: 600;
  color: #2b3e5a;
  margin-bottom: 4px;
}
.glossary-popover .gp-shared-core { color: #1f2937; }
.glossary-popover .gp-axes { margin-top: 4px; color: #4b5563; font-style: italic; }
.glossary-popover .gp-regtag {
  display: inline-block;
  font-size: 11px;
  color: #4b5563;
  background: #eef2f7;
  padding: 1px 6px;
  border-radius: 9px;
  margin-right: 6px;
  vertical-align: middle;
}
.glossary-popover .gp-translator {
  margin-top: 14px;
  border-top: 1px solid var(--rule);
  padding-top: 10px;
  background: #fffaf0;
  margin-left: -20px; margin-right: -20px;
  padding-left: 20px; padding-right: 20px; padding-bottom: 10px;
  border-radius: 0 0 4px 4px;
}
.glossary-popover .gp-translator .gp-label { color: #92400e; }
.glossary-popover .gp-row {
  margin: 6px 0;
  font-size: 13px;
}
.glossary-popover .gp-school {
  display: inline-block;
  font-family: var(--sans);
  font-size: 11px; font-weight: 600;
  background: var(--rule-warm);
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 6px;
  color: var(--ink-soft);
}
.term {
  cursor: pointer;
  border-bottom: 1px dotted var(--muted-soft);
  text-decoration: none;
}
.term:hover { border-bottom-style: solid; }

/* mobile: glossary popover becomes a centered bottom-sheet, not a positioned popover */
@media (max-width: 720px) {
  .glossary-popover {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px 14px 0 0;
    border: none;
    border-top: 1px solid var(--rule);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
    padding: 22px 22px 32px;
    max-height: 70vh;
    overflow-y: auto;
    font-size: 15px;
    line-height: 1.6;
    animation: gloss-slide-up 240ms cubic-bezier(.4,.0,.2,1);
  }
  .glossary-popover::before {
    content: "";
    display: block;
    width: 36px; height: 4px;
    background: var(--rule);
    border-radius: 2px;
    margin: -10px auto 14px;
  }
  .glossary-popover .gp-close {
    top: 14px; right: 14px;
    font-size: 24px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
  }
  .glossary-popover .gp-term { font-size: 22px; }
  .glossary-popover .gp-row { font-size: 14px; }
}
@keyframes gloss-slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* =============================================================
   CITATION POPOVER (clickable primary-source citations)
   ============================================================= */
.cite-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dotted var(--muted-soft);
  cursor: pointer;
}
.cite-link:hover { border-bottom-style: solid; }

.citation-popover {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: var(--shadow-md);
  padding: 16px 20px 18px;
  max-width: 460px;
  width: 460px;
  max-height: min(72vh, 720px);
  overflow-y: auto;
  /* Stays above the article reader and the mobile pane overlay. */
  z-index: 281;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  position: fixed;
}
.citation-popover::-webkit-scrollbar { width: 6px; }
.citation-popover::-webkit-scrollbar-thumb { background: #d8d8d8; border-radius: 3px; }
.citation-popover .cp-close {
  position: absolute;
  top: 8px; right: 10px;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none;
  font-size: 20px; line-height: 1;
  cursor: pointer; color: var(--muted);
  border-radius: 4px;
  z-index: 2;
}
.citation-popover .cp-close:hover,
.citation-popover .cp-close:focus-visible {
  color: var(--ink);
  background: var(--rule-warm);
  outline: none;
}
.citation-popover .cp-header {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 10px;
  padding-right: 32px; /* clear the X close button */
  margin-bottom: 12px;
}
.citation-popover .cp-locus {
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.citation-popover .cp-attrib {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
}
.citation-popover .cp-block {
  margin-bottom: 12px;
}
.citation-popover .cp-label {
  display: block;
  font-family: var(--sans);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.citation-popover .cp-sk {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
  background: var(--rule-warm);
  padding: 8px 12px;
  border-left: 2px solid var(--muted-soft);
  white-space: pre-wrap;
}
.citation-popover .cp-en {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--ink);
}
.citation-popover .cp-pending {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink-soft);
  background: #fffaf0;
  padding: 10px 12px;
  border-left: 2px solid #d4a548;
  border-radius: 0 4px 4px 0;
}
.citation-popover .cp-pending p { margin: 0; }
.citation-popover .cp-actions {
  border-top: 1px solid var(--rule);
  padding-top: 10px;
  margin-top: 8px;
}
.citation-popover .cp-open-thinker {
  font-family: var(--sans);
  font-size: 12px; font-weight: 600;
  background: var(--ink);
  color: var(--bg);
  border: none;
  padding: 6px 12px;
  border-radius: 3px;
  cursor: pointer;
}
.citation-popover .cp-open-thinker:hover { opacity: 0.85; }

.cite-scrim { display: none; }

/* mobile: bottom-sheet, mirrors glossary-popover treatment */
@media (max-width: 720px) {
  .citation-popover {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    top: auto !important; bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px 14px 0 0;
    border: none;
    border-top: 1px solid var(--rule);
    box-shadow: 0 -8px 24px rgba(0,0,0,0.12);
    padding: 22px 22px 32px;
    max-height: 72vh;
    overflow-y: auto;
    font-size: 15px;
    line-height: 1.6;
    animation: gloss-slide-up 240ms cubic-bezier(.4,.0,.2,1);
  }
  .citation-popover::before {
    content: "";
    display: block;
    width: 36px; height: 4px;
    background: var(--rule);
    border-radius: 2px;
    margin: -10px auto 14px;
  }
  .citation-popover .cp-close {
    top: 14px; right: 14px;
    font-size: 24px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
  }
  .cite-scrim {
    display: block;
    position: fixed; inset: 0;
    background: rgba(20,20,20,0.35);
    z-index: 279;
    animation: gloss-scrim-in 200ms ease;
  }
}

/* =============================================================
   UNIFIED PANEL — Citation tab
   ============================================================= */
.dp-citation-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px 32px;
  font-family: var(--serif);
}
.dp-citation-body .ccb-head {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.dp-citation-body .ccb-locus {
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.dp-citation-body .ccb-attrib {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
}
.dp-citation-body .ccb-context-label {
  font-family: var(--sans);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin: 14px 0 6px;
  padding-bottom: 4px;
  border-bottom: 1px dashed var(--rule);
}
.cite-context-row {
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 8px 0 12px;
  padding-left: 4px;
}
.cite-context-row .ccr-locus {
  font-family: var(--sans);
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.cite-context-row .ccr-sk {
  font-style: italic;
  white-space: pre-wrap;
  margin-bottom: 4px;
  color: var(--ink-soft);
}
.cite-context-row .ccr-en { color: var(--ink-soft); }

.cite-passage-anchor {
  position: relative;
  background: var(--bg-warm);
  padding: 14px 16px 14px 18px;
  border-left: 3px solid #c9a96a;
  border-radius: 0 3px 3px 0;
  margin: 16px 0;
}
.cite-passage-anchor .cpa-locus {
  font-family: var(--sans);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.cite-passage-anchor .cpa-sk {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  white-space: pre-wrap;
  margin-bottom: 8px;
  color: var(--ink);
}
.cite-passage-anchor .cpa-en {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--ink);
}
.cite-passage-anchor .cpa-pending {
  font-family: var(--serif);
  font-size: 12px;
  color: var(--ink-soft);
}
.cite-passage-anchor--unverified {
  border-left-color: var(--muted-soft);
  background: transparent;
  border: 1px dashed var(--rule);
}
.dp-citation-body .ccb-actions {
  border-top: 1px solid var(--rule);
  padding-top: 12px;
  margin-top: 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.dp-citation-body .ccb-action {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600;
  background: none;
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 6px 11px;
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 140ms ease, border-color 140ms ease;
}
.dp-citation-body .ccb-action:hover {
  background: var(--bg-warm);
  border-color: var(--muted-soft);
}
.dp-citation-body .ccb-action--primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.dp-citation-body .ccb-action--primary:hover {
  background: var(--ink-soft);
  color: var(--bg);
}
.dp-citation-body .ccb-note {
  font-family: var(--sans);
  font-size: 11px;
  font-style: italic;
  color: var(--muted);
  margin: 8px 0 0;
}

/* =============================================================
   UNIFIED PANEL — Source tab
   ============================================================= */
.dp-source-search {
  flex-shrink: 0;
  padding: 10px 16px;
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 36px;
  z-index: 2;
  background: var(--bg);
}
.dp-source-search input {
  width: 100%;
  font-family: var(--sans);
  font-size: 12px;
  padding: 6px 9px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--bg);
  color: var(--ink);
  box-sizing: border-box;
}
.dp-source-search input:focus {
  outline: none;
  border-color: var(--muted-soft);
}
.dp-source-tree {
  flex-shrink: 0;
  max-height: 38%;
  overflow-y: auto;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 12px;
  background: var(--pane-bg);
}
.dp-source-tree details { padding: 0; }
.dp-source-tree summary {
  list-style: none;
  cursor: pointer;
  padding: 3px 14px;
  color: var(--ink-soft);
  user-select: none;
}
.dp-source-tree summary::-webkit-details-marker { display: none; }
.dp-source-tree summary::before {
  content: "▸";
  display: inline-block;
  width: 12px;
  color: var(--muted);
  font-size: 9px;
  transition: transform 120ms ease;
}
.dp-source-tree details[open] > summary::before {
  transform: rotate(90deg);
}
.dp-source-tree .cst-group { padding-left: 0; }
.dp-source-tree .cst-group .cst-group { padding-left: 14px; }
.dp-source-tree .cst-leaf {
  padding: 3px 14px 3px 40px;
  cursor: pointer;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dp-source-tree .cst-leaf:hover { background: var(--bg-warm); color: var(--ink); }
.dp-source-tree .cst-leaf.is-active {
  background: var(--rule-warm);
  color: var(--ink);
  font-weight: 600;
}
.dp-source-tree .cst-group-label {
  font-weight: 600;
  color: var(--ink);
  text-transform: capitalize;
}
.dp-source-tree .cst-count {
  color: var(--muted);
  font-size: 10px;
  margin-left: 6px;
  font-weight: 400;
}
.dp-source-viewer {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 24px;
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  min-height: 0;
}
.dp-source-viewer .csv-head {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.dp-source-viewer .csv-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 4px;
}
.dp-source-viewer .csv-meta {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.dp-source-viewer .csv-meta span + span::before {
  content: " · ";
  color: var(--rule);
}
.dp-source-viewer pre.csv-body {
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  color: var(--ink);
}
/* Source tab: rendered (non-pre) body. The selectSourceFile() handler emits
   either renderMarkdownFull(text) (for `format === "markdown"`) or a
   line-preserving plain-text render with promoted `# Heading` lines
   (renderPlainSourceText). Both share these container styles. */
.dp-source-viewer .csv-body {
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  padding: 0;
}
/* GRETIL boilerplate header — collapsed by default. */
.dp-source-viewer .csv-gretil-header {
  margin: 6px 0 14px;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  background: var(--bg-warm);
  border-radius: 3px;
}
.dp-source-viewer .csv-gretil-header > summary {
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  list-style: revert;
}
.dp-source-viewer .csv-gretil-header > summary:hover { color: var(--ink); }
.dp-source-viewer .csv-gretil-header pre.csv-block {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ink-soft);
}
.dp-source-viewer .csv-body--md h1,
.dp-source-viewer .csv-body--md h2,
.dp-source-viewer .csv-body--md h3,
.dp-source-viewer .csv-body--pre .csv-heading {
  font-family: var(--sans);
  font-weight: 600;
  margin: 1.4em 0 0.4em 0;
  color: var(--ink);
  line-height: 1.3;
}
.dp-source-viewer .csv-body--md h1 { font-size: 18px; }
.dp-source-viewer .csv-body--md h2,
.dp-source-viewer .csv-body--pre h2.csv-heading { font-size: 16px; }
.dp-source-viewer .csv-body--md h3,
.dp-source-viewer .csv-body--pre h3.csv-heading,
.dp-source-viewer .csv-body--pre h4.csv-heading { font-size: 15px; color: var(--muted); }
.dp-source-viewer .csv-body--md p { margin: 0 0 0.85em 0; }
.dp-source-viewer .csv-body--md ul,
.dp-source-viewer .csv-body--md ol {
  margin: 0 0 1em;
  padding-inline-start: 1.2rem;
}
.dp-source-viewer .csv-body--md li { margin: 0.3em 0; }
.dp-source-viewer .csv-body--md em,
.dp-source-viewer .csv-body--md i { font-style: italic; }
.dp-source-viewer .csv-body--md strong,
.dp-source-viewer .csv-body--md b { font-weight: 600; }
.dp-source-viewer .csv-body--md hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 1.2em 0;
}
.dp-source-viewer .csv-body--md code {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.92em;
  background: var(--surface);
  padding: 1px 4px;
  border-radius: 3px;
}
.dp-source-viewer .csv-body--md table {
  border-collapse: collapse;
  margin: 0;
  font-size: 13px;
}
.dp-source-viewer .csv-body--md .md-table-wrap {
  overflow-x: auto;
  margin: 0.9em 0 1.1em;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background:
    linear-gradient(to right, rgba(26, 26, 26, 0.06), transparent 18px) left center / 18px 100% no-repeat,
    linear-gradient(to left, rgba(26, 26, 26, 0.06), transparent 18px) right center / 18px 100% no-repeat,
    var(--bg);
}
.dp-source-viewer .csv-body--md .md-table-wrap table {
  width: max(100%, 620px);
}
.dp-source-viewer .csv-body--md th,
.dp-source-viewer .csv-body--md td {
  border: 1px solid var(--rule);
  padding: 4px 8px;
  text-align: left;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}
.dp-source-viewer .csv-body--md th { background: var(--surface); font-weight: 600; }
.dp-source-viewer .csv-body--md blockquote {
  border-left: 3px solid var(--rule);
  margin: 0.8em 0;
  padding: 0 0 0 14px;
  color: var(--muted);
  font-style: italic;
  overflow-wrap: anywhere;
}
.dp-source-viewer .csv-body--pre .csv-block {
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0 0 1em 0;
  color: var(--ink);
}
.dp-source-viewer .csv-loading {
  color: var(--muted);
  font-style: italic;
}

/* =============================================================
   ARTICLES MODAL (chooser only — articles render in the panel)
   ============================================================= */
.articles-modal {
  position: fixed; inset: 0;
  background: rgba(20,20,20,0.45);
  z-index: 200;
  display: none;
  align-items: center; justify-content: center;
  padding: 40px 20px;
}
.articles-modal.is-open { display: flex; }
.articles-modal-inner {
  position: relative;
  background: var(--bg);
  max-width: 720px;
  width: 100%;
  border-radius: 6px;
  padding: 34px 42px 32px;
  box-shadow: var(--shadow-md);
  font-family: var(--serif);
  max-height: 90vh;
  overflow-y: auto;
}
.articles-modal-inner h2 {
  font-family: var(--sans);
  font-size: 22px; font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.005em;
}
.articles-intro {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 20px;
}
.articles-list { display: flex; flex-direction: column; gap: 14px; }
.article-row {
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}
.article-row:hover {
  border-color: var(--ink);
  background: var(--bg-warm);
}
.articles-modal-inner .close-btn {
  position: absolute;
  top: 12px;
  right: 14px;
}
.articles-section-head {
  margin: 8px 0 4px;
  padding: 6px 0 4px;
  border-top: 1px solid var(--rule);
}
.articles-section-head:first-child { border-top: none; padding-top: 0; }
.articles-section-title {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.articles-section-blurb {
  font-family: var(--serif);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 4px 0 6px;
  max-width: 60ch;
}

/* =============================================================
   UNIFIED PANEL — Article + Translation body typography
   (applies to .dp-article-body and .dp-translation-body — these
    replace the legacy .article-reader-content + .reader-content)
   ============================================================= */
.dp-article-body, .dp-translation-body {
  padding: 24px 28px 72px;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.dp-article-body > article, .dp-translation-body > article {
  max-width: 680px;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
}
.dp-article-body h1, .dp-translation-body h1 {
  font-family: var(--sans);
  font-size: 20px; font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.dp-article-body h2, .dp-translation-body h2 {
  font-family: var(--sans);
  font-size: 15px; font-weight: 600;
  margin: 24px 0 10px;
}
.dp-article-body h3, .dp-translation-body h3 {
  font-family: var(--sans);
  font-size: 13px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 22px 0 8px;
}
.dp-article-body blockquote, .dp-translation-body blockquote {
  border-left: 3px solid var(--rule);
  padding: 4px 0 4px 16px;
  margin: 14px 0;
  color: var(--ink-soft);
  font-style: italic;
  overflow-wrap: anywhere;
}
.dp-article-body ul, .dp-article-body ol,
.dp-translation-body ul, .dp-translation-body ol {
  margin: 0 0 1em;
  padding-inline-start: 1.2rem;
}
.dp-article-body li, .dp-translation-body li { margin: 0.28em 0; }
.dp-article-body hr, .dp-translation-body hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 1.3em 0;
}
.dp-article-body code, .dp-translation-body code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--bg-warm);
  padding: 1px 5px;
  border-radius: 2px;
}
.dp-article-body table, .dp-translation-body table {
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 13px;
  margin: 0;
}
.dp-article-body .md-table-wrap, .dp-translation-body .md-table-wrap {
  overflow-x: auto;
  margin: 16px 0;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background:
    linear-gradient(to right, rgba(26, 26, 26, 0.06), transparent 18px) left center / 18px 100% no-repeat,
    linear-gradient(to left, rgba(26, 26, 26, 0.06), transparent 18px) right center / 18px 100% no-repeat,
    var(--bg);
}
.dp-article-body .md-table-wrap table,
.dp-translation-body .md-table-wrap table {
  width: max(100%, 620px);
}
.dp-article-body th, .dp-article-body td,
.dp-translation-body th, .dp-translation-body td {
  text-align: left;
  padding: 6px 12px;
  border-bottom: 1px solid var(--hairline);
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* Sanskrit / non-English aside, side-by-side at desktop, stacked at mobile. */
.dp-article-body .sk-aside, .dp-translation-body .sk-aside {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg-warm);
}
.dp-article-body .sk-aside-pane, .dp-translation-body .sk-aside-pane {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.dp-article-body .sk-aside-pane > p:first-of-type,
.dp-translation-body .sk-aside-pane > p:first-of-type { margin-top: 0; }
.dp-article-body .sk-aside-pane > p:last-of-type,
.dp-translation-body .sk-aside-pane > p:last-of-type { margin-bottom: 0; }
.dp-article-body .sk-aside-label, .dp-translation-body .sk-aside-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}
.dp-article-body .sk-aside-sanskrit, .dp-translation-body .sk-aside-sanskrit {
  font-style: italic;
  color: var(--ink);
}
.dp-article-body .sk-aside-english, .dp-translation-body .sk-aside-english {
  color: var(--ink);
  border-left: 1px solid var(--rule);
  padding-left: 18px;
}
@media (max-width: 1023px) {
  .dp-article-body .sk-aside, .dp-translation-body .sk-aside {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .dp-article-body .sk-aside-english, .dp-translation-body .sk-aside-english {
    border-left: none;
    padding-left: 0;
    padding-top: 8px;
    border-top: 1px solid var(--rule);
  }
}

/* mobile: scrim behind glossary bottom sheet for tap-out-to-close */
.gloss-scrim { display: none; }
@media (max-width: 720px) {
  .gloss-scrim {
    display: block;
    position: fixed; inset: 0;
    background: rgba(20,20,20,0.35);
    z-index: 149;
    animation: gloss-scrim-in 200ms ease;
  }
}
@keyframes gloss-scrim-in {
  from { opacity: 0; } to { opacity: 1; }
}


/* =============================================================
   FILTER DRAWER
   ============================================================= */
.filter-drawer {
  position: absolute;
  top: var(--topbar-h);
  left: 0; right: 0;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  box-shadow: var(--shadow-md);
  z-index: 19;
  max-height: 0;
  overflow: hidden;
  transition: max-height 240ms ease;
}
.filter-drawer.is-open { max-height: 320px; overflow-y: auto; }
.filter-drawer-inner {
  padding: 14px 18px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.filter-head {
  margin: 0;
  font-family: var(--sans);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.filter-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 5px 11px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px; font-weight: 500;
  color: var(--ink-soft);
  transition: all 140ms ease;
  white-space: nowrap;
}
.filter-chip:hover { border-color: var(--ink); color: var(--ink); }
.filter-chip.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.filter-chip.is-on .chip-swatch { box-shadow: 0 0 0 1.5px #fff; }
.filter-chip .chip-swatch {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--chip-color, #888);
}
.filter-chip-row {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.filter-chip--preset {
  font-weight: 600;
  border-style: dashed;
}
.filter-bulk-row { margin-top: -2px; }
.filter-bulk-btn {
  background: none;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule);
  transition: color 140ms ease, text-decoration-color 140ms ease;
}
.filter-bulk-btn:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}
/* Chip wrap groups the main toggle with its solo affordance. */
.filter-chip-wrap {
  display: inline-flex;
  align-items: stretch;
  border-radius: 999px;
}
.filter-chip-wrap .filter-chip {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}
.filter-chip-solo {
  background: none;
  border: 1px solid var(--rule);
  border-left: 1px solid transparent;
  border-top-right-radius: 999px;
  border-bottom-right-radius: 999px;
  padding: 0 9px;
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  cursor: pointer;
  transition: color 140ms ease, background 140ms ease, border-color 140ms ease;
}
.filter-chip-wrap.is-on .filter-chip-solo {
  border-color: var(--ink);
  color: #cbd5e1;
  background: var(--ink);
  border-left-color: rgba(255,255,255,0.18);
}
.filter-chip-solo:hover {
  color: var(--ink);
  background: rgba(0,0,0,0.04);
}
.filter-chip-wrap.is-on .filter-chip-solo:hover {
  color: #fff;
  background: var(--ink);
}
/* Subtle pill shown in the topbar when solo-mode is active. */
.filter-solo-pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  margin-left: -4px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
}
.filter-solo-pill[hidden] { display: none; }
.filter-solo-pill:hover { background: #000; }
.filter-solo-pill::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #fbbf24;
  margin-right: 6px;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 1024px) {
  body.is-detail-open {
    --pane-w-time: 1fr;
    --pane-w-detail: clamp(380px, 46vw, 480px);
  }
  #dpPaneThinker > #detailContent { padding: 26px 28px 96px; }
  .dp-article-body, .dp-translation-body { padding: 24px 26px 80px; }
  .topbar .subtitle { display: none; }
}
@media (max-width: 720px) {
  :root {
    --lane-h: 64px;
    --lane-rail-w: 124px;
    --topbar-h: 52px;
    --era-strip-h: 22px;
  }
  .filter-chip-solo { padding: 0 7px; font-size: 9.5px; }
  .filter-solo-pill { font-size: 11px; padding: 0 8px; height: 22px; }
  /* Mobile: panel takes the full screen as a top-layer overlay so the
     short-form lanes still scroll behind. The grid still allocates space
     to the timeline column (1fr) but the pane absolutely covers it. */
  body.is-detail-open {
    --pane-w-time: 1fr;
    --pane-w-detail: 0px;
  }
  body.is-detail-open .detail-pane {
    position: fixed;
    top: var(--topbar-h);
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    width: 100%;
    z-index: 240;
    border-left: none;
    isolation: isolate;
  }
  body.is-detail-open .timeline-pane {
    pointer-events: none;
  }
  .dp-article-body, .dp-translation-body, #dpPaneThinker > #detailContent {
    padding: 22px 18px 80px;
  }
  .topbar { padding: 0 12px; gap: 8px; }
  .topbar h1 { font-size: 16px; font-weight: 700; }
  .topbar h1 .title-full { display: none; }
  .topbar h1 .title-short { display: inline; }
  .topbar .subtitle { display: none; }
  .topbar-btn--icon { padding: 7px 8px; }
  .topbar-btn--icon .btn-text { display: none; }
  /* In reading mode, expose the "Back to timeline" label so the user can find their way back. */
  body.is-reading-mode #readingModeBtn .btn-text { display: inline; }
  body.is-reading-mode #readingModeBtn { padding: 7px 11px; }
  #detailContent { padding: 22px 16px 80px; }
  .detail-hero h2 { font-size: 20px; }
  .thesis { font-size: 14.5px; padding-left: 14px; }
  .passage-card .sanskrit { font-size: 15.5px; }
  .work-card { padding: 16px 16px; }
  .passage-card { padding: 14px 14px; }
  .lane-row { padding: 0 8px 0 10px; gap: 8px; }
  /* On narrow viewports, hide date subtitle inline; show only on active dot. */
  .thinker-dot:not(.is-active) .dates { display: none; }
  .thinker-dot .name {
    font-size: 10px;
    padding: 1px 3px;
    max-width: 104px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .thinker-dot--tier-1 .name { font-size: 10.5px; }
  .thinker-dot.label-above .label { bottom: 9px; }
  .thinker-dot.label-below .label { top: 9px; }
  /* The label button on mobile keeps a comfortable tap area. */
  .thinker-dot .label { padding: 4px 5px; }
  .lane-row .lane-name {
    font-size: 11.5px;
    letter-spacing: -0.012em;
    /* Allow soft hyphenation but never break a word mid-letter unless we must. */
    word-break: normal;
    overflow-wrap: anywhere;
  }
  .lane-row .lane-count { font-size: 10px; }
  .lane-row .swatch-bar { height: 22px; width: 3px; }
  .lane-row.lane-row--sub { padding-left: 18px; }
  .lane-row.lane-row--sub .lane-name { font-size: 11px; }
  .filter-drawer-inner { padding: 12px 14px 14px; }
  .close-btn {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(6px);
    border: 1px solid var(--rule);
    border-radius: 50%;
    width: 36px; height: 36px;
    font-size: 22px;
    top: calc(var(--topbar-h) + 10px);
    right: 12px;
    left: auto;
    margin-right: 0;
    position: fixed;
    z-index: 30;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex; align-items: center; justify-content: center;
    padding: 0; line-height: 1;
  }
  .compclaim-card .pair { margin-right: 0; padding-bottom: 32px; }
  .verdict-pill { top: auto; bottom: 14px; right: 14px; }
  .panini-table { font-size: 12px; }
  .panini-table th, .panini-table td { padding: 5px 6px 5px 0; }
  /* prevent horizontal overflow on narrow viewports */
  .panini-section { overflow-x: auto; }
}
@media (max-width: 420px) {
  :root { --lane-rail-w: 116px; }
  .topbar { padding: 0 10px; gap: 6px; }
  .topbar-btn--icon { padding: 7px 7px; }
  .topbar h1 { font-size: 15px; }
}

/* =============================================================
   VIEW TOGGLE (segmented control: Lanes / Network)
   ============================================================= */
.view-toggle {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--rule);
  border-radius: 5px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg);
}
.view-toggle-btn {
  background: none;
  border: 0;
  padding: 6px 12px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  transition: background 140ms ease, color 140ms ease;
  white-space: nowrap;
}
.view-toggle-btn + .view-toggle-btn { border-left: 1px solid var(--rule); }
.view-toggle-btn:hover { background: var(--bg-warm); }
.view-toggle-btn.is-active {
  background: var(--ink);
  color: #fff;
}

/* =============================================================
   NETWORK VIEW
   ============================================================= */
body.view-network .lane-rail { display: none; }
body.view-network .canvas { margin-left: 0; }
body.view-network .lane-separator { display: none; }

/* Network "spine" — a faint horizontal anchor at canvas mid-height. */
body.view-network .network-spine {
  stroke: var(--rule);
  stroke-width: 1;
  stroke-dasharray: 2 6;
  opacity: 0.55;
}

/* Bezier lineage edges — visually identical class to the manhattan ones,
   the geometry difference is in the path d= attribute. */
body.view-network .lineage-edge { stroke-width: 1.1px; }

/* Network legend (sticky, top-right of timeline pane) */
.network-legend {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 9;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(6px);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: var(--shadow-sm);
  font-family: var(--sans);
  font-size: 11.5px;
  max-width: 220px;
  user-select: none;
}
.network-legend[hidden] { display: none; }
.network-legend-toggle {
  background: none;
  border: 0;
  padding: 7px 12px;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.02em;
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.network-legend-toggle::after {
  content: "▾";
  font-size: 9px;
  color: var(--muted);
  transition: transform 160ms ease;
}
.network-legend.is-open .network-legend-toggle::after { transform: rotate(180deg); }
.network-legend-list {
  list-style: none;
  margin: 0;
  padding: 4px 10px 10px;
  display: none;
  max-height: 60vh;
  overflow-y: auto;
}
.network-legend.is-open .network-legend-list { display: block; }
.network-legend-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  color: var(--ink-soft);
  font-size: 11.5px;
  line-height: 1.25;
}
.network-legend-list .swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

@media (max-width: 720px) {
  /* Replace icon-button text labels with a single condensed control on mobile */
  .view-toggle-btn { padding: 6px 10px; font-size: 11.5px; }
  .network-legend { top: 6px; right: 8px; max-width: min(44vw, 152px); font-size: 10.5px; }
  .network-legend-toggle { padding: 6px 10px; font-size: 11px; }
  .network-legend-list { padding: 2px 8px 8px; }
  .network-legend-list li { font-size: 10.5px; }
}

/* =============================================================
   Translation tab — reading-first render. Each verse card shows
   the default-language translation prominently, IAST and
   (optionally) Devanāgarī muted underneath, and hides the
   word-by-word + samāsa-vigraha + kāraka + verbal-modality
   apparatus behind a single disclosure. The Note stays inline
   as a subtle italic aside. The data layer is multilingual-
   ready: future Hindi/Bengali/Tamil/etc. files will use the
   same default-language slot.
   ============================================================= */

.dp-translation-body .tx-coverage {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 28px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg-warm);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.dp-translation-body .tx-coverage-tag {
  flex-shrink: 0;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 2px;
  background: var(--bg-warmer);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.dp-translation-body .tx-coverage-full .tx-coverage-tag { color: #2f6f3a; background: #ecf5ee; }
.dp-translation-body .tx-coverage-selection .tx-coverage-tag { color: #7a5500; background: #fbf1d9; }
.dp-translation-body .tx-coverage-placeholder .tx-coverage-tag { color: #803333; background: #f7e6e2; }
.dp-translation-body .tx-coverage em { font-style: italic; color: var(--ink); }
.dp-translation-body .tx-coverage-source {
  flex-shrink: 0;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 4px 10px;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.dp-translation-body .tx-coverage-source:hover { color: var(--ink); border-color: var(--muted-soft); }

.dp-translation-body .tx-preamble {
  margin: 0 0 32px;
  color: var(--ink-soft);
}

.dp-translation-body .tx-verse {
  margin: 0 0 38px;
  padding: 0;
}
.dp-translation-body .tx-verse + .tx-verse {
  border-top: 1px solid var(--hairline);
  padding-top: 28px;
}
.dp-translation-body .tx-verse-head {
  margin: 0 0 10px;
}
.dp-translation-body .tx-locus {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Default-language translation: the primary readable surface. */
.dp-translation-body .tx-default-lang {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 14px;
}
.dp-translation-body .tx-default-lang p { margin: 0 0 10px; }
.dp-translation-body .tx-default-lang p:last-child { margin-bottom: 0; }
.dp-translation-body .tx-default-lang blockquote {
  border-left: 2px solid var(--rule);
  padding-left: 14px;
  margin: 0 0 10px;
  font-style: normal;
  color: var(--ink);
}

/* IAST: secondary, italic, slightly muted. */
.dp-translation-body .tx-iast {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.dp-translation-body .tx-iast blockquote {
  border-left: 2px solid var(--rule-warm);
  padding-left: 14px;
  margin: 0;
  font-style: italic;
  color: var(--ink-soft);
}

/* Devanāgarī: secondary, regular weight. */
.dp-translation-body .tx-devanagari {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.dp-translation-body .tx-devanagari blockquote {
  border-left: 2px solid var(--rule-warm);
  padding-left: 14px;
  margin: 0;
  font-style: normal;
  color: var(--ink-soft);
}

/* Note: subtle italic aside, inline with the reading flow. */
.dp-translation-body .tx-note {
  margin: 14px 0 0;
  padding: 0 0 0 14px;
  border-left: 2px solid var(--hairline);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.dp-translation-body .tx-note p { margin: 0 0 6px; }
.dp-translation-body .tx-note p:last-child { margin-bottom: 0; }

/* Grammar disclosure: collapsed by default, expands inline. */
.dp-translation-body .tx-grammar {
  margin: 14px 0 0;
  border: none;
  padding: 0;
}
.dp-translation-body .tx-grammar > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--bg-warm);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
  user-select: none;
}
.dp-translation-body .tx-grammar > summary:hover {
  color: var(--ink);
  border-color: var(--muted-soft);
}
.dp-translation-body .tx-grammar > summary::-webkit-details-marker { display: none; }
.dp-translation-body .tx-grammar-caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  transition: transform 160ms ease;
}
.dp-translation-body .tx-grammar[open] > summary .tx-grammar-caret {
  transform: rotate(90deg);
}
.dp-translation-body .tx-grammar-body {
  margin-top: 14px;
  padding: 14px 16px 6px;
  background: var(--bg-warm);
  border: 1px solid var(--hairline);
  border-radius: 4px;
}
.dp-translation-body .tx-morph-block {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.dp-translation-body .tx-morph-block:last-child { margin-bottom: 0; }
.dp-translation-body .tx-morph-label {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 4px;
}
.dp-translation-body .tx-morph-sub {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--muted-soft);
  font-style: italic;
}
.dp-translation-body .tx-morph-block ul {
  margin: 4px 0 0;
  padding-left: 20px;
}
.dp-translation-body .tx-morph-block li {
  margin: 2px 0;
}
.dp-translation-body .tx-morph-block table {
  margin: 4px 0 0;
  font-size: 12.5px;
}
.dp-translation-body .tx-morph-block table th,
.dp-translation-body .tx-morph-block table td {
  padding: 4px 10px;
  border-bottom: 1px solid var(--hairline);
}

.dp-translation-body .tx-trailing {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
}

@media (max-width: 720px) {
  .dp-translation-body .tx-default-lang { font-size: 17px; }
  .dp-translation-body .tx-coverage { font-size: 12.5px; padding: 10px 12px; }
  .dp-translation-body .tx-coverage-source { margin-left: 0; margin-top: 4px; }
  .dp-translation-body .tx-grammar-body { padding: 12px 12px 4px; }
}


/* =============================================================
   THINKER-TAB CITATIONS — superscript footnotes (Fix 1)
   The visible cite-link text stays inline; we render a small
   [N] superscript directly after it. The matching numbered list
   sits at the bottom of the hero / work-card so the reader sees
   every reference in one place. Click any [N] (super or list) to
   open the Citation tab on that locus.
   ============================================================= */
sup.cite-fn {
  font-family: var(--sans);
  font-size: 9.5px;
  vertical-align: super;
  line-height: 0;
  margin-left: 1px;
  font-weight: 600;
}
sup.cite-fn .cite-fn-link {
  color: var(--accent, #6b3f06);
  text-decoration: none;
  border-bottom: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.45rem;
  min-height: 1.45rem;
  margin: -0.32rem -0.2rem -0.22rem -0.12rem;
  padding: 0 0.22rem;
  line-height: 1;
}
sup.cite-fn .cite-fn-link:hover {
  text-decoration: underline;
  color: var(--ink);
}
.cite-fn-wrap {
  margin: 18px 0 6px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.cite-fn-wrap .cite-fn-head {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}
.cite-fn-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 10px;
  row-gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.cite-fn-list .cite-fn-row {
  display: contents;
}
.cite-fn-list .cite-fn-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 600;
  color: var(--muted);
  text-align: right;
  min-width: 28px;
  white-space: nowrap;
}
.cite-fn-list .cite-fn-body {
  min-width: 0;
}
.cite-fn-list .cite-fn-rowlink {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dotted var(--muted-soft);
}
.cite-fn-list .cite-fn-rowlink:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
}
.cite-fn-list .cite-fn-rowlink em {
  font-style: italic;
}
.cite-fn-list .cite-fn-attrib {
  color: var(--muted);
  font-size: 11px;
  margin-left: 2px;
}

/* "Engaged passages (full work pending)" framing (Fix 4) */
.passages-nested .nested-head .nested-sub {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 400;
  font-style: italic;
  color: var(--muted);
  margin-left: 6px;
  letter-spacing: 0;
  text-transform: none;
}

/* =============================================================
   DRAGGABLE POPOVERS
   Both the glossary popover (.glossary-popover) and the citation
   popover (.citation-popover) are draggable from anywhere on their
   white body. The JS bails on interactive children (links, buttons,
   inputs, [data-no-drag]) and on text-selection gestures, so the
   drag never steals a click. Mobile renders the popovers as
   bottom-sheets and skips the drag entirely.
   ============================================================= */
.glossary-popover,
.citation-popover {
  /* Hint to UAs that pointer gestures here are app-managed (drag),
     while still letting the scrollbar and text selection work. */
  touch-action: pan-y;
}
.glossary-popover.is-dragging,
.citation-popover.is-dragging {
  cursor: grabbing;
  box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,0.18));
  opacity: 0.97;
  user-select: none;
}