/* THE FORGE: Confidence Intervals. What this app adds to forge.css:
   the Shiny inputs, the results grid, the validity notes, and the R console. */

/* ---------- sidebar inputs ---------- */
.sidebar hr { border: none; border-top: 1px solid var(--border); margin: 16px 0 4px; }
.sidebar input[type=number] {
  width: 100%; background: #404040; color: var(--warm-white); border: 1px solid #555; border-radius: 4px;
  font: inherit; font-size: 0.92em; padding: 6px 10px;
}
.sidebar input[type=number]:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(197,165,90,0.25); }
.sidebar .group { font-weight: 600; color: var(--gold); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.3px; margin: 14px 0 0; }
.sidebar .group + label { margin-top: 6px; }
.radio-row { display: flex; gap: 14px; flex-wrap: wrap; }
.radio-col { display: flex; flex-direction: column; }
.radio-row .check, .radio-col .check { margin: 4px 0; }
.sidebar label.check { color: var(--warm-white); font-weight: 400; font-size: 0.88em; text-transform: none; letter-spacing: 0; }
.check input[type=radio] { accent-color: var(--gold); width: 16px; height: 16px; }
.sidebar .btn { width: 100%; margin-top: 12px; }
.slider-val { color: var(--gold); font-weight: 700; font-size: 0.95em; }

/* ---------- layout: plots 8 columns, results 4 ---------- */
.c8 { grid-column: span 8; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.c4 { grid-column: span 4; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (max-width: 1100px) { .c8, .c4 { grid-column: span 12; } }
.main { padding-bottom: 80px; min-width: 0; }   /* room for the Blueprint button; wide math scrolls inside its card */
.tab.active { grid-template-columns: 290px minmax(0, 1fr); }
@media (max-width: 960px) { .tab.active { grid-template-columns: minmax(0, 1fr); } }

/* ---------- results ---------- */
.ht-results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 4px 0; }
.ht-metric-box { padding: 10px 8px; border-radius: 6px; text-align: center; background: rgba(255,255,255,0.04); border: 1px solid var(--border); }
.ht-metric-label { color: var(--muted); font-weight: 600; font-size: 0.7em; letter-spacing: 0.3px; margin-bottom: 4px; }
.ht-metric-value { color: var(--warm-white); font-weight: 700; font-size: 1.05em; font-family: "SF Mono", "Fira Code", ui-monospace, monospace; }
@media (max-width: 480px) { .ht-results-grid { grid-template-columns: 1fr; } }

.ci-interval { text-align: center; padding: 8px 0; }
.ci-interval-display { color: var(--gold); font-size: 1.3em; font-weight: 800; font-family: "SF Mono", "Fira Code", ui-monospace, monospace; padding: 4px 0; letter-spacing: 0.5px; }
.ci-interval p { color: var(--muted); font-size: 0.9em; margin: 6px 0 0; }

.ht-validity { padding: 10px 14px; border-radius: 6px; font-size: 0.85em; margin: 4px 0; }
.ht-validity-pass { background: rgba(76,175,80,0.1); border-left: 3px solid var(--green); color: var(--green); }
.ht-validity-warn { background: rgba(232,114,58,0.1); border-left: 3px solid var(--ember); color: var(--ember); }
.welch-df { font-size: 0.85em; color: var(--muted); margin-bottom: 4px; }

.formulas { font-size: 1.05em; line-height: 2; overflow-x: auto; }
.ci-err { color: var(--muted); font-size: 0.9em; padding: 8px 0; }

/* ---------- critical values ---------- */
.forge-r-code {
  background: var(--dark-bg); border: 1px solid var(--border); border-radius: 6px; padding: 16px 20px; margin: 0;
  font-family: "SF Mono", "Fira Code", ui-monospace, monospace; font-size: 1.05em; line-height: 1.8; overflow-x: auto; color: var(--warm-white);
}
.forge-r-code .prompt { color: var(--steel); user-select: none; }
.r-note { color: var(--muted); font-size: 0.85em; margin: 8px 0 0; }
.r-note code, .ref-table code { color: var(--gold); }
.steps { color: var(--warm-white); font-size: 0.95em; line-height: 2.2; }

.ref-table { width: 100%; border-collapse: collapse; color: var(--warm-white); font-size: 0.95em; }
.ref-table th { padding: 8px 12px; text-align: left; border-bottom: 2px solid var(--gold); color: var(--gold); font-size: 0.8em; letter-spacing: 0.3px; }
.ref-table td { padding: 6px 12px; font-family: "SF Mono", "Fira Code", ui-monospace, monospace; border-top: 1px solid var(--border); }
.ref-table tr.here td { color: var(--gold); font-weight: 700; }
.ref-table .rcode { font-size: 0.85em; }
.ref-table .rcode.t code { color: var(--muted); }
.table-wrap { overflow-x: auto; }