/* ============================================================
   legal.css — единые стили юридических страниц «Штурман»
   (privacy / consent / terms / cookies / cookie-consent /
    consent-notifications / consent-info / consent-ads)
   Премиум-редизайн: оглавление-сайдбар, прогресс чтения, нумерованные
   секции, аккуратные таблицы. Адаптив ПК/планшет/мобайл. Без внешних
   шрифтов (на странице о ПДн нельзя слать IP визитёра шрифт-провайдеру).
   Шапку/подвал/оглавление ставит legal.js.
   ============================================================ */
:root{
  --lg-bg:#eef1f6; --lg-bg-2:#e7ebf2;
  --lg-card:#ffffff; --lg-ink:#0f172a; --lg-ink-2:#475569; --lg-ink-3:#6b7689;
  --lg-line:#e6e9ef; --lg-line-2:#eef1f5;
  --lg-accent:#4f46e5; --lg-accent-ink:#4338ca; --lg-accent-soft:#eef0fe;
  --lg-warn-bg:#fff7ed; --lg-warn-line:#f59e0b; --lg-warn-ink:#b45309;
  --lg-radius:20px; --lg-measure:760px; --lg-toc-w:248px;
  --lg-shadow:0 1px 2px rgba(15,23,42,.04), 0 30px 60px -36px rgba(15,23,42,.34);
  --lg-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --lg-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; color:var(--lg-ink);
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(79,70,229,.07), transparent 60%),
    linear-gradient(180deg, var(--lg-bg), var(--lg-bg-2));
  background-attachment:fixed;
  font:16px/1.7 var(--lg-sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"tnum" 0, "kern" 1;
}

/* ── Прогресс чтения (вверху) ── */
.lg-progress{position:fixed; top:0; left:0; height:3px; width:0; z-index:60;
  background:linear-gradient(90deg,#6366f1,#818cf8); box-shadow:0 0 10px rgba(99,102,241,.5); transition:width .08s linear}

/* ── Шапка ── */
.lg-top{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:13px clamp(16px,4vw,30px);
  background:rgba(255,255,255,.82); -webkit-backdrop-filter:saturate(1.4) blur(12px); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--lg-line);
}
.lg-brand{display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:17px; letter-spacing:-.02em; color:var(--lg-ink); text-decoration:none}
.lg-logo{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:9px;
  background:linear-gradient(150deg,#6366f1,#4f46e5); color:#fff; font-size:16px; font-weight:900; box-shadow:0 6px 16px -6px rgba(79,70,229,.7)}
.lg-brand small{display:block; font-size:11px; font-weight:600; color:var(--lg-ink-3); letter-spacing:.01em; margin-top:-2px}
.lg-back{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:700; color:var(--lg-accent-ink);
  text-decoration:none; white-space:nowrap; padding:7px 13px; border:1px solid var(--lg-line); border-radius:10px; background:#fff; transition:.15s}
.lg-back:hover{border-color:var(--lg-accent); background:var(--lg-accent-soft)}

/* ── Каркас: оглавление + документ ── */
.lg-shell{
  max-width:calc(var(--lg-measure) + var(--lg-toc-w) + 56px);
  margin:clamp(18px,4vw,44px) auto; padding:0 clamp(14px,3vw,24px);
  display:grid; grid-template-columns:var(--lg-toc-w) minmax(0,1fr); gap:44px; align-items:start;
}

/* ── Оглавление (сайдбар, липкое) ── */
.lg-toc{position:sticky; top:84px; max-height:calc(100vh - 104px); overflow:auto; padding:4px 4px 16px}
.lg-toc-h{font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--lg-ink-3); margin:6px 0 12px 12px}
.lg-toc-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px}
.lg-toc-list a{
  display:flex; gap:9px; align-items:baseline; padding:7px 12px; border-radius:9px; text-decoration:none;
  color:var(--lg-ink-3); font-size:13px; line-height:1.35; border-left:2px solid transparent; transition:.13s;
}
.lg-toc-list a:hover{color:var(--lg-ink); background:rgba(99,102,241,.06)}
.lg-toc-list a .n{flex:0 0 auto; font-weight:800; font-variant-numeric:tabular-nums; color:var(--lg-accent); opacity:.65; min-width:15px}
.lg-toc-list a.active{color:var(--lg-accent-ink); background:var(--lg-accent-soft); border-left-color:var(--lg-accent); font-weight:600}
.lg-toc-list a.active .n{opacity:1}
.lg-toc-scroll::-webkit-scrollbar{width:8px}
.lg-toc::-webkit-scrollbar{width:8px}
.lg-toc::-webkit-scrollbar-thumb{background:var(--lg-line); border-radius:8px}

/* мобильное оглавление (collapsible) — скрыто на ПК */
.lg-toc-m{display:none}

/* ── Документ ── */
.lg-doc{
  min-width:0; max-width:var(--lg-measure); background:var(--lg-card);
  border:1px solid var(--lg-line); border-radius:var(--lg-radius);
  padding:clamp(24px,5vw,56px); box-shadow:var(--lg-shadow);
}
.lg-doc h1{font-size:clamp(26px,4.4vw,38px); line-height:1.12; letter-spacing:-.025em; margin:0 0 14px; font-weight:850; color:var(--lg-ink)}
.lg-doc > p:first-of-type, .lg-doc h1 + p{color:var(--lg-ink-3)}
.lg-doc h2{
  font-size:clamp(19px,2.7vw,24px); line-height:1.25; letter-spacing:-.015em; margin:42px 0 12px; padding-top:26px;
  border-top:1px solid var(--lg-line); font-weight:800; color:var(--lg-ink); scroll-margin-top:84px;
}
.lg-doc h2:first-of-type{border-top:none; padding-top:8px}
.lg-doc h3{font-size:16.5px; margin:26px 0 9px; font-weight:750; color:var(--lg-ink); letter-spacing:-.01em}
.lg-doc p{margin:0 0 13px; color:var(--lg-ink-2)}
.lg-doc strong,.lg-doc b{color:var(--lg-ink); font-weight:700}
.lg-doc ul,.lg-doc ol{margin:0 0 15px; padding-left:4px; color:var(--lg-ink-2); list-style:none}
.lg-doc li{position:relative; margin:8px 0; padding-left:26px}
.lg-doc ul li::before{content:""; position:absolute; left:7px; top:11px; width:6px; height:6px; border-radius:50%; background:var(--lg-accent); opacity:.55}
.lg-doc ol{counter-reset:lgol}
.lg-doc ol li{counter-increment:lgol}
.lg-doc ol li::before{content:counter(lgol); position:absolute; left:0; top:1px; width:19px; height:19px; border-radius:6px;
  background:var(--lg-accent-soft); color:var(--lg-accent-ink); font-size:11px; font-weight:800; display:grid; place-items:center; font-variant-numeric:tabular-nums}
.lg-doc a{color:var(--lg-accent-ink); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px; transition:.12s}
.lg-doc a:hover{color:var(--lg-accent); text-decoration-thickness:2px}
.lg-doc hr{border:none; border-top:1px solid var(--lg-line); margin:26px 0}
.lg-doc small,.lg-doc .lg-meta{color:var(--lg-ink-3); font-size:13.5px}

/* таблицы (инвентаризация ПДн, cookie) */
.lg-wrap-x{overflow-x:auto; margin:16px 0 20px; border:1px solid var(--lg-line); border-radius:14px; -webkit-overflow-scrolling:touch}
.lg-doc table{width:100%; border-collapse:collapse; font-size:13.5px; min-width:560px}
.lg-wrap-x table{margin:0}
.lg-doc th,.lg-doc td{padding:11px 13px; text-align:left; vertical-align:top; color:var(--lg-ink-2); border-bottom:1px solid var(--lg-line-2)}
.lg-doc thead th{background:#f3f5f9; color:var(--lg-ink); font-weight:750; font-size:12px; letter-spacing:.01em; position:sticky; top:0; border-bottom:1px solid var(--lg-line)}
.lg-doc tbody tr:nth-child(even) td{background:#fafbfd}
.lg-doc tbody tr:last-child td{border-bottom:none}
.lg-doc td code,.lg-doc code{background:var(--lg-accent-soft); color:var(--lg-accent-ink); border-radius:6px; padding:1px 6px; font-size:12.5px; font-family:var(--lg-mono)}

/* ── Блок реквизитов «🚨 ОБЯЗАТЕЛЬНО ЗАПОЛНИТЬ» ── */
.lg-req{margin:20px 0; padding:18px 20px; background:var(--lg-warn-bg);
  border:1px solid #fcd9a8; border-left:5px solid var(--lg-warn-line); border-radius:14px}
.lg-req-h{margin:0 0 12px; font-weight:900; color:var(--lg-warn-ink); font-size:13.5px; letter-spacing:.01em}
.lg-req dl{margin:0; display:grid; grid-template-columns:max-content 1fr; gap:9px 16px}
.lg-req dt{font-weight:700; color:var(--lg-ink)}
.lg-req dd{margin:0; color:#9a3412; font-weight:700; font-feature-settings:"tnum"}
@media (max-width:560px){ .lg-req dl{grid-template-columns:1fr; gap:3px 0} .lg-req dd{margin-bottom:10px} }

/* плейсхолдеры + примеры */
.lg-fill{color:#b91c1c; font-weight:800; background:#fef2f2; border:1px solid #fecaca; border-radius:6px; padding:1px 6px}
.lg-eg{display:block; color:#6b7280; font-weight:400; font-style:italic; font-size:12px; margin-top:4px}

/* ── Подвал ── */
.lg-foot{max-width:calc(var(--lg-measure) + var(--lg-toc-w) + 56px); margin:8px auto clamp(28px,6vw,64px); padding:0 clamp(14px,3vw,24px); color:var(--lg-ink-3); font-size:13.5px}
.lg-foot-nav{display:flex; flex-wrap:wrap; gap:8px; padding:22px 0 16px; border-top:1px solid var(--lg-line)}
.lg-foot-nav a{color:var(--lg-ink-2); text-decoration:none; font-weight:600; font-size:12.5px; padding:6px 11px; border:1px solid var(--lg-line); border-radius:999px; background:rgba(255,255,255,.6); transition:.13s}
.lg-foot-nav a:hover{color:var(--lg-accent-ink); border-color:var(--lg-accent); background:var(--lg-accent-soft)}
.lg-foot-nav a[aria-current="page"]{color:#fff; background:var(--lg-accent); border-color:var(--lg-accent)}
.lg-foot-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:8px 0 14px}
.lg-cookie-btn{flex:0 0 auto; padding:10px 16px; border:1px solid var(--lg-line); border-radius:11px; background:#fff; color:var(--lg-ink-2); font-weight:700; font-size:13px; cursor:pointer; font-family:inherit; transition:.13s}
.lg-cookie-btn:hover{border-color:var(--lg-accent); color:var(--lg-accent-ink); background:var(--lg-accent-soft)}
.lg-foot-note{flex:1 1 280px; line-height:1.55}
.lg-foot-copy{padding:13px 0 0; border-top:1px solid var(--lg-line); line-height:1.6}

/* ── Тёмная тема ── */
@media (prefers-color-scheme:dark){
  :root{
    --lg-bg:#0a0c10; --lg-bg-2:#0c0e13; --lg-card:#11151c; --lg-ink:#e8eef7; --lg-ink-2:#aeb9c8;
    --lg-ink-3:#828d9f; --lg-line:#1e2530; --lg-line-2:#171c24;
    --lg-accent:#818cf8; --lg-accent-ink:#a5b4fc; --lg-accent-soft:#191b2e;
    --lg-warn-bg:#231a0f; --lg-warn-line:#d97706; --lg-warn-ink:#fbbf24;
    --lg-shadow:0 1px 2px rgba(0,0,0,.3), 0 30px 60px -36px rgba(0,0,0,.7);
  }
  body{background:radial-gradient(1100px 520px at 50% -8%, rgba(129,140,248,.10), transparent 60%), linear-gradient(180deg,#0a0c10,#0c0e13)}
  .lg-top{background:rgba(17,21,28,.8); border-bottom-color:var(--lg-line)}
  .lg-back,.lg-cookie-btn,.lg-foot-nav a{background:#11151c}
  .lg-doc thead th{background:#171c24}
  .lg-doc tbody tr:nth-child(even) td{background:#0f141b}
  .lg-fill{color:#fca5a5; background:#2a1414; border-color:#5b2424}
  .lg-eg{color:#9aa4b2}
  .lg-req{border-color:#3a2a12}
  .lg-req dd{color:#fbbf24}
}

/* ── Адаптив: планшет/мобайл — оглавление сворачивается над документом ── */
@media (max-width:980px){
  .lg-shell{grid-template-columns:1fr; gap:0; max-width:var(--lg-measure)}
  .lg-toc{display:none}
  .lg-toc-m{display:block; margin:0 0 16px; border:1px solid var(--lg-line); border-radius:14px; background:var(--lg-card); overflow:hidden; box-shadow:var(--lg-shadow)}
  .lg-toc-m summary{list-style:none; cursor:pointer; padding:14px 18px; font-weight:800; font-size:14px; color:var(--lg-ink); display:flex; align-items:center; justify-content:space-between; gap:10px}
  .lg-toc-m summary::-webkit-details-marker{display:none}
  .lg-toc-m summary::after{content:"▾"; color:var(--lg-accent); transition:.2s}
  .lg-toc-m[open] summary::after{transform:rotate(180deg)}
  .lg-toc-m .lg-toc-list{padding:4px 10px 12px}
  .lg-toc-m .lg-toc-list a{font-size:13.5px; padding:9px 12px}
}
@media (max-width:560px){
  body{font-size:15.5px}
  .lg-brand small{display:none}
  .lg-doc{border-radius:16px; padding:20px 17px}
  .lg-doc h1{font-size:clamp(23px,7vw,28px)}
  .lg-doc ul,.lg-doc ol{padding-left:0}
  .lg-foot-nav a{font-size:12px}
}

/* ── Печать ── */
@media print{
  body{background:#fff; color:#000}
  .lg-progress,.lg-top,.lg-toc,.lg-toc-m,.lg-foot-nav,.lg-cookie-btn,.lg-back{display:none !important}
  .lg-shell{display:block; max-width:none; margin:0; padding:0}
  .lg-doc{box-shadow:none; border:none; max-width:none; margin:0; padding:0}
  .lg-req{border:1px solid #999}
  a{color:#000; text-decoration:underline}
}