/* Help pages (views/help/index.ejs = the hub, views/help/page.ejs = one page; .automation/planning/helppages/).
   Built from the Release Notes blocks (css/release-notes.css), copied under an hc- prefix so a release-notes
   redesign never moves the help pages. Colour rule: master-color / semantic variables only, never raw hex or rgb
   literals, so the page follows every theme. Small text on the --text-* tokens (font standard).
   Body text is 18px: the readers are mostly 55 to 75 (research/06, NN/g). */
.hc {
    --hc-ink: var(--ui-text-primaryText);
    --hc-ink-2: var(--ui-text-secondaryText);
    --hc-ink-3: var(--color-gray-500);
    --hc-paper: var(--ui-backgrounds-cardBg);
    --hc-ground: var(--color-slate-9);
    --hc-line: var(--ui-borders-borderLight);
    --hc-band: var(--color-brand-dark);
    --hc-on-band: var(--ui-text-inverseText);
    --hc-on-band-2: rgba(var(--color-ui-header-text-rgb), 0.78);
    --hc-teal: var(--color-teal-4);
    --hc-glow: var(--color-teal-5);
    --hc-link: var(--ui-text-linkText);
    --hc-amber: var(--color-semantic-warning);
    --hc-mark: var(--color-semantic-warning);
    --hc-wrap: 1180px;
    --hc-gutter: clamp(16px, 4vw, 48px);
    --hc-sticky-top: 0px;
    background: var(--hc-paper);
    color: var(--hc-ink);
    line-height: 1.65;
    min-height: 100vh;
    padding-bottom: 72px;
}
.hc *, .hc *::before, .hc *::after { box-sizing: border-box; }
.hc-wrap { max-width: var(--hc-wrap); margin: 0 auto; padding: 0 var(--hc-gutter); }
.hc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hc a { color: var(--hc-link); }
.hc a:focus-visible, .hc button:focus-visible, .hc summary:focus-visible, .hc input:focus-visible {
    outline: 3px solid var(--ui-borders-borderFocus);
    outline-offset: 3px;
    border-radius: 6px;
}
.hc [hidden] { display: none !important; }

/* ---------- Hero (slim: readers want the answer, not a poster) ---------- */
.hc-hero { background: var(--hc-band); color: var(--hc-on-band); padding: 34px 0 44px; }
.hc-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: var(--text-small, 14px); color: var(--hc-on-band-2); }
.hc-crumbs a { color: var(--hc-on-band); font-weight: 600; text-decoration: none; }
.hc-crumbs a:hover { color: var(--hc-glow); text-decoration: underline; }
.hc-crumbs i { font-size: var(--text-2xs, 11px); opacity: 0.7; }
.hc-hero h1 { margin: 18px 0 0; font-size: clamp(38px, 5.4vw, 60px); font-weight: 900; line-height: 1.02; letter-spacing: -0.035em; color: var(--hc-on-band); }
.hc-lede { margin: 16px 0 0; max-width: 46ch; font-size: clamp(19px, 2vw, 23px); font-weight: 300; line-height: 1.4; color: var(--hc-on-band); }
.hc-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 20px 0 0; font-size: var(--text-small, 14px); color: var(--hc-on-band-2); }
.hc-meta i { margin-right: 6px; }

/* ---------- Page layout: "On this page" beside the article ---------- */
.hc-layout { display: grid; grid-template-columns: 228px minmax(0, 1fr); gap: 56px; align-items: start; padding-top: 44px; }
.hc-toc { position: sticky; top: calc(var(--hc-sticky-top) + 24px); max-height: calc(100vh - var(--hc-sticky-top) - 48px); overflow: auto; padding-right: 6px; }
.hc-toc-title { margin: 0 0 10px; font-size: var(--text-xs, 12px); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hc-ink-3); }
.hc-toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--hc-line); }
.hc-toc a {
    display: block; margin-left: -2px; padding: 6px 0 6px 14px;
    border-left: 2px solid transparent;
    font-size: var(--text-small, 14px); line-height: 1.35; text-decoration: none; color: var(--hc-ink-2);
}
.hc-toc a:hover { color: var(--hc-ink); }
.hc-toc a[aria-current="true"] { border-left-color: var(--hc-teal); color: var(--hc-ink); font-weight: 600; }
.hc-article { min-width: 0; max-width: 820px; }

/* ---------- Article text ---------- */
.hc-article > p, .hc-section > p, .hc-section li, .hc-split-copy p, .hc-split-copy li { font-size: 18px; color: var(--hc-ink-2); }
.hc-section p { margin: 0 0 16px; max-width: 66ch; }
.hc-section ul, .hc-section ol { margin: 4px 0 18px; padding-left: 26px; max-width: 64ch; }
/* The app's Tailwind reset (ol, ul { list-style: none }) removed every step number and bullet (2026-10-16). */
.hc-section ol { list-style: decimal; }
.hc-section ul { list-style: disc; }
.hc-section li { margin-bottom: 8px; }
.hc-section li::marker { color: var(--hc-ink-3); }
.hc-section strong { color: var(--hc-ink); }
.hc-ui { font-weight: 700; color: var(--hc-ink); }
.hc-intro { margin: 0 0 8px; font-size: 21px !important; line-height: 1.55; color: var(--hc-ink) !important; max-width: 60ch; }

/* Glossary terms (2026-10-17): each <dt> carries an id other pages link to. */
.hc-glossary { margin: 8px 0 0; max-width: 66ch; }
.hc-glossary dt { margin: 22px 0 4px; font-size: 18px; font-weight: 700; color: var(--hc-ink); scroll-margin-top: calc(var(--hc-sticky-top) + 20px); }
.hc-glossary dt:first-child { margin-top: 4px; }
.hc-glossary dd { margin: 0; font-size: 18px; line-height: 1.6; color: var(--hc-ink-2); }

.hc-section { padding-top: 64px; scroll-margin-top: calc(var(--hc-sticky-top) + 20px); }
.hc-section:first-child { padding-top: 0; }
.hc-section > h2 { margin: 0 0 16px; font-size: clamp(27px, 2.8vw, 34px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--hc-ink); }
.hc-section h3 { margin: 30px 0 10px; font-size: 21px; font-weight: 800; line-height: 1.3; color: var(--hc-ink); }

/* A numbered step: a big thin number beside the heading (from the release notes' stations). */
.hc-step-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 22px; align-items: center; margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--hc-line); }
.hc-step-n { font-size: clamp(64px, 7vw, 88px); font-weight: 100; line-height: 0.8; letter-spacing: -0.05em; color: var(--hc-teal); font-variant-numeric: tabular-nums; }
.hc-step-head h2 { margin: 0; font-size: clamp(27px, 2.8vw, 34px); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; color: var(--hc-ink); }
.hc-step-head p { margin: 6px 0 0 !important; font-size: var(--text-medium, 15px) !important; color: var(--hc-ink-3) !important; }
.hc-step-eyebrow { display: block; margin-bottom: 4px; font-size: var(--text-xs, 12px); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hc-ink-3); }

/* Numbered markers: the same numbers as the discs drawn on a screenshot. */
.hc-num {
    display: inline-flex; align-items: center; justify-content: center; vertical-align: 2px;
    width: 26px; height: 26px; margin-right: 4px; border-radius: 50%;
    background: var(--hc-mark); color: var(--color-gray-900);
    font-size: var(--text-small, 14px); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
}
.hc-keys { list-style: none !important; padding-left: 0 !important; }
.hc-keys li { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: start; margin-bottom: 12px; }
.hc-keys li .hc-num { margin-top: 2px; }

/* Text beside a narrow screenshot (a box from the settings panel). */
.hc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 40px; align-items: start; margin: 8px 0 8px; }
.hc-split-copy > :first-child { margin-top: 0; }
.hc-split .hc-plate { margin: 0; }

/* Checklist with ticks */
.hc-ticks { list-style: none !important; padding-left: 0 !important; }
.hc-ticks li { position: relative; padding-left: 34px; }
.hc-ticks li::before {
    content: ''; position: absolute; left: 7px; top: 6px; width: 8px; height: 14px;
    border: solid var(--hc-teal); border-width: 0 3px 3px 0; transform: rotate(45deg);
}

/* ---------- Screenshots ---------- */
.hc-plate { margin: 26px 0 30px; }
.hc-plate--narrow { max-width: 420px; }
.hc-plate--medium { max-width: 660px; }
.hc-shot {
    position: relative; display: block; overflow: hidden; cursor: zoom-in;
    border-radius: 12px; border: 1px solid var(--hc-line); background: var(--hc-paper);
    box-shadow: 0 1px 2px rgba(var(--color-slate-1-rgb), 0.06), 0 22px 48px -26px rgba(var(--color-slate-1-rgb), 0.38);
}
.hc-shot img { display: block; width: 100%; height: auto; }
.hc-shot::after {
    content: 'Enlarge'; position: absolute; right: 10px; bottom: 10px;
    padding: 4px 11px; border-radius: 999px; font-size: var(--text-small, 14px); font-weight: 600;
    background: rgba(var(--color-slate-1-rgb), 0.82); color: var(--ui-text-inverseText);
    opacity: 0; transition: opacity 0.15s;
}
.hc-shot:hover::after, .hc-shot:focus-visible::after { opacity: 1; }
.hc-plate figcaption { margin-top: 10px; font-size: var(--text-medium, 15px); line-height: 1.5; color: var(--hc-ink-3); max-width: 70ch; }
.hc-pair-row { display: grid; grid-template-columns: var(--hc-a, 1fr) var(--hc-b, 1fr); gap: 18px; align-items: start; }

/* ---------- Callouts ---------- */
.hc-callout {
    display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0 14px; align-items: start;
    margin: 24px 0; padding: 18px 22px; border-radius: 14px;
    border: 1px solid var(--hc-line); background: var(--hc-ground);
}
.hc-callout > i { margin-top: 5px; font-size: 18px; }
.hc-callout p, .hc-callout li { font-size: 17px !important; color: var(--hc-ink-2); }
.hc-callout p:last-child, .hc-callout ul:last-child { margin-bottom: 0; }
.hc-callout-title { margin: 0 0 6px !important; font-weight: 800; color: var(--hc-ink) !important; }
.hc-callout--tip { background: rgba(var(--color-teal-4-rgb), 0.09); border-color: rgba(var(--color-teal-4-rgb), 0.38); }
.hc-callout--tip > i { color: var(--color-teal-1); }
.hc-callout--note { background: rgba(var(--color-blue-6-rgb), 0.07); border-color: rgba(var(--color-blue-6-rgb), 0.3); }
.hc-callout--note > i { color: var(--hc-link); }
.hc-callout--warn { background: rgba(var(--color-semantic-warning-rgb), 0.08); border-color: rgba(var(--color-semantic-warning-rgb), 0.38); }
.hc-callout--warn > i { color: var(--hc-amber); }

/* ---------- Badges, buttons ---------- */
.hc-badge {
    display: inline-block; vertical-align: 3px; margin-left: 8px; padding: 2px 9px; border-radius: 12px;
    font-size: var(--text-xs, 12px); font-weight: 700; letter-spacing: 0; white-space: nowrap;
}
.hc-badge--plus { background: rgba(var(--color-teal-4-rgb), 0.15); color: var(--color-teal-1); }
.hc-badge--country { background: rgba(var(--color-blue-6-rgb), 0.12); color: var(--hc-link); }
.hc-cta {
    display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 4px;
    height: 44px; padding: 0 20px; border-radius: 999px;
    background: var(--ui-text-linkText); color: var(--ui-backgrounds-cardBg) !important;
    font-size: 16px; font-weight: 700; text-decoration: none;
}
.hc-cta:hover { filter: brightness(1.08); }
.hc-cta i { font-size: var(--text-small, 14px); }

/* ---------- Cards (next steps, the hub) ---------- */
.hc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 20px 0 8px; }
.hc-card {
    display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: 16px;
    border: 1px solid var(--hc-line); background: var(--hc-paper); text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}
.hc-card:hover { border-color: var(--hc-link); transform: translateY(-1px); }
.hc-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--hc-band); color: var(--hc-on-band); font-size: 17px; }
.hc-card-title { margin: 8px 0 0; font-size: 19px; font-weight: 800; line-height: 1.3; color: var(--hc-ink); }
.hc-card-text { margin: 0; font-size: var(--text-medium, 15px); line-height: 1.5; color: var(--hc-ink-2); }
.hc-card-soon { margin-top: auto; padding-top: 8px; font-size: var(--text-small, 14px); font-weight: 600; color: var(--hc-ink-3); }
.hc-card--soon { cursor: default; background: var(--hc-ground); }
.hc-card--soon:hover { border-color: var(--hc-line); transform: none; }

/* ---------- Prev / next and the "still stuck" band ---------- */
.hc-prevnext { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 72px; }
.hc-prevnext a { display: block; padding: 18px 22px; border-radius: 14px; border: 1px solid var(--hc-line); text-decoration: none; }
.hc-prevnext a:hover { border-color: var(--hc-link); }
.hc-prevnext .hc-pn-dir { display: block; font-size: var(--text-small, 14px); color: var(--hc-ink-3); }
.hc-prevnext .hc-pn-title { display: block; margin-top: 2px; font-size: 18px; font-weight: 800; color: var(--hc-ink); }
.hc-prevnext .hc-pn-next { grid-column: 2; text-align: right; }
.hc-stuck {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 32px; align-items: center;
    margin-top: 56px; padding: 28px 32px; border-radius: 20px; background: var(--hc-ground);
}
.hc-stuck h2 { margin: 0; font-size: 24px; font-weight: 800; color: var(--hc-ink); }
.hc-stuck p { margin: 6px 0 0; font-size: 17px; color: var(--hc-ink-2); max-width: 56ch; }
.hc-stuck-links { display: flex; flex-wrap: wrap; gap: 10px; }
.hc-stuck-links a {
    display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px;
    border: 1px solid var(--ui-borders-borderDefault); background: var(--hc-paper);
    font-size: var(--text-medium, 15px); font-weight: 700; text-decoration: none; color: var(--hc-ink);
}
.hc-stuck-links a:hover { border-color: var(--hc-link); color: var(--hc-link); }

/* ---------- Hub (GET /help, views/help/index.ejs; 2026-10-19, Stephen's "Help Center" mockup) ----------
   Every value is the mockup's, through the theme: its hex colours are master-color tokens or mixes of them (light
   theme within a shade of the mockup, and readable in the dark theme, where a mix's ends swap), its 13 / 13.5 / 12.5px
   text is derived from the --text-* tokens so the admin size tuner moves it too. The hub is its own page: these rules
   never reach a help page (views/help/page.ejs). */
.hc.hc-hub {
    --hh-ground: color-mix(in srgb, var(--color-slate-9) 50%, var(--ui-backgrounds-pageBg));
    --hh-card: var(--ui-backgrounds-cardBg);
    --hh-line: var(--ui-borders-borderLight);
    --hh-line-hover: color-mix(in srgb, var(--color-blue-6) 48%, var(--ui-backgrounds-cardBg));
    --hh-dash: var(--ui-borders-borderDefault);
    --hh-ink: var(--ui-text-primaryText);
    --hh-ink-2: var(--ui-text-secondaryText);
    --hh-ink-3: var(--color-gray-500);
    --hh-chev: var(--ui-text-mutedText);
    --hh-link: var(--ui-text-linkText);
    /* The mockup's deep blue (#16548C) as TEXT: the brand-dark shade is a background in the dark theme. */
    --hh-deep: color-mix(in srgb, var(--ui-text-linkText) 75%, var(--ui-text-primaryText));
    --hh-seg: color-mix(in srgb, var(--color-gray-200) 50%, var(--color-slate-9));
    --hh-shadow: var(--color-ui-shadow-rgb);
    --hh-on-band: var(--ui-text-inverseText);
    --hh-on-band-2: var(--color-cyan-6);
    --hh-on-band-3: color-mix(in srgb, var(--color-cyan-6) 45%, var(--ui-text-inverseText));
    --hh-t13: calc(var(--text-small, 14px) - 1px);
    --hh-t13-5: calc(var(--text-small, 14px) - 0.5px);
    --hh-t12-5: calc(var(--text-xs, 12px) + 0.5px);
    --hh-gutter: clamp(20px, 4vw, 40px);
    background: var(--hh-ground);
    color: var(--hh-ink);
    line-height: normal;
    /* The app's body sets 0.6px; the mockup's text sets at the font's own spacing (and wraps where it does). */
    letter-spacing: normal;
    padding-bottom: 0;
}
.hc-hub a { color: var(--hh-link); text-decoration: none; }
.hc-hub a:hover { color: var(--hh-deep); text-decoration: underline; }
@keyframes hc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Card colours: each sets the tile, badge and icon colour (--tone) and its tint. */
.hc-tone-income { --tone: var(--hh-deep); --tone-tint: var(--color-brand-light); }
.hc-tone-saving { --tone: var(--color-semantic-success-deep); --tone-tint: rgba(var(--color-semantic-success-rgb), 0.12); }
.hc-tone-retirement { --tone: var(--ui-text-linkText); --tone-tint: rgba(var(--color-blue-6-rgb), 0.12); }
.hc-tone-spending { --tone: var(--color-semantic-warning); --tone-tint: rgba(var(--color-semantic-warning-rgb), 0.12); }
.hc-tone-accounts { --tone: color-mix(in srgb, var(--color-slate-3) 70%, var(--ui-text-linkText)); --tone-tint: color-mix(in srgb, var(--tone) 12%, transparent); }
.hc-tone-situation { --tone: color-mix(in srgb, var(--color-teal-1) 82%, var(--ui-text-primaryText)); --tone-tint: color-mix(in srgb, var(--tone) 12%, transparent); }
.hc-tone-results { --tone: color-mix(in srgb, var(--color-indigo-1) 72%, var(--ui-text-primaryText)); --tone-tint: color-mix(in srgb, var(--tone) 11%, transparent); }
.hc-tone-neutral { --tone: var(--ui-text-secondaryText); --tone-tint: color-mix(in srgb, var(--ui-text-secondaryText) 10%, transparent); }
.hc-tone-help { --tone: var(--color-blue-6); --tone-tint: var(--color-brand-light); }
.hc-tone-solid { --tone: var(--ui-text-inverseText); --tone-tint: var(--color-brand-dark); }

/* The hero */
.hc-hub-hero {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--color-brand-dark) 60%, var(--ui-text-linkText)) 0%,
        var(--color-brand-dark) 45%,
        color-mix(in srgb, var(--color-brand-dark) 77%, var(--color-ui-overlay)) 100%);
    color: var(--hh-on-band);
}
.hc-hub-hero-art { position: absolute; right: -60px; top: -20px; opacity: 0.16; color: var(--hh-on-band); pointer-events: none; }
.hc-hub-hero-inner { position: relative; max-width: 1120px; margin: 0 auto; padding: 40px var(--hh-gutter) 44px; }
.hc-hub-crumb { margin: 0; font-size: var(--hh-t13); font-weight: 600; color: var(--hh-on-band-2); }
.hc-hub-hero h1 { margin: 10px 0; font-size: 44px; font-weight: 800; letter-spacing: -1.4px; line-height: 1.05; color: var(--hh-on-band); }
.hc-hub-lede { margin: 0; max-width: 560px; font-size: 18px; line-height: 1.5; color: var(--hh-on-band-3); }

.hc-hub-search {
    display: flex; align-items: center; gap: 12px; max-width: 640px; margin: 24px 0 0;
    padding: 4px 6px 4px 16px; border-radius: 12px; background: var(--hh-card);
    box-shadow: 0 10px 30px color-mix(in srgb, color-mix(in srgb, var(--color-brand-dark) 35%, var(--color-ui-overlay)) 30%, transparent);
}
.hc-hub-search:focus-within { outline: 3px solid rgba(var(--color-teal-4-rgb), 0.65); }
.hc-hub-search-icon { flex-shrink: 0; color: var(--hh-ink-3); }
.hc-hub-search input {
    flex: 1; min-width: 0; padding: 12px 0; border: none; outline: none; background: transparent;
    font: inherit; font-size: 16px; color: var(--hh-ink);
    -webkit-appearance: none; appearance: none;
}
.hc-hub-search input::placeholder { color: var(--hh-ink-3); opacity: 1; }
.hc-hub-search input::-webkit-search-cancel-button, .hc-hub-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.hc .hc-hub-search input:focus-visible { outline: none; }
.hc-hub-clear {
    flex-shrink: 0; padding: 7px 11px; border: none; border-radius: 7px; cursor: pointer;
    background: var(--color-slate-9); color: var(--hh-ink-2); font: inherit; font-size: var(--hh-t12-5); font-weight: 700;
}
.hc-hub-popular { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hc-hub-popular-label { font-size: var(--hh-t13); color: var(--hh-on-band-2); }
.hc-hub-pill {
    padding: 6px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap;
    border: 1px solid rgba(var(--color-ui-header-text-rgb), 0.28); background: rgba(var(--color-ui-header-text-rgb), 0.08);
    color: var(--hh-on-band); font: inherit; font-size: var(--hh-t13); font-weight: 600;
}
.hc-hub-pill:hover { background: rgba(var(--color-ui-header-text-rgb), 0.18); }

/* The body */
.hc-hub-body { max-width: 1120px; margin: 0 auto; padding: 0 var(--hh-gutter) 70px; }
.hc-hub-start { position: relative; margin-top: -26px; }
.hc-hub-start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hc-hub-section { margin-top: 38px; }
.hc-hub-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.hc-hub-head-text { flex: 1 1 320px; min-width: 0; }
.hc-hub-head h2 { margin: 0; font-size: 23px; font-weight: 800; letter-spacing: -0.5px; color: var(--hh-ink); }
.hc-hub-sub { margin: 4px 0 0; font-size: var(--text-small, 14px); color: var(--hh-ink-3); text-wrap: balance; }
.hc-hub-sub mark { background: none; color: var(--hh-ink); font-weight: 700; }

/* The category filter */
.hc-hub-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 10px; background: var(--hh-seg); }
.hc-hub-seg button {
    padding: 7px 13px; border: none; border-radius: 7px; cursor: pointer; white-space: nowrap;
    background: transparent; color: var(--hh-ink-2); font: inherit; font-size: var(--hh-t13); font-weight: 700;
}
.hc-hub-seg button[aria-pressed="true"] { background: var(--hh-card); color: var(--hh-deep); box-shadow: 0 1px 2px rgba(var(--hh-shadow), 0.12); }

/* Cards */
.hc-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.hc-hub-card {
    position: relative; display: flex; align-items: flex-start; gap: 15px; padding: 17px 18px;
    border: 1px solid var(--hh-line); border-radius: 14px; background: var(--hh-card); cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
    animation: hc-rise 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hc-hub-card:hover { border-color: var(--hh-line-hover); box-shadow: 0 8px 22px rgba(var(--hh-shadow), 0.08); transform: translateY(-1px); }
.hc-hub a.hc-hub-card, .hc-hub a.hc-hub-card:hover { color: var(--hh-ink); text-decoration: none; }
.hc-hub-card--start { gap: 14px; animation: none; box-shadow: 0 2px 6px rgba(var(--hh-shadow), 0.06), 0 12px 28px rgba(var(--hh-shadow), 0.07); }
.hc-hub-card--start:hover { box-shadow: 0 8px 22px rgba(var(--hh-shadow), 0.10); }
.hc-hub-tile {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 46px; height: 46px; border-radius: 12px; background: var(--tone-tint); color: var(--tone);
}
.hc-hub-card-body { flex: 1; min-width: 0; }
.hc-hub-card-head { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.hc-hub-card-title { font-size: 16px; font-weight: 800; letter-spacing: -0.2px; line-height: 1.2; color: var(--hh-ink); }
.hc-hub-badge {
    flex-shrink: 0; padding: 2px 7px; border-radius: 5px; white-space: nowrap;
    background: var(--tone-tint); color: var(--tone); font-size: var(--text-2xs, 11px); font-weight: 700;
}
.hc-hub-card-desc { display: block; margin-top: 5px; font-size: var(--hh-t13-5); line-height: 1.55; color: var(--hh-ink-2); text-wrap: pretty; }
.hc-hub-chev { flex-shrink: 0; margin-top: 4px; color: var(--hh-chev); }
.hc-hub-card mark { padding: 0 1px; border-radius: 3px; background: rgba(var(--color-semantic-warning-rgb), 0.2); color: inherit; }

/* A search result: the title is the card's link (it covers the card), its sections are links of their own on top. */
.hc-hub a.hc-hub-card-link { color: var(--hh-ink); text-decoration: none; }
.hc-hub-card-link::after { content: ''; position: absolute; inset: 0; border-radius: 14px; }
.hc .hc-hub-card-link:focus-visible { outline: none; }
.hc-hub-card:has(.hc-hub-card-link:focus-visible) { outline: 3px solid var(--ui-borders-borderFocus); outline-offset: 3px; }
.hc-hub-hits { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 9px 0 0; padding: 0; list-style: none; }
.hc-hub-hits li { min-width: 0; }
.hc-hub-hits a { display: inline; font-size: var(--hh-t13); font-weight: 600; line-height: 1.45; }
.hc-hub-hits a::before { content: '#'; margin-right: 6px; color: var(--hh-chev); font-weight: 700; }
.hc-hub-hits mark { background: none; padding: 0; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: rgba(var(--color-semantic-warning-rgb), 0.55); }

.hc-hub-more { margin-top: 14px; text-align: center; }
.hc-hub-more-btn {
    padding: 9px 16px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--hh-dash); background: var(--hh-card); color: var(--hh-ink); font: inherit; font-size: var(--text-small, 14px); font-weight: 700;
}
.hc-hub-more-btn:hover { border-color: var(--hh-line-hover); }

.hc-hub-empty { margin-top: 18px; padding: 34px 24px; border: 1px dashed var(--hh-dash); border-radius: 14px; background: var(--hh-card); text-align: center; }
.hc-hub-empty-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--hh-ink); }
.hc-hub-empty-text { margin: 6px 0 0; font-size: var(--text-small, 14px); color: var(--hh-ink-3); }

/* Still stuck? */
.hc-hub-stuck {
    display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 34px; padding: 18px 22px;
    border: 1px solid var(--hh-line); border-radius: 14px; background: var(--hh-card);
}
.hc-hub-stuck-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--color-brand-light); color: var(--color-blue-6); }
.hc-hub-stuck-text { flex: 1; min-width: 220px; }
.hc-hub-stuck-text h2 { margin: 0; font-size: 15.5px; font-weight: 800; color: var(--hh-ink); }
.hc-hub-stuck-text p { margin: 2px 0 0; font-size: var(--hh-t13-5); color: var(--hh-ink-2); }
.hc-hub .hc-hub-stuck-btn {
    display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 4px; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--ui-text-primaryText) 85%, var(--ui-backgrounds-cardBg)); background: transparent;
    color: var(--hh-ink); font: inherit; font-size: var(--text-small, 14px); font-weight: 700; text-decoration: none;
}
.hc-hub .hc-hub-stuck-btn:hover { background: var(--ui-backgrounds-hoverBg); color: var(--hh-ink); text-decoration: none; }

@media (max-width: 1100px) { .hc-hub-start-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
    .hc-hub-start-grid, .hc-hub-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Lightbox ---------- */
.hc-lightbox {
    width: min(96vw, 1680px); max-width: none; max-height: 94vh;
    padding: 0; border: 0; border-radius: 16px; overflow: hidden;
    background: var(--hc-paper); color: var(--hc-ink);
    box-shadow: 0 30px 80px rgba(var(--color-gray-900-rgb), 0.35);
}
.hc-lightbox::backdrop { background: rgba(var(--color-slate-1-rgb), 0.72); }
.hc-lightbox[open] { animation: hc-zoom-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
.hc-lightbox-inner { display: flex; flex-direction: column; max-height: 94vh; }
.hc-lightbox-img { display: block; width: 100%; height: auto; max-height: calc(94vh - 60px); object-fit: contain; background: var(--hc-ground); }
.hc-lightbox-bar { display: flex; align-items: center; gap: 16px; padding: 12px 18px; font-size: var(--text-medium, 15px); color: var(--hc-ink-2); }
.hc-lightbox-bar p { margin: 0; flex: 1; }
.hc-lightbox-close {
    flex: none; height: 36px; padding: 0 16px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--ui-borders-borderDefault); background: var(--hc-paper); color: var(--hc-ink);
    font-size: var(--text-small, 14px); font-weight: 600;
}
@keyframes hc-zoom-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }

/* ---------- Reference table (2026-10-16, "Where to enter your income") ----------
   A text table: the first cell of each row is its name (<th scope="row">), the other cells carry data-label (their
   column's name), so on a phone each row becomes a small card with labelled lines instead of a sideways scroll. */
.hc-tablewrap { margin: 20px 0 28px; border: 1px solid var(--hc-line); border-radius: 14px; overflow: hidden; }
.hc-table { width: 100%; border-collapse: collapse; }
.hc-table caption { caption-side: bottom; padding: 10px 16px 14px; text-align: left; font-size: var(--text-small, 14px); color: var(--hc-ink-3); }
.hc-table th, .hc-table td { padding: 12px 14px; border-bottom: 1px solid var(--hc-line); text-align: left; vertical-align: top; font-size: 16px; line-height: 1.5; }
.hc-table thead th { background: var(--hc-ground); font-size: var(--text-small, 14px); font-weight: 700; color: var(--hc-ink-2); }
.hc-table tbody th { font-weight: 700; color: var(--hc-ink); min-width: 170px; }
.hc-table td { color: var(--hc-ink-2); }
.hc-table tbody tr:last-child th, .hc-table tbody tr:last-child td { border-bottom: 0; }
.hc-table .hc-ui { color: var(--hc-ink); }

/* ---------- Narrow screens ---------- */
@media (max-width: 1000px) {
    .hc-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .hc-toc { position: static; max-height: none; margin-bottom: 36px; padding: 18px 20px; border-radius: 14px; background: var(--hc-ground); }
    .hc-toc ol { border-left: 0; columns: 2 220px; }
    .hc-toc a { margin-left: 0; padding: 4px 0; border-left: 0; }
}
@media (max-width: 760px) {
    .hc-split { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .hc-split .hc-plate { max-width: 420px; margin: 8px 0 24px; }
    .hc-pair-row { grid-template-columns: minmax(0, 1fr); }
    .hc-prevnext { grid-template-columns: minmax(0, 1fr); }
    .hc-prevnext .hc-pn-next { grid-column: 1; }
    .hc-stuck { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
    .hc-step-head { gap: 0 14px; }
    .hc-section > p, .hc-section li, .hc-split-copy p, .hc-split-copy li { font-size: 17px; }
    .hc-glossary dt, .hc-glossary dd { font-size: 17px; }
    /* The reference table as cards: one per row, each cell on its own line under its column's name. */
    .hc-table thead { display: none; }
    .hc-table, .hc-table tbody, .hc-table tr, .hc-table th, .hc-table td { display: block; width: 100%; }
    .hc-table tr { padding: 12px 16px; border-bottom: 1px solid var(--hc-line); }
    .hc-table tbody tr:last-child { border-bottom: 0; }
    .hc-table th, .hc-table td { padding: 2px 0; border-bottom: 0; }
    .hc-table tbody th { font-size: 17px; margin-bottom: 4px; }
    .hc-table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--text-small, 14px); font-weight: 700; color: var(--hc-ink-3); }
    .hc-table td + td { margin-top: 6px; }
}
/* The site header on a phone (2026-10-16). Help pages are the pages the phone gate lets through, and the shared header
   (views/partials/_site-header.ejs) keeps its left block at the app's settings-panel width, so signed out the
   Log In / Create an Account buttons ran 137px past a 390px screen and the whole page scrolled sideways. This
   stylesheet loads on the help views only, so the app's header is untouched. Below 375px only the "R" mark shows. */
@media (max-width: 600px) {
    .v2-header__left { width: auto; min-width: 0; flex-shrink: 1; }
    .v2-header__logo { height: 26px; }
    .v2-header__right .masterbtn { margin-right: 8px; padding: 6px 10px; white-space: nowrap; }
}
@media (max-width: 374px) {
    .v2-header__logo { width: 22px; object-fit: cover; object-position: left center; }
}