/* Calculators, clinical scales and emergency forms (views/calcdialog.js). */

/* section buttons on the card */
.calc-secs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.calc-sec { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; min-height: 58px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--surface); font: 800 .98rem/1.2 var(--font); color: var(--ink); text-align: left; cursor: pointer; }
.calc-sec:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 40%, var(--surface)); }
.calc-sec svg { width: 24px; height: 24px; color: var(--primary); }
.calc-sec small { min-width: 24px; padding: 2px 7px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-weight: 800; text-align: center; }
.calc-sec.sec-emergency { border-color: color-mix(in srgb, var(--crit-fill) 45%, var(--line)); }
.calc-sec.sec-emergency svg { color: var(--crit); }

/* tool list of a section */
.calc-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.calc-tool { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.calc-tool:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary-soft) 40%, var(--surface)); }
.calc-tool b { font-size: .98rem; }
.calc-tool small { color: var(--muted); line-height: 1.3; }

/* tool window */
.calc-win { display: grid; gap: 12px; }
.calc-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 12px; align-items: start; }
.cf { display: grid; gap: 5px; min-width: 0; }
.cf[hidden] { display: none; }
.cf-choice, .cf-text, .cf-chips { grid-column: 1 / -1; }
.cf-label { font-size: .82rem; font-weight: 700; color: var(--muted); }
.cf-auto { margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: .7rem; font-weight: 800; }
.cf-in { display: flex; align-items: center; gap: 6px; }
.cf-in input, .cf input[type="date"] { width: 100%; min-height: 46px; font: 700 1.15rem var(--font); }
.cf-in small { color: var(--muted); font-weight: 700; white-space: nowrap; }
.cf-text textarea, .cf-text input { width: 100%; font: inherit; }
.cf-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-opts.long { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.cf-opt, .cf-chip { min-height: 44px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); font: 700 .9rem/1.25 var(--font); color: var(--ink); text-align: left; cursor: pointer; }
.cf-opt:hover, .cf-chip:hover { border-color: var(--primary); }
.cf-opt[aria-pressed="true"], .cf-chip[aria-pressed="true"] { background: var(--grad-action); border-color: transparent; color: #fff; }
.cf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-chips .cf-chip[hidden] { display: none; }
.cf-wait { margin: 0; padding: 14px; border: 1px dashed var(--line-strong); border-radius: 14px; text-align: center; }

/* live result (stays visible at the bottom of the window) */
.calc-live { position: sticky; bottom: -1px; z-index: 1; padding-top: 6px; background: var(--surface); }
.calc-res { display: grid; gap: 6px; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); }
.calc-res.s-ok { background: color-mix(in srgb, var(--ok-bg) 75%, var(--surface)); box-shadow: inset 5px 0 0 var(--ok-fill); }
.calc-res.s-warn { background: var(--warn-bg); box-shadow: inset 5px 0 0 var(--warn-fill); }
.calc-res.s-crit { background: var(--crit-bg); box-shadow: inset 5px 0 0 var(--crit-fill); }
.calc-res-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.calc-val { font: 800 2.3rem/1 var(--font); letter-spacing: -.02em; }
.calc-res.s-ok .calc-val { color: var(--ok); } .calc-res.s-warn .calc-val { color: var(--warn); } .calc-res.s-crit .calc-val { color: var(--crit); }
.calc-unit { color: var(--muted); font-weight: 700; }
.calc-badge { margin-left: auto; padding: 4px 12px; border-radius: 999px; font-size: .82rem; font-weight: 800; background: var(--line); }
.calc-res.s-ok .calc-badge { background: var(--ok); color: #fff; }
.calc-res.s-warn .calc-badge { background: var(--warn-fill); color: #3A2A00; }
.calc-res.s-crit .calc-badge { background: var(--crit-fill); color: #fff; }
.calc-adv { margin: 0; font-weight: 600; }
.calc-det { margin: 0; padding-left: 18px; display: grid; gap: 2px; font-size: .88rem; color: var(--muted); max-height: 9.5em; overflow: auto; }

/* timeline (CPR, newborn) */
.tl { display: grid; gap: 10px; }
.tl-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tl-clock { font: 800 3.2rem/1 var(--font); font-variant-numeric: tabular-nums; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tl-ctl { display: flex; gap: 8px; align-items: center; }
.tl-sub { display: flex; flex-wrap: wrap; gap: 8px; min-height: 1.5em; }
.tl-sub span { padding: 5px 12px; border-radius: 999px; background: var(--surface-2); font-weight: 800; font-variant-numeric: tabular-nums; }
.tl-sub .tl-alert { background: var(--crit-fill); color: #fff; animation: tl-blink 1s steps(2) infinite; }
@keyframes tl-blink { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .tl-sub .tl-alert { animation: none; } }
.tl-evs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.tl-ev { min-height: 56px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); font: 800 .95rem/1.2 var(--font); color: var(--ink); cursor: pointer; touch-action: manipulation; }
.tl-ev:active { transform: scale(.98); }
.tl-ev.tl-crit { border-color: var(--crit-fill); color: var(--crit); }
.tl-ev.tl-warn { border-color: var(--warn-fill); }
.tl-ev.tl-ok { border-color: var(--ok-fill); color: var(--ok); }
.tl-logbox { display: grid; gap: 6px; }
.tl-log { margin: 0; padding: 8px 12px; list-style: none; display: grid; gap: 3px; max-height: 10em; overflow: auto; border: 1px solid var(--line); border-radius: 12px; font-size: .9rem; }
.tl-log b { font-variant-numeric: tabular-nums; }
.tl-log .tl-crit { color: var(--crit); } .tl-log .tl-ok { color: var(--ok); }

/* injury body map */
.bm { display: grid; gap: 8px; }
.bm-svg { width: min(100%, 520px); justify-self: center; }
.bm-part { fill: color-mix(in srgb, var(--primary-soft) 70%, var(--surface)); stroke: var(--line-strong); stroke-width: 1; cursor: pointer; }
.bm-part:hover, .bm-part:focus { fill: var(--primary-soft); stroke: var(--primary); outline: none; }
.bm-part.sel { fill: color-mix(in srgb, var(--primary) 30%, var(--surface)); stroke: var(--primary); stroke-width: 2; }
.bm-cap { font: 700 10px var(--font); fill: var(--muted); }
.bm-pick { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--primary); border-radius: 14px; background: color-mix(in srgb, var(--primary-soft) 35%, var(--surface)); }
.bm-pick .cf-opt { display: inline-flex; align-items: center; gap: 6px; }
.bm-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; }
.bm-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.bm-list li { display: flex; align-items: center; gap: 8px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 10px; }
.bm-list li .btn { margin-left: auto; }

/* saved results: one row each, opens for detail */
.res-list { display: grid; gap: 6px; }
.res-row { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.res-row.s-ok { box-shadow: inset 4px 0 0 var(--ok-fill); }
.res-row.s-warn { box-shadow: inset 4px 0 0 var(--warn-fill); background: color-mix(in srgb, var(--warn-bg) 55%, var(--surface)); }
.res-row.s-crit { box-shadow: inset 4px 0 0 var(--crit-fill); background: color-mix(in srgb, var(--crit-bg) 60%, var(--surface)); }
.res-row summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 10px; padding: 9px 12px 9px 14px; cursor: pointer; list-style: none; }
.res-row summary::-webkit-details-marker { display: none; }
.res-title { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-val { font: 800 1.15rem var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.res-val small { font-size: .75rem; color: var(--muted); font-weight: 700; }
.res-badge { padding: 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 800; background: var(--line); white-space: nowrap; }
.res-row.s-ok .res-badge { background: var(--ok); color: #fff; }
.res-row.s-warn .res-badge { background: var(--warn-fill); color: #3A2A00; }
.res-row.s-crit .res-badge { background: var(--crit-fill); color: #fff; }
.res-at { grid-column: 1 / -1; font-size: .75rem; color: var(--muted); }
.res-body { padding: 0 14px 12px; display: grid; gap: 6px; }
.res-body p { margin: 0; }

/* triage / early-warning banner */
.calc-banner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 14px; padding: 12px 18px; border-radius: 16px; color: #fff; background: var(--ok-fill); }
.calc-banner.s-warn { background: var(--warn-fill); color: #2E2100; }
.calc-banner.s-crit { background: var(--crit-fill); }
.calc-banner.tri-orange { background: #E8590C; color: #fff; }
.calc-banner .cb-title { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .9; }
.calc-banner .cb-label { font: 800 1.35rem/1.15 var(--font); }
.calc-banner .cb-val { font: 800 1.2rem var(--font); }
.calc-banner .cb-at { grid-column: 1 / -1; font-size: .78rem; opacity: .85; }
.calc-banner p { grid-column: 1 / -1; margin: 0; font-weight: 600; }
.calc-banner-slot:empty { display: none; }

@media (max-width: 640px) {
  .calc-form { grid-template-columns: 1fr 1fr; }
  .res-row summary { grid-template-columns: minmax(0, 1fr) auto; }
  .res-badge { grid-column: 1 / -1; justify-self: start; }
}

/* printout */
.p-calc { margin: 0 0 2pt; font-size: 8.5pt; }

/* growth chart */
.gc { margin: 4px 0 0; display: grid; gap: 2px; }
.gc-svg { width: min(100%, 420px); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.gc-ok { fill: color-mix(in srgb, var(--ok-fill) 16%, transparent); }
.gc-warn { fill: color-mix(in srgb, var(--warn-fill) 22%, transparent); }
.gc-line { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.gc-line.mid { stroke: var(--ok-fill); stroke-width: 1.6; }
.gc-ax { font: 700 9px var(--font); fill: var(--muted); }
.gc-pt { fill: var(--primary); stroke: #fff; stroke-width: 2; }
.gc figcaption { font-size: .75rem; color: var(--muted); }