/* Investment Path – workspace
   Form footer, the results pane frame, and pinned-scenario chips.
   ========================================================================== */

/* ---------- Form footer ---------- */

.form-footer { margin-top: 16px; }

/* Layout and type only – the skin comes from .action-primary, the same split
   .landing-primary and .guide-next use. The fill this used to declare was
   var(--gradient), which .action-primary overrode anyway and which puts #fff
   on a #22d3ee end stop in light theme. */
.btn-primary {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 12px;
    color: var(--on-glass);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
}

/* Borderless brand gradient with a coloured glow, as the deployed build has
   it – the outlined, darkened variant read as heavier than the rest of the
   UI. The glass is the specular gloss over the top half plus the bright rim
   light; the same recipe drives the selected segment, so buttons and
   switches are one component family. */
/* Liquid glass. The brand tint is deliberately NOT opaque – the backdrop
   filter needs something to refract, and that lensing is what separates
   glass from a painted gradient. Layers, top to bottom:
     1. specular sheen falling off by the upper third
     2. the translucent brand tint
     3. blur + saturate, which bends and enriches whatever sits behind
   The rim is doing most of the work: a bright hairline along the top edge
   where light catches, a soft internal bounce off the floor, and a faint
   full-perimeter edge so the shape reads as a solid pane, not a decal. */
/* Tinted glass. The fill is only about a third opaque, so the pane is mostly
   the blurred backdrop and the tint just colours it – that transparency is
   the effect, not the gradient. A light blur keeps what shows through
   readable rather than smeared, the rim is the same hue at high alpha so the
   edge stays crisp against any background, and the cast is a plain soft
   shadow instead of a coloured glow, which is what took the vividness down. */
.action-primary {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--accent-2) 52%, transparent);
    border-radius: 12px;
    color: var(--on-glass);
    background:
        linear-gradient(120deg,
            color-mix(in srgb, var(--accent) 34%, transparent),
            color-mix(in srgb, var(--accent-2) 30%, transparent));
    backdrop-filter: blur(6.4px) saturate(150%);
    -webkit-backdrop-filter: blur(6.4px) saturate(150%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 4px 30px rgba(0, 0, 0, 0.10);
    transition: transform 0.18s ease, box-shadow 0.22s ease,
        background 0.22s ease, border-color 0.22s ease;
}

.action-primary:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    /* Hover thickens the tint slightly and brightens the rim – the pane gets
       denser rather than louder. */
    .action-primary:hover {
        transform: translateY(-1px);
        border-color: color-mix(in srgb, var(--accent-2) 74%, transparent);
        background:
            linear-gradient(120deg,
                color-mix(in srgb, var(--accent) 46%, transparent),
                color-mix(in srgb, var(--accent-2) 40%, transparent));
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.4),
            0 6px 34px rgba(0, 0, 0, 0.14);
    }
}

.action-primary:active {
    transform: scale(0.985);
}

.btn-spinner {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    display: none;
    animation: spin 0.7s linear infinite;
}
.btn-primary.loading .btn-spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.autocalc-note {
    text-align: center;
    font-size: 10.5px;
    color: var(--text-faint);
    margin-top: 8px;
}

/* ---------- Main area ---------- */

.main-head {
    position: relative;
    /* Result cards animate with transform/opacity and therefore become later
       stacking contexts. Keep action menus above those cards instead of
       letting the hero paint over most of a clickable menu. */
    z-index: 60;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}
.main-head h1 {
    margin-top: 5px;
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 760;
    line-height: 1.05;
    letter-spacing: -0.04em;
}
.main-head p {
    max-width: 680px;
    font-size: 13px;
    color: var(--text-dim);
    margin-top: 7px;
}
.main-kicker {
    display: block;
    margin-bottom: 4px;
    color: var(--accent-2-text);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.13em;
}

.main-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    padding: 5px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface-solid) 55%, transparent);
    backdrop-filter: blur(12px);
}

/* Untinted glass, same material as the segmented track. */
.ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-alt) 45%, transparent);
    backdrop-filter: blur(6.4px) saturate(140%);
    -webkit-backdrop-filter: blur(6.4px) saturate(140%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 4px 30px rgba(0, 0, 0, 0.08);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, transform 0.15s, border-color 0.2s;
}
@media (hover: hover) and (pointer: fine) {
    .ghost-btn:hover {
        background: var(--surface-hover);
        color: var(--text);
        border-color: var(--border-strong);
        transform: translateY(-1px);
    }
}

/* Same ring the landing surfaces share. Without it these fall back to the
   UA default, which is the one focus style on the site that is not ours. */
.ghost-btn:focus-visible,
.site-theme:focus-visible {
    outline: 2px solid var(--accent-2);
    outline-offset: 3px;
}

.ghost-btn svg { width: 14px; height: 14px; }

/* ---------- Scenario chips & comparison ---------- */

.scenario-chips:empty { display: none; }
.scenario-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    animation: fadeUp 0.3s ease both;
}
.chip-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    min-width: 9px;
    border-radius: 50%;
    background: var(--chip-color, var(--accent));
}
.chip-x {
    border: none;
    background: none;
    color: var(--text-faint);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    transition: color 0.2s;
}
.chip-x:hover { color: var(--red); }

.compare-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px 10px;
    overflow-x: auto;
}
.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}
.compare-table th, .compare-table td {
    padding: 9px 12px;
    text-align: right;
    white-space: nowrap;
}
.compare-table th:first-child, .compare-table td:first-child {
    text-align: left;
    color: var(--text-dim);
    font-weight: 500;
}
.compare-table thead th {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
}
.compare-table thead th .chip-dot { margin-right: 6px; }
.compare-table tbody tr:not(:last-child) td { border-bottom: 1px solid var(--border); }
.compare-table td:not(:first-child) { font-weight: 650; font-variant-numeric: tabular-nums; }