/* Глинка — /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);
}
/* 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);
}

/* 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){
  .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; }
}