/* Общий стиль разделов: документация, журнал изменений, галерея.
   Палитра и типографика — те же переменные, что в legal.css, чтобы сайт
   читался одним целым. Отдельный файл, потому что здесь есть таблицы,
   код и сетка галереи, которых на юридических страницах нет. */

:root{
  --bg:#f4f6fb;--card:#fff;--ink:#1b2330;--muted:#697386;--line:#e3e8f0;
  --brand:#3b5bdb;--brand-ink:#2f49b0;--code-bg:#f7f9fc;--code-ink:#2f3a4d;
  --shadow:0 20px 50px -20px rgba(27,35,48,.22);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0e1320;--card:#161d2c;--ink:#e8ecf3;--muted:#93a0b5;--line:#26303f;
    --brand:#5f78ea;--brand-ink:#7c90f0;--code-bg:#111827;--code-ink:#c9d4e5;
    --shadow:0 24px 60px -24px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:880px;margin:0 auto;padding:36px 24px 64px}
.wrap.wide{max-width:1080px}

.top{
  display:flex;align-items:center;gap:11px;margin:0 0 30px;
  color:var(--ink);text-decoration:none;font-weight:700;font-size:19px;
}
.mark{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--brand);color:#fff}

.crumb{font-size:13px;color:var(--muted);margin:0 0 18px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{text-decoration:underline}

.card{padding:34px 40px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}

h1{font-size:29px;line-height:1.2;margin:0 0 11px;letter-spacing:-.015em}
h2{font-size:19px;margin:32px 0 10px;letter-spacing:-.01em}
h3{font-size:15.5px;margin:22px 0 7px}
p,li{font-size:15px;line-height:1.68}
p{margin:0 0 14px}
ul,ol{margin:0 0 16px;padding-left:22px}
li{margin:0 0 6px}
a{color:var(--brand-ink)}
.lead{color:var(--muted);margin-bottom:26px;font-size:16px}

code{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  font-size:13px;background:var(--code-bg);color:var(--code-ink);
  padding:2px 6px;border-radius:5px;border:1px solid var(--line);
}
pre{
  margin:0 0 18px;padding:15px 17px;overflow-x:auto;
  background:var(--code-bg);border:1px solid var(--line);border-radius:11px;
}
pre code{background:none;border:0;padding:0;font-size:12.5px;line-height:1.6}

table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:14px}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:650;color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}
td code{font-size:12.5px}
.tablewrap{overflow-x:auto;margin:0 0 20px}
.tablewrap table{margin:0}

.notice{
  padding:14px 16px;margin:0 0 20px;border-radius:11px;font-size:14.5px;line-height:1.6;
  background:color-mix(in srgb,var(--brand) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--brand) 25%,transparent);
}
.notice p:last-child{margin:0}

/* сетка ссылок на разделы */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin:0 0 22px}
.tile{
  display:block;padding:18px 20px;text-decoration:none;color:inherit;
  background:var(--card);border:1px solid var(--line);border-radius:13px;
  transition:border-color .15s,transform .15s;
}
.tile:hover{border-color:var(--brand);transform:translateY(-1px)}
.tile b{display:block;font-size:15.5px;margin:0 0 5px}
.tile span{display:block;font-size:13.5px;color:var(--muted);line-height:1.55}

/* галерея */
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin:0 0 22px}
figure{margin:0;background:var(--card);border:1px solid var(--line);border-radius:13px;overflow:hidden}
figure img{display:block;width:100%;height:auto;background:var(--code-bg)}
figcaption{padding:11px 14px;font-size:13px;color:var(--muted);line-height:1.5;border-top:1px solid var(--line)}

a.shot{display:block;position:relative;cursor:zoom-in;line-height:0}
a.shot::after{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .15s;
  background:rgba(59,91,219,.14); box-shadow:inset 0 0 0 2px var(--brand);
}
a.shot:hover::after,a.shot:focus-visible::after{opacity:1}

/* просмотр снимка поверх страницы (gallery.js) */
.lb-lock{overflow:hidden}
.lightbox{
  position:fixed; inset:0; z-index:100; display:none;
  align-items:center; justify-content:center; gap:8px; padding:24px;
  background:rgba(8,11,18,.92); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.lightbox.on{display:flex}
.lb-stage{margin:0;max-width:min(1280px,100%);max-height:100%;display:flex;flex-direction:column;gap:10px;background:none;border:0;border-radius:0}
.lb-stage img{
  display:block; max-width:100%; max-height:calc(100vh - 120px);
  width:auto; height:auto; border-radius:10px; background:#0e1320;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9); transition:opacity .12s;
}
.lb-stage.loading img{opacity:.45}
.lb-stage figcaption{
  padding:0; border:0; text-align:center; color:#c2ccdc; font-size:13.5px; line-height:1.5;
}
.lb-close{
  position:absolute; top:16px; right:16px; display:grid; place-items:center;
  width:38px; height:38px; padding:0; cursor:pointer; border-radius:9px; color:#e8ecf3;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
}
.lb-nav{
  flex:none; display:grid; place-items:center; width:44px; height:44px; padding:0;
  cursor:pointer; border-radius:50%; color:#e8ecf3;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
}
.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.2)}
@media(max-width:600px){
  .lightbox{padding:12px}
  .lb-nav{position:absolute;bottom:18px}
  .lb-prev{left:18px} .lb-next{right:18px}
}

/* плеер записей интерфейса (см. player.js) */
.playerwrap{margin:0 0 22px}
.player{
  position:relative; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:#0e1320; aspect-ratio:16/9;
}
.player video{display:block; width:100%; height:100%; object-fit:cover; background:#0e1320}
.play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  border:0; padding:0; width:100%; height:100%; cursor:pointer;
  background:center/cover no-repeat var(--poster,none);
}
.play::before{content:""; position:absolute; inset:0; background:rgba(14,19,32,.42)}
.play span{
  position:relative; display:flex; align-items:center; gap:10px; padding:12px 20px 12px 17px;
  background:rgba(255,255,255,.94); color:#1b2330; border-radius:999px;
  font-size:14px; font-weight:700; box-shadow:0 8px 26px -8px rgba(0,0,0,.5);
  transition:transform .15s;
}
.play:hover span{transform:scale(1.04)}
.play.gone{display:none}
.playfoot{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-top:9px; font-size:12.5px; color:var(--muted); flex-wrap:wrap;
}

/* выбор качества — появляется только когда уровней больше одного.
   bottom подобран так, чтобы не налезать на встроенную панель управления
   видео (~40 px): при bottom:10px кнопка садится прямо на неё. */
.quality{position:absolute; right:10px; bottom:54px; z-index:2}
.qbtn{
  display:inline-flex; align-items:center; gap:6px; padding:6px 11px;
  font-family:inherit; font-size:12.5px; font-weight:600; line-height:1;
  color:#fff; cursor:pointer; border-radius:8px;
  background:rgba(14,19,32,.72); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .15s;
}
.qbtn:hover{background:rgba(14,19,32,.9)}
.qmenu{
  position:absolute; right:0; bottom:calc(100% + 6px); display:none;
  min-width:126px; padding:5px; border-radius:10px;
  background:rgba(14,19,32,.95); border:1px solid rgba(255,255,255,.18);
  box-shadow:0 12px 32px -12px rgba(0,0,0,.7);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.quality.open .qmenu{display:block}
.qitem{
  display:block; width:100%; padding:7px 10px; text-align:left; cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:600; line-height:1;
  color:#e8ecf3; background:none; border:0; border-radius:6px;
}
.qitem:hover{background:rgba(255,255,255,.1)}
.qitem.on{color:#8ea0f5}

/* журнал изменений */
.rel{padding:0 0 4px;margin:0 0 26px;border-bottom:1px solid var(--line)}
.rel:last-child{border-bottom:0}
.relhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 10px}
.relhead h2{margin:0;font-size:18px}
.ver{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;padding:3px 8px;border-radius:6px;background:var(--code-bg);border:1px solid var(--line);color:var(--muted)}
.date{font-size:13px;color:var(--muted)}

.meta{font-size:13px;color:var(--muted);margin-top:32px;padding-top:18px;border-top:1px solid var(--line)}
.nav{display:flex;gap:10px 15px;flex-wrap:wrap;margin-top:26px;font-size:13px}
.nav a{text-decoration:none}
.nav a:hover{text-decoration:underline}

@media(max-width:600px){
  .wrap{padding:22px 16px 44px}
  .card{padding:26px 22px}
  h1{font-size:25px}
  .shots{grid-template-columns:1fr}
}