/* Livewell location finder. All rules require both the CMS body class
   and the component root, so they cannot style neighboring CMS content. */
.locationindex .lw-location-finder {
      /* Brand */
      --lw-blue: #185A7D;
      --lw-green: #00A887;
      --lw-grizzle: #344340;
      --lw-purrl: #EAECEF;
      --lw-red: #C31C4A;   /* urgent care */
      --lw-star: #E8A33D;  /* Google review stars */

      --lw-blue-dark: #10425c;
      --lw-green-dark: #00876d;
      --lw-red-dark: #a11540;
      --lw-white: #ffffff;
      --lw-muted: #6b7a77;
      --lw-line: #d8dde2;
      --lw-shadow: 0 14px 40px rgba(52, 67, 64, 0.16);
    }
    
     #custom-1 .section__container {
     max-width: 100%;
}

    .locationindex .lw-location-finder * { box-sizing: border-box; }
    /* Demo page chrome only — the CMS page supplies this. */
    .locationindex .lw-location-finder button, .locationindex .lw-location-finder input { font: inherit; }
    .locationindex .lw-location-finder button { cursor: pointer; }
    .locationindex .lw-location-finder :is(button, input, a):focus-visible { outline: 3px solid var(--lw-green); outline-offset: 2px; }

    /* ---------- stage ----------
     * The whole module. It sizes itself rather than filling the viewport, so it
     * can sit between the CMS header and footer. Change the height here.
     */
    .locationindex .lw-location-finder .stage {
      position: relative;
      height: min(82vh, 880px);
      min-height: 520px;
      overflow: hidden;
      border: 1px solid var(--lw-line);
      border-radius: 14px; /* drop this and the border for an edge-to-edge band */
      /* Set here, not on body, so host page styles can't change the module. */
      font-family: "Open Sans", system-ui, -apple-system, sans-serif;
      color: var(--lw-grizzle);
      background: var(--lw-purrl);
    }
    .locationindex .lw-location-finder #lw-map { position: absolute; inset: 0; background: var(--lw-purrl); }
    .locationindex .lw-location-finder .gm-style { font-family: "Open Sans", sans-serif !important; }

    /* ---------- label debugger ----------
       Only ever in the DOM with ?labels=debug, and styled deliberately unlike
       the product so a screenshot of it can't be mistaken for the design. Sits
       clear of the zoom control on the right edge. */
    .locationindex .lw-location-finder .dbg {
      position: absolute; top: 12px; right: 58px; z-index: 40;
      width: 272px; max-width: calc(100vw - 76px);
      max-height: calc(100% - 24px); overflow: auto;
      background: rgba(16, 25, 33, 0.93); color: #e7edf2;
      border-radius: 10px; padding: 10px 12px;
      font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      box-shadow: 0 10px 30px rgba(11, 20, 27, 0.35);
    }
    .locationindex .lw-location-finder .dbg-head {
      display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
      width: 100%; font: inherit; text-align: left; cursor: pointer;
      color: inherit; background: none; border: 0; padding: 0;
    }
    .locationindex .lw-location-finder .dbg-head strong { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
    .locationindex .lw-location-finder .dbg-head span { color: #7fd3b6; white-space: nowrap; }
    .locationindex .lw-location-finder .dbg.min .dbg-body { display: none; }
    .locationindex .lw-location-finder .dbg-note { color: #90a1ae; margin: 5px 0 9px; }
    .locationindex .lw-location-finder .dbg-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
    .locationindex .lw-location-finder .dbg-row span { flex: 1; min-width: 0; }
    .locationindex .lw-location-finder .dbg-row b { display: block; font-weight: 600; }
    .locationindex .lw-location-finder .dbg-row i { font-style: normal; font-size: 10px; color: #7d8d9a; word-break: break-all; }
    .locationindex .lw-location-finder .dbg-row select {
      flex: none; width: 94px; font: inherit; padding: 3px 4px;
      color: #e7edf2; background: #1d2a35;
      border: 1px solid #33434f; border-radius: 6px;
    }
    .locationindex .lw-location-finder .dbg-row.set select { border-color: #7fd3b6; color: #cdf3e6; }
    .locationindex .lw-location-finder .dbg-foot { display: flex; gap: 6px; margin-top: 10px; }
    .locationindex .lw-location-finder .dbg-foot button {
      flex: 1; font: inherit; padding: 6px 4px; cursor: pointer;
      color: #dce7ef; background: #23394a;
      border: 1px solid #3a5670; border-radius: 6px;
    }
    .locationindex .lw-location-finder .dbg-foot button:hover { background: #2e4a61; }

    /* ---------- map markers ---------- */
    .locationindex .lw-location-finder .marker { position: absolute; width: 0; height: 0; }

    .locationindex .lw-location-finder .bubble {
      position: absolute; left: 0; top: 0;
      transform: translate(-50%, -50%);
      display: grid; place-items: center;
      border: 0; border-radius: 50%;
      background: var(--lw-green);
      color: var(--lw-white);
      font-family: "Open Sans", sans-serif;
      font-weight: 800;
      box-shadow: 0 6px 16px rgba(52, 67, 64, 0.32);
      transition: transform 0.14s, background 0.14s;
    }
    .locationindex .lw-location-finder .bubble:hover { background: var(--lw-blue); transform: translate(-50%, -50%) scale(1.09); }
    .locationindex .lw-location-finder .bubble.is-uc { background: var(--lw-red); }
    .locationindex .lw-location-finder .bubble.is-uc:hover { background: var(--lw-red-dark); }

    /* Official Livewell teardrop, recoloured per care type. */
    .locationindex .lw-location-finder .pin {
      position: absolute; left: 0; top: 0;
      width: 26px; height: 39px;
      transform: translate(-50%, -100%);
      transform-origin: 50% 100%;
      border: 0; padding: 0; background: none;
      transition: transform 0.14s;
    }
    .locationindex .lw-location-finder .pin svg {
      width: 100%; height: 100%; display: block;
      filter: drop-shadow(0 3px 5px rgba(52, 67, 64, 0.4));
    }
    .locationindex .lw-location-finder .pin:hover { transform: translate(-50%, -100%) scale(1.14); }
    .locationindex .lw-location-finder .pin .pin-body { fill: var(--lw-green); }
    .locationindex .lw-location-finder .pin .pin-paw path { fill: #fff; }
    .locationindex .lw-location-finder .pin.uc .pin-body { fill: var(--lw-red); }
    .locationindex .lw-location-finder .pin.soon .pin-body { fill: #fff; stroke: var(--lw-green); stroke-width: 6; }
    .locationindex .lw-location-finder .pin.soon .pin-paw path { fill: var(--lw-green); }
    .locationindex .lw-location-finder .pin.uc.soon .pin-body { stroke: var(--lw-red); }
    .locationindex .lw-location-finder .pin.uc.soon .pin-paw path { fill: var(--lw-red); }
    .locationindex .lw-location-finder .pin.is-on { transform: translate(-50%, -100%) scale(1.25); z-index: 5; }
    .locationindex .lw-location-finder .pin.is-on:hover { transform: translate(-50%, -100%) scale(1.25); }

    .locationindex .lw-location-finder .marker-label {
      position: absolute; left: 0;
      transform: translateX(-50%);
      white-space: nowrap; font-size: 0.875rem; font-weight: 700;
      color: var(--lw-blue); background: rgba(255, 255, 255, 0.93);
      padding: 0.1rem 0.4rem; border-radius: 5px; pointer-events: none;
      box-shadow: 0 1px 4px rgba(52, 67, 64, 0.2);
    }
    .locationindex .lw-location-finder .marker-label[hidden] { display: none; }

    /* ---------- left rail ---------- */
    .locationindex .lw-location-finder .rail {
      position: absolute; top: 1rem; left: 1rem;
      width: min(390px, calc(100vw - 2rem));
      max-height: calc(100% - 2rem);
      display: flex; flex-direction: column; gap: 0.7rem;
      z-index: 30;
    }
    .locationindex .lw-location-finder .grab, .locationindex .lw-location-finder .ctx { display: none; }
    /* CMS themes tend to own a .card of their own. Declaring the layout rather
       than inheriting it matters most for overflow: on a flex item, hiding the
       overflow drops its automatic minimum size to zero, which lets the rail
       squeeze this card down to its padding. */
    .locationindex .lw-location-finder .card {
      display: block;
      overflow: visible;
      background: var(--lw-white);
      border: 1px solid var(--lw-line);
      border-radius: 14px;
      box-shadow: var(--lw-shadow);
    }
    /* The search box is the one thing that always stays whole; the directory
       below it is the part that scrolls. */
    .locationindex .lw-location-finder .search-card { flex: none; padding: 1rem 1.05rem; }
    .locationindex .lw-location-finder .search-card h1 {
      font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em;
      margin: 0 0 0.2rem; color: var(--lw-blue);
    }
    .locationindex .lw-location-finder .lede { margin: 0 0 0.8rem; color: var(--lw-muted); font-size: 0.9rem; }
    .locationindex .lw-location-finder .search-row { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem; }
    .locationindex .lw-location-finder .search-wrap { position: relative; min-width: 0; }
    .locationindex .lw-location-finder .search-row input {
      width: 100%; border: 1.5px solid var(--lw-line); border-radius: 10px;
      padding: 0.6rem 0.7rem; background: var(--lw-white); color: var(--lw-grizzle);
    }
    .locationindex .lw-location-finder .search-row input::placeholder { color: #98a5a2; }
    .locationindex .lw-location-finder .suggest {
      position: absolute; left: 0; right: 0; top: calc(100% + 4px);
      z-index: 40; background: var(--lw-white); border: 1.5px solid var(--lw-line);
      border-radius: 10px; box-shadow: var(--lw-shadow); padding: 0.25rem;
      max-height: 240px; overflow: auto;
    }
    .locationindex .lw-location-finder .suggest[hidden] { display: none; }
    .locationindex .lw-location-finder .suggest button {
      width: 100%; text-align: left; border: 0; background: transparent;
      border-radius: 8px; padding: 0.5rem 0.65rem;
      display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem;
      color: inherit;
    }
    .locationindex .lw-location-finder .suggest button:hover, .locationindex .lw-location-finder .suggest button.is-on { background: var(--lw-purrl); }
    .locationindex .lw-location-finder .suggest .s-label { font-weight: 700; color: var(--lw-blue); }
    .locationindex .lw-location-finder .suggest .s-hint { font-size: 0.72rem; color: var(--lw-muted); font-weight: 600; white-space: nowrap; }
    .locationindex .lw-location-finder .near {
      width: 44px; height: 44px; padding: 0;
      display: grid; place-items: center; flex: none;
      border: 1.5px solid var(--lw-blue); background: var(--lw-white); border-radius: 10px;
      color: var(--lw-blue);
    }
    .locationindex .lw-location-finder .near svg { width: 22px; height: 22px; display: block; }
    .locationindex .lw-location-finder .near:hover { background: var(--lw-blue); color: var(--lw-white); }
    .locationindex .lw-location-finder .filters { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; }
    .locationindex .lw-location-finder .filter {
      border: 1px solid var(--lw-line); background: var(--lw-purrl); color: var(--lw-blue);
      border-radius: 999px; padding: 0.3rem 0.7rem; font-size: 0.8rem; font-weight: 600;
    }
    .locationindex .lw-location-finder .filter[aria-pressed="true"] { background: var(--lw-blue); color: var(--lw-white); border-color: var(--lw-blue); }

    .locationindex .lw-location-finder .directory {
      overflow: auto; padding: 0.35rem; flex: 1; min-height: 0;
      overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    }
    .locationindex .lw-location-finder .group-head {
      display: flex; align-items: baseline; justify-content: space-between;
      gap: 0.5rem; padding: 0.65rem 0.7rem 0.3rem;
      border-top: 1px solid var(--lw-purrl);
    }
    .locationindex .lw-location-finder .directory > .group-head:first-child { border-top: 0; }
    .locationindex .lw-location-finder .group-head .g-name { font-weight: 800; font-size: 0.95rem; color: var(--lw-blue); }
    .locationindex .lw-location-finder .group-head .g-meta { font-size: 0.7rem; color: var(--lw-muted); font-weight: 600; }
    .locationindex .lw-location-finder .count-line { font-size: 0.75rem; color: var(--lw-muted); font-weight: 600; padding: 0.5rem 0.7rem 0.2rem; }
    .locationindex .lw-location-finder .hospital {
      width: 100%; text-align: left; border: 0; background: transparent;
      border-radius: 10px; padding: 0.5rem 0.7rem;
      display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.6rem;
      color: inherit;
    }
    .locationindex .lw-location-finder .hospital:hover { background: var(--lw-purrl); }
    .locationindex .lw-location-finder .hospital.is-on { background: var(--lw-blue); color: var(--lw-white); }
    .locationindex .lw-location-finder .hospital.is-on .meta, .locationindex .lw-location-finder .hospital.is-on .miles { color: #cfe0e8; }
    .locationindex .lw-location-finder .hospital .title { font-weight: 700; font-size: 0.97rem; }
    /* display is stated because CMS themes claim .meta as a flex container. */
    .locationindex .lw-location-finder .hospital .meta { display: block; grid-column: 1; color: var(--lw-muted); font-size: 0.83rem; }
    .locationindex .lw-location-finder .miles { font-size: 0.73rem; color: var(--lw-muted); font-weight: 600; align-self: start; }
    .locationindex .lw-location-finder .badge {
      display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.05em;
      text-transform: uppercase; margin-left: 0.4rem; padding: 0.1rem 0.4rem;
      border-radius: 4px; background: var(--lw-purrl); color: var(--lw-blue);
      white-space: nowrap; vertical-align: 1px;
    }
    .locationindex .lw-location-finder .badge.uc { background: var(--lw-red); color: var(--lw-white); }
    .locationindex .lw-location-finder .hospital.is-on .badge { background: rgba(255,255,255,0.18); color: var(--lw-white); }
    .locationindex .lw-location-finder .empty { padding: 1rem 0.7rem; color: var(--lw-muted); }

    /* ---------- Google rating ----------
     * Two stacked runs of the same five glyphs: a grey bed, and a gold copy
     * clipped to the score. Halves stay honest, and nothing has to load.
     */
    .locationindex .lw-location-finder .rating {
      display: flex; align-items: center; gap: 0.3rem;
      font-size: 0.72rem; font-weight: 700; white-space: nowrap;
    }
    .locationindex .lw-location-finder .rating .count { color: var(--lw-muted); font-weight: 600; }
    .locationindex .lw-location-finder .stars {
      position: relative; display: inline-block;
      color: var(--lw-line); letter-spacing: 0.4px; line-height: 1;
    }
    .locationindex .lw-location-finder .stars i {
      position: absolute; left: 0; top: 0; overflow: hidden;
      font-style: normal; color: var(--lw-star);
    }
    .locationindex .lw-location-finder .vh {
      position: absolute; width: 1px; height: 1px;
      overflow: hidden; clip-path: inset(50%); white-space: nowrap;
    }

    /* ---------- info box, anchored to its pin ---------- */
    .locationindex .lw-location-finder .detail {
      position: absolute; left: 0; top: 0;
      transform: translate(-50%, -100%);
      margin-top: -59px; /* clears the selected pin */
      /* Every heading is "Livewell Animal Hospital of <place>", so it's long and
         its length swings with the place: 297px of type for Katy, 441px for
         Downtown San Diego. One fixed width can't serve both \u2014 sized for the
         longest, most cards sit half empty; sized for the shortest, the long
         names wrap the brand away from the place. So the card takes its width
         from its own name and each is exactly as wide as it needs to be.
         The ceiling is a hair past the longest name in the data, which keeps a
         future outlier wrapping inside the card instead of running off it. */
      width: max-content;
      min-width: 310px;
      max-width: min(500px, calc(100vw - 2rem));
      background: var(--lw-white);
      border: 1px solid var(--lw-line);
      border-top: 5px solid var(--lw-green);
      border-radius: 12px;
      box-shadow: var(--lw-shadow);
      padding: 0.95rem 1rem 1rem;
      z-index: 20;
    }
    .locationindex .lw-location-finder .detail.is-uc { border-top-color: var(--lw-red); }
    .locationindex .lw-location-finder .detail::after {
      content: ""; position: absolute; left: 50%; bottom: -10px;
      transform: translateX(-50%);
      border-left: 10px solid transparent;
      border-right: 10px solid transparent;
      border-top: 10px solid var(--lw-white);
      filter: drop-shadow(0 2px 1px rgba(52, 67, 64, 0.14));
    }
    .locationindex .lw-location-finder .detail h2 {
      font-size: 1.05rem; font-weight: 800; line-height: 1.25;
      margin: 0 0.9rem 0.5rem 0; color: var(--lw-blue);
    }
    /* Reads as the heading it already is; the arrow is the only tell until hover. */
    .locationindex .lw-location-finder .detail h2 a { color: inherit; text-decoration: none; }
    .locationindex .lw-location-finder .detail h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
    .locationindex .lw-location-finder .detail h2 .ext { width: 11px; height: 11px; vertical-align: 2px; opacity: 0.65; }
    .locationindex .lw-location-finder .detail h2 a:hover .ext { opacity: 1; }
    .locationindex .lw-location-finder .detail .rating { font-size: 0.82rem; gap: 0.35rem; margin: -0.2rem 0 0.6rem; }
    .locationindex .lw-location-finder .detail .rating:empty { display: none; }
    .locationindex .lw-location-finder .detail .rating .stars { font-size: 0.9rem; }
    .locationindex .lw-location-finder .detail .rating a {
      color: var(--lw-muted); font-weight: 600; text-decoration: none;
      border-bottom: 1px solid var(--lw-line);
    }
    .locationindex .lw-location-finder .detail .rating a:hover { color: var(--lw-blue); border-color: var(--lw-blue); }
    .locationindex .lw-location-finder .detail .addr, .locationindex .lw-location-finder .detail .phone {
      display: inline-block; color: var(--lw-grizzle); font-size: 0.88rem;
      text-decoration: none; line-height: 1.45;
    }
    .locationindex .lw-location-finder .detail .addr { border-bottom: 1px solid var(--lw-line); }
    .locationindex .lw-location-finder .detail .addr:hover, .locationindex .lw-location-finder .detail .phone:hover { color: var(--lw-blue); border-color: var(--lw-blue); }
    .locationindex .lw-location-finder .detail .phone { font-weight: 700; color: var(--lw-blue); margin-top: 0.45rem; }
    .locationindex .lw-location-finder .ext { width: 10px; height: 10px; margin-left: 0.28rem; vertical-align: 1px; fill: currentColor; }
    .locationindex .lw-location-finder .actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
    .locationindex .lw-location-finder .actions a {
      text-decoration: none; border-radius: 999px; padding: 0.4rem 0.85rem;
      font-size: 0.82rem; font-weight: 700;
      border: 2px solid var(--lw-green); background: var(--lw-green); color: var(--lw-white);
    }
    .locationindex .lw-location-finder .actions a.ghost { background: transparent; color: var(--lw-blue); border-color: var(--lw-blue); }
    .locationindex .lw-location-finder .actions a:hover { background: var(--lw-green-dark); border-color: var(--lw-green-dark); color: var(--lw-white); }
    .locationindex .lw-location-finder .actions a.ghost:hover { background: var(--lw-blue); border-color: var(--lw-blue); }
    .locationindex .lw-location-finder .close-detail {
      position: absolute; top: 0.3rem; right: 0.45rem; border: 0; background: none;
      color: var(--lw-muted); font-size: 1.3rem; line-height: 1; padding: 0.1rem 0.3rem;
    }
    .locationindex .lw-location-finder .close-detail:hover { color: var(--lw-grizzle); }

    .locationindex .lw-location-finder .legend {
      position: absolute; right: 1rem; bottom: 1.5rem; z-index: 30;
      display: flex; gap: 0.85rem; background: var(--lw-white);
      border: 1px solid var(--lw-line); border-radius: 999px;
      padding: 0.4rem 0.85rem; font-size: 0.78rem; font-weight: 600; color: var(--lw-muted);
      box-shadow: var(--lw-shadow);
    }
    .locationindex .lw-location-finder .legend i {
      display: inline-block; width: 10px; height: 10px; border-radius: 50% 50% 50% 0;
      transform: rotate(-45deg); margin-right: 0.4rem; vertical-align: -1px;
    }
    .locationindex .lw-location-finder .legend .h { background: var(--lw-green); }
    .locationindex .lw-location-finder .legend .u { background: var(--lw-red); }
    .locationindex .lw-location-finder .legend .s { background: var(--lw-white); box-shadow: inset 0 0 0 2px var(--lw-green); }

    /* Sits over the map, where the cursor already is while browsing pins. */
    .locationindex .lw-location-finder .back {
      position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
      z-index: 30; border: 1px solid var(--lw-line); background: var(--lw-white);
      color: var(--lw-blue); font-weight: 700; border-radius: 999px;
      padding: 0.5rem 1rem; font-size: 0.85rem; box-shadow: var(--lw-shadow);
    }
    .locationindex .lw-location-finder .back:hover { background: var(--lw-blue); color: var(--lw-white); border-color: var(--lw-blue); }

    .locationindex .lw-location-finder .map-error {
      position: absolute; inset: auto 1rem 1rem 1rem; z-index: 40;
      max-width: 620px; margin: 0 auto;
      background: var(--lw-white); border: 1px solid var(--lw-line);
      border-left: 5px solid var(--lw-blue);
      border-radius: 10px; padding: 0.9rem 1rem; box-shadow: var(--lw-shadow);
      font-size: 0.88rem;
    }
    .locationindex .lw-location-finder .map-error strong { color: var(--lw-blue); }
    .locationindex .lw-location-finder .map-error code { background: var(--lw-purrl); padding: 0.1rem 0.3rem; border-radius: 4px; }

    /* Tablets keep the desktop layout but give the map more room. */
    @media (min-width: 901px) and (max-width: 1150px) {
      .locationindex .lw-location-finder .rail { width: 330px; }
      .locationindex .lw-location-finder .search-card h1 { font-size: 1.25rem; }
    }

    /* A landscape phone is too short for a bottom sheet, so it keeps the side
       rail and just tightens it up. */
    @media (orientation: landscape) and (max-height: 640px) and (min-width: 640px) {
      .locationindex .lw-location-finder .rail { top: 0.6rem; left: 0.6rem; width: 300px; max-height: calc(100% - 1.2rem); gap: 0.5rem; }
      .locationindex .lw-location-finder .search-card { padding: 0.7rem 0.8rem; }
      .locationindex .lw-location-finder .search-card h1 { font-size: 1.05rem; }
      .locationindex .lw-location-finder .lede { display: none; }
      .locationindex .lw-location-finder .filter { padding: 0.25rem 0.55rem; font-size: 0.74rem; }
      /* Too little screen to spend on a name: back to a fixed card, where the
         heading wraps and that's the right trade. */
      .locationindex .lw-location-finder .detail { width: 288px; min-width: 0; }
      .locationindex .lw-location-finder .legend { display: none; }
    }

    /* ---------- phones: full-bleed map behind a draggable sheet ---------- */
    @media (max-width: 900px) and (orientation: portrait), (max-width: 639px) {
      .locationindex .lw-location-finder .rail {
        top: auto; bottom: 0; left: 0; right: 0;
        width: 100%; max-height: none; height: 176px; /* matches the peek snap */
        gap: 0; background: var(--lw-white);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -10px 30px rgba(52, 67, 64, 0.18);
        padding-bottom: env(safe-area-inset-bottom, 0);
        transition: height 0.22s ease;
      }
      .locationindex .lw-location-finder .rail.is-dragging { transition: none; }

      /* Results land in a sheet that's mostly below the fold, so a new set of
         them opens it partway and lets it fall closed. Height, not transform:
         sliding the whole sheet up shows the same sliver of content a few
         pixels higher, which reads as the layout settling. Growing it uncovers
         two or three actual hospital rows, so the gesture says what's inside
         rather than only asking to be noticed.
         The lift is measured in rows at play time (--lw-nudge-lift), so the peak
         always clears real content rather than a guessed number of pixels.
         The peak holds briefly \u2014 long enough to read a name \u2014 then two
         decaying hops settle it. Each keyframe sets the easing for the segment
         that follows, so it rises with weight and drops with gravity; one
         shared curve would make it float. */
      @keyframes lw-locationindex-sheet-nudge {
        0% { height: var(--lw-rail-h); animation-timing-function: cubic-bezier(0.2, 0.75, 0.3, 1); }
        18% { height: calc(var(--lw-rail-h) + var(--lw-nudge-lift)); }
        30% { height: calc(var(--lw-rail-h) + var(--lw-nudge-lift)); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.5); }
        50% { height: var(--lw-rail-h); animation-timing-function: cubic-bezier(0.2, 0.75, 0.3, 1); }
        64% { height: calc(var(--lw-rail-h) + var(--lw-nudge-lift) * 0.45); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.5); }
        80% { height: var(--lw-rail-h); animation-timing-function: cubic-bezier(0.2, 0.75, 0.3, 1); }
        90% { height: calc(var(--lw-rail-h) + var(--lw-nudge-lift) * 0.16); animation-timing-function: cubic-bezier(0.55, 0, 1, 0.5); }
        100% { height: var(--lw-rail-h); }
      }
      .locationindex .lw-location-finder .rail.is-nudging { animation: lw-locationindex-sheet-nudge 1250ms; will-change: height; }
      .locationindex .lw-location-finder .card { border: 0; border-radius: 0; box-shadow: none; background: transparent; }

      .locationindex .lw-location-finder .grab {
        display: block; flex: none; width: 100%;
        border: 0; background: transparent; padding: 0.6rem 0 0.4rem;
        touch-action: none; /* we drive the drag ourselves */
      }
      .locationindex .lw-location-finder .grab span {
        display: block; width: 40px; height: 4px; margin: 0 auto;
        border-radius: 999px; background: var(--lw-line);
      }
      .locationindex .lw-location-finder .grab:active span { background: var(--lw-muted); }

      .locationindex .lw-location-finder .search-card { padding: 0.15rem 0.9rem 0.75rem; }
      .locationindex .lw-location-finder .search-card h1 { font-size: 1.15rem; }
      .locationindex .lw-location-finder .lede { display: none; }
      .locationindex .lw-location-finder .search-row { grid-template-columns: 1fr auto; }
      .locationindex .lw-location-finder .filters { margin-top: 0.55rem; }
      .locationindex .lw-location-finder .directory { padding: 0 0.55rem 1rem; }
      .locationindex .lw-location-finder .hospital { padding: 0.62rem 0.7rem; }  /* comfortable tap target */
      .locationindex .lw-location-finder .group-head { padding-top: 0.8rem; }

      /* With a hospital open the sheet leads with its card, not the search box. */
      .locationindex .lw-location-finder .rail.has-detail .search-card { display: none; }
      .locationindex .lw-location-finder .detail--sheet {
        position: relative; /* keeps the close button inside the card */
        left: auto; top: auto; transform: none; margin: 0 0.9rem 0.4rem;
        /* In the sheet the card spans the phone, so it takes the sheet's width
           and lets the heading wrap. Intrinsic width belongs to the anchored
           popup, which has room to grow sideways. */
        width: auto; min-width: 0; max-width: none;
        flex: none; box-shadow: none;
      }
      .locationindex .lw-location-finder .detail--sheet::after { display: none; }

      /* Hugs its label so it reads as a button, not an empty search field. */
      .locationindex .lw-location-finder .ctx {
        position: absolute; top: 0.7rem; left: 0.7rem; z-index: 30;
        align-items: center; gap: 0.45rem;
        width: -moz-fit-content; width: fit-content;
        max-width: calc(100% - 1.4rem);
        background: var(--lw-white); border: 1px solid var(--lw-line);
        border-radius: 999px; padding: 0.28rem 0.9rem 0.28rem 0.3rem;
        box-shadow: var(--lw-shadow);
        font-size: 0.85rem; font-weight: 700; color: var(--lw-blue);
      }
      .locationindex .lw-location-finder .ctx:not([hidden]) { display: flex; }
      .locationindex .lw-location-finder .ctx-arrow {
        flex: none; display: grid; place-items: center;
        width: 26px; height: 26px; border-radius: 50%;
        background: var(--lw-purrl); color: var(--lw-blue); font-size: 0.95rem; line-height: 1;
      }
      .locationindex .lw-location-finder .ctx:hover { background: var(--lw-blue); color: var(--lw-white); border-color: var(--lw-blue); }
      .locationindex .lw-location-finder .ctx:hover .ctx-arrow { background: rgba(255, 255, 255, 0.22); color: var(--lw-white); }

      /* The sheet covers the bottom of the map, so the chip replaces the pill. */
      .locationindex .lw-location-finder .legend, .locationindex .lw-location-finder .back { display: none; }
    }

    /* Anyone who has asked for less motion gets the sheet held still; the count
       line is waiting for them either way. */
    @media (prefers-reduced-motion: reduce) {
      .locationindex .lw-location-finder .rail.is-nudging { animation: none; }
    }