/* Practice screens. Colors and type come from the tokens in site.css. */
.top-nav { display: flex; gap: 6px; margin-right: auto; margin-left: 18px; }
/* Header tabs sit on the navy header. Square corners, like every other button (Nick: not pill shaped). */
.top-nav a { font-size: 12.5px; font-weight: 600; color: var(--on-navy); text-decoration: none; padding: 8px 14px; border-radius: var(--r-btn); box-shadow: inset 0 0 0 1px rgba(239, 232, 220, 0.28); }
.top-nav a:hover { box-shadow: inset 0 0 0 1px rgba(239, 232, 220, 0.6); }
.top-nav a.on { background: var(--terra); color: #fff; box-shadow: none; }
.practice-card { margin-bottom: 16px; }
.foot.legal { margin: 0 auto; padding: 0 24px 34px; max-width: 760px; font-size: 11px; }
/* The second button in a pair. Solid white with a full navy outline, so it reads as a button and not as a disabled one. */
.btn.ghost-navy { background: #fff; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--navy); }
.btn.ghost-navy:hover { background: var(--navy); color: var(--on-navy); filter: none; }

.pr .lib-head { align-items: flex-end; }
.pr-note { background: var(--terra-tint); color: #7A2E18; font-size: 13px; padding: 10px 16px; border-radius: var(--r); margin-bottom: 14px; }
.pr-units { margin: 26px 0 0; }
.pr .sect-head { margin: 22px 0 14px; }
.pr .sect-head h2 { font-size: 26px; }

/* proficiency chips, one color step per level */
.lad { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; white-space: nowrap; background: rgba(122, 136, 150, 0.14); color: #7A8896; }
.lad1 { background: rgba(122, 136, 150, 0.22); color: #55606B; }
.lad2 { background: #EBCDB0; color: #7C4A16; }
.lad3 { background: #C9DFD3; color: #235A43; }
.lad4 { background: var(--navy); color: var(--on-navy); }
.lad-counts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* topic list */
.tp-list { padding: 4px 22px; }
.tp { padding: 16px 0; border-top: 1px solid var(--line-soft); }
.tp:first-child { border-top: 0; }
.tp-head { display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; }
.tp-head > b { flex: none; width: 40px; font-family: var(--serif); font-size: 21px; color: var(--navy); }
.tp-title { flex: 1 1 260px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.tp-next { font-size: 12px; color: var(--mute); }
.tp-none .tp-title, .tp-none > .tp-head > b { color: var(--mute); font-weight: 500; }
.sk { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 8px 0 0 52px; }
.sk-title { flex: 1 1 220px; font-size: 13.5px; color: #4a4a4a; }
.sk-levels { display: flex; gap: 6px; flex-wrap: wrap; }
.lvl { font-size: 12px; font-weight: 600; text-decoration: none; padding: 6px 13px; border-radius: 5px; color: var(--navy); box-shadow: inset 0 0 0 1px rgba(31, 46, 61, 0.22); background: var(--panel); }
.lvl:hover { color: var(--terra); box-shadow: inset 0 0 0 1px var(--terra); }
.lvl.tried { box-shadow: inset 0 0 0 1px var(--terra-2); }
.lvl.done { background: var(--navy); color: var(--on-navy); box-shadow: none; }
.how { margin-top: 16px; padding: 16px 22px; font-size: 13.5px; line-height: 1.65; color: #4a4a4a; }
.how summary { cursor: pointer; font-weight: 600; color: var(--navy); }
.how ol { margin: 12px 0 0; padding-left: 20px; }
.how p { margin: 12px 0 0; }

/* a deck */
.pr-top { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; margin-bottom: 16px; }
.pr-title { flex: 1 1 240px; font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1.1; color: var(--navy); }
.pr-title small { display: block; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra); margin-top: 5px; }
.pr-dots { display: flex; gap: 5px; }
.pr-dots i { width: 13px; height: 13px; border-radius: 999px; background: rgba(31, 46, 61, 0.12); }
.pr-dots i.ok { background: #4F7A52; }
.pr-dots i.no { background: var(--terra); }
.pr-dots i.now { box-shadow: inset 0 0 0 2px var(--navy); background: transparent; }
.pr-card { display: grid; grid-template-columns: 1.15fr 1fr; align-items: start; }
.pr-q { padding: 28px 30px; min-width: 0; }
.pr-q .pill { display: inline-block; margin-bottom: 14px; }
.q { font-size: 17px; line-height: 1.75; color: var(--ink); }
.q .katex { font-size: 1.12em; }
.pr-a { padding: 28px 30px; background: var(--panel); border-left: 1px solid var(--line); min-height: 100%; min-width: 0; align-self: stretch; }
.ans-row { display: flex; align-items: center; gap: 12px; }
.ans-label { flex: none; font-size: 17px; }
.ans { flex: 1; min-width: 0; font-family: var(--sans); font-size: 18px; padding: 13px 14px; border: 1.5px solid rgba(31, 46, 61, 0.3); border-radius: 6px; background: #fff; color: var(--ink); }
.ans:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(31, 46, 61, 0.1); }
.ans:disabled { background: var(--card); color: #555; }
.keys { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.key { font-family: var(--sans); font-size: 14px; font-weight: 600; padding: 9px 16px; border-radius: 6px; border: 1px solid rgba(31, 46, 61, 0.22); background: var(--card); color: var(--navy); cursor: pointer; }
.key:hover:not(:disabled) { border-color: var(--navy); }
.preview { min-height: 34px; margin-top: 10px; font-size: 18px; color: var(--navy); overflow-x: auto; overflow-y: hidden; }
.pv-wait { color: var(--mute); }
.ans-hint { font-size: 12px; line-height: 1.5; color: var(--mute); margin-top: 6px; }
.pr-btns { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 18px; }
.pr-btns .ans-hint { flex-basis: 100%; }
.choices { display: flex; flex-direction: column; gap: 8px; }
.choice { text-align: left; font-family: var(--sans); font-size: 15px; padding: 13px 16px; border-radius: 6px; border: 1.5px solid rgba(31, 46, 61, 0.2); background: #fff; color: var(--ink); cursor: pointer; }
.choice.on { border-color: var(--navy); background: rgba(31, 46, 61, 0.06); box-shadow: inset 4px 0 0 var(--navy); }
.tf { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line-soft); }
.tf-n { flex: none; width: 26px; font-family: var(--serif); font-weight: 700; font-size: 18px; color: var(--navy); }
.tf-s { flex: 1; font-size: 15px; line-height: 1.5; }
.tf-b { flex: none; display: flex; gap: 4px; }
.tf-b button { font-family: var(--sans); font-size: 12.5px; font-weight: 600; padding: 8px 12px; border-radius: 5px; border: 1px solid rgba(31, 46, 61, 0.22); background: #fff; color: var(--navy); cursor: pointer; }
.tf-b button.on { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
.fb { margin-top: 18px; padding: 12px 16px; border-radius: 6px; font-size: 14.5px; line-height: 1.6; }
.fb.ok { background: #E1ECDF; color: #24482A; }
.fb.no { background: var(--terra-tint); color: #6E2A16; }
.fb.nudge { background: rgba(31, 46, 61, 0.07); color: var(--navy); }
.sol { margin-top: 18px; }
.sol .eyebrow { margin: 16px 0 8px; }
.sol-ans { font-size: 19px; color: var(--navy); }
.steps { margin: 0; padding-left: 22px; font-size: 14.5px; line-height: 1.75; color: #333; }
.steps li { margin-bottom: 9px; padding-left: 4px; }
.steps .katex-display { margin: 8px 0 4px; }
.sol-more { margin-top: 14px; font-size: 13px; }
.sol-more summary { cursor: pointer; font-weight: 600; color: var(--navy); }

/* pictures */
.plot { display: block; max-width: 100%; height: auto; margin: 18px 0 0; }
.plot .pg { stroke: rgba(31, 46, 61, 0.11); stroke-width: 1; }
.plot .pa { stroke: var(--navy); stroke-width: 1.4; }
.plot .pd { stroke: var(--terra); stroke-width: 1.3; stroke-dasharray: 6 5; }
.plot .pc { fill: none; stroke: var(--terra); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.plot .pc.palt { stroke: var(--navy); }
.plot .pc.pdash { stroke-dasharray: 7 5; }
.plot .pf { fill: var(--terra); stroke: var(--terra); stroke-width: 2; }
.plot .po { fill: var(--card); stroke: var(--terra); stroke-width: 2.2; }
/* In a slope field the axes are faint, so a flat segment lying on an axis can be seen. */
.plot .pax { opacity: 0.3; }
/* Tick labels in a slope field get a pale outline so a segment behind them does not hide them. */
.plot .ptf { paint-order: stroke; stroke: var(--card); stroke-width: 4px; stroke-linejoin: round; font-weight: 600; }
.plot .ps { stroke: var(--navy); stroke-width: 1.7; stroke-linecap: round; }
.plot .psh { fill: rgba(199, 90, 60, 0.16); stroke: none; }
.plot .pt { font-family: var(--sans); font-size: 10.5px; fill: var(--mute); }
.plot .pi { font-style: italic; font-size: 12px; fill: var(--navy); }
.plot .pm { font-size: 12px; fill: var(--navy); font-weight: 600; }
.vt-wrap { overflow-x: auto; margin: 18px 0 0; }
.vt { border-collapse: collapse; font-size: 15px; }
.vt th, .vt td { border: 1px solid rgba(31, 46, 61, 0.22); padding: 9px 14px; text-align: center; white-space: nowrap; }
.vt th { background: rgba(31, 46, 61, 0.06); font-weight: 600; }

/* summary */
.sum { padding: 34px 36px; max-width: 760px; }
.sum h1 { font-family: var(--serif); font-size: 38px; line-height: 1.05; margin: 0 0 12px; color: var(--navy); }
.sum-line { font-size: 15px; line-height: 1.65; margin: 0 0 6px; }
.sum-line.ok { color: #24482A; }
.sum-line.no { color: #6E2A16; }
.missed { margin: 0 0 6px; padding-left: 20px; font-size: 13.5px; line-height: 1.7; color: #4a4a4a; }
.sum .eyebrow { margin: 20px 0 8px; }
.mvs { margin: 14px 0 4px; }
.mv { display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; padding: 11px 0; border-top: 1px solid var(--line-soft); font-size: 14px; }
.mv > b { flex: none; width: 36px; font-family: var(--serif); font-size: 19px; color: var(--navy); }
.mv > span:nth-child(2) { flex: 1 1 220px; font-weight: 600; }

@media (max-width: 860px) {
  .pr-card { grid-template-columns: 1fr; }
  .pr-a { border-left: 0; border-top: 1px solid var(--line); }
  .pr-q, .pr-a { padding: 22px 18px; }
  .top-nav { margin-left: 4px; }
  .top-nav a { padding: 7px 10px; }
  .sk { padding-left: 0; }
  .tp-list { padding: 4px 16px; }
  .sum { padding: 24px 20px; }
  .sum h1 { font-size: 30px; }
  .tf { flex-wrap: wrap; }
  .tf-b { margin-left: 36px; }
}

/* AP practice: timed sets, free response, full exams */
.ap-card { padding: 24px 28px; margin-bottom: 14px; }
.ap-card h2 { font-family: var(--serif); font-size: 27px; line-height: 1.1; margin: 0 0 8px; color: var(--navy); }
.ap-card .eyebrow { margin-bottom: 8px; }
.ap-card p { font-size: 14px; line-height: 1.65; color: #444; margin: 0 0 4px; max-width: 760px; }
.ap-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.ap-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ap-table td { padding: 10px 14px 10px 0; border-top: 1px solid var(--line-soft); }
.t-dim { font-size: 12px; color: var(--mute); }
.clock { font-family: var(--serif); font-weight: 700; font-size: 30px; color: var(--navy); font-variant-numeric: tabular-nums; }
.clock.low { color: var(--terra); }
.choice.mc { display: flex; gap: 14px; align-items: baseline; }
.choice.mc b { flex: none; font-family: var(--serif); font-size: 18px; color: var(--navy); }
.palette-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.palette-row .grow { flex: 1; }
.palette { font-family: var(--sans); font-size: 12.5px; font-weight: 600; min-width: 36px; padding: 8px 10px; border-radius: 5px; border: 1px solid rgba(31, 46, 61, 0.22); background: var(--card); color: var(--navy); cursor: pointer; }
.palette.set { background: rgba(31, 46, 61, 0.14); }
.palette.on { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
.frq { padding: 28px 32px; }
.frq-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.frq-part { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 16px 0 6px; border-top: 1px solid var(--line-soft); margin-top: 16px; }
.frq-part > b { flex: none; width: 26px; font-family: var(--serif); font-size: 22px; color: var(--terra); line-height: 1.4; }
.frq-part > .q { flex: 1 1 0; min-width: 0; }
.frq-part > .sol, .frq-part > .tf { flex-basis: 100%; }
.tf.pt .tf-n { width: 34px; font-size: 14px; font-family: var(--sans); color: var(--terra); }
.sum.wide { max-width: none; }
.proj { background: var(--navy); color: var(--on-navy); border-radius: var(--r); padding: 22px 26px; margin: 14px 0 6px; }
.proj .eyebrow { color: var(--terra-2); margin: 0 0 4px; }
.proj-n { font-family: var(--serif); font-weight: 700; font-size: 54px; line-height: 1; }
.proj p { font-size: 13.5px; line-height: 1.6; margin: 10px 0 0; max-width: 720px; }
.proj .t-dim { color: rgba(239, 232, 220, 0.66); }
.rv { border-top: 1px solid var(--line); padding: 20px 0 8px; }
.rv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rv-head > b { font-family: var(--serif); font-size: 22px; color: var(--navy); }
.rv-mark { font-size: 12px; font-weight: 600; }
.rv.ok .rv-mark { color: #2F5A33; }
.rv.no .rv-mark { color: #9A3A22; }
.rv-c { display: grid; grid-template-columns: 26px minmax(90px, auto) 1fr; gap: 4px 12px; align-items: baseline; padding: 9px 12px; border-radius: 5px; margin-top: 6px; font-size: 14px; background: rgba(31, 46, 61, 0.035); }
.rv-c > b { font-family: var(--serif); font-size: 16px; color: var(--navy); }
.rv-c.right { background: #E1ECDF; }
.rv-c.picked { background: var(--terra-tint); }
.rv-why { font-size: 13px; line-height: 1.55; color: #444; }
@media (max-width: 860px) { .rv-c { grid-template-columns: 26px 1fr; } .rv-why { grid-column: 1 / -1; } .frq { padding: 22px 18px; } }

.notes-link { padding-top: 10px; }
.notes-link .link-btn { font-size: 12px; font-weight: 600; color: var(--terra); border-color: rgba(199, 90, 60, 0.35); }
.after-miss.notes-link { padding-top: 16px; }
.top-nav a { white-space: nowrap; }
@media (max-width: 620px) {
  .top-in { flex-wrap: wrap; row-gap: 8px; }
  .top-nav { order: 3; flex-basis: 100%; margin: 0; }
}

/* ============================================================================================
   Sidebar layout, used by Practice and by AP Exam Practice.
   Left: a nested list (units, then topics). Right: one page at a time.
   ============================================================================================ */
.wrap.with-side { max-width: 1320px; display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 28px; }
.side { position: sticky; top: 84px; max-height: calc(100vh - 104px); overflow-y: auto; padding-right: 6px; }
.side-fold > summary { display: none; }
.side-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--navy); text-decoration: none; }
.side-link:hover { background: rgba(31, 46, 61, 0.06); color: var(--navy); }
.side-link.on { background: var(--navy); color: var(--on-navy); }
.side-link .count { font-size: 11px; font-weight: 700; background: var(--terra); color: #fff; border-radius: 4px; padding: 2px 8px; }
.side-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mute); padding: 20px 14px 8px; }
.side-note { font-size: 12px; line-height: 1.6; color: var(--mute); padding: 18px 14px; border-top: 1px solid var(--line); margin-top: 14px; }
.side-unit { border-top: 1px solid var(--line-soft); }
.side-unit-head { display: flex; align-items: stretch; border-radius: 8px; }
.side-unit-head a { flex: 1; min-width: 0; padding: 11px 6px 11px 14px; font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--navy); text-decoration: none; }
.side-unit-head a small { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--terra); margin-bottom: 2px; }
.side-unit-head button { flex: none; width: 38px; background: none; border: 0; cursor: pointer; color: var(--mute); display: flex; align-items: center; justify-content: center; border-radius: 8px; }
.side-unit-head button svg { width: 15px; height: 15px; transition: transform .15s; transform: rotate(-90deg); }
.side-unit.open .side-unit-head button svg { transform: none; }
.side-unit-head:hover, .side-unit-head button:hover { background: rgba(31, 46, 61, 0.05); }
.side-unit-head.on { background: rgba(31, 46, 61, 0.09); }
.side-topics { padding: 2px 0 10px; }
.side-topic { display: grid; grid-template-columns: 34px 1fr 12px; gap: 6px; align-items: baseline; padding: 7px 10px 7px 14px; border-radius: 7px; font-size: 12.5px; line-height: 1.4; color: #3f4650; text-decoration: none; }
.side-topic b { font-family: var(--serif); font-size: 15px; color: var(--navy); }
.side-topic:hover { background: rgba(31, 46, 61, 0.05); color: var(--navy); }
.side-topic.on { background: var(--card); box-shadow: inset 3px 0 0 var(--terra); color: var(--navy); font-weight: 600; }
.side-topic.none { color: #a3a8ae; }
.side-topic.none b { color: #a3a8ae; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 999px; align-self: center; }
.lad0 { background: rgba(122, 136, 150, 0.22); }
.main { min-width: 0; }
.page-title { font-family: var(--serif); font-weight: 700; font-size: 42px; line-height: 1.05; letter-spacing: -0.01em; color: var(--navy); margin: 0 0 20px; }
.page-title small { display: block; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--terra); margin-bottom: 8px; }
.crumb { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--mute); text-decoration: none; margin-bottom: 10px; }
.crumb::before { content: "← "; }
.crumb:hover { color: var(--terra); }
.lead { font-size: 15.5px; line-height: 1.7; color: #444; max-width: 760px; margin: -6px 0 22px; }
.main .sect-head { margin: 30px 0 14px; }
.main .sect-head h2 { font-size: 25px; }

/* overview */
.rv-card, .up-card, .practice-next { display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; padding: 22px 26px; margin-bottom: 14px; }
.rv-card h2 { font-family: var(--serif); font-size: 27px; line-height: 1.1; margin: 0 0 4px; color: var(--navy); }
.rv-card p, .up-card p, .practice-next p { margin: 0; font-size: 14px; line-height: 1.6; color: #444; }
.up-card h3, .practice-next h3 { font-size: 17px; font-weight: 600; margin: 4px 0 2px; color: var(--navy); }
.up-card .eyebrow { margin: 0; }
.up-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.unit-rows, .topic-rows, .opt-rows { padding: 4px 22px; }
.unit-row { display: grid; grid-template-columns: 30px minmax(120px, 1.4fr) minmax(90px, 1fr) auto; gap: 16px; align-items: center; padding: 15px 0; border-top: 1px solid var(--line-soft); text-decoration: none; color: var(--ink); }
.unit-row:first-child, .topic-row:first-child, .opt-row:first-child { border-top: 0; }
.unit-row b, .topic-row > b { font-family: var(--serif); font-size: 22px; color: var(--navy); }
.unit-row-name { font-size: 14.5px; font-weight: 600; }
.unit-row-meta { font-size: 12px; color: var(--mute); white-space: nowrap; }
.unit-row:hover .unit-row-name, .topic-row:hover .topic-row-title { color: var(--terra); }
.seg { display: flex; height: 9px; border-radius: 999px; overflow: hidden; background: rgba(122, 136, 150, 0.14); }
.seg i { display: block; }
.legend-row { display: flex; gap: 8px 18px; flex-wrap: wrap; font-size: 12px; color: var(--mute); margin: 12px 4px 0; }
.legend-row > span { display: flex; align-items: center; gap: 6px; }

/* one unit */
.topic-row { display: flex; align-items: center; gap: 16px; padding: 15px 0; border-top: 1px solid var(--line-soft); text-decoration: none; color: var(--ink); }
.topic-row > b { flex: none; width: 46px; }
.topic-row-main { flex: 1; min-width: 0; }
.topic-row-title { display: block; font-size: 14.5px; font-weight: 600; }
.topic-row small { display: block; font-size: 12px; color: var(--mute); margin-top: 2px; }
.topic-row.none { color: var(--mute); }
.topic-row.none > b, .topic-row.none .topic-row-title { color: #a3a8ae; font-weight: 500; }
.bar-mini { flex: none; width: 70px; height: 6px; border-radius: 999px; background: rgba(122, 136, 150, 0.18); overflow: hidden; }
.bar-mini span { display: block; height: 100%; background: var(--navy); }
.topic-row .go { color: var(--mute); }

/* one topic */
.topic-status { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; font-size: 13.5px; color: #555; margin: -6px 0 22px; }
.link-btn.notes { color: var(--terra); border-color: rgba(199, 90, 60, 0.35); font-size: 12.5px; }
.skill { padding: 20px 24px 12px; margin-bottom: 14px; }
.skill-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.skill-head h3 { flex: 1; font-family: var(--serif); font-size: 24px; line-height: 1.15; margin: 0; color: var(--navy); }
.pill.weak, .pill.check { background: var(--terra-tint); color: #8A341C; }
.pill.fresh { background: #DCE6CF; color: #46622F; }
.level { display: flex; align-items: center; gap: 14px; padding: 13px 4px; border-top: 1px solid var(--line-soft); text-decoration: none; color: var(--ink); }
.level-n { flex: none; width: 34px; height: 34px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 1.5px rgba(31, 46, 61, 0.28); color: var(--navy); }
.level-n svg { width: 16px; height: 16px; }
.level.learn .level-n { box-shadow: none; background: var(--terra-tint); color: var(--terra); }
.level.tried .level-n { box-shadow: inset 0 0 0 1.5px var(--terra); }
.level.done .level-n { background: var(--navy); color: var(--on-navy); box-shadow: none; }
.level-main { flex: 1; min-width: 0; }
.level-main b { display: block; font-size: 14.5px; font-weight: 600; color: var(--navy); }
.level-main small { display: block; font-size: 12.5px; color: var(--mute); margin-top: 1px; }
.level-go { font-size: 13px; font-weight: 600; color: var(--mute); white-space: nowrap; }
.level:hover .level-go { color: var(--terra); }
.pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 22px; font-size: 13px; font-weight: 600; }
.pager a { color: var(--navy); text-decoration: none; max-width: 48%; }
.pager a:hover { color: var(--terra); }

/* callouts, used on the AP Exam Practice pages */
.callout { border-radius: var(--r); padding: 18px 22px; margin: 20px 0; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--navy); font-size: 15.5px; line-height: 1.75; }
.callout p { margin: 0 0 10px; }
.callout p:last-child { margin-bottom: 0; }
.callout-title { font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy); margin-bottom: 10px; }
.callout.note { border-left-color: var(--mute); }

/* ============================================================================================
   A lesson. One continuous page set in a single reading column, with no cards.
   Structure comes from type: a rule above each example, a line down the side of a solution,
   and a tinted band only for the statements a student has to remember.
   ============================================================================================ */
.lesson { max-width: 740px; }
.lesson .page-title { margin-bottom: 26px; }
.lesson p { font-size: 16.5px; line-height: 1.85; color: #2b2b2b; margin: 0 0 18px; }
.lesson h2 { font-family: var(--serif); font-weight: 700; font-size: 31px; line-height: 1.15; color: var(--navy); margin: 54px 0 14px; }
.lesson h3 { font-family: var(--serif); font-weight: 700; font-size: 24px; line-height: 1.2; color: var(--navy); margin: 30px 0 10px; }
.lesson .katex { font-size: 1.12em; }
.lesson .katex-display { margin: 18px 0; overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
/* Only our own drawings. KaTeX draws a square-root sign as an svg, and a blanket rule here collapsed it. */
.lesson svg.plot, .lesson svg.sketch { max-width: 100%; height: auto; }
.lesson b { font-weight: 600; color: var(--navy); }
.tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--terra); }
.tag.soft { color: var(--mute); }
.tag.navy { color: var(--navy); }
.lesson ul.plain, .lesson ol.plain { margin: 0 0 18px; padding-left: 24px; font-size: 16.5px; line-height: 1.8; }
.lesson .plain li { margin-bottom: 8px; }
.lesson .steps { margin: 8px 0 0; padding-left: 24px; font-size: 15.5px; line-height: 1.8; color: #2b2b2b; }
.lesson .steps li { margin-bottom: 10px; padding-left: 6px; }
.lesson .steps li::marker { color: var(--terra); font-weight: 600; }

/* the statements to remember: a definition, a theorem, a method */
.stmt { margin: 28px 0 30px; padding: 22px 28px 20px; background: var(--card); border-left: 4px solid var(--terra); border-radius: 0 10px 10px 0; }
.stmt.note { border-left-color: var(--navy); }
.stmt-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.stmt-title { font-family: var(--serif); font-weight: 700; font-size: 23px; line-height: 1.15; color: var(--navy); }
.stmt p { margin: 0 0 10px; }
.stmt p:last-child, .stmt ol:last-child, .stmt ul:last-child { margin-bottom: 0; }
.stmt ol, .stmt ul { margin: 0; padding-left: 24px; font-size: 16px; line-height: 1.8; }
.stmt li { margin-bottom: 8px; padding-left: 4px; }
.stmt li::marker { color: var(--terra); font-weight: 600; }
.stmt .katex-display { margin: 14px 0; }
.stmt .katex-display > .katex { font-size: 1.4em; }

/* a picture beside a statement, and a row of pictured cases */
.stmt-cols { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 28px; align-items: center; }
.stmt-cols > * { min-width: 0; }
.stmt { min-width: 0; overflow-wrap: anywhere; }
.stmt-fig { margin: 0; text-align: center; }
.stmt-fig figcaption, .case figcaption { font-size: 13.5px; line-height: 1.6; color: #4d5560; }
.stmt-fig figcaption { max-width: 270px; margin: 4px auto 0; }
.cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px 22px; margin: 14px 0 6px; }
.case { margin: 0; }
.case .sketch { width: 100%; height: auto; }
.case figcaption { margin-top: 6px; font-size: 14.5px; line-height: 1.65; color: #2b2b2b; }
.case figcaption > b:first-child { display: block; font-family: var(--serif); font-size: 21px; font-weight: 700; color: var(--terra); margin-bottom: 2px; }
.sketch { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.sketch .sk-a { stroke: rgba(31, 46, 61, 0.55); stroke-width: 1.2; }
.sketch .sk-c { fill: none; stroke: var(--navy); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.sketch .sk-c.hot { stroke: var(--terra); }
.sketch .sk-c.dash { stroke-dasharray: 6 5; stroke-width: 1.7; }
.sketch .sk-l { stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; }
.sketch .sk-l.hot { stroke: var(--terra); stroke-width: 2; }
.sketch .sk-d { stroke: var(--terra); stroke-width: 1.3; stroke-dasharray: 6 5; }
.sketch .sk-g { stroke: rgba(31, 46, 61, 0.45); stroke-width: 1; stroke-dasharray: 2 4; }
.sketch .sk-f { fill: var(--navy); }
.sketch .sk-p { fill: var(--terra); stroke: var(--card); stroke-width: 1.5; }
.sketch .sk-o { fill: var(--card); stroke: var(--navy); stroke-width: 2; }
.sketch .sk-t { font-family: var(--serif); font-style: italic; font-size: 17px; font-weight: 700; fill: var(--navy); }
.sketch .sk-t.hot { fill: var(--terra); }
.lfig .sketch { margin: 0; }

/* key facts: the short list to come back to */
.keyfacts { margin: 22px 0 30px; padding: 20px 28px 8px; background: var(--card); border-top: 3px solid var(--navy); border-radius: 0 0 10px 10px; }
.keyfacts ul { list-style: none; margin: 8px 0 0; padding: 0; }
.fact { position: relative; padding: 14px 0 14px 26px; border-top: 1px solid var(--line-soft); font-size: 16px; line-height: 1.75; color: #2b2b2b; }
.fact:first-child { border-top: 0; }
.fact::before { content: ""; position: absolute; left: 2px; top: 24px; width: 8px; height: 8px; background: var(--terra); border-radius: 2px; }
.fact-term { display: block; font-size: 15px; font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.fact .katex { font-size: 1.26em; }
.fact .katex-display { margin: 12px 0 6px; }
.fact .katex-display > .katex { font-size: 1.32em; }
.fact.formula { padding: 16px 0; }
.fact.formula::before { display: none; }
.fact.formula .katex-display { margin: 4px 0; }
.fact.formula .katex-display > .katex { font-size: 1.5em; }

/* figures */
.lfig { margin: 24px 0 26px; overflow-x: auto; }
.lfig figcaption { font-size: 13.5px; line-height: 1.6; color: var(--mute); margin-top: 8px; }

/* a worked example */
.ex { margin: 34px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.ex-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.ex-title { font-size: 15px; font-weight: 600; color: var(--navy); }
.ex .q { font-size: 17.5px; line-height: 1.75; color: #1f2a35; }
.ex .q .katex { font-size: 1.14em; }
.ex-choices { margin: 12px 0 0; padding-left: 24px; font-size: 16px; line-height: 1.85; }
.ex-sol { margin: 16px 0 0; padding: 2px 0 2px 22px; border-left: 2px solid rgba(199, 90, 60, 0.38); }
.ex-ans { display: flex; align-items: baseline; gap: 14px; margin-top: 14px; font-size: 17px; color: var(--navy); }
.ex-val { font-weight: 600; }
.lesson p.ex-note { font-size: 15px; line-height: 1.75; color: #4d5560; margin: 10px 0 0; }
.ex + h2, .ex + .more-head { margin-top: 60px; }
.lesson h2 + .ex { margin-top: 6px; padding-top: 6px; border-top: 0; }
.ex table { display: block; max-width: 100%; overflow-x: auto; }

/* an interactive panel inside the text */
.explore { margin: 36px 0 34px; }
.explore > h3 { margin: 4px 0 8px; font-size: 27px; }
.lesson .explore > p { font-size: 15.5px; line-height: 1.75; color: #4d5560; margin-bottom: 16px; }
.try { margin: 4px 0 18px; }

/* a question to think about, with the answer folded away */
.qc { margin: 30px 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.qc summary { list-style: none; cursor: pointer; font-size: 16.5px; line-height: 1.8; color: #1f2a35; }
.qc summary::-webkit-details-marker { display: none; }
.qc .tag { margin-right: 12px; }
.qc summary::after { content: "Show the answer"; display: block; width: max-content; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--terra); border-bottom: 1px solid rgba(199, 90, 60, 0.4); }
.qc[open] summary::after { content: "Hide the answer"; }
.qc-a { margin-top: 14px; padding-left: 22px; border-left: 2px solid rgba(199, 90, 60, 0.38); font-size: 16px; line-height: 1.8; }

/* common mistakes, and the note about the exam */
.mistakes { margin: 34px 0 26px; }
.mistakes ul { list-style: none; margin: 10px 0 0; padding: 0; }
.mistakes li { position: relative; padding: 0 0 0 28px; margin-bottom: 12px; font-size: 16px; line-height: 1.8; color: #2b2b2b; }
.mistakes li::before { content: "×"; position: absolute; left: 2px; top: -3px; font-size: 22px; font-weight: 600; color: var(--terra); }
.apnote { margin: 30px 0; padding: 4px 0 4px 24px; border-left: 4px solid var(--navy); }
.apnote p { margin: 8px 0 0; }

/* the end of the page */
.more-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 54px; }
.more-head h2 { margin: 0; }
.more-head + .ex { margin-top: 18px; }
.lesson-end { display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; margin: 48px 0 10px; padding: 24px 28px; background: var(--navy); border-radius: 10px; }
.lesson-end h3 { font-family: var(--serif); font-size: 26px; margin: 0 0 4px; color: var(--on-navy); }
.lesson .lesson-end p { font-size: 14px; line-height: 1.6; margin: 0; color: rgba(239, 232, 220, 0.75); }
/* Level buttons are equal choices, so they look the same. */
.lesson-end .btn { background: var(--terra); color: #fff; }

/* interactive panels */
.w-cases { display: flex; gap: 6px; flex-wrap: wrap; margin: -14px -20px 14px; padding: 10px 14px; background: rgba(31, 46, 61, 0.05); border-bottom: 1px solid var(--line); border-radius: 10px 10px 0 0; }
.w-cases button { font-family: var(--sans); font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: var(--r-btn); border: 1px solid rgba(31, 46, 61, 0.22); background: var(--card); color: var(--navy); cursor: pointer; }
.w-cases button.on { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }
/* A formula on a case button, such as dy/dx = x - y: a fraction is set small by default, so the math is enlarged to stay readable. */
.w-cases button .katex { font-size: 1.3em; }
/* The stage is light, like the rest of the page: paper, a navy curve, and terracotta for the moving parts.
   Nick found the first version, a dark navy stage, too heavy against the lesson around it. */
.w-stage { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 20px 18px; color: var(--ink); }
.wsvg { display: block; width: 100%; height: auto; }
.wsvg .wg { stroke: rgba(31, 46, 61, 0.07); stroke-width: 1; }
.wsvg .wg.strong { stroke: rgba(31, 46, 61, 0.11); }
.wsvg .wx { stroke: rgba(31, 46, 61, 0.5); stroke-width: 1.2; }
.wsvg .wt { font-family: var(--sans); font-size: 12px; fill: #5b6672; }
.wsvg .wt.edge { font-size: 12px; font-weight: 600; fill: #4d5560; paint-order: stroke; stroke: var(--card); stroke-width: 5px; stroke-linejoin: round; }
.wsvg .wc { fill: none; stroke: var(--navy); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wsvg .wc.bound { stroke: rgba(31, 46, 61, 0.5); stroke-width: 1.6; stroke-dasharray: 6 5; }
.wsvg .wl { stroke: rgba(31, 46, 61, 0.45); stroke-width: 1.4; }
.wsvg .wl.hot { stroke: var(--terra); stroke-width: 2; }
.wsvg .wl.dash { stroke-dasharray: 5 5; }
.wsvg .wl.guide { stroke: var(--terra); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: 0.75; }
.wsvg .wp { fill: var(--terra); stroke: var(--card); stroke-width: 2; }
.wsvg .wp.alt { fill: var(--terra-2); }
.wsvg .wo { fill: var(--card); stroke: var(--navy); stroke-width: 2; }
.wsvg .ws { fill: var(--navy); }
.wsvg .wlab { font-family: var(--sans); font-size: 12.5px; font-weight: 600; fill: var(--navy); }
.wsvg .wlab.dim { fill: var(--mute); font-weight: 500; }
.wsvg .wband { fill: rgba(199, 90, 60, 0.1); }
.w-ctrl { display: grid; gap: 12px; margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.w-ctrl label { display: block; }
.w-ctrl label > span { display: block; font-size: 12px; font-weight: 500; color: #4d5560; margin-bottom: 5px; }
.w-ctrl input[type=range] { width: 100%; accent-color: var(--terra); height: 22px; cursor: pointer; }
.w-read { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 12px; flex-wrap: wrap; }
.w-read-side { font-size: 14.5px; line-height: 1.7; color: #4d5560; }
.w-read-side .katex { color: var(--navy); font-size: 1.4em; } /* the function's formula, about 20px; Nick found the old size too small */
.w-read-side .w-sm .katex { font-size: 1.12em; } /* a value inside a readout line, not the function's formula */
.w-read-main { text-align: right; margin-left: auto; }
.w-read-main small { display: block; font-size: 12.5px; color: #4d5560; }
.w-read-main small b { font-family: var(--sans); font-size: inherit; color: var(--navy); }
.w-read-main > b { font-family: var(--serif); font-weight: 700; font-size: 40px; line-height: 1.05; color: var(--terra); font-variant-numeric: tabular-nums; }
.w-cap { font-size: 15.5px; line-height: 1.75; color: #2b2b2b; margin-top: 14px; }
.w-end { margin: 2px 0 6px; }
.w-end .katex { color: var(--navy); font-size: 1.25em; }

/* AP Exam Practice pages */
.ap-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } /* four tiles, two by two */
@media (max-width: 620px) { .ap-grid { grid-template-columns: 1fr; } }
.ap-tile { display: flex; flex-direction: column; padding: 24px 24px 20px; text-decoration: none; color: var(--ink); }
.ap-tile h2 { font-family: var(--serif); font-size: 30px; line-height: 1.08; margin: 0 0 10px; color: var(--navy); }
.ap-tile p { font-size: 14px; line-height: 1.65; color: #555; margin: 0 0 16px; flex: 1; }
.ap-tile .go { font-size: 13px; font-weight: 600; color: var(--terra); }
.ap-tile:hover { border-color: var(--navy); color: var(--ink); }
.opt-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 0; border-top: 1px solid var(--line-soft); }
.opt-row b { display: block; font-size: 15px; font-weight: 600; color: var(--navy); }
.opt-row small { display: block; font-size: 12.5px; color: var(--mute); margin-top: 2px; line-height: 1.5; }
.opt-row .btn { padding: 10px 22px; font-size: 13px; }

@media (max-width: 980px) {
  .wrap.with-side { grid-template-columns: 1fr; gap: 14px; }
  .side { position: static; max-height: none; padding: 0; }
  .side-fold { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 4px 8px; }
  .side-fold > summary { display: block; cursor: pointer; padding: 11px 8px; font-size: 13.5px; font-weight: 600; color: var(--navy); }
  .page-title { font-size: 33px; }
  .unit-row { grid-template-columns: 26px 1fr; }
  .unit-row .seg { grid-column: 2; }
  .unit-row-meta { grid-column: 2; }
  .bar-mini { display: none; }
  .w-read-main > b { font-size: 32px; }
}

@media (max-width: 980px) {
  .skill { padding-left: 18px; padding-right: 18px; }
  .lesson h2 { font-size: 26px; margin-top: 44px; }
  .lesson p { font-size: 16px; }
  .stmt, .keyfacts { padding-left: 20px; padding-right: 18px; }
  .stmt-cols { grid-template-columns: 1fr; }
  .ex-sol, .qc-a { padding-left: 16px; }
  .lesson-end { padding: 20px; }
}

/* Math inside a serif heading. KaTeX's letters are larger than Cormorant's at the same size, so scale it down to match. */
.page-title .katex, .skill-head h3 .katex, .pr-title .katex, .stmt-title .katex, .lesson h2 .katex, .lesson h3 .katex, .sum h1 .katex, .up-card h3 .katex { font-size: 0.86em; }
.side-topic .katex, .level-main .katex, .topic-row .katex, .pager .katex, .crumb .katex { font-size: 1em; }

/* My review: what is in it, before it starts */
.rv-list { padding: 4px 22px; margin-bottom: 14px; }
.rv-list .topic-row { cursor: default; }
.rv-list .topic-row:hover .topic-row-title { color: inherit; }
.rv-start { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 22px 0 6px; }
.rv-start p { margin: 0; font-size: 14px; color: #4d5560; }

/* The sidebar is a raised white panel (Nick's pick, October 12, 2026): no border, a soft shadow. */
@media (min-width: 981px) {
  .side { background: var(--card); border-radius: 14px; padding: 14px 10px 14px 12px; box-shadow: 0 8px 26px rgba(31, 46, 61, 0.11), 0 1px 2px rgba(31, 46, 61, 0.06); }
  .side-topic.on { background: rgba(31, 46, 61, 0.07); }
}

/* Algebra shown line by line inside a worked step: set at the left under its sentence, not centered. */
.steps .katex-display { margin: 12px 0 6px; padding: 4px 0; text-align: left; overflow-x: auto; overflow-y: hidden; }
.steps .katex-display > .katex { text-align: left; }
.lesson .steps .katex-display > .katex { font-size: 1.16em; }

/* A missed problem that earned half credit */
.pr-dots i.half { background: linear-gradient(90deg, #4F7A52 50%, var(--terra) 50%); }

/* Math keys under a typed answer */
.math-keys { gap: 6px; }
.math-keys .key { min-width: 46px; padding: 8px 10px; font-weight: 500; background: #fff; }
.math-keys .key .katex { font-size: 1.05em; }

/* Ask Dr. Nick */
.btn.small { padding: 9px 16px; font-size: 12.5px; }
.ask-back { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(31, 46, 61, 0.45); }
.ask-card { width: 100%; max-width: 520px; padding: 28px 30px 24px; }
.ask-card h2 { font-family: var(--serif); font-size: 30px; line-height: 1.1; margin: 0 0 8px; color: var(--navy); }
.ask-lead { font-size: 14.5px; line-height: 1.65; color: #4d5560; margin: 0 0 18px; }
.ask-card label { display: block; font-size: 12.5px; font-weight: 600; color: var(--navy); margin-bottom: 14px; }
.ask-card textarea, .ask-card input { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; font: 15px/1.5 var(--sans); color: var(--ink); background: #fff; border: 1px solid rgba(31, 46, 61, 0.3); border-radius: 6px; }
.ask-card textarea { resize: vertical; min-height: 110px; }
.ask-card textarea:focus, .ask-card input:focus { outline: 2px solid var(--navy); outline-offset: 1px; }
.ask-note { min-height: 20px; font-size: 13.5px; line-height: 1.5; color: #8A341C; margin-bottom: 10px; }

/* The proficiency bar: a thin bar and a percent, for a topic or a unit */
.pbar-wrap { flex: none; display: inline-flex; align-items: center; gap: 10px; }
.pbar { flex: none; display: block; width: 130px; height: 6px; border-radius: 999px; background: rgba(31, 46, 61, 0.13); overflow: hidden; }
.pbar > span { display: block; height: 100%; border-radius: 999px; background: var(--terra); }
.pbar.full > span { background: #4F7A52; }
.pbar-n { min-width: 38px; font-size: 12.5px; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
.unit-row { grid-template-columns: 30px minmax(120px, 1fr) auto; }
.unit-row-name small { display: block; font-size: 12px; font-weight: 400; color: var(--mute); margin-top: 2px; }
.topic-row .pbar { width: 90px; }
.side-unit-head a small { display: flex; justify-content: space-between; align-items: baseline; }
.side-unit-head a small i { font-style: normal; font-weight: 600; letter-spacing: 0; color: var(--mute); }
.side-bar { width: auto; height: 3px; margin-top: 7px; }
@media (max-width: 980px) { .pbar { width: 90px; } .topic-row .pbar-wrap .pbar { display: none; } }

/* A table of values inside an interactive panel (the "table" panel). The cells are closer together than in a
   problem's table, so that nine columns fit, and the newest pair of columns is tinted. */
.w-table { margin-top: 10px; }
.w-table .vt th, .w-table .vt td { padding: 8px 10px; }
.w-table .vt td.on { background: var(--terra-tint); }

.ask-card label small { display: block; margin-top: 5px; font-size: 12px; font-weight: 400; color: #4d5560; }

/* The proficiency dots, and the small key to them in the sidebar (Nick, October 12, 2026).
   Five levels: Not started, Practicing, Learned, Proficient, Mastered. Dots use stronger colors than the
   labels do, so that the levels can be told apart at 9 pixels. Each entry in the key shows a short
   description when it is pointed at, tapped, or reached with the keyboard. */
.dot.lad0 { background: transparent; box-shadow: inset 0 0 0 1.5px #A9B3BD; }
.dot.lad1 { background: #9AA5B1; }
.dot.lad2 { background: #D9A441; }
.dot.lad3 { background: #3F8F78; }
.dot.lad4 { background: var(--navy); }
.side-key { padding: 0 4px 6px; }
.side-key .side-label { padding-top: 14px; }
.key-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; padding: 0 10px; }
.key-item { display: flex; align-items: center; gap: 7px; padding: 3px 0; border: 0; background: none; font: inherit; font-size: 11.5px; color: #4d5560; white-space: nowrap; text-align: left; cursor: help; }
.key-item:hover, .key-item:focus-visible { color: var(--navy); text-decoration: underline dotted; text-underline-offset: 3px; outline: none; }
.key-tip { display: none; position: absolute; left: 6px; right: 6px; top: calc(100% + 8px); z-index: 30; padding: 11px 13px 12px; background: var(--navy); color: var(--on-navy); font-size: 12.5px; font-weight: 400; line-height: 1.55; white-space: normal; text-decoration: none; box-shadow: 0 6px 18px rgba(31, 46, 61, 0.22); }
.key-tip b { font-weight: 700; }
.key-item:hover .key-tip, .key-item:focus .key-tip { display: block; }
.key-grid .dot { flex: none; }

/* ---------- Writing free-response answers (frqguide.js) ---------- */
.g-rows { padding: 4px 22px; }
.g-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-top: 1px solid var(--line-soft); text-decoration: none; color: var(--ink); }
.g-row:first-child { border-top: 0; }
.g-row b { display: block; font-size: 16px; font-weight: 600; color: var(--navy); }
.g-row small { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.6; color: #555; }
.g-row .go { flex: none; font-size: 13px; font-weight: 600; color: var(--terra); }
.g-row:hover b { text-decoration: underline; }
.guide .crumb { display: inline-block; margin-bottom: 6px; }
.guide .stmt-after { margin-top: 14px; font-size: 15.5px; color: #3a424c; }
.g-q { margin: 6px 0 30px; padding: 4px 0 4px 22px; border-left: 4px solid var(--navy); }
.g-q .q { font-size: 17.5px; line-height: 1.75; color: #1f2a35; }
.g-q .q .katex { font-size: 1.14em; }
.lesson p.g-split { margin: 14px 0 0; font-size: 14.5px; line-height: 1.7; color: #4d5560; }
.g-fig { margin: 18px 0 4px; }
.g-fig figcaption { margin-top: 6px; font-size: 13.5px; line-height: 1.6; color: #4d5560; }
.g-q .vt-wrap { margin-top: 16px; }

/* one answer: its level, its points, what the student wrote, and why it was scored that way */
.resp { margin: 0 0 30px; }
.resp-head { display: flex; align-items: center; gap: 14px; padding: 9px 16px; background: var(--navy); color: var(--on-navy); }
.resp-level { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; min-width: 62px; }
.resp-score { margin-left: auto; font-size: 13.5px; font-weight: 600; }
.pips { display: inline-flex; gap: 5px; }
.pips i { width: 11px; height: 11px; border: 1.5px solid rgba(255, 255, 255, 0.75); }
.pips i.on { background: #fff; border-color: #fff; }
.resp.lv0 .resp-head { background: #8c3a25; }
.resp.lv1 .resp-head { background: #7a6a3a; }
.resp.lv2 .resp-head { background: #3d5a73; }
.resp.lv3 .resp-head { background: var(--navy); }
.resp-paper { padding: 16px 20px 6px; background: #fff; border: 1px solid var(--line); border-top: 0; }
.lesson .resp-paper p { margin: 0 0 12px; font-size: 16.5px; line-height: 1.8; color: #1f2a35; }
.resp-paper .vt-wrap { margin: 0 0 14px; }
.resp-paper svg.signline { display: block; margin: 0 0 8px; }
.lesson p.resp-why { margin: 12px 0 0; padding-left: 20px; border-left: 2px solid rgba(199, 90, 60, 0.38); font-size: 15.5px; line-height: 1.8; color: #2b2b2b; }
.sketch .sk-n { font-family: var(--sans, inherit); font-size: 14px; fill: var(--navy); }
.sketch .sk-n.sign { font-size: 19px; font-weight: 600; }

/* the rules page */
.rule-sec { margin-top: 44px; }
.lesson .rule-sec h3 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 10px; }
.rule-n { flex: none; display: inline-block; min-width: 30px; padding: 1px 0; text-align: center; font-family: var(--sans, inherit); font-size: 15px; font-weight: 700; color: var(--on-navy); background: var(--navy); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 6px 0 18px; border: 1px solid var(--line); background: #fff; }
.pair > div { padding: 12px 18px 14px; font-size: 16px; line-height: 1.75; min-width: 0; overflow-x: auto; }
.pair-no { border-right: 1px solid var(--line); }
.pair-tag { display: block; margin-bottom: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.pair-no .pair-tag { color: #8c3a25; }
.pair-yes .pair-tag { color: #2f6b4a; }
.lesson .pair p { margin: 0 0 6px; font-size: 16px; line-height: 1.75; }
.pair svg.signline { display: block; margin: 0 0 4px; }
.pair s { text-decoration-thickness: 1.5px; color: #6b7480; }
.g-nav { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 54px; padding-top: 18px; border-top: 1px solid var(--line); }
.g-nav a { font-size: 14px; font-weight: 600; color: var(--terra); text-decoration: none; }
.g-nav a:hover { text-decoration: underline; }
@media (max-width: 620px) { .pair { grid-template-columns: 1fr; } .pair-no { border-right: 0; border-bottom: 1px solid var(--line); } .resp-head { flex-wrap: wrap; } }
/* short inline math in these pages stays on one line, so that "x = 3" is never split after the equals sign */
.guide p .katex, .guide li .katex { white-space: nowrap; }

/* "BC only" on a topic or unit that AB students do not have */
/* KaTeX keeps a hidden copy of each formula for screen readers, placed absolutely. Without this rule a formula
   inside a box that scrolls sideways puts that copy outside the box, and the whole page becomes wider than a phone. */
.katex { position: relative; }
/* Inline math with the punctuation mark that follows it, kept on one line (see typeset in practice.js). */
.nb { white-space: nowrap; }
.bc-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid rgba(199, 90, 60, 0.55); border-radius: 3px; font-family: var(--sans, inherit); font-size: 10px; font-weight: 700; font-style: normal; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.5; color: var(--terra); white-space: nowrap; vertical-align: 1px; }
.side-topic.on .bc-tag { color: inherit; border-color: currentColor; }

/* My progress: how many topics are at each level */
.lvl-counts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 16px 10px; margin: 14px 0 6px; text-align: center; }
.lvl-counts > div + div { border-left: 1px solid var(--line-soft); }
.lvl-counts b { display: block; font-family: var(--serif); font-size: 32px; line-height: 1.1; color: var(--navy); }
.lvl-counts span { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: #4d5560; }
@media (max-width: 620px) { .lvl-counts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; } .lvl-counts > div + div { border-left: 0; } }

/* the byline under a Learn page's title */
.lesson .lesson-by, p.lesson-by { margin: -18px 0 26px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: #55606B; }

/* ============================================================================================
   Worked examples one step at a time, and "Try one" (October 2026)
   ============================================================================================ */
/* Every step of a worked example is in the page from the start, already typeset. A step that has not been shown yet
   carries .step-off, and so do the answer and the note until the last step is shown. The rule is for the screen only,
   so a printed lesson has every step. */
@media screen { .lesson .step-off { display: none; } }
.ex-more { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; margin-top: 14px; }
.ex-more.done { display: none; }
.ex-ans:focus, .try1 .fb:focus, .try1 .q:focus { outline: none; }   /* focus is moved here by the page so a screen reader reads it. It is not a control. */

/* "Try one": a practice problem under a worked example. Until it is opened it is a thin rule and one button.
   Opened, it is set in the reading column like the rest of the lesson, with no card. */
.try1 { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line-soft); min-width: 0; max-width: 100%; }
.try1.open { padding-top: 18px; border-top-color: var(--line); }
.try1-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.try1-a { margin-top: 18px; min-width: 0; }
.try1 .fb b { color: inherit; }   /* .lesson b is navy. Inside a result the word keeps the color of its line. */
.try1 .tf-s { min-width: 0; }
.try1 .sol-ans { max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.try1 .sol-more { font-size: 13.5px; }
.try1 .sol-more[open] summary { margin-bottom: 4px; }
.lesson p.try1-count { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: #4d5560; }

/* The end of a lesson: a level with problems counted from "Try one" says so under its button. */
.lesson-levels { align-items: flex-start; }
.lvl-go { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; max-width: 100%; }
.lvl-go small { max-width: 170px; font-size: 12px; line-height: 1.45; color: rgba(239, 232, 220, 0.82); }

/* The level screen: a line under the title when problems from the lesson are counted in the set. */
.pr-hs { margin: -4px 0 14px; font-size: 13px; line-height: 1.5; color: #55606B; }

/* A printed lesson shows every step and none of the controls. */
/* Nick, October 12: a Try one strip under every example made the page "crowded and overwhelming". A Try one that is
   not open is now one quiet text link, and it is not shown at all until the last step of its example has been shown.
   An open one looks as before. */
.try1:not(.open) { margin-top: 12px; padding-top: 0; border-top: 0; }
.try1:not(.open) button { background: none; border: 0; padding: 0; min-height: 0; font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--terra); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.try1:not(.open) button::after { content: " like this example →"; }
@media screen { .lesson .ex:has(.ex-sol > .ex-more:not(.done)) > .try1:not(.open) { display: none; } }
@media print { .ex-more, .try1, .more-head .link-btn { display: none !important; } }

/* The body font (Nick, October 12, after two rounds of samples): Source Serif 4 for everything that was set in Sora.
   Headings stay in Cormorant Garamond. The reading text is a little larger and the math a little smaller than
   before, so that the letters and the math are the same height on a line. To change the font, change this block
   and the Google Fonts link in index.html and teacher.html. */
:root { --sans: 'Source Serif 4', Georgia, 'Times New Roman', serif; }
.lesson p, .lesson li, .steps li, .q { font-size: 17.5px; }
.katex { font-size: 1.08em; }
/* Text that follows a worked example directly keeps its distance from the example's last line or its step buttons. */
.lesson .ex + p, .lesson .ex + ul.plain, .lesson .ex + ol.plain { margin-top: 28px; }

/* ============================================================================================
   My plan (October 2026): the page at #/plan and the card on the Practice overview. plan.js draws both.
   ============================================================================================ */
/* The Practice overview. With no plan: one quiet line. With a plan: today's list in a card. */
.pl-quiet { margin: -6px 0 14px; font-size: 13.5px; line-height: 1.6; color: #55606B; }
.pl-quiet a { font-weight: 600; color: var(--navy); }
.pl-quiet a:hover { color: var(--terra); }
.pl-card { display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; padding: 22px 26px; margin-bottom: 14px; }
.pl-card-main { flex: 1 1 320px; min-width: 0; }
.pl-card h2 { font-family: var(--serif); font-size: 27px; line-height: 1.1; margin: 0 0 6px; color: var(--navy); }
.pl-card p { margin: 0; font-size: 14px; line-height: 1.6; color: #444; }
.pl-mini { list-style: none; margin: 4px 0 8px; padding: 0; }
.pl-mini li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 6px 0; border-top: 1px solid var(--line-soft); font-size: 14.5px; line-height: 1.45; }
.pl-mini li:first-child { border-top: 0; }
.pl-mini a, .pl-mini li > span { min-width: 0; overflow-wrap: break-word; }
.pl-mini a { color: var(--navy); font-weight: 600; text-decoration: none; }
.pl-mini a:hover { color: var(--terra); }
.pl-mini small { flex: none; font-size: 12.5px; color: var(--mute); white-space: nowrap; }
.pl-mini li.done > span { color: #6b7480; }

/* The goal and where the plan stands. The label uses the colors of the proficiency levels. */
.pl-status { padding: 20px 26px; margin-bottom: 8px; }
.pl-status p { margin: 0 0 10px; max-width: 780px; font-size: 15.5px; line-height: 1.7; color: #333; }
.pl-status p:last-child { margin-bottom: 0; }
.pl-status .lad { margin-right: 8px; vertical-align: 1px; white-space: normal; }
.pl-status p.pl-goal { margin-bottom: 12px; font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1.15; color: var(--navy); }
.pl-goal .eyebrow { display: block; margin-bottom: 6px; font-family: var(--sans); }
.pl-status p.pl-fix-lead { margin: 14px 0 0; font-size: 14px; color: #4d5560; }
.pl-status .pl-fixes { margin-top: 10px; }
.pl-fixes .btn, .pl-actions .btn, .pl-form .btn { flex: 0 1 auto; max-width: 100%; }
.pl-status p.pl-note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: #55606B; }

/* Today: one row for each item. A row is a link to the place where the item is done. */
.pl-list { padding: 4px 22px; margin-bottom: 10px; }
.pl-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line-soft); text-decoration: none; color: var(--ink); }
.pl-row:first-child { border-top: 0; }
.pl-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1.5px solid #A9B3BD; border-radius: 4px; font-size: 13px; line-height: 1; color: #fff; }
.pl-row.done .pl-mark { background: #3F8F78; border-color: #3F8F78; }
.pl-main { flex: 1; min-width: 0; }
.pl-main b { display: block; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--navy); overflow-wrap: break-word; }
.pl-main small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.5; color: var(--mute); }
.pl-row.done .pl-main b { font-weight: 500; color: #6b7480; }
.pl-min { flex: none; font-size: 12.5px; color: #55606B; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-go { flex: none; font-size: 13px; font-weight: 600; color: var(--mute); white-space: nowrap; }
a.pl-row:hover .pl-go, a.pl-row:hover .pl-main b { color: var(--terra); }
.pl-foot { margin: 0 0 6px; font-size: 14px; line-height: 1.6; color: #4d5560; }

/* The days after today: one small table for each week. The layout is fixed, so a table is never wider than the page. */
.pl-week { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; }
.pl-week caption { caption-side: top; padding: 0 0 8px; text-align: left; font-family: var(--serif); font-weight: 700; font-size: 20px; color: var(--navy); }
.pl-week th, .pl-week td { padding: 10px 14px; border: 1px solid var(--line); background: var(--card); text-align: left; vertical-align: top; line-height: 1.55; overflow-wrap: break-word; }
.pl-week thead th { padding: 8px 14px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.pl-week th:first-child { width: 112px; }
.pl-week th:last-child, .pl-week td:last-child { width: 96px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-week tbody th { font-weight: 600; color: var(--navy); white-space: nowrap; }
.pl-week td span { display: block; }
.pl-week td span.lad { display: inline-block; white-space: normal; }
.pl-week td a { color: var(--navy); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(31, 46, 61, 0.25); }
.pl-week td a:hover { color: var(--terra); border-color: var(--terra); }
.pl-week tr.exam th, .pl-week tr.exam td { background: #F1ECE2; }
.pl-more { margin: 0 0 8px; }
.pl-more > summary { margin: 0 0 16px; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--navy); }
.pl-actions { margin: 24px 0 0; }

/* The form. Each part is a fieldset with its name as the legend. */
.pl-form { padding: 6px 26px 24px; margin-top: 6px; }
.pl-set { min-width: 0; margin: 0; padding: 18px 0 14px; border: 0; border-top: 1px solid var(--line-soft); }
.pl-set:first-child { border-top: 0; }
.pl-set legend { float: left; width: 100%; padding: 0; margin: 0 0 10px; font-family: var(--serif); font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--navy); }
.pl-set legend + * { clear: both; }
.pl-checks { display: flex; flex-wrap: wrap; gap: 9px 22px; margin: 0 0 12px; }
.pl-checks.col { flex-direction: column; gap: 9px; }
.pl-check { display: inline-flex; align-items: flex-start; gap: 9px; min-width: 0; font-size: 15px; line-height: 1.45; color: var(--ink); cursor: pointer; }
.pl-check input { flex: none; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--navy); }
.pl-check span { min-width: 0; }
.pl-help { max-width: 740px; margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; color: #55606B; }
.pl-sub { margin: 14px 0 8px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.pl-set legend + .pl-sub { margin-top: 0; }
.pl-date { max-width: 240px; margin-bottom: 10px; }
.pl-short { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-off { list-style: none; max-width: 440px; margin: 0 0 12px; padding: 0; }
.pl-off li { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 14.5px; }
.pl-off li:first-child { border-top: 0; }
.pl-offadd { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.pl-offadd .field { flex: 0 1 240px; min-width: 0; margin-bottom: 0; }
.pl-form .msg { margin: 8px 0 0; }
.pl-form .pr-btns { margin-top: 8px; }
@media (max-width: 620px) {
  .pl-card, .pl-status { padding: 18px 16px; }
  .pl-status p.pl-goal { font-size: 23px; }
  .pl-list { padding: 4px 16px; }
  .pl-row { flex-wrap: wrap; gap: 4px 12px; }
  .pl-main { flex: 1 1 calc(100% - 34px); }
  .pl-min { margin-left: 34px; }
  .pl-go { margin-left: auto; }
  .pl-week { font-size: 13px; }
  .pl-week th, .pl-week td, .pl-week thead th { padding: 8px; }
  .pl-week th:first-child { width: 92px; }
  .pl-week th:last-child, .pl-week td:last-child { width: 80px; }
  .pl-form { padding: 2px 16px 20px; }
  .pl-date, .pl-offadd .field { max-width: none; flex-basis: 100%; }
}
@media print { .pl-actions, .pl-fixes, .pl-fix-lead, .pl-go { display: none !important; } .pl-more > summary { display: none; } }

/* A trial account: units that the trial does not open. They are listed by name and cannot be opened. */
.side-unit.locked .side-unit-head a { color: #6b7580; }
.side-unit.locked .side-unit-head small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.unit-row.locked { color: #6b7580; }
.unit-row.locked > b { color: #9AA4AD; }
.unit-row.locked .full-tag { justify-self: end; }
.locked-note { padding: 18px 22px; margin-bottom: 8px; border-left: 4px solid var(--mute); }
.locked-note p { margin: 0; font-size: 15.5px; line-height: 1.6; }
.opt-row .full-tag { margin-left: 12px; }

/* AP Exam Practice: a multiple-choice question whose four choices are graphs (figs: true on the bank item, see exam.js).
   In a sitting the four graphs are buttons in a grid. The grid has two columns when each column can be 180 pixels wide,
   which leaves about 160 pixels for the graph, and one column when it cannot. No screen width is named: the grid
   decides from the width it has, so it is right in the two-column card and in the one-column card of a phone.
   The card gives the graphs the wider column. The pictures are drawn at a small scale by the bank file, so that the
   numbers on the axes can still be read at this size. */
.pr-card.figs { grid-template-columns: 1fr 1.3fr; }
@media (max-width: 860px) { .pr-card.figs { grid-template-columns: 1fr; } }
.choices.gc { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(180px, calc(50% - 4px))), 1fr)); gap: 8px; }
.choice.mc.gc-b { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; padding: 8px 9px 9px; }
.choice.mc.gc-b > b { line-height: 1.1; }
.choice.mc.gc-b > svg { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto; }
.gc-b .plot .po, .rv-fig .plot .po { fill: #fff; }
/* The same four graphs in the review after a set: the letter, "Correct." or "Your choice.", the graph, and the reason
   under it. Two columns where each can be 230 pixels wide, and one column on a phone. */
.rv-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(230px, calc(50% - 4px))), 1fr)); gap: 8px; margin-top: 8px; }
.rv-c.rv-fig { display: block; margin-top: 0; padding: 10px 12px 12px; min-width: 0; }
.rv-fig-head { display: flex; align-items: baseline; gap: 10px; }
.rv-fig-head > b { font-family: var(--serif); font-size: 16px; color: var(--navy); }
.rv-tag { font-size: 12px; font-weight: 600; font-style: italic; }
.rv-fig.right .rv-tag { color: #2F5A33; }
.rv-fig.picked .rv-tag { color: #9A3A22; }
.rv-fig > svg { display: block; width: 100%; max-width: 250px; height: auto; margin: 6px 0 8px; }
.rv-fig .rv-why { display: block; }