/* «Факты дня» — лента-сторис.

   Листается сам документ: html получает scroll-snap, каждый слайд — точка
   привязки высотой в экран за вычетом шапки. Так на телефоне прячется
   адресная строка, и нет вложенного скролла, который спорит с внешним.

   На широком экране обложка дня встаёт слева колонкой с оглавлением,
   слайды — по центру в пропорции 9:16, стрелки — справа. */

:root:has(body.fk-page){
  --hdr: 69px;
  scroll-snap-type:y mandatory;
  scroll-padding-top:var(--hdr);
}
@media (max-width:900px){ :root:has(body.fk-page){ --hdr:57px; } }
.fk-page .site-footer{ scroll-snap-align:end; }

.fk{
  --slide-h: calc(100svh - var(--hdr));
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr);
}

/* ---------- Обложка дня ---------- */
.fk-cover{
  height:var(--slide-h);
  scroll-snap-align:start;
  display:flex; align-items:center; justify-content:center;
  padding:12px 12px 14px;
}
.fk-cover-in{
  width:100%; max-width:480px; height:100%;
  display:flex; flex-direction:column; gap:14px; justify-content:safe center; overflow:hidden;
  padding:24px 22px; border-radius:24px;
  background:var(--surface); border:1px solid var(--line);
}
.fk-cover-cap{ font-weight:700; color:var(--clay-deep); font-size:15px; }
.fk-cover h1{ font-size:clamp(34px, min(6svh, 11vw), 52px); line-height:1.05; }
.fk-cover-lede{ color:var(--ink-soft); }
/* Оглавление сжимается первым: навигация по датам под ним видна всегда. */
.fk-toc{
  display:flex; flex-direction:column; border-top:1px solid var(--line);
  flex:0 1 auto; min-height:0; overflow:hidden;
  mask-image:linear-gradient(#000 calc(100% - 24px), transparent);
}
.fk-cover-in > :not(.fk-toc){ flex-shrink:0; }
/* Лента ушла на следующие даты: оглавление, счётчик и соседние даты обложки
   относятся к стартовому дню и только путали бы — прячем, дата в подписи
   уже обновлена скриптом. */
.fk.is-other-day .fk-toc, .fk.is-other-day .fk-cover-lede, .fk.is-other-day .fk-days{ display:none; }
.fk-toc a{
  display:flex; gap:12px; padding:9px 0; border-bottom:1px solid var(--line);
  color:var(--ink); text-decoration:none; font-size:15px; line-height:1.35; font-weight:600;
}
.fk-toc a:hover{ color:var(--accent); }
.fk-toc i{ display:block; font-style:normal; font-weight:500; font-size:12.5px; color:var(--ink-soft); }
.fk-toc a[aria-current]{ color:var(--accent); }
.fk-toc a[aria-current] .fk-toc-n{ background:var(--accent); color:#fff; }
.fk-toc-n{
  flex:none; width:24px; height:24px; margin-top:2px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent-deep); font-size:12.5px; font-weight:700;
}
.fk-days{ display:flex; gap:8px; flex-wrap:wrap; }
.fk-days .btn{ gap:4px; min-height:44px; }
.fk-flip{ display:inline-flex; transform:rotate(180deg); }
.fk-hint{ font-size:13.5px; color:var(--ink-soft); }
.fk-hint-keys{ display:none; }

@media (max-width:1099px){
  .fk-hint::after{ content:" ↑"; }
}
@media (max-width:1099px) and (max-height:860px){
  .fk-toc i{ display:none; }
}
@media (max-width:1099px) and (max-height:720px){
  .fk-toc a{ padding:7px 0; }
  .fk-cover-in{ gap:10px; padding:18px 20px; }
}
/* Низкий телефон: оглавление не влезает в обложку вместе с заголовком. */
@media (max-width:1099px) and (max-height:600px){
  .fk-toc{ display:none; }
}

/* ---------- Финальный слайд ---------- */
.fk-end .fk-card{ justify-content:center; }
.fk-cal{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
.fk-cal a, .fk-cal span{
  min-height:44px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; font-weight:600; font-size:15px; font-variant-numeric:tabular-nums;
}
.fk-cal a{ background:var(--bg); color:var(--ink); text-decoration:none; }
.fk-cal a:hover, .fk-cal a[aria-current]{ background:var(--accent); color:#fff; }
.fk-cal-off{ color:var(--ink-faint); }

/* ---------- Стрелки и подгрузка ---------- */
.fk-arrows{ display:none; }
.fk-loading{ height:60px; display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-size:14px; }


/* ---------- Широкий экран ---------- */
@media (min-width:1100px){
  .fk{
    /* Обложка — фиксированная колонка, стрелки — узкая: так обложке хватает
       места на любом широком экране, а пустота не копится справа. */
    grid-template-columns:minmax(300px,400px) auto 56px;
    justify-content:center;
    column-gap:48px;
    max-width:var(--wrap); margin:0 auto; padding:0 var(--pad-x);
  }
  .fk-cover{
    grid-column:1; grid-row:1;
    position:sticky; top:var(--hdr); align-self:start;
    scroll-snap-align:none;
    justify-content:flex-start; padding:24px 0;
  }
  /* overflow:visible обязателен: в липкой колонке Chrome срезал первую
     букву строк под overflow:hidden. */
  .fk-cover-in{ height:auto; max-width:380px; background:none; border:0; padding:0; justify-content:flex-start; overflow:visible; }
  .fk-hint-touch{ display:none; }
  .fk-hint-keys{ display:inline; }

  .fk-feed{ grid-column:2; }
  .fk-end{ grid-column:2; }

  .fk-arrows{
    grid-column:3; grid-row:1;
    position:sticky; top:var(--hdr); align-self:start;
    height:var(--slide-h);
    display:flex; flex-direction:column; justify-content:center; gap:10px;
  }
  .fk-arrows .btn-icon{ width:48px; height:48px; border:1px solid var(--line); border-radius:50%; background:var(--bg); }
  .fk-arrows .btn-icon:hover{ background:var(--surface-2); }
  .fk-up .ic{ transform:rotate(-90deg); }
  .fk-down .ic{ transform:rotate(90deg); }
}

/* Телефон боком: слайд в экран не помещается — привязка мягкая. */
@media (orientation:landscape) and (max-height:500px){
  :root:has(body.fk-page){ scroll-snap-type:y proximity; }
  .fk-cover{ height:auto; min-height:var(--slide-h); }
  .fk-cover-in{ overflow:visible; }
}

/* Невысокий ноутбук: обложке не хватает высоты на подписи оглавления. */
@media (min-width:1100px) and (max-height:800px){
  .fk-toc i{ display:none; }
  .fk-cover h1{ font-size:40px; }
  .fk-cover-in{ gap:10px; }
}