/* Poles of remoteness. Tokens first, dark variant, then layout. Phone rules live in the media query at
   the end of the file; desktop rules never go there. */
:root {
  --ground:      #f3f2ec;
  --panel:       #faf9f4;
  --ink:         #22271f;
  --ink-2:       #5b5f54;
  --hair:        rgba(34, 39, 31, .12);
  --hair-strong: rgba(34, 39, 31, .24);
  --accent:      #a55f1f;
  --accent-soft: rgba(165, 95, 31, .10);
  --accent-ink:  #8a4d1b;
  --shadow:      0 1px 2px rgba(34, 39, 31, .06), 0 8px 24px rgba(34, 39, 31, .10);
  /* Explore palette, one colour per distance stop (1, 2.5, 5, 10, 20, 50 km). Read by js/palette.js. */
  --band-1: #efd9a8;
  --band-2: #e2b86f;
  --band-3: #d19a4f;
  --band-4: #b06f2a;
  --band-5: #8a4d1b;
  --band-6: #5a2f12;
  --edge:   #7a7f86;
  --band-alpha: 0.62;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --t: 170ms cubic-bezier(.3, .7, .3, 1);
  --panel-w: 360px;
  --hdr-h: 56px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:      #151812;
    --panel:       #1c211a;
    --ink:         #e8e8dd;
    --ink-2:       #a8ad9d;
    --hair:        rgba(232, 232, 221, .12);
    --hair-strong: rgba(232, 232, 221, .26);
    --accent:      #d98a3f;
    --accent-soft: rgba(217, 138, 63, .12);
    --accent-ink:  #e6a15e;
    --shadow:      0 1px 2px rgba(0, 0, 0, .5), 0 10px 28px rgba(0, 0, 0, .45);
    --band-1: #f3e0b5;
    --band-2: #ecc27a;
    --band-3: #e0a356;
    --band-4: #c97f36;
    --band-5: #a55f1f;
    --band-6: #7a3f12;
    --edge:   #9aa0a8;
    --band-alpha: 0.58;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 15px/1.45 var(--sans);
  color: var(--ink);
  background: var(--ground);
  overflow: hidden;
}
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button { font: inherit; color: inherit; }

/* Header */
.hdr {
  position: fixed; inset: 0 0 auto 0; height: var(--hdr-h); z-index: 1000;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--hair);
}
.hdr__title { margin: 0; font: 600 19px/1.2 var(--serif); }
.hdr__home { color: inherit; text-decoration: none; }
.hdr__sub { margin: 0; font-size: 12px; color: var(--ink-2); }
.hdr__right { display: flex; align-items: center; gap: 10px; }

/* Segmented buttons */
.seg { display: inline-flex; border: 1px solid var(--hair-strong); border-radius: var(--r-md); overflow: hidden; background: var(--panel); }
.seg__btn { border: 0; background: transparent; padding: 6px 12px; cursor: pointer; color: var(--ink-2); }
.seg__btn + .seg__btn { border-left: 1px solid var(--hair); }
.seg__btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.seg--sm .seg__btn { padding: 4px 10px; font-size: 13px; }
.link-btn { border: 0; background: none; padding: 0; color: var(--accent-ink); cursor: pointer; text-decoration: underline; }

/* The region control: links wearing the segmented look, absent while there is only one region. [hidden] is
   a user agent rule and .seg sets display, so the hidden state is spelled out or the empty control would
   still paint its border. */
.hdr__regions[hidden] { display: none; }
.hdr__regions .seg__btn { text-decoration: none; }
.hdr__regions .seg__btn[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }

/* Stage and map */
.stage { position: fixed; inset: var(--hdr-h) 0 0 0; }
.map { position: absolute; inset: 0; right: var(--panel-w); background: var(--ground); }
.leaflet-container { font: inherit; }
.leaflet-tile.explore-tile, .detail-overlay { image-rendering: pixelated; }

/* Map controls, bottom left of the map */
.mapctl {
  position: absolute; left: 12px; bottom: 28px; z-index: 800; display: flex; flex-direction: column; gap: 8px;
  align-items: flex-start; pointer-events: none;
}
.mapctl > * { pointer-events: auto; }
.legend { list-style: none; margin: 0; padding: 6px 10px; display: flex; gap: 10px; font-size: 12px;
  background: var(--panel); border-radius: var(--r-md); box-shadow: var(--shadow); }
.legend__item { display: flex; align-items: center; gap: 4px; }
.legend__swatch { width: 12px; height: 12px; border-radius: 3px; }

/* Card (task 6 and 8) */
.card { position: absolute; left: 12px; top: 12px; z-index: 900; width: min(380px, calc(100% - 24px));
  background: var(--panel); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 14px 16px; }

/* Readout (task 5) */
.readout { padding: 8px 12px; background: var(--panel); border-radius: var(--r-md); box-shadow: var(--shadow);
  font-size: 14px; line-height: 1.35; max-width: 320px; }

/* Side panel (desktop) and sheet (phone, see the media query) */
.panel { position: absolute; top: 0; right: 0; bottom: 0; width: var(--panel-w); background: var(--panel);
  border-left: 1px solid var(--hair); display: flex; flex-direction: column; z-index: 900; }
.panel__handle { display: none; }
.panel__body { overflow: auto; padding: 12px 16px 16px; flex: 1; }
.panel__note { margin: 0 0 10px; font-size: 12px; color: var(--ink-2); }
.panel__foot { margin-top: 16px; font-size: 13px; }
.ranking { list-style: none; margin: 0; padding: 0; }

/* About dialog */
.about { width: min(640px, calc(100% - 32px)); max-height: calc(100% - 32px); border: 0; border-radius: var(--r-lg);
  padding: 20px 24px; background: var(--panel); color: var(--ink); box-shadow: var(--shadow); }
.about::backdrop { background: rgba(0, 0, 0, .4); }
.about__close-form { position: sticky; top: 0; float: right; }
.about__close { border: 0; background: none; font-size: 24px; cursor: pointer; line-height: 1; }
.about__body h2 { font: 600 22px/1.2 var(--serif); margin: 0 0 12px; }
.about__body h3 { font: 600 16px/1.3 var(--serif); margin: 18px 0 6px; }
.about__body p { margin: 0 0 10px; }
/* The About text carries both languages inline and html[lang] picks one. Scoped to the dialog on purpose:
   unscoped it also matches the language switcher, which hides the button for the language you would
   switch to and leaves only the one already active. */
html[lang="en"] .about__body [data-lang="lt"], html[lang="lt"] .about__body [data-lang="en"] { display: none; }

/* Card internals */
.card__headline { margin: 0 0 4px; font: 600 17px/1.3 var(--serif); }
.card__rank { margin: 0 0 10px; color: var(--ink-2); font-size: 13px; }
.card__seg { display: flex; width: 100%; }
.card__seg .seg__btn { flex: 1; }
.card__hint { margin: 4px 0 10px; font-size: 12px; color: var(--ink-2); }
.card__actions { display: flex; gap: 8px; margin-bottom: 12px; }
.btn { border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: var(--r-md); padding: 7px 12px; cursor: pointer; font-weight: 600; }
.btn--ghost { background: transparent; color: var(--accent-ink); }
.card__poles { border-top: 1px solid var(--hair); padding-top: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.chip { border: 1px solid var(--hair-strong); background: transparent; border-radius: 999px; min-width: 26px; height: 26px; padding: 0 8px; cursor: pointer; font-size: 12px; }
.chip--on { background: var(--accent); border-color: var(--accent); color: #fff; }
.card__pole-title { margin: 4px 0 6px; font: 600 15px/1.3 var(--serif); }
.card__of { font-weight: 400; color: var(--ink-2); font-size: 12px; }
.card__facts { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 13px; }
.card__facts dt { color: var(--ink-2); }
.card__facts dd { margin: 0; }
.card__maps { display: block; color: var(--accent-ink); }
.card__note { margin: 8px 0 0; font-size: 12px; color: var(--ink-2); }
.mono { font-family: var(--mono); font-size: 12px; }

/* Pole markers. Leaflet writes the marker's size, margins and transform inline (that is how it positions
   them), so the active state is said in colour and a ring, never in transform or width. */
.pole-marker { display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: var(--panel); border: 2px solid var(--accent); color: var(--accent-ink); font: 600 12px/1 var(--sans);
  box-shadow: var(--shadow); }
.pole-marker--active { background: var(--accent); color: #fff; box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }

/* Ranking rows */
.ranking__row + .ranking__row { border-top: 1px solid var(--hair); }
.ranking__btn { display: grid; grid-template-columns: 28px 24px 1fr auto; align-items: center; gap: 6px; width: 100%;
  border: 0; background: none; padding: 7px 4px; text-align: left; cursor: pointer; border-radius: var(--r-sm); }
/* Hover is neutral and the current unit is the only row tinted with the accent: sharing one colour made a
   row under the pointer look selected. */
.ranking__btn:hover { background: var(--hair); }
.ranking__row--current { scroll-margin-top: 12px; } /* the panel body's top padding, kept when scrolled to */
.ranking__row--current .ranking__btn { background: var(--accent-soft); }
.ranking__rank { color: var(--ink-2); font-variant-numeric: tabular-nums; font-size: 13px; }
.ranking__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking__dist { text-align: right; font-variant-numeric: tabular-nums; }
.ranking__dist b { display: block; font-weight: 600; }
.ranking__dist small { color: var(--ink-2); font-size: 11px; }

.about__body b { font-weight: 600; }

/* Phone: ranking becomes a bottom sheet, the map fills the screen. Phone rules only in here. */
@media (max-width: 720px) {
  .map { right: 0; }
  .hdr__sub { display: none; }
  /* Only when the control is there: two region names beside the language control do not fit a 390px header
     next to a full-size title. A one-region site keeps the header it has, byte for byte. */
  .hdr--regions { gap: 8px; padding: 0 10px; }
  .hdr--regions .hdr__brand { min-width: 0; }
  .hdr--regions .hdr__title { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hdr--regions .seg__btn { padding: 4px 8px; font-size: 12px; white-space: nowrap; }
  .panel { top: auto; left: 0; right: 0; width: auto; border-left: 0; border-top: 1px solid var(--hair);
    border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow); transition: height var(--t); }
  .panel--collapsed { height: 48px; }
  .panel--half { height: 45%; }
  .panel--full { height: calc(100% - 8px); }
  .panel__handle { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 48px;
    border: 0; background: none; cursor: pointer; }
  .panel__grip { width: 36px; height: 4px; border-radius: 2px; background: var(--hair-strong); }
  .panel--collapsed .panel__body { display: none; }
  /* The bottom stack on a phone, from the screen edge up: the collapsed sheet's 48px handle, then the
     Leaflet attribution, then the map controls. The attribution defaults to the very bottom, where it hides
     the grip and swallows the tap; lifting it clear of the handle costs the controls its height in turn
     (three lines at these widths), or it would cover the readout pill. Leaflet parks its control corners at
     z-index 1000, above the sheet, so the attribution is dropped to the map controls' layer as well: an open
     sheet has to cover it, not be sliced by it. */
  .leaflet-bottom { bottom: 48px; z-index: 800; }
  .mapctl { bottom: 116px; }
  .card { width: calc(100% - 24px); }
  /* The full-width card runs under Leaflet's zoom control, which stays where Leaflet puts it (top right of
     the map, 34px wide with its border, 10px of margin, 64px tall on a touch device): its left edge is 44px
     from the screen edge. The card sits 12px in and pads 16px, so its text already stops 28px from the edge;
     24px more leaves 8px of clearance. The card's top two lines are the ones the control reaches, so they
     wrap before it instead of under it (#34). */
  .card__headline, .card__rank { padding-right: 24px; }
}