/*
 * 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.
 */

/* Lexxy's content styles render a stored description, in the editor and on the
   page alike, but they ship unlayered and would beat every Tailwind utility on the
   same element — text-sand-700 on a paragraph, say. Giving them a layer of their
   own fixes that, and the slot has to be exact: above Preflight, which zeroes the
   margins they put back, and below the utilities a view sets. Layer order is fixed
   by first declaration, and this file loads before tailwind.css, so it is declared
   here. The editor's own chrome stays unlayered. */
@layer properties, theme, base, lexxy-content, components, utilities;

@import url("/assets/leaflet-c9b65058.css");
@import url("/assets/lexxy-content-0ff2f961.css") layer(lexxy-content);
@import url("/assets/lexxy-editor-5b842411.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);
}

/* The view around a stored description picks the tone — text-sand-700 in the
   proposal intro, text-sand-600 in an item card — but it sets that on the div
   outside Action Text's own wrapper, and an inherited colour loses to the colour
   .lexxy-content sets on itself. Only the rendered wrapper carries both classes,
   so the editor keeps its own ink. */
.trix-content.lexxy-content { color: inherit; }

/* A travel description is prose a customer reads, not a document: code blocks,
   quotes, dividers, strikethrough and highlighter have no place in one, and each
   one is a way for a proposal to end up looking unlike the others. */
lexxy-toolbar [data-command="strikethrough"],
lexxy-toolbar [data-command="insertQuoteBlock"],
lexxy-toolbar [data-command="insertCodeBlock"],
lexxy-toolbar [data-command="insertHorizontalDivider"],
lexxy-toolbar .lexxy-editor__toolbar-dropdown--highlight {
  display: none;
}

/* A rich text editor and a SlimSelect draw their own DOM over a field, so :disabled
   never reaches them. read_only_controller.js freezes both; this greys them the way
   :disabled greys the fields beside them, and keeps a pointer out. */
fieldset[data-read-only] lexxy-editor,
fieldset[data-read-only] .ss-main {
  opacity: 0.5;
  pointer-events: none;
}

.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); }

/* A native select's arrow and SlimSelect's land at different insets, so the app
   draws one chevron for both. Stroke is sand-500: a data URI can't read a var. */
:root {
  --select-chevron: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20fill='none'%20stroke='%237C7364'%20stroke-linecap='round'%20stroke-linejoin='round'%20stroke-width='2'%20viewBox='0%200%2024%2024'%20width='24'%20height='24'><path%20d='m6%209%206%206%206-6'/></svg>");
}
.select-chevron {
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem 1rem;
}
.ss-main .ss-arrow {
  flex: none;
  width: 1rem;
  height: 1rem;
  background: var(--select-chevron) no-repeat center/1rem 1rem;
}
/* .ss-arrow is the svg itself, so its path would draw over the background. */
.ss-main .ss-arrow path { display: none; }

.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); }

/* A badge select has no field box: the selected badge is the control, and the
   chevron rides inside it in the badge's own colour, so one value never reads as
   the first of several tags dropped into a text field. */
.badge-select .ss-main {
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
/* SlimSelect sizes .ss-single narrower than the badge and hides the overflow, so
   without this the pill loses its right edge along with the chevron. */
.badge-select .ss-main .ss-single {
  flex: none;
  margin-left: 0;
  overflow: visible;
}
.badge-select .ss-main .ss-arrow { display: none; }
.badge-select .ss-main:focus-visible {
  outline: 2px solid var(--ss-focus-color);
  outline-offset: 2px;
  border-radius: 9999px;
}
.badge-select .ss-single .ss-badge::after {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  margin-right: -0.25rem;
  opacity: 0.7;
  background-color: currentColor;
  -webkit-mask: var(--select-chevron) no-repeat center / 0.75rem 0.75rem;
  mask: var(--select-chevron) no-repeat center / 0.75rem 0.75rem;
}

/* 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);
}