/* SITREP — built on Epic/MyChart design tokens.
   Values extracted from live computed styles on mychart.tgh.org 2026-08-12.
   See brand/epic_tokens.css for provenance on every number. */

:root{
  --font:"Source Sans Pro",Calibri,Arial,sans-serif;

  /* Epic's 1.25 modular scale */
  --fs--1:.8rem; --fs-0:1rem; --fs-1:1.25rem; --fs-2:1.5625rem; --fs-3:1.953125rem;

  --epic-blue:#00529C; --epic-blue-hover:#004685; --epic-blue-wash:#E6EEF5;
  --bg:#FCFCFC; --surface:#FFFFFF; --header:#3F5164; --accent-bg:#E5E8EA;
  --text-1:#121217; --text-2:#3E3E52; --text-3:#5E5E75;
  --divider:#E8E8F2; --card-border:#B2B2C6;

  --ok-bg:#DAEFDA;   --ok-border:#2FA254;  --ok-text:#245333;
  --info-bg:#DEE9F8; --info-border:#0F64B9;--info-text:#010509;
  --warn-bg:#FCF0D9; --warn-border:#B8791A;--warn-text:#4A3208;
  --stop-bg:#FBE3E1; --stop-border:#B3261E;--stop-text:#4A1310;

  --r-btn:4px; --r-card:6px;
  --shadow:0 2px 5px 0 rgba(0,0,0,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:var(--fs-0);color:var(--text-2);
  background:var(--bg);line-height:1.4;-webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100dvh}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button,input{font:inherit;color:inherit}
b,strong{font-weight:700}

/* ---------- HEADER: Epic slate ---------- */
.bar{background:var(--header);box-shadow:0 0 9.6px rgba(0,0,0,.2);
  padding-top:env(safe-area-inset-top);position:sticky;top:0;z-index:20}
.bar-in{display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px 16px;max-width:760px;margin:0 auto}
.wordmark{color:#fff;text-decoration:none;font-size:var(--fs-1);font-weight:700;
  letter-spacing:.14em}
.wordmark span{font-weight:400;opacity:.85}
.ver{color:#fff;font-size:var(--fs--1);background:rgba(255,255,255,.14);
  border-radius:999px;padding:4px 11px;white-space:nowrap}
.ver.amber{background:var(--warn-bg);color:var(--warn-text);font-weight:700}
.ver.red{background:var(--stop-bg);color:var(--stop-text);font-weight:700}

main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:16px 16px 32px}

/* ---------- SEARCH ---------- */
.field{position:relative;display:flex;align-items:center}
.mag{position:absolute;left:13px;width:20px;height:20px;fill:none;
  stroke:var(--text-3);stroke-width:2;stroke-linecap:round;pointer-events:none}
#q{width:100%;padding:14px 44px;border:1px solid var(--card-border);
  border-radius:var(--r-btn);background:var(--surface);font-size:1.0625rem;
  color:var(--text-1);outline:none;-webkit-appearance:none}
#q::-webkit-search-cancel-button{display:none}
#q:focus{border-color:var(--epic-blue);box-shadow:0 0 0 3px rgba(0,82,156,.18)}
.clear{position:absolute;right:8px;width:32px;height:32px;border:0;
  background:transparent;cursor:pointer;display:grid;place-items:center}
.clear svg{width:18px;height:18px;fill:none;stroke:var(--text-3);
  stroke-width:2;stroke-linecap:round}
.examples{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.examples button{border:1px solid var(--divider);background:var(--surface);
  color:var(--epic-blue);border-radius:999px;padding:7px 14px;
  font-size:var(--fs--1);cursor:pointer}
.examples button:hover{background:var(--epic-blue-wash)}

.intro{margin-top:28px;color:var(--text-2)}
.intro p{margin-bottom:6px}
.intro .sub{color:var(--text-3);font-size:var(--fs--1)}

/* ---------- CARD: Epic geometry ---------- */
.card{background:var(--surface);border:1px solid var(--card-border);
  border-radius:var(--r-card);box-shadow:var(--shadow);margin-top:16px;
  overflow:hidden}
.card-body{padding:16px}
.badge{display:inline-flex;align-items:center;gap:7px;border-radius:999px;
  padding:5px 12px;font-size:var(--fs--1);font-weight:700;line-height:1.2;
  border:1px solid;margin-bottom:10px}
.badge svg{width:14px;height:14px;flex:0 0 14px;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.b-ok  {background:var(--ok-bg);  border-color:var(--ok-border);  color:var(--ok-text)}
.b-warn{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn-text)}
.b-stop{background:var(--stop-bg);border-color:var(--stop-border);color:var(--stop-text)}
.b-info{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}

.drug{font-size:var(--fs-2);font-weight:700;color:var(--text-1);
  line-height:1.15;margin-bottom:2px;overflow-wrap:anywhere}
.form{font-size:var(--fs--1);color:var(--text-3);margin-bottom:14px}
.lbl{font-size:var(--fs--1);font-weight:700;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.blk{margin-bottom:14px}
.blk p{color:var(--text-2)}
.blk:last-child{margin-bottom:0}

/* Verbatim VA strings render in a tinted panel so they read as quoted, not
   as our words. The U/E column carries real limits as free text. */
.verbatim{background:var(--accent-bg);border-radius:var(--r-btn);
  padding:10px 12px;font-size:var(--fs--1);color:var(--text-2)}

/* Epic's tertiary footer action — square, hairline rule, blue, full width */
.acts{display:flex;flex-direction:column}
.act{background:transparent;border:0;border-top:1px solid var(--divider);
  color:var(--epic-blue);padding:13px 16px;text-align:left;cursor:pointer;
  display:flex;align-items:center;gap:10px;font-size:var(--fs-0);
  text-decoration:none;width:100%}
.act:hover{background:var(--epic-blue-wash)}
.act svg{width:19px;height:19px;flex:0 0 19px;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* multi dosage-form table — the trap-2 case */
.forms{border:1px solid var(--divider);border-radius:var(--r-btn);overflow:hidden}
.frow{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:10px 12px;font-size:var(--fs--1)}
.frow + .frow{border-top:1px solid var(--divider)}
.frow .fn{color:var(--text-1);font-weight:600;overflow-wrap:anywhere}
.frow .fs{font-weight:700;white-space:nowrap;font-size:.75rem;
  text-transform:uppercase;letter-spacing:.04em}
.fs.ok{color:var(--ok-text)} .fs.warn{color:var(--warn-text)}

.prov-line{padding:10px 16px;border-top:1px solid var(--divider);
  font-size:.75rem;color:var(--text-3);display:flex;justify-content:space-between;
  gap:10px;align-items:baseline}
.prov-line b{letter-spacing:.12em;color:var(--text-3)}
.disc{padding:0 16px 14px;font-size:.75rem;color:var(--text-3);line-height:1.35}

.hint{margin-top:20px;color:var(--text-3);font-size:var(--fs--1)}
.sugg{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.sugg button{border:1px solid var(--divider);background:var(--surface);
  color:var(--epic-blue);border-radius:999px;padding:7px 14px;
  font-size:var(--fs--1);cursor:pointer}

.foot{border-top:1px solid var(--divider);padding:16px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
  max-width:760px;margin:0 auto;width:100%;font-size:.75rem;
  color:var(--text-3);line-height:1.45}
.foot p{margin-bottom:4px}
.prov{color:var(--text-3);opacity:.85}

@media (min-width:600px){ main{padding:24px 16px 40px} }

/* Brand names — what the prescriber actually recognises */
.aka{font-size:var(--fs--1);color:var(--text-2);margin:-8px 0 14px;line-height:1.45}
.aka-l{font-weight:700;color:var(--text-3);text-transform:uppercase;
  letter-spacing:.06em;font-size:.72rem;display:block;margin-bottom:2px}