/* ==================== VISTARA LABS · PEPTIDE CALCULATOR ==================== */
.vl-calc{
  --vl-blue:#21609D;
  --vl-teal:#239B97;
  --vl-navy:#233642;
  --vl-deep:#0C343D;
  --vl-link:#3178A0;
  --vl-grey:#777777;
  --vl-line:#dfe5e9;
  --vl-bg:#fcfcfc;
  font-family:Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
  max-width:900px;margin:0 auto;color:var(--vl-navy);
  -webkit-font-smoothing:antialiased;
}
.vl-calc *,.vl-calc *::before,.vl-calc *::after{box-sizing:border-box}

.vl-calc__card{background:var(--vl-bg);border:1px solid var(--vl-line);border-radius:3px;padding:24px}
.vl-calc__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

.vl-field{display:flex;flex-direction:column;min-width:0}
.vl-calc [hidden]{display:none !important}
.vl-field label{
  font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:1.2px;
  color:var(--vl-deep);margin-bottom:7px;
}
.vl-field input,.vl-field select{
  font-family:inherit;font-size:16px;font-weight:400;color:var(--vl-navy);
  background:#fff;border:1px solid var(--vl-line);border-radius:3px;
  padding:12px 13px;width:100%;height:52px;appearance:none;-webkit-appearance:none;
  /* 46px left a 20px content box once padding and border were taken out — under
     the ~22px a 16px face needs — so descenders were clipped: the "g" in "5 mg"
     lost its tail. 52px gives 26px, and the explicit line-height stops the box
     depending on each browser's idea of `normal`. */
  line-height:1.4;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.vl-field select{
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23233642' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:11px;padding-right:34px;
}
.vl-field input:focus,.vl-field select:focus{
  outline:none;border-color:var(--vl-teal);box-shadow:0 0 0 3px rgba(35,155,151,.15);
}
.vl-custominput{margin-top:8px}
.vl-hint{font-size:14px;color:var(--vl-grey);margin-top:6px;line-height:1.4}

.vl-inputgroup{display:flex;gap:8px;flex-wrap:wrap}
.vl-inputgroup input,.vl-inputgroup select{flex:1 1 auto;min-width:0}

/* The dose field carries a full-width dropdown beside its input, so it needs two
   columns — otherwise the select wraps underneath and the row sits half empty. */
.vl-field--dose{grid-column:span 2}
.vl-inputgroup > input#vlDose,
.vl-inputgroup > select#vlDose{
  /* `.vl-field select` sets width:100%, which becomes the flex-basis and pushes the
     unit dropdown onto its own line. Basis 0 lets it shrink to share the row. */
  flex:1 1 0;width:auto;min-width:120px;
}

/* Dose unit dropdown — inherits the standard select styling, overrides width only.
   Selector is deliberately more specific than `.vl-field select` so width:auto wins. */
.vl-field select.vl-unitselect{
  width:auto;min-width:178px;flex:0 0 auto;font-size:15px;cursor:pointer;
}

.vl-calc__result{background:var(--vl-navy);border-radius:3px;padding:28px 24px 24px;margin-top:20px;color:#fff}
.vl-result__main{text-align:center;margin-bottom:22px}
.vl-result__label{
  display:block;font-size:16.8px;font-weight:500;text-transform:uppercase;letter-spacing:1.6px;
  color:rgba(255,255,255,.62);margin-bottom:6px;
}
.vl-result__value{font-size:56px;font-weight:500;line-height:1;color:#fff;display:inline-block}
.vl-result__value em{
  font-style:normal;font-size:17px;font-weight:400;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--vl-teal);margin-left:10px;
}
.vl-calc__result.is-error .vl-result__value{font-size:30px;color:#ffb4a8}

.vl-syringe{margin:0 0 22px}
.vl-syringe svg{display:block;width:100%;height:auto}
.vl-syringe__labels{position:relative;height:20px;margin:4px 1% 0}
.vl-syringe__labels span{
  position:absolute;transform:translateX(-50%);font-size:14px;color:rgba(255,255,255,.7);white-space:nowrap;
}

/* Sits between the syringe and the three stat tiles, reading as a caption to
   the diagram rather than a fourth statistic. */
.vl-equiv{
  margin:0 0 18px;text-align:center;font-size:18px;line-height:1.4;
  color:rgba(255,255,255,.78);
}
.vl-equiv b{font-weight:500;color:#fff}
.vl-equiv[hidden]{display:none}

.vl-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.14);border-radius:3px;overflow:hidden}
.vl-stat{background:var(--vl-navy);padding:14px 12px;text-align:center}
.vl-stat__k{
  display:block;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:1.1px;
  color:rgba(255,255,255,.58);margin-bottom:5px;
}
.vl-stat__v{display:block;font-size:20px;font-weight:500;color:#fff}

.vl-note{
  margin-top:16px;padding:12px 14px;border-radius:3px;font-size:15px;line-height:1.5;
  background:rgba(255,255,255,.08);border-left:3px solid var(--vl-teal);color:rgba(255,255,255,.9);
}
.vl-note.is-warn{border-left-color:#f8981d}

.vl-steps{margin-top:26px}
.vl-steps ol{margin:0;padding-left:22px;color:var(--vl-navy)}
.vl-steps li{font-size:17px;line-height:1.65;margin-bottom:8px}
.vl-steps b{font-weight:500;color:var(--vl-link)}

.vl-disclaimer{font-size:13px;line-height:1.55;color:var(--vl-grey);margin:22px 0 0;text-align:center}

@media (max-width:768px){
  /* Gutters. `.vl-calc` is `max-width:900px; margin:0 auto` with no horizontal
     padding, so below 900px it is exactly as wide as its parent -- measured at
     375px the card's border sat at x=0 and x=375, hard against both browser
     edges, while the intro copy directly above it sat at 18px.

     Padding goes on `.vl-calc` rather than on the card, because the card, the
     navy result panel, the steps list and the disclaimer are all siblings
     inside it; insetting the container moves the four together and leaves the
     insets they already have relative to each other untouched.

     var(--vl-edge) is the site's own page gutter (home.css :root) -- 1.15rem,
     18.4px, at this width -- so the card now lines up with the paragraph above
     it instead of landing a few pixels off it. The 14px fallback covers
     home.css not having loaded, and is inside the 12-16px the brief asked for.

     Deliberately left alone between 769px and 899px, where the container is
     still flush: the brief is about phone widths, and that band is unchanged
     from today. */
  .vl-calc{padding-inline:var(--vl-edge,14px)}
  .vl-calc__grid{grid-template-columns:1fr;gap:16px}
  .vl-calc__card{padding:18px}
  .vl-result__value{font-size:44px}
  .vl-stats{grid-template-columns:1fr}
  .vl-syringe__labels span{font-size:12px}
  /* Single-column grid on mobile: drop the span and let the dropdown go full width. */
  .vl-field--dose{grid-column:auto}
  .vl-field select.vl-unitselect{flex:1 1 100%;width:100%;min-width:0}
  .vl-steps li{font-size:16px}
  .vl-equiv{font-size:16px;margin-bottom:16px}
  /* The card and the result panel carry their own 18px inset, but the steps
     list sat outside both with no horizontal padding at all -- its text ran to
     within 5px of the right edge. Matching the card's 18px lines the steps up
     with everything above them. */
  .vl-steps{padding-inline:18px}
}