/* Learner-app styles. Anything reusable belongs in /kit, not here. */

.q { font-size: var(--step-1); line-height: 1.45; margin: var(--space-3) 0 var(--space-4); }
.menu .sub { display: block; font-weight: 400; font-size: 14px; opacity: .85; margin-top: 2px; }

.nav { display: flex; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.nav button { flex: 1; margin-top: 0; min-height: 44px; padding: 8px 10px; font-size: 15px; }
.nav button[aria-current="page"] {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}

.who-row { display: flex; align-items: center; gap: var(--space-2); }
.who-row button { width: auto; margin-top: 0; min-height: 36px; padding: 6px 12px; font-size: 14px; }

.banner {
  display: block; width: 100%; height: auto; max-height: 280px; object-fit: cover;
  object-position: center 60%; border-radius: var(--radius-lg); margin: 0 0 var(--space-4);
  box-shadow: var(--shadow), 0 0 0 2px color-mix(in srgb, var(--state-accent) 40%, transparent);
}
html.exam .banner { display: none; }

.plans { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.plan h2 { margin: 0 0 var(--space-2); }
.plan.feature { border-color: var(--accent); }
@media (min-width: 680px) { .plans { grid-template-columns: repeat(3, 1fr); } }

.empty {
  text-align: center; padding: var(--space-4) var(--space-3);
}
.empty img { width: min(280px, 70%); height: auto; margin: 0 auto var(--space-3); display: block; }

.ready-head { display: flex; gap: var(--space-3); align-items: center; }
.ready-meter { position: relative; width: 72px; height: 72px; flex: 0 0 72px; }
.ready-meter svg { width: 72px; height: 72px; transform: rotate(-90deg); }
.ready-meter circle { fill: none; stroke-width: 3.2; }
.ready-meter .rg-track { stroke: var(--tap-bg); }
.ready-meter .rg-fill { stroke: var(--accent); stroke-linecap: round;
  transition: stroke-dasharray 500ms cubic-bezier(.2, .7, .2, 1); }
.readiness.ready .rg-fill { stroke: var(--right); }
.ready-meter span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 13px; font-weight: 650; letter-spacing: -0.02em;
}
@media (min-width: 680px) { .nav { justify-content: flex-start; } .nav button { flex: 0 0 auto; min-width: 130px; } }

#quiz-foot { margin-top: var(--space-4); gap: var(--space-2); }
#quiz-foot #flag { font-size: 14px; min-height: 44px; opacity: .75; }

/* exam mode: the error budget is the only feedback the real test gives you */
.exam-bar { margin: var(--space-2) 0 0; font-size: 14px; color: var(--muted); }
.exam-bar .track { height: 4px; background: var(--tap-bg); border-radius: 99px; margin-top: 6px; overflow: hidden; }
.exam-bar #track-fill { height: 100%; background: var(--accent); width: 0%; }
.exam-bar.spent #track-fill { background: var(--wrong); }

.pulse { margin-top: var(--space-4); }
.pulse-row { display: flex; gap: var(--space-2); }
.pulse-row button { margin-top: 0; min-width: 52px; }

.readiness { border-left: 3px solid var(--state-accent); }
.readiness.ready { border-left-color: var(--right); }
.readiness .verdict-line { font-size: var(--step-1); font-weight: 600; margin: 0 0 var(--space-1); }
.readiness .rule { color: var(--muted); font-size: 14px; margin: var(--space-2) 0 0; }
.recent { display: flex; gap: var(--space-1); margin-top: var(--space-3); flex-wrap: wrap; }
.recent span { font-size: 13px; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.recent span.ok { color: var(--right); border-color: var(--right); }

.topic-row { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.topic-row .row { gap: var(--space-3); }
.topic-name { text-transform: capitalize; }
.bar-track { height: 6px; background: var(--tap-bg); border-radius: 99px; margin-top: 6px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); transition: width 500ms cubic-bezier(.2, .7, .2, 1); }
.bar-fill.weak { background: var(--pending); }

.member { margin-top: var(--space-3); }
.member .row { align-items: flex-start; }
.member h3 { margin: 0; font-size: var(--step-1); }
.member .you { color: var(--state-accent); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
@media (min-width: 680px) { #members { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .member { margin-top: 0; } }

.review-item { border-top: 1px solid var(--line); padding: var(--space-3) 0; }
.review-item .yours { color: var(--wrong); }
.review-item .theirs { color: var(--right); }
.review-item figure.art img { width: 120px; }

dialog {
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card);
  color: var(--ink); max-width: 460px; width: calc(100vw - 2 * var(--space-4)); padding: var(--space-4);
}
dialog::backdrop { background: rgb(0 0 0 / .5); }