/* TeknoParrot Nation: site-wide theme. GENERATED by tools/nation-site/build.py from the sources there -
   edit those and rebuild, don't edit this file. Loaded only while Citizen:PublicUi is on (NationSiteTheme). */

/* ==================================================================== decks.css */

/* ==========================================================================
   TeknoParrot Nation site theme: the Ark's decks
   Pages: /{culture}/Compatibility, /{culture}/Compatibility/GameDetail/{id}
   Imported at the top of nation-site.css (so the base rules come later in the
   cascade: out-specify them, don't repeat them). Loaded only while
   Citizen:PublicUi is on. Read SYSTEM.md (tokens, scope prefixes, recipes)
   before adding rules. House rules, in short:
   - scope every rule under the content prefix plus your page class, e.g.
       :root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page ...
     (page chrome: :root body.editorial-page-active:not(.admin-page) ...);
   - use the --ns-* tokens; never define or change a --tp-* property;
   - never touch .price, [data-tier], .btn-gradient, .paddle-checkout-btn or
     anything inside the pricing block (.subscription-container);
   - on script-driven elements (INVENTORY 4.6) colour, type, border, radius and
     shadow only: no display, position, order, visibility, transform;
   - body text 4.5:1 or better, visible :focus-visible, rtl-safe (logical
     properties), no web fonts, no external URLs, no z-index above 1039.

   The idea: the game list is the Ark's manifest (a night ledger with brass
   portholes for game icons, a quiet port-of-origin chip for the system and a
   status signal per row); a game's page is its cabin: the icon in a big brass
   porthole, the name on a serif nameplate, colour-coded signal pennants on the
   card headers.

   Script hooks on the list (Compatibility/Index.cshtml): #searchGames toggles
   the display of `.table tbody tr`, `.click-row` navigates, `.sortable` gets
   .asc/.desc and re-appends the rows (reads td:nth-child). Only colour, type,
   border, radius and shadow here; no display/position/order on rows or cells.
   ========================================================================== */

/* ---------------------------------------------------------------- 0. per-page tokens */

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.compatibility-page, .compatibility-detail-page) {
    /* status signals (text on the dark surfaces; all AA on --ns-page and on the panels) */
    --dk-perfect: var(--ns-lime);
    --dk-perfect-rgb: 201, 255, 134;
    --dk-great: var(--ns-cyan);
    --dk-great-rgb: 127, 233, 255;
    --dk-issues: var(--ns-gold-soft);
    --dk-issues-rgb: 243, 211, 138;
    --dk-unplayable: var(--ns-coral-soft);
    --dk-unplayable-rgb: 255, 122, 107;
    --dk-unknown: rgba(252, 247, 239, 0.7);
    --dk-unknown-rgb: 252, 247, 239;
    /* the brass of the portholes */
    --dk-brass: linear-gradient(145deg, #fbe3a6 0%, #d9a642 38%, #8a6320 62%, #f0cf82 100%);
}

/* ---------------------------------------------------------------- 1. the manifest (Compatibility list) */

/* the ledger panel: a foil hairline along its top edge */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .compatibility-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(1.1rem, 2.6vw, 2rem);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .compatibility-panel::before {
    content: "";
    position: absolute;
    inset-inline: 8%;
    top: 0;
    height: 1px;
    background: var(--ns-hairline-gold);
    pointer-events: none;
}

/* the title: "841 supported games" on a serif nameplate */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .compatibility-toolbar {
    margin-bottom: 1.35rem;
    gap: 1rem 1.5rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .compatibility-toolbar .editorial-panel-title {
    font-family: var(--ns-serif);
    font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
    font-weight: 400;
    letter-spacing: 0.005em;
    text-transform: none;
    line-height: 1.15;
    color: var(--ns-heading);
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .compatibility-toolbar .editorial-panel-title::after {
    content: "";
    flex: none;
    width: clamp(1.8rem, 4vw, 3.5rem);
    height: 1px;
    background: linear-gradient(90deg, rgba(243, 211, 138, 0.8), rgba(243, 211, 138, 0));
}

/* the search: one pill, field and button joined */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .compatibility-search {
    flex-wrap: nowrap;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .compatibility-search .form-control {
    border-start-start-radius: var(--ns-radius-pill);
    border-end-start-radius: var(--ns-radius-pill);
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-inline-end: 0;
    padding-inline-start: 1.15rem;
    min-height: 2.9rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .compatibility-search .btn {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: var(--ns-radius-pill);
    border-end-end-radius: var(--ns-radius-pill);
    border: 1px solid var(--ns-field-line);
    border-inline-start: 1px solid var(--ns-line);
    background: rgba(4, 10, 24, 0.55);
    color: var(--ns-gold-soft);
    padding-inline: 1.1rem 1.25rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .compatibility-search .btn:is(:hover, :focus-visible) {
    background: rgba(243, 211, 138, 0.12);
    color: var(--ns-ivory);
}

/* focus lights the whole pill: the field's own halo stopped square at the join, half a pill */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .compatibility-search:focus-within {
    border-radius: var(--ns-radius-pill);
    box-shadow: var(--ns-focus-ring);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .compatibility-search:focus-within .btn {
    border-color: var(--ns-gold);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .compatibility-search .form-control:focus {
    z-index: 3;
    box-shadow: none;
}

/* the ledger frame */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table-responsive {
    border: 1px solid var(--ns-line);
    border-radius: 16px;
    background: rgba(4, 10, 24, 0.28);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table.games > :not(caption) > * > * {
    padding: 0.7rem 1rem;
}

/* header: ink, gold tracked labels; the sorted column is lit */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table.games thead th {
    background: rgba(4, 10, 24, 0.82) !important;
    padding-block: 0.95rem;
    white-space: nowrap;
    border-bottom: 1px solid var(--ns-line-gold) !important;
    transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table.games thead th .bi {
    color: rgba(243, 211, 138, 0.55);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table.games th.sortable:hover {
    background: rgba(24, 38, 64, 0.95) !important;
    color: var(--ns-ivory) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table.games th.sortable:is(.asc, .desc) {
    color: var(--ns-ivory) !important;
    box-shadow: inset 0 -2px 0 var(--ns-gold);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table.games th.sortable:is(.asc, .desc) .bi {
    color: var(--ns-gold-soft);
}

/* the page's sort script inverts its class names: .asc sorts Z..A, .desc sorts A..Z; show what the rows do */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table.games th.sortable.asc .bi-sort-alpha-down::before {
    content: "\f570";
}

/* rows (the hover tint is ours: Bootstrap's inset-shadow tint would be lost on the cell that carries the gold bar) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table.games {
    --bs-table-hover-bg: transparent;
    --bs-table-striped-bg: transparent;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table.games tbody td {
    color: var(--ns-fg-dim);
    background-color: transparent;
    border-bottom-color: rgba(252, 247, 239, 0.07);
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table.games tbody tr:last-child td {
    border-bottom: 0;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table.games tbody td.fw-medium {
    color: var(--ns-heading);
    font-weight: 600;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table.games tbody .click-row:hover td {
    background-color: rgba(243, 211, 138, 0.065);
    color: var(--ns-fg);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table.games tbody .click-row:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--ns-gold);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table.games tbody .click-row:hover td.fw-medium {
    color: var(--ns-gold-soft);
}

/* game icons: brass portholes */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .game-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 0;
    padding: 2px;
    background: var(--dk-brass);
    box-shadow: 0 4px 12px rgba(2, 6, 16, 0.55), inset 0 0 0 1px rgba(255, 244, 214, 0.35);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .game-icon img {
    border-radius: 50%;
    background: var(--ns-navy);
    box-shadow: inset 0 0 0 1px rgba(6, 13, 29, 0.6);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table.games tbody .click-row:hover .game-icon {
    box-shadow: 0 0 0 3px rgba(243, 211, 138, 0.16), 0 6px 16px rgba(2, 6, 16, 0.6), inset 0 0 0 1px rgba(255, 244, 214, 0.35);
}

/* status signals: a small lamp chip; the icon carries the colour, the word stays readable */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .compatibility-status-label {
    --dk-s: var(--dk-unknown);
    --dk-s-rgb: var(--dk-unknown-rgb);
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    white-space: nowrap;
    padding: 0.28rem 0.7rem 0.28rem 0.55rem;
    border-radius: var(--ns-radius-pill);
    background: rgba(var(--dk-s-rgb), 0.07);
    border: 1px solid rgba(var(--dk-s-rgb), 0.28);
    color: var(--dk-s);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page :is(.compat-status-perfect) { --dk-s: var(--dk-perfect); --dk-s-rgb: var(--dk-perfect-rgb); color: var(--dk-perfect); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page :is(.compat-status-great) { --dk-s: var(--dk-great); --dk-s-rgb: var(--dk-great-rgb); color: var(--dk-great); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page :is(.compat-status-issues) { --dk-s: var(--dk-issues); --dk-s-rgb: var(--dk-issues-rgb); color: var(--dk-issues); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page :is(.compat-status-unplayable) { --dk-s: var(--dk-unplayable); --dk-s-rgb: var(--dk-unplayable-rgb); color: var(--dk-unplayable); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page :is(.compat-status-unknown) { --dk-s: var(--dk-unknown); --dk-s-rgb: var(--dk-unknown-rgb); color: var(--dk-unknown); }

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .compatibility-status-label .bi {
    filter: drop-shadow(0 0 5px rgba(var(--dk-s-rgb), 0.45));
}

/* system: a quiet port-of-origin chip (not gold: 841 of them) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table.games .badge {
    background: rgba(252, 247, 239, 0.05) !important;
    color: var(--ns-fg-dim) !important;
    border: 1px solid var(--ns-line);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: normal;
    padding: 0.38rem 0.7rem;
    white-space: nowrap;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table.games .badge .bi {
    color: rgba(243, 211, 138, 0.72);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table.games .badge.bg-secondary {
    border-style: dashed;
    color: var(--ns-fg-mute) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table.games tbody .click-row:hover .badge {
    border-color: var(--ns-line-gold);
    color: var(--ns-fg) !important;
}

/* nothing matches the search (the script hides every row): an empty porthole instead of a bare header.
   Icon only: the page has no localized "no results" string (see the markup proposal in the notes). */
@supports selector(:has(*)) {
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table-responsive:not(:has(tbody > tr:not([style*="none"])))::after {
        content: "\f52a";
        display: block;
        width: 4.25rem;
        height: 4.25rem;
        margin: 2.25rem auto;
        border-radius: 50%;
        font-family: "bootstrap-icons";
        font-size: 1.5rem;
        line-height: 4.25rem;
        text-align: center;
        color: var(--ns-gold-soft);
        background: radial-gradient(circle, rgba(10, 24, 48, 1) 0 60%, rgba(10, 24, 48, 0) 61%), var(--dk-brass);
        box-shadow: 0 0 0 6px rgba(243, 211, 138, 0.06), 0 10px 24px rgba(2, 6, 16, 0.5);
        opacity: 0.85;
    }
}

/* the key under the ledger */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .compatibility-panel > .border-top {
    border-top: 0 !important;
    position: relative;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .compatibility-panel > .border-top::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: var(--ns-hairline-gold);
    opacity: 0.7;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .legend-item {
    background: rgba(4, 10, 24, 0.35);
    border: 1px solid var(--ns-line);
    color: var(--ns-fg-dim);
    font-size: 0.84rem;
    padding: 0.55rem 0.95rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .legend-item .bi {
    font-size: 1rem;
    filter: drop-shadow(0 0 5px rgba(var(--dk-s-rgb), 0.45));
}

/* phones: editorial-pages.css makes every .btn full width below 576px, which squeezed the search
   field to a sliver; the ledger scrolls sideways, so a soft shadow shows there is more to the right */
@media (max-width: 575.98px) {
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .compatibility-search .btn {
        width: auto;
        flex: none;
    }
}

@media (max-width: 991.98px) {
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table-responsive {
        background:
            linear-gradient(90deg, rgba(8, 18, 38, 1) 30%, rgba(8, 18, 38, 0)) left center / 28px 100% no-repeat local,
            linear-gradient(270deg, rgba(8, 18, 38, 1) 30%, rgba(8, 18, 38, 0)) right center / 28px 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)) left center / 14px 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0)) right center / 14px 100% no-repeat scroll,
            rgba(8, 18, 38, 1);
    }
}

@media (max-width: 768px) {
    /* the page hides the status word here: the chip becomes a round signal lamp */
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table.games .compatibility-status-label {
        padding: 0.32rem;
        font-size: 0.95rem;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table.games .compatibility-status-label .bi {
        margin: 0 !important;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table.games > :not(caption) > * > * {
        padding: 0.65rem 0.7rem;
    }
}

/* ---------------------------------------------------------------- 2. a game's cabin (GameDetail) */

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page {
    color: var(--ns-fg);
}

/* hero */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .game-hero {
    padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.25rem, 4vw, 3rem);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .game-hero .row {
    row-gap: 1rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .game-hero .game-icon {
    /* inline-block: a broken image (alt text only) is an inline box that ignores width/height */
    display: inline-block;
    width: 180px;
    height: 180px;
    object-fit: cover;
    border-radius: 50% !important;
    padding: 7px;
    border: 0;
    /* an inner navy disc: a missing image leaves an empty porthole, not a brass coin. Its alt text
       (the game name, which is the H1 right beside it) would spill over the ring: screen readers still
       get it, the eye gets the empty porthole */
    background: radial-gradient(circle closest-side, #081226 0 calc(100% - 7px), rgba(8, 18, 38, 0) calc(100% - 6px)), var(--dk-brass);
    color: transparent;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(6, 13, 29, 0.7),
        0 0 0 9px rgba(243, 211, 138, 0.07),
        0 0 0 10px rgba(243, 211, 138, 0.2),
        0 22px 50px rgba(2, 6, 16, 0.6),
        0 0 60px rgba(231, 182, 75, 0.14) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .game-hero .game-icon:hover {
    box-shadow:
        0 0 0 1px rgba(6, 13, 29, 0.7),
        0 0 0 9px rgba(243, 211, 138, 0.1),
        0 0 0 10px rgba(243, 211, 138, 0.32),
        0 26px 56px rgba(2, 6, 16, 0.65),
        0 0 70px rgba(231, 182, 75, 0.22) !important;
}

@media (max-width: 991.98px) {
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .game-hero .game-icon {
        width: 148px;
        height: 148px;
    }
}

/* the nameplate */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page h1.game-title {
    font-family: var(--ns-serif);
    font-size: clamp(1.9rem, 1.35rem + 2.1vw, 3.05rem);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.005em;
    text-transform: none;
    color: var(--ns-heading);
    overflow-wrap: anywhere;
    margin-bottom: 0.9rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .hardware-badge {
    background: rgba(243, 211, 138, 0.1);
    color: var(--ns-gold-soft);
    border: 1px solid rgba(243, 211, 138, 0.38);
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    font-weight: 700;
    padding: 0.42rem 0.95rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .hardware-badge::before {
    content: "";
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ns-lime);
    box-shadow: 0 0 8px rgba(201, 255, 134, 0.8);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .game-description {
    color: var(--ns-fg-dim);
}

/* cards: one night surface, a colour-coded pennant per card */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page :is(.compatibility-card, .game-details-card, .setup-card, .issues-card, .features-card, .disclaimer-card) {
    --dk-pennant: var(--ns-gold);
    --dk-pennant-rgb: 231, 182, 75;
    border-radius: 20px;
    overflow: hidden;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .compatibility-card { --dk-pennant: var(--ns-cyan); --dk-pennant-rgb: 127, 233, 255; }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .game-details-card { --dk-pennant: var(--ns-gold-soft); --dk-pennant-rgb: 243, 211, 138; }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .setup-card { --dk-pennant: var(--ns-lime); --dk-pennant-rgb: 201, 255, 134; }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .issues-card { --dk-pennant: var(--ns-gold-soft); --dk-pennant-rgb: 243, 211, 138; }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .features-card { --dk-pennant: var(--ns-coral-soft); --dk-pennant-rgb: 255, 122, 107; }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .disclaimer-card { --dk-pennant: rgba(252, 247, 239, 0.7); --dk-pennant-rgb: 252, 247, 239; }

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .card-header:is(.bg-primary, .bg-info, .bg-success, .bg-warning, .bg-danger, .bg-dark) {
    background: linear-gradient(180deg, rgba(var(--dk-pennant-rgb), 0.09) 0%, rgba(var(--dk-pennant-rgb), 0.02) 100%) !important;
    color: var(--ns-heading) !important;
    border-bottom: 1px solid var(--ns-line) !important;
    box-shadow: inset 0 2px 0 var(--dk-pennant);
    padding: 1rem 1.35rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .card-header :is(h2, h3).h5 {
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.3;
    color: var(--ns-heading) !important;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .card-header :is(h2, h3).h5 > .bi {
    flex: none;
    margin: 0 !important;
    width: 2rem;
    height: 2rem;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    font-size: 0.95rem;
    color: var(--dk-pennant) !important;
    background: rgba(var(--dk-pennant-rgb), 0.12);
    border: 1px solid rgba(var(--dk-pennant-rgb), 0.4);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .card-body {
    color: var(--ns-fg);
    padding: 1.35rem;
}

/* GPU gauges */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page :is(.status-perfect, .status-great, .status-issues, .status-unplayable, .status-unknown) {
    --dk-s: var(--dk-unknown);
    --dk-s-rgb: var(--dk-unknown-rgb);
    background: radial-gradient(circle at 50% 30%, rgba(var(--dk-s-rgb), 0.16) 0%, rgba(var(--dk-s-rgb), 0.05) 70%);
    color: var(--dk-s);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .status-perfect { --dk-s: var(--dk-perfect); --dk-s-rgb: var(--dk-perfect-rgb); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .status-great { --dk-s: var(--dk-great); --dk-s-rgb: var(--dk-great-rgb); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .status-issues { --dk-s: var(--dk-issues); --dk-s-rgb: var(--dk-issues-rgb); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .status-unplayable { --dk-s: var(--dk-unplayable); --dk-s-rgb: var(--dk-unplayable-rgb); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .status-unknown { --dk-s: var(--dk-unknown); --dk-s-rgb: var(--dk-unknown-rgb); }

/* the lamp is drawn on the icon and the status word stands under it, as wide as the column: inside the
   88px disc (70px on phones) the word was set at 8-9px and broke mid-word ("DESCONOCID/O") */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .gpu-icon-container {
    width: auto;
    height: auto;
    gap: 0.6rem;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .gpu-icon-container i {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 1px solid rgba(var(--dk-s-rgb), 0.5);
    background: radial-gradient(circle at 50% 30%, rgba(var(--dk-s-rgb), 0.16) 0%, rgba(var(--dk-s-rgb), 0.05) 70%);
    box-shadow:
        0 0 0 5px rgba(4, 10, 24, 0.5),
        0 0 0 6px rgba(var(--dk-s-rgb), 0.18),
        0 12px 26px rgba(2, 6, 16, 0.5),
        inset 0 0 18px rgba(var(--dk-s-rgb), 0.12);
    color: var(--dk-s);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .gpu-icon-container i::before {
    filter: drop-shadow(0 0 6px rgba(var(--dk-s-rgb), 0.5));
}

/* whole words only: a two-word status ("Ei pelattavissa") may break at its space; the longest single word
   ("Неиграбельно", 80px) fits the 96px phone column */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .gpu-icon-container .status-text {
    margin-top: 0;
    max-width: 100%;
    color: var(--dk-s);
    font-size: 0.8rem;
    letter-spacing: 0.01em;
    text-transform: none;
    line-height: 1.25;
    overflow-wrap: normal;
    text-wrap: balance;
}

@media (max-width: 767.98px) {
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .gpu-icon-container i {
        width: 70px;
        height: 70px;
    }
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .compatibility-card h3.h6 {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ns-fg-dim);
    margin-top: 0.4rem !important; /* the vendor reads as the caption of the status word above it */
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .overall-status {
    padding-top: 1.25rem;
    border-top: 1px solid var(--ns-line);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .overall-status h3.h5 {
    font-size: var(--ns-fs-overline);
    font-weight: 700;
    letter-spacing: var(--ns-track-overline);
    text-transform: uppercase;
    color: var(--ns-accent-text);
}

/* the overall gauge */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .progress {
    height: 1.7rem;
    background: rgba(4, 10, 24, 0.55);
    border: 1px solid var(--ns-line);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
    padding: 2px;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .progress-bar {
    border-radius: var(--ns-radius-pill);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #06131f !important;
    overflow: visible;
    white-space: nowrap;
    /* a short fill (Unplayable is 10%) still carries its whole word; the trough clips everything past it */
    min-width: max-content;
    padding-inline: 0.9rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .progress-bar.bg-success { background: linear-gradient(90deg, #7fb84a 0%, #c9ff86 100%) !important; box-shadow: 0 0 14px rgba(201, 255, 134, 0.35); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .progress-bar.bg-info { background: linear-gradient(90deg, #3fa9c4 0%, #7fe9ff 100%) !important; box-shadow: 0 0 14px rgba(127, 233, 255, 0.3); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .progress-bar.bg-warning { background: linear-gradient(90deg, #c9912b 0%, #f3d38a 100%) !important; box-shadow: 0 0 14px rgba(243, 211, 138, 0.3); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .progress-bar.bg-danger { background: linear-gradient(90deg, #d9604f 0%, #ffb4a9 100%) !important; }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .progress-bar.bg-secondary { background: linear-gradient(90deg, #8a93a3 0%, #c9ced8 100%) !important; }

/* no reading yet (Unknown is 0%): no fill, the word stands in the middle of the empty trough (it was a
   0px bar with its word clipped away, an empty gauge that read as broken) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .progress-bar[aria-valuenow="0"] {
    flex-grow: 1;
    background: none !important;
    box-shadow: none;
    color: var(--dk-unknown) !important;
}

/* the spec sheet */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .detail-item {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px dashed var(--ns-line-strong);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .detail-label {
    color: var(--ns-fg-mute);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    font-weight: 700;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .detail-value {
    color: var(--ns-heading);
    font-size: 1.02rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .status-badge {
    background: rgba(var(--dk-s-rgb), 0.1);
    border: 1px solid rgba(var(--dk-s-rgb), 0.42);
    color: var(--dk-s);
    box-shadow: none;
    font-size: 0.86rem;
    padding: 0.36rem 0.9rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .status-badge::before {
    content: "";
    width: 7px;
    height: 7px;
    margin-inline-end: 0.5rem;
    border-radius: 50%;
    background: var(--dk-s);
    box-shadow: 0 0 8px rgba(var(--dk-s-rgb), 0.8);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .game-details-card .badge {
    font-size: 0.8rem;
    padding: 0.38rem 0.8rem;
}

/* the multiplayer chip and the status badge are one height on one line, so the dashed rules under the two
   columns line up (the badge was 7px shorter) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .game-details-card .detail-value > :is(.badge, .status-badge) {
    padding-block: 0.36rem;
    font-size: 0.84rem;
    line-height: 1.2;
    vertical-align: middle;
}

/* the multiplayer mode is a kind, not a compatibility status: lime, amber, coral and the dot are kept for
   the status vocabulary (list and detail alike), so the mode is a quiet chip like the list's system chip,
   and single player only is its dashed variant ("Unknown" is a mode the view paints bg-success) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .game-details-card .detail-value > .badge:is(.bg-success, .bg-secondary) {
    background: rgba(252, 247, 239, 0.05) !important;
    border: 1px solid var(--ns-line-strong);
    color: var(--ns-fg) !important;
    font-weight: 600;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .game-details-card .detail-value > .badge.bg-secondary {
    border-style: dashed;
    color: var(--ns-fg-dim) !important;
}

/* accordions on the dark cards */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .accordion-item {
    background: rgba(4, 10, 24, 0.32);
    border: 1px solid var(--ns-line);
    border-radius: 14px !important;
    margin-bottom: 0.7rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .accordion-item:last-child {
    margin-bottom: 0;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .accordion-button {
    background: transparent;
    color: var(--ns-heading);
    font-weight: 700;
    padding: 0.95rem 1.15rem;
    line-height: 1.4;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .accordion-button:hover {
    background: rgba(243, 211, 138, 0.06);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .accordion-button:not(.collapsed) {
    background: rgba(243, 211, 138, 0.08);
    color: var(--ns-accent-text);
    box-shadow: inset 0 -1px 0 var(--ns-line) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .accordion-button:focus {
    box-shadow: none !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .accordion-button:focus-visible {
    outline: 2px solid var(--ns-focus);
    outline-offset: -3px;
    border-radius: 14px;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .accordion-body {
    background: transparent;
    color: var(--ns-fg);
    line-height: 1.7;
    overflow-wrap: anywhere;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .accordion-body :is(p, li, ul, ol) {
    color: inherit;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .accordion-body > p:last-child {
    margin-bottom: 0;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .accordion-body :is(ul, ol) {
    padding-inline-start: 1.25rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .accordion-body li::marker {
    color: var(--ns-gold);
}

/* setup: the same night card as its neighbours (it was the one cream sheet in a dark grid), a lime
   pennant for "how to get it running" */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .setup-card .accordion-body li::marker {
    color: var(--ns-lime);
}

/* issues / features / empty states */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .features-list li {
    color: var(--ns-fg);
    padding-bottom: 0.6rem;
    border-bottom: 1px dashed var(--ns-line);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .features-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .features-list li i {
    color: var(--ns-coral-soft);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .card-body > .alert {
    margin-bottom: 0;
    border-radius: 14px;
    display: flex;
    align-items: baseline;
    gap: 0.1rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .alert-info { color: var(--ns-fg); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .alert-info .bi { color: var(--ns-info); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .alert-success { color: var(--ns-fg); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .alert-success .bi { color: var(--ns-ok); }

/* the disclaimer: small print at the foot of the cabin */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .disclaimer-card {
    border-inline-start: 1px solid var(--ns-line) !important;
    background: rgba(4, 10, 24, 0.35) !important;
    box-shadow: none !important;
    font-size: 0.92rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .disclaimer-card .card-header.bg-dark {
    background: transparent !important;
    box-shadow: none;
    border-bottom: 1px dashed var(--ns-line) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .disclaimer-card .card-header h2.h5 {
    font-size: var(--ns-fs-overline);
    letter-spacing: var(--ns-track-overline);
    text-transform: uppercase;
    color: var(--ns-fg-dim) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .disclaimer-card .card-header h2.h5 > .bi {
    width: 1.6rem;
    height: 1.6rem;
    font-size: 0.8rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .disclaimer-card .card-body {
    color: var(--ns-fg-dim);
    padding-block: 1rem 1.15rem;
}

/* ---------------------------------------------------------------- 3. Arabic / Hebrew: no tracking is one global rule in the base
   (nation-site.css, section 14); only the sizes are set here */

/* Arabic script at overline sizes is unreadable: a step up */
:root:is(:lang(ar), :lang(he), :lang(fa)) .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page :is(.detail-label, .overall-status h3.h5, .disclaimer-card .card-header h2.h5) {
    font-size: 0.86rem;
}

:root:is(:lang(ar), :lang(he), :lang(fa)) .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .gpu-icon-container .status-text {
    font-size: 0.9rem;
}

/* the gauge's word matches none of the base rule's patterns: its tracking and capitals go here */
:root:is(:lang(ar), :lang(he), :lang(fa)) .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-detail-page .progress-bar {
    font-size: 0.86rem;
    letter-spacing: 0;
    text-transform: none;
}

:root:is(:lang(ar), :lang(he), :lang(fa)) .tpn-place:not(.tpn-place--passport) ~ .main-container .compatibility-page .table.games thead th {
    font-size: 0.86rem;
}

/* ---------------------------------------------------------------- 4. motion */

@media (prefers-reduced-motion: reduce) {
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.compatibility-page, .compatibility-detail-page) :is(td, th, .game-icon) {
        transition: none;
    }
}

/* ==================================================================== lighthouse.css */

/* ==========================================================================
   TeknoParrot Nation site theme: the Lighthouse (and the harbor's notice boards)
   Pages: /{culture}/Home/Download, /{culture}/Home/Live (Radio Room), /{culture}/Home/Policies, the error page
   Imported at the top of nation-site.css (so the base rules come later in the
   cascade: out-specify them, don't repeat them). Loaded only while
   Citizen:PublicUi is on. Read SYSTEM.md (tokens, scope prefixes, recipes)
   before adding rules. House rules, in short:
   - scope every rule under the content prefix plus your page class, e.g.
       :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page ...
     (page chrome: :root body.editorial-page-active:not(.admin-page) ...);
   - use the --ns-* tokens; never define or change a --tp-* property;
   - never touch .price, [data-tier], .btn-gradient, .paddle-checkout-btn or
     anything inside the pricing block (.subscription-container);
   - on script-driven elements (INVENTORY 4.6) colour, type, border, radius and
     shadow only: no display, position, order, visibility, transform;
   - body text 4.5:1 or better, visible :focus-visible, rtl-safe (logical
     properties), no web fonts, no external URLs, no z-index above 1039.

   What lives here
   A. Download = the Lighthouse: the stable installer is the lamp room (a lamp
      and two soft beams behind the heading, one gold CTA); the experimental UI 2.0
      is a night signal panel (cyan), its platform cards are dark glass tiles
      that keep their platform colour; the recommended runtimes are supply crates.
   B. Live = the Radio Room: an on-air overline, the commit log as received
      telegrams (call-sign repo tag, mono time stamp, dashed tear line), premium
      commits in gold foil, the contributors as the crew roster (top three
      ranked in gold, silver, bronze); at the end the development stream, or,
      once the channel's stream is known, that stream behind a click-to-load
      poster with its on-air tag and the way to YouTube (NationLatestStream).
   C. Policies = the harbor master's notice: a cream paper sheet pinned with two
      brass tacks, serif title, the four documents as navy stubs.
   D. Error = a storm signal: a dark panel with a coral lantern.
   C and D share the harbor place; they are told apart with :has() (progressive:
   without it they keep the base dark styling).
   ========================================================================== */

/* ================================================================ A. Download: the Lighthouse */

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page {
    --lh-beam: rgba(243, 211, 138, 0.13);
    padding-top: 0;
}

/* ---- the lamp room (stable installer) */

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-stable {
    border-color: rgba(243, 211, 138, 0.2);
    background:
        /* the sea below the lamp: faint moving-water lines along the bottom */
        repeating-linear-gradient(180deg, rgba(127, 233, 255, 0.022) 0 1px, rgba(127, 233, 255, 0) 1px 11px) left bottom / 100% 14% no-repeat,
        repeating-linear-gradient(180deg, rgba(127, 233, 255, 0.016) 0 1px, rgba(127, 233, 255, 0) 1px 11px) left bottom / 100% 26% no-repeat,
        repeating-linear-gradient(180deg, rgba(127, 233, 255, 0.012) 0 1px, rgba(127, 233, 255, 0) 1px 11px) left bottom / 100% 38% no-repeat,
        linear-gradient(0deg, rgba(127, 233, 255, 0.05) 0%, rgba(127, 233, 255, 0) 34%),
        radial-gradient(70% 55% at 50% 0%, rgba(42, 35, 82, 0.55) 0%, rgba(42, 35, 82, 0) 70%),
        linear-gradient(180deg, rgba(19, 36, 68, 0.9) 0%, rgba(10, 24, 48, 0.92) 100%);
    box-shadow: var(--ns-shadow), inset 0 1px 0 rgba(243, 211, 138, 0.14);
    padding-top: clamp(3rem, 7vw, 5.25rem);
    padding-bottom: clamp(2.5rem, 5vw, 3.75rem);
}

/* two soft beams leaving the lamp, fading out with distance */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-stable::before {
    inset: 0;
    top: 0;
    right: auto;
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: conic-gradient(from 0deg at 50% 3.5rem,
        rgba(243, 211, 138, 0) 0deg 76deg,
        var(--lh-beam) 85deg, rgba(248, 222, 160, 0.24) 90deg, var(--lh-beam) 95deg,
        rgba(243, 211, 138, 0) 104deg 256deg,
        var(--lh-beam) 265deg, rgba(248, 222, 160, 0.24) 270deg, var(--lh-beam) 275deg,
        rgba(243, 211, 138, 0) 284deg 360deg);
    -webkit-mask-image: radial-gradient(60% 120% at 50% 3.5rem, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
    mask-image: radial-gradient(60% 120% at 50% 3.5rem, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 100%);
}

/* the lamp itself, just above the badge */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-stable::after {
    top: calc(3.5rem - 7rem);
    bottom: auto;
    left: calc(50% - 7rem);
    width: 14rem;
    height: 14rem;
    background: radial-gradient(circle, rgba(255, 246, 220, 0.85) 0%, rgba(255, 226, 150, 0.45) 5%, rgba(243, 211, 138, 0.14) 30%, rgba(243, 211, 138, 0) 66%);
    animation: lh-lamp 6s ease-in-out infinite alternate;
}

@keyframes lh-lamp {
    from { opacity: 0.75; }
    to { opacity: 1; }
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-stable-badge {
    border: 1px solid rgba(243, 211, 138, 0.42);
    background: rgba(8, 16, 34, 0.72);
    box-shadow: 0 0 0 4px rgba(243, 211, 138, 0.06), 0 8px 22px rgba(2, 6, 16, 0.35);
    color: var(--ns-gold-soft);
    font-size: var(--ns-fs-overline);
    letter-spacing: 0.2em;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-stable-badge i {
    color: var(--ns-lime);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-stable h1 {
    max-width: 16ch;
    margin-top: 1.4rem;
    font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.015em;
    text-shadow: 0 2px 30px rgba(4, 9, 21, 0.6);
}

/* "here." in gold foil */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-stable h1 span {
    color: var(--ns-gold-soft);
    font-weight: 800;
    background: linear-gradient(180deg, #fbe7b4 0%, #f3d38a 45%, #e7b64b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-stable-description {
    color: var(--ns-fg-dim);
    max-width: 58ch;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-primary-cta {
    margin-top: 2.25rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-stable .download-stable-button {
    padding: 1.05rem 1.9rem !important;
    border: 1px solid rgba(251, 231, 180, 0.95) !important;
    background: var(--ns-accent-fill) !important;
    color: var(--ns-on-accent) !important;
    box-shadow: 0 0 0 6px rgba(243, 211, 138, 0.08), 0 16px 44px rgba(231, 182, 75, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    font-size: 1.02rem;
    letter-spacing: 0.02em;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-stable .download-stable-button:is(:hover, :focus-visible) {
    background: linear-gradient(180deg, #fde9b3 0%, #eec060 100%) !important;
    border-color: #fde9b3 !important;
    color: var(--ns-on-accent) !important;
    box-shadow: 0 0 0 8px rgba(243, 211, 138, 0.12), 0 20px 52px rgba(231, 182, 75, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-stable .download-stable-button:focus-visible {
    outline: 2px solid var(--ns-ivory);
    outline-offset: 4px;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-stable-highlights {
    gap: 0.6rem 0.75rem;
    margin-top: 1.6rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-stable-highlights span {
    padding: 0.42rem 0.85rem;
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-pill);
    background: rgba(4, 10, 24, 0.35);
    color: var(--ns-fg-dim);
    font-size: 0.84rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-stable-highlights span:first-child i { color: var(--ns-lime); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-stable-highlights span:last-child i { color: var(--ns-gold-soft); }

/* ---- the signal panel (experimental UI 2.0): was an ivory surface */

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-experimental {
    max-width: 1080px;
    margin-top: clamp(1.25rem, 3vw, 2.25rem);
    border: 1px solid rgba(127, 233, 255, 0.2);
    background:
        linear-gradient(180deg, rgba(14, 30, 58, 0.88) 0%, rgba(7, 16, 34, 0.94) 100%);
    box-shadow: var(--ns-shadow), inset 0 1px 0 rgba(127, 233, 255, 0.12);
    color: var(--ns-fg);
}

/* a cool and a warm light instead of the gold-on-ivory glows */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-experimental::before {
    background: radial-gradient(circle, rgba(255, 143, 230, 0.12) 0%, rgba(255, 143, 230, 0) 70%);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-experimental::after {
    background: radial-gradient(circle, rgba(127, 233, 255, 0.12) 0%, rgba(127, 233, 255, 0) 70%);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-experimental-badge {
    border: 1px solid rgba(127, 233, 255, 0.42);
    background: rgba(127, 233, 255, 0.08);
    color: var(--ns-cyan);
    font-size: var(--ns-fs-overline);
    letter-spacing: 0.2em;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-experimental-badge i {
    color: var(--ns-magenta);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-experimental-header h2 {
    color: var(--ns-heading);
    font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
    font-weight: 800;
    letter-spacing: -0.015em;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-experimental-header h2 span {
    color: var(--ns-cyan);
    font-weight: 800;
    text-shadow: 0 0 24px rgba(127, 233, 255, 0.35);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-experimental-header p {
    color: var(--ns-fg-dim);
}

/* platform tiles: dark glass that keeps each platform's colour (lightened for the night) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-windows { --platform-accent: 110 190 255; }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-linux { --platform-accent: 255 150 108; }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-android { --platform-accent: 132 224 150; }

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card {
    min-height: 272px;
    border: 1px solid rgb(var(--platform-accent) / 0.22);
    background:
        radial-gradient(90% 60% at 50% 0%, rgb(var(--platform-accent) / 0.1) 0%, rgb(var(--platform-accent) / 0) 70%),
        linear-gradient(180deg, rgba(22, 40, 72, 0.72) 0%, rgba(9, 20, 42, 0.82) 100%);
    box-shadow: var(--ns-shadow-sm), inset 0 1px 0 rgba(252, 247, 239, 0.05);
    color: var(--ns-fg);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card::before {
    height: 2px;
    opacity: 0.9;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card:is(:hover, :focus-visible) {
    border-color: rgb(var(--platform-accent) / 0.55);
    background:
        radial-gradient(90% 60% at 50% 0%, rgb(var(--platform-accent) / 0.16) 0%, rgb(var(--platform-accent) / 0) 70%),
        linear-gradient(180deg, rgba(26, 46, 82, 0.8) 0%, rgba(11, 24, 48, 0.88) 100%);
    box-shadow: 0 22px 46px rgba(2, 6, 16, 0.5), 0 0 34px rgb(var(--platform-accent) / 0.14);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card:focus-visible {
    outline: 2px solid var(--ns-focus);
    outline-offset: 3px;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card .download-platform-icon {
    width: 96px;
    height: 96px;
    border: 1px solid rgb(var(--platform-accent) / 0.34);
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 35%, rgb(var(--platform-accent) / 0.22) 0%, rgb(var(--platform-accent) / 0.06) 70%),
        rgba(4, 10, 24, 0.5);
    box-shadow: inset 0 1px 0 rgba(252, 247, 239, 0.1), 0 14px 30px rgba(2, 6, 16, 0.4), 0 0 26px rgb(var(--platform-accent) / 0.16);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card:hover .download-platform-icon {
    box-shadow: inset 0 1px 0 rgba(252, 247, 239, 0.14), 0 18px 36px rgba(2, 6, 16, 0.45), 0 0 34px rgb(var(--platform-accent) / 0.28);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card .download-platform-icon i {
    font-size: 3.3rem;
    filter: drop-shadow(0 0 12px rgb(var(--platform-accent) / 0.35));
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card strong {
    color: var(--ns-heading);
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: 0.01em;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card .download-platform-copy {
    color: var(--ns-fg-mute);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card .download-platform-cta {
    margin-top: 1.1rem;
    padding: 0.5rem 0.95rem;
    border: 1px solid rgb(var(--platform-accent) / 0.4);
    border-radius: var(--ns-radius-pill);
    background: rgb(var(--platform-accent) / 0.08);
    font-size: 0.74rem;
    letter-spacing: 0.16em;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card:is(:hover, :focus-visible) .download-platform-cta {
    background: rgb(var(--platform-accent) / 0.16);
    border-color: rgb(var(--platform-accent) / 0.7);
}

/* ---- supply crates (recommended runtimes) */

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-extras:not(.download-experimental) {
    max-width: 1080px;
    margin-top: clamp(2.25rem, 5vw, 3.5rem);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-extras-title {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.1rem;
    color: var(--ns-accent-text);
    font-size: var(--ns-fs-overline);
    font-weight: 700;
    letter-spacing: var(--ns-track-overline);
    line-height: 1.4;
    text-transform: uppercase;
}

/* site.css hides every h1-h3 ::before/::after with !important: these rules are ours */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-extras-title::after {
    content: "";
    display: block !important;
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(243, 211, 138, 0.45), rgba(243, 211, 138, 0));
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-extras:not(.download-experimental) .download-link-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    align-items: center;
    padding-block: 1.15rem;
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius);
    background: var(--ns-panel);
    box-shadow: var(--ns-shadow-sm), inset 0 1px 0 var(--ns-tint-2);
    color: var(--ns-fg);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-extras:not(.download-experimental) .download-link-card > i {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin: 0;
    border: 1px solid var(--ns-line-gold);
    border-radius: 12px;
    background: rgba(243, 211, 138, 0.08);
    color: var(--ns-gold-soft);
    font-size: 1.3rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-extras:not(.download-experimental) .download-link-card strong {
    margin: 0;
    color: var(--ns-heading);
    font-weight: 700;
    line-height: 1.35;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-extras:not(.download-experimental) .download-link-card span {
    color: var(--ns-fg-mute);
    font-size: 0.88rem;
}

/* an "opens elsewhere" arrow in the far corner (Bootstrap Icons glyph, self-hosted font) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-extras:not(.download-experimental) .download-link-card::after {
    content: "\f144";
    position: absolute;
    top: 1rem;
    inset-inline-end: 1.1rem;
    font-family: "bootstrap-icons";
    font-size: 0.95rem;
    line-height: 1;
    color: var(--ns-fg-mute);
    transition: color 0.2s ease;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-extras:not(.download-experimental) .download-link-card:is(:hover, :focus-visible) {
    border-color: var(--ns-line-gold);
    background: linear-gradient(180deg, rgba(31, 50, 84, 0.8) 0%, rgba(14, 30, 56, 0.86) 100%);
    box-shadow: var(--ns-shadow-sm), 0 0 0 1px rgba(243, 211, 138, 0.1);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-extras:not(.download-experimental) .download-link-card:is(:hover, :focus-visible)::after {
    color: var(--ns-gold-soft);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-extras:not(.download-experimental) .download-link-card:focus-visible {
    outline: 2px solid var(--ns-focus);
    outline-offset: 3px;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-extras:not(.download-experimental) .download-link-card {
    padding-inline: 1.15rem 3rem;
}

/* Arabic / Hebrew: a step up in size (no tracking: the global rule in the base, section 14) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-extras-title:is(:lang(ar), :lang(he)) {
    font-size: 0.85rem;
}

@media (max-width: 991.98px) {
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card {
        min-height: 0;
        padding: 1.5rem 1rem;
    }
}

/* tablets: the three platforms stay side by side, the two crates too */
@media (min-width: 640px) and (max-width: 991.98px) {
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.85rem;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card {
        justify-content: flex-start;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card .download-platform-cta {
        margin-top: auto;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card .download-platform-copy {
        margin-bottom: 1rem;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card .download-platform-icon {
        width: 76px;
        height: 76px;
        margin-bottom: 1rem;
        border-radius: 22px;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card .download-platform-icon i {
        font-size: 2.6rem;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card .download-platform-cta {
        padding-inline: 0.75rem;
        letter-spacing: 0.12em;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-extras:not(.download-experimental) .download-support-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-stable {
        padding-inline: 1.1rem;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-stable .download-stable-button {
        padding-inline: 1.1rem !important;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-stable-highlights span {
        font-size: 0.8rem;
    }
}

@media (max-width: 639.98px) {
    /* platform tiles become rows on phones: icon, name and link side by side */
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 1rem;
        align-items: center;
        justify-items: start;
        padding: 1rem 1.1rem;
        text-align: start;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card .download-platform-icon {
        grid-row: 1 / span 3;
        width: 64px;
        height: 64px;
        margin: 0;
        border-radius: 18px;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card .download-platform-icon i {
        font-size: 2.1rem;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card strong {
        font-size: 1.15rem;
        margin-bottom: 0.1rem;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card .download-platform-cta {
        margin-top: 0.6rem;
        padding: 0.38rem 0.75rem;
    }
}

/* ================================================================ B. Live: the Radio Room */

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section {
    padding: clamp(0.5rem, 2vw, 1.5rem) 0 clamp(3rem, 6vw, 5rem);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .dev-overline,
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .live-section .live-overline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin-bottom: 0.9rem;
    color: var(--ns-accent-text);
    font-size: var(--ns-fs-overline);
    font-weight: 700;
    letter-spacing: var(--ns-track-overline);
    text-transform: uppercase;
}

/* on air: a signal lamp that slowly breathes (opacity only: an animated box-shadow ring repainted every frame) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .dev-overline::before,
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .live-section .live-overline::before {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ns-lime);
    box-shadow: 0 0 0 3px rgba(201, 255, 134, 0.16), 0 0 10px rgba(201, 255, 134, 0.7);
    animation: lh-on-air 2.6s ease-in-out infinite;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .live-section .live-overline::before {
    background: var(--ns-coral);
    box-shadow: 0 0 0 3px rgba(255, 122, 107, 0.16), 0 0 10px rgba(255, 122, 107, 0.7);
}

@keyframes lh-on-air {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

/* the headings (#commit-history-heading is rewritten by the page script: type and colour only) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .dev-heading,
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .live-section .live-heading {
    margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--ns-heading);
    font-size: var(--ns-fs-h2);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.005em;
    text-transform: uppercase;
}

/* a short foil rule under each heading */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .dev-heading::after,
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .live-section .live-heading::after {
    content: "";
    display: block !important;
    width: 4.5rem;
    height: 1px;
    margin: 0.95rem auto 0;
    background: linear-gradient(90deg, rgba(243, 211, 138, 0), rgba(243, 211, 138, 0.8), rgba(243, 211, 138, 0));
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .contributors-grid {
    margin-bottom: 0;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .commits-timeline {
    margin-bottom: clamp(3rem, 7vw, 5rem);
}

/* loading / empty states */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .spinner-border {
    color: var(--ns-gold-soft) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .text-white-50 {
    color: var(--ns-fg-mute) !important;
    letter-spacing: 0.04em;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section :is(#commits-container, #contributors-container) > p.text-muted {
    padding: 2rem 1rem;
    border: 1px dashed var(--ns-line-strong);
    border-radius: var(--ns-radius);
    background: var(--ns-tint-1);
    text-align: center;
}

/* ---- the telegrams (commit cards, rendered by the page script into #commits-container) */

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .commit-card {
    height: 100%;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.15rem 0.9rem;
    border: 1px solid var(--ns-line);
    border-radius: 14px;
    background: var(--ns-panel);
    box-shadow: var(--ns-shadow-sm), inset 0 1px 0 var(--ns-tint-2);
    color: var(--ns-fg);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .commit-card:hover {
    border-color: rgba(127, 233, 255, 0.3);
    background: var(--ns-panel);
    box-shadow: var(--ns-shadow-sm), inset 0 1px 0 var(--ns-tint-2), inset 2px 0 0 rgba(127, 233, 255, 0.55);
}

/* the header strip, torn off with a dashed line */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .commit-header {
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px dashed var(--ns-line-strong);
}

/* the repository as a call sign */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .commit-repo {
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.32em 0.65em;
    border: 1px solid rgba(127, 233, 255, 0.3);
    border-radius: 6px;
    background: rgba(127, 233, 255, 0.08) !important;
    color: var(--ns-cyan) !important;
    font-family: var(--ns-mono);
    font-size: 0.72rem !important;
    /* 500, not 600: bold Consolas at 11.5px fills the 'm' in at 1x DPR on Windows */
    font-weight: 500;
    letter-spacing: 0.02em;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .commit-time {
    flex: none;
    color: var(--ns-fg-mute);
    font-family: var(--ns-mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .commit-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .commit-message {
    align-self: stretch;
    color: var(--ns-fg);
    font-size: 0.92rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* the first line reads as the subject (colour only: a heavier first line is not re-measured
   by the line breaker, and long unbroken identifiers would then overflow the card) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .commit-message::first-line {
    color: var(--ns-heading);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .commit-body > .mt-2 {
    align-self: stretch;
    margin-top: auto !important;
    padding-top: 0.75rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .commit-author {
    color: var(--ns-fg-mute);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

/* premium transmissions: gold foil */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .commit-card.premium-commit {
    border: 1px solid rgba(243, 211, 138, 0.38);
    border-inline-start: 3px solid var(--ns-gold);
    background:
        linear-gradient(135deg, rgba(243, 211, 138, 0.13) 0%, rgba(243, 211, 138, 0.03) 60%),
        var(--ns-panel);
    box-shadow: var(--ns-shadow-sm), 0 0 30px rgba(231, 182, 75, 0.1);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .commit-card.premium-commit:hover {
    border-color: rgba(243, 211, 138, 0.6);
    border-inline-start-color: var(--ns-gold-soft);
    background:
        linear-gradient(135deg, rgba(243, 211, 138, 0.17) 0%, rgba(243, 211, 138, 0.05) 60%),
        var(--ns-panel);
    box-shadow: var(--ns-shadow-sm), 0 0 36px rgba(231, 182, 75, 0.16);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .commit-card.premium-commit .commit-header {
    border-bottom-color: rgba(243, 211, 138, 0.35);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .commit-card.premium-commit .commit-message {
    color: var(--ns-ivory);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .commit-card.premium-commit :is(.commit-author, .commit-time) {
    color: rgba(243, 211, 138, 0.85);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .premium-badge {
    padding: 0.26rem 0.65rem;
    border: 1px solid rgba(251, 231, 180, 0.9);
    background: var(--ns-accent-fill);
    color: var(--ns-on-accent);
    box-shadow: 0 4px 16px rgba(231, 182, 75, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    margin-bottom: 0.6rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .premium-badge i {
    color: var(--ns-on-accent);
}

/* ---- the crew roster (contributors) */

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .contributor-card {
    padding: 1.2rem 1.25rem 1.15rem;
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius);
    background: var(--ns-panel);
    box-shadow: var(--ns-shadow-sm), inset 0 1px 0 var(--ns-tint-2);
    color: var(--ns-fg);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .contributor-card:hover {
    border-color: var(--ns-line-gold);
    background: var(--ns-panel);
    box-shadow: var(--ns-shadow-sm), inset 0 1px 0 var(--ns-tint-2), 0 0 0 1px rgba(243, 211, 138, 0.08);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .contributor-rank {
    min-width: 2.6rem;
    padding: 0.22rem 0.6rem;
    border: 1px solid var(--ns-line-strong);
    background: var(--ns-tint-2);
    color: var(--ns-fg-dim);
    font-family: var(--ns-mono);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* the top three: gold, silver, bronze */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section #contributors-container > .row > :nth-child(1) .contributor-rank {
    border-color: rgba(251, 231, 180, 0.9);
    background: var(--ns-accent-fill);
    color: var(--ns-on-accent);
    box-shadow: 0 4px 16px rgba(231, 182, 75, 0.3);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section #contributors-container > .row > :nth-child(2) .contributor-rank {
    border-color: rgba(226, 232, 240, 0.8);
    background: linear-gradient(180deg, #eef2f7 0%, #b9c3d1 100%);
    color: #0b1b33;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section #contributors-container > .row > :nth-child(3) .contributor-rank {
    border-color: rgba(240, 190, 150, 0.8);
    background: linear-gradient(180deg, #f2c9a2 0%, #c98a58 100%);
    color: #2a1405;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section #contributors-container > .row > :nth-child(1) .contributor-card {
    border-color: rgba(243, 211, 138, 0.4);
    background:
        radial-gradient(80% 90% at 100% 0%, rgba(243, 211, 138, 0.12) 0%, rgba(243, 211, 138, 0) 70%),
        var(--ns-panel);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .contributor-name {
    margin-top: 0.8rem;
    color: var(--ns-heading);
    font-family: var(--ns-serif);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .contributor-meta {
    color: var(--ns-fg-dim);
    font-size: 0.84rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .contributor-repositories {
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px dashed var(--ns-line);
    color: var(--ns-fg-mute);
    font-family: var(--ns-mono);
    font-size: 0.72rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* ---- the development stream (only when a stream is set) */

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .live-section {
    padding: clamp(3rem, 6vw, 4.5rem) 0;
    border-top: 1px solid var(--ns-line);
    border-bottom: 0;
    background:
        radial-gradient(60% 70% at 50% 0%, rgba(42, 35, 82, 0.4) 0%, rgba(42, 35, 82, 0) 70%);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .live-section .live-player {
    border: 1px solid rgba(243, 211, 138, 0.35);
    border-radius: 18px;
    background: #02050d;
    box-shadow: var(--ns-shadow), 0 0 0 6px rgba(243, 211, 138, 0.05);
}

/* ---- the channel's own stream (NationLatestStream: the live stream, else the latest one, in place of the set player).
   The poster (.tpn-player, nation.css) fills the player's 16:9 box until the visitor's click loads YouTube's player;
   under it, one line: on air or the latest stream, and the way to YouTube. */

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .tpn-radio-stream .tpn-radio-stream__stage {
    max-width: 900px;
    margin: 0 auto;
}

/* the latest stream is not on air: the overline's lamp rests, unlit */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .tpn-radio-stream--latest .live-overline::before {
    background: var(--ns-fg-mute);
    box-shadow: none;
    animation: none;
}

/* the poster is a link: it keeps the player's ivory, not the page's link colour */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .tpn-radio-stream a.tpn-player,
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .tpn-radio-stream a.tpn-player:hover {
    color: var(--ns-ivory);
    text-decoration: none;
}

/* the player's frame clips anything outside the poster: its focus ring is drawn inside */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .tpn-radio-stream a.tpn-player:focus-visible {
    outline: 3px solid var(--ns-focus);
    outline-offset: -7px;
    border-radius: 17px;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .tpn-radio-stream .tpn-radio-stream__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    margin: 1.1rem 0 0;
    padding-inline: 0.25rem;
}

/* the state tag: a coral lamp that breathes while on air; a quiet tag for the latest stream */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .tpn-radio-stream .tpn-radio-stream__state {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--ns-line-strong);
    border-radius: var(--ns-radius-pill);
    background: var(--ns-tint-1);
    color: var(--ns-fg-dim);
    font-size: var(--ns-fs-overline);
    font-weight: 700;
    letter-spacing: var(--ns-track-overline);
    line-height: 1.2;
    text-transform: uppercase;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .tpn-radio-stream .tpn-radio-stream__state--live {
    border-color: rgba(255, 122, 107, 0.5);
    background: rgba(255, 122, 107, 0.1);
    color: var(--ns-coral-soft);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .tpn-radio-stream .tpn-radio-stream__lamp {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ns-coral);
    box-shadow: 0 0 0 3px rgba(255, 122, 107, 0.16), 0 0 10px rgba(255, 122, 107, 0.7);
    animation: lh-on-air 2.6s ease-in-out infinite;
}

/* nation.js marks the stage off screen: the lamp rests with the player's broadcast rings */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .tpn-radio-stream .tpn-offscreen .tpn-radio-stream__lamp {
    animation-play-state: paused;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .tpn-radio-stream .tpn-radio-stream__watch {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--ns-gold-soft);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(243, 211, 138, 0.45);
    text-underline-offset: 4px;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .tpn-radio-stream .tpn-radio-stream__watch:hover {
    color: var(--ns-ivory);
    text-decoration-color: currentColor;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .tpn-radio-stream .tpn-radio-stream__watch:focus-visible {
    border-radius: 4px;
    outline: 2px solid var(--ns-focus);
    outline-offset: 3px;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .tpn-radio-stream .tpn-radio-stream__watch svg {
    flex: none;
    width: 0.95em;
    height: 0.95em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* the right-to-left pages: the arrow points the way the line reads */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .tpn-radio-stream[dir="rtl"] .tpn-radio-stream__watch svg {
    transform: scaleX(-1);
}

/* Arabic / Hebrew: a step up in size (no tracking: the global rule in the base, section 14) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .dev-overline:is(:lang(ar), :lang(he)),
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .live-section .live-overline:is(:lang(ar), :lang(he)),
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .tpn-radio-stream .tpn-radio-stream__state:is(:lang(ar), :lang(he)) {
    font-size: 0.82rem;
}

@media (max-width: 575.98px) {
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .commit-card {
        padding: 0.9rem 0.95rem 0.8rem;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .commit-repo {
        max-width: 62%;
    }
}

/* ================================================================ C. Policies: the harbor master's notice (paper) */

@supports selector(:has(*)) {
    :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> .container > .alert-info) {
        /* the paper recipe (SYSTEM.md 5): every base component inside follows */
        --ns-fg: var(--ns-paper-fg); --ns-fg-dim: var(--ns-paper-fg-dim); --ns-fg-mute: var(--ns-paper-fg-mute);
        --ns-heading: var(--ns-paper-heading); --ns-link: var(--ns-paper-link); --ns-link-hover: var(--ns-paper-link-hover);
        --ns-accent-text: var(--ns-paper-accent-text); --ns-ok: var(--ns-paper-ok); --ns-warn: var(--ns-paper-warn);
        --ns-bad: var(--ns-paper-bad); --ns-info: var(--ns-paper-info);
        --ns-line: var(--ns-paper-line); --ns-line-strong: var(--ns-paper-line-strong); --ns-line-gold: var(--ns-paper-line-gold);
        --ns-tint-1: var(--ns-paper-tint-1); --ns-tint-2: var(--ns-paper-tint-2); --ns-tint-3: var(--ns-paper-tint-3);
        --ns-panel: var(--ns-paper-panel); --ns-panel-2: var(--ns-paper-tint-1);
        --ns-field: var(--ns-paper-field); --ns-field-line: var(--ns-paper-field-line); --ns-field-fg: var(--ns-paper-heading);
        --ns-placeholder: var(--ns-paper-placeholder); --ns-focus: var(--ns-paper-focus);
        --ns-focus-ring: 0 0 0 3px rgba(29, 79, 134, 0.3);
        --ns-thead-bg: var(--ns-paper-thead-bg); --ns-thead-fg: var(--ns-paper-thead-fg);
        --ns-select-arrow: var(--ns-paper-select-arrow); --ns-chevron: var(--ns-paper-chevron);
        --ns-chevron-active: var(--ns-paper-chevron-active); --ns-close-filter: var(--ns-paper-close-filter);
        position: relative;
        max-width: 940px;
        margin: clamp(0.25rem, 2vw, 1.5rem) auto clamp(2.5rem, 6vw, 4.5rem);
        padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.1rem, 4.5vw, 3.5rem) clamp(1.75rem, 4vw, 2.75rem) !important;
        border: 1px solid rgba(243, 211, 138, 0.4);
        border-radius: 22px;
        background:
            /* a faint compass rose watermark in the lower corner */
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%230b1b33' stroke-opacity='.07' stroke-width='1.2'%3E%3Ccircle cx='100' cy='100' r='92'/%3E%3Ccircle cx='100' cy='100' r='70'/%3E%3Cpath d='M100 4 112 88 196 100 112 112 100 196 88 112 4 100 88 88Z'/%3E%3Cpath d='M100 36 106 94 164 100 106 106 100 164 94 106 36 100 94 94Z' transform='rotate(45 100 100)'/%3E%3C/svg%3E") no-repeat right -40px bottom -40px / 220px 220px,
            var(--ns-paper-surface);
        box-shadow: var(--ns-shadow), 0 0 0 6px rgba(252, 247, 239, 0.03), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
        color: var(--ns-fg);
    }

    /* two brass tacks pin the notice to the board */
    :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> .container > .alert-info)::before,
    :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> .container > .alert-info)::after {
        content: "";
        position: absolute;
        top: 14px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: radial-gradient(circle at 35% 30%, #fff1c4 0%, #e7b64b 45%, #8a5f12 100%);
        box-shadow: 0 2px 3px rgba(40, 26, 4, 0.45), 0 0 0 1px rgba(90, 60, 10, 0.25);
        pointer-events: none;
    }

    :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> .container > .alert-info)::before { inset-inline-start: 16px; }
    :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> .container > .alert-info)::after { inset-inline-end: 16px; }

    :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> .container > .alert-info) > h1 {
        margin: 0 0 0.35rem;
        color: var(--ns-heading);
        font-family: var(--ns-serif);
        font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
        font-weight: 400;
        letter-spacing: 0.01em;
        line-height: 1.1;
        text-align: center;
        text-transform: none;
    }

    /* a foil rule with a small diamond under the title */
    :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> .container > .alert-info) > h1::after {
        content: "";
        display: block !important;
        width: min(260px, 60%);
        height: 9px;
        margin: 0.9rem auto 0;
        background:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5Z' fill='%23b88a2a'/%3E%3C/svg%3E") center / 9px 9px no-repeat,
            linear-gradient(90deg, rgba(166, 120, 20, 0), rgba(166, 120, 20, 0.6) 40%, rgba(166, 120, 20, 0) 47%, rgba(166, 120, 20, 0) 53%, rgba(166, 120, 20, 0.6) 60%, rgba(166, 120, 20, 0)) center / 100% 1px no-repeat;
    }

    :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> .container > .alert-info) > .container {
        max-width: none;
        margin-top: clamp(1.25rem, 3vw, 1.75rem) !important;
        padding-inline: 0;
    }

    :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> .container > .alert-info) .alert {
        margin-bottom: 0;
        padding: 1rem 1.2rem;
        border: 1px solid rgba(11, 27, 51, 0.12);
        border-inline-start: 3px solid #0a5d71;
        border-radius: 12px;
        background: rgba(255, 253, 248, 0.75);
        color: var(--ns-fg);
        line-height: 1.6;
    }

    :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> .container > .alert-info) .alert strong {
        color: var(--ns-heading);
    }

    /* the four documents: navy stubs */
    :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> .container > .alert-info) > .container > .text-center {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        margin: 1.4rem 0 0 !important;
    }

    :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> .container > .alert-info) > .container > .text-center > .btn {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.6rem;
        margin: 0 !important;
        padding: 0.95rem 1.1rem;
        border: 1px solid rgba(11, 27, 51, 0.16);
        border-radius: 14px;
        background: linear-gradient(180deg, #fffdf8 0%, #fbf6ec 100%);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 6px 16px rgba(60, 44, 14, 0.08);
        color: var(--ns-heading);
        font-size: 0.98rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        text-align: start;
    }

    :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> .container > .alert-info) > .container > .text-center > .btn i {
        display: grid;
        place-items: center;
        flex: none;
        width: 2.1rem;
        height: 2.1rem;
        margin: 0 !important;
        border-radius: 10px;
        background: #0f2140;
        color: var(--ns-gold-soft);
        font-size: 0.9rem;
    }

    :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> .container > .alert-info) > .container > .text-center > .btn:is(:hover, :focus-visible) {
        border-color: rgba(166, 120, 20, 0.55);
        background: linear-gradient(180deg, #fffaf0 0%, #f6ecd6 100%);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 10px 22px rgba(60, 44, 14, 0.14);
        color: var(--ns-heading);
        filter: none;
    }

    :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> .container > .alert-info) > .container > .text-center > .btn:focus-visible {
        outline: 2px solid var(--ns-paper-focus);
        outline-offset: 2px;
    }

    @media (max-width: 575.98px) {
        :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> .container > .alert-info) > .container > .text-center {
            grid-template-columns: 1fr;
        }

        :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> .container > .alert-info) {
            border-radius: 18px;
            background-size: 160px 160px, auto;
        }
    }

    /* ============================================================ D. Error: a storm signal */

    :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> h1.text-danger) {
        position: relative;
        max-width: 940px;
        margin: clamp(0.25rem, 2vw, 1.5rem) auto clamp(2.5rem, 6vw, 4.5rem);
        padding: clamp(1.75rem, 4.5vw, 3rem) clamp(1.25rem, 4.5vw, 3rem) clamp(1.5rem, 4vw, 2.5rem) !important;
        overflow: hidden;
        border: 1px solid rgba(255, 122, 107, 0.3);
        border-inline-start: 3px solid var(--ns-coral);
        border-radius: 22px;
        background:
            /* a squall: fine slanted rain, strongest near the lantern */
            linear-gradient(90deg, rgba(11, 27, 51, 0.9) 0%, rgba(11, 27, 51, 0) 60%),
            repeating-linear-gradient(105deg, rgba(252, 247, 239, 0.035) 0 1px, rgba(252, 247, 239, 0) 1px 13px),
            radial-gradient(40% 70% at 100% 0%, rgba(255, 122, 107, 0.14) 0%, rgba(255, 122, 107, 0) 70%),
            var(--ns-panel);
        box-shadow: var(--ns-shadow), inset 0 1px 0 var(--ns-tint-2);
    }

    /* the storm lantern in the far corner */
    :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> h1.text-danger)::before {
        content: "";
        position: absolute;
        top: clamp(1.5rem, 4vw, 2.5rem);
        inset-inline-end: clamp(1.25rem, 4vw, 2.5rem);
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: radial-gradient(circle at 40% 35%, #ffe0d8 0%, #ff7a6b 55%, #b93d2e 100%);
        box-shadow: 0 0 0 6px rgba(255, 122, 107, 0.12), 0 0 28px rgba(255, 122, 107, 0.65);
        animation: lh-storm 3.2s ease-in-out infinite;
        pointer-events: none;
    }

    @keyframes lh-storm {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.55; }
    }

    :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> h1.text-danger) > h1.text-danger {
        margin: 0 0 0.6rem;
        padding-inline-end: 2.5rem;
        color: var(--ns-coral-soft) !important;
        font-size: var(--ns-fs-h1);
        text-shadow: 0 0 30px rgba(255, 122, 107, 0.25);
    }

    :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> h1.text-danger) > h2.text-danger {
        margin: 0;
        max-width: 46ch;
        color: var(--ns-heading) !important;
        font-size: var(--ns-fs-h3);
        font-weight: 600;
        line-height: 1.35;
        text-wrap: pretty;
    }

    :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> h1.text-danger) > p {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.35rem 0.6rem;
        margin: 1.5rem 0 0;
        padding-top: 1rem;
        border-top: 1px dashed var(--ns-line-strong);
        color: var(--ns-fg-mute);
        font-size: 0.85rem;
    }

    :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> h1.text-danger) > p strong {
        color: var(--ns-fg-dim);
        font-size: var(--ns-fs-overline);
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> h1.text-danger) > p code {
        padding: 0.3em 0.6em;
        border: 1px solid rgba(127, 233, 255, 0.25);
        overflow-wrap: anywhere;
        font-size: 0.8rem;
    }

    :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> h1.text-danger) > p strong:is(:lang(ar), :lang(he)) {
        font-size: 0.85rem;
    }
}

/* ================================================================ motion */

@media (prefers-reduced-motion: reduce) {
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-stable::after,
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section .dev-overline::before,
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .live-section .live-overline::before,
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .tpn-radio-stream .tpn-radio-stream__lamp {
        animation: none;
    }

    /* the live stream's broadcast rings (nation.css starts them with a rule more specific than its own reduced-motion one) */
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .tpn-radio-stream .tpn-player__rings::before,
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .tpn-radio-stream .tpn-player__rings::after {
        animation: none;
        opacity: 0;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page :is(.download-link-card, .download-platform-card, .download-platform-icon, .download-platform-cta i, .download-stable-button),
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .dev-activity-section :is(.commit-card, .contributor-card) {
        transition: none !important;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page :is(.download-link-card, .download-platform-card):hover,
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page :is(.download-link-card, .download-platform-card):hover .download-platform-icon,
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-platform-card:hover .download-platform-cta i,
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .download-page .download-stable .download-stable-button:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    @supports selector(:has(*)) {
        :root .tpn-place--harbor:not(.tpn-place--passport) ~ .main-container > main:has(> h1.text-danger)::before {
            animation: none;
        }
    }
}

/* ==================================================================== records.css */

/* ==========================================================================
   TeknoParrot Nation site theme: the Hall of Records
   Pages: /{culture}/Highscore (+ GameSpecific, EntrySpecific*, UserSpecific, GetTop10, AllTimeGoldenTee...), /{culture}/OnlineProfile/*, /{culture}/ProfileViewer/*
   Imported at the top of nation-site.css (so the base rules come later in the
   cascade: out-specify them, don't repeat them). Loaded only while
   Citizen:PublicUi is on. Read SYSTEM.md (tokens, scope prefixes, recipes)
   before adding rules. House rules, in short:
   - scope every rule under the content prefix plus your page class, e.g.
       :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page ...
     (page chrome: :root body.editorial-page-active:not(.admin-page) ...);
   - use the --ns-* tokens; never define or change a --tp-* property;
   - never touch .price, [data-tier], .btn-gradient, .paddle-checkout-btn or
     anything inside the pricing block (.subscription-container);
   - on script-driven elements (INVENTORY 4.6) colour, type, border, radius and
     shadow only: no display, position, order, visibility, transform;
   - body text 4.5:1 or better, visible :focus-visible, rtl-safe (logical
     properties), no web fonts, no external URLs, no z-index above 1039.
   ========================================================================== */

/* ---------------------------------------------------------------- 0. the room
   The Hall of Records reads as a harbor ledger room: navy glass walls (the
   base panels), ledgers kept in ink with gold-leaf column heads, player
   names on small brass name plates, and every single record shown as a
   cream certificate. Shorthand used in the comments: S = the content prefix,
   HS = S .highscores-page (every High Scores view carries that class). */

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page {
    --rc-plate-bg: linear-gradient(180deg, rgba(243, 211, 138, 0.16) 0%, rgba(231, 182, 75, 0.08) 100%);
    --rc-plate-line: rgba(243, 211, 138, 0.42);
    --rc-plate-fg: #f6dea0;
    --rc-row-line: rgba(252, 247, 239, 0.08);
    --rc-row-alt: rgba(252, 247, 239, 0.028);
    --rc-row-hover: rgba(243, 211, 138, 0.07);
    --rc-gold-medal: linear-gradient(180deg, #fbe3a6 0%, #e7b64b 55%, #b8862a 100%);
    --rc-silver-medal: linear-gradient(180deg, #f4f6f8 0%, #c5ccd6 55%, #8e98a6 100%);
    --rc-bronze-medal: linear-gradient(180deg, #f2c29a 0%, #c98452 55%, #8f5329 100%);
    color: var(--ns-fg);
}

/* ---------------------------------------------------------------- 1. High Scores index (/Highscore) */

/* the game selector: a brass-rimmed ledger index inside the first panel */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .editorial-selector-panel {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(243, 211, 138, 0.08) 0%, rgba(243, 211, 138, 0) 55%),
        linear-gradient(180deg, rgba(4, 10, 24, 0.42) 0%, rgba(4, 10, 24, 0.22) 100%);
    border: 1px solid var(--ns-line-gold);
    box-shadow: inset 0 1px 0 rgba(252, 247, 239, 0.05);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .editorial-selector-panel::after {
    background: radial-gradient(circle, rgba(127, 233, 255, 0.07) 0%, rgba(127, 233, 255, 0) 70%);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .editorial-filter-label {
    color: var(--ns-accent-text);
    font-size: var(--ns-fs-overline);
    letter-spacing: var(--ns-track-overline);
    font-weight: 700;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page :is(.tab-pane > div > .form-text, .tab-pane > .form-text, .editorial-selector-panel .form-text) {
    color: var(--ns-fg-mute);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .highscores-select-wrap :is(.form-control, .form-select, .selectpicker) {
    background-color: rgba(4, 10, 24, 0.6) !important;
    background-image: var(--ns-select-arrow) !important;
    background-size: 14px 10px !important;
    border: 1px solid rgba(243, 211, 138, 0.38) !important;
    border-radius: 14px !important;
    color: var(--ns-ivory) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 24px rgba(2, 6, 16, 0.3);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .highscores-select-wrap :is(.form-control, .form-select, .selectpicker):is(:hover, :focus) {
    border-color: var(--ns-gold) !important;
    background-color: rgba(4, 10, 24, 0.78) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .highscores-select-wrap :is(.form-control, .form-select, .selectpicker):focus-visible {
    outline: 2px solid var(--ns-focus);
    outline-offset: 2px;
    box-shadow: var(--ns-focus-ring);
}

/* the results panel: a ledger drawn straight onto the glass */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .highscores-results-panel {
    background: var(--ns-panel);
    border-color: var(--ns-line);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .tab-content {
    background: linear-gradient(180deg, rgba(252, 247, 239, 0.025) 0%, rgba(252, 247, 239, 0) 100%);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .tab-pane {
    color: var(--ns-fg);
}

/* game titles are engraved: serif, ivory, a foil rule under the title block */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page :is(.tab-pane h3, h2) {
    color: var(--ns-heading);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page :is(.tab-pane > h3, .external-highscore-pane > h3) {
    font-family: var(--ns-serif);
    font-weight: 700;
    letter-spacing: 0;
}

/* ---------------------------------------------------------------- 2. shared: the ledger, name plates, magnifier, video thumbs */

/* ledger tables (latest submissions, rankings, top 10s, a player's entries) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .table-responsive {
    border: 1px solid var(--ns-line);
    background: rgba(4, 10, 24, 0.22);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: var(--rc-row-alt);
    --bs-table-hover-bg: var(--rc-row-hover);
    margin-bottom: 0;
    color: var(--ns-fg);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .table > tbody > tr > :is(td, th) {
    background: transparent;
    color: var(--ns-fg);
    border-bottom: 1px solid var(--rc-row-line);
    vertical-align: middle;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .table > tbody > tr:nth-child(even) > :is(td, th) {
    background: var(--rc-row-alt);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .table > tbody > tr:hover > :is(td, th) {
    background: var(--rc-row-hover);
    color: var(--ns-heading);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .table > tbody > tr:last-child > :is(td, th) {
    border-bottom: 0;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .table > thead > tr > th {
    background: rgba(4, 10, 24, 0.78) !important;
    color: var(--ns-gold-soft);
    border-bottom: 1px solid var(--ns-line-gold);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .table :is(strong, b) {
    color: var(--ns-heading);
}

/* the latest submissions table keeps its first column wide for the plate + video thumb */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .latest-submissions-table tbody td {
    color: var(--ns-fg-dim);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .latest-submissions-table tbody td:first-child,
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .latest-submissions-table tbody tr:hover td {
    color: var(--ns-heading);
}

/* player names: brass name plates (the rich pages paint theirs with !important) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page :is(.highscore-player-link.btn, .record-row .name a, .highscores-rich-link, .btn-purple-name) {
    background: var(--rc-plate-bg) !important;
    border: 1px solid var(--rc-plate-line) !important;
    border-radius: 8px !important;
    color: var(--rc-plate-fg) !important;
    box-shadow: inset 0 1px 0 rgba(255, 244, 214, 0.14), 0 2px 6px rgba(2, 6, 16, 0.3) !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none; /* a player's name is shown as they typed it */
    filter: none;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page :is(.highscore-player-link.btn, .record-row .name a, .highscores-rich-link, .btn-purple-name):is(:hover, :focus-visible) {
    background: var(--ns-accent-fill) !important;
    border-color: rgba(251, 227, 166, 0.95) !important;
    color: var(--ns-on-accent) !important;
}

/* "view all leaderboards": the one gold action of the panel */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .highscore-details-link.btn.btn-info.my-2 {
    background: var(--ns-accent-fill);
    border: 1px solid rgba(243, 211, 138, 0.9);
    color: var(--ns-on-accent);
    box-shadow: var(--ns-glow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none; /* sentence case, like the gold actions of every other place */
    filter: none;
    margin-bottom: 0.9rem !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .highscore-details-link.btn.btn-info.my-2:is(:hover, :focus-visible) {
    background: linear-gradient(180deg, #fbe3a6 0%, #eec060 100%);
    border-color: #fbe3a6;
    color: var(--ns-on-accent);
}

/* the magnifier: a round glass lens with a gold icon */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page :is(td .highscore-details-link.btn, .record-row .search a, .search-btn) {
    background: rgba(252, 247, 239, 0.05) !important;
    border: 1px solid var(--ns-line-strong) !important;
    color: var(--ns-gold-soft) !important;
    box-shadow: none;
    filter: none;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page :is(td .highscore-details-link.btn, .record-row .search a, .search-btn):is(:hover, :focus-visible) {
    background: rgba(243, 211, 138, 0.16) !important;
    border-color: var(--ns-gold) !important;
    color: var(--ns-ivory) !important;
}

/* video thumbnails (script-driven wrapper: colour, border, radius, shadow and type only). The ring is on the
   picture, centred in its box: the views' 72px box holds a 52px image, so a ring on the box framed an empty
   strip and the play mark sat off the picture. Where the box is narrower (45px on phones) the image shrinks
   to it (the view's object-fit: cover crops it evenly) instead of losing its right edge and ring. */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .video-wrapper:not(.expanded) {
    border-radius: 8px;
    box-shadow: none;
    text-align: center;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .video-wrapper:not(.expanded) img {
    max-width: 100%;
    border: 1px solid rgba(243, 211, 138, 0.45);
    border-radius: 8px;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .video-wrapper.expanded {
    background: rgba(6, 13, 29, 0.96);
    border-radius: 18px;
    box-shadow: 0 0 0 1px rgba(243, 211, 138, 0.4), 0 30px 80px rgba(2, 6, 16, 0.7);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .close-video {
    background: var(--ns-accent-fill);
    color: var(--ns-on-accent);
    box-shadow: 0 6px 16px rgba(2, 6, 16, 0.5);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .close-video:focus-visible {
    outline: 2px solid var(--ns-ivory);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- 3. the rich pages (GameSpecific, Top 10, a player's entries, All-time Golden Tee) */

/* hero: the page title plate */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .editorial-page-hero {
    border-color: var(--ns-line-gold);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .editorial-page-intro {
    color: var(--ns-fg-dim);
}

/* section panels: navy glass walls (no backdrop blur: it would trap the fixed, expanded video players) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form > :is(.col-sm-12, .record-container) {
    background: var(--ns-panel) !important;
    border: 1px solid var(--ns-line);
    border-radius: 22px;
    box-shadow: var(--ns-shadow), inset 0 1px 0 var(--ns-tint-2);
    color: var(--ns-fg) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form :is(h2, h3, h4, h5, h6) {
    color: var(--ns-heading) !important;
}

/* section titles: engraved serif */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page :is(.highscores-rich-panel-header h3, .centered-title, .record-header, .record-container > h2, .course-distance-container > h2) {
    font-family: var(--ns-serif);
    font-weight: 700;
    letter-spacing: 0;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page :is(.highscores-rich-subtitle, p.text-muted, .text-muted, .small, .form-text, .highscores-record-count) {
    color: var(--ns-fg-mute) !important;
}

/* ledgers on the rich pages (their sheet paints cells with !important) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .table-responsive {
    border: 1px solid var(--ns-line);
    background: rgba(4, 10, 24, 0.3);
    box-shadow: inset 0 1px 0 rgba(252, 247, 239, 0.04);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .records-table :is(td, .date-single-line) {
    color: var(--ns-fg-dim) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .records-table th {
    letter-spacing: 0.08em;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .records-table th.rank-col {
    letter-spacing: 0.04em;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .records-table td:is(.rank-col, .rank-column, .action-col, .action-column) {
    color: var(--ns-heading) !important;
}

/* the result itself: tabular, bright, the brightest thing in the row */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .records-table td:is(.time-col, .score-column),
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .table tbody strong {
    color: var(--ns-gold-soft) !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .table td {
    font-variant-numeric: tabular-nums;
}

/* medals for the podium rows of a ledger (rows are rendered in rank order): a struck coin behind the number */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page {
    --rc-coin-gold: radial-gradient(circle at 50% 50%, #fbe3a6 0, #e7b64b 8px, #b8862a 11px, rgba(184, 134, 42, 0) 11.5px);
    --rc-coin-silver: radial-gradient(circle at 50% 50%, #ffffff 0, #c9d0d9 8px, #8e98a6 11px, rgba(142, 152, 166, 0) 11.5px);
    --rc-coin-bronze: radial-gradient(circle at 50% 50%, #f6caa4 0, #c98452 8px, #8f5329 11px, rgba(143, 83, 41, 0) 11.5px);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .records-table > tbody > tr:nth-child(-n + 3) > td.rank-col,
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .course-column > .record-row:nth-of-type(-n + 3) .rank {
    background-repeat: no-repeat;
    color: #1b1203 !important;
    font-weight: 800;
    text-align: center;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .records-table > tbody > tr:nth-child(1) > td.rank-col,
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .course-column > .record-row:nth-of-type(1) .rank { background-image: var(--rc-coin-gold); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .records-table > tbody > tr:nth-child(2) > td.rank-col,
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .course-column > .record-row:nth-of-type(2) .rank { background-image: var(--rc-coin-silver); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .records-table > tbody > tr:nth-child(3) > td.rank-col,
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .course-column > .record-row:nth-of-type(3) .rank { background-image: var(--rc-coin-bronze); }

/* course / track cards inside a section: ink pages of the ledger with a foil top edge */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page :is(.panel.panel-default, .course-section, .course-distance-container .course-section) {
    background:
        var(--ns-hairline-gold) top center / 70% 1px no-repeat,
        linear-gradient(180deg, rgba(8, 18, 38, 0.72) 0%, rgba(6, 13, 29, 0.6) 100%) !important;
    border: 1px solid var(--ns-line);
    box-shadow: 0 14px 30px rgba(2, 6, 16, 0.3), inset 0 1px 0 rgba(252, 247, 239, 0.04);
    color: var(--ns-fg) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page :is(.course-header, .course-distance-container .course-header) {
    background: transparent;
    color: var(--ns-heading) !important;
    border-bottom: 1px solid var(--ns-line) !important;
    font-family: var(--ns-serif);
    font-weight: 700;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .panel.panel-default .course-header {
    border-bottom: 0 !important;
}

/* the podium columns (18 holes, front 9, back 9): engraved brass plaques */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page :is(.course-column, .course-distance-container .course-column) {
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(243, 211, 138, 0.09) 0%, rgba(243, 211, 138, 0) 60%),
        linear-gradient(180deg, rgba(16, 45, 73, 0.55) 0%, rgba(11, 27, 51, 0.7) 100%) !important;
    border: 1px solid rgba(243, 211, 138, 0.34);
    box-shadow: inset 0 0 0 3px rgba(6, 13, 29, 0.55), inset 0 0 0 4px rgba(243, 211, 138, 0.16), 0 10px 22px rgba(2, 6, 16, 0.35);
    color: var(--ns-fg);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page :is(.column-header, .course-distance-container .column-header) {
    color: var(--ns-accent-text) !important;
    font-size: var(--ns-fs-overline);
    letter-spacing: var(--ns-track-overline);
    text-align: center;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page :is(.record-row, .course-distance-container .record-row) {
    background: transparent;
    border-bottom: 1px solid rgba(243, 211, 138, 0.12);
    color: var(--ns-fg);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .record-row:last-child {
    border-bottom: 0;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page :is(.record-row .rank, .course-distance-container .rank) {
    color: var(--ns-fg-mute) !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}


:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page :is(.record-row .score, .course-distance-container .distance) {
    color: var(--ns-gold-soft) !important;
    font-weight: 700;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .game-badge {
    background: rgba(127, 233, 255, 0.08);
    border: 1px solid rgba(127, 233, 255, 0.32);
    color: var(--ns-info);
}

/* show all / hide all / fullscreen: ghost pills with a gold edge */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page :is(.highscores-rich-toggle, .btn-outline-purple, .btn-outline-secondary) {
    background: rgba(252, 247, 239, 0.06);
    border: 1px solid var(--ns-line-gold);
    color: var(--ns-gold-soft);
    box-shadow: none;
}

/* one-line pills (the chart legend pair included: see section 4) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page :is(.highscores-rich-toggle, .btn-outline-secondary) {
    white-space: nowrap;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page :is(.highscores-rich-toggle, .btn-outline-purple, .btn-outline-secondary):is(:hover, :focus-visible) {
    background: rgba(243, 211, 138, 0.16) !important;
    border-color: var(--ns-gold) !important;
    color: var(--ns-ivory) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page a.nav-link.text-dark {
    color: var(--ns-link) !important;
}

/* the magnifier fits its 50px action column (it was clipped into an ellipsis) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .records-table td.action-col .highscore-details-link.btn {
    width: 2.1rem;
    height: 2.1rem;
    min-height: 0;
    padding: 0 !important;
    border-radius: 50% !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .records-table th.rank-col {
    padding-inline: 0.3rem !important; /* the 40px column fits the label at the siblings' size */
    text-align: center;
    text-overflow: clip;
}

/* ---------------------------------------------------------------- 4. the rankings chart: a sheet of plotting paper pinned to the wall
   (the chart script draws #666 labels and #e0e0e0 grid lines, so its sheet stays light) */

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page #chartContainer {
    background: rgba(4, 10, 24, 0.35);
    border: 1px solid var(--ns-line-gold);
    box-shadow: inset 0 1px 0 rgba(252, 247, 239, 0.05);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page #handicapChart {
    background: #fbf7ee !important;
    box-shadow: 0 10px 24px rgba(2, 6, 16, 0.35), inset 0 0 0 1px rgba(166, 120, 20, 0.25);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page #legend {
    background: linear-gradient(180deg, rgba(8, 18, 38, 0.8) 0%, rgba(6, 13, 29, 0.7) 100%) !important;
    border: 1px solid var(--ns-line);
    scrollbar-color: rgba(243, 211, 138, 0.35) transparent;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page #legend .card-header {
    background: rgba(4, 10, 24, 0.6) !important;
    border-bottom: 1px solid var(--ns-line-gold);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page #legend .card-header h6 {
    color: var(--ns-accent-text) !important;
    font-size: var(--ns-fs-overline);
    letter-spacing: var(--ns-track-overline);
    text-transform: uppercase;
    font-weight: 700;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page #legend .list-group-item {
    background: transparent;
    border-color: var(--rc-row-line) !important;
    color: var(--ns-fg-mute);
    box-shadow: none;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page #legend .list-group-item.active {
    background: rgba(243, 211, 138, 0.06);
    color: var(--ns-heading);
    font-weight: 600;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page #legend .list-group-item:hover {
    background: rgba(243, 211, 138, 0.12) !important;
    color: var(--ns-ivory) !important;
}

/* a dot keeps its 12px beside a long, wrapping name (the flex row squeezed it to a 3px sliver). The dots are
   written by the chart script, so no sizing: a transparent 6px border cannot shrink, and the dot's own
   colour paints under it */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page #legend .color-dot {
    border: 6px solid transparent;
    box-shadow: 0 0 0 2px rgba(6, 13, 29, 0.8), 0 0 0 3px rgba(252, 247, 239, 0.25);
}

/* Show All / Hide All share the narrow legend column (768-1199px): compact one-line pills that stack when
   the pair does not fit side by side (German), and the view's 38px-high box grows with them instead of
   letting them spill over the legend below. Below 768px the column is the page's full width and the pair
   keeps its size on one row. */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page div:has(> .d-flex > #showAllBtn) {
    height: auto !important; /* over the view's inline height: 38px */
    min-height: 38px;
}

@media (min-width: 768px) {
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page :is(#showAllBtn, #hideAllBtn) {
        padding-inline: 0.6rem;
        font-size: 0.75rem;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .d-flex:has(> #showAllBtn) {
        flex-wrap: wrap;
    }
}

/* in the narrow column the pair spans it like the legend under it, stacked or side by side */
@media (min-width: 768px) and (max-width: 1199.98px) {
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page :is(#showAllBtn, #hideAllBtn) {
        flex: 1 1 auto;
    }
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page #tooltip {
    background: rgba(6, 13, 29, 0.95);
    border: 1px solid var(--ns-line-gold);
    color: var(--ns-ivory);
    box-shadow: var(--ns-shadow-sm);
}

/* ---------------------------------------------------------------- 5. the rich pages, continued: every section is a wall of the hall */

/* the course distance ledger sits straight in the form like its siblings: same glass wall
   (editorial-pages.css clears its background with !important) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form > .course-distance-container {
    margin-bottom: 1.5rem;
    padding: clamp(1.25rem, 3vw, 1.7rem);
    background: var(--ns-panel) !important;
    border: 1px solid var(--ns-line);
    border-radius: 22px;
    box-shadow: var(--ns-shadow), inset 0 1px 0 var(--ns-tint-2);
    color: var(--ns-fg) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .course-distance-container .record-header {
    color: var(--ns-heading) !important;
}

/* "no putt records yet": the lone message spans the plaque (it was squeezed into the 20px rank track) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .course-distance-container .record-row[style*="justify-content"] > span:only-child {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--ns-fg-mute);
    font-family: var(--ns-serif);
    font-style: italic;
}

/* every section title of the rich pages is engraved alike (rankings history, top speeds, bowling lanes) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form > .col-sm-12 > h3 {
    font-family: var(--ns-serif);
    font-weight: 700;
    letter-spacing: 0;
}

/* a record table nobody has set yet (e.g. a top 10 with no runs): the section stays a ruled, empty register */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form > .col-sm-12:has(> .d-flex > .centered-title):not(:has(.panel)) {
    background: var(--ns-panel);
}

/* ...drawn as an empty, dashed berth with a dash in it (no words: the view prints none to translate) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form > .col-sm-12:has(> .d-flex > .centered-title):not(:has(.panel))::after {
    content: "\2014";
    content: "\2014" / "";
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    margin-top: 0.5rem;
    border: 1px dashed var(--ns-line-strong);
    border-radius: 16px;
    background: rgba(4, 10, 24, 0.22);
    color: var(--ns-fg-mute);
    font-family: var(--ns-serif);
    font-size: 1.25rem;
}

/* the latest submissions of a game page (and every game on a player's page) are rendered straight into
   the form, without a panel: an engraved section title with a foil rule, then the ledger */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form > h3 {
    margin-top: 2.25rem;
    font-family: var(--ns-serif);
    font-weight: 700;
    letter-spacing: 0;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form > h3::before {
    content: "";
    display: block !important; /* site.css hides every h1-h3 pseudo element with !important */
    width: min(260px, 45%);
    height: 1px;
    margin-bottom: 1.35rem;
    background: linear-gradient(90deg, rgba(243, 211, 138, 0.85), rgba(243, 211, 138, 0));
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form > h3:first-child {
    margin-top: 0.25rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form > h3:first-child::before {
    content: none;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form > small.form-text {
    display: block;
    margin-bottom: 0.65rem;
    font-size: var(--ns-fs-overline);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form > .table-responsive {
    margin-bottom: 1.5rem;
    box-shadow: var(--ns-shadow-sm), inset 0 1px 0 rgba(252, 247, 239, 0.04);
}

/* a player's page lists every game: one gold call to action per game would shout; quiet gold ghosts instead */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-user-page .highscores-rich-form > div > .highscore-details-link.btn.btn-info.my-2 {
    background: rgba(243, 211, 138, 0.08);
    border: 1px solid var(--ns-line-gold);
    color: var(--ns-gold-soft);
    box-shadow: none;
    font-weight: 700;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-user-page .highscores-rich-form > div > .highscore-details-link.btn.btn-info.my-2:is(:hover, :focus-visible) {
    background: rgba(243, 211, 138, 0.18);
    border-color: var(--ns-gold);
    color: var(--ns-ivory);
}

/* player names are user content: no capitals, and a very long one wraps instead of leaving the hero */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-user-page .editorial-page-hero {
    --ns-h1-transform: none;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-user-page .editorial-page-hero h1 {
    overflow-wrap: anywhere;
    letter-spacing: -0.01em;
    /* a player name is one long word (underscores are no break points): the title is set smaller so a long
       name breaks once, and not balanced, which left a lone letter on its own line */
    font-size: clamp(1.3rem, 0.85rem + 2.3vw, 2.4rem);
    line-height: 1.15;
    text-wrap: pretty;
}

/* an empty ledger (a game nobody has played yet): the page stays ruled, like an unused register */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .table-responsive:has(> .latest-submissions-table):not(:has(> .latest-submissions-table > tbody > tr)) {
    padding-bottom: 5.5rem;
    background:
        repeating-linear-gradient(180deg, rgba(252, 247, 239, 0) 0 27px, rgba(243, 211, 138, 0.12) 27px 28px) 0 100% / 100% 5.5rem no-repeat,
        rgba(4, 10, 24, 0.22);
}

/* external leaderboards (Initial D, Wangan 6RR): the remote tables hang on the same walls */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page.highscore-game-page > .container {
    margin-bottom: 1.5rem;
    padding: clamp(1.25rem, 3vw, 1.7rem);
    background: var(--ns-panel);
    border: 1px solid var(--ns-line);
    border-radius: 22px;
    box-shadow: var(--ns-shadow), inset 0 1px 0 var(--ns-tint-2);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .initiald-top-teams h4 {
    font-family: var(--ns-serif);
    font-weight: 700;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .external-highscore-empty {
    background: var(--ns-tint-1);
    border: 1px dashed var(--ns-line-strong);
    color: var(--ns-fg-mute);
    font-family: var(--ns-serif);
    font-style: italic;
}

/* ---------------------------------------------------------------- 6. a single record: the certificate (EntrySpecific, Gt06, SilverStrike, Or2, Sr3)
   One record, one document: a cream certificate with a gold double rule, the game in engraved serif,
   the holder on an ink name plate, the facts as a ruled register, the run's video in a dark frame. */

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface {
    --ns-fg: var(--ns-paper-fg); --ns-fg-dim: var(--ns-paper-fg-dim); --ns-fg-mute: var(--ns-paper-fg-mute);
    --ns-heading: var(--ns-paper-heading); --ns-link: var(--ns-paper-link); --ns-link-hover: var(--ns-paper-link-hover);
    --ns-accent-text: var(--ns-paper-accent-text); --ns-ok: var(--ns-paper-ok); --ns-warn: var(--ns-paper-warn);
    --ns-bad: var(--ns-paper-bad); --ns-info: var(--ns-paper-info);
    --ns-line: var(--ns-paper-line); --ns-line-strong: var(--ns-paper-line-strong); --ns-line-gold: var(--ns-paper-line-gold);
    --ns-tint-1: var(--ns-paper-tint-1); --ns-tint-2: var(--ns-paper-tint-2); --ns-tint-3: var(--ns-paper-tint-3);
    --ns-panel: var(--ns-paper-panel); --ns-panel-2: var(--ns-paper-tint-1);
    --ns-field: var(--ns-paper-field); --ns-field-line: var(--ns-paper-field-line); --ns-field-fg: var(--ns-paper-heading);
    --ns-placeholder: var(--ns-paper-placeholder); --ns-focus: var(--ns-paper-focus);
    --ns-focus-ring: 0 0 0 3px rgba(29, 79, 134, 0.3);
    --ns-thead-bg: var(--ns-paper-thead-bg); --ns-thead-fg: var(--ns-paper-thead-fg);
    --ns-select-arrow: var(--ns-paper-select-arrow); --ns-chevron: var(--ns-paper-chevron);
    --ns-chevron-active: var(--ns-paper-chevron-active); --ns-close-filter: var(--ns-paper-close-filter);
    --rc-row-line: rgba(11, 27, 51, 0.12);
    --rc-row-alt: rgba(166, 120, 20, 0.045);
    --rc-row-hover: rgba(166, 120, 20, 0.08);
    --rc-plate-bg: linear-gradient(180deg, #16305a 0%, #0b1b33 100%);
    --rc-plate-line: rgba(166, 120, 20, 0.7);
    --rc-plate-fg: #f6dea0;
    --rc-ink: #0f2140;
    position: relative;
    background:
        radial-gradient(90% 60% at 50% 0%, rgba(255, 253, 248, 0.75) 0%, rgba(255, 253, 248, 0) 70%),
        var(--ns-paper-surface) #f4ecdc !important;
    border: 1px solid rgba(243, 211, 138, 0.6) !important;
    border-radius: 26px !important;
    box-shadow: var(--ns-shadow), 0 0 0 5px rgba(6, 13, 29, 0.35), 0 0 0 6px rgba(243, 211, 138, 0.28) !important;
    color: var(--ns-fg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* the inner rule of the certificate (decoration only; the page keeps ::before for its own bar) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface::after {
    content: "";
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(166, 120, 20, 0.38);
    border-radius: 19px;
    pointer-events: none;
}

/* the engraved title: serif, navy, crowned by a small gold rosette */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface :is(table td > h1, .scorecard-header h1, .bowling-header h1) {
    color: var(--ns-paper-heading) !important;
    font-family: var(--ns-serif);
    font-size: clamp(1.85rem, 1.2rem + 2.2vw, 2.75rem) !important;
    font-weight: 700;
    letter-spacing: -0.01em !important;
    line-height: 1.1;
    text-transform: none;
    text-shadow: none;
    overflow-wrap: anywhere;
    margin-bottom: 0.6rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface :is(table td > h1, .scorecard-header h1, .bowling-header h1)::before {
    content: "";
    display: block !important; /* site.css hides h1-h3 pseudo elements with !important */
    width: 44px;
    height: 44px;
    margin: 0 auto 0.7rem;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3e%3cdefs%3e%3clinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3e%3cstop offset='0' stop-color='%23fbe3a6'/%3e%3cstop offset='.55' stop-color='%23e7b64b'/%3e%3cstop offset='1' stop-color='%23a8791f'/%3e%3c/linearGradient%3e%3c/defs%3e%3cpath fill='url(%23g)' d='M22 1l3.1 5.4 5.9-2 .9 6.2 6.2.9-2 5.9L41.5 22l-5.4 3.1 2 5.9-6.2.9-.9 6.2-5.9-2L22 41.5l-3.1-5.4-5.9 2-.9-6.2-6.2-.9 2-5.9L2.5 22l5.4-3.1-2-5.9 6.2-.9.9-6.2 5.9 2z'/%3e%3ccircle cx='22' cy='22' r='11.5' fill='%230b1b33'/%3e%3ccircle cx='22' cy='22' r='10' fill='none' stroke='%23f3d38a' stroke-width='1'/%3e%3cpath d='M22 15.5l1.9 3.9 4.3.6-3.1 3 .7 4.3-3.8-2-3.8 2 .7-4.3-3.1-3 4.3-.6z' fill='%23f3d38a'/%3e%3c/svg%3e") center / contain no-repeat;
    filter: drop-shadow(0 3px 5px rgba(90, 60, 10, 0.3));
}

/* "Highscore by:" */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface :is(table td[colspan] > div, .scorecard-subtitle, .bowling-subtitle) {
    margin-bottom: 0.45rem;
    color: var(--ns-paper-accent-text) !important;
    font-size: var(--ns-fs-overline) !important;
    font-weight: 700;
    letter-spacing: 0.22em !important;
    text-transform: uppercase;
}

/* the holder's ink name plate (the base plate reads the --rc-plate-* set above) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface .highscore-player-link.btn {
    max-width: 100%;
    padding: 0.5rem 1.1rem;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* the register (basic, OutRun, Sega Rally entries): a two-column ruled list */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface > table.table {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin-inline: auto;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface > table.table > tbody > tr > td {
    background: transparent;
    border-bottom: 1px dashed rgba(11, 27, 51, 0.2);
    padding-block: 0.7rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface > table.table > tbody > tr:hover > td {
    background: rgba(166, 120, 20, 0.06) !important;
    color: var(--ns-paper-fg);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface > table.table > tbody > tr:first-child > td {
    padding-block: 0.75rem 1.5rem;
    border-bottom: 1px solid rgba(166, 120, 20, 0.45);
    background: transparent;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface > table.table > tbody > tr > td:first-child:not([colspan]) {
    width: 42%;
    color: var(--ns-paper-fg-mute);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface > table.table > tbody > tr > td + td {
    color: var(--ns-paper-heading);
    font-weight: 600;
    overflow-wrap: anywhere;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface > table.table > tbody > tr:last-child > td {
    border-bottom: 0;
}

/* the game link in the register is a link, not the round magnifier */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface > table td > a.highscore-details-link.btn {
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 2px !important;
    color: var(--ns-paper-link) !important;
    font-weight: 700;
    font-size: inherit;
    letter-spacing: 0;
    text-transform: none;
    text-align: start;
    white-space: normal;
    text-decoration: underline;
    text-decoration-color: rgba(29, 79, 134, 0.35);
    text-underline-offset: 0.2em;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface > table td > a.highscore-details-link.btn:is(:hover, :focus-visible) {
    color: var(--ns-paper-heading) !important;
    text-decoration-color: currentColor;
}

/* the route/car/gearbox clips of an OutRun entry: small screens set into the page */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface [id^="VideoPlayer"] {
    border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(166, 120, 20, 0.45), 0 12px 26px rgba(11, 27, 51, 0.22);
    background: #0b1b33;
}

/* the video and the comments: two sheets pinned under the certificate text */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface .card {
    max-width: 900px;
    margin-inline: auto;
    background: rgba(255, 253, 248, 0.72) !important;
    border: 1px solid rgba(166, 120, 20, 0.3) !important;
    border-radius: 18px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 10px 24px rgba(90, 60, 10, 0.08) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface .card-header {
    background: linear-gradient(180deg, #13284a 0%, #0b1b33 100%) !important;
    color: var(--ns-gold-soft) !important;
    border-bottom: 1px solid rgba(166, 120, 20, 0.6);
    font-family: var(--ns-font);
    font-size: var(--ns-fs-overline);
    letter-spacing: var(--ns-track-overline);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface .card-body {
    color: var(--ns-paper-fg);
}

/* the run's video in a dark frame */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface .card-body > iframe {
    max-width: 100%;
    border: 0;
    border-radius: 14px;
    background: #060d1d;
    box-shadow: 0 0 0 6px #0b1b33, 0 0 0 7px rgba(166, 120, 20, 0.6), 0 16px 34px rgba(11, 27, 51, 0.3);
    margin-block: 0.5rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface .card-body > .card-subtitle.text-muted,
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface .card-body > a.card-link {
    color: var(--ns-paper-fg-mute) !important;
    font-family: var(--ns-serif);
    font-style: italic;
    font-weight: 400;
}

/* comments: a guest book, one entry per rule */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface .card > .card-body + .card-body {
    border-top: 1px dashed rgba(11, 27, 51, 0.18);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface .card-body > h5 + h6.card-subtitle {
    margin-top: 0.35rem;
    color: var(--ns-paper-fg) !important;
    font-family: var(--ns-serif);
    font-size: 1.02rem;
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface .card-body > h5 > .highscore-player-link.btn {
    padding: 0.3rem 0.8rem;
    font-size: 0.78rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface .card > .form-control {
    width: calc(100% - 2rem);
    margin: 0.5rem 1rem 0;
    background: var(--ns-paper-field);
    border: 1px solid var(--ns-paper-field-line);
    color: var(--ns-paper-heading);
}

/* keyboard focus on the cream sheet: the paper halo alone was 1.66:1 against the card; the ink outline is 8:1 */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface :is(.form-control, input, textarea):focus-visible {
    outline: 2px solid var(--ns-paper-focus);
    outline-offset: 1px;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface .card > .btn-secondary {
    /* the button's own .my-2.my-sm-0 utilities are !important and left it flush on the card's bottom edge */
    margin: 0.85rem auto 1.35rem !important;
    padding-inline: 1.4rem;
    background: linear-gradient(180deg, #16305a 0%, #0b1b33 100%);
    border: 1px solid rgba(166, 120, 20, 0.7);
    color: var(--ns-gold-soft);
    font-weight: 700;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface .card > .btn-secondary:is(:hover, :focus-visible) {
    background: var(--ns-accent-fill);
    border-color: #a8791f;
    color: var(--ns-on-accent);
}

/* the Golden Tee scorecard and the bowling sheet are already cards on the certificate: no second frame */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .bowling-container {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page :is(.scorecard-container, .bowling-container)::before {
    inset-inline: 22%;
    height: 1px !important;
    background: linear-gradient(90deg, rgba(166, 120, 20, 0), rgba(166, 120, 20, 0.75), rgba(166, 120, 20, 0)) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page :is(.scorecard-header, .bowling-header) {
    background: transparent !important;
    border-bottom: 1px solid rgba(166, 120, 20, 0.4) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface .table-responsive {
    position: relative;
    z-index: 1;
    background: transparent;
    border: 0;
    box-shadow: none;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page :is(.scorecard-table, .bowling-table) {
    background: transparent !important;
    border: 0 !important;
    color: var(--ns-paper-fg) !important;
    font-variant-numeric: tabular-nums;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page :is(.scorecard-table, .bowling-table) th {
    background: var(--rc-ink) !important;
    color: var(--ns-gold-soft) !important;
    border-color: transparent !important;
    letter-spacing: 0.08em;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page :is(.scorecard-table, .bowling-table) td {
    background: #fffdf8 !important;
    color: var(--ns-paper-heading) !important;
    border-color: rgba(166, 120, 20, 0.18) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page :is(.distance-row, .par-row) td {
    background: rgba(166, 120, 20, 0.07) !important;
    color: var(--ns-paper-fg-dim) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page :is(.header-cell, .label-cell, .totals-cell, .bowling-table .total-cell) {
    background: rgba(166, 120, 20, 0.14) !important;
    color: var(--ns-paper-heading) !important;
    font-weight: 800 !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page :is(.header-cell, .label-cell) {
    font-size: 0.74rem !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .info-row .value-cell {
    background: transparent !important;
    font-family: var(--ns-mono);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: start;
    overflow-wrap: anywhere;
}

/* birdie / eagle / bogey cells keep their meaning, in paper colours that pass AA */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .scorecard-table td[style*="color: #0000FF"] {
    background: #dde8fb !important;
    color: #1a3f9e !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .scorecard-table td[style*="color: #00FF00"] {
    background: #dcf1dc !important;
    color: #1f5f24 !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .scorecard-table td[style*="color: #FF0000"] {
    background: #fbe0da !important;
    color: #9c2a17 !important;
}

/* the bowling facts: four small brass-edged tags */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .bowling-info-bar {
    border-bottom: 1px dashed rgba(11, 27, 51, 0.18) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .bowling-info-item {
    background: #fffdf8 !important;
    border: 1px solid rgba(166, 120, 20, 0.35) !important;
    border-radius: 12px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .bowling-info-item strong {
    color: var(--ns-paper-accent-text) !important;
    font-size: var(--ns-fs-overline);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .bowling-info-item span {
    color: var(--ns-paper-heading) !important;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- 7. a citizen's page (ProfileViewer): the portrait in the hall
   ProfileViewer renders without a page wrapper: its blocks are direct children of <main>. The records
   banner + main > (.row, .text-center, .card) is only this page (every High Scores view starts with
   .editorial-page); OnlineProfile is excluded explicitly. PV = :root body:not(.online-profile-page)
   .tpn-place--records ~ .main-container > main */

/* the page title: the same glass hero plate as every other page of the hall (an overline rule stands in
   for the kicker the view does not print) */
:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main > .row:first-child {
    max-width: 880px;
    margin-inline: auto;
}

:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main > .row:first-child > [class*="col"] {
    margin-bottom: 1.5rem;
    padding: clamp(1.4rem, 4vw, 2.1rem) clamp(1.25rem, 4vw, 2.4rem);
    background:
        radial-gradient(40% 90% at 100% 0%, rgba(238, 154, 110, 0.12) 0%, rgba(238, 154, 110, 0) 70%),
        var(--ns-panel);
    border: 1px solid var(--ns-line-gold);
    border-radius: 24px;
    box-shadow: var(--ns-shadow), inset 0 1px 0 var(--ns-tint-2);
    text-align: start;
}

:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main > .row:first-child > [class*="col"]::before {
    content: "";
    display: block;
    width: min(220px, 55%);
    height: 7px;
    margin-bottom: 0.9rem;
    background:
        radial-gradient(circle at 3.5px 3.5px, var(--ns-lime) 0 2.6px, rgba(201, 255, 134, 0) 3.4px) 0 0 / 7px 7px no-repeat,
        linear-gradient(90deg, rgba(243, 211, 138, 0.85), rgba(243, 211, 138, 0)) 14px 3px / calc(100% - 14px) 1px no-repeat;
}

:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main > .row:first-child h1 {
    margin: 0;
    color: var(--ns-heading);
    font-family: var(--ns-font);
    font-size: var(--ns-fs-h1);
    font-weight: 800;
    letter-spacing: -0.012em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main > :is(.text-center, .card) {
    max-width: 880px;
    margin-inline: auto;
}

:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main > .text-center {
    position: relative;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    background:
        radial-gradient(70% 45% at 50% 0%, rgba(243, 211, 138, 0.1) 0%, rgba(243, 211, 138, 0) 70%),
        var(--ns-panel);
    border: 1px solid var(--ns-line);
    border-radius: 28px;
    box-shadow: var(--ns-shadow), inset 0 1px 0 var(--ns-tint-2);
}

/* the avatar hangs as a portrait: gilded frame, ink mat */
:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main > .text-center > h2 > img {
    max-width: 100%;
    height: auto !important;
    aspect-ratio: 1 / 1;
    padding: 7px;
    background: linear-gradient(145deg, #fbe3a6 0%, #c9953a 38%, #f3d38a 62%, #9d6f1c 100%);
    box-shadow: 0 0 0 1px rgba(6, 13, 29, 0.8), 0 0 0 9px rgba(6, 13, 29, 0.45), 0 0 0 10px rgba(243, 211, 138, 0.25), 0 26px 50px rgba(2, 6, 16, 0.55);
}

/* the motto: an engraved caption under the portrait */
:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main > .text-center > figure {
    margin: 1.75rem auto 1.5rem;
    max-width: 38rem;
}

:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main > .text-center > figure > .blockquote {
    border: 0;
    padding: 0;
    color: var(--ns-heading);
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main > .text-center > figure > .blockquote::before {
    content: "";
    display: block;
    width: 120px;
    height: 10px;
    margin: 0 auto 0.9rem;
    background:
        radial-gradient(circle, var(--ns-gold) 0 3px, transparent 3.5px) center / 10px 10px no-repeat,
        linear-gradient(90deg, rgba(243, 211, 138, 0), rgba(243, 211, 138, 0.75) 40%, rgba(243, 211, 138, 0) 44%, rgba(243, 211, 138, 0) 56%, rgba(243, 211, 138, 0.75) 60%, rgba(243, 211, 138, 0)) center / 100% 1px no-repeat;
}

:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main > .text-center > figure > .blockquote a {
    font-family: var(--ns-font);
    font-size: 0.95rem;
    font-style: normal;
}

:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main > .text-center > figure > .blockquote-footer {
    margin-top: 0.6rem;
    color: var(--ns-fg-mute);
    font-size: 0.9rem;
}

:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main > .text-center > figure > .blockquote-footer cite {
    color: var(--ns-gold-soft);
    font-style: normal;
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* social links: small framed medallions, the height of the gold pill beside them (the view sets 100px inline) */
:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main > .text-center > a.navbar-brand {
    margin-inline-end: 0.5rem;
    padding-block: 0;
    vertical-align: middle;
}

:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main > .text-center > a.navbar-brand img {
    width: 3.1rem !important;
    height: 3.1rem !important;
    border-radius: 14px !important;
    max-width: 100%;
    padding: 4px;
    /* layout.css whitens every .navbar-brand img on editorial pages (meant for the
       header logo); this one is the Discord artwork: show it in its own colours */
    filter: none;
    background: rgba(252, 247, 239, 0.06);
    box-shadow: 0 0 0 1px var(--ns-line-gold), 0 10px 22px rgba(2, 6, 16, 0.4);
}

:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main > .text-center > a.navbar-brand:is(:hover, :focus-visible) img {
    box-shadow: 0 0 0 2px var(--ns-gold), 0 10px 22px rgba(2, 6, 16, 0.4);
}

/* "latest submissions": the page's one gold action */
:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main > .text-center > a.btn.btn-info {
    vertical-align: middle;
    padding: 0.6rem 1.35rem;
    background: var(--ns-accent-fill);
    border: 1px solid rgba(243, 211, 138, 0.9);
    border-radius: var(--ns-radius-pill);
    color: var(--ns-on-accent);
    box-shadow: var(--ns-glow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    font-weight: 800;
}

:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main > .text-center > a.btn.btn-info:is(:hover, :focus-visible) {
    background: linear-gradient(180deg, #fbe3a6 0%, #eec060 100%);
    color: var(--ns-on-accent);
}

/* the guest book: comments on a cream sheet */
:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main :is(.text-center > .card, .text-center ~ .card) {
    --ns-fg: var(--ns-paper-fg); --ns-fg-dim: var(--ns-paper-fg-dim); --ns-fg-mute: var(--ns-paper-fg-mute);
    --ns-heading: var(--ns-paper-heading); --ns-link: var(--ns-paper-link); --ns-link-hover: var(--ns-paper-link-hover);
    --ns-accent-text: var(--ns-paper-accent-text);
    --ns-line: var(--ns-paper-line); --ns-line-strong: var(--ns-paper-line-strong); --ns-line-gold: var(--ns-paper-line-gold);
    --ns-tint-1: var(--ns-paper-tint-1); --ns-tint-2: var(--ns-paper-tint-2); --ns-tint-3: var(--ns-paper-tint-3);
    --ns-focus: var(--ns-paper-focus);
    margin-top: 0.5rem;
    background: var(--ns-paper-surface) !important;
    border: 1px solid rgba(243, 211, 138, 0.55) !important;
    border-radius: 20px;
    box-shadow: var(--ns-shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    color: var(--ns-paper-fg);
    overflow: hidden;
    text-align: center;
}

:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main :is(.text-center > .card, .text-center ~ .card) > .card-header {
    background: linear-gradient(180deg, #13284a 0%, #0b1b33 100%);
    border-bottom: 1px solid rgba(166, 120, 20, 0.6);
    color: var(--ns-gold-soft);
    font-size: var(--ns-fs-overline);
    font-weight: 700;
    letter-spacing: var(--ns-track-overline);
    text-transform: uppercase;
}

:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main :is(.text-center > .card, .text-center ~ .card) > .card-body + .card-body {
    border-top: 1px dashed rgba(11, 27, 51, 0.18);
}

:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main :is(.text-center > .card, .text-center ~ .card) .card-subtitle.text-muted {
    color: var(--ns-paper-fg) !important;
    font-family: var(--ns-serif);
    font-size: 1.02rem;
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main :is(.text-center > .card, .text-center ~ .card) h5 {
    color: var(--ns-paper-heading);
    font-family: var(--ns-serif);
}

/* comment authors: ink name plates (the nav-link wrapper is only a link) */
:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main :is(.text-center > .card, .text-center ~ .card) a.nav-link {
    padding: 0;
}

:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main :is(.text-center > .card, .text-center ~ .card) a.nav-link .btn.btn-info {
    max-width: 100%;
    padding: 0.3rem 0.85rem;
    background: linear-gradient(180deg, #16305a 0%, #0b1b33 100%);
    border: 1px solid rgba(166, 120, 20, 0.7);
    border-radius: 8px;
    color: #f6dea0;
    box-shadow: 0 2px 6px rgba(11, 27, 51, 0.18);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: normal;
    overflow-wrap: anywhere;
}

:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main :is(.text-center > .card, .text-center ~ .card) a.nav-link:is(:hover, :focus-visible) .btn.btn-info {
    background: var(--ns-accent-fill);
    border-color: #a8791f;
    color: var(--ns-on-accent);
}

:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main :is(.text-center > .card, .text-center ~ .card) a.nav-link:focus-visible {
    outline: 0;
}

:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main :is(.text-center > .card, .text-center ~ .card) a.nav-link:focus-visible .btn.btn-info {
    outline: 2px solid var(--ns-paper-focus);
    outline-offset: 2px;
}

/* the page ends with the same breathing room above the footer as the other pages of the hall (the view
   has no page wrapper and its last blocks carry Bootstrap's !important mb-3 / my-sm-0) */
:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main:has(> .text-center > figure)::after {
    content: "";
    display: block;
    height: clamp(2.5rem, 6vw, 4.5rem);
}

/* the comment field under the guest book */
:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main > .text-center > #inputComment {
    margin-top: 1.25rem;
}

:root body:not(.online-profile-page) .tpn-place--records ~ .main-container > main > .text-center > #btn2 {
    margin-top: 0.75rem !important;
    padding-inline: 1.5rem;
}

/* ---------------------------------------------------------------- 8. Online Profiles (members): the harbor's service berths
   body.online-profile-page loads online-profile.css (light editorial cards); the theme turns its
   surfaces into the night glass of the hall. OP = :root body.online-profile-page .tpn-place--records ~ .main-container */

:root body.online-profile-page .tpn-place--records ~ .main-container > main::before {
    background: radial-gradient(circle, rgba(243, 211, 138, 0.1) 0%, rgba(243, 211, 138, 0.02) 56%, transparent 72%);
}

:root body.online-profile-page .tpn-place--records ~ .main-container > main::after {
    background: radial-gradient(circle, rgba(127, 233, 255, 0.06) 0%, rgba(127, 233, 255, 0.015) 48%, transparent 72%);
}

:root body.online-profile-page .tpn-place--records ~ .main-container {
    --ns-h1-transform: none; /* the profile titles are sentences ("Your ... profile:") */
}

:root body.online-profile-page .tpn-place--records ~ .main-container :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--ns-serif);
}

:root body.online-profile-page .tpn-place--records ~ .main-container h1 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* the service tiles: each game's office is a berth on the quay */
:root body.online-profile-page .tpn-place--records ~ .main-container .game-grid > .game-card {
    justify-content: flex-start;
    min-height: 104px;
    padding: 1.35rem 1.4rem 1.35rem 1.25rem;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(243, 211, 138, 0.1) 0%, rgba(243, 211, 138, 0) 55%),
        var(--ns-panel);
    border: 1px solid var(--ns-line);
    border-inline-start: 3px solid rgba(243, 211, 138, 0.55);
    border-radius: 18px;
    box-shadow: var(--ns-shadow-sm), inset 0 1px 0 var(--ns-tint-2);
    color: var(--ns-heading);
    text-align: start;
}

:root body.online-profile-page .tpn-place--records ~ .main-container .game-grid > .game-card::after {
    left: auto;
    inset-inline: 1rem;
    width: auto;
    height: 1px;
    background: var(--ns-hairline-gold);
}

:root body.online-profile-page .tpn-place--records ~ .main-container .game-grid > .game-card h3 {
    color: inherit;
    font-family: var(--ns-font); /* the Nation card title (sans), not the page's serif headings */
    font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.18rem);
    font-weight: 700;
    letter-spacing: 0.005em;
    line-height: 1.3;
    text-shadow: none;
    overflow-wrap: anywhere;
}

:root body.online-profile-page .tpn-place--records ~ .main-container .game-grid > .game-card:is(:hover, :focus-visible) {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(243, 211, 138, 0.18) 0%, rgba(243, 211, 138, 0) 60%),
        var(--ns-panel);
    border-color: rgba(243, 211, 138, 0.55);
    border-inline-start-color: var(--ns-gold);
    color: var(--ns-gold-soft);
    box-shadow: var(--ns-shadow), 0 0 0 1px rgba(243, 211, 138, 0.2);
}

:root body.online-profile-page .tpn-place--records ~ .main-container .game-grid > .game-card:focus-visible {
    outline: 2px solid var(--ns-focus);
    outline-offset: 3px;
}

/* the plain .alert of the page ("not subscribed") is a warning */
:root body.online-profile-page .tpn-place--records ~ .main-container .alert:not([class*="alert-"]) {
    --ns-alert: var(--ns-coral);
}

:root body.online-profile-page .tpn-place--records ~ .main-container .closebtn {
    color: var(--ns-fg-dim);
}

:root body.online-profile-page .tpn-place--records ~ .main-container .closebtn:hover {
    color: var(--ns-gold-soft);
}

/* the per-game profile pages: their light cards become night glass */
:root body.online-profile-page .tpn-place--records ~ .main-container :is(.tab-content, .adversary-selector, .adversary-management-container, .selected-player-display, .player-list) {
    background: var(--ns-panel);
    border: 1px solid var(--ns-line);
    box-shadow: var(--ns-shadow-sm), inset 0 1px 0 var(--ns-tint-2);
    color: var(--ns-fg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

:root body.online-profile-page .tpn-place--records ~ .main-container :is(.adversary-selector label, .adversary-section-label, .adversary-instructions) {
    background: var(--ns-tint-2);
    color: var(--ns-fg);
}

:root body.online-profile-page .tpn-place--records ~ .main-container .search-box {
    background: var(--ns-field);
    border-color: var(--ns-field-line);
    color: var(--ns-field-fg);
}

:root body.online-profile-page .tpn-place--records ~ .main-container .player-item {
    color: var(--ns-fg);
}

:root body.online-profile-page .tpn-place--records ~ .main-container .player-item:hover {
    background: rgba(243, 211, 138, 0.08);
}

:root body.online-profile-page .tpn-place--records ~ .main-container .player-item.selected {
    background: var(--ns-accent-fill);
    color: var(--ns-on-accent);
}

:root body.online-profile-page .tpn-place--records ~ .main-container .player-item.selected .player-info {
    color: rgba(27, 18, 3, 0.8) !important;
}

:root body.online-profile-page .tpn-place--records ~ .main-container :is(.control-label, .input-group-text) {
    color: var(--ns-fg-dim);
}

/* ---------------------------------------------------------------- 8b. the per-game pages: every form is a counter slip
   (EXVS2, EXVS2 XBOOST, Crossbeats, and the card pages). online-profile.css paints every <fieldset> as a light
   card (surface/cream gradient) while the base skin turns their labels, help text and read-only values ivory: the
   OnlineID on the "server could not be reached" page, and every field of the EXVS2 forms, were near-white on light
   grey (1.2:1). The slips become night glass like the rest of the Passport Office (the Account counter's pass paper,
   the game tiles above): gold labels, ivory values, the ID itself in the mono face. The online-profile.css pills of
   the game tabs (light, with the skin's ivory text) and its muted-ink notes that the skin does not reach (the
   adversary list, the change-PIN/change-name dialogs) are repainted the same way. The tab links, the adversary list
   and the dialogs are script-driven: colour, type, border, radius and shadow only. */

/* a slip on the page (the unreachable / no-profile states): a glass counter slip with a gold edge, like the tiles */
:root body.online-profile-page .tpn-place--records ~ .main-container fieldset {
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(243, 211, 138, 0.08) 0%, rgba(243, 211, 138, 0) 55%),
        var(--ns-panel);
    border: 1px solid var(--ns-line);
    border-inline-start: 3px solid rgba(243, 211, 138, 0.55);
    border-radius: 18px;
    box-shadow: var(--ns-shadow-sm), inset 0 1px 0 var(--ns-tint-2);
    color: var(--ns-fg);
}

/* ...and inside a panel (a tab of the form, a suit of the MS Data list): a quiet ruled slip, not glass on glass */
:root body.online-profile-page .tpn-place--records ~ .main-container :is(.tab-content, .list-group-item) fieldset {
    background: var(--ns-tint-1);
    border-color: var(--ns-line);
    border-inline-start-color: rgba(243, 211, 138, 0.4);
    border-radius: 16px;
    box-shadow: none;
}

/* the field names: gold, as on the Account counter (the prepended names of the gamepad, message, CPU and suit rows too) */
:root body.online-profile-page .tpn-place--records ~ .main-container :is(fieldset .control-label, .input-group-prepend > .input-group-text, .input-group > .input-group-text:first-child) {
    color: var(--ns-accent-text);
}

:root body.online-profile-page .tpn-place--records ~ .main-container .input-group-prepend > .input-group-text {
    background: rgba(243, 211, 138, 0.07);
    border-color: rgba(243, 211, 138, 0.3);
}

/* the units after a value ("/100", "/500") */
:root body.online-profile-page .tpn-place--records ~ .main-container .input-group-append > .input-group-text {
    color: var(--ns-fg-dim);
}

/* the ID a slip shows (OnlineID, the CPU total): ivory in the mono face, easy to read back and copy */
:root body.online-profile-page .tpn-place--records ~ .main-container fieldset .form-control[readonly] {
    background-color: rgba(4, 10, 24, 0.35);
    border-color: var(--ns-line-strong);
    color: var(--ns-heading);
    font-family: var(--ns-mono);
    letter-spacing: 0.04em;
}

/* phones: a 32-character OnlineID fits its field at 390 (the tracking made it 11px too wide inside a tab), and the
   slips inside a tab give their fields more of the column */
@media (max-width: 575.98px) {
    :root body.online-profile-page .tpn-place--records ~ .main-container fieldset .form-control[readonly] {
        letter-spacing: 0;
    }

    :root body.online-profile-page .tpn-place--records ~ .main-container .tab-content fieldset {
        padding-inline: 0.9rem;
    }
}

/* ":(" and its sentence (the server could not be reached / no profile yet): the refusal colour of the harbor */
:root body.online-profile-page .tpn-place--records ~ .main-container fieldset.form-group + h2 {
    color: var(--ns-coral-soft);
    font-family: var(--ns-font);
}

:root body.online-profile-page .tpn-place--records ~ .main-container fieldset.form-group + h2 + p {
    max-width: 68ch;
    color: var(--ns-fg-dim);
}

/* the game tabs (Base Profile, Gamepad Config...): online-profile.css's light pills become the counters' tabs,
   the open one gold (Bootstrap's tab script moves .active: colour, border and shadow only) */
:root body.online-profile-page .tpn-place--records ~ .main-container .nav-tabs .nav-link {
    background: var(--ns-tint-2);
    border-color: var(--ns-line-strong);
    color: var(--ns-fg-dim);
    box-shadow: none;
}

:root body.online-profile-page .tpn-place--records ~ .main-container .nav-tabs .nav-link:is(:hover, :focus) {
    background: rgba(243, 211, 138, 0.1);
    border-color: var(--ns-line-gold);
    color: var(--ns-heading);
}

:root body.online-profile-page .tpn-place--records ~ .main-container .nav-tabs :is(.nav-link.active, .show > .nav-link) {
    background: linear-gradient(180deg, rgba(243, 211, 138, 0.2) 0%, rgba(243, 211, 138, 0.07) 100%);
    border-color: rgba(243, 211, 138, 0.6);
    color: var(--ns-gold-soft);
    box-shadow: inset 0 -2px 0 var(--ns-gold), 0 10px 24px rgba(2, 6, 16, 0.3);
}

/* the card tables (APM3, WMMT6, MKDX, Bemani, Road Fighters 3D, Crossbeats' own profile) are detail lists like the
   Account counter's: the names in gold, the values ivory */
:root body.online-profile-page .tpn-place--records ~ .main-container .table > tbody > tr > td:first-child {
    color: var(--ns-accent-text);
}

/* a suit of the MS Data list: its facts' names in gold */
:root body.online-profile-page .tpn-place--records ~ .main-container :is(.list-group-item.mobileSuit b, .adversary-section-label) {
    color: var(--ns-accent-text);
}

/* ...and its mastery badge (the view's inline tier colours: gold stars on the silver and blue tiers read 1.6:1):
   a dark edge round the stars, the tier colours kept */
:root body.online-profile-page .tpn-place--records ~ .main-container .list-group-item.mobileSuit span[style*="border-radius"] {
    text-shadow: 0 0 1px rgba(6, 13, 29, 0.95), 0 0 2px rgba(6, 13, 29, 0.8);
}

/* Crossbeats' adversary list (written by the page script, with its own inline greys): the rank line under each
   name, the "search for more" / "no players found" notes and a chosen slot's rank points were #666/#999 ink or
   online-profile.css's muted ink on the night glass (1.0-3.0:1) */
:root body.online-profile-page .tpn-place--records ~ .main-container .player-item {
    border-bottom-color: var(--ns-line);
}

:root body.online-profile-page .tpn-place--records ~ .main-container .player-item:not(.selected) .player-info {
    color: var(--ns-fg-mute) !important;
}

:root body.online-profile-page .tpn-place--records ~ .main-container .player-list > div:not(.player-item) {
    background-color: var(--ns-tint-1) !important;
    border-top-color: var(--ns-line) !important;
    color: var(--ns-fg-mute) !important;
}

:root body.online-profile-page .tpn-place--records ~ .main-container .selected-player-display > span[style] {
    color: var(--ns-fg-mute) !important;
}

/* the change-PIN (Bemani) and change-name (Road Fighters 3D) dialogs: Bootstrap moves them to <body>, out of the
   column (page scope). The base turns the dialog navy; online-profile.css kept its note and its error line in muted
   ink (!important, 1.0:1) and its field light */
:root body.online-profile-page:has(> .tpn-place--records) .modal-content :is(.text-muted, .small) {
    color: var(--ns-fg-mute) !important;
}

:root body.online-profile-page:has(> .tpn-place--records) .modal-content .modal-body .text-danger {
    color: var(--ns-bad) !important;
}

:root body.online-profile-page:has(> .tpn-place--records) .modal-content .form-control {
    background: var(--ns-field);
    border: 1px solid var(--ns-field-line);
    border-radius: 12px;
    color: var(--ns-field-fg);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
}

:root body.online-profile-page:has(> .tpn-place--records) .modal-content .form-control::placeholder {
    color: var(--ns-placeholder);
    opacity: 1;
}

:root body.online-profile-page:has(> .tpn-place--records) .modal-content .form-control:focus {
    background: rgba(4, 10, 24, 0.72);
    border-color: var(--ns-gold);
    color: var(--ns-field-fg);
    box-shadow: var(--ns-focus-ring);
}

/* ...and the header (layout.css: z-index 1090) no longer covers the open dialog's title and close button: the
   dialog opens at the top of the window, under a 112px header, above the dimmed page (backdrop 1050) */
:root body.online-profile-page.modal-open:has(> .tpn-place--records) > header {
    z-index: 1039;
}

/* Score Submission: the private submission id is a slip of paper, the setup notes are glass panels */
:root body.online-profile-page .tpn-place--records ~ .main-container .highscore-profile-page .serial-card {
    background: var(--ns-paper-surface);
    border: 1px solid rgba(243, 211, 138, 0.6);
    border-radius: 16px;
    box-shadow: var(--ns-shadow-sm), inset 0 0 0 4px #f6efe1, inset 0 0 0 5px rgba(166, 120, 20, 0.35);
    color: var(--ns-paper-fg);
}

:root body.online-profile-page .tpn-place--records ~ .main-container .highscore-profile-page .serial-label {
    color: var(--ns-paper-accent-text);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

:root body.online-profile-page .tpn-place--records ~ .main-container .highscore-profile-page .serial-value {
    background: #0b1b33;
    color: var(--ns-gold-soft);
    font-family: var(--ns-mono);
    letter-spacing: 0.06em;
    overflow-wrap: anywhere;
}

:root body.online-profile-page .tpn-place--records ~ .main-container .highscore-profile-page .serial-warning {
    color: var(--ns-paper-fg-dim) !important;
}

:root body.online-profile-page .tpn-place--records ~ .main-container .highscore-profile-page .info-section {
    margin-top: 1.25rem;
    padding: clamp(1.1rem, 3vw, 1.6rem);
    background: var(--ns-panel);
    border: 1px solid var(--ns-line);
    border-radius: 20px;
    box-shadow: var(--ns-shadow-sm), inset 0 1px 0 var(--ns-tint-2);
}

:root body.online-profile-page .tpn-place--records ~ .main-container .highscore-profile-page .info-section h2 {
    border-bottom: 1px solid var(--ns-line-gold);
    color: var(--ns-heading);
}

:root body.online-profile-page .tpn-place--records ~ .main-container .highscore-profile-page .info-section :is(ol, ul) li::marker {
    color: var(--ns-gold-soft);
}

:root body.online-profile-page .tpn-place--records ~ .main-container .highscore-profile-page .info-section strong {
    color: var(--ns-heading);
}

/* ---------------------------------------------------------------- 9. the floating video player (page chrome: playInline() moves the
   wrapper to <body>, out of every page scope). Colour, border, radius and shadow only: its position and
   size belong to the page's inline styles. No page-dimming spread shadow: whether the moved wrapper is
   position: fixed depends on which partials' inline sheets the page carries (on /Highscore none does, and
   the player renders in the flow below the footer, a view bug), and a 100vmax spread on a wrapper in the
   flow painted a dark band over the page. The frame alone reads in both cases. */

:root body.editorial-page-active:not(.admin-page) > .video-wrapper.expanded {
    background: #060d1d;
    border-radius: 16px;
    box-shadow: 0 0 0 1px rgba(243, 211, 138, 0.55), 0 0 0 7px rgba(6, 13, 29, 0.92), 0 0 0 8px rgba(243, 211, 138, 0.3), 0 30px 80px rgba(2, 6, 16, 0.7);
}

:root body.editorial-page-active:not(.admin-page) > .video-wrapper.expanded iframe {
    border-radius: 12px;
}

:root body.editorial-page-active:not(.admin-page) > .video-wrapper.expanded .close-video {
    background: var(--ns-accent-fill);
    border: 1px solid rgba(251, 227, 166, 0.95);
    color: var(--ns-on-accent);
    box-shadow: 0 6px 16px rgba(2, 6, 16, 0.5);
}

:root body.editorial-page-active:not(.admin-page) > .video-wrapper.expanded .close-video:is(:hover, :focus-visible) {
    background: linear-gradient(180deg, #fff1c9 0%, #f3d38a 100%);
    outline: 2px solid var(--ns-ivory);
    outline-offset: 2px;
}

/* a name longer than its fixed column ends in an ellipsis instead of being cut mid-letter */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .records-table td.name-col .highscore-player-link.btn {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* the rankings chart in full screen (the chart script moves it into a .fullscreen-container on <body> and
   marks <html> with .is-fullscreen): a dark chart room around the light plotting sheet. Colours only. */
:root body.editorial-page-active:not(.admin-page) > .fullscreen-container {
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(243, 211, 138, 0.08) 0%, rgba(243, 211, 138, 0) 70%),
        var(--ns-ink);
    color: var(--ns-fg);
}

:root body.editorial-page-active:not(.admin-page) > .fullscreen-container .fullscreen-header h4 {
    color: var(--ns-heading);
    font-family: var(--ns-serif);
    font-weight: 700;
}

:root body.editorial-page-active:not(.admin-page) > .fullscreen-container .btn-outline-secondary {
    background: rgba(252, 247, 239, 0.06);
    border: 1px solid var(--ns-line-gold);
    border-radius: var(--ns-radius-pill);
    color: var(--ns-gold-soft);
}

:root body.editorial-page-active:not(.admin-page) > .fullscreen-container .btn-outline-secondary:is(:hover, :focus-visible) {
    background: rgba(243, 211, 138, 0.16);
    border-color: var(--ns-gold);
    color: var(--ns-ivory);
    outline: 2px solid var(--ns-focus);
    outline-offset: 2px;
}

:root body.editorial-page-active:not(.admin-page) > .fullscreen-container #handicapChart {
    background: #fbf7ee !important;
    border-color: rgba(243, 211, 138, 0.35) !important;
    border-radius: 10px;
}

:root body.editorial-page-active:not(.admin-page) > #tooltip,
:root body.editorial-page-active:not(.admin-page) > .fullscreen-container #tooltip {
    background: rgba(6, 13, 29, 0.95);
    border: 1px solid var(--ns-line-gold);
    color: var(--ns-ivory);
}

/* ---------------------------------------------------------------- 10. tablets and phones */

@media (max-width: 991.98px) {
    /* the latest submissions keep one line per record and scroll sideways inside their frame
       (squeezed into a tablet or phone width, every row grew to four lines) */
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .latest-submissions-table {
        width: max-content !important;
        min-width: 100%;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .latest-submissions-table :is(th, td) {
        white-space: nowrap;
    }
}

@media (max-width: 767.98px) {
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .latest-submissions-table {
        width: max-content !important;
        min-width: 100%;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .latest-submissions-table :is(th, td),
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .table-responsive > .table > :is(thead, tbody) > tr > :is(th, td) {
        white-space: nowrap;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .table-responsive > .table:not(.records-table) {
        width: max-content;
        min-width: 100%;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .latest-submissions-table td:first-child {
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
    /* editorial-pages.css makes every .btn full width on phones: not the name plates and lenses in a ledger */
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page :is(.table, .record-row) .btn {
        width: auto;
    }

    /* longest drive / longest putt: one plaque per row, so the names have room */
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .course-distance-container .course-content {
        grid-template-columns: 1fr;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface::after {
        inset: 6px;
        border-radius: 21px;
    }

    :root body.online-profile-page .tpn-place--records ~ .main-container .game-grid > .game-card {
        min-height: 72px;
        padding-block: 1rem;
    }
}

/* phones and tablets: the ledgers scroll sideways inside their frame (upstream design), so the frame says so:
   a thin gold scrollbar everywhere, and where scroll-driven animations exist a gold glow on the edge that
   has more columns behind it (it fades as that edge is reached). Background only: no mask, no filter (a
   ledger row's video player expands position: fixed from inside the frame). */
@property --rc-edge-start { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --rc-edge-end { syntax: "<number>"; inherits: false; initial-value: 0; }

@keyframes rc-ledger-edges {
    0% { --rc-edge-start: 0; --rc-edge-end: 1; }
    6% { --rc-edge-start: 1; }
    94% { --rc-edge-end: 1; }
    100% { --rc-edge-start: 1; --rc-edge-end: 0; }
}

@media (max-width: 767.98px) {
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .table-responsive {
        scrollbar-width: thin;
        scrollbar-color: rgba(243, 211, 138, 0.6) rgba(252, 247, 239, 0.06);
        background-image:
            linear-gradient(90deg, rgba(243, 211, 138, calc(var(--rc-edge-start) * 0.3)), rgba(243, 211, 138, 0)),
            linear-gradient(270deg, rgba(243, 211, 138, calc(var(--rc-edge-end) * 0.3)), rgba(243, 211, 138, 0)),
            linear-gradient(180deg, rgba(243, 211, 138, calc(var(--rc-edge-end) * 0.75)), rgba(243, 211, 138, calc(var(--rc-edge-end) * 0.75)));
        background-size: 26px 100%, 26px 100%, 1px 100%;
        background-position: left center, right center, right center;
        background-repeat: no-repeat;
    }

    @supports (animation-timeline: scroll()) {
        :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .table-responsive {
            animation: rc-ledger-edges linear both;
            animation-timeline: scroll(self inline);
        }
    }

    @supports not (animation-timeline: scroll()) {
        :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .table-responsive {
            --rc-edge-end: 1;
        }
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .table-responsive::-webkit-scrollbar { height: 6px; }
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .table-responsive::-webkit-scrollbar-thumb { background: rgba(243, 211, 138, 0.6); border-radius: 3px; }
}

/* phones and small tablets (a 14px root): the pills, name plates and column heads that were 9.8px get
   10.5px. The track records' inline sheet sets every .btn of its page to 0.7rem !important there (which
   also beat the plate sizes below), the drive/putt ledger does the same to its Show All; plates and pills
   that were larger keep their size. Below 576px the next block sets the record ledgers (.records-table) at
   0.78rem; a single record's scorecard keeps its own heads. */
@media (max-width: 767.98px) {
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page :is(.panel-heading .show-all-btn, .course-distance-container .course-header > .btn, .records-table td.name-col .highscore-player-link.btn) {
        font-size: 0.75rem !important;
    }

    /* ...and the page's other plates: the latest submissions and the top speeds (a plain .table-responsive table) */
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page:has(.records-table) :is(.latest-submissions-table, .table-responsive > .table) .highscore-player-link.btn {
        font-size: 0.75rem !important;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page:where(:not(.highscore-detail-page)) .table > thead > tr > th {
        font-size: 0.75rem;
    }
}

/* phones: the key columns of a ledger (rank, name, result) fit the first screen. Names are plates of a
   fixed width with an ellipsis, text cells wrap, the padding is tighter; type never drops below 10.5px.
   Columns keep their order and every row keeps its display (the Top 10 rows are toggled by script). */
@media (max-width: 575.98px) {
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .records-table > :is(thead, tbody) > tr > :is(th, td) {
        padding-inline: 0.3rem;
        font-size: 0.78rem;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .records-table > :is(thead, tbody) > tr > :is(th, td).rank-col {
        padding-inline: 0.15rem;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .records-table > tbody > tr > td.detail-col {
        width: 4.6rem;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.25;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .records-table td.name-col .highscore-player-link.btn {
        max-width: 7rem;
        padding: 0.38rem 0.5rem !important; /* beats the round-2 plate padding (itself over the page's inline !important) */
        font-size: 0.75rem;
    }

    /* the latest submissions: the plate is capped so the result columns come closer */
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .latest-submissions-table .highscore-player-link.btn {
        display: inline-block;
        max-width: 9.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.75rem;
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-page .latest-submissions-table > :is(thead, tbody) > tr > :is(th, td) {
        padding-inline: 0.45rem;
    }

    /* every other ledger (rankings, achievements, handicap history): the plate is capped too, 12px at the least */
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .table .highscore-player-link.btn {
        display: inline-block;
        max-width: 8.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
        font-size: max(0.75rem, 12px);
    }

    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .table-responsive > .table:not(.records-table) > :is(thead, tbody) > tr > :is(th, td) {
        padding-inline: 0.5rem;
    }
}

/* a long name ends in an ellipsis inside a whole plate: editorial-pages.css lifts the page's max-width at
   576px and below, and the 96px name column cut the plate flat, its border included (it also sets the
   plates to 0.7rem !important there: 9.8px) */
@media (max-width: 576px) {
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .record-row .name a {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.75rem !important;
    }

    /* the drive/putt plates are .btn plates, which editorial-pages.css turns into centred inline-flex boxes:
       no ellipsis on a flex box's text, so a long name lost both ends. Back to the view's own block plate
       that fits its name, read from the start */
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .course-distance-container .record-row .name a {
        display: block;
        width: fit-content;
        max-width: 100%;
        min-height: 0;
        text-align: start;
    }
}

/* chart legend: long names wrap inside the panel (list items are written by the chart script: type only) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page #legend .list-group-item {
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- 11. Arabic, Hebrew, Persian: no tracking is one global rule in the base
   (nation-site.css, section 14); the pages stay LTR (only .tp-nation blocks carry dir), so nothing else flips */

/* ...but the certificate's "Highscore by:" is a bare div the base patterns do not name (and its tracked rule
   above outranks them where they do), and the record count keeps editorial-pages.css's tracking: no tracking,
   no capitals, and the overline a step up like the theme's other Arabic overlines */
:root:is(:lang(ar), :lang(he), :lang(fa)) .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-detail-page .highscore-detail-surface :is(table td[colspan] > div, .scorecard-subtitle, .bowling-subtitle) {
    font-size: 0.86rem !important;
    letter-spacing: 0 !important;
    text-transform: none;
}

:root:is(:lang(ar), :lang(he), :lang(fa)) .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-record-count {
    letter-spacing: 0;
}

/* ---------------------------------------------------------------- 12. reduced motion: the service tiles stop lifting */
@media (prefers-reduced-motion: reduce) {
    :root body.online-profile-page .tpn-place--records ~ .main-container .game-grid > .game-card {
        transition: none;
    }

    :root body.online-profile-page .tpn-place--records ~ .main-container .game-grid > .game-card:hover {
        transform: none;
    }
}

/* ---------------------------------------------------------------- 13. review round 2
   RF = :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form */

/* phones: the list pages' form is a one-column grid (editorial-pages.css) whose auto track grew to the
   ledgers' min-content: the Top 10 page was 772px wide at 390. The track now shrinks to the column and
   each ledger scrolls sideways inside its own frame (.table-responsive, overflow-x: auto upstream). */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-list-page .highscores-rich-form {
    grid-template-columns: minmax(0, 1fr);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form > * {
    min-width: 0;
}

/* a player's page: its sections are built from sibling pieces (below), so the grid gap goes; margins space them */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscore-user-page .highscores-rich-form {
    row-gap: 0;
}

/* "Latest submissions" (GameSpecific) and every game of a player's page are printed straight into the form
   (h3, small, [div > button], .table-responsive) without a wrapper. They now read as one panel like the
   sections above them: the title, count and action form a glass cap (one flat colour, so the pieces join
   without seams) and the ledger is the panel's lower half. */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form {
    --rc-cap: rgba(19, 38, 69, 0.8);
    --rc-cap-pad: clamp(1.1rem, 3vw, 1.7rem);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form > h3:has(+ small.form-text + :is(.table-responsive, div:not([class]))) {
    margin: 1.5rem 0 0;
    padding: calc(var(--rc-cap-pad) - 0.2rem) var(--rc-cap-pad) 0.3rem;
    background: var(--rc-cap);
    border: 1px solid var(--ns-line);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: inset 0 1px 0 var(--ns-tint-2);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form > h3:first-child:has(+ small.form-text) {
    margin-top: 0;
}

/* the foil rule tops every cap, the first one included */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form > h3:has(+ small.form-text + :is(.table-responsive, div:not([class])))::before {
    content: "";
    margin-bottom: 0.9rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form > h3 + small.form-text:has(+ :is(.table-responsive, div:not([class]))),
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form > h3 + small.form-text + div:not([class]):has(+ .table-responsive) {
    margin: 0;
    padding: 0 var(--rc-cap-pad) 0.95rem;
    background: var(--rc-cap);
    border-inline: 1px solid var(--ns-line);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form > h3 + small.form-text + div:not([class]) > .btn {
    margin-top: 0 !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form > h3 + small.form-text + .table-responsive,
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form > h3 + small.form-text + div:not([class]) + .table-responsive {
    margin: 0 0 1.5rem;
    border: 1px solid var(--ns-line);
    border-top-color: var(--ns-line-gold);
    border-radius: 0 0 22px 22px;
    box-shadow: var(--ns-shadow), inset 0 1px 0 rgba(252, 247, 239, 0.04);
}

/* a game nobody has played yet (0 submissions): no header row over blank lines, an empty dashed berth
   with a dash, like the empty Top 10 (the count above already says "0 total submissions") */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form > .table-responsive:has(> .table > tbody):not(:has(> .table > tbody > tr)) {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    padding-block: 0; /* no room needed for a video pop-up in an empty ledger */
    border-style: dashed;
    border-color: var(--ns-line-strong);
    background: rgba(4, 10, 24, 0.22);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form > .table-responsive:has(> .table > tbody):not(:has(> .table > tbody > tr)) > .table {
    display: none;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .highscores-rich-form > .table-responsive:has(> .table > tbody):not(:has(> .table > tbody > tr))::before {
    content: "\2014";
    content: "\2014" / "";
    color: var(--ns-fg-mute);
    font-family: var(--ns-serif);
    font-size: 1.25rem;
}

/* tablets and phones: the page's inline sheet squeezes every .btn to ~2px of padding while
   editorial-pages.css keeps a 2.55rem minimum height, so the name plates grew tall with their name
   stuck to the top edge; they get an even padding instead */
@media (max-width: 900px) {
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .records-table td.name-col .highscore-player-link.btn {
        min-height: 0;
        padding: 0.42rem 0.6rem !important;
        line-height: 1.2;
    }
}

@media (max-width: 575.98px) {
    /* "Show All" keeps its size next to the track name (editorial-pages.css makes every .btn full width) */
    :root .tpn-place:not(.tpn-place--passport) ~ .main-container .highscores-rich-page .course-header > .btn {
        flex: none;
        width: auto;
        padding: 0.3rem 0.8rem !important;
    }
}

/* Online Profiles: online-profile.css sets its narrow label face and capitals on every .btn, the header's
   language switcher included (it read "ENGLISH"); the header is fixed in the base, see nation-site.css */

/* the two notices share one width (the second carries an inline max-width: 900px) */
:root body.online-profile-page .tpn-place--records ~ .main-container > main > .alert[style*="max-width"] {
    max-width: none !important;
    margin-inline: 0 !important;
}

/* online-profile.css hangs a glow past the right edge of <main> (-96px up to 991, -64px above), which widened the
   page and gave it a sideways scroll below 1440 (465px at 390, 852 at 768, 1044 at 992, 1395 at 1366; the fixed
   cookie banner widened with it): the glow ends at the column's edge at every width */
:root body.online-profile-page .tpn-place--records ~ .main-container > main::before {
    right: 0;
}

/* ==================================================================== gate.css */

/* ==========================================================================
   TeknoParrot Nation site theme: the Harbor Gate and the Passport Office
   Pages: /Identity/Account/* (+ Manage/*), /{culture}/Home/Subscription (the sheet, and the pricing block repainted:
          section 6b, visual properties only)
   Imported at the top of nation-site.css (so the base rules come later in the
   cascade: out-specify them, don't repeat them). Loaded only while
   Citizen:PublicUi is on. Read SYSTEM.md (tokens, scope prefixes, recipes)
   before adding rules. House rules, in short:
   - scope every rule under the content prefix plus your page class, e.g.
       :root .tpn-place:not(.tpn-place--passport) ~ .main-container .identity-shell ...
     (page chrome: :root body.editorial-page-active:not(.admin-page) ...);
   - use the --ns-* tokens; never define or change a --tp-* property;
   - inside the pricing block (.subscription-pricing-container) and on .price,
     [data-tier], .btn-gradient, .paddle-checkout-btn: repaint only (section 6b);
   - on script-driven elements (INVENTORY 4.6) colour, type, border, radius and
     shadow only: no display, position, order, visibility, transform;
   - body text 4.5:1 or better, visible :focus-visible, rtl-safe (logical
     properties), no web fonts, no external URLs, no z-index above 1039.

   The idea
   - The Harbor Gate (Identity pages): every account form is a harbour pass, the
     same security print as the Citizen passport: navy paper, a double foil
     frame, a guilloche rosette, a machine-readable strip along the foot. Log in
     and Register are boarding passes: the empty second column of their grid
     becomes the tear-off stub (seal + barcode) behind a perforation; the narrow
     pages carry the stub under the pass. Refusals (Access denied, Lockout) get
     a coral seal and a stamped notice. Manage pages (signed in, not loadable
     here) share the pass paper through .identity-panel and get ledger tabs.
   - The Passport Office (Subscription): an official document on the night
     canvas (guilloche band, a foil mount ring); inside, the protected pricing
     in the passport's print (navy cover, ivory visa pages, foil stamps),
     repainted without moving a box.

   Scopes used here
   G  = :root body.identity-page .tpn-place--gate ~ .main-container      (0,4,1)
   PO = :root body.editorial-page-active .tpn-place--passport ~ .main-container
   PP = PO .subscription-pricing-container (the pricing block, section 6b)
   The patterns are inline SVG (generated by gate/gen.py in the design notes),
   decorative only; the only glyphs are the MRZ filler, drawn as an image.
   ========================================================================== */

/* ---------------------------------------------------------------- 0. patterns */

/* (the home page's charter and founder panels print with the same plates: home.css) */
:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) {
    --gate-rosette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200' width='200' height='200'%3E%3Cdefs%3E%3Cpath id='a' d='M82 0l4.9 1.9 2 2-2.1 1.8-5.1 1.4-5.1 1.3-2.2 1.4 1.8 1.9 4.6 2.5 4.5 2.8 1.6 2.3-2.4 1.4-5.3 0.5-5.2 0.4-2.5 1 1.5 2.2 4.1 3.2 3.9 3.5 1.2 2.6-2.6 0.9-5.3-0.3-5.2-0.6-2.6 0.5 1.1 2.5 3.4 3.9 3.3 4.1 0.8 2.7-2.8 0.5-5.1-1.3-5.1-1.4-2.6 0.1 0.6 2.5 2.7 4.5 2.6 4.6 0.2 2.8-2.8 0-4.8-2.1-4.7-2.3-2.6-0.4 0.1 2.6 1.9 4.9 1.7 5-0.2 2.8-2.8-0.5-4.4-2.9-4.2-3.1-2.5-0.8-0.3 2.6 1 5.1 0.8 5.2-0.7 2.7-2.6-0.9-3.8-3.7-3.7-3.8-2.3-1.2-0.8 2.5 0.1 5.3-0.1 5.2-1.1 2.6-2.5-1.4-3.1-4.3-2.9-4.4-2.1-1.6-1.2 2.4-0.8 5.2-1 5.1-1.6 2.3-2.1-1.8-2.4-4.7-2.1-4.8-1.7-2-1.6 2.1-1.7 5-1.9 4.9-2 2-1.8-2.1-1.4-5.1-1.3-5.1-1.4-2.2-1.9 1.8-2.5 4.6-2.8 4.5-2.3 1.6-1.4-2.4-0.5-5.3-0.4-5.2-1-2.5-2.2 1.5-3.2 4.1-3.5 3.9-2.6 1.2-0.9-2.6 0.3-5.3 0.6-5.2-0.5-2.6-2.5 1.1-3.9 3.4-4.1 3.3-2.7 0.8-0.5-2.8 1.3-5.1 1.4-5.1-0.1-2.6-2.5 0.6-4.5 2.7-4.6 2.6-2.8 0.2 0-2.8 2.1-4.8 2.3-4.7 0.4-2.6-2.6 0.1-4.9 1.9-5 1.7-2.8-0.2 0.5-2.8 2.9-4.4 3.1-4.2 0.8-2.5-2.6-0.3-5.1 1-5.2 0.8-2.7-0.7 0.9-2.6 3.7-3.8 3.8-3.7 1.2-2.3-2.5-0.8-5.3 0.1-5.2-0.1-2.6-1.1 1.4-2.5 4.3-3.1 4.4-2.9 1.6-2.1-2.4-1.2-5.2-0.8-5.1-1-2.3-1.6 1.8-2.1 4.7-2.4 4.8-2.1 2-1.7-2.1-1.6-5-1.7-4.9-1.9-2-2 2.1-1.8 5.1-1.4 5.1-1.3 2.2-1.4-1.8-1.9-4.6-2.5-4.5-2.8-1.6-2.3 2.4-1.4 5.3-0.5 5.2-0.4 2.5-1-1.5-2.2-4.1-3.2-3.9-3.5-1.2-2.6 2.6-0.9 5.3 0.3 5.2 0.6 2.6-0.5-1.1-2.5-3.4-3.9-3.3-4.1-0.8-2.7 2.8-0.5 5.1 1.3 5.1 1.4 2.6-0.1-0.6-2.5-2.7-4.5-2.6-4.6-0.2-2.8 2.8 0 4.8 2.1 4.7 2.3 2.6 0.4-0.1-2.6-1.9-4.9-1.7-5 0.2-2.8 2.8 0.5 4.4 2.9 4.2 3.1 2.5 0.8 0.3-2.6-1-5.1-0.8-5.2 0.7-2.7 2.6 0.9 3.8 3.7 3.7 3.8 2.3 1.2 0.8-2.5-0.1-5.3 0.1-5.2 1.1-2.6 2.5 1.4 3.1 4.3 2.9 4.4 2.1 1.6 1.2-2.4 0.8-5.2 1-5.1 1.6-2.3 2.1 1.8 2.4 4.7 2.1 4.8 1.7 2 1.6-2.1 1.7-5 1.9-4.9 2-2 1.8 2.1 1.4 5.1 1.3 5.1 1.4 2.2 1.9-1.8 2.5-4.6 2.8-4.5 2.3-1.6 1.4 2.4 0.5 5.3 0.4 5.2 1 2.5 2.2-1.5 3.2-4.1 3.5-3.9 2.6-1.2 0.9 2.6-0.3 5.3-0.6 5.2 0.5 2.6 2.5-1.1 3.9-3.4 4.1-3.3 2.7-0.8 0.5 2.8-1.3 5.1-1.4 5.1 0.1 2.6 2.5-0.6 4.5-2.7 4.6-2.6 2.8-0.2 0 2.8-2.1 4.8-2.3 4.7-0.4 2.6 2.6-0.1 4.9-1.9 5-1.7 2.8 0.2-0.5 2.8-2.9 4.4-3.1 4.2-0.8 2.5 2.6 0.3 5.1-1 5.2-0.8 2.7 0.7-0.9 2.6-3.7 3.8-3.8 3.7-1.2 2.3 2.5 0.8 5.3-0.1 5.2 0.1 2.6 1.1-1.4 2.5-4.3 3.1-4.4 2.9-1.6 2.1 2.4 1.2 5.2 0.8 5.1 1 2.3 1.6-1.8 2.1-4.7 2.4-4.8 2.1-2 1.7 2.1 1.6 5 1.7z'/%3E%3Cpath id='b' d='M60 0l5.3 1.7 3.2 1.9-0.2 1.8-3.4 1.4-5.4 1-5.5 0.8-3.4 0.8-0.3 1.3 2.9 2.1 4.8 2.7 4.6 3 2.6 2.7-0.6 1.7-3.6 0.5-5.6-0.4-5.4-0.7-3.6-0.2-0.6 1.3 2.3 2.7 3.9 3.9 3.7 4.1 1.8 3.2-1 1.5-3.7-0.4-5.2-1.9-5.1-2.1-3.4-1-0.9 1 1.5 3.3 2.7 4.7 2.5 5 1 3.5-1.4 1.2-3.4-1.4-4.6-3.1-4.3-3.3-3.1-1.9-1.1 0.7 0.6 3.5 1.4 5.4 1.2 5.4-0.1 3.7-1.6 0.8-2.9-2.3-3.6-4.2-3.4-4.3-2.4-2.6-1.3 0.4-0.4 3.6 0 5.5-0.3 5.5-0.9 3.6-1.8 0.3-2.3-2.9-2.4-5-2.1-5.1-1.7-3.1-1.3 0.1-1.3 3.3-1.4 5.3-1.7 5.3-1.9 3.2-1.8-0.2-1.4-3.4-1-5.4-0.8-5.5-0.8-3.4-1.3-0.3-2.1 2.9-2.7 4.8-3 4.6-2.7 2.6-1.7-0.6-0.5-3.6 0.4-5.6 0.7-5.4 0.2-3.6-1.3-0.6-2.7 2.3-3.9 3.9-4.1 3.7-3.2 1.8-1.5-1 0.4-3.7 1.9-5.2 2.1-5.1 1-3.4-1-0.9-3.3 1.5-4.7 2.7-5 2.5-3.5 1-1.2-1.4 1.4-3.4 3.1-4.6 3.3-4.3 1.9-3.1-0.7-1.1-3.5 0.6-5.4 1.4-5.4 1.2-3.7-0.1-0.8-1.6 2.3-2.9 4.2-3.6 4.3-3.4 2.6-2.4-0.4-1.3-3.6-0.4-5.5 0-5.5-0.3-3.6-0.9-0.3-1.8 2.9-2.3 5-2.4 5.1-2.1 3.1-1.7-0.1-1.3-3.3-1.3-5.3-1.4-5.3-1.7-3.2-1.9 0.2-1.8 3.4-1.4 5.4-1 5.5-0.8 3.4-0.8 0.3-1.3-2.9-2.1-4.8-2.7-4.6-3-2.6-2.7 0.6-1.7 3.6-0.5 5.6 0.4 5.4 0.7 3.6 0.2 0.6-1.3-2.3-2.7-3.9-3.9-3.7-4.1-1.8-3.2 1-1.5 3.7 0.4 5.2 1.9 5.1 2.1 3.4 1 0.9-1-1.5-3.3-2.7-4.7-2.5-5-1-3.5 1.4-1.2 3.4 1.4 4.6 3.1 4.3 3.3 3.1 1.9 1.1-0.7-0.6-3.5-1.4-5.4-1.2-5.4 0.1-3.7 1.6-0.8 2.9 2.3 3.6 4.2 3.4 4.3 2.4 2.6 1.3-0.4 0.4-3.6 0-5.5 0.3-5.5 0.9-3.6 1.8-0.3 2.3 2.9 2.4 5 2.1 5.1 1.7 3.1 1.3-0.1 1.3-3.3 1.4-5.3 1.7-5.3 1.9-3.2 1.8 0.2 1.4 3.4 1 5.4 0.8 5.5 0.8 3.4 1.3 0.3 2.1-2.9 2.7-4.8 3-4.6 2.7-2.6 1.7 0.6 0.5 3.6-0.4 5.6-0.7 5.4-0.2 3.6 1.3 0.6 2.7-2.3 3.9-3.9 4.1-3.7 3.2-1.8 1.5 1-0.4 3.7-1.9 5.2-2.1 5.1-1 3.4 1 0.9 3.3-1.5 4.7-2.7 5-2.5 3.5-1 1.2 1.4-1.4 3.4-3.1 4.6-3.3 4.3-1.9 3.1 0.7 1.1 3.5-0.6 5.4-1.4 5.4-1.2 3.7 0.1 0.8 1.6-2.3 2.9-4.2 3.6-4.3 3.4-2.6 2.4 0.4 1.3 3.6 0.4 5.5 0 5.5 0.3 3.6 0.9 0.3 1.8-2.9 2.3-5 2.4-5.1 2.1-3.1 1.7 0.1 1.3 3.3 1.3 5.3 1.4z'/%3E%3Cpath id='c' d='M40 0l3.5 1.4 2.5 1.6 0.8 1.6-1.1 1.4-2.8 1.1-3.7 0.7-3.7 0.5-2.7 0.5-1.2 0.8 0.5 1.3 2.1 2 2.8 2.4 2.6 2.7 1.7 2.4 0.2 1.8-1.6 0.8-3 0-3.6-0.8-3.6-0.9-2.8-0.6-1.4 0.2 0 1.5 1.1 2.6 1.7 3.3 1.4 3.4 0.7 2.9-0.6 1.7-1.8 0.2-2.7-1.1-3.1-2.1-2.9-2.3-2.3-1.6-1.4-0.3-0.6 1.3 0.1 2.8 0.2 3.8 0 3.7-0.5 2.9-1.2 1.4-1.7-0.5-2-2.1-2.1-3.2-1.9-3.2-1.5-2.4-1.2-0.8-1 1.1-1 2.6-1.2 3.5-1.4 3.5-1.6 2.5-1.6 0.8-1.4-1.1-1.1-2.8-0.7-3.7-0.5-3.7-0.5-2.7-0.8-1.2-1.3 0.5-2 2.1-2.4 2.8-2.7 2.6-2.4 1.7-1.8 0.2-0.8-1.6 0-3 0.8-3.6 0.9-3.6 0.6-2.8-0.2-1.4-1.5 0-2.6 1.1-3.3 1.7-3.4 1.4-2.9 0.7-1.7-0.6-0.2-1.8 1.1-2.7 2.1-3.1 2.3-2.9 1.6-2.3 0.3-1.4-1.3-0.6-2.8 0.1-3.8 0.2-3.7 0-2.9-0.5-1.4-1.2 0.5-1.7 2.1-2 3.2-2.1 3.2-1.9 2.4-1.5 0.8-1.2-1.1-1-2.6-1-3.5-1.2-3.5-1.4-2.5-1.6-0.8-1.6 1.1-1.4 2.8-1.1 3.7-0.7 3.7-0.5 2.7-0.5 1.2-0.8-0.5-1.3-2.1-2-2.8-2.4-2.6-2.7-1.7-2.4-0.2-1.8 1.6-0.8 3 0 3.6 0.8 3.6 0.9 2.8 0.6 1.4-0.2 0-1.5-1.1-2.6-1.7-3.3-1.4-3.4-0.7-2.9 0.6-1.7 1.8-0.2 2.7 1.1 3.1 2.1 2.9 2.3 2.3 1.6 1.4 0.3 0.6-1.3-0.1-2.8-0.2-3.8 0-3.7 0.5-2.9 1.2-1.4 1.7 0.5 2 2.1 2.1 3.2 1.9 3.2 1.5 2.4 1.2 0.8 1-1.1 1-2.6 1.2-3.5 1.4-3.5 1.6-2.5 1.6-0.8 1.4 1.1 1.1 2.8 0.7 3.7 0.5 3.7 0.5 2.7 0.8 1.2 1.3-0.5 2-2.1 2.4-2.8 2.7-2.6 2.4-1.7 1.8-0.2 0.8 1.6 0 3-0.8 3.6-0.9 3.6-0.6 2.8 0.2 1.4 1.5 0 2.6-1.1 3.3-1.7 3.4-1.4 2.9-0.7 1.7 0.6 0.2 1.8-1.1 2.7-2.1 3.1-2.3 2.9-1.6 2.3-0.3 1.4 1.3 0.6 2.8-0.1 3.8-0.2 3.7 0 2.9 0.5 1.4 1.2-0.5 1.7-2.1 2-3.2 2.1-3.2 1.9-2.4 1.5-0.8 1.2 1.1 1 2.6 1 3.5 1.2z'/%3E%3C/defs%3E%3Cg fill='none' stroke='%23f3d38a' stroke-opacity='.34' stroke-width='.4'%3E%3Cuse href='%23a' transform='rotate(0)'/%3E%3Cuse href='%23a' transform='rotate(1.7)'/%3E%3Cuse href='%23a' transform='rotate(3.3)'/%3E%3Cuse href='%23a' transform='rotate(5)'/%3E%3Cuse href='%23a' transform='rotate(6.7)'/%3E%3Cuse href='%23a' transform='rotate(8.3)'/%3E%3Cuse href='%23b' transform='rotate(0)'/%3E%3Cuse href='%23b' transform='rotate(3)'/%3E%3Cuse href='%23b' transform='rotate(6)'/%3E%3Cuse href='%23b' transform='rotate(9)'/%3E%3Cuse href='%23b' transform='rotate(12)'/%3E%3Cuse href='%23c' transform='rotate(0)'/%3E%3Cuse href='%23c' transform='rotate(5.6)'/%3E%3Cuse href='%23c' transform='rotate(11.2)'/%3E%3Cuse href='%23c' transform='rotate(16.9)'/%3E%3Ccircle r='93'/%3E%3Ccircle r='95.5' stroke-dasharray='.6 1.4'/%3E%3Ccircle r='71'/%3E%3Ccircle r='49'/%3E%3Ccircle r='16'/%3E%3C/g%3E%3C/svg%3E");
    --gate-rosette-faint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-100 -100 200 200' width='200' height='200'%3E%3Cdefs%3E%3Cpath id='a' d='M82 0l4.9 1.9 2 2-2.1 1.8-5.1 1.4-5.1 1.3-2.2 1.4 1.8 1.9 4.6 2.5 4.5 2.8 1.6 2.3-2.4 1.4-5.3 0.5-5.2 0.4-2.5 1 1.5 2.2 4.1 3.2 3.9 3.5 1.2 2.6-2.6 0.9-5.3-0.3-5.2-0.6-2.6 0.5 1.1 2.5 3.4 3.9 3.3 4.1 0.8 2.7-2.8 0.5-5.1-1.3-5.1-1.4-2.6 0.1 0.6 2.5 2.7 4.5 2.6 4.6 0.2 2.8-2.8 0-4.8-2.1-4.7-2.3-2.6-0.4 0.1 2.6 1.9 4.9 1.7 5-0.2 2.8-2.8-0.5-4.4-2.9-4.2-3.1-2.5-0.8-0.3 2.6 1 5.1 0.8 5.2-0.7 2.7-2.6-0.9-3.8-3.7-3.7-3.8-2.3-1.2-0.8 2.5 0.1 5.3-0.1 5.2-1.1 2.6-2.5-1.4-3.1-4.3-2.9-4.4-2.1-1.6-1.2 2.4-0.8 5.2-1 5.1-1.6 2.3-2.1-1.8-2.4-4.7-2.1-4.8-1.7-2-1.6 2.1-1.7 5-1.9 4.9-2 2-1.8-2.1-1.4-5.1-1.3-5.1-1.4-2.2-1.9 1.8-2.5 4.6-2.8 4.5-2.3 1.6-1.4-2.4-0.5-5.3-0.4-5.2-1-2.5-2.2 1.5-3.2 4.1-3.5 3.9-2.6 1.2-0.9-2.6 0.3-5.3 0.6-5.2-0.5-2.6-2.5 1.1-3.9 3.4-4.1 3.3-2.7 0.8-0.5-2.8 1.3-5.1 1.4-5.1-0.1-2.6-2.5 0.6-4.5 2.7-4.6 2.6-2.8 0.2 0-2.8 2.1-4.8 2.3-4.7 0.4-2.6-2.6 0.1-4.9 1.9-5 1.7-2.8-0.2 0.5-2.8 2.9-4.4 3.1-4.2 0.8-2.5-2.6-0.3-5.1 1-5.2 0.8-2.7-0.7 0.9-2.6 3.7-3.8 3.8-3.7 1.2-2.3-2.5-0.8-5.3 0.1-5.2-0.1-2.6-1.1 1.4-2.5 4.3-3.1 4.4-2.9 1.6-2.1-2.4-1.2-5.2-0.8-5.1-1-2.3-1.6 1.8-2.1 4.7-2.4 4.8-2.1 2-1.7-2.1-1.6-5-1.7-4.9-1.9-2-2 2.1-1.8 5.1-1.4 5.1-1.3 2.2-1.4-1.8-1.9-4.6-2.5-4.5-2.8-1.6-2.3 2.4-1.4 5.3-0.5 5.2-0.4 2.5-1-1.5-2.2-4.1-3.2-3.9-3.5-1.2-2.6 2.6-0.9 5.3 0.3 5.2 0.6 2.6-0.5-1.1-2.5-3.4-3.9-3.3-4.1-0.8-2.7 2.8-0.5 5.1 1.3 5.1 1.4 2.6-0.1-0.6-2.5-2.7-4.5-2.6-4.6-0.2-2.8 2.8 0 4.8 2.1 4.7 2.3 2.6 0.4-0.1-2.6-1.9-4.9-1.7-5 0.2-2.8 2.8 0.5 4.4 2.9 4.2 3.1 2.5 0.8 0.3-2.6-1-5.1-0.8-5.2 0.7-2.7 2.6 0.9 3.8 3.7 3.7 3.8 2.3 1.2 0.8-2.5-0.1-5.3 0.1-5.2 1.1-2.6 2.5 1.4 3.1 4.3 2.9 4.4 2.1 1.6 1.2-2.4 0.8-5.2 1-5.1 1.6-2.3 2.1 1.8 2.4 4.7 2.1 4.8 1.7 2 1.6-2.1 1.7-5 1.9-4.9 2-2 1.8 2.1 1.4 5.1 1.3 5.1 1.4 2.2 1.9-1.8 2.5-4.6 2.8-4.5 2.3-1.6 1.4 2.4 0.5 5.3 0.4 5.2 1 2.5 2.2-1.5 3.2-4.1 3.5-3.9 2.6-1.2 0.9 2.6-0.3 5.3-0.6 5.2 0.5 2.6 2.5-1.1 3.9-3.4 4.1-3.3 2.7-0.8 0.5 2.8-1.3 5.1-1.4 5.1 0.1 2.6 2.5-0.6 4.5-2.7 4.6-2.6 2.8-0.2 0 2.8-2.1 4.8-2.3 4.7-0.4 2.6 2.6-0.1 4.9-1.9 5-1.7 2.8 0.2-0.5 2.8-2.9 4.4-3.1 4.2-0.8 2.5 2.6 0.3 5.1-1 5.2-0.8 2.7 0.7-0.9 2.6-3.7 3.8-3.8 3.7-1.2 2.3 2.5 0.8 5.3-0.1 5.2 0.1 2.6 1.1-1.4 2.5-4.3 3.1-4.4 2.9-1.6 2.1 2.4 1.2 5.2 0.8 5.1 1 2.3 1.6-1.8 2.1-4.7 2.4-4.8 2.1-2 1.7 2.1 1.6 5 1.7z'/%3E%3Cpath id='b' d='M60 0l5.3 1.7 3.2 1.9-0.2 1.8-3.4 1.4-5.4 1-5.5 0.8-3.4 0.8-0.3 1.3 2.9 2.1 4.8 2.7 4.6 3 2.6 2.7-0.6 1.7-3.6 0.5-5.6-0.4-5.4-0.7-3.6-0.2-0.6 1.3 2.3 2.7 3.9 3.9 3.7 4.1 1.8 3.2-1 1.5-3.7-0.4-5.2-1.9-5.1-2.1-3.4-1-0.9 1 1.5 3.3 2.7 4.7 2.5 5 1 3.5-1.4 1.2-3.4-1.4-4.6-3.1-4.3-3.3-3.1-1.9-1.1 0.7 0.6 3.5 1.4 5.4 1.2 5.4-0.1 3.7-1.6 0.8-2.9-2.3-3.6-4.2-3.4-4.3-2.4-2.6-1.3 0.4-0.4 3.6 0 5.5-0.3 5.5-0.9 3.6-1.8 0.3-2.3-2.9-2.4-5-2.1-5.1-1.7-3.1-1.3 0.1-1.3 3.3-1.4 5.3-1.7 5.3-1.9 3.2-1.8-0.2-1.4-3.4-1-5.4-0.8-5.5-0.8-3.4-1.3-0.3-2.1 2.9-2.7 4.8-3 4.6-2.7 2.6-1.7-0.6-0.5-3.6 0.4-5.6 0.7-5.4 0.2-3.6-1.3-0.6-2.7 2.3-3.9 3.9-4.1 3.7-3.2 1.8-1.5-1 0.4-3.7 1.9-5.2 2.1-5.1 1-3.4-1-0.9-3.3 1.5-4.7 2.7-5 2.5-3.5 1-1.2-1.4 1.4-3.4 3.1-4.6 3.3-4.3 1.9-3.1-0.7-1.1-3.5 0.6-5.4 1.4-5.4 1.2-3.7-0.1-0.8-1.6 2.3-2.9 4.2-3.6 4.3-3.4 2.6-2.4-0.4-1.3-3.6-0.4-5.5 0-5.5-0.3-3.6-0.9-0.3-1.8 2.9-2.3 5-2.4 5.1-2.1 3.1-1.7-0.1-1.3-3.3-1.3-5.3-1.4-5.3-1.7-3.2-1.9 0.2-1.8 3.4-1.4 5.4-1 5.5-0.8 3.4-0.8 0.3-1.3-2.9-2.1-4.8-2.7-4.6-3-2.6-2.7 0.6-1.7 3.6-0.5 5.6 0.4 5.4 0.7 3.6 0.2 0.6-1.3-2.3-2.7-3.9-3.9-3.7-4.1-1.8-3.2 1-1.5 3.7 0.4 5.2 1.9 5.1 2.1 3.4 1 0.9-1-1.5-3.3-2.7-4.7-2.5-5-1-3.5 1.4-1.2 3.4 1.4 4.6 3.1 4.3 3.3 3.1 1.9 1.1-0.7-0.6-3.5-1.4-5.4-1.2-5.4 0.1-3.7 1.6-0.8 2.9 2.3 3.6 4.2 3.4 4.3 2.4 2.6 1.3-0.4 0.4-3.6 0-5.5 0.3-5.5 0.9-3.6 1.8-0.3 2.3 2.9 2.4 5 2.1 5.1 1.7 3.1 1.3-0.1 1.3-3.3 1.4-5.3 1.7-5.3 1.9-3.2 1.8 0.2 1.4 3.4 1 5.4 0.8 5.5 0.8 3.4 1.3 0.3 2.1-2.9 2.7-4.8 3-4.6 2.7-2.6 1.7 0.6 0.5 3.6-0.4 5.6-0.7 5.4-0.2 3.6 1.3 0.6 2.7-2.3 3.9-3.9 4.1-3.7 3.2-1.8 1.5 1-0.4 3.7-1.9 5.2-2.1 5.1-1 3.4 1 0.9 3.3-1.5 4.7-2.7 5-2.5 3.5-1 1.2 1.4-1.4 3.4-3.1 4.6-3.3 4.3-1.9 3.1 0.7 1.1 3.5-0.6 5.4-1.4 5.4-1.2 3.7 0.1 0.8 1.6-2.3 2.9-4.2 3.6-4.3 3.4-2.6 2.4 0.4 1.3 3.6 0.4 5.5 0 5.5 0.3 3.6 0.9 0.3 1.8-2.9 2.3-5 2.4-5.1 2.1-3.1 1.7 0.1 1.3 3.3 1.3 5.3 1.4z'/%3E%3Cpath id='c' d='M40 0l3.5 1.4 2.5 1.6 0.8 1.6-1.1 1.4-2.8 1.1-3.7 0.7-3.7 0.5-2.7 0.5-1.2 0.8 0.5 1.3 2.1 2 2.8 2.4 2.6 2.7 1.7 2.4 0.2 1.8-1.6 0.8-3 0-3.6-0.8-3.6-0.9-2.8-0.6-1.4 0.2 0 1.5 1.1 2.6 1.7 3.3 1.4 3.4 0.7 2.9-0.6 1.7-1.8 0.2-2.7-1.1-3.1-2.1-2.9-2.3-2.3-1.6-1.4-0.3-0.6 1.3 0.1 2.8 0.2 3.8 0 3.7-0.5 2.9-1.2 1.4-1.7-0.5-2-2.1-2.1-3.2-1.9-3.2-1.5-2.4-1.2-0.8-1 1.1-1 2.6-1.2 3.5-1.4 3.5-1.6 2.5-1.6 0.8-1.4-1.1-1.1-2.8-0.7-3.7-0.5-3.7-0.5-2.7-0.8-1.2-1.3 0.5-2 2.1-2.4 2.8-2.7 2.6-2.4 1.7-1.8 0.2-0.8-1.6 0-3 0.8-3.6 0.9-3.6 0.6-2.8-0.2-1.4-1.5 0-2.6 1.1-3.3 1.7-3.4 1.4-2.9 0.7-1.7-0.6-0.2-1.8 1.1-2.7 2.1-3.1 2.3-2.9 1.6-2.3 0.3-1.4-1.3-0.6-2.8 0.1-3.8 0.2-3.7 0-2.9-0.5-1.4-1.2 0.5-1.7 2.1-2 3.2-2.1 3.2-1.9 2.4-1.5 0.8-1.2-1.1-1-2.6-1-3.5-1.2-3.5-1.4-2.5-1.6-0.8-1.6 1.1-1.4 2.8-1.1 3.7-0.7 3.7-0.5 2.7-0.5 1.2-0.8-0.5-1.3-2.1-2-2.8-2.4-2.6-2.7-1.7-2.4-0.2-1.8 1.6-0.8 3 0 3.6 0.8 3.6 0.9 2.8 0.6 1.4-0.2 0-1.5-1.1-2.6-1.7-3.3-1.4-3.4-0.7-2.9 0.6-1.7 1.8-0.2 2.7 1.1 3.1 2.1 2.9 2.3 2.3 1.6 1.4 0.3 0.6-1.3-0.1-2.8-0.2-3.8 0-3.7 0.5-2.9 1.2-1.4 1.7 0.5 2 2.1 2.1 3.2 1.9 3.2 1.5 2.4 1.2 0.8 1-1.1 1-2.6 1.2-3.5 1.4-3.5 1.6-2.5 1.6-0.8 1.4 1.1 1.1 2.8 0.7 3.7 0.5 3.7 0.5 2.7 0.8 1.2 1.3-0.5 2-2.1 2.4-2.8 2.7-2.6 2.4-1.7 1.8-0.2 0.8 1.6 0 3-0.8 3.6-0.9 3.6-0.6 2.8 0.2 1.4 1.5 0 2.6-1.1 3.3-1.7 3.4-1.4 2.9-0.7 1.7 0.6 0.2 1.8-1.1 2.7-2.1 3.1-2.3 2.9-1.6 2.3-0.3 1.4 1.3 0.6 2.8-0.1 3.8-0.2 3.7 0 2.9 0.5 1.4 1.2-0.5 1.7-2.1 2-3.2 2.1-3.2 1.9-2.4 1.5-0.8 1.2 1.1 1 2.6 1 3.5 1.2z'/%3E%3C/defs%3E%3Cg fill='none' stroke='%23f3d38a' stroke-opacity='.2' stroke-width='.4'%3E%3Cuse href='%23a' transform='rotate(0)'/%3E%3Cuse href='%23a' transform='rotate(1.7)'/%3E%3Cuse href='%23a' transform='rotate(3.3)'/%3E%3Cuse href='%23a' transform='rotate(5)'/%3E%3Cuse href='%23a' transform='rotate(6.7)'/%3E%3Cuse href='%23a' transform='rotate(8.3)'/%3E%3Cuse href='%23b' transform='rotate(0)'/%3E%3Cuse href='%23b' transform='rotate(3)'/%3E%3Cuse href='%23b' transform='rotate(6)'/%3E%3Cuse href='%23b' transform='rotate(9)'/%3E%3Cuse href='%23b' transform='rotate(12)'/%3E%3Cuse href='%23c' transform='rotate(0)'/%3E%3Cuse href='%23c' transform='rotate(5.6)'/%3E%3Cuse href='%23c' transform='rotate(11.2)'/%3E%3Cuse href='%23c' transform='rotate(16.9)'/%3E%3Ccircle r='93'/%3E%3Ccircle r='95.5' stroke-dasharray='.6 1.4'/%3E%3Ccircle r='71'/%3E%3Ccircle r='49'/%3E%3Ccircle r='16'/%3E%3C/g%3E%3C/svg%3E");
    --gate-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' width='240' height='16'%3E%3Cg fill='none' stroke='%23f3d38a' stroke-opacity='.32' stroke-width='.6'%3E%3Cpath d='M0 8L4 9.6L8 11L12 11.8L16 12L20 11.5L24 10.4L28 8.8L32 7.2L36 5.6L40 4.5L44 4L48 4.2L52 5L56 6.4L60 8L64 9.6L68 11L72 11.8L76 12L80 11.5L84 10.4L88 8.8L92 7.2L96 5.6L100 4.5L104 4L108 4.2L112 5L116 6.4L120 8L124 9.6L128 11L132 11.8L136 12L140 11.5L144 10.4L148 8.8L152 7.2L156 5.6L160 4.5L164 4L168 4.2L172 5L176 6.4L180 8L184 9.6L188 11L192 11.8L196 12L200 11.5L204 10.4L208 8.8L212 7.2L216 5.6L220 4.5L224 4L228 4.2L232 5L236 6.4L240 8'/%3E%3Cpath d='M0 8L4 6.4L8 5L12 4.2L16 4L20 4.5L24 5.6L28 7.2L32 8.8L36 10.4L40 11.5L44 12L48 11.8L52 11L56 9.6L60 8L64 6.4L68 5L72 4.2L76 4L80 4.5L84 5.6L88 7.2L92 8.8L96 10.4L100 11.5L104 12L108 11.8L112 11L116 9.6L120 8L124 6.4L128 5L132 4.2L136 4L140 4.5L144 5.6L148 7.2L152 8.8L156 10.4L160 11.5L164 12L168 11.8L172 11L176 9.6L180 8L184 6.4L188 5L192 4.2L196 4L200 4.5L204 5.6L208 7.2L212 8.8L216 10.4L220 11.5L224 12L228 11.8L232 11L236 9.6L240 8'/%3E%3Cpath d='M0 10.5L4 10.3L8 9.7L12 8.8L16 7.7L20 6.8L24 6L28 5.6L32 5.6L36 6L40 6.7L44 7.7L48 8.8L52 9.7L56 10.3L60 10.5L64 10.3L68 9.7L72 8.8L76 7.7L80 6.8L84 6L88 5.6L92 5.6L96 6L100 6.8L104 7.7L108 8.8L112 9.7L116 10.3L120 10.5L124 10.3L128 9.7L132 8.8L136 7.7L140 6.8L144 6L148 5.6L152 5.6L156 6L160 6.7L164 7.7L168 8.8L172 9.7L176 10.3L180 10.5L184 10.3L188 9.7L192 8.8L196 7.7L200 6.8L204 6L208 5.6L212 5.6L216 6L220 6.8L224 7.7L228 8.8L232 9.7L236 10.3L240 10.5'/%3E%3C/g%3E%3C/svg%3E");
    --gate-waves-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16' width='240' height='16'%3E%3Cg fill='none' stroke='%238a6414' stroke-opacity='.42' stroke-width='.6'%3E%3Cpath d='M0 8L4 9.6L8 11L12 11.8L16 12L20 11.5L24 10.4L28 8.8L32 7.2L36 5.6L40 4.5L44 4L48 4.2L52 5L56 6.4L60 8L64 9.6L68 11L72 11.8L76 12L80 11.5L84 10.4L88 8.8L92 7.2L96 5.6L100 4.5L104 4L108 4.2L112 5L116 6.4L120 8L124 9.6L128 11L132 11.8L136 12L140 11.5L144 10.4L148 8.8L152 7.2L156 5.6L160 4.5L164 4L168 4.2L172 5L176 6.4L180 8L184 9.6L188 11L192 11.8L196 12L200 11.5L204 10.4L208 8.8L212 7.2L216 5.6L220 4.5L224 4L228 4.2L232 5L236 6.4L240 8'/%3E%3Cpath d='M0 8L4 6.4L8 5L12 4.2L16 4L20 4.5L24 5.6L28 7.2L32 8.8L36 10.4L40 11.5L44 12L48 11.8L52 11L56 9.6L60 8L64 6.4L68 5L72 4.2L76 4L80 4.5L84 5.6L88 7.2L92 8.8L96 10.4L100 11.5L104 12L108 11.8L112 11L116 9.6L120 8L124 6.4L128 5L132 4.2L136 4L140 4.5L144 5.6L148 7.2L152 8.8L156 10.4L160 11.5L164 12L168 11.8L172 11L176 9.6L180 8L184 6.4L188 5L192 4.2L196 4L200 4.5L204 5.6L208 7.2L212 8.8L216 10.4L220 11.5L224 12L228 11.8L232 11L236 9.6L240 8'/%3E%3Cpath d='M0 10.5L4 10.3L8 9.7L12 8.8L16 7.7L20 6.8L24 6L28 5.6L32 5.6L36 6L40 6.7L44 7.7L48 8.8L52 9.7L56 10.3L60 10.5L64 10.3L68 9.7L72 8.8L76 7.7L80 6.8L84 6L88 5.6L92 5.6L96 6L100 6.8L104 7.7L108 8.8L112 9.7L116 10.3L120 10.5L124 10.3L128 9.7L132 8.8L136 7.7L140 6.8L144 6L148 5.6L152 5.6L156 6L160 6.7L164 7.7L168 8.8L172 9.7L176 10.3L180 10.5L184 10.3L188 9.7L192 8.8L196 7.7L200 6.8L204 6L208 5.6L212 5.6L216 6L220 6.8L224 7.7L228 8.8L232 9.7L236 10.3L240 10.5'/%3E%3C/g%3E%3C/svg%3E");
    --gate-seal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' width='120' height='120'%3E%3Cg fill='none' stroke='%23f3d38a' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='60' cy='60' r='57' stroke-width='1.4'/%3E%3Ccircle cx='60' cy='60' r='53' stroke-width='.6'/%3E%3Ccircle cx='60' cy='60' r='47' stroke-width='1.8' stroke-dasharray='0 6.15'/%3E%3Ccircle cx='60' cy='60' r='41' stroke-width='.8' stroke-opacity='.7'/%3E%3Ccircle cx='60' cy='36' r='4.6' stroke-width='2.2'/%3E%3Cpath stroke-width='2.4' d='M60 41V86M49 48H71M38 70C40 82 49 87 60 87S80 82 82 70'/%3E%3Cpath stroke-width='2.2' d='M34 75L38 69L44 73M86 75L82 69L76 73'/%3E%3Cpath fill='%23f3d38a' stroke='none' d='M27 55.8L28.1 58.5L31 58.7L28.8 60.6L29.5 63.4L27 61.9L24.5 63.4L25.2 60.6L23 58.7L25.9 58.5Z'/%3E%3Cpath fill='%23f3d38a' stroke='none' d='M93 55.8L94.1 58.5L97 58.7L94.8 60.6L95.5 63.4L93 61.9L90.5 63.4L91.2 60.6L89 58.7L91.9 58.5Z'/%3E%3C/g%3E%3C/svg%3E");
    --gate-barcode: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 36' width='180' height='36' preserveAspectRatio='none'%3E%3Cg fill='%23f3d38a' fill-opacity='.62'%3E%3Crect x='3' width='1' height='36'/%3E%3Crect x='6' width='1' height='36'/%3E%3Crect x='8' width='3' height='36'/%3E%3Crect x='12' width='2' height='36'/%3E%3Crect x='15' width='1' height='36'/%3E%3Crect x='17' width='3' height='36'/%3E%3Crect x='26' width='3' height='36'/%3E%3Crect x='30' width='1' height='36'/%3E%3Crect x='32' width='1.5' height='36'/%3E%3Crect x='35.5' width='1' height='36'/%3E%3Crect x='38.5' width='1' height='36'/%3E%3Crect x='41.5' width='1' height='36'/%3E%3Crect x='44.5' width='1' height='36'/%3E%3Crect x='47.5' width='1' height='36'/%3E%3Crect x='58.5' width='1.5' height='36'/%3E%3Crect x='61' width='1' height='36'/%3E%3Crect x='63.5' width='3' height='36'/%3E%3Crect x='68' width='2' height='36'/%3E%3Crect x='71' width='1' height='36'/%3E%3Crect x='73' width='1.5' height='36'/%3E%3Crect x='76' width='2' height='36'/%3E%3Crect x='83' width='1.5' height='36'/%3E%3Crect x='86' width='3' height='36'/%3E%3Crect x='106.5' width='1.5' height='36'/%3E%3Crect x='109.5' width='1.5' height='36'/%3E%3Crect x='112' width='2' height='36'/%3E%3Crect x='121.5' width='1' height='36'/%3E%3Crect x='124' width='3' height='36'/%3E%3Crect x='138.5' width='1' height='36'/%3E%3Crect x='140.5' width='1' height='36'/%3E%3Crect x='143.5' width='1' height='36'/%3E%3Crect x='145.5' width='1' height='36'/%3E%3Crect x='148' width='3' height='36'/%3E%3Crect x='157' width='1' height='36'/%3E%3Crect x='160' width='3' height='36'/%3E%3Crect x='164.5' width='2' height='36'/%3E%3Crect x='168.5' width='2' height='36'/%3E%3Crect x='171.5' width='1' height='36'/%3E%3Crect x='173.5' width='1.5' height='36'/%3E%3C/g%3E%3C/svg%3E");
    --gate-seal-coral: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' width='120' height='120'%3E%3Cg fill='none' stroke='%23ffb4a9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='60' cy='60' r='57' stroke-width='1.4'/%3E%3Ccircle cx='60' cy='60' r='53' stroke-width='.6'/%3E%3Ccircle cx='60' cy='60' r='47' stroke-width='1.8' stroke-dasharray='0 6.15'/%3E%3Ccircle cx='60' cy='60' r='41' stroke-width='.8' stroke-opacity='.7'/%3E%3Ccircle cx='60' cy='36' r='4.6' stroke-width='2.2'/%3E%3Cpath stroke-width='2.4' d='M60 41V86M49 48H71M38 70C40 82 49 87 60 87S80 82 82 70'/%3E%3Cpath stroke-width='2.2' d='M34 75L38 69L44 73M86 75L82 69L76 73'/%3E%3Cpath fill='%23ffb4a9' stroke='none' d='M27 55.8L28.1 58.5L31 58.7L28.8 60.6L29.5 63.4L27 61.9L24.5 63.4L25.2 60.6L23 58.7L25.9 58.5Z'/%3E%3Cpath fill='%23ffb4a9' stroke='none' d='M93 55.8L94.1 58.5L97 58.7L94.8 60.6L95.5 63.4L93 61.9L90.5 63.4L91.2 60.6L89 58.7L91.9 58.5Z'/%3E%3C/g%3E%3C/svg%3E");
    --gate-stop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48' height='48'%3E%3Cg fill='none' stroke='%23ffb4a9' stroke-linecap='round'%3E%3Ccircle cx='24' cy='24' r='22' stroke-width='1.6'/%3E%3Ccircle cx='24' cy='24' r='18.5' stroke-width='.7' stroke-dasharray='0 3.1'/%3E%3Cpath stroke-width='3' d='M15 24H33'/%3E%3C/g%3E%3C/svg%3E");
    --gate-lantern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 92' width='60' height='92'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23f3d38a' stop-opacity='.34'/%3E%3Cstop offset='1' stop-color='%23f3d38a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='30' cy='50' r='30' fill='url(%23g)'/%3E%3Cg fill='none' stroke='%23f3d38a' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke-width='1.4' d='M30 0V15'/%3E%3Ccircle cx='30' cy='18.5' r='3.4' stroke-width='1.6'/%3E%3Cpath stroke-width='1.8' d='M17 28H43L37.5 22.5H22.5Z'/%3E%3Crect x='19.5' y='28' width='21' height='34' rx='1.5' stroke-width='1.8'/%3E%3Cpath stroke-width='1.8' d='M16.5 62H43.5V67H16.5Z'/%3E%3Cpath stroke-width='1.2' d='M30 28V62'/%3E%3C/g%3E%3Crect x='22.5' y='31' width='6' height='28' fill='%237fe9ff' fill-opacity='.72'/%3E%3Crect x='31.5' y='31' width='6' height='28' fill='%23ff8fe6' fill-opacity='.62'/%3E%3Cpath d='M22.5 31L28.5 59M37.5 31L31.5 59' stroke='%23f3d38a' stroke-opacity='.55' stroke-width='1'/%3E%3Cpath fill='none' stroke='%23f3d38a' stroke-opacity='.5' stroke-width='1' d='M8 80q5.5-4 11 0t11 0 11 0 11 0M14 87q4-3 8 0t8 0 8 0 8 0'/%3E%3C/svg%3E");
    --gate-mrz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 36' width='1400' height='36' preserveAspectRatio='xMinYMid slice'%3E%3Cg fill='%23f3d38a' fill-opacity='.46' font-family='Consolas,Menlo,monospace' font-size='12.5' letter-spacing='4.2'%3E%3Ctext x='0' y='14'%3EG&lt;TPN&lt;HARBOR&lt;GATE&lt;&lt;ARK&lt;PIER&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;%3C/text%3E%3Ctext x='0' y='32'%3ETPN1911201207&lt;&lt;&lt;P&lt;LANTERN&lt;7&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;%3C/text%3E%3C/g%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- 1. the pass paper (every Identity panel) */

:root body.identity-page .tpn-place--gate ~ .main-container .identity-panel {
    --gate-frame: rgba(243, 211, 138, 0.46);
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(238, 154, 110, 0.1) 0%, rgba(238, 154, 110, 0) 55%),
        var(--gate-rosette-faint) right -170px top -190px / 440px 440px no-repeat,
        linear-gradient(162deg, #12294f 0%, #0d1f3d 48%, #0a1731 100%);
    border: 1px solid rgba(243, 211, 138, 0.3);
    border-radius: 22px;
    box-shadow: var(--ns-shadow), inset 0 1px 0 rgba(252, 247, 239, 0.07);
    /* the panel is opaque now: nothing to blur, and no backdrop root under the stub's shadow */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--ns-fg);
}

/* the printed double frame (the old corner glows become two foil hairlines) */
:root body.identity-page .tpn-place--gate ~ .main-container .identity-panel::before,
:root body.identity-page .tpn-place--gate ~ .main-container .identity-panel::after {
    inset: 10px;
    width: auto;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--gate-frame);
    background: none;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-panel::after {
    inset: 14px;
    border-radius: 11px;
    border-color: rgba(243, 211, 138, 0.15);
}

/* title: the site's H1, with a short foil rule under it */
:root body.identity-page .tpn-place--gate ~ .main-container .identity-title {
    line-height: 1.02;
    overflow-wrap: anywhere;
    hyphens: auto;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-shell .identity-title::after {
    content: "";
    display: block !important; /* site.css hides every h1::after with !important */
    width: 3.25rem;
    height: 2px;
    margin-top: 0.95rem;
    border-radius: 2px;
    background: linear-gradient(90deg, #f3d38a, rgba(243, 211, 138, 0));
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-subtitle {
    color: var(--ns-fg-dim);
    margin-top: 0.85rem;
    line-height: 1.6;
}

/* ---------------------------------------------------------------- 2. the pass: Account pages (.identity-shell) */

:root body.identity-page .tpn-place--gate ~ .main-container .identity-shell {
    --gate-pad: clamp(1.35rem, 0.9rem + 2.3vw, 2.9rem);
    --gate-mrz-h: 68px;
    max-width: 900px;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-shell--narrow {
    max-width: 660px;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-shell .identity-panel {
    padding: var(--gate-pad) var(--gate-pad) calc(var(--gate-pad) + var(--gate-mrz-h));
    background:
        var(--gate-mrz) left calc(var(--gate-pad) - 2px) bottom 30px / calc(100% - 2 * var(--gate-pad) + 4px) 30px no-repeat,
        linear-gradient(rgba(3, 8, 20, 0.5), rgba(3, 8, 20, 0.5)) center bottom 15px / calc(100% - 30px) 60px no-repeat,
        linear-gradient(90deg, rgba(243, 211, 138, 0), rgba(243, 211, 138, 0.4) 50%, rgba(243, 211, 138, 0)) center bottom 75px / calc(100% - 30px) 1px no-repeat,
        radial-gradient(120% 80% at 100% 0%, rgba(238, 154, 110, 0.1) 0%, rgba(238, 154, 110, 0) 55%),
        var(--gate-rosette-faint) right -150px top -170px / 380px 380px no-repeat,
        linear-gradient(162deg, #12294f 0%, #0d1f3d 48%, #0a1731 100%);
}

/* the boarding pass leaves the rosette to its stub */
:root body.identity-page .tpn-place--gate ~ .main-container .identity-auth-grid > .identity-panel {
    background-image:
        var(--gate-mrz),
        linear-gradient(rgba(3, 8, 20, 0.5), rgba(3, 8, 20, 0.5)),
        linear-gradient(90deg, rgba(243, 211, 138, 0), rgba(243, 211, 138, 0.4) 50%, rgba(243, 211, 138, 0)),
        radial-gradient(120% 80% at 100% 0%, rgba(238, 154, 110, 0.1) 0%, rgba(238, 154, 110, 0) 55%),
        none,
        linear-gradient(162deg, #12294f 0%, #0d1f3d 48%, #0a1731 100%);
}

/* fields: inked wells with a gold caption, like the passport's data fields */
:root body.identity-page .tpn-place--gate ~ .main-container .floating-label-group {
    margin-bottom: 0;
}

:root body.identity-page .tpn-place--gate ~ .main-container .floating-label-group .form-control {
    background-color: rgba(3, 9, 22, 0.55);
    border: 1px solid rgba(243, 211, 138, 0.24);
    border-radius: 12px;
    color: #fcf7ef;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
    min-height: 62px;
    /* the value sits below its caption, not centred into it (the caption is pinned to the top of the well) */
    padding-top: 1.55rem;
    padding-bottom: 0.45rem;
    font-size: 1.02rem;
}

:root body.identity-page .tpn-place--gate ~ .main-container .floating-label-group .form-control:hover {
    border-color: rgba(243, 211, 138, 0.42);
}

:root body.identity-page .tpn-place--gate ~ .main-container .floating-label-group .form-control:focus {
    background-color: rgba(3, 9, 22, 0.72);
    border-color: var(--ns-gold);
    box-shadow: var(--ns-focus-ring), inset 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* script-toggled validation: colour and border only */
:root body.identity-page .tpn-place--gate ~ .main-container .floating-label-group .form-control:is(.input-validation-error, .is-invalid) {
    border-color: var(--ns-coral);
    box-shadow: 0 0 0 3px rgba(255, 122, 107, 0.18), inset 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* browser autofill keeps the well dark (colour only) */
:root body.identity-page .tpn-place--gate ~ .main-container .floating-label-group .form-control:-webkit-autofill {
    -webkit-text-fill-color: #fcf7ef;
    caret-color: #fcf7ef;
    box-shadow: inset 0 0 0 100px #0a1730;
}

:root body.identity-page .tpn-place--gate ~ .main-container .floating-label-group .form-control:-webkit-autofill:focus {
    box-shadow: inset 0 0 0 100px #0a1730, var(--ns-focus-ring);
}

:root body.identity-page .tpn-place--gate ~ .main-container .floating-label-group .floating-label {
    color: rgba(243, 211, 138, 0.82);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.2em;
}

:root body.identity-page .tpn-place--gate ~ .main-container .floating-label-group .form-control:focus + .floating-label {
    color: #f3d38a;
}

:root body.identity-page .tpn-place--gate ~ .main-container .floating-label-group .form-control:is(.input-validation-error, .is-invalid) + .floating-label {
    color: var(--ns-coral-soft);
}

/* validation (jquery-validation toggles these classes: colour, border, spacing only) */
:root body.identity-page .tpn-place--gate ~ .main-container .floating-label-group .field-validation-error {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ns-coral-soft) !important;
}

/* breathing room between the well and its (inline, script-shown) message: spacing on the well, the message is untouched */
@supports selector(:has(*)) {
    :root body.identity-page .tpn-place--gate ~ .main-container .floating-label-group:has(> .field-validation-error) > .form-control {
        margin-bottom: 0.4rem;
    }
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-form-stack .validation-summary-errors {
    padding: 0.8rem 1rem;
    border: 1px solid rgba(255, 122, 107, 0.45);
    border-inline-start: 3px solid var(--ns-coral);
    border-radius: 12px;
    background: rgba(255, 122, 107, 0.09);
    color: var(--ns-coral-soft) !important;
    font-size: 0.92rem;
    font-weight: 600;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-form-stack .validation-summary-errors ul {
    margin: 0;
    padding-inline-start: 1.1rem;
}

/* remember me / remember this machine */
:root body.identity-page .tpn-place--gate ~ .main-container .identity-shell .checkbox label {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--ns-fg-dim);
    cursor: pointer;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-shell .checkbox input[type="checkbox"] {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--ns-gold);
    border-color: rgba(243, 211, 138, 0.6);
    border-radius: 4px;
}

/* keyboard focus: a solid gold outline (the soft 3px halo is under 3:1 on the navy pass) */
:root body.identity-page .tpn-place--gate ~ .main-container input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--ns-focus);
    outline-offset: 2px;
    box-shadow: none;
}

/* the one gold CTA */
:root body.identity-page .tpn-place--gate ~ .main-container .identity-form-stack .btn-primary:not(:where(.btn-gradient, .paddle-checkout-btn)) {
    width: 100%; /* LoginWith2fa's button is the only one without .w-100 */
    min-height: 56px;
    padding-inline: 1.6rem;
    font-size: 1.05rem;
    letter-spacing: 0.06em;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-form-stack .btn-primary:not(:where(.btn-gradient, .paddle-checkout-btn)):focus-visible {
    outline: 2px solid #fcf7ef;
    outline-offset: 3px;
    box-shadow: var(--ns-glow-gold), 0 0 0 5px rgba(243, 211, 138, 0.35);
}

/* the reCAPTCHA widget is Google's light box: give it a quiet ivory mount so it reads as intended */
:root body.identity-page .tpn-place--gate ~ .main-container .identity-form-stack .g-recaptcha {
    display: inline-block;
    padding: 4px;
    border-radius: 8px;
    background: #f9f9f9;
    box-shadow: 0 0 0 1px rgba(243, 211, 138, 0.3), var(--ns-shadow-sm);
    line-height: 0;
}

/* the links under the form: behind a perforation, gold, separated by lantern dots */
:root body.identity-page .tpn-place--gate ~ .main-container .identity-shell .identity-links {
    gap: 0.6rem 1.35rem;
    margin-top: 1.6rem;
    padding-top: 1.2rem;
    border-top: 1px dashed rgba(243, 211, 138, 0.28);
    font-size: 0.95rem;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-shell .identity-links a {
    position: relative;
    font-weight: 600;
    color: #f3d38a;
    text-decoration: underline;
    text-decoration-color: rgba(243, 211, 138, 0.4);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-shell .identity-links a:hover {
    color: #fcf7ef;
    text-decoration-color: currentColor;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-shell .identity-links > span {
    color: var(--ns-fg-dim);
}

/* every link carries a small foil diamond (a separator that still reads right when German strings wrap) */
:root body.identity-page .tpn-place--gate ~ .main-container .identity-shell .identity-links > a::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-inline-end: 0.55rem;
    vertical-align: 0.2em;
    background: rgba(243, 211, 138, 0.7);
    transform: rotate(45deg);
    pointer-events: none;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-shell .identity-links > a:is(:hover, :focus-visible)::before {
    background: #fcf7ef;
}

/* ---------------------------------------------------------------- 3. the stub (boarding pass) */

/* Log in / Register: the grid's second column was an (empty, commented-out) aside.
   It becomes the tear-off stub; the pass and the stub meet at a perforation with
   two punched notches. Decorative only (a pseudo-element, no text). */
:root body.identity-page .tpn-place--gate ~ .main-container .identity-auth-grid {
    gap: 0;
    align-items: stretch;
    /* a box-shadow, not filter: drop-shadow (a filter would make the grid the containing block of any
       position: fixed descendant). The panels are masked (notches), so the shadow sits on the grid. */
    border-radius: 22px;
    box-shadow: 0 22px 40px rgba(2, 6, 16, 0.42);
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-auth-grid > .identity-panel {
    box-shadow: inset 0 1px 0 rgba(252, 247, 239, 0.07);
}

:root body.identity-page .tpn-place--gate ~ .main-container :is(.identity-auth-grid, .identity-shell--narrow)::after {
    content: "";
    display: block;
    box-sizing: border-box;
    border: 1px solid rgba(243, 211, 138, 0.3);
    background:
        var(--gate-stub-lantern, none) center top clamp(30px, 3.2vw, 46px) / 54px 83px no-repeat,
        var(--gate-stub-rule, none) center bottom 104px / 62% 1px no-repeat,
        var(--gate-seal) var(--gate-seal-pos, center 36%) / var(--gate-seal-size, clamp(92px, 8.5vw, 124px)) no-repeat,
        var(--gate-rosette) var(--gate-rosette-pos, var(--gate-seal-pos, center 36%)) / var(--gate-rosette-size, min(94%, 230px)) no-repeat,
        var(--gate-barcode) var(--gate-bar-pos, center bottom 34px) / var(--gate-bar-size, 68% 44px) no-repeat,
        radial-gradient(90% 60% at 50% 36%, rgba(243, 211, 138, 0.08) 0%, rgba(243, 211, 138, 0) 70%),
        linear-gradient(172deg, #14305a 0%, #0e2242 55%, #0a1731 100%);
}

/* wide: the stub stands to the end of the pass */
@media (min-width: 992px) {
    :root body.identity-page .tpn-place--gate ~ .main-container .identity-auth-grid {
        grid-template-columns: minmax(0, 1fr) clamp(190px, 17vw, 240px);
    }

    :root body.identity-page .tpn-place--gate ~ .main-container .identity-auth-grid > .identity-panel {
        border-start-end-radius: 0;
        border-end-end-radius: 0;
        -webkit-mask: radial-gradient(circle at 100% 0, transparent 12px, #000 12.5px) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent 12px, #000 12.5px) bottom / 100% 51% no-repeat;
        mask: radial-gradient(circle at 100% 0, transparent 12px, #000 12.5px) top / 100% 51% no-repeat, radial-gradient(circle at 100% 100%, transparent 12px, #000 12.5px) bottom / 100% 51% no-repeat;
    }

    :root body.identity-page .tpn-place--gate ~ .main-container .identity-auth-grid::after {
        --gate-stub-lantern: var(--gate-lantern);
        --gate-stub-rule: linear-gradient(90deg, rgba(243, 211, 138, 0), rgba(243, 211, 138, 0.5) 50%, rgba(243, 211, 138, 0));
        --gate-seal-pos: center 50%;
        border-inline-start: 2px dashed rgba(243, 211, 138, 0.4);
        border-radius: 0 22px 22px 0;
        -webkit-mask: radial-gradient(circle at 0 0, transparent 12px, #000 12.5px) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, transparent 12px, #000 12.5px) bottom / 100% 51% no-repeat;
        mask: radial-gradient(circle at 0 0, transparent 12px, #000 12.5px) top / 100% 51% no-repeat, radial-gradient(circle at 0 100%, transparent 12px, #000 12.5px) bottom / 100% 51% no-repeat;
    }
}

/* narrow pages everywhere, and Log in / Register below 992px: the stub hangs under the pass */
:root body.identity-page .tpn-place--gate ~ .main-container .identity-shell--narrow {
    border-radius: 22px;
    box-shadow: 0 22px 40px rgba(2, 6, 16, 0.42);
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-shell--narrow > .identity-panel {
    box-shadow: inset 0 1px 0 rgba(252, 247, 239, 0.07);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    -webkit-mask: radial-gradient(circle at 0 100%, transparent 12px, #000 12.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, transparent 12px, #000 12.5px) right / 51% 100% no-repeat;
    mask: radial-gradient(circle at 0 100%, transparent 12px, #000 12.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, transparent 12px, #000 12.5px) right / 51% 100% no-repeat;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-shell--narrow::after {
    --gate-seal-pos: left 26px center;
    --gate-seal-size: 64px;
    --gate-rosette-pos: left -27px center; /* 26 + 64/2 - 170/2: centred on the seal */
    --gate-rosette-size: 170px;
    --gate-bar-pos: right 28px center;
    --gate-bar-size: min(46%, 240px) 40px;
    height: 96px;
    border-top: 2px dashed rgba(243, 211, 138, 0.4);
    border-radius: 0 0 22px 22px;
    -webkit-mask: radial-gradient(circle at 0 0, transparent 12px, #000 12.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, transparent 12px, #000 12.5px) right / 51% 100% no-repeat;
    mask: radial-gradient(circle at 0 0, transparent 12px, #000 12.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, transparent 12px, #000 12.5px) right / 51% 100% no-repeat;
}

@media (max-width: 991.98px) {
    :root body.identity-page .tpn-place--gate ~ .main-container .identity-auth-grid > .identity-panel {
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        -webkit-mask: radial-gradient(circle at 0 100%, transparent 12px, #000 12.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, transparent 12px, #000 12.5px) right / 51% 100% no-repeat;
        mask: radial-gradient(circle at 0 100%, transparent 12px, #000 12.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 100%, transparent 12px, #000 12.5px) right / 51% 100% no-repeat;
    }

    :root body.identity-page .tpn-place--gate ~ .main-container .identity-auth-grid::after {
        --gate-seal-pos: left 26px center;
        --gate-seal-size: 64px;
        --gate-rosette-pos: left -27px center; /* 26 + 64/2 - 170/2: centred on the seal */
        --gate-rosette-size: 170px;
        --gate-bar-pos: right 28px center;
        --gate-bar-size: min(46%, 240px) 40px;
        height: 96px;
        border-top: 2px dashed rgba(243, 211, 138, 0.4);
        border-radius: 0 0 22px 22px;
        -webkit-mask: radial-gradient(circle at 0 0, transparent 12px, #000 12.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, transparent 12px, #000 12.5px) right / 51% 100% no-repeat;
        mask: radial-gradient(circle at 0 0, transparent 12px, #000 12.5px) left / 51% 100% no-repeat, radial-gradient(circle at 100% 0, transparent 12px, #000 12.5px) right / 51% 100% no-repeat;
    }
}

/* ---------------------------------------------------------------- 4. refused at the gate (Access denied, Lockout) */

@supports selector(:has(*)) {
    :root body.identity-page .tpn-place--gate ~ .main-container .identity-shell--narrow:has(.alert-danger)::after {
        background:
            var(--gate-seal-coral) var(--gate-seal-pos, center 36%) / var(--gate-seal-size, 64px) no-repeat,
            var(--gate-barcode) var(--gate-bar-pos, center bottom 34px) / var(--gate-bar-size, 68% 44px) no-repeat,
            linear-gradient(172deg, #2a2346 0%, #1a1d3c 55%, #0f1733 100%);
        border-color: rgba(255, 180, 169, 0.34);
        border-top-color: rgba(255, 180, 169, 0.45);
    }

    :root body.identity-page .tpn-place--gate ~ .main-container .identity-shell--narrow:has(.alert-danger) > .identity-panel {
        --gate-frame: rgba(255, 180, 169, 0.42);
    }
}

/* the notice reads as a stamp: a double rule and a round mark, in the tone of its alert
   (danger coral, warning gold, info cyan, success lime; the text itself stays ivory) */
:root body.identity-page .tpn-place--gate ~ .main-container .identity-panel > .alert {
    --gate-tone: 255, 122, 107;
    --gate-tone-soft: var(--ns-coral-soft);
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.6rem !important;
    padding: 1.1rem 1.25rem;
    border: 1.5px solid rgba(var(--gate-tone), 0.6);
    border-radius: 14px;
    background: rgba(var(--gate-tone), 0.07);
    box-shadow: inset 0 0 0 4px rgba(10, 22, 44, 0.9), inset 0 0 0 5px rgba(var(--gate-tone), 0.28);
    color: var(--ns-fg);
    font-size: 1.02rem;
    line-height: 1.55;
}

/* the coral stop seal is for refusals only: danger alerts (an informational
   or success notice without its own icon gets no mark) */
:root body.identity-page .tpn-place--gate ~ .main-container .identity-panel > .alert.alert-danger::before {
    content: "";
    flex: none;
    width: 46px;
    height: 46px;
    background: var(--gate-stop) center / contain no-repeat;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-panel > .alert > .bi {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 0 !important;
    border: 1.6px solid var(--gate-tone-soft);
    border-radius: 50%;
    box-shadow: inset 0 0 0 4px rgba(10, 22, 44, 0.9), inset 0 0 0 5px rgba(var(--gate-tone), 0.35);
    color: var(--gate-tone-soft);
    font-size: 1.15rem;
    line-height: 1;
}

/* 0,6,1: beats the base alert tones (S .alert-*) */
:root body.identity-page .tpn-place--gate ~ .main-container .identity-panel > .alert.alert-warning { --gate-tone: 231, 182, 75; --gate-tone-soft: #f3d38a; }
:root body.identity-page .tpn-place--gate ~ .main-container .identity-panel > .alert.alert-info { --gate-tone: 127, 233, 255; --gate-tone-soft: #7fe9ff; }
:root body.identity-page .tpn-place--gate ~ .main-container .identity-panel > .alert.alert-success { --gate-tone: 201, 255, 134; --gate-tone-soft: #c9ff86; }

:root body.identity-page .tpn-place--gate ~ .main-container .identity-panel > .alert :is(p, a) {
    color: inherit;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-panel > .alert a {
    font-weight: 700;
    color: var(--gate-tone-soft);
    text-decoration-color: rgba(var(--gate-tone), 0.55);
}

@supports selector(:has(*)) {
    :root body.identity-page .tpn-place--gate ~ .main-container .identity-panel > .alert:has(> .bi)::before {
        content: none;
    }
}

/* ---------------------------------------------------------------- 5. Manage (signed in: styled blind through the shared classes) */

:root body.identity-page .tpn-place--gate ~ .main-container .identity-manage-shell .identity-panel {
    border-radius: 20px;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-manage-shell .identity-panel::before {
    border-radius: 12px;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-manage-shell .identity-panel::after {
    content: none;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-manage-shell > .identity-panel {
    padding: clamp(1.4rem, 1rem + 2vw, 2.4rem);
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-manage-shell > .identity-panel .identity-eyebrow::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-inline-end: 0.6rem;
    border-radius: 50%;
    background: var(--ns-lime);
    box-shadow: 0 0 10px rgba(201, 255, 134, 0.7);
    vertical-align: 0.1em;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-manage-grid .identity-panel {
    background:
        linear-gradient(162deg, #11264b 0%, #0c1c39 60%, #0a1731 100%);
}

/* the nav column keeps its own height instead of stretching beside a long form */
:root body.identity-page .tpn-place--gate ~ .main-container .identity-manage-grid {
    align-items: start;
}

/* ledger tabs */
:root body.identity-page .tpn-place--gate ~ .main-container .identity-manage-nav .nav-link {
    background: rgba(252, 247, 239, 0.035);
    border: 1px solid rgba(252, 247, 239, 0.12);
    border-inline-start: 3px solid rgba(252, 247, 239, 0.14);
    border-radius: 12px;
    color: var(--ns-fg);
    box-shadow: none;
    transform: none;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-manage-nav .nav-link:is(:hover, :focus-visible) {
    background: rgba(243, 211, 138, 0.08);
    border-color: rgba(243, 211, 138, 0.34);
    color: #fcf7ef;
    box-shadow: none;
    transform: none;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-manage-nav :is(.nav-link.active, .show > .nav-link) {
    background: linear-gradient(90deg, rgba(243, 211, 138, 0.16), rgba(243, 211, 138, 0.05));
    border-color: rgba(243, 211, 138, 0.42);
    border-inline-start-color: #f3d38a;
    color: #f3d38a;
    box-shadow: none;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-manage-content h4 {
    color: var(--ns-heading);
    font-size: var(--ns-fs-h3);
    padding-bottom: 0.8rem;
    border-bottom: 1px solid rgba(243, 211, 138, 0.22);
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-manage-content label:not(.form-check-label) {
    color: rgba(243, 211, 138, 0.86);
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-manage-content :is(.form-check-label, .checkbox label) {
    color: var(--ns-fg-dim);
    font-size: 0.95rem;
    letter-spacing: normal;
    text-transform: none;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-manage-content :is(p, li) {
    color: var(--ns-fg-dim);
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-callout {
    --gate-callout: rgba(243, 211, 138, 0.7);
    background: linear-gradient(90deg, rgba(252, 247, 239, 0.06), rgba(252, 247, 239, 0.025));
    border: 1px solid rgba(252, 247, 239, 0.12);
    border-inline-start: 3px solid var(--gate-callout);
    border-radius: 14px;
    box-shadow: none;
    color: var(--ns-fg);
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-callout--danger { --gate-callout: var(--ns-coral); background: rgba(255, 122, 107, 0.07); border-color: rgba(255, 122, 107, 0.3); }
:root body.identity-page .tpn-place--gate ~ .main-container .identity-callout--warning { --gate-callout: var(--ns-gold); background: rgba(243, 211, 138, 0.07); border-color: rgba(243, 211, 138, 0.3); }
:root body.identity-page .tpn-place--gate ~ .main-container .identity-callout--info { --gate-callout: var(--ns-cyan); background: rgba(127, 233, 255, 0.06); border-color: rgba(127, 233, 255, 0.26); }

:root body.identity-page .tpn-place--gate ~ .main-container .identity-callout :is(p, li, strong) {
    color: inherit;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-detail-list > div {
    background: rgba(3, 9, 22, 0.4);
    border: 1px solid rgba(243, 211, 138, 0.18);
    border-radius: 12px;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-detail-list dt {
    color: rgba(243, 211, 138, 0.86);
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-detail-list dd {
    color: #fcf7ef;
    overflow-wrap: anywhere;
}

:root body.identity-page .tpn-place--gate ~ .main-container :is(.identity-code-chip, code.recovery-code) {
    background: rgba(3, 9, 22, 0.6);
    border: 1px solid rgba(243, 211, 138, 0.35);
    border-radius: 10px;
    color: #fcf7ef;
    font-family: var(--ns-mono);
    letter-spacing: 0.12em;
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-table-wrap {
    background: rgba(3, 9, 22, 0.35);
    border: 1px solid rgba(252, 247, 239, 0.12);
    border-radius: 14px;
}

/* the authenticator QR stays dark-on-light so phones can read it */
:root body.identity-page .tpn-place--gate ~ .main-container .identity-qr-code {
    background: #fcf7ef;
    border: 1px solid rgba(243, 211, 138, 0.6);
    border-radius: 16px;
    box-shadow: 0 0 0 6px rgba(3, 9, 22, 0.5), var(--ns-shadow-sm);
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-avatar-frame {
    background: rgba(3, 9, 22, 0.55);
    border: 1px solid rgba(243, 211, 138, 0.45);
    border-radius: 20px;
    box-shadow: inset 0 0 0 5px rgba(10, 22, 44, 0.9), inset 0 0 0 6px rgba(243, 211, 138, 0.2), var(--ns-shadow-sm);
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-manage-content input[type="file"].form-control {
    padding: 0.55rem;
    color: var(--ns-fg-dim);
}

:root body.identity-page .tpn-place--gate ~ .main-container .identity-manage-content input[type="file"].form-control::file-selector-button {
    margin-inline-end: 0.8rem;
    padding: 0.45rem 1rem;
    border: 1px solid rgba(243, 211, 138, 0.45);
    border-radius: 999px;
    background: rgba(243, 211, 138, 0.1);
    color: #f3d38a;
    font-weight: 700;
}

/* ---------------------------------------------------------------- 6. the Passport Office (Subscription) */

/* The sheet: an official document on the night canvas, a guilloche band along its head, a foil mount ring
   round it. Visitors: .subscription-page; members: <main>.
   The sheet bleeds OUTWARDS (negative margin, the same padding back): the column inside keeps exactly the
   width it has without the theme, so nothing in the pricing block reflows (build.py and the Paddle check in
   the README hold the block to the same boxes with and without this file). --po-bleed never pushes the
   sheet closer than 6px to the viewport edge (phones drop the mount ring, which would reach the edge). */
:root body.editorial-page-active .tpn-place--passport ~ .main-container .editorial-page.subscription-page,
:root body.subscription-auth-page .tpn-place--passport ~ .main-container > main {
    --po-pt: clamp(1.6rem, 1rem + 2.4vw, 3rem);
    --po-px: clamp(0.25rem, 3vw - 0.5rem, 2.25rem);
    --po-bleed: clamp(0px, (100vw - 100%) / 2 - 6px, var(--po-px));
    --po-pb: clamp(1.5rem, 4vw, 3.5rem);
    --po-radius: 28px;
    background:
        var(--gate-waves-ink) center top clamp(0.45rem, 0.2rem + 0.9vw, 1.05rem) / 240px 16px repeat-x,
        linear-gradient(180deg, #fbf6ea 0, #fcfaf4 120px) #fcfaf4;
    border: 1px solid rgba(166, 120, 20, 0.4);
    border-radius: var(--po-radius);
    box-shadow: var(--ns-shadow), 0 0 0 1px rgba(3, 8, 20, 0.4);
    outline: 1px solid rgba(243, 211, 138, 0.38);
    outline-offset: clamp(4px, 0.6vw, 8px);
    /* the border's 1px is taken from the margin, so the content box is the column's own width */
    margin-inline: calc(-1 * var(--po-bleed) - 1px);
    padding: var(--po-pt) var(--po-bleed) var(--po-pb);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .editorial-page.subscription-page {
    margin-bottom: 1.5rem;
}

/* the pricing container's own bottom padding (64px) stacked on the showcase's margin left a 112px blank
   at the foot of the sheet, above the sheet's own bottom padding: the container's padding only, nothing inside it */
:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-page > .subscription-container {
    padding-bottom: 0;
}

@media (max-width: 575.98px) {
    :root body.editorial-page-active .tpn-place--passport ~ .main-container .editorial-page.subscription-page,
    :root body.subscription-auth-page .tpn-place--passport ~ .main-container > main {
        outline: 0;
    }
}

/* members: the upgrade heading above the pricing is the cover's navy with a foil edge (it was the site's bright blue) */
:root body.subscription-auth-page .tpn-place--passport ~ .main-container .subscription-auth-upgrade {
    background:
        radial-gradient(70% 140% at 100% 0%, rgba(238, 154, 110, 0.12) 0%, rgba(238, 154, 110, 0) 60%),
        linear-gradient(162deg, #0b1b33 0%, #13294d 58%, #1c2f63 100%) #13294d;
    box-shadow: 0 18px 38px rgba(3, 8, 20, 0.24), inset 0 0 0 1px rgba(243, 211, 138, 0.42), inset 0 0 0 6px rgba(11, 27, 51, 0.6), inset 0 0 0 7px rgba(243, 211, 138, 0.2);
}

/* (its heading and line keep the site's ivory: account-surfaces.css pins them with !important) */
:root body.subscription-auth-page .tpn-place--passport ~ .main-container .subscription-auth-upgrade h3 .bi {
    color: #f3d38a;
}

/* members: the licence panel's "not yet generated" notice was the site's white heading on the ivory card */
:root body.subscription-auth-page .tpn-place--passport ~ .main-container .subscription-auth-hero h3 {
    color: #0b1b33;
}

/* ---------------------------------------------------------------- 6b. the pricing block: the issuing counter

   The protected pricing (Views/Shared/_SubscriptionPricing.cshtml, on both Subscription pages) in the
   passport's own print: the heading panel is a navy cover with a foil frame, the plans sit on an ivory data
   page, each plan is a visa page with a navy stamp for its licence type and a navy-and-gold issuing button,
   the features are a navy cover again and the premium library an ivory page.

   REPAINT ONLY. Inside the block (PP below) and on the payment hooks (.price, [data-tier], .btn-gradient,
   .paddle-checkout-btn, the billing toggle) this file sets colour, background, border colour, radius,
   shadow, outline and text decoration, nothing else: never display, visibility, position, offsets, order,
   flex/grid placement, transform, pointer-events, content, sizes, margins, padding, z-index or opacity on a
   script-driven element (tools/nation-site/build.py lints it). Every box keeps its size and place; the
   Paddle check compares them with and without this file. The --tp-* tokens are redefined on PP alone.

   PP = :root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container
        (0,5,1; the members' page carries editorial-page-active too) */

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container {
    /* the paper roles for the block's own rules that read the site tokens */
    --tp-text-primary: #0b1b33;
    --tp-text-secondary: #3b4658;
    --tp-text-muted: #566173;
    --tp-border: rgba(166, 120, 20, 0.3);
    --tp-border-strong: rgba(166, 120, 20, 0.52);
    --tp-shadow-rgb: 11 27 51;
}

/* the heading panel: the passport's navy cover, foil frame, a faint rosette under the price */
:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-hero {
    background:
        var(--gate-rosette-faint) right -150px top -170px / 440px 440px no-repeat,
        radial-gradient(80% 120% at 0% 0%, rgba(238, 154, 110, 0.12) 0%, rgba(238, 154, 110, 0) 60%),
        linear-gradient(162deg, #0b1b33 0%, #13294d 58%, #1c2f63 100%) #13294d;
    border-color: rgba(243, 211, 138, 0.42);
    box-shadow: 0 22px 46px rgba(3, 8, 20, 0.28), inset 0 0 0 7px rgba(11, 27, 51, 0.6), inset 0 0 0 8px rgba(243, 211, 138, 0.22);
    color: #fcf7ef;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-hero::before {
    background: radial-gradient(circle, rgba(243, 211, 138, 0.16) 0%, rgba(243, 211, 138, 0) 70%);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-hero::after {
    background: radial-gradient(circle, rgba(127, 233, 255, 0.07) 0%, rgba(127, 233, 255, 0) 70%);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-hero-kicker {
    background: rgba(243, 211, 138, 0.1);
    border-color: rgba(243, 211, 138, 0.5);
    color: #f3d38a;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-hero h1 {
    color: #fcf7ef;
    text-shadow: 0 2px 18px rgba(3, 8, 20, 0.45);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-hero :is(p, .lead) {
    color: rgba(252, 247, 239, 0.8);
}

/* the price line (the script rewrites its text only) */
:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .pricing-highlight {
    background: rgba(243, 211, 138, 0.12);
    border-color: rgba(243, 211, 138, 0.45);
    box-shadow: inset 0 1px 0 rgba(252, 247, 239, 0.08);
    color: #f3d38a;
}

/* the plans: an ivory data page laid over the cover */
:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-pricing-stage {
    background:
        var(--gate-waves-ink) center top 12px / 240px 16px repeat-x,
        linear-gradient(180deg, #fffdf8 0%, #f8f1e3 100%) #fbf6ec;
    border-color: rgba(166, 120, 20, 0.4);
    box-shadow: 0 26px 52px rgba(3, 8, 20, 0.24), inset 0 0 0 6px #fffdf8, inset 0 0 0 7px rgba(166, 120, 20, 0.18);
}

/* Patreon: the other counter, in its own colour */
:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .patreon-subscription-option {
    background:
        linear-gradient(115deg, rgba(255, 66, 77, 0.08), rgba(255, 66, 77, 0) 48%),
        #fffdf8;
    border-color: rgba(183, 47, 58, 0.32);
    box-shadow: 0 8px 20px rgba(11, 27, 51, 0.06);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .patreon-subscription-copy h2 {
    color: #0b1b33;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .direct-subscription-divider {
    color: #7e5306;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .direct-subscription-divider::before {
    background: linear-gradient(90deg, rgba(166, 120, 20, 0), rgba(166, 120, 20, 0.55));
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .direct-subscription-divider::after {
    background: linear-gradient(90deg, rgba(166, 120, 20, 0.55), rgba(166, 120, 20, 0));
}

/* the billing toggle (script: .active on the switch and the labels, the knob moves by itself): colours only */
:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .billing-toggle {
    background: #fffdf8;
    border-color: rgba(166, 120, 20, 0.38);
    box-shadow: inset 0 1px 0 #ffffff, 0 6px 16px rgba(11, 27, 51, 0.07);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .billing-toggle span {
    color: #566173;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .billing-toggle span.active {
    color: #0b1b33;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .billing-toggle .toggle-switch {
    background: rgba(11, 27, 51, 0.1);
    border-color: rgba(11, 27, 51, 0.24);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .billing-toggle .toggle-switch.active {
    background: linear-gradient(90deg, #0b1b33, #1c2f63);
    border-color: #0b1b33;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .billing-toggle .toggle-switch::after {
    background: linear-gradient(180deg, #f6da93 0%, #e7b64b 100%);
    box-shadow: 0 1px 3px rgba(3, 8, 20, 0.35), inset 0 0 0 1px rgba(166, 120, 20, 0.55);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .yearly-savings {
    background: linear-gradient(180deg, #f6da93 0%, #e7b64b 100%);
    border-color: rgba(166, 120, 20, 0.65);
    color: #1b1203;
}

/* a plan: a visa page (ivory, foil edge, a hairline frame inside, a guilloche band at its foot) */
:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .pricing-card[data-tier] {
    background:
        var(--gate-waves-ink) center bottom 8px / 240px 16px repeat-x,
        radial-gradient(120% 50% at 50% 0%, rgba(243, 211, 138, 0.16) 0%, rgba(243, 211, 138, 0) 70%),
        linear-gradient(180deg, #fffdf8 0%, #f8f1e3 100%) #fcf8ef;
    border-color: rgba(166, 120, 20, 0.45);
    box-shadow: 0 14px 30px rgba(11, 27, 51, 0.1), inset 0 0 0 5px #fffdf8, inset 0 0 0 6px rgba(166, 120, 20, 0.2);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .pricing-card[data-tier]:hover {
    border-color: rgba(166, 120, 20, 0.75);
    box-shadow: 0 20px 40px rgba(11, 27, 51, 0.16), inset 0 0 0 5px #fffdf8, inset 0 0 0 6px rgba(166, 120, 20, 0.34);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .pricing-card[data-tier] h3 {
    color: #0b1b33;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .pricing-card[data-tier] .price {
    color: #0b1b33;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .pricing-card[data-tier] .features li {
    color: #3b4658;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .pricing-card[data-tier] .features li::before {
    color: #a67814;
}

/* the stamps: licence type in navy and foil, the corporate one in copper, "popular" in gold */
:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .license-type-badge.home-use {
    background: linear-gradient(135deg, #0b1b33 0%, #1c2f63 100%);
    border-color: rgba(243, 211, 138, 0.5);
    color: #f3d38a;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .license-type-badge.corporate-use {
    background: linear-gradient(135deg, #7a4b1f 0%, #a8691f 100%);
    border-color: rgba(243, 211, 138, 0.5);
    color: #fff6e3;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .popular-badge {
    background: linear-gradient(180deg, #f6da93 0%, #e7b64b 100%);
    border-color: rgba(166, 120, 20, 0.7);
    color: #1b1203;
}

/* the issuing button: navy with a foil edge; the seal lights up (gold) under the pointer */
:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container :is(.paddle-checkout-btn, .btn-gradient) {
    background: linear-gradient(180deg, #1c2f63 0%, #0b1b33 100%);
    border-color: #c99a36;
    color: #fcf7ef;
    box-shadow: 0 10px 22px rgba(11, 27, 51, 0.24), inset 0 1px 0 rgba(243, 211, 138, 0.35);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container :is(.paddle-checkout-btn, .btn-gradient):is(:hover, :focus-visible):not(:disabled, .disabled) {
    background: linear-gradient(180deg, #f6da93 0%, #e7b64b 100%);
    border-color: #a67814;
    color: #1b1203;
    box-shadow: 0 12px 26px rgba(231, 182, 75, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container :is(.paddle-checkout-btn, .btn-gradient):focus-visible {
    outline: 2px solid #0b1b33;
    outline-offset: 3px;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container :is(.paddle-checkout-btn, .btn-gradient):is(:disabled, .disabled) {
    background: #ece3d0;
    border-color: rgba(11, 27, 51, 0.2);
    color: #3b4658;
    box-shadow: none;
}

/* members with a Paddle subscription: the upgrade/downgrade notes under each plan */
:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-change-info {
    background: rgba(11, 27, 51, 0.04);
    border-color: rgba(11, 27, 51, 0.14);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-change-info small {
    color: #3b4658;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-change-info .text-warning {
    color: #7a5200 !important;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-change-info .text-info {
    color: #0a5d71 !important;
}

/* members: the current subscription plate (navy, foil) */
:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .current-subscription {
    background:
        var(--gate-rosette-faint) right -120px top -150px / 360px 360px no-repeat,
        linear-gradient(162deg, #0b1b33 0%, #13294d 60%, #1c2f63 100%) #13294d;
    border-color: rgba(243, 211, 138, 0.42);
    box-shadow: 0 18px 38px rgba(3, 8, 20, 0.24), inset 0 0 0 6px rgba(11, 27, 51, 0.6), inset 0 0 0 7px rgba(243, 211, 138, 0.2);
    color: rgba(252, 247, 239, 0.86);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .current-subscription .tier-name {
    color: #f3d38a;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .current-subscription :is(small, .alert-warning) {
    color: rgba(252, 247, 239, 0.82);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .current-subscription .serial-code {
    background: rgba(3, 9, 22, 0.45);
    box-shadow: inset 0 0 0 1px rgba(243, 211, 138, 0.35);
    color: #fcf7ef;
}

/* the features: the navy cover again, navy and ivory panels in turn */
:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-capabilities-section {
    background:
        var(--gate-waves) center top 12px / 240px 16px repeat-x,
        radial-gradient(70% 90% at 100% 0%, rgba(238, 154, 110, 0.1) 0%, rgba(238, 154, 110, 0) 60%),
        linear-gradient(162deg, #0b1b33 0%, #13294d 60%, #1c2f63 100%) #13294d;
    border-color: rgba(243, 211, 138, 0.36);
    box-shadow: 0 24px 48px rgba(3, 8, 20, 0.26);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-capabilities-overline {
    background: rgba(243, 211, 138, 0.1);
    box-shadow: inset 0 0 0 1px rgba(243, 211, 138, 0.45);
    color: #f3d38a;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-capabilities-heading {
    color: #fcf7ef;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-capabilities-subtitle {
    color: rgba(252, 247, 239, 0.78);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-capability-card:nth-child(odd) {
    background: linear-gradient(155deg, #1b3563 0%, #122a4f 100%);
    border-color: rgba(243, 211, 138, 0.3);
    box-shadow: 0 16px 30px rgba(3, 8, 20, 0.26), inset 0 1px 0 rgba(252, 247, 239, 0.06);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-capability-card:nth-child(even) {
    background: linear-gradient(155deg, #fffdf8 0%, #f3ead8 100%);
    border-color: rgba(166, 120, 20, 0.45);
    box-shadow: 0 16px 30px rgba(3, 8, 20, 0.26), inset 0 0 0 4px #fffdf8, inset 0 0 0 5px rgba(166, 120, 20, 0.2);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-capability-card:hover {
    border-color: #e7b64b;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-capability-card:nth-child(odd) .subscription-capability-icon {
    background: rgba(243, 211, 138, 0.12);
    box-shadow: inset 0 0 0 1px rgba(243, 211, 138, 0.45);
    color: #f3d38a;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-capability-card:nth-child(even) .subscription-capability-icon {
    background: linear-gradient(135deg, #0b1b33 0%, #1c2f63 100%);
    box-shadow: inset 0 0 0 1px rgba(243, 211, 138, 0.5);
    color: #f3d38a;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-capability-card:nth-child(odd) h3 {
    color: #fcf7ef;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-capability-card:nth-child(odd) p {
    color: rgba(252, 247, 239, 0.8);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-capability-card:nth-child(even) h3 {
    color: #0b1b33;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-capability-card:nth-child(even) p {
    color: #3b4658;
}

/* the premium library: an ivory page (home-index.js fills #games-container and moves .is-active: colours only) */
:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .games-showcase-section {
    background:
        var(--gate-waves-ink) center top 12px / 240px 16px repeat-x,
        linear-gradient(180deg, #fffdf8 0%, #f8f1e3 100%) #fbf6ec;
    border-color: rgba(166, 120, 20, 0.4);
    box-shadow: 0 24px 48px rgba(3, 8, 20, 0.2), inset 0 0 0 6px #fffdf8, inset 0 0 0 7px rgba(166, 120, 20, 0.16);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container :is(.games-showcase-kicker, .games-featured-label) {
    background: rgba(243, 211, 138, 0.26);
    box-shadow: inset 0 0 0 1px rgba(166, 120, 20, 0.4);
    color: #7e5306;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container :is(.games-showcase-section .section-title, .games-featured-title, .games-rail-name, .games-showcase-status strong, .games-showcase-range strong) {
    color: #0b1b33;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container :is(.games-showcase-section .section-subtitle, .games-featured-description) {
    color: #3b4658;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-badge {
    background:
        var(--gate-rosette-faint) right -70px top -80px / 200px 200px no-repeat,
        linear-gradient(135deg, #0b1b33 0%, #1c2f63 100%);
    box-shadow: 0 18px 36px rgba(11, 27, 51, 0.22), inset 0 0 0 1px rgba(243, 211, 138, 0.45);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .subscription-badge .badge-text {
    color: rgba(243, 211, 138, 0.92);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .games-showcase-controls {
    background: #fffdf8;
    border-color: rgba(166, 120, 20, 0.32);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .games-showcase-btn {
    background: #fcf7ef;
    border-color: rgba(11, 27, 51, 0.18);
    color: #0b1b33;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .games-showcase-btn:hover:not(:disabled) {
    background: #0b1b33;
    border-color: #0b1b33;
    color: #f3d38a;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .games-showcase-btn:focus-visible {
    outline: 2px solid #1d4f86;
    outline-offset: 2px;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .games-featured-card {
    background: linear-gradient(135deg, #fffdf8 0%, #ffffff 42%, #f3ead8 100%);
    border-color: rgba(166, 120, 20, 0.32);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .games-featured-media {
    background: radial-gradient(circle at top, #ffffff 0%, #f3ead8 100%);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .games-featured-pill {
    background: rgba(11, 27, 51, 0.05);
    border-color: rgba(11, 27, 51, 0.14);
    color: #0b1b33;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .games-rail-card {
    background: #fffdf8;
    border-color: rgba(166, 120, 20, 0.28);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .games-rail-card:hover {
    border-color: rgba(166, 120, 20, 0.55);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .games-rail-card.is-active {
    background: #ffffff;
    border-color: #c99a36;
    box-shadow: 0 18px 34px rgba(11, 27, 51, 0.14), 0 0 0 2px rgba(231, 182, 75, 0.35);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container .games-rail-thumb {
    background: radial-gradient(circle at top, #ffffff 0%, #f3ead8 100%);
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container :is(.games-showcase-range, .games-showcase-status, .games-showcase-footer, .games-rail-meta) {
    color: #566173;
}

:root body.editorial-page-active .tpn-place--passport ~ .main-container .subscription-pricing-container :is(.loading-state, .error-container, .empty-state) {
    background: #fffdf8;
    border-color: rgba(166, 120, 20, 0.3);
    color: #3b4658;
}

/* ---------------------------------------------------------------- 7. phones and tablets */

@media (max-width: 767.98px) {
    :root body.identity-page .tpn-place--gate ~ .main-container .identity-shell {
        --gate-mrz-h: 60px;
    }

    :root body.identity-page .tpn-place--gate ~ .main-container .identity-shell .identity-panel {
        border-radius: 18px;
        background-size: calc(100% - 2 * var(--gate-pad) + 4px) 26px, calc(100% - 30px) 52px, calc(100% - 30px) 1px, auto, 340px 340px, auto;
        background-position: left calc(var(--gate-pad) - 2px) bottom 27px, center bottom 15px, center bottom 67px, 0 0, right -150px top -170px, 0 0;
    }

    :root body.identity-page .tpn-place--gate ~ .main-container .identity-shell .identity-panel::before { inset: 8px; border-radius: 12px; }
    :root body.identity-page .tpn-place--gate ~ .main-container .identity-shell .identity-panel::after { inset: 11px; border-radius: 10px; }

    :root body.identity-page .tpn-place--gate ~ .main-container .identity-shell .identity-links a {
        padding-block: 0.2rem;
    }

    :root body.identity-page .tpn-place--gate ~ .main-container :is(.identity-auth-grid, .identity-shell--narrow)::after {
        --gate-seal-pos: left 20px center;
        --gate-seal-size: 56px;
        --gate-rosette-pos: left -27px center; /* 20 + 56/2 - 150/2 */
        --gate-rosette-size: 150px;
        --gate-bar-pos: right 20px center;
        --gate-bar-size: 48% 36px;
        height: 84px;
        border-radius: 0 0 18px 18px;
    }
}

/* ---------------------------------------------------------------- 8. motion */

@media (prefers-reduced-motion: no-preference) {
    :root body.identity-page .tpn-place--gate ~ .main-container :is(.floating-label-group .form-control, .identity-links a, .identity-manage-nav .nav-link) {
        transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    }
}

/* ---------------------------------------------------------------- 9. Arabic / Hebrew: no tracking (it breaks joined scripts), no forced caps */

/* (the letter-spacing is reset by the global rule in the base, section 14) */
:root:is(:lang(ar), :lang(he), :lang(fa)) body.identity-page .tpn-place--gate ~ .main-container :is(.floating-label-group .floating-label, .identity-manage-content label, .identity-detail-list dt, .identity-eyebrow) {
    text-transform: none;
    font-size: 0.8rem;
}

/* the larger caption needs the value a little lower in its well */
:root:is(:lang(ar), :lang(he), :lang(fa)) body.identity-page .tpn-place--gate ~ .main-container .floating-label-group .form-control {
    padding-top: 1.8rem;
    padding-bottom: 0.25rem;
}

/* ==================================================================== office.css */

/* ==========================================================================
   TeknoParrot Nation site theme: the Harbormaster's Office
   Pages: /{culture}/Support (Get Help: the desk, the plans' ticket allowance, a member's tickets),
          /{culture}/Support/New (a new ticket), /{culture}/Support/Details/{id} (a ticket's thread)
   Bundled ahead of base.css into nation-site.css (out-specify the base rules, don't repeat them). Loaded only
   while Citizen:PublicUi is on; the place banner (NationPlaces: controller Support) gives these pages the S
   content skins of the base (type, links, forms, buttons, alerts), this file dresses Views/Support's own
   classes (wwwroot/css/support.css), which read the site's --tp-* tokens and would print dark on the night.

   The idea: the office on the harbor front where every ship asks for help. The desk is a navy counter with a
   foil edge, the plans' ticket allowance a posted tariff, a ticket's thread the office log: the member's
   messages on the water's dark, the harbormaster's replies marked with a gold margin line.

   Scope: O = :root .tpn-place--harbormaster ~ .main-container .support-shell   (0,4,0)
   House rules: support.js only rewrites the character counters' text (colour and type only there); rtl-safe
   (the shell carries dir="rtl" in ar/he: logical properties only); 4.5:1 text; no web fonts, no external URLs.
   ========================================================================== */

:root .tpn-place--harbormaster ~ .main-container .support-shell {
    color: var(--ns-fg);
}

/* the desk's sign: the page heading on a navy counter, foil edge, a warm lamp in the corner */
:root .tpn-place--harbormaster ~ .main-container .support-shell .support-hero {
    background:
        radial-gradient(60% 120% at 100% 0%, rgba(238, 154, 110, 0.12) 0%, rgba(238, 154, 110, 0) 60%),
        var(--ns-panel);
    border: 1px solid rgba(243, 211, 138, 0.32);
    border-radius: var(--ns-radius);
    box-shadow: var(--ns-shadow), inset 0 0 0 5px rgba(11, 27, 51, 0.55), inset 0 0 0 6px rgba(243, 211, 138, 0.14);
    padding: clamp(1.4rem, 1rem + 2vw, 2.2rem);
}

:root .tpn-place--harbormaster ~ .main-container .support-shell .support-hero h1 {
    color: var(--ns-heading);
}

:root .tpn-place--harbormaster ~ .main-container .support-shell .support-hero p {
    color: var(--ns-fg-dim);
    margin-bottom: 0;
}

:root .tpn-place--harbormaster ~ .main-container .support-shell .support-card {
    background: var(--ns-panel);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius);
    box-shadow: var(--ns-shadow-sm), inset 0 1px 0 var(--ns-tint-2);
    color: var(--ns-fg);
}

:root .tpn-place--harbormaster ~ .main-container .support-shell .support-card h2 {
    color: var(--ns-heading);
}

/* subscribers only: a posted notice (gold margin line) */
:root .tpn-place--harbormaster ~ .main-container .support-shell .support-gate {
    border-color: rgba(243, 211, 138, 0.3);
    border-inline-start: 3px solid var(--ns-gold);
    background:
        linear-gradient(90deg, rgba(243, 211, 138, 0.07), rgba(243, 211, 138, 0) 45%),
        var(--ns-panel);
}

:root .tpn-place--harbormaster ~ .main-container .support-shell .support-eyebrow {
    color: var(--ns-accent-text);
    opacity: 1;
    letter-spacing: var(--ns-track-overline);
    font-size: var(--ns-fs-overline);
}

:root .tpn-place--harbormaster ~ .main-container .support-shell .support-badge {
    background: var(--ns-tint-3);
    box-shadow: inset 0 0 0 1px var(--ns-line-strong);
    color: var(--ns-fg);
}

:root .tpn-place--harbormaster ~ .main-container .support-shell .support-badge-priority {
    background: rgba(243, 211, 138, 0.12);
    box-shadow: inset 0 0 0 1px rgba(243, 211, 138, 0.5);
    color: var(--ns-gold-soft);
}

/* the tariff: the plans' ticket allowance */
:root .tpn-place--harbormaster ~ .main-container .support-shell .support-plan-row {
    border-top-color: var(--ns-line);
}

:root .tpn-place--harbormaster ~ .main-container .support-shell .support-plan-row strong {
    color: var(--ns-heading);
}

:root .tpn-place--harbormaster ~ .main-container .support-shell .support-plan-row > span:not(.support-badge) {
    color: var(--ns-fg-dim);
}

/* a member's tickets: whole-row links, ivory, the subject turns gold under the pointer */
:root .tpn-place--harbormaster ~ .main-container .support-shell .support-ticket-row {
    border-top-color: var(--ns-line);
    border-radius: 6px;
    color: var(--ns-fg);
    text-decoration: none;
}

:root .tpn-place--harbormaster ~ .main-container .support-shell .support-ticket-row strong {
    color: var(--ns-heading);
}

:root .tpn-place--harbormaster ~ .main-container .support-shell .support-ticket-row:is(:hover, :focus-visible) strong {
    color: var(--ns-gold-soft);
}

:root .tpn-place--harbormaster ~ .main-container .support-shell .support-ticket-row small {
    color: var(--ns-fg-mute) !important;
    opacity: 1;
}

:root .tpn-place--harbormaster ~ .main-container .support-shell .support-create-row [role="status"] {
    color: var(--ns-warn);
}

/* back to the desk */
:root .tpn-place--harbormaster ~ .main-container .support-shell .support-back {
    background: var(--ns-tint-2);
    border: 1px solid var(--ns-line-gold);
    border-radius: var(--ns-radius-pill);
    color: var(--ns-gold-soft);
    font-weight: 600;
    text-decoration: none;
}

:root .tpn-place--harbormaster ~ .main-container .support-shell .support-back:is(:hover, :focus-visible) {
    background: rgba(243, 211, 138, 0.12);
    color: var(--ns-ivory);
}

/* a ticket's thread: the office log */
:root .tpn-place--harbormaster ~ .main-container .support-shell .support-detail-header h1 {
    color: var(--ns-heading);
    font-size: var(--ns-fs-h2);
    text-transform: none;
    letter-spacing: -0.005em;
}

:root .tpn-place--harbormaster ~ .main-container .support-shell .support-message {
    background: rgba(4, 10, 24, 0.42);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-sm);
    color: var(--ns-fg);
}

:root .tpn-place--harbormaster ~ .main-container .support-shell .support-message-admin {
    background:
        linear-gradient(90deg, rgba(243, 211, 138, 0.08), rgba(243, 211, 138, 0) 40%),
        rgba(4, 10, 24, 0.42);
    border-color: rgba(243, 211, 138, 0.28);
    border-inline-start: 4px solid var(--ns-gold);
}

:root .tpn-place--harbormaster ~ .main-container .support-shell .support-message header strong {
    color: var(--ns-heading);
}

:root .tpn-place--harbormaster ~ .main-container .support-shell .support-message-admin header strong {
    color: var(--ns-gold-soft);
}

:root .tpn-place--harbormaster ~ .main-container .support-shell .support-message time {
    color: var(--ns-fg-mute);
    opacity: 1;
}

:root .tpn-place--harbormaster ~ .main-container .support-shell .support-message-body a {
    color: var(--ns-link);
}

:root .tpn-place--harbormaster ~ .main-container .support-shell .support-note {
    background: var(--ns-tint-2);
    border: 1px solid var(--ns-line);
    color: var(--ns-fg-dim);
}

/* the forms: labels in the office's gold, the counters (support.js: text only) quiet */
:root .tpn-place--harbormaster ~ .main-container .support-shell .support-form label {
    color: var(--ns-accent-text);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

:root .tpn-place--harbormaster ~ .main-container .support-shell .support-form small {
    opacity: 1;
}

/* Arabic, Hebrew, Persian: no forced capitals on the labels (the tracking is reset by the base, section 14) */
:root:is(:lang(ar), :lang(he), :lang(fa)) .tpn-place--harbormaster ~ .main-container .support-shell :is(.support-form label, .support-eyebrow) {
    text-transform: none;
    font-size: 0.9rem;
}

/* ==================================================================== home.css */

/* ==========================================================================
   TeknoParrot Nation site theme: the harbor below the hero (home)
   Pages: /{culture}/ (the sections under the harbor hero: the log of the harbor, the latest arrivals, the
          charter, the founder's letter, the records board)
   Bundled first into nation-site.css (the base rules come later in the cascade: out-specify them, don't
   repeat them). Loaded only while Citizen:PublicUi is on, which is also when the harbor hero replaces the old
   hero, so these sections always sit under the harbor scene.

   The idea: the page goes on at night on the water under the harbor. The numbers are the harbor's log (ivory
   on the night, gold counts), the recently preserved games are the latest arrivals (navy manifest cards),
   "Our purpose" is the charter on ivory paper, the founder's story a navy letter panel with a foil-framed
   portrait, the high scores a records board like the Hall of Records.

   Scope: H = :root body.home-page-active .main-container-home > main   (0,3,1)
   House rules, in short:
   - home-index.js and the page's inline script drive the counters (.count-up text), the reveal on scroll
     (.reveal / .reveal-stagger: class, opacity, transform), the recently preserved list (rendered into
     #recently-preserved-games) and the high-score cards' fade-in (inline opacity/transform on
     .featured-game-card): colour and type only on those, never their display, position, opacity or transform;
   - the home page's Paddle block (Views/Home/Index.cshtml, protected) renders no button while the harbor hero
     is up; its hooks (.btn-gradient, .paddle-checkout-btn) would follow the repaint-only rule anyway;
   - no color-scheme on the home <body> (Paddle's overlay frame is appended to it);
   - body text 4.5:1 or better, rtl-safe (logical properties), no web fonts, no external URLs.
   ========================================================================== */

/* ---------------------------------------------------------------- 0. the night canvas under the hero */

:root body.home-page-active {
    background: var(--ns-grain), var(--ns-ripples), var(--ns-canvas);
    background-color: var(--ns-page);
    color: var(--ns-fg);
}

/* shared type: the overlines are gold, the headings ivory */
:root body.home-page-active .main-container-home > main :is(.featured-in-overline, .stats-overline, .recently-preserved-overline, .founder-overline) {
    color: rgba(243, 211, 138, 0.9);
}

:root body.home-page-active .main-container-home > main :is(.recently-preserved-heading, .founder-heading) {
    color: var(--ns-heading);
}

:root body.home-page-active .main-container-home > main :is(.recently-preserved-intro, .founder-body) {
    color: var(--ns-fg-dim);
}

/* Arabic, Hebrew, Persian: home-index.css sets the overlines at 0.65rem and the labels at 0.58-0.75rem for tracked
   Latin capitals (9.1-10.5px on phones, 10.4px on desktop). Section 14 of base.css drops the tracking there, and a
   joined script that small is hard to read: the same lines at a 12px floor (11px for the chips on the arrival
   cards, which home-index.js renders; type only on them) */
:root:is(:lang(ar), :lang(he), :lang(fa)) body.home-page-active .main-container-home > main :is(.featured-in-overline, .stats-overline, .recently-preserved-overline, .preservation-overline, .founder-overline) {
    font-size: max(0.8rem, 12px);
}

:root:is(:lang(ar), :lang(he), :lang(fa)) body.home-page-active .main-container-home > main :is(.hero-stat-label, .heritage-stat-label) {
    font-size: max(0.75rem, 12px);
}

:root:is(:lang(ar), :lang(he), :lang(fa)) body.home-page-active .main-container-home > main .recently-preserved-card :is(time, .recently-preserved-access) {
    font-size: max(0.7rem, 11px);
}

/* ---------------------------------------------------------------- 1. the harbor's log (press strip and numbers) */

:root body.home-page-active .main-container-home > main .hero-summary-section {
    background:
        radial-gradient(60% 70% at 50% 0%, rgba(42, 35, 82, 0.45) 0%, rgba(42, 35, 82, 0) 70%),
        transparent;
    /* the harbor picture ends on a foil edge, as the header does */
    border-top: 1px solid rgba(243, 211, 138, 0.4);
}

:root body.home-page-active .main-container-home > main .featured-in-section-summary {
    border-bottom-color: rgba(243, 211, 138, 0.2);
}

:root body.home-page-active .main-container-home > main .featured-in-section-summary .featured-in-item {
    color: var(--ns-fg);
}

:root body.home-page-active .main-container-home > main .featured-in-section-summary .featured-in-item strong {
    color: var(--ns-heading);
}

:root body.home-page-active .main-container-home > main .featured-in-section-summary .featured-in-item small {
    color: var(--ns-fg-mute);
}

:root body.home-page-active .main-container-home > main .featured-in-section-summary .featured-in-item i {
    color: var(--ns-gold-soft);
}

:root body.home-page-active .main-container-home > main .featured-in-section-summary a.featured-in-item:is(:hover, :focus-visible),
:root body.home-page-active .main-container-home > main .featured-in-section-summary a.featured-in-item:is(:hover, :focus-visible) strong {
    color: var(--ns-gold-soft);
}

:root body.home-page-active .main-container-home > main .featured-in-section-summary a.featured-in-item:focus-visible {
    outline: 2px solid var(--ns-focus);
    outline-offset: 3px;
}

/* the counters (home page script: text only) */
:root body.home-page-active .main-container-home > main .hero-stats-summary .hero-stat-number {
    color: var(--ns-ivory);
    text-shadow: 0 0 36px rgba(243, 211, 138, 0.18);
}

:root body.home-page-active .main-container-home > main .hero-stats-summary .hero-stat-label {
    color: var(--ns-fg-dim);
}

:root body.home-page-active .main-container-home > main .hero-stats-summary .stats-grid {
    border-top-color: rgba(243, 211, 138, 0.22);
}

:root body.home-page-active .main-container-home > main .hero-stats-summary .heritage-stat {
    border-inline-end-color: rgba(252, 247, 239, 0.12);
}

:root body.home-page-active .main-container-home > main .hero-stats-summary .heritage-stat:hover {
    background: rgba(243, 211, 138, 0.06);
}

:root body.home-page-active .main-container-home > main .hero-stats-summary .heritage-stat-number {
    color: var(--ns-gold-soft);
}

:root body.home-page-active .main-container-home > main .hero-stats-summary .heritage-stat-label {
    color: var(--ns-fg-mute);
}

/* ---------------------------------------------------------------- 2. the latest arrivals (recently preserved) */

:root body.home-page-active .main-container-home > main .recently-preserved-section {
    background:
        radial-gradient(50% 60% at 50% 0%, rgba(243, 211, 138, 0.07) 0%, rgba(243, 211, 138, 0) 70%),
        linear-gradient(180deg, rgba(8, 18, 38, 0.6) 0%, rgba(8, 18, 38, 0) 100%);
    border-top-color: rgba(243, 211, 138, 0.2);
}

/* the cards are rendered by home-index.js and faded in by the reveal: colour and type only */
:root body.home-page-active .main-container-home > main .recently-preserved-card {
    background: var(--ns-panel);
    border-color: var(--ns-line);
    border-radius: var(--ns-radius-sm);
    box-shadow: var(--ns-shadow-sm), inset 0 1px 0 var(--ns-tint-2);
}

:root body.home-page-active .main-container-home > main .recently-preserved-card:hover {
    border-color: rgba(243, 211, 138, 0.6);
    box-shadow: var(--ns-shadow), inset 0 1px 0 var(--ns-tint-2);
}

:root body.home-page-active .main-container-home > main .recently-preserved-rank {
    color: var(--ns-gold-soft);
}

:root body.home-page-active .main-container-home > main .recently-preserved-art {
    background:
        radial-gradient(70% 70% at 50% 40%, rgba(243, 211, 138, 0.14) 0%, rgba(243, 211, 138, 0) 72%),
        linear-gradient(180deg, rgba(4, 10, 24, 0.35) 0%, rgba(4, 10, 24, 0) 100%);
}

:root body.home-page-active .main-container-home > main .recently-preserved-card time {
    color: var(--ns-gold-soft);
}

:root body.home-page-active .main-container-home > main .recently-preserved-card h3 {
    color: var(--ns-heading);
}

:root body.home-page-active .main-container-home > main .recently-preserved-card p {
    color: var(--ns-fg-mute);
}

:root body.home-page-active .main-container-home > main .recently-preserved-access.is-premium {
    background: rgba(243, 211, 138, 0.1);
    border-color: rgba(243, 211, 138, 0.55);
    color: var(--ns-gold-soft);
}

:root body.home-page-active .main-container-home > main .recently-preserved-access.is-public {
    background: rgba(201, 255, 134, 0.08);
    border-color: rgba(201, 255, 134, 0.45);
    color: var(--ns-lime);
}

/* ---------------------------------------------------------------- 3. the charter ("Our purpose", on ivory paper) */

:root body.home-page-active .main-container-home > main .preservation-section {
    background: transparent;
    border-top-color: rgba(243, 211, 138, 0.2);
    border-bottom-color: rgba(243, 211, 138, 0.2);
}

:root body.home-page-active .main-container-home > main .preservation-inner {
    padding: clamp(2rem, 1rem + 4vw, 4rem) clamp(1.25rem, 0.5rem + 4vw, 4rem);
    background:
        var(--gate-waves-ink) center top 16px / 240px 16px repeat-x,
        radial-gradient(80% 40% at 50% 0%, rgba(243, 211, 138, 0.18) 0%, rgba(243, 211, 138, 0) 70%),
        linear-gradient(180deg, #fdf9f0 0%, #f4ead6 100%) #f8f1e3;
    border: 1px solid rgba(166, 120, 20, 0.45);
    border-radius: 24px;
    box-shadow: var(--ns-shadow), inset 0 0 0 7px #fdf9f0, inset 0 0 0 8px rgba(166, 120, 20, 0.22);
    outline: 1px solid rgba(243, 211, 138, 0.3);
    outline-offset: 6px;
    color: var(--ns-paper-fg);
}

:root body.home-page-active .main-container-home > main .preservation-overline {
    color: var(--ns-paper-accent-text);
}

:root body.home-page-active .main-container-home > main .preservation-inner .gold-divider {
    background: linear-gradient(90deg, rgba(166, 120, 20, 0), #a67814 50%, rgba(166, 120, 20, 0));
}

:root body.home-page-active .main-container-home > main .preservation-heading {
    color: var(--ns-paper-heading);
}

:root body.home-page-active .main-container-home > main .preservation-body {
    color: var(--ns-paper-fg-dim);
}

:root body.home-page-active .main-container-home > main .pillar-item {
    background: #fffdf8;
    border-color: rgba(166, 120, 20, 0.35);
    box-shadow: 0 10px 24px rgba(11, 27, 51, 0.08);
}

:root body.home-page-active .main-container-home > main .pillar-item:hover {
    background: #fffdf8;
    border-color: #c99a36;
    box-shadow: 0 14px 30px rgba(11, 27, 51, 0.14);
}

:root body.home-page-active .main-container-home > main .pillar-icon {
    color: var(--ns-paper-accent-text);
}

:root body.home-page-active .main-container-home > main .pillar-item h4 {
    color: var(--ns-paper-heading);
}

:root body.home-page-active .main-container-home > main .pillar-item p {
    color: var(--ns-paper-fg-dim);
}

:root body.home-page-active .main-container-home > main .preservation-quote {
    border-top-color: rgba(166, 120, 20, 0.35);
    color: var(--ns-paper-heading);
    font-family: var(--ns-serif);
}

/* ---------------------------------------------------------------- 4. the founder's letter */

:root body.home-page-active .main-container-home > main .founder-section {
    background: transparent;
}

:root body.home-page-active .main-container-home > main .founder-portrait-panel {
    background:
        var(--gate-rosette-faint) right -250px bottom -280px / 440px 440px no-repeat,
        var(--ns-panel);
    border-color: rgba(243, 211, 138, 0.3);
    box-shadow: var(--ns-shadow), inset 0 1px 0 var(--ns-tint-2);
}

:root body.home-page-active .main-container-home > main .founder-portrait-frame {
    background: #0a1731;
    border-color: rgba(243, 211, 138, 0.55);
    box-shadow: 0 0 0 5px rgba(10, 23, 49, 0.9), 0 0 0 6px rgba(243, 211, 138, 0.25), var(--ns-shadow-sm);
}

:root body.home-page-active .main-container-home > main .founder-story-panel {
    border-top-color: rgba(243, 211, 138, 0.22);
}

:root body.home-page-active .main-container-home > main .founder-body-lead {
    color: var(--ns-heading);
}

/* ---------------------------------------------------------------- 5. the records board (featured high scores, most played) */

:root body.home-page-active .main-container-home > main .highscores-container h2 {
    color: var(--ns-heading);
}

:root body.home-page-active .main-container-home > main .highscores-container h2 .bi {
    color: var(--ns-gold-soft);
}

/* the cards fade in through inline opacity/transform (home-index.js): colour only */
:root body.home-page-active .main-container-home > main .featured-game-card {
    background: var(--ns-panel);
    border-color: rgba(243, 211, 138, 0.26);
    border-radius: var(--ns-radius);
    box-shadow: var(--ns-shadow-sm), inset 0 1px 0 var(--ns-tint-2);
}

:root body.home-page-active .main-container-home > main .featured-game-card:hover {
    background: var(--ns-panel);
    border-color: rgba(243, 211, 138, 0.55);
}

:root body.home-page-active .main-container-home > main .featured-game-header {
    background: linear-gradient(180deg, #0a1731 0%, #081226 100%);
    border-bottom-color: rgba(243, 211, 138, 0.35);
    color: var(--ns-gold-soft);
}

:root body.home-page-active .main-container-home > main .featured-game-header :is(h3, .h3) {
    color: var(--ns-gold-soft);
}

:root body.home-page-active .main-container-home > main .featured-game-body {
    color: var(--ns-fg);
}

:root body.home-page-active .main-container-home > main .featured-game-body p {
    color: var(--ns-fg-mute);
}

:root body.home-page-active .main-container-home > main .highscore-table {
    color: var(--ns-fg);
}

:root body.home-page-active .main-container-home > main .highscore-table th {
    background: var(--ns-thead-bg) !important;
    border-bottom-color: rgba(243, 211, 138, 0.3);
    color: var(--ns-thead-fg) !important;
}

:root body.home-page-active .main-container-home > main .highscore-table td {
    border-bottom-color: var(--ns-line);
    color: var(--ns-fg);
}

:root body.home-page-active .main-container-home > main .view-all-link {
    color: var(--ns-gold-soft);
    text-decoration: underline;
    text-decoration-color: rgba(243, 211, 138, 0.4);
    text-underline-offset: 0.25em;
}

:root body.home-page-active .main-container-home > main .view-all-link:is(:hover, :focus-visible) {
    color: var(--ns-ivory);
    text-decoration-color: currentColor;
}

:root body.home-page-active .main-container-home > main .view-all-link:focus-visible {
    outline: 2px solid var(--ns-focus);
    outline-offset: 2px;
}

:root body.home-page-active .main-container-home > main .featured-game-card .list-group-item {
    background: transparent;
    border-color: var(--ns-line);
    color: var(--ns-fg);
}

:root body.home-page-active .main-container-home > main .featured-game-card .list-group-item strong {
    color: var(--ns-heading);
}

:root body.home-page-active .main-container-home > main .featured-game-card .badge.bg-primary {
    background: rgba(243, 211, 138, 0.12) !important;
    box-shadow: inset 0 0 0 1px rgba(243, 211, 138, 0.45);
    color: var(--ns-gold-soft);
}

/* ==================================================================== hub.css */

/* ==========================================================================
   TeknoParrot Nation site theme: the Passport Office counters (the personal hub)
   (hub.css, not office.css: office.css is the Harbormaster's Office, Get Help's content skin)
   Pages: every page NationOffice.TabFor maps to a counter - /{culture}/Home/Subscription (Citizenship),
   /{culture}/Nation/Passport (My Passport), /{culture}/OnlineProfile/* (Player IDs, and its "Your IDs"
   summary on the landing page), /Identity/Account/Manage/* (Account), /{culture}/Support/* (Get Help).
   Loaded only while Citizen:PublicUi is on. Read SYSTEM.md before adding rules. House rules, in short:
   - the strip is Nation markup outside .main-container (.tp-nation.tpn-counters): it needs no S prefix;
     page content rules keep the S / G / OP / PO prefixes of their own group file;
   - each page keeps the content skin of its place (records, gate, passport, harbormaster): this file only
     frames the banner on the Passport Office and draws the counters under it;
   - never touch .price, [data-tier], .btn-gradient, .paddle-checkout-btn or the pricing block; never
     define a --tp-* property; no color-scheme on body (Paddle's overlay frame);
   - no generic class names in the markup (.nav, .nav-item, .nav-link, .active, .tab-pane, .card):
     site.js, Bootstrap and the pricing script react to them. State is aria-current only.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. one view for every counter
   The banner keeps the page's place class (the content skins hang off it) and adds tpn-place--hub:
   the Passport Office crop (base.css section 5, .tpn-place--passport, the same values at every width)
   wins over the place's own crop at every width (0,3,0 beats 0,2,0), so switching counters never
   moves the picture. */

.tp-nation.tpn-place.tpn-place--hub {
    --tpn-crop-x: 215;
    --tpn-crop-y: 690;
    --tpn-crop-span: 260;
    --tpn-crop-at-x: 0.66;
    --tpn-crop-at-y: 0.52;
    --tpn-art-inset: 0px;
}

/* as the passport: a little lower from 1600, so the kicker clears the feet of plots 7, 9 and 11 */
@media (min-width: 1600px) {
    .tp-nation.tpn-place.tpn-place--hub { --tpn-crop-y: 700; }
}

/* as the passport on phones: the TP sign board stays clear above the kicker */
@media (max-width: 575.98px) {
    .tp-nation.tpn-place.tpn-place--hub { --tpn-crop-span: 300; --tpn-crop-at-x: 0.72; --tpn-crop-at-y: 0.5; }
}

/* ---------------------------------------------------------------- 2. the counters (tab strip under the banner) */

.tp-nation.tpn-counters {
    position: relative;
    z-index: 1; /* over the banner's light spill (.tpn-place::after), far below the header (1090) */
    margin: 0;
    font-family: var(--ns-font);
    color: var(--ns-fg);
}

.tp-nation .tpn-counters__bar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.25rem 1.5rem;
    width: 100%;
    margin-inline: auto;
    padding-inline: 12px;
}

@media (min-width: 576px) { .tp-nation .tpn-counters__bar { max-width: 540px; } }
@media (min-width: 768px) { .tp-nation .tpn-counters__bar { max-width: 720px; } }
@media (min-width: 992px) { .tp-nation .tpn-counters__bar { max-width: 960px; } }
@media (min-width: 1200px) { .tp-nation .tpn-counters__bar { max-width: 1140px; } }
@media (min-width: 1400px) { .tp-nation .tpn-counters__bar { max-width: 1320px; } }

/* the counters stand on a foil rail that fades out towards the end of the row. The rail is the list's own
   border, so it stays put while the row scrolls, runs the whole width when the sign-in hint wraps below,
   and stops where the hint begins when it sits beside the counters */
.tp-nation .tpn-counters__tabs {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 auto;
    gap: 0.2rem;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
    border-style: none none solid;
    border-width: 0 0 1px;
    border-image: linear-gradient(90deg, rgba(243, 211, 138, 0.5) 0%, rgba(243, 211, 138, 0.3) 70%, rgba(243, 211, 138, 0) 100%) 1;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}

.tp-nation .tpn-counters__tabs::-webkit-scrollbar { display: none; }

/* keyboard: while a counter has focus the row does not snap, so the component's script can scroll a partly hidden
   counter fully into view (proximity snapping would pull the row back and leave its focus ring off-screen) */
.tp-nation .tpn-counters__tabs:focus-within { scroll-snap-type: none; }

.tp-nation .tpn-counters__tabs > li {
    flex: none;
    scroll-snap-align: start;
}

.tp-nation .tpn-counters__tab {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 46px;
    padding: 0.7rem 1rem 0.72rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    box-shadow: inset 0 -2px 0 transparent;
    color: var(--ns-fg-dim);
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.tp-nation .tpn-counters__tab .bi {
    font-size: 1.05em;
    line-height: 1;
    color: rgba(243, 211, 138, 0.62);
}

.tp-nation .tpn-counters__tab:hover {
    color: var(--ns-ivory);
    background-color: rgba(252, 247, 239, 0.05);
    box-shadow: inset 0 -2px 0 rgba(243, 211, 138, 0.35);
}

.tp-nation .tpn-counters__tab:focus-visible {
    outline: 2px solid var(--ns-focus);
    outline-offset: -3px; /* inside: the scrolling list would clip an outer ring */
}

/* the open counter: a raised tab on the rail, gold rule on the hairline (aria-current="page" on the
   counter's own page, "true" on its sub-pages: a game's IDs, a ticket, a Manage page) */
.tp-nation .tpn-counters__tab[aria-current] {
    color: var(--ns-gold-soft);
    background: linear-gradient(180deg, rgba(243, 211, 138, 0.14) 0%, rgba(243, 211, 138, 0.04) 100%);
    border-color: rgba(243, 211, 138, 0.3);
    box-shadow: inset 0 -2px 0 var(--ns-gold);
}

.tp-nation .tpn-counters__tab[aria-current] .bi { color: var(--ns-gold-soft); }

/* signed out: Citizenship and Get Help, and the way in to the other three counters */
.tp-nation .tpn-counters__hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.65rem 0 0.8rem;
    font-size: 0.875rem;
    line-height: 1.35;
    color: var(--ns-fg-mute);
}

.tp-nation .tpn-counters__hint .bi { color: rgba(243, 211, 138, 0.7); }

.tp-nation .tpn-counters__hint a {
    color: var(--ns-link);
    text-decoration: underline;
    text-decoration-color: rgba(243, 211, 138, 0.45);
    text-underline-offset: 0.22em;
}

.tp-nation .tpn-counters__hint a:hover { color: var(--ns-link-hover); text-decoration-color: currentColor; }

.tp-nation .tpn-counters__hint a:focus-visible {
    outline: 2px solid var(--ns-focus);
    outline-offset: 2px;
    border-radius: 3px;
}

/* phones and small tablets (the content column is 540px wide up to 767, too narrow for five counters): one
   scrolling row of counters (the open one is centred by the component's script). The rail runs edge to edge;
   the first counter still starts on the content column, lined up with the banner caption (the column's left
   edge is 50% - 270px + its 12px gutter, never less than the gutter), and the last 36px fade out while more
   counters wait to the right. Once the row is scrolled (the script marks it tpn-counters--scrolled: the open
   counter centred, or the reader's own scroll) the first 36px fade out as well, so a counter cut by the left edge
   (Account showed "sport" of My Passport, hard at x 0) fades like the one at the end. The scroll padding matches
   the fades: a counter brought into view (the script, on focus) stops short of them, so its focus ring is never
   under one */
@media (max-width: 767.98px) {
    .tp-nation .tpn-counters__bar { max-width: none; padding-inline: 0; }
    .tp-nation .tpn-counters__tabs {
        padding-inline: max(12px, calc(50% - 258px)) 36px;
        scroll-padding-inline: max(36px, calc(50% - 258px)) 36px;
    }
    .tp-nation.tpn-counters--full .tpn-counters__tabs {
        -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(90deg, #000 calc(100% - 36px), rgba(0, 0, 0, 0) 100%);
    }
    .tp-nation.tpn-counters--full.tpn-counters--scrolled .tpn-counters__tabs {
        -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 36px, #000 calc(100% - 36px), rgba(0, 0, 0, 0) 100%);
        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 36px, #000 calc(100% - 36px), rgba(0, 0, 0, 0) 100%);
    }
    .tp-nation .tpn-counters__tab { gap: 0.45rem; padding: 0.66rem 0.8rem 0.7rem; font-size: 0.93rem; }
    .tp-nation .tpn-counters__hint { padding: 0.55rem 12px 0.7rem max(12px, calc(50% - 258px)); }
}

/* Arabic, Hebrew, Persian: no tracking (labels take their direction from their text, dir="auto") */
:root:is(:lang(ar), :lang(he), :lang(fa)) .tp-nation .tpn-counters__tab { letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) {
    .tp-nation .tpn-counters__tab { transition: none; }
}

@media (forced-colors: active) {
    .tp-nation .tpn-counters__tab[aria-current] { border-bottom: 3px solid CanvasText; }
}

@media print {
    .tp-nation.tpn-counters { display: none; }
}

/* ---------------------------------------------------------------- 3. around the strip */

/* the page column starts a little closer under the counters (base has 0,4,0 for the banner alone) */
:root body .tpn-counters ~ .main-container.mt-5 {
    margin-top: clamp(1rem, 2.4vw, 2rem) !important;
}

/* the header's Passport Office link on a counter's sub-page or another counter (aria-current="true";
   base marks "page") */
:root body.editorial-page-active:not(.admin-page) header .nav-link[aria-current="true"] {
    color: var(--ns-gold-soft) !important;
}

:root body.editorial-page-active:not(.admin-page) header .nav-link[aria-current="true"]::after {
    width: 100%;
    background: var(--ns-gold-soft);
}

/* ...and in the phone/tablet menu sheet, where the underline is a text decoration (base section 3) */
@media (max-width: 991.98px) {
    :root body.editorial-page-active:not(.admin-page) header .navbar-nav .nav-link[aria-current="true"] {
        text-decoration: underline 1px var(--ns-gold-soft);
        text-underline-offset: 0.45em;
    }
}

/* My Passport: the Nation section sat 7-9rem under the header (inline style), pulled 3rem up into the header's
   shadow (nation.css); under the banner and the counters it starts like every other counter, on the page canvas
   (pulled up, the column would lie over the counters' lower edge) */
:root body .tpn-counters ~ .main-container > main > .tp-nation.tpn-section:first-child {
    margin-top: 0;
    padding-top: clamp(0.5rem, 2vw, 1.5rem) !important;
    background: none;
}

/* ...and its no-passport head drops its own "Passport Office" overline, which repeated the banner's
   kicker right above it (Views/Nation/Passport.cshtml, the no-passport state) */
:root body .tpn-counters ~ .main-container > main > .tp-nation.tpn-section:first-child .tpn-section__head > .tpn-overline:first-child {
    display: none;
}

/* Account: below 992 (where the Manage menu stops being a side column) the menu (a second-level nav, _ManageNav)
   becomes a grid of short chips under the counters instead of six stacked full-width pills (colour and shape stay
   gate.css's ledger tabs; at 768-991 the pills were 700-900px wide and 330px tall before the form). A grid, not a
   sideways scroll: a scroll would hide "Two-factor" and "Personal data" (download, delete) off-screen at 390. The
   grid sizes the cells, so nothing is set on the .nav-item script hook (the site's phone rule makes every .nav-item
   100% wide; here that is the cell). The narrowest cell, 8.8rem (123px at the phones' 14px rem), gives two columns
   from 320 px and still holds "authentication" (91px plus the chip's 32px of padding and borders), so a third
   column only comes when it fits too (from about 440 px; one row of five from 768); a longer single word in another
   language (German "Authentifizierung") breaks inside its chip instead of running out of it. The label is centred
   in its chip, so a one-line label ("Password") sits level with a two-line neighbour ("Two-factor authentication") */
@media (max-width: 991.98px) {
    :root body.identity-page .tpn-place--hub ~ .main-container .identity-manage-nav {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(8.8rem, 1fr));
        gap: 0.4rem;
    }

    :root body.identity-page .tpn-place--hub ~ .main-container .identity-manage-nav .nav-link {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 0.55rem 0.75rem;
        line-height: 1.25;
        text-align: center;
        overflow-wrap: anywhere;
    }
}

/* ---------------------------------------------------------------- 4. Player IDs: "Your IDs"
   OnlineProfile/Index only, above the game grid (Views/Shared/Components/NationPlayerIds). The H1 keeps the
   records skin's heading (records.css OP: serif, no capitals); this section lays out the rows.
   Scope: :root .tpn-place--hub ~ .main-container .tpn-ids (0,4,0 plus the element class: beats S's p/li/a
   rules at 0,4,1). Never .alert, .card, .game-card, .game-grid or data-online-profile-target in the markup: the
   page's inline <style> and script own those. The full IDs are never in the page (a closed <details> would open
   for find-in-page and #:~:text= links): each row shows the last four characters, and "Open" leads to the game's
   page, which shows the whole ID. The section follows the document's direction (left to right in every culture,
   like the counters above and the game grid below); its translated blocks take their own direction (dir="auto")
   but keep the section's alignment. Markup:
   section.tp-nation.tpn-ids > h1.tpn-ids__title[dir=auto] + p.tpn-ids__lede[dir=auto] + (p.tpn-ids__none[dir=auto] |
   ul.tpn-ids__list[role=list] > li.tpn-ids__row > (p.tpn-ids__label[dir=auto], a.tpn-ids__open[dir=auto],
   p.tpn-ids__games[lang=en] > bdi[dir=ltr], p.tpn-ids__cards[dir=auto]?, p.tpn-ids__value > span.tpn-ids__mask[dir=ltr]
   masked to the last 4)) + p.tpn-ids__note[dir=auto] */

.tp-nation.tpn-ids {
    max-width: 1440px;          /* the game grid's (online-profile.css: 1440px, no padding): the rows line up with the tiles */
    margin: 0 auto;
    padding: 0;
}

/* an Arabic, Hebrew or Persian line reads right to left but lines up with the caption, the counters and the tiles
   (start and end resolved against the section, which is left to right; Chromium knows only the prefixed keyword,
   Firefox only the standard one: each keeps the one it understands) */
:root .tpn-place--hub ~ .main-container .tpn-ids [dir="auto"] {
    text-align: -webkit-match-parent;
    text-align: match-parent;
}

:root .tpn-place--hub ~ .main-container .tpn-ids h1.tpn-ids__title { /* 0,5,1: over S's :is(h1, .h1) */
    margin: 0 0 0.35rem;
}

:root .tpn-place--hub ~ .main-container .tpn-ids .tpn-ids__lede {
    max-width: 62ch;
    margin: 0;
    color: var(--ns-fg-dim);
}

:root .tpn-place--hub ~ .main-container .tpn-ids .tpn-ids__none {
    margin: 1rem 0 0;
    padding: 0.9rem 1.1rem;
    background: var(--ns-panel-2);
    border: 1px dashed var(--ns-line-strong);
    border-radius: 14px;
    color: var(--ns-fg);
}

:root .tpn-place--hub ~ .main-container .tpn-ids .tpn-ids__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px 20px;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

:root .tpn-place--hub ~ .main-container .tpn-ids .tpn-ids__row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: 0.25rem 1rem;
    padding: 0.9rem 1.1rem;
    background: var(--ns-panel);
    border: 1px solid var(--ns-line);
    border-inline-start: 3px solid rgba(243, 211, 138, 0.55);
    border-radius: 14px;
    color: var(--ns-fg);
}

:root .tpn-place--hub ~ .main-container .tpn-ids .tpn-ids__label {
    margin: 0;
    color: var(--ns-heading);
    font-weight: 700;
}

:root .tpn-place--hub ~ .main-container .tpn-ids :is(.tpn-ids__games, .tpn-ids__cards) {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--ns-fg-mute);
    font-size: var(--ns-fs-small);
}

:root .tpn-place--hub ~ .main-container .tpn-ids .tpn-ids__value {
    grid-column: 1 / -1;
    margin: 0.3rem 0 0;
    color: var(--ns-fg);
    font-family: var(--ns-mono);
    overflow-wrap: anywhere;
}

:root .tpn-place--hub ~ .main-container .tpn-ids .tpn-ids__mask {
    letter-spacing: 0.08em;
}

:root .tpn-place--hub ~ .main-container .tpn-ids .tpn-ids__open {
    color: var(--ns-link);
    text-decoration: underline;
    text-decoration-color: rgba(243, 211, 138, 0.45);
    text-underline-offset: 0.2em;
    white-space: nowrap;
}

:root .tpn-place--hub ~ .main-container .tpn-ids .tpn-ids__open:hover {
    color: var(--ns-link-hover);
    text-decoration-color: currentColor;
}

:root .tpn-place--hub ~ .main-container .tpn-ids .tpn-ids__note {
    margin: 0.9rem 0 0;
    color: var(--ns-fg-mute);
    font-size: var(--ns-fs-small);
}

/* phones: one column (a 300px track would overflow a 320px screen) */
@media (max-width: 575.98px) {
    :root .tpn-place--hub ~ .main-container .tpn-ids .tpn-ids__list { grid-template-columns: minmax(0, 1fr); }
}

@media print {
    .tp-nation.tpn-ids { display: none; }
}

/* ==================================================================== base.css */

/* ==========================================================================
   TeknoParrot Nation: site-wide theme (the harbor at night)
   Loaded after every page's own styles, only while Citizen:PublicUi is on, by
   the NationSiteTheme view component. With the switch off this file is never
   requested and every page renders exactly as before.

   The system (tokens, scope prefixes, recipes) is documented in SYSTEM.md
   next to the design notes. In short:
     P = :root body.editorial-page-active:not(.admin-page)      page chrome
     S = :root .tpn-place:not(.tpn-place--passport) ~ .main-container
                                                               page content
   S only exists on pages that carry a place banner (the banner renders right
   before .main-container), so home, the Nation pages, admin, UpdatePayment
   and the Passport Office's pricing never receive content skins.

   Hard rules for this file and its group files:
   - inside the pricing block (.subscription-pricing-container) and on the payment
     hooks (.price, [data-tier], .btn-gradient, .paddle-checkout-btn, the billing
     toggle) repaint only: colour, background, border colour, radius, shadow,
     outline, type and text decoration, never anything that moves, resizes, hides
     or re-targets a box (build.py's lint has the exact list); --tp-* tokens are
     redefined only on the Passport Office's pricing scope (gate.css 6b), never
     at :root;
   - on script-driven elements colour, type, border, radius and shadow only;
     never change their display, position, order, visibility or transform;
   - no transform/filter/contain on html/body/header (fixed descendants), no
     z-index above 1039 for page content, no web fonts, no external URLs.
   ========================================================================== */

/* The page groups (decks, lighthouse, records, gate) are separate sources next to this file;
   tools/nation-site/build.py bundles them ahead of this one into wwwroot/css/nation-site.css. */

/* ---------------------------------------------------------------- 1. tokens */

:root {
    /* palette */
    --ns-ink: #060d1d;
    --ns-night: #081226;
    --ns-page: #0a1830;
    --ns-navy: #0b1b33;
    --ns-navy-2: #102d49;
    --ns-dusk: #2a2352;
    --ns-ivory: #fcf7ef;
    --ns-gold: #e7b64b;
    --ns-gold-soft: #f3d38a;
    --ns-cyan: #7fe9ff;
    --ns-magenta: #ff8fe6;
    --ns-lime: #c9ff86;
    --ns-coral: #ff7a6b;
    --ns-coral-soft: #ffb4a9;
    --ns-paper: #f6efe1;
    --ns-paper-2: #ede3cf;

    /* the same roles on cream paper (recipe "paper" in SYSTEM.md: copy the role block onto a surface) */
    --ns-paper-surface: linear-gradient(180deg, #f8f2e6 0%, #f1e8d6 100%);
    --ns-paper-fg: #1d2838;
    --ns-paper-fg-dim: #3b4658;
    --ns-paper-fg-mute: #566173;
    --ns-paper-heading: #0b1b33;
    --ns-paper-link: #1d4f86;
    --ns-paper-link-hover: #0b1b33;
    --ns-paper-accent-text: #7e5306;
    --ns-paper-ok: #2f6512;
    --ns-paper-warn: #7a5200;
    --ns-paper-bad: #a3301d;
    --ns-paper-info: #0a5d71;
    --ns-paper-line: rgba(11, 27, 51, 0.14);
    --ns-paper-line-strong: rgba(11, 27, 51, 0.28);
    --ns-paper-line-gold: rgba(166, 120, 20, 0.45);
    --ns-paper-tint-1: rgba(11, 27, 51, 0.035);
    --ns-paper-tint-2: rgba(11, 27, 51, 0.06);
    --ns-paper-tint-3: rgba(11, 27, 51, 0.1);
    --ns-paper-panel: linear-gradient(180deg, #fffdf8 0%, #fbf6ec 100%);
    --ns-paper-field: #fffdf8;
    --ns-paper-field-line: rgba(11, 27, 51, 0.26);
    --ns-paper-placeholder: rgba(29, 40, 56, 0.55);
    --ns-paper-focus: #1d4f86;
    --ns-paper-close-filter: invert(1);
    --ns-paper-thead-bg: #0f2140;
    --ns-paper-thead-fg: #f3d38a;
    --ns-paper-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%230b1b33' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --ns-paper-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230b1b33' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --ns-paper-chevron-active: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237e5306' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");

    /* surface-aware roles: dark defaults; a paper surface redefines them (SYSTEM.md, recipe "paper") */
    --ns-fg: rgba(252, 247, 239, 0.9);
    --ns-fg-dim: rgba(252, 247, 239, 0.76);
    --ns-fg-mute: rgba(252, 247, 239, 0.62);
    --ns-heading: #fcf7ef;
    --ns-link: #f3d38a;
    --ns-link-hover: #fcf7ef;
    --ns-line: rgba(252, 247, 239, 0.12);
    --ns-line-strong: rgba(252, 247, 239, 0.24);
    --ns-line-gold: rgba(243, 211, 138, 0.34);
    --ns-panel: linear-gradient(180deg, rgba(23, 42, 76, 0.74) 0%, rgba(11, 27, 51, 0.8) 100%);
    --ns-panel-solid: #0f2140;
    --ns-panel-2: rgba(252, 247, 239, 0.045);
    --ns-panel-hover: rgba(243, 211, 138, 0.07);
    --ns-field: rgba(4, 10, 24, 0.55);
    --ns-field-line: rgba(252, 247, 239, 0.2);
    --ns-field-fg: #fcf7ef;
    --ns-placeholder: rgba(252, 247, 239, 0.52);
    --ns-accent: #e7b64b;
    --ns-accent-fill: linear-gradient(180deg, #f6da93 0%, #e7b64b 100%);
    --ns-on-accent: #1b1203;
    --ns-focus: #f3d38a;
    --ns-focus-ring: 0 0 0 3px rgba(243, 211, 138, 0.38);
    --ns-ok: #c9ff86;
    --ns-warn: #f3d38a;
    --ns-bad: #ffb4a9;
    --ns-info: #7fe9ff;
    --ns-accent-text: #f3d38a;
    --ns-tint-1: rgba(252, 247, 239, 0.035);
    --ns-tint-2: rgba(252, 247, 239, 0.06);
    --ns-tint-3: rgba(252, 247, 239, 0.1);
    --ns-thead-bg: rgba(4, 10, 24, 0.72);
    --ns-thead-fg: #f3d38a;
    --ns-select-arrow: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f3d38a' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --ns-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fcf7ef' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
    --ns-chevron-active: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23f3d38a' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");

    /* shape */
    --ns-radius: 16px;
    --ns-radius-sm: 10px;
    --ns-radius-pill: 999px;
    --ns-shadow: 0 24px 60px rgba(2, 6, 16, 0.45);
    --ns-shadow-sm: 0 10px 26px rgba(2, 6, 16, 0.35);
    --ns-glow-gold: 0 10px 30px rgba(231, 182, 75, 0.28);
    --ns-hairline-gold: linear-gradient(90deg, rgba(243, 211, 138, 0), rgba(243, 211, 138, 0.55) 50%, rgba(243, 211, 138, 0));

    /* type */
    --ns-font: var(--font-family-system, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    --ns-serif: Georgia, "Times New Roman", serif;
    --ns-mono: var(--font-family-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    --ns-fs-display: clamp(2.3rem, 1.5rem + 3vw, 4rem);
    --ns-fs-h1: clamp(1.9rem, 1.45rem + 1.9vw, 3rem);
    --ns-fs-h2: clamp(1.45rem, 1.2rem + 1.05vw, 2.05rem);
    --ns-fs-h3: clamp(1.2rem, 1.1rem + 0.45vw, 1.45rem);
    --ns-fs-h4: 1.1rem;
    --ns-fs-body: 1rem;
    --ns-fs-small: 0.875rem;
    --ns-fs-overline: 0.72rem;
    --ns-track-overline: 0.26em;
    --ns-h1-transform: uppercase;

    /* page canvas */
    --ns-canvas:
        linear-gradient(180deg, #0a1830 0, #0a1830 520px, #0b1b33 1400px, #081428 100%);
    --ns-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .96 0 0 0 0 .9 .07 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    --ns-ripples: repeating-linear-gradient(180deg, rgba(127, 233, 255, 0.018) 0 1px, rgba(127, 233, 255, 0) 1px 9px);
}

/* ---------------------------------------------------------------- 2. page canvas (pages with a place banner, and the Nation pages)
   The night canvas, light text and dark color-scheme only go where the content is themed as well: a
   page with a place banner (the S skins) or a Nation page (nation.css sections). Every other editorial
   page (Wiki, Participate, SecretPage, the admin tools without .admin-page, NationAdmin...) keeps its own
   ivory page and dark text; only its header and footer take the theme. Browsers without :has() keep the
   old behaviour (canvas everywhere), since their S skins cannot be told apart either. */

/* the canvas itself (every place, the Passport Office included) */
:root body.editorial-page-active:not(.admin-page):is(:has(> .tpn-place), :has(> .main-container > main > .tp-nation)) {
    background: var(--ns-grain), var(--ns-ripples), var(--ns-canvas);
    background-color: var(--ns-page);
    background-attachment: scroll;
}

/* light text and the dark color-scheme: not on the Passport Office. Everything there sits on the cream
   sheet around the protected pricing, which must render exactly as with the theme off (UA button text,
   form controls), and Paddle's overlay checkout is a transparent iframe appended to <body>: a body
   color-scheme that differs from the frame's makes browsers paint the frame opaque. A page that carries the
   pricing block is left out whatever else it holds: the members' page (SubscriptionAuth) opens <main> with
   Nation markup (the passport strip, the licences heading), which alone would match the Nation-page branch.
   My Passport (a .tpn-place--passport banner, no pricing block) keeps the night: the second branch. */
:root body.editorial-page-active:not(.admin-page):not(:has(.subscription-pricing-container)):is(:has(> .tpn-place:not(.tpn-place--passport)), :has(> .main-container > main > .tp-nation)) {
    color: var(--ns-fg);
    color-scheme: dark;
}

:root body.editorial-page-active:not(.admin-page):not(:has(.subscription-pricing-container)):is(:has(> .tpn-place:not(.tpn-place--passport)), :has(> .main-container > main > .tp-nation)) ::selection {
    background: rgba(243, 211, 138, 0.35);
    color: var(--ns-ivory);
}

/* Nation pages (no place banner): the old sky band behind the header becomes the harbor's light
   spilling onto the water. The band is 1100px tall but never taller than the page: on a short page (a vote
   that is not there, 1015px at 390) it hung below the footer and added a strip of scroll. The body is its
   containing block for that (it starts at the top, so nothing else placed on it moves); not on a page with a
   place banner, which has no band (below), and so never on the Passport Office's pricing. */
:root body.editorial-page-active:not(.admin-page):not(:has(> .tpn-place)):has(> .main-container > main > .tp-nation) {
    position: relative;
}

:root body.editorial-page-active:not(.admin-page):has(> .main-container > main > .tp-nation)::before {
    height: min(1100px, 100%);
    background:
        radial-gradient(46% 30% at 62% 34%, rgba(238, 154, 110, 0.075) 0%, rgba(238, 154, 110, 0) 70%),
        radial-gradient(38% 26% at 18% 40%, rgba(127, 233, 255, 0.045) 0%, rgba(127, 233, 255, 0) 70%),
        radial-gradient(60% 40% at 50% 0%, rgba(42, 35, 82, 0.55) 0%, rgba(42, 35, 82, 0) 70%);
}

/* place pages: the opaque banner covers the top of the page, so the sky band would only show below its
   bottom edge as a hard seam. The band goes; the banner carries the same light below itself, fading in
   from its bottom edge (section 5, .tpn-place::after). */
:root body.editorial-page-active:not(.admin-page):has(> .tpn-place)::before {
    content: none;
}

@supports not selector(:has(*)) {
    /* no color-scheme here: without :has() the Passport Office cannot be told apart */
    :root body.editorial-page-active:not(.admin-page) {
        background: var(--ns-grain), var(--ns-ripples), var(--ns-canvas);
        background-color: var(--ns-page);
        color: var(--ns-fg);
    }
}

/* ---------------------------------------------------------------- 3. header (non-home pages; the links, the account
   tools, the focus rings and the language switcher on home too, whose bar stays transparent over the harbor hero) */

:root body.editorial-page-active:not(.admin-page) header .header-bg {
    background: linear-gradient(180deg, rgb(5, 10, 22) 0%, rgb(8, 14, 32) 100%) !important;
    border-color: transparent !important;
    box-shadow: none;
    /* layout.css blurs this bar; a backdrop-filter makes the bar the containing block of the
       phone menu (position: fixed), which then opens inside the 70px bar instead of full screen.
       The bar is opaque now, so the blur has nothing to do. */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* a foil hairline under the header, fading out at both ends */
:root body.editorial-page-active:not(.admin-page) header::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: var(--ns-hairline-gold);
    opacity: 0.5;
    pointer-events: none;
}

:root body.editorial-page-active:not(.admin-page) header .navbar-brand img {
    filter: brightness(0) invert(1) sepia(0.12) drop-shadow(0 0 18px rgba(243, 211, 138, 0.22));
}

:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) header .nav-link {
    color: rgba(252, 247, 239, 0.84) !important;
    border-radius: 6px;
}

:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) header .nav-link:hover,
:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) header .nav-link:focus-visible {
    color: var(--ns-ivory) !important;
    background-color: rgba(252, 247, 239, 0.06);
}

:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) header .nav-link::after {
    background: var(--ns-gold-soft);
}

:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) header a:focus-visible,
:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) header button:focus-visible {
    outline: 2px solid var(--ns-focus);
    outline-offset: 2px;
    box-shadow: none;
}

:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) header .navbar-toggler {
    border-color: rgba(252, 247, 239, 0.24);
}

:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) header .navbar-toggler-icon {
    filter: brightness(0) invert(1);
}

:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) header .navbar-toggler:focus {
    box-shadow: var(--ns-focus-ring);
}

/* signed-in logout button in the header */
:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) header #logout {
    background: rgba(255, 122, 107, 0.12);
    border: 1px solid rgba(255, 122, 107, 0.5);
    color: var(--ns-coral-soft);
    border-radius: var(--ns-radius-pill);
}

/* where am I: the header link of the current place (progressive: needs :has). At the Harbor Gate only the
   page's own link: Login on the login form, Register on the register form, the account on Manage. */
@supports selector(:has(*)) {
    :root body:has(.tpn-place--lighthouse) header .nav-link[href$="/Home/Download"],
    :root body:has(.tpn-place--decks) header .nav-link[href$="/Compatibility"],
    :root body:has(.tpn-place--radio) header .nav-link[href$="/Home/Live"],
    :root body:has(.tpn-place--records:not(.tpn-place--hub)) header .nav-link[href$="/Highscore"],
    :root body:has(.tpn-place--passport) header .nav-link[href$="/Home/Subscription"],
    :root body:has(.tpn-place--harbormaster) header .nav-link[href$="/Support"],
    :root body:has(.tpn-place--gate):has(form#account) header #login,
    :root body:has(.tpn-place--gate):has(form#registerForm) header #register,
    :root body:has(.tpn-place--gate):has(.identity-manage-shell) header #manage {
        color: var(--ns-gold-soft) !important;
    }

    :root body:has(.tpn-place--lighthouse) header .nav-link[href$="/Home/Download"]::after,
    :root body:has(.tpn-place--decks) header .nav-link[href$="/Compatibility"]::after,
    :root body:has(.tpn-place--radio) header .nav-link[href$="/Home/Live"]::after,
    :root body:has(.tpn-place--records:not(.tpn-place--hub)) header .nav-link[href$="/Highscore"]::after,
    :root body:has(.tpn-place--passport) header .nav-link[href$="/Home/Subscription"]::after,
    :root body:has(.tpn-place--harbormaster) header .nav-link[href$="/Support"]::after {
        width: 100%;
        background: var(--ns-gold-soft);
    }
}

/* the same for a page that marks its own header link (every Nation page marks "Citizen Vote") */
:root body.editorial-page-active:not(.admin-page) header .nav-link[aria-current="page"] {
    color: var(--ns-gold-soft) !important;
}

:root body.editorial-page-active:not(.admin-page) header .nav-link[aria-current="page"]::after {
    width: 100%;
    background: var(--ns-gold-soft);
}

/* desktop: a masthead. Beside the centred wordmark the links had half the bar minus the wordmark's clearance
   (layout.css: 542px from 1400 up, 452px at 1200-1399, 362px at 992-1199), and with Get Help (master) eight
   English links needed ~600px: two rows everywhere, three in German. Now the wordmark and the account tools
   share the top row and the links run in one centred row under a foil hairline, across the whole column
   (936px at 992, 1116px at 1200, 1296px from 1400): one row in English, Arabic and German from 992 up, signed
   in too (nine links with Online Profiles). With the Passport Office (hub.css; the layout's nationOffice switch)
   the row is seven links: Home, Download, Updates, Citizen Vote, Compatibility, High Scores, Passport Office
   (eight with the Admin Panel). The wordmark stays centred on the top row; nothing script-driven moves (the
   collapse only opens below 992px). */
@media (min-width: 992px) {
    :root body:is(.editorial-page-active, .home-page-active):not(.admin-page) header .navbar-collapse > .d-flex {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 2.5rem auto;
        row-gap: 0.2rem;
    }

    :root body:is(.editorial-page-active, .home-page-active):not(.admin-page) header .navbar-collapse > .d-flex > .header-utility-group {
        grid-row: 1;
        grid-column: 2;
        padding-inline-start: 0;
    }

    /* home: layout.css keeps every .navbar-nav 100px off the centred wordmark (padding-right 6.25rem), the account
       tools' list too: the masthead has the wordmark on its own, so the tools end on the column's edge as on every
       other page. The greeting holds a user name: capped (with an ellipsis; the link and its text stay whole), so a
       long name cannot run the tools under the centred wordmark from 1400 (below, the wordmark moves aside) */
    :root body:is(.editorial-page-active, .home-page-active):not(.admin-page) header .navbar-collapse > .d-flex > .header-utility-group .navbar-nav {
        padding-inline-end: 0;
    }

    :root body:is(.editorial-page-active, .home-page-active):not(.admin-page) header .header-utility-group #manage {
        max-width: 16rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    :root body:is(.editorial-page-active, .home-page-active):not(.admin-page) header .navbar-collapse > .d-flex > .navbar-nav {
        grid-row: 2;
        grid-column: 1 / -1;
        justify-content: center;
        padding: 0.3rem 0 0;
        border-top: 1px solid rgba(243, 211, 138, 0.16);
    }

    :root body:is(.editorial-page-active, .home-page-active):not(.admin-page) header .navbar-collapse > .d-flex > .navbar-nav .nav-link {
        font-size: 0.78rem;
        letter-spacing: 0.06em;
        padding-inline: 0.55rem !important;
    }

    /* the wordmark on the top row (layout.css centres it on the whole bar): the container's top padding plus
       half the row */
    :root body:is(.editorial-page-active, .home-page-active):not(.admin-page) header .header-brand-row {
        top: calc(0.55rem + 1.25rem);
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    :root body:is(.editorial-page-active, .home-page-active):not(.admin-page) header .navbar-collapse > .d-flex > .navbar-nav .nav-link {
        font-size: 0.74rem;
        letter-spacing: 0.03em;
        padding-inline: 0.42rem !important;
    }
}

/* signed in, the language pill and the account tools (avatar, greeting, Logout) fill the right of the top row, and up to
   1399 they ran under the centred wordmark: by 30-85px on the editorial pages and 59-119px on home at 992-1199, 3-29px
   on home and within 5-20px of it elsewhere at 1200-1399, in every language. There the wordmark moves to the start of
   the top row, which is empty (the links are on the row below), level with the links' first column; from 1400 the
   half bar beside the centred wordmark holds the tools, the capped greeting included (above) */
@media (min-width: 992px) and (max-width: 1399.98px) {
    :root body:is(.editorial-page-active, .home-page-active):not(.admin-page):has(#logoutForm) header .header-brand-row {
        left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
        transform: translateY(-50%);
    }
}

/* phone/tablet menu (full-screen sheet, opened by Bootstrap's collapse): colour only. Home's sheet was a light blur over
   the hero with the links in wrapped rows (layout.css's desktop row rule outranks its phone column there): the same
   night sheet and one centred column as every other page */
@media (max-width: 991.98px) {
    :root body:is(.editorial-page-active, .home-page-active):not(.admin-page) header .navbar-collapse.show {
        background-color: rgba(6, 12, 28, 0.97);
    }

    :root body.home-page-active header .navbar-collapse.show {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    :root body.home-page-active header .navbar-collapse > .d-flex > .navbar-nav {
        flex-direction: column !important;
        padding-inline-end: 0;
    }

    :root body:is(.editorial-page-active, .home-page-active):not(.admin-page) header .navbar-collapse .nav-link {
        font-size: 1rem;
        letter-spacing: 0.06em;
    }

    /* the links are full-width rows here, so layout.css's absolute ::after underline (width 100%) ran
       across the whole sheet: the underline becomes a text decoration that hugs the word */
    :root body:is(.editorial-page-active, .home-page-active):not(.admin-page) header .navbar-nav .nav-link::after {
        content: none;
    }

    :root body:is(.editorial-page-active, .home-page-active):not(.admin-page) header .navbar-nav .nav-link:hover {
        text-decoration: underline 1px rgba(252, 247, 239, 0.6);
        text-underline-offset: 0.45em;
    }

    @supports selector(:has(*)) {
        :root body:has(.tpn-place--lighthouse) header .navbar-nav .nav-link[href$="/Home/Download"],
        :root body:has(.tpn-place--decks) header .navbar-nav .nav-link[href$="/Compatibility"],
        :root body:has(.tpn-place--radio) header .navbar-nav .nav-link[href$="/Home/Live"],
        :root body:has(.tpn-place--records:not(.tpn-place--hub)) header .navbar-nav .nav-link[href$="/Highscore"],
        :root body:has(.tpn-place--passport) header .navbar-nav .nav-link[href$="/Home/Subscription"],
        :root body:has(.tpn-place--harbormaster) header .navbar-nav .nav-link[href$="/Support"] {
            text-decoration: underline 1px var(--ns-gold-soft);
            text-underline-offset: 0.45em;
        }
    }

    :root body:is(.editorial-page-active, .home-page-active):not(.admin-page) header .navbar-nav .nav-link[aria-current="page"] {
        text-decoration: underline 1px var(--ns-gold-soft);
        text-underline-offset: 0.45em;
    }
}

/* ---------------------------------------------------------------- 4. language switcher (header dropdown) */

:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) .language-selector .btn-glass-morphism {
    background: rgba(252, 247, 239, 0.07) !important;
    border: 1px solid rgba(252, 247, 239, 0.18) !important;
    color: rgba(252, 247, 239, 0.92) !important;
    box-shadow: none !important;
    border-radius: var(--ns-radius-pill) !important;
    padding: 0.38rem 0.85rem !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.02em;
    /* page sheets restyle every .btn (online-profile.css: narrow label face, capitals): the switcher keeps the theme face */
    font-family: var(--ns-font);
    font-weight: 500;
    text-transform: none;
}

:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) .language-selector .btn-glass-morphism:hover,
:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) .language-selector .btn-glass-morphism.show,
:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) .language-selector:hover .btn-glass-morphism {
    background: rgba(252, 247, 239, 0.12) !important;
    border-color: var(--ns-line-gold) !important;
    color: var(--ns-ivory) !important;
    box-shadow: none !important;
}

:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) .language-selector .btn-glass-morphism:focus-visible {
    outline: 2px solid var(--ns-focus) !important;
    outline-offset: 2px;
}

:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) .language-selector .btn-glass-morphism i {
    color: var(--ns-gold-soft) !important;
}

:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) .glass-dropdown {
    background: rgba(9, 18, 38, 0.98) !important;
    border: 1px solid var(--ns-line-strong) !important;
    border-radius: 14px !important;
    box-shadow: var(--ns-shadow) !important;
    scrollbar-color: rgba(243, 211, 138, 0.4) transparent;
}

:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) .glass-dropdown::before {
    background: none;
    filter: none;
}

:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) .glass-dropdown-item {
    color: rgba(252, 247, 239, 0.86) !important;
}

:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) .glass-dropdown-item:hover:not(.active):not(:disabled),
:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) .glass-dropdown-item:focus-visible {
    background: rgba(243, 211, 138, 0.1) !important;
    color: var(--ns-ivory) !important;
    box-shadow: none !important;
    outline: none;
}

:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) .glass-dropdown-item:focus-visible {
    box-shadow: inset 0 0 0 1px var(--ns-focus) !important;
}

:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) .glass-dropdown-item.active,
:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) .glass-dropdown-item.active:hover,
:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) .glass-dropdown-item:disabled:hover {
    background: rgba(243, 211, 138, 0.14) !important;
    color: var(--ns-gold-soft) !important;
    box-shadow: inset 0 0 0 1px rgba(243, 211, 138, 0.3) !important;
    opacity: 1 !important;
}

:root body:is(.editorial-page-active, .home-page-active):not(.admin-page) .glass-dropdown-item i {
    color: var(--ns-lime) !important;
}

/* ---------------------------------------------------------------- 5. place banner */

/* The harbor, framed on this page's place. The scene is one 16:9 box (1600x900
   viewBox units) scaled so that --tpn-crop-span viewBox units fill the banner's
   height (never narrower than the banner), and moved so the focus point
   (--tpn-crop-x, --tpn-crop-y, in viewBox units) lands at --tpn-crop-at-x /
   --tpn-crop-at-y of the banner, clamped so no edge of the art is ever shown (a place
   may let the art start further in: --tpn-art-inset, the Lighthouse).
   Retune per place below when the final art moves things. While the banner is
   height-limited, the top edge shows viewBox y = crop-y - at-y * span: keep it
   above every landmark in frame (lighthouse lantern ~575, Grand Cabinet spire ~345).
   Round 2: records shows the whole tower sign (top 375), passport zooms out so the
   lantern is whole and the TP sign board sits above the caption, gate moves the
   lighthouse out of frame (its lantern was cut at the top edge).
   Round 3: no caption on a landmark at any width. The gate frames the pier (gatehouse,
   stairs, newcomers, gangway) instead of a second copy of the Ark's hull; the radio
   room keeps the headland's signal mast (x 85-112) whole or out of frame, never cut
   by the edge; the harbor's small lighthouse stands above the kicker, not on it.
   Round 4 (builds standing): checked with all twelve plots built (released) as well as the live four. A caption
   line never sits on a build; a build may run out of frame at a side edge (the picture goes on) but never loses
   more than a quarter of its height at the top edge. The harbor was re-framed (the caption on the water under
   the quay at every width); the Ark's Decks and the Harbor Gate keep their quay close-ups and draw the surveyed
   lots instead of the builds (NationPlaces.ShowsBuilds); the passport moves down a little from 1600.
   Round 5: the Hall of Records draws the lots too (its caption sat on the builds at every width) and rises a little
   so the Ark's flag is whole; the radio room takes the Grand Cabinet in whole at 2080-2299; the harbor keeps the TP
   site board whole at 1600-1650 and its standing builds from 2200. */

.tp-nation.tpn-place {
    --tpn-place-h: clamp(172px, 11vw + 138px, 340px);
    --tpn-crop-x: 800;
    --tpn-crop-y: 600;
    --tpn-crop-span: 420;
    --tpn-crop-at-x: 0.62;
    --tpn-crop-at-y: 0.52;
    --tpn-art-inset: 0px;
    --tpn-veil-top: rgb(8, 14, 32);
    --tpn-veil-side: rgba(6, 13, 29, 0.5);
    position: relative;
    height: var(--tpn-place-h);
    margin: 0;
    /* visible: the harbor light below the banner (::after) hangs out of it; the art clips itself */
    overflow: visible;
    isolation: isolate;
    background: #0b0b24;
    color: var(--ns-ivory);
}

/* The banner follows the document's direction, which is LTR in every culture (the pages under it are LTR),
   so the caption always sits on the left, lined up with the page's heading, and no crop is mirrored: a
   mirrored crop parked the Ark's nameplate and the TP tower behind the Arabic caption. */

/* the places (viewBox coordinates of the dusk harbor, tools/nation-art) */
.tp-nation.tpn-place--lighthouse { --tpn-crop-x: 215; --tpn-crop-y: 606; --tpn-crop-span: 150; --tpn-crop-at-x: 0.66; --tpn-crop-at-y: 0.5; }
.tp-nation.tpn-place--decks      { --tpn-crop-x: 800; --tpn-crop-y: 675; --tpn-crop-span: 160; --tpn-crop-at-x: 0.64; --tpn-crop-at-y: 0.54; }
.tp-nation.tpn-place--records    { --tpn-crop-x: 1440; --tpn-crop-y: 464; --tpn-crop-span: 275; --tpn-crop-at-x: 0.7; --tpn-crop-at-y: 0.38; }
.tp-nation.tpn-place--radio      { --tpn-crop-x: 935; --tpn-crop-y: 430; --tpn-crop-span: 230; --tpn-crop-at-x: 0.7; --tpn-crop-at-y: 0.46; }
.tp-nation.tpn-place--passport   { --tpn-crop-x: 215; --tpn-crop-y: 690; --tpn-crop-span: 260; --tpn-crop-at-x: 0.66; --tpn-crop-at-y: 0.52; }
.tp-nation.tpn-place--gate       { --tpn-crop-x: 650; --tpn-crop-y: 745; --tpn-crop-span: 115; --tpn-crop-at-x: 0.66; --tpn-crop-at-y: 0.42; }
/* the harbor (phones first; the wider frames below): see "Round 4" above */
.tp-nation.tpn-place--harbor     { --tpn-crop-x: 800; --tpn-crop-y: 750; --tpn-crop-span: 280; --tpn-crop-at-x: 0.32; --tpn-crop-at-y: 0.5; }
/* the Harbormaster's Office (Get Help): the city's harbor front, the shop row and its lamps whole, the office quarter
   behind; the caption on the water under the promenade (no build, no lettering, the Ark out of frame at every width) */
.tp-nation.tpn-place--harbormaster { --tpn-crop-x: 1300; --tpn-crop-y: 640; --tpn-crop-span: 130; --tpn-crop-at-x: 0.5; --tpn-crop-at-y: 0.5; }
@media (min-width: 1600px) { .tp-nation.tpn-place--harbormaster { --tpn-crop-span: 110; } } /* the Ark's figurehead stays out */

/* the signal mast comes whole into frame from 1600 up (left of the caption column); at 2080-2299 the Grand Cabinet
   (its TP marquee and emblem) came into frame at the right edge only in part, so the frame zooms out a little there
   and takes it in whole (from 2300 it is whole at the normal zoom) */
@media (min-width: 1600px) { .tp-nation.tpn-place--radio { --tpn-crop-x: 845; } }
@media (min-width: 2080px) and (max-width: 2299.98px) { .tp-nation.tpn-place--radio { --tpn-crop-span: 250; } }

/* the Hall of Records: the Ark's flag (its parrot emblem, near the top of the frame) stood 10-16px over the banner's top
   edge at every width with the focus at y 480 (up to 53px at 2560); at 464 it is whole. From 2100, where the wider
   frame shows less of the scene's height, the focus rises again to 440 (the TP tower's lettering stays in up to 2560) */
@media (min-width: 2100px) { .tp-nation.tpn-place--records { --tpn-crop-y: 440; } }

/* the gate: no lettering cut by an edge. Right of the pier the Ark's painted nameplate (viewBox x ~767-881; it showed
   as "PA" at 768 up to "PARROT'S AR" at 1920), left of it the TP sign board on the quay (~153-210, the "TP" at ~182-199).
   The frame (115 units high) is only ~557 units wide between the two up to ~1360; 1360-1599 zooms in a little to keep
   both out; from 1600 the board comes in whole at the left; from 2100 the nameplate comes in whole at the right, the
   board first out, then (2300) whole again (phones: section below) */
@media (min-width: 576px) { .tp-nation.tpn-place--gate { --tpn-crop-at-x: 0.8; } }
@media (min-width: 1360px) and (max-width: 1599.98px) { .tp-nation.tpn-place--gate { --tpn-crop-span: 104; --tpn-crop-at-x: 0.81; } }
@media (min-width: 1600px) { .tp-nation.tpn-place--gate { --tpn-crop-at-x: 0.86; } }
@media (min-width: 2100px) { .tp-nation.tpn-place--gate { --tpn-crop-at-x: 0.55; } }
@media (min-width: 2300px) { .tp-nation.tpn-place--gate { --tpn-crop-at-x: 0.66; } }

/* the harbor from 576 up. Tablets: the Ark and the city across the water, the caption on the open water below
   the Ark's reflection (a wider frame would put it on the pier's people, the rowboat or the builds). From 992: the
   whole harbor, headland and lighthouse, all twelve plots whole, the Ark, the city; the caption on the dark water
   under the quay wall (below the builds' feet, right of the rowboat). 1600-2199 the focus sits a little further
   right, so the quay's TP site board comes in whole at the left edge (at 0.2 its emblem was cut there up to ~1650).
   2200 up the frame is the scene's full width, centred at y 696: the caption stays under the quay, and the standing
   builds lose less than a quarter at the top edge (at 714 two of them lost a third; the lighthouse's lantern leaves
   the frame there). */
@media (min-width: 576px) { .tp-nation.tpn-place--harbor { --tpn-crop-y: 745; --tpn-crop-span: 310; --tpn-crop-at-x: 0.2; } }
@media (min-width: 768px) { .tp-nation.tpn-place--harbor { --tpn-crop-y: 760; --tpn-crop-span: 280; --tpn-crop-at-x: 0.2; } }
@media (min-width: 992px) { .tp-nation.tpn-place--harbor { --tpn-crop-x: 500; --tpn-crop-y: 690; --tpn-crop-span: 360; --tpn-crop-at-x: 0.26; --tpn-crop-at-y: 0.46; } }
@media (min-width: 1200px) { .tp-nation.tpn-place--harbor { --tpn-crop-y: 695; --tpn-crop-span: 320; --tpn-crop-at-x: 0.2; } }
@media (min-width: 1600px) { .tp-nation.tpn-place--harbor { --tpn-crop-y: 700; --tpn-crop-span: 280; } }
@media (min-width: 1600px) and (max-width: 2199.98px) { .tp-nation.tpn-place--harbor { --tpn-crop-at-x: 0.25; } }
@media (min-width: 2200px) { .tp-nation.tpn-place--harbor { --tpn-crop-x: 800; --tpn-crop-y: 696; --tpn-crop-span: 210; --tpn-crop-at-x: 0.5; } }

/* the passport from 1600 up: a little lower, so the kicker clears the feet of plots 7, 9 and 11 */
@media (min-width: 1600px) { .tp-nation.tpn-place--passport { --tpn-crop-y: 700; } }

/* narrow banners: the masts, and the Ark, stand right of the name's rule (phones: section below) */
@media (max-width: 767.98px) { .tp-nation.tpn-place--radio { --tpn-crop-at-x: 0.84; } }
/* tablets: the hull (300 units) is wider than the room right of the caption at the decks' zoom */
@media (min-width: 576px) and (max-width: 991.98px) { .tp-nation.tpn-place--decks { --tpn-crop-span: 200; --tpn-crop-at-x: 0.715; } }

/* The Lighthouse stands near the art's left edge, so with the art clamped to the banner's edge a
   left-aligned caption always ran into the tower (the rule at 1440, the name itself from 1600 up).
   From 576 up the art starts further in: the tower comes to the middle and the headland fades
   into the night on the left, where the caption sits. By day the veil there can be lighter. */
@media (min-width: 576px) {
    .tp-nation.tpn-place--lighthouse { --tpn-crop-at-x: 0.52; --tpn-art-inset: 45cqw; }

    .tp-nation.tpn-place--lighthouse .tpn-place__art .tpn-scene {
        -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 260px);
        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, #000 260px);
    }
}

.tp-nation .tpn-place__art {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

@supports (width: 1cqw) {
    .tp-nation .tpn-place__art { container-type: size; }

    .tp-nation.tpn-place .tpn-place__art .tpn-scene {
        --tpn-w: max(100cqw, 100cqh * 1600 / var(--tpn-crop-span));
        --tpn-h: calc(var(--tpn-w) * 0.5625);
        inset: auto;
        left: clamp(100cqw - var(--tpn-w), var(--tpn-crop-at-x) * 100cqw - var(--tpn-w) * var(--tpn-crop-x) / 1600, var(--tpn-art-inset));
        top: clamp(100cqh - var(--tpn-h), var(--tpn-crop-at-y) * 100cqh - var(--tpn-h) * var(--tpn-crop-y) / 900, 0px);
        width: var(--tpn-w);
        height: var(--tpn-h);
    }

    /* the scene's own layers fill its 16:9 box exactly */
    .tp-nation.tpn-place .tpn-place__art .tpn-layer {
        inset: 0;
        width: 100%;
        height: 100%;
    }
}

/* the frame: night sky continues out of the header, the art fades into the page */
.tp-nation .tpn-place__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(180deg, var(--tpn-veil-top) 0%, rgba(8, 14, 32, 0.55) 16%, rgba(8, 14, 32, 0) 42%),
        linear-gradient(0deg, var(--ns-page) 0%, rgba(10, 24, 48, 0.86) 16%, rgba(10, 24, 48, 0.35) 40%, rgba(10, 24, 48, 0) 62%),
        linear-gradient(90deg, var(--tpn-veil-side) 0%, rgba(6, 13, 29, 0) 42%);
}

/* The seam: the page under the banner is --ns-page plus the canvas grain and water lines. The veil's
   bottom stop is --ns-page; the same grain and lines fade in over its lower half, so the last banner row
   and the first page row are the same surface. */
.tp-nation .tpn-place__veil::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--ns-grain), var(--ns-ripples);
    -webkit-mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.6) 22%, rgba(0, 0, 0, 0) 58%);
    mask-image: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.6) 22%, rgba(0, 0, 0, 0) 58%);
}

/* the harbor's light spilling onto the water, below the banner (it was the page's sky band, which the
   opaque banner hid except for a hard edge at its bottom): starts at zero at the banner's edge and
   fades in, so there is no line. Behind the page column (.main-container is z-index 1) and the footer
   (z-index 2). */
.tp-nation.tpn-place::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 100%;
    /* capped by the viewport: on short pages (landscape phones) the glow must not add scroll height */
    height: min(720px, 70vh);
    pointer-events: none;
    background:
        radial-gradient(46% 42% at 62% 26%, rgba(238, 154, 110, 0.075) 0%, rgba(238, 154, 110, 0) 70%),
        radial-gradient(38% 36% at 18% 32%, rgba(127, 233, 255, 0.045) 0%, rgba(127, 233, 255, 0) 70%),
        radial-gradient(62% 60% at 50% 16%, rgba(42, 35, 82, 0.5) 0%, rgba(42, 35, 82, 0) 70%);
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 200px, #000 55%, rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, #000 200px, #000 55%, rgba(0, 0, 0, 0) 100%);
}

/* daylight art is brighter: a little more veil so the caption and header hold */
.tp-nation.tpn-place.tpn-time--day { --tpn-veil-side: rgba(6, 13, 29, 0.62); }
.tp-nation.tpn-place.tpn-time--dawn { --tpn-veil-side: rgba(6, 13, 29, 0.56); }

/* ...except over the Lighthouse from 576 up, where the caption sits on the faded night to the left of
   the art: the headland by day was a murky band under the full veil. Same stops, lighter. */
@media (min-width: 576px) {
    .tp-nation.tpn-place--lighthouse.tpn-time--day .tpn-place__veil {
        background:
            linear-gradient(180deg, var(--tpn-veil-top) 0%, rgba(8, 14, 32, 0.4) 14%, rgba(8, 14, 32, 0) 34%),
            linear-gradient(0deg, var(--ns-page) 0%, rgba(10, 24, 48, 0.72) 14%, rgba(10, 24, 48, 0.14) 36%, rgba(10, 24, 48, 0) 52%),
            linear-gradient(90deg, rgba(6, 13, 29, 0.5) 0%, rgba(6, 13, 29, 0) 42%);
    }
}

/* phones and tablets: the kicker (10.5-11.2px) sits a third of the way up the banner, where the bottom veil is thin and
   bright screens, facades and sky (the day ambience especially) can lie behind it; a soft band of page navy behind the
   caption lines (::after is the grain fade above) */
@media (max-width: 991.98px) {
    .tp-nation .tpn-place__veil::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(0deg, rgba(10, 24, 48, 0) 8%, rgba(10, 24, 48, 0.42) 24%, rgba(10, 24, 48, 0.42) 40%, rgba(10, 24, 48, 0) 60%);
    }
}

/* desktop harbor (992 up): a soft pool of page navy behind the caption only (the ::before is the band's below 992):
   the caption sits on the water under the quay there, and the pool keeps the quay's lamps and glitter out of its
   letters; the lighthouse, the builds and the Ark keep their light */
@media (min-width: 992px) {
    .tp-nation.tpn-place--harbor .tpn-place__veil::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(34% 30% at 14% 76%, rgba(10, 24, 48, 0.88) 0%, rgba(10, 24, 48, 0.53) 55%, rgba(10, 24, 48, 0) 100%);
    }
}

/* the caption sits on the content column (Bootstrap .container widths) */
.tp-nation .tpn-place__inner {
    position: absolute;
    z-index: 2;
    inset-inline: 0;
    bottom: clamp(0.9rem, 0.5rem + 1.4vw, 1.9rem);
    width: 100%;
    margin-inline: auto;
    padding-inline: 12px;
    pointer-events: none;
}

@media (min-width: 576px) { .tp-nation .tpn-place__inner { max-width: 540px; } }
@media (min-width: 768px) { .tp-nation .tpn-place__inner { max-width: 720px; } }
@media (min-width: 992px) { .tp-nation .tpn-place__inner { max-width: 960px; } }
@media (min-width: 1200px) { .tp-nation .tpn-place__inner { max-width: 1140px; } }
@media (min-width: 1400px) { .tp-nation .tpn-place__inner { max-width: 1320px; } }

.tp-nation .tpn-place__caption {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
}

.tp-nation .tpn-place__kicker {
    /* 10.5px floor: the root is 14px below 768 */
    font-size: max(0.7rem, 10.5px);
    text-shadow: 0 1px 10px rgba(4, 9, 21, 0.9);
}

.tp-nation .tpn-place__name {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    font-family: var(--ns-serif);
    font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.55rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0.005em;
    color: var(--ns-ivory);
    text-shadow: 0 2px 22px rgba(4, 9, 21, 0.85);
}

.tp-nation .tpn-place__name::after {
    content: "";
    flex: none;
    width: clamp(2.2rem, 6vw, 5.5rem);
    height: 1px;
    background: linear-gradient(90deg, rgba(243, 211, 138, 0.8), rgba(243, 211, 138, 0));
}

/* a name in a right-to-left script (dir="auto" on the span) puts its rule on the left: it fades leftwards */
.tp-nation .tpn-place__name:dir(rtl)::after {
    background: linear-gradient(270deg, rgba(243, 211, 138, 0.8), rgba(243, 211, 138, 0));
}

/* Arabic, Hebrew, Persian: a larger overline, and no tracking on the name either (section 14 covers the
   kicker, not this span) */
:root:is(:lang(ar), :lang(he), :lang(fa)) .tp-nation .tpn-place__kicker { font-size: 0.82rem; }
:root:is(:lang(ar), :lang(he), :lang(fa)) .tp-nation .tpn-place__name { letter-spacing: 0; }

/* phones: the focus comes to the middle, the caption gets smaller (the kicker keeps its 10.5px, tracked tighter) */
@media (max-width: 575.98px) {
    .tp-nation.tpn-place { --tpn-crop-at-x: 0.6; }
    .tp-nation.tpn-place--lighthouse,
    .tp-nation.tpn-place--passport { --tpn-crop-at-x: 0.72; }
    /* the masts stand right of the name's rule */
    .tp-nation.tpn-place--radio { --tpn-crop-x: 880; --tpn-crop-at-x: 0.84; }
    /* the pier and gangway right of the caption, whole */
    .tp-nation.tpn-place--gate { --tpn-crop-y: 740; --tpn-crop-span: 170; --tpn-crop-at-x: 0.75; --tpn-crop-at-y: 0.45; }
    /* the Ark and the city across the water; the caption on the water under the Ark's reflection */
    .tp-nation.tpn-place--harbor { --tpn-crop-at-x: 0.32; }
    .tp-nation.tpn-place--records { --tpn-crop-x: 1480; --tpn-crop-span: 330; }
    /* the six porthole medallions sit above and right of the kicker instead of butting into it */
    .tp-nation.tpn-place--decks { --tpn-crop-at-x: 0.7; --tpn-crop-at-y: 0.45; }
    /* the TP sign board stays clear above the kicker */
    .tp-nation.tpn-place--passport { --tpn-crop-span: 300; --tpn-crop-at-y: 0.5; }
    .tp-nation .tpn-place__kicker { letter-spacing: 0.16em; }
    .tp-nation .tpn-place__caption { gap: 0.3rem; }
}

/* the main column starts a little closer to the banner */
:root .tpn-place ~ .main-container.mt-5 {
    margin-top: clamp(1.25rem, 3vw, 2.5rem) !important;
}

/* ---------------------------------------------------------------- 6. content: type and links (S) */

:root .tpn-place:not(.tpn-place--passport) ~ .main-container {
    color: var(--ns-fg);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
    color: var(--ns-heading);
    text-wrap: balance;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(h1, .h1) {
    font-size: var(--ns-fs-h1);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.012em;
    text-transform: var(--ns-h1-transform);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(h2, .h2) {
    font-size: var(--ns-fs-h2);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.005em;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(h3, .h3) {
    font-size: var(--ns-fs-h3);
    font-weight: 700;
    line-height: 1.25;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(h4, .h4) {
    font-size: var(--ns-fs-h4);
    font-weight: 700;
}

/* accents inside headings were navy on ivory: let them follow the heading until a page re-accents them */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(h1, h2, h3, h4, h5, h6) :is(span, strong, em, b, small):not(.badge) {
    color: inherit;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(p, li, dd, dt, label, legend, figcaption, blockquote) {
    color: inherit;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.lead, .editorial-page-intro, .identity-subtitle, .identity-note) {
    color: var(--ns-fg-dim);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.text-muted, .small, small, .form-text, .text-secondary) {
    color: var(--ns-fg-mute) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.text-dark, .text-body, .text-black) {
    color: var(--ns-fg) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.text-primary, .text-info) { color: var(--ns-info) !important; }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .text-success { color: var(--ns-ok) !important; }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .text-warning { color: var(--ns-warn) !important; }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .text-danger { color: var(--ns-bad) !important; }

:root .tpn-place:not(.tpn-place--passport) ~ .main-container a {
    color: var(--ns-link);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container a:not([class]) {
    text-decoration: underline;
    text-decoration-color: rgba(243, 211, 138, 0.45);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container a:hover {
    color: var(--ns-link-hover);
    text-decoration-color: currentColor;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--ns-focus);
    outline-offset: 2px;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container hr {
    border: 0;
    height: 1px;
    background: var(--ns-hairline-gold);
    opacity: 0.6;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container code {
    color: var(--ns-info);
    background: rgba(127, 233, 255, 0.08);
    border-radius: 6px;
    padding: 0.1em 0.35em;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container pre {
    color: var(--ns-fg);
    background: rgba(4, 10, 24, 0.6);
    border: 1px solid var(--ns-line);
    border-radius: var(--ns-radius-sm);
    padding: 1rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container blockquote {
    border-inline-start: 2px solid var(--ns-gold);
    padding-inline-start: 1rem;
    font-family: var(--ns-serif);
    font-style: italic;
}

/* ---------------------------------------------------------------- 7. content: shared page primitives (S) */

/* editorial-pages.css wrappers used by Download, Compatibility, High Scores (and siblings) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .editorial-page {
    color: var(--ns-fg);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.editorial-page-hero, .editorial-panel, .identity-panel) {
    background: var(--ns-panel);
    border: 1px solid var(--ns-line);
    box-shadow: var(--ns-shadow), inset 0 1px 0 var(--ns-tint-2);
    color: var(--ns-fg);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.editorial-page-hero, .identity-panel) {
    border-radius: 24px;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .editorial-panel {
    border-radius: 20px;
}

/* the corner glows were gold-on-ivory: now a warm dusk light and a cool water light */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.editorial-page-hero, .identity-panel)::before {
    background: radial-gradient(circle, rgba(238, 154, 110, 0.12) 0%, rgba(238, 154, 110, 0) 70%);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.editorial-page-hero, .identity-panel)::after {
    background: radial-gradient(circle, rgba(127, 233, 255, 0.07) 0%, rgba(127, 233, 255, 0) 70%);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.editorial-page-kicker, .identity-eyebrow, .editorial-panel-title) {
    color: var(--ns-accent-text);
    font-size: var(--ns-fs-overline);
    letter-spacing: var(--ns-track-overline);
    font-weight: 700;
    text-transform: uppercase;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .editorial-page-hero h1,
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .identity-title {
    color: var(--ns-heading);
    font-size: var(--ns-fs-h1);
    font-weight: 800;
    letter-spacing: -0.012em;
    text-transform: var(--ns-h1-transform);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .identity-section-title {
    color: var(--ns-heading);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .editorial-metric {
    background: var(--ns-panel-2);
    border: 1px solid var(--ns-line);
    box-shadow: none;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .editorial-metric strong { color: var(--ns-heading); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .editorial-metric span { color: var(--ns-fg-mute); }

/* Identity: links row, floating labels, the manage navigation */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .identity-links a {
    color: var(--ns-link);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .identity-links a:hover {
    color: var(--ns-link-hover);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .floating-label-group .floating-label {
    color: var(--ns-fg-mute);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .floating-label-group .form-control:is(:focus, :not(:placeholder-shown)) + .floating-label {
    color: var(--ns-accent-text);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .floating-label-group .form-control::placeholder {
    color: transparent;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.checkbox label, .checkbox .form-label, .form-check-label) {
    color: var(--ns-fg-dim);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

/* ---------------------------------------------------------------- 8. content: Bootstrap components (S) */

/* cards (site.js adds an inline hover lift: leave transform alone) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .card {
    --bs-card-bg: transparent;
    --bs-card-color: var(--ns-fg);
    --bs-card-cap-bg: var(--ns-tint-1);
    --bs-card-cap-color: var(--ns-heading);
    --bs-card-border-color: var(--ns-line);
    background: var(--ns-panel) !important;
    border: 1px solid var(--ns-line) !important;
    border-radius: var(--ns-radius);
    box-shadow: var(--ns-shadow-sm), inset 0 1px 0 var(--ns-tint-2) !important;
    color: var(--ns-fg);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .card:hover {
    border-color: var(--ns-line-strong) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.card-header, .card-footer) {
    background: var(--ns-tint-1);
    border-color: var(--ns-line);
    color: var(--ns-heading);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.card-body, .card-text) {
    color: inherit;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.bg-white, .bg-light, .bg-body, .bg-body-tertiary) {
    background-color: var(--ns-panel-2) !important;
    color: var(--ns-fg);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .bg-warning,
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .bg-warning :is(h1, h2, h3, h4, h5, h6, p, span, i, a) {
    color: var(--ns-on-accent) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .bg-warning {
    background: var(--ns-accent-fill) !important;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .bg-dark {
    background-color: rgba(4, 10, 24, 0.7) !important;
}

/* buttons (the payment hooks are excluded by name, whatever page they end up on) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .btn:not(:where(.btn-gradient, .paddle-checkout-btn)) {
    --bs-btn-focus-box-shadow: var(--ns-focus-ring);
    border-radius: var(--ns-radius-pill);
    font-weight: 700;
    letter-spacing: 0.03em;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .btn:not(:where(.btn-gradient, .paddle-checkout-btn)):focus-visible {
    outline: 2px solid var(--ns-focus);
    outline-offset: 2px;
    box-shadow: var(--ns-focus-ring);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.btn-primary, .btn-warning):not(:where(.btn-gradient, .paddle-checkout-btn)) {
    background: var(--ns-accent-fill);
    border: 1px solid rgba(243, 211, 138, 0.9);
    color: var(--ns-on-accent);
    box-shadow: var(--ns-glow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.btn-primary, .btn-warning):not(:where(.btn-gradient, .paddle-checkout-btn)):is(:hover, :focus, :active) {
    background: linear-gradient(180deg, #fbe3a6 0%, #eec060 100%);
    border-color: #fbe3a6;
    color: var(--ns-on-accent);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.btn-secondary, .btn-light, .btn-dark, .btn-default, .btn-outline-primary, .btn-outline-secondary, .btn-outline-light, .btn-outline-dark):not(:where(.btn-gradient, .paddle-checkout-btn)) {
    background: var(--ns-tint-2);
    border: 1px solid var(--ns-line-strong);
    color: var(--ns-heading);
    box-shadow: none;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.btn-secondary, .btn-light, .btn-dark, .btn-default, .btn-outline-primary, .btn-outline-secondary, .btn-outline-light, .btn-outline-dark):not(:where(.btn-gradient, .paddle-checkout-btn)):is(:hover, :focus, :active, .active) {
    background: rgba(243, 211, 138, 0.1);
    border-color: var(--ns-line-gold);
    color: var(--ns-heading);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.btn-success, .btn-outline-success):not(:where(.btn-gradient, .paddle-checkout-btn)) {
    background: rgba(201, 255, 134, 0.12);
    border: 1px solid rgba(201, 255, 134, 0.5);
    color: var(--ns-ok);
    box-shadow: none;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.btn-info, .btn-outline-info):not(:where(.btn-gradient, .paddle-checkout-btn)) {
    background: rgba(127, 233, 255, 0.1);
    border: 1px solid rgba(127, 233, 255, 0.45);
    color: var(--ns-info);
    box-shadow: none;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.btn-danger, .btn-outline-danger):not(:where(.btn-gradient, .paddle-checkout-btn)) {
    background: rgba(255, 122, 107, 0.12);
    border: 1px solid rgba(255, 122, 107, 0.5);
    color: var(--ns-bad);
    box-shadow: none;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.btn-outline-warning):not(:where(.btn-gradient, .paddle-checkout-btn)) {
    background: transparent;
    border: 1px solid var(--ns-line-gold);
    color: var(--ns-accent-text);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.btn-success, .btn-outline-success, .btn-info, .btn-outline-info, .btn-danger, .btn-outline-danger, .btn-outline-warning):not(:where(.btn-gradient, .paddle-checkout-btn)):is(:hover, :focus, :active) {
    filter: brightness(1.15);
    box-shadow: none;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .btn-link:not(:where(.btn-gradient, .paddle-checkout-btn)) {
    color: var(--ns-link);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .btn:disabled,
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .btn.disabled {
    opacity: 0.55;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .btn-close {
    --bs-btn-close-focus-shadow: var(--ns-focus-ring);
    filter: var(--ns-close-filter, none);
}

/* forms */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.form-control, .form-select, textarea, select, input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="number"], [type="url"], [type="tel"], [type="date"])) {
    background-color: var(--ns-field);
    border: 1px solid var(--ns-field-line);
    color: var(--ns-field-fg);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
    border-radius: 12px;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container input.form-control {
    background-image: none;
    padding-right: 1rem;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.form-select, select.form-control) {
    background-image: var(--ns-select-arrow);
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 14px 10px;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.form-select, select) option {
    background: var(--ns-panel-solid);
    color: var(--ns-heading);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.form-control, .form-select, textarea, select, input)::placeholder {
    color: var(--ns-placeholder);
    opacity: 1;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.form-control, .form-select, textarea, select, input):focus {
    background-color: rgba(4, 10, 24, 0.72);
    border-color: var(--ns-gold);
    color: var(--ns-field-fg);
    box-shadow: var(--ns-focus-ring);
    outline: none;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.form-control, .form-select):is(:disabled, [readonly]) {
    background-color: var(--ns-tint-1);
    color: var(--ns-fg-dim);
    border-style: dashed;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.form-label, .col-form-label, .control-label) {
    color: var(--ns-fg-dim);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .checkbox .form-label {
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .input-group-text {
    background: var(--ns-tint-2);
    border: 1px solid var(--ns-field-line);
    color: var(--ns-fg-dim);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .form-check-input {
    background-color: var(--ns-field);
    border: 1px solid var(--ns-line-strong);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .form-check-input:checked {
    background-color: var(--ns-gold);
    border-color: var(--ns-gold);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .form-check-input:focus {
    box-shadow: var(--ns-focus-ring);
    border-color: var(--ns-gold);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .form-range::-webkit-slider-thumb { background: var(--ns-gold); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .form-range::-moz-range-thumb { background: var(--ns-gold); }

/* validation: jquery-validation and Bootstrap classes (script-toggled: colour and border only) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.form-control, .form-select, input, textarea, select):is(.is-invalid, .input-validation-error) {
    border-color: var(--ns-coral);
    box-shadow: 0 0 0 3px rgba(255, 122, 107, 0.18);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.form-control, .form-select, input, textarea, select).is-valid {
    border-color: rgba(201, 255, 134, 0.7);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.invalid-feedback, .field-validation-error, .validation-summary-errors, .validation-summary-errors li) {
    color: var(--ns-bad);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .valid-feedback {
    color: var(--ns-ok);
}

/* tables */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .table {
    --bs-table-color: var(--ns-fg);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--ns-line);
    --bs-table-striped-color: var(--ns-fg);
    --bs-table-striped-bg: var(--ns-tint-1);
    --bs-table-hover-color: var(--ns-heading);
    --bs-table-hover-bg: rgba(243, 211, 138, 0.06);
    --bs-table-active-color: var(--ns-heading);
    --bs-table-active-bg: rgba(243, 211, 138, 0.1);
    color: var(--ns-fg);
    border-color: var(--ns-line);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .table > :not(caption) > * > * {
    border-bottom-color: var(--ns-line);
    color: inherit;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.table thead th, .table-dark th, .thead-dark th, .thead-light th) {
    background: var(--ns-thead-bg) !important;
    color: var(--ns-thead-fg) !important;
    border-bottom: 1px solid var(--ns-line-gold) !important;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: auto;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.table-light, .table-light > th, .table-light > td, .table-secondary, .table-active) {
    --bs-table-bg: var(--ns-tint-2);
    --bs-table-color: var(--ns-fg);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .table-responsive {
    border-radius: var(--ns-radius);
    scrollbar-color: rgba(243, 211, 138, 0.35) transparent;
}

/* alerts */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .alert {
    --ns-alert: var(--ns-gold-soft);
    background: linear-gradient(90deg, var(--ns-tint-2), var(--ns-tint-1));
    border: 1px solid var(--ns-line);
    border-inline-start: 3px solid var(--ns-alert);
    border-radius: 12px;
    color: var(--ns-fg);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .alert-info { --ns-alert: var(--ns-cyan); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .alert-success { --ns-alert: var(--ns-lime); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .alert-warning { --ns-alert: var(--ns-gold); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .alert-danger { --ns-alert: var(--ns-coral); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.alert-secondary, .alert-light, .alert-dark) { --ns-alert: rgba(252, 247, 239, 0.45); }

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .alert :is(strong, .alert-heading) {
    color: var(--ns-heading);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .alert .alert-link {
    color: var(--ns-link);
}

/* badges */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .badge {
    border-radius: var(--ns-radius-pill);
    font-weight: 700;
    letter-spacing: 0.06em;
    background-color: var(--ns-tint-3);
    color: var(--ns-heading);
    border: 1px solid var(--ns-line);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .badge:is(.bg-primary, .text-bg-primary) { background: rgba(243, 211, 138, 0.14) !important; color: var(--ns-accent-text) !important; border-color: rgba(243, 211, 138, 0.35); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .badge:is(.bg-secondary, .text-bg-secondary, .bg-dark, .text-bg-dark) { background: var(--ns-tint-3) !important; color: var(--ns-fg) !important; }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .badge:is(.bg-success, .text-bg-success) { background: rgba(201, 255, 134, 0.12) !important; color: var(--ns-ok) !important; border-color: rgba(201, 255, 134, 0.35); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .badge:is(.bg-info, .text-bg-info) { background: rgba(127, 233, 255, 0.12) !important; color: var(--ns-info) !important; border-color: rgba(127, 233, 255, 0.35); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .badge:is(.bg-warning, .text-bg-warning) { background: var(--ns-accent-fill) !important; color: var(--ns-on-accent) !important; border-color: transparent; }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .badge:is(.bg-danger, .text-bg-danger) { background: rgba(255, 122, 107, 0.14) !important; color: var(--ns-bad) !important; border-color: rgba(255, 122, 107, 0.4); }
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .badge:is(.bg-light, .text-bg-light) { background: var(--ns-ivory) !important; color: var(--ns-ink) !important; border-color: var(--ns-line-strong); }

/* nav tabs and pills (content only; header links are styled above) */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .nav-tabs {
    --bs-nav-tabs-border-color: var(--ns-line);
    --bs-nav-tabs-link-hover-border-color: var(--ns-line) var(--ns-line) transparent;
    --bs-nav-tabs-link-active-color: var(--ns-accent-text);
    --bs-nav-tabs-link-active-bg: var(--ns-tint-2);
    --bs-nav-tabs-link-active-border-color: var(--ns-line-strong) var(--ns-line-strong) transparent;
    border-bottom-color: var(--ns-line);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.nav-tabs, .nav-pills) .nav-link {
    color: var(--ns-fg-dim);
    font-weight: 600;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.nav-tabs, .nav-pills) .nav-link:hover {
    color: var(--ns-heading);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .nav-tabs :is(.nav-link.active, .show > .nav-link) {
    color: var(--ns-accent-text);
    background-color: var(--ns-tint-2);
    border-color: var(--ns-line-strong) var(--ns-line-strong) transparent;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .nav-pills :is(.nav-link.active, .show > .nav-link) {
    background: var(--ns-accent-fill);
    color: var(--ns-on-accent);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container :is(.nav-tabs, .nav-pills) .nav-link::after {
    background: var(--ns-gold-soft);
}

/* list groups */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .list-group {
    --bs-list-group-bg: var(--ns-tint-1);
    --bs-list-group-color: var(--ns-fg);
    --bs-list-group-border-color: var(--ns-line);
    --bs-list-group-action-color: var(--ns-fg);
    --bs-list-group-action-hover-color: var(--ns-heading);
    --bs-list-group-action-hover-bg: var(--ns-panel-hover);
    --bs-list-group-action-active-color: var(--ns-heading);
    --bs-list-group-action-active-bg: rgba(243, 211, 138, 0.12);
    --bs-list-group-active-color: var(--ns-on-accent);
    --bs-list-group-active-bg: var(--ns-gold);
    --bs-list-group-active-border-color: var(--ns-gold);
    --bs-list-group-disabled-color: var(--ns-fg-mute);
    --bs-list-group-disabled-bg: transparent;
    border-radius: 14px;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .list-group-item {
    background-color: var(--bs-list-group-bg);
    color: var(--bs-list-group-color);
    border-color: var(--ns-line);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .list-group-item.active {
    background: var(--ns-accent-fill);
    color: var(--ns-on-accent);
    border-color: var(--ns-gold);
}

/* accordions */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .accordion {
    --bs-accordion-color: var(--ns-fg);
    --bs-accordion-bg: var(--ns-tint-1);
    --bs-accordion-border-color: var(--ns-line);
    --bs-accordion-btn-color: var(--ns-heading);
    --bs-accordion-btn-bg: var(--ns-tint-1);
    --bs-accordion-active-color: var(--ns-accent-text);
    --bs-accordion-active-bg: rgba(243, 211, 138, 0.08);
    --bs-accordion-btn-focus-box-shadow: var(--ns-focus-ring);
    --bs-accordion-btn-icon: var(--ns-chevron);
    --bs-accordion-btn-active-icon: var(--ns-chevron-active);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .accordion-item {
    background: var(--bs-accordion-bg);
    border-color: var(--ns-line);
    color: var(--ns-fg);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .accordion-button {
    background: var(--bs-accordion-btn-bg);
    color: var(--bs-accordion-btn-color);
    font-weight: 700;
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .accordion-button:not(.collapsed) {
    background: var(--bs-accordion-active-bg);
    color: var(--bs-accordion-active-color);
    box-shadow: inset 0 -1px 0 var(--ns-line);
}

/* pagination */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .pagination {
    --bs-pagination-color: var(--ns-fg);
    --bs-pagination-bg: var(--ns-tint-2);
    --bs-pagination-border-color: var(--ns-line);
    --bs-pagination-hover-color: var(--ns-heading);
    --bs-pagination-hover-bg: var(--ns-panel-hover);
    --bs-pagination-hover-border-color: var(--ns-line-gold);
    --bs-pagination-focus-color: var(--ns-heading);
    --bs-pagination-focus-bg: var(--ns-panel-hover);
    --bs-pagination-focus-box-shadow: var(--ns-focus-ring);
    --bs-pagination-active-color: var(--ns-on-accent);
    --bs-pagination-active-bg: var(--ns-gold);
    --bs-pagination-active-border-color: var(--ns-gold);
    --bs-pagination-disabled-color: var(--ns-fg-mute);
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-disabled-border-color: var(--ns-line);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .page-link {
    background-color: var(--bs-pagination-bg);
    color: var(--bs-pagination-color);
    border-color: var(--bs-pagination-border-color);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .page-item.active .page-link {
    background: var(--ns-accent-fill);
    color: var(--ns-on-accent);
    border-color: var(--ns-gold);
}

/* progress */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .progress {
    background-color: var(--ns-tint-3);
    border-radius: var(--ns-radius-pill);
}

:root .tpn-place:not(.tpn-place--passport) ~ .main-container .progress-bar:not([class*="bg-"]) {
    background: var(--ns-accent-fill);
    color: var(--ns-on-accent);
    font-weight: 700;
}

/* spinners follow the text colour */
:root .tpn-place:not(.tpn-place--passport) ~ .main-container .spinner-border.text-primary {
    color: var(--ns-accent-text) !important;
}

/* ---------------------------------------------------------------- 9. components that can live outside the column */

/* content dropdowns (Bootstrap may pop them anywhere); the language switcher is styled above */
:root body.editorial-page-active:not(.admin-page) .tpn-place ~ .main-container .dropdown-menu,
:root body.editorial-page-active:not(.admin-page) > .dropdown-menu {
    --bs-dropdown-bg: rgba(9, 18, 38, 0.98);
    --bs-dropdown-color: rgba(252, 247, 239, 0.9);
    --bs-dropdown-border-color: rgba(252, 247, 239, 0.24);
    --bs-dropdown-link-color: rgba(252, 247, 239, 0.9);
    --bs-dropdown-link-hover-color: #fcf7ef;
    --bs-dropdown-link-hover-bg: rgba(243, 211, 138, 0.1);
    --bs-dropdown-link-active-color: var(--ns-on-accent);
    --bs-dropdown-link-active-bg: var(--ns-gold);
    --bs-dropdown-divider-bg: rgba(252, 247, 239, 0.12);
    --bs-dropdown-header-color: #f3d38a;
    background-color: var(--bs-dropdown-bg);
    border: 1px solid var(--bs-dropdown-border-color);
    border-radius: 14px;
    box-shadow: var(--ns-shadow);
    color: rgba(252, 247, 239, 0.9);
}

:root body.editorial-page-active:not(.admin-page) .tpn-place ~ .main-container .dropdown-item {
    color: var(--bs-dropdown-link-color);
}

:root body.editorial-page-active:not(.admin-page) .tpn-place ~ .main-container .dropdown-item:is(:hover, :focus) {
    background-color: var(--bs-dropdown-link-hover-bg);
    color: var(--bs-dropdown-link-hover-color);
}

:root body.editorial-page-active:not(.admin-page) .tpn-place ~ .main-container .dropdown-item:is(.active, :active) {
    background: var(--ns-accent-fill);
    color: var(--ns-on-accent);
}

:root body.editorial-page-active:not(.admin-page) .tpn-place ~ .main-container .dropdown-header {
    color: #f3d38a;
    font-size: var(--ns-fs-overline);
    letter-spacing: var(--ns-track-overline);
    text-transform: uppercase;
}

/* modals are moved to <body> by Bootstrap: scope by the page, not the column. Only the themed pages (a place
   banner other than the Passport Office, or a Nation page): editorial pages that keep their ivory canvas
   (Wiki, ResendPatreon, admin tools without .admin-page, Christmas with its own skin) keep their modals. */
:root body.editorial-page-active:not(.admin-page):is(:has(> .tpn-place:not(.tpn-place--passport)), :has(> .main-container > main > .tp-nation)) .modal-content {
    --bs-modal-color: rgba(252, 247, 239, 0.9);
    --bs-modal-bg: #0c1a33;
    --bs-modal-border-color: rgba(252, 247, 239, 0.24);
    --bs-modal-header-border-color: rgba(252, 247, 239, 0.12);
    --bs-modal-footer-border-color: rgba(252, 247, 239, 0.12);
    background: linear-gradient(180deg, #11234a 0%, #0a1830 100%);
    border: 1px solid rgba(252, 247, 239, 0.24);
    border-radius: 20px;
    box-shadow: var(--ns-shadow);
    color: rgba(252, 247, 239, 0.9);
}

:root body.editorial-page-active:not(.admin-page):is(:has(> .tpn-place:not(.tpn-place--passport)), :has(> .main-container > main > .tp-nation)) .modal-content :is(.modal-title, h1, h2, h3, h4, h5) {
    color: #fcf7ef;
}

:root body.editorial-page-active:not(.admin-page):is(:has(> .tpn-place:not(.tpn-place--passport)), :has(> .main-container > main > .tp-nation)) .modal-content .btn-close {
    --bs-btn-close-focus-shadow: 0 0 0 3px rgba(243, 211, 138, 0.38);
    filter: none;
}

:root body.editorial-page-active:not(.admin-page):is(:has(> .tpn-place:not(.tpn-place--passport)), :has(> .main-container > main > .tp-nation)) .modal-content .btn:not(:where(.btn-gradient, .paddle-checkout-btn)) {
    border-radius: var(--ns-radius-pill);
    font-weight: 700;
    background: rgba(252, 247, 239, 0.06);
    border: 1px solid rgba(252, 247, 239, 0.24);
    color: #fcf7ef;
    box-shadow: none;
}

:root body.editorial-page-active:not(.admin-page):is(:has(> .tpn-place:not(.tpn-place--passport)), :has(> .main-container > main > .tp-nation)) .modal-content :is(.btn-primary, .btn-warning, .btn-success):not(:where(.btn-gradient, .paddle-checkout-btn)) {
    background: var(--ns-accent-fill);
    border-color: rgba(243, 211, 138, 0.9);
    color: var(--ns-on-accent);
}

:root body.editorial-page-active:not(.admin-page):is(:has(> .tpn-place:not(.tpn-place--passport)), :has(> .main-container > main > .tp-nation)) .modal-content .btn:not(:where(.btn-gradient, .paddle-checkout-btn)):focus-visible {
    outline: 2px solid #f3d38a;
    outline-offset: 2px;
}

:root body.editorial-page-active:not(.admin-page):is(:has(> .tpn-place:not(.tpn-place--passport)), :has(> .main-container > main > .tp-nation)) .modal-backdrop {
    --bs-backdrop-bg: #02050d;
}

/* cookie banner (gdpr-compliance.js): colours only, it stays fixed and on top */
:root body:not(.admin-page) .gdpr-banner {
    background: linear-gradient(180deg, rgba(11, 22, 44, 0.97), rgba(6, 12, 26, 0.98)) !important;
    border-top: 1px solid var(--ns-line-gold) !important;
    color: var(--ns-fg) !important;
    box-shadow: 0 -20px 50px rgba(2, 6, 16, 0.5) !important;
}

:root body:not(.admin-page) .gdpr-banner :is(h4, .gdpr-banner-text h4) {
    color: var(--ns-gold-soft) !important;
}

:root body:not(.admin-page) .gdpr-banner p {
    color: var(--ns-fg-dim) !important;
}

:root body:not(.admin-page) .gdpr-banner .gdpr-btn {
    border-radius: var(--ns-radius-pill) !important;
    font-weight: 700 !important;
}

:root body:not(.admin-page) .gdpr-banner .gdpr-btn-accept {
    background: var(--ns-accent-fill) !important;
    border: 1px solid rgba(243, 211, 138, 0.9) !important;
    color: var(--ns-on-accent) !important;
}

:root body:not(.admin-page) .gdpr-banner .gdpr-btn-essential {
    background: rgba(252, 247, 239, 0.06) !important;
    border: 1px solid var(--ns-line-strong) !important;
    color: var(--ns-ivory) !important;
}

:root body:not(.admin-page) .gdpr-banner .gdpr-btn-settings {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--ns-gold-soft) !important;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

:root body:not(.admin-page) .gdpr-banner .gdpr-btn:focus-visible {
    outline: 2px solid var(--ns-focus) !important;
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- 10. footer (every page but admin) */

/* layout.css paints the editorial footer as sand (with !important on every descendant's
   colour and a grain ::before); at night the quay is dark stone with a foil edge. */
:root body:not(.admin-page) footer.footerGG {
    --bs-secondary-color: var(--ns-fg-mute) !important;
    background:
        var(--ns-grain),
        linear-gradient(180deg, #081226 0%, #050a17 100%) !important;
    border-top: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--ns-fg-dim) !important;
    padding: 2.4rem 0 1.8rem;
}

:root body:not(.admin-page) footer.footerGG::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: var(--ns-hairline-gold);
    filter: none;
    mix-blend-mode: normal;
    opacity: 0.7;
    z-index: 0;
    pointer-events: none;
}

:root body:not(.admin-page) footer.footerGG * {
    --bs-secondary-color: var(--ns-fg-mute) !important;
    color: inherit !important;
}

:root body:not(.admin-page) footer.footerGG .service-status {
    background: rgba(252, 247, 239, 0.03);
    border: 1px solid var(--ns-line);
    border-radius: 18px;
    box-shadow: none;
    color: var(--ns-fg) !important;
}

:root body:not(.admin-page) footer.footerGG .service-status-item {
    background: rgba(252, 247, 239, 0.035);
    border: 1px solid var(--ns-line);
    border-radius: 12px;
    border-inline-start: 3px solid rgba(252, 247, 239, 0.25);
}

:root body:not(.admin-page) footer.footerGG .service-status-item.status-live {
    border-color: rgba(201, 255, 134, 0.22);
    border-inline-start-color: var(--ns-lime);
    background: linear-gradient(90deg, rgba(201, 255, 134, 0.08), rgba(201, 255, 134, 0.015));
}

:root body:not(.admin-page) footer.footerGG .service-status-item.status-offline {
    border-color: rgba(255, 122, 107, 0.22);
    border-inline-start-color: var(--ns-coral);
    background: linear-gradient(90deg, rgba(255, 122, 107, 0.09), rgba(255, 122, 107, 0.015));
}

:root body:not(.admin-page) footer.footerGG .service-status-name {
    color: var(--ns-gold-soft) !important;
    letter-spacing: 0.2em;
}

:root body:not(.admin-page) footer.footerGG .service-status-value {
    color: var(--ns-ivory) !important;
}

:root body:not(.admin-page) footer.footerGG .status-live .service-status-value,
:root body:not(.admin-page) footer.footerGG .service-status-value .text-success { color: var(--ns-lime) !important; }
:root body:not(.admin-page) footer.footerGG .status-offline .service-status-value,
:root body:not(.admin-page) footer.footerGG .service-status-value .text-danger { color: var(--ns-coral-soft) !important; }

:root body:not(.admin-page) footer.footerGG .header-social-link {
    background: rgba(252, 247, 239, 0.05);
    border: 1px solid var(--ns-line-strong);
    color: rgba(252, 247, 239, 0.86) !important;
}

:root body:not(.admin-page) footer.footerGG .header-social-link:hover,
:root body:not(.admin-page) footer.footerGG .header-social-link:focus-visible {
    background: rgba(243, 211, 138, 0.12);
    border-color: var(--ns-line-gold);
    color: var(--ns-gold-soft) !important;
}

:root body:not(.admin-page) footer.footerGG :is(a, button):focus-visible {
    outline: 2px solid var(--ns-focus);
    outline-offset: 2px;
}

:root body:not(.admin-page) footer.footerGG .footer-meta-row {
    border-top: 1px solid var(--ns-line);
    color: var(--ns-fg-mute) !important;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
}

:root body:not(.admin-page) footer.footerGG .footer-copyright {
    color: var(--ns-fg-mute) !important;
    font-weight: 500;
}

:root body:not(.admin-page) footer.footerGG .footer-meta-row a {
    color: var(--ns-gold-soft) !important;
    text-decoration: underline;
    text-decoration-color: rgba(243, 211, 138, 0.4);
    text-underline-offset: 0.2em;
}

/* ---------------------------------------------------------------- 11. the Passport Office: a sheet of paper round the pricing */

/* The fallback sheet (colours, frame): gate.css section 6 gives it its padding and outward bleed, section 6b
   repaints the pricing block. No padding here: without the gate rules the pricing keeps its own width. */
:root .tpn-place--passport ~ .main-container .editorial-page.subscription-page {
    background: #fcfaf4;
    border: 1px solid rgba(243, 211, 138, 0.35);
    border-radius: 28px;
    box-shadow: var(--ns-shadow), 0 0 0 6px rgba(252, 247, 239, 0.03);
    /* no colour: the pricing inherits the page's own body colour, exactly as with the theme off */
}

/* signed-in members (SubscriptionAuth: body.subscription-auth-page) get the same sheet around the whole column */
:root body.subscription-auth-page .tpn-place--passport ~ .main-container > main {
    background: #fcfaf4;
    border: 1px solid rgba(243, 211, 138, 0.35);
    border-radius: 28px;
    box-shadow: var(--ns-shadow);
}

/* ---------------------------------------------------------------- 12. out of scope: UpdatePayment keeps its ivory page */

@supports selector(:has(*)) {
    :root body.editorial-page-active:has(#retain-container) {
        background: #fcfaf4;
        color: #16202a;
        color-scheme: light;
    }

    :root body.editorial-page-active:has(#retain-container)::before {
        background: none;
    }
}

/* ---------------------------------------------------------------- 12b. home: the high scores rows (.row,
   negative gutters) sat in a container with no side padding, so the page scrolled 11-12px sideways at
   every width (pre-existing). The container gets the gutter back, and the column every other home section
   sits in (Bootstrap's .container widths, centred): full bleed, the themed cards' borders and corners were cut
   by both edges of the window from 1400, and ran 12-30px past the other sections' edges below. The most played
   card sits straight in its .row (no column): the row's negative gutters would still pull it 12px past the
   column on both sides. */
:root body.home-page-active .main-container-home > main > .highscores-container {
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

@media (min-width: 576px) { :root body.home-page-active .main-container-home > main > .highscores-container { max-width: 540px; } }
@media (min-width: 768px) { :root body.home-page-active .main-container-home > main > .highscores-container { max-width: 720px; } }
@media (min-width: 992px) { :root body.home-page-active .main-container-home > main > .highscores-container { max-width: 960px; } }
@media (min-width: 1200px) { :root body.home-page-active .main-container-home > main > .highscores-container { max-width: 1140px; } }
@media (min-width: 1400px) { :root body.home-page-active .main-container-home > main > .highscores-container { max-width: 1320px; } }

:root body.home-page-active .main-container-home > main > .highscores-container > .row:last-child {
    margin-inline: 0;
}

/* ---------------------------------------------------------------- 13. motion */

@media (prefers-reduced-motion: reduce) {
    :root body.editorial-page-active:not(.admin-page) :is(.btn, .card, .nav-link, .header-social-link, .glass-dropdown, .glass-dropdown-item) {
        transition: none !important;
        animation: none !important;
    }
}

/* ---------------------------------------------------------------- 14. Arabic, Hebrew, Persian: no letter-spacing
   Tracking pulls a joined script apart. One rule for the whole theme (the group files set only sizes):
   every tracked kind of text (overlines, kickers, eyebrows, table heads, captions, labels, badges,
   buttons, titles) and, separately, their ::before/::after, on pages in ar/he/fa (the html lang: pages
   stay LTR) and inside any block that carries dir="rtl" (the .tp-nation blocks). !important: it has to
   win over every tracked rule, the page sheets' !important ones included. Never inside the pricing
   block (the Passport Office's column is left out). */
:is(:root:is(:lang(ar), :lang(he), :lang(fa)) :is(.tpn-place:not(.tpn-place--passport) ~ .main-container, .tp-nation, header, footer.footerGG), [dir="rtl"]) :is(th, caption, figcaption, strong, b, legend, label, dt, small, .small, h1, h2, h3, h4, h5, h6, .btn, .badge, .nav-link, .card-header, .form-label, .form-text, .tpn-overline, [class*="kicker"], [class*="eyebrow"], [class*="overline"], [class*="label"], [class*="title"], [class*="badge"], [class*="status"], [class*="meta"], [class*="header"], [class*="caption"], .highscores-record-count, .record-count-mobile) {
    letter-spacing: 0 !important;
}

:is(:root:is(:lang(ar), :lang(he), :lang(fa)) :is(.tpn-place:not(.tpn-place--passport) ~ .main-container, .tp-nation, header, footer.footerGG), [dir="rtl"]) :is(th, caption, figcaption, strong, b, legend, label, dt, small, .small, h1, h2, h3, h4, h5, h6, .btn, .badge, .nav-link, .card-header, .form-label, .form-text, .tpn-overline, [class*="kicker"], [class*="eyebrow"], [class*="overline"], [class*="label"], [class*="title"], [class*="badge"], [class*="status"], [class*="meta"], [class*="header"], [class*="caption"], .highscores-record-count, .record-count-mobile)::before,
:is(:root:is(:lang(ar), :lang(he), :lang(fa)) :is(.tpn-place:not(.tpn-place--passport) ~ .main-container, .tp-nation, header, footer.footerGG), [dir="rtl"]) :is(th, caption, figcaption, strong, b, legend, label, dt, small, .small, h1, h2, h3, h4, h5, h6, .btn, .badge, .nav-link, .card-header, .form-label, .form-text, .tpn-overline, [class*="kicker"], [class*="eyebrow"], [class*="overline"], [class*="label"], [class*="title"], [class*="badge"], [class*="status"], [class*="meta"], [class*="header"], [class*="caption"], .highscores-record-count, .record-count-mobile)::after {
    letter-spacing: 0 !important;
}

/* the home page's own sections (below the hero, outside .tp-nation): their overlines, labels and times, the
   headings, the preservation quote and pillars, the press strip and the scoreboards' "view all" links.
   A separate list that never matches a .btn: the home page's payment buttons are never touched. */
:root:is(:lang(ar), :lang(he), :lang(fa)) body.home-page-active .main-container-home :is([class*="overline"], [class*="label"], time, .recently-preserved-access, h2, h3, .preservation-quote, .pillar-item h4, .featured-in-item :is(strong, small), .view-all-link):not(.btn) {
    letter-spacing: 0 !important;
}