/* The apartment finder (js/finder.js). Every look is a token here; the dark
   warm glass and the amber are the app's own (style.css --wf-*), so the finder
   reads as part of the same chrome as the walk sheet and the time slider. */
:root {
  --fd-w: 360px;                    /* desktop panel width */
  --fd-top: 64px;                   /* below the top-left buttons */
  --fd-inset: 16px;
  --fd-peek-h: 290px;               /* phone sheet, first state: the question, then the list */
  --fd-open-h: 74dvh;               /* phone sheet, the list */
  --fd-radius: 16px;
  --fd-glass: rgba(17, 10, 3, .80);
  --fd-glass-solid: rgb(15, 9, 2);      /* opaque (I05): bold map labels ghosted through .94 */
  --fd-menu: #150d05;               /* the major list: opaque, it covers text */
  --fd-edge: rgba(255, 190, 90, .20);
  --fd-edge-soft: rgba(255, 190, 90, .12);
  --fd-ink: #f8ead0;
  --fd-dim: rgba(248, 234, 208, .62);
  --fd-dimmer: rgba(248, 234, 208, .42);
  --fd-accent: #ffc663;
  --fd-accent-ink: #20160a;
  --fd-hot: rgba(245, 166, 35, .16);
  --fd-sel: rgba(245, 166, 35, .26);
  --fd-est: #ffcf8a;                /* the "this is an estimate" line */
  --fd-bad: #ffb4a0;
  --fd-shadow: 0 10px 34px rgba(0, 0, 0, .42);
  --fd-title: 25px;
  --fd-body: 12.5px;
  --fd-small-min: 12px;             /* the smallest text in the finder (I08), the app's menu floor */
  --fd-small: var(--fd-small-min);
  --fd-min: 19px;                   /* the minutes on a row */
  --fd-pin: 26px;
  --fd-stem: 12px;                  /* pin stands this far above its point */
  --fd-pin-hot: 1.28;               /* scale on hover / list hover */
  --fd-pin-sel: 1.42;
  --fd-pin-ink: #1d1206;
  --fd-pin-ring: rgba(255, 248, 235, .96);
  --fd-card-w: 212px;
  --fd-ctable-code: 34px;           /* phone compare table: the code column */
  --fd-tray-bottom: 64px;           /* clear of the controls hint */
  --fd-z: 29;                       /* under the walk sheet / import screen (30-31) */
}

#fd-pill, #finder, #fd-tray { font: var(--fd-body)/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--fd-ink); box-sizing: border-box; }
#finder *, #fd-tray * { box-sizing: border-box; }
/* `#finder` sets display:flex, which beats the UA's [hidden] rule, so the
   element's own hidden attribute has to be restated here. Without the first
   selector the panel stood open, empty, over the whole intro (phase 2). */
#finder[hidden], #fd-tray[hidden], #fd-pill[hidden], #finder [hidden] { display: none !important; }

/* ── the pill ── */
#fd-pill { position: fixed; z-index: var(--fd-z); left: var(--fd-inset); top: var(--fd-top);
  border: 1px solid var(--fd-edge); border-radius: 999px; padding: 10px 16px 10px 14px;
  background: var(--fd-glass); backdrop-filter: blur(14px) saturate(1.1); box-shadow: var(--fd-shadow);
  font-weight: 700; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 8px; }
#fd-pill::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--fd-accent);
  box-shadow: 0 0 0 4px rgba(255, 198, 99, .18); }
#fd-pill:hover { border-color: rgba(255, 190, 90, .45); }

/* ── the panel ── */
#finder { position: fixed; z-index: var(--fd-z); left: var(--fd-inset); top: var(--fd-top); bottom: var(--fd-inset);
  width: var(--fd-w); max-width: calc(100vw - 2 * var(--fd-inset)); display: flex; flex-direction: column;
  /* NO backdrop-filter on the two big surfaces. Behind a 94%-opaque panel the
     blur is invisible, and it makes the compositor re-blur a 360 x 820 patch
     of the city on every frame the camera moves — paid on the integrated GPU. */
  background: var(--fd-glass-solid); border: 1px solid var(--fd-edge);
  border-radius: var(--fd-radius); box-shadow: var(--fd-shadow); overflow: hidden; }
#finder button, #finder input { font: inherit; color: inherit; }
#finder :focus-visible, #fd-tray :focus-visible, #fd-pill:focus-visible { outline: 2px solid var(--fd-accent); outline-offset: 2px; }
.fd-handle { display: none; }
.fd-head { position: relative; padding: 16px 18px 10px; }
.fd-kicker { margin: 0 0 6px; font-size: var(--fd-small-min); font-weight: 800; letter-spacing: .16em; color: var(--fd-accent); }
.fd-title { margin: 0; font-size: var(--fd-title); line-height: 1.05; font-weight: 650; letter-spacing: -.02em; }
.fd-lede { margin: 8px 0 0; color: var(--fd-dim); }
.fd-hide { position: absolute; right: 10px; top: 10px; width: 30px; height: 30px; border-radius: 8px;
  border: 0; background: transparent; font-size: 20px !important; line-height: 1; cursor: pointer; color: var(--fd-dim) !important; }
.fd-hide:hover { background: rgba(255, 255, 255, .07); color: var(--fd-ink) !important; }

.fd-ask { padding: 6px 18px 12px; border-bottom: 1px solid var(--fd-edge-soft); }
.fd-lab { display: block; margin: 8px 0 5px; font-size: var(--fd-small-min); font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fd-dimmer); }
.fd-combo { position: relative; }
#fd-major { width: 100%; height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--fd-edge);
  background: rgba(255, 255, 255, .06); outline: none; font-size: 14px !important; }
#fd-major::placeholder { color: var(--fd-dimmer); }
#fd-major:focus { border-color: rgba(255, 198, 99, .6); background: rgba(255, 255, 255, .09); }
.fd-majors { position: absolute; z-index: 2; left: 0; right: 0; top: 42px; max-height: 260px; overflow: auto;
  margin: 0; padding: 4px; list-style: none; background: var(--fd-menu); border: 1px solid var(--fd-edge);
  border-radius: 10px; box-shadow: var(--fd-shadow); }
.fd-opt { padding: 7px 9px; border-radius: 7px; cursor: pointer; }
.fd-opt small { display: block; color: var(--fd-dimmer); font-size: var(--fd-small); }
.fd-opt:hover, .fd-opt[aria-selected=true] { background: var(--fd-hot); }
.fd-none { padding: 8px 9px; color: var(--fd-dim); }
.fd-import-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.fd-or { color: var(--fd-dimmer); }
.fd-import, .fd-link { border: 0; background: none; padding: 4px 0; cursor: pointer; color: var(--fd-accent) !important;
  font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255, 198, 99, .4); text-underline-offset: 3px; }
.fd-sched { margin: 8px 0 0; padding: 8px 10px; border-radius: 9px; background: rgba(255, 198, 99, .1);
  border: 1px solid var(--fd-edge-soft); }
.fd-sched.off span { color: var(--fd-dim); }
.fd-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 3px; border-radius: 11px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--fd-edge-soft); }
.fd-mode { height: 32px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-weight: 700; color: var(--fd-dim) !important; }
.fd-mode.on { background: var(--fd-accent); color: var(--fd-accent-ink) !important; }
.fd-basis { margin: 10px 0 0; color: var(--fd-dim); font-size: 11.5px; }
.fd-basis.est { color: var(--fd-est); }

.fd-results { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 10px 10px 8px; }
.fd-list-head { padding: 0 8px 6px; }
.fd-list-title { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--fd-dimmer); }
.fd-status { margin: 0 8px; color: var(--fd-dim); }
.fd-status:empty { display: none; }
.fd-status.bad { color: var(--fd-bad); }
.fd-list { list-style: none; margin: 0; padding: 0; }
.fd-item { position: relative; border-radius: 11px; margin: 2px 0; }
.fd-item.hot { background: var(--fd-hot); }
.fd-row { display: grid; grid-template-columns: 30px 1fr auto; grid-template-rows: auto auto; column-gap: 10px;
  width: 100%; padding: 8px 86px 14px 8px; border: 1px solid transparent; border-radius: 11px; background: transparent;
  text-align: left; cursor: pointer; align-items: center; }
.fd-row[aria-pressed=true] { background: var(--fd-sel); border-color: rgba(255, 198, 99, .4); }
.fd-row .fd-n { grid-row: 1 / 3; }
.fd-name { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-sub { grid-column: 2; color: var(--fd-dimmer); font-size: var(--fd-small); }
.fd-min { position: absolute; right: 12px; top: 8px; font-size: var(--fd-min); font-weight: 650; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }
.fd-min small { font-size: var(--fd-small); font-weight: 600; color: var(--fd-dim); letter-spacing: 0; }
.fd-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c, var(--fd-accent));
  color: var(--fd-pin-ink); font-weight: 800; font-size: 12px; border: 2px solid var(--fd-pin-ring); }
.fd-cmp { position: absolute; right: 10px; top: 34px; height: 20px; padding: 0 7px; border-radius: 6px;
  border: 1px solid var(--fd-edge); background: transparent; color: var(--fd-dim) !important; font-size: var(--fd-small-min) !important;
  font-weight: 700; cursor: pointer; }
.fd-cmp[aria-pressed=true] { background: rgba(143, 211, 255, .16); border-color: rgba(143, 211, 255, .5); color: #cfeaff !important; }
.fd-detail { padding: 0 10px 10px 48px; }
.fd-avg { margin: 0 0 5px; color: var(--fd-dimmer); font-size: var(--fd-small); text-transform: uppercase; letter-spacing: .08em; }
.fd-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.fd-chip { padding: 3px 7px; border-radius: 6px; background: rgba(255, 255, 255, .07); font-size: var(--fd-small-min); font-variant-numeric: tabular-nums; }
.fd-chip b { color: var(--fd-accent); }
.fd-busline { margin: 6px 0 0; color: #cfeaff; font-size: 11px; }
.fd-live { margin: 6px 0 0; font-size: 11px; }
.fd-live p { margin: 2px 0 0; }
.fd-live-line { color: #cfeaff; }
.fd-live-line.is-live::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #5fe08a; vertical-align: 1px; }
.fd-live-note { color: #e8c98a; }
.fd-live-credit { color: rgba(255, 255, 255, .45); font-size: 9.5px; }
.fd-unav { margin: 8px 8px 0; color: var(--fd-dimmer); font-size: 11px; }
.fd-unav:empty { display: none; }

.fd-foot { padding: 10px 18px 12px; border-top: 1px solid var(--fd-edge-soft); }
.fd-heat { display: flex; align-items: center; gap: 7px; cursor: pointer; color: var(--fd-dim); }
.fd-heat input { accent-color: var(--fd-accent); margin: 0; }
.fd-livebuses { display: flex; align-items: center; gap: 7px; cursor: pointer; color: var(--fd-dim); margin-top: 7px; }
.fd-livebuses[hidden], .fd-livebuses-note[hidden] { display: none; }
.fd-livebuses input { accent-color: var(--fd-accent); margin: 0; }
.fd-livebuses-note { margin: 5px 0 0 22px; color: var(--fd-dimmer); font-size: var(--fd-small-min); line-height: 1.35; }   /* the finder's 12 px text floor (I08) */
.fd-legend { margin-top: 8px; }
.fd-legend-title { font-size: var(--fd-small); color: var(--fd-dimmer); margin-bottom: 4px; }
.fd-ramp { height: 8px; border-radius: 4px; }
.fd-ticks { position: relative; height: 16px; font-size: var(--fd-small-min); color: var(--fd-dimmer); font-variant-numeric: tabular-nums; }
.fd-ticks span { position: absolute; top: 2px; transform: translateX(-50%); }
.fd-src { margin: 12px 8px 4px; color: var(--fd-dimmer); font-size: var(--fd-small); }
.fd-src summary { cursor: pointer; }
.fd-src p { margin: 5px 0 0; }
.fd-priv:empty { display: none; }
.fd-priv { margin: 12px 8px 0; }

/* ── the city ── */
/* A pin stands on a short stem above its home, so the city's own building
   label under it stays readable. */
.fd-pinwrap { width: var(--fd-pin); height: calc(var(--fd-pin) + var(--fd-stem)); display: flex; flex-direction: column; align-items: center; }
.fd-pinwrap .fd-pin { flex: none; height: var(--fd-pin); }
.fd-stem { flex: none; width: 2px; height: var(--fd-stem); background: var(--fd-pin-ring); box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.fd-pin { width: 100%; height: 100%; padding: 0; border-radius: 50%; border: 2px solid var(--fd-pin-ring);
  background: var(--c, var(--fd-accent)); color: var(--fd-pin-ink); font: 800 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45); cursor: pointer; transition: transform .12s ease-out; }
.fd-pinwrap.hot .fd-pin { transform: scale(var(--fd-pin-hot)); transform-origin: 50% 100%; }
.fd-pinwrap.sel .fd-pin { transform: scale(var(--fd-pin-sel)); transform-origin: 50% 100%; box-shadow: 0 0 0 3px var(--fd-accent), 0 3px 12px rgba(0, 0, 0, .5); }
.fd-dest { padding: 4px 8px; border-radius: 8px; background: var(--fd-glass-solid); border: 1px solid var(--fd-edge);
  color: var(--fd-ink); font: 600 11px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .4); pointer-events: none; }
.fd-dest b { color: var(--fd-accent); }
/* a board / get-off tag under a bus stop: the dest tag, with the route's colour on its edge (set inline) */
.fd-stoptag { border-width: 2px; font-weight: 600; }

/* ── the compare tray ── */
#fd-tray { position: fixed; z-index: var(--fd-z); left: calc(2 * var(--fd-inset) + var(--fd-w)); bottom: var(--fd-tray-bottom);
  max-width: calc(100vw - 3 * var(--fd-inset) - var(--fd-w)); padding: 10px; border-radius: var(--fd-radius);
  background: var(--fd-glass-solid); border: 1px solid var(--fd-edge);
  box-shadow: var(--fd-shadow); }
.fd-tray-head { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 8px; }
.fd-tray-head b { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fd-dimmer); }
#fd-tray .fd-link { font: inherit; font-size: var(--fd-small-min); }
.fd-cards { display: flex; gap: 8px; overflow-x: auto; }
.fd-card { position: relative; flex: 0 0 var(--fd-card-w); padding: 10px; border-radius: 11px; background: rgba(255, 255, 255, .05);
  border: 1px solid var(--fd-edge-soft); }
.fd-card .fd-n { width: 22px; height: 22px; font-size: 11px; }
.fd-card-name { display: block; margin: 6px 0 2px; padding: 0; border: 0; background: none; font-family: inherit; font-weight: 700; font-size: 13px; line-height: 1.25;
  color: var(--fd-ink); text-align: left; cursor: pointer; }
.fd-card-min { margin: 6px 0; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }
.fd-card-legs { display: grid; gap: 2px; font-size: var(--fd-small-min); font-variant-numeric: tabular-nums; }
.fd-card-leg { display: flex; justify-content: space-between; gap: 8px; }
.fd-card-leg b { color: var(--fd-accent); }
.fd-x { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border: 0; border-radius: 6px; background: transparent;
  color: var(--fd-dim); font-size: 16px; line-height: 1; cursor: pointer; }
.fd-x:hover { background: rgba(255, 255, 255, .08); }

/* The walk feature's import screen, when the finder brought it up alone
   (js/wayfind.js IMPORT_ONLY): show the import screen, nothing else of wayfind. */
#wf-root.wf-import-only > :not(#wf-imp) { display: none !important; }

/* ── phones: a bottom sheet ── */
/* KEEP IN SYNC WITH FINDER.sheetQuery in js/finder.js (a narrow window, or a touch screen up to a tablet's width). */
@media (max-width: 650px), (pointer: coarse) and (max-width: 1024px) {
  /* Under the Explore button: the bottom of a phone belongs to the joystick,
     BOOST and the hint line (the first try sat on the hint, phase 2). */
  #fd-pill { top: 72px; left: 12px; }
  /* While the sheet is up it is the mode: the flying controls it would cover
     step aside, and come back the moment it is closed. The tall sheet also
     covers the time slider, so that steps aside too rather than half-show. */
  body.fd-on #joystick-zone, body.fd-on #joy-boost, body.fd-on #controls-hint { display: none !important; }
  /* "Switch modes" (#mode-launcher, added to main after this was built) floats
     bottom-right at z-index 59, over the sheet's minutes and Compare buttons.
     Same treatment as the settings and feedback sheets (style.css, has-touch
     rules): it steps aside while the sheet is up and returns when it closes. */
  body.fd-on #mode-launcher { visibility: hidden; }
  body.fd-tall #tod-panel { display: none !important; }
  #finder { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-width: none; height: var(--fd-open-h);
    border-radius: var(--fd-radius) var(--fd-radius) 0 0; border-bottom: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
  /* Peek: the question first; the whole sheet scrolls into the list, or the
     handle opens it tall. */
  #finder[data-view=peek] { height: var(--fd-peek-h); overflow-y: auto; overscroll-behavior: contain; }
  #finder[data-view=peek] .fd-results { flex: none; overflow: visible; }
  #finder[data-view=peek] .fd-lede, #finder[data-view=peek] .fd-foot { display: none; }
  .fd-handle { display: block; width: 100%; height: 18px; padding: 6px 0 0; border: 0; background: none; cursor: pointer; flex: none; }
  .fd-handle span { display: block; width: 40px; height: 4px; margin: 0 auto; border-radius: 2px; background: var(--fd-dimmer); }
  .fd-head { padding: 4px 16px 6px; }
  .fd-title { font-size: 21px; }
  .fd-ask { padding: 2px 16px 10px; }
  /* On a phone the compare tray lives INSIDE the sheet (js moves it), above
     the list: there is no free corner of a 375 px screen to float it in. */
  #finder #fd-tray { position: static; max-width: none; margin: 8px 10px 0; padding: 8px; box-shadow: none;
    background: rgba(255, 255, 255, .03); }
  .fd-ctable { display: grid; gap: 3px 8px; align-items: center; font-size: var(--fd-small-min); font-variant-numeric: tabular-nums; }
  .fd-ctable > b { color: var(--fd-accent); }
  .fd-ctable .fd-ct-lab { color: var(--fd-dimmer); font-weight: 600; }
  .fd-ctable .fd-ct-avg { font-size: 15px; font-weight: 650; }
  .fd-ch { position: relative; padding-right: 18px; }
  .fd-ch .fd-n { width: 20px; height: 20px; font-size: 10px; }
  .fd-ch .fd-x { right: -4px; top: -2px; }
  .fd-ch .fd-card-name { font-size: 11.5px; margin-top: 3px; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; }
  /* The import screen comes up over the middle of a phone; the sheet steps
     out of its way until it closes. */
  body.fd-importing #finder { visibility: hidden; }
}
.clip #fd-pill, .clip #finder, .clip #fd-tray { display: none !important; }


/* ── Edit round of the visual audit (2026-10-10) ───────────────────────────────────────────────────────────── */
/* I01: the pill steps aside while the Explore menu is open (it was half hidden behind it). */
body:has(#explore-toggle[aria-expanded="true"]) #fd-pill { visibility: hidden; }
/* I09: the notch and the home bar (the variables are set in style.css and are 0 on a screen without them). */
#fd-pill, #finder { top: calc(var(--fd-top) + var(--safe-top, 0px)); left: calc(var(--fd-inset) + var(--safe-left, 0px)); }
@media (max-width: 650px), (pointer: coarse) and (max-width: 1024px) {
  #fd-pill { top: calc(72px + var(--safe-top, 0px)); left: calc(12px + var(--safe-left, 0px)); }
  #finder { top: auto; left: 0; }
}
/* I07: touch screens get the app's 44 px floor (--touch-min); the small marks keep their look and get a larger hit area. */
:root { --fd-touch-pad: 12px; }
html.has-touch #fd-pill { min-height: var(--touch-min, 44px); }
html.has-touch #fd-major { height: var(--touch-min, 44px); }
html.has-touch .fd-mode { height: var(--touch-min, 44px); }
html.has-touch .fd-hide, html.has-touch .fd-x, html.has-touch .fd-import, html.has-touch .fd-link, html.has-touch .fd-handle { position: relative; }
html.has-touch .fd-hide { position: absolute; }
html.has-touch .fd-cmp, html.has-touch .fd-x { position: absolute; }
html.has-touch .fd-hide::after, html.has-touch .fd-x::after, html.has-touch .fd-cmp::after,
html.has-touch .fd-import::after, html.has-touch .fd-link::after, html.has-touch .fd-handle::after {
  content: ""; position: absolute; inset: calc(var(--fd-touch-pad) * -1); }
/* I07 for the live-buses switch: the whole label is the target on touch screens (44 px), the box keeps its look. */
html.has-touch .fd-livebuses { min-height: var(--touch-min, 44px); }
html.has-touch .fd-livebuses input { width: 20px; height: 20px; }
/* I11: the privacy sentence under the import button, visible on touch screens too. */
.fd-import-note { margin: 4px 0 0; font-size: var(--fd-small-min); color: var(--fd-dim); }
/* I10: no pin transitions when the visitor asked for reduced motion. */
@media (prefers-reduced-motion: reduce) { .fd-pin, .fd-pinwrap, .fd-pinwrap .fd-pin { transition: none !important; } }