/* ============================================================
   Classicalia — the set-text reader. One reader for every text:
   Latin on the left, English on the right revealed by sentence, and
   a side column that shows the word under the pointer: its vocabulary
   and parsing, or its style note, depending on which clicker is on.
   Grammar colours as an option. Loads after ui.css.
   ============================================================ */

.st { --st-order:#34d399; --st-structure:#22d3ee; --st-sound:#a78bfa; --st-diction:#fbbf24; --st-imagery:#fb923c; --st-grammar:#60a5fa; --st-note:#c2c8d6; }

/* toolbar */
.st-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 18px; border-bottom:1px solid var(--rule-soft); }
.st-bar .sep { width:1px; height:18px; background:var(--rule); margin:0 4px; }
.st-bar .hint { margin-left:auto; font-size:13px; color:var(--muted); }
.st .btn { font-size:12.5px; padding:6px 12px; border-radius:7px; }
.st .btn.on { background:var(--brand-soft); border-color:var(--brand-soft); color:#1457cc; }
.st .seg { display:inline-flex; border:1px solid var(--rule); border-radius:7px; overflow:hidden; }
.st .seg .btn { border:0; border-radius:0; }
.st .seg .btn + .btn { border-left:1px solid var(--rule); }
.st-keys { display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:8px 18px 10px; border-bottom:1px solid var(--rule-soft); }
.st-keys[hidden], .st-gkeys[hidden] { display:none; }
.st-keys .k { font-size:12.5px; color:var(--muted); margin-right:4px; }
.st-keys .chip { cursor:pointer; border:0; font-family:var(--sans); }
.st-keys .chip.off { opacity:.4; }
.chip.c-order { background:#d1fae5; color:#065f46; } .chip.c-structure { background:#cffafe; color:#155e75; } .chip.c-sound { background:#ede9fe; color:#6d28d9; }
.chip.c-diction { background:#fef3c7; color:#92400e; } .chip.c-imagery { background:#ffedd5; color:#9a3412; } .chip.c-grammar { background:#dbeafe; color:#1e40af; } .chip.c-note { background:#eceef4; color:#47506b; }
.st-gkeys { display:flex; gap:6px; flex-wrap:wrap; padding:8px 18px 10px; border-bottom:1px solid var(--rule-soft); }
.chip.g-subj { background:#fde8e8; color:#8a2d1f; } .chip.g-obj { background:#e5f0dd; color:#2a5010; } .chip.g-verb { background:#ddeeff; color:#1a4a80; } .chip.g-abl { background:#fdf3cf; color:#7a5300; }
.chip.g-gen { background:#fff1c2; color:#6b4a00; } .chip.g-dat { background:#f3e8ff; color:#4a2a80; } .chip.g-adv { background:#ece8f8; color:#3a2a70; } .chip.g-conj { background:#eceef4; color:#47506b; }
.chip.g-prep, .chip.g-voc { background:#fde8f4; color:#7a1a55; } .chip.g-gdv { background:#e0f2f1; color:#0f5c55; }

/* columns */
.st-cols { display:grid; grid-template-columns:1fr 1fr; }
.st-colh { font-size:12.5px; font-weight:700; color:var(--muted); padding:12px 22px 10px; border-bottom:1px solid var(--rule-soft); }
.st-colh + .st-colh { border-left:1px solid var(--rule-soft); }
.st-unit { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--rule-soft); cursor:pointer; }
.st-unit:first-child { border-top:0; }
.st-unit:hover { background:#fafbfd; }
.st-unit.cur { background:var(--brand-soft); }
.st-lat, .st-eng { padding:10px 22px 12px; min-width:0; }
.st-eng { border-left:1px solid var(--rule-soft); }
.st[data-mode="prose"] .st-unit { border-top:1px solid var(--rule-soft); }
.st-row { display:grid; grid-template-columns:28px 1fr; gap:10px; padding:3px 0; align-items:baseline; }
.st-row em { font-style:normal; color:#b3bac9; font-size:12px; text-align:right; font-variant-numeric:tabular-nums; }
.st-la { font-family:var(--serif); font-size:18px; line-height:1.6; color:var(--ink); }
.st-la .w { border-radius:3px; padding:0 1px; }
.st-en, .st-en-block { font-size:15px; line-height:1.6; color:var(--body); }
.st-en-block { padding:3px 0; }
.st-unit:not(.on) .st-en, .st-unit:not(.on) .st-en-block { color:transparent; text-shadow:0 0 9px rgba(28,37,64,.38); user-select:none; }
.st-unit:not(.on) .st-en-block .sup { text-decoration:none; }
@media (min-width:1500px) { .st-la { font-size:20px; } .st-en, .st-en-block { font-size:16.5px; } }

/* vocabulary: a word opens in the side column */
.st.vocab-on .st-la .w[data-v] { cursor:pointer; }
.st.vocab-on .st-la .w[data-v]:hover { background:var(--brand-soft); }
.st-la .w.pin { background:#dbe7ff !important; box-shadow:0 0 0 2px #dbe7ff; }

/* style notes: a bar under each phrase, stacked when notes overlap */
.st-lat { position:relative; }
.st.style-on .st-la { line-height:1.9; }
.st-u { position:absolute; height:3px; border-radius:2px; cursor:pointer; opacity:.95; }
.st-u.c-order { background:var(--st-order); } .st-u.c-structure { background:var(--st-structure); } .st-u.c-sound { background:var(--st-sound); }
.st-u.c-diction { background:var(--st-diction); } .st-u.c-imagery { background:var(--st-imagery); } .st-u.c-grammar { background:var(--st-grammar); }
.st-u.c-note { background:repeating-linear-gradient(90deg, var(--st-note) 0 3px, transparent 3px 6px); height:2px; }
.st-u:hover, .st-u.pin { height:4px; opacity:1; }
.st-u.hid { display:none; }
.st.style-on .st-la .w[data-note] { cursor:pointer; }
.st.style-on .st-la .w[data-note]:hover { background:var(--brand-soft); }
.st.style-on .st-la .w.dim { opacity:.55; }

/* the side column: the word under the pointer, or the one pinned by a click */
.st-body { display:grid; grid-template-columns:minmax(0,1fr); }
.st.side-on .st-body { grid-template-columns:minmax(0,1fr) clamp(260px, 24%, 320px); }
.st-main { min-width:0; }
.st-side { border-left:1px solid var(--rule-soft); min-width:0; }
.st-side[hidden] { display:none; }
.st-sidein { position:sticky; top:12px; padding:12px 18px 20px; }
.st-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:12px; border-bottom:1px solid var(--rule-soft); }
.st-sideh .btn { font-size:11.5px; padding:3px 9px; }
.st-sideh .btn[hidden] { display:none; }
.st-sidebody { font-size:14px; line-height:1.5; }
.st-sidebody .empty { color:var(--muted); font-size:13.5px; }
.st-sidebody .entry .hw { font-family:var(--serif); font-size:21px; font-weight:600; color:var(--ink); line-height:1.25; }
.st-sidebody .entry .pos { font-family:var(--serif); font-style:italic; color:var(--muted); font-size:14px; margin-top:2px; }
.st-sidebody .entry .mean { font-size:15.5px; color:var(--ink); margin-top:8px; }
.st-sidebody .entry .here { margin-top:14px; padding-top:12px; border-top:1px solid var(--rule); font-size:14px; line-height:1.55; color:var(--body); }
.st-sidebody .entry .here b { display:block; color:var(--muted); font-weight:600; font-size:11.5px; letter-spacing:.02em; margin-bottom:3px; }
.st-sidebody .entry .here .form { font-family:var(--serif); font-weight:600; color:var(--ink); }
.st-sidebody .entry .here em, .st-sidebody .xtra em, .st-sidebody .nb em { font-family:var(--serif); font-style:italic; color:var(--ink); }
.st-sidebody .xtra { font-size:13px; color:var(--body); margin-top:10px; padding-top:10px; border-top:1px solid var(--rule); line-height:1.5; }
.st-sidebody .note + .note { margin-top:12px; padding-top:12px; border-top:1px solid var(--rule-soft); }
.st-sidebody .note .q { font-family:var(--serif); font-size:16px; font-weight:600; color:var(--ink); }
.st-sidebody .note .chip { margin-left:6px; vertical-align:2px; font-size:11px; padding:2px 7px; }
.st-sidebody .note .t { font-size:13px; color:var(--muted); font-style:italic; }
.st-sidebody .note .l { font-size:13px; font-weight:600; color:var(--ink); margin-top:6px; }
.st-sidebody .note .nb { font-size:13.5px; color:var(--body); margin-top:4px; }
.st-sidebody .note .exam { margin-top:10px; padding:9px 11px; background:var(--brand-soft); border-radius:8px; font-size:13px; color:var(--ink); line-height:1.5; }
.st-sidebody .note .exam strong { color:#1457cc; }
.st-sidebody .note small { display:block; color:var(--muted); font-size:12px; margin-top:8px; }

/* grammar colours */
.st.gram-on .st-la .w.g-subj { background:#fde8e8; } .st.gram-on .st-la .w.g-obj { background:#e5f0dd; } .st.gram-on .st-la .w.g-verb { background:#ddeeff; }
.st.gram-on .st-la .w.g-abl { background:#fdf3cf; } .st.gram-on .st-la .w.g-gen { background:#fff1c2; } .st.gram-on .st-la .w.g-dat { background:#f3e8ff; }
.st.gram-on .st-la .w.g-adv { background:#ece8f8; } .st.gram-on .st-la .w.g-conj { background:#eceef4; } .st.gram-on .st-la .w.g-prep, .st.gram-on .st-la .w.g-voc { background:#fde8f4; } .st.gram-on .st-la .w.g-gdv { background:#e0f2f1; }

/* Latin to English links (texts whose translation is marked word by word) */
.st-en-block .e { border-radius:3px; cursor:pointer; }
.st-en-block .e.lit, .st-la .w.lit { background:var(--brand) !important; color:#fff; border-bottom-color:transparent; }
.st-en-block .sup { text-decoration:underline dotted #d9a900; text-underline-offset:4px; cursor:help; }

/* notes panel */
.st-notes { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 28px; }
.st-note { display:grid; grid-template-columns:26px 1fr; gap:8px; padding:10px 0; border-top:1px solid var(--rule-soft); font-size:14px; line-height:1.5; }
.st-note > em { font-style:normal; color:#b3bac9; font-size:12px; text-align:right; padding-top:2px; font-variant-numeric:tabular-nums; }
.st-note b { font-family:var(--serif); font-weight:600; color:var(--ink); font-size:15px; }
.st-note .chip { margin-left:8px; vertical-align:2px; font-size:11.5px; padding:2px 8px; }
.st-note .t { color:var(--muted); font-size:13px; font-style:italic; }
.st-note .x { color:var(--body); font-size:13.5px; margin-top:3px; }
.st-note .x em { font-family:var(--serif); font-style:italic; color:var(--ink); }
.st-note.hid { display:none; }
.st-vocab { columns:3; column-gap:28px; }
.st-vocab > div { break-inside:avoid; font-size:14.5px; color:var(--body); padding:6px 0; border-top:1px solid var(--rule-soft); line-height:1.5; }
.st-vocab > div:first-child { border-top:0; }
.st-vocab b { font-family:var(--serif); font-weight:600; color:var(--ink); }
.st-vocab i { color:var(--muted); font-size:13px; }

/* classroom view */
.st-present { position:fixed; inset:0; z-index:400; background:#fff; display:none; flex-direction:column; }
.st-present.on { display:flex; }
.st-present .pbar { display:flex; align-items:center; gap:8px; padding:12px 24px; border-bottom:1px solid var(--rule); flex-wrap:wrap; }
.st-present .pbar .t { font-family:var(--serif); font-weight:600; font-size:18px; color:var(--ink); margin-right:auto; }
.st-present .pbody { flex:1; overflow:auto; padding:24px 40px 60px; }
.st-present .st-unit { grid-template-columns:1fr 1fr; }
.st-present .st-la { font-size:var(--p-size, 28px); line-height:var(--p-lh, 1.6); }
.st-present .st-en, .st-present .st-en-block { font-size:calc(var(--p-size, 28px) * .78); line-height:var(--p-lh, 1.6); }
.st-present .st-row { grid-template-columns:40px 1fr; }
.st-present.hide-en .st-eng { visibility:hidden; }

@media (max-width: 860px) {
  .st-cols { display:none; }
  .st-unit { grid-template-columns:minmax(0,1fr); }
  .st-eng { border-left:0; padding-top:0; }
  .st-lat { padding-bottom:4px; }
  .st-bar .hint { display:none; }
  .st-notes { grid-template-columns:1fr; }
  .st-vocab { columns:1; }
  .st-present .st-unit { grid-template-columns:1fr; }
  .st.side-on .st-body { grid-template-columns:minmax(0,1fr); }
  .st-side { border-left:0; border-top:1px solid var(--rule); position:sticky; bottom:0; background:#fff; max-height:46vh; overflow:auto; z-index:5; box-shadow:0 -10px 30px rgba(14,30,63,.1); border-radius:0 0 14px 14px; }
  .st-sidein { position:static; padding:10px 18px 16px; }
  .st-sideh { padding-bottom:8px; margin-bottom:8px; }
}
@media (min-width: 861px) and (max-width: 1180px) { .st-notes { grid-template-columns:1fr 1fr; } .st-vocab { columns:2; } }
@media print { .st-bar, .st-keys, .st-gkeys, .st-side { display:none !important; } .st-u { print-color-adjust:exact; -webkit-print-color-adjust:exact; } .st-body { grid-template-columns:1fr !important; } .st-unit .st-en, .st-unit .st-en-block { color:var(--body) !important; text-shadow:none !important; } }

/* questions and background below the text */
.st-qs ol { margin:0; padding-left:22px; display:grid; gap:8px; }
.st-qs li { line-height:1.55; color:var(--body); }
.st-context p { line-height:1.65; color:var(--body); margin:0 0 12px; }
.st-context p:last-child { margin-bottom:0; }
.st-context dl { margin:0; display:grid; grid-template-columns:max-content 1fr; gap:8px 18px; }
.st-context dt { font-family:var(--serif); font-weight:600; color:var(--ink); }
.st-context dd { margin:0; line-height:1.55; color:var(--body); }
.st-context ol { margin:0; padding-left:22px; display:grid; gap:8px; line-height:1.55; color:var(--body); }
@media (max-width:640px) { .st-context dl { grid-template-columns:1fr; gap:2px; } .st-context dd { margin-bottom:8px; } }

/* Greek texts: Lora has no Greek letters, so they fall through to Noto Serif */
body.grc { --serif:'Lora', 'Noto Serif', Georgia, 'Times New Roman', serif; }