/**
 * Snapshot charts — shared by the home calculator and the listing page.
 * Pairs with js/snapshot-charts.js.
 */

.snap-chart {
    margin: 0.15rem 0 0.4rem;
}
.snap-chart svg {
    width: 100%;
    height: auto;
    display: block;
    /* Direct labels sit outside the plot at the extremes. */
    overflow: visible;
}

/* The column is the control: dimming carries the selection, and an inactive
   column lifts under the pointer so it reads as something you can press. */
.snap-col {
    transition: opacity 0.15s ease;
}
.snap-col.is-inactive {
    opacity: 0.3;
}
.snap-col.is-clickable {
    cursor: pointer;
}
.snap-col.is-inactive.is-clickable:hover {
    opacity: 0.62;
}

/* Matches .stat-badge in css/analysis-report.css, so a figure and its share
   pair the same way here as in the printed reports. */
.snap-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
    background: var(--paper-sunken, #f0f0ec);
    color: var(--ink-3, #6c757d);
    font-size: 0.75rem;
    font-weight: 600;
    vertical-align: 0.08em;
}
.snap-badge.text-danger { color: var(--status-neg, #8f1f3a); }

/* Lease / renewal segmented control.

   Lives here, not in home.css, because this file is the one both the homepage
   wizard AND listing.php load — a rule in home.css never reached listing.php's
   copy of the same widget.

   Sienna was the selected fill, which put it in direct competition with the
   sienna CTA sitting a few rows below in the same card. Selection is state, not
   action, so it is now a raised paper pill on a sunken track: the same metaphor
   as the rest of the site, and no colour at all.

   The pill reads at 1.12 against the track, so --lift-sm is genuinely carrying
   the boundary. That is allowed — WCAG 1.4.11 asks that a component boundary be
   perceivable, not that it be colour.

   The markup still ships .btn-success / .btn-outline-success and the JS on both
   pages swaps those classes; restyling rather than rewriting keeps that
   behaviour untouched. .snap-toggle.btn (0-2-0) beats .btn-success (0-1-0). */

/* The groove. Bootstrap's .btn-group collapses radii and overlaps borders, so
   the track supplies the rounding and a little padding for the pill to sit in. */
#snapToggleWrap .btn-group {
    background: var(--state-track, #f5f2ec);
    border: 1px solid var(--rule, #e5e1d8);
    border-radius: var(--r-md, 6px);
    padding: 3px;
    gap: 3px;
}

.snap-toggle.btn {
    --bs-btn-color: var(--ink-3, #686f7c);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--ink, #14243b);
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: transparent;
    /* Pressing the UNSELECTED half would otherwise flash
       .btn-outline-success's active green for the duration of the mousedown. */
    --bs-btn-active-color: var(--ink, #14243b);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: transparent;
    border-radius: calc(var(--r-md, 6px) - 2px) !important;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: none;
}

/* The selected half. --bs-btn-active-* is not optional: Bootstrap's `.btn.active`
   rule paints background-color from --bs-btn-active-bg DIRECTLY and does not
   fall back to --bs-btn-bg, which is how .btn-success's green kept showing
   through on the selected half while the unselected half restyled correctly. */
.snap-toggle.btn.active {
    --bs-btn-color: var(--state-current, #14243b);
    --bs-btn-bg: var(--state-raised, #ffffff);
    --bs-btn-border-color: var(--state-raised, #ffffff);
    --bs-btn-active-color: var(--state-current, #14243b);
    --bs-btn-active-bg: var(--state-raised, #ffffff);
    --bs-btn-active-border-color: var(--state-raised, #ffffff);
    --bs-btn-hover-color: var(--state-current, #14243b);
    --bs-btn-hover-bg: var(--state-raised, #ffffff);
    --bs-btn-hover-border-color: var(--state-raised, #ffffff);
    box-shadow: var(--lift-sm, 0 0 0 1px rgba(20,36,59,.09), 0 6px 16px rgba(20,36,59,.05));
    font-weight: 600;
}