/* ===========================================================================
   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%, #EEF5F9, transparent 70%),
     radial-gradient(50% 40% at 100% 100%, #F3ECF7, transparent 70%),
     #DFE9F0;
  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%, rgba(29,35,105,0.07), transparent 70%),
     radial-gradient(60% 40% at 82% 100%, rgba(181,104,193,0.08), 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. */
/* Concept A: a permanent, integrated, narrow sidebar. Occupies real layout width
   and never collapses. --rail-w is shared with the AI console's left offset. */
:root{ --rail-w:186px; }
.rail{position:relative; flex:0 0 var(--rail-w); width:var(--rail-w); height:100%}
/* Built ONCE and persists (router updates active state in place). Flush to the
   board's left edge with a hairline divider; the board's rounded corner clips it. */
.rail-inner{
  position:absolute; inset:0; width:var(--rail-w); overflow:visible;
  display:flex; flex-direction:column; align-items:stretch; gap:12px; padding:18px 10px 14px;
  background:#F6F8FB; border-right:1px solid var(--card-border); cursor:default;
}

/* Wordmark row — plain brand text (the glyph has moved to the dock). */
.rail-head{display:flex; align-items:center; gap:8px; height:30px; padding:0 6px 0 8px; margin-bottom:2px}
.rail-word{font-family:var(--brand); font-style:italic; font-weight:700; font-size:23px;
  color:var(--pri); white-space:nowrap; line-height:1}
/* Status dot — idle (muted) by default; only turns green + slowly blinks while
   Elisian is "active" (console open or a just-fired Elisian action → body.el-active). */
.rail-badge{width:14px; height:14px; border-radius:50%; display:grid; place-items:center;
  background:var(--control-active-softer); transition:background var(--dur-base) var(--ease-standard)}
.rail-badge .rb-dot{width:6px; height:6px; border-radius:50%; background:var(--ink-4);
  transition:background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard)}
body.el-active .rail-badge{background:rgba(92,158,51,.16)}
body.el-active .rail-badge .rb-dot{background:var(--success); box-shadow:0 0 0 2px rgba(92,158,51,.18);
  animation:dot-blink 2.4s var(--ease-in-out) infinite}
@keyframes dot-blink{0%,100%{opacity:1} 50%{opacity:.2}}

/* Text-only nav menu (Concept A) — no icons; compact Notion-like rows. */
.rail-icons{display:flex; flex-direction:column; gap:1px; width:100%}
.nav-row{position:relative; display:flex; align-items:center; height:30px; padding:0 10px;
  border-radius:var(--r-sm); color:var(--ink-2); cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);}
.nav-row .lbl{font-size:13.5px; font-weight:500; white-space:nowrap; letter-spacing:-.005em}
.nav-row:hover{background:var(--control-active-softer); color:var(--ink-1)}
.nav-row.active{background:var(--control-active-soft); color:var(--pri)}
.nav-row.active .lbl{font-weight:600}

/* 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 header (greeting only) --------------------------------------- */
/* Concept A: the header is NOT sticky and carries no Ask bar — it simply scrolls
   away with the page. The AI composer lives in the nav dock instead. */
.app-header{
  position:static; background:transparent;
  padding:20px 34px 6px;
}
/* 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 --- */
/* Fluid columns (was 681px 439px) so the wider permanent rail can't overflow the
   grid — the 1.55 : 1 ratio preserves the original proportion at any content width. */
.dash-grid{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); 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:rgba(181,104,193,.18)}
.devtools .dev-reset{border-color:rgba(216,67,38,.4); color:#f7b3a6}
.devtools .dev-mono{font-family:var(--mono); font-size:10px}