/* ============================================================
   OptiPin calculator components — shared.

   Loaded AFTER optipin-theme.css so it wins, and after each page's own inline <style>
   so the hand-written calculators adopt it without their markup changing. They already
   share the class names (.calc-card, .input-field, .seg-btn, .seg-wrap, .qa, .stat,
   .cta-gradient, .result-big, .tbl-scroll), which is what makes one file enough.

   Exists because the calculators were the only surface still rendering flat Tailwind
   blue on solid panels while the rest of the site had moved to the teal/violet
   "clinical aurora" palette. Colors come from the theme's tokens, never hardcoded.
   ============================================================ */

/* Uses optipin-theme.css tokens rather than raw Tailwind blues. The calculators were
   the only pages on the site not speaking the "clinical aurora" palette, which is why
   they read as a different, older product than everything around them. */
.calc-card{ background:var(--op-paper); border:1px solid var(--op-line); border-radius:18px;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.input-field{ background:rgba(7,11,24,.55); border:1px solid var(--op-line-strong); border-radius:11px;
  color:var(--op-text); outline:none; font-size:16px; width:100%; padding:10px 12px;
  transition:border-color .15s var(--op-ease), box-shadow .15s var(--op-ease); }
.input-field:focus{ border-color:rgba(54,230,210,.55); box-shadow:0 0 0 3px rgba(54,230,210,.14); }
.seg-wrap{ display:flex; background:rgba(7,11,24,.55); border:1px solid var(--op-line); border-radius:11px; padding:3px; gap:2px; }
.seg-btn{ flex:1; padding:6px 8px; border-radius:8px; font-size:13px; font-weight:500; cursor:pointer;
  transition:background .18s var(--op-ease), color .18s var(--op-ease); color:var(--op-muted); background:transparent; border:none; text-align:center; }
.seg-btn:hover{ color:var(--op-text); }
.seg-btn.active{ background:rgba(54,230,210,.16); color:var(--op-teal); box-shadow:inset 0 0 0 1px rgba(54,230,210,.35); }
.result-big{ font-size:2.6rem; font-weight:800; line-height:1; letter-spacing:-.03em; }
.cta-gradient{ background:linear-gradient(135deg,rgba(27,156,154,.20),rgba(91,70,201,.14)); border:1px solid var(--op-line-strong); }
.stat{ background:var(--op-paper); border:1px solid var(--op-line); border-radius:14px; padding:14px 14px; text-align:center; }
.stat .v{ font-size:1.6rem; font-weight:700; letter-spacing:-.02em; color:var(--op-text); }
.stat .k{ font-size:10.5px; color:var(--op-faint); text-transform:uppercase; letter-spacing:.06em; margin-top:5px; }
.qa h3{ font-size:1rem; font-weight:600; color:#dbe2f5; margin-bottom:.35rem; }
.qa p{ font-size:.92rem; color:var(--op-muted); line-height:1.7; }
.qa{ padding:15px 0; border-bottom:1px solid var(--op-line); }
table.clk{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.clk th{ text-align:left; font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--op-faint); padding:9px 10px; border-bottom:1px solid var(--op-line-strong); white-space:nowrap; }
table.clk td{ padding:10px 10px; border-bottom:1px solid var(--op-line); color:#c3cbe6; }
table.clk tr:hover td{ background:rgba(54,230,210,.05); }
.tbl-scroll{ overflow-x:auto; }
.mode-hint{ font-size:12px; color:var(--op-faint); margin-top:10px; line-height:1.65; }
.warn{ background:rgba(255,180,84,.08); border:1px solid rgba(255,180,84,.28); color:#f4c98a; border-radius:14px; }
.ok{ background:rgba(54,230,210,.08); border:1px solid rgba(54,230,210,.28); color:#7ceee0; border-radius:14px; }
.note{ background:var(--op-paper); border:1px solid var(--op-line); color:#c3cbe6; border-radius:14px; }
/* A .note that is a <details> folds: the sentence that does the work stays open and the rest
   is one tap away, so a phone reaches the calculator instead of six lines of preamble. */
details.note>summary{ list-style:none; cursor:pointer; padding:14px 40px 14px 16px; position:relative; }
details.note>summary::-webkit-details-marker{ display:none; }
details.note>summary::after{ content:'+'; position:absolute; right:16px; top:13px; font-size:16px; color:var(--op-faint); }
details.note[open]>summary::after{ content:'−'; }
details.note>summary:focus-visible{ outline:2px solid var(--op-teal); outline-offset:-2px; border-radius:14px; }
details.note>div{ padding:0 16px 14px; }
.flagpill{ display:inline-block; font-size:11px; font-weight:700; letter-spacing:.01em; padding:4px 9px; border-radius:999px; margin:2px 3px 2px 0; }
/* Red still means risk. It is kept for the two structural warnings that are genuinely
   cautionary and removed everywhere it was only decoration. */
.f-red{ background:rgba(248,113,113,.12); color:#f8a5a5; border:1px solid rgba(248,113,113,.32); }
.f-amber{ background:rgba(255,180,84,.12); color:#f4c98a; border:1px solid rgba(255,180,84,.32); }
.f-blue{ background:rgba(54,230,210,.12); color:var(--op-teal); border:1px solid rgba(54,230,210,.32); }
.cmp-row{ display:grid; grid-template-columns:minmax(0,1fr) 82px 120px 62px 62px 34px; gap:8px; align-items:end; margin-bottom:10px; }
.cmp-row .lbl{ font-size:10px; color:var(--op-faint); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; display:block; }
/* Phone layout is two inputs a line. From wk and To wk are one range, so they share a line
   rather than the range wrapping with To wk stranded on a row of its own. */
@media (max-width:700px){ .cmp-row{ grid-template-columns:minmax(0,1fr) 1fr 1fr; } .cmp-row .cmp{ grid-column:1/-1; } .cmp-row .rm{ grid-column:3; justify-self:end; }
  .cmp-row--cycle{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px; }
  .cmp-row--cycle>div:nth-child(2){ grid-column:1; }
  .cmp-row--cycle>div:nth-child(3){ grid-column:2/-1; }
  .cmp-row--cycle>div:nth-child(4){ grid-column:1; }
  .cmp-row--cycle>div:nth-child(5){ grid-column:2; }
  /* Its track is exactly the button's width, so stretching it back to a square keeps the
     remove control a real tap target instead of the 13px sliver justify-self:end left. */
  .cmp-row--cycle .rm{ justify-self:stretch; } }
/* Removing a row is reversible and low-stakes, so it reads as muted rather than alarming. */
.rm{ background:transparent; border:1px solid var(--op-line-strong); color:var(--op-faint); border-radius:10px; height:42px; cursor:pointer; font-size:15px;
  transition:color .15s var(--op-ease), border-color .15s var(--op-ease); }
.rm:hover{ color:#f8a5a5; border-color:rgba(248,113,113,.45); }
.addbtn,.sharebtn{ background:rgba(54,230,210,.10); border:1px solid rgba(54,230,210,.30); color:var(--op-teal);
  border-radius:11px; padding:9px 15px; font-size:14px; font-weight:600; cursor:pointer;
  transition:background .18s var(--op-ease); }
.addbtn:hover,.sharebtn:hover{ background:rgba(54,230,210,.20); }
.sharebar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:16px; padding-top:16px; border-top:1px solid var(--op-line); }
.sharenote{ font-size:12px; color:var(--op-faint); }
.bar{ height:9px; border-radius:5px; background:var(--op-teal); }
/* The chart was 220px tall inside a padded card, so it read as a thumbnail. It now runs
   edge to edge of the card and is tall enough to show a curve rather than a wiggle. */
.chart-wrap{ margin:0 -20px; padding:0; position:relative; }
@media (min-width:640px){ .chart-wrap{ margin:0 -24px; } }
.chart-wrap svg{ display:block; width:100%; height:clamp(260px,42vw,380px); }
.legend{ display:flex; flex-wrap:wrap; gap:14px; font-size:12px; color:var(--op-muted); padding-top:12px; }
.legend i{ display:inline-block; width:14px; height:2.5px; border-radius:2px; margin-right:6px; vertical-align:middle; }

/* Hover readout on the cycle chart. Pinned to the top of the plot and moved only on the x
   axis, so it never lands under the pointer or covers the curve it is describing. */
.chart-tip{ position:absolute; top:8px; left:0; z-index:4; pointer-events:none;
  background:rgba(7,11,24,.94); border:1px solid var(--op-line-strong); border-radius:11px;
  padding:8px 10px; font-size:12px; color:var(--op-text); max-width:min(280px,72%);
  box-shadow:0 10px 28px rgba(0,0,0,.42); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
.chart-tip .tip-h{ color:var(--op-faint); font-size:11px; margin-bottom:5px; }
.chart-tip .tip-r{ display:flex; align-items:center; gap:7px; line-height:1.75; white-space:nowrap; }
.chart-tip .tip-r i{ display:inline-block; width:9px; height:9px; border-radius:2px; flex:0 0 auto; }
.chart-tip .tip-n{ flex:1 1 auto; color:var(--op-muted); padding-right:12px;
  overflow:hidden; text-overflow:ellipsis; }
.chart-tip .tip-r b{ font-weight:600; }

/* The legend doubles as the show/hide control, so its entries are real buttons. */
.legend .lg-item{ background:none; border:0; padding:0; margin:0; font:inherit; color:inherit;
  cursor:pointer; display:inline-flex; align-items:center; }
.legend .lg-item:hover{ color:var(--op-text); }
.legend .lg-item.off{ opacity:.45; text-decoration:line-through; }
.legend .lg-item:focus-visible{ outline:2px solid var(--op-teal); outline-offset:3px; border-radius:4px; }
input,select,textarea{ font-size:16px !important; }
/* The column widened from 3xl to 4xl so the chart and the compound rows stop being
   squeezed. Running text does not want the extra width, so prose keeps a measure. */
.op-tool section p, .op-tool .qa p, .op-tool .qa h3{ max-width:68ch; }
.op-tool section h2{ max-width:68ch; }

/* ---- searchable compound picker ----
   A native <select> type-ahead matches only the START of an option label, and our labels
   carry the searchable word in parentheses: "Nandrolone Decanoate (Deca)". Typing Deca hit
   nothing. This is the ARIA combobox that replaced it, so the list has to float above the
   rows below it rather than push them down. */
.combo{ position:relative; }
.combo-list{ position:absolute; z-index:40; left:0; right:0; top:calc(100% + 4px); margin:0;
  max-height:min(46vh,320px); overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:#0a1022; border:1px solid var(--op-line-strong); border-radius:12px; padding:5px;
  box-shadow:0 18px 40px rgba(2,5,15,.66); list-style:none; }
.combo-opt{ padding:9px 10px; border-radius:8px; font-size:14px; color:#c3cbe6; cursor:pointer; }
.combo-opt.active{ background:rgba(54,230,210,.14); color:var(--op-text); }
.combo-opt.cur{ color:var(--op-teal); }
.combo-group{ padding:9px 10px 4px; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--op-faint); }
.combo-none{ padding:10px; font-size:13px; color:var(--op-faint); }
/* The caret says "this opens a list", which an unadorned text input does not. */
.combo::after{ content:''; position:absolute; right:12px; top:50%; width:7px; height:7px;
  margin-top:-5px; border-right:1.5px solid var(--op-faint); border-bottom:1.5px solid var(--op-faint);
  transform:rotate(45deg); pointer-events:none; }
.combo-input{ padding-right:30px; }
/* Aliases are a reference list, not a control: quiet, dense and out of the way until opened. */
.alias-list{ display:grid; gap:6px 18px; grid-template-columns:1fr; padding:4px 0 2px; }
@media (min-width:640px){ .alias-list{ grid-template-columns:1fr 1fr; } }
.alias-list div{ font-size:12px; color:var(--op-faint); line-height:1.6; }
.alias-list b{ color:#c3cbe6; font-weight:600; }
.alias-fold>summary{ cursor:pointer; font-size:12px; color:var(--op-teal); list-style:none;
  padding:2px 0; }
.alias-fold>summary::-webkit-details-marker{ display:none; }
.alias-fold>summary::before{ content:'+ '; }
.alias-fold[open]>summary::before{ content:'− '; }
/* The chart card's heading and its view toggle. The toggle is two words wide, so it sits
   beside the heading on a desktop and drops under it on a phone rather than squeezing. */
.chart-head{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; }
.chart-head .seg-wrap{ flex:0 1 auto; }
.chart-head .seg-btn{ white-space:nowrap; }
@media (max-width:520px){ .chart-head .seg-wrap{ flex:1 1 100%; } }

/* ---- page-specific classes on the older calculators, same treatment ---- */
.step-num{ background:rgba(54,230,210,.12); border:1.5px solid rgba(54,230,210,.35); color:var(--op-teal); }
.post-cta{ background:linear-gradient(135deg,rgba(27,156,154,.20),rgba(91,70,201,.14)); border:1px solid var(--op-line-strong); border-radius:16px; }