* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0; background: var(--page); color: var(--ink);
font-family: var(--sans); font-size: 16px; line-height: 1.5;
}
a { color: var(--primary); }
a:hover { color: var(--primary-dark); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* On the dark bars the ring is the light one (owner, Nov 9: blue on the page, yellow kept on the dark bar). */
:is(.topbar, .sat-bar, .wc-banner, .ed-topbar) :focus-visible { outline-color: var(--focus-on-dark); }
.topbar .menu :focus-visible { outline-color: var(--focus); } /* the name menu is a light panel inside the bar */
.visually-hidden {
position: absolute !important; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link { position: absolute; left: -9999px; top: 0; background: #fff; padding: 8px 12px; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; }
/* ---------- Top bar ---------- */
.topbar { background: var(--topbar); color: #fff; }
.topbar-inner {
max-width: 1200px; margin: 0 auto; padding: 14px 24px;
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.brand:hover { color: #fff; }
.brand-name { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.nav { display: flex; flex-wrap: wrap; gap: 4px; }
.nav a { color: #D6DEEB; text-decoration: none; padding: 10px 14px; border-radius: var(--r-1); min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.nav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,0.14); font-weight: 600; }
.totals {
display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: var(--r-1);
color: #D6DEEB; text-decoration: none; font-size: var(--fs-2); background: rgba(255,255,255,0.08); white-space: nowrap;
}
.topbar-end { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.totals:hover { color: #fff; background: rgba(255,255,255,0.14); }
.totals strong { color: #FFD27A; font-weight: 700; }
.totals .t-more { display: inline-flex; gap: 6px; align-items: center; }
.totals .t-sep { opacity: .6; }
@media (max-width: 900px) { .totals .t-more { display: none; } }
.namemenu { position: relative; }
.namebtn {
color: #fff; background: transparent; border: 1px solid rgba(255,255,255,0.4);
border-radius: var(--r-1); padding: 9px 14px; min-height: 44px; cursor: pointer;
}
.namebtn:hover { background: rgba(255,255,255,0.08); }
.menu {
position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 180px;
background: var(--raised); color: var(--ink); border: 1px solid var(--border); border-radius: var(--r-2);
box-shadow: var(--sh-2); padding: 6px;
}
.menu[hidden] { display: none; }
.menu button, .menu a {
display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 12px;
border-radius: var(--r-1); cursor: pointer; min-height: 44px; color: var(--ink); text-decoration: none;
}
.menu button:hover, .menu a:hover { background: var(--soft); }
.menu .menu-note { font-size: var(--fs-1); color: var(--muted); padding: 6px 12px; }
.subbar { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; box-shadow: 0 2px 8px rgba(20,33,61,0.06); }
.subbar-inner {
max-width: 1100px; margin: 0 auto; padding: 12px 24px;
display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
}
.back { text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.q-pager { justify-content: space-between; margin-top: 8px; }
.q-pager .btn { gap: 6px; }
.q-pager [data-fwd] { margin-left: auto; }
.subbar-nav { display: flex; gap: 4px; margin-left: auto; }
.subbar-nav a { text-decoration: none; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: var(--r-1); border: 1px solid var(--border); }
.subbar-nav a:hover { background: var(--soft); }
.subbar-title { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; }
.subbar-title .kicker { font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; }
.subbar-title .name { font-weight: 700; font-size: 18px; }
.demo-banner {
background: #FEF3C7; color: #78350F; font-size: var(--fs-2); text-align: center; padding: 8px 16px;
border-bottom: 1px solid #F5D98B;
}
/* ---------- Layout ---------- */
.page {
max-width: 1200px; margin: 0 auto; padding: 32px 24px 48px;
display: flex; flex-wrap: wrap; gap: 28px; align-items: flex-start;
}
.page.narrow { max-width: 1100px; padding-top: 28px; }
.page.stack { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 20px; }
.col-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.col-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.card {
background: var(--card); border: 1px solid var(--border); border-radius: var(--r-3);
padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.card.big { border-radius: var(--r-3); padding: 32px 40px 36px; gap: 22px; }
.card h2 { margin: 0; font-size: 18px; font-weight: 700; }
.card h3 { margin: 0; font-size: 16px; font-weight: 700; }
.eyebrow { font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.display { margin: 0; font-family: var(--serif); font-size: 40px; font-weight: 600; line-height: 1.1; }
.page-head { display: flex; flex-direction: column; gap: 4px; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-2); }
.tiny { font-size: var(--fs-1); }
p { margin: 0; }
.prose p + p { margin-top: 10px; }
h2.section { margin: 0; font-size: 20px; font-weight: 700; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.row.between { justify-content: space-between; }
.dashed-top { border-top: 1px dashed var(--border); padding-top: 14px; }
ul.plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
ol.numbered { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
/* ---------- Chips ---------- */
.chip {
display: inline-block; font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.04em;
padding: 3px 8px; border-radius: var(--r-1); white-space: nowrap; color: var(--text2); background: var(--track);
}
.chip.upper { text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px; min-width: 64px; text-align: center; }
.chip-mastered { color: var(--right); background: var(--right-bg); }
.chip-due { color: var(--due); background: var(--due-bg); }
.chip-ready { color: var(--info); background: var(--info-bg); }
.chip-learning { color: var(--info); background: var(--info-bg); }
.chip-locked { color: var(--text2); background: var(--track); }
.chip-poem { color: #5B2A86; background: #F1E8FA; }
.chip-done { color: var(--right); background: var(--right-bg); }
.tag-verify { font-size: var(--fs-1); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--due); background: var(--due-bg); padding: 1px 6px; border-radius: 4px; margin-left: 6px; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-weight: 700; color: var(--on-primary); background: var(--primary); border: 1px solid var(--primary);
border-radius: var(--r-2); padding: 10px 18px; min-height: var(--target); cursor: pointer; text-decoration: none;
transition: box-shadow var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: var(--on-primary); }
/* The outlined button: .secondary and .outline are one thing (design-components). */
.btn.secondary, .btn.outline { color: var(--primary); background: var(--card); border-color: color-mix(in srgb, var(--primary) 50%, var(--card)); font-weight: 600; }
.btn.btn-small { padding: 4px 10px; font-size: var(--fs-1); min-height: 32px; margin-left: 8px; vertical-align: middle; text-transform: none; letter-spacing: 0; }
.btn.secondary:hover, .btn.outline:hover { background: var(--soft); color: var(--primary-dark); border-color: var(--primary); }
.btn.good { background: var(--green); border-color: var(--green); }
.btn.good:hover { background: color-mix(in srgb, var(--green) 80%, #000); }
.btn.warn { color: var(--due); background: var(--card); border-color: var(--due-line); font-weight: 600; }
.btn.warn:hover { background: var(--due-bg); }
.btn.danger { color: var(--wrong); background: var(--card); border-color: var(--wrong-line); font-weight: 600; }
.btn.danger:hover { background: var(--wrong-bg); }
.btn.pill { border-radius: 999px; padding: 10px 20px 10px 14px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 1; cursor: not-allowed; background: var(--track); border-color: var(--track); color: var(--muted); box-shadow: none; }
/* Loading: a turning ring and a word ("Saving…"); the button keeps its width. */
.btn[aria-busy="true"] { cursor: progress; }
.btn[aria-busy="true"]::before { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin .8s linear infinite; flex: none; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; color: var(--link); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; font-weight: 600; }
/* ---------- Progress ---------- */
.bar { height: 12px; background: var(--track); border-radius: var(--r-1); overflow: hidden; }
.bar > div { height: 100%; background: var(--primary); border-radius: var(--r-1); }
.bar.thin { height: 8px; border-radius: 4px; }
.bar.thin > div { background: var(--green); border-radius: 0; }
.meter { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.meter span { height: 8px; border-radius: 4px; background: var(--border); }
.meter span.on { background: var(--green); }
/* ---------- Today ---------- */
.task {
background: #fff; border: 1px solid var(--border); border-radius: var(--r-3); padding: 16px 18px;
display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.task-body { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.task-title { font-weight: 700; font-size: 17px; }
.task-detail { font-size: var(--fs-2); color: var(--muted); }
.task-xp { font-size: var(--fs-2); color: var(--text2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.task.done { background: #FAFBFC; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.stats h2 { grid-column: 1 / -1; }
.stat { display: flex; flex-direction: column; }
.stat strong { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stat span { font-size: var(--fs-2); color: var(--muted); }
.week-card .terms { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.week-card .terms li { font-size: var(--fs-1); background: var(--soft); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; }
.reading { font-size: var(--fs-2); }
.reading .label { font-size: var(--fs-1); color: var(--muted); }
.reading .where { color: var(--text2); }
.reading .note { display: block; font-size: var(--fs-1); color: var(--muted); }
/* ---------- Lesson ---------- */
.passage { margin: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--r-3); padding: 24px 28px; }
.passage figcaption { font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.passage p { font-family: var(--serif); font-size: 21px; line-height: 1.6; }
/* Keep the line breaks in poem passages. */
.passage p, .example .ex-passage { white-space: pre-line; }
fieldset.choices { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
fieldset.choices legend { font-weight: 700; font-size: 19px; margin-bottom: 12px; padding: 0; }
.choice {
display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid var(--border);
border-radius: var(--r-2); padding: 14px 16px; min-height: 44px; cursor: pointer;
}
.choice:hover { border-color: var(--border-strong); }
.choice input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--primary); }
.choice.is-correct { background: var(--right-bg); border-color: var(--right-line); box-shadow: inset 0 0 0 1px var(--right-line); }
/* A tick on the right answer, in room kept for it, so nothing reflows. */
.choice { position: relative; }
.choice > span:last-child { margin-right: 18px; }
.choice.is-correct::after { content: '✓'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--right); font-weight: 700; font-size: 18px; }
.choice.is-wrong::after { content: '✗'; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--wrong-line); font-weight: 700; font-size: 18px; }
.choice.is-wrong { background: var(--wrong-bg); border-color: var(--wrong-line); box-shadow: inset 0 0 0 1px var(--wrong-line); }
/* (The second pixel of the marked border is a shadow, so marking an answer
doesn't change its size and nothing below it moves.) */
.choice.answered { cursor: default; }
.feedback { border-radius: var(--r-3); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.feedback .head { font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.feedback.correct { background: var(--right-bg); border: 1px solid var(--right-line); }
.feedback.correct .head { color: var(--right); }
.feedback.wrong { background: var(--wrong-bg); border: 1px solid var(--wrong-line); }
.feedback.wrong .head { color: var(--wrong); }
.feedback .why { color: var(--body); }
.lesson-card p { font-size: var(--fs-2); color: var(--body); }
.example { background: var(--soft); border-radius: var(--r-2); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.example .ex-passage { font-family: var(--serif); font-size: 18px; line-height: 1.55; }
.callout { border-radius: var(--r-3); padding: 18px 20px; background: #E8EFFA; border: 1px solid #C7D7F0; }
/* ---------- Skill map ---------- */
.legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.unit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; align-items: start; }
.unit-col { display: flex; flex-direction: column; gap: 10px; }
.unit-col > header { display: flex; flex-direction: column; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.unit-col h2 { margin: 0; font-size: 17px; font-weight: 700; }
.skill {
background: #fff; border: 1px solid var(--border); border-radius: var(--r-2); padding: 12px 14px;
display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%; color: var(--ink);
text-decoration: none;
}
a.skill:hover { border-color: var(--primary); color: var(--ink); }
.skill.locked { background: #F7F9FB; }
.skill .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.skill .title { font-weight: 700; font-size: 16px; }
.skill.locked .title { color: var(--text2); }
.skill .note { font-size: var(--fs-1); color: var(--muted); }
.skill-readings { display: flex; flex-direction: column; gap: 2px; border-top: 1px dashed var(--border); padding-top: 6px; font-size: var(--fs-1); color: var(--text2); }
.skill-readings .label { font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.skill-readings .reading .note { font-size: var(--fs-1); }
.unit-texts { font-size: var(--fs-1); color: var(--text2); margin-top: 2px; }
/* ---------- Treasury ---------- */
.poem-toggles .small-btn { min-height: 44px; padding: 10px 16px; font-size: inherit; }
.poem-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; }
.recording { display: flex; flex-direction: column; gap: 6px; max-width: 520px; }
.recording[hidden] { display: none; }
.recording audio { width: 100%; }
.about { background: var(--soft); border-radius: var(--r-2); padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; max-width: 68ch; }
.poem-text { font-family: var(--serif); font-size: 23px; line-height: 1.65; display: flex; flex-direction: column; gap: 22px; padding-left: 4px; }
.poem-text .stanza { display: flex; flex-direction: column; }
.poem-text .line { display: block; }
.poem-text.picking .line {
font: inherit; text-align: left; background: transparent; border: 1px dashed transparent; border-radius: var(--r-1);
padding: 0 6px; margin-left: -7px; cursor: pointer; color: var(--ink);
}
.poem-text.picking .line:hover { border-color: var(--border-strong); background: var(--soft); }
.poem-text.picking .line[aria-pressed="true"] { background: #F1E8FA; border-color: #C9A8E6; }
textarea, input[type="text"], input[type="email"], input[type="number"], select {
border: 1px solid var(--field-border); border-radius: var(--r-2); padding: 10px 12px; background: #fff; color: var(--ink);
min-height: var(--target); width: 100%; font: inherit;
}
/* A field with a mistake: the wrong colour's edge and, under it, a sentence that says what to do. */
:is(textarea, input, select)[aria-invalid="true"] { border-color: var(--wrong-line); box-shadow: inset 0 0 0 1px var(--wrong-line); }
.field-error { color: var(--wrong); font-size: var(--fs-2); font-weight: 500; }
.field-error::before { content: '✗ '; }
textarea { resize: vertical; }
blockquote.saved { margin: 0; font-family: var(--serif); font-size: 18px; font-style: italic; border-left: 3px solid var(--border); padding-left: 12px; }
blockquote.saved .src { display: block; font-family: var(--sans); font-style: normal; font-size: var(--fs-1); color: var(--muted); }
.stanza-list li { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-2); }
.status-line { font-size: var(--fs-2); color: var(--muted); min-height: 1.5em; }
/* ---------- Recite ---------- */
.rounds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; font-size: var(--fs-1); font-weight: 600; }
.round-tab {
font: inherit; display: flex; flex-direction: column; gap: 6px; color: var(--muted); text-align: left;
background: transparent; border: 0; border-radius: var(--r-1); padding: 4px 4px 8px; min-height: 44px; cursor: pointer;
}
.round-tab:hover { background: var(--soft); }
.round-tab .bar { height: 6px; border-radius: 3px; background: var(--border); }
.round-tab.done { color: var(--right); }
.round-tab.done .bar { background: var(--green); }
.round-tab.now { color: var(--ink); background: #E8EFFA; }
.round-tab.now .bar { background: var(--primary); }
.stanza-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.stanza-tab {
display: flex; flex-direction: column; min-height: 44px; justify-content: center; padding: 6px 14px;
border: 1px solid var(--border-strong); border-radius: var(--r-2); background: #fff; color: var(--ink); text-decoration: none;
}
.stanza-tab .name { font-weight: 700; font-size: var(--fs-2); }
.stanza-tab .state { font-size: var(--fs-1); color: var(--muted); }
.stanza-tab:hover { border-color: var(--primary); color: var(--ink); }
.stanza-tab.now { border: 2px solid var(--primary); padding: 5px 13px; background: #E8EFFA; }
@media (max-width: 560px) {
.rounds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.recite-lines { font-family: var(--serif); font-size: 26px; line-height: 1.6; display: flex; flex-direction: column; gap: 4px; }
.recite-lines .gap { height: 14px; }
.rline {
font: inherit; color: var(--ink); text-align: left; background: transparent;
border: 1px dashed var(--border-strong); border-radius: var(--r-2); padding: 6px 12px; cursor: pointer; letter-spacing: 0.02em;
}
.rline.shown { background: var(--right-bg); border: 1px solid var(--right-line); letter-spacing: 0; }
.rline.plain { border-color: transparent; cursor: default; }
.rline.hidden-line { color: var(--muted); font-family: var(--sans); font-size: 16px; }
/* ---------- Teacher ---------- */
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
table.data th, table.data td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
table.data th { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; max-width: 100%; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; align-items: end; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: var(--fs-2); font-weight: 600; color: var(--text2); }
.field-hint { font-size: var(--fs-1); color: var(--muted); }
.error { color: var(--wrong); font-size: var(--fs-2); }
:is(p, div, span).error:not(:empty):not([hidden])::before { content: '✗ '; } /* a written error carries a mark, not colour alone */
.ok { color: var(--right); font-size: var(--fs-2); }
.student-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); }
.student-row:last-child { border-bottom: 0; }
.mini-map { display: flex; flex-direction: column; gap: 6px; }
.mini-map .item { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-2); }
dialog { border: 1px solid var(--border); border-radius: var(--r-3); padding: 22px; max-width: min(520px, calc(100vw - 32px)); color: var(--ink); background: var(--raised); box-shadow: var(--sh-3); }
dialog::backdrop { background: rgba(20,33,61,0.4); }
/* ---------- Sign-in ---------- */
.center-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.signin-card { max-width: 460px; width: 100%; text-align: center; align-items: center; padding: 36px 32px; gap: 16px; }
.google-btn { background: #fff; color: #1F1F1F; border: 1px solid #747775; font-weight: 600; }
.google-btn:hover { background: #F8FAFF; color: #1F1F1F; border-color: #747775; }
@media (max-width: 640px) {
.topbar-inner, .subbar-inner { padding: 10px 16px; }
.subbar-nav { order: 1; }
.subbar-title { order: 2; flex-basis: 100%; }
.subbar-nav a { padding: 0 10px; }
.page { padding: 20px 16px 40px; gap: 20px; }
.card { padding: 16px; }
.card.big { padding: 22px 18px 24px; }
.display { font-size: 32px; }
.poem-text { font-size: 20px; }
.recite-lines { font-size: 21px; }
.passage { padding: 18px; }
.passage p { font-size: 19px; }
.rounds { font-size: var(--fs-1); }
.nav a { padding: 8px 10px; }
}
[tabindex="-1"]:focus { outline: none; }
/* Wrapped poem lines get a hanging indent, as in print. */
.poem-text .line { padding-left: 1.4em; text-indent: -1.4em; }
.poem-text.picking .line { padding-left: calc(1.4em + 6px); }
/* ---------- Readings with in-app texts (English 2 Free) ---------- */
.read-link { font-weight: 600; white-space: nowrap; }
.text-soon { font-size: var(--fs-1); font-weight: 600; color: var(--muted); white-space: nowrap; }
.skill-stretch { position: relative; }
.skill-stretch:hover, .skill-stretch:focus-within { border-color: var(--primary); }
.skill-link::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-2); }
.skill-link:focus-visible { outline: none; }
.skill-link:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 2px; }
.skill-stretch .read-link { position: relative; z-index: 1; }
/* ---------- Reader ---------- */
.reader { max-width: 760px; margin: 0 auto; padding: 32px 24px 64px; display: flex; flex-direction: column; gap: 24px; }
.reader-head { display: flex; flex-direction: column; gap: 6px; }
.reader-head .byline { color: var(--text2); font-size: 17px; }
.reader-text { font-family: var(--serif); font-size: 21px; line-height: 1.65; color: var(--body); max-width: 66ch; }
.reader-text h2 { font-family: var(--serif); font-size: 26px; font-weight: 600; margin: 0 0 18px; color: var(--ink); }
.reader-text p { margin: 0 0 1em; }
.reader-text p.lines { white-space: pre-line; }
.chapters summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.chapters ul { list-style: none; margin: 4px 0 0; padding: 0 0 0 4px; display: flex; flex-direction: column; gap: 2px; }
.chapters a { display: block; padding: 8px 0; }
.chapters a[aria-current] { font-weight: 700; color: var(--ink); }
.chapter-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid var(--border); padding-top: 20px; }
.chapter-nav .next { margin-left: auto; }
@media (max-width: 640px) {
.reader { padding: 20px 16px 48px; }
.reader-text { font-size: 19px; }
}
/* ---------- Writing ---------- */
.prompt, .pre { white-space: pre-line; }
.prompt { font-family: var(--serif); font-size: 19px; line-height: 1.5; }
.writing-box { font-family: var(--serif); font-size: 19px; line-height: 1.6; padding: 14px 16px; min-height: 140px; }
textarea#w-text { min-height: 50vh; }
.writing-box[readonly] { background: var(--soft); color: var(--body); }
.writing-foot { border-top: 1px dashed var(--border); padding-top: 10px; }
.writing-foot .status-line { min-height: 0; }
.warn-text { color: var(--due); }
.writing-list .student-row { padding: 10px 0; }
.callout.returned { background: #FFFBEB; border-color: #F5D98B; }
.submitted-text { white-space: pre-wrap; font-family: var(--serif); font-size: 18px; line-height: 1.6; overflow-wrap: anywhere; }
.answer-block { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--border); padding-top: 10px; }
.answer-block h3 { font-size: var(--fs-2); }
fieldset.rubric-row { margin: 0; padding: 0 0 10px; border: 0; border-bottom: 1px solid var(--border); min-width: 0; }
fieldset.rubric-row legend { padding: 0; margin-bottom: 6px; display: flex; flex-direction: column; gap: 2px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { position: relative; }
.pill input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pill input + span {
display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px;
border: 1px solid var(--border-strong); border-radius: var(--r-2); background: #fff; font-weight: 700;
}
.pill.wide input + span { min-width: 120px; }
.pill input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.pill input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Claude feedback: coaching panel and suggested scores. */
.coach-panel { border-left: 4px solid #7C5CBF; }
.coach-entry { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border); padding-top: 10px; }
.coach-entry .pre { margin: 0; overflow-wrap: anywhere; }
.coach-earlier summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--primary); }
.coach-earlier .coach-entry { margin-top: 8px; }
.suggest-box { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.suggest-box .status-line { min-height: 0; }
.callout.suggest-note { background: #F3EFFB; border-color: #D6CAF0; padding: 12px 14px; font-size: var(--fs-2); }
.suggest-reason { margin: 6px 0 0; color: #4C3A80; overflow-wrap: anywhere; }
fieldset.suggested .pill input:checked + span { background: #5B3FA0; border-color: #5B3FA0; }
textarea.suggested { border-color: #9C85D6; }
/* The tutor ("Talk it over"): a column beside the writing on a laptop,
below it at phone width. */
.writing-editor { max-width: 900px; padding-top: 28px; }
.writing-editor.has-tutor { max-width: 1280px; }
.tutor-col { flex: 1 1 380px; position: sticky; top: 96px; }
.tutor-col[hidden], .notice-tutor[hidden] { display: none; }
.tutor-panel { border-left: 4px solid #2F6F8F; }
.tutor-head h2 { font-family: var(--serif); font-size: 21px; font-weight: 600; }
.tutor-thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tutor-panel .tutor-thread { max-height: min(56vh, 560px); overflow-y: auto; padding: 2px 4px 2px 0; }
.tutor-thread:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.msg { border-radius: var(--r-2); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; max-width: 94%; }
.msg p { margin: 0; overflow-wrap: anywhere; color: var(--ink); }
.msg-who { font-size: var(--fs-1); font-weight: 700; color: #1F4E66; }
.msg-at { font-weight: 400; color: var(--muted); }
.msg-tutor { background: #EEF5F8; border: 1px solid #CFE0E8; align-self: flex-start; }
.msg-student { background: #F1F4FA; border: 1px solid #D5DDEB; align-self: flex-end; }
.msg-student .msg-who { color: #163A73; }
.msg-wait { background: #EEF5F8; border: 1px solid #CFE0E8; align-self: flex-start; }
.msg-wait p { color: var(--muted); font-style: italic; }
.tutor-form { display: flex; flex-direction: column; gap: 6px; }
.tutor-form textarea { width: 100%; }
.tutor-log-wrap { flex-basis: 100%; }
.tutor-log summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--primary); font-weight: 600; font-size: var(--fs-2); }
.tutor-log .tutor-thread { margin: 4px 0 8px; }
.tutor-class { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--border); padding-top: 10px; }
.tutor-class h3 { font-size: var(--fs-2); }
.task-readings h2 { font-size: var(--fs-1); font-weight: 600; }
.task-readings .read-link { margin-left: 4px; }
@media (max-width: 960px) {
.tutor-col { position: static; }
.tutor-panel .tutor-thread { max-height: none; }
}
/* Print: only the print sheet (title, student, date, text, grade, comments). */
.print-sheet { display: none; }
@media print {
body { background: #fff; }
.topbar, .subbar, .demo-banner, .skip-link, main > :not(.print-sheet) { display: none !important; }
main { display: block !important; padding: 0 !important; max-width: none !important; }
.print-sheet { display: block; color: #000; font-family: Georgia, 'Newsreader', serif; font-size: 12pt; line-height: 1.6; }
.print-sheet h1 { font-size: 18pt; margin: 0 0 4pt; }
.print-sheet h2 { font-size: 13pt; margin: 18pt 0 4pt; }
.print-sheet h3 { font-size: 12pt; margin: 12pt 0 2pt; }
.print-sheet .ps-meta { font-family: Arial, sans-serif; font-size: 10pt; color: #333; margin-bottom: 10pt; }
.print-sheet .ps-prompt { font-style: italic; margin-bottom: 12pt; white-space: pre-line; }
.print-sheet .ps-text { white-space: pre-wrap; margin: 0 0 8pt; }
.print-sheet .ps-grade { border-top: 1px solid #000; margin-top: 18pt; }
}
/* ---------- Library ---------- */
.shelf { display: flex; flex-direction: column; gap: 10px; }
.shelf-head { display: flex; flex-direction: column; gap: 2px; }
.shelf h2 { margin: 0; font-size: 21px; font-weight: 700; font-family: var(--serif); }
.shelf-row {
list-style: none; margin: 0; padding: 2px 2px 10px; display: grid; grid-auto-flow: column;
grid-auto-columns: minmax(230px, 260px); gap: 12px; overflow-x: auto; scroll-snap-type: x proximity;
}
.shelf-row > li { scroll-snap-align: start; display: flex; min-width: 0; }
.shelf-row.wrap { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); overflow: visible; }
.work-card {
flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--border);
border-radius: var(--r-3); padding: 14px 16px; color: var(--ink); text-decoration: none;
}
a.work-card:hover { border-color: var(--primary); color: var(--ink); }
.work-card.book { background: var(--soft); }
.wc-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; align-items: center; }
.wc-kind { font-size: var(--fs-1); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.wc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.wc-title { font-family: var(--serif); font-size: 20px; font-weight: 600; line-height: 1.25; }
.wc-by { font-size: var(--fs-2); color: var(--text2); }
.wc-why { font-size: var(--fs-2); color: var(--primary-dark); font-weight: 600; }
.wc-where { font-size: var(--fs-1); color: var(--text2); }
.wc-hook { font-family: var(--serif); font-style: italic; font-size: var(--fs-2); color: var(--body); border-top: 1px dashed var(--border); padding-top: 6px; margin-top: auto; }
.fold:not(.open) .shelf-row { grid-auto-flow: column; overflow-x: auto; }
.fold.open .shelf-row { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); overflow: visible; }
.shelf-extra { border-top: 1px solid var(--border); padding-top: 18px; }
.week-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 6px 16px; }
.week-list a { display: flex; gap: 8px; min-height: 44px; align-items: center; text-decoration: none; padding: 4px 8px; border-radius: var(--r-2); }
.week-list a:hover { background: #fff; }
.week-list a[aria-current] { background: #E8EFFA; font-weight: 700; }
.week-list .wk-n { font-weight: 700; white-space: nowrap; min-width: 66px; color: var(--ink); }
.week-list .wk-t { color: var(--text2); }
.go-on { gap: 14px; }
.arrival { background: #FFF8E6; border: 1px solid #F1DDA6; border-radius: var(--r-2); padding: 10px 14px; color: #5B4300; }
.arrival a { color: #6B3E00; }
.tools-at-work li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tool-name { font-weight: 700; }
.serif-title { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.poem-day .poem-hook { margin: 0; font-family: var(--serif); font-size: 21px; line-height: 1.55; display: flex; flex-direction: column; border-left: 3px solid #E8D8B0; padding-left: 14px; }
.keep-up .ku-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.keep-up .ku-row:first-child { border-top: 0; padding-top: 0; }
.goal-small { gap: 8px; }
.trail { gap: 10px; }
.trail-step { font-size: var(--fs-2); line-height: 1.5; }
.record { display: flex; flex-direction: column; gap: 8px; }
.record h3 { margin-top: 6px; }
.poem-list li { line-height: 1.6; }
/* ---------- Tastes and marks ---------- */
.taste { display: flex; flex-direction: column; gap: 16px; }
.taste-intro { border-radius: var(--r-3); background: #FBF6EA; border: 1px solid #EEE2C4; }
.taste-intro > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 18px; }
.taste-intro > summary::-webkit-details-marker { display: none; }
.taste-intro > summary::before { content: '▸'; color: #8A6B2E; transition: transform .15s; }
.taste-intro[open] > summary::before { transform: rotate(90deg); }
.taste-intro > summary h2 { margin: 0; color: #8A6B2E; }
.taste-intro .taste-lead { margin: 0; padding: 0 18px 16px; color: #4A3B1F; font-style: italic; font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif; }
.subbar-meta { font-size: var(--fs-2); font-weight: 400; color: var(--muted); margin-left: 10px; white-space: normal; }
.subbar-meta [data-read-pct] { font-weight: 700; color: #2457A6; font-variant-numeric: tabular-nums; }
.taste-lead { font-family: var(--serif); font-size: 20px; line-height: 1.55; color: var(--ink); max-width: 66ch; }
.reader-text.excerpt { border-left: 3px solid #E8D8B0; padding-left: 18px; }
.excerpt-where { font-family: var(--sans); }
mark.famous { background: none; cursor: text; color: inherit; }
.glosses-on mark.famous { background: #FBEFCB; color: inherit; border-radius: 3px; padding: 0 1px; cursor: pointer; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.glosses-on mark.famous:hover, .glosses-on mark.famous[aria-expanded="true"] { background: #F6DF9C; }
/* A famous line's ❦ button: opens its note from the keyboard or a screen reader
(the line itself is clicked with the mouse). Shown with the glosses. */
.famous-btn { display: none; }
.glosses-on .famous-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; margin: 0 1px; padding: 0 3px; vertical-align: baseline; border: 0; border-radius: var(--r-1); background: transparent; color: #7A5B00; font: inherit; font-size: .85em; line-height: 1; cursor: pointer; }
.glosses-on .famous-btn:hover, .glosses-on .famous-btn[aria-expanded="true"] { background: #F6DF9C; }
html.quill .glosses-on .famous-btn, html.lamplight .glosses-on .famous-btn { color: inherit; } /* the page's own text colour: Quill's reader is dark in places */
html.quill .glosses-on .famous-btn:is(:hover, [aria-expanded="true"]), html.lamplight .glosses-on .famous-btn:is(:hover, [aria-expanded="true"]) { background: none; text-decoration: underline; }
/* Devices are marked with the glosses: when Glosses are off, the text is clean. */
.glosses-on .device { text-decoration: underline dotted #7A5B00; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.glosses-on .device:hover, .glosses-on .device[aria-expanded="true"] { background: #F3EDE0; }
.mark-note {
font-family: var(--sans); font-size: var(--fs-2); line-height: 1.5; color: var(--body); background: #FFFBEF;
border: 1px solid #EBD9A6; border-radius: var(--r-2); padding: 10px 14px; margin: -0.4em 0 1em;
}
.poem-text .mark-note { margin: 4px 0 8px; }
.mark-note.in-para { margin: 6px 0 8px; font-style: normal; font-weight: 400; white-space: normal; }
.mn-kind { font-weight: 700; color: #6B4A00; margin-right: 4px; }
.famous-list blockquote.saved { white-space: pre-line; }
.about-fold summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--primary); }
.about-fold p { max-width: 66ch; }
.reader-tools { gap: 16px; }
.finish-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.reader-text.picking p { cursor: default; }
.sentence {
font: inherit; color: inherit; background: transparent; border: 1px dashed transparent; border-radius: var(--r-1);
padding: 0 2px; text-align: left; cursor: pointer; display: inline;
}
.sentence:hover { border-color: var(--border-strong); background: var(--soft); }
.sentence[aria-pressed="true"] { background: #F1E8FA; border-color: #C9A8E6; }
.save-sheet { position: sticky; bottom: 12px; box-shadow: 0 8px 24px rgba(20,33,61,0.18); }
/* Poem page: rhyme letters in the margin and scansion under the line. */
.poem-toggles .btn[aria-pressed="true"] { background: #E8EFFA; border-color: var(--primary); }
.poem-text .line-wrap { display: block; position: relative; }
.rhyme-letter { display: none; }
.show-rhyme .rhyme-letter {
display: inline-block; position: absolute; left: -1.6em; width: 1.2em; text-align: right;
font-family: var(--sans); font-size: var(--fs-2); font-weight: 700; color: #8A5A00; top: 0.35em;
}
.show-rhyme .rhyme-letter.unrhymed { color: var(--muted); font-weight: 400; }
.show-rhyme { padding-left: 1.9em; }
.scan-line { display: none; }
.show-scan .scan-line {
display: table; font-family: var(--sans); font-size: var(--fs-2); letter-spacing: 0.02em; color: #14532D;
background: #E3F5EA; border-left: 3px solid #2F8F6B; border-radius: 0 6px 6px 0; padding: 2px 10px; margin: 2px 0 6px 1.4em;
}
.show-scan .scan-line strong { color: #0B3D24; }
.meter-key { font-weight: 400; }
[data-meter]:not([hidden]) { color: #14532D; background: #E3F5EA; border-radius: var(--r-2); padding: 4px 10px; font-weight: 600; }
@media (max-width: 640px) {
.shelf-row { grid-auto-columns: minmax(210px, 78%); }
.taste-lead { font-size: 18px; }
}
/* ---------- Classes menu ---------- */
.classmenu .menu { left: 0; right: auto; min-width: 270px; max-width: calc(100vw - 32px); max-height: 70vh; overflow-y: auto; }
@media (max-width: 640px) { .classmenu .menu { left: auto; right: 0; } }
.classmenu .menu a[aria-current] { font-weight: 700; background: var(--soft); }
.classmenu .menu .chip { margin-left: 6px; }
/* ---------- About card, glosses, sections ---------- */
.about-card { background: var(--soft); border-radius: var(--r-2); padding: 4px 18px; max-width: 70ch; }
.about-card > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.about-card .about-body { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 14px; }
.about-card .great { font-size: 17px; line-height: 1.5; color: var(--ink); }
.about-card .about-text { color: var(--body); }
.gloss { text-decoration: none; }
.glosses-on .gloss { text-decoration: underline dotted #9AA7B8; text-decoration-thickness: 1px; text-underline-offset: 5px; cursor: help; }
.glosses-on .gloss:hover, .glosses-on .gloss[aria-expanded="true"] { background: #EEF2F7; }
.small-btn { min-height: 36px; padding: 6px 12px; font-size: var(--fs-2); }
@media (pointer: coarse) { .small-btn, .btn.btn-small { min-height: var(--target); } }
[data-gloss-toggle][aria-pressed="true"] { background: #E8EFFA; border-color: var(--primary); }
.lengths { color: var(--text2); }
.toc { margin: 4px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 2px; }
.toc li { padding: 2px 0; }
.toc a, .toc .linkbtn { display: inline-block; padding: 6px 0; text-align: left; text-decoration: none; font-weight: 500; }
.sec-sub { font-weight: 400; }
.sec-sub.ours { color: var(--muted); font-style: italic; margin-left: 0.5em; }
.sec-sub.ours::before { content: '· '; font-style: normal; }
.sec-toggle { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; display: inline-flex; gap: 8px; align-items: baseline; }
.sec-toggle::after { content: '▾'; font-size: 0.6em; color: var(--muted); }
.sec-toggle[aria-expanded="false"]::after { content: '▸'; }
.landed { background: #FBEFCB; border-radius: 4px; transition: background 2s; }
.skill-actions { position: relative; z-index: 1; display: flex; gap: 14px; font-size: var(--fs-2); font-weight: 600; padding-top: 2px; }
.skill-actions a { min-height: 32px; display: inline-flex; align-items: center; }
.passage mark.focus { cursor: default; }
.passage-source { display: block; margin-top: 10px; color: var(--muted); font-family: var(--sans); }
.activity-row { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--border); padding-top: 8px; }
.activity-row:first-child { border-top: 0; padding-top: 0; }
.tracks-h { font-family: var(--serif); font-size: 26px; margin-top: 10px; }
/* The Treasury's home: a placard for every poem. */
ul.placards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.placard {
display: flex; flex-direction: column; gap: 6px; height: 100%; box-sizing: border-box; text-decoration: none;
background: #FFFBEF; color: var(--ink); border: 1px solid #EBD9A6; border-top: 5px solid #B8862B; border-radius: var(--r-3); padding: 16px 18px;
}
.placard:hover { background: #FFF5DA; color: var(--ink); }
.placard.is-today { border-color: #B8862B; box-shadow: 0 0 0 2px #B8862B inset; }
.pl-title { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.2; }
.pl-line { font-family: var(--serif); font-style: italic; font-size: 16px; color: #5B4A1E; line-height: 1.4; }
.pl-by { font-size: var(--fs-1); color: var(--muted); margin-top: auto; }
.pl-chips { display: flex; flex-wrap: wrap; gap: 4px; }
/* The page header stays at the top while scrolling, so anything scrolled to
("Keep reading from here", the contents, a landed line) stops below it. */
/* (Headings scrolled to land below the bar: html scroll-padding-top, from --head-h.) */
/* The whole Library: a row of buttons, one per shelf. */
.shelf-chips { gap: 8px; flex-wrap: wrap; }
.shelf-chips .chip-count { font-size: var(--fs-1); font-weight: 600; color: var(--muted); margin-left: 2px; }
.work-card[hidden], section.shelf[hidden] { display: none; }
.shelf-chips .btn[aria-pressed="true"] { background: #E8EEF9; border-color: #2457A6; }
.menu a.menu-head { font-size: var(--fs-1); color: var(--muted); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.menu a.menu-head:hover { color: var(--ink, #14213D); }
.menu .menu-note-inline { display: block; font-size: var(--fs-1); color: var(--muted); }
ul.plain.treasury-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.treasury-grid .treasury-card { display: flex; flex-direction: column; gap: 2px; }
.treasury-grid .chip { align-self: flex-start; margin-top: 8px; }
.treasury-sub { font-family: var(--serif, Georgia, serif); font-style: italic; color: var(--muted); margin: 2px 0 0; }
ul.plain.track-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
[data-grouping][hidden] { display: none; }
.lib-nav .btn[aria-current="page"] { background: var(--ink, #14213D); color: #FFFFFF; border-color: var(--ink, #14213D); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-sub { font-family: var(--serif); font-style: italic; font-size: var(--fs-1); color: #C9D3E6; }
@media (max-width: 720px) { .brand-sub { display: none; } }
.lib-welcome { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--muted); margin: 6px 0 0; max-width: 62ch; }
/* A full-width title row above a page's columns: the title, and the Library buttons beside it. */
.page-top { flex: 1 1 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
/* ---------- Lamplight (name menu): the same app, a century earlier ----------
Warm parchment and walnut instead of cool grey and navy, oxblood links,
a book serif for the text, old-style figures. Only colours and type change. */
/* (Lamplight's token values are in css/tokens.css.) */
html.lamplight body {
background: radial-gradient(ellipse at 50% -10%, #FBF3E2 0%, #EFE6D3 45%, #E5D8BD 100%) fixed;
font-size: 17px; font-variant-numeric: oldstyle-nums;
}
html.lamplight .topbar { background: linear-gradient(#2B1D14, #24180F); border-bottom: 2px solid #8A6B2E; }
html.lamplight .nav a, html.lamplight .totals { color: #E9DBBF; }
html.lamplight .brand-sub { color: #D9C49A; }
html.lamplight .menu, html.lamplight .subbar, html.lamplight .task, html.lamplight .choice,
html.lamplight .skill, html.lamplight .passage, html.lamplight .work-card, html.lamplight .stanza-tab,
html.lamplight .pill input + span, html.lamplight textarea, html.lamplight input[type="text"],
html.lamplight input[type="email"], html.lamplight input[type="number"], html.lamplight select,
html.lamplight .btn.secondary, html.lamplight .btn.outline, html.lamplight .btn.warn, html.lamplight .btn.danger,
html.lamplight .week-list a:hover { background: var(--card); }
html.lamplight .card, html.lamplight .work-card, html.lamplight .task { box-shadow: 0 1px 0 rgba(90,60,20,0.06), 0 6px 18px rgba(90,60,20,0.06); }
html.lamplight .display, html.lamplight h1, html.lamplight h2 { letter-spacing: 0.005em; }
html.lamplight .eyebrow { color: #7A4E0C; }
html.lamplight .lib-nav .btn[aria-current="page"] { background: #2B1D14; border-color: #2B1D14; color: #F6E7C1; }
/* The SAT test's dark bar keeps its outline buttons clear (Lamplight's cream fill above made them white on cream). */
html.lamplight .sat-bar .btn.outline { background: transparent; }
/* ---------- Quill & Ink (name menu): darker and more archaic than Lamplight ----------
Candlelit stone, vellum cards with a double gold rule, wax-seal red, tarnished
gold lettering, the Fell types (1670s). Our own look. One theme at a time.
Contrast (quill-contrast, Nov 9): the page is dark stone, so the shared colour
tokens here are light inks (tarnished gold, pale vellum). Every vellum surface
below sets the dark inks again, so text takes the right colour for whatever it
sits on. Red is a fill (the seal buttons) behind light text; where red must be
text on stone it is the lighter vermilion --rubric. Every pair passes WCAG AA. */
/* (Quill & Ink's token values, on the stone and on vellum, are in css/tokens.css.) */
/* ...and their text takes the dark ink, at no weight, so a component's own colour still wins. */
:where(html.quill) :where(
.about, .about-card, .academy-schools li, .alpha-card, .an-box, .an-figure, .an-node, .an-tree, .anchor-card,
.anchor-hl, .arrival, .audio-bar, .book-divider, .btn.danger, .btn.danger:hover, .btn.warn, .btn.warn:hover,
.callout, .callout.returned, .callout.suggest-note, .card, .ch-tile:hover, .chip, .chip-done, .chip-due,
.chip-learning, .chip-locked, .chip-mastered, .chip-poem, .chip-ready, .choice, .choice.is-correct,
.choice.is-wrong, .classmenu .menu a[aria-current], .conc input[type="search"], .copybook,
.corner-choice.corner-right, .corner-choice.corner-right[disabled], .corner-choice.corner-wrong,
.corner-choice.corner-wrong[disabled], .corner-form input, .corner-form select, .corner-form textarea,
.corner-tabs a, .corner-trial, .demo-banner, .desk-class, .dg-answer, .dg-box, .dg-build, .dg-chip,
.dg-chip:hover, .dg-paper-list, .dg-s:focus-visible, .dg-s:hover, .dg-sentence, .dj-q, .ed-add input,
.ed-add select, .ed-addsec:hover, .ed-choice.right, .ed-diff > div, .ed-draft, .ed-form input[type="search"],
.ed-form input[type="text"], .ed-form select, .ed-form textarea, .ed-iconbtn, .ed-just, .ed-main .field input,
.ed-main .field select, .ed-main .field textarea, .ed-merged, .ed-nav, .ed-nav a, .ed-nav a:hover,
.ed-nav a[aria-current="page"], .ed-passage, .ed-passage .ed-focus, .ed-pick, .ed-pill-draft, .ed-pill-live,
.ed-published, .ed-results, .ed-search input, .ed-search-row input, .ed-section,
.ed-section .ed-section-title:focus, .ed-section .ed-section-title:hover, .ed-section-title:focus,
.ed-section-title:hover, .ed-start-row input, .ed-startpill.on, .ed-text .ed-active, .ed-text .ed-new,
.ed-try-choice, .ed-try-passage .focus-mark, .ed-try-right, .ed-try-wrong, .ed-warning, .ed-withdrawn,
.ed-work, .ed-works.ed-over, .example, .fc-card, .fc-card:hover, .feast.next, .feedback, .feedback.correct,
.feedback.neutral, .feedback.wrong, .fold-card, .gal-frame, .gal-player, .glosses-on .device:hover,
.glosses-on .device[aria-expanded="true"], .glosses-on .gloss:hover, .glosses-on .gloss[aria-expanded="true"],
.glosses-on mark.famous, .glosses-on mark.famous:hover, .glosses-on mark.famous[aria-expanded="true"],
.google-btn, .google-btn:hover, .hl-note, .honours-bar, .idea-kind-mock, .idea-kind-stub, .idea-kind-text,
.idea-kind-working, .idea-status, .landed, .lib-filter, .lib-search input, .mark-note, .menu, .menu a:hover,
.menu button:hover, .menu details.menu-more > summary:hover, .mnote, .mnote-device, .mnote-famous,
.msg-student, .msg-tutor, .msg-wait, .owe-card, .passage, .pick, .pick:hover, .pick[aria-pressed="true"],
.pill input + span, .placard, .placard:hover, .poem-text.picking .line:hover,
.poem-text.picking .line[aria-pressed="true"], .poem-toggles .btn[aria-pressed="true"], .programme, .q-box,
.rline.shown, .round-tab.now, .round-tab:hover, .rung, .rung-card, .rung.start, .sat-cross, .sat-data,
.sat-foot, .sat-nav button, .sat-nav button.done, .sat-navbox, .sat-table thead th, .sentence:hover,
.sentence[aria-pressed="true"], .shelf-btn:hover, .show-scan .scan-line, .skill, .skill.locked, .skip-link,
.so-far, .stanza-tab, .stanza-tab.now, .strand-card, .subbar-nav a:hover, .tag-verify, .task, .task.done,
.taste, .taste-intro, .ten-book, .thesis-box textarea, .title-page, .vocab-chip, .week-card .terms li,
.week-list a:hover, .week-list a[aria-current], .why-panel, .work-card, .work-card.book,
.writing-box[readonly], .ws-col, .ws-grid th, .ws-note, .xq-feedback, .xq-focus-el, .yard-choice,
.yard-choice.own, .yard-choice:has(input:checked), .yard-game.coming, .yard-reason textarea,
[data-gloss-toggle][aria-pressed="true"], [data-meter]:not([hidden]),
[data-middle-school][aria-pressed="true"], input, input[type="email"], input[type="number"],
input[type="text"], select, textarea) { color: var(--body); }
html.quill body {
background: radial-gradient(ellipse at 50% 0%, #3A3024 0%, #221C15 40%, #120F0B 100%) fixed;
color: var(--body); font-size: 18px; font-variant-numeric: oldstyle-nums;
}
html.quill .topbar { background: linear-gradient(#0E0C09, #17130E); border-bottom: 1px solid #B08D3C; box-shadow: 0 3px 0 #0E0C09, 0 4px 0 #B08D3C; }
html.quill .brand-name { font-family: 'IM Fell English SC', serif; letter-spacing: .02em; color: #E9D29A; font-size: 25px; }
html.quill .brand-sub { color: #B9A06A; font-family: 'IM Fell English', serif; }
html.quill .nav a, html.quill .totals { color: #DCC79A; font-family: 'IM Fell English', serif; font-size: 18px; }
html.quill .nav a[aria-current="page"] { background: rgba(176,141,60,.18); color: #F2DFA6; }
html.quill .totals strong { color: #E9C46A; }
html.quill .namebtn, html.quill .classbtn, html.quill [data-class-toggle] { border-color: #8E7340 !important; color: #E9D29A !important; }
html.quill .page-head h1, html.quill .display { font-family: 'IM Fell English SC', serif; font-weight: 400; color: #F0DFAF; text-shadow: 0 1px 0 #000, 0 0 18px rgba(233,196,106,.18); letter-spacing: .01em; }
html.quill .page-head .eyebrow { color: #C9A85C; font-family: 'IM Fell English SC', serif; letter-spacing: .14em; }
html.quill .page-head p, html.quill .lib-welcome { color: #D8C59A; }
html.quill .card, html.quill .task, html.quill .work-card, html.quill .passage, html.quill .skill, html.quill .choice, html.quill .menu {
background: radial-gradient(ellipse at 30% 20%, #F5EBD2 0%, #EADBB8 60%, #DCC79A 100%);
border: 1px solid #8E7340; box-shadow: inset 0 0 0 3px #EFE3C6, inset 0 0 0 4px #B89B62, inset 0 0 40px rgba(120,80,20,.25), 0 10px 26px rgba(0,0,0,.55);
color: var(--body);
}
html.quill .card h2, html.quill .card .display, html.quill .work-card h3, html.quill .card h3 { font-family: 'IM Fell English SC', serif; font-weight: 400; color: #3B1F0E; text-shadow: none; }
html.quill .card .eyebrow, html.quill .eyebrow { color: var(--rubric); font-family: 'IM Fell English SC', serif; letter-spacing: .12em; }
html.quill .poem-day h2::first-letter, html.quill .card .display::first-letter { color: var(--rubric); font-size: 1.25em; }
html.quill .btn { background: radial-gradient(circle at 35% 30%, #A3282A, #6E1112); border-color: #4F0C0C; color: var(--seal-ink); font-family: 'IM Fell English SC', serif; letter-spacing: .04em; box-shadow: 0 2px 0 #3A0808, inset 0 1px 0 rgba(255,255,255,.18); }
html.quill .btn.secondary, html.quill .btn.outline { background: transparent; color: var(--primary); border-color: var(--border-strong); box-shadow: none; }
html.quill .lib-nav .btn.secondary { background: rgba(239,227,198,.08); color: #E9D29A; border-color: #8E7340; }
html.quill .lib-nav .btn[aria-current="page"] { background: #E9D29A; color: #2A1A0E; border-color: #E9D29A; }
html.quill .shelf-chips .btn { background: rgba(239,227,198,.08); color: #E9D29A; border-color: #8E7340; box-shadow:none; font-family:'IM Fell English',serif; }
html.quill .shelf-chips .chip-count { color: #CBB687; }
html.quill h2.section, html.quill h2.section a { color: #EAD7A2; font-family: 'IM Fell English SC', serif; font-weight: 400; }
html.quill .small.muted { color: var(--muted); }
html.quill p.small { color: var(--body); }
html.quill .poem-hook, html.quill .poem-text { font-family: 'IM Fell English', serif; font-size: 1.08em; }
html.quill .subbar { background: #17130E; border-bottom: 1px solid #8E7340; }
html.quill .subbar, html.quill .subbar a, html.quill .subbar h1, html.quill .subbar span { color: #E9D29A; }
/* The subbar's kicker carries a Daylight colour inline (lesson, review, reading); on the dark bar it is gold. */
html.quill .subbar .kicker { color: #C9A85C; }
html.quill .shelf-head h2, html.quill .shelf-head h2 a { color: #EAD7A2; font-family: 'IM Fell English SC', serif; font-weight: 400; }
html.quill .shelf-head p, html.quill .shelf > p, html.quill main > p { color: var(--muted); }
html.quill :is(.work-card, .subbar, body) .chip:not(.chip-mastered):not(.chip-done):not(.chip-due):not(.chip-ready):not(.chip-learning) { background: #E4D2A6; color: #5C0F10; border-color: #B89B62; filter: none; }
html.quill .chip { filter: none; } /* the state chips take their colours from the tokens (design-tokens) */
html.quill .shelf-head p.small.muted { color: #CBB687; }
html.quill main .btn:not(.secondary):not(.outline) { color: var(--seal-ink); }
html.quill main .card .btn.secondary, html.quill main .card .btn.outline, html.quill main .card button.btn.secondary { background: rgba(255,250,235,.4); }
/* The Taste was a translucent wash that turned grey on the stone; now opaque vellum. */
html.quill .taste, html.quill .taste-intro, html.quill details.taste-intro { background: #F3E8CC !important; border-color: #C8AE78 !important; color: var(--body); }
html.quill .fold > summary { color: var(--link); }
/* Focus: gold on the stone, oxblood on vellum, so the ring always shows (3:1 or more). */
/* A pressed toggle (Glosses: on, a picked shelf chip) is a vellum fill with oxblood, so the state shows by more than colour. */
html.quill .btn.secondary[aria-pressed="true"], html.quill .btn.outline[aria-pressed="true"],
html.quill [data-gloss-toggle][aria-pressed="true"], html.quill .shelf-chips .btn[aria-pressed="true"] { background: #EFE3C6; color: #7E1618; border-color: #7A6438; }
html.quill .shelf-chips .btn[aria-pressed="true"] .chip-count { color: #5E4A33; }
/* A highlighted famous line is dark ink on its gold-cream mark, as in the light looks. */
html.quill .glosses-on mark.famous { color: #2A1A0E; }
html.quill input[type="checkbox"], html.quill input[type="radio"] { accent-color: #7E1618; }
html.quill input:where([type="date"], [type="time"], [type="password"], [type="url"]) { border: 1px solid var(--field-border); }
/* Right and done words: a readable green on stone and on vellum (used inline as var(--right-text, #166534)). */
html.quill .par-kind { color: #5E4A33; }
html.quill .sat-num { background: var(--seal); color: var(--seal-ink); }
html.quill .round-tab.done { color: var(--right-text); }
/* Top bar: today's tally and the class's percent done. */
.totals .t-label { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .06em; opacity: .75; }
.totals.t-course { gap: 8px; }
.totals .t-bar { display: inline-block; width: 56px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.18); overflow: hidden; }
.totals .t-bar > span { display: block; height: 100%; background: #FFD27A; }
a.namebtn, a.namebtn:visited { text-decoration: none; display: inline-flex; align-items: center; color: #fff; }
a.namebtn:hover { color: #fff; }
/* Today: the week's XP as bars. */
.xp-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; height: 120px; margin: 4px 0 2px; }
.xp-week .xw-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.xp-week .xw-col span.b { display: block; width: 100%; max-width: 34px; border-radius: 6px 6px 2px 2px; background: var(--primary); min-height: 2px; }
.xp-week .xw-col.today span.b { background: #E0A82E; }
.xp-week .xw-col small { font-size: var(--fs-1); color: var(--muted); }
.xp-week .xw-col .v { font-size: var(--fs-1); font-weight: 700; color: var(--ink); }
.course-bar { height: 10px; border-radius: 999px; background: var(--track); overflow: hidden; }
.course-bar > span { display: block; height: 100%; background: #E0A82E; }
table.history { width: 100%; border-collapse: collapse; }
table.history th, table.history td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); }
table.history .h-bar { display: inline-block; height: 8px; border-radius: 4px; background: var(--primary); vertical-align: middle; margin-right: 6px; }
.coming-card { flex: 1 1 280px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); border-style: dashed; }
.coming-card:hover { border-color: var(--primary); }
.lib-search input { min-width: 200px; padding: 9px 12px; border-radius: var(--r-2); border: 1px solid var(--field-border); background: var(--card); color: var(--ink); }
.lib-search.big input { width: 100%; max-width: 640px; font-size: 19px; padding: 12px 16px; }
ul.search-list li { padding: 6px 0; }
/* Geography terms (#/geography) */
ul.plain.geo-weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.geo-week { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.geo-week.later { opacity: .7; }
ul.plain.geo-terms { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-2); }
.geo-term { display: flex; align-items: center; gap: 8px; }
.geo-term .dot { width: 9px; height: 9px; border-radius: 50%; background: #CBD3DE; flex: none; }
.geo-term.s-learning .dot { background: #2457A6; }
.geo-term.s-due .dot { background: #D97706; }
.geo-term.s-known .dot { background: #16A34A; }
ul.plain.geo-sum { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; }
ul.plain.geo-sum li { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.geo-card legend { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.geo-prompt.is-term { font-family: var(--serif, Newsreader, Georgia, serif); font-size: 34px; font-weight: 600; color: var(--ink, #14213D); }
.geo-prompt.is-def { font-family: var(--serif, Newsreader, Georgia, serif); font-size: 21px; line-height: 1.45; color: var(--ink, #14213D); }
/* Check, then Next in the same place (Nov 9): the answer goes below. */
.q-action { justify-content: flex-end; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.q-action.between { justify-content: space-between; }
/* Same width for Check and Next, so one spot takes both clicks. */
.q-action .btn:not(.secondary) { min-width: 160px; justify-content: center; }
/* A question and its answers on one screen (lessons, reviews, Jump in). */
.page.q-page { padding-top: 14px; gap: 22px; }
.q-page .col-main { gap: 12px; }
.q-page .passage { padding: 14px 20px; }
.q-page .passage figcaption { font-size: var(--fs-1); margin-bottom: 4px; }
.q-page .passage p { font-size: 18px; line-height: 1.5; }
.q-page .passage-source { margin-top: 6px; }
.q-page fieldset.choices { gap: 7px; }
.q-page fieldset.choices legend { font-size: 17px; margin-bottom: 6px; }
.q-page .choice { padding: 9px 14px; min-height: 40px; }
.q-page .choice input { margin-top: 2px; }
.q-page [data-answer] > .row { margin-top: 8px !important; }
.q-page .feedback { padding: 10px 16px; gap: 4px; }
.q-page .feedback .why { font-size: var(--fs-2); line-height: 1.45; }
/* A wide screen is used (Nov 9): the question page widens, so a passage sits
beside its question and the answers stay on screen. */
@media (min-width: 1300px) { .page.q-page, body:has(.q-page) .subbar-inner { max-width: 1440px; } }
/* Flashcard-style questions (vocabulary, Latin, geography, History's and
Economics' cards): two columns of answers when there is room. */
@media (min-width: 900px) {
.geo-card fieldset.choices { display: grid; grid-template-columns: 1fr 1fr; }
.geo-card fieldset.choices > legend { grid-column: 1 / -1; }
}
/* The lesson card stays beside the question and scrolls on its own. */
@media (min-width: 900px) {
.q-page .col-side { position: sticky; top: 86px; max-height: calc(100vh - 100px); overflow-y: auto; }
}
/* Where a quoted passage comes from. */
.passage-source { font-style: italic; }
.q-split, .q-work { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (min-width: 1000px) {
.q-split.long { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.q-split.long .passage p { font-size: 17px; line-height: 1.45; }
.q-page .col-side.below { flex-basis: 100%; position: static; max-height: none; }
}
.passage p.passage-ref { font-family: var(--sans); font-style: italic; font-size: var(--fs-2); line-height: 1.4; color: var(--muted); margin: 0 0 6px; white-space: normal; }
.q-page .passage p.passage-ref, .q-split.long .passage p.passage-ref { font-size: var(--fs-2); line-height: 1.4; }
/* Folding sections on reading pages: Why read it, What to notice, Notice. */
.fold-card > summary, .fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; min-height: 44px; }
.fold-card > summary::-webkit-details-marker, .fold > summary::-webkit-details-marker { display: none; }
.fold-card > summary::before, .fold > summary::before { content: '▸'; color: var(--muted); transition: transform .15s; }
.fold-card[open] > summary::before, .fold[open] > summary::before { transform: rotate(90deg); }
.fold-card > summary h2, .fold-card > summary h3 { margin: 0; }
.fold-card[open] > summary { margin-bottom: 8px; }
.fold > summary { font-weight: 600; color: var(--link, #2457A6); min-height: 36px; font-size: var(--fs-2); }
.fold .fold-body p { margin: 6px 0 0; }
.notice-eyebrow { color: var(--info); }
.notice-q { font-size: 18px; font-weight: 600; margin-top: 0; }
.fold-hint { margin-left: 4px; }
.why-card .why-h { margin: 0 0 6px; }
.why-card .blurb { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.4; color: var(--ink); margin: 0 0 4px; padding-left: 14px; border-left: 3px solid #C9A24A; }
/* "Put on my shelf": a ribbon at the top right of a reading. */
.shelf-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: var(--r-1); border: 1px solid var(--border); background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.shelf-btn:hover { background: var(--soft); }
.shelf-btn[aria-pressed="true"] { color: #8A2A2A; border-color: #E2C2C2; background: #FBF1F1; }
html.lamplight .shelf-btn[aria-pressed="true"], html.quill .shelf-btn[aria-pressed="true"] { background: transparent; color: #B8892E; border-color: #B8892E; }
@media (max-width: 720px) { .subbar .shelf-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .subbar .shelf-btn { order: 1; } } /* the words stay for a screen reader (audit §7) */
/* The history menu beside the back button: where he has been this sitting. */
.back-wrap { display: inline-flex; align-items: center; gap: 2px; }
.nav-history { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.nav-history .nav-more, .nav-history .nav-back { min-height: 44px; min-width: 32px; border: 0; background: transparent; color: inherit; font: inherit; font-size: var(--fs-2); cursor: pointer; border-radius: var(--r-1); display: inline-flex; align-items: center; justify-content: center; }
.nav-history .nav-more:hover, .nav-history .nav-back:hover { background: rgba(127,127,127,.14); }
.topbar .nav-history { color: #fff; margin-right: 4px; }
.nav-history .nav-menu { left: 0; right: auto; top: 100%; min-width: 260px; max-width: 360px; }
.nav-history .nav-menu a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Reading layout: the text column, the outline beside a long work, and
Side by side (passage on one side, everything about it on the other). */
.read-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.reader.with-outline, .reader.split { max-width: 1180px; }
.outline-col { display: none; }
.outline:not(.btn) { padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.outline:not(.btn) .eyebrow { color: #2457A6; }
.outline-list { margin: 0; padding-left: 1.4em; font-size: var(--fs-2); display: flex; flex-direction: column; gap: 4px; }
.outline-list li.here > a { font-weight: 700; color: var(--ink); }
.outline-list .toc-go { text-align: left; }
.dogs { margin: 4px 0 6px; font-size: var(--fs-2); display: flex; flex-direction: column; gap: 2px; }
.dogs li { display: flex; align-items: center; gap: 6px; }
.dogs a { display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none; }
.dogs a:hover { text-decoration: underline; }
.dog-mark, .reader-text p.dogeared::before { display: inline-block; width: 0; height: 0; border-style: solid; border-width: 9px 9px 0 0; border-color: #B5532E transparent transparent transparent; }
.reader-text p.dogeared { position: relative; }
.reader-text p.dogeared::before { content: ''; position: absolute; left: -22px; top: 6px; }
@media (min-width: 1000px) {
.reader.with-outline { display: grid; grid-template-columns: minmax(0, 760px) 260px; gap: 40px; justify-content: center; align-items: start; }
.reader.with-outline .outline-col { display: block; position: sticky; top: var(--sticky-top, 96px); max-height: calc(100vh - var(--sticky-top, 96px) - 16px); overflow-y: auto; }
.reader.with-outline .chapters, .reader.split .chapters { display: none; }
.reader.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr); gap: 32px; align-items: start; }
.reader.split .read-col, .reader.split .side-col { position: sticky; top: var(--sticky-top, 96px); max-height: calc(100vh - var(--sticky-top, 96px) - 16px); overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; }
.reader.split .side-col { display: flex; flex-direction: column; gap: 20px; }
.reader.split .reader-text { max-width: none; }
}
@media (max-width: 999px) {
.split-toggle { display: none; }
.reader.split .side-col { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
}
/* Glosses in the margin: each gloss written out at the left of its line, each
device or famous line named; tap one for its full note. */
.glosses-margin { position: relative; }
.margin-layer { position: absolute; top: 0; right: calc(100% + 18px); width: 200px; height: 100%; pointer-events: none; }
.mnote { position: absolute; right: 0; width: 100%; text-align: left; pointer-events: auto; cursor: pointer; font: 13px/1.35 var(--sans, inherit); color: var(--body); background: #F4F6FA; border: 1px solid #DCE2EC; border-radius: 10px 10px 2px 10px; padding: 5px 9px; font-style: normal; white-space: normal; }
.mnote .mn-kind { font-weight: 700; color: var(--ink); }
.mnote-device { background: #F7F1E3; border-color: #E6D8B6; }
.mnote-famous { background: #FBEFCB; border-color: #EBD48E; }
.mnote:hover { filter: brightness(0.97); }
.reader.margin-mode:not(.split) { max-width: 1000px; }
.reader.margin-mode:not(.split):not(.with-outline) .read-col { padding-left: 220px; }
.reader.margin-mode.with-outline { grid-template-columns: minmax(0, 980px) 240px; }
.reader.margin-mode.with-outline .read-col, .reader.split.margin-mode .read-col { padding-left: 220px; }
.reader.margin-mode.with-outline { max-width: 1300px; }
.poem-text.glosses-margin { margin-left: 210px; }
@media (max-width: 999px) {
.margin-inline { display: flex; flex-wrap: wrap; gap: 6px; margin: -0.4em 0 1em; }
.margin-inline .mnote { position: static; width: auto; }
.reader.margin-mode .read-col, .reader.margin-mode.with-outline .read-col { padding-left: 0; }
.poem-text.glosses-margin { margin-left: 0; }
}
html.lamplight .mnote { background: rgba(255,255,255,0.5); border-color: rgba(0,0,0,0.12); color: inherit; }
html.quill .mnote { background: #F3E8CC; border-color: #B89B62; color: var(--body); }
.gloss-tools { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.reader.split.margin-mode { max-width: 1400px; }
.outline-fold > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.outline-fold .outline { margin-top: 6px; }
@media (min-width: 1000px) { .reader.with-outline .outline-fold, .reader.split .outline-fold { display: none; } }
/* A Tool's anchor passage, and a writing task's working passage. */
.anchor-card { margin: 0; padding: 16px 18px; border-radius: var(--r-2); background: #FBF6EA; border: 1px solid #EEE2C4; display: flex; flex-direction: column; gap: 8px; }
.anchor-card .eyebrow { color: #8A6B2E; }
.anchor-passage { margin: 0; font-family: var(--serif); font-size: 19px; line-height: 1.55; white-space: pre-line; color: var(--body); }
.anchor-hl { background: #F6DF9C; color: inherit; border-radius: 3px; padding: 0 1px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.task-passage .reader-text { font-size: 19px; max-width: none; }
html.lamplight .anchor-card { background: rgba(255,255,255,0.35); border-color: rgba(0,0,0,0.12); }
html.quill .anchor-card { background: #EFE3C6; border-color: #B89B62; color: var(--body); }
/* Middle school: only works marked all or middle-up show. */
html.middle-school .work-card[data-level="high"] { display: none; }
[data-middle-school][aria-pressed="true"] { background: var(--soft); }
/* Questions on a Taste excerpt; the line a question is about, highlighted. */
.xq-card { display: flex; flex-direction: column; gap: 10px; }
.xq-q { font-size: 18px; font-weight: 600; margin: 4px 0; }
.xq-card .choices { display: flex; flex-direction: column; gap: 8px; }
.xq-feedback { background: var(--soft); border-radius: var(--r-2); padding: 10px 12px; }
::highlight(xq-focus) { background-color: #CFE3FF; }
.xq-focus-el { background: #E3EEFF; border-radius: 4px; }
.xq-card button.choice { text-align: left; font: inherit; color: inherit; width: 100%; }
/* The sound of it: meter, rhyme, rhythm, scanned lines, parallelism. */
.sound-card p { margin: 6px 0; }
.scan-list, .par-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.scan-pair { display: flex; flex-direction: column; margin: 0; font-family: var(--serif); }
.scan-orig { font-size: 17px; }
.scan-marked { font-size: var(--fs-2); letter-spacing: .02em; color: #1F5C3A; }
.scan-marked strong { color: #0B3D24; }
.par { display: grid; grid-template-columns: 2.2em 1fr; gap: 6px; }
.par-v { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; padding-top: 2px; }
.par-a, .par-b { margin: 0; font-family: var(--serif); font-size: 17px; }
.par-b { padding-left: 1.6em; }
.par-kind { color: #8A6B2E; }
/* Track banners and honours: the Laurel (the posy), the Gold laurel, Go further. */
.track-banner { grid-column: 1 / -1; width: 100%; display: flex; gap: 28px; flex-wrap: wrap; background: #5C1F2A; color: #FDF6EC; border-radius: var(--r-3); padding: 26px 30px; box-shadow: inset 0 0 0 3px #C9A24A; }
.track-banner a:not(.btn) { color: #F6DF9C; }
.track-banner .btn.secondary { background: transparent; color: #FDF6EC; border-color: #E9D29A; }
.tb-main { flex: 2 1 420px; display: flex; flex-direction: column; gap: 10px; }
.tb-side { flex: 1 1 240px; background: rgba(255,255,255,0.08); border-radius: var(--r-2); padding: 14px 16px; }
.tb-side ul { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.tb-side li span { display: block; color: #EADFCB; }
.tb-small { font-size: var(--fs-1); letter-spacing: .08em; text-transform: uppercase; color: #E9D29A; }
.tb-title { font-family: var(--serif); font-size: 34px; margin: 0; color: #fff; }
.tb-hook { font-family: var(--serif); font-style: italic; font-size: 21px; margin: 0; }
.tb-blurb { margin: 0; max-width: 70ch; line-height: 1.55; }
.honours-card { display: flex; flex-direction: column; gap: 14px; }
.honours-card .tier { border-top: 1px dashed var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.honours-card .tier h3 { margin: 0; }
.honours-list { margin: 4px 0 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 4px; }
.honours-bar { height: 8px; border-radius: 4px; background: var(--soft); overflow: hidden; max-width: 320px; }
.honours-bar span { display: block; height: 100%; background: #C9A24A; }
.posy-context { font-style: italic; color: var(--muted); margin: 0 0 8px; }
.posy-piece { display: flex; flex-direction: column; gap: 8px; }
.posy-piece h2 { margin: 0; }
.so-far { background: #FBF6EA; border: 1px solid #EEE2C4; border-radius: var(--r-2); padding: 14px 18px; }
.so-far h2 { margin: 0 0 6px; color: #8A6B2E; }
.so-far p { margin: 0; }
.honours-sub { font-family: var(--serif); font-size: 22px; margin: 8px 0 0; }
.quick-qs { display: flex; flex-direction: column; gap: 14px; }
.quick-q { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.quick-q legend { font-weight: 600; font-size: 17px; margin-bottom: 6px; }
.quick-q .choices { display: flex; flex-direction: column; gap: 8px; }
.quick-q button.choice { text-align: left; font: inherit; color: inherit; width: 100%; }
html.lamplight .track-banner, html.quill .track-banner { box-shadow: inset 0 0 0 3px #B8892E; }
.posy-piece > .btn, .posy-piece > .chip { align-self: flex-start; }
.honours-sec { font-family: var(--serif); font-size: 20px; margin: 18px 0 10px; }
/* The teacher's class ticks: any number of classes per student. */
.class-ticks { border: 1px solid var(--border); border-radius: var(--r-2); padding: 10px 14px; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.class-ticks legend { font-weight: 600; padding: 0 4px; }
.tick-group { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.tick-group > .tiny { width: 100%; }
.class-tick { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: var(--fs-2); }
/* "View as …": the band at the top while a teacher sees the app as a student. */
.viewas-band { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 8px 16px; background: #5B3FA8; color: #fff; font-size: var(--fs-2); text-align: center; }
.viewas-band .btn { background: #fff; color: #3D2A75; border-color: #fff; }
/* ---------- Challenge A strands (Nov 7) ---------- */
/* Latin vocabulary */
.latin-grammar { display: block; font-style: italic; margin-top: 2px; }
/* Analogies: two pairs, each bridge in a small box over its colon; the genus/species chart */
.an-chapter { color: var(--muted); }
.an-figure { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 6px 14px; padding: 14px 8px 10px; margin: 0 0 12px; background: var(--soft); border: 1px solid var(--border); border-radius: var(--r-2); font-family: var(--serif); font-size: 21px; }
.an-pair { display: inline-flex; align-items: baseline; gap: 6px; }
.an-bridge { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; margin-bottom: 2px; }
.an-box { font-family: var(--sans); font-size: var(--fs-1); font-weight: 700; letter-spacing: 0.02em; padding: 2px 8px; border: 1.5px solid var(--primary); border-radius: 4px; color: var(--primary-dark); background: var(--card); white-space: nowrap; }
.an-caret { width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid var(--primary); }
.an-colon { position: relative; font-weight: 700; color: var(--primary); }
.an-figure:has(.an-bridge) { padding-top: 46px; }
.an-double { font-weight: 700; color: var(--muted); padding-bottom: 2px; }
.an-term.blank { min-width: 3.2em; border-bottom: 2px solid var(--ink); color: transparent; }
.an-tree { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 0 12px; padding: 12px; background: var(--soft); border: 1px solid var(--border); border-radius: var(--r-2); }
.an-node { display: inline-block; padding: 6px 14px; border: 1.5px solid var(--border-strong); border-radius: var(--r-1); background: var(--card); font-family: var(--serif); font-size: 18px; }
.an-node.genus { border-color: var(--primary); font-weight: 700; }
.an-node.blank { min-width: 4em; text-align: center; border-style: dashed; color: var(--muted); }
.an-tree-lines { width: 70%; max-width: 360px; height: 12px; border: 1.5px solid var(--border-strong); border-bottom: 0; border-radius: 6px 6px 0 0; }
.an-tree-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
/* Highlighting: each colour from the data (light in Daylight and Lamplight, dark in Quill & Ink), with a letter so colour is never the only cue */
.hl-page .hl-blue { --c: var(--hl-blue); } .hl-page .hl-pink { --c: var(--hl-pink); } .hl-page .hl-orange { --c: var(--hl-orange); }
.hl-page .hl-green { --c: var(--hl-green); } .hl-page .hl-yellow { --c: var(--hl-yellow); }
html.quill .hl-page .hl-blue { --c: var(--hl-blue-d); } html.quill .hl-page .hl-pink { --c: var(--hl-pink-d); } html.quill .hl-page .hl-orange { --c: var(--hl-orange-d); }
html.quill .hl-page .hl-green { --c: var(--hl-green-d); } html.quill .hl-page .hl-yellow { --c: var(--hl-yellow-d); }
.hl-swatch { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 4px; border-radius: 4px; background: var(--c); color: #14213D; font-size: var(--fs-1); font-weight: 800; vertical-align: middle; }
html.quill .hl-swatch, html.quill mark.hl, html.quill .tok.hl { color: #fff; }
.hl-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.hl-color { display: flex; flex-direction: row; gap: 12px; align-items: flex-start; }
.hl-color .hl-swatch { min-width: 30px; height: 30px; font-size: var(--fs-2); }
mark.hl, .tok.hl { background: var(--c); color: inherit; border-radius: 3px; padding: 0 1px; cursor: pointer; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hl-tag { display: inline-block; font-family: var(--sans); font-size: var(--fs-1); font-weight: 800; vertical-align: super; line-height: 1; margin-right: 1px; opacity: 0.75; }
[data-show]:not([data-show="all"]) mark.hl { background: none; cursor: default; }
[data-show]:not([data-show="all"]) mark.hl .hl-tag { display: none; }
[data-show][data-show="blue"] mark.hl.hl-blue, [data-show][data-show="pink"] mark.hl.hl-pink, [data-show][data-show="orange"] mark.hl.hl-orange,
[data-show][data-show="green"] mark.hl.hl-green, [data-show][data-show="yellow"] mark.hl.hl-yellow { background: var(--c); cursor: pointer; }
[data-show][data-show="blue"] mark.hl.hl-blue .hl-tag, [data-show][data-show="pink"] mark.hl.hl-pink .hl-tag, [data-show][data-show="orange"] mark.hl.hl-orange .hl-tag,
[data-show][data-show="green"] mark.hl.hl-green .hl-tag, [data-show][data-show="yellow"] mark.hl.hl-yellow .hl-tag { display: inline-block; }
mark.hl-missed { outline: 2px dashed var(--ink); outline-offset: 1px; }
.hl-text p { line-height: 1.9; }
.hl-note { min-height: 1.5em; padding: 8px 10px; background: var(--soft); border-radius: var(--r-2); }
.hl-mine .tok { cursor: pointer; border-radius: 3px; }
.hl-mine .tok:hover { outline: 1px solid var(--border-strong); }
.hl-palette [aria-checked="true"] { outline: 3px solid var(--primary); outline-offset: 1px; }
.hl-toggles [aria-pressed="true"] { outline: 3px solid var(--primary); outline-offset: 1px; }
.hl-order li { margin: 4px 0; }
/* Challenge A's books: a divider band per book, and the ten books on the class Library page */
.book-divider { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-left: 10px solid var(--tab); border-radius: var(--r-2); background: color-mix(in srgb, var(--tab) 22%, var(--card)); }
html.quill .book-divider { background: color-mix(in srgb, var(--tab) 18%, var(--card)); border-left-color: color-mix(in srgb, var(--tab) 70%, #000); }
.book-divider-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.book-title { font-family: var(--serif); font-size: 18px; }
.book-cover { flex: none; border-radius: 4px; object-fit: cover; box-shadow: 0 1px 4px rgba(0,0,0,0.18); }
.book-cover.small { width: 46px; height: 68px; }
.book-cover.shelf { width: 96px; height: 142px; }
.book-cover.plain { display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px; background: var(--tab); color: #14213D; font-family: var(--serif); font-weight: 600; line-height: 1.15; overflow: hidden; border: 1px solid rgba(0,0,0,0.15); }
.book-cover.small.plain { font-size: 8px; }
.book-cover.shelf.plain { font-size: var(--fs-2); }
.ten-books { display: flex; gap: 14px; overflow-x: auto; padding: 4px 2px 10px; }
.ten-book { flex: none; width: 112px; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: var(--r-2); border-bottom: 6px solid var(--tab); background: var(--card); border-top: 1px solid var(--border); border-left: 1px solid var(--border); border-right: 1px solid var(--border); }
.ten-book.now { outline: 3px solid var(--primary); }
.ten-book-text { display: flex; flex-direction: column; font-family: var(--serif); font-size: var(--fs-2); line-height: 1.2; }
/* Worksheets: each step a compact form */
.ws { display: flex; flex-direction: column; gap: 14px; }
.ws-step { gap: 10px; }
.ws-title { font-family: var(--serif); font-size: 20px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 8px; }
.ws-n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; font-family: var(--sans); font-size: var(--fs-1); font-weight: 700; }
.ws-field { display: flex; flex-direction: column; gap: 4px; margin: 4px 0; border: 0; padding: 0; }
.ws-label { font-weight: 600; font-size: var(--fs-2); }
.ws-pattern { font-style: italic; }
.ws-pulled { color: var(--green); }
.ws-note { background: var(--soft); padding: 8px 10px; border-radius: var(--r-2); }
.ws-list { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.ws-list input, .ws-ofield input, .ws-outline input, .ws-grid input { width: 100%; }
.ws-grid { border-collapse: collapse; width: 100%; }
.ws-grid th, .ws-grid td { border: 1px solid var(--border); padding: 4px; font-size: var(--fs-1); text-align: left; vertical-align: top; }
.ws-grid th { background: var(--soft); }
.ws-grid input { border: 0; padding: 6px; min-width: 7em; background: transparent; }
.ws-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ws-col { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--soft); }
.ws-col .ws-list { padding-left: 0; }
@media (max-width: 700px) { .ws-columns { grid-template-columns: 1fr; } }
.ws-choice { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.ws-choice legend { margin-bottom: 4px; }
.ws-check { display: flex; gap: 8px; align-items: flex-start; }
.ws-check input { margin-top: 4px; width: 18px; height: 18px; flex: none; }
.ws-checklist li { margin: 6px 0; }
.ws-ofield { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.ws-ofield ol { margin: 4px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.ws-outline { display: flex; flex-direction: column; gap: 6px; }
.ws-onode { display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: 8px; align-items: center; }
.ws-onode.d1 { padding-left: 20px; } .ws-onode.d2 { padding-left: 40px; } .ws-onode.d3 { padding-left: 60px; }
.ws-onode.is-new { background: color-mix(in srgb, #F2B705 16%, transparent); border-radius: var(--r-1); padding-top: 3px; padding-bottom: 3px; }
.ws-olabel { font-size: var(--fs-2); font-weight: 600; }
.ws-outline.read .ws-onode { display: block; font-size: var(--fs-2); }
.ws-draft { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 34%); gap: 14px; align-items: start; }
.ws-outline-aside { position: sticky; top: 12px; max-height: 80vh; overflow: auto; }
@media (max-width: 860px) { .ws-draft { grid-template-columns: 1fr; } .ws-outline-aside { position: static; order: -1; } .ws-onode { grid-template-columns: 1fr; } }
.ws-example summary { cursor: pointer; }
.card.ws-host { background: none; border: 0; box-shadow: none; padding: 0; }
.card.ws-host > .writing-foot, .card.ws-host > .row, .card.ws-host > p { padding: 0 4px; }
/* ----- SAT Reading and Writing: question parts and practice modules ----- */
.sat-blank { display: inline-block; min-width: 4.5em; border-bottom: 2px solid var(--ink); margin: 0 3px; height: 1em; vertical-align: baseline; }
.q-passages { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sat-pair { display: flex; flex-direction: column; gap: 12px; }
.sat-notes { margin: 6px 0 0; padding-left: 1.2em; font-family: var(--serif); font-size: 17px; line-height: 1.5; }
.sat-notes li { margin: 3px 0; }
.sat-data { margin: 0; display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-2); padding: 12px 14px; }
.sat-table-wrap { overflow-x: auto; }
.sat-table { border-collapse: collapse; width: 100%; font-size: var(--fs-2); font-variant-numeric: tabular-nums; }
.sat-table caption { text-align: left; font-weight: 600; padding-bottom: 6px; }
.sat-table th, .sat-table td { border: 1px solid var(--border); padding: 5px 8px; text-align: left; }
.sat-table thead th { background: var(--soft); }
.sat-chart-title { font-weight: 600; margin: 0; font-size: var(--fs-2); }
.sat-chart svg { width: 100%; height: auto; max-width: 640px; display: block; }
.sat-chart .grid { stroke: var(--border); stroke-width: 1; }
.sat-chart .tick, .sat-chart .axis { font-size: 12px; fill: var(--muted); font-family: var(--sans); }
.sat-chart .axis { font-size: var(--fs-1); fill: var(--body); }
.sat-chart rect.s0, .sat-legend .s0 { fill: var(--primary); background: var(--primary); }
.sat-chart rect.s1, .sat-legend .s1 { fill: #B45309; background: #B45309; }
.sat-chart polyline.s0 { stroke: var(--primary); stroke-width: 2.5; }
.sat-chart polyline.s1 { stroke: #B45309; stroke-width: 2.5; stroke-dasharray: 6 4; }
.sat-chart circle.s0 { fill: var(--primary); }
.sat-chart circle.s1 { fill: #B45309; }
.sat-legend { list-style: none; display: flex; gap: 16px; padding: 0; margin: 4px 0 0; font-size: var(--fs-1); flex-wrap: wrap; }
.sat-legend .key { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.sat-letter { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1.5px solid var(--ink); border-radius: 50%; font-size: var(--fs-1); font-weight: 700; margin-right: 8px; flex: none; font-family: var(--sans); }
.sat-why { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-2); }
.sat-why li { display: flex; align-items: flex-start; gap: 2px; }
.sat-why li.right .sat-letter { background: var(--green); border-color: var(--green); color: #fff; }
.sat-why li.picked .sat-letter { background: var(--wrong-line); border-color: var(--wrong-line); color: #fff; }
.sat-choice-text { display: block; font-weight: 600; color: var(--ink); }
.sat-choice-text + .sat-choice-why { display: block; color: var(--muted); }
/* The module screen */
.sat-bar { position: sticky; top: 0; z-index: 5; background: var(--topbar); color: #fff; }
.sat-bar-inner { max-width: 1240px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sat-bar .btn.outline { color: #fff; border-color: rgba(255,255,255,.6); background: transparent; }
.sat-clock { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.sat-clock.low { color: #FCA5A5; }
.sat-page { padding-bottom: 96px; }
.sat-qhead { align-items: center; }
.sat-num { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; background: var(--ink); color: #fff; font-weight: 700; border-radius: 4px; }
.sat-num.small-num { min-width: 24px; height: 22px; font-size: var(--fs-1); }
.sat-mark.on { color: var(--due); font-weight: 600; }
.sat-choice-row { display: flex; align-items: stretch; gap: 8px; }
.sat-choice-row .choice { flex: 1; }
.sat-choice-row.crossed .sat-ctext { text-decoration: line-through; color: var(--muted); }
.sat-choice-row.crossed .choice { opacity: .7; }
.sat-cross { flex: none; width: 52px; border: 1px solid var(--border); background: var(--card); border-radius: var(--r-2); cursor: pointer; font-size: var(--fs-1); color: var(--muted); }
.sat-cross[aria-pressed="true"] { color: var(--ink); font-weight: 600; }
.sat-foot { position: fixed; left: 0; right: 0; bottom: 0; background: var(--card); border-top: 1px solid var(--border-strong); z-index: 5; }
.sat-foot-inner { max-width: 1240px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sat-navpop { position: relative; }
.sat-navpop > summary { cursor: pointer; font-weight: 600; list-style: none; padding: 8px 14px; border-radius: var(--r-2); background: var(--ink); color: #fff; }
.sat-navpop > summary::-webkit-details-marker { display: none; }
.sat-navbox { position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); width: min(92vw, 420px); background: var(--card); border: 1px solid var(--border-strong); border-radius: var(--r-3); padding: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.18); display: flex; flex-direction: column; gap: 8px; }
.sat-nav { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.sat-nav button { width: 100%; height: 38px; border: 1.5px dashed var(--border-strong); background: var(--card); border-radius: var(--r-1); font-weight: 600; cursor: pointer; color: var(--ink); position: relative; }
.sat-nav button.done { border-style: solid; background: var(--soft); border-color: var(--primary); }
.sat-nav button.marked::after { content: '★'; position: absolute; top: -8px; right: -4px; color: #B45309; font-size: var(--fs-1); }
.sat-nav button.here { outline: 3px solid var(--primary); outline-offset: 1px; }
.sat-key .k { display: inline-block; width: 12px; height: 12px; border: 1.5px dashed var(--border-strong); border-radius: 3px; vertical-align: -1px; }
.sat-key .k.done { border-style: solid; border-color: var(--primary); background: var(--soft); }
.sat-key .k.marked { border: none; width: auto; height: auto; }
.sat-key .k.marked::before { content: '★'; color: #B45309; }
.sat-tests { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.sat-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.sat-score td:nth-child(2) { white-space: nowrap; width: 1%; }
.sat-bar-cell { display: block; height: 8px; background: var(--track); border-radius: 4px; min-width: 60px; }
.sat-bar-cell span { display: block; height: 100%; background: var(--primary); border-radius: 4px; }
.sat-answers > li { border-top: 1px solid var(--border); padding: 8px 0; }
.sat-answers summary { cursor: pointer; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sat-answer-body { padding: 10px 0 4px; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 640px) {
.sat-clock { font-size: 18px; }
.sat-cross { width: 44px; }
}
ol.sat-answers { list-style: none; padding: 0; margin: 0 0 12px; }
/* "Why was I wrong?" under a wrong answer */
.why-wrap { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-top: 4px; }
.why-mount { align-self: stretch; }
.why-panel { border-left: 4px solid #2F6F8F; background: var(--card); border-radius: var(--r-2); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.why-panel .why-head { margin: 0; font-size: 17px; }
.why-panel .tutor-thread { max-height: none; }
/* ---------- Ideas (experimental), #/ideas ----------
A sampler of ideas, one card each. Tokens only, so Lamplight and Quill & Ink
colour it with the rest; phone width with a 16px gutter and no sideways scroll
(wide samples scroll inside their own box). */
.ideas-page { gap: 28px; }
.ideas-lead { max-width: 70ch; font-size: 17px; }
.ideas-kinds .chip { margin-right: 2px; }
.idea-kind { text-transform: lowercase; }
.idea-kind-working { color: var(--right); background: var(--right-bg); }
.idea-kind-mock { color: var(--info); background: var(--info-bg); }
.idea-kind-stub { color: var(--due); background: var(--due-bg); }
.idea-kind-text { color: #374151; background: #E6EBF1; }
.ideas-section { display: flex; flex-direction: column; gap: 14px; }
.ideas-h2 { margin: 0; font-family: var(--serif); font-size: 26px; font-weight: 600; }
.ideas-sub { color: var(--muted); font-weight: 400; font-size: 18px; }
ul.plain.ideas-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.idea-card { gap: 10px; }
.idea-card.wide { grid-column: 1 / -1; }
.idea-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.idea-n { font-family: var(--serif); font-size: 22px; color: var(--muted); min-width: 28px; }
.idea-name { margin: 0; font-size: 18px; font-weight: 700; flex: 1 1 auto; }
.idea-text { color: var(--body); }
.idea-sample { border-top: 1px dashed var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.idea-status { padding: 8px 10px; border-left: 3px solid var(--border-strong); background: var(--soft); border-radius: 4px; }
.ideas-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.ideas-scroll svg { display: block; width: 100%; height: auto; }
/* 1. The Great Conversation */
.gc-box { fill: var(--card); stroke: var(--primary); stroke-width: 1.5; }
.gc-box.absent { stroke: var(--border-strong); stroke-dasharray: 4 3; }
.gc-label { font: 600 13px var(--sans); fill: var(--ink); }
.gc-date { font: 11px var(--sans); fill: var(--muted); }
.gc-arrow { fill: none; stroke: var(--border-strong); stroke-width: 1.4; }
.gc-head { fill: var(--border-strong); }
.gc-verb { font: italic 11px var(--serif); fill: var(--muted); }
.gc-chart a:hover .gc-box { fill: var(--soft); }
/* 2. What you owe it */
ul.plain.owe-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.owe-card { border: 1px solid var(--border); border-radius: var(--r-2); padding: 14px; display: flex; flex-direction: column; gap: 4px; background: var(--soft); }
.owe-title { margin: 0; font-family: var(--serif); font-size: 20px; font-weight: 600; }
.owe-line { border-left: 3px solid var(--primary); padding-left: 10px; margin-top: 6px; }
/* 3. Flashcards */
.fc { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.fc-bar { height: 8px; background: var(--track); border-radius: 4px; overflow: hidden; }
.fc-fill { display: block; height: 100%; background: var(--green); transition: width .2s; }
.fc-card { display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; min-height: 150px; padding: 18px; text-align: center;
background: var(--soft); border: 1px solid var(--border-strong); border-radius: var(--r-3); cursor: pointer; font: inherit; color: inherit; }
.fc-card:hover { background: var(--card); }
.fc-front { font-family: var(--serif); font-size: 24px; }
.fc-back { display: flex; flex-direction: column; gap: 6px; }
.fc-where { font-size: var(--fs-1); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.fc-quote { font-family: var(--serif); font-size: 18px; quotes: "“" "”"; }
.fc-card [hidden] { display: none; }
/* 4. A Book of Centuries */
.boc-axis { stroke: var(--ink); stroke-width: 1.2; }
.boc-axis.faint { stroke: var(--border-strong); }
.boc-tick { stroke: var(--ink); stroke-width: 1; }
.boc-year { font: 11px var(--sans); fill: var(--muted); }
.boc-date { font: 10px var(--sans); fill: var(--muted); }
.boc-row { font: 600 12px var(--sans); fill: var(--ink); }
.boc-pin { fill: var(--primary); stroke: var(--card); stroke-width: .8; }
.boc a:hover .boc-pin, .boc a:focus .boc-pin { fill: #B7791F; r: 5; }
.boc-his { fill: #946200; stroke: var(--card); stroke-width: 1; }
/* 5. The map */
.map-wrap { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(220px, 1.3fr); gap: 16px; align-items: start; }
@media (max-width: 640px) { .map-wrap { grid-template-columns: 1fr; } }
.map-svg { width: 100%; height: auto; display: block; }
.map-frame { fill: var(--soft); stroke: var(--border-strong); }
.map-pin circle { fill: var(--primary); }
.map-pin text { font: 4px var(--sans); fill: var(--ink); }
.map-list li { padding: 4px 0; border-bottom: 1px dashed var(--border); }
.map-home { border-top: 1px solid var(--border); padding-top: 10px; }
/* 6, 18, 30. Shelves and placards */
.shelf-mock { display: flex; flex-direction: column; gap: 0; }
ul.plain.placards { flex-direction: row; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 0 10px; }
.placard { border: 1px solid var(--border-strong); border-bottom: 0; border-radius: 6px 6px 0 0; padding: 14px 12px 10px; min-width: 96px; text-align: center; font-family: var(--serif); background: var(--soft); color: var(--muted); font-style: italic; }
.placard.doc { font-style: normal; color: var(--ink); }
.shelf-board { display: block; height: 10px; background: var(--border-strong); border-radius: 2px; }
/* 7. Elders' voices */
.audio-mock { display: flex; flex-direction: column; gap: 8px; }
.audio-who { font-weight: 700; }
.audio-bar { height: 36px; border: 1px solid var(--border-strong); border-radius: 18px; background: var(--soft); position: relative; }
.audio-bar span { position: absolute; left: 10px; top: 9px; width: 0; height: 0; border-left: 14px solid var(--muted); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
/* 8. Letters */
.letter-form { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.letter-form input, .letter-form textarea { width: 100%; }
/* 9. The feast calendar */
ol.plain.feast-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.feast { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-2); }
.feast.next { grid-column: 1 / -1; border-color: var(--primary); background: var(--soft); }
.feast-when { font-size: var(--fs-1); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--primary); }
.feast-name { font-family: var(--serif); font-size: 18px; font-weight: 600; }
/* 10. The progymnasmata */
ol.ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 4px; }
.rung { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--r-1); background: var(--card); }
.rung.start { border-color: var(--primary); background: var(--soft); font-weight: 700; }
.rung-n { font-family: var(--serif); color: var(--muted); min-width: 22px; }
.rung .chip { margin-left: auto; }
/* 11. The memory palace */
.plan { width: 100%; max-width: 320px; height: auto; display: block; }
.plan-room { fill: var(--soft); stroke: var(--ink); stroke-width: 1.2; }
.plan-label { font: 600 6px var(--sans); fill: var(--ink); }
.plan-sub { font: 4px var(--sans); fill: var(--muted); }
.plan-door { fill: var(--card); }
/* 12. A real copybook */
.copybook { background: #fff; color: #000; border: 1px solid var(--border-strong); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.copy-row { height: 44px; position: relative; border-bottom: 1px solid #9BB3D1; }
.copy-row::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; border-top: 1px dashed #C9D6E8; }
.copy-row::after { content: ""; position: absolute; left: 0; right: 0; top: 28px; border-top: 1px dotted #C9D6E8; }
.copy-model { position: absolute; left: 6px; bottom: 2px; font-family: 'IM Fell English', var(--serif); font-style: italic; font-size: 24px; letter-spacing: .02em; }
html.lamplight .copybook, html.quill .copybook { background: #FBF6EB; }
/* 13. The disputation */
.quaestio { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.q-box { min-height: 72px; border: 1px dashed var(--border-strong); border-radius: var(--r-1); background: var(--soft); }
/* 14. Viva voce */
.viva-card { display: flex; flex-direction: column; gap: 8px; }
.viva-card p { font-family: var(--serif); font-size: 19px; }
/* 16. The question, again */
.qa { display: flex; flex-direction: column; gap: 14px; }
.qa-item { display: flex; flex-direction: column; gap: 8px; }
.qa-item textarea { width: 100%; }
.qa-past { border-left: 3px solid #B7791F; padding-left: 10px; }
.qa-past blockquote { margin: 2px 0 0; font-style: italic; }
.qa-ladder { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qa-step { padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: var(--fs-1); }
.qa-step.now { background: var(--primary); color: #fff; border-color: var(--primary); }
.qa-arrow { color: var(--muted); }
/* 17, 23, 27. Poem lines */
.poem-lines { display: flex; flex-direction: column; gap: 2px; font-family: var(--serif); font-size: 17px; }
.pline { display: block; }
.pline.covered { color: var(--muted); letter-spacing: .1em; }
.cover textarea { width: 100%; }
/* 18. You decide */
.bench { display: flex; flex-direction: column; gap: 10px; }
.bench-title { margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 600; }
.bench textarea { width: 100%; }
/* 19. Dinner with Dr. Johnson */
.dj { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.dj-q, .dj-a { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-radius: var(--r-2); }
.dj-q { background: var(--soft); align-self: flex-start; max-width: 85%; }
.dj-a { border: 1px solid var(--border); align-self: flex-end; max-width: 95%; }
.dj-who { font-size: var(--fs-1); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.dj-a blockquote { margin: 0; font-family: var(--serif); font-size: 16px; }
.dj-note { font-style: italic; }
/* 20. A concordance */
.conc { display: flex; flex-direction: column; gap: 8px; }
.conc input[type="search"] { flex: 1 1 200px; padding: 10px 12px; border: 1px solid var(--field-border); border-radius: var(--r-2); background: var(--card); }
.conc-hits { max-height: 320px; overflow: auto; border-top: 1px dashed var(--border); padding-top: 8px; }
.conc-hits li { padding: 4px 0; border-bottom: 1px dashed var(--border); }
/* 21. The gallery and the gramophone */
.gal { display: flex; flex-direction: column; gap: 10px; }
.gal-frame { aspect-ratio: 4 / 3; border: 10px solid #8A6B2E; outline: 1px solid var(--border-strong); background: var(--soft); display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; }
.gal-player { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border-strong); border-radius: 999px; padding: 6px 14px; background: var(--soft); }
.gal-play { width: 0; height: 0; border-left: 12px solid var(--muted); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.gal-track { flex: 1; height: 4px; background: var(--track); border-radius: 2px; }
/* 22. English through the ages */
ol.plain.rungs { display: flex; flex-direction: column; gap: 10px; position: relative; padding-left: 22px; }
ol.plain.rungs::before { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; border-left: 2px solid var(--border-strong); }
.rung-card { position: relative; border: 1px solid var(--border); border-radius: var(--r-2); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; background: var(--card); }
.rung-card::before { content: ""; position: absolute; left: -19px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); }
.rung-text p { font-family: var(--serif); font-size: 17px; }
/* 24. The family copy */
.fam-copy { display: grid; grid-template-columns: minmax(0, 2fr) minmax(160px, 1fr); gap: 16px; }
@media (max-width: 640px) { .fam-copy { grid-template-columns: 1fr; } }
.fam-text p.prose { font-family: var(--serif); font-size: 17px; margin-top: 6px; }
.fam-margin { display: flex; flex-direction: column; gap: 10px; }
.margin-note { padding: 8px 10px; border-radius: var(--r-1); border-left: 3px solid; font-family: var(--serif); }
.margin-note.note-0 { border-color: #B7791F; background: rgba(183,121,31,.08); }
.margin-note.note-1 { border-color: #2457A6; background: rgba(36,87,166,.08); }
.note-who { font-weight: 700; display: block; }
/* 25. Teach it to Andrew */
.teach { display: flex; flex-direction: column; gap: 10px; }
.teach-q { border: 1px dashed var(--border-strong); border-radius: var(--r-2); padding: 10px; }
/* 26. The Recital */
.programme { border: 1px solid var(--border-strong); padding: 22px 24px; background: var(--card); text-align: center; display: flex; flex-direction: column; gap: 8px; max-width: 480px; }
.prog-head { font-family: var(--serif); font-size: 28px; font-weight: 600; }
.prog-sub { font-family: var(--serif); font-style: italic; color: var(--muted); }
.prog-list { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.prog-list li { display: flex; flex-direction: column; gap: 2px; }
.prog-title { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.prog-author { color: var(--muted); font-size: var(--fs-2); }
.prog-by { font-size: var(--fs-2); }
.programme .row { justify-content: center; }
/* 27. Cast the play */
.cast { display: flex; flex-direction: column; gap: 12px; }
.cast-parts { display: flex; flex-wrap: wrap; gap: 10px; }
.cast-part { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-1); font-weight: 600; }
.scene { display: flex; flex-direction: column; gap: 8px; font-family: var(--serif); font-size: 17px; }
.speech { padding: 4px 10px; border-left: 3px solid var(--border); }
.speaker { display: block; font-family: var(--sans); font-size: var(--fs-1); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.speaker[data-reader]:not([data-reader=""])::after { content: " · " attr(data-reader); text-transform: none; letter-spacing: 0; }
.speech.reader-0 { border-color: #2457A6; background: rgba(36,87,166,.08); }
.speech.reader-1 { border-color: #1F6E54; background: rgba(31,110,84,.10); }
.speech.reader-2 { border-color: #B7791F; background: rgba(183,121,31,.10); }
.speech.reader-3 { border-color: #7A2E1E; background: rgba(122,46,30,.10); }
.direction { color: var(--muted); }
/* 28. The cathedral */
.cath { width: 100%; max-width: 420px; height: auto; display: block; }
.stone { fill: var(--track); stroke: var(--card); stroke-width: .3; }
.rose { fill: none; stroke: var(--ink); stroke-width: .8; }
.door { fill: var(--ink); }
.legend li { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-2); }
.swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.swatch.empty { background: var(--track); }
/* 29. Euclid */
.euclid { width: 100%; max-width: 300px; height: auto; display: block; }
.eu-circle { fill: none; stroke: var(--border-strong); stroke-width: .8; }
.eu-tri { fill: rgba(36,87,166,.10); stroke: var(--primary); stroke-width: 1.2; }
.eu-pt { font: italic 6px var(--serif); fill: var(--ink); }
/* 31. The Creed by heart: reuses the recite screen's classes (rounds, rline) */
.byheart { display: flex; flex-direction: column; gap: 10px; }
.byheart .round-tab { pointer-events: none; }
/* 32. Greek */
ul.plain.alpha { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.alpha-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 1px solid var(--border-strong); border-radius: var(--r-2); background: var(--soft); }
.alpha-letter { font-family: var(--serif); font-size: 20px; }
.alpha-name { font-size: var(--fs-1); color: var(--muted); }
/* 33. The Annual */
.title-page { border: 1px solid var(--border-strong); padding: 28px 18px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; background: var(--card); max-width: 300px; }
.tp-rule { display: block; width: 60%; border-top: 1px solid var(--ink); }
.tp-title { font-family: var(--serif); font-size: 30px; font-weight: 600; }
.tp-year { font-family: var(--serif); font-size: 18px; }
.tp-sub { font-size: var(--fs-1); color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }
/* Which of these? */
ul.plain.picks-row { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.pick { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: 40px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--card); color: var(--ink); cursor: pointer; font-size: var(--fs-2); }
.pick:hover { background: var(--soft); }
.pick[aria-pressed="true"] { background: var(--right-bg); border-color: var(--right); color: var(--right); }
.pick-thumb { opacity: .45; }
.pick[aria-pressed="true"] .pick-thumb { opacity: 1; }
.pick-n { color: var(--muted); font-size: var(--fs-1); }
@media (max-width: 560px) {
.ideas-page { padding-left: 16px; padding-right: 16px; }
.ideas-h2 { font-size: 22px; }
ul.plain.ideas-row { grid-template-columns: 1fr; }
.fc-front { font-size: 20px; }
}
@media print {
.print-sheet .ps-text { white-space: pre-wrap; }
}
.boc-his-n { font: 700 8px var(--sans); fill: #fff; }
ol.plain.boc-his-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px 18px; }
.boc-his-badge { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #946200; color: #fff; font-size: var(--fs-1); font-weight: 700; }
.idea-sample [hidden], .ideas-picks [hidden] { display: none !important; }
.cath-line { fill: none; stroke: var(--ink); stroke-width: .9; stroke-linejoin: round; }
ul.plain.legend { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
.byheart .recite-lines { font-size: 20px; line-height: 1.5; }
@media (min-width: 900px) { .byheart .recite-lines { columns: 2; column-gap: 32px; } .byheart .rline { break-inside: avoid; } }
/* ----- AP Lit practice sets and FRQs (unity Job 0) ----- */
.ap-passage { display: flex; flex-direction: column; font-family: var(--serif); font-size: 17px; line-height: 1.5; }
.ap-passage .ap-line { display: flex; gap: 10px; white-space: pre-wrap; }
.ap-passage.verse .ap-ln { flex: 0 0 2.2em; text-align: right; color: var(--muted); font-family: var(--sans); font-size: var(--fs-1); padding-top: 4px; font-variant-numeric: tabular-nums; }
.ap-passage .ap-lt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.ap-passage:not(.verse) .ap-line + .ap-line:not(.ap-gap) { margin-top: 0; }
.ap-passage .ap-gap { display: block; height: .8em; }
.ap-credit { margin-top: 8px; }
.ap-result-passage { margin: 8px 0; }
.ap-result-passage .ap-passage { font-size: var(--fs-2); margin-top: 8px; }
.ap-extras { gap: 12px; }
.frq-timer { align-items: center; gap: 10px; flex-wrap: wrap; }
.frq-timer .sat-clock { color: var(--ink); font-size: 18px; }
.frq-timer .sat-clock.low { color: #B91C1C; }
.thesis-box { display: flex; flex-direction: column; gap: 6px; border-top: 1px dashed var(--border); padding-top: 10px; }
.thesis-box textarea { width: 100%; font: inherit; padding: 8px; border-radius: var(--r-2); border: 1px solid var(--field-border); background: var(--card); color: var(--ink); }
.thesis-check { padding: 8px 0; border-top: 1px solid var(--border); }
.thesis-said { font-family: var(--serif); font-style: italic; }
.sat-bar [data-clock-off] { color: #CBD5E1; }
.ap-page .passage > p.small:first-child, .ap-page .passage > p.tiny.eyebrow + p.small { margin-bottom: 8px; }
/* On a wide screen the passage scrolls in its own pane, as on the exam. */
@media (min-width: 1000px) {
.ap-page .q-split.long .q-passages { position: sticky; top: 84px; max-height: calc(100vh - 180px); overflow-y: auto; }
}
/* ----- Strands (unity Job 1) ----- */
.strand-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.strand-card { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--soft); color: var(--ink); text-decoration: none; min-height: 56px; }
.strand-card:hover { border-color: var(--border-strong); }
.strand-card > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.strand-ring { flex: 0 0 auto; }
.strand-section { display: flex; flex-direction: column; gap: 10px; }
.strand-section > h2 { font-size: 20px; margin: 8px 0 0; display: flex; flex-direction: column; gap: 2px; }
.strand-open { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; max-width: 560px; }
.strand-open .strand-ring { grid-row: span 3; }
.vocab-words { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vocab-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); color: var(--ink); text-decoration: none; font-size: var(--fs-2); min-height: 32px; }
.vocab-chip.s-known { border-color: var(--green); }
.vocab-chip.s-due { border-color: #B45309; }
.vocab-points { display: inline-flex; gap: 2px; }
.vocab-points span { width: 6px; height: 6px; border-radius: 50%; background: var(--track); }
.vocab-points span.on { background: var(--primary); }
.vocab-word { display: flex; flex-direction: column; gap: 6px; }
.vocab-head { margin: 0; }
.vocab-w { font-family: var(--serif); font-size: 30px; }
.vocab-met { margin: 0; padding: 8px 12px; border-left: 3px solid var(--border-strong); font-family: var(--serif); font-size: 18px; display: flex; flex-direction: column; gap: 4px; }
.vocab-1913 li.closest { font-weight: 600; }
.vocab-prompt { display: block; font-size: 22px; font-family: var(--serif); }
.vocab-prompt.is-sentence { font-size: 19px; line-height: 1.45; }
/* ----- My desk and the Academy (unity Job 2) ----- */
.academy-schools { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 8px; text-align: left; }
.academy-schools li { display: flex; flex-direction: column; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--soft); }
.desk-tally { margin: 4px 0 0; }
.desk-classes { display: flex; flex-direction: column; gap: 10px; }
.desk-class { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--soft); }
.desk-class-head { display: flex; flex-direction: column; gap: 2px; }
.desk-class-title { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ink); }
.desk-next { gap: 10px; align-items: center; flex-wrap: wrap; }
.xw-col .b-stack { display: flex; flex-direction: column-reverse; width: 100%; max-width: 28px; border-radius: 4px 4px 0 0; overflow: hidden; min-height: 2px; }
.xw-en { background: var(--primary); }
.xw-hi { background: #8B5E34; }
.xw-ec { background: #1F6E54; }
.desk-key { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
.desk-key .k { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.xw-col .b-stack > span { display: block; flex-basis: 0; min-height: 1px; }
/* ----- Shelves (unity Job 3) ----- */
.shelves-back { margin: 0; }
.bt-strip.plain-strip { --bt-c: var(--ink); --bt-m: var(--border-strong); }
/* The name menu's "More" folds (Black Letter, Quill & Ink; unity Job 5). */
.menu details.menu-more > summary { list-style: none; cursor: pointer; padding: 10px 12px; min-height: 44px; display: flex; align-items: center; border-radius: var(--r-1); color: var(--muted); font-size: var(--fs-2); }
.menu details.menu-more > summary::-webkit-details-marker { display: none; }
.menu details.menu-more > summary::after { content: '▸'; margin-left: 6px; font-size: 11px; }
.menu details.menu-more[open] > summary::after { content: '▾'; }
.menu details.menu-more > summary:hover { background: var(--soft); }
.menu details.menu-more > button { padding-left: 24px; }
/* "Something's wrong here" (unity Job 6): a quiet link under notes and
explanations, opening a one-line box. */
.flag-wrap { display: block; margin-top: 4px; }
.mark-note .flag-wrap, .xq-feedback .flag-wrap { display: inline; margin: 0 0 0 6px; }
.flag-link { font-size: var(--fs-1); color: var(--muted); text-decoration: underline dotted; display: inline-flex; align-items: center; min-height: 24px; }
.flag-link:hover { color: var(--accent, var(--ink)); }
.flag-box { display: block; margin-top: 6px; max-width: 520px; }
.flag-box label { display: block; margin-bottom: 2px; }
.flag-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.flag-row input { flex: 1 1 220px; min-width: 0; min-height: 40px; }
.flag-msg:empty { display: none; }
.flag-sent { color: var(--ok, inherit); }
/* What this is (unity Job 6). */
.about-lead { font-size: 18px; line-height: 1.6; max-width: 68ch; }
.about-school h2, .about-school h3 { margin-bottom: 0; }
.about-sub { margin: 2px 0 8px; }
.about-room { margin: 10px 0 2px; }
.about-fold { text-align: left; margin: 14px 0 4px; }
.about-fold > summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.about-fold-body { max-height: 60vh; overflow: auto; padding: 4px 2px; }
.about-fold-body .card { padding: 12px 14px; }
/* The first sitting (unity Job 6). */
.first-sitting { border-left: 4px solid var(--primary); }
.fs-steps { counter-reset: none; margin: 8px 0; display: grid; gap: 8px; }
.fs-step { display: flex; gap: 10px; align-items: center; min-height: 40px; }
.fs-tick { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--primary); font-weight: 700; font-size: var(--fs-1); flex: 0 0 auto; }
.fs-step.done .fs-tick { background: var(--primary); color: #fff; }
.fs-step.done .fs-tick svg { width: 16px; height: 16px; }
.fs-step.done > span:not(.fs-tick) { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
/* Large type (unity Job 7): bigger text, more line spacing, Atkinson
Hyperlegible, in all three schools. The sizes here are px like the rest of
the sheet, so each common size is raised by name. */
html.large-type { --sans: 'Atkinson Hyperlegible', 'Public Sans', system-ui, sans-serif; }
html.large-type body { font-size: 19px; line-height: 1.7; }
/* Large type: .small, .tiny and .eyebrow follow the type scale (tokens.css). */
html.large-type .card h2 { font-size: 21px; }
html.large-type .card h3 { font-size: 19px; }
html.large-type .display { font-size: 44px; }
html.large-type .reader-text { font-family: 'Atkinson Hyperlegible', var(--serif); font-size: 24px; line-height: 1.8; }
html.large-type .reader-text p { margin-bottom: 1.1em; }
html.large-type .choice, html.large-type .btn { font-size: 18px; }
html.large-type .menu a, html.large-type .menu button { font-size: 17px; }
@media (max-width: 560px) {
html.large-type .display { font-size: 34px; }
html.large-type .reader-text { font-size: 21px; }
}
/* Lamplight and Quill & Ink keep their own faces for headings; the body and
the reading text take the large face. */
html.large-type.lamplight body, html.large-type.quill body { font-size: 19px; }
/* Read aloud (unity Job 7): the paragraph being read. */
.reader-text p.speaking { background: color-mix(in srgb, var(--primary) 12%, transparent); border-radius: 4px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 12%, transparent); }
.read-aloud-bar { display: inline-flex; gap: 8px; align-items: center; }
/* ---------- The bar stays at the top; Compact view (Nov 9) ---------- */
/* The bar (or a page's own white bar) stays at the top as the page scrolls;
--head-h is its height (js/compact.js), so headings scrolled to and other
things kept in view sit below it. */
.topbar { position: sticky; top: 0; z-index: 40; }
html { scroll-padding-top: calc(var(--head-h, 0px) + 12px); }
.subbar-link { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; border-bottom-color: color-mix(in srgb, currentColor 35%, transparent); }
.subbar-link:hover { border-bottom-color: currentColor; }
.subbar .name .subbar-link { color: inherit; }
.row2-toggle { display: none; min-height: 36px; min-width: 32px; border: 1px solid rgba(255,255,255,0.35); border-radius: var(--r-1); background: transparent; color: inherit; cursor: pointer; font-size: var(--fs-2); align-items: center; justify-content: center; }
.row2-toggle:hover { background: rgba(255,255,255,0.1); }
.topbar .nav-history { order: 0; }
.topbar .brand { order: 1; }
.topbar .nav { order: 2; margin-left: auto; }
.topbar-inner { justify-content: flex-start; }
.topbar .topbar-end { order: 3; }
/* Compact view: a smaller bar and tighter pages. The bar's pieces become one
row where they fit: the brand, the tabs, the name; then the second row (the
class button), which the small ▴ folds away. */
html.compact .topbar-inner { padding: 6px 20px; gap: 6px 10px; }
html.compact .brand { gap: 8px; }
html.compact .brand svg { width: 22px; height: 22px; }
html.compact .brand-name { font-size: 18px; }
html.compact .brand-sub { display: none; }
html.compact .nav { gap: 2px; }
html.compact .nav a { padding: 6px 10px; min-height: 36px; }
html.compact .namebtn { min-height: 36px; padding: 5px 12px; }
html.compact .topbar .nav-history .nav-more, html.compact .topbar .nav-history .nav-back { min-height: 36px; }
/* (Nov 9, 8:15 AM) In every view, not only Compact: the brand, the tabs and
the name share the first row; the second row (the class button, Economics'
Micro/Macro) sits below it on the right, and ▴ folds it away. */
.topbar-end { display: contents; }
.topbar .name-wrap { order: 3; margin-left: 8px; }
.topbar .row2-toggle { order: 4; display: inline-flex; }
.topbar-end > :not(.name-wrap):not(.row2-toggle) { order: 5; margin-left: auto; }
html.row2-off .topbar-end > :not(.name-wrap):not(.row2-toggle) { display: none; }
html.compact .subbar-inner { padding: 6px 20px; gap: 10px; }
html.compact .subbar-title .name { font-size: 16px; }
html.compact .back, html.compact .subbar-nav a { min-height: 36px; }
html.compact .demo-banner { padding: 3px 12px; font-size: 13px; }
html.compact .page { padding-top: 16px; padding-bottom: 32px; gap: 16px; }
html.compact .page.stack { gap: 14px; }
html.compact .col-main, html.compact .col-side { gap: 14px; }
html.compact .card { padding: 16px 18px; gap: 10px; }
html.compact .card.big { padding: 20px 22px; }
html.compact .display { font-size: 32px; }
html.compact .page-head { gap: 4px; }
html.compact .btn { min-height: 40px; padding-top: 7px; padding-bottom: 7px; }
html.compact .choice { padding: 8px 12px; min-height: 38px; }
html.compact .q-action { margin-top: 10px; }
/* A phone: the brand and the name on the first line, the tabs on one line
that scrolls sideways, then the class button. */
@media (max-width: 640px) {
.topbar-inner { gap: 6px 8px; }
.topbar .name-wrap { order: 2; margin-left: auto; }
.topbar .row2-toggle { order: 3; }
.topbar .nav { order: 4; flex-basis: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.topbar .nav::-webkit-scrollbar { display: none; }
.topbar .nav a { white-space: nowrap; flex: 0 0 auto; }
.topbar-end > :not(.name-wrap):not(.row2-toggle) { order: 5; flex-basis: 100%; }
.topbar .classbtn { width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .brand { gap: 8px; min-width: 0; }
.topbar .brand svg { width: 24px; height: 24px; flex: 0 0 auto; }
.topbar .brand-name { font-size: 17px; white-space: nowrap; }
.topbar .namebtn { padding: 6px 10px; }
.topbar-inner { padding-left: 12px; padding-right: 12px; }
.topbar .nav-history { margin-right: 0; }
.topbar .nav-history .nav-more, .topbar .nav-history .nav-back { min-width: 28px; }
html.compact .topbar-inner { padding: 6px 12px; }
}
/* Things kept in view sit below the bar. */
.q-page .col-side { top: calc(var(--head-h, 72px) + 12px) !important; max-height: calc(100vh - var(--head-h, 72px) - 24px) !important; }
.tutor-col { top: calc(var(--head-h, 72px) + 16px); }
.sat-bar { top: var(--head-h, 0px); }
.ws-outline-aside { top: calc(var(--head-h, 0px) + 12px); }
@media (min-width: 1000px) {
.ap-page .q-split.long .q-passages { top: calc(var(--head-h, 72px) + 12px); }
}
/* The Customize page. */
.customize .cz-grid { display: flex; flex-direction: column; gap: 10px; }
.customize .cz-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.customize .cz-choice { min-width: 190px; min-height: 44px; text-align: left; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--card, #fff); color: var(--ink); cursor: pointer; font: inherit; font-weight: 600; }
.customize .cz-choice[aria-pressed="true"] { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.customize .cz-choice:disabled { opacity: .5; cursor: default; }
.customize .cz-note { flex: 1 1 260px; }
.lib-middle { align-self: center; }
/* The line above a question (where he is, how many right) stays one line, so
answering doesn't push the question and its button down on a phone. */
.eu-q-page > .row.between:first-child, .ec-q-page > .row.between:first-child { flex-wrap: nowrap; }
.eu-q-page > .row.between:first-child > :first-child, .ec-q-page > .row.between:first-child > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eu-q-page > .row.between:first-child > :last-child, .ec-q-page > .row.between:first-child > :last-child { flex: none; }
/* ---------- The class Home page (Nov 9; main doc 10g) ---------- */
.class-home { gap: 22px; }
.class-home .track-banner .ch-reg { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px; }
.class-home .track-banner .ch-reg .register-name { color: var(--bt-m, #E6BA58); }
.class-home .track-banner .ch-reg .register-line, .class-home .track-banner .ch-reg .register-line a { color: var(--bt-tb, #E4E1D9); }
.class-home .track-banner .ch-reg .register-line a { text-decoration: underline; }
.ch-ring-bg { fill: none; stroke: var(--border, #DCE2EA); stroke-width: 6; }
.ch-ring-fg { fill: none; stroke: var(--green, #1E7A55); stroke-width: 6; stroke-linecap: round; }
.ch-journey { gap: 16px; }
.ch-j-head { display: flex; gap: 18px; align-items: center; }
.ch-j-head h2 { margin: 0 0 4px; }
.ch-j-line { margin: 0; }
.ch-big-n { font: 700 17px var(--sans, system-ui); fill: var(--ink); }
.ch-big-of { font: 500 12px var(--sans, system-ui); fill: var(--muted); }
.ch-path { list-style: none; margin: 0; padding: 26px 4px 4px; display: flex; gap: 0; overflow-x: auto; position: relative; scrollbar-width: thin; }
.ch-station { flex: 1 0 96px; position: relative; text-align: center; }
.ch-station::before { content: ''; position: absolute; top: 23px; left: -50%; width: 100%; height: 4px; background: var(--border, #DCE2EA); z-index: 0; }
.ch-station:first-child::before { display: none; }
.ch-station.is-done::before, .ch-station.is-here::before, .ch-station.is-begun::before { background: var(--green, #1E7A55); }
.ch-station a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--ink); padding: 0 4px; }
.ch-dot { display: block; background: var(--card, #fff); border-radius: 50%; }
.ch-dot-n { font: 700 15px var(--sans, system-ui); fill: var(--ink); }
.ch-station.is-done .ch-dot-n { fill: var(--green, #1E7A55); }
.ch-station.is-ahead .ch-dot-n { fill: var(--muted); }
.ch-station.is-here .ch-dot svg { filter: drop-shadow(0 0 0 transparent); }
.ch-station.is-here .ch-ring-bg { stroke: #F5D98B; }
.ch-st-name { font-size: var(--fs-1); font-weight: 600; line-height: 1.25; }
.ch-st-weeks { font-size: var(--fs-1); color: var(--muted); }
.ch-here { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: var(--fs-1); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--primary, #2457A6); border-radius: 999px; padding: 2px 8px; }
.ch-star { color: #B7791F; font-weight: 700; }
.ch-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.ch-grid:empty { display: none; }
.ch-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ch-steps { display: flex; flex-direction: column; gap: 0; }
.ch-step { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border); }
.ch-step:first-child { border-top: 0; padding-top: 4px; }
.ch-step-n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--soft, #EEF2F8); color: var(--primary, #2457A6); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ch-step-what { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ch-after { margin: 4px 0 0; }
.ch-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ch-tile { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); padding: 8px; border-radius: var(--r-2); border: 1px solid var(--border); }
.ch-tile:hover { background: var(--soft); }
.ch-tile > span { display: flex; flex-direction: column; }
.ch-tile-n { font: 700 14px var(--sans, system-ui); fill: var(--ink); }
.ch-lenses h2 { margin: 0; }
.ch-lenses ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ch-lens { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: var(--r-2); background: var(--card, #fff); border: 1px solid var(--border); text-decoration: none; color: var(--ink); height: 100%; }
.ch-lens:hover { border-color: var(--primary); }
.ch-units ol { display: flex; flex-direction: column; gap: 12px; }
.ch-unit { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px; border-radius: var(--r-2); }
.ch-unit.is-here { background: var(--soft, #EEF2F8); }
.ch-unit-name { font-weight: 600; text-decoration: none; color: var(--ink); }
.ch-unit-name:hover { text-decoration: underline; }
.ch-rcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ch-rcol h3 { font-size: var(--fs-2); margin: 0 0 8px; }
.ch-rcol li, .ch-wander li, .ch-picks li { display: flex; flex-direction: column; gap: 1px; padding: 5px 0; }
.ch-picks li.is-read > a { color: var(--muted); }
.ch-link { color: var(--green, #1E7A55); }
.ch-foot { text-align: center; }
@media (max-width: 860px) {
.ch-grid { grid-template-columns: 1fr; }
.ch-rcols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.ch-lenses ul, .ch-tiles { grid-template-columns: 1fr; }
.ch-step { flex-wrap: wrap; }
.ch-step .btn { margin-left: 42px; }
.ch-j-head { align-items: flex-start; }
.ch-big svg { width: 72px; height: 72px; }
}
html.compact .class-home, html.compact .ch-col, html.compact .ch-grid { gap: 14px; }
.ch-units ol, .ch-steps { padding: 0; margin: 0; }
/* ---------- Username sign-in (Nov 9) ---------- */
.creds-dialog { max-width: 520px; width: calc(100% - 32px); }
.creds { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 8px 0 16px; font-size: 17px; }
.creds dt { color: var(--muted); }
.creds dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.creds [data-cred-password], .creds [data-cred-username] { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 20px; letter-spacing: .02em; }
@media print {
html.printing-creds body > *:not(.creds-dialog) { display: none !important; }
html.printing-creds .creds-dialog { position: static; border: 0; box-shadow: none; }
html.printing-creds .creds-dialog .row { display: none; }
}
.signin-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--fs-1); margin: 6px 0; }
.signin-or::before, .signin-or::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.username-form { display: flex; flex-direction: column; gap: 10px; text-align: left; width: 100%; }
.username-form .field input { width: 100%; }
.username-form summary { cursor: pointer; font-weight: 600; color: var(--primary); text-align: center; }
/* ---------- Visitors: the Library open without signing in (Nov 9) ---------- */
.visitor-band { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 6px 16px; background: #FFF7E0; color: #5B4300; font-size: var(--fs-2); text-align: center; }
.visitor-band .btn { min-height: 32px; padding: 4px 14px; }
.visitor-end { display: flex; align-items: center; gap: 10px; }
.visitor-cz { color: rgba(255,255,255,.8); font-size: var(--fs-2); }
.visitor-cz:hover { color: #fff; }
.visitor-welcome { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.visitor-welcome p { margin: 0; max-width: 62ch; }
.choose-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.choose-card { display: flex; flex-direction: column; gap: 8px; }
.choose-card .btn { margin-top: auto; align-self: flex-start; }
.visitor-welcome { flex-direction: row; text-align: left; }
/* ---------- PC first (owner, Nov 9, 9:04 PM; art direction, pc-layout) ----------
"the priority is to work good on a pc ... screens that use the width of the
page and don't require unnecessary scrolling. especially on things like
questions." A PC is the first target; a phone stacks the same pieces.
tests-browser/one-screen.cjs holds every question to one 1366 x 768 screen. */
/* Wider pages on big screens: 1200px, then up to 1560px from 1500px wide.
Reading text keeps its own measure; the width goes to columns. */
@media (min-width: 1500px) {
.page, .page.narrow, .topbar-inner, .subbar-inner { max-width: 1560px; }
.page.q-page, body:has(.q-page) .subbar-inner, .eu-q-page, .ec-q-page { max-width: 1600px; }
}
/* One question layout in every school: the material left, the question right.
English and History already split; Economics' graph questions join them. */
@media (min-width: 1000px) {
.ec-q-page { max-width: 1440px; }
.ec-q-page form.card:has(> figure.g-fig) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; row-gap: 12px; align-items: start; }
.ec-q-page form.card:has(> figure.g-fig) > figure.g-fig { grid-column: 1; grid-row: 1 / span 6; margin: 0; }
.ec-q-page form.card:has(> figure.g-fig) > :not(figure) { grid-column: 2; }
.ec-q-page form.card:has(> figure.g-fig) .g-svg { width: 100%; max-width: 560px; height: auto; }
}
/* A lesson: the explanation left, the worked example right, so Start
questions is on the first screen. */
@media (min-width: 1100px) {
.page.narrow:has(> .col-main > .card.big > .lesson-card) { max-width: 1440px; }
.card.big:has(> .lesson-card):has(> .example) { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); column-gap: 36px; row-gap: 12px; align-items: start; padding: 24px 32px 26px; }
.card.big:has(> .lesson-card):has(> .example) > :not(.lesson-card):not(.example) { grid-column: 1 / -1; }
.card.big:has(> .lesson-card):has(> .example) > .lesson-card { grid-column: 1; }
.card.big:has(> .lesson-card):has(> .example) > .example { grid-column: 2; grid-row: span 2; }
}
/* The next step: one card, first on My desk, Today and class Home. */
.next-card { border-left: 5px solid var(--primary); }
.next-card > .eyebrow { color: var(--primary); }
html.quill .next-card { border-left-color: #7E1618; }
html.quill .next-card > .eyebrow { color: #7E1618; }
/* My desk and Today: the main column becomes two on a wide screen; the head
and the Next card span both. */
@media (min-width: 1300px) {
.page.desk, .page.today { max-width: 1560px; }
.page.desk > .col-main, .page.today > .col-main { display: block; columns: 2; column-gap: 20px; }
.page.desk > .col-main > *, .page.today > .col-main > * { break-inside: avoid; margin: 0 0 20px; }
.page.desk > .col-main > :is(.page-head, .next-card, .first-sitting), .page.today > .col-main > :is(.page-head, .next-card, .first-sitting) { column-span: all; }
.page.desk > .col-side, .page.today > .col-side { flex: 0 1 340px; }
}
/* Class Home: the banner and the Next card share the first row. */
@media (min-width: 1300px) {
.page.class-home { max-width: 1560px; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr); gap: 20px; align-items: start; }
.page.class-home > * { grid-column: 1 / -1; }
.page.class-home > :is(.track-banner, .page-head):has(+ .next-card) { grid-column: 1; }
.page.class-home > .next-card { grid-column: 2; align-self: stretch; }
.page.class-home > .track-banner:has(+ .next-card) .tb-main { max-width: 64%; position: relative; z-index: 1; }
.page.class-home > .track-banner:has(+ .next-card) .tb-title { font-size: clamp(34px, 2.6vw, 46px); }
.page.class-home > .track-banner:has(+ .next-card) .tb-hook { max-width: 30em; margin-right: 34%; }
/* The banner's picture keeps to its right part, so it never sits under the words or buttons (AP Lit's books, the SAT sheet). */
.page.class-home > .track-banner:has(+ .next-card) .tb-art { left: 38%; }
.class-home .ch-grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
}
/* ---------- Handed down to / Took from (Nov 10) ---------- */
.hand-me-downs .hmd-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-4, 16px) var(--sp-6, 28px); }
.hand-me-downs .hmd-h { margin: 6px 0 6px; font-family: var(--sans); font-size: var(--fs-2); font-weight: 700; color: var(--text2); }
.hand-me-downs .hmd-list { display: grid; gap: 10px; }
.hand-me-downs .hmd-item a { font-weight: 600; }
.hand-me-downs .hmd-item p { margin: 2px 0 0; max-width: 70ch; }
/* ---------- Components (design-components, Nov 10) ----------
One way to draw each thing in all three schools and the panel, on the tokens. */
/* Cards: one shape and one resting shadow (Quill & Ink keeps its candlelit card). */
.card { box-shadow: var(--sh-1); }
@media (max-width: 640px) { .card { padding: 16px; } .card.big { padding: 24px 18px 26px; } }
/* The question card: the stem, choices as 44px rows, the picked choice with an
accent edge, right and wrong with a mark and a word as well as colour, and
feedback with a thick edge in its colour. */
.choice { min-height: var(--target); border-radius: var(--r-2); transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.choice:has(input:checked):not(.is-correct):not(.is-wrong) { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.feedback { border-left-width: 5px !important; }
html.quill .choice:has(input:checked):not(.is-correct):not(.is-wrong) { border-color: #7E1618; box-shadow: inset 0 0 0 1px #7E1618; }
/* Chips: the smallest type, always a word. */
.chip { line-height: 1.35; }
/* Empty states: a line that says what will be here, how it comes, and the way there. */
.empty-state { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px; border: 1px dashed var(--border-strong); border-radius: var(--r-3); background: var(--soft); color: var(--text2); }
.empty-state > strong { font-family: var(--serif); font-size: var(--fs-4); font-weight: 600; color: var(--ink); line-height: var(--lh-head); }
.empty-state > p { margin: 0; max-width: var(--measure); }
.empty-state > .row { margin-top: 4px; }
html.quill .empty-state { border-color: #8E7340; background: rgba(239,227,198,.06); }
html.quill .empty-state > strong { color: #F0DFAF; }
/* Loading: a quiet line where the content will be, never a blank page. */
.loading-line { color: var(--muted); display: inline-flex; align-items: center; gap: 10px; }
.loading-line::before { content: ''; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btn-spin .9s linear infinite; opacity: .7; }
/* Toasts (for later use): bottom centre, a raised card, never the only copy of a message. */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: var(--ink); color: var(--card); padding: 10px 16px; border-radius: var(--r-2); box-shadow: var(--sh-2); font-size: var(--fs-2); }
html.quill .toast { background: #2A1A0E; color: #F2DFA6; }
/* Tables: a header row in small capitals, rules between rows, figures that line up; wide ones scroll in their own box. */
table.data { font-variant-numeric: tabular-nums; }
/* Motion: short and never blocking; none when the reader asks for less. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}
/* Words in a state's colour (were inline styles in the views). */
.is-right { color: var(--right); }
.is-due { color: var(--due); }
/* Titles from the type scale (they were 22-36px inline): a page title, a
section title. They follow Large type, as inline sizes did not. */
html .display.heading-page, html .display.result-title { font-size: var(--fs-6); }
html .display.heading-section { font-size: var(--fs-5); }
@media (max-width: 640px) { html .display.heading-page, html .display.result-title { font-size: var(--fs-5); } }
/* The subbar's kicker by kind (was an inline colour). */
.kicker-lesson { color: var(--info); }
.kicker-review { color: var(--due); }
.kicker-reading { color: var(--link); }
.kicker-honours { color: #7A2E2E; }
html.lamplight .kicker-honours { color: var(--primary); }
.kicker-heart { color: #5B2A86; }
html.lamplight .kicker-heart { color: #5B2A5E; }
/* Text styles that were inline in the views (design-components, Nov 10). */
html .figure-num { font-size: var(--fs-5); font-weight: 700; font-variant-numeric: tabular-nums; }
html .figure-line { font-size: var(--fs-4); }
html h2.card-title { font-family: var(--serif); font-size: var(--fs-4); font-weight: 600; line-height: var(--lh-head); }
html .link-strong { font-weight: 600; font-size: var(--fs-2); }
html .name-link { font-weight: 700; font-size: var(--fs-3); }
html label.q-label { font-size: var(--fs-3); color: var(--ink); }
html h2.label-head { font-size: var(--fs-2); }
html table th.rubric-name { text-transform: none; letter-spacing: 0; color: var(--ink); font-size: var(--fs-2); }
/* The phone bar (design-pages, Nov 10; owner's choice 5). The tabs fade at
either edge while there are more tabs that way; and while he scrolls down
the bar folds to its row of tabs (js/compact.js sets html.bar-folded), and
opens again on the way up. */
@media (max-width: 640px) {
.topbar .nav.more-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.topbar .nav.more-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.topbar .nav.more-l.more-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
html.bar-folded .topbar :is(.brand, .row2-toggle, .nav-history) { display: none; }
/* The name stays at the end of the row of tabs, so his menu is always one tap away. */
html.bar-folded .topbar .nav { flex: 1 1 0; min-width: 0; order: 2; }
html.bar-folded .topbar .name-wrap { order: 3; margin-left: 4px; }
html.bar-folded .topbar .topbar-end > :not(.name-wrap):not(.row2-toggle) { display: none; }
html.bar-folded .topbar-inner { padding-top: 4px; padding-bottom: 4px; }
}
/* Large type on a phone: the class button shortens to the screen (it pushed
every page 40px sideways). */
@media (max-width: 640px) {
.topbar .topbar-end > :not(.name-wrap):not(.row2-toggle) { min-width: 0; max-width: 100%; }
}
@media (max-width: 640px) {
table.history { display: block; max-width: 100%; overflow-x: auto; }
}
/* A laptop: the tabs sit a little closer, so a class with an extra tab (AP Lit's
Practice sets) keeps the brand, tabs, name and ▴ on one row. */
@media (min-width: 1000px) and (max-width: 1499px) {
.topbar .nav { gap: 2px; }
.topbar .nav a { padding-left: 11px; padding-right: 11px; }
}
@media (max-width: 640px) { html.bar-folded header.topbar { margin-bottom: var(--fold-gap, 0px); } }