/* Shared appearance authority; layout lives in page stylesheets. */
/* Palette: neutral canvas and surfaces; teal for action/selection; amber for previews.
   Primary = execute; secondary = replay; neutral = inspect/edit/disclose.
   Category names carry meaning without requiring a distinct color for each. */
:root{color-scheme:light;--ink:#203036;--muted:#52646b;--paper:#f6f7f3;--surface:#fff;--surface-soft:#f2f5f1;--line:#d7dfe2;--accent:#116b61;--accent-soft:#e5f2ec;--configuration-surface:#e4eee8;--warning:#80591c;--warning-soft:#fff5df;--transfer:#5452a3}
body{background:var(--paper);color:var(--ink);font:16px/1.55 system-ui,sans-serif}
header{border-bottom:1px solid var(--line)}
header a{font-weight:650;text-decoration:none}
header .landing-links{font-size:13px;letter-spacing:0;color:var(--muted)}
header span{font:700 12px/1.5 system-ui;letter-spacing:.15em;color:var(--accent)}
a{color:var(--accent)}
a:hover{color:var(--action-hover)}
h1{font-size:clamp(32px,5vw,56px);line-height:1.07;letter-spacing:-.04em}
h2{font-size:25px;line-height:1.25;letter-spacing:-.025em}
h3{font-size:14px}
dt{font-size:12px;letter-spacing:.06em;font-weight:750;color:var(--accent)}
.muted{color:var(--muted);font-size:14px}
pre{font:14px/1.65 ui-monospace,monospace;background:#e8ede8;border-radius:5px}
select{font:inherit;border:1px solid #98aaa7;border-radius:4px;background:white}
input[type=range]{accent-color:var(--accent)}
#trace>div{background:white;border:1px solid var(--line);border-radius:5px}
summary{cursor:pointer}
footer{font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.playground{--green:var(--accent)}
.play-heading p{color:var(--muted)}
.play-heading h1{font-size:clamp(28px,3.5vw,40px);line-height:1.15;font-weight:650}
.pass-panel,.numerical-inspector{background:var(--surface);border:1px solid var(--line);border-radius:10px}
.playground .panel-heading h2{font-size:14px}
.binding-status,.run-outcome{font-size:12px;color:var(--muted)}
.binding-status[data-phase="dirty"],.binding-status[data-phase="failed"],.binding-status[data-phase="running"]{color:#935714}
#request-fields label{font-size:12px}
.inference-form textarea{font:14px/1.4 system-ui;border:1px solid #bdcec3;border-radius:6px}
#request-fields select{font-size:14px}
.system-settings{font-size:12px}
.playground .request-preview{background:var(--surface-soft);border:1px solid var(--line);border-radius:7px}
.request-preview strong{font-weight:500}
.request-preview small{font-size:12px;font-weight:600;color:var(--muted)}
.playground .token-chip{background:#f7f8f6;border-color:#e4e8e2;border-radius:4px;font-size:11px;font-weight:500}
.playground .token-chip strong{font-weight:500}
.playground .token-chip:hover{background:#eef3ef;border-color:#b6c9bd}
.playground .token-chip.active{background:#e7f1eb;border-color:#75a58e;outline:1px solid #75a58e;outline-offset:0}
.playground .token-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.token-chip small{font-size:9px;color:#68796f}
#pass-caption{font-size:11px;color:var(--muted)}
.active,.selected-object{outline:2px solid var(--accent);outline-offset:2px}
.event-record,.model-notes{font-size:12px}
.numerical-inspector .panel-heading>span{font-size:12px}
#definition{font-size:13px}
#inspection-context{font-size:11px;color:var(--muted)}
#run-error{color:#9f2b18;font-size:12px}
button:disabled{opacity:.5;cursor:not-allowed}
.table-scroll table{font-size:.85rem}
.table-scroll th,.table-scroll td{border-bottom:1px solid #e3e8e1}
.table-scroll th{background:#eff5ee}
.raw-values,#run-identity,#parameter-values{font-size:.8rem}
.heat-cell{border:0;border-radius:2px}
.heat-selected{outline:1px solid #0f5243;outline-offset:-1px}
.equation{background:#f2f6ef;font-family:monospace}
.execution-journey{border-top:1px solid var(--line)}
.execution-heading h2{font-size:16px;font-weight:650}
.execution-heading>span{font-size:12px;color:var(--muted)}
#execution-edges path{fill:none;stroke:#749c8c;stroke-width:1.5}
#execution-edges polygon{fill:#749c8c}
.execution-path>li>button{font-size:12px;line-height:1.2}
.playground .configuration-card{border:1px solid #bfd5c9;border-radius:9px;background:var(--configuration-surface);color:var(--ink)}
.configuration-card>strong{font-size:20px;line-height:1.2;font-weight:650}
.configuration-card>small{font-size:13px;font-weight:400;color:var(--muted)}
.playground dialog{border:1px solid #cbd7cf;border-radius:16px;color:var(--ink)}
.playground dialog::backdrop{background:#15293b80}
.playground dialog h2{font-size:22px}
.configuration-fields fieldset{border:1px solid #d5dfd8;border-radius:8px}
.configuration-fields legend{font-size:14px;font-weight:650;color:#396657}
.configuration-fields label{font-size:13px}
.configuration-fields a{font-size:12px}
.configuration-fields textarea,.configuration-fields select,.configuration-fields input{font:14px system-ui;border:1px solid #98aaa7;border-radius:5px}

.execution-path>li.configuration-changed>button{border:2px solid var(--warning);background:var(--warning-soft)}
.execution-path>li.configuration-changed::after{font-size:11px;color:#805d26}
#client-boundary{border-radius:8px}
#client-boundary.configuration-changed{outline:2px solid var(--warning);background:var(--warning-soft)}
#client-boundary.configuration-changed::after{font-size:11px;color:#805d26}
.source-editor{font-size:12px}
.source-editor textarea{font:14px system-ui;border:1px solid #bdcec3;border-radius:6px}
#workload-boundary.configuration-changed{border-left:3px solid var(--warning);background:#fffaf0}

:root{--action:var(--accent);--action-hover:#0b514a;--action-text:#fff;--control-border:#a9b9be;--control-surface:var(--surface);--control-text:var(--ink);--control-radius:6px;--control-font:600 13px/1.4 system-ui}
button{font:var(--control-font);border:1px solid var(--control-border);border-radius:var(--control-radius);background:var(--control-surface);color:var(--control-text);cursor:pointer}
button:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent)}
button:disabled{opacity:.5;cursor:not-allowed}
button:focus-visible{outline:2px solid var(--action);outline-offset:3px}
button.primary{background:var(--action);color:var(--action-text);border-color:var(--action)}
button.primary:hover:not(:disabled){background:var(--action-hover);border-color:var(--action-hover)}
button.secondary{background:var(--surface);border-color:var(--accent);color:var(--accent)}
button.secondary:hover:not(:disabled),button.secondary[aria-pressed=true]{background:var(--accent-soft)}
button[aria-expanded=true]{border-color:var(--accent)}
.heat-cell{background:rgb(20 125 105 / calc(.06 + .94 * var(--heat-strength)))}
#execution-edges{pointer-events:none}
#execution-edges path{marker-end:url(#path-arrow)}
.execution-path{list-style:none}
.playground .configuration-card:hover{background:var(--accent-soft);border-color:var(--accent)}
.playground dialog::backdrop{backdrop-filter:blur(3px)}
.execution-path>li.configuration-changed::after{content:attr(data-configuration)}
#client-boundary.configuration-changed::after{content:attr(data-configuration)}
a{text-underline-offset:4px}
dt{text-transform:uppercase}


.configuration-indicator{font-size:24px;font-weight:400;color:var(--muted)}
.configuration-card:hover .configuration-indicator{color:var(--accent)}
.reference-index>section{border-top:1px solid var(--line)}
.reference-index article{background:var(--surface);border:1px solid var(--line);border-radius:7px}

#client-boundary.has-output{background:var(--accent-soft);border-color:#bfd5c9}
.execution-path button.selected-object{background:var(--accent-soft)}
/* Model-family lab reuses the shared action hierarchy and semantic colors. */

/* One hierarchy, two projections: controls and explanations. */
.map-node{border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.map-node>button{font-weight:600;border:0;background:transparent;color:var(--ink)}
.map-node>button:hover,.map-node>button:focus-visible{background:var(--accent-soft)}
.map-node>button[aria-expanded=true]{color:var(--accent)}
.map-node>button:not(:disabled)::after{content:'▸';float:right}
.map-node>button[aria-expanded=true]::after{content:'▾'}
.map-description>summary{font-size:12px;color:var(--muted);cursor:pointer}
.map-description>p{font-size:14px}
/* First principles: rendered equation, then symbols and executed code on demand. */
.principle{border-left:2px solid var(--accent);padding:2px 0 2px 12px;margin:10px 0}
.principle-variant{font-size:12px;color:var(--muted);margin:0}
.principle-equation{overflow-x:auto;overflow-y:hidden;max-width:100%}
.principle dl{display:grid;grid-template-columns:max-content 1fr;align-items:baseline;gap:4px 12px;font-size:13px;margin:6px 0}
/* Symbols are case-sensitive mathematics, not labels. */
.principle dt{text-transform:none;letter-spacing:0;font-weight:400;margin:0;color:var(--ink)}
.principle dd{margin:0;color:var(--muted)}
.principle summary{font-size:12px;color:var(--muted);cursor:pointer}
.principle-code pre{overflow-x:auto;font-size:12px;background:var(--surface-soft);border:1px solid var(--line);border-radius:6px;padding:8px;margin:6px 0}
#principle-view:empty{display:none}
/* Experiments: declared settings plus an abstraction contract. */
#experiments{display:grid;gap:8px;margin:0 0 16px}
#experiments>h3{margin:0;font-size:14px}
.experiment{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:8px 12px;margin:0}
.experiment>summary{cursor:pointer;display:flex;gap:8px;justify-content:space-between;align-items:baseline}
.experiment-status{font-size:12px;color:var(--muted)}
.experiment details{margin:8px 0 0}
.experiment-missing{font-size:13px;color:var(--warning)}
.experiment dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 12px;font-size:13px}
.experiment dt{text-transform:none;letter-spacing:0;font-weight:600;margin:0;color:var(--ink)}
.experiment dd{margin:0;color:var(--muted)}
@media (max-width:520px){.experiment dl{grid-template-columns:1fr}}
.map-node>button:disabled{color:var(--muted);background:var(--surface-soft)}
.map-node[data-view=engine]{border-color:var(--accent)}
.map-root{border:0;background:transparent}
.map-root>.map-body>p,.map-root>.map-body>.map-links{font-size:13px;color:var(--muted)}
.map-links,.map-relations{font-size:12px}
.map-relations{border-top:1px solid var(--line);padding-top:8px}
.map-relations a{color:var(--muted)}

#numerics>summary{font-weight:600;cursor:pointer;color:var(--accent)}
.token-readout{border-right:1px solid var(--line);font-size:12px}
.token-readout strong{font-weight:500}
.token-readout small{color:var(--muted);font-size:10px}