/* ============================================================================
   RiverFlows · dashboards.css — "De Brug" (Terminal Lux)
   Layered ON TOP of style.css. Reuses its tokens, keyframes (blink/pkt/
   bargrow/heroIn) and the .win/.ui-* admin skins. Adds the dark terminal
   one-pager, the instrument tiles and the fullscreen <dialog> dashboards.
   ========================================================================== */

:root{
  --mono:ui-monospace,'Roboto Mono',SFMono-Regular,Menlo,Consolas,monospace;
  --glass:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.012));
  --glass-2:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  --ok:#81c995;
  --warn:#F0A23B;
  --crit:#ff6b6b;
  --grid-line:rgba(255,255,255,.06);
  --t-micro:120ms;
  --t-trans:220ms;
  --t-power:1200ms;
}

/* ---- the page is permanently dark (it's "De Brug") --------------------- */
body.dash-page{background:var(--ink);color:#fff}
body.dash-page main{display:block}

/* header stays dark on this page (app.js is not loaded here) */
.dash-page header.scrolled{background:rgba(10,11,13,.78);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-dark)}
.dash-page header.scrolled .brand{color:#fff}
.dash-page header.scrolled .navlinks a{color:rgba(255,255,255,.7)}
.dash-page header.scrolled .navlinks a:hover{color:#fff}
.dash-page header.scrolled .navbtn{color:#fff !important;border-color:rgba(255,255,255,.25)}
.dash-page header.scrolled .navbtn:hover{background:#fff;color:var(--ink) !important}
.dash-page header.scrolled .menu-toggle span{background:#fff}
.dash-page .navlinks a.active{color:#fff}

/* ============================ TICKER BAND =============================== */
.ticker{position:relative;overflow:hidden;border-bottom:1px solid var(--line-dark);background:rgba(255,255,255,.02);height:34px;display:flex;align-items:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;white-space:nowrap;z-index:3}
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:60px;z-index:2;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--ink),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--ink),transparent)}
.ticker-track{display:inline-flex;gap:2.4rem;padding-left:2.4rem;animation:tickerScroll 38s linear infinite;will-change:transform}
.ticker-track span{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted-dark)}
.ticker-track b{color:#fff;font-weight:600}
.ticker-track .up{color:var(--ok)} .ticker-track .dn{color:var(--crit)}
@keyframes tickerScroll{to{transform:translateX(-50%)}}

/* ============================ HERO ===================================== */
.dash-hero{min-height:auto;padding-top:0}
.dash-hero .hero-inner{padding-top:clamp(3rem,8vh,6rem);padding-bottom:clamp(2rem,5vh,4rem)}
.term-prompt{font-family:var(--mono);font-size:clamp(2.1rem,5vw,3.7rem);font-weight:500;letter-spacing:-.01em;line-height:1.08;margin:1.2rem 0 0}
.term-prompt .pre{color:var(--accent-soft)}
.term-prompt .caret{display:inline-block;width:.62ch;height:1.05em;background:var(--accent-soft);margin-left:.12em;transform:translateY(.16em);animation:caretBlink 1.05s steps(1) infinite}
@keyframes caretBlink{50%{opacity:0}}
.dash-hero .hero-sub{max-width:640px}
.hero-glance{margin-top:clamp(2rem,5vw,3.4rem);position:relative}

/* a glass panel peeking out of the dark under the hero */
.glance-panel{border:1px solid var(--line-dark);border-radius:16px 16px 0 0;background:var(--glass);box-shadow:0 -10px 60px -30px rgba(59,91,255,.5),0 40px 80px -50px #000;padding:1.1rem 1.1rem 0;overflow:hidden}
.glance-bar{display:flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.72rem;color:var(--muted-dark);padding-bottom:.9rem;border-bottom:1px solid var(--line-dark)}
.glance-bar .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:blink 2s infinite}
.glance-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);margin-top:1px}
.glance-cell{background:var(--ink);padding:1rem .2rem .4rem;text-align:center}
.glance-cell .v{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.6vw,2rem);font-variant-numeric:tabular-nums}
.glance-cell .l{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-dark);margin-top:.25rem}

/* ====================== MANIFEST / WAAROM ============================== */
.manifest .wrap{display:flex;flex-direction:column;gap:1rem}
.manifest .line{font-family:var(--mono);font-size:clamp(1rem,2vw,1.35rem);color:rgba(255,255,255,.9)}
.manifest .line .gt{color:var(--accent-soft);margin-right:.6rem}
.manifest .line .mut{color:var(--muted-dark)}
.dataline{height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);margin-top:1.6rem;transform-origin:left;transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.dataline.in{transform:scaleX(1)}

/* ===================== INSTRUMENTENPANEEL (tiles) ====================== */
.bridge{border-top:1px solid var(--line-dark)}
.tiles{margin-top:2.6rem;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:188px;padding:1.15rem;border:1px solid var(--line-dark);border-radius:14px;background:var(--glass);overflow:hidden;color:#fff;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s}
.tile.span2{grid-column:span 2}
.tile.span2.tall{grid-row:span 2}
.tile:hover{transform:translateY(-4px);border-color:rgba(110,134,255,.5);box-shadow:0 30px 60px -34px rgba(59,91,255,.55)}
.tile:focus-visible{outline:2px solid var(--accent-soft);outline-offset:3px}
/* glass reflection sweep on hover */
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.10) 48%,transparent 66%);transform:translateX(-120%);transition:transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.tile:hover::after{transform:translateX(120%)}
.tile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.tile-k{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-soft)}
.tile h3{font-family:var(--display);font-weight:600;font-size:1.18rem;letter-spacing:-.01em;margin-top:.5rem}
.tile p{color:var(--muted-dark);font-size:.82rem;margin-top:.3rem;line-height:1.45;max-width:34ch}
.tile .pulse{flex:none;display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ok)}
.tile .pulse i{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px 1px rgba(129,201,149,.7);animation:blink 2s infinite}
.tile.soon .pulse{color:var(--warn)} .tile.soon .pulse i{background:var(--warn);box-shadow:0 0 8px 1px rgba(240,162,59,.6)}
.tile-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:.5rem;margin-top:1rem}
.tile .open{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:#fff;border:1px solid var(--line-dark);border-radius:6px;padding:.3rem .55rem;transition:background .25s,border-color .25s}
.tile:hover .open{background:rgba(110,134,255,.16);border-color:rgba(110,134,255,.5)}
/* mini sparkline preview (drawn-in, visible without JS) */
.spark{width:100%;height:44px;display:block;margin-top:.6rem}
.spark path.l{fill:none;stroke:var(--accent-soft);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.spark path.a{fill:url(#tileGrad);stroke:none;opacity:.5}
.tile .spark path.l{stroke-dasharray:var(--len,300)}
.tile.in .spark path.l{animation:drawIn 1.2s cubic-bezier(.2,.7,.2,1) both}
@keyframes drawIn{from{stroke-dashoffset:var(--len,300)}to{stroke-dashoffset:0}}
.tile.soon{opacity:.82}
.tile.soon .open{color:var(--warn)}

/* ====================== LIVE-PROOF STROOK ============================== */
.proof{border-top:1px solid var(--line-dark)}
.proof-board{margin-top:2.4rem;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(1rem,4vw,3rem)}
.sources{display:flex;flex-direction:column;gap:.7rem}
.src{display:flex;align-items:center;gap:.7rem;padding:.6rem .8rem;border:1px solid var(--line-dark);border-radius:10px;background:var(--glass);font-size:.86rem}
.src .ic{width:22px;height:22px;flex:none;display:grid;place-items:center}
.src .nm{font-weight:500}
.src .st{margin-left:auto;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ok)}
.proof .flow{min-height:160px}
.node{display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center}
.node .ring{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(110,134,255,.4);background:radial-gradient(circle,rgba(59,91,255,.22),transparent 70%);box-shadow:0 0 50px -10px rgba(59,91,255,.6)}
.node .ring svg{width:38px;height:38px}
.node .cnt{font-family:var(--display);font-weight:700;font-size:1.4rem;font-variant-numeric:tabular-nums}
.node .lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-dark)}

/* ====================== USE-CASE NARRATIEF ============================= */
.cases{border-top:1px solid var(--line-dark)}
.case-list{margin-top:2.2rem;border-top:1px solid var(--line-dark)}
.case{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.5rem .2rem;border-bottom:1px solid var(--line-dark);color:#fff;transition:padding-left .3s,background .3s}
.case:hover{padding-left:.8rem;background:linear-gradient(90deg,rgba(110,134,255,.06),transparent)}
.case .q{font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,2.4vw,1.8rem);letter-spacing:-.02em}
.case .q .mod{display:block;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-soft);margin-bottom:.4rem}
.case .go{flex:none;font-family:var(--mono);font-size:.8rem;color:var(--muted-dark);display:inline-flex;align-items:center;gap:.5rem}
.case:hover .go{color:#fff}
.case .go .arr{transition:transform .25s}.case:hover .go .arr{transform:translateX(4px)}

/* ====================== HOE WE BOUWEN ================================== */
.build{border-top:1px solid var(--line-dark)}
.build-steps{margin-top:2.6rem;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,4vw,3rem)}
.bstep .n{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--accent-soft)}
.bstep h4{font-family:var(--display);font-weight:600;font-size:1.3rem;margin:.7rem 0 .5rem}
.bstep p{color:var(--muted-dark);font-size:.95rem;line-height:1.55}
.bstep .bar{margin-top:1.1rem;height:3px;border-radius:3px;background:var(--line-dark);overflow:hidden}
.bstep .bar i{display:block;height:100%;width:calc(var(--p,0)*100%);background:linear-gradient(90deg,var(--accent),var(--accent-soft));transition:width 1.1s cubic-bezier(.2,.7,.2,1)}

/* ============================================================================
   THE TERMINAL DIALOG (popup dashboards)
   ========================================================================== */
.term-overlay{width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;inset:0;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden}
.term-overlay::backdrop{background:rgba(5,6,10,.5);opacity:0;transition:opacity var(--t-trans) ease}
.term-overlay[open]::backdrop{opacity:1;backdrop-filter:blur(6px)}
.term-window{position:absolute;inset:clamp(8px,3vh,30px) clamp(8px,3vw,40px);display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:#0b0c10;box-shadow:0 60px 120px -30px #000;overflow:hidden;opacity:0;transform:scale(.965) translateY(10px);transition:opacity var(--t-trans) cubic-bezier(.2,.7,.2,1),transform var(--t-trans) cubic-bezier(.2,.7,.2,1)}
.term-overlay.is-open .term-window{opacity:1;transform:none}
.term-overlay.is-closing .term-window{opacity:0;transform:scale(.975) translateY(8px)}

.term-bar{flex:none;display:flex;align-items:center;gap:.8rem;height:46px;padding:0 .8rem 0 1rem;border-bottom:1px solid var(--line-dark);background:rgba(255,255,255,.02)}
.term-bar .dots{display:flex;gap:6px}
.term-bar .dots i{width:10px;height:10px;border-radius:50%}
.term-bar .dots i:nth-child(1){background:#ff5f56}.term-bar .dots i:nth-child(2){background:#ffbd2e}.term-bar .dots i:nth-child(3){background:#27c93f}
.term-title{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:#fff;display:flex;align-items:center;gap:.5rem}
.term-title .live{display:inline-flex;align-items:center;gap:.35rem;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ok)}
.term-title .live i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:blink 2s infinite}
.term-spacer{flex:1}
.term-close{flex:none;width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line-dark);border-radius:8px;background:none;color:#fff;font-family:var(--mono);font-size:.7rem;cursor:pointer;transition:background .2s,border-color .2s}
.term-close:hover{background:rgba(255,107,107,.16);border-color:rgba(255,107,107,.5)}
.term-close:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}

.term-tabs{flex:none;display:flex;gap:2px;padding:.4rem .6rem;border-bottom:1px solid var(--line-dark);overflow-x:auto;scrollbar-width:thin}
.term-tabs::-webkit-scrollbar{height:4px}.term-tabs::-webkit-scrollbar-thumb{background:var(--line-dark);border-radius:4px}
.tab{flex:none;font-family:var(--mono);font-size:.68rem;letter-spacing:.04em;color:var(--muted-dark);padding:.45rem .7rem;border-radius:7px;border:1px solid transparent;background:none;cursor:pointer;white-space:nowrap;transition:color .2s,background .2s,border-color .2s}
.tab:hover{color:#fff;background:rgba(255,255,255,.04)}
.tab.on{color:#fff;background:rgba(110,134,255,.14);border-color:rgba(110,134,255,.35)}
.tab.soon{opacity:.6}
.tab:focus-visible{outline:2px solid var(--accent-soft);outline-offset:1px}

.term-body{flex:1;overflow:auto;position:relative;padding:clamp(.8rem,2vw,1.4rem)}
.term-body::-webkit-scrollbar{width:8px}.term-body::-webkit-scrollbar-thumb{background:var(--line-dark);border-radius:8px}

.term-foot{flex:none;height:30px;border-top:1px solid var(--line-dark);overflow:hidden;display:flex;align-items:center;background:rgba(255,255,255,.015)}
.term-foot .ticker-track{font-size:.66rem;animation-duration:46s}

/* ---- dashboard surface + power-on cascade ----------------------------- */
.dash{position:relative}
.dash .panel{opacity:1}
.dash.power .scan{position:absolute;left:0;right:0;top:0;height:140px;background:linear-gradient(180deg,rgba(110,134,255,.18),transparent);pointer-events:none;z-index:5;animation:powerScan 900ms cubic-bezier(.4,0,.2,1) forwards}
@keyframes powerScan{0%{transform:translateY(-140px);opacity:0}15%{opacity:1}100%{transform:translateY(120vh);opacity:0}}
.boot-log{font-family:var(--mono);font-size:.72rem;color:var(--accent-soft);min-height:1.2em;margin-bottom:.7rem;white-space:nowrap;overflow:hidden}
.boot-log .ok{color:var(--ok)}
.dash.power .panel{animation:panelIn .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*70ms + 220ms)}
@keyframes panelIn{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}

/* generic panel */
.panel{border:1px solid var(--line-dark);border-radius:14px;background:var(--glass);padding:1.05rem 1.1rem;position:relative;overflow:hidden}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.8rem}
.panel-h .t{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-dark)}
.panel-h .tag{font-family:var(--mono);font-size:.62rem;color:var(--accent-soft)}

.dash-grid{display:grid;gap:14px}
/* executive layout */
.dash-executive .dash-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(10px,auto)}
.kpis{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{border:1px solid var(--line-dark);border-radius:12px;background:var(--glass);padding:.9rem 1rem}
.kpi .v{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,2.4vw,2rem);font-variant-numeric:tabular-nums;letter-spacing:-.01em;display:flex;align-items:baseline;gap:.45rem}
.kpi .v .d{font-family:var(--mono);font-size:.62rem;font-weight:600}
.kpi .v .d.up{color:var(--ok)} .kpi .v .d.dn{color:var(--crit)}
.kpi .l{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-dark);margin-top:.3rem}
.kpi .ks{height:24px;margin-top:.5rem;display:block;width:100%}
.kpi .ks path{fill:none;stroke:var(--accent-soft);stroke-width:1.6}

.panel.chart{grid-column:1 / 4}
.panel.gauge{grid-column:4 / 5;display:flex;flex-direction:column}
.panel.bars{grid-column:1 / 3}
.panel.feed{grid-column:3 / 5}

.chart svg{width:100%;height:230px;display:block}
.chart .area{fill:url(#execArea)}
.chart .line{fill:none;stroke:var(--accent-soft);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chart .gl{stroke:var(--grid-line);stroke-width:1}
.chart .axis{font-family:var(--mono);font-size:9px;fill:var(--muted-dark)}
.chart .cursor{stroke:rgba(255,255,255,.25);stroke-width:1;stroke-dasharray:3 3}
.chart-tip{position:absolute;pointer-events:none;font-family:var(--mono);font-size:.66rem;background:#15171d;border:1px solid var(--line-dark);border-radius:7px;padding:.35rem .5rem;color:#fff;transform:translate(-50%,-130%);opacity:0;transition:opacity .15s;white-space:nowrap;z-index:6}
.chart-tip.on{opacity:1}

/* gauge — clean 270° dial w/ glowing tip-knob + status pill */
.gauge-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.55rem}
.gauge .gsvg{width:100%;max-width:212px;height:auto;display:block;overflow:visible}
.gauge .g-track{fill:none;stroke:rgba(255,255,255,.09);stroke-width:11;stroke-linecap:round}
.gauge .g-ticks line{stroke:rgba(255,255,255,.16);stroke-width:1.5;stroke-linecap:round}
.gauge .g-val{fill:none;stroke:var(--ok);stroke-width:11;stroke-linecap:round;transition:stroke .4s ease}
.gauge .g-knob{fill:#0b0c10;stroke:var(--ok);stroke-width:3}
.gauge .g-knob-dot{fill:#fff}
.gauge .g-score{fill:#fff;font-family:var(--display);font-weight:700;font-size:2.35rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.gauge .g-unit{fill:var(--muted-dark);font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase}
.gauge .g-end{fill:var(--muted-dark);font-family:var(--mono);font-size:.5rem;letter-spacing:.04em;opacity:.7}
.g-pill{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:.34rem .7rem;border-radius:999px;border:1px solid var(--line-dark);color:var(--muted-dark)}
.g-pill i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:blink 2s infinite}
.g-pill.ok{color:var(--ok);border-color:rgba(129,201,149,.34);background:rgba(129,201,149,.08)}
.g-pill.warn{color:var(--warn);border-color:rgba(240,162,59,.34);background:rgba(240,162,59,.08)}
.g-pill.crit{color:var(--crit);border-color:rgba(255,107,107,.34);background:rgba(255,107,107,.08)}

/* bars */
.bargroup{display:flex;align-items:flex-end;gap:.55rem;height:150px;padding-top:.4rem}
.bargroup .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:.4rem;height:100%;justify-content:flex-end}
.bargroup .bar{width:100%;border-radius:5px 5px 0 0;background:linear-gradient(180deg,var(--accent-soft),var(--accent));transform-origin:bottom;transition:height .6s cubic-bezier(.2,.7,.2,1)}
.bargroup .cap{font-family:var(--mono);font-size:.58rem;color:var(--muted-dark);letter-spacing:.04em}

/* feed */
.feed-list{display:flex;flex-direction:column;gap:.4rem;max-height:200px;overflow:hidden}
.feed-row{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border:1px solid var(--line-dark);border-radius:9px;background:rgba(255,255,255,.02);font-size:.8rem;animation:alertIn .45s cubic-bezier(.2,.7,.2,1) both}
.feed-row .chip{flex:none;font-family:var(--mono);font-size:.58rem;letter-spacing:.06em;text-transform:uppercase;padding:.18rem .45rem;border-radius:5px}
.feed-row .chip.ok{background:rgba(129,201,149,.16);color:var(--ok)}
.feed-row .chip.warn{background:rgba(240,162,59,.16);color:var(--warn)}
.feed-row .chip.crit{background:rgba(255,107,107,.16);color:var(--crit)}
.feed-row .txt{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.85)}
.feed-row .tm{flex:none;font-family:var(--mono);font-size:.62rem;color:var(--muted-dark)}
@keyframes alertIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* placeholder "binnenkort" dashboard */
.soon-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:50vh;gap:1rem;padding:2rem}
.soon-wrap .badge{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--warn);border:1px solid rgba(240,162,59,.4);border-radius:999px;padding:.4rem .9rem}
.soon-wrap h3{font-family:var(--display);font-weight:600;font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.02em}
.soon-wrap p{color:var(--muted-dark);max-width:46ch;line-height:1.6}
.soon-wrap .specline{font-family:var(--mono);font-size:.74rem;color:var(--accent-soft)}

/* sr-only utility (charts expose data tables) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===================== OPERATIONS CONTROL ============================= */
.dash-ops .dash-grid{grid-template-columns:repeat(4,1fr)}
.ops-controls{grid-column:1 / -1;display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.ops-controls .lbl{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark)}
.fchip{font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;padding:.32rem .6rem;border:1px solid var(--line-dark);border-radius:7px;color:var(--muted-dark);background:none;cursor:pointer;transition:color .2s,background .2s,border-color .2s}
.fchip.on{color:#fff;border-color:rgba(110,134,255,.5);background:rgba(110,134,255,.14)}
.fchip:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}
.pausebtn{margin-left:auto;display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.66rem;color:#fff;border:1px solid var(--line-dark);border-radius:8px;padding:.4rem .8rem;background:none;cursor:pointer;transition:background .2s,border-color .2s}
.pausebtn:hover{border-color:rgba(110,134,255,.5)}
.pausebtn:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}
.pausebtn i{width:7px;height:7px;border-radius:50%;background:var(--ok);animation:blink 2s infinite}
.pausebtn.paused i{background:var(--warn);animation:none}

.dash-ops .panel.stream{grid-column:1 / 3;grid-row:span 2;display:flex;flex-direction:column}
.dash-ops .panel.gauge{grid-column:3 / 4}
.dash-ops .panel.histo{grid-column:4 / 5}
.dash-ops .panel.heat{grid-column:3 / 5}

.ostream{display:flex;flex-direction:column;gap:.4rem;overflow:hidden;flex:1}
.orow{display:flex;align-items:center;gap:.6rem;padding:.5rem .6rem;border:1px solid var(--line-dark);border-radius:9px;background:rgba(255,255,255,.02);font-size:.8rem;animation:alertIn .4s cubic-bezier(.2,.7,.2,1) both}
.orow.flash{animation:alertIn .4s cubic-bezier(.2,.7,.2,1) both, rowFlash 1.2s ease-out}
@keyframes rowFlash{0%{background:rgba(110,134,255,.22)}100%{background:rgba(255,255,255,.02)}}
.orow.hide{display:none}
.orow .oid{font-family:var(--mono);font-size:.68rem;color:var(--muted-dark);flex:none;width:62px}
.orow .who{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.orow .amt{font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:.72rem;color:rgba(255,255,255,.8);flex:none}
.ochip{flex:none;font-family:var(--mono);font-size:.55rem;letter-spacing:.05em;text-transform:uppercase;padding:.2rem .45rem;border-radius:5px}
.ochip.nw{background:rgba(110,134,255,.16);color:var(--accent-soft)}
.ochip.pk{background:rgba(240,162,59,.16);color:var(--warn)}
.ochip.sh{background:rgba(129,201,149,.16);color:var(--ok)}
.ochip.lt{background:rgba(255,107,107,.16);color:var(--crit)}

.histo{display:flex;align-items:flex-end;gap:4px;height:148px;padding-top:.4rem}
.histo .hb{flex:1;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--accent-soft),var(--accent));transition:height .5s cubic-bezier(.2,.7,.2,1);min-height:2px}
.histo-x{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.52rem;color:var(--muted-dark);margin-top:.35rem}

.heatmap{display:grid;grid-template-columns:auto repeat(8,1fr);gap:3px;align-items:center}
.heatmap .hday{font-family:var(--mono);font-size:.55rem;color:var(--muted-dark);padding-right:.35rem;text-align:right}
.heatmap .cell{aspect-ratio:1.7 / 1;border-radius:3px;background:rgba(110,134,255,.12)}
.heatmap .cell.peak{box-shadow:0 0 0 1px rgba(110,134,255,.6);animation:heatPulse 2.4s ease-in-out infinite}
@keyframes heatPulse{50%{box-shadow:0 0 10px 1px rgba(110,134,255,.7)}}

/* ============================ RESPONSIVE =============================== */
@media(max-width:980px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .tile.span2{grid-column:span 2}.tile.span2.tall{grid-row:auto}
  .dash-executive .dash-grid{grid-template-columns:repeat(2,1fr)}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .panel.chart,.panel.gauge,.panel.bars,.panel.feed{grid-column:1 / -1}
  .build-steps{grid-template-columns:1fr}
}
@media(max-width:880px){
  .proof-board{grid-template-columns:1fr;gap:1.6rem}
  .proof .flow{transform:rotate(90deg);min-height:90px}
}
@media(max-width:600px){
  .tiles{grid-template-columns:1fr}
  .tile.span2{grid-column:auto}
  .dash-executive .dash-grid,.kpis{grid-template-columns:1fr}
  .term-window{inset:0;border-radius:0;border:0}
  .glance-strip{grid-template-columns:repeat(2,1fr)}
  .case{flex-direction:column;align-items:flex-start;gap:.6rem}
}

/* ===================== REDUCED MOTION (end states) ==================== */
@media(prefers-reduced-motion:reduce){
  .ticker-track,.term-foot .ticker-track{animation:none;transform:none}
  .term-prompt .caret{animation:none;opacity:1}
  .tile.in .spark path.l{animation:none;stroke-dashoffset:0}
  .tile::after{display:none}
  .dataline{transition:none;transform:scaleX(1)}
  .dash.power .scan{display:none}
  .dash.power .panel{animation:none}
  .feed-row{animation:none}
  .bstep .bar i{transition:none}
  .term-window{transition:none}
  .term-overlay::backdrop{transition:none}
}

/* Operations Control — responsive */
@media(max-width:980px){
  .dash-ops .dash-grid{grid-template-columns:repeat(2,1fr)}
  .dash-ops .panel.stream{grid-column:1 / -1;grid-row:auto}
  .dash-ops .panel.gauge,.dash-ops .panel.histo,.dash-ops .panel.heat{grid-column:1 / -1}
}
@media(max-width:600px){
  .dash-ops .dash-grid{grid-template-columns:1fr}
  .ops-controls .pausebtn{margin-left:0}
}
/* Operations Control — reduced motion end-states */
@media(prefers-reduced-motion:reduce){
  .orow,.orow.flash{animation:none}
  .heatmap .cell.peak{animation:none}
  .histo .hb{transition:none}
  .pausebtn i{animation:none}
}

/* ============================================================================
   FASE 2-4 DASHBOARDS — shared components + per-dashboard grid placement
   ========================================================================== */
/* seg toggle (period / model / direction) */
.seg{display:inline-flex;background:rgba(255,255,255,.04);border:1px solid var(--line-dark);border-radius:999px;padding:3px;margin-left:auto}
.seg .segbtn{background:none;border:0;color:var(--muted-dark);font-family:var(--mono);font-size:.62rem;padding:.3rem .62rem;border-radius:999px;cursor:pointer;transition:color .2s,background .2s}
.seg .segbtn.on{background:#fff;color:var(--ink)}
.seg .segbtn:focus-visible{outline:2px solid var(--accent-soft);outline-offset:2px}

/* horizontal-bar leaderboard (sales/ecom/attribution) */
.leader{display:flex;flex-direction:column;gap:.55rem;margin-top:.2rem}
.lrow{display:flex;align-items:center;gap:.7rem}
.lnm{flex:none;width:96px;font-size:.8rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lbar{flex:1;height:8px;border-radius:8px;background:rgba(255,255,255,.05);overflow:hidden}
.lbar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--accent),var(--accent-soft));transition:width .7s cubic-bezier(.2,.7,.2,1)}
.lval{flex:none;font-family:var(--mono);font-size:.72rem;color:var(--muted-dark);width:46px;text-align:right}

/* donut (finance / itmig) */
.donut-wrap{position:relative;display:flex;align-items:center;justify-content:center;padding:.4rem;min-height:150px}
.donut-wrap svg{width:100%;max-width:160px;height:auto}
.donut-c{position:absolute;display:flex;flex-direction:column;align-items:center}
.donut-c .dv{font-family:var(--display);font-weight:700;font-size:1.5rem;font-variant-numeric:tabular-nums}
.donut-c .dl{font-family:var(--mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-dark)}

/* sales: forecast + funnel + deals */
.dash-sales .forecast svg{width:100%;height:240px;display:block}
.forecast .axis{font-family:var(--mono);font-size:11px;font-weight:600}
.funnel{display:flex;flex-direction:column;gap:.5rem;align-items:center;padding-top:.4rem}
.fstage{width:100%;background:linear-gradient(90deg,rgba(110,134,255,.28),rgba(59,91,255,.5));border:1px solid var(--line-dark);border-radius:6px;padding:.5rem .7rem;display:flex;align-items:center;justify-content:space-between;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.fstage.warn{background:linear-gradient(90deg,rgba(240,162,59,.28),rgba(240,162,59,.5))}
.fstage .fn{font-size:.76rem;color:#fff}.fstage .fv{font-family:var(--mono);font-size:.7rem;color:#fff}
.dtable{display:flex;flex-direction:column}
.drow{display:flex;align-items:center;gap:.6rem;padding:.55rem .2rem;border-bottom:1px solid var(--line-dark);font-size:.82rem}
.drow:last-child{border-bottom:0}
.dnm{flex:1;color:#fff}.dstage{font-family:var(--mono);font-size:.64rem;color:var(--accent-soft)}.dval{font-family:var(--mono);font-variant-numeric:tabular-nums;color:rgba(255,255,255,.8);width:54px;text-align:right}

/* finance: waterfall + ageing */
.dash-finance .runway svg{width:100%;height:200px;display:block}
.waterfall{display:flex;align-items:flex-end;gap:.6rem;height:150px;padding-top:.4rem}
.waterfall .wcol{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:.35rem}
.waterfall .wbar{width:100%;border-radius:4px 4px 0 0;transition:height .6s cubic-bezier(.2,.7,.2,1);min-height:3px}
.waterfall .wbar.pos{background:linear-gradient(180deg,var(--accent-soft),var(--accent))}
.waterfall .wbar.neg{background:linear-gradient(180deg,rgba(255,107,107,.8),rgba(255,107,107,.35))}
.waterfall .wbar.tot{background:linear-gradient(180deg,var(--ok),rgba(129,201,149,.45))}
.waterfall .wcap{font-family:var(--mono);font-size:.55rem;color:var(--muted-dark)}
.agetable{display:flex;flex-direction:column;gap:.55rem}
.arow{display:flex;align-items:center;gap:.7rem;font-size:.78rem}
.abk{flex:none;width:80px;font-family:var(--mono);font-size:.64rem;color:var(--muted-dark)}
.abar{flex:1;height:8px;border-radius:8px;background:rgba(255,255,255,.05);overflow:hidden}
.abar i{display:block;height:100%;border-radius:8px;transition:width .7s}
.abar i.ok{background:var(--ok)}.abar i.warn{background:var(--warn)}.abar i.crit{background:var(--crit)}
.aval{flex:none;font-family:var(--mono);width:44px;text-align:right;color:rgba(255,255,255,.8)}
.achip{flex:none;font-family:var(--mono);font-size:.55rem;padding:.18rem .42rem;border-radius:5px}
.achip.ok{background:rgba(129,201,149,.16);color:var(--ok)}.achip.warn{background:rgba(240,162,59,.16);color:var(--warn)}.achip.crit{background:rgba(255,107,107,.16);color:var(--crit)}

/* itmig: progress + uptime + priority */
.migpct{font-family:var(--display);font-weight:700;font-size:2.2rem;font-variant-numeric:tabular-nums;margin:.2rem 0 .5rem}
.migbar{height:10px;border-radius:10px;background:rgba(255,255,255,.06);overflow:hidden}
.migbar i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--accent-soft))}
.uptime-strip{display:flex;gap:3px;flex-wrap:wrap;margin-top:.3rem}
.uptime-strip .ub{flex:1;min-width:5px;height:36px;border-radius:2px}
.uptime-strip .ub.ok{background:rgba(129,201,149,.55)}.uptime-strip .ub.warn{background:rgba(240,162,59,.7)}.uptime-strip .ub.crit{background:rgba(255,107,107,.8)}
.prbars{display:flex;flex-direction:column;gap:.55rem}
.prrow{display:flex;align-items:center;gap:.7rem}
.prnm{flex:none;width:74px;font-size:.78rem;color:#fff}
.prbar{flex:1;height:8px;border-radius:8px;background:rgba(255,255,255,.05);overflow:hidden}
.prbar i{display:block;height:100%;border-radius:8px;transition:width .7s}
.prbar i.crit{background:var(--crit)}.prbar i.warn{background:var(--warn)}.prbar i.ok{background:var(--accent-soft)}.prbar i.mut{background:rgba(255,255,255,.3)}
.prval{flex:none;font-family:var(--mono);width:24px;text-align:right;color:var(--muted-dark)}

/* ecom: big counter + tape + conv funnel + stock */
.bigcounter{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4vw,3rem);font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin:.2rem 0 .8rem}
.tape{display:flex;flex-direction:column;gap:.35rem}
.tprow{display:flex;align-items:center;gap:.6rem;padding:.42rem .55rem;border:1px solid var(--line-dark);border-radius:8px;background:rgba(255,255,255,.02);font-size:.78rem;animation:alertIn .4s both}
.tprow.flash{animation:alertIn .4s both, rowFlash 1.1s ease-out}
.tprow .tpc{color:var(--ok)}.tprow .tpwho{flex:1;color:#fff}.tprow .tpamt{font-family:var(--mono);font-variant-numeric:tabular-nums;color:rgba(255,255,255,.85)}
.cfunnel{display:flex;flex-direction:column;gap:.5rem}
.cfstage{display:flex;align-items:center;gap:.6rem}
.cfn{flex:none;width:88px;font-size:.74rem;color:#fff}
.cfbar{flex:1;height:14px;border-radius:4px;background:rgba(255,255,255,.05);overflow:hidden}
.cfbar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-soft));transition:width .7s cubic-bezier(.2,.7,.2,1)}
.cfv{flex:none;font-family:var(--mono);font-size:.7rem;color:var(--muted-dark);width:36px;text-align:right}
.stocktable{display:flex;flex-direction:column}
.strow{display:flex;align-items:center;gap:.7rem;padding:.55rem .2rem;border-bottom:1px solid var(--line-dark);font-size:.8rem}
.strow:last-child{border-bottom:0}
.strow.low{background:linear-gradient(90deg,rgba(240,162,59,.07),transparent)}
.snm{flex:1;color:#fff}.ssku{font-family:var(--mono);font-size:.64rem;color:var(--muted-dark);width:82px}.sqty{font-family:var(--mono);font-variant-numeric:tabular-nums;width:54px;text-align:right;color:rgba(255,255,255,.8)}
.schip{flex:none;font-family:var(--mono);font-size:.55rem;padding:.18rem .44rem;border-radius:5px}
.schip.ok{background:rgba(129,201,149,.16);color:var(--ok)}.schip.warn{background:rgba(240,162,59,.16);color:var(--warn)}.schip.crit{background:rgba(255,107,107,.16);color:var(--crit)}

/* attribution */
.attrbars{display:flex;flex-direction:column;gap:.6rem;margin-top:.2rem}
.arow2{display:flex;align-items:center;gap:.7rem}
.achn{flex:none;width:104px;font-size:.8rem;color:#fff}
.abar2{flex:1;height:10px;border-radius:8px;background:rgba(255,255,255,.05);overflow:hidden}
.abar2 i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--accent),var(--accent-soft));transition:width .6s cubic-bezier(.2,.7,.2,1)}
.aval2{flex:none;font-family:var(--mono);font-size:.72rem;color:var(--muted-dark);width:40px;text-align:right}
.scsvg{width:100%;max-width:280px;height:auto;display:block;margin:0 auto}
.scatter-x{font-family:var(--mono);font-size:.58rem;color:var(--muted-dark);text-align:center;margin-top:.4rem}

/* automation: node graph + runs */
.nodesvg{width:100%;height:220px;display:block}
.nodesvg .nedge{transition:stroke .3s}
.nodesvg .nlabel{font-family:var(--mono);font-size:9px;fill:var(--muted-dark)}
.nodesvg .nodepacket{filter:drop-shadow(0 0 3px rgba(110,134,255,.8))}
.nodesvg.fault .nedge{stroke:rgba(255,107,107,.4)}
.nodesvg.fault .nnode[data-i="2"]{stroke:var(--crit)}
.nodesvg.fault .nodepacket{fill:var(--crit)}
.run-list{display:flex;flex-direction:column}
.run-row{display:flex;align-items:center;gap:.6rem;padding:.5rem .2rem;border-bottom:1px solid var(--line-dark);font-size:.8rem}
.run-row:last-child{border-bottom:0}
.run-row .rnm{flex:1;color:#fff}.run-row .rtime{font-family:var(--mono);font-size:.62rem;color:var(--muted-dark)}

/* per-dashboard 4-col grid placement */
.dash-sales .dash-grid,.dash-finance .dash-grid,.dash-itmig .dash-grid,.dash-ecom .dash-grid,.dash-attribution .dash-grid,.dash-automation .dash-grid{grid-template-columns:repeat(4,1fr)}
.dash-sales .panel.forecast{grid-column:1 / 4}.dash-sales .panel.funnel{grid-column:4 / 5}.dash-sales .panel.lb{grid-column:1 / 3}.dash-sales .panel.deals{grid-column:3 / 5}
.dash-finance .panel.runway{grid-column:1 / 4}.dash-finance .panel.mdonut{grid-column:4 / 5}.dash-finance .panel.waterfall{grid-column:1 / 3}.dash-finance .panel.ageing{grid-column:3 / 5}
.dash-itmig .panel.migprog{grid-column:1 / 4}.dash-itmig .panel.uptime{grid-column:4 / 5}.dash-itmig .panel.tickets{grid-column:1 / 3}.dash-itmig .panel.licenses{grid-column:3 / 5}
.dash-ecom .panel.sales-today{grid-column:1 / 3}.dash-ecom .panel.conv{grid-column:3 / 4}.dash-ecom .panel.topprod{grid-column:4 / 5}.dash-ecom .panel.stock{grid-column:1 / 5}
.dash-attribution .panel.attr{grid-column:1 / 4}.dash-attribution .panel.scatter{grid-column:4 / 5}.dash-attribution .panel.roasb{grid-column:1 / 5}
.dash-automation .panel.nodegraph{grid-column:1 / 4}.dash-automation .panel.hours{grid-column:4 / 5}.dash-automation .panel.runs{grid-column:1 / 5}

/* Fase 2-4 responsive: collapse to single column */
@media(max-width:980px){
  .dash-sales .dash-grid,.dash-finance .dash-grid,.dash-itmig .dash-grid,.dash-ecom .dash-grid,.dash-attribution .dash-grid,.dash-automation .dash-grid{grid-template-columns:1fr}
  .dash-sales .panel,.dash-finance .panel,.dash-itmig .panel,.dash-ecom .panel,.dash-attribution .panel,.dash-automation .panel{grid-column:1 / -1 !important}
}

/* Fase 2-4 reduced-motion end-states */
@media(prefers-reduced-motion:reduce){
  .lbar i,.fstage,.abar i,.prbar i,.cfbar i,.abar2 i,.waterfall .wbar,.migbar i,.donut-wrap circle{transition:none}
  .tprow,.tprow.flash{animation:none}
  .nodesvg .nodepacket{display:none}
}

/* ============================================================================
   MOBILE — phone-specific design for the dashboards page + modal dashboards
   The dense dashboards become a true full-screen, finger-friendly app.
   ========================================================================== */
@media(max-width:600px){
  /* one-pager polish */
  .ticker{height:30px;font-size:.66rem}
  .tile{min-height:150px;padding:1rem}
  .tile h3{font-size:1.1rem}
  .tile p{font-size:.8rem}
  .proof .node .ring{width:80px;height:80px}

  /* ---- modal = full-screen app ---- */
  .term-window{inset:0;border-radius:0;border:0}
  .term-bar{height:54px;padding:0 .5rem 0 .9rem}
  .term-title{font-size:.72rem}
  .term-title .live{display:none}                 /* save room on tiny bars */
  .term-close{width:44px;height:44px;font-size:.66rem}
  .term-tabs{padding:.4rem .5rem;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .tab{padding:.6rem .85rem;font-size:.7rem;scroll-snap-align:start}
  .term-body{padding:.7rem}
  .term-foot{height:26px}
  .term-foot .ticker-track{font-size:.6rem}

  /* KPIs 2-up (compact) rather than a tall single column */
  .kpis{grid-template-columns:repeat(2,1fr) !important;gap:10px}
  .kpi{padding:.7rem .75rem}
  .kpi .v{font-size:1.3rem}
  .kpi .ks{height:20px}

  /* panel headers wrap so title + tag + toggle never collide */
  .panel-h{flex-wrap:wrap;row-gap:.45rem}
  .seg{margin-left:0}
  .panel{padding:.9rem .95rem}

  /* shorter charts → less endless scrolling, still readable */
  .chart svg{height:185px}
  .dash-sales .forecast svg{height:185px}
  .dash-finance .runway svg{height:160px}
  .gauge .gsvg{max-width:172px}
  .donut-wrap svg{max-width:148px}
  .donut-wrap{min-height:130px}
  .nodesvg{height:190px}
  .bargroup{height:120px}
  .histo{height:120px}
  .waterfall{height:120px}
  .uptime-strip .ub{height:28px}
  .heatmap{gap:2px}

  /* dense tables: drop secondary columns, keep the essentials */
  .stocktable .ssku{display:none}
  .ostream{gap:.35rem}
  .orow{padding:.55rem .5rem;gap:.45rem}
  .orow .oid{width:50px;font-size:.62rem}
  .orow .who{font-size:.78rem}
  .drow,.strow,.run-row{font-size:.78rem}
  .lnm,.achn,.prnm,.cfn{width:auto;min-width:64px}

  /* finger-friendly controls */
  .fchip,.seg .segbtn,.pausebtn{min-height:40px;display:inline-flex;align-items:center}
  .ops-controls{gap:.45rem}
}

/* very small phones (<=360px): single-column KPIs, tighter tabs */
@media(max-width:360px){
  .kpis{grid-template-columns:1fr !important}
  .tab{font-size:.64rem;padding:.55rem .65rem}
  .term-title span:first-child{max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}