:root{
    --ink-900:#2B2420;
    --ink-800:#4A4137;
    --ink-700:#6B6152;
    --panel:#FFFDF6;
    --paper:#FDF8EB;
    --paper-dim:#F0E8D2;
    --line:#E3D7B8;
    --line-bright:#CBB98A;
    --mint:#8FCFC0;
    --mint-dark:#5FA894;
    --coral:#E8623D;
    --coral-bright:#F0805E;
    --brand-blue:#1863E6;
    --brand-blue-dark:#0F49B3;
    --brand-green:#22B24C;
    --brand-green-dark:#178A39;
    --brand-red:#D6392E;
    --brand-red-dark:#A82A21;
    --text:#2B2420;
    --text-dim:#8A7F6E;
    --c-single:#8FCAEA;
    --c-condo:#E3AC5C;
    --c-multi:#A9D99F;
    --c-commercial:#EFA17E;
    --c-land:#DCCFA6;
    --status-active:#7CBB8E;
    --status-pending:#E3AC5C;
    --status-sold:#B8AC94;
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;
    --font-poster:'Bodoni Moda', 'Bodoni MT', Didot, 'Playfair Display', serif; 
  }
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; overflow:hidden; overscroll-behavior:none; touch-action:none;}
body{
    background:var(--paper);
    color:var(--text);
    font-family:var(--font-body);
    background-image:
      radial-gradient(var(--line) 1.1px, transparent 1.1px);
    background-size:22px 22px;
  }
#loading-overlay{
    position:fixed; inset:0; z-index:9999;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    background:var(--paper);
    transition:opacity 0.4s ease;
  }
#loading-overlay.hidden{ opacity:0; pointer-events:none; }
.loading-symbol{ width:104px; height:108px; animation:loading-bounce 1.1s ease-in-out infinite; }
.loading-symbol svg{ display:block; width:100%; height:100%; }
@keyframes loading-bounce{
    0%, 100% { transform:translateY(0) scale(1); }
    50% { transform:translateY(-14px) scale(1.08); }
  }
.loading-text{
    font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--text-dim);
    letter-spacing:0.3px;
  }
::selection{ background:var(--coral); color:var(--panel); }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--line-bright); border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background:var(--mint-dark); }
#app{ display:grid; grid-template-columns:minmax(0, 1fr); grid-template-rows:50px 1fr; height:100vh; height:100dvh; }
header{
    grid-column:1 / -1;
    position:relative; z-index:5; 
    
    display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
    padding:0 10px; gap:6px;
    border-bottom:2px solid var(--ink-900);
    background:var(--panel);
    z-index:20;
    overflow:hidden; min-width:0; 
  }
.count-badge{ display:none; }
.demo-badge{
    white-space:nowrap;
    border:2px solid var(--mint-dark); color:var(--mint-dark); background:rgba(143,207,192,0.15);
    padding:4px 10px; border-radius:14px; letter-spacing:1px; text-transform:uppercase; font-size:13px; font-weight:600;
    flex-shrink:0;
  }
#canvas-wrap{
    position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--paper);
  }
#three-canvas{ display:block; width:100%; height:100%; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }

#stop-tour-btn{
    display:none; position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:30;
    background:var(--coral); color:#fff; border:2.5px solid var(--ink-900); border-radius:24px;
    padding:10px 22px; font-family:var(--font-display); font-weight:700; font-size:14px;
    cursor:pointer; box-shadow:3px 3px 0 rgba(43,36,32,0.3);
  }
#stop-tour-btn:active{ transform:translateX(-50%) translateY(2px); box-shadow:1px 1px 0 rgba(43,36,32,0.3); }
body.tour-active #stop-tour-btn{ display:block; }
#sign-overlay-layer{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:6; }
.sign-tag{
    position:absolute; top:0; left:0; pointer-events:none;
    background:#FDF8EB; border:2px solid #2B2420; border-radius:6px;
    padding:2px 6px; text-align:center; white-space:nowrap;
    font-family:'Space Grotesk', sans-serif;
    box-shadow:2px 2px 0 rgba(43,36,32,0.15);
    will-change:transform;
  }
.sign-tag .sign-name{ font-weight:700; font-size:13px; color:#2B2420; line-height:1.3; }
.sign-tag .sign-price{ font-weight:600; font-size:12px; line-height:1.3; }
.sign-tag.visited{ border-color:#2e8b3d; }
.sign-tag.visited .sign-name{ color:#173d1c; }
.sign-photo{
    position:absolute; top:0; left:0; pointer-events:none;
    width:64px; height:64px; background:#EFE6CC;
    border:2.5px solid #2B2420; border-radius:8px; overflow:visible;
    box-shadow:2px 2px 0 rgba(43,36,32,0.15);
    will-change:transform;
  }
.sign-photo img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:5.5px; }
.header-btn{
    display:flex; align-items:center; gap:5px; flex-shrink:0;
    border:2px solid var(--ink-900); border-radius:10px;
    padding:4px 8px; font-family:var(--font-display); font-weight:700; font-size:13px;
    letter-spacing:0.2px; cursor:pointer; white-space:nowrap;
    box-shadow:2px 2px 0 rgba(43,36,32,0.25);
    transition:transform .1s ease, box-shadow .1s ease;
  }
.header-btn:hover{ transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(43,36,32,0.25); }
.header-btn:active{ transform:translate(2px,2px); box-shadow:0 0 0 rgba(43,36,32,0.25); }
#tour-icon, #list-icon{ font-size:17px; line-height:1; }
.menu-current{ background:var(--mint); }
#hammer-btn{ background:var(--paper); color:var(--ink-900); width:32px; height:32px; padding:0; justify-content:center; font-size:18px; }
#hammer-btn.active{ background:var(--coral); box-shadow:2px 2px 0 rgba(43,36,32,0.25), 0 0 0 3px rgba(232,98,61,0.35); }
.header-tools{ display:flex; align-items:center; gap:7px; flex-shrink:0; }
.header-spacer{ width:34px; height:34px; }   /* as wide as the menu button, so the logo stays centred */
.header-center{ display:flex; align-items:center; gap:8px; min-width:0; overflow:hidden; justify-content:center; }
#menu-btn{ width:34px; height:34px; padding:0; justify-content:center; font-size:19px; background:var(--paper); color:var(--ink-900); }
/* The logo takes whatever room the buttons leave: it never overlaps them, it scales down in proportion (never
   stretched) and stops at 280px wide on big screens. On narrow screens the right side stops reserving the left
   side's width, which gives the logo about 40px more. */
#brand-logo{ max-height:34px; max-width:min(280px, 100%); width:auto; height:auto; display:block; object-fit:contain; }
#main-menu{
    display:none; position:fixed;
    
    top:58px; max-height:calc(100vh - 70px); max-height:calc(100dvh - 70px); overflow-y:auto;   /* as tall as its contents, up to the screen */
    background:var(--panel); border:2.5px solid var(--ink-900); border-radius:12px;
    box-shadow:3px 3px 0 rgba(43,36,32,0.25);
    flex-direction:column; padding:6px; gap:2px; min-width:210px; z-index:1000;
  }
#main-menu.open{ display:flex; }
/* The menu is a hierarchy: Home and Search on top, then labelled categories (Navigation, Interactive, Support)
   whose buttons are indented under their label. It is one tall column when the window is tall enough to show all
   of it (Theme list open included). On a shorter, wide window (a PC or phone in landscape) it opens to the RIGHT
   instead: the Interactive and Support categories become a second column beside the first, so nothing is cut off. */
.main-menu-col{ display:contents; }
.main-menu-category{
    display:flex; align-items:center; gap:10px; padding:7px 10px 3px;
    font-family:var(--font-mono); font-weight:600; font-size:13px; letter-spacing:1.4px; text-transform:uppercase;
    color:var(--text-dim);
  }
.main-menu-category span:first-child{ font-size:17px; line-height:1; flex-shrink:0; letter-spacing:0; }
.main-menu-group .main-menu-item{ padding-left:38px; }
.main-menu-group .themes-sublist{ padding-left:36px; }
.main-menu-group .themes-sublist .main-menu-item{ padding-left:10px; }
@media (min-width: 520px) and (max-height: 800px){
  #main-menu{ max-width:calc(100vw - 16px); }
  #main-menu.open{ flex-direction:row; align-items:flex-start; gap:6px; overflow-x:auto; }
  .main-menu-col{ display:flex; flex-direction:column; gap:2px; min-width:210px; }
  .main-menu-col + .main-menu-col{ border-left:1.5px solid var(--line); padding-left:6px; }
  .main-menu-col + .main-menu-col > .main-menu-divider:first-child{ display:none; }
}
/* A phone on its side is shorter still: tighten the rows so each column fits without scrolling. */
@media (min-width: 520px) and (max-height: 420px){
  #main-menu.open .main-menu-category{ padding-top:4px; padding-bottom:1px; }
  #main-menu.open .main-menu-item{ padding-top:6px; padding-bottom:6px; }
  #main-menu.open .themes-sublist .main-menu-item{ padding-top:4px; padding-bottom:4px; }
  #main-menu.open #main-menu-status{ padding:2px 10px 4px; margin-bottom:2px; }
  #main-menu.open .main-menu-divider{ margin:3px 6px; }
}
/* The shortest phones on their side (about 340px of height or less): one more notch of tightening. */
@media (min-width: 520px) and (max-height: 340px){
  #main-menu{ padding:4px; }
  #main-menu.open .main-menu-item{ padding-top:3px; padding-bottom:3px; }
  #main-menu.open .themes-sublist .main-menu-item{ padding-top:2px; padding-bottom:2px; }
  #main-menu.open .main-menu-category{ padding-top:2px; padding-bottom:0; }
  #main-menu.open #main-menu-status{ padding:1px 8px 2px; margin-bottom:1px; }
  #main-menu.open .main-menu-divider{ margin:2px 6px; }
}
/* A small phone held upright (under 600px tall) tightens the menu's rows in steps so it still shows whole with Themes open. */
@media (max-width: 519px) and (max-height: 590px){
  #main-menu{ gap:1px; }
  #main-menu.open .main-menu-category{ padding-top:2px; font-size:12px; }
  #main-menu.open .main-menu-item{ padding-top:3px; padding-bottom:3px; }
  #main-menu.open .themes-sublist .main-menu-item{ padding-top:2px; padding-bottom:2px; }
  #main-menu.open .themes-sublist{ gap:1px; }
  #main-menu.open .main-menu-divider{ margin:2px 6px; }
}
@media (max-width: 519px) and (max-height: 520px){
  #main-menu.open .main-menu-item{ padding-top:2px; padding-bottom:2px; font-size:13.4px; gap:8px; }
  #main-menu.open .main-menu-item span:first-child{ font-size:15px; }
  #main-menu.open .themes-sublist .main-menu-item{ padding-top:1px; padding-bottom:1px; }
  #main-menu.open .main-menu-category{ padding-top:1px; padding-bottom:0; }
  #main-menu.open #main-menu-status{ padding:1px 8px 2px; margin-bottom:1px; }
  #main-menu.open .main-menu-divider{ margin:1px 6px; }
}
#main-menu-status{
    display:flex; align-items:center; gap:8px; padding:6px 10px 8px;
    border-bottom:1.5px solid var(--line); margin-bottom:4px;
  }
.main-menu-item{
    display:flex; align-items:center; gap:10px; padding:9px 10px; width:100%;
    border:none; border-radius:8px; background:transparent; cursor:pointer;
    font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink-900);
    text-align:left; white-space:nowrap;
  }
.main-menu-item:hover{ background:var(--paper); }
.main-menu-item.active{ background:var(--mint); cursor:default; }
.main-menu-item span:first-child{ font-size:18px; line-height:1; flex-shrink:0; }
.main-menu-divider{ height:1.5px; background:var(--line); margin:5px 6px; }
.themes-toggle{ justify-content:space-between; }
.themes-toggle-chevron{ margin-left:auto; font-size:13px; flex-shrink:0; transition:transform 0.2s ease; }
.themes-toggle[aria-expanded="true"] .themes-toggle-chevron{ transform:rotate(180deg); }
.themes-sublist{
    display:flex; flex-direction:column; gap:2px;
    padding-left:20px; 
    max-height:0; overflow:hidden;
    transition:max-height 0.25s ease;
  }
.themes-sublist.expanded{ max-height:220px; }
.themes-sublist .main-menu-item{ padding-top:7px; padding-bottom:7px; font-size:13px; }
.themes-sublist .main-menu-item span:first-child{ font-size:16px; }
#ability-dock{
    position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
    display:flex; align-items:center; gap:8px; z-index:25; 
  }
#ability-dock .header-btn{ box-shadow:3px 3px 0 rgba(43,36,32,0.18); }
body.detail-open #ability-dock{ display:none; }
@media (max-width: 900px), (max-height: 480px){
    
    .header-btn{ padding:7px 9px; }
    .header-tools, .header-center{ gap:6px; }
    
    header .count-badge{ display:none; }
    header .demo-badge{ display:none; } 
  }
header.header-compact .header-btn{ padding:7px 9px; }
header.header-compact .demo-badge{ display:none; }
#list-modal{
    display:none; position:fixed; top:50px; left:0; right:0; bottom:0; z-index:2;
    background:var(--panel);
  }
#list-modal.open{ display:flex; }
#search-modal{
    display:none; position:fixed; top:50px; left:0; right:0; bottom:0; z-index:41;
    background:#000;
    align-items:center; justify-content:center;
  }
#search-modal.open{ display:flex; }
.view-choice-btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:14px; background:var(--brand-green); border:2.5px solid var(--brand-green-dark); border-radius:12px;
    font-family:var(--font-display); font-weight:700; font-size:15px; color:#fff;
    cursor:pointer; box-shadow:3px 3px 0 rgba(43,36,32,0.2);
    transition:transform .1s ease, box-shadow .1s ease;
  }
.view-choice-btn span:first-child{ font-size:19px; }
.view-choice-btn:hover{ background:var(--brand-green-dark); transform:translate(1px,1px); box-shadow:2px 2px 0 rgba(43,36,32,0.2); }
.view-choice-btn:disabled{ background:var(--mint); border-color:var(--ink-900); color:var(--ink-900); }
#search-panel{
    width:min(420px, 92vw); max-height:88vh;
    background:none; color:#fff;
    display:flex; flex-direction:column; overflow:hidden;
  }
#search-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; border-bottom:1px solid #2e2e2e; flex-shrink:0;
  }
#search-title{ font-family:var(--font-display); font-weight:700; font-size:16px; color:#fff; }
#search-title-sub{ display:block; font-family:var(--font-body); font-weight:500; font-size:13px; color:#bdbdbd; margin-top:1px; }
/* Clear now lives only at the bottom, next to Lookup -- one button, not a second copy up here. */
#search-close{
    background:none; border:none; cursor:pointer;
    font-family:var(--font-display); font-weight:800; font-size:28px; color:#fff; line-height:1; opacity:.8;
  }
#search-close:hover{ opacity:1; }
#search-form{
    display:flex; flex-direction:column; gap:3px;
    padding:8px 16px 10px; overflow-y:auto;
  }
.sf-field{ display:flex; flex-direction:column; min-width:0; }
#search-form label{
    font-family:var(--font-mono); font-size:13px; font-weight:700; color:#e6e6e6;
    letter-spacing:0.3px; text-transform:uppercase; margin-bottom:1px; display:block; line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
#search-form input[type="text"]{
    font-family:var(--font-body); font-size:13.5px; color:var(--ink-900);
    background:var(--paper); border:2px solid var(--ink-900); border-radius:8px;
    padding:3px 8px; width:100%; box-sizing:border-box; height:29px;
  }
#search-form select{
    font-family:var(--font-body); font-size:13.5px; color:var(--ink-900);
    background:var(--paper); border:2px solid var(--ink-900); border-radius:8px;
    padding:3px 26px 3px 8px; width:100%; box-sizing:border-box; appearance:none; height:29px;
    text-overflow:ellipsis;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat; background-position:right 10px center; background-size:16px;
  }
/* Min–Max rows use the same two equal columns and gap as the paired fields above and below
   them, so every half-width box lines up down the form; the dash sits in the gap between. */
.search-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; position:relative; align-items:center; }
.search-field-row input{ min-width:0; }
.search-field-sep{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; color:#bdbdbd; font-family:var(--font-body); font-size:13px; line-height:1; }
.search-field-pair{ display:flex; gap:8px; }
.search-field-pair > div{ flex:1 1 0; min-width:0; }
/* A bare match to the ordinary 3px row gap read as scrunched once actual buttons this size
   (44px, see #sf-search/#sf-clear-inline) sit right under a small input -- the same numeric gap
   carries a lot more visual weight next to a big solid-color button than between two beige
   boxes. Real margin on both sides, not just the shared inter-row gap. */
#sf-action-row{ display:flex; gap:8px; margin-top:12px; margin-bottom:10px; }
#sf-search{
    flex:1 1 auto; font-family:var(--font-display); font-weight:700; font-size:15px;
    color:#fff; background:var(--brand-blue); border:2px solid var(--brand-blue-dark); border-radius:10px;
    padding:9px; height:44px; box-sizing:border-box; cursor:pointer;
  }
#sf-search:hover{ background:var(--brand-blue-dark); }
/* The opening screen has no header to hold a Clear button, so it sits beside Lookup there.
   In the regular search menu the header already has "Clear results", so this one is hidden. */
#sf-clear-inline{
    flex:0 0 auto; font-family:var(--font-display); font-weight:700; font-size:14px;
    color:#fff; background:var(--brand-red); border:2px solid var(--brand-red-dark); border-radius:10px;
    padding:9px 16px; height:44px; box-sizing:border-box; cursor:pointer;
  }
#sf-clear-inline:active{ transform:translateY(1px); background:var(--brand-red-dark); }
@media (hover: hover){ #sf-clear-inline:hover{ background:var(--brand-red-dark); } }
#sf-search:active{ transform:translateY(1px); }
#sf-search:disabled{ opacity:.5; cursor:default; }
/* Hidden until a search has actually been run (see revealViewOptions/hideViewOptions in
   engine.js) -- the view choice only makes sense once Lookup has been pressed. */
#sf-view-label{ display:none; font-family:var(--font-body); font-size:13px; color:#bdbdbd; margin-top:6px; text-align:center; }
#sf-view-buttons{ display:none; gap:8px; margin-top:6px; }

/* Simple search is the default (Type, location, Price only); "More options" reveals the rest
   -- a mode of this SAME form/modal (no separate page, so switching never reloads anything).
   The toggle class lives on #search-panel, the shared ancestor of both header rows and the
   form, so the mode buttons (in either header) and .sf-advanced (in the form) can react to it. */
.sf-advanced{ display:none; }
#search-panel.full-options-mode .search-field-pair.sf-advanced{ display:flex; }
#search-panel.full-options-mode .sf-field.sf-advanced{ display:flex; }

#sf-mode-actions-row{ display:flex; justify-content:center; gap:10px; margin:10px 0; flex-wrap:wrap; }
#sf-more-btn, #sf-fewer-btn, #sf-blank-search-btn{
    font-family:var(--font-display); font-weight:700; font-size:12.5px; white-space:nowrap;
    color:#fff; background:var(--brand-blue); border:2px solid var(--brand-blue-dark); border-radius:999px;
    padding:7px 14px; cursor:pointer;
  }
@media (hover: hover){ #sf-more-btn:hover, #sf-fewer-btn:hover, #sf-blank-search-btn:hover{ background:var(--brand-blue-dark); } }
#sf-fewer-btn, #sf-blank-search-btn{ display:none; }
#search-panel.full-options-mode #sf-more-btn{ display:none; }
#search-panel.full-options-mode #sf-fewer-btn, #search-panel.full-options-mode #sf-blank-search-btn{ display:inline-block; }

/* A min-only numeric field's stepper (Beds, Baths, Finished square footage, Lot size): one
   bordered box holding the input and, in its own narrow column on the right, a stacked up/down
   pair of arrow buttons -- rather than the previous separate "-" and "+" buttons flanking the
   input, which read as unrelated controls instead of one connected control. */
.sf-stepper{
    display:flex; align-items:stretch; background:var(--paper); border:2px solid var(--ink-900); border-radius:8px;
    overflow:hidden;
  }
#search-form .sf-stepper input{
    flex:1 1 auto; min-width:0; text-align:left; border:none; border-radius:0; background:transparent;
  }
.sf-stepper input:focus{ outline:none; }
.sf-stepper-arrows{ display:flex; flex-direction:column; flex:0 0 auto; width:26px; border-left:2px solid var(--ink-900); }
.sf-step-btn{
    flex:1 1 0; display:flex; align-items:center; justify-content:center; min-height:0;
    background:var(--paper); border:none; padding:0; cursor:pointer; position:relative;
  }
.sf-step-btn:first-child{ border-bottom:1.5px solid var(--line-bright); }
.sf-step-btn:active{ background:var(--paper-dim); }
/* The up/down arrowheads, drawn in CSS rather than a character or icon font so they stay crisp
   and perfectly centered at any size. */
.sf-step-btn::before{
    content:""; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  }
.sf-step-btn:first-child::before{ border-bottom:5px solid var(--ink-700); }
.sf-step-btn:last-child::before{ border-top:5px solid var(--ink-700); }

#sf-view-label.revealed{ display:block; }
#sf-view-buttons.revealed{ display:flex; }
#sf-view-buttons .view-choice-btn{
    flex:1 1 0; padding:8px 6px; font-size:13px;
  }
#sf-view-buttons .view-choice-btn span:first-child{ font-size:16px; }
#sf-view-buttons .view-choice-btn:disabled{ cursor:default; pointer-events:none; } /* never dimmed: the buttons only show when there is something to view */
#sf-status-msg{
    font-family:var(--font-body); font-size:13px; color:#bdbdbd;
    min-height:16px; text-align:center;
  }
#sf-status-msg.error{ color:#ff6b6b; font-weight:700; }
#current-count-msg{
    font-family:var(--font-mono); font-size:13px; color:#bdbdbd;
    text-align:center; letter-spacing:0.3px; margin-top:2px;
  }
/* SEARCH FORM SIZING RULES (do not reintroduce per-height shrinking of fields):
   - Every input/select/stepper/button keeps a FIXED comfortable height at every window size, and
     no text anywhere in the form goes below 10pt (13.34px). Nothing is allowed to flex-shrink.
   - When the form is taller than the screen (a phone on its side with More options open), the
     form scrolls inside the panel instead of squeezing its fields. */
#search-panel{ max-height:calc(100vh - 56px); max-height:calc(100dvh - 56px); }
#search-form{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
#search-form > *, .sf-field, .search-field-row, .search-field-pair, .sf-stepper, #sf-action-row{ flex-shrink:0; }
#search-form label{ font-size:max(10pt, 13.34px); min-height:1.2em; }
#search-form input[type="text"], #search-form select{
    height:38px; min-height:38px; font-size:max(10pt, 13.34px); line-height:1.25; padding-top:0; padding-bottom:0; flex-shrink:0;
  }
#search-form .sf-stepper{ height:38px; min-height:38px; }
#search-form .sf-stepper input{ height:100%; min-height:0; }
#sf-search, #sf-clear-inline{ height:44px; min-height:44px; flex-shrink:0; font-size:max(10pt, 14px); }
#sf-more-btn, #sf-fewer-btn, #sf-blank-search-btn{ font-size:max(10pt, 13.34px); min-height:34px; padding:6px 14px; }
#sf-view-buttons .view-choice-btn, #sf-view-label, #sf-status-msg, #current-count-msg{ font-size:max(10pt, 13.34px); }
#search-title-sub{ font-size:max(10pt, 13.34px); }
@media (max-height: 800px){
  #search-form{ gap:2px; padding:4px 14px 8px; }
  #sf-action-row{ margin-top:10px; margin-bottom:8px; }
  #sf-mode-actions-row{ margin:6px 0; }
}
/* A phone held upright is only 570-700px tall: with More options open the form should still show whole, so the spare
   space around the fields is trimmed in steps (the fields keep their 38px height and all text stays 10pt or more). */
@media (max-width: 519px) and (max-height: 700px){
  #search-header{ padding:8px 16px; }
  #search-title{ display:flex; align-items:baseline; gap:8px; white-space:nowrap; }
  #search-title-sub{ display:inline; margin-top:0; }
  #current-count-msg{ display:none; }
  #search-form{ gap:1px; padding:2px 14px 4px; }
  #sf-mode-actions-row{ margin:3px 0; }
  #sf-action-row{ margin-top:6px; margin-bottom:4px; }
  #sf-view-buttons{ margin-top:4px; }
}
@media (max-width: 359px) and (max-height: 700px){ #search-title-sub{ display:none; } }
@media (max-width: 519px) and (max-height: 600px){
  #search-header{ padding:5px 14px; }
  #search-form label{ min-height:0; line-height:1.1; margin-bottom:0; }
  #sf-mode-actions-row{ margin:1px 0; }
  #sf-more-btn, #sf-fewer-btn, #sf-blank-search-btn{ padding-top:4px; padding-bottom:4px; }
  #sf-action-row{ margin-top:4px; margin-bottom:2px; }
  #search-form{ padding-bottom:0; }
  #sf-status-msg:empty{ display:none; }
}
/* A phone on its side (wide but short): the form becomes a 10-column grid so the fields sit
   side by side at their normal height and nothing needs to scroll or shrink:
     row 1: Type (2) | Location (4) | Price min-max (4)
     row 2: Beds | Baths | Sq ft | Lot size | Style  (2 each -- five on one line)
     row 3: School district (4) | Description (6)
     row 4: Clear + Lookup, with the List/Map/Planet buttons beside them once a search has run.
   The mode buttons (More/Fewer options, Blank search) share a line with the title. */
@media (orientation: landscape) and (max-height: 560px){
  #search-panel{ width:min(960px, 96vw); display:grid; grid-template-columns:1fr auto; grid-template-rows:auto 1fr; position:relative; }
  #search-header{ grid-column:1; grid-row:1; padding:4px 14px 2px; border-bottom:none; align-self:center; justify-content:flex-start; }
  #search-title{ display:flex; align-items:baseline; gap:10px; white-space:nowrap; }
  #search-title-sub{ display:inline; margin-top:0; }
  #current-count-msg{ display:none; }
  #search-form{ padding-top:0; padding-bottom:2px; row-gap:1px; }
  #sf-action-row{ margin:4px 0 0; }
  #sf-view-buttons{ margin:4px 0 0; }
  #search-title{ font-size:15px; }
  #search-close{ position:absolute; top:2px; right:10px; z-index:1; }
  #sf-mode-actions-row{ grid-column:2; grid-row:1; margin:4px 44px 2px 0; align-self:center; flex-wrap:nowrap; }
  #search-form{
    grid-column:1 / -1; grid-row:2;
    display:grid; grid-template-columns:repeat(10, minmax(0, 1fr)); column-gap:8px; row-gap:2px;
    padding:0 14px 2px; row-gap:1px; align-content:start; overflow-y:auto; scrollbar-width:none;
  }
  #search-form::-webkit-scrollbar{ display:none; }
  #search-panel.full-options-mode .search-field-pair.sf-advanced{ display:contents; }
  #search-form .sf-field{ grid-column:span 2; }
  #search-form .search-field-pair > div{ grid-column:span 2; min-width:0; }
  #search-form .sf-field:has(#sf-address){ grid-column:span 4; }
  #search-form .sf-field:has(#sf-price-row){ grid-column:span 4; }
  #search-form .search-field-pair > div:has(#sf-school){ grid-column:span 4; }
  #search-form .sf-field:has(#sf-keywords){ grid-column:span 6; }
  #sf-action-row{ grid-column:1 / -1; margin:4px 0 0; }
  #search-form:has(#sf-view-buttons.revealed) #sf-action-row{ grid-column:span 4; }
  #sf-view-label{ display:none !important; }
  #sf-view-buttons{ grid-column:span 6; margin:4px 0 0; }
  #sf-view-buttons .view-choice-btn{ min-height:44px; padding:4px 6px; }
  #search-form > #sf-status-msg, #search-form > #current-count-msg{ grid-column:1 / -1; min-height:0; margin:0; }
  #sf-status-msg:empty{ display:none; }
}
#list-title .list-title-count{
    font-family:var(--font-mono); font-size:13px; font-weight:400;
    color:var(--text-dim); letter-spacing:0.3px; margin-left:6px;
  }
#list-panel{
    width:100%; height:100%;
    background:var(--panel); color:var(--ink-900);
    display:flex; flex-direction:column; overflow:hidden;
  }
#list-header, #map-header, .dp-header, #price-game-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:9px 16px; border-bottom:2.5px solid var(--ink-900); flex-shrink:0;
  }
#list-title{ font-family:var(--font-display); font-weight:700; font-size:15px; flex:1 1 auto; min-width:0; white-space:nowrap; }
#list-view-toggle{
    background:none; border:none; padding:6px 4px; cursor:pointer; flex-shrink:0;
    font-family:var(--font-display); font-weight:700; font-size:max(10pt, 13.34px);
    color:var(--brand-blue-dark); text-decoration:underline; text-underline-offset:3px;
  }
#list-view-toggle:hover{ color:var(--brand-blue); }
#list-close, #map-close, .dp-close, #price-game-close{
    background:none; border:none; cursor:pointer; flex-shrink:0; margin-left:10px;
    font-family:var(--font-mono); font-size:18px; color:var(--ink-900); line-height:1; opacity:.6;
  }
#list-close:hover, #map-close:hover, .dp-close:hover, #price-game-close:hover{ opacity:1; }
#map-modal{
    display:none; position:fixed; top:50px; left:0; right:0; bottom:0; z-index:2;
    background:var(--panel);
  }
#map-modal.open{ display:flex; }
#map-panel{
    width:100%; height:100%;
    background:var(--panel); color:var(--ink-900);
    display:flex; flex-direction:column; overflow:hidden;
  }
#map-title{ font-family:var(--font-display); font-weight:700; font-size:16px; }
#map-title .list-title-count{
    font-family:var(--font-mono); font-size:13px; font-weight:400;
    color:var(--text-dim); letter-spacing:0.3px; margin-left:6px;
  }
#map-canvas{ flex:1 1 auto; min-height:0; background:var(--paper-dim); }
#map-empty{
    display:none; flex:1 1 auto; align-items:center; justify-content:center;
    font-family:var(--font-body); font-size:13px; color:var(--text-dim); text-align:center; padding:20px;
  }
.map-popup-price{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink-900); }
.map-popup-addr{ font-family:var(--font-body); font-size:13px; color:var(--ink-800); margin-top:2px; }
.map-popup-photo{ width:100%; height:80px; object-fit:cover; border-radius:6px; margin-bottom:6px; }
.map-popup-box{ cursor:pointer; }
.map-popup-box:hover .map-popup-view-btn{ transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(43,36,32,0.25); }
.map-popup-view-btn{
    display:block; width:100%; margin-top:8px; padding:6px 8px;
    background:var(--coral); color:#FFFDF6; border:2px solid var(--ink-900); border-radius:8px;
    font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:0.2px;
    cursor:pointer; text-align:center; box-shadow:2px 2px 0 rgba(43,36,32,0.25);
  }
.map-popup-view-btn:hover{ transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(43,36,32,0.25); }
#price-game-modal{
    display:none; position:fixed; top:50px; left:0; right:0; bottom:0; z-index:40;
    background:rgba(43,36,32,0.92);
    align-items:center; justify-content:center; padding:16px; box-sizing:border-box;
  }
#price-game-modal.open{ display:flex; }
#price-game-panel{
    position:relative;
    width:min(480px, 94vw);
    /* Mobile browsers report `vh` against the tallest the page COULD be (address bar
       hidden), not the shorter space actually visible with it shown, which let this
       overflow past the bottom of the screen even though the number "94%" looked safe.
       `dvh` tracks the real, currently-visible height; kept plain "94%" first for the
       (rare) browser that doesn't support dvh at all. */
    max-height:94%;
    max-height:94dvh;
    box-sizing:border-box;
    border:4px solid var(--ink-900); border-radius:20px;
    box-shadow:8px 8px 0 rgba(43,36,32,0.35);
    display:flex; flex-direction:column; align-items:stretch; overflow:hidden;
    background:#3a2f28; color:#FFFDF6;
  }
#price-game-header{
    border-bottom-color:rgba(255,255,255,0.25);
  }
#price-game-title{ font-family:var(--font-display); font-weight:700; font-size:15px; }
#price-game-body{
    flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:16px 20px 46px; box-sizing:border-box;
    display:flex; flex-direction:column; align-items:stretch; gap:14px;
  }
#price-game-close{
    position:static; flex-shrink:0; margin-left:10px;
    width:auto; height:auto; border-radius:0;
    background:none; border:none; color:#fff; opacity:.75;
    font-family:var(--font-mono); font-size:18px; line-height:1; cursor:pointer;
  }
#price-game-close:hover{ opacity:1; }
#pg-marquee{
    text-align:center; font-family:var(--font-display); font-weight:700;
    font-size:15px; letter-spacing:3px; padding:8px 10px; border-radius:10px;
  }
#pg-marquee-sub{
    display:block; font-size:13px; font-weight:600; letter-spacing:1.5px;
    margin-top:3px; opacity:0.85;
  }
#pg-cabinet{ display:flex; align-items:stretch; gap:10px; }
#pg-screen-bezel{
    position:relative;
    flex:1 1 auto; min-width:0; border-radius:12px; padding:16px;
    border:3px solid rgba(0,0,0,0.4); box-shadow:inset 0 0 0 3px rgba(255,255,255,0.15);
  }
#pg-screen{
    position:relative; width:100%; aspect-ratio:4/3; border-radius:8px;
    overflow:hidden; background:#1a1410;
    box-shadow:inset 0 0 24px rgba(0,0,0,0.6);
  }
#pg-photo{ cursor:pointer;
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    display:block;
  }
#pg-empty-state{
    display:none; position:absolute; inset:0; align-items:center; justify-content:center;
    text-align:center; padding:16px; box-sizing:border-box;
    font-family:var(--font-body); font-weight:600; font-size:13px; color:#FFFDF6;
    background:rgba(0,0,0,0.55);
  }
#price-game-panel.pg-empty #pg-empty-state{ display:flex; }
#price-game-panel.pg-empty #pg-photo{ display:none; }
#pg-loading-state{
    display:none; position:absolute; inset:0; align-items:center; justify-content:center;
    text-align:center; padding:16px; box-sizing:border-box;
    font-family:var(--font-body); font-weight:600; font-size:13px; color:#FFFDF6;
    background:rgba(0,0,0,0.55);
  }
#price-game-panel.pg-loading #pg-loading-state{ display:flex; }
#price-game-panel.pg-loading #pg-photo{ display:none; }
#pg-reveal-price{
    display:none; position:absolute; left:0; right:0; bottom:0;
    padding:8px 10px; text-align:center;
    font-family:var(--font-poster); font-weight:900; font-size:22px; letter-spacing:0.5px;
    color:#fff; background:rgba(0,0,0,0.55);
  }
#price-game-panel.pg-revealed #pg-reveal-price{ display:block; }
#pg-screen.pg-scrambling #pg-photo{ animation:pg-scramble-filter 0.12s steps(1) infinite; }
@keyframes pg-scramble-filter{
    0%{ filter:brightness(1.3) contrast(1.2) hue-rotate(0deg); transform:scale(1.02) translateY(0); }
    33%{ filter:brightness(0.7) contrast(1.4) hue-rotate(40deg); transform:scale(1.04) translateY(-2%); }
    66%{ filter:brightness(1.5) saturate(1.6) hue-rotate(-30deg); transform:scale(1.03) translateY(2%); }
    100%{ filter:brightness(1) contrast(1) hue-rotate(0deg); transform:scale(1.02) translateY(0); }
  }
#pg-banner-wrap{
    display:none; position:absolute; top:0; left:0; right:0; bottom:38px; align-items:center; justify-content:center;
    pointer-events:none; overflow:hidden;
  }
#price-game-panel.pg-revealed #pg-banner-wrap{ display:flex; }
#pg-banner{
    font-family:var(--font-poster); font-weight:900; font-size:clamp(16px, 5.5vw, 26px);
    letter-spacing:1px; text-transform:uppercase; text-align:center; line-height:1.1;
    color:#fff; background:var(--coral); padding:10px 16px; border:3px solid var(--ink-900);
    box-shadow:4px 4px 0 rgba(0,0,0,0.5);
    max-width:88%;
    transform:rotate(-6deg) scale(0);
    animation:pg-banner-smash 0.45s cubic-bezier(.2,1.4,.5,1) 0.05s forwards;
  }
@keyframes pg-banner-smash{
    0%{ transform:rotate(-6deg) scale(0); }
    70%{ transform:rotate(-6deg) scale(1.15); }
    100%{ transform:rotate(-6deg) scale(1); }
  }
#pg-lever-track{
    flex:0 0 auto; width:34px; display:flex; flex-direction:column; align-items:center;
    justify-content:flex-end; padding-bottom:6px;
    perspective:300px; 
  }
#pg-lever{
    width:8px; height:120px; border-radius:6px;
    background:linear-gradient(90deg, #888, #ddd 40%, #888);
    
    transform-origin:bottom center;
    transform:rotate(-8deg) rotateY(25deg);
    box-shadow:1px 0 2px rgba(0,0,0,0.4);
  }
#pg-lever.pg-pulled{ animation:pg-lever-pull 0.9s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes pg-lever-pull{
    0%{ transform:rotate(-8deg) rotateY(25deg); }
    35%{ transform:rotate(34deg) rotateY(25deg); }
    60%{ transform:rotate(34deg) rotateY(25deg); }
    100%{ transform:rotate(-8deg) rotateY(25deg); }
  }
#pg-lever-knob{
    width:26px; height:26px; border-radius:50%; margin:-4px 0 0 -9px;
    background:radial-gradient(circle at 35% 30%, #ff8a6b, var(--coral) 60%, #a03d20);
    border:2px solid var(--ink-900);
  }
#pg-controls{ display:flex; flex-direction:column; align-items:center; gap:8px; }
#pg-guess-label{
    font-family:var(--font-mono); font-size:13px; letter-spacing:1.5px; text-transform:uppercase;
    color:rgba(255,255,255,0.75);
  }
#pg-input-row{
    display:flex; align-items:center; gap:6px;
    background:#FFFDF6; border:3px solid var(--ink-900); border-radius:10px;
    padding:8px 14px; width:min(220px, 100%); box-sizing:border-box;
  }
#pg-dollar-sign{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink-900); }
#pg-guess-input{
    flex:1 1 auto; min-width:0; border:none; outline:none; background:none;
    font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink-900);
  }
#pg-again-btn{
    display:none; position:absolute; right:14px; bottom:14px; z-index:2;
    background:rgba(0,0,0,0.35); border:2px solid rgba(255,255,255,0.6); color:#fff;
    border-radius:20px; padding:7px 14px; font-family:var(--font-display); font-weight:700;
    font-size:13px; cursor:pointer;
  }
#price-game-panel:not(.pg-empty):not(.pg-loading) #pg-again-btn{ display:inline-block; }
#price-game-panel.pg-revealed #pg-guess-btn,
  #price-game-panel.pg-revealed #pg-input-row{ opacity:0.5; pointer-events:none; }
#pg-view-listing-btn{
    display:none; position:absolute; left:14px; bottom:14px; z-index:2;
    background:rgba(0,0,0,0.35); border:2px solid rgba(255,255,255,0.6); color:#fff;
    border-radius:20px; padding:7px 14px; font-family:var(--font-display); font-weight:700;
    font-size:13px; cursor:pointer;
  }
#price-game-panel:not(.pg-empty):not(.pg-loading) #pg-view-listing-btn{ display:inline-block; }
#pg-reels{ display:flex; align-items:center; justify-content:center; gap:8px; }
.pg-reel{
    width:44px; height:44px; border-radius:6px; display:flex; align-items:center; justify-content:center;
    background:#1a1410; border:2px solid rgba(255,255,255,0.35); box-shadow:inset 0 0 8px rgba(0,0,0,0.6);
    font-size:24px; line-height:1;
  }
.pg-reel.pg-spinning{ animation:pg-reel-spin 0.08s steps(1) infinite; }
@keyframes pg-reel-spin{
    0%{ transform:translateY(0); filter:brightness(1.4); }
    50%{ transform:translateY(3px); filter:brightness(0.8); }
    100%{ transform:translateY(0); filter:brightness(1.4); }
  }
#pg-guess-btn{
    width:75px; height:75px; border-radius:50%; cursor:pointer;
    background:radial-gradient(circle at 35% 30%, #6fd68f, #3fae63 55%, #1f7a3f);
    border:3px solid #d9a635; box-shadow:0 0 0 2px var(--ink-900), 0 4px 0 #14512a, 0 5px 10px rgba(0,0,0,0.4);
    color:#fff; font-family:var(--font-display); font-weight:700; font-size:13px; line-height:1.15;
    text-transform:uppercase; letter-spacing:0.2px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
#pg-guess-btn span{ display:block; }
#pg-guess-btn:active{ box-shadow:0 0 0 2px var(--ink-900), 0 1px 0 #14512a, 0 2px 5px rgba(0,0,0,0.4); transform:translateY(3px); }
#pg-guess-btn:disabled{ opacity:0.6; cursor:default; }
.pg-decor{ display:none; position:absolute; pointer-events:none; z-index:5; }
.pg-decor-tl{ position:static; top:auto; left:auto; width:46px; height:46px; }
.pg-decor-tr{ position:static; top:auto; right:auto; width:46px; height:46px; }
.pg-decor-flapper{ left:2px; top:50%; width:34px; height:auto; transform:translateY(-50%); }
.pg-decor-bowler{ right:2px; top:50%; width:34px; height:auto; transform:translateY(-50%); }
.pg-theme-egypt{
    background-color:#a97c2f;
    background-image:
      radial-gradient(circle, rgba(240,201,90,0.55) 0 2px, transparent 2.5px),
      linear-gradient(180deg, #cfa34d, #a97c2f 60%, #8a611f);
    background-size:26px 26px, 100% 100%;
    background-position:0 0, 0 0;
  }
.pg-theme-egypt #pg-marquee{ background:#1f2d4a; color:#f0c95a; border:2px solid #f0c95a; }
.pg-theme-egypt #pg-screen-bezel{
    
    background-color:#1f2d4a;
    background-image:
      radial-gradient(circle, rgba(240,201,90,0.7) 0 2px, transparent 2.5px);
    background-size:20px 20px;
  }
.pg-theme-egypt #pg-banner{ background:#f0c95a; color:#1f2d4a; }
.pg-theme-egypt #pg-again-btn,
  .pg-theme-egypt #pg-view-listing-btn{ background:#1f2d4a; border-color:#f0c95a; color:#f0c95a; }
.pg-theme-egypt .pg-decor-pharaoh{ display:block; }
.pg-theme-jungle{
    background-image: repeating-linear-gradient(115deg, #e8792e 0 22px, #1a1410 22px 30px, #e8792e 30px 55px, #1a1410 55px 62px);
  }
.pg-theme-jungle #pg-marquee{ background:#1a1410; color:#f4a83f; border:2px solid #f4a83f; }
.pg-theme-jungle #pg-screen-bezel{
    background-image: repeating-linear-gradient(115deg, #e8792e 0 12px, #1a1410 12px 16px, #e8792e 16px 28px, #1a1410 28px 32px);
  }
.pg-theme-jungle #pg-banner{ background:#d9852f; color:#1f2d0f; }
.pg-theme-jungle #pg-again-btn,
  .pg-theme-jungle #pg-view-listing-btn{ background:#1f2d0f; border-color:#f4a83f; color:#f4a83f; }
.pg-theme-jungle .pg-decor-tiger{ display:block; }
.pg-theme-saloon{
    background-image: repeating-linear-gradient(90deg, #4a2f22 0 58px, #3a2419 58px 64px);
    background-color:#2a1916;
  }
.pg-theme-saloon #pg-marquee{ background:#c7a252; color:#2a1916; border:2px solid #e8c878; }
.pg-theme-saloon #pg-screen-bezel{
    background-image: repeating-linear-gradient(90deg, #4a2f22 0 26px, #3a2419 26px 30px);
    background-color:#2a1916;
    position:relative;
  }
.pg-theme-saloon #pg-banner{ background:#e8c878; color:#2a1916; }
.pg-theme-saloon #pg-again-btn,
  .pg-theme-saloon #pg-view-listing-btn{ background:#2a1916; border-color:#e8c878; color:#e8c878; }
.pg-theme-saloon .pg-decor-flapper,
  .pg-theme-saloon .pg-decor-bowler{ display:block; }
/* Guess the Price: the photo box alone runs ~360px tall at full panel width, so the
   normal single-column layout only fits comfortably in a tall window. Any window that's
   wider than it is tall (a phone turned sideways, a PC browser that isn't maximized) needs
   the compact side-by-side layout much sooner than a plain height check alone would catch —
   a landscape PC window is very often 550-800px tall, well above the old 500px cutoff, and
   was overflowing there. (max-height:500px) alone still covers short windows of any shape. */
@media (max-height: 500px), (max-height: 760px) and (orientation: landscape){
    #price-game-panel{
      width:min(640px, 96vw);
      max-height:96vh;
      max-height:96dvh;
    }
    #price-game-header{ padding:6px 14px; }
    #price-game-body{
      padding:8px 14px 10px; gap:5px;
      display:grid; align-items:start;
      grid-template-columns:1fr 1fr;
      grid-template-areas:
        "marquee marquee"
        "cabinet reels"
        "cabinet controls";
    }
    #price-game-close{ width:20px; font-size:13px; }
    #pg-marquee{ grid-area:marquee; font-size:13px; padding:5px 8px; letter-spacing:1.5px; }
    #pg-marquee-sub{ font-size:13px; margin-top:1px; }
    #pg-cabinet{ grid-area:cabinet; }
    #pg-reels{ grid-area:reels; margin-top:0; }
    /* The 3-line "GUESS THE PRICE" text is taller now that it's at least 10pt (was 8px here),
       so it needs to sit higher, clear of the New Property pill absolutely-positioned at this
       panel's bottom-right corner. */
    #pg-controls{ grid-area:controls; gap:5px; padding-bottom:34px; }
    #pg-screen-bezel{ padding:10px; }
    #pg-guess-btn{ width:60px; height:60px; font-size:13px; }
    #pg-input-row{ padding:5px 10px; }
  }
/* Sort controls live in the list header, on ONE line with everything else: Properties (N) | sort field | arrow |
   List/Tiles | X. The field has no "Sort by" text (just the kind of sort) and sizes itself to its longest option,
   "Lot size", so it never changes width; the title is built to stay clear of it even at "(200)", the most the app
   shows. On narrow phones the spacing and type tighten instead of wrapping. */
#list-header{ flex-wrap:nowrap; gap:0; }
#list-title{ flex:0 1 auto; min-width:0; margin-right:auto; }
#list-sort{ display:flex; align-items:center; gap:5px; flex:0 0 auto; margin:0 8px; }
#sort-field{
    font-family:var(--font-body); font-weight:600; font-size:max(10pt, 13.34px); color:var(--ink-900);
    background:var(--panel); border:2px solid var(--ink-900); border-radius:8px;
    padding:4px 2px 4px 7px; height:34px; width:auto; cursor:pointer;
  }
#sort-dir-btn{
    flex:0 0 auto; width:34px; height:34px; display:flex; align-items:center; justify-content:center; padding:0;
    background:var(--panel); border:2px solid var(--ink-900); border-radius:8px; cursor:pointer; color:var(--ink-900);
    box-shadow:2px 2px 0 rgba(43,36,32,0.12);
    transition:transform .1s ease, box-shadow .1s ease;
  }
#sort-dir-btn:active{ transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(43,36,32,0.12); }
/* A heavy arrow drawn as a shape (so it looks the same on every phone, whatever fonts it has): pointing up for
   ascending, turned to point down for descending. */
#sort-dir-btn svg{ display:block; transition:transform .15s ease; }
#sort-dir-btn[data-dir="desc"] svg{ transform:rotate(180deg); }
#list-header #list-view-toggle{ padding:6px 2px; min-width:3.9em; text-align:center; white-space:nowrap; }
#list-header #list-close{ margin-left:4px; }
#list-header .list-title-count{ margin-left:4px; }
@media (max-width: 399px){
  #list-header{ padding-left:10px; padding-right:10px; }
  #list-title{ font-size:14px; }
  #list-header .list-title-count{ font-size:12px; margin-left:3px; }
  #list-sort{ gap:4px; margin:0 5px; }
  #sort-field{ padding-left:5px; }
  #sort-dir-btn{ width:32px; }
}
@media (max-width: 339px){
  #list-header{ padding-left:8px; padding-right:6px; }
  #list-title{ font-size:13px; }
  #list-header .list-title-count{ font-size:11px; margin-left:2px; }
  #list-sort{ gap:3px; margin:0 3px; }
  #sort-field{ padding-left:4px; padding-right:0; }
  #sort-dir-btn{ width:30px; }
  #list-header #list-view-toggle{ min-width:0; padding:6px 1px; }
  #list-header #list-close{ margin-left:2px; }
}
#list-items{ flex:1; overflow-y:auto; padding:10px; touch-action:pan-y; }
.list-item{
    position:relative;
    display:flex; align-items:center; gap:12px; width:100%;
    background:var(--paper); border:2px solid var(--ink-900); border-radius:12px;
    padding:9px; margin-bottom:9px; cursor:pointer; text-align:left;
    font-family:var(--font-body); box-shadow:2px 2px 0 rgba(43,36,32,0.12);
    transition:transform .1s ease, box-shadow .1s ease;
  }
.list-item:hover{ transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(43,36,32,0.12); }
.list-item:last-child{ margin-bottom:0; }
.list-item-photo{
    width:64px; height:64px; border-radius:8px; object-fit:cover; flex-shrink:0;
    border:1.5px solid var(--ink-900); background:var(--paper-dim);
  }
.list-item-photo-empty{ display:flex; align-items:center; justify-content:center; }
.list-item-info{ min-width:0; flex:1; }
.list-item-price{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--coral); }
.list-item-addr{ font-size:13px; font-weight:500; line-height:1.35; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list-item-meta{ font-family:var(--font-mono); font-size:13px; color:var(--text-dim); margin-top:3px; letter-spacing:0.3px; }
#detail-panel{
    position:fixed; top:50px; left:0; right:0; bottom:0; z-index:15;
    background:var(--panel); color:var(--ink-900);
    transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
    display:flex; flex-direction:column; overflow:hidden;
  }
#detail-panel.open{ transform:translateX(0); }
#detail-panel.pg-elevated{ z-index:45; }
.dp-header-title{ font-family:var(--font-display); font-weight:700; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dp-body{ flex:1; min-height:0; overflow-y:auto; touch-action:pan-y; -webkit-overflow-scrolling:touch; }
.dp-top{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 12px; margin-bottom:8px; }
.dp-price{ font-family:var(--font-display); font-weight:700; font-size:32px; line-height:1.15; color:var(--coral); }
.dp-status-badge{
    display:inline-block; font-family:var(--font-mono); font-size:13px; letter-spacing:1px; text-transform:uppercase;
    padding:3px 9px; border-radius:10px; background:var(--ink-900); color:var(--paper);
  }
.dp-body{ padding:10px 18px; }
/* The photo keeps its own proportions and is centred. fitDetailPhoto() in engine.js sets its size to
   the largest that fits the space on screen (price and status above, first two spec rows below);
   until that runs it just shrinks to the panel width. */
.dp-photo{
    display:none; width:auto; height:auto; max-width:100%; object-fit:contain;
    margin:0 auto 8px;
    border-radius:10px; border:2px solid var(--ink-900);
    cursor:zoom-in;
  }
.dp-photo.show{ display:block; }
.dp-stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin-bottom:10px; }
.dp-stat .val{ font-family:var(--font-display); font-weight:700; font-size:19px; }
.dp-stat .lbl{ font-family:var(--font-mono); font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); margin-top:2px; }
.dp-divider{ height:1.5px; background:var(--line); margin:8px 0; }
.dp-photos-btn{
    width:100%; background:var(--mint); border:2px solid var(--ink-900); border-radius:12px;
    padding:8px; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--ink-900);
    cursor:pointer; margin-bottom:8px; box-shadow:3px 3px 0 rgba(43,36,32,0.15);
    transition:transform .1s ease, box-shadow .1s ease;
    display:block; text-align:center; text-decoration:none; box-sizing:border-box;
  }
.dp-photos-btn:hover{ transform:translate(1px,1px); box-shadow:2px 2px 0 rgba(43,36,32,0.15); }
.dp-tour-link{ background:var(--paper); display:none; margin-bottom:8px; }
.dp-tour-link.show{ display:block; }
.dp-section{ margin-bottom:8px; }
.dp-section-title{ font-family:var(--font-mono); font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; }
.dp-description{ font-size:13px; line-height:1.6; color:var(--ink-800); white-space:pre-line; }
.dp-notes{ font-size:13px; line-height:1.6; color:var(--ink-800); }
.dp-mls{ font-family:var(--font-mono); font-size:13px; color:var(--text-dim); margin-top:18px; padding-top:12px; border-top:1.5px dashed var(--line-bright); }
#lance-bubble{
    display:none; position:absolute; top:0; left:0;
    max-width:min(72vw, 320px); padding:10px 14px;
    background:var(--paper); border:2.5px solid var(--ink-900); border-radius:16px;
    font-family:var(--font-body); font-weight:600; font-size:13px; line-height:1.35;
    color:var(--ink-900); text-align:center; box-shadow:3px 3px 0 rgba(43,36,32,0.25);
    pointer-events:auto; cursor:pointer;
  }
#lance-bubble::after{
    content:""; position:absolute; left:50%; bottom:-11px; transform:translateX(-50%);
    border-width:11px 9px 0 9px; border-style:solid;
    border-color:var(--ink-900) transparent transparent transparent;
  }
#lance-bubble::before{
    content:""; position:absolute; left:50%; bottom:-7.5px; transform:translateX(-50%);
    border-width:8px 7px 0 7px; border-style:solid;
    border-color:var(--paper) transparent transparent transparent; z-index:1;
  }
#share-modal{
    display:none; position:fixed; inset:0; z-index:50;
    background:rgba(43,36,32,0.88);
    align-items:center; justify-content:center; padding:24px;
  }
#share-modal.open{ display:flex; }
#share-panel{
    position:relative; width:min(94vw, 460px); max-height:92vh; overflow-y:auto;
    background:var(--paper); border-radius:14px; border:3px solid var(--ink-900);
    padding:22px 20px 20px; box-shadow:5px 5px 0 rgba(43,36,32,0.25);
  }
#share-close{
    position:absolute; top:8px; right:10px; z-index:2;
    background:var(--paper); border:2.5px solid var(--ink-900); border-radius:10px;
    width:40px; height:40px; font-family:var(--font-display); font-weight:800; font-size:24px;
    line-height:1; cursor:pointer; color:var(--ink-900);
    box-shadow:3px 3px 0 rgba(43,36,32,0.25);
  }
#share-close:hover{ background:var(--coral); }
#share-title{ font-family:var(--font-display); font-size:22px; margin:0 40px 14px 0; }
#share-view-options{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.share-view-btn{
    font-family:var(--font-mono); font-size:13px; font-weight:600; padding:8px 12px;
    border:2.5px solid var(--ink-900); border-radius:8px; background:var(--card);
    cursor:pointer; box-shadow:2px 2px 0 rgba(43,36,32,0.2);
  }
.share-view-btn.active{ background:var(--coral); color:#fff; }
.share-view-btn:disabled{ opacity:0.4; cursor:not-allowed; }
#share-preview{
    background:var(--card); border:2px solid var(--ink-900); border-radius:10px;
    padding:12px 14px; margin-bottom:16px;
  }
#share-preview-text{ font-family:var(--font-body); font-size:14px; white-space:pre-line; margin-bottom:8px; }
#share-preview-link{ font-family:var(--font-mono); font-size:13px; color:var(--ink-700); word-break:break-all; }
#share-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.share-action-btn{
    flex:1 1 auto; text-align:center; font-family:var(--font-mono); font-size:13px; font-weight:700;
    padding:10px 12px; border:2.5px solid var(--ink-900); border-radius:8px; background:var(--paper);
    color:var(--ink-900); cursor:pointer; text-decoration:none; box-shadow:2px 2px 0 rgba(43,36,32,0.2);
  }
.share-action-btn:hover{ background:var(--coral); color:#fff; }

#lance-modal{
    display:none; position:fixed; inset:0; z-index:50;
    background:rgba(43,36,32,0.88);
    align-items:center; justify-content:center; padding:24px;
  }
#lance-modal.open{ display:flex; }
#lance-panel{
    position:relative; width:min(94vw, 700px); height:min(92vh, 820px); max-height:92vh;
    background:var(--paper); border-radius:14px; border:3px solid var(--ink-900);
    display:flex; flex-direction:column; overflow:hidden;
  }
#lance-close{
    position:absolute; top:8px; right:10px; z-index:2;
    background:var(--paper); border:2.5px solid var(--ink-900); border-radius:10px;
    width:46px; height:46px; font-family:var(--font-display); font-weight:800; font-size:28px;
    line-height:1; cursor:pointer; color:var(--ink-900);
    box-shadow:3px 3px 0 rgba(43,36,32,0.25);
  }
#lance-close:hover{ background:var(--coral); }
#lance-scroll{ flex:1; min-height:0; padding:56px 0 0; box-sizing:border-box; }
#lance-form-wrap{ width:100%; height:100%; overflow:hidden; }
#lance-form-wrap iframe{ display:block; width:100%; height:100%; border:none; }
@media (max-width: 480px){
    #lance-modal{ padding:6px; }
    #lance-panel{ width:99vw; border-radius:10px; }
    #lance-scroll{ padding:60px 0 0; }
  }
#gallery-modal{
    display:none; position:fixed; inset:0; z-index:60;
    background:rgba(43,36,32,0.88);
    align-items:center; justify-content:center; flex-direction:column;
  }
#gallery-modal.open{ display:flex; }
#gallery-stage{
    position:relative; width:min(92vw, 900px); height:min(78vh, 620px);
    display:flex; align-items:center; justify-content:center;
    background:var(--ink-900); border-radius:14px; overflow:hidden;
    border:3px solid var(--paper);
    touch-action:none; 
  }
#gallery-img{
    max-width:100%; max-height:100%; object-fit:contain; display:none;
    transform-origin:0 0; cursor:zoom-in; will-change:transform;
  }
#gallery-zoom-hint{
    color:var(--paper); font-family:var(--font-mono); font-size:13px; letter-spacing:0.5px;
    margin-top:10px; opacity:0.7;
  }
#gallery-close{
    position:absolute; top:-44px; right:0; background:none; border:none; color:var(--paper);
    font-size:26px; cursor:pointer; line-height:1;
  }

/* Theme ability buttons (added to #ability-dock by ui.js for the themes that use them) */
#syringe-btn{ background:var(--paper); color:var(--ink-900); width:32px; height:32px; padding:0; justify-content:center; font-size:18px; }
#syringe-btn.active{ background:var(--coral); box-shadow:2px 2px 0 rgba(43,36,32,0.25), 0 0 0 3px rgba(232,98,61,0.35); }
#laser-btn, #wand-btn{ display:none; background:var(--paper); color:var(--ink-900); width:34px; height:34px; padding:0; justify-content:center; font-size:16px; }
#laser-btn.active, #wand-btn.active{ background:var(--coral); box-shadow:2px 2px 0 rgba(43,36,32,0.25), 0 0 0 3px rgba(232,98,61,0.35); }
#laser-btn.visible, #wand-btn.visible{ display:flex; }

/* ---------- Landing screen: round links across the top, listing photos below ---------- */
#landing-screen{
    display:none; position:fixed; top:50px; left:0; right:0; bottom:0; z-index:2;
    background:#000; color:#fff;
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  }
#landing-screen.open{ display:block; }
#landing-screen.covered{ visibility:hidden; }
body.landing-active #stop-tour-btn, body.landing-active #ability-dock{ display:none; }
#landing-top{ background:#000; }
/* "Explore the planet": the one big thing on the landing screen, since the planet is what this app is for. */
#landing-explore{
    display:flex; align-items:center; gap:10px; width:calc(100% - 28px); max-width:1172px; margin:10px auto 6px; padding:5px 9px 5px 8px;
    box-sizing:border-box; cursor:pointer; text-align:left; color:#fff; font-family:var(--font-display);
    border:2px solid #3b5bbf; border-radius:16px; position:relative; overflow:hidden;
    background:radial-gradient(120% 160% at 12% 55%, #2d54b8 0%, #16255a 55%, #090e2b 100%);
  }
#landing-explore.loading{ animation:landing-pulse .9s ease-in-out infinite; }
#landing-explore:active{ transform:translate(1px,1px); }
.explore-art{ flex:0 0 auto; display:flex; }
.explore-art img{ width:40px; height:42px; display:block; }
.explore-text{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:0; }
.explore-text b{ font-size:18px; font-weight:800; line-height:1.15; }
.explore-text small{ font-family:var(--font-body); font-size:clamp(11px, 3.5vw, 13.34px); color:#cdd8ff; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.explore-go{
    flex:0 0 auto; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:#fff; color:#16255a; font-size:26px; font-weight:800; line-height:1; padding-bottom:3px; box-sizing:border-box;
  }
/* the premade searches: green circles that slide sideways */
#landing-searches{
    display:flex; gap:4px; max-width:1200px; margin:0 auto; padding:4px 12px 8px; box-sizing:border-box;
    overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
#landing-searches::-webkit-scrollbar{ display:none; }
.landing-link{
    flex:0 0 auto; width:84px; display:flex; flex-direction:column; align-items:center; gap:4px;
    background:none; border:none; padding:0; cursor:pointer; color:#fff; font-family:var(--font-display);
  }
.landing-circle{
    width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:28px; line-height:1; border:3px solid #fff; background:var(--brand-green);
    transition:transform .1s ease;
  }
.landing-link:active .landing-circle{ transform:translate(1px,1px); }
.landing-label{
    font-size:max(10pt, 13.34px); font-weight:600; line-height:1.15; text-align:center; width:100%;
    display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; min-height:2.3em;
  }
.landing-link.loading .landing-circle{ animation:landing-pulse .9s ease-in-out infinite; }
#landing-top.busy .landing-link:not(.loading){ opacity:.5; pointer-events:none; }
@keyframes landing-pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
#landing-status{
    display:none; padding:2px 14px 8px; text-align:center;
    font-family:var(--font-mono); font-size:max(10pt, 13.34px); color:#bdbdbd;
  }
#landing-status.show{ display:block; }
#landing-status.error{ color:#ff6b6b; font-weight:700; }
#landing-feed{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:14px;
    padding:14px; max-width:1200px; margin:0 auto;
  }
.landing-card{
    position:relative; display:block; width:100%; aspect-ratio:4 / 3; padding:0; cursor:pointer;
    border:1px solid #333; border-radius:14px; overflow:hidden; background:#111; text-align:left;
  }
.landing-card img{ display:block; width:100%; height:100%; object-fit:cover; }
.landing-card-caption{
    position:absolute; left:0; right:0; bottom:0; padding:30px 12px 10px;
    display:flex; flex-direction:column; gap:1px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.7);
    background:linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0));
  }
.lc-price{ font-family:var(--font-display); font-weight:700; font-size:20px; }
.lc-line{ font-family:var(--font-body); font-size:max(10pt, 13.34px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#landing-more{ min-height:1.2em; padding:6px 14px 28px; text-align:center; font-family:var(--font-mono); font-size:max(10pt, 13.34px); color:#bdbdbd; }
@media (orientation: landscape) and (max-height: 560px){
  #landing-explore{ margin-top:6px; padding-top:3px; padding-bottom:3px; }
  .explore-art img{ width:34px; height:36px; }
  .explore-text b{ font-size:16px; }
  .landing-circle{ width:48px; height:48px; font-size:22px; }
  .landing-link{ width:80px; gap:2px; }
  #landing-searches{ padding-top:2px; padding-bottom:4px; }
  #landing-feed{ padding:10px; gap:10px; }
}
}

#main-menu-status .demo-badge{ letter-spacing:0.5px; padding:4px 10px; }

/* ---------- List > Tiles (the default List look): the home page's photo tiles in a grid ---------- */
#list-items.tiles-mode{ padding:0; }
.tiles-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:14px;
    padding:14px; max-width:1200px; margin:0 auto;
  }
#list-items.tiles-mode .landing-card{ margin:0; }
.landing-card-ph{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:44px; background:#2a2a2a;
  }

/* ---------- Empty List / Map: "Showing 0 properties. Search now: (blue search circle)" ---------- */
.empty-search-prompt{
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px;
    padding:48px 20px; text-align:center;
    font-family:var(--font-display); font-weight:700; font-size:max(10pt, 16px); color:var(--ink-900);
  }
#list-items .empty-search-prompt{ min-height:60%; }
#map-empty .empty-search-prompt{ padding:20px; }
.empty-search-circle{
    flex:0 0 auto; width:52px; height:52px; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:24px; line-height:1;
    background:var(--brand-blue); border:3px solid var(--ink-900); box-shadow:2px 2px 0 rgba(43,36,32,0.3);
  }
.empty-search-circle:active{ transform:translate(1px,1px); }



/* ---------- Install App: the note shown where the browser has no install prompt to open ---------- */
#install-hint{
    position:fixed; left:50%; bottom:max(16px, env(safe-area-inset-bottom, 0px)); transform:translateX(-50%);
    z-index:70; width:min(92vw, 440px); box-sizing:border-box; padding:12px 16px; cursor:pointer;
    background:var(--ink-900); color:#fff; border-radius:14px; text-align:center;
    font-family:var(--font-body); font-size:max(10pt, 14px); line-height:1.35;
    box-shadow:0 4px 14px rgba(0,0,0,0.35);
  }
#install-hint[hidden]{ display:none; }
#install-btn[hidden]{ display:none; }

/* ---------- 3D tours: the spinning blue spiral button on a sign, and the Property View link's icon ---------- */
.tour-badge{
    position:absolute; width:34px; height:34px; padding:0; margin:0;
    border-radius:50%; border:2px solid #fff; pointer-events:none; overflow:hidden;   /* an indicator: taps go to what it sits on */
    background:radial-gradient(circle at 34% 28%, #7dd3fc 0%, #2563eb 48%, #1e1b8a 100%);
    box-shadow:0 0 0 2px #2B2420, 0 0 10px 2px rgba(56,189,248,0.75);
    display:flex; align-items:center; justify-content:center;
  }
/* on the planet: the top right corner of the picture (or of the tag, on a sign with no picture). The size is set
   each frame in applyOverlayProjection (--bs) so it matches the tiles' spiral instead of growing with the sign. */
.tour-badge-sign{ top:-7px; right:-7px; width:38px; height:38px; transform-origin:top right; transform:scale(var(--bs, 0.6)); }
/* on a tile (landing screen, List tiles) and a compact list row: the top right corner */
.tour-badge-tile{ top:10px; right:10px; width:38px; height:38px; z-index:2; }
.tour-badge-row{ top:6px; right:8px; z-index:2; }
.tour-badge .tour-badge-spin{ display:block; width:100%; height:100%; animation:tour-spin 3.6s linear infinite; will-change:transform; }
@keyframes tour-spin{ to{ transform:rotate(-360deg); } }   /* counter-clockwise */
@media (prefers-reduced-motion: reduce){ .tour-badge .tour-badge-spin{ animation:none; } }
.tour-spiral-icon{
    display:inline-block; flex:none; width:1.35em; height:1.35em; border-radius:50%; vertical-align:-0.34em; border:1.5px solid #fff;
    background:radial-gradient(circle at 34% 28%, #7dd3fc 0%, #2563eb 50%, #1e1b8a 100%), #2563eb;
    box-shadow:0 0 0 1.5px #2B2420; overflow:hidden;
  }
.tour-spiral-icon svg{ display:block; width:100%; height:100%; animation:tour-spin 3.6s linear infinite; }
@media (prefers-reduced-motion: reduce){ .tour-spiral-icon svg{ animation:none; } }

/* ---------- Photo gallery: previous / next / count ---------- */
#gallery-prev, #gallery-next{
    position:absolute; top:50%; margin-top:-26px; z-index:2; width:44px; height:52px; padding:0;
    border:2px solid var(--paper); border-radius:12px; cursor:pointer;
    background:rgba(43,36,32,0.72); color:#fff; font-size:34px; line-height:1; font-family:var(--font-display);
  }
#gallery-prev{ left:max(8px, calc(50% - min(46vw, 450px) - 54px)); }
#gallery-next{ right:max(8px, calc(50% - min(46vw, 450px) - 54px)); }
#gallery-prev[hidden], #gallery-next[hidden], #gallery-count[hidden]{ display:none; }
@media (max-width: 1000px){
  #gallery-prev{ left:6px; } #gallery-next{ right:6px; }
  #gallery-prev, #gallery-next{ background:rgba(43,36,32,0.55); }
}
#gallery-count{
    position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:2;
    padding:4px 12px; border-radius:14px; background:rgba(43,36,32,0.72); color:#fff;
    font-family:var(--font-mono); font-size:max(10pt, 13.34px);
  }

/* ---------- Empty planet: "Showing zero properties. Search now: (search button)" on one centred line ---------- */
#planet-empty-prompt{
    display:none; position:fixed; z-index:30; top:62px; left:calc(50% + var(--nav-w) / 2); transform:translateX(-50%);   /* just under the 50px header */
    align-items:center; gap:8px; white-space:nowrap; max-width:calc(100% - var(--nav-w) - 16px); box-sizing:border-box;
    padding:5px 6px 5px 14px; background:var(--panel); border:2.5px solid var(--ink-900); border-radius:999px; box-shadow:3px 3px 0 rgba(43,36,32,0.3);
    font-family:var(--font-body); font-weight:700; color:var(--ink-900); font-size:clamp(11.5px, 3.5vw, 15px);
  }
#planet-search-btn{
    flex:0 0 auto; width:40px; height:40px; padding:0; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center;
    background:var(--brand-blue); border:2.5px solid var(--ink-900); font-size:19px; line-height:1;
    transition:transform .1s ease;
  }
#planet-search-btn:active{ transform:translate(1px,1px); }
/* only when looking at the (empty) planet itself: not over the landing screen, List, Map or a tour */
body.planet-empty:not(.landing-active):not(.detail-open):not(.tour-active):not(:has(#list-modal.open)):not(:has(#map-modal.open)) #planet-empty-prompt{ display:flex; }

/* ---------- List and Map: black, like the search screen ---------- */
#list-modal, #map-modal{ background:#000; }
#list-panel, #map-panel{ background:#000; color:#fff; }
#list-header, #map-header{ border-bottom:1px solid #2e2e2e; }
#list-title, #map-title{ color:#fff; }
#list-title .list-title-count, #map-title .list-title-count{ color:#bdbdbd; }
#list-close, #map-close{ color:#fff; opacity:.8; }
#list-view-toggle{ color:#7dd3fc; }
#list-view-toggle:hover{ color:#bae6fd; }
.list-item{ background:#141414; border-color:#333; box-shadow:none; color:#fff; }
.list-item:hover{ box-shadow:none; background:#1c1c1c; }
.list-item-photo{ border-color:#444; background:#222; }
.list-item-addr{ color:#fff; }
.list-item-meta{ color:#bdbdbd; }
#map-canvas{ background:#000; }
#map-empty{ color:#bdbdbd; }
#list-panel .empty-search-prompt, #map-panel .empty-search-prompt{ color:#fff; }

/* ---------- Exit Xs: bold ---------- */
/* The same heavy X on every exit button (search, List, Map, Property View, photo gallery, Guess the Price, share, contact). A text stroke thickens whatever X glyph the phone's font has, so it looks the same everywhere, and
   the buttons keep their sizes. Full strength (some were faded). */
#search-close, #list-close, #map-close, .dp-close, #price-game-close, #share-close, #lance-close, #gallery-close{
    font-weight:900; -webkit-text-stroke:1.6px currentColor; opacity:1;
  }

/* =====================================================================
   BOTTOM BAR: Search | Planet | List | Map
   Planet is the point of the app, so it is the big round button. On a phone held sideways (short and wide) the bar
   becomes a thin strip down the left edge so it costs width instead of scarce height; on a big screen it is a
   floating pill at the bottom centre. --nav-h / --nav-w are how much room it takes at the bottom / left; everything
   that fills the screen (landing, List, Map) and the floating buttons (Share, the empty-planet Search, the hammer)
   keep out of that room. It is hidden (and the room given back) while a property or the tour is on screen; the
   search screen and Guess the Price simply cover it.
   ===================================================================== */
:root{ --nav-h:62px; --nav-w:0px; }
body.tour-active{ --nav-h:0px; --nav-w:0px; }
#bottom-nav{
    position:fixed; z-index:10; left:0; right:0; bottom:0; height:62px;
    display:grid; grid-template-columns:1fr 1.3fr 1fr 1fr 1fr 1fr; align-items:stretch;
    background:var(--panel); border-top:2px solid var(--ink-900);
  }
body.tour-active #bottom-nav{ display:none; }
.nav-item{
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    min-width:0; padding:0; background:none; border:none; cursor:pointer; color:var(--ink-700);
    font-family:var(--font-display); font-weight:700;
  }
.nav-item:active{ background:rgba(43,36,32,0.07); }
.nav-icon{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.nav-label{ font-size:clamp(11.5px, 3.3vw, 13.34px); line-height:1.1; }
/* the current view */
body[data-view="list"] #list-btn, body[data-view="map"] #map-btn, body[data-view="planet"] #planet-btn{ color:var(--brand-blue); }
body[data-view="list"] #list-btn::after, body[data-view="map"] #map-btn::after{
    content:""; position:absolute; top:-2px; left:22%; right:22%; height:3px; border-radius:0 0 3px 3px; background:var(--brand-blue);
  }
/* Planet: a raised round button wearing the app's own symbol */
.nav-planet{ justify-content:flex-end; padding-bottom:5px; overflow:visible; }
.nav-planet-disc{
    position:absolute; top:-22px; left:50%; width:58px; height:58px; margin-left:-29px; border-radius:50%; box-sizing:border-box;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(circle at 35% 30%, #3a63cf 0%, #16255a 62%, #0a1030 100%);
    border:3px solid var(--ink-900); box-shadow:0 3px 0 rgba(43,36,32,0.35); transition:box-shadow .15s ease, transform .1s ease;
  }
.nav-planet-disc img{ width:34px; height:36px; display:block; }
.nav-planet:active .nav-planet-disc{ transform:translateY(2px); box-shadow:0 1px 0 rgba(43,36,32,0.35); }
body[data-view="planet"] .nav-planet-disc{ box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--brand-blue); }
/* screens that fill the page keep out of the bar's room */
#landing-screen, #list-modal, #map-modal{ bottom:var(--nav-h); left:var(--nav-w); }
/* the hammer sits above the bar */
#ability-dock{ bottom:calc(16px + var(--nav-h)); }
/* Property View stops at the bar, so Share and Contact stay in reach; the one Guess the Price raises over everything puts the bar above it too */
#detail-panel{ bottom:var(--nav-h); left:var(--nav-w); }
body:has(#detail-panel.pg-elevated) #bottom-nav{ z-index:46; }
/* A phone on its side: a thin strip down the left edge, under the header */
@media (orientation: landscape) and (max-height: 560px){
  :root{ --nav-h:0px; --nav-w:64px; }
  body.tour-active{ --nav-h:0px; --nav-w:0px; }
  #bottom-nav{
      left:0; right:auto; top:50px; bottom:0; width:64px; height:auto; display:flex; flex-direction:column; justify-content:space-evenly;
      border-top:none; border-right:2px solid var(--ink-900);
    }
  body.tour-active #bottom-nav{ display:none; }
  .nav-item{ flex:1 1 0; width:100%; min-height:0; gap:0; }
  .nav-planet{ flex:1.3 1 0; justify-content:center; padding-bottom:0; }
  .nav-planet-disc{ position:static; margin:0; width:36px; height:36px; border-width:2.5px; }
  .nav-planet-disc img{ width:22px; height:23px; }
  .nav-planet .nav-label{ margin-top:0; }
  .nav-icon{ width:19px; height:19px; }
  .nav-label{ font-size:12px; }
  body[data-view="list"] #list-btn::after, body[data-view="map"] #map-btn::after{ top:22%; bottom:22%; left:-2px; right:auto; width:3px; height:auto; border-radius:0 3px 3px 0; }
}
/* A big screen: a floating pill at the bottom centre */
@media (min-width: 700px) and (min-height: 561px){
  :root{ --nav-h:88px; }
  body.tour-active{ --nav-h:0px; }
  #bottom-nav{
      left:50%; right:auto; bottom:14px; width:min(520px, calc(100% - 24px)); margin-left:calc(min(520px, calc(100% - 24px)) / -2);
      border:2px solid var(--ink-900); border-radius:22px; box-shadow:0 4px 0 rgba(43,36,32,0.25);
    }
}