/* Country pages, the A to Z list and the 404: the app's tokens (src/theme.ts, design system "Sticker Atlas" by day,
   "Luggage Label" by night) and its card, tile and section shapes (src/components). */
:root {
  --bg: #F4F2FE; --surface: #FFFFFF; --surface2: #EEEBFC; --line: #E4E0FB;
  --ink: #1C1A3A; --ink2: #3A3760; --ink3: #5A5680;
  --action: #4B3FD9; --on-action: #FFFFFF; --hero: #4B3FD9; --hero-sub: #E4E0FC; --rule: #D6D1F7;
  --sun: #F6C744; --coral: #F2786C; --leaf: #45C152; --sky: #6E9EF7; --orchid: #B86BC6; --peri: #8C80F0; --on-accent: #14122E;
  --t-sun: #FFF1C9; --t-sun-ink: #5A4A10; --t-coral: #FFE2DE; --t-coral-ink: #8A2A20; --t-leaf: #DDF4E0; --t-leaf-ink: #1F5A27;
  --night: #15123F; --navy: #14122E;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15123F; --surface: #221D63; --surface2: #2E2878; --line: #3A33A8;
    --ink: #F4F2FF; --ink2: #CFCBF7; --ink3: #B9B3F0;
    --action: #F6C744; --on-action: #1C1A3A; --hero: #221D63; --hero-sub: #CFCBF7; --rule: #4B44B8;
    --t-sun: #50425C; --t-sun-ink: #F6C744; --t-coral: #503165; --t-coral-ink: #F7A39A; --t-leaf: #2A415F; --t-leaf-ink: #7FDB8A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #15123F; --surface: #221D63; --surface2: #2E2878; --line: #3A33A8;
  --ink: #F4F2FF; --ink2: #CFCBF7; --ink3: #B9B3F0;
  --action: #F6C744; --on-action: #1C1A3A; --hero: #221D63; --hero-sub: #CFCBF7; --rule: #4B44B8;
  --t-sun: #50425C; --t-sun-ink: #F6C744; --t-coral: #503165; --t-coral-ink: #F7A39A; --t-leaf: #2A415F; --t-leaf-ink: #7FDB8A;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 'Readex Pro', 'M PLUS Rounded 1c', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--action); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, p { margin: 0; }
[id] { scroll-margin-top: 136px; }
.ms { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; display: inline-block; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; flex-shrink: 0; }
.mono { font-family: 'IBM Plex Mono', monospace; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 600px) { .wrap { padding: 0 24px; } }

/* site bar: the landing page's nav */
.bar { position: sticky; top: 0; z-index: 20; background: rgba(75, 63, 217, .96); backdrop-filter: blur(8px); color: #fff; }
.bar .wrap { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1200px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; }
.brand:hover { text-decoration: none; }
.brand b { font: 400 22px/1 'Young Serif', serif; }
.logo { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 3.7px #F6C744; display: grid; place-items: center; position: relative; flex-shrink: 0; }
.logo i { width: 8.8px; height: 19.8px; border-radius: 50%; box-shadow: inset 0 0 0 2.8px #F6C744; }
.logo s { position: absolute; top: -1.6px; right: -1.6px; width: 7.8px; height: 7.8px; border-radius: 50%; background: #F2786C; box-shadow: 0 0 0 1.3px #F6C744; }
.bar nav { display: flex; align-items: center; gap: 22px; font-weight: 500; font-size: 15px; }
.bar nav a { color: #E4E0FC; }
.bar nav .get { height: 44px; padding: 0 18px; border-radius: 22px; background: #F6C744; color: #14122E; display: flex; align-items: center; font-weight: 700; }
@media (max-width: 479px) { .bar nav .all { display: none; } }

/* hero: the briefing's blue header with its 36 px rounded foot */
.hero { background: var(--hero); color: #fff; border-radius: 0 0 36px 36px; }
.hero .wrap { padding-top: 22px; padding-bottom: 26px; display: flex; flex-direction: column; gap: 16px; }
.crumbs { font-size: 13px; color: var(--hero-sub); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.crumbs a { color: var(--hero-sub); }
.title { display: flex; align-items: flex-end; gap: 14px; }
.flag { width: 72px; height: 48px; border-radius: 9px; overflow: hidden; background: #EEEBFC; flex-shrink: 0; }
.flag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero h1 { font-size: clamp(32px, 7vw, 44px); line-height: 1.05; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.native { font-weight: 700; font-size: 18px; line-height: 1.3; color: var(--hero-sub); margin-top: 2px; }
.native[lang="ja"] { font-family: 'M PLUS Rounded 1c', 'Readex Pro', sans-serif; }
.lede { font-size: 17px; line-height: 1.5; color: var(--hero-sub); max-width: 640px; }

/* sticky section switcher: the briefing's chips */
.chips { position: sticky; top: 64px; z-index: 10; background: var(--bg); }
.chips .wrap { display: flex; gap: 8px; overflow-x: auto; padding-top: 12px; padding-bottom: 10px; scrollbar-width: none; }
.chips .wrap::-webkit-scrollbar { display: none; }
.chip { height: 40px; padding: 0 16px; border-radius: 999px; background: var(--surface); color: var(--ink); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex-shrink: 0; }
.chip:hover { text-decoration: none; background: var(--surface2); }
.chip .ms { color: var(--ink3); }

main.wrap { padding-top: 14px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 40px; }
section { display: flex; flex-direction: column; gap: 14px; }
.head { display: flex; flex-direction: column; gap: 4px; }
.over { display: flex; align-items: center; gap: 8px; font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); }
.over .n { font: 500 11px/14px 'IBM Plex Mono', monospace; letter-spacing: 0; }
h2 { font-size: 22px; line-height: 28px; font-weight: 700; }
.intro { font-size: 14px; line-height: 20px; color: var(--ink2); max-width: 720px; }
.note { font-size: 12px; line-height: 17px; color: var(--ink3); }

/* fact tiles (01): 36 px icon tile, 12 px label, 16 px value, sources in mono */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 10px; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tile { background: var(--surface); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tile.wide { grid-column: 1 / -1; }
@media (min-width: 760px) { .tile.half { grid-column: span 2; } }
.tile .lab { font-size: 12px; line-height: 16px; color: var(--ink3); }
.tile .val { font-size: 16px; line-height: 21px; font-weight: 600; overflow-wrap: anywhere; }
.tile .sub { font-size: 13px; line-height: 18px; color: var(--ink2); }
.tile .row { display: flex; align-items: center; gap: 10px; }
.tile .src, .card .src { margin-top: auto; }
.ic { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: var(--on-accent); flex-shrink: 0; }
.ic.big { width: 40px; height: 40px; }
.src { font: 400 11px/15px 'IBM Plex Mono', monospace; color: var(--ink3); overflow-wrap: anywhere; }
.src span { display: inline-block; }
a.src:hover { color: var(--action); }
.sos { display: flex; flex-wrap: wrap; column-gap: 18px; row-gap: 6px; }
.sos a { display: flex; align-items: baseline; gap: 6px; color: var(--ink); }
.sos b { font-size: 22px; line-height: 28px; }
.sos span { font-size: 13px; color: var(--ink2); }
.pills { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pill { padding: 6px 10px; border-radius: 12px; background: var(--surface2); font-size: 13px; line-height: 18px; font-weight: 500; }
.steps { display: flex; gap: 3px; margin-top: 2px; }
.steps i { flex: 1; height: 10px; border-radius: 4px; background: var(--line); }
.steps i.on { background: var(--sun); box-shadow: 0 0 0 2px var(--ink); }
.ends { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--ink3); }

/* cards */
.card { background: var(--surface); border-radius: 24px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.card.flush { padding: 0; gap: 0; overflow: hidden; }
.cardhead { display: flex; align-items: center; gap: 12px; }
.cardhead .t { font-size: 17px; line-height: 23px; font-weight: 600; }
.lines { display: flex; flex-direction: column; }
.lines > div { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--surface2); font-size: 14px; line-height: 20px; color: var(--ink2); }
.lines > div .ms { color: var(--action); }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--surface2); padding-top: 12px; }
.card.flush .foot { padding: 12px 16px; }
.foot .src { font-size: 12px; line-height: 17px; flex: 1; margin: 0; }
.official { height: 44px; padding: 0 14px; border-radius: 22px; background: var(--surface2); color: var(--action); display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.official:hover { text-decoration: none; filter: brightness(.97); }
.cointry { background: var(--surface2); border-radius: 18px; padding: 12px; display: flex; align-items: center; gap: 12px; color: var(--ink); }
.cointry:hover { text-decoration: none; }
.cointry .c { width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; }
.cointry .go { height: 44px; padding: 0 14px; border-radius: 22px; background: var(--surface); color: var(--action); display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.hol { display: flex; flex-direction: column; gap: 6px; }
.hol div { font-size: 14px; line-height: 19px; font-weight: 600; }
.hol span { font-weight: 400; color: var(--ink3); }

/* safety (02) */
.verdicts { display: grid; gap: 12px; }
@media (min-width: 900px) { .verdicts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.verdict .who { font-size: 12px; line-height: 16px; color: var(--ink3); }
.verdict .what { font-size: 18px; line-height: 23px; font-weight: 600; }
.vic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #14122E; flex-shrink: 0; }
.scale { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.scale div { display: flex; flex-direction: column; gap: 4px; align-items: center; font-size: 11px; font-weight: 600; color: var(--ink3); text-align: center; }
.scale i { align-self: stretch; height: 8px; border-radius: 4px; background: var(--surface2); }
.scale .on { color: var(--ink); }
.scale .on i { box-shadow: 0 0 0 2px var(--ink); }
.verdict .more { font-size: 14px; line-height: 20px; color: var(--ink2); }
.verdict .foot { flex-direction: column; align-items: flex-start; margin-top: auto; }
.scam { background: var(--surface); border-radius: 20px; padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; }
.scam b { display: block; font-size: 14px; line-height: 19px; font-weight: 600; }
.scam p { font-size: 13px; line-height: 19px; color: var(--ink2); }
.scams { display: grid; gap: 10px; }
@media (min-width: 760px) { .scams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
h3 { font-size: 17px; line-height: 22px; font-weight: 600; }

/* health (03) */
.hrow { min-height: 56px; padding: 12px 16px; display: flex; gap: 12px; align-items: flex-start; border-top: 1px solid var(--surface2); }
.hrow:first-child { border-top: 0; }
.hrow > .ms { color: var(--action); }
.hrow .b { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.hrow b { font-size: 15px; line-height: 20px; font-weight: 600; }
.hrow p { font-size: 13px; line-height: 19px; color: var(--ink2); }
.badge { padding: 4px 10px; border-radius: 10px; font-size: 14px; font-weight: 600; background: var(--t-sun); color: var(--t-sun-ink); white-space: nowrap; }
.badge.ok { background: var(--t-leaf); color: var(--t-leaf-ink); }

/* travel layer teaser (04) */
.layer { background: #1C1A3A; color: #fff; border-radius: 32px; padding: 24px; display: grid; gap: 22px; }
@media (min-width: 860px) { .layer { grid-template-columns: 1fr 1fr; padding: 32px; gap: 32px; } }
.layer .tag { align-self: flex-start; height: 34px; background: #F6C744; color: #14122E; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px 0 10px; font-weight: 700; font-size: 13px; border-radius: 5px 17px 17px 5px; }
.layer .tag i { width: 8px; height: 8px; border-radius: 50%; background: #1C1A3A; }
.layer h3 { font-size: 26px; line-height: 1.15; font-weight: 700; text-wrap: balance; }
.layer .perks { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.4; }
.layer .perks span { display: flex; gap: 10px; align-items: flex-start; }
.layer .perks .ms { color: #F6C744; }
.layer .price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.layer .price b { font-size: 40px; line-height: 1; }
.layer .price span, .layer .fine { font-size: 14px; color: #CFCBF7; }
.layer .col { display: flex; flex-direction: column; gap: 16px; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.teasers { display: grid; gap: 12px; align-content: start; }
.must { background: #fff; color: #1C1A3A; border-radius: 24px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.must .k { font: 500 11px/1 'IBM Plex Mono', monospace; color: #5A5680; letter-spacing: .04em; text-transform: uppercase; }
.must b { font-size: 18px; line-height: 1.3; }
.must p { font-size: 14px; line-height: 1.45; color: #3A3760; }
.must .src { color: #5A5680; }
.sticker { background: #F6C744; color: #14122E; border-radius: 24px; padding: 18px; display: flex; flex-direction: column; gap: 10px; transform: rotate(-1.2deg); }
.sticker .top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; }
.sticker .top a { font: 500 11px/1 'IBM Plex Mono', monospace; color: #14122E; }
.sticker p { font-size: 19px; line-height: 1.35; font-weight: 700; }
.locked { display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.08); border-radius: 18px; padding: 12px 14px; font-size: 14px; color: #CFCBF7; }
.locked .ms { color: #F6C744; }

/* deep facts (05) */
.facts { display: grid; gap: 12px; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
table { width: 100%; border-collapse: collapse; }
caption { text-align: left; padding: 14px 16px 6px; font-size: 16px; font-weight: 600; caption-side: top; }
caption .ms { color: var(--action); vertical-align: -5px; margin-right: 8px; }
th, td { text-align: left; vertical-align: top; padding: 10px 16px; border-top: 1px solid var(--surface2); font-size: 14px; line-height: 20px; }
th { font-weight: 400; color: var(--ink3); width: 38%; }
td { font-weight: 500; }
td .src { display: block; font-weight: 400; margin-top: 3px; }
.facts .card { padding: 0 0 8px; gap: 0; }

/* about the data, other places */
.about { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 20px; color: var(--ink2); max-width: 760px; }
.sources { display: flex; flex-direction: column; gap: 4px; }
.sources a { font: 400 12px/18px 'IBM Plex Mono', monospace; color: var(--ink2); }
.near { display: flex; flex-wrap: wrap; gap: 8px; }
.near a { height: 40px; padding: 0 14px 0 8px; border-radius: 20px; background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
.near a:hover { text-decoration: none; background: var(--surface2); }
.near img { width: 24px; height: 16px; border-radius: 3px; object-fit: cover; }

/* A to Z */
.letters { display: flex; flex-direction: column; gap: 22px; }
.letter h2 { font-size: 18px; margin-bottom: 8px; color: var(--ink3); font-family: 'IBM Plex Mono', monospace; font-weight: 500; }

/* footer: the landing page's */
footer { background: #15123F; color: #CFCBF7; }
footer .wrap { max-width: 1200px; padding-top: 48px; padding-bottom: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px; }
footer .tag { display: flex; flex-direction: column; gap: 12px; max-width: 380px; font-size: 14px; line-height: 1.55; }
footer .brand b { font-size: 21px; }
footer .cols { display: flex; gap: 48px; flex-wrap: wrap; font-size: 15px; }
footer .cols div { display: flex; flex-direction: column; gap: 10px; }
footer .cols span { font-weight: 600; color: #fff; }
footer a { color: #CFCBF7; }
footer .fine { max-width: 1200px; margin: 0 auto; padding: 0 16px 32px; font-size: 13px; color: #B9B3F0; }
@media (min-width: 600px) { footer .fine { padding: 0 24px 32px; } }

/* 404 */
.lost { min-height: 60vh; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding-top: 48px; padding-bottom: 48px; }
.lost h1 { font-size: clamp(34px, 6vw, 56px); line-height: 1.05; font-weight: 700; letter-spacing: -.02em; }
.lost p { font-size: 18px; line-height: 1.55; color: var(--ink2); max-width: 560px; }
.btn { align-self: flex-start; height: 52px; padding: 0 22px; border-radius: 26px; background: var(--action); color: var(--on-action); display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.btn:hover { text-decoration: none; }