/* ==========================================================================
 * lc-restaurants-app.css — OTA-style directory styling for /restaurants/ (forked from lc-hotels.css, generic .lc-* classes).
 *
 * OTA information architecture (sidebar / results / demoted map), Lowcountry
 * Magazine skin. The type rule IS the aesthetic: SERIF for content (hotel
 * names, prices, blurbs), MONTSERRAT-UPPERCASE 11px/2px-tracked for chrome
 * (every label, eyebrow, filter heading, button) — echoing the site nav.
 * No Expedia blue, no Inter, no generic SaaS chrome. Both fonts are already
 * loaded by the theme; nothing here loads a font.
 *
 * Carries its own copy of the shell/card/popup rules (a sibling copy lives in
 * lc-listings.css) by explicit project decision — /listings/ is live and must
 * not be touched.
 * ========================================================================== */

.lc-app {
  --lc-ink:      #2d2e33;
  --lc-muted:    #6c6d74;
  --lc-line:     #e5e5e7;
  --lc-bg:       #ffffff;
  --lc-bg-soft:  #f7f7f7;
  --lc-accent:   #303033;   /* lowcountry green */
  --lc-gold:     #b8863b;   /* featured accent  */
  --lc-shadow:   0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
  --lc-shadow-lift: 0 6px 18px rgba(0,0,0,.14);

  --lc-serif: "PT Serif", Georgia, "Times New Roman", serif;
  --lc-sans:  "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --lc-side-w: 264px;

  box-sizing: border-box;
  color: var(--lc-ink);
  background: var(--lc-bg);
  font-family: var(--lc-serif);
  font-size: 15px;
  line-height: 1.45;
}
.lc-app *, .lc-app *::before, .lc-app *::after { box-sizing: border-box; }

/* ---- the chrome voice ---------------------------------------------------
   One rule, applied everywhere a label/eyebrow/button appears. */
.lc-fgroup__head,
.lc-sidebar__title,
.lc-count,
.lc-sortwrap__label,
.lc-check__label,
.lc-check__count,
.lc-btn,
.lc-clear,
.lc-sheet-close,
.lc-viewtoggle button,
.lc-card__sub,
.lc-card__view,
.lc-card__ribbon,
.lc-rate__per,
.lc-chip,
.lc-pop__cta,
.lc-app select {
  font-family: var(--lc-sans);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 600;
}

/* ---- form controls ------------------------------------------------------ */
.lc-app input[type="text"],
.lc-app input[type="number"],
.lc-app select {
  height: 38px;
  width: 100%;
  padding: 0 10px;
  border: 1px solid var(--lc-line);
  border-radius: 2px;
  background: var(--lc-bg);
  color: var(--lc-ink);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.lc-app input[type="text"],
.lc-app input[type="number"] {
  font-family: var(--lc-serif);
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
}
.lc-app select {
  padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, var(--lc-muted) 50%),
                    linear-gradient(135deg, var(--lc-muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 17px, calc(100% - 10px) 17px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.lc-app input:focus,
.lc-app select:focus { border-color: var(--lc-accent); }
.lc-app input::placeholder { color: var(--lc-muted); }

.lc-btn {
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--lc-line);
  border-radius: 2px;
  background: var(--lc-bg);
  color: var(--lc-ink);
  cursor: pointer;
  white-space: nowrap;
}
.lc-btn:hover { background: var(--lc-bg-soft); border-color: var(--lc-muted); }
.lc-btn.is-on,
.lc-btn--primary { background: var(--lc-accent); border-color: var(--lc-accent); color: #fff; }

/* ---- Top chrome bar (below 1200px only) --------------------------------- */
.lc-topbar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--lc-bg);
  border-bottom: 1px solid var(--lc-line);
  position: relative;
  z-index: 500;
}
.lc-topbar__spacer { flex: 1 1 auto; }
.lc-filters-toggle,
.lc-maptoggle,
.lc-viewtoggle { display: none; }

.lc-viewtoggle {
  border: 1px solid var(--lc-line);
  border-radius: 2px;
  overflow: hidden;
}
.lc-viewtoggle button {
  border: 0;
  background: var(--lc-bg);
  color: var(--lc-ink);
  padding: 11px 16px;
  cursor: pointer;
}
.lc-viewtoggle button.is-on { background: var(--lc-accent); color: #fff; }

/* ---- Three-column shell ------------------------------------------------- */
.lc-shell {
  display: flex;
  align-items: stretch;
  height: calc(100vh - 220px);   /* JS overrides with a measured value */
  min-height: 480px;
}

/* --- column 1: sidebar --- */
.lc-sidebar {
  flex: 0 0 var(--lc-side-w);
  width: var(--lc-side-w);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--lc-bg);
  border-right: 1px solid var(--lc-line);
}
.lc-sidebar__inner { padding: 20px 18px 32px; }
.lc-sidebar__head { display: none; }   /* bottom-sheet header, mobile only */

.lc-fgroup { margin-bottom: 22px; }
.lc-fgroup__head {
  color: var(--lc-ink);
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--lc-line);   /* the hairline rule */
}
.lc-fgroup__body--row { display: flex; gap: 8px; }
.lc-fgroup__body--row .lc-num { width: 50%; }

/* --- custom checkbox: 15px square, accent fill + white tick when checked --- */
.lc-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  cursor: pointer;
  user-select: none;
}
.lc-check input {
  position: absolute;
  opacity: 0;
  width: 15px; height: 15px;
  margin: 0;
  cursor: pointer;
}
.lc-check__box {
  flex: 0 0 auto;
  position: relative;
  width: 15px; height: 15px;
  border: 1px solid var(--lc-line);
  border-radius: 2px;
  background: var(--lc-bg);
  transition: background .12s ease, border-color .12s ease;
}
.lc-check:hover .lc-check__box { border-color: var(--lc-accent); }
.lc-check input:focus-visible ~ .lc-check__box { outline: 2px solid var(--lc-accent); outline-offset: 2px; }
.lc-check input:checked ~ .lc-check__box {
  background: var(--lc-accent);
  border-color: var(--lc-accent);
}
/* white tick */
.lc-check__box::after {
  content: "";
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .12s ease;
}
.lc-check input:checked ~ .lc-check__box::after { transform: rotate(45deg) scale(1); }

.lc-check__label {
  flex: 1 1 auto;
  color: var(--lc-ink);
  line-height: 1.35;
}
.lc-check__count {
  flex: 0 0 auto;
  color: var(--lc-muted);
  letter-spacing: 1px;
  font-weight: 500;
}
.lc-check.is-empty .lc-check__label,
.lc-check.is-empty .lc-check__count { color: var(--lc-muted); opacity: .5; }

.lc-clear {
  display: block;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--lc-accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.lc-clear:hover { color: var(--lc-ink); }

/* --- column 2: results --- */
.lc-results {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--lc-bg-soft);
}
.lc-results__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--lc-line);
  background: var(--lc-bg-soft);
  position: sticky;
  top: 0;
  z-index: 5;
}
.lc-count {
  color: var(--lc-ink);
  white-space: nowrap;
  flex: 1 1 auto;
}
.lc-sortwrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.lc-sortwrap__label { color: var(--lc-muted); }
.lc-sortwrap select { width: auto; min-width: 150px; height: 34px; }
.lc-sortwrap select { background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px; }

/* ---- Result cards (horizontal) ------------------------------------------ */
.lc-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px;
}
.lc-card {
  position: relative;
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr) auto;
  gap: 16px;
  padding: 14px;
  background: var(--lc-bg);
  border: 1px solid var(--lc-line);
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.lc-card:hover,
.lc-card.is-active { box-shadow: var(--lc-shadow-lift); border-color: var(--lc-muted); }
.lc-card.is-active { outline: 1px solid var(--lc-accent); outline-offset: -1px; }
.lc-card--featured { border-left: 2px solid var(--lc-gold); }

.lc-card__media {
  position: relative;
  width: 208px;
  height: 156px;
  background: #e7eae8;
  border-radius: 2px;
  overflow: hidden;
}
.lc-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-card__noimg {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--lc-muted);
  font-size: 13px;
  background: var(--lc-bg-soft);
}
.lc-card__ribbon {
  position: absolute;
  top: 10px; left: 0;
  background: var(--lc-gold);
  color: #fff;
  font-size: 9px;
  letter-spacing: 1.5px;
  padding: 4px 9px;
  border-radius: 0 2px 2px 0;
}

.lc-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 2px;
}
.lc-card__name {
  margin: 0;
  font-family: var(--lc-serif);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--lc-ink);
}
.lc-card__sub { color: var(--lc-muted); font-size: 10px; }
.lc-card__rating { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lc-stars { color: var(--lc-gold); font-size: 13px; letter-spacing: 1px; line-height: 1; }
.lc-card__score { font-family: var(--lc-serif); font-size: 13px; color: var(--lc-ink); }
.lc-card__score b { font-weight: 700; }
.lc-card__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 6px; }
.lc-chip {
  font-size: 9px;
  letter-spacing: 1px;
  line-height: 1.9;
  padding: 0 8px;
  border: 1px solid var(--lc-line);
  border-radius: 2px;
  background: var(--lc-bg-soft);
  color: var(--lc-muted);
  white-space: nowrap;
}

.lc-card__rail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  text-align: right;
  padding-left: 8px;
  min-width: 108px;
}
.lc-card__price { display: flex; flex-direction: column; align-items: flex-end; }
.lc-rate {
  font-family: var(--lc-serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--lc-ink);
  white-space: nowrap;
}
/* price === 0 ⇒ words, never "$0" / "$—" (design §4.2) */
.lc-rate--none {
  font-size: 13px;
  font-weight: 400;
  font-style: italic;
  color: var(--lc-muted);
}
.lc-rate__per { color: var(--lc-muted); font-size: 10px; margin-top: 3px; }
.lc-card__view {
  border: 1px solid var(--lc-accent);
  color: var(--lc-accent);
  padding: 8px 14px;
  border-radius: 2px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.lc-card:hover .lc-card__view { background: var(--lc-accent); color: #fff; }

/* --- column 3: map --- */
.lc-map {
  flex: 0 0 38%;
  width: 38%;
  min-width: 380px;
  min-height: 300px;
  background: #dfe4e2;
  border-left: 1px solid var(--lc-line);
}

/* ---- List states / footer ---------------------------------------------- */
.lc-state {
  padding: 48px 24px;
  text-align: center;
  color: var(--lc-muted);
  font-family: var(--lc-serif);
  font-size: 15px;
}
.lc-loadmore-wrap { padding: 4px 20px 24px; text-align: center; }
.lc-attr {
  margin: 0 20px;
  padding: 14px 0 24px;
  font-family: var(--lc-serif);
  font-size: 12px;
  line-height: 1.5;
  color: var(--lc-muted);
  border-top: 1px solid var(--lc-line);
}
.lc-spinner {
  padding: 18px; text-align: center;
  color: var(--lc-muted);
  font-family: var(--lc-sans);
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
}

/* ---- Price-bubble markers (L.divIcon) ----------------------------------
   Leaflet transforms the wrapper element to position it, so the wrapper is
   given zero size and the visible pill is an inner span centered on the
   coordinate via its own translate(-50%,-50%). */
.lc-marker-wrap { background: none !important; border: none !important; width: 0; height: 0; }
.lc-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-block;
  padding: 3px 9px;
  background: var(--lc-bg);
  color: var(--lc-ink);
  font-family: var(--lc-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.2;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 1px 4px rgba(0,0,0,.28);
  white-space: nowrap;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .1s ease;
}
.lc-marker--featured { background: var(--lc-gold); color: #fff; border-color: var(--lc-gold); }
.lc-marker--active {
  transform: translate(-50%, -50%) scale(1.18);
  z-index: 1000 !important;
  box-shadow: 0 3px 12px rgba(0,0,0,.4);
  background: var(--lc-accent);
  color: #fff;
  border-color: var(--lc-accent);
}

/* ---- Marker popup card -------------------------------------------------- */
.lc-pop .leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,.28);
}
.lc-pop .leaflet-popup-content { margin: 0; width: 212px !important; line-height: 1.35; }
.lc-pop a.lc-pop__card,
.lc-pop__card { display: block; text-decoration: none; color: var(--lc-ink); cursor: pointer; }
.lc-pop__media { width: 100%; height: 132px; background: var(--lc-bg-soft); overflow: hidden; }
.lc-pop__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-pop__media--empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--lc-muted); font-size: 12px;
}
.lc-pop__body { padding: 10px 11px 11px; }
.lc-pop__addr {
  font-family: var(--lc-serif);
  font-size: 15px; font-weight: 700; line-height: 1.25;
  color: var(--lc-ink);
}
.lc-pop__price { margin-top: 4px; display: flex; align-items: baseline; gap: 5px; }
.lc-pop__price .lc-rate { font-size: 18px; }
.lc-pop__price .lc-rate--none { font-size: 12px; }
.lc-pop__price .lc-rate__per { margin-top: 0; }
.lc-pop__meta { font-family: var(--lc-serif); font-size: 12.5px; color: var(--lc-ink); margin-top: 4px; }
.lc-pop__meta b { font-weight: 700; }
.lc-pop__cta { margin-top: 8px; font-size: 9px; color: var(--lc-accent); }
.lc-pop__card:hover .lc-pop__cta { text-decoration: underline; }
.lc-pop__state {
  padding: 20px 16px; text-align: center; color: var(--lc-muted);
  font-family: var(--lc-sans); font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
}

/* ==========================================================================
   TABLET (960–1199px): map behind a "Show map" toggle; sidebar stays.
   ========================================================================== */
@media (max-width: 1199px) {
  .lc-topbar { display: flex; }
  .lc-maptoggle { display: inline-flex; align-items: center; }

  .lc-shell[data-view="list"] .lc-map { display: none; }
  .lc-shell[data-view="map"]  .lc-results { display: none; }
  .lc-shell[data-view="map"]  .lc-map { display: block; flex: 1 1 auto; width: auto; }

  .lc-card { grid-template-columns: 176px minmax(0, 1fr) auto; }
  .lc-card__media { width: 176px; height: 132px; }
}

/* ==========================================================================
   MOBILE (<960px): sidebar = bottom sheet behind Filters; map behind
   List/Map; cards full-width with the photo on TOP (208px of photo plus text
   does not fit a 360px viewport).
   ========================================================================== */
@media (max-width: 959px) {
  .lc-maptoggle { display: none; }
  .lc-viewtoggle { display: inline-flex; }

  /* The site-wide bottom bar (lc-mobile-nav) adopted Filters + List/Map, so
     .lc-topbar is left holding nothing but its own padding and border — hide
     it, giving mobile ONE bar instead of two. lc-hotels.js adds this class to
     the root ONLY after the handover actually succeeded, so if the bottom bar
     is absent the topbar keeps rendering as the fallback. */
  .lc-app.lc-has-bottombar .lc-topbar { display: none; }

  .lc-shell { height: auto; min-height: 0; display: block; }

  /* --- sidebar: no longer a bottom sheet -----------------------------------
     The site bottom bar's funnel reveal (lc-mobile-nav addReveal) MOVES the
     .lc-sidebar into its docked .lc-bottombar__panel on mobile and returns it
     to the shell (column 1) on desktop. So the fixed slide-up sheet is retired:
     the sidebar becomes a plain full-width, stacked block. These base mobile
     rules also cover the no-bottombar FALLBACK (the sidebar renders inline at
     the top of the shell, still inside .lc-app so its tokens resolve). */
  .lc-sidebar {
    width: auto;
    max-height: none;
    border-right: 0;
  }
  /* Sheet header + its "Done" button are retired — the reveal panel supplies
     its own funnel button and close affordances. Keep the head hidden (as the
     desktop base rule already does); do NOT re-show it as the old sheet did. */
  .lc-sidebar__head { display: none; }

  /* --- sidebar INSIDE the bottom bar's reveal panel ------------------------
     The panel lives at <body> level, OUTSIDE .lc-app, so the app's design
     tokens and its `.lc-app input` / box-sizing rules no longer reach the moved
     sidebar. Re-declare exactly what the filter UI needs — the same pattern the
     detail overlay uses (it is appended to <body> for the same reason). The
     panel itself owns the scroll + skin; render the groups full-width. */
  .lc-bottombar__panel .lc-sidebar {
    --lc-ink: #2d2e33; --lc-muted: #6c6d74; --lc-line: #e5e5e7;
    --lc-bg: #ffffff; --lc-bg-soft: #f7f7f7; --lc-accent: #303033; --lc-gold: #b8863b;
    --lc-serif: "PT Serif", Georgia, "Times New Roman", serif;
    --lc-sans: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: auto;
    max-height: none;
    overflow: visible;
    -webkit-overflow-scrolling: auto;
    border-right: 0;
    background: transparent;
    color: var(--lc-ink);
    font-family: var(--lc-serif);
    font-size: 15px;
    line-height: 1.45;
  }
  .lc-bottombar__panel .lc-sidebar,
  .lc-bottombar__panel .lc-sidebar *,
  .lc-bottombar__panel .lc-sidebar *::before,
  .lc-bottombar__panel .lc-sidebar *::after { box-sizing: border-box; }
  .lc-bottombar__panel .lc-sidebar__inner { padding: 12px 15px 16px; }
  .lc-bottombar__panel .lc-sidebar__head,
  .lc-bottombar__panel .lc-sheet-close { display: none; }
  .lc-bottombar__panel .lc-sidebar input[type="text"] {
    height: 38px; width: 100%; padding: 0 10px;
    border: 1px solid var(--lc-line); border-radius: 2px;
    background: var(--lc-bg); color: var(--lc-ink); outline: none;
    -webkit-appearance: none; appearance: none;
    font-family: var(--lc-serif); font-size: 14px;
    text-transform: none; letter-spacing: 0;
  }
  .lc-bottombar__panel .lc-sidebar input[type="text"]:focus { border-color: var(--lc-accent); }
  .lc-bottombar__panel .lc-sidebar input[type="text"]::placeholder { color: var(--lc-muted); }

  /* --lc-shell-h is measured and published by sizeShell() in lc-hotels.js: it
     accounts for the real shell offset AND the fixed bottom bar's height. The
     calc() is only a first-paint / no-JS fallback — it assumes a 120px offset
     and no bottom bar, which is why JS has to correct it. */
  .lc-results, .lc-map { width: 100%; }
  /* THE RESULTS LIST IS NOT ITS OWN SCROLLER ON MOBILE — the cards flow and the PAGE scrolls.
     This is the same fix lc-explore.css already carries, and the measurement that forced it
     here: with the list pinned to the measured shell height, the reader got a 460px window
     onto 8,935px of cards on a 850px phone. Nineteen screens of directory inside half a
     screen. A fixed-height pane below a screenful of heading crops the first card so the
     page reads as ended, and a scroll gesture inside it either moves a hidden inner
     scrollbar or does nothing, with no way for the reader to tell which they got.

     Worse, the pane is sized from what is LEFT of one viewport, so anything added above it
     comes straight out of the list: a 321px opening band took this list from roughly 780px
     to 460px without touching a line of the app.

     height:auto deliberately drops the --lc-shell-h dependency for list view. The MAP below
     still needs it — Leaflet cannot size itself. */
  .lc-shell[data-view="list"] .lc-results {
    display: block;
    height: auto;
    overflow: visible;
  }
  .lc-shell[data-view="map"]  .lc-map {
    display: block; height: var(--lc-shell-h, calc(100vh - 120px));
    min-width: 0; border-left: 0;
  }

  .lc-results__head { padding: 14px 14px 10px; }
  .lc-sortwrap__label { display: none; }
  .lc-sortwrap select { min-width: 132px; }
  .lc-cards { padding: 14px; gap: 14px; }

  /* --- photo on top --- */
  .lc-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .lc-card__media { width: 100%; height: 190px; }
  .lc-card__rail {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding-left: 0;
    padding-top: 10px;
    border-top: 1px solid var(--lc-line);
  }
  .lc-card__price { flex-direction: row; align-items: baseline; gap: 6px; }
  .lc-rate__per { margin-top: 0; }
  .lc-card__chips { margin-top: 4px; }
  .lc-attr { margin: 0 14px; }
}

@media (max-width: 420px) {
  .lc-card__media { height: 160px; }
  .lc-topbar { padding: 10px 12px; }
  .lc-btn { padding: 0 12px; }
}

/* ==========================================================================
   DEV PREVIEW banner — synthetic-data honesty (design §6).
   Deliberately loud: full width, above the app, unmissable. The OTA redesign
   makes this data look MORE authoritative, so this matters more, not less.
   Do not soften, shrink, tint, or move it below the fold.
   ========================================================================== */
.lc-devbanner {
  background: #8a1c1c;
  color: #fff;
  font: 600 13px/1.4 system-ui, sans-serif;
  padding: 8px 16px;
  text-align: center;
  letter-spacing: .02em;
}

/* ==========================================================================
 * Detail overlay — opened by VIEW / card click. Appended to <body>, so it is
 * OUTSIDE .lc-app and must declare its own tokens (they don't cascade here).
 * Same skin as the directory: PT Serif content, Montserrat-uppercase chrome.
 * ========================================================================== */
.lc-detail {
  --lc-ink: #2d2e33; --lc-muted: #6c6d74; --lc-line: #e5e5e7;
  --lc-bg: #fff; --lc-bg-soft: #f7f7f7; --lc-accent: #303033; --lc-gold: #b8863b;
  position: fixed; inset: 0; z-index: 1100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(20, 30, 25, .55);
  -webkit-tap-highlight-color: transparent;
}
.lc-detail__panel {
  position: relative; background: var(--lc-bg); color: var(--lc-ink);
  width: 100%; max-width: 560px; max-height: calc(100vh - 48px);
  overflow-y: auto; border-radius: 4px;
  box-shadow: 0 12px 48px rgba(0,0,0,.4);
  font-family: "PT Serif", Georgia, serif;
}
.lc-detail__close {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.9); color: var(--lc-ink);
  font-size: 26px; line-height: 40px; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
.lc-detail__close:hover { background: #fff; }
.lc-detail__media {
  position: relative; height: 240px; background: var(--lc-bg-soft);
}
.lc-detail__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-detail__media--empty {
  display: flex; align-items: center; justify-content: center;
  color: var(--lc-muted);
  font: 600 11px/1 "Montserrat", sans-serif; letter-spacing: 2px; text-transform: uppercase;
}
.lc-detail__body { padding: 20px 22px 24px; }
.lc-detail__name { font-family: "PT Serif", Georgia, serif; font-size: 26px; margin: 0 0 4px; color: var(--lc-ink); }
.lc-detail__sub {
  font: 600 10px/1.4 "Montserrat", sans-serif; letter-spacing: 2px; text-transform: uppercase;
  color: var(--lc-muted); margin-bottom: 10px;
}
.lc-detail__blurb { font-size: 16px; line-height: 1.55; margin: 14px 0; color: var(--lc-ink); }
.lc-detail__feats {
  list-style: none; margin: 14px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.lc-detail__feat {
  font: 600 10px/1.7 "Montserrat", sans-serif; letter-spacing: 1px; text-transform: uppercase;
  padding: 2px 10px; border: 1px solid var(--lc-line); border-radius: 12px; color: var(--lc-ink);
}
.lc-detail__rate { margin-top: 18px; }
.lc-detail__note {
  margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--lc-line);
  font: italic 13px/1.4 "PT Serif", Georgia, serif; color: var(--lc-muted);
}
@media (max-width: 959px) {
  /* Bottom sheet on mobile, clearing the fixed bottom bar. */
  .lc-detail { align-items: flex-end; padding: 0; }
  .lc-detail__panel {
    max-width: none; border-radius: 12px 12px 0 0;
    max-height: calc(100vh - var(--lc-bottombar-h, 56px) - env(safe-area-inset-bottom, 0px) - 24px);
  }
  .lc-detail__media { height: 200px; }
}

/* ==========================================================================
 * Real-data additions (Google Places): rating star, price level, address,
 * and the detail overlay's Book / Call actions.
 * ========================================================================== */
.lc-star { color: var(--lc-gold); }
.lc-card__rating, .lc-detail__rating {
  font-family: var(--lc-serif); font-size: 14px; color: var(--lc-ink); margin-top: 4px;
}
.lc-card__rating b, .lc-detail__rating b { font-weight: 700; }
.lc-rev { color: var(--lc-muted); font-size: 13px; }
.lc-pricelevel {
  font-family: var(--lc-sans); font-weight: 700; letter-spacing: 1px;
  color: var(--lc-accent); font-size: 15px;
}
.lc-card__addr {
  font-family: var(--lc-serif); font-size: 12.5px; line-height: 1.4;
  color: var(--lc-muted); margin-top: 6px;
}
.lc-detail__addr {
  font-family: var(--lc-serif); font-size: 14px; line-height: 1.5;
  color: var(--lc-muted); margin-top: 12px;
}
.lc-detail__rating { margin-top: 8px; font-size: 15px; }
.lc-detail__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.lc-detail__book {
  flex: 1 1 auto; text-align: center;
  font-family: var(--lc-sans); font-weight: 600; font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none;
  background: var(--lc-accent); color: #fff;
  padding: 13px 18px; border-radius: 3px;
}
.lc-detail__book:hover { background: #242427; }
.lc-detail__call {
  flex: 0 0 auto; text-align: center;
  font-family: var(--lc-sans); font-weight: 600; font-size: 12px;
  letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--lc-line); color: var(--lc-ink);
  padding: 13px 18px; border-radius: 3px;
}
.lc-detail__call:hover { border-color: var(--lc-accent); color: var(--lc-accent); }
.lc-pop__cta { color: var(--lc-accent); }

/* ---- editorial: best-for line ------------------------------------------ */
.lc-card__bestfor, .lc-detail__bestfor {
  font-family: var(--lc-serif); font-size: 13px; color: var(--lc-ink);
  margin-top: 6px; line-height: 1.5;
}
.lc-detail__bestfor { font-size: 14px; margin-top: 10px; }
.lc-bestfor__k {
  font-family: var(--lc-sans); font-weight: 700; font-size: 10px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--lc-accent);
}
.lc-dot { color: var(--lc-muted); }
.lc-detail__blurb { font-size: 15px; line-height: 1.6; }

/* ==========================================================================
 * Reserve button (Tier-1 reservations) — accent pill in the card rail + popup.
 * Opens the restaurant's booking (reservation_url, else its site) in a new tab.
 * ========================================================================== */
.lc-card__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.lc-card__reserve {
  font-family: var(--lc-sans); text-transform: uppercase; font-size: 11px;
  letter-spacing: 2px; font-weight: 600;
  background: var(--lc-accent); color: #fff; border: 1px solid var(--lc-accent);
  padding: 8px 14px; border-radius: 2px; cursor: pointer; white-space: nowrap; text-align: center;
}
.lc-card__reserve:hover { background: #242427; border-color: #242427; }
.lc-card__reserve:focus-visible { outline: 2px solid var(--lc-accent); outline-offset: 2px; }
.lc-pop__actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.lc-pop__actions .lc-card__reserve { padding: 6px 11px; font-size: 9px; letter-spacing: 1.5px; }
.lc-pop__actions .lc-pop__cta { margin-top: 0; }
@media (max-width: 959px) {
  .lc-card__actions { flex-direction: row; align-items: center; gap: 10px; }
}


/* ---- Loading ghost (lc-motion.css, specimen 01) ---------------------------
   The placeholder mirrors .lc-card__media at EVERY breakpoint. A ghost of the
   wrong size still lets the layout jump when the real cards land, which is the
   one thing it exists to prevent — so these track the card rules above, and have
   to be changed with them. */
.lc-skel-grid { --lc-skel-thumb: 208px; --lc-skel-thumb-h: 156px; --lc-skel-radius: 2px; }
@media (max-width: 1199px) {
  .lc-skel-grid { --lc-skel-thumb: 176px; --lc-skel-thumb-h: 132px; }
}
@media (max-width: 959px) {
  /* the card stacks here — media goes full width, so the ghost stops being a row */
  .lc-skel-card.is-row { grid-template-columns: 1fr; }
  .lc-skel-grid { --lc-skel-thumb-h: 190px; }
}
@media (max-width: 420px) {
  .lc-skel-grid { --lc-skel-thumb-h: 160px; }
}

/* ==========================================================================
 * /health/ — the cash-pay medicine directory.
 *
 * Everything above this line is the shared OTA shell, copied verbatim from
 * lc-schools-app.css. Everything below is what this vertical adds, and almost
 * all of it exists to carry facts the other directories do not have to carry:
 * a practitioner credential (or the honest absence of one), a published price,
 * an insurance posture, and the source we read each of those from.
 * ========================================================================== */

/* ---- the scope band -----------------------------------------------------
   Sits ABOVE the app, in the full-bleed strip, so it is the first thing on the
   page — before the map, before a single clinic. Every other directory on this
   site really is comprehensive; a reader who has learned that will otherwise
   assume this one lists their pediatrician. It never will.

   Kept to two short blocks on purpose: the shell below measures the space it
   has left from its own top edge, so every pixel spent here is a pixel of map. */
.lch-lede {
  padding: 26px clamp(20px, 5vw, 56px) 20px;
  background: #242427;
  color: #f4f1ea;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
@media (min-width: 900px) {
  .lch-lede { grid-template-columns: minmax(0, 22ch) minmax(0, 62ch); gap: 0 48px; align-items: start; }
}
.lch-lede-h {
  margin: 0;
  font-family: "PT Serif", Georgia, serif;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
.lch-lede-p {
  margin: 0;
  font-family: "PT Serif", Georgia, serif;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(244, 241, 234, .78);
  max-width: 62ch;
}
/* The note renders in TWO places and they have opposite grounds. Inside .lch-lede it sits on
   the dark band and has to be cream; standing alone above the app it sits on the page's own
   white, where cream measured 1.13:1 against it — text that is present in the DOM and
   invisible on the screen. The base rule is therefore the one that matches where it actually
   renders, and the band overrides it. */
.lch-lede-note {
  margin: 10px 0 0;
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #6c6d74;
}
.lch-lede .lch-lede-note { color: rgba(244, 241, 234, .5); }

/* ---- card: two columns, no price rail ---------------------------------- */
.lc-app .lc-card { grid-template-columns: 208px minmax(0, 1fr); cursor: pointer; }
.lc-app .lc-card__body { padding-right: 34px; }          /* room for the heart */
.lc-app .lc-card__name a { color: inherit; text-decoration: none; }
.lc-app .lc-card:hover .lc-card__name a { text-decoration: underline; text-underline-offset: 2px; }

/* A clinic with no photograph gets its category set in the well. Four of the
   roster have none, and a grey box reading "No photo" makes those four look
   broken rather than simply unphotographed. */
.lch-noimg {
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-size: 9px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-align: center;
  padding: 0 14px;
  line-height: 1.5;
  background: linear-gradient(160deg, #eceee9 0%, #dfe3dc 100%);
  color: #6c6d74;
}

/* ---- demand (Google's, and said so on the page) ------------------------- */
.lch-stars { font-family: "PT Serif", Georgia, serif; font-size: 13px; color: var(--lc-ink); }
.lch-stars b { font-weight: 700; }
.lch-revs {
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-size: 10px; letter-spacing: .6px; color: var(--lc-muted);
}

/* ---- the fact block (server-rendered; see lc_health_card_facts_html) ---- */
.lch-facts { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.lch-cred, .lch-price, .lch-ins, .lch-src {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.4;
}
.lch-cred { color: var(--lc-ink); }
.lch-cred-unknown { color: var(--lc-muted); }
.lch-cred-tag {
  display: inline-block;
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-size: 8.5px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 2px 6px;
  margin-right: 6px;
  border-radius: 2px;
  background: var(--lc-accent);
  color: #fff;
  vertical-align: 1px;
}
.lch-cred-unknown .lch-cred-tag { background: #cfd5cf; color: #47514c; }
.lch-price .lch-cred-tag { background: var(--lc-gold); }
.lch-ins {
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--lc-muted);
}
/* Provenance. Small, but never hidden — a fact with no visible source is one we
   invented, and this is the vertical where that matters most. */
.lch-src { font-size: 11px; color: var(--lc-muted); }
.lch-src a { color: var(--lc-muted); text-decoration: underline; text-underline-offset: 2px; }
.lch-src a:hover { color: var(--lc-accent); }
.lch-src-missing { color: #a3392f; }

/* ---- the platform heart ------------------------------------------------- */
.lc-app .lch-heart {
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--lc-line);
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--lc-muted);
  cursor: pointer;
  padding: 0;
}
.lc-app .lch-heart:hover { color: #b8433b; border-color: #d9b6b2; }
.lc-app .lch-heart.is-on { color: #c0392b; border-color: #e0b4ae; background: #fff; }

/* ---- marker popup ------------------------------------------------------- */
.lch-pop-cred {
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--lc-ink);
}
.lch-pop-cred.is-unknown { color: var(--lc-muted); }

/* ---- the standing disclosure (below the app) ---------------------------- */
.lch-disclosure {
  padding: 22px clamp(20px, 5vw, 56px) 30px;
  background: var(--lc-bg-soft, #f7f7f7);
  border-top: 1px solid #e5e5e7;
}
.lch-disclosure p {
  margin: 0;
  max-width: 78ch;
  font-family: "PT Serif", Georgia, serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: #4c5651;
}
.lch-disclosure strong { color: #2d2e33; }

/* ---- mobile ------------------------------------------------------------- */
@media (max-width: 700px) {
  .lc-app .lc-card { grid-template-columns: 116px minmax(0, 1fr); gap: 12px; }
  .lch-lede { padding: 20px 18px 16px; }
  .lch-src { font-size: 10.5px; }
}

/* An approximate pin — the clinic's town, not its door. Hollow, so the map never
   implies a street address it was never given. */
.lc-marker--approx {
  background: #fff !important;
  color: #6c6d74 !important;
  border-style: dashed !important;
}
.lch-approx {
  margin: 0;
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-size: 9.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: #8a938d;
}

/* ---- narrow screens: the results head has three things in it -------------
   Count, sort, and the geo chip. At 414px they do not fit on one line, and the
   copied shell does not wrap — the chip ran off the right edge, half-cut. Wrap
   it, and let the scope band's body settle a size smaller so the first clinic
   is closer to the top of the screen. */
@media (max-width: 700px) {
  .lc-results__head { flex-wrap: wrap; row-gap: 8px; }
  .lc-results__head > * { min-width: 0; max-width: 100%; }
  .lch-lede-h { font-size: clamp(26px, 8vw, 34px); }
  .lch-lede-p { font-size: 14px; line-height: 1.5; }
  .lch-lede-note { font-size: 9px; letter-spacing: 1.1px; }
}

/* ==========================================================================
 * THE OPENING SCREEN  (.lch-open — rendered only by ?lchealth=2)
 *
 * Every selector below is new, so the shipped opening is untouched until the
 * default in lc_health_default_version() moves.
 *
 * Three bands, tallest to shortest: heading, photographs, index. The whole
 * thing is held near 380px on purpose — sizeShell() in lc-health-app.js
 * measures the space left BELOW it and gives the remainder to the map and the
 * list, so every pixel spent here is a pixel taken off the directory. An
 * opening that fills the viewport would be a different, worse page.
 *
 * Tokens are the app's own (--lc-* on .lc-app); this band sits above .lc-app
 * and so cannot inherit them, and re-declares only the four it needs.
 * ========================================================================== */
.lch-open {
  --lch-ink:    #2d2e33;
  /* Darker than the app's own #6c6d74, and deliberately. Every use of this token in the band
     is 9–10px uppercase, where #6c6d74 measures 4.26:1 on this ground — under AA for text
     that size. This clears it at 5.7:1 without reading as a second grey family. */
  --lch-muted:  #5a645f;
  --lch-line:   #e5e5e7;
  --lch-accent: #303033;
  --lch-kind-pad: 17px;
  /* One height for every photograph in the rail; each tile's WIDTH is derived from it and
     the image's own ratio (--ar, set per tile in PHP). Declared here so the two live
     together — changing the height must not need the width rule found and changed too. */
  --lch-shot-h: clamp(126px, 12vw, 158px);

  box-sizing: border-box;
  background: #f7f7f7;
  border-bottom: 1px solid var(--lch-line);
  padding-top: clamp(18px, 2vw, 24px);
}
.lch-open *, .lch-open *::before, .lch-open *::after { box-sizing: border-box; }

/* ---- 0 · the photograph, and the menu sitting on it ----------------------
   Everything between the top of the document and the band is removed rather than reduced:
   the theme's section padding, the wrapper margin, and the container's gutter and max-width.
   What is left fills the viewport because its parents no longer constrain it — no 100vw and
   no negative margin anywhere, which is the arithmetic that overflows by the scrollbar width
   and loops against the sticky header.
   .tm-header-placeholder is not padding. theme.js injects that element to hold space for the
   overlaid navigation, so it has to be hidden rather than fought with margin rules.
   Every rule rides the body class, which is present only when the photograph resolved. */
body.lc-health-hero .tm-header-placeholder { display: none; }
body.lc-health-hero #tm-main { padding-top: 0; }
body.lc-health-hero #tm-main > .uk-container { max-width: none; padding-left: 0; padding-right: 0; }
body.lc-health-hero #tm-main .uk-margin-medium:has(> .lch-open) { margin-top: 0 !important; }

/* The band's own top padding goes away with it: the picture starts at the document edge and
   the clearance for the menu is paid for inside the scrim, where the type is. */
.lch-open--hero { padding-top: 0; background: transparent; }

.lch-open__pic {
  /* A slice this shallow is a thin band off a 3:2 frame, so the position is doing real work.
     55% puts the window light and the chairs in view; higher is ceiling and lower is floor,
     and both read as nothing. A phone takes a DEEPER slice of this same source than the
     desktop band does, so any change here has to be checked at BOTH widths. */
  background-size: cover;
  background-position: center 55%;
  /* Painted before the photograph decodes, and the fallback if it ever 404s — the navigation
     is transparent over this, so the one thing that must never happen is a white ground. */
  background-color: #16201c;
  /* A floor, not a target: the type sets the height and normally clears this. It exists
     because at 253px — what the type alone asked for — the crop stopped reading as a room and
     became an abstract dark texture, which is a photograph doing none of a photograph's work.
     Kept well under the viewport: sizeShell() hands whatever is left below this band to the
     map and the list, so height here is taken straight off the directory. */
  min-height: 316px;
  /* Default `stretch` alignment, and that is load-bearing rather than incidental. Bottom-
     aligning the scrim here instead makes it a child only as tall as its own text, which
     leaves the top of the photograph completely unscrimmed — the logo then sits on bare
     window glass. It reads fine at 1440, where the title's own padding happens to fill the
     band, and fails at 414, where it does not. The scrim stretches; the TYPE is what
     bottom-aligns, one level in. */
  display: flex;
}
/* A band this shallow never reaches a transparent stop, so the scrim darkens the whole frame
   rather than fading out. Three gradients, each with a job:
   · left-weighted, because that is where the title is;
   · a top bar, because the navigation is now ON the picture and this frame runs pale at the
     top right — the last three menu items sat on near-white artwork without it;
   · a foot, to seat the band on the ground below rather than ending at a hard line. */
.lch-open__scrim {
  width: 100%;
  /* Full height of the picture (from the parent's stretch), with the type sitting on the
     floor of it. This is the level that bottom-aligns, not the picture. */
  display: flex;
  align-items: flex-end;
  background:
    linear-gradient(to bottom, rgba(10,15,13,.72) 0%, rgba(10,15,13,.30) 96px, rgba(10,15,13,0) 150px),
    linear-gradient(to right,  rgba(10,15,13,.78) 0%, rgba(10,15,13,.56) 42%, rgba(10,15,13,.28) 100%),
    linear-gradient(to top,    rgba(10,15,13,.40) 0%, rgba(10,15,13,.08) 60%);
}
/* Top padding is the menu's room, not decoration: the navigation now sits ON the photograph,
   so the title has to start below it. The bottom is tight on purpose — sizeShell() measures
   what is left BELOW this band and hands the remainder to the map and the list, so every
   pixel spent here is a pixel taken off the directory the reader came for. */
.lch-open--hero .lch-open__head {
  width: 100%;
  padding: clamp(96px, 9vw, 116px) clamp(20px, 5vw, 56px) clamp(20px, 2.2vw, 28px);
}
/* The theme colours headings itself and wins on specificity, so every colour is stated here
   rather than inherited — left to itself the H1 renders near-black on the photograph. */
.lch-open--hero .lch-open__h {
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.lch-open--hero .lch-open__facts { color: rgba(255,255,255,.88); }
.lch-open--hero .lch-open__sep   { color: rgba(255,255,255,.55); }

/* The rail and the index carry on below the picture on the band's own ground, which the
   photograph has taken over from .lch-open. */
.lch-open--hero .lch-open__rail,
.lch-open--hero .lch-open__index { background: #f7f7f7; }
.lch-open--hero .lch-open__rail { padding-top: clamp(16px, 1.8vw, 22px); }

@media (max-width: 640px) {
  /* The mobile header is shorter than the desktop one, so it needs less room over the
     picture — but it is still over it. */
  .lch-open--hero .lch-open__head { padding-top: 84px; }
  /* Shorter than the desktop floor, not taller: a portrait viewport has far less room to
     spend before the directory is pushed off the screen, and the title wraps to three lines
     here, which pays for most of the band on its own. */
  .lch-open__pic { min-height: 272px; }
  /* A phone band is nearly the same shape as the source frame, so almost the WHOLE photograph
     shows here — including the blown-out window that the wide band crops away entirely. The
     logo sits directly on it, so the top stop has to be heavier at this width than at 1440.
     This is the crop that decides the scrim, and it is only visible by looking at 414. */
  .lch-open__scrim {
    background:
      linear-gradient(to bottom, rgba(10,15,13,.82) 0%, rgba(10,15,13,.40) 84px, rgba(10,15,13,.06) 140px),
      linear-gradient(to right,  rgba(10,15,13,.74) 0%, rgba(10,15,13,.58) 60%, rgba(10,15,13,.48) 100%),
      linear-gradient(to top,    rgba(10,15,13,.46) 0%, rgba(10,15,13,.10) 60%);
  }
}

/* ---- 1 · the heading ----------------------------------------------------
   The page had none: a site-wide rule hides .uk-article-title inside #tm-main
   so that app-shell directories can supply their own, and this one never did.
   The class here is deliberately not one of the hidden ones. */
.lch-open__head { padding: 0 clamp(20px, 5vw, 56px) clamp(14px, 1.6vw, 20px); }

.lch-open__h {
  margin: 0;
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--lch-ink);
  max-width: 26ch;
  text-wrap: balance;
}

/* Count, kinds, and whose ratings these are. Separators are drawn rather than
   typed so they never land at the start of a wrapped line. */
.lch-open__facts {
  margin: 12px 0 0;
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  line-height: 1.9;
  color: var(--lch-muted);
}
/* A real middot, not a drawn one. The drawn dot looked identical and contributed no text, so
   the line was read out as "36 PRACTICES9 KINDS OF MEDICINE". */
.lch-open__sep { color: #b9c0bb; }
.lch-open__fact { white-space: nowrap; }

/* ---- 2 · the photographs ------------------------------------------------
   A rail of the roster, bleeding off the right edge because there are more of
   them than fit — the overflow is the honest signal, not a decoration.

   Each shot keeps its NATURAL aspect: fixed height, automatic width. The
   roster's images are whatever each practice publishes, from 0.67 portraits to
   2.7 banners, and cropping them to one shape cuts the wordmarks in half. The
   frame clamps the extremes only, centring what it has to trim. */
/* The rail wrapper exists to position the two scroll buttons. `has-nav` is added by
   lc-health-app.js only when the strip actually overflows, so on a wide screen showing
   everything there are no controls at all. */
.lch-open__rail { position: relative; }

.lch-open__nav {
  position: absolute;
  top: calc(var(--lch-shot-h) / 2);
  transform: translateY(-50%);
  z-index: 2;
  display: none;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--lch-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--lch-ink);
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(29, 39, 33, .16);
  transition: background .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
}
.lch-open__rail.has-nav .lch-open__nav { display: flex; }
.lch-open__nav--prev { left: max(8px, calc(clamp(20px, 5vw, 56px) - 46px)); }
.lch-open__nav--next { right: max(8px, calc(clamp(20px, 5vw, 56px) - 46px)); }
.lch-open__nav:hover:not(:disabled) {
  background: #fff; color: var(--lch-accent); border-color: var(--lch-accent);
}
.lch-open__nav:focus-visible { outline: 2px solid var(--lch-accent); outline-offset: 2px; }
/* Kept in place rather than removed at the ends: a control that vanishes mid-interaction
   moves the thing the cursor is already on. */
.lch-open__nav:disabled { opacity: 0; pointer-events: none; }

.lch-open__strip {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 0 clamp(20px, 5vw, 56px) clamp(12px, 1.4vw, 15px);
  overflow-x: auto;
  overflow-y: hidden;
  /* NO scroll-snap. A snap point on the first tile aligns it to the scrollport's start
     edge, which silently scrolls this rail by exactly its own padding-left and puts the
     first photograph hard against the window edge while the heading above it is indented.
     A browse rail of variable-width tiles has nothing worth snapping to anyway. */
  scrollbar-width: thin;
  scrollbar-color: #c8cfc9 transparent;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.lch-open__strip::-webkit-scrollbar { height: 6px; }
.lch-open__strip::-webkit-scrollbar-thumb { background: #c8cfc9; border-radius: 3px; }
.lch-open__strip::-webkit-scrollbar-track { background: transparent; }

/* Width comes from the PHOTOGRAPH, never from the caption: the shot height times this
   image's own ratio, held between a sliver and a third of the rail so a 0.67 portrait is
   still legible and a 2.7 banner cannot eat the row. Only those two extremes are cropped,
   and they crop from the centre. */
.lch-open__tile {
  flex: 0 0 auto;
  width: clamp(112px, calc(var(--lch-shot-h) * var(--ar, 1.5)), 320px);
  text-decoration: none;
  color: inherit;
}
/* ONE ring, around the whole tile — the picture and the name it belongs to are a single
   target. Suppressing the theme's own ring to draw a second one inside the frame gave
   keyboard users two competing indicators for one link. */
.lch-open__tile:focus-visible {
  outline: 2px solid var(--lch-accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.lch-open__frame {
  display: block;
  width: 100%;
  height: var(--lch-shot-h);
  overflow: hidden;
  border-radius: 2px;
  background: #eceee9;
  /* Tinted to the ink rather than pure black, so a white-walled interior still
     has an edge against a near-white ground. */
  box-shadow: inset 0 0 0 1px rgba(29, 39, 33, .08);
  transition: box-shadow .18s ease, transform .18s ease;
}
.lch-open__shot {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
.lch-open__tile:hover .lch-open__frame {
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(29, 39, 33, .14), 0 6px 16px rgba(29, 39, 33, .14);
}

/* Two lines are RESERVED, not merely allowed. Practice names run from "Tox Medspa" to
   "Charleston Center for Cosmetic and Restorative Dentistry", and letting each caption take
   the height it happens to need puts every town label on a different baseline — the ragged
   edge that makes a row of real photographs look like a rendering fault. */
.lch-open__name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 9px;
  min-height: calc(2 * 1.28 * 13px);
  font-family: "PT Serif", Georgia, serif;
  font-size: 13px;
  line-height: 1.28;
  color: var(--lch-ink);
}
.lch-open__tile:hover .lch-open__name { text-decoration: underline; text-underline-offset: 2px; }
.lch-open__where {
  display: block;
  margin-top: 3px;
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--lch-muted);
}

/* ---- 3 · the nine kinds -------------------------------------------------
   The fastest route into a 36-row directory, and the scope statement at the
   same time: nine labels say what this section covers more exactly than a
   paragraph would. Each is a real link — the app's boot pass reads `cat` back
   out of the URL and ticks the matching sidebar box. */
.lch-open__index {
  display: flex;
  /* WRAPS on a wide screen rather than scrolling. All nine together need ~2040px, so on a
     1440 desktop a single row would hide the last three behind a horizontal scrollbar that
     nobody looks for — and these nine labels ARE the scope statement, so a hidden one is a
     claim the page failed to make. Two rows cost 34px and say the whole thing. */
  flex-wrap: wrap;
  align-items: stretch;
  /* Each link carries its own side padding so the whole cell is a target, so the CONTAINER
     is pulled back by that amount — otherwise only the first item of the first row lines up
     with the heading and every wrapped row starts a padding-width to its right. */
  padding: 0 clamp(20px, 5vw, 56px);
  padding-left: calc(clamp(20px, 5vw, 56px) - var(--lch-kind-pad));
  border-top: 1px solid var(--lch-line);
  background: #fff;
}
.lch-open__index::-webkit-scrollbar { display: none; }

.lch-open__kind {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 13px var(--lch-kind-pad) 11px;
  border-bottom: 2px solid transparent;
  font-family: "Montserrat", Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--lch-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.lch-open__kind:hover { color: var(--lch-accent); border-bottom-color: var(--lch-accent); }
.lch-open__kind:focus-visible { outline: 2px solid var(--lch-accent); outline-offset: -2px; }
.lch-open__n {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--lch-muted);
  font-variant-numeric: tabular-nums;
}
.lch-open__kind:hover .lch-open__n { color: var(--lch-accent); }

/* ---- narrow screens -----------------------------------------------------
   Both rails already scroll, so mobile needs no new mechanism — only less of
   everything, because the list below is measured from the bottom of this band
   and a 414px screen has far less to give away. */
@media (max-width: 700px) {
  .lch-open { --lch-shot-h: 118px; padding-top: 14px; }
  .lch-open__head { padding: 0 18px 11px; }
  /* No measure cap here: 18ch at this size is narrower than the screen, and the balancer
     spent the difference on a three-line break with "Savannah" alone on the middle one. */
  .lch-open__h { font-size: clamp(23px, 6.9vw, 30px); max-width: none; }
  .lch-open__facts { margin-top: 9px; font-size: 9px; letter-spacing: 1.1px; line-height: 1.8; }
  .lch-open__sep { margin: 0 7px; }
  .lch-open__strip { gap: 8px; padding: 0 18px 11px; }
  .lch-open__tile { width: clamp(92px, calc(var(--lch-shot-h) * var(--ar, 1.5)), 208px); }
  .lch-open__name { font-size: 12px; margin-top: 7px; min-height: calc(2 * 1.28 * 12px); }

  /* The index SCROLLS here, where it wraps on the desktop: nine of these labels stacked at
     414px is six rows and about 200px, and this band is measured out of the list's height. */
  .lch-open__index {
    flex-wrap: nowrap;
    padding: 0 18px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .lch-open__kind { padding: 12px 14px 10px; font-size: 9px; letter-spacing: 1.2px; }

  /* The attribution wrapped for the sake of three words, and the results column below already
     prints the same sentence as its own attribution line — so it is dropped here rather than
     orphaned. Its separator goes with it, or the line ends on a dot. */
  .lch-open__fact--src, .lch-open__sep--src { display: none; }

  /* Touch scrolls the rail by swiping, which is discoverable in a way a mouse is not. The
     buttons would only cover a photograph at this width. */
  .lch-open__nav { display: none !important; }
}

/* ---- short screens -------------------------------------------------------
   The band is a fixed 442px whatever the window height, and the shell below is
   measured from its bottom edge — so on a 768px-tall laptop only 206px of the
   directory was left above the fold, and on a 720px one the first card did not
   appear at all. Height is the axis that was never checked; width was fine.

   Everything here is a size, not a rule change: same three bands, same content,
   ~81px shorter. Viewports taller than 820px are untouched. */
@media (min-width: 701px) and (max-height: 820px) {
  .lch-open { --lch-shot-h: 118px; padding-top: 14px; }
  .lch-open__h { font-size: clamp(24px, 2.6vw, 30px); }
  .lch-open__head { padding-bottom: 10px; }
  .lch-open__strip { padding-bottom: 10px; }
  .lch-open__kind { padding-top: 11px; padding-bottom: 9px; }
}

/* ---- wide screens: the head becomes a masthead ---------------------------
   Below 1100px the heading and its fact line stack. Above it they sit on one
   baseline at opposite ends of the measure, which uses a width that was
   otherwise 900px of nothing beside a 500px heading, and returns ~30px of
   height to the map. The same move the .lch-lede band above makes at 1200px. */
@media (min-width: 1100px) {
  .lch-open__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
  }
  .lch-open__facts { margin: 0 0 5px; text-align: right; flex: 0 1 auto; }
}

/* A lift on hover is the only motion here, and it is the first thing to go. */
@media (prefers-reduced-motion: reduce) {
  .lch-open__frame,
  .lch-open__kind,
  .lch-open__nav { transition: none; }
  .lch-open__tile:hover .lch-open__frame { transform: none; }
  /* The buttons also pass behavior:'auto' to scrollBy, since scroll-behavior on the element
     does not govern a programmatic smooth scroll requested by the script. */
  .lch-open__strip, .lch-open__index { scroll-behavior: auto; }
}

/* ---- wide screens: the band becomes a masthead ---------------------------
   Two columns left ~a third of a 1440px band empty on the right, which reads
   as unfinished rather than as space. `display: contents` promotes the note out
   of its wrapper so it can take that third column and sit on the baseline —
   heading, what this is, what is in it. No markup change. */
@media (min-width: 1200px) {
  .lch-lede { grid-template-columns: minmax(0, 20ch) minmax(0, 56ch) minmax(0, 1fr); gap: 0 56px; }
  .lch-lede > div { display: contents; }
  /* Scoped to the band. Unscoped, this also caught the note where it renders WITHOUT the
     band — the only place it renders today — and right-aligned a lone line of type into the
     top of the map. `align-self` was inert there, so the symptom was position, not layout. */
  .lch-lede .lch-lede-note { margin: 0; align-self: end; text-align: right; }
}


/* ==========================================================================
 * THE VOID PANEL — what the results column holds when the filters return nothing.
 *
 * The shape is the sidebar's own vocabulary turned ninety degrees: a heading in
 * the chrome voice with a hairline under it, then a ledger of the reader's
 * choices with a count beside each. The column already reads that way on the
 * left, so the panel arrives as the same page rather than as a component.
 *
 * ONE white surface appears on this screen and it is the row worth pressing.
 * Everything else sits on the column's own ground, so white means actionable
 * here — the recommended row, and the three cards below it.
 * ========================================================================== */

/* ---- the bar above the panel -------------------------------------------
   A sort control cannot order nothing, and the count line now carries the
   panel's headline for a reader who is not looking at it — so the bar keeps
   its one announcement and loses its height. Collapsed rather than removed:
   display:none would take the headline out of the accessibility tree with it,
   and the sticky strip left behind would otherwise read as a rule under
   nothing. */
.lc-results.is-void .lc-results__head {
  padding: 0;
  min-height: 0;
  border-bottom: 0;
}
.lc-results.is-void .lc-sortwrap { display: none; }
.lc-results.is-void .lc-count {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- the panel ---------------------------------------------------------- */
.lc-void {
  /* The results column grows with the viewport; a ledger does not. Past about
     this width the act at the right edge loses its tie to the value at the
     left, and the headline runs past a readable measure. */
  max-width: 640px;
  padding: 34px 20px 22px;
}

.lc-void__head {
  margin: 0;
  font-family: var(--lc-serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--lc-ink);
  /* Two or three lines of serif carry the weight a single long line does not,
     and this is the only mass on the screen until the photographs below. */
  max-width: 440px;
  text-wrap: balance;
}

.lc-void__sub {
  margin: 14px 0 0;
  font-family: var(--lc-serif);
  font-size: 17px;
  /* Pixels, for the same reason as the row figures: this line is held open
     before the sentence exists and both heights have to agree. */
  line-height: 26px;
  /* The answer, not a qualification of the headline — so it is set in ink at
     reading size rather than dropped to the muted grey used for asides. Set a
     step above body copy so the opening reads as a display line and a deck
     rather than as a heading with a caption under it. */
  color: var(--lc-ink);
  max-width: 500px;
  /* These sentences are assembled from a town name and a figure, so their
     length is not knowable here — the two lines they usually take must not be
     allowed to end on a one-word last line. */
  text-wrap: pretty;
}
.lc-void__sub:empty { display: none; }

/* The deck names the recommended filter, so it is written by the same reply that
   fills the row figures and lands at the same moment. Reserving the figures
   alone leaves this line to appear underneath the headline and shove the ledger,
   the shelf and the photographs down the page — measured at 40px, which is the
   larger of the two movements.
   Held open on the same condition the panel itself uses to decide whether there
   is a deck at all: a superlative over one filter is a sentence about nothing,
   so a single-row list is never given one, and the panel marks itself accordingly
   rather than leaving a selector to work the same rule out for a second time.
   One line is reserved, which is what the sentence takes at this column width;
   where it wraps, what is left to absorb is a line rather than the whole
   paragraph. */
.lc-void.is-decked .lc-void__sub:empty {
  display: block;
  min-height: 26px;
}

/* ---- the way out of an off-map result -----------------------------------
   The only filled element the panel ever draws. It is the whole hierarchy in
   this state: with it on screen the list below needs no demoting. */
.lc-void__go {
  display: inline-block;
  margin-top: 22px;
  padding: 14px 22px;
  border: 1px solid var(--lc-accent);
  border-radius: 2px;
  background: var(--lc-accent);
  color: #fff;
  font-family: var(--lc-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.lc-void__go:hover { background: #242427; border-color: #242427; }
/* Darker still under the finger. The first pair is the fallback and is the same
   shade as the hover above, so a browser without color-mix loses the distinct
   press rather than the press feedback. */
.lc-void__go:active {
  background: #242427;
  background: color-mix(in srgb, var(--lc-accent) 78%, #000);
  border-color: #242427;
  border-color: color-mix(in srgb, var(--lc-accent) 78%, #000);
}
/* An accent ring on an accent fill is not a ring. */
.lc-void__go:focus-visible { outline: 2px solid var(--lc-ink); outline-offset: 3px; }

/* ---- the ledger --------------------------------------------------------- */
.lc-void__acts { margin-top: 30px; }
/* Where the map is the way out, the filters are the second answer and a rule
   says so without restating it in words. */
.lc-void__go + .lc-void__acts {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--lc-line);
}

.lc-void__lbl {
  margin: 0 0 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lc-line);   /* the sidebar's hairline rule */
  font-family: var(--lc-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--lc-ink);
}

.lc-void__list {
  /* Pulled out past the panel's padding so the row's ground bleeds wider than
     its text: the text column stays aligned under the headline while the
     hover state reads as a row of a table rather than as a chip. */
  margin: 0 -14px;
  padding: 0;
  list-style: none;
  /* Closed at the foot as well as the head: a ledger that trails off leaves the
     clear-all below it belonging to nothing. */
  border-bottom: 1px solid var(--lc-line);
}
.lc-void__list li + li { border-top: 1px solid var(--lc-line); }

.lc-void__drop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 0;            /* the spans carry their own spacing — see __n:empty */
  width: 100%;
  padding: 12px 14px 13px;
  border: 0;
  border-radius: 2px;
  background: none;
  text-align: left;
  cursor: pointer;
  transition: background .16s ease, box-shadow .16s ease;
}
/* Elevation answers the pointer; the accent is spoken for. A row lit accent on
   hover is indistinguishable from the recommended row sitting next to it, which
   costs the recommendation the moment the reader moves the mouse. */
.lc-void__drop:hover {
  background: var(--lc-bg);
  box-shadow: var(--lc-shadow), inset 2px 0 0 var(--lc-muted);
}
/* Full-bleed rows sit against the column's edge, so an outset ring would be
   clipped on one side. */
.lc-void__drop:focus-visible { outline: 2px solid var(--lc-accent); outline-offset: -2px; }
/* Pressing a row refetches the directory, so the press is acknowledged before
   the results can answer: the lift goes and the row settles back onto the page. */
.lc-void__drop:active { box-shadow: inset 2px 0 0 var(--lc-muted); }

.lc-void__dim,
.lc-void__val,
.lc-void__n { grid-column: 1; }
/* Anchored to the value's own line rather than centred over the whole block, so
   it holds the same optical position whether or not the row carries a count. */
.lc-void__act { grid-column: 2; grid-row: 2; align-self: center; }

.lc-void__dim {
  display: block;
  margin-bottom: 5px;
  font-family: var(--lc-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--lc-muted);
}
.lc-void__val {
  display: block;
  font-family: var(--lc-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--lc-ink);
}
.lc-void__n {
  display: block;
  margin-top: 6px;
  font-family: var(--lc-sans);
  font-weight: 500;
  font-size: 10px;
  /* Stated in pixels rather than inherited, because the line this figure
     occupies has to be reserved before the figure exists and the two heights
     must agree exactly — see .is-probing below. */
  line-height: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--lc-muted);
}
/* A probe that never answered, and every row in the off-map state, carry no
   number. Taking the span out of flow entirely is what stops the row keeping
   a third line of empty space where the figure would have gone. */
.lc-void__n:empty { display: none; }

/* ---- while the figures are still being asked for ------------------------
   The per-row counts answer about a second and a half after the rows paint, so
   collapsing their line in the meantime would grow every row at once and shove
   the photographs down the page while the opening sentence is still being read.
   The line is held open instead: the same 14px box the figure will occupy, plus
   the same margin above it, so the row is its final height from first paint.

   Empty and reserved, not filled with a placeholder character — there is
   nothing to announce yet, and a dash or an ellipsis here would be a figure the
   panel does not have.

   A row whose request fails keeps no reserved line: the class comes off when
   the requests settle, and the rule above then collapses it as before. */
.lc-void.is-probing .lc-void__n:empty {
  display: block;
  min-height: 14px;
}

.lc-void__act {
  font-family: var(--lc-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--lc-muted);
  /* Drawn at rest, not revealed on hover: there is no hover on a phone, and the
     row has to say it is pressable before it is touched. The hairline token is
     tuned for white and all but vanishes on this column's ground, so the rule
     is mixed from the muted token instead — which keeps it tracking the theme
     rather than a hex typed in here. The shorthand above is the fallback. */
  border-bottom: 1px solid var(--lc-line);
  border-bottom-color: color-mix(in srgb, var(--lc-muted) 45%, transparent);
  padding-bottom: 2px;
  transition: color .16s ease, border-color .16s ease;
}
.lc-void__drop:hover .lc-void__act,
.lc-void__drop:focus-visible .lc-void__act {
  color: var(--lc-ink);
  border-color: var(--lc-ink);
}

/* ---- the recommended row -----------------------------------------------
   The one filter whose removal recovers the most. It is lit rather than
   labelled: the white ground the other rows only reach under the pointer, plus
   the accent, which nothing else in the list may use. Flat at rest — elevation
   still means "pointing at this" — and it lifts on hover like any other row. */
.lc-void__list .is-widest .lc-void__drop {
  background: var(--lc-bg);
  box-shadow: inset 3px 0 0 var(--lc-accent);
}
.lc-void__list .is-widest .lc-void__drop:hover {
  box-shadow: var(--lc-shadow), inset 3px 0 0 var(--lc-accent);
}
.lc-void__list .is-widest .lc-void__drop:active {
  box-shadow: inset 3px 0 0 var(--lc-accent);
}
.lc-void__list .is-widest .lc-void__n,
.lc-void__list .is-widest .lc-void__act { color: var(--lc-accent); }
/* The figure this row is recommended FOR — it carries the weight the muted
   counts on the other rows do not. */
.lc-void__list .is-widest .lc-void__n { font-weight: 600; }
.lc-void__list .is-widest .lc-void__act {
  border-color: rgba(45,46,51, .4);
  border-color: color-mix(in srgb, var(--lc-accent) 45%, transparent);
}
.lc-void__list .is-widest .lc-void__drop:hover .lc-void__act,
.lc-void__list .is-widest .lc-void__drop:focus-visible .lc-void__act { border-color: var(--lc-accent); }

/* ---- clear all ----------------------------------------------------------
   The last resort, and not always the best move — with a recommended row above
   it, dropping that one filter recovers more than dropping all of them. So it
   is drawn quiet and kept off the white: at rest it is an outline on the
   column's own ground, and it goes white on hover like everything else here
   that answers a pointer. */
.lc-void__clear {
  margin-top: 18px;
  padding: 11px 18px;
  border: 1px solid var(--lc-line);
  border-radius: 2px;
  background: none;
  color: var(--lc-ink);
  font-family: var(--lc-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.lc-void__clear:hover { background: var(--lc-bg); border-color: var(--lc-muted); }
.lc-void__clear:active { background: var(--lc-bg); border-color: var(--lc-ink); }
.lc-void__clear:focus-visible { outline: 2px solid var(--lc-accent); outline-offset: 2px; }

/* ---- the shelf ----------------------------------------------------------
   The directory resuming. The rule running off the heading is the seam: above
   it the reader's dead end, below it live results again. */
.lc-voidshelf { padding-top: 4px; }
.lc-voidshelf__h {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0 20px;
  font-family: var(--lc-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--lc-ink);
}
.lc-voidshelf__h::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--lc-line);
}
.lc-voidshelf .lc-cards { padding-top: 14px; }

@media (max-width: 959px) {
  /* 14px is the card list's own gutter here, and the panel sits directly above
     it — the headline, the ledger's text column and the card edges all have to
     land on the same line. The row bleed is cut to match, which is also what
     keeps the accent edge off the screen's edge on a phone. */
  .lc-void { padding: 26px 14px 22px; }
  .lc-void__head { font-size: 25px; max-width: 340px; }
  .lc-void__sub { font-size: 15px; margin-top: 11px; }
  .lc-void__acts { margin-top: 26px; }
  .lc-void__list { margin: 0 -6px; }
  .lc-void__drop { padding: 13px 6px 14px; column-gap: 12px; }
  .lc-void__val { font-size: 17px; }
  .lc-voidshelf__h { padding: 0 14px; font-size: 19px; }
  .lc-voidshelf .lc-cards { padding-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .lc-void__go,
  .lc-void__drop,
  .lc-void__act,
  .lc-void__clear { transition: none; }
}

/* ==========================================================================
 * THE CARD OVER THE MAP — the void panel's answer, in the view that cannot show it.
 *
 * In map view the results column is display:none, so the panel lives inside a hidden
 * element and a phone gets an empty map with no sentence on it at all. This is the
 * same answer, in the one place it can be read there.
 *
 * AN OVERLAY RATHER THAN A BAND, and the reason is what it sits on: a band above the
 * bar costs about 120px of the 731 the map has at 414, in the state where the reader
 * has least on screen, while this costs none. Nothing is hidden underneath either —
 * a dead end has no pins anywhere, and the off-map case has none in frame by
 * definition.
 *
 * It carries the panel's vocabulary at the sizes a card can hold: one white surface,
 * square, a hairline, and the single accent control that is the way out.
 * ========================================================================== */
.lc-mapvoid {
  position: absolute;
  left: 12px;
  right: 12px;
  /* Clear of the attribution, which Leaflet draws in the last 17px of the pane and
     which the licence requires stay legible. The pane's foot meets the bottom bar
     exactly, so this offset is measured from a real edge rather than guessed. */
  bottom: 34px;
  /* Under the bottom bar's 985 and under Leaflet's own controls at 1000, over every
     map pane. The bar has to stay pressable with this on screen, and the attribution
     has to stay readable. */
  z-index: 900;
  box-sizing: border-box;
  padding: 16px 16px 14px;
  background: var(--lc-bg);
  border: 1px solid var(--lc-line);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .16);
  font-family: var(--lc-serif);
}
.lc-mapvoid * { box-sizing: border-box; }

.lc-mapvoid__head {
  margin: 0;
  /* The panel's headline at the size a card over a map can carry: two lines is the
     most this surface should spend before the control. */
  font-size: 19px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--lc-ink);
  /* Clear of the close control, which is absolute in the corner. */
  padding-right: 30px;
  text-wrap: balance;
}

.lc-mapvoid__sub {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--lc-ink);
  text-wrap: pretty;
}

/* The way out, and the only filled element on the card — the same treatment the panel
   gives the same action, at the size this surface can hold. */
.lc-mapvoid__go {
  display: inline-block;
  margin-top: 12px;
  padding: 13px 18px;
  border: 1px solid var(--lc-accent);
  background: var(--lc-accent);
  color: #fff;
  font-family: var(--lc-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.lc-mapvoid__go:hover { background: #242427; border-color: #242427; }
.lc-mapvoid__go:active {
  background: #242427;
  background: color-mix(in srgb, var(--lc-accent) 78%, #000);
  border-color: #242427;
  border-color: color-mix(in srgb, var(--lc-accent) 78%, #000);
}
/* An accent ring on an accent fill is not a ring. */
.lc-mapvoid__go:focus-visible { outline: 2px solid var(--lc-ink); outline-offset: 3px; }

/* Dismissal is not remembered — the reasoning is in lc-explore.js. The target is the
   full 44px the bar's own controls carry, drawn smaller than it measures. */
.lc-mapvoid__close {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  color: var(--lc-muted);
  font-family: var(--lc-sans);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.lc-mapvoid__close:hover { color: var(--lc-ink); }
.lc-mapvoid__close:focus-visible { outline: 2px solid var(--lc-accent); outline-offset: -4px; }

@media (prefers-reduced-motion: reduce) {
  .lc-mapvoid__go { transition: none; }
}