/* Shared model chrome only. Plot palettes and canvas color tokens stay independent. */
:root .decision-surface{
 --model-card-bg:#edf2e7;
 --model-panel-bg:var(--soft);
 --model-control-bg:var(--paper);
 --model-control-hover:color-mix(in srgb,var(--green) 10%,var(--model-control-bg));
 background:var(--model-card-bg);
 border-color:var(--line);
 color:var(--ink);
}
:root[data-theme=dark] .decision-surface{--model-card-bg:var(--surface)}
:root .decision-surface :is(.decision-control-group,.decision-belief,.decision-playback-row),
:root .circ-surface :is(.circ-joint-grid,.circ-trace-grid)>.circ-panel,
:root .circ-surface .circ-weight-trace{background:var(--model-panel-bg)}
:root .decision-surface select{
 background:var(--model-control-bg);
 color:var(--ink);
 border-color:var(--line);
}
:root .circ-surface button:not(.circ-primary),
:root .decision-surface :is(.decision-reset-targets,.card-view-control,.model-exit){
 background:var(--model-control-bg);
 color:var(--ink);
}
:root .circ-surface button:not(.circ-primary):hover,
:root .decision-surface :is(.decision-reset-targets,.card-view-control,.model-exit):hover,
:root .decision-surface select:hover{background:var(--model-control-hover)}
:root .decision-surface :is(.circ-primary,.decision-playback){
 background:var(--button-bg);
 color:var(--button-fg);
}
:root .decision-surface :is(.circ-method,.decision-explanation)>summary{color:var(--green)}

/* Both bottom disclosures keep native details semantics and the same chevron affordance. */
:root .decision-surface :is(.circ-method,.decision-explanation){max-width:none;border-top:1px solid var(--line)}
:root .decision-surface :is(.circ-method,.decision-explanation)>summary{
 display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;
 padding:8px 0;list-style:none;color:var(--green);font-size:13px;cursor:pointer;
}
:root .decision-surface :is(.circ-method,.decision-explanation)>summary::-webkit-details-marker{display:none}
:root .decision-surface :is(.circ-method,.decision-explanation)>summary::marker{content:""}
:root .decision-surface :is(.circ-method,.decision-explanation)>summary::after{content:none}
:root .model-disclosure-icon{
 display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;
 border:0;border-radius:50%;background:var(--ui-action-fill);
 color:var(--green);box-sizing:border-box;
 transition:background-color var(--motion-effects-fast);
}
:root .model-disclosure-icon svg{transition:transform 680ms var(--motion-ease-spatial);transform:rotate(0deg)}
:root :is(.circ-method,.decision-explanation)[open]>summary .model-disclosure-icon svg{transform:rotate(180deg)}
:root :is(.circ-method,.decision-explanation)[data-model-expanded=false]>summary .model-disclosure-icon svg{transform:rotate(0deg)}
:root .model-disclosure-body{display:flow-root;overflow:clip}
@media(prefers-reduced-motion:reduce){:root .model-disclosure-icon svg{transition:none}}
html[data-motion=reduce] .model-disclosure-icon svg{transition:none!important}
:root .decision-surface :is(.circ-method,.decision-explanation)>summary:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:12px}
:root .decision-surface :is(.circ-primary,.decision-playback):enabled:hover{background:var(--button-bg);filter:brightness(1.06)}

:root .decision-surface :is(.circ-method,.decision-explanation)>summary:is(:hover,:focus-visible) .model-disclosure-icon{background:var(--ui-action-hover)}
:root .decision-surface :is(.circ-method,.decision-explanation)>summary:active .model-disclosure-icon{background:var(--ui-action-pressed)}

/* Phones keep balanced text insets and dismiss with the existing drag handle. */
@media(max-width:760px) and (pointer:coarse){
 :root.model-embedded .decision-surface>.model-panel-toolbar{display:none!important}
 :root.model-embedded .decision-intro{padding-inline:22px}
 :root.model-embedded .circ-intro{padding-inline:0}
}

:root .decision-surface :is(.circ-method,.decision-explanation)[data-model-expanded=true]>summary .model-disclosure-icon{background:var(--ui-action-hover)}

/* One handle box and one bar across all model cards. No component margins or paint. */
:root .decision-surface>.model-drag-handle{display:none;position:absolute;top:0;left:0;right:0;width:auto;height:24px;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;z-index:3;touch-action:none}
:root .decision-surface>.model-drag-handle::before{content:"";display:block;width:36px;height:4px;margin:9px auto;border-radius:2px;background:var(--muted);opacity:.4}
:root.model-embedded[data-touch-capable=true] .decision-surface>.model-drag-handle{display:block}
@media(max-width:760px) and (pointer:coarse){:root.model-embedded .decision-surface>.model-drag-handle{display:block}}
@media(max-width:760px){:root.model-embedded .decision-surface>.model-panel-toolbar{display:none!important}:root.model-embedded .bee-surface>.bee-intro{padding-inline:0}}