/* ───────── Reset + base ───────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Georgia", serif;
  font-size: 14px;
  color: #1a1a1a;
  background: #fafafa;
  display: flex;
  flex-direction: column;
}

/* ───────── Topbar (audio) ───────── */
#topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: #1f3864;
  color: #fff;
  border-bottom: 1px solid #15264a;
  flex-shrink: 0;
}
#seminar-picker {
  background: #fff;
  color: #1f3864;
  font-family: "Arial", sans-serif;
  font-size: 13px;
  font-weight: bold;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #15264a;
  min-width: 240px;
}
#player {
  flex: 1;
  max-width: 700px;
  height: 36px;
}
#now-playing {
  font-family: "Arial", sans-serif;
  font-size: 12px;
  color: #c8d3e8;
  min-width: 80px;
  text-align: right;
}

/* Mobile "more" overflow menu wrapper. On wide viewports this is
   `display: contents` so now-playing / help / ronds / contact admin /
   status / R2 controls / version badge lay out exactly as if the wrapper
   didn't exist — ordinary flex children of #topbar, unchanged from
   before. The ≤720px block turns it into an actual dropdown panel; see
   there for the toggle button + panel styling. */
#topbar-overflow { display: contents; }
#topbar-more-toggle { display: none; }

/* ───────── Layout ───────── */
#layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ───────── Sidebar ───────── */
#sidebar {
  width: 260px;
  background: #f0f0f0;
  border-right: 1px solid #d0d0d0;
  overflow-y: auto;
  flex-shrink: 0;
}
#sidebar-header {
  padding: 8px 12px 8px 14px;
  font-family: "Arial", sans-serif;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  color: #666;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #d0d0d0;
  background: #f8f8f8;
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
#sidebar-header .sidebar-title { flex: 1; }
#sidebar-collapse {
  background: transparent;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  color: #555;
  font-size: 11px;
  line-height: 1;
  padding: 3px 7px;
  cursor: pointer;
}
#sidebar-collapse:hover { background: #e8e8e8; color: #1f3864; border-color: #888; }

/* Edge tab: appears at the left edge of the main content when the
   sidebar is collapsed on desktop. A thin horizontal pill that sits
   just below the topbar so it's always findable. */
#sidebar-expand {
  position: fixed;
  left: 0;
  top: 70px;                /* below topbar */
  z-index: 40;
  background: #1f3864;
  color: #fff;
  border: 1px solid #15264a;
  border-left: none;
  border-radius: 0 4px 4px 0;
  font-family: "Arial", sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 6px 12px 6px 8px;
  cursor: pointer;
  display: none;
  box-shadow: 2px 1px 6px rgba(0,0,0,0.18);
}
#sidebar-expand:hover { background: #2a4a8b; }
body.sidebar-collapsed #sidebar-expand { display: inline-block; }
#session-list { list-style: none; }
#session-list li {
  padding: 8px 14px;
  border-bottom: 1px solid #e5e5e5;
  cursor: pointer;
  font-family: "Arial", sans-serif;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#session-list li:hover { background: #e8e8e8; }
#session-list li.active { background: #d6e3f3; font-weight: bold; }
/* Manifest-driven dedupe: sessions whose canonical home is another
   seminar (editorial_manifest.json "_session".moved_to) are greyed out
   with a small ↪ redirect marker. Still clickable — opening one shows the
   redirect notice instead of the comparison. */
#session-list li.session-moved-dup { color: #999; }
#session-list li.session-moved-dup .session-label { font-style: italic; }
#session-list .session-moved-marker {
  flex-shrink: 0;
  font-size: 12px;
  color: #999;
  cursor: help;
}
#session-list .status-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.status-dot.ready   { background: #4caf50; }
.status-dot.partial { background: #ffb300; }
.status-dot.missing { background: #d32f2f; }
.status-dot.error   { background: #777;    }
#session-list .session-label { flex: 1; }
#session-list .run-btn {
  padding: 2px 8px;
  font-size: 11px;
  font-family: "Arial", sans-serif;
  background: #1f3864;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.1s;
}
#session-list li:hover .run-btn,
#session-list li.active .run-btn,
#session-list .run-btn.active { opacity: 1; }
#session-list .run-btn:disabled { background: #888; cursor: default; opacity: 0.5; }
#session-list .run-btn.force-btn { background: #c2410c; }       /* burnt orange */
#session-list .run-btn.force-btn:hover { background: #9a3412; }
#session-list .run-btn.compare-btn { background: #047857; }     /* teal — safe + free */
#session-list .run-btn.compare-btn:hover { background: #065f46; }
#session-list .run-btn.translate-btn { background: #4338ca; }   /* indigo — moderate cost (translation API) */
#session-list .run-btn.translate-btn:hover { background: #3730a3; }
/* In public/static mode there's no server, hide both run buttons */
body.public-mode #session-list .run-btn,
body.public-mode #session-list .force-btn { display: none; }

/* ───────── Main ───────── */
#main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
#session-meta {
  padding: 8px 16px;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  color: #555;
  background: #fff;
  border-bottom: 1px solid #d0d0d0;
}
#downloads-panel {
  background: #fafafa;
  border-bottom: 1px solid #e0e0e0;
  font-family: "Arial", sans-serif;
  font-size: 12px;
}
#downloads-panel[hidden] { display: none; }

/* ── Manifest-driven dedupe notice ───────────────────────────────── */
/* Shown instead of the comparison/reading content for a session whose
   canonical home is another seminar (editorial_manifest.json "_session"
   entry — see stages/compare.py, tools/stamp_editorial.py, app.js
   renderMovedNotice). body.session-moved hides the rest of the content
   chrome so nothing renders behind the notice. */
#moved-session-notice[hidden] { display: none; }
#moved-session-notice {
  background: #fff8e1;
  border: 1px solid #ffb300;
  border-left: 4px solid #ffb300;
  border-radius: 4px;
  padding: 14px 18px;
  margin: 12px 16px;
  font-family: "Arial", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #4a3b00;
  max-width: 640px;
}
#moved-session-notice p { margin: 0 0 10px; }
#moved-session-notice .moved-notice-link {
  display: inline-block;
  background: #1f3864;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
}
#moved-session-notice .moved-notice-link:hover { background: #2a4a8b; }

body.session-moved #find-bar,
body.session-moved #find-results,
body.session-moved #column-toggles,
body.session-moved #row-edit-toolbar,
body.session-moved #row-table-wrapper,
body.session-moved #reading-mode,
body.session-moved #editorial-mode,
body.session-moved #downloads-panel,
body.session-moved #edit-source-panel {
  display: none !important;
}

/* Collapsible <details> dropdown for downloads (replaces the old
   always-visible flex layout). Summary shows item counts; body is
   the old flex-wrap layout, shown only when expanded. */
#downloads-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 16px;
  color: #1f3864;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  user-select: none;
}
#downloads-details > summary::-webkit-details-marker { display: none; }
#downloads-details > summary:hover { background: #f0f0f0; }
#downloads-details[open] > summary { border-bottom: 1px solid #e8e8e8; }
.downloads-body {
  padding: 10px 16px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
}
#downloads-panel .download-group { min-width: 0; }
#downloads-panel .download-group h4 {
  margin: 0 0 4px 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #777;
}
#downloads-panel .download-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#downloads-panel .download-group li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
#downloads-panel .download-group a {
  color: #1f3864;
  text-decoration: none;
}
#downloads-panel .download-group a:hover { text-decoration: underline; }
#downloads-panel .download-size {
  color: #999;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

#session-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.quality-badge {
  border: 1px solid #b9c4d4;
  border-radius: 4px;
  background: #f7f9fc;
  color: #1f3864;
  font: 11px/1.2 Arial, sans-serif;
  padding: 3px 7px;
  cursor: pointer;
}
.permalink-btn {
  border: 1px solid #b9c4d4;
  border-radius: 4px;
  background: #f7f9fc;
  color: #1f3864;
  font: 11px/1.2 Arial, sans-serif;
  padding: 3px 7px;
  cursor: pointer;
  white-space: nowrap;
}
.permalink-btn:hover { background: #eef3fa; }
.permalink-btn.copied {
  border-color: #8ab28a;
  color: #2f6b2f;
  background: #f3fbf3;
}
.quality-badge:hover { background: #eef3fa; }
.quality-ok { border-color: #8ab28a; color: #2f6b2f; background: #f3fbf3; }
.quality-caution { border-color: #d4a72c; color: #795d00; background: #fff8df; }
.quality-review { border-color: #c76a5a; color: #8f2e20; background: #fff0ed; }
.quality-inline-note {
  color: #777;
  font: 11px/1.2 Arial, sans-serif;
}
#quality-popover {
  position: fixed;
  z-index: 1200;
  width: 340px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 1px solid #cfd7e2;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
  padding: 10px;
  font: 12px/1.35 Arial, sans-serif;
  color: #222;
}
.quality-popover-title {
  font-weight: 700;
  color: #1f3864;
  margin-bottom: 8px;
}
.quality-popover-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 12px;
  margin-bottom: 8px;
}
.quality-popover-grid span { color: #666; }
.quality-popover-issues {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.quality-issue {
  padding: 4px 6px;
  border-left: 3px solid #b9c4d4;
  background: #f7f7f7;
}
.quality-issue-big { border-left-color: #c76a5a; background: #fff0ed; }
.quality-issue-small { border-left-color: #d4a72c; background: #fff8df; }

#column-toggles {
  padding: 6px 16px;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  font-family: "Arial", sans-serif;
  font-size: 12px;
}
#column-toggles label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
#column-toggles .hint {
  margin-left: auto;
  color: #999;
  font-size: 11px;
}

/* ───────── Row table ───────── */
#row-table-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  background: #fff;
}
#row-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
#row-table thead th {
  position: sticky;
  top: 0;
  background: #1f3864;
  color: #fff;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-align: left;
  padding: 8px 10px;
  border-right: 1px solid #15264a;
  z-index: 2;
}
/* Data-column headers get a light per-column background applied inline
   by app.js (from each column's `color` field). That makes the default
   white header text unreadable, so override to a dark blue here. The
   # and time columns keep the default dark-blue/white treatment. */
#row-table thead th.col-data {
  color: #1f3864;
  border-right-color: rgba(0, 0, 0, 0.12);
}

/* Drag-reorder + resize affordances on data-column headers. # and time
   stay fixed. Targets the generic `.col-data` class — added by app.js's
   renderColumnsUI to every dynamic data column — so this works for
   Polity / Seuil / Gallagher etc., not just the original four. */
#row-table thead th.col-data {
  cursor: grab;
  user-select: none;
}
#row-table thead th.dragging { opacity: 0.4; cursor: grabbing; }
#row-table thead th.drop-target {
  box-shadow: inset 4px 0 0 #ff6f00;
}

/* Right-edge grab handle for column resize. A 14px hit zone with a
   thin always-visible divider in the middle (so users can see where to
   grab without having to hover-hunt). The JS resizer code also flips
   draggable=false on the parent th for the duration of the drag so the
   browser's HTML5 column-reorder can't compete for the same gesture. */
.col-resizer {
  position: absolute;
  top: 0;
  right: -7px;          /* center the 14px hit zone on the column divider */
  width: 14px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  z-index: 4;
  background: transparent;
  /* Always-visible 2px divider line, centered in the hit zone. The light
     pastel header backgrounds (now that text is dark) call for a dark
     divider, not the white one from when the whole header was navy. */
  border-left: 2px solid rgba(0, 0, 0, 0.22);
  margin-left: -1px;
  box-sizing: border-box;
  transition: border-color 0.1s ease, background 0.1s ease;
}
.col-resizer:hover {
  border-left-color: #ff6f00;
  background: rgba(255, 111, 0, 0.12);
}
body.col-resizing .col-resizer.active {
  border-left-color: #ff9800;
  background: rgba(255, 152, 0, 0.18);
}
body.col-resizing { cursor: col-resize !important; user-select: none; }
body.col-resizing * { user-select: none !important; cursor: col-resize !important; }
/* ── Corpus status modal ─────────────────────────────────────────── */
#status-btn {
  background: none; border: 1px solid #4a6595; color: #dfe7f5;
  border-radius: 4px; padding: 3px 10px; cursor: pointer; font-size: 12px;
}
#status-btn:hover { background: #2c4a7c; }
#status-modal {
  position: fixed; inset: 0; z-index: 1200;
  background: rgba(15, 25, 45, 0.55);
  display: flex; align-items: center; justify-content: center;
}
/* display:flex above overrides the hidden attribute's UA display:none,
   which made the modal unclosable — restore it explicitly. */
#status-modal[hidden] { display: none; }
#status-card {
  background: #fff; border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.35);
  width: min(860px, 94vw); max-height: 88vh; display: flex; flex-direction: column;
}
#status-card header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid #d9dee8;
  background: #1f3864; color: #fff; border-radius: 8px 8px 0 0;
  font-family: "Arial", sans-serif; font-size: 13px; font-weight: bold;
}
#status-summary { flex: 1; font-weight: normal; font-size: 11px; color: #c9d6ec; }
#status-card header button {
  background: none; border: none; color: #fff; cursor: pointer; font-size: 14px;
}
#status-body { overflow: auto; padding: 0; }
.st-table { border-collapse: collapse; width: 100%; font-size: 12px;
            font-family: "Arial", sans-serif; }
.st-table th {
  position: sticky; top: 0; background: #f2f5fa; color: #1f3864;
  text-align: center; padding: 6px 8px; border-bottom: 2px solid #d9dee8;
}
.st-table th.st-sem { text-align: left; }
.st-table td { padding: 5px 8px; text-align: center; border-bottom: 1px solid #eef1f6; }
.st-sem-row { cursor: pointer; background: #fafbfd; font-weight: 600; }
.st-sem-row:hover { background: #eef3fb; }
.st-sem-row td.st-sem { text-align: left; white-space: nowrap; }
.st-sess-row { cursor: pointer; }
.st-sess-row:hover { background: #f5f8fd; }
.st-sess-name { text-align: left !important; padding-left: 26px !important;
                font-family: monospace; font-size: 11px; }
.st-done  { color: #1d7a3d; background: #ebf7ef; }
.st-part  { color: #8a6d1a; background: #fbf6e3; }
.st-todo  { color: #b0b6c1; }
.st-stale { color: #b35c00; background: #fdf0e0; font-size: 10px; }
.st-err   { color: #b3261e; background: #fdecea; font-weight: bold; }
.st-quality { color: #b35c00; cursor: help; }
.st-n { color: #8a93a3; font-size: 11px; }

/* Filler column: width-less last column that soaks up leftover space so
   table-layout:fixed never redistributes slack into the data columns —
   their pixel widths stay exact, which is what makes resize drags track
   the cursor 1:1 with no snap on release. */
#row-table th.col-filler { padding: 0; border-right: none; }
#row-table td.col-filler {
  padding: 0;
  border-right: none;
  border-bottom: none;
  background: transparent;
}

#row-table th.col-num,  #row-table td.col-num  { width: 50px; text-align: center; }
#row-table th.col-time, #row-table td.col-time { width: 80px; text-align: right; font-family: monospace; font-size: 11px; }
#row-table td {
  vertical-align: top;
  padding: 8px 10px;
  border-bottom: 1px solid #d9dee8;
  border-right: 1px solid #d9dee8;
}
/* A−/A+ preference (shared with reading mode) scales comparison/split cells;
   1em base means delta 0 renders exactly as before. */
#row-table td.col-data { font-size: calc(1em + var(--table-font-delta, 0px)); }
#row-table td.col-num  { color: #999; font-family: "Arial", sans-serif; font-size: 11px; }
/* Per-column background colors come from `col.color` in the session's
   columns metadata, applied as INLINE style by app.js — no static
   per-key rules here (they wouldn't generalize to dynamic columns like
   Polity / Seuil / Gallagher). */
#row-table tr.audio-gap td.col-asr { color: #888; font-style: italic; background: #f2f3f4 !important; }
#row-table tr.quality-row-sparse td.col-num,
#row-table tr.quality-row-orphan td.col-num,
#row-table tr.quality-row-encoding td.col-num {
  background: #fff4dc;
}
.row-quality-mark {
  display: inline-block;
  margin-left: 3px;
  color: #9b5c00;
  font-weight: 700;
}

#row-table tr { cursor: pointer; user-select: text; }
#row-table tr:hover td { filter: brightness(0.97); }
/* Active-row highlight: left orange bar (works on any column color) plus
   a translucent warm overlay via inset box-shadow (preserves the column's
   own background — important now that any column can have any color). */
#row-table tr.active td {
  box-shadow:
    inset 3px 0 0 #ff6f00,
    inset 0 0 0 9999px rgba(255, 193, 7, 0.22);
}
/* Rows without audio alignment are no longer visually deprioritized —
   audio isn't a priority source, so a missing time_range shouldn't make
   the row look "incomplete". Cursor stays default since clicking a no-
   time row can't seek the player. */
#row-table tr.no-time { cursor: default; }

/* Column-toggle visibility is now applied directly by JS via
   element.style.display on each .col-<key> element, so no static
   .hide-col-* rules are needed. */

/* A condensed source cell (official edition compressing several Staferla
   rows) spans those rows. Top-align its text and mark the seam so it reads
   as one cell deliberately covering the span, not a rendering glitch. */
#row-table td.cell-span {
  vertical-align: top;
  box-shadow: inset 2px 0 0 rgba(120, 140, 200, 0.35);
}

/* Public-mode (static deploy) — no pipeline runs available */
body.public-mode #session-list .run-btn { display: none; }
body.public-mode #run-drawer            { display: none; }
/* Corpus status reports pipeline-stage coverage from /api/status, which
   only the live server provides — hide it on the static public deploy. */
body.public-mode #status-btn            { display: none; }
body.public-mode #column-toggles .hint::before {
  content: "Public read-only · ";
  color: #aaa;
}
html[lang="fr"] body.public-mode #column-toggles .hint::before {
  content: "Public en lecture seule · ";
}
html[lang="pt-BR"] body.public-mode #column-toggles .hint::before {
  content: "Público, somente leitura · ";
}

/* ───────── Run drawer ───────── */
#run-drawer {
  position: fixed;
  bottom: 0;
  right: 16px;
  width: 720px;
  max-width: calc(100vw - 32px);
  height: 320px;
  background: #1e1e1e;
  color: #ddd;
  border: 1px solid #333;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
  z-index: 100;
  transition: height 0.15s ease;
}
#run-drawer.collapsed { height: 32px; }
#run-drawer.hidden    { display: none; }
#run-drawer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #2d2d2d;
  border-bottom: 1px solid #333;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  cursor: default;
  border-radius: 6px 6px 0 0;
}
#run-title { font-weight: bold; }
#run-drawer-header .pill {
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 0.05em;
}
.pill.idle    { background: #555; color: #fff; }
.pill.running { background: #1e88e5; color: #fff; }
.pill.done    { background: #43a047; color: #fff; }
.pill.failed  { background: #e53935; color: #fff; }
.pill.killed  { background: #757575; color: #fff; }
.spacer { flex: 1; }
#run-drawer-header button {
  background: #3a3a3a;
  color: #ddd;
  border: 1px solid #555;
  padding: 2px 8px;
  font-size: 11px;
  font-family: "Arial", sans-serif;
  border-radius: 3px;
  cursor: pointer;
}
#run-drawer-header button:hover:not(:disabled) { background: #4a4a4a; }
#run-drawer-header button:disabled { opacity: 0.4; cursor: default; }

#run-log {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 11px;
  line-height: 1.45;
  color: #d4d4d4;
  background: #1e1e1e;
  white-space: pre-wrap;
  word-break: break-word;
}
#run-drawer.collapsed #run-log { display: none; }

/* ───────── Audio controls key (topbar legend) ───────── */
#controls-key {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: "Arial", sans-serif;
  font-size: 11px;
  color: #c8d3e8;
  white-space: nowrap;
  user-select: none;
}
#controls-key kbd {
  display: inline-block;
  font-family: Consolas, "Courier New", monospace;
  font-size: 10px;
  font-weight: bold;
  color: #1f3864;
  background: #e8eef9;
  border: 1px solid #aac0e0;
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 1px 5px;
  min-width: 10px;
  text-align: center;
  line-height: 1.2;
  margin: 0 1px;
}
#controls-key .sep   { color: #5a7099; margin: 0 4px; }
#controls-key .mouse { font-style: italic; }

/* On narrower windows hide the controls key so the topbar doesn't wrap */
@media (max-width: 1100px) {
  #controls-key { display: none; }
}

/* ───────── Help button + popover ───────── */
#help-btn {
  font-family: "Arial", sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #1f3864;
  background: #e8eef9;
  border: 1px solid #aac0e0;
  border-radius: 4px;
  padding: 4px 9px;
  cursor: pointer;
  white-space: nowrap;
}
#help-btn:hover { background: #d6e2f5; }

#contact-admin-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #1f3864;
  border: 1px solid #15264a;
  border-radius: 4px;
  padding: 6px 10px;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}
#contact-admin-link:hover { background: #f1f5fb; }
#contact-admin-link:focus-visible {
  outline: 2px solid #9bb7e5;
  outline-offset: 2px;
}

/* Link out to the standalone Borromean-rings visualization tool (served at
   /ronds/ on the same site). Gold accent so it reads as a feature, not admin. */
#ronds-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f6ecc9;
  color: #5a4a1a;
  border: 1px solid #d9c583;
  border-radius: 4px;
  padding: 6px 10px;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}
#ronds-link:hover { background: #efe1b0; }
#ronds-link:focus-visible {
  outline: 2px solid #d9c583;
  outline-offset: 2px;
}

/* Link to the "How these texts were made" (AI-written methods) pages.
   Same anchor pattern as #ronds-link, but in the blue info palette of the
   admin-note/help buttons since it is documentation, not a feature. */
#methods-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8eef9;
  color: #1f3864;
  border: 1px solid #aac0e0;
  border-radius: 4px;
  padding: 6px 10px;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  white-space: nowrap;
}
#methods-link:hover { background: #d6e2f5; }
#methods-link:focus-visible {
  outline: 2px solid #9bb7e5;
  outline-offset: 2px;
}

#help-popover {
  position: fixed;
  top: 56px;
  right: 12px;
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100vh - 72px);
  overflow: auto;
  background: #fff;
  border: 1px solid #aac0e0;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.28);
  z-index: 2100;
}
#help-popover[hidden] { display: none; }
#help-popover-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1f3864;
  color: #fff;
  font-family: "Arial", sans-serif;
  font-weight: bold;
  font-size: 13px;
  padding: 8px 12px;
  position: sticky;
  top: 0;
}
#help-popover-card > header button {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
}
#help-popover-body { padding: 6px 14px 14px; }
#help-popover-body section { margin-top: 12px; }
#help-popover-body h4 {
  margin: 0 0 5px;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1f3864;
  border-bottom: 1px solid #e2e8f4;
  padding-bottom: 3px;
}
#help-popover-body ul {
  margin: 0; padding-left: 18px;
  font-size: 12.5px; color: #2a2a2a; line-height: 1.55;
}
#help-popover-body p { margin: 2px 0; font-size: 12.5px; color: #2a2a2a; }
#help-popover-body table.help-keys { border-collapse: collapse; width: 100%; }
#help-popover-body table.help-keys td {
  padding: 3px 6px; font-size: 12.5px; vertical-align: top;
}
#help-popover-body table.help-keys td:first-child { white-space: nowrap; width: 40%; }
#help-popover kbd {
  display: inline-block;
  font-family: Consolas, "Courier New", monospace;
  font-size: 10px;
  font-weight: bold;
  color: #1f3864;
  background: #e8eef9;
  border: 1px solid #aac0e0;
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 1px 5px;
  margin: 0 1px;
  line-height: 1.2;
}

/* ───────── Admin note button + popover ───────── */
#admin-note-btn {
  font-family: "Arial", sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #1f3864;
  background: #e8eef9;
  border: 1px solid #aac0e0;
  border-radius: 4px;
  padding: 4px 9px;
  cursor: pointer;
  white-space: nowrap;
}
#admin-note-btn:hover { background: #d6e2f5; }

#admin-note-popover {
  position: fixed;
  top: 56px;
  right: 12px;
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - 72px);
  overflow: auto;
  background: #fff;
  border: 1px solid #aac0e0;
  border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.28);
  z-index: 2100;
}
#admin-note-popover[hidden] { display: none; }
#admin-note-card > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #1f3864;
  color: #fff;
  font-family: "Arial", sans-serif;
  font-weight: bold;
  font-size: 13px;
  padding: 8px 12px;
  position: sticky;
  top: 0;
}
#admin-note-card > header button {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
}
#admin-note-body { padding: 6px 16px 16px; }
#admin-note-body section { margin-top: 14px; }
#admin-note-body h4 {
  margin: 0 0 5px;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1f3864;
  border-bottom: 1px solid #e2e8f4;
  padding-bottom: 3px;
}
#admin-note-body p {
  margin: 8px 0;
  font-size: 12.5px;
  color: #2a2a2a;
  line-height: 1.55;
}
#admin-note-body ul {
  margin: 4px 0;
  padding-left: 18px;
  font-size: 12.5px;
  color: #2a2a2a;
  line-height: 1.55;
}
#admin-note-body li { margin: 6px 0; }
#admin-note-body a { color: #1f3864; }

/* ───────── R2 publish controls (topbar) ───────── */
#r2-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Arial", sans-serif;
  font-size: 11px;
  color: #c8d3e8;
  white-space: nowrap;
  user-select: none;
}
#auto-sync-label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
#auto-sync-label input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: #43a047;
}
#manual-sync-btn {
  background: #2d4a72;
  color: #e8eef9;
  border: 1px solid #15264a;
  font-family: "Arial", sans-serif;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 3px;
  cursor: pointer;
}
#manual-sync-btn:hover { background: #3d5a82; }
#manual-sync-btn:disabled { opacity: 0.5; cursor: default; }
#manual-sync-btn.running { background: #43a047; }

/* In static/public mode hide R2 controls (no live server) */
body.public-mode #r2-controls { display: none; }

/* ───────── Language switcher (topbar) ───────── */
#lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: "Arial", sans-serif;
  font-size: 11px;
  user-select: none;
}
#lang-switcher button {
  background: transparent;
  color: #c8d3e8;
  border: 1px solid #2d4a72;
  font-family: "Arial", sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 7px;
  border-radius: 3px;
  cursor: pointer;
  letter-spacing: 0.03em;
}
#lang-switcher button:hover { background: #2d4a72; }
#lang-switcher button.active {
  background: #2d4a72;
  color: #fff;
  border-color: #43a047;
}

/* ───────── Version badge + update banner ───────── */
#version-badge {
  font-family: Consolas, "Courier New", monospace;
  font-size: 10px;
  color: #c8d3e8;
  background: rgba(255, 255, 255, 0.08);
  padding: 3px 6px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  user-select: text;
  cursor: help;
}
#version-badge.loading { color: #889ab8; }
#version-badge.stale   { background: #ffb300; color: #1f3864; font-weight: bold; }
#version-badge.static  { background: rgba(255,255,255,0.05); color: #889ab8; }

#update-banner {
  background: #ffb300;
  color: #1f3864;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  font-weight: bold;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #e69a00;
}
/* The id-selector above overrides [hidden]'s default display:none, so we
   need an even more specific rule to keep the banner hidden until JS
   decides to show it. */
#update-banner[hidden] { display: none; }
#update-banner button {
  background: #1f3864;
  color: #fff;
  border: none;
  padding: 3px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-family: "Arial", sans-serif;
  font-size: 12px;
}
#update-banner button:hover { background: #2a4a80; }
#update-banner #update-banner-dismiss {
  background: transparent;
  color: #1f3864;
  font-weight: normal;
  margin-left: auto;
}

/* ───────── Sidebar toggle (hamburger) — visible on desktop too ─── */
/* On desktop it toggles `body.sidebar-collapsed`; on mobile it
   toggles `body.sidebar-open` (slide-in). One button, two behaviors. */
#sidebar-toggle {
  display: inline-block;
  background: transparent;
  color: #fff;
  border: 1px solid #5a7099;
  border-radius: 4px;
  font-size: 16px;
  line-height: 1;
  padding: 4px 9px;
  cursor: pointer;
  touch-action: manipulation;
}
#sidebar-toggle:hover { background: rgba(255,255,255,0.08); }

/* Desktop collapsed state: hide the sidebar entirely so the main
   content gets the full width. Does NOT affect the mobile overlay. */
body.sidebar-collapsed #sidebar { display: none; }

#sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 49;
}
#sidebar-backdrop[hidden] { display: none; }

/* ───────── Tablet (≤ 1024px, iPad portrait) ───────── */
@media (max-width: 1024px) {
  #sidebar { width: 220px; }
  #player { max-width: none; }
  #seminar-picker { min-width: 180px; }
  #row-table th, #row-table td { padding: 6px 8px; }
  #run-drawer { width: calc(100vw - 32px); }
}

/* ───────── Mobile (≤ 720px, phones + iPad split-view) ───────── */
@media (max-width: 720px) {
  body { font-size: 15px; }

  /* Topbar wraps; show hamburger; hide non-essential controls */
  #topbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 10px;
    padding-top: max(8px, env(safe-area-inset-top));
  }
  #sidebar-toggle { display: inline-block; }
  #seminar-picker {
    flex: 1;
    min-width: 0;
    font-size: 14px;
  }
  #player {
    order: 10;
    flex: 1 1 100%;
    height: 40px;
    min-width: 0;
  }
  #now-playing {
    order: 11;
    flex: 1 1 auto;
    text-align: left;
    font-size: 11px;
  }
  #controls-key { display: none; }
  #r2-controls {
    order: 12;
    font-size: 10px;
  }
  #lang-switcher {
    order: 13;
    font-size: 10px;
  }
  #lang-switcher button { padding: 2px 5px; font-size: 10px; }
  #version-badge { display: none; }

  /* Sidebar becomes a slide-in overlay */
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 80vw;
    max-width: 320px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
  }
  body.sidebar-open #sidebar { transform: translateX(0); }
  body.sidebar-open #sidebar-backdrop { display: block; }
  #sidebar-header { font-size: 13px; padding: 14px; }
  #session-list li {
    padding: 14px;
    font-size: 14px;
    min-height: 44px;
  }
  #session-list .run-btn {
    opacity: 1;
    padding: 6px 12px;
    font-size: 12px;
    min-height: 32px;
  }

  /* Layout: main becomes full-width since sidebar is overlay */
  #layout { display: block; }
  #main { height: 100%; }

  /* Find bar wraps; the view switcher gets its own full-width row with
     big touch targets. (It used to overflow off the right edge with no
     way to scroll to it, making Read view unreachable on phones.) */
  #find-bar { flex-wrap: wrap; }
  #find-input { flex: 1 1 140px; min-width: 0; }
  #find-summary { min-width: 0; }
  #view-toggle { order: 10; flex: 1 1 100%; display: flex; }
  #view-toggle button { flex: 1; padding: 8px 4px; font-size: 12px; }

  /* Column toggles: scroll horizontally rather than wrap awkwardly */
  #column-toggles {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 12px;
    padding: 8px 12px;
  }
  #column-toggles label { flex-shrink: 0; }
  #column-toggles .hint { display: none; }

  /* Row table: tighter, allow horizontal scroll if columns can't fit */
  #row-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #row-table { font-size: 13px; min-width: 600px; }
  #row-table th, #row-table td { padding: 8px 6px; }
  #row-table th.col-num,  #row-table td.col-num  { width: 36px; }
  #row-table th.col-time, #row-table td.col-time { width: 60px; font-size: 10px; }

  /* Run drawer: full width, lower height */
  #run-drawer {
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 50vh;
    border-radius: 0;
  }
  #run-drawer.collapsed { height: 36px; }
}

/* ───────── Very narrow phones ───────── */
@media (max-width: 420px) {
  #r2-controls span { display: none; } /* keep checkbox + button only */
  #manual-sync-btn { padding: 4px 6px; }
  #row-table { font-size: 12px; min-width: 480px; }
}
/* ───────── Row edit mode ───────── */
#edit-rows-btn {
  background: #f0f5ff;
  border: 1px solid #9ab2e8;
  border-radius: 3px;
  color: #1f3864;
  font-size: 12px;
  padding: 2px 8px;
  cursor: pointer;
  line-height: 1.4;
}
#edit-rows-btn:hover { background: #dde8ff; }

#row-edit-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: #fffbec;
  border: 1px solid #e8d97a;
  border-radius: 4px;
  margin-bottom: 6px;
  font-size: 12px;
}
#row-edit-toolbar[hidden] { display: none; }
.row-edit-save-btn {
  background: #1f3864;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
}
.row-edit-save-btn:hover { background: #2a4d8a; }
.row-edit-save-btn:disabled { opacity: 0.5; cursor: default; }
#row-edit-toolbar > button:not(.row-edit-save-btn) {
  background: transparent;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  color: #555;
  font-size: 12px;
  padding: 2px 8px;
  cursor: pointer;
}
.row-edit-info { color: #777; margin-left: 4px; }
.row-edit-status { font-style: italic; }
.row-edit-status.error { color: #c0392b; }

/* Extra control column on each row in edit mode */
.row-edit-ctrl-th { width: 60px; min-width: 60px; }
.row-edit-ctrl {
  white-space: nowrap;
  padding: 2px 4px !important;
  vertical-align: middle;
  text-align: center;
}
.row-edit-ctrl button {
  background: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 10px;
  padding: 1px 4px;
  cursor: pointer;
  color: #555;
  line-height: 1;
  margin: 1px;
}
.row-edit-ctrl button:hover { background: #f0f0f0; border-color: #999; }

/* Cells in edit mode */
.row-num-selectable { cursor: pointer; user-select: none; }
.row-num-selectable:hover { background: #e8eef8 !important; }
.row-cell-editable { cursor: pointer; user-select: none; }
.row-cell-editable:hover { background: #fffbec !important; outline: 1px dashed #c8b44a; }
.row-cell-selected { background: #cce3ff !important; outline: 2px solid #4a90d9; }
.row-cell-selected:hover { background: #b8d8ff !important; }

.row-edit-clear-btn {
  background: #c0392b;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
}
.row-edit-clear-btn:hover { background: #e74c3c; }

/* Floating cell editor popover */
#cell-editor-popover {
  position: fixed;
  z-index: 2000;
  background: #fff;
  border: 1px solid #9ab2e8;
  border-radius: 5px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  padding: 10px;
  width: 320px;
  font-size: 13px;
}
.cell-editor-label {
  font-size: 11px;
  color: #888;
  margin-bottom: 6px;
  text-transform: lowercase;
  letter-spacing: .02em;
}
.cell-editor-textarea {
  width: 100%;
  font-family: "Georgia", serif;
  font-size: 13px;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  padding: 5px 7px;
  resize: vertical;
  display: block;
  margin-bottom: 6px;
}
.cell-editor-actions { display: flex; gap: 6px; align-items: center; }
.cell-editor-ok {
  background: #1f3864;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 3px 12px;
  font-size: 12px;
  cursor: pointer;
}
.cell-editor-ok:hover { background: #2a4d8a; }
.cell-editor-actions > button:not(.cell-editor-ok) {
  background: transparent;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  color: #888;
  font-size: 12px;
  padding: 2px 8px;
  cursor: pointer;
}
.cell-editor-actions > button:not(.cell-editor-ok):hover { background: #f5f5f5; }

/* ───────── Source editor panel ───────── */
#edit-source-panel { border-bottom: 1px solid #dde8f5; font-size: 12px; }
#edit-source-panel[hidden] { display: none; }
body.reading-open #edit-source-panel { display: none; }
#edit-source-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 16px;
  color: #1f3864;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  user-select: none;
  background: #f0f5fc;
}
#edit-source-details > summary::-webkit-details-marker { display: none; }
#edit-source-details > summary:hover { background: #e4edf9; }
#edit-source-details[open] > summary { border-bottom: 1px solid #dde8f5; }
.edit-source-body { padding: 10px 16px 12px; }
.edit-source-selector { display: flex; gap: 6px; margin-bottom: 8px; }
.edit-source-selector button {
  padding: 3px 10px;
  border: 1px solid #b0c4de;
  border-radius: 3px;
  background: #f8fafd;
  color: #1f3864;
  cursor: pointer;
  font-size: 12px;
}
.edit-source-selector button:hover { background: #dde8f5; }
.edit-source-selector button.active { background: #1f3864; color: #fff; border-color: #1f3864; }
.edit-source-area { display: flex; flex-direction: column; gap: 6px; }
.edit-source-info { color: #888; font-size: 11px; }
.edit-source-loading { color: #888; font-style: italic; font-size: 12px; }
.edit-source-error { color: #c00; font-size: 12px; }
.edit-source-textarea {
  width: 100%;
  height: 32vh;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.5;
  border: 1px solid #b0c4de;
  border-radius: 3px;
  padding: 8px;
  resize: vertical;
  box-sizing: border-box;
  background: #fafcff;
  white-space: pre;
  overflow-wrap: normal;
}
.edit-source-actions { display: flex; align-items: center; gap: 8px; }
.edit-source-save-btn {
  padding: 4px 14px;
  background: #1f3864;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 12px;
}
.edit-source-save-btn:hover { background: #2a4d8a; }
.edit-source-save-btn:disabled { background: #999; cursor: default; }
.edit-source-actions > button:not(.edit-source-save-btn) {
  padding: 4px 10px;
  border: 1px solid #b0c4de;
  border-radius: 3px;
  background: #f8fafd;
  cursor: pointer;
  font-size: 12px;
}
.edit-source-status { font-size: 11px; color: #666; }
.edit-source-status.ok { color: #2a7a2a; }
.edit-source-status.error { color: #c00; }

/* ───────── Download panel ───────── */
#downloads-panel {
  background: #fffef0;
  border-bottom: 1px solid #e0d89a;
  padding: 6px 16px 8px;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.download-group { flex-shrink: 0; }
.download-group h4 {
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #999;
  margin: 0 0 4px 0;
}
.download-group ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
}
.download-group li {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.download-group a {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  background: #fff;
  border: 1px solid #c8bc60;
  color: #6b5c00;
  text-decoration: none;
  font-size: 11px;
  white-space: nowrap;
}
.download-group a:hover {
  background: #fffbd0;
  border-color: #a0920e;
  color: #4a3d00;
}
.download-size {
  font-size: 10px;
  color: #aaa;
  white-space: nowrap;
}
/* ── Image icon + popover + lightbox ────────────────────────────── */

/* Inline text link "[image]" appended to any cell that has extracted
   images for its column's source. Hover shows a thumbnail popover;
   click opens the full-size lightbox. */
.row-image-link {
  margin-left: 4px;
  color: #4a90e2;
  text-decoration: none;
  font-size: 11px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: nowrap;
  vertical-align: baseline;
  cursor: zoom-in;
}
.row-image-link:hover { text-decoration: underline; color: #2a6fc8; }
.row-image-link:focus-visible { outline: 2px solid #4a90e2; outline-offset: 1px; }

/* Inline row diagram: a small thumbnail in the number column, drawn from
   a trusted figure source (Staferla / stenotype). Visible regardless of
   which translation column is being read. Hover previews, click enlarges. */
.row-figure-thumb {
  display: block;
  margin: 3px auto 0;
  cursor: zoom-in;
  line-height: 0;
}
.row-figure-thumb img {
  display: block;
  max-width: 46px;
  max-height: 46px;
  width: auto;
  height: auto;
  margin: 0 auto;
  border: 1px solid #c4ccd6;
  border-radius: 2px;
  background: #fff;
}
.row-figure-thumb:hover img { border-color: #4a90e2; }
.row-figure-thumb:focus-visible { outline: 2px solid #4a90e2; outline-offset: 1px; }

/* Floating thumbnail popover shown on icon hover. Position is set
   inline by JS (showPopover) — these are the visual rules only. */
#image-popover {
  position: fixed;
  z-index: 1000;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  padding: 6px;
  max-height: 80vh;
  overflow-y: auto;
  pointer-events: auto;
}
#image-popover figure {
  margin: 0 0 6px 0;
  text-align: center;
}
#image-popover figure:last-child { margin-bottom: 0; }
#image-popover img {
  max-width: 100%;
  max-height: 220px;
  display: block;
  margin: 0 auto;
  background: #f6f6f6;
}
#image-popover figcaption {
  font-size: 10px;
  color: #666;
  margin-top: 2px;
}
.popover-more {
  font-size: 10px;
  color: #4a90e2;
  text-align: center;
  margin-top: 4px;
  font-style: italic;
}

/* Full-size lightbox modal. */
#image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}
#image-lightbox[hidden] { display: none; }
#image-lightbox-figure {
  margin: 0;
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
#image-lightbox-img {
  max-width: 92vw;
  max-height: 86vh;
  object-fit: contain;
  background: #222;
  border: 1px solid #444;
}
#image-lightbox-caption {
  color: #ddd;
  font-size: 12px;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
#image-lightbox-close,
#image-lightbox-prev,
#image-lightbox-next {
  position: absolute;
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#image-lightbox-close:hover,
#image-lightbox-prev:hover,
#image-lightbox-next:hover {
  background: rgba(255,255,255,0.25);
}
#image-lightbox-close { top: 16px; right: 16px; }
#image-lightbox-prev  { left: 16px; top: 50%; transform: translateY(-50%); font-size: 28px; }
#image-lightbox-next  { right: 16px; top: 50%; transform: translateY(-50%); font-size: 28px; }

/* Disable body scrolling while lightbox is open. */
body.lightbox-open { overflow: hidden; }

/* ── Footnote / endnote popover ────────────────────────────────── */

/* Superscript note markers appended inline to cell text.
   Styled to look like traditional footnote refs. */
.row-note-link {
  color: #8b5e3c;
  text-decoration: none;
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
  cursor: help;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  margin-left: 1px;
}
.row-note-link:hover { text-decoration: underline; color: #5a3a1f; }
/* AI-amended note: dotted underline on the marker; popover shows the
   original reading (owner decision 2026-07-28, extended to notes
   2026-07-29). */
.row-note-link.note-amended { text-decoration: underline dotted; text-underline-offset: 2px; }
.note-original {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px dashed #d0c4ae;
  font-size: 11px;
  color: #7a6a50;
}
.note-original-label { font-weight: 700; }

/* Removed-marker superscripts: footnote refs / bracket numbers stripped
   from the source during text cleaning, re-anchored to their row. More
   muted than .row-note-link — they're provenance, not editorial notes. */
.removed-marker-link {
  color: #9a8f7d;
  text-decoration: none;
  font-size: 0.72em;
  vertical-align: super;
  line-height: 0;
  cursor: help;
  margin-left: 1px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 500;
}
.removed-marker-link:hover { color: #5a3a1f; text-decoration: underline; }

/* AI translator gloss: a "[AI: ...]" bracket the machine-translation model
   inserted inline, shown as "[...]" (prefix stripped) with a subtle dotted
   underline so it reads as flowing text rather than shouting for attention —
   the popover (opened the same way as the other markers) is what explains
   it's an AI note. */
.ai-note-link {
  color: inherit;
  cursor: help;
  text-decoration: underline dotted;
  text-decoration-color: #9a8f7d;
  text-underline-offset: 2px;
}
.ai-note-link:hover, .ai-note-link:focus-visible {
  color: #5a3a1f;
  text-decoration-color: #5a3a1f;
}

/* AI source corrections ("psych[a]nalyste"): same quiet dotted underline
   family as .ai-note-link — the bracketed letters carry the signal, the
   popover carries the provenance (original reading). */
.ai-fix-link {
  color: inherit;
  cursor: help;
  text-decoration: underline dotted;
  text-decoration-color: #9a8f7d;
  text-underline-offset: 2px;
}
.ai-fix-link:hover, .ai-fix-link:focus-visible {
  color: #5a3a1f;
  text-decoration-color: #5a3a1f;
}

/* Note/removed-marker/AI-note markers are now keyboard-focusable
   (tabindex="0") so Enter/Space can open their popover — give them a
   visible focus ring instead of relying on the browser default, which
   the superscript styling above (line-height:0 etc.) can clip oddly. */
.row-note-link:focus-visible,
.removed-marker-link:focus-visible {
  outline: 2px solid #ff6f00;
  outline-offset: 2px;
  border-radius: 2px;
}

#note-popover .removed-marker-context { margin-bottom: 6px; }
#note-popover .removed-marker-hint {
  font-size: 10px;
  color: #8b7355;
  font-style: italic;
}

/* Floating note popover — similar to image popover but text-oriented. */
#note-popover {
  position: fixed;
  z-index: 1001;
  background: #fffdf5;
  border: 1px solid #c8b99a;
  border-radius: 5px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.18);
  padding: 10px 14px;
  max-width: 380px;
  max-height: 60vh;
  overflow-y: auto;
  pointer-events: auto;
  font-size: 12.5px;
  line-height: 1.5;
  color: #2a2a2a;
  font-family: Georgia, "Times New Roman", serif;
}
#note-popover .note-source {
  font-size: 10px;
  color: #8b7355;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin-bottom: 6px;
  font-style: italic;
}
#note-popover .note-marker {
  font-weight: 700;
  color: #8b5e3c;
  margin-right: 4px;
}

/* Small "(?)" link in a column header that points to a per-column
   writeup (currently used by the Machine Translation column to surface
   the prompt + caveats). Sits to the right of the label, low-key. */
.col-info-link {
  margin-left: 6px;
  color: #4a90e2;
  text-decoration: none;
  font-size: 11px;
  font-weight: normal;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  vertical-align: baseline;
  opacity: 0.7;
}
.col-info-link:hover { opacity: 1; text-decoration: underline; }

/* Editorial-manifest badge: small "ⓘ" in a column header marking sessions
   where the published edition genuinely omits/abridges material (see
   editorial_manifest.json + stages/compare.py). Tooltip carries the
   curated note. Purely informational — no click behavior. */
.col-editorial-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 12px;
  font-weight: normal;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #9b5c00;
  opacity: 0.85;
  cursor: help;
  vertical-align: baseline;
}
.col-editorial-badge:hover { opacity: 1; }

/* Editorial omission band: a run of empty cells in a flagged column
   (>= 6 consecutive rows) merges into one cell via rowspan, labeled with
   the reason instead of reading as unexplained blank confetti. Light
   diagonal hatch keeps it visually distinct from an ordinary empty cell
   without implying missing data / an error. */
#row-table td.editorial-band {
  vertical-align: middle;
  text-align: center;
  color: #8a6d3b;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  font-style: italic;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(154, 108, 0, 0.07),
    rgba(154, 108, 0, 0.07) 6px,
    rgba(154, 108, 0, 0.02) 6px,
    rgba(154, 108, 0, 0.02) 12px
  );
  box-shadow: inset 2px 0 0 rgba(154, 108, 0, 0.35);
}
.editorial-band-label {
  display: inline-block;
  padding: 4px 8px;
}

/* ASR-rejected: low-confidence audio the alignment suppressed, preserved
   verbatim and shown as a collapsed inline affordance at the end of the
   ASR cell (comparison table) / reading-mode paragraph. Repetition-loop
   items are never rendered here (data-only) — see core/msa_align.py and
   asrRejectedHTML() in app.js. Deliberately muted: this is a public
   reader, not an error banner. No explicit `display` on .asr-rejected-list
   — it relies on the native [hidden] attribute toggle (button click sets
   panel.hidden), so it must not be overridden here. */
.asr-rejected { margin-left: 4px; }
.asr-rejected-toggle {
  display: inline;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  color: #9a8f7d;
  font: inherit;
  font-size: 0.82em;
  font-style: italic;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  text-decoration: underline dotted;
  text-decoration-color: #c8bda8;
  text-underline-offset: 2px;
}
.asr-rejected-toggle:hover,
.asr-rejected-toggle:focus-visible {
  color: #5a3a1f;
  text-decoration-color: #5a3a1f;
}
.asr-rejected-toggle:focus-visible {
  outline: 2px solid #ff6f00;
  outline-offset: 2px;
  border-radius: 2px;
}
.asr-rejected-list { margin-left: 4px; }
.asr-rejected-item {
  color: #7a7266;
  font-style: italic;
  font-size: 0.9em;
}
.asr-rejected-item:not(:last-child)::after {
  content: " · ";
  color: #c8bda8;
  font-style: normal;
}
.asr-rejected-tag {
  display: inline-block;
  margin-right: 4px;
  padding: 0 5px;
  border-radius: 999px;
  background: #f2ece0;
  color: #8b7355;
  font-size: 0.85em;
  font-style: normal;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  vertical-align: baseline;
}

/* ── Appendix band ────────────────────────────────────────────────
   Reference/appended texts segregated from the alignment spine (e.g. a
   quoted De Magistro excerpt, or foreign-language reference material),
   shown collapsed at the END of a session — after the table in the
   comparison view, after the last paragraph in reading view. Owner-
   approved 2026-07-28 (option A): calm editorial chrome, same warm
   cream/tan palette as #note-popover and .asr-rejected-*, so it reads as
   part of the app's existing apparatus rather than a new visual
   language. Empty when the session has no appendix sidecars — :empty
   keeps the comparison-view host from taking up any space then. */
#appendix-band-compare:empty { display: none; }
.appendix-band-section {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px dashed #d8cdb6;
}
#reading-body .appendix-band-section {
  margin: 2.2em 0 0 0;
  padding-top: 1.4em;
}
.appendix-band {
  background: #fffdf5;
  border: 1px solid #c8b99a;
  border-radius: 6px;
  margin-bottom: 10px;
  overflow: hidden;
}
.appendix-band:last-child { margin-bottom: 0; }
.appendix-band-toggle {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  border: none;
  background: none;
  margin: 0;
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.appendix-band-toggle::before {
  content: "▸";
  color: #8b7355;
  font-size: 11px;
  flex-shrink: 0;
  transition: transform 0.12s;
}
.appendix-band-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }
.appendix-band-toggle:hover { background: #f7f1e2; }
.appendix-band-toggle:focus-visible {
  outline: 2px solid #ff6f00;
  outline-offset: -2px;
}
.appendix-band-title {
  color: #6b4f2a;
  font-size: 12.5px;
  font-weight: bold;
}
.appendix-band-count {
  margin-left: auto;
  flex-shrink: 0;
  padding: 1px 8px;
  border-radius: 999px;
  background: #f2ece0;
  color: #8b7355;
  font-size: 11px;
}
.appendix-band-content {
  padding: 4px 18px 16px;
  border-top: 1px solid #ecdfc2;
}
.appendix-span { padding-top: 12px; }
.appendix-span:not(:first-child) {
  margin-top: 12px;
  border-top: 1px dotted #ecdfc2;
}
.appendix-span-title {
  margin: 0 0 8px;
  color: #6b4f2a;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 14px;
  font-weight: normal;
}
.appendix-span p {
  margin: 0 0 1em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 14.5px;
  line-height: 1.7;
  color: #2a2a2a;
}
.appendix-span p:last-child { margin-bottom: 0; }

/* ── Find / search ───────────────────────────────────────────────── */

#find-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid #e0e0e0;
  background: #f8f8f8;
}
#find-input {
  flex: 1;
  font-family: "Georgia", serif;
  font-size: 13px;
  padding: 5px 9px;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  background: #fff;
}
#find-input:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.18);
}
#find-summary {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  color: #777;
  white-space: nowrap;
  min-width: 110px;
  text-align: right;
}
#find-language {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  padding: 4px 6px;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  background: #fff;
  color: #1f3864;
}
#find-index-status {
  color: #8a8172;
  font: 10px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  white-space: nowrap;
}
#mobile-find-toggle { display: none; }
#find-clear {
  background: transparent;
  border: none;
  color: #888;
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
#find-clear:hover { color: #d32f2f; }

#find-results {
  max-height: 220px;
  overflow-y: auto;
  border-bottom: 1px solid #e0e0e0;
  background: #fdfdfa;
  font-size: 12.5px;
}
.find-result-group {
  border-bottom: 1px solid #eee;
  padding: 4px 10px 6px;
}
.find-result-group:last-child { border-bottom: none; }
.find-result-head {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10.5px;
  font-weight: bold;
  color: #1f3864;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 2px 0;
}
.find-result-head:hover { color: #ff6f00; }
.find-result-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 3px 0 3px 16px;
  cursor: pointer;
  border-radius: 2px;
}
.find-result-item:hover,
.find-result-item.kbd-focus {
  background: #fff5d6;
}
.find-result-col {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10.5px;
  color: #888;
  white-space: nowrap;
  min-width: 110px;
  text-align: right;
  flex-shrink: 0;
}
.find-result-snippet {
  flex: 1;
  color: #222;
  line-height: 1.45;
}
.find-result-snippet mark {
  background: #ffe082;
  padding: 0 1px;
  border-radius: 1px;
  font-weight: bold;
}

/* Subtle row highlight for search hits in the main table. Persists
   while the search input has a value; cleared when search is cleared. */
#row-table tr.search-hit td {
  box-shadow: inset 0 0 0 9999px rgba(255, 224, 130, 0.18);
}

#find-scope {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  padding: 4px 6px;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  background: #fff;
  color: #1f3864;
  cursor: pointer;
}
#find-scope:focus { outline: none; border-color: #4a90e2; }

/* ── Reading mode ────────────────────────────────────────────────── */

#reading-mode {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #fdfbf5;
}
/* The `display: flex` above overrides the default `display: none` that
   the `hidden` attribute would otherwise apply, so reading mode would
   stay visible even when JS sets `readingMode.hidden = true`. Force
   `display: none` when hidden so compare-only really hides the panel. */
#reading-mode[hidden] { display: none; }

/* Experimental editorial-lens view: full-bleed iframe hosting the
   standalone analysis page. Mirrors the reading-mode show/hide pattern. */
#editorial-mode {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: #faf8f4;
}
#editorial-mode[hidden] { display: none; }
#editorial-frame-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
}
#editorial-frame {
  flex: 1;
  width: 100%;
  border: 0;
}
.experimental-badge {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #b9770e;
  margin-left: 2px;
  vertical-align: super;
}
#reading-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  border-bottom: 1px solid #e0d8b8;
  background: #f3eed8;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  color: #4a4a4a;
}
#reading-settings {
  display: inline-flex;
  gap: 3px;
}
#reading-settings button {
  min-width: 32px;
  min-height: 30px;
  border: 1px solid #c7bea4;
  border-radius: 4px;
  background: #fffdf7;
  color: #25334b;
  cursor: pointer;
}
#reading-settings button:hover { background: #fff; border-color: #8f8262; }
#reading-close {
  background: #fff;
  color: #1f3864;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  padding: 4px 9px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
#reading-close:hover { background: #e8e8e8; border-color: #888; }
#reading-source {
  font-family: inherit;
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  background: #fff;
}
#reading-meta {
  color: #888;
  font-size: 11px;
  margin-left: auto;
}
/* (reading-mode Translate button removed — highlight-to-translate only) */

#reading-body {
  flex: 1;
  overflow-y: auto;
  padding: 30px 60px 80px;
  font-family: "Georgia", "Times New Roman", serif;
  font-size: calc(16px + var(--reader-font-delta, 0px));
  line-height: 1.7;
  color: #1a1a1a;
  max-width: 780px;
  margin: 0 auto;
  width: 100%;
}
#reading-mode.reader-night { background: #191b1d; }
#reading-mode.reader-night #reading-toolbar {
  background: #272a2d;
  border-color: #41454a;
  color: #ddd7c8;
}
#reading-mode.reader-night #reading-source,
#reading-mode.reader-night #reading-settings button {
  background: #34383c;
  border-color: #555b61;
  color: #f1ede4;
}
#reading-mode.reader-night #reading-body { color: #e7e2d7; }
#reading-mode.reader-night #reading-apparatus {
  background: #222529;
  border-color: #41454a;
  color: #d7d2c7;
}
#reading-mode.reader-night .reading-paragraph:hover { background: #25282b; }
#reading-mode.reader-night .reading-paragraph.active { background: #353126; }
/* Note markers + AI-note glosses in reading mode's night theme: the
   default brownish tones (tuned for the light comparison table) read as
   too dark against the near-black background, so lighten them here. Font
   size already tracks --reader-font-delta automatically since the markers
   are DOM children of .reading-text and use em-relative sizing. */
#reading-mode.reader-night .row-note-link { color: #e0a978; }
#reading-mode.reader-night .row-note-link:hover { color: #f5c69a; }
#reading-mode.reader-night .ai-note-link { text-decoration-color: #8a8478; }
#reading-mode.reader-night .ai-note-link:hover,
#reading-mode.reader-night .ai-note-link:focus-visible {
  color: #f5c69a;
  text-decoration-color: #f5c69a;
}
#reading-mode.reader-night .ai-fix-link { text-decoration-color: #8a8478; }
#reading-mode.reader-night .ai-fix-link:hover,
#reading-mode.reader-night .ai-fix-link:focus-visible {
  color: #f5c69a;
  text-decoration-color: #f5c69a;
}
#reading-mode.reader-night .asr-rejected-toggle {
  color: #b8ab90;
  text-decoration-color: #6b6255;
}
#reading-mode.reader-night .asr-rejected-toggle:hover,
#reading-mode.reader-night .asr-rejected-toggle:focus-visible {
  color: #f5c69a;
  text-decoration-color: #f5c69a;
}
#reading-mode.reader-night .asr-rejected-item { color: #b3ac9c; }
#reading-mode.reader-night .asr-rejected-item::after { color: #6b6255; }
#reading-mode.reader-night .asr-rejected-tag {
  background: #34302a;
  color: #c9a97a;
}
#reading-mode.reader-night .appendix-band-section { border-color: #41454a; }
#reading-mode.reader-night .appendix-band {
  background: #222529;
  border-color: #41454a;
}
#reading-mode.reader-night .appendix-band-toggle:hover { background: #272a2d; }
#reading-mode.reader-night .appendix-band-toggle::before { color: #c9a97a; }
#reading-mode.reader-night .appendix-band-title { color: #e0a978; }
#reading-mode.reader-night .appendix-band-count {
  background: #34302a;
  color: #c9a97a;
}
#reading-mode.reader-night .appendix-band-content { border-color: #34383c; }
#reading-mode.reader-night .appendix-span:not(:first-child) { border-color: #34383c; }
#reading-mode.reader-night .appendix-span-title { color: #e0a978; }
#reading-mode.reader-night .appendix-span p { color: #e7e2d7; }
.reading-paragraph {
  position: relative;
  margin: 0 0 1.1em;
  padding-left: 36px;
  cursor: pointer;
  border-radius: 3px;
  padding-top: 2px;
  padding-bottom: 2px;
  transition: background 0.1s;
  touch-action: manipulation;
}
.reading-paragraph:hover { background: #f3eed8; }
.reading-rownum {
  position: absolute;
  left: 0;
  top: 4px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  color: #999;
  background: transparent;
  user-select: none;
  font-weight: bold;
  width: 28px;
  text-align: right;
}
.reading-paragraph:hover .reading-rownum { color: #ff6f00; }
.reading-text { display: block; }

/* Three-way segmented view toggle in the find bar. Three pill
   buttons sharing borders: Compare | Split | Read. The active
   segment is filled in dark blue. Click any to switch. */
#view-toggle {
  display: inline-flex;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}
#view-toggle button {
  background: #fff;
  color: #1f3864;
  border: none;
  border-right: 1px solid #c8c8c8;
  padding: 4px 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
#view-toggle button:last-child { border-right: none; }
#view-toggle button:hover { background: #e8e8e8; }
/* Global A−/A+ text-size controls — same look as the view toggle, all views */
#font-controls {
  display: inline-flex;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
  margin-left: 6px;
}
#font-controls button {
  background: #fff;
  color: #1f3864;
  border: none;
  border-right: 1px solid #c8c8c8;
  padding: 4px 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
#font-controls button:last-child { border-right: none; }
#font-controls button:hover { background: #e8e8e8; }
#view-toggle button.active {
  background: #1f3864;
  color: #fff;
  font-weight: bold;
}
#view-toggle button.active:hover { background: #2a4a8b; }

/* Hide some chrome when reading-mode is open to give the prose room.
   The downloads panel + column toggles aren't relevant to reading. */
body.reading-open #downloads-panel,
body.reading-open #column-toggles { display: none; }

/* ── Split view: reading on top, comparison below ────────────────── */
/* Both panes visible. Reading gets ~50% of vertical space; table gets
   the rest. Each scrolls independently. The audio-sync highlighting
   updates both panes in lock-step (handled in setActiveRow). */
body.view-split #reading-mode {
  flex: 0 0 50%;
  border-bottom: 2px solid #1f3864;
  min-height: 0;
}
body.view-split #row-table-wrapper {
  flex: 1 1 auto;
  min-height: 0;
}

/* In read-only view the table is hidden and reading takes the full
   available height (already the natural layout). In compare-only the
   reading mode is hidden via its [hidden] attribute. Nothing extra
   to do for those two modes beyond the JS visibility toggles. */

/* Slightly tighter reading body padding in split view so more text
   fits in the half-height pane. */
body.view-split #reading-body {
  padding: 16px 40px 24px;
  font-size: 15px;
  line-height: 1.55;
}

/* Active paragraph in reading mode — mirrors the active row in compare
   view so audio sync keeps you oriented while reading. */
.reading-paragraph.active {
  background: #fff5d6;
  box-shadow: inset 3px 0 0 #ff6f00;
}
.reading-paragraph.active .reading-rownum { color: #ff6f00; }

/* ── Glossary mode (shift+click a word) ──────────────────────────── */

#glossary-popover {
  position: fixed;
  z-index: 1100;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.22);
  max-width: 520px;
  min-width: 320px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 10px 12px;
  font-family: "Georgia", serif;
  font-size: 12.5px;
  line-height: 1.45;
}
#glossary-popover .gloss-word {
  font-size: 16px;
  font-weight: bold;
  color: #1f3864;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e0e0e0;
  word-break: break-word;
}
#glossary-popover .gloss-rows { display: flex; flex-direction: column; gap: 6px; }
#glossary-popover .gloss-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#glossary-popover .gloss-col-label {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #555;
  padding-left: 8px;
  border-left: 3px solid #ccc;
}
#glossary-popover .gloss-text {
  font-size: 12.5px;
  color: #222;
  padding-left: 11px;
}
#glossary-popover .gloss-text mark {
  background: #ffe082;
  padding: 0 1px;
  font-weight: bold;
}
#glossary-popover .gloss-actions {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #e0e0e0;
  text-align: right;
}
#glossary-popover .gloss-corpus-btn {
  background: #1f3864;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 5px 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  cursor: pointer;
}
#glossary-popover .gloss-corpus-btn:hover { background: #2a4a8b; }

/* Corpus modal: full-page overlay with a centered card. */
#glossary-corpus-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
#glossary-corpus-modal[hidden] { display: none; }
#glossary-corpus-card {
  background: #fff;
  border-radius: 6px;
  width: min(820px, 92vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  overflow: hidden;
}
#glossary-corpus-card > header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #1f3864;
  color: #fff;
  font-family: "Georgia", serif;
  font-size: 14px;
}
#glossary-corpus-title { flex: 1; }
#glossary-corpus-close {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#glossary-corpus-close:hover { background: rgba(255,255,255,0.15); }
#glossary-corpus-summary {
  padding: 8px 16px;
  background: #f8f8f8;
  border-bottom: 1px solid #e0e0e0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
  color: #555;
}
#glossary-corpus-results {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}
.gloss-corpus-group { border-bottom: 1px solid #eee; padding: 6px 16px 10px; }
.gloss-corpus-group:last-child { border-bottom: none; }
.gloss-corpus-head {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1f3864;
  padding: 4px 0;
  cursor: pointer;
}
.gloss-corpus-head:hover { color: #ff6f00; }
.gloss-corpus-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 4px 0 4px 16px;
  cursor: pointer;
  border-radius: 2px;
  font-family: "Georgia", serif;
  font-size: 12.5px;
}
.gloss-corpus-item:hover { background: #fff5d6; }
.gloss-corpus-col {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 10px;
  color: #888;
  white-space: nowrap;
  min-width: 110px;
  text-align: right;
  flex-shrink: 0;
}
.gloss-corpus-snippet { flex: 1; color: #222; line-height: 1.5; }
.gloss-corpus-snippet mark { background: #ffe082; font-weight: bold; }

body.modal-open { overflow: hidden; }

/* ── Translate popover (highlight → translate) ─────────────────── */

#translate-popover {
  position: fixed;
  z-index: 1050;
  background: #fff;
  border: 1px solid #aaa;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.22);
  max-width: 480px;
  min-width: 240px;
  max-height: 60vh;
  overflow-y: auto;
  font-family: "Georgia", serif;
  font-size: 13px;
  line-height: 1.55;
}
#translate-popover[hidden] { display: none; }
#translate-popover-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #1f3864;
  color: #fff;
  border-radius: 5px 5px 0 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: bold;
}
#translate-popover-title { flex: 1; }
#translate-lang {
  background: #2d4a72;
  color: #fff;
  border: 1px solid #5a7099;
  border-radius: 3px;
  font-size: 11px;
  font-family: inherit;
  padding: 2px 4px;
  cursor: pointer;
}
#translate-popover-close {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#translate-popover-close:hover { background: rgba(255,255,255,0.15); }
#translate-popover-body {
  padding: 10px 12px;
  color: #1a1a1a;
}
#translate-popover-body .translate-loading {
  color: #888;
  font-style: italic;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
}
#translate-popover-body .translate-error {
  color: #d32f2f;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12px;
}
#translate-popover-body .translate-original {
  color: #666;
  font-size: 11.5px;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
  margin-bottom: 8px;
}
/* Public mode can use the configured Cloudflare Worker endpoint. If no
   endpoint is configured, app.js suppresses opening the popover. */

/* ── Add column (generation) ───────────────────────────────────── */

#add-column-btn {
  margin-left: 8px;
  background: #1f3864;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 3px 10px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
#add-column-btn:hover { background: #2a4a8b; }
body.public-mode #add-column-btn { display: none; }

#add-column-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  flex-shrink: 0;
}
#add-column-form[hidden] { display: none; }
#add-column-form label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: default;
}
#add-column-form select {
  font-size: 11px;
  font-family: inherit;
  padding: 2px 4px;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  background: #fff;
}
#gen-go-btn {
  background: #047857;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 3px 10px;
  font-size: 11px;
  font-family: inherit;
  font-weight: bold;
  cursor: pointer;
}
#gen-go-btn:hover { background: #065f46; }
#gen-cancel-btn {
  background: transparent;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  color: #888;
  font-size: 12px;
  padding: 1px 6px;
  cursor: pointer;
  line-height: 1;
}
#gen-cancel-btn:hover { color: #d32f2f; border-color: #d32f2f; }

/* ── Public deploy: internal curation UI is never shown to readers.
   JS also guards these render paths; this is the belt-and-braces layer. */
body.public-mode #reading-apparatus,
body.public-mode .reading-audit-link,
body.public-mode .reading-row-flag,
body.public-mode #quality-drawer,
body.public-mode .quality-badge,
body.public-mode .quality-inline-note,
body.public-mode .quality-review-btn { display: none !important; }
body.public-mode #row-table tr.quality-row-sparse td,
body.public-mode #row-table tr.quality-row-orphan td {
  background: inherit;
}
body.public-mode #row-table tr.quality-row-sparse td.col-num,
body.public-mode #row-table tr.quality-row-orphan td.col-num {
  background: inherit;
  color: #999;
}

/* Source audit / review queue */
.quality-review-btn {
  border: 1px solid #cfd7e2;
  background: #fff;
  color: #1f3864;
  border-radius: 4px;
  padding: 3px 8px;
  font: 11px/1.2 Arial, sans-serif;
  cursor: pointer;
}
.quality-review-btn:hover { background: #eef3fa; }
#quality-drawer {
  position: fixed;
  top: 52px;
  right: 0;
  bottom: 0;
  z-index: 1250;
  width: min(380px, 94vw);
  background: #fbfcfe;
  border-left: 1px solid #cfd7e2;
  box-shadow: -8px 0 24px rgba(20, 35, 60, 0.18);
  overflow-y: auto;
  font-family: Arial, sans-serif;
  color: #1d2737;
}
.quality-drawer-header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px 12px;
  background: #fff;
  border-bottom: 1px solid #d9e0ea;
}
.quality-drawer-header h2 {
  margin: 2px 0 0;
  font-size: 17px;
  color: #1f3864;
}
.quality-drawer-kicker {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #697789;
}
.quality-drawer-close {
  border: 1px solid #cfd7e2;
  background: #fff;
  border-radius: 4px;
  width: 28px;
  height: 28px;
  cursor: pointer;
}
.quality-drawer-note {
  margin: 12px 16px;
  padding: 10px 12px;
  border-left: 3px solid #d4a72c;
  background: #fff8df;
  color: #5f4a00;
  font-size: 12px;
  line-height: 1.35;
}
.quality-drawer-grid,
.quality-drawer-section {
  margin: 12px 16px;
}
.quality-drawer-section h3 {
  margin: 12px 0 6px;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #697789;
}
.quality-row-jump {
  display: flex;
  width: 100%;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0;
  padding: 7px 8px;
  border: 1px solid #d9e0ea;
  border-left: 3px solid #d4a72c;
  border-radius: 4px;
  background: #fff;
  color: #1d2737;
  text-align: left;
  cursor: pointer;
}
.quality-row-jump:hover { background: #f2f6fb; }
.quality-row-jump span {
  color: #697789;
  font-size: 11px;
}

/* More legible review markers in the comparison table */
.row-quality-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 3px;
  border-radius: 50%;
  background: #fff4cc;
  border: 1px solid #d4a72c;
  color: #704e00;
  font-size: 10px;
  font-weight: 700;
}
.row-quality-label {
  display: block;
  margin-top: 3px;
  color: #795d00;
  font: 10px/1.2 Arial, sans-serif;
  font-weight: 400;
}
#row-table tr.quality-row-sparse td {
  box-shadow: inset 3px 0 0 #d4a72c;
}
#row-table tr.quality-row-orphan td {
  box-shadow: inset 3px 0 0 #c76a5a;
}

/* Make compact session action buttons read as semantic chips. */
#sidebar-header {
  flex-wrap: wrap;
}
#sidebar-header::after {
  content: "Actions: run / compare / translate / full";
  flex-basis: 100%;
  color: #777;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
body.public-mode #sidebar-header::after {
  content: none;
}
html[lang="fr"] #sidebar-header::after {
  content: "Actions : lancer / comparer / traduire / complet";
}
html[lang="pt-BR"] #sidebar-header::after {
  content: "Ações: executar / comparar / traduzir / completo";
}
#session-list .run-btn {
  min-width: 28px;
  max-width: 34px;
  overflow: hidden;
  text-overflow: clip;
}
#session-list li {
  gap: 4px;
  padding-left: 8px;
  padding-right: 8px;
}
#session-list .session-label {
  white-space: nowrap;
  font-size: 12px;
}
#session-list .run-btn:not(.compare-btn):not(.translate-btn):not(.force-btn),
#session-list .compare-btn,
#session-list .translate-btn,
#session-list .force-btn {
  font-size: 0;
}
#session-list .run-btn:not(.compare-btn):not(.translate-btn):not(.force-btn)::after {
  content: "run";
  font-size: 10px;
}
#session-list .compare-btn::after { content: "cmp"; font-size: 10px; }
#session-list .translate-btn::after { content: "tr"; font-size: 10px; }
#session-list .force-btn::after { content: "full"; font-size: 10px; }

/* Reading mode apparatus */
#reading-layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  grid-template-rows: minmax(0, 1fr);
}
#reading-layout #reading-body {
  min-width: 0;
}
#reading-apparatus {
  border-left: 1px solid #e0d8c5;
  background: #faf8ef;
  padding: 18px 16px;
  overflow-y: auto;
  font-family: Arial, sans-serif;
  font-size: 12px;
  color: #394458;
}
.reading-apparatus-title {
  font-weight: 700;
  color: #1f3864;
  margin-bottom: 4px;
}
.reading-apparatus-source {
  color: #697789;
  margin-bottom: 10px;
}
.reading-audit-link,
.reading-apparatus-list button {
  border: 1px solid #cfd7e2;
  background: #fff;
  border-radius: 4px;
  padding: 6px 8px;
  cursor: pointer;
}
.reading-audit-link {
  width: 100%;
  margin-bottom: 12px;
  color: #1f3864;
}
#reading-apparatus dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  margin: 0 0 14px;
}
#reading-apparatus dt { color: #697789; }
#reading-apparatus dd { margin: 0; font-weight: 700; }
.reading-apparatus-list h4 {
  margin: 14px 0 6px;
  color: #697789;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}
.reading-apparatus-list button {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 4px 0;
  text-align: left;
}
.reading-apparatus-list button:hover,
.reading-audit-link:hover { background: #f2f6fb; }
.reading-apparatus-list span {
  color: #795d00;
  font-size: 11px;
}
.reading-row-flag {
  display: inline-block;
  margin: 0 0 4px 36px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #fff4cc;
  color: #704e00;
  font: 11px/1.2 Arial, sans-serif;
}

@media (max-width: 760px) {
  #reading-layout {
    /* Stay a grid (single column) rather than `display: block`. As a block,
       #reading-body grew to its full content height, so its `overflow-y: auto`
       had nothing to scroll and the fixed-height shell clipped everything below
       the fold — you couldn't scroll down. A single-column grid keeps
       #reading-body a height-constrained track item, so it scrolls again. */
    grid-template-columns: minmax(0, 1fr);
  }
  #reading-apparatus {
    display: none;
  }
  #reading-body {
    padding: 22px 18px 70px;
    font-size: 17px;
    line-height: 1.65;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #quality-drawer {
    top: 0;
    width: 100vw;
  }
  .row-quality-label {
    max-width: 62px;
  }
}

/* Reader-first phone layout. Keep navigation and audio available, but let the
   seminar text—not site chrome—own the viewport. */
@media (max-width: 720px) {
  #topbar {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 7px 8px;
    padding: max(6px, env(safe-area-inset-top)) 9px 7px;
  }
  #sidebar-toggle { grid-column: 1; grid-row: 1; }
  #seminar-picker {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-height: 36px;
  }
  #player {
    grid-column: 1 / -1;
    grid-row: 2;
    order: initial;
    width: 100%;
    height: 34px;
  }
  #player[hidden] { display: none; }
  #lang-switcher {
    display: flex !important;
    grid-column: 3;
    grid-row: 1;
    align-self: stretch;
    gap: 1px;
    padding: 2px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 6px;
  }
  #lang-switcher button {
    min-width: 26px;
    padding: 2px 4px;
    border: 0;
    border-radius: 4px;
    font-size: 10px;
  }
  #lang-switcher button.active {
    background: rgba(255,255,255,0.18);
    border-color: transparent;
  }
  /* "⋯ More" overflow menu — now-playing / help / ronds tool / contact
     admin / status / R2 controls / version badge don't fit the compact
     phone header. They used to just disappear (display:none, no way
     back in); now they live in a dropdown under this button instead. */
  #topbar-more-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    grid-column: 4;
    grid-row: 1;
    min-width: 34px;
    min-height: 34px;
    background: transparent;
    color: #dfe7f5;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
  }
  #topbar-more-toggle:hover,
  body.topbar-more-open #topbar-more-toggle {
    background: rgba(255,255,255,0.16);
  }
  #topbar-overflow {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 9px;
    width: min(280px, calc(100vw - 18px));
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    background: #1f3864;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.35);
    z-index: 60;
  }
  body.topbar-more-open #topbar-overflow { display: flex; }
  #topbar-overflow > * {
    width: 100%;
    box-sizing: border-box;
  }
  #topbar-overflow #now-playing {
    text-align: left;
    padding: 4px 6px;
  }
  #topbar-overflow #help-btn,
  #topbar-overflow #methods-link,
  #topbar-overflow #ronds-link,
  #topbar-overflow #contact-admin-link,
  #topbar-overflow #status-btn {
    justify-content: flex-start;
    min-height: 40px;
    padding: 9px 10px;
    font-size: 13px;
    white-space: normal;
    text-align: left;
  }
  #topbar-overflow #r2-controls {
    flex-wrap: wrap;
    padding: 6px;
  }
  #topbar-overflow #version-badge {
    text-align: left;
    padding: 6px;
  }

  #session-meta {
    padding: 5px 10px;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #find-bar {
    position: sticky;
    top: 0;
    z-index: 35;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    padding: 5px 8px;
    gap: 6px;
    background: rgba(248, 248, 246, 0.96);
    backdrop-filter: blur(8px);
  }
  #mobile-find-toggle {
    display: block;
    min-width: 38px;
    min-height: 36px;
    border: 1px solid #c8c8c8;
    border-radius: 6px;
    background: #fff;
    color: #1f3864;
    font-size: 22px;
  }
  #view-toggle {
    order: initial;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    /* Four visible segments since the Index button: on narrow phones the
       nowrap buttons can outgrow the bar, so scroll sideways to the last
       one rather than clipping it (same pattern as #column-toggles). */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #view-toggle button { min-height: 36px; }
  /* Split stays desktop-only; the editorial lens page is a single text
     column and carries its own viewport/mobile CSS, so its button shows
     on mobile too (2026-07-29). */
  #view-toggle button[data-view="split"] { display: none; }
  /* Avoid two A−/A+ pairs on screen at once: #font-controls (here, in the
     find bar) and #reading-settings (in #reading-toolbar, inside
     #reading-mode) both call stepReaderSize(). #reading-mode only shows
     for the split/read views, so hide the find-bar's pair exactly then —
     the reading toolbar's pair takes over. */
  body.view-split #font-controls,
  body.view-read #font-controls { display: none; }
  #find-input,
  #find-scope,
  #find-language,
  #find-summary,
  #find-index-status,
  #find-clear { display: none; }
  body.mobile-search-open #find-input,
  body.mobile-search-open #find-scope,
  body.mobile-search-open #find-language,
  body.mobile-search-open #find-summary,
  body.mobile-search-open #find-index-status,
  body.mobile-search-open #find-clear:not([hidden]) { display: block; }
  body.mobile-search-open #find-input {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 42px;
    font-size: 16px; /* prevents iOS input zoom */
  }
  body.mobile-search-open #find-scope { grid-column: 1; grid-row: 3; }
  body.mobile-search-open #find-language { grid-column: 2; grid-row: 3; width: 100%; }
  body.mobile-search-open #find-summary,
  body.mobile-search-open #find-index-status { grid-column: 1 / -1; text-align: left; }

  #find-results { max-height: min(44vh, 360px); }
  body:not(.mobile-search-open) #find-results { display: none; }
  .find-result-item { padding: 8px 2px; display: block; }
  .find-result-col { display: block; min-width: 0; text-align: left; margin-bottom: 3px; }

  #reading-toolbar {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 7px 10px;
    background: rgba(243, 238, 216, 0.96);
    backdrop-filter: blur(8px);
    flex-wrap: wrap;
  }
  #reading-toolbar label { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; }
  #reading-source { flex: 1; min-width: 0; min-height: 36px; font-size: 14px; }
  #reading-meta { display: none; }
  #reading-body {
    padding: 28px clamp(18px, 6vw, 30px) calc(90px + env(safe-area-inset-bottom));
    max-width: 680px;
    font-size: calc(clamp(18px, 4.8vw, 20px) + var(--reader-font-delta, 0px));
    line-height: 1.72;
    letter-spacing: 0.002em;
    text-rendering: optimizeLegibility;
  }
  .reading-paragraph {
    margin-bottom: 1.25em;
    padding-left: 0;
  }
  .reading-rownum { display: none; }
  .reading-row-flag { margin-left: 0; }
  .reading-paragraph.active { box-shadow: inset 2px 0 0 #c87918; padding-left: 10px; }
}

/* ───────── Corpus index view ───────── */

/* Edition filter in the find bar — same chrome as #find-language */
#find-edition {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  padding: 4px 6px;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  background: #fff;
  color: #1f3864;
  max-width: 160px;
}

#index-mode {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #fafafa;
}
#index-mode[hidden] { display: none; }
#index-loading,
#index-unavailable,
.idx-placeholder {
  padding: 28px;
  font-family: "Arial", sans-serif;
  font-size: 13px;
  color: #777;
}
#index-layout {
  flex: 1;
  min-height: 0;
  display: flex;
}
#index-layout[hidden] { display: none; }
#index-rail-toggle { display: none; }

/* Browse rail (A–Z + filter + type chips + entry list) */
#index-rail {
  width: 290px;
  flex-shrink: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: #f4f4f2;
  border-right: 1px solid #d0d0d0;
}
#index-filter {
  margin: 10px 10px 7px;
  padding: 6px 9px;
  font-family: "Georgia", serif;
  font-size: 13px;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  background: #fff;
}
#index-filter:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.18);
}
#index-type-chips {
  display: flex;
  gap: 4px;
  padding: 0 10px 8px;
}
#index-type-chips button {
  flex: 1;
  font-family: "Arial", sans-serif;
  font-size: 11px;
  padding: 4px 6px;
  border: 1px solid #c8c8c8;
  border-radius: 12px;
  background: #fff;
  color: #444;
  cursor: pointer;
}
#index-type-chips button.active {
  background: #1f3864;
  color: #fff;
  border-color: #15264a;
}
#index-az {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  padding: 0 10px 8px;
}
#index-az button {
  font-family: "Arial", sans-serif;
  font-size: 10px;
  min-width: 19px;
  padding: 2px 2px;
  border: none;
  background: transparent;
  color: #1f3864;
  border-radius: 3px;
  cursor: pointer;
}
#index-az button:hover:not([disabled]) { background: #e2e8f4; }
#index-az button[disabled] { color: #c2c2be; cursor: default; }
#index-entry-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0 0 24px;
  border-top: 1px solid #ddd;
}
#index-entry-list li.idx-letter {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #ebebe7;
  font-family: "Arial", sans-serif;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.05em;
  color: #666;
  padding: 3px 12px;
}
#index-entry-list li.idx-entry {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 5px 12px;
  font-family: "Georgia", serif;
  font-size: 13.5px;
  cursor: pointer;
}
#index-entry-list li.idx-entry:hover { background: #fff5d6; }
#index-entry-list li.idx-entry.active { background: #1f3864; color: #fff; }
#index-entry-list li.idx-empty {
  padding: 10px 12px;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  color: #888;
}
.idx-entry-label { flex: 1; min-width: 0; }
.idx-entry-type {
  font-family: "Arial", sans-serif;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #999;
  flex-shrink: 0;
}
#index-entry-list li.idx-entry.active .idx-entry-type { color: #c8d3e8; }
.idx-entry-count {
  font-family: "Arial", sans-serif;
  font-size: 10px;
  color: #999;
  flex-shrink: 0;
}
#index-entry-list li.idx-entry.active .idx-entry-count { color: #c8d3e8; }

/* "About this index" note link pinned at the bottom of the browse rail */
#index-about-link {
  display: block;
  flex-shrink: 0;
  padding: 7px 12px 9px;
  border-top: 1px solid #ddd;
  font-family: "Arial", sans-serif;
  font-size: 11px;
  color: #1f3864;
  text-decoration: none;
}
#index-about-link:hover { text-decoration: underline; background: #e2e8f4; }

/* Main pane: tabs + entry page / debuts table */
#index-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 16px 26px 70px;
}
#index-tabs {
  display: inline-flex;
  margin-bottom: 14px;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  overflow: hidden;
}
#index-tabs button {
  font-family: "Arial", sans-serif;
  font-size: 12px;
  padding: 5px 16px;
  border: none;
  background: #fff;
  color: #1f3864;
  cursor: pointer;
}
#index-tabs button.active { background: #1f3864; color: #fff; }

.idx-entry-header h2 {
  font-family: "Georgia", serif;
  font-size: 24px;
  color: #1f3864;
  margin: 0 0 2px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.idx-type-badge {
  font-family: "Arial", sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #e2e8f4;
  color: #1f3864;
  padding: 2px 9px;
  border-radius: 10px;
}
.idx-copy-btn { margin-left: auto; }
.idx-entry-langs {
  font-family: "Georgia", serif;
  font-size: 13px;
  font-style: italic;
  color: #777;
  margin-bottom: 4px;
}
.idx-lang-tag {
  font-family: "Arial", sans-serif;
  font-size: 9px;
  font-style: normal;
  color: #999;
}
.idx-entry-total {
  font-family: "Arial", sans-serif;
  font-size: 11px;
  color: #888;
}
.idx-note {
  background: #f3eed8;
  border-left: 3px solid #c8b273;
  padding: 8px 12px;
  margin: 10px 0;
  max-width: 720px;
  font-family: "Georgia", serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: #4a4436;
}
/* Curator-note local editing (band + editor + rebuild/publish strip) */
.idx-note-band { max-width: 720px; margin: 10px 0; }
.idx-note-band .idx-note { margin: 0 0 4px; }
.idx-note-edit-btn,
.idx-note-save,
.idx-note-cancel,
.idx-note-rebuild,
.idx-note-publish {
  font-family: "Arial", sans-serif;
  font-size: 11.5px;
  padding: 2px 8px;
  border: 1px solid #c8b273;
  border-radius: 3px;
  background: #faf7ec;
  color: #4a4436;
  cursor: pointer;
}
.idx-note-edit-btn:hover,
.idx-note-save:hover,
.idx-note-cancel:hover,
.idx-note-rebuild:hover,
.idx-note-publish:hover { background: #f3eed8; }
.idx-note-rebuild:disabled,
.idx-note-publish:disabled { opacity: 0.5; cursor: default; }
.idx-note-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: "Georgia", serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: #4a4436;
  background: #fdfbf3;
  border: 1px solid #c8b273;
  border-left: 3px solid #c8b273;
  padding: 8px 12px;
}
.idx-note-editor-btns { margin-top: 4px; display: flex; gap: 6px; }
.idx-note-status {
  margin-top: 6px;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  color: #4a4436;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.idx-note-error { color: #a33; }
.idx-introduced {
  margin: 12px 0;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  color: #444;
}
.idx-introduced-title {
  display: block;
  font-size: 10.5px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1f3864;
  margin-bottom: 3px;
}
.idx-intro-item { margin: 2px 0; }
.idx-intro-group {
  display: inline-block;
  min-width: 150px;
  color: #888;
}
.idx-intro-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: #1f3864;
  text-decoration: underline;
  cursor: pointer;
}
.idx-intro-link:hover { color: #ff6f00; }

/* Timeline heat strip: one row per column group, one cell per seminar.
   Cell fill (navy alpha by log count) is inline-styled from JS. */
.idx-timeline { margin: 14px 0 6px; }
.idx-tl-scroll {
  overflow-x: auto;
  padding-bottom: 4px;
}
.idx-tl-row {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 2px;
  width: max-content;
}
.idx-tl-label {
  flex: 0 0 150px;
  font-family: "Arial", sans-serif;
  font-size: 10.5px;
  color: #555;
  text-align: right;
  padding-right: 8px;
  white-space: nowrap;
}
.idx-tl-cell {
  flex: 0 0 22px;
  height: 16px;
  border: 1px solid #e3e3e0;
  border-radius: 2px;
}
.idx-tl-head .idx-tl-cell {
  border-color: transparent;
  height: 13px;
  font-family: "Arial", sans-serif;
  font-size: 7.5px;
  color: #888;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.idx-tl-cell.idx-clickable { cursor: pointer; }
.idx-tl-cell.idx-clickable:hover { border-color: #1f3864; }
.idx-tl-cell.idx-tl-absent {
  background: repeating-linear-gradient(45deg,
    #f1f1ee, #f1f1ee 3px, #e1e1dd 3px, #e1e1dd 6px);
}
.idx-tl-cell.idx-tl-first {
  outline: 2px solid #ff8f00;
  outline-offset: -2px;
}
.idx-tl-toggle {
  font-family: "Arial", sans-serif;
  font-size: 11px;
  background: none;
  border: none;
  color: #1f3864;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 0;
}
.idx-tl-toggle:hover { color: #ff6f00; }

/* Edition presence matrix (edition × seminar), collapsed by default */
.idx-matrix-details {
  margin: 8px 0 16px;
  font-family: "Arial", sans-serif;
  font-size: 12px;
}
.idx-matrix-details summary {
  cursor: pointer;
  color: #1f3864;
  font-weight: bold;
}
.idx-matrix-scroll { overflow-x: auto; margin-top: 8px; }
table.idx-matrix {
  border-collapse: collapse;
  font-family: "Arial", sans-serif;
  font-size: 10.5px;
}
table.idx-matrix th,
table.idx-matrix td {
  border: 1px solid #e0e0e0;
  padding: 2px 5px;
  text-align: center;
  min-width: 24px;
}
table.idx-matrix th { background: #f4f4f2; color: #555; font-weight: normal; }
table.idx-matrix th.idx-mx-col {
  text-align: left;
  white-space: nowrap;
  font-weight: bold;
  color: #1f3864;
}
table.idx-matrix td.idx-mx-absent {
  background: repeating-linear-gradient(45deg,
    #f1f1ee, #f1f1ee 3px, #e1e1dd 3px, #e1e1dd 6px);
}

/* Occurrences: seminar → session → snippet items / counts lines */
.idx-occ-title {
  font-family: "Arial", sans-serif;
  font-size: 13px;
  font-weight: bold;
  color: #1f3864;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 18px 0 6px;
}
.idx-occ-sem { margin: 14px 0; }
.idx-occ-sem > h4 {
  font-family: "Arial", sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #1f3864;
  border-bottom: 1px solid #ddd;
  padding-bottom: 3px;
  margin-bottom: 6px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.idx-occ-count {
  font-weight: normal;
  font-size: 10.5px;
  color: #888;
}
.idx-occ-session { margin: 6px 0 12px; }
.idx-occ-session-head {
  font-family: "Arial", sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #444;
  cursor: pointer;
  padding: 2px 0;
}
.idx-occ-session-head:hover { color: #ff6f00; }
.idx-open-link {
  font-weight: normal;
  color: #1f3864;
  margin-left: 6px;
}
.idx-occ-item {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 3px 0 3px 16px;
  cursor: pointer;
  border-radius: 2px;
  font-family: "Georgia", serif;
  font-size: 13px;
  line-height: 1.45;
}
.idx-occ-item:hover { background: #fff5d6; }
.idx-occ-collabel {
  font-family: "Arial", sans-serif;
  font-size: 10.5px;
  color: #888;
  min-width: 150px;
  text-align: right;
  flex-shrink: 0;
}
.idx-occ-snippet { flex: 1; color: #222; }
.idx-occ-snippet mark,
.idx-ctx-text mark {
  background: #ffe082;
  padding: 0 1px;
  border-radius: 1px;
  font-weight: bold;
}
.idx-occ-counts {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 3px 0 3px 16px;
  font-family: "Arial", sans-serif;
  font-size: 11px;
  color: #555;
}
.idx-occ-n { color: #888; }
.idx-row-jump {
  font-family: "Arial", sans-serif;
  font-size: 10.5px;
  background: #fff;
  border: 1px solid #c8c8c8;
  border-radius: 3px;
  color: #1f3864;
  padding: 1px 7px;
  cursor: pointer;
}
.idx-row-jump:hover { border-color: #1f3864; background: #f2f6ff; }
.idx-more { color: #999; font-size: 10.5px; }
.idx-ctx-btn {
  font-family: "Arial", sans-serif;
  font-size: 10.5px;
  background: none;
  border: none;
  color: #1f3864;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.idx-ctx-btn:hover { color: #ff6f00; }
.idx-ctx-holder {
  margin: 4px 0 10px 26px;
  border-left: 2px solid #e0d8b8;
  padding-left: 12px;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  color: #666;
}
.idx-ctx-holder[hidden] { display: none; }
.idx-ctx-item { margin-bottom: 10px; }
.idx-ctx-text {
  margin-top: 3px;
  font-family: "Georgia", serif;
  font-size: 13px;
  line-height: 1.55;
  color: #333;
}
.idx-ctx-focus { background: #fffbe8; padding: 1px 3px; }
.idx-ctx-neighbor { color: #999; font-size: 12px; }
.idx-ctx-more { color: #999; }
.idx-detail-loading {
  font-family: "Arial", sans-serif;
  font-size: 12px;
  color: #888;
  padding: 10px 0;
}

/* Debuts tab */
.idx-debuts table {
  border-collapse: collapse;
  font-family: "Georgia", serif;
  font-size: 13px;
}
.idx-debuts th {
  font-family: "Arial", sans-serif;
  font-size: 10.5px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #1f3864;
  text-align: left;
  border-bottom: 1px solid #ccc;
  padding: 4px 14px 4px 0;
}
.idx-debuts td {
  border-bottom: 1px solid #eee;
  padding: 4px 14px 4px 0;
  vertical-align: baseline;
}
.idx-debut-date {
  font-family: "Arial", sans-serif;
  font-size: 11px;
  color: #666;
  white-space: nowrap;
}
.idx-debut-entry {
  background: none;
  border: none;
  padding: 0;
  font-family: "Georgia", serif;
  font-size: 13.5px;
  color: #1f3864;
  cursor: pointer;
  text-align: left;
}
.idx-debut-entry:hover { color: #ff6f00; text-decoration: underline; }
.idx-debut-sem {
  font-family: "Arial", sans-serif;
  font-size: 11px;
  color: #666;
}

/* Transient toast for jump/drift notices */
#index-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  background: #1f3864;
  color: #fff;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  padding: 9px 16px;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  z-index: 300;
  max-width: min(480px, calc(100vw - 32px));
  text-align: center;
}
#index-toast.visible { opacity: 0.96; }

/* The index view is corpus-level — the per-session chrome above the find
   bar is noise there. */
body.view-index #session-meta,
body.view-index #moved-session-notice,
body.view-index #find-results { display: none; }

/* ── Index view + edition filter, phones ── */
@media (max-width: 720px) {
  #find-edition { display: none; }
  body.mobile-search-open #find-edition {
    display: block;
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100%;
    max-width: none;
    min-height: 36px;
  }

  #index-layout { flex-direction: column; }
  #index-rail-toggle {
    display: block;
    margin: 8px 10px 0;
    min-height: 38px;
    font-family: "Arial", sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #1f3864;
    background: #fff;
    border: 1px solid #c8c8c8;
    border-radius: 6px;
    cursor: pointer;
  }
  #index-rail {
    display: none;
    width: 100%;
    max-height: 46vh;
    border-right: none;
    border-bottom: 1px solid #d0d0d0;
  }
  #index-layout.rail-open #index-rail { display: flex; }
  #index-main { padding: 12px 12px 70px; }
  .idx-entry-header h2 { font-size: 20px; }
  .idx-tl-label { flex-basis: 92px; font-size: 9.5px; }
  .idx-intro-group { min-width: 0; display: block; }
  .idx-occ-item { display: block; padding-left: 8px; }
  .idx-occ-collabel {
    display: block;
    min-width: 0;
    text-align: left;
    margin-bottom: 2px;
  }
  .idx-occ-counts { padding-left: 8px; }
  .idx-ctx-holder { margin-left: 10px; }
}

/* Local-GUI-only "edit this text" link injected at the top of the help /
   admin-note popover content (app.js makeDocContentLoader; never rendered
   in public mode). */
.doc-edit-link {
  display: block;
  font-family: Arial, sans-serif;
  font-size: 11.5px;
  color: #1f3864;
  text-decoration: none;
  border-bottom: 1px dashed #b8c4dc;
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.doc-edit-link:hover { color: #000; }

/* ───────── Comparison downloader (build-a-document dialog) ───────── */
/* Entry points */
.dl-open-icon { padding: 2px 8px; }
.dl-build-entry {
  padding: 10px 14px 12px;
  border-top: 1px solid #eee;
}
#dl-open-btn {
  background: #1f3864;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 7px 14px;
  font-family: Arial, sans-serif;
  font-size: 12.5px;
  font-weight: bold;
  cursor: pointer;
}
#dl-open-btn:hover { background: #2a4a80; }
.dl-build-hint {
  font-family: Arial, sans-serif;
  font-size: 11px;
  color: #777;
  margin-top: 6px;
  max-width: 60ch;
}

/* Modal */
#dl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 28, 46, 0.45);
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 12px 12px;
  overflow-y: auto;
}
#dl-modal {
  background: #fff;
  width: 100%;
  max-width: 580px;
  border-radius: 8px;
  box-shadow: 0 14px 44px rgba(10, 16, 30, 0.35);
  font-family: Arial, sans-serif;
  font-size: 13px;
  overflow: hidden;
}
#dl-head {
  background: #1f3864;
  color: #fff;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#dl-head b { font-size: 14px; }
#dl-close {
  background: none;
  border: none;
  color: #c8d3e8;
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
}
#dl-close:hover { color: #fff; }
#dl-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dl-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #777;
  margin-bottom: 6px;
}
#dl-scope { display: flex; gap: 8px; flex-wrap: wrap; }
#dl-scope label {
  border: 1px solid #c9cfda;
  border-radius: 6px;
  padding: 8px 12px;
  display: flex;
  gap: 8px;
  align-items: baseline;
  cursor: pointer;
  flex: 1;
  min-width: 190px;
  background: #fdfdfd;
}
#dl-scope label:has(input:checked) {
  border-color: #1f3864;
  background: #eef2f9;
}
#dl-scope label:has(input:disabled) { opacity: 0.55; cursor: default; }
#dl-scope small { color: #777; font-size: 11px; }
#dl-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}
.dl-col {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border: 1px solid #e2e2e2;
  border-radius: 5px;
  cursor: pointer;
  background: #fff;
  font-size: 12.5px;
}
.dl-col:has(input:checked) {
  border-color: #1f3864;
  box-shadow: inset 0 0 0 1px #1f3864;
}
.dl-sw {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}
.dl-copub {
  margin-left: auto;
  font-size: 10px;
  color: #9a6a10;
  white-space: nowrap;
}
#dl-cols-status {
  font-size: 11.5px;
  color: #777;
  margin-top: 6px;
}
#dl-includes { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; }
#dl-includes label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
#dl-verdict {
  background: #f4f6fa;
  border: 1px solid #dfe5ef;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: #333;
}
#dl-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#dl-build {
  background: #1f3864;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 9px 20px;
  font-size: 13.5px;
  font-weight: bold;
  cursor: pointer;
}
#dl-build:disabled { background: #9aa5b8; cursor: default; }
#dl-cancel {
  background: #fff;
  color: #1f3864;
  border: 1px solid #c9cfda;
  border-radius: 6px;
  padding: 8px 14px;
  cursor: pointer;
}
#dl-progress { flex: 1; min-width: 180px; font-size: 12px; color: #555; }
#dl-progress-bar {
  height: 5px;
  background: #e3e7ee;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}
#dl-progress-bar i {
  display: block;
  height: 100%;
  width: 0%;
  background: #1f3864;
  transition: width 0.25s;
}
@media (prefers-reduced-motion: reduce) {
  #dl-progress-bar i { transition: none; }
}
.dl-done { color: #1c6b32; font-weight: bold; }
.dl-error { color: #a33; }
@media (max-width: 640px) {
  #dl-cols { grid-template-columns: 1fr; }
  #dl-overlay { padding-top: 12px; }
}