/* calculator.css — input system, result panel, formula, educational disclosure */

.calc-head { padding-block: var(--s-6) var(--s-6); }
.calc-head__kind { color: var(--c-accent); }
.calc-head__title { font-size: var(--t-xl); margin: var(--s-3) 0; letter-spacing: -0.03em; }
.calc-head__purpose { color: var(--c-ink-soft); max-width: 60ch; line-height: 1.5; }

/* ---- input system ---- */
.calc-inputs {
  background: var(--c-surface); border: 1px solid var(--c-hair-strong); border-radius: var(--r-lg);
  padding: var(--s-6); box-shadow: var(--shadow-rest);
}
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: var(--s-5); }
.field-grid--top { align-items: start; }
.field-grid--2col { grid-template-columns: 1fr 1fr; }
.field__hint { font-size: var(--t-xs); color: var(--c-ink-faint); line-height: 1.5; }
.field__hint--block { margin-top: var(--s-2); }
.field { display: grid; gap: var(--s-2); }
.field__label { font-size: var(--t-sm); font-weight: var(--w-med); color: var(--c-ink-soft); }
.field__wrap { display: flex; align-items: stretch; border: 1px solid var(--c-hair-strong); border-radius: var(--r-sm); background: var(--c-surface); overflow: hidden;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.field__wrap:focus-within { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-wash); }
.field__prefix, .field__suffix { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--c-ink-faint); padding: 0 var(--s-3); background: var(--c-surface-sunk); display: flex; align-items: center; }
.field__input { flex: 1; min-width: 0; border: none; background: transparent; padding: var(--s-3); font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: var(--t-md); }
.field__input:focus { outline: none; }
.field__input[aria-invalid="true"] { color: var(--c-neg); }
.field__error { font-size: var(--t-xs); color: var(--c-neg); min-height: 1em; font-family: var(--f-mono); }
.calc-actions { display: flex; gap: var(--s-3); margin-top: var(--s-6); }

/* ---- result panel: value left, comparison chart right (no wasted space) ---- */
.result {
  margin-top: var(--s-5); background: var(--c-surface); color: var(--c-ink);
  border: 1px solid var(--c-hair); border-radius: var(--r-lg); padding: var(--s-6);
  position: relative; overflow: hidden; box-shadow: var(--shadow-lift);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-7);
}
.result::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--c-accent); opacity: 0.9; }
.result__main { min-width: 0; }
.result__label { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-ink-faint); }
.result__value { font-family: var(--f-mono); font-size: var(--t-num); font-weight: var(--w-semi); letter-spacing: -0.04em; line-height: 1; margin: var(--s-4) 0 var(--s-3); font-variant-numeric: tabular-nums; color: var(--c-ink);
  transition: opacity var(--dur-1) var(--ease); }
.result.is-updating .result__value { opacity: 0.5; }
/* sample-size value carries a 'users' unit from JS — keep it on one line */
[data-calc="ab-sample-size"] .result__value { font-size: clamp(2.2rem, 4.5vw, 3.2rem); white-space: nowrap; }
.result__band { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--f-mono); font-size: var(--t-sm); font-weight: var(--w-med); }
.result__band[data-band="low"] { color: var(--c-band-low); }
.result__band[data-band="average"] { color: var(--c-band-avg); }
.result__band[data-band="strong"] { color: var(--c-band-strong); }
.result__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent); }

/* ---- comparison bar chart (You / Median / Top) ---- */
.result__viz { flex: none; width: min(48%, 380px); }
.viz-cols { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5); height: 132px; }
.viz-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--s-2); height: 100%; }
.viz-col__val { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-ink-soft); }
.viz-col__bar { width: 100%; max-width: 56px; height: var(--h, 100%); border-radius: 6px 6px 0 0; background: var(--c-surface-sunk); border: 1px solid var(--c-hair-strong); transition: height var(--dur-4) var(--ease-out); }
.viz-col__name { font-family: var(--f-mono); font-size: var(--t-xs); color: var(--c-ink-faint); }
.viz-col--user .viz-col__bar { background: var(--c-accent); border-color: var(--c-accent); }
.viz-col--user .viz-col__val, .viz-col--user .viz-col__name { color: var(--c-accent); font-weight: var(--w-semi); }
.viz-col--median .viz-col__bar { background: var(--c-ink-faint); border-color: var(--c-ink-faint); }

/* fallback when a meaningful scale can't be built */
.viz-flat { display: grid; gap: var(--s-3); }
.viz-flat__cell { display: flex; justify-content: space-between; gap: var(--s-4); font-family: var(--f-mono); font-size: var(--t-sm); }
.viz-flat__cell span { color: var(--c-ink-faint); }

@media (max-width: 620px) {
  .result { flex-direction: column; align-items: stretch; gap: var(--s-6); }
  .result__viz { width: 100%; }
  .viz-cols { height: 116px; }
}

/* ---- formula block (sunk surface, no hard border) ---- */
.formula { margin-top: var(--s-5); border-radius: var(--r-md); background: var(--c-surface-sunk); box-shadow: var(--shadow-inset); padding: var(--s-5); }
.formula__label { font-family: var(--f-mono); font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-ink-faint); margin-bottom: var(--s-3); }
.formula__eq { font-family: var(--f-mono); font-size: var(--t-md); color: var(--c-ink); }
.formula__worked { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--c-ink-soft); margin-top: var(--s-3); padding-top: var(--s-3); border-top: var(--hair); }

/* ---- educational progressive disclosure (SEO depth, secondary visual weight) ---- */
.learn { margin-top: var(--s-7); }
.learn__title { font-size: var(--t-lg); letter-spacing: -0.02em; }
.learn__sub { color: var(--c-ink-faint); font-size: var(--t-sm); margin-top: var(--s-1); }
.disclose { margin-top: var(--s-4); display: grid; gap: var(--s-3); }
.panel { border: 1px solid var(--c-hair); border-radius: var(--r-md); background: var(--c-surface); box-shadow: var(--shadow-flat); overflow: hidden; transition: border-color var(--dur-2) var(--ease); }
.panel[open] { border-color: var(--c-hair-strong); }
.panel > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); font-weight: var(--w-med); font-family: var(--f-display); letter-spacing: -0.01em; }
.panel > summary::-webkit-details-marker { display: none; }
.panel > summary:hover { color: var(--c-accent); }
.panel__icon { flex: none; width: 18px; height: 18px; color: var(--c-ink-faint); transition: transform var(--dur-3) var(--ease), color var(--dur-1) var(--ease); }
.panel[open] .panel__icon { transform: rotate(90deg); color: var(--c-accent); }
.panel__body { padding: 0 var(--s-5) var(--s-5); color: var(--c-ink-soft); font-size: var(--t-sm); line-height: 1.6; }
.panel[open] .panel__body { animation: disclose var(--dur-3) var(--ease-out); }
@keyframes disclose { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.panel__body p + p { margin-top: var(--s-3); }
.panel__body strong { color: var(--c-ink); font-weight: var(--w-semi); }

/* bench mini-table inside a panel */
.bench-table { width: 100%; border-collapse: collapse; margin-top: var(--s-2); font-family: var(--f-mono); font-size: var(--t-xs); }
.bench-table th, .bench-table td { text-align: left; padding: var(--s-2) var(--s-3); border-bottom: var(--hair); }
.bench-table th { color: var(--c-ink-faint); font-weight: var(--w-med); letter-spacing: 0.06em; text-transform: uppercase; }
.bench-table td:last-child, .bench-table th:last-child { text-align: right; }