/* Shared look for the leasing inbox scenes: a lightweight replica of the landlord app. */
@font-face { font-family:"Open Sans"; font-style:normal; font-weight:300 800; font-display:swap; src:url("/webfonts/owners-properties/open-sans-latin-variable.woff2") format("woff2"); }
:root { color-scheme:light; --ink:#1B1C1A; --navy:#042238; --quiet:#5F5A68; --line:#E3E1EA; --soft:#F6F5F9; --row:#F1F0F4; --purple:#6B48E0; --lavender:#AB8CF2; --lime:#84D828; --green:#00C434; --ai-bg:#F3EFFF; --ai-line:#D9CCFF; --illustration-ink:#102B40; }
* { box-sizing:border-box; }
html, body { margin:0; background:transparent; }
body { color:var(--ink); font:400 14px/1.45 "Open Sans",system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
main[data-scene] { position:relative; padding:0; overflow:hidden; }
p, h1, h2, h3 { margin:0; }
svg { display:block; }

/* App window */
.app { display:grid; grid-template-rows:auto minmax(0,1fr); height:430px; border-radius:4px; background:#fff; overflow:hidden; }
.app-top { display:flex; align-items:center; gap:10px; padding:8px 12px; border-bottom:1px solid var(--line); min-height:52px; }
.app-top .crumb { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--quiet); min-width:0; white-space:nowrap; }
.app-top .crumb strong { color:var(--ink); }
.app-top .crumb svg { width:30px; height:30px; flex:none; }
.app-top .grow { flex:1; }
.btn-new { display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border-radius:6px; background:var(--green); color:var(--ink); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:0 12px; border-radius:6px; border:1px solid var(--purple); background:#fff; color:var(--ink); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; transition:background .3s, color .3s; }
.btn.primary { border-color:var(--green); background:var(--green); }
.icon-btn { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; color:var(--quiet); flex:none; }
.icon-btn.ring { border:1px solid var(--line); }
.body { display:grid; grid-template-columns:168px minmax(0,1fr); min-height:0; }

/* Inner navigation, as in the app's workspace menus */
.nav { padding:10px 8px; border-right:1px solid var(--line); background:#FBFAFD; overflow:hidden; }
.nav-title { display:flex; align-items:center; gap:8px; padding:4px 8px 10px; font-size:15px; font-weight:600; }
.nav-title svg { width:28px; height:28px; }
.nav-row { display:flex; align-items:center; gap:10px; min-height:36px; padding:4px 8px; border-left:3px solid transparent; border-radius:2px; font-size:13px; white-space:nowrap; transition:background .3s, border-color .3s; }
.nav-row svg { width:24px; height:24px; flex:none; }
.nav-row .count { margin-left:auto; font-size:12px; color:var(--quiet); }
.nav-row.is-active, .nav-row.sel.on { background:var(--row); border-left-color:var(--lime); }
.nav-label { padding:12px 8px 4px; font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--quiet); text-transform:uppercase; }
.ow-nav-art { color:var(--illustration-ink); stroke:var(--illustration-ink); stroke-width:1.65; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.ow-nav-art .nav-paper { fill:#fff; }
.ow-nav-art .nav-lavender { fill:var(--lavender); }
.ow-nav-art .nav-lime, .ow-nav-art .nav-dot { fill:var(--lime); }
.ow-nav-art .nav-dot, .ow-nav-art .nav-ink { stroke:none; }
.ow-nav-art .nav-ink { fill:var(--illustration-ink); }
.ow-nav-art .nav-accent { stroke:var(--lime); }
.ow-nav-art .nav-purple-stroke { stroke:var(--lavender); }

/* Content */
.content { min-width:0; overflow:hidden; padding:14px 16px; }
.page-title { font-size:20px; font-weight:600; }
.tabs { display:flex; gap:16px; margin-top:8px; border-bottom:1px solid var(--line); }
.tab { position:relative; padding:6px 0 8px; font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--quiet); white-space:nowrap; }
.tab::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--purple); transform:scaleX(0); transform-origin:left; transition:transform .35s; }
.tab.is-active, .tab.sel.on { color:var(--ink); }
.tab.is-active::after, .tab.sel.on::after { transform:scaleX(1); }
.tab.sel.on ~ .tab.is-active { color:var(--quiet); }
.tab.sel.on ~ .tab.is-active::after { transform:scaleX(0); }
.pill { display:inline-flex; align-items:center; gap:4px; padding:0 7px 0 6px; border-radius:999px; font-size:12px; font-weight:600; line-height:18px; background:#E2E8F0; color:var(--ink); white-space:nowrap; }
.pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill.info { background:#C3DBFF; }
.pill.active { background:#D1F48C; }
.pill.warn { background:#FFFA64; }
.avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; flex:none; font-size:12px; font-weight:700; color:#fff; background:#D8293E; }
.avatar.b { background:#6B48E0; }
.avatar.c { background:#287A4A; }
.quiet { color:var(--quiet); }
.small { font-size:12px; }
.link { color:#006CB4; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }

/* Reveal helpers */
.rv { opacity:0; transform:translateY(8px); transition:opacity .45s ease, transform .45s ease; }
.rv.on { opacity:1; transform:none; }
.fade { opacity:0; transition:opacity .4s ease; }
.fade.on { opacity:1; }
.hide-on.on { display:none; }
.swap-on { display:none; }
.swap-on.on { display:inherit; }
[data-type].typing::after { content:""; display:inline-block; width:1px; height:1em; margin-left:1px; vertical-align:-2px; background:currentColor; animation:blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
.still .rv, .still .fade { transition:none; }

/* Toast */
.toast { position:absolute; left:50%; bottom:16px; transform:translate(-50%,12px); display:flex; align-items:center; gap:8px; max-width:calc(100% - 32px); padding:10px 14px; border-radius:4px; background:#023A6D; color:#fff; font-size:13px; opacity:0; transition:opacity .4s, transform .4s; z-index:5; }
.toast.on { opacity:1; transform:translate(-50%,0); }

/* Pointer */
.cursor { position:absolute; left:0; top:0; z-index:20; width:32px; height:40px; margin:-2px 0 0 -9px; pointer-events:none; opacity:0; transition:opacity .3s; filter:drop-shadow(0 1px 1px rgba(4,34,56,.25)); }
.cursor.on { opacity:1; }
.cursor svg { width:100%; height:100%; }
.cursor-ring { position:absolute; left:-7px; top:-14px; width:32px; height:32px; border:2px solid var(--purple); border-radius:50%; opacity:0; transform:scale(.4); }
.cursor-ring.pulse { animation:ring .35s ease-out; }
@keyframes ring { from { opacity:.9; transform:scale(.4); } to { opacity:0; transform:scale(1.2); } }
.still .cursor { display:none; }

@media (max-width:560px) {
  .body { grid-template-columns:minmax(0,1fr); }
  .nav { display:none; }
}
@media (max-width:560px) {
  .app { height:470px; }
  .app-top .crumb span.wide, .app-top .icon-btn.search { display:none; }
  .content { padding:12px; }
}
.grow { display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s ease; }
.grow.on { grid-template-rows:1fr; }
.grow > div { overflow:hidden; min-height:0; }
.still .grow { transition:none; }
.frozen *, .frozen *::after { transition:none !important; animation:none !important; }