/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-border-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

.sortable-dragged > div:first-child, li.svelte-zcgycb:last-child > div:where(.svelte-zcgycb):first-child {
  display: none;
}

.tippy-box[data-theme~="fm2"] {
  border-radius: var(--radius-md, .375rem);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: var(--color-fm-rose, oklch(55.03% .208 19.97));
  background-color: var(--color-fm-rose-50, oklch(95.96% .018 4.52));
  padding-inline: calc(var(--spacing, .25rem) * 2);
  padding-block: var(--spacing, .25rem);
  color: var(--color-fm-rose-900, oklch(25.39% .087 16.8));
  --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, #0000001f));
  --tw-drop-shadow: drop-shadow(var(--drop-shadow-md, 0 3px 3px #0000001f));
  filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

  @keyframes svelte-13skpwh-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .spin.svelte-13skpwh {
    animation: svelte-13skpwh-spin 1s linear infinite;
  }

  /* Surface classes lifted from the sibling logo pill rather than invented:
     `rounded-full` + white / gray-800 fill (#1f2937, the same dark fill
     MapControlButton and MfmControlButton use) and the map's floating-surface
     `0 2px 6px` shadow pair. The two then read as one row of chrome.

     Written as scoped CSS rather than Tailwind utilities for the same reason
     `.map-chrome-logo` is: the dark variant is toggled by `html.dark` (see
     $lib/utils/theme.ts), and keeping both values side by side is how they
     stay in step.

     44px tall — the logo pill's height, and MfmControlButton's documented WCAG
     2.5.5 touch-target floor. The two action buttons are 44x44 inside it, so
     they exactly inscribe the bar's right cap; `padding-right: 0` is what makes
     that land, and is why there is no right-hand inset. */
  .map-search-bar.svelte-13skpwh {
    display: flex;
    align-items: center;
    /* The containing block for `.map-search-dropdown` below. Without it the
       dropdown would anchor to `.mapWrapper` and sit at the top-left corner
       of the whole map. */
    position: relative;
    height: 44px;
    /* The width itself is INLINE, from the `widthPx` prop — U6's ladder
       shortens this bar first (360px → 240px) and the number that chooses
       between them lives in `mapChromeLayout.ts`, where a test can name it.
       `max-width: 100%` and `min-width: 0` stay here: below the ladder's own
       368px floor the flex row keeps shrinking the bar rather than
       overflowing the cluster, so at a 320px map it renders 192px wide with a
       70px text field.

       U5 (R1 R2) adds `growthWidthPx` to that inline number when typed text
       fills more than 66% of the field. Deliberately NO `transition` on the
       width: the dropdown's cap is re-measured off `offsetWidth` the moment the
       growth changes (R3), and an animated width would have it reading an
       intermediate value for the whole of the transition. The growth is a few
       pixels per keystroke once it is on, which reads as the field keeping up
       with the text rather than as a jump. `max-width: 100%` is still the
       backstop it always was — the growth is already bounded by the measured
       spare room, so the two never disagree, but the cheaper guarantee stays. */
    max-width: 100%;
    min-width: 0;
    padding-left: 14px;
    border-radius: 9999px;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }

  .map-search-icon.svelte-13skpwh {
    flex: 0 0 auto;
    font-size: 20px;
    color: #6b7280;
  }

  .map-search-input.svelte-13skpwh {
    flex: 1 1 auto;
    /* Without this a flex item refuses to shrink below its content width, and
       the bar overflows the cluster instead of the input getting shorter. */
    min-width: 0;
    height: 100%;
    padding: 0 8px 0 10px;
    border: 0;
    background: transparent;
    color: #1f2937;
    font-size: 14px;
    outline: none;
  }

  .map-search-input.svelte-13skpwh::placeholder {
    color: #9ca3af;
  }

  /* Chrome/Safari draw their own clear button on type="search"; it collides
     with the action buttons and is not keyboard-reachable. The bar's own
     `.map-search-clear` button (Batch 3) is the clear affordance instead. */
  .map-search-input.svelte-13skpwh::-webkit-search-cancel-button {
    display: none;
  }

  .map-search-input.svelte-13skpwh:focus-visible {
    outline: none;
  }

  /* Focus lands on the BAR, not on a rectangle inside a pill — the input is
     edge-to-edge inside a rounded surface, so its own ring would be clipped by
     nothing and look like a stray box. */
  .map-search-bar.svelte-13skpwh:focus-within {
    box-shadow:
      0 0 0 2px #1a73e8,
      0 2px 6px rgba(0, 0, 0, 0.3);
  }

  /* 44x44 — the WCAG 2.5.5 floor, matching MfmControlButton's own note. The
     bar is exactly 44px tall, so these fill it vertically and their circular
     hover fill inscribes the pill's right cap. */
  .map-search-action.svelte-13skpwh {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .map-search-action.svelte-13skpwh .material-symbols-outlined:where(.svelte-13skpwh) {
    font-size: 22px;
  }

  .map-search-action.svelte-13skpwh:hover {
    background-color: rgba(0, 0, 0, 0.06);
  }

  .map-search-action.svelte-13skpwh:focus-visible {
    outline: 2px solid #1a73e8;
    outline-offset: -2px;
  }

  /* The AI bar being open is a persistent state, so the button says so with a
     fill rather than only with `aria-pressed`. A restrained grey pill rather
     than the brand green it used to wear: green reads as a call to action, and
     this is a "currently open" indicator sitting inside the search field's own
     chrome, where a saturated fill competed with the field itself. Inset so the
     pill is visibly smaller than the button's hit area, which stays full size. */
  .map-search-action.is-on.svelte-13skpwh {
    /* The 44px hit area is untouched — box-sizing is border-box, so the padding
       insets the CONTENT box to 30px and `background-clip` paints only that.
       Smaller pill, same touch target. No `color` override: the icon keeps the
       base button's colour now that the fill is no longer dark enough to need
       white on top. */
    padding: 7px;
    background-color: rgba(0, 0, 0, 0.08);
    background-clip: content-box;
  }

  .map-search-action.is-on.svelte-13skpwh:hover {
    background-color: rgba(0, 0, 0, 0.14);
  }

  /* The dropdown's surface. `TypeaheadPopup`'s inline mode deliberately drops
     the ring and shadow (its other inline host is a fullscreen card that
     wants plain rows), so the floating-surface treatment lives here — the
     same `0 2px 6px` pair as the bar, one step darker because it stacks over
     satellite imagery.

     `max-height` + `overflow-y: auto` cap it rather than letting ten places
     plus three regions plus the Ask AI row run off a phone screen; `overflow`
     also clips the rows to the rounded corners, which is why the radius can
     live on this wrapper and not on every row.

     z-index: the bar is `position: relative` with no z-index of its own, so
     this competes at the cluster's level — above `SwitchBackTopBarMini`,
     which follows the bar in DOM order and would otherwise paint over it. */
  .map-search-dropdown.svelte-13skpwh {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    /* Grow RIGHTWARD past the bar when a row needs it, rather than clipping.
       `right: auto` releases the old pin to the bar's width; `max-content`
       sizes to the longest row (the row label is `shrink-0`, so it reports its
       full intrinsic width instead of collapsing); `min-width: 100%` keeps the
       dropdown at least bar-width when every row is short — the common case,
       and the proportion the bar was designed around.
       The cap is the smaller of the soft limit and the space actually left to
       the right of the bar — see `dropdownMaxWidthPx`. */
    right: auto;
    width: max-content;
    min-width: 100%;
    max-width: var(--map-search-dropdown-max, 640px);
    z-index: 30;
    max-height: min(60vh, 420px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 12px;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  }

  html.dark .map-search-dropdown.svelte-13skpwh {
    background-color: #1f2937;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
  }

  html.dark .map-search-bar.svelte-13skpwh {
    background-color: #1f2937;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  }

  html.dark .map-search-bar.svelte-13skpwh:focus-within {
    box-shadow:
      0 0 0 2px #60a5fa,
      0 2px 6px rgba(0, 0, 0, 0.6);
  }

  html.dark .map-search-input.svelte-13skpwh {
    color: #f3f4f6;
  }

  html.dark .map-search-input.svelte-13skpwh::placeholder {
    color: #9ca3af;
  }

  html.dark .map-search-icon.svelte-13skpwh {
    color: #9ca3af;
  }

  html.dark .map-search-action.svelte-13skpwh {
    color: #f3f4f6;
  }

  html.dark .map-search-action.svelte-13skpwh:hover {
    background-color: rgba(255, 255, 255, 0.12);
  }

  /* Dark mode needs a light scrim rather than a darker one — the same grey
     idea inverted, so the pill reads as raised on a dark field. */
  html.dark .map-search-action.is-on.svelte-13skpwh {
    background-color: rgba(255, 255, 255, 0.16);
  }

  html.dark .map-search-action.is-on.svelte-13skpwh:hover {
    background-color: rgba(255, 255, 255, 0.24);
  }


  .sd-panel.svelte-svrbgw {
    transform-origin: top left;
    transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 300ms ease;
    will-change: transform, opacity;
  }
  .sd-backdrop.svelte-svrbgw {
    transition: opacity 300ms ease;
  }
  .sd-no-transition.svelte-svrbgw {
    transition: none !important;
  }
  /* U2 (2026-07-16 plan, first-mate voice): the slot's subtle entrance —
     {#key firstMateSeq} in the markup remounts this element on every new
     message, which restarts the keyframe animation below (same {#key}
     idiom SearchDialogParts.svelte uses for remountSeq). */
  .sd-first-mate-anim.svelte-svrbgw {
    animation: svelte-svrbgw-sd-first-mate-in 220ms ease;
  }
  @keyframes svelte-svrbgw-sd-first-mate-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  /* Reduced motion: instant open/close — mirrors TopBar.svelte's block.
     The JS side also skips the morph entirely via prefersReducedMotion(). */
  @media (prefers-reduced-motion: reduce) {
    .sd-panel.svelte-svrbgw,
    .sd-backdrop.svelte-svrbgw,
    .sd-first-mate-anim.svelte-svrbgw {
      transition: none !important;
      animation: none !important;
    }
  }

/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
.svelte-qgpshq:target {
  scroll-margin-top: calc(var(--spacing, .25rem) * 16);
}