/* WFV Front Desk v3 - shared base (tokens + widget styles), extracted from the v2 shared core. */
/* =============================================================
   WFV Front Desk v2 - shared base styles
   Tokens from design-systems/wfv/tokens.css (Alec's WFV system):
   sage green + warm ink, Open Sans.
   ============================================================= */
:root{
  --wfv-blue:#2f5d4f; --wfv-blue-700:#274f43; --wfv-blue-900:#1f3f36;
  --wfv-blue-100:#cfe2db; --wfv-blue-50:#eaf1ee; --wfv-green-mid:#649989;
  --wfv-amber:#b5791f; --wfv-amber-700:#8f5f18; --wfv-amber-50:#fbf2e3;
  --ok:#2e7d32; --ok-50:#e9f3ea;
  --warn:#b5791f; --warn-50:#fbf2e3;
  --alert:#c0392b; --alert-50:#f9eae7;
  --er:#8a1f1a; --er-50:#f6e9e7;
  --ink:#1e2422; --slate:#44504c; --muted:#5e6b66; --faint:#a9b2ae;
  --line:#e6ece9; --bg:#f4f8f6; --panel:#f7f9f8; --card:#ffffff;
  --font-ui:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --r-xs:6px; --r-sm:9px; --r:13px; --r-lg:18px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(30,40,36,.06);
  --shadow:0 1px 2px rgba(30,40,36,.05),0 12px 28px -16px rgba(30,40,36,.26);
}
*{box-sizing:border-box}
/* `hidden` means hidden. The attribute only works through the browser's own
   [hidden]{display:none}, and ANY author rule that sets display beats it,
   because author styles outrank the UA sheet. Two elements in this app set
   display and were therefore permanently visible no matter what the code did
   with the attribute:
     .wfvbar-menu  (display:flex)  -> the Callout and Table menus were BOTH
                                     always on screen, overlapping each other
                                     and the page, and clicking a menu button
                                     toggled a property with no visual effect
     .pedit-row    (display:block) -> "New group name" in the price grid showed
                                     even when an existing group was selected
   .authgate, .stalechip and .toast each carry their own [hidden] guard, which
   is how the pattern survived this long: the ones that had been noticed were
   fixed one at a time. This is the rule that closes the whole class, including
   for anything added later. !important is deliberate and is the standard fix:
   nothing should ever out-rank hidden. */
[hidden]{display:none !important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.015em;margin:0;font-weight:700;line-height:1.2}
a{color:var(--wfv-blue-900);text-decoration:none} a:hover{text-decoration:underline}
button{font-family:inherit}
code,kbd{font-family:var(--font-mono);font-size:.88em;background:var(--wfv-blue-50);color:var(--wfv-blue-900);padding:1px 6px;border-radius:var(--r-xs)}
.ico{width:1.2em;height:1.2em;display:inline-block;vertical-align:-0.22em;flex:none}

/* Buttons, chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:15px;min-height:44px;padding:10px 18px;border-radius:var(--r-sm);border:1px solid var(--line);background:var(--card);color:var(--slate);cursor:pointer;transition:.15s;white-space:nowrap}
.btn:hover{border-color:var(--wfv-blue-100);color:var(--wfv-blue-900);background:var(--wfv-blue-50)}
.btn--primary{background:var(--wfv-blue);border-color:var(--wfv-blue);color:#fff}.btn--primary:hover{background:var(--wfv-blue-700);color:#fff}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);background:#eef2f0;color:var(--slate)}
.chip--blue{background:var(--wfv-blue-50);color:var(--wfv-blue-900)}.chip--ok{background:var(--ok-50);color:var(--ok)}.chip--warn{background:var(--warn-50);color:var(--warn)}.chip--alert{background:var(--alert-50);color:var(--alert)}

/* Callouts (used inside page bodies) */
.callout{display:flex;gap:11px;padding:13px 15px;border-radius:var(--r);margin:0 0 16px;font-size:15px;border:1px solid}
.callout--info{background:var(--wfv-blue-50);border-color:var(--wfv-blue-100);color:var(--wfv-blue-900)}
.callout--tip{background:var(--wfv-amber-50);border-color:#ecd9be;color:var(--wfv-amber-700)}
.callout--warn{background:var(--warn-50);border-color:#ecd6ad;color:var(--warn)}
.callout--urgent{background:var(--alert-50);border-color:#f0c8c2;color:#8f291f}

/* Tables (page bodies) */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 18px}
.tbl th,.tbl td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.tbl th{background:var(--wfv-blue-50);color:var(--wfv-blue-900);font-weight:700}

/* Page body typography */
.body p{margin:0 0 14px}
.body h2{font-size:19px;margin:26px 0 10px}
.body h3{font-size:16.5px;margin:20px 0 8px;color:var(--slate)}
.body ol,.body ul{margin:0 0 16px;padding-left:22px}
.body li{margin:6px 0}
.body table{margin-bottom:18px}

/* ---------- Shared widget shell ---------- */
.widget{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm)}
.widget .whead{padding:16px 20px;background:var(--wfv-blue-50);border-bottom:1px solid var(--line);color:var(--wfv-blue-900)}
.widget .whead .wt{font-size:18px;font-weight:700}
.widget .whead .wh{font-size:14.5px;color:var(--muted);margin-top:2px}
.widget .wbody{padding:20px}
.widget .field{margin-bottom:14px}
.widget .field>label{display:block;font-size:13.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:7px}
.widget select{font-family:var(--font-ui);font-size:16px;color:var(--ink);background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;min-height:48px;width:100%;outline:none}
.widget select:focus{border-color:var(--wfv-blue);box-shadow:0 0 0 4px var(--wfv-blue-50)}
.widget input[type=number]{font-family:var(--font-ui);font-size:16px;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;min-height:48px;width:100%;outline:none}
.widget input[type=number]:focus{border-color:var(--wfv-blue);box-shadow:0 0 0 4px var(--wfv-blue-50)}
.seg{display:flex;flex-wrap:wrap;gap:7px}
.seg button{font-size:16px;font-weight:600;color:var(--slate);background:var(--card);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:10px 18px;min-height:48px;cursor:pointer;transition:.13s}
.seg button:hover{border-color:var(--wfv-blue-100);color:var(--wfv-blue-900)}
.seg button[aria-pressed="true"]{background:var(--wfv-blue);color:#fff;border-color:var(--wfv-blue)}
.wresult{border-top:1px solid var(--line);padding:16px 18px;background:var(--panel)}
.wresult .rlabel{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:10px}

/* Eligibility doc chips */
.docs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.doc{font-size:17px;font-weight:700;letter-spacing:.02em;padding:10px 16px;min-height:44px;border-radius:var(--r-sm);display:inline-flex;align-items:center}
.doc.elig{color:var(--ok);background:var(--ok-50);border:1px solid rgba(46,125,50,.3)}
.doc.cond{color:var(--warn);background:var(--warn-50);border:1px solid rgba(181,121,31,.35)}
.doc.none{color:var(--muted);background:#f0f2f1;border:1px solid var(--line);text-decoration:line-through}
.doclegend{font-size:13px;color:var(--muted);margin:6px 0 2px}
.wresult .rlabel-none{margin-top:14px}
.wnotes-none li{color:var(--slate)}
.wnotes-none li::before{background:var(--muted)}

/* Outcome banners */
.outcome{border-radius:var(--r-sm);padding:16px 18px;font-weight:700;font-size:19px;margin-bottom:10px}
.outcome.er{background:var(--er);color:#fff}
.outcome.emergency{background:var(--alert);color:#fff}
.outcome.urgent{background:var(--warn-50);color:var(--warn);border:1px solid rgba(181,121,31,.4)}
.outcome.routine{background:var(--ok-50);color:var(--ok);border:1px solid rgba(46,125,50,.35)}
.outcome.ask{background:#f0f2f1;color:var(--slate);border:1px solid var(--line)}
.outcome.collect{background:var(--ok-50);color:var(--ok);border:1px solid rgba(46,125,50,.35)}
.outcome.bill{background:var(--wfv-blue-50);color:var(--wfv-blue-900);border:1px solid var(--wfv-blue-100)}
.outcome.verify{background:var(--warn-50);color:var(--warn);border:1px solid rgba(181,121,31,.4)}

/* Notes under widget results */
.wnotes{list-style:none;padding:0;margin:10px 0 0}
.wnotes li{font-size:15px;color:var(--ink);padding:8px 0 8px 18px;position:relative;border-bottom:1px solid var(--line)}
.wnotes li:last-child{border-bottom:none}
.wnotes li::before{content:"";position:absolute;left:0;top:15px;width:7px;height:7px;background:var(--wfv-green-mid);border-radius:50%}
.wnotes li.warn::before{background:var(--warn)}
.wnotes li.stop::before{background:var(--alert)}

/* Price result */
.pricebig{font-size:26px;font-weight:800;color:var(--ink)}
.pricepp{font-size:16.5px;font-weight:700;color:var(--ok);margin-top:2px}
.pricenote{font-size:14px;color:var(--muted);margin-top:6px}

/* Home-screen feedback entry point */
.homefeedback{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:center;gap:14px;flex-wrap:wrap}