/* Country guide: a colour-blocked bento that rebuilds itself for whichever country you pick.
   Satoshi, never heavier than Medium (500). No pure white: cream is #d8d8cb, the page is the paper #f7f7f2, light tiles go up to #fefefc. */

.guide {
  --paper: #fefefc;
  --paper-2: #f9f9f5;
  --navy: #02142b;
  --lime: #c6f24e; /* the one accent. Only ever on navy, or as a tiny dot: it is invisible as ink on the light cards. */
  --dark: linear-gradient(180deg, #0a1c34 0%, #051326 100%); /* one calm surface for every dark card */
  --ease: cubic-bezier(.2, .8, .2, 1);
}
.guide .head { margin-bottom: 40px; }

/* ───────── country switcher ───────── */
.g-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 28px; max-width: 980px; }
.g-pill {
  position: relative; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px; overflow: hidden;
  border-radius: 999px; border: 1px solid var(--border-2); background: transparent; color: var(--fg); font-size: 15.5px; letter-spacing: -0.01em;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--ease), box-shadow .3s ease;
}
.g-pill:hover { background: var(--soft); }
.g-pill:active { transform: scale(.97); }
.g-pill[aria-selected="true"] { background: var(--navy); color: #d8d8cb; border-color: transparent; box-shadow: 0 14px 30px -16px rgba(2, 13, 27, .7); }
.g-pill i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--lime); transform: scaleX(0); transform-origin: left; opacity: 0; }
.g-pill[aria-selected="true"].run i { opacity: 1; animation: gRun var(--auto, 9s) linear forwards; }
.g-pick-note { text-align: center; margin: -10px 0 34px; font-size: 14px; color: var(--faint); }
.g-pick.held .g-pill i { animation-play-state: paused; }
.g-pick.stopped .g-pill i { display: none; }
@keyframes gRun { to { transform: scaleX(1); } }

/* ───────── the bento ───────── */
.g-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 64px; gap: 16px; }
.g-card {
  --ink: var(--fg); --mut: var(--muted); --line: var(--border-2);
  --chip-on-bg: var(--navy); --chip-on-fg: var(--lime); --chip-line: rgba(2, 13, 27, .16);
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; padding: 28px; border-radius: 28px; color: var(--ink);
  box-shadow: 0 1px 2px rgba(2, 13, 27, .04), 0 24px 48px -32px rgba(2, 13, 27, .38);
}
.g-card > * { position: relative; z-index: 1; }

.g-info { grid-column: 1; grid-row: 1 / span 8; }
.g-visa { grid-column: 1; grid-row: 9 / span 6; }
.g-move { grid-column: 2; grid-row: 1 / span 8; }
.g-hol  { grid-column: 2; grid-row: 9 / span 6; }
.g-wx   { grid-column: 3; grid-row: 1 / span 7; }
.g-best { grid-column: 3; grid-row: 8 / span 7; }

.g-top { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.g-top svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.g-top h3 { font-size: 24px; letter-spacing: -0.03em; line-height: 1.1; }
.g-live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--mut); white-space: nowrap; }
.g-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.g-live.off::before { opacity: .35; }
.g-wx .g-live::before { background: var(--lime); box-shadow: 0 0 0 1.5px var(--navy); }

.g-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.g-chip {
  height: 34px; padding: 0 14px; border-radius: 999px; font-size: 14.5px; letter-spacing: -0.005em; white-space: nowrap;
  border: 1px solid var(--chip-line); background: transparent; color: var(--ink);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease);
}
.g-chip:hover { border-color: var(--ink); }
.g-chip:active { transform: scale(.96); }
.g-chip[aria-selected="true"] { background: var(--chip-on-bg); color: var(--chip-on-fg); border-color: transparent; }

/* children of a freshly drawn region rise in one after another */
.g-in > * { animation: gUp .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 48ms); }
@keyframes gUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ───────── 1 · good to know: the country, lit up like on the map ───────── */
.g-info {
  --ink: #d8d8cb; --mut: #8fa5bd; --line: rgba(216, 216, 203, .1);
  --chip-on-bg: #d8d8cb; --chip-on-fg: #011025; --chip-line: rgba(216, 216, 203, .18);
  background: var(--dark);
  perspective: 900px;
}
/* the contour texture is only a whisper here, so the country stays the one thing you look at */
.g-info::before { content: ""; position: absolute; inset: 0; z-index: 0; background-image: var(--topo-img, none); background-size: cover; background-position: var(--topo-pos, 30% 60%); opacity: .1; pointer-events: none; transition: background-position 1.2s var(--ease); }
.g-stage { position: relative; flex: 1; min-height: 150px; margin: -6px -20px 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); }
.g-shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.g-shape .halo path { fill: none; stroke: #d8d8cb; stroke-linejoin: round; stroke-linecap: round; animation: gFade 1.4s ease .5s both; }
.g-shape .land { fill: url(#g-land); animation: gFill 1.1s ease .7s both; }
.g-shape .coast { fill: none; stroke: #d8d8cb; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: gDraw 1.5s var(--ease) forwards; }
@keyframes gDraw { to { stroke-dashoffset: 0; } }
@keyframes gFill { from { opacity: 0; } to { opacity: 1; } }
/* no `to` frame: the element settles on its own opacity, so the faint coast bands below stay faint */
@keyframes gFade { from { opacity: 0; } }
/* two quiet bands around the coast, like depth lines on a chart */
.g-shape .halo .h1 { opacity: .14; } .g-shape .halo .h2 { opacity: .06; }
.g-pin { position: absolute; left: 0; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; white-space: nowrap; font-size: 13px; color: #d8d8cb;
  background: #0b2038; border: 1px solid rgba(216, 216, 203, .16);
  box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .6); transform: translate(var(--px, 0), var(--py, 0)); animation: gFade .7s ease 1.3s both; pointer-events: none; }
.g-pin i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); }
.g-name { margin-top: 10px; }
.g-name b { display: block; font-size: 42px; line-height: 1; letter-spacing: -0.05em; }
.g-name span { display: block; margin-top: 8px; font-size: 15px; color: var(--mut); }
.g-info .g-chips { margin-top: 18px; }
.g-read { margin-top: 14px; min-height: 92px; display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 20px; background: rgba(216, 216, 203, .06); }
.g-read .big { font-size: 48px; line-height: 1; letter-spacing: -0.05em; min-width: 52px; }
.g-read .txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.g-read .txt b { font-size: 21px; letter-spacing: -0.025em; line-height: 1.15; }
.g-read .txt span { font-size: 14px; color: var(--mut); }
.g-read .plugs { display: flex; gap: 8px; flex: none; }
.plug { width: 48px; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; color: var(--mut); }
.plug svg { width: 48px; height: 48px; border-radius: 14px; background: #d8d8cb; fill: #02142b; }
.road { flex: none; width: 70px; height: 56px; border-radius: 14px; background: #011329; border: 1px solid var(--line); overflow: hidden; }
.road svg { width: 100%; height: 100%; }

/* ───────── 2 · weather ───────── */
.g-wx {
  --ink: #020d1b; --mut: rgba(2, 13, 27, .58); --line: rgba(2, 13, 27, .08);
  --chip-on-bg: #020d1b; --chip-on-fg: var(--lime); --chip-line: rgba(2, 13, 27, .16);
  background: #fefefc; border: 1px solid rgba(2, 13, 27, .06);
}
/* a flat card: no sky, no glow, no blurred clouds. The icon says "rain"; nothing sits behind it. */
.w-now { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.w-temp { display: flex; align-items: flex-start; font-size: 72px; line-height: .9; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.w-temp sup { font-size: 28px; letter-spacing: 0; margin: 4px 0 0 2px; opacity: .6; }
.w-cond { display: block; margin-top: 10px; font-size: 18px; letter-spacing: -0.02em; }
.w-cond small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--mut); font-variant-numeric: tabular-nums; }
.w-big { width: 64px; height: 64px; flex: none; }
.w-big svg, .w-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.w-body { margin-top: auto; padding-top: 12px; }
/* five plain rows separated by hairlines: no boxes, no tinted icon tiles */
.w-days { list-style: none; margin: 0; padding: 0; display: grid; }
.w-days li { display: grid; grid-template-columns: 24px 44px 1fr auto; align-items: center; gap: 12px; height: 48px; padding: 0; border-top: 1px solid var(--line); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.w-ico { width: 24px; height: 24px; color: var(--ink); }
.w-days .dn { letter-spacing: -0.01em; }
.w-rng { position: relative; height: 6px; border-radius: 99px; background: rgba(2, 13, 27, .08); overflow: hidden; }
.w-rng i { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); border-radius: inherit; background: var(--ink); transform-origin: left; animation: gGrow .9s var(--ease) both; animation-delay: calc(var(--i, 0) * 60ms + .2s); }
@keyframes gGrow { from { transform: scaleX(0); } }
.w-days .hl { text-align: right; white-space: nowrap; }
.w-days .hl small { color: var(--mut); font-size: inherit; margin-left: 6px; }
.w-chart { position: relative; height: 252px; padding: 14px 4px 6px; border-top: 1px solid var(--line); }
.w-chart svg { width: 100%; height: 100%; overflow: visible; }
.w-chart .area { fill: url(#g-area); }
.w-chart .ln { fill: none; stroke: #020d1b; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: gDraw 1.3s var(--ease) forwards; }
.w-chart text { font-size: 11.5px; fill: rgba(2, 13, 27, .55); font-family: inherit; }
.w-chart text.t { fill: #020d1b; font-size: 12.5px; }
.w-msg { padding: 22px 4px; font-size: 14.5px; color: var(--mut); }
.w-skel { height: 46px; border-radius: 12px; margin-bottom: 4px; background: linear-gradient(90deg, rgba(2, 13, 27, .03), rgba(2, 13, 27, .07), rgba(2, 13, 27, .03)); background-size: 200% 100%; animation: gShimmer 1.4s linear infinite; }
@keyframes gShimmer { to { background-position: -200% 0; } }

/* ───────── 3 · best time: a year ring ───────── */
.g-best {
  --ink: #d8d8cb; --mut: rgba(216, 216, 203, .66); --line: rgba(216, 216, 203, .12);
  background: var(--dark);
}
.ring-wrap { position: relative; margin: auto; width: min(100%, 330px); aspect-ratio: 1; }
.ring-wrap svg { width: 100%; height: 100%; overflow: visible; }
.ring .seg { fill: none; stroke: rgba(216, 216, 203, .1); stroke-width: 14; stroke-linecap: round; transition: stroke .5s ease; }
.ring .seg.on { stroke: #d8d8cb; }
.ring .seg { animation: gSeg .7s var(--ease) both; animation-delay: calc(var(--k) * 40ms); transform-origin: 130px 130px; }
@keyframes gSeg { from { opacity: 0; transform: scale(.9); } }
.ring .r-ml { font-size: 12px; fill: rgba(216, 216, 203, .45); text-anchor: middle; dominant-baseline: central; font-family: inherit; }
.ring .r-ml.on { fill: #d8d8cb; }
.ring .now { fill: var(--lime); }
.ring .nowl { font-size: 10.5px; fill: #d8d8cb; text-anchor: middle; letter-spacing: .12em; text-transform: uppercase; font-family: inherit; }
.ring-mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 22%; pointer-events: none; }
.ring-mid b { font-size: 30px; line-height: 1.05; letter-spacing: -0.04em; }
.ring-mid span { margin-top: 8px; font-size: 13.5px; color: var(--mut); text-wrap: balance; line-height: 1.35; }
.g-verdict { align-self: center; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border-radius: 999px; font-size: 14.5px; background: rgba(216, 216, 203, .1); margin-top: 4px; }
.g-verdict::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--lime)); }
.g-verdict.later::before { background: transparent; box-shadow: inset 0 0 0 2px #d8d8cb; }

/* ───────── 4 · getting around: pins on a quiet map ───────── */
.g-move {
  --ink: var(--fg); --mut: #4d5967; --line: rgba(2, 13, 27, .08);
  background: #fefefc; border: 1px solid rgba(2, 13, 27, .06);
}
.g-move .g-chips { margin-bottom: 0; }
/* a quiet street map: pale ground, lighter streets, one soft patch of water. No contour texture, no outlines. */
.g-map { position: absolute !important; left: 0; right: 0; bottom: 0; top: 124px; z-index: 0 !important; overflow: hidden; background: #f7f7f2; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 54px); mask-image: linear-gradient(to bottom, transparent 0, #000 54px); }
.g-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-map .rd { fill: none; stroke: #fefefc; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.g-map .rd.s { stroke-width: 5; }
.g-map .water { fill: #e2e4df; }
.g-sky { position: absolute !important; inset: 0; z-index: 1 !important; pointer-events: none; }
.m-tile { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -100%); animation: gDrop .8s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--k) * 110ms + .1s); }
.m-tile .face { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 14px; font-size: 16px; letter-spacing: -0.015em; white-space: nowrap; color: var(--tc, #d8d8cb); background: var(--tb, var(--navy));
  box-shadow: 0 10px 22px -12px rgba(2, 13, 27, .55); }
.m-tile .stem { width: 1.5px; height: 14px; background: var(--tb, var(--navy)); }
.m-tile .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tb, var(--navy)); }
.m-tile .sig { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.m-tile .sig b { width: 3px; border-radius: 1px; background: currentColor; opacity: .35; }
.m-tile .sig b:nth-child(1) { height: 5px; } .m-tile .sig b:nth-child(2) { height: 8px; } .m-tile .sig b:nth-child(3) { height: 11px; } .m-tile .sig b:nth-child(4) { height: 14px; }
.m-tile .sig b.on { opacity: 1; }
@keyframes gDrop { from { opacity: 0; transform: translate(-50%, calc(-100% - 26px)) scale(.9); } }
.g-esim { position: absolute; left: 20px; right: 20px; bottom: 20px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 16px; font-size: 13.5px; line-height: 1.35; color: #d8d8cb; background: var(--navy); animation: gUp .6s var(--ease) both; }
.g-esim svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--lime); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.g-move .g-top { margin-bottom: 18px; }

/* ───────── 5 · public holidays ───────── */
.g-hol {
  --ink: #d8d8cb; --mut: rgba(216, 216, 203, .66); --line: rgba(216, 216, 203, .1);
  background: var(--dark);
}
.h-next { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.h-next .when { font-size: 54px; line-height: .95; letter-spacing: -0.055em; font-variant-numeric: tabular-nums; }
.h-next .when small { font-size: 20px; letter-spacing: -0.02em; margin-left: 6px; color: var(--lime); }
.h-next .nm { text-align: right; max-width: 52%; font-size: 15.5px; line-height: 1.25; letter-spacing: -0.015em; }
.h-next .nm small { display: block; margin-top: 3px; font-size: 13px; color: var(--mut); }
/* plain rows on hairlines: a typographic date, the name, one quiet note. No tiles, no outlined pills.
   The list stretches to the bottom of the card so the rows share the space instead of leaving a gap under the last one. */
.h-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; flex: 1; grid-auto-rows: minmax(60px, 1fr); }
.h-list li { display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 18px; padding: 8px 0; border-top: 1px solid var(--line); }
.h-date { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.h-date b { font-size: 21px; letter-spacing: -0.04em; }
.h-date small { margin-top: 4px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); }
.h-list .tx { min-width: 0; }
.h-list .tx b { display: block; font-size: 15.5px; letter-spacing: -0.015em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-list .tx span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the Live badge says nothing when the data is live; it only appears for a snapshot or offline */
.g-hol .g-live:not(.off) { display: none; }
.h-none { margin: auto 0; font-size: 15px; color: var(--mut); max-width: 280px; }

/* ───────── 6 · visa: a passport page with a stamp ───────── */
.g-visa {
  --ink: var(--fg); --mut: #4d5967; --line: rgba(2, 13, 27, .08);
  background: #fefefc; border: 1px solid rgba(2, 13, 27, .06);
}
/* ten passports on an even 5 x 2 grid, outlined like the other chips, one navy */
.v-who { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.v-p { height: 36px; padding: 0; border-radius: 10px; font-size: 13px; letter-spacing: .02em; border: 1px solid rgba(2, 13, 27, .12); background: transparent; color: var(--mut);
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s var(--ease); }
.v-p:hover { color: var(--ink); border-color: var(--ink); }
.v-p:active { transform: scale(.94); }
.v-p[aria-selected="true"] { background: var(--navy); color: var(--lime); border-color: transparent; }
.v-cap { margin-top: 16px; font-size: 14px; color: var(--mut); }
.v-cap b { color: var(--ink); }
.v-stage { position: relative; flex: 1; display: grid; place-items: center; min-height: 140px; padding: 12px 0; }
.stamp { width: min(100%, 270px); transform: rotate(-3deg); mix-blend-mode: multiply; color: var(--ink-c, #020d1b); }
.stamp.hit { animation: gStamp .7s cubic-bezier(.2, 1.1, .3, 1) both; }
.stamp text { font-family: inherit; fill: currentColor; text-anchor: middle; }
.stamp .box { fill: none; stroke: currentColor; }
@keyframes gStamp { 0% { opacity: 0; transform: rotate(-10deg) scale(1.6); } 55% { opacity: 1; transform: rotate(-3deg) scale(.97); } 75% { transform: rotate(-3deg) scale(1.02); } 100% { opacity: 1; transform: rotate(-3deg) scale(1); } }
.v-pad { padding-top: 14px; border-top: 1px solid var(--line); font-size: 11px; color: var(--faint); letter-spacing: .08em; text-transform: uppercase; }

/* ───────── responsive ───────── */
@media (max-width: 1020px) {
  .g-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .g-info, .g-visa, .g-move, .g-hol, .g-wx, .g-best { grid-column: auto; grid-row: auto; }
  .g-info { min-height: 660px; } .g-wx { min-height: 560px; } .g-move { min-height: 620px; } .g-best { min-height: 560px; } .g-hol { min-height: 480px; } .g-visa { min-height: 480px; }
  .g-map { top: 124px; }
}
@media (max-width: 760px) {
  .g-grid { grid-template-columns: 1fr; }
  .g-card { padding: 22px; border-radius: 26px; }
  .g-pick { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin: 0 -24px -2px; padding: 6px 24px 30px; /* overflow-x makes overflow-y clip too: the selected pill's shadow reaches ~28px down, so the row needs that much padding */ scroll-snap-type: x proximity; scrollbar-width: none; }
  .g-pick::-webkit-scrollbar { display: none; }
  .g-pill { flex: none; scroll-snap-align: center; }
  .g-name b { font-size: 38px; }
  .w-temp { font-size: 72px; }
  .h-next .when { font-size: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .g-shape, .g-shape *, .m-tile * { animation: none !important; }
  .g-shape .coast { stroke-dashoffset: 0; }
  .g-pill i { display: none; }
  .g-in > * { animation: none; }
}