/* ══════════════════════════════════════════════════════════════════════
   Сомелье на компьютере — слой раскладки от 768 px. Задание и макеты —
   артефакт «Сомелье на компьютере» (26 сентября 2026).

   Кладётся ПОСЛЕ theme.css и действует только в новом виде: каждое правило
   начинается с html[data-skin="v5"] и лежит внутри @media (min-width:768px)
   или шире — это проверяет tests/test_desk.py. Телефон (до 768 px) и прежний
   вид файл не трогает: у прежнего вида на компьютере остаётся рамка телефона.

   Точки перелома:
     768–1023  — рейка 76 px слева, одна колонка до 680 px по центру;
     1024–1279 — рейка; список и панель вина рядом, главная в две колонки;
     от 1280   — меню 240 px с подписями и списками.
   Кегли не меняются: ширина идёт на то, чтобы видеть больше сразу.
   Цвета — только токены theme.css: тёмная тема приходит сама.
   ══════════════════════════════════════════════════════════════════════ */

@media (min-width:768px){
  /* ── Каркас: рамки телефона нет, меню слева, экран справа ──────────── */
  html[data-skin="v5"]{--nav-w:76px;--col:680px;--list-w:420px}
  html[data-skin="v5"] .stage{padding:0;background:var(--bg);align-items:stretch}
  /* Устройство — строка: экран в потоке и панель вина стоят рядом. Меню
     фиксировано слева; transform у .device делает его опорой, как было */
  html[data-skin="v5"] .device{max-width:none;width:100%;height:100dvh;max-height:none;border:0;border-radius:0;
    box-shadow:none;--safe-t:0px;flex-direction:row;padding-left:var(--nav-w)}
  html[data-skin="v5"] .device:has(> .tabs[hidden]){padding-left:0}
  html[data-skin="v5"] .notch{display:none}
  html[data-skin="v5"] .device .safe-t,
  html[data-skin="v5"] .device .safe-b{height:0}
  /* Экран — опора для своих всплывающих меню (.popmenu): иначе при открытой
     панели меню «Этот скан» вставало бы у правого края окна, над вином */
  html[data-skin="v5"] .screen{min-width:0;position:relative}
  /* Смонтированный соседний экран (.warm) — вне потока, как и был: в строке
     он занял бы место рядом с текущим */
  html[data-skin="v5"] .screen.top,
  html[data-skin="v5"] .screen.under,
  html[data-skin="v5"] .screen.warm{position:absolute;left:var(--nav-w)}
  html[data-skin="v5"] .dim{left:var(--nav-w)}
  html[data-skin="v5"] .screen.root .scrolla{padding-bottom:40px}
  /* Марка «Сомелье» живёт в меню; у «Моего вкуса» в мачте остаются значки */
  html[data-skin="v5"] .scrolla .mast > img,
  html[data-skin="v5"] .scrolla .mast > span{display:none}
  html[data-skin="v5"] .scrolla > .mast:not(:has(button)){display:none}
  /* Своё у телефона и у компьютера: .m-only — только телефону, .deskonly —
     только компьютеру (на телефоне и в прежнем виде его прячет app.css, здесь
     у него свой display от компонента) */
  html[data-skin="v5"] .m-only{display:none!important}
  html[data-skin="v5"] .a2hs{left:calc(var(--nav-w) + 16px);right:16px;bottom:16px;max-width:480px;margin:0 auto}

  /* ── Колонка содержимого: 680 px по центру, прокрутка — у края окна ── */
  html[data-skin="v5"] .scrolla.pad{padding-left:max(24px,calc((100% - var(--col))/2));
    padding-right:max(24px,calc((100% - var(--col))/2))}
  /* у корневых экранов шапки нет, а мачта с маркой ушла в меню — отступ сверху свой;
     у остальных шапка с линией, и заголовок под ней не должен её касаться */
  html[data-skin="v5"] .screen.root .scrolla.pad{padding-top:28px}
  html[data-skin="v5"] .screen:not(.root) > .scrolla.pad{padding-top:16px}
  html[data-skin="v5"] #s-prog .scrolla.pad,
  html[data-skin="v5"] #s-fail .scrolla.pad,
  html[data-skin="v5"] #s-scan .scrolla.pad,
  html[data-skin="v5"] #s-onb .scrolla.pad,
  html[data-skin="v5"] #s-auth .scrolla.pad,
  html[data-skin="v5"] #s-age .scrolla.pad{padding-left:max(24px,calc((100% - 560px)/2));
    padding-right:max(24px,calc((100% - 560px)/2))}

  /* ── Шапка экрана: во всю ширину, заголовок слева за «назад» ───────── */
  html[data-skin="v5"] .nav{min-height:56px;padding:6px 16px 6px 24px;gap:12px;border-bottom:1px solid var(--line2)}
  html[data-skin="v5"] .nav > .sp:first-of-type{display:none}
  html[data-skin="v5"] .nav .ttl{text-align:left;flex:0 1 auto}
  html[data-skin="v5"] .nav .back ~ .ttl{padding-left:12px;border-left:1px solid var(--line2)}

  /* ── Меню: те же пять кнопок #tabs, в рейке — значок и подпись под ним ── */
  html[data-skin="v5"] .tabs{top:0;bottom:0;left:0;right:auto;width:var(--nav-w);height:auto;
    flex-direction:column;align-items:stretch;gap:2px;padding:14px 8px 12px;
    background:var(--surf);border-top:0;border-right:1px solid var(--line2);
    -webkit-backdrop-filter:none;backdrop-filter:none;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
  html[data-skin="v5"] .tabs.kb{display:flex}
  html[data-skin="v5"] .tabs button[data-t]{flex:none;height:58px;border-radius:12px;gap:3px;justify-content:center;
    font-size:10.5px;font-weight:500}
  html[data-skin="v5"] .tabs button[data-t] svg{width:24px;height:24px}
  html[data-skin="v5"] .tabs button[data-t].on{background:var(--surf2);font-weight:600}
  html[data-skin="v5"] .tabs .deskonly{display:flex}
  html[data-skin="v5"] .side-top{flex-direction:column;align-items:center;gap:8px;margin-bottom:12px}
  html[data-skin="v5"] .side-brand{display:flex;align-items:center;justify-content:center;gap:9px;height:40px}
  html[data-skin="v5"] .side-brand img{height:23px;width:auto}
  html[data-skin="v5"] .side-brand span{display:none;font-size:17px;font-weight:700;letter-spacing:-.012em;color:var(--ink)}
  html[data-skin="v5"] .side-search{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;width:44px;height:44px;
    border-radius:12px;background:var(--surf2);color:var(--ink3);font-size:15px;font-weight:400}
  html[data-skin="v5"] .side-search svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  html[data-skin="v5"] .side-search .lab{display:none;flex:1;min-width:0;text-align:left;white-space:nowrap}
  html[data-skin="v5"] .side-search kbd{display:none;flex:none}
  html[data-skin="v5"] .side-scan{display:flex;align-items:center;justify-content:center;gap:10px;width:44px;height:44px;padding:0;
    border-radius:12px;font-size:15px;font-weight:600;color:var(--ink);flex-direction:row}
  html[data-skin="v5"] .side-scan .ico{width:30px;height:30px;border-radius:8px;background:var(--accent);flex:none;display:grid;place-items:center}
  html[data-skin="v5"] .side-scan .ico svg{width:18px;height:18px;fill:none;stroke:var(--accent-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  html[data-skin="v5"] .side-scan .lab{display:none}
  html[data-skin="v5"] .tabs .side-lists{display:none}
  /* flex:none — .tabs button{flex:1} из таббара телефона тянул бы кнопку на всю высоту меню */
  html[data-skin="v5"] .side-me{margin-top:auto;flex:none;display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:0;
    border-radius:12px;flex-direction:row;color:var(--ink)}
  html[data-skin="v5"] .side-me .ava{width:32px;height:32px;border-radius:16px;background:var(--accent);color:var(--accent-ink);
    display:grid;place-items:center;font-size:15px;font-weight:600;flex:none}
  html[data-skin="v5"] .side-me .who,
  html[data-skin="v5"] .side-me .gear{display:none}
  html[data-skin="v5"] kbd.k{font:600 11px/1.3 var(--sans);color:var(--ink3);background:var(--surf);border:1px solid var(--line2);
    border-bottom-width:2px;border-radius:5px;padding:1px 5px}

  /* ── Листы снизу становятся диалогами по центру ─────────────────────── */
  html[data-skin="v5"] .sheet{align-items:center;justify-content:center;padding:24px}
  html[data-skin="v5"] .sheet-in{width:min(480px,100%);max-height:min(86vh,760px);border-radius:20px;
    padding:22px 22px 20px;box-shadow:0 24px 60px -24px rgba(0,0,0,.45)}
  html[data-skin="v5"] .sheet .grab{display:none}
  html[data-skin="v5"] .toast{left:calc(var(--nav-w) + 24px);right:24px;bottom:24px;max-width:440px;margin:0 auto}

  /* ── Блок съёмки: загрузка файлом, перетаскиванием и вставкой ──────── */
  html[data-skin="v5"] .scanblk .sb-go{display:none}
  html[data-skin="v5"] .scanblk .sb-main{min-height:72px;padding:13px 14px;border:1.5px dashed var(--block-line);border-radius:14px;gap:14px}
  html[data-skin="v5"] .scanblk .sb-file{display:inline-flex;align-items:center;gap:8px;flex:none;height:44px;padding:0 18px;
    border-radius:22px;background:var(--block-ink);color:var(--block);font-size:15px;font-weight:600;white-space:nowrap}
  html[data-skin="v5"] .scanblk .sb-file svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  html[data-skin="v5"] .scanblk .sb-how{display:block;font-size:13px;line-height:1.35;color:var(--block-ink2);margin-top:3px}
  html[data-skin="v5"] .scanblk .sb-how kbd{font:600 11px/1.3 var(--sans);color:var(--block-ink);border:1px solid var(--block-line);border-radius:5px;padding:0 4px}
  html[data-skin="v5"] .scanblk .sb-tile.deskonly{display:flex}
  html[data-skin="v5"] .scanblk .sb-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  html[data-skin="v5"] .scanblk.drag-over .sb-main{border-color:var(--block-ink);background:var(--block-soft)}

  /* ── Три вина совета прямо в карточке главной (desk.js → deskHome) ──────
     .homecard span из app.css и theme.css делает любой span строкой 13,5–15 px
     с отступом сверху — внутри подборки всё задано заново */
  html[data-skin="v5"] #home-advice .adv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
    margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line2);line-height:1.3}
  html[data-skin="v5"] #home-advice .adv span{margin:0;line-height:inherit}
  html[data-skin="v5"] #home-advice .adv .adv-i{display:flex;gap:10px;min-width:0}
  html[data-skin="v5"] #home-advice .adv .thumb{display:grid;width:48px;height:66px;border-radius:10px;flex:none}
  html[data-skin="v5"] #home-advice .adv .l{display:flex;flex-direction:column;gap:3px;min-width:0}
  html[data-skin="v5"] #home-advice .adv .n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    font-size:14px;font-weight:600;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
  html[data-skin="v5"] #home-advice .adv .m{display:block;font-size:12px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html[data-skin="v5"] #home-advice .adv .r{display:flex;align-items:center;gap:6px;margin-top:2px}
  html[data-skin="v5"] #home-advice .adv .rbadge{display:inline-flex;font-size:12px}
  html[data-skin="v5"] #home-advice .adv .rbadge:not(.hi){color:var(--ink)}
  html[data-skin="v5"] #home-advice .adv .mbadge{display:inline-block;font-size:12px}
  html[data-skin="v5"] #home-advice .adv .adv-more{grid-column:1/-1;display:flex;align-items:center;min-height:32px;margin-top:-2px;
    color:var(--accent);font-size:15px;font-weight:600}

  /* ── Слой «Отпустите — разберу карту» над любым экраном ─────────────── */
  html[data-skin="v5"] .drop{position:absolute;inset:0;z-index:70;display:grid;place-items:center;padding:24px;
    background:rgba(0,0,0,.32)}
  html[data-skin="v5"] .drop[hidden]{display:none}
  html[data-skin="v5"] .drop-card{width:min(400px,100%);background:var(--surf);border-radius:20px;padding:28px 24px;text-align:center;
    outline:2px dashed var(--accent);outline-offset:-10px;pointer-events:none}
  html[data-skin="v5"] .drop-ic{width:52px;height:52px;border-radius:26px;background:var(--accent-bg);display:grid;place-items:center;margin:0 auto 12px}
  html[data-skin="v5"] .drop-ic svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  html[data-skin="v5"] .drop-card b{display:block;font-size:20px;font-weight:700;letter-spacing:-.016em}
  html[data-skin="v5"] .drop-card span{display:block;margin-top:4px;font-size:14px;color:var(--ink2);font-variant-numeric:tabular-nums}

  /* ── «С телефона»: QR и ожидание снимка ─────────────────────────────── */
  html[data-skin="v5"] .qrd-row{display:grid;grid-template-columns:152px minmax(0,1fr);gap:18px;align-items:center}
  /* QR — тёмным по белому в любой теме: иначе камера телефона его не прочтёт */
  html[data-skin="v5"] .qrd-code{width:152px;height:152px;border-radius:14px;background:white;padding:10px;display:grid;place-items:center}
  html[data-skin="v5"] .qrd-code svg{width:132px;height:132px;display:block}
  html[data-skin="v5"] .qrd-t{font-size:20px;font-weight:700;letter-spacing:-.016em;line-height:1.2;margin-bottom:6px}
  html[data-skin="v5"] .qrd-row .hint{margin:0;font-size:14px}
  html[data-skin="v5"] .qrd-wait{display:flex;align-items:center;gap:9px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);
    font-size:14px;color:var(--ink2)}
  html[data-skin="v5"] .qrd-wait i{width:8px;height:8px;border-radius:4px;background:var(--accent);flex:none}
  html[data-skin="v5"] .qrd-wait.ok i{background:var(--tick-ok)}
  html[data-skin="v5"] .qrd-note{margin:10px 0 14px}

  /* ── Сравнение: лоток над содержимым, а не над таббаром ───────────── */
  html[data-skin="v5"] .cmp-tray{left:calc(var(--nav-w) + 24px);right:24px;bottom:24px}
  /* тост стоит там же, внизу по центру, и «В сравнении 3 вина» закрывал сам лоток:
     пока лоток виден, тост — над ним (лоток 58 px: 44 кнопка, 6 + 6 поля, 1 + 1 рамка) */
  html[data-skin="v5"] .cmp-tray:not([hidden]) ~ .toast{bottom:calc(24px + 58px + 12px)}
  /* пока лоток виден, низ любого списка можно докрутить до него, а не под него */
  html[data-skin="v5"] .device:has(> .cmp-tray:not([hidden])) .scrolla.pad{padding-bottom:112px}
}

/* ── Наведение мыши: тот же фон, что у нажатия, без теней и увеличения ── */
@media (min-width:768px) and (hover:hover){
  html[data-skin="v5"] .alt:hover,
  html[data-skin="v5"] button.row:hover,
  html[data-skin="v5"] .v5-card:hover,
  html[data-skin="v5"] .v5-link:hover,
  html[data-skin="v5"] .homecard:hover,
  html[data-skin="v5"] .choice:hover,
  html[data-skin="v5"] .rtree:hover,
  html[data-skin="v5"] .trk:hover,
  html[data-skin="v5"] .cont:hover,
  html[data-skin="v5"] .v5-offrow:hover,
  html[data-skin="v5"] .geo-go:hover,
  html[data-skin="v5"] .tabs button[data-t]:hover,
  html[data-skin="v5"] .side-scan:hover,
  html[data-skin="v5"] .side-me:hover,
  html[data-skin="v5"] .tabs .side-li:hover,
  html[data-skin="v5"] .pm-row:hover{background:var(--surf2)}
  html[data-skin="v5"] .mini:hover,
  html[data-skin="v5"] .fact-prev:hover{background:var(--surf2)}
  html[data-skin="v5"] .chips button:not(.on):hover,
  html[data-skin="v5"] .fbar button:not([aria-expanded="true"]):hover{background:var(--surf2)}
  html[data-skin="v5"] .btn:hover,
  html[data-skin="v5"] .sb-main:hover,
  html[data-skin="v5"] .sb-tile:hover,
  html[data-skin="v5"] .v5-qr button:hover{opacity:.86}
}
/* ── Мышь и фокус (раздел 7): курсор-рука у нажимаемого — у <button> по умолчанию
   стрелка; у полей поиска и настроек своя рамка погашена (outline:none), поэтому
   фокус — и с клавиатуры, и по клику, как у любого поля ввода, — рамкой подложки ── */
@media (min-width:768px){
  html[data-skin="v5"] button:not(:disabled),
  html[data-skin="v5"] a[href],
  html[data-skin="v5"] [role="button"],
  html[data-skin="v5"] summary,
  html[data-skin="v5"] label.search{cursor:pointer}
  html[data-skin="v5"] .search:has(input:focus),
  html[data-skin="v5"] .fld:has(input:focus){outline:2px solid var(--accent);outline-offset:2px}
}

/* ── От 1024: список и вино рядом, главная в две колонки ─────────────── */
@media (min-width:1024px){
  /* Панель вина — экран #s-pane справа от списка; список сужается до --list-w */
  html[data-skin="v5"] .screen.on.has-pane{flex:0 0 var(--list-w);order:1;border-right:1px solid var(--line2)}
  html[data-skin="v5"] .screen.on.has-pane .scrolla.pad{padding-left:24px;padding-right:24px}
  html[data-skin="v5"] #s-pane{order:2}
  html[data-skin="v5"] #s-pane.pane-open{display:flex;flex:1;min-width:0}
  html[data-skin="v5"] #s-pane .scrolla.pad{padding-left:max(24px,calc((100% - var(--col))/2));padding-right:max(24px,calc((100% - var(--col))/2))}
  html[data-skin="v5"] #s-pane .nav{border-bottom:0}
  html[data-skin="v5"] #s-pane .nav .ttl{border-left:0;padding-left:0;font-size:13px;font-weight:400;color:var(--ink2);
    font-variant-numeric:tabular-nums}
  html[data-skin="v5"] .pane-acts{display:flex;align-items:center;gap:2px;margin-left:auto}
  html[data-skin="v5"] .pane-acts button{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--accent)}
  html[data-skin="v5"] .pane-acts svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  /* Что открыто в панели: рамка цвета акцента — тем же приёмом, что фокус */
  html[data-skin="v5"] .v5-dec.in-pane{outline:2px solid var(--accent);outline-offset:3px}
  html[data-skin="v5"] .alt.in-pane,
  html[data-skin="v5"] .v5-card.in-pane,
  html[data-skin="v5"] .card.in-pane{background:var(--accent-bg)}

  /* Главная: приветствие во всю ширину, ниже действия слева и справка справа */
  html[data-skin="v5"] #s-home .scrolla.pad{display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:24px;
    align-content:start;align-items:start;padding-left:max(32px,calc((100% - 1120px)/2));padding-right:max(32px,calc((100% - 1120px)/2))}
  html[data-skin="v5"] #s-home .scrolla > *{grid-column:1/-1}
  html[data-skin="v5"] #s-home .home-a,
  html[data-skin="v5"] #s-home .home-b{display:flex;flex-direction:column;min-width:0;grid-row:auto}
  html[data-skin="v5"] #s-home .home-a{grid-column:1}
  html[data-skin="v5"] #s-home .home-b{grid-column:2;padding-top:18px}
  /* Справа сверху — «Ваш вкус», как в макете; на телефоне порядок прежний */
  html[data-skin="v5"] #s-home .home-b > #taste-h{order:1;margin-top:0}
  html[data-skin="v5"] #s-home .home-b > #taste-card{order:2}
  html[data-skin="v5"] #s-home .home-b > #fact-h{order:3}
  html[data-skin="v5"] #s-home .home-b > #fact-card{order:4}
  html[data-skin="v5"] #s-home .home-b > #recent-h{order:5}
  html[data-skin="v5"] #s-home .home-b > #home-recent{order:6}
  html[data-skin="v5"] #s-home .home-a > .scanblk{margin-top:18px}
}

@media (min-width:1280px){
  html[data-skin="v5"]{--nav-w:240px;--list-w:520px}
  /* Меню с подписями, поиском и списками */
  html[data-skin="v5"] .tabs{padding:16px 12px 14px}
  html[data-skin="v5"] .side-top{align-items:stretch}
  html[data-skin="v5"] .side-brand{justify-content:flex-start;padding:0 8px}
  html[data-skin="v5"] .side-brand span{display:block}
  html[data-skin="v5"] .side-search{width:auto;height:38px;justify-content:flex-start;gap:8px;padding:0 8px 0 10px;border-radius:11px}
  html[data-skin="v5"] .side-search svg{width:16px;height:16px}
  html[data-skin="v5"] .side-search .lab,
  html[data-skin="v5"] .side-search kbd{display:block}
  html[data-skin="v5"] .side-scan{width:auto;justify-content:flex-start;padding:0 8px}
  html[data-skin="v5"] .side-scan .lab{display:block}
  html[data-skin="v5"] .tabs button[data-t]{flex-direction:row;justify-content:flex-start;gap:12px;height:44px;padding:0 10px;
    font-size:15px;font-weight:500;color:var(--ink)}
  html[data-skin="v5"] .tabs button[data-t] svg{width:22px;height:22px;stroke:var(--ink2)}
  html[data-skin="v5"] .tabs button[data-t].on{color:var(--accent)}
  html[data-skin="v5"] .tabs button[data-t].on svg{stroke:var(--accent)}
  html[data-skin="v5"] .tabs .side-lists{display:flex;flex-direction:column;margin-top:18px}
  html[data-skin="v5"] .side-h{padding:0 10px;margin-bottom:4px;font-size:12px;font-weight:600;color:var(--ink2);
    text-transform:uppercase;letter-spacing:.04em}
  html[data-skin="v5"] .tabs .side-li{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;
    height:40px;padding:0 10px;border-radius:12px;font-size:15px;font-weight:400;color:var(--ink);text-align:left}
  html[data-skin="v5"] .side-li svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--ink3);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
  html[data-skin="v5"] .side-li span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html[data-skin="v5"] .side-li em{font-style:normal;font-size:13px;color:var(--ink3);font-variant-numeric:tabular-nums}
  /* открытый список подсвечен, как вкладка; вкладка, из которой пришли, при этом гаснет */
  html[data-skin="v5"] .tabs .side-li.on{background:var(--surf2);font-weight:600;color:var(--accent)}
  html[data-skin="v5"] .tabs .side-li.on svg{stroke:var(--accent)}
  html[data-skin="v5"] .tabs:has(.side-li.on) button[data-t].on{background:none;font-weight:500;color:var(--ink)}
  html[data-skin="v5"] .tabs:has(.side-li.on) button[data-t].on svg{stroke:var(--ink2)}
  html[data-skin="v5"] .side-me{justify-content:flex-start;padding:10px 2px 0;border-top:1px solid var(--line);border-radius:0}
  html[data-skin="v5"] .side-me .who{display:flex;flex-direction:column;flex:1;min-width:0;text-align:left;line-height:1.25}
  html[data-skin="v5"] .side-me .who b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html[data-skin="v5"] .side-me .who small{font-size:12px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html[data-skin="v5"] .side-me .gear{display:grid;place-items:center;width:36px;height:36px;color:var(--accent)}
  html[data-skin="v5"] .side-me .gear svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

  html[data-skin="v5"] #s-home .scrolla.pad{grid-template-columns:minmax(0,1fr) 380px;column-gap:32px;
    padding-left:max(40px,calc((100% - 1120px)/2));padding-right:max(40px,calc((100% - 1120px)/2))}
  html[data-skin="v5"] #s-pane .scrolla.pad{padding-left:max(32px,calc((100% - var(--col))/2));padding-right:max(32px,calc((100% - var(--col))/2))}
}

/* ── Страница вина отдельной страницей: колонка до 1120 px ─────────────── */
@media (min-width:1024px){
  html[data-skin="v5"] #s-wine .scrolla.pad,
  html[data-skin="v5"] #s-wine2 .scrolla.pad{padding-left:max(32px,calc((100% - 1120px)/2));padding-right:max(32px,calc((100% - 1120px)/2))}
}

/* ── Страница вина в две колонки: решает ширина её контейнера ────────── */
@media (min-width:768px){
  html[data-skin="v5"] .v5-wd{container:wd / inline-size}
  html[data-skin="v5"] #s-compare .scrolla.pad{padding-left:max(24px,calc((100% - 1120px)/2));padding-right:max(24px,calc((100% - 1120px)/2))}
  @container wd (min-width:880px){
    html[data-skin="v5"] .wd-hero{display:grid;grid-template-columns:400px minmax(0,1fr);column-gap:40px;align-items:start}
    html[data-skin="v5"] .wd-hero > .wd-head{display:block;grid-column:2;grid-row:1 / span 3;min-width:0}
    html[data-skin="v5"] .wd-hero > :not(.wd-head){grid-column:1}
    html[data-skin="v5"] .wd-hero > .wd-found{margin:0}
    html[data-skin="v5"] .wd-hero .v5-band{height:500px}
    /* снимка нет — силуэт той же высоты, что полоса снимка; инициал из углов миниатюр здесь лишний */
    html[data-skin="v5"] .wd-hero > .wd-sil{display:grid;place-items:center;height:500px;border-radius:20px;background:var(--surf)}
    html[data-skin="v5"] .wd-hero > .wd-sil .thumb{width:100%;height:100%;aspect-ratio:auto;background:none}
    html[data-skin="v5"] .wd-hero > .wd-sil .thumb svg{width:auto;height:46%}
    html[data-skin="v5"] .wd-hero > .wd-sil .ini{display:none}
    html[data-skin="v5"] .wd-hero:has(> .wd-found:not([hidden])) > .wd-sil{display:none}
    html[data-skin="v5"] .wd-actrow{display:flex;flex-wrap:wrap;gap:8px}
    html[data-skin="v5"] .wd-actrow > .v5-acts{flex:1 0 100%;margin:0}
    html[data-skin="v5"] .wd-actrow > .wd-lists2{flex:1 1 auto;margin:0}
    html[data-skin="v5"] .wd-actrow > .wd-cmp{flex:0 0 auto;width:auto;margin:0;padding:0 16px;background:var(--surf)}
    html[data-skin="v5"] .wd-cols{display:grid;grid-template-columns:400px minmax(0,1fr);column-gap:40px;align-items:start}
    html[data-skin="v5"] .wd-a,
    html[data-skin="v5"] .wd-b{display:block;min-width:0}
    html[data-skin="v5"] .wd-b .geo-map{height:300px}
    html[data-skin="v5"] .wd-sim{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;overflow:visible;margin:0;padding:2px 0 6px}
    html[data-skin="v5"] .wd-sim .mini{flex:none}
  }
  @container wd (min-width:880px) and (max-width:1099px){
    html[data-skin="v5"] .wd-hero,
    html[data-skin="v5"] .wd-cols{grid-template-columns:320px minmax(0,1fr);column-gap:24px}
    html[data-skin="v5"] .wd-hero .v5-band,
    html[data-skin="v5"] .wd-hero > .wd-sil{height:420px}
    html[data-skin="v5"] .wd-sim{grid-template-columns:repeat(4,minmax(0,1fr))}
    html[data-skin="v5"] .wd-sim .mini:nth-child(n+5){display:none}
  }
}

/* ══ Остальные экраны по заданию (раздел 6.6) ═════════════════════════ */
@media (min-width:768px){
  /* ── Сканы — карточками сеткой. Страницы пейджер дописывает новыми группами,
     поэтому сетка у самого списка, а группы — display:contents: догрузка
     продолжает ту же сетку без дыр, «Сегодня» и «Раньше» — во всю ширину ── */
  html[data-skin="v5"] #scans-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
  html[data-skin="v5"] #scans-list > .grp{display:contents}
  html[data-skin="v5"] #scans-list > .sec-h{grid-column:1/-1;margin:10px 0 -4px}
  html[data-skin="v5"] #scans-list > .sec-h:first-child{margin-top:0}
  html[data-skin="v5"] #scans-list > .grp > div.row{grid-column:1/-1}
  html[data-skin="v5"] #scans-list .row{background:var(--surf);border-radius:var(--r);padding:14px;gap:14px}
  html[data-skin="v5"] #scans-list .row + .row::before,
  html[data-skin="v5"] #scans-list .grp + .grp .row:first-child::before{display:none}
  html[data-skin="v5"] #scans-list .thumb.sm{width:64px;height:82px}
  html[data-skin="v5"] #scans-list .chev{display:none}

  /* ── «Вина»: ленты сеткой вместо прокрутки вбок — один ряд: четыре карточки в
     колонке 680 px, три, когда рядом открыта панель вина (ширину решает контейнер) ── */
  html[data-skin="v5"] #wines-feeds{container:feeds / inline-size}
  html[data-skin="v5"] #wines-feeds .hrow-scroll{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
    overflow:visible;margin:0;padding:2px 0 6px;scroll-snap-type:none}
  html[data-skin="v5"] #wines-feeds .hrow-scroll:empty{display:none}
  html[data-skin="v5"] #wines-feeds .mini{flex:none;min-width:0}
  html[data-skin="v5"] #wines-feeds .mini:nth-child(n+5){display:none}
  @container feeds (max-width:599px){
    html[data-skin="v5"] #wines-feeds .hrow-scroll{grid-template-columns:repeat(3,minmax(0,1fr))}
    html[data-skin="v5"] #wines-feeds .mini:nth-child(n+4){display:none}
  }
  /* ── Поля фильтра — по три в ряд, пока список во всю колонку; рядом с панелью
     вина список узкий, и поля остаются по два. Сортировка заполняет ряд: w3a —
     на всю ширину, w3b — на две оставшиеся клетки (считает fltFill) ── */
  html[data-skin="v5"] .screen:not(.has-pane) .fp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  html[data-skin="v5"] .screen:not(.has-pane) .fp-f.wide{grid-column:auto}
  html[data-skin="v5"] .screen:not(.has-pane) .fp-f.w3a{grid-column:1/-1}
  html[data-skin="v5"] .screen:not(.has-pane) .fp-f.w3b{grid-column:span 2}
}

/* ── «Знания»: витрина в две колонки (раздел 6.6) — слева «Продолжить», статья дня
   и разделы учебника, справа музыка, дорожки и выпуски. Поиск и найденное — шириной
   левой колонки: строки на всю ширину 1120 px читать трудно ── */
@media (min-width:1024px){
  html[data-skin="v5"] #s-know .scrolla.pad{padding-left:max(32px,calc((100% - 1120px)/2));padding-right:max(32px,calc((100% - 1120px)/2))}
  html[data-skin="v5"] #s-know .search-wrap,
  html[data-skin="v5"] #know-results,
  html[data-skin="v5"] #know-skel,
  html[data-skin="v5"] #know-oops{max-width:calc(100% - 372px)}
  html[data-skin="v5"] #know-real{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:32px;align-items:start}
  html[data-skin="v5"] #know-real > .know-g1,
  html[data-skin="v5"] #know-real > .know-g2,
  html[data-skin="v5"] #know-real > .know-g3{display:block;min-width:0}
  html[data-skin="v5"] #know-real > .know-g1{grid-column:1;grid-row:1}
  html[data-skin="v5"] #know-real > .know-g2{grid-column:2;grid-row:1 / span 2}
  html[data-skin="v5"] #know-real > .know-g3{grid-column:1;grid-row:2}
}
@media (min-width:1024px) and (max-width:1279px){
  html[data-skin="v5"] #know-real{grid-template-columns:minmax(0,1fr) 300px;column-gap:24px}
  html[data-skin="v5"] #s-know .search-wrap,
  html[data-skin="v5"] #know-results,
  html[data-skin="v5"] #know-skel,
  html[data-skin="v5"] #know-oops{max-width:calc(100% - 324px)}
}

/* ── Статья «Знаний» от 1280: текст 680 px, оглавление — липкой колонкой справа
   (раздел 6.6). Колонка тянется на всю высоту статьи (grid-row на все строки,
   промежутка между строками нет — пустые строки нулевые), и оглавление едет
   вместе с чтением. До 1280 — прежняя дорожка чипсов над текстом ── */
@media (min-width:1280px){
  html[data-skin="v5"] #s-know-a .scrolla.pad,
  html[data-skin="v5"] #s-know-a2 .scrolla.pad{padding-left:max(32px,calc((100% - 960px)/2));padding-right:max(32px,calc((100% - 960px)/2))}
  html[data-skin="v5"] .art-body{display:grid;grid-template-columns:minmax(0,680px) 240px;column-gap:40px;align-items:start}
  html[data-skin="v5"] .art-body > *{grid-column:1;min-width:0}
  html[data-skin="v5"] .art-body > .art-toc{grid-column:2;grid-row:1 / span 40;position:sticky;top:20px;
    flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:2px;overflow:visible;margin:4px 0 0;padding:0}
  html[data-skin="v5"] .art-body > .art-toc::before{content:"Содержание";display:block;margin:0 0 8px 10px;font-size:12px;
    font-weight:600;color:var(--ink2);text-transform:uppercase;letter-spacing:.04em}
  html[data-skin="v5"] .art-body > .art-toc button{flex:none;white-space:normal;text-align:left;justify-content:flex-start;
    min-height:36px;padding:7px 10px;border-radius:10px;background:none;color:var(--ink);font-size:14px;line-height:1.3}
  html[data-skin="v5"] .art-body > .art-toc button.med{background:var(--accent-bg);color:var(--accent);margin-bottom:6px}
}
@media (min-width:1280px) and (hover:hover){
  html[data-skin="v5"] .art-body > .art-toc button:not(.med):hover{background:var(--surf2)}
}

/* ── «Мой вкус» на компьютере — вариант 2 (выбор владельца 1 октября 2026): слева ваши
   вина полками, справа вкус и профиль. От 768 полки заменяют строки списков и
   историю (из строк остаются «Регионы»), «Ждут оценки» — полосой с кнопкой
   «Оценить», значки «Поделиться» и «Настройки» — в строке заголовка. До 1280 всё
   одной колонкой: вкус, «Ждут оценки», полки, профиль, «За месяц», «Регионы»; от
   1280 — две колонки, правая стоит на месте, если помещается в окно. Порядок на
   телефоне не трогается: .exp-a/.exp-b там display:contents, порядок — order ── */
@media (min-width:768px){
  html[data-skin="v5"] #exp-v5{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}
  html[data-skin="v5"] #exp-v5 > *,
  html[data-skin="v5"] #exp-v5 .exp-a > *,
  html[data-skin="v5"] #exp-v5 .exp-b > *{grid-column:1/-1;min-width:0}
  html[data-skin="v5"] #exp-v5 > .v5-mehead{grid-column:1;grid-row:1;margin-top:0}
  html[data-skin="v5"] #exp-v5 > .mast{grid-column:2;grid-row:1;align-self:center}
  /* Списки заменены полками, поэтому строки скрыты — кроме тех, у кого полки нет:
     «Регионы» и «Винный шкаф» (там своя страница, а не лента вин) */
  html[data-skin="v5"] #exp-v5 .exp-lists .v5-link:not([data-go="regions"]):not([data-go="cellar"]),
  html[data-skin="v5"] #exp-v5 .exp-hist{display:none}
  html[data-skin="v5"] #exp-v5 .exp-shelves{order:3}
  html[data-skin="v5"] #exp-v5 #exp-v5-story{order:7}
  html[data-skin="v5"] #exp-v5 .exp-lists{order:8}
  /* «Музыка моего вкуса» лежит в .exp-b: от 1280 она в широкой колонке под полками —
     правая колонка вкуса остаётся короткой и стоит на месте; одной колонкой (до 1280),
     как на телефоне, — сразу под «Как я подбираю для вас» */
  html[data-skin="v5"] #exp-v5 .exp-music{order:6}
  /* «Ждут оценки» — полоса с кнопкой вместо числа и стрелки */
  html[data-skin="v5"] #exp-v5 .exp-pend .v5-link{min-height:72px}
  html[data-skin="v5"] #exp-v5 .exp-pend .v5-n,
  html[data-skin="v5"] #exp-v5 .exp-pend .chev{display:none}
  html[data-skin="v5"] #exp-v5 .v5-go{flex:none;display:grid;place-items:center;min-height:40px;padding:0 20px;border-radius:12px;
    background:var(--accent-fill);color:var(--accent-fill-ink);font-size:15px;font-weight:600}
  /* Полки — карточки лент «Вин» (.mini): по три, от 820 px полки — по четыре */
  html[data-skin="v5"] #exp-v5 .exp-shelves{container:shelves / inline-size}
  html[data-skin="v5"] #exp-v5 .exp-shelves:empty{display:none}
  html[data-skin="v5"] #exp-v5 .exp-shelf{margin-top:24px}
  html[data-skin="v5"] #exp-v5 .shelf-h{display:flex;align-items:center;gap:10px;margin:0 2px 10px}
  html[data-skin="v5"] #exp-v5 .shelf-h h3{margin:0;font-size:20px;font-weight:700;letter-spacing:-.015em;line-height:1.2}
  html[data-skin="v5"] #exp-v5 .shelf-n{font-family:var(--mono);font-size:15px;color:var(--ink3);font-variant-numeric:tabular-nums}
  html[data-skin="v5"] #exp-v5 .shelf-all{margin-left:auto;display:flex;align-items:center;gap:6px;min-height:44px;padding:0 2px;
    background:none;border:0;color:var(--accent);font:inherit;font-size:15px;font-weight:500;cursor:pointer}
  html[data-skin="v5"] #exp-v5 .shelf-all .chev{width:7px;height:12px;stroke:currentColor}
  html[data-skin="v5"] #exp-v5 .shelf-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  html[data-skin="v5"] #exp-v5 .shelf-g .mini{flex:none;min-width:0}
  html[data-skin="v5"] #exp-v5 .shelf-g .mini:nth-child(n+4){display:none}
  html[data-skin="v5"] #exp-v5 .shelf-g .mini .thumb{aspect-ratio:1/.74}
  html[data-skin="v5"] #exp-v5 .mini .own{font-family:var(--mono);font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
  html[data-skin="v5"] #exp-v5 .mini .own + .d{margin-left:8px;color:var(--ink2);font-variant-numeric:tabular-nums}
  @container shelves (min-width:820px){
    html[data-skin="v5"] #exp-v5 .shelf-g{grid-template-columns:repeat(4,minmax(0,1fr))}
    html[data-skin="v5"] #exp-v5 .shelf-g .mini:nth-child(n+4){display:flex}
  }
}
@media (min-width:1024px){
  html[data-skin="v5"] #s-exp .scrolla.pad{padding-left:max(32px,calc((100% - 1120px)/2));padding-right:max(32px,calc((100% - 1120px)/2))}
}
@media (min-width:1280px){
  html[data-skin="v5"] #exp-v5{grid-template-columns:minmax(0,1fr) 340px;column-gap:32px;
    grid-template-areas:"head icons" "main side" "end end"}
  html[data-skin="v5"] #exp-v5 > .v5-mehead{grid-area:head}
  html[data-skin="v5"] #exp-v5 > .mast{grid-area:icons;justify-self:end}
  html[data-skin="v5"] #exp-v5 > .exp-b{display:block;grid-area:main;padding-top:2px}   /* верх вровень с карточкой вкуса справа: 12 + 2 = 14 */
  html[data-skin="v5"] #exp-v5 .exp-pend[hidden] + .exp-shelves > .exp-shelf:first-child{margin-top:12px}
  html[data-skin="v5"] #exp-v5 .exp-shelves:not(:empty) + .exp-music{margin-top:24px}   /* шаг полок */
  html[data-skin="v5"] #exp-v5 > .exp-a{display:block;grid-area:side}
  html[data-skin="v5"] #exp-v5 > .exp-end{grid-area:end}
}
@media (min-width:1280px) and (min-height:900px){
  html[data-skin="v5"] #exp-v5 > .exp-a{position:sticky;top:16px}
}

/* ── «Регионы» (раздел 6.6): карта во всю ширину сверху и выше телефонной, под ней
   дерево, «белые пятна» — колонкой справа от него ── */
@media (min-width:1024px){
  /* сетка — на самом .scrolla с заданной высотой: без max-content ряды с прокручиваемыми
     блоками (чипсы цвета, карта) сжимаются ниже содержимого и налезают друг на друга */
  html[data-skin="v5"] #s-regions .scrolla.pad{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-auto-rows:max-content;
    column-gap:32px;align-content:start;align-items:start;padding-left:max(32px,calc((100% - 1120px)/2));padding-right:max(32px,calc((100% - 1120px)/2))}
  html[data-skin="v5"] #s-regions .scrolla > *{grid-column:1/-1;min-width:0}
  html[data-skin="v5"] #s-regions .scrolla > #regions-colors,
  html[data-skin="v5"] #s-regions .scrolla > #regions-branch,
  html[data-skin="v5"] #s-regions .scrolla > #regions-meta,
  html[data-skin="v5"] #s-regions .scrolla > #regions-tree{grid-column:1}
  html[data-skin="v5"] #s-regions .scrolla > #regions-blank{grid-column:2}
  html[data-skin="v5"] #regions-map .geo-map{height:340px}
}
@media (min-width:1024px) and (max-width:1279px){
  html[data-skin="v5"] #s-regions .scrolla.pad{grid-template-columns:minmax(0,1fr) 280px;column-gap:24px}
  html[data-skin="v5"] #regions-map .geo-map{height:300px}
}

/* ── «Все факты»: список и заметка рядом (раздел 6.6, desk.js → factSideShow) ── */
@media (min-width:1024px){
  /* движок держит экран заметки смонтированным под списком (.warm: вне потока,
     невидим, некликабелен) — рядом со списком он обычный участник ряда */
  html[data-skin="v5"] #s-fact.side{display:flex;flex:1;min-width:0;order:2;position:relative;left:auto;top:auto;right:auto;bottom:auto;
    visibility:visible;pointer-events:auto;z-index:auto}
  html[data-skin="v5"] #s-fact.side .nav .back,
  html[data-skin="v5"] #s-fact.side #fact-all{display:none}
  html[data-skin="v5"] #facts-list .row.in-pane{background:var(--accent-bg)}
}