/* Окно и страница «Браузер Глиф» (с 06.11; разметка — templates/_browser.html, поведение — static/browser.js).
   Цвета — переменные страниц поиска (--accent, --surface…); у рисунков — свои тона (--art-*), у тёмной темы — свои.
   Текст не мельче 1rem, жирность не больше 600 (правила страниц поиска с 14.10). Цели для пальца — от 44 точек. */

.bdl{--art-frame:#2f3431;--art-screen:#ffffff;--art-chrome:#e9ece8;--art-tab:#d5dad4;--art-line:#c6ccc5;--art-ink:#3a403b;
  --art-tile:#e7eee9;--art-notch:#5b625c;color:var(--text)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bdl{--art-frame:#0b0d0c;--art-screen:#232622;--art-chrome:#30342f;
  --art-tab:#3c413b;--art-line:#4b5149;--art-ink:#d9ddd6;--art-tile:#2c3a33;--art-notch:#3a3f39}}
:root[data-theme="dark"] .bdl{--art-frame:#0b0d0c;--art-screen:#232622;--art-chrome:#30342f;--art-tab:#3c413b;--art-line:#4b5149;
  --art-ink:#d9ddd6;--art-tile:#2c3a33;--art-notch:#3a3f39}

.bdl-title{margin:0 44px 8px 0;font-size:1.45rem;font-weight:500;line-height:1.25}
.bdl-lead{margin:0 0 18px;color:var(--muted);font-size:1rem;line-height:1.5;max-width:68ch}
.bdl-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.bdl-card{display:flex;flex-direction:column;padding:16px 18px 18px;border:1px solid var(--border);border-radius:16px;background:var(--surface)}
.bdl-art{margin:-4px -4px 12px;border-radius:12px;background:var(--surface-2);overflow:hidden}
.bdl-svg{display:block;width:100%;height:auto;aspect-ratio:240 / 150}
.bdl-card h3{margin:0;font-size:1.15rem;font-weight:600;line-height:1.3}
.bdl-kind{margin:2px 0 8px;color:var(--accent-text);font-size:1rem;font-weight:500}
.bdl-text{margin:0 0 8px;font-size:1rem;line-height:1.5}
.bdl-req{margin:0;color:var(--muted);font-size:1rem;line-height:1.45}
/* Под кнопкой — версия, формат и размер; дальше название, вид версии и описание (кнопка — сразу под рисунком, с 06.11). */
.bdl-meta{margin:8px 0 14px;color:var(--muted);font-size:1rem;text-align:center;font-variant-numeric:tabular-nums}
.bdl-meta.none{min-height:46px;margin-top:0;padding:11px 0;border:1px dashed var(--border);border-radius:12px}
.bdl-get{display:flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;border:0;border-radius:12px;
  background:var(--accent);color:var(--on-accent);font:inherit;font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer;transition:background .15s}
.bdl-get:hover{background:var(--accent-hover)}
.bdl-get:focus-visible,.bdl-back:focus-visible,.bdl-close:focus-visible,.wc-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bdl-note{margin:16px 0 0;color:var(--muted);font-size:1rem}

/* Шаг «проверка»: над виджетом — назад и что скачивается; виджет — по центру, не шире своего. */
.bdl-step-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 44px 14px 0;font-size:1rem}
.bdl-step-title{color:var(--muted)}
.bdl-back{appearance:none;display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--border);border-radius:11px;
  background:var(--surface);color:var(--text);font:inherit;font-size:1rem;cursor:pointer}
.bdl-back:hover{border-color:var(--accent);color:var(--accent-text)}
.bdl-check .wc{margin:0 auto}
/* Крестик в шапке виджета — назад к версиям; нужен на телефоне, где виджет закрывает всё окно (на компьютере есть «← К версиям»). */
.wc-x{appearance:none;flex:none;display:none;place-items:center;width:44px;height:44px;margin:-6px -6px -6px 0;padding:0;border:0;border-radius:12px;
  background:transparent;color:var(--wc-dim);cursor:pointer}
.wc-x:hover{background:rgba(127,160,220,.14);color:var(--wc-ink)}
.wc-x svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* Шаг «готово»: отметка, файл, запасная ссылка, как установить, SHA-256. */
.bdl-ok{max-width:640px;margin:8px auto 4px;text-align:center}
.bdl-ok-icon{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--accent-soft);color:var(--accent-text)}
.bdl-ok-icon svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.bdl-ok.refused .bdl-ok-icon{background:var(--warn-soft);color:var(--warn)}
.bdl-ok-title{margin:12px 0 6px;font-size:1.3rem;font-weight:500}
.bdl-ok p{margin:0 0 10px;font-size:1rem;line-height:1.5}
.bdl-ok-file{color:var(--muted);overflow-wrap:anywhere}
.bdl-ok a{color:var(--link)}
.bdl-ok-install{margin:0 0 10px;padding:10px 14px;border-radius:12px;background:var(--surface-2);text-align:left}
.bdl-ok .bdl-ok-how{margin:0}
.bdl-ok-cmd{display:block;margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--surface);font:.95rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  overflow-wrap:anywhere;user-select:all}
/* Заголовок итога получает фокус для чтения с экрана (role="status" рядом), рамка фокуса на нём не нужна. */
.bdl-ok-title:focus{outline:none}
.bdl-ok-sha{color:var(--muted)}
.bdl-ok-sha code{font:.95rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;user-select:all}

/* Окно (dialog). Пока оно открыто, страница под ним не прокручивается (html.bdl-open) и на компьютере идёт без уменьшения
   на 10 % (html.zoom-off, как страница проверки: WhiteCaptcha берёт точки через getScreenCTM — browser.js). */
html.bdl-open{overflow:hidden}
.bdl-dialog{box-sizing:border-box;width:min(960px,100% - 32px);max-height:calc(100dvh - 32px);margin:auto;padding:22px 24px 24px;
  border:1px solid var(--border);border-radius:20px;background:var(--bg);color:var(--text);box-shadow:0 24px 64px rgba(0,0,0,.28);overflow:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent}
/* В окне рисунок ниже, чем на странице /browser/: окно помещается в экран ноутбука без прокрутки. */
.bdl-dialog .bdl-svg{max-height:176px;margin:0 auto}
.bdl-dialog:not([open]){display:none}
.bdl-dialog.fallback[open]{position:fixed;inset:0;z-index:1000}
.bdl-dialog::backdrop{background:rgba(10,12,11,.55);backdrop-filter:blur(2px)}
.bdl-veil{position:fixed;inset:0;z-index:999;background:rgba(10,12,11,.55)}
.bdl-close{appearance:none;position:absolute;top:14px;right:14px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;
  border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);cursor:pointer}
.bdl-close:hover{border-color:var(--accent);color:var(--accent-text)}
.bdl-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.bdl-wait{display:grid;place-items:center;min-height:240px;color:var(--muted)}
.bdl-dialog .bdl-check[hidden],.bdl-dialog .bdl-done[hidden],.bdl-dialog .bdl-list[hidden],.bdl-page [hidden]{display:none}

@media (max-width:720px){
  .bdl-cards{grid-template-columns:minmax(0,1fr)}
  /* Карточки одна под другой: на узком экране (телефон) первой — версия для Android, её кнопка видна без прокрутки. */
  .bdl-card[data-os="android"]{order:-1}
  .bdl-svg,.bdl-dialog .bdl-svg{max-height:150px;margin:0 auto}
}
/* Телефон: окно — на весь экран; виджет WhiteCaptcha — тоже на весь экран, как на странице проверки (gate.html, замечание
   пользователя 14.10: «экран не должен прокручиваться, капча не больше самого экрана»); назад — крестиком в его шапке. */
@media (max-width:640px){
  .bdl-dialog{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:16px 16px 24px;border:0;border-radius:0}
  .bdl-title{font-size:1.3rem}
  .bdl-card{padding:14px 14px 16px}
}
@media (max-width:640px),(max-height:540px) and (pointer:coarse){
  .bdl-check .wc,.bdl-check .wc[data-layout]{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;max-width:none;height:100dvh;margin:0;border:0;border-radius:0;
    padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
    overflow:hidden;overscroll-behavior:contain;touch-action:none;--wc-chrome:214px}
  .bdl-check .wc-head{margin-bottom:8px}
  .bdl-check .wc-x{display:grid}
  .bdl-check .wc-mark{width:36px;height:36px}
  .bdl-check .wc-time{margin-bottom:10px}
  .bdl-check .wc-stage{flex:none;align-self:center;margin-block:auto;width:min(100%,(100dvh - var(--wc-chrome)) * 640 / 360)}
  .bdl-check .wc[data-layout="portrait"] .wc-stage{width:min(100%,(100dvh - var(--wc-chrome)) * 360 / 540)}
  .bdl-check .wc-foot{margin-top:0;padding-top:10px}
  .bdl-check .wc-brand{display:none}
}
@media (max-height:540px) and (pointer:coarse){.bdl-check .wc{--wc-chrome:150px}.bdl-check .wc-title span{display:none}}
@media (prefers-reduced-motion:reduce){.bdl-get,.bdl-back{transition:none}}