/* KYH Rx Coverage Check — front-door shell.
   Main page = a large payer selector (card grid, scales to many insurers).
   Inside a tool = slim top bar with a dropdown switcher; tool fills below,
   chromeless. Self-hosted Public Sans; Newsreader for headings. */
@font-face { font-family:"Public Sans"; font-weight:400; font-style:normal; font-display:swap;
  src:url("/static/fonts/public-sans-400.woff2") format("woff2"); }
@font-face { font-family:"Public Sans"; font-weight:500; font-style:normal; font-display:swap;
  src:url("/static/fonts/public-sans-500.woff2") format("woff2"); }
@font-face { font-family:"Public Sans"; font-weight:600; font-style:normal; font-display:swap;
  src:url("/static/fonts/public-sans-600.woff2") format("woff2"); }
@font-face { font-family:"Public Sans"; font-weight:700; font-style:normal; font-display:swap;
  src:url("/static/fonts/public-sans-700.woff2") format("woff2"); }
@font-face { font-family:"Newsreader"; font-weight:600; font-style:normal; font-display:swap;
  src:url("/static/fonts/newsreader-600.woff2") format("woff2"); }

:root{
  --ink:#0f172a; --muted:#64748b; --faint:#94a3b8; --line:#e3e8ef; --line-strong:#cbd5e1;
  --surface:#fff; --canvas:#eceff3;
  --sans:"Public Sans", ui-sans-serif, system-ui, sans-serif;
  --serif:"Newsreader", ui-serif, Georgia, serif;
  --bar-h:52px;
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{ margin:0; font-family:var(--sans); color:var(--ink); background:var(--canvas);
  display:flex; flex-direction:column; }
:focus-visible{ outline:2px solid #2563eb; outline-offset:2px; border-radius:6px; }

/* ---- slim top bar ---- */
.bar{ flex:none; height:var(--bar-h); display:flex; align-items:center; gap:1rem;
  padding:0 clamp(.8rem,2.5vw,1.4rem); background:var(--surface);
  border-bottom:1px solid var(--line); box-shadow:0 1px 2px rgba(16,24,40,.05); }
.bar__brand{ display:flex; align-items:center; gap:.5rem; flex:none; border:0; background:transparent;
  font:inherit; cursor:pointer; padding:.2rem .3rem; border-radius:8px; }
.bar__brand:hover{ background:#f1f4f8; }
.logomark{ width:26px; height:26px; }
.logomark rect{ fill:var(--ink); }
.logomark__rx{ fill:none; stroke:#fff; stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round; }
.bar__name{ font-family:var(--serif); font-weight:600; font-size:1.05rem; letter-spacing:-.01em; }
.bar__note{ margin:0 0 0 auto; font-size:.72rem; color:var(--muted); white-space:nowrap; }

/* ---- coverage switcher (dropdown) ---- */
.switch{ position:relative; }
.switch__btn{ display:inline-flex; align-items:center; gap:.5rem; font:inherit; font-size:.85rem;
  font-weight:600; color:var(--ink); background:var(--surface); border:1px solid var(--line-strong);
  border-radius:9px; padding:.35rem .7rem; cursor:pointer; }
.switch__btn:hover{ border-color:var(--faint); }
.switch__dot{ width:.62rem; height:.62rem; border-radius:50%; background:var(--muted); flex:none; }
.switch__caret{ color:var(--muted); font-size:.7rem; }
.switch__menu{ position:absolute; top:calc(100% + 6px); left:0; min-width:300px; margin:0; padding:.35rem;
  list-style:none; background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 16px 40px -14px rgba(16,24,40,.32); z-index:20; }
.switch__item{ display:flex; align-items:flex-start; gap:.6rem; padding:.5rem .6rem; border-radius:8px;
  cursor:pointer; }
.switch__item:hover{ background:#f4f7fb; }
.switch__item[aria-selected="true"]{ background:#eef4ff; }
.switch__item--soon{ opacity:.5; cursor:not-allowed; }
.switch__item--home{ border-top:1px solid var(--line); margin-top:.25rem; padding-top:.6rem; color:var(--muted); font-weight:600; }
.switch__txt{ display:flex; flex-direction:column; }
.switch__name{ font-weight:600; font-size:.86rem; }
.switch__tag{ font-size:.72rem; color:var(--muted); }
.switch__badge{ margin-left:auto; font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); background:#eef1f5; border:1px solid var(--line); border-radius:5px; padding:.1rem .3rem; }

/* ---- stage ---- */
.stage{ flex:1; min-height:0; position:relative; }
#tool{ position:absolute; inset:0; width:100%; height:100%; border:0; background:var(--surface); }

/* ---- main-page selector ---- */
.landing{ position:absolute; inset:0; overflow:auto; display:grid; place-items:center; padding:clamp(1.5rem,5vw,3rem); }
.landing__inner{ width:100%; max-width:880px; text-align:center; }
.landing__title{ font-family:var(--serif); font-weight:600; font-size:clamp(1.5rem,3.5vw,2.1rem); letter-spacing:-.01em; margin:0; }
.landing__sub{ color:var(--muted); margin:.5rem 0 1.8rem; }
.landing__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; text-align:left; }
.landing__more{ margin-top:1.4rem; font-size:.78rem; color:var(--faint); }

.card{ position:relative; display:flex; flex-direction:column; gap:.4rem; padding:1.3rem 1.4rem;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 1px 2px rgba(16,24,40,.05);
  cursor:pointer; text-align:left; font:inherit; transition:transform .12s, box-shadow .15s, border-color .15s;
  border-top:4px solid var(--card-accent,#94a3b8); }
.card:hover{ transform:translateY(-3px); box-shadow:0 16px 34px -16px rgba(16,24,40,.3); border-color:var(--card-accent,#cbd5e1); }
.card__name{ font-size:1.35rem; font-weight:700; color:var(--card-accent,#0f172a); }
.card__tag{ font-size:.85rem; color:var(--muted); line-height:1.45; }
.card__go{ margin-top:.5rem; font-size:.8rem; font-weight:700; color:var(--card-accent,#0f172a); }
.card--soon{ cursor:not-allowed; opacity:.6; }
.card--soon:hover{ transform:none; box-shadow:0 1px 2px rgba(16,24,40,.05); }
.card__badge{ position:absolute; top:1rem; right:1rem; font-size:.6rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); background:#eef1f5; border:1px solid var(--line); border-radius:6px; padding:.15rem .4rem; }

@media (max-width:560px){ .bar__note{ display:none; } .bar{ gap:.6rem; } }