/* ==========================================================================
   ADI Stage 1 Study Hub
   Brand: DIT (NUI Driving Instructor Training) - primary green #508916
   Mobile-first. Reuses the quiz-* visual language from stage1-page.css so the
   practice runner matches the public taster exactly; the --s1-* tokens are
   redeclared here under .study-page because they are scoped to .stage1-page.
   ========================================================================== */

.study-page {
  /* Mirror the stage-1 quiz tokens so reused quiz-* classes render identically. */
  --s1-green: #508916;
  --s1-green-light: #e8f5d6;
  --s1-green-dark: #3a6610;
  --s1-text: #242427;
  --s1-text-muted: #6c6d74;
  --s1-border: #e5e5e7;
  --s1-bg-alt: #f7f7f7;
  --s1-radius: 8px;
  --s1-correct: #2e7d32;
  --s1-correct-light: #e8f5e9;
  --s1-wrong: #c62828;
  --s1-wrong-light: #ffebee;

  color: var(--s1-text);
  background: var(--s1-bg-alt);
  min-height: 60vh;
  /* The DIT site header is `position: fixed` (height: --header-height, 80px in
     brand.css), so it overlaps the top of the page. Content pages with a hero
     clear it via the hero's own top padding; the study hub has NO hero, so the
     page itself must reserve the header height plus breathing room or the first
     section (login card, dashboard greeting, guide header) renders underneath
     the header. --header-height is 80px at every breakpoint (it is never
     overridden in brand.css and the mobile header is the same height, with the
     hamburger menu as a separate dropdown), so this single clearance holds at
     all widths. No media query below may reduce the TOP below the header. */
  padding: calc(var(--header-height, 80px) + 1.5rem) 0 4rem;
  /* Guard against any child (grids, tables, long words) forcing the page wider
     than the viewport on a phone. Nothing in the hub should scroll sideways.
     IMPORTANT: use `clip`, not `hidden`. `overflow-x: hidden` makes this element
     a scroll container, which breaks `position: sticky` on the mock timer bar
     (it would stick to this box instead of the viewport) and lets content slide
     under the fixed site header. `overflow-x: clip` clips the same way WITHOUT
     creating a scroll container, so the sticky bar keeps working. */
  overflow-x: clip;
}

.study-page .container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1rem;
  /* min-width:0 lets flex/grid children shrink instead of pushing the page out. */
  min-width: 0;
}

/* Long unbroken strings (emails, URLs in copy) must wrap, not overflow. */
.study-page .study-auth__help a,
.study-page .study-mockbar__name,
.study-page .study-dash__sub {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Scoped secondary button: unified.css only defines .btn / .btn-primary, so a
   bare .btn-secondary (used by Prev/Next, expiry actions, result actions) would
   render as borderless text. Give it a real outline-button treatment on brand. */
.study-page .btn-secondary {
  background: #fff;
  color: var(--s1-green-dark);
  border: 2px solid var(--s1-border);
}

.study-page .btn-secondary:hover:not(:disabled) {
  border-color: var(--s1-green);
  color: var(--s1-green-dark);
  background: rgba(80, 137, 22, 0.04);
}

/* Comfortable tap targets for every study button on touch screens. */
.study-page .btn {
  min-height: 44px;
}

/* CRITICAL containment fix. The shared site CSS (unified.css) applies a global
   `header { position: fixed; top:0; height:--header-height; z-index:1000; ... }`
   meant only for the site header. The study pages use semantic <header> elements
   for the page header AND every section-card head, so without this reset they all
   become position:fixed and pile up at the top of the viewport, overlapping each
   other and the page content. Put every <header> inside the study content back
   into normal flow. (Per-header classes still control their own border/spacing.) */
.study-page header {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  height: auto;
  background: none;
  backdrop-filter: none;
  z-index: auto;
}

/* ---------- Generic card + notices ---------- */
.study-card {
  background: #fff;
  border: 1px solid var(--s1-border);
  border-radius: var(--s1-radius);
  padding: 1.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.study-notice {
  border-radius: var(--s1-radius);
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.study-notice--error {
  background: var(--s1-wrong-light);
  border: 1px solid rgba(198, 40, 40, 0.35);
  color: var(--s1-wrong);
}

/* ---------- Form fields ---------- */
.study-field {
  margin-bottom: 1rem;
  text-align: left;
}

.study-field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--s1-text);
}

.study-field input[type="email"] {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--s1-text);
  background: #fff;
  border: 2px solid var(--s1-border);
  border-radius: var(--s1-radius);
  box-sizing: border-box;
}

.study-field input[type="email"]:focus {
  outline: none;
  border-color: var(--s1-green);
}

.study-field--captcha {
  display: flex;
  justify-content: center;
  /* The Turnstile iframe is a fixed ~300px and cannot shrink; if the viewport is
     narrower than that, let this row scroll rather than widen the whole page. */
  max-width: 100%;
  overflow-x: auto;
}

/* ==========================================================================
   AUTH (login)
   ========================================================================== */
.study-auth__inner {
  max-width: 480px;
}

.study-auth__brandmark {
  text-align: center;
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--s1-green-dark);
  margin-bottom: 1.25rem;
  font-size: 1.05rem;
}

.study-auth__card {
  text-align: center;
}

.study-auth__title {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.study-auth__lede {
  color: var(--s1-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

.study-auth__form {
  text-align: left;
}

.study-auth__submit {
  width: 100%;
  justify-content: center;
  margin-top: 0.25rem;
}

.study-auth__form-error {
  margin-top: 0.85rem;
  color: var(--s1-wrong);
  font-size: 0.85rem;
}

.study-auth__confirm {
  text-align: center;
  padding: 0.5rem 0;
}

.study-auth__confirm-icon {
  color: var(--s1-green);
  margin-bottom: 0.5rem;
}

.study-auth__confirm-title {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.study-auth__confirm-body {
  color: var(--s1-text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

.study-auth__help {
  margin: 1.5rem 0 0;
  font-size: 0.8rem;
  color: var(--s1-text-muted);
  text-align: center;
}

.study-auth__help a,
.study-auth__back a {
  color: var(--s1-green-dark);
  font-weight: 600;
}

.study-auth__back {
  text-align: center;
  margin: 1.25rem 0 0;
  font-size: 0.85rem;
}

/* ==========================================================================
   DASHBOARD
   ========================================================================== */
.study-dash__loading,
.study-practice__loading {
  text-align: center;
  color: var(--s1-text-muted);
  padding: 3rem 0;
}

.study-dash__header {
  margin-bottom: 2rem;
}

.study-dash__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--s1-green);
  margin: 0 0 0.35rem;
}

.study-dash__greeting {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.study-dash__sub {
  color: var(--s1-text-muted);
  font-size: 0.9rem;
  margin: 0 0 1rem;
}

.study-dash__access {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  background: var(--s1-green-light);
  border-radius: 999px;
  padding: 0.4rem 1rem;
}

.study-dash__access-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--s1-green-dark);
  font-weight: 600;
}

.study-dash__access-value {
  font-weight: 700;
  color: var(--s1-text);
}

.study-dash__access--soon {
  background: var(--s1-wrong-light);
}

.study-dash__access--soon .study-dash__access-label,
.study-dash__access--soon .study-dash__access-value {
  color: var(--s1-wrong);
}

/* ---------- Tiles ---------- */
.study-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
}

.study-tile {
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid var(--s1-border);
  border-radius: var(--s1-radius);
  padding: 1.5rem;
  text-decoration: none;
  color: var(--s1-text);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.study-tile--live:hover,
.study-tile--live:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(80, 137, 22, 0.16);
  border-color: var(--s1-green);
  outline: none;
}

.study-tile--soon {
  opacity: 0.72;
  cursor: not-allowed;
  background: #fcfcfc;
}

.study-tile__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--s1-radius);
  background: var(--s1-green-light);
  color: var(--s1-green-dark);
  margin-bottom: 1rem;
}

.study-tile__title {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.study-tile__desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--s1-text-muted);
  margin: 0 0 1rem;
}

.study-tile__cta {
  font-weight: 700;
  color: var(--s1-green-dark);
  font-size: 0.9rem;
}

.study-tile__cta::after {
  content: ' \2192';
}

.study-tile__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--s1-text-muted);
  background: var(--s1-bg-alt);
  border: 1px solid var(--s1-border);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}

.study-dash__footer {
  margin-top: 2.5rem;
  text-align: center;
}

.study-logout {
  background: none;
  border: none;
  color: var(--s1-text-muted);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}

.study-logout:hover {
  color: var(--s1-text);
}

/* ==========================================================================
   EXPIRY PANEL
   ========================================================================== */
.study-expired {
  max-width: 560px;
  margin: 1rem auto;
  text-align: center;
}

.study-expired__title {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.study-expired__body {
  color: var(--s1-text-muted);
  line-height: 1.6;
  font-size: 0.92rem;
  margin: 0 0 0.5rem;
}

.study-expired__meta {
  font-size: 0.85rem;
  color: var(--s1-text);
  font-weight: 600;
  margin: 0 0 1.25rem;
}

.study-expired__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   PRACTICE: header, picker, runner
   ========================================================================== */
.study-practice__back a,
.study-practice__header a {
  color: var(--s1-green-dark);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}

.study-practice__title {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 1.7rem;
  font-weight: 700;
  margin: 0.5rem 0 0.35rem;
}

.study-practice__lede {
  color: var(--s1-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 1.75rem;
  max-width: 60ch;
}

/* ---------- Picker ---------- */
.study-picker__heading {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.study-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

.study-picker__option {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 2px solid var(--s1-border);
  border-radius: var(--s1-radius);
  padding: 1rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--s1-text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}

.study-picker__option:hover {
  border-color: var(--s1-green);
  background: rgba(80, 137, 22, 0.04);
  transform: translateY(-1px);
}

.study-picker__option:focus-visible {
  outline: 2px solid var(--s1-green);
  outline-offset: 2px;
}

.study-picker__note {
  margin: 1.25rem 0 0;
  font-size: 0.78rem;
  color: var(--s1-text-muted);
  font-style: italic;
}

/* ---------- Runner bar (progress + score) ---------- */
.study-runner__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.quiz-progress {
  flex: 1 1 200px;
}

.quiz-progress__text {
  display: block;
  font-size: 0.8rem;
  color: var(--s1-text-muted);
  margin-bottom: 0.35rem;
}

.quiz-progress__track {
  height: 6px;
  background: var(--s1-border);
  border-radius: 3px;
  overflow: hidden;
}

.quiz-progress__fill {
  height: 100%;
  background: var(--s1-green);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.study-runner__score {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--s1-green-dark);
  white-space: nowrap;
}

/* ---------- Quiz card (reused class names from stage1-page.css) ---------- */
.study-page .quiz-card {
  background: #fff;
  border: 1px solid var(--s1-border);
  border-radius: var(--s1-radius);
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.study-page .quiz-card__section {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--s1-green);
  background: var(--s1-green-light);
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  margin-bottom: 0.75rem;
  min-height: 1.2em;
}

.study-page .quiz-card__question {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--s1-text);
  line-height: 1.5;
  margin: 0 0 1.25rem;
  outline: none;
}

.study-page .quiz-card__options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.study-page .quiz-option {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: left;
  background: #fff;
  border: 2px solid var(--s1-border);
  border-radius: var(--s1-radius);
  cursor: pointer;
  color: var(--s1-text);
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}

.study-page .quiz-option:hover:not(:disabled) {
  border-color: var(--s1-green);
  background: rgba(80, 137, 22, 0.04);
}

.study-page .quiz-option:focus-visible {
  outline: 2px solid var(--s1-green);
  outline-offset: 2px;
}

.study-page .quiz-option:disabled {
  cursor: default;
}

.study-page .quiz-option[aria-pressed="true"].quiz-option--correct {
  border-color: var(--s1-correct);
  background: var(--s1-correct-light);
  color: var(--s1-correct);
  font-weight: 600;
}

.study-page .quiz-option[aria-pressed="true"].quiz-option--wrong {
  border-color: var(--s1-wrong);
  background: var(--s1-wrong-light);
  color: var(--s1-wrong);
}

.study-page .quiz-option.quiz-option--correct-reveal {
  border-color: var(--s1-correct);
  background: var(--s1-correct-light);
}

.study-page .quiz-card__explanation {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  background: var(--s1-green-light);
  border-radius: var(--s1-radius);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--s1-text);
  display: none;
}

.study-page .quiz-card__explanation.is-visible {
  display: block;
}

.study-page .quiz-card__next {
  margin-top: 1rem;
}

/* ---------- Runner controls ---------- */
.study-runner__controls {
  margin-top: 1.25rem;
  text-align: center;
}

.study-runner__change {
  background: none;
  border: none;
  color: var(--s1-text-muted);
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
}

.study-runner__change:hover {
  color: var(--s1-text);
}

/* ==========================================================================
   MOCKS - list view
   ========================================================================== */
.study-mocks__back a,
.study-mocks__header a {
  color: var(--s1-green-dark);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}

.study-mocks__title {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 1.7rem;
  font-weight: 700;
  margin: 0.5rem 0 0.35rem;
}

.study-mocks__lede {
  color: var(--s1-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 0.75rem;
  max-width: 62ch;
}

.study-mocks__house-note {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--s1-text-muted);
  background: var(--s1-green-light);
  border-radius: var(--s1-radius);
  padding: 0.7rem 0.9rem;
  margin: 0 0 1.75rem;
  max-width: 62ch;
}

.study-mocks__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
}

.study-mockcard {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--s1-border);
  border-radius: var(--s1-radius);
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.study-mockcard__title {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.study-mockcard__desc {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--s1-text-muted);
  margin: 0 0 0.9rem;
}

.study-mockcard__meta {
  list-style: none;
  padding: 0;
  margin: 0 0 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
}

.study-mockcard__meta li {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--s1-green-dark);
  background: var(--s1-green-light);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}

.study-mockcard__prior {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--s1-text);
  margin: 0 0 0.6rem;
}

.study-mockcard__note {
  font-size: 0.74rem;
  font-style: italic;
  color: var(--s1-text-muted);
  margin: 0 0 1rem;
}

.study-mockcard__start {
  margin-top: auto;
  align-self: flex-start;
}

.study-mocks__disclaimer {
  margin: 1.5rem 0 0;
  font-size: 0.78rem;
  color: var(--s1-text-muted);
  font-style: italic;
}

.study-mocks__empty {
  color: var(--s1-text-muted);
  font-size: 0.9rem;
}

/* ==========================================================================
   MOCKS - runner: sticky bar (name + timer + submit)
   ========================================================================== */
.study-mockbar {
  position: sticky;
  /* Stick BELOW the fixed site header (--header-height, 80px) so the timer and
     submit button are never hidden behind it while the candidate scrolls. */
  top: var(--header-height, 80px);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: #fff;
  border: 1px solid var(--s1-border);
  border-radius: var(--s1-radius);
  padding: 0.85rem 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  margin-bottom: 0.5rem;
}

.study-mockbar__info {
  display: flex;
  flex-direction: column;
  flex: 1 1 180px;
  min-width: 0;
}

.study-mockbar__name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--s1-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.study-mockbar__counter {
  font-size: 0.8rem;
  color: var(--s1-text-muted);
}

.study-mockbar__timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.3rem 0.9rem;
  border-radius: var(--s1-radius);
  background: var(--s1-green-light);
}

.study-mockbar__timer-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--s1-green-dark);
}

.study-mockbar__timer-value {
  font-size: 1.3rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--s1-text);
}

.study-mockbar__timer--low {
  background: var(--s1-wrong-light);
}

.study-mockbar__timer--low .study-mockbar__timer-label,
.study-mockbar__timer--low .study-mockbar__timer-value {
  color: var(--s1-wrong);
}

.study-mockbar__timer-note {
  font-size: 0.74rem;
  font-style: italic;
  color: var(--s1-text-muted);
  margin: 0 0 1.25rem;
}

/* ---------- runner card extras ---------- */
.study-mockrunner__cardtop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.study-mockrunner__cardtop .quiz-card__section {
  margin-bottom: 0;
}

.study-mockrunner__flag {
  flex-shrink: 0;
}

.study-mockrunner__flag {
  background: none;
  border: 1px solid var(--s1-border);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--s1-text-muted);
  cursor: pointer;
  white-space: nowrap;
}

.study-mockrunner__flag:hover {
  border-color: var(--s1-green);
  color: var(--s1-green-dark);
}

.study-mockrunner__flag.is-flagged {
  background: #fff6e5;
  border-color: #e0a800;
  color: #8a6400;
}

.study-mockrunner__pos {
  font-size: 0.8rem;
  color: var(--s1-text-muted);
  margin: 0 0 0.75rem;
}

.study-page .quiz-option--chosen {
  border-color: var(--s1-green);
  background: rgba(80, 137, 22, 0.08);
  font-weight: 600;
}

.study-mockrunner__nav {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 1rem 0;
}

.study-mockrunner__nav .btn {
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
}

/* Disabled prev/next must read as unavailable but stay laid out (not collapse). */
.study-mockrunner__nav .btn:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ---------- question grid (jump navigator) ---------- */
.study-mockgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 0.4rem;
  margin: 1rem 0 1.5rem;
}

.study-mockgrid__cell {
  aspect-ratio: 1 / 1;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--s1-border);
  border-radius: 6px;
  background: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  color: var(--s1-text-muted);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.study-mockgrid__cell:hover {
  border-color: var(--s1-green);
}

.study-mockgrid__cell.is-answered {
  background: var(--s1-green-light);
  border-color: var(--s1-green);
  color: var(--s1-green-dark);
}

.study-mockgrid__cell.is-flagged {
  border-color: #e0a800;
  box-shadow: inset 0 0 0 2px #ffe08a;
}

.study-mockgrid__cell.is-active {
  outline: 2px solid var(--s1-green-dark);
  outline-offset: 1px;
  color: var(--s1-text);
}

.study-mockrunner__footer {
  border-top: 1px solid var(--s1-border);
  padding-top: 1.25rem;
  text-align: center;
}

.study-mockrunner__unanswered {
  font-size: 0.85rem;
  color: var(--s1-text-muted);
  margin: 0 0 0.85rem;
}

/* ==========================================================================
   MOCKS - result view
   ========================================================================== */
.study-result__header {
  margin-bottom: 1rem;
}

.study-result__title {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 1.7rem;
  font-weight: 700;
  margin: 0.5rem 0 0;
}

.study-result__verdict {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  border-radius: var(--s1-radius);
  padding: 1.1rem 1.25rem;
  margin: 0 0 0.75rem;
  border: 1px solid var(--s1-border);
}

.study-result__verdict--pass {
  background: var(--s1-correct-light);
  border-color: var(--s1-correct);
}

.study-result__verdict--fail {
  background: var(--s1-wrong-light);
  border-color: var(--s1-wrong);
}

.study-result__verdict-badge {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  color: #fff;
}

.study-result__verdict--pass .study-result__verdict-badge {
  background: var(--s1-correct);
}

.study-result__verdict--fail .study-result__verdict-badge {
  background: var(--s1-wrong);
}

.study-result__verdict-text {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--s1-text);
}

.study-result__summary {
  font-size: 0.9rem;
  color: var(--s1-text);
  margin: 0 0 0.5rem;
}

.study-result__house-note {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--s1-text-muted);
  margin: 0 0 1.75rem;
  max-width: 62ch;
}

.study-result__subhead {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 1.75rem 0 0.85rem;
}

.study-result__tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Subtle inset edges hint that the table can scroll sideways when it is wider
     than its container on a narrow phone. */
  background:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 24px 100% no-repeat,
    linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 24px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)) left center / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)) right center / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

.study-result__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.study-result__table th,
.study-result__table td {
  text-align: left;
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--s1-border);
  white-space: nowrap;
}

.study-result__table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--s1-text-muted);
}

.study-result__cell-name {
  white-space: normal;
  font-weight: 600;
}

.study-result__row--fail .study-result__cell-name {
  color: var(--s1-wrong);
}

.study-result__pill {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.study-result__pill--pass {
  background: var(--s1-correct-light);
  color: var(--s1-correct);
}

.study-result__pill--fail {
  background: var(--s1-wrong-light);
  color: var(--s1-wrong);
}

/* ---------- review list ---------- */
.study-review {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.study-review__item {
  background: #fff;
  border: 1px solid var(--s1-border);
  border-left-width: 4px;
  border-radius: var(--s1-radius);
  padding: 1rem 1.1rem;
}

.study-review__item--correct {
  border-left-color: var(--s1-correct);
}

.study-review__item--wrong {
  border-left-color: var(--s1-wrong);
}

.study-review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.study-review__num {
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--s1-text-muted);
}

.study-review__verdict {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.study-review__item--correct .study-review__verdict {
  color: var(--s1-correct);
}

.study-review__item--wrong .study-review__verdict {
  color: var(--s1-wrong);
}

.study-review__stem {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 0.75rem;
}

.study-review__options {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.study-review__option {
  font-size: 0.85rem;
  line-height: 1.45;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  border: 1px solid transparent;
  color: var(--s1-text);
}

.study-review__option--correct {
  background: var(--s1-correct-light);
  border-color: var(--s1-correct);
  font-weight: 600;
}

.study-review__option--chosen {
  border-color: var(--s1-text-muted);
}

.study-review__option--chosen.study-review__option--correct {
  border-color: var(--s1-correct);
}

.study-review__answerline {
  font-size: 0.85rem;
  margin: 0 0 0.5rem;
}

.study-review__explanation {
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--s1-text);
  background: var(--s1-bg-alt);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  margin: 0.5rem 0 0;
}

.study-result__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* ==========================================================================
   RESPONSIVE
   Breakpoints follow the site conventions (900 / 600) plus a 400 tier for the
   densest study-hub components (mock grid, runner nav). Targets ~360px wide.
   ========================================================================== */

/* ---------- Tablet / small laptop ---------- */
@media (max-width: 900px) {
  .study-dash__greeting {
    font-size: 1.6rem;
  }
  /* Single, full-width column for tiles and mock cards below the nav breakpoint
     so they never get squeezed to an awkward two-up. */
  .study-tiles,
  .study-mocks__grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Phone ---------- */
@media (max-width: 600px) {
  .study-page {
    /* Keep the full fixed-header clearance on the top (the header stays 80px on
       mobile); only the bottom padding tightens on a phone. */
    padding: calc(var(--header-height, 80px) + 1.5rem) 0 3rem;
  }
  .study-card {
    padding: 1.25rem;
  }

  /* --- Headings scale down so nothing is oversized on a phone --- */
  .study-dash__greeting {
    font-size: 1.5rem;
  }
  .study-practice__title,
  .study-mocks__title,
  .study-result__title {
    font-size: 1.45rem;
  }
  .study-auth__title,
  .study-expired__title {
    font-size: 1.3rem;
  }
  .study-result__subhead {
    font-size: 1.1rem;
  }

  /* --- Picker + tiles already single-column via auto-fit; keep tap room --- */
  .study-picker__grid {
    grid-template-columns: 1fr;
  }

  /* --- Practice runner bar: stack progress over score --- */
  .study-runner__bar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .study-runner__score {
    text-align: left;
  }
  .study-page .quiz-card {
    padding: 1.1rem;
  }

  /* --- Mock sticky bar: stack name / timer / submit, full-width submit --- */
  .study-mockbar {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
  }
  .study-mockbar__info {
    align-items: center;
    flex-basis: auto;
  }
  .study-mockbar__name {
    white-space: normal;
  }
  .study-mockbar__submit {
    width: 100%;
  }

  /* --- Mock runner nav: keep prev/next side by side but allow stacking --- */
  .study-mockrunner__nav .btn {
    padding-left: 0.9em;
    padding-right: 0.9em;
  }

  /* --- Question navigator grid: smaller cells, still >=32px tap targets --- */
  .study-mockgrid {
    grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
    gap: 0.35rem;
  }
  .study-mockgrid__cell {
    min-height: 34px;
    font-size: 0.8rem;
  }

  /* --- Result table: tighten so 4 columns fit, scroll-wrap as a fallback --- */
  .study-result__table {
    font-size: 0.82rem;
  }
  .study-result__table th,
  .study-result__table td {
    padding: 0.55rem 0.5rem;
  }

  /* --- Action rows: full-width buttons that stack cleanly --- */
  .study-result__actions,
  .study-expired__actions {
    flex-direction: column;
  }
  .study-result__actions .btn,
  .study-expired__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Small phone (~360px) ---------- */
@media (max-width: 400px) {
  .study-page .container {
    padding: 0 0.75rem;
  }
  .study-card {
    padding: 1rem;
  }
  .study-dash__greeting {
    font-size: 1.35rem;
  }

  /* Densest grid: shrink cells a touch more but hold the 32px tap floor. */
  .study-mockgrid {
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
    gap: 0.3rem;
  }
  .study-mockgrid__cell {
    min-height: 32px;
    font-size: 0.78rem;
  }

  /* Prev/Next stack so neither label truncates on the narrowest screens. */
  .study-mockrunner__nav {
    flex-direction: column;
  }

  /* Timer value stays prominent but not huge. */
  .study-mockbar__timer-value {
    font-size: 1.2rem;
  }
}

/* ==========================================================================
   PROGRESS & STUDY TOOLS (Phase 4)
   Shared page header + tool blocks, then: spaced-repetition entry, per-section
   readiness bars, confidence inputs, mock history, error log, and the review-run
   panels. Mobile-first; reuses the --s1-* tokens declared on .study-page.
   ========================================================================== */
.study-progress__loading,
.study-review-run__loading {
  text-align: center;
  color: var(--s1-text-muted);
  padding: 3rem 0;
}

.study-progress__back a,
.study-progress__header a,
.study-review-run__back a {
  color: var(--s1-green-dark);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}

.study-progress__title,
.study-review-run__title {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 1.7rem;
  font-weight: 700;
  margin: 0.5rem 0 0.35rem;
}

.study-progress__lede,
.study-review-run__lede {
  color: var(--s1-text-muted);
  font-size: 0.92rem;
  line-height: 1.6;
  margin: 0 0 1.75rem;
  max-width: 62ch;
}

/* ---------- Tool blocks (one card-like section per tool) ---------- */
.study-tools__block {
  background: #fff;
  border: 1px solid var(--s1-border);
  border-radius: var(--s1-radius);
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
}

.study-tools__heading {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.study-tools__subnote {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--s1-text-muted);
  margin: 0 0 1.1rem;
  max-width: 64ch;
}

/* ---------- Spaced-repetition entry banner ---------- */
.study-review-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  border-left: 4px solid var(--s1-green);
}

.study-review-entry__text {
  flex: 1 1 260px;
  min-width: 0;
}

.study-review-entry .study-tools__heading {
  margin-bottom: 0.35rem;
}

.study-review-entry__count {
  font-size: 1rem;
  font-weight: 700;
  color: var(--s1-green-dark);
  margin: 0 0 0.4rem;
}

.study-review-entry__note {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--s1-text-muted);
  margin: 0;
  max-width: 60ch;
}

.study-review-entry__cta {
  flex-shrink: 0;
}

/* ---------- Per-section readiness bars ---------- */
.study-sections {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.study-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.45rem;
}

.study-section__name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--s1-text);
}

.study-section__badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

.study-section__badge--on-track {
  background: var(--s1-correct-light);
  color: var(--s1-correct);
}

.study-section__badge--borderline {
  background: #fff6e5;
  color: #8a6400;
}

.study-section__badge--below {
  background: var(--s1-wrong-light);
  color: var(--s1-wrong);
}

.study-section__badge--not-started {
  background: var(--s1-bg-alt);
  color: var(--s1-text-muted);
  border: 1px solid var(--s1-border);
}

/* The bar track holds the accuracy fill plus two position markers. */
.study-section__track {
  position: relative;
  height: 12px;
  background: var(--s1-border);
  border-radius: 6px;
  overflow: hidden;
}

.study-section__fill {
  height: 100%;
  background: var(--s1-green);
  border-radius: 6px 0 0 6px;
  transition: width 0.4s ease;
}

/* Readiness colour-codes the fill so the bar reads at a glance. */
.study-section--below .study-section__fill {
  background: var(--s1-wrong);
}

.study-section--borderline .study-section__fill {
  background: #e0a800;
}

.study-section--on-track .study-section__fill {
  background: var(--s1-correct);
}

/* Markers sit ON TOP of the fill; overflow:hidden on the track clips them to the
   bar height, so give them full height and a thin width. */
.study-section__marker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-1px);
}

.study-section__marker--threshold {
  background: var(--s1-text);
  opacity: 0.55;
}

.study-section__marker--ready {
  background: var(--s1-green-dark);
  opacity: 0.9;
  width: 2px;
  border-left: 1px dashed #fff;
}

.study-section__meta {
  font-size: 0.78rem;
  color: var(--s1-text-muted);
  margin: 0.4rem 0 0;
}

/* ---------- Confidence inputs (1-5 dots per section) ---------- */
.study-confidence {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.study-confrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
}

.study-confrow__name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--s1-text);
  flex: 1 1 200px;
  min-width: 0;
}

.study-confrow__scale {
  display: inline-flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.study-confrow__dot {
  width: 40px;
  min-height: 40px;
  border: 2px solid var(--s1-border);
  border-radius: 999px;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  font-family: inherit;
  color: var(--s1-text-muted);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.study-confrow__dot:hover {
  border-color: var(--s1-green);
  color: var(--s1-green-dark);
}

.study-confrow__dot:focus-visible {
  outline: 2px solid var(--s1-green);
  outline-offset: 2px;
}

.study-confrow__dot.is-selected {
  background: var(--s1-green);
  border-color: var(--s1-green);
  color: #fff;
}

.study-confidence__status {
  font-size: 0.8rem;
  color: var(--s1-green-dark);
  margin: 1rem 0 0;
  font-weight: 600;
}

.study-confidence__status.is-error {
  color: var(--s1-wrong);
}

/* ---------- Mock history ---------- */
.study-mockhistory {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.study-mockhistory__empty {
  color: var(--s1-text-muted);
  font-size: 0.88rem;
  margin: 0;
}

.study-mockhistory__summary {
  font-size: 0.84rem;
  color: var(--s1-text-muted);
  margin: 0 0 0.25rem;
}

.study-mockrow {
  border: 1px solid var(--s1-border);
  border-left-width: 4px;
  border-radius: var(--s1-radius);
  padding: 0.85rem 1rem;
  background: #fff;
}

.study-mockrow--pass {
  border-left-color: var(--s1-correct);
}

.study-mockrow--fail {
  border-left-color: var(--s1-wrong);
}

.study-mockrow__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.study-mockrow__title {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--s1-text);
}

.study-mockrow__pill {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}

.study-mockrow__pill--pass {
  background: var(--s1-correct-light);
  color: var(--s1-correct);
}

.study-mockrow__pill--fail {
  background: var(--s1-wrong-light);
  color: var(--s1-wrong);
}

.study-mockrow__meta {
  font-size: 0.8rem;
  color: var(--s1-text-muted);
  margin: 0 0 0.5rem;
}

.study-mockrow__sections {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.study-mockrow__chip {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--s1-border);
  white-space: nowrap;
}

.study-mockrow__chip.is-pass {
  background: var(--s1-correct-light);
  border-color: var(--s1-correct);
  color: var(--s1-correct);
}

.study-mockrow__chip.is-fail {
  background: var(--s1-wrong-light);
  border-color: var(--s1-wrong);
  color: var(--s1-wrong);
}

/* ---------- Error log ---------- */
.study-errorlog {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.study-errorlog__empty {
  color: var(--s1-text-muted);
  font-size: 0.88rem;
  margin: 0;
}

.study-errorlog__item {
  border: 1px solid var(--s1-border);
  border-left: 4px solid var(--s1-wrong);
  border-radius: var(--s1-radius);
  padding: 1rem 1.1rem;
  background: #fff;
}

.study-errorlog__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.study-errorlog__section {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--s1-green);
  background: var(--s1-green-light);
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
}

.study-errorlog__count {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--s1-wrong);
}

.study-errorlog__stem {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 0.7rem;
}

.study-errorlog__options {
  list-style: none;
  padding: 0;
  margin: 0 0 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.study-errorlog__option {
  font-size: 0.85rem;
  line-height: 1.45;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  border: 1px solid transparent;
  color: var(--s1-text);
}

.study-errorlog__option--correct {
  background: var(--s1-correct-light);
  border-color: var(--s1-correct);
  font-weight: 600;
}

.study-errorlog__option--chosen {
  border-color: var(--s1-wrong);
  background: var(--s1-wrong-light);
}

.study-errorlog__option--chosen.study-errorlog__option--correct {
  background: var(--s1-correct-light);
  border-color: var(--s1-correct);
}

.study-errorlog__explanation {
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--s1-text);
  background: var(--s1-bg-alt);
  border-radius: 6px;
  padding: 0.6rem 0.75rem;
  margin: 0.5rem 0 0;
}

.study-errorlog__more {
  margin-top: 1.25rem;
  text-align: center;
}

/* ---------- Progress footer cross-links ---------- */
.study-progress__footer {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--s1-text-muted);
}

.study-progress__footer-link {
  color: var(--s1-green-dark);
  font-weight: 600;
  text-decoration: none;
  margin: 0 0.4rem;
}

.study-progress__footer-link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   REVIEW RUN (Phase 4)
   Reuses the practice .study-runner / quiz-card styling; adds the schedule line
   and the empty / complete panels.
   ========================================================================== */
.study-review-run__sched {
  margin: 0.85rem 0 0;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--s1-green-dark);
  background: var(--s1-green-light);
  border-radius: var(--s1-radius);
  padding: 0.6rem 0.8rem;
}

.study-review-run__empty,
.study-review-run__done {
  max-width: 560px;
  margin: 1rem auto;
  text-align: center;
}

.study-review-run__empty-title,
.study-review-run__done-title {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 0.6rem;
}

.study-review-run__empty-body,
.study-review-run__done-body {
  color: var(--s1-text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
}

.study-review-run__empty-actions,
.study-review-run__done-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Phase 4 responsive tweaks (match the 600 / 400 tiers) ---------- */
@media (max-width: 600px) {
  .study-progress__title,
  .study-review-run__title {
    font-size: 1.45rem;
  }
  .study-tools__heading {
    font-size: 1.1rem;
  }
  .study-tools__block {
    padding: 1.25rem;
  }

  /* Review entry: stack the text over a full-width CTA. */
  .study-review-entry {
    flex-direction: column;
    align-items: stretch;
  }
  .study-review-entry__cta {
    width: 100%;
    justify-content: center;
  }

  /* Confidence: name on its own line, dots below, full-width row. */
  .study-confrow {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  /* Column layout moves flex-basis onto the VERTICAL axis, so the base
     `flex: 1 1 200px` would make the name 200px tall and leave a huge empty
     gap above the dots. Reset it to natural height, full width. */
  .study-confrow__name {
    flex: 0 0 auto;
    width: 100%;
  }
  .study-confrow__scale {
    width: 100%;
    justify-content: space-between;
  }

  /* Review-run empty/done actions stack full-width like the other panels. */
  .study-review-run__empty-actions,
  .study-review-run__done-actions {
    flex-direction: column;
  }
  .study-review-run__empty-actions .btn,
  .study-review-run__done-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 400px) {
  .study-tools__block {
    padding: 1rem;
  }
  /* Keep the five dots tappable on the narrowest screens without overflow. */
  .study-confrow__dot {
    width: 38px;
    min-height: 38px;
    font-size: 0.85rem;
  }
}

/* ==========================================================================
   STUDY GUIDE (Phase 5b)
   The one hub page that carries its content in the page source (study prose,
   not the protected question bank). Still gated client-side. Long-form reading
   layout: contents nav, prose sections, per-section cards, resource + plan
   tables, a "common traps" list, and source-of-truth tags (house vs official).
   Reuses the --s1-* tokens declared on .study-page. Mobile-first.
   ========================================================================== */
.study-guide__loading {
  text-align: center;
  color: var(--s1-text-muted);
  padding: 3rem 0;
}

/* Cap the reading column a touch narrower than the 960px shell for comfortable
   line length on wide screens; the tables still use the full width inside it. */
.study-guide__main {
  max-width: 760px;
  margin: 0 auto;
}

/* ---------- Header ---------- */
.study-guide__back a {
  color: var(--s1-green-dark);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}

.study-guide__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--s1-green);
  margin: 0.5rem 0 0.35rem;
}

.study-guide__title {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.study-guide__lede {
  color: var(--s1-text-muted);
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 1.25rem;
}

/* The days-remaining chip reuses .study-dash__access; just give it spacing. */
.study-guide__header .study-dash__access {
  margin-top: 0.25rem;
}

/* ---------- Source-of-truth tags ---------- */
.study-guide__tag {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
  margin-right: 0.35rem;
}

.study-guide__tag--house {
  background: var(--s1-green-light);
  color: var(--s1-green-dark);
}

.study-guide__tag--gap {
  background: #fff6e5;
  color: #8a6400;
  border: 1px solid #e9cf94;
}

/* ---------- "How to read this guide" note ---------- */
.study-guide__sot {
  background: var(--s1-bg-alt);
  border: 1px solid var(--s1-border);
  border-left: 4px solid var(--s1-green);
  border-radius: var(--s1-radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1.75rem;
}

.study-guide__sot p {
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--s1-text);
  margin: 0;
}

.study-guide__sot-title {
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  margin: 0 0 0.4rem !important;
}

/* ---------- Contents nav ---------- */
.study-guide__nav {
  background: #fff;
  border: 1px solid var(--s1-border);
  border-radius: var(--s1-radius);
  padding: 1.1rem 1.25rem;
  margin: 0 0 2rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.study-guide__nav-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--s1-text-muted);
  margin: 0 0 0.65rem;
}

.study-guide__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
}

.study-guide__nav-list a {
  color: var(--s1-green-dark);
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
}

.study-guide__nav-list a:hover {
  text-decoration: underline;
}

/* ---------- Sections (top-level) ---------- */
.study-guide__section {
  margin: 0 0 2.5rem;
  /* Offset anchored scroll so a jumped-to heading clears the FIXED site header
     (--header-height) plus a little breathing room, instead of hiding beneath it. */
  scroll-margin-top: calc(var(--header-height, 80px) + 1rem);
}

.study-guide__section:focus {
  outline: none;
}

.study-guide__h2 {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--s1-green-light);
}

.study-guide__h3 {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1.5rem 0 0.6rem;
}

.study-guide__section-intro {
  color: var(--s1-text-muted);
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0 0 1.25rem;
}

.study-guide__section p {
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--s1-text);
  margin: 0 0 1rem;
}

/* ---------- Generic lists ---------- */
.study-guide__list {
  margin: 0 0 1.1rem;
  padding-left: 1.25rem;
}

.study-guide__list li {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--s1-text);
  margin-bottom: 0.5rem;
}

/* ---------- Inline note ---------- */
.study-guide__inline-note {
  font-size: 0.85rem !important;
  line-height: 1.6 !important;
  color: var(--s1-text-muted) !important;
  background: var(--s1-bg-alt);
  border-radius: var(--s1-radius);
  padding: 0.7rem 0.9rem;
  margin: 0 0 1.25rem !important;
}

/* ---------- Overview fact grid ---------- */
.study-guide__factgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 0 0 1.5rem;
}

.study-guide__fact {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--s1-border);
  border-top: 3px solid var(--s1-green);
  border-radius: var(--s1-radius);
  padding: 1rem 1.1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.study-guide__fact-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--s1-green-dark);
  margin-bottom: 0.25rem;
}

.study-guide__fact-value {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--s1-text);
  margin-bottom: 0.3rem;
}

.study-guide__fact-note {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--s1-text-muted);
}

/* ---------- Callouts (evidence-gap + house guidance) ---------- */
.study-guide__callout {
  border-radius: var(--s1-radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1.25rem;
}

.study-guide__callout p {
  font-size: 0.88rem !important;
  line-height: 1.65 !important;
  margin: 0 0 0.75rem !important;
}

.study-guide__callout p:last-child {
  margin-bottom: 0 !important;
}

.study-guide__callout--gap {
  background: #fff6e5;
  border: 1px solid #e9cf94;
}

.study-guide__callout--house {
  background: var(--s1-green-light);
  border: 1px solid rgba(80, 137, 22, 0.3);
}

/* ---------- Per-section cards ---------- */
.study-guide__sectioncard {
  background: #fff;
  border: 1px solid var(--s1-border);
  border-radius: var(--s1-radius);
  padding: 1.5rem;
  margin: 0 0 1.25rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  /* Clear the fixed header when a per-section card is the jump target. */
  scroll-margin-top: calc(var(--header-height, 80px) + 1rem);
}

.study-guide__sectioncard-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--s1-border);
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
}

.study-guide__sectioncard-title {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
}

.study-guide__threshold {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--s1-green-dark);
  background: var(--s1-green-light);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  white-space: nowrap;
}

.study-guide__subhead {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--s1-green);
  margin: 1.1rem 0 0.4rem;
}

.study-guide__pitfall {
  font-size: 0.88rem !important;
  line-height: 1.6 !important;
  color: var(--s1-text) !important;
  background: var(--s1-wrong-light);
  border-left: 3px solid var(--s1-wrong);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
  margin: 0 0 0.5rem !important;
}

/* ---------- Resource link lists ---------- */
.study-guide__reslist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.study-guide__reslist li {
  font-size: 0.88rem;
  line-height: 1.5;
  padding: 0.35rem 0 0.35rem 1.25rem;
  position: relative;
}

.study-guide__reslist li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: var(--s1-green);
  font-weight: 700;
}

.study-guide__reslist a,
.study-guide__disclaimer a {
  color: var(--s1-green-dark);
  font-weight: 600;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------- Tables (threshold, resources, plan) ---------- */
.study-guide__tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 1.25rem;
  border: 1px solid var(--s1-border);
  border-radius: var(--s1-radius);
}

.study-guide__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  background: #fff;
}

.study-guide__table-caption {
  caption-side: top;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--s1-text-muted);
  padding: 0.7rem 0.75rem 0.4rem;
}

.study-guide__table th,
.study-guide__table td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--s1-border);
  vertical-align: top;
}

.study-guide__table thead th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--s1-text-muted);
  background: var(--s1-bg-alt);
  white-space: nowrap;
}

.study-guide__table tbody tr:last-child td {
  border-bottom: none;
}

.study-guide__cell-name {
  font-weight: 600;
  color: var(--s1-text);
}

.study-guide__table a {
  color: var(--s1-green-dark);
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Common traps ---------- */
.study-guide__traps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.study-guide__traps li {
  background: #fff;
  border: 1px solid var(--s1-border);
  border-left: 4px solid #e0a800;
  border-radius: var(--s1-radius);
  padding: 0.85rem 1rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--s1-text);
}

.study-guide__traps strong {
  color: var(--s1-text);
}

/* ---------- Revision plans ---------- */
.study-guide__planlabel {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
  background: var(--s1-green-light);
  border-radius: var(--s1-radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1.5rem;
}

.study-guide__planlabel p {
  font-size: 0.86rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  flex: 1 1 240px;
  min-width: 0;
}

.study-guide__plan {
  background: #fff;
  border: 1px solid var(--s1-border);
  border-radius: var(--s1-radius);
  padding: 1.5rem;
  margin: 0 0 1.25rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.study-guide__plan > .study-guide__h3:first-child {
  margin-top: 0;
}

.study-guide__plan-weeks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.study-guide__plan-weeks li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

.study-guide__plan-week {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--s1-green-dark);
  background: var(--s1-green-light);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  min-width: 64px;
  text-align: center;
}

.study-guide__plan-task {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--s1-text);
}

/* ---------- Where to go next ---------- */
.study-guide__nextgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.study-guide__nextcard {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: #fff;
  border: 1px solid var(--s1-border);
  border-radius: var(--s1-radius);
  padding: 1.25rem;
  text-decoration: none;
  color: var(--s1-text);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.study-guide__nextcard:hover,
.study-guide__nextcard:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(80, 137, 22, 0.16);
  border-color: var(--s1-green);
  outline: none;
}

.study-guide__nextcard-title {
  font-family: var(--font-display, 'Montserrat', sans-serif);
  font-weight: 700;
  font-size: 1rem;
  color: var(--s1-green-dark);
}

.study-guide__nextcard-title::after {
  content: ' \2192';
}

.study-guide__nextcard-desc {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--s1-text-muted);
}

/* ---------- Disclaimer + footer bar ---------- */
.study-guide__disclaimer {
  border-top: 1px solid var(--s1-border);
  margin-top: 2rem;
  padding-top: 1.25rem;
}

.study-guide__disclaimer p {
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--s1-text-muted);
  font-style: italic;
  margin: 0;
}

.study-guide__footerbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}

.study-guide__footer-link {
  color: var(--s1-green-dark);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}

.study-guide__footer-link:hover {
  text-decoration: underline;
}

/* ---------- Guide responsive tweaks (match the 600 / 400 tiers) ---------- */
@media (max-width: 600px) {
  .study-guide__title {
    font-size: 1.55rem;
  }
  .study-guide__h2 {
    font-size: 1.3rem;
  }
  .study-guide__sectioncard,
  .study-guide__plan {
    padding: 1.25rem;
  }
  /* Section card head: stack the title over the threshold pill. */
  .study-guide__sectioncard-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  /* Plan rows: week label above the task on narrow screens. */
  .study-guide__plan-weeks li {
    flex-direction: column;
    gap: 0.4rem;
  }
  .study-guide__plan-week {
    align-self: flex-start;
  }
}

@media (max-width: 400px) {
  .study-guide__sectioncard,
  .study-guide__plan,
  .study-guide__nav {
    padding: 1rem;
  }
}

/* ==========================================================================
   DEEPER RESPONSIVE + UI AUDIT (second pass)
   The first responsive pass added the 900/600/400 tiers above. This block is a
   systematic, additive hardening pass derived from re-reading every page's CSS
   AND the JS-rendered DOM (cards, the 100-cell mock grid, the sticky timer bar,
   the result/section tables, the review list, progress bars, option buttons and
   the guide contents nav are all built at runtime by the study/*.js modules).

   Principles:
     - Mobile-first and DESKTOP-SAFE: every rule here is either an additive
       overflow/break guard that does not change desktop layout, or lives inside
       a (max-width) query.
     - Target a 320px viewport with nothing scrolling sideways.
     - Brand stays DIT green (--s1-* / brand.css #508916).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL HORIZONTAL-OVERFLOW GUARDS (desktop-safe; no visual change wide)
   The overflow complaint is the priority. These guards let flex/grid children
   shrink and force long tokens to wrap, so nothing can push the page wider than
   the viewport. They are no-ops on desktop where there is room to spare.
   -------------------------------------------------------------------------- */

/* Belt-and-braces: the page shell and its main content never exceed the screen.
   (The real guard is overflow-x:clip on .study-page; this caps width too.) */
.study-page,
.study-page .container {
  max-width: 100%;
}

/* Any media a question/explanation might carry must never blow out the column. */
.study-page img,
.study-page svg,
.study-page table {
  max-width: 100%;
}

/* Flex rows that hold a long text child + a fixed control (counters, badges,
   pills, section names) need min-width:0 on the text side or the text refuses to
   wrap and the row overflows. These are the runtime-built rows from the JS. */
.study-mockrow__top,
.study-errorlog__head,
.study-review__head,
.study-section__head,
.study-mockhistory__summary,
.study-result__verdict,
.study-guide__sectioncard-head,
.study-guide__footerbar {
  min-width: 0;
}

.study-mockrow__title,
.study-review__stem,
.study-errorlog__stem,
.study-section__name,
.study-confrow__name,
.study-result__verdict-text,
.study-mockcard__title,
.study-mockbar__name,
.study-tile__title,
.study-tile__desc {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Option labels (practice/mocks/review) and the read-only review/error option
   lists carry arbitrary answer text; force it to wrap rather than overflow. */
.study-page .quiz-option,
.study-review__option,
.study-errorlog__option,
.study-guide__pitfall,
.study-guide__traps li,
.study-guide__plan-task {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   2. TABLES: scroll-wrap affordance on the guide tables too
   The result table already has a scroll wrapper with a fade hint. Give the guide
   threshold/resource/plan tables the same horizontal-scroll fade so a wide table
   on a phone reads as scrollable, not clipped, and never widens the page.
   -------------------------------------------------------------------------- */
.study-guide__tablewrap {
  background:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 24px 100% no-repeat,
    linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 24px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)) left center / 12px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0)) right center / 12px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
/* The fades sit behind the table, but the table's own white header band would
   hide the right fade; let the header cells stay opaque and the body show it. */
.study-guide__table {
  background: transparent;
}
.study-guide__table thead th {
  background: var(--s1-bg-alt);
}
.study-guide__table tbody {
  background: #fff;
}

/* --------------------------------------------------------------------------
   3. TAP TARGETS (>=44px where the control is a primary action)
   The mock grid cells are an intentionally dense navigator (kept >=32px in the
   tiers above); everything else that is a real button/link control gets a 44px
   minimum touch height without changing its desktop look.
   -------------------------------------------------------------------------- */
.study-picker__option,
.study-mockrunner__flag,
.study-tile,
.study-guide__nextcard,
.study-logout,
.study-runner__change,
.study-progress__footer-link,
.study-guide__footer-link {
  min-height: 44px;
}

/* The flag + change-section + logout are inline text buttons; give them padding
   so the 44px height is comfortable to hit, not just tall. */
.study-logout,
.study-runner__change {
  padding: 0.5rem 0.5rem;
  display: inline-block;
}

/* Nav contents links: pad the hit area so each is an easy tap on a phone. */
.study-guide__nav-list a {
  display: inline-block;
  padding: 0.25rem 0;
}

/* --------------------------------------------------------------------------
   4. FOCUS VISIBILITY (accessibility polish, all viewports)
   Several runtime controls had hover styles but NO visible keyboard focus ring
   (mock grid cells, the flag button, tiles, the inline text buttons, the
   prev/next + submit btns, contents-nav links). Add a consistent brand ring.
   NOTE: .quiz-option, .study-picker__option and .study-confrow__dot already
   define their own focus ring, so they are deliberately not re-listed here to
   avoid overriding the existing (intentional) treatment.
   -------------------------------------------------------------------------- */
.study-mockgrid__cell:focus-visible,
.study-mockrunner__flag:focus-visible,
.study-tile--live:focus-visible,
.study-logout:focus-visible,
.study-runner__change:focus-visible,
.study-progress__footer-link:focus-visible,
.study-guide__footer-link:focus-visible,
.study-guide__nav-list a:focus-visible,
.study-guide__nextcard:focus-visible,
.study-page .btn:focus-visible {
  outline: 2px solid var(--s1-green-dark);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The email/text input already greens its border on focus; add a soft ring to
   match the brand.css lead-form treatment for a consistent feel. */
.study-field input[type="email"]:focus {
  box-shadow: 0 0 0 3px rgba(80, 137, 22, 0.12);
}

/* --------------------------------------------------------------------------
   5. UI POLISH: consistency across pages (desktop + mobile)
   -------------------------------------------------------------------------- */

/* The days-remaining chip is an inline-flex pill; on the guide header it can sit
   too tight to the lede. Keep its baseline alignment tidy and let it wrap its
   label/value without overflowing on a very narrow screen. */
.study-dash__access {
  max-width: 100%;
  flex-wrap: wrap;
}

/* Loading + zero/empty states: center and soften so they never look "unfinished"
   or left-aligned-orphaned. (Texts are injected by JS into these containers.) */
.study-mocks__empty,
.study-mockhistory__empty,
.study-errorlog__empty {
  text-align: center;
  padding: 1.5rem 0.5rem;
  background: #fff;
  border: 1px dashed var(--s1-border);
  border-radius: var(--s1-radius);
}

/* Secondary buttons sit next to primary buttons in several action rows
   (expiry, result, review-run). Make their height match the primary .btn exactly
   so rows are visually even. (.btn already has min-height:44px from the top.) */
.study-page .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The access "soon" (<=5 days) state borrows the wrong-light background; make the
   pill read clearly as a gentle warning, consistent with the section badges. */
.study-dash__access--soon {
  border: 1px solid rgba(198, 40, 40, 0.25);
}

/* --------------------------------------------------------------------------
   6. PHONE TIER ADDITIONS (<=600px) — stacking + spacing the first pass missed
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  /* Mock card "Start mock" button is align-self:flex-start (narrow). On a phone
     make it full-width so it is an easy, obvious tap. */
  .study-mockcard__start {
    align-self: stretch;
    width: 100%;
    justify-content: center;
  }

  /* Section-card threshold pill: the head already stacks; let a long pill wrap. */
  .study-guide__threshold,
  .study-section__badge,
  .study-mockrow__pill,
  .study-mockrow__chip {
    white-space: normal;
  }

  /* Error-log "Load more" button: full-width so it is a clear tap target. */
  .study-errorlog__more .btn {
    width: 100%;
    justify-content: center;
  }

  /* Progress + guide footer cross-links: stack into a centered column so the
     middot separators do not crowd two links onto one tight line. */
  .study-progress__footer {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .study-progress__footer span[aria-hidden] {
    display: none;
  }

  /* Guide footer bar: stack the back-link over the log-out button, full width. */
  .study-guide__footerbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  /* Mock runner question-card top row: keep the section tag and flag from
     colliding; allow the flag to drop under the tag on a very narrow card. */
  .study-mockrunner__cardtop {
    gap: 0.5rem;
  }

  /* Result verdict banner: badge over text reads better than a cramped row. */
  .study-result__verdict {
    gap: 0.5rem;
  }
}

/* --------------------------------------------------------------------------
   7. SMALL-PHONE TIER (<=360px) — the densest screens
   The mock grid is already handled at <=400px (minmax 32px). Add a 360px guard
   that tightens page chrome and the mockbar so a 320-360px screen has no
   horizontal scroll and the timer chrome stays compact.
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  .study-page .container {
    padding: 0 0.625rem;
  }

  /* Tiles, mock cards and tool blocks: trim inner padding so content keeps a
     comfortable line length at 320px without the box itself overflowing. */
  .study-tile,
  .study-mockcard,
  .study-tools__block,
  .study-review__item,
  .study-errorlog__item,
  .study-mockrow {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }

  /* Mock sticky bar: at 320px the timer value + label must not crowd the submit
     (already full-width stacked at <=600). Tighten the bar padding only. */
  .study-mockbar {
    padding: 0.7rem;
  }
  .study-mockbar__timer {
    width: 100%;
  }

  /* Mock grid: hold a 30px floor so a 100-cell paper still fits ~7 columns at
     320px with no sideways scroll. Still a finger-sized navigator cell. */
  .study-mockgrid {
    grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
    gap: 0.28rem;
  }
  .study-mockgrid__cell {
    min-height: 30px;
    font-size: 0.75rem;
  }

  /* Confidence dots: 5 across must fit. Shrink a touch more and keep the row
     spread edge-to-edge (the <=600 rule already makes the scale full-width). */
  .study-confrow__dot {
    width: 34px;
    min-height: 34px;
    font-size: 0.8rem;
  }

  /* Headings: final clamp so nothing is oversized on the smallest screens. */
  .study-dash__greeting {
    font-size: 1.25rem;
  }
  .study-practice__title,
  .study-mocks__title,
  .study-result__title,
  .study-progress__title,
  .study-review-run__title {
    font-size: 1.3rem;
  }
  .study-guide__title {
    font-size: 1.4rem;
  }
  .study-guide__h2 {
    font-size: 1.2rem;
  }
}