/* Aurith Journal — calculator pages (site/tools/*). Loaded after base.css; additions only. */

/* Several base classes set display, which would otherwise beat the hidden attribute. */
[hidden] { display: none !important; }

/* The calculator sits directly under the opening, above the fold. */
.opening.opening-tool { padding-bottom: clamp(24px, 3vw, 38px); }
.opening.opening-tool .lead { margin-top: 18px; }
.opening-tool + .plate.plate-calc { padding-top: 0; border-top: none; padding-bottom: clamp(40px, 5vw, 64px); }
.plate.plate-tight { padding: clamp(40px, 5.2vw, 72px) 0; }

/* ─── Calculator internals ───────────────────────────────────────────── */

.calc-in .form-grid { gap: 16px 18px; }
.field-wide { grid-column: 1 / -1; }
.field .segmented { margin-top: 1px; }
.segmented .chip { flex: 0 1 auto; }
.calc-tabs { padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.calc-tabs .chip { padding: 9px 13px; }
.calc-in .check { align-self: start; }
.calc-in > .hint { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.input:disabled { color: var(--ink-3); border-color: var(--rule); cursor: not-allowed; background-color: rgba(12, 29, 58, 0.5); }
.input-unit > span { max-width: 44px; overflow: hidden; }

.calc-out > .calc-error { margin-bottom: 16px; }
.calc-out > .calc-error[hidden] + .result { padding-top: 0; }
.calc-out .result-group { display: grid; }
.calc[data-state='error'] .result-figure,
.calc[data-state='error'] .result-value { color: var(--ink-3); }
.calc[data-state='stale'] .result-figure,
.calc[data-state='stale'] .result-value { color: var(--ink-3); }

.result-figure.up, .result-value.up { color: var(--up); }
.result-figure.down, .result-value.down { color: var(--down); }
.result-pair { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.result-figure .unit { font-size: 0.42em; letter-spacing: 0.06em; color: var(--ink-3); margin-left: 6px; }
.result .gauge { margin-top: 8px; }

.calc-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.calc-status { font-size: 13px; color: var(--ink-3); }

/* ─── Growth chart (compounding) ─────────────────────────────────────── */

.chart-block { margin-top: 26px; }
.chart-block .chart { overflow: visible; }
.chart .grid-line { stroke: var(--rule-2); stroke-width: 1; }
.chart .base-line { stroke: var(--rule-3); stroke-width: 1; stroke-dasharray: 4 5; }
.chart .series { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart .series-fill { fill: var(--gold-ghost); stroke: none; }
.chart .dot { fill: var(--gold); }
.chart text { font-family: var(--mono); font-size: 11px; fill: var(--ink-3); }

/* ─── Content plates ─────────────────────────────────────────────────── */

.prose .formula { margin: 14px 0 16px; }
.prose .table-wrap { margin: 14px 0 6px; }
.prose table.record td, .prose table.record th { font-size: 14px; }
.prose table.record td { line-height: 1.5; }
.example + .example { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--rule); }
.notice.mt-24 .plain + .plain { margin-top: 8px; }
.tools-list .item-note { max-width: 70ch; }
details.table-details > summary {
  cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); padding: 12px 0; list-style: none;
}
details.table-details > summary::-webkit-details-marker { display: none; }
details.table-details > summary::before { content: '+ '; }
details.table-details[open] > summary::before { content: '− '; }