/* The dose calculator's own controls: syringe diagram, sliders, readouts.
   Shared by calculator.html and the per-compound calculator pages.
   Everything shared with the rest of the site comes from site.css. */

.hero__thesis{ grid-column:1; grid-row:1; display:flex; flex-direction:column; gap:22px; padding-top:8px; }
@media (max-width:1020px){
  /* Single column: the headline and the explanation lead. The old rule pushed
     them below the whole calculator with order:1, so a phone landed on the
     arithmetic panel with nothing saying what the page was. */
  .hero__thesis{ grid-column:1; grid-row:auto; order:0; }
  .work{ order:1; }
}
.hero__sub{ display:flex; flex-direction:column; gap:20px; }

.work{ display:flex; flex-direction:column; gap:14px; padding-top:24px; border-top:1px solid var(--line); margin-top:4px; }
.work__steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; counter-reset:s; }
.work__steps li{
    display:grid; grid-template-columns:20px 1fr; gap:12px; align-items:baseline;
    font-family:var(--mono); font-size:.8125rem; line-height:1.5; font-variant-numeric:tabular-nums;
    color:var(--ink-muted);
  }
.work__steps li::before{
    counter-increment:s; content:counter(s); color:var(--ink-muted); font-size:.6875rem;
  }
.work__steps b{ color:var(--ink); font-weight:500; }
.work__steps em{ color:var(--ink); font-style:normal; }

.compounds{ display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; scrollbar-width:thin; }
.cbtn{
    font-family:var(--mono); font-size:.875rem; letter-spacing:.02em;
    background:transparent; border:1px solid var(--line-ctrl); color:var(--ink-muted);
    padding:0 14px; min-height:44px; cursor:pointer; white-space:nowrap; border-radius:0;
    display:inline-flex; align-items:center; justify-content:center;
    transition:transform 100ms ease-out, background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
  }
.cbtn:hover{ color:var(--ink); border-color:var(--ink); }
.cbtn:active{ transform:scale(.97); }
.cbtn[aria-pressed="true"]{ background:var(--ink); color:var(--ground); border-color:var(--ink); }

.readout{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line); }
.readout > div{ padding:13px 14px 12px; border-right:1px solid var(--line); }
.readout > div:last-child{ border-right:0; }
.readout__v{ font-family:var(--mono); font-size:1.5rem; line-height:1.12; letter-spacing:-.02em; font-variant-numeric:tabular-nums; display:block; margin-top:5px; }
.readout__v small{ font-size:.8125rem; color:var(--ink-muted); letter-spacing:0; }
@media (max-width:520px){
  .readout{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .readout > div:nth-child(2){ border-right:0; }
  .readout > div:nth-child(3){ grid-column:1/-1; border-top:1px solid var(--line); }
}

.syringe{ display:block; width:100%; height:auto; }
.sy-barrel{ fill:var(--raise); stroke:var(--line-strong); stroke-width:1; }
.sy-fill{ fill:var(--accent-wash); stroke:var(--ink); stroke-width:1; }
.sy-tick{ stroke:var(--line-strong); stroke-width:1; }
.sy-tick--major{ stroke:var(--ink-muted); }
.sy-txt{ font-family:var(--mono); font-size:9px; fill:var(--ink-muted); }
.sy-metal{ fill:var(--ink-muted); }
.sy-plunger{ fill:var(--ink); }
.sy-cap{ fill:var(--ink-muted); }

.ctrl{ display:flex; flex-direction:column; gap:9px; }
/* the display rule above outguns the hidden attribute's UA style, so the
   mode toggle needs this or it toggles nothing */
.ctrl[hidden]{ display:none; }
.ctrl__top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.ctrl__val{ font-family:var(--mono); font-size:.9375rem; font-variant-numeric:tabular-nums; }
.track{
    position:relative; height:44px; cursor:grab; touch-action:none;
    display:flex; align-items:center;
  }
.track:active{ cursor:grabbing; }
.track__rail{ position:absolute; inset-inline:0; height:2px; background:var(--line-strong); }
.track__fill{ position:absolute; left:0; height:2px; background:var(--ink); }
.track__thumb{
    position:absolute; top:50%; width:20px; height:20px; margin-left:-10px; margin-top:-10px;
    background:var(--ink); border:0; padding:0; cursor:inherit;
    border-radius:50%; box-shadow:0 0 0 4px var(--surface);
    transition:transform 110ms ease-out;
  }
.track__thumb:active,.track.is-drag .track__thumb{ transform:scale(1.18); }
.track__ticks{ position:absolute; inset-inline:0; top:30px; height:5px; }
.track__ticks i{ position:absolute; top:0; width:1px; height:4px; background:var(--line-strong); }

.segs{ display:flex; gap:6px; flex-wrap:wrap; }
.seg{
    font-family:var(--mono); font-size:.8125rem; font-variant-numeric:tabular-nums;
    background:transparent; border:1px solid var(--line-ctrl); color:var(--ink-muted);
    padding:0 14px; min-width:44px; min-height:44px; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center;
    transition:transform 100ms ease-out, background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
  }
.seg:hover{ color:var(--ink); border-color:var(--ink); }
.seg:active{ transform:scale(.97); }
.seg[aria-pressed="true"]{ background:var(--ink); color:var(--ground); border-color:var(--ink); }

.note{
    display:flex; gap:9px; align-items:flex-start;
    font-family:var(--mono); font-size:.75rem; line-height:1.5;
    padding:10px 12px; border:1px solid var(--line);
    color:var(--ink-muted);
  }
.note--warn{ color:var(--warn); border-color:var(--warn); background:var(--warn-wash); }

.btn--block{ width:100%; }
.rule{ height:1px; background:var(--line); }

.compliance{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); gap:clamp(24px,4vw,64px); padding-block:clamp(40px,4.6vw,60px); }
@media (max-width:880px){
  .compliance{ grid-template-columns:minmax(0,1fr); gap:20px; }
}

@media (prefers-reduced-motion: reduce){
  .track__thumb, .btn, .seg, .cbtn{ transition:none; }
}