﻿/* Site theme. Loaded after Bootstrap in base.html so these win on specificity ties.
   Was an inline <style> block in base.html until the dark theme tripled its size.

   Bootstrap 5.3's own theming is doing most of the work here: data-bs-theme on <html> reskins
   every component. What this file does is re-point Bootstrap's theme variables at our slate
   palette so components follow the brand rather than Bootstrap's default greys. Prefer
   overriding a --bs-* variable to overriding a component's rule â€” the variable reaches every
   component that uses it, including ones no page renders yet.

   Light is the default and dark is a complete override; both palettes are token-only, so no rule
   below this point mentions a theme. The one page that opts out is the exam shell in question.css,
   which is deliberately fixed light because it mimics the real UCAT client. */

/* Light is the default theme and lives on bare :root, so a visitor with no preference and no
   stored choice gets it. Dark is a full token override in the [data-bs-theme="dark"] block below.
   Every value that differs between the two is a token here â€” including the few component colours
   that used to be literals (success, danger, the weak pill, the hero wash), because each of them
   was hand-tuned for contrast against a dark surface and is wrong on a light one. Adding a theme
   toggle later is then a matter of flipping the attribute; no rule below needs to change. */
:root{
  /* Surfaces â€” Tailwind slate 50/white/100, the light-side counterparts of the slate 900/800/700
     used for dark. --surface stays lighter than --bg in both themes, so a card lifts off the page
     the same way either way round. */
  --bg:        #F8FAFC;   /* page background */
  --surface:   #FFFFFF;   /* cards, nav, footer */
  --surface-2: #F1F5F9;   /* hover, raised, form fields */
  --border:    #E2E8F0;

  /* Text */
  --ink:       #0F172A;   /* headings */
  --body:      #334155;   /* body copy */
  --muted:     #64748B;   /* 4.8:1 on --surface, 4.6:1 on --bg */

  /* Brand. --brand is the fill (white text sits on it); --brand-accent is brand-as-*text* â€”
     links, .stat, icons, .text-brand, the active nav underline. The two tokens exist because the
     contrast requirement inverts between themes, so each theme sets its own value and no selector
     has to know which theme is active. On white, #2563EB as text is 5.2:1 and #1D4ED8 is 6.5:1. */
  --brand:        #2563EB;
  --brand-dark:   #1D4ED8;
  --brand-accent: #1D4ED8;
  --brand-glow:   rgba(37,99,235,.20);

  /* Opaque pale-blue surface ramp — the blue-tinted counterpart of the slate surface/hover/border
     tokens above (Tailwind blue 50/100/200), for tinted fills like the practice picker's primary
     buttons and code badges. --brand-glow is translucent and reads as washed-out periwinkle over a
     surface, so it stays reserved for focus rings and shadows. */
  --brand-wash:        #EFF6FF;
  --brand-wash-hover:  #DBEAFE;
  --brand-wash-border: #BFDBFE;

  /* Status colours. Split fill-vs-text for the same contrast reason as --brand: a fill only has
     to clear 3:1 as a graphic, but the same hue carrying small text has to clear 4.5:1. */
  --success-fill:  #16A34A;   /* 3.1:1 as a bar against --surface-2 */
  --success-badge: #15803D;   /* white on this: 5.0:1 */
  --danger-ink:    #DC2626;   /* 4.8:1 on --surface */

  --weak-bg:     rgba(239,68,68,.08);
  --weak-ink:    #B91C1C;     /* 6.4:1 on --surface */
  --weak-border: rgba(239,68,68,.25);

  /* PLACEHOLDER hero wash â€” see .hero below. The stop nearest the fold is the tinted one; the
     far stop hands off to --bg so the band ends without a seam. */
  --hero-tint-1: rgba(37,99,235,.10);
  --hero-tint-2: rgba(96,165,250,.10);
  --hero-far:    #EFF6FF;

  /* Chart.js paints to a canvas and cannot read CSS, so the dashboard reads these two back out
     with getComputedStyle and hands them over. Kept as tokens for that reason alone. */
  --chart-grid: rgba(100,116,139,.20);
  --chart-fill: rgba(37,99,235,.12);

  /* Section hues â€” one identity colour per UCAT section, as a tint/ink pair: the tint is a quiet
     fill (chip background) and the ink carries text on it and paints the accuracy bar and a card's
     left rule. Split rather than one saturated fill so a section's colour whispers instead of
     shouting, and so the ink can carry text â€” each ink clears 4.5:1 on --surface (and on its own
     tint) in this theme; the dark block re-tunes both halves for the dark surface. */
  --vr-tint:  #E7EFE4;  --vr-ink:  #3E6440;   /* sage */
  --dm-tint:  #E1EEEE;  --dm-ink:  #1F5C5E;   /* teal */
  --qr-tint:  #E5E9F5;  --qr-ink:  #303F78;   /* indigo */
  --sjt-tint: #EDE8F0;  --sjt-ink: #574569;   /* plum */

  /* Must track the real rendered height of .navbar. Only .page's min-height uses it, so if the
     nav ever gets taller the symptom is a small gap or peek at the fold, not a broken layout. */
  --nav-h: 57px;

  /* Declared here and not only as <meta name="color-scheme">, because the meta tag alone leaves
     the computed color-scheme "normal" and Chrome's auto dark mode then repaints the page: on a
     device in dark mode every white surface came back as rgb(220,218,216), so cards, fields and
     the page itself collapsed to the same muddy grey. This is the property that opts us out.
     question.css does the same for the exam shell, for the same reason. */
  color-scheme: light;
}

/* Bootstrap's own light defaults assume a white body, but --bg is slate-50, so the same --bs-*
   variables the dark block remaps have to be remapped here too â€” otherwise components that paint
   their own background (dropdowns, list groups, modals) sit a shade off the page. */
:root{
  --bs-body-bg: var(--bg);
  --bs-body-bg-rgb: 248,250,252;
  --bs-body-color: var(--body);
  --bs-body-color-rgb: 51,65,85;
  --bs-emphasis-color: var(--ink);
  --bs-emphasis-color-rgb: 15,23,42;
  --bs-heading-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-secondary-bg: var(--surface-2);
  --bs-secondary-bg-rgb: 241,245,249;
  --bs-tertiary-color: var(--muted);
  --bs-tertiary-bg: var(--surface);
  --bs-tertiary-bg-rgb: 255,255,255;
  --bs-border-color: var(--border);
  --bs-border-color-translucent: rgba(15,23,42,.10);
  --bs-link-color: var(--brand-accent);
  --bs-link-color-rgb: 29,78,216;
  --bs-link-hover-color: #1E40AF;
  --bs-link-hover-color-rgb: 30,64,175;
  --bs-code-color: #A21CAF;
}

/* A short page used to let the footer ride up into the middle of the screen â€” on /billing/ it
   started 375px above the fold, which read as the page having collapsed. Filling the viewport
   below the navbar keeps the footer below the fold no matter how little content a page has.
   dvh so mobile browser chrome retracting doesn't expose it. */
.page{ min-height:calc(100vh - var(--nav-h)); }
@supports (height:100dvh){ .page{ min-height:calc(100dvh - var(--nav-h)); } }

/* The dark theme. Nothing here is deleted when light is the default â€” setting data-bs-theme="dark"
   on <html> restores the original palette wholesale, which is what makes a toggle a later addition
   rather than a rewrite. The first half overrides our tokens; the second re-points Bootstrap's. */
[data-bs-theme="dark"]{
  /* Surfaces â€” Tailwind slate 900/800/700, cool and blue-leaning so the dark side reads as
     deliberate rather than invented. */
  --bg:        #0F172A;
  --surface:   #1E293B;
  --surface-2: #263449;
  --border:    #334155;

  --ink:       #F1F5F9;
  --body:      #CBD5E1;
  --muted:     #94A3B8;   /* ~7:1 on --bg, ~5.2:1 on --surface */

  /* #2563EB as *text* on #0F172A is only ~3:1, so here --brand stays fill-only (with white text)
     and --brand-accent lightens to carry anything that is itself blue text. */
  --brand:        #2563EB;
  --brand-dark:   #1D4ED8;
  --brand-accent: #60A5FA;
  --brand-glow:   rgba(37,99,235,.25);

  /* Blue-tinted counterparts of the slate surface ramp; --brand-accent (#60A5FA) clears 4.5:1 as
     text on --brand-wash here. Hover and border step *lighter*, the way --surface-2 lifts off
     --surface on the dark side. */
  --brand-wash:        #1E3A5C;
  --brand-wash-hover:  #24466E;
  --brand-wash-border: #305680;

  /* As a progress fill #16A34A gives 4.4:1 against --surface; as a badge it carries white text at
     .75rem, where #16A34A is only 3.3:1 â€” hence the darker green there. */
  --success-fill:  #16A34A;
  --success-badge: #15803D;
  /* Bootstrap's #DC3545 is tuned for white backgrounds; as text on --surface it is 3.2:1, and both
     places using it are .small. The fill keeps the original red â€” only text is lightened. */
  --danger-ink:    #F87171;   /* 5.3:1 on --surface, 6.5:1 on --bg */

  --weak-bg:     rgba(239,68,68,.12);
  --weak-ink:    #FCA5A5;
  --weak-border: rgba(239,68,68,.3);

  --hero-tint-1: rgba(37,99,235,.28);
  --hero-tint-2: rgba(96,165,250,.16);
  --hero-far:    #0B1220;

  --chart-grid: rgba(148,163,184,.15);
  --chart-fill: rgba(96,165,250,.14);

  /* Section hues re-tuned for the dark surface: a deep, near-neutral tint per section and a light
     ink that carries text against it. Low chroma by design â€” the presence comes from ink depth,
     not colour intensity â€” each ink clears 4.5:1 on --surface and on its own tint here, the same
     bar the light block meets. */
  --vr-tint:  #212B1F;  --vr-ink:  #B3CBAA;
  --dm-tint:  #172B2C;  --dm-ink:  #9CC6C7;
  --qr-tint:  #1E2233;  --qr-ink:  #AEB8DC;
  --sjt-tint: #262130;  --sjt-ink: #C0B0CC;

  /* Counterpart to the light declaration: tells the browser this really is a dark page, so it
     leaves it alone and paints form controls and scrollbars to match. */
  color-scheme: dark;

  --bs-body-bg: var(--bg);
  --bs-body-bg-rgb: 15,23,42;
  --bs-body-color: var(--body);
  --bs-body-color-rgb: 203,213,225;
  --bs-emphasis-color: var(--ink);
  --bs-emphasis-color-rgb: 241,245,249;
  --bs-heading-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-secondary-bg: var(--surface-2);
  --bs-secondary-bg-rgb: 38,52,73;
  --bs-tertiary-color: var(--muted);
  --bs-tertiary-bg: var(--surface);
  --bs-tertiary-bg-rgb: 30,41,59;
  --bs-border-color: var(--border);
  --bs-border-color-translucent: rgba(255,255,255,.12);
  --bs-link-color: var(--brand-accent);
  --bs-link-color-rgb: 96,165,250;
  --bs-link-hover-color: #93C5FD;
  --bs-link-hover-color-rgb: 147,197,253;
  --bs-code-color: #F0ABFC;
}

html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--body); }
h1,h2,h3,h4,h5,h6{ color:var(--ink); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
.text-muted{ color:var(--muted) !important; }
.text-brand{ color:var(--brand-accent); }

.btn-brand{ background:var(--brand); color:#fff; border:0; }
.btn-brand:hover,.btn-brand:focus{ background:var(--brand-dark); color:#fff; }
/* Two contrast rules apply to the same Bootstrap class, so it needs two values: as a progress fill
   it is a graphic needing 3:1, as a badge it carries white text at .75rem needing 4.5:1. Both
   values are tokens because the tuning differs per theme â€” see the :root and dark blocks above. */
.bg-success{ background-color:var(--success-fill) !important; }
.badge.bg-success{ background-color:var(--success-badge) !important; }

/* Bootstrap's #DC3545 needs the same per-theme treatment. The two places using it are .small â€”
   the submit dialog's "will be marked wrong" warning and the review page's blank notice â€” so it
   is held to the 4.5:1 text bar. The .bg-danger fill keeps Bootstrap's red; only text moves. */
.text-danger{ color:var(--danger-ink) !important; }

/* Cards sit on --surface so they lift off the page rather than blending into it. */
.card{
  --bs-card-bg: var(--surface);
  border:1px solid var(--border); border-radius:.75rem;
}
.list-group{ --bs-list-group-bg: var(--surface); }
/* Bootstrap's own primary, not ours, fills a bare .progress-bar. Homework bars override it with
   .bg-success; the section bars want the brand, so the variable is the place to say so. */
.progress{ height:.6rem; --bs-progress-bg: var(--surface-2); --bs-progress-bar-bg: var(--brand); }
label.list-group-item{ cursor:pointer; }
.stat{ font-size:2rem; font-weight:700; line-height:1.1; }

/* The dashboard's headline figure. Larger than .stat because it is the one number the page is
   built around; fluid so it does not crowd the delta beside it on a phone. */
.stat-hero{ font-size:clamp(2.25rem,5vw,2.75rem); font-weight:700; line-height:1; letter-spacing:-.03em; }
.delta-up{ color:var(--success-badge); font-weight:600; }
.delta-down{ color:var(--danger-ink); font-weight:600; }

/* The dashboard's invite into the planning engine â€” sits opposite the accuracy figure. */
.ucat-tracker-tab{
  display:block; background:var(--brand); color:#fff; text-decoration:none;
  border-radius:.75rem; padding:.65rem 1rem; max-width:230px;
}
.ucat-tracker-tab:hover,.ucat-tracker-tab:focus{ background:var(--brand-dark); color:#fff; }
.ucat-tracker-tab-title{ font-weight:700; font-size:.95rem; }
.ucat-tracker-tab-sub{ font-size:.78rem; opacity:.85; margin-top:.15rem; line-height:1.3; }

/* International cut-off provenance hint â€” the tooltip itself is Bootstrap's own component. */
.prov{ border-bottom:1px dotted var(--muted); cursor:help; }

/* Fixed width so the section codes line up and the bars all start at the same x. */
.section-code{ width:2.75rem; flex:0 0 auto; text-align:center; }

/* A subtopic is one flat line in a list, not a box. The row is deliberately as short as its
   contents allow: the buttons set the floor, so the padding is trimmed to almost nothing and the
   controls are shrunk to match rather than the row being padded out around them. */
.subtopic-row{ padding-top:.2rem; padding-bottom:.2rem; }
.subtopic-row .btn-sm{ --bs-btn-padding-y:.15rem; --bs-btn-font-size:.8rem; }
.subtopic-row .badge{ font-size:.72rem; }

/* Fields are --surface-2 so they read as inputs against a --surface card. */
.form-control,.form-select{
  background-color:var(--surface-2); border-color:var(--border); color:var(--ink);
}
.form-control:focus,.form-select:focus{
  background-color:var(--surface-2); color:var(--ink);
  border-color:var(--brand-accent); box-shadow:0 0 0 .25rem var(--brand-glow);
}

.weak-pill{ background:var(--weak-bg); color:var(--weak-ink); border:1px solid var(--weak-border); }

/* ---------- Nav ---------- */

.navbar{
  background:var(--surface); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:1030;
}
.navbar-brand{ font-weight:700; letter-spacing:-.02em; color:var(--ink); font-family:"Fraunces",Georgia,serif; font-size:1.45rem; }
.navbar-brand:hover{ color:var(--ink); }
.brand-dot{ color:var(--brand-accent); }

.nav-links{ display:flex; align-items:center; gap:.25rem; }
.nav-links .nav-link{
  color:var(--body); padding:.5rem .75rem; border-radius:.5rem; font-size:.95rem;
  transition:background-color .15s ease, color .15s ease;
}
.nav-links .nav-link:hover,.nav-links .nav-link:focus{ background:var(--surface-2); color:var(--ink); }
/* Without this you cannot tell which page you are on. */
.nav-links .nav-link.active{ color:var(--brand-accent); box-shadow:inset 0 -2px 0 var(--brand-accent); }

.nav-divider{ width:1px; align-self:stretch; margin:.35rem 1rem; background:var(--border); }

.nav-account{ display:flex; align-items:center; gap:.6rem; }
/* Bootstrap's .btn-sm + .btn-pill padding renders these ~36px tall, under the 44px touch-target
   minimum (WCAG 2.5.5/2.5.8). min-height + flex centring fixes the tap area without changing
   the pill's horizontal padding or font size. */
.nav-account .btn{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.avatar-chip{
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--ink); font-size:.75rem; font-weight:600; letter-spacing:.02em;
}
.btn-pill{ border-radius:50rem; padding:.4rem 1rem; font-size:.875rem; }

/* ---------- Landing ---------- */

/* PLACEHOLDER â€” swap for hero image. Layered radial gradients stand in for a photograph that
   is coming later; drop them for a background-image and keep the border-bottom. */
.hero{
  background:
    radial-gradient(1200px 600px at 15% -10%, var(--hero-tint-1), transparent 60%),
    radial-gradient(900px 500px at 85% 10%,  var(--hero-tint-2), transparent 55%),
    linear-gradient(180deg, var(--hero-far) 0%, var(--bg) 100%);
  border-bottom:1px solid var(--border);
}
.hero h1{
  font-size:clamp(2.5rem,5vw,4rem); letter-spacing:-.02em; line-height:1.05; font-weight:700;
}
.hero .lead{ font-size:1.125rem; max-width:60ch; }

/* Full-bleed bands inside base.html's .container â€” negative margins beat restructuring the
   container out of base.html, which every other page depends on. */
.bleed{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding-left:1rem; padding-right:1rem; }

.section{ padding:5rem 0; }
.section-eyebrow{
  color:var(--brand-accent); font-size:.8rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; margin-bottom:.5rem;
}
.section-title{ font-size:clamp(1.75rem,3vw,2.5rem); letter-spacing:-.02em; font-weight:700; }

.feature-card{ transition:transform .15s ease, border-color .15s ease; }
.feature-card:hover{ transform:translateY(-3px); border-color:var(--brand-accent); }
.feature-icon{ color:var(--brand-accent); }

.step-number{
  display:inline-flex; align-items:center; justify-content:center;
  width:2.5rem; height:2.5rem; border-radius:50%;
  background:var(--brand-glow); border:1px solid var(--brand-accent);
  color:var(--brand-accent); font-weight:700;
}

/* ---------- Footer ---------- */

.site-footer{
  background:var(--surface); border-top:1px solid var(--border);
  padding:3rem 0; margin-top:4rem; color:var(--muted); font-size:.9rem;
}
.site-footer a{ color:var(--body); text-decoration:none; }
.site-footer a:hover{ color:var(--brand-accent); }
.site-footer summary{ cursor:pointer; color:var(--muted); }

/* ---------- Auth pages ---------- */

.auth-wrap{ max-width:420px; margin:3rem auto; }
.auth-wrap h1{ font-size:1.5rem; font-weight:700; margin-bottom:1rem; }
.auth-wrap form input{
  display:block; width:100%; padding:.5rem .75rem; margin:.35rem 0 1rem;
  background:var(--surface-2); border:1px solid var(--border); border-radius:.5rem;
  color:var(--ink);
}
.auth-wrap form input:focus{
  outline:0; border-color:var(--brand-accent); box-shadow:0 0 0 .25rem var(--brand-glow);
}
/* allauth renders bare checkboxes ("Remember me") through the same selector â€” a full-width
   32px checkbox is not what that rule is for. */
.auth-wrap form input[type=checkbox]{
  display:inline-block; width:auto; margin:0 .4rem 0 0; padding:0;
}
.auth-wrap form button,.auth-wrap form [type=submit]{
  background:var(--brand); color:#fff; border:0; padding:.55rem 1rem;
  border-radius:50rem; width:100%; font-weight:600;
}
.auth-wrap a{ color:var(--brand-accent); font-weight:600; text-decoration:none; }
.auth-wrap a:hover{ text-decoration:underline; }

/* revisormed-mobile-nav-v1 */
.mobile-nav-toggle{
  width:42px;
  height:40px;
  padding:9px 8px;
  border:1px solid rgba(31,41,55,.18);
  border-radius:9px;
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  box-shadow:0 2px 8px rgba(15,23,42,.04);
}
.mobile-nav-toggle span{
  display:block;
  width:20px;
  height:2px;
  border-radius:999px;
  background:#263244;
}
.mobile-nav-toggle:hover,
.mobile-nav-toggle:focus-visible{
  border-color:var(--brand,#006DAA);
  box-shadow:0 0 0 3px rgba(0,109,170,.10);
  outline:0;
}
.mobile-nav-offcanvas{
  --bs-offcanvas-width:min(86vw,350px);
  background:#fff;
  color:#18202c;
}
.mobile-nav-offcanvas .offcanvas-header{
  padding:1.1rem 1.15rem;
  border-bottom:1px solid #e5e9ef;
  background:linear-gradient(135deg,#f3f8fc,#fff);
}
.mobile-nav-eyebrow{
  margin-bottom:.1rem;
  color:var(--brand,#006DAA);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.mobile-nav-offcanvas .offcanvas-title{
  margin:0;
  font-size:1.1rem;
  font-weight:750;
}
.mobile-nav-offcanvas .offcanvas-body{
  display:flex;
  min-height:0;
  flex-direction:column;
  padding:1rem;
}
.mobile-nav-list{
  display:grid;
  gap:.35rem;
}
.mobile-nav-list .nav-link{
  display:flex;
  align-items:center;
  min-height:45px;
  padding:.68rem .78rem;
  border:1px solid transparent;
  border-radius:8px;
  color:#293547;
  font-weight:650;
  text-decoration:none;
}
.mobile-nav-list .nav-link:hover{
  border-color:#dce5ee;
  background:#f7f9fc;
  color:#18202c;
}
.mobile-nav-list .nav-link.active{
  border-color:rgba(0,109,170,.18);
  background:#edf7fc;
  color:var(--brand,#006DAA);
}
.mobile-nav-list .nav-link.active::before{
  content:"";
  width:4px;
  height:20px;
  margin-right:.65rem;
  border-radius:999px;
  background:var(--brand,#006DAA);
}
.mobile-nav-account{
  margin-top:auto;
  padding-top:1rem;
  border-top:1px solid #e5e9ef;
}
.mobile-nav-user{
  display:flex;
  align-items:center;
  gap:.65rem;
  margin-bottom:.85rem;
}
.mobile-nav-user div{
  min-width:0;
  display:grid;
  gap:.05rem;
}
.mobile-nav-user small{
  color:#778293;
  font-size:.65rem;
}
.mobile-nav-user strong{
  overflow:hidden;
  color:#253044;
  font-size:.78rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mobile-nav-guest{
  display:grid;
  gap:.65rem;
}
.mobile-nav-guest p{
  margin:0 0 .35rem;
  color:#667386;
  font-size:.88rem;
  line-height:1.5;
}
@media (max-width:767.98px){
  .navbar .container{
    min-height:52px;
  }
  .navbar-brand{
    margin-right:.75rem;
  }
}

/* ---------- Type scale ---------- */
/* Added so page-level stylesheets stop inventing their own heading sizes.
   Every page heading, eyebrow and stat figure resolves to one of these;
   page files must not declare their own font-size for those roles. */
:root{
  --fs-page-title:  clamp(1.9rem, 4vw, 2.6rem);
  --fs-section:     clamp(1.4rem, 2.5vw, 1.75rem);
  --fs-card-title:  1.05rem;
  --fs-body:        .95rem;
  --fs-small:       .82rem;
  --fs-eyebrow:     .75rem;
  --fs-stat:        2rem;
  --fs-stat-hero:   clamp(2.25rem, 5vw, 2.75rem);
}

/* ---------- Shared page header ---------- */
/* Practice, Review, Textbook and Review Library each built their own
   eyebrow + H1 + lead. This is that pattern, once.

   All the header's vertical rhythm lives here so every page's eyebrow starts
   at the same y and the block occupies the same height: .5rem above the
   eyebrow, .35rem to the title, .5rem to the lead, 1.5rem below the lead to
   the first content. Pages must not add their own margins/padding to these —
   a page-local mb-* or a shell padding-top reopens the drift this closes. */
.page-title{
  font-size:var(--fs-page-title); font-weight:700;
  letter-spacing:-.025em; line-height:1.1; margin:0 0 .5rem;
}
.page-eyebrow{
  display:block; margin:.5rem 0 .35rem; color:var(--brand-accent);
  font-size:var(--fs-eyebrow); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
}
.page-lead{
  max-width:70ch; margin:0 0 1.5rem; color:var(--muted);
  font-size:1rem; line-height:1.6;
}

/* ---------- UCAT exam focus ---------- */
/* The exam reminder sits beside the signed-in student's name so the date they are
   working towards stays visible without turning the whole navbar into a dashboard. */
.nav-exam-chip{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"kicker main" "kicker place";
  column-gap:.5rem;
  align-items:center;
  max-width:190px;
  min-height:44px;
  padding:.35rem .65rem;
  border:1px solid var(--border);
  border-radius:.7rem;
  background:var(--surface-2);
  color:var(--ink);
  text-align:left;
  line-height:1.15;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.nav-exam-chip:hover,.nav-exam-chip:focus-visible{
  border-color:var(--brand-accent);
  background:var(--surface);
  box-shadow:0 0 0 3px var(--brand-glow);
  outline:0;
}
.nav-exam-kicker{
  grid-area:kicker;
  align-self:stretch;
  display:flex;
  align-items:center;
  padding-right:.5rem;
  border-right:1px solid var(--border);
  color:var(--brand-accent);
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.08em;
}
.nav-exam-main{ grid-area:main; font-size:.78rem; font-weight:700; white-space:nowrap; }
.nav-exam-place{
  grid-area:place;
  overflow:hidden;
  color:var(--muted);
  font-size:.65rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.exam-details-modal{ border-color:var(--border); background:var(--surface); }
.exam-details-eyebrow{
  display:block;
  margin-bottom:.15rem;
  color:var(--brand-accent);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.exam-mode-picker{ display:grid; grid-template-columns:1fr 1fr; gap:.65rem; }
.exam-mode-picker label{ position:relative; cursor:pointer; }
.exam-mode-picker input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
.exam-mode-picker span{
  display:grid;
  gap:.2rem;
  min-height:76px;
  padding:.8rem .9rem;
  border:1px solid var(--border);
  border-radius:.7rem;
  background:var(--surface-2);
}
.exam-mode-picker strong{ color:var(--ink); font-size:.9rem; }
.exam-mode-picker small{ color:var(--muted); font-size:.72rem; line-height:1.35; }
.exam-mode-picker input:checked + span{
  border-color:var(--brand-accent);
  background:var(--brand-glow);
  box-shadow:inset 0 0 0 1px var(--brand-accent);
}
.exam-mode-picker input:focus-visible + span{ outline:3px solid var(--brand-glow); outline-offset:2px; }

.exam-location-remote .form-text::before{ content:"Remote selected Â· "; font-weight:600; color:var(--brand-accent); }



.exam-location-remote .form-text::before{ content:"Remote selected Â· "; font-weight:600; color:var(--brand-accent); }



.exam-location-remote .form-text::before{ content:"Remote selected Â· "; font-weight:600; color:var(--brand-accent); }



.exam-location-remote .form-text::before{ content:"Remote selected Â· "; font-weight:600; color:var(--brand-accent); }


.exam-location-remote .form-text::before{ content:"Remote selected Â· "; font-weight:600; color:var(--brand-accent); }



.exam-location-remote .form-text::before{ content:"Remote selected Â· "; font-weight:600; color:var(--brand-accent); }

.exam-location-remote .form-text::before{ content:"Remote selected · "; font-weight:600; color:var(--brand-accent); }






.mobile-exam-card{
  width:100%;
  display:grid;
  gap:.12rem;
  margin-bottom:.85rem;
  padding:.75rem .8rem;
  border:1px solid var(--border);
  border-radius:.7rem;
  background:var(--surface-2);
  color:var(--ink);
  text-align:left;
}
.mobile-exam-card > span{ color:var(--brand-accent); font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.mobile-exam-card strong{ font-size:.9rem; }
.mobile-exam-card small{ color:var(--muted); font-size:.72rem; }

/* ---------- Planning engine focus ---------- */
.planner-focus-card{
  border-color:color-mix(in srgb, var(--brand-accent) 45%, var(--border));
  box-shadow:0 10px 26px rgba(15,23,42,.05);
}
.planner-focus-head{ display:flex; align-items:flex-start; gap:.8rem; }
.planner-focus-mark{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:2.35rem;
  height:2.35rem;
  border-radius:.7rem;
  background:var(--brand-glow);
  color:var(--brand-accent);
  font-size:1.25rem;
  font-weight:700;
}
.planner-university-select{ min-height:48px; font-weight:600; }
.planner-university-combo{ position:relative; }
.planner-university-listbox{
  position:absolute;
  top:calc(100% + .3rem);
  left:0;
  right:0;
  z-index:20;
  margin:0;
  padding:.3rem;
  list-style:none;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:.6rem;
  box-shadow:0 10px 26px rgba(15,23,42,.12);
}
.planner-university-listbox li{
  padding:.5rem .6rem;
  border-radius:.4rem;
  font-weight:600;
  cursor:pointer;
}
.planner-university-listbox li.is-active,
.planner-university-listbox li:hover{
  background:var(--brand-glow);
  color:var(--brand-accent);
}
.planner-save-state{ margin-top:.45rem; color:var(--muted); font-size:.72rem; }

.uni-focus-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin:1rem;
  padding:.85rem 1rem;
  border:1px solid color-mix(in srgb, var(--brand-accent) 35%, var(--border));
  border-radius:.75rem;
  background:var(--brand-glow);
}
.uni-focus-summary > div{ display:grid; gap:.12rem; }
.uni-focus-kicker{ color:var(--brand-accent); font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.uni-focus-summary strong{ color:var(--ink); font-size:.95rem; }
.uni-focus-summary small{ color:var(--muted); font-size:.72rem; }
.uni-focus-gap{
  flex:0 0 auto;
  padding:.35rem .6rem;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
}
.uni-focus-gap.on-track{ background:rgba(22,163,74,.12); color:var(--success-badge); }
.uni-focus-gap.needs-work{ background:var(--weak-bg); color:var(--weak-ink); }
.uni-target-row{ --bs-table-bg:var(--brand-glow); box-shadow:inset 3px 0 0 var(--brand-accent); }
.uni-target-pill{
  display:inline-block;
  margin-left:.45rem;
  padding:.18rem .42rem;
  border-radius:999px;
  background:var(--brand-accent);
  color:#fff;
  font-size:.62rem;
  font-weight:700;
  vertical-align:middle;
}

@media (max-width:1199.98px){
  .nav-exam-chip{ max-width:128px; }
  .nav-exam-place{ display:none; }
  .nav-exam-chip{ grid-template-areas:"kicker main"; grid-template-rows:1fr; }
}
@media (max-width:575.98px){
  .exam-mode-picker{ grid-template-columns:1fr; }
  .uni-focus-summary{ align-items:flex-start; flex-direction:column; }
}

/* Review-page UCAT section palette */
:root{
  --vr-soft:#EAF6FC;
  --dm-soft:#F0EDFF;
  --qr-soft:#EAF8F6;
  --sjt-soft:#FFF1EA;

  --vr-tint:var(--vr-soft);
  --dm-tint:var(--dm-soft);
  --qr-tint:var(--qr-soft);
  --sjt-tint:var(--sjt-soft);

  --vr-ink:var(--vr);
  --dm-ink:var(--dm);
  --qr-ink:var(--qr);
  --sjt-ink:var(--sjt);
}


/* UNIFIED UCAT BRAND BLUE START */

:root{
    /* One section colour across the whole product */
    --vr:var(--brand-accent);
    --dm:var(--brand-accent);
    --qr:var(--brand-accent);
    --sjt:var(--brand-accent);

    --vr-ink:var(--brand-accent);
    --dm-ink:var(--brand-accent);
    --qr-ink:var(--brand-accent);
    --sjt-ink:var(--brand-accent);

    /* Only the tint stays light/minimal */
    --vr-soft:color-mix(in srgb,var(--brand-accent) 7%,var(--surface));
    --dm-soft:color-mix(in srgb,var(--brand-accent) 7%,var(--surface));
    --qr-soft:color-mix(in srgb,var(--brand-accent) 7%,var(--surface));
    --sjt-soft:color-mix(in srgb,var(--brand-accent) 7%,var(--surface));

    --vr-tint:var(--vr-soft);
    --dm-tint:var(--dm-soft);
    --qr-tint:var(--qr-soft);
    --sjt-tint:var(--sjt-soft);
}

/* UNIFIED UCAT BRAND BLUE END */


