/*
 * CV Atlas – static guide pages (generated by scripts/build-guides.mjs). No JavaScript.
 * Visual owner: Apple-style visuals specialist (page structure and markup: SEO).
 * Tokens match landing.css and app.css (docs/brand.md). Every text colour keeps ≥ 4.5:1 on its surface.
 */

/* Subsets of IBM Plex Sans (WOFF2, ~31 KB each): Latin for every page; Cyrillic and Greek only download where those letters appear. */

/* ── Tokens ── */
@font-face { font-family: 'Atlas Display'; src: url('../fonts/alegreya/AlegreyaSans-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --bg: #f7f9fe; --card: #ffffff; --sunken: #edf2fc; --glass: rgba(251, 252, 254, .8);
  --line: rgba(20, 44, 122, .12); --line-2: rgba(20, 44, 122, .2); --hairline: rgba(20, 44, 122, .09);
  --ink: #0e1630; --ink-2: #3a4566; --ink-3: #56607d;
  --brand: #1e4fd8; --brand-hover: #173fb0; --brand-ink: #ffffff; --brand-soft: #e8effd; --brand-tint: rgba(30, 79, 216, .12);
  --yes: #166534; --yes-bg: #e7f6ec; --no: #9f1d14; --no-bg: #fdecea; --maybe: #444b57; --maybe-bg: #eceff3;
  --focus-ring: 0 0 0 3px rgba(30, 79, 216, .3);
  --radius: 16px;
  --shadow: 0 1px 2px rgba(20, 44, 122, .04), 0 10px 28px -16px rgba(20, 44, 122, .18);
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
/* ── Base ── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.65 -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Noto Sans', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
a { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: from-font; }
a:hover { color: var(--brand-hover); }
::selection { background: var(--brand-tint); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--card); color: var(--ink); padding: 10px 14px; border-radius: 10px; z-index: 50; box-shadow: var(--shadow); }
.skip:focus { left: 12px; }
.fine { font-size: 14px; color: var(--ink-3); }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px;
  font-weight: 500; font-size: 16px; letter-spacing: -.005em; text-decoration: none; white-space: nowrap;
  transition: background-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn-primary { background: var(--brand); color: var(--brand-ink); box-shadow: 0 1px 2px rgba(20, 44, 122, .14), inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn-primary:hover { background: var(--brand-hover); color: var(--brand-ink); }
.btn-small { min-height: 36px; padding: 0 16px; font-size: 14px; }

/* ── Navigation: frosted glass ── */
.nav { position: sticky; top: 0; z-index: 20; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--hairline); }
.nav-inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: -.015em; }
.brand:hover { color: var(--ink); }
.logo { width: 28px; height: 28px; display: block; flex-shrink: 0; }
.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links a:not(.btn) { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.nav-links a:not(.btn):hover { color: var(--ink); }

/* ── Article ── */
.article { max-width: 820px; padding: 28px 0 64px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 0; margin: 0 0 22px; font-size: 14px; color: var(--ink-3); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before { content: '›'; margin-right: 6px; color: var(--ink-3); }
.crumbs a { color: var(--ink-3); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink-2); }
h1 { font-size: clamp(32px, 5vw, 48px); font-weight: 600; line-height: 1.08; letter-spacing: -.03em; margin: 0 0 18px; text-wrap: balance; }
h2 { font-size: clamp(23px, 2.6vw, 27px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em; margin: 48px 0 14px; text-wrap: balance; }
h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; margin: 22px 0 6px; }
p, ul { margin: 0 0 14px; }
p { text-wrap: pretty; }
.answer { font-size: 20px; line-height: 1.55; color: var(--ink-2); letter-spacing: -.005em; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 24px 0 8px; }
.cta .btn { white-space: normal; text-align: center; max-width: 100%; line-height: 1.3; padding-top: 10px; padding-bottom: 10px; }
.note { background: var(--brand-soft); border: 1px solid var(--brand-tint); border-radius: 12px; padding: 14px 16px; font-size: 15px; color: var(--ink); }
.tips { padding-left: 20px; }
.tips li { margin-bottom: 8px; color: var(--ink-2); }
.tips li::marker { color: var(--brand); }
.jobs { color: var(--ink-2); font-size: 15px; }
.sub { color: var(--ink-3); font-size: 14px; }

/* ── Tables (glance, headings, regs, sections) ── */
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); margin: 0 0 16px; box-shadow: var(--shadow); -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
tr:last-child th, tr:last-child td { border-bottom: 0; }
thead th { font-size: 12px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; background: var(--sunken); }
tbody th { font-weight: 600; width: 40%; }
/* At a glance: label column quieter, like a settings list */
.glance tbody th { font-weight: 500; color: var(--ink-2); }
/* Translated headings: two equal columns */
.headings td { width: 50%; }
.headings td[lang] { font-weight: 500; }
/* Regulated jobs: the licence is the point, so it gets the weight */
.regs tbody th { width: 34%; }
.regs tbody th a { text-decoration: none; }
.regs tbody th a:hover { text-decoration: underline; }
/* Sections to include */
.sections tbody th { width: 38%; }
.sections td[lang] { color: var(--ink-2); }
/* Comparison with neighbouring countries: wide, so it scrolls sideways on phones; the page's own country is highlighted */
.compare { min-width: 680px; }
.compare th, .compare td { white-space: nowrap; }
.compare tbody th { width: auto; }
tr.me > * { background: var(--brand-soft); }
tr.me > th { box-shadow: inset 3px 0 0 var(--brand); }
/* Tips specific to this country (the rest are shared by its region). */
.tips li.own { font-weight: 500; color: var(--ink); }
.tips li.own::marker { color: var(--brand); }
/* Region hubs: member countries; jobs index: fields */
.members { min-width: 620px; }
.members tbody th, .fields tbody th { width: auto; white-space: nowrap; }
.members td:not(:last-child) { white-space: nowrap; }
.members td:last-child { min-width: 240px; }
.members td:last-child, .fields td:last-child { color: var(--ink-2); }
.fields tbody th a { text-decoration: none; }
.fields tbody th a:hover { text-decoration: underline; }
/* The country's own tip, ahead of the regional ones */
.tips li.own { color: var(--ink); font-weight: 500; }
tbody tr { transition: background-color .15s var(--ease); }
tbody tr:not(.me):hover { background: color-mix(in srgb, var(--brand-soft) 45%, transparent); }
.lvl { display: inline-block; font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.lvl-yes { background: var(--yes-bg); color: var(--yes); }
.lvl-no { background: var(--no-bg); color: var(--no); }
.lvl-maybe { background: var(--maybe-bg); color: var(--maybe); }

/* ── Link lists ── */
.links { list-style: none; padding: 0; display: grid; gap: 4px; }
.links.cols { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 20px; }
.links a { display: inline-block; padding: 4px 0; text-decoration: none; }
.links a:hover { text-decoration: underline; }

/* ── Facts and FAQ panels ── */
.facts, .faq { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 6px 24px 14px; margin: 36px 0 16px; box-shadow: var(--shadow); }
.facts h2, .faq h2 { margin-top: 20px; }
.facts li { margin-bottom: 10px; }
.src { font-size: 13px; white-space: nowrap; }
.qa { padding: 4px 0 2px; border-top: 1px solid var(--hairline); }
.qa:first-of-type { border-top: 0; }
.qa h3 { margin-top: 16px; }
.qa p { color: var(--ink-2); }
.updated { margin-top: 44px; padding-top: 16px; border-top: 1px solid var(--hairline); }

/* ── Footer ── */
.footer { border-top: 1px solid var(--hairline); padding: 32px 0 44px; }
.footer-inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.footer-links a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.footer-links a:hover { color: var(--ink); text-decoration: underline; }

/* ── Small screens ── */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .wrap { width: min(100% - 32px, 1120px); }
  .nav-links { gap: 12px; }
  .nav-links a:not(.btn) { font-size: 14px; }
  .article { padding-top: 20px; }
  .answer { font-size: 18px; }
  h2 { margin-top: 40px; }
  tbody th, .regs tbody th, .sections tbody th { width: auto; }
  th, td { padding: 10px 12px; }
  table { font-size: 15px; }
  .facts, .faq { padding: 4px 18px 12px; }
  .cta .btn { flex: 1 1 100%; }
  .links.cols { grid-template-columns: 1fr 1fr; }
}
@media (pointer: coarse) {
  .btn-small { min-height: 44px; }
  .links a { padding: 8px 0; }
  .footer-links a, .nav-links a:not(.btn), .crumbs a { padding: 8px 0; display: inline-block; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}
@media print {
  .nav, .footer, .cta, .skip { display: none; }
  body { background: #fff; color: #000; }
  .table-wrap, .facts, .faq { box-shadow: none; }
}

/* QA 28 Oct: 24 px targets with a mouse, 44 px on touch */
.footer-links a, .nav-links a:not(.btn), .crumbs a { display: inline-block; padding: 4px 0; min-height: 24px; }
@media (pointer: coarse), (max-width: 560px) {
  .footer-links a, .nav-links a:not(.btn) { padding: 12px 0; }
  .brand { min-height: 44px; }
}
.footer p a { display: inline-block; padding: 3px 0; }
@media (pointer: coarse), (max-width: 560px) {
  .crumbs a, .footer p a { padding: 12px 0; }
}
@media (pointer: coarse), (max-width: 560px) {
  .footer-links a, .nav-links a:not(.btn), .crumbs a { min-width: 44px; text-align: center; }
  .regs a { display: inline-block; padding: 12px 0; }
}

/* White and blue identity (P17): display face for the brand and headings, blue browser surfaces. */
::selection { background: #dce6fb; color: #142c7a; }
html { scrollbar-color: #dce6fb transparent; }
body { caret-color: #1e4fd8; }
h1, h2 { font-family: 'Atlas Display', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Noto Sans', sans-serif; font-weight: 700; color: #142c7a; letter-spacing: -.015em; }
.brand, .legal-brand { font-family: 'Atlas Display', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, 'Noto Sans', sans-serif; font-weight: 700; color: #142c7a; }

/* The name is written in capitals: CV ATLAS. The markup keeps "CV Atlas" so screen readers say it as words. */
.brand, .legal-brand { text-transform: uppercase; letter-spacing: .06em; }