/* Il carattere viaggia con l'app: su un Chromebook o un PC di scuola, dove
   Avenir Next non c'e', la lavagna resta la stessa invece di cadere sul
   carattere di sistema. Inter, licenza SIL OFL 1.1 (fonts/OFL-Inter.txt),
   solo il sottoinsieme latino, asse dei pesi variabile, 48 kB. */
@font-face {
  font-family: "Flowmind Inter";
  src: url("/flowmind/v2/fonts/inter-latin-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* I colori vengono tutti da tokens.css (design system). Qui restano solo i
     vecchi nomi, come alias, perche' il resto dei fogli li usa ancora. */
  --paper: var(--sky);
  --paper-raised: var(--surface);
  --paper-sunken: var(--surface-sunken);
  --on-brand: var(--on-accent);
  --leva: var(--flow-out);
  --anim-positive: var(--flow-in);
  --anim-negative: var(--flow-out);
  --series-purple: var(--series-2);
  --series-blue: var(--accent-strong);
  --series-gold: var(--series-3);
  --sky-glass: var(--glass-panel);
  --map-halo: color-mix(in srgb, var(--accent) 6%, transparent);
  --map-violet: color-mix(in srgb, var(--series-2) 4%, transparent);
  --shadow: var(--shadow-panel);

  /* Scala tipografica: sette gradini, rapporto costante. Prima le misure
     erano ventisei, scelte a occhio una alla volta finche' quella schermata
     sembrava a posto: il disallineamento non si sa nominare ma si legge come
     fatica. Con una scala la stessa schermata smette di affaticare. */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 17px;
  --fs-lg: 21px;
  --fs-xl: 26px;
  --fs-2xl: 34px;
  --fs-display: clamp(34px, 3.9vw, 56px);

  /* Il disegno ha unita' sue: dentro il viewBox le misure sono coordinate,
     non pixel, e la mandata a capo dei nomi e' calcolata su queste. Restano
     fuori dalla scala della pagina, che qui non significherebbe niente. */
  --canvas-name: 16.5px;
  --canvas-value: 12px;
  --canvas-mark: 11px;

  /* Movimento. Tre durate e tre curve, non una in piu'. Regola: si interpola
     tutto cio' che cambia posizione, dimensione, colore o opacita'; nient'altro
     si muove. Serve perche' l'occhio capisca che A e' diventato B invece di
     vedere prima A e poi B: la continuita' e' la parte visibile della causa. */
  --dur-tap: 90ms;    /* risposta al dito: sotto la soglia della latenza */
  --dur-move: 180ms;  /* selezione, apertura, cambio di stato */
  --dur-enter: 320ms; /* qualcosa che entra in scena */
  --ease: cubic-bezier(.22, .61, .36, 1);        /* atterra, non frena */
  --ease-inout: cubic-bezier(.65, 0, .35, 1);
  --ease-grab: cubic-bezier(.34, 1.28, .64, 1);  /* manipolazione diretta */

  font-family: var(--font-sans);
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 1024px; background: var(--paper); color: var(--ink); line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
.hidden, [hidden] { display: none !important; }
.skip-link { position: fixed; left: -999px; top: 12px; z-index: 99; }
.skip-link:focus { left: 12px; padding: 8px 12px; background: var(--paper-raised); color: var(--ink); border-radius: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.topbar {
  position: sticky; top: 0; z-index: 20; height: 64px; padding: 0 28px;
  display: flex; align-items: center; gap: 32px;
  background: color-mix(in srgb, var(--paper-raised) 94%, transparent);
  border-bottom: 1px solid var(--line); backdrop-filter: blur(18px);
}
.brand { color: var(--ink); text-decoration: none; font-size: var(--fs-lg); font-weight: 850; line-height: .9; letter-spacing: -.055em; }
.brand small { display: block; margin-top: 4px; color: var(--ink-faint); font-size: var(--fs-2xs); letter-spacing: .19em; }
.topbar nav { display: flex; align-self: stretch; gap: 4px; }
.topbar nav a { display: grid; place-items: center; padding: 0 12px; color: var(--ink-soft); text-decoration: none; font-size: var(--fs-sm); font-weight: 750; border-bottom: 2px solid transparent; }
.topbar nav a:hover { color: var(--ink); }
.topbar nav a[aria-current="page"] { color: var(--accent-strong); border-color: var(--accent); }
.theme-toggle { margin-left: auto; padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-soft); font-size: var(--fs-xs); font-weight: 750; cursor: pointer; }
.works-button + .theme-toggle { margin-left: 8px; }

.view { margin: 0 auto; padding: 40px 28px 72px; }
.library-view, .systems-view { max-width: 1280px; }
.workspace-view { max-width: 1680px; padding-top: 20px; }
.eyebrow { margin: 0; color: var(--accent-strong); font-size: var(--fs-2xs); font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }

/* Libreria */
.library-hero { display: flex; align-items: end; justify-content: space-between; gap: 40px; padding: 24px 0 32px; }
.library-hero h1 { max-width: 940px; margin: 8px 0 20px; font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.048em; }
/* Le tre competenze del corso: modellizzare, simulare, interpretare. Il nome
   apre la riga perche' sono pilastri, non passi numerati di una procedura. */
.method { max-width: 74ch; margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.method li { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.5; }
.method li b { color: var(--ink); font-weight: 800; }
.hero-action { flex: none; padding: 16px 20px !important; font-size: var(--fs-sm) !important; }
.hero-action span { font-size: var(--fs-lg); line-height: 0; }
.filters { display: flex; gap: 12px; margin-bottom: 16px; }
.filters label { color: var(--ink-soft); font-size: var(--fs-2xs); font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.filters select { display: block; min-width: 170px; margin-top: 8px; padding: 8px 32px 8px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-raised); color: var(--ink); }
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.catalog-card { min-height: 300px; display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper-raised); transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease; }
.catalog-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: var(--shadow); }
.card-top { display: flex; justify-content: space-between; color: var(--ink-faint); font-size: var(--fs-2xs); }
.status { padding: 4px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.catalog-card .phenomenon { margin-top: 8px; }
.catalog-card h2 { margin: 8px 0 8px; font-size: var(--fs-lg); line-height: 1.05; letter-spacing: -.04em; }
.catalog-card .description { margin: 0; color: var(--ink-soft); font-size: var(--fs-xs); }
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 16px 0; }
.tag { padding: 4px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); font-size: var(--fs-2xs); }
.catalog-card footer { display: flex; align-items: end; gap: 12px; margin-top: auto; }
.catalog-card footer small { flex: 1; color: var(--ink-faint); font-size: var(--fs-2xs); }

/* Comandi */
.primary, .secondary, .quiet, .danger, .danger-text, .simulation-bar button, .block-palette button, .icon-button { border-radius: 8px; cursor: pointer; }
.primary, .secondary, .quiet, .danger { border: 1px solid var(--line); padding: 8px 12px; font-size: var(--fs-xs); font-weight: 800; }
.primary { border-color: var(--accent); background: var(--accent); color: var(--on-brand); }
.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.secondary { background: var(--paper-raised); color: var(--ink); }
.quiet { border-color: transparent; background: transparent; color: var(--ink-soft); }
.quiet:hover, .secondary:hover { border-color: var(--line); background: var(--surface-2); color: var(--ink); }
.danger { width: 100%; margin-top: 16px; border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); background: transparent; color: var(--danger); }
.danger-text { border: 0; background: transparent; color: var(--danger); font-size: var(--fs-xs); }

/* Testata dello Studio */
.workspace-bar { min-height: 64px; display: flex; align-items: center; gap: 16px; padding: 0 2px 8px; }
.workspace-identity { min-width: 360px; display: flex; align-items: center; gap: 12px; }
.back-link { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-raised); color: var(--ink-soft); cursor: pointer; font-size: 0; }
.back-link::before { content: "←"; font-size: var(--fs-md); }
.document-title { width: min(500px, 38vw); padding: 0; border: 0; background: transparent; color: var(--ink); font-size: var(--fs-xl); font-weight: 850; letter-spacing: -.035em; }
.workspace-identity p { margin: 1px 0 0; color: var(--ink-faint); font-size: var(--fs-2xs); }
.save-state { margin-left: auto; color: var(--ink-faint); font-size: var(--fs-2xs); white-space: nowrap; }
.save-state::before { content: "●"; margin-right: 6px; color: var(--success); font-size: var(--fs-2xs); }
.workspace-actions { display: flex; align-items: center; gap: 4px; }
.run-button { padding-inline: 16px; }
.workspace-message { margin-bottom: 8px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-raised); color: var(--ink-soft); font-size: var(--fs-xs); }
.workspace-message.error { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); color: var(--danger); }
.workspace-message.success { border-color: color-mix(in srgb, var(--success) 45%, var(--line)); color: var(--success); }

/* Banco di lavoro */
.studio-layout { display: grid; grid-template-columns: 190px minmax(600px, 1fr) 286px; align-items: start; gap: 16px; }
.toolbox, .canvas-pane, .inspector, .results-tray { border: 1px solid var(--line); background: var(--paper-raised); }
.toolbox, .inspector { min-height: clamp(330px, calc(100vh - 420px), 480px); border-radius: 14px; }
.toolbox { padding: 16px 12px; }
.toolbox-title { margin: 0; color: var(--ink); font-size: var(--fs-2xs); font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.toolbox-copy, .toolbox-guide p:last-child { margin: 4px 0 12px; color: var(--ink-faint); font-size: var(--fs-2xs); line-height: 1.4; }
.block-palette { display: grid; gap: 8px; }
.block-palette button { min-height: 50px; display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--line); background: var(--paper-sunken); text-align: left; }
.block-palette button:hover { border-color: var(--accent); background: var(--accent-soft); }
.block-palette span { display: grid; gap: 1px; }
.block-palette b { font-size: var(--fs-xs); }
.block-palette small { color: var(--ink-faint); font-size: var(--fs-2xs); }
.shape { width: 29px; height: 23px; flex: none; display: grid; place-items: center; border: 1.7px solid var(--accent); color: var(--accent); font-style: normal; }
.stock-shape { border-radius: 4px; }
.variable-shape { border-radius: 50%; }
.constant-shape { width: 22px; height: 22px; margin-inline: 4px; border-color: var(--lever); transform: rotate(45deg); }
.flow-shape { border: 0; font-size: var(--fs-xl); }
.toolbox-guide { margin-top: 12px; padding: 8px 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.legend { display: grid; gap: 8px; padding: 12px 8px 0; color: var(--ink-faint); font-size: var(--fs-2xs); }
.legend span { display: flex; align-items: center; gap: 8px; }
.legend-line { width: 20px; height: 2px; background: var(--accent); }
.legend-line.negative { background: var(--leva); }

.canvas-pane { min-width: 0; overflow: hidden; border-radius: 14px; }
.canvas-head { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 12px; border-bottom: 1px solid var(--line); color: var(--ink-faint); font-size: var(--fs-2xs); }
.canvas-tools { display: flex; align-items: center; gap: 4px; }
.zoom-button { min-width: 26px; height: 24px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-raised); color: var(--ink-soft); cursor: pointer; font-size: var(--fs-xs); line-height: 1; }
.zoom-button:hover { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.zoom-button.wide { font-size: var(--fs-2xs); font-weight: 750; }
.zoom-level { min-width: 38px; text-align: center; font: var(--fs-2xs) var(--font-sans); font-variant-numeric: tabular-nums; }
.canvas-head > div { display: flex; align-items: center; gap: 8px; }
.model-status { padding: 4px 8px; border-radius: 999px; font-weight: 800; }
.model-status.valid { background: var(--accent-soft); color: var(--accent-strong); }
.model-status.invalid { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
/* La lavagna: nessun bordo, si scorre e si ingrandisce. I puntini seguono lo
   spostamento e la scala, altrimenti il foglio sembrerebbe fermo mentre il
   disegno si muove. */
.canvas-frame { height: clamp(280px, calc(100vh - 550px), 460px); position: relative; overflow: hidden; background-color: var(--paper-sunken); background-image: radial-gradient(color-mix(in srgb, var(--line) 45%, transparent) .7px, transparent .7px); background-size: 20px 20px; cursor: grab; touch-action: none; }
.canvas-frame.is-panning { cursor: grabbing; }
.canvas-svg { width: 100%; height: 100%; display: block; touch-action: none; user-select: none; }
.canvas-help { letter-spacing: .03em; }
.simulation-bar { height: 48px; display: flex; align-items: center; gap: 8px; padding: 8px 8px; border-top: 1px solid var(--line); }
.simulation-bar button { width: 34px; height: 32px; border: 1px solid var(--line); background: var(--paper-raised); }
.simulation-bar input { flex: 1; accent-color: var(--accent); }
.simulation-bar output { width: 110px; color: var(--ink-faint); font-size: var(--fs-2xs); text-align: right; }
.duration-field { display: flex; align-items: center; gap: 4px; color: var(--ink-faint); font-size: var(--fs-2xs); white-space: nowrap; }
.duration-field input { width: 58px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-sunken); color: var(--ink); font-size: var(--fs-2xs); }
.inspector .deep code { color: var(--ink-soft); font: var(--fs-2xs) var(--font-mono); }

/* SVG editor ereditato dal motore legacy */
.node-shape { fill: var(--paper-raised); stroke: var(--accent); stroke-width: 2; }
.node-shape-variable { fill: var(--surface-2); }
.node-shape-constant { fill: color-mix(in srgb, var(--lever) 14%, var(--paper-raised)); stroke: var(--lever); }
.node-name { fill: var(--ink); font-size: var(--canvas-name); font-weight: 650; pointer-events: none; }
.node-value { fill: var(--ink-soft); font: var(--canvas-value) var(--font-sans); font-variant-numeric: tabular-nums; pointer-events: none; }
.node-handle { fill: var(--paper-raised); stroke: var(--ink-faint); stroke-width: 1.5; cursor: crosshair; opacity: .65; }
.node-handle:hover { opacity: 1; fill: var(--accent); stroke: var(--accent); }
.node .node-shape { cursor: grab; }
.node.is-selected .node-shape { stroke: var(--accent-strong); stroke-width: 4; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 45%, transparent)); }
.edge-path { cursor: pointer; opacity: .82; }
.edge:hover .edge-path { stroke-width: 3.8; opacity: 1; }
.edge.is-selected .edge-path { stroke-width: 4.5; opacity: 1; }
.edge-badge { stroke: var(--paper-sunken); stroke-width: 1.5; }
.edge-sign { fill: var(--on-brand); font-size: var(--canvas-mark); font-weight: 850; pointer-events: none; }
.canvas-frame.is-dragging-node, .canvas-frame.is-dragging-node .node-shape { cursor: grabbing; }

/* La vasca. Lo stock mostra quanto contiene; il flusso e' un rubinetto su un
   tubo; la materia arriva da una nuvola o ci finisce quando esce dal confine
   del modello. I tubi sono spessi e diritti, le influenze sottili e curve:
   due cose diverse, due segni diversi. */
.stock-level { fill: color-mix(in srgb, var(--accent) 26%, transparent); pointer-events: none; transition: y var(--dur-tap) linear, height var(--dur-tap) linear; }
.stock-level-group { pointer-events: none; }
.node-shape-flow { fill: var(--paper-raised); stroke: var(--accent); stroke-width: 2.2; }
.flow-valve { fill: var(--accent); opacity: .9; pointer-events: none; }
.node-flow .node-value { font-size: var(--canvas-mark); }
/* I nomi fuori dalle forme hanno un bordo del colore della lavagna: una
   freccia che passa vicino resta sotto il testo invece di tagliarlo. */
.node-flow .node-name, .node-flow .node-value, .node-constant .node-name { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
/* Da lontano i nomi sfumano (--fade, calcolato dallo zoom) e tornano pieni al
   passaggio o alla selezione; un nome uscito sotto una forma piccola ha lo
   stesso bordo dei nomi esterni. */
.node .node-name, .node .node-value { opacity: var(--fade, 1); transition: opacity var(--dur-move, .2s) var(--ease, ease); }
.node:hover .node-name, .node:hover .node-value, .node.is-selected .node-name, .node.is-selected .node-value, .node.is-related .node-name, .node.is-related .node-value { opacity: 1; }
.node.name-below .node-name { paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }
.canvas-svg .edge.edge-pipe .edge-path { stroke: none; stroke-width: 0; opacity: 1; marker-end: none; cursor: pointer; transition: fill var(--dur-move) var(--ease-inout), filter var(--dur-tap) var(--ease); }
.canvas-svg .edge.edge-pipe:hover .edge-path { filter: brightness(1.12); }
.canvas-svg .edge.edge-pipe.is-selected .edge-path { stroke: var(--accent-strong); stroke-width: 2.5; }
.pipe-inner { fill: var(--paper-raised); pointer-events: none; }
.pipe-head { pointer-events: none; transition: fill var(--dur-move) var(--ease-inout); }
.cloud-pipe-outer { fill: var(--ink-faint); opacity: .5; }
.cloud-shape { fill: var(--paper-raised); stroke: var(--ink-faint); stroke-width: 1.6; stroke-linejoin: round; }
.cloud { pointer-events: none; }
.canvas-svg .edge.edge-info .edge-path { stroke-width: 1.7; }
.canvas-svg .edge.edge-info:hover .edge-path { stroke-width: 3; }
.canvas-svg .edge.edge-info.is-selected .edge-path { stroke-width: 3.6; }
.canvas-svg.has-influence .cloud { opacity: .25; }
.canvas-frame.is-drawing-edge { box-shadow: inset 0 0 0 2px var(--accent); }

/* Inspector */
.inspector { padding: 20px; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.inspector-head { min-height: 26px; display: flex; justify-content: space-between; align-items: start; border-bottom: 1px solid var(--line); }
.icon-button { width: 24px; height: 24px; border: 0; background: transparent; color: var(--ink-faint); font-size: var(--fs-md); }
.empty-inspector { padding: 48px 8px 32px; text-align: center; }
.empty-icon { color: var(--accent); font-size: var(--fs-xl); }
.empty-inspector h3 { margin: 8px 0 8px; font-size: var(--fs-sm); }
.empty-inspector p { margin: 0; color: var(--ink-faint); font-size: var(--fs-2xs); }
.type-legend { display: grid; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: var(--fs-2xs); }
.type-legend .toolbox-title { margin-bottom: 4px; }
.type-legend span { display: flex; align-items: center; gap: 8px; }
.mini { width: 20px; height: 14px; display: inline-block; border: 1.5px solid var(--accent); }
.mini.variable { border-radius: 50%; }
.mini.constant { width: 13px; height: 13px; margin: 0 4px; border-color: var(--lever); transform: rotate(45deg); }
.selection-kind { margin-top: 16px; color: var(--accent-strong); font-size: var(--fs-2xs); font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.inspector h3 { margin: 16px 0 16px; font-size: var(--fs-lg); line-height: 1.15; }
.field { display: grid; gap: 4px; margin-bottom: 12px; }
.field > span, .field-title { color: var(--ink-soft); font-size: var(--fs-2xs); font-weight: 750; }
.field small, .curve-help { color: var(--ink-faint); font-size: var(--fs-2xs); }
.field input, .field select { width: 100%; padding: 8px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-sunken); color: var(--ink); font-size: var(--fs-xs); }
.relation-hint { margin: -4px 0 16px; color: var(--ink-faint); font-size: var(--fs-2xs); }
.curve-help { margin: 2px 0 8px; }
.curve-controls { height: 125px; display: flex; justify-content: space-between; gap: 4px; margin-bottom: 16px; padding: 8px 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-sunken); }
.curve-controls label { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.curve-controls input { width: 88px; height: 12px; margin: 40px -32px 36px; transform: rotate(-90deg); accent-color: var(--accent); }
.curve-controls small { color: var(--ink-faint); font-size: var(--fs-2xs); }

/* Risultati
   Il grafico si costruisce mentre il sistema gira e dichiara la propria
   scala: senza assi una curva non risponde a "quanto" e a "quando". */
/* La striscia del comportamento sta dentro il riquadro della mappa: la
   struttura e la curva che ne segue vanno guardate insieme, e su un
   portatile in due sezioni separate non ci starebbero. */
.behavior-strip { padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.results-head { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; }
.results-head h2 { margin: 0; font-size: var(--fs-sm); }
.results-head > p { max-width: 55%; margin: 0; color: var(--ink-faint); font-size: var(--fs-2xs); text-align: right; }
.behavior-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px; margin-top: 8px; }
.chart-card { padding: 8px 8px 4px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-sunken); }
.chart-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.chart-head b { font-size: var(--fs-sm); }
.chart-value { color: var(--accent-strong); font: var(--fs-xs) var(--font-sans); font-variant-numeric: tabular-nums; }
.behavior-chart { width: 100%; height: 132px; display: block; margin-top: 4px; }
.behavior-line { stroke: var(--accent); stroke-width: 2.5; fill: none; stroke-linejoin: round; }
.chart-grid { stroke: var(--line); stroke-width: 1; }
.chart-axis { stroke: var(--ink-faint); stroke-width: 1.2; }
/* La curva di prima: sotto quella nuova, sottile e grigia, con una parola. */
.behavior-ghost { stroke: var(--ink-faint); stroke-width: 1.6; stroke-dasharray: 4 3; opacity: .8; pointer-events: none; }
.behavior-ghost-label { fill: var(--ink-faint); font: 500 12px var(--font-sans); pointer-events: none; }
.chart-axis-label { fill: var(--ink-soft); font: var(--canvas-mark) var(--font-sans); font-variant-numeric: tabular-nums; }
.chart-cursor { fill: var(--accent-strong); stroke: var(--paper-sunken); stroke-width: 2; }
.chart-foot { display: flex; justify-content: space-between; margin-top: 2px; color: var(--ink-soft); font-size: var(--fs-2xs); }
.charts-empty { grid-column: 1 / -1; display: grid; place-items: center; align-content: center; min-height: 145px; border: 1px dashed var(--line); border-radius: 8px; color: var(--ink-faint); text-align: center; }
.charts-empty span { color: var(--accent); font-size: var(--fs-xl); }
.charts-empty p { max-width: 370px; margin: 4px; font-size: var(--fs-2xs); }


/* Il valore si trascina: il cursore e il numero dicono la stessa cosa e si
   inseguono, cosi' si puo' esplorare a mano o essere precisi a tastiera. */
.value-control { display: grid; grid-template-columns: 1fr 78px; gap: 8px; align-items: center; }
.value-control input[type="range"] { width: 100%; accent-color: var(--accent); }
.value-control input[type="number"] { width: 100%; padding: 8px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-sunken); color: var(--ink); font-size: var(--fs-xs); }

/* La ricetta: un elenco di passi che si legge come una frase. */
.recipe { margin: 16px 0 4px; padding: 12px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-sunken); }
.recipe ol { margin: 8px 0 8px; padding: 0; list-style: none; display: grid; gap: 4px; }
.recipe li { display: grid; grid-template-columns: 46px 1fr 22px; align-items: center; gap: 8px; font-size: var(--fs-xs); }
.recipe li b { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.recipe .recipe-first { color: var(--ink-faint); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .07em; line-height: 1.1; }
.recipe li select { text-align: center; }
.recipe select { min-width: 0; padding: 4px 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-raised); color: var(--ink-soft); font-size: var(--fs-2xs); }
.recipe-remove { width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink-faint); cursor: pointer; }
.recipe-remove:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.recipe-empty { margin: 8px 0 8px; color: var(--ink-faint); font-size: var(--fs-2xs); }
.recipe-add { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.recipe-add button { grid-column: 1 / -1; padding: 8px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-raised); color: var(--ink); font-size: var(--fs-2xs); font-weight: 750; cursor: pointer; }
.recipe-add button:hover { border-color: var(--accent); color: var(--accent-strong); }

/* Il confine del sistema: un foglio sotto al disegno, non un elemento del
   sistema. Solo il bordo e l'etichetta rispondono al puntatore, cosi' si
   continua a scorrere la lavagna trascinando al suo interno. */
.boundary-frame { fill: none; stroke: var(--ink-faint); stroke-width: 1.6; stroke-dasharray: 9 7; pointer-events: stroke; cursor: move; }
.boundary-label { fill: var(--ink-soft); font-size: var(--canvas-value); font-weight: 750; cursor: move; }
.boundary-grip { fill: var(--paper-raised); stroke: var(--ink-faint); stroke-width: 1.5; cursor: nwse-resize; }
.boundary.is-selected .boundary-frame { stroke: var(--accent); stroke-width: 2.4; }
.boundary.is-selected .boundary-label { fill: var(--accent-strong); }
.boundary-shape { border: 1.6px dashed var(--ink-faint); border-radius: 4px; }
.icon-action { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--ink-soft); cursor: pointer; font-size: var(--fs-sm); line-height: 1; }
.icon-action:hover:not(:disabled) { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.icon-action:disabled { opacity: .35; cursor: default; }

/* Orientamento
   Una riga sola, nel punto in cui si sta gia' guardando, che dice qual e' la
   prossima mossa. Niente tour, niente tooltip sparsi: quelli sono il modo in
   cui un'interfaccia confessa che il disegno non regge. */
.workspace-hint { margin: 2px 0 0; color: var(--ink-soft); font-size: var(--fs-xs); max-width: 78ch; }
.canvas-hint { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); max-width: 44ch; margin: 0; padding: 8px 16px; border: 1px dashed var(--line); border-radius: 14px; background: color-mix(in srgb, var(--paper-raised) 92%, transparent); color: var(--ink-soft); font-size: var(--fs-xs); text-align: center; pointer-events: none; }
.inspector-value { margin: 2px 0 8px; color: var(--accent-strong); font: var(--fs-sm) var(--font-sans); font-variant-numeric: tabular-nums; }
.inspector-story { margin: 0 0 16px; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.5; }
.inspector-story b { color: var(--ink); }
.inspector .deep { margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: var(--fs-2xs); }
.inspector .deep summary { color: var(--ink-soft); cursor: pointer; font-size: var(--fs-xs); font-weight: 750; }
.inspector .deep p { margin: 8px 0 0; }
.field select { width: 100%; padding: 8px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-sunken); color: var(--ink); font-size: var(--fs-xs); }
.mini.stock { border-radius: 3px; }
.hero-action span { font-size: var(--fs-lg); line-height: 0; }
.block-palette button { cursor: grab; touch-action: none; }
.block-palette button:active { cursor: grabbing; }

/* Schermo intero: la lavagna prende tutta la finestra, con la palette e
   l'Inspector ancora a portata di mano. Uscire con Esc o con il pulsante. */
body.has-fullscreen-studio { overflow: hidden; }
.workspace-view.is-fullscreen { position: fixed; inset: 0; z-index: 40; max-width: none; margin: 0; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; background: var(--paper); }
.workspace-view.is-fullscreen .workspace-bar { flex: none; min-height: 0; padding-bottom: 4px; }
.workspace-view.is-fullscreen .studio-layout { flex: 1; min-height: 0; }
.workspace-view.is-fullscreen .toolbox, .workspace-view.is-fullscreen .inspector { min-height: 0; height: 100%; overflow-y: auto; }
.workspace-view.is-fullscreen .canvas-pane { display: flex; flex-direction: column; height: 100%; }
.workspace-view.is-fullscreen .canvas-frame { flex: 1; height: auto; min-height: 0; }
.workspace-view.is-fullscreen .behavior-strip { flex: none; }

/* Salvataggi */
.systems-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 32px; }
.systems-head h1 { margin: 8px 0 4px; font-size: var(--fs-display); letter-spacing: -.055em; }
.systems-head p { margin: 0; color: var(--ink-soft); }
.import-button { position: relative; overflow: hidden; cursor: pointer; }
.import-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.saved-systems { display: grid; gap: 8px; }
.saved-card { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-raised); }
.saved-card h2 { margin: 4px 0; font-size: var(--fs-md); }
.saved-card p, .saved-kind { margin: 0; color: var(--ink-faint); font-size: var(--fs-2xs); }
.saved-kind { color: var(--accent-strong); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.saved-actions { display: flex; gap: 4px; }
.systems-empty { padding: 48px; border: 1px dashed var(--line); border-radius: 14px; text-align: center; }
.systems-empty h2 { margin: 0; }
.systems-empty p { margin: 8px 0 20px; color: var(--ink-soft); }
.systems-empty a { display: inline-block; text-decoration: none; }

@media (max-width: 1250px) {
  .studio-layout { grid-template-columns: 164px minmax(560px, 1fr) 260px; }
  .toolbox-copy, .block-palette small, .canvas-help { display: none; }
  .results-tray { margin-left: 174px; }
  .workspace-actions .quiet { display: none; }
}
@media (max-width: 1050px) {
  .studio-layout { grid-template-columns: 1fr 270px; }
  .toolbox { grid-column: 1 / -1; min-height: 0; display: flex; align-items: center; gap: 8px; }
  .toolbox > div:first-child, .toolbox-guide, .legend { display: none; }
  .block-palette { display: flex; }
  .block-palette button { min-height: 48px; }
  .results-tray { margin-left: 0; }
  .save-state { display: none; }
}

/* Experiment controls stay within reach while the map uses the available width. */
.studio-layout.exploring { grid-template-columns: minmax(560px, 1fr) 310px; }
.studio-layout.exploring .toolbox { display: none; }
.workspace-hint { min-height: 32px; max-height: 32px; overflow: hidden; }
.experiment-controls { display: grid; gap: 12px; }
.experiment-control { border: 1px solid transparent; border-top-color: var(--line); border-radius: 8px; padding: 12px 8px; margin-inline: -8px; }
.control-name { display: block; background: none; border: 0; padding: 0; color: var(--ink); text-align: left; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.control-name:hover { color: var(--accent); text-decoration: underline; }
.experiment-control > label { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: var(--fs-xs); color: var(--ink-soft); }
.experiment-control input, .schedule-controls input { width: 84px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-sunken); color: var(--ink); }
.experiment-control .experiment-slider { display: block; width: 100%; height: 26px; margin: 8px 0 0; padding: 0; border: 0; accent-color: var(--accent); cursor: ew-resize; background: transparent; }
.schedule-controls { display: flex; gap: 12px; margin-top: 12px; font-size: var(--fs-xs); color: var(--ink-soft); }
.schedule-controls label { display: grid; gap: 4px; }
.observation-toolbar { display: flex; align-items: center; gap: 12px; margin: 4px 0; font-size: var(--fs-xs); }
.observation-toolbar button { padding: 4px 8px; }
.observation-picker { position: relative; }
.observation-picker summary { cursor: pointer; }
#observation-options { position: absolute; z-index: 12; bottom: 24px; right: 0; width: 260px; max-height: 260px; overflow-y: auto; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-raised); box-shadow: 0 8px 20px #0005; }
#observation-options label { display: flex; align-items: center; gap: 8px; padding: 4px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: var(--fs-xs); margin-top: 4px; }
.chart-legend span { display: inline-flex; gap: 4px; align-items: center; }
.chart-legend i { display: inline-block; width: 16px; height: 0; border-top: 2px solid; }
.edge.is-related .edge-path { stroke-width: 3.5; }
.node.is-related .node-shape { stroke-width: 2.8; }
#observe-node-button { margin: 8px 0; width: 100%; }
.canvas-help { display: none; }
@media (max-width: 1100px) { .studio-layout.exploring { grid-template-columns: minmax(480px, 1fr) 270px; } }

/* One visual path connects the active control, model and plotted series. */
.workspace-view { padding-top: 16px; }
.workspace-identity p { color: var(--ink-soft); font-size: var(--fs-xs); }
.influence-guide { min-height: 70px; padding: 12px 16px; display: flex; gap: 12px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.influence-guide p { margin: 0; }
#influence-label { font-size: var(--fs-sm); font-weight: 650; }
#influence-detail { margin-top: 4px; font-size: var(--fs-xs); color: var(--ink-soft); }
.influence-guide.is-active { background: var(--accent-soft); }
.influence-guide .quiet { flex: none; font-size: var(--fs-xs); }
.experiment-control.is-active { background: var(--accent-soft); border-color: var(--accent); }
.canvas-svg.has-influence .node:not(.is-related) { opacity: .35; }
.canvas-svg.has-influence .edge:not(.is-related) { opacity: .16; }
.canvas-svg.has-influence .node:not(.is-related) .node-value { visibility: hidden; }
.node.is-source .node-shape { stroke-width: 4; stroke: var(--lever); }
.node.node-flow.is-related .node-shape { stroke: var(--series-color, var(--accent)); }
.node.node-flow.is-related .node-value { fill: var(--series-color, var(--ink-soft)); }
.edge.is-related .edge-path { opacity: 1; stroke-width: 3.2; }
.edge.is-feedback .edge-path { stroke-dasharray: 7 4; }
.exploring .node-handle { opacity: 0; }
.exploring .node:hover .node-handle { opacity: .8; }
.exploring #model-count { display: none; }
.canvas-head .zoom-button { min-height: 30px; min-width: 30px; }
.canvas-head .zoom-button.wide { font-size: var(--fs-2xs); }
.simulation-bar output, .duration-field { font-size: var(--fs-xs); color: var(--ink-soft); }
.chart-card.is-related { border-color: var(--accent); }
.chart-context { margin: 4px 0 8px; font-size: var(--fs-2xs); color: var(--accent-strong); }
.chart-card.is-muted, .chart-legend .is-muted { opacity: .45; }
.behavior-line.is-related { stroke-width: 3.5; }
.behavior-line.is-muted { opacity: .2; }
#time-slider { min-height: 30px; }
@media (max-width: 1250px) {
  .studio-layout { grid-template-columns: 150px minmax(440px, 1fr) 260px; gap: 12px; }
  .influence-guide { min-height: 82px; }
}

.inspector .influence-guide { margin: 0 -8px 12px; padding: 16px 8px; border-radius: 8px; align-items: start; flex-direction: column; gap: 8px; }
.inspector #influence-label { font-size: var(--fs-md); }
.inspector #influence-detail { font-size: var(--fs-xs); line-height: 1.5; }
.inspector .influence-guide .quiet { padding: 4px 0; color: var(--accent-strong); }
.behavior-strip { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; }
.behavior-strip .observation-toolbar { justify-content: end; }
.behavior-strip .results-head > p { display: none; }
.behavior-charts { grid-column: 1 / -1; }

/* --- Movimento -------------------------------------------------------------
   Fino a qui l'applicazione mostrava stati: ogni cambiamento sostituiva il
   precedente di colpo, e la mappa veniva ricostruita da zero a ogni
   fotogramma, cosi' che nessun elemento sopravvivesse abbastanza da poter
   essere animato. Adesso il disegno resta e cambiano solo i valori: da qui
   in avanti quello che si vede e' la transizione, non la sostituzione. */

/* Comandi: rispondono al dito prima di rispondere al sistema. */
.primary, .secondary, .quiet, .danger, .icon-action, .zoom-button, .theme-toggle,
.back-link, .simulation-bar button, .recipe-remove, .recipe-add button, .tag, .filters select {
  transition: background-color var(--dur-tap) var(--ease),
              border-color var(--dur-tap) var(--ease),
              color var(--dur-tap) var(--ease),
              opacity var(--dur-tap) var(--ease),
              transform var(--dur-tap) var(--ease);
}
.primary:active, .secondary:active, .quiet:active, .icon-action:active:not(:disabled),
.zoom-button:active, .back-link:active, .simulation-bar button:active { transform: scale(.96); }
.topbar nav a { transition: color var(--dur-tap) var(--ease), border-color var(--dur-move) var(--ease); }
.catalog-card { transition: transform var(--dur-move) var(--ease), border-color var(--dur-move) var(--ease), box-shadow var(--dur-move) var(--ease); }
.catalog-card:active { transform: translateY(-1px); }

/* La palette: si prende, non si preme. */
.block-palette button { transition: background-color var(--dur-tap) var(--ease), border-color var(--dur-tap) var(--ease), transform var(--dur-tap) var(--ease-grab); }
.block-palette button:hover { transform: translateX(2px); }

/* La mappa. Il colore di un arco dice da che parte sta spingendo in questo
   istante: se cambia di scatto si legge come un lampeggio, se transisce si
   legge come una forza che si inverte. */
.edge-path { transition: stroke var(--dur-move) var(--ease-inout), stroke-width var(--dur-tap) var(--ease), opacity var(--dur-move) var(--ease); }
.edge-badge, .edge-sign { transition: fill var(--dur-move) var(--ease-inout), opacity var(--dur-move) var(--ease); }
.edge { transition: opacity var(--dur-move) var(--ease); }
.node { transition: opacity var(--dur-move) var(--ease); }
.node-shape { transition: stroke var(--dur-move) var(--ease), stroke-width var(--dur-tap) var(--ease-grab), fill var(--dur-move) var(--ease), filter var(--dur-move) var(--ease); }
.node-value { transition: fill var(--dur-move) var(--ease); }
.node-handle { transition: opacity var(--dur-tap) var(--ease), fill var(--dur-tap) var(--ease), stroke var(--dur-tap) var(--ease); }
.node:hover .node-shape { stroke-width: 3; }
.canvas-frame.is-dragging-node .node-shape, .canvas-frame.is-panning .node-shape { transition: none; }
.boundary-frame, .boundary-label { transition: stroke var(--dur-move) var(--ease), fill var(--dur-move) var(--ease); }

/* I grafici: la curva si allunga, non ricompare. */
.behavior-line { transition: stroke-width var(--dur-move) var(--ease), opacity var(--dur-move) var(--ease); }
.chart-cursor { transition: opacity var(--dur-move) var(--ease); }
.chart-card { transition: border-color var(--dur-move) var(--ease), opacity var(--dur-move) var(--ease); }

/* Pannelli e stati: quello che compare, entra. */
.influence-guide, .experiment-control { transition: background-color var(--dur-move) var(--ease), border-color var(--dur-move) var(--ease); }
.model-status, .save-state, .workspace-message { transition: background-color var(--dur-move) var(--ease), color var(--dur-move) var(--ease), border-color var(--dur-move) var(--ease); }
.workspace-message:not(.hidden), .canvas-hint:not(.hidden), .empty-inspector, .charts-empty { animation: rise var(--dur-enter) var(--ease) backwards; }
#selection-panel > * { animation: rise var(--dur-enter) var(--ease) backwards; }
.catalog-card { animation: rise var(--dur-enter) var(--ease) backwards; animation-delay: calc(var(--card-index, 0) * 28ms); }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Il cursore del tempo e i cursori dei parametri: la mano tira, il sistema
   segue. Nessuna transizione qui, il ritardo si sentirebbe come attrito. */
input[type="range"] { transition: none; }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-move); animation-timing-function: var(--ease); }

@media (prefers-reduced-motion: reduce) {
  .stock-level { transition: none; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* Modalità «guarda» (?modo=guarda): il sistema dentro un'altra pagina della suite, come una diapositiva di Sinopia.
   Restano la lavagna, «Simula» e il grafico; niente si salva. */
html.guarda .topbar, html.guarda #back-to-library, html.guarda #save-state, html.guarda #undo-button, html.guarda #redo-button,
html.guarda #reset-model-button, html.guarda #export-button, html.guarda #model-toolbox, html.guarda #toolbox-toggle,
html.guarda .canvas-help, html.guarda #fullscreen-toggle { display: none !important; }
html.guarda #document-title { pointer-events: none; }