/* Глинка — /changelog/ («Что нового»).
   Loaded after legal.css, which already supplies the :root tokens, the nav,
   the reading column, the prose styles and the footer. This file adds only
   what the entry list itself needs. Light theme only, like the rest of the
   static site (AUTHORING). */

/* scroll-margin lands a /changelog/#slug link clear of the sticky nav. It sits
   on .entry, not on the h2, because .entry is the element carrying the id and
   therefore the one the browser scrolls to. */
.changelog .entry{
  padding:30px 0 34px;
  border-top:1px solid var(--line-soft);
  scroll-margin-top:78px;
}
.changelog .entry:first-of-type{ border-top:0; padding-top:6px; }
.changelog .entry:last-of-type{ padding-bottom:6px; }

/* A second (or third) entry of the same day. The date is printed once per day
   (RUS-395), so these carry no .entry-date and sit closer to the sibling above
   — 18px against the 30px a new day gets. The rule is the same soft line at
   the same weight: the day boundary reads as «more air», not as a different
   kind of divider, which is what keeps three notes looking like one release
   day rather than three separate ones. */
.changelog .entry-cont{
  padding-top:18px;
  border-top:1px solid var(--line-soft);
}

.changelog .entry-date{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted); margin:0;
}

.changelog .entry h2{
  font-size:clamp(19px,2.2vw,23px);
  margin:8px 0 12px;
}
/* The heading takes the slot the date would have used, so it loses the 8px that
   was air under that date. Must stay AFTER the rule above: both selectors are
   (0,2,1), so this one only wins by coming later — moved up, it is dead and the
   continuation gap silently stays 8px wider than intended. */
.changelog .entry-cont h2{ margin-top:0; }

/* The title links to the entry's own page (RUS-475 DP8) and must go on reading
   as a title. Left to .legal a it would be terracotta and underlined — 44
   headings that look like body links. Ink, no underline, the accent on hover:
   the /scenarios/ card title's treatment. (0,2,2) beats .legal a's (0,1,1). */
.changelog .entry h2 a{ color:inherit; text-decoration:none; }
.changelog .entry h2 a:hover{ color:var(--accent); }

.changelog .entry p:last-child{ margin-bottom:0; }

/* An anchored entry has to clear the sticky bar, which is still three different
   heights — but «Сценарии» (RUS-404) made the bar reach each of them EARLIER, so
   both widths below moved even though none of the three heights did. The wrap
   point went 957 -> 1054 (five links plus the two CTAs need 1055px to sit on one
   line), and the link list itself now takes a second text row at 559 rather than
   458. Re-measured in Chrome 152 on this page:

     >=1055    65px   one row
     560-1054  96px   two rows: brand + CTAs, links below
     <=559    126px   three: the link list itself takes a second text row

   Each value keeps the ~13px of air that the 78px default leaves at desktop
   width, so a linked entry lands just under the bar rather than against it.
   Leaving these at 957/458 would not have shown up as a broken-looking page:
   between 958 and 1054 the bar is two rows tall while the desktop 78px is still
   in force, so a /changelog/#slug link would simply land the entry's heading
   underneath the bar — the exact failure the offsets exist to prevent.

   RUS-866 swapped the five labels for the landing's (shorter: no «Юридические
   документы»), so both points moved down again. Re-measured in Chrome on this
   page and on /legal/oferta/:

     >=981     65px   one row
     486-980   96px   two rows
     481-485  126px   three rows
     474-480   95px   two again — the <=480 query's 16px gutter buys the room back
     <=473    126px   three rows

   The 474-480 band keeps the three-row offset: 44px more air than it needs,
   which only lands the entry lower. Too SMALL an offset is the failure;
   one rule instead of a min-width sandwich for a seven-pixel band. */
@media (max-width:980px){
  .changelog .entry{ scroll-margin-top:109px; }
}
@media (max-width:485px){
  .changelog .entry{ scroll-margin-top:139px; }
}

.changelog .entry-img{ margin:18px 0 4px; }
/* `video` is here with `img` rather than in a rule of its own (RUS-470): an
   entry's loop is the SAME frame as its poster, at the same place in the same
   column, so anything that made the two draw differently would be a seam the
   reader sees the instant the file finishes loading. The fallback <img> INSIDE
   the <video> is matched by this selector too and is harmless — it is only
   ever laid out when the video element itself is not. */
.changelog .entry img,
.changelog .entry video{
  display:block; max-width:100%; height:auto;
  border:1px solid var(--line); border-radius:12px;
}

/* A FILM AND ITS POSTER ARE THE SAME FRAME, NOT THE SAME SHAPE (RUS-470/471).
   `ask.mp4` is 1280x720: the 1280x664 product frame the poster shows, plus a
   56 px caption band drawn under it. The <video> is sized from the MP4's own
   header, so the box is the film's 16:9 from first paint and the page does not
   reflow when the metadata arrives — but that leaves the poster, which is
   shorter, to be placed inside a taller box. Centred (the default) it would sit
   ~16 px down at this column width and then jump up the instant the first frame
   painted. `top` puts it where the product frame will be, and the paper under
   it is the band's own colour, so starting the loop ADDS the caption rather
   than moving the picture.

   `contain` is already how a <video> paints its content, and is stated anyway:
   it is what makes `object-position` mean anything, and it applies to the
   poster as much as to the frames.

   The BOX's shape is not set here: build_changelog writes `aspect-ratio` onto
   the element inline, from the mp4's own header, because the ratio is per-file
   data and because a <video> otherwise borrows its poster's shape until the
   media metadata arrives and then reflows the page. This rule is what makes
   that taller box correct to look at. */
.changelog .entry video{
  object-fit:contain; object-position:center top; background:var(--paper);
}

/* A portrait image is a phone screenshot, and it is capped here (RUS-389).
   mobile.png is a whole 780x1688 phone viewport, which fills 720x1556 in this
   column — taller than two screens, and the tallest thing on the page. The
   class is decided at build time from the PNG's own IHDR rather than from a
   flag on the entry, so every future portrait shot arrives already capped.

   560px is the phone at about a third of native: the bottom bar, the mic button
   and the sheet all stay legible while the entry fits on one screen. width:auto
   against the height:auto above is what preserves the aspect ratio once the
   height is the binding constraint — the image lands at 259x560 — and the auto
   margins centre that narrower box in the 720px column. The border and radius
   are inherited from the rule above: at this size the phone reads as a device
   rather than as a floating column, which is exactly what they are there for. */
.changelog .entry-img-portrait img,
.changelog .entry-img-portrait video{
  max-height:560px; width:auto; margin:0 auto;
}
/* On a phone, the viewport is the better ruler than a fixed 560px. */
@media (max-width:680px){
  .changelog .entry-img-portrait img,
  .changelog .entry-img-portrait video{ max-height:70vh; }
}

/* «Аналог в Notion: X» — the parity footer (RUS-385). Mono and muted, like the
   date at the top of the entry, so it reads as one more piece of metadata about
   the entry rather than as a closing sentence of it. No border, no icon, no
   Notion mark: the name is used nominatively and nothing here should look like
   a badge.

   18px of top margin is one value for both endings an entry can have. It
   collapses against the 15px below a paragraph and against the 4px below
   .entry-img, so the gap above the footer is the same whether the entry ends in
   prose or in a screenshot — and slightly wider than the 15px paragraph rhythm,
   which is what sets the line apart without drawing a rule to do it. */
.changelog .entry-notion{
  margin:18px 0 0;
  font-family:var(--mono); font-size:0.85em;
  color:var(--muted);
}

/* ---------- table of contents ---------- */
/* ONE <nav> serves both presentations (RUS-383 DP3). Below 1100px it is the
   body of a collapsed <details> between the h1 and the first entry; at 1100px
   and up the same element is the sticky right rail and the summary is styled
   away. Nothing is duplicated, so the two can never drift apart.

   Revealing the rail needs ::details-content. A closed <details> hides its body
   with content-visibility, which nothing else can override — display:contents
   and friends stopped working when Chrome 128 moved details rendering into that
   pseudo-element. The @supports guard is deliberate rather than defensive: a
   browser that does not know ::details-content skips the whole rail block and
   keeps the collapsible list at every width, which is a working table of
   contents instead of an empty 220px column. */

.toc-inline{ margin:0 0 30px; border-bottom:1px solid var(--line-soft); }
.toc-inline > summary{
  cursor:pointer; padding:0 0 13px;
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);
  transition:color .15s ease;
}
.toc-inline > summary:hover{ color:var(--accent); }

.toc-month{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted); margin:20px 0 7px;
}
.toc-month:first-child{ margin-top:0; }

.toc ol{ list-style:none; margin:0 0 4px; padding:0; }
.toc a{
  display:flex; align-items:baseline; gap:9px;
  padding:5px 0 5px 11px; border-left:2px solid transparent;
  font-size:13.5px; line-height:1.45; color:var(--muted-strong);
  transition:color .15s ease, border-color .15s ease;
}
.toc a:hover{ color:var(--ink); }
/* The rule is painted on a border that is always there, so marking the current
   entry moves no text sideways. */
.toc a[aria-current="true"]{ color:var(--accent); border-left-color:var(--accent); }
/* min-width reserves the widest badge («10 сен», 40.92px measured in Chrome at
   1280) so every title in the rail starts at one x. Two rows need it: the
   continuation row of a multi-entry day, whose badge is empty and would
   otherwise collapse to nothing and pull its title 41px left (RUS-395 DP4 — the
   span alone keeps the gap, not the width); and a single-digit day («9 сен»),
   which was already 6.81px narrower than a two-digit one and left the rail
   quietly ragged. One value fixes both. */
.toc-day{
  flex:none; min-width:41px; font-family:var(--mono); font-size:11px;
  letter-spacing:0.02em; color:var(--muted);
}
.toc a[aria-current="true"] .toc-day{ color:var(--accent); }

@supports selector(::details-content){
  @media (min-width:1100px){
    /* .legal-col caps the reading column at 760px for the legal pages; the
       changelog needs room for a second track, so it widens here and nowhere
       else (named trap 1 — legal.css stays untouched). */
    .changelog-col{
      display:grid;
      grid-template-columns:minmax(0,760px) 220px;
      gap:0 56px;
      max-width:1076px;
    }
    /* Three rows in the reading column — crumbs, h1, entries — because the
       crumbs are a sibling of the header rather than a child of it (they must
       stay outside .legal to keep the muted breadcrumb styling the doc pages
       have). The rail spans all three so it still rides the whole column. */
    .changelog-col > .crumbs{ grid-column:1; grid-row:1; }
    .changelog-title{ grid-column:1; grid-row:2; }
    .changelog-col > .changelog{ grid-column:1; grid-row:3; }

    .toc-inline{ grid-column:2; grid-row:1 / span 3; margin:0; border-bottom:0; }
    .toc-inline > summary{ display:none; }
    /* height:100% is what gives the rail its travel: ::details-content is only
       as tall as the nav by default, and position:sticky can go no further than
       its containing block. Filling both grid rows lets .toc ride the whole
       length of the entry list. */
    .toc-inline::details-content{
      content-visibility:visible; display:block; height:100%;
    }

    .toc{
      position:sticky; top:78px;          /* clears the sticky page nav */
      max-height:calc(100vh - 100px); overflow:auto;
      /* The rail follows the highlight (RUS-386). The easing lives here rather
         than in the script: the observers only ever write .scrollTop, so there
         is no JS animation to keep in step with the page's own smooth scroll. */
      scroll-behavior:smooth;
    }
  }
}

/* Placed after the @supports block so it wins on source order — same specificity.
   A reader who has asked for less motion gets the rail jumping straight to the
   active entry instead of gliding to it; the position it ends at is identical. */
@media (prefers-reduced-motion:reduce){
  .toc{ scroll-behavior:auto; }
}

/* ---------- an entry's own page, /changelog/<slug>/ (RUS-475) ---------- */
/* The page carries `.changelog` and wraps the entry in a `.entry`, so every
   image, video, portrait and parity rule above applies unchanged — the entry
   renders exactly as it does on the list. What it must NOT inherit is the
   list's rhythm: .entry's padding and top rule, and the first-/last-of-type
   trims, all assume a run of sibling entries, and here there is one (named
   trap 6). These tie with `.changelog .entry:first-of-type` at (0,3,0) and win
   by coming later. There is no .changelog-col on this page, so the >=1100 grid
   and the rail never apply. */
.changelog.entry-page > .entry{ padding:0; border-top:0; }

/* The date sits over the h1 as it sits over an h2 on the list; the h1 keeps
   legal.css's size and takes only the air the h2 had under the date. */
.changelog.entry-page h1{ margin:10px 0 18px; }

/* «Есть обновление: …» — under the date, before the h1, on every page of a
   series but its newest. A tinted block rather than a line of prose: it is the
   one thing on an older page saying the page is not the whole story. */
.changelog .entry-update{
  margin:14px 0 0; padding:11px 15px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:10px;
  font-size:15px; line-height:1.5;
}
.changelog .entry-update a{ text-decoration:none; font-weight:500; }
.changelog .entry-update a:hover{ text-decoration:underline; }
.changelog .entry-update + h1{ margin-top:18px; }

/* «История функции». The heading speaks in the metadata voice — mono, muted,
   the rail's month label — because it labels a list rather than opening a
   section of prose; the dates line up in a fixed column so the titles do. */
.changelog .entry-series{
  margin:36px 0 0; padding-top:24px; border-top:1px solid var(--line-soft);
}
.changelog .entry-series h2{
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);
  margin:0 0 10px;
}
.changelog .entry-series ol{ list-style:none; margin:0; padding:0; }
.changelog .entry-series li{
  display:flex; align-items:baseline; gap:14px; padding:4px 0;
  font-size:15px; line-height:1.5;
}
.changelog .entry-series-date{
  flex:none; min-width:124px;
  font-family:var(--mono); font-size:12px; letter-spacing:0.02em; color:var(--muted);
}
.changelog .entry-series li[aria-current="page"]{ color:var(--ink); font-weight:500; }

/* Earlier / later, by the list's order. «Позже» keeps to the right edge even
   when it is alone (the oldest entry has no «Раньше»). */
.changelog .entry-pager{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 28px;
  margin:36px 0 0; padding-top:24px; border-top:1px solid var(--line-soft);
  font-size:15px; line-height:1.5;
}
.changelog .entry-pager a{ max-width:calc(50% - 14px); }
.changelog .entry-next{ margin-left:auto; text-align:right; }

/* The two buttons: /scenarios/' CTA row, rule and all. Outside
   <article class="legal"> so .legal a never paints them as prose links. */
.entry-cta{
  margin-top:44px; padding-top:30px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
}

@media (max-width:680px){
  .changelog .entry-series li{ flex-direction:column; gap:0; }
  .changelog .entry-pager{ flex-direction:column; }
  .changelog .entry-pager a{ max-width:none; }
  .changelog .entry-next{ margin-left:0; text-align:left; }
  .entry-cta{ gap:10px; }
  .entry-cta .btn{ flex:1 1 100%; justify-content:center; }
}