@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Newsreader:opsz@6..72&display=swap');
@import url('masthead.css');
/* ============================================================================
   Shared editorial theme — loaded FIRST on themed pages (immediately after
   theme-boot.js, before tokens.css). Owns every colour token; tokens.css is
   structural only. Dark is the default; light restores parchment; three accents
   (ember / oxblood / verdigris) apply in both themes via data-accent on html.
   ============================================================================ */
:root{
  --paper:#0c0d10;--paper-raised:#15171d;--paper-soft:#111318;--paper-note:#14171d;
  --ink:#f4f2ee;--ink-secondary:#c7c9cf;--muted:#9a9ca3;
  --line:rgba(255,255,255,.11);--line-strong:rgba(255,255,255,.16);
  --bronze:#e2a25c;--bronze-soft:#f2c88d;--focus:#e2a25c;--charcoal:#0a0b0e;
  --on-accent:#14100a;--glow:rgba(226,162,92,.18);
  --emphasis-rule:color-mix(in srgb, var(--bronze) 55%, transparent);
  --emphasis-rule-soft:color-mix(in srgb, var(--bronze) 35%, transparent);
  --link-hover-underline:color-mix(in srgb, var(--bronze) 48%, transparent);
  --wash-ochre-subtle:color-mix(in srgb, var(--bronze) 5%, transparent);
  --focus-ring:var(--focus);
  --link-rest:#b6ac98;
  --link-hover:var(--ink);
  --status-ok:var(--bronze-soft);
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
}
:root[data-theme="light"]{
  --paper:#f5efe3;--paper-raised:#faf8f3;--paper-soft:#f6f4ef;--paper-note:#f0ece4;
  --ink:#171512;--ink-secondary:#3c3832;--muted:#6e665b;--line:#d8cdbb;--line-strong:#cdbfa6;
  --bronze:#8e5e24;--bronze-soft:#c79b58;--focus:#8e5e24;--charcoal:#171715;
  --on-accent:#fff;--glow:rgba(142,94,36,.10);
  --focus-ring:color-mix(in srgb,var(--focus) 70%,var(--ink));
  --link-rest:var(--muted);
  --status-ok:color-mix(in srgb,var(--bronze) 82%,var(--ink));
}
:root:not([data-theme="light"])[data-accent="oxblood"]{--bronze:#d1543f;--bronze-soft:#e8785f;--focus:#d1543f;--glow:rgba(209,84,63,.16)}
:root:not([data-theme="light"])[data-accent="verdigris"]{--bronze:#4bb39a;--bronze-soft:#78d0ba;--focus:#4bb39a;--glow:rgba(75,179,154,.15)}
:root[data-theme="light"][data-accent="oxblood"]{--bronze:#8f2d24;--bronze-soft:#a8382c;--focus:#a8382c;--glow:rgba(143,45,36,.10);--focus-ring:#7a241c;--status-ok:#8f2d24}
:root[data-theme="light"][data-accent="verdigris"]{--bronze:#1f7d6b;--bronze-soft:#17614f;--focus:#1f7d6b;--glow:rgba(31,125,107,.10);--focus-ring:#155a4d;--status-ok:#17614f}
html:not([data-theme="light"]){color-scheme:dark}
/* small scroll offset for anchored/scrolled-to sections (header is not sticky) */
html{scroll-padding-top:24px}
body.edition [id]{scroll-margin-top:24px}

/* --- Threshold (auth / welcome / intake / 404): keep the intentional dark
   family, but move its gold accent onto the shared ember/oxblood/verdigris so
   the whole site shares one accent. These pages stay dark; only the accent
   follows the picker. --- */
:root.threshold{--threshold-bg:#0c0d10;--threshold-panel:#15171d;--threshold-field:#111318;--threshold-line:rgba(255,255,255,.12)}
:root.threshold{--threshold-heading:#e2a25c;--threshold-heading-hover:#f2c88d;--threshold-focus:#e2a25c}
:root.threshold[data-accent="oxblood"]{--threshold-heading:#d1543f;--threshold-heading-hover:#e8785f;--threshold-focus:#d1543f}
:root.threshold[data-accent="verdigris"]{--threshold-heading:#4bb39a;--threshold-heading-hover:#78d0ba;--threshold-focus:#4bb39a}

/* keep the Principles / curriculum reference links from breaking mid-phrase */
.refs{text-wrap:pretty}
.refs a{white-space:nowrap}

/* --- dark fixes for the handful of hard-coded text colours --- */
html:not([data-theme="light"]) .eyebrow{color:var(--muted)}
html:not([data-theme="light"]) .error{color:#e2887b}
/* the editorial "primary" chip was a filled --ink button (light on dark); make it the accent */
html:not([data-theme="light"]) .primary{background:var(--bronze);color:var(--on-accent)!important}
html:not([data-theme="light"]) .primary:hover{background:var(--bronze-soft)}

/* --- dialogue / study surfaces (classroom.css + study.css) in dark --- */
html:not([data-theme="light"]) .empty-state strong{color:var(--ink)}
html:not([data-theme="light"]) .empty-state span{color:var(--muted)}
html:not([data-theme="light"]) .sources{color:var(--muted);border-top-color:var(--line)}
html:not([data-theme="light"]) .source-list a{color:var(--bronze)}
html:not([data-theme="light"]) .source-list a:hover{color:var(--ink)}
html:not([data-theme="light"]) .icon-button{color:var(--muted)}
html:not([data-theme="light"]) .portrait-mark{background:var(--paper-soft);border-color:var(--line-strong);box-shadow:0 1px 4px rgba(0,0,0,.5)}
html:not([data-theme="light"]) .userbubble{border-left-color:color-mix(in srgb,var(--bronze) 45%,transparent)}
html:not([data-theme="light"]) .compose{background:var(--paper-raised);border-color:var(--line-strong)}
html:not([data-theme="light"]) .compose:focus-within{background:var(--paper-raised);border-color:var(--bronze);box-shadow:0 0 0 3px rgba(226,162,92,.16)}
html:not([data-theme="light"]) .compose textarea{color:var(--ink)}
html:not([data-theme="light"]) .compose textarea::placeholder,html:not([data-theme="light"]) .compose input::placeholder{color:var(--muted)}
html:not([data-theme="light"]) .compose button{background:var(--bronze);border-color:transparent;color:var(--on-accent)}
html:not([data-theme="light"]) .compose button:hover{background:var(--bronze-soft);color:var(--on-accent)}
html:not([data-theme="light"]) .compose button:focus-visible{outline-color:var(--bronze);box-shadow:none}
html:not([data-theme="light"]) .userbubble{color:var(--ink-secondary)}
html:not([data-theme="light"]) .teacherbubble{color:var(--ink)}

/* --- homepage footer / legal (dark) --- */
html:not([data-theme="light"]) .motto{color:var(--ink-secondary)}
html:not([data-theme="light"]) .fcol h4{color:var(--muted)}
html:not([data-theme="light"]) .fcol div{color:var(--muted)}
html:not([data-theme="light"]) .fcol div a:hover{color:var(--bronze)}
html:not([data-theme="light"]) .coming-later{color:var(--muted)}
html:not([data-theme="light"]) .disclaimer{color:var(--muted)}
/* --- appearance dock (injected by theme.js) --- */
.rd-dock{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:60;font-family:var(--sans)}
/* collapsed to a small toggle at ALL widths so it never covers content;
   expands on click, closes on outside-click / Escape (theme.js). */
.rd-toggle{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--paper-raised);border:1px solid var(--line-strong);color:var(--ink);cursor:pointer;font-size:19px;line-height:1;box-shadow:0 12px 30px -14px rgba(0,0,0,.55)}
.rd-panel{display:none;position:absolute;right:0;bottom:52px;align-items:center;gap:10px;padding:8px 11px;border-radius:999px;background:var(--paper-raised);border:1px solid var(--line-strong);box-shadow:0 14px 34px -14px rgba(0,0,0,.6)}
.rd-dock.open .rd-panel{display:flex}
.rd-dock.open .rd-toggle{color:var(--bronze);border-color:var(--bronze)}
.rd-dock .rl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.rd-dock .rg{display:flex;align-items:center;gap:5px}
.rd-dock .rs{width:30px;height:30px;border-radius:50%;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center;font-size:14px;line-height:1}
.rd-dock .rs:hover{color:var(--ink)}
.rd-dock .rs[aria-pressed="true"]{background:var(--paper-soft);color:var(--ink);border-color:var(--line)}
.rd-dock .rsep{width:1px;height:20px;background:var(--line)}
.rd-dock .rd{width:20px;height:20px;border-radius:50%;border:0;cursor:pointer;padding:0}
.rd-dock .rd[aria-pressed="true"]{box-shadow:0 0 0 2px var(--paper-raised),0 0 0 4px currentColor}
.rd-dock .rd.ember{background:#e2a25c;color:#e2a25c}
.rd-dock .rd.oxblood{background:#d1543f;color:#d1543f}
.rd-dock .rd.verdigris{background:#4bb39a;color:#4bb39a}
.rd-dock .rs:focus-visible,.rd-dock .rd:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
@media(max-width:520px){.rd-dock .rl{display:none}}
/* clearance so the fixed dock toggle never sits on the last line of content */
body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}

/* --- interior typography: match the homepage (Fraunces display + Newsreader
   reading). --serif is remapped to Newsreader above; the big headings take
   Fraunces here. Applies in both themes for one consistent voice. --- */
body.edition h1,
body.edition h2{font-family:"Fraunces",Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:-.01em}

/* --- Library: render corpus Greek glosses as a quiet italic parenthetical
   instead of a raw "[Greek: …]" parser dump. --- */
.gloss{font-style:italic;color:var(--ink-secondary)}

/* --- Auth continuity: seal + wordmark above the Threshold form, so login/
   signup/reset carry the same identity as the rest of the site. --- */
.threshold .threshold-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 18px;text-decoration:none;color:var(--threshold-text);font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.threshold .threshold-brand img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 33%;filter:grayscale(1) contrast(1.05);flex:none}
.threshold .threshold-brand:hover{color:var(--threshold-heading)}