/* ===========================================================================
   shared/chrome.css — the furniture every section of torontopolis shares
   ---------------------------------------------------------------------------
   WHY THIS FILE EXISTS

   Map mode and the rentals section had grown their own headers: the map had a
   44px glyph, a tagline and pill tabs; /rent/ had a small logo, a section
   switcher and a search field. Both were fine on their own and together they
   read as two different websites — which is exactly what someone switching
   Map mode on and off saw.

   So the pieces that are genuinely the same thing in every section live here
   once, and nowhere else:

     .bsw      the brand, which doubles as the section switcher
     .navbtn   every header button, including Sign in and My List
     .bm-badge the saved count on My List
     .auth-*   the account menu
     .mapsw    the Map mode toggle

   These rules were deleted from index.html's inline <style> and from
   rent/app.css when they moved here. Do not copy them back: two copies is how
   the two halves drifted apart in the first place.

   It styles against the tokens both sections already define — --ink, --ink-2,
   --ink-3, --line, --line-2, --bg, --panel, --panel-2, --accent, --font — and
   uses literal shadows, because the map calls them --elev1 and rentals calls
   them --sh1.
   ========================================================================= */

/* ===== Cross-document transition ==========================================
   Switching Map mode is a real navigation between two documents, and the
   default is a white flash: the old page is thrown away before the new one
   paints. This makes the browser cross-fade them instead, and because both
   documents now draw the same header in the same place, the header appears to
   stay put while the body changes underneath it. Chrome and Safari honour it;
   Firefox ignores it and gets the old instant swap, which is what it does
   today. Nothing depends on it, so there is nothing to fall back to.
   ========================================================================= */

/* ===== The section colours ===============================================
   torontopolis has had two section colours for a long time — amber for
   rentals, purple for planning — but only the map explorer's tabs used them,
   and they used them as a solid fill. These three tokens put the same pair in
   every section's hands:

     --sect        the colour itself, for the brand's section label
     --sect-tint   a light wash of it, for whatever is currently selected
     --sect-ink    a darker version, readable as text on the wash

   A section sets them once. Everything selected — a nav item, a tab, a row in
   the switcher — then picks up its own section's colour instead of grey, and
   a glance at the page says which half of the site you are in.
   ========================================================================= */
:root{
  --rentals:#f2a900;
  --aic:#5b3dc4;
  /* Default to rentals; each section and each map mode overrides it. */
  --sect:var(--rentals);
  --sect-tint:#fdf2d9;
  --sect-ink:#8a6a00;

  /* ONE page-title size for the whole site. "All buildings", "Research",
     "My List", a neighbourhood's name, a ward's name and an application's
     address are all the same thing — the title of the page you are on — and
     they had drifted to 22, 25, 34 and 38px depending on which view drew
     them. Soham's note: the small one was never the right one. */
  /* The gap between the header and a page's title. It was 52px in /rent/ and
     nothing at all in /plan/, where a top-level section only carried a bottom
     margin — so "Research" and "Wards" sat hard against the header. */
  --pg-top:46px;
  /* A spacing scale, so gaps are a decision rather than whatever number was
     typed that day. Everything below is a multiple of 4 and sized against the
     type it separates: --sp-tt is title-to-text, --sp-ts is title-to-content,
     --sp-sec is between sections, --sp-band is a tinted band's own inset.
     These replaced 5, 12, 13, 18, 20, 26, 34 and 52px chosen ad hoc. */
  --sp-tt:10px;
  --sp-ts:26px;
  --sp-sec:52px;
  --sp-band:44px;

  --h-page:clamp(30px,3.6vw,40px);
  --h-page-lh:1.1;
  --h-page-ls:-.028em;
}

@view-transition{ navigation:auto; }
@media (prefers-reduced-motion:reduce){ @view-transition{ navigation:none; } }

/* ===== The brand, which is also the section switcher ======================
   <details>, so it opens with no script at all — the 3,611 static building
   pages carry this same markup and run none.
   ========================================================================= */
.bsw{position:relative;flex:none;}
.bsw > summary{display:flex;align-items:center;gap:9px;cursor:pointer;
  list-style:none;padding:4px 7px 4px 4px;border-radius:10px;}
.bsw > summary::-webkit-details-marker{display:none;}
.bsw > summary::marker{content:"";}
.bsw > summary:hover{background:var(--panel-2);}
.bsw > summary img{border-radius:7px;display:block;}
.bsw-t{display:block;font-weight:700;font-size:17px;letter-spacing:-.02em;
  line-height:1.05;white-space:nowrap;color:var(--ink);}
.hdr-ca{color:var(--ink-3);font-weight:600;}
/* RENTALS in amber, PLANNING in purple — the label is the clearest place on
   the page to say which half of the site this is, and it was grey. */
.bsw-sub{display:flex;align-items:center;gap:3px;margin-top:1px;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--sect-ink);}
.bsw-sub svg{width:11px;height:11px;transition:transform .15s ease;}
.bsw[open] .bsw-sub svg{transform:rotate(180deg);}
.bsw-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:1400;width:320px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px;
  box-shadow:0 2px 6px rgba(16,20,24,.07),0 12px 32px rgba(16,20,24,.14);}
.bsw-i{display:block;padding:10px 12px;border-radius:10px;text-decoration:none;}
.bsw-i b{display:block;font-size:14px;font-weight:700;color:var(--ink);}
.bsw-i span{display:block;font-size:12px;color:var(--ink-3);line-height:1.45;margin-top:2px;}
.bsw-i:hover{background:var(--panel-2);}
/* The section you are in is marked, not hidden: it is still the way back to
   that section's own home page from a building or application page. */
.bsw-i.on{background:var(--sect-tint);box-shadow:inset 2px 0 0 var(--sect);}
/* The version number and the "not the City" line, which used to sit in the
   map header's tagline. One click away is close enough for a bug report. */
.bsw-foot{margin:4px 2px 0;padding:9px 10px 4px;border-top:1px solid var(--line);
  font-size:11px;line-height:1.5;color:var(--ink-3);}
.bsw-foot .app-ver{font-variant-numeric:tabular-nums;}
@media (max-width:520px){ .bsw-menu{width:min(300px,calc(100vw - 32px));} }

/* ===== Header buttons ===================================================== */
/* flex:none is the whole fix for the My List badge, and the thing earlier
   attempts missed. .hdr-acct is a flex row, so this button shrank to whatever
   was left over — 110px for 132px of content — and because its own children
   are flex:none they simply overflowed, which put the red count circle on top
   of the last letter of the word it counts. Making the children rigid without
   making the button rigid only moved the overflow around. */
.navbtn{appearance:none;border:none;background:var(--panel-2);color:var(--ink-2);
  font-family:var(--font);font-size:13px;font-weight:500;padding:9px 14px;
  border-radius:8px;cursor:pointer;white-space:nowrap;text-decoration:none;
  flex:none;
  display:inline-flex;align-items:center;gap:7px;transition:background .15s,box-shadow .15s,color .15s;}
.navbtn:hover{background:var(--bg);color:var(--ink);box-shadow:0 1px 2px rgba(16,20,24,.06);}
.navbtn svg{width:15px;height:15px;flex:none;}
.navbtn.primary{background:var(--ink);color:#fff;}
.navbtn.advertise{background:linear-gradient(180deg,#ff5e54,#ff3b30);color:#fff;border:none;}
/* Signed in: the button carries the account colour so the state is readable
   without opening the menu. */
.navbtn.in{color:var(--accent,#0f3b43);}
/* flex:none on both the label and the badge. Without it the browser shrinks
   them to fit the bar, and because the label is white-space:nowrap its text
   then overflows its own box and runs under the badge — which is exactly what
   "My Lis(11)" was. A count that covers the word it counts is worse than no
   count.

   The second half of that bug was the JS: it set style.display to
   "inline-block", and an inline value beats the inline-flex here, so the
   number sat on the text baseline instead of being centred in its circle and
   the whole badge rode up over the label. Both painters now write "" and let
   this rule decide. Do not put a display value back in the JavaScript.

   Spacing comes from .navbtn's own `gap`, not from a margin here: with both,
   the badge was pushed to the edge of the pill and looked like it had fallen
   out of it. */
.navbtn .lbl{flex:none;}
.bm-badge{flex:none;align-self:center;
  background:var(--red,#d64541);color:#fff;
  font-size:10.5px;font-weight:700;line-height:1;
  min-width:19px;height:19px;padding:0 6px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  margin:0;font-variant-numeric:tabular-nums;letter-spacing:0;}

/* ===== The account menu =================================================== */
.auth-menu{position:fixed;top:56px;right:16px;background:var(--panel);
  border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.16);padding:8px;z-index:9500;
  display:none;min-width:232px;max-width:290px;}
.auth-menu.show{display:block;}
.auth-menu .em{white-space:normal;line-height:1.45;}
.auth-menu .who{display:flex;align-items:center;gap:10px;padding:10px;
  border-bottom:1px solid var(--line);margin-bottom:6px;}
.auth-menu .who .nm,.who-text .nm{font-weight:600;font-size:13.5px;color:var(--ink);}
.auth-menu .who .em,.who-text .em{font-size:11.5px;color:var(--ink-3);}
.auth-pic{width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.auth-initials{width:40px;height:40px;border-radius:50%;background:var(--blue,#2f6fed);
  color:#fff;display:grid;place-items:center;font-size:14px;font-weight:700;flex-shrink:0;}
.auth-avatar{width:24px;height:24px;border-radius:50%;background:var(--blue,#2f6fed);
  color:#fff;display:grid;place-items:center;font-size:10px;font-weight:700;flex-shrink:0;}
.auth-menu button{width:100%;text-align:left;border:none;background:none;
  font-family:var(--font);font-size:13.5px;padding:9px 10px;border-radius:8px;
  cursor:pointer;color:var(--ink);}
.auth-menu button:hover{background:var(--bg);}
/* Google sign-in: follows Google's branding guidance — full-colour G on a
   neutral surface. */
.auth-menu button.gbtn{display:flex;align-items:center;justify-content:center;gap:9px;
  text-align:center;border:1px solid var(--line-2,var(--line));background:var(--panel);
  font-weight:600;font-size:13px;padding:10px;margin-top:2px;}
.auth-menu button.gbtn:hover{background:var(--bg);border-color:var(--ink-3);}
.auth-menu button.gbtn svg{flex:0 0 auto;display:block;}
.auth-menu button.gbtn[disabled]{opacity:.6;cursor:default;}
.auth-menu .gnote{font-size:11px;line-height:1.45;color:var(--ink-3);padding:7px 10px 3px;}

/* ===== The Map mode toggle ================================================
   An actual switch rather than a link, because it reads as one setting in two
   places — the two halves of the site are a toggle, not a one-way door out.
   ========================================================================= */
/* It was the words "Map mode" plus a 32px pill switch — the widest thing in
   the bar, for one destination. A folded map says it in 36px, and it is the
   same glyph the drawer already uses for the map explorer. The accessible
   name is still "Map mode"; see aria-label on the anchor. */
.mapsw{display:inline-grid;place-items:center;width:36px;height:36px;flex:none;
  padding:0;border:1px solid var(--line);border-radius:9px;text-decoration:none;
  color:var(--ink-2);transition:background .15s,color .15s,border-color .15s;}
.mapsw svg{width:19px;height:19px;}
.mapsw:hover{background:var(--panel-2);color:var(--ink);border-color:var(--ink-3);}
/* On the map already: filled, so the control reads as a state and not just a
   link somewhere else. */
.mapsw[aria-checked="true"]{background:var(--amber,#c77d03);color:#fff;
  border-color:var(--amber,#c77d03);}
.mapsw[aria-checked="true"]:hover{color:#fff;}

@media (max-width:1080px){ .navbtn .lbl{display:none;} .navbtn{padding:9px 11px;} }
/* Once the labels are gone these are bare glyphs, and at 31px square they
   were the smallest targets in the header. Match the Map mode button. */
@media (max-width:820px){
  .navbtn{min-width:36px;min-height:36px;justify-content:center;padding:0 10px;}
  .hdr-acct{gap:6px;}
}

/* ===== Selected items ====================================================
   One rule for "this is the one you are on", shared by /rent/'s and /plan/'s
   header nav and by the map explorer's tabs. It used to be two different
   things: a soft grey pill here, a solid purple pill with a white label and a
   3px underline on the map. Grey says nothing, and the solid fill was the
   loudest element in the header. A light wash of the section's own colour
   with the label in that colour says the same thing quietly, and says which
   section you are in at the same time.
   ========================================================================= */
/* DIRECT CHILDREN ONLY. The Tools dropdown lives inside this nav, so a bare
   ".hdr-nav a" also matched every link in its menu — and handed them
   white-space:nowrap, which meant the descriptions did not wrap and ran
   straight out of the right-hand side of the panel. It also overrode their
   font size and padding. The ">" is what keeps the nav's styling in the nav. */
.hdr-nav{display:flex;gap:4px;align-items:center;}
.hdr-nav > a{text-decoration:none;font-size:14px;font-weight:500;color:var(--ink-2);
  padding:7px 11px;border-radius:9px;white-space:nowrap;
  transition:background .15s,color .15s;}
.hdr-nav > a:hover{background:var(--panel-2);color:var(--ink);}
.hdr-nav > a.on{color:var(--sect-ink);background:var(--sect-tint);font-weight:600;}

/* ===== The anchored three ================================================
   My List, Sign in and Map mode are the only controls every section has, so
   they are the ones that must not move. Two things were moving them:

   1. Map mode was the FIRST button in the map explorer's cluster and the LAST
      in /rent/'s, so using it made all three jump sideways. The markup is in
      one order everywhere now — My List, Sign in, Map mode, hard against the
      right edge, with any section-only buttons pushed left of them.
   2. The Sign in button relabels itself with the user's first name once they
      are signed in, and "Sign in" and "Alexandra" are not the same width, so
      the whole row slid when auth resolved a moment after paint. A min-width
      holds the space either way.
   ========================================================================= */
.hdr-acct,.navbtns{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto;}
.hdr-acct + .mapsw{margin-left:0;}
/* Reserve the widest of "Sign in" and a first name, so the row does not slide
   when auth resolves a moment after paint. */
#btnAuth{min-width:104px;justify-content:center;}

/* THE BADGE IS IN NORMAL FLOW. It used to be position:absolute at right:7px
   inside a button pinned to min-width:110px with justify-content:center, and
   22px of right padding to clear it. That works for a one-digit count and
   fails for two: the centred label grows towards a badge that cannot move,
   so "My List" + 11 collided and the red circle sat on top of the final "t".
   No amount of tuning the padding fixes that — the label and the badge were
   laid out independently and nothing made them aware of each other.

   In flow they are two flex items with a gap, so they cannot overlap at any
   count, in any font, in any language.

   The min-width is what keeps the button steady when the badge appears, which
   is what the absolute positioning was really for: 125px is the button at its
   widest — icon, gap, "My List", gap, a two-digit badge, and the padding.
   A three-digit count grows it by about 5px and still cannot overlap. */
#btnList{min-width:125px;justify-content:flex-start;}
.mapsw{flex:none;}
@media (max-width:1080px){
  /* Icons only. The widths come off with the labels, or the icons sit in the
     middle of two empty boxes. */
  #btnAuth,#btnList{min-width:0;}
}

/* ===== Tools ============================================================
   The fourth item in every section's nav: the things you come to a section to
   USE rather than to read. <details>, like the brand switcher, so it opens
   with no script at all.
   ========================================================================= */
.tools{position:relative;}
.tools > summary{display:inline-flex;align-items:center;gap:4px;cursor:pointer;
  list-style:none;font-size:14px;font-weight:500;color:var(--ink-2);
  padding:7px 11px;border-radius:9px;white-space:nowrap;
  transition:background .15s,color .15s;}
.tools > summary::-webkit-details-marker{display:none;}
.tools > summary::marker{content:"";}
.tools > summary:hover{background:var(--panel-2);color:var(--ink);}
.tools[open] > summary{background:var(--sect-tint);color:var(--sect-ink);font-weight:600;}
.tools > summary svg{transition:transform .15s ease;}
.tools[open] > summary svg{transform:rotate(180deg);}
.tools-menu{position:absolute;top:calc(100% + 6px);left:0;z-index:1400;width:310px;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:6px;
  box-shadow:0 2px 6px rgba(16,20,24,.07),0 12px 32px rgba(16,20,24,.14);}
.tools-menu a{display:block;padding:10px 12px;border-radius:10px;
  text-decoration:none;white-space:normal;font-size:14px;font-weight:400;}
.tools-menu a:hover{background:var(--panel-2);}
.tools-menu b{display:block;font-size:14px;font-weight:700;color:var(--ink);}
.tools-menu span{display:block;font-size:12px;color:var(--ink-3);line-height:1.45;margin-top:2px;}
@media (max-width:860px){ .tools{display:none;} }

/* ===========================================================================
   Small screens
   ---------------------------------------------------------------------------
   The header has five things in it and a phone fits about three. The order of
   sacrifice, from least to most useful on a phone:

     1. the section nav      — every link in it is in the drawer
     2. the search field     — every view has its own search
     3. the Tools menu       — in the drawer too
     4. the button labels    — the icons carry them

   What survives at 375px is the burger, the brand, My List, Sign in and the
   Map mode switch, which is the smallest set that still lets someone get
   anywhere. Before this the nav simply ran off the right edge and took the
   account cluster and the Map mode switch with it — they were rendered at
   x=582 and x=710 in a 375px header, i.e. off the screen entirely.
   ========================================================================= */
@media (max-width:880px){
  .hdr-nav,.tools{display:none !important;}
}
@media (max-width:880px){
  /* The brand gives up space first, and truncates rather than pushing. */
  .bsw{min-width:0;flex:0 1 auto;}
  .bsw > summary{padding:4px;gap:7px;min-width:0;}
  .bsw-t{font-size:15px;overflow:hidden;text-overflow:ellipsis;}
  .hdr-acct{gap:4px;}
  .navbtn{padding:9px 10px;}
  #btnAuth,#btnList{min-width:0;}
}
@media (max-width:520px){
  /* The brand is the only shrinkable item in the bar — the account cluster
     and the Map mode switch are flex:none — so it absorbs the entire deficit
     and ellipsed to "toronto…", which is not the brand. Two things give way
     before the name does: the ".ca" suffix, and then the logo mark, since the
     wordmark IS the brand and the mark is repeated in the favicon anyway. */
  .hdr-ca{display:none;}
  .bsw > summary img{display:none;}
  .bsw-t{overflow:visible;}
  /* Pinned to the viewport rather than to the brand, or a 320px menu opening
     at x=72 hangs 17px off a 375px screen. */
  .bsw-menu{left:8px;right:8px;width:auto;}
}
@media (max-width:420px){
  /* Last resort: the switch alone, no border, hard against the edge. */
  .bsw > summary img{width:26px;height:26px;}
  .bsw-t{font-size:14px;}
  .bsw-sub{font-size:10px;}
  .navbtn{padding:8px;}
}
/* The account menu is pinned to the viewport, not the button, so on a narrow
   screen it stays on screen instead of hanging off the right edge. */
@media (max-width:560px){
  .auth-menu{right:12px;left:12px;min-width:0;max-width:none;}
}

/* ===========================================================================
   Back to map mode
   ---------------------------------------------------------------------------
   Every link out of map mode carries ?from=map, and the section it lands on
   shows this bar until you use it or navigate away from the page you landed
   on. Without it the map's nav and Tools were a one-way door: you clicked
   "Buildings" or "Developer thumb rules", got what you asked for, and had to
   work out for yourself that the Map mode switch was the way back.

   Sticky under the header, in the section's own colour, so it reads as a
   state you are in rather than as a link in the page.
   ========================================================================= */
.backmap{position:sticky;top:var(--hdr-h,62px);z-index:580;
  background:var(--sect-tint);border-bottom:1px solid var(--line);}
.backmap-in{max-width:1180px;margin:0 auto;padding:9px 24px;
  display:flex;align-items:center;gap:10px;}
.backmap a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  color:var(--sect-ink);font-size:13.5px;font-weight:700;}
.backmap a:hover{text-decoration:underline;}
.backmap svg{width:15px;height:15px;flex:none;}
.backmap span{font-size:13px;color:var(--ink-2);font-weight:400;}
@media (max-width:640px){ .backmap-in{padding:9px 16px;} .backmap span{display:none;} }

/* ===========================================================================
   My List, the editable table — see shared/mylist.js
   ========================================================================= */
.ml-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
.ml-find{position:relative;flex:1 1 260px;max-width:420px;}
.ml-find svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:var(--ink-3);pointer-events:none;}
.ml-find input{width:100%;border:1px solid var(--line-2);border-radius:10px;
  padding:9px 12px 9px 33px;font:inherit;font-size:13.5px;background:var(--panel);
  color:var(--ink);outline:none;}
.ml-find input:focus{border-color:var(--sect);box-shadow:0 0 0 3px var(--sect-tint);}
.ml-sel{border:1px solid var(--line-2);border-radius:10px;padding:9px 11px;
  font:inherit;font-size:13.5px;background:var(--panel);color:var(--ink);outline:none;}
.ml-csv{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);
  background:var(--panel);color:var(--ink-2);font-family:var(--font);font-size:13px;
  font-weight:600;padding:9px 13px;border-radius:10px;cursor:pointer;}
.ml-csv:hover{background:var(--panel-2);color:var(--ink);}
.ml-bar .ml-sub{margin-left:auto;font-size:12.5px;color:var(--ink-3);}
.ml-sect{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  margin:26px 0 12px;padding-left:9px;display:flex;align-items:center;gap:8px;}
.ml-sect span{background:var(--panel-2);color:var(--ink-2);border-radius:20px;
  padding:1px 8px;font-size:11.5px;letter-spacing:0;}
.ml-sect-rent{color:#8a6a00;border-left:3px solid #f2a900;}
.ml-sect-plan{color:#4a2fa8;border-left:3px solid #5b3dc4;}
.ml-none{border:1px dashed var(--line-2);border-radius:14px;padding:34px 24px;
  text-align:center;background:var(--panel);}
.ml-none-h{font-size:18px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px;}
.ml-none p{color:var(--ink-2);font-size:14px;max-width:52ch;margin:0 auto 16px;line-height:1.6;}
/* The table scrolls sideways rather than squeezing: eleven columns will not
   fit a laptop, and shrinking the rent cells makes them unusable. */
.ml-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;
  background:var(--panel);}
.ml-table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:900px;}
.ml-table th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);padding:11px 10px;
  border-bottom:1px solid var(--line);white-space:nowrap;}
.ml-table td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top;}
.ml-table tr:last-child td{border-bottom:0;}
.ml-prop{min-width:190px;}
.ml-name{border:0;background:none;padding:0;font-family:var(--font);
  font-size:14px;font-weight:700;color:var(--ink);cursor:pointer;text-align:left;
  letter-spacing:-.015em;}
.ml-name:hover{text-decoration:underline;}
/* Buildings you added yourself sit in the same table as the City's registry
   records, so they are marked. Without it the registry's authority quietly
   rubs off on a row you typed in. Only the map explorer asks for this tag
   (manualTag in shared/mylist.js) because only the map can add one. */
.ml-yours{display:inline-block;margin-left:6px;vertical-align:1px;
  font:600 9.5px/1 var(--font);letter-spacing:.04em;text-transform:uppercase;
  color:var(--sect-ink,var(--ink-2));border:1px dashed currentColor;
  border-radius:4px;padding:2px 4px;opacity:.85;}
.ml-addr{font-size:12px;color:var(--ink-3);margin-top:1px;}
.ml-stage{margin-top:6px;border:1px solid var(--line-2);border-radius:8px;
  padding:4px 7px;font:inherit;font-size:12px;background:var(--panel);
  color:var(--ink-3);outline:none;}
.ml-stage.set{color:var(--ink);border-color:var(--sect);font-weight:600;}
.ml-cell{width:100%;border:1px solid transparent;border-radius:8px;padding:6px 8px;
  font:inherit;font-size:13px;background:var(--panel-2);color:var(--ink);
  outline:none;resize:vertical;}
.ml-cell:focus{border-color:var(--sect);background:var(--panel);
  box-shadow:0 0 0 3px var(--sect-tint);}
.ml-rent{width:74px;text-align:right;font-variant-numeric:tabular-nums;}
.ml-rent::-webkit-outer-spin-button,.ml-rent::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;}
.ml-notes{min-width:170px;}
.ml-rate{display:inline-flex;gap:3px;}
.ml-rate button{width:28px;height:28px;border:1px solid var(--line-2);
  background:var(--panel);border-radius:8px;cursor:pointer;font-size:13px;
  color:var(--ink-3);line-height:1;}
.ml-rate button:hover{background:var(--panel-2);color:var(--ink-2);}
.ml-rate button.on{background:var(--sect-tint);border-color:var(--sect);
  color:var(--sect-ink);font-weight:700;}
.ml-del{border:0;background:none;color:var(--ink-3);font-size:13px;cursor:pointer;
  padding:6px 8px;border-radius:7px;}
.ml-del:hover{background:var(--panel-2);color:var(--red,#d64541);}
.ml-plans{list-style:none;margin:0;padding:0;border:1px solid var(--line);
  border-radius:14px;background:var(--panel);overflow:hidden;}
.ml-plans li{display:flex;align-items:center;gap:14px;padding:13px 16px;}
.ml-plans li + li{border-top:1px solid var(--line);}
.ml-plan-a{font-weight:600;font-size:14.5px;flex:1 1 auto;min-width:0;}
.ml-plan-s{font-size:12.5px;color:var(--ink-3);}
.ml-plan-go{font-size:13px;font-weight:600;color:var(--sect-ink);
  text-decoration:none;flex:none;}
.ml-plan-go:hover{text-decoration:underline;}

/* ===== Numbered pages ======================================================
   Used by /rent/'s buildings list and /plan/'s Research view, drawn by
   shared/pager.js. One implementation, so the two halves of the site page
   the same way. Replaces a "Show 60 more" button that could not say how much
   was left or take you back.
   ========================================================================= */
.pgr{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:20px 0 4px;padding-top:16px;border-top:1px solid var(--line);}
.pgr-range{font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.pgr-pages{display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  margin:0 auto;}
.pgr-n,.pgr-a{appearance:none;font-family:var(--font);cursor:pointer;
  border:1px solid transparent;background:transparent;color:var(--ink-2);
  min-width:34px;height:34px;padding:0 9px;border-radius:9px;
  font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s,color .15s,border-color .15s;}
.pgr-n:hover,.pgr-a:not([disabled]):hover{background:var(--panel-2);color:var(--ink);}
.pgr-n.on{background:var(--ink);border-color:var(--ink);color:#fff;}
.pgr-a svg{width:16px;height:16px;}
.pgr-a[disabled]{opacity:.3;cursor:default;}
.pgr-gap{color:var(--ink-3);padding:0 2px;font-size:13px;}
.pgr-per{display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;color:var(--ink-3);white-space:nowrap;}
.pgr-per select{font-family:var(--font);font-size:12.5px;font-weight:600;
  color:var(--ink);background:var(--panel);border:1px solid var(--line-2);
  border-radius:8px;padding:5px 7px;cursor:pointer;}
@media (max-width:620px){
  .pgr{gap:10px;justify-content:center;}
  .pgr-range{width:100%;text-align:center;}
  .pgr-pages{margin:0;width:100%;justify-content:center;gap:2px;}
  .pgr-per{width:100%;justify-content:center;}
  /* A page number is a thumb target on a phone, not a mouse target: 34px
     measured is under what a thumb reliably hits, and these sit in a row of
     seven. */
  .pgr-n,.pgr-a{min-width:42px;height:42px;font-size:14.5px;}
  .pgr-a svg{width:18px;height:18px;}
  .pgr-per select{padding:9px 10px;}
}

/* ===== Text fields on a phone =============================================
   iOS Safari zooms the whole page when a focused text field is smaller than
   16px, and the page never zooms back. The map explorer's old answer to that
   was user-scalable=no in its viewport meta, which stopped the zoom by
   stopping ALL zooming — including the pinch-zoom someone with low vision
   needs on a map. Lighthouse fails it, and rightly.

   So: the fields are 16px on a phone instead. Nothing above 820px changes,
   and the designed 13–14px fields are untouched on a desktop where no zoom
   behaviour depends on them.

   !important is load-bearing here. shared/chrome.css is loaded BEFORE each
   section's app.css, and those set font-size on the same inputs at a higher
   specificity, so without it this rule loses every time. It is scoped to text
   entry only — the controls iOS actually zooms for.
   ========================================================================= */
@media (max-width:820px){
  input[type="text"],input[type="search"],input[type="email"],
  input[type="password"],input[type="number"],input[type="tel"],
  input[type="url"],input:not([type]),textarea,select{
    font-size:16px !important;
  }
}