/* ============ Design tokens ============ */
:root {
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif: "Gentium Plus", "GFS Neohellenic", Georgia, serif;

  --text-scale: 1;
  --fs-xs:  calc(0.75rem * var(--text-scale));
  --fs-sm:  calc(0.875rem * var(--text-scale));
  --fs-md:  calc(1rem * var(--text-scale));
  --fs-lg:  calc(1.125rem * var(--text-scale));
  --fs-xl:  calc(1.375rem * var(--text-scale));
  --fs-2xl: calc(1.75rem * var(--text-scale));

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --bg:             #fafaf7;
  --bg-subtle:      #f1efe8;
  --bg-panel:       #ffffff;
  --bg-cell-empty:  #f5f3ed;
  --bg-evidence:    #f7f4ea;

  --fg:             #1b1a17;
  --fg-muted:       #6b6863;
  --fg-faint:       #a19d97;

  --border:         #e4e0d6;
  --border-strong:  #d0cbbe;

  --accent:         #7a3f1b;
  --accent-soft:    #e7cfbc;
  --link:           #8a4518;

  --badge-archaeology:    #c9724f;
  --badge-extrabiblical:  #4f6fc9;
  --badge-manuscript:     #8b4fc9;
  --badge-geography:      #4fa37a;
  --badge-coinage:        #c9a84f;
  --badge-cross_ref_ot:   #a04fc9;
  --badge-linguistic:     #4f9ec9;

  --shadow-sm: 0 1px 2px rgba(20, 15, 5, 0.04), 0 1px 1px rgba(20, 15, 5, 0.03);
  --shadow-md: 0 4px 16px rgba(20, 15, 5, 0.06);

  --header-h: auto;
}

[data-theme="dark"] {
  --bg:             #16140f;
  --bg-subtle:      #1f1c15;
  --bg-panel:       #1b1813;
  --bg-cell-empty:  #1a1813;
  --bg-evidence:    #1e1b14;

  --fg:             #ece8dd;
  --fg-muted:       #9c978a;
  --fg-faint:       #635e54;

  --border:         #2e2a21;
  --border-strong:  #3d3829;

  --accent:         #d6a178;
  --accent-soft:    #3a2a1d;
  --link:           #e6b487;
}

/* ============ Reset / base ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: 1.55;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

button, select, input { font: inherit; color: inherit; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============ Header ============ */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(1.1);
}
.header-inner {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.brand h1 {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.brand .tagline {
  margin: 0.125rem 0 0 0;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem 0.75rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.field select {
  padding: 0.375rem 0.625rem;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--fg);
  cursor: pointer;
}
.field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.field-label-row { display: inline-flex; align-items: center; gap: 0.3rem; }
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--fg-faint);
  font-size: 0.85em;
  line-height: 1;
  cursor: help;
  border-radius: 50%;
}
.info-icon:hover { color: var(--accent); background: var(--bg-subtle); }
.info-icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.popover {
  position: absolute;
  z-index: 30;
  max-width: 22rem;
  margin-top: 0.4rem;
  padding: 0.65rem 0.85rem;
  background: var(--bg-panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--fg);
}
.popover[hidden] { display: none; }
.popover::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0.9rem;
  width: 10px; height: 10px;
  background: var(--bg-panel);
  border-left: 1px solid var(--border-strong);
  border-top: 1px solid var(--border-strong);
  transform: rotate(45deg);
}

.chip-group {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.125rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.chip-group { border: 1px solid var(--border); margin: 0; padding: 0.125rem; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.625rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  border-radius: calc(var(--radius-md) - 2px);
  cursor: pointer;
  color: var(--fg-muted);
  user-select: none;
  transition: background 0.12s, color 0.12s;
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:checked) { background: var(--accent); color: #fff; }
.chip:hover { background: var(--bg); }
.chip:has(input:checked):hover { background: var(--accent); color: #fff; opacity: 0.92; }

.search-wrap { position: relative; flex: 1 1 200px; min-width: 160px; }
#searchInput {
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}
#searchInput:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.search-count {
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-xs);
  color: var(--fg-faint);
}

.icon-group { display: inline-flex; gap: 0.25rem; margin-left: auto; }
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  cursor: pointer;
  color: var(--fg);
  transition: background 0.12s;
}
.icon-btn:hover { background: var(--bg-subtle); }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

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

/* ============ Main / grid ============ */
.app-main { flex: 1; padding: 1rem 0; }

.centered-msg {
  text-align: center;
  padding: 4rem 1rem;
  color: var(--fg-muted);
  font-size: var(--fs-md);
}
.centered-msg.error { color: #b03030; }

.grid-container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 1.25rem;
  overflow-x: auto;
}

.grid-header, .grid-row {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: var(--grid-cols, 9rem repeat(5, minmax(15rem, 1fr)));
  align-items: stretch;
  min-width: 100%;
}

.grid-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-strong);
  padding: 0.625rem 0;
  margin-bottom: 0.5rem;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.grid-body { display: flex; flex-direction: column; gap: 0.5rem; padding-bottom: 4rem; }

.grid-row {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
}
.grid-row:last-child { border-bottom: none; }

.grid-section-header {
  grid-column: 1 / -1;
  display: block;
  padding: 1rem 0.75rem 0.4rem 0.75rem;
  margin-top: 1rem;
  border-top: 2px solid var(--accent);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  background: linear-gradient(180deg, var(--accent-soft) 0%, transparent 100%);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.grid-section-header:first-child { margin-top: 0; }

.col-head { padding: 0 0.25rem; }
.col-ref { min-width: 9rem; }

.hide-mt .col-mt, .hide-mk .col-mk, .hide-lk .col-lk, .hide-jn .col-jn, .hide-ev .col-ev { display: none; }

/* ============ Row cells ============ */
.cell-ref {
  padding: 0.25rem 0.5rem 0.25rem 0;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  border-right: 1px dashed var(--border);
}
.cell-ref .pericope-title {
  color: var(--fg);
  font-weight: 600;
  font-size: var(--fs-sm);
  display: block;
  margin-bottom: 0.125rem;
  line-height: 1.3;
}
.cell-ref .pericope-section {
  font-size: var(--fs-xs);
  color: var(--fg-faint);
  font-style: italic;
}
.cell-ref .pericope-order {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--fs-xs);
  color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}

.gospel-cell {
  padding: 0.375rem 0.5rem;
  border-left: 1px solid var(--border);
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: 1.65;
}
.gospel-cell.empty {
  background: var(--bg-cell-empty);
  color: var(--fg-faint);
  font-size: var(--fs-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  border-radius: var(--radius-sm);
}

.cell-ref-sub {
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  font-family: var(--font-body);
  font-style: italic;
}

.verse-plain { display: block; margin-bottom: 0.35rem; }
.verse-num {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75em;
  color: var(--fg-faint);
  margin-right: 0.25em;
  font-variant-numeric: tabular-nums;
  vertical-align: 0.1em;
}

/* Classical interlinear word-pair layout */
.il-verse {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.35rem;
  margin: 0.25rem 0 0.6rem 0;
  align-items: flex-end;
}
.il-word {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  padding: 0.15rem 0.25rem;
  border-radius: var(--radius-sm);
  cursor: help;
  min-width: 1.2rem;
}
.il-word:hover { background: var(--bg-subtle); }
.il-top {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  line-height: 1.15;
  text-align: center;
  min-height: 1em;
}
.il-greek {
  font-family: var(--font-serif);
  font-size: var(--fs-md);
  line-height: 1.25;
  color: var(--fg);
}

/* Per-verse unit: reader line + interlinear row for the same verse. */
.verse-unit {
  margin-bottom: 0.6rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px dotted var(--border);
}
.verse-unit:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.verse-reader { line-height: 1.55; }
.verse-interlinear {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px dashed var(--border);
}
html[data-interlinear="off"] .verse-interlinear { display: none; }
html[data-interlinear="off"] .verse-unit {
  margin-bottom: 0.35rem;
  padding-bottom: 0.2rem;
}

.interlinear-toggle { cursor: pointer; }
.interlinear-toggle:has(input:checked) { background: var(--accent); color: #fff; }

/* ============ Evidence cells ============ */
.ev-cell {
  padding: 0.375rem 0.5rem;
  background: var(--bg-evidence);
  border-radius: var(--radius-sm);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ev-cell:empty::before,
.ev-cell.empty {
  content: attr(data-empty);
  color: var(--fg-faint);
  font-size: var(--fs-sm);
  font-style: italic;
}
.ev-item {
  padding: 0.4rem 0.5rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.ev-badge {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  margin-right: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: 1px;
}
.ev-badge.archaeology    { background: var(--badge-archaeology); }
.ev-badge.extrabiblical_text { background: var(--badge-extrabiblical); }
.ev-badge.manuscript     { background: var(--badge-manuscript); }
.ev-badge.geography      { background: var(--badge-geography); }
.ev-badge.coinage        { background: var(--badge-coinage); }
.ev-badge.cross_reference_ot { background: var(--badge-cross_ref_ot); }
.ev-badge.linguistic     { background: var(--badge-linguistic); }

.ev-confidence {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--fg-faint);
  margin-left: 0.25rem;
  font-style: italic;
}
.ev-source {
  display: block;
  margin-top: 0.3rem;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.ev-source a { color: var(--link); }

/* ============ Search highlight ============ */
mark.hit { background: #fff3b0; color: #1b1a17; padding: 0 0.1em; border-radius: 2px; }
[data-theme="dark"] mark.hit { background: #7d6a1e; color: #fff; }

/* ============ Footer ============ */
.app-footer {
  border-top: 1px solid var(--border);
  padding: 1rem 1.25rem;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--fg-faint);
}

/* ============ Greek text styling ============ */
[lang="el"], [lang="grc"] { font-family: var(--font-serif); }
[lang="grc"] { font-feature-settings: "kern" 1; }

/* ============ Responsive ============ */
@media (max-width: 900px) {
  .grid-header, .grid-row {
    grid-template-columns: var(--grid-cols-mobile, 7rem repeat(5, minmax(13rem, 1fr)));
  }
  .brand .tagline { display: none; }
}
@media (max-width: 640px) {
  .toolbar { gap: 0.4rem; }
  .icon-group { margin-left: 0; }
  .grid-container { padding: 0 0.5rem; }
  .brand h1 { font-size: var(--fs-lg); }
}

/* ============ Print ============ */
@media print {
  .app-header, .app-footer { display: none; }
  .grid-row { break-inside: avoid; }
  body { background: #fff; color: #000; }
}