/* ===========================================================================
   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; side margins only (the frame runs full-height, edge to edge
   top-to-bottom, so no vertical padding). */
.stage{display:flex; align-items:flex-start; justify-content:center; min-height:100vh; padding:0 16px}

/* --- Board (artboard: full viewport height, top to bottom) --------------- */
.dc-card{
  width:1320px; position:relative; flex:0 0 auto;
  height:100vh;                         /* fallback */
  height:100dvh;
  background:var(--bg-panel);
  border-radius:0;                      /* flush top and 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:106px; right:34px; width:300px;
  display:flex; flex-direction:column; gap:8px; z-index:var(--z-toast)}
.toasts:empty{display:none}

/* --- Shell: content only (no rail) --------------------------------------- */
.shell{position:relative; z-index:var(--z-content); display:flex; height:100%}
/* Page gutter — the single source for the left/right margins. The header and every
   screen use it, so the header clusters line up with the body columns beneath them. */
:root{ --page-x:40px; }

/* Concept D has NO nav rail — it's a single-page command center. The "+ New" and
   "Ask Elisian" controls it held now live in the header, and the wordmark + Elisian
   status dot were dropped. The off-stage overlays and the AI console therefore span
   the full board width (no --rail-w offset any more).
   NOTE: body.el-active is still toggled by PB.setElisianActive / flashElisian, but has
   no visual surface now that the status dot is gone — it's kept as a hook. */

/* 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). */
/* scrollbar-gutter:both-edges reserves the scrollbar's width on BOTH sides, so the
   page gutters stay symmetric and the centred date sits on the true page centre
   (otherwise the right-hand scrollbar pulls everything 4px left). */
.content{flex:1; min-width:0; height:100%; overflow-y:auto; display:flex; flex-direction:column;
  scrollbar-gutter:stable both-edges}
.content::-webkit-scrollbar{width:8px}
.content::-webkit-scrollbar-thumb{background:var(--rule); border-radius:4px}

/* --- Global header ------------------------------------------------------- */
/* Not sticky — it scrolls with the page. Three zones: the "+ New" + Ask Elisian
   cluster on the left, the date/time centred, the account cluster on the right.
   Shares --page-x with the body so all three line up with the columns below. */
.app-header{
  position:static; background:transparent;
  padding:14px var(--page-x) 12px;
}
/* Grid (not flex) so the date is centred on the PAGE, not on the leftover space
   between two unequal side clusters. */
.header-slim{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px}
.header-left{display:flex; align-items:center; gap:10px; justify-self:start}
.header-date{justify-self:center}
.header-slim .head-right{justify-self:end}
.header-slim .date{display:inline-flex; align-items:center; gap:9px; white-space:nowrap}
.header-slim .date-cal{display:inline-flex; align-items:center; color:var(--ink-4); cursor:pointer;
  transition:color var(--hover-slow) var(--ease-in-out)}
/* Bumped 13px → 17px, and it goes indigo on hover/focus. */
.header-slim .date-cal svg{width:17px; height:17px}
.header-slim .date-cal:hover, .header-slim .date-cal:focus-visible{color:var(--pri)}

/* --- Header right cluster (concept B) ------------------------------------- */
/* Notification bell + avatar, each hanging its own dropdown: the bell opens the Inbox,
   the avatar opens the account menu. The .bell-wrap / .acct-wrap elements exist purely
   as the positioning context for those panels. Only one opens at a time (see app.js). */
.head-right{display:flex; align-items:center; gap:10px}
.acct-wrap, .bell-wrap{position:relative; flex:0 0 auto}

/* Inbox dropdown — hangs off the bell, right-anchored. Wide enough for the notification
   rows (label + time, title, sub); scrolls internally once the list gets long. */
.inbox-menu{position:absolute; right:0; left:auto; top:calc(100% + 8px); z-index:40; width:404px;
  background:var(--bg-panel); border:1px solid var(--card-border); border-radius:var(--r-md);
  box-shadow:0 14px 34px -12px rgba(20,24,50,.30), 0 3px 10px rgba(20,24,50,.08);
  padding:12px; display:flex; flex-direction:column; gap:9px;
  opacity:0; transform:translateY(-6px) scale(.99); transform-origin:top right;
  pointer-events:none; visibility:hidden;
  transition:opacity .16s var(--ease-standard), transform .18s var(--ease-emphasized)}
.inbox-menu.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto; visibility:visible}
.im-head{flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding:2px 4px 0}
.im-head b{color:var(--ink-3); font-weight:600}
.im-list{flex:1 1 auto; min-height:0; max-height:460px; overflow-y:auto; overflow-x:hidden;
  scrollbar-gutter:stable; display:flex; flex-direction:column; gap:8px; padding:0 2px 2px}
.im-list::-webkit-scrollbar{width:8px}
.im-list::-webkit-scrollbar-thumb{background:var(--rule); border-radius:4px}
.im-list::-webkit-scrollbar-track{background:transparent}
/* Tighten the shared .inbox-item for the narrower dropdown (the Inbox screen keeps
   its roomier padding). */
.inbox-menu .inbox-item{padding:12px 13px 12px 16px; gap:11px}
.inbox-menu .ib-title{font-size:13px}
.inbox-menu .ib-sub{font-size:12px}
.im-empty{padding:28px 18px; text-align:center; color:var(--ink-3); font-size:12.5px}

/* Account dropdown — opens beneath the avatar, anchored to its right edge. The avatar
   is only 38px, so the menu sets its own width rather than matching the control. */
.acct-menu{position:absolute; right:0; left:auto; top:calc(100% + 7px); z-index:40; min-width:236px;
  background:var(--bg-panel); border:1px solid var(--card-border); border-radius:var(--r-md);
  box-shadow:0 14px 34px -12px rgba(20,24,50,.30), 0 3px 10px rgba(20,24,50,.08);
  padding:6px; display:flex; flex-direction:column; gap:2px;
  opacity:0; transform:translateY(-6px) scale(.99); transform-origin:top right;
  pointer-events:none; visibility:hidden;
  transition:opacity .16s var(--ease-standard), transform .18s var(--ease-emphasized)}
.acct-menu.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto; visibility:visible}
.am-item{display:flex; align-items:center; gap:11px; width:100%; padding:8px 10px; border:0;
  background:transparent; border-radius:var(--r-sm); cursor:pointer; font:inherit; font-size:13px;
  font-weight:500; color:var(--ink-1); text-align:left;
  transition:background var(--dur-fast) var(--ease-standard)}
.am-item:hover{background:var(--control-active-softer)}
.am-item svg{width:17px; height:17px; flex:0 0 17px; color:var(--ink-3)}
.am-item.danger{color:var(--danger-solid)}
.am-item.danger svg{color:var(--danger-solid)}
.am-sep{height:1px; background:var(--rule); margin:5px 2px}
/* Portfolio switcher lives at the base of the dropdown — green dot = live portfolio */
.acct-menu .pf-switch{margin-top:1px}
.pf-switch{width:100%; display:flex; align-items:center; gap:9px; padding:7px 8px; border:0; cursor:pointer;
  background:transparent; border-radius:var(--r-sm); text-align:left; font:inherit;
  transition:background var(--dur-fast) var(--ease-standard)}
.pf-switch:hover{background:var(--control-active-softer)}
.pf-dot{flex:0 0 auto; width:9px; height:9px; margin:0 5px; border-radius:50%; background:var(--success);
  box-shadow:0 0 0 4px rgba(92,158,51,.15)}
.pf-meta{display:flex; flex-direction:column; min-width:0; line-height:1.25}
.pf-name{font-size:13px; font-weight:600; color:var(--ink-0); letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pf-sub{font-size:11px; color:var(--ink-3)}
.pf-caret{margin-left:auto; flex:0 0 auto; color:var(--ink-4); display:inline-flex}
.pf-caret svg{width:16px; height:16px}

/* --- Dashboard layout: tall lower panels; the page scrolls to reach them --- */
/* With the nav rail gone the body fills the whole page, so the columns pick up all
   that width. Column 1 (morning brief + Command Center) takes ALL the responsive
   growth; column 2 is capped at a fixed max width so the pulse + agent panel don't
   stretch. --page-x is the page gutter, shared with the header. */
/* align-items:stretch → the shorter (right) column grows to the taller (left) one,
   so the agent panel fills down to bottom-align with the Command Center. */
.dash-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,440px); gap:18px;
  align-items:stretch;
  --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}

/* --- Command Center: three-tab panel ------------------------------------- */
/* The dashboard's left panel houses Command center / Overnight actions / Property
   quick view. Fixed height so switching tabs never reflows the page; each tab body
   fills it and scrolls internally, keeping its own controls + state. */
/* The tabs sit ABOVE the panel (not inside it), so the panel keeps a complete border
   and its own hover state, and the tabs read as its heading. .cc-wrap holds the pair
   together with no gap so the active tab's underline meets the panel's top edge. */
.cc-wrap{flex:0 0 auto; display:flex; flex-direction:column; min-height:0}
.cc-panel{flex:0 0 auto; height:1040px; min-height:0; display:flex; flex-direction:column;
  padding:16px 20px; overflow:hidden}
.dash-tabs{flex:0 0 auto; display:flex; align-items:stretch; gap:2px; padding:0 4px}
.dash-tab{position:relative; border:0; background:transparent; cursor:pointer; font:inherit;
  font-size:12.5px; font-weight:500; letter-spacing:.1em; color:var(--ink-3);
  padding:4px 13px 11px; white-space:nowrap;
  border-radius:var(--r-sm) var(--r-sm) 0 0;
  transition:color var(--dur-fast) var(--ease-standard),
     background var(--dur-fast) var(--ease-standard)}
/* the count sits lighter than its label so the label leads */
.dash-tab b{font-weight:400; color:var(--ink-4); transition:color var(--dur-fast) var(--ease-standard)}
.dash-tab:hover{color:var(--ink-1)}
.dash-tab:hover b{color:var(--ink-3)}
/* Active tab: navy + heavier than its siblings (plus the underline below) */
.dash-tab.active{color:var(--pri); font-weight:700}
.dash-tab.active b{color:var(--aria-deep); font-weight:400}
/* active underline — sits on the panel's top edge, tying the tab to its panel */
.dash-tab::after{content:""; position:absolute; left:10px; right:10px; bottom:0; height:2px;
  border-radius:2px 2px 0 0; background:var(--pri); opacity:0; transform:scaleX(.5);
  transition:opacity var(--dur-fast) var(--ease-standard), transform var(--dur-base) var(--ease-emphasized)}
.dash-tab.active::after{opacity:1; transform:none}
/* Tab bodies — only the active one is laid out */
.cc-body{display:none; flex:1 1 auto; min-height:0; flex-direction:column; padding-top:14px}
.cc-body.active{display:flex}

/* --- Orchid reveal + cooldown -------------------------------------------- */
/* Played when the Morning Brief hands you off to the Overnight actions tab, so the
   panel announces what just changed. An orchid wash + inset ring flare in, then cool
   back to the resting panel over ~2s. The class is stripped by PB.flashDashTab once
   the cooldown finishes (see app.js). */
.cc-body.cc-reveal{animation:cc-reveal-wash 2.2s var(--ease-standard) both}
@keyframes cc-reveal-wash{
  0%   { background:rgba(181,104,193,.20); box-shadow:inset 0 0 0 1px rgba(181,104,193,.55) }
  18%  { background:rgba(181,104,193,.16); box-shadow:inset 0 0 0 1px rgba(181,104,193,.45) }
  100% { background:rgba(181,104,193,0);   box-shadow:inset 0 0 0 1px rgba(181,104,193,0) }
}
/* the log rows themselves warm up, then cool */
.cc-body.cc-reveal .log-item{animation:cc-reveal-row 2.2s var(--ease-standard) both}
@keyframes cc-reveal-row{
  0%   { border-color:rgba(181,104,193,.40) }
  18%  { border-color:rgba(181,104,193,.30) }
  100% { border-color:transparent }
}
@media (prefers-reduced-motion:reduce){
  .cc-body.cc-reveal, .cc-body.cc-reveal .log-item{animation:none}
}
/* Tab 1 — decisions: sort pills stay right, the list now scrolls inside the panel */
.cc-body[data-tab="decisions"] .dec-head{justify-content:flex-end; margin-bottom:12px}
.cc-body[data-tab="decisions"] .dec-list{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  scrollbar-gutter:stable; padding-right:2px}
.cc-body[data-tab="decisions"] .dec-list::-webkit-scrollbar{width:8px}
.cc-body[data-tab="decisions"] .dec-list::-webkit-scrollbar-thumb{background:var(--rule); border-radius:4px}
.cc-body[data-tab="decisions"] .dec-list::-webkit-scrollbar-track{background:transparent}
/* Tab 2 — overnight actions: View activity log sits left, Customize right. Both are
   quiet affordances that only surface on panel hover (see .cc-panel:hover rules). */
.cc-body[data-tab="overnight"] .log-head{justify-content:space-between; margin-bottom:10px}
.cc-body[data-tab="overnight"] .log-viewall{margin-right:auto}

/* 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}

/* --- Dashboard: Property quick view (Command Center tab 3) ---------------- */
/* Lives inside .cc-body now, so it no longer wraps itself in a panel and its title +
   count live in the tab label. Head holds the search + sort; footer the load-more. */
.qv-head{flex:0 0 auto; display:flex; flex-direction:column; gap:11px; margin-bottom:12px; padding:0 2px}
.qv-controls{display:flex; align-items:center; gap:8px}
.qv-search{flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:7px; padding:7px 10px;
  border:1px solid var(--card-border); border-radius:var(--r-sm); background:var(--bg-board); color:var(--ink-3);
  transition:border-color var(--dur-fast) var(--ease-standard)}
.qv-search:focus-within{border-color:var(--aria-soft)}
.qv-search svg{width:15px; height:15px; flex:0 0 15px}
.qv-input{flex:1; min-width:0; border:0; outline:none; background:transparent; font:inherit; font-size:12.5px; color:var(--ink-1)}
.qv-input::placeholder{color:var(--ink-4)}
.qv-sort{flex:0 0 auto; font:inherit; font-size:12px; color:var(--ink-1); cursor:pointer;
  border:1px solid var(--card-border); border-radius:var(--r-sm); background:var(--bg-board);
  padding:7px 26px 7px 10px; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none' stroke='%235F6675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center}
.qv-sort:focus{outline:none; border-color:var(--aria-soft)}
.qv-scroll{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable; padding:0 2px}
.qv-scroll::-webkit-scrollbar{width:8px}
.qv-scroll::-webkit-scrollbar-thumb{background:var(--rule); border-radius:4px}
.qv-scroll::-webkit-scrollbar-track{background:transparent}
.qv-list{display:flex; flex-direction:column; gap:14px}
.qv-foot{display:flex; justify-content:center; align-items:center; padding:16px 0 6px}
.qv-more{display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:12px; font-weight:600;
  color:var(--pri); background:transparent; border:1px solid var(--card-border); border-radius:var(--r-sm);
  padding:8px 16px; cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard)}
.qv-more:hover{background:var(--control-active-softer); border-color:var(--card-border-hover)}
.qv-more i{font-size:13px}
.qv-allshown{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-4)}
.qv-empty{padding:30px 16px; text-align:center; color:var(--ink-3); font-size:13px}

/* === Property-detail stage (prototype demo) ============================== */
/* The dashboard (#content) and the detail page move as one track: identical
   timing/easing, complementary transforms — so it reads as a single slick slide.
   The Ask dock (z-index 20) stays above and does not move. */
.content{transition:transform .5s cubic-bezier(.62,0,.2,1)}
.prop-stage, .doc-stage{position:absolute; left:0; right:0; top:0; bottom:0; z-index:4; overflow:hidden;
  background:var(--bg-board); transform:translateX(100%); pointer-events:none;
  transition:transform .5s cubic-bezier(.62,0,.2,1)}
.el-board.detail-open .content, .el-board.doc-open .content{transform:translateX(-100%)}
.el-board.detail-open .prop-stage{transform:translateX(0); pointer-events:auto}
.el-board.doc-open .doc-stage{transform:translateX(0); pointer-events:auto}
.prop-scroll{position:absolute; inset:0; overflow-y:auto; overflow-x:hidden}
.prop-scroll::-webkit-scrollbar{width:8px}
.prop-scroll::-webkit-scrollbar-thumb{background:var(--rule); border-radius:4px}
.prop-scroll::-webkit-scrollbar-track{background:transparent}

/* Header — Back button sits exactly where the dashboard date line does (y≈36). */
.prop-header{padding:30px 34px 0}
.back-btn{display:inline-flex; align-items:center; gap:9px; padding:8px 16px 8px 13px; border:0; cursor:pointer;
  background:transparent; color:var(--aria-deep); font:inherit; font-size:13px; font-weight:600; letter-spacing:-.01em;
  border-radius:var(--r-pill);
  transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard)}
.back-btn .ba-arrow{display:inline-flex; color:var(--aria); transition:transform var(--dur-base) var(--ease-emphasized)}
.back-btn .ba-arrow svg{width:38px; height:14px}
.back-btn:hover{background:color-mix(in srgb, var(--aria) 12%, transparent); color:var(--aria)}
.back-btn:hover .ba-arrow{transform:translateX(-4px)}
.back-btn:active{transform:scale(.97); background:color-mix(in srgb, var(--aria) 22%, transparent)}

.prop-page{padding:16px 34px 64px}

/* Gallery — large hero + thumbnail strip (colour placeholders, no real images) */
.prop-gallery{display:flex; flex-direction:column; gap:10px; margin-bottom:24px}
.pg-hero{position:relative; height:340px; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(135deg,#dfe7f0,#bed0e2 52%,#cabdd9)}
.pg-badge{position:absolute; top:14px; left:14px; display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:var(--r-pill); background:rgba(255,255,255,.92);
  font-size:11px; font-weight:600; color:var(--success-solid)}
.pg-badge::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--success)}
.pg-more{position:absolute; right:14px; bottom:14px; display:inline-flex; align-items:center; gap:7px;
  padding:9px 15px; border:0; border-radius:var(--r-md); cursor:pointer;
  background:rgba(20,24,50,.5); color:#fff; font:inherit; font-size:12px; font-weight:600;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transition:background var(--dur-fast) var(--ease-standard)}
.pg-more:hover{background:rgba(20,24,50,.72)}
.pg-more i{font-size:15px}
.pg-thumbs{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.pg-thumb{height:74px; border-radius:var(--r-md); cursor:pointer;
  transition:transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard)}
.pg-thumb:hover{transform:translateY(-2px); box-shadow:var(--card-glow)}
.pg-thumb.t0{background:linear-gradient(135deg,#cfe0ee,#a7c3dd)}
.pg-thumb.t1{background:linear-gradient(135deg,#d9e7d2,#b2cda4)}
.pg-thumb.t2{background:linear-gradient(135deg,#efe3cf,#d8c29e)}
.pg-thumb.t3{background:linear-gradient(135deg,#e4dfe9,#c4b8d3)}
.pg-thumb.more{display:flex; align-items:center; justify-content:center; background:var(--control-active-softer);
  color:var(--ink-3); font-family:var(--mono); font-size:13px; font-weight:600}

/* Two columns: details (left) + maintenance/activity (right) */
.prop-cols{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:28px; align-items:start}
.prop-titleblock{margin-bottom:20px}
.pt-eyebrow{font-size:11px; letter-spacing:.14em; color:var(--aria-deep); margin-bottom:8px}
.pt-addr{font-family:var(--display); font-size:27px; font-weight:600; letter-spacing:-.02em; color:var(--ink-0);
  display:inline-flex; align-items:center; gap:8px; margin:0; padding:2px 8px; border-radius:var(--r-sm)}
.pt-sub{font-size:13px; color:var(--ink-3); margin-top:6px}
.prop-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:26px}
.pk{display:flex; flex-direction:column; gap:4px; padding:12px 14px; border-radius:var(--r-md);
  background:var(--bg-panel); border:1px solid var(--card-border)}
.pk-lbl{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.pk-val{font-family:var(--display); font-size:21px; font-weight:600; color:var(--ink-0)}
.prop-section{margin-bottom:26px}
.ps-title{font-size:11px; letter-spacing:.14em; color:var(--ink-3); margin-bottom:12px}
.fact-grid{display:grid; grid-template-columns:1fr 1fr; gap:2px 16px}
.fact{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r-sm)}
.fact-lbl{flex:0 0 46%; font-size:12.5px; color:var(--ink-3)}
.fact-val{flex:1; font-size:12.5px; color:var(--ink-1); font-weight:500}
/* Editable affordance — every field looks live: tint + inset ring + pencil on hover */
.editable{cursor:text; transition:background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard)}
.editable:hover{background:var(--control-active-softer); box-shadow:inset 0 0 0 1px var(--card-border)}
.fact-edit{margin-left:auto; font-size:14px; color:var(--ink-4); opacity:0; flex:0 0 auto;
  transition:opacity var(--dur-fast) var(--ease-standard)}
.editable:hover .fact-edit{opacity:1}
.amen-wrap{display:flex; flex-wrap:wrap; gap:8px}
.amen{padding:7px 13px; border-radius:var(--r-pill); background:var(--bg-panel); border:1px solid var(--card-border);
  font-size:12px; color:var(--ink-1)}
.prop-desc{position:relative; font-size:13px; line-height:1.65; color:var(--ink-2); margin:0; padding:11px 12px;
  border-radius:var(--r-sm)}
.prop-desc .fact-edit{position:absolute; top:9px; right:9px; margin:0}

/* Maintenance & activity timeline (right column, sticky) */
.prop-side{position:sticky; top:8px; padding:17px 17px 20px; background:var(--bg-panel);
  border:1px solid var(--card-border); border-radius:var(--r-lg)}
.prop-timeline{position:relative}
.prop-timeline::before{content:""; position:absolute; left:20px; top:16px; bottom:16px; width:1px; background:var(--rule)}
.tl-item{display:flex; gap:12px; padding:9px 2px; position:relative}
.tl-ic{position:relative; z-index:1; flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; background:var(--control-active-softer); color:var(--ink-2)}
.tl-ic i{font-size:16px; line-height:1}
.tl-ic.ok{background:rgba(92,158,51,.14); color:var(--success-solid)}
.tl-ic.warn{background:rgba(225,161,38,.18); color:var(--caution-solid)}
.tl-body{flex:1; min-width:0; padding-top:3px}
.tl-text{font-size:12.5px; color:var(--ink-1); line-height:1.4}
.tl-meta{font-size:11px; color:var(--ink-3); margin-top:2px}

/* === Renewal document viewer (prototype mockup) ========================= */
/* White toolbar: title + legal blurb on the left, action buttons on the right. */
.doc-bar{display:flex; align-items:flex-start; gap:24px; padding:16px 34px;
  background:var(--bg-panel); border-top:1px solid var(--card-border); border-bottom:1px solid var(--card-border)}
.doc-bar-info{flex:1; min-width:0}
.doc-bar-title{font-size:15px; font-weight:600; color:var(--ink-0); letter-spacing:-.01em}
.doc-bar-legal{font-size:12px; line-height:1.55; color:var(--ink-3); margin-top:5px; max-width:640px}
.doc-bar-actions{flex:0 0 auto; display:flex; align-items:center; gap:8px}
.doc-btn{padding:9px 17px; border-radius:9px; border:1px solid var(--card-border); background:var(--bg-panel);
  font:inherit; font-size:12.5px; font-weight:600; color:var(--ink-1); cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard),
     color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard)}
.doc-btn:hover{transform:translateY(-1px)}
.doc-btn.reject{color:var(--danger-solid)}
.doc-btn.reject:hover{background:rgba(216,67,38,.07); border-color:var(--danger)}
.doc-btn.edit:hover{background:var(--control-active-softer); border-color:var(--card-border-hover)}
.doc-btn.accept{background:var(--pri); border-color:transparent; color:#fff; box-shadow:var(--sh-btn-pri)}
.doc-btn.accept:hover{background:var(--pri-top)}

/* Dark patterned canvas holding the "paper" page. */
.doc-canvas{padding:34px; display:flex; justify-content:center;
  background-color:#3a3f4a;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.4px);
  background-size:20px 20px}
.doc-paper{width:100%; max-width:780px; background:#fff; border-radius:3px; padding:58px 64px 64px;
  box-shadow:0 10px 34px rgba(0,0,0,.34); color:#20242e}
.dp-title{font-family:var(--display); font-size:23px; font-weight:600; letter-spacing:-.01em; text-align:center}
.dp-meta{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:#6b7180; text-align:center; margin-top:7px; padding-bottom:22px; border-bottom:1px solid #e4e6ec; margin-bottom:24px}
.doc-paper p{font-size:13.5px; line-height:1.75; color:#333846; margin:0 0 15px}
.dp-lead b{color:#20242e}
.dp-clause{margin:0 0 15px}
.dp-h{font-size:13px; font-weight:700; color:#20242e; letter-spacing:.02em; margin-bottom:3px}
.dp-clause p{margin:0}
.dp-sign{display:flex; gap:44px; margin-top:44px}
.dp-sig{flex:1}
.dp-line{height:1px; background:#20242e; margin-bottom:8px}
.dp-sig-lbl{font-size:11.5px; color:#5a606e}

/* --- Generic screen section ---------------------------------------------- */
/* Every screen carries the page gutter. Previously the body took its left offset from
   the nav rail and had no padding of its own; with the rail gone it would otherwise sit
   flush against the frame edges. Same --page-x as the header, so the two line up. */
.screen{padding:0 var(--page-x)}
.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}