.pin-glyph.svelte-12m9okc {
    transform: rotate(0deg) translateY(0) scale(1);
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.3));
  }
  .dark .pin-glyph.svelte-12m9okc {
    filter: drop-shadow(0 2px 4px rgba(255,255,255,.4));
  }
  .group.svelte-12m9okc:hover .pin-glyph:where(.svelte-12m9okc) {
    filter: drop-shadow(0 4px 10px color-mix(in oklab, var(--theme-cyan-600, #0891b2) 50%, transparent)) drop-shadow(0 2px 6px color-mix(in oklab, var(--theme-red-600, #dc2626) 40%, transparent));
  }
  .dark .group.svelte-12m9okc:hover .pin-glyph:where(.svelte-12m9okc) {
    filter: drop-shadow(0 0 10px rgba(255,255,255,.8)) drop-shadow(0 2px 4px rgba(255,255,255,.5));
  }
  .group.svelte-12m9okc:hover .pin-glyph:where(.svelte-12m9okc) {
    transform: rotate(0deg) translateY(-1px) scale(1.18);
  }
  .pin-tilted.svelte-12m9okc {
    transform: rotate(45deg);
    filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)) drop-shadow(0 0 6px color-mix(in oklab, var(--theme-indigo-400, #818cf8) 50%, transparent));
  }
  .dark .pin-tilted.svelte-12m9okc {
    filter: drop-shadow(0 2px 4px rgba(255,255,255,.4)) drop-shadow(0 0 6px rgba(255,255,255,.55));
  }
  .group.svelte-12m9okc:hover .pin-tilted:where(.svelte-12m9okc) {
    transform: rotate(45deg) translateY(-1px) scale(1.18);
    filter: drop-shadow(0 4px 10px color-mix(in oklab, var(--theme-cyan-600, #0891b2) 50%, transparent)) drop-shadow(0 2px 6px color-mix(in oklab, var(--theme-red-600, #dc2626) 40%, transparent)) drop-shadow(0 0 6px color-mix(in oklab, var(--theme-indigo-400, #818cf8) 50%, transparent));
  }
  .dark .group.svelte-12m9okc:hover .pin-tilted:where(.svelte-12m9okc) {
    filter: drop-shadow(0 0 10px rgba(255,255,255,.8)) drop-shadow(0 2px 4px rgba(255,255,255,.5)) drop-shadow(0 0 6px rgba(255,255,255,.55));
  }
  @media (prefers-reduced-motion: reduce) {
    .pin-glyph.svelte-12m9okc {
      transition: none !important;
    }
  }

  .loading-pool-indicator.svelte-1i7j4v1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    /* NO background-color here - let animation control it fully */
    border: 1px solid var(--theme-gray-200, #E5E7EB);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    animation: svelte-1i7j4v1-pulsateBackgroundRedWhite 1.5s ease-in-out infinite;
  }

  .loading-complete-indicator.svelte-1i7j4v1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background-color: var(--theme-emerald-500, #10b981); /* green-500 */
    border: 1px solid var(--theme-emerald-600, #059669); /* green-600 */
    box-shadow: 0 2px 8px color-mix(in oklab, var(--theme-emerald-500, #10b981) 30%, transparent);
  }

  .results-position.svelte-1i7j4v1 {
    margin-left: 1rem;
  }

  .search-position.svelte-1i7j4v1 {
    margin-top: 0.5rem;
  }

  /* The box paints its own green, so its ink is fixed white in both modes and
     stays readable whatever a theme does to --color-white. */
  .complete-text.svelte-1i7j4v1 {
    color: #ffffff;
  }

  /* Animate text color to contrast with background */
  .loading-text.svelte-1i7j4v1 {
    animation: svelte-1i7j4v1-textColorAnimation 1.5s ease-in-out infinite;
  }

  @keyframes svelte-1i7j4v1-textColorAnimation {
    0%, 100% {
      color: var(--theme-gray-800, rgb(31, 41, 55)); /* gray-800 for white background */
    }
    50% {
      color: rgb(255, 255, 255); /* white for red background */
    }
  }

  @keyframes svelte-1i7j4v1-pulsateBackgroundRedWhite {
    0%, 100% {
      background-color: #FFFFFF; /* SOLID WHITE */
      border-color: var(--theme-gray-200, #E5E7EB);
    }
    50% {
      background-color: var(--theme-red-500, #EF4444); /* SOLID RED */
      border-color: var(--theme-red-600, #DC2626);
    }
  }

  .dark .loading-complete-indicator.svelte-1i7j4v1 {
    background-color: var(--theme-emerald-400, #34d399); /* green-400 */
    border-color: var(--theme-emerald-500, #10b981); /* green-500 */
  }

  /* ==========================================================================
     The floating search tab.

     This button is welded to the right screen edge, so it has only TWO corners
     to shape. It used to take its radius from three places at once — the
     wrapper's `rounded-l-2xl`, the button's own `rounded-bl-2xl`, and the
     global `html[data-theme='custom'] button` rule that sets all four corners
     from --app-button-radius. Under a pill theme that produced a fully round
     button squashed inside a tab-shaped clip; under a square theme, hard
     corners inside a soft frame. One radius, one place, left side only.
     ========================================================================== */
  /* A pill theme sets --app-button-radius to 9999px. On a slab this tall that
     resolves to a half-height curve which would eat the label, so the radius is
     capped: a pill reads as a generously rounded tab rather than a lozenge. */
  .search-tab.svelte-tsg0ih {
    --tab-radius: min(var(--app-button-radius, 1rem), 28px);
    border-radius: var(--tab-radius) 0 0 var(--tab-radius);
  }

  /* The button must never re-round itself: the slab owns the shape.
     `html[data-theme='custom'] button` is specificity (0,1,2) and would
     otherwise win, so the !important here is load-bearing, not decoration. */
  .search-tab.svelte-tsg0ih .search-tab-btn {
    border-radius: 0 !important;
  }

  /* Metallic sheen, rebuilt to be theme- and shape-aware.

     The old one was a fixed `-skew-y-12` grey/white gradient: skewed at a
     constant angle regardless of the button's corners, so it cut a visible
     diagonal seam across any rounded edge, and it stayed grey no matter what
     colour the theme painted underneath. This version is unskewed, uses
     currentColor so it inherits the button's own themed ink, and sits under a
     `overflow-hidden` parent so it is clipped to the real shape. */
  /* Both label states occupy the SAME grid cell, so the cell is as wide and tall
     as the larger of the two and the button's size is fixed by construction —
     no hand-tuned width to drift when a theme changes the font. */
  .search-tab-label.svelte-tsg0ih {
    display: grid;
  }

  .search-tab-state.svelte-tsg0ih {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
  }

  /* Hidden, but still measured: `visibility` keeps the element in layout, which
     is the whole point — `display: none` would remove it from the grid and the
     button would resize again. */
  .search-tab-state.is-hidden.svelte-tsg0ih {
    visibility: hidden;
  }

  /* The spinner is always in the DOM now, so stop it turning while it is hidden
     rather than animating something nobody can see. */
  .search-tab-state.is-hidden.svelte-tsg0ih .animate-spin {
    animation: none;
  }

  /* A narrow band near the top, on the SAME vertical axis as the button's own
     background gradient. The base used to be `bg-gradient-to-br` (diagonal) with
     a bright `via-gray-100` midpoint, so its band and this sheen crossed at
     different angles and stacked into a hard diagonal wash across the face —
     visible in a screenshot even though every measured value was correct. Both
     now run top-to-bottom, so they reinforce instead of fighting. */
  .search-tab-shine.svelte-tsg0ih {
    background: linear-gradient(
      to bottom,
      currentColor 0%,
      transparent 45%
    );
    opacity: 0.06;
    transition: opacity 0.3s ease;
  }

  .search-tab.svelte-tsg0ih:hover .search-tab-shine:where(.svelte-tsg0ih) {
    opacity: 0.11;
  }

  /* Effects off means no decorative sheen at all, matching every other themed
     button (see lib/styles/theme-motion.css's data-motion-glow rules). */
  html[data-motion-glow='off'] .search-tab-shine.svelte-tsg0ih {
    display: none;
  }

  /* The pool indicator now lives INSIDE the slab. It ships its own 0.5rem
     radius, its own top margin and a white/red pulse — all of which made it
     read as a separate floating box. Flattened here so it reads as the bottom
     course of one continuous slab. Scoped to the search tab, so the same
     component keeps its own styling in the results list. */
  .search-tab.svelte-tsg0ih .loading-pool-indicator,
  .search-tab.svelte-tsg0ih .loading-complete-indicator {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    margin: 0;
    width: 100%;
    box-shadow: none;
  }