/*
 * The HBVB design system — dark-first.
 *
 * Tokens are lifted verbatim from the design canvas (HBVB Screens.dc.html),
 * so a value here can be diffed against the source of truth rather than
 * eyeballed. Dark is the DEFAULT, not a media-query branch: the cards are
 * foil and holo over a near-black ground, and a light default would make the
 * product's main object look wrong on first paint. Light is a deliberate
 * toggle, stamped as data-theme="light" on <html>.
 */
/*
 * The fonts, served from this site (improvement 2.7). Nothing on the page
 * waits on, or tells, another company's server: the first paint no longer
 * depends on a second origin, and the browser keeps these for a year because
 * the build gives each file a name that is its content's hash.
 *
 * Oswald, Rajdhani, Inter and Caveat, from the @fontsource packages (SIL Open
 * Font License 1.1, the same files Google Fonts serves), as woff2, in the
 * weights the design uses, split by script with `unicode-range`: a page in
 * Latin downloads only the Latin files, and a member whose name is in Cyrillic
 * or Devanagari gets the matching file the first time one appears. Anything
 * outside these scripts falls back to the next family in the stack, as it did
 * before. `font-display: swap` shows text at once in the fallback and swaps.
 * Files: assets/fonts/. Provenance: README, "Fonts".
 */
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/h/oswald-latin-500-normal.541b128823.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/h/oswald-latin-ext-500-normal.462ee3120d.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/h/oswald-cyrillic-500-normal.b1b3edd595.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/h/oswald-latin-600-normal.f6cb541f4d.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/h/oswald-latin-ext-600-normal.80e3b97cbf.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/h/oswald-cyrillic-600-normal.bb0df5efa2.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/h/oswald-latin-700-normal.aae665c75a.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/h/oswald-latin-ext-700-normal.ceb8c34b47.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/h/oswald-cyrillic-700-normal.92867238f9.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/h/rajdhani-latin-600-normal.433a7007e4.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/h/rajdhani-latin-ext-600-normal.f57c2b379b.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/h/rajdhani-devanagari-600-normal.93328dcb32.woff2) format('woff2');
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/h/rajdhani-latin-700-normal.5b7e4a6f97.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/h/rajdhani-latin-ext-700-normal.c6b9df5874.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Rajdhani'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/h/rajdhani-devanagari-700-normal.52dd95964b.woff2) format('woff2');
  unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/h/inter-latin-400-normal.8909904ab6.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/h/inter-latin-ext-400-normal.6744a7f509.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/h/inter-cyrillic-400-normal.f0bb586459.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/h/inter-latin-500-normal.f3779f1efc.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/h/inter-latin-ext-500-normal.2c6fbc42d3.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/h/inter-cyrillic-500-normal.b77a86ec16.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/h/inter-latin-600-normal.f9a06e79cd.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/h/inter-latin-ext-600-normal.e4bdf67b0c.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/h/inter-cyrillic-600-normal.6c2a37f82a.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/h/caveat-latin-600-normal.d51e228301.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/h/caveat-latin-ext-600-normal.ec90c36c3d.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/h/caveat-cyrillic-600-normal.f8d027f997.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/h/caveat-latin-700-normal.15f9638095.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/h/caveat-latin-ext-700-normal.f97b55783e.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/h/caveat-cyrillic-700-normal.55a5d86e69.woff2) format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

:root {
  /* Surfaces */
  --bg: #05070c;
  --panel: rgba(255, 255, 255, .05);
  --panel-2: rgba(255, 255, 255, .08);
  --br: rgba(255, 255, 255, .10);
  --topbar: rgba(5, 7, 12, .82);
  --sheet: #0B1E42;

  /* Text */
  --txt: #F3E7CE;
  --txt-2: #ffffff;
  --faint: #8EA1BF;
  /* Idle nav text and labels. Dimmer than --faint on purpose: the design uses
     a second, quieter grey for anything that is not the current section. */
  --faint-2: #6E80A0;

  /* Accents. Gold is the brand's primary action colour. */
  --gold: #F5C542;
  /* Gold as TEXT. The brand gold is a 1.6:1 whisper on the light sand ground,
     so light mode needs a darker one - same hue, readable. Surfaces and fills
     keep --gold in both themes. */
  --gold-txt: #F5C542;
  --teal: #37E1D3;
  --coral: #FF6B4A;
  --green: #27C58C;
  --navy: #0B1E42;
  --navy-2: #16376B;
  --navy-deep: #060F22;

  /* Badge tiers, for the skill ladders. */
  --tier-bronze: #D9A56E;
  --tier-silver: #E3E9F2;
  --tier-gold: #F5C542;
  --tier-elite: #37E1D3;

  /* Type. Oswald labels, Rajdhani numerals, Inter prose, Caveat signatures. */
  --label: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Rajdhani', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --script: 'Caveat', 'Segoe Script', cursive;

  --wrap: 1160px;
  /* The dark ground's light streaks. Zero in light mode. */
  --streak: 1;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #EAE3D6;
  --panel: #ffffff;
  --panel-2: #F3EEE3;
  --br: rgba(11, 30, 66, .13);
  --topbar: rgba(238, 231, 219, .9);
  --sheet: #ffffff;
  --txt: #1B2E4E;
  --txt-2: #0B1E42;
  --faint: #5E6E88;
  --faint-2: #8494AC;
  --streak: 0;
  --gold-txt: #8A5A08;
  color-scheme: light;
}

* { box-sizing: border-box }
html, body { margin: 0; padding: 0 }

body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

/* The streak wash: sunset over the pier at 88% 8%, deep water bottom-left,
   and two raking light bands. Screen-blended, so it lifts the near-black
   without touching text contrast. Hidden entirely in light mode. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* --wash lets a page dial the brand wash down. Full strength is right on
     the entry pages, where it IS the brand; on an app page - a roster, an
     account table - a warm haze across the whole viewport just makes the
     content look muddy, and the canvas gets away with it only because its
     panels cover most of the frame. `body class="app"` turns it down. */
  opacity: calc(var(--streak) * var(--wash, 1));
  mix-blend-mode: screen;
  /* Softer than the canvas original, deliberately. In the design this sits
     inside a 390x840 phone frame where the two raking bands read as a thin
     sheen across a card; stretched over a full viewport the same stops become
     a rainbow stripe through the headline. The radial glows - sunset over the
     pier, deep water bottom-left - do the work and are kept near full
     strength; the bands are widened and roughly halved so they stay a sheen. */
  background:
    radial-gradient(120% 80% at 88% 8%, rgba(255, 150, 60, .26), transparent 55%),
    radial-gradient(90% 70% at 10% 104%, rgba(20, 45, 100, .45), transparent 62%),
    linear-gradient(116deg, transparent 22%, rgba(245, 197, 66, .06) 40%, rgba(255, 107, 74, .13) 48%, rgba(245, 197, 66, .05) 56%, transparent 74%),
    linear-gradient(116deg, transparent 52%, rgba(55, 225, 211, .06) 67%, transparent 82%);
}
body > * { position: relative; z-index: 1 }
body.app { --wash: .3 }

img { max-width: 100%; display: block }

/* `hidden` has to win against a class that sets `display`.
   The UA rule is `[hidden] { display: none }` - a bare attribute selector,
   which `.btn { display: inline-flex }` outranks. So every button rendered
   with the `hidden` attribute was VISIBLE: the waitlist page showed "Open the
   app" and "Admin" to an account that could reach neither. Any stylesheet
   that sets display on a class needs this line. */
[hidden] { display: none !important }
a { color: var(--teal); text-decoration: none }
a:hover { color: var(--gold) }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }

/* ── the wordmark ───────────────────────────────────────────────────────── */
.mark { display: inline-flex; align-items: center; gap: 9px }
.mark-glyph {
  width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold), var(--coral));
  color: #05070c;
  font-family: var(--label); font-weight: 700; font-size: 15px; line-height: 1;
}
.mark-name {
  font-family: var(--label); font-weight: 700; font-size: 17px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--txt-2);
}

/* ── small caps label, used for every eyebrow and field label ───────────── */
.eyebrow {
  font-family: var(--label); font-weight: 600; font-size: 10.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--faint);
}


/* ── headings ───────────────────────────────────────────────────────────── */
h1 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 7vw, 52px); line-height: 1.04;
  letter-spacing: -.01em; margin: 0; color: var(--txt-2);
  text-wrap: balance;
}
h1 em { font-style: normal; color: var(--gold-txt) }

.lede { margin: 0; color: var(--faint); font-size: 15px; text-wrap: pretty }

/* ── panels ─────────────────────────────────────────────────────────────── */
.panel {
  background: var(--panel);
  border: 1px solid var(--br);
  border-radius: 18px;
  padding: 22px;
  backdrop-filter: blur(8px);
}

/* ── fields ─────────────────────────────────────────────────────────────── */
.field { display: grid; gap: 7px }
.field label {
  font-family: var(--label); font-weight: 600; font-size: 10.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.field input {
  width: 100%; padding: 13px 14px;
  background: var(--panel-2);
  border: 1px solid var(--br); border-radius: 11px;
  color: var(--txt-2); font-family: var(--sans); font-size: 15px;
}
/* Components for canvas screens that are not built yet - the credits pill,
   the badge rungs, the desktop rail - are deliberately NOT in this file.
   CSS no page exercises is CSS nobody has looked at, and it rots silently.
   Each one lands with the screen that uses it. A test enforces this. */
.field input::placeholder { color: var(--faint); opacity: .7 }
.field input:focus { outline: none; border-color: var(--gold); background: var(--panel) }
/* A <select> gets none of the above for free - browsers style it on their
   own - so without this rule a form mixing inputs and selects (like /verify/'s
   "record a first measurement") reads as half-designed. */
.field select {
  width: 100%; padding: 13px 14px;
  background: var(--panel-2);
  border: 1px solid var(--br); border-radius: 11px;
  color: var(--txt-2); font-family: var(--sans); font-size: 15px;
}
.field select:focus { outline: none; border-color: var(--gold); background: var(--panel) }

/* ── custom select ──────────────────────────────────────────────────────
   A browser will not be told how to draw an OPEN <select> list - `.field
   select` above only ever reaches the closed box, which is why a picked
   Gender/Skill/Role menu still flashed the OS's own white list. assets/
   shell.js's enhanceSelects() wraps every <select> in one of these: the
   real <select> stays in the DOM (still what .value/FormData/checkValidity
   read, still what a delegated "change" listener hears), but is drawn
   invisible under a trigger button this stylesheet paints, and the OPEN
   list is this stack's own .hbvb-select-menu rather than the platform's.
   A page that renders a <select> after load calls HBVB.enhanceSelects()
   again on the new markup - see .claude/rules/design.md. */
.hbvb-select { position: relative }
.hbvb-select-native {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
}
.hbvb-select-trigger {
  width: 100%; padding: 13px 40px 13px 14px; text-align: left;
  background: var(--panel-2); border: 1px solid var(--br); border-radius: 11px;
  color: var(--txt-2); font-family: var(--sans); font-size: 15px;
  cursor: pointer; position: relative; display: block;
}
.hbvb-select-trigger::after {
  content: ""; position: absolute; right: 15px; top: 50%;
  width: 8px; height: 8px; margin-top: -5px;
  border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: rotate(45deg); pointer-events: none;
}
.hbvb-select-trigger:focus-visible { outline: none; border-color: var(--gold); background: var(--panel) }
.hbvb-select.open .hbvb-select-trigger { outline: none; border-color: var(--gold); background: var(--panel) }
.hbvb-select-trigger[disabled] { opacity: .5; cursor: not-allowed }
.hbvb-select-value.placeholder { color: var(--faint) }
.hbvb-select-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5;
  margin: 0; padding: 6px; list-style: none;
  background: var(--sheet); border: 1px solid var(--br); border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  max-height: 260px; overflow-y: auto;
}
.hbvb-select-menu[hidden] { display: none }
.hbvb-select-option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 9px; cursor: pointer;
  color: var(--txt-2); font-family: var(--sans); font-size: 14px;
}
.hbvb-select-option:hover, .hbvb-select-option.active { background: rgba(245, 197, 66, .09) }
.hbvb-select-option[aria-selected="true"] { color: var(--gold-txt) }
.hbvb-select-check { flex: none; color: var(--teal); visibility: hidden }
.hbvb-select-option[aria-selected="true"] .hbvb-select-check { visibility: visible }

/* ── custom autocomplete (combobox) ──────────────────────────────────────
   A text field with its own type-ahead list, for a control that used to lean
   on the browser's native suggestion popup (a <datalist>, previously the
   Country field's `list="countries"`) - the same OS-chrome problem the
   custom select above exists for, but for an <input> that stays fully typable
   rather than a closed box. assets/shell.js's HBVB.combobox() wraps the
   input in one of these; the input itself is untouched (still what
   FormData/checkValidity read), and .hbvb-combo-menu reuses the custom
   select's own .hbvb-select-menu/.hbvb-select-option look so a type-ahead
   list and a select's open list read as the same component. See
   .claude/rules/design.md. */
.hbvb-combo { position: relative; display: block }
.hbvb-combo-menu { list-style: none }
.hbvb-combo-empty {
  padding: 10px 12px; font-family: var(--sans); font-size: 13px; color: var(--faint);
}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--br); background: var(--panel-2); color: var(--txt);
  font-family: var(--label); font-weight: 600; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase;
}
.btn:hover { border-color: var(--faint); color: var(--txt-2) }
.btn-primary {
  background: linear-gradient(135deg, var(--gold), #F0A93C);
  border-color: transparent; color: #05070c;
}
.btn-primary:hover { filter: brightness(1.07); color: #05070c }
/* The maquette's own colour for a verification action - green-to-teal, never
   gold, so "sign this" reads as a different kind of action from "buy this"
   or "go here" everywhere else .btn-primary is used. */
.btn-verify {
  background: linear-gradient(135deg, var(--green), var(--teal));
  border-color: transparent; color: var(--navy-deep);
}
.btn-verify:hover { filter: brightness(1.07); color: var(--navy-deep) }
.btn-block { width: 100% }
.btn[disabled] { opacity: .55; cursor: default }

/* ── the theme toggle ───────────────────────────────────────────────────── */
.theme-btn {
  position: fixed; top: 16px; right: 16px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--br); background: var(--panel-2); color: var(--txt);
  font-size: 15px; line-height: 1;
}
.theme-btn:hover { border-color: var(--gold); color: var(--gold) }

/* ── status line ────────────────────────────────────────────────────────── */
/* Collapsed while empty, so a panel is not padded out around a blank line. */
.msg { margin: 0; font-size: 13.5px; color: var(--faint) }
.msg:empty { display: none }
.msg.ok { color: var(--green) }
.msg.error { color: var(--coral) }

/* ── the one-box page: a single centred panel and nothing else ──────────── */
.solo { min-height: 100dvh; display: grid; place-items: center; padding: 28px 20px }
.solo-box { width: 100%; max-width: 420px; display: grid; gap: 22px }

.foot {
  font-family: var(--label); font-weight: 500; font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
  text-align: center;
}

.logo { display: flex; align-items: center; gap: 9px }
.logo:hover { color: inherit }
/* The canvas mark: a rounded gold-to-coral tile with an H. Replaces the old
   sun-over-water circle, which belonged to the previous palette. */
.logo-mark {
  width: 28px; height: 28px; flex: none; border-radius: 8px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--gold), var(--coral));
  color: #05070c; font-family: var(--label); font-weight: 700; font-size: 16px; line-height: 1;
}
.logo-mark::after { content: "H" }
.logo-mark.sm { width: 23px; height: 23px; border-radius: 7px; font-size: 13px }
.logo-name {
  font-family: var(--label); font-weight: 700; font-size: 15px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--txt-2);
}

/* ── footer ─────────────────────────────────────────────────────────────── */
/*
 * ONE footer, everywhere it appears.
 *
 * There used to be three: a columned `.site-foot` with a copyright line, a
 * colour stripe and a couple of links; `.solo-foot` on the entry pages; and
 * `.pv-foot` inside the preview's phone frame. Three rules, one sentence's
 * worth of content between them, and they had already drifted - the old
 * footer's "Privacy" link went to the home page.
 *
 * The line is the canvas's own sign-off and the only thing a footer on this
 * site has to say. Set as the canvas sets it on the AUTH screen: Inter, 11px,
 * mixed case, --faint, centred, no rule above it (it used to be uppercase
 * Oswald with a border - drift, corrected). It is the same class in both
 * shapes: a page-level <footer> takes the room a footer needs, a <p> inside a
 * box is just the line. Each phrase is switched on or off by an administrator
 * per audience - see assets/footer.js and lib/footer.ts.
 *
 * DELIBERATE DEVIATION: the canvas draws the sign-off only on the AUTH
 * screen; the signed-in screens (HOME ... PROFILE) end at the tab bar. The
 * member footer under .app-main is here because the site owner asked for a
 * separately switchable member footer; an administrator who prefers the
 * canvas's bare screens switches both phrases off.
 */
.page-foot {
  font-family: var(--sans); font-weight: 400; font-size: 11px;
  color: var(--faint); text-align: center; margin: 10px 0 0;
}
footer.page-foot { margin: 0; padding: 26px 20px 24px }
/* Inside the app, the member footer sits under the screen's content. */
.app-main > footer.page-foot { margin-top: 32px; padding: 0 }

/* ── entry pages ────────────────────────────────────────────────────────── */
.solo-mark { display: flex; align-items: center; gap: 10px }
.solo-mark .logo-name { font-size: 13px }
.solo h1 { margin: 20px 0 0; font-size: clamp(27px, 5vw, 33px) }
.solo .lede { margin: 9px 0 0 }
.solo-alt { margin: 18px 0 0; font-size: 12.5px; color: var(--faint); text-align: center }
.solo-alt a { cursor: pointer }

.login-main { min-height: calc(100dvh - 62px); display: grid; place-items: center; padding: 44px 24px 64px }
.login-box { width: 100%; max-width: 400px; display: grid; gap: 0 }
.login-box h1 { margin: 12px 0 0; font-size: clamp(27px, 5vw, 32px) }
.login-box .lede { margin: 9px 0 0 }

/* The field spacing the old stylesheet baked into `.field` itself. Kept as a
   margin rather than a grid gap so a page can drop a field in anywhere. */
.field { margin-top: 18px }
.login-actions { margin-top: 22px }
.login-rule {
  display: flex; align-items: center; gap: 12px; margin: 24px 0 0;
  font-family: var(--label); font-weight: 600; font-size: 9.5px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--faint);
}
.login-rule::before, .login-rule::after { content: ""; flex: 1; height: 1px; background: var(--br) }

/* The old status-line class. auth.js finds `.login-msg, .msg` and only toggles
   .ok/.error, so both spellings work; this one keeps its old top margin. */
.login-msg { margin: 13px 0 0; font-size: 12.5px; color: var(--faint) }
.login-msg.ok { color: var(--green) }
.login-msg.error { color: var(--coral) }
.login-msg:empty { display: none }