/* ===========================================================================
   app.css — shell, board frame, screen layout, transitions, and the dev
   surfaces (scenario bar + dev toolbar). Layout only; visuals come from tokens.
   =========================================================================== */

body{
  font-family:var(--sans); color:var(--ink-1);
  background:
     radial-gradient(60% 50% at 15% 0%, var(--backdrop-a), transparent 70%),
     radial-gradient(50% 40% at 100% 100%, var(--backdrop-b), transparent 70%),
     var(--backdrop-c);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
/* Top-align the board and drop the bottom padding so it can meet the browser edge */
.stage{display:flex; align-items:flex-start; justify-content:center; min-height:100vh; padding:32px 32px 0}

/* --- Board (artboard: rounded top, extends to the bottom of the browser) -- */
.dc-card{
  width:1280px; position:relative; flex:0 0 auto;
  height:calc(100vh - 32px);            /* fallback: fill to the bottom edge */
  height:calc(100dvh - 32px);
  background:var(--bg-panel);
  border-radius:var(--r-xl) var(--r-xl) 0 0;   /* rounded top, square bottom */
  overflow:hidden;
  box-shadow:var(--sh-panel), 0 2px 0 rgba(255,255,255,.6) inset;
}
.el-board{position:relative; width:100%; height:100%; display:flex; flex-direction:column;
  background:var(--bg-board); color:var(--ink-1)}
.el-vignette{position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:
     radial-gradient(70% 50% at 50% 0%, color-mix(in srgb, var(--pri) 7%, transparent), transparent 70%),
     radial-gradient(60% 40% at 82% 100%, color-mix(in srgb, var(--aria) 8%, transparent), transparent 70%);}

/* --- Toast layer (global chrome) ----------------------------------------- */
.toasts{position:absolute; top:92px; right:34px; width:300px;
  display:flex; flex-direction:column; gap:8px; z-index:var(--z-toast)}
.toasts:empty{display:none}

/* --- Shell: rail + content ----------------------------------------------- */
.shell{position:relative; z-index:var(--z-content); display:flex; height:100%}

/* Nav rail: a fixed 72px gutter (keeps layout stable) with an inner panel that
   overlays the content when expanded — clicking empty rail space toggles it. */
.rail{position:relative; flex:0 0 72px; width:72px; height:100%}
/* The inner panel is built ONCE and persists (router updates active state in
   place); expanding only toggles the .expanded class, so width + labels animate
   smoothly instead of snapping on an innerHTML rebuild. */
.rail-inner{
  position:absolute; top:0; left:0; bottom:0; width:72px; overflow:hidden;
  display:flex; flex-direction:column; align-items:stretch; gap:18px; padding:20px 0;
  border:1px solid transparent; border-radius:0 var(--r-xl) var(--r-xl) 0;
  background:transparent; cursor:pointer;
  transition:
     width var(--dur-slow) var(--ease-emphasized),
     padding var(--dur-slow) var(--ease-in-out),
     background var(--dur-base) var(--ease-standard),
     border-color var(--dur-fast) var(--ease-standard),
     box-shadow var(--dur-base) var(--ease-standard);
}
.rail:hover .rail-inner{border-color:var(--card-border)}        /* hover border, collapsed */
.rail.expanded .rail-inner{
  width:224px; padding:20px 14px; z-index:6; cursor:default;
  background:var(--bg-panel); border-color:var(--card-border); box-shadow:var(--card-glow);
}

/* Logo row — centered collapsed, left-aligned with wordmark when expanded */
/* margin-top:4px drops the logo to align with the Ask-bar glyph in the scrolled
   (minimized-header) state — the two brand glyphs share a top margin */
.rail-top{display:flex; align-items:center; justify-content:center; height:32px; margin-top:4px}
.rail.expanded .rail-top{justify-content:flex-start; padding-left:5px}
.rail-word{font-family:var(--brand); font-style:italic; font-weight:700; font-size:22px;
  color:var(--pri); white-space:nowrap; overflow:hidden;
  max-width:0; margin-left:0; opacity:0;
  transition:max-width var(--dur-slow) var(--ease-in-out),
     margin-left var(--dur-slow) var(--ease-in-out),
     opacity var(--dur-base) var(--ease-standard);}
.rail.expanded .rail-word{max-width:150px; margin-left:11px; opacity:1}

/* Nav items — icon always visible; label reveals (width + fade) as drawer opens */
.rail-icons{display:flex; flex-direction:column; gap:8px; width:100%}
.nav-row{position:relative; display:flex; align-items:center; justify-content:center; height:42px;
  color:var(--ink-3); cursor:pointer;
  transition:color var(--dur-fast) var(--ease-standard),
     justify-content var(--dur-slow) var(--ease-in-out), padding var(--dur-slow) var(--ease-in-out);}
/* Highlight is a narrow, square-ish pill behind the icon (not the full rail width);
   it grows to back the label when the drawer opens. */
.nav-row::before{content:""; position:absolute; z-index:0; top:2px; bottom:2px;
  left:50%; width:40px; transform:translateX(-50%); border-radius:var(--r-sm); background:transparent;
  transition:background var(--dur-fast) var(--ease-standard), width var(--dur-slow) var(--ease-in-out),
     left var(--dur-slow) var(--ease-in-out), transform var(--dur-slow) var(--ease-in-out);}
.nav-row svg, .nav-row .lbl{position:relative; z-index:1}
.rail.expanded .nav-row{justify-content:flex-start; padding-left:12px}
.rail.expanded .nav-row::before{left:0; width:100%; transform:none}
.nav-row svg{width:19px; height:19px; flex:0 0 19px}
.nav-row .lbl{font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden;
  max-width:0; margin-left:0; opacity:0;
  transition:max-width var(--dur-slow) var(--ease-in-out),
     margin-left var(--dur-slow) var(--ease-in-out),
     opacity var(--dur-base) var(--ease-standard);}
.rail.expanded .nav-row .lbl{max-width:150px; margin-left:12px; opacity:1}
.nav-row:hover{color:var(--control-active)}
.nav-row:hover::before{background:var(--control-active-softer)}
.nav-row.active{color:var(--pri)}                                   /* highlighted icon = deep navy */
.nav-row.active::before{background:var(--control-active-soft)}
.nav-row.active:hover::before{background:rgba(92,108,130,0.20)}      /* subtle deepen; icon stays navy */
/* Slight cascade on the labels as the drawer opens */
.rail.expanded .rail-icons .nav-row:nth-child(2) .lbl{transition-delay:.02s}
.rail.expanded .rail-icons .nav-row:nth-child(3) .lbl{transition-delay:.04s}
.rail.expanded .rail-icons .nav-row:nth-child(4) .lbl{transition-delay:.06s}
.rail.expanded .rail-icons .nav-row:nth-child(5) .lbl{transition-delay:.08s}

/* Scroll container for the whole page (header + screen content scroll together).
   Flex column so a screen can opt into filling the viewport (see .dash-screen). */
.content{flex:1; min-width:0; height:100%; overflow-y:auto; display:flex; flex-direction:column}
.content::-webkit-scrollbar{width:8px}
.content::-webkit-scrollbar-thumb{background:var(--rule); border-radius:4px}

/* --- Global sticky header (greeting + Ask Elisian) ----------------------- */
.app-header{
  position:sticky; top:0; z-index:4; background:var(--bg-board);
  padding:14px 34px 14px;
  transition:padding var(--hover-slow) var(--ease-in-out), box-shadow var(--hover-slow) var(--ease-standard);
}
/* overflow:hidden drives the collapse animation but also clips the notification
   badge that overhangs the bell — pad the clip box so the badge stays visible. */
.app-header .header-greet{
  margin-bottom:13px; padding-top:6px; overflow:hidden;
  transition:max-height var(--hover-slow) var(--ease-in-out),
     opacity .24s var(--ease-standard), margin-bottom var(--hover-slow) var(--ease-in-out),
     padding-top var(--hover-slow) var(--ease-in-out);
  max-height:86px;
}
/* Minimized (scrolled): collapse the greeting, leave the Ask bar; add a lift shadow */
.app-header.minimized{padding-top:12px; padding-bottom:12px;
  box-shadow:0 8px 18px -14px rgba(20,24,50,.35)}
.app-header.minimized .header-greet{max-height:0; opacity:0; margin-bottom:0; padding-top:0}

/* Per-screen content mount — flex column so a fill-screen can stretch to the fold */
.screen-host{padding:6px 34px 26px; flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
.screen{display:flex; flex-direction:column; gap:13px;
  animation:screen-in var(--dur-base) var(--ease-standard)}
/* Dashboard: the two lower panels have a tall fixed height and extend below the
   fold — the page scrolls to reach them, and each list also scrolls internally. */
.dash-screen{flex:0 0 auto}
@keyframes screen-in{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* --- Dashboard layout: tall lower panels; the page scrolls to reach them --- */
.dash-grid{display:grid; grid-template-columns:681px 439px; gap:18px; align-items:start;
  --dash-panel-h:212px}   /* shared fixed height: morning brief + portfolio pulse */
.col{display:flex; flex-direction:column; gap:14px; min-height:0}
/* Desktop: lock the two lead panels to one matching height (never shrink) */
@media (min-width:900px){
  .dash-grid > .col > .el-brackets{height:var(--dash-panel-h); flex:0 0 auto}
  .dash-grid .pulse-panel{height:var(--dash-panel-h); flex:0 0 auto}
}
.pulse-eyebrow{margin-bottom:16px}
/* Overnight panel: tall fixed height (was ~440 fill → +600), list scrolls inside */
.log{flex:0 0 auto; height:1040px; min-height:0; display:flex; flex-direction:column}
/* overflow-x:hidden locks the column horizontally (no side-to-side wiggle from the
   rows' negative margins); scrollbar-gutter keeps the width steady while scrolling */
.log-list{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable;
  display:flex; flex-direction:column; gap:4px}
.log-list::-webkit-scrollbar{width:8px}
.log-list::-webkit-scrollbar-thumb{background:var(--rule); border-radius:4px}
.log-list::-webkit-scrollbar-track{background:transparent}

/* --- Generic screen section ---------------------------------------------- */
.section{display:flex; flex-direction:column; gap:10px}
.section > .sec-lab{margin-bottom:2px}

/* ===========================================================================
   Scenario stepper bar
   =========================================================================== */
.scenario-bar{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  z-index:var(--z-scenario); display:flex; align-items:center; gap:14px;
  background:var(--ink-0); color:#fff; border-radius:var(--r-pill);
  padding:10px 12px 10px 18px; box-shadow:0 12px 30px rgba(20,24,50,.4);
  font-family:var(--sans); max-width:640px;
}
.scenario-bar .sc-name{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--aria-top); opacity:.9}
.scenario-bar .sc-step{font-size:12.5px; color:#fff}
.scenario-bar .sc-count{font-family:var(--mono); font-size:11px; color:rgba(255,255,255,.5); margin-left:2px}
.scenario-bar .sc-btns{display:flex; gap:6px; margin-left:6px}
.scenario-bar button{
  height:30px; border:0; border-radius:var(--r-pill); cursor:pointer; padding:0 14px;
  font-family:var(--sans); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.06em;
}
.scenario-bar .sc-next{background:linear-gradient(var(--aria-top), var(--aria)); color:#fff}
.scenario-bar .sc-stop{background:rgba(255,255,255,.12); color:rgba(255,255,255,.8)}
.scenario-bar .sc-next:hover{filter:brightness(1.08)}

/* ===========================================================================
   Dev toolbar
   =========================================================================== */
.dev-toggle{
  position:fixed; right:16px; bottom:16px; z-index:var(--z-dev);
  width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  background:var(--ink-0); color:#fff; font-size:16px; line-height:1;
  box-shadow:0 8px 20px rgba(20,24,50,.35); opacity:.5; transition:opacity .15s;
}
.dev-toggle:hover{opacity:1}

.devtools{
  position:fixed; right:16px; bottom:64px; z-index:var(--z-dev); width:300px;
  max-height:78vh; overflow-y:auto;
  background:#12152A; color:#E7E9F5; border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg); box-shadow:0 20px 50px rgba(0,0,0,.5);
  font-family:var(--sans); padding:14px 14px 34px;   /* extra bottom padding lifts the panel height */
}
/* Empty extensible slots — signal to whoever inherits this that more scenarios fit here */
.devtools .dev-slot{width:100%; padding:9px 10px; border:1px dashed rgba(255,255,255,.14);
  border-radius:var(--r-sm); background:transparent; text-align:center;
  font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:rgba(231,233,245,.34)}
.devtools .dev-slot.empty{min-height:32px; padding:0}
.devtools h4{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:#9fa6d6; margin:14px 0 8px}
.devtools h4:first-child{margin-top:0}
.devtools .dev-hint{font-size:10px; color:rgba(231,233,245,.5); margin-bottom:4px}
.devtools .dev-grid{display:flex; flex-wrap:wrap; gap:6px}
.devtools button{
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:#E7E9F5;
  border-radius:var(--r-sm); cursor:pointer; padding:6px 10px;
  font-family:var(--sans); font-size:11px; text-align:left;
}
.devtools button:hover{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.25)}
.devtools button.wide{width:100%}
.devtools button.active{border-color:var(--aria); color:#fff; background:color-mix(in srgb, var(--aria) 18%, transparent)}
.devtools .dev-reset{border-color:rgba(216,67,38,.4); color:#f7b3a6}
.devtools .dev-mono{font-family:var(--mono); font-size:10px}