/* S2 a11y demo — focus, target size, heading neutralization, home main layout.
   Spec Musts without changing the sparse SERP look. */

:root { --a11y-focus: #1a73e8; }

/* ---- Headings: kill UA chrome so original class rules win ----
   Wordmark keeps .home .biglogo { clamp(28px, 6vw, 48px); weight 500; margin-bottom 28px; … }
   Result titles keep .hit h2 (aliases .hit h3). New page h1s inherit surrounding type. */
/* Only neutralize NEW h1 wrappers / wordmark / brand — never result h2/h3
   (those keep page .hit h2 rules). */
h1.page-h1,
h1.a11y-h1,
h1.biglogo,
h1.brand {
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  margin: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
}

/* Wordmark: behave exactly like the old div.biglogo (block + original margins via .home .biglogo) */
h1.biglogo,
.home h1.biglogo {
  display: block;
  /* do NOT override font-size / margin-bottom — .home .biglogo in page CSS owns those */
}

/* Maps brand h1 wraps / is the brand control — no extra UA margin */
.topbar h1.brand,
h1.brand {
  display: inline;
  white-space: nowrap;
}
.topbar h1.brand a.brand {
  /* link keeps .brand styles */
}

/* Neutralize UA main box so wrapping primary content does not shift layout */
main {
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
}

/* ---- Home: <main> must not break .home flex centering ---- */
.home > main,
.home main#main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

/* site-chrome header: keep children in .home / .top flex flow */
header.site-chrome {
  display: contents;
}

/* ---- Quiet focus on interactive controls (not search inner input) ---- */
:focus { outline: none; }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: 2px solid var(--a11y-focus);
  outline-offset: 2px;
}

/* Search pill: ring on the container, not a square inset on the input */
.searchbar:focus-within {
  outline: 2px solid var(--a11y-focus);
  outline-offset: 2px;
}
.searchbar input[type="search"]:focus,
.searchbar input[type="search"]:focus-visible {
  outline: none;
}

/* Maps search row (rectangular, not pill) — same pattern */
#search:focus-within {
  outline: 2px solid var(--a11y-focus);
  outline-offset: 2px;
  border-radius: 5px;
}
#query:focus,
#query:focus-visible {
  outline: none;
}

/* ---- Map / icon / primary controls → house 44×44 (not layer checkboxes) ---- */
.app .topbar button,
.app .topbar #menu,
.app .topbar #locate,
.app .topbar #search button,
.clear-all,
.toggle-labels,
#close {
  min-width: 44px;
  min-height: 44px;
  height: 44px;
}
.app .topbar { height: 56px; align-items: center; }
.app .topbar input,
.app #query {
  min-height: 44px;
  height: 44px;
  font-size: 16px;
}
.leaflet-bar a,
.leaflet-touch .leaflet-bar a {
  width: 44px !important;
  height: 44px !important;
  line-height: 44px !important;
  font-size: 18px;
}
.leaflet-top { top: 66px; }

#drawer[aria-hidden="true"] { visibility: hidden; }
#drawer:not([aria-hidden="true"]),
#drawer.open { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  #drawer { transition: none !important; }
}

/* Chart one-line summaries */
.chart-summary,
.a11y-chart-summary {
  font-size: 13px;
  color: #4d5156;
  margin: 6px 0 12px;
  max-width: 860px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

ul.search-suggestions {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Distinguish in-text links without a new skin (intentional visual delta) */
.cc-line a,
.aff-books-foot a,
.aff-books-note a,
.stats a,
.yt-fallback a,
footer a,
.site-footer a,
.foot a {
  text-decoration: underline;
}

/* Affiliate/footer link contrast: existing --muted token (intentional delta) */
.aff-books-foot a,
.aff-books-note a,
.foot {
  color: #4d5156;
}
.vip .n { color: #4d5156; }

/* Drawer focus-in fix (2026-10-06): app.css uses `transition:.2s` (all), so
   visibility tweened and was still `hidden` when a11y.js moved focus → focus
   stayed on #menu. Flip visibility instantly on open; delay it on close so
   the slide-out still animates. Does not touch #status-stack. */
#drawer { transition: transform .2s, visibility 0s linear .2s; }
#drawer.open,
#drawer:not([aria-hidden="true"]) { transition: transform .2s, visibility 0s; }

/* ---- Follow-up 2026-10-06 (on top of cc5dba0) ---- */

/* Maps: app.css hides .brand at <=650px, and the h1 wrapper carries .brand,
   so the page's only h1 vanished on mobile. Keep it in the a11y tree,
   visually hidden (out of flow → no topbar layout change). a11y.js sets
   tabindex=-1 on the link at this width. */
@media (max-width: 650px) {
  .topbar h1.page-h1.brand {
    display: block;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  .topbar h1.page-h1.brand a.brand { display: inline; }
}

/* Work detail: map credit links need a non-colour cue (1.4.1 / link-in-text-block). */
.work-places-map-credit a { text-decoration: underline; }

/* Work detail entity clouds: count badges were opacity .55 over --muted
   (#4d5156 → #9d9fa2, 2.65:1). Smallest change that reaches 4.5:1 at
   ~11px: opacity .8 (renders #717478, 4.6:1). Same hue/weight/size. */
.detail-wrap .entity-cloud-stack .tagcloud a .n { opacity: .8; }