:root {
  /* Brand chrome (forest/teal green) - navbar accents, hero band, bottom CTA band. Deliberately
     separate from --mth-primary, which is the CTA/action color - the old palette conflated the two
     (brand chrome and buttons were both "primary"), which the rebrand splits apart. */
  --mth-brand: #003f3a;
  --mth-brand-light: #005b52;
  --mth-brand-gradient:
    radial-gradient(circle at 80% 10%, rgba(230, 184, 76, 0.28), transparent 30%),
    linear-gradient(115deg, #003f3a 0%, #00544c 55%, #005b52 100%);

  /* CTA / action color (coral orange). Every existing .btn-primary usage across the app inherits
     this automatically. */
  --mth-primary: #ff6b4a;
  --mth-primary-strong: #e0553a;
  --mth-primary-light: #ff8a65;

  /* Button-only override color (amber orange) - deliberately separate from --mth-primary above,
     which still drives non-button chrome (links, stat tiles, icon circles, preview ribbons) that
     must keep the original coral. Only .btn-primary/.btn-outline-primary use this. */
  --mth-btn-primary: #fcab15;
  --mth-btn-primary-strong: #ca8911;
  --mth-btn-primary-light: #fdc050;

  /* Secondary brand accent (forest green) - feature-grid icon variant, "featured" card tint. */
  --mth-secondary: #1f6a57;

  /* Gold/mustard accent - eyebrows, underline flourishes, icon circles, wordmark accent. Deliberately
     NOT used for .btn-warning/.alert-warning/text-warning - those stay on Bootstrap's stock amber so
     a real warning never reads as decorative brand gold (see .btn-warning below). */
  --mth-accent: #e6b84c;
  --mth-accent-light: #f2c65d;
  --mth-accent-strong: #b9932f;

  --mth-success: #2ead62;

  /* Button-only override color (deep teal green) - deliberately separate from --mth-success above,
     which still drives non-button chrome (stat tiles, rings, badges) that must keep the original
     bright green. Only .btn-success uses this. */
  --mth-btn-success: #1a524f;
  --mth-info: #005b52;
  --mth-danger: #c4453c;

  /* One-off illustrative color for the "Detailed Analytics" feature-grid icon circle only - the
     app has no other blue in its palette (the pre-rebrand primary blue was fully replaced by the
     coral CTA color), so this isn't a reusable brand token, just a spot color for that one icon. */
  --mth-chart-blue: #3f7dd1;

  --mth-surface: #faf8f4;
  --mth-surface-soft: #fffaf1;
  --mth-surface-soft-2: #f3ece0;
  --mth-surface-cream: #f5f1ea;
  --mth-text: #1f2a2a;
  --mth-text-muted: #6b6459;
  --mth-border: #e6ddcc;
  --mth-shadow-soft: 0 10px 24px rgba(31, 42, 42, 0.08);
  --mth-shadow-lift: 0 16px 36px rgba(20, 30, 25, 0.16);
  --mth-radius-sm: 12px;
  --mth-radius-md: 16px;
  --mth-radius-lg: 20px;
}

html {
  font-size: 16px;
  position: relative;
  min-height: 100%;
}

body {
  font-family: "Source Sans 3", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--mth-text);
  background: var(--mth-surface-cream);
  min-height: 100vh;
  margin: 0;
  /* Required by the full-bleed hero/CTA-band technique (100vw + negative margin breakout) used on
     Home/About/MeetStudyBuddy - without this, that breakout introduces a horizontal scrollbar. */
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
  font-family: "Nunito", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  letter-spacing: 0.01em;
}

h1,
.h1 {
  font-size: clamp(2.05rem, 3vw, 2.5rem);
  line-height: 1.2;
}

h2,
.h2 {
  font-size: clamp(1.65rem, 2.2vw, 2rem);
  line-height: 1.25;
}

h3,
.h3,
.display-4 {
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  line-height: 1.3;
}

a {
  color: var(--mth-primary);
}

a:hover {
  color: var(--mth-primary-strong);
}

/* Deliberately no position/z-index here (there was one - "position: relative; z-index: 1;" - it's
   what caused the referral offer modal to be undismissable: it made .container its own stacking
   context, trapping every Bootstrap modal declared inside it - including .modal's z-index:1055 -
   below the .modal-backdrop that Bootstrap JS appends as a *sibling* directly under <body> at
   z-index:1050. A descendant's z-index can never win against an ancestor-level stacking context
   boundary, so the backdrop always painted on top and silently absorbed every click meant for the
   dialog underneath it. Nothing in the app relies on .container/.container-fluid establishing their
   own stacking context, so removing it is a straight fix, not a trade-off.) */

main.pb-3 {
  padding-bottom: 2.5rem;
}

/* No bottom margin - the nav sits flush against whatever follows (the hero band on marketing
   pages, same dark green) rather than leaving a gap of cream page background between them. */
.navbar {
  border: 0;
  margin-bottom: 0 !important;
  box-shadow: var(--mth-shadow-soft);
}

/* Nav carries the same brand-green as the hero it sits directly above, so the two read as one
   continuous band rather than a separate white bar - matches the target marketing redesign.
   Bootstrap's navbar-dark class (kept for its light-on-dark toggler icon/border defaults, which
   are correct again now the nav is dark) already needs no icon/border override here. */
.navbar.bg-primary,
.navbar.navbar-dark {
  background: var(--mth-brand) !important;
}

.navbar .navbar-brand {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* The "Hub" half of the wordmark - see _Layout.cshtml's navbar-brand markup. */
.mth-wordmark-accent {
  color: var(--mth-accent-light);
}

.navbar .nav-link,
.navbar .navbar-text {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92) !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
  color: var(--mth-accent-light) !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Resources dropdown (Bootstrap's default JS/markup, no custom script needed) - the menu itself
   stays on the light surface palette since it floats over page content, not the dark nav. */
.navbar .dropdown-menu {
  border: 1px solid var(--mth-border);
  border-radius: var(--mth-radius-sm);
  box-shadow: var(--mth-shadow-lift);
  padding: 0.4rem;
  margin-top: 0.5rem;
}

.navbar .dropdown-item {
  border-radius: var(--mth-radius-sm);
  font-weight: 600;
  color: var(--mth-text);
  padding: 0.55rem 0.9rem;
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
  background: var(--mth-surface-soft-2);
  color: var(--mth-brand);
}

.card {
  border: 1px solid var(--mth-border);
  border-radius: var(--mth-radius-md);
  box-shadow: var(--mth-shadow-soft);
  background: var(--mth-surface);
}

.card-header {
  background: linear-gradient(180deg, #ffffff 0%, var(--mth-surface-soft) 100%);
  border-bottom: 1px solid var(--mth-border);
  border-top-left-radius: var(--mth-radius-md) !important;
  border-top-right-radius: var(--mth-radius-md) !important;
}

.btn {
  border-radius: var(--mth-radius-sm);
  min-height: 44px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.btn-lg {
  min-height: 50px;
}

/* Bootstrap ships no purple utility - needed for the "Shape and Space" topic icon, shared between
   the Exam/Start topic picker and the Kids Dashboard's Next Challenge cards (CustomExamTopics.GetTopicIconClass). */
.text-purple {
  color: #6f42c1 !important;
}

.btn-primary {
  color: #fff;
  background: linear-gradient(180deg, var(--mth-btn-primary-light) 0%, var(--mth-btn-primary) 100%);
  border: 1px solid var(--mth-btn-primary-strong);
  box-shadow: 0 8px 18px rgba(252, 171, 21, 0.28);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  color: #fff;
  background: linear-gradient(180deg, var(--mth-btn-primary) 0%, var(--mth-btn-primary-strong) 100%);
  border-color: #a46f0e;
}

.btn-outline-primary {
  border-color: var(--mth-btn-primary);
  color: var(--mth-btn-primary-strong);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background: var(--mth-btn-primary);
  color: #fff;
  border-color: var(--mth-btn-primary);
}

/* The app's three button types, kept deliberately distinct so hierarchy stays readable:
   1. .btn-primary   - solid coral. The one CTA on any given screen ("Go to Dashboard").
   2. .btn-outline-light - light outline, transparent fill. Secondary action on a dark/colored
      surface (hero bands, the navbar, the CTA band) - "Start Exam" sitting next to a solid CTA.
   3. .btn-outline-secondary - muted outline on a light/cream surface. Everywhere else a button
      isn't the primary action on the page ("Exam History", "Contact Us", filter toggles). */
.btn-outline-light {
  border-width: 2px;
  color: #fff;
}

.btn-outline-light:hover,
.btn-outline-light:focus {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: #fff;
}

.btn-outline-secondary {
  color: var(--mth-text-muted);
  border-color: var(--mth-border);
  background: var(--mth-surface);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  color: var(--mth-text);
  background: var(--mth-surface-soft-2);
  border-color: var(--mth-text-muted);
}

.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
  color: var(--mth-text-muted);
  border-color: var(--mth-border);
  background: var(--mth-surface);
  opacity: 0.55;
}

.btn-success {
  background: linear-gradient(180deg, #537d7b 0%, var(--mth-btn-success) 100%);
  border-color: #15423f;
}

/* Deliberately NOT derived from --mth-accent (brand gold) - a real warning (e.g. the exam
   refresh-guard banner, "Upgrade Now" CTAs) must stay visually distinct from decorative brand
   gold, or it stops reading as an alert. Stock Bootstrap warning-amber, unlinked from the token
   overhaul on purpose. */
.btn-warning {
  color: #1f2430;
  background: linear-gradient(180deg, #ffc445 0%, #ffb703 100%);
  border-color: #eba400;
}

.btn-info {
  color: #fff;
  background: linear-gradient(180deg, var(--mth-secondary) 0%, var(--mth-info) 100%);
  border-color: var(--mth-brand);
}

/* Brand coral (--mth-primary) as a button fill - this token otherwise only drives non-button
   chrome (links, stat tiles, icon circles), so this gives the Kids Dashboard a 4th on-brand
   button colour without reaching for .btn-danger/.btn-warning, both reserved for real
   destructive/alert actions elsewhere (Cancel Subscription, the refresh-guard banner). */
.btn-coral {
  color: #fff;
  background: linear-gradient(180deg, var(--mth-primary-light) 0%, var(--mth-primary) 100%);
  border: 1px solid var(--mth-primary-strong);
  box-shadow: 0 8px 18px rgba(255, 107, 74, 0.28);
}

.btn-coral:hover,
.btn-coral:focus,
.btn-coral:active {
  color: #fff;
  background: linear-gradient(180deg, var(--mth-primary) 0%, var(--mth-primary-strong) 100%);
  border-color: var(--mth-primary-strong);
}

/* XP purple as a button fill - matches the purple used for XP everywhere else on the Kids
   Dashboard (.kids-icon-circle-purple, .kids-progress-value-purple, .text-xp), so "Learn with
   StudyBuddy" reads as the same on-brand colour rather than reusing the coral CTA colour. */
.btn-purple {
  color: #fff;
  background: linear-gradient(180deg, #b06ee0 0%, #7b3fc4 100%);
  border: 1px solid #5c2f96;
  box-shadow: 0 8px 18px rgba(123, 63, 196, 0.28);
}

.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active {
  color: #fff;
  background: linear-gradient(180deg, #7b3fc4 0%, #5c2f96 100%);
  border-color: #5c2f96;
}

.form-control,
.form-select {
  border: 1px solid var(--mth-border);
  border-radius: var(--mth-radius-sm);
  padding: 0.7rem 0.85rem;
  min-height: 46px;
}

textarea.form-control {
  min-height: 120px;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus,
.form-select:focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 63, 58, 0.22);
  border-color: var(--mth-brand-light);
}

.alert {
  border: 0;
  border-radius: var(--mth-radius-sm);
  box-shadow: var(--mth-shadow-soft);
}

.badge {
  border-radius: 999px;
  padding: 0.45em 0.75em;
}

.progress {
  border-radius: 999px;
  background-color: var(--mth-surface-soft-2);
}

.progress-bar {
  background: var(--mth-brand);
}

.accordion-item {
  border: 1px solid var(--mth-border);
  border-radius: var(--mth-radius-sm) !important;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.accordion-button {
  font-weight: 700;
}

.accordion-button:not(.collapsed) {
  color: var(--mth-brand);
  background: var(--mth-surface-soft-2);
}

/* Full-bleed breakout: the hero band runs edge to edge against the cream page background,
   regardless of how deep it sits inside Bootstrap's container/row/col grid. margin-left: 50% +
   translateX(-50%) is used instead of the more common `calc(50% - 50vw)` margin trick because it's
   independent of the immediate parent's width. No rounded corners (edge-to-edge can't be rounded)
   and no box-shadow (nothing to lift off of once there's no surrounding cream visible at the
   sides). mth-cta-band is deliberately NOT full-bleed - it's a contained rounded card sitting
   inside the page's normal width, styled further down near .mth-cta-band-inner. */
.hero-section {
  position: relative;
  overflow: hidden;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: 0;
  background: var(--mth-brand-gradient) !important;
  color: #fff;
  /* mth-rise-in animates `transform` (translateY), which would otherwise clobber the full-bleed
     translateX(-50%) centering above for this animation's whole 420ms - see mth-rise-in's own
     comment (same fix already established for .mth-celebration-toast.pop further down this file). */
  animation: mth-rise-in 420ms ease-out;
}

.hero-section .lead {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
}

/* _SectionCurve.cshtml's wave overlay - anchored to whichever brand band (hero-section/mth-cta-band,
   both position: relative) it's placed inside. Sized in px rather than following the SVG's own
   1440x60 viewBox aspect ratio - preserveAspectRatio="none" on the SVG stretches to fill this box
   exactly, so the curve's visual depth is controlled here, not by the markup. */
.mth-section-curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  line-height: 0;
  pointer-events: none;
}

.mth-section-curve svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* For use at the TOP of a section instead of the bottom - see _SectionCurve.cshtml's FlipY param. */
.mth-section-curve-flip {
  bottom: auto;
  top: 0;
  transform: scaleY(-1);
}

@media (max-width: 767.98px) {
  .mth-section-curve {
    height: 24px;
  }
}

/* Three-column hero (Home only) - copy/CTAs, the desk-scene image, and the dashboard-preview card,
   as a plain HTML table. Table cells give each column a predictable, guaranteed top alignment
   (vertical-align: top) without the flex/grid alignment math the previous layout needed - simple
   and robust over clever. About/MeetStudyBuddy stay single-column/centered (no illustration), so
   this only applies where the markup opts in. */
/* Caps the fluid hero container so it doesn't stretch edge-to-edge on very wide screens - wider
   than Bootstrap's default .container (which was too narrow for this 3-column layout), but not
   the full viewport either. */
.mth-hero-container {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

.mth-hero-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 2.5rem 0;
  table-layout: fixed;
  text-align: left;
}

.mth-hero-text-col {
  vertical-align: top;
  width: 34%;
}

.mth-hero-image-col {
  vertical-align: bottom;
  width: 32%;
}

.mth-hero-card-col {
  vertical-align: top;
  width: 34%;
}

@media (max-width: 991.98px) {
  /* Tables don't reflow to a stacked layout on their own - force it explicitly so the three
     columns become three full-width blocks instead of squeezing into a cramped row. */
  .mth-hero-table,
  .mth-hero-table tbody,
  .mth-hero-table tr,
  .mth-hero-text-col,
  .mth-hero-image-col,
  .mth-hero-card-col {
    display: block;
    width: 100%;
  }

  .mth-hero-table {
    border-spacing: 0;
  }

  .mth-hero-text-col {
    text-align: center;
  }

  .mth-hero-image-col,
  .mth-hero-card-col {
    text-align: center;
    margin-top: 1.5rem;
  }
}

.mth-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mth-accent-light);
  margin-bottom: 0.75rem;
}

.mth-heading-accent {
  color: var(--mth-accent);
}

/* Hero headings get their own larger/heavier size instead of sharing the site-wide h1 clamp - this
   is the one place the redesign wants a title that dominates the band it sits in. */
.hero-section h1 {
  font-size: clamp(2.4rem, 4.2vw, 3.4rem);
  font-weight: 800;
  line-height: 1.12;
}

/* Reusable check-circle list - used for the hero's feature bullets and (in a denser row form via
   .mth-trust-row) the "no card required" style trust badges under both hero and CTA-band buttons. */
.mth-checklist {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.mth-checklist li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 600;
  text-align: left;
}

.mth-check-icon {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  background: transparent;
  color: var(--mth-accent-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.mth-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin-top: 1.1rem;
  font-size: 0.85rem;
  opacity: 0.92;
}

@media (max-width: 991.98px) {
  .mth-trust-row {
    justify-content: center;
  }
}

.mth-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.mth-trust-row i {
  color: var(--mth-accent-light);
}

/* wwwroot/images/studybuddy-desk-scene.png - a supplied illustration (StudyBuddy seated behind an
   MTH-branded laptop, a plant, a stack of books), background-removed and cropped to content. */
.mth-hero-desk-scene-img {
  /* Needed for z-index below to take effect - without it the image falls back into normal stacking
     order and .mth-section-curve (painted later in the markup) renders on top of it, cutting off
     the image's lower half (laptop/books) behind the wave. */
  position: relative;
  z-index: 2;
  width: min(640px, 100%);
  height: auto;
  display: block;
  /* Lifts the image clear of the wave curve at the hero's bottom edge, instead of dipping into it. */
  transform: translateY(-1.5rem);
}

@media (max-width: 991.98px) {
  .mth-hero-desk-scene-img {
    margin: 0 auto;
  }
}

/* Mini replica of the real Kids Dashboard card (Dashboard/Index.cshtml) - same .rank-ring/
   .kids-stat-tile classes and gradients, scaled up via .mth-preview-rank-ring/.mth-preview-stat
   below, so the hero shows exactly what a new account's dashboard looks like rather than an
   invented mock. Sits in its own table column (.mth-hero-card-col) - see .mth-hero-table's own
   comment for why the hero uses a table instead of flex/grid positioning. */
.mth-hero-preview-card {
  position: relative;
  /* Clips the demo ribbon's corners to the card's own rounded corner instead of the ribbon's square
     edges poking out past it. */
  overflow: hidden;
  width: 100%;
  background: var(--mth-surface);
  color: var(--mth-text);
  border-radius: var(--mth-radius-md);
  box-shadow: var(--mth-shadow-lift);
  padding: 1.8rem 2rem;
  text-align: left;
}

/* Classic corner-ribbon technique: an oversized bar rotated 45deg and pinned across the top-right
   corner, clipped by the card's own overflow:hidden. Marks this card as sample/illustrative data,
   not a real signed-in user's dashboard (see this card's own top-of-block comment). */
.mth-preview-demo-ribbon {
  position: absolute;
  top: 18px;
  right: -34px;
  width: 140px;
  transform: rotate(45deg);
  background: var(--mth-primary);
  color: #fff;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.3rem 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.mth-preview-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.3rem;
}

.mth-preview-rank-ring {
  width: 68px;
  height: 68px;
}

.mth-preview-rank-ring .rank-ring-inner {
  width: 54px;
  height: 54px;
}

.mth-preview-rank-ring .rank-ring-value {
  font-size: 1.1rem;
}

.mth-preview-rank-ring .rank-ring-label {
  font-size: 0.62rem;
}

.mth-hero-preview-card .mth-preview-title {
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1.2;
}

.mth-preview-subtitle {
  font-size: 1rem;
  color: var(--mth-text-muted);
}

.mth-preview-stat-row {
  display: flex;
  gap: 0.75rem;
}

.mth-hero-preview-card .mth-preview-stat {
  flex: 1;
  min-width: 0;
  padding: 0.9rem 0.5rem;
  /* Overrides .kids-stat-tile's own height:100%, which doesn't stretch reliably as a flex item -
     height:auto here lets align-items:stretch (the flex row's default) equalize every tile in the
     row to match the tallest one instead, regardless of "Fractions" being shorter content than a
     number. Centered so the shorter content sits in the middle of the now-taller tile. */
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mth-hero-preview-card .mth-preview-stat .kids-stat-icon {
  font-size: 1.4rem;
  margin-bottom: 0.25rem;
}

.mth-hero-preview-card .mth-preview-stat .kids-stat-value {
  font-size: 1.6rem;
}

.mth-hero-preview-card .mth-preview-stat .kids-stat-label {
  font-size: 0.8rem;
}

/* "Fractions" etc. (Focus Topic) is a word, not a number - kept smaller than the numeric stats'
   1.6rem above so it doesn't wrap inside the narrow tile. */
.mth-hero-preview-card .mth-preview-stat .kids-stat-value-text {
  font-size: 1.15rem;
}

.mth-preview-stat-row-secondary {
  margin-top: 0.75rem;
}

/* Mini version of Dashboard/Index.cshtml's .kids-recommend-card - same "Suggested Exam" copy and
   intent, simplified to a static highlight since this card is illustrative only, not tied to a
   real signed-in user's actual recommendation. */
.mth-preview-suggested-exam {
  margin-top: 0.9rem;
  padding: 0.9rem 1.1rem;
  border: 2px solid var(--mth-btn-success);
  border-radius: var(--mth-radius-md);
}

.mth-preview-suggested-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--mth-success);
}

.mth-preview-suggested-label i {
  margin-right: 0.3rem;
}

.mth-preview-suggested-title {
  font-weight: 700;
  font-size: 1.05rem;
  margin-top: 0.15rem;
}

.mth-preview-suggested-meta {
  font-size: 0.82rem;
  color: var(--mth-text-muted);
  margin-top: 0.15rem;
}

/* Colored icon circles for the feature grid (Home's 6-card row, and About's flat feature cards for
   visual consistency with the same system). Six modifiers cycle through the palette rather than
   every card sharing one color, matching the target design's mixed-color icon row. */
.mth-icon-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.25rem;
  margin: 0 auto 1rem;
}

.mth-icon-circle--green {
  background: var(--mth-secondary);
}

.mth-icon-circle--blue {
  background: var(--mth-chart-blue);
}

.mth-icon-circle--gold {
  background: var(--mth-accent);
  color: #3a2c05;
}

.mth-icon-circle--orange {
  background: var(--mth-primary);
}

.mth-icon-circle--terracotta {
  background: var(--mth-primary-strong);
}

.mth-icon-circle--forest {
  background: var(--mth-brand);
}

.mth-icon-circle--teal {
  background: var(--mth-brand-light);
}

@media (max-width: 575.98px) {
  /* Mirrors .mth-feature-card--flat's own mobile left-align rule below - the icon shrinks from a
     centered block above the text to an inline circle beside it. */
  .mth-feature-card--flat .mth-icon-circle {
    width: 44px;
    height: 44px;
    font-size: 1rem;
    margin: 0;
    flex: none;
  }
}

.footer {
  position: static;
  width: 100%;
  margin-top: 3rem;
  padding: 1rem 0;
  line-height: 1.55;
  border-top: 1px solid var(--mth-border);
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(2px);
}

.footer .container {
  color: var(--mth-text-muted);
}

/* About page: the two AI-companion cards (StudyBuddy, Parent Advisor) are the product's actual
   differentiator versus a workbook or generic quiz bank, so they get their own visual tier -
   elevated shadow, a tint pulled from the secondary accent, and a small ribbon label - while the
   four supporting features stay flat. Reuses --mth-secondary rather than introducing a new hue. */
.mth-feature-card--featured {
  border-color: rgba(31, 106, 87, 0.3);
  background: linear-gradient(180deg, #ffffff 0%, rgba(31, 106, 87, 0.05) 100%);
  box-shadow: var(--mth-shadow-lift);
}

.mth-feature-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mth-secondary);
  background: rgba(31, 106, 87, 0.12);
  border-radius: 999px;
  padding: 0.25em 0.75em;
}

.mth-feature-card--flat {
  text-align: center;
}

@media (max-width: 575.98px) {
  /* Centred icon-over-text blocks in a single mobile column read as one undifferentiated scroll -
     left-aligning icon + text rows lets the eye track the list the way it already reads any other
     vertical list on a phone. */
  .mth-feature-card--flat {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    text-align: left;
  }
}

/* About page: English/Maths syllabus panels. Each subject gets its own soft-surface card rather
   than a bare wrapped badge list - Bootstrap's .row is flex by default, so the two columns stretch
   to equal height automatically, keeping the panels visually balanced even though Maths lists half
   again as many topics as English. */
.mth-topic-panel {
  height: 100%;
  background: var(--mth-surface-soft);
  border: 1px solid var(--mth-border);
  border-radius: var(--mth-radius-md);
  padding: 1.5rem;
  text-align: center;
}

.mth-topic-panel-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mth-brand);
  margin-bottom: 1rem;
}

.mth-topic-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.mth-topic-tag {
  background: var(--mth-surface-soft-2);
  color: var(--mth-brand);
  border-radius: 999px;
  padding: 0.4em 0.9em;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Mid/end-page conversion band (Home and About) - a contained rounded card, not full-bleed like
   the hero (see .hero-section's own full-bleed comment above), so it reads as a distinct callout
   sitting within the page rather than another edge-to-edge section. */
.mth-cta-band {
  background: var(--mth-brand-gradient);
  color: #fff;
  border-radius: var(--mth-radius-lg);
  box-shadow: var(--mth-shadow-lift);
}

.mth-cta-band-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
}

.mth-cta-band-copy {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.mth-cta-band-icon {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.mth-cta-band-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.65rem;
}

.mth-cta-band-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

@media (max-width: 767.98px) {
  .mth-cta-band-inner,
  .mth-cta-band-copy,
  .mth-cta-band-actions {
    text-align: center;
    justify-content: center;
    align-items: center;
  }

  .mth-cta-band-copy {
    flex-direction: column;
  }
}

/* About page: persistent mobile CTA - the page is long enough on a phone that the primary CTA can
   scroll fully out of reach; this stays pinned once the hero (which has its own CTA) is out of
   view. Desktop already has the CTA visible without scrolling back up, so d-md-none hides it there. */
.mth-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--mth-border);
  box-shadow: 0 -8px 24px rgba(31, 42, 42, 0.12);
  transform: translateY(100%);
  transition: transform 220ms ease-out;
}

.mth-sticky-cta.is-visible {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .mth-sticky-cta {
    transition: none;
  }
}

/* Site-wide cookie consent banner - only rendered at all when Google Analytics is actually
   configured (see _CookieConsentBanner.cshtml), and only shown once until the parent picks
   Accept/Decline (see the localStorage check in that partial's script). z-index sits above
   .mth-sticky-cta (1030) so the two never fight for the same strip on a long mobile page. */
.mth-cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
  background: var(--mth-surface);
  border-top: 1px solid var(--mth-border);
  box-shadow: 0 -8px 24px rgba(31, 42, 42, 0.12);
}

/* Exam mode shell - deliberately plain: flat warm cream, no gradient, no decorative glow, no
   curves/illustrations. The rest of the app gets the full brand treatment; this is the one place
   that stays minimal on purpose, so a student taking a timed test isn't distracted by it. */
body.exam-mode {
  background: var(--mth-surface-cream);
}

.exam-mode .navbar.navbar-light {
  background: #ffffff !important;
}

.exam-mode .navbar .navbar-brand,
.exam-mode .navbar .nav-link {
  color: var(--mth-text) !important;
}

.exam-warning-inline {
  font-size: 0.95rem;
  color: #5f4300;
  padding: 0.25rem 1rem;
}

/* Enhanced exam interface styles */
.passage-container .passage-text {
  line-height: 1.7;
  font-size: 1.05em;
  max-height: 420px;
  overflow-y: auto;
}

/* Moved here from Exam/Take.cshtml's page-local <style> block so Exam/ReviewWizard.cshtml's
   per-question passage offcanvas can share it too, rather than duplicating the rule. */
.passage-text-exact {
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: anywhere;
  line-height: 1.7;
  font-size: 1.05rem;
  color: var(--mth-text);
}

/* Width for any offcanvas showing a reading passage - Take.cshtml's #comprehensionPassageOffcanvas
   is one fixed instance per page and keeps its own ID-selector rule; ReviewWizard.cshtml renders one
   per step (per question), so a shared class is used there instead of per-instance IDs. */
.mth-passage-offcanvas {
  width: min(500px, 100vw);
}

.question-content {
  font-size: 1.1em;
  line-height: 1.55;
}

.markup-instructions {
  border-left: 4px solid var(--mth-info);
}

.free-response-container textarea {
  resize: vertical;
  min-height: 120px;
}

.option-letter.option-n {
  background-color: var(--mth-accent);
  color: var(--mth-text);
  font-weight: 700;
}

.answer-option:hover {
  background-color: var(--mth-surface-soft);
  border-radius: 0.6rem;
  padding: 0.5rem;
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}

/* Exam semantic colors: selected/current answer state uses --mth-brand (not --mth-primary, which
   is the CTA orange) so a selected answer doesn't read as a "buy now" action button. */
.answer-option.selected {
  background-color: rgba(0, 63, 58, 0.06);
  border-left: 4px solid var(--mth-brand);
}

/* Free SEAG Sample Questions page - reveal state after "Check Answer"
   (Views/Home/SampleExam.cshtml). Targets both option shapes it uses: the round letter badge
   (.answer-option .option-letter, for plain/grammar MCQ) and the round letter buttons
   (.horizontal-option .option-letter-label, for Punctuation/Spelling). !important needed on the
   .horizontal-option pair: Take.cshtml's own inline styles (copied verbatim into
   SampleExam.cshtml) already set a higher-specificity `input:checked + .option-letter-label`
   blue-fill rule for the selected answer, which would otherwise win over a correct/incorrect
   answer that also happens to be the one selected. */
.answer-option.sample-q-correct {
  border-color: var(--mth-success, #3f8a60);
}

.answer-option.sample-q-correct .option-letter {
  background: var(--mth-success, #3f8a60);
}

.answer-option.sample-q-incorrect {
  border-color: var(--mth-danger, #b03a3a);
}

.answer-option.sample-q-incorrect .option-letter {
  background: var(--mth-danger, #b03a3a);
}

.horizontal-option.sample-q-correct .option-letter-label {
  background: var(--mth-success, #3f8a60) !important;
  border-color: var(--mth-success, #3f8a60) !important;
  color: #fff !important;
}

.horizontal-option.sample-q-incorrect .option-letter-label {
  background: var(--mth-danger, #b03a3a) !important;
  border-color: var(--mth-danger, #b03a3a) !important;
  color: #fff !important;
}

/* StudyBuddy badge in the sample exam header - genuinely active (per-question "Get a Hint"
   buttons are real, backed by SampleQuestionHints, not a live AI call), so it's branded rather
   than greyed out like a locked feature. */
.exam-studybuddy-badge-active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--mth-brand);
  color: #fff;
  font-size: 0.85rem;
}

/* Reveal state after "Get a Hint" (Views/Home/SampleExam.cshtml) - brand teal, not Bootstrap's
   default alert-info blue, so it reads as "StudyBuddy" rather than a generic notice. */
.sample-hint-text {
  background-color: var(--mth-brand-soft, rgba(0, 63, 58, 0.08));
  border-color: var(--mth-brand, #003f3a);
  color: var(--mth-text);
}

.section-nav {
  border-bottom: 2px solid var(--mth-border);
  margin-bottom: 2rem;
}

.section-nav .nav-link {
  color: var(--mth-text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  font-weight: 600;
}

.section-nav .nav-link.active {
  color: var(--mth-brand);
  border-bottom-color: var(--mth-brand);
}

.section-nav .nav-link:hover {
  border-bottom-color: var(--mth-border);
}

.badge.bg-warning {
  color: #212529;
}

.question-header {
  padding: 1rem 0;
  border-bottom: 1px solid var(--mth-border);
  margin-bottom: 1rem;
}

/* Inline exam page style harmonization */
.exam-container .exam-header,
.exam-container .exam-navigation {
  background: var(--mth-surface-cream) !important;
  border-color: var(--mth-border) !important;
}

.exam-container .question-container,
.exam-container .punctuation-exercise,
.exam-container .comprehension-set-question-block,
.exam-container .section-overview-block {
  border-color: var(--mth-border) !important;
  border-radius: var(--mth-radius-sm) !important;
}

/* Dashboard/Admin metric tiles */
.card.bg-primary,
.card.bg-success,
.card.bg-info,
.card.bg-warning {
  border: 0;
  color: #fff !important;
}

.card.bg-primary {
  background: linear-gradient(140deg, var(--mth-primary-light) 0%, var(--mth-primary) 100%) !important;
}

.card.bg-success {
  background: linear-gradient(140deg, #3ac273 0%, #2ead62 100%) !important;
}

.card.bg-info {
  background: linear-gradient(140deg, var(--mth-secondary) 0%, var(--mth-info) 100%) !important;
}

.card.bg-warning {
  background: linear-gradient(140deg, #ffcb56 0%, #ffb703 100%) !important;
  color: #1f2430 !important;
}

.card.bg-warning .text-white,
.card.bg-warning .h5,
.card.bg-warning .h6,
.card.bg-warning .small {
  color: #1f2430 !important;
}

/* Pricing cards */
.price-circle {
  background: radial-gradient(circle at 30% 20%, #ffffff, #f7f2e6);
  border: 1px solid var(--mth-border);
  border-radius: var(--mth-radius-md);
  padding: 1rem 0.6rem;
}

/* Price figure inside .price-circle - a <p>, not a heading (the plan name above it is the card's
   real h2), styled to match Bootstrap's default h2 size/weight so demoting it didn't change how it looks. */
.price-display {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.2;
}

/* Lists and callouts */
.list-group-item {
  border-color: var(--mth-border);
}

.list-group-item:first-child {
  border-top-left-radius: var(--mth-radius-sm);
  border-top-right-radius: var(--mth-radius-sm);
}

.list-group-item:last-child {
  border-bottom-left-radius: var(--mth-radius-sm);
  border-bottom-right-radius: var(--mth-radius-sm);
}

/* Modal polish */
.modal-content {
  border: 1px solid var(--mth-border);
  border-radius: var(--mth-radius-md);
  box-shadow: var(--mth-shadow-lift);
}

.modal-header,
.modal-footer {
  border-color: var(--mth-border);
}

/* Only caller today is .hero-section, which also needs its full-bleed translateX(-50%) held for
   the whole animation (folded into both steps here) - see .hero-section's own comment above. */
@keyframes mth-rise-in {
  from {
    transform: translateX(-50%) translateY(8px);
    opacity: 0;
  }

  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

@media (max-width: 991.98px) {
  .navbar .navbar-nav .nav-link {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  .hero-section {
    padding: 2.5rem 1rem !important;
  }

  .footer {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }
}

@media (max-width: 767.98px) {
  html {
    font-size: 15px;
  }

  .btn,
  .btn-lg {
    min-height: 46px;
  }

  .card {
    border-radius: 14px;
  }
}

/* Shared Child Learning Plan wizard (Register + Profile Settings) */
.wizard-progress-wrap {
  background: linear-gradient(135deg, #faf8f4 0%, #f2f7f2 100%);
  border: 1px solid var(--mth-border);
  border-radius: 16px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.wizard-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.wizard-step {
  display: none;
}

.wizard-step.active {
  display: block;
}

.choice-grid {
  display: grid;
  gap: 0.75rem;
}

.choice-grid.levels {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Practice Pack tier picker (5/15/30 exams) - stacked on mobile, one row on desktop alongside
   .levels below at the same breakpoint. */
.choice-grid.tiers {
  grid-template-columns: 1fr;
}

.choice-card {
  border: 1px solid var(--mth-border);
  border-radius: 14px;
  padding: 0.85rem;
  background: var(--mth-surface);
  cursor: pointer;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Brand teal, not CTA orange - "currently selected" is a state, not an action button. Same
   selected=brand convention as the exam UI's .answer-option.selected. */
.choice-card.active {
  border-color: var(--mth-brand);
  background: rgba(0, 63, 58, 0.05);
  box-shadow: 0 0 0 2px rgba(0, 63, 58, 0.15);
}

.choice-card .title {
  font-weight: 700;
  color: var(--mth-text);
}

.choice-card .subtitle {
  font-size: 0.85rem;
  color: var(--mth-text-muted);
}

.step-headline {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--mth-text);
  margin-bottom: 0.35rem;
}

.step-sub {
  color: var(--mth-text-muted);
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.recommend-badge {
  display: inline-block;
  background: #e8f7eb;
  color: #1e7a36;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  margin-top: 0.4rem;
}

.preview-card {
  border: 1px solid var(--mth-border);
  border-radius: 14px;
  background: var(--mth-surface-soft);
  padding: 1rem;
}

.preview-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px dashed var(--mth-border);
  padding: 0.45rem 0;
  font-size: 0.93rem;
}

.preview-row:last-child {
  border-bottom: 0;
}

.sticky-cta {
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(4px);
  border-top: 1px solid var(--mth-border);
  padding-top: 0.8rem;
  margin-top: 1rem;
}

/* Pins the StudyBuddy preview + coin balance near the top of the viewport while the Customize
   page's long category list scrolls underneath, so a purchase/equip choice's effect on the avatar
   is always visible without scrolling back up - same pinned-panel idea as .sticky-cta, just at the
   opposite edge. */
.customize-preview-sticky {
  position: sticky;
  top: 0.75rem;
  z-index: 5;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(4px);
  border-radius: var(--mth-radius-md);
  box-shadow: var(--mth-shadow-soft);
  padding: 0.75rem 1rem 0.25rem;
}

.wizard-complete-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--mth-success);
  color: #fff;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.35rem 0.85rem;
  margin-bottom: 0.85rem;
}

.wizard-complete-badge.pop {
  animation: mth-badge-pop 480ms ease-out;
}

@keyframes mth-badge-pop {
  0% {
    transform: scale(0.85);
    opacity: 0;
  }
  60% {
    transform: scale(1.06);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

@media (min-width: 768px) {
  .choice-grid.levels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .choice-grid.tiers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .wizard-complete-badge.pop {
    animation: none;
  }
}

/* Fixed-height wrapper required by Chart.js when responsive:true and
   maintainAspectRatio:false are combined - without a constrained container,
   the canvas and its parent grow into each other on every resize/redraw. */
.chart-container {
  position: relative;
  height: 260px;
  width: 100%;
}

/* Kids Dashboard - deliberately larger, warmer, more colour-forward than the
   Parent Dashboard, since a 9-11 year old is reading it, not an adult. */
.kids-dashboard {
  font-size: 1.05rem;
}

.kids-dashboard h3 {
  font-size: 1.5rem;
}

.kids-level-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--mth-surface-soft-2);
  border: 2px solid var(--mth-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  flex: none;
}

.kids-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
}

.kids-badge-level {
  background: rgba(0, 63, 58, 0.1);
  color: var(--mth-brand);
}

.kids-badge-milestone {
  background: rgba(230, 184, 76, 0.18);
  color: #8a6a24;
}

.kids-badge-today {
  background: rgba(31, 106, 87, 0.12);
  color: var(--mth-secondary);
}

.kids-badge-coins {
  background: rgba(230, 184, 76, 0.2);
  color: #7a5c00;
}

.kids-badge-rank {
  background: rgba(123, 63, 196, 0.14);
  color: #5c2f96;
}

/* Compact companion to .score-ring (Exam/Results.cshtml) - same conic-gradient technique, sized
   to sit next to .kids-level-avatar in the dashboard header instead of taking a full card column. */
.rank-ring {
  --pct: 0;
  --ring-track: #ece4d3;
  --ring-color: #7b3fc4;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--ring-color) calc(var(--pct) * 1%), var(--ring-track) 0);
  flex: none;
  animation: mth-ring-pop 600ms ease-out;
}

.rank-ring-inner {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--mth-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.rank-ring-value {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1;
  color: var(--mth-text);
}

.rank-ring-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--mth-text-muted);
}

.kids-stat-tile {
  border-radius: var(--mth-radius-md);
  padding: 1.1rem 1rem;
  height: 100%;
  color: #fff;
  text-align: center;
}

.kids-stat-icon {
  font-size: 1.3rem;
  opacity: 0.9;
  margin-bottom: 0.35rem;
  display: block;
}

.kids-stat-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.9;
}

.kids-stat-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
}

.kids-stat-value-text {
  font-size: 1.3rem;
}

.kids-stat-primary {
  background: linear-gradient(140deg, var(--mth-primary-light) 0%, var(--mth-primary) 100%);
}

.kids-stat-success {
  background: linear-gradient(140deg, #6f9edd 0%, var(--mth-chart-blue) 100%);
}

.kids-stat-info {
  background: linear-gradient(140deg, var(--mth-secondary) 0%, var(--mth-info) 100%);
}

.kids-stat-gold {
  background: linear-gradient(140deg, var(--mth-accent-light) 0%, var(--mth-accent) 100%);
}

/* Fire/streak gradient - intentionally not tied to --mth-secondary (which is now a green brand
   accent, not the old pink-red); a streak reads as "warm/fire" regardless of brand hue. Gold-to-
   orange keeps it visually distinct from the plain-orange .kids-stat-primary tile next to it. */
.kids-stat-streak {
  background: linear-gradient(140deg, var(--mth-accent-light) 0%, var(--mth-primary) 100%);
}

.kids-stat-purple {
  background: linear-gradient(140deg, #b06ee0 0%, #7b3fc4 100%);
}

/* inline-flex + centered content makes the box height identical whether the element is a <button>
   (Start Full Exam, Challenge Practice, Questions You Missed) or an <a> (Choose Topics) - the two
   tags don't share a default line-height, which otherwise made the link render a touch shorter. */
.kids-start-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  animation: mth-start-btn-pulse 2.4s ease-in-out infinite;
}

.kids-recommend-card {
  border-width: 2px;
  border-color: var(--mth-btn-success) !important;
}

@keyframes mth-start-btn-pulse {
  0%, 100% {
    box-shadow: 0 8px 18px rgba(252, 171, 21, 0.28);
  }
  50% {
    box-shadow: 0 8px 22px rgba(252, 171, 21, 0.48);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kids-start-btn {
    animation: none;
  }
}

/* Exam Results hero score */
.results-hero {
  border: 0;
  animation: mth-results-hero-in 480ms ease-out;
}

.results-hero-good {
  background: linear-gradient(135deg, rgba(46, 173, 98, 0.08) 0%, #ffffff 60%);
}

.results-hero-warn {
  background: linear-gradient(135deg, rgba(230, 184, 76, 0.12) 0%, #ffffff 60%);
}

.results-hero-bad {
  background: linear-gradient(135deg, rgba(196, 69, 60, 0.08) 0%, #ffffff 60%);
}

.score-ring {
  --pct: 0;
  --ring-track: #ece4d3;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: conic-gradient(var(--ring-color) calc(var(--pct) * 1%), var(--ring-track) 0);
  animation: mth-ring-pop 600ms ease-out;
}

.score-ring-good {
  --ring-color: var(--mth-success);
}

.score-ring-warn {
  --ring-color: var(--mth-accent);
}

/* Deliberately --mth-danger, not --mth-secondary - secondary is now a brand green accent, which
   would read as "good" for a "bad score" ring. */
.score-ring-bad {
  --ring-color: var(--mth-danger);
}

.score-ring-inner {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--mth-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.score-ring-value {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  color: var(--mth-text);
}

.score-ring-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mth-text-muted);
  margin-top: 0.2rem;
}

.results-headline {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--mth-text);
}

.results-summary {
  color: var(--mth-text-muted);
  font-size: 1.02rem;
}

.results-mini-stat {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--mth-border);
  border-radius: var(--mth-radius-sm);
  padding: 0.6rem 0.75rem;
  text-align: center;
}

.results-mini-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--mth-text-muted);
}

.results-mini-value {
  font-size: 1.25rem;
  font-weight: 700;
}

@keyframes mth-results-hero-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mth-ring-pop {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .results-hero,
  .score-ring {
    animation: none;
  }
}

/* "With StudyBuddy" checkbox + label + info icon - explicit flex row so the checkbox, label
   text, and icon all sit on the same horizontal baseline as each other and as a sibling button,
   instead of relying on Bootstrap's inline-block form-check-inline sizing. */
.studybuddy-toggle {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.studybuddy-toggle .form-check-input {
  margin-top: 0;
}
.studybuddy-toggle .form-check-label {
  margin-bottom: 0;
  white-space: nowrap;
}
.studybuddy-info-icon {
  line-height: 1;
  text-decoration: none;
}

/* Shared chat transcript styling for the AI copilots (StudyBuddy, Parent Advisor). */
.study-buddy-transcript {
  overflow-y: auto;
  min-height: 200px;
}
.sb-bubble {
  padding: 8px 12px;
  border-radius: 12px;
  margin-bottom: 8px;
  max-width: 90%;
  white-space: pre-wrap;
}
.sb-user {
  background: var(--mth-surface-soft-2);
  margin-left: auto;
  text-align: right;
}
.sb-model {
  background: var(--mth-surface-soft);
}

/* StudyBuddy avatar - the child's gamification character (Phase 4), rendered as a composed SVG
   from the vendored DiceBear "Avataaars" style (AvataaarsSvgComposer) rather than CSS layers. One
   sizing wrapper reused at three sizes (Full/Mini/Tiny - see StudyBuddyAvatarSize) via
   --sb-avatar-size alone; every consumer (onboarding, customize, dashboard header, and later the
   leaderboard) renders the same Views/Shared/_StudyBuddyAvatar.cshtml partial. */
.studybuddy-avatar {
  --sb-avatar-size: 64px;
  display: inline-block;
  vertical-align: middle;
  width: var(--sb-avatar-size);
  height: var(--sb-avatar-size);
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.studybuddy-avatar svg,
.studybuddy-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.studybuddy-avatar-full {
  --sb-avatar-size: 200px;
}

.studybuddy-avatar-mini {
  --sb-avatar-size: 64px;
}

.studybuddy-avatar-tiny {
  --sb-avatar-size: 32px;
}

/* Nav brand mark - sits beside the "MyTransferHub" wordmark in the header. Uses a supplied logo
   image (wwwroot/images/studybuddy-logo-mark.png) that already has its own gold ring baked in as
   pixels, so - unlike the base .studybuddy-avatar - this gets no CSS ring of its own; adding one
   here would double up against the image's existing ring. */
.studybuddy-avatar-brandmark {
  --sb-avatar-size: 38px;
  box-shadow: none;
}

/* Small enough to sit inline with normal nav/heading text without inflating the line height -
   .studybuddy-avatar-tiny (32px) is too tall for that and throws off the whole navbar row's
   vertical alignment, since only the icon-bearing link ends up taller than its plain-text siblings.
   At this size the mascot's pale skin/hair tones lose all detail and blend straight into any
   light background, reading as a plain white blob - so this size gets its own visible ring the
   base avatar doesn't need. */
.studybuddy-avatar-navicon {
  --sb-avatar-size: 22px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.18);
}

/* No outer white card/border/shadow any more - the Kids Dashboard is a plain content block sitting
   directly on the page's cream background, made up of its own individually-white cards (rank,
   progress, achievements, challenge cards etc.) rather than one big white container. */
.kids-dashboard > .card-body {
  position: relative;
  padding-top: 0.75rem;
}

/* Positioning context for the peeking StudyBuddy avatar - it sits absolutely positioned above
   .kids-panel-card (Your Progress), with its lower half hidden behind that card's own white
   background (card-body paints on top of it, in DOM/z-index order) so it looks like it's peeking
   over the top of that card specifically, hands gripping the edge. Links to Customize. */
.kids-progress-wrap {
  position: relative;
  overflow: visible;
  margin-top: 1rem;
}

.kids-progress-wrap > .kids-panel-card {
  position: relative;
  z-index: 1;
  background: #fff;
}

/* Centered on the gap between the speech bubble and rank card above, so it reads as standing
   between the two - tall enough that most of it shows above .kids-panel-card's top edge, with
   just its lower portion (and the hand decorations) hidden behind that card's white background. */
.kids-dashboard-peek {
  position: absolute;
  top: -93px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  display: block;
  line-height: 0;
  transition: margin-top 150ms ease;
}

.kids-dashboard-peek:hover {
  margin-top: -4px;
}

.kids-dashboard-peek-hand {
  position: absolute;
  top: 83px;
  width: 13px;
  height: 18px;
  border-radius: 9px 9px 4px 4px;
  background: #f0c29a;
  box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.08);
}

.kids-dashboard-peek-hand-left {
  left: 3px;
}

.kids-dashboard-peek-hand-right {
  right: 3px;
}

.kids-dashboard-peek .studybuddy-avatar-mini {
  --sb-avatar-size: 110px;
}

/* Triggered from JS (gamification-celebrations.js's confetti burst plays alongside this) when the
   child lands on the dashboard right after finishing an exam. */
.kids-dashboard-peek-celebrate {
  animation: mth-peek-celebrate 900ms ease;
}

/* .kids-dashboard-peek centers itself with translateX(-50%) (see left: 50% above) - every step
   here must keep that same translateX or the animation's own transform value replaces it outright,
   snapping the avatar sideways by half its own width for the animation's duration. */
@keyframes mth-peek-celebrate {
  0% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  20% { transform: translateX(-50%) translateY(-14px) rotate(-8deg); }
  40% { transform: translateX(-50%) translateY(0) rotate(6deg); }
  60% { transform: translateX(-50%) translateY(-8px) rotate(-4deg); }
  80% { transform: translateX(-50%) translateY(0) rotate(2deg); }
  100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
}

/* Kids Dashboard header - "Recent Achievements" needs to sit level with the Rank/Leaderboard
   badges, not just float to the right at whatever height its own (shorter) label naturally lands
   at. A 2-column grid puts the title and the achievements label in row 1 together and both badge
   rows in row 2 together, so they align by grid row regardless of each side's own font metrics. */
.kids-dashboard-heading-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 1.5rem;
  row-gap: 0.4rem;
  flex: 1 1 auto;
  min-width: 0;
}

.kids-dashboard-heading-title {
  grid-column: 1;
  grid-row: 1;
}

.kids-dashboard-heading-badges {
  grid-column: 1;
  grid-row: 2;
}

.kids-dashboard-achievements-label {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  white-space: nowrap;
}

.kids-dashboard-achievements-badges {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
}

/* Mobile: the 2-column grid above needs real side-by-side width to look right. Below ~768px the
   badge row (column 1) wraps across several lines while the achievements column (column 2) stays
   short, so it ends up pinned at the top-right with a large empty gap beneath it. Collapse to a
   plain stacked column in DOM order instead - title, badges, then achievements label/badges - and
   left-align the achievements row (it's right-aligned via Bootstrap's justify-content-end utility
   in the markup, which needs overriding here since a full-width stack looks better left-aligned). */
@media (max-width: 768px) {
  .kids-dashboard-heading-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .kids-dashboard-achievements-label {
    justify-self: unset;
    text-align: left;
  }

  .kids-dashboard-achievements-badges {
    justify-self: unset;
    justify-content: flex-start !important;
  }
}

/* Redesigned Kids Dashboard hero (speech bubble + rank card), quick-links row, Your Progress icon
   circles, Recent Achievements badges, and the Next Challenge / Catch-Up cards. Purely additive -
   the older kids-badge / rank-ring rules above stay untouched since the marketing preview replica
   (site.css ~line 609) still relies on them. */
/* Row-gap stays small (used when the bubble/rank card wrap onto separate rows on narrow screens);
   column-gap is wide enough to leave dedicated room for the peeking avatar to sit between them
   without overlapping either card's content when they're side by side. */
.kids-dashboard-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 7.5rem;
}

.kids-dashboard-speech-bubble {
  position: relative;
  flex: 1 1 200px;
  background: #fff;
  border: 1px solid var(--mth-border);
  border-radius: var(--mth-radius-md);
  padding: 0.85rem 1rem;
}

.kids-dashboard-speech-bubble::after {
  content: "";
  position: absolute;
  top: 18px;
  right: -10px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-right: 1px solid var(--mth-border);
  border-top: 1px solid var(--mth-border);
  transform: rotate(45deg);
}

.kids-dashboard-speech-bubble-label {
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--mth-text-muted);
  margin-bottom: 0.15rem;
}

.kids-dashboard-speech-bubble-text {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--mth-text);
}

.kids-rank-card {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: #fff;
  border: 1px solid var(--mth-border);
  border-radius: var(--mth-radius-md);
  padding: 0.6rem 0.75rem;
}

.kids-rank-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  background: linear-gradient(140deg, #b06ee0 0%, #7b3fc4 100%);
}

.kids-rank-card-body {
  flex: 1 1 auto;
  min-width: 0;
}

.kids-rank-card-title {
  font-weight: 800;
  font-size: 0.9rem;
  color: #5c2f96;
}

.kids-rank-card-number {
  font-size: 1.05rem;
}

.kids-rank-card-subtitle {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--mth-text);
  margin-bottom: 0.25rem;
}

.kids-rank-card-progress-label {
  font-size: 0.7rem;
  color: var(--mth-text-muted);
  margin-bottom: 0.2rem;
}

.kids-rank-progress-track {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: #ece4d3;
  overflow: hidden;
}

.kids-rank-progress-fill {
  --pct: 0;
  height: 100%;
  width: calc(var(--pct) * 1%);
  border-radius: 999px;
  background: linear-gradient(90deg, #b06ee0 0%, #7b3fc4 100%);
  transition: width 400ms ease-out;
}

/* Below ~576px, keep the speech bubble and rank card side by side (rather than letting them wrap
   onto separate rows) by shrinking both cards and the peeking avatar between them - narrower gap
   sized to the smaller avatar, so it still sits centered without overlapping either card. */
@media (max-width: 576px) {
  .kids-dashboard-hero {
    gap: 0.5rem 78px;
  }

  .kids-dashboard-speech-bubble,
  .kids-rank-card {
    flex-basis: 100px;
    padding: 0.5rem 0.55rem;
  }

  .kids-dashboard-speech-bubble-text {
    font-size: 0.82rem;
  }

  .kids-rank-card-icon {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  .kids-rank-card-title,
  .kids-rank-card-subtitle {
    font-size: 0.78rem;
  }

  .kids-rank-card-number {
    font-size: 0.9rem;
  }

  .kids-rank-card-progress-label {
    font-size: 0.62rem;
  }

  .kids-dashboard-peek .studybuddy-avatar-mini {
    --sb-avatar-size: 72px;
  }

  .kids-dashboard-peek {
    top: -58px;
  }

  /* Scaled to match the 72px avatar above (72/110 of the desktop hand's top/size/inset) - without
     this the hands stay sized/positioned for the 110px desktop avatar and end up below the shrunk
     avatar's own bottom edge, i.e. entirely behind .kids-panel-card and invisible. */
  .kids-dashboard-peek-hand {
    top: 54px;
    width: 8px;
    height: 12px;
    border-radius: 6px 6px 3px 3px;
  }

  .kids-dashboard-peek-hand-left {
    left: 2px;
  }

  .kids-dashboard-peek-hand-right {
    right: 2px;
  }
}

/* Light mint tint, matching the site-wide banner's success-green treatment elsewhere on the page. */
.kids-quicklinks-row {
  display: flex;
  border: 1px solid rgba(31, 106, 87, 0.16);
  border-radius: var(--mth-radius-md);
  overflow: hidden;
  background: rgba(31, 106, 87, 0.08);
}

.kids-quicklink {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.65rem 0.75rem;
  border: none;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--mth-brand);
  background: transparent;
  text-decoration: none;
  text-align: left;
}

.kids-quicklink:not(:last-child) {
  border-right: 1px solid rgba(31, 106, 87, 0.16);
}

/* Below ~576px, 4 items squeezed into one row clip their own text (e.g. "All Achievements"
   overflowing past the card edge). Wrap to a 2x2 grid instead, which gives each label enough
   width to wrap onto its own lines cleanly. */
@media (max-width: 576px) {
  .kids-quicklinks-row {
    flex-wrap: wrap;
  }

  .kids-quicklink {
    flex: 1 1 50%;
    border-right: none;
  }

  .kids-quicklink:nth-child(odd) {
    border-right: 1px solid rgba(31, 106, 87, 0.16);
  }
}

.kids-quicklink:hover {
  background: rgba(31, 106, 87, 0.14);
  color: var(--mth-brand);
}

.kids-quicklink-chevron {
  font-size: 0.7rem;
  opacity: 0.6;
}

.kids-section-eyebrow {
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--mth-text-muted);
  margin-bottom: 0.4rem;
}

/* Shared white card shell for the "Your Progress" and "Recent Achievements" panels - label inside
   the card, matching the redesigned mockup rather than a floating label above a row of separate
   colored tiles. Compact padding so the bigger icon circles still read as a tight, dense card. */
.kids-panel-card {
  background: #fff;
  border: 1px solid var(--mth-border);
  border-radius: var(--mth-radius-md);
  padding: 0.65rem 0.75rem;
}

/* Single row at every width (items shrink rather than wrap to a 2x2 grid), with vertical dividers
   between them - shares this exact structure with .kids-achievements-row below so the two panels
   naturally end up the same height. */
.kids-progress-grid {
  display: flex;
}

/* Icon on the left, value+label stacked to its right - lower overall height than an icon-on-top
   layout, which is what lets this card sit flush with the (single-line) Recent Achievements card. */
.kids-progress-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
  padding: 0.3rem 0.4rem;
}

.kids-progress-item:not(:last-child) {
  border-right: 1px solid var(--mth-border);
}

.kids-progress-text {
  min-width: 0;
}

.kids-progress-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--mth-text);
  line-height: 1.2;
  white-space: nowrap;
}

/* Each stat's number matches its icon's color instead of a flat neutral - ties the number visually
   to the badge that explains what it is. */
.kids-progress-value-gold {
  color: var(--mth-accent-strong);
}

.kids-progress-value-orange {
  color: var(--mth-primary-strong);
}

.kids-progress-value-purple {
  color: #5c2f96;
}

.kids-progress-value-coral {
  color: var(--mth-danger);
}

.kids-progress-label {
  font-size: 0.7rem;
  color: var(--mth-text-muted);
}

/* Same size as .kids-achievement-icon-circle below - every icon on the page reads as one
   consistent family regardless of which panel it's in. */
.kids-stat-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff;
  font-size: 1.3rem;
  flex: none;
}

.kids-achievements-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.kids-achievements-badges {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
}

/* "View All Achievements", pipe-separated from the badges rather than styled as a 5th badge
   column - flex:none so it keeps its own natural width instead of being squeezed evenly with
   the 4 badges above. */
.kids-achievements-view-all {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: none;
  padding-left: 0.5rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--mth-brand);
  text-decoration: none;
  white-space: nowrap;
}

.kids-achievements-view-all:hover,
.kids-achievements-view-all:focus {
  color: var(--mth-brand);
  text-decoration: underline;
}

.kids-achievements-view-all-separator {
  color: var(--mth-border);
  font-weight: 400;
}

/* Icon on the left, name to its right (wrapping onto a second line for longer names) - no color
   match here, unlike .kids-progress-value, per explicit direction to leave this text's color alone. */
.kids-achievement-item {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  text-align: left;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem;
}

.kids-achievement-item:not(:last-child) {
  border-right: 1px solid var(--mth-border);
}

/* Below ~576px, 4 items in one row don't leave enough width for icon + number/label without
   clipping. Wrap to a 2x2 grid instead - same fallback as .kids-quicklinks-row above. */
@media (max-width: 576px) {
  .kids-progress-grid,
  .kids-achievements-badges {
    flex-wrap: wrap;
  }

  .kids-achievements-view-all {
    flex: 1 1 100%;
    padding-left: 0;
    justify-content: flex-end;
  }

  .kids-progress-item,
  .kids-achievement-item {
    flex: 1 1 50%;
    border-right: none;
  }

  .kids-progress-item:nth-child(odd),
  .kids-achievement-item:nth-child(odd) {
    border-right: 1px solid var(--mth-border);
  }

}

.kids-achievement-icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #fff;
  flex: none;
}

.kids-icon-circle-gold {
  background: linear-gradient(140deg, var(--mth-accent-light) 0%, var(--mth-accent) 100%);
}

.kids-icon-circle-orange {
  background: linear-gradient(140deg, var(--mth-accent-light) 0%, var(--mth-primary) 100%);
}

.kids-icon-circle-teal {
  background: linear-gradient(140deg, var(--mth-secondary) 0%, var(--mth-info) 100%);
}

.kids-icon-circle-purple {
  background: linear-gradient(140deg, #b06ee0 0%, #7b3fc4 100%);
}

.kids-icon-circle-coral {
  background: linear-gradient(140deg, var(--mth-primary-light) 0%, var(--mth-primary) 100%);
}

/* Not-yet-earned achievements on the "All Achievements" gallery page keep their real palette
   color (via kids-achievements-grid-item-locked below, applied to the same gold/teal/purple/coral
   classes) so they don't wash out against the cream page background - they're just dimmed rather
   than flattened to gray. */

.kids-achievement-label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--mth-text);
  line-height: 1.15;
  min-width: 0;
  flex: 1 1 auto;
}

/* "All Achievements" gallery page - 4 columns at every width, gap-only separation (no visible
   divider lines, unlike the dashboard's compact panels). */
.kids-achievements-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem 1rem;
}

.kids-achievements-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}

.kids-achievements-grid-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  color: #fff;
  flex: none;
}

.kids-achievements-grid-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--mth-text);
  line-height: 1.2;
}

.kids-achievements-grid-item-locked .kids-achievements-grid-icon {
  opacity: 0.4;
}

.kids-achievements-grid-item-locked .kids-achievements-grid-label {
  color: var(--mth-text-muted);
}

@media (min-width: 576px) {
  .kids-achievements-grid-icon {
    width: 80px;
    height: 80px;
    font-size: 2.1rem;
  }

  .kids-achievements-grid-label {
    font-size: 0.95rem;
  }
}

.kids-card-eyebrow {
  font-size: 0.9rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--mth-btn-success);
  margin-bottom: 0.35rem;
}

/* Coin/XP reward pair on the simplified Next Challenge card - icons only, no "Rewards: Up to..."
   sentence, matching the coin/XP icon colours already used in the Your Progress stat tiles above. */
.kids-challenge-rewards {
  display: flex;
  gap: 1rem;
  font-weight: 700;
}

/* Next Challenge's topic heading and Review Your Last Exam's "X questions to improve" heading -
   smaller than Bootstrap's default h5 so the title column takes up less width, leaving enough
   room for the action button beside it to fit on one line instead of wrapping. */
.kids-challenge-title {
  font-size: 1.05rem;
}

.text-xp {
  color: #7b3fc4;
}

.kids-next-challenge-card,
.kids-catchup-card {
  border-width: 2px;
  border-color: var(--mth-btn-success) !important;
}

/* Shared row layout for both the Next Challenge cards and the Questions You Missed cards below
   them - up to 3 cards side by side on wide screens, stacking to one per row as space runs out.
   Each card keeps its own "mt-3" spacing, so no extra gap is needed here. */
.kids-next-challenge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.kids-next-challenge-row .kids-next-challenge-card {
  flex: 1 1 320px;
  margin-left: 0;
  margin-right: 0;
}

/* Same sizing as .kids-next-challenge-card so both card types line up to the same width when they
   share a row (3 Next Challenge cards above, up to 3 catch-up cards below). */
.kids-next-challenge-row .kids-catchup-card {
  flex: 1 1 320px;
  margin-left: 0;
  margin-right: 0;
}

/* Holds "Questions You Missed" and "Learn with <name>" as a right-aligned, equal-width stack.
   inline-grid (rather than block/flex) sizes the track to its widest child's own content width -
   "Questions You Missed", the longer label - so the shorter "Learn with <name>" (set to w-100)
   stretches to match it instead of staying its own narrower, text-driven width. margin-left:auto
   (rather than the parent using justify-content-between) keeps this pinned to the card's right
   edge even when it wraps onto its own line below the title text on narrow screens - with
   justify-content-between a lone wrapped item falls back to the start (left) instead. */
.kids-catchup-actions {
  display: inline-grid;
  justify-items: stretch;
  gap: 0.5rem;
  margin-left: auto;
}

/* Both buttons and the "With StudyBuddy" checkbox all sit on one row, sized to their own content
   (not stretched to fill a forced share of the row) so there's room for all three together.
   #quickStartExamForm is display:contents - it still submits normally, but stops generating its
   own box, so its button and the toggle become direct flex items of this row alongside the plain
   Start Practice link, instead of being squeezed together inside the form's own narrower column. */
/* Roomier than the base .kids-panel-card padding, which is tuned for compact rows (progress
   stats, achievements) rather than a set of btn-lg quick-start buttons. */
.kids-quickstart-card {
  padding: 1rem 1.1rem;
}

.kids-start-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* Ties the shared StudyBuddy checkbox to the button row above it (rather than floating centered
   in the card's leftover width) - a thin divider plus left alignment reads as "an option for the
   row above", not an unrelated control. */
.kids-quickstart-toggle-row {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--mth-border);
}

.kids-start-row > form {
  display: contents;
}

/* All quick-start-style buttons get the exact same hover treatment (a gentle dim, no colour/gradient
   swap) regardless of which .btn-* variant they use. Without this, Start Full Exam (.btn-success,
   no custom :hover) barely changed, Challenge Practice/Review Your Last Exam (.btn-primary/.btn-coral,
   which each define their own :hover elsewhere in this file for use across the whole app) swapped to
   a visibly different gradient, and Choose Topics (.btn-info, no custom :hover either) fell back to
   Bootstrap's stock, uncustomised info-hover colour - three different-looking hovers on one row.
   Restating each variant's own base background/border here cancels that out. Scoped to the
   quick-start row plus the other cards that intentionally echo one of those 4 button styles
   (Resume Practice/Exam matches Start Full Exam/Choose Topics, Try Again/Learn with StudyBuddy
   matches Review Your Last Exam, Start Practice matches Challenge Practice) - other .btn-primary/
   .btn-coral usage elsewhere in the app keeps its existing hover. */
.kids-start-row .btn-success.kids-start-btn:hover,
.kids-start-row .btn-success.kids-start-btn:focus,
.paused-exam-card .btn-success.kids-start-btn:hover,
.paused-exam-card .btn-success.kids-start-btn:focus {
  background: linear-gradient(180deg, #537d7b 0%, var(--mth-btn-success) 100%);
  border-color: #15423f;
  filter: brightness(0.94);
}

.kids-start-row .btn-primary.kids-start-btn:hover,
.kids-start-row .btn-primary.kids-start-btn:focus,
.kids-next-challenge-card .btn-primary.kids-start-btn:hover,
.kids-next-challenge-card .btn-primary.kids-start-btn:focus {
  background: linear-gradient(180deg, var(--mth-btn-primary-light) 0%, var(--mth-btn-primary) 100%);
  border-color: var(--mth-btn-primary-strong);
  filter: brightness(0.94);
}

.kids-start-row .btn-coral.kids-start-btn:hover,
.kids-start-row .btn-coral.kids-start-btn:focus,
.kids-catchup-card .btn-coral.kids-start-btn:hover,
.kids-catchup-card .btn-coral.kids-start-btn:focus {
  background: linear-gradient(180deg, var(--mth-primary-light) 0%, var(--mth-primary) 100%);
  border-color: var(--mth-primary-strong);
  filter: brightness(0.94);
}

.kids-start-row .btn-info.kids-start-btn:hover,
.kids-start-row .btn-info.kids-start-btn:focus,
.paused-exam-card .btn-info.kids-start-btn:hover,
.paused-exam-card .btn-info.kids-start-btn:focus {
  background: linear-gradient(180deg, var(--mth-secondary) 0%, var(--mth-info) 100%);
  border-color: var(--mth-brand);
  filter: brightness(0.94);
}

/* Review wizard only - a "teacher hat" badge marking StudyBuddy's tutor mode (fully-informed,
   explains the answer) as visually distinct from its in-exam hint-only mode. Deliberately a CSS
   overlay on a wrapper div rather than a change to the composed avatar SVG/shared partial - keeps
   this contextual UI indicator separate from the child's own avatar cosmetic choices. `.studybuddy-avatar`
   itself has `overflow: hidden`, so the badge lives in this sibling wrapper, not inside it. */
.studybuddy-avatar-wrap {
  position: relative;
  display: inline-block;
  flex: none;
}

.studybuddy-hat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mth-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  box-shadow: 0 0 0 2px #fff;
}

/* StudyBuddy showing up around the exam-taking flow (not just Onboarding/Customize/Dashboard).
   Deliberately no *continuous* idle motion on the exam-taking page itself (.exam-studybuddy-badge,
   .study-buddy-header-avatar at rest) - a child sitting a timed mock exam needs to focus on the
   question, not a mascot fidgeting in the corner. Animation is reserved for actual transition
   moments: a section change (a real page load, so the pop-in below just plays naturally), a
   StudyBuddy reply arriving, marking/grading (a genuine wait screen, continuous motion is fine
   there), and the Results celebration. */
.exam-studybuddy-badge {
  animation: mth-ring-pop 500ms ease-out;
}

.study-buddy-header-avatar {
  transition: transform 150ms ease-out;
}

@keyframes sb-thinking-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.study-buddy-header-avatar.is-thinking {
  animation: sb-thinking-pulse 1s ease-in-out infinite;
}

@keyframes sb-reply-bounce {
  0% {
    transform: scale(1) rotate(0deg);
  }
  30% {
    transform: scale(1.2) rotate(-6deg);
  }
  60% {
    transform: scale(0.95) rotate(4deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.study-buddy-header-avatar.just-replied {
  animation: sb-reply-bounce 550ms ease-out;
}

@keyframes sb-marking-bob {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-8px) rotate(-4deg);
  }
  75% {
    transform: translateY(-8px) rotate(4deg);
  }
}

.completion-pending-avatar {
  animation: sb-marking-bob 1.8s ease-in-out infinite;
}

@keyframes sb-celebrate-bounce {
  0% {
    transform: scale(0.8) translateY(0);
    opacity: 0;
  }
  40% {
    transform: scale(1.15) translateY(-10px);
    opacity: 1;
  }
  65% {
    transform: scale(0.95) translateY(2px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

.results-studybuddy-celebrate {
  animation: sb-celebrate-bounce 700ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .exam-studybuddy-badge,
  .study-buddy-header-avatar.is-thinking,
  .study-buddy-header-avatar.just-replied,
  .completion-pending-avatar,
  .results-studybuddy-celebrate {
    animation: none;
  }
}

/* Required by the Avataaars style's "Free for personal and commercial use" licence - see
   wwwroot/data/avataaars-style.json's meta.license.text for the exact wording this echoes. */
.studybuddy-attribution {
  font-size: 0.75rem;
  color: var(--mth-text-muted);
}

/* Lets a <form> wrap a single .choice-grid tile (Customize page's per-tile equip/unequip forms)
   without the form's own box breaking the CSS grid layout - Bootstrap has no display:contents utility. */
.d-contents {
  display: contents;
}

/* Avatar/shop item tiles - built on the existing .choice-card pattern (Register/Practice Pack). */
.avatar-item-tile {
  position: relative;
}

.avatar-item-tile.locked {
  opacity: 0.55;
  cursor: not-allowed;
}

.avatar-item-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin: 0 auto 0.35rem;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.avatar-item-lock-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: #7a5c00;
  background: rgba(230, 184, 76, 0.2);
  border-radius: 999px;
  padding: 0.15rem 0.5rem;
  margin-top: 0.3rem;
}

/* Rarity badge - purely a shop-UI signal (AvatarItem.Tier), no bearing on whether an item can be
   bought. Common items show no badge at all (everyone starts with plenty of those). */
.avatar-item-tier-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 0.1rem 0.45rem;
  margin-top: 0.25rem;
}

.avatar-item-tier-badge.tier-uncommon {
  color: #2e7d32;
  background: rgba(46, 125, 50, 0.15);
}

.avatar-item-tier-badge.tier-rare {
  color: #1565c0;
  background: rgba(21, 101, 192, 0.15);
}

.avatar-item-tier-badge.tier-legendary {
  color: #6a1b9a;
  background: rgba(106, 27, 154, 0.15);
}

/* Phase 5 shop tiles - a purchasable-but-locked item still looks dimmed like any locked tile,
   but regains full opacity and a pointer cursor once the child can actually afford it. */
.shop-item-tile:not(:disabled) {
  opacity: 0.9;
  cursor: pointer;
}

.shop-item-tile:not(:disabled):hover {
  opacity: 1;
  box-shadow: 0 0 0 2px rgba(230, 184, 76, 0.5);
}

/* Phase 6 leaderboard rows - built on the same card-row pattern as .kids-stat-tile/.kids-badge
   rather than a new visual language. */
.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--mth-radius-md);
  background: var(--mth-surface-soft);
}

.leaderboard-row-viewer {
  background: rgba(0, 63, 58, 0.08);
  box-shadow: inset 0 0 0 1px rgba(0, 63, 58, 0.3);
}

.leaderboard-rank {
  width: 28px;
  flex: none;
  text-align: center;
  font-weight: 800;
  color: var(--mth-text-muted);
}

.leaderboard-medal-gold {
  color: #b8860b;
}

.leaderboard-medal-silver {
  color: #8a8a8a;
}

.leaderboard-medal-bronze {
  color: #a05a2c;
}

.leaderboard-name {
  flex: 1 1 auto;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard-stats {
  display: flex;
  gap: 0.4rem;
  flex: none;
}

.leaderboard-viewer-divider {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--mth-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0.9rem 0 0.5rem;
}

/* Phase 8 celebrations (gamification-celebrations.js) - a fixed full-viewport layer that coin/
   confetti particles and toasts are appended into, sitting above everything but never intercepting
   clicks (pointer-events: none). Particles are short-lived DOM nodes removed by the JS once their
   animation ends, not a persistent part of the page. */
.mth-celebration-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000;
  overflow: hidden;
}

.mth-celebration-coin {
  position: fixed;
  color: var(--mth-accent);
  font-size: 1.3rem;
  animation-name: mth-coin-fly;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

@keyframes mth-coin-fly {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot));
    opacity: 0;
  }
}

.mth-celebration-confetti {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  animation-name: mth-confetti-fall;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  will-change: transform, opacity;
}

@keyframes mth-confetti-fall {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 140px)) rotate(var(--rot));
    opacity: 0;
  }
}

.mth-celebration-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: var(--mth-shadow-lift);
  transition: top 300ms ease, opacity 300ms ease;
}

/* The shared .wizard-complete-badge.pop animation (site.css ~line 634, also used by the Register/
   Practice Pack wizards where centering doesn't apply) animates `transform: scale(...)`, which would
   otherwise clobber this toast's own `transform: translateX(-50%)` centering for the animation's
   full 480ms - the toast would sit with its left edge at 50% instead of being centered on it. This
   toast-specific keyframe folds the same translateX(-50%) into every step instead, and (same class-
   count specificity, later in source order) wins the cascade over the shared one without needing
   !important or touching the shared keyframe other callers rely on. */
.mth-celebration-toast.pop {
  animation: mth-celebration-toast-pop 480ms ease-out;
}

@keyframes mth-celebration-toast-pop {
  0% {
    transform: translateX(-50%) scale(0.85);
    opacity: 0;
  }
  60% {
    transform: translateX(-50%) scale(1.06);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mth-celebration-toast.pop {
    animation: none;
  }
}

.mth-celebration-toast-out {
  opacity: 0;
}

.mth-celebration-toast-rank {
  background: var(--mth-accent);
}

.mth-celebration-toast-achievement {
  background: var(--mth-info);
}

@media (prefers-reduced-motion: reduce) {
  .mth-celebration-coin,
  .mth-celebration-confetti {
    display: none;
  }
}

/* ------------------------------------------------------------------------------------------------
   First-visit dashboard welcome + guided tour (dashboard-welcome-tour.js). The greeting stage dims
   the whole screen with .dash-tour-backdrop; the coachmark stage instead dims via the spotlight's
   own huge box-shadow (leaving the highlighted control clear), which is why the two are mutually
   exclusive rather than layered.
   ------------------------------------------------------------------------------------------------ */
body.dash-tour-open {
  overflow: hidden;
}

.dash-tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
}

.dash-tour-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 12, 40, 0.6);
  animation: dash-tour-fade 200ms ease;
}

/* The spotlight: an outlined, glowing rectangle whose oversized box-shadow darkens everything
   outside it, so the targeted control stays fully lit and readable. */
.dash-tour-highlight {
  position: fixed;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(17, 12, 40, 0.6), 0 0 0 3px #fff, 0 0 22px 4px rgba(124, 92, 255, 0.65);
  pointer-events: none;
  transition: top 220ms ease, left 220ms ease, width 220ms ease, height 220ms ease;
}

.dash-tour-bubble {
  position: fixed;
  z-index: 2001;
  width: min(340px, calc(100vw - 28px));
  background: #fff;
  border-radius: 18px;
  padding: 1.25rem 1.25rem 1rem;
  box-shadow: 0 18px 46px rgba(17, 12, 40, 0.35);
  text-align: center;
  animation: dash-tour-pop 220ms ease;
  /* Glide between stops (and its post-scroll settle) instead of jumping. Excludes the centred
     greeting, which uses a translate transform, not top/left animation. */
  transition: top 220ms ease, left 220ms ease;
}

/* Greeting stage - the bubble sits dead centre instead of being pinned to a control. */
.dash-tour-bubble-center {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  width: min(380px, calc(100vw - 28px));
}

/* Mobile coachmark stage - pin the card to the bottom of the screen (JS scrolls the highlighted
   control into the clear space above it) rather than letting a near-full-width card cover its own
   target. */
.dash-tour-bubble-docked {
  top: auto !important;
  left: 14px !important;
  right: 14px;
  bottom: 14px;
  width: auto;
  transform: none;
}

/* Keep the docked card compact so more of the screen above it stays free for the highlighted item. */
@media (max-width: 575.98px) {
  .dash-tour-bubble-docked {
    padding: 1rem 1rem 0.85rem;
  }

  .dash-tour-bubble-docked .dash-tour-avatar {
    width: 64px;
    height: 64px;
    margin-bottom: 0.35rem;
  }
}

.dash-tour-skip {
  position: absolute;
  top: 8px;
  right: 12px;
  border: 0;
  background: transparent;
  color: #8a8a9a;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.dash-tour-skip:hover {
  color: #55556a;
  text-decoration: underline;
}

.dash-tour-avatar {
  margin: 0 auto 0.5rem;
  width: 108px;
  height: 108px;
}

.dash-tour-avatar svg {
  width: 100%;
  height: 100%;
  display: block;
}

.dash-tour-avatar-wave {
  transform-origin: bottom center;
  animation: dash-tour-wave 900ms ease;
}

.dash-tour-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  color: #2a2350;
}

.dash-tour-text {
  font-size: 0.98rem;
  color: #55556a;
  margin: 0 0 1rem;
  line-height: 1.4;
}

.dash-tour-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.dash-tour-progress {
  font-size: 0.8rem;
  color: #9a9ab0;
  font-weight: 600;
}

.dash-tour-next {
  min-width: 92px;
}

/* The greeting/replay entry point lives among the header badges as a plain button. */
#dashboardTourReplay {
  cursor: pointer;
}

@keyframes dash-tour-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dash-tour-pop {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}

/* Centre-stage bubble keeps its translate offset while popping in. */
.dash-tour-bubble-center {
  animation: dash-tour-pop-center 220ms ease;
}

@keyframes dash-tour-pop-center {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.94); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes dash-tour-wave {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-9deg); }
  50% { transform: rotate(7deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

/* Reduced motion: keep the tour usable but drop the movement - no wave, no smooth spotlight glide,
   no pop/fade. */
.dash-tour-reduced .dash-tour-backdrop,
.dash-tour-reduced .dash-tour-bubble,
.dash-tour-reduced.dash-tour-overlay .dash-tour-bubble-center {
  animation: none;
}

.dash-tour-reduced .dash-tour-highlight,
.dash-tour-reduced .dash-tour-bubble {
  transition: none;
}

/* Parent Dashboard header action cards. The two "hero" actions (Study Plan, Ask Parent Advisor)
   are full-width tap targets rather than inline buttons, since this page is mostly used on a
   phone right after opening a push notification/email link - a tall thumb-friendly card reads
   faster there than a row of small buttons. */
.parent-action-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 1rem 1.1rem;
  border-radius: var(--mth-radius-md);
  border: 1px solid transparent;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.parent-action-card-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.15rem;
}

.parent-action-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.parent-action-card-title {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.parent-action-card-subtitle {
  font-size: 0.88rem;
  opacity: 0.85;
}

.parent-action-card-badge {
  flex: 0 0 auto;
  background: var(--mth-accent);
  color: var(--mth-text);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
}

.parent-action-card-chevron {
  flex: 0 0 auto;
  font-size: 1rem;
  opacity: 0.85;
}

.parent-action-card-primary {
  background: var(--mth-brand);
  color: #fff;
  box-shadow: var(--mth-shadow-soft);
}

.parent-action-card-primary .parent-action-card-icon,
.parent-action-card-primary .parent-action-card-chevron {
  color: #fff;
}

.parent-action-card-secondary {
  background: var(--mth-surface-soft-2);
  color: var(--mth-brand);
  border-color: var(--mth-secondary);
}

.parent-action-card-secondary .parent-action-card-icon,
.parent-action-card-secondary .parent-action-card-chevron {
  color: var(--mth-secondary);
}

/* Study Plan is an <a>, so without this the global a:hover rule (var(--mth-primary-strong), a
   coral-red - see line ~113) outranks .parent-action-card-primary's own color on hover/focus and
   the card's text flips red. Pin it to the gold accent instead, matching the "Recommended" badge. */
.parent-action-card-primary:hover,
.parent-action-card-primary:focus-visible {
  color: var(--mth-accent-light);
}

.parent-action-card-primary:hover .parent-action-card-icon,
.parent-action-card-primary:hover .parent-action-card-chevron,
.parent-action-card-primary:focus-visible .parent-action-card-icon,
.parent-action-card-primary:focus-visible .parent-action-card-chevron {
  color: var(--mth-accent-light);
}

/* Smaller supporting actions (exam history, edit profile, manage subscription) - outlined tiles
   rather than the hero cards above, so the two recommended actions stay visually first. */
.parent-action-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  padding: 0.85rem 1rem;
  border-radius: var(--mth-radius-md);
  border: 1px solid var(--mth-border);
  background: var(--mth-surface);
  color: var(--mth-text);
  font-weight: 600;
  text-decoration: none;
}

.parent-action-tile:hover {
  border-color: var(--mth-brand-light);
  color: var(--mth-brand);
  background: var(--mth-surface-soft-2);
  text-decoration: none;
}

.parent-action-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  padding: 0;
  color: var(--mth-brand);
  font-weight: 600;
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .dash-tour-avatar-wave {
    animation: none;
  }
}

/* SEAG Help & Advice (/help-advice) - list + article detail pages. The hero itself reuses the
   site-wide .hero-section/_SectionCurve pattern (see Views/HelpAdvice/Index.cshtml) rather than
   its own styles, so only the card grid/sidebar/article-body rules below are page-specific. */

.help-advice-card {
  background: var(--mth-surface);
  border: 1px solid var(--mth-border);
  border-radius: var(--mth-radius-md);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--mth-shadow-soft);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.help-advice-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--mth-shadow-lift);
}

.help-advice-card-image {
  height: 160px;
  background: var(--mth-brand-gradient, var(--mth-brand));
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 2.5rem;
}

.help-advice-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.help-advice-card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.help-advice-card-body .badge {
  align-self: flex-start;
  background: var(--mth-surface-soft-2);
  color: var(--mth-brand);
  font-weight: 600;
}

.help-advice-card-body h3 {
  font-size: 1.05rem;
  margin: 0.6rem 0 0.4rem;
}

.help-advice-card-body h3 a {
  color: var(--mth-text);
  text-decoration: none;
}

.help-advice-card-body h3 a:hover {
  color: var(--mth-brand);
}

.help-advice-card-body p {
  color: var(--mth-text-muted);
  font-size: 0.92rem;
  flex: 1;
}

.help-advice-sidebar .card {
  border: 1px solid var(--mth-border);
  border-radius: var(--mth-radius-md);
  margin-bottom: 1.25rem;
}

.help-advice-category-list .list-group-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: none;
  border-bottom: 1px solid var(--mth-border);
  color: var(--mth-text);
  padding: 0.65rem 0.25rem;
}

.help-advice-category-list .list-group-item.active {
  background: none;
  color: var(--mth-brand);
  font-weight: 700;
}

.help-advice-popular-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--mth-border);
}

.help-advice-popular-item:last-child {
  border-bottom: none;
}

.help-advice-popular-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--mth-radius-sm);
  background: var(--mth-brand-gradient, var(--mth-brand));
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
}

.help-advice-popular-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.help-advice-cta {
  background: var(--mth-brand);
  color: #fff;
  border-radius: var(--mth-radius-md);
  padding: 1.5rem;
  text-align: left;
}

.help-advice-cta .btn {
  background: var(--mth-btn-primary);
  border-color: var(--mth-btn-primary);
  color: #1f2a2a;
  font-weight: 700;
}

.help-advice-cta .btn:hover {
  background: var(--mth-btn-primary-strong);
  border-color: var(--mth-btn-primary-strong);
}

/* Quill's plain semantic HTML output, rendered on the article detail page. */
.help-advice-article-body h2,
.help-advice-article-body h3 {
  color: var(--mth-brand);
  margin-top: 1.5rem;
}

.help-advice-article-body p {
  line-height: 1.7;
  margin-bottom: 1rem;
}

.help-advice-article-body ul,
.help-advice-article-body ol {
  padding-left: 1.4rem;
  margin-bottom: 1rem;
}

.help-advice-article-body blockquote {
  border-left: 4px solid var(--mth-accent);
  padding-left: 1rem;
  color: var(--mth-text-muted);
  font-style: italic;
}

.help-advice-article-body img {
  max-width: 100%;
  border-radius: var(--mth-radius-md);
  margin: 1rem 0;
}

.help-advice-article-hero-image {
  width: 100%;
  max-height: 340px;
  object-fit: cover;
  border-radius: var(--mth-radius-lg);
  margin-bottom: 1.5rem;
}

.help-advice-article-hero-placeholder {
  width: 100%;
  height: 220px;
  border-radius: var(--mth-radius-lg);
  background: var(--mth-brand-gradient, var(--mth-brand));
  margin-bottom: 1.5rem;
}

@media (max-width: 767.98px) {
  .help-advice-card-image {
    height: 130px;
  }
}