/* ══════════════════════════════════════════════════════════════════════════
 * Finboard Tools CSS — extracted from finboard-v4.css
 * ──────────────────────────────────────────────────────────────────────────
 *
 * Contains ALL styling for the Tools feature (templates/tools.php) and
 * supporting patterns used by Academy (templates/academy.php).
 *
 * This file is 100% ADDITIVE. None of its selectors exist in the main
 * Finboard v2.4.9 CSS — it can be dropped in without any risk of
 * conflict.
 *
 *   Covers:
 *     ▸ Editorial tool layout (.finboard-tool--editorial)
 *     ▸ Preset toggle pills (.finboard-tool-edit__preset-btn)
 *     ▸ Input fields with slider + suffix (.finboard-tool-field*)
 *     ▸ Hero + stat grid result area (.finboard-tool-edit__hero-card, __stat-*)
 *     ▸ UK Context editorial sections (.finboard-tool-uk-context*)
 *     ▸ Sidebar rail navigation (.finboard-tools-rail*, .finboard-tools-layout)
 *     ▸ Collapsible categories w/ <details> (.finboard-tools-rail__group)
 *     ▸ Tool card list items (.finboard-tools-card*)
 *     ▸ Portfolio allocator stacked bar (.finboard-alloc*, .finboard-tool-alloc*)
 *     ▸ Risk:reward visualiser (.finboard-tool-rr*)
 *     ▸ Notice banners (.finboard-tool-notice*)
 *     ▸ Chart legend (.finboard-tool-chart*)
 *     ▸ Info disclaimer (.finboard-tool-disclaimer)
 *     ▸ Responsive breakpoints for all the above
 *
 *   How to enqueue (in your Finboard_Frontend class, alongside finboard-v4.css):
 *     wp_enqueue_style(
 *         'finboard-tools',
 *         FINBOARD_PLUGIN_URL . 'assets/css/finboard-tools.css',
 *         array( 'finboard-v4' ),
 *         FINBOARD_VERSION
 *     );
 *
 *   Only load on pages that render templates/tools.php or academy.php
 *   (conditional enqueue via URL check) to save the ~50KB on other pages.
 *
 * Version:       1.0.0
 * Extracted:     2026-04-23
 * Works with:    Finboard v2.4.9+
 * ══════════════════════════════════════════════════════════════════════════ */


/* ── Category Tabs — neumorphic toggle track.
 * Matches the section nav + preset toggle language: sunken pill-shaped
 * track, raised "thumb" for active category with gold accent ring and
 * tactile shadow offsets. */
.finboard-tools-categories {
    display: flex;
    gap: 4px;
    padding: 6px;
    background: var(--fb-bg-inset);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius-pill);
    margin-bottom: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    box-shadow:
        inset 3px 3px 6px rgba(0,0,0,0.45),
        inset -2px -2px 5px rgba(255,255,255,0.03);
}

[data-finboard-theme="light"] .finboard-tools-categories {
    box-shadow:
        inset 3px 3px 6px rgba(0,0,0,0.10),
        inset -2px -2px 4px rgba(255,255,255,0.7);
}

.finboard-tools-categories::-webkit-scrollbar { display: none; }

button.finboard-tools-cat,
.finboard-tools-cat {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px !important;
    border: none !important;
    border-radius: var(--fb-radius-pill) !important;
    background: transparent !important;
    color: var(--fb-text-muted) !important;
    font-family: var(--fb-font);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    min-height: 40px;
    line-height: 1.3 !important;
    transform: translateY(0);
    transition:
        color 180ms cubic-bezier(.4,0,.2,1),
        background-color 180ms cubic-bezier(.4,0,.2,1),
        box-shadow 220ms cubic-bezier(.4,0,.2,1),
        transform 220ms cubic-bezier(.34,1.56,.64,1);
    -webkit-appearance: none;
    appearance: none;
}

.finboard-tools-cat svg {
    width: 16px; height: 16px; flex-shrink: 0;
    opacity: 0.6;
    transition: opacity var(--fb-transition), color var(--fb-transition);
}

.finboard-tools-cat:hover {
    color: var(--fb-text) !important;
    background: transparent !important;
    transform: translateY(-1px);
}

.finboard-tools-cat:hover svg { opacity: 0.85; }
.finboard-tools-cat:focus-visible {
    outline: 2px solid var(--fb-gold);
    outline-offset: 2px;
}

.finboard-tools-cat.active {
    color: var(--fb-gold) !important;
    background: var(--fb-bg-card) !important;
    transform: translateY(-1px);
    box-shadow:
        4px 4px 10px rgba(0,0,0,0.55),
        -2px -2px 6px rgba(255,255,255,0.05),
        inset 0 1px 0 rgba(255,255,255,0.10),
        inset 0 -1px 0 rgba(0,0,0,0.25),
        inset 0 0 0 1px var(--fb-border-gold) !important;
}

[data-finboard-theme="light"] .finboard-tools-cat.active {
    box-shadow:
        3px 3px 7px rgba(0,0,0,0.15),
        -2px -2px 5px rgba(255,255,255,0.9),
        inset 0 1px 0 rgba(255,255,255,0.7),
        inset 0 0 0 1px var(--fb-border-gold) !important;
}

.finboard-tools-cat.active svg { opacity: 1; color: var(--fb-gold); }

.finboard-tools-cat__count {
    font-size: 10px; font-weight: 700;
    background: var(--fb-bg-inset);
    color: var(--fb-text-muted);
    padding: 2px 7px;
    border-radius: var(--fb-radius-pill);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.2);
}

.finboard-tools-cat.active .finboard-tools-cat__count {
    background: var(--fb-gold-dim);
    color: var(--fb-gold);
    box-shadow: inset 0 0 0 1px rgba(252,196,25,0.25);
}


/* ══════════════════════════════════════════════════════════════════
 * SIDEBAR RAIL — Option B navigation.
 * Two-column layout: narrow left rail with collapsible category groups,
 * main content area is 100% the tool hero. At rest, only category names
 * are visible — compact and minimal. Click a category to reveal its tools.
 * Uses native <details>/<summary> for zero-JS accordion behaviour.
 * ══════════════════════════════════════════════════════════════════ */
.finboard-tools-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 32px;
    align-items: flex-start;
    transition: grid-template-columns 260ms cubic-bezier(.4,0,.2,1), gap 260ms cubic-bezier(.4,0,.2,1);
}

/* Collapsed state — rail shrinks to a 44px strip showing only the toggle.
 * Category groups and tool lists fade + are hidden. Main content gets
 * most of the width. */
.finboard-tools-layout.is-collapsed {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
}


/* ── Rail (left column) ── */
.finboard-tools-rail {
    position: sticky;
    top: 80px; /* clears sticky community bar */
    align-self: flex-start;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
    scrollbar-width: thin;
    transition: padding 260ms cubic-bezier(.4,0,.2,1);
}

.finboard-tools-rail::-webkit-scrollbar { width: 4px; }
.finboard-tools-rail::-webkit-scrollbar-thumb { background: var(--fb-border); border-radius: 2px; }

/* ── Rail header — single full-width toggle button ──
 * The toggle IS the rail's title + collapse control, combined. When expanded
 * it reads "[panel-icon] All tools"; when collapsed, only the icon shows and
 * the row narrows to fit inside the 44px strip. This keeps the UI honest:
 * one element, one purpose, self-labelling. */
.finboard-tools-rail__header {
    display: flex;
    padding: 0 0 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--fb-border);
}

.finboard-tools-rail__toggle {
    display: flex !important;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 36px;
    padding: 0 10px !important;
    border-radius: var(--fb-radius-sm) !important;
    background: transparent !important;
    border: 1px solid var(--fb-border) !important;
    color: var(--fb-text-muted) !important;
    cursor: pointer;
    text-align: left;
    font-family: var(--fb-font);
    transition:
        background-color 180ms ease,
        border-color 180ms ease,
        color 180ms ease,
        padding 220ms cubic-bezier(.4,0,.2,1);
}

.finboard-tools-rail__toggle:hover {
    background: var(--fb-bg-hover) !important;
    border-color: var(--fb-border-strong) !important;
    color: var(--fb-text) !important;
}

.finboard-tools-rail__toggle:focus-visible {
    outline: 2px solid var(--fb-gold);
    outline-offset: 2px;
}

.finboard-tools-rail__toggle-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.finboard-tools-rail__toggle-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    transition:
        opacity 180ms cubic-bezier(.4,0,.2,1),
        max-width 220ms cubic-bezier(.4,0,.2,1);
    max-width: 200px;
    opacity: 1;
}

/* Collapsed state — hide label, centre the icon-only button.
 * Gap is zeroed out so the 10px gap between icon and (now-empty) label
 * doesn't displace the icon off-centre in the 44px rail strip. */
.finboard-tools-layout.is-collapsed .finboard-tools-rail__toggle-label {
    opacity: 0;
    max-width: 0;
    overflow: hidden;
}

.finboard-tools-layout.is-collapsed .finboard-tools-rail__toggle {
    padding: 0 !important;
    justify-content: center;
    gap: 0;
}

/* Two icons cross-fade in the same 16px well inside the toggle button.
 * Using absolute positioning inside .finboard-tools-rail__toggle-icon-wrap
 * so the swap doesn't nudge the "All tools" label to its right. */
.finboard-tools-rail__toggle-icon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: opacity 180ms cubic-bezier(.4,0,.2,1);
}

.finboard-tools-rail__toggle-icon--open {
    opacity: 0;
    pointer-events: none;
}

.finboard-tools-layout.is-collapsed .finboard-tools-rail__toggle-icon--close {
    opacity: 0;
    pointer-events: none;
}

.finboard-tools-layout.is-collapsed .finboard-tools-rail__toggle-icon--open {
    opacity: 1;
    pointer-events: auto;
}


/* ── Collapsed state: hide all rail content except the toggle ──
 * We hide the title + category groups, leaving only the toggle button
 * (inside the header) visible as a 44px-wide strip. */
.finboard-tools-layout.is-collapsed .finboard-tools-rail__title {
    opacity: 0;
    visibility: hidden;
    width: 0;
    overflow: hidden;
}

.finboard-tools-layout.is-collapsed .finboard-tools-rail__header {
    padding: 4px 2px 10px;
    justify-content: center;
    border-bottom-color: transparent;
}

.finboard-tools-layout.is-collapsed .finboard-tools-rail__group {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-8px);
    transition:
        opacity 180ms cubic-bezier(.4,0,.2,1),
        transform 220ms cubic-bezier(.4,0,.2,1),
        visibility 0s linear 220ms;
    height: 0;
    margin: 0;
}

.finboard-tools-layout .finboard-tools-rail__group {
    transition:
        opacity 220ms cubic-bezier(.4,0,.2,1),
        transform 260ms cubic-bezier(.4,0,.2,1);
}


/* ── Category group (collapsible via <details>) ── */
.finboard-tools-rail__group {
    margin-bottom: 4px;
    border-radius: var(--fb-radius-sm);
    overflow: hidden;
}

.finboard-tools-rail__group[open] {
    background: rgba(255,255,255,0.015);
}

[data-finboard-theme="light"] .finboard-tools-rail__group[open] {
    background: rgba(0,0,0,0.02);
}


/* Category header (the <summary> element — clickable) */
.finboard-tools-rail__category {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    font-family: var(--fb-font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--fb-text-muted);
    cursor: pointer;
    list-style: none; /* hide default disclosure triangle */
    border-radius: var(--fb-radius-sm);
    transition:
        background-color 180ms cubic-bezier(.4,0,.2,1),
        color 180ms cubic-bezier(.4,0,.2,1);
    user-select: none;
}

.finboard-tools-rail__category::-webkit-details-marker { display: none; }
.finboard-tools-rail__category:hover {
    color: var(--fb-text);
    background: rgba(255,255,255,0.03);
}

[data-finboard-theme="light"] .finboard-tools-rail__category:hover {
    background: rgba(0,0,0,0.04);
}

.finboard-tools-rail__category:focus-visible {
    outline: 2px solid var(--fb-gold);
    outline-offset: 2px;
}


.finboard-tools-rail__icon {
    width: 14px; height: 14px;
    color: var(--fb-gold);
    opacity: 0.7;
    flex-shrink: 0;
    transition: opacity 180ms ease;
}

.finboard-tools-rail__group[open] .finboard-tools-rail__icon { opacity: 1; }

.finboard-tools-rail__cat-label {
    flex: 1;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px;
}


.finboard-tools-rail__cat-count {
    font-size: 10px;
    font-weight: 700;
    color: var(--fb-text-muted);
    letter-spacing: 0;
    opacity: 0.7;
}


.finboard-tools-rail__chevron {
    width: 12px; height: 12px;
    color: var(--fb-text-muted);
    opacity: 0.5;
    transition: transform 220ms cubic-bezier(.4,0,.2,1);
    flex-shrink: 0;
}

.finboard-tools-rail__group[open] .finboard-tools-rail__chevron {
    transform: rotate(90deg);
    opacity: 0.8;
}


/* ── Tool list inside a category (shown when <details open>) ── */
.finboard-tools-rail__items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0 6px;
}


/* Override the raised neumorphic tool card — in the rail, they're minimal
 * text-list items. Icons, descriptions, arrows all hidden. */
.finboard-tools-rail .finboard-tools-card,
.finboard-tools-rail button.finboard-tools-card {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 7px 12px 7px 34px !important;
    min-height: 32px !important;
    border: none !important;
    border-radius: var(--fb-radius-xs, 4px) !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left !important;
    transform: none !important;
    transition:
        background-color 150ms ease,
        color 150ms ease !important;
}

.finboard-tools-rail .finboard-tools-card__icon {
    display: none !important;
}

.finboard-tools-rail .finboard-tools-card__text {
    flex: 1;
    min-width: 0;
}

.finboard-tools-rail .finboard-tools-card__label {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--fb-text-muted) !important;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 150ms ease;
}

.finboard-tools-rail .finboard-tools-card__desc {
    display: none !important; /* description is redundant in compact list */
}

.finboard-tools-rail .finboard-tools-card__arrow {
    display: none !important;
}


/* Hover — subtle bg + brighter text */
.finboard-tools-rail .finboard-tools-card:hover {
    background: rgba(255,255,255,0.04) !important;
    transform: none !important;
}

.finboard-tools-rail .finboard-tools-card:hover .finboard-tools-card__label {
    color: var(--fb-text) !important;
}

[data-finboard-theme="light"] .finboard-tools-rail .finboard-tools-card:hover {
    background: rgba(0,0,0,0.04) !important;
}


/* Active — gold left-border + gold text */
.finboard-tools-rail .finboard-tools-card.active {
    background: var(--fb-gold-dim) !important;
    box-shadow: inset 3px 0 0 var(--fb-gold) !important;
}

.finboard-tools-rail .finboard-tools-card.active .finboard-tools-card__label {
    color: var(--fb-gold) !important;
    font-weight: 600 !important;
}


/* Focus ring */
.finboard-tools-rail .finboard-tools-card:focus-visible {
    outline: 2px solid var(--fb-gold);
    outline-offset: -2px;
}


/* ── Main content column (right) ── */
.finboard-tools-main {
    min-width: 0; /* allow content to shrink inside grid track */
}

/* Tool cards — raised neumorphic tiles.
 * Each card reads as a physical object sitting above the page surface.
 * Hover lifts +1px with deeper shadow; active state flips to "pressed-in"
 * with a gold accent ring to signal selection. */
button.finboard-tools-card,
.finboard-tools-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px !important;
    border: 1px solid var(--fb-border) !important;
    border-radius: 12px !important;
    background: var(--fb-bg-card, #1e2230) !important;
    cursor: pointer;
    text-align: left;
    font-family: var(--fb-font);
    min-height: 56px;
    transform: translateY(0);
    transition:
        background-color 180ms cubic-bezier(.4,0,.2,1),
        border-color 180ms cubic-bezier(.4,0,.2,1),
        box-shadow 220ms cubic-bezier(.4,0,.2,1),
        transform 220ms cubic-bezier(.34,1.56,.64,1);
    box-shadow:
        3px 3px 8px rgba(0,0,0,0.35),
        -2px -2px 6px rgba(255,255,255,0.03),
        inset 0 1px 0 rgba(255,255,255,0.04) !important;
    -webkit-appearance: none;
    appearance: none;
}

.finboard-tools-card__icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    background: var(--fb-bg-inset);
    color: var(--fb-text-muted);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow:
        inset 1px 1px 3px rgba(0,0,0,0.3),
        inset -1px -1px 2px rgba(255,255,255,0.02);
    transition: background 180ms ease, color 180ms ease, box-shadow 220ms ease;
}

.finboard-tools-card__icon svg { width: 18px; height: 18px; }
.finboard-tools-card__text { flex: 1; min-width: 0; }
.finboard-tools-card__label {
    font-size: 13px; font-weight: 600; color: var(--fb-text); line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.finboard-tools-card__desc {
    font-size: 11px; color: var(--fb-text-muted); line-height: 1.3;
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.finboard-tools-card__arrow {
    width: 14px; height: 14px; margin-left: auto;
    color: var(--fb-text-muted); opacity: 0; flex-shrink: 0;
    transition: opacity 220ms ease, transform 220ms cubic-bezier(.34,1.56,.64,1);
}


/* Hover — gentle lift with deeper shadow */
.finboard-tools-card:hover {
    border-color: var(--fb-border-strong) !important;
    background: var(--fb-bg-hover, var(--fb-bg-raised)) !important;
    transform: translateY(-1px);
    box-shadow:
        5px 5px 12px rgba(0,0,0,0.45),
        -2px -2px 8px rgba(255,255,255,0.04),
        inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

.finboard-tools-card:hover .finboard-tools-card__icon {
    background: var(--fb-gold-dim); color: var(--fb-gold);
    box-shadow:
        inset 1px 1px 2px rgba(0,0,0,0.15),
        0 0 0 1px rgba(252,196,25,0.15);
}

.finboard-tools-card:hover .finboard-tools-card__arrow {
    opacity: 0.7; transform: translateX(3px);
}

.finboard-tools-card:focus-visible {
    outline: 2px solid var(--fb-gold);
    outline-offset: 3px;
}

.finboard-tools-card:active {
    transform: translateY(0);
    box-shadow:
        2px 2px 5px rgba(0,0,0,0.35),
        inset 0 1px 0 rgba(255,255,255,0.03) !important;
}


/* Active tool card — pressed-in with gold ring.
 * Reads as "this tool is selected" with a tactile indent + gold accent. */
.finboard-tools-card.active {
    border-color: var(--fb-border-gold) !important;
    background: linear-gradient(135deg, rgba(252,196,25,0.06), rgba(252,196,25,0.02)) !important;
    transform: translateY(0);
    box-shadow:
        inset 2px 2px 5px rgba(0,0,0,0.4),
        inset -1px -1px 3px rgba(255,255,255,0.03),
        inset 0 0 0 1px rgba(252,196,25,0.35),
        0 0 16px rgba(252,196,25,0.10) !important;
}

.finboard-tools-card.active .finboard-tools-card__icon {
    background: var(--fb-gold); color: #1a1e28;
    box-shadow:
        0 2px 6px rgba(252,196,25,0.3),
        inset 0 1px 0 rgba(255,255,255,0.2);
}

.finboard-tools-card.active .finboard-tools-card__label { color: var(--fb-gold); }
.finboard-tools-card.active .finboard-tools-card__arrow { opacity: 1; color: var(--fb-gold); transform: translateX(2px); }

/* Light mode tool cards — softer shadows */
[data-finboard-theme="light"] .finboard-tools-card {
    border-color: var(--fb-border) !important;
    background: #ffffff !important;
    box-shadow:
        2px 2px 6px rgba(0,0,0,0.08),
        -1px -1px 4px rgba(255,255,255,0.6),
        inset 0 1px 0 rgba(255,255,255,0.6) !important;
}

[data-finboard-theme="light"] .finboard-tools-card:hover {
    border-color: rgba(0,0,0,.15) !important;
    background: #fafbfd !important;
    box-shadow:
        4px 4px 10px rgba(0,0,0,0.1),
        -1px -1px 5px rgba(255,255,255,0.7),
        inset 0 1px 0 rgba(255,255,255,0.7) !important;
}

[data-finboard-theme="light"] .finboard-tools-card.active {
    border-color: var(--fb-border-gold) !important;
    background: linear-gradient(135deg, rgba(196,146,10,0.06), rgba(196,146,10,0.02)) !important;
    box-shadow:
        inset 2px 2px 5px rgba(0,0,0,0.08),
        inset 0 0 0 1px rgba(196,146,10,0.35),
        0 0 14px rgba(196,146,10,0.08) !important;
}

[data-finboard-theme="light"] .finboard-tools-card__icon {
    background: rgba(0,0,0,.04);
    box-shadow:
        inset 1px 1px 2px rgba(0,0,0,0.08),
        inset -1px -1px 2px rgba(255,255,255,0.8);
}


/* ── Tool disclaimer ── */
.finboard-tool-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: var(--fb-bg-inset);
    border: 1px solid var(--fb-border);
    border-left: 3px solid var(--fb-gold);
    border-radius: var(--fb-radius);
    padding: 14px 16px;
    margin-bottom: 24px;
}

.finboard-tool-disclaimer svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--fb-gold);
    margin-top: 1px;
}

.finboard-tool-disclaimer p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--fb-text-muted);
}

.finboard-tool-disclaimer p strong {
    color: var(--fb-text);
}


.finboard-tool__header {
    padding: 16px 24px;
    border-bottom: 1px solid var(--fb-border);
    display: flex;
    align-items: center;
    gap: 14px;
}

.finboard-tool__header-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--fb-radius);
    background: var(--fb-gold-dim);
    color: var(--fb-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.finboard-tool__header-icon svg { width: 20px; height: 20px; }
.finboard-tool__header-meta { flex: 1; min-width: 0; }
.finboard-tool__title { font-size: 17px; font-weight: 700; color: var(--fb-text); margin: 0 0 2px; }
.finboard-tool__subtitle { font-size: 13px; color: var(--fb-text-muted); margin: 0; }

/* Static share button in header */
.finboard-tool__share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius-sm);
    background: transparent;
    color: var(--fb-text-muted);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--fb-font);
    cursor: pointer;
    transition: border-color var(--fb-transition), color var(--fb-transition), background var(--fb-transition);
    white-space: nowrap;
    flex-shrink: 0;
    min-height: 36px;
}

.finboard-tool__share-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.finboard-tool__share-btn:hover {
    border-color: var(--fb-gold);
    color: var(--fb-gold);
    background: var(--fb-gold-dim);
}

/* Pulse when results update */
.finboard-tool__share-btn--ready {
    border-color: var(--fb-gold);
    color: var(--fb-gold);
}


.finboard-tool__body {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 0;
}

.finboard-tool__inputs {
    padding: 24px;
    border-right: 1px solid var(--fb-border);
    /* No inner scroll — inputs flow with the page; sticky results column stays in view. */
}

.finboard-tool__results {
    padding: 24px;
    background: var(--fb-bg-inset);
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 0;
    align-self: start;
}


/* ── Form fields ── */
.finboard-tool-field { margin-bottom: 18px; }
.finboard-tool-field:last-child { margin-bottom: 0; }
.finboard-tool-field__label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--fb-text);
    margin-bottom: 7px;
}

.finboard-tool-field__hint {
    font-size: 11px;
    font-weight: 400;
    color: var(--fb-text-muted);
}

.finboard-tool-field__input-row {
    display: flex;
    align-items: stretch;
    background: var(--fb-bg-inset);
    border: none;
    border-radius: var(--fb-radius);
    overflow: hidden;
    transition: box-shadow var(--fb-transition);
    box-shadow: 0 0 0 0px var(--fb-gold-dim);
}

.finboard-tool-field__input-row:focus-within {
    box-shadow: 0 0 0 2px var(--fb-gold), 0 0 0 5px var(--fb-gold-dim);
}

.finboard-tool-field__prefix {
    font-size: 14px;
    font-weight: 700;
    color: var(--fb-text-muted);
    padding: 0 12px;
    background: rgba(0,0,0,.18);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    min-width: 36px;
    justify-content: center;
}

.finboard-tool-field__suffix {
    font-size: 14px;
    font-weight: 700;
    color: var(--fb-text-muted);
    padding: 0 12px;
    background: rgba(0,0,0,.18);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.finboard-tool-field__input,
.finboard-tool input.finboard-tool-field__input {
    flex: 1;
    border: 0 !important;        /* beat the theme's global input border */
    box-shadow: none !important; /* beat any theme input shadows */
    background: transparent;
    color: var(--fb-text);
    font-size: 15px;
    font-weight: 600;
    font-family: var(--fb-font);
    padding: 10px 12px;
    outline: none;
    min-width: 0;
    -moz-appearance: textfield;
}

.finboard-tool-field__input:focus,
.finboard-tool input.finboard-tool-field__input:focus {
    border: 0 !important;        /* theme's :focus border also injects */
    box-shadow: none !important;
    outline: none;
}

.finboard-tool-field__input::-webkit-outer-spin-button,
.finboard-tool-field__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Select fields inside tool forms can suffer the same theme-border issue. */
.finboard-tool-field__select,
.finboard-tool select.finboard-tool-field__select {
    border: 1px solid var(--fb-border) !important;
    box-shadow: none !important;
}

.finboard-tool-field__select:focus,
.finboard-tool select.finboard-tool-field__select:focus {
    border-color: var(--fb-gold) !important;
    box-shadow: 0 0 0 2px var(--fb-gold-dim) !important;
    outline: none;
}


/* Range slider */
.finboard-tool-field__slider {
    width: 100%;
    margin-top: 10px;
    -webkit-appearance: none;
    appearance: none;
    height: 5px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--fb-gold) 0%, var(--fb-gold) var(--fill, 0%), var(--fb-border) var(--fill, 0%), var(--fb-border) 100%);
    outline: none;
    cursor: pointer;
}

.finboard-tool-field__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--fb-gold);
    cursor: pointer;
    border: 2px solid var(--fb-bg-card);
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
    transition: box-shadow var(--fb-transition);
}

.finboard-tool-field__slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 5px var(--fb-gold-dim);
}

.finboard-tool-field__range {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--fb-text-muted);
    margin-top: 4px;
}


/* Select input */
.finboard-tool-field__select {
    width: 100%;
    padding: 9px 12px;
    background: var(--fb-bg-inset);
    border: none;
    border-radius: var(--fb-radius);
    color: var(--fb-text);
    font-size: 14px;
    font-family: var(--fb-font);
    font-weight: 500;
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.finboard-tool-field__select:focus {
    box-shadow: 0 0 0 2px var(--fb-gold), 0 0 0 5px var(--fb-gold-dim);
}


/* ── Result items ── */
.finboard-tool-result--primary {
    text-align: center;
    padding: 20px 16px;
    background: var(--fb-bg-card);
    border-radius: var(--fb-radius);
    border: 1px solid var(--fb-border-gold);
}

.finboard-tool-result--primary .finboard-tool-result__value {
    font-size: 36px;
    font-weight: 800;
    color: var(--fb-gold);
    font-family: var(--fb-font-display, var(--fb-font));
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.finboard-tool-result--primary .finboard-tool-result__label {
    font-size: 12px;
    color: var(--fb-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
}

.finboard-tool-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.finboard-tool-result--secondary {
    padding: 12px 14px;
    background: var(--fb-bg-card);
    border-radius: var(--fb-radius);
    border: 1px solid var(--fb-border);
}

.finboard-tool-result--secondary .finboard-tool-result__value {
    font-size: 18px;
    font-weight: 700;
    color: var(--fb-text);
    line-height: 1.2;
}

.finboard-tool-result--secondary .finboard-tool-result__label {
    font-size: 11px;
    color: var(--fb-text-muted);
    margin-top: 2px;
}

.finboard-tool-result--positive .finboard-tool-result__value { color: var(--fb-green); }
.finboard-tool-result--negative .finboard-tool-result__value { color: var(--fb-red); }
.finboard-tool-result--warn .finboard-tool-result__value { color: var(--fb-gold); }

/* ── Compound interest chart ── */
.finboard-tool-chart {
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    overflow: hidden;
}

.finboard-tool-chart svg { display: block; width: 100%; height: auto; }
.finboard-tool-chart__legend {
    display: flex;
    gap: 16px;
    padding: 8px 14px;
    border-top: 1px solid var(--fb-border);
}

.finboard-tool-chart__legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--fb-text-muted);
}

.finboard-tool-chart__legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── Warnings / notices ── */
.finboard-tool-notice {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--fb-radius);
    font-size: 12px;
    line-height: 1.5;
    border: 1px solid transparent;
}

.finboard-tool-notice--warn {
    background: rgba(196,146,10,.08);
    border-color: rgba(196,146,10,.2);
    color: var(--fb-gold);
}

.finboard-tool-notice--error {
    background: rgba(239,68,68,.06);
    border-color: rgba(239,68,68,.15);
    color: var(--fb-red);
}

.finboard-tool-notice--success {
    background: rgba(34,197,94,.06);
    border-color: rgba(34,197,94,.15);
    color: var(--fb-green);
}

.finboard-tool-notice svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }
.finboard-tool-notice[hidden] { display: none; }

/* ── Position sizer R:R bar ── */
.finboard-tool-rr {
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 14px;
}

.finboard-tool-rr__label { font-size: 11px; color: var(--fb-text-muted); margin-bottom: 8px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.finboard-tool-rr__bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; }
.finboard-tool-rr__risk { background: var(--fb-red); border-radius: 5px 0 0 5px; transition: width .4s; }
.finboard-tool-rr__reward { background: var(--fb-green); border-radius: 0 5px 5px 0; flex: 1; transition: width .4s; }
.finboard-tool-rr__values { display: flex; justify-content: space-between; font-size: 11px; color: var(--fb-text-muted); margin-top: 5px; }

/* ── Portfolio allocation bar + legend ── */
.finboard-tool-alloc-bar {
    display: flex;
    height: 32px;
    border-radius: 6px;
    overflow: hidden;
    margin: 20px 0 14px;
    background: var(--fb-bg-inset);
}

.finboard-tool-alloc-legend {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px 16px;
}

.finboard-alloc-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--fb-text-muted);
}

.finboard-alloc-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.finboard-alloc-legend-pct {
    margin-left: auto;
    font-weight: 600;
    color: var(--fb-text);
    font-size: 12px;
}

/* The modifier opts a tool panel into the editorial + neumorphic treatment.
 * Remove the default .finboard-tool card chrome so the new surfaces show. */
.finboard-tool.finboard-tool--editorial {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0 0 40px;
}


/* ── Intro block: eyebrow, big title, subtitle, share ── */
.finboard-tool-edit__intro {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "eyebrow eyebrow"
        "title   share"
        "sub     sub";
    column-gap: 20px;
    row-gap: 10px;
    padding: 8px 4px 12px;
    border-bottom: 1px solid var(--fb-border);
    margin-bottom: 10px;
}

.finboard-tool-edit__eyebrow {
    grid-area: eyebrow;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fb-gold);
}

.finboard-tool-edit__title {
    grid-area: title;
    font-family: var(--fb-font-display) !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em;
    color: var(--fb-text) !important;
    margin: 0 !important;
}

.finboard-tool-edit__subtitle {
    grid-area: sub;
    font-size: 15px;
    line-height: 1.55;
    color: var(--fb-text-secondary);
    margin: 0;
    max-width: 68ch;
}

.finboard-tool-edit__share {
    grid-area: share;
    align-self: start;
}


/* ── Preset neumorphic toggle — quick-fill scenarios above the inputs.
 * The track is sunken (inset neumorphic), the active segment is a raised
 * thumb popping out of it — like a physical 3-position switch.
 * Uses real neumorphic depth (shadow offsets + highlight) for tactile feel. */
.finboard-tool-edit__presets {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    padding: 16px 20px 0;
    margin: 0 0 -4px;
}

.finboard-tool-edit__presets-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fb-text-muted);
    margin: 0;
}

/* The track — sunken inset groove that the thumb sits inside.
 * Deeper inset shadow (darker + larger blur) gives a real "recessed channel" read. */
.finboard-tool-edit__presets-group {
    display: inline-flex;
    align-items: stretch;
    padding: 6px;
    background: var(--fb-bg-inset) !important; /* armour vs. Hello theme element bg */
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius-pill);
    box-shadow:
        inset 3px 3px 6px rgba(0,0,0,0.55),
        inset -2px -2px 5px rgba(255,255,255,0.035);
    gap: 4px;
}

/* Preset button — scoped via `button.` + explicit !important on key paints so
 * Hello theme's `button { background: var(--e-hello-button-bg); color:...; border-radius:... }`
 * cannot override our neumorphic styling. Transitions use a cubic-bezier for a
 * subtle "pop" rather than linear. */
button.finboard-tool-edit__preset-btn,
.finboard-tool-edit__preset-btn {
    background: transparent !important;
    color: var(--fb-text-muted) !important;
    border: none !important;
    border-radius: var(--fb-radius-pill) !important;
    padding: 6px 22px !important; /* Hello theme zeros button padding — force ours */
    line-height: 1.4;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--fb-font);
    cursor: pointer;
    box-shadow: none;
    transform: translateY(0);
    transition:
        background 180ms cubic-bezier(.4,0,.2,1),
        color 180ms cubic-bezier(.4,0,.2,1),
        box-shadow 220ms cubic-bezier(.4,0,.2,1),
        transform 220ms cubic-bezier(.34,1.56,.64,1);
    white-space: nowrap;
    letter-spacing: 0.01em;
    position: relative;
    -webkit-appearance: none;
    appearance: none;
    text-shadow: none;
}

/* Hover on inactive buttons — gentle raise + brighter text. */
button.finboard-tool-edit__preset-btn:hover,
.finboard-tool-edit__preset-btn:hover {
    background: transparent !important;
    color: var(--fb-text) !important;
    transform: translateY(-1px);
}

button.finboard-tool-edit__preset-btn:focus-visible,
.finboard-tool-edit__preset-btn:focus-visible {
    outline: 2px solid var(--fb-gold);
    outline-offset: 2px;
}

/* Press state — thumb sinks slightly for tactile click feedback. */
button.finboard-tool-edit__preset-btn:active,
.finboard-tool-edit__preset-btn:active {
    transform: translateY(1px);
}

/* The thumb — raised neumorphic segment with gold accent.
 * Stronger offset shadows + subtle lift (-1px) so it reads as popping out.
 * Warm charcoal fill with gold border ring + top-highlight hairline. */
button.finboard-tool-edit__preset-btn.is-active,
.finboard-tool-edit__preset-btn.is-active {
    background: var(--fb-bg-card) !important;
    color: var(--fb-gold) !important;
    -webkit-text-fill-color: var(--fb-gold);
    transform: translateY(-1px);
    box-shadow:
        4px 4px 10px rgba(0,0,0,0.55),
        -2px -2px 6px rgba(255,255,255,0.05),
        inset 0 1px 0 rgba(255,255,255,0.10),       /* top highlight */
        inset 0 -1px 0 rgba(0,0,0,0.25),            /* bottom shadow line */
        inset 0 0 0 1px var(--fb-border-gold);      /* gold accent ring */
}

button.finboard-tool-edit__preset-btn.is-active:hover,
.finboard-tool-edit__preset-btn.is-active:hover {
    color: var(--fb-gold-hover) !important;
    transform: translateY(-2px);
    box-shadow:
        5px 5px 12px rgba(0,0,0,0.6),
        -2px -2px 7px rgba(255,255,255,0.055),
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(0,0,0,0.25),
        inset 0 0 0 1px var(--fb-border-gold);
}

button.finboard-tool-edit__preset-btn.is-active:active,
.finboard-tool-edit__preset-btn.is-active:active {
    transform: translateY(0);
    box-shadow:
        2px 2px 5px rgba(0,0,0,0.45),
        -1px -1px 3px rgba(255,255,255,0.04),
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 0 0 1px var(--fb-border-gold);
}

/* Light-theme adjustments — softer shadows on pale backgrounds */
[data-finboard-theme="light"] .finboard-tool-edit__presets-group,
.finboard.finboard--light .finboard-tool-edit__presets-group {
    box-shadow:
        inset 3px 3px 6px rgba(0,0,0,0.12),
        inset -2px -2px 4px rgba(255,255,255,0.7);
}

[data-finboard-theme="light"] button.finboard-tool-edit__preset-btn.is-active,
[data-finboard-theme="light"] .finboard-tool-edit__preset-btn.is-active,
.finboard.finboard--light .finboard-tool-edit__preset-btn.is-active {
    box-shadow:
        3px 3px 7px rgba(0,0,0,0.15),
        -2px -2px 5px rgba(255,255,255,0.9),
        inset 0 1px 0 rgba(255,255,255,0.7),
        inset 0 0 0 1px var(--fb-border-gold);
}

[data-finboard-theme="light"] button.finboard-tool-edit__preset-btn.is-active:hover,
[data-finboard-theme="light"] .finboard-tool-edit__preset-btn.is-active:hover,
.finboard.finboard--light .finboard-tool-edit__preset-btn.is-active:hover {
    box-shadow:
        4px 4px 9px rgba(0,0,0,0.18),
        -2px -2px 6px rgba(255,255,255,0.95),
        inset 0 1px 0 rgba(255,255,255,0.8),
        inset 0 0 0 1px var(--fb-border-gold);
}


/* ── Body: two-column editorial grid (inputs | result).
 * Outer padding gives the neumorphic shadows room to breathe — the numbers
 * here are tuned to the 10px shadow offset + 20px blur = ~30px extent. */
.finboard-tool-edit__body {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.618fr);
    gap: 24px;
    padding: 16px 20px 48px;
}


/* ── Inputs column: a raised "control panel" card ─────────────────── */
.finboard-tool-edit__inputs {
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 22px 22px 24px;
    box-shadow: var(--fb-neu-out);
    height: fit-content;
}

.finboard-tool-edit__inputs .finboard-tool-field { margin-bottom: 22px; }
.finboard-tool-edit__inputs .finboard-tool-field:last-child { margin-bottom: 0; }

/* Inputs sink into the panel (TIC-style inset shadow for premium feel) */
.finboard-tool--editorial .finboard-tool-field__input-row {
    box-shadow: var(--fb-neu-in-sm);
    background: var(--fb-bg-inset);
    border-radius: var(--fb-radius-sm);
}


/* Section label with TIC gold-bar signature (4px left + bottom hairline).
 * This is the "section header accent" established in §2.6 of the handover. */
.finboard-tool-edit__section-label {
    font-family: var(--fb-font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fb-text-muted);
    margin: 0 0 22px;
    padding: 2px 0 10px 12px;
    border-left: 4px solid var(--fb-gold);
    border-bottom: 1px solid var(--fb-border);
}


/* ── Result column: hero card + raised stat grid.
 * Gap between hero and stat grid is deliberately larger than the card-to-card
 * gap so the hero's shadow (30px extent) doesn't bleed into the stats. */
.finboard-tool-edit__result {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 32px;
}


/* The hero card — the moment. Raised with a faint top-edge gold accent,
 * tabular-num hero value in TIC gold. Glow intentionally subtle — enough
 * to read as "premium" without shouting. */
.finboard-tool-edit__hero-card {
    position: relative;
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 28px 32px 26px;
    box-shadow: var(--fb-neu-out);
    overflow: hidden;
    text-align: center;
}

/* Quiet gold accent line along the top edge — replaces the previous heavy glow */
.finboard-tool-edit__hero-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 20%, var(--fb-gold) 50%, transparent 80%);
    opacity: 0.35;
    pointer-events: none;
}

.finboard-tool-edit__result-eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fb-text-muted);
    margin-bottom: 14px;
}

.finboard-tool-edit__hero-value {
    font-family: var(--fb-font-display);
    font-size: clamp(40px, 5vw, 60px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--fb-gold);
    margin: 0 0 12px;
    font-variant-numeric: tabular-nums;
    /* Text-shadow removed — was adding too much glow; the card shadow is enough */
}

.finboard-tool-edit__hero-sub {
    font-size: 13px;
    line-height: 1.5;
    color: var(--fb-text-secondary);
    margin: 0 auto;
    max-width: 40ch;
}


/* Supporting stats — four individually raised mini-cards in a grid.
 * Slight outer padding prevents hover-lift shadow from clipping neighbours. */
.finboard-tool-edit__stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 0;
    padding: 6px;
}

.finboard-tool-edit__stat {
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius-sm);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: var(--fb-neu-out-sm);
    transition: box-shadow var(--fb-transition), transform var(--fb-transition);
}

.finboard-tool-edit__stat:hover {
    box-shadow: var(--fb-neu-out);
    transform: translateY(-1px);
}

.finboard-tool-edit__stat-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fb-text-muted);
}

.finboard-tool-edit__stat-value {
    font-family: var(--fb-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--fb-text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.finboard-tool-edit__stat-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 700;
    background: var(--fb-green-dim);
    color: var(--fb-green);
    border-radius: var(--fb-radius-xxs);
    letter-spacing: 0.04em;
    vertical-align: middle;
}

/* ISA hero gauge (inside editorial hero card) */
.finboard-tool-edit__gauge {
    height: 10px;
    border-radius: var(--fb-radius-pill);
    box-shadow: var(--fb-neu-in-sm);
    background: var(--fb-bg-inset);
    overflow: hidden;
}


/* ── UK Context strip — a raised editorial band below the calculator.
 * This is the signature feature: what makes running the calculation here
 * different from running it on any US-built calculator site.
 * Wrapped in a TIC-style raised card with the full 10px neumorphic shadow. */
.finboard-tool-uk-context {
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-radius: var(--fb-radius);
    padding: 26px 28px 28px;
    box-shadow: var(--fb-neu-out);
    margin: 0 20px;
}

.finboard-tool-uk-context__header {
    padding: 2px 0 14px 16px;
    border-left: 4px solid var(--fb-gold);
    border-bottom: 1px solid var(--fb-border);
    margin-bottom: 28px;
}

.finboard-tool-uk-context__eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fb-gold);
    margin-bottom: 8px;
}

.finboard-tool-uk-context__title {
    font-family: var(--fb-font-display) !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: var(--fb-text) !important;
    margin: 0 !important;
    letter-spacing: -0.01em;
}

.finboard-tool-uk-context__item + .finboard-tool-uk-context__item {
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid var(--fb-border);
}

.finboard-tool-uk-context__item-title {
    font-family: var(--fb-font-display) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--fb-text) !important;
    margin: 0 0 10px !important;
}

.finboard-tool-uk-context__item-title strong {
    color: var(--fb-gold);
    font-weight: 700;
}

.finboard-tool-uk-context__item-lede {
    font-size: 14px;
    line-height: 1.6;
    color: var(--fb-text-secondary);
    margin: 0 0 16px;
    max-width: 68ch;
}

.finboard-tool-uk-context__source {
    font-size: 12px;
    color: var(--fb-text-muted);
    margin-top: 12px;
    font-style: italic;
}

.finboard-tool-uk-context__source a {
    color: var(--fb-text-muted) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--fb-border-gold);
    text-underline-offset: 2px;
    transition: text-decoration-color var(--fb-transition);
}

.finboard-tool-uk-context__source a:hover {
    color: var(--fb-gold) !important;
    text-decoration-color: var(--fb-gold) !important;
}


/* PLSA table — sits in an inset "data terminal" panel */
.finboard-tool-uk-context__table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 0;
    font-size: 14px;
    background: var(--fb-bg-inset);
    border-radius: var(--fb-radius-sm);
    box-shadow: var(--fb-neu-in-sm);
    overflow: hidden;
}

.finboard-tool-uk-context__table thead th {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fb-text-muted);
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--fb-border);
    background: rgba(0,0,0,0.08);
}

.finboard-tool-uk-context__table th.num,
.finboard-tool-uk-context__table td.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.finboard-tool-uk-context__table tbody th,
.finboard-tool-uk-context__table tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--fb-border);
    color: var(--fb-text-secondary);
    font-weight: 500;
    font-size: 14px;
    background: transparent !important;
}

.finboard-tool-uk-context__table tbody th {
    color: var(--fb-text);
    font-weight: 600;
}

.finboard-tool-uk-context__table tbody tr:last-child th,
.finboard-tool-uk-context__table tbody tr:last-child td {
    border-bottom: none;
}

.finboard-tool-uk-context__table tr.is-current-tier th,
.finboard-tool-uk-context__table tr.is-current-tier td {
    color: var(--fb-gold);
    background: var(--fb-gold-dim) !important;
}

.finboard-tool-uk-context__check {
    width: 36px;
    text-align: center;
    color: var(--fb-gold);
    font-weight: 700;
}

.finboard-tool-uk-context__table tr.is-met .finboard-tool-uk-context__check {
    color: var(--fb-green);
}


/* State Pension callout — a raised "moment of insight" card.
 * Gets the 4px gold left-bar signature + restrained shadow. */
.finboard-tool-uk-context__callout {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    margin: 16px 4px 4px;
    padding: 18px 24px;
    background: var(--fb-bg-card);
    border: 1px solid var(--fb-border);
    border-left: 4px solid var(--fb-gold);
    border-radius: var(--fb-radius-sm);
    box-shadow: var(--fb-neu-out-sm);
    position: relative;
}

.finboard-tool-uk-context__callout-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fb-text-muted);
}

.finboard-tool-uk-context__callout-value {
    font-family: var(--fb-font-display);
    font-size: 30px;
    font-weight: 800;
    color: var(--fb-gold);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.015em;
    /* Text-shadow removed — card shadow carries enough visual weight */
}

.finboard-tool-uk-context__callout-note {
    font-size: 12px;
    color: var(--fb-text-muted);
    margin-top: 2px;
}


/* Comparison bars — inset track, dimensional fill for premium data-viz feel */
.finboard-tool-uk-context__bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0 4px;
}

.finboard-tool-uk-context__bar-row {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 16px;
    align-items: center;
}

.finboard-tool-uk-context__bar-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--fb-text-secondary);
    text-transform: uppercase;
}

.finboard-tool-uk-context__bar {
    --fill: 28%;
    position: relative;
    height: 32px;
    background: var(--fb-bg-inset);
    border-radius: var(--fb-radius-xs);
    overflow: hidden;
    box-shadow: var(--fb-neu-in-sm);
}

.finboard-tool-uk-context__bar::before {
    content: "";
    position: absolute;
    top: 2px; left: 2px; bottom: 2px;
    width: calc(var(--fill) - 4px);
    background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 60%), var(--fb-text-muted);
    opacity: 0.5;
    border-radius: calc(var(--fb-radius-xs) - 1px);
    transition: width var(--fb-transition-slow);
}

.finboard-tool-uk-context__bar--you::before {
    background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent 60%), var(--fb-gold);
    opacity: 1;
    /* Subtle inner highlight only — glow removed to stop it reading as "selected state" */
}

.finboard-tool-uk-context__bar-value {
    position: relative;
    z-index: 1;
    display: block;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--fb-text);
    font-variant-numeric: tabular-nums;
}

.finboard-tool-uk-context__bar--you .finboard-tool-uk-context__bar-value {
    color: var(--fb-text-on-gold);
}

/* ═══════════════════════════════════════════════════
 * Share to Community — button + modal
 * ═══════════════════════════════════════════════════ */
.finboard-tool__share-wrap {
    border-top: 1px solid var(--fb-border);
    padding-top: 16px;
    margin-top: 16px;
    text-align: center;
}

.finboard-tool__share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--fb-gold);
    color: var(--fb-gold);
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.finboard-tool__share-btn:hover {
    background: var(--fb-gold);
    color: #1a1e28;
}

/* ═══════════════════════════════════════════════════════════════════
 * TOOLS DISCLAIMER — editorial eyebrow treatment
 * Aligns the top-of-page advisory with the TIC left-border gold bar
 * signature used by editorial section headers.
 * ═══════════════════════════════════════════════════════════════════ */
.finboard-tool-disclaimer {
    border-left: 4px solid var(--fb-gold);
    border-bottom: 1px solid var(--fb-border);
    border-radius: 0;
    background: transparent;
    padding: 10px 0 10px 14px;
    box-shadow: none;
}

.finboard-tool-disclaimer p {
    font-size: 12px;
    color: var(--fb-text-muted);
    line-height: 1.55;
}