/* PredictMyGrade polish layer: loaded last. Navigation, shared page furniture
   and fixes for layout issues found in the full-app visual audit. */

/* ---------- Accessibility ---------- */
.skip-link {
  position: absolute; left: 1rem; top: -3rem; z-index: 2000;
  padding: .6rem 1rem; border-radius: 10px;
  background: var(--color-brand, #7c3aed); color: #fff; font-weight: 700;
}
.skip-link:focus { top: .75rem; }

/* ---------- Navigation ---------- */
.site-nav__inner { max-width: 1320px; gap: 1rem; grid-template-columns: auto minmax(0, 1fr) auto !important; }
.site-nav__brand { gap: .6rem !important; font-size: 1.1rem !important; white-space: nowrap; }
.site-nav__mark { width: 34px; height: 34px; display: block; flex: none; }
.site-nav__links { flex-wrap: nowrap !important; justify-content: center; gap: .15rem !important; }
.site-nav__link { white-space: nowrap; border-radius: 10px !important; }
.site-nav__actions { gap: .5rem !important; }
.theme-toggle--icon {
  width: 38px; height: 38px; min-height: 38px !important; padding: 0 !important;
  justify-content: center; border-radius: 50% !important; font-size: 1.05rem;
  border: 1px solid var(--color-border) !important;
}
.nav-upgrade { background: linear-gradient(135deg, #f59e0b, #d97706) !important; border-color: transparent !important; color: #1c1206 !important; }
.plan-chip { white-space: nowrap; }

.account-menu { position: relative; }
.account-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem;
  min-height: 38px; padding: .2rem .7rem .2rem .25rem; border-radius: 999px;
  border: 1px solid var(--color-border); background: rgba(124, 58, 237, .1);
  color: var(--color-text); font-weight: 700; font-size: .88rem;
}
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary::after { content: "\25BE"; font-size: .7rem; color: var(--color-text-muted); }
.account-menu__avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #8b5cf6, #5b21b6); color: #fff; font-size: .85rem;
}
.account-menu__name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
.account-menu__panel {
  position: absolute; right: 0; top: calc(100% + .5rem); min-width: 230px; z-index: 1200;
  display: grid; padding: .4rem; border-radius: 14px;
  background: var(--color-surface, #17122c); border: 1px solid var(--color-border);
  box-shadow: 0 18px 40px rgba(4, 3, 12, .45);
}
.account-menu__panel a { padding: .6rem .75rem; border-radius: 9px; color: var(--color-text); font-weight: 600; font-size: .9rem; }
.account-menu__panel a:hover, .account-menu__panel a:focus-visible { background: rgba(124, 58, 237, .14); }
.account-menu__who { margin: 0 0 .3rem; padding: .55rem .75rem .65rem; border-bottom: 1px solid var(--color-divider); display: grid; gap: .1rem; font-size: .88rem; }
.account-menu__who span { color: var(--color-text-muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; }
.theme-light .account-menu__panel { background: #fff; box-shadow: 0 18px 40px rgba(31, 27, 58, .14); }

@media (max-width: 1240px) {
  .nav-ai, .account-menu__name { display: none !important; }
  .account-menu > summary { padding-right: .5rem; }
}
@media (max-width: 1080px) {
  .site-nav__inner { grid-template-columns: minmax(0, 1fr) auto !important; grid-template-areas: none !important; }
  .site-nav__brand-text { display: block !important; }
  .site-nav__links {
    position: absolute; inset: 64px .75rem auto !important; flex-direction: column; align-items: stretch !important;
    display: none; padding: .75rem; border-radius: 1rem; max-height: calc(100vh - 80px); overflow: auto;
    background: var(--color-surface) !important; border: 1px solid var(--color-border);
    box-shadow: 0 16px 36px rgba(4, 3, 10, .45); flex-wrap: nowrap !important;
  }
  .site-nav__links.is-open { display: flex; }
  .site-nav__links li, .site-nav__links .mobile-only { display: block; width: 100%; }
  .site-nav__links .site-nav__link { display: flex; width: 100%; padding: .75rem .9rem !important; }
  .site-nav__actions { display: none !important; }
  .site-nav__toggle { display: inline-flex !important; }
}

/* ---------- Shared page header ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-head h1 { margin: .15rem 0 .35rem; font-size: clamp(1.7rem, 3vw, 2.3rem); }
.page-head p { margin: 0; color: var(--color-text-muted); }
.page-head__actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ---------- Stat tiles ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .9rem; margin-bottom: 1.5rem; }
.stat-tile {
  padding: 1rem 1.1rem; border-radius: var(--pmg-radius, 16px);
  border: 1px solid rgba(167, 139, 250, .14);
  background: linear-gradient(180deg, rgba(27, 20, 51, .92), rgba(18, 16, 38, .96));
}
.theme-light .stat-tile { background: #fff; border-color: rgba(76, 29, 149, .12); }
.stat-tile__label { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.stat-tile__value { display: block; margin-top: .35rem; font-size: 1.65rem; font-weight: 800; color: var(--color-text); letter-spacing: -.02em; }
.stat-tile__meta { display: block; margin-top: .2rem; font-size: .85rem; color: var(--color-text-muted); }
.stat-tile__bar { margin-top: .6rem; height: 6px; border-radius: 999px; background: rgba(148, 163, 184, .18); overflow: hidden; }
.stat-tile__bar > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8b5cf6, #22d3ee); }
.text-empty { color: var(--color-text-muted) !important; }
.theme-light .plan-chip.is-premium { color: #92400e !important; background: #fef3c7 !important; border-color: #fcd34d !important; }
.theme-light .site-nav__toggle { background: #fff !important; color: var(--color-text) !important; border-color: var(--color-border) !important; }

/* ---------- Dashboard ---------- */
.dash-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.25rem; align-items: end;
  padding: clamp(1.25rem, 3vw, 2rem); margin-bottom: 1rem; border-radius: var(--pmg-radius-lg, 22px);
  border: 1px solid rgba(167, 139, 250, .2);
  background: radial-gradient(circle at 100% 0, rgba(139, 92, 246, .28), transparent 55%), linear-gradient(135deg, rgba(91, 33, 182, .22), rgba(15, 11, 26, .85));
}
.theme-light .dash-hero { background: radial-gradient(circle at 100% 0, rgba(139, 92, 246, .18), transparent 55%), linear-gradient(135deg, #ede9fe, #faf9ff); }
.dash-hero h1 { margin: .2rem 0 .4rem; font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.dash-hero__lede { margin: 0 0 1.1rem; color: var(--color-text-soft); font-size: 1.02rem; }
.dash-hero__actions { display: flex; flex-wrap: wrap; gap: .55rem; }
.dash-hero__actions .btn i, .dash-hero__tools .btn i { margin-right: .35rem; }
.dash-hero__tools { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; max-width: 360px; }
.dash-hero__tools .btn { min-height: 34px !important; padding: .4rem .7rem !important; font-size: .8rem !important; }
.dash-hero__tools .live-indicator { width: 100%; justify-content: center; }
.stat-tile__value small { font-size: .55em; color: var(--color-text-muted); font-weight: 700; }
@media (max-width: 860px) {
  .dash-hero { grid-template-columns: 1fr; }
  .dash-hero__tools { justify-content: flex-start; max-width: none; }
  .dash-hero__tools .live-indicator { width: auto; }
}

/* The visible h2 already names each section; keep the label as a scroll anchor only. */
.dashboard-page .section-label { height: 0; margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden; }

.onboarding-cta-card {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 0 0 1.25rem; padding: 1rem 1.25rem; border-radius: var(--pmg-radius, 16px);
  border: 1px dashed rgba(167, 139, 250, .45); background: rgba(124, 58, 237, .08);
}
.onboarding-cta-card .cta-title { margin: 0 0 .2rem; font-weight: 800; color: var(--color-text); }
.onboarding-cta-card .cta-body { margin: 0; color: var(--color-text-muted); font-size: .92rem; }
.onboarding-cta-card .cta-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.inline-form { display: inline; margin: 0; }
.empty-inline { display: grid; gap: .6rem; justify-items: start; padding: .5rem 0; }
.empty-inline p { margin: 0; }

.planner-tables { grid-template-columns: minmax(0, 1fr) !important; }
#futureModulesTable { min-width: 880px; }
#plannedDeadlinesTable { min-width: 640px; }
.planner-table td .planner-input, .planner-table td input, .planner-table td select { min-width: 4.5rem; }
.planner-table td:first-child input { min-width: 12rem; }
.planner-table input[type="date"] { min-width: 9.5rem; }
.energy-bar { height: 8px; margin: .6rem 0; border-radius: 999px; background: rgba(148, 163, 184, .18); overflow: hidden; }
.energy-bar__value { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f59e0b, #22c55e); font-size: 0; transition: width .6s ease; }
.planner-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; margin: .9rem 0; }
.planner-metrics > div { display: grid; gap: .15rem; padding: .65rem .8rem; border-radius: 12px; border: 1px solid var(--color-divider); background: rgba(124, 58, 237, .06); }
.planner-metrics strong { font-size: 1.15rem; color: var(--color-text); }
.summary-list { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .45rem; }
.summary-list li { padding: .55rem .75rem; border-radius: 10px; border: 1px solid var(--color-divider) !important; background: rgba(124, 58, 237, .07) !important; color: var(--color-text) !important; }
.summary-list li.muted { background: transparent !important; border-style: dashed !important; color: var(--color-text-muted) !important; }
.theme-light .table-scroll thead th, .theme-light .planner-table thead th { background: #f3f0ff !important; color: #5b21b6 !important; }
.theme-light .planner-table tbody tr:nth-child(odd), .theme-light .table-scroll tbody tr:nth-child(odd) { background: #faf9ff; }
#futureModulesTable { min-width: 1040px; }
#futureModulesTable td:nth-child(1) { min-width: 15rem; }
#futureModulesTable td:nth-child(4), #futureModulesTable td:nth-child(5), #futureModulesTable td:nth-child(6) { min-width: 8.5rem; }
#futureModulesTable td:nth-child(4) *, #futureModulesTable td:nth-child(5) *, #futureModulesTable td:nth-child(6) * { min-width: 7.5rem; }
#plannedDeadlinesTable td:nth-child(1) { min-width: 13rem; }
#plannedDeadlinesTable td:nth-child(4) { min-width: 10rem; }
.stacked-form .form-grid { display: grid; grid-template-columns: minmax(12rem, 2fr) minmax(9rem, 1fr) minmax(7rem, 1fr); gap: .75rem; align-items: end; margin-bottom: .8rem; }
.stacked-form .form-grid label { display: grid; gap: .3rem; }
@media (max-width: 640px) { .stacked-form .form-grid { grid-template-columns: 1fr; } }
[data-timeline-range] { border-radius: 8px; }
.theme-light .timeline-controls { background: #f3f0ff !important; border-color: var(--color-border) !important; }
.theme-light [data-timeline-range] { color: #5b21b6 !important; background: transparent !important; }
.theme-light [data-timeline-range].active { background: #7c3aed !important; color: #fff !important; }

.module-list { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .45rem; }
.module-list > li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .9rem;
  padding: .65rem .8rem; border-radius: 12px; border: 1px solid var(--color-divider); background: rgba(124, 58, 237, .05);
}
.module-list > li > div:first-child { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.module-list__meta { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; color: var(--color-text-muted); font-size: .88rem; }
.module-list__meta .module-grade { color: var(--color-text); font-weight: 800; }

/* Buttons inside data tables: quiet, compact, outlined. */
.card table .btn, .card table button.btn {
  min-height: 30px !important; padding: .3rem .6rem !important; font-size: .78rem !important;
  background: transparent !important; color: var(--color-brand-strong, #8b5cf6) !important;
  border: 1px solid rgba(139, 92, 246, .35) !important;
}
.card table .btn:hover { background: rgba(124, 58, 237, .1) !important; }
.theme-light .card table .btn { color: #6d28d9 !important; }

/* ---------- What-if simulator form ---------- */
#simForm { display: block !important; }
#simForm label { display: grid; gap: .35rem; }
#simRows .simRow { display: grid; grid-template-columns: minmax(10rem, 2fr) repeat(2, minmax(7rem, 1fr)) auto; gap: .75rem; align-items: end; margin-bottom: .75rem; }
@media (max-width: 640px) { #simRows .simRow { grid-template-columns: 1fr; } }

/* ---------- Compare levels: light theme (page styles are dark-first) ---------- */
.theme-light .compare-levels-page { color: var(--color-text) !important; }
.theme-light .compare-hero, .theme-light .level-card, .theme-light .chart-panel, .theme-light .chart-card,
.theme-light .summary-tile, .theme-light .hero-stat {
  background: #fff !important; color: var(--color-text) !important; border-color: rgba(76, 29, 149, .14) !important;
}
.theme-light .compare-hero { background: linear-gradient(135deg, #ede9fe, #faf9ff) !important; }
.theme-light .compare-levels-page h2, .theme-light .compare-levels-page h3, .theme-light .level-head h3,
.theme-light .hero-stat strong, .theme-light .summary-tile strong, .theme-light .level-average { color: var(--color-text) !important; }
.theme-light .hero-note, .theme-light .level-note, .theme-light .compare-levels-page .muted, .theme-light .hero-stat { color: var(--color-text-muted) !important; }
.theme-light .level-class { color: #5b21b6 !important; border-color: rgba(91, 33, 182, .3) !important; background: #f5f3ff !important; }
.theme-light .compare-levels-page .progress-track { background: #ede9fe !important; }

/* ---------- Bootstrap-style utilities used by a few templates without Bootstrap ---------- */
.d-none { display: none !important; }
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: .5rem; }
.mt-3 { margin-top: 1rem; } .mt-4 { margin-top: 1.5rem; } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 1.5rem; }
.h4 { font-size: 1.35rem; }
.small { font-size: .875rem; }
.text-muted { color: var(--color-text-muted) !important; }
.btn.btn-secondary.btn-secondary.btn-secondary { background: rgba(124, 58, 237, .08) !important; border: 1px solid var(--color-border) !important; color: var(--color-text) !important; }
.btn.btn-outline-danger.btn-outline-danger.btn-outline-danger { background: transparent !important; border: 1px solid rgba(239, 68, 68, .55) !important; color: #ef4444 !important; }
.btn.btn-success.btn-success.btn-success { background: linear-gradient(135deg, #16a34a, #22c55e) !important; border-color: transparent !important; color: #fff !important; }
.btn.btn-warning.btn-warning.btn-warning { background: linear-gradient(135deg, #f59e0b, #d97706) !important; color: #1c1206 !important; border-color: transparent !important; }
.alert-info { background: rgba(59, 130, 246, .1); border-color: rgba(59, 130, 246, .35); }
.alert-success { background: rgba(34, 197, 94, .1); border-color: rgba(34, 197, 94, .4); }
.alert-danger { background: rgba(239, 68, 68, .1); border-color: rgba(239, 68, 68, .4); }
.alert-warning { background: rgba(245, 158, 11, .1); border-color: rgba(245, 158, 11, .4); }
.plan-facts { display: grid; grid-template-columns: max-content 1fr; gap: .45rem 1.25rem; margin: 0 0 1.25rem; font-size: .92rem; }
.plan-facts dt { color: var(--color-text-muted); font-weight: 700; }
.plan-facts dd { margin: 0; color: var(--color-text); }

/* ---------- Level pages: light theme ---------- */
.theme-light .hero-highlight, .theme-light .countdown-card, .theme-light .hero-card, .theme-light .badge-ring {
  background: #fff !important; color: var(--color-text) !important; border-color: rgba(76, 29, 149, .14) !important;
}
.theme-light .hero-highlight *, .theme-light .countdown-card *, .theme-light .hero-card * { color: inherit; }
.theme-light .hero-highlight p, .theme-light .countdown-card .muted, .theme-light .hero-card .muted { color: var(--color-text-muted) !important; }
.comparison-table th { color: #fff !important; }
/* Premium wrappers are layout only once unlocked; don't paint a dark slab behind the page. */
.premium-feature:not(.premium-feature--locked) > .premium-feature__content.level-dashboard { background: transparent !important; border-color: transparent !important; box-shadow: none !important; }
.theme-light .premium-feature__content { background: #fff; border-color: rgba(76, 29, 149, .12); box-shadow: 0 10px 30px rgba(31, 27, 58, .07); }
@media (max-width: 640px) {
  .dash-hero__tools { display: grid; grid-template-columns: 1fr 1fr; }
  .dash-hero__tools .live-indicator { grid-column: 1 / -1; width: 100%; }
}

/* ---------- AI Studio ---------- */
.dashboard-shell { grid-template-columns: minmax(0, 1fr) !important; }
.ai-studio {
  margin: 0 0 2rem; border-radius: var(--pmg-radius-lg, 22px); overflow: hidden;
  border: 1px solid rgba(167, 139, 250, .28);
  background: linear-gradient(180deg, rgba(27, 20, 51, .96), rgba(15, 12, 32, .98));
  box-shadow: 0 24px 60px rgba(4, 3, 12, .35);
}
.theme-light .ai-studio { background: #fff; border-color: rgba(124, 58, 237, .2); box-shadow: 0 18px 44px rgba(76, 29, 149, .1); }
.ai-studio__head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem;
  padding: clamp(1.25rem, 3vw, 1.9rem) clamp(1.25rem, 3vw, 2rem);
  background:
    radial-gradient(circle at 12% 0, rgba(167, 139, 250, .35), transparent 45%),
    radial-gradient(circle at 95% 120%, rgba(34, 211, 238, .22), transparent 45%),
    linear-gradient(135deg, #3b1a7a, #1e1446);
  color: #fff;
}
.ai-studio__head h2 { margin: .25rem 0 .35rem; color: #fff !important; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.ai-studio__head .eyebrow { color: #ddd6fe !important; }
.ai-studio__head .eyebrow i { margin-right: .3rem; }
.ai-studio__lede { margin: 0; color: rgba(237, 233, 254, .85); max-width: 56ch; }
.ai-studio__cta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.ai-studio__cta .btn i { margin-right: .35rem; }
.ai-studio__cta #aiQuickTryBtn { background: #fff !important; color: #4c1d95 !important; border-color: transparent !important; }
.ai-studio__chip {
  display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .75rem; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2); font-size: .82rem; font-weight: 700;
}
.ai-studio__pulse { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: aiPulse 2s infinite; }
@keyframes aiPulse { 70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }
@media (prefers-reduced-motion: reduce) { .ai-studio__pulse { animation: none; } }

.ai-studio__tabs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem;
  padding: .75rem clamp(.75rem, 2vw, 1.25rem); border-bottom: 1px solid var(--color-divider);
}
.ai-tab {
  display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: 14px; cursor: pointer; text-align: left;
  border: 1px solid transparent; background: transparent; color: var(--color-text); font: inherit;
  transition: background-color .18s ease, border-color .18s ease;
}
.ai-tab:hover { background: rgba(124, 58, 237, .08); }
.ai-tab.is-active { background: rgba(124, 58, 237, .16); border-color: rgba(167, 139, 250, .45); }
.theme-light .ai-tab.is-active { background: #f3f0ff; }
.ai-tab__icon {
  flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: rgba(124, 58, 237, .14); color: #a78bfa; font-size: 1rem;
}
.ai-tab.is-active .ai-tab__icon { background: linear-gradient(135deg, #8b5cf6, #6d28d9); color: #fff; }
.ai-tab__text { display: grid; min-width: 0; }
.ai-tab__text strong { font-size: .95rem; display: flex; align-items: center; gap: .4rem; }
.ai-tab__text small { color: var(--color-text-muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-tab__lock { font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .1rem .4rem; border-radius: 999px; background: rgba(245, 158, 11, .18); color: #f59e0b; }
.theme-light .ai-tab__lock { color: #92400e; background: #fef3c7; }

.ai-panel { padding: clamp(1rem, 2.5vw, 1.5rem); }
.ai-panel .card { margin: 0 !important; height: 100%; }
.ai-panel .premium-feature { height: 100%; }
.ai-panel__more { margin: 1rem 0 0; font-weight: 700; }
.ai-panel__more i { margin-left: .3rem; }

.ai-today { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.ai-today__meters, .ai-today__side { display: grid; gap: 1rem; align-content: start; }
.ai-today__more { display: none; }
/* Phones open with the mentor's advice only; the rest is one tap away (see dashboard-sections.js). */
@media (max-width: 700px) {
  .ai-today.is-compact .ai-today__more { display: flex; justify-content: center; }
  .ai-today.is-compact:not(.is-expanded) > .ai-today__meters,
  .ai-today.is-compact:not(.is-expanded) > .ai-today__side { display: none; }
}
.ai-today__lead .card { background: linear-gradient(160deg, rgba(124, 58, 237, .22), rgba(27, 20, 51, .9)) !important; border-color: rgba(167, 139, 250, .35) !important; }
.theme-light .ai-today__lead .card { background: linear-gradient(160deg, #ede9fe, #fff) !important; }
.ai-today__lead .ai-text { font-size: 1.08rem; line-height: 1.6; color: var(--color-text); }
#aiMoodRing { width: 96px !important; height: 96px !important; margin-top: .25rem !important; }

.ai-ask { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 1rem; align-items: start; }
.ai-ask__prompts { display: grid; gap: .5rem; padding: 1rem; border-radius: var(--pmg-radius, 16px); border: 1px dashed rgba(167, 139, 250, .4); background: rgba(124, 58, 237, .05); }
.ai-ask__prompts h3 { margin: 0 0 .2rem; font-size: .95rem; }
.ai-prompt {
  text-align: left; padding: .6rem .75rem; border-radius: 10px; cursor: pointer; font: inherit; font-size: .88rem;
  border: 1px solid var(--color-border); background: var(--color-surface, rgba(255, 255, 255, .03)); color: var(--color-text);
}
.ai-prompt:hover { border-color: rgba(167, 139, 250, .6); background: rgba(124, 58, 237, .1); }
.assistant-log { max-height: 360px; overflow: auto; }

.ai-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
#ai-panel-reports .section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem; }

@media (max-width: 1100px) {
  .ai-today { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ai-today__lead { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .ai-studio__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-ask, .ai-grid-2, #ai-panel-reports .section-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (max-width: 560px) {
  .ai-today { grid-template-columns: minmax(0, 1fr); }
  .ai-tab { padding: .55rem; gap: .5rem; }
  .ai-tab__icon { width: 32px; height: 32px; }
  .ai-tab__text small { display: none; }
  .ai-tab__text strong { flex-wrap: wrap; gap: .1rem .4rem; }
}
.ai-studio { padding: 0 !important; }
.ai-followups { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--color-divider); }
.ai-followups .muted { width: 100%; }
.ai-prompt--chip { border-radius: 999px; padding: .45rem .8rem; font-size: .82rem; }
#ai-panel-ask .assistant-footer { display: grid; gap: .6rem; margin-top: .75rem; }
#ai-panel-ask .assistant-input { width: 100%; min-height: 84px; }
#ai-panel-ask .assistant-footer .assistant-actions { display: flex; justify-content: flex-end; gap: .5rem; }
#ai-panel-ask .assistant-footer .assistant-actions .btn { width: auto !important; flex: none; }
#ai-panel-ask .assistant-controls { display: flex; flex-wrap: wrap; align-items: end; gap: .6rem; }
#ai-panel-ask .assistant-persona-select { display: grid; gap: .3rem; min-width: 14rem; }
#mlForm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; align-items: end; margin: .5rem 0 .75rem; }
#mlForm label { display: grid; gap: .3rem; }
#mlForm .btn { grid-column: 1 / -1; justify-self: start; }
#mlResult { font-size: 1.05rem; color: var(--color-text); }
.ai-panel .flex-between .btn { width: auto !important; }
#assistantChatLog .assistant-chat-line, #assistantMessage { white-space: pre-line; }
.hp-field { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.support-form { max-width: 720px; }
.support-form form { display: grid; gap: 1rem; }
.support-form label { display: grid; gap: .35rem; }
.support-form .btn { justify-self: start; }
html { scroll-padding-top: 84px; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Degree weighting (Settings) */
.settings-weighting { display: grid; gap: .8rem; }
.weighting-custom { border: 1px solid var(--color-divider); border-radius: 12px; padding: .8rem 1rem; margin: 0; }
.weighting-custom[hidden] { display: none; }
.weighting-custom__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-top: .5rem; }
.weighting-custom__grid label { display: grid; gap: .3rem; font-size: .88rem; color: var(--color-text-soft); }
@media (max-width: 560px) { .weighting-custom__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat-tile__hint { display: block; margin-top: .35rem; font-size: .78rem; color: var(--color-text-muted); text-decoration: underline dotted; }
.notice-inline { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; margin: 0 0 1rem; padding: .7rem 1rem; border-radius: 12px; border: 1px solid rgba(167, 139, 250, .35); background: rgba(124, 58, 237, .08); color: var(--color-text-soft); font-size: .92rem; }
.notice-inline a { font-weight: 700; }
.stat-tile__explain { margin-top: .35rem; font-size: .78rem; color: var(--color-text-muted); }
.stat-tile__explain summary { cursor: pointer; text-decoration: underline dotted; list-style: none; }
.stat-tile__explain summary::-webkit-details-marker { display: none; }
.stat-tile__explain p { margin: .35rem 0 0; line-height: 1.45; color: var(--color-text-soft); }
.forecast-source { margin: .4rem 0 .8rem; line-height: 1.5; }

/* Collapsible dashboard sections */
.dash-group__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; margin-top: .4rem; min-width: 0; }
.dash-group__body > * { min-width: 0; max-width: 100%; }
.dash-group__body[hidden] { display: none; }
.dash-group__title { margin-bottom: 0; }
.dash-group__toggle { all: unset; box-sizing: border-box; display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; padding: .35rem .2rem; border-radius: 10px; font: inherit; color: inherit; }
.dash-group__toggle:hover { color: var(--color-text); }
.dash-group__toggle:focus-visible { outline: 2px solid var(--color-brand-soft, #a78bfa); outline-offset: 3px; }
.dash-group__chevron { font-size: .8em; color: var(--color-text-muted); transition: transform .2s ease; }
.dash-group__title.is-collapsed .dash-group__chevron { transform: rotate(-90deg); }
.dash-group__title.is-collapsed { opacity: .85; }
.dash-group__all { margin-left: auto; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .dash-group__chevron { transition: none; } }
/* Phones: closed sections sit close together like a list instead of a screen apart. */
@media (max-width: 700px) {
  .dashboard-main.stacked { row-gap: .35rem; }
  .dashboard-main.stacked > .section-divider { display: none; }
  .dashboard-main.stacked > .dash-group__title { border-bottom: 1px solid var(--color-divider); padding-bottom: .35rem; }
}

/* Waitlist */
.waitlist-form { max-width: 560px; }
.waitlist-form form { display: grid; gap: 1rem; }
.waitlist-form label { display: grid; gap: .35rem; font-weight: 600; }
.field-error { color: #f87171; font-size: .85rem; font-weight: 500; }
.waitlist-share { max-width: 560px; display: grid; gap: .8rem; margin-bottom: 1.2rem; }
.waitlist-share h2 { margin: .4rem 0 0; font-size: 1.2rem; }
.waitlist-share p { margin: 0; }
.waitlist-position { display: grid; gap: .15rem; }
.waitlist-position__label { font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted); }
.waitlist-position__value { font-size: 2.6rem; line-height: 1.1; color: var(--color-text); }
.waitlist-share__row { display: flex; gap: .5rem; }
.waitlist-share__row input { flex: 1; min-width: 0; }
.waitlist-share__apps { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Dashboard quick start (new users) */
.quick-start { display: grid; gap: 1rem; border-color: rgba(167, 139, 250, .45); background: linear-gradient(160deg, rgba(124, 58, 237, .14), transparent 60%), var(--color-card); }
.quick-start h2 { margin: .1rem 0 .4rem; font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
.quick-start p { margin: 0; }
.quick-start__form { display: grid; gap: .9rem; }
.quick-start__rows { display: grid; gap: .5rem; }
.quick-start__labels, .quick-start__row { display: grid; grid-template-columns: minmax(0, 2.4fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, .9fr); gap: .5rem; }
.quick-start__labels span { font-size: .78rem; font-weight: 700; color: var(--color-text-muted); }
.quick-start__row label { display: block; min-width: 0; }
.quick-start__cap { display: none; }
.quick-start__row input, .quick-start__row select { width: 100%; }
.quick-start__check { display: flex; gap: .5rem; align-items: center; font-size: .92rem; color: var(--color-text-soft); }
.quick-start__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 640px) {
  .quick-start__labels { display: none; }
  .quick-start__cap { display: block !important; font-size: .72rem; font-weight: 700; color: var(--color-text-muted); margin-bottom: .2rem; }
  .quick-start__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); padding-bottom: .6rem; border-bottom: 1px solid var(--color-divider); }
  .quick-start__row label:first-child { grid-column: 1 / -1; }
}

/* Phone dashboard: tighter header, two-up figures, tools behind one button */
.dash-hero__more { display: none !important; }
@media (max-width: 700px) {
  .dash-hero__more:not([hidden]) { display: inline-flex !important; justify-self: start; }
  .dash-hero__more:not([hidden]) + .dash-hero__tools:not(.is-open) { display: none; }
  .dash-hero__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .dash-hero__actions .btn { justify-content: center; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .stat-tile { padding: .85rem .9rem; }
  .stat-tile__value { font-size: 1.55rem; }
  .stat-tile__meta { font-size: .78rem; }
}

/* ---------- Accessibility: contrast and link visibility (WCAG 2.1 AA) ---------- */
/* Light theme muted text was 4.3:1 on tinted cards; this is ~6:1. */
.theme-light { --color-text-muted: #57527a; --color-text-soft: #3f3a63; }
.site-footer__links a { opacity: 1; }
.theme-light .cookie-banner__text a { color: #5b21b6; }
.auth-legal a { color: #c4b5fd; }
.theme-light .auth-legal a { color: #5b21b6; }
.badge-free { background: rgba(42, 33, 75, .9); color: #e9e5ff; }
.theme-light .badge-free { background: #ece9fb; color: #3f3a63; }
.theme-light .status-pill.soon { color: #92400e; }
/* Links inside running text are underlined so they don't rely on colour alone. */
main p a:not(.btn), main li a:not(.btn), .legal-card a:not(.btn), .muted a:not(.btn), .auth-legal a, .cookie-banner__text a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Dark theme: brand purple text is too dark on navy, so links and badges use the lighter tint. */
.theme-dark .badge-ring > span { color: #c4b5fd !important; }
.theme-dark main a:not(.btn):not([class*="nav"]):not(.ai-tab):not(.feature-card) { color: #b9a6ff; }
.legal-summary { border-color: rgba(167, 139, 250, .45) !important; }
.legal-summary ul { display: grid; gap: .45rem; }

/* ---------- Plans: comparison, highlights, unlock prompts ---------- */
.plan-compare { overflow-x: auto; border: 1px solid var(--color-divider); border-radius: 16px; }
.plan-compare__table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.plan-compare__table th, .plan-compare__table td { padding: .7rem 1rem; text-align: left; border-bottom: 1px solid var(--color-divider); }
.plan-compare__note { margin: 0; padding: .7rem 1rem; }
.plan-compare__table thead th { font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.plan-compare__table td { text-align: center; width: 22%; white-space: nowrap; color: var(--color-text-soft); }
.plan-compare__table thead th:not(:first-child) { text-align: center; }
.plan-compare__table tbody th { font-weight: 500; color: var(--color-text); }
.plan-compare__group th { padding-top: 1.1rem; font-size: .78rem; font-weight: 800 !important; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted) !important; }
.plan-compare__premium { background: rgba(124, 58, 237, .08); }
.plan-compare__table thead .plan-compare__premium { color: var(--color-text); }
.plan-yes { color: #22c55e; font-weight: 800; }
.theme-light .plan-yes { color: #15803d; }
.plan-no { color: var(--color-text-muted); }
.plan-highlights { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.plan-highlights li { display: grid; gap: .3rem; padding: 1.1rem; border-radius: 14px; border: 1px solid var(--color-divider); background: rgba(124, 58, 237, .06); }
.plan-highlights strong { color: var(--color-text); }
.plan-highlights li > span:last-child { color: var(--color-text-soft); font-size: .92rem; line-height: 1.5; }
.plan-highlights__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; margin-bottom: .3rem; color: #fff; background: linear-gradient(135deg, #8b5cf6, #5b21b6); }
.premium-unlock { display: grid; gap: .45rem; justify-items: start; margin-top: .8rem; }
.premium-unlock__benefit { margin: 0; color: var(--color-text-soft); }
.premium-unlock__btn { background: linear-gradient(135deg, #7c3aed, #5b21b6) !important; color: #fff !important; border-color: transparent !important; }
.premium-unlock__price { font-size: .82rem; color: var(--color-text-muted); }
.premium-unlock__price a { color: inherit; text-decoration: underline; }
@media (max-width: 560px) { .plan-compare__table th, .plan-compare__table td { padding: .55rem .6rem; } .plan-compare__table { font-size: .88rem; } }
/* Pricing page */
.pricing-page { display: grid; gap: 2rem; max-width: 980px; margin: 0 auto; padding-bottom: 2rem; }
.pricing-hero h1 { margin: .2rem 0 .6rem; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.1; }
.pricing-hero__lede { margin: 0; max-width: 62ch; font-size: 1.05rem; line-height: 1.6; color: var(--color-text-soft); }
.pricing-hero__current { margin: .8rem 0 0; color: var(--color-text-muted); }
.pricing-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; }
.pricing-plan { position: relative; display: grid; gap: .4rem; align-content: start; padding: 1.6rem; border-radius: 20px; border: 1px solid var(--color-border); background: var(--color-card); }
.pricing-plan h2 { margin: 0; font-size: 1.1rem; }
.pricing-plan__price { margin: .2rem 0 0; font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em; color: var(--color-text); }
.pricing-plan__price small { font-size: 1rem; font-weight: 600; color: var(--color-text-muted); }
.pricing-plan__note { margin: 0 0 .8rem; color: var(--color-text-muted); }
.pricing-plan .btn { justify-self: stretch; }
.pricing-plan--featured { border-color: rgba(167, 139, 250, .75); box-shadow: 0 20px 60px rgba(124, 58, 237, .22); background: linear-gradient(170deg, rgba(124, 58, 237, .16), transparent 70%), var(--color-card); }
.pricing-plan__badge { position: absolute; top: -12px; right: 1.2rem; margin: 0; padding: .25rem .7rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #1c1206; background: #fbbf24; }
.pricing-fineprint { margin: -1rem 0 0; font-size: .85rem; line-height: 1.6; color: var(--color-text-muted); }
.pricing-compare h2, .pricing-faq h2 { margin: 0 0 1rem; }
.pricing-faq details { border-bottom: 1px solid var(--color-divider); padding: .9rem 0; }
.pricing-faq summary { cursor: pointer; font-weight: 700; color: var(--color-text); }
.pricing-faq p { margin: .6rem 0 0; color: var(--color-text-soft); }
@media (max-width: 700px) { .pricing-plans { grid-template-columns: minmax(0, 1fr); } }
.upgrade-highlights { margin: 1.5rem 0 2rem; }
/* Ticked before any checkout starts. */
.checkout-consent { display: grid; gap: .55rem; margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-card); }
.checkout-consent label { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; line-height: 1.45; color: var(--color-text); cursor: pointer; }
.checkout-consent input[type="checkbox"] { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: #7c3aed; }
.checkout-consent a { white-space: nowrap; }
.parent-pay__intro { max-width: 62ch; }
.parent-pay__error { margin: 0; padding: .8rem 1rem; border-radius: 12px; border: 1px solid rgba(239, 68, 68, .5); background: rgba(239, 68, 68, .1); color: var(--color-text); }
.upgrade-compare-title { margin: 2.5rem 0 1rem; font-size: 1.3rem; }
.premium-feature__overlay .premium-unlock__price { color: rgba(255, 255, 255, .8); }
.assistant-upgrade-card { display: grid; gap: .45rem; justify-items: start; margin: .6rem 0; padding: .9rem 1rem; border-radius: 12px; border: 1px solid rgba(167, 139, 250, .45); background: rgba(124, 58, 237, .1); }
.assistant-upgrade-card p { margin: 0; color: var(--color-text); }
/* The comparison table opts out of the app's generic table styling. */
.plan-compare__table tbody th[scope="row"] { text-transform: none !important; letter-spacing: normal !important; font-size: .95rem !important; font-weight: 500 !important; color: var(--color-text) !important; background: transparent !important; }
.plan-compare__table td { background: transparent !important; }
.plan-compare__table td.plan-compare__premium { background: rgba(124, 58, 237, .1) !important; }
.plan-compare__table tr:hover th, .plan-compare__table tr:hover td { background-color: transparent; }
.plan-compare__group th { background: transparent !important; }

/* ---------- Premium tools ---------- */
.breakdown-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.breakdown-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.breakdown-table th, .breakdown-table td { padding: .5rem; text-align: left; border-bottom: 1px solid var(--color-divider); text-transform: none !important; letter-spacing: normal !important; background: transparent !important; }
.breakdown-row-form { display: flex; gap: .4rem; align-items: center; }
.breakdown-row-form input { width: 6.5rem; }
.breakdown-phone-label { display: none; }
.breakdown-add { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: .6rem; align-items: end; }
.breakdown-add label { display: grid; gap: .3rem; font-weight: 600; font-size: .88rem; }
.breakdown-big { margin: 0; font-size: 2.6rem; font-weight: 800; color: var(--color-text); }
.breakdown-needed { list-style: none; margin: .4rem 0 1rem; padding: 0; display: grid; gap: .45rem; }
.breakdown-needed li { display: flex; justify-content: space-between; padding: .6rem .8rem; border-radius: 10px; border: 1px solid var(--color-divider); }
.breakdown-needed li.is-secured strong { color: #22c55e; }
.theme-light .breakdown-needed li.is-secured strong { color: #15803d; }
.breakdown-needed li.is-out-of-reach { opacity: .7; }
.breakdown-teaser { max-width: 720px; display: grid; gap: .6rem; }
@media (max-width: 800px) { .breakdown-grid { grid-template-columns: minmax(0, 1fr); } .breakdown-add { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .breakdown-add label:first-child { grid-column: 1 / -1; } }
.module-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.revision-form { display: grid; gap: 1rem; }
.revision-rows { display: grid; gap: .45rem; }
.revision-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.1fr); gap: .5rem; }
.revision-row--head span { font-size: .78rem; font-weight: 700; color: var(--color-text-muted); }
.revision-row input, .revision-row select { width: 100%; }
.revision-hours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.revision-hours label { display: grid; gap: .3rem; font-size: .85rem; font-weight: 600; }
.revision-totals { list-style: none; padding: 0; margin: 0 0 .6rem; display: grid; gap: .35rem; }
.revision-totals li { display: flex; justify-content: space-between; padding: .45rem .7rem; border-radius: 10px; background: rgba(124, 58, 237, .08); }
.revision-days { list-style: none; padding: 0; margin: .6rem 0 1rem; max-height: 420px; overflow: auto; display: grid; gap: .3rem; }
.revision-days li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--color-divider); font-size: .92rem; }
.revision-day { font-weight: 700; color: var(--color-text); }
@media (max-width: 640px) { .revision-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .revision-row label:first-child { grid-column: 1 / -1; } .revision-row--head { display: none; } .revision-hours { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.share-create__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem; align-items: end; }
.share-create__form label { display: grid; gap: .3rem; font-weight: 600; }
.share-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.share-list__head { display: grid; gap: .1rem; margin-bottom: .4rem; }
.shared-progress { display: grid; gap: 1.2rem; }
@media print {
  .site-nav, .site-footer, .no-print, .cookie-banner, .skip-link { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .card, .stat-tile { box-shadow: none !important; border: 1px solid #ccc !important; background: #fff !important; }
  .shared-progress * { color: #000 !important; }
}
.path-target-pick label, .path-form__name { display: grid; gap: .3rem; font-weight: 600; margin-bottom: .6rem; }
.path-form { display: grid; gap: .8rem; }
.path-rows { display: grid; gap: .4rem; }
.path-row { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: .6rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--color-divider); }
.path-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; }
.path-cards li { padding: 1rem; border-radius: 14px; border: 1px solid var(--color-divider); display: grid; gap: .3rem; }
.path-cards li.is-on-track { border-color: rgba(34, 197, 94, .55); }
.path-cards__head { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.path-cards__result { margin: 0; font-size: 1.8rem; font-weight: 800; color: var(--color-text); }
.path-cards__result span { font-size: 1rem; font-weight: 600; color: var(--color-text-muted); }
.path-cards p { margin: 0; }
.path-cards__actions { display: flex; gap: .4rem; }
.plan-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin: 0 0 1.5rem; }
.plan-tool { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem .95rem; border-radius: 14px; border: 1px solid var(--color-divider); background: var(--color-card); color: inherit !important; text-decoration: none !important; }
.plan-tool:hover { border-color: rgba(167, 139, 250, .6); }
.plan-tool > i { margin-top: .15rem; color: #a78bfa; }
.theme-light .plan-tool > i { color: #6d28d9; }
.plan-tool > span { display: grid; gap: .15rem; }
.plan-tool strong { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.plan-tool .premium-pill { margin: 0; padding: .05rem .45rem; font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: rgba(245, 158, 11, .16); border: 1px solid rgba(245, 158, 11, .45); color: #fbbf24; }
.theme-light .plan-tool .premium-pill { color: #92400e; }
.plan-tool strong { color: var(--color-text); font-size: .95rem; }
.plan-tool small { color: var(--color-text-muted); font-size: .8rem; line-height: 1.35; }
@media (max-width: 900px) { .plan-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones: a compact 2 x 2 grid of titles; the descriptions are on each tool's page. */
@media (max-width: 480px) {
  .plan-tools { gap: .5rem; }
  .plan-tool { padding: .7rem .75rem; gap: .5rem; }
  .plan-tool strong { font-size: .88rem; }
  .plan-tool small { display: none; }
  .plan-tool small.plan-tool__teaser { display: block; }
}
.shared-progress .table-scroll { overflow-x: auto; }
@media (max-width: 480px) { .shared-progress .breakdown-table th, .shared-progress .breakdown-table td { padding: .45rem .35rem; font-size: .88rem; } }
.breakdown-row-form input { min-width: 0; }
.theme-dark .plan-pill, .theme-dark .premium-status-card__tag { color: #c4b5fd !important; }
.plan-compare__table thead th { white-space: nowrap; }

/* Achievement share page */
.achievement-share { display: grid; place-items: center; padding: clamp(1rem, 6vw, 4rem) 0; }
.achievement-share__card { width: 100%; max-width: 480px; text-align: center; padding: clamp(1.5rem, 5vw, 2.5rem); border-radius: 24px; border: 1px solid rgba(167, 139, 250, .3); background: radial-gradient(circle at top, rgba(124, 58, 237, .25), transparent 70%), var(--color-card); box-shadow: 0 30px 60px rgba(4, 3, 12, .35); }
.achievement-share__emoji { font-size: 3rem; }
.achievement-share h1 { margin: .8rem 0 .4rem; font-size: clamp(1.4rem, 5vw, 1.8rem); overflow-wrap: anywhere; }
.achievement-share__description { color: var(--color-text-soft); }
.achievement-share__cta { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--color-divider); display: grid; gap: .7rem; justify-items: center; }
.achievement-share__cta p { margin: 0; color: var(--color-text-soft); }

/* Phone-width fixes found in release QA */
.support-form label, .support-form textarea, .support-form input, .support-form select { min-width: 0; max-width: 100%; box-sizing: border-box; }
.support-form textarea, .support-form input:not([type="checkbox"]):not([type="radio"]) { width: 100%; }
.support-form { overflow-wrap: anywhere; }
.share-list li, .share-list__head { min-width: 0; overflow-wrap: anywhere; }
.share-list .waitlist-share__row { flex-wrap: wrap; }
.share-list .waitlist-share__row input { flex: 1 1 100%; }
.shared-progress .page-head, .shared-progress .page-head > div { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .shared-progress .page-head { flex-direction: column; align-items: flex-start; }
  .breakdown-grid .breakdown-table thead { display: none; }
  .breakdown-grid .breakdown-table, .breakdown-grid .breakdown-table tbody, .breakdown-grid .breakdown-table tr, .breakdown-grid .breakdown-table th, .breakdown-grid .breakdown-table td, .breakdown-grid .breakdown-table tfoot { display: block; width: 100%; }
  .breakdown-grid .breakdown-table tr { padding: .6rem 0; border-bottom: 1px solid var(--color-divider); }
  .breakdown-grid .breakdown-table th, .breakdown-grid .breakdown-table td { border: 0; padding: .2rem 0; }
  .breakdown-row-form { flex-wrap: wrap; align-items: flex-end; }
  .breakdown-row-form input { width: 6rem; }
  .breakdown-grid .breakdown-table tbody tr { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .4rem; }
  .breakdown-grid .breakdown-table tbody th { flex: 1 1 100%; }
  .breakdown-grid .breakdown-table tbody td { width: auto; flex: 0 0 auto; }
  .breakdown-phone-label { display: block; font-size: .75rem; color: var(--color-text-muted, #666); margin-bottom: .15rem; }
}
.table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.shared-progress { grid-template-columns: minmax(0, 1fr); } .shared-progress > * { min-width: 0; }
/* College: UCAS offer tracker gets the full width and real form grids */
.offer-card { grid-column: 1 / -1; min-width: 0; }
.offer-card__header { display: grid; gap: .6rem; }
.offer-card__header .inline-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; align-items: start; }
.offer-card__header .inline-form .export-btn { justify-self: start; }
.offer-card .inline-form input, .offer-card .inline-form select { min-width: 0; max-width: 100%; box-sizing: border-box; }
.offer-edit-label { display: block; font-size: .75rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: .15rem; }
.college-table-wrap { overflow-x: auto; max-width: 100%; }
#offerTrackerTable { min-width: 680px; }
#offerTrackerTable .inline-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
#offerTrackerTable .inline-form button { grid-column: 1 / -1; justify-self: start; }
.offer-status { display: inline-block; white-space: normal; line-height: 1.3; }
/* Backup history: keep action buttons readable on phones */
.btn, button { overflow-wrap: normal; word-break: normal; }
.backup-table .btn, table .btn { white-space: nowrap; }
.radar-wrap { max-width: 440px; margin: 0 auto; }
/* GCSE hero cards in light mode */
.theme-light .gcse-dashboard .hero-progress-card { background: #fff !important; border-color: rgba(76, 29, 149, .14) !important; color: var(--color-text); }
.theme-light .gcse-dashboard .hero-progress-card span { color: var(--color-text-muted) !important; }
.theme-light .gcse-dashboard .hero-progress-card .hero-progress-value { color: var(--color-text) !important; }
.theme-light .gcse-dashboard .hero-progress-track { background: rgba(76, 29, 149, .12) !important; }
.theme-dark .countdown-card .deadline-pill.soon { color: #fcd34d !important; background: rgba(251, 191, 36, .16) !important; }
/* Achievements: readable cards in both themes */
.achievement-card h3, .achievement-card h4, .achievement-card strong { color: inherit; }
.theme-dark .achievement-card { color: #e2e8f0; }
.theme-light .achievement-card { background: #fff !important; color: var(--color-text) !important; border: 1px solid rgba(76, 29, 149, .14) !important; box-shadow: 0 10px 30px rgba(31, 27, 58, .07) !important; }
.theme-light .achievement-card.locked { background: #f4f2fb !important; opacity: 1 !important; filter: none !important; }
.theme-light .achievement-card.locked > * { opacity: .75; }
.theme-light .achievement-meta { color: #5b5775 !important; }
.theme-light .achievement-progress { color: #5b21b6 !important; }
.theme-light .share-chip { background: rgba(124, 58, 237, .1) !important; color: #5b21b6 !important; }
.theme-light .recent-grid { background: #fff !important; color: var(--color-text) !important; border: 1px solid rgba(76, 29, 149, .14); }
.theme-light .recent-grid li { background: #f6f4fd !important; color: var(--color-text) !important; }
.theme-light .next-focus, .theme-light .next-focus * { color: var(--color-text-soft) !important; }
/* Privacy dashboard */
.btn.danger { background: #b91c1c !important; border-color: #b91c1c !important; color: #fff !important; }
.btn.danger:hover { background: #991b1b !important; }
@media (max-width: 640px) { .privacy-table { display: block; overflow-x: auto; max-width: 100%; white-space: nowrap; } }
.report-chart { position: relative; height: 280px; }
.report-summaries li { display: block !important; }
.report-summaries li > * { min-width: 0; }
/* Settings: keep long selects inside their cards on phones */
.settings-dashboard select, .settings-section select, #degreeWeightingSelect { max-width: 100%; min-width: 0; width: 100%; }
.settings-section .form-field, .settings-weighting { min-width: 0; }
/* Older pages that use a plain .title heading */
.page > .title, .page .header-row > .title, .page > div > .title:first-child { font-size: clamp(1.5rem, 3.2vw, 2rem) !important; font-weight: 800 !important; letter-spacing: -.01em; color: var(--color-text) !important; margin: 0 0 .6rem !important; line-height: 1.2; }
@media (max-width: 640px) { .snapshot-table { display: block; overflow-x: auto; max-width: 100%; white-space: nowrap; } }
/* Welcome page in light mode */
.theme-light .focus-chip { background: #fff !important; border: 1px solid rgba(76, 29, 149, .14) !important; color: var(--color-text) !important; }
.theme-light .focus-chip strong, .theme-light .focus-chip span, .theme-light .focus-chip div { color: var(--color-text) !important; }
.theme-light .hero-highlights { background: #f6f4fd !important; border: 1px solid rgba(76, 29, 149, .14) !important; color: var(--color-text) !important; }
.theme-light .hero-highlights h3, .theme-light .hero-highlights li, .theme-light .hero-highlights span { color: var(--color-text) !important; }
.theme-light .hero-highlights i { color: #6d28d9 !important; }

/* What-if basic + history: themed cards instead of hard-coded dark panels */
.what-if-basic input[type="number"] { width: 100%; max-width: 12rem; }
.what-if-basic__results { margin-top: 1.25rem; padding: 1rem; border-radius: 0.75rem; background: var(--color-accent-soft); }
.what-if-basic__results ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.what-if-basic__error { color: var(--color-danger); font-weight: 600; margin-top: 1rem; }
.what-if-basic__upsell { margin-top: 1rem; display: grid; gap: 0.5rem; justify-items: start; }
.what-if-history .export-cta { margin: 1rem 0; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.what-if-history .badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 6px; font-weight: 600; color: #fff; font-size: 0.85rem; white-space: nowrap; }
.what-if-history .badge.first { background: #059669; }
.what-if-history .badge.twoone { background: #2563eb; }
.what-if-history .badge.twotwo { background: #b45309; }
.what-if-history .badge.third { background: #dc2626; }
.what-if-history .badge.fail { background: #4b5563; }

/* Contact / delete account / what's new */
.form-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.support-form .form-actions .btn { justify-self: auto; }
.delete-account { max-width: 720px; }
.delete-account .alert { padding: .9rem 1rem; border-radius: 12px; border: 1px solid; margin-top: 1rem; }
.whats-new { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; max-width: 760px; }
.whats-new__item { display: flex; gap: 1rem; align-items: flex-start; }
.whats-new__item > div { min-width: 0; flex: 1; }
.whats-new__icon { font-size: 1.6rem; line-height: 1; color: var(--color-brand-strong); }
.whats-new__head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.whats-new__head h2 { margin: 0 0 .35rem; }
.updates-filter { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; }
.updates-filter a { padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--color-border); font-size: .9rem; font-weight: 600; text-decoration: none; color: inherit; }
.updates-filter a[aria-current="page"] { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.update-kind { display: inline-block; vertical-align: middle; font-size: .72rem; font-weight: 700; letter-spacing: .02em; padding: .15rem .5rem; border-radius: 6px; margin-right: .35rem; color: #fff; }
.update-kind--new { background: #7c3aed; }
.update-kind--improved { background: #0369a1; }
.update-kind--fixed { background: #15803d; }
.updates-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: #7c3aed; box-shadow: 0 0 0 2px var(--color-card, #fff); }
.site-nav__toggle { position: relative; }
.updates-dot--toggle { position: absolute; top: 2px; right: 2px; }
.updates-count { display: inline-block; min-width: 1.3rem; padding: 0 .35rem; margin-left: .35rem; border-radius: 999px; background: #7c3aed; color: #fff; font-size: .75rem; font-weight: 700; text-align: center; line-height: 1.3rem; }
.how-it-works { max-width: 820px; }
.how-it-works h2 { margin-top: 1.25rem; }

/* Keep the footer at the bottom of the window on short pages */
main.page { min-height: calc(100vh - 13rem); min-height: calc(100svh - 13rem); }

/* "Premium" tag next to a page eyebrow (Planner · Premium) */
.eyebrow .premium-pill { display: inline-flex; align-items: center; margin-left: .45rem; padding: .1rem .5rem; border-radius: 999px; font-size: .66rem; letter-spacing: .08em; background: rgba(245, 158, 11, .16); border: 1px solid rgba(245, 158, 11, .45); color: #fbbf24; vertical-align: middle; }
.theme-light .eyebrow .premium-pill { color: #92400e; }

/* Scroll wrappers contain absolutely positioned children (e.g. .sr-only labels) */
.college-table-wrap, .table-scroll, .table-responsive { position: relative; }
.nowrap { white-space: nowrap; }

/* Contrast fixes from the release accessibility scan */
.what-if-history .badge.first { background: #047857; }
.theme-light .btn.btn-outline-danger.btn-outline-danger.btn-outline-danger { color: #b91c1c !important; border-color: rgba(185, 28, 28, .55) !important; }
.payment-result { max-width: 720px; }
.premium-start { margin: 0 0 1rem; padding-left: 1.2rem; display: grid; gap: .45rem; }
.college-table-wrap:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

/* Cookie preferences dialog: compact close button on every screen size */
.cookie-modal__header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.cookie-modal__header .btn { flex: 0 0 auto; width: 44px; min-width: 44px; height: 44px; padding: 0; }
.email-config { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0 0 1rem; }
.email-config dt { font-weight: 600; }
.email-config dd { margin: 0; overflow-wrap: anywhere; }
/* Dashboard: one-time ask for getting-started emails. */
.tips-prompt { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.tips-prompt__title { margin: 0 0 .25rem; font-size: 1.05rem; }
.tips-prompt p { margin: 0; }
.tips-prompt__actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Page titles that are <h1> for screen readers but keep their earlier look. */
h1.upgrade-title { margin-top: 0; }
h1.as-h2 { font-size: clamp(1.35rem, 2.4vw, 1.8rem); margin-bottom: .83em; }
.header > h1.as-h2 { margin-top: .83em; }

/* Guided dashboard tour (static/js/tour.js) */
.pmg-tour { position: fixed; inset: 0; z-index: 10050; }
/* The cookie banner sat half under the tour card; it comes back when the tour closes. */
body.pmg-tour-open .cookie-banner { visibility: hidden; }
.pmg-tour.is-dimmed { background: rgba(6, 4, 16, .6); }
.pmg-tour__spotlight { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(6, 4, 16, .6), 0 0 0 3px #a78bfa; transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; pointer-events: none; }
.pmg-tour__card { position: fixed; right: 1.5rem; bottom: 1.5rem; width: min(400px, calc(100vw - 2rem)); padding: 1.25rem 1.25rem 1rem; border-radius: 18px; background: var(--color-card, #1b1530); color: var(--color-text, #fff); border: 1px solid rgba(167, 139, 250, .35); box-shadow: 0 24px 60px rgba(4, 3, 12, .45); outline: none; }
.pmg-tour__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; }
.pmg-tour__count { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-brand, #7c3aed); }
.pmg-tour__skip { background: none; border: 0; padding: .5rem; margin: -.5rem; color: var(--color-text-muted); font: inherit; font-size: .9rem; cursor: pointer; }
.pmg-tour__skip:hover, .pmg-tour__skip:focus-visible { color: var(--color-text); text-decoration: underline; }
.pmg-tour__title { font-size: 1.2rem; margin: 0 0 .4rem; }
.pmg-tour__body { margin: 0; color: var(--color-text-muted); line-height: 1.5; }
.pmg-tour__dots { display: flex; gap: 6px; margin: 1rem 0 .85rem; }
.pmg-tour__dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(148, 163, 184, .45); transition: width .2s ease; }
.pmg-tour__dots span.is-active { width: 20px; border-radius: 4px; background: var(--color-brand, #7c3aed); }
.pmg-tour__nav { display: flex; justify-content: flex-end; gap: .5rem; }
.pmg-tour__nav .btn { min-width: 6rem; min-height: 44px; }
@media (max-width: 700px) {
  .pmg-tour__card { left: 0; right: 0; bottom: 0; width: auto; border-radius: 20px 20px 0 0; padding: 1.1rem 1.1rem calc(1rem + env(safe-area-inset-bottom)); }
  .pmg-tour__nav .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .pmg-tour__spotlight, .pmg-tour__dots span { transition: none; }
}

/* Tables that become stacked cards on phones, so nothing is cut off sideways.
   Each cell shows its column name from data-label. */
@media (max-width: 700px) {
  table.table-stacked { display: block; width: 100%; }
  table.table-stacked thead { display: none; }
  table.table-stacked tbody, table.table-stacked tr, table.table-stacked td { display: block; width: auto; }
  table.table-stacked tr {
    border: 1px solid var(--color-border, rgba(148, 163, 184, .25));
    border-radius: 14px;
    padding: .75rem .85rem;
    margin-bottom: .75rem;
  }
  table.table-stacked td { border: 0; padding: .3rem 0; text-align: left !important; }
  table.table-stacked td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: .15rem;
  }
  table.table-stacked td:empty { display: none; }
  /* Stacked rows need no sideways scroll. */
  table.table-stacked { min-width: 0 !important; }
  .table-scroll:has(> table.table-stacked),
  .college-table-wrap:has(> table.table-stacked) { overflow: visible; }
}

/* Phone-only collapsible cards (static/js/collapse-cards.js) */
.card-fold__heading { margin-bottom: 0; }
.card-fold__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  min-height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.card-fold__toggle::after {
  content: "";
  flex: 0 0 auto;
  width: .55rem;
  height: .55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.card-fold.is-open .card-fold__toggle::after { transform: rotate(-135deg); }
.card-fold__panel { padding-top: .75rem; }
@media (prefers-reduced-motion: reduce) {
  .card-fold__toggle::after { transition: none; }
}

/* ---------- Dashboard fixes (2026-10-08 site review) ---------- */
/* The side column was removed from the dashboard, but product.css still reserved
   a third of the page for it, so every section stopped two thirds of the way across. */
.dashboard-page .dashboard-shell { grid-template-areas: "main" !important; grid-template-columns: minmax(0, 1fr) !important; }
/* Current Standing had no styles: the average showed at body size and the progress bar had no height. */
.dashboard-page .stat-value { font-size: 2rem; font-weight: 800; line-height: 1.1; margin: .35rem 0 .15rem; }
.dashboard-page .progress-track { height: 10px; border-radius: 999px; background: rgba(124, 58, 237, .15); overflow: hidden; margin-top: .6rem; }
.dashboard-page .progress-value { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7c3aed, #a78bfa); }
/* Form grids: let inputs shrink to their column instead of spilling out of the card. */
.dashboard-page .form-grid > label { min-width: 0; }
.dashboard-page .form-grid input, .dashboard-page .form-grid select { width: 100%; min-width: 0; box-sizing: border-box; }

/* Settings switches: ".builder > label" stacked them into a centred column, and the knob was
   purple whether on or off. Keep the switch beside its label and make "off" look off. */
.settings-dashboard .builder > label.settings-toggle { display: grid; grid-template-columns: auto 1fr; align-items: center; text-align: left; }
.settings-dashboard .switch-toggle .switch-pill { background: #9ca3af; box-shadow: none; }
.settings-dashboard .switch-toggle:has(input:checked) { background: linear-gradient(135deg, #7c3aed, #a78bfa); border-color: #7c3aed; }
.settings-dashboard .switch-toggle input:checked + .switch-pill { background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.settings-dashboard .switch-toggle { flex: 0 0 auto; width: 46px; height: 26px; }
.settings-dashboard .switch-toggle .switch-pill { flex: 0 0 auto; width: 18px; height: 18px; left: -10px; }
.settings-dashboard .switch-toggle input:checked + .switch-pill { transform: translateX(20px); }

/* College hub: the offer tracker spans the row, which left the UCAS calculator alone in a third of it. */
.college-dashboard .grid-2:has(> .offer-card) > .card:not(.offer-card) { grid-column: 1 / -1; }
.payment-failed-notice { margin-bottom: 1rem; }

/* Welcome: "What are you studying?" picker. */
.stage-pick { max-width: 760px; margin: 0 auto; }
.stage-pick__card { padding: clamp(1.25rem, 4vw, 2.25rem); display: grid; gap: 1.25rem; }
.stage-pick__card h1 { margin: .1rem 0 0; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.stage-pick__set { border: 0; margin: 0; padding: 0; min-width: 0; }
.stage-pick__set legend { padding: 0; }
.stage-pick__set legend h2 { font-size: 1.2rem; margin: 0 0 .25rem; }
.stage-pick__options { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .75rem; margin-top: .75rem; }
.stage-option { position: relative; cursor: pointer; }
.stage-option input, .stage-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stage-option__body { display: grid; gap: .3rem; height: 100%; box-sizing: border-box; padding: 1rem; border-radius: 14px; border: 2px solid var(--color-border); background: var(--color-surface-alt, transparent); transition: border-color .15s, box-shadow .15s; }
.stage-option__body i { font-size: 1.4rem; color: var(--color-brand); }
.stage-option__body strong { font-size: 1.1rem; }
.stage-option__body small { color: var(--color-text-soft); }
.stage-option input:checked + .stage-option__body { border-color: var(--color-brand); box-shadow: 0 0 0 3px var(--color-brand-soft, rgba(124, 58, 237, .25)); }
.stage-option input:focus-visible + .stage-option__body, .stage-chip input:focus-visible + span { outline: 3px solid var(--color-brand); outline-offset: 2px; }
.stage-pick__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.stage-chip { cursor: pointer; position: relative; }
.stage-chip span { display: inline-block; padding: .45rem .85rem; border-radius: 999px; border: 1px solid var(--color-border); font-size: .92rem; }
.stage-chip input:checked + span { border-color: var(--color-brand); background: var(--color-brand); color: #fff; }
.stage-pick__go { justify-self: start; min-width: 200px; }
@media (max-width: 560px) { .stage-pick__go { justify-self: stretch; } }

/* Optional "why are you leaving?" on Delete account and Manage plan. */
.leaving-reason { display: grid; gap: .35rem; max-width: 420px; }
.leaving-reason select { width: 100%; }

/* GCSE and College pages share the university dashboard's top (core/partials/stage_top.html). */
.level-dashboard.stage-page { max-width: 1320px; padding: 1.5rem 1rem 3rem; }
.stage-page > .dash-hero, .stage-page > .stat-grid, .stage-page > .plan-tools { margin-bottom: 1.25rem; }
.stage-page > .ai-studio { margin-bottom: 2rem; }
.stage-coach__today { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-divider); }
.stage-coach__today h3 { margin: 0 0 .4rem; font-size: 1rem; }
.stage-coach__today h3 i { margin-right: .35rem; color: #f59e0b; }
.stage-coach__today .ai-text { margin: 0; line-height: 1.6; }
.stage-coach .assistant-log:empty { display: none; }
.stage-coach .assistant-log { margin-bottom: .75rem; display: grid; gap: .5rem; }
.stage-coach .assistant-footer { display: grid; gap: .5rem; }
.stage-coach .assistant-footer .assistant-actions { display: flex; justify-content: flex-end; }
@media (max-width: 900px) { .stage-page .plan-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .stage-page .ai-ask { grid-template-columns: 1fr; } }

/* Exams, deadlines and goals card on the GCSE and College pages */
.stage-plan { margin: 1.25rem 0; }
.stage-plan__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.stage-plan h3 { font-size: 1rem; margin: 0 0 .5rem; }
.stage-plan__list { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .5rem; }
.stage-plan__list li { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem .75rem; border: 1px solid var(--border, rgba(127,127,127,.25)); border-radius: 10px; }
.stage-plan__list li > span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.stage-plan__add { display: flex; flex-wrap: wrap; gap: .5rem; }
.stage-plan__add input[name="title"] { flex: 1 1 160px; min-width: 0; }
.stage-plan__add input[type="date"] { flex: 0 1 150px; }
/* Locked Premium cards: the card grows to fit its upgrade message, which was
   clipped on phones when the preview behind it was short. */
.premium-feature { position: relative; border-radius: 20px; }
.premium-feature--locked:has(> .premium-feature__overlay) { display: grid; overflow: hidden; }
.premium-feature--locked:has(> .premium-feature__overlay) > .premium-feature__content { pointer-events: none; user-select: none; }
.premium-feature__overlay { border-radius: inherit; background: linear-gradient(145deg, rgba(15, 23, 42, 0.95), rgba(40, 13, 92, 0.92)); color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .45rem; padding: 1.75rem; z-index: 5; text-align: center; }
.premium-feature__overlay strong { font-size: 1.05rem; color: #fff; }
.premium-feature__description { font-size: .94rem; color: rgba(255, 255, 255, .85); max-width: 22rem; line-height: 1.4; margin: 0; }
.premium-feature__icon { width: 48px; height: 48px; border-radius: 50%; background: rgba(124, 58, 237, .2); display: flex; align-items: center; justify-content: center; }
.premium-feature__cta { margin-top: .25rem; }
.premium-feature--locked > .premium-feature__content,
.premium-feature--locked > .premium-feature__overlay { grid-area: 1 / 1; min-width: 0; }
.premium-feature--locked > .premium-feature__overlay { position: relative; inset: auto; }
/* The settings toolbar has a card background but no padding, so its text touched the edge. */
.level-toolbar { padding: .9rem 1rem; }
.account-menu__label { margin: .4rem 0 0; padding: .45rem .75rem .2rem; border-top: 1px solid var(--color-divider); color: var(--color-text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* GCSE and College pages: the second half folds into "More tools" until the student has a subject. */
.stage-more { margin-top: 1.5rem; }
.stage-more__summary { display: grid; gap: .2rem; padding: 1rem 1.25rem; border-radius: 16px; border: 1px solid var(--color-divider); background: var(--color-surface); cursor: pointer; list-style: none; }
.stage-more__summary::-webkit-details-marker { display: none; }
.stage-more__summary::after { content: "Show"; justify-self: start; margin-top: .35rem; font-weight: 700; font-size: .9rem; color: var(--color-brand); }
.stage-more[open] > .stage-more__summary::after { content: "Hide"; }
.stage-more__title { font-weight: 800; font-size: 1.05rem; color: var(--color-text); }
.stage-more__list { color: var(--color-text-muted); font-size: .92rem; }
.stage-more__summary:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }
.stage-more__body > .grid:first-child, .stage-more__body > .section-title:first-child { margin-top: 1.25rem !important; }
.help-other-stages > summary { cursor: pointer; }
.help-other-stages[open] > summary { margin-bottom: .75rem; }
.offer-example-tag { display: inline-block; margin-left: .35rem; padding: .05rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .03em; color: var(--color-text-muted); border: 1px dashed var(--color-divider); vertical-align: middle; }
.hero-highlights .onboarding-steps p { margin: .2rem 0 0; }
.hero-highlights .onboarding-steps strong { display: block; }

/* "Add your first subject to unlock..." hint for students with nothing added yet. */
.unlock-hint { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem 1.25rem; align-items: center; margin: 1.25rem 0; padding: 1.1rem 1.35rem; border-radius: 16px; border: 1px dashed rgba(124, 58, 237, .45); background: linear-gradient(135deg, rgba(124, 58, 237, .10), transparent 70%); }
.unlock-hint__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #8b5cf6, #5b21b6); font-size: 1.1rem; }
.unlock-hint__title { margin: 0 0 .45rem; font-size: 1.05rem; color: var(--color-text); }
.unlock-hint__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem 1.25rem; color: var(--color-text-soft, var(--color-text-muted)); font-size: .92rem; }
.unlock-hint__list li { position: relative; padding-left: 1.1rem; }
.unlock-hint__list li::before { content: "+"; position: absolute; left: 0; font-weight: 800; color: var(--color-brand); }
@media (max-width: 760px) {
  .unlock-hint { grid-template-columns: minmax(0, 1fr); }
  .unlock-hint__icon { display: none; }
  .unlock-hint__list { grid-template-columns: minmax(0, 1fr); }
  .unlock-hint__cta { grid-column: 1 / -1; justify-self: start; }
}
.stage-more__hint { color: var(--color-brand); font-size: .88rem; font-weight: 600; }
/* Locked figure on a Premium card: dots, never the real number */
.plan-tool .locked-figure { display: inline-block; padding: 0 .3rem; border-radius: 6px; background: rgba(245, 158, 11, .16); color: #fbbf24; font-weight: 700; letter-spacing: .08em; filter: blur(.4px); }
.theme-light .plan-tool .locked-figure { color: #92400e; }
/* "Ask a parent to pay" and "Invite a friend" on the upgrade and pricing pages */
.parent-cta { display: flex; gap: 1rem; align-items: center; margin: 1.25rem 0 0; padding: 1rem 1.1rem; border-radius: 16px; border: 1px solid rgba(167, 139, 250, .45); background: rgba(167, 139, 250, .08); }
.parent-cta > i { font-size: 1.5rem; color: #a78bfa; }
.theme-light .parent-cta > i { color: #6d28d9; }
.parent-cta h2 { margin: 0 0 .2rem; font-size: 1.05rem; }
.parent-cta p { margin: 0; }
.parent-cta > div { flex: 1; }
.parent-cta .btn { white-space: nowrap; }
@media (max-width: 640px) { .parent-cta { flex-direction: column; align-items: stretch; text-align: left; } .parent-cta > i { display: none; } }
.invite-for-premium { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; margin: 1rem 0 0; padding: .8rem 1rem; border-radius: 14px; border: 1px dashed var(--color-divider); }
.invite-for-premium > i { color: #34d399; }
.theme-light .invite-for-premium > i { color: #047857; }
.invite-for-premium > span { flex: 1 1 18rem; }
.trial-remind { margin: .5rem 0 0; font-size: .85rem; opacity: .85; }

/* Accessibility check 2026-10-15: text contrast fixes. The dark-theme link
   colour (above) was turning selected purple pills' white text lilac. */
.theme-dark main a[aria-current="page"],
.theme-dark main a[aria-current="true"] { color: #fff !important; }
.theme-light .achievement-card.locked > .achievement-meta { opacity: 1; }
.theme-dark .trend-positive { color: #34d399; }
.theme-dark .trend-negative { color: #f87171; }
.empty-state a { text-decoration: underline; }