@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=IM+Fell+English:ital@0;1&family=Lora:ital,wght@0,400;0,600;1,400;1,600&family=Courier+Prime:wght@400;700&display=swap');

/* ─── CSS Variables ──────────────────────────────────────────── */
:root {
  --parchment:       #F2E8D0;
  --parchment-dark:  #D9CBA8;
  --ink:             #1C1208;
  --ink-faded:       #4A3728;
  --voc-red:         #8B1A1A;
  --voc-gold:        #C8922A;
  --cape-blue:       #2C4A6E;
  --cape-blue-light: #4A7FA5;
  --shadow-ink:      rgba(28,18,8,0.25);
  --aged-white:      #FAF6EE;
  --header-h:        110px;
  --nav-h:           48px;
  --footer-h:        50px;
  --radius:          4px;
  --transition:      0.25s ease;
}

[data-theme="dark"] {
  --parchment:      #1a1208;
  --parchment-dark: #2e1e0e;
  --ink:            #EDE0C4;
  --ink-faded:      #B09878;
  --aged-white:     #221408;
}

/* ─── Reset ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background-color: var(--parchment);
  color: var(--ink);
  font-family: 'Lora', Georgia, serif;
  font-size: 15px;
  line-height: 1.7;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

/* ─── Paper grain overlay ────────────────────────────────────── */
body::before {
  content:'';
  position:fixed; inset:0; pointer-events:none; z-index:1000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.5;
}

/* ─── Vignette ───────────────────────────────────────────────── */
body::after {
  content:'';
  position:fixed; inset:0; pointer-events:none; z-index:999;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(28,18,8,0.18) 100%);
}

/* ─── Typography ─────────────────────────────────────────────── */
h1,h2,h3,h4,h5 {
  font-family: 'Cinzel', 'Times New Roman', serif;
  color: var(--ink);
  line-height: 1.3;
}
code, .ref-tag, .record-id {
  font-family: 'Courier Prime', 'Courier New', monospace;
  font-size: 0.82em;
}
a { color: var(--cape-blue); text-decoration:none; }
a:hover { color: var(--voc-gold); text-decoration:underline; }

/* ─── Header ─────────────────────────────────────────────────── */
#site-header {
  position: sticky; top:0; z-index:200;
  background-color: var(--cape-blue);
  border-bottom: 3px solid var(--voc-gold);
  height: var(--header-h);
  display: flex; align-items: center;
  justify-content: center;
  padding: 0 24px;
  gap: 16px;
  box-shadow: 0 2px 12px var(--shadow-ink);
  overflow: hidden;
}

.header-voc-logo {
  position: absolute; right: 180px; top: 50%; transform: translateY(-50%);
  width: 148px; height: 148px; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(28,18,8,0.55)) drop-shadow(0 0 8px rgba(200,146,42,0.35));
}

.eggsa-logo-link {
  position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; flex-shrink: 0;
  opacity: 0.9; transition: opacity 0.2s;
  background: rgba(255,255,255,0.90); border-radius: 6px; padding: 4px 8px;
}
.eggsa-logo-link:hover { opacity: 1; background: rgba(255,255,255,1); }
.eggsa-logo-img {
  height: 52px; width: auto; display: block;
}

.header-logo {
  display: flex; align-items: center; gap: 16px;
}

.header-compass {
  flex-shrink: 0;
}

.header-titles {
  display:flex; flex-direction:column; align-items:center; text-align:center;
}

.site-title {
  font-family: 'Cinzel', serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--voc-gold);
  letter-spacing: 0.06em;
  line-height: 1.15;
}

.site-tagline {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(250,246,238,0.8);
  line-height: 1.4;
}

.header-controls {
  position:absolute; right:24px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:10px;
}

.ctrl-btn {
  background: rgba(250,246,238,0.1);
  border: 1px solid rgba(200,146,42,0.5);
  color: var(--voc-gold);
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}
.ctrl-btn:hover, .ctrl-btn.active {
  background: var(--voc-gold);
  color: var(--cape-blue);
}

.theme-btn {
  width: 34px; height: 34px; padding:0;
  display:flex; align-items:center; justify-content:center;
  font-size: 1rem;
}

.theme-icon-moon { display:inline; }
.theme-icon-sun  { display:none;   }
[data-theme="dark"] .theme-icon-moon { display:none;   }
[data-theme="dark"] .theme-icon-sun  { display:inline; }

/* ─── Navigation bar ─────────────────────────────────────────── */
#site-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 190;
  background-color: var(--parchment-dark);
  border-bottom: 2px solid var(--voc-gold);
  height: var(--nav-h);
  display: flex; align-items: center;
  padding: 0 16px;
  gap: 4px;
  overflow-x: auto;
  box-shadow: 0 2px 8px var(--shadow-ink);
  scrollbar-width: thin;
}

.nav-tab {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-faded);
  background: none;
  border: 1px solid transparent;
  padding: 6px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
  text-transform: uppercase;
}
.nav-tab:hover {
  color: var(--cape-blue);
  border-color: var(--cape-blue-light);
  background: rgba(44,74,110,0.07);
}
.nav-tab.active {
  color: var(--aged-white);
  background: var(--cape-blue);
  border-color: var(--cape-blue);
}

/* ─── Main content ───────────────────────────────────────────── */
#main-content {
  flex: 1;
  padding: 28px 24px;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

/* ─── Section panels ─────────────────────────────────────────── */
.section-panel { display:none; }
.section-panel.active { display:block; }

.section-heading {
  font-size: 1.5rem;
  color: var(--cape-blue);
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 12px;
}
.section-heading::after {
  content:'';
  flex:1; height:1px;
  background: linear-gradient(to right, var(--voc-gold), transparent);
}

.section-sub { color: var(--ink-faded); font-size: 0.88rem; margin-bottom: 20px; }

/* ─── Browse split layout (1/4 picker | 3/4 results) ─────────── */
.browse-layout {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 24px;
  align-items: start;
}

.browse-picker {
  position: sticky;
  top: calc(var(--header-h) + var(--nav-h) + 16px);
  max-height: calc(100vh - var(--header-h) - var(--nav-h) - var(--footer-h) - 48px);
  overflow-y: auto;
  background: #F2E7D1;
  border: 1px solid var(--voc-gold);
  border-radius: var(--radius);
  padding: 12px;
}

.browse-results {
  min-height: 200px;
}

.browse-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  color: var(--ink-faded);
  font-style: italic;
  font-family: 'IM Fell English', serif;
  font-size: 0.95rem;
  border: 1px dashed var(--parchment-dark);
  border-radius: var(--radius);
  text-align: center;
  padding: 24px;
}

.browse-picker .index-grid {
  grid-template-columns: 1fr;
  max-height: none;
  margin-bottom: 0;
}

.browse-picker .volume-cards {
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  margin-bottom: 0;
}

.browse-picker .alpha-strip {
  margin-bottom: 10px;
}

.browse-picker .search-row {
  margin-bottom: 10px;
}

/* Picker with alpha header: flex column so header is outside scroll area */
.browse-picker-with-header {
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

.browse-picker-header {
  flex-shrink: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(200,146,42,0.3);
  margin-bottom: 8px;
}

/* Scrollable list area below the fixed header */
.browse-picker-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.browse-picker-body .index-grid {
  max-height: none;
}

/* Persons section: 50/50 split with two-column name list */
.persons-layout {
  grid-template-columns: 1fr 1fr;
}
.persons-layout .browse-picker .index-grid,
.persons-layout .browse-picker-body .index-grid {
  grid-template-columns: repeat(2, 1fr);
}

@media(max-width:900px) {
  .browse-picker-with-header { overflow-y: auto; display: block; }
  .browse-picker-header { border-bottom: none; margin-bottom: 0; }
  .browse-picker-body { overflow-y: visible; }
}

[data-theme="dark"] .browse-picker {
  background: var(--parchment-dark);
  border-color: var(--voc-gold);
}

[data-theme="dark"] .browse-placeholder {
  border-color: var(--ink-faded);
}

@media(max-width:900px) {
  .browse-layout { grid-template-columns: 1fr; }
  .browse-picker { position: static; max-height: 260px; }
}

/* ─── Decorative divider ─────────────────────────────────────── */
.rope-divider {
  text-align:center; margin:20px 0; opacity:0.4; font-size:1.1rem;
  color: var(--voc-gold);
  letter-spacing: 0.3em;
}

/* ─── Filter bar ─────────────────────────────────────────────── */
.filter-bar {
  background: var(--parchment-dark);
  border: 1px solid var(--voc-gold);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex; flex-wrap:wrap; gap:12px; align-items:flex-end;
}
.filter-bar [data-theme="dark"] { background: var(--parchment-dark); }

/* Sticky filter bar inside browse-results */
.browse-results .filter-bar {
  position: sticky;
  top: calc(var(--header-h) + var(--nav-h));
  z-index: 10;
  box-shadow: 0 2px 8px var(--shadow-ink);
}
@media(max-width:768px) {
  .browse-results .filter-bar { position: static; box-shadow: none; }
}

.filter-group {
  display:flex; flex-direction:column; gap:4px;
}
.filter-group label {
  font-family: 'Courier Prime', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faded);
}
.filter-group select,
.filter-group input[type="number"],
.filter-group input[type="text"] {
  background: var(--aged-white);
  border: 1px solid var(--parchment-dark);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: 'Lora', serif;
  font-size: 0.88rem;
  padding: 5px 10px;
  min-width: 100px;
  transition: border-color var(--transition);
}
.filter-group select:focus,
.filter-group input:focus {
  outline:none;
  border-color: var(--cape-blue-light);
}
[data-theme="dark"] .filter-group select,
[data-theme="dark"] .filter-group input {
  background: var(--parchment-dark);
  border-color: var(--ink-faded);
  color: var(--ink);
}

.btn-primary {
  background: var(--cape-blue);
  color: var(--aged-white);
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  border: none;
  padding: 7px 18px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--transition);
  align-self: flex-end;
}
.btn-primary:hover { background: var(--cape-blue-light); }

.btn-secondary {
  background: none;
  color: var(--ink-faded);
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  border: 1px solid var(--parchment-dark);
  padding: 6px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  align-self: flex-end;
}
.btn-secondary:hover { border-color: var(--voc-gold); color: var(--voc-gold); }

.btn-danger {
  background: none;
  color: var(--voc-red);
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  border: 1px solid var(--voc-red);
  padding: 6px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all var(--transition);
  align-self: flex-end;
}
.btn-danger:hover { background: var(--voc-red); color: var(--aged-white); }

/* ─── Person type filter (All / Signatories Only) ────────────── */
.person-type-filter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
.per-type-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.type-filter-btn {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  padding: 6px 16px;
  border: 1px solid var(--parchment-dark);
  border-radius: var(--radius);
  background: var(--aged-white);
  color: var(--ink-faded);
  cursor: pointer;
  transition: all var(--transition);
}
.type-filter-btn:hover {
  border-color: var(--voc-gold);
  color: var(--voc-gold);
}
.type-filter-btn.active {
  background: var(--voc-gold);
  color: var(--ink);
  border-color: var(--voc-gold);
}
[data-theme="dark"] .type-filter-btn {
  background: var(--parchment-dark);
  color: var(--ink-faded);
  border-color: var(--ink-faded);
}
[data-theme="dark"] .type-filter-btn:hover {
  border-color: var(--voc-gold);
  color: var(--voc-gold);
}
[data-theme="dark"] .type-filter-btn.active {
  background: var(--voc-gold);
  color: var(--ink);
  border-color: var(--voc-gold);
}

/* ─── Alpha filter strip ─────────────────────────────────────── */
.alpha-strip {
  display: flex; flex-wrap:wrap; gap:4px;
  margin-bottom: 14px;
}
.alpha-btn {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 600;
  width: 30px; height:30px;
  border: 1px solid var(--parchment-dark);
  border-radius: var(--radius);
  background: var(--aged-white);
  color: var(--ink-faded);
  cursor: pointer;
  transition: all var(--transition);
  display:flex; align-items:center; justify-content:center;
}
.alpha-btn:hover { border-color: var(--cape-blue); color: var(--cape-blue); }
.alpha-btn.active { background:var(--cape-blue); color:var(--aged-white); border-color:var(--cape-blue); }
.alpha-btn:disabled { opacity:0.3; cursor:default; }
.record-alpha-strip {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--parchment-dark);
  border: 1px solid var(--voc-gold);
  border-radius: var(--radius);
  opacity: 0.92;
}
.record-alpha-strip:empty { display:none; }

/* ─── Search box ─────────────────────────────────────────────── */
.search-row {
  display:flex; gap:6px; align-items:center; margin-bottom:14px;
}
.search-input {
  flex:1;
  background: var(--aged-white);
  border: 1px solid var(--parchment-dark);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: 'Lora', serif;
  font-size: 0.9rem;
  padding: 7px 12px;
  transition: border-color var(--transition);
}
.search-input:focus { outline:none; border-color:var(--cape-blue-light); }
[data-theme="dark"] .search-input { background:var(--parchment-dark); border-color:var(--ink-faded); color:var(--ink); }

.search-btn {
  background: var(--cape-blue);
  border: none;
  border-radius: var(--radius);
  color: var(--aged-white);
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  font-size:1rem;
  transition:background var(--transition);
  flex-shrink:0;
}
.search-btn:hover { background:var(--cape-blue-light); }

/* ─── Index item list (categories, persons, etc.) ────────────── */
.index-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(220px,1fr));
  gap:8px;
  margin-bottom:18px;
  max-height: 320px;
  overflow-y:auto;
  padding-right:4px;
}
.index-item {
  background: #FAF6EE;
  border: 1px solid var(--parchment-dark);
  border-radius: var(--radius);
  padding: 8px 12px;
  cursor:pointer;
  display:flex; justify-content:space-between; align-items:center;
  transition: all var(--transition);
  gap:8px;
  min-width: 0;
}
.index-item:hover { border-color:var(--voc-gold); background:var(--parchment); }
.index-item.selected { border-color:var(--voc-gold); background:rgba(200,146,42,0.12); }
.index-item-name {
  font-size:0.85rem; color:var(--ink); flex:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  min-width: 0;
}
.index-item-count {
  font-family:'Courier Prime',monospace;
  font-size:0.72rem; color:var(--ink-faded);
  background:var(--parchment-dark);
  border-radius:10px; padding:1px 7px;
  flex-shrink:0;
}
[data-theme="dark"] .index-item { background:var(--parchment-dark); }
[data-theme="dark"] .index-item-count { background:var(--aged-white); }

/* ─── Index item variant-dot and tooltip ─────────────────────── */
.variant-dot {
  font-size: 0.6rem;
  color: var(--voc-gold);
  opacity: 0.75;
  flex-shrink: 0;
  margin: 0 2px;
  pointer-events: none;
  user-select: none;
}
.index-item[data-tooltip] { position: relative; }
.index-item[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  background: var(--ink);
  color: var(--parchment);
  font-family: 'Courier Prime', monospace;
  font-size: 0.7rem;
  line-height: 1.45;
  padding: 5px 9px;
  border-radius: 4px;
  white-space: normal;
  max-width: 320px;
  min-width: 120px;
  z-index: 200;
  pointer-events: none;
  box-shadow: 0 3px 10px var(--shadow-ink);
  word-break: break-word;
}
[data-theme="dark"] .index-item[data-tooltip]:hover::after {
  background: var(--parchment);
  color: var(--ink);
}

/* ─── Person card petitioner indicator ───────────────────────── */
.index-item.is-petitioner {
  border-left: 3px solid var(--voc-red);
}
.index-item.is-petitioner-act {
  border-left: 3px solid #5C7A4A;
}
.index-item.is-ref-only {
  border-left: 3px solid var(--parchment-dark);
}
.person-role-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  vertical-align: middle;
}
.person-role-dot.signatory     { background: var(--voc-red); }
.person-role-dot.petitioner-act { background: #5C7A4A; }
.person-role-dot.ref-only       { background: transparent; border: 1.5px solid var(--ink-faded); }
[data-theme="dark"] .person-role-dot.petitioner-act { background: #8AAF70; }
[data-theme="dark"] .person-role-dot.ref-only { border-color: var(--ink-faded); }
.per-legend {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'IM Fell English', serif;
  font-size: 0.78rem; color: var(--ink-faded);
}
.per-legend .person-role-dot { flex-shrink: 0; }

/* ─── Volume selector ────────────────────────────────────────── */
.volume-cards {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;
  margin-bottom:22px;
}
.volume-card {
  background:var(--aged-white);
  border:1px solid var(--voc-gold);
  border-radius:var(--radius);
  padding:16px;
  cursor:pointer;
  text-align:center;
  transition:all var(--transition);
  box-shadow:2px 2px 6px var(--shadow-ink);
}
.volume-card:hover { background:var(--parchment-dark); transform:translateY(-1px); }
.volume-card.selected { background:var(--cape-blue); border-color:var(--cape-blue); color:var(--aged-white); }
.volume-card.selected h3 { color:var(--voc-gold); }
.volume-card h3 { font-size:0.9rem; margin-bottom:4px; }
.volume-card .vol-range { font-family:'Courier Prime',monospace; font-size:1.6rem; font-weight:700; color:var(--voc-gold); margin:6px 0 2px; }
.volume-card .vol-count { font-size:0.75rem; color:var(--ink-faded); margin-top:4px; }
.volume-card.selected .vol-count { color:rgba(250,246,238,0.7); }

/* ─── Results list ───────────────────────────────────────────── */
.results-header {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:10px;
}
.results-count {
  font-family:'Courier Prime',monospace;
  font-size:0.78rem; color:var(--ink-faded);
}

/* ─── Sort bar ───────────────────────────────────────────────── */
.sort-bar {
  display: flex; align-items: center; gap: 5px;
}
.sort-lbl {
  font-family: 'Courier Prime', monospace;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faded);
  margin-right: 2px;
}
.sort-btn {
  font-family: 'Courier Prime', monospace;
  font-size: 0.72rem;
  padding: 3px 10px;
  border: 1px solid var(--parchment-dark);
  border-radius: var(--radius);
  background: var(--aged-white);
  color: var(--ink-faded);
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
}
.sort-btn:hover { border-color: var(--voc-gold); color: var(--voc-gold); }
.sort-btn.active { background: var(--voc-gold); color: var(--aged-white); border-color: var(--voc-gold); }
[data-theme="dark"] .sort-btn { background: var(--parchment-dark); }
[data-theme="dark"] .sort-btn.active { color: var(--ink); }

.record-list { display:flex; flex-direction:column; gap:8px; }

.record-card {
  background:var(--aged-white);
  border:1px solid var(--parchment-dark);
  border-left:4px solid var(--voc-gold);
  border-radius:var(--radius);
  padding:10px 14px;
  cursor:pointer;
  transition:all var(--transition);
  box-shadow:1px 1px 4px var(--shadow-ink);
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:8px;
  align-items:start;
}
.record-card:hover {
  border-left-color:var(--cape-blue);
  background:var(--parchment-dark);
  transform:translateX(2px);
}
.record-card-date {
  font-family:'Courier Prime',monospace;
  font-size:0.82rem; color:var(--ink);
  font-weight:600;
  white-space:nowrap;
  line-height:1.5;
}
.record-card-page {
  font-size:0.7rem; color:var(--ink-faded);
  font-weight:400;
}
.record-card-body { min-width:0; }
.record-card-desc {
  font-family:'Lora',serif;
  font-size:0.82rem; color:var(--ink-faded);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.45;
}
.record-card-id {
  text-align:right;
  font-family:'Courier Prime',monospace;
  font-size:0.7rem; color:var(--voc-gold);
  white-space:nowrap;
}
.record-tag {
  display:inline-block;
  font-family:'Courier Prime',monospace;
  font-size:0.68rem;
  background:var(--parchment-dark);
  border:1px solid var(--voc-gold);
  border-radius:3px;
  padding:1px 6px;
  color:var(--ink-faded);
  margin-right:3px;
}
[data-theme="dark"] .record-card { background:var(--parchment-dark); }
[data-theme="dark"] .record-card:hover { background:var(--aged-white); }

/* ─── Pagination ─────────────────────────────────────────────── */
.pagination {
  display:flex; justify-content:center; align-items:center;
  gap:6px; margin-top:16px; flex-wrap:wrap;
}
.page-btn {
  font-family:'Cinzel',serif; font-size:0.72rem;
  min-width:32px; height:30px; padding:0 8px;
  border:1px solid var(--parchment-dark);
  background:var(--aged-white);
  color:var(--ink-faded);
  border-radius:var(--radius); cursor:pointer;
  transition:all var(--transition);
}
.page-btn:hover { border-color:var(--cape-blue); color:var(--cape-blue); }
.page-btn.active { background:var(--cape-blue); color:var(--aged-white); border-color:var(--cape-blue); }
.page-btn:disabled { opacity:0.35; cursor:default; }
[data-theme="dark"] .page-btn { background:var(--parchment-dark); }

/* ─── Introduction scroll ────────────────────────────────────── */
.intro-scroll {
  background:var(--aged-white);
  border:2px solid var(--voc-gold);
  border-radius:6px;
  padding:40px 48px;
  max-width:860px;
  margin:0 auto;
  box-shadow:4px 4px 20px var(--shadow-ink);
  position:relative;
}
.intro-scroll::before,
.intro-scroll::after {
  content:'';
  display:block; height:6px;
  background:linear-gradient(to right, var(--voc-gold), var(--voc-red), var(--voc-gold));
  border-radius:3px; margin-bottom:24px;
}
.intro-scroll::after { margin-bottom:0; margin-top:24px; }

.intro-badge {
  display:inline-block;
  font-family:'Courier Prime',monospace;
  font-size:0.72rem; letter-spacing:0.1em;
  color:var(--voc-gold);
  border:1px solid var(--voc-gold);
  padding:4px 14px;
  border-radius:20px;
  margin-bottom:20px;
}
.intro-scroll h2 {
  font-size:1.6rem;
  color:var(--cape-blue);
  margin-bottom:20px;
  text-align:center;
}
.intro-scroll p {
  margin-bottom:1.1em;
  text-align:justify;
  hyphens:auto;
}
.drop-cap::first-letter {
  float:left;
  font-family:'Cinzel',serif;
  font-size:4.2em;
  line-height:0.75;
  margin:0.05em 0.08em 0 0;
  color:var(--voc-red);
}
.intro-citation {
  margin-top:28px;
  padding-top:16px;
  border-top:1px solid var(--parchment-dark);
  font-style:italic;
  font-size:0.82rem;
  color:var(--ink-faded);
  text-align:center;
}

/* ─── Intro dual-panel layout ────────────────────────────────── */
#intro-panels-container {
  /* single-panel: .intro-scroll already centers itself */
}
#intro-panels-container.dual {
  display:flex;
  gap:24px;
  align-items:flex-start;
  max-width:1760px;
  margin:0 auto;
}
#intro-panels-container.dual .intro-scroll {
  flex:1;
  min-width:0;
  max-width:none;
  margin:0;
}

/* Diaries badge — blue accent instead of gold */
.intro-badge-diaries {
  color:var(--cape-blue-light);
  border-color:var(--cape-blue-light);
}
.intro-scroll-diaries h2 {
  color:var(--cape-blue);
}

/* Annexures badge — olive/green accent */
.intro-badge-annexures {
  color:#5C7A4A;
  border-color:#5C7A4A;
}
.intro-scroll-annexures h2 {
  color:#4A6B38;
}
[data-theme="dark"] .intro-badge-annexures {
  color:#8AAF70;
  border-color:#8AAF70;
}
[data-theme="dark"] .intro-scroll-annexures h2 {
  color:#8AAF70;
}

@media(max-width:900px){
  #intro-panels-container.dual { flex-direction:column; }
  #intro-panels-container.dual .intro-scroll { max-width:860px; margin:0 auto; }
}

.intro-scroll-about {
  max-width:860px;
  margin:0 auto;
}
.intro-scroll-about h2 {
  color:var(--ink-faded);
}
.intro-scroll p.intro-signature {
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid var(--parchment-dark);
  font-style:italic;
  font-size:0.92rem;
  color:var(--ink-faded);
  text-align:right;
  hyphens:none;
}

/* ─── Details Modal ──────────────────────────────────────────── */
.modal-overlay {
  display:none;
  position:fixed; inset:0; z-index:500;
  background:rgba(28,18,8,0.5);
}
.modal-overlay.open { display:block; }

.modal-panel {
  position:fixed;
  top:50%; left:50%;
  transform:translate(-50%, -50%) scale(0.96);
  width:80vw;
  max-width:1400px;
  height:80vh;
  background:var(--aged-white);
  border:3px solid var(--voc-gold);
  box-shadow:0 8px 40px var(--shadow-ink);
  display:flex; flex-direction:column;
  z-index:501;
  opacity:0;
  transition:transform 0.3s ease, opacity 0.3s ease;
  overflow:hidden;
}
.modal-overlay.open .modal-panel {
  transform:translate(-50%, -50%) scale(1);
  opacity:1;
}
[data-theme="dark"] .modal-panel { background:var(--parchment-dark); }

.modal-header {
  background:var(--cape-blue);
  padding:14px 18px;
  display:flex; align-items:center; gap:10px;
  flex-shrink:0;
  border-bottom:2px solid var(--voc-gold);
}
.modal-header-info {
  flex:1; display:flex; flex-direction:column; min-width:0;
}
.modal-header h3 {
  font-size:1.1rem; color:var(--voc-gold); font-weight:600;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  overflow:hidden;
}
#modal-title {
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  flex-shrink:1; min-width:0;
}
.modal-header-date {
  font-family:'Courier Prime',monospace; font-size:0.85rem;
  color:var(--parchment-dark); font-weight:400; opacity:0.9;
  white-space:nowrap; flex-shrink:0;
}
.modal-header-source {
  flex-shrink:0;
}
.modal-close {
  background:rgba(250,246,238,0.15);
  border:1px solid rgba(200,146,42,0.4);
  color:var(--voc-gold);
  width:28px; height:28px;
  border-radius:var(--radius);
  cursor:pointer; font-size:1rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--transition);
  flex-shrink:0;
}
.modal-close:hover { background:rgba(250,246,238,0.3); }

.modal-nav {
  display:flex; align-items:center; gap:8px;
  padding:10px 18px;
  background:var(--parchment-dark);
  border-bottom:1px solid var(--voc-gold);
  flex-shrink:0;
}
.modal-nav-btn {
  font-family:'Cinzel',serif; font-size:0.7rem; letter-spacing:0.06em;
  background:var(--aged-white);
  border:1px solid var(--parchment-dark);
  color:var(--ink-faded); padding:4px 12px;
  border-radius:var(--radius); cursor:pointer;
  transition:all var(--transition);
}
.modal-nav-btn:hover:not(:disabled) { border-color:var(--cape-blue); color:var(--cape-blue); }
.modal-nav-btn:disabled { opacity:0.35; cursor:default; }
[data-theme="dark"] .modal-nav-btn { background:var(--parchment); border-color:var(--ink-faded); color:var(--ink); }

.modal-nav-pos {
  font-family:'Courier Prime',monospace; font-size:0.75rem;
  color:var(--ink-faded); flex:1; text-align:center;
}

.modal-body {
  flex:1; overflow-y:auto;
  padding:20px 22px;
}

.modal-row {
  display:grid; gap:12px; margin-bottom:14px;
}
.modal-row-3 { grid-template-columns:repeat(3,1fr); }
.modal-row-4 { grid-template-columns:repeat(2,1fr) repeat(2,1fr); }
.modal-row-full { grid-template-columns:1fr; }

.modal-field {
  background:var(--parchment);
  border:1px solid var(--parchment-dark);
  border-radius:var(--radius);
  padding:8px 12px;
}
[data-theme="dark"] .modal-field { background:var(--aged-white); }

.modal-field-label {
  font-family:'Courier Prime',monospace;
  font-size:0.65rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--voc-gold);
  margin-bottom:3px;
}
.modal-field-value {
  font-family:'Lora',serif;
  font-size:0.92rem; color:var(--ink); line-height:1.55;
}
.modal-field-value.description-text {
  font-family:'Lora',serif;
  font-size:0.95rem; line-height:1.8;
  text-align:justify; hyphens:auto;
}
.modal-tags { display:flex; flex-wrap:wrap; gap:5px; }
.modal-tag {
  font-family:'Courier Prime',monospace; font-size:0.7rem;
  background:var(--parchment-dark);
  border:1px solid var(--voc-gold);
  color:var(--ink-faded);
  padding:2px 8px; border-radius:10px;
}
.modal-tag-person {
  background:rgba(200,146,42,0.13);
  border-color:var(--voc-gold);
  color:var(--ink);
  font-size:0.72rem;
}
.modal-tag-petitioner {
  border-color: var(--voc-red);
  background: rgba(139,26,26,0.1);
}
.petitioner-inline-badge {
  display:inline-block;
  margin-left:4px;
  padding:0 4px;
  background:var(--voc-red);
  color:#fff;
  font-size:0.6rem;
  font-family:'Courier Prime', monospace;
  border-radius:3px;
  vertical-align:middle;
  line-height:1.4;
}
[data-theme="dark"] .modal-tag-petitioner {
  background: rgba(139,26,26,0.2);
  border-color: var(--voc-red);
  color: #e08080;
}
.modal-tag-ship {
  background:rgba(44,74,110,0.12);
  border-color:var(--cape-blue);
  color:var(--cape-blue);
}
.modal-tag-location {
  background:rgba(139,26,26,0.1);
  border-color:var(--voc-red);
  color:var(--voc-red);
}
.modal-tag-link {
  cursor:pointer;
  transition:opacity 0.15s, box-shadow 0.15s;
}
.modal-tag-link:hover {
  opacity:0.75;
  box-shadow:0 1px 4px var(--shadow-ink);
  text-decoration:underline;
}
.modal-tags-scrollable {
  max-height:160px; overflow-y:auto; padding-right:4px;
  scrollbar-width:thin; scrollbar-color:var(--voc-gold) var(--parchment-dark);
}
.modal-tags-scrollable::-webkit-scrollbar { width:4px; }
.modal-tags-scrollable::-webkit-scrollbar-track { background:var(--parchment-dark); border-radius:2px; }
.modal-tags-scrollable::-webkit-scrollbar-thumb { background:var(--voc-gold); border-radius:2px; }
.modal-field-count {
  display:inline-block;
  font-family:'Courier Prime',monospace; font-size:0.6rem;
  background:var(--voc-gold); color:var(--ink);
  padding:1px 5px; border-radius:8px; margin-left:5px; font-weight:700;
  vertical-align:middle;
}

.modal-citation {
  font-family:'Courier Prime',monospace; font-size:0.72rem;
  color:var(--ink-faded); padding:10px 0; border-top:1px solid var(--parchment-dark);
  margin-top:8px;
}

/* ─── Modal: field label row (label + lang toggle + fullscreen btn) ── */
.modal-field-label-row {
  display:flex; align-items:center; justify-content:space-between; gap:6px; flex-wrap:nowrap;
  margin-bottom:3px;
}
.modal-field-label-row > span {
  font-family:'Courier Prime',monospace; font-size:0.65rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--voc-gold);
  flex-shrink:0;
}
.modal-lang-toggle { display:flex; gap:3px; }
.modal-lang-btn {
  font-family:'Courier Prime',monospace; font-size:0.58rem;
  letter-spacing:0.05em; text-transform:uppercase;
  background:var(--parchment); border:1px solid var(--parchment-dark);
  color:var(--ink-faded); padding:2px 7px; border-radius:var(--radius);
  cursor:pointer; transition:all var(--transition); flex-shrink:0;
}
.modal-lang-btn.active { background:var(--cape-blue); border-color:var(--cape-blue); color:#fff; }
.modal-lang-btn:hover:not(.active) { border-color:var(--cape-blue); color:var(--cape-blue); }
[data-theme="dark"] .modal-lang-btn { background:var(--aged-white); border-color:var(--ink-faded); }
[data-theme="dark"] .modal-lang-btn.active { background:var(--cape-blue); border-color:var(--cape-blue); }

.modal-fullscreen-btn {
  flex-shrink:0;
  font-family:'Cinzel',serif; font-size:0.9rem; letter-spacing:0.1em;
  background:transparent; border:2px solid var(--voc-gold); color:var(--voc-gold);
  padding:10px 32px; border-radius:var(--radius);
  cursor:pointer; transition:all var(--transition);
  white-space:nowrap;
}
.modal-fullscreen-btn:hover { background:var(--voc-gold); color:var(--ink); }

/* ─── Modal: resolution text display ────────────────────────────────── */
.modal-resolution-text {
  font-family:'Lora','IM Fell English',serif; font-size:0.94rem;
  line-height:1.85; text-align:justify; hyphens:auto;
  color:var(--ink);
  max-height:440px; overflow-y:auto; padding-right:4px;
  scrollbar-width:thin; scrollbar-color:var(--voc-gold) var(--parchment-dark);
}
.modal-resolution-text table, .mfs-text table {
  width:100%; border-collapse:collapse; margin:0.6em 0;
  font-size:0.9rem; font-family:'Courier Prime',monospace;
}
.modal-resolution-text th, .mfs-text th {
  background:var(--cape-blue); color:var(--aged-white);
  padding:5px 10px; text-align:left; font-weight:600; letter-spacing:0.04em;
}
.modal-resolution-text td, .mfs-text td {
  padding:4px 10px; border-bottom:1px solid var(--parchment-dark); vertical-align:top;
}
.modal-resolution-text tr:nth-child(even) td, .mfs-text tr:nth-child(even) td {
  background:rgba(0,0,0,0.03);
}
.resolution-footnote-break {
  border-top:1px dashed var(--ink-faded); margin:1.1em 0 0.9em; opacity:0.55;
}
.modal-resolution-text::-webkit-scrollbar { width:4px; }
.modal-resolution-text::-webkit-scrollbar-track { background:var(--parchment-dark); border-radius:2px; }
.modal-resolution-text::-webkit-scrollbar-thumb { background:var(--voc-gold); border-radius:2px; }

.modal-resolution-cta {
  display:flex; justify-content:center; align-items:center;
  padding:18px 0 10px;
}

.modal-empty-value {
  color:var(--ink-faded); font-style:italic; font-size:0.85rem;
}

/* ─── Modal: signatory tags ──────────────────────────────────────────── */
.modal-tag-signatory {
  border-color:var(--voc-red);
  background:rgba(139,26,26,0.1);
  color:var(--voc-red);
  font-size:0.72rem;
}
[data-theme="dark"] .modal-tag-signatory {
  background:rgba(139,26,26,0.22);
  color:#e08080;
}

/* ─── Full-screen reading overlay ────────────────────────────────────── */
.modal-fullscreen {
  display:none; position:fixed; inset:0; z-index:600;
  background:var(--aged-white); flex-direction:column;
}
.modal-fullscreen.open { display:flex; }
[data-theme="dark"] .modal-fullscreen { background:var(--aged-white); }

.mfs-header {
  background:var(--cape-blue); padding:14px 20px;
  display:flex; align-items:center; gap:12px;
  border-bottom:2px solid var(--voc-gold); flex-shrink:0;
}
.mfs-header h3 { flex:1; color:var(--voc-gold); font-size:1.1rem; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#mfs-record-id { margin-left:16px; }
.mfs-record-date { font-family:'Courier Prime',monospace; font-size:0.85rem;
  color:var(--parchment-dark); font-weight:400; margin-left:10px; opacity:0.85; }
.mfs-lang-toggle { display:flex; gap:6px; }
.mfs-lang-btn {
  font-family:'Cinzel',serif; font-size:0.62rem; letter-spacing:0.08em;
  text-transform:uppercase;
  background:rgba(255,255,255,0.12); border:1px solid rgba(200,146,42,0.45);
  color:var(--voc-gold); padding:4px 14px; border-radius:var(--radius);
  cursor:pointer; transition:all var(--transition);
}
.mfs-lang-btn.active { background:var(--voc-gold); color:var(--ink); border-color:var(--voc-gold); }
.mfs-lang-btn:hover:not(.active) { background:rgba(200,146,42,0.2); }
.mfs-close {
  background:rgba(250,246,238,0.15); border:1px solid rgba(200,146,42,0.4);
  color:var(--voc-gold); width:30px; height:30px;
  border-radius:var(--radius); cursor:pointer; font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--transition); flex-shrink:0;
}
.mfs-close:hover { background:rgba(250,246,238,0.3); }

.mfs-body {
  flex:1; display:grid; grid-template-columns:1fr 1fr;
  overflow:hidden;
}
.mfs-panel {
  padding:24px 28px; overflow-y:auto;
  border-right:2px solid var(--parchment-dark);
  background:var(--aged-white);
}
.mfs-panel:last-child { border-right:none; }
.mfs-panel-title {
  font-family:'Cinzel',serif; font-size:0.75rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--voc-gold);
  margin-bottom:16px; padding-bottom:8px;
  border-bottom:1px solid var(--parchment-dark);
}
.mfs-text {
  font-family:'Lora','IM Fell English',serif; font-size:0.95rem;
  line-height:1.9; text-align:justify; hyphens:auto;
  color:var(--ink);
}
[data-theme="dark"] .mfs-panel { background:var(--aged-white); }

@media(max-width:960px) {
  .modal-panel { width:100vw; }
  .mfs-body { grid-template-columns:1fr; }
  .mfs-panel { border-right:none; border-bottom:2px solid var(--parchment-dark); }
}

/* ─── Empty / loading states ─────────────────────────────────── */
.state-empty {
  text-align:center; padding:40px 20px; color:var(--ink-faded);
}
.state-empty svg { margin-bottom:12px; opacity:0.4; }
.state-empty p { font-style:italic; font-size:0.9rem; }

/* ─── Footer ─────────────────────────────────────────────────── */
#site-footer {
  background:var(--cape-blue);
  border-top:2px solid var(--voc-gold);
  height:var(--footer-h);
  display:flex; align-items:center; justify-content:center;
  padding:0 24px; gap:24px; flex-shrink:0;
  position:sticky; bottom:0; z-index:200;
}
.footer-text {
  font-family:'Courier Prime',monospace;
  font-size:0.7rem; color:rgba(250,246,238,0.7);
  text-align:center;
}
.footer-text a { color:var(--voc-gold); }

/* ─── Hamburger / mobile nav ─────────────────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: none;
  border: 1px solid var(--voc-gold);
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--ink-faded);
  border-radius: 2px;
  transition: all 0.2s ease;
}
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-current-label {
  display: none;
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--voc-gold);
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-tabs-wrap {
  display: contents;
}

/* ─── Responsive ─────────────────────────────────────────────── */
@media(max-width:768px){
  #site-header { height:auto; padding:14px 16px; flex-wrap:wrap; justify-content:center; }
  :root { --header-h:auto; }
  .header-controls { position:static; transform:none; }
  #site-nav { top:0; position:sticky; flex-wrap:nowrap; height:auto; min-height:var(--nav-h); align-items:center; padding:0 12px; gap:8px; overflow-x:visible; }
  .nav-hamburger { display:flex; }
  .nav-current-label { display:block; }
  .nav-tabs-wrap {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 300;
    background: var(--parchment-dark);
    border-top: 1px solid var(--voc-gold);
    border-bottom: 2px solid var(--voc-gold);
    flex-direction: column;
    padding: 8px 0;
    box-shadow: 0 8px 24px var(--shadow-ink);
  }
  .nav-tabs-wrap.nav-mobile-open { display: flex; }
  .nav-tab {
    width: 100%;
    text-align: left;
    padding: 11px 20px;
    border-radius: 0;
    border: none;
    border-left: 3px solid transparent;
    font-size: 0.78rem;
  }
  .nav-tab.active {
    background: rgba(44,74,110,0.12);
    color: var(--cape-blue);
    border-left-color: var(--cape-blue);
  }
  .intro-scroll { padding:22px 18px; }
  .modal-row-3,.modal-row-4 { grid-template-columns:1fr 1fr; }
  .site-title { font-size:1.4rem; }
  .site-tagline { display:none; }
  /* OTD date bar — stack on narrow screens */
  .otd-date-bar { flex-wrap:wrap; gap:8px; padding:10px 14px; }
  .otd-today-badge { font-size:1.25rem; }
  .otd-vr-label { width:100%; font-size:0.85rem; }
  /* Timeline filter bar — stack vertically */
  .tl-filter-bar { flex-direction:column; align-items:stretch; gap:8px; }
  .tl-filter-bar .filter-group { flex-direction:row; align-items:center; gap:8px; }
  .tl-filter-bar .filter-group label { min-width:80px; }
  .tl-range-sep { display:none; }
  .tl-filter-bar > div:last-child { flex-direction:row; }
  /* Source filter bar — tighten up on mobile */
  .source-filter-bar { padding:6px 12px; gap:6px; }
  .source-filter-pill { font-size:0.65rem; padding:3px 9px; }
  #main-content { padding:20px 14px; }
}
@media(max-width:500px){
  .modal-row-3,.modal-row-4 { grid-template-columns:1fr; }
  .filter-bar { flex-direction:column; }
  .volume-cards { grid-template-columns:1fr 1fr; }
  .source-filter-pill { font-size:0.62rem; padding:3px 8px; }
}

/* ─── Timeline & OTD: collapse to left-edge single column on mobile ── */
@media(max-width:640px){
  /* Remove vertical line */
  .tl-container::before { display: none; }
  /* Year marker: plain left-aligned text, no box */
  .tl-year-marker {
    justify-content: flex-start;
    padding-left: 16px;
    margin: 28px 0 10px;
  }
  .tl-year-marker span {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    font-size: 0.88rem;
    letter-spacing: 4px;
    color: var(--voc-gold);
  }
  /* All entries: left-aligned, indented to clear the line */
  .tl-entry,
  .tl-entry.tl-left,
  .tl-entry.tl-right {
    justify-content: flex-end;
    padding-left: 16px;
  }
  /* Cards fill full available width */
  .tl-card,
  .tl-entry.tl-left  .tl-card,
  .tl-entry.tl-right .tl-card {
    width: 100%;
    border-right: none;
    border-left: 3px solid var(--voc-red);
  }
  .tl-entry:hover .tl-card,
  .tl-entry.tl-left:hover  .tl-card,
  .tl-entry.tl-right:hover .tl-card {
    border-left-color: var(--cape-blue);
  }
  /* Hide dot and connector */
  .tl-dot { display: none; }
  .tl-entry::after,
  .tl-entry.tl-left::after,
  .tl-entry.tl-right::after { display: none; }
  /* Animation override no longer needed — entries use translateY */
  /* Dark mode: keep year text visible without box */
  [data-theme="dark"] .tl-year-marker span {
    background: none;
    border: none;
    box-shadow: none;
  }
}

/* ─── Scrollbars ─────────────────────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--parchment-dark); }
::-webkit-scrollbar-thumb { background:var(--voc-gold); border-radius:3px; }

/* ─── Loading banner ─────────────────────────────────────────── */
#data-error {
  display:none;
  background:var(--voc-red); color:var(--aged-white);
  text-align:center; padding:10px; font-size:0.85rem;
  font-family:'Cinzel',serif;
}

/* ─── Global Search filter pills ────────────────────────────── */
.srch-filter-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 10px 14px;
  background: var(--parchment-dark);
  border: 1px solid var(--voc-gold);
  border-radius: var(--radius);
}
.srch-filter-label {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  color: var(--ink-faded);
  margin-right: 2px;
  flex-shrink: 0;
}
.srch-filter-pill {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 4px 13px;
  border: 1px solid var(--parchment-dark);
  border-radius: 20px;
  background: var(--aged-white);
  color: var(--ink-faded);
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
}
.srch-filter-pill:hover {
  border-color: var(--cape-blue-light);
  color: var(--cape-blue);
}
.srch-filter-pill.active {
  background: var(--cape-blue);
  border-color: var(--cape-blue);
  color: var(--aged-white);
}
.srch-clear-btn {
  margin-left: auto;
}
[data-theme="dark"] .srch-filter-pills { background: var(--parchment-dark); }
[data-theme="dark"] .srch-filter-pill  { background: var(--parchment); color: var(--ink-faded); border-color: var(--ink-faded); }
[data-theme="dark"] .srch-filter-pill:hover { border-color: var(--cape-blue-light); color: var(--cape-blue-light); }
[data-theme="dark"] .srch-filter-pill.active { background: var(--cape-blue); border-color: var(--cape-blue-light); color: var(--ink); }

/* ─── Dark mode contrast fixes ───────────────────────────────── */
/* Links: dark navy → lighter blue */
[data-theme="dark"] a { color: var(--cape-blue-light); }

/* Buttons with text on dark-blue/accent backgrounds */
[data-theme="dark"] .btn-primary    { color: var(--ink); }
[data-theme="dark"] .search-btn     { color: var(--ink); }

/* Nav tabs: active state has dark text on dark-blue bg → fix to light */
[data-theme="dark"] .nav-tab.active { color: var(--ink); }
[data-theme="dark"] .nav-tab:hover  { color: var(--cape-blue-light); border-color: var(--cape-blue-light); background: rgba(74,127,165,0.1); }

/* Section headings use dark navy — swap to lighter blue */
[data-theme="dark"] .section-heading { color: var(--cape-blue-light); }
[data-theme="dark"] .intro-scroll h2 { color: var(--cape-blue-light); }

/* Alpha buttons: aged-white bg (#221408) is near-black — use parchment-dark */
[data-theme="dark"] .alpha-btn {
  background: var(--parchment-dark);
  border-color: var(--ink-faded);
  color: var(--ink);
}
[data-theme="dark"] .alpha-btn:hover  { border-color: var(--cape-blue-light); color: var(--cape-blue-light); }
[data-theme="dark"] .alpha-btn.active { background: var(--cape-blue); color: var(--ink); border-color: var(--cape-blue-light); }

/* Volume cards: no prior dark override */
[data-theme="dark"] .volume-card       { background: var(--parchment-dark); }
[data-theme="dark"] .volume-card:hover { background: var(--aged-white); }

/* Index item selected: rgba opacity too low on dark bg */
[data-theme="dark"] .index-item.selected { background: rgba(200,146,42,0.18); border-color: var(--voc-gold); }

/* Sort / pagination / secondary buttons */
[data-theme="dark"] .sort-btn          { color: var(--ink-faded); border-color: var(--ink-faded); }
[data-theme="dark"] .sort-btn.active   { color: var(--ink); }
[data-theme="dark"] .page-btn          { color: var(--ink-faded); }
[data-theme="dark"] .btn-secondary     { border-color: var(--ink-faded); color: var(--ink-faded); }

/* Modal tags: dark accent colors unreadable on dark backgrounds */
[data-theme="dark"] .modal-tag {
  background: var(--parchment);
  color: var(--ink-faded);
  border-color: var(--ink-faded);
}
[data-theme="dark"] .modal-tag-person {
  background: rgba(200,146,42,0.18);
  border-color: var(--voc-gold);
  color: var(--voc-gold);
}
[data-theme="dark"] .modal-tag-ship {
  background: rgba(74,127,165,0.18);
  border-color: var(--cape-blue-light);
  color: var(--cape-blue-light);
}
[data-theme="dark"] .modal-tag-location {
  background: rgba(180,60,60,0.18);
  border-color: #d05050;
  color: #e07070;
}

/* Record tags on record cards */
[data-theme="dark"] .record-tag {
  background: var(--parchment);
  color: var(--ink-faded);
  border-color: var(--ink-faded);
}

/* Drop cap: slightly brighter red for dark backgrounds */
[data-theme="dark"] .drop-cap::first-letter { color: #d04040; }

/* ══════════════════════════════════════════════════════════════
   TIMELINE SECTION
══════════════════════════════════════════════════════════════ */

.tl-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  padding: 14px 18px;
  background: var(--parchment-dark);
  border: 1px solid var(--voc-gold);
  border-radius: 3px;
  margin-bottom: 20px;
}

.tl-filter-bar .filter-group { flex-direction: column; gap: 4px; }

.tl-range-sep {
  display: flex;
  align-items: flex-end;
  padding-bottom: 7px;
  color: var(--ink-faded);
  font-family: 'Courier Prime', monospace;
  font-size: 1.1rem;
  font-weight: 700;
  user-select: none;
}

/* ── Category multi-select dropdown ── */
.tl-cat-dropdown { position: relative; }

.tl-cat-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 150px;
  padding: 6px 10px;
  font-family: 'Courier Prime', monospace;
  font-size: 0.85rem;
  background: var(--aged-white);
  border: 1px solid var(--parchment-dark);
  color: var(--ink);
  cursor: pointer;
  border-radius: 2px;
  height: 34px;
  text-align: left;
  transition: border-color var(--transition);
  white-space: nowrap;
  overflow: hidden;
}
.tl-cat-trigger:hover,
.tl-cat-dropdown.open .tl-cat-trigger { border-color: var(--voc-gold); }

.tl-cat-caret {
  font-size: 0.72rem;
  color: var(--ink-faded);
  transition: transform var(--transition);
  flex-shrink: 0;
}
.tl-cat-dropdown.open .tl-cat-caret { transform: rotate(180deg); }

.tl-cat-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 250px;
  background: var(--aged-white);
  border: 1px solid var(--voc-gold);
  border-radius: 3px;
  box-shadow: 0 8px 24px var(--shadow-ink);
  z-index: 200;
}
.tl-cat-dropdown.open .tl-cat-panel { display: block; }

.tl-cat-search {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-family: 'Courier Prime', monospace;
  font-size: 0.82rem;
  border: none;
  border-bottom: 1px solid var(--parchment-dark);
  background: var(--aged-white);
  color: var(--ink);
  box-sizing: border-box;
  outline: none;
}
.tl-cat-search::placeholder { color: var(--ink-faded); }

.tl-cat-list { max-height: 220px; overflow-y: auto; }

.tl-cat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-family: 'Courier Prime', monospace;
  font-size: 0.8rem;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--transition);
  user-select: none;
}
.tl-cat-item:hover   { background: var(--parchment-dark); }
.tl-cat-item.selected { background: rgba(200,146,42,0.12); }
.tl-cat-item input[type="checkbox"] { accent-color: var(--voc-gold); cursor: pointer; flex-shrink: 0; }

.tl-cat-footer {
  padding: 7px 10px;
  border-top: 1px solid var(--parchment-dark);
}

.tl-day-input {
  width: 72px;
  padding: 6px 10px;
  font-family: 'Courier Prime', monospace;
  font-size: 0.88rem;
  border: 1px solid var(--parchment-dark);
  background: var(--aged-white);
  color: var(--ink);
  border-radius: 2px;
  height: 34px;
}
.tl-day-input:focus { outline: 2px solid var(--voc-gold); border-color: var(--voc-gold); }

.tl-results-header {
  font-family: 'Courier Prime', monospace;
  font-size: 0.82rem;
  color: var(--ink-faded);
  margin-bottom: 12px;
  letter-spacing: 0.5px;
  text-align: center;
}

/* ── Timeline container — centered line ── */
.tl-container {
  position: relative;
  padding-bottom: 40px;
}

.tl-container::before {
  content: '';
  position: absolute;
  left: calc(50% - 1px);
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--voc-gold) 4%,
    var(--cape-blue-light) 50%,
    var(--voc-gold) 96%,
    transparent 100%
  );
  z-index: 0;
}

/* ── Year marker — centered on line ── */
.tl-year-marker {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 32px 0 16px;
  z-index: 2;
}

.tl-year-marker span {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--voc-gold);
  background: var(--parchment);
  padding: 4px 18px;
  border: 1px solid var(--voc-gold);
  border-radius: 2px;
  letter-spacing: 3px;
  box-shadow: 0 2px 10px var(--shadow-ink);
  position: relative;
  z-index: 1;
}

/* ── Entry: full-width row, card alternates left/right ── */
.tl-entry {
  position: relative;
  display: flex;
  width: 100%;
  margin-bottom: 16px;
  cursor: pointer;
}

.tl-entry.tl-left  { justify-content: flex-start; }
.tl-entry.tl-right { justify-content: flex-end; }

/* Connector line from card edge to center dot */
.tl-entry::after {
  content: '';
  position: absolute;
  top: 24px;
  height: 2px;
  background: var(--voc-gold);
  z-index: 1;
  transition: background var(--transition);
}

.tl-entry.tl-left::after  { left: calc(50% - 30px); width: 23px; }
.tl-entry.tl-right::after { left: calc(50% + 7px);  width: 23px; }

.tl-entry:hover::after { background: var(--cape-blue-light); }

/* ── Dot — always on center line ── */
.tl-dot {
  position: absolute;
  left: calc(50% - 7px);
  top: 18px;
  width: 14px;
  height: 14px;
  background: var(--voc-red);
  border: 2px solid var(--aged-white);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--voc-gold);
  z-index: 2;
  transition: all var(--transition);
}

.tl-entry:hover .tl-dot {
  background: var(--cape-blue);
  box-shadow: 0 0 0 2px var(--cape-blue-light), 0 0 10px rgba(44,74,110,0.45);
  transform: scale(1.3);
}

/* ── Card — half width, border on the center-facing edge ── */
.tl-card {
  width: calc(50% - 30px);
  background: var(--aged-white);
  border: 1px solid var(--parchment-dark);
  border-radius: 3px;
  padding: 12px 16px 10px;
  transition: all var(--transition);
}

.tl-entry.tl-left  .tl-card { border-right: 3px solid var(--voc-red); }
.tl-entry.tl-right .tl-card { border-left:  3px solid var(--voc-red); }

.tl-entry:hover .tl-card { transform: translateY(-2px); box-shadow: 0 6px 20px var(--shadow-ink); }
.tl-entry.tl-left:hover  .tl-card { border-right-color: var(--cape-blue); }
.tl-entry.tl-right:hover .tl-card { border-left-color:  var(--cape-blue); }

.tl-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.tl-date {
  font-family: 'Courier Prime', monospace;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink-faded);
  letter-spacing: 0.5px;
}

.tl-vol-badge {
  font-family: 'Courier Prime', monospace;
  font-size: 0.8rem;
  background: var(--voc-red);
  color: #fff;
  padding: 2px 8px;
  border-radius: 2px;
  letter-spacing: 1px;
}
.tl-vol-badge--diary { background: var(--cape-blue); }

.tl-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.tl-page {
  font-family: 'Courier Prime', monospace;
  font-size: 0.82rem;
  color: var(--cape-blue);
}

.tl-summary {
  font-family: 'IM Fell English', serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 10px;
}

.tl-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.tl-cat-tag {
  font-family: 'Courier Prime', monospace;
  font-size: 0.78rem;
  background: var(--parchment-dark);
  color: var(--ink-faded);
  border: 1px solid var(--voc-gold);
  padding: 2px 9px;
  border-radius: 2px;
  letter-spacing: 0.5px;
  transition: all var(--transition);
}

.tl-cat-tag:hover { background: var(--voc-gold); color: var(--ink); }

/* ── Load More ── */
.tl-load-more {
  display: flex;
  justify-content: center;
  padding: 28px 0 48px;
}

/* ── Animations — entries fade up, no horizontal movement ── */
.tl-animate {
  opacity: 0;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.tl-year-marker.tl-animate { transform: scale(0.92); }
.tl-entry.tl-animate        { transform: translateY(10px); }

.tl-animate.visible { opacity: 1; transform: none; }

/* ── Dark mode ── */
[data-theme="dark"] .tl-year-marker span {
  background: var(--parchment-dark);
  border-color: var(--voc-gold);
}
[data-theme="dark"] .tl-card {
  background: var(--parchment);
  border-color: var(--parchment-dark);
}
[data-theme="dark"] .tl-dot { border-color: var(--parchment); }
[data-theme="dark"] .tl-cat-tag {
  background: var(--parchment-dark);
  border-color: var(--ink-faded);
  color: var(--ink-faded);
}
[data-theme="dark"] .tl-day-input {
  background: var(--parchment);
  color: var(--ink);
  border-color: var(--ink-faded);
}
[data-theme="dark"] .tl-cat-trigger {
  background: var(--parchment);
  border-color: var(--ink-faded);
}
[data-theme="dark"] .tl-cat-panel {
  background: var(--parchment);
  border-color: var(--voc-gold);
}
[data-theme="dark"] .tl-cat-search {
  background: var(--parchment);
  color: var(--ink);
  border-color: var(--ink-faded);
}
[data-theme="dark"] .tl-cat-item:hover  { background: var(--parchment-dark); }
[data-theme="dark"] .tl-cat-item.selected { background: rgba(200,146,42,0.15); }
[data-theme="dark"] .tl-cat-footer { border-color: var(--ink-faded); }

/* ═══════════════════════════════════════════════════════════════════════
   ON THIS DAY SECTION
   ═══════════════════════════════════════════════════════════════════════ */
.otd-date-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 12px 20px;
  background: var(--parchment-dark);
  border: 1px solid var(--voc-gold);
  border-radius: 6px;
}
.otd-today-label {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faded);
  flex-shrink: 0;
}
.otd-today-badge {
  font-family: 'Cinzel', serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--voc-red);
  letter-spacing: 0.04em;
}
.otd-vr-sep {
  color: var(--voc-gold);
  font-size: 1.1rem;
  margin: 0 4px;
  flex-shrink: 0;
}
.otd-vr-delta {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--cape-blue);
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.otd-vr-label {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-faded);
}
.otd-no-results {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  color: var(--ink-faded);
  text-align: center;
  padding: 40px 20px;
  font-size: 1rem;
}
[data-theme="dark"] .otd-date-bar { background: var(--parchment-dark); border-color: var(--voc-gold); }
[data-theme="dark"] .otd-today-badge { color: var(--voc-red); }

/* ═══════════════════════════════════════════════════════════════════════
   SOURCE FILTER BAR
   ═══════════════════════════════════════════════════════════════════════ */
.source-filter-bar {
  position: sticky;
  top: calc(var(--header-h) + var(--nav-h));
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 24px;
  background: var(--parchment-dark);
  border-bottom: 1px solid var(--voc-gold);
  overflow-x: auto;
  flex-wrap: nowrap;
}
.source-filter-label {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  color: var(--ink-faded);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  margin-right: 4px;
}
.source-filter-pill {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  padding: 4px 12px;
  border: 1.5px solid var(--voc-gold);
  border-radius: 20px;
  background: transparent;
  color: var(--ink-faded);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition);
}
.source-filter-pill:hover {
  border-color: var(--cape-blue);
  color: var(--cape-blue);
  background: rgba(44,74,110,0.07);
}
.source-filter-pill.active {
  background: var(--cape-blue);
  border-color: var(--cape-blue);
  color: var(--aged-white);
}
[data-theme="dark"] .source-filter-bar { background: var(--parchment-dark); }
[data-theme="dark"] .source-filter-pill.active { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════════
   RECORD CARD SOURCE VARIANTS
   ═══════════════════════════════════════════════════════════════════════ */
.record-card--diary {
  border-left: 3px solid var(--cape-blue-light);
  background: linear-gradient(135deg, rgba(44,74,110,0.06) 0%, var(--aged-white) 100%);
}
.record-card--diary:hover {
  border-left-color: var(--cape-blue);
  background: linear-gradient(135deg, rgba(44,74,110,0.12) 0%, var(--parchment-dark) 100%);
}
.record-card--tanap { border-left: 3px solid transparent; }

.record-source-badge {
  display: inline-block;
  font-family: 'Courier Prime', monospace;
  font-size: 0.65rem;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
}
.record-source-badge--diary {
  background: rgba(44,74,110,0.12);
  color: var(--cape-blue);
  border: 1px solid var(--cape-blue-light);
}
.record-source-badge--tanap {
  background: rgba(139,26,26,0.1);
  color: var(--voc-red);
  border: 1px solid var(--voc-red);
}
[data-theme="dark"] .record-source-badge--tanap {
  background: rgba(139,26,26,0.2);
  color: #c06060;
  border-color: #c06060;
}
[data-theme="dark"] .record-card--diary {
  background: linear-gradient(135deg, rgba(74,127,165,0.12) 0%, var(--aged-white) 100%);
  border-left-color: var(--cape-blue-light);
}
[data-theme="dark"] .record-card--diary:hover {
  background: linear-gradient(135deg, rgba(74,127,165,0.2) 0%, var(--parchment) 100%);
}
[data-theme="dark"] .record-source-badge--diary {
  background: rgba(74,127,165,0.2);
  color: var(--cape-blue-light);
  border-color: var(--cape-blue-light);
}
.record-card--annexures {
  border-left: 3px solid #7A9A5C;
  background: linear-gradient(135deg, rgba(92,122,74,0.06) 0%, var(--aged-white) 100%);
}
.record-card--annexures:hover {
  border-left-color: #5C7A4A;
  background: linear-gradient(135deg, rgba(92,122,74,0.12) 0%, var(--parchment-dark) 100%);
}
.record-source-badge--annexures {
  background: rgba(92,122,74,0.12);
  color: #5C7A4A;
  border: 1px solid #7A9A5C;
}
[data-theme="dark"] .record-card--annexures {
  background: linear-gradient(135deg, rgba(92,122,74,0.12) 0%, var(--aged-white) 100%);
  border-left-color: #8AAF70;
}
[data-theme="dark"] .record-card--annexures:hover {
  background: linear-gradient(135deg, rgba(92,122,74,0.2) 0%, var(--parchment) 100%);
}
[data-theme="dark"] .record-source-badge--annexures {
  background: rgba(92,122,74,0.2);
  color: #8AAF70;
  border-color: #8AAF70;
}

/* ═══════════════════════════════════════════════════════════════════════
   VOLUME CARD SOURCE VARIANTS
   ═══════════════════════════════════════════════════════════════════════ */
.volume-card--diary {
  border-color: var(--cape-blue-light);
}
.volume-card--diary h3 { color: var(--cape-blue); }
.volume-card--diary:hover { background: rgba(44,74,110,0.08); }
.volume-card--diary.selected { background: var(--cape-blue); border-color: var(--cape-blue); }
.volume-card--diary.selected h3 { color: var(--voc-gold); }
[data-theme="dark"] .volume-card--diary { border-color: var(--cape-blue); }
[data-theme="dark"] .volume-card--diary h3 { color: var(--cape-blue-light); }

.volume-card--annexures {
  border-color: #5C7A4A;
}
.volume-card--annexures h3 { color: #4A6B38; }
.volume-card--annexures:hover { background: rgba(92,122,74,0.08); }
.volume-card--annexures.selected { background: #5C7A4A; border-color: #5C7A4A; }
.volume-card--annexures.selected h3 { color: var(--voc-gold); }
[data-theme="dark"] .volume-card--annexures { border-color: #8AAF70; }
[data-theme="dark"] .volume-card--annexures h3 { color: #8AAF70; }

/* ═══════════════════════════════════════════════════════════════════════
   TIMELINE CARD SOURCE VARIANTS
   ═══════════════════════════════════════════════════════════════════════ */
/* Diary cards get blue border instead of voc-red */
.tl-entry.tl-left  .tl-card--diary { border-right-color: var(--cape-blue-light); }
.tl-entry.tl-right .tl-card--diary { border-left-color:  var(--cape-blue-light); }
.tl-entry:hover .tl-card--diary    { border-right-color: var(--cape-blue); border-left-color: var(--cape-blue); }

.tl-card--diary {
  background: linear-gradient(135deg, rgba(44,74,110,0.05) 0%, var(--aged-white) 100%);
}
[data-theme="dark"] .tl-card--diary {
  background: linear-gradient(135deg, rgba(74,127,165,0.1) 0%, var(--parchment) 100%);
  border-color: var(--cape-blue);
}

/* Diary dot = blue */
.tl-dot--diary {
  background: var(--cape-blue-light);
  border-color: var(--parchment);
}
.tl-entry:hover .tl-dot--diary {
  background: var(--cape-blue);
  box-shadow: 0 0 0 2px var(--cape-blue-light), 0 0 10px rgba(44,74,110,0.45);
}

/* ═══════════════════════════════════════════════════════════════════════
   MODAL SOURCE BADGE
   ═══════════════════════════════════════════════════════════════════════ */
.modal-source-badge {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.modal-source-badge--tanap {
  background: var(--voc-red);
  color: #fff;
  border: 1px solid var(--voc-red);
}
.modal-source-badge--diary {
  background: var(--voc-gold);
  color: var(--ink);
  border: 1px solid var(--voc-gold);
}
.modal-source-badge--annexures {
  background: #5C7A4A;
  color: #fff;
  border: 1px solid #5C7A4A;
}
[data-theme="dark"] .modal-source-badge--annexures {
  background: #8AAF70;
  color: var(--ink);
  border: 1px solid #8AAF70;
}
.modal-field-sublabel {
  font-family: 'IM Fell English', serif;
  font-size: 0.8rem;
  font-weight: normal;
  font-style: italic;
  color: var(--ink-faded);
  margin-top: 2px;
}

/* ─── ASK ME section ─────────────────────────────────────────── */

/* Query bar */
.askme-query-bar {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.askme-query-input {
  flex: 1;
  padding: 12px 14px;
  background: var(--aged-white);
  border: 1px solid var(--parchment-dark);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: 'IM Fell English', serif;
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 54px;
  transition: border-color var(--transition);
}
.askme-query-input:focus { outline: 2px solid var(--voc-gold); border-color: var(--voc-gold); }
.askme-query-input::placeholder { color: var(--ink-faded); opacity: 0.65; font-style: italic; }
.askme-submit-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--voc-red);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  white-space: nowrap;
  align-self: flex-start;
  margin-top: 1px;
}
.askme-submit-btn:hover { background: #6e1414; transform: translateY(-1px); }
.askme-hint {
  font-family: 'Courier Prime', monospace;
  font-size: 0.75rem;
  color: var(--ink-faded);
  opacity: 0.7;
  margin-bottom: 24px;
}

/* Results count */
.askme-results-count {
  font-family: 'Courier Prime', monospace;
  font-size: 0.82rem;
  color: var(--ink-faded);
  letter-spacing: 0.4px;
  margin-bottom: 16px;
  text-align: center;
}

/* View tabs */
.askme-view-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--parchment-dark);
  padding-bottom: 0;
}
.askme-view-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px 12px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  color: var(--ink-faded);
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.askme-view-tab:hover { color: var(--ink); border-bottom-color: var(--parchment-dark); }
.askme-view-tab.active { color: var(--voc-red); border-bottom-color: var(--voc-red); }
.askme-view-tab.active svg { stroke: var(--voc-red); }

/* Timeline list */
.askme-tl-list { position: relative; padding-left: 28px; }
.askme-tl-list::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent 0%, var(--voc-gold) 5%, var(--cape-blue-light) 50%, var(--voc-gold) 95%, transparent 100%);
}

.askme-tl-year-group { margin-bottom: 8px; }

.askme-tl-year-marker {
  position: relative;
  margin: 28px 0 14px -28px;
  display: flex;
  align-items: center;
}
.askme-tl-year-marker span {
  font-family: 'Cinzel', serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--voc-gold);
  background: var(--parchment);
  padding: 3px 14px;
  border: 1px solid var(--voc-gold);
  border-radius: 2px;
  letter-spacing: 3px;
  box-shadow: 0 2px 8px var(--shadow-ink);
  position: relative;
  z-index: 1;
}

.askme-tl-card {
  position: relative;
  background: var(--aged-white);
  border: 1px solid var(--parchment-dark);
  border-left: 3px solid var(--voc-red);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), border-left-color var(--transition);
}
.askme-tl-card::before {
  content: '';
  position: absolute;
  left: -22px;
  top: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--voc-red);
  border: 2px solid var(--parchment);
  box-shadow: 0 0 0 1px var(--voc-red);
  transition: background var(--transition);
}
.askme-tl-card:hover { transform: translateX(4px); box-shadow: 0 4px 14px var(--shadow-ink); border-left-color: var(--cape-blue); }
.askme-tl-card:hover::before { background: var(--cape-blue); box-shadow: 0 0 0 1px var(--cape-blue); }

.askme-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.askme-card-date {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--voc-gold);
  letter-spacing: 0.5px;
}
.askme-card-id {
  font-family: 'Courier Prime', monospace;
  font-size: 0.75rem;
  color: var(--ink-faded);
  margin-left: auto;
}
.askme-card-summary {
  font-family: 'IM Fell English', serif;
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.55;
  margin-bottom: 6px;
}
.askme-card-meta {
  font-family: 'Courier Prime', monospace;
  font-size: 0.75rem;
  color: var(--ink-faded);
  line-height: 1.4;
}
.askme-meta-lbl {
  color: var(--cape-blue);
  font-weight: 700;
  margin-right: 4px;
}
.askme-empty {
  text-align: center;
  color: var(--ink-faded);
  font-family: 'IM Fell English', serif;
  font-style: italic;
  padding: 40px 20px;
}

/* Historical overview panel */
.askme-ov-spinner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 30px 20px;
  color: var(--ink-faded);
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-size: 0.95rem;
}
.askme-spinner-ring {
  width: 24px;
  height: 24px;
  border: 3px solid var(--parchment-dark);
  border-top-color: var(--voc-gold);
  border-radius: 50%;
  animation: askme-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes askme-spin { to { transform: rotate(360deg); } }

.askme-ov-text {
  font-family: 'IM Fell English', serif;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink);
  max-width: 820px;
  padding: 24px 28px;
  background: var(--aged-white);
  border: 1px solid var(--parchment-dark);
  border-radius: var(--radius);
  box-shadow: inset 0 1px 4px var(--shadow-ink);
  min-height: 80px;
}
.askme-ov-text p { margin-bottom: 1.1em; }
.askme-ov-text p:last-child { margin-bottom: 0; }

.askme-cursor {
  display: inline-block;
  color: var(--voc-gold);
  animation: askme-blink 1s step-end infinite;
  margin-left: 2px;
  font-style: normal;
}
@keyframes askme-blink { 0%,100%{opacity:1} 50%{opacity:0} }

.askme-ov-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

/* Chrome AI note */
.askme-ai-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  padding: 6px 12px;
  background: rgba(44,74,110,0.08);
  border: 1px solid rgba(44,74,110,0.25);
  border-radius: var(--radius);
  font-family: 'Courier Prime', monospace;
  font-size: 0.78rem;
  color: var(--cape-blue);
  width: fit-content;
}

/* ── Archive Synthesis document ─────────────────────────────── */
.askme-synthesis { }

.askme-syn-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.askme-syn-badge-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.askme-syn-src-badge {
  font-size: 0.75rem !important;
  padding: 3px 10px !important;
}
.askme-syn-span {
  font-family: 'Cinzel', serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--voc-gold);
  letter-spacing: 2px;
  margin-left: auto;
}

.askme-syn-intro {
  font-family: 'IM Fell English', serif;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--parchment-dark);
}

.askme-syn-section {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--parchment-dark);
}
.askme-syn-section:last-of-type { border-bottom: none; }

.askme-syn-section-title {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin-bottom: 12px;
}

/* Clickable record rows in synthesis */
.askme-syn-record {
  padding: 10px 14px;
  margin-bottom: 8px;
  background: var(--aged-white);
  border: 1px solid var(--parchment-dark);
  border-left: 3px solid var(--voc-gold);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-left-color var(--transition), transform var(--transition);
}
.askme-syn-record:hover { border-left-color: var(--cape-blue); transform: translateX(3px); }
.askme-syn-rec-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.askme-syn-rec-date {
  font-family: 'Cinzel', serif;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--voc-gold);
}
.askme-syn-rec-id {
  font-family: 'Courier Prime', monospace;
  font-size: 0.72rem;
  color: var(--ink-faded);
  margin-left: auto;
}
.askme-syn-rec-text {
  font-family: 'IM Fell English', serif;
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 0;
}
.askme-syn-more {
  font-family: 'Courier Prime', monospace;
  font-size: 0.75rem;
  color: var(--ink-faded);
  font-style: italic;
  margin-top: 8px;
  margin-bottom: 0;
}

/* Tag clouds for persons/locations/ships/categories */
.askme-syn-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.askme-syn-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: var(--parchment-dark);
  border: 1px solid rgba(74,55,40,0.2);
  border-radius: 2px;
  font-family: 'Courier Prime', monospace;
  font-size: 0.77rem;
  color: var(--ink);
  cursor: default;
}
.askme-syn-tag-sig {
  border-color: rgba(139,26,26,0.4);
  background: rgba(139,26,26,0.06);
  color: var(--voc-red);
}
.askme-syn-tag-loc  { border-color: rgba(44,74,110,0.3); background: rgba(44,74,110,0.05); color: var(--cape-blue); }
.askme-syn-tag-ship { border-color: rgba(74,127,165,0.3); background: rgba(74,127,165,0.05); color: var(--cape-blue-light); }
.askme-syn-tag-cat  { border-color: rgba(200,146,42,0.3); background: rgba(200,146,42,0.06); color: var(--ink-faded); }
.askme-syn-tag-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.12);
  border-radius: 10px;
  padding: 0 5px;
  font-size: 0.7rem;
  min-width: 18px;
  line-height: 16px;
}

.askme-syn-note {
  font-family: 'Courier Prime', monospace;
  font-size: 0.72rem;
  color: var(--ink-faded);
  opacity: 0.7;
  text-align: center;
  margin-top: 16px;
  letter-spacing: 0.3px;
}
.askme-syn-empty {
  font-family: 'IM Fell English', serif;
  font-style: italic;
  color: var(--ink-faded);
  line-height: 1.7;
  padding: 20px 0;
}
.askme-syn-empty ul { margin: 8px 0 12px 20px; }
.askme-syn-empty li { margin-bottom: 4px; }

/* AI overview prose */
.askme-ov-para {
  font-family: 'IM Fell English', serif;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink);
  margin-bottom: 1.1em;
}
.askme-ov-para:last-child { margin-bottom: 0; }

/* ── Narrative storytelling view ─────────────────────────────── */
.askme-narrative-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.askme-narrative-body {
  border-left: 3px solid var(--parchment-dark);
  padding-left: 18px;
  margin-bottom: 24px;
}

.askme-narrative-para {
  font-family: 'IM Fell English', serif;
  font-size: 1.04rem;
  line-height: 1.85;
  color: var(--ink);
  margin-bottom: 1.2em;
  text-align: justify;
  hyphens: auto;
}
.askme-narrative-para:last-child { margin-bottom: 0; }

.askme-narrative-dropcap::first-letter {
  font-family: 'Cinzel', serif;
  font-size: 3.4em;
  font-weight: 700;
  float: left;
  line-height: 0.78;
  margin: 0.05em 0.12em 0 0;
  color: var(--voc-red);
}

.askme-narrative-sources {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--parchment-dark);
}

.askme-narrative-sources-title {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin: 0 0 12px 0;
}

.askme-narrative-ref {
  font-family: 'Cinzel', serif;
  font-size: 0.65em;
  color: var(--cape-blue);
  cursor: pointer;
  margin-left: 1px;
  vertical-align: super;
  line-height: 0;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.askme-narrative-ref:hover { color: var(--voc-red); border-bottom-color: var(--voc-red); }

.askme-source-refnum {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  color: var(--cape-blue);
  margin-right: 6px;
  font-weight: 600;
}

/* Dark mode */
[data-theme="dark"] .askme-query-input  { background: var(--aged-white); border-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .askme-tl-card      { background: var(--aged-white); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .askme-ov-text      { background: var(--aged-white); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .askme-tl-year-marker span { background: var(--parchment); }
[data-theme="dark"] .askme-narrative-body  { border-left-color: rgba(255,255,255,0.15); }
[data-theme="dark"] .askme-narrative-sources { border-top-color: rgba(255,255,255,0.1); }
[data-theme="dark"] .askme-syn-record   { background: var(--aged-white); border-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .askme-syn-tag      { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
[data-theme="dark"] .askme-ai-note      { background: rgba(74,127,165,0.12); border-color: rgba(74,127,165,0.3); }