/* Shared site chrome for generated calculators. Graph and Why canvases retain
   their own light surfaces so generated marks and source highlights stay legible. */
@import url("site.css");
body { color:var(--ink); background:var(--cream); font-family:var(--mono); max-width:1440px; padding:24px; color-scheme:dark; }
button, input, select { font:inherit; }
a { color:var(--focus); }
.calculator-context { display:flex; flex-wrap:wrap; align-items:baseline; gap:12px 24px; padding:0 0 20px; font-size:13px; }
.calculator-context details { margin-left:auto; max-width:65ch; }
.calculator-context summary { cursor:pointer; color:var(--ink-muted); }
.calculator-context p { margin:12px 0; }
.simulation-header { background:var(--cream-raised); border:1px solid var(--rule); border-top:3px solid var(--focus); border-radius:3px; color:var(--ink); padding:24px; box-shadow:none; }
.simulation-header h1 { font-size:clamp(24px,3vw,36px); letter-spacing:-.04em; }
.simulation-header p { color:var(--ink-muted); font-size:13px; max-width:100ch; }
.section { background:var(--cream-raised); border:1px solid var(--rule); border-radius:3px; box-shadow:none; min-width:0; }
.section-title { color:var(--ink); border-bottom:1px solid var(--rule); font-size:14px; text-transform:uppercase; letter-spacing:.08em; }
.output-card { color:var(--ink); background:var(--code-bg); border-left:2px solid var(--violet); border-radius:2px; }
.output-label { color:var(--ink-muted); }
.output-value { color:var(--focus); font-size:26px; }
.inputs-section { color-scheme:light; }
.inputs-section .section-title { color-scheme:dark; }
/* Input widgets and generated graph/Why detail views have explicit light-theme
   fills. Keep their inherited text dark, including menus and math controls. */
.input-row, .why-modal, #why-modal, .graph-card, .graph-output-card, .chart-container, .output-chart-container { color:#26343d; color-scheme:light; }
.outputs-grid { grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); }
@media(min-width:1000px) {
  body { display:grid; grid-template-columns:310px minmax(0,1fr); column-gap:20px; align-items:start; }
  .calculator-context, .simulation-header { grid-column:1/-1; }
  .inputs-section { position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; grid-column:1; }
  .inputs-section + .section { grid-column:2; }
}
@media(max-width:640px) {
  body { padding:12px; }
  .calculator-context { gap:10px 18px; padding-bottom:12px; }
  .calculator-context details { margin-left:0; width:100%; }
  .simulation-header { padding:18px; }
  .section { padding:14px; }
}

.why-button { background:#244f55; color:#91f2d9; border:1px solid #3e7d70; border-radius:3px; padding:6px 10px; }
.output-chart-toolbar button { background:#26343d; color:#dcebe8; border:1px solid #48616c; border-radius:3px; }