/* ===========================================================================
   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: rail + content ----------------------------------------------- */
.shell{position:relative; z-index:var(--z-content); display:flex; height:100%}

/* Nav panel — Concept C: always open, square (no rounded corners), a real layout
   column with the account cluster + brand nested at the bottom. */
/* z-index:1 keeps the rail above #content so the dashboard slides cleanly *behind*
   it during the property-detail transition (no bleed into the rail column). */
.rail{position:relative; z-index:1; flex:0 0 202px; width:202px; height:100%}
.rail-inner{
  position:absolute; inset:0; width:202px; overflow:visible;
  display:flex; flex-direction:column; align-items:stretch; gap:6px; padding:36px 12px 16px;
  background:#F6F8FB; border-right:1px solid var(--card-border); cursor:default;
}

/* Top: personal account row (name + role → menu). */
.rail-top{width:100%; padding-bottom:10px; margin-bottom:4px; border-bottom:1px solid var(--rule)}
/* Portfolio switcher (now nested at the bottom) — green dot marks the live portfolio. */
.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}

/* Nav items — icon + label, always shown */
.rail-icons{display:flex; flex-direction:column; gap:2px; width:100%}
.nav-row{position:relative; display:flex; align-items:center; gap:11px; height:38px; padding:0 10px;
  border-radius:var(--r-sm); color:var(--ink-2); cursor:pointer;
  transition:background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard)}
.nav-row svg{width:19px; height:19px; flex:0 0 19px}
.nav-row .lbl{font-size:13.5px; font-weight:500; white-space:nowrap; letter-spacing:-.005em}
.nav-row:hover{background:var(--control-active-softer); color:var(--ink-1)}
.nav-row.active{background:var(--control-active-soft); color:var(--pri)}
.nav-row.active .lbl{font-weight:600}
/* Unread count on the Inbox row (orchid — it's Elisian surfacing things for you) */
.nav-count{margin-left:auto; flex:0 0 auto; min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--control-active-hover); color:#fff; font-family:var(--mono); font-size:10.5px; font-weight:600;
  display:inline-flex; align-items:center; justify-content:center}

/* Top account cluster: the row toggles a dropdown of standard account links, with
   the portfolio switcher nested at its base. */
.acct-wrap{position:relative; width:100%}
.acct-row{width:100%; display:flex; align-items:center; gap:9px; padding:6px 6px; border:0; cursor:pointer;
  background:transparent; border-radius:var(--r-sm); text-align:left; font:inherit;
  transition:background var(--dur-fast) var(--ease-standard)}
.acct-row:hover{background:var(--control-active-softer)}
.acct-row .avatar{flex:0 0 auto}
/* Account identity mark is the Elisian glyph, sized to match the old R square. */
.acct-row .el-glyph.logo{flex:0 0 auto; width:38px; height:38px; border-radius:var(--r-lg)}
.acct-row .el-glyph.logo span{font-size:28px}
.acct-meta{display:flex; flex-direction:column; min-width:0; line-height:1.25}
.acct-name{font-size:13px; font-weight:600; color:var(--ink-0); letter-spacing:-.01em}
.acct-role{font-size:11px; color:var(--ink-3)}
.acct-dots{margin-left:auto; flex:0 0 auto; color:var(--ink-4); display:inline-flex}
.acct-dots svg{width:18px; height:18px}

/* Account dropdown — opens beneath the row; hidden until .open. */
.acct-menu{position:absolute; left:0; right:0; top:calc(100% + 7px); z-index:40;
  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 center;
  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 */
.acct-menu .pf-switch{margin-top:1px}

/* Live AI-actions readout — sits just below the nav (separated by a rule) and fills
   the middle of the rail. No borders; a small search on top; each output line has its
   own hover. Claude-minimal. */
.rail-feed{flex:0 0 auto; min-height:0; display:flex; flex-direction:column; gap:6px;
  width:100%; margin-top:4px; padding-top:12px; border-top:1px solid var(--rule)}
.rf-search{display:flex; align-items:center; gap:7px; padding:6px 8px; border-radius:var(--r-sm);
  background:var(--control-active-softer); color:var(--ink-3)}
.rf-search svg{width:14px; height:14px; flex:0 0 14px}
.rf-input{flex:1; min-width:0; border:0; outline:none; background:transparent; padding:0;
  font:inherit; font-size:12px; color:var(--ink-1)}
.rf-input::placeholder{color:var(--ink-4)}
.rf-list{flex:0 1 auto; min-height:0; max-height:230px; overflow-y:auto; display:flex; flex-direction:column;
  margin:0 -6px; padding:2px 0}
.rf-list::-webkit-scrollbar{width:6px}
.rf-list::-webkit-scrollbar-thumb{background:var(--rule); border-radius:3px}
.rf-list::-webkit-scrollbar-track{background:transparent}
.rf-line{display:flex; align-items:baseline; padding:5px 8px; border-radius:var(--r-sm);
  cursor:default; transition:background var(--dur-fast) var(--ease-standard)}
.rf-line:hover{background:var(--control-active-softer)}
.rf-line.rf-hidden{display:none}
/* Quiet by default; the whole readout warms to its readable value only when the rail
   is hovered, and an individual line darkens further on its own hover. */
.rf-text{flex:1; min-width:0; font-size:12px; line-height:1.35; color:var(--ink-4);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:color var(--dur-base) var(--ease-standard)}
.rail:hover .rf-text{color:var(--ink-2)}
.rf-line:hover .rf-text{color:var(--ink-1)}
.rf-empty{padding:14px 8px; font-size:11.5px; color:var(--ink-4)}

/* Internal marketing CTA — sits low but lifted off the base; rotates between two
   training assets. margin-top:auto keeps it near the bottom under the shortened feed. */
.rail-cta{flex:0 0 auto; margin-top:auto; margin-bottom:20px; padding-top:10px; border-top:1px solid var(--rule)}
.cta-slides{position:relative; height:190px}
.cta-card{position:absolute; inset:0; display:flex; flex-direction:column; gap:8px; padding:9px;
  border-radius:var(--r-md); background:var(--control-active-softer); cursor:pointer; text-decoration:none;
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .9s var(--ease-standard), transform .9s var(--ease-standard), background var(--dur-fast) var(--ease-standard)}
.cta-card.active{opacity:1; visibility:visible; transform:none}
.cta-card:hover{background:var(--control-active-soft)}
/* Placeholder thumbnail — 16:9-ish, like a real guide/video cover */
.cta-thumb{position:relative; height:98px; border-radius:var(--r-sm); overflow:hidden;
  display:flex; align-items:center; justify-content:center}
.cta-thumb i{font-size:40px}
.cta-thumb.t-meta{background:linear-gradient(135deg, rgba(92,108,130,.18), rgba(130,133,194,.16)); color:var(--leasing-solid)}
.cta-thumb.t-mcp{background:linear-gradient(135deg, rgba(29,35,105,.24), rgba(42,48,128,.20)); color:#fff}
.cta-chips{position:absolute; left:12px; bottom:12px; display:flex; gap:4px}
.cta-chips span{width:26px; height:7px; border-radius:4px; background:rgba(92,108,130,.4)}
.cta-chips span:nth-child(2){width:18px}
.cta-chips span:nth-child(3){width:22px}
.cta-play{width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center; box-shadow:0 3px 12px rgba(29,35,105,.28)}
.cta-play .cta-tri{width:21px; height:21px; color:var(--pri); margin-left:2px}
.cta-dur{position:absolute; right:8px; bottom:8px; font-family:var(--mono); font-size:10px; color:#fff;
  background:rgba(20,24,50,.6); padding:2px 5px; border-radius:4px; letter-spacing:.02em}
.cta-body{display:flex; flex-direction:column; gap:2px}
.cta-eyebrow{font-family:var(--mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}
.cta-title{font-size:12.5px; font-weight:600; line-height:1.25; color:var(--ink-0); letter-spacing:-.01em}
.cta-go{display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:var(--pri)}
.cta-go i{font-size:12px; transition:transform var(--dur-fast) var(--ease-standard)}
.cta-card:hover .cta-go i{transform:translateX(2px)}
.cta-dots{display:flex; justify-content:center; gap:6px; margin-top:8px}
.cta-dot{width:6px; height:6px; padding:0; border:0; border-radius:50%; background:var(--ink-4); opacity:.35;
  cursor:pointer; transition:opacity var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard)}
.cta-dot:hover{opacity:.7}
.cta-dot.active{opacity:1; background:var(--pri)}

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

/* --- Global header (greeting only) --------------------------------------- */
/* Concept C: not sticky, no Ask bar — it simply scrolls with the page. The Ask
   bar lives in the floating bottom dock (.ask-dock). */
.app-header{
  position:static; background:transparent;
  padding:36px 34px 4px;
}
/* Slim one-line header: just the date line, styled as a section eyebrow. */
.header-slim{display:flex; align-items:center; gap:10px}
.header-slim .date{display:inline-flex; align-items:center; gap:8px}
.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)}
.header-slim .date-cal svg{width:13px; height:13px}
.header-slim .date-cal:hover{color:var(--pri)}

/* --- Floating Ask-Elisian dock ------------------------------------------- */
/* Sits inside the body only (left:202px clears the nav). The bar runs edge-to-edge
   across the content, lifted a little off the bottom. A blurred scrim rises behind
   it from the page bottom to ~80px above the bar, and the bar itself throws a large
   brand-tinted glow into the atmosphere below when it's up. */
.ask-dock{position:absolute; left:202px; right:0; bottom:0; z-index:20;
  display:flex; flex-direction:column; gap:12px; padding:0 20px 44px; pointer-events:none}
/* Suggested-task row — reveals with the bar; Dismiss hides it for the session. */
.ask-tasks-wrap{position:relative; z-index:2; width:100%; display:flex; flex-direction:column; gap:7px;
  pointer-events:none; opacity:0; transform:translateY(14px);
  transition:opacity .3s var(--ease-standard), transform .36s var(--ease-emphasized)}
.ask-dock.show .ask-tasks-wrap{opacity:1; transform:none; pointer-events:auto}
.ask-dock.tasks-hidden .ask-tasks-wrap{display:none}
/* Blurred scrim behind the bar — softly fades out toward its top edge. */
.ask-dock::before{content:""; position:absolute; left:0; right:0; bottom:0; top:-112px;
  z-index:0; pointer-events:none; opacity:0;
  background:linear-gradient(to top,
     color-mix(in srgb, var(--bg-board) 96%, transparent) 20%,
     color-mix(in srgb, var(--bg-board) 52%, transparent) 64%, transparent);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  -webkit-mask-image:linear-gradient(to top, #000 52%, transparent);
          mask-image:linear-gradient(to top, #000 52%, transparent);
  transition:opacity .3s var(--ease-standard);
}
.ask-dock.show::before{opacity:1}
.ask-dock .ask{position:relative; z-index:1; width:100%; pointer-events:auto; background:var(--bg-panel);
  box-shadow:0 18px 28px -16px rgba(20,24,50,.62), 0 3px 9px rgba(20,24,50,.15);
  transform:translateY(calc(100% + 44px)); opacity:0;
  transition:transform .34s var(--ease-emphasized), opacity .22s var(--ease-standard),
     border-color var(--hover-slow) var(--ease-in-out), box-shadow .3s var(--ease-standard);
}
/* keep the floating bar opaque even on hover (it sits over content) */
.ask-dock .ask:hover, .ask-dock .ask:focus-within{background:var(--bg-panel)}
/* While the + New menu is open, lift the bar above the task row (z-index:2) so its
   upward popover isn't clipped behind the suggested tasks. */
.ask-dock .ask:has(.dc-anchor:hover){z-index:6}
.ask-dock.show .ask{transform:translateY(0); opacity:1;
  animation:askGlowPulse 9s ease-in-out infinite}
/* Reduced brand glow that breathes very slowly (rgba so the box-shadow interpolates). */
@keyframes askGlowPulse{
  0%, 100%{box-shadow:0 18px 28px -16px rgba(20,24,50,.62), 0 3px 9px rgba(20,24,50,.15),
     0 26px 66px -6px rgba(181,104,193,.22), 0 10px 38px 0 rgba(181,104,193,.13)}
  50%{box-shadow:0 18px 28px -16px rgba(20,24,50,.62), 0 3px 9px rgba(20,24,50,.15),
     0 26px 74px -4px rgba(181,104,193,.34), 0 12px 44px 0 rgba(181,104,193,.20)}
}
/* overflow:hidden drives the collapse animation but also clips the notification
   badge that overhangs the bell — pad the clip box so the badge stays visible. */
.app-header .header-greet{
  margin-bottom:13px; padding-top:6px; overflow:hidden;
  transition:max-height var(--hover-slow) var(--ease-in-out),
     opacity .24s var(--ease-standard), margin-bottom var(--hover-slow) var(--ease-in-out),
     padding-top var(--hover-slow) var(--ease-in-out);
  max-height:86px;
}
/* Minimized (scrolled): collapse the greeting, leave the Ask bar; add a lift shadow */
.app-header.minimized{padding-top:12px; padding-bottom:12px;
  box-shadow:0 8px 18px -14px rgba(20,24,50,.35)}
.app-header.minimized .header-greet{max-height:0; opacity:0; margin-bottom:0; padding-top:0}

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

/* --- Dashboard layout: tall lower panels; the page scrolls to reach them --- */
/* Fluid columns (was 681px 439px) so the content fits the wider frame + open nav. */
/* align-items:stretch → the shorter (right) column grows to the taller (left) one,
   so the quick view fills down to bottom-align with the decision panel. */
.dash-grid{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); 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}
/* Overnight panel: tall fixed height (was ~440 fill → +600), list scrolls inside */
.log{flex:0 0 auto; height:1040px; min-height:0; display:flex; flex-direction:column}
/* overflow-x:hidden locks the column horizontally (no side-to-side wiggle from the
   rows' negative margins); scrollbar-gutter keeps the width steady while scrolling */
.log-list{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; scrollbar-gutter:stable;
  display:flex; flex-direction:column; gap:4px}
.log-list::-webkit-scrollbar{width:8px}
.log-list::-webkit-scrollbar-thumb{background:var(--rule); border-radius:4px}
.log-list::-webkit-scrollbar-track{background:transparent}

/* --- Dashboard: Property quick view -------------------------------------- */
/* Fills the right column (flex:1) so it bottom-aligns with the decision panel; the
   card list scrolls internally. Header holds the search + sort; footer the load-more. */
.qv-panel{flex:1 1 0; min-height:0; display:flex; flex-direction:column; padding:18px 14px 12px}
.qv-head{flex:0 0 auto; display:flex; flex-direction:column; gap:11px; margin-bottom:12px; padding:0 2px}
.qv-title{display:flex; align-items:baseline}
.qv-count{color:var(--ink-3)}
.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:202px; 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 ---------------------------------------------- */
.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}