/* ==========================================================================
   PediaSuite — calculator design system (v2)
   Loaded alongside site.css on every /calculators/* page. Divergence from
   the marketing pages: numerals move to the mono face and become the page's
   display type, and every calculator states one number as the answer before
   it shows the supporting table. Prefixed cx- throughout so it never
   collides with the legacy .calc-card system still used on unmigrated pages.
   ========================================================================== */
:root{
  --stage:#E6EBEA;
  --stage-line:rgba(14,26,43,.14);
  --ok:#187066;
  --ok-wash:rgba(24,112,102,.10);
  --caution:#96570F;
  --caution-wash:rgba(150,87,15,.09);
  --bad:#B42318;
  --bad-wash:rgba(180,35,24,.08);
  --rx:#C97A2C;
}
:root[data-theme="dark"]{
  --stage:#08101A; --stage-line:rgba(237,241,244,.12);
  --ok:#4DBAAF; --ok-wash:rgba(77,186,175,.12);
  --caution:#E8A75C; --caution-wash:rgba(232,167,92,.10);
  --bad:#F0776A; --bad-wash:rgba(240,119,106,.12);
  --rx:#E8A75C;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --stage:#08101A; --stage-line:rgba(237,241,244,.12);
    --ok:#4DBAAF; --ok-wash:rgba(77,186,175,.12);
    --caution:#E8A75C; --caution-wash:rgba(232,167,92,.10);
    --bad:#F0776A; --bad-wash:rgba(240,119,106,.12);
    --rx:#E8A75C;
  }
}

.cx-main{ max-width:940px; }
.cx-main.cx-narrow{ max-width:640px; }

.cx-micro{
  font-family:var(--sans); font-size:.68rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint);
  margin:0;
}

.cx-crumb{ font-family:var(--sans); font-size:.78rem; color:var(--ink-faint); padding:16px 0 0; }
.cx-crumb a{ text-decoration:none; color:var(--ink-faint); }
.cx-crumb a:hover{ color:var(--ok); }
.cx-crumb span{ margin:0 7px; opacity:.6; }

.cx-head{ padding:26px 0 22px; }
.cx-head .cx-micro{ color:var(--ok); margin-bottom:12px; }
.cx-head h1{ font-size:clamp(1.5rem,3.2vw,2.05rem); line-height:1.1; margin-bottom:9px; }
.cx-head p{ font-family:var(--sans); font-size:.9rem; color:var(--ink-soft); max-width:58ch; margin:0; }

/* --- working row: sidebar + main, both shrinkable --- */
.cx-work{ display:grid; grid-template-columns:272px minmax(0,1fr); gap:18px; align-items:start; }
@media (max-width:820px){ .cx-work{ grid-template-columns:minmax(0,1fr); } }
.cx-work.cx-even{ grid-template-columns:1fr 1fr; }
@media (max-width:760px){ .cx-work.cx-even{ grid-template-columns:minmax(0,1fr); } }

.cx-panel{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px; min-width:0;
}
.cx-panel + .cx-panel{ margin-top:14px; }
.cx-stack > .cx-panel + .cx-panel{ margin-top:14px; }

/* --- number input + unit segment --- */
.cx-field{ display:flex; align-items:center; gap:10px; margin:14px 0 16px; flex-wrap:wrap; }
.cx-field:last-child{ margin-bottom:0; }
.cx-num-input{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:1.5rem; font-weight:600; letter-spacing:-.02em;
  width:112px; padding:8px 10px; color:var(--ink);
  background:var(--paper); border:1.5px solid var(--line-strong); border-radius:7px;
  transition:border-color .15s;
}
.cx-num-input:focus-visible{ border-color:var(--ok); outline:2px solid var(--teal); outline-offset:2px; }
.cx-num-input.cx-sm{ font-size:1.1rem; width:88px; padding:7px 9px; }
.cx-unit{ font-family:var(--sans); font-size:.86rem; color:var(--ink-soft); }

.cx-seg{ display:flex; border:1.5px solid var(--line); border-radius:7px; overflow:hidden; flex:none; }
.cx-seg button{
  font-family:var(--sans); font-size:.78rem; font-weight:600;
  padding:9px 13px; border:none; background:none; color:var(--ink-soft); cursor:pointer;
  transition:background .12s, color .12s;
}
.cx-seg button[aria-pressed="true"]{ background:var(--ink); color:var(--paper); }

/* --- value ladder: quick-pick chips for a real-world range --- */
.cx-ladder{ display:flex; flex-wrap:wrap; gap:6px; }
.cx-ladder button{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:.82rem; font-weight:600; padding:6px 9px;
  color:var(--ink-soft); background:transparent;
  border:1px solid var(--line); border-radius:5px; cursor:pointer;
  transition:border-color .12s, color .12s, background .12s;
}
.cx-ladder button:hover{ border-color:var(--ok); color:var(--ok); }
.cx-ladder button[aria-pressed="true"]{ background:var(--ok-wash); border-color:var(--ok); color:var(--ok); }

/* --- inline warning/status note under a field --- */
.cx-note{ font-family:var(--sans); font-size:.78rem; line-height:1.45; color:var(--caution); margin:-6px 0 16px; }
.cx-note:empty{ display:none; }

/* --- option row: route/mode/drug picker, self-describing --- */
.cx-options{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.cx-options button{
  flex:1 1 0; min-width:120px; text-align:left; cursor:pointer;
  padding:11px 13px; border-radius:7px;
  background:transparent; border:1.5px solid var(--line);
  transition:border-color .14s, background .14s;
}
.cx-options button:hover{ border-color:var(--line-strong); }
.cx-options button[aria-pressed="true"]{ border-color:var(--ok); background:var(--ok-wash); }
.cx-options .o-name{
  display:block; font-family:var(--sans); font-size:.9rem; font-weight:700;
  letter-spacing:.02em; color:var(--ink); margin-bottom:2px;
}
.cx-options .o-note{ display:block; font-family:var(--sans); font-size:.75rem; color:var(--ink-faint); }
.cx-options button[aria-pressed="true"] .o-name{ color:var(--ok); }

/* --- the answer: one big mono number plus side stats --- */
.cx-answer{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; min-width:0; }
.cx-val{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:clamp(2.8rem,7vw,4rem); font-weight:700; letter-spacing:-.02em;
  line-height:1; color:var(--ink);
}
.cx-val.cx-mid{ font-size:clamp(2rem,5vw,2.8rem); }
.cx-val-unit{ font-size:.32em; font-weight:600; letter-spacing:0; color:var(--ink-soft); margin-left:.22em; }
.cx-val .cx-dp{ margin:0 0.06em; display:inline-block; opacity:0.9; }
.cx-answer-side{ padding-bottom:6px; }
.cx-answer-side dl{ margin:0; display:grid; grid-template-columns:auto auto; gap:2px 14px; }
.cx-answer-side dt{ font-family:var(--sans); font-size:.72rem; color:var(--ink-faint); }
.cx-answer-side dd{
  margin:0; font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:.82rem; font-weight:600; color:var(--ink); text-align:right;
}

/* --- status banner: classification result (SGA/AGA/LGA, safe/photo/exchange...) --- */
.cx-status{ border-radius:8px; padding:14px 16px; margin-bottom:16px; border-left:4px solid var(--ink-faint); }
.cx-status.is-ok{ border-color:var(--ok); background:var(--ok-wash); }
.cx-status.is-caution{ border-color:var(--caution); background:var(--caution-wash); }
.cx-status.is-bad{ border-color:var(--bad); background:var(--bad-wash); }
.cx-status-title{ font-family:var(--sans); font-size:.95rem; font-weight:800; margin-bottom:3px; color:var(--ink); }
.cx-status.is-ok .cx-status-title{ color:var(--ok); }
.cx-status.is-caution .cx-status-title{ color:var(--caution); }
.cx-status.is-bad .cx-status-title{ color:var(--bad); }
.cx-status-desc{ font-family:var(--sans); font-size:.82rem; color:var(--ink-soft); line-height:1.5; margin:0; }

/* --- comparison ladder: every option on one shared scale --- */
.cx-cmp-head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding-bottom:10px; border-bottom:1px solid var(--line-strong); }
.cx-cmp-head .cx-scale-note{ font-family:var(--mono); font-size:.72rem; color:var(--ink-faint); }
.cx-cmp-row{
  display:grid; grid-template-columns:130px minmax(0,1fr) 92px; gap:14px; align-items:center;
  padding:11px 0; border-bottom:1px solid var(--line);
}
@media (max-width:640px){
  .cx-cmp-row{ grid-template-columns:116px minmax(0,1fr) 74px; gap:10px; min-height:76px; }
}
.cx-cmp-name{ font-family:var(--sans); font-size:.8rem; color:var(--ink-soft); }
.cx-cmp-name b{ color:var(--ink); font-weight:700; }
.cx-cmp-name em{ font-style:normal; font-size:.72rem; color:var(--ink-faint); display:block; }
.cx-cmp-track{ height:9px; background:var(--stage); border-radius:2px; overflow:hidden; }
.cx-cmp-bar{ height:100%; width:0; background:var(--ok); border-radius:2px; transition:width .3s cubic-bezier(.4,0,.2,1); }
.cx-cmp-bar.is-b{ background:var(--rx); }
.cx-cmp-bar.is-c{ background:var(--caution); }
.cx-cmp-val{
  font-family:var(--mono); font-variant-numeric:tabular-nums;
  font-size:.92rem; font-weight:700; color:var(--ink); text-align:right;
}
.cx-cmp-val small{ display:block; font-size:.72rem; font-weight:400; color:var(--ink-faint); }
.cx-cmp-row.is-current .cx-cmp-name b{ color:var(--ok); }

/* --- classification badge (SGA/AGA/LGA, etc.) --- */
.cx-badge{
  font-family:var(--sans); font-size:.68rem; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase; padding:2px 9px; border-radius:20px;
  background:var(--stage); color:var(--ink-faint);
}
.cx-badge.is-ok{ background:var(--ok-wash); color:var(--ok); }
.cx-badge.is-caution{ background:var(--caution-wash); color:var(--caution); }
.cx-badge.is-bad{ background:var(--bad-wash); color:var(--bad); }

/* --- three-stat row (value / percentile / z-score, etc.) --- */
.cx-stats3{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; }
.cx-stat{ text-align:center; }
.cx-stat .l{ font-family:var(--sans); font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); display:block; margin-bottom:2px; }
.cx-stat .v{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:1.02rem; font-weight:700; color:var(--ink); }

/* --- percentile bar (P3/P10/P50/P90/P97) --- */
.cx-pct{ margin-top:10px; }
.cx-pct-track{ height:6px; border-radius:4px; background:var(--line); position:relative; overflow:hidden; }
.cx-pct-fill{ height:100%; border-radius:4px; background:var(--ok); transition:width .25s; }
.cx-pct-marks{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:.62rem; color:var(--ink-faint); margin-top:4px; }

/* --- protocol / reference grid --- */
.cx-proto{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 32px; margin:0; }
@media (max-width:640px){ .cx-proto{ grid-template-columns:1fr; } }
.cx-proto div{ padding:12px 0; border-bottom:1px solid var(--line); }
.cx-proto dt{ font-family:var(--sans); font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:4px; }
.cx-proto dd{ margin:0; font-family:var(--sans); font-size:.86rem; color:var(--ink); line-height:1.5; }

/* --- simple key/value rows --- */
.cx-kv{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--line); font-family:var(--sans); font-size:.84rem; }
.cx-kv:last-child{ border-bottom:none; }
.cx-kv .k{ color:var(--ink-soft); }
.cx-kv .v{ font-weight:600; color:var(--ink); text-align:right; }

/* --- reference table --- */
.cx-table{ width:100%; border-collapse:collapse; font-family:var(--sans); font-size:.82rem; }
.cx-table th{ font-weight:700; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); padding:6px 8px; border-bottom:1px solid var(--line-strong); text-align:left; }
.cx-table th:not(:first-child){ text-align:right; }
.cx-table td{ padding:8px 8px; border-bottom:1px solid var(--line); color:var(--ink-soft); }
.cx-table td:not(:first-child){ text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono); }
.cx-table tr:last-child td{ border-bottom:none; }
.cx-table tr.is-current td{ color:var(--ink); background:var(--ok-wash); font-weight:600; }

/* --- callouts --- */
.cx-after{
  margin-top:14px; padding:11px 14px;
  background:var(--ok-wash); border-left:2px solid var(--ok); border-radius:0 5px 5px 0;
  font-family:var(--sans); font-size:.83rem; color:var(--ink-soft);
}
.cx-after.is-caution{ background:var(--caution-wash); border-left-color:var(--caution); }
.cx-after.is-bad{ background:var(--bad-wash); border-left-color:var(--bad); }
.cx-after b{ color:var(--ok); font-weight:700; }
.cx-after.is-caution b{ color:var(--caution); }
.cx-after.is-bad b{ color:var(--bad); }

.cx-disclaimer{
  margin:26px 0 40px; padding:14px 16px;
  border:1px solid var(--line); border-radius:var(--radius);
  font-family:var(--sans); font-size:.79rem; line-height:1.55; color:var(--ink-soft);
}
.cx-disclaimer b{ color:var(--caution); }

.cx-flag{
  margin:14px 0 0; padding:9px 13px; border:1px dashed var(--line-strong); border-radius:5px;
  font-family:var(--sans); font-size:.74rem; color:var(--ink-faint);
}

/* --- stage: neutral tray for a signature illustration --- */
.cx-stage{
  margin-top:18px; padding:14px 12px 10px;
  background:var(--stage); border:1px solid var(--stage-line); border-radius:7px;
}
.cx-stage-foot{
  display:flex; justify-content:space-between; gap:12px; padding:8px 4px 0;
  font-family:var(--sans); font-size:.72rem; color:var(--ink-faint);
}
.cx-stage-foot .cx-stage-call{ font-weight:700; color:var(--ink-soft); letter-spacing:.04em; text-transform:uppercase; }