/**
 * Finboard — User Portfolio + Famous Portfolios.
 *
 * Two surfaces:
 *   1. User portfolio card (rendered on profile + /community/portfolio/<user>/)
 *   2. Famous portfolios index grid + Copy modal
 *
 * Uses the same --fb-* tokens as finboard-v4.css so dark/light themes
 * inherit automatically.
 */

/* ═══════════════════════════════════════════════════════════════════
 * USER PORTFOLIO — card container
 * ═══════════════════════════════════════════════════════════════════ */
.finboard-portfolio-card {
    /* Match the community post card's surface tokens so detail pages
     * (famous portfolios, user portfolio) sit on the same elevation
     * and texture as the rest of the community feed. */
    background: var(--fb-bg-card, #fff);
    border: 1px solid var(--fb-border, #e5e7eb);
    border-radius: var(--fb-radius, 12px);
    box-shadow: var(--fb-neu-out-sm, 0 2px 8px rgba(0,0,0,0.05));
    padding: 18px 20px;
    color: var(--fb-text, #1f2937);
}

.finboard-portfolio-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.finboard-portfolio-card__meta { min-width: 0; }
.finboard-portfolio-card__title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
}
.finboard-portfolio-card__badge {
    display: inline-block;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 999px;
    background: var(--fb-bg, #f4f4f5);
    color: var(--fb-text-muted, #6b7280);
}
.finboard-portfolio-card__badge--complete {
    background: rgba( 196, 146, 10, 0.12 );
    color: #c4920a;
}

/* Donut + legend body (replaces the old stacked bar) */
.finboard-portfolio-card__body {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 28px;
    align-items: center;
    margin-bottom: 18px;
}
@media (max-width: 640px) {
    .finboard-portfolio-card__body { grid-template-columns: 1fr; gap: 18px; justify-items: center; }
}
.finboard-portfolio-pie {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    /* Hairline rim + soft drop shadow lift the chart off the card
     * surface so it reads as a designed artefact rather than a flat
     * CSS gradient. The 1px ring uses gold rgba (instead of var() so
     * it remains visible against either light or dark card bg). */
    box-shadow:
        0 0 0 1px rgba(232,169,16,0.18),
        0 8px 28px rgba(0,0,0,0.10);
}
.finboard-portfolio-pie::after {
    content: '';
    position: absolute;
    inset: 34px;
    /* Donut hole tracks the card bg so it reads as a hole through the
     * card surface, not a separate panel sitting on top. The hairline
     * ring around the hole's outer edge mirrors the donut's outer rim
     * for visual symmetry. */
    background: var(--fb-bg-card, #fff);
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(232,169,16,0.14),
        inset 0 1px 3px rgba(0,0,0,0.08);
}
.finboard-portfolio-pie__center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    z-index: 1; text-align: center; padding: 0 12px;
}
.finboard-portfolio-pie__return {
    /* Bumped from 28→32 + tighter tracking so the return % anchors
     * the chart and is the first thing the eye lands on. */
    font-size: 32px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.025em;
}
.finboard-portfolio-pie__return--up   { color: #16a34a; }
.finboard-portfolio-pie__return--down { color: #dc2626; }
.finboard-portfolio-pie__sub {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
    color: var(--fb-text-muted, #6b7280);
    margin-top: 8px;
    position: relative;
}
/* Tiny hairline divider above the sub-label — separates the big return
 * % from the descriptor without forcing extra whitespace. */
.finboard-portfolio-pie__sub::before {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    background: var(--fb-border, rgba(0,0,0,0.10));
    margin: 0 auto 6px;
}

/* Legend / holdings list */
.finboard-portfolio-legend {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
}
.finboard-portfolio-legend__row {
    display: grid;
    grid-template-columns: 12px 60px 1fr 60px 70px;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--fb-border-soft, #f3f4f6);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
/* Static rows (famous portfolios) — no live change column to fill,
 * so collapse the grid to 4 columns instead of leaving an empty "—". */
.finboard-portfolio-legend__row--static {
    grid-template-columns: 12px 60px 1fr 60px;
}
.finboard-portfolio-legend__row:last-child { border-bottom: 0; }
.finboard-portfolio-legend__dot { width: 10px; height: 10px; border-radius: 50%; }
.finboard-portfolio-legend__sym { font-weight: 700; }
.finboard-portfolio-legend__name {
    color: var(--fb-text-muted, #6b7280);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.finboard-portfolio-legend__weight { text-align: right; font-weight: 600; }
.finboard-portfolio-legend__change { text-align: right; color: var(--fb-text-muted, #6b7280); }
.finboard-portfolio-legend__change--up   { color: #16a34a; }
.finboard-portfolio-legend__change--down { color: #dc2626; }

@media (max-width: 640px) {
    .finboard-portfolio-legend__row { grid-template-columns: 12px 56px 1fr 60px; }
    .finboard-portfolio-legend__change { display: none; }
}

/* Footer (edit + public toggle) */
.finboard-portfolio-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--fb-border-soft, #f3f4f6);
}
.finboard-portfolio-card__public-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--fb-text-muted, #6b7280);
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════════
 * EMPTY-STATE CTA — matches existing finboard-broker-cta pattern
 * ═══════════════════════════════════════════════════════════════════ */
.fb-portfolio-cta {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    background: linear-gradient( 135deg, #fbf5e6, #ffffff );
    border: 1px solid rgba( 196, 146, 10, 0.30 );
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.fb-portfolio-cta:hover {
    border-color: var(--fb-gold, #c4920a);
    transform: translateY( -1px );
    box-shadow: 0 8px 26px rgba( 196, 146, 10, 0.18 );
    color: inherit;
}
.fb-portfolio-cta__icon {
    flex-shrink: 0;
    width: 54px; height: 54px;
    display: inline-flex;
    align-items: center; justify-content: center;
    background: #fff;
    border: 1px solid rgba( 196, 146, 10, 0.30 );
    border-radius: 12px;
    color: var(--fb-gold, #c4920a);
    box-shadow: 0 4px 10px rgba( 196, 146, 10, 0.12 );
}
.fb-portfolio-cta__icon svg { width: 26px; height: 26px; }
.fb-portfolio-cta__body { flex: 1; min-width: 0; }
.fb-portfolio-cta__heading {
    display: flex; align-items: center; gap: 6px;
    font-size: 15px; font-weight: 500;
    color: var(--fb-text, #1f2937); margin: 0 0 3px;
}
.fb-portfolio-cta__heading strong { color: var(--fb-gold, #c4920a); font-weight: 600; }
.fb-portfolio-cta__sub {
    font-size: 13px; color: var(--fb-text-muted, #6b7280);
    margin: 0; line-height: 1.45;
}
/* Copy CTA — hardened against Hello Elementor / theme button leak.
 * Pattern mirrors button.finboard-btn (finboard-enhancements.css):
 *  - button.<class> selector for specificity over plain `button { ... }`
 *  - !important on paint properties the theme commonly hits
 *  - -webkit-text-fill-color set explicitly (iOS + theme override safety)
 *  - appearance:none kills iOS/Chrome default button chrome */
button.fb-portfolio-cta__action,
.fb-portfolio-cta__action {
    flex-shrink: 0;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 10px 18px !important;
    background: var(--fb-gold, #c4920a) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 1px solid var(--fb-gold, #c4920a) !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 500;
    font-family: var(--fb-font, inherit) !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-decoration: none;
    text-shadow: none !important;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    outline: 0;
    box-shadow: 0 2px 8px rgba(232,169,16,.20);
    transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}
button.fb-portfolio-cta__action:hover,
.fb-portfolio-cta__action:hover {
    background: var(--fb-gold-hover, #b07f08) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(232,169,16,.30);
}
button.fb-portfolio-cta__action:active,
.fb-portfolio-cta__action:active { transform: translateY(0); }
button.fb-portfolio-cta__action:focus-visible,
.fb-portfolio-cta__action:focus-visible {
    outline: 2px solid var(--fb-gold, #c4920a);
    outline-offset: 2px;
}
.fb-portfolio-cta__action svg { width: 14px; height: 14px; }
@media (max-width: 600px) {
    .fb-portfolio-cta { flex-direction: column; align-items: stretch; text-align: left; }
    .fb-portfolio-cta__action { align-self: flex-start; }
}

/* ═══════════════════════════════════════════════════════════════════
 * DEALS ROW — ACF-backed IG / eToro CTAs
 * ═══════════════════════════════════════════════════════════════════ */
.fb-portfolio-deals-head {
    display: flex; align-items: center; justify-content: space-between;
    margin: 16px 2px 8px;
    font-size: 11px; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--fb-text-muted, #6b7280);
}
.fb-portfolio-deals-head__sub {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    font-size: 11px;
}
.fb-portfolio-deals-head__star { color: var(--fb-gold, #c4920a); }
.fb-portfolio-deals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}
@media (max-width: 600px) {
    .fb-portfolio-deals { grid-template-columns: 1fr; }
}
/* Each cell holds the affiliate link AND its disclaimer — the disclaimer
 * lives OUTSIDE the <a> so it can carry its own links if needed (some
 * brokers reference terms pages in their FCA-style risk warning). */
.fb-portfolio-deal-cell {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.fb-portfolio-deal {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    /* Gold tint layered over var(--fb-bg-card) so the deal card reads
     * as a warm "premium offer" in both light and dark themes (was a
     * hardcoded cream-to-white gradient that turned into a glaring
     * white card on the dark community theme). */
    background:
        linear-gradient(135deg, rgba(232,169,16,0.12), transparent 70%),
        var(--fb-bg-card, #fff);
    border: 1px solid rgba(232,169,16,0.30);
    border-radius: 12px;
    text-decoration: none;
    color: var(--fb-text, inherit);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.fb-portfolio-deal:hover {
    border-color: var(--fb-gold, #c4920a);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(232,169,16,0.22);
    color: var(--fb-text, inherit);
}
.fb-portfolio-deal__logo {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 10px;
    /* Logo plate uses the card token so broker marks (full-colour PNGs)
     * still get a clean backdrop in either theme. */
    background: var(--fb-bg-card, #fff);
    border: 1px solid var(--fb-border, #e5e7eb);
    display: inline-flex;
    align-items: center; justify-content: center;
    padding: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    overflow: hidden;
}
.fb-portfolio-deal__logo img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
}
.fb-portfolio-deal__logo-fallback {
    font-weight: 800; font-size: 14px;
    letter-spacing: -0.02em;
    color: var(--fb-gold, #c4920a);
}
.fb-portfolio-deal__body { flex: 1; min-width: 0; }
.fb-portfolio-deal__name {
    font-size: 14px; font-weight: 600;
    color: var(--fb-text, #1f2937);
    line-height: 1.2; margin: 0 0 2px;
}
.fb-portfolio-deal__perk {
    font-size: 12px;
    color: var(--fb-text-muted, #6b7280);
    line-height: 1.35; margin: 0;
}
.fb-portfolio-deal__go {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px;
    background: var(--fb-gold, #c4920a);
    color: #fff;
    border-radius: 999px;
    font-size: 12px; font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(232,169,16,0.30);
}
.fb-portfolio-deal__go svg { width: 12px; height: 12px; }
/* Affiliate risk warning — required next to the CTA, pulled per broker
 * from ACF's affiliate_disclaimer_short field. Sits below each card,
 * inside the same grid cell so it stays tied to its broker. */
.fb-portfolio-deal__disclaimer {
    margin: 6px 4px 0;
    font-size: 10.5px;
    line-height: 1.45;
    color: var(--fb-text-muted, #6b7280);
    font-style: italic;
}
.fb-portfolio-deal__disclaimer p { margin: 0; }
.fb-portfolio-deal__disclaimer a {
    color: var(--fb-text-muted, #6b7280);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.fb-portfolio-deal__disclaimer a:hover {
    color: var(--fb-text, #1f2937);
}

/* ═══════════════════════════════════════════════════════════════════
 * BUILDER MODAL (clean rebuild)
 * ═══════════════════════════════════════════════════════════════════ */
body.finboard-no-scroll { overflow: hidden; }

.finboard-portfolio-builder {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
/* CRITICAL: the wrapper sets display:flex which overrides the browser's
 * default `[hidden] { display:none }` rule — without this attribute
 * selector, the modal renders on every page load AND `modal.hidden = true`
 * in the JS close handler has no visual effect (can't close it).
 * Use !important so any future theme/cascade rule can't reintroduce it. */
.finboard-portfolio-builder[hidden] {
    display: none !important;
}
.finboard-portfolio-builder__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}
.fb-builder {
    position: relative;
    /* Tokenised so the modal panel adapts to dark mode — was #fff which
     * left a glaring white panel on the dark community theme. */
    background: var(--fb-bg-card, #fff);
    color: var(--fb-text, #1f2937);
    border: 1px solid var(--fb-border, #e5e7eb);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.28);
    overflow: hidden;
    /* Builder panel sized for the new content density — sliders, lock
     * toggles, weight inputs all sit on one row. Was 620px which felt
     * cramped once the lock column landed. min() still caps to 100%
     * of viewport so mobile/tablet remain full-bleed. */
    width: min(720px, 100%);
    max-height: 94vh;
    overflow-y: auto;
}
.fb-builder__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--fb-border-soft, #f3f4f6);
}
.fb-builder__head h2 {
    margin: 0;
    font-size: 17px; font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fb-text, #1f2937);
}
/* Modal close X — hardened against Hello Elementor theme button leak
 * (same pattern as .fb-copy-modal__close and button.finboard-btn). */
button.fb-builder__head-x,
.fb-builder__head-x {
    width: 32px;
    height: 32px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-family: var(--fb-font, inherit) !important;
    color: var(--fb-text-muted, #6b7280) !important;
    -webkit-text-fill-color: var(--fb-text-muted, #6b7280) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    outline: 0;
    transition: background .15s ease, color .15s ease;
}
button.fb-builder__head-x:hover,
.fb-builder__head-x:hover {
    background: var(--fb-bg-hover, #f4f4f5) !important;
    color: var(--fb-text, #1f2937) !important;
    -webkit-text-fill-color: var(--fb-text, #1f2937) !important;
}
button.fb-builder__head-x:focus-visible,
.fb-builder__head-x:focus-visible {
    outline: 2px solid var(--fb-gold, #c4920a);
    outline-offset: 2px;
}

.fb-builder__statbar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px;
    /* Gold tint layered over var(--fb-bg-card) — keeps the "rewarded"
     * warm vibe in light AND dark mode. */
    background:
        linear-gradient(135deg, rgba(232,169,16,0.12), transparent 70%),
        var(--fb-bg-card, #fff);
    border-bottom: 1px solid var(--fb-border-soft, #f3f4f6);
}
.fb-builder__ring {
    --allocated: 0;
    --ring-color: #dc2626;
    flex-shrink: 0;
    width: 108px; height: 108px;
    border-radius: 50%;
    /* Unfilled track tokenised — was hardcoded #e5e7eb which read as a
     * bright ring on the dark-mode panel. var(--fb-bg-inset) gives a
     * subtle "groove" effect on either theme. */
    background: conic-gradient(var(--ring-color) calc(var(--allocated) * 1%), var(--fb-bg-inset, #e5e7eb) 0);
    position: relative;
    display: flex; align-items: center; justify-content: center;
}
.fb-builder__ring::after {
    content: '';
    position: absolute;
    inset: 9px;
    /* Inner hole matches the panel bg so the ring punches through cleanly. */
    background: var(--fb-bg-card, #fff);
    border-radius: 50%;
}
.fb-builder__ring-num {
    position: relative; z-index: 1;
    font-size: 26px; font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.fb-builder__ring--complete { --ring-color: #c4920a; }

.fb-builder__stats { flex: 1; min-width: 0; }
.fb-builder__stats-title {
    font-size: 13px; font-weight: 500; color: var(--fb-text, #1f2937);
    margin: 0 0 8px;
}
.fb-builder__stats-pills {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.fb-builder__pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px;
    background: var(--fb-bg-card, #fff);
    border: 1px solid var(--fb-border, #e5e7eb);
    border-radius: 999px;
    font-size: 12px; font-weight: 500;
    color: var(--fb-text, #1f2937);
}
.fb-builder__pill--ok    { color: #15803d; border-color: rgba(21,128,61,0.30); background: rgba(21,128,61,0.06); }
.fb-builder__pill--warn  { color: #b45309; border-color: rgba(180,83,9,0.30);  background: rgba(180,83,9,0.06); }
.fb-builder__pill::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: currentColor; opacity: 0.7;
}

.fb-builder__body { padding: 18px 22px; }

.fb-builder__search-wrap { position: relative; margin-bottom: 16px; }
.fb-builder__search-icon {
    position: absolute; left: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--fb-text-muted, #6b7280);
    pointer-events: none;
}
.fb-builder__search {
    width: 100% !important;
    padding: 11px 14px 11px 38px !important;
    font-size: 14px !important;
    border: 1px solid var(--fb-border, #e5e7eb) !important;
    border-radius: 10px !important;
    background: var(--fb-bg-input, #fff) !important;
    color: var(--fb-text, #1f2937) !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    height: auto !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}
.fb-builder__search:focus {
    border-color: var(--fb-gold, #c4920a) !important;
    box-shadow: 0 0 0 3px rgba(196,146,10,0.12) !important;
}

/* Typeahead results dropdown */
.fb-builder__results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--fb-bg-card, #fff);
    border: 1px solid var(--fb-border, #e5e7eb);
    border-radius: 8px;
    list-style: none !important;
    padding: 4px !important;
    margin: 0;
    max-height: 240px;
    overflow-y: auto;
    z-index: 5;
    box-shadow: 0 10px 30px rgba(0,0,0,0.10);
}
.fb-builder__result {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    list-style: none;
}
.fb-builder__result:hover { background: var(--fb-bg, #f4f4f5); }
.fb-builder__result strong { margin-right: 6px; }
.fb-builder__result span { color: var(--fb-text-muted, #6b7280); }
.fb-builder__result--empty {
    color: var(--fb-text-muted, #6b7280);
    cursor: default;
}

.fb-builder__rows {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 4px;
}
.fb-builder__row {
    display: grid;
    /* 4 columns: logo · meta+controls · lock toggle · remove */
    grid-template-columns: 56px 1fr 28px 26px;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--fb-border-soft, #f3f4f6);
    list-style: none;
}
.fb-builder__row:last-child { border-bottom: 0; }
/* Locked row — slider and number visibly frozen so the user can see
 * which weights are pinned, but the symbol/name stay readable. */
.fb-builder__row--locked .fb-builder__slider,
.fb-builder__row--locked .fb-builder__num {
    opacity: 0.55;
    pointer-events: none;
    cursor: not-allowed;
}
.fb-builder__row--locked .fb-builder__row-sym,
.fb-builder__row--locked .fb-builder__row-name {
    opacity: 0.75;
}
.fb-builder__row-logo {
    width: 44px; height: 44px;
    /* Gold tint layered over var(--fb-bg-card) so the ticker plate
     * reads as warm and branded in either light or dark mode. */
    background:
        linear-gradient(135deg, rgba(232,169,16,0.14), rgba(232,169,16,0.06)),
        var(--fb-bg-card, #fff);
    border: 1px solid var(--fb-border, #e5e7eb);
    border-radius: 10px;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-weight: 500; font-size: 11px;
    color: var(--fb-gold, #c4920a);
    letter-spacing: 0.03em;
}
.fb-builder__row-meta { min-width: 0; }
.fb-builder__row-sym {
    display: block;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
    line-height: 1.1;
}
.fb-builder__row-name {
    display: block;
    font-size: 12px;
    color: var(--fb-text-muted, #6b7280);
    line-height: 1.1; margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fb-builder__row-controls {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 6px !important;
    width: 100%;
}
.fb-builder__slider {
    flex: 1 1 auto !important;
    accent-color: var(--fb-gold, #c4920a);
    min-width: 0 !important;
    width: auto !important;
    height: 4px;
    margin: 0 !important;
    padding: 0 !important;
}
.fb-builder__num-wrap {
    flex: 0 0 auto !important;
    position: relative;
    display: inline-block;
}
.fb-builder__num {
    width: 64px !important;
    padding: 6px 22px 6px 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-variant-numeric: tabular-nums;
    text-align: right;
    border: 1px solid var(--fb-border, #e5e7eb) !important;
    border-radius: 8px !important;
    background: var(--fb-bg-input, #fff) !important;
    color: var(--fb-text, #1f2937) !important;
    outline: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    height: auto !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}
.fb-builder__num-suffix {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY( -50% );
    font-size: 12px;
    color: var(--fb-text-muted, #6b7280);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
}
.fb-builder__num:focus {
    border-color: var(--fb-gold, #c4920a) !important;
    box-shadow: 0 0 0 2px rgba(196,146,10,0.12) !important;
}
.fb-builder__row-rm {
    width: 26px; height: 26px;
    border: 1px solid var(--fb-border, #e5e7eb) !important;
    background: var(--fb-bg-card, #fff);
    border-radius: 6px;
    font-size: 14px;
    line-height: 1;
    color: var(--fb-text-muted, #6b7280);
    cursor: pointer;
    padding: 0;
    outline: none !important;
    box-shadow: none !important;
}
.fb-builder__row-rm:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fecaca !important;
}

/* Lock toggle — pinning a weight excludes it from "Distribute Evenly".
 * Hardened against the Hello Elementor theme button leak (same pattern
 * as the other custom buttons in this file). Pressed state uses gold
 * to mirror the rest of the brand. */
button.fb-builder__row-lock,
.fb-builder__row-lock {
    width: 28px;
    height: 28px;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 6px !important;
    color: var(--fb-text-muted, #6b7280) !important;
    -webkit-text-fill-color: var(--fb-text-muted, #6b7280) !important;
    font-family: var(--fb-font, inherit) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    outline: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
button.fb-builder__row-lock:hover,
.fb-builder__row-lock:hover {
    color: var(--fb-text, #1f2937) !important;
    -webkit-text-fill-color: var(--fb-text, #1f2937) !important;
    background: var(--fb-bg-hover, #f4f4f5) !important;
}
button.fb-builder__row-lock:focus-visible,
.fb-builder__row-lock:focus-visible {
    outline: 2px solid var(--fb-gold, #c4920a);
    outline-offset: 1px;
}
button.fb-builder__row-lock[aria-pressed="true"],
.fb-builder__row-lock[aria-pressed="true"] {
    color: var(--fb-gold, #c4920a) !important;
    -webkit-text-fill-color: var(--fb-gold, #c4920a) !important;
    background: rgba(232,169,16,0.10) !important;
    border-color: rgba(232,169,16,0.35) !important;
}
.fb-builder__row-lock svg {
    width: 14px;
    height: 14px;
    display: block;
}

.fb-builder__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
    border-top: 1px solid var(--fb-border-soft, #f3f4f6);
    background: var(--fb-bg, #f4f4f5);
}
.fb-builder__foot-left { display: flex; align-items: center; gap: 10px; }
/* "Distribute evenly" — hardened text-button, theme can't add border/padding */
button.fb-builder__even,
.fb-builder__even {
    background: transparent !important;
    border: 0 !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    color: var(--fb-text-muted, #6b7280) !important;
    -webkit-text-fill-color: var(--fb-text-muted, #6b7280) !important;
    font-family: var(--fb-font, inherit) !important;
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.4 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    outline: 0;
    transition: color .15s ease;
}
button.fb-builder__even:hover,
.fb-builder__even:hover {
    color: var(--fb-gold, #c4920a) !important;
    -webkit-text-fill-color: var(--fb-gold, #c4920a) !important;
}
.fb-builder__foot-right { display: flex; align-items: center; gap: 12px; }
.fb-builder__msg { font-size: 12px; color: var(--fb-text-muted, #6b7280); }
.fb-builder__msg--ok { color: #15803d; font-weight: 600; }
/* Save CTA — hardened against Hello Elementor leak. Disabled state uses
 * tokens so the dim button reads correctly in both themes. */
button.fb-builder__save,
.fb-builder__save {
    padding: 10px 22px !important;
    background: var(--fb-gold, #c4920a) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border: 1px solid var(--fb-gold, #c4920a) !important;
    border-radius: 999px !important;
    font-family: var(--fb-font, inherit) !important;
    font-size: 14px !important;
    font-weight: 500;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-shadow: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    outline: 0;
    box-shadow: 0 4px 14px rgba(232,169,16,0.30);
    transition: background .15s ease, transform .05s ease, box-shadow .15s ease;
}
button.fb-builder__save:hover:not(:disabled),
.fb-builder__save:hover:not(:disabled) {
    background: var(--fb-gold-hover, #b07f08) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(232,169,16,0.36);
}
button.fb-builder__save:focus-visible,
.fb-builder__save:focus-visible {
    outline: 2px solid var(--fb-gold, #c4920a);
    outline-offset: 2px;
}
button.fb-builder__save:disabled,
.fb-builder__save:disabled {
    background: var(--fb-bg-inset, #d1d5db) !important;
    color: var(--fb-text-muted, #6b7280) !important;
    -webkit-text-fill-color: var(--fb-text-muted, #6b7280) !important;
    border-color: var(--fb-border, transparent) !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
 * SAVE CELEBRATION
 * ───────────────────────────────────────────────────────────────────
 * Injected by finboard-portfolio.js when finboard_portfolio_save
 * resolves successfully. Covers the modal interior (.fb-builder) with
 * a gold-tinted overlay, a checkmark badge, the +N Equity headline,
 * and 12 sparkles fanning outward. Page reloads after the animation
 * (~1.9s) so the sidebar equity + portfolio data refresh from server.
 *
 * The sidebar equity counter is also animated in parallel via
 * .finboard-equity-num--bumping so the reward is visible even before
 * the reload. Respects prefers-reduced-motion (all animations off).
 * ═══════════════════════════════════════════════════════════════════ */
.fb-builder__celebration {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(232,169,16,0.18), transparent 65%),
        var(--fb-bg-card, #fff);
    animation: fb-celebration-bg-in .35s ease-out;
}
.fb-builder__celebration-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 24px;
    animation: fb-celebration-content-in .55s cubic-bezier(.5,1.6,.4,1) .1s both;
}
.fb-builder__celebration-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--fb-gold, #c4920a);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 10px 30px rgba(232,169,16,.45),
        0 0 0 6px rgba(232,169,16,.12);
    animation: fb-celebration-pulse 2s ease-in-out infinite;
}
.fb-builder__celebration-headline {
    font-size: 44px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--fb-gold, #c4920a);
    text-shadow: 0 4px 24px rgba(232,169,16,0.35);
    margin-top: 4px;
}
.fb-builder__celebration-sub {
    font-size: 13px;
    color: var(--fb-text-muted, #6b7280);
    font-weight: 500;
    letter-spacing: 0.01em;
}
.fb-builder__celebration-sparkles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 1;
}
.fb-builder__celebration-spark {
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    background: var(--fb-gold, #c4920a);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(232,169,16,.7);
    opacity: 0;
    transform: rotate(var(--a, 0deg)) translateX(0);
    animation: fb-celebration-spark 1s ease-out .15s both;
}
@keyframes fb-celebration-bg-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fb-celebration-content-in {
    from { transform: scale(.6); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
@keyframes fb-celebration-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
@keyframes fb-celebration-spark {
    0%   { opacity: 0; transform: rotate(var(--a, 0deg)) translateX(28px) scale(0.6); }
    40%  { opacity: 1; transform: rotate(var(--a, 0deg)) translateX(120px) scale(1); }
    100% { opacity: 0; transform: rotate(var(--a, 0deg)) translateX(220px) scale(0.4); }
}

/* Sidebar equity counter bump — JS adds the modifier class while the
 * counter is ticking up; CSS provides the gold-glow flash. */
.finboard-equity-num {
    transition: color .25s ease, text-shadow .25s ease;
}
.finboard-equity-num--bumping {
    color: var(--fb-gold, #c4920a) !important;
    text-shadow: 0 0 14px rgba(232,169,16,.45);
    animation: fb-equity-bump .6s ease-out;
}
@keyframes fb-equity-bump {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .fb-builder__celebration,
    .fb-builder__celebration-content,
    .fb-builder__celebration-icon,
    .fb-builder__celebration-spark,
    .finboard-equity-num--bumping {
        animation: none !important;
    }
    .fb-builder__celebration-sparkles { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
 * PERFORMANCE LINE CHART
 * ═══════════════════════════════════════════════════════════════════ */
.fb-perf {
    position: relative;
    background: linear-gradient(180deg, #fff 0%, #fbfbfd 100%);
    border: 1px solid var(--fb-border, #e5e7eb);
    border-radius: 12px;
    padding: 18px 4px 8px;
    margin: 14px 0;
}
.fb-perf__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 12px; padding: 0 14px; margin-bottom: 8px;
}
.fb-perf__head-left { display: flex; flex-direction: column; gap: 2px; }
.fb-perf__label {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--fb-text-muted, #6b7280);
}
.fb-perf__value {
    font-size: 22px; font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}
.fb-perf__value--up   { color: #16a34a; }
.fb-perf__value--down { color: #dc2626; }
.fb-perf__ranges {
    display: inline-flex; gap: 4px;
    background: var(--fb-bg, #f4f4f5);
    border-radius: 999px;
    padding: 3px;
}
.fb-perf__range {
    border: 0; background: transparent;
    padding: 4px 10px;
    font-size: 11px; font-weight: 600;
    color: var(--fb-text-muted, #6b7280);
    border-radius: 999px;
    cursor: pointer;
}
.fb-perf__range--active {
    background: var(--fb-bg-card, #fff);
    color: var(--fb-text, #1f2937);
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.fb-perf__svg { width: 100%; height: 140px; display: block; }
.fb-perf__footer {
    display: flex; justify-content: space-between;
    padding: 4px 14px 0;
    font-size: 11px;
    color: var(--fb-text-muted, #6b7280);
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════════
 * FAMOUS PORTFOLIOS — index grid + Copy modal
 * ═══════════════════════════════════════════════════════════════════ */
.fb-fame-section-head {
    display: flex; align-items: baseline; justify-content: space-between;
    margin: 0 2px 12px;
}
.fb-fame-section-head h2 {
    margin: 0;
    font-size: 20px; font-weight: 800;
    letter-spacing: -0.02em;
}
.fb-fame-section-head__sub {
    font-size: 12px; color: var(--fb-text-muted, #6b7280);
}

.fb-fame-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.fb-fame-card {
    position: relative;
    background: var(--fb-bg-card, #fff);
    border: 1px solid var(--fb-border, #e5e7eb);
    border-radius: 14px;
    padding: 16px 16px 14px;
    overflow: hidden;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    text-decoration: none;
    color: var(--fb-text, inherit);
    display: block;
}
.fb-fame-card:hover {
    transform: translateY(-2px);
    border-color: rgba(232,169,16,0.45);
    box-shadow: 0 10px 30px rgba(0,0,0,0.10), 0 0 18px rgba(232,169,16,0.10);
    color: var(--fb-text, inherit);
}

/* TIC house portfolio — pinned at top, spans 2 columns, gold border + ribbon.
 * Gold tint is layered OVER var(--fb-bg-card) so the card adapts to light
 * and dark themes — gives a warm "house pick" feel on either background. */
.fb-fame-card--tic {
    grid-column: 1 / -1;
    background:
        linear-gradient(135deg, rgba(232,169,16,0.12) 0%, transparent 55%, rgba(232,169,16,0.12) 100%),
        var(--fb-bg-card, #fff);
    border: 1.5px solid rgba(232,169,16,0.55);
    box-shadow: 0 6px 22px rgba(232,169,16,0.15);
}
.fb-fame-card--tic:hover {
    border-color: var(--fb-gold, #c4920a);
    box-shadow: 0 12px 36px rgba(196,146,10,0.22);
}
.fb-fame-card--tic .fb-fame-card__avatar {
    background: #fff;
    border: 2px solid var(--fb-gold, #c4920a);
}
.fb-fame-card--tic .fb-fame-card__avatar img {
    object-fit: contain;
    padding: 4px;
    background: #fff;
}
.fb-fame-card__ribbon {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--fb-gold, #c4920a);
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.10em;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(196,146,10,0.35);
    z-index: 2;
}

/* On wider viewports, give the TIC card a horizontal layout so it
 * reads as a "hero" rather than a tall stack. */
@media (min-width: 720px) {
    .fb-fame-card--tic .fb-fame-card__top { margin-bottom: 6px; }
    .fb-fame-card--tic .fb-fame-card__mini {
        gap: 24px;
        margin: 14px 0 10px;
    }
    .fb-fame-card--tic .fb-fame-card__pie {
        width: 84px; height: 84px;
    }
    .fb-fame-card--tic .fb-fame-card__pie::after { inset: 22px; }
    .fb-fame-card--tic .fb-fame-card__return { font-size: 26px; }
}
.fb-fame-card__top {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 12px;
}
.fb-fame-card__avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    /* Dark gradient works as a solid placeholder in both themes —
     * the initials are always white so the avatar reads regardless
     * of light/dark card bg behind it. */
    background: linear-gradient(135deg, #14181f, #1f242e);
    color: #fff;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-weight: 800; font-size: 18px;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    /* Border matches the card bg so the avatar appears "punched out"
     * of the card surface in either theme. */
    border: 2px solid var(--fb-bg-card, #fff);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    overflow: hidden;
}
.fb-fame-card__avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.fb-fame-card__id { min-width: 0; flex: 1; }
.fb-fame-card__name {
    margin: 0 0 2px;
    font-size: 15px; font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.15;
}
.fb-fame-card__fund {
    font-size: 12px; color: var(--fb-text-muted, #6b7280);
    line-height: 1.2;
}

.fb-fame-card__mini {
    display: flex; align-items: center; gap: 12px;
    margin: 10px 0;
}
.fb-fame-card__pie {
    width: 56px; height: 56px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}
.fb-fame-card__pie::after {
    content: '';
    position: absolute; inset: 14px;
    background: var(--fb-bg-card, #fff);
    border-radius: 50%;
}
/* TIC card has a faint gold tint on its bg — extend it into the
 * donut hole so the pie reads as part of the card surface, not a
 * different colour cut-out. */
.fb-fame-card--tic .fb-fame-card__pie::after {
    background:
        linear-gradient(135deg, rgba(232,169,16,0.12), rgba(232,169,16,0.12)),
        var(--fb-bg-card, #fff);
}
.fb-fame-card__stats { flex: 1; min-width: 0; }
.fb-fame-card__return {
    font-size: 20px; font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}
.fb-fame-card__return--up   { color: #16a34a; }
.fb-fame-card__return--down { color: #dc2626; }
.fb-fame-card__return-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fb-text-muted, #6b7280);
    margin-top: 3px;
}

.fb-fame-card__chips {
    display: flex; flex-wrap: wrap; gap: 5px;
    margin-bottom: 4px;
}
.fb-fame-card__chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    background: var(--fb-bg, #f4f4f5);
    border-radius: 999px;
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--fb-text, #1f2937);
}
.fb-fame-card__chip-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
}
.fb-fame-card__meta {
    display: flex; justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--fb-border-soft, #f3f4f6);
    font-size: 11px;
    color: var(--fb-text-muted, #6b7280);
}

/* Hover overlay revealing Copy CTA */
.fb-fame-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7,9,16,0.0) 0%, rgba(7,9,16,0.55) 50%, rgba(7,9,16,0.85) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.18s ease;
    border-radius: 14px;
    pointer-events: none;
}
.fb-fame-card:hover .fb-fame-card__overlay { opacity: 1; pointer-events: auto; }
@media (hover: none) {
    .fb-fame-card__overlay {
        opacity: 1;
        background: linear-gradient(180deg, rgba(7,9,16,0.0) 60%, rgba(7,9,16,0.85) 100%);
        pointer-events: auto;
    }
}
.fb-fame-card__copy {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 20px;
    background: var(--fb-gold, #c4920a);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-size: 14px; font-weight: 500;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(196,146,10,0.45);
    cursor: pointer;
    transform: translateY(4px);
    transition: transform 0.18s ease;
}
.fb-fame-card:hover .fb-fame-card__copy { transform: translateY(0); }
.fb-fame-card__copy svg { width: 14px; height: 14px; }
.fb-fame-card__copy--locked {
    background: rgba(255,255,255,0.18);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.30);
}

/* ── Locked teaser tile on the index grid ─────────────────────────── */
.fb-fame-card--locked {
    /* Use the raised/inset tokens so the locked card sits at a
     * slightly different elevation than unlocked cards in both
     * themes — a quiet visual cue without hardcoded greys. */
    background: linear-gradient(160deg, var(--fb-bg-raised, #fafbfc) 0%, var(--fb-bg-inset, #f3f4f6) 100%);
    border-color: var(--fb-border-soft, #f3f4f6);
}
.fb-fame-card--locked:hover {
    border-color: rgba(232,169,16,0.40);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0,0,0,0.10);
}
.fb-fame-card__teaser { padding: 8px 0 12px; }
.fb-fame-card__bio {
    margin: 0;
    font-size: 13px;
    color: var(--fb-text-muted, #6b7280);
    line-height: 1.45;
}
.fb-fame-card__lockstate {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    margin-top: 4px;
    /* Lockstate box sits inside the (raised) locked card — using
     * --fb-bg-card lifts it visually in both themes. */
    background: var(--fb-bg-card, #fff);
    border: 1px dashed rgba(232,169,16,0.45);
    border-radius: 12px;
}
.fb-fame-card__lockstate-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(196,146,10,0.10);
    color: var(--fb-gold, #c4920a);
    display: inline-flex;
    align-items: center; justify-content: center;
}
.fb-fame-card__lockstate-title {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--fb-text, #1f2937);
    line-height: 1.1;
}
.fb-fame-card__lockstate-sub {
    display: block;
    font-size: 11px;
    color: var(--fb-text-muted, #6b7280);
    margin-top: 2px;
}
/* Locked tiles never reveal the dark Copy overlay on hover. */
.fb-fame-card--locked .fb-fame-card__overlay { display: none; }

/* Detail page — TIC card outer treatment */
.finboard-portfolio-card--tic {
    /* Gold border + gold halo lifted on top of the community neumorphic
     * shadow (not replacing it) so the TIC card still reads as the same
     * surface family as other community cards. Gold rgba normalised to
     * the canonical community gold (#E8A910) — was the older #c4920a. */
    border: 1.5px solid rgba(232,169,16,0.55);
    box-shadow:
        var(--fb-neu-out-sm, 0 2px 8px rgba(0,0,0,0.05)),
        0 6px 22px rgba(232,169,16,0.15);
}

/* Locked Copy CTA on the detail page header */
.fb-portfolio-cta__action--locked {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    background: #1f242e;
    color: #fff;
    border: 1px solid rgba(196,146,10,0.30);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    flex-direction: column;
    text-align: center;
    line-height: 1.2;
}
.fb-portfolio-cta__action--locked > svg:first-child { color: var(--fb-gold, #c4920a); }
.fb-portfolio-cta__action-sub {
    display: block;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--fb-gold, #c4920a);
    margin-top: 1px;
}
.fb-portfolio-cta__action--locked:hover {
    background: #2a313d;
    border-color: var(--fb-gold, #c4920a);
}

/* Copy modal */
.fb-copy-modal-wrap {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: flex;
    align-items: center; justify-content: center;
    padding: 16px;
}
/* CRITICAL: same bug as the build-portfolio modal — `display: flex`
 * above overrides the browser's default `[hidden] { display: none }`,
 * so the JS calling `modal.hidden = true` had no visual effect (close
 * X looked dead, backdrop didn't dismiss). This attribute selector
 * with !important restores the hide behaviour for both the Copy
 * modal and the Unlock modal (they share the same wrap class). */
.fb-copy-modal-wrap[hidden] {
    display: none !important;
}
.fb-copy-modal-wrap__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(2px);
}
.fb-copy-modal {
    position: relative;
    background: var(--fb-bg-card, #fff);
    color: var(--fb-text, #1f2937);
    border-radius: 16px;
    border: 1px solid var(--fb-border, #e5e7eb);
    box-shadow: 0 20px 50px rgba(0,0,0,0.28);
    max-width: 460px;
    width: 100%;
    overflow: hidden;
}
.fb-copy-modal__head {
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--fb-border-soft, #f3f4f6);
}
.fb-copy-modal__title {
    margin: 0 0 4px;
    font-size: 16px; font-weight: 600;
    letter-spacing: -0.01em;
}
.fb-copy-modal__sub {
    margin: 0;
    font-size: 12px;
    color: var(--fb-text-muted, #6b7280);
}
/* Modal close X — hardened against theme button leak (same pattern
 * as .fb-portfolio-cta__action above). The close glyph is just an
 * `×` character so font-family + line-height + font-size all need
 * to survive any theme override. */
button.fb-copy-modal__close,
.fb-copy-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 8px !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-family: var(--fb-font, inherit) !important;
    color: var(--fb-text-muted, #6b7280) !important;
    -webkit-text-fill-color: var(--fb-text-muted, #6b7280) !important;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    outline: 0;
    transition: background .15s ease, color .15s ease;
}
button.fb-copy-modal__close:hover,
.fb-copy-modal__close:hover {
    background: var(--fb-bg, #f4f4f5) !important;
    color: var(--fb-text, #1f2937) !important;
    -webkit-text-fill-color: var(--fb-text, #1f2937) !important;
}
button.fb-copy-modal__close:focus-visible,
.fb-copy-modal__close:focus-visible {
    outline: 2px solid var(--fb-gold, #c4920a);
    outline-offset: 2px;
}
.fb-copy-modal__body { padding: 14px 22px; }
.fb-copy-modal__row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    /* Gold tint layered over var(--fb-bg-card) so the row keeps its
     * "premium broker offer" feel in both themes — light cream in
     * light mode, faintly gold-warmed dark surface in dark mode. */
    background:
        linear-gradient(135deg, rgba(232,169,16,0.12), transparent 70%),
        var(--fb-bg-card, #fff);
    border: 1px solid rgba(232,169,16,0.30);
    border-radius: 12px;
    text-decoration: none;
    color: var(--fb-text, inherit);
    margin-bottom: 8px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fb-copy-modal__row:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(232,169,16,0.20);
    color: var(--fb-text, inherit);
}
.fb-copy-modal__row-logo {
    width: 44px; height: 44px;
    border-radius: 10px;
    /* Broker logos are typically full-colour and need a neutral plate;
     * use the card token so the plate adapts but keeps logo contrast. */
    background: var(--fb-bg-card, #fff);
    border: 1px solid var(--fb-border, #e5e7eb);
    display: inline-flex;
    align-items: center; justify-content: center;
    padding: 6px;
    overflow: hidden;
    flex-shrink: 0;
}
.fb-copy-modal__row-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Equity-path variant — used on the unlock modal's "Rate a broker /
 * Take a quiz / Build your portfolio" rows where the slot holds a
 * symbol (★ / ? / 📊 / +) rather than a broker logo. Gold tint adapts
 * to both themes via tokens — was previously a hardcoded cream inline
 * style that broke in dark mode. */
.fb-copy-modal__row-logo--equity {
    background:
        linear-gradient(135deg, rgba(232,169,16,0.16), rgba(232,169,16,0.10)),
        var(--fb-bg-card, #fff);
    color: var(--fb-gold, #c4920a);
    font-size: 18px;
    line-height: 1;
    border-color: rgba(232,169,16,0.30);
}
.fb-copy-modal__row-text { flex: 1; min-width: 0; }
.fb-copy-modal__row-name {
    font-size: 14px; font-weight: 500;
    margin: 0 0 2px;
}
.fb-copy-modal__row-perk {
    font-size: 12px;
    color: var(--fb-text-muted, #6b7280);
    margin: 0;
}
.fb-copy-modal__row-go {
    color: var(--fb-gold, #c4920a);
    font-weight: 500;
    font-size: 14px;
}
.fb-copy-modal__foot {
    padding: 14px 22px;
    background: var(--fb-bg, #f4f4f5);
    font-size: 11px;
    color: var(--fb-text-muted, #6b7280);
    line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════
 * Page wrapper used by /community/portfolio/<user>/ and
 * /community/famous/*. These pages are rendered inside .finboard-feed
 * so they inherit the feed column width — no full-bleed background.
 * ═══════════════════════════════════════════════════════════════════ */
.finboard-portfolio-page__wrap {
    width: 100%;
}
.finboard-portfolio-page__crumbs {
    margin-bottom: 12px;
    font-size: 13px;
}
.finboard-portfolio-page__crumbs a {
    color: var(--fb-text-muted, #6b7280);
    text-decoration: none;
}
.finboard-portfolio-page__crumbs a:hover { color: var(--fb-gold, #c4920a); }
.finboard-portfolio-page__head { margin-bottom: 18px; }
.finboard-portfolio-page__head h1 {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--fb-text, #1f2937);
}
.finboard-portfolio-page__sub {
    margin: 0;
    color: var(--fb-text-muted, #6b7280);
    font-size: 14px;
}

/* Portfolio section inside the profile overview tab. */
.finboard-profile__portfolio-section { margin-top: 20px; }

/* ─────────────────────────────────────────────────────────────────
 * Locked celeb detail block
 * ─────────────────────────────────────────────────────────────── */
.fb-fame-locked {
    text-align: center;
    padding: 36px 24px 30px;
    /* Gold-tinted card surface in either theme — uses the card token
     * as a base with a light gold wash overlaid. */
    background:
        linear-gradient(160deg, rgba(232,169,16,0.06) 0%, transparent 50%, rgba(232,169,16,0.12) 100%),
        var(--fb-bg-card, #fff);
    border: 1px dashed rgba(232,169,16,0.45);
    border-radius: 14px;
    margin: 18px 0 0;
}
.fb-fame-locked__icon {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(196,146,10,0.10);
    color: var(--fb-gold, #c4920a);
    margin-bottom: 14px;
}
.fb-fame-locked__title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fb-text, #1f2937);
}
.fb-fame-locked__text {
    margin: 0 auto 18px;
    max-width: 460px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--fb-text-muted, #6b7280);
}
.fb-fame-locked__text strong { color: var(--fb-text, #1f2937); }
.fb-fame-locked__paths {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
}
.fb-fame-locked__path {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--fb-bg-card, #fff);
    border: 1px solid rgba(232,169,16,0.30);
    border-radius: 999px;
    font-size: 13px;
    color: var(--fb-text, #1f2937);
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.fb-fame-locked__path:hover {
    border-color: var(--fb-gold, #c4920a);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(232,169,16,0.20);
    color: var(--fb-text, #1f2937);
}
.fb-fame-locked__path-num {
    color: var(--fb-gold, #c4920a);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.fb-fame-locked__progress {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--fb-text-muted, #6b7280);
}
.fb-fame-locked__progress a {
    color: var(--fb-gold, #c4920a);
    text-decoration: none;
}
.fb-fame-locked__progress a:hover { text-decoration: underline; }