/* Bar creation.
 *
 * Moved out of templates/create_bar.html on 2026-08-31: the 1 top-level
 * block of it. 0 blocks stayed inline because they render inside
 * {% if %} and a <link> cannot be conditional.
 *
 * Inline CSS is re-sent on every request and cached by nobody.
 * url_for('static', ...) keys this URL on the file's own CONTENT hash
 * and serves it immutable for a year.
 */

    .create-page { max-width: 100%; margin: 3rem auto; padding: 0 1.5rem; }
    .create-page > h1 { text-align: center; font-size: 2rem; margin-bottom: 0.5rem; }
    .create-page > .subtitle { text-align: center; color: var(--text-secondary); margin-bottom: 2.5rem; }

    .create-layout {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
        align-items: start;
    }

    /* Free create panel */
    .create-panel {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 2rem;
    }
    .create-panel h2 {
        font-size: 1.3rem; margin-bottom: 0.25rem;
        display: flex; align-items: center; gap: 0.5rem;
    }
    .create-panel h2 .free-badge {
        font-size: 0.7rem; font-weight: 800; color: var(--green);
        background: rgba(46, 204, 113, 0.12); padding: 0.2rem 0.6rem;
        border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em;
    }
    .create-panel .panel-sub { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 1.5rem; }

    .step-section { margin-bottom: 1.5rem; }
    .step-label {
        display: flex; align-items: center; gap: 0.75rem;
        margin-bottom: 0.75rem; font-weight: 700; font-size: 1rem;
    }
    .step-num {
        width: 28px; height: 28px; border-radius: 50%;
        background: var(--btn-gradient);
        display: flex; align-items: center; justify-content: center;
        font-size: 0.75rem; font-weight: 800; flex-shrink: 0;
    }

    .bar-name-input {
        width: 100%; padding: 0.8rem 1rem; font-size: 1rem;
        background: var(--bg-card-solid); border: 2px solid var(--border); border-radius: 8px;
        color: var(--text-heading); outline: none; transition: border-color 0.2s;
        font-family: 'Inter', 'Noto Sans Thai', sans-serif;
    }
    .bar-name-input:focus { border-color: var(--accent); }

    .colour-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; }
    .colour-option {
        width: 55px; height: 55px; border-radius: 10px; cursor: pointer;
        border: 3px solid transparent; transition: all 0.15s; position: relative;
    }
    /* Strong selected state: blue ring + checkmark badge so it's
       unmistakable on dark theme. */
    .colour-option.selected {
        border-color: #3b82f6;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.28);
        transform: scale(1.08);
    }
    .colour-option.selected::after {
        content: '✓';
        position: absolute; top: -6px; right: -6px;
        width: 20px; height: 20px; border-radius: 50%;
        background: #3b82f6; color: #fff;
        font-size: 0.75rem; font-weight: 800;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    }
    .colour-option input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
    .colour-name {
        position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
        font-size: 0.55rem; color: var(--text-secondary); white-space: nowrap;
    }

    .logo-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .logo-option {
        width: 58px; height: 58px; border-radius: 10px; cursor: pointer;
        border: 2px solid var(--border); background: var(--bg-card-solid);
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        transition: all 0.15s; gap: 0.15rem; position: relative;
    }
    .logo-option.selected {
        border-color: #3b82f6;
        background: color-mix(in srgb, #3b82f6 12%, var(--bg-card-solid));
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.22);
    }
    .logo-option.selected::after {
        content: '✓';
        position: absolute; top: -6px; right: -6px;
        width: 18px; height: 18px; border-radius: 50%;
        background: #3b82f6; color: #fff;
        font-size: 0.7rem; font-weight: 800;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    }
    .logo-option:hover { border-color: #3b82f6; }
    .logo-option input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
    .logo-option .icon { font-size: 1.4rem; }
    .logo-option .label { font-size: 0.5rem; color: var(--text-secondary); }

    /* Vibe + location chip selectors */
    .personality-section { margin-bottom: 1.5rem; }
    .personality-label {
        font-size: 0.7rem; font-weight: 700; color: var(--text-muted);
        text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem;
    }
    .chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
    .chip-option {
        padding: 0.35rem 0.7rem; border-radius: 999px; cursor: pointer;
        border: 1.5px solid var(--border); background: var(--bg-card-solid);
        font-size: 0.75rem; font-weight: 600; color: var(--text-secondary);
        transition: border-color 0.15s, color 0.15s, background 0.15s;
        user-select: none;
    }
    .chip-option input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
    .chip-option.selected {
        border-color: var(--accent);
        color: var(--text-heading);
        background: color-mix(in srgb, var(--accent) 10%, transparent);
    }
    .chip-option:hover { border-color: var(--accent); color: var(--text-heading); }

    .submit-btn {
        display: block; width: 100%; padding: 0.9rem; font-size: 1rem;
        font-weight: 800; color: var(--text-heading); border: none; border-radius: 50px; cursor: pointer;
        background: var(--btn-gradient);
        box-shadow: 0 4px 24px var(--btn-shadow);
        transition: transform 0.2s, box-shadow 0.2s;
        font-family: 'Inter', 'Noto Sans Thai', sans-serif;
    }
    .submit-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px color-mix(in srgb, var(--scheme-primary) 50%, transparent); }

    .error { color: var(--accent); text-align: center; margin-bottom: 1rem; font-size: 0.9rem; }

    /* Marketplace panel */
    .market-panel {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 16px;
        padding: 2rem;
        display: flex;
        flex-direction: column;
    }
    .market-panel h2 {
        font-size: 1.3rem; margin-bottom: 0.25rem;
        display: flex; align-items: center; gap: 0.5rem;
    }
    .market-panel h2 .market-badge {
        font-size: 0.7rem; font-weight: 800; color: var(--gold);
        background: rgba(255, 215, 0, 0.12); padding: 0.2rem 0.6rem;
        border-radius: 20px; text-transform: uppercase; letter-spacing: 0.05em;
    }
    .market-panel .panel-sub { color: var(--text-secondary); font-size: 0.85rem; margin-bottom: 1.5rem; }

    .listing-list {
        display: flex; flex-direction: column; gap: 0.75rem;
        flex: 1; min-height: 0; overflow-y: auto; padding-right: 0.4rem; margin-right: -0.4rem;
        scrollbar-width: thin;
        scrollbar-color: color-mix(in srgb, var(--gold) 50%, transparent) transparent;
    }
    .listing-list::-webkit-scrollbar { width: 5px; }
    .listing-list::-webkit-scrollbar-track { background: transparent; }
    .listing-list::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--gold) 45%, transparent);
        border-radius: 999px;
    }
    .listing-list::-webkit-scrollbar-thumb:hover {
        background: color-mix(in srgb, var(--gold) 70%, transparent);
    }

    .no-listings {
        flex: 1; display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        color: var(--text-muted); font-size: 0.9rem; text-align: center;
    }

    .listing-card {
        background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px;
        padding: 1rem 1.25rem; display: flex; align-items: center; gap: 1rem;
        transition: border-color 0.2s;
    }
    .listing-card:hover { border-color: var(--gold); }

    .listing-logo {
        width: 44px; height: 44px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.3rem; flex-shrink: 0;
    }
    .listing-info { flex: 1; }
    .listing-info h4 { font-size: 0.95rem; color: var(--text-heading); margin-bottom: 0.15rem; }
    .listing-info .listing-meta {
        font-size: 0.75rem; color: var(--text-secondary);
    }
    .listing-info .listing-meta span { margin-right: 0.75rem; }
    .listing-info .seller { font-size: 0.7rem; color: var(--accent); }

    /* The stat row. Wraps rather than scrolls, because the marketplace
       column is already the narrow half of the split on desktop and the
       whole width on a phone, and a stat you have to swipe to reach is a
       stat nobody reads. tabular-nums so the numbers line up down the
       list when you are comparing two listings. */
    .listing-info .listing-stats {
        display: flex; flex-wrap: wrap; gap: 0.15rem 0.7rem;
        font-size: 0.72rem; color: var(--text-secondary);
        margin: 0.25rem 0 0.3rem;
        font-variant-numeric: tabular-nums;
    }
    .listing-info .listing-stats span { white-space: nowrap; }
    /* League badge is the shared .tier-badge from _tier_badge.html, whose
       CSS ships in base.html. Do not restyle it here: the league colours
       are meant to read identically on /compete, /leaderboard and here. */

    .listing-right { text-align: right; flex-shrink: 0; }
    .listing-price { font-size: 1.1rem; font-weight: 800; color: var(--gold); margin-bottom: 0.4rem; }
    .buy-bar-btn {
        padding: 0.5rem 1.2rem; border: none; border-radius: 50px;
        font-weight: 700; font-size: 0.8rem; cursor: pointer; color: var(--text-heading);
        background: linear-gradient(135deg, var(--gold), #ffaa00);
        transition: transform 0.2s;
        font-family: 'Inter', 'Noto Sans Thai', sans-serif;
    }
    .buy-bar-btn:hover { transform: scale(1.05); }
    .buy-bar-btn:disabled { opacity: 0.3; cursor: not-allowed; }

    .balance-note {
        text-align: center; font-size: 0.8rem; color: var(--text-secondary);
        margin-top: 1rem; padding: 0.5rem;
        background: rgba(255, 215, 0, 0.05); border-radius: 8px;
    }
    .balance-note strong { color: var(--gold); }

    @media (max-width: 768px) {
        .create-layout { grid-template-columns: 1fr; }
    }

    /* Logged-out users see Build From Scratch only — no marketplace column.
       Single column with a comfortable reading width, centered in the page
       (without the cap it stretches full-bleed and the form hugs the left). */
    .create-layout.solo-build {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin: 0 auto;
    }

    /* Desktop: personality-section uses <details> for mobile collapse, but
       must always show as a flat fieldset on desktop. Hide the summary and
       reveal the body regardless of the open attribute. */
    @media (min-width: 768px) {
        details.personality-section > summary.m-onb-personalise-toggle { display: none; }
        details.personality-section > .m-onb-personalise-body { display: block !important; }
    }

    /* ---- Desktop live-preview bar card (.d-only — theme tokens only) ----
       Client-side preview that mirrors the chosen name / colour / logo so
       the payoff is visible before committing. Gradient is set in JS from
       the existing `colours` context (not hardcoded). */
    .onb-preview { margin-bottom: 1.75rem; }
    .onb-preview .a-eyebrow { display: block; margin-bottom: 0.6rem; }
    .prev {
        border-radius: var(--r-lg, 20px); overflow: hidden;
        border: 1px solid var(--border);
        box-shadow: var(--shadow-card, 0 10px 28px -14px rgba(20, 20, 40, .35));
    }
    .prev .prev-top {
        padding: 1.4rem 1.5rem; color: #fff;
        background: linear-gradient(135deg, var(--scheme-primary), var(--scheme-secondary));
        transition: background 0.25s ease;
    }
    .prev .prev-top-row { display: flex; align-items: center; gap: 0.9rem; }
    .prev .prev-logo {
        width: 60px; height: 60px; border-radius: 16px; flex-shrink: 0;
        background: rgba(255, 255, 255, 0.18);
        display: flex; align-items: center; justify-content: center; font-size: 1.9rem;
    }
    .prev .prev-name {
        font-weight: 900; font-size: 1.45rem; line-height: 1.1;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); word-break: break-word;
    }
    .prev .prev-sub { font-size: 0.85rem; opacity: 0.9; margin-top: 0.15rem; }
    .prev .prev-body {
        background: var(--bg-card); color: var(--text-secondary);
        padding: 1rem 1.25rem;
    }
    .prev .prev-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .prev .prev-note { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.75rem; }

    /* ---- Mobile live-preview bar card (.m-only — --mc-* tokens only) ---- */
    .m-onb-preview {
        margin: 0.25rem 0 1.25rem; border-radius: 16px; overflow: hidden;
        border: 1px solid var(--mc-border);
        box-shadow: 0 8px 24px -16px rgba(20, 20, 40, 0.4);
    }
    .m-onb-preview .m-prev-top {
        padding: 1.1rem 1.15rem; color: #fff;
        background: linear-gradient(135deg, var(--mc-accent), var(--mc-accent-2));
        transition: background 0.25s ease;
    }
    .m-onb-preview .m-prev-top-row { display: flex; align-items: center; gap: 0.75rem; }
    .m-onb-preview .m-prev-logo {
        width: 48px; height: 48px; border-radius: 14px; flex-shrink: 0;
        background: rgba(255, 255, 255, 0.2);
        display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
    }
    .m-onb-preview .m-prev-name {
        font-weight: 900; font-size: 1.2rem; line-height: 1.1; word-break: break-word;
    }
    .m-onb-preview .m-prev-sub { font-size: 0.78rem; opacity: 0.9; margin-top: 0.1rem; }
    .m-onb-preview .m-prev-body {
        background: var(--mc-card); padding: 0.7rem 1rem;
        display: flex; flex-wrap: wrap; gap: 0.4rem;
    }
    .m-prev-pill {
        display: inline-flex; align-items: center; gap: 4px;
        font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
        background: var(--mc-inset); color: var(--mc-text-sec); border: 1px solid var(--mc-border-sub);
    }
    .m-prev-pill.blue {
        background: color-mix(in srgb, var(--mc-accent) 12%, #fff);
        color: var(--mc-accent); border-color: color-mix(in srgb, var(--mc-accent) 30%, transparent);
    }
    .m-prev-pill.gold {
        background: color-mix(in srgb, var(--mc-gold) 14%, #fff);
        color: var(--mc-gold); border-color: color-mix(in srgb, var(--mc-gold) 32%, transparent);
        font-variant-numeric: tabular-nums;
    }