/* ============================================================
   HaxGrow Design System — app.css
   Foundation: tokens, reset, base typography, shared utilities.
   Component-level styles live in *.razor.css scoped files.
   ============================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
    /* Backgrounds / surfaces */
    --hx-bg:                    #080807;
    --hx-surface-1:             #0f0d0a;
    --hx-surface-2:             #14100b;
    --hx-surface-3:             #1a1610;

    /* Admin / back-office cool-dark swap */
    --hx-admin-surface-1:       #14161a;
    --hx-admin-surface-2:       #101216;

    /* Gold — brand, CTAs, active state */
    --hx-gold:                  #e8c46c;
    --hx-gold-hover:            #f1d488;
    --hx-gold-2:                #d8b15a;
    --hx-gold-3:                #c89b62;
    --hx-gold-on:               #1a1407;   /* text ON a gold fill */

    /* Text — warm whites */
    --hx-text-heading:          #f6efdd;
    --hx-text-body:             #efe9da;
    --hx-text-2:                #d8cdb6;
    --hx-text-3:                #cbb98e;
    --hx-text-muted:            #b0a890;
    --hx-text-caption:          #9a927e;
    --hx-text-caption-2:        #8a8270;
    --hx-text-faint:            #6f6857;
    --hx-text-divider:          #4a4438;

    /* Status */
    --hx-green:                 #74d59a;
    --hx-red:                   #e05555;

    /* Borders */
    --hx-border:                rgba(255,255,255,.06);
    --hx-border-mid:            rgba(255,255,255,.09);
    --hx-border-strong:         rgba(255,255,255,.12);
    --hx-border-gold:           rgba(232,196,108,.3);
    --hx-border-gold-strong:    rgba(232,196,108,.6);

    /* Gold-tinted fills */
    --hx-fill-gold-subtle:      rgba(232,196,108,.04);
    --hx-fill-gold:             rgba(232,196,108,.10);
    --hx-fill-gold-strong:      rgba(232,196,108,.16);

    /* Border radius */
    --hx-r-sm:                  8px;
    --hx-r:                     12px;
    --hx-r-lg:                  14px;
    --hx-r-pill:                99px;
    --hx-r-btn:                 2px;   /* signature: primary CTAs are nearly square */
    --hx-r-input:               7px;

    /* Typography */
    --hx-font-display:          'Bebas Neue', sans-serif;
    --hx-font-body:             'Hanken Grotesk', sans-serif;
    --hx-font-mono:             'Space Mono', monospace;

    /* Transitions */
    --hx-t:                     .18s ease;
    --hx-t-slow:                .35s ease;

    /* Layout */
    --hx-max-app:               1280px;
    --hx-max-content:           1180px;
    --hx-max-focused:           860px;
    --hx-nav-h:                 56px;

    /* Spacing scale (4px base) */
    --hx-space-1:               0.25rem;
    --hx-space-2:               0.5rem;
    --hx-space-3:               0.75rem;
    --hx-space-4:               1rem;
    --hx-space-5:               1.25rem;
    --hx-space-6:               1.5rem;
    --hx-space-7:               1.75rem;
    --hx-space-8:               2rem;
    --hx-space-9:               2.25rem;
    --hx-space-10:              2.5rem;
}

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(232,196,108,.22); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(232,196,108,.4); }

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;

    /* Tell the browser this document is dark (operator, 2026-08-07). Parts of a form control are painted by
       the BROWSER, not by our CSS — the <select> chevron, the date input's calendar button and its spinner
       arrows — and it picks their colour from `color-scheme`, which defaults to `light`. So they rendered
       near-black on our dark surfaces: present, clickable, and almost invisible. Setting it here fixes every
       such control at once, which is why it belongs on <html> and not on .hx-input.
       It also darkens the native date-picker POPUP and the scrollbars, both of which we want. Safe app-wide:
       there is no light surface anywhere (no prefers-color-scheme rules in our CSS). */
    color-scheme: dark;
}

body {
    background-color: var(--hx-bg);
    color: var(--hx-text-body);
    font-family: var(--hx-font-body);
    font-weight: 400;
    line-height: 1.55;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

button, input, select, textarea {
    font: inherit;
}

/* ── Links ──────────────────────────────────────────────────── */
a {
    color: var(--hx-gold);
    text-decoration: none;
    transition: color var(--hx-t);
}

a:hover {
    color: var(--hx-gold-hover);
}

/* ── Headings ───────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    color: var(--hx-text-heading);
    line-height: 1.1;
    font-weight: 700;
}

/* ── Typography utilities ───────────────────────────────────── */

/* Bebas Neue display headlines */
.hx-display {
    font-family: var(--hx-font-display);
    letter-spacing: .03em;
    line-height: .92;
    text-transform: uppercase;
    color: var(--hx-text-heading);
}

/* Space Mono eyebrows / metadata labels */
.hx-label {
    font-family: var(--hx-font-mono);
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--hx-text-caption);
}

.hx-label-sm {
    font-family: var(--hx-font-mono);
    font-size: .6rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--hx-text-caption-2);
}

.hx-mono {
    font-family: var(--hx-font-mono);
}

/* ── Buttons ────────────────────────────────────────────────── */
.hx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45em;
    padding: .65em 1.5em;
    border: none;
    border-radius: var(--hx-r-btn);
    font-family: var(--hx-font-body);
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--hx-t), color var(--hx-t), border-color var(--hx-t), transform var(--hx-t);
    text-decoration: none;
    white-space: nowrap;
    min-height: 44px; /* mobile tap target */
    line-height: 1;
}

.hx-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* Gold fill — primary CTA */
.hx-btn-primary {
    background: var(--hx-gold);
    color: var(--hx-gold-on);
}

.hx-btn-primary:hover:not(:disabled) {
    background: var(--hx-gold-hover);
    color: var(--hx-gold-on);
}

/* Ghost — secondary action */
.hx-btn-ghost {
    background: transparent;
    color: var(--hx-text-body);
    border: 1px solid var(--hx-border-strong);
}

.hx-btn-ghost:hover:not(:disabled) {
    border-color: var(--hx-border-gold);
    color: var(--hx-text-heading);
}

/* Gold-tinted fill — tertiary / selected state */
.hx-btn-subtle {
    background: var(--hx-fill-gold);
    color: var(--hx-gold);
    border: 1px solid var(--hx-border-gold);
}

.hx-btn-subtle:hover:not(:disabled) {
    background: var(--hx-fill-gold-strong);
}

/* Icon-only round button */
.hx-btn-icon {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--hx-r-pill);
    background: var(--hx-surface-2);
    border: 1px solid var(--hx-border-mid);
    color: var(--hx-text-muted);
}

.hx-btn-icon:hover:not(:disabled) {
    border-color: var(--hx-border-gold);
    color: var(--hx-gold);
}

/* ── Cards ──────────────────────────────────────────────────── */
.hx-card {
    background: var(--hx-surface-1);
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-r);
    transition: transform var(--hx-t), border-color var(--hx-t);
}

.hx-card-hover:hover {
    transform: translateY(-3px);
    border-color: var(--hx-border-gold);
}

/* ── Inputs ─────────────────────────────────────────────────── */
.hx-input {
    width: 100%;
    padding: .6em 1em;
    background: var(--hx-surface-2);
    border: 1px solid var(--hx-border-strong);
    border-radius: var(--hx-r-input);
    color: var(--hx-text-body);
    outline: none;
    transition: border-color var(--hx-t);
    min-height: 44px;
}

.hx-input:focus {
    border-color: var(--hx-gold);
}

/* Native <select> options render in an OS popup that ignores the control's colors — on this dark theme
   that left them light-on-light and unreadable. Pin an explicit dark background + light text so every
   dropdown's choices are legible (fixes /admin/catalog, the volume-unit picker, blueprint selects, …).
   Scoped to select > option (bare `option` only lives in a select) so it catches non-hx-input pickers too. */
select option {
    background: var(--hx-surface-3);
    color: var(--hx-text-body);
}

.hx-input::placeholder {
    color: var(--hx-text-faint);
}

/* Blazor <FocusOnNavigate> focuses the page <h1> after each navigation (for
   screen-reader / keyboard users). It makes that heading programmatically
   focusable via tabindex="-1", which draws a browser focus ring around the
   greeting on the Dashboard. Suppress the ring for programmatic focus only —
   genuine keyboard focus on links/buttons/inputs is unaffected. */
[tabindex="-1"]:focus {
    outline: none;
}

/* ── Onboarding splash — Choose Path / Grow Path (doc 10) ──── */
.ob {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px clamp(16px, 4vw, 40px) 70px;
    background: radial-gradient(90% 55% at 50% 0%, rgba(232,196,108,.12), rgba(8,8,7,0) 60%);
}
.ob__inner { width: 100%; max-width: 780px; }
.ob__back {
    background: none; border: none; color: #b0a890; cursor: pointer;
    font-family: 'Hanken Grotesk', sans-serif; font-size: 13px;
    margin-bottom: 20px; padding: 0; transition: color .15s;
}
.ob__back:hover { color: #e8c46c; }
.ob__head { text-align: center; margin-bottom: 34px; }
.ob__eyebrow {
    font-family: 'Space Mono', monospace; font-size: 11px; color: #e8c46c;
    letter-spacing: .22em; margin: 0 0 12px;
}
/* Welcome surface only — a louder greeting above "Select a path:" (operator, 2026-07-20). */
.ob__eyebrow--welcome {
    font-size: clamp(22px, 3.4vw, 26px);
    letter-spacing: .14em;
    margin: 0 0 16px;
}
.ob__headline {
    font-family: 'Bebas Neue', sans-serif; font-size: clamp(40px,8vw,72px);
    margin: 0 0 12px; color: #f6efdd; letter-spacing: .02em; line-height: .9;
}
.ob__sub { font-size: 15px; color: #9a927e; margin: 0; }
.ob__cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 18px;
}
.ob__card {
    display: block; text-align: left; position: relative; cursor: pointer; width: 100%;
    border-radius: 14px; padding: 30px 26px; color: inherit;
    background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.1);
    transition: border-color .18s, transform .18s;
    font-family: 'Hanken Grotesk', sans-serif;
}
.ob__card:hover { border-color: rgba(232,196,108,.5); transform: translateY(-3px); }
.ob__card--primary {
    background: linear-gradient(180deg, rgba(232,196,108,.1), rgba(255,255,255,.02));
    border-color: rgba(232,196,108,.35);
}
.ob__card--primary:hover { border-color: #e8c46c; }
.ob__card-toprow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ob__card-eyebrow {
    display: block; margin-bottom: 14px;
    font-family: 'Space Mono', monospace; font-size: 10px; color: #9a927e; letter-spacing: .14em;
}
.ob__card-toprow .ob__card-eyebrow { margin-bottom: 0; }
.ob__card--primary .ob__card-eyebrow { color: #e8c46c; }
.ob__badge {
    padding: 4px 10px; border-radius: 99px; font-family: 'Space Mono', monospace;
    font-size: 9px; font-weight: 700; letter-spacing: .06em;
    background: rgba(255,255,255,.06); color: #9a927e;
}
.ob__badge--gold { background: #e8c46c; color: #1a1407; }
.ob__card-title {
    font-family: 'Bebas Neue', sans-serif; font-size: clamp(34px,5vw,46px);
    color: #f6efdd; letter-spacing: .02em; line-height: .92; margin-bottom: 16px;
}
.ob__card-desc { font-size: 14px; color: #b0a890; line-height: 1.55; margin: 0 0 18px; }
.ob__card-list { list-style: none; padding: 0; margin: 0 0 22px; display: flex; flex-direction: column; gap: 7px; }
.ob__card-list li { font-size: 13px; color: #cbb98e; padding-left: 18px; position: relative; }
.ob__card-list li::before { content: "✓"; color: #e8c46c; position: absolute; left: 0; }
.ob__card-cta { font-size: 14px; font-weight: 700; color: #e8c46c; }
.ob__skip { text-align: center; margin-top: 26px; }
.ob__skip-link {
    background: none; border: none; cursor: pointer;
    font-family: 'Hanken Grotesk', sans-serif; font-size: 13px; color: #8a8270;
    transition: color .15s;
}
.ob__skip-link:hover { color: #e8c46c; }

/* ── Chips / pills ──────────────────────────────────────────── */
.hx-chip {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .3em .8em;
    border-radius: var(--hx-r-pill);
    border: 1px solid var(--hx-border-mid);
    background: var(--hx-surface-2);
    font-size: .78rem;
    color: var(--hx-text-muted);
    cursor: pointer;
    transition: border-color var(--hx-t), color var(--hx-t), background var(--hx-t);
    min-height: 44px;
    white-space: nowrap;
}

.hx-chip:hover, .hx-chip.active {
    border-color: var(--hx-border-gold);
    color: var(--hx-gold);
    background: var(--hx-fill-gold-subtle);
}

/* ── Dividers ───────────────────────────────────────────────── */
.hx-divider {
    border: none;
    border-top: 1px solid var(--hx-border);
    margin: 1.5rem 0;
}

/* ── Image placeholder (48° stripe fill) ────────────────────── */
.hx-img-placeholder {
    background: repeating-linear-gradient(
        48deg,
        #1a1610 0px, #1a1610 4px,
        #14100b 4px, #14100b 12px
    );
}

/* The same fill applied to an <img> whose blob 404'd — hax-photo.js adds this class and clears the
   alt, so the element paints as an empty striped box instead of laying out the alt text across the
   card. Sizing still comes from the image's own class, so it holds the space it always held. */
img.hx-img-placeholder { object-fit: cover; }

/* ── Layout helpers ─────────────────────────────────────────── */
.hx-container {
    width: 100%;
    max-width: var(--hx-max-app);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

.hx-container-content {
    width: 100%;
    max-width: var(--hx-max-content);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

.hx-container-focused {
    width: 100%;
    max-width: var(--hx-max-focused);
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ── Blazor reconnect / error UI ────────────────────────────── */
#blazor-error-ui {
    background: #1a0a0a;
    border-top: 1px solid rgba(255,80,80,.25);
    bottom: 0;
    box-sizing: border-box;
    color: #ffb0b0;
    display: none;
    font-family: var(--hx-font-body);
    font-size: .875rem;
    left: 0;
    padding: .75rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .6rem;
    color: var(--hx-text-muted);
}

.blazor-error-boundary {
    background: #2a0a0a;
    border: 1px solid rgba(255,80,80,.25);
    border-radius: var(--hx-r-sm);
    padding: 1rem 1rem 1rem 3.5rem;
    color: #ffb0b0;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=");
    background-repeat: no-repeat;
    background-position: 1rem center;
    background-size: 1.8rem;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ── Validation (Blazor EditForm) ───────────────────────────── */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--hx-green);
}

.invalid {
    outline: 1px solid var(--hx-red);
}

.validation-message {
    color: var(--hx-red);
    font-size: .8rem;
    margin-top: .25rem;
}

/* ══════════════════════════════════════════════════════════════
   GROW GUIDE (planning doc 15) — global (shared across pages + used
   by MarkupString-injected cross-links, so not component-scoped)
   ══════════════════════════════════════════════════════════════ */
/* padding-block only — never clobber .hx-container's padding-inline (mobile edge spacing) */
.gg { padding-block: 2rem 4rem; }
.gg__back {
    display: inline-block;
    font-family: var(--hx-font-mono);
    font-size: .8rem;
    color: var(--hx-text-3);
    text-decoration: none;
    margin-bottom: 1.25rem;
}
.gg__back:hover { color: var(--hx-gold); }

.gg__hero { padding-top: 1rem; }
.gg__eyebrow {
    font-family: var(--hx-font-mono);
    font-size: .72rem;
    letter-spacing: .16em;
    color: var(--hx-gold);
    margin: 0;
}
.gg__headline {
    font-family: var(--hx-font-display);
    font-size: clamp(2.6rem, 7vw, 4rem);
    line-height: .95;
    color: var(--hx-text-heading);
    margin: .35rem 0 0;
}
.gg__sub {
    font-family: var(--hx-font-body);
    color: var(--hx-text-2);
    font-size: 1rem;
    line-height: 1.55;
    max-width: 52ch;
    margin: .9rem 0 0;
}
.gg__sub strong { color: var(--hx-gold); }
.gg__body { margin-top: 2.5rem; }
.gg__section-title {
    font-family: var(--hx-font-display);
    font-size: 1.15rem;
    letter-spacing: .08em;
    color: var(--hx-text-heading);
    margin: 0 0 1rem;
}

/* Start-Here trail */
.gg__trail { margin-bottom: 3rem; }
.gg__trail-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.gg__trail-badge {
    font-family: var(--hx-font-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    color: var(--hx-gold-on);
    background: var(--hx-gold);
    padding: .2rem .5rem;
    border-radius: var(--hx-r-btn);
}
.gg__trail-hint { font-family: var(--hx-font-body); font-size: .85rem; color: var(--hx-text-muted); }
.gg__trail-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.gg__trail-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1rem;
    background: var(--hx-surface-1);
    border: 1px solid var(--hx-border);
    border-left: 2px solid var(--hx-border-gold);
    border-radius: var(--hx-r-sm);
    text-decoration: none;
    transition: border-color var(--hx-t), background var(--hx-t);
}
.gg__trail-link:hover { border-color: var(--hx-border-gold-strong); background: var(--hx-fill-gold-subtle); }
.gg__trail-num {
    flex: 0 0 auto;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--hx-font-mono); font-size: .9rem; font-weight: 700;
    color: var(--hx-gold); border: 1px solid var(--hx-border-gold); border-radius: 50%;
}
.gg__trail-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.gg__trail-title { font-family: var(--hx-font-body); font-weight: 700; color: var(--hx-text-heading); font-size: 1rem; }
.gg__trail-summary { font-family: var(--hx-font-body); font-size: .84rem; color: var(--hx-text-muted); }
.gg__trail-arrow { flex: 0 0 auto; color: var(--hx-gold); font-size: 1.1rem; }

/* Cross-link to Grow School (setup vs how-to) */
.gg__crosslink {
    display: flex; align-items: center; gap: .85rem;
    margin-bottom: 2rem; padding: .85rem 1.1rem;
    background: var(--hx-surface-1);
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-r-sm);
    text-decoration: none;
    transition: border-color var(--hx-t);
}
.gg__crosslink:hover { border-color: var(--hx-border-gold-strong); }
.gg__crosslink-icon { font-size: 1.4rem; flex: 0 0 auto; }
.gg__crosslink-text { flex: 1 1 auto; font-family: var(--hx-font-body); font-size: .88rem; color: var(--hx-text-muted); line-height: 1.4; }
.gg__crosslink-text strong { color: var(--hx-text-heading); display: block; }
.gg__crosslink-arrow { flex: 0 0 auto; color: var(--hx-gold); font-size: 1.2rem; }

/* Where you are now (contextual) */
.gg__now { margin-bottom: 3rem; padding: 1.4rem 1.5rem; background: var(--hx-fill-gold-subtle); border: 1px solid var(--hx-border-gold); border-radius: var(--hx-r); }
.gg__now-head { margin-bottom: 1rem; }
.gg__now-badge {
    font-family: var(--hx-font-mono); font-size: .68rem; letter-spacing: .12em;
    color: var(--hx-gold-on); background: var(--hx-gold);
    padding: .2rem .5rem; border-radius: var(--hx-r-btn);
}
.gg__now-title { font-family: var(--hx-font-display); font-size: 1.5rem; letter-spacing: .02em; color: var(--hx-text-heading); margin: .6rem 0 .2rem; }
.gg__now-hint { font-family: var(--hx-font-body); font-size: .9rem; color: var(--hx-text-muted); margin: 0; }
.gg__now-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.gg__now-chip {
    display: flex; flex-direction: column; gap: .3rem; align-items: flex-start;
    padding: .9rem 1rem; background: var(--hx-surface-1);
    border: 1px solid var(--hx-border); border-radius: var(--hx-r-sm);
    text-decoration: none; transition: border-color var(--hx-t), transform .1s ease;
}
.gg__now-chip:hover { border-color: var(--hx-border-gold-strong); transform: translateY(-2px); }
.gg__now-chip-title { font-family: var(--hx-font-body); font-weight: 700; color: var(--hx-text-heading); font-size: .95rem; }
.gg__now-chip-summary { font-family: var(--hx-font-body); font-size: .8rem; color: var(--hx-text-muted); line-height: 1.35; }

/* Focus placards */
.gg__placards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.gg__placard {
    display: flex; flex-direction: column; gap: .3rem;
    padding: 1.25rem;
    background: var(--hx-surface-1);
    border: 1px solid var(--hx-border);
    border-radius: var(--hx-r);
    text-decoration: none;
    transition: border-color var(--hx-t), transform .1s ease;
}
.gg__placard:hover { border-color: var(--hx-border-gold-strong); transform: translateY(-2px); }
.gg__placard--soon { opacity: .55; }
.gg__placard--soon:hover { transform: none; border-color: var(--hx-border); }
.gg__placard-icon { font-size: 1.6rem; }
.gg__placard-title { font-family: var(--hx-font-body); font-weight: 700; color: var(--hx-text-heading); font-size: 1.05rem; }
.gg__placard-blurb { font-family: var(--hx-font-body); font-size: .84rem; color: var(--hx-text-muted); line-height: 1.4; }
.gg__placard-count { font-family: var(--hx-font-mono); font-size: .72rem; color: var(--hx-gold); margin-top: .3rem; }
.gg__placard-count--soon { color: var(--hx-text-faint); }

/* Cluster page */
.gg__cluster-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.75rem; }
.gg__cluster-icon { font-size: 2.4rem; }
.gg__cluster-title { font-family: var(--hx-font-display); font-size: 2rem; color: var(--hx-text-heading); margin: 0; letter-spacing: .02em; }
.gg__cluster-blurb { font-family: var(--hx-font-body); color: var(--hx-text-muted); margin: .2rem 0 0; }
.gg__cluster-empty { font-family: var(--hx-font-body); color: var(--hx-text-muted); }
.gg__article-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.gg__article-card {
    display: block; padding: 1.1rem;
    background: var(--hx-surface-1); border: 1px solid var(--hx-border);
    border-radius: var(--hx-r-sm); text-decoration: none;
    transition: border-color var(--hx-t), transform .1s ease;
}
.gg__article-card:hover { border-color: var(--hx-border-gold-strong); transform: translateY(-2px); }
.gg__article-card-top { margin-bottom: .55rem; }
.gg__article-card-title { font-family: var(--hx-font-body); font-weight: 700; color: var(--hx-text-heading); font-size: 1.05rem; }
.gg__article-card-summary { font-family: var(--hx-font-body); font-size: .84rem; color: var(--hx-text-muted); line-height: 1.4; margin-top: .2rem; }

/* Badges */
.gg__badge {
    font-family: var(--hx-font-mono); font-size: .64rem; letter-spacing: .08em;
    padding: .18rem .5rem; border-radius: var(--hx-r-pill); border: 1px solid var(--hx-border-mid);
}
.gg__badge--essential { color: var(--hx-gold-on); background: var(--hx-gold); border-color: var(--hx-gold); }
.gg__badge--encouraged { color: var(--hx-green); border-color: rgba(116,213,154,.4); }
.gg__badge--optional { color: var(--hx-text-muted); }

/* Article page */
.gga__crumbs { font-family: var(--hx-font-mono); font-size: .78rem; margin-bottom: 1rem; }
.gga__crumbs a { color: var(--hx-text-3); text-decoration: none; }
.gga__crumbs a:hover { color: var(--hx-gold); }
.gga__crumb-sep { color: var(--hx-text-faint); margin: 0 .4rem; }
.gga__badge-row { margin-bottom: .6rem; }
.gga { max-width: var(--hx-max-focused); }
.gga__title { font-family: var(--hx-font-display); font-size: clamp(2rem, 5vw, 2.8rem); color: var(--hx-text-heading); margin: 0; line-height: 1; }
.gga__summary { font-family: var(--hx-font-body); font-size: 1.05rem; color: var(--hx-text-2); margin: .6rem 0 1.5rem; line-height: 1.5; }
.gga__figure { margin: 0 0 1.75rem; }
.gga__body { font-family: var(--hx-font-body); }
.gga__section-heading { font-family: var(--hx-font-display); font-size: 1.3rem; letter-spacing: .03em; color: var(--hx-gold); margin: 1.9rem 0 .6rem; }
.gga__para { color: var(--hx-text-body); font-size: 1rem; line-height: 1.65; margin: 0 0 .9rem; }
.gga__para strong { color: var(--hx-text-heading); }

/* Cross-links (injected via MarkupString — must be global) */
.guide-xlink { color: var(--hx-gold); text-decoration: none; border-bottom: 1px dashed var(--hx-border-gold-strong); }
.guide-xlink:hover { border-bottom-style: solid; }
.guide-applink { color: var(--hx-green); text-decoration: underline; text-underline-offset: 2px; }

.gga__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.5rem 0; }
.gga__next {
    display: flex; flex-direction: column; gap: .15rem;
    margin: 2rem 0 1rem; padding: 1rem 1.25rem;
    background: var(--hx-fill-gold-subtle); border: 1px solid var(--hx-border-gold);
    border-radius: var(--hx-r-sm); text-decoration: none;
}
.gga__next:hover { border-color: var(--hx-border-gold-strong); }
.gga__next-label { font-family: var(--hx-font-mono); font-size: .68rem; letter-spacing: .12em; color: var(--hx-text-muted); }
.gga__next-title { font-family: var(--hx-font-display); font-size: 1.3rem; letter-spacing: .02em; color: var(--hx-gold); }

.gga__related { margin-top: 2.5rem; }
.gga__related-title { font-family: var(--hx-font-mono); font-size: .78rem; letter-spacing: .1em; color: var(--hx-text-muted); margin: 0 0 .6rem; }
.gga__related-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.gga__related-chip {
    font-family: var(--hx-font-body); font-size: .85rem; color: var(--hx-text-2);
    padding: .35rem .75rem; background: var(--hx-surface-1);
    border: 1px solid var(--hx-border); border-radius: var(--hx-r-pill); text-decoration: none;
}
.gga__related-chip:hover { border-color: var(--hx-border-gold-strong); color: var(--hx-gold); }
.gga__home { display: inline-block; margin-top: 2rem; font-family: var(--hx-font-mono); font-size: .8rem; color: var(--hx-text-3); text-decoration: none; }
.gga__home:hover { color: var(--hx-gold); }

/* ── HaxScore chip (doc 20 §13.3) — white → green → gold, never red ── */
.hxs__ring { display: block; flex-shrink: 0; }
.hxs--mini .hxs__ring { width: 46px; height: 46px; }
.hxs--large .hxs__ring { width: 66px; height: 66px; }
.hxs__track { stroke: rgba(216,205,182,.16); }
.hxs__arc { stroke: #6cbf7a; transition: stroke-dasharray .7s ease; }  /* green = good, at every level */
.hxs__num { font-family: var(--hx-font-mono); font-weight: 700; fill: var(--hx-text-heading); }
.hxs--mini .hxs__num { font-size: 13px; }
.hxs--large .hxs__num { font-size: 12px; }
/* Mini ring + its branded label — "HaxScore" as a known metric (Metascore / Rotten Tomatoes vibe) */
.hxs__mini { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; }
.hxs__mini-label { font-family: var(--hx-font-mono); font-size: .56rem; letter-spacing: .06em; color: var(--hx-gold); white-space: nowrap; }
/* Large / expandable face */
.hxs--large { display: block; }
.hxs__face {
    display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left; cursor: pointer;
    background: rgba(108,191,122,.07); border: 1px solid rgba(108,191,122,.4);
    border-radius: var(--hx-r-sm); padding: .55rem .9rem; transition: border-color var(--hx-t);
}
.hxs__face:hover { border-color: rgba(108,191,122,.7); }
.hxs__meta { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.hxs__label { font-family: var(--hx-font-display); font-size: 1.1rem; letter-spacing: .05em; color: var(--hx-gold); }
.hxs__sub { font-family: var(--hx-font-mono); font-size: .68rem; letter-spacing: .04em; color: var(--hx-text-muted); }
/* Hero — for a surface whose SUBJECT is the score (the Showcase submit page: you're deciding whether this
   number is good enough to compete). ~3x the large ring, stacked and centred so it reads as the headline
   figure rather than a chip beside a heading. The number keeps its viewBox-relative size, so it scales
   with the ring for free. Operator, 2026-08-02. */
.hxs--hero { display: block; }
.hxs--hero .hxs__ring { width: 190px; height: 190px; }
.hxs--hero .hxs__num { font-size: 11px; }
.hxs--hero .hxs__face {
    flex-direction: column; align-items: center; text-align: center;
    gap: .6rem; padding: 1.3rem 1.5rem;
}
.hxs--hero .hxs__meta { align-items: center; }
.hxs--hero .hxs__label { font-size: 1.9rem; }
.hxs--hero .hxs__sub { font-size: .78rem; }
@media (max-width: 560px) {
    .hxs--hero .hxs__ring { width: 150px; height: 150px; }
    .hxs--hero .hxs__label { font-size: 1.5rem; }
}
/* Breakdown */
.hxs__breakdown {
    margin-top: .5rem; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .7rem;
    background: rgba(108,191,122,.05); border: 1px solid rgba(108,191,122,.32); border-radius: var(--hx-r-sm);
}
.hxs__row { display: flex; flex-direction: column; gap: .25rem; }
.hxs__row-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.hxs__row-label { font-family: var(--hx-font-body); font-size: .85rem; font-weight: 600; color: var(--hx-text-2); }
.hxs__row-val { font-family: var(--hx-font-mono); font-size: .74rem; color: var(--hx-text-muted); white-space: nowrap; }
.hxs__bar { height: 6px; background: rgba(216,205,182,.1); border-radius: 3px; overflow: hidden; }
.hxs__bar-fill { height: 100%; background: #6cbf7a; border-radius: 3px; transition: width .7s ease; }
.hxs__hint { font-family: var(--hx-font-body); font-size: .76rem; color: var(--hx-text-muted); line-height: 1.35; }
.hxs__foot { font-family: var(--hx-font-body); font-size: .76rem; color: var(--hx-text-faint); margin: .2rem 0 0; line-height: 1.4; }
/* Mini chip on a plant card — pushed to the right of the card row */
.rj__plant-card-score { margin-left: auto; padding-left: .5rem; display: inline-flex; align-items: center; }

/* Diagrams */
.guide-diagram { margin: 0; }
.guide-diagram svg { width: 100%; max-width: 460px; height: auto; display: block; }
.guide-diagram__caption { font-family: var(--hx-font-mono); font-size: .76rem; color: var(--hx-text-caption); margin: .5rem 0 0; }
.guide-diagram__missing { font-family: var(--hx-font-mono); font-size: .8rem; color: var(--hx-text-faint); }

/* Legal pages (Privacy, Terms) — simple, readable single column. */
.hx-legal { max-width: 720px; padding-block: clamp(2.5rem, 8vw, 4.5rem); }
.hx-legal__eyebrow { font-family: var(--hx-font-mono); font-size: .72rem; letter-spacing: .18em; color: var(--hx-text-caption); margin: 0 0 .4rem; }
.hx-legal__title { font-family: var(--hx-font-display); font-size: clamp(2.4rem, 8vw, 3.4rem); letter-spacing: .03em; color: var(--hx-gold); margin: 0 0 .6rem; }
.hx-legal__lede { font-size: 1.1rem; color: var(--hx-text-2); margin: 0 0 2rem; }
.hx-legal__body p { color: var(--hx-text-body); line-height: 1.7; margin: 0 0 1.1rem; }
.hx-legal__note { color: var(--hx-text-caption) !important; font-size: .92rem; border-left: 2px solid var(--hx-border); padding-left: 1rem; }
.hx-legal__back { margin-top: 1.5rem; }