/* RBARM visual kit: see app/Core/Viz.php and the showcase at /visual-kit.
   Everything reads the app.css tokens, so light, dark and "follow device" work by themselves.
   Mill colours: paddy gold, rice cream, broken greige, bran tan, husk brown, water blue, steam grey.
   Each tone class (viz-t-*) sets --vc (fills and lines), --vt (text) and --vb (soft background).
   No inline styles anywhere: sizes come from SVG attributes and these classes. */

:root {
  --viz-paddy: #C99A2E;  --viz-paddy-dark: #8F6A14;
  --viz-rice: #E3D3A0;   --viz-broken: #B9A27A;  --viz-bran: #A0703C;  --viz-husk: #6E4E2E;
  --viz-water: #2F7FC1;  --viz-steam: #8C979E;   --viz-loss: #A3A8A5;  --viz-muted: #8F9692;
  --viz-green: #2E9B5E;  --viz-amber: #E0A21A;   --viz-red: #D9473B;   --viz-blue: #2F6FD0;
  --viz-s7: #7B5EA7;     --viz-s8: #C0466E;
}
:root[data-theme="dark"] {
  --viz-paddy: #E2B85A;  --viz-paddy-dark: #FFE2A0;
  --viz-rice: #F3EAD0;   --viz-broken: #CDBB95;  --viz-bran: #D19A5E;  --viz-husk: #C49A6C;
  --viz-water: #6FB3EA;  --viz-steam: #C5CDD2;   --viz-loss: #7D847F;  --viz-muted: #8A918D;
  --viz-green: #6FD39A;  --viz-amber: #F2C46B;   --viz-red: #FF8A7E;   --viz-blue: #8DB8FF;
  --viz-s7: #BBA6E8;     --viz-s8: #F2A0BC;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --viz-paddy: #E2B85A;  --viz-paddy-dark: #FFE2A0;
    --viz-rice: #F3EAD0;   --viz-broken: #CDBB95;  --viz-bran: #D19A5E;  --viz-husk: #C49A6C;
    --viz-water: #6FB3EA;  --viz-steam: #C5CDD2;   --viz-loss: #7D847F;  --viz-muted: #8A918D;
    --viz-green: #6FD39A;  --viz-amber: #F2C46B;   --viz-red: #FF8A7E;   --viz-blue: #8DB8FF;
    --viz-s7: #BBA6E8;     --viz-s8: #F2A0BC;
  }
}

/* ---------- Tones ---------- */
.viz { --vc: var(--accent); --vt: var(--accent); --vb: var(--ok-bg); min-width: 0; }
figure.viz { margin: 0; }
[class*="viz-t-"] { --vt: var(--vc); --vb: color-mix(in srgb, var(--vc) 16%, transparent); }
.viz-t-ok { --vc: var(--viz-green); --vt: var(--ok); --vb: var(--ok-bg); }
.viz-t-warn { --vc: var(--viz-amber); --vt: var(--warn); --vb: var(--warn-bg); }
.viz-t-bad { --vc: var(--viz-red); --vt: var(--bad); --vb: var(--bad-bg); }
.viz-t-info { --vc: var(--viz-blue); --vt: var(--info); --vb: var(--info-bg); }
.viz-t-accent { --vc: var(--accent); --vt: var(--accent); }
.viz-t-muted { --vc: var(--viz-muted); --vt: var(--muted); --vb: var(--sunk-2); }
.viz-t-gold, .viz-t-paddy { --vc: var(--viz-paddy); --vt: var(--warn); }
.viz-t-rice { --vc: var(--viz-rice); --vt: var(--ink-2); }
.viz-t-broken { --vc: var(--viz-broken); --vt: var(--ink-2); }
.viz-t-bran { --vc: var(--viz-bran); }
.viz-t-husk { --vc: var(--viz-husk); }
.viz-t-water { --vc: var(--viz-water); --vt: var(--info); }
.viz-t-steam { --vc: var(--viz-steam); --vt: var(--ink-2); }
.viz-t-loss { --vc: var(--viz-loss); --vt: var(--muted); }
.viz-t-s1 { --vc: var(--accent); }
.viz-t-s2 { --vc: var(--viz-paddy); --vt: var(--warn); }
.viz-t-s3 { --vc: var(--viz-water); --vt: var(--info); }
.viz-t-s4 { --vc: var(--viz-husk); }
.viz-t-s5 { --vc: var(--viz-bran); }
.viz-t-s6 { --vc: var(--viz-steam); --vt: var(--ink-2); }
.viz-t-s7 { --vc: var(--viz-s7); }
.viz-t-s8 { --vc: var(--viz-s8); }

/* ---------- Shared pieces ---------- */
.viz-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; margin: 0; }
.viz-label { font-weight: 600; font-size: 15px; color: var(--ink-2); }
.viz-unit, .viz-cap-right { font-size: 13px; color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.viz-foot { font-size: 13px; color: var(--muted); }
.viz-track { fill: var(--sunk-2); }
.viz-fill { fill: var(--vc); }
.viz-th { stroke: var(--viz-amber); stroke-width: 2; }
.viz-th-bad { stroke: var(--viz-red); }
.viz-target { stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; }
.viz-target-h { stroke-width: 1.5; stroke-dasharray: 6 4; }
.viz-zero { stroke: var(--ink-2); stroke-width: 1.2; }

/* ---------- Legend and empty ---------- */
.viz-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--ink-2); }
.viz-legend li { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.viz-legend-value { color: var(--muted); font-variant-numeric: tabular-nums; }
.viz-sw { width: 12px; height: 12px; border-radius: 4px; background: var(--vc); flex: none; }
.viz-sw-line { width: 16px; height: 3px; border-radius: 2px; }
.viz-sw-band { background: var(--vb); box-shadow: inset 0 0 0 1px var(--vc); }
.viz-sw-hatch { background: repeating-linear-gradient(135deg, var(--line-strong) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--line-strong); }
.viz-sw-dots { background: radial-gradient(circle, var(--vc) 1px, transparent 1.4px) 0 0 / 4px 4px; outline: 1.5px dotted var(--vc); outline-offset: -1px; }
.viz-sw-ring { border-radius: 50%; }
.viz-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 16px; text-align: center; color: var(--muted); border-radius: var(--radius); background: var(--sunk); font-size: 14px; }
.viz-empty .icon { width: 30px; height: 30px; opacity: .5; }
.viz-blank { display: flex; flex-direction: column; gap: 8px; }

/* ---------- 1. Meter ---------- */
.viz-meter { display: flex; flex-direction: column; gap: 4px; }
.viz-meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.viz-meter-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.viz-meter-value strong { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.viz-meter-value small { font-size: 13px; color: var(--muted); }
.viz-meter.is-over .viz-meter-value strong { color: var(--bad); }
.viz-meter-track { display: block; overflow: visible; }

/* ---------- 2. Ring ---------- */
.viz-ring { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.viz-ring-svg { display: block; width: 128px; height: 128px; }
.viz-ring-sm .viz-ring-svg { width: 80px; height: 80px; }
.viz-ring-lg .viz-ring-svg { width: 176px; height: 176px; }
.viz-ring-track { stroke: var(--sunk-2); }
.viz-ring-arc { stroke: var(--vc); transition: stroke-dasharray .6s ease; }
.viz-ring .viz-th { stroke-width: 2.5; }
.viz-ring-main { font-size: 26px; font-weight: 700; fill: var(--ink); font-variant-numeric: tabular-nums; }
.viz-ring-sm .viz-ring-main { font-size: 30px; }
.viz-ring-sub { font-size: 11.5px; fill: var(--muted); }
.viz-ring-sm .viz-ring-sub { display: none; }
.viz-ring figcaption { display: flex; flex-direction: column; line-height: 1.35; max-width: 200px; }
.viz-ring-exact { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.viz-ring.is-over .viz-ring-main { fill: var(--bad); }

/* ---------- 3. Bars ---------- */
.viz-bars { display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.viz-bars-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.viz-bar { display: grid; grid-template-columns: minmax(96px, 32%) minmax(0, 1fr) minmax(52px, auto); align-items: center; gap: 4px 12px; padding: 3px 6px; border-radius: 10px; color: var(--ink); }
a.viz-bar:hover { background: var(--sunk); color: var(--ink); }
.viz-bar-label { display: flex; flex-direction: column; min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.3; }
.viz-bar-label small { font-size: 12px; color: var(--muted); }
.viz-bar-track { display: block; overflow: visible; }
.viz-bar-value { text-align: right; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
@container (max-width: 420px) {
  .viz-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .viz-bar-track { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- 4. Stacked ---------- */
.viz-stacked { display: flex; flex-direction: column; gap: 10px; }
.viz-stacked-bar { display: block; border-radius: 8px; overflow: hidden; }
.viz-seg { fill: var(--vc); stroke: var(--glass-strong); stroke-width: 1.5; }
.viz-seg-text, .viz-day-text { font-size: 12.5px; font-weight: 700; fill: #FFFFFF; paint-order: stroke; stroke: rgba(0, 0, 0, .38); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }

/* ---------- 5 and 6. Columns and line ---------- */
.viz-chart { display: flex; flex-direction: column; gap: 8px; container-type: inline-size; }
.viz-plot-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "y p" ". x"; column-gap: 8px; padding-top: 8px; }
.viz-yaxis { grid-area: y; display: flex; flex-direction: column; justify-content: space-between; min-width: 26px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.viz-yaxis span { height: 0; display: flex; align-items: center; justify-content: flex-end; line-height: 1; white-space: nowrap; }
.viz-plot { grid-area: p; display: block; overflow: visible; min-width: 0; }
.viz-gridline { stroke: var(--line); stroke-width: 1; }
.viz-xaxis { grid-area: x; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding-top: 6px; font-size: 12px; color: var(--muted); }
.viz-x { display: flex; flex-direction: column; align-items: center; min-width: 0; line-height: 1.35; text-align: center; }
.viz-x-l { white-space: nowrap; }
.viz-x-v { font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.viz-col { fill: var(--vc); }
.viz-hit { fill: transparent; }
.viz-hit:hover { fill: var(--sunk-2); }
.viz-band { fill: var(--ok-bg); }
.viz-band-edge { stroke: var(--viz-green); stroke-width: 1; stroke-dasharray: 4 4; opacity: .7; }
.viz-area { fill: var(--vc); opacity: .15; }
.viz-line-path { stroke: var(--vc); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.viz-dot { fill: var(--glass-strong); stroke: var(--vc); stroke-width: 2; }
.viz-dot.is-last { fill: var(--vc); }
.viz-dot.is-out { fill: var(--viz-red); stroke: var(--glass-strong); stroke-width: 1.5; }
@container (max-width: 560px) {
  .viz-xaxis.is-dense .viz-minor .viz-x-l { visibility: hidden; }
  .viz-xaxis.is-dense .viz-x-v { display: none; }
  .viz-x-v { font-size: 11px; }
}

/* ---------- 7. Spark ---------- */
svg.viz-spark { display: inline-block; vertical-align: middle; overflow: visible; }
.viz-spark-path { stroke: var(--vc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-spark-dot { fill: var(--vc); stroke: var(--glass-strong); stroke-width: 1.5; }
.viz-spark-none { stroke: var(--line-strong); stroke-dasharray: 3 3; }

/* ---------- 8. Steps ---------- */
.viz-steps { display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.viz-steps-list { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.viz-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 4px; text-align: center; }
.viz-step::before { content: ''; position: absolute; z-index: 0; top: 20px; left: -50%; right: 50%; height: 4px; border-radius: 2px; background: var(--sunk-2); }
.viz-step:first-child::before { display: none; }
.viz-step.is-done::before, .viz-step.is-current::before, .viz-step.is-blocked::before { background: var(--viz-green); }
.viz-step-dot { position: relative; z-index: 1; flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--glass-strong); color: var(--muted); box-shadow: inset 0 0 0 2px var(--line-strong); }
.viz-step-dot .icon { width: 20px; height: 20px; }
.viz-step.is-done .viz-step-dot { background: var(--viz-green); color: var(--bg); box-shadow: none; }
.viz-step.is-current .viz-step-dot { background: var(--mint); color: var(--mint-ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent); animation: viz-pulse 2.2s ease-in-out infinite; }
.viz-step.is-blocked .viz-step-dot { background: var(--viz-red); color: var(--bg); box-shadow: 0 0 0 4px var(--bad-bg); }
.viz-step-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.viz-step-label { font-size: 14px; font-weight: 600; line-height: 1.3; }
.viz-step.is-next .viz-step-label { color: var(--muted); font-weight: 500; }
.viz-step-time { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.viz-step.is-late .viz-step-time { color: var(--warn); font-weight: 700; }
.viz-step-note { font-size: 12px; color: var(--muted); line-height: 1.3; }
.viz-step.is-blocked .viz-step-note, .viz-step.is-blocked .viz-step-label { color: var(--bad); }
@keyframes viz-pulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
  50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 8%, transparent); }
}
@container (max-width: 560px) {
  .viz-steps-list { grid-auto-flow: row; grid-auto-columns: auto; }
  .viz-step { flex-direction: row; align-items: center; gap: 12px; padding: 6px 0; text-align: left; }
  .viz-step::before { top: -50%; bottom: 50%; left: 20px; right: auto; width: 4px; height: auto; }
}

/* ---------- 9. Day bar ---------- */
.viz-day { display: flex; flex-direction: column; gap: 8px; container-type: inline-size; }
.viz-day-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
.viz-day.has-lanes .viz-day-grid { grid-template-columns: minmax(64px, max-content) minmax(0, 1fr); column-gap: 10px; align-items: center; }
.viz-day-lane { font-size: 13px; font-weight: 600; color: var(--ink-2); line-height: 1.25; }
.viz-day-bar, .viz-day-axis { display: block; overflow: visible; }
.viz-day-tick { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.viz-day-block { fill: var(--vc); opacity: .92; }
.viz-day-block:hover { opacity: 1; }
.viz-now { stroke: var(--viz-red); stroke-width: 2.5; stroke-linecap: round; }
.viz-day-hour { font-size: 11.5px; fill: var(--muted); }
@container (max-width: 480px) {
  .viz-day-hour.viz-minor { display: none; }
  .viz-day.has-lanes .viz-day-grid { grid-template-columns: minmax(0, 1fr); }
  .viz-day-lane:empty { display: none; }
}

/* ---------- 10. Tile map (pockets, khamal, tanks, dryers) ---------- */
.viz-tilemap { display: flex; flex-direction: column; gap: 18px; }
.viz-tile-group { display: flex; flex-direction: column; gap: 10px; }
.viz-tile-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; margin: 0; font-size: 16px; }
.viz-tile-head small { font-size: 13px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.viz-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 10px; }
.viz-tilemap-sm .viz-tiles { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.viz-tiles > li { display: flex; min-width: 0; }
.viz-tile { --tile-c: var(--viz-green); --tile-t: var(--ok); position: relative; isolation: isolate; overflow: hidden; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; min-height: 104px; padding: 9px 11px; border-radius: 14px; color: var(--ink); background: var(--glass-strong); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tile-c) 55%, transparent); transition: transform .15s, box-shadow .15s; }
.viz-tilemap-sm .viz-tile { min-height: 84px; padding: 7px 9px; }
.viz-tile > span { position: relative; z-index: 1; }
.viz-tile.is-partial { --tile-c: var(--viz-amber); --tile-t: var(--warn); }
.viz-tile.is-full { --tile-c: var(--viz-red); --tile-t: var(--bad); }
.viz-tile.is-blocked { --tile-c: var(--viz-muted); --tile-t: var(--muted); color: var(--muted); background: repeating-linear-gradient(135deg, var(--sunk-2) 0 6px, transparent 6px 12px), var(--glass-soft); }
.viz-tile.is-reserved { --tile-c: var(--viz-blue); --tile-t: var(--info); box-shadow: none; outline: 2px dotted var(--viz-blue); outline-offset: -3px; background: radial-gradient(circle, color-mix(in srgb, var(--viz-blue) 24%, transparent) 1.2px, transparent 1.7px) 0 0 / 10px 10px, var(--glass-strong); }
.viz-tile.is-over { box-shadow: inset 0 0 0 2.5px var(--viz-red); }
a.viz-tile:hover { transform: translateY(-2px); color: var(--ink); box-shadow: inset 0 0 0 2px var(--accent), var(--shadow); }
.viz-tile-liquid { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; }
.viz-liquid { fill: var(--tile-c); opacity: .24; }
.viz-liquid-top { stroke: var(--tile-c); stroke-width: 2.5; opacity: .9; }
.viz-tile-code { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.viz-tile-num { font-size: 22px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.viz-tilemap-sm .viz-tile-num { font-size: 18px; }
.viz-tile-num small { font-size: 12px; font-weight: 600; color: var(--muted); }
.viz-tile-line { font-size: 12px; line-height: 1.3; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz-tile-pct { margin-top: auto; padding-top: 2px; font-size: 12px; font-weight: 700; color: var(--tile-t); font-variant-numeric: tabular-nums; }

/* ---------- Boards (tanks, bins, rings side by side) ---------- */
.viz-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.viz-board-lg { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.viz-row { display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: flex-start; }

/* ---------- 11. Tank ---------- */
.viz-tank, .viz-silo { display: flex; }
.viz-tank-link, .viz-silo-link { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px 12px; border-radius: 18px; color: var(--ink); background: var(--glass); box-shadow: var(--shadow), var(--hairline); }
a.viz-tank-link:hover, a.viz-silo-link:hover { color: var(--ink); box-shadow: var(--shadow-hover), var(--hairline), inset 0 0 0 1.5px var(--accent); }
.viz-tank-svg { display: block; width: 100%; max-width: 150px; height: auto; overflow: visible; }
.viz-tank-sm .viz-tank-svg { max-width: 112px; }
.viz-tank-lg .viz-tank-svg { max-width: 250px; }
.viz-vessel-back { fill: var(--sunk); }
.viz-tank.is-steaming .viz-vessel-back { fill: color-mix(in srgb, var(--viz-steam) 22%, transparent); }
.viz-vessel { fill: none; stroke: var(--ink-2); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.viz-vessel-rim { fill: var(--glass-strong); stroke: var(--ink-2); stroke-width: 2.4; }
.viz-paddy { fill: var(--viz-paddy); }
.viz-grain { stroke: var(--viz-paddy-dark); stroke-width: 1.6; stroke-dasharray: 4 3; stroke-linecap: round; opacity: .55; }
.viz-water { fill: var(--viz-water); opacity: .42; }
.viz-water-top { stroke: var(--viz-water); stroke-width: 2; }
.viz-pipe { stroke: var(--ink-2); stroke-width: 4; stroke-linecap: round; }
.viz-drops circle { fill: var(--vc); }
.viz-spray path { fill: none; stroke: var(--viz-water); stroke-width: 1.6; stroke-dasharray: 2 3; }
.viz-puff { fill: var(--viz-steam); opacity: .6; transform-box: fill-box; transform-origin: center; animation: viz-rise 2.6s ease-out infinite; }
.viz-puff-2 { animation-delay: .85s; }
.viz-puff-3 { animation-delay: 1.7s; }
@keyframes viz-rise {
  0% { transform: translateY(6px) scale(.6); opacity: .1; }
  35% { opacity: .65; }
  100% { transform: translateY(-9px) scale(1.25); opacity: 0; }
}
.viz-tank-code { font-family: var(--mono); font-size: 14px; font-weight: 800; fill: var(--ink); }
.viz-temp-pill { fill: var(--glass-strong); stroke: var(--vc); stroke-width: 1.6; }
.viz-temp-text { font-size: 13px; font-weight: 700; fill: var(--vt); font-variant-numeric: tabular-nums; }
.viz-figcap { display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; line-height: 1.3; min-width: 0; }
.viz-tank-title { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 6px; font-size: 14px; }
.viz-tank-title strong { font-family: var(--mono); font-size: 14px; }
.viz-step-pill { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--vb); color: var(--vt); }
.viz-tank-left, .viz-tank-note { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- 12. Bin, stack, heap ---------- */
.viz-silo-svg { display: block; width: 100%; max-width: 120px; height: auto; overflow: visible; }
.viz-silo-stack .viz-silo-svg { max-width: 170px; }
.viz-silo-pile .viz-silo-svg { max-width: 190px; }
.viz-silo-sm .viz-silo-svg { max-width: 96px; }
.viz-silo-lg .viz-silo-svg { max-width: 240px; }
.viz-roof { fill: var(--sunk-2); stroke: var(--ink-2); stroke-width: 2.2; stroke-linejoin: round; }
.viz-leg { stroke: var(--ink-2); stroke-width: 3; stroke-linecap: round; }
.viz-store { fill: var(--vc); }
.viz-floor { stroke: var(--ink-2); stroke-width: 2.5; stroke-linecap: round; }
.viz-bag { fill: var(--vc); stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 1; }
.viz-bag-empty { fill: none; stroke: var(--line-strong); stroke-dasharray: 3 2; }
.viz-pile-cap { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 4 3; }
.viz-silo-figure { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.viz-silo-figure b { font-size: 15px; color: var(--ink); }
.viz-silo.is-over .viz-silo-figure b { color: var(--bad); }

/* ---------- 13. Flow (mass balance, sector chain) ---------- */
.viz-flow { display: flex; flex-direction: column; gap: 8px; }
.viz-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; border-radius: 12px; }
.viz-scroll:focus { outline: none; }
.viz-scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.viz-flow-svg { display: block; width: 100%; height: auto; }
.viz-flow-w1 .viz-flow-svg { min-width: 520px; }
.viz-flow-w2 .viz-flow-svg { min-width: 760px; }
.viz-flow-w3 .viz-flow-svg { min-width: 1080px; }
.viz-flow-link { fill: var(--vc); opacity: .34; transition: opacity .15s; }
.viz-flow-link:hover { opacity: .62; }
.viz-node-box { fill: var(--glass-strong); stroke: var(--vc); stroke-width: 1.5; }
.viz-node-edge { fill: var(--vc); }
.viz-node-label { font-size: 14px; font-weight: 700; fill: var(--ink); }
.viz-node-value { font-size: 13px; fill: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- 14. KPI (extends app.css .kpi) ---------- */
.viz-kpi { min-height: 0; }
.viz-kpi .kpi-label { display: inline-flex; align-items: center; gap: 6px; }
.viz-kpi .kpi-label .icon { width: 18px; height: 18px; }
.viz-delta { font-size: 13.5px; font-weight: 700; color: var(--vt); font-variant-numeric: tabular-nums; }
.viz-kpi:not([class*="viz-t-"]) .viz-delta { color: var(--muted); }
.viz-kpi-spark { display: block; margin-top: auto; padding-top: 4px; }

/* ---------- Showcase page (/visual-kit) ---------- */
.viz-kit-section { scroll-margin-top: 90px; }
.viz-kit-use { font-size: 14px; color: var(--muted); }
.viz-kit-code { display: block; padding: 8px 12px; border-radius: 12px; background: var(--sunk); font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); overflow-x: auto; white-space: pre; }
.viz-kit-index { display: flex; flex-wrap: wrap; gap: 8px; }
.viz-kit-stack { display: flex; flex-direction: column; gap: 18px; }
.viz-kit-sparks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.viz-kit-sparks li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.viz-kit-sparks li:last-child { border-bottom: 0; }
.viz-kit-sparks .num { margin-left: auto; font-weight: 650; }

/* ---------- Motion and print ---------- */
@media (prefers-reduced-motion: reduce) {
  .viz *, .viz *::before, .viz *::after { animation: none !important; transition: none !important; }
  .viz-puff { opacity: .6; }
}
@media print {
  .viz, .viz * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .viz { --ink: #1D1D1F; --ink-2: #3A3F3C; --muted: #545A56; --line: rgba(29, 29, 31, .14); --line-strong: rgba(29, 29, 31, .24);
    --glass: #FFFFFF; --glass-strong: #FFFFFF; --glass-soft: #FFFFFF; --sunk: rgba(29, 29, 31, .05); --sunk-2: rgba(29, 29, 31, .09);
    --accent: #1F7A4D; --ok: #1E7A45; --warn: #8A5A00; --bad: #B3261E; --info: #1F5FBF; --bg: #FFFFFF;
    --ok-bg: rgba(46, 160, 90, .14); --warn-bg: rgba(230, 160, 30, .18); --bad-bg: rgba(220, 60, 50, .13); --info-bg: rgba(31, 95, 191, .12);
    --mint: #D7EDB2; --mint-ink: #1F2E22; --shadow: none; --shadow-hover: none; --hairline: inset 0 0 0 1px rgba(0, 0, 0, .15);
    --viz-paddy: #C99A2E; --viz-paddy-dark: #8F6A14; --viz-rice: #E3D3A0; --viz-broken: #B9A27A; --viz-bran: #A0703C; --viz-husk: #6E4E2E;
    --viz-water: #2F7FC1; --viz-steam: #8C979E; --viz-loss: #A3A8A5; --viz-muted: #8F9692;
    --viz-green: #2E9B5E; --viz-amber: #E0A21A; --viz-red: #D9473B; --viz-blue: #2F6FD0; --viz-s7: #7B5EA7; --viz-s8: #C0466E;
    color: #1D1D1F; }
  .viz *, .viz *::before { animation: none !important; }
  .viz-tank-link, .viz-silo-link { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
  .viz-scroll { overflow: visible; }
  .viz-flow-svg { min-width: 0 !important; }
  .viz-tile, .viz-tank, .viz-silo, .viz-step, .viz-flow, .viz-chart { break-inside: avoid; }
  .viz-hit:hover { fill: transparent; }
}

/* ==========================================================================
   Home cockpit (app/Views/home.php). Tiles of Viz pictures, each linking to
   its page; alert chips on top; the plant chain and sector cards.
   ========================================================================== */
.cockpit-alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.cockpit-alert { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--glass-strong); box-shadow: var(--hairline); }
.cockpit-alert .icon { width: 18px; height: 18px; flex: none; }
.cockpit-alert.is-bad { background: var(--bad-bg); color: var(--bad); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bad) 45%, transparent); }
.cockpit-alert.is-warn { background: var(--warn-bg); color: var(--warn); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--warn) 45%, transparent); }
.cockpit-alert.is-ok { background: var(--ok-bg); color: var(--ok); }
a.cockpit-alert:hover { transform: translateY(-1px); }

.cockpit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; align-items: start; grid-auto-flow: row dense; }
.cockpit-tile { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cockpit-tile .panel-head h2 { margin: 0; }
.cockpit-span { grid-column: 1 / -1; }
.cockpit-figure { display: flex; justify-content: center; color: var(--ink); border-radius: 16px; transition: transform .15s; }
a.cockpit-figure:hover { transform: translateY(-2px); color: var(--ink); }
.cockpit-pair { display: grid; grid-template-columns: minmax(150px, auto) 1fr; gap: 14px 18px; align-items: center; }
.cockpit-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cockpit-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.cockpit-kpis .kpi { padding: 12px 14px; }
.cockpit-kpis .kpi-value { font-size: 28px; }
.cockpit-pair-even { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.cockpit-silos { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 10px; }
.cockpit-tanks { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }

.cockpit-sectors { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; }
.cockpit-sectors > li { display: flex; min-width: 0; }
.cockpit-sector { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 14px; color: var(--ink); background: var(--glass-strong); box-shadow: inset 4px 0 0 var(--viz-green), var(--hairline); transition: transform .15s, box-shadow .15s; }
.cockpit-sector.is-service { box-shadow: inset 4px 0 0 var(--gold, var(--viz-amber)), var(--hairline); }
.cockpit-sector.is-warn { box-shadow: inset 4px 0 0 var(--viz-amber), inset 0 0 0 1.5px color-mix(in srgb, var(--viz-amber) 55%, transparent); }
.cockpit-sector.is-bad { box-shadow: inset 4px 0 0 var(--viz-red), inset 0 0 0 1.5px color-mix(in srgb, var(--viz-red) 55%, transparent); background: var(--bad-bg); }
.cockpit-sector:hover { transform: translateY(-2px); color: var(--ink); }
.cockpit-sector-code { font-size: 12px; font-weight: 700; color: var(--muted); }
.cockpit-sector-name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.cockpit-sector { min-width: 0; overflow-wrap: anywhere; }
.cockpit-sector .pill { align-self: flex-start; max-width: 100%; white-space: normal; }
.cockpit-mini .viz-meter-head { font-size: 12px; }
.cockpit-mini .viz-meter-head .viz-label { display: none; }

.cockpit-coming { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.cockpit-coming li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; background: var(--glass-soft); box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font-size: 14px; }

/* The P1-P11 chain fits the panel on a desktop instead of hiding P9-P11 behind a sideways scroll;
   on a phone it scrolls, and the sector cards below carry the same facts. */
@media (min-width: 900px) {
  #cockpit-plant .viz-flow-w3 .viz-flow-svg { min-width: 0; }
}
@media (max-width: 560px) {
  .cockpit-grid { grid-template-columns: minmax(0, 1fr); }
  .cockpit-pair { grid-template-columns: minmax(0, 1fr); }
  .cockpit-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cockpit-tanks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media print {
  .cockpit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cockpit-tile, .cockpit-sector { break-inside: avoid; }
}