/* Medicare price estimator.
   Visual language aligned to the Northstar Estimator preview: a slate scale with one
   signature blue, hairline borders doing the structural work, 4px radii, and almost no
   elevation. The previous pass leaned on three shadow tiers and 15-17px body text, which
   read as a marketing page; this reads as an instrument.

   Three rules taken from the reference and applied throughout:
     * borders, not shadows. #E2E8F0 hairlines separate everything. Elevation is reserved
       for the one element that genuinely floats.
     * small type, tight tracking. Labels 11px, body 12.5px, micro-labels 10.5px uppercase.
       Money is tabular-nums always, because columns of figures have to line up.
     * blue is a signal, not a decoration. #0072B8 for anything actionable or derived,
       #00A3FF only at low alpha for emphasis. */

:root {
  /* slate scale */
  --ink:        #0F172A;
  --ink-2:      #334155;
  --text:       #475569;
  --muted:      #64748B;
  --faint:      #94A3B8;
  --rule:       #E2E8F0;
  --rule-2:     #CBD5E1;
  --surface:    #F8FAFC;
  --page:       #F9F9F9;
  --white:      #ffffff;

  /* one signature blue, plus the darker accessible variant for text */
  --blue:       #00A3FF;
  --blue-text:  #0072B8;
  --blue-link:  #0C74B9;
  --blue-wash:  rgba(0,163,255,.025);
  --blue-tint:  rgba(0,163,255,.12);
  --blue-edge:  rgba(0,163,255,.30);

  /* semantic */
  --good:       #166534;
  --warn:       #B45309;
  --warn-edge:  rgba(180,83,9,.28);
  --warn-wash:  #FFFBF4;
  --stop:       #C8102E;

  /* Superscript accents, used as route and category signals rather than decoration */
  --ss-blue:    #00A3FF;
  --ss-orange:  #FF8B4A;
  --ss-red:     #FF426F;
  --ss-purple:  #AF5EFF;
  --ss-green:   #01CE91;

  --r:          4px;
  --r-sm:       3px;
  --pill:       999px;
  /* the single elevation, for the element that floats above the page */
  --lift:       0 0 0 1px rgba(0,0,0,.05), 0 14px 40px -10px rgba(15,23,42,.20);
  /* the deep one, for the card that genuinely hovers. Taken from the reference deck, where
     the estimator window sits over the host page rather than in it. */
  --hover:      0 40px 90px -32px rgba(15,23,42,.30),
                0 12px 30px -18px rgba(15,23,42,.14);

  --mono: 'Suisse Intl Mono', 'Geist Mono', ui-monospace, monospace;
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } }
/* the slow bob from the reference deck: 7s, alternating, 11px. Slow enough that it reads as
   the card hovering rather than as an animation asking for attention. */
@keyframes floaty { from { transform: translateY(0); } to { transform: translateY(-11px); } }
@keyframes lineIn { from { opacity: 0; transform: translateX(-6px); } }
@keyframes popIn  { from { opacity: 0; transform: translateY(-5px) scale(.99); } }
@keyframes pulseDot { 0%,100% { opacity: 1; transform: scale(1); }
                      50% { opacity: .25; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--page);
  color: var(--ink);
  font-family: var(--font-body, 'Suisse Intl', Inter, 'Helvetica Neue', Arial, sans-serif);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
a { color: var(--blue-link); text-decoration: none; }
a:hover { color: var(--blue); }

.mono { font-family: var(--mono); }

/* micro-label: the uppercase mono tag used to name a region */
.lbl {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--faint);
}
.lbl-b { color: var(--ink-2); }

/* ---------------------------------------------------------------- gov band */
.govband {
  background: var(--white); border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--faint);
  padding: 7px 22px; display: flex; gap: 16px; align-items: center;
}
.govband .flagmark {
  width: 12px; height: 8px; background: var(--ink); display: inline-block;
  position: relative; flex: none;
}
.govband .flagmark::after {
  content: ""; position: absolute; inset: 0 0 50% 55%; background: var(--blue-text);
}
.govband .proto { margin-left: auto; color: var(--warn); }

/* ---------------------------------------------------------------- header */
header.brand {
  border-bottom: 1px solid var(--rule); background: var(--white);
  padding: 15px 22px; display: flex; align-items: flex-end; gap: 24px;
}
.cmsmark { line-height: 1; }
.cmsmark .m1 {
  font-weight: 600; font-size: 19px; letter-spacing: -.03em; color: var(--ink);
}
.cmsmark .m1 em { font-style: normal; color: var(--blue-text); }
.cmsmark .m2 { margin-top: 4px; }
.byline { margin-left: auto; text-align: right; }
.byline img { height: 13px; display: block; margin: 4px 0 0 auto; }

/* ---------------------------------------------------------------- shell */
.shell { max-width: 720px; margin: 0 auto; padding: 0 22px 96px; }

.stage-head { padding: 40px 0 16px; }
.stage-head.compact {
  padding: 24px 0 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.stage-head h1 {
  font-weight: 500; font-size: clamp(26px, 4.4vw, 36px); line-height: 1.08;
  letter-spacing: -.035em; margin: 10px 0 10px; color: var(--ink);
}
.lede { font-size: 13.5px; line-height: 1.55; color: var(--text); margin: 0; max-width: 60ch; }

.card {
  background: var(--white); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 16px 18px;
}
.card + .card { margin-top: 10px; }

/* ---------------------------------------------------------------- entry */
.entry { box-shadow: var(--lift); padding: 20px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px;
         align-items: start; }
@media (max-width: 620px) { .grid2 { grid-template-columns: 1fr; } }

.f { display: block; margin-bottom: 18px; }
.grid2 .f { margin-bottom: 0; }
.flabel {
  display: block; font-size: 11px; font-weight: 500; color: var(--text);
  margin-bottom: 4px;
}
.flabel em { font-style: normal; color: var(--faint); font-weight: 400; }
.fhint { display: block; font-size: 11px; line-height: 1.5; color: var(--muted);
         margin-top: 5px; }
.fhint.foot { margin-top: 11px; }

input[type=text], input[type=password], select {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--white);
  font-family: inherit; font-size: 13px; color: var(--ink); outline: 0;
  appearance: none; transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint);
}
input.mono, .mono input { font-family: var(--mono); font-size: 12.5px; }
select { cursor: pointer; padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6'><path d='M0 0l4.5 6L9 0z' fill='%2364748B'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font: inherit; font-size: 12px; padding: 5px 11px;
  border: 1px solid var(--rule); border-radius: var(--pill);
  background: var(--white); color: var(--ink-2); cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.chip:hover { border-color: var(--blue-edge); color: var(--blue-text);
              background: var(--blue-wash); }
.chip.on { background: var(--blue-text); border-color: var(--blue-text); color: #fff; }

.cta {
  margin-top: 4px; width: 100%; padding: 10px 20px;
  border: 1px solid var(--ink); border-radius: var(--pill);
  background: var(--ink); color: #fff; font: inherit; font-size: 13px; font-weight: 500;
  cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.cta:hover:not(:disabled) { background: var(--blue-text); border-color: var(--blue-text); }
.cta:disabled { background: var(--surface); border-color: var(--rule);
                color: var(--faint); cursor: not-allowed; }

/* small pill button, the reference's "add to my estimate" shape */
.pillbtn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--blue-edge); border-radius: var(--pill);
  background: var(--white); color: var(--blue-text);
  padding: 4px 11px; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
  transition: background .12s ease;
}
.pillbtn:hover:not(:disabled) { background: var(--blue-wash); }
.pillbtn:disabled { color: var(--faint); border-color: var(--rule); cursor: default; }

/* ---------------------------------------------------------------- context bar */
.context { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.ctxpill {
  font-family: var(--mono); font-size: 10px; letter-spacing: .02em;
  padding: 4px 8px; border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); border: 1px solid var(--rule);
}
.ctxpill.soft { font-family: inherit; font-size: 11px; text-transform: none;
                color: var(--muted); }
.ctxedit {
  font: inherit; font-size: 11.5px; font-weight: 600; background: none; border: 0;
  padding: 2px; color: var(--blue-text); cursor: pointer;
}
.ctxedit:hover { color: var(--blue); }
.actions { margin-left: auto; display: flex; gap: 6px; }
.ghost {
  font: inherit; font-size: 11.5px; font-weight: 600; padding: 5px 12px;
  border: 1px solid var(--rule); border-radius: var(--pill);
  background: var(--white); color: var(--ink-2); cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
.ghost:hover { border-color: var(--blue-edge); color: var(--blue-text); }

/* ---------------------------------------------------------------- chat */
.chatcard { padding: 16px 18px; }
.chatlog { display: flex; flex-direction: column; gap: 8px;
           max-height: 44vh; overflow-y: auto; padding: 2px 0 4px; }
.bub {
  font-size: 13px; line-height: 1.5; padding: 9px 12px; max-width: 86%;
  border-radius: var(--r); animation: popIn .18s ease-out;
}
.bub.them { background: var(--surface); border: 1px solid var(--rule); color: var(--ink);
            align-self: flex-start; }
.bub.me { background: var(--blue-text); color: #fff; align-self: flex-end; }
.bub.stop { background: #FFF5F5; border-color: #FCA5A5; color: #7F1D1D;
            max-width: 100%; font-weight: 500; }
.bub.thinking { display: flex; gap: 4px; align-items: center; padding: 12px; }
.bub.thinking span {
  width: 5px; height: 5px; border-radius: 50%; background: var(--faint);
  animation: pulseDot 1.1s infinite ease-in-out;
}
.bub.thinking span:nth-child(2) { animation-delay: .16s; }
.bub.thinking span:nth-child(3) { animation-delay: .32s; }

#chips:not(:empty) { margin-top: 10px; }
.askrow { display: flex; gap: 6px; margin-top: 10px; }
.askrow input { flex: 1; border-radius: var(--pill); padding-left: 13px; }
.askgo {
  width: 38px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--ink); border-radius: var(--pill);
  background: var(--ink); color: #fff; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.askgo:hover:not(:disabled) { background: var(--blue-text); border-color: var(--blue-text); }
.askgo:disabled { background: var(--rule-2); border-color: var(--rule-2); cursor: default; }

/* ---------------------------------------------------------------- answer */
.hero { box-shadow: var(--lift); padding: 20px; }
.bignum {
  font-weight: 500; font-size: clamp(34px, 6.5vw, 52px); line-height: 1;
  letter-spacing: -.045em; margin: 6px 0 10px; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bignum .cur { font-size: .44em; vertical-align: .5em; margin-right: 1px;
               color: var(--faint); }
.bignum .to { font-size: 15px; font-weight: 400; color: var(--muted);
              padding: 0 .3em; vertical-align: .5em; letter-spacing: 0; }
.heronote { font-size: 13px; line-height: 1.55; font-weight: 500; margin: 0 0 8px;
            color: var(--ink); }
.subline { font-size: 11.5px; line-height: 1.55; color: var(--muted); margin: 0; }
.clinical { font-family: var(--mono); font-size: 10px; color: var(--faint);
            margin: 6px 0 0; line-height: 1.45; }

.sechead { font-size: 12.5px; font-weight: 600; letter-spacing: -.01em;
           margin: 24px 0 3px; color: var(--ink-2); }
.secnote { font-size: 11.5px; line-height: 1.55; color: var(--muted); margin: 0 0 10px;
           max-width: 64ch; }

.note { border-left: 2px solid var(--rule-2); }
.note .lbl { display: block; margin-bottom: 5px; }
.cardp { font-size: 12px; line-height: 1.55; margin: 0; color: var(--text); }
.cardp + .cardp { margin-top: 7px; }
.note.narrowed { border-left-color: var(--blue-text); }
.note.subst    { border-left-color: var(--blue); }
.note.withheld { border-left-color: var(--warn); }
.note.prereq   { border-left-color: var(--warn); margin-top: 10px; }

.mgroup { padding: 15px 18px; }
.mgroup.base { border-color: var(--rule-2); box-shadow: var(--lift); }
.mhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
         margin-bottom: 8px; }
.prob {
  font-family: var(--mono); font-size: 10px; letter-spacing: .03em;
  padding: 3px 7px; border-radius: var(--r-sm);
  background: var(--surface); color: var(--text); border: 1px solid var(--rule);
}
.mmoney { font-variant-numeric: tabular-nums; font-weight: 500; font-size: 16px;
          letter-spacing: -.025em; }
.mlead { font-size: 12.5px; line-height: 1.45; font-weight: 600; margin: 0;
         color: var(--ink); }
.mbody { font-size: 12px; line-height: 1.6; color: var(--text); margin: 5px 0 0; }
.mcost { font-size: 12px; line-height: 1.6; margin: 7px 0 0; color: var(--blue-text);
         font-weight: 500; }
.mlead.pending { font-weight: 400; color: var(--muted); font-style: italic; }
.mcaveat { font-size: 11.5px; line-height: 1.55; margin: 9px 0 0; padding-left: 9px;
           border-left: 2px solid var(--rule-2); color: var(--muted); }

/* ---------------------------------------------------------------- line tables */
.ltable { margin-top: 10px; border-top: 1px solid var(--rule); }
.lrow {
  display: grid; grid-template-columns: 62px 1fr 96px 76px; gap: 9px;
  align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--rule);
  font-size: 12.5px;
}
.lrow.lhead {
  font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--faint); padding: 5px 0;
}
.lc { font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.ld { display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; }
.ldtext { color: var(--text); line-height: 1.4; }
.la, .lp { text-align: right; font-variant-numeric: tabular-nums; }
.la { color: var(--muted); }
.lp { font-weight: 500; color: var(--ink); }
.lp.free { color: var(--good); font-weight: 400; }
.lunit { font-family: var(--mono); font-size: 10px; color: var(--faint); }
.lrow.ltotal { border-bottom: 0; border-top: 1px solid var(--rule-2); padding-top: 8px; }
.ltotal .ld { font-weight: 600; color: var(--ink); }
.ltotal .lp { font-weight: 600; font-size: 13.5px; }
.ltable.tight .lrow { padding: 5px 0; font-size: 12px; }
@media (max-width: 620px) {
  .lrow { grid-template-columns: 56px 1fr 72px; }
  .lrow .la { display: none; }
}

.cunits { font-family: var(--mono); font-size: 10px; color: var(--ink-2);
          background: var(--blue-wash); border: 1px solid var(--blue-edge);
          border-radius: var(--r-sm); padding: 1px 5px; }
.csched { font-family: var(--mono); font-size: 9px; letter-spacing: .04em;
          text-transform: uppercase; padding: 2px 6px; border-radius: var(--r-sm);
          background: var(--surface); border: 1px solid var(--rule); color: var(--muted); }
.csched.category_ii { display: none; }
.cfree { font-size: 10.5px; color: var(--good); font-weight: 500; }

/* ---------------------------------------------------------------- change rows */
.variant { padding: 10px 0; border-top: 1px solid var(--rule); }
.variant:first-of-type { margin-top: 10px; }
.dtable { margin-top: 8px; }
.drow {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 12.5px;
}
.drow:last-child { border-bottom: 0; }
.dcodes { display: flex; gap: 5px; align-items: baseline; flex: none; }
.dcodes .c, .chg .c {
  font-family: var(--mono); font-size: 10.5px; padding: 2px 5px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-sm);
  color: var(--ink-2);
}
.arrow { color: var(--blue-text); font-size: 12px; }
.ddesc, .chgd { color: var(--text); line-height: 1.4; }
.dmoney { display: flex; gap: 5px; align-items: baseline; white-space: nowrap;
          font-variant-numeric: tabular-nums; }
.dwas { color: var(--faint); text-decoration: line-through; }
.dnow { font-weight: 600; color: var(--ink); }
.changes { display: flex; flex-direction: column; gap: 4px; }
.chg { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; font-size: 12.5px; }
.mv { font-family: var(--mono); font-weight: 600; font-size: 11px; flex: none; }
.mv.added { color: var(--good); }
.mv.removed { color: var(--warn); }
.plus { color: var(--good); font-weight: 600; }
.minus { color: var(--warn); font-weight: 600; }

.vmoney { display: flex; gap: 10px; align-items: baseline; margin-top: 7px;
          flex-wrap: wrap; }
.vshare { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em;
          text-transform: uppercase; color: var(--faint); }
.vdelta { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13.5px; }
.vdelta.up { color: var(--warn); }
.vdelta.down { color: var(--good); }
.vtotal { font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--muted); }
.vlines { margin-top: 7px; }
.vlines summary, .mcodes summary {
  cursor: pointer; font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  list-style: none;
}
.vlines summary::-webkit-details-marker, .mcodes summary::-webkit-details-marker {
  display: none;
}
.vlines summary::before, .mcodes summary::before {
  content: "\203A"; display: inline-block; margin-right: 5px;
  transition: transform .2s; color: var(--muted);
}
details[open] > summary::before { transform: rotate(90deg); }
.vlines summary:hover, .mcodes summary:hover { color: var(--blue-text); }

/* ---------------------------------------------------------------- treatments */
.card.treatment { border-left: 2px solid var(--blue-edge); padding: 18px 20px; }
.tname { font-weight: 600; font-size: 14.5px; letter-spacing: -.02em; margin: 0 0 10px;
         color: var(--ink); }
.tmoney { display: flex; flex-wrap: wrap; gap: 22px; padding: 10px 0 12px;
          border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
          margin-bottom: 12px; }
.tfig { display: flex; flex-direction: column; gap: 2px; }
.tfk { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .05em;
       text-transform: uppercase; color: var(--faint); }
.tfv { font-variant-numeric: tabular-nums; font-size: 19px; font-weight: 500;
       letter-spacing: -.03em; color: var(--ink); }
.tfig.strong .tfv { color: var(--blue-text); }
.tcadence { font-size: 12px; line-height: 1.6; color: var(--blue-text); margin: 0 0 10px;
            font-weight: 500; }
.tbody { font-size: 12.5px; line-height: 1.6; margin: 0 0 7px; color: var(--ink-2); }
.tbody.muted { color: var(--muted); font-size: 12px; }
.tbody.pending { color: var(--muted); font-style: italic; }
.tshare { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em;
          text-transform: uppercase; color: var(--faint); margin: 10px 0 0; }

/* ---------------------------------------------------------------- stats / alts */
.stats .statrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
                  margin: 10px 0 3px; }
@media (max-width: 620px) { .stats .statrow { grid-template-columns: repeat(2, 1fr); } }
.stat { display: flex; flex-direction: column; gap: 2px; }
.sk { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .05em;
      text-transform: uppercase; color: var(--faint); }
.sv { font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 500;
      letter-spacing: -.025em; color: var(--ink); }

.alts { border-color: var(--blue-edge); }
.alts .lbl { display: block; margin-bottom: 5px; }
.altrow {
  display: flex; justify-content: space-between; gap: 10px; width: 100%;
  font: inherit; font-size: 12.5px; text-align: left; padding: 9px 0; margin: 0;
  border: 0; border-top: 1px solid var(--rule); background: none; cursor: pointer;
}
.altrow:hover .who { color: var(--blue-text); }
.altrow .who { font-weight: 500; color: var(--ink); }
.altrow .d { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }

.answerfoot { margin-top: 14px; }
.meter { margin-top: 8px; font-family: var(--mono); font-size: 9px; letter-spacing: .04em;
         color: var(--faint); }

/* ---------------------------------------------------------------- chyron */
.chyron {
  position: fixed; bottom: 0; left: 0; right: 0;
  border-top: 1px solid var(--rule); background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  font-family: var(--mono); font-size: 9px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--faint);
  padding: 8px 22px; display: flex; gap: 16px; align-items: center;
}
.chyron .stat { color: var(--ink-2); display: inline; }
.chyron .sp { margin-left: auto; }
@media (max-width: 700px) { .chyron { display: none; } }

/* ---------------------------------------------------------------- print */
.printhead { display: none; }
@media print {
  @page { margin: 14mm; }
  body { background: #fff; font-size: 11px; }
  .govband, header.brand, .chyron, .noprint, .stage-head, .meter { display: none !important; }
  .shell { max-width: none; padding: 0; }
  .printhead {
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 1.5px solid #000; padding-bottom: 7px; margin-bottom: 14px;
  }
  .ph-mark { font-weight: 600; font-size: 14px; color: #000; white-space: nowrap;
             flex: none; padding-right: 14px; }
  .ph-mark em { font-style: normal; }
  .ph-meta { font-size: 10px; color: #444; text-align: right; }
  .card { box-shadow: none !important; border: 1px solid #999; break-inside: avoid;
          padding: 11px; }
  .card + .card { margin-top: 7px; }
  .hero, .entry, .mgroup.base, .chatcard { box-shadow: none !important; }
  .bignum { font-size: 32px; }
  .vlines summary, .mcodes summary { display: none; }
  .cvariant, .drow, .lrow { break-inside: avoid; }
  a[href]::after { content: ""; }
}

/* ---------------------------------------------------------------- benefits (SIMULATED)
   The one place in this app where the numbers are invented rather than computed. The
   warning is part of the card, not a footnote on the page, so it cannot be scrolled away
   from the figure it qualifies. */
.idrow { display: flex; gap: 7px; align-items: stretch; }
.idrow input { flex: 1; }
.idrow .pillbtn { flex: none; white-space: nowrap; }
.fhint.bad { color: var(--warn); }

.bencard {
  margin-top: 10px; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--surface); padding: 12px 14px; animation: fadeUp .22s ease both;
}
.benhead { display: flex; align-items: center; gap: 7px; }
.benok {
  width: 15px; height: 15px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--good); color: #fff;
}
.bentitle { font-size: 12px; font-weight: 600; color: var(--good);
            letter-spacing: -.01em; }
.benid { font-family: var(--mono); font-size: 10.5px; color: var(--faint);
         margin-left: auto; }
.benplan { font-size: 12.5px; font-weight: 500; color: var(--ink); margin-top: 7px; }

.acc { margin-top: 9px; }
.accbar {
  height: 5px; border-radius: var(--pill); background: var(--rule-2);
  overflow: hidden;
}
.accfill { height: 100%; background: var(--blue-text); border-radius: var(--pill); }
.acclegend {
  display: flex; justify-content: space-between; gap: 10px; margin-top: 5px;
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.accleft { font-weight: 600; color: var(--ink); }
.beneffect { font-size: 11.5px; line-height: 1.5; color: var(--blue-text);
             margin: 9px 0 0; font-weight: 500; }

.simwarn {
  display: flex; gap: 7px; align-items: flex-start; margin-top: 10px; padding-top: 9px;
  border-top: 1px dashed var(--rule-2);
  font-size: 10.5px; line-height: 1.5; color: var(--muted);
}
.simtag {
  flex: none; font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  background: #FEF3C7; border: 1px solid #FDE68A; color: #92400E;
  padding: 1px 5px; border-radius: var(--r-sm);
}
.ctxpill.verified { border-color: var(--good); color: var(--good);
                    background: #F0FDF4; font-family: inherit; font-size: 11px; }
.note.benefits { border-left-color: var(--good); }

/* ---------------------------------------------------------------- door 1: the catalogue */
.svccard { box-shadow: var(--lift); }
#svcq { font-size: 15px; padding: 11px 13px; }
.svclist { margin-top: 4px; max-height: 52vh; overflow-y: auto; }
.svcrow {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  font: inherit; background: none; border: 0; border-top: 1px solid var(--rule);
  padding: 10px 2px; cursor: pointer;
}
.svcrow:hover { background: var(--blue-wash); }
.svcrow.on { background: rgba(0,163,255,.06); }
.svcmain { flex: 1; min-width: 0; }
.svcname { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.svcmeta { display: flex; gap: 8px; align-items: baseline; margin-top: 3px;
           font-size: 10.5px; color: var(--muted); flex-wrap: wrap; }
.svcmeta .c { font-family: var(--mono); font-size: 10px; padding: 1px 5px;
              background: var(--surface); border: 1px solid var(--rule);
              border-radius: var(--r-sm); color: var(--ink-2); }
.svcvol { font-family: var(--mono); color: var(--faint); }
.svcadd {
  flex: none; font-size: 11px; font-weight: 600; color: var(--blue-text);
  border: 1px solid var(--blue-edge); border-radius: var(--pill); padding: 4px 11px;
}
.svcrow.on .svcadd { background: var(--blue-text); border-color: var(--blue-text);
                     color: #fff; }
.nomatch { border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 8px; }
.nomatch .cardp { margin-bottom: 8px; }

/* ALWAYS IN VIEW ONCE SOMETHING IS SELECTED.
   The tray is a card at the END of the services stage, under a list that is 52vh tall inside
   a fixed-height panel - so selecting a code put the total and the "See the full estimate"
   button below the fold, with nothing on screen to say that scrolling was needed. Pinned to
   the bottom of the panel's scroll container (`.ss-overlay > .gridbg`) instead: sticky keeps
   it in normal flow, so the "cannot find it?" line still follows it rather than being
   covered, and it stops pinning once you reach the real bottom.
   `bottom: -1px` hides the sub-pixel gap that otherwise lets a row show through beneath it. */
/* The split-headline note. A hook for removal as much as a style - `paintBill` deletes it
   when the bill replaces the range it describes - so it is declared explicitly rather than
   left as a class with no rule, which an existing test rightly flags. */
.heronote.splitnote { margin-top: 6px; }

.tray {
  box-shadow: var(--lift);
  position: sticky;
  bottom: -1px;
  z-index: 3;
  background: var(--paper, #fff);
}
/* So a long selection cannot take over the panel it is pinned inside. Measured: six
   selections put the tray at 45% of the panel at 21vh and 35% at 13vh, with the button
   fully visible either way - so the cap is about how much of the list stays readable
   behind it, not about whether the button can be reached. */
.tray #traylist { max-height: 13vh; overflow-y: auto; }
.trayrow { display: flex; align-items: baseline; gap: 10px; padding: 7px 0;
           border-top: 1px solid var(--rule); font-size: 12.5px; }
.trayname { flex: 1; color: var(--ink); }
.traypay { font-variant-numeric: tabular-nums; font-weight: 500; }
.trayx { border: 0; background: none; color: var(--faint); font-size: 15px;
         cursor: pointer; padding: 0 2px; line-height: 1; }
.trayx:hover { color: var(--warn); }
.trayfoot { display: flex; align-items: baseline; justify-content: space-between;
            gap: 10px; margin-top: 10px; padding-top: 10px;
            border-top: 1px solid var(--rule-2); }
.traytotal { font-variant-numeric: tabular-nums; font-size: 20px; font-weight: 600;
             letter-spacing: -.03em; }
.doorswitch { margin-top: 14px; text-align: center; }
.linkbtn { font: inherit; font-size: inherit; font-weight: 600; background: none;
           border: 0; padding: 0; color: var(--blue-text); cursor: pointer;
           text-decoration: underline; }
.linkbtn:hover { color: var(--blue); }

/* ---------------------------------------------------------------- blocked / typed rows */
.svcrow.blocked { opacity: .55; cursor: not-allowed; background: var(--surface); }
.svcrow.blocked:hover { background: var(--surface); }
.svcrow.blocked .svcname { color: var(--muted); }
.svcrow.blocked .svcadd { color: var(--faint); border-color: var(--rule);
                          background: none; }
.svcblock { display: flex; gap: 6px; align-items: baseline; margin-top: 5px;
            font-size: 10.5px; line-height: 1.45; color: var(--warn); }
.svcblock .c { font-family: var(--mono); font-size: 10px; padding: 1px 4px;
               background: #FEF3C7; border: 1px solid #FDE68A; border-radius: var(--r-sm);
               color: #92400E; flex: none; }

.addgrouphead {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--faint); margin: 16px 0 6px;
}
.addline { display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap;
           padding: 6px 0; border-top: 1px solid var(--rule); font-size: 12.5px; }
.addline .c { font-family: var(--mono); font-size: 10.5px; padding: 2px 5px;
              background: var(--surface); border: 1px solid var(--rule);
              border-radius: var(--r-sm); color: var(--ink-2); flex: none; }
.addline .ddesc { flex: 1; min-width: 8em; }
.addline .dnow { font-variant-numeric: tabular-nums; }
.typetag { font-family: var(--mono); font-size: 9px; letter-spacing: .04em;
           text-transform: uppercase; color: var(--faint); border: 1px solid var(--rule);
           border-radius: var(--pill); padding: 1px 6px; }
.note.visitnote { border-left-color: var(--blue-text); }

/* =======================================================================
   Superscript site register: blueprint grid, corner marginalia, and the
   floating window. The product surface stays the slate instrument; this is the
   frame it sits in, and the two being distinct is the point.
   ======================================================================= */
.gridbg {
  background-color: var(--page);
  background-image:
    linear-gradient(to right,  rgba(0,163,255,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,163,255,.10) 1px, transparent 1px);
  background-size: 120px 120px;
  min-height: 100vh;
}

.marginalia { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.mg {
  position: absolute; font-family: var(--mono); font-size: 9px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--blue-text); opacity: .55;
}
.mg-tl { top: 96px; left: 18px; }
.mg-tr { top: 96px; right: 18px; }
.mg-bl { bottom: 42px; left: 18px; max-width: 34ch; line-height: 1.4; }
@media (max-width: 1100px) { .marginalia { display: none; } }

/* the card that hovers over the page */
.card.float {
  box-shadow: var(--hover);
  animation: floaty 7s ease-in-out infinite alternate;
}
.card.float:focus-within { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .card.float { animation: none; } }

/* ---------------------------------------------------------------- stepper */
.stepper {
  display: flex; align-items: stretch; gap: 0; margin: 26px 0 6px;
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--white);
  overflow: hidden;
}
.step {
  flex: 1; display: flex; align-items: center; gap: 9px; text-align: left;
  font: inherit; background: none; border: 0; padding: 11px 14px; cursor: pointer;
  transition: background .15s ease;
}
.step:disabled { cursor: default; }
.step:not(:disabled):hover { background: var(--blue-wash); }
.stepn {
  flex: none; width: 21px; height: 21px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--rule-2);
  font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--faint);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.stept { display: flex; flex-direction: column; gap: 1px; font-size: 12px;
         font-weight: 500; color: var(--faint); line-height: 1.25; }
.stept em { font-style: normal; font-size: 10px; font-weight: 400; color: var(--faint);
            opacity: .75; }
.step.on .stepn { background: var(--blue-text); border-color: var(--blue-text);
                  color: #fff; }
.step.on .stept { color: var(--ink); }
.step.done .stepn { background: var(--good); border-color: var(--good); color: #fff; }
.step.done .stept { color: var(--ink-2); }
.steprule { width: 1px; background: var(--rule); flex: none; }
@media (max-width: 700px) {
  .stepper { flex-direction: column; }
  .steprule { width: auto; height: 1px; }
  .stept em { display: none; }
}

/* ---------------------------------------------------------------- the fork
   Three rows, not three tiles. A tile grid asks you to compare three things; these are three
   ways to the same answer, so they read as a menu you scan down and the eye lands on the
   headline of each. The bracketed mono index is the site system's own register.

   The coloured Route A/B/C tags are gone. Three accents on three equal options said "these
   differ" when the point is that they do not, and the brand is monochrome plus one blue. */
.routes { display: flex; flex-direction: column; gap: 0;
          background: var(--white); border: 1px solid var(--rule);
          border-radius: var(--r); overflow: hidden; box-shadow: var(--lift); }
.route {
  /* NO TRACK COUNT TO KEEP IN STEP WITH THE MARKUP.
     This was a three-track grid, and before that a four-track one whose fourth column outlived
     the badge it was for - `.routebody` got assigned into the leftover 40px column and, having
     `min-width: 0`, crushed to it, rendering every headline one word per line on the most
     important navigation screen in the flow.
     The comment that replaced it said "a layout whose column count is a silent contract with
     the markup is a layout that breaks the next time a child is removed", and then a child was
     removed - the right-hand meta came off three of the four routes - and it broke again, two
     tracks of content in three tracks of grid.
     So the contract is gone rather than restated. Flex lays out however many children there
     are, and a route with a meta and a route without both come out right. */
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  background: none; border: 0; border-top: 1px solid var(--rule);
  padding: 17px 18px; position: relative;
  transition: background .13s ease;
}
.route:first-child { border-top: 0; }
.route::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent; transition: background .13s ease;
}
.route:hover { background: var(--blue-wash); }
.route:hover::before { background: var(--ss-blue); }
/* takes the space the meta and chevron do not, which is what the 1fr track used to do */
.routebody { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.routeh { font-size: 15px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.routep { font-size: 12.5px; line-height: 1.5; color: var(--text); }
.routep strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.routemeta {
  display: flex; flex-direction: column; gap: 1px; text-align: right; white-space: nowrap;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-2);
}
.routemeta em { font-style: normal; color: var(--faint); }
.routego { display: grid; place-items: center; color: var(--faint);
           transition: color .13s ease, transform .13s ease; }
.route:hover .routego { color: var(--blue-text); transform: translateX(2px); }
@media (max-width: 720px) {
  /* two children here, because .routemeta is hidden */
  .route { grid-template-columns: 1fr 18px; }
  .routemeta { display: none; }
}

/* ---------------------------------------------------------------- route C: the call */
.callcard { padding: 20px; }
.demoflag {
  display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px;
  background: #FFF7ED; border: 1px solid #FED7AA; border-radius: var(--r);
  font-size: 11.5px; line-height: 1.5; color: #92400E; margin-bottom: 16px;
}
.dialer { display: flex; flex-direction: column; gap: 5px; padding-bottom: 16px;
          border-bottom: 1px solid var(--rule); }
.phone {
  font-family: var(--mono); font-size: clamp(24px, 4.4vw, 34px); font-weight: 500;
  letter-spacing: -.02em; color: var(--ink); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.transcripthead { display: block; margin: 16px 0 8px; }
.transcript { display: flex; flex-direction: column; gap: 7px; }
.tline { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px;
         line-height: 1.55; animation: lineIn .3s ease both; }
.twho {
  flex: none; width: 62px; font-family: var(--mono); font-size: 9px; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; padding-top: 2px;
}
.tline.them .twho { color: var(--blue-text); }
.tline.me .twho { color: var(--faint); }
.tline.them .tsay { color: var(--ink); }
.tline.me .tsay { color: var(--muted); }

/* ---------------------------------------------------------------- colour on the aisles */
.chip.on { background: var(--blue-text); border-color: var(--blue-text); color: #fff; }
.svcrow.on { background: rgba(0,163,255,.07); box-shadow: inset 2px 0 0 var(--ss-blue); }
.traytotal { color: var(--blue-text); }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 7px; margin-bottom: 7px; }
@media (max-width: 620px) { .grid3 { grid-template-columns: 1fr 1fr; } }
.benwho { font-size: 12px; font-weight: 500; color: var(--ink); }

/* ---------------------------------------------------------------- the breakdown
   The Skylight card grammar. A section per kind of service: a 16px accent bar against a
   tinted body, rounded 20px outside and 12px inside. One row per billed code, the code in
   mono ahead of a plain name, the price right-aligned and tabular, the likelihood beneath
   it in blue when it is above 30% and grey when it is not - a 4% chance should not shout.
   Severity nests as "If billed as". One total at the foot. No prose in here. */
.card.breakdown { padding: 20px; border-radius: 20px; }
.card.breakdown > .lbl { display: block; margin-bottom: 12px; }

/* Two blocks, not eight coloured cards. The heading says which block; the line type is a
   plain subhead inside it. Colour is spent on the one distinction that matters to a patient -
   what you are getting versus what may get added - and nowhere else. */
.bblock { margin-bottom: 18px; }
.bblock:last-of-type { margin-bottom: 0; }
.bblockhead { display: flex; align-items: baseline; justify-content: space-between;
              gap: 10px; margin-bottom: 8px; }
.bblockhead .lbl { display: block; }

.bsubhead { display: flex; align-items: baseline; justify-content: space-between;
            gap: 10px; }
/* a subhead after the first needs air above it, but the first sits flush under the padding */
.bsubhead.later { margin-top: 6px; padding-top: 10px;
                  border-top: 1px solid rgba(15,23,42,.07); }
.bsubtitle {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.bsecbody {
  display: flex; align-items: stretch; background: var(--white);
  border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
}
.bbar { width: 16px; flex: none; }
.bsecinner { flex: 1; min-width: 0; padding: 12px 14px;
             display: flex; flex-direction: column; gap: 10px; }

.brow { display: grid; grid-template-columns: 58px 1fr auto; gap: 10px;
        align-items: baseline; }
.bcode { font-family: var(--mono); font-size: 10px; color: var(--muted);
         letter-spacing: .02em; }
.bmid { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bname { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.bunits { font-family: var(--mono); font-size: 9.5px; color: var(--muted); }
.bright { display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
          white-space: nowrap; }
.bpay { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums;
        color: var(--ink); }
.bpay.free { color: var(--good); font-weight: 400; }
.blik { font-size: 11px; color: rgba(15,23,42,.45); font-variant-numeric: tabular-nums; }
.blik.strong { color: var(--ss-blue); }

/* "If billed as" - the severity rail, indented under the row it belongs to */
.srail { margin: 2px 0 2px 58px; padding-left: 12px;
         border-left: 1px solid rgba(15,23,42,.18);
         display: flex; flex-direction: column; gap: 6px; }
.srailhead { font-size: 11.5px; font-weight: 500; color: var(--ink-2); }
.srow { display: grid; grid-template-columns: 52px 1fr auto auto; gap: 9px;
        align-items: baseline; }
.sname { font-size: 12px; color: var(--text); }
.sdelta { font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sdelta.up { color: var(--warn); }
.sdelta.down { color: var(--good); }
.srow .bpay { font-size: 12.5px; }

.bfoot { display: flex; align-items: baseline; justify-content: flex-end; gap: 14px;
         margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule-2); }
.bfootlbl { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.bfootval { font-size: 22px; font-weight: 600; letter-spacing: -.03em;
            font-variant-numeric: tabular-nums; color: var(--ink); }
/* a code cell may carry two or three codes in the "other ways" section; let it wrap
   rather than force the column wider for every row in the card */
.bblock .brow .bcode { word-break: break-word; }

/* ---------------------------------------------------------------- the live bill
   The read-only breakdown became editable. Swap, add, delete and hand-edit are all one
   operation underneath - change the code list, reprice the whole claim - so the UI only
   has to make each of them one click. */
.phead2 {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding-bottom: 13px; margin-bottom: 14px; border-bottom: 1px solid var(--rule);
}
.pname { font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.pplan { font-size: 12px; color: var(--muted); }
.pded { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--good);
        font-variant-numeric: tabular-nums; }

.billacts { display: inline-flex; gap: 10px; align-items: center; }
.bsectag {
  font-size: 11px; color: var(--ink-2); background: var(--white);
  border: 1px solid var(--rule-2); border-radius: var(--pill); padding: 2px 9px;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}

.bnamerow { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.bbadge {
  font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 5px; border-radius: var(--r-sm);
  border: 1px solid transparent; white-space: nowrap;
}
.b-expected  { background: rgba(0,163,255,.14); color: var(--blue-text);
               border-color: rgba(0,163,255,.30); }
.b-added     { background: #E4F9F2; color: #0F7A5A; border-color: #A7E8D2; }
.b-swapped   { background: #F3E5FB; color: #7A3FA8; border-color: #E0C2F2; }
.bwhy { font-size: 11px; color: var(--blue-text); cursor: help; }

.bdel {
  width: 19px; height: 19px; flex: none; display: grid; place-items: center;
  margin-left: 5px; padding: 0; border: 1px solid var(--rule-2); border-radius: 50%;
  background: var(--white); color: var(--ink-2); font-size: 13px; line-height: 1;
  cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.bdel:hover { background: var(--warn); color: #fff; border-color: var(--warn); }
.bpay.none { color: var(--faint); }
.bfootval.none { color: var(--faint); }

.brow.addable { grid-template-columns: 22px 58px 1fr auto; }
.badd {
  width: 19px; height: 19px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--blue-edge); border-radius: 50%; background: var(--white);
  color: var(--blue-text); font-size: 13px; line-height: 1; cursor: pointer; padding: 0;
  transition: background .12s ease, color .12s ease;
}
.badd:hover { background: var(--blue-text); color: #fff; border-color: var(--blue-text); }

.swapbtn {
  font: inherit; font-size: 10.5px; font-weight: 600; padding: 2px 9px;
  border: 1px solid var(--rule-2); border-radius: var(--pill);
  background: var(--white); color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.swapbtn:hover { border-color: var(--blue-edge); color: var(--blue-text);
                 background: var(--blue-wash); }
/* code, plain name, the swap control, then the price - so the figure lands in the same
   column as the line prices above it and the two read as one ledger */
.srow { grid-template-columns: 52px 1fr auto minmax(56px, auto); }
.srow .bright { align-items: flex-end; }
.bpayrow { display: inline-flex; align-items: baseline; gap: 5px; }

.picker { margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--rule-2); }
.picker .lbl { display: block; margin-bottom: 6px; }
.pickhits { display: flex; flex-direction: column; margin-top: 6px; }
.pickhit {
  display: flex; gap: 10px; align-items: baseline; text-align: left; width: 100%;
  font: inherit; font-size: 12.5px; background: none; border: 0;
  border-top: 1px solid var(--rule); padding: 8px 2px; cursor: pointer;
}
.pickhit:hover { background: var(--blue-wash); }

/* the confirmation pill: small, transient, bottom-centre. It exists so an edit feels
   like it landed rather than leaving you checking the total. */
.toast {
  position: fixed; left: 50%; bottom: 54px; transform: translate(-50%, 6px);
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 500;
  padding: 8px 16px; border-radius: var(--pill); box-shadow: var(--lift);
  opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  z-index: 40;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------------- whose practice is this
   Not a pricing control. The fee schedule has no specialty term, so every chip here prices
   a single code identically; what the chip changes is which population the percentages
   describe. Each one carries its own modal outcome so the choice explains itself. */
.specrail { padding-bottom: 16px; }
/* inside the bill it is a band at the top of the card, not a card of its own */
.specrail.inbill { padding: 0 0 15px; margin-bottom: 15px;
                   border-bottom: 1px solid var(--rule); }
.specheadrow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
               margin-bottom: 11px; }
.specwhy { font-size: 12px; color: var(--muted); }
.specchips { display: grid; grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
             gap: 7px; }
.specchip {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  text-align: left; font: inherit; cursor: pointer; padding: 9px 12px;
  border: 1px solid var(--rule-2); border-radius: var(--r-sm); background: var(--white);
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.specchip:hover { border-color: var(--blue-edge); background: var(--blue-wash); }
.specchip.on { border-color: var(--ss-blue); background: var(--blue-wash);
               box-shadow: inset 0 0 0 1px var(--ss-blue); }
.specchip.pooled { border-style: dashed; }
.scname { font-size: 13px; font-weight: 500; color: var(--ink); }
.scmeta { display: flex; align-items: baseline; gap: 6px; }
.scshare { font-size: 11.5px; font-weight: 600; color: var(--blue-text);
           font-variant-numeric: tabular-nums; }
.scblurb { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.specnote { margin-top: 11px; }
.specmore { margin-top: 10px; font-size: 12px; }
.specmore + .specchips { margin-top: 8px; }
/* an explicit display on .specchips outranks the UA's [hidden] rule, so the collapsed
   overflow row stayed visible */
.specchips[hidden] { display: none; }

/* ---------------------------------------------------------------- browse: search + filter
   The category filter had 24 values as pills. They wrapped to four lines, pushed the search
   box below the fold, and gave every category equal weight - the opposite of a filter's job.
   It sits beside the search box now, ordered by how much is in each. */
.searchrow { display: grid; grid-template-columns: 1fr minmax(180px, 240px); gap: 9px;
             align-items: center; }
.searchrow select { margin: 0; }
@media (max-width: 620px) { .searchrow { grid-template-columns: 1fr; } }

/* the qualifier that tells two same-named services apart, and the admission when nothing can */
.svcname { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.svcqual {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--blue-text); background: var(--blue-wash);
  border: 1px solid var(--blue-edge); border-radius: var(--r-sm); padding: 1px 6px;
  white-space: nowrap;
}
.svcamb { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }

/* ---------------------------------------------------------------- entry: one plan question
   Two branches, never both. The member-ID form and the tick-list answer the same question -
   how much of your deductible is left - one by looking it up and one by being told. Showing
   both asks the patient to do work we may not need, and implies we might use both. */
.branch { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.branchbtn {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  text-align: left; font: inherit; cursor: pointer; padding: 12px 14px;
  border: 1px solid var(--rule-2); border-radius: var(--r-sm); background: var(--white);
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.branchbtn:hover { border-color: var(--blue-edge); background: var(--blue-wash); }
.branchbtn.on { border-color: var(--ss-blue); background: var(--blue-wash);
                box-shadow: inset 0 0 0 1px var(--ss-blue); }
.bqt { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.bqd { font-size: 12px; color: var(--muted); line-height: 1.35; }
.branchpane[hidden] { display: none; }
@media (max-width: 620px) { .branch { grid-template-columns: 1fr; } }

/* the tick-list. Every row says what it changes, because a checkbox that changes nothing is
   worse than no checkbox - it implies the estimate accounted for something it ignored. */
.known { display: flex; flex-direction: column; }
.knownrow {
  display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start;
  padding: 10px 2px; border-top: 1px solid var(--rule); cursor: pointer;
}
.knownrow:first-child { border-top: 0; }
.knownrow:hover .knownlabel { color: var(--blue-text); }
.knownrow input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--ss-blue); }
.knowntext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.knownlabel { font-size: 13.5px; font-weight: 500; color: var(--ink); line-height: 1.35; }
.knowneffect { font-size: 12px; color: var(--muted); line-height: 1.4; }
#nooop { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--rule-2); }

/* ---------------------------------------------------------------- screening or diagnostic
   Eleven codes in the whole fee schedule turn on this, and on those it is the largest swing
   there is: $0.00 against $311.81 for the same colonoscopy. Asked on the bill, only when a
   code on it is one of the eleven, with both figures on the buttons - a patient can answer
   "$0 or $311.81" and cannot usefully answer "is this diagnostic?" in the abstract. */
.screenask { padding: 0 0 15px; margin-bottom: 15px; border-bottom: 1px solid var(--rule); }
.screenask.open { padding: 13px 14px; margin: 0 0 15px; border: 1px solid var(--warn-edge);
                  border-radius: var(--r-sm); background: var(--warn-wash); }
.sawhy { font-size: 12.5px; color: var(--text); line-height: 1.5; margin: 5px 0 10px; }
.sabtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 620px) { .sabtns { grid-template-columns: 1fr; } }
.sabtn {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left;
  font: inherit; cursor: pointer; padding: 10px 12px; background: var(--white);
  border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}
.sabtn:hover { border-color: var(--blue-edge); background: var(--blue-wash); }
.sabtn.on { border-color: var(--ss-blue); background: var(--blue-wash);
            box-shadow: inset 0 0 0 1px var(--ss-blue); }
.sabl { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.sabamt { font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--ink);
          font-variant-numeric: tabular-nums; }
.sabnote { font-size: 11.5px; color: var(--muted); line-height: 1.35; }

.covnote { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--rule-2); }
/* the gate on the entry card: the kind of care has to be answered before any route */
.ferr { display: block; font-size: 12px; font-weight: 500; color: var(--warn);
        margin-top: 5px; }
.ferr:empty { display: none; }

/* ---------------------------------------------------------------- the bill on a phone
   At 390px the bill did not reflow: the price column ran off the right edge, so "Price
   responsibility $" showed a dollar sign with the number off-screen, the deductible read
   "$268.85 de", and the Swap buttons were entirely outside the viewport. The one number the
   whole page exists to deliver was unreachable without scrolling sideways. */
@media (max-width: 560px) {
  .card.breakdown { padding: 14px; border-radius: 14px; }
  .bsecinner { padding: 10px; }
  .bbar { width: 8px; }

  /* code above the name, price below it, all left-aligned - a three-column grid cannot fit */
  .brow { grid-template-columns: 1fr; gap: 2px; }
  /* An "addable" row has FOUR children (plus, code, name, price) and pinning three of them to
     grid-column 2 without saying which ROW each goes in put them all in the same cell: the
     price printed on top of the name, and the name wrapped one word per line down ten lines.
     Explicit rows, and the plus spans all of them. */
  .brow.addable { grid-template-columns: 22px 1fr;
                  grid-template-rows: auto auto auto; gap: 2px 10px; }
  .brow.addable > .badd { grid-column: 1; grid-row: 1 / -1; align-self: start; }
  .brow.addable > .bcode { grid-column: 2; grid-row: 1; }
  .brow.addable > .bmid { grid-column: 2; grid-row: 2; }
  .brow.addable > .bright { grid-column: 2; grid-row: 3; }
  .bright { align-items: flex-start; }
  .bpayrow { gap: 8px; }

  /* the swap rail stacks too, and the button goes full width so it is thumb-sized */
  .srow { grid-template-columns: 1fr; gap: 3px; }
  .srow .bright { align-items: flex-start; }
  .swapbtn { width: 100%; padding: 7px 0; margin-top: 3px; }

  .phead2 { gap: 4px; }
  .pded { margin-left: 0; }
  .bfoot { flex-wrap: wrap; gap: 4px; }
  .bfootval { font-size: 26px; }
  .bsechead, .bblockhead { flex-wrap: wrap; gap: 4px; }
  .sabtns { grid-template-columns: 1fr; }
}

/* the page container itself, which was not responsive at all: a 720px shell with 22px of
   padding on a 390px screen puts everything to the right of ~370px off the viewport */
@media (max-width: 560px) {
  .shell { padding: 0 12px 72px; }
  .card { padding: 14px; }
  .grid3 { grid-template-columns: 1fr; }
  .idrow { grid-template-columns: 1fr; gap: 7px; }
  .stage-head .actions { flex-wrap: wrap; }
  .stepper { display: none; }          /* three steps do not fit; the headings say where you are */
  h1 { font-size: 28px; }
  .bignum { font-size: 44px; }
  .govband, .brand { padding-left: 12px; padding-right: 12px; }
  .brand { flex-wrap: wrap; gap: 8px; }
}
/* nothing may push the page wider than the phone, whatever a long code string does */
html, body { max-width: 100%; overflow-x: hidden; }
.covnote.warn { color: var(--warn); border-top-color: var(--warn-edge); }

/* --------------------------------------------------- the three not-a-price answers
   Non-coverage, wrong-setting and no-national-rate used to arrive as a browser alert() with an
   OK button, which threw away the most useful thing on the page. They render under the row
   that was clicked, styled as a note and not an error: none of them is a fault of ours, and
   two of them carry the answer the patient came for. */
.svcanswer { margin: 6px 0 10px; }
.ncalt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding: 10px 12px;
  border: 1px solid var(--rule); background: var(--surface);
}
.ncaltd { font-size: 13px; line-height: 1.35; }
.ncaltp { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* A likelihood resting on very few claims. Same row, quieter, because the honest version of
   "100% of the time" on a sample of twelve is a hedge and it should not look like a headline. */
.blik.thin { opacity: .72; font-style: normal; }

/* Two readings of one sentence. `_alternatives` was computed on every ambiguous conversation
   and rendered nowhere, so a wrist that read as a fracture at $196.57 hid the sprain reading at
   $130.71 that was 45% as likely. Rows, not prose: this is a choice, and it is the patient's. */
.alts .altrow {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  width: 100%; margin-top: 6px; padding: 9px 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--rule); background: var(--surface); font: inherit; color: inherit;
}
.alts .altrow:hover { background: var(--hover); border-color: var(--blue-edge); }
.altname { font-size: 13px; line-height: 1.35; }
.altpay { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* A row Medicare will not pay for where the patient said the care happens. Marked and sorted
   to the bottom rather than hidden: it is still the row they searched for, and the detail page
   has a real answer for it (the doctor's fee in a hospital outpatient department, with the
   facility's separate bill stated). Hiding it means "knee replacement" returns nothing. */
.svcrow.elsewhere { opacity: .68; }
.svcrow.elsewhere:hover { opacity: 1; }
.notheretag { color: var(--warn, #A8500F); }

/* --------------------------------------------------- how the total was worked out
   Always visible. The page used to give one figure and no way to check it, so a patient with an
   unmet deductible saw "you pay $213.78" - the whole of Medicare's rate - with nothing to
   explain why. Four lines of arithmetic make it explicable instead of arbitrary. */
.calc { border-top: 1px solid var(--rule); margin-top: 14px; padding-top: 12px; }
.calclbl {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: 8px;
}
.calcrow {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 13px; line-height: 1.9;
}
.calcrow.top { color: var(--ink); }
.calcrow.pays { color: var(--ink-2); }
.calcrow.you { font-weight: 500; color: var(--ink); }
.calcrow.sub { font-size: 12px; color: var(--ink-2); padding-left: 16px; line-height: 1.7; }
.calcrow.sub .calcname::before { content: "\21B3"; margin-right: 6px; opacity: .5; }
.calcval { font-variant-numeric: tabular-nums; white-space: nowrap; }
.calcnote { font-size: 11.5px; line-height: 1.55; color: var(--ink-2); margin: 8px 0 0; }

/* A reading of the appointment the patient is not choosing between, only being told about -
   so it is a row, not a button. */
.alts .altrow.static { cursor: default; }
.alts .altrow.static:hover { background: var(--surface); border-color: var(--rule); }

/* The reason a reading has no figure - "included in another charge", "Medicare pays for this
   under a different code". Without it a row that cannot carry a price carries nothing, and the
   generic fallback that used to sit there said "Medicare does not cover it" about a follow-up
   visit that is free by design. */
.alts .altwhy { margin: 4px 0 2px; padding-left: 12px; }

/* The patient's own words, quoted back under the price instead of a diagnosis. Quieter than
   the appointment name above it: it is corroboration, not the headline. */
.yousaid {
  font-size: var(--fs-b3, 13px);
  color: var(--ink-3, #6b7280);
  margin: 2px 0 0;
  font-style: italic;
}
/* Why a consultation is being priced when the patient asked about a procedure. Sits directly
   under the number it explains, because the gap it closes is between the ask and that number. */
.consultwhy { margin-top: 10px; }
.consultwhy strong { font-weight: 600; }

/* An add-on rides with the line above it rather than standing next to it, so it uses the
   same rail as "If billed as" with the additions list's plus control. */
.addonrail .srailhead { color: var(--ink-3, #6b7280); }
.addonrail .badd { margin-right: 6px; }

/* "See my estimate" - the patient's own step out of the conversation, in place of a timer
   that moved the page on before the last reply could be read. */
.seeest { margin: 14px 0 4px; display: flex; justify-content: flex-start; }

/* One gutter for both controls, reserved on every row so entering edit mode reveals the minus
   instead of shifting every line sideways. Width matches the plus that was already there. */
.bgutter {
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

/* medicare.gov's own coverage rule, under the line whose price it qualifies. Quiet, because
   it is a condition on the number rather than the number. */
.covrule {
  display: block;
  font-size: var(--fs-b3, 12px);
  color: var(--ink-3, #6b7280);
  margin-top: 3px;
  line-height: 1.45;
}

/* The procedure the patient named, answered before anything else. */
.namedsvc .nsrow { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; }
.namedsvc .nsname { flex: 1 1 auto; font-weight: 500; }
.namedsvc .nspay { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 20px; }

/* We overruled the aisle the patient picked. Marked as a correction rather than a warning -
   nothing is wrong, we simply moved the question to the practice that answers it - so it
   borrows the estimate card's shape and only the left rule carries the signal. */
.switchnote { border-left: 3px solid var(--blue, #1a73e8); }
.switchnote p { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); }

/* The bill's loading state. Sized like the bill it stands in for, so the layout does not jump
   when the real content lands - a skeleton that is the wrong height just moves the problem. */
.skel { opacity: 0.9; }
.skelrow, .skelfoot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 11px 0;
  border-bottom: 1px solid var(--rule-2, #eceff1);
}
.skelfoot { border-bottom: 0; border-top: 1px solid var(--rule-1, #d9dee1); margin-top: 6px; }
.skelbar {
  height: 12px; border-radius: 3px;
  background: linear-gradient(90deg, #eef1f3 0%, #e2e7ea 50%, #eef1f3 100%);
  background-size: 200% 100%;
  animation: skelshine 1.15s ease-in-out infinite;
}
.skelfoot .skelbar { height: 16px; }
@keyframes skelshine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* Respect a reader who has asked for less motion: the bars still stand in for the content,
   they just do not shimmer. */
@media (prefers-reduced-motion: reduce) {
  .skelbar { animation: none; }
}