/* ==========================================================================
   Đo Đất — design system
   --------------------------------------------------------------------------
   One map, one top bar, one dock. The map is the canvas; the chrome floats
   above it in a single quiet layer. Hierarchy comes from space and type
   before it comes from colour or boxes.

   --chrome-h and --dock-h are written by MapMeasure from a ResizeObserver so
   the toast, the farm banner and the map's own controls follow the chrome
   instead of guessing its height.

   Contents
     1. Tokens
     2. Base
     3. App shell, map, map labels
     4. Top bar
     5. Dock: readout, actions, details, library
     6. Controls: buttons, fields, segmented, lists
     7. Draw: aim layer, crosshair, vertex badges
     8. Unit picker
     9. Sheets: search, language, guide, keys, F-Løsning
    10. Toast, banner
    11. MapLibre overrides
    12. Responsive, pointer and motion preferences
   ========================================================================== */

/* 1. Tokens ============================================================== */

:root {
  /* Warm paper, olive leaf, wheat, clay. Two surfaces, one border, one ink. */
  --surface: #fffcf6;
  --surface-2: #f4eee2;
  --surface-3: #eae2d2;
  --line: #e3dac7;
  --line-2: #cfc3aa;
  --ink: #221e17;
  --ink-2: #5b5344;
  --ink-3: #6f6757;
  --bg: #17130e;

  --leaf: #3f6b31; /* accent text, links, active fills on paper */
  --leaf-fill: #38622b; /* button background; keeps --on-leaf at 7:1 */
  --on-leaf: #ffffff;
  --leaf-soft: #e9f0e0;
  --wheat: #7d5f0c; /* measurement accent that survives as text */
  --wheat-soft: #f8efd8;
  --clay: #a33a1b;
  --clay-soft: #faeae3;

  --focus: var(--ink);
  --scrim: rgba(23, 19, 14, 0.44);
  --grain: radial-gradient(rgba(34, 30, 23, 0.035) 0.7px, transparent 0.7px);

  /* The edge that gives a floating surface its depth. On paper it is the
     hairline; on a dark surface a dark hairline is invisible, so the theme
     below swaps it for a hairline of light. */
  --edge: var(--line);

  /* Space: 4px base. Group gaps are 2× the gaps inside a group. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;

  /* Two radii, concentric: 20 outer − 12 padding = 8 inner. */
  --r-1: 8px;
  --r-2: 20px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(34, 30, 23, 0.07), 0 1px 3px rgba(34, 30, 23, 0.05);
  --shadow-2: 0 2px 6px rgba(34, 30, 23, 0.08), 0 12px 32px rgba(34, 30, 23, 0.14);
  --shadow-3: 0 24px 64px rgba(34, 30, 23, 0.28);

  --font-nunito: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --font-fraunces: "Fraunces", "Palatino Linotype", Georgia, serif;
  --font: var(--font-nunito);
  --font-display: var(--font-fraunces);

  /* Type scale. Display is fluid so the hero never crowds the dock edges. */
  --t-display: clamp(2.125rem, 1.2rem + 4vw, 3rem);
  --t-title: 1.125rem;
  --t-body: 0.9375rem;
  --t-meta: 0.8125rem;
  --t-label: 0.6875rem;

  --dur: 180ms;
  --dur-fast: 120ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  --tap: 44px;
  --chrome-gap: 12px;
  --chrome-h: 65px;
  --dock-h: 0px;
}

[data-theme="dark"] {
  --surface: #1d1913;
  --surface-2: #282219;
  --surface-3: #342c22;
  --line: #3b3228;
  --line-2: #524839;
  --ink: #f3ede2;
  --ink-2: #c7bca7;
  --ink-3: #a79c85;
  --bg: #0e0b08;

  --leaf: #a6cf74;
  --leaf-fill: #3d6d2d;
  --on-leaf: #f4f9ee;
  --leaf-soft: #26301c;
  --wheat: #e3c05c;
  --wheat-soft: #322a12;
  --clay: #f0936f;
  --clay-soft: #3a211a;

  /* A dark hairline cannot separate a dark surface from imagery, and a weak
     scrim leaves a bright map competing with the panel on top of it. */
  --edge: rgb(255 255 255 / 0.1);
  --scrim: rgba(6, 5, 3, 0.74);
  --grain: radial-gradient(rgba(243, 237, 226, 0.035) 0.7px, transparent 0.7px);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.5), 0 14px 36px rgba(0, 0, 0, 0.5);
  --shadow-3: 0 24px 64px rgba(0, 0, 0, 0.66);
}

/* A near-opaque dark fill reads as a hole cut in the map. The dark theme lets
   more of the imagery through and leans on the hairline instead. */
[data-theme="dark"] .topbar {
  background: color-mix(in oklab, var(--surface) 80%, transparent);
}

/* 2. Base ================================================================ */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  height: 100%;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  color: var(--ink);
  overscroll-behavior: none;
}

::selection {
  background: var(--leaf);
  color: var(--on-leaf);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* One focus treatment for every control, on every surface. */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

kbd,
.kbd {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--line-2);
  border-block-end-width: 2px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink-2);
  font: 700 0.6875rem/1 var(--font);
  letter-spacing: 0.02em;
}

/* 3. App shell, map, map labels ========================================== */

.app,
.app-content {
  position: fixed;
  inset: 0;
}

.app {
  z-index: 0;
}

.app-content > .map,
.app-content > .map-fallback {
  position: absolute;
  inset: 0;
}

/* Floating chrome sits above the map, never inside its flow. */
.topbar,
.dock,
.toast,
.fl-target-banner {
  position: absolute;
  z-index: 10;
}

.topbar {
  z-index: 20;
}

.map-fallback {
  z-index: 30;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--s2);
  padding: var(--s6);
  text-align: center;
  background: var(--surface);
  color: var(--ink);
}

.map-fallback strong {
  font-size: var(--t-title);
}

.map-fallback span {
  max-width: 40ch;
  color: var(--ink-2);
  font-size: var(--t-meta);
  text-wrap: pretty;
}

/* The value of the plot, on the plot. */
.area-label {
  padding: 3px 8px;
  border-radius: var(--r-pill);
  background: var(--leaf-fill);
  color: var(--on-leaf);
  font: 700 0.8125rem/1.3 var(--font);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: var(--shadow-1);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* A measurement is a number and a unit: LTR even inside an RTL page. */
.area-label,
.dock-handle-value,
.load-area,
.rarea,
.aim-hud,
.readout-value {
  direction: ltr;
}

/* 4. Top bar ============================================================= */

.topbar {
  top: 0;
  inset-inline: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  padding: var(--chrome-gap);
  background: color-mix(in oklab, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-block-end: 1px solid var(--edge);
  box-shadow: var(--shadow-1);
}

/* The wordmark holds the start edge; the map controls sit at the end. */
.topbar-brand {
  margin-inline-end: auto;
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

/* 5. Dock ================================================================ */

.dock {
  inset-inline: 0;
  bottom: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  max-height: min(66dvh, 600px);
  background: var(--surface);
  background-image: var(--grain);
  border-block-start: 1px solid var(--edge);
  border-start-start-radius: var(--r-2);
  border-start-end-radius: var(--r-2);
  box-shadow: var(--shadow-2);
  padding-block-end: env(safe-area-inset-bottom, 0);
}

.dock-handle {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: 40px;
  padding: var(--s2) var(--s4) 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: 700 var(--t-meta) / 1 var(--font);
  cursor: pointer;
}

.dock-grip {
  width: 36px;
  height: 4px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--line-2);
}

.dock-handle:hover {
  color: var(--ink);
}

.dock-handle-value {
  margin-inline-start: auto;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-title);
  font-variant-numeric: tabular-nums;
}

.dock-body {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  padding: var(--s3) var(--s4) var(--s4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.dock[data-open="false"] .dock-body {
  display: none;
}

.dock[data-open="false"] .dock-handle {
  padding-block-end: var(--s2);
}

/* Readout: the one number the app exists to produce. */
.readout-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.label {
  color: var(--ink-3);
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Some readouts carry a sentence, not a label: keep it readable as prose. */
.label-sentence {
  color: var(--ink-2);
  font-size: var(--t-meta);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  text-wrap: pretty;
}

.readout-value {
  display: flex;
  align-items: baseline;
  gap: 0.3em;
  margin: var(--s1) 0 0;
  font-family: var(--font-display);
  font-size: var(--t-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

.readout-value .unit {
  font-family: var(--font);
  font-size: 0.42em;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--ink-3);
}

/* Secondary numbers: present, aligned, never competing. */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin: var(--s4) 0 0;
  padding-block-start: var(--s3);
  border-block-start: 1px solid var(--line);
}

.stats > div {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
}

.stats dt {
  color: var(--ink-3);
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.stats dd {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 0;
  color: var(--ink);
  font-size: var(--t-body);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* 6. Controls ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 40px;
  padding: 0 var(--s3);
  border: 1px solid transparent;
  border-radius: var(--r-1);
  background: var(--surface-2);
  color: var(--ink);
  font: 700 var(--t-body) / 1.2 var(--font);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}

.btn:hover:not(:disabled) {
  background: var(--surface-3);
}

.btn:active:not(:disabled) {
  transform: scale(0.96);
}

.btn:disabled {
  cursor: not-allowed;
  color: var(--ink-3);
  opacity: 0.55;
}

.btn svg {
  flex: none;
}

/* The one primary action per mode. Full width, filled, unambiguous. */
.btn-primary {
  min-height: 46px;
  padding: 0 var(--s4);
  background: var(--leaf-fill);
  color: var(--on-leaf);
}

.btn-primary:hover:not(:disabled) {
  background: color-mix(in oklab, var(--leaf-fill) 88%, var(--ink));
}

.btn-primary:disabled {
  background: var(--surface-3);
  color: var(--ink-3);
  opacity: 1;
}

.btn-danger {
  color: var(--clay);
  background: var(--clay-soft);
}

.btn-danger:hover:not(:disabled) {
  background: color-mix(in oklab, var(--clay-soft) 82%, var(--clay));
}

.btn-quiet {
  background: none;
  color: var(--ink-2);
}

.btn-quiet:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--ink);
}

/* An icon-only action in a labelled row keeps the row's rhythm. */
.btn-square {
  flex: 0 0 40px;
  padding: 0;
}

/* Icon-only control in the chrome: square, quiet, never wider than tall. */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 0;
  border-radius: var(--r-1);
  background: none;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.icon-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.icon-btn:active {
  transform: scale(0.96);
}

/* A labelled control that can shed its label on a narrow bar. */
.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  height: 40px;
  padding: 0 var(--s3);
  flex: none;
  border: 0;
  border-radius: var(--r-1);
  background: none;
  color: var(--ink-2);
  font: 700 var(--t-meta) / 1 var(--font);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.chip-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.action-row > .btn {
  flex: 1 1 auto;
}

.field {
  width: 100%;
  min-height: 44px;
  padding: 10px var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--surface-2);
  color: var(--ink);
  font: 400 var(--t-body) / 1.4 var(--font);
  resize: vertical;
}

.field::placeholder {
  color: var(--ink-3);
}

.field:focus {
  border-color: var(--line-2);
  background: var(--surface);
}

textarea.field {
  min-height: 60px;
}

.details {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

/* Segmented control: one choice, two options. */
.segmented {
  display: flex;
  padding: 3px;
  gap: 3px;
  border-radius: var(--r-1);
  background: var(--surface-2);
}

.segmented button {
  flex: 1;
  display: grid;
  gap: 1px;
  min-height: 40px;
  padding: var(--s1) var(--s2);
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink-2);
  font: 700 var(--t-meta) / 1.2 var(--font);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.segmented button small {
  font-size: var(--t-label);
  font-weight: 600;
  color: var(--ink-3);
}

.segmented button:hover {
  color: var(--ink);
}

.segmented button.on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-1);
}

.segmented button.on small {
  color: var(--ink-2);
}

.hint {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-meta);
  line-height: 1.4;
  text-wrap: pretty;
}

.kbd-hint {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--t-label);
  line-height: 1.6;
}

/* Coordinate entry, revealed from the draw actions. */
.coord-row {
  display: flex;
  gap: var(--s2);
}

.coord-row .field {
  flex: 1 1 0;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

/* Edit tools */
.edit-tools {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}


.region-list {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.region-list li {
  display: flex;
  align-items: center;
  gap: var(--s1);
  border-radius: var(--r-1);
  background: var(--surface-2);
}

.region-list li.active {
  box-shadow: inset 0 0 0 1px var(--leaf);
  background: var(--leaf-soft);
}

.region-go {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: var(--s1) var(--s3);
  border: 0;
  background: none;
  color: var(--ink);
  font-size: var(--t-meta);
  cursor: pointer;
}

.rdot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--leaf);
}

.rdot.hole {
  background: var(--surface);
  border: 2px solid var(--clay);
}

.rname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rarea {
  margin-inline-start: auto;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* Saved plots, kept out of the way until asked for. */
.library-toggle {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--s2);
  border: 0;
  border-radius: var(--r-1);
  background: none;
  color: var(--ink-2);
  font: 700 var(--t-meta) / 1 var(--font);
  cursor: pointer;
}

.library-toggle:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.library-toggle .chev {
  margin-inline-start: auto;
  transition: transform var(--dur) var(--ease);
}

.library-toggle[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

.library-list {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin: var(--s2) 0 0;
  padding: 0;
  list-style: none;
}

.library-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1);
  padding: var(--s1);
  border-radius: var(--r-1);
  background: var(--surface-2);
}

.library-list li.active {
  background: var(--leaf-soft);
  box-shadow: inset 0 0 0 1px var(--leaf);
}

.load {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: var(--s1) var(--s2);
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink);
  text-align: start;
  cursor: pointer;
}

.load:hover {
  background: var(--surface-3);
}

.load-main {
  display: grid;
  min-width: 0;
}

.load-main strong {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.load-main small {
  color: var(--ink-3);
  font-size: var(--t-label);
}

.load-area {
  margin-inline-start: auto;
  flex: none;
  color: var(--ink-2);
  font-size: var(--t-meta);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.rename {
  flex: 1;
  min-width: 0;
  min-height: 36px;
}

.saved-empty {
  padding: var(--s3);
  color: var(--ink-3);
  font-size: var(--t-meta);
  text-align: center;
}

.dock-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  padding-block-start: var(--s3);
  border-block-start: 1px solid var(--line);
}

.icon-only {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 0;
  border-radius: var(--r-1);
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease);
}

.icon-only:hover {
  background: var(--surface-3);
  color: var(--ink);
}

.icon-only:active {
  transform: scale(0.96);
}

.icon-only.danger:hover {
  background: var(--clay-soft);
  color: var(--clay);
}

/* Dock groups ---------------------------------------------------------- */
.actions,
.details,
.library {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.action-split {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.action-split .hint {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.action-split .btn {
  flex: 1;
}

.btn.is-on {
  background: var(--leaf-soft);
  color: var(--leaf);
}

.notice {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin: 0;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-1);
  background: var(--wheat-soft);
  color: var(--ink-2);
  font-size: var(--t-meta);
  font-weight: 700;
}

.app-row {
  display: flex;
  gap: var(--s1);
  margin-inline-start: auto;
}

.code-badge {
  position: absolute;
  inset-block-end: 3px;
  inset-inline-end: 3px;
  padding: 0 2px;
  border-radius: 3px;
  background: var(--surface-3);
  color: var(--ink-2);
  font: 800 9px/1.3 var(--font);
  letter-spacing: 0.02em;
}

.saved-search {
  margin-block-end: var(--s1);
}

.fl-icon-wrap {
  position: relative;
  display: grid;
  place-items: center;
}

.fl-icon-wrap .fl-dot {
  position: absolute;
  inset-block-end: -1px;
  inset-inline-end: -3px;
  border: 2px solid var(--surface);
}

/* Always-visible Connect control in the topbar (cloud icon used to be missing). */
.fl-connect-chip {
  max-width: 11rem;
}

.fl-connect-chip .chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.readout-value.is-empty {
  color: var(--ink-3);
}

/* 7. Draw: aim layer, crosshair, vertex badges =========================== */

.aim-layer {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  outline: 1px dashed color-mix(in oklab, var(--ink) 26%, transparent);
  outline-offset: -1px;
}

.aim-layer.snap {
  outline-color: var(--leaf);
}

.crosshair {
  position: absolute;
  inset: 0;
}

.crosshair::before,
.crosshair::after {
  content: "";
  position: absolute;
  background: color-mix(in oklab, var(--ink) 34%, transparent);
}

.crosshair::before {
  inset-block: 0;
  inset-inline-start: 50%;
  width: 1px;
}

.crosshair::after {
  inset-inline: 0;
  inset-block-start: 50%;
  height: 1px;
}

.aim-layer.snap .crosshair::after {
  background: none;
}

.aim-hud {
  position: absolute;
  inset-block-end: var(--s4);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 6px var(--s3);
  border-radius: var(--r-pill);
  background: var(--leaf-fill);
  color: var(--on-leaf);
  font-size: var(--t-meta);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: var(--shadow-1);
}

.aim-hud.muted {
  background: var(--surface-2);
  color: var(--ink-3);
  font-weight: 600;
}

.aim-hud.snap {
  background: var(--wheat);
  color: #241a00;
}

.vtx-num {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--surface);
  border-radius: var(--r-pill);
  background: var(--leaf);
  color: var(--on-leaf);
  font: 800 0.625rem/1 var(--font);
  font-variant-numeric: tabular-nums;
}

.vtx-num.hole {
  background: var(--clay);
}

.gps-dot {
  position: relative;
  width: 16px;
  height: 16px;
  border: 3px solid var(--surface);
  border-radius: var(--r-pill);
  background: var(--leaf);
  box-shadow: var(--shadow-1);
}

/* 8. Unit picker ======================================================== */

.unitpicker {
  flex: none;
}

.up-trigger {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 28px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--ink-2);
  font: 800 var(--t-meta) / 1 var(--font);
  cursor: pointer;
}

.up-trigger:hover {
  border-color: var(--line-2);
  color: var(--ink);
}

.up-pop {
  position: fixed;
  z-index: 60;
  display: flex;
  flex-direction: column;
  width: min(280px, calc(100vw - 24px));
  max-height: min(56dvh, 420px);
  padding: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface);
  box-shadow: var(--shadow-3);
}

.up-search {
  width: 100%;
  min-height: 40px;
  margin-block-end: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--surface-2);
  color: var(--ink);
  font: 400 var(--t-body) / 1.4 var(--font);
}

.up-search::placeholder {
  color: var(--ink-3);
}

.up-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.up-list::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.up-group-h {
  padding: var(--s2) var(--s3) var(--s1);
  color: var(--ink-3);
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.up-opt {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 40px;
  padding: 0 var(--s3);
  border: 0;
  border-radius: var(--r-1);
  background: none;
  color: var(--ink);
  text-align: start;
  cursor: pointer;
}

.up-opt:hover {
  background: var(--surface-2);
}

.up-opt.on {
  background: var(--leaf-soft);
  color: var(--leaf);
}

.up-sym {
  min-width: 44px;
  color: var(--ink-2);
  font-weight: 800;
}

.up-name {
  font-size: var(--t-meta);
}

.up-empty {
  padding: var(--s3);
  color: var(--ink-3);
  font-size: var(--t-meta);
  text-align: center;
}

/* 9. Sheets ============================================================== */

/* One sheet, one shape: scrim, 20px radius, head with a title and a close. */
.sb-overlay,
.cp-overlay,
.gd-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: var(--s4);
  background: var(--scrim);
}

/* On a dark theme the map under a sheet is still a picture, so the scrim
   takes the edge off it: the panel stops competing with the imagery. */
[data-theme="dark"] .sb-overlay,
[data-theme="dark"] .cp-overlay,
[data-theme="dark"] .gd-overlay {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.sb-panel,
.cp-sheet,
.gd-sheet {
  display: flex;
  flex-direction: column;
  width: min(460px, 100%);
  max-height: min(84dvh, 720px);
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: var(--r-2);
  background: var(--surface);
  background-image: var(--grain);
  color: var(--ink);
  box-shadow: var(--shadow-3);
}

.cp-head,
.gd-head {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s3) var(--s3) var(--s4);
  border-block-end: 1px solid var(--line);
}

.cp-head strong,
.gd-head strong {
  font-size: var(--t-title);
  font-weight: 800;
  letter-spacing: -0.01em;
}

.cp-close,
.gd-close {
  margin-inline-start: auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border: 0;
  border-radius: var(--r-1);
  background: none;
  color: var(--ink-2);
  font-size: 1rem;
  cursor: pointer;
}

.cp-close:hover,
.gd-close:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.gd-body {
  padding: var(--s4);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.gd-body section + section,
.gd-body section + .gd-warn,
.gd-body .gd-warn + .gd-ok {
  margin-block-start: var(--s5);
  padding-block-start: var(--s5);
  border-block-start: 1px solid var(--line);
}

.gd-body h2 {
  margin: 0 0 var(--s2);
  font-size: var(--t-title);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.gd-body h3 {
  margin: 0 0 var(--s2);
  font-size: var(--t-body);
  font-weight: 800;
}

.gd-lead {
  margin: 0 0 var(--s3);
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: 1.55;
  text-wrap: pretty;
}

.gd-body ul {
  display: grid;
  gap: var(--s1);
  margin: 0;
  padding-inline-start: var(--s5);
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: 1.5;
}

.gd-body p {
  margin: 0 0 var(--s2);
  color: var(--ink-2);
  font-size: var(--t-body);
  line-height: 1.55;
  text-wrap: pretty;
}

/* Connect / F-Løsning form: need a dedicated stack — gd-body alone has no gap. */
.gd-body > .fl-form {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  margin: 0;
  padding: 0;
}

.gd-body > .fl-form > .gd-lead {
  margin: 0;
}

.gd-warn,
.gd-ok {
  padding: var(--s3);
  border-radius: var(--r-1);
}

.gd-warn {
  background: var(--clay-soft);
}

.gd-ok {
  background: var(--leaf-soft);
}

.gd-warn h3,
.gd-ok h3 {
  color: var(--ink);
}

/* Search sheet */
.sb-panel {
  align-self: start;
  margin-block-start: max(var(--s4), 8dvh);
}

.sb-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: var(--tap);
  margin: var(--s3) var(--s3) var(--s2);
  padding: 0 var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--surface-2);
}

.sb-row:focus-within {
  border-color: var(--line-2);
  background: var(--surface);
}

.sb-ic {
  /* The svg is an inline box, so it sits on the text baseline and rides
     ~3px above the row's centre. Grid drops the baseline and centres it. */
  display: grid;
  place-items: center;
  flex: none;
  color: var(--ink-3);
}

.sb-input {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  border: 0;
  background: none;
  color: var(--ink);
  font: 400 var(--t-body) / 1.4 var(--font);
}

.sb-input:focus {
  outline: none;
}

.sb-input::placeholder {
  color: var(--ink-3);
}

.sb-clear {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--ink-2);
  cursor: pointer;
}

.sb-clear:hover {
  color: var(--ink);
}

.sb-list {
  margin: 0;
  padding: 0 var(--s2) var(--s3);
  list-style: none;
  overflow-y: auto;
}

.sb-opt {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--s2) var(--s3);
  border: 0;
  border-radius: var(--r-1);
  background: none;
  color: var(--ink);
  text-align: start;
  cursor: pointer;
}

.sb-opt:hover {
  background: var(--surface-2);
}

.sb-pin {
  flex: none;
  color: var(--ink-3);
}

.sb-label {
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sb-msg {
  padding: var(--s3) var(--s4) var(--s4);
  color: var(--ink-3);
  font-size: var(--t-meta);
}

.sb-err {
  color: var(--clay);
  font-weight: 700;
}

/* Language sheet */
.cp-search {
  min-height: var(--tap);
  margin: var(--s3) var(--s3) var(--s2);
  padding: 10px var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--surface-2);
  color: var(--ink);
  font: 400 var(--t-body) / 1.4 var(--font);
}

.cp-search::placeholder {
  color: var(--ink-3);
}

.cp-list {
  margin: 0;
  padding: 0 var(--s2) var(--s3);
  list-style: none;
  overflow-y: auto;
}

.cp-opt {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  width: 100%;
  min-height: var(--tap);
  padding: var(--s2) var(--s3);
  border: 0;
  border-radius: var(--r-1);
  background: none;
  color: var(--ink);
  text-align: start;
  cursor: pointer;
}

.cp-opt:hover {
  background: var(--surface-2);
}

.cp-opt.on {
  background: var(--leaf-soft);
  color: var(--leaf);
}

.cp-name {
  font-weight: 700;
}

.cp-code {
  margin-inline-start: auto;
  color: var(--ink-3);
  font-size: var(--t-meta);
}

.cp-empty {
  padding: var(--s4);
  color: var(--ink-3);
  text-align: center;
}

/* Keyboard sheet */
.keys-sheet {
  width: min(520px, 100%);
}

.keys-list {
  display: grid;
  gap: var(--s2);
  margin: 0;
}

.keys-list > div {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding-block-end: var(--s2);
  border-block-end: 1px solid var(--line);
}

.keys-list > div:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.keys-list dt {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: none;
  min-width: 168px;
}

.keys-list dd {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-meta);
  line-height: 1.4;
}

/* F-Løsning sheet */
.fl-form {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s4);
}

.fl-field {
  display: grid;
  gap: var(--s2);
}

.fl-label {
  color: var(--ink-2);
  font-size: var(--t-label);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fl-input {
  min-height: var(--tap);
  padding: 10px var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--surface-2);
  color: var(--ink);
  font: 400 var(--t-body) / 1.4 var(--font);
}

.fl-input:focus {
  outline: 2px solid var(--leaf);
  outline-offset: 1px;
  border-color: transparent;
}

.fl-input.is-invalid {
  border-color: var(--clay);
  background: color-mix(in oklab, var(--clay-soft) 70%, var(--surface-2));
}

.fl-input::placeholder {
  color: var(--ink-3);
}

.fl-actions {
  display: flex;
  gap: var(--s2);
  margin-block-start: var(--s1);
}

.fl-btn {
  flex: 1;
  min-height: var(--tap);
  border: 0;
  border-radius: var(--r-1);
  background: var(--leaf-fill);
  color: var(--on-leaf);
  font: 800 var(--t-body) / 1 var(--font);
  cursor: pointer;
}

.fl-btn:hover:not(:disabled) {
  background: color-mix(in oklab, var(--leaf-fill) 88%, var(--ink));
}

.fl-btn:disabled {
  background: var(--surface-3);
  color: var(--ink-3);
  cursor: not-allowed;
}

.fl-btn-ghost {
  background: var(--surface-2);
  color: var(--ink);
}

.fl-btn-ghost:hover:not(:disabled) {
  background: var(--surface-3);
}

/* Beat `.gd-body p` (higher specificity) so errors are never muted ink-2. */
.gd-body .fl-error,
.fl-error {
  margin: 0;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-1);
  border: 1px solid color-mix(in oklab, var(--clay) 35%, var(--line));
  background: var(--clay-soft);
  color: var(--clay);
  font-size: var(--t-meta);
  font-weight: 700;
  line-height: 1.4;
  text-wrap: pretty;
}

.fl-status {
  display: flex;
  align-items: center;
  gap: var(--s2);
  color: var(--ink-2);
  font-size: var(--t-meta);
  font-weight: 700;
}

.fl-hint {
  color: var(--ink-2);
  font-size: var(--t-meta);
  text-wrap: pretty;
}

.fl-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--ink-3);
}

.fl-dot-ok {
  background: var(--leaf);
}

.fl-dot-sync {
  background: var(--wheat);
}

.fl-dot-error {
  background: var(--clay);
}

/* Plot ↔ farm assignment, inside the library rows. */
.fl-farm-row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  padding: var(--s1) var(--s2) var(--s2);
}

.fl-sync {
  font-size: var(--t-meta);
}

/* Must sit on .app root (not inside .dock) so z-index beats the dock stacking context. */
.fl-farm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: transparent;
}

.fl-farm-picker {
  position: relative;
  flex: 1;
  min-width: 0;
}

.fl-farm-select {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 32px;
  padding: 0 var(--s2);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink-2);
  font: 600 var(--t-meta) / 1.2 var(--font);
  text-align: start;
  cursor: pointer;
}

.fl-farm-select:hover {
  border-color: var(--line-2);
}

.fl-farm-menu {
  position: fixed;
  z-index: 210;
  max-height: 220px;
  overflow: auto;
  margin: 0;
  padding: var(--s1);
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(23, 19, 14, 0.18);
}

.fl-farm-menu-empty {
  padding: var(--s2);
  color: var(--ink-3);
  font: 600 var(--t-meta) / 1.3 var(--font);
}

.fl-farm-menu button.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.fl-farm-menu button.is-disabled:hover {
  background: transparent;
  color: var(--ink);
}

.fl-farm-taken {
  margin-inline-start: auto;
  color: var(--ink-3);
  font-weight: 600;
  font-size: var(--t-label);
}

.fl-summary {
  margin: 0;
  color: var(--ink-2);
  font: 600 var(--t-meta) / 1.35 var(--font);
}

.fl-farm-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  width: 100%;
  min-height: 36px;
  padding: 0 var(--s2);
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  font: 600 var(--t-meta) / 1.2 var(--font);
  text-align: start;
  cursor: pointer;
}

.fl-farm-menu button:hover,
.fl-farm-menu button.is-selected {
  background: var(--leaf-soft);
  color: var(--leaf);
}

.fl-farm-link {
  color: var(--leaf);
  font: 700 var(--t-label) / 1 var(--font);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* 10. Toast, banner ===================================================== */

.toast {
  inset-inline: 0;
  bottom: calc(var(--dock-h, 0px) + var(--s3));
  z-index: 40;
  width: fit-content;
  max-width: calc(100% - 2 * var(--s4));
  margin-inline: auto;
  padding: 10px var(--s4);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--surface);
  font-size: var(--t-meta);
  font-weight: 700;
  text-align: center;
  box-shadow: var(--shadow-2);
  pointer-events: none;
}

.toast:empty {
  display: none;
}

.fl-target-banner {
  position: absolute;
  inset-block-start: calc(var(--chrome-h, 65px) + 52px);
  inset-inline: var(--s3);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: var(--s3);
  max-width: 520px;
  margin-inline: auto;
  padding: var(--s2) var(--s2) var(--s2) var(--s4);
  border-radius: var(--r-pill);
  background: var(--leaf-fill);
  color: var(--on-leaf);
  font-size: var(--t-meta);
  font-weight: 700;
  box-shadow: var(--shadow-2);
}

.fl-target-banner button {
  margin-inline-start: auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border: 0;
  border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--on-leaf) 18%, transparent);
  color: var(--on-leaf);
  cursor: pointer;
}

.fl-target-banner button:hover {
  background: color-mix(in oklab, var(--on-leaf) 30%, transparent);
}

/* 11. MapLibre overrides ================================================ */

/* MapLibre's own stylesheet is imported by the component, so it can land
   after this one: the class is doubled to win the cascade. */
.app .maplibregl-ctrl-bottom-left {
  display: none;
}

/* The dock owns the bottom of a phone screen and the end side of a desk
   one, so the map's own controls live under the top bar at the start edge.
   MapLibre floats its controls inside the container; a column puts the zoom
   group and the attribution on the same inset as the top bar. */
.app .maplibregl-ctrl-bottom-right {
  top: calc(var(--chrome-h, 65px) + var(--s2));
  right: auto;
  bottom: auto;
  left: var(--chrome-gap);
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s4);
}

.app .maplibregl-ctrl-bottom-right > .maplibregl-ctrl {
  position: static;
  float: none;
  margin: 0;
}

[dir="rtl"] .app .maplibregl-ctrl-bottom-right {
  right: var(--chrome-gap);
  left: auto;
  align-items: flex-end;
}

.app .maplibregl-ctrl-group {
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: var(--r-1);
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-1);
  backdrop-filter: blur(8px);
}

.app .maplibregl-ctrl-group button {
  width: 40px;
  height: 40px;
  color: var(--ink-2);
}

.app .maplibregl-ctrl-group button + button {
  border-block-start: 1px solid var(--edge);
}

.app .maplibregl-ctrl-group button:hover {
  background: var(--surface-3);
  color: var(--ink);
}

/* MapLibre paints its control icons as background images with #333 baked
   into the data URI, so `color` never reaches them: on a dark control group
   the zoom glyphs measured 1.5:1 against it and read as nothing. Masking the
   same artwork lets it take currentColor, hover ink included. The
   `!important` beats MapLibre's own `.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon`
   rule, which out-specifies this one. */
.app .maplibregl-ctrl-icon {
  background-color: currentColor;
  background-image: none !important;
  -webkit-mask: var(--ctrl-icon) center / contain no-repeat;
  mask: var(--ctrl-icon) center / contain no-repeat;
}

.app .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
  --ctrl-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E");
}

.app .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
  --ctrl-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E");
}

/* A legal notice, not a control: legible, quiet, never a bright pill. */
.app .maplibregl-ctrl-attrib {
  padding: 2px 6px;
  border-radius: 6px;
  background: color-mix(in oklab, var(--surface) 74%, transparent);
  color: var(--ink-2);
  font-size: var(--t-label);
  backdrop-filter: blur(6px);
}

.app .maplibregl-ctrl-attrib a {
  color: var(--ink-2);
  text-decoration-color: var(--line-2);
}

/* 12. Responsive, pointer and motion preferences ========================= */

/* The dock becomes an end-side card once the map can spare the width. */
@media (min-width: 768px) {
  .dock {
    inset-inline-start: auto;
    inset-inline-end: var(--chrome-gap);
    bottom: var(--chrome-gap);
    width: 372px;
    max-height: calc(100dvh - 2 * var(--chrome-gap) - 46px);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    box-shadow: var(--shadow-2);
  }

  .dock[data-open="false"] {
    width: auto;
  }

  .dock[data-open="false"] .dock-handle {
    padding: var(--s2) var(--s4);
  }

  .dock-grip {
    display: none;
  }

  .dock-body {
    padding: var(--s3) var(--s4) var(--s4);
  }

  /* The toast would sit under the dock card. */
  .toast {
    inset-inline: 0 var(--s4);
    margin-inline: 0 auto;
  }
}

/* A narrow bar cannot afford a word next to every icon. */
@media (max-width: 599px) {
  .chip-btn .chip-label {
    display: none;
  }
}

@media (pointer: coarse) {
  .btn,
  .icon-btn,
  .chip-btn,
  .library-toggle,
  .up-trigger,
  .up-opt,
  .sb-opt,
  .cp-opt,
  .icon-only {
    min-height: var(--tap);
  }

  .icon-btn,
  .up-trigger {
    width: var(--tap);
  }
}

/* Keyboard hints are noise on a touch device. */
@media not all and (pointer: fine) {
  .kbd-hint,
  .kbd-only {
    display: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .gps-dot::after {
    content: "";
    position: absolute;
    inset: -6px;
    border: 2px solid var(--leaf);
    border-radius: var(--r-pill);
    animation: gps-pulse 1.8s var(--ease) infinite;
  }

  .toast,
  .sb-overlay,
  .cp-overlay,
  .gd-overlay {
    animation: fade-in var(--dur) var(--ease);
  }

  .sb-panel,
  .cp-sheet,
  .gd-sheet {
    animation: sheet-in var(--dur) var(--ease);
  }
}

@keyframes gps-pulse {
  from {
    opacity: 0.7;
    transform: scale(0.6);
  }
  to {
    opacity: 0;
    transform: scale(1.4);
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes sheet-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.boot {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: #17130e;
  color: #f3ede2;
  font-family: var(--font-display);
  font-size: 1.6rem;
}
.boot[hidden] { display: none; }
.up-scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  border: 0;
  padding: 0;
  background: transparent;
}


/* Leptos icon wrapper — keep SVG as the flex child the design expects. */
.ic {
  display: contents;
}
.icon-btn svg,
.chip-btn svg,
.icon-only svg,
.app-row svg {
  flex: none;
  display: block;
}