/* ============================================================
   Classicalia — the English text reader. The full extract in one
   column, highlighted phrases coloured by PAVLS category (or a text's
   own lenses), and a side column that explains the phrase you click.
   Loads after ui.css. Built pages: scripts/build-english.py.
   ============================================================ */

/* category colours: --t tint behind the words, --u the underline, chips use --cb/--cf */
.c-purpose   { --t:#f3effe; --u:#a78bfa; --cb:#ede9fe; --cf:#6d28d9; }
.c-audience  { --t:#eaf2ff; --u:#60a5fa; --cb:#dbeafe; --cf:#1e40af; }
.c-voice     { --t:#e9faf2; --u:#34d399; --cb:#d1fae5; --cf:#065f46; }
.c-language  { --t:#fff3e8; --u:#fb923c; --cb:#ffedd5; --cf:#9a3412; }
.c-structure { --t:#fdeeee; --u:#f87171; --cb:#fde2e2; --cf:#8a2d1f; }
.c-style     { --t:#fff8e1; --u:#fbbf24; --cb:#fef3c7; --cf:#92400e; }
.c-context   { --t:#eaf8ee; --u:#4ade80; --cb:#dcfce7; --cf:#166534; }
.c-reader    { --t:#fdeeee; --u:#f87171; --cb:#fde2e2; --cf:#8a2d1f; }
.chip[class*="c-"] { background:var(--cb); color:var(--cf); }

/* ── toolbar ── */
.er-bar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:12px 18px; border-bottom:1px solid var(--rule-soft); }
.er-bar .k { font-size:12.5px; color:var(--muted); margin-right:4px; }
.er-bar .chip { cursor:pointer; border:0; font-family:var(--sans); }
.er-bar .chip small { font-weight:600; opacity:.65; margin-left:2px; }
.er-bar .chip[data-all] { background:var(--rule-soft); color:var(--body); }
.er-bar .chip[data-all].on { background:var(--navy); color:#fff; }
.er-bar .chip.off { opacity:.38; }
.er-bar .sp { flex:1; }
.er .btn { font-size:12.5px; padding:6px 12px; border-radius:7px; background:var(--paper); border-color:var(--rule); color:var(--ink); }
.er .btn:hover { border-color:var(--ink); }
.er .btn[aria-pressed="true"] { background:var(--brand-soft); border-color:var(--brand-soft); color:#1457cc; }
.er .seg { display:inline-flex; border:1px solid var(--rule); border-radius:7px; overflow:hidden; }
.er .seg .btn { border:0; border-radius:0; }
.er .seg .btn + .btn { border-left:1px solid var(--rule); }

/* ── the text ── */
.er-body { display:grid; grid-template-columns:minmax(0,1fr) clamp(280px, 28%, 360px); }
.er-main { min-width:0; padding:22px 28px 30px 18px; --fs:18px; }
.er-stand { font-family:var(--serif); font-style:italic; color:var(--muted); font-size:calc(var(--fs) - 1px); margin:0 0 16px 46px; }
.er-p { display:grid; grid-template-columns:30px minmax(0,1fr); gap:16px; margin-bottom:16px; }
.er-p em { font-style:normal; color:#b3bac9; font-size:12px; font-weight:600; text-align:right; padding-top:.45em; font-variant-numeric:tabular-nums; }
.er-p p { font-family:var(--serif); font-size:var(--fs); line-height:1.85; color:var(--ink); max-width:72ch; }
@media (min-width:1500px) { .er-main { --fs:19.5px; } }

.hl { background:var(--t); box-shadow:inset 0 -2px 0 var(--u); border-radius:2px; cursor:pointer; padding:1px 0; transition:background .12s, box-shadow .12s; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.hl:hover { box-shadow:inset 0 -3px 0 var(--u); filter:saturate(1.6); }
.hl:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.hl.pin { background:var(--cb); box-shadow:inset 0 -3px 0 var(--u), 0 0 0 2px var(--u); }
.hl .hl { padding:0; }
.hl.mute, .er.plain .hl { background:none; box-shadow:none; cursor:text; filter:none; }
.hl.mute.pin { background:var(--cb); }
.hl-q { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; border:0; background:var(--cb); color:var(--cf); font:700 12px/1 var(--sans); cursor:pointer; vertical-align:2px; margin-left:3px; }
.hl-q:hover, .hl-q.pin { background:var(--u); color:#fff; }
.hl-q.mute, .er.plain .hl-q { display:none; }
.vw { border-bottom:1.5px dotted var(--brand); cursor:help; }
.vw:hover, .vw.pin { background:var(--brand-soft); }
.er.plain .vw { border-bottom-color:transparent; }

/* ── side column ── */
.er-side { border-left:1px solid var(--rule-soft); min-width:0; background:#fcfcfd; border-radius:0 0 14px 0; }
.er-sidein { position:sticky; top:12px; padding:16px 20px 24px; max-height:calc(100vh - 24px); overflow-y:auto; }
.er-sideh { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:12.5px; font-weight:700; color:var(--muted); padding-bottom:10px; margin-bottom:14px; border-bottom:1px solid var(--rule-soft); }
.er-sideh .btn { font-size:16px; line-height:1; padding:3px 9px; }
.er-sideh .btn[hidden] { display:none; }
.er-sidebody { font-size:14.5px; line-height:1.55; color:var(--body); }
.er-sidebody h3 { font-size:20px; line-height:1.25; margin:10px 0 10px; }
.er-sidebody blockquote { font-family:var(--serif); font-style:italic; color:var(--ink); font-size:15px; line-height:1.55; border-left:3px solid var(--u, var(--rule)); padding:2px 0 2px 12px; margin:0 0 14px; }
.er-sidebody .k { font-size:11.5px; font-weight:700; color:var(--muted); letter-spacing:.02em; margin:14px 0 3px; }
.er-sidebody p { margin:0 0 8px; }
.er-sidebody .hw { font-family:var(--serif); font-size:22px; font-weight:600; color:var(--ink); line-height:1.2; }
.er-sidebody .mean { font-size:15.5px; color:var(--ink); margin-top:6px; }
.er-sidebody img { display:block; width:100%; border-radius:10px; margin-top:14px; }
.er-sidebody .step { display:flex; justify-content:space-between; gap:8px; margin-top:18px; padding-top:12px; border-top:1px solid var(--rule-soft); }
.er-sidebody .step .btn { font-size:12.5px; }
.er-sidebody .step .of { font-size:12.5px; color:var(--muted); align-self:center; }
.er-sidebody .intro p { font-size:14px; }
.er-sidebody .intro .er-pt { padding:6px 0; }
.er-sidebody .tip { font-size:12.5px; color:var(--muted); margin-top:14px; }
.er-sidebody kbd { font:600 11px var(--sans); background:var(--rule-soft); border:1px solid var(--rule); border-radius:4px; padding:0 5px; }

/* ── overall analysis tabs, journey, annotation list ── */
.er-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.er-tabs .chip { cursor:pointer; border:0; font-family:var(--sans); font-size:13px; padding:5px 12px; opacity:.55; }
.er-tabs .chip.on { opacity:1; box-shadow:inset 0 -2px 0 var(--u); }
.er-ov h3 { font-size:19px; margin-bottom:6px; }
.er-ov > p { font-size:15px; color:var(--muted); margin-bottom:8px; }
.er-ov[hidden] { display:none; }
.er-pt { display:grid; grid-template-columns:minmax(150px, 220px) minmax(0,1fr); gap:4px 16px; padding:10px 0; border-top:1px solid var(--rule-soft); font-size:15px; line-height:1.55; }
.er-pt:first-of-type { border-top:0; }
.er-pt b { color:var(--ink); font-weight:600; }
.er-ov .er-pt b { box-shadow:inset 3px 0 0 var(--u); padding-left:10px; }
.er-key .er-pt { grid-template-columns:96px minmax(0,1fr); font-size:14px; align-items:center; padding:8px 0; }
.er-key .chip { justify-self:start; }

.er-journey { list-style:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:18px; position:relative; margin:4px 0 2px; }
.er-journey li { position:relative; padding-top:24px; display:grid; gap:4px; align-content:start; }
.er-journey li::before { content:''; position:absolute; top:6px; left:0; right:-18px; height:2px; background:var(--rule); }
.er-journey li:last-child::before { right:0; }
.er-journey .dot { position:absolute; top:0; left:0; width:14px; height:14px; border-radius:50%; background:var(--navy); box-shadow:0 0 0 4px var(--paper); }
.er-journey b { font-family:var(--serif); font-size:16.5px; color:var(--ink); font-weight:600; }
.er-journey span { font-size:14px; color:var(--body); }
.er-journey .cs { display:flex; gap:4px; margin-top:4px; }
.er-journey .cs .chip { font-size:11px; padding:1px 7px; }

.er-all > summary { list-style:none; cursor:pointer; border-bottom:0; }
.er-all > summary::-webkit-details-marker { display:none; }
.er-all > summary .n { color:var(--brand); font-weight:600; }
.er-all[open] > summary { border-bottom:1px solid var(--rule-soft); }
.er-all[open] > summary .n { font-size:0; }
.er-all[open] > summary .n::after { content:'Hide'; font-size:13.5px; }
.er-li { display:grid; grid-template-columns:auto minmax(0,1fr); gap:3px 12px; width:100%; text-align:left; font:inherit; background:none; border:0; border-top:1px solid var(--rule-soft); padding:10px 4px; cursor:pointer; color:inherit; }
.er-li:first-child { border-top:0; }
.er-li:hover { background:var(--ground); }
.er-li .chip { grid-row:1 / span 2; align-self:start; font-size:11.5px; }
.er-li b { color:var(--ink); font-weight:600; font-size:14.5px; }
.er-li q { font-family:var(--serif); font-style:italic; font-size:14px; color:var(--muted); quotes:'\201C' '\201D'; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.er-li.mute { display:none; }
.er-vocab { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:8px 24px; font-size:14.5px; }
.er-vocab b { font-family:var(--serif); color:var(--ink); font-weight:600; margin-right:4px; }
.er-context .pb p { font-size:15px; line-height:1.65; }

/* ── contents page cards ── */
.er-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:14px; }
.er-card { background:var(--paper); border:1px solid var(--rule); border-radius:14px; box-shadow:var(--shadow); padding:16px 18px 18px; display:flex; flex-direction:column; gap:4px; transition:transform .15s, box-shadow .15s; }
.er-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.er-card .f { font-size:12px; font-weight:700; color:var(--brand); }
.er-card b { font-family:var(--serif); font-weight:600; font-size:18px; line-height:1.2; color:var(--ink); }
.er-card .a { font-size:13.5px; color:var(--muted); }
.er-card .d { font-size:14px; color:var(--body); line-height:1.5; margin-top:6px; }
.er-card:hover b { color:var(--brand); }

/* ── classroom: the text alone, large, on the whole screen ── */
.er:fullscreen, .er.present { position:fixed; inset:0; z-index:500; border-radius:0; overflow:auto; background:var(--paper); }
.er:fullscreen .er-main, .er.present .er-main { --fs:clamp(22px, 1.9vw, 32px); padding:36px 48px 60px 24px; }
.er:fullscreen .er-p p, .er.present .er-p p { max-width:none; }
.er:fullscreen .er-body, .er.present .er-body { grid-template-columns:minmax(0,1fr) clamp(320px, 28%, 460px); }
.er:fullscreen .er-sidebody, .er.present .er-sidebody { font-size:17px; }
.er:fullscreen .er-sidebody h3, .er.present .er-sidebody h3 { font-size:26px; }
.er:fullscreen .er-sidebody blockquote, .er.present .er-sidebody blockquote { font-size:18px; }

/* ── narrow screens: the explanation slides up from the bottom ── */
@media (max-width:980px) {
  .er-body { grid-template-columns:minmax(0,1fr); }
  .er-main { padding:18px 18px 24px 8px; --fs:17.5px; }
  .er-p { gap:10px; grid-template-columns:24px minmax(0,1fr); }
  .er-stand { margin-left:34px; }
  .er-side { position:fixed; left:0; right:0; bottom:0; z-index:400; border:0; border-top:1px solid var(--rule); border-radius:16px 16px 0 0; background:var(--paper); box-shadow:0 -18px 40px rgba(14,30,63,.18); max-height:62vh; transform:translateY(105%); transition:transform .22s ease; }
  .er-side.open { transform:none; }
  .er-sidein { position:static; max-height:62vh; padding-bottom:max(24px, env(safe-area-inset-bottom, 0px)); }
  .er-bar .sp { flex-basis:100%; height:0; }
  .er:fullscreen .er-body, .er.present .er-body { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px) {
  .er-pt { grid-template-columns:1fr; }
  .er-bar [data-present] { display:none; }
}
@media print {
  .er-bar, .er-side, .pager, .er-all { display:none !important; }
  .er-body { display:block; }
  .hl { background:none; box-shadow:inset 0 -1.5px 0 var(--u); }
}