/* The math wing. Builds on styles.css: the same paper, buttons, lists and print rules. */

.site-header nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }

/* ---------------------------------------------------------------- grades */

.math-heading { font-size: 1.6rem; margin: 1.6rem 0 0.9rem; }
.math-resume a { font-weight: 600; }

.math-grades {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.math-grade {
  display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1rem;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  color: inherit; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.math-grade:hover, .math-grade:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(31, 43, 38, 0.14); }
.math-grade:hover .card-title { color: var(--leaf-dark); text-decoration: underline; }
.math-grade-text { display: block; min-width: 0; }
.math-grade-badge {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 3.2rem; height: 3.2rem; border-radius: 50%; color: #fff; font: 700 1.45rem/1 var(--serif);
}
.math-grade-badge.big { width: 4.6rem; height: 4.6rem; font-size: 2.1rem; }

.math-why { max-width: 46rem; margin-top: 2.4rem; }
.math-why h2 { font-size: 1.35rem; margin-bottom: 0.6rem; }
.math-why li { margin-bottom: 0.45rem; }
.math-why p { color: var(--muted); }

.math-course { display: flex; align-items: center; gap: 1.2rem; }
.math-course h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.math-course .byline { margin-bottom: 0.7rem; }
.math-course .facts { margin: 0; }
.math-units a { grid-template-columns: 9.5rem 1fr auto; }
.chapter-list a.current { background: var(--sun-wash); }
.chapter-list a.current .chapter-go { opacity: 1; }

.math-lessons ul { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.85rem; color: var(--muted); }
.math-lessons li { margin-bottom: 0.2rem; }
.controls .specifics .row { margin-top: 0.2rem; }
.controls .specifics .row label { margin-top: 0.5rem; }
.controls .status { margin: 0.8rem 0 0; font-size: 0.88rem; }

/* ---------------------------------------------------------------- packet */

.math-sheet { min-height: 0; }
.math-sheet .questions { margin-top: 0.2rem; }
.mproblem { margin-bottom: 1.5em; padding-bottom: 0.4em; }

.frac {
  display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle;
  margin: 0 0.12em; font-size: 0.78em; line-height: 1.05; text-align: center;
}
.frac span:first-child { border-bottom: 1.2px solid currentColor; padding: 0 0.18em 0.04em; }
.frac span:last-child { padding: 0.04em 0.18em 0; }

.read-steps {
  list-style: none; counter-reset: rs; display: flex; flex-wrap: wrap; gap: 0.3em 1.1em;
  margin: 0 0 1.1rem; padding: 0.55em 0.8em; border: 1.5px solid #555; border-radius: 8px;
  font: 600 0.68em/1.35 var(--sans); color: #222;
}
.read-steps li { counter-increment: rs; }
.read-steps li::before { content: counter(rs); display: inline-block; width: 1.5em; height: 1.5em; margin-right: 0.4em;
  border: 1.2px solid #333; border-radius: 50%; text-align: center; line-height: 1.5em; font-size: 0.9em; }

.prompt { margin: 0.35em 0 0; font: italic 0.9em/1.35 var(--serif); color: #222; }
.choices { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5em 1.6em; margin: 0.6em 0 0.2em; padding: 0; }
.choices li { padding: 0.25em 0.9em; border: 1.2px solid #888; border-radius: 999px; font-family: var(--sans); font-size: 0.92em; white-space: nowrap; }

.work { position: relative; height: 30mm; margin-top: 0.55em; border: 1.2px solid #999; border-radius: 8px; }
.work span { position: absolute; top: 0.3em; left: 0.6em; font: 600 0.55em/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: #777; }
.tier-0 .work { height: 38mm; }
.tier-2 .work { height: 34mm; }
.help-work .work { height: 36mm; }
.help-work.tier-0 .work { height: 44mm; }

.steps { display: grid; gap: 0.15em; margin-top: 0.5em; }
.step { display: flex; align-items: flex-end; gap: 0.6em; min-height: 2.1em; }
.step span { flex: none; font: 600 0.62em/1.2 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: #444; padding-bottom: 0.25em; }
.step i { flex: 1; border-bottom: 1px solid #8a8a8a; }
.step.answer i { border-bottom-width: 1.6px; border-bottom-color: #333; }
.tier-0 .step { min-height: 2.5em; }
.help-none .mproblem { margin-bottom: 1.1em; }

table.data { border-collapse: collapse; margin: 0.7em 0 0.3em; font-family: var(--sans); font-size: 0.85em; }
table.data caption { caption-side: top; text-align: left; font-weight: 700; padding-bottom: 0.3em; }
table.data th, table.data td { border: 1px solid #777; padding: 0.3em 0.8em; text-align: left; }
table.data thead th { background: #eee; }
table.data tbody th { font-weight: 600; }
table.data.wide { width: 100%; font-size: 0.95rem; margin: 0.8rem 0 1rem; }
table.data.wide th, table.data.wide td { border-color: var(--rule); }
table.data.wide thead th { background: var(--leaf-wash); }
.data-key { margin: 0.2em 0 0; font: 400 0.75em/1.3 var(--sans); color: #333; }
.pips { letter-spacing: 0.22em; }
.tallies { letter-spacing: 0.12em; font-family: var(--sans); }
.tallies .five { position: relative; display: inline-block; margin-right: 0.7em; }
.tallies .five::after { content: ""; position: absolute; left: -0.15em; right: -0.05em; top: 50%; border-top: 1.4px solid currentColor; transform: rotate(-22deg); }

/* ---------------------------------------------------------------- answer key */

.sheet.key { min-height: 0; font-size: 11pt; }
.key-list { margin: 0; padding-left: 1.8em; columns: 2; column-gap: 2.2em; }
.key-list li { break-inside: avoid; margin-bottom: 0.85em; padding-left: 0.2em; }
.key-list strong { display: block; }
.key-work { display: block; font-family: var(--sans); font-size: 0.86em; color: #222; }
.key-kind { display: block; font: 400 0.72em/1.35 var(--sans); color: #666; margin-top: 0.1em; }

@media screen and (max-width: 560px) {
  .math-units a { grid-template-columns: 1fr; }
}
@media screen and (max-width: 820px) {
  .key-list { columns: 1; }
  .math-course { align-items: flex-start; }
}

@media print {
  .math-sheet { break-after: auto; }
  .sheet.key { break-before: page; }
  .mproblem { break-inside: avoid; }
  .read-steps { break-inside: avoid; }
  table.data thead th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}