/* Раздел «Страны»: витрина, глобус, страница страны.

   --shell живёт в landing-v2/css/tokens.css, а страницы платформы его не
   грузят: на них var(--shell) разворачивался в пустоту, и поверхности кнопок,
   строки поиска и полок пропадали во всех восьми темах. Та же находка, что
   уже описана в themes.css про --core. Выводим из --ink, который есть в
   каждой теме. */
:root{--shell:color-mix(in oklab, var(--ink) 5%, transparent);--gold-text:var(--gold)}
html:is([data-theme="white"],[data-theme="sage"],[data-theme="cream"],[data-theme="sky"],[data-theme="lavender"]){
  --shell:color-mix(in oklab, var(--ink) 3.5%, transparent);
  /* Золото на светлой теме это текст на белом, и в этой роли `--gold` не
     дотягивает: 3.43 на белом при норме 4.5. Мелким шрифтом надпись идёт
     глубоким золотом, а подложка под ней слабеет с 12 до 6 процентов, иначе
     та же надпись на тинте снова падает до 4.27. Числа посчитаны по всем
     пяти светлым темам, худшее после правки 4.56. */
  --gold-text:var(--gold-deep);
  --gold-soft:color-mix(in oklab, var(--gold) 6%, transparent);
}

/* Страны: сетка карточек с живыми фото и страница страны. */
.co{min-height:100vh;background:var(--bg-1,#101511);padding:clamp(18px,3.6vw,40px) clamp(14px,4.5vw,52px) 90px;font-family:var(--font-t);color:var(--ink)}
.co-top{display:flex;gap:16px;align-items:flex-start;max-width:1180px;margin:0 auto 20px}
.co-top h1{font-family:var(--font-d);font-size:clamp(1.5rem,3.4vw,2.25rem);font-weight:600;margin:0 0 6px}
.co-line{max-width:56ch;color:var(--ink-dim);font-size:.9375rem;line-height:1.55;margin:0}
.co-back{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;color:var(--ink-dim);background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line);transition:color .3s var(--ease)}
.co-back:hover{color:var(--ink)}
.co-back:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.co-back svg{width:18px;height:18px}
.co-note{max-width:1180px;margin:26px auto 0;color:var(--ink-dim);font-size:.8125rem;line-height:1.5}

/* ── файл 04: строка поиска на оба режима ── */
.co-search-wrap{position:relative;z-index:5;max-width:1180px;margin:0 auto 16px}
.co-search-wrap input{width:min(420px,100%);min-height:46px;padding:0 18px;border:0;border-radius:99px;font-family:var(--font-t);font-size:.9375rem;color:var(--ink);background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line);outline:none;transition:box-shadow .25s var(--ease)}
.co-search-wrap input:focus-visible{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 45%,transparent)}
.co-search-wrap input::placeholder{color:var(--ink-dim)}
.co-sug{position:absolute;left:0;top:calc(100% + 6px);width:min(420px,100%);display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:16px;background:var(--core);box-shadow:inset 0 0 0 1px var(--shell-line),0 24px 50px -20px rgba(0,0,0,.55)}
.co-sug[hidden]{display:none}
.co-sug-none{margin:6px 10px 4px;color:var(--ink-dim);font-size:.8125rem}
.co-opt{display:flex;gap:8px;align-items:baseline;min-height:40px;padding:6px 12px;border:0;border-radius:10px;cursor:pointer;text-align:left;font-family:var(--font-t);color:var(--ink);background:transparent}
.co-opt b{font-family:var(--font-d);font-size:.9375rem;font-weight:600}
.co-opt-en{color:var(--gold-text);font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.co-opt-soon{margin-left:auto;color:var(--ink-dim);font-size:.6875rem;font-weight:700}
.co-opt:hover,.co-opt.active{background:var(--gold-soft,color-mix(in oklab,var(--gold) 12%,transparent))}
.co-opt:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.co-empty{max-width:1180px;margin:0 auto 14px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--ink-dim);font-size:.875rem}
.co-empty[hidden]{display:none}
.co-near{min-height:36px;padding:0 14px;border:0;border-radius:99px;cursor:pointer;font-family:var(--font-t);font-size:.8125rem;font-weight:700;color:var(--gold-text);background:var(--gold-soft,color-mix(in oklab,var(--gold) 12%,transparent));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 30%,transparent);transition:transform .2s var(--ease)}
.co-near:hover{transform:translateY(-1px)}
.co-near:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* сетка стран */
.co-grid{max-width:1180px;margin:0 auto;display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.co-card{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:210px;border-radius:20px;text-decoration:none;color:var(--ink);background:var(--core);box-shadow:inset 0 0 0 1px var(--shell-line);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.co-card:not(.off):hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 40%,transparent),0 20px 44px -24px color-mix(in oklab,var(--gold) 45%,transparent)}
.co-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.co-card.off{cursor:pointer;opacity:.85}
/* тап по «собирается» не тупик: срок и «напомнить» прямо в карточке */
.co-soon-box{position:relative;display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:0 16px 14px;background:color-mix(in oklab,var(--bg-1,#101511) 78%,transparent)}
.co-soon-line{color:var(--ink-dim);font-size:.8125rem;line-height:1.5}
.co-remind{min-height:38px;padding:0 14px;border:0;border-radius:99px;cursor:pointer;font-family:var(--font-t);font-size:.8125rem;font-weight:700;color:var(--gold-text);background:var(--gold-soft,color-mix(in oklab,var(--gold) 12%,transparent));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 30%,transparent)}
.co-remind:disabled{color:var(--mint);background:color-mix(in oklab,var(--mint) 10%,transparent);cursor:default}
.co-remind:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.co-photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.55;transition:opacity .5s var(--ease),transform .9s var(--ease)}
.co-card:not(.off):hover .co-photo{opacity:.7;transform:scale(1.04)}
.co-card.off .co-photo{opacity:.25;filter:grayscale(.5)}
.co-body{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px;margin-top:auto;background:linear-gradient(180deg,transparent 0%,color-mix(in oklab,var(--bg-1,#101511) 78%,transparent) 60%)}
.co-body b{font-family:var(--font-d);font-size:1.125rem;font-weight:600}
.co-en{color:var(--gold);font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.co-card-line{color:var(--ink-dim);font-size:.8281rem;line-height:1.45}
.co-status{margin-top:6px;align-self:flex-start;font-size:.6875rem;font-weight:700;padding:4px 9px;border-radius:99px;color:var(--mint);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--mint) 35%,transparent)}
.co-card.off .co-status{color:var(--gold);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 30%,transparent)}
@media (prefers-reduced-motion:no-preference){
  .co-grid .co-card{animation:co-in .34s var(--ease) backwards;animation-delay:calc(var(--i)*.03s)}
  @keyframes co-in{from{opacity:0;transform:translateY(10px)}}
}

/* ── второй режим: глобус ── */
.co-tabs{margin-left:auto;flex:none;display:flex;gap:4px;padding:4px;border-radius:99px;background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line)}
.co-tab{min-height:36px;padding:0 16px;border:0;border-radius:99px;cursor:pointer;font-family:var(--font-t);font-size:.8125rem;font-weight:700;color:var(--ink-dim);background:transparent;transition:color .25s var(--ease),background .25s var(--ease)}
.co-tab[aria-pressed="true"]{color:var(--ink);background:var(--core);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 35%,transparent)}
.co-tab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (max-width:700px){.co-top{flex-wrap:wrap}.co-tabs{margin-left:58px}}

.co-globe{position:relative;max-width:1180px;margin:0 auto;height:min(72vh,640px);border-radius:24px;overflow:hidden;background:radial-gradient(120% 140% at 50% 0%,color-mix(in oklab,var(--core) 70%,transparent),var(--bg-1,#101511) 70%);box-shadow:inset 0 0 0 1px var(--shell-line)}
@media (max-width:700px){.co-globe{height:52vh;min-height:340px}}
.gl-poster{position:absolute;inset:0;display:grid;place-items:center;transition:opacity .6s var(--ease)}
.gl-poster::before{content:"";width:min(72%,58vh);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 30%,color-mix(in oklab,var(--gold) 9%,var(--core)),var(--bg-1,#101511) 72%);box-shadow:0 0 60px -18px color-mix(in oklab,var(--gold) 30%,transparent),inset 0 0 0 1px var(--shell-line)}
.co-globe.live .gl-poster{opacity:0;pointer-events:none}
/* медленная сеть: глобус доехал фоном и встаёт не рывком, а проявлением */
.co-globe.soft{animation:co-soft .5s var(--ease)}
@keyframes co-soft{from{opacity:0}to{opacity:1}}
.co-warm{margin:0 auto 14px;max-width:1180px;color:var(--ink-dim)}
@media (prefers-reduced-motion:reduce){.co-globe.soft{animation:none}.gl-poster{transition:none}}
.gl-mount{position:absolute;inset:0}
.gl-svg{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.gl-svg:active{cursor:grabbing}
.gl-sea{fill:color-mix(in oklab,var(--core) 55%,var(--bg-1,#101511));stroke:color-mix(in oklab,var(--gold) 22%,transparent);stroke-width:1}
.gl-grat{fill:none;stroke:var(--shell-line);stroke-width:.5;opacity:.5}
.gl-land{fill:color-mix(in oklab,var(--ink) 13%,var(--core));stroke:color-mix(in oklab,var(--ink) 22%,transparent);stroke-width:.6}
.gl-dot{cursor:pointer;outline:none}
.gl-hit{fill:transparent}
/* Огонёк страны: золото платформы плюс кольцо два пикселя цветом --ink
   (светлое на тёмных темах, тёмное на светлых). Кольцо рисуется обводкой,
   заливка ложится поверх (paint-order), поэтому ядро точки остаётся девять
   пикселей, а видимый маркер вырастает до тринадцати. Страна, которая ещё
   собирается, держит примесь --ink-dim: это единственный признак, отличающий
   её от готовой, и он остаётся. */
.gl-pt{fill:color-mix(in oklab,var(--gold) 72%,var(--ink-dim));stroke:var(--ink);stroke-width:4;paint-order:stroke;transition:fill .3s var(--ease)}
.gl-glow{fill:color-mix(in oklab,var(--gold) 22%,transparent);opacity:0;transition:opacity .3s var(--ease)}
.gl-dot.on .gl-pt{fill:var(--gold)}
.gl-dot.on .gl-glow{opacity:.55}
.gl-dot:hover .gl-glow,.gl-dot:focus-visible .gl-glow{opacity:.9}
.gl-dot.bloom .gl-glow{opacity:1}
.gl-dot.bloom .gl-pt{fill:color-mix(in oklab,var(--gold) 80%,#fff)}
@media (prefers-reduced-motion:no-preference){.gl-dot.bloom .gl-glow{animation:gl-bloom .7s var(--ease)}}
@keyframes gl-bloom{from{transform:scale(.4)}60%{transform:scale(1.5)}to{transform:scale(1)}}
.gl-tip{font-family:var(--font-t);font-size:12px;font-weight:700;fill:var(--ink);text-anchor:middle;opacity:0;pointer-events:none;transition:opacity .25s var(--ease);paint-order:stroke;stroke:var(--bg-1,#101511);stroke-width:3px}
.gl-dot:hover .gl-tip,.gl-dot:focus-visible .gl-tip{opacity:1}
.gl-dot:focus-visible .gl-pt{stroke:var(--gold);stroke-width:4}

.gl-card{position:absolute;left:50%;bottom:14px;transform:translate(-50%,16px);width:min(340px,calc(100% - 24px));max-height:calc(100% - 28px);display:flex;flex-direction:column;border-radius:18px;overflow:hidden auto;background:var(--core);box-shadow:inset 0 0 0 1px var(--shell-line),0 24px 50px -20px rgba(0,0,0,.6);opacity:0;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.gl-card.up{opacity:1;transform:translate(-50%,0)}
.gl-photo{position:relative;height:110px;background-size:cover;background-position:center}
.gl-photo video{width:100%;height:100%;object-fit:cover;display:block}
.gl-credit{position:absolute;left:0;right:0;bottom:0;padding:14px 10px 5px;font-size:.5625rem;color:rgba(255,255,255,.72);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.6));text-align:right}
.gl-credit a{color:inherit}
.gl-photo .cm-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;border:0;border-radius:99px;cursor:pointer;
  padding:8px 14px;min-height:36px;font-family:var(--font-t);font-size:.75rem;font-weight:700;color:var(--bg-0);background:var(--gold)}
.gl-card-body{display:flex;flex-direction:column;gap:4px;padding:14px 16px 16px}
.gl-card-body b{font-family:var(--font-d);font-size:1.0625rem;font-weight:600}
.gl-card .gl-en{color:var(--gold);font-size:.6875rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.gl-card .gl-line{color:var(--ink-dim);font-size:.8125rem;line-height:1.45}
.gl-go{margin-top:10px;align-self:flex-start;min-height:40px;display:inline-flex;align-items:center;padding:0 20px;border-radius:99px;text-decoration:none;font-size:.875rem;font-weight:700;color:var(--bg-1,#101511);background:var(--gold);transition:transform .2s var(--ease)}
.gl-go:hover{transform:translateY(-1px)}
.gl-go:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gl-wait{align-self:flex-start;font-size:.6875rem;font-weight:700;padding:4px 9px;border-radius:99px;color:var(--gold);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 30%,transparent)}
/* файл 04: мини-полка видео в карточке глобуса */
.gl-shelf{display:flex;flex-direction:column;gap:8px;margin-top:10px;color:var(--ink-dim);font-size:.8125rem}
.gl-v{display:flex;gap:10px;align-items:center;border-radius:12px;overflow:hidden;text-decoration:none;color:var(--ink);background:var(--shell);box-shadow:inset 0 0 0 1px var(--shell-line);transition:transform .2s var(--ease)}
.gl-v:hover{transform:translateY(-1px)}
.gl-v:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gl-v-th{flex:none;width:86px;height:52px;background-size:cover;background-position:center}
.gl-v-b{display:flex;flex-direction:column;gap:2px;padding:6px 10px 6px 0;min-width:0}
.gl-v-b b{font-size:.8125rem;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gl-v-b span{color:var(--ink-dim);font-size:.6875rem}
/* страна «собирается» в карточке глобуса: срок и «напомнить» */
.gl-soon{display:flex;flex-direction:column;gap:8px;align-items:flex-start;margin-top:10px}
.gl-soon-when{color:var(--ink-dim);font-size:.8125rem;line-height:1.5}
.gl-remind{min-height:38px;padding:0 14px;border:0;border-radius:99px;cursor:pointer;font-family:var(--font-t);font-size:.8125rem;font-weight:700;color:var(--gold);background:var(--gold-soft,color-mix(in oklab,var(--gold) 12%,transparent));box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 30%,transparent)}
.gl-remind:disabled{color:var(--mint);background:color-mix(in oklab,var(--mint) 10%,transparent);cursor:default}
.gl-remind:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gl-close{position:absolute;right:8px;top:8px;z-index:1;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:12px;cursor:pointer;color:#fff;background:rgba(8,10,9,.5);transition:background .25s var(--ease)}
.gl-close:hover{background:rgba(8,10,9,.75)}
.gl-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.gl-close svg{width:15px;height:15px}

/* страница страны */
.co-hero{position:relative;max-width:1180px;margin:0 auto 24px;border-radius:24px;overflow:hidden;min-height:240px;display:flex;align-items:flex-end;background-image:linear-gradient(180deg,rgba(8,10,9,.15),rgba(8,10,9,.75)),var(--photo);background-size:cover;background-position:center}
.co-hero .co-back{position:absolute;left:14px;top:14px;background:rgba(8,10,9,.5);color:#fff}
.co-hero-body{padding:22px}
.co-hero-body h1{font-family:var(--font-d);font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:600;margin:0 0 8px;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.6)}
.co-hero-body p{max-width:64ch;color:#e8e4da;font-size:.9375rem;line-height:1.55;margin:0;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.co-main{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:30px}
.co-h2{font-family:var(--font-d);font-size:1.25rem;font-weight:600;margin:0 0 8px}
.co-sub{color:var(--ink-dim);font-size:.875rem;margin:0 0 14px;max-width:60ch}

.co-videos{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.co-video{display:flex;gap:12px;border-radius:18px;overflow:hidden;text-decoration:none;color:var(--ink);background:var(--core);box-shadow:inset 0 0 0 1px var(--shell-line);transition:transform .35s var(--ease)}
.co-video:hover{transform:translateY(-2px)}
.co-video:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cv-thumb{flex:none;width:150px;background-size:cover;background-position:center}
.cv-body{display:flex;flex-direction:column;gap:4px;padding:12px 14px 12px 0}
.cv-body b{font-family:var(--font-d);font-size:.9375rem;font-weight:600}
.cv-body span{color:var(--ink-dim);font-size:.8125rem;line-height:1.45}
.cv-ch{margin-top:auto;font-size:.6875rem}

.co-phrases{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.co-phrase{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:16px;background:var(--core);box-shadow:inset 0 0 0 1px var(--shell-line)}
.cp-topic{align-self:flex-start;font-size:.6563rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-text)}
.co-phrase b{font-size:1.0313rem;line-height:1.4}
.cp-ru{color:var(--ink-dim);font-size:.875rem}
/* прозрачность здесь стоила читаемости: .8 поверх --ink-dim давала 3.64 на
   светлой теме. Тускнеть строка умеет и одним --ink-dim, худшее по восьми
   темам 5.02 */
.cp-tr{color:var(--ink-dim);font-size:.8125rem;font-style:italic}
.cp-btns{display:flex;gap:8px;margin-top:8px}
.cp-btns button{min-height:38px;padding:0 13px;border:0;border-radius:99px;cursor:pointer;font-family:var(--font-t);font-size:.8125rem;font-weight:700;color:var(--gold-text);background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 30%,transparent);transition:transform .2s var(--ease)}
.cp-btns button:hover{transform:translateY(-1px)}
.cp-btns button:disabled{color:var(--mint);background:color-mix(in oklab,var(--mint) 10%,transparent);cursor:default;transform:none}
.cp-btns button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.co-test{max-width:560px}
.co-q-n{color:var(--ink-dim);font-size:.75rem;margin:0 0 6px}
.co-q-t{font-size:1.0313rem;line-height:1.5;margin:0 0 12px}
.co-review{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));margin:14px 0}
.co-flip{min-height:76px;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;padding:12px;border:0;border-radius:16px;cursor:pointer;font-family:var(--font-t);font-size:.9375rem;color:var(--ink);background:var(--gold-soft);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--gold) 30%,transparent);transition:transform .25s var(--ease)}
.co-flip:hover{transform:translateY(-2px)}
.co-flip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.co-flip.open{background:var(--core);box-shadow:inset 0 0 0 1px var(--shell-line);cursor:default;transform:none}
.co-flip b{font-size:1rem}

/* ── добор 15.08: честная строка про английский и вопрос к ролику ── */
.co-hero-en{margin-top:8px;font-size:.875rem;opacity:.9}
.cv-wrap{display:flex;flex-direction:column;gap:8px}
.cv-intent{margin-top:0}
.cv-intent>summary{font-size:.8125rem}
.cv-q{margin:0;font-size:.9375rem;line-height:1.5}
.cv-why{margin:0;color:var(--ink-dim);font-size:.8125rem;line-height:1.55}
