/* Coin page styles, split out of coin.php so the coin pages share one cached file. */

        /* Hero */
        .coin-hero { display:grid; grid-template-columns:auto 1fr; gap:1.75rem; align-items:start; margin-bottom:2rem; }
        .coin-img-wrap { position:relative; display:flex; flex-direction:column; align-items:center; }
        .coin-img-pair { display:flex; gap:1rem; align-items:flex-start; }
        .coin-img-cell { display:flex; flex-direction:column; align-items:center; gap:.4rem; }
        .coin-img-cell .coin-img-cap { font-size:.7rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; }
        .coin-img-full { width:170px; height:170px; object-fit:contain; border-radius:50%; background:var(--bg-input); border:1px solid var(--border); display:block; cursor:zoom-in; padding:.5rem; }
        .coin-img-placeholder { width:170px; height:170px; border-radius:50%; background:var(--bg-input); display:flex; align-items:center; justify-content:center; font-size:4rem; border:1px solid var(--border); }
        .coin-hero-info { min-width:0; }
        .coin-circ-link { margin:0 0 .4rem; font-size:.85rem; color:var(--text-muted); }
        .coin-meta-pills { display:flex; flex-wrap:wrap; gap:.4rem; margin:.6rem 0 1rem; }
        .coin-pill { display:inline-flex; align-items:center; gap:.3rem; padding:.25rem .65rem; border-radius:99px; background:var(--bg-input); border:1px solid var(--border); font-size:.78rem; color:var(--text-secondary); white-space:nowrap; }
        .coin-pill-label { color:var(--text-muted); font-size:.72rem; }
        .ext-links { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.75rem; }
        .ext-link-chip { display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .7rem; border-radius:6px; border:1px solid var(--border); background:var(--bg-input); color:var(--blue-primary); font-size:.78rem; text-decoration:none; transition:background .12s,border-color .12s; cursor:pointer; }
        .ext-link-chip:hover { background:rgba(46,134,222,.1); border-color:rgba(46,134,222,.4); }
        .ext-link-chip .chip-icon { font-size:.85rem; }

        /* Content layout */
        .coin-layout { display:grid; grid-template-columns:280px 1fr; gap:2rem; align-items:start; }
        .coin-layout > * { min-width:0; }

        /* Spec table */
        .spec-table { width:100%; border-collapse:collapse; font-size:.855rem; }
        .spec-table td { padding:.42rem 0; border-bottom:1px solid var(--border); vertical-align:top; }
        .spec-table td:first-child { color:var(--text-muted); width:46%; }
        .spec-table td:last-child { color:var(--text-primary); font-weight:500; }
        .spec-table tr:last-child td { border-bottom:none; }
        /* Mintage by year: a small ledger, one year per line */
        .mint-years { list-style:none; margin:0; padding:0; max-width:15rem; font-variant-numeric:tabular-nums; }
        .mint-years--long { max-width:none; columns:2 10.5rem; column-gap:1.5rem; }
        .mint-years li { display:flex; align-items:baseline; gap:.4rem; padding:.08rem 0; white-space:nowrap; break-inside:avoid; }
        .mint-years strong { font-weight:700; }
        .mint-years i { flex:1; min-width:.6rem; border-bottom:1px dotted var(--border); transform:translateY(-.22em); }
        .mint-years .is-low strong, .mint-years .is-low span { color:var(--gold); }

        /* Chart */
        .chart-container {
            position:relative;
            height:420px;
            margin:0 -1.25rem;
            padding:0 1.25rem;
            background:
                radial-gradient(ellipse at top, rgba(224,156,38,.04), transparent 55%),
                radial-gradient(ellipse at bottom left, rgba(46,134,222,.05), transparent 60%);
            border-radius:10px;
        }
        .range-tabs { display:flex; gap:.35rem; margin-bottom:1rem; flex-wrap:wrap; }
        .range-tab {
            padding:.35rem .85rem;
            border-radius:7px;
            border:1px solid var(--border);
            background:rgba(255,255,255,.02);
            color:var(--text-muted);
            font-size:.82rem;
            font-weight:600;
            cursor:pointer;
            transition:background .12s, color .12s, border-color .12s, transform .08s;
        }
        .range-tab:hover { color:var(--text-primary); border-color:rgba(224,156,38,.4); }
        .range-tab:active { transform:scale(.97); }
        .range-tab.active {
            background:rgba(224,156,38,.15);
            border-color:#E09C26;
            color:#E09C26;
        }

        /* Grade legend toolbar */
        .cgc-bar {
            display:flex; align-items:center; flex-wrap:wrap; gap:.6rem;
            margin:1rem 0 .6rem;
            padding:.55rem .7rem;
            background:rgba(13,21,38,.55);
            border:1px solid rgba(255,255,255,.06);
            border-radius:9px;
        }
        .cgc-bar[hidden] { display:none; }
        .cgc-actions { display:flex; gap:.3rem; }
        .cgc-btn {
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.10);
            color:var(--text-secondary);
            padding:.3rem .65rem;
            border-radius:6px;
            font-size:.74rem; font-weight:700;
            cursor:pointer;
            transition:all .12s ease;
            font-family:inherit;
        }
        .cgc-btn:hover { color:var(--text-primary); border-color:rgba(224,156,38,.4); }
        .cgc-btn.is-active {
            background:rgba(224,156,38,.15);
            border-color:#E09C26;
            color:#E09C26;
        }
        .cgc-meta {
            font-size:.72rem; color:var(--text-muted);
            font-variant-numeric:tabular-nums;
            white-space:nowrap;
        }
        .cgc-meta span { color:var(--gold); font-weight:700; }
        .cgc-search {
            margin-left:auto;
            display:flex; align-items:center; gap:.4rem;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(255,255,255,.10);
            border-radius:6px;
            padding:.25rem .55rem;
            min-width:170px;
            flex:1; max-width:260px;
            transition:border-color .12s ease;
        }
        .cgc-search:focus-within { border-color:#E09C26; }
        .cgc-search input {
            flex:1;
            background:transparent;
            border:0; outline:0;
            color:var(--text-primary);
            font-size:.78rem;
            min-width:0;
        }
        .cgc-search input::placeholder { color:var(--text-muted); opacity:.7; }

        /* Custom HTML legend (chip per grade) */
        .cgl-wrap {
            display:flex; flex-wrap:wrap; gap:.4rem;
            margin:0 0 1rem;
        }
        .cgl-wrap[hidden] { display:none; }
        .cgl-chip {
            display:inline-flex; align-items:center; gap:.4rem;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(255,255,255,.10);
            color:var(--text-secondary);
            padding:.3rem .55rem .3rem .5rem;
            border-radius:100px;
            font-size:.78rem; font-weight:600;
            cursor:pointer;
            transition:all .12s ease;
            position:relative;
            font-family:inherit;
            user-select:none;
        }
        .cgl-chip[hidden] { display:none; }
        .cgl-chip:hover { border-color:rgba(255,255,255,.22); color:var(--text-primary); }
        .cgl-chip.is-off { opacity:.45; }
        .cgl-chip.is-off .cgl-dot { background:#3a4a5e !important; box-shadow:none !important; }
        .cgl-dot {
            width:9px; height:9px; border-radius:50%;
            flex-shrink:0;
            box-shadow:0 0 0 2px rgba(255,255,255,.06);
        }
        .cgl-meta {
            font-size:.65rem; color:var(--text-muted); font-weight:500;
            font-variant-numeric:tabular-nums;
        }
        .cgl-chip.is-off .cgl-meta { color:var(--text-muted); }
        .cgl-solo {
            display:inline-flex; align-items:center; justify-content:center;
            width:18px; height:18px;
            margin-left:.15rem;
            border-radius:50%;
            color:var(--text-muted);
            font-size:.7rem; line-height:1;
            opacity:.55;
            transition:all .12s ease;
        }
        .cgl-chip:hover .cgl-solo { opacity:1; }
        .cgl-chip .cgl-solo:hover { background:rgba(224,156,38,.18); color:#E09C26; }

        /* Grade table */
        .grade-table th { position:relative; min-width:60px; user-select:none; white-space:nowrap; }
        .grade-table th.sortable { cursor:pointer; }
        .grade-table th.sortable:hover { color:var(--text-primary); }
        .grade-table th.sortable::after { content:' ⇅'; color:var(--text-muted); font-size:.75em; }
        .grade-table th.sort-asc::after { content:' ↑'; color:var(--blue-primary); }
        .grade-table th.sort-desc::after { content:' ↓'; color:var(--blue-primary); }
        .grade-row:hover { background:rgba(255,255,255,.035); }
        .grade-expand-btn { background:rgba(46,134,222,.15); border:1px solid rgba(46,134,222,.3); cursor:pointer; color:var(--blue-primary); padding:.2rem .45rem; border-radius:5px; font-size:.8rem; transition:all .12s; line-height:1; }
        .grade-expand-btn:hover { color:#e8e8e8; background:rgba(46,134,222,.35); border-color:rgba(46,134,222,.5); }
        .grade-expand-btn.open { color:#e8e8e8; background:var(--blue-primary); border-color:var(--blue-primary); transform:rotate(180deg); }
        .grade-records-row { display:none; }
        .grade-records-row.open { display:table-row; }
        .records-inner { padding:.5rem .75rem .75rem 2rem; background:rgba(13,21,38,.6); }
        .records-table { width:100%; border-collapse:collapse; font-size:.8rem; }
        .records-table th { color:var(--text-muted); font-weight:500; padding:.3rem .5rem; border-bottom:1px solid var(--border); text-align:left; }
        .records-table td { padding:.35rem .5rem; border-bottom:1px solid rgba(255,255,255,.04); color:var(--text-secondary); vertical-align:middle; }
        .records-table tr:last-child td { border-bottom:none; }
        .records-table a { color:var(--blue-primary); text-decoration:none; }
        .records-table a:hover { text-decoration:underline; }
        .src-badge { display:inline-block; padding:.1rem .4rem; border-radius:3px; font-size:.7rem; font-weight:600; background:rgba(255,255,255,.06); color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; }

        /* Related scroll */
        .related-scroll { display:flex; gap:1rem; overflow-x:auto; padding-bottom:.5rem; }
        .related-scroll::-webkit-scrollbar { height:4px; }
        .related-scroll::-webkit-scrollbar-track { background:var(--bg-input); border-radius:99px; }
        .related-scroll::-webkit-scrollbar-thumb { background:var(--border); border-radius:99px; }

        /* Mobile */
        @media (max-width:900px) {
            .coin-hero { grid-template-columns:1fr; }
            .coin-img-wrap { width:100%; }
            .coin-img-pair { justify-content:center; gap:.75rem; }
            .coin-img-full, .coin-img-placeholder { width:135px; height:135px; }
            /* Single-column stack. The DOM has specs (country / year /
               denomination / face value etc.) first so desktop gets its
               left-rail sidebar, but on phones the market data (graph,
               grade table, sale records) matters more, push specs to
               the bottom by flipping child order. Gated by .price-first so
               the reorder is reversible: flip the COIN_MOBILE_PRICE_FIRST
               PHP constant to false and the class drops, letting the
               natural DOM order (specs first) flow through on mobile. */
            .coin-layout {
                grid-template-columns:1fr;
                display:flex;
                flex-direction:column;
                align-items:stretch; /* start would keep a column at its min-content width on small phones */
            }
            .coin-layout.price-first > *:nth-child(1) { order: 2; }  /* specs → below */
            .coin-layout.price-first > *:nth-child(2) { order: 1; }  /* graph/market → above */
            .chart-container { height:260px; margin:0 -1rem; padding:0; }
        }
        @media (max-width:380px) {
            .coin-img-full, .coin-img-placeholder { width:115px; height:115px; }
        }

        /* Collapse the grade + records tables into stacked cards on phones
           so the user only needs to scroll vertically. Each row becomes a
           labelled card with Grade + Latest price promoted as the header
           and every other cell showing its column name (from data-label)
           on the left and its value on the right. */
        @media (max-width:640px) {
            .table-wrap { overflow:visible; }
            .grade-table,
            .grade-table thead,
            .grade-table tbody,
            .grade-table tr,
            .grade-table td {
                display:block;
                width:100%;
            }
            .grade-table thead { display:none; }
            .grade-table .grade-row {
                position:relative;
                background:rgba(255,255,255,.02);
                border:1px solid var(--border);
                border-radius:10px;
                padding:.6rem .75rem .35rem;
                margin-bottom:.6rem;
            }
            .grade-table .grade-row:hover { background:rgba(255,255,255,.035); }
            .grade-table .grade-row td {
                padding:.35rem 0;
                border:none !important;
                display:flex;
                justify-content:space-between;
                align-items:center;
                gap:.75rem;
                font-size:.88rem;
            }
            .grade-table .grade-row td::before {
                content:attr(data-label);
                color:var(--text-muted);
                font-size:.75rem;
                font-weight:500;
                text-transform:uppercase;
                letter-spacing:.04em;
                flex-shrink:0;
            }
            /* Expand button floats top-right of the card, sized up and
               tinted gold so admins/users can actually spot it on a phone.
               No column label needed for this cell. */
            .grade-table .gt-expand-cell {
                position:absolute;
                top:.4rem;
                right:.45rem;
                padding:0 !important;
                width:auto !important;
            }
            .grade-table .gt-expand-cell::before { content:none; }
            .grade-table .grade-expand-btn {
                min-width:40px;
                min-height:40px;
                padding:.35rem .6rem !important;
                font-size:1.1rem !important;
                background:rgba(224,156,38,.18) !important;
                border-color:rgba(224,156,38,.45) !important;
                color:var(--gold,#E09C26) !important;
            }
            .grade-table .grade-expand-btn.open {
                background:var(--gold,#E09C26) !important;
                border-color:var(--gold,#E09C26) !important;
                color:#0D1B2A !important;
            }
            /* Grade + Latest promoted: bigger, no uppercase label */
            .grade-table .gt-grade {
                padding-right:2.5rem !important; /* clear of expand button */
                padding-bottom:.15rem !important;
                border-bottom:1px dashed rgba(255,255,255,.08) !important;
                margin-bottom:.25rem;
                font-size:1rem !important;
            }
            .grade-table .gt-grade::before { content:'Grade'; font-size:.7rem; }
            .grade-table .gt-median::before { content:'Median price'; }
            .grade-table .gt-median { font-size:1rem !important; color:var(--text-primary) !important; font-weight:700; }
            .grade-table .gt-latest::before { content:'Latest sale'; }

            /* Hide the extra summary cells (Avg 90d, 30d Δ, range, sales,
               total, last sale) until the row is expanded. Grade + Latest
               stay visible as a compact at-a-glance summary; the dropdown
               reveals the numbers-heavy cells plus the per-sale records. */
            .grade-table .grade-row td:not(.gt-expand-cell):not(.gt-grade):not(.gt-median) {
                display:none;
            }
            .grade-table .grade-row.expanded td:not(.gt-expand-cell):not(.gt-grade):not(.gt-median) {
                display:flex;
            }
            /* Separator above the revealed stat block so it reads as a
               distinct 'details' section rather than part of the header. */
            .grade-table .grade-row.expanded td[data-label="Latest"] {
                border-top:1px solid rgba(255,255,255,.06) !important;
                padding-top:.5rem !important;
                margin-top:.15rem;
            }

            /* Expanded records row - explicitly keep it collapsed until
               .open is applied. Without this the earlier 'tr { display:
               block }' blanket rule beats the desktop 'display:none',
               so the 'Loading…' stub was always on screen and text
               jumped horizontally as content filled in. */
            .grade-table .grade-records-row {
                display:none !important;
                padding:0 !important;
                margin:-.4rem 0 .6rem !important; /* tuck right under the card it belongs to */
                background:rgba(13,21,38,.6);
                border:1px solid var(--border);
                border-top:none;
                border-radius:0 0 10px 10px;
            }
            .grade-table .grade-records-row.open { display:block !important; }
            .grade-table .grade-records-row td {
                display:block !important;
                padding:0 !important;
                border:none !important;
            }
            .grade-table .grade-records-row td::before { content:none; }
            .records-inner { padding:.75rem; background:transparent !important; }

            #value-by-year .grade-table thead { display:none; }
            #value-by-year .grade-table tbody > tr:not(.grade-records-row) {
                display:grid !important; grid-template-columns:2.75rem minmax(0,1fr) minmax(0,1fr); column-gap:.6rem; row-gap:.35rem; /* first track fits the 40px expand button */
                align-items:center; padding:.6rem 0 !important; margin:0 !important; border:none !important;
                border-bottom:1px solid rgba(255,255,255,.06) !important; border-radius:0 !important; background:none !important;
            }
            #value-by-year .grade-table tbody > tr:not(.grade-records-row) > td {
                display:block !important; padding:0 !important; border:none !important; text-align:left !important; background:none !important;
            }
            #value-by-year td:first-child { grid-row:1 / span 3; align-self:start; padding-top:.1rem !important; }
            #value-by-year td[data-label="Year"] { grid-column:2 / span 2; font-size:1.05rem; }
            #value-by-year td[data-label]:not([data-label="Year"])::before {
                content:attr(data-label); display:block; font-size:.62rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-bottom:.1rem;
            }
            #value-by-year .grade-records-row .records-inner { margin:0 !important; padding:.6rem !important; }

            /* Inner records table (Date / Price / Source / Lot / Link) on
               phones: each sale becomes a compact single-line grid row.
               80% of the previous stacked card was whitespace. Explicit
               grid columns prevent flex-wrap from promoting cells to
               their own lines on narrow screens, the source cell
               ellipsises if it runs out of room rather than wrapping.
               Lot/Ref is hidden on phones (rarely needed). */
            .records-table       { display:block !important; width:100% !important; }
            .records-table thead { display:none !important; }
            .records-table tbody { display:block !important; width:100% !important; }
            .records-table tbody tr {
                /* Grid columns: date | price | source | view ↗ | ⚑ */
                display:grid !important;
                grid-template-columns: auto auto 1fr auto auto;
                align-items:center;
                gap:.55rem;
                background:rgba(255,255,255,.025);
                border:1px solid rgba(255,255,255,.06);
                border-radius:8px;
                padding:.5rem .65rem !important;
                margin-bottom:.35rem;
                width:100%;
            }
            .records-table tbody tr td {
                display:block !important;
                padding:0 !important;
                border:none !important;
                font-size:.8rem;
                white-space:nowrap;
                overflow:hidden;
                text-overflow:ellipsis;
                min-width:0;
            }
            .records-table tbody tr td::before { content:none !important; }

            /* Per-column treatment */
            .records-table tbody tr td[data-label="Date"] {
                font-variant-numeric: tabular-nums;
                color:var(--text-secondary);
                font-size:.76rem;
            }
            .records-table tbody tr td[data-label="Price (GBP)"] {
                font-weight:700; color:var(--text-primary);
            }
            .records-table tbody tr td[data-label="Source"] {
                font-size:.72rem; min-width:0;
            }
            .records-table tbody tr td[data-label="Source"] .src-badge {
                padding:.1rem .4rem; font-size:.68rem;
                max-width:100%; overflow:hidden; text-overflow:ellipsis;
                display:inline-block;
            }
            .records-table tbody tr td[data-label="Lot / Ref"] { display:none !important; }
            .records-table tbody tr td[data-label="Link"] { font-size:.78rem; }
            .records-table tbody tr td[data-label="Link"] a { white-space:nowrap; }
            .records-table tbody tr td[data-label=""] { padding:0 !important; }

            /* Spec-table: give labels a touch more room, break long values */
            .spec-table td { padding:.45rem .35rem; font-size:.88rem; }
            .spec-table td:last-child { word-break:break-word; }
        }

        /* Share toast animation */
        @keyframes fadeInOut {
            0%   { opacity:0; transform:translateX(-50%) translateY(10px); }
            15%  { opacity:1; transform:translateX(-50%) translateY(0); }
            80%  { opacity:1; transform:translateX(-50%) translateY(0); }
            100% { opacity:0; transform:translateX(-50%) translateY(-10px); }
        }


/* Related guide card */
    .coin-related-guide {
        display:flex; align-items:center; gap:1rem;
        margin: 1.5rem 0 1rem;
        padding: 1rem 1.25rem;
        background: linear-gradient(135deg, rgba(224,156,38,.08), rgba(224,156,38,.02));
        border: 1px solid rgba(224,156,38,.30);
        border-left: 3px solid var(--gold);
        border-radius: 10px;
        text-decoration: none;
        color: inherit;
        transition: border-color .15s, transform .15s, background .15s;
    }
    .coin-related-guide:hover {
        border-color: rgba(224,156,38,.55);
        background: linear-gradient(135deg, rgba(224,156,38,.14), rgba(224,156,38,.04));
        transform: translateY(-1px);
    }
    .coin-related-guide-icon { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
    .coin-related-guide-body { display: block; flex: 1 1 auto; min-width: 0; }
    .coin-related-guide-eyebrow {
        display: block;
        font-size: .68rem;
        font-weight: 800;
        color: #F5B340;
        text-transform: uppercase;
        letter-spacing: .12em;
        margin-bottom: .25rem;
    }
    .coin-related-guide-title {
        display: block;
        font-size: 1rem;
        font-weight: 800;
        color: var(--text-primary);
        margin-bottom: .15rem;
    }
    .coin-related-guide-sub {
        display: block;
        font-size: .82rem;
        color: var(--text-muted);
        line-height: 1.45;
    }
    .coin-related-guide-cta {
        font-size: 1.25rem;
        color: var(--gold);
        flex-shrink: 0;
        transition: transform .15s;
    }
    .coin-related-guide:hover .coin-related-guide-cta { transform: translateX(3px); }
    @media (max-width: 540px) {
        .coin-related-guide { padding: .85rem 1rem; gap: .75rem; }
        .coin-related-guide-icon { font-size: 1.25rem; }
        .coin-related-guide-title { font-size: .92rem; }
        .coin-related-guide-sub { font-size: .76rem; }
    }

    /* Discussion / comments styling - type-tagged threads with question-
       answer flow. Type colours stay tonally close to the rest of the site
       (gold + electric blue) but each tag is distinct enough to scan. */
    .disc-wrap { padding:2rem 0; }
    .disc-card { padding:1.25rem 1.5rem; }
    .disc-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem; margin-bottom:.85rem; }
    .disc-title { font-size:1.05rem; font-weight:700; margin:0; display:inline-flex; align-items:center; gap:.5rem; }
    .disc-count-pill {
        background:var(--bg-input); color:var(--text-secondary);
        padding:.1rem .5rem; border-radius:100px;
        font-size:.72rem; font-weight:600;
    }
    .disc-sort { display:flex; gap:.4rem; }
    .disc-sort button {
        background:transparent; border:1px solid var(--border);
        color:var(--text-muted); padding:.3rem .7rem;
        border-radius:6px; font-size:.78rem; cursor:pointer;
        transition: background .12s, color .12s, border-color .12s;
    }
    .disc-sort button:hover { color:var(--text-primary); border-color:var(--text-muted); }
    .disc-sort button.active { background:rgba(46,134,222,.15); border-color:var(--blue-primary); color:var(--blue-primary); }

    .disc-filters {
        display:flex; flex-wrap:wrap; gap:.4rem;
        margin-bottom:1rem; padding-bottom:.85rem;
        border-bottom:1px solid var(--border);
    }
    .disc-filter {
        background:transparent; border:1px solid var(--border);
        color:var(--text-muted); padding:.3rem .75rem;
        border-radius:100px; font-size:.78rem; cursor:pointer;
        white-space:nowrap; transition: background .12s, color .12s, border-color .12s;
    }
    .disc-filter:hover { color:var(--text-primary); border-color:var(--text-muted); }
    .disc-filter.active { background:rgba(46,134,222,.15); border-color:var(--blue-primary); color:var(--blue-primary); }
    .disc-filter .n { opacity:.7; margin-left:.25rem; }

    /* Composer */
    .disc-composer { margin-bottom:1.25rem; }
    .disc-types { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.5rem; }
    .disc-type {
        background:transparent; border:1px solid var(--border);
        color:var(--text-muted); padding:.32rem .65rem;
        border-radius:6px; font-size:.74rem; font-weight:600;
        cursor:pointer; display:inline-flex; align-items:center; gap:.3rem;
        transition: background .12s, color .12s, border-color .12s;
    }
    .disc-type[data-type="discussion"].active { background:rgba(150,160,170,.15); border-color:#aab1bc;     color:#cdd2da; }
    .disc-type[data-type="question"].active   { background:rgba(46,134,222,.15);  border-color:#2E86DE;     color:#5ea3e8; }
    .disc-type[data-type="tip"].active        { background:rgba(46,204,113,.15);  border-color:#2ecc71;     color:#7ad9a3; }
    .disc-type[data-type="story"].active      { background:rgba(155,89,182,.18);  border-color:#9b59b6;     color:#c89bdf; }
    .disc-type[data-type="correction"].active { background:rgba(243,156,18,.18);  border-color:#f39c12;     color:#f5b557; }
    .disc-type[data-type="identify"].active   { background:rgba(224,156,38,.18);  border-color:#E09C26;     color:#f0bd60; }
    .disc-textarea {
        width:100%; min-height:90px;
        background:var(--bg-input); border:1px solid var(--border);
        border-radius:var(--radius); padding:.75rem;
        color:var(--text-primary); font-family:inherit; font-size:.9rem;
        resize:vertical; box-sizing:border-box;
    }
    .disc-textarea:focus { outline:none; border-color:var(--blue-primary); }
    .disc-composer-bar { display:flex; justify-content:space-between; align-items:center; margin-top:.5rem; gap:.5rem; flex-wrap:wrap; }
    .disc-hint { font-size:.72rem; color:var(--text-muted); }
    .disc-hint code { background:var(--bg-input); padding:.05rem .3rem; border-radius:3px; font-size:.7rem; }

    .disc-signin {
        padding:1rem 1.15rem; background:var(--bg-input);
        border-radius:var(--radius); margin-bottom:1.25rem;
        font-size:.88rem; color:var(--text-muted);
        display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
    }

    /* Empty state */
    .disc-empty {
        text-align:center; padding:1.75rem 1rem;
        color:var(--text-muted); font-size:.9rem;
        border:1px dashed var(--border); border-radius:var(--radius);
    }
    .disc-empty p { margin:0 0 .85rem; }
    .disc-empty-prompts { display:flex; flex-wrap:wrap; gap:.45rem; justify-content:center; }

    /* Comment item */
    .comment-item { padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.04); }
    .comment-item:last-child { border-bottom:none; }
    .comment-item.reply { margin-left:2.5rem; padding-left:1rem; border-left:2px solid var(--border); margin-top:.5rem; margin-bottom:.5rem; padding-top:.6rem; padding-bottom:.6rem; border-bottom:none; }
    .comment-item.helpful-reply { background:rgba(46,204,113,.07); border-left-color:#2ecc71; border-radius:0 var(--radius) var(--radius) 0; }
    .comment-head { display:flex; align-items:center; gap:.55rem; margin-bottom:.35rem; flex-wrap:wrap; }
    .comment-avatar { width:30px; height:30px; border-radius:50%; object-fit:cover; flex-shrink:0; background:var(--bg-input); display:flex; align-items:center; justify-content:center; font-size:.85rem; }
    .comment-name { font-weight:600; font-size:.86rem; color:var(--text-primary); }
    .comment-name a { color:inherit; text-decoration:none; }
    .comment-name a:hover { color:var(--blue-primary); }
    .comment-time { font-size:.72rem; color:var(--text-muted); }
    .comment-edited { font-size:.7rem; color:var(--text-muted); font-style:italic; }
    .comment-body { font-size:.92rem; color:var(--text-secondary); line-height:1.55; margin-left:2.7rem; white-space:pre-line; word-wrap:break-word; }
    .comment-body a { color:var(--blue-primary); }
    .comment-body code { background:var(--bg-input); padding:.05rem .3rem; border-radius:3px; font-size:.85em; }
    .comment-actions { display:flex; align-items:center; gap:.85rem; margin-top:.45rem; margin-left:2.7rem; flex-wrap:wrap; }
    .comment-action {
        background:none; border:none; cursor:pointer;
        font-size:.78rem; color:var(--text-muted); padding:0;
        display:inline-flex; align-items:center; gap:.25rem;
    }
    .comment-action:hover { color:var(--text-primary); }
    .comment-action.danger:hover { color:var(--danger); }
    .comment-action.voted { color:var(--blue-primary); }

    /* Reputation pill - tracks the reputation_level enum on users */
    .rep-pill {
        font-size:.65rem; font-weight:700; padding:.1rem .4rem;
        border-radius:100px; text-transform:uppercase; letter-spacing:.04em;
    }
    .rep-newcomer   { background:rgba(150,160,170,.18); color:#aab1bc; }
    .rep-collector  { background:rgba(46,134,222,.18); color:#5ea3e8; }
    .rep-enthusiast { background:rgba(46,204,113,.18); color:#7ad9a3; }
    .rep-expert     { background:rgba(155,89,182,.22); color:#c89bdf; }
    .rep-authority  { background:rgba(243,156,18,.22); color:#f5b557; }
    .rep-legend     { background:linear-gradient(135deg,#E09C26,#f5b557); color:#1a1205; }

    /* Type badges on the comment itself */
    .type-badge {
        font-size:.66rem; font-weight:700; padding:.12rem .45rem;
        border-radius:4px; text-transform:uppercase; letter-spacing:.05em;
        display:inline-flex; align-items:center; gap:.25rem;
    }
    .type-badge.discussion { background:rgba(150,160,170,.18); color:#aab1bc; }
    .type-badge.question   { background:rgba(46,134,222,.18); color:#5ea3e8; }
    .type-badge.tip        { background:rgba(46,204,113,.18); color:#7ad9a3; }
    .type-badge.story      { background:rgba(155,89,182,.22); color:#c89bdf; }
    .type-badge.correction { background:rgba(243,156,18,.22); color:#f5b557; }
    .type-badge.identify   { background:rgba(224,156,38,.22); color:#f0bd60; }

    .answered-pill, .open-pill {
        font-size:.66rem; font-weight:700; padding:.12rem .45rem;
        border-radius:100px; text-transform:uppercase; letter-spacing:.05em;
    }
    .answered-pill { background:rgba(46,204,113,.2); color:#7ad9a3; }
    .open-pill     { background:rgba(243,156,18,.18); color:#f5b557; }

    .helpful-tick {
        background:#2ecc71; color:#0d1b13;
        width:18px; height:18px; border-radius:50%;
        display:inline-flex; align-items:center; justify-content:center;
        font-size:.7rem; font-weight:900; flex-shrink:0;
    }

    @media (max-width:540px) {
        .comment-item.reply { margin-left:1rem; padding-left:.75rem; }
        .comment-body, .comment-actions { margin-left:0; }
    }

    /* Image attachments */
    .img-attach-btn {
        background:transparent; border:1px dashed var(--border);
        color:var(--text-muted); padding:.32rem .6rem; border-radius:6px;
        font-size:.74rem; cursor:pointer;
        display:inline-flex; align-items:center; gap:.3rem;
    }
    .img-attach-btn:hover { color:var(--text-primary); border-color:var(--text-muted); }
    .img-attach-btn:disabled { opacity:.4; cursor:not-allowed; }

    .img-thumbs { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.5rem; }
    .img-thumb {
        position:relative; width:64px; height:64px; border-radius:6px;
        overflow:hidden; background:var(--bg-input); border:1px solid var(--border);
    }
    .img-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
    .img-thumb .rm {
        position:absolute; top:-4px; right:-4px;
        width:20px; height:20px; border-radius:50%;
        background:#e74c3c; color:#fff; border:2px solid var(--bg-deep, #0D1B2A);
        font-size:.7rem; line-height:1; cursor:pointer;
        display:flex; align-items:center; justify-content:center;
    }
    .img-thumb .rm:hover { background:#c0392b; }
    .img-thumb.uploading { opacity:.6; }
    .img-thumb .spinner {
        position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
        font-size:.75rem; color:#fff; background:rgba(0,0,0,.4);
    }

    /* Image grid inside a rendered comment */
    .comment-images {
        margin-left:2.7rem; margin-top:.55rem;
        display:flex; flex-wrap:wrap; gap:.45rem;
    }
    .comment-images img {
        max-height:160px; max-width:240px;
        object-fit:cover; border-radius:6px;
        border:1px solid var(--border); cursor:zoom-in;
        background:var(--bg-input);
    }
    @media (max-width:540px) {
        .comment-images { margin-left:0; }
        .comment-images img { max-height:120px; max-width:48%; }
    }

    /* Lightbox */
    .img-lightbox {
        position:fixed; inset:0; z-index:9999;
        background:rgba(0,0,0,.92);
        display:flex; align-items:center; justify-content:center;
        padding:1rem;
        animation: img-lb-in .15s ease-out;
    }
    @keyframes img-lb-in { from { opacity:0; } to { opacity:1; } }
    .img-lightbox img {
        max-width:96vw; max-height:92vh;
        border-radius:6px; box-shadow:0 8px 40px rgba(0,0,0,.6);
    }
    .img-lightbox .close {
        position:absolute; top:1rem; right:1.25rem;
        background:rgba(255,255,255,.1); color:#fff;
        border:none; width:38px; height:38px; border-radius:50%;
        font-size:1.4rem; cursor:pointer;
    }
    .img-lightbox .close:hover { background:rgba(255,255,255,.2); }