/* LifeFork — дизайн-токени (етап 1 GLOBAL_REDESIGN_PLAN; еталон — prototypes/answers-v3, DESIGN_FOUNDATION).
   Єдине джерело кольорів, типографіки, відступів, ширин і поверхонь. Значення кольорів — без змін (ADR-0009).
   Старі назви (--s-*, --shadow) лишаються аліасами в кінці файлу, щоб наявні стилі працювали без змін. */

:root {
  /* Прототип має лише світлу тему: нативні контроли (поля, списки, чекбокси) не темнішають у темному режимі середовища. */
  color-scheme: light;
  /* — Шрифт (без змін, PRD §9.2) — */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;

  /* — Поверхні й текст (без змін) — */
  --background: #f2f3f7;
  --surface: #ffffff;
  --surface-2: #f6f7fa;
  --foreground: #0c0d10;
  --muted-foreground: #4a4f5c;
  --border: #d9dce4;

  /* — Дії (без змін) — */
  --primary: #0c0d10;
  --primary-foreground: #ffffff;
  --primary-hover: #2b2e36;
  --ring: #2f5bea;
  --link: #2440c2;

  /* — Статуси: текст завжди є, колір лише дублює (без змін) — */
  --fact: #1d3a8a;          --fact-bg: #e8edfb;
  --assume: #5b2d8a;        --assume-bg: #f1eaf8;
  --unknown: #7a4300;       --unknown-bg: #fbf0e1;
  --personal: #0b4f6c;      --personal-bg: #e2f1f7;
  --helps: #174ea6;         --helps-bg: #e8f0fe;
  --harder: #8a1f3d;        --harder-bg: #fbe9ee;
  --freshness-current: #146c43; /* актуальність джерела; текст завжди дублює колір */
  --warn: #7a4300;          --warn-bg: #fff6e8;

  /* — Колишні жорсткі значення, тепер токени — */
  --input-border: #858a96;  /* рамка полів: 3.46:1 на білому (WCAG 1.4.11); було #9fa3ad — 2.53:1 */

  /* — Градієнти: лише акцентні зони (без змін) — */
  --accent-zone: linear-gradient(118deg, #e3f4ee 0%, #e7e8f9 48%, #f8e6ec 100%);
  --accent-soft: linear-gradient(118deg, #f1f9f6 0%, #f2f2fc 50%, #fcf3f6 100%);

  /* — Типографіка: 6 розмірів (40 · 32 · 28 · 20 · 16 · 14), висота рядка за роллю — */
  --t-display: 40px; --lh-display: 44px;  /* лише назва країни */
  --t-h1: 32px;      --lh-h1: 40px;       /* назва екрана */
  --t-h2: 28px;      --lh-h2: 36px;       /* розділ */
  --t-h3: 20px;      --lh-h3: 28px;       /* питання, підрозділ, картка */
  --t-title: 20px;   --lh-title: 28px;    /* назва картки/питання: однакова на всіх ширинах */
  --t-lead: 16px;    --lh-lead: 24px;     /* вступний абзац: той самий розмір, що й body */
  --t-body: 16px;    --lh-body: 24px;     /* інтерфейс і таблиці */
  --lh-prose: 26px;                       /* довге читання: відповіді, умови */
  --t-small: 14px;   --lh-small: 20px;    /* службове: підписи, дати, мітки */
  --t-caption: 14px; --lh-caption: 20px;  /* псевдонім small: 12 px більше не використовується */
  --t-brand: 22px;   /* знак LifeFork — не частина шкали тексту */

  /* — Ритм за роллю: заголовок → абзац · абзац → група · група → розділ (Editorial); Workspace задає свої — */
  --gap-title: 12px; --gap-group: 24px; --gap-section: 40px;

  /* — Відступи: 8-px сітка; 12 px — узаконений півкрок V3 — */
  --space-0-5: 4px;
  --space-1: 8px;
  --space-1-5: 12px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;

  /* — Ширини й компонування — */
  --measure-prose: 65ch;
  --card-max: calc(65ch + 2 * var(--space-3));
  --side-nav-w: 232px;
  --panel-w: clamp(400px, 30vw, 480px);
  --topbar-h: 64px;
  --bar-h: 56px;
  --bottomnav-h: 64px;

  /* — Поверхні — */
  --r-card: 24px;
  --r-inner: 16px;
  --r-pill: 999px;
  --shadow: 0 1px 2px rgb(12 13 16 / 0.04), 0 8px 24px rgb(12 13 16 / 0.05);   /* наявні картки й панелі */
  --card-shadow: 0 1px 2px rgb(12 13 16 / 0.05), 0 4px 16px rgb(12 13 16 / 0.05); /* картки V3: делікатна, без обведення */
  --tap: 48px;

  /* — Аліаси для наявних стилів (не використовувати в новому коді) — */
  --s-1: var(--space-0-5);
  --s-2: var(--space-1);
  --s-3: var(--space-1-5);
  --s-4: var(--space-2);
  --s-5: 20px;               /* поза сіткою; замінюється по екранах на етапах 3–5 */
  --s-6: var(--space-3);
  --s-8: var(--space-4);
  --s-10: var(--space-5);
  --s-12: var(--space-6);
}

/* Спільні компоненти (етап 1 GLOBAL_REDESIGN_PLAN; еталон — prototypes/answers-v3). Лише токени з tokens.css.
   Правила групування: відстань → роздільник → фон → тінь; картка в картці заборонена (REDESIGN_ITERATION_2 §6). */

/* — Поверхні — */
.surface-card { display: grid; gap: var(--space-1-5); max-width: var(--card-max); padding: var(--space-3); border-radius: var(--r-inner); background: var(--surface); box-shadow: var(--card-shadow); }
.is-narrow .surface-card { padding: var(--space-2); }
.surface-list { max-width: var(--card-max); background: var(--surface); border-radius: var(--r-card); box-shadow: var(--card-shadow); }
.surface-list > * + * { border-top: 1px solid var(--border); }
.surface-inset { display: grid; gap: var(--space-1); padding: var(--space-2); border-radius: 12px; background: var(--surface-2); }
.prose { max-width: var(--measure-prose); text-wrap: pretty; }

/* — Кнопки: доповнення до .btn-primary / .btn-secondary / .btn-quiet / .btn-chip з app.css — */
.btn-details { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-2); border: 1.5px solid var(--foreground); border-radius: var(--r-pill); background: var(--surface); font: inherit; font-size: var(--t-small); font-weight: 650; cursor: pointer; }
.btn-details:hover { background: var(--surface-2); }
.btn-details[aria-expanded='true'] { background: var(--foreground); color: var(--primary-foreground); }
.btn-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2); font-size: var(--t-lead); cursor: pointer; }
.btn-icon:hover { background: var(--border); }

/* — Розкриття одного рівня — */
.disclosure-body { display: grid; gap: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--border); }
.disclosure-body[hidden] { display: none; }
.disclosure-end { justify-self: start; }

/* — Про дані — */
.about-toggle { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-0-5); border: 0; background: none; color: var(--link); font: inherit; font-size: var(--t-small); font-weight: 650; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.about-data { display: grid; gap: var(--space-2); max-width: var(--measure-prose); padding: var(--space-2) var(--space-3); border-radius: var(--r-inner); background: var(--surface); }
.about-data[hidden] { display: none; }
.about-data dl { display: grid; gap: var(--space-1); margin: 0; font-size: var(--t-small); line-height: var(--lh-small); }
.about-data dl div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); padding-top: var(--space-1); border-top: 1px solid var(--border); }
.about-data dt { color: var(--muted-foreground); }
.about-data dd { margin: 0; font-weight: 600; text-align: right; }

/* Умова: критична — колір і розмір основного тексту, лише жирне «Важливо:»; уточнення — дрібно й сіро. */
.condition { margin: 0; font-size: var(--t-small); line-height: var(--lh-small); color: var(--muted-foreground); text-wrap: pretty; }
.condition strong { font-weight: 650; }
.condition.is-critical { font-size: var(--t-body); line-height: var(--lh-body); color: var(--foreground); }
.condition.is-critical strong { font-weight: 700; }

/* — Навігація розділами (desktop) — */
.side-nav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.side-nav button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: var(--space-1); min-height: 44px; padding: var(--space-1) var(--space-1-5); border: 0; border-radius: 12px; background: none; text-align: left; font: inherit; font-size: var(--t-small); line-height: var(--lh-small); font-weight: 600; cursor: pointer; }
.side-nav button:hover { background: rgb(255 255 255 / 0.7); }
.side-nav button[aria-current='true'] { background: var(--surface); font-weight: 750; box-shadow: inset 3px 0 0 var(--foreground), var(--card-shadow); }
.side-nav .count, .cat-switcher .count, .toc .count { color: var(--muted-foreground); font-weight: 400; font-variant-numeric: tabular-nums; }
.side-nav button[aria-current='true'] .count { color: var(--foreground); }

/* — Перемикач розділу (mobile): один рядок «← Назад · Розділ ▾» — */
.cat-switcher { position: relative; display: flex; align-items: center; gap: var(--space-1); min-width: 0; flex: 1 1 auto; }
.cat-switcher-back { flex: none; display: inline-flex; align-items: center; gap: var(--space-0-5); min-height: 44px; padding: 0 var(--space-1-5) 0 var(--space-1); border: 0; border-radius: var(--r-pill); background: var(--surface-2); font: inherit; font-size: var(--t-small); font-weight: 650; cursor: pointer; }
.cat-switcher-current { display: flex; align-items: center; gap: var(--space-1); min-width: 0; flex: 1 1 auto; min-height: 44px; padding: 0 var(--space-1-5); border: 0; border-radius: var(--r-pill); background: var(--surface-2); font: inherit; font-size: var(--t-small); font-weight: 700; text-align: left; cursor: pointer; }
.cat-switcher-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-switcher-caret { margin-left: auto; }
.cat-switcher-menu { position: absolute; left: 0; right: 0; top: calc(100% + var(--space-1)); z-index: 40; max-height: min(70vh, 480px); overflow: auto; margin: 0; padding: var(--space-1); list-style: none; border-radius: var(--r-inner); background: var(--surface); box-shadow: 0 12px 32px rgb(12 13 16 / 0.18); }
.cat-switcher-menu button { display: flex; width: 100%; justify-content: space-between; gap: var(--space-1); min-height: 44px; padding: var(--space-1) var(--space-1-5); border: 0; border-radius: 10px; background: none; text-align: left; font: inherit; font-weight: 600; cursor: pointer; }
.cat-switcher-menu button:hover { background: var(--surface-2); }
.cat-switcher-menu button[aria-current='true'] { background: var(--foreground); color: var(--primary-foreground); }
.cat-switcher-menu button[aria-current='true'] .count { color: var(--primary-foreground); }

/* — Зміст розділу — */
.toc { max-width: var(--card-max); padding: var(--space-1-5) var(--space-2); border-radius: var(--r-inner); background: rgb(255 255 255 / 0.55); }
.toc-title { margin: 0; font-size: var(--t-caption); line-height: var(--lh-caption); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
.toc ol { display: grid; margin: var(--space-0-5) 0 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc button { display: grid; grid-template-columns: 24px minmax(0, 1fr); width: 100%; min-height: 40px; padding: var(--space-1) var(--space-0-5); border: 0; border-radius: 8px; background: none; text-align: left; color: var(--link); font: inherit; font-size: var(--t-small); line-height: var(--lh-small); cursor: pointer; }
.toc button::before { content: counter(toc) '.'; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.toc button:hover { background: var(--surface); text-decoration: underline; text-underline-offset: 3px; }

/* — Джерела: компактний варіант SourceList — */
.sources.is-compact li + li { border-top: 1px solid var(--border); }
.sources.is-compact .source-link { display: grid; gap: 2px; min-height: 44px; padding: var(--space-1) 0; color: var(--foreground); text-decoration: none; }
.sources.is-compact .source-domain { color: var(--link); font-weight: 650; overflow-wrap: anywhere; }
.sources.is-compact .source-link:hover .source-domain { text-decoration: underline; }
.sources.is-compact .source-title { font-size: var(--t-small); line-height: var(--lh-small); color: var(--muted-foreground); }

/* — Налаштування показу в хедері — */
.settings { position: relative; flex: none; }
.settings-toggle { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; padding: 0 var(--space-2) 0 var(--space-1-5); border: 1.5px solid var(--border); border-radius: var(--r-pill); background: var(--surface); font: inherit; font-size: var(--t-small); font-weight: 650; cursor: pointer; }
.settings-toggle.is-compact { width: 44px; padding: 0; justify-content: center; border-color: transparent; background: var(--surface-2); }
.settings-toggle:hover { background: var(--surface-2); }
.settings-toggle[aria-expanded='true'] { background: var(--foreground); border-color: var(--foreground); color: var(--primary-foreground); }
.settings-icon { flex: none; }
.settings-panel { position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: 40; display: grid; gap: var(--space-2); width: min(320px, calc(100vw - 2 * var(--space-2))); padding: var(--space-2); border-radius: var(--r-inner); background: var(--surface); box-shadow: 0 12px 32px rgb(12 13 16 / 0.18); }
.settings-panel[hidden] { display: none; }
.setting { display: grid; gap: var(--space-1); }
.setting + .setting { padding-top: var(--space-2); border-top: 1px solid var(--border); }
.setting-title { margin: 0; font-size: var(--t-caption); line-height: var(--lh-caption); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
.setting-hint { margin: 0; font-size: var(--t-small); line-height: var(--lh-small); color: var(--muted-foreground); }

/* «Згорнути» в кінці розкриття — та сама контурна пілюля, що й кнопка відкриття (не заливка: стан «згорнути» — дія, не стан). */
.disclosure-end { margin-top: var(--space-0-5); }
.collapse-all { margin-block: var(--space-1); }

/* — Порівняння за каталогом: доповнення до .compare-table, .kcell-value, .tag; тиха, повітряна подача — */
.catalog-entry { justify-self: start; margin-top: var(--space-1); padding-inline: 0; }
.catalog-wrap { position: relative; } /* зняті з потоку .sr-only не розширюють сторінку поза горизонтальною прокруткою таблиці */
/* Фіксована сітка: стовпці однакової ширини й не стрибають, коли розгортається «Схожі дані» чи «Ще N». */
.compare-table.catalog-table { --head-w: 220px; table-layout: fixed; width: max(100%, calc(var(--head-w) + var(--cols, 3) * 176px)); }
.catalog-table td, .catalog-table th { overflow-wrap: anywhere; }
.app .compare-table.catalog-table .row-head { position: sticky; left: 0; z-index: 1; width: var(--head-w); min-width: 0; background: var(--surface); }
.catalog-table tr.group .row-head { background: var(--surface-2); }
.catalog-subgroup { display: block; margin-bottom: 2px; font-size: var(--t-small); line-height: var(--lh-small); font-weight: 400; color: var(--muted-foreground); }
.catalog-name { display: inline; }
.catalog-main { display: block; }
.catalog-value-sm { font-weight: 650; font-variant-numeric: tabular-nums; }
.catalog-none { font-size: var(--t-body); line-height: var(--lh-body); font-weight: 600; color: var(--muted-foreground); }
.catalog-more { margin-top: var(--space-0-5); }
.catalog-others { display: grid; gap: var(--space-1); margin: var(--space-1) 0 0; padding: 0; list-style: none; font-size: var(--t-small); line-height: var(--lh-small); }

/* Тихі текстові кнопки таблиці: «Ще N», «Схожі дані», «Показати ще», «N показників →». Без рамки й заливки;
   підкреслення — підказка, що це дія; зона натискання ≥ 36 px завдяки вертикальним відступам. */
.catalog-more .btn-details,
.catalog-extra .btn-details,
.catalog-link {
  min-height: 0; padding: var(--space-0-5) 0; border: 0; border-radius: 6px; background: none;
  font: inherit; font-size: var(--t-small); line-height: var(--lh-small); font-weight: 600; color: var(--muted-foreground);
  text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 4px; cursor: pointer;
}
.catalog-more .btn-details:hover,
.catalog-extra .btn-details:hover,
.catalog-link:hover { background: none; color: var(--foreground); text-decoration-color: currentColor; }
.catalog-more .btn-details[aria-expanded='true'],
.catalog-extra .btn-details[aria-expanded='true'] { background: none; color: var(--foreground); }
.catalog-link { color: var(--link); text-decoration-color: currentColor; }
.catalog-link:hover { color: var(--link); text-decoration-thickness: 2px; }
.catalog-extra td { border-bottom: 0; }
.catalog-spec th, .catalog-spec td { border-bottom: 0; }
.catalog-spec .row-head { font-weight: 400; color: var(--muted-foreground); }

/* Кнопка «i» і підказка (InfoPopover): маленька іконка, зона натискання 44 px */
.info-root { display: inline-block; }
.info-btn { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 6px; padding: 0; border: 1px solid var(--input-border); border-radius: 50%; background: none; color: var(--muted-foreground); font: italic 700 10px/1 Georgia, 'Times New Roman', serif; vertical-align: 1px; cursor: pointer; }
.info-btn::after { content: ''; position: absolute; inset: -14px; }
.info-btn:hover, .info-btn[aria-expanded='true'] { border-color: var(--foreground); color: var(--foreground); }
.info-pop { position: fixed; z-index: 60; display: grid; gap: var(--space-1); padding: var(--space-1-5) var(--space-2); border-radius: var(--r-inner); background: var(--surface); box-shadow: 0 12px 32px rgb(12 13 16 / 0.18); font-size: var(--t-small); line-height: var(--lh-small); font-weight: 400; text-align: left; }
.info-pop[hidden] { display: none; }
.info-pop p { margin: 0; }
@media (max-width: 520px) { .compare-table.catalog-table { --head-w: 128px; } }

/* Shared select-only combobox, including inside the filter dialog. */
.select-field { position:relative; min-width:0; }
.select-trigger { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:44px; padding:10px 12px; border:1.5px solid var(--input-border); border-radius:var(--r-inner); background:var(--surface); color:var(--foreground); font:inherit; text-align:left; cursor:pointer; }
.select-trigger>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.select-trigger svg { flex:none; }
.select-trigger:hover:not(:disabled), .select-trigger[aria-expanded=true] { border-color:var(--foreground); }
.select-trigger:disabled { opacity:.55; cursor:not-allowed; }
.select-menu { position:fixed; z-index:100; overflow:auto; overscroll-behavior:contain; padding:6px; border:1px solid var(--border); border-radius:var(--r-inner); background:var(--surface); color:var(--foreground); box-shadow:0 12px 32px rgb(12 13 16 / .16); }
.select-option { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:10px 12px; border-radius:8px; font-size:var(--t-small); line-height:var(--lh-small); cursor:pointer; overflow-wrap:anywhere; }
.select-option[aria-selected=true] { background:var(--accent-soft); font-weight:650; }
.select-option[data-active=true] { background:var(--surface-2); outline:2px solid var(--ring); outline-offset:-2px; }
.select-option[aria-disabled=true] { color:var(--muted-foreground); cursor:not-allowed; }

/* LifeFork — стилі прототипу P30 (Proposed, ADR-0009); токени — tokens.css.
   Натхнення Дією як принципи: виразна типографіка, контрастна основна дія, світлі поверхні,
   просторі картки, м'які градієнти лише в акцентних зонах. Власні токени; імена семантичних
   токенів сумісні з темами shadcn/ui (background, foreground, primary, muted, border, ring). */

:root {
  /* Токени — у tokens.css (етап 1 GLOBAL_REDESIGN_PLAN). Тут лише базові властивості документа. */
  font-family: var(--font);
  color: var(--foreground);
  background: var(--background);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.app[data-accent='strong'] {
  --accent-zone: linear-gradient(118deg, #bfe9dc 0%, #c9cdf6 48%, #f5c6d4 100%);
  --accent-soft: linear-gradient(118deg, #dcf3eb 0%, #e1e3fa 50%, #fbe0e8 100%);
  --background: #eceef6;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--background); }
h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: var(--t-display); font-weight: 750; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
h2 { font-size: var(--t-h2); font-weight: 700; }
h3 { font-size: var(--t-h3); font-weight: 700; }
h4 { font-size: var(--t-body); font-weight: 700; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 6px; }
/* Route destinations receive focus for screen readers, without looking like form fields. */
[data-screen-title][tabindex='-1']:focus, [data-panel-title][tabindex='-1']:focus { outline: none; }

.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; }
.skip { position: absolute; left: 16px; top: 8px; transform: translateY(-200%); background: var(--surface); padding: 12px 16px; border-radius: var(--r-inner); z-index: 100; }
.skip:focus { transform: none; }
.muted { color: var(--muted-foreground); }
.small { font-size: var(--t-small); }
.eyebrow { font-size: var(--t-caption); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: var(--s-3); }
.lead { font-size: var(--t-lead); color: var(--muted-foreground); max-width: 60ch; margin-top: var(--s-4); }
.section-title { margin: var(--s-10) 0 var(--s-4); }
.small-title { font-size: var(--t-lead); }
.footnote { text-align: center; color: var(--muted-foreground); font-size: var(--t-small); margin: var(--s-10) 0; }

/* — Кнопки ————————————————————————————————————————— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 12px 24px; border-radius: var(--r-pill);
  border: 1.5px solid transparent; font-weight: 650; cursor: pointer; text-align: center; text-decoration: none;
  transition: background-color 150ms ease, border-color 150ms ease;
}
.btn-primary { background: var(--primary); color: var(--primary-foreground); }
.btn-primary:hover { background: var(--primary-hover); }
.country-picker-head .btn-primary:disabled { background: var(--primary); color: var(--primary-foreground); opacity: 0.55; cursor: not-allowed; }
.btn-primary[aria-disabled='true'] { background: #9a9da6; cursor: not-allowed; }
.btn-secondary { background: var(--surface); border-color: var(--foreground); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-secondary[aria-pressed='true'] { background: var(--personal-bg); border-color: var(--personal); color: var(--personal); }
.btn-quiet { background: transparent; color: var(--link); padding-inline: var(--s-3); text-decoration: underline; text-underline-offset: 3px; }
.btn-quiet:hover { background: var(--surface-2); }
.btn-chip { min-height: 44px; padding: 8px 16px; background: var(--surface); border-color: var(--border); font-weight: 600; }
.btn-chip[aria-pressed='true'] { background: var(--foreground); color: var(--primary-foreground); border-color: var(--foreground); }
.btn-chip[aria-pressed='true']::before { content: '✓'; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; margin-top: var(--s-5); }
.actions.stack { flex-direction: column; align-items: stretch; }

/* — Мітки статусу ——————————————————————————————————— */
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--r-pill); font-size: var(--t-small); font-weight: 650; line-height: 1.6; white-space: nowrap; vertical-align: middle; margin-inline: 0 6px; }
.tag-fact { color: var(--fact); background: var(--fact-bg); }
.tag-assume { color: var(--assume); background: var(--assume-bg); }
.tag-unknown { color: var(--unknown); background: var(--unknown-bg); }
.tag-unknown::before { content: '…'; }
.tag-personal { color: var(--personal); background: var(--personal-bg); margin-inline: 8px 0; }
.priority-mark { display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; margin-inline-start: 0.4rem; border-radius: 50%; color: var(--personal); background: var(--personal-bg); font-size: 0.78em; line-height: 1; vertical-align: 0.08em; }
.priority-legend { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 var(--s-3); color: var(--muted-foreground); font-size: var(--t-small); }
.tag-neutral { color: var(--muted-foreground); background: var(--surface-2); border: 1px solid var(--border); }
/* На вузьких екранах довгі мітки переносяться (14 px за шкалою не вміщаються в картку на 375 px). */
.is-narrow .tag { white-space: normal; border-radius: 12px; }

/* — Поверхні ——————————————————————————————————————— */
.card { background: var(--surface); border-radius: var(--r-card); padding: var(--s-6); box-shadow: var(--shadow); }
.card + .card { margin-top: var(--s-4); }
.accent-zone { background: var(--accent-zone); }
.accent-soft { background: var(--accent-soft); }
.notice { border-radius: var(--r-inner); padding: var(--s-4) var(--s-5); margin: var(--s-4) 0; }
.notice-info { background: var(--fact-bg); color: var(--fact); }
.notice-warn { background: var(--warn-bg); color: var(--warn); border: 1px solid #ecd2a8; }

/* — Каркас ————————————————————————————————————————— */
.brand { background: none; border: 0; font-size: var(--t-brand); font-weight: 800; letter-spacing: -0.04em; cursor: pointer; min-height: 44px; padding: 0 4px; }
.brand::after { content: ''; display: inline-block; width: 10px; height: 10px; margin-left: 4px; border-radius: 50%; background: linear-gradient(135deg, #7fd3b9, #8d94ec 55%, #ef9ab4); }

.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s-8); padding: 12px max(32px, calc((100vw - 1360px) / 2)); background: rgb(255 255 255 / 0.86); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.topbar > .settings { margin-left: auto; }
.topnav { display: flex; gap: var(--s-2); }
.topnav .nav-item { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 18px; border-radius: var(--r-pill); border: 0; background: transparent; font-weight: 650; cursor: pointer; position: relative; }
.topnav .nav-item:hover { background: var(--surface-2); }
.topnav .nav-item[aria-current='page'] { background: var(--foreground); color: var(--primary-foreground); }

.mobilebar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 6px 16px; min-height: 56px; background: rgb(255 255 255 / 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.mobilebar > .settings { margin-left: auto; }
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px 8px 10px; border-radius: var(--r-pill); border: 0; background: var(--surface-2); font-weight: 650; cursor: pointer; text-align: left; }
.back:hover { background: #eceef3; }
.crumbs { margin-bottom: var(--s-5); }

.bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
.bottomnav .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; border: 0; background: none; font-size: var(--t-small); font-weight: 600; color: var(--muted-foreground); cursor: pointer; position: relative; }
.bottomnav .nav-item[aria-current='page'] { color: var(--foreground); }
.bottomnav .nav-item { font-size: var(--t-small); }
.bottomnav .nav-item[aria-current='page'] { font-weight: 800; }
.bottomnav .nav-item[aria-current='page']::before { content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 4px; border-radius: 0 0 4px 4px; background: var(--foreground); }
.nav-icon { display: none; }
.topnav .nav-icon { display: none; }
.nav-dot { position: absolute; top: 10px; right: calc(50% - 30px); width: 8px; height: 8px; border-radius: 50%; background: var(--personal); }
.topnav .nav-dot { top: 8px; right: 8px; }

main { outline: none; }
.is-narrow main { padding: var(--s-5) 16px 120px; }
.is-wide .layout { max-width: 1440px; margin: 0 auto; padding: var(--s-8) 40px var(--s-12); }
.is-wide .layout.with-panel { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--s-6); align-items: start; }
.panel { position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow: auto; background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); padding: var(--s-6); }
.panel .fact-card { box-shadow: none; padding: 0; }
.panel .card + .card { border-top: 1px solid var(--border); padding-top: var(--s-5); border-radius: 0; }

/* — Сторінки ——————————————————————————————————————— */
.page-head { border-radius: var(--r-card); margin-bottom: var(--s-6); }
.page-head.accent-zone, .hero { padding: var(--s-8) var(--s-6); }
.is-wide .page-head.accent-zone, .is-wide .hero { padding: var(--s-12); }
.hero { border-radius: var(--r-card); }
.hero h1 { max-width: 24ch; }
.context { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-inner); background: var(--surface); border: 1px solid var(--border); }
.context strong { font-size: var(--t-lead); }
.context span { color: var(--muted-foreground); }

.entries { display: grid; gap: var(--s-4); }
.entries-section + .save { margin-top: var(--s-4); }
.is-wide .entries { grid-template-columns: repeat(4, 1fr); }
.entry { display: flex; flex-direction: column; gap: var(--s-3); margin: 0 !important; }
.entry p { color: var(--muted-foreground); flex: 1; }
.entry .btn { align-self: flex-start; }
.entry-num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-zone); font-weight: 800; }
.resume { margin-top: var(--s-6); border: 2px solid var(--foreground); }

.search { display: grid; gap: var(--s-2); max-width: 520px; margin-bottom: var(--s-6); }
.search label, .field label, .field legend, .picker legend { font-weight: 700; }
input[type='search'], .field input, .field select { min-height: var(--tap); padding: 10px 16px; border-radius: var(--r-inner); border: 1.5px solid var(--input-border); background: var(--surface); width: 100%; }
input[aria-invalid='true'] { border-color: var(--harder); }

.country-grid { display: grid; gap: var(--s-4); }
.is-wide .country-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); align-items: start; }
.country-title-link { color:inherit; text-decoration:none; }
.country-title-link:hover { text-decoration:underline; text-underline-offset:4px; }
.country-card { display: flex; flex-direction: column; gap: var(--s-3); }
.country-grid .card { margin: 0; }
.country-card .card-actions { gap: var(--s-1) var(--s-2); }
.card-actions .btn-primary { padding-inline: 20px; }
.is-narrow .card-actions .btn-primary { padding-inline: 16px; }
.is-narrow .card-actions .btn-text { padding-inline: 8px; }
.is-narrow .card-actions .btn { font-size: var(--t-small); }
.btn-text { background: none; border-color: transparent; padding-inline: 14px; color: var(--foreground); white-space: nowrap; }
.btn-text:hover { background: var(--surface-2); }
.btn-text[aria-pressed='true'] { color: var(--personal); background: var(--personal-bg); }
.is-narrow .country-card { padding: var(--s-4); gap: var(--s-2); }
.is-narrow .country-card .letter { width: 44px; height: 44px; font-size: var(--t-lead); border-radius: 14px; }
.is-narrow .country-card .actions { padding-top: var(--s-1); gap: var(--s-2); }
.country-card .actions { margin-top: auto; padding-top: var(--s-3); }
.country-head { display: flex; gap: var(--s-4); align-items: center; }
.letter { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--accent-zone); font-size: var(--t-h3); font-weight: 800; }
.coverage { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.card-topics { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.card-topic { border-radius: var(--r-inner); background: var(--surface-2); }
.card-topic-btn {
  position: relative; display: grid; gap: 2px; width: 100%; min-height: var(--tap); padding: 10px 40px 10px var(--s-4);
  border: 1px solid transparent; border-radius: var(--r-inner); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.card-topic-btn:hover { border-color: var(--border); background: var(--surface); }
.card-topic-btn[aria-expanded='true'] { border-color: var(--foreground); background: var(--surface); }
.card-topic-title { font-size: var(--t-caption); font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground); }
.card-topic-value { font-size: var(--t-lead); font-weight: 750; letter-spacing: -0.01em; }
.card-topic.is-missing .card-topic-value { color: var(--unknown); }
.card-topic-qual { font-size: var(--t-small); color: var(--muted-foreground); }
.card-topic-limit { margin: 0 0 var(--s-3); }
.card-topic-more { position: absolute; top: 10px; right: var(--s-4); font-size: var(--t-h3); line-height: 1; font-weight: 600; }
.card-topic-panel { padding: 0 var(--s-4) var(--s-4); }
.card-topic-panel .sources { margin-top: var(--s-2); }
.card-city { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: 0 var(--s-4) 10px; }
.card-city select { min-height: 44px; padding: 0 var(--s-3); border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font: inherit; }
.card-pathways { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.card-pathways p { margin: 4px 0; }

.tray { position: sticky; bottom: 16px; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-6); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5); border-radius: var(--r-pill); background: var(--surface); box-shadow: 0 8px 32px rgb(12 13 16 / 0.14); border: 1px solid var(--border); }
.is-narrow .tray { bottom: 80px; border-radius: var(--r-card); flex-direction: column; align-items: stretch; padding: var(--s-4); }

/* Країна */
.country-layout { display: grid; gap: var(--s-6); }
.is-wide .country-layout { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
.is-wide .country-side { position: sticky; top: 96px; }
.axes { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.is-wide .axes { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
/* Відкрита панель деталей забирає ширину: бічна колонка країни переходить під основну. */
.is-wide .with-panel .country-layout { grid-template-columns: minmax(0, 1fr); }
.is-wide .with-panel .country-side { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); }
.is-wide .with-panel .country-side .card { margin: 0; }
.axis { background: var(--surface); border-radius: var(--r-inner); padding: var(--s-5); border: 1px solid var(--border); display: grid; gap: var(--s-2); align-content: start; }
.axis .tag { justify-self: start; }
.topic-list { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; }
.topic-list li + li { border-top: 1px solid var(--border); }
.topic-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 72px; padding: var(--s-4) var(--s-5); border: 0; background: none; text-align: left; cursor: pointer; }
.topic-row:hover { background: var(--surface-2); }
.topic-text { display: grid; gap: 4px; }
.topic-text strong { font-size: var(--t-lead); }
.fact-summary { color: var(--muted-foreground); }
.chev { font-size: var(--t-h3); font-weight: 700; }
.card .topic-list { box-shadow: none; border: 1px solid var(--border); margin-top: var(--s-4); }

.situation-on { border-left: 6px solid var(--personal); }
.situation-on h2, .situation-off h2 { font-size: var(--t-h3); margin-bottom: var(--s-2); }
.situation-output-country { width: 100%; padding-top: var(--s-3); border-top: 1px solid var(--border); }
.situation-output-country h3 { font-size: var(--t-h3); margin-bottom: var(--s-3); }

/* Пояснення */
.insights { display: grid; gap: var(--s-3); }
.insight { display: flex; gap: var(--s-3); align-items: flex-start; }
.insight p { margin-top: 2px; }
.insight-mark { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 800; }
.insight-helps .insight-mark { background: var(--helps-bg); color: var(--helps); }
.insight-harder .insight-mark { background: var(--harder-bg); color: var(--harder); }
.insight-check .insight-mark { background: var(--assume-bg); color: var(--assume); }
.insight-unknown .insight-mark { background: var(--unknown-bg); color: var(--unknown); }
.insight-helps .insight-kind { color: var(--helps); }
.insight-harder .insight-kind { color: var(--harder); }
.insight-check .insight-kind { color: var(--assume); }
.insight-unknown .insight-kind { color: var(--unknown); }
.insight-topic { color: var(--muted-foreground); font-size: var(--t-small); }
.because { font-size: var(--t-small); color: var(--personal); font-weight: 600; }

/* Порівняння */
.picker { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.picker legend { float: left; width: 100%; margin-bottom: var(--s-3); padding: 0; }
.picker legend + * { clear: both; }
.pick { display: flex; gap: var(--s-3); align-items: center; min-height: 64px; padding: var(--s-3) var(--s-4); border-radius: var(--r-inner); border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; }
.pick span { display: grid; }
.pick.on { border-color: var(--foreground); }
.pick input { width: 22px; height: 22px; accent-color: var(--foreground); flex: none; }
.picker-wrap { margin: var(--s-2) 0 var(--s-4); }
.picker-wrap[open] { background: var(--surface); border-radius: var(--r-card); padding: var(--s-4); box-shadow: var(--shadow); }
.picker-wrap summary { min-height: 44px; width: fit-content; display: flex; align-items: center; font-weight: 700; cursor: pointer; color: var(--link); }
.picker-wrap[open] summary { margin-bottom: var(--s-4); }
.compare-selection { position: relative; z-index: 12; display: grid; gap: var(--space-1); margin-bottom: var(--space-3); }
.selection-current { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--r-inner); background: var(--surface); box-shadow: var(--card-shadow); }
.selection-summary { display: grid; gap: 2px; margin-right: auto; }
.selection-actions, .tray-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.selected-countries { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.selected-countries li { display: inline-flex; align-items: center; gap: 2px; min-height: 36px; padding: 2px 4px 2px 12px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-2); font-size: var(--t-small); font-weight: 600; }
.selected-countries button { flex: none; width: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted-foreground); font: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.selected-countries button:hover { background: var(--surface); color: var(--foreground); }
.country-picker-popover { position: absolute; z-index: 35; top: calc(100% + var(--space-1)); inset-inline: 0; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: var(--space-1); max-height: min(72dvh, 680px); min-height: 0; overflow: hidden; padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); box-shadow: 0 16px 40px rgb(12 13 16 / 0.2); }
.country-picker-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1); }
.country-picker-head label { font-weight: 700; }
.country-picker-selected { display: none; }
.country-picker-popover > p { margin: 0; }
.country-picker-popover .picker { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
.country-picker-popover .picker legend { float: none; width: auto; margin: 0; }
.country-picker-popover .pick { min-width: 0; min-height: 56px; padding: var(--space-1) var(--space-1-5); }
.country-picker-popover .pick > span { min-width: 0; overflow-wrap: anywhere; }
.country-picker-popover .pick.is-disabled { opacity: 0.55; cursor: not-allowed; }
.country-picker-popover .pick input:disabled { cursor: not-allowed; }
.tray-main, .tray-title { display: grid; gap: var(--space-1); }
.tray-main { min-width: 0; }
.tray-countries { align-items: flex-start; }
.is-wide .tray-main { display: flex; flex: 1 1 auto; align-items: center; gap: var(--space-3); }
.is-wide .tray-title { display: flex; flex: none; align-items: center; gap: var(--space-2); }
.is-wide .tray-countries { flex-wrap: nowrap; min-width: 0; }
.is-wide .tray-actions { flex: none; flex-wrap: nowrap; }
.tray .selected-countries li { background: var(--surface-2); }
.tray .selected-countries button { width: 28px; min-height: 28px; }
.is-narrow .selection-current { align-items: stretch; }
.is-narrow .selection-summary { flex-basis: 100%; }
.is-narrow .selection-actions { width: 100%; }
.is-narrow .selection-actions .btn { flex: 1; }
.is-narrow .tray-main { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-1); }
.is-narrow .tray-title { display: flex; flex: none; align-items: center; gap: var(--space-1); }
.is-narrow .tray-title-label { display: none; }
.is-narrow .tray-title strong, .is-narrow .tray-title .small { white-space: nowrap; }
.is-narrow .tray-countries { width: auto; flex: 1 1 0; min-width: 0; align-items: center; gap: 2px var(--space-0-5); }
.is-narrow .tray .selected-countries li { min-height: 32px; padding-inline-start: 8px; white-space: nowrap; }
.is-narrow .tray .selected-countries button { width: 26px; min-height: 26px; }
.is-narrow .country-picker-popover { position: fixed; inset-inline: var(--space-2); top: calc(var(--bar-h) + var(--space-2)); bottom: calc(64px + env(safe-area-inset-bottom) + var(--space-2)); max-height: none; padding: var(--space-1-5); }
.is-narrow .country-picker-popover .picker { grid-template-columns: minmax(0, 1fr); }
.is-narrow .country-picker-selected { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1); }
.is-narrow .country-picker-selected .selected-countries { flex: 1 1 auto; }
.is-narrow .country-picker-selected .btn { flex: none; }
.is-narrow .tray-actions { justify-content: flex-end; }
.summary h2 { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.summary ul { display: grid; gap: var(--s-2); margin-bottom: var(--s-3); padding-left: 1.1em; list-style: disc; }

.compare-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.with-panel .compare-grid { grid-template-columns: 260px minmax(0, 1fr); }
.rail { display: grid; gap: var(--s-4); position: sticky; top: 88px; }
.rail .card { padding: var(--s-5); margin: 0; }
.rail > .picker { background: var(--surface); padding: var(--s-5); border-radius: var(--r-card); box-shadow: var(--shadow); }
.compare-main { display: grid; gap: var(--s-4); min-width: 0; }
.compare-main .card { margin: 0; }
.table-wrap { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow); overflow-x: auto; }
.compare-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.compare-table th, .compare-table td { text-align: left; vertical-align: top; padding: var(--s-4); border-bottom: 1px solid var(--border); }
.compare-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; padding-top: var(--s-5); }
.compare-table thead th:first-child { border-top-left-radius: var(--r-card); }
.col-name { display: block; font-size: var(--t-h3); font-weight: 750; letter-spacing: -0.02em; }
.row-head { width: 200px; font-weight: 700; }
.row-head .muted { display: block; font-weight: 400; margin-top: 2px; }
.compare-table tr.group th { background: var(--surface-2); font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); padding-block: var(--s-2); }
.compare-table td p { margin-top: 6px; }
.compare-table td.selected { background: var(--fact-bg); }
.cell { display: grid; gap: 6px; width: 100%; min-height: 44px; padding: var(--s-2); margin: calc(-1 * var(--s-2)); border: 0; border-radius: 12px; background: none; text-align: left; cursor: pointer; }
.cell:hover { background: var(--surface-2); }
.cell .fact-summary { color: var(--foreground); }
.cell-more { color: var(--link); font-size: var(--t-small); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.seq { display: grid; gap: var(--s-4); margin: var(--s-4) 0; }
.seq .card { margin: 0; }
.seq h2 { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.seq-block + .seq-block { margin-top: var(--s-4); }
.seq-block h3 { font-size: var(--t-body); margin-bottom: var(--s-2); }
.seq-rows { display: grid; gap: 0; }
.seq-rows li { display: grid; gap: 2px; padding: var(--s-3) 0; border-top: 1px solid var(--border); }
.seq-rows li:first-child { border-top: 0; }
.seq-rows .tag { justify-self: start; }
.more { margin-top: var(--s-2); padding-inline: 0; }

.sim-cta h2 { margin-bottom: var(--s-2); }
.sim-cta p { margin-bottom: var(--s-4); }
.sim-cta .eyebrow { margin-bottom: var(--s-2); }
.save p { margin: var(--s-2) 0 var(--s-3); }

/* Деталі */
.detail-head { position: relative; margin-bottom: var(--s-5); }
.detail-head .close { position: absolute; top: -8px; right: -8px; }
.panel .detail-head {
  position: sticky; top: calc(-1 * var(--s-6)); z-index: 2;
  margin: calc(-1 * var(--s-6)) calc(-1 * var(--s-6)) var(--s-5);
  padding: var(--s-6) 110px var(--s-2) var(--s-6);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.panel .detail-head .close { top: var(--s-4); right: var(--s-4); }
.panel .detail-head h2 { font-size: var(--t-h2); }
.detail .fact-card h3 { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.fact-rows { margin: 0; display: grid; gap: var(--s-4); font-size: var(--t-body); line-height: var(--lh-prose); }
.fact-rows dt { font-weight: 700; margin-bottom: 4px; }
.fact-rows dd { margin: 0; max-width: var(--measure-prose); }
.source { background: var(--surface-2); border-radius: var(--r-inner); padding: var(--s-4); }
.unknown-box { display: grid; gap: var(--s-2); }
.unknown-box .tag { justify-self: start; }
.personal-box { margin-top: var(--s-5); padding: var(--s-4); border-radius: var(--r-inner); background: var(--personal-bg); }
.personal-box h4 { margin-bottom: var(--s-3); color: var(--personal); }
.detail > .btn { margin-top: var(--s-5); }

/* Форма ситуації */
.form-card { display: grid; gap: var(--s-6); }
.field { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.field legend { margin-bottom: var(--s-2); padding: 0; }
.hint { font-size: var(--t-small); color: var(--muted-foreground); }
.error { font-size: var(--t-small); color: var(--harder); font-weight: 600; }
.segmented { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.segmented label { position: relative; display: inline-flex; align-items: center; min-height: 48px; min-width: 48px; justify-content: center; padding: 8px 18px; border-radius: var(--r-pill); border: 1.5px solid var(--border); background: var(--surface); font-weight: 600; cursor: pointer; }
.segmented label.on { background: var(--foreground); color: var(--primary-foreground); border-color: var(--foreground); }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented label:has(input:focus-visible) { outline: 3px solid var(--ring); outline-offset: 3px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.situation > .muted { margin-top: var(--s-4); }
.is-wide .situation { max-width: 760px; }
.sticky-actions { position: sticky; bottom: 0; margin-top: var(--s-4); padding: var(--s-3) 0; background: var(--background); border-top: 1px solid var(--border); }
.is-narrow .sticky-actions { bottom: 64px; }
.is-narrow .situation { padding-bottom: var(--s-8); }

/* Симуляція */
.sim-layout { display: grid; gap: var(--s-6); }
.is-wide .sim-layout { grid-template-columns: 420px minmax(0, 1fr); align-items: start; }
.is-wide .sim-form { position: sticky; top: 96px; }
.sim-form h2, .sim-results > h2 { font-size: var(--t-h3); }
.sim-form .btn-primary { justify-self: start; }
.sim-results { display: grid; gap: var(--s-4); align-content: start; }
.sim-results .card { margin: 0; }
.is-wide .sim-results { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.is-wide .sim-results > h2, .is-wide .sim-results > .summary, .is-wide .sim-results > .explain, .is-wide .sim-results > .save, .is-wide .sim-results > .notice { grid-column: 1 / -1; }
.sim-card h3 { font-size: var(--t-h3); margin-bottom: var(--s-3); }
.sim-card ul { list-style: disc; padding-left: 1.1em; margin-top: var(--s-2); }
.big-number { white-space: nowrap; font-size: clamp(30px, 2.6vw, 38px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.sim-math { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 12px 0; padding: 12px 0; border-block: 1px solid var(--border); font-size: var(--t-small); }
.sim-math dt { color: var(--muted-foreground); }
.sim-math dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.costs { margin: var(--s-4) 0 var(--s-3); display: grid; gap: var(--s-2); }
.costs div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--s-1) var(--s-3); }
.costs dt .tag { margin-top: 2px; }
.costs dd { white-space: nowrap; text-align: right; }
.costs dt { color: var(--muted-foreground); }
.costs dd { margin: 0; font-weight: 650; }
.costs .total { border-top: 1px solid var(--border); padding-top: var(--s-2); }
.costs .total dt { color: var(--foreground); font-weight: 700; }
details summary { cursor: pointer; font-weight: 650; min-height: 44px; display: flex; align-items: center; color: var(--link); }
.months { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.months th, .months td { padding: 6px 4px; text-align: right; border-bottom: 1px solid var(--border); }
.months th:first-child { text-align: left; }
.explain p + p { margin-top: var(--s-2); }

/* Панель Tweaks — обгортка прототипу; на телефоні піднімаємо її над нижньою навігацією. */
.is-narrow .twk-panel { bottom: 76px; }


/* — Дослідження й записи ———————————————————————————————————— */
.bullets { list-style: disc; padding-left: 1.2em; display: grid; gap: var(--s-2); }
ul.card.bullets { padding-left: calc(var(--s-6) + 1.2em); }
.ext { color: var(--link); font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
.sources { display: grid; gap: var(--s-2); }
.sources li { display: grid; gap: 2px; }
.metrics { display: grid; gap: 0; }
.metric { padding: var(--s-3) 0; border-top: 1px solid var(--border); display: grid; gap: 4px; }
.metric:first-child { border-top: 0; }
.metric-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); }
.metric-label { font-weight: 650; }
.metric-data { position: relative; min-width: 0; }
.metric-value { font-size: var(--t-lead); font-weight: 750; overflow-wrap: anywhere; }
.metric-data .metric-value { display: flex; align-items: center; min-height: 44px; padding-right: 52px; }
.metric-research_required .metric-value { color: var(--unknown); font-weight: 600; font-size: var(--t-body); }
.metric details summary, .pathway details summary, .sim-parts details summary { min-height: 36px; font-size: var(--t-small); }
.metric-source-toggle {
  position: absolute; top: 0; right: 0; display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0; color: var(--link); cursor: pointer;
  border: 1px solid var(--border); border-radius: 50%; background: var(--surface);
}
.metric-source-toggle:hover, .metric-source-toggle[aria-expanded='true'] { background: var(--fact-bg); border-color: var(--fact); }
.source-tooltip {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 5;
  width: max-content; max-width: min(240px, 80vw); padding: 6px 10px;
  border-radius: 8px; background: var(--foreground); color: var(--surface);
  font-size: var(--t-small); font-weight: 500; line-height: 1.4; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none;
}
.metric-source-toggle:hover:not([aria-expanded='true']) .source-tooltip,
.metric-source-toggle:focus:not([aria-expanded='true']) .source-tooltip { opacity: 1; visibility: visible; }
.metric-source-popover {
  position: fixed; inset: auto; margin: 0; width: min(360px, calc(100vw - 24px));
  max-height: min(50dvh, 360px); overflow-y: auto;
  padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-inner);
  background: var(--surface); color: var(--foreground); box-shadow: 0 12px 40px rgb(12 13 16 / 0.18);
}
.source-popover-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.source-popover-head strong { font-size: var(--t-body); }
.source-popover-head button {
  flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: var(--surface-2); font-size: var(--t-h2); line-height: 1; cursor: pointer;
}
.source-popover-head button:hover { background: var(--fact-bg); }
.metric-source-popover .fact-rows { gap: var(--s-3); }
.fact-rows.compact { gap: var(--s-2); }
.pathways, .exp-list { display: grid; gap: var(--s-3); margin-top: var(--s-3); }
.pathways .card, .exp-list .card { margin: 0; box-shadow: none; border: 1px solid var(--border); padding: var(--s-5); }
.pathway h4 { font-size: var(--t-lead); }
.experience { display: grid; gap: var(--s-2); }
.experience .tagline { margin: 0; }
.gaps { display: grid; gap: var(--s-3); }
.gaps li { display: grid; gap: 2px; padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); }
.gaps li:last-child { border-bottom: 0; padding-bottom: 0; }
.gap-q { font-weight: 600; }
.answer { display: grid; gap: var(--s-2); padding-bottom: var(--s-3); border-bottom: 1px solid var(--border); }
.answer-summary { margin: 0; }
.answer-estimate { margin: 0; }
.answer-links { overflow-wrap: anywhere; }
.key-values { display: grid; gap: 4px; }
.search-links { margin-top: var(--s-4); }
.search-links .chips a { text-decoration: none; color: inherit; }
.sim-countries { display: grid; gap: var(--s-4); margin-top: var(--s-4); }
.is-wide .sim-countries { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; }
.sim-card { display: grid; gap: var(--s-4); margin: 0 !important; }
.sim-card h2 { font-size: var(--t-h3); }
.sim-parts { display: grid; gap: var(--s-3); }
.sim-parts li { display: grid; gap: 4px; padding-top: var(--s-3); border-top: 1px solid var(--border); }
.override { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
.override input { min-height: 44px; padding: 6px 12px; border-radius: 12px; border: 1.5px solid var(--input-border); width: 100%; }
.sim-result { padding-top: var(--s-3); border-top: 2px solid var(--foreground); }
.simulation > .card, .simulation > form > .card { margin-top: var(--s-4); }
.cell .small { color: var(--muted-foreground); }


.setting .btn-chip { min-width: 64px; }

.tag-action { cursor: pointer; border: 1.5px dashed var(--unknown); font: inherit; font-size: var(--t-small); font-weight: 650; min-height: 32px; padding: 2px 12px; }
.tag-action:hover { background: #f8e2c4; }
.tag-action:disabled { cursor: progress; opacity: 0.7; }
.find { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: 100%; }
.find-status { text-align: right; color: var(--muted-foreground); }
.find-refresh { min-height: 32px; padding: 2px 8px; font-size: var(--t-small); }
.admin-actions { display: inline-flex; flex-wrap: wrap; gap: 2px 4px; justify-content: flex-end; }
.admin-btn { min-height: 32px; padding: 2px 8px; font-size: var(--t-small); }
.manual-dialog { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border: 0; border-radius: var(--r-card); padding: var(--s-6); box-shadow: 0 20px 60px rgb(12 13 16 / 0.3); }
.manual-dialog::backdrop { background: rgb(12 13 16 / 0.45); }
.manual-dialog form { display: grid; gap: var(--s-4); }
.manual-dialog h2 { font-size: var(--t-h2); }
.manual-row { display: grid; grid-template-columns: 1.2fr auto 1fr 1fr 0.8fr; gap: var(--s-2); align-items: end; }
.manual-row > .muted { padding-bottom: 14px; }
.source-fields { display: grid; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--r-inner); }
.source-fields legend { padding: 0 var(--s-2); }
@media (max-width: 640px) { .manual-row { grid-template-columns: 1fr 1fr; } .manual-row > .muted { display: none; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

.answer-hint { display: inline; }
.answer-hint-text { font-weight: 500; }
.card-topic-text { font-size: var(--t-body); font-weight: 500; line-height: 1.35; }

/* — Країна: огляд → розділ категорії (етап 2, V3). Лише токени. ———————————— */
.country-hero h1 { max-width: 18ch; }
.country-hero .country-cities { margin-bottom: 0; }

.country-body { display: grid; gap: var(--space-5); }
.is-wide .country-body { grid-template-columns: var(--side-nav-w) minmax(0, 760px); align-items: start; gap: var(--space-5); }
.country-body .side-nav { position: sticky; top: calc(var(--topbar-h) + var(--space-3)); }
.country-main { display: grid; gap: var(--space-6); min-width: 0; }
.is-narrow .country-main { gap: var(--space-5); }
.country-main > section > .section-title { margin: 0 0 var(--space-2); }
.country-main > section > .section-title + .muted { margin-bottom: var(--space-2); }
.country-main .axes { margin-top: var(--space-2); }
.country-main .blockers { margin-top: var(--space-2); max-width: none; }
.country-actions { margin-top: 0; }
.country-main .for-you, .country-main .situation-off, .country-main .situation-on { margin-top: var(--space-3); }
.country-main .save { margin: 0; }

/* Огляд категорій: назва — перехід у розділ; питання — переходи до картки в розділі. */
.cat-overview { max-width: none; overflow: hidden; }
.ov-group { display: grid; gap: var(--space-1); padding: var(--space-3); }
.is-narrow .ov-group { padding: var(--space-2); }
.ov-head { font-size: var(--t-h3); line-height: var(--lh-h3); }
.ov-cat { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; text-align: left; color: var(--foreground); cursor: pointer; }
.ov-cat:hover .ov-cat-title { text-decoration: underline; text-underline-offset: 4px; }
.ov-cat .count { font-size: var(--t-body); }
.ov-hint { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); color: var(--muted-foreground); font-size: var(--t-small); line-height: var(--lh-small); }
.ov-questions { display: grid; margin-top: var(--space-1); }
.ov-q { display: block; width: 100%; min-height: 44px; padding: var(--space-1) 0; border: 0; background: none; font: inherit; line-height: var(--lh-body); text-align: left; color: var(--link); cursor: pointer; text-wrap: pretty; }
.ov-q:hover { text-decoration: underline; text-underline-offset: 3px; }
.ov-questions li + li .ov-q { border-top: 1px solid var(--border); }

/* Розділ категорії */
.category-head { display: grid; gap: var(--space-1); }
.category-head h1 { font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: -0.025em; }

.context-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); font-size: var(--t-small); line-height: var(--lh-small); font-weight: 600; color: var(--muted-foreground); }
.category-page .pathways { margin-top: 0; }
.category-page .pathways .card { box-shadow: var(--card-shadow); border: 0; }

/* Картки відповідей */
.answer-stack { display: grid; gap: var(--space-2); }
.answers { display: grid; gap: var(--space-2); }
.is-narrow .answer-stack { gap: var(--space-1-5); }
html { scroll-padding-top: calc(var(--topbar-h) + var(--space-2)); } /* фокус і якорі не ховаються під липкою шапкою (WCAG 2.4.11) */
html:has(.is-narrow) { scroll-padding-top: calc(var(--bar-h) + var(--space-2)); }
.answer-card { max-width: none; scroll-margin-top: calc(var(--topbar-h) + var(--space-3)); }
.is-narrow .answer-card { scroll-margin-top: calc(var(--bar-h) + var(--space-2)); }
.answer-q { font-size: var(--t-h3); line-height: var(--lh-h3); font-weight: 700; letter-spacing: -0.015em; text-wrap: pretty; }
.answer-q:focus { outline: none; }
.answer-q:focus-visible { outline: 3px solid var(--ring); }
.answer-label { margin: 0; font-size: var(--t-small); line-height: var(--lh-small); font-weight: 650; color: var(--muted-foreground); }
.answer-content { display: grid; gap: var(--space-1); }
.answer-content .answer-summary { line-height: var(--lh-prose); }
.answer-estimate { display: grid; gap: var(--space-0-5); margin: 0; }
.answer-estimate strong { font-size: var(--t-lead); line-height: var(--lh-lead); font-weight: 750; font-variant-numeric: tabular-nums; }
.answer-condition { margin: 0; padding: var(--space-1) var(--space-1-5); border-left: 3px solid var(--border); background: var(--surface-2); font-size: var(--t-small); line-height: var(--lh-small); }
.answer-checked { margin: 0; }
.answer-details { border-top: 1px solid var(--border); padding-top: var(--space-1); }
.answer-details > summary { width: fit-content; min-height: 24px; padding: 4px 0; color: var(--link); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.answer-detail-content { display: grid; gap: var(--space-2); padding-top: var(--space-2); }
.answer-extra { display: grid; gap: var(--space-1); }
.answer-extra .bullets { padding-left: 1.25rem; list-style: disc; }
.answer-detail-content section { display: grid; gap: var(--space-1); }
.answer-detail-content p { line-height: var(--lh-prose); }
.answer-detail-content .bullets { padding-left: 1.25rem; list-style: disc; }
.answer-number { display: grid; gap: var(--space-0-5); }
.answer-number .number { font-size: var(--t-lead); line-height: var(--lh-lead); font-weight: 750; font-variant-numeric: tabular-nums; }
.answer-card .meta { font-size: var(--t-small); line-height: var(--lh-small); color: var(--muted-foreground); }
.answer-card .disclosure-body section { display: grid; gap: var(--space-1); }
.block-title { margin: 0; font-size: var(--t-caption); line-height: var(--lh-caption); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }

/* Телефон: «← Огляд · Категорія ▾» займає весь рядок */
.mobilebar.has-switcher { justify-content: flex-start; }
.category-page [data-testid^='fact-'] .surface-card { max-width: none; }
.category-page > .country-main > .btn { justify-self: start; }

/* — Там, де числа немає: «Немає даних» + перехід до повної відповіді; текст дослідження не обрізається — */
.answer-hint { display: block; }
.answer-link { display: inline; padding: 2px 0; border: 0; background: none; font: inherit; font-size: var(--t-small); line-height: var(--lh-small); text-align: left; color: var(--link); text-decoration: underline; text-underline-offset: 3px; text-wrap: pretty; cursor: pointer; }
.answer-link-kicker { font-weight: 650; }
/* Підказка в рядку показника — окремим рядком на всю ширину, а не вузькою колонкою поруч із назвою. */
.metric-head { flex-wrap: wrap; }
.metric-head .find, .metric-head > .answer-hint { flex-basis: 100%; max-width: none; align-items: flex-start; }
.metric-head .find-status { text-align: left; }

.missing { margin-top: var(--space-2); max-width: none; }
.missing-list { display: grid; }
.missing-item { display: grid; gap: var(--space-1); padding: var(--space-2) 0; }
.missing-item + .missing-item { border-top: 1px solid var(--border); }
.missing-item:last-child { padding-bottom: 0; }
.missing-label { font-weight: 650; text-wrap: pretty; }
.missing-places { font-size: var(--t-small); line-height: var(--lh-small); color: var(--muted-foreground); }
.missing-status { font-weight: 650; color: var(--foreground); }
.missing-reason { display: grid; gap: var(--space-0-5); }
.missing-item .btn-details { margin-top: var(--space-0-5); }

/* — Оцінка (розрахунок), позначка відповідності питанню, дублі — */
.derived { display: grid; gap: var(--space-1); margin-top: var(--space-1); padding: var(--space-1) var(--space-1-5); border-radius: 12px; background: var(--surface-2); }
.derived-lead { margin: 0; font-size: var(--t-small); line-height: var(--lh-small); color: var(--muted-foreground); }
.derived-list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.derived-what { margin: 0; font-weight: 650; }
.derived-tag { display: inline-block; margin-left: var(--space-0-5); padding: 0 var(--space-1); border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); font-size: var(--t-caption); line-height: var(--lh-caption); font-weight: 650; vertical-align: middle; }
.derived .btn-details { min-height: 36px; }
.derived-how { display: grid; gap: var(--space-0-5); }
.card-topic-value .derived-tag { margin-left: var(--space-1); }
.scope-note { margin: 0; padding: var(--space-1) var(--space-1-5); border-radius: 12px; background: var(--surface-2); font-size: var(--t-small); line-height: var(--lh-small); text-wrap: pretty; max-width: var(--measure-prose); }
.scope-note.is-mismatch { box-shadow: inset 3px 0 0 var(--foreground); }
.twin-note { margin-top: var(--space-0-5); }

/* — Порівняння: таблиця на всю ширину, клітинка = результат, деталі — панель поверх (рішення власника 2026-10-15) — */
.is-wide .layout.with-panel { display: block; }
.is-wide .panel-backdrop { position: fixed; z-index: 29; inset: var(--topbar-h) 0 0; padding: 0; border: 0; background: rgb(12 13 16 / 0.12); cursor: default; }
.is-wide .panel { position: fixed; z-index: 30; top: calc(var(--topbar-h) + var(--space-3)); right: max(var(--space-3), calc((100vw - 1440px) / 2 + var(--space-3))); bottom: var(--space-3); width: clamp(400px, 32vw, 480px); max-height: none; box-shadow: 0 16px 48px rgb(12 13 16 / 0.22); }

.compare-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-bottom: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--r-inner); background: var(--surface); box-shadow: var(--card-shadow); }
.toolbar-picker { position: relative; margin: 0; }
.toolbar-picker[open] { padding: 0; background: none; box-shadow: none; }
.toolbar-picker[open] > .picker { position: absolute; z-index: 35; top: calc(100% + var(--space-1)); left: 0; width: min(680px, calc(100vw - 2 * var(--space-5))); max-height: 60vh; overflow: auto; padding: var(--space-2); border-radius: var(--r-inner); background: var(--surface); box-shadow: 0 12px 32px rgb(12 13 16 / 0.18); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.toolbar-picker[open] > .picker legend { grid-column: 1 / -1; }
.toolbar-situation { display: inline-flex; align-items: center; gap: var(--space-0-5); }
.toolbar-save { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.compare-wide .summary { margin-top: var(--space-3); max-width: var(--card-max); font-size: var(--t-small); line-height: var(--lh-small); }

.compare-table th, .compare-table td { padding: var(--space-1-5) var(--space-2); }
.compare-table thead th { padding-top: var(--space-2); }
.compare-table .row-head { width: 220px; font-size: var(--t-small); line-height: var(--lh-small); }
.col-date { display: block; margin-top: 2px; }
.city-select select { min-height: 36px; margin-top: var(--space-0-5); padding: 0 var(--space-1); border: 1.5px solid var(--input-border); border-radius: 10px; background: var(--surface); font: inherit; font-size: var(--t-small); }

.kcell { display: grid; gap: 2px; align-content: start; width: 100%; min-height: 48px; margin: calc(-1 * var(--space-1)); padding: var(--space-1); border: 0; border-radius: 10px; background: none; text-align: left; font: inherit; cursor: pointer; }
.kcell:hover { background: var(--surface-2); }
.kcell[aria-pressed='true'] { background: var(--fact-bg); }
.kcell-value { font-size: var(--t-lead); line-height: var(--lh-lead); font-weight: 750; font-variant-numeric: tabular-nums; color: var(--foreground); }
.kcell.is-missing .kcell-value { font-size: var(--t-body); line-height: var(--lh-body); font-weight: 600; color: var(--muted-foreground); }
.kcell-meta { font-size: var(--t-small); line-height: var(--lh-small); color: var(--muted-foreground); }
.compare-table .cell.kcell .kcell-meta { color: var(--foreground); }
.kcell-related { display: grid; gap: 2px; padding-block: 3px; }
.kcell-related + .kcell-related { border-top: 1px solid var(--border); }

/* — Футер платформи — */
.site-footer { border-top: 1px solid var(--border); background: var(--surface-2); }
.site-footer-inner { max-width: 1440px; margin: 0 auto; padding: 48px 40px 24px; }
.site-footer-columns { display: grid; grid-template-columns: minmax(190px, 1.25fr) repeat(4, minmax(130px, 1fr)); gap: 32px; align-items: start; }
.site-footer-about { max-width: 32ch; scroll-margin-top: calc(var(--topbar-h) + var(--space-2)); }
.site-footer-about .eyebrow { margin-bottom: var(--space-1); }
.site-footer-about h2 { font-size: clamp(24px, 2.5vw, 30px); }
.site-footer-tagline { margin-top: var(--space-2); font-size: var(--t-lead); font-weight: 750; }
.site-footer-description { margin-top: var(--space-1); color: var(--muted-foreground); }
.site-footer-group h3 { margin-bottom: var(--space-2); font-size: var(--t-body); letter-spacing: 0; }
.site-footer-links, .site-footer-topic-list { display: grid; gap: var(--space-1-5); }
.site-footer-link, .site-footer-disclosure summary { color: var(--foreground); text-decoration: none; text-underline-offset: 3px; cursor: pointer; }
.site-footer-link { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0; border: 0; background: transparent; text-align: left; }
.site-footer-link:hover, .site-footer-disclosure summary:hover { text-decoration: underline; }
.site-footer-link:focus-visible, .site-footer-disclosure summary:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; border-radius: 3px; }
.site-footer-topic-list li { display: grid; gap: 2px; }
.site-footer-topic-list li span, .site-footer-future span { color: var(--muted-foreground); font-size: var(--t-small); line-height: var(--lh-small); }
.site-footer-disclosure { margin-top: var(--space-1-5); }
.site-footer-disclosure summary { width: fit-content; min-height: 32px; }
.site-footer-disclosure summary::marker { color: var(--muted-foreground); }
.site-footer-disclosure > p { max-width: 38ch; margin-top: var(--space-1); color: var(--muted-foreground); font-size: var(--t-small); line-height: var(--lh-small); }
.site-footer-future { display: grid; gap: 2px; margin-top: var(--space-1-5); }
.footer-contact-form { display: grid; gap: var(--space-2); max-width: 420px; margin-top: var(--space-2); padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--r-inner); background: var(--surface); }
.footer-contact-form .field { display: grid; gap: var(--space-0-5); }
.footer-contact-form .field label { font-size: var(--t-small); font-weight: 650; }
.footer-contact-form input, .footer-contact-form select, .footer-contact-form textarea { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid var(--input-border); border-radius: 10px; background: var(--surface); }
.footer-contact-form textarea { min-height: 104px; resize: vertical; }
.footer-contact-form .btn:disabled { opacity: 0.58; cursor: not-allowed; }
.footer-form-note { color: var(--muted-foreground); font-size: var(--t-small); line-height: var(--lh-small); }
.footer-form-feedback { min-height: 1.5em; margin: 0; color: var(--freshness-current); font-size: var(--t-small); line-height: var(--lh-small); }
.footer-form-feedback.is-error { color: var(--harder); }
.contact-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-3); margin-top: var(--space-5); padding-top: var(--space-2); border-top: 1px solid var(--border); font-size: var(--t-small); }
.site-footer-bottom p + p { color: var(--muted-foreground); }
.site-footer-notes { margin-top: var(--space-1); color: var(--muted-foreground); font-size: var(--t-small); line-height: var(--lh-small); }
.site-footer-notes { scroll-margin-bottom: calc(var(--bottomnav-h) + var(--space-3)); }
@media (max-width: 1120px) {
  .site-footer-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
  .site-footer-about { grid-column: 1 / -1; max-width: 65ch; }
}
@media (max-width: 760px) {
  .site-footer-inner { padding: 40px 24px 88px; }
  .site-footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
  .site-footer-about { grid-column: 1 / -1; scroll-margin-top: calc(var(--bar-h) + var(--space-2)); }
  .site-footer-topics { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .site-footer-inner { padding: 32px 16px 88px; }
  .site-footer-columns { grid-template-columns: 1fr; gap: var(--space-4); }
  .site-footer-about, .site-footer-topics { grid-column: auto; }
  .site-footer-bottom { align-items: flex-start; flex-direction: column; }
}

/* Деталі показника: результат → контекст → методологія */
.key-detail { display: grid; gap: var(--space-3); }
.kd-result { display: grid; gap: var(--space-0-5); justify-items: start; }
.kd-place { margin: 0; font-size: var(--t-small); line-height: var(--lh-small); font-weight: 650; color: var(--muted-foreground); }
.kd-value { margin: 0; font-size: var(--t-h2); line-height: var(--lh-h2); font-weight: 750; font-variant-numeric: tabular-nums; }
.kd-value.is-missing { font-size: var(--t-h3); line-height: var(--lh-h3); color: var(--muted-foreground); }
.kd-context { margin: var(--space-0-5) 0 0; }
.kd-more { display: grid; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border); }
.kd-others-list { display: grid; gap: var(--space-0-5); margin: var(--space-0-5) 0 0; padding: 0; list-style: none; }
.kd-category { justify-self: start; padding-inline: 0; }

/* Телефон: показник за показником, рядок країни — назва й значення */
.m-cities { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: var(--space-1) 0 var(--space-2); }
.m-city { display: inline-flex; align-items: center; gap: var(--space-1); }
.m-key-rows li { display: grid; grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr); align-items: start; gap: var(--space-1-5); }
.m-key-country { font-weight: 650; padding-top: var(--space-0-5); }

/* Текст відповіді: головне речення окремо й крупніше; решта — 16/26, повний контраст, ≤ 65 знаків у рядку. */
.answer-text { display: grid; gap: var(--space-1); color: var(--foreground); }
.answer-text p { margin: 0; }
.answer-first { font-size: var(--t-lead); line-height: var(--lh-lead); font-weight: 600; letter-spacing: -0.005em; }
.answer-rest { font-size: var(--t-body); line-height: var(--lh-prose); }
.is-narrow .answer-first { font-size: var(--t-body); line-height: var(--lh-prose); }

/* Карти «Що це означає для вас» / «Ваша ситуація врахована» / «Для вашої ситуації»: текст і кнопка не злипаються. */
.situation-off, .situation-on, .for-you { display: grid; gap: var(--space-1-5); justify-items: start; }
.situation-off > *, .situation-on > *, .for-you > * { margin: 0; }
.situation-off .btn, .situation-on .actions { margin-top: var(--space-0-5); }
.situation-on .actions { margin-top: var(--space-1); }

/* Нативні контроли — завжди світла схема й явні кольори (темний режим середовища їх не перефарбовує). */
html, body { color-scheme: light; }
input, select, textarea { color-scheme: light; background-color: var(--surface); color: var(--foreground); }
input[type='checkbox'], input[type='radio'] { accent-color: var(--foreground); background-color: var(--surface); }
input::placeholder, textarea::placeholder { color: var(--muted-foreground); opacity: 1; }

/* Списки: власна стрілка в стилі лінійних іконок системи (штрих 1.8, круглі кінці) і відступ праворуч.
   Нативна стрілка прилипала до краю й не збігалась зі стилем інших іконок. !important — бо частина селектів задає background шорткатом. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c0d10' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 18px 18px !important;
  cursor: pointer;
}
select:disabled { opacity: 0.6; cursor: not-allowed; }
.city-select select { padding-right: 34px !important; background-position: right 8px center !important; background-size: 16px 16px !important; }

/* — Телефон: таблиця порівняння — горизонтальний скрол, закріплена колонка показників, дрібніший шрифт — */
.is-narrow.app .catalog-table { width: auto; min-width: calc(112px + var(--cols) * 168px); }
.is-narrow.app .catalog-table .catalog-col-head { width: 112px; }
.is-narrow.app .catalog-table th,
.is-narrow.app .catalog-table td { padding: var(--space-1) var(--space-1-5); overflow-wrap: anywhere; }
.is-narrow.app .catalog-table td,
.is-narrow.app .catalog-table .row-head,
.is-narrow.app .catalog-table .kcell-value,
.is-narrow.app .catalog-table .kcell-meta { font-size: var(--t-small); line-height: var(--lh-small); }
.is-narrow.app .catalog-table .col-name { font-size: var(--t-body); line-height: var(--lh-body); }
.is-narrow.app .catalog-table .col-date { font-size: var(--t-small); line-height: var(--lh-small); }
.is-narrow.app .catalog-table .row-head { position: sticky; left: 0; z-index: 1; background: var(--surface); width: 112px; box-shadow: 1px 0 0 var(--border); }
.is-narrow.app .catalog-table thead th.row-head { z-index: 2; }
.is-narrow.app .catalog-table .catalog-pin,
.is-narrow.app .catalog-table .catalog-extra .btn-details { position: sticky; left: var(--space-1-5); display: inline-block; max-width: calc(100vw - 80px); text-align: left; }
.is-narrow.app .catalog-table .insights { gap: var(--space-1-5); }
.is-narrow.app .catalog-table .insight { flex-direction: column; gap: var(--space-0-5); min-width: 0; }
.is-narrow.app .catalog-table .insight > :not(.insight-mark) { min-width: 0; }
.is-narrow.app .catalog-table .insight-mark { width: 20px; height: 20px; font-size: var(--t-small); }
.is-narrow.app .catalog-table .insight p,
.is-narrow.app .catalog-table .insight .insight-kind,
.is-narrow.app .catalog-table .insight .insight-topic { font-size: var(--t-small); line-height: var(--lh-small); }
.is-narrow.app .catalog-table .insight .btn-text { white-space: normal; height: auto; min-height: 44px; padding-inline: 0; text-align: left; }

/* — Телефон: «Моя ситуація» і «Для вас» — колонка не ширша за картку, довгі підписи переносяться — */
.is-narrow.app .situation-off, .is-narrow.app .situation-on, .is-narrow.app .for-you { grid-template-columns: minmax(0, 1fr); }
.is-narrow.app .insight > div { min-width: 0; }
.is-narrow.app .insight .btn-text { white-space: normal; height: auto; min-height: 44px; padding-inline: 0; text-align: left; }

/* — Телефон: компактні кнопки (40 px), підпис не переноситься всередині кнопки — */
.is-narrow.app { --tap: 40px; }
.is-narrow.app .btn { padding: 6px 16px; white-space: nowrap; }
.is-narrow.app .btn-chip { min-height: 40px; }
.is-narrow.app .btn-quiet, .is-narrow.app .btn-text { padding-inline: var(--space-1-5); }

/* — Телефон: панель порівняння — три рівні дій: основна → друга → текстові; збереження внизу — */
.is-narrow.app .selection-actions { justify-content: space-between; }
.is-narrow.app .selection-actions .btn, .is-narrow.app .compare-toolbar .btn { font-size: var(--t-small); line-height: var(--lh-small); }
.is-narrow.app .selection-actions { justify-content: flex-start; }
.is-narrow.app .selection-actions .btn-secondary { flex: 0 1 auto; }
.is-narrow.app .selection-actions .btn-quiet { flex: none; text-decoration: none; font-weight: 650; }
.is-narrow.app .compare-toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); padding: var(--space-2); }
.is-narrow.app .compare-toolbar > .btn { width: 100%; justify-content: center; }
.is-narrow.app .compare-toolbar > .btn-quiet { justify-content: space-between; border-color: var(--border); text-decoration: none; color: var(--foreground); }
.is-narrow.app .toolbar-situation { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); }
.is-narrow.app .toolbar-situation .btn-quiet { text-decoration: none; }
.is-narrow.app .toolbar-save { margin: var(--space-0-5) 0 0; padding-top: var(--space-1); border-top: 1px solid var(--border); justify-content: space-between; }
.is-narrow.app .toolbar-save .btn-quiet { text-decoration: none; font-weight: 700; }
.is-narrow.app .selection-actions .btn-secondary { padding-inline: var(--space-1-5); }
.is-narrow.app .selection-actions .btn-quiet { padding-inline: var(--space-1); }
.is-narrow.app .segmented label { min-height: 40px; min-width: 40px; padding: 6px 14px; }

/* — Сценарій: заповнення з попередньої країни й орієнтир із таблиці — */
.sim-copy { justify-self: start; margin-bottom: var(--space-1); }
.override-row { display: flex; align-items: stretch; gap: var(--space-1); }
.override-row input { flex: 1 1 0; min-width: 0; }
.sim-ref-name { color: var(--muted-foreground); }
.sim-parts .sim-take-ref { flex: none; min-width: 140px; min-height: 40px; padding: 4px 14px; font-size: var(--t-small); white-space: nowrap; }
.sim-parts .sim-take-ref:disabled { background: transparent; border-color: transparent; color: var(--muted-foreground); cursor: default; }
.override input::placeholder { font-style: italic; color: var(--muted-foreground); opacity: 0.8; }

.analytics-consent { position: fixed; z-index: 100; inset: auto 1rem 1rem auto; width: min(30rem, calc(100vw - 2rem)); padding: 1rem 1.25rem; box-shadow: 0 10px 40px #0003; background: var(--surface); }
.analytics-consent p { margin: .3rem 0 .8rem; }
.analytics-consent-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Типографіка й ритм (затверджена шкала): 40 · 32 · 28 · 20 · 16 · 14 px. Значення токенів — у tokens.css.
   Ролі: display 40 — назва країни; h1 32 (телефон 28) — назва екрана; h2 28 (телефон 24) — розділ; h3 20 — питання й підрозділи;
   body 16 — уся змістова мова (довга — 16/26, інтерфейс і таблиці — 16/24); small 14 — службове.
   Щільність: Editorial (країна, категорія, відповіді) — просторий ритм; Workspace (порівняння, панель, симуляція) — компактний. */
/* Телефон (затверджено): Display 32 · H1 28 · H2 24 · H3 20 · body 16 · meta 14. 24 — сьомий розмір, лише для H2 на телефоні */
.is-narrow.app { --t-display: 32px; --lh-display: 40px; --t-h1: 28px; --lh-h1: 36px; --t-h2: 24px; --lh-h2: 32px; --gap-section: 32px; --gap-group: 20px; }
.app h1 { font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: -0.025em; font-weight: 750; }
.app .country-hero h1 { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: -0.03em; }
.app h2 { font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: -0.02em; }
.app h3 { font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: -0.01em; }
.app h4 { font-size: var(--t-body); line-height: var(--lh-body); letter-spacing: 0; }
/* Заголовки блоків усередині карток (було 24/20 різного вигляду) — один рівень h3 */
.app .situation-on h2, .app .situation-off h2, .app .summary h2,
.app .sim-cta h2, .app .seq h2, .app .for-you h2, .app .for-you h3 { font-size: var(--t-title); line-height: var(--lh-title); margin-bottom: 0; }
.app .resume h2 { font-size: var(--t-title); line-height: var(--lh-title); }
.app .panel .detail-head h2 { font-size: var(--t-h2); line-height: var(--lh-h2); }
.app .small-title { font-size: var(--t-title); line-height: var(--lh-title); }

/* Службовий рівень: 14 без верхнього регістру й розрядки (уникаємо «кричущих» міток); вага тримає ієрархію */
.app .eyebrow, .app .block-title, .app .setting-title, .app .toc-title {
  font-size: var(--t-small); line-height: var(--lh-small); font-weight: 650; letter-spacing: 0; text-transform: none; color: var(--muted-foreground);
}
.app .compare-table tr.group th { font-size: var(--t-small); line-height: var(--lh-small); letter-spacing: 0; text-transform: none; }
.app .lead { max-width: var(--measure-prose); color: var(--foreground); margin-top: var(--space-1-5); }
.app .small, .app .meta, .app .muted.small { font-size: var(--t-small); line-height: var(--lh-small); }

/* Довге читання: 16/26, ≤ 65ch; решта (рядки, картки, таблиці) використовує ширину контейнера */
.app .answer-first { font-size: var(--t-body); line-height: var(--lh-prose); font-weight: 650; letter-spacing: 0; }
.app .answer-rest, .app .answer-text { line-height: var(--lh-prose); }
.app .fact-rows { line-height: var(--lh-prose); }
.app .fact-rows.compact, .app .metric-source-popover .fact-rows { line-height: var(--lh-body); }
.app .surface-card, .app .surface-list, .app .answer-card { max-width: none; }
.app .prose { max-width: var(--measure-prose); }
.is-wide.app .country-body { grid-template-columns: var(--side-nav-w) minmax(0, 960px); }
.app .answer-q { font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: -0.01em; font-weight: 700; }
.app .answer-number .number { font-size: var(--t-title); line-height: var(--lh-title); }

/* Таблиця порівняння: 16/24, значення — напівжирне 16 (не окремий «великий» розмір); мітки — 14 */
.app .compare-table, .app .compare-table td, .app .compare-table th { line-height: var(--lh-body); }
.app .compare-table .row-head { font-size: var(--t-body); width: 240px; }
.app .compare-table .col-name { font-size: var(--t-title); line-height: var(--lh-title); letter-spacing: -0.01em; }
.app .kcell-value { font-size: var(--t-body); line-height: var(--lh-body); font-weight: 750; }
.app .kcell.is-missing .kcell-value { font-weight: 500; }
.app .kcell-meta { font-size: var(--t-small); line-height: var(--lh-small); }
.app .metric-value { font-size: var(--t-body); line-height: var(--lh-body); font-weight: 750; }
.app .kd-value { font-size: var(--t-h2); line-height: var(--lh-h2); }
.app .kd-value.is-missing { font-size: var(--t-title); line-height: var(--lh-title); }

/* Вертикальний ритм: заголовок → зміст ближче, розділи — далі */
.app .section-title { margin: 0 0 var(--gap-title); }
.app .entries-section > .section-title { margin: var(--gap-section) 0 var(--gap-group); }
.app .country-main, .app .key-detail { gap: var(--gap-section); }
.app .country-main > section { display: grid; gap: var(--gap-title); align-content: start; }
.app .country-main > section > .section-title { margin: 0; }
.app .country-main > section > .section-title + .muted { margin: 0; }
.app .country-main .axes, .app .country-main .blockers { margin-top: 0; }
.app .answer-stack { gap: var(--space-2); }
.app .answer-card { gap: var(--space-1-5); padding: var(--space-3); }
.is-narrow.app .answer-card { padding: var(--space-2); }
.app .category-head { gap: var(--space-1); }
.app .page-head { margin-bottom: var(--gap-group); }
.app .kd-more { gap: var(--gap-group); padding-top: var(--gap-group); }
.app .key-detail { gap: var(--gap-group); }
.app .compare-wide .summary { max-width: none; font-size: var(--t-small); }
.app .compare-wide .summary li + li { margin-top: var(--space-0-5); }

/* У grid-секціях кнопки не розтягуються на всю ширину */
.app .country-main > section .btn, .app .country-main > .save .btn, .app .save .btn { justify-self: start; }
.app .country-main > .save { display: grid; gap: var(--space-1-5); justify-items: start; }

/* Щільність. Editorial (країна, категорія, відповіді): токени ритму з tokens.css (12 / 24 / 40, телефон 20 / 32).
   Workspace (порівняння, права панель, симуляція): компактніше, шрифти ті самі — щільність не за рахунок розміру тексту. */
[data-density='workspace'] { --gap-title: 8px; --gap-group: 16px; --gap-section: 24px; }
.panel[data-density='workspace'] .detail-body, .compare[data-density='workspace'] .compare-toolbar { gap: var(--gap-group); }

/* Назва країни в картці каталогу на телефоні — рівень «назва картки» (20/28), не H2 розділу (24/32):
   три картки теми мають вміщатися у видиму висоту екрана (сценарій S12). */
.is-narrow.app .country-card h2 { font-size: var(--t-title); line-height: var(--lh-title); }

.experience-page { min-width: 0; }
.exp-search-bar { display:grid; grid-template-columns:minmax(220px,1fr) minmax(170px,220px) minmax(190px,260px) auto; align-items:end; gap:12px; margin:24px 0 16px; }
.exp-quick-filters { display:contents; }
.exp-search-bar .field { min-width:0; margin:0; }
.exp-search-bar input,.exp-search-bar .select-trigger { height:48px; width:100%; }
.exp-search { min-width:0; }
.exp-search input { background: var(--surface); }
.exp-filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.exp-filters .field { min-width: 0; }
.exp-filters .select-trigger, .exp-search-bar .select-trigger, .exp-sort .select-trigger { width: 100%; min-height: 44px; border: 1.5px solid var(--input-border); border-radius: var(--r-inner); background-color: var(--surface); padding: 8px 32px 8px 12px; }
.exp-filter-trigger { display:inline-flex; height:48px; min-height:48px; white-space:nowrap; }
.exp-categories { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-3) 0; }
.exp-chip, .exp-tag { border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface); padding: 8px 14px; min-height: 44px; font-size: var(--t-small); line-height: var(--lh-small); font-weight: 600; cursor: pointer; text-decoration: none; color: var(--foreground); display: inline-flex; align-items: center; gap: var(--space-1); max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.exp-chip:hover, .exp-tag:hover { border-color: var(--foreground); background: var(--surface-2); }
.exp-chip.is-selected { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.exp-chip span { opacity: 0.8; }
.exp-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.exp-results-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1-5) var(--space-3); margin: 0 0 var(--space-3); }
.exp-results-toolbar > p { font-weight: 650; }
.exp-sort { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; font-size: var(--t-small); }
.exp-sort .select-trigger { width: auto; max-width: 100%; }
.exp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); align-items: stretch; }
.exp-grid .people-card { margin: 0; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1-5); min-width: 0; }
.app .people-card h2, .app .exp-empty h2 { font-size: var(--t-title); line-height: var(--lh-title); }
.people-card .eyebrow { margin: 0; }
.people-summary { color: var(--muted-foreground); line-height: var(--lh-prose); }
.people-facts { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.people-facts li { background: var(--accent-soft); border-radius: var(--r-inner); padding: 8px 12px; font-size: var(--t-small); line-height: var(--lh-small); font-weight: 650; overflow-wrap: anywhere; }
.people-source { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); border-top: 1px solid var(--border); padding-top: var(--space-2); margin-top: auto; }
.people-byline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--t-small); }
.people-byline > span { color: var(--muted-foreground); }
.people-byline a { font-weight: 650; color: var(--link); overflow-wrap: anywhere; }
.people-age { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; color: var(--muted-foreground); }
.people-age-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--muted-foreground); flex: none; }
.people-age.is-recent .people-age-dot { background: var(--freshness-current); }
.people-age.is-aging .people-age-dot { background: var(--warn); }
.people-age.is-outdated .people-age-dot { background: var(--harder); }
.app .people-watch { min-height: 44px; margin-top: var(--space-1); font-size: var(--t-small); white-space: normal; }
.people-watch span { margin-left: var(--space-1); }
.experience-page mark { background: var(--warn-bg); color: var(--foreground); border-radius: 2px; box-shadow: inset 0 -2px var(--warn); }
.exp-more { display: flex; flex-direction: column; align-items: center; gap: var(--space-1-5); margin: var(--space-4) 0; }
.exp-method, .exp-disclaimer { max-width: var(--measure-prose); margin-top: var(--space-3); }
.exp-disclaimer { font-size: var(--t-small); line-height: var(--lh-small); color: var(--muted-foreground); margin-top: 0; }
.exp-empty { display: grid; gap: var(--space-2); justify-items: start; }
.exp-loading { min-height: 120px; }
.exp-search-status { margin-bottom: var(--space-2); }
.exp-search-status:empty { display: none; }
.people-transcript { border-left: 3px solid var(--border); padding-left: var(--space-2); display: grid; gap: var(--space-1); overflow-wrap: anywhere; }
.people-transcript > a { color: var(--link); min-height: 44px; display: inline-flex; align-items: center; }
.exp-filter-dialog { color: var(--foreground); background: var(--surface); border: 0; border-radius: var(--r-card) var(--r-card) 0 0; width: 100%; max-width: 100%; max-height: 90dvh; margin: auto 0 0; padding: var(--space-3) var(--space-2) max(var(--space-2), env(safe-area-inset-bottom)); }
.exp-filter-dialog::backdrop { background: rgb(12 13 16 / 0.4); }
.exp-filter-dialog .exp-filters { grid-template-columns: minmax(0, 1fr); }
.exp-dialog-head, .exp-dialog-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-3); }
.exp-dialog-head h2 { font-size: var(--t-title); line-height: var(--lh-title); }
.exp-dialog-actions { position: sticky; bottom: calc(-1 * var(--space-2)); background: var(--surface); padding: var(--space-2) 0; margin: var(--space-2) 0 0; }
.app .exp-dialog-head .btn, .app .exp-dialog-actions .btn { min-height: 44px; }
@media (max-width: 1023px) { .exp-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .exp-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .exp-grid .people-card { padding: var(--space-3); }
  .exp-desktop-filters { display: none; }
  .exp-filter-trigger { display: inline-flex; min-height: 44px; }
  .exp-search-bar { align-items: flex-end; }
  .exp-search input { min-width: 0; }
  .exp-categories { flex-wrap: nowrap; overflow-x: auto; padding: var(--space-2) 2px; margin: 0 -2px var(--space-2); }
  .exp-categories .exp-chip { flex: none; white-space: nowrap; }
  .exp-sort { margin-left: 0; flex-wrap: wrap; }
  .exp-results-toolbar { gap: var(--space-1-5); }
  .exp-results-toolbar > p { width: 100%; }
}

.people-card h2 a { color:var(--foreground); text-decoration:none; }
.people-card h2 a:hover { text-decoration:underline; text-underline-offset:4px; }

@media(min-width:768px) {
  .exp-filter-dialog { width:min(640px,calc(100% - 48px)); max-width:640px; margin:auto; border-radius:var(--r-card); padding:24px; }
  .exp-filter-dialog .exp-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(min-width:768px) and (max-width:1099px) {
  .exp-search-bar { grid-template-columns:minmax(180px,1fr) minmax(150px,1fr) auto; }
  .exp-search { grid-column:1/-1; }
}
@media(max-width:767px) {
  .exp-search-bar { grid-template-columns:minmax(0,1fr) auto; gap:8px; margin-top:16px; }
  .exp-quick-filters { display:none; }
}