/* ===========================================================================
   site.css - styling of the corpus site (scripts/build_site.py) and of the HTML
   produced by xslt/tei-to-html.xsl.

   Class index (class  <-  TEI source):
     .tei-div / .tei-ref-n     <-  <div> / its @n (visible when it has no <head>)
     .tei-head                 <-  <head>          (h2..h6 by nesting depth)
     .tei-p .tei-ab            <-  <p> <ab>
     .tei-lg .tei-l .tei-l5  <-  <lg> <l> (number drawn by CSS from data-n, shown every 5th line)
     .tei-sp .tei-speaker      <-  <sp>, <label type="speaker">
     .tei-head-label           <-  <label type="head">
     .tei-hi .rend-*           <-  <hi rend="..."> (one rend-<token> class per token)
     .tei-choice               <-  <choice>        (variant in the title attribute)
     .lei .lei-open/-close     <-  Leiden sigla: every bracket the XSLT adds
     .tei-lost                 <-  <supplied reason="lost"> and <gap reason="lost">
     .tei-illegible            <-  <gap reason="illegible">
     .tei-omitted              <-  <supplied reason="omitted"> (and bare <supplied>)
     .tei-unclear              <-  <unclear>       (dotted underline = dot below)
     .tei-surplus .tei-del .tei-add  <-  <surplus> <del> <add>
     .tei-lemma .tei-newcit .tei-marginalia .tei-diagram  <-  <seg type|rend=...>
     .tei-bibl .tei-fragment-source  <-  <bibl>, <bibl type="fragment-source">
     .tei-note                 <-  <note>          (folded to a marker)
     .tei-pb .tei-cb .tei-ms .tei-lb  <-  <pb> <cb> <milestone> <lb>
     .tei-space                <-  <space quantity="n">
     .tei                      <-  catch-all for elements the stylesheet does not name
   =========================================================================== */

:root {
  --bg: #fcfcfb; --fg: #1f1f1d; --muted: #6b6a66; --line: #e4e3df; --head: #f3f2ef;
  --accent: #2a78d6; --warn: #c97a00; --good-bg: #e3f4e1; --good-fg: #006300;
  --sigla: #9a5b00; --lost-bg: #fbf1dc; --illegible: #b3261e; --surplus: #7a3fa0;
  --serif: "Gentium Plus", "Gentium Book Plus", "Cardo", "Linux Libertine", "GFS Didot", Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a19; --fg: #ecebe7; --muted: #a3a29d; --line: #33332f; --head: #232321;
    --accent: #5a9bea; --warn: #e0a040; --good-bg: #173a17; --good-fg: #7fd67f;
    --sigla: #e0a040; --lost-bg: #33291a; --illegible: #ef7f76; --surplus: #c496e4;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.5 var(--sans); }
main { max-width: 1400px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 48px) 64px; }
h1 { font-size: 1.6rem; margin: 0 0 4px; }
h2.sec { font-size: 1.2rem; margin: 36px 0 12px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.sub, .muted { color: var(--muted); }
.mono, .urn { font-family: var(--mono); font-size: .78rem; color: var(--muted); word-break: break-all; }
.crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: var(--muted); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 20px; }
.tile { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.tile .k { color: var(--muted); font-size: .8rem; }
.tile .v { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { text-align: left; vertical-align: top; padding: 6px 10px; border-bottom: 1px solid var(--line); }
thead th { background: var(--head); font-weight: 600; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.nw { white-space: nowrap; }

.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 12px 0; font-size: .9rem; }
select, input[type=search] { font: inherit; padding: 5px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); }
input[type=search] { min-width: min(100%, 22rem); }

/* Corpus list: author > work > text */
details.author { border-bottom: 1px solid var(--line); }
details.author > summary { cursor: pointer; padding: 8px 4px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
details.author > summary:hover { background: var(--head); }
details.author > summary .name { font-weight: 600; }
details.author > summary .count { margin-left: auto; color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; }
.works { padding: 0 0 12px 24px; }
.work { margin: 10px 0 0; }
.work > .wt { font-weight: 600; }
.text-row { display: grid; grid-template-columns: minmax(12rem, 2fr) minmax(10rem, 2fr) 6.5rem; gap: 4px 16px; padding: 4px 0; border-top: 1px dotted var(--line); font-size: .9rem; align-items: baseline; }
.text-row .num { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
@media (max-width: 760px) { .text-row { grid-template-columns: 1fr 1fr; } }

.chip { display: inline-block; padding: 0 8px; margin: 1px 4px 1px 0; border: 1px solid var(--line); border-radius: 10px; font-size: .78rem; white-space: nowrap; background: var(--head); }
.chip b { font-weight: 600; }
.chip.none { color: var(--warn); border-color: var(--warn); background: transparent; }
.chip.sigla { color: var(--sigla); border-color: var(--sigla); background: var(--lost-bg); }
.arrow { color: var(--muted); padding: 0 2px; }

/* Citation structure and reference tree */
.cite-decl { font-family: var(--mono); font-size: .82rem; margin: 6px 0 14px; }
.cite-decl ul { list-style: none; margin: 0; padding-left: 22px; border-left: 2px solid var(--line); }
.cite-decl > ul { border-left: 0; padding-left: 0; }
.cite-decl .unit { font-weight: 700; color: var(--fg); font-family: var(--sans); font-size: .95rem; }
.cite-decl .xp { color: var(--muted); word-break: break-all; }
.reftree { font-size: .88rem; }
.reftree ul { list-style: none; margin: 0; padding-left: 20px; }
.reftree > ul { padding-left: 0; }
.reftree summary { cursor: pointer; }
.reftree li { padding: 1px 0; }
.reftree .ct { color: var(--muted); font-size: .75rem; margin-left: 6px; }
.tree-block { border: 1px solid var(--line); border-radius: 8px; padding: 10px 16px 14px; margin: 14px 0; }
.tree-block h3 { margin: 4px 0 6px; font-size: 1.05rem; }

.warn { border: 1px solid var(--warn); border-radius: 8px; padding: 4px 16px; margin-top: 24px; }
.warn h2 { margin-top: 12px; font-size: 1.1rem; }
footer { margin-top: 48px; color: var(--muted); font-size: .8rem; }

/* ---- Reader ------------------------------------------------------------- */
.reader-bar { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px clamp(16px, 3vw, 48px); display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: .88rem; }
.reader-bar .grow { flex: 1; min-width: 12rem; }
.reader-bar label { white-space: nowrap; cursor: pointer; }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 28px 0 0; font-size: .9rem; }

.tei-text {
  font-family: var(--serif); font-size: 20px; line-height: 1.75;
  max-width: 40rem; margin: 18px auto 0; padding: 0 24px 40px; text-wrap: pretty;
}
.tei-div { margin: 0 0 1em; position: relative; }
.tei-div:has(> .tei-l:only-child) { margin-bottom: .2em; }
/* citation tag of a leaf <div>: in the margin, like the line numbers */
.tei-ref-n { font: .72rem/1.9 var(--sans); color: var(--muted); white-space: nowrap; user-select: none; }
.tei-div > .tei-ref-n { position: absolute; right: calc(100% + 1rem); top: .35em; max-width: 6rem; overflow: hidden; text-overflow: ellipsis; }
.tei-ref-inline { border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; margin-right: .6em; vertical-align: .15em; }
@media (max-width: 900px) { .tei-div > .tei-ref-n { position: static; display: block; line-height: 1.2; } }
.tei-head { font-weight: 600; line-height: 1.3; margin: 1.6em 0 .6em; }
h2.tei-head { font-size: 1.5rem; } h3.tei-head { font-size: 1.25rem; } h4.tei-head, h5.tei-head, h6.tei-head { font-size: 1.1rem; }
.tei-head-label { display: block; text-align: center; font-variant: small-caps; letter-spacing: .04em; margin: 1.2em 0 .4em; color: var(--muted); }
.tei-p, .tei-ab { margin: 0 0 .9em; }
.tei-trailer { text-align: center; font-style: italic; color: var(--muted); }

/* Verse: number gutter in the margin, shown every fifth line */
.tei-lg { margin: 0 0 1em; }
.tei-l { position: relative; margin-left: var(--i, 0); }
.tei-p[style] { margin-left: var(--i); }
/* the number is drawn from data-n (nothing to copy, nothing in the markup): only every fifth line shows it */
.tei-l[data-n]::before { content: attr(data-n); position: absolute; left: calc(-3.2rem - var(--i, 0em)); width: 2.4rem; text-align: right; font: .75rem/1.9 var(--sans); color: var(--muted); user-select: none; top: .1em; visibility: hidden; }
.tei-l5::before { visibility: visible !important; }
@media (max-width: 760px) { .tei-l[data-n]::before { position: static; display: inline-block; width: 2.2rem; text-align: left; } }

.tei-sp { margin: 0 0 .8em; }
.tei-speaker { font-variant: small-caps; letter-spacing: .05em; margin-right: .5em; color: var(--muted); }
.tei-list { padding-left: 1.4em; }

.tei-hi.rend-italic { font-style: italic; }
.tei-hi.rend-bold { font-weight: 700; }
.tei-hi.rend-letter-spacing { letter-spacing: .14em; }
.tei-hi.rend-overline { text-decoration: overline; }
.tei-hi.rend-underline { text-decoration: underline; }
.tei-hi.rend-overline.rend-underline { text-decoration: overline underline; }
.tei-hi.rend-small { font-size: .82em; }
.tei-hi.rend-large { font-size: 1.2em; }
.tei-hi.rend-superscript, sup.tei-hi { font-size: .75em; }

.tei-choice { border-bottom: 1px dotted var(--muted); cursor: help; }
.tei-lemma { font-weight: 700; }
.tei-newcit { color: var(--muted); font: .7em var(--sans); margin-right: .3em; user-select: none; }
.tei-marginalia { font: .7rem var(--sans); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-right: .4em; }
.tei-diagram { font-family: var(--mono); font-size: .85em; }
.tei-bibl { color: var(--muted); font-size: .85em; }
.tei-fragment-source { display: block; margin: .2em 0 .5em; }
.tei-quote { quotes: "«\00a0" "\00a0»"; }
.tei-foreign { font-style: italic; }
.tei-figure { margin: 1em 0; color: var(--muted); font-size: .9em; }
.tei-figure-mark { font-family: var(--sans); font-size: .8rem; margin-right: .5em; }
.tei-g { color: var(--muted); }

/* Leiden sigla ----------------------------------------------------------- */
.lei { color: var(--sigla); font-weight: 400; user-select: none; }
.tei-lost { background: var(--lost-bg); border-radius: 2px; }
.tei-gap.tei-lost { color: var(--sigla); letter-spacing: .05em; }
.tei-gap-lines { display: inline-block; font: italic .85em var(--sans); }
.tei-illegible { color: var(--illegible); letter-spacing: .06em; }
.tei-omitted { background: transparent; }
.tei-unclear { text-decoration: underline dotted; text-decoration-thickness: 2px; text-underline-offset: .22em; }
.tei-surplus { color: var(--surplus); }
.tei-del { color: var(--muted); }
.tei-add { text-decoration: none; }
/* The reader's "Leiden sigla" switch: brackets off, lacunae and unclear letters plain. */
.no-sigla .lei { display: none; }
.no-sigla .tei-lost { background: none; }
.no-sigla .tei-gap.tei-lost { display: none; }
.no-sigla .tei-gap.tei-illegible { display: none; }
.no-sigla .tei-unclear { text-decoration: none; }
.no-sigla .tei-del { display: none; }
.no-sigla .tei-surplus { color: inherit; }

/* Pages, columns, milestones --------------------------------------------- */
.tei-mark { color: var(--muted); }
.tei-mark-label { font: .68rem var(--sans); color: var(--accent); margin-left: 1px; user-select: none; }
.tei-pb, .tei-cb { white-space: nowrap; }
.tei-ms { font: .72rem var(--sans); color: var(--accent); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin: 0 .3em; white-space: nowrap; user-select: none; }
.tei-space { display: inline-block; }
.no-pages .tei-pb, .no-pages .tei-cb, .no-pages .tei-ms { display: none; }

/* Notes: folded to a marker */
.tei-note { position: relative; cursor: help; }
.tei-note-mark { color: var(--accent); font-size: .7em; vertical-align: .3em; padding: 0 2px; }
.tei-note-body { display: none; position: absolute; left: 0; top: 1.4em; z-index: 4; width: min(26rem, 80vw); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; font: .85rem/1.5 var(--sans); box-shadow: 0 4px 16px #0003; }
.tei-note:hover .tei-note-body, .tei-note:focus .tei-note-body, .tei-note:focus-within .tei-note-body { display: block; }

/* Anchors reached from the citation tree */
:target { scroll-margin-top: 4rem; }
.tei-div:target, .tei-l:target, .tei-pb:target { background: color-mix(in srgb, var(--accent) 14%, transparent); outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 3px; }

/* index: kind filters and badges */
.filters .kinds { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; }
.kindbox { cursor: pointer; }
.chip.kind { font-weight: 600; }
#f-more { margin: 1rem 0; }

/* site header: a coloured band that sets the navigation apart from the page */
:root { --nav-bg: #1f3a5f; --nav-fg: #eef3fa; --nav-on: #ffffff; --nav-hover: rgba(255,255,255,.14); }
@media (prefers-color-scheme: dark) { :root { --nav-bg: #0d2238; --nav-fg: #cfdcec; --nav-on: #ffffff; } }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; padding: 0 clamp(16px, 3vw, 48px); background: var(--nav-bg); color: var(--nav-fg); border-bottom: 3px solid var(--accent); }
.site-nav a { color: var(--nav-fg); }
.site-nav .brand { font-weight: 700; letter-spacing: .02em; padding: 12px 0; color: var(--nav-on); }
.site-nav .brand span { font-weight: 400; opacity: .75; }
.site-nav nav { display: flex; flex-wrap: wrap; gap: 2px; }
.site-nav nav a { padding: 14px 12px; font-size: .92rem; }
.site-nav nav a:hover { background: var(--nav-hover); text-decoration: none; }
.site-nav nav a.on { color: var(--nav-on); box-shadow: inset 0 -3px 0 var(--nav-on); font-weight: 600; }

/* about page (the README) */
.about { max-width: 54rem; }
.about h1 { font-size: 1.8rem; } .about h2 { font-size: 1.25rem; margin: 2rem 0 .6rem; }
.about pre { background: var(--head); border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; overflow-x: auto; font-size: .85rem; }
.about code { font-family: var(--mono); font-size: .88em; }
.about blockquote { margin: 1rem 0; padding: .2rem 1rem; border-left: 4px solid var(--accent); color: var(--muted); }
.about hr { border: 0; border-top: 1px solid var(--line); margin: 1.6rem 0; }