/* Immersive exploration, shared by every model. Authoring keeps its workspace. */
.scene-only { display: none; }
.board-controls { display: none; }
html[data-view="workspace"].has-immersive-scene .topbar { height: 60px; }
.workspace-view.is-immersive { padding: 0 32px 14px; max-width: 1920px; animation: none; }
.is-immersive .scene-only { display: flex; }
.is-immersive .workspace-bar { height: 114px; min-height: 0; display: block; position: relative; padding: 22px 0 0; }
.is-immersive .workspace-identity { display: block; text-align: center; }
.is-immersive .workspace-identity > div { margin: auto; max-width: calc(100% - 100px); }
.is-immersive .scene-eyebrow { display: block; margin: 0 0 6px; text-transform: uppercase; letter-spacing: .23em; font-size: 12px; font-weight: 650; color: var(--accent); }
.is-immersive .document-title { width: 100%; max-width: 960px; font-size: clamp(28px, 2.8vw, 40px); font-weight: 650; text-align: center; line-height: 1.2; letter-spacing: -.04em; }
.is-immersive .workspace-identity .workspace-hint { max-width: none; margin: 8px 0 0; font-size: 12px; line-height: 1.4; color: var(--ink-soft); }
.is-immersive .back-link { position: absolute; top: 22px; left: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); }
.is-immersive .save-state { position: absolute; left: 0; top: 4px; font-size: 12px; color: var(--ink-soft); }
.is-immersive .workspace-actions { position: absolute; top: -4px; right: 0; gap: 2px; }
.is-immersive .workspace-actions .quiet { padding: 3px 8px; font-size: 12px; }
.is-immersive .workspace-actions .icon-action { width: 26px; height: 26px; }
.is-immersive .workspace-message:not(.hidden) { position: absolute; z-index: 25; top: 122px; left: 32px; max-width: min(640px, 80vw); box-shadow: 0 10px 30px rgb(24 55 92 / 10%); }
.is-immersive .studio-layout.exploring { display: block; position: relative; }
.is-immersive .canvas-pane { height: calc(100svh - 264px); min-height: 420px; display: flex; flex-direction: column; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; border-radius: 0; overflow: visible; }
.is-immersive.parameters-open .canvas-pane { margin-right: 330px; }
.is-immersive .canvas-head { flex: none; height: 32px; padding: 0 8px; }
.is-immersive .canvas-head .model-status.valid { visibility: hidden; }
/* Discreti per dimensione e posizione, non per trasparenza: un testo
   sbiadito sotto il contrasto 4,5:1 in aula, con il proiettore, non si legge. */
.is-immersive .canvas-tools { margin-left: auto; }
.is-immersive .canvas-tools .zoom-button, .is-immersive .canvas-tools .zoom-level { color: var(--ink-soft); }
.is-immersive .canvas-tools:hover, .is-immersive .canvas-tools:focus-within { opacity: 1; }
.is-immersive .canvas-frame { flex: 1; height: auto; min-height: 160px; margin: 0; background-color: transparent; border-radius: 28px; background-image: radial-gradient(var(--map-grid) .7px, transparent .7px); }
.is-immersive .canvas-frame::before { background: radial-gradient(ellipse at 50% 55%, color-mix(in srgb, var(--paper-raised) 60%, transparent), transparent 68%); }
.is-immersive .node-stock .node-shape-clip { rx: 18px; }
.is-immersive .node-stock .node-shape { rx: 18px; stroke-width: 1.6; filter: drop-shadow(0 9px 12px rgb(28 78 131 / 12%)); }
.is-immersive .node-shape-variable { stroke-width: 1.4; }
.is-immersive .node:hover .node-shape { filter: drop-shadow(0 5px 9px color-mix(in srgb, var(--accent) 22%, transparent)); }
.is-immersive .canvas-frame.is-dragging-node .node.is-selected .node-shape { filter: drop-shadow(0 12px 14px color-mix(in srgb, var(--accent) 25%, transparent)); }
.is-immersive .node-stock.is-selected .node-shape { stroke-width: 3; }
.is-immersive .node:focus-visible { outline: none; }
.is-immersive .node:focus-visible .node-shape { stroke-width: 4; stroke: var(--accent-strong); }
.is-immersive .behavior-strip { flex: none; padding: 8px 12px 0; margin: 4px auto 0; width: 100%; max-width: 1120px; min-width: 0; border: 0; background: transparent; }
.is-immersive .behavior-charts { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: thin; overscroll-behavior-x: contain; padding-bottom: 2px; }
.is-immersive .chart-card { flex: 1 0 260px; min-width: 260px; padding: 3px 10px 0; grid-template-rows: minmax(28px, auto) 132px 16px; }
.is-immersive .chart-card:only-child { max-width: 800px; margin: auto; }
.is-immersive .chart-head { min-height: 28px; }
.is-immersive .behavior-chart { cursor: crosshair; touch-action: none; border-radius: 8px; transition: background-color 160ms ease; }
.is-immersive .behavior-chart:hover { background: color-mix(in srgb, var(--paper-raised) 35%, transparent); }
html.first-gestures .is-immersive .behavior-strip::after { content: "Trascina sul grafico per esplorare il tempo"; grid-column: 1 / -1; text-align: center; font-size: 12px; color: var(--ink-soft); height: 0; opacity: 0; pointer-events: none; translate: 0 -5px; }
.is-immersive .behavior-strip:hover::after { opacity: .8; }
.is-immersive .chart-head b { font-size: 12px; font-weight: 500; }
.is-immersive .chart-value { font-size: 16px; font-weight: 600; color: var(--accent); }
.is-immersive .results-head h2 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.is-immersive .simulation-bar { position: fixed; z-index: 22; bottom: 20px; left: 50%; transform: translateX(-50%); width: min(1100px, calc(100vw - 64px)); height: 68px; padding: 10px 14px; margin: 0; gap: 10px; border-radius: 28px; border: 1px solid color-mix(in srgb, var(--paper-raised) 92%, transparent); background: color-mix(in srgb, var(--sky-glass) 94%, transparent); backdrop-filter: blur(28px); box-shadow: 0 14px 40px rgb(28 78 131 / 12%), inset 0 1px 0 rgb(255 255 255 / 40%); }
.is-immersive .simulation-bar #run-button { width: 104px; min-width: 104px; height: 46px; flex: none; padding: 0 12px; border-radius: 28px; background: var(--accent); color: var(--on-brand); font-size: 13px; box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 18%, transparent); }
.is-immersive .simulation-bar #run-button:hover { background: var(--accent-strong); }
.is-immersive .simulation-bar #restart-playback { display: grid; place-items: center; width: 30px; height: 34px; flex: none; font-size: 23px; }
.is-immersive .simulation-bar #previous-step, .is-immersive .simulation-bar #next-step { width: 22px; flex: none; font-size: 11px; opacity: .65; }
.is-immersive .simulation-bar input[type="range"] { min-width: 80px; }
.is-immersive input[type="range"] { appearance: none; -webkit-appearance: none; background: transparent; border: 0; padding: 0; cursor: ew-resize; }
.is-immersive input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 24%, var(--paper-raised)); }
.is-immersive input[type="range"]::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--accent); box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 20%, transparent); transition: scale 140ms ease, box-shadow 140ms ease; }
.is-immersive input[type="range"]:hover::-webkit-slider-thumb { scale: 1.15; box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 10%, transparent); }
.is-immersive input[type="range"]::-moz-range-track { height: 6px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 24%, var(--paper-raised)); }
.is-immersive input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--accent); }
.is-immersive input[type="range"]:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent); outline-offset: 3px; border-radius: 18px; }
.is-immersive .simulation-bar #time-output { width: 118px; flex: none; font-variant-numeric: tabular-nums; }
.is-immersive .simulation-bar .duration-field { font-size: 12px; }
.is-immersive .simulation-bar .duration-field input { width: 48px; padding-inline: 5px; }
.is-immersive .simulation-bar .scene-parameters { width: auto; height: 44px; display: flex; align-items: center; gap: 8px; flex: none; padding: 0 16px; font-size: 12px; font-weight: 600; background: var(--paper-raised); border-radius: 28px; border: 1px solid transparent; }
.is-immersive .scene-parameters[aria-expanded="true"] { color: var(--accent); border-color: var(--line); background: var(--accent-soft); }
.is-immersive .inspector { display: none; }
.is-immersive.parameters-open .inspector { display: block; position: absolute; right: 0; top: 16px; width: 306px; height: calc(100svh - 282px); min-height: 310px; padding: 18px 20px; border-radius: 28px; background: color-mix(in srgb, var(--paper-raised) 88%, transparent); border: 1px solid color-mix(in srgb, var(--paper-raised) 95%, transparent); backdrop-filter: blur(28px); box-shadow: 0 18px 48px rgb(28 78 131 / 8%); animation: scene-panel-in 220ms ease both; }
.is-immersive .scene-panel-head { align-items: center; justify-content: space-between; margin: 0 0 10px; color: var(--ink-soft); font-size: 12px; letter-spacing: .18em; }
.is-immersive .scene-panel-head button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--surface-2); color: var(--ink); font-size: 20px; cursor: pointer; }
.is-immersive .inspector-head { min-height: 12px; }
.is-immersive .inspector-head .eyebrow { display: none; }
.is-immersive .inspector-head #clear-selection { width: auto; height: 30px; margin: 0 0 8px; font-size: 11px; color: var(--accent); }
.is-immersive .inspector .influence-guide { margin-bottom: 0; padding-top: 0; }
.is-immersive .inspector #influence-label { font-size: 18px; }
.is-immersive .experiment-control { padding-block: 12px; }
.is-immersive .experiment-control input { border-radius: 14px; }
.is-immersive .experiment-control .experiment-slider { height: 26px; }
.is-immersive .inspector-story { font-size: 11px; line-height: 1.6; }
.workspace-view.is-immersive.is-fullscreen { padding: 20px 32px 14px; background: var(--paper); }
.is-immersive.is-fullscreen .workspace-bar { height: 106px; }
.is-immersive.is-fullscreen .studio-layout { flex: none; }
.is-immersive.is-fullscreen .canvas-pane { height: calc(100svh - 218px); min-height: 420px; }
.is-immersive.is-fullscreen.parameters-open .inspector { height: calc(100svh - 240px); }
@keyframes scene-panel-in { from { opacity: 0; clip-path: inset(0 0 0 12% round 28px); } to { opacity: 1; clip-path: inset(0 round 28px); } }
@media (max-width: 1150px) {
  .workspace-view.is-immersive { padding-inline: 24px; }
  .is-immersive .document-title { font-size: 30px; }
  .is-immersive.parameters-open .canvas-pane { margin-right: 290px; }
  .is-immersive.parameters-open .inspector { width: 274px; padding: 14px 18px; }
  .is-immersive .simulation-bar { width: calc(100vw - 48px); gap: 6px; }
}
@media (max-width: 1000px) {
  html[data-view="workspace"].has-immersive-scene body { min-width: 0; }
  html[data-view="workspace"].has-immersive-scene .topbar { padding-inline: 18px; gap: 8px; }
  html[data-view="workspace"].has-immersive-scene .topbar nav { gap: 0; }
  html[data-view="workspace"].has-immersive-scene .topbar nav a { padding-inline: 8px; font-size: 11px; }
  html[data-view="workspace"].has-immersive-scene [data-route="workspace"] { display: none; }
  html[data-view="workspace"].has-immersive-scene .theme-toggle { margin-left: 0; font-size: 12px; }
  .workspace-view.is-immersive { padding-inline: 18px; }
  .is-immersive .workspace-identity > div { max-width: calc(100% - 52px); margin-right: 0; }
  .is-immersive .document-title { font-size: clamp(20px, 4vw, 28px); }
  .is-immersive .workspace-identity .workspace-hint { font-size: 11px; }
  .is-immersive .back-link { width: 30px; height: 30px; }
  .is-immersive .workspace-actions .quiet { font-size: 12px; padding-inline: 6px; }
  .is-immersive .canvas-tools { gap: 0; }
  .is-immersive .canvas-head { padding-inline: 0; }
  .is-immersive .canvas-head .zoom-button { padding-inline: 6px; }
  .is-immersive .behavior-strip { padding-inline: 0; column-gap: 4px; }
  .is-immersive .results-head h2 { font-size: 12px; }
  .is-immersive .observation-toolbar, .is-immersive .observation-toolbar button { font-size: 12px; }
  .is-immersive .simulation-bar { width: calc(100vw - 32px); padding-inline: 10px; gap: 8px; }
  .is-immersive .simulation-bar #run-button { width: 46px; min-width: 46px; font-size: 0; }
  .is-immersive .simulation-bar #run-button::before { content: "▶"; font-size: 16px; }
  .is-immersive .simulation-bar #run-button[aria-label="Metti in pausa"]::before { content: "Ⅱ"; }
  .is-immersive .simulation-bar #previous-step, .is-immersive .simulation-bar #next-step { display: none; }
  .is-immersive .simulation-bar #time-output { width: 100px; font-size: 12px; }
  .is-immersive .simulation-bar .scene-parameters { padding-inline: 12px; font-size: 11px; }
  .is-immersive.parameters-open .canvas-pane { margin-right: 0; }
  .is-immersive.parameters-open .inspector { top: 32px; width: min(360px, 100%); height: calc(100svh - 514px); min-height: 160px; max-height: 320px; z-index: 15; }
  .is-immersive .inspector #influence-detail { display: none; }
}
@media (max-width: 520px) {
  .is-immersive .simulation-bar .duration-field { display: none; }
  html[data-view="workspace"].has-immersive-scene .theme-toggle { display: none; }
  .is-immersive .canvas-head .zoom-level { display: none; }
  /* sul telefono «Parametri» resta solo icona, come il pulsante di avvio: con la scritta usciva dallo schermo */
  .is-immersive .simulation-bar .scene-parameters { width: 44px; padding: 0; justify-content: center; font-size: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .is-immersive.parameters-open .inspector { animation: none; }
}

/* The board dedicates the viewport to the diagram. Existing controls move
   here so playback, edits and history remain one continuous experiment. */
.workspace-view.is-board.is-fullscreen { padding: 14px 20px 20px; gap: 0; animation: none; background: radial-gradient(ellipse at 10% 15%, var(--sky-cloud-a), transparent 65%), radial-gradient(ellipse at 90% 90%, var(--sky-cloud-b), transparent 60%), var(--paper); }
.workspace-view.is-board .workspace-bar,
.workspace-view.is-board .behavior-strip,
.workspace-view.is-board .simulation-bar { display: none; }
.workspace-view.is-board.is-fullscreen .studio-layout { flex: 1; min-height: 0; }
.workspace-view.is-board.is-fullscreen .canvas-pane { height: 100%; min-height: 0; }
.workspace-view.is-board .canvas-head { height: 54px; padding-inline: 0; }
.workspace-view.is-board .canvas-head > div:first-child { display: none; }
.workspace-view.is-board .canvas-tools { width: 100%; opacity: 1; gap: 6px; }
.workspace-view.is-board #fullscreen-toggle { order: -1; margin-right: auto; border: 1px solid var(--line); border-radius: 28px; padding: 10px 16px; color: var(--ink); background: var(--sky-glass); }
.workspace-view.is-board .board-controls { display: flex; align-items: center; gap: 8px; margin-left: 10px; }
.workspace-view.is-board .board-controls #run-button { border-radius: 28px; min-width: 86px; padding: 10px 14px; font-size: 12px; }
.workspace-view.is-board .board-controls #scene-parameters { align-items: center; gap: 6px; padding: 10px 14px; font-size: 12px; border: 1px solid var(--line); border-radius: 28px; background: var(--sky-glass); color: var(--accent); cursor: pointer; }
.workspace-view.is-board.is-fullscreen .canvas-frame { min-height: 0; margin: 0; border-radius: 28px; }
.workspace-view.is-board.is-fullscreen.parameters-open .inspector { top: 68px; height: calc(100svh - 110px); min-height: 0; max-height: none; }
html.first-gestures .workspace-view.is-board .canvas-frame::after { content: "Trascina per spostarti · Esc per tornare"; position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; color: var(--ink-soft); opacity: .7; pointer-events: none; }
@media (max-width: 1000px) {
  .workspace-view.is-board.is-fullscreen { padding: 8px 12px 12px; }
  .workspace-view.is-board .canvas-tools { gap: 2px; }
  .workspace-view.is-board .zoom-level, .workspace-view.is-board #zoom-fit { display: none; }
  .workspace-view.is-board #fullscreen-toggle { font-size: 11px; padding-inline: 10px; }
  .workspace-view.is-board .board-controls { gap: 4px; margin-left: 4px; }
  .workspace-view.is-board .board-controls #run-button { min-width: 36px; width: 36px; height: 36px; padding: 0; font-size: 0; }
  .workspace-view.is-board .board-controls #run-button::before { content: "▶"; font-size: 14px; }
  .workspace-view.is-board .board-controls #run-button[aria-label="Metti in pausa"]::before { content: "Ⅱ"; }
  .workspace-view.is-board .board-controls #scene-parameters { padding-inline: 10px; font-size: 11px; }
}

/* Preserve the visual grammar (stock / calculated value / parameter), with
   softer surfaces and smaller arrowheads. Feedback still has a dashed line. */
html[data-look="sky"] .node .node-shape { fill: url(#scene-glass); stroke: color-mix(in srgb, var(--accent) 45%, var(--paper-raised)); stroke-width: 1.4; filter: drop-shadow(0 5px 8px rgb(28 78 131 / 10%)); }
html[data-look="sky"] .node-stock .node-shape-clip { rx: 22px; }
html[data-look="sky"] .node-stock .node-shape { rx: 22px; stroke: color-mix(in srgb, var(--accent) 65%, var(--paper-raised)); stroke-width: 1.7; filter: drop-shadow(0 8px 12px rgb(28 78 131 / 14%)); }
html[data-look="sky"] .node-constant .node-shape { fill: color-mix(in srgb, var(--paper-raised) 94%, var(--lever)); stroke: color-mix(in srgb, var(--lever) 50%, var(--paper-raised)); stroke-linejoin: round; }
html[data-look="sky"] .node .node-name { font-weight: 550; }
html[data-look="sky"] .node-stock .node-name { font-weight: 650; }
html[data-look="sky"] .node:is(:hover, :focus-visible, .is-selected) .node-shape { stroke: var(--accent); stroke-width: 2.2; filter: drop-shadow(0 6px 12px color-mix(in srgb, var(--accent) 20%, transparent)); }
html[data-look="sky"] .node.is-source .node-shape { stroke: var(--lever); }
html[data-look="sky"] .node.node-flow.is-related .node-shape { stroke: var(--series-color, var(--accent)); }
html[data-look="sky"] .edge .edge-path { marker-end: url(#scene-arrow); stroke-width: 1.6; stroke-linecap: round; opacity: .7; }
html[data-look="sky"] .edge:is(.is-related, .is-selected, :hover) .edge-path { stroke-width: 2.2; opacity: 1; filter: none; }
html[data-look="sky"] .edge.is-feedback .edge-path { stroke-dasharray: 3 6; }
html[data-look="sky"] .edge .edge-badge { r: 7.5px; fill: var(--paper-raised); stroke: var(--line); stroke-width: 1; }
html[data-look="sky"] .edge .edge-sign { fill: var(--ink-soft); font-weight: 600; font-size: 11px; }
.scene-edge-hit { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }

/* Il rubinetto e la nuvola nel vetro del cielo: stessa luce dei blocchi. */
html[data-look="sky"] .node-flow .node-shape { stroke: color-mix(in srgb, var(--accent) 60%, var(--paper-raised)); stroke-width: 1.8; }
html[data-look="sky"] .pipe-inner { fill: color-mix(in srgb, var(--paper-raised) 92%, var(--accent)); }
html[data-look="sky"] .stock-level { fill: color-mix(in srgb, var(--accent) 22%, transparent); }

/* Sui dispositivi senza tastiera e mouse «Esc» non esiste: il suggerimento si toglie. */
@media (hover: none) { .workspace-view.is-board .canvas-frame::after { content: none; } }

/* Portatili (schermo basso): titolo piu' compatto, cosi'
   la mappa guadagna altezza invece di scendere sotto il 50%. */
@media (max-height: 900px) and (min-width: 1051px) {
  .is-immersive .workspace-bar { height: 84px; padding-top: 12px; }
  .is-immersive .scene-eyebrow { margin-bottom: 2px; }
  .is-immersive .document-title { font-size: 26px; }
  .is-immersive .workspace-identity .workspace-hint { margin-top: 4px; }
  .is-immersive .back-link { top: 14px; }
  .is-immersive .canvas-pane { height: calc(100svh - 234px); min-height: 380px; }
}