/* ==================================================================
   THE MERIDIAN · developer app

   The developer's side of a Plot Pilot launch, built as an application
   rather than a page: a slim green app bar, a sidebar, one view at a
   time, and an inspector that slides in for whatever is selected.

   Set entirely in Instrument Sans. Hierarchy comes from weight, size and
   tracking; figures are tabular wherever they sit in a column.

   Colour does one job each:
     green   the brand, and "available"
     clay    "reserved"; always with a 45 degree hatch, never colour alone
     ink     "sold"; a solid dark pane
   Everything else is ivory, white and hairlines.

   Contrast on white: ink 16.1, ink-2 7.9, muted 4.7, accent-t 5.6,
   clay-t 5.4. On the app bar #15281F: white 15.3, mint 9.1.
   ================================================================== */

:root{
  --canvas:#F4F1EB;      /* the app's ground */
  --side:#F8F6F1;        /* the sidebar, one step lighter */
  --surface:#FFFFFF;
  --surface-2:#FBFAF7;   /* table heads, inset wells */
  --line:rgba(26,34,30,.085);
  --line-2:rgba(26,34,30,.14);
  --ink:#151D19;
  --ink-2:#47514C;
  --muted:#6D7671;
  --brand:#15281F;
  --brand-2:#1F3A2D;
  --mint:#A8D5BE;
  --accent:#2F7A5A;      /* available, positive, primary actions */
  --accent-t:#256649;
  --accent-w:#E7F1EC;    /* a wash of the same green */
  --clay:#C0763A;        /* reserved */
  --clay-t:#8C5224;
  --clay-w:#F7ECE1;
  --sold:#29312D;        /* sold: a solid dark pane */
  --warn:#B4472F;        /* a deadline close enough to act on */
  --warn-w:#F8E7E2;
  --r:14px; --r-s:10px; --r-xs:7px;
  --sh-1:0 1px 2px rgba(20,30,25,.04),0 1px 1px rgba(20,30,25,.03);
  --sh-2:0 1px 2px rgba(20,30,25,.05),0 12px 32px -14px rgba(20,30,25,.22);
  --sh-3:0 24px 64px -18px rgba(14,24,19,.42),0 2px 8px rgba(14,24,19,.08);
  --ease:cubic-bezier(.22,.68,.24,1);
  --font:'Instrument Sans',-apple-system,system-ui,sans-serif;
  --mono:'Spline Mono',ui-monospace,Menlo,monospace;
  --ab:56px;
  --sw:236px;
}
/* the app needs only two things from the buyer site's stylesheet, the face
   and the demonstration ribbon, so it carries them itself and nothing else
   from the brochure can leak in */
@font-face{font-family:'Instrument Sans';src:url('../fonts/InstrumentSans.woff2') format('woff2');font-weight:400 700;font-display:swap}
.topbar{position:fixed;top:0;left:0;right:0;z-index:120}
.ribbon{background:#12100E;color:#EFE9DC;font:400 12.5px/1.5 'Instrument Sans',system-ui,sans-serif;letter-spacing:.02em;display:flex;align-items:center;
  justify-content:center;gap:16px;flex-wrap:wrap;padding:9px 18px;text-align:center}
.ribbon a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(239,233,220,.5);padding-bottom:1px;white-space:nowrap}
.ribbon .pill{display:inline-flex;align-items:center;gap:7px;padding:3px 11px;border-radius:100px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.ribbon .pill i{width:6px;height:6px;border-radius:50%;background:#9FC4AC}
@font-face{font-family:'Spline Mono';src:url('../fonts/SplineSansMono[wght].ttf');font-weight:300 600;font-display:swap}

*{box-sizing:border-box}
html,body{margin:0}
body.app{padding-top:var(--topH,40px);background:var(--canvas);color:var(--ink);font:400 14px/1.5 var(--font);-webkit-font-smoothing:antialiased;
  font-feature-settings:'ss01' 1}
:where(.app) button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
:where(.app) a{color:inherit;text-decoration:none}
:where(.app) :is(input,select,textarea){font:inherit;color:inherit}   /* :where keeps these resets weaker than any component */
.num,.tnum{font-variant-numeric:tabular-nums}
.uid{font-family:var(--mono);font-weight:500;font-size:.92em;letter-spacing:-.01em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------------- the app bar ---------------- */
.ab{position:sticky;top:var(--topH,0);z-index:60;height:var(--ab);display:flex;align-items:center;gap:14px;padding:0 18px 0 14px;
  background:linear-gradient(180deg,#183026,#13261D);color:#fff;border-bottom:1px solid rgba(0,0,0,.25)}
.ab__burger{display:none;width:36px;height:36px;border-radius:9px;align-items:center;justify-content:center;color:#fff}
.ab__id{display:flex;align-items:center;gap:11px;min-width:calc(var(--sw) - 28px)}
.ab__mk{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ab__mk svg{width:16px;height:16px}
.ab__nm{line-height:1.15}
.ab__nm b{display:block;font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.ab__nm span{font-size:11.5px;color:rgba(255,255,255,.66)}
.ab__rel{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 11px 0 12px;border-radius:9px;font-size:12.5px;font-weight:500;
  color:rgba(255,255,255,.9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);white-space:nowrap}
.ab__rel i{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(168,213,190,.2)}
.ab__rel svg{width:14px;height:14px;opacity:.7}
.ab__search{flex:1;max-width:440px;margin:0 auto;display:flex;align-items:center;gap:9px;height:34px;padding:0 10px 0 12px;border-radius:9px;
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.62);font-size:13px;transition:background .2s}
.ab__search:hover{background:rgba(255,255,255,.11)}
.ab__search kbd{margin-left:auto;font:500 11px/1 var(--font);padding:4px 6px;border-radius:5px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.7)}
.ab__r{display:flex;align-items:center;gap:6px}
.ab__btn{height:34px;display:inline-flex;align-items:center;gap:7px;padding:0 12px;border-radius:9px;font-size:12.5px;font-weight:500;
  color:rgba(255,255,255,.88);transition:background .2s}
.ab__btn:hover{background:rgba(255,255,255,.08)}
.ab__btn svg{width:15px;height:15px}
.ab__bell{position:relative;width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:rgba(255,255,255,.88)}
.ab__bell:hover{background:rgba(255,255,255,.08)}
.ab__bell b{position:absolute;top:6px;right:6px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;background:#E9895A;color:#1A140F;
  font-size:9.5px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 2px #15281F}
.ab__me{display:flex;align-items:center;gap:9px;margin-left:6px;padding-left:12px;border-left:1px solid rgba(255,255,255,.12)}
.ab__me span{font-size:12px;line-height:1.2;text-align:right;color:rgba(255,255,255,.78)}
.ab__me span b{display:block;font-weight:600;color:#fff;font-size:12.5px}

.av{width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;flex:none;font-size:11px;font-weight:600;letter-spacing:.02em;
  color:#3A2716;background:linear-gradient(145deg,#EBCFAE,#D6AE85);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.av--s{width:24px;height:24px;font-size:9.5px}
.av--g{color:#1D3A2C;background:linear-gradient(145deg,#CFE6D9,#A9CDB9)}
.av--b{color:#22303A;background:linear-gradient(145deg,#D6DEE6,#B4C2CF)}
.av--n{color:var(--muted);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-2)}

/* ---------------- the shell ---------------- */
.shell{display:grid;grid-template-columns:var(--sw) minmax(0,1fr);min-height:calc(100vh - var(--topH,0px) - var(--ab));
  background:linear-gradient(90deg,var(--side) calc(var(--sw) - 1px),var(--line) calc(var(--sw) - 1px),var(--line) var(--sw),transparent var(--sw))}
.sb{position:sticky;top:calc(var(--topH,0px) + var(--ab));height:calc(100vh - var(--topH,0px) - var(--ab));overflow:auto;
  background:var(--side);border-right:1px solid var(--line);padding:16px 12px 14px;display:flex;flex-direction:column;gap:2px}
.sb__h{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:16px 10px 6px}
.sb__a{display:flex;align-items:center;gap:11px;height:36px;padding:0 10px;border-radius:9px;color:var(--ink-2);font-weight:500;font-size:13.5px;
  transition:background .18s,color .18s}
.sb__a:hover{background:rgba(26,34,30,.045);color:var(--ink)}
.sb__a.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1),inset 0 0 0 1px var(--line)}
.sb__a.on svg{color:var(--accent)}
.sb__a svg{color:var(--muted)}
.sb__a em{margin-left:auto;font-style:normal;font-size:11px;font-weight:600;min-width:20px;height:20px;padding:0 6px;border-radius:10px;
  display:grid;place-items:center;background:rgba(26,34,30,.07);color:var(--ink-2)}
.sb__a em.hot{background:var(--clay-w);color:var(--clay-t)}
.sb__tag{margin-left:auto;font-size:9.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding:3px 6px;border-radius:5px;box-shadow:inset 0 0 0 1px var(--line-2)}
.sb__foot{margin-top:auto;padding-top:14px;display:grid;gap:10px}
.sb__esc{padding:12px 12px 12px;border-radius:12px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);font-size:12px;color:var(--ink-2);line-height:1.45}
.sb__esc b{display:flex;align-items:center;gap:7px;color:var(--ink);font-weight:600;font-size:12.5px;margin-bottom:4px}
.sb__esc b svg{width:15px;height:15px;color:var(--accent)}
.sb__note{font-size:11.5px;color:var(--muted);line-height:1.45;padding:0 4px}
.sb__note a{color:var(--accent-t);font-weight:600}

/* ---------------- the main column ---------------- */
.main{min-width:0;padding:26px clamp(18px,2.6vw,36px) 64px}
.view{display:none;animation:vIn .45s var(--ease) both}
.view.on{display:block}
@keyframes vIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ph{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 24px;flex-wrap:wrap;margin-bottom:22px}
.ph__e{font-size:12px;font-weight:500;color:var(--muted);display:flex;align-items:center;gap:7px}
.ph__e i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-w)}
.ph h1{margin:6px 0 0;font-size:27px;line-height:1.12;font-weight:600;letter-spacing:-.025em}
.ph p{margin:7px 0 0;color:var(--ink-2);font-size:14.5px;max-width:64ch}
.ph p b{color:var(--ink);font-weight:600}
.ph p .c{color:var(--clay-t);font-weight:600}
.ph__act{display:flex;gap:8px;flex-wrap:wrap}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:9px;font-size:13px;font-weight:500;
  background:var(--surface);box-shadow:var(--sh-1),inset 0 0 0 1px var(--line-2);color:var(--ink);white-space:nowrap;transition:box-shadow .2s,background .2s,transform .12s}
.btn:hover{box-shadow:var(--sh-1),inset 0 0 0 1px rgba(26,34,30,.28)}
.btn:active{transform:translateY(1px)}
.btn svg{width:15px;height:15px}
.btn--p{background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.15),inset 0 0 0 1px rgba(255,255,255,.06)}
.btn--p:hover{background:var(--brand-2);box-shadow:0 1px 2px rgba(0,0,0,.15)}
.btn--g{background:var(--accent);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.btn--g:hover{background:var(--accent-t);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.btn--q{background:transparent;box-shadow:none;color:var(--ink-2)}
.btn--q:hover{background:rgba(26,34,30,.05);box-shadow:none}
.btn--s{height:28px;padding:0 10px;font-size:12px;border-radius:8px}
.btn--warn{color:var(--warn)}
.btn:focus-visible,.sb__a:focus-visible,.seg button:focus-visible,.chip:focus-visible,.cell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* segmented control and filter chips */
.seg{display:inline-flex;padding:3px;border-radius:10px;background:rgba(26,34,30,.055);gap:2px}
.seg button{height:28px;padding:0 12px;border-radius:7px;font-size:12.5px;font-weight:500;color:var(--ink-2);transition:background .2s,color .2s,box-shadow .2s}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1),inset 0 0 0 1px var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{height:28px;display:inline-flex;align-items:center;gap:7px;padding:0 11px;border-radius:14px;font-size:12.5px;font-weight:500;color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--line-2);background:var(--surface);transition:all .18s}
.chip b{font-weight:600;color:var(--muted);font-size:11.5px}
.chip.on{background:var(--ink);color:#fff;box-shadow:none}
.chip.on b{color:rgba(255,255,255,.7)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}

/* status pills, with a mark that is not colour alone */
.st{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px 0 7px;border-radius:11px;font-size:11.5px;font-weight:600;white-space:nowrap}
.st::before{content:'';width:8px;height:8px;border-radius:50%}
.st--av{background:var(--accent-w);color:var(--accent-t)} .st--av::before{background:var(--accent)}
.st--re{background:var(--clay-w);color:var(--clay-t)} .st--re::before{border-radius:2px;background:repeating-linear-gradient(135deg,var(--clay) 0 2px,transparent 2px 4px);box-shadow:inset 0 0 0 1px var(--clay)}
.st--so{background:#E8EAE8;color:var(--sold)} .st--so::before{border-radius:2px;background:var(--sold)}
.st--hb{background:var(--surface-2);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-2)} .st--hb::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--muted)}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;font-size:11px;font-weight:600;background:rgba(26,34,30,.06);color:var(--ink-2)}
.tag--g{background:var(--accent-w);color:var(--accent-t)} .tag--c{background:var(--clay-w);color:var(--clay-t)} .tag--w{background:var(--warn-w);color:var(--warn)}

/* cards */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.s3{grid-column:span 3}.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}.s12{grid-column:span 12}
.card{background:var(--surface);border-radius:var(--r);box-shadow:var(--sh-1),inset 0 0 0 1px var(--line);min-width:0}
.card__h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 0}
.card__h h2{margin:0;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.card__h p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.card__b{padding:14px 18px 18px}
.card__lnk{font-size:12.5px;font-weight:600;color:var(--accent-t);display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.card__lnk svg{width:14px;height:14px}
.card__lnk:hover{color:var(--accent)}

/* stat tiles */
.kpi{padding:16px 18px 16px;display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden}
.kpi__k{font-size:12.5px;font-weight:500;color:var(--ink-2);display:flex;align-items:center;gap:7px}
.kpi__k svg{width:15px;height:15px;color:var(--muted)}
.kpi__v{font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1.15;margin-top:4px}
.kpi__v small{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:-.01em;margin-left:3px}
.kpi__s{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.kpi__s .up{color:var(--accent-t);font-weight:600}
.kpi__spark{position:absolute;right:16px;bottom:16px;width:96px;height:30px}
.meter{display:flex;gap:2px;height:6px;margin-top:10px;border-radius:4px;overflow:hidden}
.meter i{display:block;height:100%}
.meter .so{background:var(--sold)} .meter .re{background:repeating-linear-gradient(135deg,var(--clay) 0 3px,#D69863 3px 6px)} .meter .av{background:#CFE2D8} .meter .rest{background:#E6E3DC}

/* tables */
.tw{overflow:auto}
table.t{width:100%;border-collapse:separate;border-spacing:0;font-size:13px}
.t th{position:sticky;top:0;z-index:1;text-align:left;font-size:11.5px;font-weight:600;color:var(--muted);padding:10px 14px;background:var(--surface-2);
  border-bottom:1px solid var(--line);white-space:nowrap;cursor:default}
.t th[data-sort]{cursor:pointer} .t th[data-sort]:hover{color:var(--ink)}
.t th.on{color:var(--ink)} .t th .ar{opacity:.6;margin-left:3px}
.t th:first-child{padding-left:18px} .t td:first-child{padding-left:18px}
.t td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.t tr:last-child td{border-bottom:0}
.t tbody tr{transition:background .15s}
.t tbody tr.rowlink{cursor:pointer}
.t tbody tr.rowlink:hover{background:#FAF8F3}
.t .r{text-align:right}
.t .m{color:var(--muted)}
.t .b{font-weight:600}
.who{display:flex;align-items:center;gap:10px}
.who b{display:block;font-weight:600;font-size:13px}
.who span{display:block;font-size:12px;color:var(--muted)}

/* lists inside cards */
.li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 18px;border-top:1px solid var(--line)}
.li:first-child{border-top:0}
.li__d{width:30px;height:30px;border-radius:9px;display:grid;place-items:center}
.li__d svg{width:16px;height:16px}
.li__d.w{background:var(--warn-w);color:var(--warn)} .li__d.c{background:var(--clay-w);color:var(--clay-t)} .li__d.g{background:var(--accent-w);color:var(--accent-t)} .li__d.n{background:rgba(26,34,30,.06);color:var(--ink-2)}
.li b{display:block;font-weight:600;font-size:13.5px;letter-spacing:-.005em}
.li span.s{display:block;font-size:12.5px;color:var(--muted);margin-top:1px;white-space:normal}

/* activity feed */
.feed{list-style:none;margin:0;padding:6px 18px 14px}
.feed li{display:grid;grid-template-columns:52px 14px 1fr;gap:10px;align-items:start;padding:9px 0;position:relative;font-size:13px;color:var(--ink-2)}
.feed li::after{content:'';position:absolute;left:68px;top:26px;bottom:-10px;width:1px;background:var(--line-2)}
.feed li:last-child::after{display:none}
.feed time{font-size:11.5px;color:var(--muted);padding-top:2px;font-variant-numeric:tabular-nums}
.feed .dot{width:9px;height:9px;border-radius:50%;margin-top:5px;margin-left:2px;box-shadow:0 0 0 3px var(--surface)}
.feed .dot.g{background:var(--accent)} .feed .dot.c{background:var(--clay)} .feed .dot.n{background:#A7AEAA} .feed .dot.k{background:var(--sold)}
.feed b{color:var(--ink);font-weight:600}
.feed .m{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------------- the elevation: the release drawn as the building ---------------- */
.elev{position:relative;padding:22px 22px 18px 52px}
.elev__roof{height:12px;margin:0 6px 0 0;border-radius:6px 6px 0 0;background:linear-gradient(180deg,#E9E5DD,#DDD8CE);position:relative}
.elev__roof::after{content:'';position:absolute;left:38%;right:30%;top:-9px;height:9px;border-radius:4px 4px 0 0;background:#E3DED5}
.elev__body{border:1px solid var(--line-2);border-top:0;border-radius:0 0 4px 4px;background:linear-gradient(180deg,#FCFBF8,#F6F3ED);padding:6px}
.flr{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;padding:5px 0}
.flr + .flr{border-top:1px solid rgba(26,34,30,.07)}
.flr__n{position:absolute;left:-44px;top:50%;transform:translateY(-50%);font:500 11px/1 var(--mono);color:var(--muted);width:32px;text-align:right}
.flr--ph{padding-bottom:9px;margin-bottom:3px;border-bottom:2px solid rgba(26,34,30,.12)}
.cell{position:relative;width:100%;height:38px;border-radius:5px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 7px 5px;
  font:500 10.5px/1 var(--mono);transition:transform .18s var(--ease),box-shadow .18s;text-align:left}
.cell::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;border-radius:5px 5px 0 0}
.cell.av{background:linear-gradient(180deg,#F1F8F4,#E1EFE7);color:var(--accent-t);box-shadow:inset 0 0 0 1px rgba(47,122,90,.28)}
.cell.av::before{background:var(--accent)}
.cell.re{background:repeating-linear-gradient(135deg,#F6E6D6 0 4px,#EFD7C0 4px 8px);color:var(--clay-t);box-shadow:inset 0 0 0 1px rgba(192,118,58,.42)}
.cell.re::before{background:var(--clay)}
.cell.so{background:linear-gradient(180deg,#323B37,#262E2A);color:rgba(255,255,255,.78)}
.cell.hb{background:transparent;box-shadow:inset 0 0 0 1px rgba(26,34,30,.1);color:transparent;cursor:default}
.cell.hb::after{content:'';position:absolute;inset:4px;border-radius:3px;background:repeating-linear-gradient(90deg,transparent 0 9px,rgba(26,34,30,.05) 9px 10px)}
.cell:not(.hb):hover{transform:translateY(-2px);box-shadow:0 6px 14px -6px rgba(20,30,25,.35),inset 0 0 0 1px rgba(26,34,30,.25)}
.cell.sel{outline:2px solid var(--ink);outline-offset:2px}
.cell .p{font:600 10px/1 var(--font);letter-spacing:0;opacity:.85}
.cell.dim{opacity:.22}
.elev__ground{height:10px;margin-top:0;background:linear-gradient(180deg,#D8D3C8,#E6E2DA);border-radius:0 0 6px 6px}
.elev__lab{display:flex;justify-content:space-between;margin-top:8px;font-size:11px;color:var(--muted)}
.key{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--ink-2)}
.key span{display:inline-flex;align-items:center;gap:7px}
.key i{width:16px;height:11px;border-radius:3px}
.key .av{background:#E1EFE7;box-shadow:inset 0 0 0 1px rgba(47,122,90,.35),inset 0 2px 0 var(--accent)}
.key .re{background:repeating-linear-gradient(135deg,#F6E6D6 0 3px,#EFD7C0 3px 6px);box-shadow:inset 0 0 0 1px rgba(192,118,58,.45),inset 0 2px 0 var(--clay)}
.key .so{background:var(--sold)}
.key .hb{box-shadow:inset 0 0 0 1px rgba(26,34,30,.2)}
.elev--mini .cell{height:20px;padding:0 4px 3px;font-size:0}
.elev--mini .cell .p{display:none}
.elev--mini .flr{gap:3px;padding:3px 0}
.elev--mini{padding:16px 18px 12px 46px}

/* the floating tooltip */
.tip{position:fixed;z-index:200;pointer-events:none;background:#15201B;color:#fff;border-radius:10px;padding:10px 12px;font-size:12px;line-height:1.45;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.5);opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s;max-width:240px}
.tip.on{opacity:1;transform:none}
.tip b{font-size:13.5px;font-weight:600;display:block}
.tip .k{color:rgba(255,255,255,.66)}
.tip .v{font-variant-numeric:tabular-nums;font-weight:600}

/* charts */
.chart{position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .gl{stroke:rgba(26,34,30,.08);stroke-width:1}
.chart .ax{font:500 10.5px var(--font);fill:var(--muted)}
.chart .lb{font:600 11px var(--font);fill:var(--ink)}
.chart .hit{fill:transparent;cursor:default}
.chart .col{transition:opacity .15s}
.chart .col.dim{opacity:.35}
.hbar{display:grid;grid-template-columns:minmax(80px,auto) 1fr auto;gap:8px 12px;align-items:center;font-size:13px}
.hbar__l{color:var(--ink-2);white-space:nowrap}
.hbar__t{height:9px;border-radius:5px;background:#EEEBE5;overflow:hidden}
.hbar__t i{display:block;height:100%;border-radius:5px;background:var(--accent);transform-origin:left;animation:grow .9s var(--ease) both}
.hbar__t i.c{background:var(--clay)}
.hbar__t i.n{background:#9BA39F}
.hbar__v{font-weight:600;font-variant-numeric:tabular-nums;text-align:right;min-width:52px}
.hbar .hl .hbar__l{color:var(--ink);font-weight:600}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* the funnel: ordered stages, one hue from light to dark */
.fun{display:grid;gap:8px}
.fun__r{display:grid;grid-template-columns:150px 1fr 120px;gap:14px;align-items:center;font-size:13px}
.fun__l b{display:block;font-weight:600} .fun__l span{font-size:12px;color:var(--muted)}
.fun__b{height:30px;border-radius:7px;background:#F1EEE8;position:relative;overflow:hidden}
.fun__b i{position:absolute;left:0;top:0;bottom:0;border-radius:7px;animation:grow 1s var(--ease) both}
.fun__v{text-align:right;font-variant-numeric:tabular-nums}
.fun__v b{font-weight:600;font-size:14px;display:block} .fun__v span{font-size:12px;color:var(--muted)}

/* the pipeline board */
.board{display:grid;grid-template-columns:repeat(5,minmax(196px,1fr));gap:12px;overflow-x:auto;padding-bottom:6px}
.col5{background:rgba(26,34,30,.035);border-radius:14px;padding:10px;min-height:420px;box-shadow:inset 0 0 0 1px var(--line)}
.col5__h{display:flex;align-items:center;gap:8px;padding:4px 6px 10px;font-size:12.5px;font-weight:600}
.col5__h i{width:8px;height:8px;border-radius:50%}
.col5__h em{font-style:normal;color:var(--muted);font-weight:500}
.col5__h span{margin-left:auto;font-size:11.5px;color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
.lead{display:block;width:100%;text-align:left;background:var(--surface);border-radius:11px;padding:12px 12px 11px;margin-bottom:8px;
  box-shadow:var(--sh-1),inset 0 0 0 1px var(--line);transition:box-shadow .2s,transform .2s}
.lead:hover{box-shadow:var(--sh-2),inset 0 0 0 1px var(--line-2);transform:translateY(-1px)}
.lead.sel{box-shadow:0 0 0 2px var(--ink)}
.lead__t{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.lead__t b{font-weight:600;font-size:13.5px;letter-spacing:-.005em}
.lead__u{font-size:12px;color:var(--ink-2);margin-top:3px;display:flex;gap:6px;align-items:center}
.lead__f{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:9px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}
.lead__v{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;font-size:12.5px}
.warm{display:inline-flex;gap:2px}
.warm i{width:5px;height:12px;border-radius:2px;background:#E7E3DB}
.warm i.on{background:var(--clay)}
.nxt{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-2);margin-top:8px}
.nxt svg{width:13px;height:13px;color:var(--muted)}
.nxt.w{color:var(--warn)} .nxt.w svg{color:var(--warn)}

/* progress steps for a reservation */
.steps{display:flex;align-items:center;gap:0;font-size:11px;color:var(--muted)}
.prog{display:grid;gap:6px;min-width:150px}
.prog__d{display:flex;align-items:center}
.prog__d i{width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line-2);flex:none}
.prog__d i.d{background:var(--accent);box-shadow:none}
.prog__d i.n{box-shadow:inset 0 0 0 1.5px var(--ink)}
.prog__d b{flex:1;height:1.5px;background:var(--line-2);margin:0 3px}
.prog__d b.d{background:var(--accent)}
.prog span{font-size:12px;color:var(--ink-2)} .prog span em{font-style:normal;color:var(--muted)}
.steps span{display:flex;align-items:center;gap:5px;white-space:nowrap}
.steps span + span::before{content:'';width:18px;height:1px;background:var(--line-2);margin:0 6px}
.steps span i{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1.5px var(--line-2)}
.steps span.d{color:var(--ink-2)} .steps span.d i{background:var(--accent);box-shadow:none}
.steps span.d i::after{content:'';width:6px;height:3px;border:solid #fff;border-width:0 0 1.5px 1.5px;transform:rotate(-45deg) translate(1px,-1px)}
.steps span.n{color:var(--ink);font-weight:600} .steps span.n i{box-shadow:inset 0 0 0 1.5px var(--ink)}
.cd{display:grid;gap:5px;min-width:130px}
.cd__t{display:flex;justify-content:space-between;font-size:12px}
.cd__t b{font-weight:600}
.cd__b{height:5px;border-radius:3px;background:#ECE9E2;overflow:hidden}
.cd__b i{display:block;height:100%;border-radius:3px;background:var(--accent)}
.cd.w .cd__b i{background:var(--warn)} .cd.w .cd__t b{color:var(--warn)}

/* ---------------- the inspector ---------------- */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(14,22,18,.28);opacity:0;pointer-events:none;transition:opacity .3s;backdrop-filter:blur(1.5px)}
.scrim.on{opacity:1;pointer-events:auto}
.insp{position:fixed;z-index:90;top:calc(var(--topH,0px) + 10px);right:10px;bottom:10px;width:min(452px,calc(100vw - 20px));background:var(--surface);
  border-radius:18px;box-shadow:var(--sh-3);display:flex;flex-direction:column;transform:translateX(calc(100% + 30px));visibility:hidden;
  transition:transform .42s var(--ease),visibility 0s .42s}
.insp.on{transform:none;visibility:visible;transition:transform .42s var(--ease)}
.insp__h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 14px;border-bottom:1px solid var(--line)}
.insp__h small{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
.insp__h h3{margin:0;font-size:21px;font-weight:600;letter-spacing:-.02em}
.insp__x{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;color:var(--ink-2)}
.insp__x:hover{background:rgba(26,34,30,.06)}
.insp__b{flex:1;overflow:auto;padding:18px 20px 22px}
.insp__f{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;background:var(--surface-2);border-radius:0 0 18px 18px}
.insp__img{width:100%;aspect-ratio:16/8.5;object-fit:cover;border-radius:12px;display:block;margin-bottom:16px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-radius:12px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line);margin-bottom:18px}
.facts div{background:var(--surface);padding:10px 12px}
.facts span{display:block;font-size:11.5px;color:var(--muted)}
.facts b{font-weight:600;font-size:14px;font-variant-numeric:tabular-nums}
.sec{margin-top:20px}
.sec__h{font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:9px;display:flex;justify-content:space-between;align-items:center}
.sec__h a,.sec__h button{letter-spacing:0;text-transform:none;font-size:12px;color:var(--accent-t)}
.field{display:flex;gap:8px;align-items:center}
.inp{height:36px;border-radius:9px;padding:0 11px;border:0;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);font-size:14px;min-width:0;flex:1;
  font-variant-numeric:tabular-nums;transition:box-shadow .2s}
.inp:focus{outline:0;box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 3px var(--accent-w)}
select.inp{appearance:none;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236D7671' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;padding-right:30px}
textarea.inp{height:auto;width:100%;padding:10px 11px;resize:vertical;line-height:1.5}
.facts .warm{display:inline-flex;margin-top:4px}
.buyer{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;background:var(--clay-w);margin-bottom:10px}
.buyer b{display:block;font-weight:600} .buyer span{font-size:12.5px;color:var(--clay-t)}
.mini{width:100%;display:block}
.hist{list-style:none;margin:0;padding:0;font-size:12.5px}
.hist li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-top:1px solid var(--line);color:var(--ink-2)}
.hist li:first-child{border-top:0}
.hist b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.tog{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--line);font-size:13px}
.tog:first-child{border-top:0}
.tog span b{display:block;font-weight:600} .tog span small{font-size:12px;color:var(--muted)}
.sw{position:relative;width:38px;height:22px;border-radius:11px;background:#D7D3CB;flex:none;transition:background .2s}
.sw::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .2s var(--ease)}
.sw.on{background:var(--accent)} .sw.on::after{transform:translateX(16px)}
.tl{list-style:none;margin:0;padding:0}
.tl li{position:relative;padding:0 0 14px 22px;font-size:12.5px;color:var(--ink-2)}
.tl li::before{content:'';position:absolute;left:4px;top:5px;width:8px;height:8px;border-radius:50%;background:#C9CEC9}
.tl li::after{content:'';position:absolute;left:7.5px;top:15px;bottom:2px;width:1px;background:var(--line-2)}
.tl li:last-child::after{display:none}
.tl li b{color:var(--ink);font-weight:600}
.tl li time{display:block;font-size:11.5px;color:var(--muted)}
.tl li.g::before{background:var(--accent)} .tl li.c::before{background:var(--clay)}

/* ---------------- toasts and the command palette ---------------- */
.toasts{position:fixed;z-index:300;left:50%;bottom:22px;transform:translateX(-50%);display:grid;gap:8px;justify-items:center;pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;padding:11px 16px 11px 12px;border-radius:12px;background:#15201B;color:#fff;font-size:13px;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.55);animation:tIn .35s var(--ease) both}
.toast i{width:20px;height:20px;border-radius:50%;background:var(--accent);display:grid;place-items:center;flex:none}
.toast i svg{width:12px;height:12px;stroke:#fff;stroke-width:2.4}
.toast.out{animation:tOut .3s ease both}
@keyframes tIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes tOut{to{opacity:0;transform:translateY(8px)}}
.cmdk{position:fixed;inset:0;z-index:250;display:none;align-items:flex-start;justify-content:center;padding-top:14vh;background:rgba(14,22,18,.32);backdrop-filter:blur(2px)}
.cmdk.on{display:flex}
.cmdk__p{width:min(580px,calc(100vw - 32px));background:var(--surface);border-radius:16px;box-shadow:var(--sh-3);overflow:hidden;animation:tIn .25s var(--ease)}
.cmdk__i{display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--line)}
.cmdk__i svg{color:var(--muted)}
.cmdk__i input{flex:1;height:52px;border:0;outline:0;font-size:15px;background:transparent}
.cmdk__l{max-height:360px;overflow:auto;padding:6px}
.cmdk__g{font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;padding:10px 10px 4px}
.cmdk__r{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:9px;text-align:left;font-size:13.5px}
.cmdk__r span{margin-left:auto;font-size:12px;color:var(--muted)}
.cmdk__r.on{background:var(--accent-w)}
.cmdk__r svg{color:var(--muted)}

/* settings */
.set{display:grid;grid-template-columns:240px minmax(0,1fr);gap:28px;padding:22px 0;border-top:1px solid var(--line)}
.set:first-of-type{border-top:0;padding-top:0}
.set h3{margin:0;font-size:14.5px;font-weight:600}
.set p{margin:5px 0 0;font-size:12.5px;color:var(--muted)}
.kv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kv div{padding:12px 14px;border-radius:11px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}
.kv span{display:block;font-size:12px;color:var(--muted)} .kv b{font-weight:600;font-size:14px}
.ok{display:inline-flex;align-items:center;gap:5px;color:var(--accent-t);font-size:12px;font-weight:600}
.ok svg{width:14px;height:14px}
.disc{display:flex;gap:12px;align-items:flex-start;margin-top:22px;padding:14px 16px;border-radius:12px;background:rgba(26,34,30,.035);box-shadow:inset 0 0 0 1px var(--line);
  font-size:12.5px;color:var(--ink-2);line-height:1.55}
.disc svg{color:var(--muted);margin-top:1px}
.disc b{color:var(--ink)}

/* entrance: the first view's cards arrive in a short stagger */
.view.on .card{animation:cIn .55s var(--ease) both}
.view.on .card:nth-child(2){animation-delay:.04s}.view.on .card:nth-child(3){animation-delay:.08s}.view.on .card:nth-child(4){animation-delay:.12s}
.view.on .card:nth-child(5){animation-delay:.16s}.view.on .card:nth-child(6){animation-delay:.2s}.view.on .card:nth-child(7){animation-delay:.24s}
@keyframes cIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------------- responsive ---------------- */
@media (max-width:1240px){
  .s3{grid-column:span 6}
  .ab__me span{display:none}
}
@media (max-width:1080px){
  .s4,.s5,.s6,.s7,.s8{grid-column:span 12}
  .ab__search{max-width:280px}
}
@media (max-width:900px){
  :root{--sw:272px}
  .shell{grid-template-columns:1fr;background:none}
  .sb{position:fixed;left:0;top:calc(var(--topH,0px) + var(--ab));bottom:0;height:auto;z-index:70;width:var(--sw);transform:translateX(-102%);
    transition:transform .35s var(--ease);box-shadow:var(--sh-3)}
  .sb.on{transform:none}
  .ab__burger{display:inline-flex}
  .ab__id{min-width:0}
  .ab__rel,.ab__btn span,.ab__search span,.ab__search kbd{display:none}
  .ab__search{flex:0 0 auto;width:36px;padding:0;justify-content:center;margin:0 0 0 auto}
  .set{grid-template-columns:1fr;gap:12px}
  .kv{grid-template-columns:1fr 1fr}
  .fun__r{grid-template-columns:110px 1fr 84px;gap:10px}
}
@media (max-width:620px){
  .s3{grid-column:span 12}
  .main{padding:20px 14px 48px}
  .ph h1{font-size:23px}
  .ab__me{display:none}
  .ab__btn{padding:0 8px}
  .ab__nm span{display:none}
  .elev{padding:16px 10px 14px 34px}
  .flr__n{left:-30px;width:24px;font-size:10px}
  .cell{height:30px;padding:0 4px 4px;font-size:9px}
  .cell .p{display:none}
  .facts{grid-template-columns:1fr 1fr}
  .kv{grid-template-columns:1fr}
  .insp{top:auto;left:0;right:0;bottom:0;width:100%;height:calc(100vh - 56px);z-index:140;border-radius:18px 18px 0 0;transform:translateY(102%)}
  .scrim{z-index:135}   /* on a phone the sheet rises over the demonstration ribbon too */
}
@media (prefers-reduced-motion:reduce){
  .view,.view.on .card,.hbar__t i,.fun__b i,.toast{animation:none!important}
  .insp,.sb,.cell{transition:none}
}