/* Layout: the map stage is the whole viewport; the text block (title, search, readout) is an overlay at the top left.
   Only the real controls in the block take the pointer, everything else lets hover and drag through to the map. */

/* ---------- Overlay ---------- */
html[data-ui="a"] #stage { grid-column: 1 / -1; grid-row: 1 / -1; }
html[data-ui="a"] #panel {
  display: flex;
  flex-direction: column;
  align-self: start;
  overflow: visible;
  pointer-events: none;
  text-shadow: 0 0 3px var(--ground), 0 0 6px var(--ground), 0 0 12px var(--ground), 0 0 20px var(--ground);
}
html[data-ui="a"] #foot { pointer-events: none; text-shadow: 0 0 3px var(--ground), 0 0 6px var(--ground), 0 0 12px var(--ground); }
html[data-ui="a"] .flip,
html[data-ui="a"] #v-search { pointer-events: auto; }
/* room the text block takes, read by js/views.js when it fits a country */
html[data-ui="a"] { --fit-l: 250px; --fit-t: 0px; }

/* ---------- Text block ---------- */
html[data-ui] #readout { flex: none; }
html[data-ui="a"] .kicker { display: block; }
html[data-ui] #r-title {
  font-weight: var(--title-weight);
  font-size: clamp(21px, 1.95vw, 27px);
  line-height: 1.22;
  letter-spacing: var(--title-tracking);
  text-wrap: pretty;
}
html[data-ui] #r-title b { font-weight: var(--title-strong-weight); }
html[data-ui="a"] #r-title { margin-top: 2px; }

html[data-ui] .note { margin-top: 14px; }
html[data-ui] .note:empty { display: none; }

/* ---------- Readout layouts: ?ro=1 population first, 2 counterweight, 3 one sentence ----------
   All text is the pairing's sans (--font-read, --font-num). Figures are tabular and every number has a fixed-width slot
   (min-width, nowrap, one size step down for very long values) so nothing moves while the cursor changes them. */
.ro { display: none; margin: 20px 0 0; font-family: var(--font-read); font-weight: var(--ui-weight); color: var(--ink-soft); transition: opacity 0.3s ease; }
html[data-ro="1"] .ro1, html[data-ro="2"] .ro2, html[data-ro="3"] .ro3 { display: block; }
.ro p { margin: 0; }
.ro b { color: var(--ink); font-weight: var(--ratio-weight); }
.ro-ratio {
  font-family: var(--font-num);
  font-weight: var(--ratio-weight);
  letter-spacing: var(--ratio-tracking);
  font-variant-numeric: var(--num-variant);
  font-feature-settings: var(--num-feature);
  color: var(--ink);
  line-height: 1;
  box-shadow: inset 0 -5px 0 -2px var(--hl);
  white-space: nowrap;
}
#readout[data-state="idle"] .ro,
#readout[data-state="text"] .ro { opacity: 0; height: 0; min-height: 0; margin: 0; overflow: hidden; pointer-events: none; }

/* 1: the city's population is the hero */
.ro-hero {
  font-weight: var(--ratio-weight);
  font-size: clamp(52px, 4.7vw, 66px);
  line-height: 1;
  letter-spacing: var(--ratio-tracking);
  color: var(--ink);
  white-space: nowrap;
}
.ro-hero[data-len="l"] { font-size: clamp(44px, 4vw, 56px); }
.ro1-who { margin-top: 8px !important; font-size: 21px; line-height: 1.2; color: var(--ink); }
.ro1-land { margin-top: 22px !important; font-size: var(--read-size); line-height: 1.35; }
.ro1-land .swatch { margin-right: 8px; vertical-align: 0.05em; }
.ro1-ratio { margin-top: 12px !important; display: flex; align-items: baseline; gap: 14px; }
.ro1-ratio .ro-ratio { flex: none; min-width: 3.6ch; font-size: clamp(46px, 4.2vw, 58px); }
.ro1-rel { font-size: var(--read-size); line-height: 1.3; }
html[data-ro="1"] .ro1 { min-height: 250px; }

/* 2: two columns, the ratio between them */
.ro2 { grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); column-gap: 6px; align-items: start; }
html[data-ro="2"] .ro2 { display: grid; min-height: 150px; }
.ro2-col { min-width: 0; }
.ro2-h { font-size: var(--size-ui); font-weight: var(--ratio-weight); color: var(--ink); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ro2-h .swatch { margin-right: 7px; vertical-align: 0.05em; }
.ro2-pop { margin-top: 6px !important; font-size: 36px; font-weight: var(--ratio-weight); letter-spacing: var(--ratio-tracking); line-height: 1; color: var(--ink); white-space: nowrap; }
.ro2-u { margin-top: 3px !important; font-size: var(--size-ui); line-height: 1.2; }
.ro2-area { margin-top: 12px !important; white-space: nowrap; font-size: var(--size-ui); line-height: 1.1; }
.ro2-area b { font-size: 24px; letter-spacing: -0.005em; }
.ro2-area b[data-len="l"] { font-size: 19px; }
.ro2-mid { align-self: start; margin-top: 24px; text-align: center; }
.ro2-mid .ro-ratio { font-size: 34px; }
.ro2-mid .ro-ratio[data-len="l"] { font-size: 22px; }

/* 3: one sentence */
.ro3 { font-size: clamp(22px, 1.8vw, 25px); line-height: 1.3; letter-spacing: 0; color: var(--ink); }
html[data-ro="3"] .ro3 { min-height: 7.8em; }
.ro3 .swatch { margin-right: 0.3em; vertical-align: 0.05em; width: 0.4em; height: 0.4em; }
.ro3 b { color: var(--ink); }

/* search: a plain field, left aligned; the list drops under it */
html[data-ui] #v-search { width: min(300px, 100%); }
html[data-ui="a"] #v-search { margin-top: 22px; }
html[data-ui] #v-q { text-align: left; font-size: var(--size-ui); padding: 7px 0; text-shadow: none; }
html[data-ui] #v-list li { text-align: left; padding: 8px 10px; }

/* Flags: cap height, 4:3, sitting on the baseline; square corners, no frame. The title flag fades with the name (pulse in ui.js). */
.t-flag, .o-flag { display: inline-block; height: 0.72em; width: 0.96em; vertical-align: baseline; object-fit: fill; pointer-events: none; }
.t-fw { white-space: nowrap; }
.t-flag { margin-right: 0.32em; }
/* Alegreya's space is narrow and the f of 'of' overhangs it: the space before the flag gets as wide as the gap after it */
.t-of { word-spacing: 0.16em; }
.t-flag[hidden] { display: none; }
/* flags with a pale edge would dissolve into the page: a 1 px hairline drawn inside the image edge */
.t-flag.lt, .o-flag.lt { outline: 1px solid var(--line); outline-offset: -1px; }
.o-flag { margin-right: 0.55em; }

/* the switch inside the sentence */
.flip {
  font: inherit;
  font-family: var(--font-strong);
  font-weight: var(--title-strong-weight);
  letter-spacing: inherit;
  color: inherit;
  display: inline;
  padding: 0;
  text-align: left;
  text-decoration: underline dotted;
  text-decoration-color: var(--hl);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.25s ease;
}
.flip:hover { text-decoration-style: solid; }
.flip:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
.flip .chev { display: inline-block; width: 0.36em; height: 0.58em; margin-left: 0.22em; vertical-align: 0.02em; color: var(--ink-soft); }
.flip .chev svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; }
.t-phrase[hidden] { display: none; }

/* ---------- Globe / Country: a real two-button switch, top centre ---------- */
html[data-ui="a"] #views .toggle { gap: 0; }
html[data-ui="a"] #views .toggle button {
  font-family: var(--font-ui);
  font-size: var(--size-small);
  font-weight: var(--ui-weight);
  letter-spacing: var(--ui-tracking);
  text-transform: uppercase;
  padding: 9px 16px 8px;
  border: 0;
  border-radius: 0;
  color: var(--ink-faint);
  background: transparent;
  text-shadow: 0 0 4px var(--ground), 0 0 9px var(--ground);
  transition: color 0.2s ease, background-color 0.2s ease;
}
html[data-ui="a"] #views .toggle button:hover { color: var(--ink); background: var(--line); }
html[data-ui="a"] #views .toggle button[aria-pressed="true"] { color: var(--ground); background: var(--ink); text-shadow: none; }
html[data-ui="a"] #views .toggle button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ---------- Narrow screens ---------- */
@media (max-width: 860px) {
  /* the Globe / Country switch keeps the top line, the text block starts under it */
  html[data-ui] #panel { padding: 60px 16px 4px; }
  html[data-ui] #r-title { font-size: 20px; }
  html[data-ui="a"] { --fit-l: 0px; --fit-t: 290px; }
}

/* ---------- Tuning panel (?tune=1, js/tune.js): bottom right, collapsible ---------- */
#tune {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 30;
  width: 300px;
  max-height: 78vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  background: color-mix(in srgb, var(--ground) 92%, transparent);
}
#tune .tn-head {
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: left;
  padding: 9px 14px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
#tune .tn-body { overflow-y: auto; padding: 0 14px 12px; }
#tune.closed .tn-body { display: none; }
#tune .tn-group { margin: 12px 0 4px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
#tune .tn-row { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; align-items: baseline; margin: 5px 0 1px; color: var(--ink-soft); }
#tune .tn-row output { font-family: var(--font-num); color: var(--ink); }
#tune .tn-row input { grid-column: 1 / 3; width: 100%; margin: 2px 0 0; accent-color: var(--ink); }
#tune .tn-bar { display: flex; gap: 16px; margin-top: 14px; }
#tune .tn-bar button {
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-decoration: underline;
  cursor: pointer;
}

/* ---------- Presets: chips under the readout, same pattern as the eclipse globe (pill outline, closing cross on the active chip) ----------
   The rounded outline is an explicit owner exception for these chips only. */
.presets { margin-top: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; }
.pr-item {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ground) 78%, transparent);
  padding: 6px 14px;
  transition: border-color 0.2s ease;
}
.pr-item:hover, .pr-item:focus-within { border-color: var(--ink-faint); }
.pr-item:has(.pr-btn[aria-pressed="true"]) { border-color: var(--ink); }
.pr-item:has(.pr-btn:disabled) { opacity: 0.4; }
.pr-btn {
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font-family: var(--font-ui);
  font-size: var(--size-ui);
  font-weight: var(--ui-weight);
  letter-spacing: 0.03em;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink-soft);
  transition: color 0.2s ease;
}
.pr-btn:hover:not(:disabled) { color: var(--ink); }
.pr-btn[aria-pressed="true"] { color: var(--ink); }
.pr-btn:focus-visible { outline: none; color: var(--ink); }
.pr-btn:disabled { cursor: default; }
.pr-x {
  display: none;
  flex: none;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-ui);
  font-size: calc(var(--size-ui) + 2px);
  line-height: 1;
  color: var(--ink-faint);
  transition: color 0.2s ease;
}
.pr-btn[aria-pressed="true"] + .pr-x { display: block; }
.pr-x:hover, .pr-x:focus-visible { color: var(--ink); outline: none; }

/* the ranked list of the active preset takes the place of the numbers */
html[data-ui="a"] .pr-panel { pointer-events: auto; width: min(340px, 100%); }
.pr-panel { margin-top: 20px; }
.pr-panel[hidden] { display: none; }
.pr-cap { margin: 0; font-size: var(--size-ui); line-height: 1.4; color: var(--ink-soft); max-width: 32ch; }
.pr-rows {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  max-height: max(150px, calc(100vh - 560px));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.pr-row {
  width: 100%;
  display: grid;
  grid-template-columns: 10px 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 9px;
  padding: 5px 6px 5px 0;
  text-align: left;
  font-family: var(--font-ui);
  font-size: var(--size-ui);
  line-height: 1.25;
  color: var(--ink-soft);
}
.pr-row:hover, .pr-row[aria-current="true"] { color: var(--ink); background: color-mix(in srgb, var(--line) 70%, transparent); }
.pr-row:focus-visible { outline: 1px solid var(--ink); outline-offset: -1px; }
.pr-sw { width: 10px; height: 10px; display: block; }
.pr-row .o-flag { margin: 0; width: 16px; height: 12px; }
.pr-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-val { font-size: var(--size-ui); color: var(--ink); }

/* a preset replaces the numbers of the hover readout */
html[data-ui] #readout[data-state="preset"] .ro,
html[data-ui] #readout[data-state="preset"] .note { display: none !important; }

/* credit link: same quiet look as the text, underline on hover */
#foot a, .about-credit a { color: inherit; text-decoration: none; pointer-events: auto; }
#foot a:hover, .about-credit a:hover { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }

@media (max-width: 860px) {
  .pr-rows { max-height: 26vh; }
  .presets { margin-top: 14px; flex-direction: row; flex-wrap: wrap; gap: 6px 8px; }
  .pr-item { padding: 5px 12px; }
  .pr-btn { font-size: 15px; }
  .ro { margin-top: 12px; }
  .ro-hero { font-size: 44px; }
  .ro1-who { font-size: 18px; }
  .ro1-land { margin-top: 12px !important; }
  .ro1-ratio .ro-ratio { font-size: 38px; }
  html[data-ro="1"] .ro1 { min-height: 0; }
  html[data-ro="3"] .ro3 { min-height: 0; font-size: 19px; }
  html[data-ro="2"] .ro2 { min-height: 0; }
  .ro2-pop { font-size: 30px; }
}
#foot .credit { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; }
#foot .credit-name { font-family: var(--font-ui); font-size: 17px; font-weight: 600; color: var(--ink); }
#foot .credit-year { margin-left: -10px; font-size: var(--size-small); color: var(--ink-soft); }
#foot .credit-site { font-size: 14px; color: var(--ink-soft); text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; }
#foot .credit-site:hover { color: var(--ink); text-decoration-thickness: 2px; }