/* /reader: the reading helper. Uses tokens.css and base.css. */

/* Greek in the text uses the site's Porson; Latin falls through to EB Garamond. */
@font-face {
  font-family: "Reader Greek";
  src: url("../fonts/StobaeusPorson-2.woff2") format("woff2");
  unicode-range: U+0370-03FF, U+1F00-1FFF, U+0300-036F, U+00B7, U+2019;
  font-display: swap;
}

.intro { text-align: center; }
.home { margin: var(--space-3) 0 0; font-size: var(--text-small); letter-spacing: .08em; text-transform: uppercase; }
.home a { text-decoration: none; }
.lede { font-size: 1.15em; }
.how { color: var(--ink-2); }

/* ── the pasted text ───────────────────────────── */
.source { margin: var(--space-3) 0 var(--space-2); }
.source textarea {
  display: block; width: 100%; min-height: 7.5rem; resize: vertical;
  padding: var(--space-1) .75rem;
  font: 1.05rem/1.45 "Reader Greek", var(--serif);
  color: var(--ink); background: #fff;
  border: 1px solid var(--rule); border-radius: var(--radius);
}
.source textarea:focus-visible { outline: var(--focus); outline-offset: 1px; }
.source-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2);
  margin-top: var(--space-1);
}
.count { color: var(--ink-2); font-size: var(--text-small); font-variant-numeric: lining-nums tabular-nums; }
.count.over { color: var(--rubric); }

button {
  font: inherit; font-size: var(--text-small); color: var(--ink);
  min-height: 2.75rem; padding: 0 var(--space-2);
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius);
  cursor: pointer;
}
button:hover { border-color: var(--ink-2); }
button.read {
  margin-inline-start: auto; min-width: 9rem; min-height: 3rem;
  background: var(--rubric); border-color: var(--rubric); color: #fff;
  font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase;
}
button.read:hover { background: #8A1A23; border-color: #8A1A23; }
/* the pasted text differs from the one shown: Read is the next step */
button.read.ready { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--rubric); }
button.read:disabled { opacity: .6; cursor: progress; }
.status { min-height: 1.5em; margin: var(--space-1) 0 0; color: var(--ink-2); font-size: var(--text-small); }
.status.error { color: var(--rubric); }

/* ── examples ─────────────────────────────────── */
.examples { margin: var(--space-3) 0; }
.examples h2 { margin: 0 0 var(--space-2); font-size: 1rem; letter-spacing: .14em; }
.example-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.sample {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15rem;
  min-height: 0; padding: .75rem var(--space-2); text-align: left; background: #fff;
}
.sample .ex-title { color: var(--rubric); font-weight: 600; font-size: 1.05rem; }
.sample .ex-work { color: var(--ink-2); }
.sample .ex-start { margin-top: .2rem; font-family: "Reader Greek", var(--serif); font-size: 1rem; color: var(--ink); }
.sample.current { border-color: var(--rubric); }

/* ── the helper bar: stays in view while the text scrolls ── */
.helper {
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: auto 1fr 3.5ch; align-items: center; gap: var(--space-2);
  margin: 0 calc(-1 * var(--gutter)); padding: var(--space-1) var(--gutter);
  background: var(--paper); border-bottom: 1px solid var(--rule);
}
.helper label { color: var(--rubric); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: var(--text-small); }
.helper output { text-align: end; font-variant-numeric: lining-nums tabular-nums; }
.helper input[type=range] { width: 100%; height: 2.75rem; margin: 0; accent-color: var(--rubric); cursor: pointer; }

/* ── the text ──────────────────────────────────── */
.cite { scroll-margin-top: 4.5rem; margin: var(--space-3) 0 var(--space-1); color: var(--ink-2); font-size: var(--text-small); text-align: center; }
.text {
  font-family: "Reader Greek", var(--serif);
  font-size: 1.3rem; line-height: 3.4;
  overflow-wrap: break-word;
}
.text:focus { outline: none; }
.text .w {
  cursor: pointer; border-radius: 2px;
  -webkit-tap-highlight-color: transparent;
}
.text .w:hover { background: var(--paper-2); }
.text .w.unk { text-decoration: underline dotted var(--ink-2); text-underline-offset: .2em; }
.text .w.sel { background: #F3E3C7; }

/* a helped word stays in the original, in red; its English (small capitals) and its grammar
   (italic) sit under it.
   As an inline flex column it keeps the original on the baseline and is as wide as its
   widest line, so neighbouring glosses never overlap. */
.text .w.on {
  display: inline-flex; flex-direction: column; align-items: center;
  vertical-align: baseline; line-height: 1.15; padding: 0 .08em;
}
.text .w .e, .text .w .t { display: none; }
.text .w.on .o { color: var(--rubric); }
.text .w.on .e {
  display: block; margin-top: .1em; min-height: 1.2em;
  font-family: var(--serif); font-size: .5em; line-height: 1.2; color: var(--ink-2);
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.text .w.on .t {
  display: block;
  font-family: var(--serif); font-size: .6em; font-style: italic; line-height: 1.15;
  color: var(--ink); white-space: nowrap;
}

/* the card for a tapped word */
.card {
  margin: var(--space-2) 0; padding: var(--space-2);
  background: var(--paper-2); border: 1px solid var(--rule); border-left: 3px solid var(--rubric);
  border-radius: var(--radius);
}
.card .form { font-family: "Reader Greek", var(--serif); font-size: 1.25em; margin: 0 0 .25em; }
.card .form .lemma { color: var(--ink-2); font-size: .8em; }
.card p { margin: 0 0 .4em; }
.card .parse { color: var(--ink-2); }
.card .alts { margin: .5em 0 0; padding-left: 1.2em; color: var(--ink-2); font-size: var(--text-small); }
.card .close { float: right; min-height: 2.25rem; margin: -.5rem -.5rem 0 0; }

/* ── the word list: two columns at every width ── */
.words { margin-top: var(--space-4); }
.words h2 { margin-bottom: var(--space-2); }
.empty { text-align: center; color: var(--ink-2); }
.list { display: grid; grid-template-columns: minmax(5rem, max-content) 1fr; border-top: 1px solid var(--rule); }
.list .row { display: contents; }
.list .row > * { padding: .55rem .5rem; border-bottom: 1px solid var(--rule); cursor: pointer; }
.list .orig { font-family: "Reader Greek", var(--serif); font-size: 1.1em; overflow-wrap: anywhere; }
.list .mean { min-width: 0; }
.list .mean b { font-weight: 500; color: var(--rubric); font-style: italic; }
.list .mean small { display: block; color: var(--ink-2); font-size: .85em; line-height: 1.35; }
.list .row.sel > * { background: #F3E3C7; }

.sources { margin: var(--space-4) auto var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--rule); color: var(--ink-2); font-size: var(--text-small); }

@media (max-width: 30em) {
  .text { font-size: 1.15rem; line-height: 3.3; }
  .example-list { grid-template-columns: 1fr; }
  .list { grid-template-columns: minmax(4rem, max-content) 1fr; }
  .list .row > * { padding: .5rem .35rem; }
}

/* EB Garamond's Latin locale forms print u as v (qvarvm); the reader keeps the text as typed. */
.text:lang(la), .list:lang(la), .card [lang="la"] { font-feature-settings: "locl" 0; }