/* Глинка — /scenarios/ («Сценарии»).
   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 an
   article and the list of articles need. Light theme only, like the rest of the
   static site (AUTHORING). */

/* ---------- the article column ---------- */
/* legal.css caps the reading column at 760px (680px of text inside its 40px
   gutters). An article is mostly figures, and a screenshot of a workspace needs
   more than 680px before the sidebar in it stops being a smudge — so the column
   widens to 720px of content here and nowhere else, which is also the width the
   /changelog/ grid happens to leave its entries. That 720 is the number the
   shot preset is derived from: >=1440px wide is exactly 2x it (AUTHORING). */
.scenario-col{ max-width:800px; }

/* ---------- article ---------- */
/* «Обновлено 15 сентября 2026». Mono and muted, the same metadata voice as the
   changelog's entry date, and placed under the h1 rather than above it: the
   title is what the reader came for, the date only tells them whether to trust
   it. margin-top is negative against .legal h1's 18px so the two read as one
   block instead of as a heading and a first paragraph. */
.scenario .scenario-date{
  margin:-10px 0 30px;
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:0.02em; color:var(--muted);
}

/* ---------- figures ---------- */
/* width:100% with the intrinsic width/height attributes on the <img> is what
   keeps a lazy-loaded figure from shifting the text under it as it arrives: the
   browser reserves the right box from the ratio before a byte of image lands.
   height:auto is what lets it: without it the attribute height would be taken
   literally once the width is overridden. */
.scenario-fig{ margin:26px 0 30px; }
.scenario-fig img{
  display:block; width:100%; height:auto;
  border:1px solid var(--line); border-radius:12px;
  background:var(--paper-soft);
}
/* An article figure links to its own file (RUS-663; build_scenarios.figure_links),
   and because the full frame is one click away it may be drawn smaller than the
   column: no figure is taller than about a screen's worth of reading space
   (--fig-cap: 60% of the window, never more than 600px; 75% on a phone, whose
   column is narrow), so the text before and after it stays in sight. A wide
   frame never reaches the cap and keeps the full column.
   THE CAP IS A WIDTH, not a max-height on a width:auto image: min(the column,
   the cap × the frame's ratio), the ratio being --fig-w / --fig-h on the link
   (the <img>'s own width/height attributes, written by the build). A definite
   width plus those attributes is what reserves the box before a lazy image
   loads; a width:auto <img> is 0×0 until its bytes arrive, whatever its
   attributes say, and every figure would shove the text as it landed. The 2px
   are the border (border-box): the PICTURE is held to the ratio, so the box
   is exactly the cap tall. A capped frame stays left-aligned, where the
   caption starts.
   The link is a full-width block, so it hands hit-testing to the picture: only
   the picture is clickable, and the focus ring is drawn around it. Keyed on the
   link, never on .scenario-fig; build_pages runs the same pass, so a page's
   figures (/pochemu-glinka/, a JPEG among them) take this rule too (RUS-823).
   (0,2,0) beats .legal a's (0,1,1) — no prose-link colour, no underline. */
.legal .scenario-fig-link{
  --fig-cap:min(60vh, 600px);
  display:block; color:inherit; text-decoration:none;
  pointer-events:none; outline:none;
}
.scenario-fig-link img{
  width:min(100%, calc((var(--fig-cap) - 2px) * var(--fig-w) / var(--fig-h) + 2px));
  pointer-events:auto; cursor:zoom-in;
}
.scenario-fig-link:focus-visible img{ outline:2px solid var(--accent); outline-offset:3px; }
/* The caption is the figure's text alternative — the <img> carries alt="" on
   purpose (build_scenarios.render_body) — so it has to read as prose about the
   picture, not as a label stuck under it: same family as the body, a step down
   in size, muted, and centred only in the sense that it starts where the image
   starts. */
.scenario-fig figcaption{
  margin-top:10px;
  font-size:14px; line-height:1.5; color:var(--muted);
}

/* A scenario article uses ### for its steps under a ## section, which the legal
   documents never do at this density. h3 gets a little more air above it than
   legal.css gives, so a step reads as the start of something rather than as a
   bolder paragraph. */
.scenario h3{ margin-top:36px; }

/* ---------- the CTA after the body ---------- */
/* Sits OUTSIDE <article class="legal"> so .legal a never paints these two as
   prose links (the same reason the crumbs sit outside it on every page here).
   The rule above it is the full column width — the article has ended, and this
   is the one place on the page asking for something. */
.scenario-cta{
  margin-top:44px; padding-top:30px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
}

/* ---------- the list ---------- */
.scenario-list{ list-style:none; margin:34px 0 0; padding:0; }
.scenario-card{
  display:grid; grid-template-columns:212px minmax(0,1fr); gap:22px;
  align-items:start;
  padding:24px 0; border-top:1px solid var(--line-soft);
}
.scenario-card:first-child{ border-top:0; padding-top:6px; }
.scenario-card .sc-shot{ display:block; }
/* The thumbnail is a crop of a wide screenshot, so it is object-fit:cover in a
   fixed box rather than a scaled-down whole picture: at 212px the full frame
   would be a grey band. aria-hidden + tabindex=-1 on its link — it is the same
   destination as the title right beside it, and a second stop on the way there
   is noise for a keyboard or a screen reader. */
.scenario-card .sc-shot img{
  display:block; width:100%; height:132px; object-fit:cover; object-position:left top;
  border:1px solid var(--line); border-radius:10px; background:var(--paper-soft);
}
.scenario-card h2{
  margin:0 0 6px;
  font-size:19px; font-weight:600; letter-spacing:-0.015em; line-height:1.25;
  color:var(--ink);
}
.scenario-card h2 a{ color:inherit; }
.scenario-card h2 a:hover{ color:var(--accent); }
.scenario-card .sc-date{
  margin:0 0 8px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:0.02em; color:var(--muted);
}
.scenario-card .sc-blurb{
  margin:0; font-size:15px; line-height:1.6; color:var(--muted-strong);
}
.scenarios-empty{
  margin:34px 0 0; font-size:16px; line-height:1.72; color:var(--muted);
}
/* RUS-866: the line under the lead that points at the templates hub; its link
   is a .legal prose link (it sits inside <header class="legal">). Inside that
   header .legal p (0,1,1) already holds the lead to a 15px bottom margin, the
   gap this line keeps; its own bottom margin goes, so the list's 34px is the
   only space above the first card. No 620px cap: one line in the 680px column.
   (0,2,0) so it beats .legal p. */
.legal-lead + .scenarios-hub{
  margin:0; font-size:15px; line-height:1.6; color:var(--muted-strong);
}

/* Phone widths: the card stacks, and the thumbnail takes the full width at a
   shallower crop — at 360px a 212px column would leave the text a gutter. */
@media (max-width:680px){
  .legal .scenario-fig-link{ --fig-cap:75vh; }
  .scenario-card{ grid-template-columns:1fr; gap:14px; }
  .scenario-card .sc-shot img{ height:150px; }
  .scenario-cta{ gap:10px; }
  .scenario-cta .btn{ flex:1 1 100%; justify-content:center; }
}