/* 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;
  /* The height of the closed phone sheet, measured and written by js/ranking.js because it depends on what
     the card's summary row wraps to. Only the phone rules read it; the zero is what the page looks like
     before the sheet has been measured, never a layout figure. */
  --sheet-h: 0px;
  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; }
/* The card's summary row belongs to the phone sheet's handle (see the media query). On desktop the card
   itself says all of it at the top of the map, so the row is not painted at all. */
.card-summary { display: none; }

/* 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); }
/* The islands toggle: a secondary reading, so it wears the small segmented look with its label beside it
   rather than the scenario switch's full width. It sits under the scenario hint, not between the switch and
   its hint, so the hint stays attached to the buttons it explains. */
.card__islands { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.card__islands-label { 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); }
  /* The closed sheet is exactly its handle, whatever the summary row inside it wraps to; js/ranking.js
     measures that and writes --sheet-h. A missing variable leaves the height at auto, which is the same
     figure without the transition, so the sheet is never wrong, only unanimated. */
  .panel--collapsed { height: var(--sheet-h); }
  .panel--half { height: 45%; }
  .panel--full { height: calc(100% - 8px); }
  /* The handle is the sheet's face: the grip, then the card's summary row. The button is the whole face, so
     the tap target is as wide as the screen and as tall as the summary needs. It never shrinks: the panel's
     height is derived from it, and a handle that gave way to a stale height would keep it stale. */
  .panel__handle { display: flex; flex: none; flex-direction: column; align-items: stretch; gap: 6px; width: 100%;
    padding: 8px 14px 10px; border: 0; background: none; cursor: pointer; text-align: left; }
  .panel__grip { align-self: center; width: 36px; height: 4px; border-radius: 2px; background: var(--hair-strong); }
  /* The summary row, the card's first two lines said in one: the unit, its distance in the active scenario,
     its rank. With it on the handle the word "Ranking" would only repeat what the body says, so it goes. */
  .card-summary { display: block; }
  .card-summary[hidden] { display: none; }
  .card-summary:not([hidden]) ~ .panel__handle-text { display: none; }
  .card-summary__line { display: flex; align-items: baseline; gap: 8px; }
  .card-summary__name { flex: 1; min-width: 0; font: 600 15px/1.3 var(--serif); }
  .card-summary__none { display: block; font: 600 15px/1.3 var(--serif); }
  .card-summary__dist { flex: none; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .card-summary__rank { display: block; font-size: 12px; color: var(--ink-2); }
  .panel--collapsed .panel__body { display: none; }
  /* The card is moved into the sheet body here (js/app.js), so it stops being a box over the map and becomes
     the body's first section, scrolling with the ranking under it. Its headline and rank line stay behind:
     the summary row on the handle says both, and says them whether the sheet is open or shut. */
  .panel .card { position: static; width: auto; padding: 0 0 12px; margin: 0 0 12px; background: none;
    border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--hair); }
  .panel .card__headline, .panel .card__rank { display: none; }
  /* The bottom stack on a phone, from the screen edge up: the sheet at its measured height, then one column
     holding the base map switch, the legend, the readout pill and the Leaflet attribution, which js/app.js
     moves in here. Stacking the attribution rather than lifting the controls over it is what takes its
     rendered height out of the layout: it wraps to as many lines as the width needs and the column grows
     with it (#32). Leaflet parks its control corners at z-index 1000, above the sheet, so all four corners
     drop to this column's layer: an open sheet has to cover the map's own furniture, not be sliced by it.
     The zoom control is the corner that matters, sitting where the full sheet's summary row lands. */
  .leaflet-top, .leaflet-bottom { z-index: 800; }
  .mapctl { right: 12px; bottom: calc(var(--sheet-h) + 8px); }
  /* Out of .leaflet-container the attribution loses Leaflet's own background, which was white in both
     schemes anyway; here it wears the skin the legend and the readout wear. */
  .mapctl .leaflet-control-attribution { background: var(--panel); color: var(--ink-2); font-size: 11px;
    padding: 4px 8px; border-radius: var(--r-md); box-shadow: var(--shadow); }
}