/* ==========================================================================
   The app around the design system: sign-in, search, builder, messages and
   the phone layout. Semantic tokens only (see tokens.css), so both themes
   follow. The prototype's tokens/base/components/charts CSS is unchanged.
   ========================================================================== */

[hidden] { display: none !important; }

/* ---- Bar fade ----------------------------------------------------------
   Bars and columns fade in towards their value instead of charts.css's dotted
   grain, whatever data-grain says. Same specificity as the grain rules, later. */
:root .grain-h,
:root .grain-v {
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
:root .grain-h {
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, .3), #000 70%);
          mask-image: linear-gradient(to right, rgba(0, 0, 0, .3), #000 70%);
}
:root .grain-v {
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .3), #000 70%);
          mask-image: linear-gradient(to top, rgba(0, 0, 0, .3), #000 70%);
}

/* ---- Loading / errors -------------------------------------------------- */
.boot { min-height: 100vh; display: grid; place-items: center; color: var(--text); }
.boot__mark { width: 56px; height: 56px; animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .35; } }
.loading-line { color: var(--muted); font-size: 13.5px; padding: 8px 0; }
.fatal { max-width: 560px; margin: 20vh auto 0; padding: 24px 16px; text-align: center; font-size: 16px; }

/* ---- Controls ---------------------------------------------------------- */
.input {
  width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  background: var(--card); color: var(--text);
}
.input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field .input { height: 40px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--quiet { border-color: transparent; background: var(--line); color: var(--text-2); cursor: default; }
.btn--quiet:hover { border-color: transparent; color: var(--text-2); }
.link-btn { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--link-hover); }
.status { min-height: 1.45em; font-size: 13px; color: var(--muted); }
.status.is-error { color: var(--text); font-weight: 500; }
.status.is-error::before { content: '! '; color: var(--area-2); font-family: var(--font-mono); }
.tag { flex: none; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .02em; color: var(--accent-text); }

/* ---- Sign in ----------------------------------------------------------- */
.signin {
  min-height: 100vh; max-width: 1080px; margin: 0 auto; padding: 48px 24px;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px 64px; align-items: center;
}
.signin__pitch { display: flex; flex-direction: column; gap: 18px; }
.signin__pitch .brand { padding: 0; }
.signin__pitch h1 { font-size: clamp(32px, 4.6vw, 52px); letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; }
.signin__lede { max-width: 46ch; font-size: 16px; color: var(--text-2); text-wrap: pretty; }
.signin__card { padding: 28px; gap: 16px; }
.signin__card form, .signin__card > div { display: flex; flex-direction: column; gap: 14px; }
.signin__card h2 { font-size: 20px; }
@media (max-width: 760px) {
  .signin { grid-template-columns: 1fr; align-content: center; padding: 32px 16px; gap: 32px; }
}

/* ---- Shell ------------------------------------------------------------- */
.sidebar {
  position: sticky; top: 0; align-self: flex-start; height: 100vh; height: 100dvh; overflow-y: auto;
  transition: flex-basis .18s ease, padding .18s ease;
}
.sidebar__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sidebar__toggle { width: 34px; height: 34px; color: var(--muted); }
.sidebar__toggle:hover { color: var(--text); background: var(--line); }

/* Collapsed (desktop only; phones use the tab bar): a rail of icons. Labels stay for screen readers. */
@media (min-width: 761px) {
  [data-sidebar="collapsed"] .sidebar { flex: 0 0 68px; padding-left: 10px; padding-right: 10px; }
  [data-sidebar="collapsed"] .sidebar__head { flex-direction: column; gap: 14px; }
  [data-sidebar="collapsed"] .sidebar .brand { padding: 0; }
  [data-sidebar="collapsed"] .sidebar__toggle svg { transform: scaleX(-1); }
  [data-sidebar="collapsed"] .brand__name,
  [data-sidebar="collapsed"] .nav__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  [data-sidebar="collapsed"] .sidebar .eyebrow,
  [data-sidebar="collapsed"] #topic-nav,
  [data-sidebar="collapsed"] .sidebar__foot { display: none; }
  [data-sidebar="collapsed"] .nav__item { justify-content: center; padding: 10px 0; }
}
.main { flex-basis: 500px; }
button.nav__item { width: 100%; border: 0; background: none; color: var(--text); text-align: left; font: inherit; }
button.nav__item:hover { color: var(--link-hover); }
.sidebar__foot { display: flex; flex-direction: column; gap: 8px; }
.sidebar__who { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-sans); font-size: 12.5px; }
.sidebar__who #user-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.sidebar__who .link-btn { align-self: flex-start; font-size: 12.5px; }

.topbar { position: relative; z-index: 10; }
.topbar__brand { display: none; color: var(--text); }
.topbar__brand svg { width: 26px; height: 26px; }
.topbar__actions { margin-left: 0; }
.topbar__context { display: flex; gap: 8px; align-items: center; }
.btn-icon svg { width: 18px; height: 18px; }
.nav__item svg { flex: none; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn.is-saved { color: var(--accent-text); }
.btn.is-saved svg { fill: currentColor; }

/* The menu (phones only): the sidebar's links, the theme and sign-out, dropped from the top bar's right-hand end. */
.topbar__menu, .menu { display: none; }
.menu {
  position: absolute; z-index: 40; top: calc(100% + 6px); right: 12px; width: min(280px, calc(100vw - 24px));
  flex-direction: column; gap: 2px; padding: 6px;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}
.menu .nav__item { min-height: 44px; padding: 10px 12px; color: var(--text); }
.menu .nav__item svg { width: 18px; height: 18px; color: var(--text-2); }
.menu .menu__theme { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0; }
.menu__who {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 8px;
  border-top: 1px solid var(--line); font-size: 12.5px;
}
.menu__who [data-user-email] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.menu__who .link-btn { flex: none; font-size: 13px; }

.content { flex: 1; }

/* ---- Search ------------------------------------------------------------ */
.search { position: relative; }
.search > svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.search input::-webkit-search-cancel-button { filter: grayscale(1); }
.search__results {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: -1px; right: -1px;
  max-height: 360px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .22);
}
.search__results li { display: flex; align-items: baseline; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.search__results li[aria-selected="true"] { background: var(--line); }
.search__results .tag { min-width: 72px; }
.search__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search__where { margin-left: auto; padding-left: 8px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.search__none { color: var(--muted); cursor: default !important; }

/* ---- Explore ----------------------------------------------------------- */
.map-card__canvas .map { right: 16px; top: 52px; }
.map__loading { position: absolute; inset: 0; display: grid; place-items: center; }
.map-card__title {
  top: 14px; left: 14px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  background: var(--card); font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.map-card__readout { top: 56px; }
.map path[data-state][role="button"] { cursor: pointer; }
.map path[data-state]:focus-visible { outline: none; stroke: var(--accent); stroke-width: 3; }
.map path.is-selected { stroke: var(--map-pin); stroke-width: 3; }
.map-card__hint { flex: 1 1 100%; }

/* The zoomable map fills the card; the level switch, readout and zoom hint sit over it. No grain on the map. */
.map-card__canvas .map.map--gl { inset: 0; width: auto; height: auto; }
.map--gl .maplibregl-canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.map-card__levels { top: 12px; left: 12px; right: 60px; }
.map-card__levels .segmented { display: inline-flex; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.map-card__levels + .map-card__readout { top: 60px; }
.map-card__zoomhint {
  left: 50%; bottom: 14px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line-strong); font-size: 12.5px; color: var(--text-2);
}
.map--gl .maplibregl-ctrl-group { background: var(--card); border: 1px solid var(--line-strong); box-shadow: none; }
.map--gl .maplibregl-ctrl-group button + button { border-top-color: var(--line); }
[data-theme="dark"] .map--gl .maplibregl-ctrl-icon { filter: invert(1); }
.map--gl .maplibregl-ctrl-attrib { background: var(--card); color: var(--muted); }
.map--gl .maplibregl-ctrl-attrib a { color: var(--text-2); }
.legend__ramp span.is-here { outline: 2px solid var(--map-pin); outline-offset: 1px; position: relative; z-index: 1; }
.legend__labels span.is-here { color: var(--text); font-weight: 500; }

.snapshot { padding: 20px; gap: 16px; }
.explore { display: flex; flex-direction: column; gap: var(--gap); }
.explore .snapshot, .explore #cards, .explore .section-head .key { transition: opacity .15s; }
.explore.is-updating .snapshot, .explore.is-updating #cards, .explore.is-updating .section-head .key { opacity: .5; }
.snapshot .area-head h1 { text-wrap: balance; }
.snapshot__actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.snapshot__actions .btn { flex: 1 1 160px; }
.stat__note:empty { display: none; }
.warn { color: var(--text-2); }
.warn::before { content: '! '; color: var(--area-2); font-family: var(--font-mono); }

.lead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lead__value { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
.stat--small { padding: 12px; gap: 2px; }
.stat--small .stat__value { font-size: 22px; }
.card[data-topic] .bars { margin-top: 2px; }.card__list { border-top: 1px solid var(--line); padding-top: 10px; }
.card__list .caption { padding-bottom: 4px; }

/* ---- Filters and 2016 ---------------------------------------------------
   Options that change every chart sit between the topic tabs and the key. 2016 is a thin grey bar (--past) under
   each area's bar, with Australia's 2016 line and its value beside it. */
.section-head__end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filters:empty { display: none; }
.check { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); background: var(--card); color: var(--text); font-size: 13px; cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.bar-row__past { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.past-num { font-size: 11.5px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.bar-row__multi--past { grid-template-columns: minmax(0, 1fr) 92px; }
.stat__note--past { color: var(--text-2); }

/* ---- Card links and the detail page -------------------------------------
   On Explore a card's title and corner icon open its detail page (#/detail/<card>/<key>, detail.js; design in
   detail-prototype/, in git history at cdf4a27): the cards as tabs, headline tiles, then the card's sections. Cards, tiles, bars and the
   column chart are the usual ones. */
.card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.card__head h2 a:hover { color: var(--link-hover); }
.card__open { width: 32px; height: 32px; margin: -6px -6px 0 0; color: var(--muted); }
.card__open svg { width: 16px; height: 16px; }
.card__open:hover { color: var(--text); background: var(--line); }
.card__headrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px; }

.detail { display: flex; flex-direction: column; gap: var(--gap); }
.detail__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.detail__back { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 8px;
  border-radius: var(--radius-sm); color: var(--text-2); font-weight: 500; }
.detail__back svg { width: 16px; height: 16px; }
.tabs a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--radius-sm);
  color: var(--text-2); font-size: 13.5px; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="page"] { background: var(--line); color: var(--text); font-weight: 500; }
.detail__title { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.detail__title h1 { font-size: 28px; }
.detail__question { font-size: 14px; color: var(--muted); }
.detail__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.detail__tiles .stat { padding: 16px; border-radius: var(--radius-lg); }
.row > .detail__main { flex: 3 1 560px; min-width: 0; }
.row > .detail__side { flex: 2 1 400px; min-width: 0; }
.key__line { width: 14px; height: 2px; background: var(--baseline); }

/* Ranked bars ("1  China  ▬▬▬  4.6%  238,316 people"); as buttons they pick the country for the arrival chart */
.rank { display: flex; flex-direction: column; gap: 2px; container-type: inline-size; }
.rank__row { display: grid; grid-template-columns: 22px minmax(110px, 0.8fr) minmax(0, 1.4fr) minmax(132px, auto); gap: 12px;
  align-items: center; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--text); text-align: left; font-size: 14px; }
button.rank__row:hover { background: var(--bg); }
.rank__row[aria-pressed="true"] { background: var(--line); font-weight: 600; }
.rank__n { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--muted); }
.rank__bar { display: block; height: 12px; border-radius: 6px; }
.rank__fig { display: flex; justify-content: flex-end; align-items: baseline; gap: 8px; white-space: nowrap; font-weight: 400; }
.rank__fig .num { font-size: 13px; }
/* in a narrow card (or on a phone): name and figure on one line, the bar under them */
@container (max-width: 520px) {
  .rank__row { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px 10px; }
  .rank__bar { grid-column: 2 / -1; grid-row: 2; }
  .rank__fig { flex-direction: column; align-items: flex-end; gap: 0; }
}

/* Column charts (year of arrival, income, rent, bedrooms …): the age chart's columns, narrower, value on top */
.cols-chart .age-col { justify-content: center; }
.cols-chart .age-col__bar { flex: 0 1 72%; }
.cols-chart__value { position: absolute; left: 0; right: 0; bottom: calc(var(--h) + 4px); text-align: center;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); }
.cols-chart .age-chart__labels { align-items: start; line-height: 1.3; }
.cols-chart__axis { margin-top: -6px; text-align: center; }
.row > .detail__half { flex: 1 1 460px; min-width: 0; }

/* Age pyramid: men's bars grow to the left (flipped), women's to the right */
.pyramid { display: flex; flex-direction: column; gap: 3px; }
.pyramid__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 48px minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.pyramid__row--head { font-size: 12.5px; color: var(--muted); text-align: center; margin-bottom: 4px; }
.pyramid__bar { display: block; height: 12px; }
.pyramid__bar--m { transform: scaleX(-1); }
.pyramid__label { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-align: center; }
.pyramid__num { font-size: 11.5px; font-weight: 400; color: var(--text-2); }
.pyramid__row > .pyramid__num:first-child { text-align: right; }
.arrival__lead { font-size: 14px; text-wrap: pretty; }
.arrival__lead strong { font-weight: 600; }

/* Change since 2016: a grey bar for then, the area's colour for now */
.growth { display: flex; flex-direction: column; }
.growth__item { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.growth__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 500; }
.growth__pill { padding: 3px 10px; border-radius: 999px; background: var(--line); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.growth__bars { display: grid; grid-template-columns: 40px minmax(0, 1fr) 76px; gap: 4px 10px; align-items: center; }
.growth__bars .mono { font-size: 11.5px; }
.growth__bars .num { font-size: 12px; text-align: right; }
.growth__then { color: var(--text-2); font-weight: 400; }

/* Compare: an area per line in tiles and in "Change since 2016" */
.detail__area { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; }
.stat__areas { display: flex; flex-direction: column; gap: 4px; margin: 2px 0; }
.stat__area { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13.5px; }
.stat__area-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.stat__area .num { font-size: 16px; font-weight: 600; font-family: var(--font-sans); }
.growth__areas { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 10px; align-items: center; font-size: 13px; }
.growth__area { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-2); }
.growth__areas .num { font-size: 12px; text-align: right; }

/* ---- Explain -----------------------------------------------------------
   A map to drop a pin on (its circle is the catchment), the place and its baseline beside it, then sentences on
   what stands out (explain.js). */
.explain { display: flex; flex-direction: column; gap: var(--gap); }
.explain.is-updating .explain__side, .explain.is-updating .explain__body { opacity: .5; }
.explain__body { display: flex; flex-direction: column; gap: var(--gap); }
.explain__side { gap: 16px; }
.explain__radius .segmented { background: var(--card); }
.explain__side .search { margin: 0; max-width: none; flex: none; }
.explain__against .segmented { align-self: flex-start; }
.findings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.finding { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.finding:first-child { border-top: 0; padding-top: 2px; }
.finding p { font-size: 14px; text-wrap: pretty; }
.finding .bar { max-width: 420px; }
.finding__more { align-self: flex-start; font-size: 12.5px; color: var(--accent-text); font-weight: 500; }

/* ---- Find ---------------------------------------------------------------
   From the design in find-places/. The start screen (.find-start): two ways in, a place you know or a type of place.
   The results (.find): the question on the left (a sentence to fill in, then the figures compared, or the
   figures to meet), the answer on the right (the shortlist numbered on a small map, the starting place, then
   one card per place with its match). Explore's "Places like this" reads the precomputed lookalikes. */
.find-link { color: var(--accent-text); font-weight: 500; font-size: 13.5px; }
.find-chips { flex-wrap: wrap; overflow: visible; gap: 8px; }
.find-chips .chip { display: inline-flex; align-items: center; font-size: 13.5px; }
.find-chips .chip:hover { border-color: var(--axis); color: var(--text); }

.find-start { width: 100%; max-width: 1040px; margin: 0 auto; padding: 28px 0 16px; display: flex; flex-direction: column; gap: 28px; }
.find-start__intro { display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.find-start__intro h1 { font-size: 32px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.find-start__intro p { font-size: 15px; color: var(--text-2); text-wrap: pretty; }
.find-start__ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: var(--gap); }
.find-way { border-radius: 14px; padding: 22px; gap: 16px; }
.find-way__head { display: flex; align-items: flex-start; gap: 12px; }
.find-way__head h2 { font-size: 18px; font-weight: 600; }
.find-way__sub { display: block; font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.find-way__icon { width: 36px; height: 36px; flex: none; border-radius: var(--radius-md); background: var(--line); color: var(--accent-text);
  display: grid; place-items: center; }
.find-way__icon svg { width: 18px; height: 18px; }
.find-way__search.search { flex: none; max-width: none; margin: 0; height: 52px; padding: 0 14px; border-radius: var(--radius-lg); gap: 10px; }
.find-way__search.search svg { width: 18px; height: 18px; }
.find-way__search input { font-size: 15px; }
.find-way__group { display: flex; flex-direction: column; gap: 8px; }
.find-way__foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.find-way__go { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.find-way__go .btn:disabled { background: var(--line); border-color: transparent; color: var(--muted); cursor: default; }
.find-saved { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-md); background: var(--bg); }
.find-saved__name { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-saved__go { font-size: 13px; font-weight: 500; color: var(--accent-text); }
.find-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.find-preset { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: transparent; color: var(--text); text-align: left; }
.find-preset:hover { border-color: var(--axis); }
.find-preset[aria-pressed="true"] { border-color: var(--accent); background: var(--line); }
.find-preset__name { font-size: 14px; font-weight: 600; }
.find-preset__desc { font-size: 12.5px; color: var(--muted); text-wrap: pretty; }
.find-presets--small .find-preset { min-height: 40px; justify-content: center; padding: 6px 10px; }
.find-presets--small .find-preset__name { font-size: 13px; }
.find-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 12px; }
.find-step { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.find-step .num { font-size: 13px; color: var(--accent-text); padding-top: 1px; }
.find-step div { display: flex; flex-direction: column; gap: 2px; }
.find-step strong { font-weight: 600; }
.find-step .caption { font-size: 13px; }
.find-start__note { font-size: 13px; }

.find { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: flex-start; }
.find__ask { flex: 1 1 340px; max-width: 400px; padding: 20px; gap: 18px; }
.find__answer { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.find__intro { display: flex; flex-direction: column; gap: 4px; }
.find__intro h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.find__intro .caption { font-size: 13.5px; text-wrap: pretty; }
.find__modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius-md); }
.find__modes button { min-height: 40px; padding: 6px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--text-2); font-size: 13px; }
.find__modes button[aria-pressed="true"] { background: var(--card); color: var(--text); font-weight: 600; }
.find__sentence { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; }
.find__sentence > label, .find__sentence > span { font-size: 13.5px; color: var(--muted); }
.find__ask select { height: 40px; min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 0 10px;
  background: var(--card); color: var(--text); }
.find__ask .search { flex: none; max-width: none; margin: 0; }
.find__start { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 4px 4px 10px; border: 1px solid var(--accent);
  border-radius: var(--radius-md); box-sizing: border-box; min-width: 0; }
.find__start-name { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find__start .slot__remove { margin-left: 0; }
.find__figures { display: flex; flex-direction: column; gap: 8px; }
.find__figures summary { display: flex; align-items: baseline; gap: 8px; cursor: pointer; list-style: none; }
.find__figures summary::-webkit-details-marker { display: none; }
.find__figures summary::after { content: ''; width: 7px; height: 7px; margin: 0 4px 2px 0; border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted); transform: rotate(45deg); align-self: center; }
.find__figures[open] summary::after { transform: rotate(-135deg); margin-bottom: -4px; }
.find__figures summary .caption { margin-left: auto; }
.find__figures-title, .find__group-title { font-weight: 600; }
.find__figures > p { margin-top: 6px; }
.find__topic { display: flex; flex-direction: column; margin-top: 8px; }
.find__topic .eyebrow { padding: 0 8px 2px; font-size: 11px; }
.find__figure { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 36px;
  padding: 2px 8px; border-radius: var(--radius-sm); cursor: pointer; }
.find__figure:hover { background: var(--bg); }
.find__figure-name { font-size: 13.5px; }
.find__figure .num { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.find__figure .tick { width: 18px; height: 18px; box-sizing: border-box; border-radius: 5px; border: 1.5px solid var(--axis);
  display: grid; place-items: center; color: var(--on-accent); font-size: 12px; font-weight: 700; line-height: 1; }
.find__figure input:checked + .tick { background: var(--accent); border-color: var(--accent); }
.find__figure input:checked + .tick::after { content: '✓'; }
.find__figure input:not(:checked) ~ .find__figure-name { color: var(--muted); }
.find__figure input:focus-visible + .tick { outline: 2px solid var(--accent); outline-offset: 2px; }
.find__group { display: flex; flex-direction: column; gap: 8px; }
.find__criteria { display: flex; flex-direction: column; gap: 12px; }
.find__criteria:empty { display: none; }
.find__criterion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 32px; gap: 6px; align-items: center; }
.find__criterion select { grid-column: 1 / 3; }
.find__criterion .input { height: 36px; min-width: 0; }
.find__hint { grid-column: 1 / -1; }
.find__hint:empty { display: none; }
.find__add { align-self: flex-start; height: 36px; }
.find__size { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); }
.find__size label { font-size: 13.5px; color: var(--text-2); }

.find__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 16px; }
.find__title { display: flex; flex-direction: column; gap: 2px; }
.find__title h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.find__title .caption { font-size: 13.5px; }
.find__head .btn svg { flex: none; }
.find__overview { display: flex; flex-wrap: wrap; gap: var(--gap); align-items: stretch; }
.find__map { flex: 1 1 360px; }
.find__map .map-card__canvas { height: 260px; }
.find__map .map-card__foot { padding: 10px 14px; }
.find__from { flex: 1 1 260px; padding: 16px; gap: 10px; }
.find__from-name { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.find__from-facts { font-size: 13px; margin-top: -4px; }
.find__from .stats { gap: 8px; margin-top: 4px; }
.find__from .stat { padding: 10px; }
.find__from .stat__label { font-size: 12px; }
.find__from .stat__value { font-size: 18px; }
.find__from-link { margin-top: auto; font-size: 13px; }
.find__results.is-updating { opacity: .5; }
.find__empty { padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); font-size: 14px; }
.find-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.find-result { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(180px, 240px); gap: 8px 16px; align-items: start; padding: 16px 18px; }
.find-result--plain { grid-template-columns: 28px minmax(0, 1fr); }
.find-result__rank { font-size: 13px; color: var(--muted); font-weight: 400; padding-top: 3px; }
.find-result__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.find-result__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.find-result__name { font-size: 17px; font-weight: 600; }
.find-result__title .caption { font-size: 13px; }
.find-result__line { font-size: 13.5px; color: var(--text-2); text-wrap: pretty; }
.find-result__label { color: var(--muted); }
.find-result__links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 4px; }
.find-result__match { display: flex; flex-direction: column; gap: 6px; }
.find-result__score { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.find-result__pct { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.map-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent);
  color: var(--on-accent); font: 600 12px var(--font-mono); border: 2px solid var(--card); }
.map-mark:hover { color: var(--on-accent); filter: brightness(1.08); }
.similar__more { color: var(--accent-text); font-weight: 500; font-size: 13px; }
.similar__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 4px 24px; }
.similar__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; padding: 6px 0;
  border-bottom: 1px solid var(--line); }
.similar__list a { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .find-start { padding-top: 8px; gap: 20px; }
  .find-start__intro h1 { font-size: 26px; }
  .find-way { padding: 16px; }
  .find__ask { max-width: none; padding: 16px; }
  .find-result { grid-template-columns: 22px minmax(0, 1fr); padding: 14px; }
  .find-result__match { grid-column: 2; }
  .find__map { padding: 0; }
  .find__map .map-card__canvas { height: 240px; }
}

/* ---- Compare ----------------------------------------------------------- */
.compare-top { display: flex; flex-direction: column; gap: 10px; }
a.slot__name { color: var(--text); }
a.slot__name:hover { color: var(--link-hover); }
.slot--add .search { width: 100%; }
.slot--add [data-saved-picks]:empty { display: none; }
.slot--add [data-saved-picks] .link-btn { font-size: 12.5px; }
.measures-narrow { display: none; flex-direction: column; gap: 12px; }
.measures-narrow .measure-card { padding: 14px; border-color: var(--line); }
.list-plain li strong { font-weight: 600; }
.empty-state { padding: 28px; gap: 10px; max-width: 720px; }
.empty-state .caption { font-size: 14px; color: var(--text-2); text-wrap: pretty; }

/* ---- Saved areas / builder --------------------------------------------- */
.saved-grid { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.saved-slot { gap: 8px; }
.saved-slot .slot__top { gap: 10px; }
.saved-slot .slot__remove { display: inline-flex; align-items: center; justify-content: center; }
.saved-slot .slot__remove:hover { color: var(--text); background: var(--line); }
.saved-slot__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }
.saved-slot__actions .btn { height: 36px; font-size: 13px; }

.builder { gap: 16px; }
.builder .search { max-width: none; margin: 0; flex: none; }
.picked { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.picked:empty { display: none; }
.picked .area-chip { gap: 8px; font-size: 13.5px; }
.builder__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.builder__form .field label { font-size: 12.5px; color: var(--muted); }
.preview__title { font-size: 22px; letter-spacing: -0.02em; }

/* ---- About ------------------------------------------------------------- */
.prose-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--gap); align-items: start; }
.prose { gap: 12px; }
.prose p { color: var(--text-2); text-wrap: pretty; max-width: 68ch; }
.prose strong { color: var(--text); font-weight: 600; }

/* ---- Messages ---------------------------------------------------------- */
.toast {
  position: fixed; z-index: 60; left: 50%; bottom: 24px; transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px)); padding: 12px 16px;
  background: var(--card); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .25); font-size: 13.5px;
}
.toast.is-error::before { content: '! '; color: var(--area-2); font-family: var(--font-mono); font-weight: 600; }

/* ==========================================================================
   Phone (below 760px): one compact top bar (logo, search, the page's actions
   as icons, and a menu in place of the sidebar), and key measures as one
   card per measure.
   ========================================================================== */
@media (max-width: 760px) {
  .sidebar { display: none; }
  .main { flex-basis: 100%; padding-bottom: env(safe-area-inset-bottom); }

  .topbar { flex-wrap: nowrap; padding: 10px 12px 10px 16px; gap: 8px; position: sticky; top: 0; }
  .topbar__brand { display: inline-flex; flex: none; }
  .breadcrumb { display: none; }
  #top-search { flex: 1 1 0; min-width: 0; max-width: none; margin: 0; }
  .topbar__actions { gap: 2px; }
  .topbar__actions > [data-theme-toggle] { display: none; }     /* it's in the menu */
  .topbar__context { gap: 2px; }
  .topbar__context:empty { display: none; }
  /* a page's actions become plain icons; their words stay for screen readers and as a tooltip */
  .topbar__context .btn {
    width: 40px; padding: 0; border-color: transparent; background: transparent; color: var(--text);
  }
  .topbar__context .btn:hover { filter: none; }
  .topbar__context .btn svg { width: 20px; height: 20px; }
  .topbar__context .btn.is-saved { color: var(--accent-text); }
  .topbar__context .btn--quiet { cursor: default; }
  .topbar__context .btn__label {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .desktop-only { display: none !important; }
  .topbar__menu { display: inline-flex; color: var(--text); }
  .topbar__menu[aria-expanded="true"] { background: var(--line); }
  @media (hover: hover) {      /* not on touch, where hover sticks after a tap */
    .topbar__context .btn:hover, .topbar__menu:hover { background: var(--line); }
  }
  .menu { display: flex; }
  .search__where { display: none; }

  .content { padding: 16px 16px 24px; gap: 14px; }
  .card { padding: 16px; }
  .snapshot { padding: 16px; order: -1; }      /* the area's name and headline numbers first, as in the phone design */
  .snapshot h1 { font-size: 24px; }
  .stats { gap: 8px; }
  .stat { padding: 12px; }
  .stat__value { font-size: 22px; }

  .map-card__canvas { height: 340px; }
  .map-card__canvas .map { left: 8px; right: 8px; top: 96px; bottom: 8px; }
  .map-card__readout { top: 48px; min-width: 0; }
  .map-card__levels { left: 8px; right: 52px; top: 8px; }
  .map-card__levels .segmented { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .map-card__levels .segmented button { flex: none; }
  .map-card__levels + .map-card__readout { top: 54px; left: 8px; }
  .section-head .tabs, .detail__nav .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .section-head .tabs button, .detail__nav .tabs a { flex: none; }
  .detail__title h1 { font-size: 24px; }

  .measures-wide { display: none; }
  .measures-narrow { display: flex; }
  .builder__form { grid-template-columns: 1fr; }
  .toast { bottom: calc(16px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Compared with (compared.js, explore.js; from the design handover in
   prototype/, compare.css). Places are bars (--area-1, then --area-2),
   benchmarks are a thin --baseline line, the same place in 2016 is a grey
   --past bar with no fade. Never more than two bars per row.
   ========================================================================== */
:root, [data-theme="dark"] {
  --busy-scrim: rgba(35, 31, 31, .55);          /* over the page while it loads */
  --note-bg: var(--stone-900);                  /* caveat notes (lockdown, inflation) */
  --pop-shadow: 0 18px 48px rgba(0, 0, 0, .55);
  --scrim: rgba(10, 8, 8, .6);
}
[data-theme="light"] {
  --busy-scrim: rgba(242, 242, 241, .6);
  --note-bg: var(--stone-100);
  --pop-shadow: 0 18px 48px rgba(25, 21, 21, .16);
  --scrim: rgba(25, 21, 21, .35);
}

/* ---- bars: one line per bar (name, bar, value), then the line's value as a caption ---- */
.cmp-bars { display: grid; grid-template-columns: minmax(48px, max-content) minmax(0, 1fr) 64px; gap: 5px 10px; align-items: center; }
.cmp-bars__name { max-width: 150px; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp-bars__val { font-family: var(--font-mono); font-size: 12px; text-align: right; color: var(--text); font-weight: 500; }
.cmp-bars__name[data-role="past"], .cmp-bars__val[data-role="past"] { font-weight: 400; }
.bar__fill[data-role="area"] { --c: var(--bar-1); }
.bar__fill[data-role="target"] { --c: var(--bar-2); }
.bar__fill[data-role="past"] { --c: var(--past); }
.cmp-caption { grid-column: 2 / -1; display: flex; align-items: center; gap: 6px; margin-top: 1px; font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.cmp-swatch { display: inline-block; flex: none; }
.cmp-swatch--line { width: 2px; height: 12px; background: var(--baseline); }
.cmp-swatch--area, .cmp-swatch--target, .cmp-swatch--past { width: 9px; height: 9px; border-radius: 2px; }
.cmp-swatch--area { background: var(--area-1); }
.cmp-swatch--target { background: var(--area-2); }
.cmp-swatch--past { background: var(--past); }
.cmp-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text-2); }
.cmp-key > span { display: inline-flex; align-items: center; gap: 6px; }
.cmp-key .cmp-swatch--area, .cmp-key .cmp-swatch--target, .cmp-key .cmp-swatch--past { width: 14px; height: 10px; border-radius: 0 3px 3px 0; }
.cmp-key .cmp-swatch--line { height: 14px; }
.cmp-note { font-size: 12.5px; color: var(--text-2); padding: 6px 10px; background: var(--note-bg); border-radius: var(--radius-sm); align-self: flex-start; }
.cmp-tilenote { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.cmp-tilenote:empty { display: none; }
.cmp-rows { display: flex; flex-direction: column; }
.cmp-row { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }
.cmp-row:first-child { border-top: 0; padding-top: 4px; }
.cmp-row__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cmp-row__label { font-weight: 500; }
.cmp-row__gap { font-size: 12.5px; color: var(--text-2); text-align: right; }

/* ---- the picker: a popover on desktop, a bottom sheet on phones ---- */
.cmp-picker { position: relative; display: flex; align-items: center; gap: 8px; }
.cmp-picker__label { font-size: 13px; color: var(--muted); }
.cmp-picker__button { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 10px 0 12px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); background: var(--card); color: var(--text); font-size: 13.5px; font-weight: 500; max-width: 300px; }
.cmp-picker__button > span:not(.cmp-swatch):not(.cmp-chip__vs) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmp-picker__button svg { color: var(--muted); flex: none; }
.cmp-picker__button[aria-expanded="true"] { border-color: var(--accent); }
.cmp-chip__vs { display: none; color: var(--muted); font-weight: 400; }
.cmp-pop { position: absolute; z-index: 50; top: calc(100% + 8px); right: 0; width: 360px; max-width: calc(100vw - 32px); box-sizing: border-box;
  max-height: min(560px, 70vh); overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 2px; background: var(--card);
  border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--pop-shadow); }
.cmp-pop__search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; margin-bottom: 6px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-md); flex: none; }
.cmp-pop__search svg { color: var(--muted); flex: none; }
.cmp-pop__search input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 13.5px; background: transparent; color: var(--text); }
.cmp-pop__search:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.cmp-pop__head { padding: 10px 10px 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cmp-opt { display: grid; grid-template-columns: 20px minmax(0, 1fr) 18px; gap: 10px; align-items: center; padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--text); cursor: pointer; }
.cmp-opt:hover, .cmp-opt:focus-visible { background: var(--bg); outline: none; }
.cmp-opt:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.cmp-opt[aria-selected="true"] { background: var(--line); }
.cmp-opt__icon { display: flex; justify-content: center; }
.cmp-opt__name { display: block; font-size: 13.5px; font-weight: 500; }
.cmp-opt__sub { display: block; font-size: 12px; color: var(--muted); }
.cmp-opt__check { color: var(--accent-text); visibility: hidden; }
.cmp-opt[aria-selected="true"] .cmp-opt__check { visibility: visible; }
.cmp-pop__foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 10px 2px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.cmp-scrim { position: fixed; inset: 0; z-index: 30; background: var(--scrim); }
.cmp-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 86vh; overflow: auto; padding: 8px 14px calc(18px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 2px; background: var(--card); border-top: 1px solid var(--line-strong); border-radius: 18px 18px 0 0; }
.cmp-sheet__grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); align-self: center; margin: 4px 0 10px; }
.cmp-sheet__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.cmp-sheet__top h2 { font-size: 17px; }
.cmp-sheet__close { border-radius: 999px; font-size: 20px; }
.cmp-sheet .cmp-opt { min-height: 52px; }
.cmp-sheet__map { margin-top: 10px; }

/* ---- Explore: the header, the map and snapshot, tabs, the overview ---- */
.explore { display: flex; flex-direction: column; gap: var(--gap); }
.explore .ex-snapshot, .explore .ex-body, .explore .ex-facts { transition: opacity .15s; }
.explore.is-updating .ex-snapshot, .explore.is-updating .ex-body { opacity: .5; }
.ex-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; }
.ex-head .area-head { min-width: 0; }
.ex-head h1 { font-size: 30px; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.ex-facts { font-size: 13px; }
.ex-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ex-actions .btn-icon svg { width: 18px; height: 18px; }
.btn-icon.is-saved { color: var(--accent-text); border-color: var(--accent); }
.btn-icon.is-saved svg { fill: currentColor; }
.ex-top { align-items: stretch; }
.ex-top[hidden] { display: none !important; }
.ex-map { flex: 1 1 420px; min-width: 0; }
.ex-map .map-card__canvas { height: 360px; }
.ex-map .map-card__canvas .map { top: 0; left: 0; right: 0; bottom: 0; }
.ex-map__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.ex-map .map-card__readout { top: 14px; }
.level-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.level-switch button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--card); color: var(--text-2); font-size: 13px; }
.level-switch button:hover { color: var(--text); border-color: var(--axis); }
.level-switch button[aria-pressed="true"] { background: var(--line); color: var(--text); font-weight: 500; }
.level-switch button[data-extra][aria-pressed="true"], .level-switch button[data-mode="point"][aria-pressed="true"] { border-color: var(--accent); }
.level-switch svg { color: var(--muted); }
.level-switch--radius button { font-family: var(--font-mono); font-size: 12px; }
.ex-chain ol { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ex-chain__chip { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--card); color: var(--text); font-size: 13px; font-weight: 500; }
.ex-chain__chip:hover { border-color: var(--axis); color: var(--text); }
.ex-chain__sep { color: var(--muted); }
.ex-chain__here { font-size: 13px; font-weight: 600; }
.ex-map .map-card__foot { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 14px; }
.ex-map-opts summary { font-size: 12.5px; color: var(--accent-text); font-weight: 500; cursor: pointer; }
.ex-map-opts__body { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; padding-top: 10px; }
.ex-map-opts__body .segmented button { height: 28px; }
.ex-snapshot { flex: 1 1 380px; min-width: 0; padding: 18px; gap: 16px; }
.ex-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ex-tiles .stat__value { font-size: 26px; }
.ex-tabs { align-self: flex-start; }
.ex-tabs a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--radius-sm); color: var(--text-2); font-size: 13.5px; }
.ex-tabs a[aria-current="page"] { background: var(--line); color: var(--text); font-weight: 500; }
.ex-tabs a:hover { color: var(--text); }
.ex-overview { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; }
.ex-overview > :only-child { grid-column: 1 / -1; }
.ex-standout .card__head, .ex-side .card__head { gap: 4px; }
.ex-standout .cmp-key, .ex-side .cmp-key { margin-top: 6px; }
.ex-diffs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ex-diffs li + li { border-top: 1px solid var(--line); }
.ex-diff { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 14px 32px 14px 0; color: var(--text); }
.ex-diff:hover { color: var(--text); }
.ex-diff:hover .ex-diff__headline { color: var(--link-hover); }
.ex-diff__headline { font-weight: 600; font-size: 15px; text-wrap: pretty; }
.ex-diff__go { position: absolute; right: 4px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--muted); }
.ex-standout .card__foot, .ex-side .card__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 12px; border-top: 1px solid var(--line); }
.ex-side { gap: 12px; }
.ex-changes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ex-changes li { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }
.ex-alike__key { justify-content: flex-end; }
.ex-alike { width: 100%; border-collapse: collapse; }
.ex-alike th, .ex-alike td { padding: 11px 0; border-top: 1px solid var(--line); text-align: left; font-weight: 500; }
.ex-alike td { text-align: right; width: 84px; font-size: 13px; }
.ex-care { margin: 0; display: flex; flex-direction: column; }
.ex-care dt { font-weight: 600; padding-top: 14px; border-top: 1px solid var(--line); }
.ex-care dd { margin: 4px 0 14px; color: var(--text-2); font-size: 13.5px; text-wrap: pretty; }
.ex-cards .card__head a { color: var(--text); }
.ex-cards .card__head a:hover { color: var(--link-hover); }
.ex-cards .lead { row-gap: 2px; }
.ex-cards .lead .cmp-tilenote { flex-basis: 100%; }
.ex-cards .kv .cmp-tilenote { margin-left: 6px; }
.ex-words { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 24px; }
.ex-words > div:first-child { flex: 1 1 420px; display: flex; flex-direction: column; gap: 4px; }
.ex-keep { gap: 0; }
.ex-keep__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); color: var(--text); }
.ex-keep__link > span { display: flex; flex-direction: column; gap: 2px; }
.ex-keep__link strong { font-weight: 600; }
.ex-keep__link:hover strong { color: var(--link-hover); }
.ex-keep__link svg { color: var(--muted); flex: none; }
.ex-notes .link-btn { font-size: 13px; }
.sidebar__about { font-size: 12.5px; color: var(--accent-text); }
.tabbar { display: none; }

/* ---- the loading screen (ui.busy): over the page, below the top bar; the card stays mid-screen as you scroll ---- */
.main { position: relative; }
.busy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--busy-scrim); backdrop-filter: blur(1.5px); }
.busy__card { position: sticky; top: 38vh; width: max-content; max-width: calc(100% - 32px); margin: 30vh auto 0; display: flex; align-items: center; gap: 12px;
  padding: 14px 20px; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--pop-shadow);
  font-weight: 500; color: var(--text); }
.busy__mark { width: 28px; height: 28px; flex: none; animation: breathe 1.6s ease-in-out infinite; }
.ex-find-end { display: none; }
.ex-stand-btn[aria-current="page"] { border-color: var(--accent); color: var(--accent-text); }

@media (max-width: 960px) {
  .ex-overview { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .ex-head { flex-direction: column; align-items: stretch; }
  .ex-head h1 { font-size: 26px; }
  .ex-actions { gap: 8px; }
  .ex-actions .ex-find { display: none; }
  .ex-find-end { display: flex; height: 52px; }
  .cmp-picker { flex: 1 1 auto; min-width: 0; }
  .cmp-picker__label { display: none; }
  .cmp-picker__button { border-radius: 999px; min-width: 0; }
  .cmp-chip__vs { display: inline; }
  .cmp-pop { display: none; }
  .ex-map { padding: 0; }
  .ex-map .map-card__canvas { height: 260px; }
  .ex-snapshot { padding: 16px; }
  .ex-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ex-tiles .stat__value { font-size: 22px; }
  .ex-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .ex-tabs a { flex: none; }
  .cmp-bars { grid-template-columns: minmax(44px, max-content) minmax(0, 1fr) 56px; }
  .cmp-bars__name { max-width: 110px; }
  .tabbar { display: grid; position: fixed; left: 0; right: 0; }
  .content { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}