/* ==========================================================================
   BagsReady / شنطتك جاهزة - Palestine ➜ Europe travel companion
   Design tokens, RTL-first layout (logical properties everywhere)
   ========================================================================== */

:root{
  --green-900:#083b30; --green-700:#0f5c4a; --green-600:#14775f; --green-500:#1a9375;
  --green-100:#dcf1ea; --green-050:#eef8f5;
  --clay-600:#a8442d; --clay-500:#c4553a; --clay-100:#fbe7e1;
  --gold-600:#a37414; --gold-500:#c9911d; --gold-100:#fdf1d6;
  --sky-600:#1f5f96; --sky-100:#e2eefa;
  --plum-600:#6b3a86; --plum-100:#f0e6f7;

  /* The five ramps above are spoken for: green means done or settled law,
     gold means check this before you rely on it, clay means this can cost
     you the trip, sky means an official source, plum is a category tone.
     A brand colour taken from any of them would mute the one signal the
     app exists to give, so the brand takes the hue nobody is using. */
  --brand-900:#0d1418; --brand-700:#1a262d; --brand-600:#2c3d47;
  --brand-100:#dfe5e8; --brand-050:#eef1f3;

  --bg:#f6f5f1; --bg-elev:#ffffff; --bg-sunk:#eeece6;
  /* ink-3 is the secondary text colour, used at 11-13px - well under
     the size that would let it off with 3:1. At #69777f it was 4.23:1
     on the page background and failed on every light surface except
     pure white, which is not where most of it sits. Light is the
     default theme, so that was the default reading experience.
     #5c6a72 clears 4.5:1 on every surface it is actually used
     against: 5.12 on --bg, 5.59 on --bg-elev, 4.73 on --bg-sunk,
     4.92 on --accent-soft. Dark was already fine and is unchanged. */
  --ink:#131a1f; --ink-2:#3d4a52; --ink-3:#5c6a72;
  --line:#e0ddd5; --line-2:#cfcbc1;
  --accent:var(--brand-700); --accent-soft:var(--brand-050);
  --on-accent:#ffffff;
  --ring:0 0 0 3px rgba(44,61,71,.26);

  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --sh-1:0 1px 2px rgba(16,30,40,.06),0 1px 3px rgba(16,30,40,.05);
  --sh-2:0 4px 10px rgba(16,30,40,.07),0 12px 28px rgba(16,30,40,.06);
  --sh-3:0 18px 50px rgba(16,30,40,.16);

  --sans-ar:"IBM Plex Sans Arabic",system-ui,"Segoe UI",Tahoma,sans-serif;
  --sans-en:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font:var(--sans-ar);
  --topbar-h:62px; --sidebar-w:286px;
}

html[data-theme="dark"]{
  --bg:#0e1417; --bg-elev:#151d21; --bg-sunk:#0a0f12;
  --ink:#e9eeef; --ink-2:#b3c0c4; --ink-3:#7f8f95;
  --line:#253136; --line-2:#33434a;
  --green-100:#12332b; --green-050:#0f2a24;
  --clay-100:#3a1f18; --gold-100:#33280f; --sky-100:#122636; --plum-100:#241a2e;
  /* Ink inverts to bone on a dark ground; white-on-accent would vanish,
     so --on-accent flips with it. */
  --brand-100:#22303a; --brand-050:#18242c;
  --accent:#eef3f5; --accent-soft:#18242c; --on-accent:#0d1418;
  --sh-1:0 1px 2px rgba(0,0,0,.4); --sh-2:0 6px 22px rgba(0,0,0,.45);
  --sh-3:0 20px 60px rgba(0,0,0,.6);
}

html[lang="en"]{ --font:var(--sans-en); }

*,*::before,*::after{ box-sizing:border-box; }
/* A display rule on a component must never beat the hidden attribute. */
[hidden]{ display:none !important; }
html,body{ margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font); background:var(--bg); color:var(--ink);
  font-size:15.5px; line-height:1.68; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7;
     stroke-linecap:round; stroke-linejoin:round; }
a{ color:var(--accent); text-decoration:none; }
/* The brand is nearly achromatic, so colour alone no longer says "link".
   Anything already shaped like a button or a card carries a class and is
   left alone; a bare link inside running text gets the underline back. */
.main p a:not([class]),.main li a:not([class]),
.main td a:not([class]),.main dd a:not([class]){
  text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; }
a:hover{ text-decoration:underline; }
h1,h2,h3,h4{ line-height:1.3; margin:0 0 .5em; font-weight:700; letter-spacing:-.01em; }
h1{ font-size:1.85rem; } h2{ font-size:1.35rem; } h3{ font-size:1.08rem; } h4{ font-size:.98rem; }
p{ margin:0 0 1em; }
ul,ol{ margin:0 0 1em; padding-inline-start:1.35em; }
li{ margin-bottom:.4em; }
button{ font-family:inherit; font-size:inherit; cursor:pointer; }
input,select,textarea{ font-family:inherit; font-size:inherit; color:inherit; }
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:var(--r-xs); }

.skip-link{ position:fixed; inset-block-start:-100px; inset-inline-start:12px; z-index:999;
  background:var(--accent); color:var(--on-accent); padding:10px 16px; border-radius:0 0 var(--r-sm) var(--r-sm); }
.skip-link:focus{ inset-block-start:0; }

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; inset-block-start:0; z-index:60; height:var(--topbar-h);
  display:flex; align-items:center; gap:10px; padding-inline:12px;
  background:color-mix(in srgb, var(--bg-elev) 88%, transparent);
  backdrop-filter:saturate(1.5) blur(12px);
  border-block-end:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:9px; color:inherit; text-decoration:none; padding-inline:4px; }
.brand:hover{ text-decoration:none; }
/* The brand mark is drawn, not typed. The global svg rule sets a 20px box
   and a 1.7 stroke for interface icons; the mark states its own on the
   element, which wins, and only its box has to be reset here. */
.brand-mark{ display:flex; align-items:center; color:var(--accent); flex:none; }
.brand-mark svg{ width:27px; height:27px; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong{ font-size:1rem; }
.brand-text small{ color:var(--ink-3); font-size:.72rem; }

.topbar-search{
  /* min-width:0 is what lets this shrink at all: a flex item defaults
     to min-width:auto and would rather overflow the bar than get
     narrower than its own contents. */
  flex:1 1 0; min-width:0; max-width:520px; margin-inline:auto; position:relative;
  display:flex; align-items:center; gap:8px; padding:0 12px;
  background:var(--bg-sunk); border:1px solid var(--line); border-radius:999px; height:38px;
}
.topbar-search svg{ width:17px; height:17px; color:var(--ink-3); flex:none; }
.topbar-search input{ flex:1; border:0; background:transparent; outline:none; min-width:0; }
.topbar-search kbd{
  font-family:inherit; font-size:.7rem; color:var(--ink-3);
  border:1px solid var(--line-2); border-radius:5px; padding:1px 6px; }
.topbar-actions{ display:flex; align-items:center; gap:6px; flex:none; }

.icon-btn{
  display:grid; place-items:center; width:38px; height:38px; flex:none;
  border:1px solid transparent; border-radius:11px; background:transparent; color:var(--ink-2);
}
.icon-btn:hover{ background:var(--bg-sunk); color:var(--ink); }
.pill-btn{
  height:38px; padding-inline:14px; border-radius:999px; font-weight:600; font-size:.82rem;
  border:1px solid var(--line-2); background:var(--bg-elev); color:var(--ink-2);
}
.pill-btn:hover{ border-color:var(--accent); color:var(--accent); }
.ico-moon{ display:none; }
html[data-theme="dark"] .ico-sun{ display:none; }
html[data-theme="dark"] .ico-moon{ display:block; }
.nav-toggle{ display:none; }

/* ---------- Layout ---------- */
.layout{ display:flex; align-items:flex-start; }
.sidebar{
  position:sticky; inset-block-start:var(--topbar-h); flex:none;
  width:var(--sidebar-w); height:calc(100vh - var(--topbar-h));
  overflow-y:auto; overscroll-behavior:contain;
  padding:16px 14px 28px; border-inline-end:1px solid var(--line);
  background:var(--bg-elev);
}
.main{ flex:1; min-width:0; padding:26px clamp(16px,3.2vw,44px) 90px; max-width:1180px; }
.main:focus{ outline:none; }

/* ---------- Trip card (sidebar) ---------- */
.trip-card{
  background:linear-gradient(150deg,var(--brand-700),var(--brand-900));
  color:#fff; border-radius:var(--r-lg); padding:15px 16px; margin-block-end:16px;
  box-shadow:var(--sh-2); position:relative; overflow:hidden;
}
/* On a dark ground the ink gradient is nearly the page itself, so the card
   is lifted a step and given an edge instead of relying on contrast. */
html[data-theme="dark"] .trip-card{
  background:linear-gradient(150deg,#26363f,#161f26); border:1px solid var(--line-2); }
.trip-card::after{ content:""; position:absolute; inset-block-start:-40px; inset-inline-end:-30px;
  width:130px; height:130px; border-radius:50%; background:rgba(255,255,255,.07); }
.trip-card .tc-route{ font-weight:700; font-size:1rem; display:flex; align-items:center; gap:7px; }
.trip-card .tc-meta{ font-size:.76rem; opacity:.85; margin-block-start:2px; }
.trip-card .tc-count{ font-size:2rem; font-weight:700; line-height:1.1; margin-block-start:10px; }
.trip-card .tc-count small{ font-size:.75rem; font-weight:500; opacity:.85; }
.trip-card .tc-bar{ height:6px; border-radius:99px; background:rgba(255,255,255,.22); margin-block-start:12px; overflow:hidden; }
.trip-card .tc-bar span{ display:block; height:100%; background:var(--gold-500); border-radius:99px; transition:width .5s ease; }
.trip-card .tc-prog{ font-size:.74rem; opacity:.9; margin-block-start:6px; display:flex; justify-content:space-between; }

/* ---------- Nav ---------- */
.nav-list{ list-style:none; margin:0; padding:0; }
.nav-group-title{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.09em; font-weight:700;
  color:var(--ink-3); padding:14px 10px 5px; }
.nav-list a{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm);
  color:var(--ink-2); font-size:.9rem; font-weight:500; text-decoration:none;
}
.nav-list a:hover{ background:var(--bg-sunk); color:var(--ink); text-decoration:none; }
.nav-list a.active{ background:var(--accent-soft); color:var(--accent); font-weight:600; }
.nav-list a .ni{ font-size:1rem; width:22px; text-align:center; flex:none; }
.nav-list a .nb{
  margin-inline-start:auto; font-size:.68rem; font-weight:700; padding:1px 7px; border-radius:99px;
  background:var(--bg-sunk); color:var(--ink-3); }
.nav-list a.active .nb{ background:var(--accent); color:var(--on-accent); }

.sidebar-foot{ margin-block-start:20px; padding-block-start:14px; border-block-start:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px; }
.ghost-btn{
  border:1px solid var(--line-2); background:transparent; color:var(--ink-2);
  border-radius:var(--r-sm); padding:6px 12px; font-size:.8rem; font-weight:500; }
.ghost-btn:hover{ border-color:var(--accent); color:var(--accent); }
.privacy-note{ font-size:.7rem; color:var(--ink-3); line-height:1.5; margin:6px 0 0; flex-basis:100%; }

/* ---------- Page head ---------- */
.page-head{ margin-block-end:22px; }
.page-eyebrow{ font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.page-head p.lede{ color:var(--ink-2); font-size:1.02rem; max-width:74ch; margin-block-end:0; }

/* ---------- Cards & generic blocks ---------- */
.card{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 20px; box-shadow:var(--sh-1); margin-block-end:16px; }
.card.tight{ padding:14px 16px; }
.card-head{ display:flex; align-items:center; gap:10px; margin-block-end:10px; flex-wrap:wrap; }
.card-head h2,.card-head h3{ margin:0; }
.card-head .spacer{ flex:1; }

.grid{ display:grid; gap:16px; }
.grid.g2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.grid.g3{ grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.grid.g4{ grid-template-columns:repeat(auto-fit,minmax(175px,1fr)); }

.tag{ display:inline-flex; align-items:center; gap:5px; font-size:.72rem; font-weight:600;
  padding:2px 9px; border-radius:99px; background:var(--bg-sunk); color:var(--ink-2); white-space:nowrap; }
.tag.green{ background:var(--green-100); color:var(--green-600); }
.tag.gold{ background:var(--gold-100); color:var(--gold-600); }
.tag.clay{ background:var(--clay-100); color:var(--clay-600); }
.tag.sky{ background:var(--sky-100); color:var(--sky-600); }
.tag.plum{ background:var(--plum-100); color:var(--plum-600); }

.callout{ border-radius:var(--r-md); padding:13px 16px; margin-block-end:14px;
  border-inline-start:4px solid var(--accent); background:var(--accent-soft); font-size:.92rem; }
.callout p:last-child{ margin-block-end:0; }
.callout strong{ display:block; margin-block-end:2px; }
.callout.warn{ border-color:var(--clay-500); background:var(--clay-100); }
.callout.tip{ border-color:var(--gold-500); background:var(--gold-100); }
.callout.info{ border-color:var(--sky-600); background:var(--sky-100); }

.stat{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-md); padding:13px 15px; }
.stat .sv{ font-size:1.5rem; font-weight:700; line-height:1.2; }
.stat .sl{ font-size:.76rem; color:var(--ink-3); }

/* ---------- Checklist ---------- */
.phase{ margin-block-end:14px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--bg-elev); overflow:hidden; box-shadow:var(--sh-1); }
.phase-head{ display:flex; align-items:center; gap:12px; padding:14px 18px; cursor:pointer;
  background:var(--bg-elev); border:0; width:100%; text-align:start; color:inherit; }
.phase-head:hover{ background:var(--bg-sunk); }
.phase-when{ font-size:.7rem; font-weight:700; padding:3px 9px; border-radius:99px;
  background:var(--accent-soft); color:var(--accent); flex:none; }
.phase-title{ font-weight:700; font-size:1rem; }
.phase-sub{ font-size:.78rem; color:var(--ink-3); }
.phase-prog{ margin-inline-start:auto; display:flex; align-items:center; gap:9px; flex:none; }
.mini-bar{ width:74px; height:6px; border-radius:99px; background:var(--bg-sunk); overflow:hidden; }
.mini-bar span{ display:block; height:100%; background:var(--green-500); transition:width .4s ease; }
.phase-prog .pc{ font-size:.76rem; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.chev{ transition:transform .25s ease; color:var(--ink-3); }
.phase[open] .chev,.phase.open .chev{ transform:rotate(180deg); }
.phase-body{ border-block-start:1px solid var(--line); padding:6px 0; }
.phase.collapsed .phase-body{ display:none; }

.task{ display:flex; gap:12px; padding:11px 18px; border-block-end:1px solid var(--line); }
.task:last-child{ border-block-end:0; }
.task.is-done{ background:var(--green-050); }
.task.is-done .task-title{ text-decoration:line-through; color:var(--ink-3); }
.task.is-na{ opacity:.5; }
.task-check{ flex:none; width:22px; height:22px; margin-block-start:2px; border-radius:7px;
  border:2px solid var(--line-2); background:transparent; display:grid; place-items:center; padding:0; }
.task-check svg{ width:14px; height:14px; stroke-width:3; opacity:0; color:#fff; }
.task.is-done .task-check{ background:var(--green-600); border-color:var(--green-600); }
.task.is-done .task-check svg{ opacity:1; }
.task-main{ flex:1; min-width:0; }
.task-title{ font-weight:600; font-size:.95rem; }
.task-desc{ font-size:.85rem; color:var(--ink-2); margin-block-start:2px; }
.task-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-block-start:7px; align-items:center; }
.task-actions{ display:flex; gap:4px; flex:none; align-items:flex-start; }
.mini-btn{ border:1px solid var(--line); background:transparent; color:var(--ink-3);
  border-radius:8px; padding:3px 8px; font-size:.74rem; }
.mini-btn:hover{ border-color:var(--accent); color:var(--accent); }
.mini-btn.on{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

/* The row linking the three money pages to each other. Slightly larger
   than a task's mini-btn because this one is a destination rather than
   an action on the row it sits in, and it is the first thing under the
   page heading. The current page is a span, not a link, so it takes the
   .on fill without a pointer cursor. */
.money-nav{ margin-block-start:-4px; margin-block-end:18px; }
.money-nav .mini-btn{ padding:6px 12px; font-size:.82rem; text-decoration:none; }
.note-box{ margin-block-start:9px; }
.note-box textarea{
  width:100%; min-height:64px; resize:vertical; border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:9px 11px; background:var(--bg); outline:none; font-size:.87rem; }
.note-box textarea:focus{ box-shadow:var(--ring); border-color:var(--accent); }
.note-saved{ font-size:.72rem; color:var(--ink-3); margin-block-start:4px; display:block; }
.note-preview{ font-size:.83rem; background:var(--gold-100); border-radius:var(--r-sm);
  padding:7px 11px; margin-block-start:7px; color:var(--ink-2); white-space:pre-wrap;
  border-inline-start:3px solid var(--gold-500); }

/* status chips */
.status-row{ display:flex; gap:5px; flex-wrap:wrap; }
.chip{ border:1px solid var(--line); background:transparent; border-radius:99px;
  padding:2px 10px; font-size:.72rem; font-weight:600; color:var(--ink-3); }
.chip:hover{ border-color:var(--accent); }
.chip[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.chip.s-issue[aria-pressed="true"]{ background:var(--clay-500); border-color:var(--clay-500); }
.chip.s-doing[aria-pressed="true"]{ background:var(--gold-500); border-color:var(--gold-500); }
.chip.s-na[aria-pressed="true"]{ background:var(--ink-3); border-color:var(--ink-3); }

/* ---------- Tables ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg-elev); }
table{ border-collapse:collapse; width:100%; font-size:.88rem; min-width:520px; }
th,td{ padding:10px 13px; text-align:start; border-block-end:1px solid var(--line); vertical-align:top; }
th{ background:var(--bg-sunk); font-weight:700; font-size:.78rem; text-transform:uppercase;
    letter-spacing:.04em; color:var(--ink-2); white-space:nowrap; }
tbody tr:last-child td{ border-block-end:0; }
tbody tr:hover{ background:var(--accent-soft); }
td.num{ font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---------- Forms ---------- */
.field{ margin-block-end:12px; }
.field label{ display:block; font-size:.78rem; font-weight:600; color:var(--ink-2); margin-block-end:4px; }
.field input,.field select,.field textarea{
  width:100%; padding:9px 12px; border:1px solid var(--line-2); border-radius:var(--r-sm);
  background:var(--bg); outline:none; }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--accent); box-shadow:var(--ring); }
.field .hint{ font-size:.73rem; color:var(--ink-3); margin-block-start:3px; }
.btn{ border:0; border-radius:var(--r-sm); padding:9px 18px; font-weight:600; font-size:.88rem;
  background:var(--accent); color:var(--on-accent); }
.btn:hover{ filter:brightness(1.08); }
.btn.sec{ background:var(--bg-sunk); color:var(--ink-2); }
.btn.danger{ background:var(--clay-500); }
.row{ display:flex; gap:12px; flex-wrap:wrap; }
.row>*{ flex:1; min-width:150px; }

/* ---------- Comparison cards ---------- */
.cmp{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-elev);
  padding:15px 17px; position:relative; box-shadow:var(--sh-1); }
.cmp.best{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft),var(--sh-1); }
.cmp .best-flag{ position:absolute; inset-block-start:-11px; inset-inline-start:16px;
  background:var(--accent); color:var(--on-accent); font-size:.68rem; font-weight:700; padding:2px 10px; border-radius:99px; }
.cmp h4{ margin:0 0 3px; }
.cmp .cmp-price{ font-size:1.35rem; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; }
.cmp dl{ display:grid; grid-template-columns:auto 1fr; gap:3px 10px; font-size:.82rem; margin:10px 0 0; }
.cmp dt{ color:var(--ink-3); } .cmp dd{ margin:0; font-weight:500; }
.cmp .cmp-actions{ margin-block-start:12px; display:flex; gap:6px; }

/* ---------- Map / flow diagram ---------- */
.flowmap{ background:var(--bg-elev); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px; overflow-x:auto; }
.flowmap svg{ width:100%; min-width:680px; height:auto; stroke:none; }
.legend{ display:flex; flex-wrap:wrap; gap:12px; margin-block-start:12px; font-size:.78rem; color:var(--ink-2); }
.legend i{ width:12px; height:12px; border-radius:4px; display:inline-block; margin-inline-end:5px; vertical-align:-1px; }

.steps{ list-style:none; padding:0; margin:0; }
.steps li{ position:relative; padding-inline-start:38px; padding-block-end:20px; }
.steps li::before{ content:attr(data-n); position:absolute; inset-inline-start:0; inset-block-start:0;
  width:26px; height:26px; border-radius:50%; background:var(--accent); color:var(--on-accent);
  display:grid; place-items:center; font-size:.78rem; font-weight:700; }
.steps li::after{ content:""; position:absolute; inset-inline-start:12.5px; inset-block-start:28px;
  bottom:2px; width:1.5px; background:var(--line-2); }
.steps li:last-child::after{ display:none; }
.steps li h4{ margin:2px 0 3px; }
.steps li p{ margin:0 0 6px; font-size:.89rem; color:var(--ink-2); }

/* ---------- Accordions / FAQ ---------- */
/* ---------- FAQ ----------
   A question you can press, and the answer underneath it. Same
   mechanics as a folded section and deliberately a lighter weight:
   these sit inside a section, so if they carried the same emphasis the
   page would have two competing levels of the same shape and the
   reader would lose track of which one they were inside. */
details.acc{ border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--bg); margin-block-end:7px; overflow:hidden;
  transition:border-color .18s ease; }
details.acc:last-child{ margin-block-end:0; }
details.acc:hover{ border-color:var(--line-2); }
details.acc[open]{ background:var(--bg-elev); border-color:var(--line-2); }
details.acc>summary{ cursor:pointer; list-style:none; display:flex;
  align-items:flex-start; gap:11px; padding:13px 15px; min-height:48px;
  font-weight:600; font-size:.92rem; line-height:1.5; color:var(--ink);
  transition:background .15s ease; }
details.acc>summary::-webkit-details-marker{ display:none; }
details.acc>summary::after{ content:none; }
details.acc>summary:hover{ background:var(--bg-sunk); }
details.acc>summary:focus-visible{ outline:2px solid var(--accent);
  outline-offset:-2px; border-radius:var(--r-md); }
details.acc[open]>summary{ color:var(--accent); }
/* The question mark carries the affordance, so the row reads as a
   question before it reads as a control. */
details.acc>summary::before{ content:"؟"; flex:none; font-weight:700;
  font-size:.86rem; color:var(--ink-3); inline-size:18px; text-align:center;
  margin-block-start:1px; transition:color .18s ease; }
html[lang="en"] details.acc>summary::before{ content:"?"; }
details.acc:hover>summary::before,
details.acc[open]>summary::before{ color:var(--accent); }
.acc-q{ flex:1; min-width:0; }

.acc-body{ padding:2px 16px 15px; font-size:.92rem; color:var(--ink-2); line-height:1.72; }
.acc-body> :last-child{ margin-block-end:0; }
.acc-body>p{ max-width:66ch; }

/* ---------- Folded sections ----------
   A long page collapsed to its own headings. The closed state has to
   read as a row you can press, not as a heading that happens to have a
   line under it, so it gets a card's surface, a real 52px target and a
   mark that turns rather than a character that swaps.

   The open one is what the reader chose, so it is the one with colour:
   an accent rule down the inside edge (logical, so it stays on the
   correct side in both directions) and a slightly lifted surface. */
.sections{ margin-block-start:6px; }

.sec-tools{ display:flex; align-items:center; gap:8px; margin-block-end:10px;
  padding-block-end:2px; }
.sec-count{ font-size:.76rem; color:var(--ink-3); font-weight:600;
  letter-spacing:.02em; text-transform:uppercase; }
.sec-tools .spacer{ flex:1; }
.sec-tools .mini-btn{ padding:5px 11px; font-size:.78rem; }

details.sec{ border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--bg-elev); margin-block-end:9px; overflow:hidden;
  transition:border-color .18s ease, box-shadow .18s ease; }
details.sec:last-child{ margin-block-end:0; }
details.sec:hover{ border-color:var(--line-2); }
details.sec[open]{ border-color:var(--line-2); box-shadow:var(--sh-1); }

details.sec>summary{ cursor:pointer; list-style:none; display:flex;
  align-items:center; gap:12px; padding:15px 17px; min-height:52px;
  font-weight:650; font-size:.97rem; color:var(--ink); line-height:1.4;
  transition:background .15s ease; }
details.sec>summary::-webkit-details-marker{ display:none; }
details.sec>summary:hover{ background:var(--bg-sunk); }
details.sec>summary:focus-visible{ outline:2px solid var(--accent);
  outline-offset:-2px; border-radius:var(--r-md); }
.sec-title{ flex:1; min-width:0; }

/* A chevron drawn in CSS: two borders on a rotated square. Cheaper than
   an icon font, and it turns instead of being replaced, so opening a
   section is a movement the eye follows rather than a character
   swapping under the pointer. */
.sec-mark{ flex:none; inline-size:9px; block-size:9px; margin-inline-end:2px;
  /* Physical borders, deliberately, where the rest of this file is
     logical: a chevron that means "there is more below" points down,
     and down is the same direction in Arabic as in English. Written
     with border-inline-end it pointed down in one language and
     sideways in the other, which is how it first shipped. */
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  border-radius:1px; transform:rotate(45deg); transform-origin:center;
  transition:transform .22s cubic-bezier(.4,0,.2,1), border-color .18s ease;
  margin-block-start:-4px; }
details.sec[open]>summary .sec-mark{ transform:rotate(225deg); margin-block-start:3px; }
details.sec>summary:hover .sec-mark{ border-color:var(--accent); }

.sec-body{ padding:0 17px 17px; border-block-start:1px solid var(--line);
  margin-block-start:-1px; padding-block-start:15px; }
.sec-body> :first-child{ margin-block-start:0; }
.sec-body> :last-child{ margin-block-end:0; }
/* Inside a section the page has already given a heading, so the
   sub-headings step down rather than competing with the summary. */
.sec-body .sec-h{ font-size:1rem; margin-block-start:20px; }
.sec-body .sec-h:first-child{ margin-block-start:0; }
/* Prose that stops at a readable measure. The cards and tables beside
   it still use the full width - only running text is capped, because
   that is the only thing a long line actually costs you. */
.sec-body>p{ max-width:66ch; }

/* The accent edge marks the section the reader chose to open. Solid
   accent at a low opacity rather than the pale --accent-soft, which is
   a fill colour and disappears entirely against the card behind it. */
details.sec[open]>.sec-body{ border-inline-start:3px solid var(--accent);
  padding-inline-start:14px; }
details.sec[open]>summary{ color:var(--accent); }
details.sec[open]>summary .sec-mark{ border-color:var(--accent); }

@media (prefers-reduced-motion: reduce){
  .sec-mark, details.sec{ transition:none; }
}

/* ---------- Phrasebook ---------- */
.phrase{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; padding:10px 14px;
  border-block-end:1px solid var(--line); align-items:center; }
.phrase:last-child{ border-block-end:0; }
.phrase .hu{ font-weight:700; color:var(--accent); }
.phrase .pron{ font-size:.78rem; color:var(--ink-3); font-style:italic; }

/* ---------- Search results ---------- */
.sr-item{ display:block; padding:11px 14px; border-block-end:1px solid var(--line); color:inherit; }
.sr-item:last-child{ border:0; }
.sr-item:hover{ background:var(--accent-soft); text-decoration:none; }
.sr-item .sr-where{ font-size:.72rem; color:var(--accent); font-weight:700; }
.sr-item .sr-title{ font-weight:600; }
.sr-item .sr-snip{ font-size:.83rem; color:var(--ink-3); }
mark{ background:var(--gold-100); color:inherit; padding:0 2px; border-radius:3px; }

/* ---------- Toast / modal ---------- */
.toast{ position:fixed; inset-block-end:22px; inset-inline-start:50%; transform:translateX(-50%);
  background:var(--ink); color:var(--bg); padding:11px 20px; border-radius:99px; z-index:200;
  box-shadow:var(--sh-3); font-size:.87rem; font-weight:500; }
html[dir="rtl"] .toast{ transform:translateX(50%); }
.modal{ border:0; border-radius:var(--r-lg); padding:0; max-width:560px; width:calc(100% - 32px);
  background:var(--bg-elev); color:var(--ink); box-shadow:var(--sh-3); }
.modal::backdrop{ background:rgba(8,20,16,.55); backdrop-filter:blur(3px); }
.modal-inner{ padding:22px 24px; }
.modal-actions{ display:flex; gap:9px; justify-content:flex-end; margin-block-start:16px; }

/* ---------- Misc helpers ---------- */
.muted{ color:var(--ink-3); }
.small{ font-size:.83rem; }
.center{ text-align:center; }
.mb0{ margin-block-end:0; }
.mt16{ margin-block-start:16px; }
.hr{ height:1px; background:var(--line); margin:18px 0; border:0; }
.pill-row{ display:flex; gap:7px; flex-wrap:wrap; margin-block-end:14px; }
.pill-row .chip{ padding:5px 13px; font-size:.8rem; background:var(--bg-elev); }
/* .pill-row .chip sets its own background at the same specificity as
   .chip[aria-pressed="true"] and comes later, so it won the background
   while the pressed rule kept color:#fff. That left the selected chip as
   white text on white. The pressed state has to be restated here. */
.pill-row .chip[aria-pressed="true"]{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.kv{ display:grid; grid-template-columns:auto 1fr; gap:5px 14px; font-size:.88rem; }
.kv dt{ color:var(--ink-3); } .kv dd{ margin:0; }
.checkline{ display:flex; gap:8px; align-items:flex-start; font-size:.9rem; margin-block-end:6px; }
.checkline::before{ content:"✓"; color:var(--green-600); font-weight:700; flex:none; }
.xline::before{ content:"✕"; color:var(--clay-500); }
.verify{ font-size:.72rem; color:var(--gold-600); font-weight:600; }
.src-list{ font-size:.8rem; }
.src-list li{ margin-bottom:.25em; }
.empty{ text-align:center; padding:34px 18px; color:var(--ink-3); }
.empty .big{ font-size:2rem; }

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .nav-toggle{ display:grid; }
  .sidebar{
    position:fixed; inset-block-start:var(--topbar-h); inset-inline-start:0; z-index:70;
    transform:translateX(-105%); transition:transform .28s ease; box-shadow:var(--sh-3);
  }
  html[dir="rtl"] .sidebar{ transform:translateX(105%); }
  .sidebar.open{ transform:translateX(0)!important; }
  .sidebar-scrim{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:65; }
  .topbar-search{ max-width:none; }
  .topbar-search kbd{ display:none; }
}
@media (max-width:660px){
  .brand-text{ display:none; }
  .topbar-search{ flex:1 1 auto; min-width:0; margin-inline:6px; }
  .topbar{ gap:6px; padding-inline:8px; }
  .phrase{ grid-template-columns:1fr; gap:2px; }
  .phase-head{ flex-wrap:wrap; }
  .main{ padding-inline:14px; }
}

/* ---------- Print ---------- */
@media print{
  .topbar,.sidebar,.sidebar-scrim,.task-actions,.mini-btn,.chip,.btn,.ghost-btn{ display:none!important; }
  body{ background:#fff; font-size:11pt; }
  .main{ padding:0; max-width:none; }
  .card,.phase,.table-wrap{ break-inside:avoid; box-shadow:none; border-color:#bbb; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:8pt; color:#555; }
  .phase.collapsed .phase-body{ display:block!important; }
}

/* ==========================================================================
   Flow maps, tone cards and section headings
   ========================================================================== */
.sec-h{ margin-block:26px 12px; padding-block-end:7px; border-block-end:2px solid var(--line);
  font-size:1.22rem; }
.sec-h:first-child{ margin-block-start:0; }

.mini-card{ margin-block-end:0; }
.mini-card h3{ font-size:1rem; margin-block-end:5px; }
.mini-card p{ font-size:.89rem; color:var(--ink-2); }
.mini-card .tag{ margin-block-end:7px; }
.mini-card.tone-green{ border-inline-start:4px solid var(--green-500); }
.mini-card.tone-gold{ border-inline-start:4px solid var(--gold-500); }
.mini-card.tone-clay{ border-inline-start:4px solid var(--clay-500); }
.mini-card.tone-sky{ border-inline-start:4px solid var(--sky-600); }
.mini-card.tone-plum{ border-inline-start:4px solid var(--plum-600); }

/* Activities. A category heading, then cards that each answer the same
   four questions in the same order, so two of them can be compared by
   looking down rather than by reading both. The facts sit in a
   definition list because that is what they are - a label and its
   value - and because it wraps to one column on a phone without the
   labels losing the values they belong to. */
.act-cat{ font-size:.95rem; margin:22px 0 10px; color:var(--ink-2);
          letter-spacing:.01em; }
.act-cat:first-child{ margin-block-start:4px; }
.act-head{ display:flex; flex-wrap:wrap; gap:6px; margin-block-end:7px; }
.act-head .tag{ margin-block-end:0; }
.act h3{ margin-block-end:6px; }
.act p{ margin-block-end:10px; }
.act-facts{ margin:0; display:grid; gap:6px; }
.act-facts>div{ display:grid; grid-template-columns:minmax(7.5rem,auto) 1fr; gap:4px 10px;
                align-items:baseline; border-block-start:1px solid var(--line);
                padding-block-start:6px; }
.act-facts>div:first-child{ border-block-start:0; padding-block-start:0; }
.act-facts dt{ font-size:.76rem; font-weight:600; color:var(--ink-3);
               text-transform:uppercase; letter-spacing:.03em; }
.act-facts dd{ margin:0; font-size:.86rem; color:var(--ink-2); }
@media (max-width:560px){
  .act-facts>div{ grid-template-columns:1fr; }
}

/* The pace chip on a day in a written plan. */
.steps .tag{ margin-block:0 6px; }

.flowmap{ margin:0 0 18px; }
.fmap-title{ font-weight:700; font-size:.95rem; margin-block-end:14px; color:var(--ink); }
.fmap{ display:flex; flex-wrap:wrap; align-items:stretch; gap:8px; min-width:0; }
.fnode{
  flex:1 1 190px; min-width:170px; max-width:270px; position:relative;
  border:1px solid var(--line-2); border-radius:var(--r-md); padding:32px 12px 12px;
  background:var(--bg); display:flex; flex-direction:column; gap:2px;
}
.fnode .fnum{
  position:absolute; inset-block-start:9px; inset-inline-start:11px;
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center;
  font-size:.68rem; font-weight:700; background:var(--ink-3); color:var(--bg-elev); }
.fnode .fico{ position:absolute; inset-block-start:8px; inset-inline-end:11px; font-size:1rem; }
.fnode .flabel{ font-weight:700; font-size:.9rem; line-height:1.35; }
.fnode .fsub{ font-size:.78rem; color:var(--ink-3); line-height:1.45; }
/* Step detail: what you pay here, and what to have in your hand. */
.fcost,.fprep{ display:block; font-size:.72rem; line-height:1.45; margin-block-start:6px;
  padding-block-start:6px; border-block-start:1px dashed var(--line); color:var(--ink-2); }
.fcost b,.fprep b{ color:var(--ink); }
.fcost{ border-block-start:0; padding-block-start:0; }

.farrow{
  align-self:center; color:var(--line-2); font-size:1.5rem; font-weight:700;
  line-height:1; flex:0 0 auto; }
html[dir="rtl"] .farrow{ transform:scaleX(-1); }

.fnode.k-start{ border-color:var(--green-500); background:var(--green-050); }
.fnode.k-start .fnum{ background:var(--green-600); }
.fnode.k-end{ border-color:var(--green-500); background:var(--green-050); }
.fnode.k-end .fnum{ background:var(--green-600); }
.fnode.k-check{ border-color:var(--sky-600); background:var(--sky-100); }
.fnode.k-check .fnum{ background:var(--sky-600); }
.fnode.k-security{ border-color:var(--clay-500); background:var(--clay-100); }
.fnode.k-security .fnum{ background:var(--clay-500); }
.fnode.k-pay{ border-color:var(--gold-500); background:var(--gold-100); }
.fnode.k-pay .fnum{ background:var(--gold-600); }
.fnode.k-wait{ border-color:var(--gold-500); background:var(--gold-100); }
.fnode.k-wait .fnum{ background:var(--gold-600); }
.fnode.k-transport{ border-color:var(--plum-600); background:var(--plum-100); }
.fnode.k-transport .fnum{ background:var(--plum-600); }
.fnode.k-bag{ border-color:var(--line-2); }
.fnode.k-info{ border-color:var(--line-2); }

.legend i.lg-start,.legend i.lg-end{ background:var(--green-500); }
.legend i.lg-check{ background:var(--sky-600); }
.legend i.lg-security{ background:var(--clay-500); }
.legend i.lg-pay,.legend i.lg-wait{ background:var(--gold-500); }
.legend i.lg-transport{ background:var(--plum-600); }
.legend i.lg-bag,.legend i.lg-info{ background:var(--line-2); }

@media (max-width:660px){
  .fmap{ flex-direction:column; }
  .fnode{ max-width:none; width:100%; }
  .farrow{ transform:rotate(90deg); }
  html[dir="rtl"] .farrow{ transform:rotate(90deg); }
}

/* budget inputs */
.bud-input{ padding:5px 8px; border:1px solid var(--line-2); border-radius:7px; background:var(--bg); }

/* dashboard task rows have no side padding */
.task[style*="padding-inline:0"]{ border-block-end:1px solid var(--line); }

@media (max-width:520px){
  /* give the search field room on small phones */
  #printBtn{ display:none; }
  .brand-mark svg{ width:23px; height:23px; }
}

/* ==========================================================================
   Search launcher - one-tap, pre-filled searches on the price sites
   ========================================================================== */
.provider-grid{
  display:grid; gap:10px; margin-block-start:14px;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
}
.provider{
  display:grid; gap:3px; align-content:start;
  border:1px solid var(--line-2); border-radius:var(--r-md);
  padding:13px 15px; background:var(--bg); color:var(--ink); text-decoration:none;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.provider:hover{
  text-decoration:none; border-color:var(--accent);
  box-shadow:var(--sh-2); transform:translateY(-1px);
}
.provider .pv-name{ font-weight:700; font-size:.98rem; }
.provider .tag{ justify-self:start; margin-block:2px 4px; }
.provider .pv-note{ font-size:.79rem; color:var(--ink-3); line-height:1.5; }
.provider .pv-go{ font-size:.79rem; font-weight:600; color:var(--accent); margin-block-start:6px; }
@media (prefers-reduced-motion:reduce){ .provider{ transition:none; } .provider:hover{ transform:none; } }

/* ==========================================================================
   Account, sign-in and sync status
   ========================================================================== */
.sync-pill{
  display:inline-flex; align-items:center; gap:7px; height:34px;
  padding-inline:12px; border-radius:999px; text-decoration:none;
  border:1px solid var(--line-2); background:var(--bg-elev);
  color:var(--ink-2); font-size:.78rem; font-weight:600; white-space:nowrap;
}
.sync-pill:hover{ text-decoration:none; border-color:var(--accent); color:var(--accent); }
.sync-pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--ink-3); flex:none; }
.sync-pill.s-synced .dot{ background:var(--green-500); }
.sync-pill.s-syncing .dot{ background:var(--sky-600); animation:pulse 1.1s ease-in-out infinite; }
.sync-pill.s-offline .dot,.sync-pill.s-conflict .dot{ background:var(--gold-500); }
.sync-pill.s-error .dot{ background:var(--clay-500); }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
@media (prefers-reduced-motion:reduce){ .sync-pill.s-syncing .dot{ animation:none; } }

.auth-wrap{ display:grid; gap:16px; grid-template-columns:minmax(0,1fr); max-width:900px; }
@media (min-width:820px){ .auth-wrap{ grid-template-columns:minmax(0,420px) minmax(0,1fr); align-items:start; } }
.auth-card{ margin:0; }
.auth-aside{ margin:0; }
.auth-tabs{ display:flex; gap:4px; padding:4px; background:var(--bg-sunk);
  border-radius:999px; margin-block-end:18px; }
.auth-tab{
  flex:1; border:0; background:transparent; color:var(--ink-3);
  padding:8px 10px; border-radius:999px; font-weight:600; font-size:.88rem;
}
.auth-tab.on{ background:var(--bg-elev); color:var(--accent); box-shadow:var(--sh-1); }
.auth-submit{ width:100%; margin-block-start:6px; }
.auth-msg{ font-size:.83rem; margin:10px 0 0; min-height:1.2em; }
.auth-msg.err{ color:var(--clay-500); }
.auth-msg.ok{ color:var(--green-600); }

/* Password strength: three states, colour plus a word, never colour on
   its own - the reading it gives has to survive being colour-blind. */
.pw-meter{ display:flex; align-items:center; gap:9px; margin-block-start:7px; font-size:.78rem; }
.pw-meter .pw-bar{ flex:1; height:5px; border-radius:99px; background:var(--bg-sunk); overflow:hidden; }
.pw-meter .pw-bar i{ display:block; height:100%; border-radius:99px; transition:width .25s ease, background .25s ease; }
.pw-meter .pw-word{ font-weight:600; flex:none; }
.pw-meter.lv0 .pw-bar i{ width:33%; background:var(--clay-500); }
.pw-meter.lv1 .pw-bar i{ width:66%; background:var(--gold-500); }
.pw-meter.lv2 .pw-bar i{ width:100%; background:var(--green-500); }
.pw-meter.lv0 .pw-word{ color:var(--clay-600); }
.pw-meter.lv1 .pw-word{ color:var(--gold-600); }
.pw-meter.lv2 .pw-word{ color:var(--green-600); }
.pw-warn{ margin-block:12px; }
.linkish{
  display:block; width:100%; margin-block-start:14px; background:none; border:0;
  color:var(--accent); font-size:.85rem; text-align:center; text-decoration:underline;
}
@media (max-width:520px){ .sync-pill .sp-text{ display:none; } .sync-pill{ padding-inline:10px; } }

/* ==========================================================================
   Destination picker
   ========================================================================== */
.dest-grid{
  display:grid; gap:11px; margin-block-start:16px;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
}
.dest-card{
  display:grid; gap:2px; justify-items:start; text-align:start;
  border:1px solid var(--line-2); border-radius:var(--r-md);
  background:var(--bg-elev); color:var(--ink); padding:14px 15px;
  font-family:inherit; transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.dest-card:hover{ border-color:var(--accent); box-shadow:var(--sh-2); transform:translateY(-1px); }
.dest-card.on{ border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 2px var(--accent-soft); }
.dc-flag{ font-size:1.7rem; line-height:1.1; }
.dc-name{ font-weight:700; font-size:.98rem; }
.dc-cap{ font-size:.79rem; color:var(--ink-3); }
.dc-meta{ display:flex; align-items:center; gap:8px; margin-block-start:7px; }
.dc-budget{ font-size:.79rem; color:var(--ink-2); font-weight:600; margin-block-start:3px; }
.dc-budget small{ font-weight:400; color:var(--ink-3); }
.dc-on{ font-size:.74rem; font-weight:700; color:var(--accent); margin-block-start:5px; }
/* The entry rule on a destination card. It uses the same chip as the
   passport pages, so one status looks identical everywhere on the site,
   and it sits on the currency row, which is the other thing that
   decides whether a country is worth reading about at all. */
.dc-meta{ flex-wrap:wrap; row-gap:5px; }
.dc-meta .px-chip{ font-size:.68rem; }

/* The fit rating. Three fixed rows in a fixed order, so two cards can
   be compared down a column without reading either of them, and a
   headline number for the glance that does not want three rows.
   The labels are one short word because the grid track is 178px. */
.dc-fit{
  display:grid; gap:3px; width:100%; margin-block-start:8px;
  padding-block-start:8px; border-block-start:1px solid var(--line-2);
}
.fit-head{ display:flex; align-items:baseline; gap:3px; }
.fit-score{ font-size:1.02rem; font-weight:800; color:var(--accent); line-height:1; }
.fit-of{ font-size:.7rem; color:var(--ink-3); font-weight:600; }
.fit-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fit-label{ font-size:.72rem; color:var(--ink-3); }
.dest-card.on .dc-fit{ border-block-start-color:var(--accent); }
/* The axis chips. They are a settings control rather than a filter, so
   they sit tighter than the filter row above them and carry their own
   lede - a reader has to know these change the numbers, not the list. */
.axis-lede{ margin:14px 0 6px; }
.axis-row{ margin-block-end:10px; }
.axis-row .chip{ font-size:.78rem; padding:5px 11px; }
/* What the measurements mean. A title attribute answers a mouse; this
   answers a phone, where there is no hover to give. */
.axis-help{ margin:0 0 14px; }
.axis-help > summary{
  cursor:pointer; font-size:.82rem; color:var(--ink-2); font-weight:600;
  padding:6px 2px; list-style:none; display:inline-flex; align-items:center; gap:6px;
}
.axis-help > summary::before{
  content:"؟"; display:inline-grid; place-items:center; inline-size:17px; block-size:17px;
  border-radius:50%; background:var(--line-2); color:var(--ink-2); font-size:.7rem; font-weight:700;
}
:root[lang="en"] .axis-help > summary::before{ content:"?"; }
.axis-help > summary::-webkit-details-marker{ display:none; }
.axis-help > summary:hover{ color:var(--accent); }
.axis-help[open] > summary{ margin-block-end:4px; }
.axis-defs{ margin:0; padding:12px 14px; border:1px solid var(--line-2);
  border-radius:var(--r-md); background:var(--bg-elev); }
.axis-defs dt{ font-weight:700; font-size:.83rem; margin-block-start:10px; }
.axis-defs dt:first-child{ margin-block-start:0; }
.axis-defs dd{ margin:3px 0 0; font-size:.81rem; color:var(--ink-2); line-height:1.6; }
.ax-short{ font-weight:400; font-size:.76rem; color:var(--ink-3); }
.ax-short::before{ content:"("; } .ax-short::after{ content:")"; }
/* The one sourced number among the estimates, so it gets to look
   different from the dots rather than blending in with them. */
.dc-odds{ font-size:.75rem; font-weight:700; color:var(--green-700);
  margin-block-start:6px; line-height:1.4; }
html[data-theme="dark"] .dc-odds{ color:var(--green-500); }
.dc-odds small{ font-weight:400; color:var(--ink-3); }
.odds-p{ margin-block-start:10px; }
.cost-dots{ display:inline-flex; gap:3px; }
.cost-dots .dot{ width:6px; height:6px; border-radius:50%; background:var(--line-2); }
.cost-dots .dot.on{ background:var(--gold-500); }
@media (prefers-reduced-motion:reduce){ .dest-card{ transition:none; } .dest-card:hover{ transform:none; } }

/* ==========================================================================
   Accuracy: confidence chips and claim cards
   ========================================================================== */
.verify-line{ margin:-6px 0 14px; }
.vchip{
  display:inline-flex; align-items:center; gap:7px;
  font-size:.74rem; font-weight:600; text-decoration:none;
  padding:3px 11px; border-radius:999px;
  border:1px solid var(--line-2); background:var(--bg-elev); color:var(--ink-2);
}
.vchip:hover{ text-decoration:none; border-color:currentColor; }
.vdot{ width:8px; height:8px; border-radius:50%; background:var(--ink-3); flex:none; display:inline-block; }
.v-law .vdot,   .vdot.v-law{ background:var(--green-500); }
.v-official .vdot, .vdot.v-official{ background:var(--sky-600); }
.v-volatile .vdot, .vdot.v-volatile{ background:var(--gold-500); }
.v-ask .vdot,   .vdot.v-ask{ background:var(--clay-500); }
.vchip.v-law{ color:var(--green-600); background:var(--green-100); border-color:transparent; }
.vchip.v-official{ color:var(--sky-600); background:var(--sky-100); border-color:transparent; }
.vchip.v-volatile{ color:var(--gold-600); background:var(--gold-100); border-color:transparent; }
.vchip.v-ask{ color:var(--clay-600); background:var(--clay-100); border-color:transparent; }
.vtick{ font-weight:700; }

.claim-card>summary{ align-items:flex-start; gap:10px; line-height:1.5; }
.claim-card>summary .claim-text{ flex:1; font-weight:600; }
.claim-card>summary .tag{ flex:none; }
.claim-card.v-ask{ border-inline-start:3px solid var(--clay-500); }
.claim-card.v-volatile{ border-inline-start:3px solid var(--gold-500); }
.claim-card.v-official{ border-inline-start:3px solid var(--sky-600); }
.claim-card.v-law{ border-inline-start:3px solid var(--green-500); }
.claim-kv{ grid-template-columns:minmax(110px,auto) 1fr; row-gap:9px; }
.claim-kv dt{ font-weight:600; }
.claim-actions{ display:flex; gap:7px; flex-wrap:wrap; margin-block-start:14px; }
@media (max-width:560px){
  .claim-kv{ grid-template-columns:1fr; row-gap:2px; }
  .claim-kv dt{ margin-block-start:9px; color:var(--accent); }
  .claim-card>summary{ flex-wrap:wrap; }
}

/* ==========================================================================
   Mobile pass
   Grid tracks must never force a row wider than the viewport; touch
   targets must be reachable with a thumb; and iOS must not zoom the
   page when a field takes focus.
   ========================================================================== */

/* A minmax floor larger than the viewport is what pushes a page sideways
   on a 320px phone. Cap every floor at 100%. */
.grid.g2{ grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); }
.grid.g3{ grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); }
.grid.g4{ grid-template-columns:repeat(auto-fit,minmax(min(175px,100%),1fr)); }
.row>*{ min-width:min(150px,100%); }
.dest-grid{ grid-template-columns:repeat(auto-fill,minmax(min(178px,100%),1fr)); }
.provider-grid{ grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr)); }
.auth-wrap{ grid-template-columns:minmax(0,1fr); }
@media (min-width:820px){ .auth-wrap{ grid-template-columns:minmax(0,420px) minmax(0,1fr); } }

/* Notched and rounded screens. */
.topbar{ padding-inline:max(12px,env(safe-area-inset-inline-start)) max(12px,env(safe-area-inset-inline-end)); }
.main{ padding-block-end:max(90px,calc(60px + env(safe-area-inset-bottom))); }
.sidebar{ padding-block-end:max(28px,env(safe-area-inset-bottom)); }

/* iOS zooms the whole page when a control smaller than 16px takes focus.
   Setting 16px on touch devices removes the zoom without changing the
   desktop type scale. */
@media (pointer:coarse){
  input,select,textarea{ font-size:16px; }
  .topbar-search input{ font-size:16px; }

  /* Thumb-sized hit areas. The visual size is unchanged where it matters
     (the checkbox still reads as a checkbox); only the target grows. */
  .mini-btn{ min-height:38px; padding-inline:12px; }
  .chip{ min-height:38px; display:inline-flex; align-items:center; }
  .icon-btn,.pill-btn,.sync-pill{ min-height:42px; }
  .brand{ min-height:44px; }
  .linkish{ min-height:44px; }
  .ghost-btn{ min-height:38px; }
  .btn{ min-height:44px; }
  .auth-tab{ min-height:42px; }

  /* A link that stands on its own is a button in everything but
     markup, and a thumb has to be able to hit it. WCAG exempts a link
     inside a sentence, where the line height sets the size and growing
     it would push the words apart - so this reaches only the ones that
     sit alone: the actions at the foot of a callout and the standalone
     ones in a pill row. */
  .callout p.mb0>a, .pill-row>a:not(.chip):not(.mini-btn):not(.btn){
    display:inline-flex; align-items:center; min-height:38px;
  }

  .task-check{
    width:26px; height:26px; position:relative;
  }
  /* Invisible 44px target around the 26px box. */
  .task-check::after{
    content:""; position:absolute; inset:-9px; border-radius:12px;
  }
  .task{ padding-block:14px; }
  .task-actions .mini-btn{ min-width:38px; }
  details.acc>summary{ min-height:46px; }
  .nav-list a{ min-height:44px; }
  .phase-head{ min-height:56px; }
}

/* Small phones: tighten the frame, not the reading experience. */
@media (max-width:400px){
  .main{ padding-inline:12px; }
  .card{ padding:15px 14px; border-radius:var(--r-md); }
  .card.tight{ padding:12px 13px; }
  .task{ padding-inline:13px; }
  .phase-head{ padding:13px 14px; }
  h1{ font-size:1.55rem; }
  .page-head p.lede{ font-size:.96rem; }
  .stat .sv{ font-size:1.3rem; }
  .modal-inner{ padding:18px 16px; }
  .steps li{ padding-inline-start:32px; }
  .trip-card{ padding:13px 14px; }
}

/* The modal must never exceed the screen, and must scroll if it does. */
.modal{ max-height:min(88vh,760px); overflow:auto; overscroll-behavior:contain; }

/* Long unbroken strings (URLs, booking codes) must not widen a card. */
.acc-body a,.src-list a,.note-preview,.cmp dd{ overflow-wrap:anywhere; }

/* room rate sits under the daily figure on a destination card */
.dc-room{ font-size:.76rem; color:var(--ink-3); margin-block-start:1px; }
.dc-room small{ font-weight:400; }

/* Numeric runs stay left-to-right inside Arabic text. */
.ltr-num{ unicode-bidi:isolate; direction:ltr; }

/* ==========================================================================
   Form rows: labels of different lengths must not push their inputs out
   of line. Each field stretches to the row height and pins its control to
   the bottom, so every input in a row shares a baseline.
   ========================================================================== */
.row{ align-items:stretch; position:relative; }
.row>.field{ display:flex; flex-direction:column; margin-block-end:0; position:relative; }
.row>.field>label{ flex:0 0 auto; }
.row>.field>input,
.row>.field>select,
.row>.field>textarea{ margin-block-start:auto; }
/* A hint under one field used to push that field's control up while its
   neighbours stayed put, so a row of three boxes sat at three heights.
   Taking the hint out of flow keeps every control on one line and lets
   the hint hang below; the row reserves the space it needs. */
.row>.field>.hint{
  position:absolute; inset-block-start:100%; inset-inline:0;
  margin-block-start:4px; pointer-events:none;
}
.row:has(> .field > .hint){ margin-block-end:26px; }
/* the manual-code box sits under its select, not stretched to the row */
.row>.field>.pick-other{ margin-block-start:6px; flex:0 0 auto; }
.card .row{ gap:14px; row-gap:16px; }

/* The frame around a published page stamps its own colour-scheme on the
   root element inline. When the viewer's frame is dark and the app's own
   theme is light, the browser drew the native calendar button white on a
   white field - invisible. The app owns its theme, so it states the
   matching colour-scheme with enough weight to beat that inline value. */
html[data-theme="light"]{ color-scheme:light !important; }
html[data-theme="dark"]{ color-scheme:dark !important; }

/* Date inputs render inconsistently across mobile browsers unless the
   box model is pinned down. */
input[type="date"]{
  min-height:42px; appearance:none; -webkit-appearance:none;
  background:var(--bg); color:var(--ink); line-height:1.4;
}
input[type="date"]::-webkit-date-and-time-value{ text-align:start; }
/* Belt and braces on the icon itself: draw our own in the field's own ink
   so it is visible whatever the browser decides about the native one. */
input[type="date"]::-webkit-calendar-picker-indicator{
  opacity:0; cursor:pointer;
  width:26px; height:26px; margin:0; padding:0;
}
.field input[type="date"]{
  background-repeat:no-repeat;
  background-position:right 11px center;
  background-size:17px 17px;
  padding-inline-end:38px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369777f' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}
html[dir="rtl"] .field input[type="date"]{ background-position:left 11px center; }
html[data-theme="dark"] .field input[type="date"]{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f8f95' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Main destination picker on the dashboard
   ========================================================================== */
.dest-current{ display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.dcur-flag{ font-size:2.1rem; line-height:1.15; flex:none; }
.dcur-text{ display:flex; flex-direction:column; gap:3px; flex:1 1 240px; min-width:0; }
.dcur-text strong{ font-size:1.05rem; }
.dcur-text small{ font-size:.79rem; color:var(--ink-3); line-height:1.5; }
.dcur-btn{ flex:none; text-decoration:none; }
.dcur-btn:hover{ text-decoration:none; }
.pill-row .chip.on{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

/* ==========================================================================
   Entry-point advice
   ========================================================================== */
.entry-advice{ border-color:var(--accent); }
.entry-rank{ list-style:none; margin:14px 0 0; padding:0; counter-reset:none; }
.entry-rank li{ margin-block-end:9px; }
.entry-item{
  display:flex; gap:12px; align-items:flex-start; width:100%; text-align:start;
  border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--bg);
  padding:13px 14px; color:var(--ink); font-family:inherit;
}
.entry-item:hover{ border-color:var(--accent); }
.entry-item.on{ border-color:var(--accent); background:var(--accent-soft); }
.er-rank{
  flex:none; width:24px; height:24px; border-radius:50%; background:var(--accent);
  color:var(--on-accent); display:grid; place-items:center; font-size:.76rem; font-weight:700;
}
.er-flag{ font-size:1.4rem; line-height:1.1; flex:none; }
.er-main{ display:flex; flex-direction:column; gap:5px; min-width:0; flex:1; }
.er-name{ font-weight:700; font-size:.95rem; }
.er-note{ font-size:.83rem; color:var(--ink-2); line-height:1.55; }
.er-bars{ display:grid; gap:3px; margin-block-start:4px; }
.bar-row{ display:flex; align-items:center; gap:8px; }
/* Wide enough for the label, and allowed to give way: at 118px the
   English "Your chance of getting the visa" still reads, and
   without the give it pushed the dots beside it off the card. */
.bar-label{ font-size:.73rem; color:var(--ink-3); flex:0 1 auto; min-width:118px; }
/* The label gives way; the five dots never do. */
.bar-row>.cost-dots{ flex:none; }
.dc-best{ font-size:.72rem; font-weight:700; color:var(--gold-600); margin-block-start:5px; }

/* The same four scores on the country's own page. */
.entry-score-card{ margin-block-end:18px; }
.entry-score-card .er-bars{ gap:5px; margin-block-start:0; }

@media (max-width:520px){
  .er-bars .bar-label{ min-width:96px; font-size:.7rem; }
  .entry-item{ padding:12px; gap:9px; }
  .dcur-btn{ width:100%; }
}

/* A confirmed booking is a reference card, not a comparison entry. */
.cmp.booked{ border-color:var(--green-500); box-shadow:0 0 0 2px var(--green-100),var(--sh-1); }
.booked-flag{ background:var(--green-600); }
.booked-details{ margin-block-start:12px; border-block-start:1px solid var(--line); padding-block-start:11px; display:grid; gap:9px; }
.bd-row{ display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; }
.bd-label{ font-size:.72rem; color:var(--ink-3); flex:0 0 100%; }
.bd-value{ font-size:.85rem; font-weight:600; flex:1; min-width:0; overflow-wrap:anywhere; white-space:pre-wrap; }
.bd-row .mini-btn{ flex:none; }
.quick-dest-label{ margin-block-start:14px; font-weight:600; }

/* ==========================================================================
   Visa types
   ========================================================================== */
.route-card>summary{ gap:11px; }
.route-icon{ font-size:1.15rem; flex:none; }
.route-name{ flex:1; }
.route-card>summary .tag{ flex:none; }
.route-grid{ display:grid; gap:9px; grid-template-columns:repeat(auto-fit,minmax(min(215px,100%),1fr)); }
.route-chip{
  display:grid; gap:2px; padding:12px 14px; border-radius:var(--r-md);
  border:1px solid var(--line-2); background:var(--bg);
}
.route-chip.yes{ border-color:var(--green-500); background:var(--green-050); }
.route-chip.no{ opacity:.72; }
.rc-icon{ font-size:1.2rem; line-height:1.1; }
.rc-name{ font-weight:700; font-size:.9rem; }
.rc-state{ font-size:.77rem; color:var(--ink-3); font-weight:600; }
.route-chip.yes .rc-state{ color:var(--green-600); }
.route-chip.no .rc-state{ color:var(--clay-600); }

/* ==========================================================================
   Accounts held on this device
   ========================================================================== */
.profile-list{ display:grid; gap:8px; }
.profile-row{
  display:flex; align-items:center; gap:11px;
  border:1px solid var(--line-2); border-radius:var(--r-md);
  padding:11px 13px; background:var(--bg);
}
.profile-row.on{ border-color:var(--accent); background:var(--accent-soft); }
.pr-avatar{
  flex:none; width:34px; height:34px; border-radius:50%;
  background:var(--accent); color:var(--on-accent); display:grid; place-items:center;
  font-weight:700; font-size:.95rem;
}
.pr-main{ display:flex; flex-direction:column; min-width:0; flex:1; }
.pr-main strong{ font-size:.92rem; }
.pr-main small{ font-size:.76rem; color:var(--ink-3); overflow-wrap:anywhere; }
.profile-row .mini-btn{ flex:none; }
.sync-pill.s-local .dot{ background:var(--plum-600); }

/* ==========================================================================
   Setup wizard
   ========================================================================== */
.setup-progress{ display:flex; align-items:center; gap:7px; margin-block-end:20px; }
.sp-dot{ width:26px; height:5px; border-radius:99px; background:var(--line-2); }
.sp-dot.done{ background:var(--green-500); }
.sp-dot.on{ background:var(--accent); }
.sp-label{ font-size:.76rem; color:var(--ink-3); margin-inline-start:8px; font-weight:600; }

.choice-grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr)); }
.choice-grid.tight-grid{ grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr)); }
.choice{
  display:grid; gap:3px; justify-items:start; text-align:start;
  border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--bg-elev);
  color:var(--ink); padding:14px 15px; font-family:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.choice:hover{ border-color:var(--accent); }
.choice.on{ border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 2px var(--accent-soft); }
.choice.sm{ padding:11px 12px; }
.choice.wide{ grid-template-columns:auto 1fr; align-items:start; gap:11px; }
.choice .ch-icon{ font-size:1.5rem; line-height:1.1; }
.choice.sm .ch-icon{ font-size:1.25rem; }
.choice .ch-main{ display:grid; gap:3px; min-width:0; }
.choice .ch-name{ font-weight:700; font-size:.95rem; }
.choice .ch-sub{ font-size:.79rem; color:var(--ink-3); line-height:1.5; }
.setup-nav{ display:flex; justify-content:space-between; gap:12px; margin-block-start:22px; }
.setup-nav .btn{ min-width:120px; }

.summary-card{ border-color:var(--accent); }
.summary-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.sum-item{ display:grid; gap:1px; font-size:1rem; }
.sum-item strong{ font-size:.98rem; }
.sum-item small{ font-size:.72rem; color:var(--ink-3); }
.sum-arrow{ color:var(--ink-3); font-size:1.1rem; }
@media (max-width:520px){
  .setup-nav .btn{ min-width:0; flex:1; }
  .sum-arrow{ display:none; }
  .summary-row{ gap:14px; }
}
@media (prefers-reduced-motion:reduce){ .choice{ transition:none; } }

/* ==========================================================================
   Outward links. Every one of these leaves the site, so they are built to
   look like a departure rather than like navigation: the host is printed
   next to the label, so you know where you are about to land.
   ========================================================================== */
.out-list{ list-style:none; margin:0; padding:0; }
.out-list>li{ padding-block:11px; border-block-end:1px solid var(--line); margin:0; }
.out-list>li:last-child{ border-block-end:0; padding-block-end:0; }
.out-link{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  color:var(--accent); font-weight:600; text-decoration:none;
}
.out-link:hover{ text-decoration:underline; }
.ol-label{ flex:1 1 auto; min-width:0; }
.ol-host{ font-size:.74rem; color:var(--ink-3); font-weight:500; white-space:nowrap; direction:ltr; }
.ol-note{ font-size:.85rem; color:var(--ink-2); margin-block-start:3px; line-height:1.55; }
.ol-check{ font-size:.78rem; color:var(--gold-600); margin-block-start:4px; font-weight:600; }
.link-group{ scroll-margin-block-start:calc(var(--topbar-h) + 12px); }
.mini-btn.out{ border-color:var(--accent); color:var(--accent); }

/* ==========================================================================
   Roadmap: six stages, with the one you are in picked out
   ========================================================================== */
.next-card{ border-color:var(--accent); }
.nx-badge{ font-size:1.5rem; line-height:1; }
.nx-title{ margin-block:4px 6px; font-size:1.15rem; color:var(--accent); }

.rm-list{ list-style:none; margin:0; padding:0; }
.rm-stage{ display:flex; gap:14px; position:relative; padding-block-end:22px; }
.rm-stage::after{
  content:""; position:absolute; inset-inline-start:17px; inset-block-start:38px;
  bottom:0; width:2px; background:var(--line);
}
.rm-stage:last-child::after{ display:none; }
.rm-dot{
  flex:none; width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center; font-size:1.05rem;
  background:var(--bg-sunk); border:2px solid var(--line-2); position:relative; z-index:1;
}
.rm-stage.is-past .rm-dot{ background:var(--green-100); border-color:var(--green-500); }
.rm-stage.is-now .rm-dot{ background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
.rm-stage.is-next{ opacity:.72; }
.rm-body{ flex:1; min-width:0; }
.rm-head{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-block-end:4px; }
.rm-head h3{ margin:0; font-size:1.02rem; }
.rm-body p{ margin:0 0 6px; font-size:.9rem; }
.rm-cost{ font-size:.85rem; color:var(--clay-600); border-inline-start:3px solid var(--clay-500);
  padding-inline-start:10px; margin-block:8px; }

/* ---------- the three doors ---------- */
.door{
  display:grid; gap:5px; align-content:start; text-decoration:none; color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--r-lg); padding:16px 17px;
  background:var(--bg-elev); position:relative;
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.door:hover{ text-decoration:none; border-color:var(--accent); box-shadow:var(--sh-2); transform:translateY(-1px); }
.door.hot{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
.door.tone-green{ border-block-start:3px solid var(--green-500); }
.door.tone-gold{ border-block-start:3px solid var(--gold-500); }
.door.tone-sky{ border-block-start:3px solid var(--sky-600); }
.dr-icon{ font-size:1.6rem; line-height:1.1; }
.dr-hot{ justify-self:start; }
.dr-title{ font-weight:700; font-size:1rem; }
.dr-text{ font-size:.86rem; color:var(--ink-2); line-height:1.55; }
.dr-go{ font-size:.82rem; font-weight:600; color:var(--accent); margin-block-start:6px; }
@media (prefers-reduced-motion:reduce){ .door{ transition:none; } .door:hover{ transform:none; } }

/* ==========================================================================
   Currency converter
   ========================================================================== */
.conv-card{ border-color:var(--accent); }
.conv-row{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.conv-row>.field{ flex:1 1 150px; min-width:min(150px,100%); margin-block-end:0; }
.conv-swap{ flex:none; margin-block-end:1px; border:1px solid var(--line-2); font-size:1.1rem; }
.conv-swap:hover{ border-color:var(--accent); color:var(--accent); }
.conv-out{
  margin-block-start:18px; padding-block-start:16px; border-block-start:1px solid var(--line);
  text-align:center;
}
.conv-big{ font-size:2.1rem; font-weight:700; color:var(--accent); line-height:1.2; }
.conv-sub{ font-size:.88rem; color:var(--ink-2); margin-block-start:4px; }
.conv-where{ margin-block-start:2px; }
@media (max-width:520px){ .conv-big{ font-size:1.7rem; } }

/* ==========================================================================
   Trip planners: the switcher in the sidebar and the list on its page
   ========================================================================== */
.plan-switch{ display:flex; gap:6px; align-items:center; margin-block-end:12px; }
.plan-switch select{
  flex:1; min-width:0; padding:7px 10px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:var(--bg); color:var(--ink); font-size:.83rem;
}
.plan-switch select:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.plan-switch .mini-btn{ flex:none; }

.plan-list{ display:grid; gap:9px; margin-block-end:16px; }
.plan-row{
  display:flex; align-items:center; gap:11px;
  border:1px solid var(--line-2); border-radius:var(--r-md);
  padding:12px 14px; background:var(--bg-elev);
}
.plan-row.on{ border-color:var(--accent); background:var(--accent-soft); }
.pl-flag{ font-size:1.5rem; line-height:1.1; flex:none; }
.pl-main{ display:flex; flex-direction:column; min-width:0; flex:1; }
.pl-main strong{ font-size:.95rem; }
.pl-main small{ font-size:.74rem; color:var(--ink-3); }
.plan-row .mini-btn,.plan-row .tag{ flex:none; }

/* ==========================================================================
   Passport & world - the visa requirement pages

   Six statuses need six colours that survive both themes and stay
   distinguishable to a reader who cannot separate red from green. They
   borrow the ramps already defined above, in the same spirit those were
   assigned: green is settled, gold means do something first, clay means
   this can stop the trip. Colour is never the only carrier - every tile,
   chip and row also spells the status out in words.
   ========================================================================== */
:root{
  --px-vf:var(--green-500);  --px-vf-bg:var(--green-050);
  --px-voa:var(--sky-600);   --px-voa-bg:var(--sky-100);
  --px-eta:var(--plum-600);  --px-eta-bg:var(--plum-100);
  --px-ev:var(--gold-600);   --px-ev-bg:var(--gold-100);
  --px-vr:var(--clay-500);   --px-vr-bg:var(--clay-100);
  --px-na:var(--brand-700);  --px-na-bg:var(--brand-100);
  --px-self:var(--ink-3);    --px-self-bg:var(--bg-sunk);
}
html[data-theme="dark"]{
  --px-vf:#3fb894; --px-voa:#5aa3dd; --px-eta:#b58ed4;
  --px-ev:#dcae4a; --px-vr:#e0806a; --px-na:#93a4ab;
  --px-na-bg:#22303a; --px-self-bg:#0a0f12;
}

.px-vf{  --px-c:var(--px-vf);  --px-b:var(--px-vf-bg); }
.px-voa{ --px-c:var(--px-voa); --px-b:var(--px-voa-bg); }
.px-eta{ --px-c:var(--px-eta); --px-b:var(--px-eta-bg); }
.px-ev{  --px-c:var(--px-ev);  --px-b:var(--px-ev-bg); }
.px-vr{  --px-c:var(--px-vr);  --px-b:var(--px-vr-bg); }
.px-na{  --px-c:var(--px-na);  --px-b:var(--px-na-bg); }
.px-self{--px-c:var(--px-self);--px-b:var(--px-self-bg); }

/* ---- the checker ---- */
.px-check{ margin-block-end:20px; }
.px-pair{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.px-lab{ display:flex; flex-direction:column; gap:5px; flex:1 1 220px; min-width:0; }
.px-lab > span{ font-size:.78rem; color:var(--ink-3); font-weight:600; }
.px-select{
  width:100%; min-width:0; padding:10px 12px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:var(--bg); color:var(--ink);
  font-family:inherit; font-size:.92rem; min-height:44px;
}
.px-select:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.px-arrow,.px-vs{ font-size:1.3rem; color:var(--ink-3); padding-block-end:10px; flex:none; }

.px-result{
  margin-block-start:16px; padding:15px 17px; border-radius:var(--r-md);
  background:var(--px-b); border:1px solid var(--px-c);
  border-inline-start:5px solid var(--px-c);
}
.px-result > p:last-of-type{ margin-block-end:0; }
.px-rhead{ display:flex; gap:12px; align-items:center; margin-block-end:9px; }
.px-rflag{ font-size:2.1rem; line-height:1; flex:none; }
.px-rhead strong{ display:block; font-size:1.15rem; }
.px-rstat{ display:block; font-size:.9rem; font-weight:600; color:var(--px-c); }
.px-result .callout{ margin-block-start:12px; }
.px-src{ margin-block:12px 0; }

/* ---- chips, legend, filters ---- */
.px-chip{
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  padding:3px 9px; border-radius:99px; font-size:.76rem; font-weight:700;
  background:var(--px-b); color:var(--px-c); border:1px solid var(--px-c);
}
.px-days{ font-weight:500; opacity:.85; }

.px-legend{ display:flex; flex-wrap:wrap; gap:8px 16px; margin-block:12px 16px; font-size:.79rem; color:var(--ink-2); }
.px-lg{ display:inline-flex; align-items:center; gap:6px; }
.px-sw{ width:13px; height:13px; border-radius:4px; background:var(--px-c); flex:none; }

.px-filters{ display:flex; flex-wrap:wrap; gap:7px; margin-block-end:14px; }
.px-filters .chip{ background:var(--bg-elev); font-size:.79rem; }
.px-filters .chip.px-vf,.px-filters .chip.px-voa,.px-filters .chip.px-eta,
.px-filters .chip.px-ev,.px-filters .chip.px-vr,.px-filters .chip.px-na{
  border-inline-start:4px solid var(--px-c);
}
.px-filters .chip.on{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

/* ---- the world, region by region ---- */
.px-region{ margin-block-end:22px; }
.px-rh{ font-size:.95rem; margin-block-end:9px; padding-block-end:5px; border-block-end:1px solid var(--line); }
.px-grid,.px-mini{ display:grid; gap:8px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.px-tile{
  display:flex; flex-direction:column; gap:1px; position:relative;
  padding:9px 11px; border-radius:var(--r-sm); text-decoration:none;
  background:var(--px-b); color:var(--ink);
  border:1px solid var(--line); border-inline-start:4px solid var(--px-c);
  min-height:44px;
}
.px-tile:hover{ border-color:var(--px-c); text-decoration:none; }
.px-flag{ font-size:1.05rem; line-height:1.2; }
.px-tname{ font-size:.83rem; font-weight:600; line-height:1.25;
           overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.px-tstat{ font-size:.71rem; font-weight:700; color:var(--px-c); }
/* Which passport supplied this answer, when more than one is held. */
.px-via{ position:absolute; inset-block-start:6px; inset-inline-end:7px; font-size:.8rem; opacity:.75; }

/* ---- your passports ---- */
.px-sh{ font-size:.95rem; margin-block-end:9px; }
.px-add{ margin-block-end:13px; max-width:420px; }
.px-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-block-end:12px; }
.px-holding{
  display:inline-flex; align-items:center; gap:7px; padding:6px 8px 6px 12px;
  border:1px solid var(--line-2); border-radius:99px; background:var(--bg-elev); font-size:.88rem;
}
.px-x{
  border:none; background:var(--bg-sunk); color:var(--ink-2); cursor:pointer;
  width:26px; height:26px; min-width:26px; border-radius:50%; font-size:1rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; padding:0;
}
.px-x:hover{ background:var(--clay-100); color:var(--clay-600); }
.px-contrib{ margin-block-end:14px; }
.px-contrib h3{ margin-block-end:8px; }

/* ---- head to head ---- */
.px-scoreboard{ margin-block-end:16px; }
.px-sbrow{
  display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center;
  padding-block:8px; border-block-end:1px solid var(--line); text-align:center;
}
.px-sbrow:last-child{ border-block-end:none; }
.px-sbhead{ font-weight:700; border-block-end:2px solid var(--line-2); }
.px-sbv{ font-size:1.25rem; font-weight:700; }
.px-sbl{ font-size:.76rem; color:var(--ink-3); max-width:190px; }

/* ---- tables ---- */
.px-table{ width:100%; }
.px-table td,.px-table th{ vertical-align:middle; }
.px-tdname{ white-space:nowrap; }
.px-table tr.px-wa td:first-child,.px-table tr.px-wb td:last-child{ background:var(--green-050); }
.px-rank .px-rk{ font-variant-numeric:tabular-nums; color:var(--ink-3); font-weight:700; }
.px-rank tr.px-mine{ background:var(--accent-soft); }
.px-rank tr.px-mine .px-tdname{ font-weight:700; }

/* ---- explore ---- */
.px-tabs{ display:flex; gap:6px; margin-block-end:16px; border-block-end:1px solid var(--line); }
.px-tab{
  border:none; background:none; cursor:pointer; font:inherit; font-weight:600;
  color:var(--ink-3); padding:9px 15px; min-height:44px;
  border-block-end:3px solid transparent; margin-block-end:-1px;
}
.px-tab.on{ color:var(--ink); border-block-end-color:var(--accent); }
.px-toolbar{ margin-block-end:12px; }
.px-search{
  width:100%; max-width:420px; padding:10px 13px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:var(--bg); color:var(--ink);
  font-family:inherit; font-size:.92rem; min-height:44px;
}
.px-search:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.px-cards{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); }
.px-card{
  display:flex; flex-direction:column; gap:2px; padding:12px 14px;
  border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--bg-elev); color:var(--ink); text-decoration:none; min-height:44px;
}
.px-card:hover{ border-color:var(--accent); text-decoration:none; }
.px-cflag{ font-size:1.5rem; line-height:1.2; }
.px-cname{ font-weight:700; font-size:.94rem; }
.px-csub{ font-size:.74rem; color:var(--ink-3); }
.px-cscore{ font-size:.79rem; color:var(--ink-2); margin-block-start:5px; }
.px-crank{ color:var(--ink-3); }

/* ---- footnotes ---- */
.px-fresh{ font-size:.78rem; color:var(--ink-3); margin-block:14px 0; }
.px-method{ font-size:.79rem; margin-block-end:18px; }

@media (max-width:560px){
  .px-pair{ flex-direction:column; align-items:stretch; gap:10px; }
  .px-arrow,.px-vs{ display:none; }
  .px-grid,.px-mini{ grid-template-columns:repeat(auto-fill,minmax(min(140px,100%),1fr)); }
  .px-cards{ grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr)); }
  .px-sbl{ font-size:.72rem; }
  .px-sbv{ font-size:1.1rem; }
}

/* ---- Topbar: the passport checker ----
   Everything else in this bar acts on the page you are already on.
   This one goes somewhere the rest of the site never leads, so it
   carries a word as well as a mark - an unlabelled icon is only ever
   found by someone who already knows what they are looking for. */
.px-topbtn{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  padding-inline:11px; min-height:36px; text-decoration:none;
  border:1px solid var(--line-2); border-radius:99px;
  background:var(--bg-elev); color:var(--ink); font-weight:600; font-size:.83rem;
}
.px-topbtn svg{ width:17px; height:17px; flex:none; }
.px-topbtn:hover{ border-color:var(--accent); background:var(--accent-soft); text-decoration:none; }
html[data-theme="dark"] .px-topbtn{ background:var(--bg-sunk); }

@media (max-width:760px){
  /* Printing from a phone is rare and the browser's own share sheet
     still offers it, so the print button yields its space rather than
     the bar wrapping or the new one being dropped. */
  #printBtn{ display:none; }
}
/* Phone widths. The word is the point of this button, so it is the
   padding and the gaps that give way, not the label - and the search
   box keeps enough room to still be a search box. */
@media (max-width:460px){
  .topbar{ gap:5px; }
  .topbar-actions{ gap:4px; }
  .px-topbtn{ padding-inline:8px; gap:5px; font-size:.78rem; }
  .px-topbtn svg{ width:16px; height:16px; }
  /* The magnifier is decorative once the box is this narrow - the
     placeholder already says what the field is - and giving its width
     back to the input is the difference between typing into a stub
     and typing into a search box. */
  .topbar-search > svg{ display:none; }
  .topbar-search{ padding:0 10px; }
}
@media (max-width:350px){
  /* Only here does the word genuinely stop fitting. */
  .px-topbtn span{ display:none; }
  .px-topbtn{ padding-inline:9px; }
}

/* Which build is being served. Deliberately quiet - it is a diagnostic,
   not information a traveller needs - but never hidden, because the one
   time it matters is the one time you cannot get at a developer tool. */
.build-stamp{
  margin:6px 0 0; font-size:.68rem; color:var(--ink-3);
  font-variant-numeric:tabular-nums; letter-spacing:.02em; user-select:all;
}

/* ============================================================
   PACKING AND WEATHER

   One page and one dashboard card. Everything here is a list of
   short rows with a number in front, so the only real work is
   keeping the number column steady while the names run either
   left-to-right or right-to-left around it.
   ============================================================ */

/* Where you are going, above everything the page claims about it. */
.pack-where{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.pack-where > span{ display:flex; flex-direction:column; min-width:0; }
.pack-where .btn{ margin-inline-start:auto; }
.pack-flag{ font-size:1.9rem; line-height:1; }

.pack-group{ margin:16px 0 8px; font-size:.9rem; color:var(--ink-2); }
.pack-group:first-of-type{ margin-block-start:6px; }

.pack-list{ display:grid; gap:2px; }
.pack-row{
  display:flex; align-items:baseline; gap:10px;
  padding:7px 0; border-block-end:1px solid var(--line);
}
.pack-row:last-child{ border-block-end:0; }
/* Fixed width and tabular figures, so the counts line up in a column
   whichever way the names run. */
.pack-n{
  flex:0 0 2.4em; text-align:center;
  font-weight:700; font-variant-numeric:tabular-nums;
  background:var(--bg-elev); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:1px 0;
}
.pack-name{ flex:1; min-width:0; overflow-wrap:break-word; }
/* Shrinkable and wrappable, both deliberately: a cell fixed at its own
   content width cannot give way, so a long note pushes the row off the
   side of the page instead of folding. */
.pack-when{ flex:0 1 auto; min-width:0; text-align:end; overflow-wrap:break-word; }
/* A row carrying dates rather than a count gets them on their own line
   at every width - there is no width at which a list of dates and a
   garment name both fit on one line. */
.pack-row.dated{ flex-wrap:wrap; }
.pack-row.dated .pack-when{
  flex-basis:100%; text-align:start; padding-inline-start:calc(2.4em + 10px);
}

/* The three questions. */
.pack-q{ margin-block-end:12px; }
.pack-q-label{ display:block; font-size:.82rem; color:var(--ink-2); margin-block-end:6px; }
.pack-q .pill-row{ margin:0; }

.pack-toggle{
  display:flex; align-items:flex-start; gap:10px;
  padding:9px 0; cursor:pointer;
}
.pack-toggle input{ inline-size:20px; block-size:20px; margin-block-start:2px; flex:0 0 auto; }
.pack-toggle span{ display:flex; flex-direction:column; gap:2px; }
.pack-toggle small{ font-size:.76rem; }

@media (max-width:520px){
  /* The "3 of the days" note stops fitting beside a long Arabic
     garment name well before the layout itself breaks, so it drops
     under the name rather than squeezing it. */
  .pack-row{ flex-wrap:wrap; }
  .pack-when{ flex-basis:100%; text-align:start; padding-inline-start:calc(2.4em + 10px); }
  .pack-where .btn{ margin-inline-start:0; inline-size:100%; }
}