/* 2xS Community — дополнения экранов /login, /deck, /manage (XSP-106).
   Токены и компоненты берутся из site.css (DS v1.1); здесь только то, что
   в макете было inline-стилями или нужно реальному продукту. */

.deck-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* Вход */
.auth .bg .deck-blob-a{left:55%;top:10%;width:40%;height:40%}
.auth .bg .deck-blob-b{left:5%;top:55%;width:40%;height:40%}
.auth .bg .deck-blob-c{left:60%;top:65%;width:30%;height:30%}
.deck-lock{background:var(--blue-soft);color:var(--blue)}
.auth-card a.btn{text-decoration:none}

/* Клиентская оболочка */
.deck-inline-form{display:inline-flex;margin:0}
.deck-empty-cta{margin-top:18px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.deck-empty-cta .btn{text-decoration:none}
.mats .empty:first-child{margin-top:0}

/* Просмотр. Тонкая полоса сверху, рамка презентации — во всю ширину и на всю
   оставшуюся высоту окна: материал сам выбирает вид по размеру своей рамки
   (узкое вертикальное окно — прототип, широкое — слайды), поэтому рамке нельзя
   оставлять поля. Нижний блок — ниже первого экрана. */
.cbar.deck-bar .wrap{max-width:none}
body:has(#deckViewer){margin:0}
.cbar.deck-bar .cbar-in{height:52px;gap:12px}
.cbar.deck-bar .logo .mark{height:26px}
.deck-fs-btn{display:none}
.js .deck-fs-btn{display:inline-flex}
.deck-fs-btn svg{width:16px;height:16px}
.btn.deck-fs-btn{gap:8px}
@media (max-width:1023px){
  .btn.deck-fs-btn{width:40px;padding:0;justify-content:center}
  .deck-fs-label{display:none}
}
.deck-stage{padding:0;max-width:none}
.deck-frame.deck-live{aspect-ratio:auto;width:100%;height:calc(100vh - 53px - env(safe-area-inset-top,0px));height:calc(100dvh - 53px - env(safe-area-inset-top,0px));min-height:240px;border:0;border-radius:0;box-shadow:none;background:var(--paper)}
.deck-frame.deck-live iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:var(--paper)}
.deck-below{padding-block:20px 40px}
.deck-below .deck-ctrl{margin-top:0}
.deck-notice.err{position:absolute;z-index:3;top:12px;left:50%;transform:translateX(-50%);width:min(560px,calc(100% - 32px));margin:0;box-shadow:var(--notice-shadow);background:var(--bg-raised);border:1px solid var(--danger-soft)}
#deckNotice a{color:inherit;font-weight:600}

/* Полноэкранный режим (Fullscreen API на контейнере рамки) — два отдельных
   правила: браузер отбрасывает целиком правило с неизвестным селектором. */
.deck-frame.deck-live:fullscreen{width:100%;height:100%;min-height:0;border-radius:0;background:var(--letterbox)}
.deck-frame.deck-live:-webkit-full-screen{width:100%;height:100%;min-height:0;border-radius:0;background:var(--letterbox)}

/* Режим показа: рамка поверх всего окна, 100vw × 100dvh; содержимое — внутри
   безопасной области (вырез, полоска «домой»). Полоса и нижний блок скрыты. */
.deck-show .cbar.deck-bar,
.deck-show .deck-below{display:none}
.deck-show .deck-frame.deck-live{position:fixed;inset:0;z-index:80;width:100vw;height:100vh;height:100dvh;min-height:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background:var(--letterbox)}
.deck-show .deck-frame.deck-live iframe{position:static;width:100%;height:100%}
.deck-show body{overflow:hidden}
.deck-phone .deck-end{display:none}

/* Язычок меню просмотра — у края экрана во всех режимах показа (телефон, режим показа,
   полноэкранный, гость), а не в углу, где у материалов свои кнопки. Край (data-edge) и место
   вдоль края (доля 0..1 в --deck-tab-pos) задаёт deck.js; по умолчанию — правый край посередине.
   Видимая часть 28×64, зона нажатия 44×64; язычок не выходит за безопасную область. */
.deck-tab{--deck-tab-pos:.5;--deck-st:env(safe-area-inset-top,0px);--deck-sr:env(safe-area-inset-right,0px);--deck-sb:env(safe-area-inset-bottom,0px);--deck-sl:env(safe-area-inset-left,0px);display:none;position:absolute;z-index:5}
.deck-show .deck-tab,
.deck-fs .deck-tab{display:block}
.deck-tab[data-edge="right"],.deck-tab[data-edge="left"]{top:calc(var(--deck-st) + 8px + (100% - var(--deck-st) - var(--deck-sb) - 80px) * var(--deck-tab-pos))}
.deck-tab[data-edge="top"],.deck-tab[data-edge="bottom"]{left:calc(var(--deck-sl) + 8px + (100% - var(--deck-sl) - var(--deck-sr) - 80px) * var(--deck-tab-pos))}
.deck-tab[data-edge="right"]{right:var(--deck-sr)}
.deck-tab[data-edge="left"]{left:var(--deck-sl)}
.deck-tab[data-edge="top"]{top:var(--deck-st)}
.deck-tab[data-edge="bottom"]{bottom:var(--deck-sb)}
/* Во время перетаскивания язычок идёт за пальцем; после отпускания прилипает к ближайшему краю. */
.deck-tab-held iframe{pointer-events:none}
.deck-tab.deck-tab-drag[data-edge]{left:var(--deck-tab-x,0px);top:var(--deck-tab-y,0px);right:auto;bottom:auto}
.deck-tab-btn{display:flex;align-items:center;justify-content:flex-end;width:44px;height:64px;padding:0;border:0;background:transparent;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.deck-tab[data-edge="left"] .deck-tab-btn{justify-content:flex-start}
.deck-tab[data-edge="top"] .deck-tab-btn,.deck-tab[data-edge="bottom"] .deck-tab-btn{width:64px;height:44px;justify-content:center;align-items:flex-start}
.deck-tab[data-edge="bottom"] .deck-tab-btn{align-items:flex-end}
.deck-tab-drag .deck-tab-btn{cursor:grabbing}
.deck-tab-btn:focus-visible{outline:none}
.deck-tab-face{position:relative;flex:none;width:28px;height:64px;border:1px solid var(--line-strong);border-right:0;border-radius:14px 0 0 14px;background:var(--header-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--tab-shadow);opacity:.7;transition:opacity .2s var(--ease)}
.deck-tab[data-edge="left"] .deck-tab-face{border-right:1px solid var(--line-strong);border-left:0;border-radius:0 14px 14px 0}
.deck-tab[data-edge="top"] .deck-tab-face{width:64px;height:28px;border-right:1px solid var(--line-strong);border-top:0;border-radius:0 0 14px 14px}
.deck-tab[data-edge="bottom"] .deck-tab-face{width:64px;height:28px;border-right:1px solid var(--line-strong);border-bottom:0;border-radius:14px 14px 0 0}
.deck-tab-face .mark{position:absolute;left:50%;top:50%;width:44px;height:auto;max-width:none;transform:translate(-50%,-50%);pointer-events:none;-webkit-user-drag:none}
.deck-tab[data-edge="right"] .deck-tab-face .mark,
.deck-tab[data-edge="left"] .deck-tab-face .mark{transform:translate(-50%,-50%) rotate(-90deg)}
.deck-tab-btn:hover .deck-tab-face,
.deck-tab-btn:focus-visible .deck-tab-face,
.deck-tab-btn[aria-expanded="true"] .deck-tab-face,
.deck-tab-drag .deck-tab-face{opacity:1}
.deck-tab-btn:focus-visible .deck-tab-face{outline:2px solid var(--focus);outline-offset:2px}
.deck-tab-hint{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.deck-menu{position:absolute;left:0;top:0;width:max-content;min-width:208px;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow-y:auto;overscroll-behavior:contain;padding:6px;border-radius:var(--r-md);background:var(--bg-raised);border:1px solid var(--line);box-shadow:var(--pop-shadow);display:flex;flex-direction:column;gap:2px}
.deck-menu[hidden]{display:none}
.deck-menu-form{display:flex;margin:0}
.deck-menu-item{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 14px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--ink);font:inherit;font-size:15px;font-weight:500;text-align:left;text-decoration:none;cursor:pointer}
.deck-menu-item[hidden]{display:none}
.deck-menu-item svg{width:18px;height:18px;color:var(--ink-2)}
.deck-menu-item:hover{background:var(--surface-2)}
.deck-menu-form .deck-menu-item{padding-left:42px}
@media (prefers-reduced-motion:reduce){.deck-tab-face{transition:none}}

/* Владелец */
.deck-theme-slot{display:inline-block;margin-top:10px}
.deck-drawer-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.deck-rot45{transform:rotate(45deg)}
.deck-slug-row{display:flex;align-items:center;gap:8px}
.deck-slug-row .slug{white-space:nowrap}
.deck-hint{color:var(--ink-3);font-size:13px}
.deck-label{font-size:14px;font-weight:600}
.drop{display:block;cursor:pointer}
.deck-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.deck-file:focus-visible + .drop{outline:2px solid var(--focus);outline-offset:2px}
.deck-file-name{display:inline-block;margin-top:8px;font-weight:600;color:var(--ink);word-break:break-all}
.deck-switch-row{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
.deck-switch-row b{font-size:14.5px}
.deck-drawer-actions{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.deck-card-h{font-size:20px;letter-spacing:-.02em}
.deck-wide{width:100%;justify-content:center;margin-top:20px}
.deck-grant{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:2px 0}
.deck-grant + .deck-grant{margin-top:6px}
.deck-revoked{color:var(--ink-3)}
.deck-grant-add{display:flex;gap:6px;align-items:center;margin-top:8px;flex-wrap:wrap}
.deck-select{height:32px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--bg-raised);color:var(--ink);font:inherit;font-size:13.5px;padding:0 8px;max-width:220px}
.deck-filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:20px;font-size:13px;color:var(--ink-3)}
.deck-filters label{display:flex;flex-direction:column;gap:4px}
.deck-filters .deck-select{height:36px}
a.chip.deck-chip{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink)}
a.chip.deck-chip[aria-pressed="true"]{color:var(--cta-fg)}
.deck-section-h{font-size:22px;letter-spacing:-.025em;margin-top:36px}
.deck-footnote{color:var(--ink-3);font-size:13px;margin-top:12px}
.issued .lnk:empty{display:none}
button[aria-busy="true"]{opacity:.7;pointer-events:none}
.two > *{min-width:0}

/* Скачивание: меню форматов в полосе просмотра */
.deck-dl{position:relative}
.deck-dl > summary{list-style:none;cursor:pointer}
.deck-dl > summary::-webkit-details-marker{display:none}
.deck-dl-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:200px;display:flex;flex-direction:column;padding:6px;border-radius:var(--r-md);background:var(--bg-raised);border:1px solid var(--line);box-shadow:var(--pop-shadow-sm)}
.deck-dl-menu a{padding:9px 12px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none;font-size:14px}
.deck-dl-menu a:hover,.deck-dl-menu a:focus-visible{background:var(--surface-hover)}

/* Материалы: набор файлов и форматы скачивания */
.deck-pick{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.deck-pick label.btn{cursor:pointer}
.deck-progress{display:block;margin-top:8px;color:var(--ink-2);font-size:13px}
.drop.deck-over{outline:2px dashed var(--blue);outline-offset:2px}
.deck-formats{display:flex;flex-direction:column;gap:6px}
.deck-format{display:flex;align-items:center;gap:8px;font-size:13px;white-space:nowrap}
.deck-format .switch[disabled]{opacity:.45;cursor:not-allowed}
.deck-attach{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 0}
.deck-attach + .deck-attach{border-top:1px solid var(--line)}
.deck-attach .acts{display:flex;gap:6px;flex-wrap:wrap}
.deck-file:focus-visible + label.btn,
#m-file:focus-visible ~ .drop label[for="m-file"],
#m-folder:focus-visible ~ .drop label[for="m-folder"]{outline:2px solid var(--focus);outline-offset:2px}
.drop .deck-set-err{margin-top:12px;text-align:left}

/* Ссылка для показа: кнопка «QR для зала» в полосе (в режиме показа — пункт меню язычка) */
.deck-qr-btn{display:none}
.js .deck-qr-btn{display:inline-flex}
.btn.deck-qr-btn{gap:8px}
.deck-qr-btn svg{width:16px;height:16px}
@media (max-width:1023px){
  .btn.deck-qr-btn{width:40px;padding:0;justify-content:center}
  .deck-qr-label{display:none}
}

/* Экран QR: на весь экран (внутри контейнера рамки — виден и в полноэкранном режиме).
   Поле кода всегда белое с чёрными модулями: так код читается камерой в обеих темах. */
.deck-qr{position:fixed;inset:0;z-index:95;overflow:auto;background:var(--bg);color:var(--ink);padding:calc(env(safe-area-inset-top,0px) + 24px) calc(env(safe-area-inset-right,0px) + 24px) calc(env(safe-area-inset-bottom,0px) + 24px) calc(env(safe-area-inset-left,0px) + 24px)}
.deck-qr[hidden]{display:none}
.deck-qr-box{position:relative;min-height:100%;display:flex;align-items:center;justify-content:center;gap:clamp(32px,5vw,80px)}
.deck-qr-plate{flex:none;width:min(calc(100vh - 96px),56vw,760px);width:min(calc(100dvh - 96px),56vw,760px);aspect-ratio:1;display:grid;place-items:center;background:var(--paper);border-radius:var(--r-lg);border:1px solid var(--line);box-shadow:var(--qr-shadow);overflow:hidden}
.deck-qr-plate svg{display:block;width:100%;height:100%}
.deck-qr-plate.deck-qr-off svg{opacity:.08}
.deck-qr-plate > *{grid-area:1/1}
.deck-qr-wait{color:var(--qr-muted);font-size:15px;font-weight:500}
.deck-qr-wait[hidden]{display:none}
.deck-qr-side{flex:0 1 420px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.deck-qr-side h2{margin:0;font-size:clamp(26px,2.6vw,40px);line-height:1.1;letter-spacing:-.025em}
.deck-qr-sub{margin:0;color:var(--ink-2);font-size:16px;line-height:1.5}
.deck-qr-link{max-width:100%;padding:12px 16px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--bg-raised);font-size:clamp(15px,1.25vw,18px);font-weight:600;line-height:1.4;word-break:break-all;user-select:all}
.deck-qr-link:empty{display:none}
.deck-qr-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.deck-qr-meta[hidden]{display:none}
.deck-qr-meta .pill{height:34px;padding:0 14px;font-size:15px;font-variant-numeric:tabular-nums}
.deck-qr-opens{color:var(--ink-2);font-size:15px;font-variant-numeric:tabular-nums}
.deck-qr-actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:4px}
.deck-qr-actions[hidden],.deck-qr-confirm[hidden],.deck-qr-ended[hidden],.deck-qr-actions [hidden]{display:none}
.deck-qr-confirm{padding:14px 16px;border-radius:var(--r-md);border:1px solid var(--danger-soft);background:var(--bg-raised)}
.deck-qr-confirm p,.deck-qr-ended p{margin:0;font-size:15px;line-height:1.5}
.deck-qr-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.deck-qr-ended{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--r-md);background:var(--surface-2)}
.deck-qr-side .err{margin:0}
.btn.deck-qr-min{position:absolute;top:0;right:0;gap:8px}
.deck-qr-min svg{width:16px;height:16px}
.deck-qr-open body{overflow:hidden}

/* Телефон и узкое окно: код сверху на всю ширину, текст под ним */
@media (max-width:820px), (max-aspect-ratio:1/1){
  .deck-qr-box{flex-direction:column;justify-content:flex-start;gap:20px;padding-top:52px}
  .deck-qr-plate{width:min(100%,calc(100vh - 360px),640px);width:min(100%,calc(100dvh - 360px),640px);min-width:240px}
  .deck-qr-side{flex:none;width:100%;max-width:640px;align-items:center;text-align:center;gap:12px}
  .deck-qr-side h2{font-size:24px}
  .deck-qr-sub{font-size:15px}
  .deck-qr-meta,.deck-qr-row{justify-content:center}
  .deck-qr-actions,.deck-qr-ended{align-items:center}
}

/* Гость по ссылке для показа: всегда режим показа, язычок меню — на любом устройстве */
.deck-guest .deck-tab{display:block}

/* Владелец: показ по QR у доступа */
.deck-guest-row{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:1.35;color:var(--ink-2)}
.deck-guest{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:200px;margin:4px 0 10px;padding-left:12px;border-left:2px solid var(--line)}
.deck-guest-opts{display:flex;flex-wrap:wrap;gap:8px 12px;font-size:13px;color:var(--ink-3)}
.deck-guest-opts[hidden]{display:none}
.deck-guest-opts label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.deck-num{width:84px}
.deck-guest-link{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}