/* =============================================================================
   SITE SEARCH  —  the magnifier in the navbar and the sheet behind it
   -----------------------------------------------------------------------------
   The hamburger's field filters the hamburger. This searches the building: the
   whole property book, every page in the index, whatever section of the current
   page you happen to be standing on, and the handful of things that are verbs
   rather than places. It is a different instrument, so it gets a different
   shape — a sheet over the middle of the page rather than a drawer at the edge.

   Everything here reads tokens and nothing declares a colour, so the dark
   edition needs the six literal surfaces at the bottom of this file and no
   second palette. Same rule dark-home.css follows.

   The mobile half is not a set of tweaks to the desktop one. Below 720 the
   sheet is the whole screen, the field is 16px so iOS does not zoom the page
   on focus, the chrome is inside the safe area on a notched phone, and the
   height is dvh so the keyboard shortens the sheet instead of pushing its
   footer under the fold.
   ========================================================================== */

/* ---------------------------------------------------------------- fallbacks
   The palette this sheet uses when the page underneath it has none. Every
   colour above is written var(--ink, var(--ss-ink)) — the page's token first,
   these second — so the twenty-two pages that define the site palette are
   unaffected and the thirty-eight that do not still get a correct sheet in
   the edition they are being read in. New names, so no page can collide. */
:root {
    --ss-ink: #1E262B;
    --ss-ink-77: rgba(30, 38, 43, .77);
    --ss-ink-55: rgba(30, 38, 43, .64);
    --ss-paper: #ffffff;
    --ss-line: rgba(30, 38, 43, .12);
    --ss-line-soft: rgba(30, 38, 43, .07);
    --ss-muted: #717171;
    --ss-accent: #C2410C;
    --ss-ease: cubic-bezier(.22, .61, .36, 1);
}
html[data-dark] {
    --ss-ink: #FFFFFF;
    --ss-ink-77: rgba(255, 255, 255, .72);
    --ss-ink-55: rgba(255, 255, 255, .58);
    --ss-paper: #0F151B;
    --ss-line: rgba(255, 255, 255, .16);
    --ss-line-soft: rgba(255, 255, 255, .09);
    --ss-muted: #8A9199;
    --ss-accent: #F97316;
    --ss-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------------- the nav
   Beside the crosshair, and the pair reads left to right as find-then-chance.
   40px to match .nav__roulette and .nav__burger exactly — the three of them
   are one row of controls and a stray pixel in any of them shows.

   Unlike the crosshair this one survives the phone. The crosshair is a
   flourish and goes at 640; search is the fastest way into fifty-odd pages
   from a 375px screen and is the last thing that should leave the bar. */
.nav__find {
    display: flex; width: 40px; height: 40px; padding: 0;
    background: transparent; border: 0;
    cursor: pointer; align-items: center; justify-content: center;
    color: var(--ink-77, var(--ss-ink-77));
    transition: color .2s var(--ease, var(--ss-ease)), transform .2s var(--ease, var(--ss-ease));
}
.nav__find:hover { color: var(--accent, var(--ss-accent)); }
.nav__find:active { transform: scale(.92); }
/* Belt and braces with the width and height now written on the tag in
   search.js. The attributes are what a browser reads before this file lands;
   this is what keeps the glyph at 17 if anything downstream ever sets a
   width on svg. Never leave it to the default sizing of a replaced element —
   that is the bug that made the button 0x0 on every phone while looking
   correct on every desktop. */
.nav__find svg { display: block; width: 17px; height: 17px; flex: 0 0 auto; }
.nav__find:focus-visible { outline: 2px solid var(--accent, var(--ss-accent)); outline-offset: 2px; border-radius: 8px; }

/* The keyboard hint lives in the button as a second child and is dropped on
   any screen where there is no keyboard to hint at. */
.nav__find kbd {
    display: none; margin-left: .3rem;
    font: inherit; font-size: .62rem; font-weight: 600; letter-spacing: .04em;
    color: var(--muted, var(--ss-muted)); border: 0; padding: 0; line-height: 1;
}
@media (min-width: 1041px) {
    .nav__find { width: auto; gap: 0; padding: 0 .5rem; border-radius: 8px; }
    .nav__find kbd { display: inline-block; }
}
@media (max-width: 640px) { .nav__find { width: 44px; height: 44px; } }

/* -----------------------------------------------------------------------------
   THE SATELLITE HEADER

   Six pages carry .nav--sat: the paper editions of investor, portfolio, mem,
   windy, tech and newsy. Below 1040 that header is already two rows — mark,
   pill and the page's own button on the first, the link run scrolling
   sideways on the second — and the first row has nothing left to give.
   Measured at 320, where site.css counts 280 usable pixels:

       mark 56 + pill 88 + "Change location" 108 + two 6.4 gaps = 265

   Fifteen spare, and a thumbable magnifier needs forty-four. So on these six
   it rides the second row instead, at the head of the link run: full-size tap
   target, and the links scroll past it rather than under it.

   flex-basis 0 on the links is what puts the two on one line. With the
   basis at 100% the row claims a whole line of its own and the button is
   pushed to a third; at 0 it is free to share, and flex-grow still gives it
   everything the button does not take. The left bleed comes off with it —
   the run passing under the right edge is the half that says "more this
   way", and the left half would be passing under the button.
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
    .nav--sat .nav__find {
        order: 5; flex: 0 0 auto;
        width: 40px; height: 40px;
        margin: .3rem 0 0 -.5rem;
    }
    .nav--sat .nav__links {
        order: 6; flex: 1 1 0; min-width: 0;
        margin-left: 0; padding-left: .55rem;
    }
}

/* =============================================================================
   THE SHEET
   ========================================================================== */
.ss[hidden] { display: none; }
.ss {
    /* Above .menu, which is 200. The two panels are mutually exclusive —
       opening this closes that — but the hamburger takes 380ms to travel off
       the right edge, and for those 380ms a sheet underneath it would be
       sitting behind a panel on its way out. */
    position: fixed; inset: 0; z-index: 210;
    display: flex; flex-direction: column; align-items: center;
}
.ss__scrim {
    position: absolute; inset: 0;
    background: rgba(30, 38, 43, .38);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .26s var(--ease, var(--ss-ease));
}
.ss.is-open .ss__scrim { opacity: 1; }

.ss__sheet {
    position: relative; z-index: 1;
    width: min(720px, calc(100vw - 2 * var(--gutter)));
    margin-top: 8vh; max-height: 78vh;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--paper, var(--ss-paper));
    border: 1px solid var(--line, var(--ss-line));
    border-radius: 14px;
    box-shadow: 0 30px 80px rgba(30, 38, 43, .22), 0 2px 8px rgba(30, 38, 43, .08);
    opacity: 0; transform: translateY(-10px) scale(.985);
    transition: opacity .26s var(--ease, var(--ss-ease)), transform .26s var(--ease, var(--ss-ease));
}
.ss.is-open .ss__sheet { opacity: 1; transform: none; }
.ss__sheet:focus, .ss__sheet:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
    .ss__scrim, .ss__sheet { transition: none; }
}

/* ------------------------------------------------------------------ the field
   One row: magnifier, field, clear, and the way out. The row does not scroll —
   only the results below it do — so on a phone the field stays put while the
   list moves under the thumb. */
.ss__bar {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .55rem .5rem .95rem;
    border-bottom: 1px solid var(--line, var(--ss-line));
    flex: 0 0 auto;
}
.ss__bar > svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--ink-55, var(--ss-ink-55)); }
.ss__q {
    flex: 1 1 auto; min-width: 0;
    border: 0; background: transparent; padding: .7rem 0;
    font-family: inherit; font-size: 1.02rem; font-weight: 400;
    letter-spacing: -.015em; color: var(--ink, var(--ss-ink));
}
.ss__q::placeholder { color: var(--ink-55, var(--ss-ink-55)); font-weight: 300; }
.ss__q:focus { outline: none; }
.ss__q::-webkit-search-cancel-button, .ss__q::-webkit-search-decoration { display: none; }

.ss__clear, .ss__esc {
    flex: 0 0 auto; cursor: pointer;
    background: transparent; border: 1px solid transparent; border-radius: 7px;
    color: var(--ink-55, var(--ss-ink-55)); font: inherit;
    display: flex; align-items: center; justify-content: center;
}
.ss__clear { width: 30px; height: 30px; }
.ss__clear[hidden] { display: none; }
.ss__clear svg { width: 11px; height: 11px; }
.ss__clear:hover { color: var(--ink, var(--ss-ink)); background: rgba(30, 38, 43, .06); }
.ss__esc {
    height: 30px; padding: 0 .55rem;
    font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    border-color: var(--line, var(--ss-line));
}
.ss__esc:hover { color: var(--ink, var(--ss-ink)); border-color: var(--ink, var(--ss-ink)); }

/* ------------------------------------------------------------------- scopes
   Five chips, each carrying its own live count, so the shape of the answer is
   readable before anything is clicked: 3 pages and 11 properties is a
   different result from 14 of one. A chip with nothing behind it is disabled
   rather than hidden — a row that reflows on every keystroke is unusable. */
/* The chips and the edition switch share one rule and one border. The chips
   scroll under the switch on a narrow sheet; the switch never scrolls away,
   because it is the control that explains what the list is doing. */
.ss__scoperow {
    display: flex; align-items: center; gap: .5rem; flex: 0 0 auto;
    padding-right: .95rem;
    border-bottom: 1px solid var(--line-soft, var(--ss-line-soft));
}
.ss__scoperow > .ss__scopes { flex: 1 1 auto; min-width: 0; border-bottom: 0; }
.ss__scopes {
    display: flex; gap: .38rem; flex: 0 0 auto;
    padding: .6rem .95rem;
    border-bottom: 1px solid var(--line-soft, var(--ss-line-soft));
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.ss__scopes::-webkit-scrollbar { display: none; }
.ss__scope {
    flex: 0 0 auto; cursor: pointer;
    background: transparent; border: 1px solid var(--line, var(--ss-line)); border-radius: 999px;
    padding: .34rem .68rem; font: inherit;
    font-size: .72rem; font-weight: 500; letter-spacing: .01em; white-space: nowrap;
    color: var(--ink-77, var(--ss-ink-77));
    transition: border-color .2s var(--ease, var(--ss-ease)), background .2s var(--ease, var(--ss-ease)), color .2s var(--ease, var(--ss-ease));
}
.ss__scope:hover { border-color: var(--ink, var(--ss-ink)); color: var(--ink, var(--ss-ink)); }
.ss__scope[aria-selected="true"] {
    background: var(--ink, var(--ss-ink)); border-color: var(--ink, var(--ss-ink)); color: var(--paper, var(--ss-paper));
}
.ss__scope[disabled] { opacity: .38; cursor: default; }
.ss__scope[disabled]:hover { border-color: var(--line, var(--ss-line)); color: var(--ink-77, var(--ss-ink-77)); }
.ss__scope b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ss__scope[aria-selected="true"] b { color: var(--paper, var(--ss-paper)); }

/* THE EDITION SWITCH. Compact on purpose — it is an override, not a scope,
   and most readers should never need to find it. Off it is a hairline outline;
   on it fills, and the small track beside the word lights, so the state reads
   at a glance from across the sheet without a second label. */
.ss__all {
    flex: 0 0 auto; cursor: pointer;
    display: inline-flex; align-items: center; gap: .34rem;
    background: var(--paper, var(--ss-paper)); border: 1px solid var(--line, var(--ss-line));
    border-radius: 999px;
    padding: .3rem .56rem .3rem .42rem; font: inherit;
    font-size: .66rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted, var(--ss-muted)); white-space: nowrap;
    transition: border-color .2s var(--ease, var(--ss-ease)), background .2s var(--ease, var(--ss-ease)), color .2s var(--ease, var(--ss-ease));
}
.ss__all:hover { border-color: var(--ink, var(--ss-ink)); color: var(--ink, var(--ss-ink)); }
.ss__scoperow { position: relative; }
.ss__scoperow::before {
    content: ''; position: absolute; top: 0; bottom: 1px; width: 18px; pointer-events: none;
    /* sits immediately left of the switch: its width plus the row's gap */
    right: calc(.95rem + 64px); z-index: 1;
    background: linear-gradient(to right, transparent, var(--paper, var(--ss-paper)));
}
.ss__all-t {
    width: 18px; height: 10px; border-radius: 999px; flex: 0 0 auto;
    background: var(--line, var(--ss-line)); position: relative;
    transition: background .2s var(--ease, var(--ss-ease));
}
.ss__all-t::after {
    content: ''; position: absolute; top: 1px; left: 1px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--paper, var(--ss-paper));
    transition: transform .2s var(--ease, var(--ss-ease));
}
.ss__all[aria-checked="true"] {
    background: var(--ink, var(--ss-ink)); border-color: var(--ink, var(--ss-ink)); color: var(--paper, var(--ss-paper));
}
.ss__all[aria-checked="true"] .ss__all-t { background: var(--accent, var(--ss-accent)); }
.ss__all[aria-checked="true"] .ss__all-t::after { transform: translateX(8px); }
.ss__all[hidden] { display: none; }

/* The half-line under the results that names which half of the building the
   count belongs to. */
.ss__ed { color: var(--muted, var(--ss-muted)); font-weight: 400; letter-spacing: .01em; }

/* ----------------------------------------------------------------- results */
.ss__out {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: .5rem 0 .7rem;
}
.ss__h {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; gap: .7rem;
    margin: .9rem 0 .2rem; padding: .3rem .95rem;
    background: var(--paper, var(--ss-paper));
    font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: var(--muted, var(--ss-muted));
}
.ss__h:first-child { margin-top: 0; }
.ss__h::after { content: ''; height: 1px; background: var(--line-soft, var(--ss-line-soft)); flex: 1 1 auto; }

.ss__r {
    display: flex; align-items: center; gap: .75rem;
    padding: .6rem .95rem;
    text-decoration: none; color: inherit;
    border-left: 2px solid transparent;
    scroll-margin: 3rem 0;
}
.ss__r:hover, .ss__r.is-on {
    background: rgba(30, 38, 43, .045);
    border-left-color: var(--accent, var(--ss-accent));
}
.ss__r:focus-visible { outline: 2px solid var(--accent, var(--ss-accent)); outline-offset: -2px; }

/* The glyph. Same four the Practices band and the hamburger use, so a property
   carries the same mark everywhere it appears on the site. */
.ss__i {
    flex: 0 0 auto; width: 22px; text-align: center;
    font-style: normal; font-size: .68rem; line-height: 1; color: var(--accent, var(--ss-accent));
}
.ss__l { flex: 1 1 auto; min-width: 0; }
.ss__t {
    display: block; font-size: .93rem; font-weight: 500; letter-spacing: -.015em;
    color: var(--ink, var(--ss-ink));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ss__d {
    display: block; margin-top: .12rem;
    font-size: .76rem; font-weight: 300; line-height: 1.45; color: var(--ink-55, var(--ss-ink-55));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ss__u { color: var(--muted, var(--ss-muted)); font-size: .7rem; letter-spacing: .01em; }
.ss__r mark {
    background: rgba(194, 65, 12, .16); color: inherit;
    border-radius: 2px; padding: 0 .06em;
}

/* The edition badge, and the new-tab mark on anything leaving the building. */
.ss__tag {
    flex: 0 0 auto;
    font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted, var(--ss-muted)); border: 1px solid var(--line, var(--ss-line)); border-radius: 4px;
    padding: .16rem .34rem; line-height: 1;
}
.ss__go { flex: 0 0 auto; color: var(--ink-55, var(--ss-ink-55)); font-style: normal; font-size: .8rem; }
.ss__r.is-on .ss__go { color: var(--accent, var(--ss-accent)); }

/* A recent query is a row you can also take back off the list, so the ✕ is a
   real button sitting inside the row rather than part of the link. */
.ss__kill {
    flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: 0; border-radius: 6px;
    color: var(--muted, var(--ss-muted)); cursor: pointer;
}
.ss__kill:hover { color: var(--ink, var(--ss-ink)); background: rgba(30, 38, 43, .07); }
.ss__kill svg { width: 9px; height: 9px; }

/* ------------------------------------------------------------ the empty end
   Not a dead end. A query that matches nothing in the building is still a
   query, and there are three places it can go on from here. */
.ss__none { padding: 2.2rem .95rem 1.4rem; text-align: center; }
.ss__none b {
    display: block; font-size: 1.02rem; font-weight: 400; letter-spacing: -.02em;
    color: var(--ink, var(--ss-ink));
}
.ss__none span {
    display: block; margin-top: .4rem; font-size: .82rem; font-weight: 300; color: var(--ink-55, var(--ss-ink-55));
}
.ss__on { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; margin-top: 1.2rem; }
.ss__on a {
    text-decoration: none; font-size: .76rem; font-weight: 500;
    color: var(--ink-77, var(--ss-ink-77)); border: 1px solid var(--line, var(--ss-line)); border-radius: 999px;
    padding: .44rem .8rem;
}
.ss__on a:hover { border-color: var(--ink, var(--ss-ink)); color: var(--ink, var(--ss-ink)); }

/* ------------------------------------------------------------------- footer
   The legend, which is the only place the keyboard grammar is written down.
   It goes on a phone: there are no arrow keys to explain and the row would be
   forty pixels of the screen saying nothing. */
.ss__foot {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
    padding: .55rem .95rem;
    border-top: 1px solid var(--line-soft, var(--ss-line-soft));
    font-size: .68rem; color: var(--muted, var(--ss-muted));
}
.ss__foot span { display: inline-flex; align-items: center; gap: .34rem; }
.ss__foot kbd {
    font: inherit; font-size: .64rem; font-weight: 600;
    border: 1px solid var(--line, var(--ss-line)); border-radius: 4px; padding: .08rem .3rem;
    color: var(--ink-55, var(--ss-ink-55)); line-height: 1.4;
}
.ss__tally { margin-left: auto; font-variant-numeric: tabular-nums; }
.ss__tally b { color: var(--ink-77, var(--ss-ink-77)); font-weight: 600; }

/* =============================================================================
   THE PHONE

   Full screen, because a 340px-wide card floating over a 375px-wide page is a
   card with nowhere to put its results. dvh rather than vh: with the keyboard
   up, vh is still the whole screen and the footer sits behind it.
   ========================================================================== */
@media (max-width: 720px) {
    .ss__sheet {
        width: 100%; margin-top: 0;
        height: 100vh; height: 100dvh; max-height: none;
        border: 0; border-radius: 0;
        box-shadow: none;
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        transform: translateY(-6px);
    }
    .ss__scrim { -webkit-backdrop-filter: none; backdrop-filter: none; }

    .ss__bar { padding: .35rem .5rem .35rem .85rem; gap: .35rem; }
    /* 16px exactly. Anything under it and mobile Safari zooms the whole
       document on focus, which leaves the page scaled up after the sheet
       closes — the single most common way a search overlay breaks on iOS. */
    .ss__q { font-size: 16px; padding: .8rem 0; }
    .ss__esc { height: 38px; padding: 0 .6rem; }
    .ss__clear { width: 38px; height: 38px; }

    .ss__scopes { padding: .55rem .85rem; }
    .ss__scope { padding: .46rem .72rem; font-size: .74rem; }
    .ss__scoperow { padding-right: .85rem; }
    .ss__all { padding: .4rem .6rem .4rem .46rem; font-size: .68rem; }

    /* 52px rows. A finger is not a cursor and a 40px row in a scrolling list
       is a row you hit the neighbour of. */
    .ss__r { padding: .72rem .85rem; gap: .65rem; min-height: 52px; }
    .ss__t { font-size: .95rem; white-space: normal; }
    .ss__d { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .ss__h { padding-inline: .85rem; }
    .ss__i { width: 18px; }

    /* Hover is a lie on a touch screen: it sticks after the tap and leaves the
       last row highlighted behind the sheet. Only the keyboard cursor paints. */
    .ss__r:hover { background: transparent; border-left-color: transparent; }
    .ss__r.is-on { background: rgba(30, 38, 43, .045); border-left-color: var(--accent, var(--ss-accent)); }
    .ss__r:active { background: rgba(30, 38, 43, .07); }

    .ss__foot span { display: none; }
    /* …except the one inside the tally, which is the tally's own second
       half and the only place the sheet says which edition it is listing. */
    .ss__tally .ss__ed { display: inline; }
    .ss__tally { margin-left: 0; }
    .ss__foot { padding: .6rem .85rem; }
}

/* Landscape on a phone is 380 tall with the keyboard up. The chips and the
   legend both go; the field and the list are what is left, which is the
   whole job. */
@media (max-height: 460px) and (max-width: 940px) {
    .ss__scoperow, .ss__foot { display: none; }
    .ss__r { padding-block: .5rem; min-height: 44px; }
    .ss__d { display: none; }
}

/* =============================================================================
   THE DARK EDITION

   Six surfaces. Everything else in this sheet reads a token and dark-home.css
   has already flipped those. Scoped to html[data-dark] and dependent on
   nothing else in that file, so a page can carry the attribute and this
   stylesheet and be correct on its own.
   ========================================================================== */
html[data-dark] .ss__scrim { background: rgba(0, 0, 0, .6); }
html[data-dark] .ss__sheet {
    background: #0F151B;
    box-shadow: 0 30px 90px rgba(0, 0, 0, .62), 0 2px 10px rgba(0, 0, 0, .4);
}
html[data-dark] .ss__h { background: #0F151B; }
html[data-dark] .ss__r:hover,
html[data-dark] .ss__r.is-on { background: rgba(255, 255, 255, .062); }
html[data-dark] .ss__clear:hover,
html[data-dark] .ss__kill:hover { background: rgba(255, 255, 255, .09); }
html[data-dark] .ss__scope[aria-selected="true"] { color: #0F151B; }
html[data-dark] .ss__all[aria-checked="true"] { color: #0F151B; }
html[data-dark] .ss__all-t::after { background: #0F151B; }
html[data-dark] .ss__r mark { background: rgba(249, 115, 22, .26); }
@media (max-width: 720px) {
    html[data-dark] .ss__r:hover { background: transparent; }
    html[data-dark] .ss__r.is-on { background: rgba(255, 255, 255, .062); }
    html[data-dark] .ss__r:active { background: rgba(255, 255, 255, .09); }
}