/* ================================================================
   site.css — Общие стили: хедер, футер, иконка пользователя
   666-999.com — Rashidradov Ltd
   Подключать в каждой странице:
     <link rel="stylesheet" href="/css/site.css?v=017">
   Заменяет индивидуальные стили .header-block и .footer-block
================================================================ */

/* ── Общие CSS-переменные ─────────────────────────────────────── */
:root{
  /* «Рассвет над заснеженной долиной» — градиент #dawn из DESIGN.md музыкального
     аппа: тёплое золото рассвета (#ECC152) → холодная синь заснеженной долины
     (#74B8FF), через снежные полутона (#FBEFCC / #DCEBFF). Насыщенный акцент. */
  --gradient-dawn:      linear-gradient(180deg, #ECC152 0%, #FBEFCC 44%, #DCEBFF 72%, #74B8FF 100%);
  --gradient-dawn-soft: linear-gradient(180deg, #FBEFCC 0%, #EAF3FF 55%, #DCEBFF 100%);

  /* БАЗА темы: 2 цвета, из которых выводится вся «рассветная» схема (поверхность + бары + модалки).
     Переопредели эти два токена на :root (в т.ч. из настроек юзера в Phase 2) — и перекрасится всё. */
  --surface-top:    #fffcf2;   /* верхний цвет градиента поверхности (тёплый) */
  --surface-bottom: #f2f9ff;   /* нижний цвет (прохладный) */

  /* Фон центрального блока: концы — из базы; тёплая середина — фирменный профиль dawn.
     Очень светлый; для крупных фоновых блоков (центральная панель /login/ и т.п.). */
  --gradient-reader-bg: linear-gradient(180deg, var(--surface-top) 0%, #faf7f0 32%, #f4f8fc 66%, var(--surface-bottom) 100%);

  /* Плашка ключевых кнопок «холод → тепло» (эталон Reader-аппа,
     mockups/read-gate.html): холодный голубой слева → тёплый беж справа. */
  --gradient-btn-plate: linear-gradient(90deg, #C3D7EB 0%, #D3D2C4 52%, #DFD2B4 100%);

  /* Бары — полупрозрачные тинты, КОМПОЗИТЯТСЯ поверх поверхности → автоматически едут за её
     цветом: верхний над --surface-top (тёплый конец), нижний над --surface-bottom (прохладный),
     под-бар (filter/search/sort под верхним) — лёгкая вуаль поверх поверхности у верхнего края.
     Единый источник для всех страниц с «основной блок + бары»; меняешь здесь — меняется везде. */
  --bar-warm-bg:   rgba(255,248,230,.45);  --bar-warm-line: rgba(214,188,150,.5);
  --bar-cool-bg:   rgba(228,242,255,.45);  --bar-cool-line: rgba(150,190,235,.48);
  --bar-sub-bg:    rgba(246,251,255,.55);  --bar-sub-line:  rgba(170,205,238,.28);

  /* ── Семантические семейства секций (закладки / пепел) — ВЫВОДЯТСЯ из базы --surface-*.
     BURN = поверхность + деликатное тепло; ASH = поверхность в ЧИСТЫЙ серый; CARD = нейтраль («среднее»).
     Крутишь --fire или коэффициенты — перекрашиваются все секции; в Phase 2 поедут за фоном юзера. */
  --fire: #d99a63;                                                        /* мягкий тёплый акцент «горения» (деликатный) */
  --burn-bg:     color-mix(in oklab, var(--surface-top) 91%, var(--fire));
  --burn-bg-2:   color-mix(in oklab, var(--surface-top) 85%, var(--fire));
  --burn-line:   color-mix(in oklab, var(--surface-top) 58%, var(--fire));
  --burn-accent: oklch(from var(--fire) 0.68 0.085 h);                     /* прогресс/бейдж — деликатный тёплый */
  --burn-text:   oklch(from var(--fire) 0.47 0.075 h);
  --burn-text-2: oklch(from var(--fire) 0.30 0.05 h);
  --ash-bg:      oklch(from var(--surface-bottom) 0.978 0 h);              /* c=0 → чистый серый; притушен (светлее) — пепел менее заметен */
  --ash-bg-2:    oklch(from var(--surface-bottom) 0.955 0 h);              /* фон шапки пепла — тоже бледнее прежнего (было .925) */
  --ash-line:    oklch(from var(--surface-bottom) 0.87 0 h);              /* рамки бледнее (было .80) — менее заметны */
  --ash-fill:    oklch(from var(--surface-bottom) 0.60 0 h);
  --ash-text:    oklch(from var(--surface-bottom) 0.60 0 h);              /* текст/каретка/автор/% бледнее (было .50) */
  --ash-text-2:  oklch(from var(--surface-bottom) 0.48 0 h);              /* заголовок карточки бледнее (было .38) */
  --card-bg:     color-mix(in oklab, #ffffff 80%, var(--surface-bottom));
  --card-bg-2:   color-mix(in oklab, #ffffff 60%, var(--surface-bottom));  /* hover */
  --card-line:   oklch(from var(--surface-bottom) 0.85 0.04 h);
  --card-line-2: oklch(from var(--surface-bottom) 0.75 0.085 h);
  --card-text:   oklch(from var(--surface-bottom) 0.55 0.075 h);

  /* Вуали карточек в области прокрутки — полупрозрачные версии семейных тонов. Карточка = вуаль
     поверх зафиксированной градиент-подложки .bm-scroll → цвет живо считывается по позиции карточки
     во вьюпорте (вверху — тёплый конец фона, внизу — прохладный; при скролле перекрашивается). */
  --burn-veil: rgba(255,255,255,.15);   /* лёгкая нейтральная вуаль — карточка чуть светлее подложки-жара */
  --card-veil: rgba(255,255,255,.15);
}

/* ── Ключевая кнопка платформы — плашка «холод→тепло» + белый шрифт со свечением.
   Единый вид главных CTA (вход/регистрация/оплата/save…). Задаёт ТОЛЬКО «шкуру»
   (фон/рамка/текст); размеры/раскладку берёт кнопка-носитель (напр. .submit-btn).
   Забрано из Reader-аппа, чтобы обновить ключевые кнопки по всему сайту. ── */
.btn-key{
  background: var(--gradient-btn-plate);
  border: 1px solid rgba(175,168,140,.5);
  box-shadow: 0 1px 3px rgba(120,130,140,.16);
  color: #fff;
  text-shadow: 0 0 9px rgba(255,255,255,.85), 0 0 20px rgba(255,255,255,.6), 0 1px 2px rgba(110,110,90,.5);
  letter-spacing: .03em;
}
.btn-key:hover:not(:disabled){ box-shadow: 0 2px 9px rgba(120,130,140,.30); filter: brightness(1.03); }
.btn-key:disabled{ opacity: .5; cursor: not-allowed; }
/* Спиннер на светлой плашке — тёмный, иначе не виден */
.btn-key .spinner{ border-color: rgba(90,90,70,.25); border-top-color: rgba(90,90,70,.85); }

/* ── «Рассветная» схема фона: переиспользуемые классы (см. токены выше) ──
   .dawn-surface   — центральная карточка (градиент холод→тепло снизу вверх)
   .dawn-bar-top   — верхний бар (тёплый тон); клеится к существующим *-bar
   .dawn-bar-bottom — нижний бар-подвал (прохладный тон) + раскладка со ссылками */
.dawn-surface    { background: var(--gradient-reader-bg); }
.dawn-bar-top    { background: var(--bar-warm-bg); border-bottom: 1px solid var(--bar-warm-line); }
.dawn-bar-bottom {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 20px;
  background: var(--bar-cool-bg);
  border-top: 1px solid var(--bar-cool-line);
  font-family: 'Jura', sans-serif;
}
.dawn-bar-bottom a {
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em;
  color: rgba(4,18,58,.50); text-decoration: none; text-transform: uppercase; transition: color .18s;
}
.dawn-bar-bottom a:hover { color: rgba(20,80,210,.85); }

/* ── Хедер: два столбца ───────────────────────────────────────── */

.header-block {
  flex-shrink: 0;
  width: 100%; max-width: 640px;
  border: 1.5px solid rgba(130,200,255,.50);
  border-radius: 12px;
  background: rgba(225,244,255,.42);
  box-shadow: 0 2px 12px rgba(0,50,130,.08), inset 0 1px 0 rgba(255,255,255,.55);
  display: flex;
  align-items: flex-start;   /* иконка и текст выравниваются по верху */
}

/* header-main занимает доступную ширину рядом с иконкой (flex:1).
   Правый padding — только комфортный отступ от иконки-соседа. */
.header-main {
  flex: 1 1 0;
  min-width: 0;
  padding: max(10px,1.6dvh) 14px max(10px,1.6dvh) 22px;
}
.header-main h1 {
  font-size: clamp(12px, 2vw, 18px);
  font-weight: 700;
  font-family: 'Jura', sans-serif;   /* pin: без этого шапка наследует body-шрифт; на Space-Grotesk-body страницах (нет 700) wordmark синтезировал фальш-жирный */
  color: rgba(4,18,58,.95);
  letter-spacing: .07em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;      /* всегда одна строка */
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 10px rgba(200,230,255,.85), 0 0 20px rgba(255,255,255,.60);
}
/* Ссылки-логотип в шапке: подчёркнуты по умолчанию, без подчёркивания при наведении.
   Хлебные крошки (author/book) сохраняют инлайновый text-decoration:none — не трогаются. */
.header-main h1 a       { text-decoration: underline; text-decoration-color: #fff; text-underline-offset: 2px; text-shadow: 0 0 4px rgba(255,255,255,.95), 0 0 9px rgba(255,255,255,.9); }
.header-main h1 a:hover { text-decoration: none; }
/* Разделители // и / — то же белое свечение, что и у ссылок-логотипа */
.header-main h1 span[style*="color:#fff"] { text-shadow: 0 0 4px rgba(255,255,255,.95), 0 0 9px rgba(255,255,255,.9); }
.home-link {
  color: rgba(4,80,175,.95);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(4,80,175,.38);
  transition: color .2s, border-bottom-color .2s;
}
.home-link:hover { color: rgba(0,120,225,1); border-bottom-color: rgba(0,120,225,.65); }
.header-logo {
  height: 1.4em; width: auto;
  vertical-align: middle; margin-right: .26em; display: inline;
  filter: drop-shadow(0 1px 8px rgba(200,230,255,.80));
}
.header-main p {
  margin-top: max(3px,.5dvh);
  font-size: clamp(11px, 1.5vw, 13px);
  color: rgba(12,36,85,.78);
  letter-spacing: .03em;
  line-height: 1.35;
  text-shadow: 0 1px 6px rgba(200,228,255,.70);
}
.app-dl-link {
  color: rgba(0,105,220,1); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px;
  white-space: nowrap; transition: color .2s;
}
.app-dl-link:hover { color: rgba(0,75,195,1); text-decoration: none; }

/* Правый столбец — иконка пользователя (flex-поток, не absolute) */
.header-user {
  flex-shrink: 0;              /* не сжимается — всегда занимает свою ширину */
  padding: max(10px,1.6dvh) 12px 8px 8px; /* top совпадает с padding-top .header-main */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.user-action-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
.user-icon-img {
  width: 18px; height: 18px;
  object-fit: contain;
  display: block;
}
.user-icon-svg {
  width: 18px; height: 18px;
}
.user-action-text {
  font-family: 'Jura', sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(6,40,100,.75);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}
.header-user:hover .user-action-text { color: rgba(4,30,90,.92); }

/* ── Футер ────────────────────────────────────────────────────── */

.footer-block {
  flex-shrink: 0;
  margin-top: auto;
  width: 100%; max-width: 640px;
  padding: 8px 18px;
  border: 1px solid rgba(120,195,250,.42);
  border-radius: 10px;
  background: rgba(220,242,255,.42);
  box-shadow: 0 1px 8px rgba(0,50,130,.06), inset 0 1px 0 rgba(255,255,255,.55);
}
.footer-links { text-align: right; }
.footer-links a, .footer-links span {
  font-size: 12px; color: rgba(6,28,78,.92); text-decoration: none;
  margin: 0 5px; text-shadow: 0 1px 4px rgba(200,228,255,.60);
}
.footer-links a { text-decoration: underline; }
.footer-links a:hover { color: rgba(0,95,210,1); text-decoration: none; }
.links-desktop a::before { content: '['; } .links-desktop a::after  { content: ']'; }
.links-desktop { display: block; } .links-mobile { display: none; }
.footer-links .copy {
  font-size: 11px; color: rgba(6,28,78,.65);
  display: block; text-align: right; white-space: nowrap; margin-top: 3px;
  text-shadow: 0 1px 4px rgba(200,228,255,.50);
}
.copy-brand-link {
  color: rgba(4,70,160,1); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 2px;
  transition: color .2s;
}
.copy-brand-link:hover { color: rgba(0,100,220,1); text-decoration: none; }
.copy-link {
  color: rgba(15,130,62,.95);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
  transition: color .2s;
}
.copy-link:hover { text-decoration: none; }

/* ── Адаптив для хедера ───────────────────────────────────────── */

@media (orientation: portrait) {
  /* Страница: 18px→8px по бокам, освобождаем место для контента */
  .page { padding-left: 8px !important; padding-right: 8px !important; }

  /* Header: правый padding — комфортный отступ между текстом и иконкой */
  .header-main {
    padding: max(8px,1.4dvh) 8px max(8px,1.4dvh) 10px;
  }
  .header-main p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .header-user {
    padding: max(8px,1.4dvh) 8px 6px 6px;
  }
  .user-icon-img, .user-icon-svg { width: 15px; height: 15px; }
  .user-action-text { font-size: 7px; letter-spacing: .09em; }

  .links-desktop { display: none; }
  .links-mobile {
    display: flex; align-items: center;
    justify-content: space-between; line-height: 1.5;
  }
  .links-mobile a { margin: 0; font-size: max(10px,1.1svh); color: rgba(6,28,78,.92); }
  .links-mobile a::before { content: '['; } .links-mobile a::after { content: ']'; }
  .links-mobile .msep { font-size: max(10px,1.1svh); color: rgba(6,28,78,.55); }
  .links-mobile::before, .links-mobile::after { content: '·'; font-size: max(10px,1.1svh); color: rgba(6,28,78,.40); }
  .footer-links .copy { font-size: max(10px,1.1svh); }
  .header-main h1 { font-size: clamp(11px,3.5vw,17px); }
  .header-main p  { font-size: clamp(10px,2.8vw,13px); }
}
/* Очень узкие телефоны portrait < 420px */
@media (orientation: portrait) and (max-width: 420px) {
  .header-main { padding: 8px 4px 8px 10px; }
  .header-user { padding: 8px 6px 4px 4px; }
  .user-icon-img, .user-icon-svg { width: 14px; height: 14px; }
  .user-action-text { font-size: 7px; letter-spacing: .08em; }
  .header-main h1 { font-size: clamp(10px,3.2vw,14px); letter-spacing: .04em; }
}

@media (max-width: 700px) and (orientation: landscape) {
  .header-main { padding: 7px 8px 7px 14px; }
  .header-main h1 { font-size: 12px; letter-spacing: .05em; }
  .header-main p  { font-size: 10px; margin-top: 2px; }
  .header-user { padding: 7px 10px 4px 4px; gap: 3px; }
  .user-icon-svg { width: 20px; height: 20px; }
  .user-action-text { font-size: 7.5px; }
  .footer-block { padding: 5px 14px; }
  .footer-links a, .footer-links span, .footer-links .copy { font-size: 10px; }
}
@media (min-width: 700px) and (max-width: 850px) and (max-height: 400px) {
  .header-main { padding: 5px 12px 5px 14px; }
  .header-main h1 { font-size: 12px; }
  .header-main p  { display: none; }
  .header-user { padding-top: 5px; }
  .footer-block { padding: 4px 14px; }
  .footer-links .copy { display: none; }
  .footer-links a, .footer-links span { font-size: 10px; margin: 0 3px; }
}

/* ══════════════════════════════════════════════════════════════
   AUTH-GATE: светлая тема (.ag-light)
   Применяется к upgrade-prompt на страницах с белым/стеклянным фоном.
   Использование: <div id="auth-gate" class="ag-light"></div>
   Не применять на тёмных страницах (manage-books/book и т.п.)
   v0.009
══════════════════════════════════════════════════════════════ */

.ag-light .ag-title      { color: rgba(4,18,58,.80)  !important; }
.ag-light .ag-msg        { color: rgba(4,18,58,.62)  !important; }
.ag-light .ag-msg strong { color: rgba(4,18,58,.90)  !important; }

.ag-light .ag-btn-primary {
  background:   rgba(105,132,210,.85)           !important;
  border:       1.5px solid rgba(150,180,240,.55) !important;
  color:        rgba(248,252,255,.98)           !important;
}
.ag-light .ag-btn-primary:hover:not(:disabled) {
  background:   rgba(122,148,220,.92)           !important;
  box-shadow:   0 0 18px rgba(100,150,255,.28)  !important;
}
.ag-light .ag-btn-secondary {
  background:   rgba(180,200,225,.30) !important;
  border-color: rgba(80,120,180,.35)  !important;
  color:        rgba(4,18,58,.60)     !important;
}
.ag-light .ag-btn-secondary:hover {
  background:   rgba(150,180,215,.45) !important;
  color:        rgba(4,18,58,.82)     !important;
}