/* Refinery Atlas · token e componenti (design system "Refinery Atlas", versione 0.4 "Sala controllo").
   Solo tema scuro, una sola famiglia sans (IBM Plex Sans) più IBM Plex Mono per dati e tag, scala compatta.
   I colori semantici (ok, warn, alarm, flow) e i colori dei fluidi (--f-*) valgono solo per i dati. L'accento (blu) è identitario. */
:root{
  --bg:#0a0c0f;--surface-1:#0e1217;--surface-2:#151a21;--surface-3:#1b222b;--grid:#11161c;--line:#1e252e;--line-strong:#2b3541;--ink:#e6e9ed;--ink-2:#a6b0bc;--ink-3:#7a8594;--accent:#4c90f0;--on-accent:#06090d;--flow:#37b8cc;--ok:#3dcc91;--warn:#e5a63a;--alarm:#f0645a;--flow-dim:#37b8cc1a;--ok-dim:#3dcc911a;--warn-dim:#e5a63a1a;--alarm-dim:#f0645a1a;--shadow-pop:0 8px 24px 0 #000000a0;--shadow-focus:0 0 0 2px #0a0c0f, 0 0 0 4px #4c90f0;
  --scene-1:#1f2833;--scene-2:#12171d;--scene-3:#0a0c0f;--scene-grid:#11161c;--scene-n1:#0E1520;--scene-n2:#080B10;--scene-n3:#040507;--scene-ngrid:#0A0E13;
  --f-crude:#A9805C;--f-nap:#E6CB6A;--f-kero:#E5AB4A;--f-diesel:#CF8D4A;--f-vgo:#B8794A;--f-vr:#8C6A52;--f-gasoline:#EBCB5C;--f-lpg:#E9B04A;--f-gas:#8E999F;--f-mid:#D0A24C;--f-h2:#5BB4D3;--f-fuel:#A3B27A;--f-acid:#D9776B;--f-steam:#8FB2C9;--f-coke:#9A9A9A;--f-sulfur:#E3CF4A;--rib-line:rgba(255,255,255,.42);
  color-scheme:dark;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--radius-none:0;--radius-sm:2px;--radius-md:3px;--radius-full:999px;--dur-fast:150ms;--dur-base:250ms;--dur-stagger:80ms;--dur-flow:2400ms;--ease-standard:cubic-bezier(0.2, 0, 0, 1);--ease-flow:linear;--z-canvas:0;--z-hud:10;--z-nav:20;--z-overlay:40;--z-modal:60;
  --font-sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;--font-display:var(--font-sans);
  /* scala tipografica compatta: salti netti */
  --t-micro:10px;--t-small:11px;--t-body:13px;--t-lead:15px;--t-h2:20px;--t-h1:34px;
  --rib-a:.7;--hero-bg:#0a0c0f;--hero-ink:#e6e9ed;
  /* nomi storici del motore, ora alias dei token Atlas */
  --page:var(--bg);--panel:var(--surface-1);--panel-2:var(--surface-2);--line-2:var(--line);--sel:var(--accent);--sel-ink:var(--on-accent);--alm-hi:var(--alarm);--alm-md:var(--warn);--shadow:var(--shadow-pop);
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}

/* Refinery Atlas, componenti. Solo variabili di token, prefisso ra-. Solo tema scuro. */

/* ---------- Foglio e tipografia di servizio ---------- */
.ra-sheet {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
}
.ra-label {
  font-family: var(--font-mono);
  font-size: 10px; line-height: 14px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}
.ra-unit { font-family: var(--font-mono); font-size: 11px; line-height: 14px; color: var(--ink-3); }
.ra-tag { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink); letter-spacing: 0.02em; }
.ra-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Cornice da foglio di disegno: filetto sottile e tacche d'angolo */
.ra-frame { position: relative; background: var(--surface-1); border: 1px solid var(--line); }
.ra-frame::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) 0 0 / 10px 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) 0 0 / 1px 10px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) 100% 0 / 10px 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) 100% 0 / 1px 10px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) 0 100% / 10px 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) 0 100% / 1px 10px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) 100% 100% / 10px 1px no-repeat,
    linear-gradient(var(--line-strong), var(--line-strong)) 100% 100% / 1px 10px no-repeat;
}

/* ---------- Tubazioni e flusso ---------- */
.ra-pipe { height: 1px; background: var(--line-strong); }
.ra-pipe--flow {
  height: 2px;
  background-image: linear-gradient(90deg, var(--flow) 0 6px, transparent 6px 14px);
  background-size: 14px 2px; background-repeat: repeat-x;
  animation: ra-run-x calc(var(--dur-flow) / 4) var(--ease-flow) infinite;
}
@keyframes ra-run-x { from { background-position: 0 0; } to { background-position: 14px 0; } }
@keyframes ra-run-y { from { background-position: 0 -48px; } to { background-position: 0 calc(100% + 48px); } }
@keyframes ra-dash { to { stroke-dashoffset: -14; } }
@keyframes ra-in { from { opacity: 0; transform: translateY(8px); } }
.ra-reveal { animation: ra-in var(--dur-base) var(--ease-standard) both; animation-delay: calc(var(--i, 0) * var(--dur-stagger)); }

/* ---------- Cartiglio ---------- */
.ra-cartiglio {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px;
  background: var(--line-strong); border: 1px solid var(--line-strong);
}
.ra-cartiglio > * { background: var(--surface-1); padding: var(--space-2) var(--space-3); min-width: 0; display: grid; gap: var(--space-1); align-content: start; }
.ra-cartiglio .s3 { grid-column: span 3; }
.ra-cartiglio .s4 { grid-column: span 4; }
.ra-cartiglio .s6 { grid-column: span 6; }
.ra-cartiglio .s8 { grid-column: span 8; }
.ra-cartiglio__unit { font-family: var(--font-display); font-weight: 500; font-size: 18px; line-height: 24px; color: var(--ink); }
.ra-cartiglio__unit .code { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.02em; color: var(--accent); margin-right: var(--space-2); }
@media (max-width: 640px) { .ra-cartiglio .s3, .ra-cartiglio .s4, .ra-cartiglio .s6, .ra-cartiglio .s8 { grid-column: span 6; } .ra-cartiglio .s8 { grid-column: 1 / -1; } }

/* ---------- Pannello KPI ---------- */
.ra-kpi { padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.ra-kpi__head { display: block; }
.ra-kpi__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.ra-nowrap { white-space: nowrap; }
.ra-kpi__value { display: flex; align-items: baseline; gap: var(--space-2); font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 32px; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ra-kpi--hero .ra-kpi__value { font-size: 40px; line-height: 44px; }
.ra-kpi__value .ra-unit { font-size: 11px; line-height: 16px; }
.ra-kpi[data-state="warn"] .ra-kpi__value { color: var(--warn); }
.ra-kpi[data-state="alarm"] .ra-kpi__value { color: var(--alarm); }
.ra-kpi__foot { display: flex; justify-content: space-between; gap: var(--space-3); font-family: var(--font-mono); font-size: 11px; line-height: 14px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: var(--space-2); }

/* ---------- Tabella dati ---------- */
.ra-scroll { overflow-x: auto; }
.ra-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; color: var(--ink); }
.ra-table th { text-align: left; white-space: nowrap; font-family: var(--font-mono); font-size: 10px; line-height: 14px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); padding: 6px var(--space-3); border-bottom: 1px solid var(--line-strong); }
.ra-table td { padding: 6px var(--space-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
.ra-table tbody th { background: none; text-transform: none; letter-spacing: 0; font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--line); }
.ra-table .num { text-align: right; }
.ra-table td .ra-unit { margin-left: var(--space-1); }
.ra-table tbody tr { transition: background var(--dur-fast) var(--ease-standard); }
.ra-table tbody tr:hover { background: var(--surface-2); }
.ra-table caption { text-align: left; padding: 0 0 var(--space-2); }

/* ---------- Stato e tag strumento ---------- */
.ra-status {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono); font-size: 10px; line-height: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px var(--space-2); border-radius: var(--radius-sm); white-space: nowrap;
  color: var(--ink-2); background: var(--surface-2);
}
.ra-status::before { content: ""; width: 8px; height: 8px; background: currentColor; flex: none; }
.ra-status[data-state="ok"] { color: var(--ok); background: var(--ok-dim); }
.ra-status[data-state="ok"]::before { border-radius: 50%; }
.ra-status[data-state="warn"] { color: var(--warn); background: var(--warn-dim); }
.ra-status[data-state="warn"]::before { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ra-status[data-state="alarm"] { color: var(--alarm); background: var(--alarm-dim); }
.ra-status[data-state="alarm"]::before { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ra-status[data-state="flow"] { color: var(--flow); background: var(--flow-dim); }
.ra-status[data-state="flow"]::before { clip-path: polygon(0 0, 60% 0, 100% 50%, 60% 100%, 0 100%, 40% 50%); }
.ra-status[data-state="off"]::before { background: transparent; box-shadow: inset 0 0 0 1px currentColor; }
.ra-chip { display: inline-block; font-family: var(--font-mono); font-size: 11px; line-height: 14px; letter-spacing: 0.04em; color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 1px var(--space-2); white-space: nowrap; }

/* ---------- Scheda apparecchiatura ---------- */
.ra-equip { display: grid; grid-template-columns: minmax(112px, 28%) minmax(0, 1fr); }
.ra-equip__plate { background: var(--surface-2); border-right: 1px solid var(--line); padding: var(--space-4); display: grid; align-content: space-between; gap: var(--space-4); }
.ra-equip__tag { font-family: var(--font-display); font-weight: 500; font-size: 16px; line-height: 22px; color: var(--ink); letter-spacing: 0.02em; }
.ra-equip__body { padding: var(--space-4); display: grid; gap: var(--space-3); min-width: 0; align-content: start; }
.ra-equip__title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 18px; line-height: 24px; color: var(--ink); }
.ra-spec { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-5); margin: 0; }
.ra-spec dt { font-family: var(--font-mono); font-size: 10px; line-height: 18px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.ra-spec dd { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.ra-spec dd .ra-unit { margin-left: var(--space-1); }
@media (max-width: 480px) { .ra-equip { grid-template-columns: minmax(0, 1fr); } .ra-equip__plate { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ---------- Indice dei fogli (navigazione) ---------- */
.ra-index { list-style: none; margin: 0; padding: 0; position: relative; width: 100%; max-width: 280px; font-family: var(--font-sans); }
.ra-index::before { content: ""; position: absolute; left: 11px; top: 16px; bottom: 16px; width: 1px; background: var(--line-strong); }
.ra-index::after {
  content: ""; position: absolute; left: 11px; top: 16px; bottom: 16px; width: 1px; pointer-events: none;
  background-image: linear-gradient(to bottom, transparent, var(--flow) 70%, transparent);
  background-size: 1px 48px; background-repeat: no-repeat; background-position: 0 -48px;
  animation: ra-run-y var(--dur-flow) var(--ease-flow) infinite;
}
.ra-index__item { position: relative; z-index: 1; display: grid; grid-template-columns: 24px 56px minmax(0, 1fr); align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-2) var(--space-2) 0; color: var(--ink-2); text-decoration: none; transition: color var(--dur-fast) var(--ease-standard); }
.ra-index__node { width: 9px; height: 9px; margin-left: 7px; border: 1px solid var(--line-strong); background: var(--bg); border-radius: var(--radius-full); transition: background var(--dur-fast) var(--ease-standard); }
.ra-index__code { font-family: var(--font-mono); font-size: 11px; line-height: 14px; color: var(--ink-3); }
.ra-index__name { font-size: 12px; line-height: 16px; }
.ra-index__item:hover { color: var(--ink); }
.ra-index__item:hover .ra-index__node { background: var(--ink-3); }
.ra-index__item[aria-current="page"] { color: var(--ink); }
.ra-index__item[aria-current="page"] .ra-index__node { background: var(--accent); border-color: var(--accent); }
.ra-index__item[aria-current="page"] .ra-index__code { color: var(--accent); }
.ra-index__item:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
/* ---------- Schema di unità (SVG) ---------- */
.ra-schem { display: block; width: 100%; height: auto; }
.ra-schem .pipe { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.ra-schem .flow { fill: none; stroke: var(--flow); stroke-width: 2; stroke-dasharray: 6 8; animation: ra-dash calc(var(--dur-flow) / 4) var(--ease-flow) infinite; }
.ra-schem .eq { fill: var(--surface-1); stroke: var(--ink-2); stroke-width: 1; }
.ra-schem .sym { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.ra-schem .lvl { fill: none; stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; }
.ra-schem .bub { fill: var(--bg); stroke: var(--ink-2); stroke-width: 1; }
.ra-schem .bub.alarm { stroke: var(--alarm); stroke-width: 2; }
.ra-schem .node { fill: var(--ink-2); }
.ra-schem .tx { font-family: var(--font-mono); font-size: 12px; fill: var(--ink); }
.ra-schem .tx-b { font-family: var(--font-mono); font-size: 13px; fill: var(--ink); letter-spacing: 0.02em; }
.ra-schem .tx-m { font-family: var(--font-sans); font-size: 12px; fill: var(--ink-3); }
.ra-schem .tx-a { font-family: var(--font-mono); font-size: 12px; font-weight: 500; fill: var(--alarm); letter-spacing: 0.06em; }
.ra-schem .u { fill: var(--ink-3); }
.ra-schem .arrow { fill: var(--flow); }

/* ---------- Grafico di tendenza ---------- */
.ra-chart__cap { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; padding-bottom: var(--space-2); }
.ra-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.ra-chart .g { stroke: var(--line); stroke-width: 1; }
.ra-chart .ax { font-family: var(--font-mono); font-size: 12px; fill: var(--ink-3); }
.ra-chart .ln { fill: none; stroke: var(--flow); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ra-chart .area { fill: var(--flow-dim); stroke: none; }
.ra-chart .end { fill: var(--flow); stroke: var(--bg); stroke-width: 2; }
.ra-chart .lim { stroke: var(--alarm); stroke-width: 1; stroke-dasharray: 4 4; }
.ra-chart .lim-t { font-family: var(--font-mono); font-size: 12px; fill: var(--alarm); letter-spacing: 0.04em; }
.ra-chart .dir { font-family: var(--font-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; fill: var(--flow); }
.ra-chart .dir-v { font-family: var(--font-mono); font-size: 14px; fill: var(--ink); }
.ra-chart .u { fill: var(--ink-3); font-size: 12px; }

/* ---------- Controlli ---------- */
.ra-btn { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; color: var(--ink); background: transparent; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 6px var(--space-3); cursor: pointer; transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
.ra-btn:hover { background: var(--surface-3); }
.ra-btn:focus-visible, .ra-seg button:focus-visible, .ra-switch input:focus-visible + .ra-switch__track { outline: none; box-shadow: var(--shadow-focus); }
.ra-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ra-btn--primary:hover { background: var(--accent); filter: brightness(1.08); }
.ra-btn--ghost { border-color: transparent; color: var(--ink-2); }
.ra-btn[disabled] { opacity: 1; color: var(--ink-3); border-color: var(--line); cursor: not-allowed; background: transparent; }
.ra-seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.ra-seg button { font-family: var(--font-mono); font-size: 10px; line-height: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); background: transparent; border: 0; border-radius: 1px; padding: 5px var(--space-3); cursor: pointer; transition: background var(--dur-fast) var(--ease-standard); }
.ra-seg button:hover { background: var(--surface-3); color: var(--ink); }
.ra-seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.ra-switch { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: 12px; line-height: 16px; color: var(--ink); }
.ra-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ra-switch__track { width: 32px; height: 16px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-1); position: relative; transition: background var(--dur-fast) var(--ease-standard); }
.ra-switch__track::after { content: ""; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; background: var(--ink-2); transition: transform var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); }
.ra-switch input:checked + .ra-switch__track { background: var(--accent); border-color: var(--accent); }
.ra-switch input:checked + .ra-switch__track::after { transform: translateX(16px); background: var(--on-accent); }
@media (pointer: coarse) { .ra-btn, .ra-seg button { min-height: 44px; } .ra-switch { min-height: 44px; } }

/* ---------- Stati: vuoto, caricamento, errore ---------- */
.ra-state { display: grid; justify-items: start; gap: var(--space-3); padding: var(--space-6); border: 1px dashed var(--line-strong); min-width: 0; }
.ra-state__title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 18px; line-height: 24px; color: var(--ink); }
.ra-state__text { margin: 0; max-width: 65ch; font-size: 13px; line-height: 18px; color: var(--ink-2); }
.ra-state .ra-pipe--flow { width: 100%; max-width: 240px; }
.ra-state[data-state="error"] { border: 1px solid var(--alarm); border-style: solid; background: var(--alarm-dim); }
.ra-skel { height: 12px; background: var(--surface-3); width: 100%; max-width: 240px; }
.ra-skel + .ra-skel { max-width: 160px; }

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  .ra-reveal, .ra-pipe--flow, .ra-index::after, .ra-schem .flow { animation: none; }
  .ra-index::after { display: none; }
  .ra-btn, .ra-seg button, .ra-switch__track, .ra-switch__track::after, .ra-table tbody tr, .ra-index__item, .ra-index__node { transition: none; }
}