/* IBM Plex, self-hosted (SIL Open Font License 1.1, see /licenses/IBM-Plex-OFL-1.1.txt) */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-sans-latin-400.3b646991d3.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-sans-latin-500.0717336fb3.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-sans-latin-600.8960851d69.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/ibm-plex-sans-latin-700.42e7b0c143.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/ibm-plex-mono-latin-400.08949f728d.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/ibm-plex-mono-latin-500.01d2854474.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/ibm-plex-mono-latin-600.0d1f0b8d07.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

  :root{
    --page:#F1F3F5; --surface:#FFFFFF; --tint:#F7F8F9;
    --ink:#1A2531; --ink-soft:#4B5764; --ink-faint:#85909A;
    --rule:#D9DFE4; --rule-soft:#E7EBEE;
    --act:#16705F;  --act-wash:#E3F1ED;
    --gold:#B5842E; --gold-wash:#F7EFDF;
    --blue:#40598A; --blue-wash:#E6ECF5;
    --conv:#6A3DA6; --conv-wash:#F2ECF9;
    --hold:#5B4D40; --hold-wash:#F5EFE7;
    --stop:#A33B2A; --stop-wash:#F8E7E3;
    --nau:#9A6317;  --nau-wash:#F7ECDA;
    --wt:#40598A;   --wt-wash:#E6ECF5;
    --r:6px;
    --sans:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{background:var(--page);color:var(--ink);font-family:var(--sans);font-size:14px;
    line-height:1.45;-webkit-font-smoothing:antialiased}
  :focus-visible{outline:2px solid var(--act);outline-offset:2px}
  button{font-family:inherit}
  svg{display:block}

  /* ---------- layout ---------- */
  .layout{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:20px;
    max-width:1520px;margin:0 auto;padding:22px 24px 36px;align-items:start}
  .colL{display:flex;flex-direction:column;gap:14px;min-width:0;grid-column:1;grid-row:1}
  .colR{grid-column:2;grid-row:1 / span 2}
  footer.fine{grid-column:1;grid-row:2;margin-top:-6px}
  .colL form{display:flex;flex-direction:column;gap:14px;margin:0}
  .colR{background:var(--surface);border:1px solid var(--rule);border-radius:10px;
    padding:14px;display:flex;flex-direction:column;gap:12px;min-width:0}
  @media (max-width:1100px){
    .layout{grid-template-columns:1fr}
    .colL,.colR,footer.fine{grid-column:1;grid-row:auto}
  }

  /* ---------- page header ---------- */
  .pagehead{display:flex;align-items:flex-start;gap:14px;padding:2px 2px 4px}
  .pagehead .logo{margin-top:3px}
  .logo{width:34px;height:34px;flex:none}
  .pagehead h1{margin:0;font-size:25px;font-weight:700;letter-spacing:-0.015em;line-height:1.15}
  .pagehead p{margin:3px 0 0;font-size:13.5px;color:var(--ink-soft)}
  .btnreset{margin-left:auto;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;
    background:var(--stop);color:#fff;border:1px solid var(--stop);border-radius:var(--r);
    font-size:14.5px;font-weight:600;letter-spacing:.01em;cursor:pointer;flex:none;
    box-shadow:0 1px 3px rgba(163,59,42,.3)}
  .btnreset svg{width:17px;height:17px}
  .btnreset:hover{background:#8A2F21;border-color:#8A2F21}
  .btnreset:active{background:#76281C}
  .btnreset:focus-visible{outline:2px solid var(--stop);outline-offset:3px}

  /* ---------- input cards ---------- */
  .card{background:var(--surface);border:1px solid var(--rule);border-radius:8px}
  .chead{display:flex;align-items:center;gap:13px;padding:13px 18px;border-bottom:1px solid var(--rule-soft)}
  .ctile{width:40px;height:40px;border-radius:var(--r);display:grid;place-items:center;color:#fff;flex:none}
  .ctile svg{width:21px;height:21px}
  .ctile.teal{background:var(--act)} .ctile.gold{background:var(--gold)} .ctile.blue{background:var(--blue)}
  .chead h2{margin:0;font-size:17px;font-weight:600;line-height:1.25}
  .chead p{margin:1px 0 0;font-size:13px;color:var(--ink-soft)}
  .creq{margin-left:auto;align-self:flex-start;padding-top:3px;font-size:12px;color:var(--ink-faint);text-align:right}
  .cbody{padding:15px 18px 17px}

  .grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 22px}
  .grid2.divided > :nth-child(2){border-left:1px solid var(--rule-soft);padding-left:22px}
  .gridsup{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:15px 0}
  .gridsup > :last-child{border-left:1px solid var(--rule-soft);padding-left:22px;margin-left:22px}
  @media (max-width:680px){
    .grid2,.gridsup{grid-template-columns:1fr}
    .grid2.divided > :nth-child(2),.gridsup > :last-child{border-left:0;padding-left:0;margin-left:0}
    .creq{display:none}
  }

  .field{min-width:0}
  .lbl{display:flex;align-items:center;flex-wrap:wrap;gap:0 7px;margin:0 0 6px;font-size:13.5px;font-weight:600;color:var(--ink)}
  .hint{margin:5px 0 0;font-size:12px;line-height:1.4;color:var(--ink-faint)}
  .hint.row{display:flex;justify-content:space-between;gap:12px}
  .lblrate{justify-content:space-between}
  .rate{font-size:12px;font-weight:400;color:var(--ink-faint)}
  .rate b{font-family:var(--mono);font-weight:500;color:var(--wt)}

  select,input[type=number]{width:100%;height:38px;padding:0 12px;border:1px solid var(--rule);
    border-radius:var(--r);background:var(--surface);color:var(--ink);font-family:var(--sans);font-size:14.5px}
  select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5764' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 11px center;background-size:15px}
  select:disabled{background-color:var(--tint);color:var(--ink-faint);cursor:not-allowed}
  input::placeholder{color:var(--ink-faint)}
  input[type=number]{-moz-appearance:textfield}
  input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
  .narrow{max-width:calc(50% - 11px)}
  @media (max-width:680px){ .narrow{max-width:none} }

  .chip{display:inline-block;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
    padding:2px 7px;border-radius:3px;line-height:1.4}
  .chip.ref{color:var(--hold);background:var(--hold-wash);border:1px solid #D9CBB8}
  .chip.rx{color:var(--conv);background:var(--conv-wash);border:1px solid #D6C4EC}

  .help{position:relative;display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;
    border:1.3px solid var(--ink-faint);color:var(--ink-faint);font-size:9.5px;font-weight:700;cursor:help;line-height:1}
  .help:hover::after,.help:focus::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 8px);
    transform:translateX(-50%);width:max-content;max-width:250px;padding:7px 10px;border-radius:5px;z-index:30;
    background:var(--ink);color:#fff;font-size:12px;font-weight:400;line-height:1.45;white-space:normal;text-align:left}

  /* input with a unit inside */
  .inunit{position:relative;display:flex;align-items:stretch;min-width:0}
  .inunit input{padding-right:40px}
  .inunit .u{position:absolute;right:11px;top:0;bottom:0;display:flex;align-items:center;
    font-size:14px;color:var(--ink-faint);pointer-events:none}
  .inunit.boxed input{border-top-right-radius:0;border-bottom-right-radius:0;padding-right:12px}
  .inunit.boxed .u{position:static;padding:0 14px;background:var(--tint);border:1px solid var(--rule);
    border-left:0;border-radius:0 var(--r) var(--r) 0;color:var(--ink-soft)}

  /* strength: [ mg ] per [1 mL] [0.5 mL] */
  .strength{display:flex;align-items:center;gap:10px}
  .strength .inunit{flex:1 1 120px;max-width:170px}
  .strength .per{font-size:13.5px;color:var(--ink-soft);flex:none}
  .pair{display:flex;gap:8px;flex:none}
  .pair button{height:38px;min-width:58px;padding:0 12px;border:1px solid var(--rule);border-radius:var(--r);
    background:var(--surface);color:var(--ink);font-size:14px;cursor:pointer}
  .pair button[aria-pressed="true"]{color:#fff}
  .pair.cur button[aria-pressed="true"]{background:var(--hold);border-color:var(--hold)}
  .pair.rx  button[aria-pressed="true"]{background:var(--conv);border-color:var(--conv)}

  /* connected segmented controls */
  .seg{display:flex;border:1px solid var(--rule);border-radius:var(--r);overflow:hidden;background:var(--surface)}
  .seg button{flex:1 1 0;min-width:0;height:36px;padding:0 2px;border:0;border-right:1px solid var(--rule);
    background:transparent;color:var(--ink-soft);font-size:13.5px;cursor:pointer}
  .seg button:last-child{border-right:0}
  .seg button:hover{background:var(--tint)}
  .seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
  .scorerow button{height:38px;font-family:var(--mono);font-size:13px}
  .scorerow.effects button[aria-pressed="true"]{background:var(--act)}
  .scorerow.nausea  button[aria-pressed="true"]{background:var(--nau)}
  .scorehint{min-height:17px}
  .seg.wk{flex:1 1 auto}
  .seg.wk button{font-size:13px;padding:0 6px}
  .seg.wk button[aria-pressed="true"]{background:var(--blue)}
  .seg.big button{height:44px;font-size:15px;color:var(--ink)}
  .seg.big button[aria-pressed="true"]{color:#fff}

  .seg.wdir{margin-bottom:8px}
  .seg.wdir button[aria-pressed="true"]{background:var(--blue)}
  input:disabled{background:var(--tint);color:var(--ink-faint);cursor:not-allowed}
  .wtrow{display:flex;gap:10px;align-items:stretch}
  .wtrow .inunit{flex:0 1 150px;min-width:70px}
  .newvial{margin-top:14px;border-left:3px solid var(--conv);padding-left:14px}
  .seg.wk button{white-space:nowrap}
  @media (max-width:480px){ .wtrow{flex-wrap:wrap} .wtrow .inunit{flex:1 1 100%} }

  /* ---------- right column ---------- */
  .wtalert{background:var(--stop-wash);border:1px solid #E7BCB2;border-left:5px solid var(--stop);
    border-radius:var(--r);color:var(--stop);padding:11px 14px}
  .wtalert .t{display:block;font-size:14.5px;font-weight:600}
  .wtalert .d{display:block;margin-top:2px;font-family:var(--mono);font-size:12.5px}

  .verdict{border:1px solid var(--rule-soft);border-radius:8px;overflow:hidden;background:var(--surface)}
  .verdict .band{padding:15px 18px 14px;background:var(--hold-wash)}
  .verdict.act  .band{background:var(--act-wash)}
  .verdict.nau  .band{background:var(--nau-wash)}
  .verdict.stop .band{background:var(--stop-wash)}
  .vtop{display:flex;align-items:center;gap:12px}
  .vicon{flex:none;color:var(--hold)} .vicon svg{width:27px;height:27px}
  .verdict.act .vicon{color:var(--act)} .verdict.nau .vicon{color:var(--nau)} .verdict.stop .vicon{color:var(--stop)}
  .verdict.await .vicon{color:#8A6A36}
  .kicker{margin:0;font-size:19px;font-weight:600;line-height:1.25}
  .verdict.stop .kicker{color:var(--stop)} .verdict.nau .kicker{color:var(--nau)}
  .vpill{margin-left:auto;flex:none;font-size:13px;font-weight:600;color:var(--ink-soft)}
  .headline{margin:9px 0 0;font-size:23px;font-weight:600;letter-spacing:-0.01em;line-height:1.2}
  .verdict.await .headline{display:none}
  .subline{margin:8px 0 0;font-size:14px;color:var(--ink-soft)}

  ol.trail{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    border-top:1px solid var(--rule-soft)}
  ol.trail li{padding:11px 16px 13px;border-right:1px solid var(--rule-soft);min-width:0}
  ol.trail li:last-child{border-right:0}
  ol.trail .step{display:block;font-size:12.5px;color:var(--ink-faint);margin-bottom:4px}
  ol.trail .val{display:block;font-size:13.5px;color:var(--ink-soft)}
  ol.trail li.superseded .val{color:var(--ink-faint);text-decoration:line-through}
  ol.trail li.fires .val{color:var(--nau);font-weight:600}
  ol.trail li.final .val{color:var(--ink);font-weight:600}
  ol.trail li.fires-wt .val{color:var(--blue);font-weight:600}
  @media (max-width:560px){ ol.trail{grid-template-columns:repeat(2,minmax(0,1fr))} }

  ul.notes{list-style:none;margin:0;padding:0}
  ul.notes li{display:flex;gap:10px;padding:9px 16px;border-top:1px solid var(--rule-soft);
    font-size:13px;line-height:1.45;color:var(--ink-soft)}
  ul.notes .tag{flex:none;height:fit-content;margin-top:1px;padding:0 6px;border:1px solid currentColor;
    border-radius:3px;font-size:11px;font-weight:600}
  li.n-stop{color:var(--stop)} li.n-nau{color:var(--nau)} li.n-wt{color:var(--wt)}
  li.n-ask{color:var(--stop);background:var(--stop-wash)}

  .rcard{border:1px solid var(--rule-soft);border-radius:8px;background:var(--surface);overflow:hidden}
  .rhead{display:flex;align-items:center;gap:10px;padding:10px 15px;background:var(--tint);
    border-bottom:1px solid var(--rule-soft);font-size:14.5px;font-weight:600}
  .rhead svg{width:19px;height:19px;flex:none}
  .rsub{margin-left:auto;font-size:12.5px;font-weight:400;color:var(--ink-faint);text-align:right}
  .rcard.current{box-shadow:inset 3px 0 0 var(--hold)}
  .rcard.current .rhead svg{color:var(--ink-soft)}
  .rcard.prescribed{box-shadow:inset 3px 0 0 var(--conv)}
  .rcard.prescribed .rhead{background:var(--conv-wash);color:var(--conv)}
  .rcard.prescribed .rsub{font-family:var(--mono);color:var(--conv)}

  .rcells{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
  .rcells > div{padding:9px 10px 11px;border-right:1px solid var(--rule-soft);min-width:0}
  .rcells > div:last-child{border-right:0}
  .rcells .k,.convbox .k{display:block;margin-bottom:3px;font-size:12px;color:var(--ink-faint)}
  .rcells .v{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--ink);overflow-wrap:anywhere}
  @media (max-width:560px){ .rcells{grid-template-columns:repeat(2,minmax(0,1fr))} .rcells > div{border-bottom:1px solid var(--rule-soft)} }

  .convbox{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .convbox > div{padding:9px 15px 11px;border-right:1px solid var(--rule-soft);min-width:0}
  .convbox > div:nth-child(3){border-right:0}
  .convbox .v{font-family:var(--mono);font-size:16px;font-weight:500;color:var(--ink)}
  .convbox div.units .v{color:var(--conv);font-weight:600}
  .convbox div.calcline{grid-column:1/-1;border-right:0;border-top:1px solid var(--rule-soft);padding:8px 15px}
  .convbox div.calcline .v{font-size:12px;font-weight:400;color:var(--ink-faint)}
  .convbox div.calcline.notice{background:var(--nau-wash)}
  .convbox div.calcline.notice .v{color:var(--nau)}
  .convbox div.calcline .flag{display:block;margin-bottom:2px;font-size:13px;font-weight:600;color:var(--nau)}

  .rcard.ladderc .rhead svg{color:var(--act)}
  .ladder{list-style:none;margin:0;padding:11px 12px 12px;display:flex;gap:3px;overflow-x:auto}
  .rung{flex:1 0 36px;min-width:36px;display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:8px 1px 6px;border:1px solid var(--rule-soft);border-radius:4px;background:var(--surface)}
  .rung .val{font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);white-space:nowrap}
  .rung .mark{min-height:12px;margin-top:3px;max-width:100%;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;font-size:9px;color:var(--ink-faint)}
  .rung.current{background:var(--ink);border-color:var(--ink)}
  .rung.current .val{color:#fff;font-weight:600} .rung.current .mark{color:#C9D1D8}
  .rung.target{background:var(--act-wash);border-color:var(--act)}
  .rung.target .val,.rung.target .mark{color:var(--act)} .rung.target .val{font-weight:600}
  .rung.targetnau{background:var(--nau-wash);border-color:var(--nau)}
  .rung.targetnau .val,.rung.targetnau .mark{color:var(--nau)} .rung.targetnau .val{font-weight:600}
  .rung.between{background:#EEF3F2}
  .rung.ghost .val{text-decoration:line-through;color:var(--ink-faint)}
  .rung.empty{flex:1 1 auto;padding:17px;background:var(--tint)}
  .rung.empty .val{font-size:14px;color:var(--ink-soft);letter-spacing:.02em}

  .notecard .notebody{padding:12px 14px 14px}
  .noteout{display:block;width:100%;min-height:175px;padding:12px 13px;border:1px solid var(--rule);border-radius:var(--r);
    background:var(--surface);color:var(--ink);font-family:var(--mono);font-size:12.5px;line-height:1.55;resize:vertical}
  .btnrow{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:12px}
  .btn{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 18px;border-radius:var(--r);
    font-size:14px;font-weight:500;cursor:pointer}
  .btn svg{width:17px;height:17px}
  .btn.primary{background:#17302A;color:#fff;border:1px solid #17302A}
  .btn.primary:hover{background:#0F231E}
  .btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--rule)}
  .btn.ghost:hover{border-color:var(--ink-soft)}
  .copied{font-size:13px;font-weight:500;color:var(--act)}

  footer.fine{padding:4px 4px 0;font-size:12px;line-height:1.55;color:var(--ink-faint)}

  @media print{
    body{background:#fff}
    .layout{grid-template-columns:1fr;padding:0;gap:10px}
    .colR{border:0;padding:0}
    .btnrow,.btnreset,.help{display:none}
    .card,.rcard,.verdict{break-inside:avoid}
  }