/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import url("/assets/leaflet-c9b65058.css");
@import url("/assets/lexxy-f326a350.css");
@import url("/assets/slimselect-6ab0d5f3.css");

@font-face {
  font-family: "Twemoji Country Flags";
  src: url("/assets/TwemojiCountryFlags-468538bb.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+1F1E6-1F1FF;
}

@font-face {
  font-family: "InterVariable";
  src: url("/assets/InterVariable-884c49a1.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "InterVariable";
  src: url("/assets/InterVariable-Italic-0aa7a4b3.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

/* The map owns its stacking context, so its controls can sit above the tile
   panes (z-index 400) without ever escaping over the app's sticky headers. */
.leaflet-container { isolation: isolate; }
.leaflet-control, .leaflet-top { z-index: 800; }

/* Leaflet asks for Lucida Console, which no Mac has, so the +/− fall back to a
   monospace face that renders them tall and thin. */
.leaflet-touch .leaflet-control-zoom a, .leaflet-control-zoom a {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  font-weight: 600;
}

:root {
  --ss-animation-timing: 0.2s;
  --ss-focus-color: var(--color-petrol-600);
  --ss-primary-color: var(--color-petrol-600);
  --ss-bg-color: var(--color-white);
  --ss-border-color: var(--color-sand-200);
  --ss-font-color: var(--color-sand-900);
  --ss-placeholder-color: var(--color-sand-500);
  --ss-border-radius: var(--radius-xl);

  --lexxy-color-ink: var(--color-sand-900);
  --lexxy-color-ink-lighter: var(--color-sand-300);
  --lexxy-color-accent-dark: var(--color-petrol-600);
  --lexxy-color-accent-medium: var(--color-petrol-400);
  --lexxy-color-accent-light: var(--color-petrol-200);
  --lexxy-color-accent-lightest: var(--color-petrol-50);
  --lexxy-color-red: var(--color-red-600);
}

.ss-main .ss-single .ss-country-name { display: none; }

/* SlimSelect sizes itself off the inherited font, a size up from the app's inputs. */
.ss-main, .ss-content {
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
}
.ss-main .ss-single { margin-left: var(--ss-spacing-m); }

/* An open SlimSelect is a focused field, but its own `:focus` rule never fires
   while open — SlimSelect moves focus to the dropdown's search input. The outline
   stays a pale petrol: a focused input's petrol-600 reads far heavier drawn
   around a whole panel. */
.ss-main:focus,
.ss-main.ss-dir-above,
.ss-main.ss-dir-below,
.ss-content.ss-open {
  --ss-border-color: var(--color-petrol-200);
}

/* Field and dropdown butt together into one panel, so the borders along the seam
   go, and the search divider stays a divider rather than turning petrol. */
.ss-main.ss-dir-below, .ss-content.ss-dir-above { border-bottom-color: transparent; }
.ss-main.ss-dir-above, .ss-content.ss-dir-below { border-top-color: transparent; }
.ss-content.ss-open .ss-search { border-color: var(--color-sand-200); }

.notification[popover] { margin: 0; border: 0; background: transparent; overflow: visible; }

/* Mark a SlimSelect field invalid: the widget is turbo-permanent, so the error
   border is driven by a class on a non-permanent ancestor wrapper. Declared on
   the descendants, and last, so it outranks the open-state border above. */
.select-error .ss-main, .select-error .ss-content { --ss-border-color: var(--color-red-500); --ss-focus-color: var(--color-red-500); }

/* An option that is a badge carries its own colour, so its row stays quiet. */
.ss-content .ss-list .ss-option:has(.ss-badge):hover:not(.ss-disabled),
.ss-content .ss-list .ss-option:has(.ss-badge).ss-highlighted,
.ss-content .ss-list .ss-option:has(.ss-badge):not(.ss-disabled).ss-selected {
  color: var(--ss-font-color);
  background-color: var(--color-sand-100);
  border-left-color: var(--color-sand-100);
}