/* Screen-level layout. Component styles live in components.css. */

/* Shared bits --------------------------------------------------------- */
.eyebrow {
  margin: 0 0 var(--space-1);
  font-size: var(--step--1);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hero { text-align: center; padding: var(--space-4) 0 var(--space-2); }
.hero__mark {
  width: 86px; height: 86px; margin: 0 auto var(--space-4);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primary-tint);
  color: var(--primary);
  border: 2px solid color-mix(in srgb, var(--primary) 25%, transparent);
}
.hero[data-tone='correct'] .hero__mark { background: var(--correct-tint); color: var(--correct); border-color: var(--correct); }
.hero[data-tone='nearly'] .hero__mark { background: var(--nearly-tint); color: var(--nearly); border-color: var(--nearly); }
.hero p { margin-left: auto; margin-right: auto; }
.score { font-family: var(--font-display); font-size: var(--step-4); font-weight: 800; margin: 0 0 var(--space-2); }

.tick-list { list-style: none; padding: 0; margin: 0; }
.tick-list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.tick-list .icon { flex: none; color: var(--correct); margin-top: 3px; }
.tick-list--todo .icon { color: var(--nearly); }

.field-error { color: var(--notyet); font-weight: 700; margin: 0 0 var(--space-3); }
.field-error:empty { display: none; }

.backlink { align-self: flex-start; margin-left: calc(var(--space-3) * -1); }
.hide-narrow { display: none; }
@media (min-width: 480px) { .hide-narrow { display: inline; } }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.stat-grid--wide { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .stat-grid--wide { grid-template-columns: repeat(4, 1fr); } }
.stat {
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  border: 1.5px solid var(--line);
  text-align: center;
}
.stat__value { display: block; font-family: var(--font-display); font-size: var(--step-2); font-weight: 800; line-height: 1.1; }
.stat__label { display: block; font-size: var(--step--1); color: var(--ink-soft); }
.big-number { font-family: var(--font-display); font-size: var(--step-3); font-weight: 800; margin: 0; }

.two-col { display: grid; gap: var(--space-4); }
@media (min-width: 620px) { .two-col { grid-template-columns: 1fr 1fr; } }

/* Tiles --------------------------------------------------------------- */
.tile {
  display: flex; align-items: center; gap: var(--space-4);
  width: 100%;
  min-height: var(--tap);
  padding: var(--space-4);
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--motion), transform var(--motion);
}
.tile + .tile { margin-top: var(--space-3); }
.tile:hover { border-color: var(--line-strong); }
.tile:active { transform: translateY(1px); }
.tile__icon {
  flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--primary-tint);
  color: var(--primary);
}
.tile__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tile__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-1); }
.tile__meta { font-size: var(--step--1); color: var(--ink-soft); }
.tile > .icon:last-child { flex: none; color: var(--ink-faint); }

/* Onboarding ---------------------------------------------------------- */
.onboard { max-width: 34rem; margin: 0 auto; }
.avatar-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
@media (min-width: 480px) { .avatar-row { grid-template-columns: repeat(4, 1fr); } }
.avatar {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  font-size: var(--step--1); font-weight: 700; text-align: center;
  color: var(--ink-soft);
}
.avatar[data-selected='true'] { border-color: var(--primary); background: var(--primary-tint); color: var(--primary); }

.placement-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.placement-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.placement-row__topic { flex: 1; min-width: 8rem; font-weight: 700; }

/* Home ---------------------------------------------------------------- */
.greeting h1 { margin-bottom: var(--space-3); }
.next-up .btn { margin-top: var(--space-4); }

.badge-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); }
.badge {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
  min-width: 120px;
}
.badge__mark {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primary-tint);
  color: var(--primary);
}
.badge__name { font-family: var(--font-display); font-weight: 700; font-size: var(--step--1); }
.badge__blurb { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
.badge[data-earned='false'] { opacity: .55; }
.badge[data-earned='false'] .badge__mark { background: var(--surface-sunken); color: var(--ink-faint); }

/* Explore ------------------------------------------------------------- */
.body-stage { max-width: 340px; margin: 0 auto; }
.hotspot[data-done='true'] { background: var(--correct); }
.cluster-head { display: flex; align-items: center; gap: var(--space-2); font-size: var(--step-1); margin-bottom: var(--space-3); }
.cluster-head .icon { color: var(--ink-faint); }
.topic-list { display: grid; gap: var(--space-6); }

.topic-head { display: flex; align-items: center; gap: var(--space-4); }
.topic-head__icon {
  flex: none; width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: var(--radius);
  background: var(--primary-tint); color: var(--primary);
}
.unit-card { display: grid; gap: var(--space-3); }
.unit-card + .unit-card { margin-top: var(--space-4); }
.unit-card[data-state='locked'] { opacity: .72; }
.unit-card[data-state='mastered'] { border-color: color-mix(in srgb, var(--correct) 35%, var(--line)); }
.unit-card .row--wrap .icon { color: var(--ink-faint); }

.curriculum summary {
  cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: var(--step-1);
  list-style-position: outside;
}
.curriculum__unit { margin-top: var(--space-4); }
.curriculum__unit h4 { margin-bottom: var(--space-2); }

/* Lesson -------------------------------------------------------------- */
.lesson-head { margin-bottom: var(--space-2); }
.lesson-head h1 { margin: var(--space-3) 0 var(--space-2); }
.lesson-head__sub { color: var(--ink-soft); font-size: var(--step-1); margin: 0; }
.lesson { display: grid; gap: var(--space-6); }
.lesson-block h2 { margin-bottom: var(--space-3); }
.objectives .bloom {
  display: inline-block; margin-left: var(--space-2);
  padding: 1px 8px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); border: 1px solid var(--line);
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-faint); vertical-align: 1px;
}
.speak-btn { margin-top: var(--space-2); }

.worked { border-left: 5px solid var(--accent-violet); }
.worked__steps { counter-reset: step; list-style: none; padding: 0; margin: var(--space-4) 0 0; }
.worked__steps li {
  position: relative; padding-left: 2.4rem; margin-bottom: var(--space-4);
}
.worked__steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-violet); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: var(--step--1);
}
.worked__conclusion { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1.5px solid var(--line); font-weight: 600; }

.didyouknow { border-left: 5px solid var(--accent-amber); background: #FFFBF2; }
.didyouknow .icon { color: var(--accent-amber); }
.inline-check { border-left: 5px solid var(--primary); }
.activity { border-left: 5px solid var(--accent-teal); }
.activity .icon { color: var(--accent-teal); }
.activity h3 { margin-top: var(--space-4); font-size: var(--step-1); }
.safety {
  display: flex; gap: var(--space-3); align-items: flex-start;
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--nearly-tint);
  border: 1.5px solid color-mix(in srgb, var(--nearly) 35%, transparent);
  font-size: var(--step--1);
}
.safety .icon { flex: none; color: var(--nearly); }
.safety p { margin: 0; }

.careers { border-left: 5px solid var(--accent-sky); }
.careers .icon { color: var(--accent-sky); }
.careers__q { font-weight: 700; color: var(--accent-sky); }

.glossary-grid { display: grid; gap: var(--space-3); }
@media (min-width: 620px) { .glossary-grid { grid-template-columns: 1fr 1fr; } }
.glossary-card .say { font-size: var(--step--1); color: var(--ink-faint); font-style: italic; margin: 0 0 var(--space-2); }

.lesson-cta { text-align: left; }

/* Questions ----------------------------------------------------------- */
.question { display: grid; gap: var(--space-4); }
.question__header h3 { margin: var(--space-2) 0 0; }
.question__body { display: grid; gap: var(--space-3); }
.question__footer { display: grid; gap: var(--space-3); }
.question__hint:empty { display: none; }
.hint {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--primary-tint);
  border: 1.5px solid color-mix(in srgb, var(--primary) 25%, transparent);
}
.hint .icon { flex: none; color: var(--primary); margin-top: 2px; }
.hint p { margin: 0; }

.options { display: grid; gap: var(--space-3); }
.options--pair { grid-template-columns: 1fr 1fr; }

.cloze__line { font-size: var(--step-1); line-height: 2.4; max-width: none; }

.order-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); counter-reset: none; }
.order-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin: 0;
}
.order-item__rank {
  flex: none; width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primary-tint); color: var(--primary);
  font-weight: 800; font-size: var(--step--1);
}
.order-item__text { flex: 1; min-width: 0; font-weight: 600; }
.order-item__controls { flex: none; display: flex; gap: 2px; }
.order-btn { min-width: var(--tap); min-height: var(--tap); padding: 0; }
.rot-up { transform: rotate(90deg); }
.rot-down { transform: rotate(90deg); }
.order-answer {
  margin-top: var(--space-4); padding: var(--space-4);
  border-radius: var(--radius-sm); background: var(--surface-sunken); border: 1.5px solid var(--line);
}
.order-answer p { font-weight: 700; margin-bottom: var(--space-2); }
.order-answer ol { margin: 0; }

.match__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 560px) { .match__grid { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.match__col { display: grid; gap: var(--space-2); align-content: start; }
.match__left, .match__right {
  display: flex; flex-direction: column; gap: 4px;
  min-height: var(--tap);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}
.match__right { flex-direction: row; align-items: center; }
.match__left[data-selected='true'], .match__right[data-armed='true'] { border-color: var(--primary); background: var(--primary-tint); }
.match__right[data-used='true'] { opacity: .45; }
.match__left[data-mark='correct'] { border-color: var(--correct); background: var(--correct-tint); }
.match__left[data-mark='wrong'] { border-color: var(--notyet); background: var(--notyet-tint); }
.match__term { font-weight: 800; }
.match__slot { font-size: var(--step--1); color: var(--ink-faint); }
.match__slot[data-filled='true'] { color: var(--primary); font-weight: 700; }

.figure__stage { position: relative; }
.labelling .figure__frame { padding: var(--space-5); }

.timer { height: 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; margin-top: var(--space-3); }
.timer__fill { height: 100%; width: 100%; background: var(--nearly); transition: width 100ms linear; }

.model-answer { margin-top: var(--space-3); }
.model-answer summary { cursor: pointer; font-weight: 700; }

/* Rewards -------------------------------------------------------------- */
.reward { border-color: color-mix(in srgb, var(--correct) 40%, var(--line)); background: var(--correct-tint); }
.reward .icon { color: var(--correct); }
.collectible { text-align: left; }

/* Progress ------------------------------------------------------------- */
.level-card { --gap: var(--space-3); }
.cluster { --gap: var(--space-3); }
.cluster + .cluster { margin-top: var(--space-4); }
.skill-tree { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--space-3); }
.skill-node {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-4) var(--space-2);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  text-align: center;
  font-size: var(--step--1);
}
.skill-node__icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface-sunken); color: var(--ink-faint);
}
.skill-node__name { font-weight: 700; line-height: 1.3; }
.skill-node[data-state='part'] { border-color: var(--primary); }
.skill-node[data-state='part'] .skill-node__icon { background: var(--primary-tint); color: var(--primary); }
.skill-node[data-state='done'] { border-color: var(--correct); background: var(--correct-tint); }
.skill-node[data-state='done'] .skill-node__icon { background: #fff; color: var(--correct); }
.skill-node__flag {
  position: absolute; top: -8px; right: -8px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--nearly); color: #fff;
  border: 2px solid var(--surface);
}
.skill-node__flag .icon { width: 14px; height: 14px; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.collect-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center; align-items: center;
}
.collect-card[data-owned='false'] { opacity: .6; border-style: dashed; }
.collect-card__icon {
  width: 48px; height: 48px; display: grid; place-items: center;
  border-radius: 50%; background: var(--primary-tint); color: var(--primary);
}
.collect-card[data-owned='false'] .collect-card__icon { background: var(--surface-sunken); color: var(--ink-faint); }
.collect-card__name { font-family: var(--font-display); font-weight: 800; }
.collect-card__line { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }

.flashcard {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  width: 100%; min-height: 130px;
  padding: var(--space-5);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  text-align: center;
}
.flashcard + .flashcard { margin-top: var(--space-3); }
.flashcard__face { font-family: var(--font-display); font-size: var(--step-2); font-weight: 800; }
.flashcard[data-flipped='true'] { background: var(--primary-tint); border-color: var(--primary); }
.flashcard[data-flipped='true'] .flashcard__face { font-family: var(--font-read); font-size: var(--step-0); font-weight: 500; line-height: var(--leading-body); }
.flashcard__hint { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; }

/* Parent --------------------------------------------------------------- */
.parent .mastery-row { display: grid; gap: 6px; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.parent .mastery-row:last-child { border-bottom: 0; }
.rec-row { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.rec-row:last-child { border-bottom: 0; }
.rec-row__rank {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center;
  border-radius: 50%; background: var(--primary-tint); color: var(--primary); font-weight: 800;
}
.rec-row__title { font-weight: 700; margin: 0 0 2px; }
.lab-row { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.lab-row:last-child { border-bottom: 0; }
.lab-fields { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-4); margin: var(--space-2) 0 0; }
.lab-fields dt { font-weight: 700; color: var(--ink-soft); font-size: var(--step--1); }
.lab-fields dd { margin: 0; }

.switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-3) 0; border-bottom: 1px solid var(--line);
}
.switch-row:last-of-type { border-bottom: 0; }
.switch-row__text { flex: 1; min-width: 0; }
.switch-row__text .field__label { margin-bottom: 2px; }
.switch-row__text .field__hint { margin-bottom: 0; }
/* The input covers the whole control, so the thing a finger or a screen reader
   actually targets is the real checkbox, at a full tap-target size. A 0×0
   visually-hidden input looks fine and is impossible to hit. */
.switch {
  flex: none; cursor: pointer;
  position: relative; display: grid; place-items: center;
  width: 56px; min-height: var(--tap);
}
.switch__input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
  z-index: 1;                 /* the input is the target, not the painted track */
}
.switch__track {
  pointer-events: none;       /* clicks belong to the input above it */
  display: block; width: 56px; height: 32px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  border: 2px solid var(--line-strong);
  transition: background var(--motion), border-color var(--motion);
  position: relative;
}
.switch__thumb {
  position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink-faint);
  transition: transform var(--motion), background var(--motion);
}
.switch__input:checked + .switch__track { background: var(--primary); border-color: var(--primary); }
.switch__input:checked + .switch__track .switch__thumb { transform: translateX(24px); background: #fff; }
.switch__input:focus-visible + .switch__track { outline: var(--focus); outline-offset: var(--focus-offset); }

/* Print: the parent report has to survive a printer. -------------------- */
@media print {
  .topbar, .tabbar, .btn, .switch-row, .disclaimer { display: none !important; }
  body { background: #fff; }
  .card { break-inside: avoid; box-shadow: none; }
  #main { padding: 0; max-width: none; }
}

/* Curriculum references: board on the left, the reference itself wrapping. */
.curriculum__list {
  display: grid;
  grid-template-columns: minmax(5.5rem, auto) 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  align-items: baseline;
}
.curriculum__list dt {
  font-weight: 800;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.curriculum__list dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--step--1);
}
.curriculum__list .chip { padding: 0 8px; font-size: 11px; }

/* Sign in ------------------------------------------------------------- */
.code-input {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: .5em;
  text-align: center;
  text-indent: .5em;          /* re-centres text that letter-spacing pushes left */
}
.trust { background: var(--surface-sunken); }
.trust .tick-list .icon { color: var(--primary); }

/* Feedback ------------------------------------------------------------- */
.suggest-link { color: var(--ink-soft); }
.feedback-item { --gap: var(--space-2); }
.shipped-proof {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--correct-tint);
  border: 1.5px solid color-mix(in srgb, var(--correct) 35%, transparent);
}
.shipped-proof p { margin: 0 0 var(--space-2); }
.shipped-proof p:last-child { margin: 0; }

/* Admin ----------------------------------------------------------------- */
.admin-item { --gap: var(--space-3); }
.admin-item[data-status='new'] { border-left: 5px solid var(--primary); }
.admin-item[data-status='shipped'] { border-left: 5px solid var(--correct); }
.admin-item[data-status='declined'] { border-left: 5px solid var(--line-strong); }
.admin-quote {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--line-strong);
  background: var(--surface-sunken);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink-soft);
}
.admin-quote p { margin: 0; white-space: pre-wrap; }
.admin-actions { gap: var(--space-2); }
.notified {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0; font-size: var(--step--1); color: var(--correct); font-weight: 700;
}
/* A chip that is a link is a control, not a label, so it has to be a real tap
   target. The 44px floor applies to anything a finger has to hit. */
a.chip {
  text-decoration: none;
  min-height: var(--tap);
  padding: var(--space-2) var(--space-4);
}
a.chip:hover { border-color: var(--primary); color: var(--primary); }

/* A quiet note that progress has not reached the server yet. */
.sync-chip { color: var(--nearly); border-color: color-mix(in srgb, var(--nearly) 40%, var(--line)); }