/* Набор обзорника (kit): общие блоки + три подачи (.y-face-a табло, -b редакция, -c каталог). Цвета и шрифт — переменные
   --k-* из kit/tokens.html (свои у каждой витрины). Всегда светлая. Подключать ПОСЛЕ стилей темы. */
body{background:#fff;color:var(--y-ink);font-family:var(--y-font);font-size:16px;line-height:1.55;font-variant-numeric:tabular-nums}
.y-home,.y-art-wrap{max-width:1240px;width:100%;margin-left:auto;margin-right:auto;padding-top:22px;font-size:16px;line-height:1.55}.y-art-wrap{padding-top:18px}
.y-home h2{font-size:21px;font-weight:700;margin:0;letter-spacing:-.01em;color:var(--y-ink)}
.y-home a,.y-art a{color:var(--y-acc)}
/* первый экран */
.y-intro{display:grid;grid-template-columns:1fr 1.1fr;gap:24px;align-items:start;margin-bottom:18px}
.y-intro h1{font-size:34px;line-height:1.15;font-weight:700;letter-spacing:-.02em;margin:0 0 8px;color:var(--y-ink)}
.y-intro .byline,.y-art .byline{font-size:14px;color:var(--y-mut);margin:0}
.y-intro .lede,.y-art .lede{margin:0;background:var(--y-card);border:1px solid var(--y-line);border-radius:var(--y-r);padding:14px 16px;font-size:15.5px}
.y-intro .lede:before,.y-art .lede:before{content:"Short answer";display:inline-block;background:var(--y-acc);color:#fff;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:6px;padding:2px 8px;margin-right:8px}
/* общие куски */
.y-ch{display:flex;align-items:center;gap:10px}.y-ch b{font-size:17px}.y-ch b a{color:var(--y-ink);text-decoration:none}.y-ch b a:hover{color:var(--y-acc)}
.y-ch small{display:block;color:var(--y-mut);font-size:13px}
.y-lg{width:40px;height:40px;border-radius:10px;border:1px solid var(--y-line);object-fit:contain;background:#fff;padding:3px;flex:none}
.y-val{display:flex;align-items:baseline;gap:8px}.y-val b{font-size:26px;font-weight:700;letter-spacing:-.02em}.y-val s{color:var(--y-mut)}.y-val span{font-size:13px;color:var(--y-mut)}
.y-out{display:block;text-align:center;font-size:14px;font-weight:700;border:1.5px solid var(--y-acc);color:var(--y-acc)!important;border-radius:10px;padding:7px 10px;text-decoration:none;transition:.15s;white-space:nowrap}
.y-out:hover{background:var(--y-acc);color:#fff!important}
.y-badge{align-self:flex-start;font-size:13px;font-weight:700;border-radius:7px;padding:3px 8px;background:var(--y-okbg);color:var(--y-ok)}.y-badge.tag{background:var(--y-tag);color:var(--y-acc)}
.y-line{font-size:14px;margin:0}.y-note{font-size:14px;font-weight:600;color:var(--y-ok)}.y-note.no{color:var(--y-mut);font-weight:400}
.y-c[hidden]{display:none!important}.y-c{scroll-margin-top:90px}
/* выбор */
.y-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:26px}
.y-pick{background:var(--y-card);border:1px solid var(--y-line);border-top:4px solid var(--y-acc);border-radius:var(--y-r);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.y-pick p{margin:0;font-size:14.5px;flex:1}
.y-axis{align-self:flex-start;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--y-acc);background:var(--y-tag);border-radius:6px;padding:3px 8px}
/* фильтры */
.y-bar,.y-bh{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-bottom:12px}
.y-chips{display:flex;gap:8px;flex-wrap:wrap}
.y-chips label{display:flex;align-items:center;gap:6px;font-size:14px;border:1px solid var(--y-line);background:#fff;border-radius:99px;padding:5px 12px;cursor:pointer;margin:0}
.y-chips label:has(input:checked){border-color:var(--y-acc);background:var(--y-tag);color:var(--y-acc)}
.y-chips input{accent-color:var(--y-acc);margin:0}.y-chips em{font-style:normal;font-weight:600}.y-chips span{color:var(--y-mut);font-size:13px}
.y-count{margin-left:auto;font-size:14px;color:var(--y-mut)}.y-count b{color:var(--y-ink)}
/* C · каталог */
.y-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.y-cards>.y-c{flex:0 0 calc((100% - 28px)/3);min-width:0;background:var(--y-card);border:1px solid var(--y-line);border-radius:var(--y-r);padding:14px;display:flex;flex-direction:column;gap:8px;transition:.15s}
.y-cards>.y-c:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px color-mix(in srgb,var(--y-acc) 45%,transparent);border-color:color-mix(in srgb,var(--y-acc) 30%,var(--y-line))}
.y-cards>.y-c.hot{border-color:color-mix(in srgb,var(--y-ok) 35%,white)}.y-cards .y-line{flex:1}
/* A · табло */
.y-board{background:var(--y-card);border:1px solid var(--y-line);border-radius:var(--y-r);overflow:hidden}
.y-board .y-bh{padding:14px 16px;margin:0;border-bottom:1px solid var(--y-line)}
.y-tbl{width:100%;border-collapse:collapse}
.y-tbl th{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--y-mut);text-align:left;padding:10px 14px;background:color-mix(in srgb,var(--y-bg) 60%,white);border-bottom:1px solid var(--y-line)}
.y-tbl td{padding:12px 14px;border-bottom:1px solid var(--y-line);vertical-align:middle}.y-tbl tr:last-child td{border-bottom:0}
.y-tbl tr.hot td{background:color-mix(in srgb,var(--y-okbg) 35%,white)}
.y-tbl .y-lg{width:32px;height:32px;border-radius:8px}.y-tbl .num{font-size:16px;white-space:nowrap}.y-tbl .num b{font-size:17px}
.y-barv{display:flex;align-items:center;gap:8px}.y-barv i{display:block;height:8px;min-width:4px;border-radius:4px;background:var(--y-acc)}.y-barv b{font-size:14px;color:var(--y-acc)}
.y-tbl .o{text-align:right}.y-tbl .y-line{color:var(--y-ink)}
/* B · редакция */
.y-face-b .y-picks{gap:0;border:1px solid var(--y-ink);border-radius:0}
.y-face-b .y-pick{border:0;border-left:1px solid var(--y-line);border-radius:0;background:var(--y-card)}.y-face-b .y-pick:first-child{border-left:0}
.y-face-b .y-axis{background:var(--y-ink);color:#fff;border-radius:0}
.y-face-b .y-out{display:inline-block;align-self:flex-start;border:0;border-bottom:2px solid var(--y-acc);border-radius:0;padding:0 0 1px}.y-face-b .y-out:hover{background:none;color:var(--y-acc-d)!important}
.y-face-b .y-list>.y-bar{border-bottom:2px solid var(--y-ink);padding-bottom:10px}
.y-rows .y-it{display:grid;grid-template-columns:240px minmax(0,1fr) 110px 120px;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid var(--y-line)}
.y-rows .y-line{font-size:15px}.y-rows .y-note{display:block;font-size:13px;margin-top:2px}.y-rows .y-val{justify-content:flex-end;flex-direction:column;align-items:flex-end;gap:0}.y-rows .y-val b{font-size:21px}.y-rows .y-val s{font-size:13px}
.y-more{text-align:right;font-size:14px;font-weight:700;text-decoration:none;white-space:nowrap}
/* бесплатные, как проверяем, FAQ */
.y-free{margin:26px 0 0;background:var(--y-card);border:1px solid var(--y-line);border-radius:var(--y-r);padding:16px}
.y-free ul{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.y-free li{display:flex;gap:10px;align-items:flex-start}.y-free li img{border-radius:7px;flex:none}.y-free b{display:block}.y-free span{font-size:14px;color:var(--y-mut)}
.y-row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:16px 0 30px}
.y-panel{background:var(--y-card);border:1px solid var(--y-line);border-radius:var(--y-r);padding:16px}.y-panel h2{margin-bottom:10px}
.y-panel p{margin:0 0 10px}.y-panel figure{margin:0}.y-panel img{max-width:100%;max-height:620px;width:auto;border-radius:8px;border:1px solid var(--y-line);display:block}
.y-panel figcaption{font-size:13px;color:var(--y-mut);margin-top:6px}
.y-q{padding:10px 0;border-top:1px solid var(--y-line)}.y-q:first-of-type{border-top:0;padding-top:0}.y-q h3{font-size:16px;font-weight:700;margin:0 0 4px}.y-q p{margin:0;font-size:15px}
.y-face-b .y-free,.y-face-b .y-panel{border-radius:0;border:0;border-top:3px solid var(--y-ink)}
/* шапки блоков: line (по умолчанию), bar (полоса акцента слева у заголовков) */
.y-home.y-head-bar h2{border-left:4px solid var(--y-acc);padding-left:10px}
/* статья */
.y-crumbs{font-size:14px;color:var(--y-mut);margin-bottom:14px}.y-crumbs a{color:var(--y-mut)}.y-crumbs span{margin:0 4px}
.y-art-grid{display:grid;grid-template-columns:minmax(0,1100px) 230px;gap:40px}.y-art{min-width:0}
.y-kicker{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--y-acc);margin:0 0 8px}
.y-art h1{font-size:36px;line-height:1.15;font-weight:700;letter-spacing:-.02em;margin:0 0 8px;color:var(--y-ink)}.y-art .byline{margin-bottom:16px}
.y-art h2{font-size:24px;font-weight:700;letter-spacing:-.01em;margin:40px 0 12px;color:var(--y-ink)}.y-art section{scroll-margin-top:90px}
.y-prose{font-size:16.5px;line-height:1.65}.y-prose p{margin:0 0 14px}.y-prose ul,.y-prose ol{padding-left:1.3rem;margin:0 0 14px}.y-prose li+li{margin-top:5px}
.y-prose a{color:var(--y-ink);text-decoration:underline;text-decoration-color:var(--y-acc);text-underline-offset:2px}.y-prose strong{color:var(--y-ink)}
.y-tbl-wrap{margin-top:24px}.y-axis-line{font-size:14px;font-weight:600;color:var(--y-mut);margin:0 0 8px}
.y-cards-tbl{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--y-line);border-radius:var(--y-r);overflow:hidden;font-size:15px}
.y-cards-tbl th{background:var(--y-tag);color:var(--y-acc);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:10px 14px}
.y-cards-tbl td{padding:11px 14px;border-top:1px solid var(--y-line);vertical-align:top}.y-cards-tbl td.name{font-weight:700}
.y-art figure{margin:18px 0 0}.y-zoom{display:inline-block;max-width:100%;border:1px solid var(--y-line);border-radius:12px;overflow:hidden;background:#fff}.y-zoom img{max-width:100%;max-height:620px;width:auto;display:block}
.y-art figcaption{font-size:14px;color:var(--y-mut);margin-top:6px}
.y-faq{background:#fff;border:1px solid var(--y-line);border-radius:var(--y-r);padding:6px 18px}.y-faq .y-q:first-child{padding-top:10px}
.y-toc{position:sticky;top:90px;align-self:start;font-size:14px}.y-toc p{font-weight:700;margin:0 0 8px}
.y-toc ul{list-style:none;margin:0;padding:0 0 0 14px;border-left:2px solid var(--y-line)}.y-toc li{margin:0 0 8px}.y-toc a{color:var(--y-mut);text-decoration:none}.y-toc a:hover{color:var(--y-acc)}
#zoom-ylg{border:0;padding:0;background:transparent;max-width:min(1400px,94vw);overflow:visible}#zoom-ylg::backdrop{background:rgb(15 17 20/.78);backdrop-filter:blur(2px)}
#zoom-ylg .zw{position:relative}#zoom-ylg img{max-width:100%;max-height:88vh;border-radius:10px;box-shadow:0 20px 50px rgba(0,0,0,.4);display:block}
#zoom-ylg button{position:absolute;top:-16px;right:-16px;width:38px;height:38px;border-radius:50%;border:0;background:#fff;color:#111;display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.3);cursor:pointer}
#zoom-ylg button:focus{outline:none}#zoom-ylg button:focus-visible{outline:2px solid var(--y-acc);outline-offset:2px}
/* адаптив */
@media(max-width:1200px){.y-cards>.y-c{flex-basis:calc((100% - 14px)/2)}.y-free ul{grid-template-columns:repeat(2,minmax(0,1fr))}
 .y-art-grid{grid-template-columns:minmax(0,1fr)}.y-toc{display:none}.y-rows .y-it{grid-template-columns:200px minmax(0,1fr) 100px}.y-rows .y-more{grid-column:3;text-align:right}}
@media(max-width:900px){.y-intro,.y-row2{grid-template-columns:minmax(0,1fr)}.y-intro h1{font-size:26px}
 .y-picks{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;gap:12px;margin:0 -16px 22px;padding:0 16px 4px}
 .y-face-b .y-picks{border:0;margin:0 -16px 22px}.y-face-b .y-pick{border:1px solid var(--y-ink)!important}
 .y-pick{flex:0 0 78%;scroll-snap-align:start}
 .y-chips{flex-wrap:nowrap;overflow-x:auto;width:100%}.y-chips label{flex:none;white-space:nowrap}.y-count{margin-left:0}
 .y-free ul{grid-template-columns:minmax(0,1fr)}.y-cards>.y-c{flex-basis:100%}
 .y-cards>.y-c{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:12px}
 .y-cards>.y-c>.y-ch{grid-column:1}.y-cards>.y-c>.y-val{grid-column:2;grid-row:1;flex-direction:column;align-items:flex-end;gap:0}
 .y-cards>.y-c>.y-val b{font-size:22px}.y-cards>.y-c>.y-badge,.y-cards>.y-c>.y-line,.y-cards>.y-c>.y-note,.y-cards>.y-c>.y-out{grid-column:1/-1}.y-cards>.y-c>.y-badge{justify-self:start}
 .y-cards .y-lg{width:34px;height:34px}.y-cards .y-ch b{font-size:16px}
 .y-tbl thead{display:none}.y-tbl,.y-tbl tbody,.y-tbl tr,.y-tbl td{display:block}.y-tbl tr{padding:10px 0;border-bottom:1px solid var(--y-line)}.y-tbl td{border:0;padding:4px 16px}
 .y-tbl td[data-l]{display:flex;gap:10px}.y-tbl td[data-l]:before{content:attr(data-l);flex:0 0 100px;font-size:12px;font-weight:700;text-transform:uppercase;color:var(--y-mut);padding-top:2px}
 .y-tbl td.dup{display:none}.y-tbl .o{text-align:left;padding-top:8px}.y-board .y-bh{flex-direction:column;align-items:flex-start;gap:8px}
 .y-rows .y-it{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}.y-rows .y-line{grid-column:1/-1;grid-row:2}.y-rows .y-val{grid-column:2;grid-row:1}.y-rows .y-more{grid-column:1/-1;text-align:left}}
@media(max-width:767px){.y-art h1{font-size:27px}
 .y-cards-tbl,.y-cards-tbl tbody,.y-cards-tbl tr,.y-cards-tbl td{display:block}.y-cards-tbl{border:0;background:transparent}
 .y-cards-tbl thead{display:none}.y-cards-tbl tr{background:#fff;border:1px solid var(--y-line);border-radius:12px;margin-bottom:10px;padding:6px 0}
 .y-cards-tbl td{border:0;padding:5px 14px}.y-cards-tbl td:before{content:attr(data-label);display:block;font-size:12px;font-weight:700;text-transform:uppercase;color:var(--y-mut)}
 .y-cards-tbl td.rank{display:none}.y-cards-tbl td.name{font-size:17px}.y-cards-tbl td.name:before{content:none}
 .y-cards-tbl td.name[data-rank]:before{content:'#' attr(data-rank) ' ';display:inline;color:var(--y-acc);font-size:17px;text-transform:none}
 #zoom-ylg button{top:-48px;right:0}}
/* ── раскладка A: плитки-цифры справа от заголовка ── */
.y-intro-a{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start;margin-bottom:22px}
.y-intro-a h1{font-size:36px;line-height:1.12;font-weight:700;letter-spacing:-.02em;margin:0 0 14px;color:var(--y-ink)}
.y-intro-a .lede{margin:0 0 10px;padding:0 0 0 14px;border-left:4px solid var(--y-acc);font-size:16.5px}
.y-intro-a .lede:before{content:"Short answer";display:block;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--y-acc);margin-bottom:2px}
.y-intro-a .byline{font-size:14px;color:var(--y-mut);margin:0}
.y-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.y-tile{background:var(--y-card);border:1px solid var(--y-line);border-radius:var(--y-r);padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.y-tile.wide{grid-column:1/-1}
.y-tile .k{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--y-mut)}
.y-tile .v{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--y-ink)}.y-tile .v s{font-size:16px;font-weight:500;color:var(--y-mut)}
.y-tile .s{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--y-mut)}.y-tile img{border-radius:4px}
.y-fchips{display:flex;flex-wrap:wrap;gap:8px}.y-fchips span{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;background:var(--y-okbg);color:var(--y-ok);border-radius:99px;padding:3px 10px 3px 4px}
/* ── раскладка B: редакция с правой колонкой ── */
.y-intro-b{border-bottom:3px double var(--y-ink);padding-bottom:18px;margin-bottom:22px}
.y-kick{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--y-acc);margin:0 0 6px}
.y-intro-b h1{font-size:42px;line-height:1.08;font-weight:700;letter-spacing:-.025em;margin:0 0 10px;color:var(--y-ink);max-width:900px}
.y-intro-b .byline{font-size:14px;color:var(--y-mut);margin:0 0 14px}
.y-intro-b .lede{margin:0;max-width:880px;font-size:19px;line-height:1.5;padding-left:18px;border-left:3px solid var(--y-acc)}
.y-cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
.y-main>section+section{margin-top:30px}.y-face-b .y-main .y-panel{margin-top:30px}
.y-aside{position:sticky;top:20px;display:flex;flex-direction:column;gap:18px}
.y-aside .y-free{margin:0}.y-aside .y-free ul{grid-template-columns:minmax(0,1fr)}
.y-face-b .y-picks{margin-bottom:0}
/* ── формы карточек витрины ── */
.y-cards-shadow .y-pick,.y-cards-shadow .y-cards>.y-c,.y-cards-shadow .y-tile,.y-cards-shadow .y-panel,.y-cards-shadow .y-free,.y-cards-shadow .y-board{border-color:transparent;box-shadow:0 1px 2px rgba(16,24,40,.06),0 6px 18px -8px rgba(16,24,40,.18)}
.y-cards-flat .y-pick,.y-cards-flat .y-cards>.y-c,.y-cards-flat .y-tile,.y-cards-flat .y-panel,.y-cards-flat .y-free,.y-cards-flat .y-board{border:0;background:color-mix(in srgb,var(--y-tag) 55%,white)}
/* ── заголовки блоков ── */
.y-home.y-head-caps h2{font-size:14px;text-transform:uppercase;letter-spacing:.09em;color:var(--y-acc)}
.y-home.y-head-rule h2{padding-bottom:8px;border-bottom:2px solid var(--y-ink)}
@media(max-width:900px){.y-intro-a,.y-cols{grid-template-columns:minmax(0,1fr)}.y-intro-a h1{font-size:27px}.y-intro-b h1{font-size:29px}.y-intro-b .lede{font-size:17px}
 .y-aside{position:static}
 .y-tiles{grid-template-columns:minmax(0,1fr);gap:8px}.y-tile:not(.wide){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;padding:10px 14px}
 .y-tile:not(.wide) .k{grid-column:1}.y-tile:not(.wide) .s{grid-column:1}.y-tile:not(.wide) .v{grid-column:2;grid-row:1/span 2;align-self:center;font-size:24px}}
/* устойчивость к стилям тем (Clarity центрирует картинки и текст) */
.y-home,.y-art-wrap{text-align:left}.y-home img,.y-art-wrap img{margin:0;max-width:100%}
.y-ch>div{flex:1;min-width:0}.y-free li>div{flex:1;min-width:0}
.y-rows .y-val span{font-size:13px;color:var(--y-mut);text-align:right}
/* широкие экраны: сетки растут, текстовые блоки держат длину строки */
.y-home p,.y-home .lede{max-width:78ch}.y-intro .lede{max-width:none}
.y-home .y-line,.y-home .y-q p{color:color-mix(in srgb,var(--y-ink) 82%,white)}
/* Широкий экран (Safari на MacBook — 1470–1728px): не растягиваем вёрстку, а пропорционально увеличиваем её,
   как она выглядит в окне ~1100px. Колонка по центру, по краям ровные поля одного цвета (Даня 30.10: «растянуто»). */
@media(min-width:1380px){.y-home,.y-art-wrap{zoom:1.08}}
@media(min-width:1650px){.y-home,.y-art-wrap{zoom:1.14}}
/* статьи на главной */
.y-guides{margin:28px 0 0}
.y-gcards{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}.y-gcards>.y-g{flex:0 0 calc((100% - 28px)/3);min-width:0}
.y-g{display:flex;flex-direction:column;gap:6px;background:var(--y-card);border:1px solid var(--y-line);border-radius:var(--y-r);padding:16px;text-decoration:none!important;color:var(--y-ink)!important;transition:.15s}
.y-g:hover{border-color:var(--y-acc);transform:translateY(-2px)}
.y-g b{font-size:18px;line-height:1.3}.y-g p{margin:0;font-size:14.5px;color:color-mix(in srgb,var(--y-ink) 80%,white);flex:1}
.y-g .y-kick{margin:0;font-size:12px}.y-g .y-more{color:var(--y-acc);font-weight:700;font-size:14px;text-align:left}
@media(max-width:900px){.y-gcards>.y-g{flex-basis:100%}}
/* окно увеличения — всегда по центру экрана и целиком в нём, что бы ни задавала тема для <dialog> */
#zoom-ylg[open]{position:fixed!important;inset:0!important;margin:auto!important;width:fit-content!important;height:fit-content!important;max-width:94vw!important;max-height:92vh!important;padding:0!important;transform:none!important;zoom:1!important}
#zoom-ylg img{max-width:94vw!important;max-height:86vh!important;width:auto!important;height:auto!important;margin:0!important}