/* exam.4ab.in — PREMIUM LAYER (2026-09-13, design pass by Fable)
   ============================================================================
   Loaded LAST on every page, after ab-design-system.css and app-ab.css. It is
   unlayered, so it wins ties by source order; where an older rule carries more
   specificity the selector here is written to beat it and says so.

   What it does, in order:
     1. tokens for this layer (header height, shadows)
     2. the ONE header: brand | menu | controls on a single row, class tools on
        a slim second row, sticky, blurred; drawer below 1240; phone = one row
     3. NO HERO BANNERS (owner 2026-09-13): the navy panels become a plain page
        title line; the home hero becomes a light intro
     4. site footer + "Continue with" rail (internal linking) — nav.js injects
        the markup, this styles it
     5. the server-rendered /q/ and /search/ pages, which shipped unstyled
     6. per-page polish: question bank, evaluator, notes/topic pickers
     7. tablet (761–1239) and phone (≤760) rules
   Nothing here touches question data, the bank logic or any id a script uses.
   ============================================================================ */

/* ------------------------------------------------------------ 1. tokens */
:root {
  --hx-h: 60px;                       /* row 1 of the header */
  --hx-h2: 38px;                      /* the class-tools row */
  --hx-total: calc(var(--hx-h) + var(--hx-h2));
  --hx-shadow: 0 1px 0 rgba(16, 24, 40, .06), 0 10px 30px -18px rgba(16, 24, 40, .25);
  --hx-card-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 10px 26px -18px rgba(16, 24, 40, .22);
  --hx-card-shadow-hover: 0 18px 40px -20px rgba(16, 24, 40, .35);
  --hx-r: 16px;
}
@media (max-width: 1239.98px) { :root { --hx-total: var(--hx-h); } }

/* ------------------------------------------------------------ 2. header */
.site-header.hx {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--page-bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: var(--hx-shadow);
}
.hx__in { max-width: 1760px; margin: 0 auto; padding: 0 22px; }
.hx__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "brand nav ctl" "brand tools tools";
  align-items: center;
  column-gap: 18px;
}
.hx .site-brand { grid-area: brand; gap: 11px; align-self: center; padding: 8px 0; }
.hx .site-brand__mark {
  width: 42px; height: 42px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 17px; color: #F5D98A;
  background: var(--deep-navy-grad);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 6px 14px -8px rgba(27, 42, 94, .7);
}
.hx .site-brand__name { font-size: 15.5px; line-height: 1.15; white-space: normal; max-width: 200px; }
.hx .site-brand__name b { display: block; color: var(--gold-ink); }
.hx .site-brand__tagline { display: none; }

/* the two menu rows */
.hx .nav.hx__nav { display: contents; }
.hx .hx__msearch { display: none; }
.hx .hx__main { grid-area: nav; display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; min-height: var(--hx-h); }
.hx .hx__tools {
  grid-area: tools; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  min-height: var(--hx-h2); padding: 0 0 6px; margin-top: -4px;
}
.hx .hx__tools-label {
  font-family: var(--font-nav); font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-right: 4px;
}
/* (0,3,0) — beats the older .nav__list > .nav__item > .nav__link pills */
.hx .hx__main > .nav__item > .nav__link {
  padding: 8px 11px; font-size: 13.5px; font-weight: 600; border-radius: 10px;
  gap: 6px; line-height: 1.2; white-space: nowrap; color: var(--nav-c);
  background: none; border: 0; transition: background .15s, color .15s;
}
.hx .hx__main > .nav__item > .nav__link .nav__icon { width: 16px; height: 16px; opacity: .85; }
.hx .hx__main > .nav__item > .nav__link:hover { background: var(--chip-bg); color: var(--ink); }
.hx .hx__main > .nav__item.is-current > .nav__link,
.hx .hx__main > .nav__item > .nav__link[aria-current="page"] {
  background: color-mix(in srgb, var(--navy) 9%, transparent); color: var(--navy);
}
.hx .hx__tools > .nav__item > .nav__link {
  padding: 5px 11px; font-size: 12.5px; font-weight: 600; border-radius: 999px;
  border: 1px solid var(--line-soft); background: var(--card-surface); gap: 6px; line-height: 1.2;
  color: var(--body-c); white-space: nowrap;
}
.hx .hx__tools > .nav__item > .nav__link .nav__icon { width: 14px; height: 14px; }
.hx .hx__tools > .nav__item > .nav__link:hover { border-color: var(--gold); color: var(--ink); }
.hx .hx__tools > .nav__item.is-current > .nav__link { border-color: var(--gold); background: var(--tint-1-bg, #FFF8E6); color: var(--gold-ink); }
.hx .nav__caret { width: 12px; height: 12px; opacity: .6; }

/* controls */
.hx .hx__ctl {
  grid-area: ctl; display: flex; align-items: center; gap: 8px; justify-content: flex-end;
  min-height: var(--hx-h); flex-wrap: nowrap;
}
.hx .hx__ctl > * { flex: 0 0 auto; }
.hx .nav-search {
  order: 0; display: flex; align-items: center; position: relative;
  width: 210px; height: 36px; border: 1px solid var(--line-soft); border-radius: 999px;
  background: var(--card-surface); padding: 0 10px 0 14px; transition: width .2s, box-shadow .2s;
}
.hx .nav-search:focus-within { width: 300px; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-ring, rgba(201,168,76,.25)); }
.hx .nav-search__input { flex: 1 1 auto; min-width: 0; border: 0; background: none; font: 500 13px var(--font-nav); color: var(--ink); outline: none; padding: 0; }
.hx .nav-search__kbd { display: none; }
.hx .nav-search__btn { border: 0; background: none; padding: 4px; color: var(--muted); cursor: pointer; display: inline-flex; }
.hx .nav-search__icon { width: 16px; height: 16px; }
.hx .acct-badge { order: 1; font-size: 12.5px; gap: 6px; }
.hx .acct-badge__hint { display: none !important; }          /* "not synced" was noise */
.hx .acct-badge .btn { min-height: 34px; padding: 0 14px; font-size: 12.5px; border-radius: 999px; }
.hx #pwWalletBadge, .hx #totalChip { order: 2; }
.hx .iconbtn, .hx .icon-btn { order: 3; width: 36px; height: 36px; border-radius: 999px; }
.hx .nav-upgrade {
  order: 4; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
  border: 0; border-radius: 999px; cursor: pointer; font: 700 12.5px var(--font-nav); color: #241c06;
  background: linear-gradient(135deg, #F5D98A, #C9A84C); box-shadow: 0 6px 14px -8px rgba(201,168,76,.9);
}
.hx .nav-upgrade:hover { filter: brightness(1.04); }
.hx .nav-toggle { order: 5; display: none; }

/* a slightly narrower desktop: tighten before anything wraps */
@media (min-width: 1240px) and (max-width: 1480px) {
  .hx .hx__main > .nav__item > .nav__link { padding: 8px 8px; font-size: 12.8px; }
  .hx .hx__main > .nav__item > .nav__link .nav__icon { display: none; }
  .hx .nav-search { width: 170px; }
  .hx .site-brand__name { font-size: 14px; max-width: 170px; }
  .hx .acct-badge__role, .hx .acct-badge__credits { display: none; }
}
/* the desktop mega panel under a category */
.hx .nav__mega { margin-top: 6px; border-radius: 16px; box-shadow: 0 24px 50px -22px rgba(16,24,40,.45); }

/* ---- tablet + phone: the drawer ---- */
@media (max-width: 1239.98px) {
  .hx__in { padding: 0 14px; }
  .hx__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: var(--hx-h); }
  .hx .site-brand { flex: 1 1 auto; min-width: 0; padding: 6px 0; }
  .hx .site-brand__mark { width: 40px; height: 40px; }
  .hx .site-brand__name { font-size: 14.5px; max-width: none; }
  .hx .site-brand__name b { display: inline; }
  .hx .hx__ctl { flex: 0 0 auto; min-height: 0; }
  .hx .nav-search { width: 190px; }
  .hx .nav-toggle {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
    border: 1px solid var(--line-soft); border-radius: 12px; background: var(--card-surface);
    font: 600 13px var(--font-nav); color: var(--ink); cursor: pointer;
  }
  .hx .nav.hx__nav { display: none; order: 9; width: 100%; padding: 6px 0 14px; }
  .hx .nav.hx__nav.is-open { display: block; }
  .hx .hx__msearch { display: flex; gap: 8px; margin: 4px 0 12px; }
  .hx .hx__msearch input {
    flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--line-soft);
    border-radius: 12px; background: var(--card-surface); font: 500 14px var(--font-nav); color: var(--ink);
  }
  .hx .hx__msearch button { height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--navy); color: #fff; font: 600 13px var(--font-nav); }
  .hx .hx__main, .hx .hx__tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-height: 0; padding: 0; margin: 0; }
  .hx .hx__tools { margin-top: 12px; }
  .hx .hx__tools-label { grid-column: 1 / -1; margin: 2px 0 -2px; }
  .hx .hx__main > .nav__item > .nav__link, .hx .hx__tools > .nav__item > .nav__link {
    width: 100%; height: 100%; min-height: 96px; flex-direction: column; justify-content: flex-start; align-items: center;
    text-align: center; gap: 8px; padding: 14px 8px 12px; font-size: 12.5px; white-space: normal; line-height: 1.25;
    border: 1px solid var(--line-soft); border-radius: 14px; background: var(--card-surface); color: var(--ink);
  }
  .hx .hx__main > .nav__item > .nav__link .nav__icon, .hx .hx__tools > .nav__item > .nav__link .nav__icon {
    display: block; width: 44px; height: 44px; padding: 10px; border-radius: 12px; opacity: 1;
    background: color-mix(in srgb, var(--navy) 8%, transparent); stroke: var(--navy);
  }
  .hx .hx__main > .nav__item.is-current > .nav__link, .hx .hx__tools > .nav__item.is-current > .nav__link { border-color: var(--gold); background: var(--tint-1-bg, #FFF8E6); }
  .hx .nav__caret { display: none; }
  .hx .nav__mega { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .hx .nav-search { display: none; }
  .hx .nav-upgrade { padding: 0; width: 36px; justify-content: center; }
  .hx .nav-upgrade > :not(.nav-upgrade__crown) { display: none; }
  .hx .nav-upgrade { font-size: 0; }
  .hx .nav-upgrade__crown { font-size: 16px; }
  .hx .iconbtn, .hx .icon-btn { width: 36px; height: 36px; }
  .hx .nav-toggle > span:last-child { display: none; }
  .hx .nav-toggle { width: 42px; padding: 0; justify-content: center; }
  .hx .site-brand__name { font-size: 13.5px; }
  .hx .hx__main > .nav__item > .nav__link, .hx .hx__tools > .nav__item > .nav__link { min-height: 88px; font-size: 12px; padding: 12px 6px 10px; }
}

/* --------------------------------------------- 3. no hero banners */
/* app pages: the navy panel becomes a plain page-title line */
.ex-hero { margin: 26px auto 4px; padding-inline: 18px; }
.ex-hero .ab-hero__panel {
  background: none; border-radius: 0; padding: 0 0 14px; text-align: left; color: var(--ink);
  border-bottom: 1px solid var(--line-soft); overflow: visible;
}
.ex-hero .ab-hero__panel::after { display: none; }
.ex-hero .ab-kicker {
  margin: 0 0 6px; font-family: var(--font-nav); font-size: 11px; font-weight: 700; letter-spacing: .14em;
  color: var(--gold-ink); text-transform: uppercase;
}
.ex-hero .ab-kicker::after { display: none; }
.ex-hero .ab-hero__title { font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 6px; color: var(--ink); text-align: left; }
.ex-hero .ab-hero__lede { margin: 0; max-width: 88ch; text-align: left; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.ex-hero .ab-hero__lede a { color: var(--navy); }
/* home: light intro */
.hm-hero {
  background: none !important; border: 0; border-radius: 0 !important; padding: 26px 0 8px !important;
  margin: 8px 0 4px !important; color: var(--ink); box-shadow: none;
}
.hm-hero::before, .hm-hero::after { display: none; }
.hm-hero .hm-kick { color: var(--gold-ink); }
main.hm .hm-hero h1 { color: var(--ink) !important; font-size: clamp(1.7rem, 3.4vw, 2.6rem) !important; }
main.hm .hm-hero h1 b { color: var(--gold-ink) !important; }
main.hm .hm-hero p { color: var(--muted) !important; max-width: 70ch; }
main.hm .hm-hero .hm-kick { color: var(--gold-ink) !important; }
.hm-hero .hm-btn--ghost { color: var(--navy); border-color: var(--line); background: var(--card-surface); }
.hm-hero .hm-stat { background: var(--card-surface); border: 1px solid var(--line-soft); }
.hm-hero .hm-stat b { color: var(--ink); }
.hm-hero .hm-stat span { color: var(--muted); }
/* the about page's card hero */
.hero.card { background: var(--card-surface) !important; color: var(--ink) !important; border: 1px solid var(--line-soft); box-shadow: none; }
.hero.card h1, .hero.card .lead { color: var(--ink) !important; }
.hero.card .lead, .hero.card .muted { color: var(--muted) !important; }
.hero.card .eyebrow { color: var(--gold-ink) !important; }
.hero.card .chip { background: var(--chip-bg); color: var(--ink); }

/* thin pages: give the main column a floor so the footer never sits mid-screen */
main.ab-page { min-height: 46vh; }

/* -------------------------------------------- 4. footer + continue rail */
.sf-rail { max-width: var(--wrap); margin: 44px auto 0; padding: 0 18px; }
.sf-rail__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.sf-rail__head h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 20px; color: var(--ink); }
.sf-rail__head a { font: 600 12.5px var(--font-nav); color: var(--navy); text-decoration: none; }
.sf-rail__grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-card {
  position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 14px 12px;
  border: 1px solid var(--line-soft); border-radius: 14px; background: var(--card-surface);
  text-decoration: none; color: var(--ink); box-shadow: var(--hx-card-shadow);
  transition: transform .15s, box-shadow .15s, border-color .15s; overflow: hidden;
}
.sf-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--sfc, var(--gold)); }
.sf-card:hover { transform: translateY(-2px); box-shadow: var(--hx-card-shadow-hover); border-color: var(--sfc, var(--gold)); }
.sf-card__i { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--sfc, var(--gold)) 14%, transparent); }
.sf-card__i svg { width: 19px; height: 19px; stroke: var(--sfc, var(--gold)); fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sf-card__t { min-width: 0; }
.sf-card__t b { display: block; font: 600 14px var(--font-nav); color: var(--ink); margin-bottom: 2px; }
.sf-card__t span { display: block; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.sf-card__k { position: absolute; right: 12px; top: 12px; font: 700 10px var(--font-nav); letter-spacing: .1em; color: var(--muted); text-transform: uppercase; }

.sf { margin-top: 44px; border-top: 1px solid var(--line-soft); background: color-mix(in srgb, var(--card-surface) 60%, var(--page-bg)); }
.sf__in { max-width: var(--wrap); margin: 0 auto; padding: 36px 18px 30px; display: grid; gap: 28px; grid-template-columns: 1.5fr repeat(4, minmax(0, 1fr)); }
.sf__brand .site-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; margin-bottom: 12px; }
.sf__brand .site-brand__mark { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 16px; color: #F5D98A; background: var(--deep-navy-grad); }
.sf__brand .site-brand__name { font: 700 15px var(--font-brand); color: var(--navy); line-height: 1.15; }
.sf__brand .site-brand__name b { color: var(--gold-ink); }
.sf__brand p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 42ch; }
.sf__pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sf__pill { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border-radius: 999px; font: 600 12.5px var(--font-nav); text-decoration: none; border: 1px solid var(--line-soft); color: var(--ink); background: var(--card-surface); cursor: pointer; }
a.sf__pill--call, .sf a.sf__pill--call { background: var(--navy); border-color: var(--navy); color: #fff !important; }
a.sf__pill--wa, .sf a.sf__pill--wa { background: #25D366; border-color: #25D366; color: #0B3D1C !important; }
.sf__pill:hover { filter: brightness(1.05); }
.sf__col h4 { margin: 0 0 10px; font: 700 11px var(--font-nav); letter-spacing: .13em; text-transform: uppercase; color: var(--gold-ink); }
.sf__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sf__col a { font: 500 13.5px var(--font-nav); color: var(--body-c); text-decoration: none; }
.sf__col a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.sf__col a .sf__tag { margin-left: 6px; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.sf__note { max-width: var(--wrap); margin: 0 auto; padding: 0 18px 20px; font-size: 12px; color: var(--muted); line-height: 1.55; }
.ab-credit { margin-top: 0 !important; padding: 14px 18px; font-size: 12.5px; }

/* --------------------------------------------- 5. /q/ and /search/ */
body.hx-plain > .ab-wrap.wrap { max-width: var(--wrap); margin: 0 auto; padding: 22px 18px 56px !important; }
body.hx-plain > .ab-wrap.wrap > h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 6px; color: var(--ink); }
body.hx-plain > .ab-wrap.wrap > h1 .muted { font-family: var(--font-nav); font-size: 15px; }
body.hx-plain > .ab-wrap.wrap > p.muted { margin: 0 0 20px; font-size: 14.5px; line-height: 1.6; }
body.hx-plain a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.hx-plain a.card {
  display: flex !important; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px !important; margin: 0 0 10px !important; border: 1px solid var(--line-soft); border-radius: 14px;
  background: var(--card-surface); text-decoration: none; color: var(--ink); box-shadow: var(--hx-card-shadow);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
body.hx-plain a.card:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: var(--hx-card-shadow-hover); }
body.hx-plain a.card::after { content: "→"; color: var(--gold-ink); font-weight: 700; flex: 0 0 auto; }
body.hx-plain a.card h2 { font-family: var(--font-display); font-weight: 400; font-size: 20px; margin: 0 0 2px !important; color: var(--ink); }
body.hx-plain a.card > * { pointer-events: none; }
body.hx-plain a.card b { font: 600 15px var(--font-nav); color: var(--ink); }
body.hx-plain a.card .muted { color: var(--muted); }
body.hx-plain .card:not(a) { border: 1px solid var(--line-soft); border-radius: 14px; background: var(--card-surface); box-shadow: var(--hx-card-shadow); }
body.hx-plain .card h2, body.hx-plain .card h3 { font-weight: 600; font-size: 15px; margin: 0 0 8px; }
body.hx-plain form input[type="search"], body.hx-plain form input[type="text"] { height: 46px; border-radius: 12px !important; border: 1px solid var(--line-soft) !important; background: var(--card-surface); }
body.hx-plain form input:focus { outline: none; border-color: var(--gold) !important; box-shadow: 0 0 0 3px var(--gold-ring, rgba(201,168,76,.25)); }
body.hx-plain .btn.btn--primary { height: 46px; padding: 0 20px; border-radius: 12px; }
body.hx-plain details { border: 1px solid var(--line-soft); border-radius: 14px; background: var(--card-surface); padding: 12px 16px; }
body.hx-plain details summary { list-style: none; }
body.hx-plain details summary::before { content: "▸ "; color: var(--gold-ink); }
body.hx-plain details[open] summary::before { content: "▾ "; }
body.hx-plain nav[aria-label="Pagination"] { display: flex; gap: 10px; align-items: center; }
body.hx-plain select { height: 34px; border-radius: 8px; border: 1px solid var(--line-soft); background: var(--card-surface); padding: 0 8px; }

/* ------------------------------------------------ 6. per-page polish */
/* question bank */
.ex-p-app .tabs.ex-tabs { margin: 14px auto 12px; gap: 6px; }
.ex-p-app .tabs.ex-tabs .btn, .ex-p-app .tabs.ex-tabs button { border-radius: 999px; }
.side { top: calc(var(--hx-total) + 12px); max-height: calc(100vh - var(--hx-total) - 24px); border-radius: var(--hx-r); scrollbar-width: thin; }
.side .card { border-radius: var(--hx-r); }
.ex-p-app .qcard, .ex-p-app .q-card, .ex-p-app main .card { border-radius: var(--hx-r); }
.ex-p-app main .card { box-shadow: var(--hx-card-shadow); }
/* evaluator */
.ev2-rail .ev-modebtn.ev2-mode { padding: 14px 16px !important; gap: 12px !important; border-radius: 16px !important; }
.ev2-rail .ev2-mode-i { width: 44px !important; height: 44px !important; font-size: 22px !important; }
.ev2-rail .ev2-mode-t b { font-size: 16px !important; }
.ev2-rail .ev2-mode-t i { font-size: 12.5px !important; }
.ev2-rail { top: calc(var(--hx-total) + 12px) !important; }
#evHead { border-radius: var(--hx-r); }
/* generic cards + buttons */
.ab-page .card, .ab-page .ab-panel { border-radius: var(--hx-r); }
.btn, .ab-btn { border-radius: 999px; }
.btn--primary, .ab-btn--navy { box-shadow: 0 8px 18px -12px rgba(27, 42, 94, .8); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* the floating ticket pill should not collide with the chat bubble */
#spFab { left: 14px !important; bottom: 14px !important; }

/* ------------------------------------------------ 7. tablet + phone */
@media (min-width: 761px) and (max-width: 1239.98px) {
  .sf-rail__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf__in { grid-template-columns: 1fr 1fr 1fr; }
  .sf__brand { grid-column: 1 / -1; }
  .hm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ab-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ev2-rail .ev-modesel.ev2-modes { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .ev9-dgrid { grid-template-columns: 1fr !important; }
  .ex-p-app main .layout, .ex-p-app main .browse { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sf-rail { margin-top: 32px; padding: 0 14px; }
  .sf-rail__grid { grid-template-columns: 1fr; gap: 10px; }
  .sf__in { grid-template-columns: 1fr 1fr; gap: 22px 16px; padding: 28px 14px 22px; }
  .sf__brand { grid-column: 1 / -1; }
  .ex-hero { margin-top: 18px; padding-inline: 14px; }
  .ex-hero .ab-hero__title { font-size: 22px; }
  .ex-hero .ab-hero__lede { font-size: 13.5px; }
  main.ab-page { min-height: 30vh; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-card, body.hx-plain a.card, .hx .nav-search { transition: none; }
}

/* ------------------------------------------------ 8. second pass (2026-09-13) */
.hx #pwWalletBadge:empty, .hx #totalChip[hidden] { display: none !important; }
/* one look for every form control on the site (the bank's filter inputs, the
   pickers, the evaluator's Basic Details, /search) */
.ab-page input[type="text"], .ab-page input[type="search"], .ab-page input[type="email"],
.ab-page input[type="number"], .ab-page input[type="date"], .ab-page input[type="tel"],
.ab-page select, .ab-page textarea,
body.hx-plain input[type="search"], body.hx-plain select {
  border: 1px solid var(--line-soft); border-radius: 12px; background: var(--card-surface); color: var(--ink);
  font-family: var(--font-nav); font-size: 14px; min-height: 42px; padding: 0 12px;
  transition: border-color .15s, box-shadow .15s;
}
.ab-page textarea { min-height: 96px; padding: 10px 12px; }
.ab-page input:focus-visible, .ab-page select:focus-visible, .ab-page textarea:focus-visible {
  outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-ring, rgba(201,168,76,.25));
}
.ab-page input[type="checkbox"], .ab-page input[type="radio"] { accent-color: var(--navy); width: 16px; height: 16px; }
/* the sidebar's small "find a chapter" boxes keep their compact height */
.side input[type="text"], .side input[type="search"] { min-height: 38px; font-size: 13.5px; }
/* loading bar */
.bar2 { height: 4px; border-radius: 999px; background: var(--chip-bg); overflow: hidden; }
.bar2 > i { display: block; height: 100%; width: 40%; border-radius: 999px; background: linear-gradient(90deg, var(--navy), var(--gold)); animation: hx-slide 1.2s ease-in-out infinite; }
@keyframes hx-slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
/* dark mode: a bordered button must never be dark-on-dark */
:root[data-theme="dark"] .btn:not(.btn--primary):not(.btn--gold),
:root[data-theme="dark"] .ab-btn--line { background: var(--card-surface); color: var(--ink); border-color: var(--line); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn:not(.btn--primary):not(.btn--gold) { background: var(--card-surface); color: var(--ink); border-color: var(--line); }
}
/* section kicker lines (home + about) share one voice */
.hm-eyebrow, .eyebrow, .ab-eyebrow { color: var(--gold-ink); letter-spacing: .13em; }
/* cards lift a little on hover, everywhere a card is a link */
a.card:hover, a.hm-card:hover, .ab-card:hover { transform: translateY(-2px); }

/* ------------------------------------------------ 9. pass 3: compact + one look + coloured icons */
:root { --hx-h: 54px; --hx-h2: 32px; --hx-r: 14px; }
/* menu icons carry their item's hue (4ab.in kN idea); structure unchanged */
.hx .hx__main > .nav__item > .nav__link .nav__icon { stroke: var(--nh, currentColor); opacity: 1; }
.hx .hx__main > .nav__item.is-current > .nav__link { background: color-mix(in srgb, var(--nh, var(--navy)) 12%, transparent); color: var(--ink); }
.hx .hx__tools > .nav__item > .nav__link .nav__icon { stroke: var(--nh, currentColor); }
.hx .hx__tools > .nav__item > .nav__link:hover { border-color: var(--nh, var(--gold)); }
.hx .hx__tools > .nav__item.is-current > .nav__link { border-color: var(--nh, var(--gold)); background: color-mix(in srgb, var(--nh, var(--gold)) 10%, transparent); color: var(--ink); }
.hx .nav__mega .nav__mega-icon { color: var(--nh, var(--navy)); }
@media (min-width: 1240px) and (max-width: 1480px) { .hx .hx__main > .nav__item > .nav__link .nav__icon { display: inline-block; width: 15px; height: 15px; } }
@media (max-width: 1239.98px) {
  .hx .hx__main > .nav__item > .nav__link .nav__icon, .hx .hx__tools > .nav__item > .nav__link .nav__icon {
    background: color-mix(in srgb, var(--nh, var(--navy)) 12%, transparent); stroke: var(--nh, var(--navy));
  }
  .hx .hx__main > .nav__item > .nav__link, .hx .hx__tools > .nav__item > .nav__link { min-height: 84px; padding: 11px 6px 9px; gap: 6px; font-size: 12px; }
  .hx .hx__main > .nav__item > .nav__link .nav__icon, .hx .hx__tools > .nav__item > .nav__link .nav__icon { width: 38px; height: 38px; padding: 8px; }
  .hx .hx__main > .nav__item.is-current > .nav__link, .hx .hx__tools > .nav__item.is-current > .nav__link { border-color: var(--nh, var(--gold)); background: color-mix(in srgb, var(--nh, var(--gold)) 8%, var(--card-surface)); }
}
/* compact: tighter everywhere */
.hx .site-brand { padding: 5px 0; }
.hx .site-brand__mark { width: 38px; height: 38px; }
.hx .site-brand__name { font-size: 14.5px; }
.hx .hx__main > .nav__item > .nav__link { padding: 7px 10px; font-size: 13px; }
.hx .hx__tools { padding-bottom: 5px; margin-top: -6px; }
.hx .hx__tools > .nav__item > .nav__link { padding: 4px 10px; font-size: 12px; }
.hx .nav-search, .hx .nav-upgrade, .hx .acct-badge .btn, .hx .iconbtn, .hx .icon-btn { height: 34px; min-height: 34px; }
.hx .iconbtn, .hx .icon-btn { width: 34px; }
.ex-hero { margin: 16px auto 0; }
.ex-hero .ab-hero__panel { padding: 0 0 10px; }
.ex-hero .ab-kicker { margin-bottom: 3px; font-size: 10.5px; }
.ex-hero .ab-hero__title { font-size: clamp(22px, 2.2vw, 27px); margin: 0 0 3px; }
.ex-hero .ab-hero__lede { font-size: 13.5px; line-height: 1.5; }
.ab-page .card, .ab-page .ab-panel { padding: 14px 16px; }
main.ab-page { min-height: 38vh; }
.ex-p-app .tabs.ex-tabs { margin: 10px auto 8px; }
/* home: denser directory, no path noise, hue-tinted cards */
.hm-hero { padding: 18px 0 4px !important; }
main.hm .hm-hero h1 { font-size: clamp(1.5rem, 2.6vw, 2.1rem) !important; margin-bottom: 8px !important; }
main.hm .hm-hero p { font-size: .95rem !important; line-height: 1.5 !important; }
.hm-hero .hm-cta { margin-top: 14px !important; }
.hm-hero .hm-stats { margin-top: 12px !important; }
.hm-hero .hm-stat { padding: 6px 12px !important; }
.hm-sec { margin: 22px 0 0 !important; }
.hm-sec h2 { font-size: 1.25rem !important; margin: 4px 0 2px !important; }
.hm-note { margin: 0 0 8px !important; font-size: .9rem !important; }
.hm-grid { gap: 10px !important; }
.hm-card { padding: 13px 13px 10px !important; border-radius: 14px !important; }
.hm-card .hm-path { display: none; }                 /* the URL was noise beside the title */
.hm-card .hm-ico { width: 36px !important; height: 36px !important; font-size: 1.1rem !important; margin-bottom: 8px !important; }
.hm-card h3 { font-size: .98rem !important; margin: 0 0 3px !important; }
.hm-card .hm-desc { font-size: .84rem !important; line-height: 1.45 !important; margin: 0 0 8px !important; }
.hm-card .hm-meta { padding-top: 7px !important; font-size: .72rem !important; }
.hm-steps { gap: 10px !important; }
.hm-step { padding: 12px 14px !important; border-radius: 14px !important; }
.hm-fair { padding: 14px 16px !important; margin-top: 22px !important; }
/* cards families share the six AB tints (home cards, steps, stats, rail) */
.hm-card.c1, .hm-step:nth-child(1), .stat.card:nth-child(6n+1) { background: var(--tint-1-bg, #FFF8E6); }
.hm-card.c2, .hm-step:nth-child(2), .stat.card:nth-child(6n+2) { background: var(--tint-2-bg, #EEF4FF); }
.hm-card.c3, .hm-step:nth-child(3), .stat.card:nth-child(6n+3) { background: var(--tint-3-bg, #ECFDF3); }
.hm-card.c4, .stat.card:nth-child(6n+4) { background: var(--tint-4-bg, #F3EEFF); }
.hm-card.c5, .stat.card:nth-child(6n+5) { background: var(--tint-5-bg, #ECFEFF); }
.hm-card.c6, .stat.card:nth-child(6n+6) { background: var(--tint-6-bg, #FFF1F5); }
/* footer + rail tighter */
.sf-rail { margin-top: 30px; }
.sf-rail__head { margin-bottom: 8px; }
.sf-rail__head h2 { font-size: 17px; }
.sf-card { padding: 11px 12px 11px 11px; }
.sf-card__i { flex-basis: 34px; width: 34px; height: 34px; }
.sf-card__t span { font-size: 12px; }
.sf { margin-top: 30px; }
.sf__in { padding: 26px 18px 20px; gap: 22px; }
.sf__col ul { gap: 5px; }
.sf__col a { font-size: 13px; }
.sf__brand p { font-size: 13px; margin-bottom: 10px; }
.sf__note { padding-bottom: 14px; }
/* evaluator + bank tighter */
#evHead { padding: 12px 14px !important; }
.ev2-rail .ev-modebtn.ev2-mode { padding: 11px 13px !important; gap: 10px !important; }
.ev2-rail .ev2-mode-i { width: 38px !important; height: 38px !important; font-size: 19px !important; }
.ev2-rail .ev2-mode-t b { font-size: 14.5px !important; }
.ev2-slots .hw-a-slot { padding: 12px 8px !important; }
.ev2-slots .hw-a-slot-icon { width: 44px !important; height: 44px !important; font-size: 20px !important; }
.side .card { padding: 12px !important; }
.side label { font-size: 13px; }
@media (max-width: 760px) {
  .hm-card { padding: 12px !important; }
  .sf__in { padding: 22px 14px 16px; }
}
@media (max-width: 1239.98px) {
  .hx .hx__tools { margin-top: 10px; }
  .hx .hx__tools-label { margin: 4px 0 0; padding-top: 8px; border-top: 1px solid var(--line-soft); }
}
/* 1240–1480: the seven labels only just fit; icons there push the row over the brand (measured 1440) */
@media (min-width: 1240px) and (max-width: 1480px) {
  .hx .hx__main > .nav__item > .nav__link .nav__icon { display: none; }
  .hx .hx__main > .nav__item > .nav__link { padding: 7px 8px; font-size: 12.8px; }
  .hx .hx__main { min-width: 0; }
}

/* ------------------------------------------------ 10. FULL WIDTH ON PC (owner 2026-09-13) */
@media (min-width: 1240px) {
  .wrap, .ab-wrap, main.hm, main.ab-page, .ex-hero, .sf-rail, .sf__in, .sf__note, #evLayout, .ev2-layout,
  body.hx-plain > .ab-wrap.wrap, .hero.card, #main > .wrap {
    max-width: none !important;
  }
  .hx__in { max-width: none; }
  main.hm { padding-left: 22px !important; padding-right: 22px !important; }
  .ex-hero, .sf-rail, .sf__in, .sf__note, body.hx-plain > .ab-wrap.wrap { padding-left: 22px !important; padding-right: 22px !important; }
  .wrap { padding-left: 22px; padding-right: 22px; }
  /* prose still reads well on a wide screen: the lede keeps a measure, cards do not */
  .ex-hero .ab-hero__lede { max-width: 100ch; }
  .hm-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; }
  .sf-rail__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1700px) {
  .hm-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
  .sf-rail__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (min-width: 1240px) {
  /* the notes picker was a 640px column on a full-width page: fields go 2-up instead */
  .nt-picker { max-width: none !important; }
  .nt-picker .nt-row, .nt-picker .row2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}