/*! Z-scroll DSIA by Drgnflai, Inc. · Style guide by Richard Verdoni · © 2026 Drgnflai, Inc. All rights reserved. */
/* DSIA runtime · themes, masonry grid, Z-axis choreography. */
.dsia-host{--dsia-row:56px;--dsia-gap:14px;--dsia-radius:18px;--dsia-ease:cubic-bezier(.16,1,.3,1);
  --bg:#ffffff;--surface:#ffffff;--surface-2:#f4f7f5;--panel-wash:linear-gradient(135deg,#ffffff 45%,#eef8ef);--border:#cbd5e1;--border-strong:#94a3b8;
  --text:#0f172a;--muted:#334155;--dim:#475569;--accent:#0f766e;--accent-soft:rgba(15,118,110,.14);
  --positive:#15803d;--attention:#b45309;--critical:#be123c;--neutral:#475569;
  --s1:#0f766e;--s2:#0369a1;--s3:#b45309;--s4:#6d28d9;--grid-line:#e2e8f0;
  --shadow:0 1px 3px rgba(15,23,42,.08),0 10px 28px rgba(15,23,42,.07);
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-ui:"JetBrains Mono",ui-monospace,monospace;--font-num:"JetBrains Mono",ui-monospace,monospace;
  font-family:var(--font);color:var(--text);background:var(--bg);box-sizing:border-box;position:relative}
.dsia-host[data-theme="keramos-light"]{--bg:#f2ece1;--surface:#ffffff;--surface-2:#faf7f2;--panel-wash:linear-gradient(135deg,#ffffff 40%,#faf3e3);--border:#d5c9b8;--border-strong:#9e8c74;
  --text:#1f1912;--muted:#4a3f31;--dim:#5c5040;--accent:#8a5d10;--accent-soft:rgba(138,93,16,.14);--positive:#2e6b34;--attention:#8a5a00;--critical:#b33220;--neutral:#5c5040;
  --s1:#9a6b15;--s2:#1d6f7d;--s3:#5c3d22;--s4:#4c4f8c;--grid-line:#e5ddd0;--shadow:0 2px 10px rgba(60,44,24,.10);
  --font:"Space Grotesk","Inter",-apple-system,BlinkMacSystemFont,sans-serif;--font-ui:"JetBrains Mono",ui-monospace,monospace;--font-num:"JetBrains Mono",ui-monospace,monospace}
.dsia-host[data-theme="hud-dark"]{--bg:#07090e;--surface:rgba(15,21,31,.94);--surface-2:rgba(0,240,255,.06);--panel-wash:linear-gradient(135deg,rgba(16,24,36,.97),rgba(0,240,255,.09));--border:rgba(148,163,184,.26);--border-strong:rgba(0,240,255,.52);
  --text:#f8fafc;--muted:#cbd5e1;--dim:#94a3b8;--accent:#00f0ff;--accent-soft:rgba(0,240,255,.16);--positive:#34d399;--attention:#fbbf24;--critical:#fb7185;--neutral:#94a3b8;
  --s1:#00f0ff;--s2:#38bdf8;--s3:#fbbf24;--s4:#c084fc;--grid-line:rgba(148,163,184,.14);--shadow:0 0 0 1px rgba(0,240,255,.10),0 12px 30px rgba(0,0,0,.55);
  --font:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;--font-ui:"JetBrains Mono",ui-monospace,monospace;--font-num:"JetBrains Mono",ui-monospace,monospace}
.dsia-host *,.dsia-host *::before,.dsia-host *::after{box-sizing:border-box}
.dsia-stage{perspective:1400px;perspective-origin:50% 20%}
.dsia-headline{font-size:clamp(1.6rem,3.2vw,2.75rem);line-height:1.12;font-weight:750;letter-spacing:-.02em;margin:0 0 22px;max-width:30ch;transform-origin:0 50%}
.dsia-headline-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:-10px 0 20px;font:600 .7rem/1 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.dsia-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--muted)}
.dsia-pill[data-live="on"]::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--positive);box-shadow:0 0 0 3px color-mix(in srgb,var(--positive) 25%,transparent);animation:dsia-pulse 1.8s infinite}
.dsia-pill[data-mode="synthetic"]{border-color:color-mix(in srgb,var(--attention) 45%,transparent);color:var(--attention)}
@keyframes dsia-pulse{50%{opacity:.35}}
.dsia-grid{display:grid;grid-template-columns:repeat(var(--cols,12),minmax(0,1fr));grid-auto-rows:minmax(var(--dsia-row),auto);gap:var(--dsia-gap);transform-style:preserve-3d;transition:filter .5s var(--dsia-ease),opacity .5s var(--dsia-ease)}
.dsia-card{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;padding:16px 18px 14px;border-radius:var(--dsia-radius);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);transform-style:preserve-3d;will-change:transform;outline:none;cursor:pointer;
  transition:transform .45s var(--dsia-ease),box-shadow .45s var(--dsia-ease),border-color .3s}
.dsia-card::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--tone,transparent)}
.dsia-card[data-tone="positive"]{--tone:var(--positive)}.dsia-card[data-tone="attention"]{--tone:var(--attention)}.dsia-card[data-tone="critical"]{--tone:var(--critical)}
.dsia-card:hover,.dsia-card:focus-visible{transform:translateZ(calc(var(--depth,20) * .25px)) translateY(-2px);border-color:var(--border-strong)}
.dsia-card:focus-visible{box-shadow:0 0 0 3px var(--accent-soft),var(--shadow)}
.dsia-card[data-role="focal"]{background:var(--panel-wash);border-color:var(--border-strong);padding:24px 26px}
.dsia-card[data-role="boundary"]{background:var(--surface-2);box-shadow:none;cursor:default}
.dsia-kicker{display:flex;justify-content:space-between;gap:8px;font:600 .66rem/1.2 var(--font-ui);letter-spacing:.11em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
.dsia-kicker b{font-weight:700;color:var(--tone,var(--muted))}
.dsia-title{margin:0;font-size:1rem;line-height:1.3;font-weight:650;letter-spacing:-.005em}
.dsia-card[data-role="focal"] .dsia-title{font-size:clamp(1.3rem,2.1vw,1.85rem);line-height:1.18;font-weight:720;letter-spacing:-.015em;max-width:26ch}
.dsia-value{display:flex;align-items:baseline;gap:6px;margin-top:8px;font:700 2rem/1 var(--font-num);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dsia-card[data-role="focal"] .dsia-value{font-size:3.2rem;margin-top:14px}
.dsia-value small{font:600 .72rem/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.dsia-value[data-empty]{font-size:1.1rem;color:var(--dim)}
.dsia-delta{font:600 .72rem/1 var(--font-ui);margin-left:4px}.dsia-delta[data-dir="up"]{color:var(--positive)}.dsia-delta[data-dir="down"]{color:var(--critical)}
.dsia-body{margin:8px 0 0;color:var(--muted);font-size:.88rem;line-height:1.45}
.dsia-card[data-role="focal"] .dsia-body{font-size:1rem;max-width:62ch}
.dsia-spark{margin-top:auto;height:34px;width:100%}
.dsia-chart{flex:1;min-height:0;margin-top:10px;display:flex;flex-direction:column}
.dsia-chart svg{width:100%;height:100%;min-height:90px;overflow:visible}
.dsia-legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;font:500 .68rem/1.2 var(--font-ui);color:var(--muted)}
.dsia-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.dsia-items{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;min-height:0;overflow:auto}
.dsia-items li{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:baseline;padding:7px 0;border-top:1px solid var(--grid-line)}
.dsia-items li:first-child{border-top:0}
.dsia-items time{font:600 .7rem/1.2 var(--font-num);color:var(--dim);min-width:0}
.dsia-items strong{font-size:.86rem;font-weight:600;min-width:0}
.dsia-items span{font:600 .62rem/1.2 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--tone,var(--muted))}
.dsia-items li[data-tone="critical"]{--tone:var(--critical)}.dsia-items li[data-tone="attention"]{--tone:var(--attention)}.dsia-items li[data-tone="positive"]{--tone:var(--positive)}
.dsia-items small{grid-column:2/4;color:var(--muted);font-size:.78rem;line-height:1.35}
.dsia-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:12px}
.dsia-btn{font:600 .74rem/1 var(--font-ui);letter-spacing:.04em;padding:9px 14px;border-radius:999px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);cursor:pointer;transition:transform .2s var(--dsia-ease),background .2s}
.dsia-btn:hover{transform:translateY(-1px)}.dsia-btn[data-primary]{background:var(--text);color:var(--bg);border-color:var(--text)}
.dsia-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.dsia-source{margin-top:auto;padding-top:10px;font:500 .64rem/1.3 var(--font-ui);letter-spacing:.04em;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dsia-card:has(.dsia-actions) .dsia-source,.dsia-card:has(.dsia-chart) .dsia-source,.dsia-card:has(.dsia-spark) .dsia-source{margin-top:8px}
.dsia-card[data-role="boundary"] .dsia-items{flex-direction:row;flex-wrap:wrap;gap:6px 16px;overflow:visible}
.dsia-card[data-role="boundary"] .dsia-items li{border:0;padding:0;display:block}
.dsia-card[data-role="boundary"] .dsia-items strong{font:500 .7rem/1.3 var(--font-ui);color:var(--muted)}
.dsia-media{flex:1;min-height:0;margin-top:10px;border-radius:12px;overflow:hidden;background:var(--surface-2)}.dsia-media img{width:100%;height:100%;object-fit:cover;display:block}
/* Drill-in detail panel (side slider) */
.dsia-detail-panel{background:var(--panel-wash);border:1px solid var(--border-strong)}
.dsia-detail-panel .dsia-chart{height:260px;flex:none}
.dsia-detail dl{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:10px 18px;margin:18px 0 0}
.dsia-detail dt{font:600 .68rem/1.3 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.dsia-detail dd{margin:0;font-size:.92rem;line-height:1.45}
.dsia-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px;min-height:40px}
.dsia-brand img{max-height:56px;max-width:180px;object-fit:contain}
.dsia-brand strong{display:block;font-size:1.05rem;font-weight:750;letter-spacing:-.01em}.dsia-brand small{display:block;color:var(--muted);font-size:.76rem}
.dsia-brand time{margin-left:auto;font:600 .72rem/1 var(--font-ui);color:var(--dim)}
.dsia-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:640px){.dsia-host{--dsia-row:50px;--dsia-gap:10px}.dsia-card{padding:14px}.dsia-card[data-role="focal"]{padding:18px}.dsia-card[data-role="focal"] .dsia-value{font-size:2.4rem}.dsia-detail dl{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.dsia-card,.dsia-grid{transition:none}.dsia-card:hover{transform:none}.dsia-pill[data-live="on"]::before{animation:none}}
/* ---- Z-scroll frames (desktop/tablet): the page never scrolls ---------- */
.dsia-top{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.dsia-nav{display:flex;align-items:center;gap:8px;flex:none;padding-top:6px}
.dsia-nav[hidden]{display:none}
.dsia-nav-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--border-strong);background:var(--surface);color:var(--text);cursor:pointer;font-size:.9rem}
.dsia-nav-btn:disabled{opacity:.35;cursor:default}
.dsia-nav-dots{display:flex;gap:6px}
.dsia-nav-dot{width:9px;height:9px;padding:0;border-radius:50%;border:0;background:var(--border-strong);cursor:pointer;transition:transform .3s var(--dsia-ease),background .3s}
.dsia-nav-dot[aria-current]{background:var(--accent);transform:scale(1.35)}
.dsia-nav-label{font:600 .7rem/1 var(--font-ui);color:var(--dim);letter-spacing:.08em;min-width:34px;text-align:center}
.dsia-host[data-mode="frames"]{height:100%;display:flex;flex-direction:column;overflow:hidden}
.dsia-host[data-mode="frames"] .dsia-headline{font-size:clamp(1.4rem,2.6vw,2.4rem);margin-bottom:14px}
.dsia-host[data-mode="frames"] .dsia-headline-meta{margin:-6px 0 14px}
.dsia-host[data-mode="frames"] .dsia-stage{flex:1;min-height:0;position:relative}
.dsia-host[data-mode="frames"] .dsia-grid{height:100%;grid-template-rows:repeat(var(--rows,8),minmax(0,1fr));grid-auto-rows:0;transition:transform .5s var(--dsia-ease),opacity .5s var(--dsia-ease),filter .5s}
.dsia-host[data-mode="frames"] .dsia-card{min-height:0}
.dsia-host[data-mode="frames"] .dsia-card[hidden]{display:none}
.dsia-host[data-mode="frames"] .dsia-scroll{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;flex:0 1 auto}
.dsia-host[data-mode="frames"] .dsia-scroll[data-scrolls]:not([data-end]){-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.dsia-host[data-mode="frames"] .dsia-chart{min-height:0}
.dsia-host[data-mode="frames"] .dsia-chart svg{min-height:0;max-height:100%}
.dsia-footer{flex:none}
.dsia-host[data-mode="frames"] .dsia-footer .dsia-card[data-role="boundary"]{margin-top:10px;padding:8px 14px;border-radius:12px;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 14px;max-height:64px;overflow:hidden}
.dsia-host[data-mode="frames"] .dsia-footer .dsia-card[data-role="boundary"] .dsia-kicker,.dsia-host[data-mode="frames"] .dsia-footer .dsia-card[data-role="boundary"] .dsia-source{display:none}
.dsia-host[data-mode="frames"] .dsia-footer .dsia-card[data-role="boundary"] .dsia-title{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.dsia-host[data-mode="frames"] .dsia-footer .dsia-card[data-role="boundary"] .dsia-body{margin:0;font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:200px;-webkit-mask-image:none;mask-image:none}
.dsia-host[data-mode="frames"] .dsia-footer .dsia-card[data-role="boundary"] .dsia-items{margin:0;flex-wrap:nowrap;overflow:hidden}
/* Side slider detail panel */
.dsia-host[data-drilled] .dsia-grid{filter:none;opacity:1;pointer-events:auto;transform:translateZ(-60px) scale(.985);transform-origin:0 50%}
.dsia-host[data-drilled] .dsia-card:not([data-selected]){opacity:.55}
.dsia-card[data-selected]{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft),var(--shadow)}
.dsia-detail{position:absolute;inset:0 0 0 auto;width:min(520px,44%);display:none;padding:0;z-index:5;align-items:stretch;justify-content:flex-end;pointer-events:none}
.dsia-host[data-drilled] .dsia-detail{display:flex}
.dsia-detail-panel{pointer-events:auto;width:100%;max-height:100%;height:100%;overflow-y:auto;overscroll-behavior:contain;border-radius:22px 0 0 22px;padding:22px 24px;box-shadow:-24px 0 60px rgba(21,36,59,.16)}
.dsia-detail-panel .dsia-items{overflow:visible}
.dsia-detail-back{float:right;margin:0 0 8px 8px}
@media (max-width:640px){.dsia-detail{position:fixed;width:100%;inset:auto 0 0 0;height:88vh}.dsia-detail-panel{border-radius:22px 22px 0 0}}
.dsia-host[data-mode="frames"] .dsia-card[data-role="metric"]{padding:12px 16px 10px}
.dsia-host[data-mode="frames"] .dsia-card[data-role="metric"] .dsia-value{font-size:1.7rem;margin-top:4px}
.dsia-host[data-mode="frames"] .dsia-card[data-role="metric"] .dsia-body{margin-top:4px;font-size:.8rem}
.dsia-host[data-mode="frames"] .dsia-card .dsia-source{flex:none}
.dsia-host[data-mode="frames"] .dsia-footer .dsia-card[data-role="boundary"] .dsia-items li{white-space:nowrap;display:inline-flex;gap:6px;align-items:baseline}