/* Общие цвета, шрифты и каркас страниц Раковальни. Подключается вместе с /ui/nav.js
   и на страницах соцсети, и в разделе ТВ. Структура страницы:
   <div class="rk-shell"><rk-nav active="news"></rk-nav><main class="rk-main">…</main></div> */
:root {
  color-scheme: light;
  --rk-wood-900:#e5e7eb;--rk-wood-800:#fff;--rk-wood-600:#e3e5e9;--rk-wood-400:#c4c8cf;
  --rk-olive-900:#f4f5f7;--rk-olive-800:#fff;--rk-olive-700:#eef0f3;--rk-olive-600:#e5eaf1;--rk-olive-500:#c8d2df;
  --rk-cream:#fff;--rk-cream-2:#eef0f3;--rk-muted:#717781;--rk-ink:#292d33;--rk-ink-muted:#717781;
  --rk-amber:#4f6580;--rk-red:#c94c58;--rk-elevated:#eef0f3;
  --rk-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--rk-font-brand:var(--rk-font);
  --rk-header-height:64px;--rk-nav-width:66px;--rk-nav-height:0px;--rk-gap:20px;--rk-shell-width:1240px;--rk-reading-width:1080px;
}
@media (width < 768px) {
  :root {
    --rk-header-height: calc(60px + env(safe-area-inset-top));
    --rk-nav-width: 0px;
    /* Android меняет текущий inset при показе/скрытии системной области.
       Максимальный inset удерживает панель на одной высоте между страницами. */
    --rk-tabs-bottom: max(8px, env(safe-area-inset-bottom, 0px), env(safe-area-max-inset-bottom, 0px));
    --rk-nav-height: calc(60px + var(--rk-tabs-bottom) + 8px);
    --rk-gap: 12px;
  }
}

html { background: var(--rk-olive-900); -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--rk-font); color: var(--rk-ink); background: var(--rk-olive-900); line-height: 1.45; font-size: 14px; }

.rk-shell {
  display: grid;
  grid-template-columns: var(--rk-nav-width) minmax(0, 1fr);
  grid-template-areas: "header header" "nav main";
  align-content: start;
  column-gap: var(--rk-gap);
  width: 100%;
  max-width: var(--rk-shell-width);
  min-height: 100dvh;
  margin: 0 auto;
  padding: 0 var(--rk-gap) var(--rk-gap);
}
.rk-main { grid-area: main; min-width: 0; padding-top: var(--rk-gap); padding-bottom: calc(var(--rk-nav-height) + var(--rk-gap)); }
/* Полноэкранные экраны (переписка, комната ТВ) прячут нижнюю панель атрибутом hide-tabs. */
.rk-shell:has(rk-nav[hide-tabs]) { --rk-nav-height: 0px; }
@media (width < 768px) {
  .rk-shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "header" "main"; padding: 0; }
  .rk-main { padding-left: var(--rk-gap); padding-right: var(--rk-gap); }
}

.rk-card {
  background: var(--rk-cream);
  color: var(--rk-ink);
  border: 1px solid var(--rk-wood-600);
  box-shadow: none;
  padding: 20px;
  border-radius:20px;
}

.section-heading { display:flex;align-items:center;gap:7px; }
.section-back { display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;min-height:28px;padding:4px;border:0;border-radius:3px;background:transparent;color:#6e89a6;cursor:pointer;vertical-align:middle;text-decoration:none; }
.section-back:hover { background:#8aa0ba20;text-decoration:none; }
.section-back svg { display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
@media(width < 768px) { .section-back { width:44px;height:44px;min-height:44px; } }
/* Горизонтальный телефон шире 768px остаётся сенсорным устройством. */
@media(pointer:coarse) { .section-back { width:44px;height:44px;min-height:44px; } }
.album-name { display:inline-flex;align-items:center;gap:6px;min-width:0; }
.album-symbol { display:inline-block;width:17px!important;height:17px!important;aspect-ratio:1;object-fit:contain;flex:none;vertical-align:middle; }
.entity-number { display:inline;font-size:10px;font-weight:normal;color:#9aa7b5;opacity:.55;margin-left:6px;white-space:nowrap; }
html:not([data-show-numbers=true]) .entity-number { display:none!important; }

/* Общая геометрия выбранного оформления «Графит». */
.rk-card { box-shadow:0 2px 10px #00000003; }
.section-back { color:var(--rk-ink-muted);border-radius:12px; }
.entity-number { color:var(--rk-ink-muted); }
@media(width < 768px) { .rk-card { padding:17px;border-radius:18px; } }

/* Каркас доступен до Shadow CSS: не даём SVG развернуться без размеров. */
rk-nav:not([data-nav-ready]) { display:block;grid-area:header;min-height:var(--rk-header-height,64px);font:13px/1.5 var(--rk-font,system-ui,sans-serif);color:var(--rk-ink); }
rk-nav:not([data-nav-ready]):not([data-nav-failed])::before { content:"Загрузка меню…";display:flex;align-items:center;min-height:var(--rk-header-height,64px);color:var(--rk-ink-muted);padding:0 12px; }