.code_input_form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.otp-input {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.otp-digit {
    width: 36px;
    height: 48px;
    border: 1px solid #cccccc;
    border-radius: 6px;
    background: #ffffff;
    font-family: Consolas, Monaco, monospace;
    font-size: 1.375rem;
    font-weight: 600;
    color: #222222;
    line-height: 48px;
    text-align: center;
    user-select: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.otp-digit.has-value {
    border-color: #888888;
}

.otp-digit.is-active {
    border-color: #4a7cff;
    box-shadow: 0 0 0 2px rgba(74, 124, 255, 0.25);
}

.otp-input.has-error .otp-digit {
    border-color: #d04040;
}

.otp-input.is-disabled .otp-digit {
    opacity: 0.5;
}

.otp-separator {
    width: 8px;
    height: 2px;
    background: #cccccc;
    border-radius: 1px;
    margin: 0 4px;
}

/* the real input is positioned over the digit boxes so paste / OS autofill / IME
   work natively, but the digits above show the value */
.otp-real-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: 0;
    background: transparent;
    color: transparent;
    caret-color: transparent;
    letter-spacing: 0;
    font: inherit;
    text-align: center;
    cursor: text;
}

.code_input_form .message-text {
    min-height: 1.4em;
    font-size: 0.8125rem;
    color: #666666;
    text-align: center;
}

.code_input_form .message-text.error {
    color: #d04040;
}

.code_input_form .message-text.success {
    color: #2a9a4a;
}
 .yours-set {
    padding: 25px var(--pad-x) 0;
    background: #fff;
    /* border-bottom: 1px solid #eee; */

    /* ── Tabs sitting on top of the card ───────────────────────── */
    .yours-set-tabs {
        display: flex;
        gap: 2px;
        align-items: flex-end;
        

        .yours-set-tab {
            padding: 8px 16px 10px;
            border: 1px solid #ddd;
            border-bottom: none;
            border-radius: 8px 8px 0 0;
            background-color: #f0f0f0;
            color: #666;
            font-size: 0.8125rem;
            font-weight: 500;
            cursor: pointer;
            user-select: none;
            margin-bottom: -1px;        /* overlap card border so active tab merges in */
            position: relative;

            &:hover { background-color: #e5e5e5; color: #333; }

            &.on {
                background-color: #fafafa;
                color: #333;
                z-index: 1;
            }

            &.new {
                background-color: transparent;
                border-style: dashed;
                border-color: #bbb;
                color: #888;
                border-bottom: 0;

                &:hover { border-color: #777; color: #333; }
            }
        }

        .yours-set-auto-fill {
            margin-left: auto;
            padding: 8px 11px 10px;
            font-size: 0.75rem;
            color: #aaa;
            cursor: pointer;
            user-select: none;
            align-self: flex-end;

            &:hover { color: #444; text-decoration: underline; }
        }

        .yours-set-help {
            align-self: flex-end;
            margin-bottom: 7px;
            margin-left: 8px;
        }
    }

    /* ── Card body holding the 10 tracks ───────────────────────── */
    .yours-set-card {
        background: #fafafa;
        border: 1px solid #ddd;
        border-radius: 0 8px 8px 8px;
        padding: 14px 16px 12px;
        position: relative;

        .yours-set-notice {
            position: absolute;
            top: 8px;
            right: 12px;
            font-size: 0.75rem;
            color: #888;
            padding: 2px 8px;
            border-radius: 10px;
            background-color: #f5f5f5;

            &.fade {
                animation: yours-set-notice-fade 4s ease-out forwards;
                pointer-events: none;
            }
        }
    }

    .yours-set-slots {
        display: grid;
        grid-template-columns: repeat(10, minmax(35px, 1fr));
        gap: 14px;

        /* Query the resizable dashboard-left panel, not the viewport, so the
           2-row layout kicks in when the user drags the divider narrower too. */
        @container city-list (max-width: 750px) {
            grid-template-columns: repeat(5, minmax(35px, 1fr));
        }
    }

    .yours-set-track {
        display: flex;
        flex-direction: column;
        align-items: stretch;

        .level-bar {
            height: 4px;
            margin: 0 5px 4px;        /* 10px inset from each side of the tile */
            background: transparent;    /* no rail - fill alone shows the value */

            .fill {
                height: 100%;
                background: #4caf50;    /* green */
                border-radius: 2px;
                transition: width 0.2s ease, background-color 0.2s ease;
            }
        }

        .yours-set-tile {
            aspect-ratio: 1 / 1;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fafafa;
            transition: box-shadow 0.2s ease;

            &.filled {
                border: 1px solid #e5e5e5;

                .thumb {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }

                &:hover { border-color: #999; }
            }

            &.empty {
                border: 1px dashed #ccc;
                color: #aaa;

                .plus {
                    font-size: 1.625rem;
                    line-height: 1;
                }

                &:hover {
                    border-color: #777;
                    color: #555;
                }
            }
        }

        .track-label {
            margin-top: 6px;
            font-size: 0.6875rem;
            color: #666;
            text-align: center;
            line-height: 1.2;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            transition: color 0.2s ease;
        }

        /* Filter-active track: blue glow on the tile, blue level bar, blue label */
        &.on-filter {
            .yours-set-tile { box-shadow: 0 0 4px 2px rgba(76, 111, 255, 0.85); }
            .track-label    { color: #4c6fff; font-weight: 600; }
            .level-bar .fill { background: #4c6fff; }
        }

        /* Briefly applied by YoursSet.flash_track() after add/remove, to draw the
           eye to the slot that just changed. */
        &.just-changed .yours-set-tile {
            animation: yours-set-tile-flash 1.5s ease-out;
        }
    }

    /* ── Tier colours ──────────────────────────────────────────
       Empty and Foundation share a neutral gray. Established → Apex is a
       linear RGB spectrum from that gray into the Apex purple.
         0 (empty)     #585858
         1 Foundation  #585858
         2 Established #615370
         3 Curator     #6a4d88
         4 Treasury    #7248a0
         5 Apex        #7b42b8 */
    &.tier-0 { --tier-bg: #585858; }
    &.tier-1 { --tier-bg: #585858; }
    &.tier-2 { --tier-bg: #615370; }
    &.tier-3 { --tier-bg: #6a4d88; }
    &.tier-4 { --tier-bg: #7248a0; }
    &.tier-5 { --tier-bg: #7b42b8; }

    &:is(.tier-0, .tier-1, .tier-2, .tier-3, .tier-4, .tier-5) {
        .yours-set-tab.on {
            background-color: var(--tier-bg);
            border-color: var(--tier-bg);
            color: #fff;
        }

        .yours-set-card {
            background: var(--tier-bg);
            border-color: var(--tier-bg);
        }

        .yours-set-notice {
            background-color: rgba(255,255,255,0.18);
            color: #fff;
        }

        .yours-set-track {
            .track-label { color: rgba(255,255,255,0.9); }
            .level-bar .fill { background: #fff; }

            .yours-set-tile.empty {
                border-color: rgba(255,255,255,0.55);
                color: rgba(255,255,255,0.8);
                background-color: rgba(255,255,255,0.05);

                &:hover {
                    border-color: #fff;
                    color: #fff;
                }
            }

            /* Filter selection stays high-contrast against the coloured card */
            &.on-filter {
                .yours-set-tile { box-shadow: 0 0 0 2px #fff, 0 0 6px 2px rgba(255,255,255,0.55); }
                .track-label    { color: #fff; font-weight: 700; }
                .level-bar .fill { background: #fff; }
            }
        }
    }

    /* ── Loading skeleton (pre-Sets.List) ──────────────────────── */
    &.loading {
        .yours-set-tab.skeleton-tab {
            width: 110px;
            min-height: 13px;            /* matches .yours-set-tab line-height so height lines up */
            background: var(--tier-bg);  /* merge with card background so the tab reads as active */
            border-color: var(--tier-bg);
            color: transparent;
            z-index: 1;                  /* merge with the card like an active tab, not behind it */
            pointer-events: none;
        }

        .yours-set-track {
            .yours-set-tile {
                border: 1px solid #e5e5e5 !important;
                cursor: default;
                pointer-events: none;
                animation: yours-set-tile-pulse 1.2s ease-in-out infinite;

                .plus { visibility: hidden; }
            }

            .level-bar .fill {
                width: 100% !important;
                background: #e5e5e5;
                animation: yours-set-tile-pulse 1.2s ease-in-out infinite;
            }
        }
    }
}

/* Skeleton pulse for city thumbnails + level bars - stronger contrast than a simple
   opacity fade so the loading state is visible against the light card background. */
@keyframes yours-set-tile-pulse {
    0%, 100% { background-color: #ececec; }
    50%      { background-color: #cfcfcf; }
}

/* Single white halo expanding outwards - fires once on a slot immediately after
   add/remove. Matches the shape of .city-page-action.is-promoted's pulse. */
@keyframes yours-set-tile-flash {
    0%   { box-shadow: 0 0 0 0    rgba(255, 255, 255, 0.85); }
    70%  { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
}

@keyframes yours-set-notice-fade {
    0%   { opacity: 1; }
    60%  { opacity: 1; }
    100% { opacity: 0; visibility: hidden; }
}


 /* Top bar - shared header and tray styles for all top-bar widgets */

/* Header - non-scrolling bar at top. The scrolling .content below uses
   --pad-x-with-scrollbar on the right, so both align at panel_width - pad-x. */
.top-bar .header {
    padding: 15px var(--pad-x);
    min-height: 77.5px;
    box-sizing: border-box;
    background-color: #fff;
}

/* Tray - overlay that covers the content area below the top-bar.
   Scrollbar styling comes from .thin-scroll (applied in HTML). */
.top-bar .tray {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    overflow-y: auto;
    z-index: 5;
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 0 var(--pad-x-with-scrollbar) 0 var(--pad-x);
}

/* Standard input bar - bordered box with grid layout */
.top-bar .input-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px 10px;
    min-height: 47.5px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.top-bar .input-bar:focus-within {
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.top-bar .input-bar input {
    border: none;
    outline: none;
    padding: 0;
    font-size: 1rem;
    background: transparent;
}

.top-bar .input-bar input::placeholder {
    color: #999;
}

 /* Tag Styles */
.tag {
    display: inline-flex;
    align-items: center;
    background-color: #efefef;   
    border-radius: 12px;
    padding:0 6px 0 0;
    font-size: 0.9375rem;
    color: #495057;
    cursor: pointer;
    flex-shrink: 0;

    .text {
        margin-right: 4px;
    }

    .image {
        width: 24px;
        height: 24px;
        object-fit: cover;
        border-radius: 50%;
        margin-right: 6px;
    }

    /* .remove {
        cursor: pointer;
        color: #6c757d;
        font-weight: bold;
        font-size: 16px;
        line-height: 1;
        margin-left: 4px;
        padding: 0 2px;
        border-radius: 2px;
        transition: background-color 0.2s ease, color 0.2s ease;

        &:hover {
            background-color: #dc3545;
            color: white;
        }
    } */

    &:hover {
        background-color: #cde6ff;
    }

    &.selected {
        background-color: #b9d7f7;
        color: #0b3a73;

        &:hover { background-color: #a4c8ee; }
    }
}

    /* Sign-in page - layout from dashboard.css (.dashboard.split-60).
   Right panel hosts the EpicArt widget; make it fill the pane. */

.signin .dashboard-right > [widget="signin_right"] {
    position: absolute;
    inset: 0;
}
 /* ═══════════════════════════════════════════════════════════════
   SECTIONS - Shared section system for all home pages
   ═══════════════════════════════════════════════════════════════

   Replaces per-page section styling (hp-, ar-, cl-, hy-, cg-).
   Each page still owns its unique/custom components.

   LAYOUT CLASSES:
     .sec                         - section shell (max-width, padding)
     .sec--tinted                 - light grey background
     .sec--dark                   - dark background, light text
     .sec--atmospheric            - full-bleed background image + overlay

   HEADER:
     .sec__label                  - eyebrow / category label
     .sec__heading                - section H2
     .sec__sub                    - subtitle (short, after heading)
     .sec__intro                  - intro paragraph (longer, centered)

   SPLITS (two-column):
     .split                       - 50 / 50
     .split--60                   - 60 / 40
     .split--70                   - 70 / 30
     .split--reverse              - visual left, copy right

   GRIDS:
     .card-grid--2                - 2 equal columns
     .card-grid--3                - 3 equal columns
     .card-grid--4                - 4 equal columns
     .card-grid--5                - 5 equal columns

   CARDS:
     .card                        - white bordered card
     .card--icon                  - icon + title + text (horizontal)
     .tile                        - image-top card

   COMPONENTS:
     .browser-frame               - screenshot in browser chrome
     .stat-strip                  - horizontal stat values
     .cta-block                   - centered CTA section
     .atmospheric                 - full-width bg image section

   BUTTONS:
     .sec-btn                     - base button
     .sec-btn--primary            - purple CTA
     .sec-btn--secondary          - white bordered
     .sec-btn--outline            - hollow with purple border
     .sec-btn--ghost              - transparent bordered
     .sec-btn--lg                 - larger sizing
     .sec-btn--light              - light variant for dark sections

   ═══════════════════════════════════════════════════════════════ */


/* ─── HEADING DEFAULTS ───
   Bare h2/h3 inside our pages otherwise pick up the browser default
   ~0.83em top margin, which adds inconsistent space on top of section
   padding when split columns stack on mobile. */

.sections-test h2, .sections-test h3, .sections-test h4,
.home h2, .home h3, .home h4,
.art h2, .art h3, .art h4,
.collecting h2, .collecting h3, .collecting h4,
.history h2, .history h3, .history h4,
.meta h2, .meta h3, .meta h4,
.legal h2, .legal h3, .legal h4,
.discord h2, .discord h3, .discord h4 {
    margin-top: 0;
}


/* ─── DESIGN TOKENS ─── */

.sections-test,
.home, .art, .collecting, .history, .meta, .legal, .discord {
    --sec-max: 1280px;
    --sec-gutter: 56px;
    --sec-text: #141a21;
    --sec-muted: #3d4a5c;
    --sec-faint: #7a8699;
    --sec-border: #dfe3ea;
    --sec-surface: #f4f6f9;
    --sec-accent: #7b42b8;
    --sec-accent-hover: #6a379f;
    --sec-accent-subtle: rgba(123, 66, 184, 0.07);
    --sec-radius: 16px;
    --sec-radius-sm: 12px;

    /* Spacing tokens */
    --sec-pad-y: 96px;
    --sec-split-gap: 64px;
    --sec-card-gap: 40px;
    --sec-card-pad: 40px;
    --sec-card-pad-sm: 24px;

    /* Typography tokens */
    --sec-type-hero: 4rem;
    --sec-type-h2: 2.4em;
    --sec-type-h3: 1.4em;
    --sec-type-intro: 1.12em;
    --sec-type-body: 1em;
    --sec-type-label: 0.78em;
    --sec-type-caption: 0.75em;

    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--sec-text);
}


/* ═══════════════════════════════════════════════════════════════
   SECTION SHELL
   ═══════════════════════════════════════════════════════════════ */

.sec {
    max-width: var(--sec-max);
    margin: 0 auto;
    padding: var(--sec-pad-y) var(--sec-gutter);
}

.sec--tinted {
    background: var(--sec-surface);
    max-width: none;
}

.sec--tinted > .sec__inner {
    max-width: var(--sec-max);
    margin: 0 auto;
}

.sec--dark {
    background: var(--sec-text);
    color: rgba(255, 255, 255, 0.92);
    max-width: none;
}

.sec--dark > .sec__inner {
    max-width: var(--sec-max);
    margin: 0 auto;
}

/* Tinted/dark sections need inner padding since they go full-width */
.sec--tinted,
.sec--dark {
    padding-left: var(--sec-gutter);
    padding-right: var(--sec-gutter);
}


/* ═══════════════════════════════════════════════════════════════
   SECTION HEADER
   ═══════════════════════════════════════════════════════════════ */

.sec__label {
    display: block;
    font-size: var(--sec-type-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sec-accent);
    margin-bottom: 16px;
}

.sec__label--light {
    color: rgba(190, 160, 230, 0.9);
}

.sec__heading {
    font-size: var(--sec-type-h2);
    font-weight: 800;
    margin: 0 0 12px;
    line-height: 1.15;
    letter-spacing: -0.025em;
}

.sec--dark .sec__heading {
    color: #fff;
}

.sec__sub {
    font-size: 1.05em;
    color: var(--sec-faint);
    margin: 0 0 48px;
}

.sec__intro {
    font-size: var(--sec-type-intro);
    color: var(--sec-muted);
    max-width: 760px;
    margin: 0 auto 56px;
    text-align: center;
    line-height: 1.75;
}

.sec__intro--left {
    text-align: left;
    margin-left: 0;
}

.sec__intro--full {
    max-width: none;
}

.sec__intro--light {
    color: rgba(255, 255, 255, 0.65);
}


/* ═══════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════ */

/* ── Split hero (copy + visual) ── */

.hero {
    max-width: var(--sec-max);
    margin: 0 auto;
    padding: 88px var(--sec-gutter) 64px;
}

.hero--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sec-split-gap);
    align-items: center;
    min-height: 520px;
}

.hero--full {
    text-align: center;
}

.hero--full .hero__subhead {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.hero__eyebrow {
    display: block;
    font-size: var(--sec-type-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sec-accent);
    margin-bottom: 20px;
}

.hero__headline {
    font-size: var(--sec-type-hero);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.035em;
    margin: 0 0 24px;
}

.hero__subhead {
    font-size: 1.18em;
    color: var(--sec-muted);
    line-height: 1.6;
    margin: 0 0 36px;
}

.hero__ctas {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.hero--full .hero__ctas {
    justify-content: center;
}


/* ═══════════════════════════════════════════════════════════════
   SPLIT LAYOUTS - Two-column
   ═══════════════════════════════════════════════════════════════ */

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sec-split-gap);
    align-items: center;
}

.split--60 {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--sec-split-gap);
    align-items: center;
}

.split--40-60 {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: var(--sec-split-gap);
    align-items: center;
}

.split--70 {
    display: grid;
    grid-template-columns: 7fr 3fr;
    gap: var(--sec-split-gap);
    align-items: center;
}

.split--reverse {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sec-split-gap);
    align-items: center;
}

.split--top {
    align-items: start;
}

/* Fixed narrow right column (for tier ladders, sidebars) */
.split--narrow-right {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--sec-split-gap);
    align-items: start;
}


/* ═══════════════════════════════════════════════════════════════
   CARD GRIDS
   ═══════════════════════════════════════════════════════════════ */

.card-grid--2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sec-card-gap);
}

.card-grid--3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sec-card-gap);
}

.card-grid--4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sec-card-gap);
}

.card-grid--5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.card-grid--gap-lg {
    gap: 28px;
}


/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */

/* ── Base card ── */

.card {
    background: #f8fafc;
    border: 1px solid var(--sec-border);
    border-radius: var(--sec-radius);
    padding: var(--sec-card-pad);
}

/* On tinted/silver section backgrounds, keep cards white for contrast */
.sec--tinted .card {
    background: #fff;
}

.card h3 {
    font-size: var(--sec-type-h3);
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.3;
}

.card h4 {
    font-size: 1.15em;
    font-weight: 700;
    margin: 0 0 8px;
}

.card p {
    color: var(--sec-muted);
    margin: 0;
    line-height: 1.65;
}

.card--lg {
    padding: 52px 42px 56px;
    display: flex;
    flex-direction: column;
}

.card--lg > p {
    margin-bottom: 24px;
}

.card__cta {
    margin-top: auto;
    align-self: center;
}


/* ── Icon card (icon left, content right - or icon top) ── */

.card--icon {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 36px;
    border-top: 3px solid var(--sec-border);
}

.card--icon .card__icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: var(--sec-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.card--icon .card__icon svg {
    width: 26px;
    height: 26px;
    color: var(--sec-accent);
}

.card--icon .card__label {
    font-size: var(--sec-type-label);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sec-faint);
    margin-bottom: 4px;
}

.card--icon h3 {
    font-size: 1.32em;
    margin: 0 0 8px;
}

/* Card accent top-border themes */
.card--accent-purple { border-top-color: var(--sec-accent); }
.card--accent-purple .card__icon { background: rgba(123, 66, 184, 0.08); }
.card--accent-gold { border-top-color: #c8a44e; }
.card--accent-gold .card__icon { background: rgba(200, 164, 78, 0.08); color: #c8a44e; }
.card--accent-gold .card__icon svg { color: #c8a44e; }
.card--accent-green { border-top-color: #3d8a6e; }
.card--accent-green .card__icon { background: rgba(61, 138, 110, 0.08); }
.card--accent-green .card__icon svg { color: #3d8a6e; }
.card--accent-blue { border-top-color: #3b6fbf; }
.card--accent-blue .card__icon { background: rgba(59, 111, 191, 0.08); }
.card--accent-blue .card__icon svg { color: #3b6fbf; }


/* ── Tile card (image + text body) ── */

.tile {
    border: 1px solid var(--sec-border);
    border-radius: var(--sec-radius);
    background: #fff;
    overflow: hidden;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.tile:hover {
    /* border-color: #c0c8d4;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06); */
}

.tile__art {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--sec-surface);
}

.tile__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tile__body {
    padding: 28px 28px 32px;
}

.tile__body h3 {
    font-size: 1.2em;
    font-weight: 700;
    margin: 0 0 8px;
}

.tile__body p {
    font-size: 0.95em;
    color: var(--sec-muted);
    margin: 0;
    line-height: 1.6;
}


/* ── Small icon card (icon-top, centered or left) ── */

.icon-card {
    text-align: center;
}

.icon-card__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-card__icon svg {
    width: 32px;
    height: 32px;
    color: var(--sec-accent);
}

.icon-card h3 {
    font-size: 1.1em;
    font-weight: 700;
    margin: 0 0 8px;
}

.icon-card h3 svg {
    width: 20px;
    height: 20px;
    vertical-align: -3px;
    margin-right: 6px;
    color: var(--sec-accent);
}

.icon-card p {
    font-size: 0.92em;
    color: var(--sec-muted);
    margin: 0;
    line-height: 1.6;
}

/* Left-aligned variant */
.icon-card--left {
    text-align: left;
}

.icon-card--left .icon-card__icon {
    margin: 0 0 16px;
}


/* ═══════════════════════════════════════════════════════════════
   BROWSER FRAME
   ═══════════════════════════════════════════════════════════════ */

.browser-frame {
    border: 1px solid var(--sec-border);
    border-radius: var(--sec-radius);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.browser-frame__bar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 16px;
    background: var(--sec-surface);
    border-bottom: 1px solid var(--sec-border);
}

.browser-frame__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cdd3dc;
}

.browser-frame__url {
    margin-left: 12px;
    font-size: 0.78em;
    color: var(--sec-faint);
    font-weight: 500;
}

.browser-frame__img {
    display: block;
    width: 100%;
    height: auto;
}


/* ═══════════════════════════════════════════════════════════════
   STAT STRIP
   ═══════════════════════════════════════════════════════════════ */

.stat-strip {
    padding: 40px var(--sec-gutter);
    border-top: 1px solid var(--sec-border);
    border-bottom: 1px solid var(--sec-border);
}

.stat-strip__inner {
    max-width: var(--sec-max);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
}

.stat-strip__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 40px;
}

.stat-strip__value {
    font-size: 2.4em;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--sec-text);
}

.stat-strip__label {
    font-size: var(--sec-type-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sec-faint);
    margin-top: 6px;
}

.stat-strip__divider {
    width: 1px;
    height: 48px;
    background: var(--sec-border);
}


/* ═══════════════════════════════════════════════════════════════
   CTA BLOCK - centered call-to-action section
   ═══════════════════════════════════════════════════════════════ */

.cta-block {
    text-align: center;
    max-width: 640px;
    margin: 0 auto;
}

.cta-block h2 {
    font-size: var(--sec-type-h2);
    font-weight: 800;
    margin: 0 0 20px;
    letter-spacing: -0.025em;
}

.cta-block p {
    font-size: var(--sec-type-intro);
    color: var(--sec-muted);
    line-height: 1.75;
    margin: 0 0 36px;
}

.cta-block__date {
    display: block;
    font-size: var(--sec-type-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sec-accent);
    margin-bottom: 16px;
}

.cta-block__buttons {
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
}


/* ═══════════════════════════════════════════════════════════════
   ATMOSPHERIC - full-bleed background image
   ═══════════════════════════════════════════════════════════════ */

.atmospheric {
    position: relative;
    padding: 120px var(--sec-gutter);
    overflow: hidden;
}

.atmospheric__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.atmospheric__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.atmospheric__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 16, 0.82) 0%,
        rgba(10, 10, 16, 0.70) 100%
    );
}

.atmospheric__content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
}

.atmospheric__content h2 {
    font-size: var(--sec-type-h2);
    font-weight: 800;
    color: #fff;
    margin: 0 0 20px;
    letter-spacing: -0.025em;
}

.atmospheric__content p {
    font-size: var(--sec-type-intro);
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.75;
    margin: 0 0 20px;
}

.atmospheric__buttons {
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 36px;
}


/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.sec-btn {
    display: inline-block;
    padding: 16px 36px;
    border-radius: 10px;
    font-size: 1.02em;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s, border-color 0.2s;
    border: 1.5px solid transparent;
    line-height: 1;
}

.sec-btn:hover {
    transform: translateY(-1px);
}

.sec-btn--primary {
    background: var(--sec-accent);
    color: #fff;
    border-color: var(--sec-accent);
}

.sec-btn--primary:hover {
    background: var(--sec-accent-hover);
    border-color: var(--sec-accent-hover);
    box-shadow: 0 6px 24px rgba(139, 71, 208, 0.32);
}

.sec-btn--secondary {
    background: #fff;
    color: var(--sec-text);
    border-color: var(--sec-border);
}

.sec-btn--secondary:hover {
    border-color: var(--sec-muted);
    background: var(--sec-surface);
}

.sec-btn--outline {
    background: transparent;
    color: var(--sec-accent);
    border-color: var(--sec-accent);
}

.sec-btn--outline:hover {
    background: var(--sec-accent);
    color: #fff;
    border-color: var(--sec-accent);
    box-shadow: 0 6px 24px rgba(139, 71, 208, 0.22);
}

.sec-btn--ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.25);
}

.sec-btn--ghost:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.06);
}

.sec-btn--lg {
    padding: 18px 44px;
    font-size: 1.06em;
}

.sec-btn--light {
    background: #fff;
    color: var(--sec-accent);
    border-color: #fff;
}

.sec-btn--light:hover {
    background: var(--sec-surface);
    box-shadow: 0 6px 24px rgba(255, 255, 255, 0.2);
}


/* ═══════════════════════════════════════════════════════════════
   BULLET LIST
   ═══════════════════════════════════════════════════════════════ */

.sec-bullets {
    list-style: none;
    padding: 0;
    margin: 28px 0 40px;
}

.sec-bullets li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 14px;
    line-height: 1.55;
}

.sec-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sec-accent);
}

.sec-bullets--cols-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
}

@media (max-width: 600px) {
    .sec-bullets--cols-2 {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════════════════════
   PROSE - long-form / markdown-rendered content
   ═══════════════════════════════════════════════════════════════ */

.sec__prose {
    max-width: 760px;
    font-size: var(--sec-type-body);
    line-height: 1.75;
    color: var(--sec-text);
}

.sec__prose h1 {
    font-size: 2em;
    font-weight: 800;
    margin: 40px 0 16px;
    letter-spacing: -0.02em;
}

.sec__prose h2 {
    font-size: 1.35em;
    font-weight: 700;
    margin: 40px 0 12px;
}

.sec__prose h3 {
    font-size: 1.1em;
    font-weight: 600;
    margin: 28px 0 8px;
}

.sec__prose p,
.sec__prose ul,
.sec__prose ol {
    margin: 0 0 16px;
    color: var(--sec-muted);
}

.sec__prose ul,
.sec__prose ol {
    padding-left: 24px;
}

.sec__prose li {
    margin: 4px 0;
}

.sec__prose a {
    color: var(--sec-accent);
    text-decoration: underline;
}

.sec__prose a:hover {
    text-decoration: none;
}

.sec__prose strong {
    color: var(--sec-text);
    font-weight: 600;
}

.sec__prose em {
    color: var(--sec-faint);
    font-style: italic;
}

.sec__prose hr {
    border: 0;
    border-top: 1px solid var(--sec-border);
    margin: 32px 0;
}


/* ═══════════════════════════════════════════════════════════════
   PAGE FOOT - small faint link row (Privacy / Terms / etc.)
   ═══════════════════════════════════════════════════════════════ */

.sec__foot {
    margin-top: 120px;
    padding: 24px 0 32px;
    text-align: center;
    font-size: 0.85em;
    color: var(--sec-faint);
}

@media (max-width: 860px) {
    .sec__foot {
        margin-top: 64px;
    }
}

@media (max-width: 560px) {
    .sec__foot {
        margin-top: 40px;
        padding: 16px 0 24px;
    }
}

.sec__foot a {
    color: inherit;
    text-decoration: none;
    margin: 0 14px;
    cursor: pointer;
}

.sec__foot a:hover {
    color: var(--sec-accent);
    text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════════
   TWO-COLUMN TEXT
   ═══════════════════════════════════════════════════════════════ */

.two-col-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
}

.two-col-text h3 {
    font-size: 1.15em;
    font-weight: 700;
    margin: 0 0 12px;
}

.two-col-text p {
    color: var(--sec-muted);
    line-height: 1.65;
    margin: 0 0 16px;
}


/* ═══════════════════════════════════════════════════════════════
   IMAGE STRIP (3-col images with captions)
   ═══════════════════════════════════════════════════════════════ */

.image-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sec-card-gap);
    margin-top: 48px;
}

.image-strip__item {
    text-align: center;
}

.image-strip__frame {
    border-radius: var(--sec-radius);
    overflow: hidden;
    background: var(--sec-surface);
    aspect-ratio: 1;
}

.image-strip__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-strip__caption {
    display: block;
    font-size: var(--sec-type-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sec-faint);
    margin-top: 14px;
}


/* ═══════════════════════════════════════════════════════════════
   ART FRAME (shared image container)
   ═══════════════════════════════════════════════════════════════ */

.sec-art-frame {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--sec-radius);
    overflow: hidden;
    background: var(--sec-surface);
}

.sec-art-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--sec-radius);
}

/* ═══════════════════════════════════════════════════════════════
   COMPARE PANELS (side-by-side labeled images)
   ═══════════════════════════════════════════════════════════════ */

.compare-panels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.compare-panel__img {
    aspect-ratio: 1;
    border-radius: var(--sec-radius);
    overflow: hidden;
    background: var(--sec-surface);
}

.compare-panel__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.compare-panel__label {
    display: block;
    font-size: var(--sec-type-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sec-faint);
    text-align: center;
    margin-top: 12px;
}


/* ═══════════════════════════════════════════════════════════════
   ERA HEADER (for history-style eras with date + title + intro)
   ═══════════════════════════════════════════════════════════════ */

.era-header__number {
    display: block;
    font-size: var(--sec-type-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sec-accent);
    margin-bottom: 12px;
}

.era-header__title {
    font-size: 2.6em;
    font-weight: 800;
    margin: 0 0 20px;
    line-height: 1.12;
    letter-spacing: -0.025em;
}

.era-header__intro {
    font-size: var(--sec-type-intro);
    color: var(--sec-muted);
    line-height: 1.75;
    margin: 0 0 36px;
    max-width: 760px;
}

/* Subsections within eras */
.era-subsection {
    margin-bottom: 28px;
}

.era-subsection h3 {
    font-size: 1.15em;
    font-weight: 700;
    margin: 0 0 8px;
}

.era-subsection p {
    color: var(--sec-muted);
    line-height: 1.65;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
   ACCORDION
   ═══════════════════════════════════════════════════════════════ */

.accordion__item {
    border-bottom: 1px solid var(--sec-border);
}

.accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 24px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.08em;
    font-weight: 600;
    color: var(--sec-text);
    text-align: left;
}

.accordion__chevron {
    transition: transform 0.25s;
    color: var(--sec-faint);
    flex-shrink: 0;
}

.accordion__item--open .accordion__chevron {
    transform: rotate(180deg);
}

.accordion__content {
    display: none;
    padding: 0 0 28px;
}

.accordion__item--open .accordion__content {
    display: block;
}

.accordion__content p {
    color: var(--sec-muted);
    line-height: 1.7;
    margin: 0 0 16px;
}

.accordion__content ul {
    color: var(--sec-muted);
    line-height: 1.7;
    padding-left: 20px;
    margin: 0 0 16px;
}

.accordion__content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.92em;
}

.accordion__content th {
    text-align: left;
    font-weight: 700;
    padding: 10px 16px;
    border-bottom: 2px solid var(--sec-border);
}

.accordion__content td {
    padding: 10px 16px;
    border-bottom: 1px solid var(--sec-border);
    color: var(--sec-muted);
}

.accordion__content a {
    color: var(--sec-accent);
    text-decoration: none;
}

.accordion__content a:hover {
    text-decoration: underline;
}


/* ═══════════════════════════════════════════════════════════════
   THUMBNAILS (labeled images, e.g. meta size section)
   ═══════════════════════════════════════════════════════════════ */

.thumbnails {
    display: flex;
    gap: 16px;

    .thumb {
        flex: 1;
        text-align: center;
    }

    .thumb img {
        width: 100%;
        aspect-ratio: 1;
        object-fit: cover;
        border-radius: var(--sec-radius);
        display: block;
    }

    .thumb__label {
        display: block;
        font-size: var(--sec-type-caption);
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--sec-faint);
        margin-top: 12px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   IDEA CARDS (icon + title + text, vertical stack)
   ═══════════════════════════════════════════════════════════════ */

.idea-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.idea {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.idea svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: var(--sec-accent);
    margin-top: 2px;
}

.idea h4 {
    font-size: 1em;
    font-weight: 700;
    margin: 0 0 4px;
}

.idea p {
    font-size: 0.88em;
    color: var(--sec-muted);
    margin: 0;
    line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════
   SECTION SIDE IMAGE (for split layouts)
   ═══════════════════════════════════════════════════════════════ */

.split__image img {
    width: 100%;
    border-radius: var(--sec-radius);
    display: block;
}

.split__image--shadow img {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.1);
}


/* ═══════════════════════════════════════════════════════════════
   THREE-COLUMN TEXT (for experiments-style sections)
   ═══════════════════════════════════════════════════════════════ */

.three-col-text {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 36px;
}

.three-col-text h3 {
    font-size: 1.15em;
    font-weight: 700;
    margin: 0 0 12px;
}

.three-col-text p {
    color: var(--sec-muted);
    line-height: 1.65;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════════════
   THREE-COLUMN COMPARISON LISTS
   ═══════════════════════════════════════════════════════════════ */

.compare-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
    padding-top: 36px;
    border-top: 1px solid var(--sec-border);
}

.compare-cols h4 {
    font-size: 1em;
    font-weight: 700;
    margin: 0 0 12px;
}

.compare-cols ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.compare-cols li {
    padding: 6px 0;
    color: var(--sec-muted);
    font-size: 0.92em;
    border-bottom: 1px solid var(--sec-surface);
}


/* ═══════════════════════════════════════════════════════════════
   SCREENSHOT GRID (3-column screenshots)
   ═══════════════════════════════════════════════════════════════ */

.screenshot-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 48px;
}

.screenshot-grid img {
    width: 100%;
    border-radius: var(--sec-radius-sm);
    display: block;
    aspect-ratio: 1;
    object-fit: cover;
}


/* ═══════════════════════════════════════════════════════════════
   MODIFIERS / VARIANTS
   ═══════════════════════════════════════════════════════════════ */

/* Ensure tile body text is always left-aligned (even in centered sections) */
.tile__body {
    text-align: left;
}

/* Card icon always left-aligned content */
.card--icon {
    text-align: left;
}

/* Card compact variant - smaller text for dense info cards */
.card--compact h3,
.card--compact h4 {
    font-size: 1em;
    margin-bottom: 14px;
}

.card--compact p,
.card--compact li {
    font-size: 0.9em;
    line-height: 1.5;
}

/* Card list styling - purple bullets */
.card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.card li {
    position: relative;
    padding-left: 16px;
    margin-bottom: 6px;
    color: var(--sec-muted);
    font-size: 0.9em;
    line-height: 1.5;
}

.card li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sec-accent);
}

/* Icon card bordered variant (for meta hero cards) */
.icon-card--bordered {
    border: 1px solid var(--sec-border);
    border-radius: var(--sec-radius-sm);
    background: #f8fafc;
    padding: 24px 16px 28px;
}

/* On tinted/silver section backgrounds, keep icon cards white for contrast */
.sec--tinted .icon-card--bordered {
    background: #fff;
}

/* Purple underline on h3 in left icon cards (meta identity blocks) */
.icon-card--underline h3 {
    padding-bottom: 14px;
    border-bottom: 2px solid var(--sec-accent);
    margin-bottom: 12px;
}

/* Compare columns with purple borders and bullets */
.compare-cols--purple {
    border-top: none;
    padding-top: 0;
}

.compare-cols--purple > div {
    border-top: 2px solid var(--sec-accent);
    padding-top: 20px;
}

.compare-cols--purple li {
    border-bottom: none;
    position: relative;
    padding-left: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.compare-cols--purple li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sec-accent);
}

/* Accordion bordered variant (card-style items) */
.accordion--bordered .accordion__item {
    border: 1px solid var(--sec-border);
    border-radius: var(--sec-radius-sm);
    margin-bottom: 12px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.2s;
}

.accordion--bordered .accordion__item:hover {
    border-color: #c0c8d4;
}

.accordion--bordered .accordion__trigger {
    padding: 22px 28px;
}

.accordion--bordered .accordion__content {
    padding: 0 28px 28px;
}

/* Dark section alt color (history lands) */
.sec--dark-alt {
    background: #242b32;
    color: rgba(255, 255, 255, 0.92);
    max-width: none;
    padding-left: var(--sec-gutter);
    padding-right: var(--sec-gutter);
}

.sec--dark-alt > .sec__inner {
    max-width: var(--sec-max);
    margin: 0 auto;
}

.sec--dark-alt .sec__heading,
.sec--dark-alt .era-header__title {
    color: #fff;
}

.sec--dark-alt .era-header__number {
    color: rgba(190, 160, 230, 0.9);
}

.sec--dark-alt .era-header__intro,
.sec--dark-alt .era-subsection p {
    color: rgba(255, 255, 255, 0.6);
}

.sec--dark-alt .era-subsection h3 {
    color: #fff;
}

/* Collecting section SVG sizing in cards */
.card__svg {
    width: 32px;
    height: 32px;
    color: var(--sec-accent);
    margin-bottom: 16px;
}

.card__svg svg {
    width: 100%;
    height: 100%;
}


/* ═══════════════════════════════════════════════════════════════
   TEST PAGE LABELS
   ═══════════════════════════════════════════════════════════════ */

.sec-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #fff;
    background: #e74c3c;
    padding: 6px 14px;
    border-radius: 4px;
    margin: 0 0 0 var(--sec-gutter);
    width: fit-content;
}

.sec-label--page {
    background: #2c3e50;
    font-size: 0.8125rem;
    padding: 10px 20px;
    margin-bottom: 0;
}

.sec-label--type {
    background: #27ae60;
}

.sec-label span {
    opacity: 0.7;
    font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════
   PAGE DIVIDER (between page sections on test page)
   ═══════════════════════════════════════════════════════════════ */

.page-divider {
    background: #2c3e50;
    color: #fff;
    padding: 20px var(--sec-gutter);
    font-size: 1.2em;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .sections-test,
    .home, .art, .collecting, .history, .meta, .legal {
        --sec-gutter: 36px;
        --sec-split-gap: 48px;
    }
}

@media (max-width: 860px) {
    .sections-test,
    .home, .art, .collecting, .history, .meta, .legal {
        --sec-gutter: 32px;
        --sec-pad-y: 52px;
        --sec-split-gap: 32px;
        --sec-card-gap: 28px;
        /* font-size stays at the rem-based base so the html mobile bump applies. */
    }

    .hero--split {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .split,
    .split--60,
    .split--40-60,
    .split--70,
    .split--reverse,
    .split--narrow-right {
        grid-template-columns: 1fr;
    }

    .card-grid--3,
    .card-grid--4,
    .card-grid--5 {
        grid-template-columns: 1fr;
    }

    .two-col-text,
    .three-col-text {
        grid-template-columns: 1fr;
    }

    .compare-panels {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .compare-cols {
        grid-template-columns: 1fr;
    }

    .image-strip {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .screenshot-grid {
        grid-template-columns: 1fr;
    }

    .stat-strip__inner {
        gap: 8px;
    }

    .stat-strip__item {
        padding: 12px 20px;
    }

    .stat-strip__value {
        font-size: 1.8em;
    }

    .hero__headline {
        font-size: 2.8em;
    }

    .hero {
        padding-top: 48px;
        padding-bottom: 52px;
    }

    .hero__eyebrow {
        margin-bottom: 12px;
    }

    .hero__subhead {
        margin-bottom: 20px;
    }

    .sec__intro {
        margin-bottom: 32px;
        line-height: 1.65;
    }

    .sec__sub {
        margin-bottom: 28px;
    }

    .sec__label {
        margin-bottom: 12px;
    }

    .atmospheric {
        padding: 60px var(--sec-gutter);
    }

    .atmospheric__buttons {
        margin-top: 24px;
    }

    .thumbnails {
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .sections-test,
    .home, .art, .collecting, .history, .meta, .legal {
        --sec-gutter: 25px;
        --sec-pad-y: 40px;
        --sec-split-gap: 28px;
        --sec-card-gap: 28px;
        /* font-size stays at the rem-based base; html mobile bump handles scaling. */
    }

    .hero__headline {
        font-size: 1.95em;
    }

    .hero {
        padding-top: 36px;
        padding-bottom: 40px;
    }

    .hero__subhead {
        font-size: 1.02em;
        margin-bottom: 20px;
    }

    .sec__heading,
    .era-header__title {
        font-size: 1.65em;
    }

    .sec__intro {
        font-size: 1em;
        margin-bottom: 32px;
    }

    .sec__sub {
        margin-bottom: 24px;
    }

    .card--lg {
        padding: var(--sec-card-pad-sm);
    }

    .card--icon {
        flex-direction: column;
        gap: 16px;
    }

    .card-grid--2 {
        grid-template-columns: 1fr;
    }

    .stat-strip__divider {
        display: none;
    }

    .stat-strip__inner {
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .atmospheric {
        padding: 48px var(--sec-gutter);
    }

    .atmospheric__content h2 {
        font-size: 1.65em;
    }

    .atmospheric__content p {
        font-size: 1em;
    }

    .atmospheric__content p:last-of-type {
        margin-bottom: 0;
    }

    .atmospheric__buttons {
        margin-top: 20px;
    }
}
 /* Search widget - full-panel overlay
   ----------------------------------
   Default state: the whole widget is hidden. The dummy "Search" pill in the
   filter title is what the user sees and clicks; clicking it adds the .open
   class which expands the search to overlay the entire .dashboard-left
   panel. The header sits at the top with the input, the tray fills the
   remaining space below. Closing removes the overlay.

   Positioning: .dashboard-left has position: relative, so position: absolute
   inset: 0 here resolves to that panel - the overlay never escapes the left
   pane (right-hand city panel stays interactive).
*/

.search {
    display: none;

    &.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        inset: 0;
        background: #fff;
        z-index: 100;

        .header {
            flex-shrink: 0;
            padding: 20px var(--pad-x) 10px var(--pad-x);

            .input-bar {
                display: flex;
                align-items: center;
                padding: 8px 8px 8px 14px;
                min-height: 40px;
                border: 1px solid #007bff;
                border-radius: 8px;
                box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
                background: #fff;
                gap: 0;
                input {
                    flex: 1;
                    border: none;
                    outline: none;
                    padding: 0;
                    font-size: 1rem;
                    background: transparent;

                    &::placeholder { color: #999; }
                }

                /* Close × inside the input box. Sits at the right edge of the
                   bordered input bar; clicking it closes the search overlay. */
                .search-close {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    width: 22px;
                    height: 22px;
                    border-radius: 50%;
                    background: rgba(0, 0, 0, 0.06);
                    color: #9a9a9a;
                    cursor: pointer;
                    user-select: none;
                    flex-shrink: 0;
                    margin-left: 4px;
                    transition: background-color 0.15s ease, color 0.15s ease;

                    svg {
                        width: 12px;
                        height: 12px;
                        display: block;
                    }

                    &:hover {
                        background: rgba(0, 0, 0, 0.12);
                        color: #555;
                    }
                }
            }
        }

        .tray {
            position: static;       /* override .top-bar .tray which is absolute */
            flex: 1;
            display: block;
            opacity: 1;
            overflow-y: auto;
            padding: 0 var(--pad-x-with-scrollbar) 0 var(--pad-x);
            min-height: 0;          /* allow flex item to shrink below content size for proper scroll */
        }
    }

    .tray {
        .tags {
            padding-bottom: 10px;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: flex-start;
            gap: 10px;
            color: #666;
            margin-top: 10px;

            &:empty {
                display: none;
            }
        }

        /* Search results - plain auto-fill grid. Unlike the dashboard cities
           list, search shows few results at a time and doesn't need the
           staggered brick layout, the column counter, or the first-row
           skeleton fillers. We override .city_cards explicitly here so any
           leftover --cols / cols-N from a previous render doesn't apply. */
        .city_cards {
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            padding: 10px 0;
            margin-top: 10px;

            &:empty {
                display: none;
            }

            /* Belt-and-braces: if any cols-N class lingers on the container,
               cancel the stagger transform that .city_cards.cols-N applies. */
            > * { transform: none !important; }
        }

        /* Subtle "How features work" link at the bottom of the tray. Sits
           below the results so it's the last thing the user sees if they
           are not finding what they want. */
        .search-help-link {
            display: inline-block;
            margin: 16px 0 24px;
            font-size: 0.8125rem;
            color: #999;
            text-decoration: underline;
            text-underline-offset: 2px;
            cursor: pointer;

            &:hover { color: #555; }
        }
    }
}
 
.popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px;
    overflow: visible;

    .mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }

    .modal {
        background: #ffffff;
        /* padding: 30px; */
        border-radius: 15px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.35);
        min-width: 300px;
        max-width: 500px;
        width: 100%;
        min-height: 100px;
        position: relative;
        z-index: 1001;
        overflow: hidden;

        /* Pulsing blue border animation */     
        &.animated-border {
            border: 3px solid #007bff;
            transition: border-color 0.3s ease;
            animation: pulseBorder 2s ease-in-out infinite;
        }

        .header {
            text-align: center;
            /* margin-bottom: 20px; */
            padding: 15px;
            background-color: #f5f5fc;

            h2 {
                margin: 0;
                font-size: 1.375rem;
                font-weight: 500;
                color: #555;

                .thumb{
                    vertical-align: top;
                    height: 25px;
                    width: 25px;
                    margin-right: 10px;
                    margin-left: -15px;
                    object-fit: contain;
                    display: inline-block;
                }
            }
            .close{
                position: absolute;
                right: 14px;
                top: 14px;
                font-size: 1rem;
                font-weight: 600;               
                cursor: pointer;
                padding: 6px;
                border-radius: 16px;
                background-color: transparent;
                color: #555;

                &:hover{
                    background-color: #f5f5f5;
                }
            }   
            &.loading{
                background: linear-gradient(90deg, #f5f5fc 25%, #dfdfeb 50%, #f5f5fc 75%);
                background-size: 200% 100%;
                animation: callingLoader 2.5s ease-in-out infinite;
            }
        }
        p{
            text-align: center;
            line-height: 1.5;
            margin: 0;
        }

        .content {
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding: 25px 20px;
            .form{
                gap:20px;
            }
            &.tray{
                background-color: #f5f5fc;
                display: none;
                
                &.open{
                    display: flex;
                }
            }
        }

        .button {
    
            text-align: center;
            width: 100%;
            padding: 10px;
            background-color: #404499;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.2s;

            &:hover {
                background-color: #0056b3;
            }

            span, img{
                vertical-align: text-bottom;
            }

            .icon{                
                margin-right: 7px;
                &.white{
                    filter: grayscale(1) brightness(20);
                }
            }
            .thumb{
                height: 20px;
                width: 20px;
                margin-right: 10px;
                object-fit: contain;
                display: inline-block;
            }
            &.disabled{
                opacity: 0.25;
                cursor: default;
                filter: grayscale(0.5);
            }
            &.grey{
                background-color: #666;
            }
            &.pale{
                background-color: #aaabbb;
            }
        }

        .separator {
            display: flex;
            align-items: center;
            gap: 15px;
            margin: 10px 0;

            .line {
                flex: 1;
                height: 1px;
                background-color: #ddd;
            }

            .or {
                color: #666;
                font-size: 0.875rem;
                font-weight: 500;
            }
        }

        .form {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .input {
            width: 100%;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 1rem;
            box-sizing: border-box;

            &:focus {
                outline: none;
                border-color: #007bff;
                box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
            }

            &::placeholder {
                color: #999;
            }
        }

        .inline_form {
            position: relative;
            display: flex;
            align-items: center;

            label {
                position: absolute;
                top: 8px;
                left: 12px;
                font-size: 0.75rem;
                color: #666;
                background: white;
                padding: 0;
                z-index: 2;
                pointer-events: none;
            }

            .input {
                flex: 1;
                padding: 30px 80px 10px 12px;
            }

            button {
                position: absolute;
                right: 10px;
                top: 12px;
          
                padding: 8px 16px;
                background-color: #0056b3;
                color: white;
                border: none;
                border-radius: 4px;
                font-size: 0.875rem;
                font-weight: 500;
                cursor: pointer;
                white-space: nowrap;
                transition: background-color 0.2s;
                z-index: 1;
                bottom: 12px;

                &:hover {
                    background-color: #034a96;
                }
                &.shadow{
                    opacity: 0.05;
                    filter: grayscale(1);
                    color: #666;
                    cursor: default;
                }
            }

            .icons{

                .tick {
                    position: absolute;
                    right: 29px;
                    top: 19px;
                    z-index: 2;
                    display: inline-block;           
                    color: #cdcdcd;
                    font-weight: bold;
                    font-size: 1rem;
                    border-radius: 20px;
                    background: #fff;
                    padding: 3px 6px;           
                    pointer-events: none;                   
                    opacity: 1;
                    transform: scale(1);
                    visibility: visible;
                    animation: tickBounce 0.5s ease forwards;                    
                }
            }
        }        
      
    }
}

@keyframes tickBounce {
    0% {                
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
    /* 100% {
        transform: scale(0.5);
        opacity: 0;
    } */
}

@keyframes pulseBorder {
    0% {
        border-color: #007bff;
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
    }
    50% {
        border-color: #00bfff;
        box-shadow: 0 0 0 15px rgba(0, 123, 255, 0);
    }
    100% {
        border-color: #007bff;
        box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
    }
} 
/* Shared row-level leading icon (used in rows with no thumbnail background).
   Sits flex-aligned with row text; intended for .row and similar flex containers. */
.row-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    color: #666;
}

/* Popin - in-slot modal pattern (mirrors popup hierarchy) */
/* Structure: .popin > .mask + .modal > .header + .content */

.popin {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    .mask {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: -1;
    }

    .modal {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
        background: #fff;

        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px var(--tight-pad-x);
            min-height: 77.5px;
            box-sizing: border-box;
            flex-shrink: 0;
            gap: 10px;
            flex-wrap: wrap;

            > .text {
                flex-basis: 100%;
                margin: 0;
                padding: 0;
                font-size: 1rem;
                color: #666;
                line-height: 1.5;

                p {
                    margin: 0 0 4px 0;
                    &:last-child { margin-bottom: 0; }
                }
            }

            .thumb {
                width: 36px;
                height: 36px;
                border-radius: 6px;
                overflow: hidden;
                flex-shrink: 0;

                svg, img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    display: block;
                }

                &.circle {
                    border-radius: 50%;
                    background-color: var(--secondary-color);
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    svg {
                        width: 24px;
                        height: 24px;
                        color: #fff;
                    }
                }
            }

            h2 {
                margin: 0;
                font-size: 1.125rem;
                font-weight: 600;
                color: #333;
            }

            .close {
                margin-left: auto;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 28px;
                height: 28px;
                border-radius: 50%;
                background-color: #f0f0f0;
                font-size: 1.25rem;
                line-height: 1;
                padding-bottom: 2px;
                color: #999;
                cursor: pointer;
                transition: background-color 0.15s, color 0.15s;

                &:hover {
                    background-color: #e0e0e0;
                    color: #333;
                }
            }

            .action {
                flex-shrink: 0;
                padding: 6px 14px;
                border-radius: 6px;
                font-size: 0.8125rem;
                font-weight: 500;
                cursor: pointer;
                background-color: transparent;
                color: #999;
                border: 1px solid #ddd;
                margin-left: 15px;

                &:hover {
                    color: #333;
                    border-color: #999;
                }

                &.danger {
                    color: #dc3545;
                    border-color: #dc3545;

                    &:hover {
                        background-color: #dc3545;
                        color: #fff;
                    }
                }
            }

            &.gradient {
                background: linear-gradient(90deg, #fefefe 0%, #f7f7f7 50%, #fefefe 100%);
            }

            &.with-text {
                min-height: 120px;
                gap: 15px;
                padding: 25px var(--tight-pad-x);
            }

            &.loading {
                background: linear-gradient(90deg, #f8f8f8 25%, #efefef 50%, #f8f8f8 75%);
                background-size: 200% 100%;
                animation: popinLoader 2.5s ease-in-out infinite;
            }
        }

        .content {
            flex: 1;
            overflow-y: auto;
            padding: 0;
            container-type: inline-size;
        }
    }

    /* ─── Row items ─────────────────────────────────────────── */

    .row {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px var(--tight-pad-x);
        cursor: pointer;
        border-bottom: 1px solid #f0f0f0;
        border-top: 1px solid #f0f0f0;
        margin-bottom: -1px;

        &:hover {
            background-color: #f8f8f8;
        }

        &.disabled {
            cursor: default;
            opacity: 0.5;

            &:hover {
                background-color: transparent;
            }
        }

        .thumb {
            width: 40px;
            height: 40px;
            border-radius: 6px;
            overflow: hidden;
            flex-shrink: 0;

            svg, img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            &.icon {
                display: flex;
                align-items: center;
                justify-content: center;
                background: #f8f8f8;
                color: #999;


                svg {
                    width: 20px;
                    height: 20px;
                    color: #b6b6b6;
                }

                &.danger {
                    color: #dc3545;
                }
            }
        }

        .info {
            flex: 1;
            min-width: 0;
            min-height: 40px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .name {
            font-size: 1rem;
            font-weight: 600;
            color: #333;

            &.danger {
                color: #dc3545;
            }
            &.light{
                font-weight: 400;
            }
        }

        .detail {
            font-size: 0.8125rem;
            color: #999;
            font-family: monospace;
        }

        .faint {
            font-size: 0.8125rem;
            color: #bbb;
            flex-shrink: 0;
        }

        .action {
            flex-shrink: 0;
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 0.8125rem;
            font-weight: 500;
            cursor: pointer;
            background-color: transparent;
            color: #505050;
            border: 1px solid #9b9b9b;

            &:hover {
                color: #333;
                border-color: #999;
            }

            &.danger {
                color: #dc3545;
                border-color: #dc3545;

                &:hover {
                    background-color: #dc3545;
                    color: #fff;
                }
            }
        }
    }

    /* ─── Row arrow (right chevron for drill-down rows) ───── */

    .row .arrow {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        color: #ccc;
    }

    .row:hover .arrow {
        color: #999;
    }

    /* ─── Section gap (between account groups) ────────────── */

    .section-gap {
        height: 60px;
    }

    /* ─── Other account header ──────────────────────────────── */

    .other-account-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 30px var(--tight-pad-x) 5px;
        background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);
        min-height: 40px;

        .name {
            font-size: 1rem;
            font-weight: 600;
            color: #333;
        }

        .action {
            flex-shrink: 0;
            padding: 6px 14px;
            border-radius: 6px;
            font-size: 0.8125rem;
            font-weight: 500;
            cursor: pointer;
            background-color: transparent;
            color: #505050;
            border: 1px solid #9b9b9b;
            margin-left: 15px;

            &:hover {
                color: #333;
                border-color: #999;
            }
        }
    }

    /* ─── Text content blocks ───────────────────────────────── */

    .text {
        padding: 14px var(--tight-pad-x);
        margin: 10px 0;
        
        p {
            font-size: 1rem;
            color: #666;
            line-height: 1.5;
            margin: 0 0 14px 0;

            &:last-child {
                margin-bottom: 0;
            }
        }

        strong {
            color: #333;
        }
    }

    /* ─── Buttons ────────────────────────────────────────────── */

    .buttons {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 14px var(--tight-pad-x);
    }

    .button {
        display: block;
        padding: 12px;
        text-align: center;
        background-color: #404499;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 1rem;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s;

        &:hover {
            background-color: #0056b3;
        }

        &.secondary {
            background-color: #f0f0f0;
            color: #333;

            &:hover {
                background-color: #e5e5e5;
            }
        }

        &.disabled {
            opacity: 0.4;
            cursor: default;
            pointer-events: none;
        }
    }

    /* ─── Form inputs ────────────────────────────────────────── */

    .input {
        width: calc(100% - var(--tight-pad-x) * 2);
        margin: 0 var(--tight-pad-x);
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 1rem;
        box-sizing: border-box;

        &:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
        }

        &::placeholder {
            color: #999;
        }
    }

}

/* Wide layout - inline buttons when popin > 300px */
@container (min-width: 500px) {
    .popin .buttons {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Ensure mask covers dashboard-right when a popin is open */
.dashboard:has(.popin) .dashboard-right {
    z-index: -1;
}

@keyframes popinLoader {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
 /* ═══════════════════════════════════════════════════════════════
   PAGE NAV - shared navigation bar across Home, History, Art, Guide
   ═══════════════════════════════════════════════════════════════ */

.page-nav {
    padding: 20px var(--sec-gutter) 0;
    max-width: 1280px;
    margin: 0 auto;
}

.page-nav__inner {
    display: flex;
    gap: 4px;
    border-bottom: 1.5px solid #e5e8ed;
    padding-bottom: 0;
}

.page-nav__link {
    padding: 10px 20px;
    font-size: 0.92em;
    font-weight: 600;
    color: #7a8699;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1.5px;
    transition: color 0.2s, border-color 0.2s;
    user-select: none;
}

.page-nav__link:hover {
    color: #3d4a5c;
}

.page-nav__link--active {
    color: #141a21;
    border-bottom-color: #7b42b8;
}

/* Clear the fixed mobile top bar (same breakpoint as menu.css). */
@media (max-width: 900px) {
    .page-nav {
        padding-top: calc(var(--mobile-nav-height, 80px) + 20px);
    }
}

/* Mobile */
@media (max-width: 640px) {
    .page-nav {
        padding-right: 20px;
        padding-left: 20px;
        padding-bottom: 0;
        padding-top: calc(var(--mobile-nav-height, 80px) + 16px);
    }

    .page-nav__link {
        padding: 8px 14px;
        font-size: 0.85em;
    }

    /* Discord lives in the hamburger sheet on mobile */
    .page-nav__link--discord {
        display: none;
    }
}
 /* Meta page - custom overrides only. Shared styles in sections.css */

.meta {
    overflow-x: hidden;
}


/* ═══════════════════════════════════════════════════════════════
   VIEW TABS
   ═══════════════════════════════════════════════════════════════ */

.cg-view-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 32px;
}

.cg-view-tab {
    padding: 10px 24px;
    border: 1.5px solid var(--sec-border);
    border-radius: 8px;
    background: #fff;
    font-size: 0.92em;
    font-weight: 600;
    color: var(--sec-muted);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.cg-view-tab:hover {
    border-color: var(--sec-muted);
    color: var(--sec-text);
}

.cg-view-tab--active {
    background: var(--sec-accent);
    border-color: var(--sec-accent);
    color: #fff;
}

.cg-view-tab--active:hover {
    background: var(--sec-accent-hover);
    border-color: var(--sec-accent-hover);
    color: #fff;
}

.cg-view {
    display: none;
}

.cg-view--active {
    display: block;
}

.cg-view__desc {
    color: var(--sec-muted);
    line-height: 1.7;
    margin: 0 0 24px;
    max-width: 680px;
}

.cg-view__note {
    margin-top: 24px;
    font-size: 0.92em;
    color: var(--sec-faint);
    line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════
   FEATURE TRACKS
   ═══════════════════════════════════════════════════════════════ */

/* ── Tracks mode (default) - natural flex flow ── */

.cg-feature-rows .cl-track {
    display: flex;
    border: none;
    background: none;
    padding: 8px 0;
    gap: 0;
    align-items: center;
}

.cg-feature-rows .cl-track__label {
    flex-shrink: 0;
    width: 140px;
    min-width: 140px;
    font-size: 0.82em;
    font-weight: 700;
    color: var(--sec-faint);
    transition: opacity 0.4s ease;
}

.cg-feature-rows .cl-track__chain {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0;
}

.cg-feature-rows .cl-ficon[data-min] {
    position: static;
    z-index: 1;
}

.cg-feature-rows .cl-ficon--sm {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 0;
    border-color: transparent;
    background: transparent;
    white-space: nowrap;
}

.cg-feature-rows .cl-ficon--sm img {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.cg-feature-rows .cl-ficon--sm span {
    font-size: 0.82em;
    font-weight: 600;
    white-space: nowrap;
    color: var(--sec-text);
}

/* arrow between icons */
.cg-feature-rows .cl-ficon--sm::after {
    content: '\2192';
    display: inline-block;
    margin: 0 14px;
    font-size: 0.92em;
    color: var(--sec-faint);
    opacity: 0.5;
    transition: opacity 0.4s ease;
}

.cg-feature-rows .cl-ficon--last::after {
    display: none;
}

/* Special track - invisible arrow (keeps spacing) */
.cg-feature-rows .cl-ficon--special::after {
    visibility: hidden;
}

/* ── Hierarchy mode - absolute positioning ── */

.cg-allfeatures--hierarchy .cg-feature-rows .cl-track__chain {
    position: relative;
    height: 30px;
    min-height: 30px;
    display: block;
}

.cg-allfeatures--hierarchy .cg-feature-rows .cl-ficon[data-min] {
    position: absolute;
    top: 0;
    transition: left 0.6s ease;
}

.cg-allfeatures--hierarchy .cg-feature-rows .cl-ficon--sm {
    padding: 2px 8px 2px 2px;
    transition: left 0.6s ease;
    background: var(--sec-surface);
    /* center the icon image on the threshold position
       (image is 26px wide with 2px left-padding ⇒ image center is 15px from icon left) */
    transform: translateX(-15px);
}

.cg-allfeatures--hierarchy .cg-feature-rows .cl-ficon--sm::after {
    display: none;
}


/* ── Size scale + grid (hierarchy mode only) ── */

.cg-feature-rows {
    position: relative;
}

.cl-scale,
.cl-scale__grid {
    display: none;
}

.cg-allfeatures--hierarchy .cl-scale {
    display: flex;
    align-items: center;
    height: 22px;
    margin-top: 6px;
}

.cl-scale__label {
    box-sizing: border-box;
    flex-shrink: 0;
    width: 140px;
    min-width: 140px;
    padding-right: 22px;
    text-align: right;
    font-size: 0.7em;
    font-weight: 500;
    color: var(--sec-faint);
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}

.cl-scale__chain {
    position: relative;
    flex: 1;
    height: 22px;
}

.cl-scale__tick {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.7em;
    font-weight: 600;
    color: var(--sec-faint);
    opacity: 0.55;
    line-height: 1;
    pointer-events: none;
}

.cl-scale__tick--major {
    font-size: 0.82em;
    font-weight: 700;
    color: var(--sec-text);
    opacity: 0.8;
}

.cg-allfeatures--hierarchy .cl-scale__grid {
    display: block;
    position: absolute;
    top: 0;
    bottom: 28px;          /* above the scale row at the bottom */
    left: 140px;           /* skip the track-label column */
    right: 0;
    pointer-events: none;
    z-index: 0;
}

.cl-scale__line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--sec-border);
    opacity: 0.4;
}

.cl-scale__line--major {
    opacity: 0.7;
}

/* keep icons above the grid */
.cg-allfeatures--hierarchy .cg-feature-rows .cl-track {
    position: relative;
    z-index: 1;
}


/* ═══════════════════════════════════════════════════════════════
   HIERARCHY INFO
   ═══════════════════════════════════════════════════════════════ */

.cg-hierarchy-info {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.4s ease, margin 0.4s ease;
    margin-top: 0;
}

.cg-allfeatures--hierarchy .cg-hierarchy-info {
    max-height: 200px;
    opacity: 1;
    margin-top: 24px;
}

.cg-hierarchy-info p {
    font-size: 0.92em;
    color: var(--sec-faint);
    line-height: 1.6;
    margin: 0 0 16px;
    max-width: 620px;
}

.cg-hierarchy-info__tiers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cg-hierarchy-info__tier {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 16px;
    font-size: 0.78em;
    font-weight: 600;
    color: var(--tier-color);
    background: color-mix(in srgb, var(--tier-color) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--tier-color) 20%, transparent);
}

.cg-hierarchy-info__tier em {
    font-style: normal;
    font-weight: 500;
    opacity: 0.7;
}


/* ═══════════════════════════════════════════════════════════════
   ANATOMY - "How a city looks in the dashboard"
   Side-by-side: copy on the left, screenshot on the right.
   ═══════════════════════════════════════════════════════════════ */

.mt-anatomy .sec__intro {
    margin-bottom: 28px;
}

.mt-anatomy__shot {
    max-width: 420px;
    margin-left: auto;
}

.mt-anatomy__shot img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55),
                0 0 0 1px rgba(255, 255, 255, 0.06);
}

.mt-anatomy .sec-bullets {
    margin-bottom: 0;
}

.mt-anatomy .sec-bullets li {
    color: rgba(255, 255, 255, 0.72);
}

.mt-anatomy .sec-bullets strong {
    color: #fff;
    font-weight: 600;
}

@media (max-width: 860px) {
    .mt-anatomy__shot {
        max-width: 480px;
        margin: 24px auto 0;
    }

    /* ── Feature tracks: horizontal scroll on mobile ── */
    .cg-features-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        /* fade right edge to hint at scrollable content */
        -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
        mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
        /* bleed to the right gutter so the fade has somewhere to land */
        margin-right: calc(-1 * var(--sec-gutter));
        padding-right: var(--sec-gutter);
    }

    /* tighter label column to give chains more room before scroll kicks in */
    .cg-feature-rows .cl-track__label,
    .cg-feature-rows .cl-scale__label {
        width: 96px;
        min-width: 96px;
    }

    .cg-allfeatures--hierarchy .cl-scale__grid {
        left: 96px;
    }

    /* each row drives the scroll content width */
    .cg-feature-rows .cl-track,
    .cg-feature-rows .cl-scale {
        min-width: 620px;
    }
}
 :root {
    --mobile-nav-height: 80px;
}

/* ─── Sidebar widths ──────────────────────────────────────────────
   Two states. Collapsed = icon-only (with native tooltips via title attr),
   expanded = icon + label. Toggling adds/removes the label column without
   reflowing the rest of the page since the sidebar is position:fixed and the
   layout grid below holds a column for it. */
.menu {
    --sidebar-w-collapsed: 80px;
    --sidebar-w-expanded: 165px;
    --sidebar-w: var(--sidebar-w-collapsed);

    height: 65px;
    overflow: hidden;
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr 60px;
    font: bold 17px/1 Helvetica, Arial, sans-serif;
    transition: grid-template-columns 0.18s ease;

    &.menu--expanded {
        --sidebar-w: var(--sidebar-w-expanded);
    }

    .sidebar {
        /* Icon state vars - each item flips --m-fill and --m-inner via the .selected
           override below, so SVGs reference the vars unconditionally and the template
           no longer needs an if/else twin block per icon.
             --m-stroke = outer outline colour (always white)
             --m-fill   = outer fill: transparent unselected, white selected
             --m-inner  = inner detail (smile, eyes, arrow, #): white unselected so it
                          matches the outline, dark when the outer goes white so the
                          inner reads as inverted-through-the-fill. */
        --m-stroke: #fff;

        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: var(--sidebar-w);
        z-index: 30;
        overflow: hidden;
        background: image-set(
            url('/artwork/v2/1_350.avif') type('image/avif'),
            url('/artwork/v2/1_350.jpg')  type('image/jpeg')
        ) right top / cover no-repeat;
        transition: width 0.18s ease;

        &::after {
            content: '';
            position: absolute;
            inset: 0;
            backdrop-filter: blur(30px);
            background-color: rgba(0,0,0,0.4);
        }

        .items {
            position: relative;
            z-index: 2;
            padding: 25px 10px 20px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            height: 100vh;
            box-sizing: border-box;
            justify-content: space-between;

            .top-items {
                display: flex;
                flex-direction: column;
                gap: 4px;
            }

            .bottom-items {
                display: flex;
                flex-direction: column;
            }

            .item {
                /* Per-item state for the icon fill/inner pair. .selected flips both. */
                --m-fill: transparent;
                --m-inner: #fff;

                border-radius: 13px;
                padding: 10px 10px;
                display: flex;
                align-items: center;
                gap: 12px;
                color: #fff;
                text-decoration: none;
                opacity: 0.5;
                transition: opacity 0.15s, background-color 0.15s;

                &.selected {
                    opacity: 1;
                    --m-fill: #fff;
                    --m-inner: rgba(0, 0, 0, 0.75);
                }

                &:not(.selected):hover {
                    opacity: 0.85;
                }

                &[style*="display: none"] {
                    display: none;
                }

                .item-icon {
                    flex: 0 0 auto;
                    width: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .item-label {
                    font-size: 0.9375rem;
                    font-weight: 400;
                    letter-spacing: 0.5px;
                    white-space: nowrap;
                    overflow: hidden;
                    line-height: 1.3em;
                }

                svg {
                    width: 38px;
                }

                .blockie-thumb {
                    width: 38px;
                    height: 38px;
                    border-radius: 6px;
                    overflow: hidden;
                    display: block;

                    svg {
                        width: 38px;
                        height: 38px;
                        display: block;
                    }
                }
            }
        }

        /* Collapse handle. Sits on the inside-right edge of the rail, vertically centered. */
        .sidebar-toggle {
            position: absolute;
            top: 50%;
            right: 4px;
            transform: translateY(-50%);
            z-index: 3;
            width: 22px;
            height: 44px;
            padding: 0;
            border: 0;
            background: rgba(255,255,255,0.08);
            color: #fff;
            border-radius: 6px;
            cursor: pointer;
            opacity: 0.55;
            transition: opacity 0.15s, background-color 0.15s;

            &:hover {
                opacity: 1;
                background: rgba(255,255,255,0.18);
            }

            svg {
                width: 16px;
                height: 16px;
                display: block;
                margin: 0 auto;
            }
        }
    }

    /* Collapsed: hide labels, return to centered icon layout. */
    &.menu--collapsed .sidebar .items .item {
        justify-content: center;
        padding: 10px 0;

        .item-label {
            display: none;
        }
    }

    /* ─── Mobile top nav ─────────────────────────────────────────
       Hidden by default (desktop uses the left sidebar). The @media
       block below flips the visibility below 900px. Placed at the top
       so iOS Safari's collapsing bottom chrome doesn't cause the bar
       to hover over disappearing viewport. */
    .mobile-nav {
        /* Same state-driven pattern as .sidebar above (see comments there). */
        --mn-stroke: #fff;

        display: none;
        position: fixed;
        left: 0;
        right: 0;
        top: -1px;
        height: var(--mobile-nav-height);
        z-index: 40;
        background: rgba(30, 33, 42, 0.88);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(255,255,255,0.08);
        padding: 0 4px;
        padding-top: env(safe-area-inset-top, 0);
        box-sizing: content-box;
        justify-content: space-around;
        align-items: center;
        color: #fff;

        .mn-item {
            --mn-fill: transparent;
            --mn-inner: #fff;

            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
            opacity: 0.6;
            cursor: pointer;
            transition: opacity 0.15s;
            -webkit-tap-highlight-color: transparent;

            &.selected,
            &.open,
            &:active {
                opacity: 1;
            }

            &.selected {
                --mn-fill: #fff;
                --mn-inner: rgba(0, 0, 0, 0.55);
            }

            &.hidden {
                visibility: hidden;
                pointer-events: none;
            }

            /* Per-icon sizing balances the visual height across the bar. The four
               SVGs have different content extents inside their viewBoxes (hamburger
               lines occupy ~10/24 units, pin path fills ~32/32, hex shapes ~23/25),
               so a single CSS width would render them at noticeably different sizes.
               These targets pull all four to roughly the same on-screen height. */
            svg {
                width: 40px;
                height: 40px;
            }

            &.hamburger svg {
                width: 44px;
                height: 44px;
            }

            &.detail svg {
                width: 36px;
                height: 40px;
            }
        }
    }

    /* ─── Hamburger sheet ────────────────────────────────────────
       Slides up from the bottom nav. Closed state is hidden but present
       in DOM so the transform transition can animate. */
    .menu-sheet-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 39;
        background: rgba(0,0,0,0.4);

        &.open {
            display: block;
        }

        .menu-sheet {
            position: absolute;
            left: 0;
            right: 0;
            top: calc(var(--mobile-nav-height) + env(safe-area-inset-top, 0px));
            background: #fff;
            border-radius: 0 0 18px 18px;
            padding: 18px 16px 10px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.22);
            max-height: 80vh;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 8px;

            .sheet-handle {
                width: 40px;
                height: 4px;
                background: #d0d4dc;
                border-radius: 2px;
                margin: 12px auto 4px;
                flex-shrink: 0;
                order: 1;
            }

            .sheet-item {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 12px;
                min-height: 35px;
                padding: 14px 18px;
                background: #f4f6fa;
                border-radius: 12px;
                font: 600 17px/1.2 '-apple-system', BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
                color: #1f2a32;
                cursor: pointer;
                -webkit-tap-highlight-color: transparent;
                transition: background-color 0.12s, transform 0.08s;

                .sheet-item-label {
                    flex: 1;
                    min-width: 0;
                }

                .sheet-item-arrow {
                    width: 18px;
                    height: 18px;
                    flex-shrink: 0;
                    color: #8a94a6;
                }

                &:active {
                    background: #e6ebf3;
                    transform: scale(0.985);
                }

                &.selected {
                    background: #ede4f9;
                    color: #5b2a96;

                    .sheet-item-arrow {
                        color: #7b42b8;
                    }
                }
            }
        }
    }
}

@media (max-width: 900px) {
    .menu .sidebar {
        display: none;
    }

    .menu .mobile-nav {
        display: flex;
    }
} /* <picture> is a layout passthrough - the inner <img> takes over its slot in
   the parent's flow, so existing class-based image styles keep working when a
   plain <img> is upgraded to <picture><source><img></picture> by $$.picture. */
picture {
    display: contents;
}

#Menu, #Popups {
    position: fixed;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    z-index: 50;
}

/* #Main slides right by the rail's current width. Body classes are set by menu.js
   (menu-collapsed = 80px, menu-expanded = 180px); these match menu.css. */
#Main {
    margin-top: 0;
    margin-left: 80px;
    transition: margin-left 0.18s ease;
    container-type: size;
    container-name: city-panel;
}

body.menu-expanded #Main {
    margin-left: 165px;
}

body.menu-collapsed #Main {
    margin-left: 80px;
}

/* Mobile: sidebar is hidden (see menu.css @900px), so #Main reclaims the width. */
@media (max-width: 900px) {
    #Main,
    body.menu-expanded #Main,
    body.menu-collapsed #Main {
        margin-left: 0;
    }
}


:root {
    --primary-color: #3e415b;
    --secondary-color: #686ea3;
    --third-color: #b6b9d7;
    --main-font-size: 16px;

    /* Horizontal padding tokens.
       --pad-x          - standard panel padding (dashboard panels, top bars, city page)
       --tight-pad-x    - compact padding (popins, account panel)
       --scrollbar-w    - reserved width of thin scrollbar
       --*-with-scrollbar - right-side padding for scrolling elements, subtracts the
       scrollbar width so content aligns with a non-scrolling sibling above. */
    --pad-x: 7%;
    --tight-pad-x: 30px;
    --scrollbar-w: 6px;
    --pad-x-with-scrollbar:       calc(var(--pad-x)       - var(--scrollbar-w));
    --tight-pad-x-with-scrollbar: calc(var(--tight-pad-x) - var(--scrollbar-w));
}

/* @media (max-width: 1900px) { :root { --pad-x: 50px; } }
@media (max-width: 1024px) { :root { --pad-x: 25px; } }
@media (max-width:  640px) { :root { --pad-x: 15px; --tight-pad-x: 20px; } } */

/* Touch devices use overlay scrollbars that don't reserve layout space, so the
   -with-scrollbar tokens should NOT subtract any width - otherwise the scrolling
   element's right edge sits ~6px closer to the centre than its non-scrolling
   siblings. Collapse them back onto the base tokens. */
@media (pointer: coarse) {
    :root {
        --pad-x-with-scrollbar:       var(--pad-x);
        --tight-pad-x-with-scrollbar: var(--tight-pad-x);
    }
}

/* Shared thin-scrollbar styling. Add this class to any scrolling element.
   Uses --scrollbar-w so width stays in sync with the padding tokens. */
.thin-scroll {
    scrollbar-width: thin;
    scrollbar-color: #c0c0c0 transparent;
}
.thin-scroll::-webkit-scrollbar        { width: var(--scrollbar-w); }
.thin-scroll::-webkit-scrollbar-track  { background: transparent; }
.thin-scroll::-webkit-scrollbar-thumb  { background-color: #c0c0c0; border-radius: 3px; }
.thin-scroll::-webkit-scrollbar-thumb:hover { background-color: #999; }
  


/* Root font-size anchors all rem-based typography. Desktop = 16px (browser
   default no-op). On phones/tablets ≤900px we bump to 17px so every rem
   font-size scales up automatically - the same breakpoint as the menu /
   dashboard mobile switch. Use rem (not px) for new font-size declarations
   to opt into this scaling; px-sized padding/icons stay their physical size. */
html {
    font-size: 16px;
}

@media (max-width: 900px) {
    html {
        font-size: 17px;
    }
}

body {
    font: 400 1.0em/1 '-apple-system',BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
    color: #1f2a32;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: optimizeLegibility;
    background-color: #fff;
    margin: 0;
    padding: 0;
    /* overflow-y: hidden; */
    overflow-x: hidden;
    overflow-anchor: none;
}


h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.46em;
}

h4 {
    font-size: 1.25em;
}

h5 {
    font-size: 1.1em;
}

h6 {
    font-size: 1em;
}

code {
    cursor: pointer;
    color: #058cc4;
    font-family: inherit;
}

 
.super_input {
    position: relative;
    display: flex;
    align-items: center;

    label {
        position: absolute;
        top: 8px;
        left: 12px;
        font-size: 0.75rem;
        color: #666;
        /* background: white; */
        padding: 0;
        z-index: 2;
        pointer-events: none;
        &.warn{
            color: #ff0000;
        }
        &.good{
            color: #76b116;
        }
    }

    input {
        flex: 1;
        padding: 30px 85px 10px 12px;
        width: 100%;           
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 1rem;
        box-sizing: border-box;

        &:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
        }

        &::placeholder {
            color: #999;
        }

        &:invalid{
            color: #ff0000;      
        }
    }

    button {
        position: absolute;
        right: 10px;
        top: 12px;
    
        padding: 8px 0;
        width: 65px;
        background-color: #0056b3;
        color: white;
        border: none;
        border-radius: 4px;
        font-size: 0.875rem;
        font-weight: 500;
        cursor: pointer;
        white-space: nowrap;
        transition: background-color 0.2s;
        z-index: 1;
        bottom: 12px;

        &:hover {
            background-color: #034a96;
        }
        &.shadow{
            opacity: 0.05;
            filter: grayscale(1);
            color: #666;
            cursor: default;
        }
        &.faded{
            opacity: 0.15;
            filter: grayscale(1);
            color: #fff;            
        }
        &.calling{
            opacity: 0.25;            
            background: linear-gradient(90deg, #dedede 25%, #b1b1b1 50%, #dedede 75%);
            background-size: 200% 100%;
            animation: callingLoader 1.5s ease-in-out infinite;
            cursor: default;
            color: transparent;
        }
    }

    .icons{

        .tick {
            position: absolute;
            right: 29px;
            top: 19px;
            z-index: 2;
            display: inline-block;           
            color: #cdcdcd;
            font-weight: bold;
            font-size: 1rem;
            border-radius: 20px;
            background: #fff;
            padding: 3px 6px;           
            pointer-events: none;                   
            opacity: 1;
            transform: scale(1);
            visibility: visible;
            animation: tickBounce 0.5s ease forwards;                    
        }
    }
}            

@keyframes tickBounce {
    0% {                
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
    /* 100% {
        transform: scale(0.5);
        opacity: 0;
    } */
}

@keyframes callingLoader {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
} /* Home page - custom overrides only. Shared styles in sections.css */

.home {
    overflow-x: hidden;
}


/* ═══════════════════════════════════════════════════════════════
   ART FRAMES
   ═══════════════════════════════════════════════════════════════ */

.art-frame {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--sec-radius);
    overflow: hidden;
    background: var(--sec-surface);

    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.art-frame.visible {
    opacity: 1;
    transform: translateY(0);
}

.art-frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--sec-radius);
    transition: opacity 1.2s ease;
}

.art-frame img.fade-out { opacity: 0; }
.art-frame img.fade-in  { opacity: 1; }


/* ═══════════════════════════════════════════════════════════════
   HERO ART - custom widget layout
   ═══════════════════════════════════════════════════════════════ */

.hp-hero__art {
    display: grid;
    grid-template-columns: 1fr 130px;
    gap: 24px;
    align-items: center;
    position: relative;
}

.hp-hero__art-main.art-frame {
    aspect-ratio: 1;
    width: 100%;
    border-radius: var(--sec-radius);
    grid-row: 1;
}

.hp-hero__art-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.art-frame--side {
    aspect-ratio: 1;
    border-radius: var(--sec-radius-sm);
}

/* Stagger side thumbnails */
.hp-hero__art-side .art-frame:nth-child(1) { transition-delay: 0.1s; }
.hp-hero__art-side .art-frame:nth-child(2) { transition-delay: 0.2s; }
.hp-hero__art-side .art-frame:nth-child(3) { transition-delay: 0.3s; }


/* ═══════════════════════════════════════════════════════════════
   GET STARTED - three step cards
   ═══════════════════════════════════════════════════════════════ */

.hp-getstarted {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sec-card-gap);
    text-align: left;
    counter-reset: step;
}

.hp-getstarted__step {
    display: flex;
    flex-direction: column;
    gap: 12px;
    counter-increment: step;
}

.hp-getstarted__step h3 {
    font-size: var(--sec-type-h3);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.hp-getstarted__step h3::before {
    content: counter(step);
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    padding-bottom: 2px;
    border-radius: 50%;
    background: var(--sec-accent);
    color: #fff;
    font-size: 0.85em;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.hp-getstarted__step p {
    color: var(--sec-muted);
    line-height: 1.55;
    margin: 0;
    flex: 1;
}

.hp-getstarted__step .sec-btn {
    align-self: flex-start;
    margin-top: 4px;
}

@media (max-width: 860px) {
    .hp-getstarted {
        grid-template-columns: 1fr;
    }
}


/* ═══════════════════════════════════════════════════════════════
   REIMAGINED ART - cinematic widget layout
   ═══════════════════════════════════════════════════════════════ */

.hp-reimagined__art {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.art-frame--cinematic {
    aspect-ratio: 0.8;
    border-radius: var(--sec-radius-sm);
    background: rgba(255,255,255,0.06);
}

.art-frame--cinematic .art-frame {
    aspect-ratio: 0.8;
    width: 100%;
    height: 100%;
}

.hp-reimagined__art .art-frame:nth-child(2) { transition-delay: 0.1s; }
.hp-reimagined__art .art-frame:nth-child(3) { transition-delay: 0.2s; }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE - custom components only
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .hp-hero__art {
        grid-template-columns: 1fr 120px;
    }
}

@media (max-width: 860px) {
    .hp-hero__art {
        grid-template-columns: 1fr 110px;
        max-width: 520px;
    }
}

@media (max-width: 560px) {
    /* Hero art: stack thumbnails below on small phones */
    .hp-hero__art {
        grid-template-columns: 1fr;
        max-width: none;
    }

    .hp-hero__art-side {
        flex-direction: row;
    }
}
 /* ═══════════════════════════════════════════════════════════════
   HISTORY PAGE - Custom components only
   Shared section styles live in sections.css
   ═══════════════════════════════════════════════════════════════ */

.history {
    overflow-x: hidden;
}


/* ═══════════════════════════════════════════════════════════════
   VERTICAL TIMELINE (hero right column)
   ═══════════════════════════════════════════════════════════════ */

.hy-hero__timeline {
    padding-top: 8px;
}

.hy-vtl {
    position: relative;
    padding: 8px 0;
}

.hy-vtl__line {
    position: absolute;
    top: 35px;
    bottom: 40px;
    left: 11px;
    width: 2px;
    background: var(--sec-border);
    border-radius: 1px;
}

.hy-vtl__node {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 14px 0;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s;
}

.hy-vtl__dot {
    position: relative;
    margin-top: 9px;
    z-index: 1;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--sec-border);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.hy-vtl__node:hover .hy-vtl__dot {
    border-color: var(--sec-accent);
}

.hy-vtl__node--major .hy-vtl__dot {
    background: var(--sec-accent);
    border-color: var(--sec-accent);
    box-shadow: 0 0 0 4px rgba(123, 66, 184, 0.12);
}

.hy-vtl__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 1px;
}

.hy-vtl__date {
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sec-faint);
    line-height: 1.2;
}

.hy-vtl__node--major .hy-vtl__date {
    color: var(--sec-accent);
}

.hy-vtl__label {
    font-size: 0.94em;
    font-weight: 600;
    color: var(--sec-text);
    line-height: 1.35;
}

.hy-vtl__node:hover .hy-vtl__label {
    color: var(--sec-accent);
}


/* ═══════════════════════════════════════════════════════════════
   "WHAT SHAPED THE DESIGN" grid
   ═══════════════════════════════════════════════════════════════ */

.hy-design__shaped {
    margin-top: 56px;
}

.hy-design__shaped-heading {
    font-size: 0.72em;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sec-faint);
    margin: 0 0 20px;
}

.hy-design__shaped-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.hy-design__shaped-grid p {
    color: var(--sec-muted);
    font-size: 0.93em;
    line-height: 1.65;
    margin: 0;
    padding-top: 14px;
    border-top: 2px solid var(--sec-accent);
}


/* ═══════════════════════════════════════════════════════════════
   DISCOVERY SNAKE (S-curve tile grid)
   ═══════════════════════════════════════════════════════════════ */

.hy-discovery-snake {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
}

.hy-discovery-snake__grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    justify-items: center;
    row-gap: 0;
    column-gap: 12px;
}

.hy-discovery-snake__tile {
    width: 180px;
    height: 180px;
    border-radius: 14px;
    overflow: hidden;
}

.hy-discovery-snake__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hy-discovery-snake__connector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #9ca7ba;
    font-size: 2.6em;
    line-height: 1;
    padding: 0 4px;
}

.hy-discovery-snake__connector--down {
    padding: 8px 0;
}

.hy-discovery-snake__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9ca7ba;
}

/* ═══════════════════════════════════════════════════════════════
   WRAPPING THUMBNAILS (ERC721 section)
   ═══════════════════════════════════════════════════════════════ */

.hy-wrapping__thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--sec-radius-sm);
    overflow: hidden;
}

.hy-wrapping__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE - custom components only
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
    .hy-design__shaped {
        margin-top: 36px;
    }

    .hy-design__shaped-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }

    .hy-discovery-snake {
        padding-top: 24px;
    }

    .hy-discovery-snake__tile {
        width: 140px;
        height: 140px;
    }
}

@media (max-width: 560px) {
    .hy-vtl__node {
        padding: 10px 0;
    }

    .hy-design__shaped {
        margin-top: 28px;
    }

    .hy-design__shaped-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .hy-discovery-snake__tile {
        width: 110px;
        height: 110px;
    }

    .hy-discovery-snake__connector {
        font-size: 2em;
    }
}
 /* Help-dot - small "(?)" badge in a faded circle. Clickable, navigates via the
   SPA router. Used in the dashboard / accounts / city panel to point at the
   relevant explainer anchor on the home docs.

   The matching .filter-title-clear-circle uses the same circle so the clear
   "×" and the "?" can sit side by side without looking mismatched. */

.help-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: #9a9a9a;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
    text-decoration: none;
}

.help-dot:hover {
    background: rgba(0, 0, 0, 0.12);
    color: #555;
}


/* Doc-link - subtle inline text link inside long-form docs. Reads as part of
   the surrounding sentence; underlined, no colour change so it doesn't draw
   the eye away from the reading flow. */

.doc-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: text-decoration-color 0.15s ease, opacity 0.15s ease;
}

.doc-link:hover {
    text-decoration-color: currentColor;
    opacity: 0.85;
}

/* On dark sections (sec--dark, atmospheric) the underline needs to be lighter
   to stay visible against the lighter text. */
.sec--dark .doc-link,
.sec--dark-alt .doc-link,
.atmospheric .doc-link {
    text-decoration-color: rgba(255, 255, 255, 0.45);
}
 /* ============================================
   FORMS - reusable form layout and elements
   ============================================ */

/* Vertical centering wrapper - place around .form to center it in a flex/grid parent */
.form-center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* Form container */
.form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
    padding: 60px 40px;
    box-sizing: border-box;

    /* Header */
    h2 {
        font-size: 1.6rem;
        font-weight: 600;
        margin: 0;
        color: #1a1a1a;
    }

    /* Description */
    p {
        color: #666;
        margin: 0;
        line-height: 1.5;
    }

    /* Input fields */
    .input {
        width: 100%;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 1rem;
        box-sizing: border-box;

        &:focus {
            outline: none;
            border-color: #007bff;
            box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
        }

        &::placeholder {
            color: #999;
        }
    }

    /* Field group - stacks inputs with tighter gap */
    .fields {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* Button */
    .button {
        text-align: center;
        width: 100%;
        padding: 10px;
        background-color: #404499;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s;

        &:hover {
            background-color: #0056b3;
        }

        span, img {
            vertical-align: text-bottom;
        }

        .icon {
            margin-right: 7px;
        }

        .thumb {
            height: 20px;
            width: 20px;
            margin-right: 10px;
            object-fit: contain;
            display: inline-block;
        }

        &.grey {
            background-color: #666;
        }

        &.pale {
            background-color: #aaabbb;
        }

        &.disabled {
            opacity: 0.25;
            cursor: default;
            filter: grayscale(0.5);
        }
    }

    /* Separator - "or" divider between sections */
    .separator {
        display: flex;
        align-items: center;
        gap: 15px;
        margin: 10px 0;

        .line {
            flex: 1;
            height: 1px;
            background-color: #ddd;
        }

        .or {
            color: #666;
            font-size: 0.875rem;
            font-weight: 500;
        }
    }

    /* Feedback message */
    .feedback {
        font-size: 0.875rem;
        padding: 10px 14px;
        border-radius: 8px;
        display: none;

        &.error {
            display: block;
            background-color: #fff0f0;
            color: #c0392b;
            border: 1px solid #f5c6cb;
        }

        &.success {
            display: block;
            background-color: #f0fff4;
            color: #27ae60;
            border: 1px solid #c3e6cb;
        }

        &.info {
            display: block;
            background-color: #f0f4ff;
            color: #2c5282;
            border: 1px solid #bee3f8;
        }
    }
}
 /* Filter title - one-line summary above the cities list. Driven by the
   dashboard from current route + filter state. Sits between the top-bar
   widget and the scrollable cities content; aligns horizontally with
   the cities list (--pad-x left, --pad-x-with-scrollbar right). */

.filter-title {
    padding: 20px var(--pad-x) 20px var(--pad-x);
    font-size: 1.375rem;
    font-weight: 600;
    color: #222;
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    line-height: 30px;

    &.empty {
        display: none;
    }

    .filter-title-text {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .filter-title-chips {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;

        img {
            width: 26px;
            height: 26px;
            object-fit: contain;
            display: block;
            border-radius: 50px;
        }
    }

    /* Help dot sits at the far right of the row - after the chips and the
       clear × - with a clear gap so it reads as a separate affordance from
       the clear button. Uses the shared .help-dot styling from helpers.css. */
    .filter-title-help {
        margin-left: 4px;
    }

    /* When the clear × is present, the help dot sits after it with extra
       breathing room so the two circles don't read as a pair. */
    .filter-title-clear + .filter-title-help {
        margin-left: 14px;
    }

    /* Clear ×, restyled as a circle that matches the help-dot so they
       sit side by side cleanly. The × is an SVG so it actually centers
       in the circle (the unicode glyph drifts off the optical centre). */
    .filter-title-clear {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.06);
        color: #9a9a9a;
        cursor: pointer;
        user-select: none;
        flex-shrink: 0;
        transition: background-color 0.15s ease, color 0.15s ease;
        margin-left: 6px;

        svg {
            width: 10px;
            height: 10px;
            display: block;
        }

        &:hover {
            background: rgba(0, 0, 0, 0.12);
            color: #555;
        }
    }

    /* Dummy search affordance - looks like an input bar but is a plain div.
       Clicking it bubbles to the parent (dashboard) which opens the real
       search widget as a full-panel overlay. Auto-pushes itself to the right
       so it sits opposite the title regardless of how many chips are present. */
    .filter-title-search {
        margin-left: auto;
        flex-shrink: 0;
        min-width: 50px;
        max-width: 150px;
        width: 17%;
        height: 38px;
        padding: 0 14px;
        display: flex;
        align-items: center;
        border: 1px solid #ddd;
        border-radius: 8px;
        background: #fff;
        font-size: 0.9375rem;
        font-weight: 400;
        color: #999;
        cursor: text;
        user-select: none;
        transition: border-color 0.15s ease, background-color 0.15s ease;

        &:hover {
            border-color: #bbb;
            background: #fafafa;
        }
    }
}
 /* Epic Art - drop-in widget that fills its parent with cover-fitted art */

.epic-art {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.epic-art img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: opacity 1.2s ease;
}

.epic-art img.fade-out { opacity: 0; }
.epic-art img.fade-in  { opacity: 1; }
 /* Discord page - custom overrides only. Shared styles in sections.css */

.dc-hero__screenshot {
    display: block;
    text-decoration: none;
    transition: transform 0.25s ease;
}

.dc-hero__screenshot .browser-frame {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dc-hero__screenshot:hover .browser-frame {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

@media (max-width: 860px) {
    .dc-hero__screenshot {
        max-width: 560px;
        margin: 0 auto;
    }
}
 /* Dashboard - two-panel layout */

.dashboard {
    display: grid;
    grid-template-columns: var(--list-left-width, 1fr) var(--list-right-width, 1fr);
    height: 100vh;
    overflow: hidden;
}

/* 40/60 split - static, 500px minimum on the left.
   Used by single-task pages (signin, account) that omit .drag-divider. */
.dashboard.split-60 {
    grid-template-columns: minmax(500px, 2fr) 3fr;
}

/* Hide body scrollbar when dashboard is active */
body:has(.dashboard) {
    overflow: hidden;
}

/* Prevent text selection while dragging */
.dashboard.resizing {
    user-select: none;
    cursor: col-resize;
}

.dashboard.resizing .drag-divider {
    opacity: 1;
    background: #0078d4;
}

/* Left panel */
.dashboard-left {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100vh;
    container-type: inline-size;
    container-name: city-list;
}

/* Top bar - fixed at top of left panel */
.dashboard-left .top-bar {
    flex-shrink: 0;
}

/* Content - scrollable area below top bar. Scrollbar styling comes from
   .thin-scroll (applied in HTML). */
.dashboard-left .content {
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
}

/* Right panel - no panel-level scroll. Widgets mounted inside must manage
   their own scrolling on a header+content structure. */
.dashboard-right {
    position: relative;
    container-type: size;
    container-name: city-panel;
    height: 100vh;
    /* border-left: 1px solid #e0e0e0; */
}

/* Draggable divider - overlays left edge of right panel */
.drag-divider {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 10px;
    cursor: col-resize;
    background: transparent;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.2s;
}

.drag-divider:hover,
.drag-divider.dragging {
    opacity: 1;
    background: #0078d4;
}

/* Cover image - fills panel, crops to fit */
.dashboard .cover-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ─── Mobile: single-panel view, page-level scroll ─────────────
   Only applies when data-view is set (i.e. the actual dashboard
   widget). Other .dashboard pages - signin, account, etc. - are
   untouched. The list/detail switch is driven by the global menu
   bar at the top, so only that one bar's height is reserved.

   On mobile we drop the per-panel scroll containers and let the
   body scroll naturally - one long page instead of a header pinned
   above an internally-scrolling list, which is the expected pattern
   for thumb-driven browsing. */
@media (max-width: 900px) {
    /* Lift the desktop body lock so the page can scroll. The lock only matters
       when the dashboard's panels own their own scroll. */
    body:has(.dashboard[data-view]) {
        overflow: visible;
    }

    .dashboard[data-view] {
        grid-template-columns: 1fr;
        height: auto;
        min-height: calc(100dvh - var(--mobile-nav-height, 80px));
        margin-top: var(--mobile-nav-height, 80px);
        overflow: visible;
    }

    .dashboard[data-view] .dashboard-left,
    .dashboard[data-view] .dashboard-right {
        height: auto;
        overflow: visible;
    }

    /* container-type: size on the right panel pins it to its containing block's
       height. With page-scroll we want it to grow with its child, so drop the
       size container (no rules currently query city-panel anyway). */
    .dashboard[data-view] .dashboard-right {
        container-type: normal;
    }

    /* Inner scroll container becomes a passthrough - content flows into the page.
       clip-path replaces the desktop overflow: hidden at the top only: the brick
       layout in cities.css lifts the first card row by -100%/etc. of its own
       height, and without clipping that row would paint over the filter title
       and sets widget above. The negative bottom inset keeps the page scroll
       working - cards extending below still render. */
    .dashboard[data-view] .dashboard-left .content {
        overflow: visible;
        flex: none;
        clip-path: inset(0 0 -100vh 0);
    }

    .dashboard[data-view="list"] .dashboard-right {
        display: none;
    }

    .dashboard[data-view="city"] .dashboard-left {
        display: none;
    }

    .dashboard[data-view] .drag-divider {
        display: none;
    }

    /* split-60 pages (signin, account) have no data-view toggle - just collapse
       to the left panel and hide the right image column. */
    .dashboard.split-60 {
        grid-template-columns: 1fr;
    }

    .dashboard.split-60 .dashboard-right {
        display: none;
    }
}
 /* Collecting page - custom overrides only. Shared styles in sections.css */

.collecting {
    overflow-x: hidden;
}


/* ═══════════════════════════════════════════════════════════════
   HERO CARDS - three-step path overview
   ═══════════════════════════════════════════════════════════════ */

.cl-hero-cards {
    margin-top: 56px;
}

.cl-rare-cards {
    margin-top: 40px;
}

.cl-rare-cards .tile {
    display: flex;
    flex-direction: column;
}

.cl-rare-cards .tile__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.cl-rare-cards .tile__body p {
    margin-bottom: 24px;
}

.cl-rare-cards .tile__body .sec-btn {
    margin-top: auto;
    align-self: flex-start;
}


/* ═══════════════════════════════════════════════════════════════
   SIMPLE TWO-COLUMN LIST - SVG + title, no cards
   ═══════════════════════════════════════════════════════════════ */

.cl-list {
    list-style: none;
    padding: 0;
    margin: 32px 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: 48px;
    row-gap: 4px;
    max-width: 1100px;
}

.cl-list__item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--sec-border);
}

.cl-list__item svg {
    width: 22px;
    height: 22px;
    color: var(--sec-accent);
    flex-shrink: 0;
}

.cl-list__item span {
    font-size: 1em;
    font-weight: 600;
    color: var(--sec-strong, #111);
}


/* ═══════════════════════════════════════════════════════════════
   SECTION SCREENSHOT - browser-frame wrapper + caption
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   RARITY CAN CHANGE - split layout: bullets on left, demo card on right
   ═══════════════════════════════════════════════════════════════ */

.cl-rarity-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cl-rarity-bullets li {
    position: relative;
    padding-left: 28px;
    color: var(--sec-muted);
    line-height: 1.6;
    font-size: 1em;
}

.cl-rarity-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--sec-accent);
    opacity: 0.85;
}

.cl-rarity-bullets li::after {
    content: '';
    position: absolute;
    left: 4px;
    top: calc(0.55em + 4px);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}

.cl-rarity-bullets strong {
    color: var(--sec-strong, #111);
    font-weight: 700;
    margin-right: 4px;
}



/* ═══════════════════════════════════════════════════════════════
   RARITY DEMO - reuses .city-page-tag from cities.css. Activates the
   bar + stats view inline (without needing .city-page.stats-mode parent,
   which would set height:100vh and break body scroll).
   ═══════════════════════════════════════════════════════════════ */

.cl-rarity-demo {
    margin: 0;
    margin-top: 62px;
}

.cl-rarity-demo__city {
    margin: 0 0 16px;
    font-size: 1.1em;
    font-weight: 700;
    color: var(--sec-strong, #111);
    letter-spacing: -0.01em;
}

.cl-rarity-demo .city-page-tags {
    margin-bottom: 0;
}

/* Larger, more legible tags for the marketing context. Names visible by default
   (so you can read "Commerce 5" rather than seeing an anonymous 90px pill), with
   the rarity bar always visible behind the text to show contribution.

   Selectors chain .city-page-tags to outrank cities.css (which loads AFTER
   collecting.css, so equal-specificity rules there would otherwise win). */
.cl-rarity-demo .city-page-tags .city-page-tag {
    height: 28px;
    padding: 4px 14px 4px 4px;
    font-size: 0.875rem;
    gap: 10px;
}

.cl-rarity-demo .city-page-tags .city-page-tag .icon,
.cl-rarity-demo .city-page-tags .city-page-tag .size-icon {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
}

/* Stronger dark tint so white text reads on bright city backgrounds (e.g. desert cities). */
.cl-rarity-demo .city-page-tags .city-page-tag::after {
    background: rgba(0, 0, 0, 0.55);
}
.cl-rarity-demo .city-page-tags .city-page-tag:hover::after {
    background: rgba(0, 0, 0, 0.75);
}

/* Bars always on, sitting behind the names. */
.cl-rarity-demo .city-page-tags .city-page-tag .bar {
    width: var(--bar-pct, 0%);
    opacity: 1;
    transition: none;
}
.cl-rarity-demo .city-page-tags .city-page-tag.blue::after {
    background: rgba(33, 150, 243, 0.95);
}

/* Hover swaps to the count ("15 cities") so users can see how scarce the trait is. */
.cl-rarity-demo .city-page-tags .city-page-tag.tag-preview .text-normal {
    visibility: hidden;
}
.cl-rarity-demo .city-page-tags .city-page-tag.tag-preview .text-stats {
    visibility: visible;
}

/* ═══════════════════════════════════════════════════════════════
   "BUILD A COMPLETE SET" SPLIT - left column of explainer text,
   right column of stacked SetDemo widgets. Each widget reuses the
   .yours-set classes from yours.css so visuals match the dashboard
   exactly; the overrides strip dashboard-only padding/container
   queries that don't apply on a marketing page.
   ═══════════════════════════════════════════════════════════════ */

.cl-sets-split {
    margin-top: 48px;
    align-items: start;
}

/* Left column - vertical stack of conceptual mini-sections */
.cl-set-explainers {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.cl-set-explainer {
    border-left: 3px solid var(--sec-accent);
    padding: 4px 0 4px 18px;
}

.cl-set-explainer h3 {
    margin: 0 0 8px;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--sec-strong, #111);
    line-height: 1.3;
}

.cl-set-explainer p {
    margin: 0;
    color: var(--sec-muted);
    line-height: 1.65;
    font-size: 0.95em;
}

/* Right column - stacked set demos with arrow connectors. The container-type
   lets the 10-tile row collapse to 5×2 when the column itself is narrow,
   regardless of viewport width (handles the awkward 860-1100px range where
   the split is still active but the right column is < 600px). */
.cl-set-demos {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    container-type: inline-size;
}

.cl-set-demos__item {
    width: 100%;
}

.cl-set-demos__arrow {
    align-self: center;
    width: 28px;
    height: 28px;
    margin: 14px 0;
    color: var(--sec-faint);
    flex-shrink: 0;
}

/* Override .yours-set defaults (which assume the dashboard panel context). */
.cl-set-demo.yours-set {
    padding: 0;
    background: transparent;
}

.cl-set-demo .yours-set-slots {
    grid-template-columns: repeat(10, minmax(35px, 1fr));
}

/* Container query: collapse to 5×2 when the demo column is narrow. */
@container (max-width: 580px) {
    .cl-set-demo .yours-set-slots {
        grid-template-columns: repeat(5, minmax(35px, 1fr));
    }
}


/* ═══════════════════════════════════════════════════════════════
   TIER LADDER - foundation → apex set progression
   ═══════════════════════════════════════════════════════════════ */

.cl-sets__ladder {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 32px;
}

/* Inline variant - five tier cards in a row (no longer in a sticky right column). */
.cl-sets__ladder--inline {
    position: static;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-top: 32px;
}

.cl-tier-card {
    background: #fff;
    border: 1px solid var(--sec-border);
    border-radius: var(--sec-radius-sm, 12px);
    padding: 20px;
    transition: border-color 0.25s, box-shadow 0.25s;
}

.cl-tier-card:hover {
    border-color: #c0c8d4;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.cl-tier-card__title {
    font-size: 0.95em;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--sec-strong, #111);
}

.cl-tier-card__rule {
    font-size: 0.82em;
    color: var(--sec-faint);
    margin: 0 0 12px;
    line-height: 1.4;
}

.cl-tier-card__mosaic {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

/* Level tiles - numbered, grey-to-purple spectrum */
.cl-tile {
    aspect-ratio: 1;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    font-weight: 800;
}

.cl-tile--1 { background: #dfe3ea; color: #9ca3af; }
.cl-tile--2 { background: #c0c5cf; color: #6b7280; }
.cl-tile--3 { background: #d4c4ec; color: #7b42b8; }
.cl-tile--4 { background: #b59dd6; color: #5b2e94; }
.cl-tile--5 { background: #7b42b8; color: #fff; }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    .cl-list {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        grid-auto-flow: row;
    }
}

@media (max-width: 860px) {
    .cl-hero-cards { margin-top: 32px; }
    .cl-rare-cards { margin-top: 24px; }
    .cl-rarity-demo { margin-top: 36px; }
    .cl-sets-split { margin-top: 32px; }
    .cl-sets__ladder--inline { margin-top: 24px; }
}

@media (max-width: 560px) {
    .cl-hero-cards { margin-top: 24px; }
    .cl-rarity-demo { margin-top: 28px; }
    .cl-sets-split { margin-top: 24px; }
}

@media (max-width: 860px) {
    .cl-sets__ladder {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .cl-sets__ladder--inline {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .cl-sets__ladder,
    .cl-sets__ladder--inline {
        grid-template-columns: 1fr;
    }
}
 /* ============================================
   CITIES - All city-related UI styles

   Sections:
     1. CITIES LIST   - .city_cards grid + skeletons (staggered brick layout)
     2. CITY CARD     - .city_card item rendered inside the list
     3. CITY PANEL    - .city-page right-hand full-city view
   ============================================ */


/* ============================================
   1. CITIES LIST
   ============================================ */

/* Staggered brick layout - columns set via --cols CSS variable */
.city_cards {
    display: grid;
    grid-template-columns: repeat(var(--cols, 1), 1fr);
    gap: 20px;
    padding: 16px var(--pad-x-with-scrollbar) 16px var(--pad-x);
    justify-items: center;
    /* overflow: hidden; */
}

/* Skeleton placeholders */
.skeleton {
    width: 100%;
    max-width: 350px;
    aspect-ratio: 1;
    padding-bottom: 43px;
    border-radius: 10px;
    background-color: #f8f9fa;
}

/* Stagger pattern: columns offset vertically for a brick effect */
/* Pattern: col1 = -100%, col2 = -50%, col3 = -75%, repeating */

.city_cards.cols-2 > :nth-child(2n+1) { transform: translateY(-100%); }
.city_cards.cols-2 > :nth-child(2n+2) { transform: translateY(-50%); }

.city_cards.cols-3 > :nth-child(3n+1) { transform: translateY(-100%); }
.city_cards.cols-3 > :nth-child(3n+2) { transform: translateY(-50%); }
.city_cards.cols-3 > :nth-child(3n+3) { transform: translateY(-75%); }

.city_cards.cols-4 > :nth-child(4n+1) { transform: translateY(-100%); }
.city_cards.cols-4 > :nth-child(4n+2) { transform: translateY(-50%); }
.city_cards.cols-4 > :nth-child(4n+3) { transform: translateY(-75%); }
.city_cards.cols-4 > :nth-child(4n+4) { transform: translateY(-103%); }

.city_cards.cols-5 > :nth-child(5n+1) { transform: translateY(-100%); }
.city_cards.cols-5 > :nth-child(5n+2) { transform: translateY(-50%); }
.city_cards.cols-5 > :nth-child(5n+3) { transform: translateY(-75%); }
.city_cards.cols-5 > :nth-child(5n+4) { transform: translateY(-103%); }
.city_cards.cols-5 > :nth-child(5n+5) { transform: translateY(-35%); }

/* Keeping the brick transforms on mobile by themselves would let the
   rising first row paint over the sets widget / filter title, because on
   mobile .content has overflow: visible (page-scroll). The desktop layout
   doesn't have this problem - .content has overflow: hidden and clips the
   rise at its top edge. Replicate the same one-sided clipping with
   clip-path: the inset clips at the top/sides, the large negative bottom
   value lets cards keep flowing into the page below. */


/* ============================================
   2. CITY CARD
   ============================================ */

.city_card{
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    isolation: isolate;
    font-size: 0;
    transition: .3s;
    line-height: 1;
    width: 100%;
    max-width: 350px;
    cursor: pointer;
    aspect-ratio: 1;
    padding-bottom: 38px;

    &.selected{
        box-shadow: 0 0 12px 6px #906ec3;
        filter: saturate(1);
        opacity: 1;

        .footer{
            .title{
                opacity: 1;
            }
        }
    }

    /* &:hover {
        filter: saturate(1);
        opacity: 1;
    } */

    .image{
        width: 100.1%;
        height: 100%;
        object-fit: cover;
        display: block;
        box-shadow: none;
    }

    .flipped_image{
        width: 100%;
        display: block;
        transform: scaleY(-1);
    }

    .footer{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 38px;
        overflow: hidden;
        background-color: #393939; /* safety net: blends any sub-pixel gap around the flipped image */
    }

    /* <picture> defaults to display:inline; in Safari the inline baseline can
       leave a sub-pixel gap above the block <img> inside, leaking the page
       background through the translucent .info backdrop-filter. */
    .footer picture{
        display: block;
    }

    .info{
        backdrop-filter: blur(12px);
        background-color: #0000003d;

        position: absolute;
        bottom:-1px;
        left: 0;
        right: 0;
        height: 39px;

        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        padding: 0 10px 1px;
    }

    .title{
        font-size: 1rem;
        font-weight: bold;
        color: #ffffff;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        line-height: 38px;
        padding-left: 10px;
        opacity: 0.5;
        min-width: 0;
    }

    .country{
        width: 22px;
        height: 22px;
        border-radius: 5px;
        object-fit: cover;
        flex-shrink: 0;
    }

    .country.wand{
        color: white;
        opacity: 0.5;
    }

    /* Tag - text variant. All tags are hollow; the optional color modifier
       picks the border + text color. Opacity is fixed so the tag doesn't
       shift on card hover. */
    .tag{
        margin-left: 10px;
        font-size: 0.6875rem;
        font-weight: 600;
        border-radius: 7px;
        white-space: nowrap;
        line-height: 1.4;

        &.hollow{
            background: transparent;
            color: #ffffff94;
            border: 1px solid currentColor;
            padding: 1px 7px 2px;

            text-shadow: 0 0 2px #00000069;
            box-shadow: 0 0 6px #00000029;
            background: #0000001f;

            &.blue{
                color: #81b7e1;
                
            }

            &.light{
                color: #a0a0a0;
            }
        }
    }

    /* Icon row - replaces the text tag for set_track / features behaviors.
       All icons render at one fixed size; level is conveyed in the panel
       click-through. */
    .tag-icons{
        margin-left: 10px;
        display: flex;
        align-items: center;
        gap: 4px;

        .feature-icon{
            flex-shrink: 0;
            object-fit: contain;
            width: 22px;
            height: 22px;
        }
    }

    /* Info-panel tint variants. Purple = "ours and noteworthy" (in a set,
       or just owned, depending on behavior). */
    &.tint-purple .info{
        background-color: #72257f80;
    }

    /* Washed-out treatment - used in set_track for non-yours cities and in
       browsing for non-ERC721 cities. Filter is scoped to the artwork only
       so the info-panel text, the tag, and the card's box-shadow stay crisp.
       Hover restores full colour. */
    &.washed-out{
        .image{
            filter: grayscale(0.75) brightness(1.05) opacity(0.75);
        }

        /* &:hover .image, &:hover .flipped_image{
            filter: none;
        } */
    }

    .badge{
        position: absolute;
        bottom: 10px;
        right: 9px;
        padding: 3px 5px 5px;
        border-radius: 6px;
        font-size: 0.75rem;
        font-weight: bold;
        transition: .3s;
        color: #fff;
        border: 2px solid transparent;
    }
}


/* ============================================
   3. CITY PANEL - full-screen city view
   ============================================ */

/* Single-column centered layout with scrollable content */
.city-page {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #f9f9f9;
    overflow: hidden;
    container: city-page / size;
}

/* On mobile the dashboard collapses to a single panel, so the grey panel
   background reads as a stray band against the white page above and below.
   Match the page colour instead. */
@media (max-width: 900px) {
    .city-page {
        background: #fff;
    }
}

/* Hide body scrollbar when city page is active */
body:has(.city-page) {
    overflow: hidden;
}

/* Fixed header at top */
.city-page .top-bar {
    flex-shrink: 0;
    padding: 10px var(--pad-x);
}

/* Scrollable content area. Scrollbar styling comes from .thin-scroll
   (applied in HTML). Right padding subtracts scrollbar width so content
   aligns with the top-bar header above. */
.city-page .content {
    flex: 1;
    overflow-y: scroll;
    overflow-x: hidden;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--pad-x-with-scrollbar) 0 var(--pad-x);
}

.city-page-header {
    display: flex;
    align-items: baseline;
    gap: 16px;

    .city-page-name {
        font-size: 2.7em;
        font-weight: 700;
        color: #000;
        margin: 0;
        padding: 0;
        flex: 0 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.4em;
    }

    /* overflow: hidden makes the chip's baseline fall at its bottom margin edge,
       so align-items: baseline on the header puts the blockie's bottom on the
       title's text baseline. Internally the chip still centres its content. */
    .city-page-owner {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 0.875rem;
        color: #555;
        cursor: pointer;
        flex-shrink: 0;
        overflow: hidden;

        .blockie {
            width: 22px;
            height: 22px;
            border-radius: 5px;
            overflow: hidden;
            flex-shrink: 0;
            filter: grayscale(0.8);
        }

        &:hover {
            color: #111;
        }
    }

    .city-page-action {
        margin-left: auto;
        align-self: center;
    }
}

@container city-page (max-aspect-ratio: 8/10) {
    /* Narrow / mobile - give the title, action button, and image more
       breathing room. The header wraps to two rows; row-gap puts space
       between title row and owner+action row. */
    .city-page .top-bar {
        padding-top: 18px;
        padding-bottom: 12px;
    }

    .city-page-header {
        flex-wrap: wrap;
        align-items: end;
        row-gap: 10px;

        /* flex: 0 0 100% forces the title to a full-width row and shuts down
           shrink, so the owner can't squeeze onto the title's line even at
           short names. flex-basis: 100% alone wasn't enough because the
           desktop rule's `flex: 0 1 auto` leaves flex-shrink at 1. */
        .city-page-name {
            flex: 0 0 100%;
            font-size: 2em;
            line-height: 1.4;
        }

        .city-page-action {
            align-self: end;
            padding: 7px 14px;
            font-size: 0.8125rem;
            margin-top: 0;

            svg {
                width: 14px;
                height: 14px;
            }
        }
        .city-page-owner{
            margin-bottom: 5px;
        }
    }

    .city-page .city-page-image {
        margin-bottom: 18px;
    }

    .city-page .city-page-tags {
        margin-bottom: 24px;
        gap: 10px;
    }
}

.city-page-image {
    position: relative;
    width: 100%;
    max-width: 2048px;
    aspect-ratio: 1;
    margin-bottom: 10px;
    border-radius: 12px;
    overflow: hidden;

    > img,
    > picture > img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    > img:first-of-type,
    > picture:first-of-type > img {
        z-index: 1;
    }

    > img:last-of-type,
    > picture:last-of-type > img {
        z-index: 2;
    }
}

/* ─── World-map overlay ──────────────────────────────────────
   On hover (or click-lock) of the coordinates tag, a blurred
   backdrop fills the entire city image, with a Mercator world
   map centred inside it. The map's bottom is cropped so
   Antarctica's distorted strip doesn't show.

   Layout:
     .city-map-overlay  - fills the city image; fade target
       .world-map       - full-size dark blurred backdrop
         .world-map-frame   - the visible window onto the map;
                              centred vertically, has the cropped
                              aspect ratio, overflow: hidden
           .world-map-canvas - full natural aspect of the SVG;
                               taller than the frame, so its bottom
                               (Antarctica) is clipped. Owns the
                               image and the dot - dot %s are
                               relative to the full SVG, not the
                               cropped frame. */

.city-page-image .city-map-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.city-page.map-hover .city-map-overlay,
.city-page.map-locked .city-map-overlay {
    opacity: 1;
    visibility: visible;
}

.world-map {
    position: absolute;
    width: 35%;
    height: 25%;
    background: rgb(0 0 0 / 10%);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #fff;
    right: 2%;
    bottom: 2%;
}

/* Cropped window - keeps the top 88% of the SVG (Antarctica gone).
   Fades in slightly behind the blur so the backdrop-filter has time
   to render before the map content lands on top of it. On hide, the
   map fades out first (no delay) so it doesn't linger. */
.world-map-frame {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    aspect-ratio: 1 / 1;
    overflow: hidden;
    opacity: 0;

}

.city-page.map-hover .world-map-frame,
.city-page.map-locked .world-map-frame {
    opacity: 1;
    /* transition: opacity 0.18s ease 0.12s; */
}

/* Holds the SVG at its natural aspect ratio so dot %s line up. */
.world-map-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.city-page-image .world-map .world-map-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: auto;
    opacity: 0.65;
    pointer-events: none;
}

/* The scale(1/--zoom) counter-scales the marker so it stays the
   same visual size when the canvas is zoomed in. */
.world-map-dot {
    position: absolute;
    width: 14px;
    height: 14px;
    background: #b35eec;
    border: 2px solid #fff;
    border-radius: 50%;
    box-sizing: border-box;
    transform: translate(-50%, -50%) scale(calc(1 / var(--zoom, 1)));
    pointer-events: none;
    z-index: 2;
}

/* The locked-state coords tag picks up the same blue tint as the rarity tag so the
   two "sticky" toggles read as a consistent pair. */
.city-page.map-locked .city-page-tag.coords::after {
    background: rgba(33, 150, 243, 0.85);
}

.city-page.map-locked .city-page-tag.coords:hover::after {
    background: rgba(33, 150, 243, 0.95);
}

/* ─── Stats-mode tags ─────────────────────────────────────────────────────────────────────────────────
   Two views:
     - name   - feature title + level ("Religion 5") / country title / "City Size"
     - stats  - count + bar fill ("14 cities" + blue bar)

   Persistent mode is .stats-mode (toggled by clicking the rarity tag). Hovering a single tag
   (.tag-preview) previews its alternate. The rarity tag itself does NOT preview on hover - it's a hard
   toggle on click. Truth table is plain XOR:

     stats  preview  →  view
       F      F      →  name
       F      T      →  stats
       T      F      →  stats
       T      T      →  name
*/

/* bar visible when stats XOR preview is true */
.city-page.stats-mode .city-page-tag:not(.tag-preview) .bar,
.city-page:not(.stats-mode) .city-page-tag.tag-preview .bar {
    width: var(--bar-pct, 0%);
    opacity: 1;
}

/* text-normal hidden when stats XOR preview is true */
.city-page.stats-mode .city-page-tag:not(.tag-preview) .text-normal,
.city-page:not(.stats-mode) .city-page-tag.tag-preview .text-normal {
    visibility: hidden;
}

/* text-stats visible when stats XOR preview is true */
.city-page.stats-mode .city-page-tag:not(.tag-preview) .text-stats,
.city-page:not(.stats-mode) .city-page-tag.tag-preview .text-stats {
    visibility: visible;
}

/* In stats mode, lock stat-bearing tags to a fixed width so the bar fills are directly comparable in
   absolute pixels rather than as a fraction of varying tag widths. Doesn't apply outside stats mode -
   default name view sizes naturally to the title. */
.city-page.stats-mode .city-page-tag.feature-tag,
.city-page.stats-mode .city-page-tag.size-tag,
.city-page.stats-mode .city-page-tag.country-tag {
    width: 90px;
}

/* Outside stats mode, size and country tags wear the lighter ::after tint (same as the coords pill)
   so they read as "trait info" alongside coords rather than competing with feature tags. In stats
   mode they revert to the default dark tint so the blue rarity bar reads cleanly. */
.city-page:not(.stats-mode) .city-page-tag.size-tag::after,
.city-page:not(.stats-mode) .city-page-tag.country-tag::after {
    background: rgba(255, 255, 255, 0.3);
}

/* When previewing a feature tag inside stats mode (the only case where ellipsis kicks in), tighten the
   gap between the name and the level so the level reads as part of the same token (e.g. "Empl.. 4"
   rather than "Empl..   4"). */
.city-page.stats-mode .city-page-tag.tag-preview.feature-tag .text-normal {
    gap: 2px;
}

/* Coords aren't part of the score - fade when other tags are showing stats. */
.city-page.stats-mode .city-page-tag.muted {
    opacity: 0.35;
}

/* The blue rarity tag is the trigger itself - leave it untouched (no bar, no fade, no text swap). */
.city-page-tag.blue .bar { display: none; }

/* "(?)" help dot sitting at the end of the city-panel tag row. Aligns
   vertically with the 22px-tall tags and points at the meta info page so
   readers can dig into what every tag actually represents. */
.city-page-help {
    align-self: center;
    margin-left: 4px;
}

/* ID/share tag - clicking copies the canonical /city/{id} URL to clipboard;
   the label inside the tag flips from the city id to "Copied" briefly, then
   back. Both labels share one grid cell so the tag width is locked to the
   wider of the two and never resizes during the swap. */
.city-page-tag.id-tag .text-swap {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
}
.city-page-tag.id-tag .text-swap > span {
    grid-area: 1 / 1;
    transition: opacity 0.18s ease;
}
.city-page-tag.id-tag .label-copied {
    opacity: 0;
    color: #8be9a4;
    font-size: 0.625rem;
    margin-right: -3px;
    margin-left: -2px;
}
.city-page-tag.id-tag.copied .label-id {
    opacity: 0;
}
.city-page-tag.id-tag.copied .label-copied {
    opacity: 1;
}

/* "Rarity can change · More info" link - sits next to the tags but only in stats mode. Same visual weight
   as the tag labels, blue + underlined to read as a link. */
.rarity-info-link {
    display: none;
    align-self: center;
    margin-left: 15px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #c2c2c2;
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}
.city-page.stats-mode .rarity-info-link {
    display: inline-block;
}
.rarity-info-link:hover {
    color: #96a0be;
}

.city-page-tags {
    width: 100%;
    max-width: 1024px;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    .city-page-tag {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 22px;
        padding: 4px 12px 4px 4px;
        border-radius: 999px;
        color: #fff;
        font-size: 0.8125rem;
        font-weight: 600;
        line-height: 1.3em;
        white-space: nowrap;
        cursor: pointer;
        overflow: hidden;
        /* iOS Safari fails to clip the blurred ::before to the rounded corners with overflow:hidden alone
           (filtered children get their own compositing layer that ignores the parent's border-radius),
           leaving a rectangular silhouette around each pill on iPhone. clip-path forces the rounding. */
        clip-path: inset(0 round 999px);
        isolation: isolate;
        transition: opacity 0.25s ease;

        /* City image rendered at natural size, offset per-tag,
           then blurred to pick up the ambient color. background-color is a
           neutral slate fallback for the rare case where the AVIF preview is
           missing - the tag still reads as a solid pill rather than ghosting. */
        &::before {
            content: '';
            position: absolute;
            inset: -20px;
            background-color: #3a3f4d;
            background-image: var(--tag-bg);
            background-repeat: no-repeat;
            background-size: auto;
            background-position: calc((var(--tag-idx, 0) + 1) * 9%) bottom;
            filter: blur(30px);
            z-index: -3;
        }

        /* Dark tint so the white text stays legible. */
        &::after {
            content: '';
            position: absolute;
            inset: 0;
            background: rgba(0, 0, 0, 0.15);
            transition: background 0.2s ease;
            z-index: -2;
        }

        /* Rarity progress bar - sits between the dark tint and the text content. Width is set per-tag from the
           city model (--bar-pct = bits / FeatureStat.MaxBits * 100). Hidden until the page enters stats mode. */
        .bar {
            position: absolute;
            inset: 0;
            width: 0%;
            background: rgba(33, 150, 243, 0.85);
            opacity: 0;
            transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease;
            pointer-events: none;
            z-index: -1;
        }

        /* Both labels stack in the same grid cell so the tag's width is sized to the wider of the two - the
           tag never shrinks/grows when toggling modes. The inactive label is hidden via `visibility` (not
           `display: none`), which keeps it contributing to the cell's intrinsic size.

           grid-template-columns: minmax(0, 1fr) lets the cell shrink below content size when the tag is
           width-locked in stats mode, so the .name span inside .text-normal can ellipsise instead of
           overflowing. flex:1 + min-width:0 makes the text-stack claim only the remaining tag width
           (after the icon) rather than its content width. */
        .text-stack {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            align-items: center;
            flex: 1;
            min-width: 0;
        }
        .text-stack > .text-normal,
        .text-stack > .text-stats {
            grid-area: 1 / 1;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            max-width: 100%;
            min-width: 0;
        }

        /* The leading .name span shrinks first and ellipsises; the trailing .size span (feature level
           number) stays visible. So a width-locked feature tag clipping "Employment 4" reads "Empl.. 4"
           instead of "Employmen". The string form ('..') is only supported in newer browsers (Chrome 121+,
           recent Firefox); older ones fall back to the standard "…" via the prior declaration. */
        .text-normal > .name,
        .text-stats > .name {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            text-overflow: '..';
            white-space: nowrap;
        }
        .text-normal > .size {
            flex-shrink: 0;
        }

        /* Default: name visible, stats hidden. The XOR rules below flip this when needed. */
        .text-stats { visibility: hidden; }

        &:hover::after {
            background: rgba(0, 0, 0, 0.6);
        }

        &.blue {
            /* Same blue (and same opacity) as the stats-mode progress bar - keeps the rarity tag visually
               consistent with the bars it triggers. */
            &::after {
                background: rgba(33, 150, 243, 0.85);
            }

            &:hover::after {
                background: rgba(33, 150, 243, 0.95);
            }
        }

        &.muted::after {
            background: rgba(255, 255, 255, 0.3);
        }

        &.muted:hover::after {
            background: rgba(0, 0, 0, 0.4);
        }

        .icon {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
        }

        /* Inline SVG icon shown inside a translucent dark disc - used by the
           rarity, coords, and id-tag pills. Slightly darker than the tag's
           ambient tint so the white SVG glyph reads cleanly against it. */
        .icon-circle {
            background: rgba(0, 0, 0, 0.15);
            color: #fff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        .icon-circle > svg {
            width: 65%;
            height: 65%;
            display: block;
        }

        /* Size tag's "icon" is the size number in a purple round badge - visually mirrors the feature
           thumbnails / country flags so the size tag sits naturally alongside them. */
        .size-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: rgba(155, 89, 182, 0.85);
            color: #fff;
            font-size: 0.6875rem;
            font-weight: 700;
            line-height: 1;
            font-variant-numeric: tabular-nums;
        }

        .size {
            /* opacity: 0.75; */
        }
    }
}

/* ─── Action button (inline in title row) ─────────────────── */
/* Pill button on the same line as the title. Auto-width; title takes
   the rest and ellipsises when long. Exactly one action shown at a time. */

.city-page-action {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    cursor: pointer;

    color: #111;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    margin-right: 10px;
    margin-top: 8px;

    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;

    &:hover {
        background: #f5f5f5;
        border-color: rgba(0, 0, 0, 0.2);
    }

    &:active {
        transform: scale(0.98);
    }

    svg {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        opacity: 0.7;
    }
}

/* Disabled state - historic (pre-NFT) tokens that can't be bought yet. */
.city-page-action.is-disabled {
    color: #888;
    background: #f2f2f2;
    border-color: rgba(0, 0, 0, 0.08);
    cursor: not-allowed;

    svg {
        opacity: 0.5;
    }

    &:hover {
        background: #f2f2f2;
        border-color: rgba(0, 0, 0, 0.08);
    }

    &:active {
        transform: none;
    }
}

/* Promoted state - upgrade, add-to-set, buy. Pulsing blue halo to draw the eye.
   Remove-from-set stays plain so it doesn't compete for attention. */
.city-page-action.is-promoted {
    border-color: rgba(0, 123, 255, 0.45);
    color: #0b5fbf;
    animation: city-page-action-pulse 2s ease-out infinite;

    svg {
        opacity: 0.9;
        color: #007bff;
    }
}

@keyframes city-page-action-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(0, 123, 255, 0.55); }
    70%  { box-shadow: 0 0 0 12px rgba(0, 123, 255, 0); }
    100% { box-shadow: 0 0 0 0   rgba(0, 123, 255, 0); }
}


/* ─── Mobile: collapse internal scroll into the page ───────────
   The city panel switches from a fixed-height flex column with an
   internally-scrolling content area to a plain block that flows in
   the page. container-type: normal is critical - size containment
   makes the element ignore its children's heights, so without this
   override .city-page would collapse to 0 even with height: auto.

   The @container city-page (max-aspect-ratio: 8/10) rules above
   would normally do double duty for narrow desktop panels AND
   mobile, but dropping size containment kills the container query.
   The mobile-only versions of those rules are re-stated inside this
   media block so the narrow-layout tweaks still apply on phones.

   This block lives at the END of the file on purpose: it has to
   override the desktop .city-page-header nested rules earlier in
   the file, and at equal specificity source order is what wins. */
@media (max-width: 900px) {
    body:has(.city-page) {
        overflow: visible;
    }

    .city-page {
        display: block;
        height: auto;
        overflow: visible;
        container-type: normal;
    }

    .city-page .content {
        display: block;
        overflow: visible;
        padding: 0 var(--pad-x);
    }

    .city-page .top-bar {
        padding-top: 18px;
        padding-bottom: 12px;
    }

    .city-page-header {
        flex-wrap: wrap;
        align-items: end;
        row-gap: 10px;

        /* Title gets a forced full-width row even for short names. flex: 0 0 100%
           shuts down both grow and shrink so the owner badge can't squeeze onto
           the title's line. With flex-wrap: wrap on the header that pushes the
           owner + action button onto row 2 every time. */
        .city-page-name {
            flex: 0 0 100%;
            font-size: 2em;
            line-height: 1.4;
        }

        .city-page-action {
            align-self: end;
            padding: 7px 14px;
            font-size: 0.8125rem;
            margin-top: 0;

            svg {
                width: 14px;
                height: 14px;
            }
        }

        .city-page-owner {
            margin-bottom: 5px;
        }
    }

    .city-page .city-page-image {
        margin-bottom: 18px;
    }

    .city-page .city-page-tags {
        margin-bottom: 24px;
        gap: 10px;
    }
}
 /* ============================================
   BLUEPRINTS - Reusable image-display widget.
   Shows a single image (e.g. a blueprint) inside
   a full-height slot; the container scrolls when
   the image is taller than the slot.
   ============================================ */

.blueprints {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #fff;
    overflow-y: scroll;
}

.blueprints-image {
    display: block;
    margin: 0;
    max-width: 100%;
    height: auto;
}
 /* Art page - custom overrides only. Shared styles in sections.css */

.art {
    overflow-x: hidden;
}


/* ═══════════════════════════════════════════════════════════════
   HERO - art layout (widget positioning)
   ═══════════════════════════════════════════════════════════════ */

.ar-hero__art {
    position: relative;
}

.ar-hero__art-main.art-frame {
    aspect-ratio: 1;
    width: 100%;
    border-radius: var(--sec-radius);
}

.ar-hero__art-insets {
    position: absolute;
    bottom: -24px;
    left: -24px;
    display: flex;
    gap: 10px;
}

.ar-hero__inset.art-frame {
    width: 90px;
    height: 90px;
    border-radius: var(--sec-radius-sm);
    border: 3px solid #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.ar-hero__inset.art-frame img {
    object-fit: cover;
    object-position: center;
}

.ar-hero__art-insets .art-frame:nth-child(1) { transition-delay: 0.15s; }
.ar-hero__art-insets .art-frame:nth-child(2) { transition-delay: 0.25s; }
.ar-hero__art-insets .art-frame:nth-child(3) { transition-delay: 0.35s; }


/* ═══════════════════════════════════════════════════════════════
   CSS FILTERS - comparison simulations
   ═══════════════════════════════════════════════════════════════ */

.ar-filter--raw img  { filter: grayscale(1) brightness(0.85) contrast(0.65); }
.ar-filter--flat img { filter: grayscale(0.45) brightness(0.95) contrast(0.8) saturate(0.5); }


/* ═══════════════════════════════════════════════════════════════
   SPECIMEN - annotated callout positioning
   ═══════════════════════════════════════════════════════════════ */

.ar-specimen {
    position: relative;
    max-width: var(--sec-max);
    margin: 0 auto 80px;
}

.ar-specimen__img.art-frame {
    aspect-ratio: 2048 / 700;
    width: 100%;
    border-radius: var(--sec-radius);
}

.ar-specimen__callout {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.ar-specimen__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--sec-accent);
    border: 2px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    flex-shrink: 0;
}

.ar-specimen__label {
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(20,26,33,0.82);
    padding: 6px 14px;
    border-radius: 6px;
    white-space: nowrap;
    line-height: 1;
}

[data-callout="colour"]     { top: 10%; left: 5%; flex-direction: row-reverse; }
[data-callout="centre"]     { top: 15%; left: 49%; }
[data-callout="features"]   { top: 65%; left: 19%; flex-direction: row-reverse; }
[data-callout="grid"]       { top: 12%; right: 10%; flex-direction: row-reverse; }
[data-callout="atmosphere"] { bottom: 12%; left: 72%; }


/* ═══════════════════════════════════════════════════════════════
   MODULE SAMPLES - 3-col image grid
   ═══════════════════════════════════════════════════════════════ */

.ar-module__samples {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}


/* ═══════════════════════════════════════════════════════════════
   MODULE GRID (4-up 2x2 in The Visual Language)
   ═══════════════════════════════════════════════════════════════ */

.ar-language__modules {
    gap: 56px 64px;
}


/* ═══════════════════════════════════════════════════════════════
   CROP FRAMES - page-specific image crops
   ═══════════════════════════════════════════════════════════════ */

.ar-crop {
    overflow: hidden;
    border-radius: var(--sec-radius-sm);
    background: #e8eaef;
}

.ar-crop--module.art-frame {
    aspect-ratio: 1;
    border-radius: var(--sec-radius-sm);
}

.ar-crop--module.art-frame img {
    object-fit: cover;
    object-position: center;
}

.ar-crop--process.art-frame {
    aspect-ratio: 1;
    border-radius: var(--sec-radius-sm);
}

.ar-crop--process.art-frame img {
    object-fit: cover;
    object-position: center;
    border-radius: 0;
}


/* ═══════════════════════════════════════════════════════════════
   PROCESS BOARD - rejected/kept grid layout
   ═══════════════════════════════════════════════════════════════ */

.ar-process .sec__intro {
    max-width: 960px;
}

.ar-process__board {
    display: grid;
    grid-template-columns: 3fr auto 1.1fr;
    gap: 24px;
    align-items: center;
    max-width: var(--sec-max);
    margin: 0 auto;
}

.ar-process__rejected-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.ar-process__stage {
    text-align: center;
}

.ar-process__rejected .ar-crop--process.art-frame img {
    filter: saturate(0.4) opacity(0.85);
}

.ar-process__arrow {
    color: var(--sec-border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ar-process__label {
    display: block;
    font-size: 0.82em;
    font-weight: 600;
    color: var(--sec-faint);
    margin-top: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ar-process__label--final {
    color: var(--sec-accent);
}

.ar-process__stage--final .ar-crop--process-final.art-frame {
    border: 2px solid var(--sec-accent);
    box-shadow: 0 4px 24px rgba(123, 66, 184, 0.15);
}

.ar-process__copy {
    max-width: 720px;
    margin: 0 auto 56px;
}

.ar-process__copy h2 {
    text-align: center;
}

.ar-process__copy p {
    text-align: center;
}


/* ═══════════════════════════════════════════════════════════════
   STRATEGY ROOTS - atmospheric overrides
   ═══════════════════════════════════════════════════════════════ */

.ar-roots .atmospheric__content {
    max-width: 720px;
    text-align: center;
}

.ar-roots .atmospheric__content p {
    color: rgba(255,255,255,0.92);
}

.ar-roots .atmospheric__overlay {
    background: linear-gradient(
        to bottom,
        rgba(10,12,18,0.82) 0%,
        rgba(10,12,18,0.88) 100%
    );
}


/* ═══════════════════════════════════════════════════════════════
   CLOSE - CTA overrides
   ═══════════════════════════════════════════════════════════════ */

.ar-close {
    text-align: center;
    padding: 120px var(--sec-gutter);
    background: #0a0c12;
}


/* ═══════════════════════════════════════════════════════════════
   LINEAGE - visual evolution strip
   ═══════════════════════════════════════════════════════════════ */

.ar-lineage__strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.ar-lineage__era {
    text-align: left;
}

.ar-lineage__img {
    aspect-ratio: 1;
    border-radius: var(--sec-radius);
    overflow: hidden;
    background: var(--sec-surface);
    margin-bottom: 20px;
}

.ar-lineage__img .art-frame {
    width: 100%;
    height: 100%;
    border-radius: var(--sec-radius);
}

.ar-lineage__date {
    display: inline-block;
    font-size: 0.78em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sec-faint);
    margin-bottom: 8px;
    vertical-align: middle;
}

.ar-lineage__date--current {
    color: var(--sec-accent);
}

.ar-lineage__info h3 {
    font-size: 1.35em;
    font-weight: 800;
    margin: 0 0 10px;
    line-height: 1.2;
    color: var(--sec-text);
}

.ar-lineage__info p {
    color: var(--sec-muted);
    line-height: 1.65;
    margin: 0;
    font-size: 0.95em;
}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE - page-specific breakpoints only
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .ar-specimen {
        max-width: 100%;
    }
}

@media (max-width: 860px) {
    .ar-hero__art {
        max-width: 480px;
    }

    .ar-hero__art-insets {
        bottom: -16px;
        left: -12px;
    }

    .ar-hero__inset.art-frame {
        width: 72px;
        height: 72px;
    }

    .ar-specimen {
        max-width: 420px;
        margin-bottom: 40px;
    }

    .ar-specimen__callout {
        display: none;
    }

    .ar-process__board {
        grid-template-columns: 1fr;
        gap: 16px;
        max-width: 360px;
    }

    .ar-process__arrow {
        transform: rotate(90deg);
    }

    .ar-process__copy {
        margin-bottom: 32px;
    }

    .ar-lineage__strip {
        grid-template-columns: 1fr;
        gap: 36px;
        max-width: 480px;
    }

    .ar-language__modules {
        gap: 36px;
    }
}

@media (max-width: 560px) {
    .ar-hero__art-insets {
        position: static;
        margin-top: 12px;
    }

    .ar-hero__inset.art-frame {
        width: 64px;
        height: 64px;
    }

    .ar-specimen {
        max-width: 100%;
        margin-bottom: 32px;
    }

    .ar-process__board {
        max-width: 280px;
    }

    .ar-process__copy {
        margin-bottom: 24px;
    }

    .ar-close {
        padding: 52px var(--sec-gutter);
    }

    .ar-lineage__strip {
        gap: 28px;
    }

    .ar-language__modules {
        gap: 28px;
    }
}
 
@keyframes shake {
    0%, 100% { transform: translate3d(0, 0, 0); }
    10%, 30%, 50%, 70%, 90% { transform: translate3d(0, -1px, 0); }
    20%, 40%, 60%, 80% { transform: translate3d(0, 2px, 0); }
}
 /* Account - content styles only. Layout comes from dashboard.css (.dashboard.split-60). */

.account .dashboard-left {
    background: #fff;
}

.account .dashboard-left .content {
    overflow-y: auto;
}

.account .dashboard-left .header {
    display: flex;
    align-items: center;
    padding: 14px var(--tight-pad-x);
    min-height: 77.5px;
    box-sizing: border-box;
    flex-shrink: 0;
    gap: 10px;
    flex-wrap: wrap;

    .thumb {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        border-radius: 6px;
        overflow: hidden;
        text-align: initial;

        svg, img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
    }

    h2 {
        margin: 0;
        font-size: 1.125rem;
        font-weight: 600;
        color: #333;
        cursor: pointer;
    }

    .action {
        flex-shrink: 0;
        padding: 6px 14px;
        border-radius: 6px;
        font-size: 0.8125rem;
        font-weight: 500;
        cursor: pointer;
        background-color: transparent;
        color: #999;
        border: 1px solid #ddd;

        &:hover {
            color: #333;
            border-color: #999;
        }

        &.danger {
            color: #dc3545;
            border-color: #dc3545;

            &:hover {
                background-color: #dc3545;
                color: #fff;
            }
        }
    }

    .settings-icon {
        width: 24px;
        height: 24px;
        cursor: pointer;
        color: #1C274C;
        margin-left: 7px;

        &:hover {
            color: #333;
        }
    }

    .action.danger {
        margin-left: auto;
    }

    &.gradient {
        background: linear-gradient(90deg, #fefefe 0%, #f7f7f7 50%, #fefefe 100%);
        border-bottom: 1px solid #f0f0f0;
    }
}

.account .dashboard-left .row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px var(--tight-pad-x);
    cursor: pointer;
    border-bottom: 1px solid #f0f0f0;
    border-top: 1px solid #f0f0f0;
    margin-bottom: -1px;

    &:hover {
        background-color: #f8f8f8;
    }

    .thumb {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        border-radius: 6px;
        overflow: hidden;
        text-align: initial;

        svg, img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        &.icon {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8f8f8;
            color: #999;

            svg {
                width: 20px;
                height: 20px;
                color: #b6b6b6;
            }
        }
    }

    .info {
        flex: 1;
        min-width: 0;
        min-height: 40px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .name {
        font-size: 1rem;
        font-weight: 600;
        color: #333;

        &.light { font-weight: 400; }
    }

    .arrow {
        flex-shrink: 0;
        width: 20px;
        height: 20px;
        color: #ccc;
    }

    &:hover .arrow { color: #999; }

    &.disabled {
        opacity: 0.45;
        cursor: default;

        &:hover { background-color: transparent; }
    }
}

.account .dashboard-left .other-account-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 30px var(--tight-pad-x) 5px;
    background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);
    min-height: 40px;

    .thumb {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
        border-radius: 6px;
        overflow: hidden;
        text-align: initial;

        svg, img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
    }

    .name {
        font-size: 1.125rem;
        font-weight: 600;
        color: #333;
    }

    .action {
        flex-shrink: 0;
        padding: 6px 14px;
        border-radius: 6px;
        font-size: 0.8125rem;
        font-weight: 500;
        cursor: pointer;
        background-color: transparent;
        color: #505050;
        border: 1px solid #9b9b9b;
        margin-left: auto;

        &:hover {
            color: #333;
            border-color: #999;
        }
    }
}

.account .dashboard-left .section-gap { height: 60px; }

.account .dashboard-left .buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px var(--tight-pad-x);
}

.account .dashboard-left .button {
    display: block;
    padding: 12px;
    text-align: center;
    background-color: #404499;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;

    &:hover {
        background-color: #0056b3;
    }

    &.secondary {
        background-color: #f0f0f0;
        color: #333;

        &:hover {
            background-color: #e5e5e5;
        }
    }
}

/* Right panel - account art fills the whole pane, no scrolling */
.account .dashboard-right {
    overflow: hidden;
    background: #fafafa;
    border-left: 1px solid #f0f0f0;
}

.account .dashboard-right > [widget="account_right"] {
    position: absolute;
    inset: 0;
}