/* Peptide reconstitution calculator — page styles. Loaded after /styles.css (the site's shared sheet).
   Paper-and-glass: quiet paper, one hairline card, one teal glass band carrying the result.
   Nothing animates: every figure is exact at every frame. */

:root {
  --c-paper: #EDE7D9;
  --c-paper-top: #F6EFE3;
  --c-card: #FFFDF8;
  --c-hair: #E2DCCB;
  --c-ink: #1F1D1B;
  --c-ink-2: #5E5B58;
  --c-teal: #08705B;
  --c-teal-text: #08705B;
  --c-glass-a: #0B8169;
  --c-glass-b: #075E4C;
  --c-chip-ink: #075E4C;
  --c-walnut-a: #704D30;
  --c-walnut-b: #40291A;
  --c-brass: #D6B26E;
  --c-red: #B10900;
  --c-orange: #8D4A10;
  --c-orange-edge: #E08A2E;        /* the over-syringe edge on the teal band (decorative, non-text) */
  --c-field-bg: #FFFFFF;
  --c-field-border: #8C8579;       /* ≥ 3:1 against the card (WCAG 1.4.11) */
  --c-field-disabled: #F3EFE6;
  --c-fill: rgba(8, 112, 91, 0.30);
  --c-tint-orange: rgba(141, 74, 16, 0.07);
  --c-tint-red: rgba(177, 9, 0, 0.06);
  --c-serif: "Source Serif 4", "New York", Georgia, serif;
  --c-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --c-paper: #181614;
    --c-paper-top: #1D1A17;
    --c-card: #282522;
    --c-hair: #3A3632;
    --c-ink: #F2EEE6;
    --c-ink-2: #8F8C87;
    --c-teal-text: #7FD6BC;
    --c-chip-ink: #7FD6BC;
    --c-red: #FF8A7E;              /* not in the token list: chosen for ≥ 4.5:1 on the dark card */
    --c-orange: #F0A35E;           /* not in the token list: chosen for ≥ 4.5:1 on the dark card */
    --c-field-bg: #201E1B;
    --c-field-border: #807B74;
    --c-field-disabled: #2E2B28;
    --c-fill: rgba(127, 214, 188, 0.30);
    --c-tint-orange: rgba(240, 163, 94, 0.08);
    --c-tint-red: rgba(255, 138, 126, 0.08);
  }
}

/* ---- Page frame (overrides of the shared sheet, scoped to this page) ---- */
body.calc {
  background: linear-gradient(180deg, var(--c-paper-top) 0, var(--c-paper) 360px) var(--c-paper);
  background-color: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--c-sans);
}
body.calc header { background: transparent; border-bottom-color: var(--c-hair); }
body.calc a { color: var(--c-teal-text); }
body.calc .brand { color: var(--c-ink); }
body.calc .brand:hover { text-decoration: none; }
body.calc footer { border-top-color: var(--c-hair); color: var(--c-ink-2); }
body.calc footer .tm { color: var(--c-ink-2); }
body.calc .disclaimer {
  background: var(--c-card); border: 1px solid var(--c-hair); color: var(--c-ink-2);
  margin: 18px 0 0; border-radius: 14px; padding: 14px 16px; font-size: .9rem;
}
body.calc .disclaimer strong { color: var(--c-ink); }
body.calc *, body.calc *::before, body.calc *::after { transition: none !important; animation: none !important; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.calc-main { padding: 18px 0 8px; }
.calc-wrap { max-width: 640px; margin: 0 auto; padding: 0 16px; }

.crumbs { font-size: .85rem; color: var(--c-ink-2); margin: 0 0 8px; }
.crumbs a { font-weight: 600; }

.calc-title {
  font-family: var(--c-serif); font-weight: 600; font-size: 2rem; line-height: 1.15;
  letter-spacing: -0.01em; margin: 0 0 16px; color: var(--c-ink);
}

/* ---- The card ---- */
.calc-card {
  background: var(--c-card); border: 1px solid var(--c-hair); border-radius: 20px;
  padding: 18px 16px 20px; box-shadow: 0 12px 32px rgba(64, 41, 26, 0.06);
}
.card-note {
  margin: 0 0 18px; padding: 0 0 14px; border-bottom: 1px solid var(--c-hair);
  font-size: .88rem; line-height: 1.5; color: var(--c-ink-2);
}
.card-note strong { color: var(--c-ink); }

.calc-form { margin: 0; }
.field { margin: 0 0 18px; }
.field > label, .units legend {
  display: block; font-weight: 650; font-size: 1rem; color: var(--c-ink); margin: 0 0 8px;
}
.control { position: relative; }
.control input {
  display: block; width: 100%; min-height: 54px; margin: 0;
  padding: 12px 64px 12px 14px; border-radius: 12px;
  border: 1px solid var(--c-field-border); background: var(--c-field-bg); color: var(--c-ink);
  font: 600 1.3rem/1.2 var(--c-sans); font-variant-numeric: tabular-nums;
  -webkit-appearance: none; appearance: none;
}
.control input::placeholder { color: var(--c-ink-2); opacity: 1; font-weight: 500; }
.control input:focus { outline: 3px solid var(--c-teal-text); outline-offset: 2px; border-color: var(--c-teal-text); }
.control input[aria-invalid="true"] { border-color: var(--c-red); }
.control input:disabled { background: var(--c-field-disabled); border-style: dashed; cursor: not-allowed; }
.suffix {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  font-weight: 600; font-size: 1rem; color: var(--c-ink-2); pointer-events: none;
}

.units { border: 0; padding: 0; margin: 0 0 10px; min-width: 0; }
.units legend { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seg input { position: absolute; left: 0; top: 0; opacity: 0; width: 1px; height: 1px; margin: 0; }
.seg label {
  display: flex; align-items: center; justify-content: center; min-height: 48px;
  border: 1px solid var(--c-field-border); border-radius: 12px; background: var(--c-field-bg);
  font-weight: 650; font-size: 1.05rem; color: var(--c-ink); cursor: pointer; user-select: none;
}
.seg input:checked + label {
  background: linear-gradient(180deg, var(--c-glass-a), var(--c-glass-b));
  border-color: var(--c-glass-b); color: #FFFFFF;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.seg input:focus-visible + label { outline: 3px solid var(--c-teal-text); outline-offset: 2px; }
.seg input:disabled + label { background: var(--c-field-disabled); border-style: dashed; color: var(--c-ink-2); cursor: not-allowed; }

/* Start-up line (CFS-5): a quiet "Loading…" until the core has loaded and passed its check; the
   "couldn't load" and no-JavaScript lines take the error style. */
.calc-status { margin: 0 0 14px; font-size: .92rem; color: var(--c-ink-2); }
.calc-status.is-error {
  color: var(--c-red); font-weight: 650; padding: 10px 12px; border-radius: 10px; background: var(--c-tint-red);
}

.field-help { margin: 6px 0 0; font-size: .9rem; color: var(--c-ink-2); }
.field-error { margin: 6px 0 0; font-size: .92rem; font-weight: 650; color: var(--c-red); }
.field-warning {
  margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid var(--c-orange); border-radius: 6px;
  background: var(--c-tint-orange); font-size: .92rem; font-weight: 600; color: var(--c-orange);
}
[hidden] { display: none !important; }

/* ---- Output ---- */
.calc-out { position: relative; border-top: 1px solid var(--c-hair); padding-top: 16px; }
/* Invisible copy of the band, used only to measure whether every figure fits (never shown, aria-hidden). */
.result-band.measure { position: absolute; left: 0; right: 0; top: 0; visibility: hidden; pointer-events: none; }
/* The §37 block follows the result (CFS-2): never between the fields and the result, never removed. */
.blessed {
  margin: 16px 0 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--c-brass);
  font-size: .88rem; line-height: 1.5; color: var(--c-ink-2);
}
.calc-message { margin: 0; font-size: .98rem; color: var(--c-ink-2); }
.calc-message.is-error {
  color: var(--c-red); font-weight: 650; padding: 10px 12px; border-radius: 10px; background: var(--c-tint-red);
}

.result-band {
  margin: 0; padding: 6px 16px; border-radius: 16px; color: #FFFFFF;
  background: linear-gradient(160deg, var(--c-glass-a), var(--c-glass-b));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 10px 24px rgba(7, 94, 76, 0.18);
}
.result-band .row {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px;
  padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.24);
}
.result-band .row-units { border-bottom: 0; }
.result-band dt { margin: 0; font-size: .95rem; font-weight: 500; color: #FFFFFF; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
/* A figure never breaks (blind review B1): the number is one unbreakable span, the only break allowed is
   the space before the unit word, and a figure wider than its row scrolls inside the row — never wraps,
   never clips. */
.result-band dd {
  margin: 0 0 0 auto; font-size: 1.3rem; font-weight: 700; color: #FFFFFF; text-align: right;
  font-variant-numeric: tabular-nums; min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden;
  overflow-wrap: normal; word-break: normal;
}
.result-band .fig, .result-band .fig-unit { white-space: nowrap; }
.result-band.is-over { border-left: 6px solid var(--c-orange-edge); }
.band-warning-row { padding: 10px 0 12px; border-top: 1px solid rgba(255, 255, 255, 0.24); }
.result-band dd.band-warning { margin: 0; font-size: 1rem; font-weight: 700; color: #FFFFFF; text-align: left; white-space: normal; overflow: visible; max-width: none; }
.band-warning::before { content: "⚠ "; }
.result-band .row-units dd { font-size: 1.55rem; }
/* What "units" means, next to the units figure (CFS-7). */
.result-band .row-units dd.units-note {
  flex-basis: 100%; margin: 0; font-size: .85rem; font-weight: 500; text-align: left;
  white-space: normal; overflow: visible; max-width: none;
}

.calc-warnings { margin: 12px 0 0; }
.calc-warning {
  margin: 0 0 8px; padding: 10px 12px; border-left: 3px solid var(--c-orange); border-radius: 8px;
  background: var(--c-tint-orange); color: var(--c-orange); font-size: .95rem; font-weight: 650;
}

.syringe { margin: 16px 0 0; }
.syringe svg { display: block; width: 100%; max-width: 560px; height: auto; margin: 0 auto; overflow: visible; }
.syringe figcaption { margin: 6px 0 0; font-size: .88rem; color: var(--c-ink-2); text-align: center; }
.sy-needle { stroke: var(--c-ink-2); stroke-width: 2; stroke-linecap: round; }
.sy-hub { fill: var(--c-hair); stroke: var(--c-ink-2); stroke-width: 1.2; }
.sy-barrel { fill: none; stroke: var(--c-ink); stroke-width: 1.6; }
.sy-barrel.sy-over { stroke: var(--c-orange); stroke-dasharray: 6 4; stroke-width: 2; }
.sy-fill { fill: var(--c-fill); }
.sy-edge { stroke: var(--c-teal-text); stroke-width: 3; }
.sy-flange { fill: var(--c-walnut-a); }
.sy-major { stroke: var(--c-ink); stroke-width: 1.4; }
.sy-minor { stroke: var(--c-ink-2); stroke-width: 1; }
.sy-label { fill: var(--c-ink-2); font: 600 12px var(--c-sans); }
.sy-overtext { fill: var(--c-orange); font: 700 12px var(--c-sans); }

.app-line { margin: 18px 0 0; text-align: center; font-size: .95rem; color: var(--c-ink-2); }
.app-line a { font-weight: 650; }

/* ---- Wider screens ---- */
/* Very narrow (320 px at 200 % zoom = 160 CSS px): give the figures room. */
@media (max-width: 260px) {
  .calc-wrap { padding: 0 8px; }
  .calc-card { padding: 14px 10px 16px; border-radius: 14px; }
  .result-band { padding: 4px 10px; }
  /* CFS-3: the unit suffix moves under the field, so the whole width holds the typed digits
     (calculator.js steps the font down if a long entry still would not fit). */
  .control input { padding: 10px 8px; font-size: 1.1rem; min-height: 48px; }
  .suffix { position: static; transform: none; display: block; margin: 4px 2px 0; text-align: right; font-size: .9rem; }
}
@media (min-width: 560px) {
  .calc-wrap { padding: 0 22px; }
  .calc-card { padding: 22px 24px 24px; }
  .calc-title { font-size: 2.3rem; }
}
@media (min-width: 900px) {
  .calc-main { padding-top: 28px; }
  .calc-wrap { max-width: 960px; }
  body.calc header .wrap, body.calc footer .wrap { max-width: 960px; }
  .calc-title { font-size: 2.7rem; margin-bottom: 20px; }
  .calc-card {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 36px;
    padding: 26px 30px 30px;
  }
  .card-note { grid-column: 1 / -1; }
  .calc-out { border-top: 0; padding-top: 0; }
}