:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #1f2937;
  background: #eef1f5;
  --border: #d7dce2;
  --panel: #ffffff;
  --muted: #667085;
  --blue: #2563eb;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: #eef1f5; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button { border: 1px solid #1d4ed8; background: var(--blue); color: white; border-radius: .5rem; padding: .42rem .65rem; }
button.secondary { background: white; color: #344054; border-color: var(--border); }
button.icon-button { border: 0; background: transparent; color: #667085; font-size: 1.5rem; padding: .1rem .4rem; }

.app { min-height: 100vh; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .7rem 1rem; background: #fff; border-bottom: 1px solid var(--border); }
.topbar h1 { margin: 0; font-size: 1.22rem; }
.topbar p { margin: .12rem 0 0; color: var(--muted); font-size: .82rem; }
.top-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.language-switcher { display: inline-flex; gap: .15rem; align-items: center; }
.language-button { border: 1px solid var(--border); background: white; color: #344054; border-radius: .45rem; padding: .2rem .32rem; font-size: .95rem; line-height: 1; min-width: 2rem; }
.language-button.active { border-color: #93c5fd; background: #eff6ff; box-shadow: inset 0 0 0 1px #bfdbfe; }
.language-button:focus-visible { outline: 2px solid #60a5fa; outline-offset: 1px; }

.main-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; padding: .75rem; }
.main-layout.with-sidebar { grid-template-columns: minmax(0, 1fr) 300px; }
.content { min-width: 0; }
.hidden { display: none !important; }

.canvas-card { height: var(--canvas-height, clamp(360px, 70vh, 820px)); border: 1px solid var(--border); border-radius: .75rem; background: #fff; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.05); }
canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.controls { margin-top: .55rem; padding: .65rem .75rem; background: #fff; border: 1px solid var(--border); border-radius: .75rem; display: flex; flex-direction: column; gap: .55rem; }
.row { display: flex; align-items: center; gap: .5rem; }
.row.wrap { flex-wrap: wrap; row-gap: .35rem; }
.row label, .row strong { font-size: .88rem; }
.grow { flex: 1; min-width: 140px; }
.small-number { width: 92px; }
select, input[type="number"] { min-height: 2.15rem; border: 1px solid var(--border); border-radius: .45rem; background: #fff; padding: .3rem .45rem; }
.check { display: inline-flex; align-items: center; gap: .3rem; font-weight: 450 !important; }
.numeric-readout { width: 3.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.heighway-inline {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex: 1 1 240px;
  min-width: 210px;
  white-space: nowrap;
}
.heighway-inline.hidden { display: none; }
.heighway-slider {
  width: auto;
  flex: 1 1 auto;
  min-width: 120px;
  accent-color: #f59e0b;
}
.heighway-inline .numeric-readout { width: 2rem; text-align: right; }
.hint { color: var(--muted); font-size: .78rem; margin-top: -.3rem; }
.epicycle-row { border-top: 1px solid var(--border); padding-top: .55rem; }

.saved-panel, .info-panel { background: #fff; border: 1px solid var(--border); border-radius: .75rem; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.saved-panel { max-height: calc(100vh - 2rem); }
.saved-panel.hidden, .info-panel.hidden { display: none; }
.saved-header { display: flex; justify-content: space-between; gap: .5rem; padding: .9rem; border-bottom: 1px solid var(--border); }
.saved-header h2 { margin: 0; font-size: 1rem; }
.saved-header p { margin: .2rem 0 0; color: var(--muted); font-size: .78rem; }
.saved-list { flex: 1; overflow: auto; padding: .65rem; }
.saved-empty { color: var(--muted); font-size: .88rem; padding: .5rem; }
.saved-item { padding: .65rem; border: 1px solid var(--border); border-radius: .55rem; margin-bottom: .5rem; }
.saved-item.selected { outline: 2px solid #93c5fd; }
.saved-name { font-weight: 650; overflow-wrap: anywhere; }
.saved-meta { color: var(--muted); font-size: .76rem; margin-top: .2rem; }
.saved-actions { display: flex; gap: .35rem; margin-top: .55rem; }
.saved-actions button { font-size: .78rem; padding: .35rem .5rem; }
.saved-panel > button:last-child { margin: .65rem; }

.dialog-card { min-width: min(90vw, 360px); padding: .2rem; display: flex; flex-direction: column; gap: .7rem; }
.dialog-card h2 { margin: 0; font-size: 1.05rem; }
.dialog-card input { border: 1px solid var(--border); border-radius: .45rem; padding: .55rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; }
dialog { border: 0; border-radius: .75rem; padding: 1rem; box-shadow: 0 12px 40px rgba(16,24,40,.2); }
dialog::backdrop { background: rgba(16,24,40,.35); }

@media (max-width: 900px) {
  .topbar { align-items: flex-start; flex-direction: column; }
  .main-layout.with-sidebar { grid-template-columns: minmax(0, 1fr); }
  .saved-panel { max-height: 420px; }
}


.info-panel { border: 1px solid var(--border); border-radius: .75rem; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; align-self: start; }
.info-panel-body { flex: 1; min-height: 0; overflow: auto; padding: .85rem .9rem; }
.info-section + .info-section { border-top: 1px solid var(--border); margin-top: .9rem; padding-top: .8rem; }
.info-section h3 { margin: 0 0 .45rem; font-size: .94rem; }
.info-section h4 { margin: .2rem 0 .35rem; font-size: .9rem; }
.info-section p { margin: .35rem 0; color: #344054; font-size: .83rem; line-height: 1.5; white-space: pre-line; }
.info-section .info-muted { color: var(--muted); font-size: .76rem; }
.info-formula { overflow-x: auto; overflow-wrap: normal; text-align: center; border: 1px solid #dbeafe; background: #eff6ff; color: #1e3a8a; padding: .5rem .55rem; border-radius: .45rem; margin: .35rem 0; font: 500 .82rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.info-formula mjx-container { max-width: 100%; }
.coefficient-plot-wrap { border: 1px solid #e4e7ec; border-radius: .5rem; background: #fff; padding: .25rem; min-width: 0; }
#coefficientSpectrum { display: block; width: 100%; height: auto; overflow: visible; color: #344054; }
#coefficientSpectrum text { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#coefficientSpectrum .spectrum-grid { stroke: #e7eaf0; stroke-width: 1; }
#coefficientSpectrum .spectrum-axis { stroke: #98a2b3; stroke-width: 1.1; }
#coefficientSpectrum .spectrum-tick-label { fill: #667085; font-size: 10px; }
#coefficientSpectrum .spectrum-axis-label { fill: #475467; font-size: 11px; font-weight: 600; }
#coefficientSpectrum .spectrum-empty { fill: #667085; font-size: 12px; text-anchor: middle; }
#coefficientSpectrum .spectrum-positive { stroke: #2563eb; fill: #2563eb; }
#coefficientSpectrum .spectrum-negative { stroke: #f97316; fill: #f97316; }
#coefficientSpectrum .spectrum-stem { stroke-width: 1.45; stroke-linecap: round; }
#coefficientSpectrum .spectrum-point { stroke: none; }
#coefficientSpectrum .spectrum-coefficient { cursor: pointer; outline: none; }
#coefficientSpectrum .spectrum-coefficient:focus-visible { filter: drop-shadow(0 0 2px #111827); }
#coefficientSpectrum .spectrum-hit-target { stroke: transparent; stroke-width: 10; pointer-events: stroke; }
#coefficientSpectrum .spectrum-hit-marker { fill: transparent; stroke: none; pointer-events: all; }
#coefficientSpectrum .spectrum-coefficient .spectrum-stem,
#coefficientSpectrum .spectrum-coefficient .spectrum-point { pointer-events: none; }
#coefficientSpectrum .spectrum-coefficient.is-selected .spectrum-stem { stroke: #c026d3; stroke-width: 2.8; }
#coefficientSpectrum .spectrum-coefficient.is-selected .spectrum-point { fill: #c026d3; }
#coefficientSpectrum .spectrum-coefficient.is-hovered .spectrum-stem { stroke: #111827; stroke-width: 2.7; }
#coefficientSpectrum .spectrum-coefficient.is-hovered .spectrum-point { fill: #111827; }
.coefficient-inspector { margin-top: .55rem; padding: .55rem .1rem .1rem; border-top: 1px solid #eef0f3; }
.coefficient-inspector-header { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.coefficient-inspector-header h4 { margin: 0; font-size: .84rem; }
.coefficient-clear-button { padding: .24rem .38rem; font-size: .68rem; white-space: nowrap; }
.coefficient-inspector-status { margin: .35rem 0 !important; }
.coefficient-inspector-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; margin: .45rem 0; }
.coefficient-inspector-details > div { min-width: 0; background: #f8fafc; border: 1px solid #eef0f3; border-radius: .4rem; padding: .35rem .4rem; }
.coefficient-inspector-details dt { color: var(--muted); font-size: .68rem; }
.coefficient-inspector-details dd { margin: .12rem 0 0; font-size: .78rem; font-weight: 650; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.coefficient-inspector-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.coefficient-inspector-actions button { flex: 1 1 auto; padding: .32rem .42rem; font-size: .7rem; }
.coefficient-inspector button:disabled { opacity: .45; cursor: not-allowed; }
.info-stats { margin: .15rem 0 0; }
.info-stats > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, auto); gap: .5rem; padding: .38rem 0; border-bottom: 1px solid #eef0f3; font-size: .8rem; }
.info-stats > div:last-child { border-bottom: 0; }
.info-stats dt { color: var(--muted); }
.info-stats dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }


/* Experimental coefficient-transform controls. Kept collapsed by default so the
   regular educational Info panel remains uncluttered unless the user opens it. */
.coefficient-lab { margin-top: .8rem; border: 1px solid #dbeafe; border-radius: .55rem; background: #f8fbff; padding: .55rem; }
.coefficient-lab > summary { cursor: pointer; font-size: .86rem; font-weight: 700; color: #1d4ed8; }
.coefficient-lab > summary:focus-visible { outline: 2px solid #60a5fa; outline-offset: 3px; border-radius: .2rem; }
.coefficient-lab > p:first-of-type { margin: .45rem 0 .6rem; }
.coefficient-lab-block { border-top: 1px solid #e4e7ec; padding: .55rem 0; display: flex; flex-direction: column; gap: .35rem; }
.coefficient-lab-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.coefficient-lab-copy { min-width: 0; }
.coefficient-lab-copy strong { display: block; font-size: .8rem; }
.coefficient-lab-copy p { margin: .2rem 0 0 !important; }
.coefficient-lab-row button, .coefficient-lab-actions button, .coefficient-lab-footer button { font-size: .72rem; padding: .34rem .48rem; }
.coefficient-lab-row button[aria-pressed="true"], .coefficient-lab-actions button[aria-pressed="true"] { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; box-shadow: inset 0 0 0 1px #bfdbfe; }
.coefficient-lab-slider-row { display: flex; align-items: center; gap: .5rem; }
.coefficient-lab-slider-row input[type="range"] { flex: 1; min-width: 0; accent-color: #2563eb; }
.coefficient-lab-slider-row output { min-width: 3.2rem; text-align: right; font-size: .76rem; font-variant-numeric: tabular-nums; }
.coefficient-lab-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.coefficient-lab-actions button { flex: 1 1 auto; }
.coefficient-lab-status { padding: .4rem .45rem; margin: .2rem 0 !important; border-radius: .35rem; background: #fff; border: 1px solid #e4e7ec; }
.coefficient-lab-footer { display: flex; justify-content: flex-end; }
.coefficient-lab button:disabled { opacity: .45; cursor: not-allowed; }
#coefficientSpectrum .spectrum-coefficient.is-marked-zero .spectrum-stem { stroke: #b91c1c; stroke-width: 2.8; stroke-dasharray: 3 2; }
#coefficientSpectrum .spectrum-coefficient.is-marked-zero .spectrum-point { fill: #b91c1c; stroke: #fff; stroke-width: 1.2; }
#coefficientSpectrum .spectrum-coefficient.is-zeroed:not(.is-marked-zero) .spectrum-stem { stroke: #b91c1c; stroke-dasharray: 2 2; opacity: .65; }
#coefficientSpectrum.coefficient-zero-mode .spectrum-coefficient { cursor: crosshair; }
@media (max-width: 480px) {
  .coefficient-lab-row { align-items: stretch; flex-direction: column; }
  .coefficient-lab-row button { align-self: flex-start; }
}

/* Compact controls for global coefficient transformations. */
.coefficient-lab-check {
  display: flex;
  align-items: flex-start;
  gap: .45rem;
  font-size: .78rem;
  font-weight: 600;
}
.coefficient-lab-check input { margin-top: .16rem; accent-color: #2563eb; }
.coefficient-lab-field-label { font-size: .76rem; font-weight: 600; }
.coefficient-lab-select { width: 100%; max-width: 100%; min-height: 2.15rem; padding: .35rem .45rem; border: 1px solid var(--border); border-radius: .45rem; background: #fff; }
.coefficient-lab-filter-bounds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.coefficient-lab-bound { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.coefficient-lab-bound label { font-size: .73rem; color: #344054; }
.coefficient-lab-bound input { width: 100%; max-width: 100%; box-sizing: border-box; }
.coefficient-lab-slider-caption { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.coefficient-lab-slider-caption label { font-size: .76rem; font-weight: 600; }
.coefficient-lab-slider-caption output { font-size: .76rem; font-variant-numeric: tabular-nums; color: #344054; }
.coefficient-lab-operation-order { border-left: 3px solid #93c5fd; padding-left: .5rem; }
@media (max-width: 480px) {
  .coefficient-lab-filter-bounds { grid-template-columns: minmax(0, 1fr); }
}
.coefficient-lab-subgroup { border-top: 1px solid #d9e2f0; margin-top: .45rem; padding-top: .45rem; }
.coefficient-lab-subgroup > summary { cursor: pointer; font-size: .79rem; font-weight: 700; color: #344054; padding: .15rem 0; }
.coefficient-lab-subgroup > summary:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; border-radius: .2rem; }
.coefficient-lab-subgroup > .coefficient-lab-block:first-of-type { border-top: 0; }