/* Wide retains the approved desktop layout. Fold secondary graph controls at tablet width. */
#graph{display:block}
.workspace-layout,.graph-settings>summary,.graph-settings-heading{display:none}
.graph-settings[hidden]{display:none}
.graph-settings-panel{display:contents}
.view-tools .graph-settings-panel>#surfaces{display:flex;align-items:center;gap:1px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--calc-panel);pointer-events:auto;backdrop-filter:blur(14px)}
.graph-settings-panel>#surfaces button{border:0;border-radius:999px;background:none;min-height:32px;padding:6px 12px}
.graph-settings-panel>#surfaces button[aria-pressed=true]{background:var(--calc-selected)}
.graph-settings-panel>.view-menu{position:relative;pointer-events:auto;font-size:11px}
@media(max-width:1100px){
 body#calculator.sfi-app-shell{height:calc(var(--calculator-visible-height,100dvh) - var(--calculator-keyboard-height,0px));min-height:0;overflow:hidden;display:flex;flex-direction:column}
 .calculator-header{flex:none;height:auto;min-height:70px;padding:10px max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));gap:12px;flex-wrap:nowrap}
 .calculator-main{flex:1;min-height:0;height:auto;display:grid;grid-template-columns:var(--calculator-panel-width) minmax(0,1fr)}
 #calculator{--calculator-panel-width:min(448px,46vw)}
 #stage{height:auto;min-height:0;grid-column:1/-1;grid-row:1}
 #inspector{width:auto;overflow:hidden;grid-column:1;grid-row:1}
 .inspector-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:14px 12px}
 .view-tools{left:calc(var(--calculator-panel-width) + 12px);right:12px;top:12px;gap:8px;flex-wrap:nowrap}
 .view-tools>div[role=group]{flex-wrap:nowrap}
 .view-tools>div button,.view-tools>button{min-width:44px;min-height:44px;padding:8px 12px;font-size:13px}
 .graph-settings{display:block;position:relative;pointer-events:auto}
 .graph-settings>summary{display:flex;align-items:center;justify-content:center;list-style:none;min-height:46px;padding:10px 18px;border:1px solid var(--line);border-radius:24px;background:var(--calc-panel);color:var(--calc-text);font-size:13px;cursor:pointer}
 .graph-settings>summary::-webkit-details-marker{display:none}
 .graph-settings[open]>summary{background:var(--calc-input);border-color:var(--calc-border)}
 .graph-settings-panel{display:block;position:fixed;right:max(12px,env(safe-area-inset-right));top:calc(var(--calculator-header-height,70px) + 74px);width:340px;max-width:calc(100vw - 24px);max-height:calc(var(--calculator-visible-height,100dvh) - var(--calculator-header-height,70px) - var(--calculator-keyboard-height,0px) - 90px);overflow:auto;overscroll-behavior:contain;scrollbar-width:none;padding:16px;border:1px solid var(--calc-border);border-radius:18px;background:linear-gradient(130deg,var(--calc-panel),var(--calc-panel));backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 18px 55px #0009;z-index:40}
 .graph-settings:not([open])>.graph-settings-panel{display:none}
 .graph-settings-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:14px}
 .graph-settings-heading button,.view-menu-heading button{min-height:44px;padding:8px 13px}
 .view-tools .graph-settings-panel>#surfaces{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;border-radius:12px;padding:6px;background:var(--calc-hover);margin-bottom:12px}
 .graph-settings-panel .control-group-label{grid-column:1/-1;padding:5px 6px 7px;font-size:11px;letter-spacing:.04em}
 .graph-settings-panel>#surfaces button{min-height:44px;font-size:12px;padding:5px 2px;border-radius:8px}
 .graph-settings-panel>.view-menu{margin-top:8px;border:1px solid var(--line);border-radius:12px;background:var(--calc-panel)}
 .graph-settings-panel .view-menu>summary{min-height:44px;display:flex;align-items:center;padding:12px;border:0;border-radius:12px;background:none;font-size:13px}
 .graph-settings-panel .view-menu[open]>summary{box-shadow:none;border-bottom:1px solid var(--line);border-radius:12px 12px 0 0;background:var(--calc-hover)}
 .graph-settings-panel .view-menu-panel{position:static;width:auto;max-width:none;max-height:none;overflow:visible;margin:0;padding:12px;border:0;border-radius:0;background:none;backdrop-filter:none;box-shadow:none}
 .graph-settings-panel .view-menu::after,.graph-settings-panel .view-menu-panel::before{display:none}
 .graph-settings-panel .view-menu-heading{display:none}
 .graph-settings-panel button{min-height:44px;font-size:12px}
 .graph-settings-panel input[type=text]{font-size:16px;min-height:44px}
 .graph-settings-panel input[type=range]{min-height:32px}
 #inspector button,#inspector summary{touch-action:manipulation}
 #inspector .object-heading button,#inspector .object-heading .equation-keyboard,#inspector .expression-menu>summary{min-width:44px;min-height:44px!important;display:flex;align-items:center;justify-content:center}
 #inspector .expression-menu-content{top:58px}
 #inspector .expression-menu .actions{grid-template-columns:repeat(2,minmax(0,1fr))}
 #inspector .expression-menu .actions button,#inspector .expression-menu-content>button{min-height:44px;font-size:12px}
 #inspector input:not([type=range]),#inspector .parameter-value{font-size:16px;min-height:44px}
 #inspector .parameter{grid-template-columns:1fr auto 44px}
 #inspector .parameter button,#inspector .parameter-modes button,#inspector #slider-add button{min-height:44px}
 #inspector .parameter-settings>summary,#inspector .curve-domain>summary,#inspector .editor-help>summary,#inspector .settings-menu>summary{min-height:44px;align-content:center;font-size:12px}
 #inspector .parameter input[type=range]{height:32px}
 #inspector .templates button{min-height:74px}
 #inspector .templates strong{font-size:13px}#inspector .templates small{font-size:11px}
 #inspector .insert-menu>summary{padding:12px 16px;min-height:62px}
 .example-drawer-content{max-height:36dvh;overscroll-behavior:contain}
 #panel-resizer{width:18px;left:calc(var(--calculator-panel-width) - 9px)}
 #calculator .sfi-world-guide-dock{top:calc(var(--calculator-header-height,70px) + 8px);right:max(8px,env(safe-area-inset-right));max-height:calc(var(--calculator-visible-height,100dvh) - var(--calculator-header-height,70px) - 16px)}
 #calculator .sfi-world-guide-launcher{min-height:44px}
 #experience-controls{width:auto;order:initial;justify-content:flex-end}
 #calculator .sfi-world-global-controls{gap:6px}
 .file-menu>div{max-height:calc(var(--calculator-visible-height,100dvh) - var(--calculator-header-height,70px) - 20px);overflow:auto}
}
@media(min-width:701px) and (max-width:900px){
 #calculator{--calculator-panel-width:300px}
 .calculator-header .brand{font-size:21px}
 .calculator-header{gap:8px}
 .workspace-nav{gap:3px}
}
@media(max-width:700px){
 .calculator-header{display:grid;grid-template-columns:minmax(0,1fr) auto auto;min-height:64px;gap:5px;padding:calc(8px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}
 .calculator-header .brand{font-size:21px;min-width:0}.calculator-header .brand small{font-size:10px}
 .workspace-nav{width:auto;display:flex;margin:0;gap:4px;align-items:center}
 .workspace-nav>button{min-width:36px;min-height:44px}
 .file-menu>summary{font-size:0;min-width:44px;min-height:44px;justify-content:center;padding:8px}
 .file-menu>summary>span{font-size:22px}.file-menu>summary::after{content:none}
 #experience-controls{grid-column:2;grid-row:1;width:auto;justify-content:flex-end;min-height:44px}
 .calculator-main{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(150px,44%) minmax(0,1fr);gap:0}
 #stage{grid-column:1;grid-row:1;min-height:0;height:auto;order:initial}
 #inspector{grid-column:1;grid-row:2;order:initial;width:100%;height:100%;border:0;border-top:1px solid var(--calc-border);border-radius:20px 20px 0 0;background:linear-gradient(140deg,var(--calc-panel),var(--calc-panel));box-shadow:0 -8px 24px #0004;overflow:hidden;min-height:0}
 .workspace-layout{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:8px 12px;border-bottom:1px solid var(--calc-border);background:var(--calc-panel)}
 .workspace-layout button{min-height:40px;padding:6px 10px;font-size:12px;border:1px solid transparent;border-radius:10px;background:none;color:var(--calc-muted)}
 .workspace-layout button[aria-pressed=true]{background:var(--calc-hover);border-color:var(--calc-border);color:var(--calc-text)}
 .inspector-scroll{overflow:auto;flex:1;padding:10px 12px;min-height:0}
 .document-heading{padding:4px 3px 12px}.document-heading label{font-size:9px;margin-bottom:3px}#inspector #title{font-size:19px;min-height:30px}
 #inspector footer{padding-bottom:max(12px,env(safe-area-inset-bottom))}
 #inspector>.insert-menu{position:relative;flex:none;padding-bottom:env(safe-area-inset-bottom)}
 #inspector>.insert-menu>summary{min-height:48px;padding:8px 14px}#inspector>.insert-menu>summary>span:first-child{flex-direction:row;align-items:center;gap:10px}
 #inspector>.insert-menu>summary small{font-size:10px}.example-drawer-content{max-height:30dvh}
 #panel-resizer{display:none}
 .view-tools{left:10px;right:10px;top:10px;justify-content:flex-end;gap:8px}
 .view-tools>div button{padding:7px 10px;font-size:12px}
 #graph-status{left:12px;right:12px;bottom:8px;font-size:10px;margin:0;line-height:1.4;pointer-events:none}
 .graph-settings-panel{top:calc(var(--calculator-header-height,120px) + 66px);left:10px;right:10px;width:auto;max-width:none;max-height:calc(var(--calculator-visible-height,100dvh) - var(--calculator-header-height,120px) - var(--calculator-keyboard-height,0px) - 80px)}
 body[data-workspace-layout=graph] .calculator-main{grid-template-rows:minmax(0,1fr) 49px}
 body[data-workspace-layout=graph] #inspector>.inspector-scroll,body[data-workspace-layout=graph] #inspector>.insert-menu{display:none}
 body[data-workspace-layout=equations] .calculator-main{grid-template-rows:0 minmax(0,1fr)}
 body[data-workspace-layout=equations] #stage{visibility:hidden;overflow:hidden}
 #calculator .sfi-world-guide-dock{left:8px;right:8px;width:auto;max-width:none}
}
@media(max-width:370px){.calculator-header .brand{font-size:18px}.workspace-nav{gap:1px}.workspace-nav>button{min-width:32px;width:32px}.calculator-header{column-gap:4px}.view-tools{gap:5px}.view-tools>div button{min-width:40px}.graph-settings>summary{padding:10px 14px}}
@media(max-height:500px) and (min-width:701px) and (max-width:1100px){.calculator-header{min-height:58px;padding-top:4px;padding-bottom:4px}.example-drawer-content{max-height:45dvh}.graph-settings-panel{top:calc(var(--calculator-header-height,58px) + 8px);max-height:calc(var(--calculator-visible-height,100dvh) - var(--calculator-header-height,58px) - 16px)}}

@media(max-width:700px){body[data-keyboard-active=true]:not([data-workspace-layout=graph]) .calculator-main{grid-template-rows:0 minmax(0,1fr)}body[data-keyboard-active=true]:not([data-workspace-layout=graph]) #stage{visibility:hidden;overflow:hidden}}
/* A single header row keeps recording and AdamAI immediately available. */
.workspace-history{display:flex;gap:6px;padding-bottom:8px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.workspace-history[hidden]{display:none}.workspace-history>button{flex:1;justify-content:center}
@media(max-width:700px){
 .calculator-header>.workspace-nav{grid-column:3;grid-row:1}
 .calculator-header>#experience-controls{grid-column:2;grid-row:1}
 .calculator-header>.brand{grid-column:1;grid-row:1}
 #calculator #experience-controls .sfi-world-guide-launcher{width:40px;min-width:40px;height:44px;padding:10px;gap:0}
 #calculator #experience-controls .sfi-world-guide-launcher>span:last-child{display:none}
 #calculator .sfi-world-global-controls{gap:2px}
 .workspace-layout{gap:3px;padding:5px 10px}
 .workspace-layout button{min-height:38px;padding:5px 8px;border-radius:9px;font-size:11px}
 .view-tools{gap:5px;top:8px;right:8px}
 .view-tools>div[role=group]{gap:0;padding:3px;border:1px solid var(--line);border-radius:22px;background:var(--calc-panel)}
 .view-tools>div[role=group] button{min-height:32px;min-width:38px;border:0;border-radius:18px;font-size:11px;padding:5px 8px}
 .view-tools>button{min-height:40px;min-width:40px;padding:7px;font-size:15px;border-radius:20px}
 .view-tools>#auto-rotate{font-family:inherit;font-size:11px;padding:7px 12px}
 .graph-settings>summary{min-height:40px;padding:8px 13px;font-size:11px}
 .graph-settings-panel{top:calc(var(--calculator-header-height,64px) + 56px)}
}
/* The range badge shares the value row; its expanded controls stay in document flow. */
.parameter-card{position:relative}
.parameter-card .parameter{grid-template-columns:minmax(0,1fr) 66px 36px 28px;row-gap:3px}
.parameter-card .parameter-value{grid-column:2;grid-row:1}
.parameter-card .parameter-settings>summary{position:absolute;top:12px;left:32px;right:150px;max-width:154px;min-height:32px;margin:0;padding:6px 9px;font-size:10px;white-space:nowrap}
.parameter-card .parameter-settings[open]{padding-top:4px}
@media(max-width:1100px){
 #inspector .parameter-card .parameter{grid-template-columns:minmax(0,1fr) 66px 44px 28px;padding:8px 0 2px}
 #inspector .parameter-card .parameter-settings>summary{top:8px;right:166px;min-height:44px;padding:8px;font-size:10px}
 #inspector .parameter-card .parameter input[type=range]{height:32px}
}
.expression-menu-content{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}.expression-menu-content::-webkit-scrollbar{display:none}
.workspace-feedback{margin:4px 0 0;padding:10px 8px 4px;border-top:1px solid var(--line);color:var(--calc-muted);font-size:11px;line-height:1.5}.workspace-feedback[hidden]{display:none}
@media(min-width:1101px) and (max-width:1180px){
 .view-tools{gap:6px}
 .view-tools>div[role=group] button{padding:6px 8px;font-size:11px}
 .view-tools>.view-menu>summary{padding:10px 9px;font-size:10px}
 .view-tools .control-group-label{padding:4px 6px;font-size:9px}
}

/* Startup occupies the final graph envelope, excluding the desktop inspector. */
#graph-startup{position:absolute;inset:0 0 0 var(--calculator-panel-width,476px);display:grid;place-items:center;padding:24px;color:var(--calc-muted);font-family:inherit;font-size:12px;line-height:1.5;text-align:center;pointer-events:none;z-index:3}
#graph-startup[hidden]{display:none}
#calculator[data-graph-state=preparing] #graph,#calculator[data-graph-state=preparing] .view-tools,#calculator[data-graph-state=preparing] #graph-status{visibility:hidden}
@media(max-width:700px){#graph-startup{left:0}}

.graph-startup-content{display:flex;flex-direction:column;align-items:center;gap:13px}
.graph-startup-wave{display:flex;align-items:center;gap:7px;height:14px}
.graph-startup-wave i{display:block;width:6px;height:6px;border-radius:50%;background:#56d9ee;animation:graph-startup-wave 1.1s ease-in-out infinite}
.graph-startup-wave i:nth-child(2){background:#a78bea;animation-delay:.14s}
.graph-startup-wave i:nth-child(3){background:#ed74d5;animation-delay:.28s}
@keyframes graph-startup-wave{0%,70%,100%{transform:translateY(3px);opacity:.35}35%{transform:translateY(-3px);opacity:1}}
@media(prefers-reduced-motion:reduce){.graph-startup-wave i{animation:none;opacity:.8}}