/* Protocol Her — calculator page styles.
   app.css is Tailwind compiled from index.html only, so every class specific
   to the calculator lives here as plain CSS (no build step). Palette and
   rhythm mirror the brand values in tailwind-src/tailwind.config.js. */

/* ------------------------------------------------- Educational banner */
/* The educational strip reads first, before any converted output — same
   rule and copy as the app's calculator footnote. */
.calc-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(201, 149, 108, 0.1);
  border: 1px solid rgba(201, 149, 108, 0.22);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.58);
}
.calc-banner svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 2px;
  color: #D4A77F;
}

/* ------------------------------------------------------- Card layout */
.calc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
@media (min-width: 900px) {
  .calc-grid {
    grid-template-columns: 5fr 6fr;
    gap: 48px;
  }
}

.calc-section-label {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #EBA4B7;
  margin-bottom: 16px;
}

/* ------------------------------------------------------------ Inputs */
.calc-field { margin-bottom: 14px; }
.calc-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 7px;
}
.calc-input {
  width: 100%;
  padding: 13px 16px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(242, 196, 206, 0.16);
  border-radius: 16px;
  /* Same constant pink glow the app's entry rows carry — identical on
     every row, independent of the entered value. */
  box-shadow: 0 0 8px rgba(224, 122, 152, 0.18);
  transition: border-color 0.2s ease;
  -moz-appearance: textfield;
  appearance: textfield;
}
.calc-input:focus {
  border-color: rgba(224, 122, 152, 0.65);
  outline: none;
}
.calc-input:focus-visible {
  outline: 2px solid rgba(224, 122, 152, 0.9);
  outline-offset: 2px;
}

/* Segmented mg/mcg toggle (mirrors the app's segmented treatment). */
.calc-seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(242, 196, 206, 0.14);
}
.calc-seg button {
  padding: 6px 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.calc-seg button[aria-pressed="true"] {
  background: #F2C4CE;
  color: #0E0810;
  font-weight: 600;
}
.calc-caption {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 7px;
}
.calc-privacy-note {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 20px;
}

/* ------------------------------------------------------------- Gauge */
/* SyringeGauge port. Color tokens mirror the Swift source exactly:
   blushSoft #F8DDE3, blush #F2C4CE, pinkRose #E07A98, with the same
   opacities. The liquid is ONE token color at every value (neutrality
   rule): no zones, no color shifts by magnitude, no range shading. */
.calc-gauge { width: 100%; height: auto; display: block; }
.sg-needle { stroke: rgba(248, 221, 227, 0.5); stroke-width: 1.5; }
.sg-hub { fill: rgba(242, 196, 206, 0.22); }
.sg-glass { fill: rgba(242, 196, 206, 0.05); }
.sg-glass-stroke {
  fill: none;
  stroke: rgba(242, 196, 206, 0.28);
  stroke-width: 1.5;
}
.sg-liquid { fill: rgba(224, 122, 152, 0.8); }
.sg-rod { fill: rgba(248, 221, 227, 0.34); }
.sg-stopper { fill: rgba(248, 221, 227, 0.95); }
.sg-flange { fill: rgba(242, 196, 206, 0.38); }
.sg-pad { fill: rgba(248, 221, 227, 0.7); }
.sg-tick-major line { stroke: rgba(255, 255, 255, 0.34); stroke-width: 1; }
.sg-tick-minor line { stroke: rgba(255, 255, 255, 0.18); stroke-width: 1; }
.sg-num text {
  fill: rgba(255, 255, 255, 0.38);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 500;
}
/* Same easing the app animates the draw with; app.css's global
   prefers-reduced-motion rule collapses these to 0.01ms. */
.sg-liquid, .sg-rod {
  transition: width 0.28s ease-out, x 0.28s ease-out;
}
.sg-stopper { transition: transform 0.28s ease-out; }
.calc-gauge-caption {
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 6px;
}

/* ------------------------------------------------------------ Result */
.calc-empty {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 18px;
}
.calc-result { margin-top: 18px; }
.calc-eyebrow {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #F8DDE3;
  margin-bottom: 6px;
}
.calc-hero {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.calc-units-value {
  font-family: 'Tenor Sans', serif;
  font-size: clamp(48px, 11vw, 64px);
  line-height: 1;
  background: linear-gradient(135deg, #F8DDE3 0%, #F2C4CE 25%, #EBA4B7 55%, #E07A98 85%, #C9537A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.calc-units-word {
  font-family: 'Tenor Sans', serif;
  font-size: 22px;
  color: #F8DDE3;
}
.calc-sub {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.52);
  margin-top: 8px;
}
.calc-rows {
  margin-top: 16px;
  border-top: 1px solid rgba(242, 196, 206, 0.1);
}
.calc-rows > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(242, 196, 206, 0.1);
}
.calc-rows dt {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.55);
}
.calc-rows dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

/* Factual notes — standing body color, no alarm styling (app rule). */
.calc-note {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 10px;
}

/* Show-your-work strip so the number is checkable at a glance. */
.calc-ref {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(242, 196, 206, 0.12);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.58);
  overflow-wrap: break-word;
}

/* -------------------------------------------------- Math explainer */
.calc-step-number {
  font-family: 'Tenor Sans', serif;
  font-size: 28px;
  line-height: 1;
  color: #EBA4B7;
  margin-bottom: 12px;
}
.calc-formula {
  display: block;
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(242, 196, 206, 0.1);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  overflow-wrap: break-word;
}

/* Hidden must win over any display rule above. */
[hidden] { display: none !important; }