/*
 * CardBounty visual identity — tokens + base reskin (DESIGN.md).
 * Shared by frontend + backend via common\assets\ThemeAsset.
 * Navy = trust, amber = action/"bounty". Layered over Bootstrap 5.
 */

/* Self-hosted fonts (no CDN dependency — see feedback-self-host-everything
   memory rule). All three are SIL OFL / Apache 2.0 licensed so redistribution
   is fine. Latin subset only; CardBounty is US-only Phase 1a. Inter +
   Space Grotesk are variable fonts so a single .woff2 covers all weights;
   the @font-face blocks just declare the weight range we use.
     Inter (body)          — UI text, body copy
     Space Grotesk (display) — h1/h2 headings, wordmark
     Allura (script)       — autograph signatures on the wanted poster */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/inter-variable.woff2') format('woff2-variations');
}
@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url('fonts/space-grotesk-variable.woff2') format('woff2-variations');
}
@font-face {
    font-family: 'Allura';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/allura-regular.woff2') format('woff2');
}

:root {
    --cb-navy:    #122A3F;
    --cb-navy-700:#1C3B54;
    --cb-amber:   #F5A524;
    --cb-amber-600:#E0930F;
    --cb-paper:   #FAF7F2;
    --cb-surface: #FFFFFF;
    --cb-ink:     #1A2230;
    --cb-muted:   #5C6B7A;
    --cb-border:  #E7E0D6;
    --cb-green:   #1FA971;
    --cb-green-bg:#E7F6EF;
    --cb-chip:    #EEF3F7;

    /* Status palette — bounty/deal/response status chips. fg=text, bg=fill. */
    --cb-status-open-fg:      #1FA971;
    --cb-status-open-bg:      #E7F6EF;
    --cb-status-matched-fg:   #E0930F;
    --cb-status-matched-bg:   #FFF3D6;
    --cb-status-closed-fg:    #122A3F;
    --cb-status-closed-bg:    #EEF3F7;
    --cb-status-cancelled-fg: #9B2C2C;
    --cb-status-cancelled-bg: #FCE8E8;
    --cb-status-cancelled-bd: #F5C2C7;

    /* Footer dark surface */
    --cb-footer-link: #cfd8e0;

    /* Content widths used by the response/bounty/thread cards */
    --cb-content-width-md: 680px;
    --cb-content-width-lg: 760px;
    --cb-content-width-sm: 520px;
    --cb-content-width-xs: 160px;

    /* Category palette — sport identity, tied to FA glyphs in Bounty::categoryIcons() */
    --cb-cat-baseball:   #C0392B;  /* baseball red */
    --cb-cat-basketball: #E67E22;  /* orange leather */
    --cb-cat-football:   #7B3F00;  /* pigskin brown */
    --cb-cat-soccer:     #1FA971;  /* pitch green (reuses --cb-green hue) */
    --cb-cat-hockey:     #2C3E50;  /* ice-rink blue-black */
    --cb-cat-pokemon:    #F1C40F;  /* Pikachu yellow */
    --cb-cat-other:      #6b7280;  /* neutral grey — catch-all (MTG / Yu-Gi-Oh / Lorcana / etc.) */

    --cb-font-display: 'Space Grotesk', Inter, system-ui, sans-serif;
    --cb-font-body: Inter, system-ui, -apple-system, sans-serif;

    --cb-radius-chip: 6px;
    --cb-radius-input: 10px;
    --cb-radius-card: 14px;
    --cb-radius-frame: 18px;
    --cb-shadow: 0 1px 2px rgba(18,42,63,.06), 0 6px 18px rgba(18,42,63,.07);

    /* Map Bootstrap primary → navy so default components inherit the identity */
    --bs-primary: #122A3F;
    --bs-primary-rgb: 18,42,63;
    --bs-body-bg: #FAF7F2;
    --bs-body-color: #1A2230;
    --bs-body-font-family: Inter, system-ui, -apple-system, sans-serif;
}

body {
    background: var(--cb-paper);
    color: var(--cb-ink);
    font-family: var(--cb-font-body);
}

/* Readable muted text on light surfaces (Bootstrap's default is too faint here) */
.text-muted, .text-body-secondary { color: var(--cb-muted) !important; }

h1, h2, h3, .cb-wordmark, .cb-card-name {
    font-family: var(--cb-font-display);
    font-weight: 600;
    color: var(--cb-navy);
}

/* ── Top nav ─────────────────────────────────────────────────────────── */
.navbar.cb-nav { background: var(--cb-navy) !important; box-shadow: var(--cb-shadow); }
.cb-nav .nav-link { color: #D7E0E8 !important; }
.cb-nav .nav-link:hover, .cb-nav .nav-link:focus, .cb-nav .nav-link.active, .cb-nav .nav-link.show { color: #fff !important; }
.cb-nav .navbar-toggler { border-color: rgba(255,255,255,.3); }

/* Dropdown popup: always light + readable (no black-on-black) */
.cb-nav .dropdown-menu {
    background: #fff; border: 1px solid var(--cb-border);
    box-shadow: var(--cb-shadow); border-radius: 12px; padding: 6px; margin-top: 6px;
}
.cb-nav .dropdown-item { color: var(--cb-ink); border-radius: 8px; padding: 8px 12px; }
.cb-nav .dropdown-item:hover, .cb-nav .dropdown-item:focus { background: var(--cb-chip); color: var(--cb-navy); }
.cb-nav .dropdown-item:active { background: var(--cb-navy); color: #fff; }

.cb-wordmark {
    display: inline-flex; align-items: center; gap: .5rem;
    color: #fff !important; font-size: 1.15rem; letter-spacing: .2px;
}
.cb-wordmark .cb-tag { font-size: .65rem; font-weight: 600; color: var(--cb-amber) !important; }
/* Brand mark: ring with filled amber center (the "bounty dot") */
.cb-brand-dot {
    width: 18px; height: 18px; border-radius: 999px;
    border: 3px solid var(--cb-amber);
    box-shadow: inset 0 0 0 3px var(--cb-navy), inset 0 0 0 6px var(--cb-amber);
    display: inline-block;
}

/* ── Buttons (pill) ──────────────────────────────────────────────────── */
.btn { border-radius: 999px; padding: 10px 18px; font-weight: 600; }
.btn-sm { padding: 6px 14px; }
.cb-btn-amber { background: var(--cb-amber); color: var(--cb-navy); border: none; }
.cb-btn-amber:hover { background: var(--cb-amber-600); color: var(--cb-navy); }
.cb-btn-navy { background: var(--cb-navy); color: #fff; border: none; }
.cb-btn-navy:hover { background: var(--cb-navy-700); color: #fff; }

/* ── Surfaces ────────────────────────────────────────────────────────── */
.cb-card {
    background: var(--cb-surface); border: 1px solid var(--cb-border);
    border-radius: var(--cb-radius-card); box-shadow: var(--cb-shadow); padding: 16px;
}
.cb-chip {
    background: var(--cb-chip); color: var(--cb-navy); border-radius: var(--cb-radius-chip);
    font-size: 11px; font-weight: 600; padding: 2px 8px; display: inline-block;
}
/* Status chips — applied as modifiers on .cb-chip. Returned by the model
   helpers (Bounty/Deal/BountyResponse::getStatusBadgeClass). */
.cb-chip--status-open      { background: var(--cb-status-open-bg);      color: var(--cb-status-open-fg); }
.cb-chip--status-matched   { background: var(--cb-status-matched-bg);   color: var(--cb-status-matched-fg); }
.cb-chip--status-closed    { background: var(--cb-status-closed-bg);    color: var(--cb-status-closed-fg); }
.cb-chip--status-cancelled { background: var(--cb-status-cancelled-bg); color: var(--cb-status-cancelled-fg); }
.cb-chip--status-pending   { background: var(--cb-status-matched-bg);   color: var(--cb-status-matched-fg); }
.cb-chip--status-active    { background: var(--cb-status-matched-bg);   color: var(--cb-status-matched-fg); }
.cb-chip--status-done      { background: var(--cb-status-open-bg);      color: var(--cb-status-open-fg); }

/* Dashed empty-state placeholder (gallery, inbox thumb, etc.) */
.cb-placeholder-empty {
    width: 100%;
    border: 1px dashed var(--cb-border);
    border-radius: 12px;
    background: var(--cb-paper);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cb-muted);
    text-align: center;
    padding: 16px;
}
.cb-placeholder-empty--tall { min-height: 200px; }
.cb-placeholder-empty--short { min-height: 120px; }

/* Counter-offer price text helper (replaces inline color:var(--cb-amber-600);) */
.cb-text-counter { color: var(--cb-amber-600); }

/* Primary-photo thumb on the bounty/view "Your response" summary card */
.cb-response-thumb {
    width: 100%;
    max-height: 160px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--cb-border);
}

/* Cancelled-deal alert — Bootstrap subtle danger tokens with status fg color */
.cb-alert-cancelled {
    background: var(--cb-status-cancelled-bg);
    color: var(--cb-status-cancelled-fg);
    border: 1px solid var(--cb-status-cancelled-bd);
    border-radius: var(--cb-radius-input);
    padding: .75rem 1rem;
}

/* Category icons — colored FA glyphs per sport. Used on .cb-chip,
   sport-filter tab buttons, and anywhere a category surfaces. */
.cb-cat-icon { margin-right: 4px; font-size: .95em; }
/* On the active (navy) sport tab the colored icon would fight the white
   button text — override to white for legibility. Category chips keep
   their color since they sit on a light surface. */
.cb-btn-navy .cb-cat-icon,
.cb-btn-navy .cb-cat-icon[class*="cb-cat--"] { color: #fff !important; }
.cb-cat--baseball   { color: var(--cb-cat-baseball); }
.cb-cat--basketball { color: var(--cb-cat-basketball); }
.cb-cat--football   { color: var(--cb-cat-football); }
.cb-cat--soccer     { color: var(--cb-cat-soccer); }
.cb-cat--hockey     { color: var(--cb-cat-hockey); }
.cb-cat--pokemon    { color: var(--cb-cat-pokemon); }
.cb-cat--other      { color: var(--cb-cat-other); }
.cb-cat--none       { color: var(--cb-muted, #6b7280); }  /* "No preference" — neutral muted */

/* Refinement icons — Numbered / Autographed / Rookie / 1st Ed. / Holo.
   Mirrors the category-icon pattern: cb-ref-icon controls SIZE, the
   cb-ref--<key> class controls COLOR. Slightly larger than category
   icons since these are the main visual signal on a marketplace card. */
.cb-ref-icon         { margin-right: 4px; font-size: 1.05em; }
.cb-ref--numbered    { color: #C9982A; }  /* gold — serial-number cards */
.cb-ref--autographed { color: #1B5FB5; }  /* blue — pen ink */
.cb-ref--rookie      { color: #C0392B; }  /* RC red — classic baseball card */
.cb-ref--firsted     { color: #2E8B57; }  /* green — first-print marker */
.cb-ref--holo        { color: #8E44AD; }  /* purple — holographic shimmer */
.cb-ref-lead         { vertical-align: middle; }   /* "Wants:" prefix label */

/* Chip-style refinement TOGGLES for the bounty form — clickable previews
   of what the marketplace chip will look like. Hidden checkbox + styled
   label-as-button; checked state lights up the icon in its real color
   (mirrors the .cb-ref--<key> palette used on the marketplace card). */
.cb-ref-toggle-input {
    position: absolute; opacity: 0; pointer-events: none;
    width: 1px; height: 1px;
}
.cb-ref-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px 6px 8px;
    border: 1.5px solid var(--cb-border, #d7dee5);
    border-radius: 999px;
    cursor: pointer;
    background: #fff;
    color: var(--cb-muted, #6b7280);
    font-size: 13px;
    font-weight: 600;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
    user-select: none;
    margin: 0;
}
/* Explicit checkbox indicator — appears before the icon so users see this
   is an interactive control, not a static chip. Outline square when
   unchecked, filled with a white checkmark when checked. The fill colour
   follows the chip's currentColor so each refinement keeps its identity. */
.cb-ref-toggle::before {
    content: '';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border: 1.5px solid #B7C0CD;
    border-radius: 3px;
    background: #fff;
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 10px;
    color: #fff;
    line-height: 1;
    transition: background .12s ease, border-color .12s ease;
    flex-shrink: 0;
}
.cb-ref-toggle-input:checked + .cb-ref-toggle::before {
    content: '\f00c';  /* fa-check */
}
/* Per-refinement checkbox fill colours — match the chip's accent so the
   filled box reads as a coloured checkmark, not a generic dark blob. */
.cb-ref-toggle-input:checked + .cb-ref-toggle--numbered::before    { background: #C9982A; border-color: #C9982A; }
.cb-ref-toggle-input:checked + .cb-ref-toggle--autographed::before { background: #1B5FB5; border-color: #1B5FB5; }
.cb-ref-toggle-input:checked + .cb-ref-toggle--rookie::before      { background: #C0392B; border-color: #C0392B; }
.cb-ref-toggle-input:checked + .cb-ref-toggle--firsted::before     { background: #2E8B57; border-color: #2E8B57; }
.cb-ref-toggle-input:checked + .cb-ref-toggle--holo::before        { background: #8E44AD; border-color: #8E44AD; }
.cb-ref-toggle .cb-ref-icon {
    color: var(--cb-muted, #9ba6b5);
    font-size: 1.05em;
    margin-right: 0;
}
.cb-ref-toggle:hover {
    background: #F5F8FA;
    color: var(--cb-navy, #122A3F);
}
.cb-ref-toggle:hover .cb-ref-icon { filter: saturate(1.2); }

/* Checked state — colored icon + tinted background + matching border. */
.cb-ref-toggle-input:checked + .cb-ref-toggle {
    color: var(--cb-navy, #122A3F);
}
.cb-ref-toggle-input:focus-visible + .cb-ref-toggle {
    outline: 2px solid rgba(245,165,36,.55);
    outline-offset: 2px;
}
.cb-ref-toggle-input:checked + .cb-ref-toggle--numbered {
    background: rgba(201,152,42,.10); border-color: #C9982A;
}
.cb-ref-toggle-input:checked + .cb-ref-toggle--numbered .cb-ref-icon { color: #C9982A; }
.cb-ref-toggle-input:checked + .cb-ref-toggle--autographed {
    background: rgba(27,95,181,.09); border-color: #1B5FB5;
}
.cb-ref-toggle-input:checked + .cb-ref-toggle--autographed .cb-ref-icon { color: #1B5FB5; }
.cb-ref-toggle-input:checked + .cb-ref-toggle--rookie {
    background: rgba(192,57,43,.09); border-color: #C0392B;
}
.cb-ref-toggle-input:checked + .cb-ref-toggle--rookie .cb-ref-icon { color: #C0392B; }
.cb-ref-toggle-input:checked + .cb-ref-toggle--firsted {
    background: rgba(46,139,87,.10); border-color: #2E8B57;
}
.cb-ref-toggle-input:checked + .cb-ref-toggle--firsted .cb-ref-icon { color: #2E8B57; }
.cb-ref-toggle-input:checked + .cb-ref-toggle--holo {
    background: rgba(142,68,173,.10); border-color: #8E44AD;
}
.cb-ref-toggle-input:checked + .cb-ref-toggle--holo .cb-ref-icon { color: #8E44AD; }

/* Disabled state — same dim look for locked bounties (matched deal etc.). */
.cb-ref-toggle-input:disabled + .cb-ref-toggle {
    cursor: not-allowed; opacity: 0.55; background: #F5F8FA;
}

/* Notes-present indicator on the bounty card. Hover reveals the truncated
   note text via the native title tooltip; full note lives on /bounty/view.
   Muted styling — informational, not a status signal. */
.cb-notes-chip       { background: transparent; color: var(--cb-muted, #6b7280); cursor: help; }
.cb-notes-chip:hover { color: var(--cb-navy); }

/* Footer link helper — replaces inline color:#cfd8e0 */
.cb-footer { background: var(--cb-navy); color: var(--cb-footer-link); }
.cb-footer-link { color: var(--cb-footer-link); }
.cb-footer-link:hover { color: #fff; }

/* Faint top border between rows (replaces inline border-top:1px solid var(--cb-border);) */
.cb-row-divider { border-top: 1px solid var(--cb-border); }

/* Section-heading uppercase spacing (replaces inline letter-spacing:.5px on h6s) */
.cb-section-heading { letter-spacing: .5px; }

/* Page-width helpers — replace inline max-width on .cb-card wrappers */
.cb-page-md { max-width: var(--cb-content-width-md); }
.cb-page-lg { max-width: var(--cb-content-width-lg); }
.cb-page-sm { max-width: var(--cb-content-width-sm); }
.cb-input-xs { max-width: var(--cb-content-width-xs); }
.cb-form-md { max-width: 640px; }

/* Deal-row role pill min-width (replaces inline min-width:120px;) */
.cb-deal-role-col { min-width: 120px; }

/* Deal-row "your turn" indicator text (replaces inline color: var(--cb-amber-600);) */
.cb-deal-turn-mine { color: var(--cb-amber-600); }
.cb-wanted {
    background: var(--cb-amber); color: var(--cb-navy); border-radius: var(--cb-radius-chip);
    font-size: 11px; font-weight: 700; letter-spacing: .5px; padding: 2px 8px;
}

.form-control, .form-select { border-radius: var(--cb-radius-input); border-color: var(--cb-border); }
.form-control:focus, .form-select:focus {
    border-color: var(--cb-navy); box-shadow: 0 0 0 .2rem rgba(18,42,63,.12);
}

/* Readable placeholder text in form inputs (Bootstrap's default is too faint here) */
.form-control::placeholder, .form-select::placeholder {
    color: #9aa6b1; opacity: 1;
}

/* Input-group prefix/suffix ("$", icons) — explicit colors so they never
   inherit a dark-on-dark from Bootstrap's CSS-var cascade. */
.input-group-text {
    background-color: var(--cb-chip);
    color: var(--cb-navy);
    border-color: var(--cb-border);
}

/* Help text under form fields — explicit readable muted, not Bootstrap's faint secondary. */
.form-text {
    color: var(--cb-muted) !important;
    font-size: .85rem;
}

/* File input "Choose file" button.
   !important because Bootstrap's `.form-control:hover ::file-selector-button`
   rule wins specificity (4 classes vs our 3) and would otherwise paint our
   hover state with --bs-secondary-bg (dark-on-dark in some cascades). */
.form-control[type="file"]::file-selector-button,
.form-control[type="file"]::-webkit-file-upload-button {
    background-color: var(--cb-chip) !important;
    color: var(--cb-navy) !important;
    border: 0;
    border-right: 1px solid var(--cb-border);
    padding: .375rem .75rem;
    margin: -.375rem .75rem -.375rem -.75rem;
    cursor: pointer;
}
.form-control[type="file"]:hover::file-selector-button,
.form-control[type="file"]::file-selector-button:hover,
.form-control[type="file"]:hover::-webkit-file-upload-button,
.form-control[type="file"]::-webkit-file-upload-button:hover {
    background-color: #e0e8ef !important;
    color: var(--cb-navy) !important;
}

/* Fixed-top navbar clearance: rendered nav is ~60px (34px brand img + 16px
   py-2 padding + ~10px brand line-height/border). 60px is exact; site.css
   used to stack another 56px on `main > .container` which produced the
   ~128px dead band above the back-link. Now main handles clearance solo. */
main#main { padding-top: 60px; }

/* ── Marketing home ──────────────────────────────────────────────────── */
.cb-hero {
    background: linear-gradient(160deg, var(--cb-navy), var(--cb-navy-700));
    color: #fff; border-radius: var(--cb-radius-frame); padding: 56px 40px;
    box-shadow: var(--cb-shadow);
}
.cb-hero h1 { color: #fff; font-size: 2.4rem; line-height: 1.1; }
.cb-hero .cb-amber-text { color: var(--cb-amber); }
.cb-step-num {
    width: 34px; height: 34px; border-radius: 999px; background: var(--cb-amber);
    color: var(--cb-navy); font-weight: 700; display: inline-flex;
    align-items: center; justify-content: center; font-family: var(--cb-font-display);
}

/* ── Auth split card (reskins the skeleton login/signup) ─────────────── */
.login-brand-panel { background: linear-gradient(160deg, var(--cb-navy), var(--cb-navy-700)); text-align: center; }
.login-brand-panel img { margin-left: auto; margin-right: auto; }

/* Honeypot — visually hidden decoy field (real users never see/fill it) */
.cb-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Message bubbles (DESIGN.md): them=grey/left, me=navy/right */
.cb-msg-bubble {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(18,42,63,.05);
    font-size: 14px;
    line-height: 1.4;
}
.cb-msg-them { background: #fff; color: var(--cb-ink); border: 1px solid var(--cb-border); border-bottom-left-radius: 4px; }
.cb-msg-me { background: var(--cb-navy); color: #fff; border-bottom-right-radius: 4px; }
.cb-msg-sender { font-size: 11px; font-weight: 600; color: var(--cb-muted); margin-bottom: 2px; }
.cb-msg-body { white-space: pre-wrap; }
.cb-msg-meta { font-size: 11px; opacity: .65; margin-top: 4px; }
.cb-msg-me .cb-msg-meta { color: #cfd8e0; }
.cb-msg-photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cb-msg-photos img { max-width: 140px; max-height: 140px; border-radius: 8px; object-fit: cover; cursor: zoom-in; }
.cb-msg-me .cb-msg-photos img { border: 1px solid rgba(255,255,255,.2); }

/* Thread scroller (was inline styles on view.php) */
.cb-thread {
    max-height: 520px;
    overflow-y: auto;
    background: var(--cb-paper);
    border: 1px solid var(--cb-border);
    border-radius: 12px;
    padding: 14px;
}

/* Audit lines — centred, italic, no bubble. Distinct from chat. */
.cb-audit-row { display: flex; justify-content: center; margin: 8px 0; }
.cb-audit-line {
    display: inline-block;
    max-width: 90%;
    font-size: 12px;
    font-style: italic;
    color: var(--cb-muted);
    background: rgba(18,42,63,.04);
    border: 1px dashed var(--cb-border);
    border-radius: 999px;
    padding: 4px 12px;
    text-align: center;
    line-height: 1.5;
}
.cb-audit-line strong { color: var(--cb-navy); font-style: normal; }
.cb-audit-time { opacity: .75; margin-left: 4px; }
.cb-audit-link { color: var(--cb-navy); text-decoration: underline; font-style: normal; }
.cb-audit-link:hover { color: var(--cb-amber-600); }

/* Gallery — primary stage + thumb strip + nav buttons */
.cb-gallery { position: relative; }
.cb-gallery-stage {
    position: relative;
    border-radius: 12px;
    border: 1px solid var(--cb-border);
    background: #fff;
    overflow: hidden;
    outline: none;
}
.cb-gallery-stage:focus-visible { box-shadow: 0 0 0 3px rgba(245,165,36,.45); }
.cb-gallery-img {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    cursor: zoom-in;
}
.cb-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(18,42,63,.78);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s ease;
}
.cb-gallery-nav:hover { background: var(--cb-navy); }
.cb-gallery-prev { left: 8px; }
.cb-gallery-next { right: 8px; }
.cb-gallery-count {
    position: absolute;
    bottom: 8px;
    right: 10px;
    background: rgba(18,42,63,.78);
    color: #fff;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
}
.cb-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}
.cb-gallery-thumb {
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 8px;
    border: 2px solid transparent;
    background: transparent;
    overflow: hidden;
    cursor: pointer;
}
.cb-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-gallery-thumb.is-active { border-color: var(--cb-amber); }
.cb-gallery-thumb:hover { border-color: var(--cb-navy-700); }

/* 2-minute "oops" undo: × overlay on owner's recent uploads. Pure CSS
   position over the stage or thumbnail — the form is inside a sibling
   wrapper so it doesn't violate the no-nested-buttons HTML rule. */
.cb-gallery-thumb-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}
.cb-gallery-delete-form {
    position: absolute;
    top: 4px;
    right: 4px;
    margin: 0;
    line-height: 1;
    z-index: 2;
}
.cb-gallery-stage .cb-gallery-delete-form {
    top: 8px;
    right: 8px;
}
.cb-gallery-delete {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(20, 20, 20, .75);
    color: #fff;
    font-size: 11px;
    line-height: 22px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cb-gallery-delete:hover,
.cb-gallery-delete:focus-visible {
    background: #c0392b;
    outline: none;
}
.cb-gallery-stage .cb-gallery-delete {
    width: 28px;
    height: 28px;
    font-size: 13px;
}

/* Lightbox — fullscreen overlay with arrow nav + close */
.cb-no-scroll { overflow: hidden; }
.cb-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(10,18,28,.94);
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.cb-lightbox[hidden] { display: none; }
.cb-lightbox-img {
    max-width: 92vw;
    max-height: 86vh;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.cb-lightbox-close, .cb-lightbox-nav {
    position: absolute;
    background: rgba(255,255,255,.12);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: background .15s ease;
}
.cb-lightbox-close:hover, .cb-lightbox-nav:hover { background: rgba(255,255,255,.25); }
.cb-lightbox-close { top: 16px; right: 16px; }
.cb-lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.cb-lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }
.cb-lightbox-count {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 13px;
    background: rgba(255,255,255,.12);
    padding: 4px 12px;
    border-radius: 999px;
}

/* How-it-works step cards: faint navy shield watermark; number/text stay solid on top */
.cb-step { position: relative; overflow: hidden; }
.cb-step > * { position: relative; z-index: 1; }
.cb-step::after {
    content: ""; position: absolute; right: -14px; bottom: -16px;
    width: 132px; height: 132px; z-index: 0; opacity: .06; pointer-events: none;
    background: url(/images/cardbounty-shield-navy.png) no-repeat center / contain;
}
.login-btn { background: var(--cb-amber) !important; color: var(--cb-navy) !important; border: none; }
.login-btn:hover { background: var(--cb-amber-600) !important; color: var(--cb-navy) !important; }
.cb-wordmark-lg {
    font-family: var(--cb-font-display); font-weight: 700; font-size: 1.5rem;
    display: inline-flex; align-items: center; gap: .5rem;
}

/* Required-field indicator. Yii\widgets\ActiveField adds the `required`
   class to the FIELD WRAPPER div (e.g. `<div class="mb-3 field-x-y required">`),
   NOT the label itself. Target the label/.form-label inside that wrapper. */
.required > label::after,
.required > .form-label::after,
.required label.form-label::after {
    content: " *";
    color: var(--bs-danger, #dc3545);
    font-weight: 700;
    margin-left: 2px;
}
/* For hand-rolled (non-ActiveForm) labels we mark required explicitly. */
.form-label.cb-required::after {
    content: " *";
    color: var(--bs-danger, #dc3545);
    font-weight: 700;
    margin-left: 2px;
}

/* Big amber icon used by feature placeholder blocks (coming-soon pages
   and inline section stubs). Size modifier picks --xl for full-page
   focal use, --lg for inline section use. */
.cb-feature-icon { color: var(--cb-amber); line-height: 1; }
.cb-feature-icon--xl { font-size: 3em; }
.cb-feature-icon--lg { font-size: 2.5em; }

/* Compound nav slot — one verb shared by two anchor targets (e.g. "Browse
   Bounties / Listings"). Used when one menu slot has to cover two related
   destinations without doubling the visual weight. */
.cb-nav-compound { gap: .25rem; padding: .5rem 1rem; color: #D7E0E8; }
.cb-nav-compound__verb { color: inherit; }
.cb-nav-compound__target {
    color: #D7E0E8 !important;
    text-decoration: none;
    padding: 3px 10px;
    border-radius: 4px;
    transition: background-color .15s, color .15s, box-shadow .15s;
}
.cb-nav-compound__target:hover,
.cb-nav-compound__target:focus {
    color: var(--cb-navy) !important;
    background: var(--cb-amber);
    text-decoration: none;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.cb-nav-compound__sep { color: rgba(255,255,255,.35); }

/* Standalone nav-link variant that shares the amber-on-navy hover with
   cb-nav-compound__target so the whole left-nav row feels consistent on
   mouseover. Used by single-destination nav slots (e.g. My Activity). */
.cb-nav .nav-link.cb-nav-link-accent {
    border-radius: 4px;
    transition: background-color .15s, color .15s, box-shadow .15s;
}
.cb-nav .nav-link.cb-nav-link-accent:hover,
.cb-nav .nav-link.cb-nav-link-accent:focus {
    color: var(--cb-navy) !important;
    background: var(--cb-amber);
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    text-decoration: none;
}

/* Post CTA — amber pill with verb + two anchor targets, same compound
   pattern as cb-nav-compound but styled as an action button. */
.cb-post-cta {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    background: var(--cb-amber);
    color: #fff;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.5;
    box-shadow: 0 2px 6px rgba(0,0,0,.3);
    transition: box-shadow .15s, transform .15s;
}
.cb-post-cta:hover { box-shadow: 0 4px 10px rgba(0,0,0,.4); transform: translateY(-1px); }
.cb-post-cta__verb { white-space: nowrap; }
.cb-post-cta__target {
    color: #fff !important;
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,.6);
    padding: 0 4px;
    border-radius: 4px;
    transition: background-color .15s;
}
.cb-post-cta__target:hover,
.cb-post-cta__target:focus {
    color: #fff !important;
    background: rgba(0,0,0,.18);
    text-decoration-color: #fff;
}
.cb-post-cta__sep { opacity: .7; }

/* Navbar bell + unread badge — small chip overlapping the bell icon. */
.cb-bell-item { position: relative; }
.cb-bell-item .nav-link { position: relative; padding-right: 1rem; }
.cb-bell-badge {
    position: absolute;
    top: 4px;
    right: 0;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 999px;
    line-height: 1;
    transform: translate(40%, -30%);
}

/* Notifications list (CAP-7) — rows with icon + title + description. */
.cb-notifications { display: flex; flex-direction: column; gap: 8px; }
.cb-notif-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--cb-border);
    border-radius: 10px;
    transition: border-color .15s ease;
}
.cb-notif-row:hover { border-color: var(--cb-navy-700); cursor: pointer; }
/* Row is now an anchor; reset link styling so it reads as a card */
a.cb-notif-row { color: inherit; }
a.cb-notif-row:hover { color: inherit; }

/* Fixed-width date column sits between icon and content */
.cb-notif-date {
    flex: 0 0 auto;
    width: 130px;
    white-space: nowrap;
}
@media (max-width: 575px) {
    .cb-notif-date { width: 88px; font-size: 11px; }
}
.cb-notif-row--unread {
    border-left: 3px solid var(--cb-amber);
    background: linear-gradient(90deg, rgba(245,165,36,.04), transparent 14%);
}
.cb-notif-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cb-paper);
    color: var(--cb-navy);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cb-notif-row--unread .cb-notif-icon {
    background: var(--cb-amber);
    color: var(--cb-navy);
}
.cb-notif-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--cb-amber);
}

/* Buyer inbox (Responses to me) — flat list of incoming response threads. */
.cb-inbox { display: flex; flex-direction: column; gap: 10px; }
.cb-inbox-row {
    background: #fff;
    border: 1px solid var(--cb-border);
    border-radius: 12px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    display: block;
}
.cb-inbox-row:hover {
    border-color: var(--cb-amber);
    box-shadow: 0 4px 12px rgba(18,42,63,.08);
    transform: translateY(-1px);
}
.cb-inbox-thumb { width: 64px; height: 64px; }
.cb-inbox-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 8px; border: 1px solid var(--cb-border);
}
.cb-inbox-row--ownturn {
    border-left: 3px solid var(--cb-amber);
    background: linear-gradient(90deg, rgba(245,165,36,.05), transparent 14%);
}
.cb-inbox-thumb-empty {
    width: 100%; height: 100%;
    border-radius: 8px;
    border: 1px dashed var(--cb-border);
    background: var(--cb-paper);
    display: flex; align-items: center; justify-content: center;
    color: var(--cb-muted); font-size: 22px;
}

/* Condition chip group (Browse refine row) — checkbox-styled buttons.
   Toggle ↔ form submit applies all selected chips at once. */
.cb-cond-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cb-cond-chip-input {
    position: absolute;
    opacity: 0;
    width: 1px; height: 1px;
    pointer-events: none;
}
.cb-cond-chip {
    display: inline-block;
    padding: .25rem .65rem;
    border-radius: 999px;
    border: 1px solid var(--cb-border);
    background: #fff;
    color: var(--cb-ink);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
    transition: background .15s, border-color .15s, color .15s;
}
.cb-cond-chip:hover { border-color: var(--cb-navy-700); }
.cb-cond-chip-input:checked + .cb-cond-chip {
    background: var(--cb-navy);
    color: #fff;
    border-color: var(--cb-navy);
}
.cb-cond-chip-input:focus-visible + .cb-cond-chip {
    box-shadow: 0 0 0 3px rgba(245,165,36,.45);
}

/* Deal panel (CAP-5) — step ladder + rating UI for the thread view */
.cb-deal-panel { border-left: 3px solid var(--cb-amber); }
.cb-deal-steps {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
}
.cb-deal-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
}
.cb-deal-step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--cb-border);
    background: #fff;
    color: var(--cb-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}
.cb-deal-step-label {
    font-size: 11px;
    color: var(--cb-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-top: 4px;
    white-space: nowrap;
}
.cb-deal-step.is-done .cb-deal-step-dot { border-color: #1FA971; background: #1FA971; color: #fff; }
.cb-deal-step.is-done .cb-deal-step-label { color: var(--cb-ink); font-weight: 600; }
.cb-deal-step.is-now .cb-deal-step-dot { border-color: var(--cb-amber); background: var(--cb-amber); color: var(--cb-navy); }
.cb-deal-step.is-now .cb-deal-step-label { color: var(--cb-navy); font-weight: 700; }
.cb-deal-step-bar {
    flex-grow: 1;
    height: 3px;
    background: var(--cb-border);
    margin: 0 6px;
    border-radius: 2px;
    align-self: center;
    margin-top: -14px;
}
.cb-deal-step-bar.is-done { background: #1FA971; }

/* Star input (rating form) — clicking a star fills 1..n. Pure CSS via :checked. */
.cb-stars {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
    font-size: 22px;
}
.cb-stars .cb-star input { position: absolute; opacity: 0; pointer-events: none; }
.cb-stars .cb-star i { color: var(--cb-border); cursor: pointer; transition: color .15s ease; }
.cb-stars .cb-star:hover i,
.cb-stars .cb-star:hover ~ .cb-star i,
.cb-stars .cb-star input:checked ~ i,
.cb-stars .cb-star:has(input:checked) ~ .cb-star i { color: var(--cb-amber); }
/* Selected state survives mouse-out: any star whose sibling-after has a checked input */
.cb-stars:not(:hover) .cb-star input:checked ~ i { color: var(--cb-amber); }

/* Rating rows — small "rater → ratee ★★★★☆" cards */
.cb-rating-row {
    padding: 8px 10px;
    border: 1px solid var(--cb-border);
    border-radius: 8px;
    background: var(--cb-paper);
}
.cb-rating-stars { color: var(--cb-amber); font-size: 14px; }
.cb-rating-stars .far { color: var(--cb-border); }

/* Browse feed: cards the user has already responded to get a green chip in the
   header and a faint amber band on the left edge so the eye lands on what's
   new. The card body itself stays neutral so density doesn't suffer. */
.cb-chip--responded {
    background: var(--cb-green-bg, #e7f6ef);
    color: #1FA971;
    border-color: rgba(31,169,113,.25);
}
.cb-card--responded {
    border-left: 3px solid var(--cb-green, #1FA971);
    background: linear-gradient(90deg, rgba(31,169,113,.04), transparent 12%);
}
/* Buyer-side on /my-activity: amber border + soft fade when this bounty has
   one or more responses waiting. Mirrors --responded's shape but uses the CTA
   colour to read as "action waiting on you" vs. "you already acted". */
.cb-card--has-responses {
    border-left: 3px solid var(--cb-amber, #E67E22);
    background: linear-gradient(90deg, rgba(230,126,34,.06), transparent 14%);
}
/* Prominent response-count badge that replaces the dim "WANTED" tag in the
   top-right of a buyer's own bounty card on /my-activity. Calls the eye to
   the count + colour-matches the card's amber action-needed border. */
.cb-resp-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--cb-amber, #E67E22);
    color: #fff;
    font-size: 0.85em;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(230,126,34,.25);
}
.cb-resp-badge strong { font-weight: 700; margin-right: 2px; }
/* Unread badge on the buyer's own bounty card on /my-activity — small red
   pill cueing "notifications waiting on you in this thread". */
.cb-unread-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #FCE8E8;
    color: #C0392B;
    font-weight: 600;
    font-size: 0.85em;
    line-height: 1.2;
    white-space: nowrap;
}
.cb-unread-badge i { font-size: 0.55em; vertical-align: middle; }

/* "Needs your attention" zone — cross-section list at the top of My Activity.
   Compact one-line rows so the user can act without drilling into a section
   or tab. Distinct background from the regular cards so it reads as a
   priority surface, not just another row in the feed. */
.cb-attention {
    background: linear-gradient(180deg, rgba(230,126,34,.08), rgba(230,126,34,.02));
    border: 1px solid rgba(230,126,34,.25);
    border-left: 4px solid var(--cb-amber, #E67E22);
    border-radius: 8px;
    padding: 12px 16px;
}
.cb-attention-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: var(--cb-amber, #E67E22);
    font-size: 0.95em;
}
.cb-attention-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cb-attention-row {
    padding: 8px 10px;
    background: var(--cb-paper, #fff);
    border-radius: 6px;
    border: 1px solid var(--cb-border, #e1e5ea);
    transition: border-color .15s ease, transform .05s ease;
}
.cb-attention-row:hover { border-color: var(--cb-amber, #E67E22); }
.cb-attention-icon { width: 28px; text-align: center; font-size: 1.1em; }
.cb-attention-context { line-height: 1.35; }

/* Marketplace grid card — compact variant. Tighter padding + slightly
   smaller type so 4-across at lg/xl fits without scrolling on a laptop.
   Drops a few non-critical elements (rep stars next to handle stay; the
   condition chip below player gets a tighter rhythm). */
.cb-card--compact { padding: 12px 14px; }
.cb-card--compact .cb-card-name { font-size: 0.95em; }
.cb-card--compact .cb-chip { padding: 2px 8px; font-size: 0.78em; }
.cb-card--compact .cb-cat-icon { font-size: 0.85em; }
.cb-card--compact .cb-wanted { font-size: 0.7em; padding: 2px 6px; }
.cb-card--compact .cb-row-divider { padding-top: 6px !important; margin-top: 10px !important; }
.cb-card--compact .btn-sm {
    padding: 4px 10px;
    font-size: 0.82em;
}
.cb-card--compact .text-muted.small { font-size: 0.78em; }

/* Marketplace single-line list view. Each row is a flex strip that lines
   up across the page so a buyer can scan many bounties quickly. Auto
   2-col on lg+ to roughly double the rows visible per scroll — each item
   still has ~700px of horizontal room at standard laptop widths, enough
   for the player + meta + budget + CTA without truncation. Stacks to
   1-col below lg so tablet + phone stay readable. */
.cb-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}
@media (min-width: 992px) {
    .cb-list {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
}
.cb-list-row {
    padding: 6px 12px;
    background: var(--cb-paper, #fff);
    border: 1px solid var(--cb-border, #e1e5ea);
    border-radius: 6px;
    transition: border-color .15s ease;
    min-height: 36px;
}
.cb-list-row:hover { border-color: var(--cb-amber, #E67E22); }
.cb-list-icon { width: 24px; text-align: center; font-size: 1.05em; }
.cb-list-title { overflow: hidden; }
.cb-list-title .text-truncate { max-width: 100%; }
.cb-list-thread { padding: 2px 8px; line-height: 1.2; }

/* Condition quality colour-coding. Green-to-red gradient signals card
   quality at a glance — Graded (gold/premium, distinct category sitting
   above the raw scale), best (M/NM) green, mid (EX/VG) neutral-warm,
   low (G) warm. Codes (GR, M, NM, EX, VG, G) are generic collectible
   vocabulary (predate PSA by decades). Applied as a .cb-chip modifier;
   pairs with full text on detail surfaces, stands alone on dense
   surfaces (list row, compact card). Used by Bounty::conditionBadgeClass.
   Fair/Poor retired 2026-06-02 — rarely transacted. */
.cb-chip.cb-cond--graded { background: #F5E5C1; color: #7A5A1F; font-weight: 700; }
.cb-chip.cb-cond--m      { background: #D8F1E5; color: #156E47; font-weight: 700; }
.cb-chip.cb-cond--nm     { background: #E2F4EB; color: #1E865B; font-weight: 600; }
.cb-chip.cb-cond--ex     { background: #DBEFF3; color: #126D7C; font-weight: 600; }
.cb-chip.cb-cond--vg     { background: #FAEBD0; color: #8B5A0F; font-weight: 600; }
.cb-chip.cb-cond--g      { background: #F8DEC4; color: #964211; font-weight: 600; }

/* When the chip-radio form picker (bounty/_form, response/respond+edit) is
   in its un-checked default state, keep the chip readable but neutral so
   the user's selection visually pops. Active state inherits the per-code
   colour above via the existing `.cb-cond-chip-input:checked + .cb-cond-chip`
   selector — augmented below so radio-checked chips tint to their grade colour. */
/* Un-checked chip-radios/checkboxes show paper background — only the
   selected one(s) tint to the grade colour. */
.cb-cond-chip-input + .cb-cond-chip.cb-cond--graded,
.cb-cond-chip-input + .cb-cond-chip.cb-cond--m,
.cb-cond-chip-input + .cb-cond-chip.cb-cond--nm,
.cb-cond-chip-input + .cb-cond-chip.cb-cond--ex,
.cb-cond-chip-input + .cb-cond-chip.cb-cond--vg,
.cb-cond-chip-input + .cb-cond-chip.cb-cond--g { background: var(--cb-paper, #fff); color: inherit; }
/* Checked state tints to grade colour — overrides the generic navy rule
   above via more specific selectors. Applies to BOTH radio (form picker)
   and checkbox (marketplace filter). */
.cb-cond-chip-input:checked + .cb-cond-chip.cb-cond--graded { background: #F5E5C1; border-color: #7A5A1F; color: #7A5A1F; }
.cb-cond-chip-input:checked + .cb-cond-chip.cb-cond--m      { background: #D8F1E5; border-color: #156E47; color: #156E47; }
.cb-cond-chip-input:checked + .cb-cond-chip.cb-cond--nm     { background: #E2F4EB; border-color: #1E865B; color: #1E865B; }
.cb-cond-chip-input:checked + .cb-cond-chip.cb-cond--ex     { background: #DBEFF3; border-color: #126D7C; color: #126D7C; }
.cb-cond-chip-input:checked + .cb-cond-chip.cb-cond--vg     { background: #FAEBD0; border-color: #8B5A0F; color: #8B5A0F; }
.cb-cond-chip-input:checked + .cb-cond-chip.cb-cond--g      { background: #F8DEC4; border-color: #964211; color: #964211; }

/* Condition bar — 7 joined buttons that visually read as a slider (gradient
   left-to-right) but behave as independent click targets. Used on data-entry
   forms (post bounty, respond, edit). The multi-select marketplace filter
   keeps the chip pattern above. Each button always carries its grade colour
   at rest; selection emphasises with a ring + bold border + saturation. */
.cb-cond-bar {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--cb-border, #e1e5ea);
    background: var(--cb-paper, #fff);
    position: relative; /* anchor for the hidden radios so the browser's
                           native :invalid validation popup points here
                           instead of the page origin. */
}
.cb-cond-bar .cb-cond-bar-input { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cb-cond-bar-item {
    flex: 1;
    text-align: center;
    padding: 8px 4px;
    cursor: pointer;
    border-right: 1px solid var(--cb-border, #e1e5ea);
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    transition: filter .12s ease, transform .05s ease;
    user-select: none;
    line-height: 1.1;
}
.cb-cond-bar-item:last-child { border-right: 0; }
.cb-cond-bar-item strong { font-size: 1.05em; }
.cb-cond-bar-item .cb-cond-bar-sub { font-size: 0.7em; color: var(--cb-muted, #6b7280); }

/* At-rest grade-color tints — desaturated so the bar reads as a gradient
   strip without pulling focus from any single button. Graded leads with
   a gold tint (premium / distinct category). */
.cb-cond-bar-item.cb-cond--graded { background: #FBF0D4; color: #7A5A1F; }
.cb-cond-bar-item.cb-cond--m      { background: #EDF8F1; color: #156E47; }
.cb-cond-bar-item.cb-cond--nm     { background: #EEF7F2; color: #1E865B; }
.cb-cond-bar-item.cb-cond--ex     { background: #ECF5F7; color: #126D7C; }
.cb-cond-bar-item.cb-cond--vg     { background: #FAF1DC; color: #8B5A0F; }
.cb-cond-bar-item.cb-cond--g      { background: #FAE7D2; color: #964211; }

.cb-cond-bar-item:hover { filter: brightness(0.96); }

/* Selected — saturate background + thicker border, plus a focus ring so
   the picked button visibly sits "above" the bar. */
.cb-cond-bar-input:checked + .cb-cond-bar-item {
    box-shadow: inset 0 0 0 2px currentColor;
    filter: saturate(1.4);
}
.cb-cond-bar-input:checked + .cb-cond-bar-item.cb-cond--graded { background: #F5E5C1; }
.cb-cond-bar-input:checked + .cb-cond-bar-item.cb-cond--m      { background: #D8F1E5; }
.cb-cond-bar-input:checked + .cb-cond-bar-item.cb-cond--nm     { background: #E2F4EB; }
.cb-cond-bar-input:checked + .cb-cond-bar-item.cb-cond--ex     { background: #DBEFF3; }
.cb-cond-bar-input:checked + .cb-cond-bar-item.cb-cond--vg     { background: #FAEBD0; }
.cb-cond-bar-input:checked + .cb-cond-bar-item.cb-cond--g      { background: #F8DEC4; }
.cb-cond-bar-input:focus-visible + .cb-cond-bar-item {
    outline: 2px solid var(--cb-amber, #E67E22);
    outline-offset: -2px;
}

/* Category bar — same joined-button pattern as cb-cond-bar, but each button
   carries its sport icon + colour at rest (using the existing --cb-cat-*
   tokens). Selected button gets a stronger background ring. */
.cb-cat-bar {
    display: flex;
    flex-wrap: wrap; /* phones: wrap to 4+3; tablets+: single row of 7 */
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--cb-border, #e1e5ea);
    background: var(--cb-paper, #fff);
    position: relative; /* see .cb-cond-bar — anchors the native :invalid
                           popup so it points at the bar, not page origin. */
}
.cb-cat-bar .cb-cat-bar-input { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cb-cat-bar-item {
    /* flex-basis 25% so phones break to 4-per-row (= two rows of 4+3 for
       the 7 categories); media query below restores single-row on tablets+. */
    flex: 1 0 calc(25% - 0.1px);
    min-width: 0; /* allow shrink below content size — without this, the
                     'Basketball' / 'Pokémon' labels would force the row wider
                     than the viewport and overflow:hidden would clip the
                     last items off-screen on narrow iPhone viewports. */
    text-align: center;
    padding: 10px 6px;
    cursor: pointer;
    border-right: 1px solid var(--cb-border, #e1e5ea);
    border-top: 1px solid var(--cb-border, #e1e5ea); /* row-2 items in
                                                       phone-wrap layout get a
                                                       separator from row 1.
                                                       Hidden by the container
                                                       overflow on tablets+
                                                       where everything sits
                                                       on a single row. */
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    transition: filter .12s ease;
    user-select: none;
    line-height: 1.1;
}
.cb-cat-bar-item:nth-child(-n+8) { border-top: 0; } /* first row never needs
                                                      top border — children are
                                                      <input>+<label> pairs so
                                                      8 = first 4 labels */
.cb-cat-bar-item:last-child { border-right: 0; }

@media (min-width: 576px) {
    .cb-cat-bar-item { flex: 1 0 0; border-top: 0; } /* tablets+: classic single-row */
}
.cb-cat-bar-item i { font-size: 1.4em; }
.cb-cat-bar-item .cb-cat-bar-sub { font-size: 0.8em; color: var(--cb-muted, #6b7280); }
.cb-cat-bar-item:hover { filter: brightness(0.96); background: rgba(0,0,0,.02); }

.cb-cat-bar-input:checked + .cb-cat-bar-item {
    box-shadow: inset 0 0 0 2px currentColor;
}
.cb-cat-bar-input:checked + .cb-cat-bar-item.cb-cat--baseball   { background: rgba(192, 57, 43, .12); }
.cb-cat-bar-input:checked + .cb-cat-bar-item.cb-cat--basketball { background: rgba(230,126, 34, .14); }
.cb-cat-bar-input:checked + .cb-cat-bar-item.cb-cat--football   { background: rgba(123, 63,  0, .12); }
.cb-cat-bar-input:checked + .cb-cat-bar-item.cb-cat--hockey     { background: rgba( 44, 62, 80, .14); }
.cb-cat-bar-input:checked + .cb-cat-bar-item.cb-cat--soccer     { background: rgba( 31,169,113, .14); }
.cb-cat-bar-input:checked + .cb-cat-bar-item.cb-cat--pokemon    { background: rgba(241,196, 15, .20); }
.cb-cat-bar-input:checked + .cb-cat-bar-item.cb-cat--other      { background: rgba(107,114,128, .15); }
/* cb-cat--none on checked — same visual weight as the other categories
   (light tint + colored ring/icon via currentColor). Flips the rest-state
   muted grey to navy so the generic currentColor ring is visible against
   the tinted background. */
.cb-cat-bar-input:checked + .cb-cat-bar-item.cb-cat--none {
    color: var(--cb-navy, #122A3F);
    background: rgba(18, 42, 63, .12);
}
.cb-cat-bar-input:focus-visible + .cb-cat-bar-item {
    outline: 2px solid var(--cb-amber, #E67E22);
    outline-offset: -2px;
}

/* Empty-gallery upload zone — replaces the "No photos provided yet" placeholder
   with a clickable drop target for the seller. */
.cb-upload-zone {
    width: 100%;
    min-height: 200px;
    border: 1px dashed var(--cb-border);
    border-radius: 12px;
    background: var(--cb-paper);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    margin: 0;
}
.cb-upload-zone:hover { background: #fff; border-color: var(--cb-amber); }

/* ─── Wanted Poster ─────────────────────────────────────────────────────────
   Bounty detail hero — a vertical 2:3 trading-card-shaped poster that
   replaces the generic cb-card on /bounty/view. "Modern interpretation"
   of the wanted-poster metaphor — CardBounty palette, clean typography,
   decorative inset border, no sepia / vintage / distress.
   Content can push past the 2:3 aspect when long; the ratio is a target,
   not a cap. Details prose + owner actions live in a separate cb-card
   below the poster (see _bountyHeader.php). */

.cb-poster {
    background: var(--cb-paper);
    color: var(--cb-navy);
    width: 100%;
    max-width: 440px;
    aspect-ratio: 5 / 7;            /* trading-card proportions (close to 2:3) */
    border-radius: 14px;
    border: 1px solid var(--cb-border);
    box-shadow: 0 10px 28px rgba(18,42,63,.12), 0 2px 4px rgba(18,42,63,.06);
    padding: 28px 26px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
}
/* Decorative inset border — subtle double-rule effect that frames the
   content. Modern poster cue without going vintage. */
.cb-poster::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(18,42,63,.10);
    border-radius: 10px;
    pointer-events: none;
}

/* Top row: category + status chips on the left, WANTED chip on the right. */
.cb-poster__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    z-index: 1;
}
.cb-poster__chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* Thin horizontal rule between header and the hero name — repeats below
   the reward block to bracket the main content. */
.cb-poster__rule {
    border: 0;
    border-top: 1px solid rgba(18,42,63,.18);
    margin: 0;
    z-index: 1;
}

/* Hero: player / Pokémon name. Big, bold, centered. */
.cb-poster__name {
    margin: 4px 0 0;
    font-size: clamp(1.6rem, 3.4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    text-align: center;
    line-height: 1.05;
    z-index: 1;
}

/* Identity strip — year/set, card number, variation. Stacked, centered,
   muted. Each piece on its own line for poster rhythm. */
.cb-poster__identity {
    margin: 0;
    text-align: center;
    color: var(--cb-muted);
    z-index: 1;
}
.cb-poster__identity > * { display: block; margin-top: 2px; }
.cb-poster__set { font-size: 0.95rem; }
.cb-poster__cardnum {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9rem;
    color: var(--cb-navy);
}
.cb-poster__variation { font-size: 0.95rem; color: var(--cb-navy); font-weight: 500; }

/* Condition chip — centered on its own row. */
.cb-poster__condition { text-align: center; z-index: 1; }

/* Flag chips — only render when buyer required them. Centered cluster. */
.cb-poster__flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    z-index: 1;
}

/* Reward block — the payoff. Amber label (echoes WANTED chip color),
   bold large amount. Centered for poster symmetry. */
.cb-poster__reward {
    text-align: center;
    margin-top: auto;               /* push to bottom of poster before footer */
    z-index: 1;
}
.cb-poster__reward-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--cb-amber-600);
    text-transform: uppercase;
    letter-spacing: 0.18em;
}
.cb-poster__reward-amount {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--cb-navy);
    margin-top: 2px;
    line-height: 1.1;
}

/* Footer — posted by + ships from. Small, centered, muted. */
.cb-poster__footer {
    text-align: center;
    z-index: 1;
}
.cb-poster__buyer {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.cb-poster__handle { font-weight: 700; color: var(--cb-navy); }
.cb-poster__ships {
    color: var(--cb-muted);
    font-size: 0.85rem;
    margin-top: 2px;
}

/* Mobile — keep the 2:3 shape but let the poster fluidly size to the
   viewport. Content tightens slightly. */
@media (max-width: 480px) {
    .cb-poster { padding: 22px 18px; gap: 12px; }
    .cb-poster::before { inset: 8px; }
}

/* ─── Two-poster pair ──────────────────────────────────────────────────────
   Bounty detail renders TWO cards side by side:
     LEFT  (cb-poster--card)   — the card they want; trading-card conventions
                                 (RC badge, 1st Edition stamp, sport-color
                                 thin trim along the top edge).
     RIGHT (cb-poster--bounty) — the bounty meta; REWARD as hero, posted-by,
                                 ships-from, WANTED stamp anchored at bottom.
   Stack vertically on narrow viewports via flex-wrap. */

.cb-poster-pair {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    align-items: stretch;
    max-width: 920px;
}
.cb-poster-pair .cb-poster {
    flex: 1 1 380px;
    max-width: 440px;
}

/* Sport-color thin trim along the top edge of the card poster. Echoes
   the category color (the --cb-poster-trim custom property is set per
   bounty via inline style on the _bountyHeader.php side). */
.cb-poster--card {
    border-top: 4px solid var(--cb-poster-trim, var(--cb-navy));
}

/* Right-side bounty poster gets an amber trim — CardBounty brand accent
   so the two posters read as a paired set with distinct roles. */
.cb-poster--bounty {
    border-top: 4px solid var(--cb-amber);
}

/* Single-element header (only category or status chip — no WANTED).
   Aligns left so the chip sits at the top-left edge of the poster. */
.cb-poster__header--single { justify-content: flex-start; }

/* Reward as the hero of the bounty side — pushed UP under the top rule
   so it claims the upper half of the poster as the focal point. */
.cb-poster__reward--hero { margin-top: 12px; }
.cb-poster__reward--hero .cb-poster__reward-label { font-size: 0.85rem; }
.cb-poster__reward--hero .cb-poster__reward-amount { font-size: 2rem; }

/* "Buyer requires" block on the bounty side — text+icon chips for every
   flag the buyer set. Mirrors the left card's visual treatments
   (signature/RC badge/1st Ed stamp/etc.) in explicit chip form so
   text-oriented and screen-reader users get the full requirements list
   regardless of whether they parse the iconography on the left. */
.cb-poster__requires {
    text-align: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(18, 42, 63, .12);
    z-index: 1;
}
.cb-poster__requires-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cb-muted);
    margin-bottom: 6px;
}
.cb-poster__requires-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
}

/* On the bounty poster, push the footer (posted-by + ships-from) +
   WANTED strip down as a clustered bottom block. This avoids stranding
   WANTED at the bottom with a big gap above it; instead the bottom half
   of the poster reads as one continuous "who/where/wanted" group. */
.cb-poster--bounty .cb-poster__footer { margin-top: auto; }

.cb-poster__wanted-strip {
    text-align: center;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px dashed rgba(18,42,63,.18);
    z-index: 1;
}
.cb-poster__wanted-strip .cb-wanted {
    font-size: 13px;
    letter-spacing: 1.5px;
    padding: 4px 12px;
}

/* Art area — the "card photo" region of the card poster. Fills the
   visual middle between identity strip and condition; hosts real-card
   treatments instead of icon chips (autograph signature, sport texture,
   holo shimmer, numbered stamp). Wraps overlays positioned absolute. */
.cb-poster__art {
    flex: 1 1 auto;
    min-height: 80px;
    margin: 4px auto;
    width: 88%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* ─── Per-sport art-area textures (Round B) ─────────────────────────────
   Each sport gets a subtle CSS-only backdrop in the art area, drawn
   from real-card visual conventions. Kept low-saturation/low-contrast
   so the signature (Round A) stays the dominant element when both apply,
   and so empty (no-flag, no-auto) cards still have visual identity
   without screaming "decorative texture." All patterns are CSS gradient
   compositions — no image assets. */

/* Baseball — Topps cream paper + a thin red rule along the bottom,
   echoing classic Topps borders since the '50s. */
.cb-poster--cat-baseball .cb-poster__art {
    background-color: rgba(192, 57, 43, .03);
    background-image: linear-gradient(
        to bottom,
        transparent 0%,
        transparent calc(100% - 3px),
        rgba(192, 57, 43, .35) calc(100% - 3px),
        rgba(192, 57, 43, .35) calc(100% - 2px),
        transparent calc(100% - 2px),
        transparent 100%
    );
    border: 1px solid rgba(192, 57, 43, .12);
    border-radius: 3px;
}

/* Basketball — Panini Prizm refractor. Diagonal rainbow shimmer at low
   opacity. Static gradient (animated version reserved for Round C holo). */
.cb-poster--cat-basketball .cb-poster__art {
    background-image: linear-gradient(
        125deg,
        rgba(255, 87, 87, .05) 0%,
        rgba(255, 192, 64, .05) 22%,
        rgba(135, 235, 100, .05) 44%,
        rgba(64, 192, 255, .05) 66%,
        rgba(196, 96, 255, .05) 88%,
        rgba(255, 87, 87, .05) 100%
    );
    border: 1px solid rgba(230, 126, 34, .15);
    border-radius: 3px;
}

/* Football — pebbled pigskin/leather texture in brown. Multiple radial
   gradients at different sizes/positions for a natural-looking grain. */
.cb-poster--cat-football .cb-poster__art {
    background-color: rgba(123, 63, 0, .04);
    background-image:
        radial-gradient(circle at 22% 28%, rgba(123, 63, 0, .14) 1.5px, transparent 2px),
        radial-gradient(circle at 72% 65%, rgba(123, 63, 0, .11) 1.2px, transparent 1.8px),
        radial-gradient(circle at 55% 18%, rgba(123, 63, 0, .09) 1px, transparent 1.6px),
        radial-gradient(circle at 35% 80%, rgba(123, 63, 0, .12) 1.4px, transparent 2px),
        radial-gradient(circle at 85% 35%, rgba(123, 63, 0, .08) 1px, transparent 1.5px);
    background-size: 26px 26px, 19px 19px, 31px 31px, 23px 23px, 17px 17px;
    background-position: 0 0, 13px 9px, 6px 18px, 19px 4px, 9px 14px;
    border: 1px solid rgba(123, 63, 0, .15);
    border-radius: 3px;
}

/* Hockey — Upper Deck Young Guns red diagonal sash on white. The Young
   Guns rookie subset is THE rookie-card brand for hockey since '90-91. */
.cb-poster--cat-hockey .cb-poster__art {
    background-image: linear-gradient(
        135deg,
        transparent 0%,
        transparent 38%,
        rgba(200, 32, 38, .10) 38%,
        rgba(200, 32, 38, .10) 55%,
        transparent 55%,
        transparent 100%
    );
    border: 1px solid rgba(44, 62, 80, .12);
    border-radius: 3px;
}

/* Soccer — pitch turf hint: repeating vertical green stripes evoking the
   mowed-grass alternating stripes of a soccer field. */
.cb-poster--cat-soccer .cb-poster__art {
    background-image: repeating-linear-gradient(
        to right,
        rgba(31, 169, 113, .03) 0px,
        rgba(31, 169, 113, .03) 16px,
        rgba(31, 169, 113, .08) 16px,
        rgba(31, 169, 113, .08) 32px
    );
    border: 1px solid rgba(31, 169, 113, .15);
    border-radius: 3px;
}

/* Pokémon — vintage WoTC yellow border. The Base/Jungle/Fossil border was
   solid yellow framing the artwork box; we echo that with a thicker yellow
   border around the art area instead of the thin trim used elsewhere. */
.cb-poster--cat-pokemon .cb-poster__art {
    background-color: rgba(241, 196, 15, .06);
    border: 3px solid #F1C40F;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(241, 196, 15, .4);
}

/* Other (MTG / Yu-Gi-Oh / Lorcana / etc.) — neutral dashed border so the
   art area still reads as a "card photo box" even without sport identity. */
.cb-poster--cat-other .cb-poster__art {
    background-color: rgba(107, 114, 128, .03);
    border: 1px dashed rgba(107, 114, 128, .25);
    border-radius: 3px;
}

/* Autograph signature — script font rendering the player's name in
   blue ink with a natural rotation. Replaces the "Autographed" flag
   chip (the chip was redundant once we had a proper signature).
   Allura is self-hosted (see @font-face at the top of this file). */
.cb-poster__signature {
    font-family: 'Allura', 'Apple Chancery', 'Brush Script MT', cursive;
    font-size: clamp(1.6rem, 4.5vw, 2.6rem);
    color: #1B3A7B;            /* Bic-blue ballpoint ink */
    transform: rotate(-4deg);
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    padding: 4px 8px;
    /* Subtle ink-bleed shadow so the script reads as written ink on
       paper, not flat text. Two soft shadows mimic ink saturation. */
    text-shadow:
        0 0 1px rgba(27, 58, 123, .2),
        0 1px 2px rgba(27, 58, 123, .12);
}

/* Category watermark — sport-color FA glyph at low opacity centered in
   the art area. Acts as the "card photo" placeholder behind every other
   overlay (holo shimmer, signature, numbered stamp). Color inherits from
   the .cb-cat--* class applied to the wrapping watermark. */
.cb-poster__watermark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
    opacity: 0.08;
}
.cb-poster__watermark i {
    font-size: clamp(5rem, 14vw, 8rem);
    line-height: 1;
}
/* Each category's watermark icon tints to its sport color. The
   .cb-poster--cat-* class is on the parent poster (from PHP) so the
   descendant watermark inherits via the cb-cat-* CSS custom property. */
.cb-poster--cat-baseball   .cb-poster__watermark i { color: var(--cb-cat-baseball); }
.cb-poster--cat-basketball .cb-poster__watermark i { color: var(--cb-cat-basketball); }
.cb-poster--cat-football   .cb-poster__watermark i { color: var(--cb-cat-football); }
.cb-poster--cat-hockey     .cb-poster__watermark i { color: var(--cb-cat-hockey); }
.cb-poster--cat-soccer     .cb-poster__watermark i { color: var(--cb-cat-soccer); }
.cb-poster--cat-pokemon    .cb-poster__watermark i { color: var(--cb-cat-pokemon); }
.cb-poster--cat-other      .cb-poster__watermark i { color: var(--cb-cat-other); }

/* ─── Round C overlays: holo shimmer, numbered stamp, AUTO badge ─── */

/* Holo shimmer — drifting rainbow gradient overlay on the art area
   when holo=true. Mix-blend-mode: overlay so the colors interact with
   whatever sport texture is below (Pokemon yellow, basketball Prizm,
   etc.) instead of flatly covering them. Slow animation (~7s) reads
   as a gentle foil shimmer, not a distracting strobe. */
@keyframes cb-holo-drift {
    0%   { background-position:   0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}
.cb-poster__holo-shine {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        rgba(255, 100, 100, .22)  0%,
        rgba(255, 215, 100, .22) 18%,
        rgba(135, 235, 130, .22) 36%,
        rgba( 95, 210, 245, .22) 54%,
        rgba(200, 115, 255, .22) 72%,
        rgba(255, 100, 100, .22) 90%,
        rgba(255, 215, 100, .22) 100%
    );
    background-size: 280% 100%;
    mix-blend-mode: overlay;
    animation: cb-holo-drift 7s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
    /* Respect users who turn animations off. */
}
@media (prefers-reduced-motion: reduce) {
    .cb-poster__holo-shine { animation: none; background-position: 35% 50%; }
}

/* Numbered "/##" stamp — small paper-stamp aesthetic in the top-right
   of the art area. Generic placeholder (we don't know the actual print
   run for a bounty); reads as "any numbered parallel" visually. */
.cb-poster__numbered {
    position: absolute;
    top: 6px;
    right: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(18, 42, 63, .72);
    background: rgba(250, 247, 242, .9);
    padding: 2px 6px;
    border-radius: 3px;
    border: 1px solid rgba(18, 42, 63, .18);
    letter-spacing: 0.04em;
    line-height: 1;
    z-index: 2;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* AUTO badge — companion to RC badge, top-right corner, modeled on the
   Bowman Chrome / Topps Chrome autograph stamp convention. Champagne-
   gold gradient (slightly lighter than RC's deep gold so the two read
   as a pair, not a duplicate). Pairs with the script signature in the
   art area below — visual redundancy by intent. */
.cb-auto-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: linear-gradient(135deg, #F5E6B5 0%, #C9A957 100%);
    color: #4A2C00;
    font-family: var(--cb-font-body);
    font-weight: 900;
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    padding: 3px 7px;
    border-radius: 4px;
    border: 1.5px solid #8B6A1F;
    box-shadow: 0 1px 3px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.45);
    z-index: 3;
    line-height: 1;
}
/* When RC badge is also present, AUTO stacks below it (real Bowman
   Chrome RC+AUTO cards have both shields in the same corner). */
.cb-rc-badge ~ .cb-auto-badge {
    top: 48px;
}

/* ─── RC badge ─── gold shield, top-right corner of the card poster,
   modeled on the Topps/Bowman Chrome rookie-card stamp convention. */
.cb-rc-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: linear-gradient(135deg, #F0D24A 0%, #C99A3A 100%);
    color: #4A2C00;
    font-family: var(--cb-font-body);
    font-weight: 900;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1.5px solid #8B6A1F;
    box-shadow: 0 1px 3px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.4);
    z-index: 3;
    line-height: 1;
}

/* ─── 1st Edition stamp ─── vertical black-on-paper stamp, top-left,
   slightly rotated like a hand-applied ink stamp. Vintage Pokémon WoTC
   convention (1999-2003 Base/Jungle/Fossil/Team Rocket). */
.cb-firsted-stamp {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #1a1a1a;
    color: #FAF7F2;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-weight: 700;
    padding: 4px 5px 3px;
    border-radius: 3px;
    transform: rotate(-6deg);
    text-align: center;
    line-height: 1;
    width: 44px;
    z-index: 3;
    box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.cb-firsted-stamp__edition {
    display: block;
    font-size: 0.5rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.cb-firsted-stamp__num {
    display: block;
    font-size: 1.2rem;
    line-height: 1;
    margin-top: 0;
}

/* When BOTH stamps are present, the category chip in the header would
   collide with the 1st-Ed stamp on the left. Push the chip down a row. */
.cb-firsted-stamp ~ .cb-poster__header { padding-top: 28px; }

/* Mobile — stack the two posters vertically (handled by flex-wrap).
   Shrink the stamps slightly so they don't dominate small viewports. */
@media (max-width: 480px) {
    .cb-poster-pair { gap: 16px; }
    .cb-rc-badge { font-size: 0.7rem; padding: 3px 6px; top: 12px; right: 12px; }
    .cb-firsted-stamp { width: 30px; top: 12px; left: 12px; }
    .cb-firsted-stamp__num { font-size: 1rem; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Tabletop poster + share-by-link landing (/site/share)

   Single sheet designed to print 1:1 on letter or 11x17 — Ron prints the
   PDF and tapes it to his table at collectors' meets. Screen view is just
   "what the print will look like" so QR-scanners arrive at the same visual
   language they saw on the table.
   ════════════════════════════════════════════════════════════════════════════ */

.site-share {
    padding: 24px 16px 48px;
    background: var(--cb-paper, #FAF7F2);
}

.cb-poster {
    max-width: 720px;
    background: #fff;
    border: 1px solid var(--cb-border, #E7E0D6);
    border-radius: 14px;
    padding: 28px 36px 36px;
    box-shadow: 0 16px 40px rgba(18, 42, 63, .12);
    text-align: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.cb-poster__hero { margin: 0 auto 18px; }
.cb-poster__hero-img {
    max-width: 100%;
    max-height: 220px;
    height: auto;
    display: block;
    margin: 0 auto;
}

.cb-poster__headline {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 1.1;
    color: var(--cb-navy, #122A3F);
    margin: 8px 0 4px;
    letter-spacing: -0.01em;
}

.cb-poster__sub {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.2;
    margin: 0 0 24px;
}

.cb-poster__steps {
    list-style: none;
    counter-reset: cb-poster-step;
    padding: 0;
    margin: 0 0 28px;
    text-align: left;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}
.cb-poster__steps li {
    counter-increment: cb-poster-step;
    position: relative;
    padding: 4px 0 14px 52px;
    color: var(--cb-ink, #1A2230);
    font-size: 1.05rem;
    line-height: 1.45;
}
.cb-poster__steps li::before {
    content: counter(cb-poster-step);
    position: absolute;
    left: 0;
    top: 4px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--cb-amber, #F5A524);
    color: var(--cb-navy, #122A3F);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 38px;
    text-align: center;
}

.cb-poster__cta {
    background: var(--cb-navy, #122A3F);
    border-radius: 12px;
    padding: 24px 24px 22px;
    margin: 0 auto 22px;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 22px;
    text-align: left;
    max-width: 560px;
}
.cb-poster__qr-frame {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    flex: 0 0 auto;
    line-height: 0;
}
.cb-poster__qr {
    width: 160px;
    height: 160px;
    display: block;
}
.cb-poster__cta-text { flex: 1 1 auto; }
.cb-poster__url {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.15;
    color: var(--cb-amber, #F5A524);
}
.cb-poster__cta-line {
    font-size: 1rem;
    color: #cfd8e0;
    margin-top: 6px;
}

.cb-poster__footer {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cb-muted, #5C6B7A);
}

/* Print rules — hides global page chrome, expands type for tabletop
   legibility, forces background-color preservation so the navy CTA panel
   doesn't print as a white box with invisible amber text. Tested on
   Chrome print preview at Letter + 11x17. */
@media print {
    @page { margin: 0.4in; }

    /* Strip the flex column layout — paged output flows naturally as
       block. h-100 on <html>/<body> would otherwise clip the second page. */
    html, body {
        background: #fff !important;
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        display: block !important;
    }
    #main, main {
        flex: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }
    .container {
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Hide global page chrome by ID/class — NOT by element selectors,
       since the poster itself uses semantic <header> + <footer>. */
    #header, .navbar, #footer, .cb-footer, .alert,
    .cb-skip-link, .breadcrumb { display: none !important; }

    /* Force-preserve background colors. Without this, Chrome/Safari
       strip the navy CTA + amber step circles. */
    .cb-poster, .cb-poster__cta,
    .cb-poster__steps li::before,
    .cb-poster__qr-frame {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* Poster: drop the screen-mode card framing so the print fills the
       paper without shadow / border artifacts. */
    .site-share { padding: 0; background: #fff; }
    .cb-poster {
        max-width: none;
        box-shadow: none;
        border: none;
        padding: 0;
        page-break-inside: avoid;
    }

    /* Type bump for tabletop legibility — sized to fit a Letter portrait
       page without overflow. On 11x17 tabloid Ron will scale up at the
       print shop; the layout proportions stay correct either way. */
    .cb-poster__hero-img { max-height: 260px; }
    .cb-poster__headline { font-size: 2.8rem; margin-bottom: 4px; }
    .cb-poster__sub      { font-size: 1.7rem; margin-bottom: 28px; }
    .cb-poster__steps    { margin-bottom: 22px; }
    .cb-poster__steps li { font-size: 1.1rem; padding-left: 56px; padding-bottom: 10px; }
    .cb-poster__steps li::before { width: 40px; height: 40px; line-height: 40px; font-size: 1.2rem; }
    .cb-poster__cta      { padding: 18px 22px; gap: 22px; margin-bottom: 16px; }
    .cb-poster__qr       { width: 170px; height: 170px; }
    .cb-poster__url      { font-size: 1.5rem; line-height: 1.1; }
    .cb-poster__cta-line { font-size: 0.95rem; margin-top: 8px; }
    .cb-poster__footer   { font-size: 0.78rem; }

    /* Belt-and-suspenders against the still-overflowing edge cases:
       page-break-inside should keep the whole poster on one page even if
       sizing math is off by a few px. */
    .cb-poster, .cb-poster__cta, .cb-poster__steps li,
    .cb-poster__hero, .cb-poster__footer {
        page-break-inside: avoid;
        break-inside: avoid;
    }
}

/* Live handle-availability check on /site/signup. The states are set by
   js/signup-handle-check.js — `idle` hides the line, `checking` muted,
   `ok` green, `bad` red. */
.cb-handle-check { line-height: 1.2; }
.cb-handle-check--idle { display: none; }
.cb-handle-check--checking { color: var(--cb-muted, #5C6B7A); }
.cb-handle-check--ok       { color: var(--cb-green, #1FA971); font-weight: 600; }
.cb-handle-check--bad      { color: #C0392B; font-weight: 600; }