@layer components {
  .geo-map {
    /* the map's own colors: derived from the theme, literal where the theme has no token (water, routes, cells) */
    --geo-map-ocean: color-mix(in oklab, var(--background) 90%, #6c9bab);
    --geo-map-grid: color-mix(in oklab, var(--foreground) 13%, transparent);
    --geo-map-border: color-mix(in oklab, var(--foreground) 38%, transparent);
    --geo-map-route: #c14e2e;
    --geo-map-cell-fill: color-mix(in oklab, #4e958b 32%, transparent);
    --geo-map-cell-border: #347871;
    /* a pick: a coral that reads on every palette (the theme's primary is near-black in the default theme) */
    --geo-map-select: oklch(0.6 0.19 25);
    --geo-map-mix: 100%;
    /* a tone's drawn lightness = l0 + l * lk, its chroma c * ck: identity in light mode; dark mode maps the pastels
       into the dark range instead of mixing them toward the background (which greyed them) */
    --geo-map-l0: 0;
    --geo-map-lk: 1;
    --geo-map-ck: 1;
    --geo-map-callout-width: 10rem;
    --geo-map-callout-size: 0.875rem;
    --geo-map-tone-0: oklch(0.91 0.055 150);
    --geo-map-tone-1: oklch(0.93 0.06 95);
    --geo-map-tone-2: oklch(0.89 0.06 60);
    --geo-map-tone-3: oklch(0.88 0.05 18);
    --geo-map-tone-4: oklch(0.88 0.045 318);
    --geo-map-tone-5: oklch(0.88 0.045 260);
    --geo-map-tone-6: oklch(0.9 0.05 205);
    --geo-map-tone: var(--geo-map-tone-0);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    block-size: var(--geo-map-height, 28rem);
    min-block-size: 16rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--card);
    color: var(--card-foreground);
    font-family: var(--font-sans);

    &[data-palette="ocean"] {
      --geo-map-tone-0: oklch(0.93 0.035 215);
      --geo-map-tone-1: oklch(0.89 0.05 225);
      --geo-map-tone-2: oklch(0.85 0.06 235);
      --geo-map-tone-3: oklch(0.81 0.07 245);
      --geo-map-tone-4: oklch(0.87 0.05 200);
      --geo-map-tone-5: oklch(0.83 0.06 255);
      --geo-map-tone-6: oklch(0.91 0.04 240);
    }
    &[data-palette="forest"] {
      --geo-map-tone-0: oklch(0.93 0.045 135);
      --geo-map-tone-1: oklch(0.89 0.07 135);
      --geo-map-tone-2: oklch(0.85 0.075 145);
      --geo-map-tone-3: oklch(0.81 0.075 158);
      --geo-map-tone-4: oklch(0.87 0.06 170);
      --geo-map-tone-5: oklch(0.83 0.065 140);
      --geo-map-tone-6: oklch(0.91 0.05 125);
    }
    &[data-palette="sunset"] {
      --geo-map-tone-0: oklch(0.92 0.06 82);
      --geo-map-tone-1: oklch(0.88 0.075 65);
      --geo-map-tone-2: oklch(0.84 0.085 50);
      --geo-map-tone-3: oklch(0.8 0.085 32);
      --geo-map-tone-4: oklch(0.86 0.065 15);
      --geo-map-tone-5: oklch(0.82 0.07 350);
      --geo-map-tone-6: oklch(0.9 0.06 40);
    }
    &[data-palette="heat"] {
      --geo-map-tone-0: oklch(0.96 0.055 95);
      --geo-map-tone-1: oklch(0.92 0.08 85);
      --geo-map-tone-2: oklch(0.88 0.09 72);
      --geo-map-tone-3: oklch(0.84 0.095 58);
      --geo-map-tone-4: oklch(0.8 0.1 45);
      --geo-map-tone-5: oklch(0.76 0.1 35);
      --geo-map-tone-6: oklch(0.72 0.1 27);
    }
    &[data-palette="mono"] {
      --geo-map-tone-0: color-mix(in oklab, var(--foreground) 5%, var(--card));
      --geo-map-tone-1: color-mix(in oklab, var(--foreground) 9%, var(--card));
      --geo-map-tone-2: color-mix(in oklab, var(--foreground) 13%, var(--card));
      --geo-map-tone-3: color-mix(in oklab, var(--foreground) 17%, var(--card));
      --geo-map-tone-4: color-mix(in oklab, var(--foreground) 7%, var(--card));
      --geo-map-tone-5: color-mix(in oklab, var(--foreground) 11%, var(--card));
      --geo-map-tone-6: color-mix(in oklab, var(--foreground) 15%, var(--card));
    }
    &[data-palette="chart"] {
      --geo-map-tone-0: color-mix(in oklab, var(--chart-1) 45%, var(--card));
      --geo-map-tone-1: color-mix(in oklab, var(--chart-2) 40%, var(--card));
      --geo-map-tone-2: color-mix(in oklab, var(--chart-3) 35%, var(--card));
      --geo-map-tone-3: color-mix(in oklab, var(--chart-4) 30%, var(--card));
      --geo-map-tone-4: color-mix(in oklab, var(--chart-5) 25%, var(--card));
      --geo-map-tone-5: color-mix(in oklab, var(--chart-1) 25%, var(--card));
      --geo-map-tone-6: color-mix(in oklab, var(--chart-3) 20%, var(--card));
    }
    &[data-variant="plain"] {
      border: 0;
      border-radius: 0;
      background: transparent;
    }
  }

  .dark .geo-map {
    --geo-map-ocean: color-mix(in oklab, var(--background) 92%, #5a9fb3);
    --geo-map-border: color-mix(in oklab, var(--background) 70%, transparent);
    --geo-map-grid: color-mix(in oklab, var(--foreground) 10%, transparent);
    --geo-map-route: #ff9c76;
    --geo-map-cell-fill: color-mix(in oklab, #54bbaf 25%, transparent);
    --geo-map-cell-border: #8adbd2;
    --geo-map-mix: 58%;
    --geo-map-select: oklch(0.72 0.16 28);
    --geo-map-l0: 0.2;
    --geo-map-lk: 0.33;
    --geo-map-ck: 0.9;

    &:is([data-palette="mono"], [data-palette="chart"]) {
      --geo-map-l0: 0;
      --geo-map-lk: 1;
      --geo-map-ck: 1;
    }
  }

  .geo-map-svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    touch-action: none;
    cursor: grab;
    user-select: none;

    &:active {
      cursor: grabbing;
    }
    &:focus-visible {
      outline: 2px solid var(--ring);
      outline-offset: -3px;
    }
  }

  .geo-map-sphere path {
    fill: var(--geo-map-ocean);
    stroke: var(--geo-map-grid);
  }
  .geo-map-graticule path {
    fill: none;
    stroke: var(--geo-map-grid);
    stroke-width: 0.6;
    pointer-events: none;
  }

  /* a region's fill (and its lifted copy's): its tone, light as written; dark through the lightness map above. The
     context, the pick and the cells set their own fill on a more specific selector */
  .geo-map-region,
  .geo-map-lifted {
    fill: color-mix(in oklab, var(--geo-map-tone) var(--geo-map-mix), var(--background));

    @supports (color: oklch(from red l c h)) {
      fill: oklch(
        from var(--geo-map-tone) calc(var(--geo-map-l0) + l * var(--geo-map-lk)) calc(c * var(--geo-map-ck)) h
      );
    }
    &[data-tone="0"] {
      --geo-map-tone: var(--geo-map-tone-0);
    }
    &[data-tone="1"] {
      --geo-map-tone: var(--geo-map-tone-1);
    }
    &[data-tone="2"] {
      --geo-map-tone: var(--geo-map-tone-2);
    }
    &[data-tone="3"] {
      --geo-map-tone: var(--geo-map-tone-3);
    }
    &[data-tone="4"] {
      --geo-map-tone: var(--geo-map-tone-4);
    }
    &[data-tone="5"] {
      --geo-map-tone: var(--geo-map-tone-5);
    }
    &[data-tone="6"] {
      --geo-map-tone: var(--geo-map-tone-6);
    }
  }

  .geo-map-region {
    stroke: var(--geo-map-border);
    stroke-width: 0.65;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition:
      fill 180ms ease,
      opacity 180ms ease,
      stroke 180ms ease;
    outline: none;

    &:focus-visible {
      stroke: var(--ring);
      stroke-width: 2.5;
    }
  }

  .geo-map-regions .geo-map-region:hover,
  .geo-map-cells .geo-map-region:hover {
    stroke: var(--foreground);
    stroke-width: 1.2;
  }

  /* around a focus: the rest of the world, dimmed and inert */
  .geo-map-context {
    pointer-events: none;

    & .geo-map-region {
      fill: color-mix(in oklab, var(--muted) 70%, var(--geo-map-ocean));
      opacity: 0.55;
    }
  }

  .geo-map[data-border="none"] :is(.geo-map-regions, .geo-map-context) .geo-map-region {
    stroke: none;
  }
  .geo-map[data-border="dashed"] :is(.geo-map-regions, .geo-map-context) .geo-map-region {
    stroke-dasharray: 3 2;
  }
  .geo-map[data-border="cased"] :is(.geo-map-regions, .geo-map-context) .geo-map-region {
    stroke: var(--background);
    stroke-width: 2;
    paint-order: stroke fill;
  }

  /* the selection: fill (default), outline, pulse, lift */
  .geo-map-regions .geo-map-region[aria-pressed="true"],
  .geo-map-cells .geo-map-region[aria-pressed="true"] {
    fill: color-mix(in oklab, var(--geo-map-select) 62%, var(--card));
    stroke: var(--geo-map-select);
    stroke-width: 1.4;
  }
  .geo-map[data-highlight="outline"] :is(.geo-map-regions, .geo-map-cells) .geo-map-region[aria-pressed="true"] {
    fill: color-mix(in oklab, var(--geo-map-select) 14%, transparent);
    stroke: var(--geo-map-select);
    stroke-width: 2.4;
    stroke-dasharray: 6 4;
    animation: geo-map-march 900ms linear infinite;
  }
  .geo-map[data-highlight="pulse"] :is(.geo-map-regions, .geo-map-cells) .geo-map-region[aria-pressed="true"] {
    animation: geo-map-pulse 1.6s ease-in-out infinite;
  }
  .geo-map[data-highlight="lift"] :is(.geo-map-regions, .geo-map-cells) .geo-map-region[aria-pressed="true"] {
    fill: color-mix(in oklab, var(--foreground) 22%, var(--geo-map-ocean));
    stroke: none;
  }

  @keyframes geo-map-march {
    to {
      stroke-dashoffset: -20;
    }
  }
  @keyframes geo-map-pulse {
    50% {
      fill: color-mix(in oklab, var(--geo-map-select) 28%, var(--card));
      stroke-width: 3;
    }
  }

  /* hover (and data-highlight="lift"): a copy of the region raised a little, its shadow on the map below */
  .geo-map-lift {
    pointer-events: none;
  }
  .geo-map-lifted {
    stroke: var(--foreground);
    stroke-width: 1;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    translate: 0 -3px;
    filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.28));
    transition:
      translate 160ms ease-out,
      filter 160ms ease-out;

    @starting-style {
      translate: 0 0;
      filter: drop-shadow(0 0 0 rgb(0 0 0 / 0));
    }
    &[aria-pressed="true"] {
      fill: color-mix(in oklab, var(--geo-map-select) 62%, var(--card));
      stroke: var(--geo-map-select);
    }
    &.geo-map-cell {
      fill: var(--geo-map-cell-fill);
      stroke: var(--geo-map-cell-border);
    }
  }
  .geo-map[data-highlight="lift"] .geo-map-lifted[aria-pressed="true"] {
    translate: 0 -5px;
    filter: drop-shadow(0 7px 5px rgb(0 0 0 / 0.32));
  }

  .geo-map-cells .geo-map-region {
    fill: var(--geo-map-cell-fill);
    stroke: var(--geo-map-cell-border);
    stroke-width: 1.2;
  }

  .geo-map-lines {
    pointer-events: none;
  }
  .geo-map-line {
    fill: none;
    stroke: var(--geo-map-route);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
  }

  .geo-map-markers {
    pointer-events: none;
  }
  .geo-map-marker {
    & > :not(text) {
      fill: var(--geo-map-route);
      stroke: var(--background);
      stroke-width: 2;
    }
    & text {
      font: 500 11px var(--font-sans);
      fill: var(--foreground);
      stroke: var(--background);
      stroke-width: 3px;
      paint-order: stroke;
      stroke-linejoin: round;
    }
  }
  .geo-map-hatch {
    fill: none;
    stroke: var(--muted-foreground);
    stroke-width: 1;
  }

  /* callouts: a leader line from each region to its name outside the map, the name written on the line */
  .geo-map-callout {
    cursor: pointer;
  }
  .geo-map-callout-line {
    fill: none;
    stroke: color-mix(in oklab, var(--foreground) 45%, transparent);
    stroke-width: 0.8;
    vector-effect: non-scaling-stroke;
  }
  .geo-map-callout-dot {
    fill: var(--foreground);
  }
  /* the script spaces the rows and shortens the names by this size (--geo-map-callout-size) */
  .geo-map-callout-label {
    font: 500 var(--geo-map-callout-size) var(--font-sans);
    fill: var(--foreground);
  }
  .geo-map-callout:is([data-hover], [data-selected]) {
    & .geo-map-callout-line {
      stroke: var(--geo-map-select);
      stroke-width: 1.6;
    }
    & .geo-map-callout-dot {
      fill: var(--geo-map-select);
    }
    & .geo-map-callout-label {
      fill: var(--geo-map-select);
      font-weight: 600;
    }
  }

  .geo-map-tooltip {
    position: absolute;
    z-index: 3;
    max-inline-size: 14rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--popover-foreground);
    background: var(--popover);
    box-shadow: var(--shadow-md);
    pointer-events: none;
    font-size: 0.75rem;
    white-space: nowrap;

    &[hidden] {
      display: none;
    }
  }

  .geo-map-error {
    position: absolute;
    inset: auto 1rem 1rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--destructive);
    border-radius: var(--radius-md);
    color: var(--destructive);
    background: var(--card);
    font-size: 0.8125rem;
  }

  .geo-map[data-geo-status="loading"] .geo-map-svg {
    animation: geo-map-loading 1.2s ease-in-out infinite alternate;
  }
  @keyframes geo-map-loading {
    to {
      opacity: 0.55;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .geo-map-region,
    .geo-map-lifted {
      transition: none;
    }
    .geo-map[data-highlight] :is(.geo-map-regions, .geo-map-cells) .geo-map-region[aria-pressed="true"],
    .geo-map[data-geo-status="loading"] .geo-map-svg {
      animation: none;
    }
  }

  @media (prefers-contrast: more) {
    .geo-map {
      --geo-map-border: var(--foreground);
    }
    .geo-map-region {
      stroke-width: 1;
    }
    .geo-map-callout-line {
      stroke: var(--foreground);
    }
  }

  @media (forced-colors: active) {
    .geo-map-sphere path {
      fill: Canvas;
      stroke: CanvasText;
    }
    .geo-map-region,
    .geo-map-lifted {
      fill: Canvas;
      stroke: CanvasText;
    }
    .geo-map-regions .geo-map-region[aria-pressed="true"],
    .geo-map-lifted[aria-pressed="true"] {
      fill: Highlight;
      stroke: CanvasText;
    }
    .geo-map-line,
    .geo-map-callout-line {
      stroke: CanvasText;
    }
    .geo-map-callout-label,
    .geo-map-marker text {
      fill: CanvasText;
    }
  }
}