/* ── Lead Demand modal: traffic-sufficiency block ─────────────────────────
   The manager-facing read under the demand read line: a plain-language
   verdict (pill + sentence) over a small stat row whose sublines name each
   number's source and timeframe (docs/TRAFFIC_SUFFICIENCY_PLAN.md §5).
   Property-card popout (New Leases) — fr-* Frontier system. */

.fr-suff-block {
    margin: 10px 0 2px;
    padding: 12px 16px 14px;
    background: var(--fr-bg);
    border: 1px solid var(--fr-hairline);
    border-radius: 10px;
    font-family: var(--fr-font-sans);
}

/* Verdict line: pill + one plain sentence. */
.fr-suff-verdict {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.fr-suff-verdict-text {
    font-size: 13px;
    color: var(--fr-ink);
}

/* Status pill — icon + label, mirroring the demand pill's shape. */
.fr-suff-pill {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.fr-suff-pill.is-good    { color: var(--fr-positive); }
.fr-suff-pill.is-line    { color: var(--fr-warning); }
.fr-suff-pill.is-short   { color: var(--fr-negative); }
.fr-suff-pill.is-neutral { color: var(--fr-ink-3); }

/* Stat row: value / label / provenance, text tokens only. */
.fr-suff-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 18px;
    margin-top: 12px;
}
.fr-suff-tile { min-width: 0; }
.fr-suff-value {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--fr-ink);
}
.fr-suff-value .fr-suff-unit {
    font-size: 12px;
    font-weight: 500;
    color: var(--fr-ink-2);
    margin-left: 2px;
}
.fr-suff-label {
    font-size: 12px;
    color: var(--fr-ink-2);
    margin-top: 3px;
}
.fr-suff-src {
    font-size: 11px;
    color: var(--fr-ink-3);
    margin-top: 1px;
}

/* Optional note under the tiles (pooled phases, borrowed rate). */
.fr-suff-note {
    font-size: 11px;
    color: var(--fr-ink-3);
    margin-top: 10px;
}

/* ── GA4 traffic & ad-spend strip ─────────────────────────────────────────
   "Where the traffic came from", under the demand chart: why the lead line
   moved (docs/GA4_INTEGRATION_PLAN.md). Separate .fr-ga4-* namespace on
   purpose — the .fr-suff-* rules above are reused by the student Rate
   Manager's demand panel (student_rate_modals.py), so adding GA4-specific
   rules there would silently restyle a second surface. */

.fr-ga4-strip {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--fr-hairline-strong);
    font-family: var(--fr-font-sans);
}

.fr-ga4-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Disclosure control. The caret is text so its state is readable without
   color, and the label says what is inside rather than "show more". */
.fr-ga4-toggle {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--fr-ink-2);
    cursor: pointer;
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    text-align: left;
}
.fr-ga4-toggle:hover { color: var(--fr-ink); }
.fr-ga4-toggle:focus-visible {
    outline: 2px solid var(--fr-accent);
    outline-offset: 3px;
    border-radius: 3px;
}
.fr-ga4-caret { font-size: 9px; color: var(--fr-ink-3); }

.fr-ga4-caveat {
    font-size: 11px;
    color: var(--fr-ink-3);
}

.fr-ga4-summary {
    font-size: 13px;
    color: var(--fr-ink);
    margin: 8px 0 0;
}

/* Same tile grammar AND the same tinted container as the sufficiency block
   above, so the two stat rows read as siblings rather than one boxed and one
   floating loose on the modal's white. Own class — see the note above. */
.fr-ga4-tiles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 18px;
    margin-top: 10px;
    padding: 12px 16px 14px;
    background: var(--fr-bg);
    border: 1px solid var(--fr-hairline);
    border-radius: 10px;
}

/* The traffic figure's own top margin is small (its legend sits close), so
   the gap to the tinted box above is set here rather than in Plotly. */
.fr-ga4-chart {
    margin-top: 10px;
}
.fr-ga4-tile { min-width: 0; }
.fr-ga4-value {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--fr-ink);
    font-variant-numeric: tabular-nums;
}
.fr-ga4-value .fr-ga4-unit {
    font-size: 12px;
    font-weight: 500;
    color: var(--fr-ink-2);
    margin-left: 2px;
}
.fr-ga4-label {
    font-size: 12px;
    color: var(--fr-ink-2);
    margin-top: 3px;
}
.fr-ga4-src {
    font-size: 11px;
    color: var(--fr-ink-3);
    margin-top: 1px;
    font-variant-numeric: tabular-nums;
}

/* The ad-spend clause appended to the demand read line.

   It is a sibling of .fr-rm-modal-read-text inside the read line's flex row,
   NOT nested in it, so it inherits the modal body's size unless told
   otherwise — pin 13px or it renders visibly larger than the sentence it
   continues. Amber and rule-separated because it is a second, different fact
   about the same four weeks: the lead read comes from Box Score, this comes
   from Google Ads. */
.fr-ga4-clause {
    font-size: 13px;
    font-weight: 600;
    color: var(--fr-accent);
    border-left: 1px solid var(--fr-hairline-strong);
    padding-left: 10px;
}

@media (max-width: 680px) {
    .fr-suff-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fr-ga4-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}