/* ==========================================================================
   Hiring Passport — design tokens + base components
   Direction: "Milestone" — ultramarine record, marigold for progress reached,
   cool paper-white canvas. Mobile first (390px), widens at 760px and 1100px.
   Fonts (Google Fonts, may be self-hosted):
   https://fonts.googleapis.com/css2?family=Funnel+Display:wght@500;600;700;800&family=Funnel+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Geist+Mono:wght@400;500;600&display=swap
   ========================================================================== */

:root {
  /* ---- Colour: neutrals (cool, biased to the brand blue) ---- */
  --hp-canvas: #F2F3F8;       /* page background */
  --hp-surface: #FFFFFF;      /* cards, panels, inputs */
  --hp-sunken: #E9EBF3;       /* wells, track empties, table heads */
  --hp-line: #D9DCE8;         /* hairlines, card borders */
  --hp-line-strong: #A9AFC7;  /* input borders, dividers that must be seen (3:1 on white) */
  --hp-ink: #11142B;          /* primary text  — 17.6:1 on white */
  --hp-ink-2: #3A3F5C;        /* secondary text — 10.4:1 on white */
  --hp-muted: #5A6080;        /* captions, meta — 6.4:1 on white, 5.7:1 on canvas */

  /* ---- Colour: brand ---- */
  --hp-brand: #2E3CE0;        /* ultramarine: primary actions, links, active nav — 7.4:1 with white */
  --hp-brand-hover: #2330C4;
  --hp-brand-deep: #1C2499;   /* credential card ground */
  --hp-brand-deeper: #141A73; /* card pattern, pressed */
  --hp-brand-soft: #E6E8FF;   /* selected rows, brand chips */
  --hp-on-brand: #FFFFFF;
  --hp-on-brand-2: #C9CDFF;   /* secondary text on brand-deep — 8.9:1 */

  /* ---- Colour: milestone (marigold) — progress reached. Never used for text on white. ---- */
  --hp-marigold: #FFC23D;     /* ink on marigold 11.9:1; marigold on brand-deep 7.4:1 */
  --hp-marigold-soft: #FFF1CC;

  /* ---- Colour: semantic (separate from brand) ---- */
  --hp-ok: #12703F;           --hp-ok-soft: #DDF3E5;       /* verified, valid, complete */
  --hp-warn: #8C5A00;         --hp-warn-soft: #FFF0D1;     /* expiring, missing data */
  --hp-danger: #B42318;       --hp-danger-soft: #FDE7E5;   /* revoked, expired, errors */
  --hp-private: #5B3FA8;      --hp-private-soft: #EEE9FB;  /* hidden by the candidate */

  /* ---- Type ---- */
  --hp-font-display: 'Funnel Display', 'Funnel Sans', ui-sans-serif, system-ui, sans-serif;
  --hp-font-body: 'Funnel Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hp-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* scale (mobile → desktop via clamp) */
  --hp-text-xs: 0.75rem;      /* 12 — mono labels only */
  --hp-text-sm: 0.875rem;     /* 14 — meta, captions */
  --hp-text-base: 1rem;       /* 16 — body, inputs (16px stops iOS zoom) */
  --hp-text-md: 1.125rem;     /* 18 — lead */
  --hp-text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);      /* 20→24 panel titles */
  --hp-text-xl: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);    /* 26→36 page titles */
  --hp-text-2xl: clamp(2.25rem, 1.6rem + 2.8vw, 3.75rem);    /* 36→60 hero / credential title */

  /* ---- Space (4px base) ---- */
  --hp-s1: 4px; --hp-s2: 8px; --hp-s3: 12px; --hp-s4: 16px; --hp-s5: 20px;
  --hp-s6: 24px; --hp-s8: 32px; --hp-s10: 40px; --hp-s12: 48px; --hp-s16: 64px;
  --hp-gutter: 16px;          /* 16 on phones, 24 tablet, 40 desktop */
  --hp-max: 1200px;

  /* ---- Radii: square-ish, like a card in a wallet ---- */
  --hp-r-sm: 6px;   /* chips, inputs */
  --hp-r-md: 10px;  /* buttons, rows */
  --hp-r-lg: 16px;  /* panels */
  --hp-r-xl: 22px;  /* the credential card only */
  --hp-r-pill: 999px;

  /* ---- Shadow: used on the credential card and floating bars only ---- */
  --hp-shadow-card: 0 1px 0 rgba(17,20,43,.04), 0 18px 40px -18px rgba(28,36,153,.55);
  --hp-shadow-float: 0 -1px 0 var(--hp-line), 0 -8px 24px -12px rgba(17,20,43,.18);
  --hp-shadow-focus: 0 0 0 3px var(--hp-surface), 0 0 0 5px var(--hp-brand);

  --hp-tap: 44px;   /* minimum touch target */
  --hp-ease: cubic-bezier(.2,.7,.2,1);
}
@media (min-width: 760px)  { :root { --hp-gutter: 24px; } }
@media (min-width: 1100px) { :root { --hp-gutter: 40px; } }

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: light; }
body {
  margin: 0; background: var(--hp-canvas); color: var(--hp-ink);
  font-family: var(--hp-font-body); font-size: var(--hp-text-base); line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--hp-font-display); line-height: 1.08; margin: 0; letter-spacing: -0.015em; text-wrap: balance; font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--hp-brand); text-underline-offset: 3px; }
a:hover { color: var(--hp-brand-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--hp-shadow-focus); border-radius: var(--hp-r-sm); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---- Text utilities ---- */
.hp-eyebrow { font-family: var(--hp-font-mono); font-size: var(--hp-text-xs); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--hp-muted); }
.hp-mono { font-family: var(--hp-font-mono); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.hp-muted { color: var(--hp-muted); }
.hp-lead { font-size: var(--hp-text-md); color: var(--hp-ink-2); max-width: 62ch; }
.hp-small { font-size: var(--hp-text-sm); }
.hp-num { font-family: var(--hp-font-display); font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.02em; }

/* ---- Layout ---- */
.hp-wrap { width: 100%; max-width: calc(var(--hp-max) + 2 * var(--hp-gutter)); margin-inline: auto; padding-inline: var(--hp-gutter); }
.hp-stack { display: grid; gap: var(--hp-s4); align-content: start; }
.hp-stack-lg { display: grid; gap: var(--hp-s6); align-content: start; }
.hp-row { display: flex; flex-wrap: wrap; gap: var(--hp-s2); align-items: center; }
.hp-main { padding-block: var(--hp-s6) var(--hp-s16); }
.hp-page-head { display: grid; gap: var(--hp-s2); margin-bottom: var(--hp-s6); }
.hp-page-head h1 { font-size: var(--hp-text-xl); }
.hp-page-head p { color: var(--hp-ink-2); max-width: 62ch; }
.hp-split { display: grid; gap: var(--hp-s6); }
.hp-split > * { min-width: 0; }
@media (min-width: 1100px) {
  .hp-split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--hp-s8); }
  .hp-split--even { grid-template-columns: 1fr 1fr; }
  .hp-sticky { position: sticky; top: var(--hp-s6); align-self: start; }
}

/* ==========================================================================
   App shell: top bar, audience switch, sub nav, footer
   ========================================================================== */
.hp-topbar { background: var(--hp-surface); border-bottom: 1px solid var(--hp-line); }
.hp-topbar__inner { display: grid; gap: var(--hp-s3); padding-block: var(--hp-s3); grid-template-columns: 1fr auto; align-items: center; }
.hp-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--hp-ink); min-height: var(--hp-tap); }
.hp-brand svg { width: 28px; height: 34px; flex: none; }
.hp-brand__name { font-family: var(--hp-font-display); font-weight: 700; font-size: 1.1875rem; letter-spacing: -0.02em; }
.hp-holder { display: inline-flex; align-items: center; gap: var(--hp-s2); font-size: var(--hp-text-sm); color: var(--hp-ink-2); }
.hp-holder__text { display: none; }
.hp-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--hp-brand-soft); color: var(--hp-brand-deep); font-weight: 700; font-size: var(--hp-text-sm); flex: none; }
.hp-avatar--lg { width: 56px; height: 56px; font-size: 1.125rem; font-family: var(--hp-font-display); }

/* Audience switch: one product, three views */
.hp-aud { grid-column: 1 / -1; order: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--hp-sunken); border-radius: var(--hp-r-md); }
.hp-aud a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--hp-tap); padding-inline: var(--hp-s2); border-radius: 7px; text-decoration: none; color: var(--hp-ink-2); font-weight: 600; font-size: var(--hp-text-sm); }
.hp-aud a:hover { color: var(--hp-ink); background: rgba(255,255,255,.6); }
.hp-aud a[aria-current="true"] { background: var(--hp-surface); color: var(--hp-ink); box-shadow: 0 1px 2px rgba(17,20,43,.12); }
.hp-aud svg { width: 16px; height: 16px; flex: none; }

.hp-subnav { background: var(--hp-surface); border-bottom: 1px solid var(--hp-line); }
.hp-subnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--hp-s1) var(--hp-s6); }
.hp-subnav a { display: inline-flex; align-items: center; min-height: 48px; text-decoration: none; color: var(--hp-muted); font-weight: 600; font-size: var(--hp-text-sm); border-bottom: 2px solid transparent; }
.hp-subnav a:hover { color: var(--hp-ink); }
.hp-subnav a[aria-current="page"] { color: var(--hp-ink); border-bottom-color: var(--hp-brand); }

@media (min-width: 760px) {
  .hp-topbar__inner { grid-template-columns: auto 1fr auto; gap: var(--hp-s6); }
  .hp-aud { grid-column: auto; order: 0; justify-self: center; width: min(100%, 440px); }
  .hp-holder__text { display: block; text-align: right; line-height: 1.3; }
}

.hp-foot { border-top: 1px solid var(--hp-line); padding-block: var(--hp-s6); color: var(--hp-muted); font-size: var(--hp-text-sm); }
.hp-foot__inner { display: flex; flex-wrap: wrap; gap: var(--hp-s2) var(--hp-s6); justify-content: space-between; }

/* ==========================================================================
   Buttons — real <button>/<a>, 44px minimum
   ========================================================================== */
.hp-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--hp-s2); min-height: var(--hp-tap); padding: 10px 18px; border-radius: var(--hp-r-md); border: 1px solid transparent; font-weight: 600; font-size: var(--hp-text-base); line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .15s var(--hp-ease), border-color .15s, color .15s; white-space: nowrap; }
.hp-btn svg { width: 18px; height: 18px; flex: none; }
.hp-btn--primary { background: var(--hp-brand); color: var(--hp-on-brand); }
.hp-btn--primary:hover { background: var(--hp-brand-hover); color: var(--hp-on-brand); }
.hp-btn--secondary { background: var(--hp-surface); color: var(--hp-ink); border-color: var(--hp-line-strong); }
.hp-btn--secondary:hover { border-color: var(--hp-ink-2); color: var(--hp-ink); }
.hp-btn--quiet { background: transparent; color: var(--hp-brand); padding-inline: var(--hp-s3); }
.hp-btn--quiet:hover { background: var(--hp-brand-soft); }
.hp-btn--marigold { background: var(--hp-marigold); color: var(--hp-ink); }
.hp-btn--marigold:hover { background: #F5B320; color: var(--hp-ink); }
.hp-btn--on-brand { background: transparent; color: var(--hp-on-brand); border-color: rgba(255,255,255,.45); }
.hp-btn--on-brand:hover { background: rgba(255,255,255,.1); color: var(--hp-on-brand); }
.hp-btn--danger { background: var(--hp-surface); color: var(--hp-danger); border-color: var(--hp-line-strong); }
.hp-btn--block { width: 100%; }
.hp-btn--sm { min-height: var(--hp-tap); padding: 8px 14px; font-size: var(--hp-text-sm); }

/* ==========================================================================
   Chips (status) — state carried by icon + word, never colour alone
   ========================================================================== */
.hp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--hp-r-pill); font-size: var(--hp-text-sm); font-weight: 600; line-height: 1.3; white-space: nowrap; border: 1px solid transparent; }
.hp-chip svg { width: 14px; height: 14px; flex: none; }
.hp-chip--ok { background: var(--hp-ok-soft); color: var(--hp-ok); }
.hp-chip--brand { background: var(--hp-brand-soft); color: var(--hp-brand-deep); }
.hp-chip--muted { background: var(--hp-sunken); color: var(--hp-ink-2); }
.hp-chip--private { background: var(--hp-private-soft); color: var(--hp-private); }
.hp-chip--warn { background: var(--hp-warn-soft); color: var(--hp-warn); }
.hp-chip--marigold { background: var(--hp-marigold); color: var(--hp-ink); }
.hp-chip--on-brand { background: rgba(255,255,255,.12); color: var(--hp-on-brand); border-color: rgba(255,255,255,.22); }

/* ==========================================================================
   Panels
   ========================================================================== */
.hp-panel { background: var(--hp-surface); border: 1px solid var(--hp-line); border-radius: var(--hp-r-lg); padding: var(--hp-s5); display: grid; gap: var(--hp-s4); align-content: start; min-width: 0; }
@media (min-width: 760px) { .hp-panel { padding: var(--hp-s6); } }
.hp-panel__head { display: flex; flex-wrap: wrap; gap: var(--hp-s2) var(--hp-s4); justify-content: space-between; align-items: baseline; }
.hp-panel__title { font-size: var(--hp-text-lg); }
.hp-panel--flush { padding: 0; overflow: hidden; }
.hp-note { padding: var(--hp-s3) var(--hp-s4); border-radius: var(--hp-r-md); background: var(--hp-sunken); color: var(--hp-ink-2); font-size: var(--hp-text-sm); display: flex; gap: var(--hp-s3); align-items: flex-start; }
.hp-note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--hp-muted); }

/* ==========================================================================
   THE CREDENTIAL CARD (hero component)
   ========================================================================== */
.hp-cred { position: relative; isolation: isolate; overflow: hidden; color: var(--hp-on-brand); background: var(--hp-brand-deep); border-radius: var(--hp-r-xl); padding: var(--hp-s5); display: grid; gap: var(--hp-s5); box-shadow: var(--hp-shadow-card); min-width: 0; }
@media (min-width: 760px) { .hp-cred { padding: var(--hp-s8); gap: var(--hp-s6); } }
/* security-print texture: fine diagonal hairlines + marigold glow at the milestone corner */
.hp-cred::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255,194,61,.22), transparent 55%),
    repeating-linear-gradient(-32deg, rgba(255,255,255,.045) 0 1px, transparent 1px 9px),
    linear-gradient(160deg, var(--hp-brand-deep) 0%, var(--hp-brand-deeper) 100%); }
.hp-cred__top { display: flex; gap: var(--hp-s3); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.hp-issuer { display: flex; gap: var(--hp-s3); align-items: center; min-width: 0; }
.hp-issuer__mark { width: 40px; height: 40px; border-radius: 10px; background: var(--hp-surface); color: var(--hp-brand-deep); display: grid; place-items: center; font-family: var(--hp-font-display); font-weight: 800; font-size: 15px; flex: none; }
.hp-issuer__name { font-weight: 600; line-height: 1.25; }
.hp-issuer__sub { font-size: var(--hp-text-sm); color: var(--hp-on-brand-2); display: flex; align-items: center; gap: 5px; }
.hp-issuer__sub svg { width: 14px; height: 14px; color: var(--hp-marigold); }
.hp-cred__kind { font-family: var(--hp-font-mono); font-size: var(--hp-text-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--hp-on-brand-2); }
.hp-cred__title { font-size: var(--hp-text-2xl); font-weight: 800; letter-spacing: -0.03em; line-height: .95; }
.hp-cred__role { font-size: var(--hp-text-md); color: var(--hp-on-brand-2); margin-top: var(--hp-s2); }
.hp-cred__role strong { color: var(--hp-on-brand); font-weight: 600; }
.hp-cred__foot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hp-s3) var(--hp-s4); padding-top: var(--hp-s4); border-top: 1px dashed rgba(255,255,255,.32); margin-top: calc(-1 * var(--hp-s1)); }
@media (min-width: 760px) { .hp-cred__foot { grid-template-columns: repeat(4, auto); justify-content: space-between; } }
.hp-cred__foot dt { font-family: var(--hp-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--hp-on-brand-2); }
.hp-cred__foot dd { margin: 2px 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.hp-cred__foot div { min-width: 0; }
.hp-cred--compact { padding: var(--hp-s5); gap: var(--hp-s4); }
.hp-cred--compact .hp-cred__foot { grid-template-columns: 1fr 1fr; justify-content: stretch; }
.hp-cred--compact .hp-cred__title { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); }

/* ==========================================================================
   Stage track — how far the candidate got. Signature element.
   <ol class="hp-track"> <li class="is-done">Applied</li> … <li class="is-done is-top">Final</li> <li>Offer</li>
   ========================================================================== */
.hp-track { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; counter-reset: stage; }
.hp-track li { display: grid; gap: 7px; font-size: 12px; font-weight: 600; color: var(--hp-muted); min-width: 0; }
.hp-track li::before { content: ""; height: 8px; border-radius: 2px; background: var(--hp-sunken); }
.hp-track li.is-done { color: var(--hp-ink); }
.hp-track li.is-done::before { background: var(--hp-brand); }
.hp-track li.is-top::before { background: var(--hp-marigold); box-shadow: inset 0 0 0 1.5px var(--hp-ink); }
.hp-track li span { overflow-wrap: anywhere; line-height: 1.2; }
/* on the dark card */
.hp-cred .hp-track li { color: var(--hp-on-brand-2); }
.hp-cred .hp-track li::before { background: rgba(255,255,255,.16); }
.hp-cred .hp-track li.is-done { color: var(--hp-on-brand); }
.hp-cred .hp-track li.is-done::before { background: rgba(255,255,255,.78); }
.hp-cred .hp-track li.is-top::before { background: var(--hp-marigold); box-shadow: 0 0 0 3px rgba(255,194,61,.25); }
.hp-track--lg li::before { height: 12px; border-radius: 3px; }
.hp-track--lg li { font-size: var(--hp-text-sm); }

/* ==========================================================================
   Level ladder — each rung is a hoop you can skip, not points
   ========================================================================== */
.hp-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hp-rung { display: grid; grid-template-columns: 40px 1fr; gap: var(--hp-s3); align-items: center; padding: var(--hp-s3); border-radius: var(--hp-r-md); background: var(--hp-surface); border: 1px solid var(--hp-line); }
.hp-rung__n { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-family: var(--hp-font-display); font-weight: 800; font-size: 1.125rem; background: var(--hp-sunken); color: var(--hp-muted); }
.hp-rung__t { font-weight: 600; line-height: 1.3; }
.hp-rung__d { font-size: var(--hp-text-sm); color: var(--hp-muted); line-height: 1.4; }
.hp-rung.is-earned .hp-rung__n { background: var(--hp-brand); color: var(--hp-on-brand); }
.hp-rung.is-current { border: 2px solid var(--hp-ink); padding: calc(var(--hp-s3) - 1px); }
.hp-rung.is-current .hp-rung__n { background: var(--hp-marigold); color: var(--hp-ink); }
.hp-rung.is-next { border-style: dashed; border-color: var(--hp-line-strong); background: transparent; }

/* ==========================================================================
   Toggle switch (privacy controls)  <label class="hp-switch"><input type="checkbox" role="switch"> …
   ========================================================================== */
.hp-toggle-row { display: grid; grid-template-columns: 1fr auto; gap: var(--hp-s3); align-items: center; padding-block: var(--hp-s3); border-bottom: 1px solid var(--hp-line); min-height: 56px; }
.hp-toggle-row:last-child { border-bottom: 0; }
.hp-toggle-row__t { font-weight: 600; }
.hp-toggle-row__d { font-size: var(--hp-text-sm); color: var(--hp-muted); }
.hp-switch { position: relative; display: inline-flex; width: 52px; height: 44px; align-items: center; cursor: pointer; flex: none; }
.hp-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.hp-switch__ui { width: 52px; height: 30px; border-radius: 999px; background: var(--hp-line-strong); position: relative; transition: background .18s var(--hp-ease); }
.hp-switch__ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--hp-surface); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .18s var(--hp-ease); }
.hp-switch input:checked + .hp-switch__ui { background: var(--hp-brand); }
.hp-switch input:checked + .hp-switch__ui::after { transform: translateX(22px); }
.hp-switch input:focus-visible + .hp-switch__ui { box-shadow: var(--hp-shadow-focus); }
.hp-switch input:disabled { cursor: not-allowed; }
.hp-switch input:disabled + .hp-switch__ui { background: var(--hp-ink-2); opacity: .45; }
.hp-lockline { display: inline-flex; gap: 6px; align-items: center; font-size: var(--hp-text-sm); color: var(--hp-muted); font-weight: 600; }
.hp-lockline svg { width: 16px; height: 16px; }

/* ==========================================================================
   Forms
   ========================================================================== */
.hp-form { display: grid; gap: var(--hp-s6); }
.hp-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--hp-s3); min-width: 0; }
.hp-fieldset legend { padding: 0; margin-bottom: var(--hp-s3); font-family: var(--hp-font-display); font-weight: 700; font-size: 1.125rem; }
.hp-field { display: grid; gap: 6px; }
.hp-label { font-weight: 600; font-size: var(--hp-text-sm); }
.hp-hint { font-size: var(--hp-text-sm); color: var(--hp-muted); }
/* inline icons inside running text */
.hp-hint svg, .hp-small > svg, .hp-inline-ic { width: 15px; height: 15px; vertical-align: -2px; flex: none; }
.hp-input, .hp-select, .hp-textarea { width: 100%; min-height: 48px; padding: 11px 14px; border-radius: var(--hp-r-md); border: 1px solid var(--hp-line-strong); background: var(--hp-surface); font-size: var(--hp-text-base); color: var(--hp-ink); }
.hp-textarea { min-height: 112px; resize: vertical; line-height: 1.5; }
.hp-input:focus, .hp-select:focus, .hp-textarea:focus { outline: none; border-color: var(--hp-brand); box-shadow: 0 0 0 3px var(--hp-brand-soft); }
.hp-select { appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%233A3F5C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }

/* option cards (radio / checkbox) */
.hp-options { display: grid; gap: var(--hp-s2); }
.hp-option { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: var(--hp-s3); align-items: start; padding: 12px 14px; min-height: var(--hp-tap); border: 1px solid var(--hp-line-strong); border-radius: var(--hp-r-md); background: var(--hp-surface); cursor: pointer; }
.hp-option input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--hp-brand); cursor: pointer; }
.hp-option__t { font-weight: 600; line-height: 1.35; }
.hp-option__d { font-size: var(--hp-text-sm); color: var(--hp-muted); }
.hp-option:has(input:checked) { border-color: var(--hp-brand); background: var(--hp-brand-soft); box-shadow: inset 0 0 0 1px var(--hp-brand); }
.hp-option:has(input:focus-visible) { box-shadow: var(--hp-shadow-focus); }
.hp-options--chips { display: flex; flex-wrap: wrap; gap: var(--hp-s2); }
.hp-options--chips .hp-option { grid-template-columns: 20px auto; align-items: center; padding: 10px 14px; border-radius: var(--hp-r-pill); }
.hp-options--chips .hp-option input { margin: 0; }

/* ==========================================================================
   Facts list (label / value)
   ========================================================================== */
.hp-facts { margin: 0; display: grid; }
.hp-facts > div { display: grid; gap: 2px; padding-block: var(--hp-s3); border-bottom: 1px solid var(--hp-line); }
.hp-facts > div:last-child { border-bottom: 0; }
.hp-facts dt { font-family: var(--hp-font-mono); font-size: var(--hp-text-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--hp-muted); }
.hp-facts dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
@media (min-width: 760px) { .hp-facts > div { grid-template-columns: 200px 1fr; gap: var(--hp-s4); align-items: baseline; } }

/* hidden-by-candidate value */
.hp-redacted { display: inline-flex; align-items: center; gap: var(--hp-s2); color: var(--hp-private); font-weight: 600; font-size: var(--hp-text-sm); }
.hp-redacted__bar { display: inline-block; width: 92px; height: 12px; border-radius: 3px; background: repeating-linear-gradient(-45deg, var(--hp-private) 0 4px, var(--hp-private-soft) 4px 8px); opacity: .7; }
.hp-redacted svg { width: 16px; height: 16px; }

/* ==========================================================================
   Lists: evidence timeline, link rows, audit rows
   ========================================================================== */
.hp-list { list-style: none; margin: 0; padding: 0; display: grid; }
.hp-list > li { display: grid; grid-template-columns: auto 1fr; gap: var(--hp-s3); padding-block: var(--hp-s3); border-bottom: 1px solid var(--hp-line); align-items: start; }
.hp-list > li:last-child { border-bottom: 0; }
.hp-list__icon { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--hp-ok-soft); color: var(--hp-ok); }
.hp-list__icon svg { width: 18px; height: 18px; }
.hp-list__t { font-weight: 600; line-height: 1.35; }
.hp-list__d { font-size: var(--hp-text-sm); color: var(--hp-muted); }
.hp-list__meta { font-family: var(--hp-font-mono); font-size: var(--hp-text-xs); color: var(--hp-muted); letter-spacing: .02em; margin-top: 2px; }

/* ==========================================================================
   Verification banner (public link)
   ========================================================================== */
.hp-verify { display: grid; grid-template-columns: auto 1fr; gap: var(--hp-s3); align-items: center; padding: var(--hp-s4); border-radius: var(--hp-r-lg); background: var(--hp-ok-soft); color: var(--hp-ink); border: 1px solid rgba(18,112,63,.25); }
.hp-verify__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--hp-ok); color: #fff; display: grid; place-items: center; }
.hp-verify__icon svg { width: 24px; height: 24px; }
.hp-verify__t { font-weight: 700; color: var(--hp-ok); font-size: var(--hp-text-md); line-height: 1.25; }
.hp-verify__d { font-size: var(--hp-text-sm); color: var(--hp-ink-2); }
.hp-verify--expired { background: var(--hp-danger-soft); border-color: rgba(180,35,24,.25); }
.hp-verify--expired .hp-verify__icon { background: var(--hp-danger); }
.hp-verify--expired .hp-verify__t { color: var(--hp-danger); }

/* ==========================================================================
   Stats + bar chart (compliance)
   ========================================================================== */
.hp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hp-s3); }
@media (min-width: 760px) { .hp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hp-stat { background: var(--hp-surface); border: 1px solid var(--hp-line); border-radius: var(--hp-r-lg); padding: var(--hp-s4); display: grid; gap: 4px; align-content: start; min-width: 0; }
.hp-stat__n { font-family: var(--hp-font-display); font-weight: 700; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.hp-stat__l { font-size: var(--hp-text-sm); color: var(--hp-ink-2); font-weight: 500; }
.hp-stat__s { font-size: var(--hp-text-sm); color: var(--hp-muted); }
.hp-bars { display: grid; gap: var(--hp-s3); }
.hp-bar { display: grid; gap: 6px; }
.hp-bar__head { display: flex; justify-content: space-between; gap: var(--hp-s3); font-size: var(--hp-text-sm); }
.hp-bar__head b { font-variant-numeric: tabular-nums; }
.hp-bar__track { height: 14px; border-radius: 3px; background: var(--hp-sunken); overflow: hidden; }
.hp-bar__fill { height: 100%; background: var(--hp-brand); border-radius: 3px; }
.hp-bar__fill--top { background: var(--hp-marigold); box-shadow: inset 0 0 0 1.5px var(--hp-ink); }

/* ==========================================================================
   Table → stacked rows on phones (no sideways scrolling at 390px)
   ========================================================================== */
.hp-table { width: 100%; border-collapse: collapse; font-size: var(--hp-text-sm); }
.hp-table th { text-align: left; font-family: var(--hp-font-mono); font-size: var(--hp-text-xs); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--hp-muted); padding: 10px 12px; border-bottom: 1px solid var(--hp-line); background: var(--hp-canvas); }
.hp-table td { padding: 12px; border-bottom: 1px solid var(--hp-line); vertical-align: top; }
.hp-table tr:last-child td { border-bottom: 0; }
@media (max-width: 759px) {
  .hp-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .hp-table--stack, .hp-table--stack tbody, .hp-table--stack tr, .hp-table--stack td { display: block; width: 100%; }
  .hp-table--stack tr { padding: var(--hp-s3) var(--hp-s4); border-bottom: 1px solid var(--hp-line); display: grid; grid-template-columns: 1fr auto; gap: 2px var(--hp-s3); }
  .hp-table--stack tr:last-child { border-bottom: 0; }
  .hp-table--stack td { padding: 0; border: 0; }
  .hp-table--stack td[data-col="date"] { grid-column: 1 / -1; font-size: var(--hp-text-xs); color: var(--hp-muted); }
}

/* ==========================================================================
   Mobile action bar (sticky bottom) + toast
   ========================================================================== */
.hp-actionbar { position: sticky; bottom: 0; z-index: 10; background: var(--hp-surface); box-shadow: var(--hp-shadow-float); padding: var(--hp-s3) var(--hp-gutter) calc(var(--hp-s3) + env(safe-area-inset-bottom, 0px)); display: flex; gap: var(--hp-s2); }
.hp-actionbar .hp-btn { flex: 1; }
@media (min-width: 1100px) { .hp-actionbar { display: none; } }

.hp-toast { position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: var(--hp-ink); color: #fff; padding: 12px 18px; border-radius: var(--hp-r-md); font-weight: 600; font-size: var(--hp-text-sm); display: flex; gap: var(--hp-s2); align-items: center; transition: opacity .2s, transform .2s var(--hp-ease); z-index: 20; max-width: calc(100vw - 32px); }
.hp-toast svg { width: 18px; height: 18px; color: var(--hp-marigold); flex: none; }
.hp-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 1100px) { .hp-toast { bottom: 32px; } }

/* "Prototype" label for illustrative / future features */
.hp-proto { display: inline-flex; align-items: center; gap: 6px; font-family: var(--hp-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--hp-warn); background: var(--hp-warn-soft); border-radius: var(--hp-r-sm); padding: 3px 8px; font-weight: 600; }