/* ============================================================
   NOXITY v4 — transit-signage design system.
   Tokens are copied verbatim from the design project's tokens/*.css.
   Everything below the token block is the component layer this app
   needs; nothing here invents a colour that isn't a token.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600;700&display=swap');

/* ---------------------------------------------------------- tokens */
:root {
    /* Noxity is a warm LIGHT system and has no dark variant. Saying so stops Chrome's
       auto-dark-mode from inverting the palette into something the brand doesn't own. */
    color-scheme: light;

    --nx-navy: #162647;
    --nx-paper: #F4F0E7;
    --nx-card: #FBF9F4;

    --nx-red: #B83553;
    --nx-red-deep: #7E2138;

    --nx-green: #4E7954;
    --nx-green-deep: #2E5D3B;
    --nx-green-tint: #E4ECDF;

    --nx-status-ok: #4E7954;
    --nx-status-degraded: #C28A04;
    --nx-status-down: #B83553;

    --nx-text: #162647;
    --nx-text-muted: rgba(22, 38, 71, .62);
    --nx-text-faint: rgba(22, 38, 71, .55);

    --nx-on-dark: #FBF9F4;
    --nx-on-dark-muted: rgba(251, 249, 244, .60);
    --nx-on-dark-faint: rgba(251, 249, 244, .42);

    --nx-line: rgba(22, 38, 71, .12);
    --nx-line-strong: rgba(22, 38, 71, .30);
    --nx-line-dark: rgba(251, 249, 244, .14);

    --nx-font: "Geist", system-ui, -apple-system, sans-serif;
    --nx-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;

    --nx-space-1: 4px;
    --nx-space-2: 8px;
    --nx-space-3: 12px;
    --nx-space-4: 16px;
    --nx-space-6: 24px;
    --nx-space-8: 32px;
    --nx-space-12: 48px;
    --nx-space-16: 64px;

    --nx-gutter: 32px;
    --nx-container: 1200px;
    --nx-container-footer: 1240px;

    --nx-radius: 0;
    --nx-radius-input: 2px;
    --nx-bar: 8px;

    --nx-dur: 150ms;
    --nx-ease: ease;
    --nx-ease-move: cubic-bezier(.4, 0, .1, 1);
    --nx-shadow-card-hover: 0 18px 34px rgba(22, 38, 71, .16);
}

::selection { background: var(--nx-red); color: var(--nx-card); }

/* ---------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }

/* The component classes below set display, which would otherwise beat the UA rule for
   [hidden] and leave "hidden" panels on screen. This keeps the attribute meaning what it says. */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--nx-paper);
    color: var(--nx-text);
    font: 400 16px/1.5 var(--nx-font);
    -webkit-font-smoothing: antialiased;
}

a { color: var(--nx-text); text-decoration: none; transition: color var(--nx-dur) var(--nx-ease); }
a:hover { color: var(--nx-red); }

h1, h2, h3 { margin: 0; }

img { max-width: 100%; }

/* Focus is a visible navy ring everywhere — the system has no glow, so this is a hard outline. */
:focus-visible { outline: 2px solid var(--nx-navy); outline-offset: 2px; }

/* ---------------------------------------------------------- shell */
.nx-page { min-height: 100vh; display: flex; flex-direction: column; }
.nx-page > main { flex: 1; }

/* The thick station-sign bar: red on customer-facing, navy on product. */
.nx-signage { height: var(--nx-bar); background: var(--nx-red); }
.nx-signage--product { background: var(--nx-navy); }

.nx-wrap { padding-left: max(var(--nx-gutter), calc((100% - var(--nx-container)) / 2)); padding-right: max(var(--nx-gutter), calc((100% - var(--nx-container)) / 2)); }
.nx-wrap--footer { padding-left: max(var(--nx-gutter), calc((100% - var(--nx-container-footer)) / 2)); padding-right: max(var(--nx-gutter), calc((100% - var(--nx-container-footer)) / 2)); }

.nx-header {
    padding-top: 18px; padding-bottom: 18px;
    border-bottom: 1px solid var(--nx-line);
    display: flex; align-items: center; justify-content: space-between; gap: var(--nx-space-8);
}
.nx-header--admin { padding-top: 16px; padding-bottom: 16px; }
.nx-header__logo { height: 30px; display: block; width: auto; }
.nx-header--admin .nx-header__logo { height: 28px; }
.nx-header__actions { display: flex; align-items: center; gap: 14px; }

.nx-footer {
    background: var(--nx-navy);
    padding-top: 28px; padding-bottom: 28px;
    display: flex; align-items: center; justify-content: space-between; gap: var(--nx-space-6);
}
.nx-footer__logo { height: 26px; display: block; width: auto; }
.nx-footer__meta { font: 400 12px/1.6 var(--nx-font-mono); letter-spacing: .06em; color: var(--nx-on-dark-faint); }

/* Admin is desktop-only by decision — public pages stay fluid. */
.nx-admin { min-width: 1264px; }

/* ---------------------------------------------------------- type */
.nx-eyebrow {
    font: 500 12px/1 var(--nx-font-mono);
    letter-spacing: .14em;
    color: var(--nx-text-faint);
    text-transform: uppercase;
}
.nx-eyebrow--sm { font-size: 11px; }
.nx-eyebrow--on-dark { color: var(--nx-on-dark-muted); }
.nx-eyebrow--faint-on-dark { color: var(--nx-on-dark-faint); }

.nx-display { font-weight: 800; font-size: 56px; line-height: .95; letter-spacing: -.035em; text-wrap: pretty; }
.nx-h1 { font-weight: 800; font-size: 44px; line-height: 1; letter-spacing: -.035em; text-wrap: pretty; }
.nx-h2 { font-weight: 800; font-size: 38px; line-height: 1; letter-spacing: -.035em; }
.nx-h3 { font-weight: 700; font-size: 28px; line-height: 1.05; letter-spacing: -.02em; }
.nx-lead { font-weight: 500; font-size: 21px; line-height: 1.45; color: var(--nx-text-muted); text-wrap: pretty; margin: 0; }
.nx-mono { font-family: var(--nx-font-mono); }
.nx-muted { color: var(--nx-text-muted); }
.nx-faint { color: var(--nx-text-faint); }
.nx-hint { font-size: 12px; color: var(--nx-text-faint); }

/* ---------------------------------------------------------- buttons */
.nx-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--nx-space-2);
    height: 44px; padding: 0 22px;
    border: 1px solid transparent; border-radius: var(--nx-radius);
    font: 600 15px/1 var(--nx-font); letter-spacing: -.01em;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background-color var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease);
}
.nx-btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }
.nx-btn--lg { height: 52px; padding: 0 28px; font-size: 16px; }
.nx-btn--block { width: 100%; }

.nx-btn--primary { background: var(--nx-red); border-color: var(--nx-red); color: var(--nx-card); }
.nx-btn--primary:hover { background: var(--nx-red-deep); border-color: var(--nx-red-deep); color: var(--nx-card); }

/* Ghost → fills navy on hover. A subtle hover is a failure by system rule. */
.nx-btn--secondary { background: transparent; border-color: var(--nx-line-strong); color: var(--nx-text); }
.nx-btn--secondary:hover { background: var(--nx-navy); border-color: var(--nx-navy); color: var(--nx-on-dark); }

.nx-btn--on-dark { border-color: var(--nx-line-dark); color: var(--nx-on-dark); }
.nx-btn--on-dark:hover { background: var(--nx-on-dark); border-color: var(--nx-on-dark); color: var(--nx-navy); }

.nx-btn--danger { background: transparent; border-color: var(--nx-line-strong); color: var(--nx-red-deep); }
.nx-btn--danger:hover { background: var(--nx-red-deep); border-color: var(--nx-red-deep); color: var(--nx-card); }

.nx-btn[disabled], .nx-btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

.nx-link-underline { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------- forms */
.nx-field { display: flex; flex-direction: column; gap: var(--nx-space-2); }

.nx-input, .nx-select, .nx-textarea {
    width: 100%; height: 44px; padding: 0 12px;
    background: var(--nx-card);
    border: 1px solid var(--nx-line-strong); border-radius: var(--nx-radius-input);
    color: var(--nx-text); font: 400 15px/1 var(--nx-font);
    transition: border-color var(--nx-dur) var(--nx-ease);
}
.nx-textarea { height: auto; min-height: 132px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.nx-input:hover, .nx-textarea:hover, .nx-select:hover { border-color: var(--nx-navy); }
.nx-input:focus, .nx-textarea:focus, .nx-select:focus { border-color: var(--nx-navy); outline: none; box-shadow: inset 0 0 0 1px var(--nx-navy); }
.nx-input--invalid, .nx-textarea--invalid { border-color: var(--nx-red); }
.nx-input::placeholder, .nx-textarea::placeholder { color: rgba(22, 38, 71, .45); }

.nx-input--mono { font-family: var(--nx-font-mono); }
.nx-input--num { width: 96px; text-align: center; font: 700 16px/1 var(--nx-font-mono); padding: 0 8px; }

.nx-input--on-dark {
    background: transparent; border-color: rgba(251, 249, 244, .3); color: var(--nx-on-dark);
}
.nx-input--on-dark:hover, .nx-input--on-dark:focus { border-color: var(--nx-on-dark); box-shadow: none; }

/* Slug field: fixed prefix glued to the input, one shared border. */
.nx-prefixed { display: flex; align-items: stretch; border: 1px solid var(--nx-line-strong); border-radius: var(--nx-radius-input); background: var(--nx-card); }
.nx-prefixed:focus-within { border-color: var(--nx-navy); box-shadow: inset 0 0 0 1px var(--nx-navy); }
.nx-prefixed__prefix { font: 400 13px/42px var(--nx-font-mono); color: var(--nx-text-faint); padding: 0 0 0 12px; white-space: nowrap; }
.nx-prefixed .nx-input { border: 0; border-radius: 0; background: transparent; height: 42px; padding-left: 0; }
.nx-prefixed .nx-input:focus { box-shadow: none; }

.nx-checkbox { display: flex; gap: var(--nx-space-3); align-items: flex-start; font-size: 14px; line-height: 1.45; }
.nx-checkbox input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--nx-navy); flex: none; }

/* ---------------------------------------------------------- surfaces */
.nx-card { background: var(--nx-card); border: 1px solid var(--nx-line); }
.nx-card__body { padding: var(--nx-space-6); }
.nx-card__cap { height: var(--nx-bar); background: var(--nx-red); }
.nx-card__cap--product { background: var(--nx-navy); }

/* The system's ONE elevation. Only on cards that are themselves links. */
.nx-card--link { transition: border-color var(--nx-dur) var(--nx-ease-move), transform var(--nx-dur) var(--nx-ease-move), box-shadow var(--nx-dur) var(--nx-ease-move); display: block; }
.nx-card--link:hover { border-color: var(--nx-red); transform: translateY(-8px); box-shadow: var(--nx-shadow-card-hover); }

.nx-panel-dark { background: var(--nx-navy); color: var(--nx-on-dark); padding: var(--nx-space-6); }
.nx-panel-dark a { color: var(--nx-on-dark); }
.nx-panel-dark a:hover { color: var(--nx-red); }

.nx-rule { border: 0; border-top: 1px solid var(--nx-line); margin: 0; }

/* ---------------------------------------------------------- chips & badges */
.nx-chip {
    display: inline-flex; align-items: center; gap: var(--nx-space-2);
    font: 500 12px/1 var(--nx-font-mono); letter-spacing: .08em; text-transform: uppercase;
    border: 1px solid var(--nx-line-strong); padding: 8px 12px;
    color: rgba(22, 38, 71, .75); background: transparent;
    border-radius: var(--nx-radius); cursor: pointer;
    transition: border-color var(--nx-dur) var(--nx-ease), background-color var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease);
}
.nx-chip:hover { border-color: var(--nx-navy); color: var(--nx-text); }
.nx-chip--active, .nx-chip--active:hover { background: var(--nx-navy); border-color: var(--nx-navy); color: var(--nx-on-dark); }
.nx-chip--ok { background: var(--nx-green-tint); border-color: var(--nx-green-tint); color: var(--nx-green-deep); border-radius: var(--nx-radius-input); }
.nx-chip--bad { border-color: var(--nx-red); color: var(--nx-red-deep); border-radius: var(--nx-radius-input); }

.nx-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Small square status dot — a brand shape, deliberately not an icon. */
.nx-dot { display: inline-block; width: 7px; height: 7px; flex: none; }
.nx-dot--ok { background: var(--nx-status-ok); }
.nx-dot--degraded { background: var(--nx-status-degraded); }
.nx-dot--down { background: var(--nx-status-down); }

.nx-status { display: inline-flex; align-items: center; gap: 7px; font: 500 11px/1 var(--nx-font-mono); letter-spacing: .08em; text-transform: uppercase; }

.nx-verified { display: inline-flex; align-items: center; gap: 5px; font: 500 11px/1 var(--nx-font-mono); letter-spacing: .08em; color: var(--nx-green); text-transform: uppercase; }

/* ---------------------------------------------------------- KPI strip */
.nx-kpis { display: flex; border: 1px solid var(--nx-line); background: var(--nx-card); }
.nx-kpi { flex: 1; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; border-right: 1px solid var(--nx-line); }
.nx-kpi:last-child { border-right: 0; }
.nx-kpi__value { font: 700 34px/1 var(--nx-font-mono); letter-spacing: -.03em; }
.nx-kpi__value--sm { font-size: 32px; }
.nx-kpi__note { font: 400 12px/1 var(--nx-font-mono); color: var(--nx-text-faint); }
.nx-kpi__note--up { color: var(--nx-green); }
.nx-kpi__note--down { color: var(--nx-status-degraded); }

/* ---------------------------------------------------------- bars */
.nx-bar { display: block; height: 12px; background: rgba(22, 38, 71, .1); }
.nx-bar > span { display: block; height: 100%; background: var(--nx-navy); }
.nx-bar--accent > span { background: var(--nx-red); }
.nx-bar--thin { height: 8px; }
.nx-bar--thick { height: 16px; }

.nx-meter { display: flex; align-items: center; gap: var(--nx-space-3); }
.nx-meter__label { font: 400 12px/1 var(--nx-font-mono); color: var(--nx-text-muted); width: 22px; flex: none; }
.nx-meter .nx-bar { flex: 1; }
.nx-meter__count { font: 500 12px/1 var(--nx-font-mono); width: 34px; text-align: right; flex: none; }

/* Segmented split bar — one segment per destination. */
.nx-split { display: flex; height: 10px; gap: 2px; }
.nx-split > span { display: block; }
.nx-split--tall { height: 44px; }
.nx-legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font: 500 10px/1 var(--nx-font-mono); letter-spacing: .06em; }
.nx-legend__item { display: flex; align-items: center; gap: 4px; }
.nx-legend__swatch { width: 6px; height: 6px; flex: none; }

/* Chart: bars sit on a hairline baseline over a 4-line grid. */
.nx-chart { display: flex; align-items: flex-end; gap: 5px; height: 150px; border-bottom: 1px solid var(--nx-line-strong); background-image: repeating-linear-gradient(to top, rgba(22, 38, 71, .10) 0 1px, transparent 1px 25%); }
.nx-chart > span { flex: 1; background: var(--nx-navy); min-height: 1px; }
.nx-chart > span.is-today { background: var(--nx-red); }
.nx-chart__axis { display: flex; flex-direction: column; justify-content: space-between; height: 150px; width: 22px; text-align: right; font: 400 11px/1 var(--nx-font-mono); color: var(--nx-text-faint); flex: none; }
.nx-chart__ticks { display: flex; justify-content: space-between; font: 400 11px/1 var(--nx-font-mono); letter-spacing: .06em; color: var(--nx-text-faint); }

/* ---------------------------------------------------------- stars */
.nx-stars { display: inline-flex; gap: 3px; font-size: 16px; line-height: 1; color: var(--nx-red); }
.nx-stars--navy { color: var(--nx-navy); }
.nx-stars .is-empty { color: rgba(22, 38, 71, .2); }

/* Radio stars: pure CSS, keyboard-operable, no JS needed to submit. */
/* align-self stops the row stretching inside the column field, which with row-reverse
   would push the stars to the right-hand edge. */
.nx-rate { display: inline-flex; flex-direction: row-reverse; gap: var(--nx-space-2); align-self: flex-start; }
.nx-rate input { position: absolute; opacity: 0; width: 0; height: 0; }
.nx-rate label {
    font-size: 38px; line-height: 1; cursor: pointer; color: rgba(22, 38, 71, .3);
    transition: color var(--nx-dur) var(--nx-ease);
}
/* Stars are laid out 5→1 in the DOM and reversed visually, so "checked ~ label" reaches
   exactly the stars at or below the chosen one. */
.nx-rate input:checked ~ label { color: var(--nx-red); }
/* While the group is hovered the preview replaces the checked state outright — otherwise
   hovering 2 on a 5-star selection would light all five. Source order breaks the tie. */
.nx-rate:hover input:checked ~ label { color: rgba(22, 38, 71, .3); }
/* "input ~" is not decoration: it lifts this to the same specificity as the dim rule above,
   so source order decides and the hovered star itself stays lit. Without it the dim rule
   outranks this one and the preview shows one star too few. */
.nx-rate:hover input ~ label:hover,
.nx-rate:hover label:hover ~ label { color: var(--nx-red); }
.nx-rate input:focus-visible + label { outline: 2px solid var(--nx-navy); outline-offset: 2px; }

/* ---------------------------------------------------------- tables */
.nx-table { width: 100%; border-collapse: collapse; background: var(--nx-card); border: 1px solid var(--nx-line); }
.nx-table th, .nx-table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--nx-line); vertical-align: middle; }
.nx-table tr:last-child td { border-bottom: 0; }
.nx-table th { font: 500 11px/1 var(--nx-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--nx-text-faint); }
.nx-table td.is-num, .nx-table th.is-num { text-align: right; font-family: var(--nx-font-mono); }

/* The dark departure-board list. */
.nx-board { background: var(--nx-navy); color: var(--nx-on-dark); }
.nx-board__head, .nx-board__row { display: flex; align-items: center; padding: 18px 24px; border-bottom: 1px solid var(--nx-line-dark); }
.nx-board__head { padding: 14px 24px; font: 500 11px/1 var(--nx-font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--nx-on-dark-faint); }
.nx-board__head a { color: var(--nx-on-dark-faint); display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.nx-board__head a:hover, .nx-board__head a.is-active { color: var(--nx-on-dark); }
.nx-board__row:last-child { border-bottom: 0; }
.nx-board__row { transition: background-color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease); color: var(--nx-on-dark); }
.nx-board__row:hover { background-color: rgba(251, 249, 244, .07); box-shadow: inset 4px 0 0 var(--nx-red); color: var(--nx-on-dark); }
.nx-board__row.is-paused { color: var(--nx-on-dark-muted); }
.nx-board__cap { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--nx-line-dark); }
.nx-board__num { text-align: right; font: 500 15px/1 var(--nx-font-mono); }
.nx-board__name { font-weight: 700; font-size: 15px; }
.nx-board__slug { font: 400 12px/1 var(--nx-font-mono); color: var(--nx-on-dark-faint); }

/* ---------------------------------------------------------- link form */
.nx-platform-row { display: flex; align-items: center; gap: var(--nx-space-4); border: 1px solid var(--nx-line); padding: 16px 18px; }
.nx-platform-row__icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex: none; }

.nx-percent { display: flex; align-items: center; border: 1px solid var(--nx-line-strong); border-radius: var(--nx-radius-input); height: 40px; width: 96px; flex: none; padding-right: 10px; }
.nx-percent .nx-input { border: 0; box-shadow: none; height: 38px; width: auto; flex: 1; background: transparent; }

/* The 100% gate's readout. Green only when it balances — the total is pass/fail, not a scale. */
.nx-total { display: inline-flex; align-items: center; gap: var(--nx-space-2); font: 700 18px/1 var(--nx-font-mono); padding: 9px 14px; border-radius: var(--nx-radius-input); }
.nx-total--ok { background: var(--nx-green-tint); color: var(--nx-green-deep); }
.nx-total--bad { background: transparent; border: 1px solid var(--nx-red); color: var(--nx-red-deep); }

.nx-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: none; padding: 0; cursor: pointer;
    background: transparent; border: 1px solid var(--nx-line); border-radius: var(--nx-radius);
    color: var(--nx-text-muted);
    transition: border-color var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease), background-color var(--nx-dur) var(--nx-ease);
}
.nx-icon-btn:hover { border-color: var(--nx-red-deep); background: var(--nx-red-deep); color: var(--nx-card); }

/* ---------------------------------------------------------- link detail */
.nx-qr { position: relative; }
.nx-qr summary { list-style: none; }
.nx-qr summary::-webkit-details-marker { display: none; }
.nx-qr__panel { position: absolute; z-index: 5; top: calc(100% + 8px); left: 0; background: var(--nx-card); border: 1px solid var(--nx-line); padding: var(--nx-space-3); line-height: 0; }

/* One review per row, expanding to its own moderation controls. */
.nx-review-row { border-bottom: 1px solid var(--nx-line); }
.nx-review-row:last-child { border-bottom: 0; }
.nx-review-row > summary {
    display: flex; align-items: center; gap: 20px; padding: 16px 20px; cursor: pointer; list-style: none;
    transition: background-color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease);
}
.nx-review-row > summary::-webkit-details-marker { display: none; }
.nx-review-row > summary:hover { background: rgba(22, 38, 71, .04); box-shadow: inset 3px 0 0 var(--nx-red); }
.nx-review-row[open] > summary { background: rgba(22, 38, 71, .04); box-shadow: inset 3px 0 0 var(--nx-red); }
.nx-review-row__body { display: flex; flex-direction: column; gap: var(--nx-space-4); padding: 4px 20px 24px 20px; border-top: 1px solid var(--nx-line); }
.nx-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ---------------------------------------------------------- feedback */
.nx-notice { border: 1px solid var(--nx-line); border-left: 3px solid var(--nx-green); background: var(--nx-card); padding: 14px 16px; font-size: 14px; line-height: 1.45; }
.nx-notice--error { border-left-color: var(--nx-red); }
.nx-notice ul { margin: 0; padding-left: 18px; }

/* Quoted reply from the team, on wall cards and in moderation. */
.nx-reply { border-left: 3px solid var(--nx-red); padding: 12px 0 12px 14px; display: flex; flex-direction: column; gap: 6px; }

/* ---------------------------------------------------------- wall */
.nx-hero {
    background: var(--nx-navy);
    padding-top: 56px; padding-bottom: 56px;
    display: flex; gap: 56px; align-items: flex-start; justify-content: space-between;
}
.nx-hero__copy { display: flex; flex-direction: column; gap: var(--nx-space-4); max-width: 560px; }

.nx-score { background: var(--nx-card); padding: 28px; width: 400px; flex: none; display: flex; flex-direction: column; gap: var(--nx-space-4); }

.nx-method { border-top: 1px solid var(--nx-line); padding-top: var(--nx-space-4); font-size: 13px; line-height: 1.45; }
.nx-method summary { cursor: pointer; display: flex; align-items: center; gap: 10px; text-decoration: underline; text-underline-offset: 3px; }
.nx-method summary::-webkit-details-marker { display: none; }
.nx-method summary:hover { color: var(--nx-red); }
.nx-method p { margin: var(--nx-space-3) 0 0; color: var(--nx-text-muted); }

/* Columns rather than a grid: cards are uneven, and this is the whole masonry. */
.nx-masonry { column-count: 3; column-gap: var(--nx-space-6); }
.nx-masonry > * { break-inside: avoid; margin-bottom: var(--nx-space-6); }

.nx-permalink {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--nx-line); padding: 14px 16px;
    font: 400 13px/1 var(--nx-font-mono); letter-spacing: .04em; color: var(--nx-text-muted);
    transition: border-color var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease);
}
.nx-permalink:hover { border-color: var(--nx-red); color: var(--nx-text); }

/* Interstitial countdown. Purely decorative — the meta refresh does the actual work. */
.nx-progress { display: block; height: 6px; background: var(--nx-line); }
.nx-progress > span { display: block; height: 100%; width: 0; background: var(--nx-red); animation: nx-countdown 3s linear forwards; }
@keyframes nx-countdown { from { width: 0 } to { width: 100% } }

/* ---------------------------------------------------------- helpers */
.nx-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.nx-stack { display: flex; flex-direction: column; }
.nx-row { display: flex; align-items: center; }
.nx-between { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-space-6); }
.nx-grow { flex: 1; }
.nx-gap-1 { gap: var(--nx-space-1); } .nx-gap-2 { gap: var(--nx-space-2); }
.nx-gap-3 { gap: var(--nx-space-3); } .nx-gap-4 { gap: var(--nx-space-4); }
.nx-gap-6 { gap: var(--nx-space-6); } .nx-gap-8 { gap: var(--nx-space-8); }
.nx-py-6 { padding-top: var(--nx-space-6); padding-bottom: var(--nx-space-6); }
.nx-py-8 { padding-top: var(--nx-space-8); padding-bottom: var(--nx-space-8); }
.nx-py-12 { padding-top: var(--nx-space-12); padding-bottom: var(--nx-space-12); }
.nx-center { display: flex; justify-content: center; }
.nx-avatar { width: 32px; height: 32px; background: var(--nx-navy); color: var(--nx-on-dark); font: 700 13px/32px var(--nx-font-mono); text-align: center; flex: none; }

/* ---------------------------------------------------------- responsive
   Customer-facing pages only — admin is desktop-only by decision. */
@media (max-width: 980px) {
    .nx-masonry { column-count: 2; }
    .nx-hero { flex-direction: column; }
    .nx-score { width: 100%; }
}

@media (max-width: 720px) {
    :root { --nx-gutter: 20px; }

    .nx-masonry { column-count: 1; }
    .nx-hero { padding-top: var(--nx-space-8); padding-bottom: var(--nx-space-8); gap: var(--nx-space-8); }
    .nx-score { padding: var(--nx-space-4); }
    .nx-permalink { font-size: 11px; word-break: break-all; }

    .nx-display { font-size: 34px; }
    .nx-h1 { font-size: 30px; }
    .nx-h3 { font-size: 22px; }
    .nx-lead { font-size: 17px; }

    .nx-header { padding-top: 14px; padding-bottom: 14px; }
    .nx-header__logo { height: 24px; }

    .nx-footer { flex-direction: column; align-items: flex-start; gap: var(--nx-space-4); }
    .nx-footer__meta { flex-direction: column; align-items: flex-start; gap: var(--nx-space-2); display: flex; }

    /* Every two-column layout in the design stacks. */
    .nx-split-cols { flex-direction: column; }
    .nx-split-cols > * { width: 100% !important; flex: none !important; }

    .nx-kpis { flex-wrap: wrap; }
    .nx-kpi { flex: 1 1 50%; border-right: 0; border-bottom: 1px solid var(--nx-line); }
    .nx-kpi__value { font-size: 26px; }

    /* Touch targets: the design's 52px CTA is already fine, small ghosts are not. */
    .nx-btn { width: 100%; height: 48px; }
    .nx-btn--sm { width: auto; height: 44px; }
    .nx-btn-group { flex-direction: column; align-items: stretch; width: 100%; }

    .nx-rate label { font-size: 32px; }
    .nx-card__body { padding: var(--nx-space-4); }
    .nx-wrap, .nx-wrap--footer { padding-left: var(--nx-gutter); padding-right: var(--nx-gutter); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
    .nx-card--link:hover { transform: none; }
}