/* =====================================================================================
   RFP Estimator v3 — bespoke, namespaced ".rf" full-screen takeover on the Trendsic
   "Signal" design language. Verbatim translation of docs/design/rfp3/RFP Estimator.dc.html.
   Self-contained: carries the full Signal token set so the mockup's inline var(--x) styles
   resolve in BOTH light (".rf") and dark (".rf.dark"). Inert on every other page.
   ===================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---- shared tokens (mode-independent) ---- */
.rf {
    --brand-50:#EEF1FE; --brand-100:#DDE3FD; --brand-200:#C2CCFB; --brand-400:#7B8FF3; --brand-500:#5E76EE;
    --brand-600:#4C63E6; --brand-700:#3D4FC9; --brand-800:#3340A0; --brand-900:#28297A;
    --brand-grad:linear-gradient(135deg,#5E76EE,#8A63E8);
    --success:#15A06B; --danger:#E04646; --warning:#EE8A2E; --gold:#D99B12; --purple:#8B5CF6; --info:#4C6EF5;
    --r-md:12px; --r-lg:16px; --e1:0 1px 2px rgba(20,25,55,.06); --e2:0 2px 8px rgba(20,25,55,.08); --ease:cubic-bezier(.2,.8,.2,1);

    /* light (default) */
    --bg:#F5F6FB; --surface:#FFFFFF; --surface-2:#FAFBFE; --border:#E5E8F2; --border-strong:#D2D7E6;
    --text:#1A1D2E; --text-2:#4A4F63; --muted:#767C92; --faint:#A2A7BC;
    --info-bg:#ECEFFB; --info-fg:#3D4FC9; --ok-bg:#E2F6EE; --ok-fg:#0E6B47;
    --warn-bg:#FCEEDD; --warn-fg:#B5651A; --gold-bg:#FBF1D6; --gold-fg:#8A6A0C;
    --bad-bg:#FCE7E7; --bad-fg:#B3262B; --pur-bg:#EFE9FD; --pur-fg:#6D45C9; --neutral-bg:#F1F2F6; --neutral-fg:#6B7080;

    /* In-slot: absolute + inset:0 anchors to the shell's position:relative <main> (no body-park). */
    position: absolute; inset: 0; overflow: auto;
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased;
    background: var(--bg); color: var(--text);
}
.rf *, .rf *::before, .rf *::after { box-sizing: border-box; }

/* ---- dark ---- */
.rf.dark {
    --bg:#0E1430; --surface:#161E3C; --surface-2:#1B2446; --border:#2A335C; --border-strong:#38436F;
    --text:#EEF1FB; --text-2:#B9C2E0; --muted:#8590B5; --faint:#6B7596;
    --info-bg:rgba(94,118,238,.16); --info-fg:#C2CCFB; --ok-bg:rgba(52,211,153,.15); --ok-fg:#5FE3B0;
    --warn-bg:rgba(238,138,46,.16); --warn-fg:#F0A961; --gold-bg:rgba(217,155,18,.16); --gold-fg:#F2C14E;
    --bad-bg:rgba(224,70,70,.16); --bad-fg:#F58A8A; --pur-bg:rgba(139,92,246,.18); --pur-fg:#C3A8FB; --neutral-bg:rgba(255,255,255,.06); --neutral-fg:#8590B5;
}

/* ---- keyframes (from the mockup) ---- */
@keyframes rf-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes rf-pop  { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes rf-spin { to { transform: rotate(360deg); } }
@keyframes rf-bar  { 0% { transform: translateX(-100%); } 100% { transform: translateX(180%); } }

/* ---- editable controls inherit the mockup's display-box styling; reset native chrome ---- */
.rf input, .rf select, .rf textarea { font-family: inherit; outline: none; }
.rf input::placeholder, .rf textarea::placeholder { color: var(--faint); }
.rf textarea { resize: vertical; }
.rf select { appearance: none; -webkit-appearance: none; cursor: pointer; }

/* ---- a few interaction affordances the mockup implies (hover/drag) ---- */
.rf-dz { transition: border-color .15s var(--ease), background .15s var(--ease); }
.rf-dz.drag, .rf-dz:hover { border-color: var(--brand-400) !important; background: var(--brand-50) !important; }
.rf-clk { cursor: pointer; transition: filter .12s var(--ease), background .12s var(--ease); }
.rf-clk:hover { filter: brightness(.97); }
.rf.dark .rf-clk:hover { filter: brightness(1.12); }
.rf-row-clk { cursor: pointer; }
.rf-row-clk:hover { background: var(--surface-2); }

/* ---- toast ---- */
.rf-toast {
    position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
    background: var(--text); color: var(--surface); font: 600 12.5px 'Plus Jakarta Sans';
    padding: 10px 18px; border-radius: 10px; box-shadow: var(--e2); z-index: 60; animation: rf-pop .16s ease;
}

/* ---- refine panel (segmented controls + busy state) ---- */
.rf-seg button { transition: background .12s var(--ease), color .12s var(--ease); }
.rf-seg button.active { background: var(--brand-50); color: var(--brand-700); }
.rf.dark .rf-seg button.active { background: var(--brand-100); color: var(--brand-900); }
.rf-clk.disabled, .rf-clk:disabled { opacity: .55; cursor: default; filter: none; }