/* ===================================================================
   Peptific · calc.css — the web reconstitution calculator widget
   The visual syringe, scaled up for the web. Same vocabulary as the
   app kit's .syrx (barrel, ticks, teal fill, draw-to line + flag),
   tuned for a large horizontal marketing/SEO surface.
   =================================================================== */

.calc{
  background:var(--surface); border:1px solid var(--hairline);
  border-radius:var(--radius-2xl); box-shadow:var(--elev-1);
  padding:26px; max-width:560px; width:100%;
}
.calc-head{ margin-bottom:18px; }

/* segmented controls */
.calc-seg{ display:flex; gap:4px; padding:4px; background:var(--canvas-sunken); border-radius:var(--radius-md); }
.calc-seg button{
  flex:1; border:0; background:transparent; cursor:pointer;
  font:var(--type-subhead); font-weight:700; color:var(--ink-2);
  padding:11px 10px; border-radius:var(--radius-sm);
  transition:background var(--dur-fast), color var(--dur-fast);
}
.calc-seg button.on{ background:var(--surface); color:var(--accent-strong); box-shadow:var(--elev-1); }

/* inputs */
.calc-inputs{ margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.calc-inputs[hidden]{ display:none; }
.calc-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.calc-field{
  display:flex; flex-direction:column; gap:7px;
  background:var(--surface); border:1.5px solid var(--hairline);
  border-radius:var(--radius-md); padding:13px 15px;
  transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.calc-field:focus-within{ border-color:var(--accent); box-shadow:var(--focus-ring); }
.cf-lab{ font:var(--type-overline); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.cf-row{ display:flex; align-items:center; gap:8px; }
.calc-field input{
  flex:1; min-width:0; border:0; background:transparent; outline:none;
  font-family:var(--font-display); font-weight:800; font-size:28px; letter-spacing:-.02em;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.calc-field input::placeholder{ color:var(--ink-3); }
.cf-suf{ font:var(--type-subhead); font-weight:700; color:var(--ink-3); flex:none; }

/* dose unit toggle inside a field */
.cf-toggle{ display:flex; gap:3px; padding:3px; background:var(--canvas-sunken); border-radius:var(--radius-sm); flex:none; }
.cf-toggle button{ border:0; background:transparent; cursor:pointer; font:var(--type-caption); font-weight:700; color:var(--ink-2); padding:6px 11px; border-radius:8px; }
.cf-toggle button.on{ background:var(--accent); color:var(--on-accent); }

/* syringe size row */
.calc-syrsize{ margin-top:14px; display:flex; align-items:center; gap:14px; }
.calc-syrsize .cf-lab{ flex:none; }
.calc-syrsize .calc-seg{ flex:1; }

/* ---------- the web syringe ---------- */
.websyr{ margin:34px 4px 4px; padding-top:30px; }
.websyr-body{ position:relative; }
.websyr-needle{
  position:absolute; left:-22px; top:50%; transform:translateY(-50%);
  width:24px; height:4px; background:var(--ink-3); border-radius:2px;
}
.websyr-needle::after{
  content:""; position:absolute; right:-1px; top:50%; transform:translateY(-50%);
  width:9px; height:16px; background:var(--ink-3); border-radius:3px;
}
.websyr-plunger{
  position:absolute; right:-16px; top:50%; transform:translateY(-50%);
  width:9px; height:46px; background:var(--ink-2); border-radius:3px;
}
.websyr-plunger::after{
  content:""; position:absolute; right:-7px; top:50%; transform:translateY(-50%);
  width:7px; height:30px; background:var(--ink-2); border-radius:2px;
}
.websyr-barrel{
  position:relative; height:60px; border-radius:14px;
  background:var(--canvas-sunken); border:1.5px solid var(--hairline); overflow:hidden;
}
.websyr-fill{
  position:absolute; inset:0 auto 0 0; width:0;
  background:linear-gradient(180deg,#5fe6d8,var(--accent));
  transition:width var(--dur-slow) var(--spring-gentle);
}
.websyr.over .websyr-fill{ background:repeating-linear-gradient(45deg,var(--danger) 0 8px,#e85a5f 8px 16px); }
.websyr-ticks{ position:absolute; inset:0; pointer-events:none; }
.websyr-ticks i{ position:absolute; top:0; width:1.5px; background:rgba(20,32,29,.18); transform:translateX(-50%); }
.websyr-ticks i.minor{ height:11px; }
.websyr-ticks i.mid{ height:20px; background:rgba(20,32,29,.32); }
.websyr-ticks i.major{ height:100%; background:rgba(20,32,29,.14); }
[data-theme="dark"] .websyr-ticks i{ background:rgba(236,242,240,.16); }
[data-theme="dark"] .websyr-ticks i.mid{ background:rgba(236,242,240,.3); }
.websyr-drawline{
  position:absolute; top:-6px; bottom:-6px; width:3px; left:0;
  background:var(--accent-strong); border-radius:2px; z-index:3;
  box-shadow:0 0 10px 2px rgba(17,181,166,.55);
  transition:left var(--dur-slow) var(--spring-gentle);
}
.websyr.over .websyr-drawline{ background:var(--danger-strong); box-shadow:0 0 10px 2px rgba(220,61,67,.5); }
.websyr-scale{ position:relative; height:18px; margin-top:9px; }
.websyr-scale span{ position:absolute; transform:translateX(-50%); font:var(--type-mono-s); color:var(--ink-3); }

.websyr-flag{
  position:absolute; top:0; left:0; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; opacity:0; z-index:4;
  transition:left var(--dur-slow) var(--spring-gentle), opacity var(--dur-base);
}
.websyr-flag .wf-lab{
  font:var(--type-caption); font-weight:800; color:var(--on-accent);
  background:var(--accent-strong); padding:5px 11px; border-radius:var(--radius-pill);
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.websyr.over .websyr-flag .wf-lab{ background:var(--danger-strong); }
.websyr-flag .wf-stem{ width:2px; height:14px; background:var(--accent-strong); }
.websyr.over .websyr-flag .wf-stem{ background:var(--danger-strong); }

/* caption */
.calc-caption{ margin-top:24px; text-align:center; font:var(--type-body); font-weight:600; color:var(--ink-2); min-height:24px; display:flex; align-items:center; justify-content:center; gap:9px; }
.calc-caption svg{ width:19px; height:19px; flex:none; }
.calc-caption.ok{ color:var(--ink); }
.calc-caption.ok svg{ color:var(--accent-strong); }
.calc-caption.ok b{ color:var(--accent-strong); font-weight:800; }
.calc-caption.warn{ color:var(--danger-strong); }
.calc-caption.warn svg{ color:var(--danger-strong); }

/* results */
.calc-results{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:20px; }
.calc-result{ background:var(--canvas-sunken); border-radius:var(--radius-md); padding:14px 10px; text-align:center; }
.calc-result .cr-v{ font-family:var(--font-display); font-weight:800; letter-spacing:-.02em; font-size:24px; color:var(--ink); font-variant-numeric:tabular-nums; }
.calc-result .cr-v .cr-u{ font-family:var(--font-sans); font-size:13px; font-weight:700; color:var(--ink-3); letter-spacing:0; }
.calc-result .cr-k{ font:var(--type-footnote); color:var(--ink-2); margin-top:6px; }

/* actions */
.calc-actions{ margin-top:18px; display:flex; gap:10px; }
.calc-actions .btn.copied{ background:var(--accent); color:var(--on-accent); }
.calc-fineprint{ margin-top:18px; font:var(--type-footnote); color:var(--ink-3); line-height:1.55; text-align:center; }

@media (max-width:480px){
  .calc{ padding:20px; border-radius:var(--radius-xl); }
  .calc-grid2{ grid-template-columns:1fr; }
  .calc-field input{ font-size:26px; }
  .calc-results{ grid-template-columns:1fr; }
  .websyr-plunger{ right:-10px; }
}