/* ==========================================================================
   aheetest.in — AHEE's layer over the shared components
   --------------------------------------------------------------------------
   The decision record is design-system/AHEE.md. Every component comes from
   claverton.css unchanged; this file swaps the tokens so they read as AHEE's
   own (indigo and sky, DM Sans throughout, no serif), then adds what only
   this site has: the hero and dates card, the section weights, the college
   cards, and the candidate portal.
   ========================================================================== */

/* ------------------------------------------------------------------ tokens */
:root {
  --c-ink:        #1d2b5c;   /* indigo: headings, buttons, dark bands */
  --c-navy:       #131d42;   /* indigo, deeper: strip, hover */
  --c-navy-600:   #2b3b76;
  --c-navy-400:   #5061a6;
  --c-brass:      #48b9f6;   /* sky: the one accent. Indigo text on it passes AA */
  --c-brass-600:  #2aa3e6;   /* sky, deeper: rules, dots, ticks, hover */
  --c-brass-deep: #0b679f;   /* sky that passes as text on white; deepened in "readability" */
  --c-brass-300:  #86d3fb;   /* sky on indigo */
  --c-brass-050:  #e4f5fe;
  --c-teal:       #2446a8;   /* links, focus, checked states */
  --c-teal-300:   #7d93d6;
  --c-teal-050:   #e8edfa;
  --c-sky:        #e1e8f8;

  --c-char:       #1a2135;
  --c-linen:      #f5f7fc;
  --c-mist:       #eef2fa;
  --c-cloud:      #dfe6f6;
  --c-line:       #dde3ef;
  --c-line-soft:  #edf0f7;
  --c-muted:      #596178;   /* darkened for reading in "readability", below */
  --c-muted-2:    #5f6780;

  --c-on-dark:        #f5f7fc;
  --c-on-dark-muted:  rgba(245, 247, 252, .78);
  --c-on-dark-line:   rgba(245, 247, 252, .16);

  /* One family. Headings are DM Sans at 700, set tight. */
  --f-serif: var(--f-sans);

  --sh-1: 0 1px 2px rgba(29, 43, 92, .05), 0 1px 3px rgba(29, 43, 92, .04);
  --sh-2: 0 2px 6px rgba(29, 43, 92, .05), 0 12px 28px -16px rgba(29, 43, 92, .24);
  --sh-3: 0 6px 14px rgba(29, 43, 92, .05), 0 28px 56px -30px rgba(29, 43, 92, .32);
}

/* Components here set their own display; `hidden` must still win. */
.ahee [hidden] { display: none !important; }

/* ------------------------------------------------------- the sans headings */
.ahee :is(.display, .h1, .h2, .h3, .h4, .card__title, .phero__title, .hero__title, .mnav__solo, .mnav__head, .pstep__dot, .en-when__list b, .stat__value, .tl-item__t) {
  font-weight: 700; letter-spacing: -.021em;
}
.ahee .h4, .ahee .card__title { letter-spacing: -.012em; }
.ahee .card__title { font-size: 1.14rem; line-height: 1.3; }
.ahee .lede, .ahee .phero__lede { color: #39425a; }
.ahee .on-dark .lede { color: var(--c-on-dark-muted); }
.ahee .acc > summary { font-weight: 700; }

/* ---------------------------------------------------------------- the mark */
.ahee-mark__bg { fill: var(--c-ink); }
.ahee-mark__a { stroke: #fff; }
.ahee-mark__tick { stroke: var(--c-brass); }
.footer .ahee-mark__bg { fill: #fff; }
.footer .ahee-mark__a { stroke: var(--c-ink); }
.footer .ahee-mark__tick { stroke: var(--c-brass-600); }
.ahee .brand__mark { width: 40px; height: 40px; filter: none; }
.ahee .brand__name { font-weight: 700; letter-spacing: .08em; font-size: 1.2rem; }
.ahee .brand__sub { letter-spacing: .14em; font-size: .56rem; color: var(--c-muted-2); }
.ahee .footer__brand .brand__mark { width: 48px; height: 48px; filter: none; }
.ahee .footer__brand .brand__sub { color: var(--c-brass-300); }

/* ------------------------------------------------------- shared re-tints */
/* The header and the exam page's "On this page" bar are plain full-width
   bars with a rule under them, not floating rounded panels; the footer has
   square corners and meets the last section directly (AHEE.md §8). The
   content inside lines up with the page's own container. --header-h is the
   sticky height, header plus "On this page" bar where there is one, so a
   heading reached from a link is not hidden under them. */
:root { --header-h: 71px; }
:root:has(.subnav) { --header-h: 124px; }
.ahee .masthead { padding: 0; background: var(--c-white); border-bottom: 1px solid var(--c-line); pointer-events: auto; }
.ahee .masthead__in { height: 70px; min-height: 0; padding: 0 var(--s-5); border: 0; border-radius: 0; box-shadow: none; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.ahee .masthead.is-stuck .masthead__in { box-shadow: none; }
.ahee .subnav { top: 71px; padding: 0; background: var(--c-white); border-bottom: 1px solid var(--c-line); }
.ahee .subnav__in { padding: 0 var(--s-5); border: 0; border-radius: 0; box-shadow: none; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* The current section in the "On this page" bar is marked as the menu marks
   the current page, with a sky underline, not a filled pill. The weight does
   not change, so the links do not shift as the reader scrolls. */
.ahee .subnav__links a { border-radius: 0; }
.ahee .subnav__links a:hover { background: none; color: var(--c-ink); }
.ahee .subnav__links a.is-active { background: none; color: var(--c-ink); box-shadow: inset 0 -2px 0 var(--c-brass); }
/* The hamburger's three lines sit together in the middle of the button. */
.ahee .burger { align-content: center; }
.ahee .footer { border-radius: 0; margin-top: 0; }
/* Cards are not links, so they do not lift or cast a shadow on hover. */
.ahee .card--raise:hover { transform: none; box-shadow: none; border-color: var(--c-line); }
/* Page heads are a plain band: no glow behind the title. */
.ahee .phero::before { display: none; }
.ahee .footer { color: rgba(245, 247, 252, .82); }
/* Lists of statements take a plain dot, not a check mark: a tick beside
   "AHEE does not admit students" would read as a contradiction. */
.ahee .ticks li::before { width: 6px; height: 6px; margin-top: .62em; margin-left: 4px; border: 0; border-radius: 50%; transform: none; background: var(--c-ink); }
.ahee .on-dark .ticks li::before { background: var(--c-brass-300); }
.ah-measure { max-width: 860px; }
.ah-nowrap { white-space: nowrap; }
.ahee .mt-2 { margin-top: var(--s-2); }
.ah-center { justify-content: center; }
.text-center .cluster { justify-content: center; }

/* -------------------------------------------------------------------- hero */
.hero { position: relative; overflow: hidden; }
/* A plain indigo band: no glow and no coloured rule. */
.hero--home { background: var(--c-ink); color: var(--c-on-dark); }
.hero__in { display: grid; gap: clamp(36px, 4vw, 64px); grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr); align-items: center; padding-block: clamp(48px, 5vw, 88px); }
.hero__copy > * + * { margin-top: var(--s-5); }
.hero__title { font-family: var(--f-sans); font-size: var(--t-display); line-height: 1.1; color: inherit; }
.hero__lede { font-size: var(--t-lede); color: var(--c-on-dark-muted); max-width: 54ch; line-height: 1.55; }
.hero__lede strong { color: var(--c-on-dark); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); padding-top: var(--s-2); }

/* The key dates card in the hero, and the attempts list on /exam/. */
.en-when {
  justify-self: end; width: min(100%, 460px);
  background: var(--c-white); color: var(--c-char);
  border-radius: var(--r-md); padding: clamp(22px, 2.4vw, 32px);
  box-shadow: 0 40px 80px -50px rgba(0, 0, 0, .8);
}
.en-when__k { font-size: 1.125rem; font-weight: 700; color: var(--c-ink); line-height: 1.4; }
.en-when__list { margin-top: var(--s-4); display: grid; }
.en-when__list li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: 12px 0; border-bottom: 1px solid var(--c-line-soft); }
.en-when__list span { font-size: .92rem; color: var(--c-muted); }
.en-when__list b { font-size: 1.02rem; line-height: 1.3; color: var(--c-ink); text-align: right; }
.en-when__list b .tba { font-size: .9rem; font-weight: 400; }
/* The card is white inside the dark hero: its "To be announced" takes the light-surface colour back. */
.en-when .tba { color: var(--c-muted-2); }
.en-when__note { margin: var(--s-4) 0 var(--s-3); font-size: .82rem; color: var(--c-muted-2); }
.en-when .textlink { color: var(--c-ink); border-color: var(--c-brass); }
.en-when .textlink:hover { border-color: var(--c-ink); }
.en-exact { display: block; margin-top: 2px; font-size: .8rem; font-weight: 400; color: var(--c-muted-2); }
.ah-sittings { margin-top: var(--s-3); }

/* ----------------------------------------------------------- the five steps */
.ah-steps { list-style: none; }
/* Step titles at the size of every other card title, above the step text. */
.ahee .ah-steps .pstep__title { font-size: 1.14rem; line-height: 1.3; }

/* ------------------------------------------------------- section weights */
.ah-weights { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
.ah-weights__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); }
.ah-weights__head b { font-size: 1rem; color: var(--c-ink); }
.ah-weights__head span { font-weight: 700; font-size: 1rem; color: var(--c-brass-deep); font-variant-numeric: tabular-nums; }
.ah-weights__bar { margin-top: 8px; height: 10px; border-radius: var(--r-pill); background: var(--c-mist); overflow: hidden; }
.ah-weights__bar span { display: block; height: 100%; border-radius: inherit; background: var(--c-ink); }
.ah-weights__body { margin-top: 6px; font-size: .88rem; color: var(--c-muted); }

/* ---------------------------------------------------------------- colleges */
.ah-college__head { display: flex; gap: var(--s-4); align-items: center; }
.ah-college__head .card__icon { margin-bottom: 0; }
.ah-college__city { margin-top: 3px; font-size: .9rem; color: var(--c-muted); }
.ah-desk { border-color: var(--c-line); }
.ah-faq-group + .ah-faq-group { margin-top: var(--s-10); }
.ah-faq { margin-inline: auto; }
.ah-404__mark { display: inline-block; }

/* ======================================================= the candidate portal */
.ah-phead { background: var(--c-linen); border-bottom: 1px solid var(--c-line); padding-block: clamp(28px, 3vw, 44px); }
.ah-phead__title { margin-top: var(--s-4); font-size: var(--t-h2); line-height: 1.08; font-weight: 700; letter-spacing: -.021em; color: var(--c-ink); }
.ah-phead__title:first-child { margin-top: 0; }
.ah-phead__lede { margin-top: var(--s-4); max-width: 64ch; color: #39425a; font-size: 1.02rem; }

.ah-portal-grid { display: grid; gap: var(--s-7); grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.ah-portal-grid > * { min-width: 0; }
.ah-portal-grid--narrow { grid-template-columns: minmax(0, 560px); justify-content: center; }
.ah-panel { background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: clamp(22px, 3vw, 40px); box-shadow: var(--sh-2); }
.ah-aside .card { padding: var(--s-6); }

.ah-closed { text-align: left; }
.ahee .ah-closed { box-shadow: none; }
/* Register while the portal is closed: the notice spans the page and the
   three cards sit in a row beneath it, so no column stands half empty. */
.ah-portal-grid--closed { grid-template-columns: minmax(0, 1fr); }
.ah-portal-grid--closed .ah-aside { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); align-items: start; }
.ah-portal-grid--closed .ah-aside > .card { margin-top: 0; }
@media (max-width: 900px) { .ah-portal-grid--closed .ah-aside { grid-template-columns: minmax(0, 1fr); } }

.ah-progress { display: flex; gap: var(--s-2); margin-bottom: var(--s-7); counter-reset: none; flex-wrap: wrap; }
.ah-progress li { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: var(--r-pill); background: var(--c-mist); font-size: .84rem; font-weight: 500; color: var(--c-muted); }
.ah-progress li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--c-white); border: 1px solid var(--c-line); font-size: .76rem; font-weight: 700; }
.ah-progress li.is-current { background: var(--c-ink); color: var(--c-white); }
.ah-progress li.is-current span { background: var(--c-brass); border-color: var(--c-brass); color: var(--c-ink); }
.ah-progress li.is-done span { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-white); }

.ah-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.ah-form__intro { font-size: .94rem; color: var(--c-muted); line-height: 1.55; }
.ah-form__intro b { color: var(--c-ink); }
.ah-form__links { display: flex; flex-wrap: wrap; gap: var(--s-5); justify-content: space-between; }
.ah-form__foot { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--c-line-soft); font-size: .92rem; color: var(--c-muted); }
/* A fieldset is as wide as its widest option by default (the longest state
   name); min-width: 0 lets it shrink with the page like any other block. */
.ah-fieldset { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); min-width: 0; }
.ah-form .select, .ah-form .input { max-width: 100%; min-width: 0; }
.ah-fieldset + .ah-fieldset { padding-top: var(--s-5); border-top: 1px solid var(--c-line-soft); }
.ah-fieldset legend { padding: 0; margin-bottom: var(--s-4); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--c-brass-deep); }
.ah-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
.ah-sent { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: var(--s-4); border-radius: var(--r-sm); background: var(--c-teal-050); color: var(--c-ink); font-size: .92rem; line-height: 1.5; }
.ah-sent svg { margin-top: 2px; }
.ah-linkbtn { padding: 0; font-size: .88rem; font-weight: 700; color: var(--c-teal); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(36, 70, 168, .35); }
.ah-linkbtn:hover { text-decoration-color: currentColor; }
.ah-linkbtn:disabled { color: var(--c-muted-2); text-decoration: none; cursor: default; }
/* Long form buttons wrap rather than spill out of a narrow card. */
.ah-form .btn, .ah-done .btn { white-space: normal; height: auto; min-height: 54px; padding-block: 12px; text-align: center; line-height: 1.3; }
.ahee .form-status { margin-top: var(--s-5); }
.ahee .form-status:empty { display: none; }

.ah-done:focus { outline: none; }
.ah-done__ok { display: flex; align-items: center; gap: 10px; padding: var(--s-4) var(--s-5); border-radius: var(--r-sm); background: rgba(23, 105, 74, .08); border: 1px solid rgba(23, 105, 74, .26); color: var(--c-success); font-weight: 500; }
.ah-done__ok b { color: var(--c-ink); }
.ah-admit { margin: var(--s-6) 0 0; border: 1px solid var(--c-line); border-radius: var(--r-sm); overflow: hidden; background: var(--c-mist); max-width: 520px; }
.ah-admit img { display: block; width: 100%; height: auto; }

.ah-loading { display: flex; align-items: center; gap: 10px; color: var(--c-muted); }

/* The account */
.ah-acct-head { background: var(--c-linen); border-bottom: 1px solid var(--c-line); padding-block: clamp(26px, 3vw, 40px); }
.ah-acct-head__in { display: flex; flex-wrap: wrap; gap: var(--s-5); justify-content: space-between; align-items: end; }
.ah-acct-head__meta { margin-top: var(--s-3); color: var(--c-muted); font-size: .95rem; overflow-wrap: anywhere; }
.ah-acct-head__meta b { color: var(--c-ink); letter-spacing: .04em; }

.ah-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.ah-tile { display: grid; gap: 4px; padding: var(--s-5); background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-md); transition: border-color .18s var(--ease), box-shadow .2s var(--ease); }
.ah-tile:hover { border-color: var(--c-teal-300); box-shadow: var(--sh-2); }
.ah-tile__k { font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--c-muted-2); }
.ah-tile b { font-size: 1.28rem; line-height: 1.2; color: var(--c-ink); letter-spacing: -.01em; }
.ah-tile__s { font-size: .84rem; color: var(--c-muted); }

.ah-acct { display: grid; gap: var(--s-5); margin-top: var(--s-6); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.ah-card { background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-md); padding: clamp(20px, 2.4vw, 30px); scroll-margin-top: calc(var(--header-h) + 16px); }
.ah-card--wide, #documents, #share { grid-column: 1 / -1; }
.ah-card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.ah-card__head h2 { display: flex; align-items: center; gap: 10px; }
.ah-card__head h2 svg { color: var(--c-brass-deep); flex: none; }
.ah-card__lede { margin-top: var(--s-3); font-size: .92rem; color: var(--c-muted); max-width: 70ch; }

.ah-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font-size: .78rem; font-weight: 700; background: var(--c-mist); color: var(--c-muted); border: 1px solid var(--c-line); white-space: nowrap; }
.ah-chip--ok { background: rgba(23, 105, 74, .08); color: var(--c-success); border-color: rgba(23, 105, 74, .24); }
.ah-chip--live { background: var(--c-brass-050); color: var(--c-brass-deep); border-color: rgba(42, 163, 230, .35); }
.ah-chip--warn { background: #fbf4ea; color: var(--c-warn); border-color: rgba(150, 89, 26, .25); }

/* Attempts */
.ah-sit { display: grid; margin-top: var(--s-4); }
.ah-sit li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-4); align-items: center; padding: var(--s-4) 0; border-top: 1px solid var(--c-line-soft); }
.ah-sit__what b { display: block; color: var(--c-ink); }
.ah-sit__what span { font-size: .88rem; color: var(--c-muted); }
.ah-sit__act { display: flex; gap: var(--s-3); align-items: center; justify-content: flex-end; flex-wrap: wrap; }

/* Scores */
.ah-best { display: flex; align-items: baseline; gap: var(--s-3); margin-top: var(--s-4); }
.ah-best b { font-size: 2.2rem; line-height: 1; letter-spacing: -.02em; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.ah-best span { color: var(--c-muted); font-size: .92rem; }
.ah-scores { margin-top: var(--s-4); width: 100%; border-collapse: collapse; font-size: .92rem; }
.ah-scores th, .ah-scores td { text-align: left; padding: 10px 8px; border-top: 1px solid var(--c-line-soft); }
.ah-scores th { font-size: var(--t-label); letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted-2); font-weight: 700; }
.ah-scores td:last-child, .ah-scores th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.ah-scores tr.is-best td { font-weight: 700; color: var(--c-ink); }
.ah-empty { margin-top: var(--s-4); padding: var(--s-5); border-radius: var(--r-sm); background: var(--c-mist); color: var(--c-muted); font-size: .92rem; }

/* Documents and shares */
.ah-docs, .ah-shares { display: grid; margin-top: var(--s-4); }
.ah-doc, .ah-share { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: var(--s-3) var(--s-5); align-items: center; padding: var(--s-4) 0; border-top: 1px solid var(--c-line-soft); }
.ah-doc__what b, .ah-share__what b { display: block; color: var(--c-ink); }
.ah-doc__what span, .ah-share__what span { font-size: .86rem; color: var(--c-muted); }
.ah-doc__state, .ah-share__state { font-size: .86rem; color: var(--c-muted); min-width: 0; overflow-wrap: anywhere; }
.ah-doc__actions, .ah-share__actions { display: flex; gap: var(--s-4); align-items: center; justify-content: flex-end; }
.ah-what { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--c-line-soft); font-size: .92rem; }
.ah-what summary { cursor: pointer; font-weight: 700; color: var(--c-teal); }
.ah-fee { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-4); }
.ah-fee b { font-size: 1.6rem; color: var(--c-ink); letter-spacing: -.01em; }
.ah-form--inline { margin-top: var(--s-5); }

.ah-dialog { border: 0; border-radius: var(--r-md); padding: 0; width: min(560px, calc(100vw - 32px)); box-shadow: var(--sh-3); color: var(--c-char); }
.ah-dialog::backdrop { background: rgba(19, 29, 66, .55); }
.ah-dialog__in { padding: clamp(22px, 3vw, 34px); }

/* The college desk */
.ah-desk-head { display: flex; flex-wrap: wrap; gap: var(--s-5); justify-content: space-between; align-items: end; }
.ah-desk-tools { display: grid; gap: 6px; max-width: 420px; margin: var(--s-6) 0 var(--s-5); }
.ah-desk-table td, .ah-desk-table th { vertical-align: top; }
.ah-desk-table .ah-doclinks { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.ah-desk-table small { display: block; color: var(--c-muted); font-size: .8rem; }

/* The review build's demo controls. Never present in a public build. */
.ah-demo { position: fixed; right: 16px; bottom: 16px; z-index: 120; width: min(320px, calc(100vw - 32px)); background: #fffbea; border: 2px dashed #c98a00; border-radius: 12px; padding: 14px 16px; font-size: .84rem; color: #4a3a05; box-shadow: var(--sh-3); }
.ah-demo b { display: block; margin-bottom: 4px; }
.ah-demo p { margin-bottom: 8px; }
.ah-demo__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.ah-demo button { padding: 5px 9px; border-radius: 7px; border: 1px solid #c98a00; background: #fff; font-size: .78rem; font-weight: 700; color: #4a3a05; }
.ah-demo button:hover { background: #fff3c4; }
.ah-demo__min { position: absolute; top: 6px; right: 8px; border: 0 !important; background: none !important; font-size: 1rem !important; }
.ah-demo.is-min > :not(.ah-demo__min):not(b) { display: none; }

/* Review builds' section codes and note (src/ahee/layout.js). Never present
   in a public build. A review annotation, not part of the design, so it uses
   the same pink as the college site's codes, a colour neither design uses. */
[data-ref] { position: relative; }
.reviewbar {
  margin: 0; padding: 8px 16px; background: #fce4ec; color: #6a1b3a; text-align: center;
  font: 600 13px/1.45 var(--f-sans);
}
.refcode {
  position: absolute; top: 8px; right: 8px; z-index: 40; pointer-events: none;
  padding: 3px 8px; border-radius: 4px; background: #c2185b; color: #fff;
  font: 700 12px/1.3 var(--f-sans); letter-spacing: .06em; font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

/* ============================================================ responsive */
/* The college site drops its outline header button below 1320px to make room
   for a long menu. AHEE's menu is short, and "Log in" is how a candidate gets
   back to the account, so it stays until the phone layout, where the menu
   carries it. */
@media (max-width: 1320px) {
  .ahee .masthead__actions .btn--outline { display: inline-flex; }
}
/* The college site swaps its menu for the menu button below 1200px. AHEE's
   five-item menu fits from 1081px, so it stays in the header until then. */
.ahee .nav__link { font-size: .9375rem; }
@media (min-width: 1081px) and (max-width: 1200px) {
  .ahee .nav { display: flex; }
  .ahee .masthead .burger { display: none; }
}
@media (max-width: 1080px) {
  .hero__in { grid-template-columns: 1fr; }
  .en-when { justify-self: start; }
  .ah-portal-grid { grid-template-columns: minmax(0, 1fr); }
  .ah-acct { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ah-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .hero__in { padding-block: var(--s-8) var(--s-7); gap: var(--s-7); }
  .hero__lede { font-size: 1.0625rem; }
  .en-when { width: 100%; }
  .ah-row { grid-template-columns: minmax(0, 1fr); }
  .ah-doc, .ah-share { grid-template-columns: minmax(0, 1fr) auto; }
  .ah-doc__state, .ah-share__state { grid-column: 1; grid-row: 2; }
  .ah-doc__actions, .ah-share__actions { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; gap: var(--s-2); }
  .ah-sit li { grid-template-columns: 1fr; }
  .ah-sit__act { justify-content: flex-start; }
  .ah-acct-head__in { align-items: start; }
}
@media (max-width: 520px) {
  .ah-tiles { grid-template-columns: 1fr 1fr; gap: var(--s-3); }
  .ah-tile { padding: var(--s-4); }
  .ah-tile b { font-size: 1.08rem; }
  .ahee .masthead__actions .btn--outline { display: none; }
}
@media (max-width: 440px) {
  .hero__actions .btn { width: 100%; }
  .ahee .ah-closed .cluster .btn { width: 100%; }
  .ah-done .btn, .ah-acct-head .btn { width: 100%; white-space: normal; text-align: center; }
  .ah-acct-head__in .cluster { width: 100%; }
  /* On a phone the header keeps the name and the Register button; the hero
     and the menu say what AHEE stands for. */
  .ahee .masthead .brand__sub { display: none; }
  /* The footer has the room, so its brand keeps the full name. */
  .ahee .footer__brand .brand__sub { display: flex; white-space: normal; }
}
@media print {
  .ah-demo, .ah-dialog { display: none !important; }
}

/* ------------------------------------------------------------ readability */
/* Set for Class 12 candidates and for their parents in their forties and
   fifties (design-system/AHEE.md §8, after MASTER.md §11): no reading text
   under 14px, labels in sentence case instead of small spaced capitals,
   secondary text at 7:1 or better on every ground it sits on, brighter text
   on the dark bands, headings in one colour and at modest sizes. Scoped to
   aheetest.in through body.ahee; the college sites keep their own settings. */
body.ahee {
  --t-display: clamp(1.75rem, 1rem + 2.2vw, 3rem);         /* the home page H1: two lines from 1080px up */
  --t-h1:      clamp(1.9rem, 1.4rem + 1.5vw, 2.75rem);
  --t-h2:      clamp(1.6rem, 1.25rem + 1.1vw, 2.4rem);
  --t-small: 1rem;
  --t-micro: .9375rem;
  --t-label: .875rem;
  --c-muted:   #3d4459;   /* 9.7:1 on white, 8.6:1 on mist, 7.9:1 on sky */
  --c-muted-2: #404861;   /* 9.1:1 on white, 8.1:1 on mist, 7.4:1 on sky */
  --c-brass-deep: #074f78; /* dates and step labels: 8.8:1 on white, 7.8:1 on mist */
  --c-on-dark-muted: rgba(245, 247, 252, .9);
}

/* The top strip. Dark indigo text on a light sky band, at reading size, and
   never cut short: on a phone the label sits above the sentence and the
   sentence wraps. */
.ahee .utilbar { background: var(--c-brass-050); color: var(--c-ink); font-size: .9375rem; border-bottom: 1px solid var(--c-line); }
.ahee .utilbar__in { min-height: 46px; padding-block: 7px; }
.ahee .announce { gap: 12px; }
/* The "AHEE 2027" label is plain bold text, not a filled badge. */
.ahee .announce__tag { font-size: .9375rem; padding: 0; color: var(--c-ink); background: none; border-radius: 0; font-weight: 700; }
.ahee .ah-announce { margin: 0; min-width: 0; color: var(--c-ink); font-weight: 500; line-height: 1.4; }
.ahee .utilbar__right a { color: var(--c-ink); font-weight: 600; }
.ahee .utilbar a:hover { color: var(--c-ink); border-bottom-color: var(--c-ink); }
@media (max-width: 620px) {
  .ahee .announce { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Labels read as words, not as spaced capitals. */
.ahee :is(.brand__sub, .announce__tag, .eyebrow, .eyebrow--plain, .deflist__k, .table thead th, .tl-item__k,
  .footer__col-title, .subnav__label, .field__label, .fact__k,
  .ah-fieldset legend, .ah-tile__k, .ah-scores th) {
  text-transform: none; letter-spacing: normal;
}
.ahee .brand__sub { font-size: .875rem; font-weight: 500; color: var(--c-muted-2); }
.ahee .footer__brand .brand__sub { font-size: .9375rem; color: var(--c-brass-300); }
.ahee :is(.deflist__k, .table thead th, .subnav__label) { font-size: .9375rem; color: var(--c-ink); }
.ahee :is(.tl-item__k, .ah-tile__k, .ah-scores th) { font-size: .9375rem; }
.ahee :is(.field__label, .ah-fieldset legend) { font-size: 1rem; color: var(--c-char); }
.ahee .footer__col-title { font-size: 1rem; color: var(--c-on-dark); }
/* The eyebrow is a plain label, not a pill with a dot. */
.ahee .eyebrow { padding: 0; background: none; border: 0; border-radius: 0; font-size: .9375rem; font-weight: 700; color: var(--c-brass-deep); }
.ahee .eyebrow::before { display: none; }
.ahee .on-dark .eyebrow { background: none; border: 0; color: var(--c-brass-300); }

/* Headings: one colour, modest sizes for long plain titles. */
.ahee .hero__title { font-size: var(--t-display); line-height: 1.12; }
.ahee .phero__title { font-size: var(--t-h1); line-height: 1.12; }
.ahee .scroll-progress { display: none; }

/* Text that set its own size below 16px. */
.ahee :is(.card__body, .pstep__body, .tl-item__b, .ticks li, .deflist__v, .check, p.tba, .ah-weights__body,
  .ah-college__city, .ah-form__intro, .ah-form__foot, .ah-sent, .ah-card__lede, .ah-best span, .ah-scores,
  .ah-empty, .ah-what, .ah-acct-head__meta, .form-status, .mnav__meta a, .mnav__meta span, .input, .select, .textarea) {
  font-size: 1rem;
}
.ahee .acc__body { font-size: 1.0625rem; }
.ahee .table { font-size: 1rem; }
/* The last row has no rule under it in either column. */
.ahee .table tbody tr:last-child th { border-bottom: 0; }
.ahee .en-when__list span { font-size: 1rem; }
.ahee :is(.en-when__note, .en-exact, .en-when__list b .tba, .subnav__links a, .btn--sm, .ah-linkbtn,
  .ah-progress li, .ah-tile__s, .ah-sit__what span, .ah-doc__what span, .ah-share__what span, .ah-doc__state,
  .ah-share__state, .ah-desk-table small) {
  font-size: .9375rem;
}
.ahee :is(.ah-chip, .ah-progress li span, .mobile-cta a) { font-size: .875rem; }
.ahee .ah-demo, .ahee .ah-demo button { font-size: .875rem; }

/* The dark bands: text at 88-92% white, placeholders included. */
.ahee .footer { color: rgba(245, 247, 252, .9); }
.ahee .footer a { color: rgba(245, 247, 252, .92); }
.ahee .footer a:hover { color: var(--c-white); }
.ahee :is(.footer__links, .footer__contact) { font-size: 1rem; }
.ahee .footer__contact-item { color: var(--c-on-dark-muted); }
.ahee .footer .tba { color: rgba(245, 247, 252, .88); }
.ahee .footer__legal-in { font-size: .9375rem; color: rgba(245, 247, 252, .88); }
.ahee .footer__disclosure { margin: var(--s-8) 0 0; font-size: .9375rem; color: rgba(245, 247, 252, .88); }
.ahee .footer__contact-item a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(245, 247, 252, .45); }
.ahee .footer__contact-item a:hover { text-decoration-color: currentColor; }

@media (min-width: 721px) {
  /* A stage name ("Registration closes") stays on one line. */
  .ahee .table:not(.ah-desk-table) tbody th { white-space: nowrap; }
  /* A date ("First week of July 2027") does not break across lines. */
  .ahee #schedule .table thead th:nth-child(2) { width: 17rem; }
}
@media (max-width: 720px) {
  .ahee .table { font-size: .9375rem; }
}
@media (max-width: 440px) {
  .ahee .masthead__actions .btn { font-size: .875rem; }
  /* The dates card: each label above its date, so no date breaks across lines. */
  .ahee .en-when__list li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ahee .en-when__list b { text-align: left; }
}
/* A definition's value lines up with its term, without the browser's indent. */
.ahee .deflist__v { margin: 0; }
/* Status text at 7:1: the message reads in indigo, the colour stays on the
   icon and border; chips use deeper shades of MASTER's functional colours. */
.ahee .ah-done__ok { color: var(--c-ink); }
.ahee .ah-done__ok svg { color: var(--c-success); }
.ahee .ah-chip--ok { color: #0f5a3d; }
.ahee .ah-chip--warn { color: #6e3f0f; }
/* Two fields side by side line up at the top, whatever hint one carries. */
.ahee .ah-row { align-items: start; }
/* Review builds: a placeholder in the dark footer reads in light sky. */
.ahee .footer .placeholder { color: var(--c-brass-300); border-color: rgba(134, 211, 251, .55); }

/* ------------------------------------------------------------- the phone */
/* The five steps run across the page only where all five fit; below that
   they read down the page, so the row never scrolls sideways. */
@media (max-width: 1040px) {
  .ah-steps { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; gap: var(--s-6); padding-bottom: 0; }
  /* Read down the page, the steps keep a reading line length under the
     centred heading; the vertical rule is drawn on the list, so it moves too. */
  .ahee .ah-steps { max-width: 720px; margin-inline: auto; }
  .ah-steps::before { left: 21px; right: auto; top: 22px; bottom: 22px; width: 1px; height: auto; }
  .ah-steps > .pstep { min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s-4); align-items: start; }
  .ah-steps .pstep__dot { grid-row: 1 / span 2; margin-bottom: 0; }
  .ah-steps .pstep__title, .ah-steps .pstep__body { grid-column: 2; }
}
/* The plain header is 60px high on a phone. The "On this page" bar does not
   stick under it there: it stays where it is in the page and its links wrap
   onto a second line, so none is cut off at the edge of the screen. */
@media (max-width: 720px) {
  :root { --header-h: 61px; }
  :root:has(.subnav) { --header-h: 61px; }
  .ahee .masthead { padding: 0; }
  .ahee .masthead__in { height: 60px; padding: 0 var(--s-4); border-radius: 0; }
  .ahee .subnav { position: static; padding: 0; }
  .ahee .subnav__in { min-height: 0; padding: var(--s-2) var(--s-4); }
  .ahee .subnav__links { flex-wrap: wrap; overflow: visible; padding-right: 0; -webkit-mask-image: none; mask-image: none; }

  /* No sideways-swipe rows: text cards stack in one column, so no card is
     cut off at the edge of the screen (claverton.css turns three- and
     four-up grids into a swipe row; this undoes it for aheetest.in). */
  .ahee :is(.grid-3, .grid-4) {
    display: grid; grid-template-columns: minmax(0, 1fr);
    overflow: visible; scroll-snap-type: none;
    margin-inline: 0; padding-inline: 0; padding-bottom: 0;
  }
  .ahee :is(.grid-3, .grid-4) > * { flex: initial; scroll-snap-align: none; }

  /* The dates tables read down the page, one row per block, with no
     sideways scrolling: the stage, then the date, then the note. The
     column heads stay in the markup for screen readers. */
  .ahee .table:not(.ah-desk-table) { min-width: 0; }
  .ahee .table:not(.ah-desk-table) thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .ahee .table:not(.ah-desk-table) tbody tr { display: grid; gap: 4px; padding: var(--s-4); border-bottom: 1px solid var(--c-line-soft); }
  .ahee .table:not(.ah-desk-table) tbody tr:last-child { border-bottom: 0; }
  .ahee .table:not(.ah-desk-table) :is(th, td) { display: block; padding: 0; border: 0; position: static; background: none; }
  .ahee .table:not(.ah-desk-table) tbody tr:hover :is(th, td) { background: none; }
  .ahee .table:not(.ah-desk-table) tbody th { font-size: 1.0625rem; }
  /* The colleges' table has two values that can both read "To be
     announced", so each carries its column name (the table's own heads). */
  .ahee #colleges .table td::before { display: block; font-size: .9375rem; font-weight: 500; color: var(--c-muted); }
  .ahee #colleges .table td:nth-of-type(1)::before { content: "Application dates"; }
  .ahee #colleges .table td:nth-of-type(2)::before { content: "Website"; }
  .ahee #colleges .table tbody tr { gap: var(--s-3); }
}
/* The menu: a line with no icon lines up with the lines that have one. */
.ahee .mnav__meta .ah-noicon { padding-left: 27px; }

/* The privacy notice, written by AHEE in src/ahee/privacy-notice.txt and
   turned into headings, paragraphs and lists by src/ahee/policy.js. */
.ah-policy > :first-child { margin-top: 0; }
.ah-policy h2 { margin-top: var(--s-9); }
.ah-policy h3 { margin-top: var(--s-7); }
.ah-policy :is(h2, h3) + :is(p, ul) { margin-top: var(--s-4); }
.ah-policy p + ul, .ah-policy ul + p, .ah-policy ul + ul { margin-top: var(--s-4); }

/* ===================================================== the candidate account */
/* A dashboard: four status tiles, then the menu (Profile, Documents, AHEE)
   beside the open section, and a contact note under every section. */
.ah-dash { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-6); margin-top: var(--s-6); align-items: start; }
.ah-menu { display: grid; gap: 4px; position: sticky; top: calc(var(--header-h) + 16px); }
.ah-menu a {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-sm);
  border: 1px solid transparent; color: var(--c-ink); font-weight: 700; font-size: 1rem; text-decoration: none;
}
.ah-menu a svg { color: var(--c-brass-deep); flex: none; }
.ah-menu a:hover { background: var(--c-white); border-color: var(--c-line); }
.ah-menu a.is-current { background: var(--c-white); border-color: var(--c-line); box-shadow: inset 3px 0 0 var(--c-brass); }
.ah-dash__main { display: grid; gap: var(--s-5); min-width: 0; }
.ah-dash__main > [data-panel] { display: grid; gap: var(--s-5); }
.ah-dash__main > [data-panel][hidden] { display: none; }
.ah-dash__main .form-status:not(.is-visible) { display: none; }
.ah-contact {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-5);
  background: var(--c-white); border: 1px solid var(--c-line); border-left: 4px solid var(--c-brass); border-radius: var(--r-md);
}
.ah-contact__i { color: var(--c-brass-deep); margin-top: 2px; }
.ah-contact b { display: block; color: var(--c-ink); }
.ah-contact p { margin-top: 4px; font-size: .95rem; color: var(--c-muted); }
.ah-empty { color: var(--c-muted); }

/* Class 12 marks: one row per subject. */
.ah-marks__head, .ah-marks__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) 72px; gap: var(--s-3); align-items: center; }
.ah-marks__head { font-size: var(--t-label); font-weight: 700; color: var(--c-muted-2); }
.ah-marks__rows { display: grid; gap: var(--s-3); }
.ah-marks__row .ah-linkbtn:disabled { visibility: hidden; }
.ah-marks__total { padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); background: var(--c-mist); color: var(--c-muted); font-size: .95rem; }
.ah-marks__total b { color: var(--c-ink); }
.ah-marks-table td:nth-child(n + 2), .ah-marks-table th:nth-child(n + 2) { text-align: right; }
.ah-marks-table tr.is-best td { font-weight: 700; color: var(--c-ink); }
.ah-marks__gate a { font-weight: 700; }

/* The college desk's marks column. */
.ah-desk-table td:nth-child(4) { min-width: 180px; }

@media (max-width: 900px) {
  .ah-dash { grid-template-columns: minmax(0, 1fr); }
  .ah-menu { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
  .ah-menu a { justify-content: center; padding: 10px 8px; background: var(--c-white); border-color: var(--c-line); }
  .ah-menu a.is-current { box-shadow: inset 0 -3px 0 var(--c-brass); }
}
@media (max-width: 620px) {
  .ah-marks__head { display: none; }
  .ah-marks__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-line-soft); }
  .ah-marks__row [name="subject"] { grid-column: 1 / -1; }
  .ah-marks__row .ah-linkbtn { grid-column: 1 / -1; justify-self: start; }
  .ah-menu a span { font-size: .95rem; }
  /* A share row stacks on phones: the college, its state, then the button. */
  .ah-share { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
  .ah-share__state { grid-column: 1; grid-row: 2; }
  .ah-share__actions { grid-column: 1; grid-row: 3; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: var(--s-3) var(--s-4); }
  .ah-share__actions .btn { max-width: 100%; white-space: normal; text-align: left; }
}