/* My Descent Passport: page styles.
   Look: "Passport". Burgundy header band with a gold rule, warm off-white pages, serif headings.
   Layout: one centred column; tools use a form + sticky results grid; guides use a 68ch reading column. */

/* Typefaces, served from this site (SIL Open Font Licence; licences in /ink/type/) */
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 400; font-display: swap; src: url("type/lexend-400.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 600; font-display: swap; src: url("type/lexend-600.woff2") format("woff2"); }
@font-face { font-family: "Lexend"; font-style: normal; font-weight: 700; font-display: swap; src: url("type/lexend-700.woff2") format("woff2"); }
@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("type/caslon-400.woff2") format("woff2"); }
@font-face { font-family: "Libre Caslon Text"; font-style: italic; font-weight: 400; font-display: swap; src: url("type/caslon-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Libre Caslon Text"; font-style: normal; font-weight: 700; font-display: swap; src: url("type/caslon-700.woff2") format("woff2"); }

:root {
  --parchment: #f7f4ec;
  --leafwhite: #ffffff;
  --quill: #1b2133;
  --greyed: #545a6b;
  --ruling: #e2dccb;
  --cover: #1f2f57;
  --cover-wash: #e6eaf3;
  --on-cover: #ffffff;
  --foil: #b8892e;
  --foil-deep: #7a5a14;
  --foil-wash: #f3ead4;
  --spine: #1f2f57;
  --on-spine: #ffffff;
  --endpaper: #ebe5d5;
  --granted: #2d6a4f;
  --granted-wash: #e2f0e8;
  --pending: #8a5a12;
  --pending-wash: #f8eedb;
  --refused: #9d3b2b;
  --refused-wash: #f7e4df;
  --type-title: "Libre Caslon Text", Georgia, "Times New Roman", serif;
  --type-text: "Lexend", "Segoe UI", system-ui, -apple-system, sans-serif;
  --type-code: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --parchment: #10141f; --leafwhite: #181e2c; --quill: #ecebe6; --greyed: #b3b7c4; --ruling: #2c3446;
    --cover: #9db4ec; --cover-wash: #1c2742; --on-cover: #10141f;
    --foil: #dcb468; --foil-deep: #ecca86; --foil-wash: #2e2614;
    --spine: #152038; --on-spine: #ffffff; --endpaper: #141a28;
    --granted: #7fcca6; --granted-wash: #152b22; --pending: #e8bd6a; --pending-wash: #2f2510; --refused: #ee9483; --refused-wash: #36201b;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --parchment: #10141f; --leafwhite: #181e2c; --quill: #ecebe6; --greyed: #b3b7c4; --ruling: #2c3446;
  --cover: #9db4ec; --cover-wash: #1c2742; --on-cover: #10141f;
  --foil: #dcb468; --foil-deep: #ecca86; --foil-wash: #2e2614;
  --spine: #152038; --on-spine: #ffffff; --endpaper: #141a28;
  --granted: #7fcca6; --granted-wash: #152b22; --pending: #e8bd6a; --pending-wash: #2f2510; --refused: #ee9483; --refused-wash: #36201b;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* Text grows with the screen: 16px on phones, about 19px at 1920 wide, about 21px at 2560, never more than 22px.
   Everything else is in rem, so the layout grows with it and still respects the reader's own browser text size. */
html { -webkit-text-size-adjust: 100%; font-size: clamp(100%, 0.875rem + 0.26vw, 137.5%); }
body { margin: 0; background: var(--parchment); color: var(--quill); font-family: var(--type-text); font-size: 1rem; line-height: 1.55; }
img, svg { max-width: 100%; }
a { color: var(--cover); text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 2px solid var(--cover); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.measure { max-width: 67.5rem; margin: 0 auto; padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); }

.jump-link { position: absolute; left: -9999px; top: 0.5rem; background: var(--quill); color: var(--leafwhite); padding: 0.5rem 0.875rem; border-radius: 0.5rem; z-index: 20; }
.jump-link:focus { left: 1rem; }

/* Header: the passport band */
.cover-bar { background: var(--spine); color: var(--on-spine); border-bottom: 3px solid var(--foil); }
.cover-bar .measure { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.625rem 1.5rem; padding-block: 0.875rem; }
.cover-bar a:focus-visible, .cover-bar button:focus-visible { outline-color: var(--on-spine); }
.nameplate { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; color: var(--on-spine); font-family: var(--type-title); font-weight: 700; font-size: 1.3125rem; letter-spacing: -0.005em; }
.nameplate-mark { display: inline-block; width: 2.5rem; height: 2.5rem; flex: none; }
.nameplate-mark svg { display: block; width: 100%; height: 100%; }
.nameplate b { font-weight: 400; font-style: italic; color: #ecca86; }
.mast-nav { display: flex; flex-wrap: wrap; gap: 0.25rem 0.375rem; }
.mast-nav a { color: var(--on-spine); text-decoration: none; padding: 0.375rem 0.75rem; border-radius: 62.4375rem; font-weight: 700; font-size: 0.9375rem; }
.mast-nav a:hover { background: rgba(255, 255, 255, 0.14); }
.mast-nav a[aria-current] { background: rgba(255, 255, 255, 0.18); box-shadow: inset 0 -2px 0 var(--foil); border-radius: 0.5rem 0.5rem 0 0; }

/* Main column */
main { display: block; }
.leaf { display: grid; gap: 2rem; padding-block: 2rem 3rem; }
.leaf-head { display: grid; gap: 0.625rem; }
.kicker { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--foil-deep); }
h1 { font-family: var(--type-title); font-weight: 700; font-size: clamp(1.875rem, 4.4vw, 2.875rem); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; margin: 0; max-width: 24ch; }
h2 { font-family: var(--type-title); font-weight: 700; text-wrap: balance; }
.intro-line { margin: 0; max-width: 62ch; font-size: 1.0625rem; color: var(--greyed); }
.pip { justify-self: start; font-size: 0.875rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 62.4375rem; background: var(--cover-wash); color: var(--cover); }
.dated-line { font-size: 0.875rem; color: var(--greyed); margin: 0; }
.pane { background: var(--leafwhite); border: 1px solid var(--ruling); border-radius: 0.875rem; padding: 1.375rem; min-width: 0; }

/* A warm band behind every page heading, running edge to edge, with a thin gold rule under it
   (border-image outset doesn't cause sideways scrolling) */
.leaf > .leaf-head, .leaf > .opening { position: relative; padding-bottom: 2rem; border-image-source: linear-gradient(var(--endpaper), var(--endpaper)); border-image-slice: 0 fill; border-image-outset: 2rem 100vmax 0; }

/* Buttons */
.press-row { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.press { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6875rem 1.125rem; border-radius: 0.625rem; font: inherit; font-weight: 700; text-decoration: none; border: 1.5px solid var(--cover); cursor: pointer; }
.press-main { background: var(--cover); color: var(--on-cover); }
.press-alt { background: var(--leafwhite); color: var(--cover); }
.press:hover { filter: brightness(1.08); }

/* Home hero */
.opening { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); align-items: center; }
.opening-text { display: grid; gap: 1rem; min-width: 0; }
.opening h1 { max-width: 18ch; font-size: clamp(2.125rem, 5.4vw, 3.5rem); }
.opening-art { display: none; width: 16rem; height: auto; }
@media (min-width: 900px) { .opening { grid-template-columns: minmax(0, 1fr) auto; column-gap: 3rem; } .opening-art { display: block; } }
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pills li { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.75rem 0.25rem 0.5rem; border-radius: 62.4375rem; background: var(--leafwhite); border: 1px solid var(--ruling); font-weight: 700; font-size: 0.875rem; }
.pills li::before { content: ""; width: 1rem; height: 1rem; flex: none; background: var(--foil); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Country picker */
.country-chooser { display: grid; gap: 0.5rem; background: var(--leafwhite); border: 1px solid var(--ruling); border-top: 3px solid var(--foil); border-radius: 0.875rem; padding: 1rem 1.125rem 1.125rem; max-width: 36rem; }
.country-chooser label { font-weight: 700; }
.picker-row { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.country-chooser select, select.input { flex: 1 1 14rem; min-width: 0; font: inherit; font-size: 1.0625rem; padding: 0.6875rem 0.75rem; border: 1px solid var(--ruling); border-radius: 0.625rem; background: var(--parchment); color: var(--quill); }
.country-chooser .helper { margin: 0; }

/* Sections and cards */
.band-block { display: grid; gap: 1rem; }
.block-head { display: grid; gap: 0.25rem; }
.block-head h2 { margin: 0; font-size: clamp(1.4375rem, 2.6vw, 1.875rem); display: flex; align-items: center; gap: 0.625rem; }
.block-head p { margin: 0; color: var(--greyed); max-width: 62ch; }
.block-ico { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; flex: none; border-radius: 0.625rem; background: var(--foil-wash); color: var(--foil-deep); }
.block-ico svg { width: 1.25rem; height: 1.25rem; }
.tile-grid { display: grid; gap: 0.875rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.tile-grid.tools { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.tile { display: grid; align-content: start; gap: 0.5rem; background: var(--leafwhite); border: 1px solid var(--ruling); border-radius: 0.875rem; padding: 1.125rem; text-decoration: none; color: var(--quill); min-width: 0; transition: transform 0.12s ease, border-color 0.12s ease; }
.tile:hover { border-color: var(--cover); transform: translateY(-2px); }
.tile .tile-kind { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--foil-deep); }
.tile h3 { margin: 0; font-family: var(--type-title); font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.tile p { margin: 0; color: var(--greyed); font-size: 0.9375rem; }
.tile .tile-go { font-weight: 700; color: var(--cover); font-size: 0.9375rem; }
.tile-ico { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; background: var(--cover-wash); color: var(--cover); }
.tile-ico svg { width: 1.5rem; height: 1.5rem; }
.linkrun { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); column-gap: 1.75rem; }
.linkrun li { border-top: 1px solid var(--ruling); padding: 0.75rem 0; display: grid; gap: 2px; }
.linkrun a { font-weight: 700; text-decoration: none; }
.linkrun a:hover { text-decoration: underline; }
.linkrun span { color: var(--greyed); font-size: 0.9375rem; }

/* One passport, 31 countries */
.eu-band { display: grid; gap: 1.125rem; padding: 1.5rem 1.375rem; border-radius: 1rem; background: var(--spine); color: var(--on-spine); border-bottom: 4px solid var(--foil); }
@media (min-width: 760px) { .eu-band { padding: 2rem; } }
.eu-band-head { display: grid; gap: 0.25rem 1.5rem; align-items: center; }
@media (min-width: 640px) { .eu-band-head { grid-template-columns: auto minmax(0, 1fr); } }
.eu-big { margin: 0; font-family: var(--type-title); font-weight: 700; font-size: clamp(4.5rem, 12vw, 7rem); line-height: 0.9; color: #ecca86; }
.eu-band h2 { margin: 0 0 0.375rem; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--on-spine); }
.eu-band-head p { margin: 0; max-width: 60ch; color: #f6e7ea; }
.eu-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.eu-perks li { display: grid; gap: 0.25rem; align-content: start; padding: 0.875rem 1rem; border-radius: 0.75rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.18); }
.eu-perks b { font-size: 1.0625rem; color: #ecca86; }
.eu-perks span { font-size: 0.9375rem; color: #f6e7ea; }
.eu-band .press-alt { background: transparent; color: var(--on-spine); border-color: rgba(255, 255, 255, 0.75); }
.eu-map { display: grid; gap: 0.75rem; }
.eu-map h2 { margin: 0; font-size: clamp(1.375rem, 2.6vw, 1.75rem); }
.eu-map .helper { margin: 0; }
.eu-countries { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.375rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); }
.eu-countries li { padding: 0.4375rem 0.75rem; border-radius: 0.5rem; background: var(--leafwhite); border: 1px solid var(--ruling); border-left: 3px solid var(--cover); font-weight: 700; font-size: 0.9375rem; }
.eu-countries li.eea { border-left-color: var(--foil); }

/* How it works: three numbered steps */
.stage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.875rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); counter-reset: step; }
.stage-list li { counter-increment: step; display: grid; gap: 0.375rem; align-content: start; background: var(--leafwhite); border: 1px solid var(--ruling); border-radius: 0.875rem; padding: 1.125rem; }
.stage-list li::before { content: counter(step); display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--cover); color: var(--on-cover); font-family: var(--type-title); font-weight: 700; font-size: 1.125rem; }
.stage-list h3 { margin: 0.25rem 0 0; font-family: var(--type-title); font-weight: 700; font-size: 1.1875rem; }
.stage-list p { margin: 0; color: var(--greyed); font-size: 0.9375rem; }

/* Route types */
.routes { display: grid; gap: 0.875rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.route { display: grid; gap: 0.5rem; align-content: start; padding: 1.125rem; border-radius: 0.875rem; background: var(--leafwhite); border: 1px solid var(--ruling); border-left: 4px solid var(--cover); }
.route.r2 { border-left-color: var(--foil); }
.route.r3 { border-left-color: var(--greyed); }
.route h3 { margin: 0; font-family: var(--type-title); font-weight: 700; font-size: 1.1875rem; line-height: 1.25; }
.route p { margin: 0; color: var(--greyed); font-size: 0.9375rem; }

/* Country links shown as tags */
.country-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.country-tags a { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.4375rem 0.875rem; border-radius: 62.4375rem; background: var(--leafwhite); border: 1px solid var(--ruling); color: var(--quill); font-weight: 700; text-decoration: none; font-size: 0.9375rem; }
.country-tags a::after { content: "\2192"; color: var(--foil); }
.country-tags a:hover { border-color: var(--cover); color: var(--cover); }

/* What's changed */
.changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.changes li { display: grid; gap: 0.25rem 1.25rem; padding: 1rem 1.125rem; background: var(--leafwhite); border: 1px solid var(--ruling); border-radius: 0.875rem; }
@media (min-width: 700px) { .changes li { grid-template-columns: 9rem minmax(0, 1fr); } }
.changes time { font-weight: 700; color: var(--foil-deep); font-size: 0.9375rem; }
.changes h3 { margin: 0; font-family: var(--type-title); font-weight: 700; font-size: 1.125rem; }
.changes p { margin: 0.25rem 0 0; color: var(--greyed); font-size: 0.9375rem; }

.change-src { display: block; margin-top: 0.375rem; font-size: 0.875rem; }
.change-country { margin: 0.25rem 0 0 !important; font-size: 0.8125rem !important; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--foil-deep) !important; }
.country-card h3 { font-size: 1.375rem; }
.countries-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.later { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.later li { padding: 0.3125rem 0.75rem; border-radius: 62.4375rem; border: 1px dashed var(--ruling); color: var(--greyed); font-size: 0.9375rem; }

/* Built to be checked */
.credentials { display: grid; gap: 1rem; padding: 1.375rem; border-radius: 1rem; background: var(--foil-wash); border: 1px solid color-mix(in srgb, var(--foil) 35%, transparent); }
@media (min-width: 860px) { .credentials { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; padding: 1.75rem; } }
.credentials h2 { margin: 0 0 0.375rem; font-size: 1.5rem; }
.credentials > div > p { margin: 0; color: var(--greyed); }
.checkmarks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.checkmarks li { position: relative; padding-left: 1.875rem; }
.checkmarks li::before { content: ""; position: absolute; left: 0; top: 0.1875rem; width: 1.25rem; height: 1.25rem; background: var(--foil-deep); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4.2-4.2 1.4-1.4 2.8 2.8 5.8-5.8 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4.2-4.2 1.4-1.4 2.8 2.8 5.8-5.8 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Country guides: section tabs, quick facts, living there, next step */
.country-nav { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.375rem; }
.country-nav a { padding: 0.4375rem 0.875rem; border-radius: 62.4375rem; border: 1px solid var(--ruling); background: var(--leafwhite); color: var(--quill); font-weight: 700; font-size: 0.9375rem; text-decoration: none; }
.country-nav a:hover { border-color: var(--cover); color: var(--cover); }
.country-nav a[aria-current] { background: var(--cover); border-color: var(--cover); color: var(--on-cover); }
.quickfacts { background: var(--leafwhite); border: 1px solid var(--ruling); border-top: 4px solid var(--cover); border-radius: 0.875rem; padding: 1.125rem; display: grid; gap: 0.625rem; }
.quickfacts h2 { margin: 0; font-size: 1.25rem; }
.quickfacts dl { margin: 0; display: grid; }
.quickfacts dl div { padding: 0.5625rem 0; border-top: 1px solid var(--ruling); }
.quickfacts dt { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--foil-deep); }
.quickfacts dd { margin: 0.125rem 0 0; font-size: 0.9375rem; }
.facts-link { font-weight: 700; font-size: 0.9375rem; }
.living { display: grid; gap: 0.75rem; padding: 1.25rem; border-radius: 1rem; background: var(--foil-wash); border: 1px solid color-mix(in srgb, var(--foil) 35%, transparent); }
.leaf-text .living { margin-top: 1.75rem; }
.living h2 { margin: 0 !important; font-size: 1.375rem; }
.living p { margin: 0; }
.living-grid { display: grid; gap: 0.625rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.living-item { display: grid; gap: 0.25rem; align-content: start; background: var(--leafwhite); border-radius: 0.75rem; padding: 0.75rem 0.875rem; }
.living-time { grid-column: 1 / -1; }
.living-item .fact-key { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--foil-deep); }
.living-item .fact-val { font-weight: 700; }
.living-item select { font: inherit; font-size: 0.9375rem; padding: 0.25rem 0.375rem; border: 1px solid var(--ruling); border-radius: 0.5rem; background: var(--parchment); color: var(--quill); max-width: 100%; }
.next-step { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding: 1.125rem 1.25rem; border-radius: 0.875rem; background: var(--cover-wash); margin-top: 2rem; }
.next-step p { margin: 0; }
.next-step .fact-key { display: block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cover); }
.next-step .t { font-family: var(--type-title); font-weight: 700; font-size: 1.25rem; }
/* Who qualifies: one box per family link */
.cases { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.625rem; }
.leaf-text .cases li { margin: 0; font-size: 1rem; }
.cases li { display: grid; gap: 0.25rem; padding: 0.875rem 1rem; background: var(--leafwhite); border: 1px solid var(--ruling); border-left: 4px solid var(--granted); border-radius: 0 0.75rem 0.75rem 0; }
.cases li.maybe { border-left-color: var(--pending); }
.cases li.no { border-left-color: var(--refused); }
.cases .case-who { font-weight: 700; }
.cases .stamp-tag { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--granted); }
.cases li.maybe .stamp-tag { color: var(--pending); }
.cases li.no .stamp-tag { color: var(--refused); }
/* Numbered steps inside a guide */
.leaf-text ol.howto { list-style: none; padding: 0; counter-reset: howto; display: grid; gap: 0.75rem; }
.leaf-text ol.howto > li { counter-increment: howto; position: relative; padding: 0.875rem 1rem 0.875rem 3.5rem; background: var(--leafwhite); border: 1px solid var(--ruling); border-radius: 0.75rem; margin: 0; }
.leaf-text ol.howto > li::before { content: counter(howto); position: absolute; left: 1rem; top: 0.875rem; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--cover); color: var(--on-cover); font-weight: 700; font-size: 0.9375rem; }
.leaf-text ol.howto > li > b:first-child { display: block; }
/* Document checklists */
.doclist { list-style: none; padding: 0 !important; display: grid; gap: 0.375rem; }
.leaf-text .doclist li { margin: 0; display: flex; gap: 0.625rem; align-items: flex-start; }
.doclist li::before { content: ""; flex: none; width: 1.0625rem; height: 1.0625rem; margin-top: 0.25rem; border: 2px solid var(--greyed); border-radius: 0.25rem; }
.who-docs { display: grid; gap: 0.875rem; margin-top: 1rem; }
.who-docs section { background: var(--leafwhite); border: 1px solid var(--ruling); border-radius: 0.875rem; padding: 1rem 1.125rem; }
.who-docs h3 { margin: 0 0 0.5rem !important; }

/* Tables */
.datatable-wrap { overflow-x: auto; }
table.datatable { border-collapse: collapse; width: 100%; min-width: 20rem; font-variant-numeric: tabular-nums; }
table.datatable th, table.datatable td { text-align: left; padding: 0.625rem 0.75rem; border-top: 1px solid var(--ruling); vertical-align: top; }
table.datatable thead th { border-top: 0; font-size: 0.875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--greyed); white-space: nowrap; }
table.datatable td.fig { text-align: right; font-weight: 700; white-space: nowrap; }
table.datatable caption { text-align: left; color: var(--greyed); font-size: 0.875rem; padding-bottom: 0.375rem; }

/* Guides */
.leaf-grid { display: grid; gap: 1.75rem; align-items: start; }
@media (min-width: 960px) { .leaf-grid { grid-template-columns: minmax(0, 1fr) 17.5rem; } }
.leaf-text { max-width: 68ch; min-width: 0; }
.leaf-text > * + * { margin-top: 0.9em; }
.leaf-text > :first-child { margin-top: 0; }
.leaf-text h2 { font-size: 1.5625rem; margin: 1.6em 0 0.2em; }
.leaf-text h3 { font-size: 1.1875rem; margin: 1.3em 0 0; font-family: var(--type-title); font-weight: 700; }
.leaf-text p, .leaf-text li { font-size: 1.0625rem; }
.leaf-text ul, .leaf-text ol { padding-left: 1.375rem; }
.leaf-text li + li { margin-top: 0.375rem; }
.leaf-text code { font-family: var(--type-code); font-size: 0.92em; background: var(--cover-wash); padding: 1px 0.3125rem; border-radius: 0.25rem; }
.margin-notes { display: grid; gap: 0.875rem; position: static; }
@media (min-width: 960px) { .margin-notes { position: sticky; top: 1rem; } }
.margin-notes h2 { margin: 0; font-size: 1rem; font-family: var(--type-text); font-weight: 700; }
.margin-notes ul { margin: 0; padding-left: 1.125rem; display: grid; gap: 0.375rem; font-size: 0.9375rem; }
.notice { border-radius: 0.75rem; padding: 0.875rem 1rem; background: var(--cover-wash); display: grid; gap: 0.375rem; }
.notice p { margin: 0; }
.notice.is-yes { background: var(--granted-wash); }
.notice.is-maybe { background: var(--pending-wash); }
.notice .notice-title { font-weight: 700; }
.notice.is-yes, .notice.is-maybe { position: relative; padding-left: 3.125rem; }
.notice.is-yes::before, .notice.is-maybe::before { content: ""; position: absolute; left: 1rem; top: 0.9rem; width: 1.375rem; height: 1.375rem; -webkit-mask: var(--notice-ico) center / contain no-repeat; mask: var(--notice-ico) center / contain no-repeat; }
.notice.is-yes::before { --notice-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.2 14.4-4.2-4.2 1.4-1.4 2.8 2.8 5.8-5.8 1.4 1.4z'/%3E%3C/svg%3E"); background: var(--granted); }
.notice.is-maybe::before { --notice-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5 1.5 21h21L12 2.5zm1 15.5h-2v-2h2v2zm0-4h-2V9h2v5z'/%3E%3C/svg%3E"); background: var(--pending); }

/* The short disclaimer at the foot of every page */
.page-disclaimer { margin: 0 0 2rem; max-width: 68ch; font-size: 0.9375rem; color: var(--greyed); padding: 0.75rem 1rem; border-left: 3px solid var(--foil); background: var(--leafwhite); border-radius: 0; }
.page-disclaimer strong { color: var(--quill); }

/* Tool layout: form beside sticky results */
.sum-grid { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 880px) { .sum-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } .sum-grid .verdict { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 1rem); } }
form.pane { display: grid; gap: 1.625rem; grid-template-columns: minmax(0, 1fr); }
.cluster { display: grid; gap: 1.125rem; grid-template-columns: minmax(0, 1fr); }
.cluster-title { font-family: var(--type-title); font-size: 1.25rem; font-weight: 700; margin: 0; padding-bottom: 0.5rem; border-bottom: 1px solid var(--ruling); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.entry { display: grid; gap: 0.4375rem; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.field-name, legend { font-weight: 700; padding: 0; }
legend { margin-bottom: 0.4375rem; }
.helper { font-size: 0.875rem; color: var(--greyed); margin: 0; }
.helper strong { color: var(--quill); }
.extra { font-size: 0.9375rem; border-left: 3px solid var(--cover-wash); padding-left: 0.75rem; }
.extra summary { cursor: pointer; font-weight: 700; color: var(--cover); width: fit-content; }
.extra[open] summary { margin-bottom: 0.5rem; }
.extra ul { margin: 0; padding-left: 1.125rem; display: grid; gap: 0.5rem; }
.extra p { margin: 0.625rem 0 0; }
.switcher { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.switcher input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.switcher label { padding: 0.5625rem 1rem; border: 1px solid var(--ruling); border-radius: 62.4375rem; background: var(--parchment); cursor: pointer; user-select: none; }
.switcher input:checked + label { background: var(--cover); border-color: var(--cover); color: var(--on-cover); font-weight: 700; }
.switcher input:focus-visible + label { outline: 2px solid var(--cover); outline-offset: 2px; }
.text-input { font: inherit; font-size: 1.0625rem; padding: 0.625rem 0.75rem; border: 1px solid var(--ruling); border-radius: 0.625rem; background: var(--parchment); color: var(--quill); max-width: 17.5rem; }
.text-input:focus { outline: 2px solid var(--cover); outline-offset: 1px; }
.qualify-box { display: flex; gap: 0.625rem; align-items: flex-start; cursor: pointer; }
.qualify-box input { margin-top: 0.25rem; width: 1.125rem; height: 1.125rem; accent-color: var(--cover); flex: none; }
.qualify-box strong { display: block; }
.qualify-box .helper { display: block; }
.option-list { display: grid; gap: 0.625rem; }
.verdict { display: grid; gap: 1.125rem; min-width: 0; }
.title-line { font-family: var(--type-title); font-weight: 700; font-size: clamp(1.5625rem, 3.2vw, 2rem); line-height: 1.15; text-wrap: balance; margin: 0; }
.subline { margin: -0.5rem 0 0; color: var(--greyed); }
.stage-status { margin: 0; border-radius: 0.625rem; padding: 0.75rem 0.875rem; font-weight: 700; line-height: 1.4; }
.stage-status.is-yes { background: var(--granted-wash); border-left: 0.25rem solid var(--granted); }
.stage-status.is-maybe { background: var(--pending-wash); border-left: 0.25rem solid var(--pending); }
.stage-status.is-no { background: var(--refused-wash); border-left: 0.25rem solid var(--refused); }
dl.line-items { margin: 0; display: grid; }
dl.line-items div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5625rem 0; border-top: 1px solid var(--ruling); }
dl.line-items dt { color: var(--greyed); }
dl.line-items dd { margin: 0; font-weight: 700; text-align: right; }
.footnotes { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.footnotes li { background: var(--pending-wash); border-radius: 0.625rem; padding: 0.625rem 0.875rem; font-size: 0.9375rem; }
.footnotes li.is-yes { background: var(--granted-wash); }
.is-note { display: grid; gap: 1.5rem; }
@media (min-width: 880px) { .is-note { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.is-note h2 { font-size: 1.3125rem; margin: 0 0 0.5rem; }
.is-note ol, .is-note ul { margin: 0; padding-left: 1.375rem; display: grid; gap: 0.5rem; max-width: 62ch; }

/* Do I qualify? checker */
.ck-trail { display: grid; gap: 0.375rem; }
.ck-trail:empty { display: none; }
.ck-step { margin: 0; display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: var(--parchment); font-size: 0.9375rem; }
.ck-step span { color: var(--greyed); }
.ck-step b { flex: none; color: var(--cover); }
.ck-question { display: grid; gap: 0.625rem; padding: 1rem; border-radius: 0.75rem; border: 1.5px solid var(--cover); background: var(--leafwhite); }
.ck-q-text { margin: 0; font-family: var(--type-title); font-weight: 700; font-size: 1.25rem; line-height: 1.3; }
.ck-question .helper { margin-top: -0.25rem; }
.ck-restart { justify-self: start; font: inherit; font-weight: 700; color: var(--cover); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.ck-result { display: grid; gap: 0.75rem; border-top: 4px solid var(--foil); }
.ck-result .stage-status { justify-self: start; }
.ck-result p { margin: 0; }
.ck-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ck-links:empty { display: none; }

/* Compare two countries */
.sbs { display: grid; gap: 1rem; }
.cmp-pick { display: grid; gap: 0.75rem; align-items: end; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.cmp-swap { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid var(--cover); background: var(--leafwhite); color: var(--cover); font-size: 1.25rem; cursor: pointer; }
.cmp-swap:hover { background: var(--cover-wash); }
.cmp-table { background: var(--leafwhite); border: 1px solid var(--ruling); border-radius: 0.875rem; overflow: hidden; }
.cmp-row { display: grid; grid-template-columns: 13rem minmax(0, 1fr) minmax(0, 1fr); border-top: 1px solid var(--ruling); }
.cmp-row:first-child { border-top: 0; }
.cmp-label { padding: 0.75rem 1rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--foil-deep); background: var(--parchment); }
.cmp-cell { padding: 0.75rem 1rem; font-size: 0.9375rem; min-width: 0; }
.cmp-cell + .cmp-cell { border-left: 1px solid var(--ruling); }
.cmp-head .cmp-cell { font-family: var(--type-title); font-weight: 700; font-size: 1.375rem; }
.cmp-head .cmp-cell a { text-decoration: none; }
.cmp-cell .press { padding: 0.5rem 0.875rem; font-size: 0.9375rem; }
@media (max-width: 700px) {
  .cmp-pick { grid-template-columns: minmax(0, 1fr); }
  .cmp-swap { justify-self: center; transform: rotate(90deg); }
  .cmp-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cmp-label { grid-column: 1 / -1; padding: 0.5rem 0.875rem; }
  .cmp-cell { padding: 0.625rem 0.875rem; }
  .cmp-head .cmp-label { display: none; }
}

/* Document list builder */
.doc-out { display: grid; gap: 1rem; }
.doc-out h2 { margin: 0; font-size: 1.5rem; }
.doc-out p { margin: 0; }
.doc-person h3 { margin: 0 0 0.5rem; font-family: var(--type-title); font-weight: 700; font-size: 1.1875rem; }
.doc-out .doclist { margin: 0; }
.doc-out .doclist li { display: flex; gap: 0.625rem; align-items: flex-start; margin: 0; }
.doc-out ul:not(.doclist) { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.375rem; }
.doc-src { display: block; margin-top: 0.125rem; font-size: 0.875rem; color: var(--greyed); }
.switcher input:disabled + label { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; }
/* Family tree worksheet */
.tree { display: grid; gap: 1rem; }
.tree-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.tree-card { display: grid; gap: 0.75rem; background: var(--leafwhite); border: 1px solid var(--ruling) !important; border-top: 4px solid var(--cover) !important; border-radius: 0.875rem; padding: 1rem 1.125rem !important; }
.tree-card legend { float: left; width: 100%; margin: 0; font-family: var(--type-title); font-weight: 700; font-size: 1.25rem; }
.tree-card .text-input, .tree-intro .text-input { max-width: none; width: 100%; font-size: 1rem; }

/* Cost estimator */
.stage-bar { display: inline-flex; align-items: stretch; border: 1px solid var(--ruling); border-radius: 0.625rem; overflow: hidden; background: var(--parchment); justify-self: start; }
.stage-bar button { border: 0; background: transparent; color: var(--quill); font: inherit; font-size: 1.25rem; width: 2.75rem; cursor: pointer; }
.stage-bar button:hover { background: var(--cover-wash); }
.stage-bar input { width: 3.5rem; border: 0; border-left: 1px solid var(--ruling); border-right: 1px solid var(--ruling); background: var(--leafwhite); color: var(--quill); font: inherit; font-size: 1.0625rem; text-align: center; -moz-appearance: textfield; }
.stage-bar input::-webkit-outer-spin-button, .stage-bar input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cash { display: flex; align-items: center; gap: 0.375rem; border: 1px solid var(--ruling); border-radius: 0.625rem; background: var(--parchment); padding: 0 0.5rem; max-width: 17.5rem; }
.cash:focus-within { outline: 2px solid var(--cover); outline-offset: 1px; }
.cash select { border: 0; background: transparent; color: var(--quill); font: inherit; }
.cash input { flex: 1 1 0; width: 0; min-width: 0; border: 0; background: transparent; color: var(--quill); font: inherit; font-size: 1.0625rem; padding: 0.625rem 0; }
.cash input:focus { outline: none; }
.ce-out { display: grid; gap: 0.75rem; border-top: 4px solid var(--foil); }
.ce-out p { margin: 0; }
.ce-out .stage-status { justify-self: start; }
.ce-out dl.line-items dd { max-width: 50%; }
.ce-h { margin: 0.5rem 0 0; font-family: var(--type-title); font-weight: 700; font-size: 1.1875rem; }

/* Flowcharts: real text in boxes, so they reflow on phones and read aloud in order. */
.lineage-map { --lineage-cols: minmax(0, 1.5fr) 3rem minmax(0, 1fr); --lineage-ink: var(--greyed); display: grid; margin: 1.4em 0; max-width: 40rem; }
.lineage-step, .lineage-link { display: grid; grid-template-columns: var(--lineage-cols); align-items: center; }
.lineage-box { grid-column: 1; border: 1.5px solid var(--ruling); border-radius: 0.75rem; background: var(--leafwhite); padding: 0.75rem 0.875rem; text-align: center; font-size: 1rem; line-height: 1.35; }
.lineage-box b { display: block; }
.lineage-box small, .lineage-side small { display: block; margin-top: 0.1875rem; color: var(--greyed); font-size: 0.875rem; line-height: 1.3; }
.lineage-box.origin-pt { background: var(--parchment); }
.lineage-box.query { border-color: var(--cover); }
.lineage-box.finish-pt { background: var(--granted-wash); border: 2px solid var(--granted); }
.lineage-arrow { grid-column: 2; position: relative; height: 2px; margin: 0 0.5rem 0 0.25rem; background: var(--lineage-ink); }
.lineage-arrow::after { content: ""; position: absolute; right: -1px; top: 50%; transform: translateY(-50%); border-style: solid; border-width: 0.3125rem 0 0.3125rem 0.4375rem; border-color: transparent transparent transparent var(--lineage-ink); }
.lineage-arrow span { position: absolute; bottom: 0.375rem; left: 50%; transform: translateX(-50%); font-size: 0.875rem; color: var(--greyed); white-space: nowrap; }
.lineage-side { grid-column: 3; border: 1px solid var(--ruling); border-radius: 0.75rem; background: var(--parchment); padding: 0.625rem 0.75rem; text-align: center; font-size: 0.9375rem; line-height: 1.35; }
.lineage-link { height: 2.5rem; }
.lineage-line { grid-column: 1; justify-self: center; position: relative; width: 2px; height: 100%; background: var(--lineage-ink); }
.lineage-line::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); border-style: solid; border-width: 0.4375rem 0.3125rem 0 0.3125rem; border-color: var(--lineage-ink) transparent transparent transparent; }
.lineage-line span { position: absolute; left: 0.625rem; top: 50%; transform: translateY(-60%); font-size: 0.875rem; color: var(--greyed); white-space: nowrap; }
.lineage-map .lineage-note { margin: 0.75rem 0 0; font-size: 0.9375rem; color: var(--greyed); }
@media (max-width: 520px) { .lineage-map { --lineage-cols: minmax(0, 1.3fr) 2.5rem minmax(0, 1fr); } .lineage-box { font-size: 0.9375rem; padding: 0.625rem; } .lineage-side { font-size: 0.875rem; padding: 0.5rem; } }

/* Plain-words glossary */
.wordlist { margin: 0; display: grid; gap: 0.625rem; }
.wordlist div { background: var(--leafwhite); border: 1px solid var(--ruling); border-radius: 0.75rem; padding: 0.75rem 0.875rem; }
.wordlist dt { font-weight: 700; }
.wordlist dd { margin: 2px 0 0; font-size: 1rem; }

/* Common questions: tap to open */
.qa-list { display: grid; gap: 0.625rem; max-width: 47.5rem; }
.qa-list details { background: var(--leafwhite); border: 1px solid var(--ruling); border-radius: 0.75rem; padding: 0 1rem; }
.qa-list summary { cursor: pointer; font-weight: 700; font-size: 1.0625rem; padding: 0.875rem 0; list-style: none; display: flex; justify-content: space-between; gap: 0.75rem; }
.qa-list summary::-webkit-details-marker { display: none; }
.qa-list summary::after { content: "+"; font-size: 1.375rem; line-height: 1; color: var(--cover); flex: none; }
.qa-list details[open] summary::after { content: "\2212"; }
.qa-list details p { margin: 0 0 1rem; font-size: 1.0625rem; max-width: 68ch; }

/* Sources: kept, but folded away at the foot of the page */
.citations { font-size: 0.875rem; color: var(--greyed); max-width: 68ch; }
.citations summary { cursor: pointer; font-weight: 700; width: fit-content; }
.citations summary:hover { color: var(--quill); }
.citations p { margin: 0.5rem 0 0; }
.citations ul { margin: 0.5rem 0 0; padding-left: 1.25rem; display: grid; gap: 0.25rem; }
.citations a { color: var(--greyed); }

[id] { scroll-margin-top: 1rem; }

/* Footer */
.colophon { border-top: 3px solid var(--foil); background: var(--leafwhite); }
.colophon .measure { display: grid; gap: 0.875rem; padding-block: 1.5rem 2rem; font-size: 0.875rem; color: var(--greyed); }
@media (min-width: 760px) { .colophon .measure { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
.colophon p { margin: 0; max-width: 62ch; }
.colophon-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.125rem; align-content: start; }
.colophon-links a { font-weight: 700; }

/* Tools shown on other websites */
body.inset { background: transparent; }
.inset-wrap { padding: 2px; }
.inset-credit { margin: 0.75rem 2px 0; font-size: 0.875rem; color: var(--greyed); }
.inset .sum-grid .verdict { position: static; }

/* Send to a relative: one header button (the phone's own share sheet, or a small menu), and a box at the end of each page */
.relay { position: relative; order: 2; }
.mast-nav { order: 3; flex-basis: 100%; }
@media (min-width: 1100px) {
  .cover-bar .measure { flex-wrap: nowrap; column-gap: 1.25rem; }
  .mast-nav { order: 2; flex-basis: auto; margin-left: auto; flex-wrap: nowrap; gap: 0.125rem; }
  .mast-nav a { padding: 0.375rem 0.5625rem; white-space: nowrap; }
  .relay { order: 3; flex: none; }
}
.relay-btn { display: inline-flex; align-items: center; gap: 0.45rem; font: inherit; font-weight: 600; font-size: 0.9375rem; color: var(--spine); background: var(--foil); border: 0; border-radius: 0.5rem; padding: 0.45rem 0.875rem; cursor: pointer; }
.relay-btn:hover, .relay-btn[aria-expanded="true"] { background: #d3a74e; }
.relay-btn svg, .relay-item svg { width: 1.15rem; height: 1.15rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.relay-menu { position: absolute; right: 0; top: calc(100% + 0.5rem); z-index: 30; width: min(19rem, calc(100vw - 2rem)); display: grid; gap: 0.5rem; padding: 0.875rem; background: var(--leafwhite); color: var(--quill); border: 1px solid var(--ruling); border-radius: 0.5rem; box-shadow: 0 0.75rem 2rem rgba(15, 22, 45, 0.22); }
.relay-head { margin: 0; font-weight: 600; }
.relay-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 0.5rem; }
.relay-item { display: flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.5rem 0.75rem; font: inherit; font-weight: 600; font-size: 0.9375rem; text-align: left; color: var(--quill); text-decoration: none; background: var(--parchment); border: 1px solid var(--ruling); border-radius: 0.5rem; cursor: pointer; }
.relay-item svg { color: var(--cover); }
.relay-item:hover { border-color: var(--cover); color: var(--cover); }
.relay-item.relay-main { background: var(--cover); color: var(--on-cover); border-color: var(--cover); }
.relay-item.relay-main svg { color: var(--foil); }
.relay-item.relay-main:hover { color: var(--on-cover); filter: brightness(1.12); }
.relay-wrap { padding-bottom: 3rem; }
.relay-panel { display: grid; gap: 1rem; padding: 1.25rem; background: var(--cover-wash); border-radius: 0.5rem; border-left: 5px solid var(--foil); }
@media (min-width: 760px) { .relay-panel { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; padding: 1.5rem 1.75rem; } }
.relay-panel h2 { margin: 0 0 0.25rem; font-size: 1.4375rem; }
.relay-panel p { margin: 0; }
.relay-panel .relay-item { background: var(--leafwhite); }
.relay-panel .relay-item.relay-main { background: var(--cover); }
@media (max-width: 1099px) {
  .cover-bar .measure { position: relative; }
  .relay { position: static; }
  .relay-menu { right: 1rem; width: min(22rem, calc(100% - 2rem)); top: calc(100% - 0.25rem); }
}
@media (max-width: 480px) {
  .cover-bar .measure { gap: 0.625rem 0.75rem; }
  .nameplate { font-size: 1.125rem; gap: 0.5rem; }
  .nameplate-mark { width: 2rem; height: 2rem; }
  .relay-btn { font-size: 0.875rem; padding: 0.375rem 0.6875rem; }
  .mast-nav a { padding: 0.375rem 0.625rem; font-size: 0.875rem; }
  .pane { padding: 1.125rem 1rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* Printing: just the content, in black on white */
@media print {
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
    --parchment: #fff; --leafwhite: #fff; --quill: #111; --greyed: #3d3d3d; --ruling: #c4c4c4;
    --cover: #1f2f57; --cover-wash: #eef0f5; --on-cover: #fff; --foil: #7a5a14; --foil-deep: #5a420e; --foil-wash: #fff;
    --spine: #fff; --on-spine: #111; --endpaper: #fff;
    --granted: #2d6a4f; --granted-wash: #e2f0e8; --pending: #8a5a12; --pending-wash: #f8eedb; --refused: #9d3b2b; --refused-wash: #f7e4df;
    color-scheme: light;
  }
  .jump-link, .mast-nav, .relay, .relay-wrap, .margin-notes, .colophon-links, .opening-art, .pills, .country-chooser, .doc-form, .doc-actions, .tree-actions, .is-note, .page-disclaimer { display: none !important; }
  .sum-grid { display: block; }
  .tree-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .tree-card { break-inside: avoid; padding: 0.5rem !important; gap: 0.25rem; }
  .tree-card .text-input { border: 0; border-bottom: 1px solid #999; border-radius: 0; padding: 0.25rem 0; min-height: 1.75rem; }
  .cover-bar { border-bottom: 1px solid #000; }
  .leaf > .leaf-head, .leaf > .opening { border-image: none; padding-bottom: 0; }
  .leaf { padding-block: 0.5rem; }
  .leaf-grid { display: block; }
  a { color: inherit; }
}

/* Country pages: latest change, at-a-glance strip on phones, related countries */
.recent-change { margin: 0 0 1.25rem; padding: 0.75rem 1rem; border-radius: 0.75rem; background: var(--foil-wash); border: 1px solid color-mix(in srgb, var(--foil) 35%, transparent); display: grid; gap: 0.125rem; }
.recent-change .fact-key { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--foil-deep); }
.recent-change a { font-weight: 700; }
.glance { display: grid; gap: 0.75rem; margin: 0 0 1.5rem; padding: 1rem 1.125rem; background: var(--leafwhite); border: 1px solid var(--ruling); border-top: 4px solid var(--cover); border-radius: 0.875rem; }
.glance dl { margin: 0; display: grid; }
.glance dl div { padding: 0.5rem 0; border-top: 1px solid var(--ruling); }
.glance dl div:first-child { border-top: 0; padding-top: 0; }
.glance dt { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--foil-deep); }
.glance dd { margin: 0.125rem 0 0; }
.glance-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin: 0; }
@media (min-width: 960px) { .glance { display: none; } }
.related { display: grid; gap: 0.75rem; margin-top: 2rem; }
.related h2 { margin: 0 !important; }
.related > p { margin: 0; }
.related .country-card h3 { font-size: 1.1875rem; }
/* Checker: next steps after a result */
.ck-next { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; width: 100%; margin-top: 0.875rem; padding-top: 0.875rem; border-top: 1px solid var(--ruling); }
.ck-guide { flex-basis: 100%; margin-top: 0.875rem; font-weight: 700; }
.ck-next .fact-key { flex-basis: 100%; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--cover); }
@media print { .next-step, .ck-next, .recent-change, .glance, .related { display: none !important; } }
.related-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.related-list > li { display: grid; gap: 0.5rem; padding: 0.875rem 1rem; background: var(--leafwhite); border: 1px solid var(--ruling); border-radius: 0.75rem; }
.related-list .case-why { margin: 0; font-size: 0.9375rem; color: var(--greyed); }
.related-list .country-tags { margin: 0; }
.related-list .country-tags a { background: var(--parchment); }
.leaf-text .related-list, .leaf-text .related-list .country-tags { padding-left: 0; margin-left: 0; }
.leaf-text .related-list li { margin: 0; }
.leaf-text .related-list .country-tags li { list-style: none; }
/* Not eligible? The long way round */
.long-way { display: grid; gap: 0.75rem; margin-top: 2rem; padding: 1.25rem; border-radius: 1rem; background: var(--leafwhite); border: 1px solid var(--ruling); border-top: 4px solid var(--foil); }
.long-way h2 { margin: 0 !important; }
.long-way > p { margin: 0; }
.long-way dl { margin: 0; display: grid; }
.long-way dl div { padding: 0.625rem 0; border-top: 1px solid var(--ruling); }
.long-way dt { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--foil-deep); }
.long-way dd { margin: 0.125rem 0 0; }
.long-way .helper { font-size: 0.875rem; }
@media print { .long-way .helper a { text-decoration: none; } }
.cmp-empty { margin: 0; padding: 1.25rem; border: 1px dashed var(--ruling); border-radius: 0.875rem; color: var(--greyed); }
/* Country pages: quick start to the checker */
.quick-check { display: grid; gap: 0.625rem; margin: 0 0 1.5rem; padding: 1rem 1.125rem; background: var(--leafwhite); border: 1px solid var(--ruling); border-radius: 0.875rem; }
.quick-check h2 { margin: 0; font-size: 1.1875rem; }
.quick-check p { margin: 0; }
.quick-check .press-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
/* Countries page: comparison table */
table.country-table { min-width: 44rem; }
table.country-table caption { text-align: left; padding: 0 0 0.5rem; color: var(--greyed); font-size: 0.9375rem; }
table.country-table th[scope="row"] { white-space: nowrap; }
/* "Want someone to do it for you?" (switched off until partners_on is true) */
.help-box { display: grid; gap: 0.625rem; margin: 2rem 0 0; padding: 1rem 1.125rem; border: 1px solid var(--ruling); border-radius: 0.875rem; }
.help-box h2 { margin: 0 !important; }
.help-box p { margin: 0; }
.help-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.help-list .paid { margin-left: 0.5rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--greyed); }
.help-list .what { display: block; color: var(--greyed); font-size: 0.9375rem; }
@media print { .quick-check, .help-box { display: none !important; } }

/* Device check fixes (November 8, 2026): big browser text, thumb-sized tap targets, no iPhone zoom on dropdowns */
.leaf { grid-template-columns: minmax(0, 1fr); }
h1, h2, h3, dt, .kicker { overflow-wrap: break-word; }
a[href^="mailto:"] { overflow-wrap: anywhere; }
.living-item select { font-size: 1rem; min-height: 2.75rem; }
.cash select { font-size: 1rem; min-height: 2.75rem; }
.stage-bar, .stage-bar button { min-height: 2.75rem; }
.relay-btn { min-height: 2.75rem; }
.colophon-links { row-gap: 0; }
.colophon-links a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.change-src { padding-block: 0.3125rem; }
.facts-link { display: inline-block; padding-block: 0.625rem; }
.citations summary, .extra summary { padding-block: 0.625rem; }
.opening-text, .leaf-head, .wordlist { grid-template-columns: minmax(0, 1fr); }
p, li, dd, dt { overflow-wrap: break-word; }

/* The visit-count question (count.js): UK and EU visitors only, live site only */
.stamp-choice { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.stamp-choice[hidden] { display: none; }
.stamp-note { position: fixed; z-index: 60; left: max(1rem, env(safe-area-inset-left, 0px)); right: max(1rem, env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); max-width: 31rem; margin: 0; padding: 1.1rem 1.3rem 1.3rem;
  background: var(--cover); color: var(--on-cover); border: 2px solid var(--foil); border-radius: 10px;
  box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.35); font-family: var(--type-text); font-size: 1rem; line-height: 1.55; }
.stamp-note-head { margin: 0 0 0.4rem; font-family: var(--type-title); font-size: 1.25rem; color: var(--on-cover); }
.stamp-note p { margin: 0 0 1rem; }
.stamp-note a { color: var(--on-cover); }
.stamp-note-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.stamp-note-btn { flex: 1 1 9rem; min-height: 2.75rem; padding: 0 1rem; border: 2px solid var(--foil); border-radius: 999px;
  background: var(--foil-wash); color: var(--quill); font: inherit; font-weight: 600; cursor: pointer; }
.stamp-note-btn:hover, .stamp-note-btn:focus-visible { background: var(--foil); color: var(--quill); }
@media print { .stamp-note, .stamp-choice { display: none !important; } }

/* phones: the two buttons stack, Accept all on top (Kevin, 11 Nov 2026) */
@media (max-width: 40em) { .stamp-note-row { flex-direction: column; } .stamp-note-btn { flex: 0 0 auto; width: 100%; } .stamp-note-btn[data-answer="yes"] { order: -1; } }