/* Оформление юридических страниц (/terms, /privacy, /refund).
   Только то, чего нет в общей теме gg-theme.css — всё остальное её классы. */
.gg-legal{max-width:48rem}
.gg-legal-panel{
  padding:32px 30px 30px;border-radius:18px;border:1px solid var(--gg-border);
  background:var(--gg-glass);box-shadow:var(--gg-shadow-panel);
}
.gg-legal-title{
  margin:0 0 6px;font-size:var(--gg-text-2xl);font-weight:700;color:#f4f6f8;
  line-height:var(--gg-leading-tight);letter-spacing:var(--gg-tracking-tight);
}
.gg-legal-meta{margin:0 0 26px;color:#818d9f;font-size:var(--gg-text-sm)}
.gg-legal-panel h2{
  margin:30px 0 10px;font-size:var(--gg-text-lg);font-weight:650;color:#e8ecf1;
  line-height:var(--gg-leading-tight);
}
.gg-legal-panel h2:first-of-type{margin-top:0}
.gg-legal-panel p{margin:0 0 12px;color:var(--gg-text);line-height:var(--gg-leading-body)}
.gg-legal-panel ul{margin:0 0 12px;padding-left:20px;color:var(--gg-text)}
.gg-legal-panel li{margin-bottom:7px;line-height:var(--gg-leading-body)}
.gg-legal-panel a{color:var(--gg-link);text-decoration:none}
.gg-legal-panel a:hover{color:var(--gg-link-hover);text-decoration:underline}
.gg-legal-panel b{color:#f4f6f8;font-weight:650}

/* Красная рамка — для единственного по-настоящему необратимого факта:
   потерянный токен восстановить нельзя. Тот же приём, что на странице выдачи
   токена: человек должен споткнуться об это предупреждение глазами. */
.gg-legal-warn{
  margin:14px 0 16px !important;padding:13px 15px;border-radius:12px;
  border:1px solid rgba(248,113,113,.5);background:rgba(248,113,113,.07);
  color:#fca5a5 !important;
}
.gg-legal-warn b{color:#fecaca !important}

.gg-legal-table{
  width:100%;margin:0 0 14px;border-collapse:collapse;
  font-size:var(--gg-text-sm);color:var(--gg-text);
}
.gg-legal-table th,.gg-legal-table td{
  padding:9px 12px;border:1px solid var(--gg-border);text-align:left;vertical-align:top;
}
.gg-legal-table th{background:rgba(29,155,240,.08);color:#e8ecf1;font-weight:600}

.gg-legal-nav{
  display:flex;flex-wrap:wrap;gap:18px;justify-content:center;
  margin-top:34px;padding-top:20px;border-top:1px solid var(--gg-border);
}
/* ★ Навигация внизу документа и подвал входа — не проза, а ряд ссылок:
   стандарт просит цель не меньше 24 px даже под мышью. */
.gg-legal-nav a{color:var(--gg-link);text-decoration:none;font-size:var(--gg-text-sm);display:inline-flex;align-items:center;min-height:36px;padding:0 2px}
.gg-legal-nav a:hover{color:var(--gg-link-hover)}

/* Подвал со ссылками на документы — на странице получения токена. */
.gg-join-legal{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:20px 0 0;
  font-size:var(--gg-text-xs);
}
.gg-join-legal a{
  color:#818d9f;text-decoration:none;display:inline-flex;align-items:center;min-height:32px;
  padding:7px 15px;border-radius:999px;border:1px solid var(--gg-border);background:var(--gg-glass);
  transition:color .15s ease,border-color .15s ease,background .15s ease;
}
.gg-join-legal a:hover{color:var(--gg-link);border-color:var(--gg-link);background:var(--gg-accent-soft)}

/* ─────────────────────────── телефон ─────────────────────────── */
@media (max-width:640px){
  .gg-legal-panel{padding:22px 16px 22px;border-radius:16px}
  .gg-legal-title{font-size:1.375rem}
  .gg-legal-meta{margin-bottom:20px}
  .gg-legal-panel h2{margin:24px 0 8px}
  .gg-legal-panel ul{padding-left:18px}

  /* ★★ Таблица превращается в карточки. Три колонки на ширине телефона
     оставляют примерно по 100 px на колонку, и русский текст рвётся по
     одному-два слова в строке: «Необратимый / отпечаток / токена и кода».
     Читать это невозможно, а речь о документе, который человек открывает
     ровно затем, чтобы прочитать.

     Строка становится карточкой, подпись колонки берётся из data-label и
     печатается над значением мелкими прописными. Ширины больше не делятся:
     каждое значение получает всю строку. */
  .gg-legal-table,
  .gg-legal-table tbody,
  .gg-legal-table tr,
  .gg-legal-table td{display:block;width:100%}
  .gg-legal-table{border-collapse:separate;border-spacing:0;font-size:var(--gg-text-sm)}
  /* Строка заголовков не нужна: подписи переехали в каждую ячейку. */
  .gg-legal-table tr:first-child{display:none}
  .gg-legal-table tr{
    margin-bottom:10px;padding:4px 0;
    border:1px solid var(--gg-border);border-radius:12px;
    background:rgba(8,10,14,.35);
  }
  .gg-legal-table tr:last-child{margin-bottom:0}
  .gg-legal-table td{border:0;padding:8px 13px}
  .gg-legal-table td + td{border-top:1px solid rgba(125,140,160,.14)}
  .gg-legal-table td::before{
    content:attr(data-label);display:block;margin-bottom:2px;
    font-size:.6875rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
    color:#818d9f;
  }
  /* У ячейки без подписи (если таблицу когда-нибудь расширят) пустой
     псевдоэлемент не должен занимать строку. */
  .gg-legal-table td:not([data-label])::before{display:none}

  /* Тап-зоны. 5 px по вертикали — это высота кнопки 26 px: попасть пальцем
     можно, но промахнуться проще. Ниже — минимум 40 px у всего, что нажимают. */
  .gg-legal-nav{gap:0;flex-direction:column;align-items:stretch;margin-top:28px}
  .gg-legal-nav a{
    padding:12px 4px;text-align:center;
    border-bottom:1px solid rgba(125,140,160,.12);
  }
  .gg-legal-nav a:last-child{border-bottom:0}
  .gg-join-legal{gap:7px;margin-top:18px}
  .gg-join-legal a{padding:7px 13px}
}

/* Совсем узкие экраны (iPhone SE и подобные): режем поля ещё немного,
   иначе на 320 px от панели остаётся полоса текста в 250 px. */
@media (max-width:380px){
  .gg-legal-panel{padding:20px 13px 20px}
  .gg-legal-table td{padding:8px 11px}
}

/* ══════════════════════════════════════════════════════════════════════════
   СВЕТЛАЯ ОБОЛОЧКА ДОКУМЕНТОВ
   Заголовки, выделения и предупреждение заданы здесь светлыми числами
   (#f4f6f8, #e8ecf1, #fca5a5) — под тёмный лист. В светлой теме это белое по
   белому: на скриншоте у страницы «Условия» не видно ни названия, ни
   номеров разделов, а предупреждение о невосстановимости токена — самый
   важный абзац документа — читается как розовая полоса.
   ══════════════════════════════════════════════════════════════════════════ */
html.gg-theme-light .gg-legal-title{color:#0f172a}
html.gg-theme-light .gg-legal h2,
html.gg-theme-light .gg-legal h3{color:#0f172a}
html.gg-theme-light .gg-legal b,
html.gg-theme-light .gg-legal strong{color:#0f172a}
html.gg-theme-light .gg-legal-meta{color:#5b6676}
/* ★ У .gg-legal-warn цвет объявлен со !important — светлый вариант обязан
   отвечать тем же, иначе предупреждение остаётся розовым по розовому. */
html.gg-theme-light .gg-legal-warn{
  border-color:rgba(185,28,28,.4)!important;background:rgba(185,28,28,.06)!important;color:#991b1b!important;
}
html.gg-theme-light .gg-legal-warn b{color:#7f1d1d!important}
html.gg-theme-light .gg-legal table th{background:rgba(2,132,199,.08);color:#0f172a}
html.gg-theme-light .gg-legal table td{color:#0f172a}
html.gg-theme-light .gg-join-legal a{color:#5b6676}