/* Remuto web — one stylesheet, same tokens as the iPhone app. */
:root{
  /* 13 OCT, FOUNDER: the app's own tokens — Remuto/Core/Theme.swift, converted
     exactly (0–1 RGB → hex), not matched by eye. Names map: background → --bg,
     surface → --card, surfaceRaised → --raised, slate → --card2, border → --line,
     ink → --ink, inkSoft → --soft, inkFaint → --mute, accent → --green,
     inkOnAccent → --green-ink, warn → --amber, bad → --red, info → --info,
     calLeased → --violet, and the Refined calendar colours as --cal-*. */
  --bg:#060d0a;--card:#0f1a14;--raised:#14231b;--card2:#0b1510;--line:#1e2f26;--ink:#edf4ef;--soft:#8fa398;--mute:#8fa398;
  --green:#46d18b;--green-ink:#0a0a0d;--amber:#f5a524;--red:#ff6b6b;--info:#5b9bff;--map:#1f2b33;--violet:#a58cf0;
  --cal-booked:#7fe0a3;--cal-booked-ink:#06120b;--cal-held:#2e6b4a;--cal-held-ink:#e9f2ec;--cal-imported:#3f6fd8;
  --cal-blocked:#222a25;--cal-stripe:#39443d;--cal-blocked-ink:#9aa59e;--cal-available:#f0b36a;--cal-empty:#141a16;
  /* Theme.radiusCard 14 · radiusControl 10 · radiusSheet 18 */
  --radius:14px;--radius-sm:10px;--radius-sheet:18px;--gutter:16px;--nav:60px;--tabbar:64px;
  --hair:#0b1510;--navbg:rgba(6,13,10,.92);--pillbg:#14231b;--btnw:#fff;--btnw-ink:#000;
  --badge:rgba(70,209,139,.13);--badge-amb:rgba(245,165,36,.13);--badge-red:rgba(255,107,107,.13);--badge-grey:#14231b;
  --ph1:#1e2f26;--ph2:#0f1a14;--band:rgba(70,209,139,.22);--past:#34413a;--out:#45524a;--taken:#6b5a47;
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark}
/* 13 OCT, FOUNDER — You › Appearance: System, Light or Dark. Dark is the base. System
   (no data-theme on <html>) follows prefers-color-scheme; data-theme="light" or "dark",
   written by the server from the remembered choice and again by the inline script in
   base.html, wins over the device either way. The two light blocks are one palette,
   kept identical (test_appearance.py), and the same palette as Theme.swift's light
   values. The light green is #0f7743: #14834d measured 4.47:1 on --bg, under AA. */
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){color-scheme:light;
  --bg:#f4f8f5;--card:#ffffff;--raised:#eef4f0;--card2:#eaf1ec;--line:#d3ded7;--ink:#0b1510;--soft:#4b5d53;--mute:#5f7067;
  --green:#0f7743;--green-ink:#ffffff;--amber:#9a5b00;--red:#b8352a;--info:#1f5fd1;--map:#dfe7ec;--violet:#5d3fc4;
  --cal-booked:#7fe0a3;--cal-booked-ink:#06120b;--cal-held:#2e6b4a;--cal-held-ink:#e9f2ec;--cal-imported:#3f6fd8;
  --cal-blocked:#e3e8e5;--cal-stripe:#cfd7d2;--cal-blocked-ink:#4b5d53;--cal-available:#9a5b00;--cal-empty:#eef4f0;
  --hair:#e1e8e3;--navbg:rgba(244,248,245,.94);--pillbg:#e3f4ea;--btnw:#0b1510;--btnw-ink:#ffffff;
  --badge:#dcf2e5;--badge-amb:#fbefd9;--badge-red:#fbe3e0;--badge-grey:#e8eee9;
  --ph1:#cfe0d5;--ph2:#e9f1ec;--band:#d6efe0;--past:#b7c3bb;--out:#a4b1a9;--taken:#b08a68;
}}
:root[data-theme="light"]{color-scheme:light;
  --bg:#f4f8f5;--card:#ffffff;--raised:#eef4f0;--card2:#eaf1ec;--line:#d3ded7;--ink:#0b1510;--soft:#4b5d53;--mute:#5f7067;
  --green:#0f7743;--green-ink:#ffffff;--amber:#9a5b00;--red:#b8352a;--info:#1f5fd1;--map:#dfe7ec;--violet:#5d3fc4;
  --cal-booked:#7fe0a3;--cal-booked-ink:#06120b;--cal-held:#2e6b4a;--cal-held-ink:#e9f2ec;--cal-imported:#3f6fd8;
  --cal-blocked:#e3e8e5;--cal-stripe:#cfd7d2;--cal-blocked-ink:#4b5d53;--cal-available:#9a5b00;--cal-empty:#eef4f0;
  --hair:#e1e8e3;--navbg:rgba(244,248,245,.94);--pillbg:#e3f4ea;--btnw:#0b1510;--btnw-ink:#ffffff;
  --badge:#dcf2e5;--badge-amb:#fbefd9;--badge-red:#fbe3e0;--badge-grey:#e8eee9;
  --ph1:#cfe0d5;--ph2:#e9f1ec;--band:#d6efe0;--past:#b7c3bb;--out:#a4b1a9;--taken:#b08a68;
}
body{background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.4;min-height:100vh}
a{color:var(--green);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{min-width:0;font:inherit;color:var(--ink);background:var(--card2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px 14px;width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green);outline-offset:0;border-color:var(--green)}
label{display:block;font-size:12px;color:var(--mute);letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
.mute{color:var(--mute)}.soft{color:var(--soft)}.small{font-size:13px}.note{font-size:12px;color:var(--mute);line-height:1.4}
.h2{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin:0 0 8px}
h1{font-size:28px;font-weight:800;letter-spacing:-.01em}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.stack{display:flex;flex-direction:column;gap:10px}
.hide{display:none!important}

/* nav */
.nav{height:var(--nav);display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid var(--hair);position:sticky;top:0;background:var(--navbg);backdrop-filter:blur(10px);z-index:20}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;color:var(--ink)}
.logo .mk{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#62DE9E,#3BBE7B);position:relative}
.logo .mk:after{content:"";position:absolute;left:10px;top:7px;border-left:9px solid var(--green-ink);border-top:6px solid transparent;border-bottom:6px solid transparent}
.navl{display:flex;gap:18px;align-items:center;font-size:14px;color:var(--soft)}
.navl a{color:var(--soft)}.navl a.on{color:var(--green);font-weight:700}
.pill{border:1px solid var(--line);background:var(--pillbg);color:var(--green);font-weight:700;font-size:13px;border-radius:999px;padding:7px 12px;white-space:nowrap}
@media (max-width:720px){.navl .tab{display:none}}
/* 13 Oct, founder: the app's tabs on desktop, in the app's order, with its icons. */
.navtabs{display:flex;gap:4px;align-items:center;margin-left:auto;margin-right:10px}
.navtabs a{display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;color:var(--soft);font-size:14px;font-weight:600}
.navtabs a svg{width:20px;height:20px}
.navtabs a.on{color:var(--green);background:var(--badge)}
@media (max-width:720px){.navtabs{display:none}}
.pill.seat{cursor:pointer}
.seatrow{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);margin-top:10px;color:var(--ink)}
.seatrow.on{border-color:var(--green);background:var(--badge)}
.seatrow .mute{grid-column:1}.seatrow .tick{grid-row:1/3;grid-column:2;align-self:center;color:var(--green);font-weight:800}
/* The app's type scale: large title 34, title 24, body 15, caption 13 (Theme.swift / Font.remuto). */
h1{font-size:28px}@media (min-width:721px){h1{font-size:34px}}

/* buttons, chips, segments */
.btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;background:var(--green);color:var(--green-ink);font-weight:800;border-radius:var(--radius-sm);padding:12px 16px;font-size:15px;min-height:46px;text-align:center}
.btn.block{display:flex;width:100%}
.btn.ghost{background:transparent;color:var(--green);border:1px solid var(--line)}
.btn.white{background:var(--btnw);color:var(--btnw-ink)}
.btn[disabled]{opacity:.5;cursor:default}
.btn .sub{font-size:11px;font-weight:600;opacity:.75}
/* 7 Nov, founder: the sign-in's Apple and Google buttons, the same width and height (signin.html). */
.idp{width:100%;max-width:400px;margin:16px auto 0;display:flex;flex-direction:column;gap:10px}
.idp-btn{display:flex;align-items:center;justify-content:center;width:100%;height:40px;min-height:40px;box-sizing:border-box;padding:0 16px;border-radius:999px;background:var(--btnw);color:var(--btnw-ink);font-weight:700;font-size:15px;border:1px solid var(--line)}
.idp-g{width:100%;height:40px;display:flex;justify-content:center;overflow:hidden}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:8px 12px;font-size:13px;font-weight:600;white-space:nowrap;color:var(--ink)}
.chip:disabled{opacity:.4;cursor:default}
.more{display:flex;flex-direction:column;gap:6px;margin:4px 0}.more .h2{margin-top:6px}
.chip.on{border-color:var(--green);color:var(--green)}
.seg{display:inline-flex;background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:3px}
.seg button{padding:8px 14px;border-radius:9px;font-size:13px;font-weight:700;color:var(--mute)}
.seg button.on{background:var(--green);color:var(--green-ink)}
.badge{display:inline-block;background:var(--badge);color:var(--green);font-size:11px;font-weight:800;border-radius:999px;padding:3px 8px;white-space:nowrap}
.badge.amb{background:var(--badge-amb);color:var(--amber)}.badge.red{background:var(--badge-red);color:var(--red)}.badge.grey{background:var(--badge-grey);color:var(--mute)}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.card.tight{padding:10px}
.ph{background:linear-gradient(135deg,var(--ph1),var(--ph2));border-radius:var(--radius-sm);overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover;display:block}
.pc{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:block;color:var(--ink)}
.pc.ext{border-style:dashed}
.pc .ph{height:120px;border-radius:0}
.pc .t{padding:9px 11px 11px}
.pc .p{font-weight:800;font-size:16px}.pc .p span{font-weight:500;font-size:11px;color:var(--mute)}
.pc .a{font-size:13px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc .f{font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc .b{margin-top:7px;font-size:12px;font-weight:800;color:var(--green)}
.pc.ext .b{color:var(--mute)}
.pc.sel{outline:2px solid var(--green)}
.grid>*{min-width:0}
.grid{display:grid;gap:12px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
@media (max-width:720px){.grid.c3{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.grid.c3{grid-template-columns:1fr}}
.grid.c2{grid-template-columns:1fr 1fr}
.grid.inbox{grid-template-columns:1fr 1.6fr}
@media (max-width:860px){
  .grid.c2,.grid.inbox{grid-template-columns:1fr}
  .grid.inbox.threaded>section:first-child{display:none}  /* on a phone the thread is its own page */
}
.list .r{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--badge-grey);font-size:14px}
.list .r:first-child{border-top:0}
.list .r .tx{flex:1;min-width:0}.list .r .tx span{display:block;font-size:12px;color:var(--mute)}
.bar2{height:8px;border-radius:4px;background:var(--line);overflow:hidden}.bar2 i{display:block;height:100%;background:var(--green);transition:width .4s}

/* conversation */
.conv{display:flex;flex-direction:column;gap:8px}
.conv>*{flex:none}
.me{align-self:flex-end;background:var(--green);color:var(--green-ink);border-radius:18px;padding:10px 14px;font-size:15px;font-weight:600;max-width:85%}
.ai{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:10px 14px;font-size:15px;line-height:1.4;max-width:92%}
.ai b{color:var(--green)}
.strip{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.strip .pc{flex:none;width:150px}.strip .pc .ph{height:72px}
.composer{display:flex;align-items:center;gap:8px;background:var(--card2);border:1px solid var(--line);border-radius:18px;padding:6px 6px 6px 14px}
.composer input{border:0;background:transparent;padding:10px 0}
.composer button{color:var(--green);font-weight:800;font-size:18px;width:40px;height:40px;border-radius:50%;background:var(--badge)}
.typing{color:var(--mute);font-size:13px;padding:4px 0}

/* map */
/* 24 Oct: `isolation:isolate` — Leaflet stacks its panes at z-index 200–1000 inside the map, and without a
   stacking context of its own those numbers compete with the page's: the map drew over the Add dates sheet
   (z-index 60) and hid the calendar's first rows on the live Lake St page. Isolated, they stay inside .map. */
.map{background:var(--map);position:relative;z-index:0;isolation:isolate;border-radius:var(--radius);overflow:hidden;min-height:260px}
.map .leaflet-container{background:var(--map)}
.map .mapbadge{position:absolute;left:12px;top:12px;z-index:500;background:var(--navbg);border-radius:999px;padding:7px 12px;font-size:13px;font-weight:700}
.pinlbl{background:#0b0f0c;color:#fff;font-weight:800;font-size:12px;border-radius:999px;padding:4px 9px;border:1px solid #2a3740;white-space:nowrap}
.pinlbl.on{background:var(--green);color:var(--green-ink);border-color:var(--green)}

/* find layout */
.find{display:grid;grid-template-columns:1fr 1.1fr;grid-template-rows:1fr auto;grid-template-areas:"left right" "comp right";gap:0;min-height:calc(100vh - var(--nav))}
.find .left{grid-area:left}.find .right{grid-area:right}.find .comp{grid-area:comp;margin:0 22px 18px}
.find .handle{display:none}
.dock{position:absolute;left:10px;right:10px;bottom:10px;z-index:550;display:flex;flex-direction:column;gap:8px}
.dock .strip .pc{width:132px}.dock .strip .pc .ph{height:44px}.dock .pc .t{padding:6px 9px 8px}.dock .pc .f{display:none}.dock .pc .p{font-size:14px}.dock .pc .b{margin-top:3px}
.dock a,.dock .pc{color:var(--ink)}.dock .pc .b,.dock .detail a{color:var(--green)}
.dock .detail{background:var(--navbg);border:1px solid var(--line);border-radius:14px;padding:10px 12px;font-size:13px}
.find .left{padding:18px 22px;border-right:1px solid var(--hair);display:flex;flex-direction:column;gap:10px}
.find .right{position:sticky;top:var(--nav);height:calc(100vh - var(--nav))}
.find .right .map{height:100%;border-radius:0}
@media (max-width:860px){
  .find{display:flex;flex-direction:column;min-height:0;height:calc(100dvh - var(--nav) - 84px - env(safe-area-inset-bottom))}
  .find .left{order:0;flex:1 1 auto;min-height:120px;overflow-y:auto;border-right:0;padding:12px var(--gutter)}
  .find .handle{display:block;order:1;height:18px;cursor:row-resize;touch-action:none;position:relative}
  .find .handle::after{content:"";position:absolute;left:50%;top:7px;width:36px;height:4px;margin-left:-18px;border-radius:2px;background:var(--line)}
  .find .right{order:2;position:relative;top:0;height:38vh;min-height:33vh;max-height:75vh}
  .find .right .map{min-height:0}
  .find .comp{order:3;margin:8px var(--gutter)}
}
.mapstrip{display:none;position:absolute;inset:0;z-index:600;background:var(--map);align-items:center;justify-content:space-between;padding:0 16px;font-size:13px;color:var(--soft);border-top:1px solid var(--line)}
.mapstrip b{color:var(--ink)}.mapstrip .pull{color:var(--green);font-weight:700}

/* listing page */
.gallery{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:170px 170px;gap:8px}
.gallery .ph:first-child{grid-row:1/3}
@media (max-width:720px){.gallery{display:block}.gallery .ph:first-child{height:230px;border-radius:0;margin:0 calc(-1 * var(--gutter))}.gallery .ph:not(:first-child){display:none}}
.listing{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;padding-top:18px;padding-bottom:40px}
.listing>*{min-width:0}
@media (max-width:860px){.listing{display:block}}
.book{position:sticky;top:calc(var(--nav) + 12px)}
.dates{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dates>*{min-width:0}
input[type=date]{-webkit-appearance:none;appearance:none}
.dates .card{padding:10px}
.lines{font-size:14px;margin-top:12px}
.lines .row{padding:3px 0}
.lines .tot{border-top:1px solid var(--line);margin-top:6px;padding-top:8px;font-weight:800;font-size:16px}
.lines .by{font-size:12.5px;color:var(--mute);margin:-2px 0 3px}
.lines .by.remuto{color:var(--green);font-weight:700}
.lines .taxnote{margin-top:6px}
.err{color:var(--red);font-size:13px}

/* drop zone */
.drop{border:2px dashed var(--line);border-radius:14px;padding:22px;text-align:center;color:var(--mute);font-size:13px}
.drop b{color:var(--ink);display:block;font-size:15px;margin-bottom:4px}
.drop.over{border-color:var(--green);color:var(--green)}

/* footer */
.foot{border-top:1px solid var(--hair);padding-top:22px;padding-bottom:22px;font-size:12px;color:var(--mute);display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}
.foot a{color:var(--mute)}

/* phone tab bar (the app's tabs) — only under 720px, where the nav tabs hide */
.tabbar{display:none}
@media (max-width:720px){
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(56px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--navbg);backdrop-filter:blur(10px);border-top:1px solid var(--hair)}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:600;color:var(--mute)}
  .tabbar a.on{color:var(--green)}
  .tabbar a svg{width:24px;height:24px}
  body{padding-bottom:calc(60px + env(safe-area-inset-bottom))}

}

/* 11 Oct: OpenStreetMap tiles, darkened to the app's ground (CARTO's dark tiles now need a key). */
.osm-dark{filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6)}
/* 11 Oct: ✕ New beside Saved searches; the selected place's card is one link */
.detail-link{display:block;color:inherit;text-decoration:none}
.detail-link .go{color:var(--green);font-weight:600}
.composer .clearx{width:30px;height:30px;font-size:13px;color:var(--mute);background:transparent;border:1px solid var(--line);flex:none}
.composer .clearx.hasText{color:var(--ink);border-color:var(--soft)}
.composer .clearx.off{opacity:.35;cursor:default}
.composer{padding-left:8px}
.chip.on{border-color:var(--green);color:var(--green);background:var(--pillbg)}
.toast{position:fixed;left:50%;bottom:110px;transform:translate(-50%,8px);background:var(--ink);color:var(--bg);padding:10px 12px 10px 14px;border-radius:999px;font-size:13px;font-weight:700;display:flex;gap:12px;align-items:center;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast button{color:#0f6b3a;font-weight:800;background:none;border:0;cursor:pointer}
#mapdetail{display:flex;align-items:center;gap:10px}
#mapdetail .detail-link{flex:1 1 auto;min-width:0}
#mapdetail .go{color:var(--green);font-weight:800;text-decoration:none}
.chev{color:var(--mute);font-size:18px;line-height:1;margin-left:2px}
.pc{position:relative}.pc .chev{position:absolute;right:8px;bottom:8px}
@media (prefers-reduced-motion: reduce){.toast{transition:none}}
.compare-card table{width:100%;border-collapse:collapse;font-size:13px}
.compare-card th{color:var(--mute);font-weight:500;text-align:left;padding:4px 6px 4px 0;width:64px}
.compare-card td{color:var(--soft);padding:4px 6px}
.compare-card .hd td,.compare-card .tot td{color:var(--ink);font-weight:700}
.compare-card .tot td,.compare-card .tot th{border-top:1px solid var(--line);padding-top:8px}
/* 12 Oct: the hosting sheet */
.sheet-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;z-index:60}
.sheet-scrim.hide{display:none}
.sheet-card{background:var(--card);border:1px solid var(--line);border-radius:22px 22px 0 0;width:100%;max-width:480px;padding:20px 18px 26px}
@media (min-width:721px){.sheet-scrim{align-items:center}.sheet-card{border-radius:18px}}
/* 12 Oct: a yes/no question on the booking form — a row, not a field caption. */
.check{display:flex;align-items:center;gap:10px;text-transform:none;letter-spacing:0;font-size:15px;font-weight:600;color:var(--ink);margin:0;cursor:pointer}
.check input{width:20px;height:20px;min-height:0;margin:0;padding:0;accent-color:var(--green)}

/* 12 Oct: one field, one calendar (daterange.js; the app repo's design/ux-v1/one-date-range.html). */
.dr-field{width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;display:flex;align-items:center;gap:12px;color:var(--ink)}
.dr-field .dr-ic{color:var(--green);font-size:18px}
.dr-field .dr-v{flex:1;min-width:0}
.dr-field b{display:block;font-size:17px;font-variant-numeric:tabular-nums}
.dr-field small{color:var(--mute);font-size:12.5px}
.dr-field.empty b{color:var(--mute);font-weight:500}
.dr-field .dr-chev{color:var(--mute)}
/* 24 Oct: 1100 — above the nav (20), the tab bar (30), the toast (50), the hosting sheet (60) and every
   Leaflet pane and control (up to 1000), so the dates sheet is above the map even where .map is not isolated. */
.dr-scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1100;display:flex;align-items:flex-end;justify-content:center}
.dr-sheet{background:var(--card);width:100%;max-width:440px;max-height:94vh;overflow:auto;border-top-left-radius:24px;border-top-right-radius:24px;border:1px solid var(--line);border-bottom:0;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0px)}
@media (min-width:700px){.dr-scrim{align-items:center}.dr-sheet{border-radius:24px;border-bottom:1px solid var(--line)}}
.dr-head{padding:16px 18px 10px;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--line)}
.dr-step{font-size:13px;color:var(--green);font-weight:700}
.dr-sum{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}
.dr-dur{font-size:13px;color:var(--mute);min-height:18px}
.dr-cal{padding:0 12px;touch-action:pan-y}
.dr-mbar{display:flex;align-items:center;justify-content:space-between;height:54px;padding:8px 4px 2px}
.dr-mtitle{font-size:17px;font-weight:800;display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:10px}
.dr-car{color:var(--green);font-size:12px}
.dr-arrows{display:flex;gap:8px}
.dr-arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--card2);font-size:20px;line-height:1}
.dr-arrow:disabled{opacity:.3;cursor:default}
.dr-dow{display:grid;grid-template-columns:repeat(7,1fr);padding:4px 0 2px;font-size:11px;color:var(--mute);text-align:center}
.dr-grid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:4px;padding-bottom:6px}
.dr-d{position:relative;height:44px;font-size:15px;font-variant-numeric:tabular-nums}
.dr-d span{position:relative;z-index:1;display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:50%}
.dr-d:disabled{cursor:default}
.dr-d.past{color:var(--past)}
.dr-d[aria-disabled=true]{cursor:not-allowed}.dr-msg.why{color:var(--amber)}
.dr-d.out{color:var(--out)}
.dr-d.taken{color:var(--taken);text-decoration:line-through}
.dr-d.today span{color:var(--green);font-weight:700}
.dr-d.in::before{content:"";position:absolute;inset:2px 0;background:var(--band)}
.dr-d.start::before{content:"";position:absolute;inset:2px 0 2px 50%;background:var(--band)}
.dr-d.end::before{content:"";position:absolute;inset:2px 50% 2px 0;background:var(--band)}
.dr-d.start.end::before{display:none}
.dr-d.start span,.dr-d.end span{background:var(--green);color:var(--green-ink);font-weight:800}
.dr-mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-top:6px}
.dr-pm{position:relative;border:1px solid var(--line);background:var(--card2);border-radius:12px;padding:14px 0;font-size:15px;font-weight:600}
.dr-pm.on{border-color:var(--green);color:var(--green)}
.dr-pm.has::after{content:"";position:absolute;bottom:6px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--green)}
.dr-pm:disabled{opacity:.3;cursor:default}
.dr-hint{font-size:12px;color:var(--mute);padding:10px 0}
.dr-chipsbox{padding:10px 16px;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line)}
.dr-chiplbl{font-size:12px;color:var(--mute)}
.dr-chipsbox .chip.on{background:var(--green);color:var(--green-ink);border-color:var(--green)}
.dr-foot{border-top:1px solid var(--line);padding:12px 16px 16px;display:flex;gap:10px;align-items:center}
.dr-msg{flex:1;font-size:12.5px;color:var(--mute);min-width:0}
.dr-clear{color:var(--soft);text-decoration:underline;font-size:14px}
.dr-done{min-height:44px}
.dr-done:disabled{opacity:.35;cursor:default}

/* 13 Oct: the listing page's media tabs, the walkthrough tile, the 360° strip and the plan. */
.media-tabs .chip.on{background:var(--green);color:var(--green-ink);border-color:var(--green)}
.play-tile{position:relative}
.play-tile .play{display:block;width:100%;height:100%;padding:0;position:relative;background:#000}
.play-tile .play img{width:100%;height:100%;object-fit:cover;opacity:.85}
.play-tile .play-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.55);border:2px solid #fff;color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;padding-left:4px}
.play-tile.wide{aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden}
.tile-video{width:100%;height:100%;object-fit:cover;background:#000;border-radius:inherit}
.pano{overflow-x:auto;border-radius:var(--radius);-webkit-overflow-scrolling:touch}
.pano img{height:260px;width:auto;max-width:none;display:block}
.walk3d-tile{position:relative;display:block;text-decoration:none}
.walk3d-tile img{width:100%;height:100%;object-fit:cover;display:block}
.walk3d-tile .walk3d-start{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 4px 18px rgba(0,0,0,.35)}
.plan{border-radius:var(--radius);overflow:hidden;background:#fff;touch-action:pinch-zoom}
.plan img{width:100%;display:block}

/* 13 Oct: the Videos tab (the reel stands 9:16) and the host's presenter tile. */
.play-tile.tall{aspect-ratio:9/16;max-width:300px;border-radius:var(--radius);overflow:hidden;margin:0 auto}
.presenter-tile{aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden}
.play-tile .tile-caption{position:absolute;left:12px;bottom:10px;font-weight:800;font-size:15px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.play-tile .ai-mark{position:absolute;right:10px;bottom:10px;font-size:11px;font-weight:700;color:#fff;background:rgba(0,0,0,.55);border-radius:6px;padding:2px 6px}
/* 13 Oct, founder: what each card is. */
.tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:4px}
.kindtag{font:800 10px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em;border-radius:999px;padding:4px 8px;white-space:nowrap}
.kindtag.night{color:var(--green);background:var(--badge)}
.kindtag.long{color:var(--violet);background:color-mix(in srgb,var(--violet) 16%,transparent)}

/* ── 13 Oct, founder: the app's components on the web ─────────────────────── */
/* The app's segmented control (iOS's own): a quiet track, the chosen segment raised. */
.seg.app{background:var(--card2);border-radius:var(--radius-sm);padding:3px;gap:2px}
.seg.app.full{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%}
.seg.app a,.seg.app button,.seg.app .segopt{display:flex;align-items:center;justify-content:center;gap:5px;padding:8px 6px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--soft);text-align:center;white-space:nowrap;min-width:0}
.seg.app a.on,.seg.app button.on,.seg.app .segopt:has(input:checked){background:var(--raised);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.seg.app .ct{color:var(--mute);font-weight:500}
.seg.app .segopt{position:relative;cursor:pointer}.seg.app .segopt input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.amb{color:var(--amber)}.green{color:var(--green)}
h2.title{font-size:24px;font-weight:800;letter-spacing:-.01em}
.scrollx{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.scrollx::-webkit-scrollbar{display:none}

/* Listings cards */
.hostcard{display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;color:var(--ink)}
.hostcard .ph{width:72px;height:72px;border-radius:12px;overflow:hidden}
.hostcard .ph img{width:100%;height:100%;object-fit:cover;display:block}
.hostcard .t{min-width:0;display:flex;flex-direction:column;gap:3px}
.hostcard .t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hostcard .price{font:600 14px ui-monospace,"SF Mono",Menlo,monospace;color:var(--green)}
.status{font-size:12px;border:1px solid var(--line);border-radius:999px;padding:2px 8px;color:var(--soft);white-space:nowrap}
.status.good{color:var(--green);border-color:color-mix(in srgb,var(--green) 45%,transparent)}
.status.amb{color:var(--amber);border-color:color-mix(in srgb,var(--amber) 50%,transparent)}
.chev{color:var(--mute)}
.card.dashed{border-style:dashed;text-align:center;color:var(--green);font-weight:700}

/* The checklist and the location step */
.card.hl{border-color:var(--green);background:color-mix(in srgb,var(--green) 8%,var(--card))}
.checkrow{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line)}
.checkrow:last-child{border-bottom:0}
.checkrow .cnt{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--cal-available);color:var(--cal-available);display:flex;align-items:center;justify-content:center;font:800 11px ui-monospace,Menlo,monospace}
.checkrow .tick{color:var(--green);font-weight:900;text-align:center}
.checkrow .t{min-width:0}
@media (max-width:480px){.checkrow{grid-template-columns:24px 1fr}.checkrow>.mute{grid-column:2}}
.qrbox{margin:10px 0;text-align:center}.qrbox svg{max-width:220px;height:auto;border-radius:10px}
.tickbox{display:flex;gap:10px;align-items:flex-start;text-transform:none;letter-spacing:0;font-size:14px;color:var(--soft);background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 12px}
.tickbox input{width:auto;margin-top:2px}
.card.choice{display:flex;flex-direction:column;gap:3px;color:var(--ink)}
.card.choice.rec{border-color:var(--green);background:color-mix(in srgb,var(--green) 8%,var(--card))}
.card.choice .badge{align-self:flex-start;margin-top:4px}

/* Request cards */
.xbtn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);color:var(--soft);font-size:15px;display:flex;align-items:center;justify-content:center}
.datesbtn{display:flex;justify-content:space-between;gap:8px;width:100%;margin:10px 0 4px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card2);text-align:left}

/* Calendar, layout C — the Refined colours (Theme.cal*) */
.calgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.calgrid .dow{font:600 11px ui-monospace,Menlo,monospace;color:var(--mute);text-align:center}
.cday{min-height:52px;border-radius:10px;background:var(--cal-empty);padding:5px 3px;display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;overflow:hidden}
.cday .n{font-size:14px}.cday .lbl{font-size:9.5px;font-weight:800;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cday.booked{background:var(--cal-booked);color:var(--cal-booked-ink)}
.cday.held{background:var(--cal-held);color:var(--cal-held-ink);box-shadow:inset 0 0 0 1.5px var(--cal-held);outline:1.5px dashed var(--cal-booked);outline-offset:-4px}
.cday.imported{background:var(--cal-imported);color:#fff}
.cday.blocked{background:repeating-linear-gradient(135deg,var(--cal-blocked) 0 4px,var(--cal-stripe) 4px 6px);color:var(--cal-blocked-ink)}
.cday.today{box-shadow:inset 0 0 0 2px var(--ink)}
.cday.past{opacity:.55}
a.cday{color:inherit;text-decoration:none}
.cday .n.busy{border:1.5px solid currentColor;border-radius:50%;padding:0 4px;line-height:1.2}
.cday .mn{font:700 9px ui-monospace,Menlo,monospace;opacity:.8}
.cday .lbl.custom{text-decoration:underline;text-decoration-thickness:1.5px}
.cday.gap{outline:1.5px dashed var(--amber,#b7791f);outline-offset:-3px}
.cday.double{box-shadow:inset 0 0 0 2px var(--red,#c0392b)}
.cday.picked{box-shadow:inset 0 0 0 2px var(--green)}
.cday .nd{position:absolute;top:4px;right:4px;width:5px;height:5px;border-radius:50%;background:var(--green)}
.cday .dots{display:flex;gap:3px}.cday .dots i{width:7px;height:7px;border-radius:50%;background:var(--cal-booked)}
.cday .dots i.held{background:var(--cal-held);box-shadow:inset 0 0 0 1px var(--cal-booked)}
.cday .dots i.imported{background:var(--cal-imported)}.cday .dots i.blocked{background:var(--cal-stripe)}
.legend{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;font-size:12px;color:var(--soft)}
.legend span{display:flex;gap:5px;align-items:center}
.legend .sw{width:12px;height:12px;border-radius:3px;display:inline-block}
.sw.booked{background:var(--cal-booked)}.sw.held{background:var(--cal-held);outline:1.5px dashed var(--cal-booked);outline-offset:-3px}
.sw.imported{background:var(--cal-imported)}.sw.blocked{background:repeating-linear-gradient(135deg,var(--cal-blocked) 0 3px,var(--cal-stripe) 3px 5px)}
.chip.avail{border-color:var(--cal-available);color:var(--cal-available);background:transparent}
@media print{.nav,.tabbar,.foot,.chips .btn,.chips .chip{display:none!important}}
/* Looking's Stay / Rent — the app's own Find control: full width, the chosen half filled with the accent. */
.seg.find.full{display:grid;grid-template-columns:1fr 1fr;width:100%;background:var(--card);border-radius:var(--radius-sm);padding:3px}
.seg.find button{padding:10px;font-size:15px}
.seg.find button.on{background:var(--green);color:var(--green-ink)}

/* 13 OCT — the theme control (_theme.html): the app's grey segmented look. On phones it lives in
   You and the seat sheet; on desktop it sits in the top bar beside the seat pill. */
.seg.theme{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;background:var(--card2);border:1px solid var(--line);border-radius:var(--radius-sm);padding:3px}
.seg.theme .segopt{display:block;text-align:center;padding:7px 12px;border-radius:8px;font-size:13px;font-weight:700;color:var(--soft);text-decoration:none}
.seg.theme .segopt.on{background:var(--raised);color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.seg.theme.full{display:grid;width:100%}
.nav .seg.theme{margin-right:10px}
@media (max-width:720px){.seg.theme.wide-only{display:none}}

/* 13 OCT — the Stay Guide (/g/{token}, g.html), as the approved mock: a hero, sticky section
   chips under the top bar, one card per section. Tokens only, so light and dark both hold. */
.guide{max-width:640px;margin:0 auto;padding-bottom:40px}
.ghero{padding:28px var(--gutter) 18px;background:linear-gradient(160deg,var(--band),var(--bg))}
.ghero .gk{font:800 11px ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.1em;color:var(--green)}
.ghero h1{font-size:28px;margin:4px 0 2px}
.ghero p{color:var(--soft);font-size:14px}
.gchips{position:sticky;top:var(--nav);z-index:10;display:flex;gap:6px;overflow-x:auto;padding:10px var(--gutter);background:var(--bg);border-bottom:1px solid var(--line);scrollbar-width:none}
.gchips::-webkit-scrollbar{display:none}
.gchips a{flex:none;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;color:var(--soft);background:var(--card)}
.gchips a.on{background:var(--green);border-color:var(--green);color:var(--green-ink)}
.gbody{padding:14px var(--gutter);display:flex;flex-direction:column;gap:12px}
.gsec{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:9px;scroll-margin-top:calc(var(--nav) + 64px)}
.gsec h2{font-size:17px;font-weight:800;display:flex;align-items:center;gap:8px}
.gsec h2 i{font-style:normal}
.gsec p,.gsec li{font-size:14.5px;color:var(--soft);line-height:1.45}
.gsec li b,.gsec p b{color:var(--ink)}
.gsec ol,.gsec ul{padding-left:20px;display:flex;flex-direction:column;gap:5px}
.gsec a{color:var(--green);font-weight:600}
.gsec a.btn{color:var(--green-ink)}.gsec a.btn.ghost{color:var(--green)}
.gkv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14.5px;align-items:center}
.gkv.three{grid-template-columns:auto minmax(0,1fr) auto}
.gkv>span:nth-child(odd){color:var(--mute)}
.gkv.three>span{color:var(--mute)}
.gkv b{overflow-wrap:anywhere}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace}
.gbtns{display:flex;gap:8px;flex-wrap:wrap}
.gbtns .btn{min-height:42px;padding:10px 14px;font-size:14px}
.glock{background:var(--badge-amb);border:1px dashed var(--amber);color:var(--amber);border-radius:12px;padding:10px 12px;font-size:14px}
.gcode{display:flex;flex-direction:column;gap:2px;background:var(--badge);border-radius:12px;padding:10px 12px}
.gcode b{font:800 28px ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.2em;color:var(--green)}
.gpick{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:14.5px}
.gpick:first-of-type{border-top:0}
.gpick small{display:block;color:var(--mute);font-size:13px}
.gic{width:38px;height:38px;border-radius:10px;background:var(--card2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none}
.gdone{color:var(--green)!important;font-weight:700}
.gfoot{text-align:center;font-size:12px;color:var(--mute);padding:6px 0 10px}
.guide #shop{margin-top:0!important;border-radius:16px}

/* 14 Oct — the trip-texts consent under the phone field: small print beside an unticked box. */
.check.smsok{align-items:flex-start;font-weight:400;font-size:13.5px;color:var(--soft);line-height:1.4}
.check.smsok input{flex:none;margin-top:1px}


/* 19 OCT, FOUNDER — FIND REDESIGN (item 7, designs 13 and 14). Scoped .fx; the old .find
   rules above stay for nothing else and can go once this has shipped. */
.fx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);min-height:calc(100vh - var(--nav))}
.fx-left{padding:18px 22px 40px;border-right:1px solid var(--hair);display:flex;flex-direction:column;gap:14px;min-width:0}
.fx-top{display:flex;flex-direction:column;gap:10px}
.fx-seg{display:flex}.fx-seg button{flex:1;padding:10px 14px;font-size:14px}
.fx-box{display:flex;align-items:center;gap:6px;background:var(--card);border:1.5px solid var(--green);border-radius:16px;padding:6px 6px 6px 14px}
.fx-box input{border:0;background:transparent;padding:10px 0;font-size:16px}
.fx-box input:focus{outline:none}
.fx-spark{color:var(--green);font-size:18px}
.fx-box button{flex:none;width:40px;height:40px;border-radius:50%;color:var(--soft);font-size:15px}
.fx-box .fx-send{background:var(--badge);color:var(--green);font-weight:800;font-size:18px}
.fx-box .fx-clear{width:32px;height:32px;border:1px solid var(--line);font-size:12px;color:var(--ink)}
.fx-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.fx-chips .chip{min-height:40px}
.fx-pickrow{display:flex;justify-content:space-between;align-items:center;width:100%;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;font-weight:700;font-size:15px;text-align:left}
.fx-pickrow span:last-child{color:var(--green)}
.fx-start{display:flex;flex-direction:column;gap:10px}
.fx-examples{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.fx-examples button{font-size:16px;padding:8px 0;text-align:left;color:var(--ink)}
.fx-results{display:flex;flex-direction:column;gap:12px}
.fx-grab{display:none}
.fx-reply{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:10px}
.fx-reply-h{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--green)}
.fx-reply-line{text-align:left;font-size:15px;line-height:1.45;color:var(--ink)}
.fx-reply .chip{border-color:var(--green);color:var(--green)}
.fx-reply .fx-new{align-self:flex-start;border-color:var(--line);color:var(--soft)}
.fx-count{align-items:center}
.fx-sort{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;letter-spacing:0;text-transform:none;color:var(--green);font-weight:700}
.fx-sort select{width:auto;padding:6px 10px}
.fx-cards{display:flex;flex-direction:column;gap:18px}
.fx-card{display:flex;flex-direction:column;gap:8px;border-radius:16px}
.fx-card.sel .fx-photos{outline:2px solid var(--green);outline-offset:2px}
.fx-photos{position:relative;height:220px;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,var(--raised),var(--card));cursor:pointer}
.fx-track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.fx-track img{flex:none;width:100%;height:100%;object-fit:cover;scroll-snap-align:start}
.fx-verified{position:absolute;left:10px;top:10px;background:var(--navbg);color:var(--ink);font-size:12px;font-weight:800;border-radius:999px;padding:5px 10px}
.fx-heart{position:absolute;right:10px;top:10px;width:44px;height:44px;border-radius:50%;background:var(--navbg);font-size:20px;color:var(--ink)}
.fx-card-t{display:flex;flex-direction:column;gap:3px;color:var(--ink)}
.fx-street{font-size:17px}
.fx-price{font-size:15px}.fx-price .soft{font-size:13px}
.fx-summary{font-size:14px}
.fx-right{position:sticky;top:var(--nav);height:calc(100vh - var(--nav))}
.fx-right .map{height:100%;border-radius:0}
.fx-here{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:600;background:var(--btnw);color:var(--btnw-ink);font-weight:700;font-size:14px;border-radius:999px;padding:10px 16px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.fx-maplist{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabbar) + 18px + env(safe-area-inset-bottom));z-index:700;background:var(--btnw);color:var(--btnw-ink);font-weight:800;border-radius:999px;padding:12px 22px;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.fx-dialog{margin:auto;width:min(560px,calc(100vw - 32px));max-height:min(80vh,760px);background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-sheet);padding:16px;overflow:auto}
.fx-dialog::backdrop{background:rgba(0,0,0,.5)}
/* 20 Oct: Hosting's ✦ Help — bottom right, above the phone tab bar, out of the way of a typing keyboard */
.helpfab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;background:var(--green);color:var(--green-ink);font-weight:800;border-radius:999px;padding:12px 18px;box-shadow:0 6px 18px rgba(0,0,0,.3);text-decoration:none}
@media (max-width:720px){.helpfab{bottom:calc(var(--tabbar,56px) + 14px + env(safe-area-inset-bottom))}}
body.typing .helpfab{display:none}
body:has(.helpfab) main{padding-bottom:84px}
/* 20 Oct: Find's compact chip sheets — half height on a phone, a panel on a computer */
.fx-chipsheet .row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cs-body{display:flex;flex-direction:column;gap:18px;margin-top:14px}
.cs-body h3{font-size:17px;font-weight:700;margin:0}
.cs-body .cs-big{font-size:24px;font-weight:800}
.cs-body .cs-row{display:flex;flex-wrap:wrap;gap:8px}
.cs-body .cs-step{display:flex;align-items:center;justify-content:space-between;font-size:15px}
.cs-body .cs-step span{display:flex;align-items:center;gap:12px}
.cs-body .cs-step button{width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:20px}
.cs-body input[type=range]{width:100%;accent-color:var(--green)}
.cs-body input[type=date]{font:inherit;padding:10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--ink)}
.cs-body .cs-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--soft)}
.cs-body .cs-link{background:none;border:0;color:var(--green);font-weight:700;padding:0;text-align:left}
@media (max-width:720px){.fx-chipsheet{margin:auto 0 0;width:100vw;max-width:100vw;max-height:55vh;border-radius:var(--radius-sheet) var(--radius-sheet) 0 0}.fx-chipsheet.tall{max-height:92vh}}
.fx-conv{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.fx-conv .me{align-self:flex-end;background:var(--green);color:var(--green-ink);border-radius:16px;padding:9px 13px;max-width:85%}
.fx-conv .ai{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:10px 13px;max-width:90%}
.fx-diff{background:var(--card);border-radius:var(--radius);padding:14px;margin:12px 0}
.fx-diff p{margin-top:4px;font-size:15px}
.fx-table{width:100%;border-collapse:collapse;font-size:14px;background:var(--card);border-radius:var(--radius);overflow:hidden}
.fx-table th,.fx-table td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.fx-table th[scope=row]{color:var(--soft);font-weight:600}
.fx-askboth{display:flex;gap:8px;margin-top:14px}
.fx-askboth .btn{flex:none}
.fx-bookrow{margin-top:12px}.fx-bookrow .btn{flex:1;text-align:center}
@media (max-width:860px){
  .fx{display:flex;flex-direction:column;position:relative;min-height:0;height:calc(100dvh - var(--nav) - var(--tabbar) - env(safe-area-inset-bottom))}
  .fx-left{display:contents}
  .fx-top{padding:12px var(--gutter) 10px}
  .fx-start{padding:0 var(--gutter) 12px}
  .fx-right{position:relative;top:0;flex:1 1 auto;height:auto;min-height:140px}
  .fx-results{position:absolute;left:0;right:0;bottom:0;z-index:650;background:var(--bg);border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;border-top:1px solid var(--line);padding:0 var(--gutter) 90px;overflow-y:auto;transition:height .25s ease;height:50%}
  .fx[data-sheet="peek"] .fx-results{height:150px;overflow:hidden}
  .fx[data-sheet="full"] .fx-results{height:calc(100% - 4px)}
  .fx-grab{display:block;position:sticky;top:0;height:22px;margin:0 calc(-1 * var(--gutter));background:var(--bg);cursor:row-resize;touch-action:none;z-index:1}
  .fx-grab::after{content:"";position:absolute;left:50%;top:8px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--line)}
}
@media (prefers-reduced-motion:reduce){.fx-results{transition:none}}
.fx-kind{align-self:flex-start;margin-bottom:2px}

/* 20 Oct, founder: the listing page — carousel with a count, amenity tiles, ✦ Ask, host card, pinned total */
.carousel-wrap{position:relative}
.carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--radius);gap:0}
.carousel::-webkit-scrollbar{display:none}
.carousel .slide{flex:0 0 100%;height:360px;scroll-snap-align:start;border-radius:0}
.carousel .slide img{width:100%;height:100%;object-fit:cover;display:block}
.carousel .slide.empty{background:linear-gradient(135deg,var(--raised),var(--card))}
.carousel-wrap .count{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.62);color:#fff;font-size:12px;font-weight:600;border-radius:8px;padding:3px 9px}
.cnav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#0b1510;font-size:20px;line-height:1;cursor:pointer}
.cnav.prev{left:10px}.cnav.next{right:10px}
@media (max-width:720px){.carousel{border-radius:0;margin:0 calc(-1 * var(--gutter))}.carousel .slide{height:280px}.cnav{display:none}}
.amens{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:8px}
.amen{display:flex;align-items:center;gap:10px;font-size:14.5px}
.tile{width:34px;height:34px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;font-size:17px;flex:none}
.tone-green{background:#e3f3ea}.tone-amber{background:#fdf0dc}.tone-blue{background:#e5edfb}.tone-rose{background:#fbe6e6}.tone-violet{background:#efe6fb}.tone-teal{background:#e0f4f6}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tone-green{background:rgba(70,209,139,.16)}:root:not([data-theme="light"]) .tone-amber{background:rgba(245,165,36,.16)}:root:not([data-theme="light"]) .tone-blue{background:rgba(91,155,255,.16)}:root:not([data-theme="light"]) .tone-rose{background:rgba(255,107,107,.16)}:root:not([data-theme="light"]) .tone-violet{background:rgba(165,140,240,.18)}:root:not([data-theme="light"]) .tone-teal{background:rgba(64,200,210,.16)}}
:root[data-theme="dark"] .tone-green{background:rgba(70,209,139,.16)}:root[data-theme="dark"] .tone-amber{background:rgba(245,165,36,.16)}:root[data-theme="dark"] .tone-blue{background:rgba(91,155,255,.16)}:root[data-theme="dark"] .tone-rose{background:rgba(255,107,107,.16)}:root[data-theme="dark"] .tone-violet{background:rgba(165,140,240,.18)}:root[data-theme="dark"] .tone-teal{background:rgba(64,200,210,.16)}
.askcard{background:var(--raised);border-radius:16px;padding:14px;margin-top:18px}
.hostcard{display:flex;gap:14px;align-items:flex-start}
.hostcard .avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:none;background:var(--badge);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:22px;color:var(--green)}
.hostcard .avatar img{width:100%;height:100%;object-fit:cover}
.check-line{font-size:13.5px;margin-top:6px}.check-line .ok{color:var(--green);font-weight:800}
#reviews .rev{border-top:1px solid var(--line);margin-top:10px;padding-top:10px;font-size:14px}
#reviews .rev p{margin-top:4px}
.pinbar{display:none}
@media (max-width:860px){
  .pinbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:29;align-items:center;justify-content:space-between;gap:12px;padding:10px var(--gutter);background:var(--card);border-top:1px solid var(--line)}
  .pinbar .btn{white-space:nowrap}
  .listing{padding-bottom:84px}
}
@media (max-width:720px){.pinbar{bottom:calc(56px + env(safe-area-inset-bottom))}}

/* 20 Oct, founder (17-FindConversation): the ✦ conversation, full screen. The typing bar is the
   dialog's last row, so it never covers a message or a card; the conversation scrolls above it. */
.fx-dialog.fx-convo{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0;padding:0;
  display:none;flex-direction:column;overflow:hidden}
.fx-dialog.fx-convo[open]{display:flex}
.fx-convo-top{padding:12px var(--gutter);border-bottom:1px solid var(--line);align-items:center}
.fx-convo-gap{width:64px}
.fx-convo #cchips{padding:8px var(--gutter);margin:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.fx-convo #cchips::-webkit-scrollbar{display:none}
.fx-convo #cchips .chip{flex:none}
.fx-convo .fx-conv{flex:1 1 auto;overflow-y:auto;margin:0;padding:12px var(--gutter) 20px}
.fx-convo-box{margin:0;border-radius:0;border-left:0;border-right:0;border-bottom:0;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom))}
@media (min-width:861px){.fx-convo .fx-conv,.fx-convo #cchips,.fx-convo-box{padding-left:calc(50vw - 360px);padding-right:calc(50vw - 360px)}}
.fx-conv .note{font-size:13px;color:var(--soft)}
.fx-conv .fx-ex{background:none;border:0;color:var(--green);font:inherit;cursor:pointer;padding:2px 0;text-align:left}
.fx-clearall{border-style:dashed}
.fx-q{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.fx-q-h{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--soft);text-transform:uppercase}
.fx-progress{display:flex;gap:8px;align-items:center;font-size:11.5px;font-weight:800;color:var(--soft);width:100%}
.fx-progress i{flex:1;height:4px;background:var(--raised);border-radius:4px;overflow:hidden;display:block}
.fx-progress i b{display:block;height:100%;background:var(--green)}
.fx-shownow{color:var(--green);font-weight:700}
.fx-pick{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
.fx-fit{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:none}
.fx-fit::-webkit-scrollbar{display:none}
.fx-fitcard{flex:0 0 86%;max-width:360px;scroll-snap-align:start;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px;display:flex;flex-direction:column;gap:6px}
.fx-fitphoto{position:relative;display:block;height:180px;border-radius:14px;overflow:hidden;background:var(--raised)}
.fx-fitphoto img{width:100%;height:100%;object-fit:cover}
.fx-fitphoto .count{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.6);color:#fff;font-size:11.5px;border-radius:8px;padding:2px 8px}
.fx-fitt{font-size:16px}
.fx-amen{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--soft)}
.fx-amen span{display:inline-flex;gap:5px;align-items:center}
.fx-amen .tile{width:22px;height:22px;border-radius:7px;font-size:12px;font-style:normal}
.fx-why{font-size:13.5px}
.fx-fitbtns{gap:8px}.fx-fitbtns .btn{flex:1;text-align:center}
.fx-which .fx-table td.yes{color:var(--green);font-weight:800;text-align:center}
.fx-which .fx-table td.no{color:var(--soft);text-align:center}
.fx-problem{border-color:var(--amber)!important}
.fx-problem p{margin:4px 0 8px;color:var(--soft);font-size:13.5px}
/* Nothing in the conversation shrinks: a scroll row (the cards, the chips) in a fixed-height flex
   column otherwise collapses to nothing — the cards drew as a hairline and the chips were cut. */
.fx-convo > *{flex-shrink:0}
.fx-convo > .fx-conv{flex:1 1 auto;min-height:0}
.fx-conv > *{flex-shrink:0}
.fx-convo #cchips{overflow-y:hidden;align-items:center;min-height:60px;position:relative;z-index:2;background:var(--bg)}

/* 30 Oct (rent and books, mockup 34): the rent roll, the tenant ledger, expenses and reports. Existing tokens only. */
.badge.info{background:var(--badge-grey);color:var(--info)}
.bk-seg{overflow-x:auto;white-space:nowrap}
.bk-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.bk-tile{border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px;background:var(--card)}
.bk-tile b{display:block;font-size:20px}
.bk-bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--line);margin-top:12px}
.bk-bar span{display:block;height:100%}
.bk-table{width:100%;border-collapse:collapse;font-size:14px}
.bk-table th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:800;padding:6px 8px;border-bottom:1px solid var(--line)}
.bk-table td{padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.bk-table td.num,.bk-table th.num{text-align:right;white-space:nowrap}
.bk-group td{background:var(--card2);font-weight:800;font-size:13px}
.bk-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.bk-actions form{margin:0}
.bk-actions .chip{min-height:32px}
.bk-switch{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);min-height:44px}
.bk-switch input[type=checkbox]{width:22px;height:22px;accent-color:var(--green);flex:none}
.bk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bk-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.bk-tabs-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between}
details.bk-act{border-top:1px solid var(--line);padding:10px 0}
details.bk-act summary{cursor:pointer;font-weight:700;min-height:28px}
@media (max-width:720px){
  .bk-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bk-two,.bk-grid{grid-template-columns:minmax(0,1fr)}
  .bk-table.bk-stack thead{display:none}
  .bk-table.bk-stack tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}
  .bk-table.bk-stack td{display:flex;justify-content:space-between;gap:10px;border:0;padding:3px 0}
  .bk-table.bk-stack td[data-label]::before{content:attr(data-label);color:var(--mute);font-size:12px}
  .bk-table.bk-stack tr.bk-group td{display:block;padding:8px}
}