/* Greek faces, all self-hosted and OFL-licensed: SIL Gentium
     (software.sil.org/gentium, the default), GFS Porson and GFS NeoHellenic
     (both greekfontsociety-gfs.gr). Only the selected one is downloaded —
     the other family names are never used, so the browser skips their
     @font-face sources. */
  @font-face {
    font-family: "Gentium"; font-weight: normal; font-style: normal;
    font-display: swap; src: url("fonts/Gentium-Regular.woff2") format("woff2");
  }
  @font-face {
    font-family: "GFS Porson"; font-weight: normal; font-style: normal;
    font-display: swap; src: url("fonts/GFSPorson.otf") format("opentype");
  }
  @font-face {
    font-family: "GFS NeoHellenic"; font-weight: normal; font-style: normal;
    font-display: swap; src: url("fonts/GFSNeohellenic.otf") format("opentype");
  }
  :root {
    --ink: #2b2620;
    --muted: #8a8175;
    --rule: #e4ddd0;
    --paper: #faf6ef;
    --accent: #8c5a2b;
    --greek-ink: #3a3128;
    --panel-bg: #fffdf8;
    --greek-font: "Gentium", "Palatino Linotype", Palatino, Georgia, serif;
    --ui-font: -apple-system, "Segoe UI", system-ui, sans-serif;
    --body-font: "Iowan Old Style", "Palatino Linotype", Palatino,
                 "Book Antiqua", Georgia, serif;
  }
  body.font-porson {
    --greek-font: "GFS Porson", "Palatino Linotype", Palatino, Georgia, serif;
  }
  body.font-neohellenic {
    --greek-font: "GFS NeoHellenic", "Palatino Linotype", Palatino, Georgia,
                  serif;
  }
  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body-font);
    line-height: 1.6;
  }
  .wrap { max-width: 980px; margin: 0 auto; padding: 3.5rem 1.5rem 5rem; }
  header { text-align: center; margin-bottom: 2rem; }
  .kicker {
    text-transform: uppercase; letter-spacing: 0.28em;
    font-size: 0.72rem; color: var(--accent); margin: 0 0 0.9rem;
  }
  h1 { font-size: 2.4rem; font-weight: 600; margin: 0 0 0.6rem; }
  .subtitle { color: var(--muted); font-style: italic; font-size: 1.05rem; margin: 0; }
  .hint {
    margin: 2rem 0 0.6rem; font-size: 0.8rem; color: var(--muted);
    text-align: center; font-style: italic;
  }

  /* Contents: a fixed drop-down on the left that stays put while scrolling. */
  .toc {
    position: fixed; top: 1rem; left: 1rem; z-index: 45;
    font-family: var(--ui-font);
  }
  .toc-toggle {
    font-family: var(--ui-font); font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.16em;
    background: var(--panel-bg); color: var(--muted);
    border: 1px solid var(--rule); border-radius: 999px;
    padding: 0.42rem 1rem; cursor: pointer;
    box-shadow: 0 2px 10px rgba(40, 30, 15, 0.08);
  }
  .toc-toggle:hover { color: var(--accent); }
  .toc-toggle .caret { display: inline-block; margin-left: 0.4rem; }
  .toc.open .toc-toggle .caret { transform: rotate(180deg); }
  .toc-menu {
    display: none; margin-top: 0.5rem;
    background: var(--panel-bg); border: 1px solid var(--rule);
    border-radius: 10px; padding: 0.5rem 0;
    box-shadow: 0 8px 26px rgba(40, 30, 15, 0.16);
    max-height: 82vh; overflow-y: auto;
  }
  .toc.open .toc-menu { display: block; }
  .toc a {
    display: block; white-space: nowrap;
    padding: 0.3rem 1.2rem; color: var(--ink); text-decoration: none;
    font-size: 0.9rem; line-height: 1.5;
  }
  .toc a:hover { color: var(--accent); background: #f5ecdb; }
  .toc-n {
    display: inline-block; min-width: 4rem;
    color: var(--muted); font-size: 0.76rem;
  }

  /* back to the landing page — mirrors the contents toggle, top-right */
  .home-link {
    position: fixed; top: 1rem; right: 1rem; z-index: 45;
    font-family: var(--ui-font); font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.16em;
    background: var(--panel-bg); color: var(--muted);
    border: 1px solid var(--rule); border-radius: 999px;
    padding: 0.42rem 1rem; text-decoration: none;
    box-shadow: 0 2px 10px rgba(40, 30, 15, 0.08);
  }
  .home-link:hover { color: var(--accent); }

  .controls {
    display: grid;
    grid-template-columns: 3rem 1fr 1fr;
    gap: 0 1.8rem;
    align-items: end;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 0.55rem;
    margin-bottom: 0.4rem;
  }
  .col-label {
    text-transform: uppercase; letter-spacing: 0.18em;
    font-size: 0.68rem; color: var(--muted);
  }
  /* prose: the English column names its translator instead of a mode toggle */
  .col-sub {
    text-transform: none; letter-spacing: 0.02em; font-style: italic;
    margin-left: 0.5rem;
  }
  .toggle {
    display: inline-flex; gap: 0; margin-left: 1rem; vertical-align: middle;
    border: 1px solid var(--rule); border-radius: 999px; overflow: hidden;
    font-family: var(--ui-font); font-size: 0.7rem; letter-spacing: 0.04em;
  }
  .toggle button {
    border: none; background: none; color: var(--muted);
    padding: 0.25rem 0.7rem; cursor: pointer; font: inherit;
  }
  .toggle button.on { background: var(--accent); color: var(--paper); }

  /* .lines is a plain wrapper; each lazily-loaded chunk is its own grid
     (implicit auto rows; fragments place rows relative to the chunk start) */
  .chunk {
    display: grid;
    grid-template-columns: 3rem 1fr 1fr;
    column-gap: 0;
  }
  .num {
    grid-column: 1; color: var(--muted); font-size: 0.78rem;
    text-align: right; user-select: none; padding: 0.55rem 0.9rem 0 0;
    border-bottom: 1px solid var(--rule);
  }
  .num a { color: inherit; text-decoration: none; }
  .num a:hover { color: var(--accent); }
  /* .tgt is the sole highlight marker (not :target): nodes inserted after
     the hash was set (lazy chunks) don't reliably match :target, and
     de-selecting needs a class page.js can simply remove */
  .gk.tgt { background: #f5ecdb; }
  /* in line-by-line mode, extend the highlight across the whole row
     (number + Greek + aligned English), not just the Greek cell */
  body.mode-al .num:has(+ .gk.tgt),
  body.mode-al .gk.tgt + .en { background: #f5ecdb; }
  /* prose has a single English column: highlight the whole section row */
  body.prose .num:has(+ .gk.tgt),
  body.prose .gk.tgt + .en { background: #f5ecdb; }
  .gk {
    grid-column: 2; font-family: var(--greek-font); font-size: 1.32rem;
    color: var(--greek-ink); line-height: 1.7; scroll-margin-top: 0.8rem;
    padding: 0.45rem 0.9rem 0.45rem 0; border-bottom: 1px solid var(--rule);
  }
  .en {
    grid-column: 3; font-size: 1.12rem; line-height: 1.55;
    padding: 0.45rem 0 0.45rem 0.9rem; border-bottom: 1px solid var(--rule);
  }
  .en-ew { font-size: 1.14rem; }
  .ew-range {
    color: var(--muted); font-size: 0.72rem; letter-spacing: 0.06em;
    font-family: var(--ui-font); margin-right: 0.3rem;
  }
  /* prose (multi-chapter): a full-width band before each chapter's first
     section, so the reader always knows which chapter they are in */
  .chapter-head {
    grid-column: 1 / -1; font-family: var(--ui-font);
    text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.74rem;
    color: var(--accent); border-bottom: 2px solid var(--accent);
    padding: 1.5rem 0 0.4rem; margin-top: 0.6rem; scroll-margin-top: 0.8rem;
  }
  .chunk > .chapter-head:first-child { margin-top: 0; padding-top: 0.4rem; }
  body.mode-al .en-ew { display: none; }
  body.mode-ew .en-al { display: none; }

  .w {
    position: relative; cursor: pointer;
    border-bottom: 1px dotted transparent; border-radius: 2px;
    transition: color 0.12s ease, border-color 0.12s ease,
                background-color 0.12s ease;
  }
  .w:hover { color: var(--accent); border-bottom-color: var(--accent); }
  .w.selected { background: #efe1c8; color: var(--accent); }

  /* Per-word gloss bubble. JS-driven (a single fixed element it can hide on
     its own) rather than a CSS :hover::after — Safari keeps :hover "stuck"
     after a click, a layout shift, or a scroll, leaving the bubble on screen. */
  #wTip {
    position: fixed; display: none; z-index: 30; pointer-events: none;
    background: var(--panel-bg); color: var(--ink);
    border: 1px solid var(--rule);
    padding: 5px 11px; border-radius: 8px;
    font-family: var(--body-font); font-size: 0.9rem; font-style: normal;
    line-height: 1.35; letter-spacing: normal; white-space: nowrap;
    box-shadow: 0 6px 18px rgba(40, 30, 15, 0.14);
  }
  #wTip::after {
    content: ""; position: absolute; left: var(--arrow, 50%);
    top: 100%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: var(--rule);
  }
  #wTip.below::after {
    top: auto; bottom: 100%;
    border-top-color: transparent; border-bottom-color: var(--rule);
  }

  footer {
    margin-top: 2.6rem; color: var(--muted); font-size: 0.86rem;
    line-height: 1.55;
  }
  footer a { color: var(--accent); }

  /* ── dictionary panel ── */
  .entry {
    position: fixed; top: 0; right: 0; width: 420px; max-width: 92vw;
    height: 100vh; background: var(--panel-bg);
    border-left: 1px solid var(--rule);
    box-shadow: -10px 0 30px rgba(40, 30, 15, 0.12);
    padding: 1.6rem 1.6rem 2rem; overflow-y: auto;
    transform: translateX(100%); transition: transform 0.22s ease; z-index: 50;
  }
  .entry.open { transform: translateX(0); }
  .entry-close {
    position: absolute; top: 0.9rem; right: 1rem;
    background: none; border: none; font-size: 1.5rem; line-height: 1;
    color: var(--muted); cursor: pointer; padding: 0.2rem 0.4rem;
  }
  .entry-close:hover { color: var(--accent); }
  .entry-word {
    display: block; font-family: var(--greek-font); font-size: 2rem;
    color: var(--greek-ink); line-height: 1.1; margin: 0.4rem 0 0.35rem;
  }
  .entry dl { margin: 0.6rem 0 1.2rem; }
  .entry dt {
    text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.64rem;
    color: var(--muted); font-family: var(--ui-font); margin-top: 1rem;
  }
  .entry dd { margin: 0.2rem 0 0; font-size: 1.08rem; line-height: 1.5; }
  .entry dd.greek {
    font-family: var(--greek-font); font-size: 1.32rem; color: var(--greek-ink);
  }
  .entry-links { font-family: var(--ui-font); font-size: 0.8rem; }
  .entry-links a { color: var(--accent); }

  .lsj-head {
    text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.64rem;
    color: var(--muted); font-family: var(--ui-font);
    border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: 1.2rem;
  }
  .lsj-entry { font-size: 1.16rem; line-height: 1.55; margin-top: 0.6rem; }
  .lsj-entry + .lsj-entry {
    border-top: 1px dashed var(--rule); padding-top: 0.8rem; margin-top: 0.9rem;
  }
  .lsj-greek { font-family: var(--greek-font); color: var(--greek-ink); }
  .lsj-orth { font-weight: 600; }
  .lsj-tr { font-style: italic; color: var(--accent); }
  .lsj-title { font-style: italic; }
  .lsj-bibl { color: var(--muted); font-size: 0.88em; white-space: nowrap; }
  .lsj-gram, .lsj-itype, .lsj-gen, .lsj-pos, .lsj-number { color: var(--muted); }
  .lsj-lead { margin-bottom: 0.35em; }
  .lsj-sense { margin: 0.5em 0 0; padding-left: 1.6em; text-indent: -1.6em; }
  .lsj-sense[data-level="1"] { margin-left: 0; margin-top: 0.8em; }
  .lsj-sense[data-level="2"] { margin-left: 0.9em; }
  .lsj-sense[data-level="3"] { margin-left: 1.8em; }
  .lsj-sense[data-level="4"] { margin-left: 2.7em; }
  .lsj-sense[data-level="5"] { margin-left: 3.6em; }
  .lsj-sense-n { font-weight: 700; color: var(--accent); }
  .lsj-none { color: var(--muted); font-style: italic; font-size: 1.14rem; }

  .lsj-ab {
    border-bottom: 1px dotted #b3a58e; cursor: help;
    text-decoration: none;
  }
  #abTip {
    position: fixed; display: none;
    background: #2b2620; color: #faf6ef;
    padding: 5px 10px; border-radius: 6px;
    font-family: var(--ui-font); font-size: 0.8rem; font-style: normal;
    line-height: 1.35; max-width: 300px;
    z-index: 60; pointer-events: none;
    box-shadow: 0 4px 14px rgba(40, 30, 15, 0.22);
  }

  .entry-backdrop {
    position: fixed; inset: 0; background: rgba(40, 30, 15, 0.18);
    opacity: 0; pointer-events: none; transition: opacity 0.22s ease;
    z-index: 40;
  }
  .entry-backdrop.open { opacity: 1; pointer-events: auto; }

  @media (max-width: 680px) {
    .wrap { padding: 2.5rem 1.1rem 4rem; }
    h1 { font-size: 1.9rem; }
    .controls { grid-template-columns: 1fr; gap: 0.4rem; }
    .controls .col-label:first-child { display: none; }
    .chunk { display: block; }
    .num { display: none; }
    .gk { position: relative; padding: 0.8rem 0 0.1rem; border-bottom: none; }
    .gk::before {
      content: attr(data-n); position: absolute; right: 0; top: 0.9rem;
      color: var(--muted); font-size: 0.7rem; font-family: var(--ui-font);
    }
    /* a sentence row after the first of its section repeats data-n; the
       number badge belongs on the section's first row only */
    .gk.cont::before { content: none; }
    .en { color: var(--muted); padding: 0 0 0.7rem; }
    .en-ew { padding: 0.6rem 0; }
    .entry {
      top: auto; bottom: 0; left: 0; width: 100%; max-width: 100%;
      height: auto; max-height: 80vh; border-left: none;
      border-top: 1px solid var(--rule); border-radius: 14px 14px 0 0;
      box-shadow: 0 -10px 30px rgba(40, 30, 15, 0.16);
      transform: translateY(100%);
    }
    .entry.open { transform: translateY(0); }
  }