/* ===========================================================================
   components.css — reusable UI components, keyed to render helpers in
   scripts/components.js. Each block styles one component; every component is
   usable independently of any one screen. Values reference tokens.css only.
   =========================================================================== */

/* --- Section eyebrow (mono all-caps label) ------------------------------- */
.eyebrow{font-size:var(--fs-eyebrow); letter-spacing:.16em; color:var(--ink-3)}
.eyebrow.pri{color:var(--pri)}
.eyebrow.aria{color:var(--aria-deep)}
.eyebrow b{color:var(--ink-0); font-weight:600}

/* --- Buttons ------------------------------------------------------------- */
.lp-btn, .lp-btn-ghost{
  height:34px; border:0; cursor:pointer; border-radius:3px;
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--sans); font-size:10px; font-weight:500;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
  transition:background .3s var(--ease-standard), box-shadow .3s var(--ease-standard),
     filter .15s var(--ease-standard), border-color .15s var(--ease-standard);
}
.lp-btn-ghost{background:transparent; color:var(--ink-2); padding:0 14px; border:1px solid var(--rule)}
.lp-btn-ghost:hover{border-color:var(--rule-strong); color:var(--ink-1)}
.lp-btn{
  padding:0 16px; font-size:10.5px; letter-spacing:.08em; color:#fff;
  background:linear-gradient(var(--pri-top), var(--pri));
  box-shadow:var(--sh-btn-pri);
}
.lp-btn:hover{filter:brightness(1.06)}
.lp-btn.aria{background:linear-gradient(var(--aria-top), var(--aria)); box-shadow:var(--sh-btn-aria)}
/* Ask Elisian "activates" to the primary slick gradient on hover/press (slow + eased) */
.lp-btn.aria:hover, .lp-btn.aria:active{
  background:linear-gradient(150deg, var(--pri-top) 0%, var(--pri) 55%, var(--aria-deep) 100%);
  box-shadow:0 4px 16px var(--aria-glow);
}
/* Inside the Ask bar: rests plain (like the ghost neighbours) → branded on panel
   hover → slick gradient on the button's own hover. Slower/eased, intent-delayed. */
.ask .lp-btn.aria{
  background:transparent; color:var(--ink-2); border:1px solid var(--rule); box-shadow:none;
  transition:background var(--hover-slow) var(--ease-in-out), color var(--hover-slow) var(--ease-in-out),
     border-color var(--hover-slow) var(--ease-in-out), box-shadow var(--hover-slow) var(--ease-in-out);
}
.ask:hover .lp-btn.aria, .ask:focus-within .lp-btn.aria{
  background:linear-gradient(var(--aria-top), var(--aria)); color:#fff; border-color:transparent;
  box-shadow:var(--sh-btn-aria); transition-delay:var(--hover-delay);
}
.ask .lp-btn.aria:hover, .ask .lp-btn.aria:active{
  background:linear-gradient(150deg, var(--pri-top) 0%, var(--pri) 55%, var(--aria-deep) 100%);
  color:#fff; border-color:transparent; box-shadow:0 4px 16px var(--aria-glow);
}
/* Type-coded primary buttons (decision CTAs): flat + lightly tinted at rest, and the
   solid type gradient (the former default) on hover. */
.lp-btn.flag, .lp-btn.leasing, .lp-btn.spend{
  border:1px solid transparent; box-shadow:none;
  transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard),
     border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard)}
.lp-btn.flag{background:rgba(216,67,38,.10); color:var(--danger-solid); border-color:rgba(216,67,38,.22)}
.lp-btn.leasing{background:rgba(130,133,194,.13); color:var(--leasing-solid); border-color:rgba(130,133,194,.28)}
.lp-btn.spend{background:rgba(225,161,38,.15); color:var(--caution-solid); border-color:rgba(225,161,38,.34)}
.lp-btn.flag:hover{background:linear-gradient(var(--danger), var(--danger-solid)); color:#fff; border-color:transparent; box-shadow:0 2px 10px rgba(216,67,38,.28)}
.lp-btn.leasing:hover{background:linear-gradient(var(--leasing), var(--leasing-solid)); color:#fff; border-color:transparent; box-shadow:0 2px 10px rgba(130,133,194,.30)}
.lp-btn.spend:hover{background:linear-gradient(var(--caution-border), var(--caution-solid)); color:#fff; border-color:transparent; box-shadow:0 2px 10px rgba(225,161,38,.28)}
/* Small leading icon inside a button (e.g. "View Application") */
.lp-btn .btn-ic, .lp-btn-ghost .btn-ic{display:inline-flex; margin-right:-1px}
.lp-btn .btn-ic svg, .lp-btn-ghost .btn-ic svg{width:14px; height:14px}

/* Sort-filter pills (panel header) — color-coded by type */
.sortpills{display:flex; gap:6px}
.sortpill{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 11px;
  border-radius:var(--r-pill); border:1px solid var(--rule); background:transparent; cursor:pointer;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  transition:border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard);}
.sortpill .d{width:6px; height:6px; border-radius:50%}
.sortpill.recent .d{background:var(--ink-4)}
.sortpill.flag .d{background:var(--danger)}
.sortpill.leasing .d{background:var(--leasing)}
.sortpill.spend .d{background:var(--caution-border)}
.sortpill:hover{border-color:var(--rule-strong); color:var(--ink-1)}
/* Active: type pills take their type colour; Recent (no type) uses the neutral
   blue-grey. Any active pill darkens on hover. */
.sortpill.active{color:#fff; border-color:transparent; background:var(--control-active)}
.sortpill.active .d{background:#fff}
.sortpill.flag.active{background:var(--danger)}
.sortpill.leasing.active{background:var(--leasing)}
.sortpill.spend.active{background:var(--caution-border)}
.sortpill.active:hover{filter:brightness(0.92)}

/* --- Pill ---------------------------------------------------------------- */
.el-pill{
  display:inline-flex; align-items:center; gap:8px; height:28px; padding:0 12px;
  border-radius:var(--r-pill); background:var(--glass-1); backdrop-filter:blur(8px);
  border:1px solid var(--rule); font-size:11px; color:var(--ink-1);
}
.el-dot{width:6px; height:6px; border-radius:50%;
  background:var(--success); box-shadow:0 0 8px rgba(92,158,51,.5)}

/* --- Status pill (Collection-E roles) ------------------------------------ */
.status{
  display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 9px;
  border-radius:var(--r-pill); font-family:var(--mono); font-size:10.5px;
  font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid transparent; white-space:nowrap;
}
.status .sd{width:5px; height:5px; border-radius:50%; background:currentColor}
.status.success  {color:var(--success-solid);  background:rgba(92,158,51,.12);  border-color:rgba(92,158,51,.35)}
.status.caution  {color:var(--caution-solid);  background:rgba(225,161,38,.14); border-color:var(--caution-border)}
.status.danger   {color:var(--danger-solid);   background:rgba(216,67,38,.10);  border-color:rgba(216,67,38,.45)}
.status.progress {color:var(--progress-solid); background:rgba(74,136,166,.12); border-color:rgba(74,136,166,.30)}
.status.leasing  {color:var(--leasing-solid);  background:rgba(130,133,194,.12);border-color:rgba(130,133,194,.35)}
.status.info     {color:var(--info-solid);     background:rgba(100,121,143,.12);border-color:rgba(100,121,143,.30)}
.status.neutral  {color:var(--ink-3);          background:rgba(29,35,105,.05);  border-color:var(--rule)}

/* --- Bell + Avatar ------------------------------------------------------- */
.bell{
  position:relative; width:38px; height:38px; border-radius:var(--r-lg);
  display:grid; place-items:center; background:var(--glass-1);
  border:1px solid var(--rule); color:var(--ink-2); cursor:pointer;
}
.bell svg{width:17px; height:17px}
.bell .badge{
  position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px;
  border-radius:8px; display:grid; place-items:center;
  background:var(--aria); color:#fff; font-family:var(--mono);
  font-size:11px; font-weight:700;
}
.avatar{
  width:38px; height:38px; border-radius:var(--r-lg); display:grid; place-items:center;
  background:var(--control-active);
  color:#fff; font-size:14px; font-weight:600; cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard);
}
.avatar:hover{background:var(--control-active-hover)}

/* --- Toasts -------------------------------------------------------------- */
.toast{
  position:relative; display:flex; gap:11px; align-items:flex-start;
  background:var(--bg-panel); border-radius:var(--r-lg);
  padding:11px 13px 11px 16px; box-shadow:var(--sh-toast);
  animation:toast-in .28s cubic-bezier(.2,.8,.3,1);
}
@keyframes toast-in{from{opacity:0; transform:translateX(12px)} to{opacity:1; transform:none}}
.toast .accent{position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:var(--r-lg) 0 0 var(--r-lg)}
.toast .tico{display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px}
.toast .tico svg{width:16px; height:16px}
.toast .tbody{flex:1; min-width:0}
.toast .trow{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:5px}
.toast .tlabel{font-size:9.5px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* time (optional) + Dismiss share the right end of the label row */
.toast .trow-right{flex:0 0 auto; margin-left:auto; display:flex; align-items:center; gap:9px}
.toast .ttime{font-size:10px; color:var(--ink-3); letter-spacing:.02em}
.toast .ttitle{font-size:12px; font-weight:500; color:var(--ink-0); line-height:1.35}
.toast .tsub{font-size:10.5px; color:var(--ink-2); line-height:1.4; margin-top:2px}
/* Text button (was a "×") — sits in the label row, mono/uppercase like the other
   small controls in the system. */
.toast .tclose{flex:0 0 auto; border:0; background:none; cursor:pointer; padding:2px 0; line-height:1;
  font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-4); transition:color var(--dur-fast) var(--ease-standard)}
.toast .tclose:hover, .toast .tclose:focus-visible{color:var(--ink-1)}
.toast.danger{box-shadow:var(--sh-toast), 0 0 16px rgba(216,67,38,.28)}
.toast.danger .accent{background:var(--danger); box-shadow:0 0 10px rgba(216,67,38,.6)}
.toast.danger .tico, .toast.danger .tlabel{color:var(--danger)}
.toast.info .accent{background:var(--progress); box-shadow:0 0 10px rgba(74,136,166,.5)}
.toast.info .tico, .toast.info .tlabel{color:var(--progress-solid)}
.toast.aria .accent{background:var(--aria); box-shadow:0 0 10px var(--aria-glow)}
.toast.aria .tico, .toast.aria .tlabel{color:var(--aria-deep)}
.toast.success .accent{background:var(--success)}
.toast.success .tico, .toast.success .tlabel{color:var(--success-solid)}

/* (The legacy nav-rail block that lived here is gone — concept D has no rail.) */

/* --- Ask Elisian bar (Elisian surface) ----------------------------------------- */
.ask{
  display:flex; align-items:center; gap:14px; padding:11px 16px; border-radius:14px;
  background:linear-gradient(rgba(181,104,193,.10), rgba(181,104,193,.03));
  border:1px solid var(--aria-soft); box-shadow:0 0 20px rgba(181,104,193,.06) inset;
  transition:border-color var(--hover-slow) var(--ease-in-out),
     box-shadow var(--hover-slow) var(--ease-in-out), background var(--hover-slow) var(--ease-in-out);
}
/* Search entry: rests "empty" (border darkens, phrase + branded button appear on
   hover). Intent delay so a quick graze doesn't trigger it. */
.ask:hover, .ask:focus-within{
  border-color:var(--aria); background:linear-gradient(rgba(181,104,193,.16), rgba(181,104,193,.05));
  box-shadow:0 0 20px rgba(181,104,193,.06) inset;   /* inner glow only — no drop shadow */
  transition-delay:var(--hover-delay);
}
/* Elisian logo glyph — replaces the generic AI sphere. Rests as a light,
   white-filled mark inside AI/work panels; the panel's hover "activates" it to
   the primary slick gradient with a sheen sweep + pop — Elisian "energy". */
.el-glyph{
  position:relative; flex:0 0 auto; width:30px; height:30px; border-radius:var(--r-md);
  display:grid; place-items:center; overflow:hidden;
  background:#fff; border:1px solid var(--aria-soft);
  box-shadow:0 2px 8px rgba(142,76,154,0.12);
  transition:background .25s var(--ease-standard), border-color .2s var(--ease-standard),
     box-shadow .25s var(--ease-standard), transform .25s var(--ease-emphasized);
}
.el-glyph span{
  position:relative; z-index:2; line-height:1;
  font-family:var(--brand); font-style:italic; font-weight:700; font-size:22px;
  color:var(--aria); transform:translateY(-1.9px);
  transition:color .3s var(--ease-standard);
}
/* (The .el-glyph.logo "resting logo" block that lived here is gone — the header's
   account cluster now uses concept B's bell + avatar, so nothing renders that glyph.
   The Ask Elisian trigger's .dock-glyph and the agent panel's plain .el-glyph remain.) */
/* sheen highlight (swept across on activation) */
.el-glyph::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,.55) 50%, transparent 68%);
  transform:translateX(-130%); opacity:0;
}
/* ACTIVATED — hovering the AI panel (Ask bar / Morning-brief card) */
.ask:hover .el-glyph, .ask:focus-within .el-glyph,
.el-brackets:hover .el-glyph{
  background:linear-gradient(150deg, var(--pri-top) 0%, var(--pri) 62%, var(--aria-deep) 100%);
  border-color:transparent; box-shadow:0 6px 18px var(--aria-glow); transform:scale(1.08);
  transition-delay:var(--hover-delay);
}
.ask:hover .el-glyph span, .ask:focus-within .el-glyph span,
.el-brackets:hover .el-glyph span{color:#fff; transition-delay:var(--hover-delay)}
.ask:hover .el-glyph::before, .ask:focus-within .el-glyph::before,
.el-brackets:hover .el-glyph::before{animation:glyph-sheen .75s var(--ease-standard) var(--hover-delay)}
@keyframes glyph-sheen{
  0%{transform:translateX(-130%); opacity:0}
  28%{opacity:1}
  100%{transform:translateX(130%); opacity:0}
}
/* Functional search input — placeholder is hidden at rest, revealed on hover/focus */
.ask .ask-input{flex:1; min-width:0; border:0; outline:none; background:transparent; padding:0;
  font-family:var(--sans); font-size:14px; color:var(--ink-1)}
.ask .ask-input::placeholder{color:transparent; transition:color var(--hover-slow) var(--ease-in-out)}
.ask:hover .ask-input::placeholder,
.ask:focus-within .ask-input::placeholder{color:var(--ink-3); transition-delay:var(--hover-delay)}
.ask .chips{display:flex; gap:8px}
/* Quick-action chips: hidden at rest; on Ask-bar activation they fade up into view
   with a light, quick, subtly-staggered touch (reveal delay = the bar's intent delay
   so a graze won't trigger them). Only opacity/transform carry the reveal delay, so
   the chips' own hover/press feedback stays instant. */
.ask-chip{
  height:34px; padding:0 14px; border-radius:3px; cursor:pointer; white-space:nowrap;
  display:inline-flex; align-items:center;
  font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-2); background:var(--glass-3); border:1px solid var(--aria-soft);
  opacity:0; transform:translateY(6px); pointer-events:none;
  /* transition-property order matters — the reveal delay below is applied per-property */
  transition:opacity .15s var(--ease-standard), transform .18s var(--ease-emphasized),
     color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard),
     border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
/* Reveal: only opacity + transform carry the intent delay (chip hover/press stay instant) */
.ask:hover .ask-chip, .ask:focus-within .ask-chip{
  opacity:1; transform:none; pointer-events:auto;
  transition-delay:var(--hover-delay), var(--hover-delay), 0s, 0s, 0s, 0s}
.ask:hover .ask-chip:nth-child(2), .ask:focus-within .ask-chip:nth-child(2){
  transition-delay:calc(var(--hover-delay) + 35ms), calc(var(--hover-delay) + 35ms), 0s, 0s, 0s, 0s}
.ask:hover .ask-chip:nth-child(3), .ask:focus-within .ask-chip:nth-child(3){
  transition-delay:calc(var(--hover-delay) + 70ms), calc(var(--hover-delay) + 70ms), 0s, 0s, 0s, 0s}
/* Chip's own states — Elisian-orchid tint on hover; pressed reads with a soft inset */
.ask-chip:hover{color:var(--aria-deep); background:#fff; border-color:var(--aria); box-shadow:0 2px 8px rgba(181,104,193,.14)}
.ask-chip:active{color:var(--aria-deep); background:var(--aria-soft); border-color:var(--aria-deep); box-shadow:inset 0 1px 3px rgba(142,76,154,.18)}

/* --- Elisian morning-brief bracket card (Elisian surface) ---------------------- */
.el-brackets{
  position:relative; display:flex; gap:18px; align-items:flex-start; padding:16px 22px 16px 16px;
  background:linear-gradient(rgba(181,104,193,.09), rgba(181,104,193,.02));
  border:1px solid rgba(181,104,193,.18);
  transition:border-color var(--hover-slow) var(--ease-in-out),
     box-shadow var(--hover-slow) var(--ease-in-out), background var(--hover-slow) var(--ease-in-out),
     transform var(--hover-slow) var(--ease-emphasized);
}
/* Morning brief "activates": darker border + gradient drama + a slight lift/glow */
.el-brackets:hover{
  border-color:rgba(142,76,154,0.42);
  background:linear-gradient(145deg, rgba(181,104,193,.17) 0%, rgba(181,104,193,.05) 60%, rgba(142,76,154,.10) 100%);
  box-shadow:0 14px 30px -14px var(--aria-glow);
  transform:translateY(-1px);
  transition-delay:var(--hover-delay);
}
.el-brackets .br{position:absolute; width:14px; height:14px; border:1.5px solid var(--aria);
  transition:border-color var(--hover-slow) var(--ease-in-out)}
.el-brackets:hover .br{border-color:var(--aria-deep); transition-delay:var(--hover-delay)}
.el-brackets .tl{top:-1px; left:-1px; border-right:0; border-bottom:0}
.el-brackets .tr{top:-1px; right:-1px; border-left:0; border-bottom:0}
.el-brackets .bl{bottom:-1px; left:-1px; border-right:0; border-top:0}
.el-brackets .br2{bottom:-1px; right:-1px; border-left:0; border-top:0}
.brief-body{flex:1; min-width:0}
/* Hover-only report links, top-right of the brief (revealed with the card's activation) */
.brief-actions{position:absolute; top:19px; right:22px; z-index:2;
  display:inline-flex; align-items:center; gap:10px;
  opacity:0; transform:translateY(-2px);
  transition:opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard)}
.el-brackets:hover .brief-actions{opacity:1; transform:none; transition-delay:var(--hover-delay)}
.brief-actions .brief-act{background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--sans); font-size:11.5px; font-weight:500; color:var(--ink-3); white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-standard)}
.brief-actions .brief-act:hover{color:var(--aria-deep)}
.brief-actions .ba-sep{color:var(--ink-4); font-size:11px; user-select:none}
/* Eyebrow now carries the Elisian glyph (the agent "attending") + the label */
.brief-eyebrow{display:flex; align-items:center; gap:11px; margin-bottom:14px}
.brief-eyebrow .be-text{font-size:11px; color:var(--aria-deep); letter-spacing:.16em; word-spacing:-1px}
.brief-lead{font-size:15px; color:var(--ink-1); line-height:1.5}
.brief-lead b{font-weight:600; color:var(--ink-0)}
/* Decisions band — full-width footer inside the brief; the WHOLE band highlights on hover,
   the way the count pill used to. Sits last, breaks the body padding to run edge-to-edge. */
/* Overnight-actions row — reports what Elisian handled on your behalf, and acts as a
   hand-off: clicking it opens the Overnight actions tab below. overflow:hidden clips
   .bo-inner while it marquees in from the right on load. */
.brief-overnight{
  position:relative; overflow:hidden; cursor:pointer;
  /* padding is symmetric (was 56/62, which aligned the old left-aligned text with the
     card's content) — the copy is centred now, so it must centre on the row itself */
  margin:18px -22px -16px -16px; padding:13px 62px;
  font-size:13.5px;
  background:rgba(181,104,193,.08); color:var(--aria-deep);
  transition:background var(--hover-slow) var(--ease-in-out), color var(--hover-slow) var(--ease-in-out)}
/* Lead + arrow read as one phrase, centred in the row (there's no right-hand hint now). */
.bo-inner{display:flex; align-items:center; justify-content:center; gap:9px;
  animation:bo-marquee-in 1.05s var(--ease-emphasized) .5s both}
/* Enters from the right edge of the row after a .5s beat, settles into place. Runs once
   per render — `both` holds it off-stage through the delay so it can't flash first. */
@keyframes bo-marquee-in{
  from{ transform:translateX(100%); opacity:0 }
  60% { opacity:1 }
  to  { transform:translateX(0); opacity:1 }
}
.brief-overnight .bo-lead{font-weight:700}
.brief-overnight .bo-n{font-family:var(--figure); font-weight:800; font-size:15px; letter-spacing:-.01em}
.brief-overnight .bd-arrow{flex:0 0 auto; font-weight:700}
.el-brackets:hover .brief-overnight{
  background:var(--aria); color:#fff; transition-delay:var(--hover-delay)}
/* it's a control — nudge the arrow on its own hover */
.brief-overnight:hover .bd-arrow{animation:bo-arrow-nudge .6s var(--ease-emphasized)}
@keyframes bo-arrow-nudge{0%,100%{transform:translateY(0)} 50%{transform:translateY(2px)}}
@media (prefers-reduced-motion:reduce){
  .bo-inner{animation:none}
  .brief-overnight:hover .bd-arrow{animation:none}
}
.brief-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:12px}
.brief-stats .st .lbl{font-size:11px; color:var(--ink-3); letter-spacing:.06em; margin-bottom:5px; white-space:nowrap}
.brief-stats .st .val{font-family:var(--figure); font-size:24px; font-weight:800; letter-spacing:-.01em; color:var(--ink-0); display:flex; align-items:baseline; gap:5px}
.brief-stats .st .val .u{font-family:var(--mono); font-size:10px; color:var(--ink-3); font-weight:500; letter-spacing:0}
/* Forced "hot" (activated) state — used by the welcome intro to present the brief
   already-active on entrance, then cool down. Mirrors :hover minus the lift (the
   entrance transform owns transform). */
.el-brackets.io-hot{
  border-color:rgba(142,76,154,0.42);
  background:linear-gradient(145deg, rgba(181,104,193,.17) 0%, rgba(181,104,193,.05) 60%, rgba(142,76,154,.10) 100%);
  box-shadow:0 14px 30px -14px var(--aria-glow)}
.el-brackets.io-hot .br{border-color:var(--aria-deep)}
.el-brackets.io-hot .el-glyph{
  background:linear-gradient(150deg, var(--pri-top) 0%, var(--pri) 62%, var(--aria-deep) 100%);
  border-color:transparent; box-shadow:0 6px 18px var(--aria-glow); transform:scale(1.08)}
.el-brackets.io-hot .el-glyph span{color:#fff}
.el-brackets.io-hot .brief-decisions{background:var(--aria); color:#fff}

/* --- Panel base ---------------------------------------------------------- */
/* Larger component cards carry a stronger outline (they sit on a white bg now)
   and pick up a touch of glow on hover. Elisian surfaces opt out (see below). */
.panel{background:var(--bg-panel); border:1px solid var(--card-border); border-radius:var(--r-lg);
  transition:border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard)}
.panel.glass{background:var(--glass-2); backdrop-filter:blur(8px)}
.panel.pad{padding:18px 20px}
.panel:hover{border-color:var(--card-border-hover); box-shadow:var(--card-glow)}

/* --- Decision row -------------------------------------------------------- */
/* Panel is a flex column: fixed header (title + sort pills) + a scrolling list. */
/* Concept C: the decision panel grows to show ALL items (no fixed height, no
   internal scroll) — the page scrolls to reach them. */
.dec-card{padding:16px 20px; display:flex; flex-direction:column; flex:0 0 auto; height:auto}
.dec-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:11px; flex:0 0 auto}
.dec-head .aside{font-size:10.5px; color:var(--ink-3); letter-spacing:.06em}
.dec-list{display:flex; flex-direction:column; gap:10px; flex:0 0 auto; overflow:visible}
.dec{position:relative; padding:13px 18px; border-radius:var(--r-md); border:1px solid var(--rule);
  transition:opacity var(--dur-base) var(--ease-standard)}
.dec .bar{position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:var(--r-md) 0 0 var(--r-md)}
.dec .drow{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.dec .dtag{font-size:10.5px; letter-spacing:.16em; font-weight:500}
.dec .dcode{font-size:10.5px; color:var(--ink-3); letter-spacing:.10em}
.dec .dtitle{font-size:15px; font-weight:600; color:var(--ink-0); margin-bottom:6px; letter-spacing:-.005em}
.dec .ddesc{font-size:12.5px; color:var(--ink-2); line-height:1.5; margin-bottom:12px}
.dec .dfoot{display:flex; align-items:center; justify-content:space-between; gap:12px}
.dec .drec{font-size:11px; color:var(--ink-2)}
.dec .drec .aria-mark{font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--aria-deep); font-weight:500; margin-right:6px}
.dec .dbtns{display:flex; gap:7px; flex:0 0 auto}
.dec.leasing{background:rgba(130,133,194,.06)} .dec.leasing .bar{background:var(--leasing); box-shadow:0 0 12px rgba(130,133,194,.5)} .dec.leasing .dtag{color:var(--leasing-solid)}
.dec.flag{background:rgba(216,67,38,.05)}       .dec.flag .bar{background:var(--danger); box-shadow:0 0 12px rgba(216,67,38,.4)}    .dec.flag .dtag{color:var(--danger-solid)}
.dec.spend{background:rgba(225,161,38,.07)}     .dec.spend .bar{background:var(--caution-border); box-shadow:0 0 12px rgba(225,161,38,.4)} .dec.spend .dtag{color:var(--caution-solid)}
.dec.resolved{opacity:.55}
.dec.resolved .dbtns{display:none}

/* --- Inbox (notifications destination) ----------------------------------- */
/* A short list of what Elisian is surfacing for you; each row deep-links to where
   you act. Severity drives the accent bar + icon tint (mirrors the decision rows). */
.inbox-list{display:flex; flex-direction:column; gap:10px}
.inbox-item{position:relative; display:flex; align-items:flex-start; gap:13px; padding:15px 16px 15px 20px;
  border:1px solid var(--rule); border-radius:var(--r-md); background:var(--bg-panel); cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-standard),
     box-shadow var(--dur-fast) var(--ease-standard)}
.inbox-item:hover{border-color:var(--card-border-hover); box-shadow:var(--card-glow)}
.inbox-item .ib-bar{position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:var(--r-md) 0 0 var(--r-md)}
.ib-ic{flex:0 0 auto; width:34px; height:34px; border-radius:9px; display:grid; place-items:center; font-size:18px}
.ib-ic i{line-height:1}
.ib-body{flex:1; min-width:0}
.ib-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px}
.ib-label{font-size:10.5px; letter-spacing:.14em; font-weight:600}
.ib-time{font-size:10.5px; color:var(--ink-3); letter-spacing:.08em}
.ib-title{font-size:14px; font-weight:600; color:var(--ink-0); letter-spacing:-.005em; margin-bottom:3px}
.ib-sub{font-size:12.5px; color:var(--ink-2); line-height:1.5}
.ib-go{flex:0 0 auto; align-self:center; color:var(--ink-4); display:inline-flex;
  transition:transform var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard)}
.ib-go svg{width:18px; height:18px}
.inbox-item:hover .ib-go{transform:translateX(2px); color:var(--ink-2)}
.inbox-item.urgent  .ib-bar{background:var(--danger)}
.inbox-item.urgent  .ib-ic{background:rgba(216,67,38,.10); color:var(--danger-solid)}
.inbox-item.urgent  .ib-label{color:var(--danger-solid)}
.inbox-item.message .ib-bar{background:var(--leasing)}
.inbox-item.message .ib-ic{background:rgba(130,133,194,.12); color:var(--leasing-solid)}
.inbox-item.message .ib-label{color:var(--leasing-solid)}
.inbox-item.action  .ib-bar{background:var(--caution-border)}
.inbox-item.action  .ib-ic{background:rgba(225,161,38,.12); color:var(--caution-solid)}
.inbox-item.action  .ib-label{color:var(--caution-solid)}
.inbox-item.aria    .ib-bar{background:var(--aria)}
.inbox-item.aria    .ib-ic{background:rgba(181,104,193,.12); color:var(--aria-deep)}
.inbox-item.aria    .ib-label{color:var(--aria-deep)}
.inbox-empty{padding:40px 22px; text-align:center; color:var(--ink-3); font-size:13px;
  border:1px dashed var(--card-border); border-radius:var(--r-md)}

/* --- Portfolio pulse: header + KPI grid + ratio bars --------------------- */
/* Pulse & morning-brief share one fixed desktop height (see --dash-panel-h).
   Pulse mirrors the brief's square bracket-corner treatment, but in neutral
   blue-grey — a *related* surface, not "Elisian-powered" (that stays orchid). */
/* Portfolio pulse, the Command Center tabs, and the agent panel share ONE square,
   neutral, minimalist card treatment: a blue-grey borderline (matching in default +
   hover) and a subtle drop-shadow lift on hover. Only the pulse adds the bracket
   corners + bg wash. */
.panel.pulse-panel, .panel.dec-card, .panel.agent-panel{
  position:relative; border-radius:0;
  border:1px solid var(--control-active-soft);
  transition:border-color var(--hover-slow) var(--ease-in-out),
     box-shadow var(--hover-slow) var(--ease-in-out),
     transform var(--hover-slow) var(--ease-emphasized)}
.panel.pulse-panel:hover{
  border-color:rgba(69,82,106,.42);
  box-shadow:0 12px 28px -18px rgba(20,24,50,.30);
  transform:translateY(-2px)}
/* The Command Center + agent panels hold internal scroll/content; keep the border
   reactive but don't lift them (a moving frame under a scrolling list reads badly). */
.panel.dec-card:hover, .panel.agent-panel:hover{border-color:rgba(69,82,106,.42)}
.panel.pulse-panel{display:flex; flex-direction:column; backdrop-filter:none;
  background:linear-gradient(rgba(92,108,130,.05), rgba(92,108,130,.015))}
.pulse-panel .br{position:absolute; width:14px; height:14px; border:1.5px solid var(--control-active);
  transition:border-color var(--hover-slow) var(--ease-in-out)}
.pulse-panel:hover .br{border-color:var(--control-active-hover)}
.pulse-panel .tl{top:-1px; left:-1px; border-right:0; border-bottom:0}
.pulse-panel .tr{top:-1px; right:-1px; border-left:0; border-bottom:0}
.pulse-panel .bl{bottom:-1px; left:-1px; border-right:0; border-top:0}
.pulse-panel .br2{bottom:-1px; right:-1px; border-left:0; border-top:0}
.pulse-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
/* Customize affordance — hidden until the panel is hovered */
.pulse-customize{display:inline-flex; align-items:center; gap:6px; padding:0;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); background:none; border:0; cursor:pointer;
  opacity:0; transform:translateY(-1px);
  transition:opacity var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard)}
.pulse-panel:hover .pulse-customize{opacity:1}
.pulse-customize:hover{color:var(--pri)}
.pulse-customize svg{width:14px; height:14px}

.kpis{flex:1; display:grid; grid-template-columns:1fr 1fr; gap:6px 4px; align-content:space-between;
  margin:0 -11px}
.kpi{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 11px; border-radius:var(--r-md);
  transition:background var(--dur-fast) var(--ease-standard)}
.kpi:hover{background:var(--pri-tint)}   /* light wash: focus one topic at a time */
.kpi .lbl{font-size:11px; color:var(--ink-3); letter-spacing:.15em; margin-bottom:6px}
.kpi .val{display:flex; align-items:baseline; gap:6px}
.kpi.has-inline .val{align-items:center}   /* value icon + link line up centered with the figure */
.kpi .val .n{font-family:var(--figure); font-size:26px; font-weight:800; letter-spacing:-.01em; color:var(--pri); line-height:1}
.kpi .val .u{font-family:var(--mono); font-size:10px; color:var(--ink-3)}
.kpi.warn .val .n{color:var(--caution-solid)}
/* Open tickets: "3 +" stays primary blue; "1 SLA" is a mid-level (caution) alert + ticket icon */
.kpi .val .plus{font-family:var(--figure); font-size:20px; font-weight:700; color:var(--pri); margin:0 -1px; align-self:center}
.kpi .val .sla{display:inline-flex; align-items:center; align-self:center;
  font-family:var(--figure); font-size:22px; font-weight:600; letter-spacing:-.01em; line-height:1; color:var(--caution-solid)}
/* SLA is an internal link too (→ maintenance), styled distinctly from View Applications */
.kpi .val .sla-link{cursor:pointer; text-decoration:none; border-bottom:1.5px solid transparent;
  transition:border-color var(--dur-fast) var(--ease-standard)}
.kpi .val .sla-link:hover{border-bottom-color:currentColor}
/* In leasing: application icon + an internal link, matched to the brief-hint size */
.kpi .val .kicon{display:inline-flex; color:var(--ink-3)} .kpi .val .kicon svg{width:18px; height:18px}
.kpi-link{margin-left:2px; font-size:12.5px; color:var(--pri); cursor:pointer; white-space:nowrap;
  text-decoration:none; border-bottom:1px solid transparent; transition:border-color var(--dur-fast) var(--ease-standard)}
.kpi-link:hover{border-bottom-color:currentColor}

/* Vertical ratio bar — bottom-up fill, amber→green so <100% reads "positive,
   not fully there". Sits to the right of the KPI value. */
.vmeter{flex:0 0 auto; width:13px; height:46px;
  background:rgba(29,35,105,.12); overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end}
.vmeter .vfill{width:100%;
  background:linear-gradient(to top, var(--caution) 0%, var(--success) 78%)}

/* Legacy horizontal meter (gallery only) */
.meter{margin-top:18px; height:5px; border-radius:3px; background:rgba(29,35,105,.10); overflow:hidden}
.meter .fill{height:100%; border-radius:3px;
  background:linear-gradient(90deg, var(--pri-top), var(--pri)); box-shadow:0 0 10px var(--pri-glow)}

/* --- Activity log header + item ------------------------------------------ */
/* Header: eyebrow left, hover-only "View full activity log" right (like Customize) */
.log-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex:0 0 auto}
/* padding gives it a real hit area + breathing room from the panel edge */
.log-viewall{display:inline-flex; align-items:center; gap:7px; padding:6px 12px; white-space:nowrap;
  margin-left:-12px;                       /* pad inward without shifting the text off-grid */
  border-radius:var(--r-sm);
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); background:none; border:0; cursor:pointer;
  opacity:0; transform:translateY(-1px);
  transition:opacity var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard),
     background var(--dur-fast) var(--ease-standard)}
.log-viewall:hover{background:var(--control-active-softer)}
/* Quiet affordance: reveal on panel hover. Rescoped from the old .log panel wrapper
   (concept A) to the Command Center panel that now hosts the Overnight actions tab. */
.cc-panel:hover .log-viewall{opacity:1}
.log-viewall:hover{color:var(--aria-deep)}
.log-viewall svg{width:14px; height:14px}

/* Customize — a copy of the Portfolio Pulse control, on the Overnight actions head.
   Hover-state only: it surfaces with the panel and is invisible at rest. */
.log-customize{display:inline-flex; align-items:center; gap:6px; padding:0; white-space:nowrap;
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-3); background:none; border:0; cursor:pointer;
  opacity:0; transform:translateY(-1px);
  transition:opacity var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard)}
.cc-panel:hover .log-customize{opacity:1}
.log-customize:hover{color:var(--pri)}
.log-customize svg{width:14px; height:14px}

/* Tighter horizontal padding than a standard .pad panel — pulls the icon column
   left into the freed space (header + rows share this 10px inset). */
.panel.log{padding:16px 10px 12px}
/* Item: Phosphor icon tile leads; text + timestamp stack; whole row washes on hover.
   No negative margin — the row sits inside the list so its rounded wash never gets
   clipped by the column's overflow-x:hidden. */
.log-item{display:flex; align-items:flex-start; gap:11px; padding:7px 8px 7px 6px;
  border-radius:var(--r-md); transition:background var(--dur-fast) var(--ease-standard)}
.log-item:hover{background:var(--pri-tint)}
.log-item .li-icon{flex:0 0 auto; width:30px; height:30px; border-radius:var(--r-sm);
  display:grid; place-items:center; background:#fff; border:1px solid var(--border); color:var(--aria-deep)}
.log-item .li-icon i{font-size:17px; line-height:1}
.log-item.money .li-icon{color:var(--success-solid)}   /* green icon on the white tile */
.log-item .lc{flex:1; min-width:0; padding-top:1px}
.log-item .lc .lt{font-size:12.5px; color:var(--ink-1); line-height:1.4}
.log-item .lc .ltime{display:inline-block; margin-top:3px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.06em; color:var(--ink-3)}

/* --- List row (maintenance / applicants) --------------------------------- */
.row{
  display:flex; align-items:center; gap:14px; padding:12px 16px;
  border:1px solid var(--card-border); border-radius:var(--r-md); background:var(--bg-panel);
  transition:border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.row:hover{border-color:var(--card-border-hover); box-shadow:var(--card-glow)}
.row + .row{margin-top:8px}
.row .r-main{flex:1; min-width:0}
.row .r-title{font-size:14px; font-weight:600; color:var(--ink-0); margin-bottom:3px; letter-spacing:-.005em}
.row .r-sub{font-size:11px; color:var(--ink-3)}
.row .r-meta{display:flex; align-items:center; gap:10px; flex:0 0 auto}
.row .r-when{font-family:var(--mono); font-size:11px; color:var(--ink-3); letter-spacing:.06em}

/* --- Property card ------------------------------------------------------- */
/* Concept-A photo-forward card: cover + badge overlay, address, stats, rent footer */
.propa-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(258px, 1fr)); gap:12px}
.propa{background:var(--bg-panel); border:1px solid var(--card-border); border-radius:var(--r-lg);
  overflow:hidden; cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard)}
.propa:hover{border-color:var(--pri); box-shadow:var(--card-glow)}
.propa .cover{position:relative; height:150px; background:#e6edf3}
.propa .cover.cv0, .propw .cv0{background:linear-gradient(135deg,#cfe0ee,#a7c3dd)}
.propa .cover.cv1, .propw .cv1{background:linear-gradient(135deg,#d9e7d2,#b2cda4)}
.propa .cover.cv2, .propw .cv2{background:linear-gradient(135deg,#efe3cf,#d8c29e)}
.propa .cover.cv3, .propw .cv3{background:linear-gradient(135deg,#e4dfe9,#c4b8d3)}
.propa .cover.cv4, .propw .cv4{background:linear-gradient(135deg,#dee3e9,#bcc6d1)}
.propa .cover.cv5, .propw .cv5{background:linear-gradient(135deg,#ecdad3,#d5b3a7)}
.propa .cover::after{content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 28% 18%, rgba(255,255,255,.34), transparent 62%)}
.cover-badge{position:absolute; top:8px; right:8px; z-index:2;
  display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 9px;
  border-radius:var(--r-pill); background:#fff; box-shadow:0 1px 4px rgba(20,24,50,.22);
  font-family:var(--mono); font-size:10.5px; font-weight:500; letter-spacing:.08em; text-transform:uppercase}
.cover-badge .cbd{width:5px; height:5px; border-radius:50%}
.cover-badge.leased{color:var(--success-solid)}  .cover-badge.leased .cbd{background:var(--success)}
.cover-badge.listed{color:var(--info-solid)}      .cover-badge.listed .cbd{background:var(--info)}
/* Hover-revealed action on the cover (scrim + sliding CTA) */
.propa .cover-cta{position:absolute; inset:0; z-index:1; display:flex; align-items:flex-end; padding:12px;
  opacity:0; background:linear-gradient(to top, rgba(20,24,50,.52), transparent 55%);
  transition:opacity var(--dur-base) var(--ease-standard)}
.propa:hover .cover-cta{opacity:1}
.cta-btn{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 14px; border-radius:var(--r-sm);
  background:#fff; color:var(--pri); font-family:var(--sans); font-size:11px; font-weight:600;
  box-shadow:0 3px 10px rgba(20,24,50,.28); transform:translateY(6px);
  transition:transform var(--dur-base) var(--ease-emphasized)}
.propa:hover .cta-btn, .propw:hover .cta-btn{transform:translateY(0)}
.propa .pbody{padding:12px}
.propa .paddr, .propw .paddr{font-family:var(--sans); font-weight:600; font-size:14px; color:var(--ink-0);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.005em}
.propa .pmeta, .propw .pmeta{font-size:13px; color:var(--ink-3); margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.propa .statline, .propw .statline{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:8px}
.propa .statline .bdba, .propw .statline .bdba{font-size:13px; font-weight:500; color:var(--ink-1); white-space:nowrap}
.propa .statline .sqft, .propw .statline .sqft{font-size:12.5px; color:var(--ink-3); text-align:right;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.propa .rentfoot, .propw .rentfoot{display:flex; align-items:baseline; justify-content:space-between;
  border-top:1px solid var(--rule); margin-top:10px; padding-top:9px}
.propa .rentfoot .rlabel, .propw .rentfoot .rlabel{font-size:11px; font-weight:500; color:var(--ink-3)}
.propa .rentfoot .rfig, .propw .rentfoot .rfig{font-family:var(--figure); font-weight:800; font-size:18px; color:var(--ink-0); letter-spacing:-.01em}

/* --- Wide property card (Concept D — Property Quick View tab) ------------- */
/* Horizontal variant for the full-width tab: image gallery left (cover + thumb
   strip), property info right. Shares the typography + cover gradients above. */
.propw{display:flex; gap:14px; padding:10px; background:var(--bg-panel);
  border:1px solid var(--card-border); border-radius:var(--r-lg); cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard)}
.propw:hover{border-color:var(--pri); box-shadow:var(--card-glow)}
/* Gallery: cover fills, a 3-up thumb strip sits beneath it */
.pw-gallery{flex:0 0 194px; display:flex; flex-direction:column; gap:5px}
.pw-cover{position:relative; flex:1 1 auto; min-height:104px; border-radius:var(--r-md);
  overflow:hidden; background:#e6edf3}
.pw-cover::after{content:""; position:absolute; inset:0;
  background:radial-gradient(120% 80% at 28% 18%, rgba(255,255,255,.34), transparent 62%)}
.pw-thumbs{flex:0 0 auto; display:flex; gap:5px}
.pw-thumb{flex:1 1 0; height:34px; border-radius:5px; background:#e6edf3}
/* Photo-count chip — the gallery affordance */
.pw-count{position:absolute; right:7px; bottom:7px; z-index:2; display:inline-flex; align-items:center; gap:4px;
  padding:3px 7px; border-radius:4px; background:rgba(20,24,50,.58); color:#fff;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.06em}
.pw-count i{font-size:11px}
/* Info side */
.pw-body{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; padding:4px 4px 2px 0}
.pw-top{min-width:0}
.propw .statline{margin-top:10px}
.pw-foot{margin-top:auto; padding-top:10px; border-top:1px solid var(--rule);
  display:flex; align-items:center; justify-content:space-between; gap:12px}
/* the rent group is inline here (the row border lives on .pw-foot instead) */
.propw .rentfoot{border-top:0; margin-top:0; padding-top:0; gap:9px; justify-content:flex-start}
/* CTA rests visible-but-quiet on the wide card, and lifts on hover */
.propw .cta-btn{flex:0 0 auto; background:var(--control-active-softer); color:var(--pri);
  box-shadow:none; transform:none}
.propw:hover .cta-btn{background:#fff; box-shadow:0 3px 10px rgba(20,24,50,.20); transform:none}

/* --- Elisian agent panel (Concept D — PLACEHOLDER) ----------------------- */
/* Holds the right-column slot the Property Quick View vacated. The real agent chat
   interface is designed next; this stand-in is deliberately marked as a placeholder. */
/* A working session, not a chat: no bubbles, no back-and-forth. Your instruction is a
   quiet caption; the agent's reply IS the work — a run of steps ending in finished
   work to approve. The composer is pinned at the base. */
/* flex:1 1 auto with NO min-height override — the panel's automatic minimum size is its
   content, so a long thread grows the panel (and the grid row) instead of bursting out of
   its border. `flex-basis:0` + `min-height:0` were needed when the feed scrolled inside;
   now that it scrolls with the page they'd let the panel shrink below its own content. */
.agent-panel{--ag-pad-x:16px; --ag-pad-b:16px;
  flex:1 1 auto; display:flex; flex-direction:column}
/* .panel.agent-panel, not .agent-panel: `.panel.pad` (0,2,0) sets 18px/20px and would
   otherwise win. The XL composer cancels these exact tokens to run edge-to-edge, so the
   two can't drift apart. */
.panel.agent-panel{padding:18px var(--ag-pad-x) var(--ag-pad-b)}
.agent-head{flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:14px}
/* status: idle by default; goes orchid + pulses while a run is playing */
.ag-status{display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-4); transition:color var(--dur-base) var(--ease-standard)}
.ag-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)}
.agent-panel.working .ag-status{color:var(--aria-deep)}
.agent-panel.working .ag-dot{background:var(--aria); box-shadow:0 0 0 3px rgba(181,104,193,.18);
  animation:ag-blink 1.4s var(--ease-in-out) infinite}
@keyframes ag-blink{0%,100%{opacity:1} 50%{opacity:.25}}

/* The session scrolls with the PAGE — no internal scroller — so the panel reads as one
   continuous document. The composer below is what stays put. */
.ag-feed{flex:0 0 auto; display:flex; flex-direction:column; gap:14px}

/* Your instruction — a caption, deliberately NOT a chat bubble */
.ag-turn{flex:0 0 auto; display:flex; flex-direction:column; gap:5px;
  padding-left:11px; border-left:2px solid var(--card-border)}
.ag-turn-lab{font-size:9.5px; color:var(--ink-4)}
.ag-ask{font-size:13.5px; font-weight:600; color:var(--ink-1); line-height:1.4; letter-spacing:-.005em}

/* The run — one line per step, with a rail connecting them */
.ag-run{flex:0 0 auto; display:flex; flex-direction:column}
.ag-step{position:relative; display:flex; gap:10px; padding:0 0 14px 0}
/* connector rail between marks */
.ag-step::before{content:""; position:absolute; left:8px; top:18px; bottom:0; width:1px;
  background:var(--rule)}
.ag-step:last-child::before{display:none}
.ag-mark{flex:0 0 17px; width:17px; height:17px; margin-top:1px; border-radius:50%;
  display:grid; place-items:center; background:var(--control-active-softer); color:var(--ink-4);
  transition:background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard)}
.ag-mark i{font-size:11px}
.ag-step.done .ag-mark{background:rgba(92,158,51,.16); color:var(--success-solid)}
.ag-step.active .ag-mark{background:rgba(181,104,193,.16)}
.ag-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.ag-text{display:flex; align-items:baseline; gap:7px; font-size:12.5px; font-weight:500;
  color:var(--ink-1); line-height:1.4}
.ag-text i{flex:0 0 auto; font-size:13px; color:var(--ink-3); transform:translateY(1.5px)}
.ag-meta{font-size:11.5px; color:var(--ink-3); line-height:1.4; padding-left:20px}
/* pending steps are dim until the agent reaches them */
.ag-step.pending{opacity:.4}
.ag-step.pending .ag-text{color:var(--ink-3)}
/* the spinner on the step being worked */
.ag-spin{width:11px; height:11px; border-radius:50%; border:1.5px solid rgba(181,104,193,.35);
  border-top-color:var(--aria); animation:ag-spin .7s linear infinite}
@keyframes ag-spin{to{transform:rotate(360deg)}}
/* a step lands rather than blinks in */
.ag-step.enter{animation:ag-step-in .34s var(--ease-emphasized) both}
@keyframes ag-step-in{from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none}}

/* An earlier turn in the thread — separated so a long session stays readable */
.ag-thread-turn{display:flex; flex-direction:column; gap:14px; padding-bottom:16px;
  border-bottom:1px solid var(--rule)}
/* What that turn actually achieved — the agent closing the loop, not asking */
.ag-outcome{display:flex; align-items:flex-start; gap:8px; padding:9px 11px;
  border-radius:var(--r-sm); background:rgba(92,158,51,.07);
  font-size:11.5px; line-height:1.5; color:var(--ink-2)}
.ag-outcome i{flex:0 0 auto; font-size:14px; color:var(--success-solid); transform:translateY(1px)}

/* The payoff — finished work, not a question */
.ag-result{flex:0 0 auto}
.ag-result:empty{display:none}
.ag-result-card{border:1px solid var(--aria-soft); border-radius:var(--r-md); padding:13px 14px 12px;
  background:linear-gradient(rgba(181,104,193,.07), rgba(181,104,193,.03));
  display:flex; flex-direction:column; gap:4px}
.ag-result-card.enter{animation:ag-card-in .42s var(--ease-emphasized) both}
@keyframes ag-card-in{from{opacity:0; transform:translateY(6px) scale(.99)} to{opacity:1; transform:none}}
.ag-rc-head{display:flex; align-items:center; gap:8px; margin-bottom:2px}
.ag-rc-head .el-glyph{width:20px; height:20px; border-radius:6px; flex:0 0 auto}
.ag-rc-head .el-glyph span{font-size:14px}
.ag-rc-lab{font-size:9.5px; color:var(--aria-deep); font-weight:600}
.ag-rc-title{font-size:13.5px; font-weight:600; color:var(--ink-0); letter-spacing:-.005em; line-height:1.35}
.ag-rc-sub{font-size:11.5px; color:var(--ink-2); line-height:1.45}
.ag-rc-acts{display:flex; align-items:center; gap:6px; margin-top:9px}
.ag-btn{flex:0 0 auto; height:28px; padding:0 11px; border-radius:var(--r-sm); cursor:pointer;
  font-family:var(--sans); font-size:11.5px; font-weight:600; border:1px solid transparent;
  transition:background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard)}
.ag-btn.ghost{background:transparent; border-color:var(--card-border); color:var(--ink-2)}
.ag-btn.ghost:hover{background:#fff; border-color:var(--card-border-hover)}
.ag-btn.go{margin-left:auto; background:var(--aria); color:#fff}
.ag-btn.go:hover{background:var(--aria-deep)}

/* Composer — sticky to the bottom of the PAGE rather than pinned to the panel's base,
   so it stays reachable while the session scrolls past it. margin-top:auto keeps its
   resting place at the panel's base, so it settles there once you've scrolled to the end.
   Passive state is clean: no border at rest (the 1px transparent holds the space so the
   XL border can't shift the layout). Focus still shows the orchid edge. */
.ag-composer{flex:0 0 auto; margin-top:auto; position:sticky; bottom:0; z-index:2;
  padding:10px; background:#fff;
  border:1px solid transparent; border-radius:var(--r-md);
  transition:border-color var(--dur-base) var(--ease-standard),
     box-shadow var(--dur-base) var(--ease-standard)}
.ag-composer:focus-within{border-color:var(--aria); box-shadow:0 0 0 3px rgba(181,104,193,.10)}

/* XL — a full-width docked band at the panel's foot. The negative margins cancel the
   panel's 16px padding so it runs edge to edge inside the border; the padding puts its
   contents back on the panel's content grid. Square, and bordered only along the TOP:
   its sides and base would otherwise double up with the panel's own border. */
.ag-composer.xl{margin:auto calc(var(--ag-pad-x) * -1) calc(var(--ag-pad-b) * -1);
  padding:10px var(--ag-pad-x) 12px;
  border:0; border-top:1px solid var(--card-border); border-radius:0;
  box-shadow:inset 0 1px 4px rgba(20,24,50,.07)}
.ag-composer.xl:focus-within{border-top-color:var(--aria);
  box-shadow:inset 0 1px 4px rgba(20,24,50,.05)}

/* Header — XL only; gives the expanded composer a top edge to sit under. */
.ag-comp-head{display:none}
.ag-composer.xl .ag-comp-head{display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:0 0 8px; margin-bottom:8px; border-bottom:1px solid var(--rule)}
.ag-ch-lab{font-size:9.5px; color:var(--ink-4); font-weight:600}
.ag-ch-hint{display:inline-flex; align-items:center; gap:5px; font-size:10px; color:var(--ink-4);
  white-space:nowrap}
.ag-ch-hint kbd{font-family:var(--mono); font-size:9.5px; color:var(--ink-3); line-height:1;
  border:1px solid var(--card-border); border-radius:4px; padding:2px 4px; background:var(--bg-board)}
.ag-ch-sep{margin:0 3px; color:var(--ink-4)}
/* One line at rest. --ag-line is the single source for the line box and --ag-xl-lines
   sets how tall XL is, so the two modes stay in step — height is border-box, hence the
   +--ag-pad (the input's own vertical padding) in both sums. */
/* font-size bumped 12.5 → 13.5 for both modes; --ag-line rises with it so "five lines"
   still measures five actual lines of the larger type. */
.ag-input{--ag-line:21px; --ag-xl-lines:5; --ag-pad:14px;
  width:100%; display:block; border:0; outline:none; background:transparent;
  padding:4px 4px 10px; resize:none; overflow-y:hidden;
  font:inherit; font-family:var(--sans); font-size:13.5px; line-height:var(--ag-line);
  color:var(--ink-1); height:calc(var(--ag-line) + var(--ag-pad));
  transition:height var(--dur-base) var(--ease-emphasized)}
.ag-input::placeholder{color:var(--ink-4)}
/* XL — a FIXED box of --ag-xl-lines (not fluid auto-grow); it scrolls beyond that. */
.ag-composer.xl .ag-input{height:calc(var(--ag-line) * var(--ag-xl-lines) + var(--ag-pad));
  overflow-y:auto}
.ag-composer.xl .ag-input::-webkit-scrollbar{width:6px}
.ag-composer.xl .ag-input::-webkit-scrollbar-thumb{background:var(--rule); border-radius:3px}
.ag-ctrl{display:flex; align-items:center; justify-content:space-between; gap:8px}
.ag-side{display:inline-flex; align-items:center; gap:4px}
.ag-ic{width:26px; height:26px; border:0; border-radius:var(--r-sm); background:transparent;
  display:grid; place-items:center; cursor:pointer; color:var(--ink-3);
  transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard)}
.ag-ic i{font-size:15px}
.ag-ic:hover{background:var(--control-active-softer); color:var(--ink-1)}
.ag-model{font-family:var(--mono); font-size:10px; letter-spacing:.06em; color:var(--ink-3);
  padding:0 6px; cursor:pointer}
.ag-ic.ag-send{background:var(--pri); color:#fff}
.ag-ic.ag-send:hover{background:var(--pri-top); color:#fff}
@media (prefers-reduced-motion:reduce){
  .ag-spin, .agent-panel.working .ag-dot, .ag-step.enter, .ag-result-card.enter{animation:none}
}

/* --- Infinite-scroll sentinel -------------------------------------------- */
.scroll-sentinel{display:flex; align-items:center; justify-content:center; padding:22px 0 8px; min-height:20px}
.scroll-status{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-4)}

/* --- Screen header (per-screen) ------------------------------------------ */
.screen-head{display:flex; align-items:flex-start; justify-content:space-between}
.screen-head .date{display:inline-flex; align-items:center; gap:8px; font-size:11px; color:var(--pri); letter-spacing:.22em; margin-bottom:6px}
.screen-head .date .date-cal{display:inline-flex; align-items:center; color:var(--ink-4); cursor:pointer;
  transition:color var(--dur-fast) var(--ease-standard)}
.screen-head .date .date-cal svg{width:13px; height:13px}
.screen-head .date .date-cal:hover{color:var(--pri)}
.screen-head .h-title{font-family:var(--display); font-size:var(--fs-hero); font-weight:600; color:var(--ink-0); line-height:1.05; letter-spacing:-.015em}
/* Dashboard greeting sits a touch smaller than screen heroes */
.header-greet .h-title{font-size:27px}
.screen-head .h-sub{font-size:12px; color:var(--ink-3); margin-top:8px}
.head-right{display:flex; align-items:center; gap:14px}

/* --- Gallery ------------------------------------------------------------- */
.gallery-sec{margin-bottom:22px}
.gallery-sec > .glab{font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--aria-deep); margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--rule)}
.gallery-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:12px}

/* ===========================================================================
   Header left cluster — the Ask Elisian trigger (from concept A). It used to sit at
   the bottom of the nav rail; concept D has no rail, so it heads up the header at the
   page gutter. Clicking it opens the full AI console overlay (below).
   =========================================================================== */
/* Ask Elisian trigger — 197px (32px wider than the 165px it was in the rail).
   At REST it's quiet: no border, no ⌘E hint. Hover brings both in, plus the orchid
   glow. The border stays at 1px transparent (not 0) and the hint fades via opacity so
   neither the button's size nor its label shift when it activates. */
.hdr-dock{position:relative; flex:0 0 auto}
.dock-trigger{
  display:flex; align-items:center; gap:9px; width:197px; padding:9px 10px;
  background:#fff; border:1px solid transparent; border-radius:12px; cursor:pointer;
  box-shadow:0 1px 2px rgba(20,24,50,.04); text-align:left;
  transition:border-color var(--dur-base) var(--ease-standard),
     box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.dock-trigger:hover, .dock-trigger:focus-visible{border-color:var(--aria);
  box-shadow:0 10px 22px -14px rgba(142,76,154,.45), 0 0 0 3px rgba(181,104,193,.08)}
.dock-trigger:active{transform:translateY(1px)}
.dt-text{flex:1; min-width:0; font-family:var(--sans); font-size:13px; color:var(--ink-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dt-kbd{flex:0 0 auto; font-family:var(--mono); font-size:11px; color:var(--ink-2);
  border:1px solid var(--card-border); border-radius:5px; padding:2px 6px;
  opacity:0; transition:opacity var(--dur-base) var(--ease-standard)}
.dock-trigger:hover .dt-kbd, .dock-trigger:focus-visible .dt-kbd{opacity:1}

/* Elisian glyph — moved down from the old rail top. Rests as the calm navy-grey
   logo mark; the trigger's hover "activates" it (orchid + sheen). */
.el-glyph.dock-glyph{width:26px; height:26px; border-radius:var(--r-md); flex:0 0 auto;
  background:linear-gradient(155deg, #49547e, #3d4871); border-color:transparent;
  box-shadow:0 2px 8px rgba(29,35,105,0.15)}
.el-glyph.dock-glyph span{font-size:19px; color:#fff; transform:translateY(-1.5px)}
.dock-trigger:hover .dock-glyph{
  background:linear-gradient(150deg, var(--pri-top) 0%, var(--pri) 62%, var(--aria-deep) 100%);
  box-shadow:0 6px 18px var(--aria-glow); transform:scale(1.06)}
.dock-trigger:hover .dock-glyph::before{animation:glyph-sheen .75s var(--ease-standard)}

/* ===========================================================================
   AI console overlay (Concept A) — the front-and-center Elisian console the
   trigger opens. Covers the content region (nav stays visible).
   =========================================================================== */
.ai-console{position:absolute; inset:0; z-index:24}
.ai-console[hidden]{display:none}
/* Fully opaque scrim — the console completely replaces the body content. */
.ac-scrim{position:absolute; inset:0; background:#EDF1F7;
  opacity:0; transition:opacity var(--dur-base) var(--ease-standard)}
.ai-console.open .ac-scrim{opacity:1}
/* Close — anchored to the panel's top-right (in the user's peripheral view, not the
   screen corner). A thin, large X; a wide invisible ::before extends the detection
   radius; hover blooms an orchid glow. Fades in with the panel. */
.ac-x{position:absolute; top:-2px; right:-2px; z-index:3; width:46px; height:46px; border-radius:50%;
  border:0; background:transparent; color:var(--ink-3); cursor:pointer; display:grid; place-items:center;
  transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard),
     box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-emphasized)}
.ac-x svg{width:27px; height:27px}
.ac-x::before{content:""; position:absolute; inset:-16px; border-radius:50%}   /* wide detection radius */
.ac-x:hover{background:#fff; color:var(--ink-0); transform:scale(1.06);
  box-shadow:0 0 0 7px rgba(181,104,193,.14), 0 10px 40px 4px rgba(181,104,193,.5)}
.ac-x:active{transform:scale(.98)}

.ac-panel{position:absolute; left:50%; top:47%; transform:translate(-50%,-50%) scale(.97);
  width:min(740px, 86%); display:flex; flex-direction:column; align-items:center;
  opacity:0; transition:opacity var(--dur-base) var(--ease-standard),
     transform var(--dur-slow) var(--ease-emphasized)}
.ai-console.open .ac-panel{opacity:1; transform:translate(-50%,-50%) scale(1)}

/* Glyph in a soft white disc — larger "e", in the brand wordmark color; flat (no shadow) */
.ac-glyph{width:60px; height:60px; border-radius:50%; background:#fff; display:grid; place-items:center;
  box-shadow:0 0 0 1px var(--card-border)}
.ac-glyph span{font-family:var(--brand); font-style:italic; font-weight:700; font-size:42px;
  color:var(--pri); line-height:1; transform:translateY(-3px)}
.ac-head{margin-top:20px; font-family:var(--display); font-size:26px; font-weight:600;
  letter-spacing:-.02em; color:var(--ink-0)}

/* The big composer. overflow:visible so the "+" menu + app tooltips can escape it
   (the apps strip rounds its own bottom corners to keep the box looking clipped). */
.ac-box{width:100%; margin-top:24px; background:#fff; border:1px solid var(--card-border);
  border-radius:16px; overflow:visible; box-shadow:0 14px 40px -22px rgba(20,24,50,.4);
  transition:border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard)}
.ac-box:focus-within{border-color:var(--aria);
  box-shadow:0 18px 44px -20px rgba(142,76,154,.45), 0 0 0 3px rgba(181,104,193,.08)}
.ac-input{width:100%; border:0; outline:none; background:transparent; padding:18px 18px 8px;
  font-family:var(--sans); font-size:15px; color:var(--ink-1)}
.ac-input::placeholder{color:var(--ink-3)}
.ac-ctrl{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 12px 12px}
.ac-side{display:flex; align-items:center; gap:4px}
.ac-ic{width:32px; height:32px; border-radius:9px; display:grid; place-items:center; border:0;
  background:transparent; color:var(--ink-3); cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard),
     transform var(--dur-fast) var(--ease-standard)}
.ac-ic i{font-size:18px; line-height:1}
.ac-ic:hover{background:var(--pri-tint); color:var(--pri)}
.ac-model{font-family:var(--mono); font-size:11px; letter-spacing:.02em; color:var(--ink-3);
  padding:6px 9px; border-radius:7px; cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard)}
.ac-model:hover{background:var(--pri-tint); color:var(--pri)}
.ac-send{background:linear-gradient(150deg, var(--pri-top), var(--pri)); color:#fff;
  box-shadow:0 2px 8px rgba(29,35,105,.22)}
.ac-send i{font-size:16px; font-weight:700}
.ac-send:hover{background:linear-gradient(150deg, var(--pri-top), var(--aria-deep)); color:#fff;
  transform:translateY(-1px)}

/* The literal "Get better answers from your apps" strip — attached under the input */
.ac-apps{display:flex; align-items:center; gap:12px; padding:11px 14px;
  border-top:1px solid var(--rule); background:var(--bg-soft); border-radius:0 0 16px 16px}
.ac-apps.hide{display:none}
.ac-apps-label{flex:0 0 auto; font-family:var(--sans); font-size:12.5px; color:var(--ink-3)}
.ac-apps-row{display:flex; align-items:center; gap:9px; flex:1; overflow:visible}
.ac-app{position:relative; flex:0 0 auto; border:0; background:transparent; cursor:pointer; padding:1px;
  display:grid; place-items:center; transition:transform var(--dur-fast) var(--ease-emphasized)}
.ac-app i{font-size:19px; color:var(--tile, var(--ink-2))}
.ac-app:hover{transform:translateY(-2px) scale(1.08)}
/* "Add a connected app" — dashed tile at the end of the row */
.ac-app-add{width:26px; height:26px; padding:0; border:1px dashed var(--card-border-hover);
  border-radius:8px; margin-left:2px}
.ac-app-add i{font-size:15px; color:var(--ink-3)}
.ac-app-add:hover{transform:translateY(-2px); border-color:var(--aria); background:var(--aria-sky)}
.ac-app-add:hover i{color:var(--aria-deep)}
/* Per-icon tooltip — names the integration on hover */
.ac-tip{position:absolute; bottom:calc(100% + 9px); left:50%; z-index:40; white-space:nowrap;
  background:var(--ink-0); color:#fff; font-family:var(--sans); font-size:11px; font-weight:500;
  padding:5px 8px; border-radius:6px; box-shadow:0 6px 16px -6px rgba(20,24,50,.5);
  opacity:0; visibility:hidden; transform:translate(-50%, 4px);
  transition:opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard),
     visibility var(--dur-fast)}
.ac-tip::after{content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--ink-0)}
.ac-app:hover .ac-tip{opacity:1; visibility:visible; transform:translate(-50%, 0)}
.ac-apps-x{flex:0 0 auto; margin-left:auto; width:22px; height:22px; border:0; background:transparent;
  color:var(--ink-3); cursor:pointer; border-radius:6px; font-size:16px; line-height:1;
  display:grid; place-items:center}
.ac-apps-x:hover{background:var(--rule); color:var(--ink-1)}

/* Quick actions */
.ac-quick{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:22px}
.ac-quick-btn{position:relative; display:inline-flex; align-items:center; gap:8px; padding:9px 15px;
  border:1px solid var(--card-border); border-radius:10px; background:#fff; cursor:pointer;
  font-family:var(--sans); font-size:13px; font-weight:500; color:var(--ink-2);
  transition:border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard),
     box-shadow var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard)}
.ac-quick-btn i{font-size:16px; color:var(--ink-3); transition:color var(--dur-fast) var(--ease-standard)}
.ac-quick-btn:hover{border-color:var(--aria); color:var(--ink-0);
  box-shadow:0 8px 18px -12px rgba(142,76,154,.5); transform:translateY(-1px)}
.ac-quick-btn:hover i{color:var(--aria-deep)}

/* "Voice of Elisian" speech bubble — larger, white, drop shadow, branded hairline.
   Interactive: hovering into it keeps it open (::before bridges the gap), and clicking
   anywhere but a live link triggers the same action as the button. */
.ac-bubble{position:absolute; bottom:calc(100% + 13px); left:50%; z-index:45; width:276px;
  background:#fff; border:1px solid var(--aria-soft); border-radius:14px; padding:13px 15px 14px;
  text-align:left; box-shadow:0 22px 48px -18px rgba(20,24,50,.42), 0 4px 14px rgba(20,24,50,.08);
  opacity:0; visibility:hidden; transform:translate(-50%, 8px); pointer-events:auto; cursor:pointer;
  transition:opacity var(--dur-base) var(--ease-standard),
     transform var(--dur-slow) var(--ease-emphasized), visibility var(--dur-base)}
/* invisible bridge across the gap so hovering from the button into the bubble holds it open */
.ac-bubble::before{content:""; position:absolute; top:100%; left:0; right:0; height:16px}
/* bubble tail (branded hairline on the two facing edges) */
.ac-bubble::after{content:""; position:absolute; top:100%; left:50%; width:15px; height:15px;
  margin-top:-8px; background:#fff; border-right:1px solid var(--aria-soft); border-bottom:1px solid var(--aria-soft);
  transform:translateX(-50%) rotate(45deg)}
/* Live-link reference inside the bubble — its own jump-off point, with a hover reaction */
.ac-link{color:var(--aria-deep); font-weight:600; text-decoration:underline; text-underline-offset:2px;
  text-decoration-color:rgba(142,76,154,.4); border-radius:3px; padding:0 1px; cursor:pointer;
  transition:color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard),
     text-decoration-color var(--dur-fast) var(--ease-standard)}
.ac-link:hover{color:var(--pri); background:var(--aria-soft); text-decoration-color:var(--aria)}
.ab-head{display:flex; align-items:center; gap:7px; margin-bottom:8px}
.ab-glyph{width:19px; height:19px; border-radius:5px; display:grid; place-items:center; flex:0 0 auto;
  background:linear-gradient(150deg, var(--pri-top), var(--aria-deep));
  font-family:var(--brand); font-style:italic; font-weight:700; font-size:14px; color:#fff; line-height:1}
.ab-glyph{padding-bottom:2px}
.ab-name{font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--aria-deep)}
.ab-text{display:block; font-family:var(--sans); font-size:12.5px; line-height:1.5; color:var(--ink-2)}
.ac-quick-btn:hover .ac-bubble{opacity:1; visibility:visible; transform:translate(-50%, 0)}

/* Shortcut tip callout under the console — larger, well clear of the quick actions */
.ac-tip-callout{display:inline-flex; align-items:center; gap:9px; margin-top:60px;
  font-family:var(--sans); font-size:13.5px; color:var(--ink-3)}
.ac-tip-callout i{font-size:17px; color:var(--ink-4)}
.ac-tip-callout kbd{font-family:var(--mono); font-size:12.5px; color:var(--ink-2);
  background:#fff; border:1px solid var(--card-border); border-radius:5px; padding:3px 7px;
  box-shadow:0 1px 0 var(--rule)}

/* --- Embedded "+" menu (reused for the console) -------------------------- */
.dc-anchor{position:relative; display:inline-flex}
.dock-pop{
  position:absolute; bottom:calc(100% + 9px); left:0; z-index:30;
  background:var(--bg-panel); border:1px solid var(--card-border); border-radius:12px;
  box-shadow:0 20px 44px -18px rgba(20,24,50,.5), 0 3px 10px rgba(20,24,50,.08);
  padding:6px; opacity:0; visibility:hidden; transform:translateY(6px) scale(.98);
  transform-origin:bottom left; pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-standard),
     transform var(--dur-base) var(--ease-emphasized), visibility var(--dur-fast);
}
.dock-pop::after{content:""; position:absolute; top:100%; left:0; right:0; height:14px}
/* Downward variant (used in the console, where the + sits mid-panel) */
.dock-pop.pop-down{bottom:auto; top:calc(100% + 9px); transform-origin:top left;
  transform:translateY(-6px) scale(.98)}
.dock-pop.pop-down::after{top:auto; bottom:100%}
.dc-anchor:hover .dock-pop, .dock-pop:hover{
  opacity:1; visibility:visible; transform:none; pointer-events:auto}

.dock-new{min-width:190px}
.dn-item{display:flex; align-items:center; gap:11px; width:100%; padding:8px 10px;
  border:0; border-radius:8px; background:transparent; cursor:pointer; text-align:left;
  font-family:var(--sans); font-size:13px; color:var(--ink-1);
  transition:background var(--dur-fast) var(--ease-standard)}
.dn-item i{font-size:17px; color:var(--ink-3); flex:0 0 auto}
.dn-item:hover{background:var(--pri-tint)}
.dn-item:hover i{color:var(--pri)}

/* ===========================================================================

/* ===========================================================================
   Onboarding progress path (Concept A) — top of the console. Completed steps are
   green (positive); the current step (4) is orchid; locked steps grey. In this
   mode the console logo is hidden to make room.
   =========================================================================== */
.ac-onboard:empty{display:none}
.ac-onboard{width:100%; margin-bottom:8px}
.ac-panel.onboarding{top:39%}                      /* lift the whole group higher on screen */
.ac-panel.onboarding .ac-glyph{display:none}       /* hide the logo to make room */
.ac-panel.onboarding .ac-head{margin-top:16px}

.op-wrap{width:100%}
/* Onboarding headline / tagline above the path */
.op-intro{text-align:center; margin-bottom:16px}
.op-eyebrow{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--aria-deep); margin-bottom:7px}
.op-eyebrow i{font-size:13px}
.op-headline{font-family:var(--display); font-size:20px; font-weight:600; letter-spacing:-.015em; color:var(--ink-0)}
.op-tagline{font-size:12.5px; color:var(--ink-3); margin-top:3px}
.op-steps{display:grid; grid-template-columns:repeat(5,1fr)}
.op-node{position:relative; text-align:center}
.op-node:not(:last-child)::after{content:""; position:absolute; top:13px;
  left:calc(50% + 17px); right:calc(-50% + 17px); height:2px; background:var(--card-border)}
.op-node.done::after{background:var(--success)}
.op-dot{width:28px; height:28px; border-radius:50%; margin:0 auto 7px; display:grid; place-items:center;
  font-family:var(--sans); font-size:13px; font-weight:600}
.op-node.done .op-dot{background:var(--success); color:#fff}
.op-node.current .op-dot{background:rgba(181,104,193,.14); border:2px solid var(--aria); color:var(--aria-deep)}
.op-node.locked .op-dot{background:var(--bg-soft); border:1px solid var(--card-border); color:var(--ink-4)}
.op-dot i{font-size:15px}
.op-lbl{font-size:11px; color:var(--ink-4); white-space:nowrap}
.op-node.done .op-lbl{color:var(--ink-3)}
.op-node.current .op-lbl{color:var(--aria-deep); font-weight:500}
.op-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:13px;
  padding-top:12px; border-top:1px solid var(--rule)}
.op-count{font-size:13px; color:var(--ink-3)}
.op-count b{color:var(--ink-1); font-weight:600}
.op-alldone{display:inline-flex; align-items:center; gap:7px; color:var(--success-solid); font-weight:500}
.op-alldone i{font-size:16px; color:var(--success)}
.op-cta{display:inline-flex; align-items:center; gap:6px; border:0; border-radius:8px; cursor:pointer;
  background:var(--aria); color:#fff; font-family:var(--sans); font-size:13px; font-weight:600; padding:8px 14px;
  box-shadow:0 2px 8px var(--aria-glow);
  transition:background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard)}
.op-cta:hover{background:var(--aria-deep); transform:translateY(-1px)}
.op-cta i{font-size:15px}