/* ---------- ETG / ALCOHOL VERTICAL — component styles ----------
   Loaded only on the 6 Alcohol & ETG Testing pages, after style.css.
   Reuses existing tokens (--trust, --safe, --warn, --danger, --line, etc.)
   plus the new --med / --med-soft teal tokens defined in style.css. */

/* Weight unit toggle (lbs/kg) — segmented control */
.unit-toggle{
  display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  margin-left:8px;vertical-align:middle;
}
.unit-toggle button{
  border:none;background:var(--card);color:var(--ink-soft);
  font-size:12.5px;font-weight:700;padding:6px 12px;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.unit-toggle button.active{background:var(--med);color:#fff;}
.unit-toggle button:not(.active):hover{background:var(--med-soft);}

.field-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
.field-row label{margin-bottom:0;}

/* Sex select — reuses base <select> styling, no overrides needed beyond spacing */
.sex-select-row{display:flex;gap:10px;margin-bottom:18px;}
.sex-select-row select{margin-bottom:0;}

/* Cutoff selector chips (100 / 300 / 500 ng/mL) */
.cutoff-group{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;}
.cutoff-chip{
  flex:1;min-width:100px;text-align:center;padding:10px 8px;border-radius:10px;
  border:1.5px solid var(--line);background:var(--paper);cursor:pointer;
  font-size:12.5px;font-weight:700;color:var(--ink-soft);
  transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.cutoff-chip.active{border-color:var(--med);background:var(--med-soft);color:var(--med);}
.cutoff-chip small{display:block;font-weight:500;font-size:10.5px;opacity:.8;margin-top:2px;}

/* Half-life slider */
.slider-row{margin-bottom:18px;}
.slider-row .slider-value{
  font-family:'IBM Plex Mono',monospace;font-weight:700;color:var(--med);float:right;
}
input[type="range"]{
  width:100%;accent-color:var(--med);margin:8px 0 4px;cursor:pointer;
}
.slider-range-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-soft);}

/* Medical trust-badge already themed via .trust-badge.medical in style.css */

/* Summary grid for 3-cutoff check (✔ Below / ✘ Above) */
.cutoff-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
@media(max-width:500px){.cutoff-summary{grid-template-columns:1fr;}}
.cutoff-summary-card{
  background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:12px;text-align:center;
}
.cutoff-summary-card .cs-level{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;}
.cutoff-summary-card .cs-status{font-size:18px;font-weight:700;}
.cutoff-summary-card.safe .cs-status{color:var(--safe);}
.cutoff-summary-card.danger .cs-status{color:var(--danger);}

/* Line chart wrapper (ETG decay curve) — taller than the standard chart-wrap-tall */
.chart-wrap-line{position:relative;height:240px;width:100%;overflow:hidden;}

/* Multi-session timeline input (Advanced ETG Calculator) */
.session-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.session-row{
  display:grid;grid-template-columns:1fr 90px 32px;gap:8px;align-items:center;
  padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--paper);
}
.session-row input{margin-bottom:0;}
.session-future-warn{
  grid-column:1 / -1;margin:0;font-size:12.5px;line-height:1.4;font-weight:600;
  color:var(--warn, #8a6d00);
}
.session-row.is-future{border-color:var(--warn, #c4a000);}
.session-remove-btn{
  width:32px;height:32px;border-radius:8px;border:1.5px solid var(--danger);
  background:transparent;color:var(--danger);font-size:16px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease;
}
.session-remove-btn:hover{background:var(--danger);color:#fff;}
.session-add-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;width:100%;
  padding:10px;border-radius:10px;border:1.5px dashed var(--med);background:transparent;
  color:var(--med);font-size:13.5px;font-weight:700;cursor:pointer;margin-bottom:16px;
  transition:background .15s ease;
}
.session-add-btn:hover{background:var(--med-soft);}
@media(max-width:460px){
  .session-row{grid-template-columns:1fr 32px;grid-template-areas:"dt remove" "drinks remove" "warn warn";}
  .session-row .session-datetime{grid-area:dt;}
  .session-row .session-drinks{grid-area:drinks;}
  .session-row .session-remove-btn{grid-area:remove;align-self:center;}
  .session-row .session-future-warn{grid-area:warn;}
}

/* Informational note blocks (food/medication/hydration notes) */
.info-note{
  display:flex;gap:10px;padding:12px 14px;border-radius:10px;
  background:var(--med-soft);border-left:3px solid var(--med);
  font-size:13px;color:var(--ink-muted);line-height:1.55;margin:14px 0;
}
.info-note .info-note-icon{font-size:16px;flex-shrink:0;}

.tool-note{
  margin:12px 0 16px;
  padding:12px 14px;
  border-left:3px solid var(--gold);
  background:rgba(200,155,60,.08);
  border-radius:0 10px 10px 0;
  font-size:13.5px;
  color:var(--ink-soft);
  line-height:1.55;
}
.tool-note strong{
  display:block;
  margin:0 0 6px;
  font-size:12px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--navy);
}
.tool-note p{margin:0;}
.tool-note a{color:var(--trust);font-weight:600;}
.tool-note a:hover{text-decoration:underline;}
html[data-theme="dark"] .tool-note strong{color:var(--gold);}

#chemicalToggle{
  display:flex;
  flex-wrap:wrap;
  width:100%;
  margin:6px 0 0;
  box-sizing:border-box;
}
#chemicalToggle button{flex:1 1 auto;}
@media(max-width:480px){
  .tool-note{margin:8px 0 10px;padding:10px 12px;font-size:13px;}
  #chemicalToggle button{padding:8px 8px;font-size:12px;}
}

/* Three-stat-block row for Detection Time Calculator */
.stat-row-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
@media(max-width:500px){.stat-row-3{grid-template-columns:1fr;}}
.stat-row-3 .stat-block{margin-bottom:0;text-align:center;}
.stat-row-3 .stat-value{font-size:22px;}

/* Radio-style toggle for food intake (empty stomach / with food) */
.pill-toggle{display:flex;gap:8px;margin-bottom:18px;}
.pill-toggle label{
  position:relative;
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:10px;border-radius:10px;border:1.5px solid var(--line);
  font-size:12.5px;font-weight:700;color:var(--ink-soft);cursor:pointer;
  text-transform:none;margin-bottom:0;transition:border-color .15s ease,background .15s ease,color .15s ease;
}
.pill-toggle input{position:absolute;opacity:0;width:0;height:0;}
.pill-toggle label.active{border-color:var(--med);background:var(--med-soft);color:var(--med);}