/* Styles for: the practice screen, the "set complete" screen, the topic page,
   and simple form pages (login, sign up, join class) */


/* ===================================================================
   SIZES - change these numbers to resize the buttons and the problem card.
   Everything on the practice page reads its size from here,
   so you never have to hunt through the rest of this file.
   (px = pixels. "height" is how tall, "font" is the text size.)
   =================================================================== */
:root {
  /* Corners - one roundness for all practice buttons so they match */
  --button-radius: 10px;

  /* Top of the page: back arrow, "Hint", "Show example" */
  --header-button-height: 40px;
  --header-button-font: 15px;
  --header-button-side-padding: 14px;

  /* "Submit answer" */
  --submit-height: 48px;
  --submit-font: 17px;

  /* "Skip this problem" (sits under Submit) */
  --skip-height: 40px;
  --skip-font: 15px;

  /* Width of the Submit/Skip column when the answers are under the problem */
  --stacked-buttons-width: 220px;

  /* Multiple choice answers (A, B, C, D) */
  --choice-height: 56px;
  --choice-font: 18px;
  --choice-letter-size: 32px;    /* the little "A" square */

  /* Yes / No buttons (only 2 choices, side by side) */
  --yes-no-height: 64px;
  --yes-no-font: 20px;
  --yes-no-max-width: 420px;     /* how wide the pair can get in total */

  /* Math buttons under the answer box: x², √, fraction, ( ), π */
  --math-button-size: 44px;
  --math-button-font: 20px;

  /* Keyboard button inside the answer box */
  --keyboard-button-size: 40px;

  /* The answer box you type in */
  --answer-box-height: 56px;

  /* ---- The problem card (the white box with the problem and answers) ---- */
  /* The card is only as tall as what's inside it. Raise this to force a taller card. */
  --card-min-height: 0px;
  /* Space inside the card, around the problem and around the answers */
  --card-padding-top-bottom: 28px;
  --card-padding-sides: 36px;
  /* Space between the things inside the card (instruction, question, table...) */
  --card-gap: 16px;
  /* Room saved for big math like x³ + 4x² - 9x - 36, so short problems don't look squished */
  --question-math-min-height: 110px;
  /* Word problem text size */
  --question-text-size: 22px;
  /* Size of the fraction = fraction boxes in "Set up a proportion" */
  --proportion-size: 32px;
  /* Pictures under the problem (triangles, cars with arrows...): the biggest they can be */
  --picture-max-width: 480px;
  --picture-max-height: 300px;
}


h1 { margin: 0; font-size: 32px; font-weight: 800; }
.section-title { margin: 12px 0 0; font-size: 22px; font-weight: 800; }
.back-link { font-weight: 700; align-self: flex-start; }
.big-bar { height: 14px; border-radius: 7px; max-width: 760px; }
.big-bar > span { border-radius: 7px; transition: width .4s; }

/* A stacked fraction, like 1 over 2 (used by the pretty_math filter) */
.frac {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  text-align: center;
  font-size: 0.75em;
  line-height: 1.1;
  margin: 0 0.1em;
}
.frac > span:first-child { border-bottom: 1.5px solid currentColor; padding: 0 0.15em; }
/* Exponents inside a fraction (x⁹ over x⁴): don't let them make the line taller, and give the
   bottom part a little room so its exponent doesn't touch the fraction line */
.frac sup { line-height: 0; }
.frac > span:last-child:has(sup) { padding-top: 0.38em; }


/* ===================================================================
   Practice screen
   =================================================================== */

.practice-app { gap: 20px; }

/* ---- Header: back button, title, Hint / Show example ---- */

.practice-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.practice-title { display: flex; align-items: center; gap: 16px; }
.practice-title h1 { font-size: 26px; }
.practice-eyebrow { display: block; font-size: 16px; font-weight: 700; color: var(--muted); }

.icon-button {
  flex: none;
  width: var(--header-button-height);
  height: var(--header-button-height);
  border: none;
  border-radius: var(--button-radius);
  background: var(--soft);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.icon-button:hover { background: var(--hover); text-decoration: none; }

.practice-tools { display: flex; gap: 12px; }
.tool-button {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--header-button-height);
  padding: 0 var(--header-button-side-padding);
  border: none;
  border-radius: var(--button-radius);
  background: var(--soft);
  color: var(--ink);
  font-size: var(--header-button-font);
  font-weight: 800;
}
.tool-button svg { width: 22px; height: 22px; }
.tool-button:hover { background: var(--hover); }
.tool-button:disabled { opacity: 0.45; cursor: default; background: var(--soft); }

/* ---- "Problem 3 of 10" ---- */

.set-progress { display: flex; align-items: center; gap: 16px; font-size: 16px; font-weight: 700; }
.set-progress .bar { flex: 1; height: 8px; border-radius: 4px; }
.set-progress .bar > span { border-radius: 4px; transition: width .4s; }

/* ---- The card: problem on the left, answers on the right ---- */

.problem-card {
  min-height: var(--card-min-height);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
}

.problem-side { padding: var(--card-padding-top-bottom) var(--card-padding-sides); display: flex; flex-direction: column; gap: var(--card-gap); }

.instruction { margin: 0; font-size: 20px; font-weight: 700; }

/* Big centered math, like x³ + 4x² − 9x − 36 */
.question-math sup { font-size: 0.58em; line-height: 0; vertical-align: 0.8em; }
.question-math {
  flex: 1;
  min-height: var(--question-math-min-height);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(34px, 4.2vw, 60px);
  line-height: 1.3;
}

/* Word problem paragraph. Numbers are highlighted (class "num"). */
.question-text {
  margin: 0;
  font-size: var(--question-text-size);
  line-height: 1.6;
  text-wrap: pretty;
}
/* With a table under it, the text is smaller and sits at the top */
.question-text.with-table { margin: 0; font-size: 20px; }
.question-text .num, .question-text .math {
  font-family: 'STIX Two Text', serif;
  font-weight: 500;
  font-size: 1.14em;
}

.problem-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  font-size: 18px;
}
.problem-table th { background: var(--soft); text-align: left; padding: 12px 24px; font-weight: 800; }
.problem-table th .math { font-size: 1.15em; }
.problem-table td { padding: 12px 24px; border-top: 1px solid var(--border); font-size: 24px; }

/* ---- Pictures under the problem (built by generators/pictures.py) ----
   Lines and text use the page's text color, so pictures work in dark mode too. */
.problem-picture { margin: 0; display: flex; justify-content: center; }
.picture-svg { display: block; width: 100%; height: auto; max-width: var(--picture-max-width); max-height: var(--picture-max-height); color: var(--ink); overflow: visible; }
.small-picture .picture-svg { max-width: 360px; max-height: 240px; }
.picture-svg .shape { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.picture-svg .shape.thin { stroke-width: 1.8; }
.picture-svg .shape.thick { stroke-width: 4; }
.picture-svg .shape.dashed { stroke-dasharray: 7 6; }
.picture-svg .shape.accent { stroke: var(--primary); }
.picture-svg .shape.muted { stroke: var(--muted); }
.picture-svg .shape.filled { fill: currentColor; stroke-width: 1; }
.picture-svg .shape.accent.filled { fill: var(--primary); }
.picture-svg .shape.muted.filled { fill: var(--muted); }
.picture-svg .shape.filled-soft { fill: var(--soft); }
.picture-svg .shape.hole { fill: var(--surface); }        /* a cut-out in a shape (polygon diagram) */
/* Labels: math font, with a thin outline in the background color so they stay readable over lines */
.picture-svg text {
  fill: currentColor;
  font-family: 'STIX Two Text', 'Cambria Math', serif;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 5px;
  stroke-linejoin: round;
}

.hint-box {
  background: var(--soft);
  border-radius: 14px;
  padding: 14px 18px;
  font-size: 17px;
  line-height: 1.5;
}

/* ---- Right side: answers ---- */

.answer-side {
  background: var(--panel);
  border-left: 1px solid var(--border);
  padding: var(--card-padding-top-bottom) var(--card-padding-sides);
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  margin: 0;
}

.answer-heading {
  font-size: 16px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.answer-part { display: flex; flex-direction: column; gap: 10px; }

/* One-part-at-a-time problems: a part that's finished (locked, with its answer) */
.step-done-part {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.step-done-part .part-prompt { color: var(--muted); }
.step-answer { display: flex; align-items: baseline; gap: 12px; padding-left: 38px; font-size: 18px; font-weight: 700; }
.step-answer .math { font-size: 1.15em; font-weight: 500; }
.step-mark { font-size: 14px; font-weight: 800; color: #1D7A45; }
[data-theme="dark"] .step-mark { color: #8EE0AE; }
.step-done-part.was-revealed .step-mark { color: var(--muted); }

.part-prompt { display: flex; gap: 10px; font-size: 17px; font-weight: 800; line-height: 1.4; }
.part-prompt .math { font-size: 1.15em; font-weight: 500; }
.part-letter {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.answer-row { display: flex; align-items: center; gap: 12px; }
.answer-row .answer-box.wide { flex: 1; }

.answer-box {
  width: 240px;
  max-width: 100%;
  min-height: var(--answer-box-height);
  background: var(--surface);
  border: 3px solid var(--border);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 18px;
  transition: border-color .15s, box-shadow .15s;
}
.answer-box.wide { width: 100%; }
.answer-box:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--focus-ring);
}
.before-box { color: var(--muted); font-size: 28px; white-space: nowrap; }
.after-box { font-size: 20px; font-weight: 700; }

/* MathLive's math box */
math-field {
  flex: 1;
  min-width: 0;
  font-size: 30px;
  padding: 8px 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ink);
  --caret-color: var(--primary);
  --selection-background-color: var(--soft);
  --contains-highlight-background-color: transparent;
}
/* We have our own keyboard button and math buttons, so hide MathLive's built-in ones */
math-field::part(menu-toggle) { display: none; }
math-field::part(virtual-keyboard-toggle) { display: none; }

.keyboard-button {
  flex: none;
  width: var(--keyboard-button-size);
  height: var(--keyboard-button-size);
  border: none;
  border-radius: var(--button-radius);
  background: var(--soft);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.keyboard-button:hover { background: var(--hover); }

/* The simple math buttons under the box: x², xⁿ, √, fraction, ( ), π */
.math-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
/* In multi-part problems, only show the buttons under the box you last clicked into
   (practice.js adds the "active" class). They stay put when you click Submit, so the
   Submit button doesn't jump. */
.answer-part.one-of-many .math-buttons { display: none; }
.answer-part.one-of-many.active .math-buttons { display: flex; }
.answer-part.one-of-many { gap: 8px; }
.answer-part.one-of-many .answer-box { min-height: var(--answer-box-height); }
.answer-part.one-of-many .answer-box.wide { width: auto; }
.answer-part.one-of-many .answer-row { padding-left: 38px; }
.answer-part.one-of-many .math-buttons,
.answer-part.one-of-many .part-help,
.answer-part.one-of-many .part-message { margin-left: 38px; }
/* Boxes without their own question (like "A = ▢" on a number line) don't need the indent
   that lines them up under the a/b/c letters */
.answer-part.one-of-many.no-prompt .answer-row { padding-left: 0; }
.answer-part.one-of-many.no-prompt .math-buttons,
.answer-part.one-of-many.no-prompt .part-help,
.answer-part.one-of-many.no-prompt .part-message { margin-left: 0; }
.math-buttons button {
  min-width: var(--math-button-size);
  height: var(--math-button-size);
  padding: 0 10px;
  border: 2px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--surface);
  color: var(--ink);
  font-family: 'STIX Two Text', serif;
  font-size: var(--math-button-font);
}
.math-buttons button:hover { border-color: var(--hover-border); background: var(--soft); }
.math-buttons .frac { font-size: 0.7em; font-style: italic; }

.part-help { font-size: 15px; color: var(--muted); }

/* After checking: green or red boxes, and a message under each part */
.answer-part.correct .answer-box { border-color: #2E9E5B; box-shadow: none; }
.answer-part.incorrect .answer-box,
.answer-part.invalid .answer-box { border-color: #D64545; box-shadow: none; }
.part-message { font-size: 15px; font-weight: 800; }
.answer-part.correct .part-message { color: #1D7A45; }
.answer-part.incorrect .part-message,
.answer-part.invalid .part-message { color: #C03636; }
[data-theme="dark"] .answer-part.correct .part-message { color: #8EE0AE; }
[data-theme="dark"] .answer-part.incorrect .part-message,
[data-theme="dark"] .answer-part.invalid .part-message { color: #F5A5A5; }

.feedback { padding: 14px 18px; border-radius: 12px; font-weight: 800; font-size: 17px; }
.feedback.correct { background: #DDF3E4; color: #1D6B3C; }
.feedback.incorrect { background: #FBE3E3; color: #9B2C2C; }
.feedback.invalid { background: var(--soft); color: var(--ink); }
/* After "Skip and show the answer": blue, not red - it's information, not a mistake */
.feedback.revealed { background: var(--soft); color: var(--ink); }
.answer-part.revealed .answer-box,
.answer-part.revealed .proportion-box { border-color: var(--primary); box-shadow: none; }
.answer-part.revealed .part-message { color: var(--ink); font-weight: 700; }
.answer-part.revealed .part-message .math { font-size: 1.15em; }
.blank-cell.revealed .cell-field { border: 3px solid var(--primary); box-shadow: none; }
.reveal-steps { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; font-size: 16px; }
.reveal-steps ol { margin: 6px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }
.reveal-steps .math { font-size: 1.12em; }
[data-theme="dark"] .feedback.correct { background: #173A26; color: #8EE0AE; }
[data-theme="dark"] .feedback.incorrect { background: #4A1E22; color: #F5A5A5; }

.answer-buttons { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.submit-button {
  height: var(--submit-height);
  border: none;
  border-radius: var(--button-radius);
  background: var(--primary);
  color: var(--on-primary);
  font-size: var(--submit-font);
  font-weight: 800;
}
.submit-button:hover { background: var(--primary-hover); }
.submit-button:disabled { opacity: 0.45; cursor: not-allowed; }
.submit-button:disabled:hover { background: var(--primary); }   /* no hover color while it's greyed out */
.skip-button {
  height: var(--skip-height);
  border: 2px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--skip-font);
  font-weight: 800;
}
.skip-button:hover { border-color: var(--hover-border); }

/* ---- Multiple choice ---- */

.choices { display: flex; flex-direction: column; gap: 14px; }
.choices.two-choices { flex-direction: row; }                 /* Yes / No side by side */
.choices.two-choices .choice { flex: 1; justify-content: center; }
.choices.table-choices { display: grid; grid-template-columns: 1fr 1fr; }

.choice {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: var(--choice-height);
  padding: 12px 20px;
  border: 3px solid var(--border);
  border-radius: var(--button-radius);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--choice-font);
  font-weight: 700;
  text-align: left;
}
/* Yes / No: big buttons side by side */
.choices.two-choices { max-width: var(--yes-no-max-width); }
.choices.two-choices .choice { min-height: var(--yes-no-height); font-size: var(--yes-no-font); font-weight: 800; }
.choice:hover { border-color: var(--hover-border); }
.choice.picked { border-color: var(--primary); box-shadow: 0 0 0 4px var(--focus-ring); background: var(--panel); }
.choice.picked .choice-letter { background: var(--primary); color: var(--on-primary); }
.choice.correct { border-color: #2E9E5B; box-shadow: none; background: #EEF9F2; }
.choice.incorrect { border-color: #D64545; box-shadow: none; background: #FDF0F0; }
[data-theme="dark"] .choice.correct { background: #173A26; }
[data-theme="dark"] .choice.incorrect { background: #4A1E22; }
.choices.locked .choice { cursor: default; }
.choice .math { font-size: 1.2em; font-weight: 500; }

.choice-letter {
  flex: none;
  width: var(--choice-letter-size);
  height: var(--choice-letter-size);
  border-radius: 10px;
  background: var(--soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--choice-letter-size) * 0.45);
  font-weight: 800;
}
/* A choice that is a little table */
.table-choices .choice { flex-direction: column; align-items: stretch; padding: 10px; }
.table-choices .choice-letter { align-self: flex-start; }

/* ---- Tables: small version (inside choices and examples) ---- */

.problem-table.small-table { font-size: 15px; border-radius: 10px; }
.problem-table.small-table th { padding: 6px 12px; }
.problem-table.small-table td { padding: 5px 12px; font-size: 18px; }
.problem-table td.filled-cell { color: var(--primary); font-weight: 600; }

/* ---- Answer boxes inside a table ---- */

/* An empty cell to type in: a rounded box with a light blue background and a
   dashed outline, so it's obvious. It starts small and grows as you type
   (inline-block + width: auto). */
.problem-table td.blank-cell { padding: 8px 18px; }
.cell-field {
  display: inline-block;
  width: auto;
  min-width: 110px;
  max-width: 100%;
  min-height: 52px;
  font-size: 24px;
  padding: 6px 14px;
  border: 3px dashed var(--accent);
  border-radius: 14px;
  background: var(--panel);
  cursor: text;
}
.cell-field:hover { border-style: solid; }
.cell-field:focus-within { border: 3px solid var(--primary); background: var(--surface); box-shadow: 0 0 0 4px var(--focus-ring); }
.blank-cell.correct .cell-field { border: 3px solid #2E9E5B; box-shadow: none; }
.blank-cell.incorrect .cell-field,
.blank-cell.invalid .cell-field { border: 3px solid #D64545; box-shadow: none; }
.table-instructions { margin: 0; font-size: 17px; color: var(--muted); line-height: 1.5; }

/* ---- Proportion template (fraction = fraction) ---- */

.proportion-box {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 8px 16px;
  display: flex;
  justify-content: center;
}
.proportion-field {
  flex: none;
  font-size: var(--proportion-size);
  padding: 4px 0;
  background: transparent;
  border: none;
}
.answer-part.correct .proportion-box { border-color: #2E9E5B; }
.answer-part.incorrect .proportion-box,
.answer-part.invalid .proportion-box { border-color: #D64545; }


/* ---- "Show example" popup ---- */

.example-dialog {
  width: min(640px, calc(100vw - 32px));
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px 28px 28px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 20px 50px var(--shadow);
}
.example-dialog::backdrop { background: rgba(15, 23, 42, 0.35); }
.example-dialog-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.example-steps { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 12px; font-size: 19px; line-height: 1.5; }
.example-steps .math { font-size: 1.2em; }
.example-question { margin: 4px 0 14px; font-size: 18px; line-height: 1.6; }
.example-question .num, .example-question .math { font-family: 'STIX Two Text', serif; font-size: 1.14em; }
.example-dialog .problem-table { margin-bottom: 14px; }
.example-answer { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 18px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.example-answer .math { font-size: 1.15em; }

/* ---- Stacked layout: problem on top, answers underneath ----
   The answer panel is a 2-column grid: answers on the left, the Submit button
   in the bottom-right corner. */

.problem-card.layout-stacked {
  grid-template-columns: minmax(0, 1fr);
}
.layout-stacked .answer-side {
  border-left: none;
  border-top: 1px solid var(--border);
  padding: var(--card-padding-top-bottom) var(--card-padding-sides);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--stacked-buttons-width);
  column-gap: 40px;
  row-gap: 0;            /* spacing comes from margins below, so the empty grid rows add no height */
  align-items: start;
}
.layout-stacked .answer-side > * { grid-column: 1; }
.layout-stacked .answer-side > * + * { margin-top: 14px; }
.layout-stacked .answer-buttons {
  grid-column: 2;
  grid-row: 1 / span 10;
  align-self: end;
  margin-top: 0 !important;
}
.layout-stacked .answer-box { width: 200px; min-height: var(--answer-box-height); }
.layout-stacked .answer-box.wide { width: 360px; }
.layout-stacked .choices { max-width: 640px; }
.layout-stacked .choices.table-choices { max-width: none; grid-template-columns: repeat(4, 1fr); }
.layout-stacked .choices.two-choices { max-width: var(--yes-no-max-width); }


/* ---- Smaller windows: stack the answers under the problem ---- */

@media (max-width: 900px) {
  .choices.table-choices { grid-template-columns: 1fr; }
  .layout-stacked .answer-side { grid-template-columns: minmax(0, 1fr); }
  .layout-stacked .answer-buttons { grid-column: 1; grid-row: auto; margin-top: 18px !important; }
  .layout-stacked .choices.table-choices { grid-template-columns: 1fr 1fr; }
  .practice-header { flex-wrap: wrap; }
  .practice-tools { width: 100%; }
  .tool-button { flex: 1; justify-content: center; }
  .problem-card { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .problem-side { padding: 22px 18px; }
  .answer-side { border-left: none; border-top: 1px solid var(--border); padding: 18px; }
  .question-text { font-size: 20px; }
  .question-math { min-height: 140px; }
}


/* ===================================================================
   "Set complete" screen
   =================================================================== */

.done-box {
  width: 100%;
  max-width: 620px;
  margin: 40px auto 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.done-score { margin: 0; font-size: 20px; }
.done-skill { display: flex; flex-direction: column; gap: 8px; font-weight: 700; color: var(--muted); }
.done-buttons { display: flex; gap: 12px; flex-wrap: wrap; }


/* ===================================================================
   Topic page
   =================================================================== */

.page-head { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.example-box {
  max-width: 760px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.example-box .math { font-size: 28px; }

.skill-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.skill-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.skill-info { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.skill-name { font-size: 18px; font-weight: 800; }


/* ===================================================================
   Simple form pages (login, sign up, join class)
   =================================================================== */

.narrow-box { width: 100%; max-width: 440px; margin: 20px auto 0; display: flex; flex-direction: column; gap: 16px; }
.stack-form { display: flex; flex-direction: column; gap: 8px; }
.stack-form label { font-weight: 800; margin-top: 6px; }
.stack-form input {
  height: 50px;
  padding: 0 14px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  font-size: 17px;
}
.stack-form input:focus { outline: none; border-color: var(--primary); }
.stack-form .btn-primary { margin-top: 12px; height: 50px; }
.code-input { text-transform: uppercase; letter-spacing: 0.15em; font-weight: 800; font-size: 22px !important; text-align: center; }
.field-help { margin: 0; font-size: 14px; color: var(--muted); }
.field-error { margin: 0; font-size: 14px; color: #D64545; font-weight: 700; }
.plain-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 17px; }

@media (max-width: 640px) {
  h1 { font-size: 26px; }
  .skill-row { flex-direction: column; align-items: stretch; }
}


/* ===================================================================
   Staff preview pages (/staff/preview/) - see staff_views.py
   =================================================================== */

.preview-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.preview-filters .chip {
  height: 36px; padding: 0 14px; border-radius: 18px; display: inline-flex; align-items: center;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  font-size: 15px; font-weight: 700;
}
.preview-filters .chip:hover { border-color: var(--hover-border); text-decoration: none; }
.preview-filters .chip.selected { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.preview-filters .muted { margin-left: 8px; font-weight: 700; }

.preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }
.preview-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 10px;
}
.preview-meta { font-size: 13px; font-weight: 700; color: var(--muted); }
.preview-card .instruction { font-size: 17px; }
.preview-math { font-size: 30px; text-align: center; padding: 6px 0; }
.preview-text { margin: 0; font-size: 18px; line-height: 1.55; }
.preview-text .num, .preview-text .math { font-family: 'STIX Two Text', serif; font-size: 1.1em; }
.preview-answers { background: var(--panel); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; font-size: 16px; }
.preview-answer { font-size: 20px; font-weight: 600; color: var(--primary); }
.preview-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; }
.preview-errors { border: 2px solid #D64545; border-radius: 12px; padding: 12px 16px; }
.preview-row:hover { border-color: var(--hover-border); text-decoration: none; }
.preview-row .skill-name { color: var(--ink); }
@media (max-width: 560px) { .preview-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Staff examples page (/staff/examples/<name>/) - see staff_views.examples
   ========================================================================== */
.examples-head { margin-bottom: 12px; }
.examples-head h1 { margin: 2px 0; }
.examples-head .muted { margin: 0; }
.examples-head-buttons, .example-block-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.example-block { margin-bottom: 12px; }
.example-block-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.example-block-head .muted { font-size: 14px; font-weight: 700; margin-left: 8px; }
.level-chip {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 800;
  font-size: 14px;
}
.assign-button:disabled { opacity: 0.55; cursor: not-allowed; }
.examples-foot { display: flex; justify-content: center; margin: 8px 0 24px; }
.preview-row-links { display: flex; gap: 10px; flex: none; }

/* An underlined digit ("round to the underlined place") - see underline_place() */
u.underlined { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.12em; }

/* ==========================================================================
   Assignments (assignments.py)
   ========================================================================== */
.assign-like { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; }
#like-count, .count-form input[type=number] {
  width: 64px; padding: 7px 8px; border: 2px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: inherit; font-weight: 700;
}
.draft-bar {
  position: sticky; bottom: 16px; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 16px; padding: 12px 16px; border-radius: 14px;
  background: var(--ink); color: var(--page); font-weight: 800;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
}
.draft-bar[hidden] { display: none; }

.assignment-items { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 10px; counter-reset: item; }
.assignment-item {
  counter-increment: item;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface);
}
.assignment-item-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.assignment-item-main::before { content: counter(item) "."; font-weight: 800; color: var(--muted); }
.assignment-item-preview { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: 16px; }
.assignment-item-preview .instruction { font-weight: 700; }
.assignment-item-buttons { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.assignment-item-buttons .btn-soft:disabled { opacity: 0.4; cursor: not-allowed; }
.assignment-settings { max-width: 640px; }
.assignment-settings fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px 12px; margin: 6px 0; }
.assignment-settings legend { font-weight: 800; padding: 0 6px; }
.check-row { display: flex; gap: 10px; align-items: baseline; font-weight: 600; padding: 4px 0; }

.share-box { display: flex; gap: 32px; flex-wrap: wrap; align-items: flex-start; padding: 18px 20px; border-radius: 16px; background: var(--soft); margin-bottom: 18px; }
.share-code { font-size: 40px; font-weight: 800; letter-spacing: 0.12em; }
.share-link { flex: 1; min-width: 260px; }
.share-link-row { display: flex; gap: 8px; margin: 6px 0; }
.share-link-row input { flex: 1; min-width: 0; padding: 9px 12px; border: 2px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; }
.manage-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.rename-form { display: flex; gap: 8px; }
.rename-form input { padding: 8px 12px; border: 2px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; min-width: 220px; }
.settings-list li { padding: 3px 0; font-weight: 600; }
.setting-mark { display: inline-block; min-width: 38px; text-align: center; padding: 1px 8px; margin-right: 8px; border-radius: 999px; font-size: 13px; font-weight: 800; background: var(--border); color: var(--muted); }
.setting-mark.on { background: #DDF3E4; color: #1D6B3C; }
[data-theme="dark"] .setting-mark.on { background: #1D4D30; color: #8EE0AE; }
.start-rules { margin: 6px 0 12px; }
.start-rules li { padding: 2px 0; }

.review-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.review-item { padding: 16px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.review-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.review-result { font-weight: 800; font-size: 14px; color: var(--muted); }
.review-result.result-first_try { color: #1D7A45; }
.review-result.result-skipped { color: #C03636; }
.review-math { font-size: 26px; margin: 6px 0; }
.review-answer { font-size: 17px; }
/* Checkboxes on the assignment settings form: box and words on one line
   (.stack-form makes every input full width, which pushed the words underneath) */
.stack-form .check-row { display: flex; align-items: center; gap: 10px; margin-top: 0; font-weight: 600; }
.stack-form .check-row input { width: 18px; height: 18px; padding: 0; margin: 0; flex: none; }
.assignment-settings .done-buttons { align-items: center; }
.assignment-settings .done-buttons .btn-primary,
.assignment-settings .done-buttons .btn-soft { margin-top: 0; }

/* Level tabs on the examples page (staff_examples.html) */
.level-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.level-tab {
  padding: 9px 20px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.level-tab:hover:not(:disabled) { border-color: var(--hover-border); }
.level-tab.selected { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.level-tab:disabled { opacity: 0.45; cursor: not-allowed; }
.example-block[hidden] { display: none; }

/* Assignments tab and the New assignment sub-topic picker */
.assignments-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }
.pick-search {
  width: 100%; max-width: 520px; padding: 11px 14px; margin-bottom: 18px;
  border: 2px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit;
}
.pick-search:focus { outline: none; border-color: var(--primary); }
.pick-groups { columns: 3 300px; column-gap: 24px; }
.pick-group { break-inside: avoid; margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.pick-group[hidden] { display: none; }
.pick-topic { font-size: 17px; margin: 0 0 8px; }
.pick-topic .muted { font-size: 13px; font-weight: 700; }
.pick-skills { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pick-skills li[hidden] { display: none; }
.pick-skills a { font-weight: 700; }

/* Examples page: the tabs + Next examples on one row (no scrolling to get to the card) */
.level-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.level-bar .level-tabs { margin-bottom: 0; }
.example-meta { font-size: 13px; font-weight: 700; margin: 8px 4px 0; }
/* Pictures are a bit shorter on the examples page, so the whole card fits on a laptop screen */
.example-block .problem-picture svg { max-height: 220px; }
.example-block .problem-picture svg.grid-picture { max-height: 320px; }   /* grids need room to be read */
/* The draft count on the examples page, top right */
.draft-chip {
  float: right;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 16px; border-radius: 14px;
  background: var(--ink); color: var(--page); font-weight: 800; font-size: 15px;
}
.draft-chip[hidden] { display: none; }
@media (max-width: 900px) { .draft-chip { float: none; margin-bottom: 10px; justify-content: space-between; } }


/* ---- Click-to-place boards (answer type "plot", plot_board.html / plot_board.js) ---- */

.picture-svg .shape.grid-line { stroke: var(--border); stroke-width: 1; }
.plot-board { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 560px; margin: 4px auto 0; }
/* A grid is as tall as it is wide: as big as fits - up to 520px, but small enough that the
   whole card fits in the window, and never smaller than 300px */
.plot-board.plot-grid { max-width: max(300px, min(520px, calc(100vh - 400px))); }
.plot-letters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.plot-letter {
  min-width: 44px; height: 40px; border-radius: 10px; border: 2px solid var(--border);
  background: var(--surface); color: var(--ink); font: 600 18px 'STIX Two Text', serif; cursor: pointer;
}
.plot-letter.done { border-color: var(--accent); color: var(--accent); }
.plot-letter.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.plot-reset {
  margin-left: auto; border: none; background: none; color: var(--muted); font: inherit;
  font-size: 14px; cursor: pointer; text-decoration: underline;
}
.plot-drawing {
  border: 2px solid var(--border); border-radius: 12px; background: var(--surface);
  padding: 4px; cursor: crosshair; line-height: 0;
}
.plot-drawing:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.plot-drawing svg { width: 100%; height: auto; }
.plot-layer .plot-point circle { fill: var(--accent); }
.plot-layer .plot-point.active circle { stroke: var(--accent); stroke-width: 6; stroke-opacity: 0.3; }
.plot-layer .plot-point text, .plot-answer-layer text { font: 600 18px 'STIX Two Text', serif; fill: var(--ink); }
.plot-answer-layer .plot-answer circle { fill: none; stroke: #2E9E5B; stroke-width: 3; }
.plot-answer-layer .plot-answer text { fill: #2E9E5B; }
.plot-status { margin: 0; min-height: 1.4em; color: var(--muted); font-size: 15px; }
.plot-board.locked .plot-drawing { cursor: default; }
.plot-board.locked .plot-letter, .plot-board.locked .plot-reset { pointer-events: none; opacity: 0.6; }

.picture-svg.grid-picture { max-width: 420px; max-height: 400px; }
.plot-drawing .picture-svg { max-width: none; max-height: none; }


/* ---- Drag into order (answer type "order", order_tiles.html / order_tiles.js) ---- */

.order-answer { display: flex; flex-direction: column; gap: 6px; width: fit-content; min-width: 280px; max-width: 100%; }
.order-ends { display: flex; justify-content: space-between; color: var(--muted); font-size: 13px;
              font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.order-ends span:first-child::after { content: " →"; }
.order-tiles { display: flex; flex-wrap: wrap; gap: 10px; touch-action: none; }
.order-tile {
  min-width: 64px; min-height: 56px; padding: 6px 14px; border-radius: 12px;
  border: 2px solid var(--border); background: var(--surface); color: var(--ink);
  font-size: 22px; cursor: grab; user-select: none; touch-action: none;
}
.order-tile .math { font-size: 1.05em; }
.order-tile:hover { border-color: var(--hover-border); }
.order-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.order-tile.picked { border-color: var(--accent); background: var(--soft); }
.order-tile.dragging { cursor: grabbing; position: relative; z-index: 2; box-shadow: 0 10px 24px var(--shadow); }
.order-tile.revealed { border-color: #2E9E5B; }
.order-tiles.locked .order-tile { cursor: default; }
.answer-part.correct .order-tile { border-color: #2E9E5B; }
.answer-part.incorrect .order-tile { border-color: #D64545; }

/* Check all that apply: each choice gets a tick box (practice.js turns them on and off) */
.choices[data-kind="select"] .choice { justify-content: flex-start; gap: 12px; }
.choices[data-kind="select"] .choice::before {
  content: ""; flex: none; width: 20px; height: 20px; border: 2px solid var(--border); border-radius: 5px;
  background: var(--surface) center / 14px no-repeat;
}
.choices[data-kind="select"] .choice.picked::before {
  border-color: var(--primary); background-color: var(--primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* "You're typing an exponent. To leave it, press →." under the answer box (math_box_help.js) */
.exponent-tip {
  display: table; margin-top: 8px; padding: 3px 10px; border-radius: 999px;
  background: var(--soft); color: var(--ink); font-size: 13px; font-weight: 600;
}
.exponent-tip[hidden] { display: none; }

/* Assignments with "Move between problems": the row of problem numbers (practice.html) */
.problem-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.strip-box {
  min-width: 40px; height: 40px; padding: 0 8px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700; text-decoration: none;
  border: 2px solid var(--border); background: var(--surface); color: var(--ink);
}
.strip-box:hover { border-color: var(--hover-border); }
.strip-box.done { background: #DDF3E4; border-color: #2E9E5B; color: #1D6B3C; }
.strip-box.done.skipped { background: var(--soft); border-color: var(--border); color: var(--muted); }
.strip-box.current { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
[data-theme="dark"] .strip-box.done { background: #1F3A2A; color: #8EE0AE; }