/* Components. Everything here composes from tokens.css and nothing else. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------- layout */

#app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.screen {
  flex: 1;
  /* The top inset is 0 in a browser and inside Telegram, which draws its own
     header above us. It is the status bar height in the Android shell, where
     the window is edge-to-edge — without it the first card sits under the
     clock. */
  padding: calc(8px + env(safe-area-inset-top)) var(--pad) calc(var(--nav-h) + 28px);
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  animation: rise var(--slow) var(--ease) both;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

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

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.spread {
  display: flex;
  gap: 10px;
}

.grow {
  flex: 1;
  min-width: 0;
}

/* ------------------------------------------------------------------ type */

h1,
h2,
h3 {
  margin: 0;
  letter-spacing: -0.02em;
  font-weight: 800;
}

h1 {
  font-size: 34px;
  line-height: 41px;
  letter-spacing: -0.4px;
}
h2 {
  font-size: 20px;
  line-height: 1.2;
}
h3 {
  font-size: 16px;
  font-weight: 700;
}

p {
  margin: 0;
}

.muted {
  color: var(--ink-3);
}
.small {
  font-size: 13px;
  line-height: 1.35;
}
.tiny {
  font-size: 11.5px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}
.eyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  font-weight: 800;
}

.page-head {
  padding: 14px 2px 14px;
}

.track-title {
  font-size: clamp(22px, 6.4vw, 30px);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.page-head h1 {
  margin-bottom: 2px;
}

/* ----------------------------------------------------------------- cards */

/* A hairline, because the fill alone is not an edge.
 *
 * `--sh-1` is `none` on purpose — a grey panel on a white page needs no lift —
 * but the panel is #f6f6f8 on #ffffff, which is 1.03:1. On a phone the radius
 * and the grouping carry it. On a wide screen, on the longest form in the app,
 * fifteen questions of unselected chips came out as one undifferentiated white
 * sheet with no card visible anywhere in it.
 *
 * `--line` is the token the design already uses for every other edge: the chips,
 * the inputs, the top of the tab bar. So the card gets the same one rather than
 * a shadow, which would have been a second idea about depth in a palette that
 * has deliberately abandoned the first. `.card.quiet` keeps its own softer
 * version; two classes beat one. */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  padding: var(--pad);
}

.card.tight {
  padding: 12px 14px;
}
.card.flush {
  padding: 0;
  overflow: hidden;
}

/* The one card that carries the product's headline number.
 *
 * Two soft circles over one diagonal gradient, both drawn in CSS rather than
 * shipped as an image: they scale, they theme, and they cost no request. The
 * earlier version layered four radial gradients in cyan and pink; the design
 * replaces that with a single violet ramp, which stops the card competing with
 * the status colours that sit next to it on the same screen. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--ink-inverse);
  background: var(--gradient);
  box-shadow: var(--sh-accent);
}

/* z-index 0, not -1: the card paints its own gradient, and a negative index
   inside `isolation: isolate` puts these behind it, which renders them
   invisible rather than subtle. */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.hero::before {
  width: 176px;
  height: 176px;
  top: -54px;
  right: -40px;
  background: rgba(255, 255, 255, 0.1);
  filter: blur(21px);
}

.hero::after {
  width: 128px;
  height: 128px;
  bottom: -46px;
  left: -28px;
  background: rgba(165, 180, 252, 0.2);
  filter: blur(14px);
}

.hero > * {
  position: relative;
  z-index: 1;
}

.hero .eyebrow {
  color: rgba(224, 231, 255, 0.9);
}

/* The eyebrow on the hero is a tag rather than bare text: on a gradient,
   letter-spaced caps at 11px lose their edge without a plate behind them. */
.hero-tag {
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.8);
}

.hero-step svg {
  width: 14px;
  height: 14px;
}

.hero-figure {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero-num {
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.025em;
}

.hero-unit {
  font-size: 14px;
  font-weight: 700;
  opacity: 0.9;
}

.hero-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}

.hero-sub {
  color: rgba(224, 231, 255, 0.95);
  font-size: 12px;
  line-height: 1.34;
}

/* Owner and date. The hairline is what separates the facts you entered from
   the number computed above them. */
.hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* ------------------------------------------------------------ progress ring */

.ring {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  transform: rotate(-90deg);
}
.ring circle {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
}
.ring .track {
  stroke: rgba(255, 255, 255, 0.25);
}
.ring .value {
  stroke: #fff;
  transition: stroke-dashoffset var(--slow) var(--ease);
}
.ring-wrap {
  position: relative;
  display: grid;
  place-items: center;
}
.ring-label {
  position: absolute;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- chips */

/* White with a hairline, because the page is white and the panels are grey:
   a chip filled with either one disappears into one of the two surfaces it
   has to work on. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  /* Was `nowrap`, which turned one over-long label into a page that scrolled
     sideways: a 69-character English badge came out 398px wide inside a 300px
     card and widened the whole document. The copy is short again, and this is
     the guard that stops the next one doing it.

     In a `flex-wrap: wrap` row a chip that fits is moved to the next line
     before the browser will shrink it, so short badges — the ordinary case —
     still never break mid-word. Only a chip too wide for a line of its own
     wraps, which is the case that used to break the page instead. */
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* The tinted variants carry their own ink: the semantic colours are picked to
   mark a dot or a ring, and none of them reads as 12px text on its own tint. */
.chip.done {
  background: var(--done-soft);
  border-color: transparent;
  color: var(--done-ink);
}
.chip.wait {
  background: var(--wait-soft);
  border-color: transparent;
  color: var(--wait-ink);
}
.chip.stop {
  background: var(--stop-soft);
  border-color: transparent;
  color: var(--stop-ink);
}
.chip.info {
  background: var(--info-soft);
  border-color: transparent;
  color: var(--info-ink);
}
.chip.accent {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--ink);
  font-weight: 500;
}
/* Solid, for the one thing on a screen that is happening now. */
.chip.now {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-ink);
}
/* For a gradient surface only: white on translucent white, which is
   invisible on any light surface. On a card or a sheet, use the default. */
.chip.ghost {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
  padding: 4px 12px;
  gap: 6px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.chip.dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* A chip you can press: the quick-date row, where the options are short and
   the target still has to be a thumb rather than a word. */
.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.chip-btn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* --------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 16px;
  background: var(--surface-sunken);
  color: var(--ink);
  transition: transform var(--fast) var(--ease), filter var(--fast) var(--ease);
}

.btn:active {
  transform: scale(0.975);
}

.btn.primary {
  background: var(--gradient);
  color: var(--accent-ink);
  box-shadow: var(--sh-accent);
}

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

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

.btn.block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.45;
  pointer-events: none;
}

.btn.sm {
  height: 38px;
  font-size: 14px;
  padding: 0 14px;
}

/* A round floating control, like the reference map buttons. */
.fab {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  box-shadow: var(--sh-2);
}

/* ------------------------------------------------------- segmented control */

.city-brief-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
  gap: 16px;
  align-items: start;
}
.city-brief-grid > * { min-width: 0; }
.city-brief-more > summary {
  cursor: pointer;
  color: var(--ink-3);
  padding: 10px 0;
  font-size: 14px;
}
.city-brief-more[open] > summary { color: var(--ink); }

.seg {
  display: flex;
  padding: 4px;
  gap: 4px;
  background: var(--surface-sunken);
  border-radius: var(--r-pill);
}

.seg button {
  flex: 1;
  height: 38px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 650;
  color: var(--ink-3);
  transition: all var(--fast) var(--ease);
}

.seg button[aria-selected="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--sh-1);
}

/* More options than fit across a phone. The buttons keep their own width and
   the row scrolls, rather than every label being squeezed to three letters. */
.seg.scroll {
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.seg.scroll::-webkit-scrollbar {
  display: none;
}

.seg.scroll button {
  flex: 0 0 auto;
  padding: 0 14px;
  scroll-snap-align: start;
}

/* Keep all six plan sections visible, including longer translated labels. */
.plan-screen > .seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-radius: var(--r-lg);
}

.plan-screen > .seg button {
  height: auto;
  min-height: 38px;
  min-width: 0;
  padding: 9px 8px;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 360px) {
  .plan-screen > .seg {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------------ rows */

.rows {
  display: flex;
  flex-direction: column;
}

.rowitem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: var(--surface);
  text-align: left;
  width: 100%;
}

.rowitem + .rowitem {
  border-top: 1px solid var(--line);
}

.rowitem .title {
  font-weight: 650;
  font-size: 15px;
}

.rowitem .sub {
  font-size: 12.5px;
  color: var(--ink-3);
}

.rowitem .metric {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-size: 17px;
  background: var(--surface-sunken);
  flex: 0 0 auto;
}

.avatar.ring-accent {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
}

/* -------------------------------------------------------------- two-up stat */

.versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.versus .side {
  text-align: center;
}

.versus .big {
  font-size: 32px;
  line-height: 1.05;
}

/* "Nothing verified here". Deliberately not a dash and not a zero: a dash
   reads as "nothing to pay" in a cost row and as "no wait" in a time row, and
   both of those are claims nobody has checked. It is set in the muted ink so it
   reads as an absence rather than as a value. */
.absent {
  font-weight: 600;
  color: var(--ink-3);
}

.versus .absent {
  font-size: 16px;
  padding: 8px 0;
}

.versus .vs {
  width: 1px;
  align-self: stretch;
  background: var(--line);
}

.deadline-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 19px;
  line-height: 1;
  color: var(--ink-3);
  background: var(--surface-sunken);
  flex: 0 0 auto;
}

.deadline-title {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  text-wrap: pretty;
}

/* --------------------------------------------------------- official wording */

/* The authority's own sentence, set apart from ours. Not decoration: it is what
   somebody holds up at a counter, and what lets a reader check our summary
   against the source rather than take it on trust. Left rule rather than
   quotation marks, because the text is often Spanish inside a Russian
   paragraph and marks would read as scare quotes. */
.official {
  margin: 0;
  padding: 8px 0 8px 12px;
  border-left: 2px solid var(--accent);
  display: grid;
  gap: 3px;
}

.official-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.official-text {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.official-ref {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink-3);
}

/* ------------------------------------------------------------- save state */

/* Auto-saving is right and invisible, which is a bad combination on a form
   fifteen questions long: silence reads as "nothing is being kept". The line
   appears when a write lands and fades, rather than sitting there claiming a
   state it is not watching. */
.save-state {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  height: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  color: var(--done-ink, var(--accent));
  opacity: 0;
  transition: opacity var(--fast) var(--ease);
}

.save-state.is-on {
  height: auto;
  padding: 6px 2px;
  opacity: 1;
}

/* ------------------------------------------------------------ country tiles */

/* The start screen's main element: countries as tiles rather than a list.
   `auto-fit` with a 150px floor gives two columns on a 375px phone and four on
   a wide screen, from one rule and without a breakpoint. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.tile {
  display: grid;
  justify-items: start;
  gap: 2px;
  padding: 14px;
  min-height: 118px;
  align-content: center;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  color: var(--ink);
  transition: border-color var(--fast) var(--ease), background var(--fast) var(--ease);
}

/* The one country the product holds regulation for. A border rather than a
   fill: the tile is a place, not a selected state, and filling it with the
   accent would make it look chosen by the person rather than known to us. */
.tile-known {
  border-color: var(--accent);
}

.tile:active {
  background: var(--surface-sunken);
}

/* A flag on a phone, the ISO code on Windows, which has no flag glyphs at all.
   Muted and small so the second outcome reads as a label rather than a heading
   competing with the country's name — an emoji ignores `color`, so the flag
   keeps its own. */
.tile-flag {
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0.5px;
  font-weight: 600;
  color: var(--ink-3);
  margin-bottom: 6px;
}

.tile-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
}

.tile-note {
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* -------------------------------------------------------- comparison table */
.life-climate-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.life-climate-table caption {
  text-align: left;
  margin-bottom: 12px;
}
.life-climate-table th,
.life-climate-table td {
  padding: 9px 4px;
  text-align: right;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.life-climate-table th:first-child {
  text-align: left;
  width: 24%;
}
.life-climate-table thead th {
  vertical-align: bottom;
  color: var(--ink-3);
  font-weight: 600;
}

/* Up to three columns, and the grid is told how many there are rather than
   guessing: `auto-fit` collapsed two places into one wide column, which put two
   different cities' rent on what looked like one line. */
.compare-row {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 8px;
  align-items: start;
}

.compare-cell {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px;
  border-radius: var(--r-sm, 10px);
  background: var(--surface-sunken);
  /* A long city name and a long figure both have to wrap inside a third of a
     360px screen, which is 104px of usable width. */
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ queue meter */

.meter {
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--surface-sunken);
  overflow: hidden;
  display: flex;
}

.meter span {
  display: block;
  height: 100%;
}
.meter .ahead {
  background: var(--line-strong);
}
.meter .you {
  background: var(--gradient);
  min-width: 6px;
}
.meter .behind {
  background: var(--accent-soft);
}

/* ------------------------------------------------------------- timeline */

/* The rail runs *between* the markers rather than behind them.
 *
 * Behind them it is one line the dots sit on top of, and a dot can only ever
 * be a dot. Between them each segment belongs to the step above it, so a
 * finished step draws its own segment in the accent and the road colours
 * itself in as the person walks it — which is the whole point of the screen.
 */

.track-list {
  display: flex;
  flex-direction: column;
}

.node {
  display: flex;
  gap: 16px;
  min-height: 64px;
  width: 100%;
  text-align: left;
  align-items: stretch;
}

.node-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 24px;
  flex-shrink: 0;
}

.node-mark {
  width: 24px;
  height: 24px;
  box-sizing: border-box;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  border: 2px solid var(--line);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.node-mark svg {
  width: 14px;
  height: 14px;
}

.node.done .node-mark,
.node.current .node-mark {
  border-color: var(--accent);
}

.node.done .node-mark {
  background: var(--accent);
  color: var(--accent-ink);
}

/* A ring with a core: the step you are standing on is the only one drawn as
   an open shape, so it reads as in progress rather than finished. */
.node.current .node-mark::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--accent);
}

.node.branch .node-mark,
.node.attention .node-mark {
  background: var(--wait-soft);
  border-color: var(--wait);
  color: var(--wait-ink);
}

.node-line {
  width: 2px;
  flex-grow: 1;
  margin: 6px 0;
  background: var(--line);
}

/* The segment belongs to the step above it. */
.node.done .node-line {
  background: var(--accent);
}

.node-body {
  flex-grow: 1;
  min-width: 0;
  padding: 2px 0 20px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.node:last-child .node-body {
  padding-bottom: 0;
}

.node-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.node .label {
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  text-wrap: pretty;
}

.node.pending .label,
.node.skipped .label {
  font-weight: 500;
  color: var(--ink-2);
}

.node.current .label {
  color: var(--accent);
}

.node .meta {
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: var(--ink-3);
}

/* The one state that asks the person to do something today. */
.node.attention .meta {
  font-weight: 600;
  color: var(--wait-ink);
}

/* ------------------------------------------------------------ bottom nav */

/* A flat bar on a white page, and a raised action in the middle of it.
 *
 * The floating pill this replaced belonged to a design with a grey canvas,
 * where a white bar needed lifting off the page to be seen. On white it has
 * nothing to lift off, so the design draws a hairline instead — and spends
 * the elevation on the one control that does something rather than on the
 * five that go somewhere.
 */
.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.nav button {
  flex: 1;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 4px 0;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  transition: color var(--fast) var(--ease);
}

.nav button[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
}

.nav svg {
  width: 24px;
  height: 24px;
}

/* The active mark. Colour was the only thing separating the current tab from
   the other four, and about one man in twelve cannot make that separation. The
   mark is 2px of accent above the icon, present for one tab and transparent
   for the rest — so the row keeps its rhythm and nothing shifts when the
   section changes. */
.nav .nav-mark {
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: transparent;
  margin-bottom: 2px;
}

.nav button[aria-current="page"] .nav-mark {
  background: currentColor;
}

/* ---------------------------------------------------------------- sheet */

/* Lighter than it was, and slate rather than near-black.
 *
 * The design dims to 20% and leaves the timeline underneath readable, which
 * is the point: the sheet explains a stage you are still looking at. At 42%
 * the screen behind it went dark enough to read as dismissed. */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(15, 23, 42, 0.2);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: fade var(--fast) var(--ease) both;
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

/* The shadow is thrown upward, which is the whole trick: a sheet rising from
   the bottom edge has nothing below it to cast onto, so a downward shadow —
   what `--sh-3` gives — lands outside the viewport and the sheet reads as
   pasted on. */
.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 51;
  max-height: 88vh;
  overflow-y: auto;
  background: var(--surface);
  border-top: 1px solid color-mix(in srgb, var(--surface) 60%, transparent);
  border-radius: 36px 36px 0 0;
  padding: 10px var(--pad) calc(24px + env(safe-area-inset-bottom));
  box-shadow:
    0 -2px 9px -1px rgba(0, 0, 0, 0.04),
    0 -10px 35px -5px rgba(15, 23, 42, 0.12);
  animation: slide var(--slow) var(--ease) both;
}

@keyframes slide {
  from {
    transform: translateY(14%);
    opacity: 0.6;
  }
}

.grab {
  width: 48px;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  margin: 2px auto 20px;
}

/* ------------------------------------------------------------- welcome */

.welcome {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: calc(100dvh - var(--nav-h) - 60px);
  padding-top: 10px;
}

.welcome-hero {
  flex: 1;
  justify-content: flex-end;
  min-height: 300px;
}

.welcome-title {
  font-size: clamp(30px, 8.5vw, 40px);
  line-height: 1.04;
  text-wrap: balance;
}

/* --------------------------------------------------------------- inputs */

.field {
  display: grid;
  gap: 6px;
}

.field > label {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink-3);
}

.input {
  height: 50px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  width: 100%;
}

.input:focus {
  border-color: var(--accent);
  outline: none;
}

/* A grid of selectable cards — the onboarding wizard's whole vocabulary. */
.choices {
  display: grid;
  gap: 10px;
}

.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1.5px solid transparent;
  box-shadow: var(--sh-1);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.choice:active {
  transform: scale(0.99);
}

.choice[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.choice .title {
  font-weight: 650;
  font-size: 15px;
}

.choice .sub {
  font-size: 12.5px;
  color: var(--ink-3);
}

.switch {
  width: 50px;
  height: 30px;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  position: relative;
  flex: 0 0 auto;
  transition: background var(--fast) var(--ease);
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--sh-1);
  transition: transform var(--fast) var(--ease);
}

.switch[aria-checked="true"] {
  background: var(--accent);
}

.switch[aria-checked="true"]::after {
  transform: translateX(20px);
}

/* --------------------------------------------------------------- states */

.empty {
  text-align: center;
  padding: 36px 20px;
  color: var(--ink-3);
}

.empty .glyph {
  font-size: 34px;
  margin-bottom: 8px;
}

.skeleton {
  border-radius: var(--r-md);
  background: linear-gradient(
    90deg,
    var(--surface-sunken) 25%,
    var(--surface-2) 37%,
    var(--surface-sunken) 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.3s linear infinite;
}

@keyframes shimmer {
  to {
    background-position: -135% 0;
  }
}

/* Dark in both themes, deliberately.
 *
 * Built on `var(--ink)` over `var(--surface)` it inverted with the theme: a
 * white toast in dark mode, which reads as a piece of the page rather than a
 * message laid over it. The design draws one object, and an object does not
 * change colour when the room does. */
/* The design's confirmation card: accent, not near-black, and wide enough to
   carry a sentence rather than a word. It sits above the bar rather than on
   it, because the bar now holds the button that produces it. */
.toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(var(--nav-h) + 24px);
  z-index: 60;
  max-width: 528px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  box-shadow: var(--sh-3);
  animation: rise var(--fast) var(--ease) both;
}

/* The closing note inside a sheet, as a bordered plate rather than loose text
 * under the fold.
 *
 * The design makes this a card, and it is right to: on a stage screen the
 * small print is the product's main honesty claim — that a measured figure is
 * not a promise, that the authority publishes no deadline, that this step
 * needs no new documents. Set as bare grey text it reads as boilerplate
 * somebody forgot to delete. */
.notice {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-3);
}

/* The named bases for staying longer. A list rather than cards: twelve permits
   in cards would outweigh the verified answers above them, and what the reader
   needs here is to recognise one of the names, not to study it. */
.grounds {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.grounds li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.ground-name,
.rule-basis {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
}

/* Two official answers that do not agree. Warm rather than red: a disagreement
   between a treaty and a ministry is not an error state, it is the honest
   answer, and colouring it like a failure would push the reader to discount
   one side — which is the choosing this rendering exists to avoid. */
.disputed {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--wait-soft);
  border-left: 3px solid var(--wait);
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-2);
}

/* An action inside a sentence. A full button would outweigh the sentence it
 * sits in, and plain underlined text would not be reachable by keyboard — this
 * is a real <button> wearing the paragraph's own type. */
.linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* A card that already sits on a raised surface. A drop shadow inside a sheet
 * reads as a second sheet, so the design gives these a hairline instead. */
.card.quiet {
  box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  border-radius: var(--r-md);
}

/* The line that has to be on every screen showing a requirement or a
 * statistic, and that must not be hidden in a settings page. */
.disclaimer {
  padding: 14px 4px 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-3);
  text-align: center;
}

/* A recovery code. Monospace so an l and a 1 are distinguishable when
   somebody copies it onto paper, and breakable so 43 characters fit a phone
   without a horizontal scrollbar. */
.code {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  word-break: break-all;
  user-select: all;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface-sunken);
  color: var(--ink);
}

/* Researched editorial guides share a wider layout. */
.screen.country-screen, .screen.city-screen { max-width: 1080px; }
.country-head { padding: 16px 0 22px; border-bottom: 1px solid var(--line); }
.country-head > .btn { align-self: flex-start; }
.country-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.country-title-row h1 { margin: 0; }
.country-hero { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; }
.country-hero-copy { min-width: 0; }
.country-hero-copy > p { margin: 0; }
.country-summary { gap: 14px; }
.country-summary > p { margin: 0; font-size: 16px; line-height: 1.6; }
.country-summary-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.country-summary-metrics > div { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.country-summary-metrics dt { font-size: 13px; color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere; }
.country-summary-metrics dd { order: -1; margin: 0; font-size: 28px; font-weight: 750; line-height: 1.2; color: var(--accent-strong); }
.country-summary-closing { padding-left: 12px; border-left: 3px solid var(--accent-soft); }
.country-summary .country-source { font-size: 12px; }
@media (max-width: 380px) {
  .country-summary-metrics { grid-template-columns: minmax(0, 1fr); }
}
.country-map { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.country-map-svg { display: block; width: 100%; height: auto; overflow: hidden; margin: 6px 0; }
.country-map-svg path { stroke: var(--surface-2); stroke-width: 1.2; stroke-linejoin: round; fill-rule: evenodd; }
.country-map-land { fill: var(--line); }
.country-map-neighbour { fill: var(--line-strong); }
.country-map-selected { fill: var(--accent); }
.country-map-svg .country-map-selected { stroke: var(--accent-strong); stroke-width: 1.5; }
.country-map-label { font: 600 16px var(--font); fill: var(--ink-2); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.country-map-label.selected { fill: var(--accent-strong); stroke: var(--accent-soft); stroke-width: 4px; font-weight: 750; }
.country-map-inset rect { fill: var(--surface-2); stroke: var(--line); }
.country-map-inset path { stroke-width: 0.2; }
.country-map-locator { fill: none; stroke: var(--accent-strong); stroke-width: 1.2; }
.country-map-borders { margin: 6px 0; color: var(--ink-2); }
.country-map-source summary { cursor: pointer; }
.country-head > p { max-width: 760px; margin: 0; }
.country-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 4px 0; }
.country-facts div { padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); }
.country-facts dt { font-size: 12px; color: var(--ink-3); }
.country-facts dd { margin: 4px 0 0; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.country-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 28px; align-items: start; }
.country-topics { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 6px; }
.topic-navigation-slot { min-width: 0; width: 100%; flex-shrink: 0; }
/* The filled rise transform would make fixed children follow the article. */
.screen.topic-navigation-screen { animation: none; }
.topic-page-content { min-width: 0; }
.topic-page-content > .country-layout { display: block; }
.topic-navigation-slot > .country-topics { background: var(--bg); z-index: 20; }
.topic-navigation-slot > .topic-navigation-pinned { position: fixed; top: var(--topic-top, 16px); left: var(--topic-left); width: var(--topic-width); }
@media (min-width: 701px) {
  .screen.topic-navigation-screen {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
    gap: 32px;
    max-width: 1440px;
  }
  .topic-navigation-slot > .country-topics {
    max-height: var(--topic-available-height, calc(100dvh - var(--nav-h) - 40px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .topic-navigation-slot > .country-topics > .country-topic { flex-shrink: 0; font-size: 20px; line-height: 1.4; padding: 16px; }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .screen.topic-navigation-screen { grid-template-columns: 210px minmax(0, 1fr); gap: 24px; }
  .topic-navigation-screen .country-hero { grid-template-columns: minmax(0, 1fr); }
  .topic-navigation-screen .country-map { max-width: 300px; }
}
.country-topic { padding: 13px 14px; border-radius: var(--r-md); text-align: left; color: var(--ink-2); font-weight: 600; }
.country-topic.active { background: var(--accent-soft); color: var(--accent-strong); }
.country-content, .country-panel { min-width: 0; }
.country-panel, [data-country-article], [data-country-budget-guide] { scroll-margin-top: 80px; }
.country-panel[hidden] { display: none; }
/* The introduction belongs to Overview, not above every selected topic.
 * Keep the place name/actions and the shared Asuncion area filter available. */
.screen[data-active-topic]:not([data-active-topic="overview"]) .country-head > :not(button):not(.country-title-row):not(.country-hero):not([data-topic-shared]),
.screen[data-active-topic]:not([data-active-topic="overview"]) .country-hero > :not(.country-hero-copy),
.screen[data-active-topic]:not([data-active-topic="overview"]) .country-hero-copy > :not(.country-title-row) { display: none; }
.screen[data-active-topic]:not([data-active-topic="overview"]) .country-hero { grid-template-columns: minmax(0, 1fr); }
.country-panel > h2 { font-size: 24px; margin: 4px 0; }
.country-panel h3, .country-panel h4 { font-size: 17px; margin: 0; }
.country-panel p { margin: 0; }
.country-highlights, .country-tiles, .country-scenarios, .guide-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.country-highlights ul { margin: 0; padding-left: 20px; font-size: 14px; }
.country-highlights li + li { margin-top: 8px; }
.country-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); text-align: left; }
.country-tile > span { color: var(--ink-2); }
.country-tile .country-tile-open { margin-top: auto; color: var(--accent-strong); }
.country-city-links { display: flex; flex-wrap: wrap; gap: 8px; }
.country-source, .country-rule-source { color: var(--ink-2); font-size: 13px; }
.country-source summary, .country-rule-source summary, .country-directory summary { cursor: pointer; }
.country-source-entry { padding: 12px 0; gap: 6px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.country-source-entry a { font-size: 13px; }
.country-directory { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); padding: 16px; }
.country-directory > summary { font-weight: 600; }
.country-directory > .stack { margin-top: 16px; }
.country-more { display: none; }
@media (max-width: 700px) {
  .country-hero { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .country-map { width: 100%; max-width: 320px; justify-self: center; }
  .country-layout { display: flex; flex-direction: column; gap: 20px; }
  .country-content { width: 100%; }
  .country-topics { position: sticky; top: 8px; z-index: 4; width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; border-radius: var(--r-lg); background: var(--surface-sunken); padding: 4px; }
  .topic-navigation-slot > .country-topics { background: var(--surface-sunken); top: var(--topic-top, calc(8px + env(safe-area-inset-top))); }
  .country-topic { padding: 12px 3px; text-align: center; font-size: 12px; overflow-wrap: anywhere; }
  .country-desktop-topic { display: none; }
  .country-more { display: block; min-width: 0; border-radius: var(--r-md); }
  .country-more > summary { padding: 12px 3px; text-align: center; font-size: 12px; font-weight: 600; cursor: pointer; list-style: none; }
  .country-more > summary::-webkit-details-marker { display: none; }
  .country-more.active { background: var(--accent-soft); color: var(--accent-strong); }
  .country-more-options { position: absolute; top: calc(100% + 6px); right: 0; width: min(260px, 100%); z-index: 3; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--shadow); }
  .country-more-options .country-topic { display: block; width: 100%; padding: 12px; text-align: left; font-size: 14px; }
  .country-more-options { max-height: calc(100dvh - 230px); overflow-y: auto; overscroll-behavior: contain; }
  .country-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .country-highlights, .country-scenarios, .guide-card-grid { grid-template-columns: minmax(0, 1fr); }
  .country-tile { padding: 14px; }
  .country-title-row { gap: 12px; }
}
@media (max-width: 360px) {
  .country-tiles { grid-template-columns: minmax(0, 1fr); }
}

/* Larger copy and touch targets for the city's practical guide. */
.city-screen .small, .city-screen .notice { font-size: 16px; line-height: 1.65; }
.city-screen .country-panel h3 { font-size: 20px; }
.city-screen .btn, .city-screen .country-topic { min-height: 48px; }
.city-screen .country-tile strong { font-size: 18px; }
.city-screen .country-panel { scroll-margin-top: 110px; }
.city-screen [data-resource-source] { font-size: 15px; line-height: 1.6; }
.city-screen .city-head-actions { flex-wrap: wrap; }
.city-screen .city-summary-tiles .country-tile { gap: 10px; }
.city-screen .city-tile-icon { color: var(--accent-strong); }
.city-screen .country-tile .city-tile-value { font-size: 25px; font-weight: 750; line-height: 1.3; color: var(--ink); }
.city-screen .city-minute-title { color: var(--ink-2); }
.city-screen .city-details { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 14px 18px; overflow-wrap: anywhere; }
.city-screen .city-details > summary { cursor: pointer; font-size: 17px; font-weight: 600; min-height: 44px; padding: 10px 0; }
.city-screen .city-details > .stack { margin-top: 14px; }
.city-screen .city-school-grid, .city-screen .city-rental-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.city-screen .city-school-grid > .card, .city-screen .city-rental-grid > .card { min-width: 0; }
.city-screen .city-school-profile { min-height: 0; }
.city-screen .city-condition { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; white-space: normal; line-height: 1.5; border-radius: 10px; }
.city-screen .city-condition svg { flex-shrink: 0; }
.city-places-map { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); padding: 18px; }
.resource-map > summary { width: fit-content; }
.resource-map[open] > summary { margin-bottom: 12px; }
.resource-map .city-map-layout { grid-template-columns: minmax(0, 1fr); }
.resource-map .city-map-side { order: -1; }
.resource-map .city-map-list { max-height: none; }
.resource-map .city-map-canvas { height: 300px; }
.city-health-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.city-health-grid > .card { min-width: 0; }
.city-health-fields { display: grid; gap: 12px; margin: 0; }
.city-health-fields dt { display: flex; gap: 8px; align-items: center; font-size: 15px; color: var(--ink-3); }
.city-health-fields dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.colonias-price { font-size: 32px; line-height: 1.2; overflow-wrap: anywhere; }
.colonias-price-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.colonias-price-grid div { padding: 14px; border-radius: var(--r-md); background: var(--surface-2); }
.colonias-price-grid dt { font-size: 15px; overflow-wrap: anywhere; }
.colonias-price-grid dd { margin: 8px 0 0; overflow-wrap: anywhere; }
.colonias-price-grid strong { font-size: 22px; }
.city-health-questions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.city-health-questions > div { background: var(--surface); border-radius: 18px; padding: 16px; }
.city-health-questions strong { display: block; margin: 8px 0; }
.city-health-questions svg { color: var(--accent-strong); }
@media (max-width: 680px) {
  .city-health-grid, .city-health-questions { grid-template-columns: minmax(0, 1fr); }
}
.city-map-layout { display: grid; grid-template-columns: minmax(220px, .85fr) minmax(0, 1.3fr); gap: 16px; align-items: start; }
.city-map-side, .city-map-list { min-width: 0; }
.city-map-list { display: grid; gap: 10px; max-height: 540px; overflow-y: auto; overscroll-behavior: contain; padding: 2px; }
.city-map-card { display: flex; align-items: start; gap: 10px; text-align: left; padding: 14px; border: 2px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.city-map-card[hidden] { display: none; }
.city-map-card[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent-strong); }
.city-map-card .stack { gap: 5px; min-width: 0; overflow-wrap: anywhere; }
.city-map-number { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--accent-strong); color: white; font-weight: 700; }
.city-map-frame { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); }
.city-map-canvas { width: 100%; height: 360px; background: #e5e9e4; }
.city-map-canvas .city-map-pin { display: grid; place-items: center; border-radius: 50% 50% 50% 8px; background: #6045db; border: 3px solid white; box-shadow: 0 2px 8px #0004; color: white; }
.city-map-pin.selected { background: #29213f; outline: 3px solid #a995ff; }
.city-map-pin-number { font: 700 17px/1 system-ui, sans-serif; }
.city-map-controls { position: absolute; z-index: 700; top: 10px; right: 10px; display: flex; gap: 5px; }
.city-map-controls .btn { min-height: 44px; background: var(--surface-2); box-shadow: 0 2px 6px #0002; padding: 9px 12px; }
.city-map-attribution { position: absolute; z-index: 700; bottom: 0; right: 0; padding: 4px 7px; background: #fffffff0; color: #333; font-size: 11px; max-width: 100%; }
.city-map-attribution a { color: #4432a3; }
.city-map-selected { padding: 10px 2px 0; min-height: 100px; overflow-wrap: anywhere; }
.city-map-sources { font-size: 14px; }
.city-map-sources summary { min-height: 44px; padding: 12px 0; cursor: pointer; }
.city-map-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.city-map-filters [aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.city-screen.city-large-text .city-map-card .small { font-size: 19px; }
@media (max-width: 1000px) {
  .city-map-layout { grid-template-columns: minmax(0, 1fr); }
  .city-map-side { grid-row: 1; }
  .city-map-list { max-height: 300px; }
}
@media (max-width: 450px) {
  .city-places-map { padding: 12px; }
  .city-map-canvas { height: 300px; }
  .city-map-card { padding: 10px; }
  .city-map-controls .btn { padding: 8px; }
}
.school-admission-flow { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.school-admission-flow li { display: flex; align-items: center; gap: 8px; }
.school-document-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.school-document-list li { display: flex; align-items: flex-start; gap: 8px; }
.school-document-list svg { flex-shrink: 0; color: var(--accent-strong); }
.school-help summary { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.school-help summary::before { content: "▸"; }
.school-help details[open] > summary::before { content: "▾"; }
.school-quote-fields { display: grid; gap: 12px; margin: 12px 0; }
.school-quote-fields dt { font-weight: 700; }
.school-quote-fields dd { margin: 4px 0 0; }
.school-timetable dl { display: grid; gap: 10px; margin: 0; }
.school-day-row dt { font-weight: 700; margin-bottom: 6px; }
.school-day-row dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.school-time-block { background: var(--accent-soft); border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; font-weight: 700; }
.school-contact { height: auto; min-height: 52px; white-space: normal; padding: 12px 16px; }
@media (max-width: 480px) { .school-admission-flow { grid-template-columns: minmax(0, 1fr); } }
.city-screen .city-school-fields { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.city-screen .city-school-fields dt { font-size: 15px; color: var(--ink-2); display: flex; gap: 8px; align-items: center; }
.city-screen .city-school-fields dt svg { flex-shrink: 0; color: var(--accent-strong); }
.city-screen .city-school-fields dd { margin: 4px 0 0; font-size: 17px; line-height: 1.55; }
.city-school-fact { padding: 12px; border-radius: var(--r-md); background: var(--surface-2); min-width: 0; overflow-wrap: anywhere; }
.city-school-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.city-school-summary > div { display: flex; gap: 14px; align-items: center; border-radius: var(--r-md); padding: 16px; background: var(--accent-soft); }
.city-school-summary strong { color: var(--accent-strong); font-size: 32px; font-variant-numeric: tabular-nums; }
.city-school-summary span { font-size: 16px; }
.city-school-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.city-school-steps li { display: flex; gap: 10px; padding: 16px; background: var(--surface-2); border-radius: var(--r-md); }
.city-school-step-number { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--accent-strong); }
.city-school-steps p { margin: 8px 0 0; }
.city-screen .city-status-legend, .city-screen .city-chart-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.city-screen .city-stage-field { max-width: 470px; }
.city-screen .city-rental-totals { display: grid; gap: 12px; }
.city-screen .city-rental-totals span { display: block; font-size: 16px; color: var(--ink-2); }
.city-screen .city-rental-totals strong { font-size: 26px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.city-screen .city-cost-stack { display: flex; height: 26px; overflow: hidden; border-radius: 7px; }
.city-screen .city-cost-stack > span { background: var(--accent-strong); }
.city-screen .city-cost-stack .city-cost-deposit { opacity: .65; }
.city-screen .city-cost-stack .city-cost-commission { opacity: .35; }
.city-screen .city-cost-items { margin: 0; }
.city-screen .city-cost-items > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.city-screen .city-cost-items dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.city-screen .city-month-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.city-screen .city-month { display: grid; grid-template-columns: 1fr auto; gap: 7px; min-width: 0; padding: 10px 0; font-size: 16px; }
.city-screen .city-month strong { font-variant-numeric: tabular-nums; }
.city-screen .city-climate-track, .city-screen .city-budget-track { grid-column: 1 / -1; height: 12px; border-radius: 5px; overflow: hidden; background: var(--surface-sunken); }
.city-screen .city-climate-track > span, .city-screen .city-budget-track > span { display: block; height: 100%; background: var(--accent-strong); border-radius: 5px; }
.city-screen .city-chart-controls [aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); }
.city-screen .city-budget-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; font-size: 16px; }
.city-screen .city-budget-row strong { font-variant-numeric: tabular-nums; }
.city-screen .city-move-steps { display: grid; gap: 14px; margin: 0; padding-left: 28px; }
.city-screen .city-move-steps li { padding-left: 6px; }
.city-screen .city-move-steps li::marker { color: var(--accent-strong); font-weight: 700; }
.city-screen.city-large-text .small, .city-screen.city-large-text .notice,
.city-screen.city-large-text .city-details > summary, .city-screen.city-large-text .city-school-fields dd,
.city-screen.city-large-text .city-health-fields dt, .city-screen.city-large-text .city-health-fields dd,
.city-screen.city-large-text .city-month, .city-screen.city-large-text .city-budget-row { font-size: 19px; }
.city-screen.city-large-text .chip { font-size: 16px; }
.city-screen.city-large-text .tiny { font-size: 15px; }
@media (max-width: 850px) {
  .city-school-steps { grid-template-columns: minmax(0, 1fr); }
  .city-screen .city-school-grid, .city-screen .city-rental-grid, .city-screen .city-month-grid { grid-template-columns: minmax(0, 1fr); }
  .city-screen .city-school-profile, .city-screen .city-school-fields > div:first-child { min-height: 0; }
}
@media (max-width: 360px) {
  .city-screen .city-school-fields, .city-school-summary { grid-template-columns: minmax(0, 1fr); }
  .city-screen .city-budget-row { grid-template-columns: minmax(0, 1fr); }
  .city-screen .city-month { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .city-screen .country-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .city-screen .country-topic { overflow-wrap: normal; }
  .city-screen .country-topic, .city-screen .country-more > summary { font-size: 14px; min-height: 48px; }
  .city-screen .country-more-options .country-topic { font-size: 16px; }
}
/* Paraguay welcome: existing palette, accessible labels alongside every graphic. */
.paraguay-intro { gap: 28px; margin-top: 12px; min-width: 0; overflow-wrap: anywhere; }
.paraguay-lead { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.paraguay-fit, .paraguay-stat, .paraguay-fact, .paraguay-settle {
  padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); min-width: 0;
}
.paraguay-fit { background: var(--accent-soft); border-color: transparent; justify-content: center; }
.paraguay-intro h2 { font-size: 25px; line-height: 1.25; }
.paraguay-intro h3 { font-size: 18px; line-height: 1.35; }
.paraguay-intro p { margin: 0; }
.paraguay-intro .small { font-size: 16px; line-height: 1.5; }
.country-screen .country-hero { grid-template-columns: minmax(0, 1fr) 220px; align-items: center; }
.country-screen .country-hero-copy > p { font-size: 16px; line-height: 1.6; }
.paraguay-eyebrow { color: var(--info-ink); font-size: 13px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.paraguay-number { font-size: clamp(26px, 3vw, 36px); line-height: 1.15; letter-spacing: -.025em; }
.paraguay-stat > .paraguay-number { font-size: 48px; color: var(--info-ink); }
.paraguay-residence-route { font-size: clamp(24px, 2.5vw, 32px); line-height: 1.2; color: var(--info-ink); overflow-wrap: anywhere; }
.paraguay-residence-counts > p, .paraguay-residence-counts > .paraguay-bars { margin-top: 16px; }
.paraguay-tax-example { border-top: 1px solid var(--line); padding-top: 16px; }
.paraguay-tax-example > strong { color: var(--info-ink); font-size: 24px; }
.paraguay-tax-example details > p { margin-top: 12px; }
.country-screen .country-panel[id], .country-screen [data-country-article],
.country-screen [data-country-budget-guide], .country-screen [data-country-resource] {
  scroll-margin-top: var(--country-menu-offset, 128px);
}
.country-screen [data-country-resource-link] { white-space: normal; height: auto; min-height: 44px; text-align: left; }
.paraguay-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.paraguay-actions .btn { white-space: normal; text-align: center; }
.paraguay-bars { display: grid; gap: 14px; margin: 8px 0; }
.paraguay-bar-row { display: grid; grid-template-columns: 44px minmax(30px, 1fr) auto; align-items: center; gap: 12px; font-size: 16px; }
.paraguay-bar-row strong { min-width: 62px; text-align: right; font-variant-numeric: tabular-nums; }
.paraguay-bar-track { display: block; background: var(--surface-sunken); border-radius: 12px; height: 14px; overflow: hidden; }
.paraguay-bar-track > span { display: block; height: 100%; background: var(--ink-3); border-radius: inherit; }
.paraguay-bar-row.current .paraguay-bar-track > span { background: var(--accent); }
.paraguay-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.paraguay-fact .tiny { margin-top: auto; padding-top: 8px; }
.paraguay-path { list-style: none; margin: 0; padding: 0; }
.paraguay-path > li { min-width: 0; display: grid; }
.paraguay-settle { background: var(--surface); gap: 18px; }
.paraguay-step { padding: 20px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); text-align: left; color: var(--ink); text-decoration: none; cursor: pointer; min-width: 0; }
.paraguay-step:hover { border-color: var(--accent); }
.paraguay-step-number { color: var(--info-ink); font-weight: 800; font-size: 22px; }
.paraguay-step-link { color: var(--info-ink); margin-top: auto; padding-top: 8px; font-weight: 650; }
.paraguay-mission { padding: 20px 24px; border-radius: var(--r-lg); background: var(--accent-soft); color: var(--ink); font-size: 18px; line-height: 1.5; font-weight: 600; }
.paraguay-intro .country-source { font-size: 13px; }
@media (max-width: 740px) {
  .paraguay-lead, .paraguay-three { grid-template-columns: minmax(0, 1fr); }
  .country-screen .country-head .country-hero { display: contents; }
  .country-screen .country-head > .paraguay-intro { order: 1; }
  .country-screen .country-head .country-map { order: 2; width: 100%; }
  .country-screen .country-head > .country-facts { order: 3; }
  .country-screen .country-head > .tiny { order: 4; }
  .paraguay-fit, .paraguay-stat, .paraguay-fact, .paraguay-settle { padding: 20px; }
  .paraguay-intro h2 { font-size: 24px; }
  .paraguay-actions { flex-direction: column; }
  .paraguay-number { font-size: 29px; }
}
/* Encarnación portrait: existing palette, accessible text and composition. */
.city-portrait { gap: 24px; min-width: 0; }
.city-portrait > section { scroll-margin-top: 24px; }
.portrait-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.portrait-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.portrait-number { font-size: clamp(1.35rem, 5vw, 2.7rem); line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; }
.portrait-stat { justify-content: center; }
.city-portrait .card { min-width: 0; }
.city-portrait h4 { margin: 0; font-size: 1.1rem; }
.city-portrait select { width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 10px; font: inherit; background: var(--surface-2); color: var(--ink); }
.portrait-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.portrait-choices [aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-strong); box-shadow: inset 0 0 0 2px var(--accent); }
.portrait-bar { display: flex; width: 100%; height: 24px; border-radius: var(--r-pill); overflow: hidden; }
.segment-0 { background: var(--surface-sunken); }
.segment-1 { background: var(--accent); }
.segment-2 { background: var(--ink-3); }
.portrait-legend { display: flex; flex-wrap: wrap; gap: 12px 24px; padding: 0; margin: 0; list-style: none; font-size: .9rem; }
.portrait-legend li { display: flex; gap: 8px; align-items: center; }
.portrait-legend dd { margin: 0; font-weight: 700; }
.portrait-dot { display: inline-block; flex: 0 0 12px; width: 12px; height: 12px; border: 1px solid var(--line-strong); border-radius: 50%; }
.portrait-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.portrait-step-label { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
.portrait-step-label input { flex: 0 0 24px; width: 24px; height: 24px; accent-color: var(--accent); }
.portrait-origin-result:empty { display: none; }
@media (max-width: 680px) {
  .portrait-grid { grid-template-columns: minmax(0, 1fr); }
  .portrait-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portrait-stats > :last-child:nth-child(3) { grid-column: 1 / -1; }
  .city-portrait .btn { white-space: normal; text-align: center; min-height: 44px; }
  .city-portrait .card { padding: 16px; }
}
.city-portrait[hidden] { display: none; }

/* Private Encarnacion comparison worksheet. */
.city-portrait .portrait-field { gap: 6px; min-width: 0; }
.city-portrait .portrait-field input, .city-portrait .portrait-field select { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; font: inherit; padding: 10px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2); color: inherit; min-height: 44px; }
.city-portrait .portrait-housing > div { padding-top: 16px; }
.city-portrait .portrait-housing article { min-width: 0; overflow-wrap: anywhere; }

/* Encarnación: keep in-page destinations below the measured mobile menu. */
.city-screen[data-encarnacion] .country-panel,
.city-screen[data-encarnacion] [data-city-resource],
.city-screen[data-encarnacion] .city-portrait > section {
  scroll-margin-top: var(--encarnacion-menu-offset, 128px);
}
.city-screen[data-encarnacion] .city-portrait .city-map-card > .stack { gap: 4px; }

@media (max-width: 600px) {
  .city-screen .city-summary-tiles { grid-template-columns: minmax(0, 1fr); }
}
/* Encarnación: one third action, two thirds explanation; linear on phones. */
.move-timeline { list-style: none; margin: 12px 0; padding: 0; }
.move-step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 28px; position: relative; padding: 0 0 28px; }
.move-step-heading { display: flex; flex-direction: row-reverse; justify-content: space-between; gap: 12px; align-items: flex-start; min-width: 0; padding-top: 20px; }
.move-step-heading h3 { font-size: 1.18em; line-height: 1.3; margin: 5px 0 0; overflow-wrap: anywhere; }
.move-step-number { color: var(--accent-strong); font-size: .78em; font-weight: 650; }
.move-step-icon { flex: 0 0 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--gradient); color: var(--accent-ink); position: relative; z-index: 1; }
.move-step:not(:last-child)::before { content: ""; position: absolute; left: calc((100% - 28px) / 3 - 21px); top: 60px; bottom: -22px; width: 2px; background: var(--accent-soft); }
.move-step-content { min-width: 0; align-self: start; }
.move-step-content > p { margin: 0; }
.move-document-list { margin: 0; padding-left: 20px; }
.move-document-list > li + li { margin-top: 12px; }

/* Paraguay's optional workspace: the existing palette and shared navigation. */
.pyw-screen { overflow-wrap: anywhere; }
.pyw-screen .pyl-topics { display: flex; flex-wrap: wrap; gap: 8px; }
.pyw-screen .pyl-topics .active { background: var(--accent-soft); color: var(--accent-strong); }
.pyw-screen .pyl-section { border: 0; padding: 0; background: transparent; }
.pyw-screen .pyl-section[hidden] { display: none !important; }
.pyw-screen .pyl-section > summary { display: none; }
.pyw-screen .pyl-section > h3 { margin: 6px 0 14px; }
.pyw-screen .pyl-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 14px; }
.pyw-screen .pyl-card { padding: 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pyw-screen .pyl-card h4 { font-size: 18px; line-height: 1.4; margin: 0; }
.pyw-screen .pyl-card > .btn { align-self: start; }
.pyw-screen .pyl-details > summary { color: var(--accent-strong); cursor: pointer; padding: 10px 0; min-height: 44px; }
.pyw-screen .pyl-details > .card { background: transparent; border: 0; padding: 10px 0 0; box-shadow: none; }
.pyw-screen .pyl-details .notice { text-align: left; padding: 12px; }
.pyw-screen .pyl-local { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); padding-top: 16px; }
.pyw-screen .pyl-phones { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 900px) {
  .pyw-screen .pyl-grid { grid-template-columns: minmax(0,1fr); }
}
.pyw-screen .country-head { padding: 4px 0 16px; }
.pyw-screen .country-head .country-hero { display: grid; grid-template-columns: minmax(0,1fr) 160px; align-items: start; gap: 20px; }
.pyw-screen .country-map { width: 160px; padding: 12px; font-size: 12px; }
.pyw-screen .country-map svg { max-height: 150px; }
.pyw-screen h1 { font-size: clamp(28px,4vw,40px); margin: 0; }
.pyw-screen h2 { font-size: 22px; line-height: 1.3; margin: 0; }
.pyw-screen h3 { font-size: 17px; line-height: 1.4; margin: 0; }
.pyw-screen .small { font-size: 16px; line-height: 1.55; }
.pyw-screen p { margin: 0; }
.pyw-screen [data-country-panel="overview"] > h2 { display: none; }
.pyw-hero { gap: 14px; }
.pyw-actions, .pyw-quick { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pyw-quick .btn { background: transparent; border: 1px solid var(--line); }
.pyw-screen .btn { white-space: normal; height: auto; min-height: 44px; }
.pyw-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.pyw-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.pyw-grid > * { min-width: 0; }
.pyw-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; gap: 10px; }
.pyw-section { gap: 14px; scroll-margin-top: 100px; min-width: 0; }
.pyw-overview { gap: 24px; }
.pyw-options, .pyw-checklist { border: 0; padding: 0; margin: 12px 0; display: grid; gap: 8px; min-width: 0; }
.pyw-options { grid-template-columns: repeat(2,minmax(0,1fr)); }
.pyw-options legend, .pyw-checklist legend { margin-bottom: 12px; }
.pyw-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pyw-option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px; cursor: pointer; border-radius: var(--r-md); }
.pyw-option:has(input:checked) { background: var(--accent-soft); }
.pyw-option input { flex: 0 0 20px; width: 20px; height: 20px; accent-color: var(--accent); }
.pyw-picker { border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; }
.pyw-picker > summary, .pyw-fold > summary { min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 600; }
.pyw-picker > p { margin: 8px 0; }
.pyw-field { display: flex; flex-direction: column; gap: 6px; font-size: 15px; min-width: 0; }
.pyw-field input, .pyw-field select, .pyw-field textarea { width: 100%; max-width: 100%; min-width: 0; min-height: 44px; font: inherit; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink); }
.pyw-field textarea { resize: vertical; }
.pyw-screen :is(button,input,select,textarea,summary,a):focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.pyw-fold .paraguay-three { gap: 12px; }
.pyw-fold .paraguay-fact, .pyw-fold .paraguay-step, .pyw-fold .paraguay-settle { padding: 14px; }
.pyw-fold .paraguay-number, .pyw-fold .paraguay-residence-route { font-size: 23px; }
.pyw-fold .paraguay-actions { margin: 0; }
.pyw-compare-facts { margin: 0; }
.pyw-compare-facts > div { padding: 10px 0; border-bottom: 1px solid var(--line); }
.pyw-compare-facts dt { font-weight: 600; }
.pyw-compare-facts dd { margin: 4px 0 0; font-size: 14px; }
.pyw-screen [data-workspace-section="plan"] { padding: 18px; border-radius: var(--r-lg); background: var(--accent-soft); }
.pyw-screen [data-workspace-section="plan"] .pyw-picker { background: var(--surface); }
.pyw-mobile-map { display: none; }
@media (min-width:701px) {
  .pyw-screen.topic-navigation-screen { grid-template-columns: 215px minmax(0,1fr); gap: 24px; }
  .pyw-screen .topic-navigation-slot > .country-topics > .country-topic { font-size: 17px; padding: 14px; }
}
@media (max-width:1000px) {
  .pyw-grid.three { grid-template-columns: minmax(0,1fr); }
}
@media (max-width:700px) {
  .pyw-screen .country-head .country-hero { grid-template-columns: minmax(0,1fr); }
  .pyw-screen .country-head .country-map { display: none; }
  .pyw-mobile-map { display: block; }
  .pyw-screen .pyw-mobile-map .country-map { width: 100%; max-width: 320px; }
  .pyw-screen .pyw-mobile-map .country-map svg { max-height: 240px; }
  .pyw-grid, .pyw-grid.three, .pyw-options { grid-template-columns: minmax(0,1fr); }
  .pyw-quick { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pyw-screen .country-more > summary, .pyw-screen .country-topic { min-height: 44px; }
}
.move-term { font-size: .8em; overflow-wrap: anywhere; }
/* Paraguay cost examples. Use the existing palette and card radii. */
.pbc-costs { gap: 26px; }
.pbc-overview { gap: 14px; }
.pbc-filters { display: flex; justify-content: flex-end; }
.pbc-filter { margin: 0; padding: 0; border: 0; min-width: 0; }
.pbc-filter legend { padding: 0; margin-bottom: 8px; font-size: 13px; color: var(--ink-3); }
.pbc-currencies, .pbc-sections { display: flex; gap: 4px; }
.pbc-choice { min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer; }
.pbc-choice.active, .pbc-choice[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pbc-currency-select { display: none; width: 100%; min-height: 44px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 14px; }
.pbc-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pbc-metric { min-width: 0; padding: 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.pbc-metric + .pbc-metric { border-left: 1px solid var(--line); }
.pbc-metric > svg { color: var(--accent); flex-shrink: 0; }
.pbc-metric h4 { font-size: 13px; line-height: 1.5; font-weight: 500; color: var(--ink-3); margin: 0; min-height: 39px; }
.pbc-amount { font-size: 20px; line-height: 1.4; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pbc-metric p { line-height: 1.5; color: var(--ink-3); }
.pbc-text-action { padding: 0; min-height: 44px; border: 0; background: none; color: var(--accent-strong); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.pbc-cta { display: flex; gap: 20px; align-items: center; justify-content: space-between; padding: 16px; background: var(--accent-soft); border-radius: var(--r-md); }
.pbc-cta p { flex: 1; }
.pbc-cta .btn { flex: 0 0 auto; }
.pbc-sections { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.pbc-section[hidden] { display: none !important; }
.pbc-section > h3, .pbc-section > p { display: none; }
.pbc-card-details > summary, .pbc-price-sources > summary { color: var(--accent-strong); min-height: 44px; padding: 12px 0; cursor: pointer; font-size: 14px; }
.pbc-card-details > p, .pbc-price-sources[open] > div { margin: 12px 0; }
.pbc-section .country-highlights > .card { background: var(--surface-2); padding: 20px; }
.pbc-section .country-highlights > .card > .stack { height: 100%; }
.pbc-card-details { margin-top: auto; }
.pbc-section > .country-directory { background: var(--surface); }
.pbc-notes > .pyw-section > h3 { display: none; }
.pbc-notes > .pyw-section { margin-top: 16px; }
@media (max-width:1199px) {
  .pbc-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 0; }
  .pbc-metric:nth-child(2n+1) { border-left: 0; }
}
@media (max-width:700px) {
  .pbc-currencies { display: none; }
  .pbc-currency-select { display: block; }
  .pbc-choice { padding: 10px; font-size: 13px; }
  .pbc-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .pbc-metric:nth-child(n) { border-left: 0; }
  .pbc-metric:nth-child(even) { border-left: 1px solid var(--line); }
  .pbc-metric { padding: 10px 8px; }
  .pbc-metric h4 { min-height: 0; }
  .pbc-amount { font-size: 19px; }
  .pbc-cta { flex-direction: column; align-items: stretch; gap: 12px; }
  .pbc-section .country-highlights { grid-template-columns: minmax(0,1fr); }
  .pbc-section .country-highlights > .card { padding: 16px; }
}
.move-step-details > summary { color: var(--accent-strong); cursor: pointer; padding: 12px 0; min-height: 44px; }
.move-step-details > .stack { padding-top: 8px; }
.move-step-content .btn { white-space: normal; height: auto; min-height: 44px; }
@media (max-width: 700px) {
  .move-step { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-bottom: 24px; }
  .move-step-heading { padding-top: 0; flex-direction: row; justify-content: flex-start; }
  .move-step:not(:last-child)::before { display: none; }
  .move-step-content { padding: 16px; }
}

/* Country-side People and language: existing palette and controls. */
.pylang { min-width: 0; }
.pylang-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.pylang-nav, .pylang-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pylang-nav { border-bottom:1px solid var(--line); padding-bottom:12px; }
.pylang-nav [aria-pressed="true"], .pylang [data-phrase-save][aria-pressed="true"] { background:var(--accent-soft); color:var(--accent-strong); }
.pylang .btn, .pylang summary, .pylang select { min-height:44px; }
.pylang summary { display:flex; align-items:center; cursor:pointer; gap:8px; }
.pylang summary::before { content:'▸'; color:var(--accent-strong); }
.pylang details[open] > summary::before { content:'▾'; }
.pylang summary::-webkit-details-marker { display:none; }
.pylang .btn { white-space:normal; height:auto; overflow-wrap:anywhere; }
.pylang input, .pylang textarea, .pylang select { max-width:100%; min-width:0; width:100%; }
.pylang input[type="checkbox"] { width:auto; min-width:20px; }
.pylang-checks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; border:0; padding:8px 0; }
.pylang-spanish { font-size:1.2rem; line-height:1.5; font-weight:600; border-left:3px solid var(--accent); padding:8px 12px; margin:0; }
.pylang-phrase { align-content:start; overflow-wrap:anywhere; }
.pylang details > :not(summary) { margin-top:12px; }
.pylang-view:focus { outline:none; }
.pylang-next { padding-top:16px; border-top:1px solid var(--line); }
.pylang :focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.pylang [hidden] { display:none !important; }
.pylang-fallback { min-height:140px; }
/* Keep every Paraguay country topic discoverable on narrow screens. */
@media (max-width:700px) {
 .country-screen.pyw-screen .topic-navigation-slot > .country-topics {
   display:flex; flex-direction:row; flex-wrap:nowrap; overflow-x:auto;
   overscroll-behavior-x:contain; gap:4px; scrollbar-width:thin;
 }
 .country-screen.pyw-screen .country-topics > .country-topic {
   display:block; flex:0 0 auto; white-space:nowrap; padding:12px;
 }
 .country-screen.pyw-screen .country-topics > .country-more { display:none; }
}
@media(max-width:700px) {
 .pylang-grid, .pylang-checks { grid-template-columns:minmax(0,1fr); }
 .pylang-nav .btn { flex:1 1 125px; }
 .pylang-actions .btn { max-width:100%; }
 .pylang input[type="file"] { font-size:0.85rem; }
}

/* Argentina: existing country palette, panels and pinned navigation. */
.ar-screen [hidden] { display: none !important; }
.ar-screen [data-ar-city][aria-pressed="true"] { background:var(--accent-soft); color:var(--accent-strong); }
.guide-check { display:flex; gap:10px; align-items:center; min-height:44px; }
.guide-check input { width:20px; height:20px; }
.ar-screen [data-ar-plan] > .stack { margin-top:16px; }
@media(max-width:700px) {
 .ar-screen .country-topics > .country-topic { flex:0 0 auto; display:block; white-space:nowrap; }
}

/* Structured city guides reuse the existing palette, cards and pinned shell. */
.structured-city-screen .topic-page-content { overflow-wrap:anywhere; }
.structured-city-screen .city-topic-relevant::after { content:' •'; }
.structured-city-screen .pylang-actions [aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); }
.city-comparison-fields { margin:0; }
.city-comparison-fields dt { font-weight:600; margin-top:12px; }
.city-comparison-fields dd { margin:4px 0 0; font-size:14px; line-height:1.55; }
.structured-city-screen textarea { width:100%; min-width:0; box-sizing:border-box; }
.structured-city-screen [hidden] { display:none!important; }

/* Country-independent guide contract. Preserve the Paraguay tokens and layout. */
.guide-card-grid > *, .guide-screen :is(input,select,textarea) { min-width:0; max-width:100%; }
.guide-screen .move-step-details { font-size:inherit; }
.city-screen.city-large-text .move-step-content > p { font-size:19px; }
.guide-card-grid a, .guide-screen .card p { overflow-wrap:anywhere; }
.guide-screen :is(button,input,select,textarea,summary,a):focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
@media(max-width:700px) {
 .guide-screen .topic-navigation-slot > .country-topics {
   display:flex; flex-direction:row; overflow-x:auto; overflow-y:hidden;
   overscroll-behavior-x:contain; gap:4px; padding:4px; scrollbar-width:thin;
 }
 .guide-screen .country-topics > .country-topic {
   display:block; flex:0 0 auto; white-space:nowrap; padding:12px; min-height:48px;
 }
 .guide-screen .country-topics > .country-more { display:none; }
}

/* Shared country daily-life workspace. Existing palette and global navigation stay unchanged. */
.pyw-screen .guide-life-layout { display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:28px; align-items:start; }
.guide-life-main,.guide-life-sidebar { min-width:0; }
.guide-life-intro { margin:0 0 22px; }
.guide-life-search { display:flex; align-items:center; gap:10px; border:1px solid var(--line); padding:10px 12px; margin:0 0 14px; min-width:0; }
.guide-life-search > svg { flex:0 0 20px; color:var(--ink-3); }
.guide-life-search-input { min-width:0; width:100%; border:0; background:transparent; padding:6px 0; font:inherit; box-shadow:none; }
.pyw-screen .guide-life-topics { flex-wrap:nowrap; overflow-x:auto; max-width:100%; border-bottom:1px solid var(--line); gap:0; padding:0 0 3px; }
.pyw-screen .guide-life-topics .btn { flex:0 0 auto; border-radius:0; background:transparent; border:0; border-bottom:3px solid transparent; min-height:46px; padding:10px 14px; }
.pyw-screen .guide-life-topics .btn.active { color:var(--accent-strong); background:var(--accent-soft); border-bottom-color:var(--accent); }
.guide-life-count { margin:18px 0 12px; }
.pyw-screen .guide-life-main .pyl-section > h3 { font-size:16px; margin:18px 0 12px; }
.pyw-screen .guide-life-main .pyl-grid { gap:0; align-items:stretch; grid-template-columns:repeat(2,minmax(0,1fr)); }
.pyw-screen .guide-life-item { min-width:0; border-radius:0; border:1px solid var(--line); background:var(--surface-2); padding:20px; margin:0; box-shadow:none; overflow-wrap:anywhere; }
.pyw-screen .guide-life-item h4,.pyw-screen .guide-life-item h3,.pyw-screen .guide-life-item h2 { font-size:17px; line-height:1.4; }
.guide-life-card-icon { display:inline-flex; vertical-align:middle; color:var(--accent); margin-right:8px; }
.pyw-screen .guide-life-item .small { font-size:14px; line-height:1.65; }
.pyw-screen .guide-life-item > .pyl-details { margin-top:auto; border-top:1px solid var(--line); padding-top:8px; }
.pyw-screen .guide-life-item .pyl-details > summary { font-size:13px; }
.guide-life-sidebar { border-left:1px solid var(--line); padding-left:24px; }
.guide-life-side-section { padding:0 0 22px; margin:0 0 22px; border-bottom:1px solid var(--line); }
.guide-life-side-section:last-child { border-bottom:0; }
.guide-life-side-section > h3 { font-size:13px; line-height:1.5; color:var(--ink-3); margin:0 0 12px; text-transform:uppercase; letter-spacing:.04em; }
.guide-life-side-section > select { max-width:100%; width:100%; min-width:0; min-height:44px; padding:10px; border:1px solid var(--line); background:var(--surface-2); font:inherit; }
.pyw-screen .guide-life-sidebar .pyl-card { padding:0; border:0; background:transparent; border-radius:0; box-shadow:none; }
.guide-life-sidebar .pyl-card > h4 { display:none; }
.guide-life-sidebar .small { font-size:13px; line-height:1.6; }
.guide-life-sidebar .pyl-phones { display:flex; flex-direction:column; align-items:stretch; }
.guide-life-sidebar .pyl-phones .btn { min-width:0; white-space:normal; border-radius:6px; font-size:13px; }
.guide-life-sidebar .tiny { font-size:12px; }
.guide-life-useful { display:flex; flex-direction:column; gap:0; }
.guide-life-useful > a { padding:12px 0; border-bottom:1px solid var(--line); font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
.guide-life-empty { padding:24px 0; }
.guide-life-layout [hidden] { display:none!important; }
@media(max-width:1150px) {
 .pyw-screen .guide-life-layout { grid-template-columns:minmax(0,1fr); }
 .guide-life-sidebar { border-left:0; border-top:1px solid var(--line); padding:24px 0 0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
}
@media(max-width:700px) {
 .pyw-screen .guide-life-main .pyl-grid { grid-template-columns:minmax(0,1fr); }
 .guide-life-sidebar { grid-template-columns:minmax(0,1fr); gap:0; }
 .guide-life-side-section { padding-bottom:18px; margin-bottom:18px; }
 .pyw-screen .guide-life-item { padding:16px; }
 .guide-life-search { padding:8px; }
 .guide-life-search-input { font-size:16px; }
}