* { box-sizing: border-box; }
[hidden] { display: none !important; }
button, input, select, textarea, fieldset, iframe, img { border: 0; }
/* Light by default, like Google Docs; dark when picked in Profile (or when the device is dark and System is picked).
   Every page uses these names only: no colors of its own. A course's color (--cc) is only a small accent. */
:root {
  color-scheme: light;
  --bg: #ffffff; --side: #f6f8fc; --panel: #f3f6fb; --panel2: #e9eef6; --input: #ffffff; --text: #1f1f1f; --muted: #5f6368;
  --line: #dadce0; --line-soft: #e8eaed;
  --button: transparent; --button-hover: rgba(60, 64, 67, 0.08); --lip: transparent; --link: #0b57d0;
  --accent: #0b57d0; --accent-hover: #0842a0; --accent-dark: #0842a0; --accent-soft: #c2e7ff; --accent-text: #001d35; --on-accent: #ffffff;
  --good: #188038; --bad: #d93025; --good-bg: #e6f4ea; --bad-bg: #fce8e6; --good-text: #0d652d; --bad-text: #a50e0e;
  --math: #188038; --english: #c5221f; --warm: #e8710a; --sky: #1a73e8; --gold: #f9ab00; --blue: #1a73e8;
  --orange: #e37400; --warn-bg: #fef7e0; --warn-text: #7a4a00; --hover: 60, 64, 67; --r: 8px; --rc: 12px;
  --shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ui: 'Google Sans Flex', system-ui, sans-serif; --read: 'Atkinson Hyperlegible Next', system-ui, sans-serif; --display: 'Google Sans Flex', system-ui, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1f1f1f; --side: #1a1a1b; --panel: #262729; --panel2: #2d2e31; --input: #1f1f1f; --text: #e3e3e3; --muted: #9aa0a6;
  --line: #3c4043; --line-soft: #313235;
  --button-hover: rgba(232, 234, 237, 0.08); --link: #a8c7fa;
  --accent: #a8c7fa; --accent-hover: #d3e3fd; --accent-dark: #7cacf8; --accent-soft: #0b3a66; --accent-text: #d3e3fd; --on-accent: #062e6f;
  --good: #81c995; --bad: #f28b82; --good-bg: #17331f; --bad-bg: #3c1d1b; --good-text: #a8dab5; --bad-text: #f6aea9;
  --math: #81c995; --english: #f28b82; --warm: #fcad70; --sky: #8ab4f8; --gold: #fdd663; --blue: #8ab4f8;
  --orange: #fcad70; --warn-bg: #3a2e12; --warn-text: #fdd663; --hover: 232, 234, 237;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.35);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --bg: #1f1f1f; --side: #1a1a1b; --panel: #262729; --panel2: #2d2e31; --input: #1f1f1f; --text: #e3e3e3; --muted: #9aa0a6;
    --line: #3c4043; --line-soft: #313235;
    --button-hover: rgba(232, 234, 237, 0.08); --link: #a8c7fa;
    --accent: #a8c7fa; --accent-hover: #d3e3fd; --accent-dark: #7cacf8; --accent-soft: #0b3a66; --accent-text: #d3e3fd; --on-accent: #062e6f;
    --good: #81c995; --bad: #f28b82; --good-bg: #17331f; --bad-bg: #3c1d1b; --good-text: #a8dab5; --bad-text: #f6aea9;
    --math: #81c995; --english: #f28b82; --warm: #fcad70; --sky: #8ab4f8; --gold: #fdd663; --blue: #8ab4f8;
    --orange: #fcad70; --warn-bg: #3a2e12; --warn-text: #fdd663; --hover: 232, 234, 237;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.35);
  }
}
body { margin: 0; display: flex; min-height: 100vh; font: clamp(14px, 0.84vw, 17px)/1.5 var(--ui); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-underline-offset: 0.18em; }
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

/* The side menu: plain links on the soft gray, the open page in a pill */
#side { flex: none; width: 16em; height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px; padding: 1.1em 0.75em 1.1em 0; background: var(--bg); border-right: 1px solid var(--line-soft); }
#side .logo { display: flex; align-items: center; gap: 0.6em; padding: 0 0.7em 1.2em 1.45em; font: 600 1.15em var(--display); }
#side > a, #side > button { display: flex; align-items: center; gap: 1.1em; min-height: 3em; padding: 0.6em 1em 0.6em 1.6em; border-radius: 0 999px 999px 0; background: transparent; color: var(--text); text-decoration: none; font: inherit; text-align: left; cursor: pointer; box-shadow: none; transition: background 0.15s; }
#side > a:hover, #side > button:hover { background: var(--button-hover); }
#side > a.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
#side svg { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#side .logo svg { width: 1.9em; height: 1.9em; stroke: none; }
.logo strong { font-weight: 600; }
#side > #menubtn { display: none; }
.grow { flex-grow: 1; }
#status { color: var(--bad); padding: 0 0.8em; }
#status:empty { display: none; }
/* Outside a course the menu has only the links that don't need one. */
html:not(.incourse) #side .cl, html:not(.incourse) #side .back { display: none; }
/* The new site (#/n/...) shows only its own links and the switch back to the classic site. */
html:not(.newmode) #side > a.nl, html.newmode #side > a:not(.nl):not(#modelink) { display: none; }
/* Question screens fill the whole window: no side menu. */
html.focus #side { display: none; }
/* Inside a course, the open page's pill takes a soft wash of the course's color. */
html.incourse #side > a.cl.on { background: color-mix(in srgb, var(--cc) 16%, var(--side)); color: var(--text); }

main { flex: 1; min-width: 0; padding: 1.6em 2.8em; }
/* Every page sits in one centered column, in the middle of the screen when it is short, so the room is spread
   evenly around it instead of left below. */
html:not(.focus) main:not(.work) { display: flex; flex-direction: column; justify-content: safe center; min-height: 100vh; padding: 3em 3.4em; }
html:not(.focus) main:not(.work) > :not(.fab):not(.addpop) { flex: none; width: 100%; max-width: 1180px; margin-left: auto; margin-right: auto; }
/* A new page fades up into place. */
/* (The Courses page's + button and its card are fixed to the window, so they do not move.) */
main.enter > :not(.cpage), main.enter > .cpage > :not(.fab):not(.addpop) { animation: enter 0.28s var(--ease) both; }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } }
h1 { font: 600 1.75em/1.25 var(--display); margin: 0 0 0.7em; text-wrap: balance; }
h2 { font: 600 1.12em/1.35 var(--display); margin: 14px 0 6px; }
h3 { font-family: var(--display); font-weight: 600; }

/* Buttons: tinted pills; one filled (primary) button per screen. */
button { font: inherit; padding: 0.45em 1.1em; border-radius: 999px; background: var(--button-hover); color: var(--text); cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s; }
button:hover { background: rgba(var(--hover), 0.14); }
button:disabled { color: var(--muted); cursor: default; opacity: 0.6; }
button.on { background: var(--accent-soft); color: var(--accent-text); box-shadow: none; }
button.primary { background: var(--accent); color: var(--on-accent); font-weight: 600; box-shadow: none; }
button.primary:hover { background: var(--accent-hover); }
button.primary:disabled { background: var(--line-soft); color: var(--muted); }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
a.button { display: inline-block; padding: 0.45em 1.1em; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; transition: background 0.15s; }
a.button:hover { background: var(--accent-hover); }

/* Boxes and dropdowns: white with a thin edge that turns blue while typing. */
input, select, textarea { font: inherit; border-radius: 8px; padding: 0.35em 0.65em; background-color: var(--input); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.15s; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.8; }
input:not([type="checkbox"]):hover, select:hover, textarea:hover { box-shadow: inset 0 0 0 1px var(--muted); }
input:not([type="checkbox"]):focus, select:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
select { appearance: none; max-width: 100%; padding-right: 2.1em; cursor: pointer; background-repeat: no-repeat; background-position: right 0.7em center; background-size: 0.75em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235f6368' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
select option, select optgroup { background: var(--panel); color: var(--text); }
textarea { width: 100%; font-family: var(--read); line-height: 1.5; }
input[type="checkbox"] { appearance: none; width: 1.15em; height: 1.15em; padding: 0; margin: 0 0.45em 0 0; border-radius: 4px; background: transparent; box-shadow: inset 0 0 0 2px var(--muted); vertical-align: -0.2em; cursor: pointer; display: inline-grid; place-content: center; transition: background 0.15s; }
input[type="checkbox"]:hover { background: var(--button-hover); }
input[type="checkbox"]:checked { background: var(--accent); box-shadow: none; }
input[type="checkbox"]:checked::before { content: ""; width: 0.28em; height: 0.56em; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: translateY(-0.08em) rotate(45deg); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Cards: a soft fill and no edge */
.box, .tile, .flist, .gcard, .exdetail, .setcol, .cover, form.login { background: var(--panel); }
.box { border-radius: var(--rc); padding: 14px 18px; margin: 12px 0; }

/* Notes across the page: blue for calm ones, amber for ones that matter today */
.alert, .notice { position: relative; padding: 0.8em 1.2em 0.8em 3.2em; margin: 12px 0; border-radius: var(--r); font-weight: 400; }
.alert::before, .notice::before { content: ""; position: absolute; left: 1.1em; top: 50%; width: 1.35em; height: 1.35em; transform: translateY(-50%); background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.alert { background: var(--warn-bg); color: var(--warn-text);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10v4a1 1 0 0 0 1 1h2l4 4V5L6 9H4a1 1 0 0 0-1 1zm13.5 2A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E"); }
.notice { background: var(--accent-soft); color: var(--accent-text);
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 21h6v-1.5H9zm3-19a7 7 0 0 0-4 12.7V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.3A7 7 0 0 0 12 2z'/%3E%3C/svg%3E"); }
.alert a, .notice a { color: inherit; font-weight: 600; }
.alert a.button, .notice a.button { color: var(--on-accent); }
/* The unit note has its own ! badge, so no lightbulb */
.notice.unitnote { padding-left: 1.2em; }
.notice.unitnote::before { display: none; }

.text { white-space: pre-wrap; font-family: var(--read); }
.passage { white-space: pre-wrap; font-family: var(--read); line-height: 1.65; border-radius: var(--rc); background: var(--panel); padding: 18px 22px; max-height: calc(100vh - 150px); overflow-y: auto; margin-bottom: 12px; }
.passage mark { color: inherit; border-radius: 3px; }
.passage mark.hl { background: rgba(255, 214, 10, .28); cursor: pointer; }
.passage mark.proof { background: var(--good-bg); }

/* Answer choices: a row per choice with its letter in a circle */
.choices { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.choices button { display: flex; align-items: center; gap: 0.85em; text-align: left; white-space: pre-wrap; font-size: 1.15em; padding: 0.65em 1em; border-radius: 12px; background: var(--panel); }
.choices button:hover:not(:disabled) { background: var(--button-hover); }
.choices button:disabled { color: var(--text); opacity: 1; }
.choices .let { flex: none; width: 1.8em; height: 1.8em; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--hover), 0.1); font-size: 0.8em; font-weight: 600; transition: background 0.15s; }
.choices .ctext { flex: 1; min-width: 0; font-family: var(--read); }
.choices .xout { flex: none; margin-left: auto; width: 1.7em; height: 1.7em; display: grid; place-items: center; border-radius: 6px; color: var(--muted); font-size: 0.85em; }
.choices .xout:hover { color: var(--text); background: rgba(var(--hover), 0.1); }
.choices button.crossed { opacity: .5; }
.choices button.crossed .ctext { text-decoration: line-through; }
.choices button.crossed .xout { color: var(--bad); }
.xout svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.choices button.on { background: var(--accent-soft); }
.choices button.on .let { background: var(--accent); color: var(--on-accent); }
.choices button.right { background: var(--good-bg); }
.choices button.right .let { background: var(--good); color: var(--panel); }
.choices button.wrong { background: var(--bad-bg); }
.choices button.wrong .let { background: var(--bad); color: var(--panel); }
.figchoices { display: grid; grid-template-columns: repeat(auto-fit, minmax(11em, 1fr)); gap: 10px; }
.figchoices button { position: relative; flex-direction: column; align-items: flex-start; }
.figchoices .ctext { width: 100%; }
.figchoices .fig.small { display: block; max-width: 100%; max-height: 22vh; margin: 0 auto; }
.figchoices button .xout { position: absolute; top: 0.5em; right: 0.5em; }

.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0; }
.right-text { color: var(--good); font-weight: bold; }
.wrong-text { color: var(--bad); font-weight: bold; }
table { border-collapse: collapse; width: 100%; }
th, td { padding: 7px 12px; text-align: left; vertical-align: top; }
th { font-size: 0.9em; font-weight: 600; color: var(--muted); background: transparent; }
tr:nth-child(even) > td { background: rgba(var(--hover), 0.03); }
td:first-child { font-weight: 500; }
.checks label { display: block; }
.timer { font-weight: 600; font-variant-numeric: tabular-nums; }
/* A flash card: its text is one block inside, centered */
.card { display: flex; align-items: center; justify-content: center; text-align: center; border-radius: 16px; background: var(--panel); padding: 2em; min-height: 32vh; font-size: 1.6em; font-family: var(--read); white-space: pre-wrap; margin-bottom: 18px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.split > .passage { position: sticky; top: 8px; }
.qtext { font-size: 1.35em; }
.bigtext { font-size: 1.35em; }
#typed { font-size: 1.2em; width: 12em; }
#typeboxes { align-items: stretch; }
#typeboxes .checks { flex: 1; }
#typeboxes .checks > div { columns: 2; }
#typeboxes .checks > summary { display: flex; align-items: center; gap: 0.6em; font-weight: 600; list-style: none; }
#typeboxes .checks > summary::-webkit-details-marker { display: none; }
#typeboxes .checks > summary::before { content: ""; flex: none; align-self: flex-start; width: 0.42em; height: 0.42em; margin: 0.4em 0 0 0.2em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform 0.15s; }
#typeboxes .checks[open] > summary::before { transform: rotate(45deg); }
details summary { cursor: pointer; }
td details.box { margin: 0; padding: 0; background: none; }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } }
.essayplan { height: calc(100vh - 460px); min-height: 8em; }
.essaytext { height: calc(100vh - 230px); min-height: 12em; line-height: 1.7; }
.done { color: var(--good); }
.sq { margin-bottom: 1em; break-inside: avoid; }
.answers { break-before: page; margin-top: 2em; }
@media print {
  .tabs { display: none; }
  :root, :root[data-theme] { color-scheme: light; --bg: #fff; --text: #000; --line: #000; --panel: #fff; --panel2: #fff; }
  body > :not(main), .noprint { display: none !important; }
  body { font-size: 12pt; display: block; }
  main { padding: 0; display: block; min-height: 0; }
  main.enter > * { animation: none; }
}
.bigtimer { font: 600 6em var(--display); font-variant-numeric: tabular-nums; }
/* No scroll bars except on test-like pages (the html element gets the "scroll" class there). */
:root:not(.scroll), :root:not(.scroll) * { scrollbar-width: none; }
:root.scroll * { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
/* Tabs: a row of pills */
.tabs { display: flex; flex-wrap: wrap; gap: 0; margin: 8px 0 18px; border-bottom: 1px solid var(--line); }
.tabs button { min-height: 0; border-radius: 0; padding: 0.8em 1.2em; background: transparent; color: var(--muted); font-weight: 500; box-shadow: inset 0 -3px 0 transparent; }
.tabs button:hover { background: var(--button-hover); color: var(--text); }
.tabs button.on { background: transparent; color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); }
.compact { font-size: 0.85em; }
.compact td, .compact th { padding: 4px 10px; }
tr.pick { cursor: pointer; }
tr.pick:hover > td { background: rgba(var(--hover), 0.05); }
tr.pick.sel > td { background: var(--accent-soft); }
.essaycols { columns: 3; column-gap: 40px; font-size: 0.9em; }
.prompttext { height: calc(100vh - 300px); font-size: 0.8em; font-family: ui-monospace, monospace; }
#ep { width: 100%; }
.split #typeboxes .checks > div { columns: 1; }
.tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin: 12px 0 20px; }
.tile { border-radius: var(--rc); padding: 14px 18px; }
.plain { list-style: none; padding: 0; margin: 0; }
.fig { display: block; background: #fff; border-radius: 8px; max-width: 100%; max-height: 38vh; margin: 8px 0 12px; }
.fig.small { display: inline-block; vertical-align: middle; max-height: 20vh; max-width: 90%; margin: 4px 0; }
@media print { .fig { max-height: 8cm; } }
.bigbtn { font-size: 1.2em; padding: 10px 26px; }
.sheet { columns: 3; column-gap: 32px; margin-bottom: 16px; }
.sheetrow { break-inside: avoid; margin: 6px 0; font-variant-numeric: tabular-nums; }
.bubble { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; margin-left: 6px; border: 2px solid var(--text); border-radius: 50%; font-size: 0.85em; }
.blank { display: inline-block; width: 8em; margin-left: 6px; border-bottom: 2px solid var(--text); }
.paans { display: block; margin: 6px 0; break-inside: avoid; }
@media print { .pagebreak { break-before: page; } .answers h2 { margin-top: 12px; } }
.setin { white-space: nowrap; }

/* Progress bars */
.xptrack { position: relative; display: block; height: 6px; border-radius: 99px; background: var(--line-soft); overflow: hidden; }
.xpfill { display: block; height: 100%; border-radius: 99px; background: var(--cc, var(--accent)); transition: width 0.6s var(--ease); }

/* The shared parts every page is built from. A new page is a .phead, then sections with a .secthead, holding
   .rows lists, .mtiles boxes or cards, and buttons (one .primary per screen). No colors of its own: only the theme's. */
.phead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3em 1em; margin: 0 0 1.8em; }
.phead h1 { margin: 0; }
.psub { color: var(--muted); }
.countdown { flex-basis: 100%; margin: 0; font-size: 1.15em; font-weight: 600; }
.seg { display: flex; width: fit-content; max-width: 100%; flex-wrap: wrap; padding: 4px; gap: 4px; border-radius: 999px; background: var(--panel); }
.seg button { border-radius: 999px; background: transparent; padding: 0.35em 1.05em; box-shadow: none; }
.seg button:hover { background: var(--button-hover); }
.seg button.on { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.modepick { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em 0.8em; margin: 0 0 1.6em; }
.modepick > span { color: var(--muted); font-weight: 600; }
.guidepage { max-width: 46em; display: flex; flex-direction: column; gap: 1.4em; }
.guidepage .phead { margin: 0; }
.glist { display: flex; flex-direction: column; gap: 0.6em; }
.gcrd { border-radius: 12px; background: var(--panel); }
.gcrd > summary { display: flex; align-items: center; gap: 0.8em; padding: 0.9em 1.1em; list-style: none; font-weight: 600; }
.gcrd > summary::-webkit-details-marker { display: none; }
.gcrd > summary::after { content: ""; flex: none; width: 0.45em; height: 0.45em; margin: 0 0.3em 0.2em; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform 0.15s; }
.gcrd[open] > summary::after { transform: rotate(-135deg); margin-bottom: -0.2em; }
.gcrd .guse { margin: 0; flex: none; }
.gcrd .gtitle { flex: 1; min-width: 0; }
.gcrd .gdel { margin: -0.4em 0; font-weight: 500; }
.gbody { display: flex; flex-direction: column; gap: 1em; padding: 0.2em 1.1em 1.2em; padding-top: 1em; }
.gnamerow { display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap; font-weight: 500; }
.gnamerow input { flex: 1; min-width: 12em; }
.guidetext p { margin: 0; line-height: 1.6; }
.gline { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; line-height: 1.5; cursor: pointer; }
.gline input { margin-top: 4px; }
.gline input:checked + span { color: var(--muted); text-decoration: line-through; }

/* Learn: the list of lessons and the steps to make one */
.lessonsp .phead { flex-direction: column; gap: 0.3em; }
.llist { display: flex; flex-direction: column; gap: 8px; }
.lrow { display: flex; border-radius: 12px; background: var(--panel2); overflow: hidden; }
.lrow .litem { flex: 1; min-width: 0; border-radius: 12px 0 0 12px; }
.ldel { flex: none; display: grid; place-items: center; width: 3em; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; color: var(--muted); }
.ldel:hover { color: var(--bad); background: var(--bad-bg); }
.ldel svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.litem { display: flex; align-items: center; gap: 1em; padding: 0.85em 1em; border-radius: 12px; background: var(--panel2); color: var(--text); text-decoration: none; transition: background 0.15s, box-shadow 0.15s; }
.litem:hover { background: color-mix(in srgb, var(--accent) 10%, var(--panel2)); }
.litem .lnum { flex: none; width: 2.2em; height: 2.2em; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.litem .lmeta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.litem .lmeta span { color: var(--muted); font-size: 0.9em; }
.litem .lgo svg { width: 1.3em; height: 1.3em; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.lsteps { margin: 0; padding: 0; list-style: none; counter-reset: ls; display: flex; flex-direction: column; gap: 1.1em; }
.lsteps li { counter-increment: ls; position: relative; padding-left: 2.6em; display: flex; flex-direction: column; gap: 0.55em; }
.lsteps li::before { content: counter(ls); position: absolute; left: 0; top: -0.1em; width: 1.8em; height: 1.8em; display: grid; place-items: center; border-radius: 50%; background: var(--panel2); font-weight: 600; font-size: 0.9em; }
.lsteps li > span { font-weight: 600; }
.lsteps select { max-width: 100%; }
.lmiss { color: var(--muted); font-size: 0.92em; cursor: pointer; }
.lmiss input { vertical-align: -2px; margin: 0 0.4em 0 0; }

/* A lesson: one section at a time, its picture, then its questions answered in place */
.lessonpage { max-width: 44em; margin: 0 auto; display: flex; flex-direction: column; gap: 1.3em; }
.lhead { display: flex; align-items: center; gap: 1em; }
.lback { display: inline-flex; align-items: center; gap: 0.35em; text-decoration: none; font-weight: 600; }
.lback svg, .lnav svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lname { margin-left: auto; color: var(--muted); text-align: right; }
.lprog { display: flex; gap: 5px; }
.lprog a { flex: 1; height: 6px; border-radius: 999px; background: var(--line-soft); transition: background 0.2s; }
.lprog a.done { background: color-mix(in srgb, var(--accent) 45%, var(--line-soft)); }
.lprog a.here { background: var(--accent); }
.lsec { border-radius: 18px; padding: 2em 2.3em; background: var(--panel); display: flex; flex-direction: column; gap: 0.9em; animation: enter 0.3s var(--ease); }
.lstep { color: var(--accent); font-weight: 600; }
.lsec h1 { margin: 0; font-size: 2em; }
.ltext { font-family: var(--read); font-size: 1.12em; line-height: 1.7; display: flex; flex-direction: column; gap: 0.9em; }
.ltext p { margin: 0; }
.lfig { display: flex; justify-content: center; padding: 1em; border-radius: 14px; background: #fff; }
.lfig .fig { margin: 0; max-height: 46vh; }
.lcheck { display: flex; flex-direction: column; gap: 1em; }
.lcheck h2 { margin: 0.4em 0 0; font-size: 1.35em; }
.lcheck > .psub { margin: -0.7em 0 0; }
.lq { border-radius: 16px; padding: 1.4em 1.6em; background: var(--panel); display: flex; flex-direction: column; gap: 0.6em; }
.lq .choices { margin: 0.2em 0; }
.lqnum { color: var(--muted); font-size: 0.85em; font-weight: 600; }
.lq .qtext { font-size: 1.1em; }
.ltyped { max-width: 16em; }
.ltyped.right { box-shadow: inset 0 0 0 2px var(--good); }
.ltyped.wrong { box-shadow: inset 0 0 0 2px var(--bad); }
.lqout { display: flex; flex-direction: column; gap: 0.7em; }
.lqout:empty { display: none; }
.lexpl { padding: 0.9em 1.1em; border-radius: 12px; background: var(--panel2); }
.lnav { display: flex; align-items: center; gap: 1em; padding-top: 0.4em; }
.lnav button { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.6em 1.4em; }
@media screen and (max-width: 600px) {
  .lsec { padding: 1.3em 1.2em; }
  .lsec h1 { font-size: 1.55em; }
  .ltext { font-size: 1.05em; }
  .lq { padding: 1.1em 1.1em; }
}
.quiztick { font-weight: 400; }
.secthead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6em 1em; margin-bottom: 0.7em; }
.secthead h2 { margin: 0; }
.smeta, .snote { color: var(--muted); }
.snote { margin: 0.6em 0 0; }
/* A list with thin lines between rows; .rowpart is a small label over a group of rows. */
.rows { border-radius: 12px; background: var(--panel); overflow: hidden; }
.rowpart { padding: 0.75em 1.2em 0.2em; font-size: 0.82em; font-weight: 600; color: var(--muted); }
.rowi { display: flex; align-items: center; gap: 0.9em; padding: 0.65em 1.2em; }
.rowpart:has(.lskip) { display: flex; align-items: center; }
.lskip { margin-left: auto; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; font-weight: 500; }
.lskip button { border: 0; background: none; padding: 0.2em 0.4em 0.2em 0.8em; font-size: 0.95em; color: var(--muted); }
.lskip button:hover { color: var(--text); }
.lskip #lskipx { display: grid; place-items: center; padding: 0.25em 0.6em 0.25em 0.3em; }
.lskip svg { width: 0.95em; height: 0.95em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.rowpart + .rowi { padding-top: 0.45em; }
.rowi + .rowpart { margin-top: 0.3em; }
.rowi button { flex: none; padding: 0.3em 0.95em; font-size: 0.92em; }
.pcheck { flex: none; display: grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); }
.rowi.done .pcheck { background: var(--good); box-shadow: none; }
.pcheck svg { width: 0.85em; height: 0.85em; fill: none; stroke: var(--panel); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ptext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1em; }
.ptext small { color: var(--muted); }
.rowi.done .ptext > span { color: var(--muted); }
.pcount { margin-left: 0.3em; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Study boxes, like Google Cloud's quick access: a line icon in its color, then the name */
.mtiles { --gap: 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); max-width: 760px; margin: 0 auto; container-type: inline-size; }
.mtilewrap { flex: 0 0 calc((100% - 2 * var(--gap)) / 3); }
@container (max-width: 620px) { .mtilewrap { flex-basis: calc((100% - var(--gap)) / 2); } }
.mtile { display: flex; align-items: center; gap: 0.75em; min-height: 3.6em; padding: 0.9em 1.1em; border-radius: 12px; background: var(--panel); text-align: left; font-weight: 600; }
.mtile:hover { background: color-mix(in srgb, var(--panel) 92%, #000); }
.mtile svg { width: 1.45em; height: 1.45em; fill: none; stroke: var(--ic); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mtile .math { --ic: var(--math); } .mtile .accent { --ic: var(--blue); } .mtile .warm { --ic: var(--warm); }
.mtile .english { --ic: var(--english); } .mtile .sky { --ic: #7b5cf0; } .mtile .gold { --ic: var(--gold); } .mtile .grey { --ic: var(--muted); }

/* Timed practice: "Timer starts…" over the screen, then "Now!" fading away as the clock starts */
.countin { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: var(--bg); }
.countin span { font: 600 3.4em var(--display); }
.countin.go { animation: countgo 0.7s ease-out forwards; }
@keyframes countgo { to { opacity: 0; } }

.mtilewrap { position: relative; display: grid; min-width: 0; }

/* Print: the tabs and their card on screen; what gets printed is only on paper */
.printpage { max-width: 76em; margin: 0 auto; display: flex; flex-direction: column; gap: 1.6em; }
/* The options on the left, and the first page as it will print on the right */
.printcols { display: grid; grid-template-columns: minmax(0, 1fr) 30em; gap: 2.4em; align-items: start; }
#printwrap { display: flex; flex-direction: column; gap: 1.6em; }
.pvside { position: sticky; top: 1.6em; display: flex; flex-direction: column; gap: 0.6em; }
.pvpage { position: relative; aspect-ratio: 8.5 / 11; overflow: hidden; border-radius: 4px; background: #fff; box-shadow: var(--shadow); }
.pvin { --text: #000; --muted: #444; --panel: #fff; --panel2: #fff; --line: #999; --line-soft: #ddd; position: absolute; top: 0; left: 0; width: 816px; padding: 48px; color: #000; font-size: 12pt; transform-origin: top left; pointer-events: none; }
.pvin h1 { font-size: 1.5em; }
.pvin .pvempty { margin: 380px 0 0; text-align: center; font-size: 40px; color: #666; }
.printpage .phead { margin-bottom: 0; }
.printpage .gcard { gap: 1em; }
@media screen { #sheet { display: none; } }
@page { margin: 0.5in; }
.lines div { height: 0.34in; border-bottom: 1px solid #9aa0a6; }
.ptitle { margin: 0; text-align: center; }
.kwhy { display: block; }
.pdate { display: flex; justify-content: center; gap: 2em; margin: 0.2em 0 1.2em; font-size: 0.85em; color: var(--muted); }
.qrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; margin-bottom: 1.2em; break-inside: avoid; }
.qrow .sq { margin: 0; }
.readpass { line-height: 1.6; }
/* Flash cards to cut out: 2 across and 4 down, on a page of their own */
.cutpage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr); height: 9.6in; break-after: page; }
.cutcard { display: flex; align-items: center; justify-content: center; padding: 0.3in; border: 1px dashed #9aa0a6; text-align: center; font: 14pt/1.35 var(--read); white-space: pre-wrap; }
.cutcard.back { font-size: 12pt; }

/* Home page, laid out like a Classroom course page: a banner in the course color, the goal card beside
   today's cards, then the study boxes as bordered tiles. */
.home { max-width: 1100px; margin: 0 auto; }
.home > .alert, .home > .notice { margin: -0.6em 0 1.2em; }
.homemain { display: flex; flex-direction: column; gap: 2.4em; }
.hbanner { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5em; min-height: 9.5em; margin: 0 0 1.6em; padding: 1.5em 2em; border-radius: 16px; background: var(--cc); color: #fff; }
.hart { position: absolute; right: 0; bottom: 0; height: 100%; pointer-events: none; }
.hart circle { fill: rgba(255, 255, 255, 0.1); }
.hart .soft { fill: rgba(255, 255, 255, 0.12); }
.hbanner h1, .hbanner .countdown { position: relative; }
.hbanner h1 { margin: 0; font-size: 2.2em; }
.hbanner .countdown { flex-basis: auto; }
.hbanner a { color: #fff; }
.hday { display: grid; grid-template-columns: 15em minmax(0, 1fr); gap: 1.5em; align-items: start; }
.hgoal { gap: 0.7em; padding: 1.2em 1.3em; border: 1px solid var(--line); border-radius: 12px; background: transparent; }
.hgoal h2 { margin: 0; font-size: 1.05em; }
.hgoalnum { margin: 0; color: var(--muted); }
.hgoalnum b { font: 600 2em/1 var(--display); color: var(--text); font-variant-numeric: tabular-nums; }
.hgoal .xpfill { background: var(--cc); }
.hlist .tstack { gap: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.hlist .tstack > .snote { margin: 0; padding: 1em 1.2em; }
.hlist .trow { padding: 0.85em 1.2em; border-radius: 0; }
.hlist .trow + .trow { border-top: 1px solid var(--line); }
.hlist .trow:hover { background: var(--button-hover); }
.hlist .ticon { width: 2.5em; height: 2.5em; border-radius: 50%; background: var(--ic, var(--accent)); }
.hlist .ticon svg { stroke: var(--bg); }
.hlist .trow button { border: 1px solid var(--line); background: transparent; color: var(--link); font-weight: 600; }
.hlist .trow button:hover { background: var(--button-hover); }
.hlist .donefold { margin-top: 1em; overflow: hidden; padding-bottom: 0.3em; border: 1px solid var(--line); border-radius: 12px; }
.hlist .donehead { padding: 0.9em 1.2em 0.3em; font-weight: 600; }
@media screen and (max-width: 600px) {
  .hlist .trow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.5em 1em; }
  .hlist .ttext { grid-column: 2 / -1; }
  .hlist .tmin { grid-column: 2; }
  .hlist .trow button { grid-column: 3; }
}
.hstudy .mtiles { --gap: 14px; max-width: none; justify-content: flex-start; }
.hstudy .mtilewrap { flex-basis: calc((100% - 2 * var(--gap)) / 3); }
.hstudy .mtiles.four .mtilewrap { flex-basis: calc((100% - 3 * var(--gap)) / 4); }
@container (max-width: 760px) { .hstudy .mtiles.four .mtilewrap { flex-basis: calc((100% - 2 * var(--gap)) / 3); } }
@container (max-width: 520px) { .hstudy .mtilewrap, .hstudy .mtiles.four .mtilewrap { flex-basis: calc((100% - var(--gap)) / 2); } }
.hstudy .mtile { gap: 0.9em; min-height: 4.6em; padding: 0.8em 1.1em; border: 1px solid var(--line); background: transparent; font-size: 1.05em; }
.hstudy .mtile:hover { background: var(--button-hover); }
.hstudy .mtile svg { box-sizing: content-box; flex: none; width: 1.3em; height: 1.3em; padding: 0.55em; border-radius: 50%; background: color-mix(in srgb, var(--ic) 16%, transparent); }
/* Tabs with a line under the open one, like Google Classroom. */
.hstudy .seg, .getpage .seg, .cform .seg { gap: 0.4em; padding: 0; border-radius: 0; background: none; }
.hstudy .seg button, .getpage .seg button, .cform .seg button { padding: 0.45em 0.9em; border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0; color: var(--muted); }
.hstudy .seg button.on, .getpage .seg button.on, .cform .seg button.on { border-bottom-color: var(--accent); background: none; color: var(--link); }
.hstudy .seg[hidden] { display: none; }
/* Explanations' and the interview's numbers */
.hometiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hometiles .tile { display: flex; align-items: center; justify-content: space-between; padding: 0.9em 1.2em; }
.hometiles .tile span { font-weight: 500; color: var(--muted); }
.hometiles .tile b { font: 600 1.8em/1 var(--display); font-variant-numeric: tabular-nums; }
.hometiles .tile small { font-size: 0.5em; font-weight: 500; color: var(--muted); }
/* Lists in a card, like the reference's side cards: a title, then rows with the number on the right */
.flist { border-radius: var(--rc); overflow: hidden; padding: 0.35em 0; }
.fhead { padding: 0.75em 1.2em 0.45em; font: 600 1.05em var(--display); }
.frow { display: flex; justify-content: space-between; gap: 12px; padding: 0.6em 1.2em; }
.frow span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }

/* Pop-up cards */
.naddpick { display: flex; gap: 12px; }
.naddpick .popbtn { flex: 1; }
.modalcard.tpop { width: min(32em, 92vw); max-height: 90vh; overflow-y: auto; }
.tpop h2 { margin-top: 0; }
.tpop h3 { margin: 1.2em 0 0.3em; }
.tpop p { color: var(--muted); }
.tpop .keylist p { color: var(--text); }
.tpop textarea { width: 100%; }
.tpop .row { margin-top: 1em; }
a.frow { color: var(--text); text-decoration: none; transition: background 0.15s; }
a.frow:hover { background: rgba(var(--hover), 0.06); }

/* Work pages without the question frame (flash cards): one centered column. Long text stays left-aligned. */
main.work { max-width: 960px; margin: 0 auto; text-align: center; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
main.work:has(> .cover.setup) { max-width: 1240px; }
main.work > * { flex: none; }
main.work .row { justify-content: center; }
main.work .split { grid-template-columns: 1fr; gap: 0; }
main.work table { margin: 0 auto; text-align: left; }
main.work .fig { margin: 8px auto 12px; }
main.work .box .text, main.work .passage, main.work textarea, main.work ol, main.work ul { text-align: left; }
main.work .cover .row { justify-content: flex-start; }

/* Question screens and tests: the whole window, a top strip, a left panel, the question in the middle,
   and a strip of buttons on the right. */
html.focus main { max-width: none; margin: 0; padding: 0; display: block; text-align: left; min-height: 0; }
/* The whole screen and no more: only the passage or a long question scrolls, never the page. */
.ws { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.wtop { position: relative; flex: none; display: flex; align-items: center; gap: 1.1em; height: 4.2em; padding: 0 1.5em; font-size: 1.05em; background: var(--side); }
.wtop strong { font: 600 1.05em var(--display); }
.wclose { width: 2.4em; height: 2.4em; display: grid; place-items: center; padding: 0; border-radius: 50%; background: transparent; box-shadow: none; }
.wclose:hover { background: rgba(var(--hover), 0.08); }
/* Pause: a small box like the Submit button's. */
.pausebtn { width: 2.4em; height: 2.3em; display: grid; place-items: center; padding: 0; border-radius: 9px; color: var(--text); background: var(--button-hover); transition: background 0.15s; }
.pausebtn:hover { background: var(--button-hover); }
.pausebtn svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
h1 .pausebtn { display: inline-grid; vertical-align: middle; font-size: 0.6em; margin-left: 0.4em; }
/* Covers the work while paused, so the pause can't be used to keep thinking. */
.pausecover { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; text-align: center; background: var(--bg); animation: fade 0.2s ease-out; }
/* Undo: a bar in reverse colors at the bottom for 5 seconds after a step that can be taken back. */
.undobar { position: fixed; left: 50%; bottom: 1.5em; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 1em; padding: 0.55em 0.6em 0.55em 1.1em; border-radius: var(--r); background: var(--text); color: var(--bg); box-shadow: var(--shadow); animation: fade 0.2s ease-out; }
.undobar button { background: transparent; color: var(--accent-soft); font-weight: 600; box-shadow: none; }
.wclose svg, .chip svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.chip { display: flex; align-items: center; gap: 0.45em; padding: 0.4em 0.95em; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.chip svg { stroke: var(--warm); }
button.chip { font: inherit; color: inherit; cursor: pointer; border: 0; }
button.chip.on { background: var(--accent-soft); color: var(--accent-text); box-shadow: none; }
.chip.late { background: var(--warn-bg); color: var(--warn-text); }
.chip.late svg { stroke: var(--orange); }
.wprog { position: absolute; left: 0; bottom: -1px; height: 3px; border-radius: 0 3px 3px 0; background: var(--accent); transition: width 0.35s var(--ease); }
.wbody { flex: 1; display: flex; min-height: 0; }
.wleft { flex: 0 0 36%; padding: 1.8em 2.6em 1.8em 2em; display: flex; flex-direction: column; min-height: 0; transition: flex-basis 0.25s var(--ease), padding 0.25s var(--ease); }
/* Scrolls on its own. */
.wleftin { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 1em; padding-right: 4px; }
.wleft.wide { flex-basis: 42%; }
.wleft.collapsed { flex-basis: 0; padding-left: 0; padding-right: 0; overflow: hidden; }
.wleft.collapsed .wleftin { visibility: hidden; }
/* The panel button sits at the top right of the side panel, and at the top left of the question area when the panel is hidden. */
.wcenter { position: relative; flex: 1; min-width: 0; min-height: 0; display: flex; background: var(--panel2); }
.sidetoggle { position: absolute; z-index: 2; top: 0.4em; left: -2.2em; width: 1.8em; height: 1.8em; }
.wleft.collapsed + .wcenter .sidetoggle { left: 0.4em; }
.doodle { flex: 0 1 auto; min-height: 0; max-height: 15em; margin-top: auto; align-self: center; width: 60%; fill: none; stroke: var(--muted); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.4; }
.wleft h2 { margin: 0; }
.wleft .text { font-size: 1.05em; line-height: 1.6; }
.wleft .passage { flex: 1; min-height: 0; max-height: none; margin: 0; }
.wleft .row button[data-tag] { border-radius: 999px; }
.wleft button.wide { width: 100%; padding: 0.8em; font-weight: 600; background: var(--accent-soft); color: var(--accent-text); box-shadow: none; }
.wleft button.wide:hover { background: color-mix(in srgb, var(--accent-soft) 85%, var(--accent)); }
.qhead { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.vtime { font-weight: 500; color: var(--muted); white-space: nowrap; }
.wreveal .vtime { text-align: right; }
.text .eq { display: block; margin: 0.35em 0 0.35em 1.5em; font-variant-numeric: tabular-nums; white-space: pre-wrap; }
.text .eqi { white-space: nowrap; font-variant-numeric: tabular-nums; }
.qstats { display: flex; flex-wrap: wrap; justify-content: center; gap: 1em 3em; }
.qstats > div { display: flex; flex-direction: column; align-items: center; gap: 0.45em; }
.qstats .dots span { width: 0.8em; height: 0.8em; }
.wleft.wide + .wcenter .wpanel { justify-content: flex-start; }
/* Tablets in landscape: a narrower side panel leaves the question more room. */
@media screen and (min-width: 901px) and (max-width: 1180px) {
  .wleft { flex-basis: 27%; padding: 1.3em 2.4em 1.3em 1.2em; }
  .wleft.wide:not(.collapsed) { flex-basis: 36%; }
  .wleft .topicpick > div, .wleft .topicpick select { width: 100%; min-width: 0; }
}
.verdict { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 0.85em 1.1em; border-radius: 12px; font-size: 1.15em; font-weight: 600; animation: enter 0.3s var(--ease); }
.verdict.good { background: var(--good-bg); color: var(--good-text); }
.verdict.bad { background: var(--bad-bg); color: var(--bad-text); }
.verdict span + span { font-size: 0.8em; font-weight: 500; }
.wpanel { flex: 1; overflow-y: auto; padding: 3em 3.5em 3em 10.5em; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 1.6em; }
.wpanel > * { width: 100%; max-width: 40em; }
.wpanel > .pill { width: auto; }
.wpanel .qtext { text-align: center; font-size: 1.6em; line-height: 1.45; text-wrap: balance; }
.wpanel .row { justify-content: center; }
.wpanel .choices { max-width: 36em; margin: 0; }
.wpanel .fig { margin: 0 auto; }
.wpanel .alert { margin: 0; }
.wpanel .passage { max-height: 40vh; }
.wreveal { display: flex; flex-direction: column; gap: 0.8em; }
.wrail { flex: 0 0 7em; padding: 1.3em 0.8em; display: flex; flex-direction: column; align-items: center; gap: 1.2em; }
.railbtn { display: flex; flex-direction: column; align-items: center; gap: 0.5em; padding: 0; background: transparent; font-size: 0.8em; text-align: center; box-shadow: none; }
.railbtn:hover, .railbtn.primary:hover { background: transparent; }
.railbtn:active:not(:disabled) { transform: none; box-shadow: none; }
.railbtn .ricon { width: 3.4em; height: 3.2em; display: grid; place-items: center; border-radius: 12px; background: var(--panel); transition: background 0.15s; }
.railbtn:hover .ricon { background: var(--button-hover); }
.railbtn svg { width: 1.5em; height: 1.5em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.railbtn.primary { background: transparent; box-shadow: none; font-size: 0.9em; font-weight: 600; color: var(--text); }
.railbtn.primary .ricon { width: 3.9em; height: 3.6em; background: var(--accent); color: var(--on-accent); box-shadow: none; }
.railbtn.primary:hover .ricon { background: var(--accent-hover); }
.railbtn.on .ricon { background: var(--accent-soft); }
.railbtn:disabled { color: var(--muted); opacity: 1; }
.railbtn.primary:disabled .ricon { background: var(--line-soft); color: var(--muted); }
.railbtn.marked .ricon { background: var(--warn-bg); color: var(--warn-text); }

/* Full test: the answer sheet and the cover page */
.qgrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.qgrid button { height: 2.7em; padding: 0; border-radius: 8px; font-weight: 600; font-variant-numeric: tabular-nums; }
.qgrid button.on { background: var(--accent); color: var(--on-accent); }
.qgrid button.marked { background: var(--warn-bg); color: var(--warn-text); }
.qgrid button.cur { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.qkey { display: flex; flex-direction: column; gap: 0.5em; }
.qkey li { display: flex; align-items: center; gap: 0.6em; }
.key { width: 1em; height: 1em; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--line); }
.key.on { background: var(--accent); }
.key.marked { background: var(--orange); }
.cover { max-width: 44em; margin: 18vh auto 0; padding: 2.4em 2.8em; border-radius: 16px; }
.cover .row { margin-top: 1.4em; }
.cover p { margin: 0; }

/* The left panel before answering */
.infobox { display: flex; flex-direction: column; gap: 0.6em; padding: 1em 1.2em; border-radius: var(--rc); background: var(--panel); }
.infobox h3 { margin: 0; font-size: 1.05em; font-weight: 700; }
/* The practice panel's mastery steps sit right on the panel, like the numbers under them */
.mastbox { padding: 0; background: none; box-shadow: none; }
.mastbox h3 { text-align: center; }
.inforow { display: flex; justify-content: space-between; gap: 1em; font-size: 0.92em; }
.dots { display: flex; gap: 4px; align-items: center; }
.dots span { width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--line); }
.dots span.on { background: var(--warm); }
.setdots { display: flex; flex-wrap: wrap; gap: 5px; }
.setdots span { width: 0.85em; height: 0.85em; border-radius: 4px; background: var(--line-soft); }
.setdots .good { background: var(--good); }
.setdots .bad { background: var(--bad); }
.setdots .cur { background: var(--accent-text); }
.tagrow { display: flex; flex-direction: column; align-items: center; gap: 0.5em; }
.tagrow strong { font-weight: 700; }
.tagrow .row { margin: 0; }
.tagrow button { border-radius: 999px; }
.box label[for="why"] { display: block; margin-bottom: 0.7em; }

/* A box over the blurred page (the explanations pop-up) */
.rankview { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(32, 33, 36, 0.45); animation: fade 0.2s ease-out; }
@keyframes fade { from { opacity: 0; } }
.rankcard { width: min(52em, 90vw); padding: 2.4em 2.8em; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 1.4em; font-size: 1.1em; animation: pop 0.25s var(--ease); }
@keyframes pop { from { opacity: 0; transform: scale(0.96) translateY(8px); } }
.rankcard p { margin: 0; }
.popcard h2 { margin: 0; font-size: 1.6em; }
.popcard .row { justify-content: flex-end; margin: 0; }

/* Get questions and Print: cards side by side */
.getwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.2em; align-items: start; }
/* Get questions: one outlined surface with the two steps stacked, so nothing leaves an empty gap */
.getpage { max-width: 50em; margin: 0 auto; }
.getgrid { overflow: hidden; border: 1px solid var(--line); border-radius: 16px; counter-reset: step; }
.getgrid .gcard { border-radius: 0; background: transparent; }
.getgrid .gcard + .gcard { border-top: 1px solid var(--line); }
.getgrid .gcard > h2 { display: flex; align-items: center; gap: 0.6em; font-size: 1.2em; }
.getgrid .gcard > h2::before { counter-increment: step; content: counter(step); display: grid; place-items: center; flex: none; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 0.85em; }
.getgrid .modepick { margin: 0; }
.getgrid .gtiles { border: 1px solid var(--line); background: transparent; }
.getgrid .gtile + .gtile { border-top: 1px solid var(--line); }
.getgrid details#topics { border: 1px solid var(--line); background: transparent; }
#tab-paste textarea { min-height: 8em; resize: vertical; }
#tab-paste .row { flex-wrap: wrap; }
#tab-paste .row button:not(.primary) { border: 1px solid var(--line); background: transparent; color: var(--link); }
#tab-paste .row button:not(.primary):hover { background: var(--button-hover); }
.gcol { display: flex; flex-direction: column; gap: 2em; min-width: 0; }
.gcard { min-width: 0; border-radius: 16px; padding: 1.6em 1.9em; display: flex; flex-direction: column; gap: 1em; }
.gcard h2 { margin: 0; font-size: 1.35em; }
.gcard p { margin: 0; }
.gcard .row { margin: 0; }
/* How many of each to ask for: a list, each name with its number on the right */
.gtiles { display: flex; flex-direction: column; border-radius: 12px; background: var(--panel); overflow: hidden; }
.gtile { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 0.55em 0.7em 0.55em 1.1em; border-radius: 0; background: transparent; box-shadow: none; }
.gtile input { width: 5.5em; font-weight: 600; text-align: center; }
.ghead { margin: 0.4em 0 -0.4em; font-size: 0.8em; font-weight: 600; color: var(--muted); }
.gcard details { border-radius: 12px; padding: 0.75em 1em; background: var(--panel2); }
.gcard summary { display: flex; align-items: center; justify-content: space-between; gap: 1em; font-weight: 600; }
.gcard summary button { font-weight: 400; }
#topics > summary #tcount::before { content: ""; display: inline-block; width: 0.42em; height: 0.42em; margin: 0 0.7em 0.15em 0.2em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform 0.15s; }
#topics[open] > summary #tcount::before { transform: rotate(45deg); }
.gcard #typeboxes { margin-top: 0.8em; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.2em; align-items: start; font-size: 0.9em; }
.gcard #typeboxes details.checks { padding: 0; border-radius: 0; background: none; }
.gcard #typeboxes .checks > div { columns: 1; }
.gcard #typeboxes .checks:first-child > div { columns: 2; column-gap: 1.2em; }
.gcard #typeboxes .checks > summary { justify-content: flex-start; gap: 0.6em; }
.gcard #typeboxes .checks[open] > summary { margin-bottom: 0.3em; }
.gcard #typeboxes.flow { display: block; columns: 2; column-gap: 1.2em; }
.gcard #typeboxes.flow .checks { break-inside: avoid; margin-bottom: 0.8em; }
.gcard #typeboxes.flow .checks > div { columns: 1; }
.gcard .checks label { break-inside: avoid; padding: 0.2em 0; }
.pchecks label { padding: 0.22em 0 !important; }
.gcard textarea { flex: none; }
.gcard table td { padding: 8px 4px; }

/* Explanations: a list on the left, the chosen one in full on the right */
.exwrap { display: grid; grid-template-columns: minmax(0, 32em) minmax(0, 1fr); gap: 2em; align-items: start; }
.excol { display: flex; flex-direction: column; gap: 1em; }
.extiles { margin: 0; }
.exlist { display: flex; flex-direction: column; gap: 8px; }
.exitem { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1em; padding: 0.75em 1em; border-radius: 12px; background: var(--panel); text-align: left; }
.exitem.on { background: var(--accent-soft); box-shadow: none; }
a.exitem { color: var(--text); text-decoration: none; transition: transform 0.15s; }
a.exitem:hover, button.exitem:hover { background: var(--panel2); }
.exitem.on:hover { background: var(--accent-soft); }
.exq { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--read); }
.exday { white-space: nowrap; color: var(--muted); }
.sheetitem { grid-template-columns: auto minmax(0, 1fr) auto; }
.sheetitem .exq { font-family: var(--ui); }
.score { display: inline-grid; place-items: center; min-width: 3.2em; padding: 0.25em 0.5em; border-radius: 8px; font-weight: 700; font-variant-numeric: tabular-nums; }
.score.good { background: var(--good-bg); color: var(--good-text); }
.score.mid { background: var(--warn-bg); color: var(--warn-text); }
.score.bad { background: var(--bad-bg); color: var(--bad-text); }
.score.big { font-size: 1.4em; padding: 0.3em 0.7em; }
/* A long explanation scrolls inside its panel instead of making the page taller. */
.exdetail { border-radius: 16px; padding: 1.8em 2.2em; display: flex; flex-direction: column; gap: 1.1em; max-height: calc(100vh - 8.5em); overflow-y: auto; }
.exhead { display: flex; align-items: center; gap: 1em; }
.exdetail .qtext { margin: 0; font-size: 1.3em; line-height: 1.5; }
.exblock { border-radius: 12px; background: var(--panel2); padding: 0.95em 1.15em; }
.exblock h3 { margin: 0 0 0.4em; font-size: 1em; }
.exblock p { margin: 0; }
.exblock.good { background: var(--good-bg); }
.exblock.bad { background: var(--bad-bg); }
.extwo { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.givebox #sgiveto { flex: 1; min-width: 0; }
#sgivemsg:empty { display: none; }
.extwo:has(> :only-child) { grid-template-columns: 1fr; }
.exanswer summary { display: flex; align-items: center; justify-content: space-between; list-style: none; }
.exanswer summary::-webkit-details-marker { display: none; }
.exanswer summary h3 { margin: 0; }
.exanswer summary::after { content: ""; width: 12px; height: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23c4c6d4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform 0.2s; }
.exanswer[open] summary::after { transform: rotate(180deg); }
.exanswer[open] summary { margin-bottom: 0.6em; }
.worktext { font-size: 1.05em !important; text-align: right; }

/* Full test setup and the test cover page */
.cover.setup { max-width: 62em; margin: 0 auto; width: 100%; text-align: left; display: flex; flex-direction: column; gap: 1em; }
.cover.setup h1 { margin: 0; }
.setcols { display: grid; grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)); gap: 1.2em; }
.setcol { display: flex; flex-direction: column; gap: 0.7em; padding: 1em 1.2em; border-radius: var(--rc); background: var(--panel2); }
.setcol h2 { margin: 0; }
.setcol .setin { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.setcol .setin input { flex: none; }
.setcol.plain { padding: 0; background: none; }

/* Sign in */
html.login #side { display: none; }
form.login { width: min(26em, 90vw); margin: 22vh auto 0; padding: 2.2em 2.4em; border-radius: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.5em; }
form.login .logo { display: flex; align-items: center; justify-content: center; gap: 0.6em; font: 600 1.5em var(--display); margin-bottom: 0.8em; }
form.login .logo svg { width: 1.9em; height: 1.9em; }
form.login input { font-size: 1.05em; padding: 0.55em 0.75em; margin-bottom: 0.6em; }
form.login button { margin-top: 0.4em; }

/* Other prompts on Get questions */

/* Info tips */
.info { position: relative; display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-left: 0.35em; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-size: 0.8em; cursor: help; vertical-align: middle; top: -0.08em; }
.info svg { width: 100%; height: 100%; fill: currentColor; }
.info path { stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; }
.info .tip { display: none; }
.floattip { position: fixed; z-index: 100; width: max-content; max-width: 20em; padding: 0.6em 0.85em; border-radius: 8px; background: #3c4043; color: #fff; font-size: 0.9em; line-height: 1.4; box-shadow: var(--shadow); pointer-events: none; animation: fade 0.12s ease-out; }

/* Interview */
.exitem.story { grid-template-columns: minmax(0, 1fr) auto; }
.exitem.story .exq { -webkit-line-clamp: 4; font-family: var(--ui); }
.storyform { display: flex; flex-direction: column; gap: 8px; }
.ivscores { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.ivscores .tile { display: flex; flex-direction: column; gap: 0.3em; padding: 0.7em 0.9em; }
.ivscores b { font: 600 1.5em var(--display); }
.ivscores small { font-size: 0.6em; font-weight: 500; }
.setcount { font-size: 1.3em; font-variant-numeric: tabular-nums; }
.tabpanel .exdetail { max-height: calc(100vh - 11.5em); }
.ivfor { gap: 2em; margin: 0 0 0.6em; } .ivfor input { width: 22em; }
/* Interview practice fills the screen: the grade box and the background list take the room that is left */
.ivpage { display: flex; flex-direction: column; gap: 16px; }
.ivpage h1 { flex: none; }
.ivpage > .tabpanel:not([hidden]) { flex: 1; min-height: 0; }
.ivpage .getwrap { height: 100%; align-items: stretch; }
.ivpage .gcard { min-height: 0; }
.ivpage #ivpaste { flex: 1; min-height: 14em; resize: none; }
.ivpage .exlist { flex: 1; min-height: 0; overflow-y: auto; }
/* The mock interview tab fits one screen: Start on the left, the parent's setup on the right with the background list scrolling inside */
html:not(.focus) main:has(> .ivpage .ivmock) { height: 100vh; justify-content: flex-start; }
html:not(.focus) main:has(> .ivpage .ivmock) > .ivpage { flex: 1; min-height: 0; }
.ivmock .gcol { min-height: 0; gap: 1.2em; }
.ivmock .gcol > .gcard { overflow-y: auto; }
.ivmock .ivbg { flex: 1; }
.ivmock .ivstartcard { align-self: start; }
.ivwork { font-weight: 600; }

/* Courses: white cards with the course's color as a stripe on top, and the + button */
.cpage > h1 { margin-top: 0.2em; }
.cpage > h2 { margin: 1.4em 0 0.7em; font-size: 0.9em; color: var(--muted); }
.cgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16em, 1fr)); gap: 1em; }
.ccard { position: relative; overflow: hidden; border-radius: 12px; background: var(--cc); color: #fff; transition: background 0.15s; }
.ccard::after { content: ''; position: absolute; right: -3.5em; bottom: -4.5em; width: 11em; height: 11em; border-radius: 50%; background: rgba(255, 255, 255, 0.1); pointer-events: none; }
.ccard:hover { background: color-mix(in srgb, var(--cc) 88%, #000); }
.ccard.dragging { opacity: 0.4; }
.cgrid[data-kind=""] .ccard { opacity: 0.6; }
.cmain { position: relative; z-index: 1; width: 100%; min-height: 10.5em; display: flex; flex-direction: column; gap: 0.3em; padding: 1.3em 1.3em 1.1em; border-radius: 12px; background: transparent; color: #fff; text-align: left; box-shadow: none; }
.cmain:hover { background: transparent; }
.cname { padding-right: 2em; font: 600 1.3em/1.25 var(--display); overflow-wrap: anywhere; }
.csub { color: rgba(255, 255, 255, 0.85); }
.cstatus { color: rgba(255, 255, 255, 0.9); }
.cfoot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.6em; }
.fab svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fab { position: fixed; right: 2em; bottom: 2em; z-index: 31; width: 3.6em; height: 3.6em; display: grid; place-items: center; padding: 0; border-radius: 16px; background: var(--accent-soft); color: var(--accent-text); box-shadow: var(--shadow); transition: transform 0.25s var(--ease), background 0.2s; }
.fab:hover { background: color-mix(in srgb, var(--accent-soft) 85%, var(--accent)); }
.fab svg { width: 1.8em; height: 1.8em; stroke-width: 2.2; }
.fab.on { transform: rotate(45deg); }

/* The course form: the new-course page, a course's Settings page and the card's popup */
.cform { display: flex; flex-direction: column; gap: 1.8em; }
.formbar { margin: 0; gap: 1em; flex: none; }
.formbar h1 { margin: 0; }
#sdone { color: var(--good); }
.formcols { flex: 1; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 1.6em; }
.formcols[hidden] { display: none; }
.unitstab:has(> .fcol) { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.formcols .gcard { min-height: 0; gap: 0.75em; overflow-y: auto; }
.formcols .gcard h2 { margin: 0; }
.formcols .gcard h2 ~ h2 { margin-top: 0.1em; }
.fgrid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.75em 1.4em; align-items: center; }
.fgrid input:not([type="checkbox"]), .fgrid select { width: 100%; }
.fgrid input[type="checkbox"] { width: 1.2em; height: 1.2em; margin: 0; }
.colorpick { display: flex; align-items: center; gap: 0.7em; }
.colorpick select { flex: 1; }
.swatch { flex: none; width: 1.6em; height: 1.6em; border-radius: 50%; }
.formcols textarea.grow { flex: 1; min-height: 6em; resize: none; }
.methods { display: flex; flex-direction: column; gap: 0.45em; }
.method { padding: 0.55em 0.95em; border-radius: 12px; background: var(--panel); }
.mhead { display: flex; align-items: center; gap: 0.6em; font-weight: 600; }
.mhead input { width: 1.2em; height: 1.2em; margin: 0; }
.mopts { display: flex; flex-direction: column; gap: 0.45em; margin: 0.35em 0 0 1.8em; }
.mopts[hidden] { display: none; }
.unitbtns { flex: none; display: grid; gap: 0.6em; }
.fline > span { min-width: 0; }
.cform:not(.moreon) .more, .cform:not(.moreon) .mopts:not(:has(> :not(.more))) { display: none; }
.fline { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.fline input[type="number"] { width: 4.5em; flex: none; }
.fline input:not([type="number"]):not([type="checkbox"]) { flex: 1; min-width: 0; }
.glist { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 1em; overflow-y: auto; }
.gitem { flex: none; display: flex; flex-direction: column; gap: 0.5em; padding: 0.9em 1em; border-radius: 12px; background: var(--panel2); }
.gitem .row { margin: 0; flex-wrap: nowrap; }
.gweights > summary { cursor: pointer; color: var(--muted); font-size: 0.9em; }
.gweights small { display: block; margin: 0.4em 0; color: var(--muted); }
.gweights .wrow { display: flex; align-items: center; justify-content: space-between; gap: 0.8em; padding: 0.2em 0; }
.gweights .wrow span { min-width: 0; overflow-wrap: anywhere; }
.pitem { flex: none; display: flex; flex-direction: column; gap: 0.6em; padding: 0.9em 1em; border-radius: 12px; background: var(--panel2); }
.pitem .row { margin: 0; flex-wrap: nowrap; }
.pitem .gitem { background: var(--panel); }
.pitem > button[data-gaddto] { align-self: flex-start; }
.pname { flex: 1; min-width: 0; font-weight: 700; }
.chaptick { display: flex; align-items: center; gap: 0.5em; font-weight: 600; cursor: pointer; }
.gname { flex: 1; min-width: 0; font-weight: 600; }
.aibox { display: flex; flex-direction: column; gap: 0.6em; padding: 0.9em 1em; border-radius: 12px; background: var(--panel2); }
.aibox[hidden] { display: none; }
.aisources { display: flex; flex-direction: column; gap: 0.3em; }
.aisources[hidden] { display: none; }
/* Settings: each column is a stack of cards, and every row lines its box up at the same right edge */
.fcol { min-height: 0; display: flex; flex-direction: column; gap: 1em; overflow-y: auto; }
.fcol > .gcard { flex: none; overflow: visible; }
.fcol > .growcard { flex: 1 0 auto; }
.fcol .fgrid { grid-template-columns: max-content minmax(0, 1fr); gap: 0.7em 1em; }
.fcol .fgrid > span:has(> #scalc) { display: flex; }
.fcol .unitcard .fgrid { grid-template-columns: 9.5em minmax(0, 1fr); }
.growcard textarea.grow { min-height: 7em; height: 0; }
.cardhead { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.tlist { display: flex; flex-direction: column; gap: 0.6em; }
.tlist:empty { display: none; }
.trow { display: grid; grid-template-columns: minmax(0, 1fr) 9.4em auto; gap: 0.5em; align-items: center; margin: 0; }
.trow .tname { min-width: 0; }
.trow .tdate { width: 100%; }
.learn select { min-width: 16em; max-width: 30em; width: auto; }
.unitnote { display: flex; width: fit-content; align-items: center; gap: 0.7em; margin: 0; }
.unitnote .bang { flex: none; width: 1.6em; height: 1.6em; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: #1a1b22; font-weight: 700; }

/* The course card's popup */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(32, 33, 36, 0.45); opacity: 0; transition: opacity 0.18s; }
.modal.on { opacity: 1; }
.modalcard { width: min(1560px, 92vw); padding: 1.6em 2em; border-radius: 16px; background: var(--bg); box-shadow: var(--shadow); transform: scale(0.96) translateY(10px); transition: transform 0.25s var(--ease); }
.modal.on .modalcard { transform: none; }

/* The + button's card, which grows out of the button */
.addpop { position: fixed; right: 2em; bottom: 7em; z-index: 30; width: 24em; padding: 1.15em; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow);
  transform-origin: calc(100% - 2em) calc(100% + 3em); transform: scale(0.6) translateY(1.5em); opacity: 0; transition: transform 0.25s cubic-bezier(0.3, 1.3, 0.5, 1), opacity 0.15s; }
.addpop.on { transform: none; opacity: 1; }
.addpop:has(#classfind) { max-height: calc(100vh - 9em); overflow-y: auto; }
.popin { display: flex; flex-direction: column; gap: 0.6em; animation: popfwd 0.22s var(--ease); }
.popin.back { animation-name: popback; }
@keyframes popfwd { from { opacity: 0; transform: translateX(1.2em); } }
@keyframes popback { from { opacity: 0; transform: translateX(-1.2em); } }
.popin h3 { margin: 0.5em 0 0; font: 600 0.9em var(--ui); color: var(--muted); }
.pophead { display: flex; align-items: center; gap: 0.5em; font: 600 1.15em var(--display); }
.popback { width: 2em; height: 2em; display: grid; place-items: center; padding: 0; border-radius: 50%; background: transparent; box-shadow: none; }
.popback:hover { background: rgba(var(--hover), 0.08); }
.popback svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.popgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5em; }
.popbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15em; padding: 0.65em 0.9em; border-radius: 12px; background: var(--panel2); text-align: left; font-weight: 600; }
.popbtn:hover:not(:disabled) { background: var(--button-hover); }
.popbtn.big { padding: 1.1em 1.2em; font: 600 1.2em var(--display); }
.popbtn small { font-weight: 400; font-size: 0.8em; }
.popbtn.own { margin-top: 0.5em; }
.subjrow { display: grid; grid-template-columns: minmax(0, 1fr) 12em; align-items: center; gap: 0.8em; font-weight: 600; }
.subjrow select { width: 100%; }
#classfind { width: 100%; margin-top: 0.5em; }
.findhint { margin: -0.2em 0 0; }
#classfound:empty { display: none; }
#classfound p { grid-column: 1 / -1; margin: 0; }

/* Picking a topic at the top of a practice or speed set's side panel, laid out like the question's numbers */
.topicpick { flex: none; gap: 1em 2em; }
.wleft:has(.topicpick) { padding-top: 0.6em; }
.topicpick select { width: auto; min-width: 16em; max-width: 100%; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Mastery levels, like Khan Academy's, each with its color */
.lv-none { --lv: #80868b; } .lv-attempted { --lv: #e8710a; } .lv-familiar { --lv: #f9ab00; } .lv-proficient { --lv: #12a4af; } .lv-mastered { --lv: #1e8e3e; }
.mlevel { flex: none; display: inline-flex; align-items: center; gap: 0.45em; color: var(--muted); font-size: 0.85em; white-space: nowrap; }
.mlevel::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--lv); }
/* The practice panel: four steps that fill up in the level's color */
.msteps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; font-size: 0.78em; text-align: center; color: var(--muted); }
.msteps span { padding-top: 0.7em; background: linear-gradient(var(--line-soft), var(--line-soft)) top / 100% 6px no-repeat; }
.msteps span[class]:not([class=""]) { color: var(--text); background-image: linear-gradient(var(--lv), var(--lv)); }

/* Phones and tablets held upright: the menu is a bar at the top, and everything stacks in one column that scrolls. */
/* Stats */
.statspage { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.statspage h1 { margin: 0; }
.statshead { align-items: center; margin: 0.3em 0 0.4em; }
.statshead select { width: auto; }
.stiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10em, 1fr)); gap: 12px; }
.stiles .tile { display: flex; flex-direction: column; gap: 0.35em; }
.stiles .tile span { color: var(--muted); font-weight: 500; }
.stiles .tile b { font: 600 1.8em/1 var(--display); }
.stiles .tile small { font-size: 0.5em; font-weight: 500; color: var(--muted); }
.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.chartcard h2, .breakdown h2 { margin: 0; font-size: 1.05em; }
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.cgline { stroke: var(--line-soft); stroke-width: 1; }
.caxis { fill: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.cline { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carea { opacity: 0.1; }
.cdot { stroke: var(--panel); stroke-width: 2; }
.chit { fill: transparent; }
.cpt { outline: none; }
.cpt:hover .chit, .cpt:focus-visible .chit { fill: rgba(var(--hover), 0.05); }
.cpt:hover .cbar, .cpt:focus-visible .cbar { opacity: 0.8; }
.cpt:hover .cdot, .cpt:focus-visible .cdot { r: 6; }
.ctip { position: fixed; z-index: 90; pointer-events: none; padding: 0.35em 0.7em; border-radius: 8px; background: #3c4043; color: #fff; font-weight: 600; font-size: 0.9em; white-space: nowrap; }
.gcard details.ctable { padding: 0; background: none; }
.ctable summary { color: var(--muted); font-size: 0.9em; }
.ctable table { margin-top: 0.4em; }
.stable td { font-variant-numeric: tabular-nums; }
.stable tr[data-topic] { cursor: pointer; }
.stable tr[data-topic]:hover, .stable tr.on { background: rgba(var(--hover), 0.06); }
.stable .stotal td { font-weight: 600; }
.stable .mlevel { white-space: nowrap; }
.snote { color: var(--muted); margin: 0; }
.yearseg { align-self: flex-start; }
.breakdown { text-align: left; max-width: 46em; margin: 1em auto; }
.breakdown h3 { margin: 0.6em 0 0; font-size: 1em; }
.breakdown td:last-child { text-align: right; }

@media screen and (max-width: 900px) {
  body { display: block; font-size: 16px; overflow-x: clip; }
  .stable { display: block; overflow-x: auto; }
  .charts { grid-template-columns: 1fr; }
  .printcols { grid-template-columns: minmax(0, 1fr); }
  html:not(.focus) main:not(.work) { padding: 1em 1em 2.5em; justify-content: flex-start; min-height: 0; }
  .ntake { margin-bottom: 1.4em; }
  .pvside { position: static; }
  main { padding: 1em 1em 2.5em; }
  h1 { font-size: 1.5em; }
  #side { position: sticky; top: 0; z-index: 40; width: auto; height: auto; flex-direction: row; align-items: center; gap: 0; padding: 0.55em 0.6em 0.55em 1em; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  #side .logo { flex: 1; padding: 0 !important; font-size: 1.05em; }
  #side .logo svg { width: 1.8em; height: 1.8em; }
  #side > a, #side > button, #side .grow, #status { display: none; }
  #side > #menubtn { display: grid; place-items: center; width: 2.6em; height: 2.6em; padding: 0; border-radius: 50%; }
  #side > #menubtn svg { width: 1.5em; height: 1.5em; opacity: 1; }
  html.menuopen { overflow: hidden; }
  html.menuopen #side { position: fixed; inset: 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 0.55em 1em 1.5em; overflow-y: auto; animation: fade 0.15s ease-out; }
  html.menuopen #side .logo { flex: none; min-height: 2.6em; }
  html.menuopen #side > #menubtn { position: absolute; top: 0.55em; right: 0.6em; }
  #menubtn .mclose, html.menuopen #menubtn .mopen { display: none; }
  html.menuopen #menubtn .mclose { display: inline; }
  html.menuopen #side > a, html.menuopen #side > button:not(#menubtn) { display: flex; padding: 0.85em 0.9em; font-size: 1.1em; border-radius: 999px; }
  html.menuopen #side .grow { display: block; min-height: 1em; }

  /* Home */
  .secthead { flex-wrap: wrap; }
  .setin.learn { display: flex; flex-direction: column; gap: 0.35em; width: 100%; white-space: normal; }
  .learn select { min-width: 0; max-width: none; width: 100%; }
  .mtiles { --gap: 10px; }
  .mtile { min-width: 0; gap: 0.55em; padding: 0.85em 0.9em; }
  .rowi { flex-wrap: wrap; padding: 0.7em 1em; }
  .rowi button { margin-left: calc(1.35em + 0.9em); }
  .hbanner { min-height: 7em; padding: 1.2em 1.3em; }
  .hbanner h1 { font-size: 1.7em; }
  .hday { grid-template-columns: minmax(0, 1fr); gap: 1em; }

  /* Question screens: the whole screen scrolls as one page. The top strip and the button row stay pinned. The side panel sits above the question and can be hidden */
  .ws { height: auto; min-height: 100dvh; overflow: visible; }
  .wtop { position: sticky; top: 0; z-index: 5; height: 3.3em; gap: 0.6em; padding: 0 0.7em; font-size: 0.95em; }
  .wtop strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .wtop > span:not(.grow):not(.wprog) { white-space: nowrap; }
  .wbody { flex: 1 0 auto; flex-direction: column; }
  .wleft, .wleft.wide { flex: none; padding: 0.9em 1em; }
  .wleft.collapsed { display: none; }
  .wleftin, .wleft .passage, .wpanel, .wpanel .passage { overflow: visible; max-height: none; }
  .topicpick > div, .topicpick select { width: 100%; min-width: 0; }
  .doodle { display: none; }
  .wcenter { flex-direction: column; }
  .sidetoggle, .wleft.collapsed + .wcenter .sidetoggle { top: 0.4em; left: auto; right: 0.5em; width: 2.6em; height: 2.6em; }
  .wpanel { padding: 1.3em 1em; justify-content: flex-start; gap: 1.1em; }
  .wcenter:has(> .sidetoggle) .wpanel { padding-top: 3.2em; }
  .wpanel .qtext { font-size: 1.25em; }
  .choices button { font-size: 1.05em; padding: 0.6em 0.8em; }
  .wrail { position: sticky; bottom: 0; z-index: 5; flex: none; flex-direction: row; align-items: center; gap: 0.9em; padding: 0.6em 0.9em calc(0.6em + env(safe-area-inset-bottom)); background: var(--side); }
  .railbtn { flex-direction: row; gap: 0.5em; text-align: left; }
  .railbtn br { display: none; }
  .railbtn .ricon { width: 2.6em; height: 2.5em; }
  .railbtn.primary .ricon { width: 3em; height: 2.8em; }
  .qgrid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
  .qgrid button { height: 2.3em; font-size: 0.9em; }

  /* Get questions, Print, Explanations, Interview: one column */
  main:has(> .getwrap) { height: auto; display: block; }
  .getwrap, main > .getwrap { display: flex; flex-direction: column; gap: 1.2em; }
  .gcol { gap: 1.2em; max-height: none; }
  .gcol > #tab-get { overflow: visible; }
  .gcard { padding: 1.1em 1.1em; }
  .gcard summary { flex-wrap: wrap; }
  .gcard summary > span:first-child { white-space: nowrap; }
  .gcard summary .row { flex-wrap: nowrap; }
  .checks label { display: flex; align-items: flex-start; }
  .checks label input[type="checkbox"] { flex: none; margin-top: 0.15em; }
  .gcard #typeboxes { grid-template-columns: minmax(0, 1fr); }
  .gcard #typeboxes .checks:first-child > div, .gcard #typeboxes.flow, #typeboxes .checks > div { columns: 1; }
  .sheet, .essaycols { columns: 1; }
  .exwrap { display: flex; flex-direction: column; gap: 1.2em; }
  .exdetail, .tabpanel .exdetail { max-height: none; padding: 1.2em; }
  .exhead { flex-wrap: wrap; gap: 0.5em 1em; }
  .exhead .grow { display: none; }
  .extwo { grid-template-columns: minmax(0, 1fr); }
  .extiles .tile b { font-size: 1.5em; }
  .ivpage { height: auto; } html:not(.focus) main:has(> .ivpage .ivmock) { height: auto; }
  .ivpage .getwrap { height: auto; }
  .ivpage .exlist { overflow: visible; }
  .ivscores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ivfor { gap: 0.8em; }
  .ivfor .setin { display: flex; flex-direction: column; gap: 0.3em; width: 100%; white-space: normal; }
  .ivfor input, .ivfor select { width: 100%; }
  .tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .tabs button { padding: 0.5em 0.6em; font-size: 0.92em; }
  .gcard .bigbtn { width: 100%; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #typed { width: 100%; }
  .bigtimer { font-size: 4em; }
  .card { font-size: 1.3em; padding: 1.2em; min-height: 22vh; margin-bottom: 12px; }
  main.work { justify-content: flex-start; }
  main.work > .row:has(> [data-g]) { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  main.work > .row > [data-g] { padding: 0.6em 0.2em; }
  .essayplan { height: 10em; }
  .essaytext { height: 60dvh; }
  main.work { min-height: 100dvh; }

  /* Settings and the course pop-up: the cards stack, and the boxes for writing get room */
  .cform { height: auto; }
  .formbar { flex-wrap: wrap; gap: 0.6em; }
  .formbar h1 { width: 100%; }
  .formbar .grow { display: none; }
  #smsg:empty, #sdone:empty { display: none; }
  .formbar .seg { width: 100%; display: grid; grid-template-columns: 1fr 1fr; border-radius: 22px; }
  .formbar .seg button { flex: 1; padding: 0.5em 0.4em; white-space: nowrap; font-size: 0.92em; }
  .formbar .bigbtn { font-size: 1em; padding: 0.55em 1.1em; }
  .formcols, .unitstab:has(> .fcol) { display: flex; flex-direction: column; gap: 1.2em; }
  .formcols[hidden] { display: none; }
  .fcol, .formcols .gcard, .glist { overflow: visible; }
  .fcol > .growcard { flex: none; min-height: 0; }
  .growcard textarea.grow, .formcols textarea.grow { height: auto; min-height: 12em; }
  .fcol .fgrid, .fcol .unitcard .fgrid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .fline > span { white-space: normal; }
  .fline:has(> input:not([type="number"])) { flex-direction: column; align-items: stretch; gap: 0.35em; }
  .fcol .unitcard .fgrid { grid-template-columns: minmax(0, 1fr); gap: 0.3em; }
  .fcol .unitcard .fgrid label:not(:first-child) { margin-top: 0.5em; }
  .pitem { padding: 0.7em; }
  .pitem .gitem { padding: 0.6em; }
  /* Remove next to a name is a small x, so the name keeps its room */
  button[data-gdel], button[data-pdel], button[data-tdel] { flex: none; width: 38px; height: 38px; padding: 0; font-size: 0; display: grid; place-items: center; }
  button[data-gdel]::before, button[data-pdel]::before, button[data-tdel]::before { content: "\2715"; font-size: 15px; line-height: 1; }
  .trow { grid-template-columns: minmax(0, 1fr) auto; }
  .trow .tname { grid-column: 1 / -1; }
  .modal { place-items: center; padding: 0.75em; }
  .modalcard, .modalcard.tpop { width: 100%; max-height: calc(100dvh - 1.5em); padding: 1.2em; overflow-y: auto; }

  /* Courses and the + button */
  .cpage > h1 { font-size: 1.8em; }
  .cgrid { grid-template-columns: minmax(0, 1fr); gap: 1em; }
  .cmain { min-height: 9.5em; }
  .fab { right: 1.1em; bottom: calc(1.1em + env(safe-area-inset-bottom)); width: 3.6em; height: 3.6em; }
  .addpop { left: 0.75em; right: 0.75em; width: auto; bottom: 6em; max-height: calc(100dvh - 8em); overflow-y: auto; }
  .subjrow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  /* Boxes over the page */
  .rankcard { width: calc(100vw - 2em); max-height: 90dvh; overflow-y: auto; padding: 1.4em 1.2em; font-size: 1em; }
  .cover, html.focus .cover { margin: 1em; padding: 1.4em 1.2em; }
  .cover p + p { margin-top: 0.6em; }
  form.login { margin-top: 12vh; padding: 1.8em 1.4em; }
  .floattip { max-width: calc(100vw - 2em); }
}
/* Tablets held upright have room for two course cards in a row. */
@media screen and (min-width: 600px) and (max-width: 900px) {
  .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
sup, sub { font-size: 0.7em; line-height: 0; }
.rad { border-top: 1px solid currentColor; padding-top: 0.05em; }
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 0.15em; }
.frac > span:first-child { border-bottom: 1px solid currentColor; padding: 0 0.2em; }
sup .frac, sub .frac { display: inline; margin: 0; }
sup .frac > span:first-child, sub .frac > span:first-child { border: 0; padding: 0; }
sup .frac > span:first-child::after, sub .frac > span:first-child::after { content: "/"; }
.mpreview { display: flex; justify-content: center; align-items: center; gap: 1em; margin: 0.6em 0 0; font-family: var(--read); font-size: 1.3em; }
.mpreview > span:first-child { font-family: var(--ui); font-size: 0.6em; color: var(--muted); }

/* Today: a phase pill row, a stack of cards (the first open), and the finished ones folded away. */
.pill { padding: 0.15em 0.75em; border-radius: 999px; background: var(--panel2); color: var(--muted); font-size: 0.88em; }
.pill.on { background: var(--accent-soft); color: var(--accent-text); }
.tstack { display: grid; gap: 0.15em; }
.donefold { margin-top: 0.6em; }
.trow { display: flex; align-items: center; gap: 1em; padding: 0.7em 1em; border-radius: 12px; }
.trow:hover { background: rgba(var(--hover), 0.06); }
.ticon { flex: none; display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 10px; background: color-mix(in srgb, var(--ic, currentColor) 16%, transparent); }
.ticon svg { width: 1.2em; height: 1.2em; fill: none; stroke: var(--ic, currentColor); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ticon:has(.math) { --ic: var(--math); } .ticon:has(.accent) { --ic: var(--blue); } .ticon:has(.warm) { --ic: var(--warm); } .ticon:has(.english) { --ic: var(--english); }
.ticon:has(.sky) { --ic: #7b5cf0; } .ticon:has(.gold) { --ic: var(--gold); } .ticon:has(.grey) { --ic: var(--muted); }
.ttext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15em; font-weight: 500; }
.ttext small { color: var(--muted); font-weight: 400; font-size: 0.88em; }
.tmin { flex: none; color: var(--muted); font-size: 0.88em; }
.trow button { flex: none; padding: 0.35em 1em; }
.tchecks { display: grid; gap: 0.4em; margin-top: 0.4em; font-weight: 400; }
.donehead { margin: 0; padding: 0.7em 1em; color: var(--muted); }
.chead { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; flex-wrap: wrap; }
.cprog { margin: 0.5em 0 1em; }
.card.cback { min-height: 0; font-size: 1.3em; padding: 1.4em 2em; }

/* Course settings: one column of sections like Google's settings pages. Each row has its label on the left and its control on the right. */
.cform { width: 100%; max-width: 50em; margin: 0 auto; }
.formcols.setform:not([hidden]) { display: flex; flex-direction: column; gap: 2em; }
.sset h2 { margin: 0 0 0.6em; font-size: 1.2em; }
.sset .cardhead { margin-bottom: 0.6em; }
.sset .cardhead h2 { margin: 0; }
.shelp { margin: 0 0 0.9em; color: var(--muted); }
.sbox { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.tlist.sbox { gap: 0; }
.srow { display: flex; align-items: center; justify-content: space-between; gap: 1.5em; padding: 0.8em 1.1em; }
.srow + .srow { border-top: 1px solid var(--line); }
.srow.stack { flex-direction: column; align-items: stretch; gap: 0.5em; }
.srow small { color: var(--muted); }
.srow textarea { width: 100%; resize: vertical; }
.srow .row { margin: 0; flex-wrap: wrap; }
.slabel { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.15em; }
.sctl { flex: 0 0 18em; min-width: 0; }
.sctl input:not([type="checkbox"]), .sctl select { width: 100%; }
.sctl:has(> input[type="checkbox"]) { flex: none; display: flex; }
.sctl input[type="checkbox"] { width: 1.2em; height: 1.2em; margin: 0; }
.givebox input { flex: 1; min-width: 0; }
#ssharemsg:empty, #sgivemsg:empty, #amsg:empty { display: none; }
.sset button { border: 1px solid var(--line); background: transparent; color: var(--link); }
.sset button:hover { background: var(--button-hover); }
/* A test in the Tests list: its fields on one line that wraps, its lists full width below */
.tcard { flex-direction: column; align-items: stretch; gap: 0.6em; padding: 0.9em 1.1em; border-radius: 0; }
.tcard:hover { background: none; }
.tcard + .tcard { border-top: 1px solid var(--line); }
.tcard .row { margin: 0; flex-wrap: wrap; }
.tcard .tname { flex: 1 1 10em; min-width: 0; }
.tcard .tdate { width: auto; }
.tcard textarea { width: 100%; }
/* Admin: the same sections as course settings */
.adminpage { width: 100%; max-width: 50em; margin: 0 auto; display: flex; flex-direction: column; gap: 2em; }
.adminpage h1 { margin: 0; }
.acode { font: 600 1.2em var(--ui); letter-spacing: 0.08em; }
.arow .slabel b { overflow-wrap: anywhere; font-weight: 600; }
.arow .row { flex: none; }
form.login #newacct { background: none; box-shadow: none; color: var(--link); }
@media screen and (max-width: 600px) {
  .srow { flex-wrap: wrap; gap: 0.5em; }
  .srow:has(.sctl > input[type="checkbox"]) { flex-wrap: nowrap; }
  .slabel { flex-basis: 100%; }
  .srow:has(.sctl > input[type="checkbox"]) .slabel { flex-basis: 0; }
  .sctl { flex: 1 1 100%; }
}
/* Certificates */
.cert { max-width: 760px; margin: 24px auto; padding: 48px 56px; border: 6px double var(--text); text-align: center; break-inside: avoid; }
.cert h1 { margin: 8px 0 24px; }
.certsite { font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.certname { font: 600 2em var(--display); margin: 12px 0; }
.certfine { font-size: 0.8em; color: var(--muted); }
@media print { .cert { margin: 0 auto; } .certfine { color: #000; } }