/* ahmedabadrent.in - one screen, the map.
   Design tokens carried over from the Claude Design canvas. */

/* Ahmedabad palette: indigo-black ground (the city's textile-dye colour)
   with a saffron primary. Deliberately distinct from other rent maps -
   nothing here is teal or purple. */
:root{
  --bg:#0C0E19; --surface:#161A2A; --surface-2:#1F2438;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.17);
  --text:#F6F4EF; --text-2:#9AA3B8; --text-3:#697388;
  --green:#2BD46C; --teal:#FF9E2C; --blue:#4CC2F1; --violet:#C08BFF;
  --pink:#FF7AA8; --amber:#FFC247; --red:#FF7A7A;
  --on-teal:#2B1602; --on-green:#04210E;
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;
  line-height:1.5;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
#map{position:absolute;inset:0}
.maplibregl-ctrl-attrib,.maplibregl-ctrl-logo{display:none!important}

/* ══ top bar ══ */
/* A two-column grid rather than stacked rows: the search input owns column
   one and the Filter/Tags/Full-map group owns column two, so the pills can be
   told to sit in column one and centre themselves on the search box. Centring
   them on the whole bar - which is what flex-column did - left them visibly
   pushed right, because the button group is only on one side. */
.topbar{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);left:50%;
  transform:translateX(-50%);z-index:6;width:min(760px,calc(100% - 20px));
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:8px;row-gap:9px;
  align-items:start;pointer-events:none}
.topbar>*,.searchrow>*{pointer-events:auto}

/* display:contents so .search and .sqs become the grid's own children */
.searchrow{display:contents}
.sqs{display:flex;gap:8px}
.search{position:relative;flex:1;min-width:0}
.search input{width:100%;height:52px;padding:0 18px;border:1px solid var(--line-2);
  border-radius:15px;background:rgba(15,20,38,.94);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);color:var(--text);font-family:inherit;font-size:15.5px}
.search input::placeholder{color:var(--text-3)}
.search input:focus{outline:none;border-color:var(--teal)}

.ac{position:absolute;left:0;right:0;top:58px;z-index:8;margin:0;padding:6px;
  list-style:none;max-height:52vh;overflow-y:auto;border:1px solid var(--line-2);
  border-radius:15px;background:rgba(17,22,42,.98);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);box-shadow:0 16px 40px rgba(0,0,0,.6)}
.ac[hidden]{display:none}
.ac li{padding:12px 13px;border-radius:10px;cursor:pointer;font-size:15px;
  display:flex;align-items:baseline;gap:8px}
.ac li:hover,.ac li.sel{background:rgba(255,255,255,.07)}
.ac b{font-weight:600}
.ac em{color:var(--text-3);font-style:normal;font-size:13px}

.sq{position:relative;flex:none;height:52px;padding:0 14px;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:1px solid var(--line-2);border-radius:15px;background:rgba(15,20,38,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--text)}
.sq svg{width:18px;height:18px}
.sq span{font-size:10.5px;color:var(--text-2)}
.sq.on{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.sq.on span{color:var(--on-teal)}
.dot{position:absolute;top:7px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--teal)}
.dot[hidden]{display:none}

.pills{grid-column:1;display:flex;flex-wrap:wrap;justify-content:center;gap:7px}
.pills button{height:36px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;
  background:rgba(15,20,38,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--text-2);font-size:13px;font-weight:500;white-space:nowrap}
.pills button:hover{color:var(--text);border-color:rgba(255,255,255,.3)}
/* No pill is pre-selected. "List my flat" used to be painted teal as the
   primary action, but on a row of four it reads as "this one is already
   chosen" - the choice is the visitor's. Pressed state only. */
.pills button:active{background:rgba(255,255,255,.07)}
.pills button span{font-size:13px;line-height:1}

/* ══ right rail ══ */
.rail{position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:5;
  display:flex;flex-direction:column;gap:7px}
.rail button{width:58px;height:54px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;border:1px solid var(--line-2);border-radius:13px;
  background:rgba(15,20,38,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--text)}
.rail svg{width:17px;height:17px}
.rail span{font-size:9.5px;color:var(--text-2);letter-spacing:.01em}
.rail button.on{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}
.rail button.on span{color:var(--on-teal)}

.zoom{position:absolute;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 34px);
  z-index:5;display:flex;flex-direction:column;border:1px solid var(--line-2);
  border-radius:13px;overflow:hidden;background:rgba(15,20,38,.94);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.zoom button{width:44px;height:40px;border:0;background:none;color:var(--text);font-size:19px;line-height:1}
.zoom button:hover{background:rgba(255,255,255,.08)}
.zoom button+button{border-top:1px solid var(--line)}

.attrib{position:absolute;left:12px;bottom:8px;z-index:4;margin:0;color:var(--text-3);font-size:10.5px}
.attrib a{color:var(--text-3)}

/* ══ place-pin step ══ */
.placebar{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);left:50%;
  transform:translateX(-50%);z-index:9;width:min(720px,calc(100% - 20px));
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 13px 13px 18px;border-radius:15px;
  background:linear-gradient(90deg,#F08A1C,#FFB24A);color:#2B1602;
  font-size:15px;font-weight:600;box-shadow:0 10px 30px rgba(240,138,28,.38)}
.placebar[hidden]{display:none}
.placebar button{flex:none;padding:9px 16px;border:0;border-radius:11px;
  background:#2B1602;color:#FFC77A;font-size:14px;font-weight:700}

/* The placement marker is a pointing hand, not a ring. A ring centred on the
   spot reads as "something is selected here"; a hand reads as "put it here",
   which is the instruction. The fingertip is the anchor, so the graphic sits
   below and right of the actual point. */
.crosshair{position:absolute;left:50%;top:50%;width:34px;height:41px;margin:-2px 0 0 -9px;z-index:7;pointer-events:none;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.65));animation:tap 1.6s ease-in-out infinite}
.crosshair[hidden]{display:none}
.crosshair svg{width:100%;height:100%;display:block}
.crosshair::after{content:"";position:absolute;left:0;top:-24px;width:48px;height:48px;
  margin:-9px 0 0 -15px;border-radius:50%;border:2px solid rgba(255,158,44,.5);
  animation:pulse 1.9s ease-out infinite}
@keyframes tap{0%,100%{transform:translate(0,0)}50%{transform:translate(0,4px)}}
@keyframes pulse{0%{transform:scale(.45);opacity:.9}100%{transform:scale(1);opacity:0}}

/* ══ modals ══ */
.scrim{position:absolute;inset:0;z-index:10;background:rgba(4,6,14,.66);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.scrim[hidden]{display:none}

.modal{position:absolute;z-index:11;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(520px,calc(100% - 24px));max-height:88vh;display:flex;flex-direction:column;
  border:1px solid var(--line-2);border-radius:20px;background:var(--surface);
  box-shadow:0 24px 70px rgba(0,0,0,.6);animation:pop .18s cubic-bezier(.22,1,.36,1)}
.modal[hidden]{display:none}
@keyframes pop{from{transform:translate(-50%,-47%) scale(.97);opacity:0}
  to{transform:translate(-50%,-50%) scale(1);opacity:1}}

.modal__head{flex:none;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:18px 20px 12px}
.modal__head h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.02em}
.x{width:34px;height:34px;border:0;border-radius:50%;background:var(--surface-2);
  color:var(--text-2);font-size:19px;line-height:1}
.x:hover{background:rgba(255,255,255,.12);color:var(--text)}

.modal__body{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 20px 18px}
.modal__foot{flex:none;display:flex;gap:10px;padding:14px 20px calc(env(safe-area-inset-bottom,0px) + 18px);
  border-top:1px solid var(--line)}
.modal__foot .btn{flex:1}

.btn{min-height:50px;padding:0 18px;border:0;border-radius:14px;font-size:15.5px;font-weight:700}
.btn--go{background:var(--teal);color:var(--on-teal)}
.btn--go:hover{filter:brightness(1.08)}
.btn--ghost{background:var(--surface-2);color:var(--text-2);border:1px solid var(--line-2)}
.btn--ghost:hover{color:var(--text)}

/* ══ form bits ══ */
.lbl{display:block;margin:18px 0 8px;font-size:13.5px;font-weight:600}
.lbl i{color:var(--red);font-style:normal}
.lbl em{color:var(--text-3);font-style:normal;font-weight:400;font-size:12.5px}

.opts{display:flex;flex-wrap:wrap;gap:7px}
.opts--2 button{flex:1;min-width:120px}
.opts button{min-height:46px;padding:0 15px;border:1px solid var(--line-2);border-radius:12px;
  background:var(--surface-2);color:var(--text-2);font-size:14.5px;font-weight:600}
.opts button:hover{color:var(--text);border-color:rgba(255,255,255,.3)}
.opts button.on{background:var(--teal);border-color:var(--teal);color:var(--on-teal)}

.money{display:flex;align-items:center;gap:8px;padding:0 14px;border:1px solid var(--line-2);
  border-radius:12px;background:var(--bg)}
.money span{color:var(--text-3);font-size:14px}
.money input{flex:1;min-width:0;height:50px;border:0;background:none;color:var(--text);
  font-family:inherit;font-size:17px;font-weight:600}
.money input:focus{outline:none}
.txt{width:100%;height:50px;padding:0 14px;border:1px solid var(--line-2);border-radius:12px;
  background:var(--bg);color:var(--text);font-family:inherit;font-size:15px}
.txt:focus{outline:none;border-color:var(--teal)}
.hint{margin:7px 0 0;color:var(--text-3);font-size:12.5px}
.err{margin:14px 0 0;padding:11px 13px;border-radius:11px;background:rgba(255,122,122,.14);
  color:var(--red);font-size:13.5px}
.err[hidden]{display:none}

.switch{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:18px;padding:13px 14px;border:1px solid var(--line);border-radius:13px;
  background:rgba(30,36,56,.5)}
.switch b{display:block;font-size:14.5px;font-weight:600}
.switch small{display:block;margin-top:2px;color:var(--text-3);font-size:12.5px}
.tgl{flex:none;width:52px;height:30px;padding:3px;border:1px solid var(--line-2);
  border-radius:999px;background:var(--surface-2)}
.tgl i{display:block;width:22px;height:22px;border-radius:50%;background:var(--text-3);
  transition:transform .16s ease,background .16s ease}
.tgl.on{background:rgba(255,158,44,.3);border-color:var(--teal)}
.tgl.on i{background:var(--teal);transform:translateX(22px)}

.stepper{flex:none;display:flex;align-items:center;gap:2px;border:1px solid var(--line-2);
  border-radius:11px;overflow:hidden;background:var(--surface-2)}
.stepper button{width:38px;height:38px;border:0;background:none;color:var(--text);font-size:17px}
.stepper button:hover{background:rgba(255,255,255,.08)}
.stepper output{min-width:34px;text-align:center;font-size:15px;font-weight:700}

/* ══ pin detail ══ */
.hero{display:flex;align-items:baseline;gap:8px;margin:4px 0 0}
.hero b{font-size:33px;font-weight:800;letter-spacing:-.03em}
.hero span{color:var(--text-3);font-size:14px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chips span{padding:5px 10px;border:1px solid var(--line-2);border-radius:8px;
  background:var(--surface-2);color:var(--text-2);font-size:12.5px}
.meta{margin:12px 0 0;color:var(--text-2);font-size:13.5px}
.badge{display:inline-block;margin-top:12px;padding:6px 11px;border-radius:999px;
  font-size:12px;font-weight:700;background:rgba(43,212,108,.16);color:var(--green)}
.note{margin:14px 0 0;padding:12px 13px;border-left:3px solid var(--line-2);
  border-radius:10px;background:rgba(30,36,56,.5);color:#CBD5E1;font-size:13.5px;font-style:italic}

.how{margin:4px 0 0;padding-left:20px;color:var(--text-2);font-size:14.5px}
.how li{margin-bottom:12px}
.how b{color:var(--text)}

/* ══ range ══ */
.rng__v{display:flex;justify-content:space-between;margin-bottom:8px}
.rng__v span{padding:5px 11px;border-radius:9px;background:var(--surface-2);font-size:13.5px;font-weight:700}
.rng__t{position:relative;height:30px}
.rng__t input{position:absolute;inset:0;width:100%;margin:0;-webkit-appearance:none;
  appearance:none;background:none;pointer-events:none}
.rng__t input::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:var(--surface-2)}
.rng__t input::-moz-range-track{height:5px;border-radius:3px;background:var(--surface-2)}
.rng__t input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;
  width:22px;height:22px;margin-top:-9px;border:3px solid var(--bg);border-radius:50%;background:var(--teal)}
.rng__t input::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border:3px solid var(--bg);
  border-radius:50%;background:var(--teal)}

/* ══ toast ══ */
.toast{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);
  transform:translateX(-50%);z-index:12;padding:12px 18px;border-radius:12px;
  background:rgba(17,22,42,.97);border:1px solid var(--line-2);color:var(--text);
  font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.toast[hidden]{display:none}

/* ══ small screens ══ */
@media (max-width:600px){
  .sq span{display:none}
  .sq{padding:0 13px}
  /* `safe center` centres the strip when the pills fit and falls back to
     flex-start when they overflow, so the first pill is never scrolled out of
     reach on a narrow phone. */
  .pills{justify-content:safe center;overflow-x:auto;flex-wrap:nowrap;
    width:100%;scrollbar-width:none;-ms-overflow-style:none}
  .pills::-webkit-scrollbar{display:none}
  .rail{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 84px);transform:none}
  .rail button{width:52px;height:48px}
  .zoom{display:none}
  .modal{width:100%;max-width:none;left:0;right:0;top:auto;bottom:0;transform:none;
    max-height:92vh;border-radius:20px 20px 0 0;border-bottom:0;animation:rise .2s ease}
  @keyframes rise{from{transform:translateY(100%)}to{transform:translateY(0)}}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ══ stat grid (trust modal) ══ */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}
.stats div{padding:12px 9px;border:1px solid var(--line);border-radius:12px;
  background:rgba(31,36,56,.55);text-align:center}
.stats b{display:block;color:var(--teal);font-size:18px;font-weight:800;letter-spacing:-.02em}
.stats small{display:block;margin-top:2px;color:var(--text-3);font-size:10.5px;line-height:1.35}

/* ══ median rows (area stats) ══ */
.row{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:0}
.row span{flex:none;width:52px;color:var(--text-2);font-size:13px;font-weight:600}
.row i{flex:1;height:7px;border-radius:4px;background:var(--surface-2);position:relative}
.row i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,0);
  border-radius:4px;background:var(--teal)}
.row b{flex:none;font-size:14.5px;font-weight:800}
.row.thin b{color:var(--text-3);font-size:12.5px;font-weight:500}

/* ══════════════════════════════════════════════════════════════
   DARK BASEMAP
   The map is dark because site/style-dark.js says so, not because
   the canvas is being inverted. The old trick - invert(1) plus a
   hue rotation over a light OSM raster - is what made the map read
   muddy and blurry, cost GPU on every pan, and had to be switched
   off whenever satellite imagery came on.

   All that remains is the ground colour, so tile gaps match the UI
   instead of flashing white.
   ══════════════════════════════════════════════════════════════ */
#map{background:var(--bg)}

/* ══ thumbnails ══ */
.thumbs{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.thumbs img{width:68px;height:68px;object-fit:cover;border-radius:10px;border:1px solid var(--line-2)}

/* ══ stars ══ */
.stars{display:flex;gap:6px}
.stars button{width:40px;height:40px;border:1px solid var(--line-2);border-radius:10px;
  background:var(--surface-2);color:var(--text-3);font-size:18px;line-height:1}
.stars button.on{background:rgba(255,194,71,.16);border-color:#FFC247;color:#FFC247}

/* ══ menu list ══ */
.menu{display:flex;flex-direction:column;gap:2px}
.menu button{display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;padding:15px 14px;border:0;border-radius:12px;background:none;
  color:var(--text);font-size:15px;text-align:left}
.menu button:hover{background:rgba(255,255,255,.06)}
/* The label and its explainer are a stacked pair. Without this they ran
   together inline - "Is it really free?Yes. Free for tenants..." - in the
   legend, the FAQ, Privacy, Terms and the More menu alike. */
.menu button span{display:flex;flex-direction:column;gap:3px;min-width:0}
.menu small{color:var(--text-3);font-size:12.5px;line-height:1.45}

/* ══ detail sheet ══ */
.dl{display:flex;align-items:center;gap:14px;margin:14px 0 0;padding-top:14px;
  border-top:1px solid var(--line);color:var(--text-2);font-size:13px;flex-wrap:wrap}
.dl b{color:var(--teal);font-weight:600}
.dl a{color:var(--blue);text-decoration:none}
.box{margin-top:16px;padding:14px 15px;border:1px solid var(--line-2);border-radius:14px;
  background:rgba(31,36,56,.55)}
.box h4{margin:0 0 5px;font-size:14.5px;font-weight:700}
.box p{margin:0;color:var(--text-2);font-size:13.5px}
.box a{color:var(--green);font-weight:600;text-decoration:none}
.box--cta{display:flex;align-items:center;gap:12px;cursor:pointer}
.box--cta:hover{border-color:var(--teal)}
.box--cta span{flex:none;color:var(--teal);font-size:20px}
.sect{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.sect h5{margin:0 0 8px;color:var(--text-3);font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em}
.linky{border:0;background:none;color:var(--teal);font-size:14px;font-weight:600;padding:8px 0;cursor:pointer}
.cmt{padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.cmt:last-of-type{border-bottom:0}
.cmt small{display:block;margin-top:3px;color:var(--text-3);font-size:11.5px}
.cmtbox{display:flex;gap:8px;margin-top:10px}
.cmtbox input{flex:1;min-width:0;height:44px;padding:0 13px;border:1px solid var(--line-2);
  border-radius:11px;background:var(--bg);color:var(--text);font-family:inherit;font-size:14px}
.cmtbox input:focus{outline:none;border-color:var(--teal)}
.cmtbox button{padding:0 16px;border:0;border-radius:11px;background:var(--teal);
  color:var(--on-teal);font-weight:700;font-size:14px}

/* ══ guided tour ══ */
.tour{position:absolute;inset:0;z-index:14}
.tour[hidden]{display:none}
.tour__spot{position:absolute;border-radius:16px;box-shadow:0 0 0 9999px rgba(4,6,14,.78);
  transition:all .28s cubic-bezier(.22,1,.36,1);pointer-events:none}
.tour__box{position:absolute;width:min(330px,calc(100% - 28px));padding:18px;
  border:1px solid var(--line-2);border-radius:16px;background:var(--surface);
  box-shadow:0 18px 46px rgba(0,0,0,.6)}
.tour__step{margin:0;color:var(--text-3);font-size:11px;font-weight:700;letter-spacing:.08em}
.tour__box h3{margin:6px 0 6px;font-size:17px;font-weight:700}
.tour__box p{margin:0;color:var(--text-2);font-size:14px}
.tour__act{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}

.cmp{margin:14px 0 0;padding:11px 13px;border-radius:11px;
  background:rgba(43,212,108,.13);color:var(--green);font-size:13.5px}
.cmp[hidden]{display:none}

.ac li.none{color:var(--text-3);font-size:14px;cursor:default}
.ac li.none:hover{background:none}

/* Google-sourced suggestions are marked so the source is never ambiguous */
.ac li.g b::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;
  border-radius:50%;background:var(--blue);vertical-align:middle}

/* POI key in the legend dialog - two columns of icon + label. */
.legend-icons{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px}
.legend-icons span{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-2)}
.legend-icons svg{flex:0 0 auto}
@media (max-width:420px){.legend-icons{grid-template-columns:1fr}}


/* The brand mark used to sit here, top left, and the top bar had to be pushed
   off-centre at every width to clear it. With it gone the bar is centred on
   every screen and the colour key takes the corner. */

/* ══ range: show the chosen band ══
   The two thumbs sat on a uniform grey track, so the one thing the control
   exists to express - the band between them - was invisible. */
.rng__t::before{content:"";position:absolute;left:0;right:0;top:13px;height:5px;
  border-radius:3px;background:var(--surface-2);pointer-events:none}
.rng__f{position:absolute;top:13px;height:5px;border-radius:3px;pointer-events:none;
  background:linear-gradient(90deg,var(--teal),#FFC247)}
.rng__t input::-webkit-slider-runnable-track{background:transparent}
.rng__t input::-moz-range-track{background:transparent}
.rng__v span{transition:color .12s ease}
.rng__v span.live{color:var(--teal)}


/* ══ colour key ══
   Top left, in the corner the brand mark used to occupy. Collapsed by default
   on a phone, where the map is the whole screen and a permanent panel would be
   in the way. */
.key{position:absolute;z-index:6;left:12px;
  top:calc(env(safe-area-inset-top,0px) + 12px);width:270px;
  border:1px solid var(--line-2);border-radius:14px;background:var(--surface);
  backdrop-filter:blur(12px);overflow:hidden}
.key__t{display:flex;align-items:center;justify-content:space-between;gap:8px;
  width:100%;padding:9px 11px;border:0;background:none;color:var(--text-2);
  font-size:11.5px;font-weight:600;letter-spacing:.02em;text-align:left}
.key__t svg{width:14px;height:14px;flex:none;transition:transform .18s ease}
.key[data-shut] .key__t svg{transform:rotate(-90deg)}
.key[data-shut] .key__b{display:none}
/* Eleven rows in a single column was a column of text down the side of the
   map. Two columns on a laptop halves how much of the city it covers. */
.key__b{padding:0 11px 10px;display:grid;grid-template-columns:1fr 1fr;gap:5px 12px}
.key__b hr{grid-column:1/-1}
.key__b span{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text-2)}
.key__b i{width:16px;height:9px;border-radius:3px;background:var(--c);flex:none}
.key__b hr{width:100%;height:1px;border:0;background:var(--line-2);margin:3px 0}
@media (max-width:900px){
  .key{top:calc(env(safe-area-inset-top,0px) + 64px);left:12px;width:250px}
}
/* On a phone the top bar is two rows deep and the key was landing on the
   second one. Move it to the bottom-left, where only the attribution lives,
   and let it grow upwards. */
@media (max-width:600px){
  .key{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 30px);left:8px;width:212px}
  .key__b{max-height:40vh;overflow-y:auto}
  /* Hiding the tags is a menu row on a phone (it is in More); the search box
     needs the width more than the shortcut does. */
  .sq#btn-hide{display:none}
}

/* A miniature rent tag, for the legend dialog. */
.lg{display:inline-block;padding:3px 8px;border-radius:7px;background:var(--c);
  color:#0A0C16;font-size:11.5px;font-weight:700;font-style:normal}

/* ══════════════════════════════════════════════════════════════
   COLLAPSING THE CHROME

   The map is the product, so it gets the screen when asked. One
   class on <html> takes the top chrome, the key and the rail out
   of the way; one pill brings them back.
   ══════════════════════════════════════════════════════════════ */
.chrome-off .topbar,.chrome-off .key{opacity:0;pointer-events:none;
  transform:translateY(-10px);transition:opacity .16s ease,transform .16s ease}
.chrome-off .rail{opacity:.25}
.chrome-off .rail:hover{opacity:1}
.chrome-show{position:absolute;z-index:7;top:calc(env(safe-area-inset-top,0px) + 12px);left:50%;
  transform:translateX(-50%);display:flex;align-items:center;gap:8px;height:44px;padding:0 18px;
  border:1px solid var(--line-2);border-radius:999px;background:rgba(22,26,42,.94);
  backdrop-filter:blur(8px);color:var(--text);font-size:14px;font-weight:600;cursor:pointer}
.chrome-show[hidden]{display:none}
.chrome-show svg{width:16px;height:16px}

/* ══ metre-band input inside a switch row ══ */
.km{flex:none;display:flex;align-items:center;gap:5px;padding:0 10px;height:38px;
  border:1px solid var(--line-2);border-radius:10px;background:var(--surface-2)}
.km input{width:44px;border:0;background:none;color:var(--text);font-size:14px;
  font-weight:700;font-family:var(--font);-moz-appearance:textfield}
.km input:focus{outline:none}
.km input::-webkit-outer-spin-button,.km input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.km span{color:var(--text-3);font-size:12px}

/* ══ stats: the spread behind a median, and a way back to the flats ══ */
.opts--3 button{flex:1;min-width:0;padding:0 10px;font-size:13.5px}
.row--sum{border-bottom:1px solid var(--line-2)}
.row--sum span,.row--sum b{color:var(--teal)}
.row b em{display:block;margin-top:2px;color:var(--text-3);font-size:11px;
  font-style:normal;font-weight:500;letter-spacing:0}
.lb{display:flex;align-items:center;gap:11px;width:100%;padding:10px 4px;border:0;
  border-bottom:1px solid var(--line);background:none;color:var(--text);text-align:left;cursor:pointer}
.lb:last-child{border-bottom:0}
.lb:hover{background:rgba(255,255,255,.05)}
.lb__n{flex:none;width:26px;color:var(--text-3);font-size:12px;font-weight:700}
.lb__m{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.lb__m b{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb__m small,.lb__p small{color:var(--text-3);font-size:11.5px}
.lb__p{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.lb__p b{color:var(--teal);font-size:14px;font-weight:700}

/* ══ a listing's photos ══ */
.shotbox{margin:0 0 14px}
.shots{position:relative;border-radius:14px;overflow:hidden;background:var(--surface-2)}
.shots img{display:block;width:100%;height:210px;object-fit:cover}
.shots img[hidden]{display:none}
.shots__n{position:absolute;right:10px;bottom:10px;padding:3px 9px;border-radius:999px;
  background:rgba(4,6,14,.72);color:var(--text);font-size:11.5px;font-weight:600}
.shots__a{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;
  border:0;border-radius:50%;background:rgba(4,6,14,.6);color:var(--text);font-size:20px;
  line-height:1;cursor:pointer}
.shots__a--p{left:8px}
.shots__a--n{right:8px}
.dots{display:flex;justify-content:center;gap:5px;margin-top:8px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--line-2)}
.dots i.on{background:var(--teal)}

/* ══ the board photo on a To-Let sheet ══ */
.shot{display:block;width:100%;height:230px;object-fit:cover;border-radius:14px;
  margin-bottom:14px;background:var(--surface-2)}

/* ══ a warning that keeps the data rather than deleting it ══ */
.box--warn{border-color:rgba(255,158,44,.5);background:rgba(255,158,44,.08)}
.box--warn h4{color:var(--teal)}

/* ══ where your rent sits, right after you pin it ══ */
.dist{position:relative;height:34px;margin:18px 0 6px;border-radius:999px;
  background:linear-gradient(90deg,rgba(43,212,108,.28),rgba(255,158,44,.28),rgba(255,122,122,.28))}
.dist i{position:absolute;top:-5px;left:var(--at);width:3px;height:44px;border-radius:2px;
  background:var(--text);box-shadow:0 0 0 3px rgba(12,14,25,.9)}
.dist span{position:absolute;top:40px;color:var(--text-3);font-size:11px}
.dist span:first-of-type{left:0}
.dist span:last-of-type{right:0}
.done-line{margin:34px 0 0;color:var(--text-2);font-size:14.5px;line-height:1.55}
.done-line b{color:var(--text)}

@media (max-width:600px){
  .km input{width:38px}
}

/* ══ the rail, on a phone ══
   Four buttons, not seven. To-Let, Stats and Locate are in the More sheet
   below - they are all one-tap actions that read perfectly well as a menu
   row, where a layer toggle like Metro or Green does not. */
@media (max-width:900px){
  /* .rail button sets display:flex, so this has to match at least as
     specifically or the button stays on screen. */
  .rail button.rail__x{display:none}
}

/* A heading inside the More menu. */
.menu__h{margin:14px 0 4px;padding:0 4px;color:var(--text-3);font-size:10.5px;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.menu__h:first-child{margin-top:2px}

/* ══ drawing an area ══
   Corner grips. Big enough to hit with a thumb, quiet enough not to read as
   pins - the rectangle is the subject, these are its handles. */
.hdl{width:20px;height:20px;border-radius:5px;cursor:grab;
  border:2px solid var(--bg);background:var(--teal);
  box-shadow:0 2px 8px rgba(0,0,0,.55)}
.hdl:active{cursor:grabbing;transform:scale(1.12)}

/* ══ stats sheet ══ */
.head__txt{min-width:0}
.head__txt h2{margin:0}
.sub{margin:3px 0 0;color:var(--text-3);font-size:13px}

/* Segmented control: one pressed state across three options. */
.seg{display:flex;gap:4px;margin-bottom:14px;padding:4px;border-radius:13px;
  background:var(--surface-2)}
.seg button{flex:1;min-height:38px;padding:0 8px;border:0;border-radius:10px;
  background:transparent;color:var(--text-2);font-size:13.5px;font-weight:600;
  white-space:nowrap}
.seg button.on{background:var(--teal);color:var(--on-teal)}

/* One row per size: what it is on the left, what it costs on the right. */
.stat{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-bottom:8px;padding:14px 16px;border-radius:14px;background:var(--surface-2)}
.stat>span{display:flex;flex-direction:column;gap:3px;min-width:0}
.stat>span b{font-size:15.5px;font-weight:700}
.stat>span small{color:var(--text-3);font-size:12.5px}
.stat>b{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:2px;
  font-size:21px;font-weight:800;letter-spacing:-.01em}
.stat>b em{color:var(--text-3);font-size:12px;font-weight:500;font-style:normal}

/* The headline number sits apart from the per-size rows. */
.stat--sum{margin-bottom:14px;border:1px solid rgba(255,158,44,.35);
  background:rgba(255,158,44,.1)}
.stat--sum>span b,.stat--sum>b{color:var(--teal)}
.stat--sum>b{font-size:20px}

/* ══ More tools ══
   Scoped to #more-menu rather than .menu, which is shared with the legend,
   the FAQ and the policy sheets - those are prose and read better as plain
   rows. Three tools read better as three cards. */
#more-menu{gap:10px}
#more-menu button{padding:16px;border:1px solid var(--line-2);border-radius:14px;
  background:var(--surface-2)}
#more-menu button:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06)}
#more-menu button b{font-size:16px;font-weight:700}

/* ══════════════════════════════════════════════════════════════
   DRAWING AN AREA
   ══════════════════════════════════════════════════════════════ */

/* Crosshair guides. Full width and height so a corner can be lined up
   against something on the far side of the map. */
.xhair{position:absolute;inset:0;z-index:4;pointer-events:none}
.xhair[hidden]{display:none}
.xhair i{position:absolute;background:rgba(255,158,44,.55)}
.xhair__v{top:0;bottom:0;left:var(--x,-99px);width:1px}
.xhair__h{left:0;right:0;top:var(--y,-99px);height:1px}

/* The hint strip sits at the bottom, out of the way of what you are drawing. */
.drawhint{position:absolute;z-index:8;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom,0px) + 18px);
  display:flex;align-items:center;gap:14px;max-width:calc(100% - 24px);
  padding:11px 12px 11px 18px;border:1px solid var(--line-2);border-radius:999px;
  background:rgba(22,26,42,.95);backdrop-filter:blur(14px);
  color:var(--text);font-size:14.5px;white-space:nowrap}
.drawhint[hidden]{display:none}
.drawhint button{flex:none;padding:8px 14px;border:0;border-radius:999px;
  background:rgba(255,255,255,.08);color:var(--text-2);font-size:13.5px;font-weight:600}
.drawhint button:hover{color:var(--text);background:rgba(255,255,255,.14)}

/* Pinned to the bottom edge of the box, centred on it. */
.drawgo{position:absolute;z-index:8;transform:translateX(-50%)}
.drawgo[hidden]{display:none}
.drawgo .btn{min-height:46px;padding:0 26px;border-radius:999px;font-size:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.5)}

/* Eight grips: corners solid, edge midpoints a touch smaller and quieter. */
.grip{width:15px;height:15px;border-radius:50%;cursor:grab;
  border:2.5px solid var(--teal);background:var(--text);
  box-shadow:0 2px 8px rgba(0,0,0,.55)}
.grip--edge{width:12px;height:12px;border-width:2px;opacity:.85}
.grip:active{cursor:grabbing;transform:scale(1.15)}

/* ══ a one-time explainer ══ */
.modal--intro{text-align:center}
.modal--intro .modal__body{padding-top:30px}
.intro__ico{margin:0;font-size:40px;line-height:1}
.intro__h{margin:14px 0 0;font-size:24px;font-weight:700;letter-spacing:-.02em}
.intro__p{margin:12px 0 0;color:var(--text-2);font-size:15.5px;line-height:1.55}
.steps{margin:22px 0 0;padding:16px;list-style:none;text-align:left;
  border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}
.steps li{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.steps li:last-child{margin-bottom:0}
.steps span{flex:none;width:26px;height:26px;display:flex;align-items:center;
  justify-content:center;border-radius:50%;background:var(--teal);
  color:var(--on-teal);font-size:13px;font-weight:800}
.steps p{margin:3px 0 0;font-size:15px;line-height:1.4}
.steps b{font-weight:700}
.intro__foot{margin:14px 2px 0;color:var(--text-3);font-size:13px;
  line-height:1.5;text-align:left}
.modal--intro .modal__foot{gap:10px}

@media (max-width:600px){
  .drawhint{font-size:13.5px;gap:10px;padding-left:15px}
  .drawgo .btn{min-height:44px;padding:0 20px;font-size:15px}
}