/* ==========================================================================
   Glow · Советы — the catalogue (Atelier frame 3) and the tip sheet (frame 4).
   Scoped to .scr-tips: the screen root, the sheet article (.tsheet) and the
   sheet footer (.tfoot) all carry it. Shared components (page-head, legend,
   chips, tip rows, spec, cite, caution, state, sk) come from components.css;
   this file only adds what is particular to the catalogue.
   ========================================================================== */

/* ---------- catalogue -------------------------------------------------- */

/* Evidence legend: each level also shows its share of the catalogue (17 · 16 · 9).
   Columns (components.css) never go below their longest word: «исследования», «Ограниченные,» stay whole at 360. */
.scr-tips .scr-tips__legend > div:last-child { padding-right: 0; }   /* +8 px: «Сильные: РКИ,» stays one line at 360 */
.scr-tips .scr-tips__legend dt { justify-content: space-between; }
.scr-tips .scr-tips__legend dd { overflow-wrap: normal; hyphens: manual; }
.scr-tips__share {
  font: 400 13px/1 var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-3);
}

/* Filter chips: counts set in the serif, like «№ 02» in the kicker (lifted 1 px onto the caps baseline). */
.scr-tips .scr-tips__chips .chip__n {
  position: relative; top: -1px;
  font: 400 13px/1 var(--serif);
  letter-spacing: 0; text-transform: none;
  font-variant-numeric: lining-nums tabular-nums;
}
/* The row is cut by a fade at the right edge while there is more to scroll — whatever the phone width,
   the categories after «Мифы» never look like the end of the row. .is-end (tips.js) lifts it. */
.scr-tips .scr-tips__chips {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
          mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent);
}
.scr-tips .scr-tips__chips.is-end { -webkit-mask-image: none; mask-image: none; }

.scr-tips__list { margin-top: 14px; }

/* «Ещё N в Premium» — the analysis screen's section head (ui.secHead): the head carries the strong
   rule, inset by the gutter; the locked rows follow without a rule of their own. */
.scr-tips__locked { margin-top: 28px; }
.scr-tips__list > .scr-tips__locked:first-child { margin-top: 0; }
.scr-tips .scr-tips__gate {
  flex-wrap: nowrap; column-gap: 12px;   /* «Открыть» never drops to a row of its own; a long title stacks */
  margin: 0 var(--gutter); padding-left: 0; padding-right: 0;
  border-bottom: var(--hair) solid var(--rule);
}
.scr-tips__list > .scr-tips__locked:first-child > .scr-tips__gate { padding-top: 10px; }
/* 28 px like the analysis head from 412 px up; just enough smaller on narrower phones that
   «Ещё 23 в Premium» keeps one line beside the button (two-digit counts are the norm here) */
.scr-tips .scr-tips__gate .sec-title { font-size: clamp(25px, 6.8vw, var(--fs-title-s, 28px)); }
.scr-tips .scr-tips__gate .sec-meta { flex: none; padding-bottom: 0; }
.scr-tips .scr-tips__rows--locked > .tip:first-child { border-top: 0; }

/* Loading: the hairlines stay, the text becomes flat breathing bars. */
.scr-tips__skmeta { display: inline-block; width: 64px; height: 10px; vertical-align: middle; }
.scr-tips__skn { width: 16px; height: 10px; margin-top: 6px; }
.scr-tips__skt { height: 16px; margin-top: 4px; }
.scr-tips__skm { height: 9px; margin-top: 11px; }
.scr-tips__ske { width: 40px; height: 8px; }
.scr-tips__skchips { pointer-events: none; }
.scr-tips__skchips .chip { width: 66px; border-color: var(--rule-2); }
.scr-tips__skchips .chip:first-child { width: 74px; background: var(--bg-3); border-color: transparent; }
.scr-tips__skchips .chip:nth-child(3) { width: 72px; }
.scr-tips__skchips .chip:nth-child(4) { width: 80px; }
.scr-tips.is-loading .tip { cursor: default; }

/* ---------- tip sheet (.sheet--split body) ----------------------------- */

.scr-tips.tsheet { padding-bottom: 36px; }

/* only while the kicker is still inside the article (core moves it next to ×) */
.scr-tips .tsheet__kicker { min-height: 44px; padding-right: 40px; }

.scr-tips .tsheet__title {
  margin: 4px 0 0;
  font: 340 clamp(30px, 8.6vw, 36px)/1.04 var(--serif);
  letter-spacing: -.022em;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.scr-tips.tsheet--myth .tsheet__title { font-style: italic; letter-spacing: -.012em; }

.scr-tips .tsheet__spec { margin-top: 20px; }

.scr-tips .tsheet__h {
  margin: 28px 0 12px;
  font: 500 11px/1.2 var(--sans);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}

/* «Почему это работает»: body text with a two-line serif drop cap. */
.scr-tips .tsheet__why {
  margin: 0;
  font: 400 15px/1.6 var(--sans);
  color: var(--ink-2);
  text-wrap: pretty;
}
.scr-tips .tsheet__why::first-letter {          /* fallback: a floated cap over two lines */
  float: left;
  margin: 5px 9px 0 -1px;
  font: 340 49px/.8 var(--serif);
  color: var(--ink);
}
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  .scr-tips .tsheet__why::first-letter {        /* exact: cap height of line 1 → baseline of line 2 */
    float: none;
    margin: 0 .18em 0 -.02em;
    font-family: var(--serif); font-weight: 340; font-size: inherit; line-height: inherit;
    -webkit-initial-letter: 2;
    initial-letter: 2;
  }
}

/* Source: italic serif credit under a vertical rule, then ONE quiet .spec--line with the facts the
   citation itself states, aligned with the credit's text. */
.scr-tips .tsheet__src { margin: 22px 0 0; }
.scr-tips .tsheet__cite { margin-top: 0; }
.scr-tips .tsheet__paren { font-style: normal; }
.scr-tips .tsheet__facts { margin-top: 8px; padding-left: 15px; }

/* «≈» (no glyph in the fonts) drawn inline at the text's size, glued to its number. */
.scr-tips .tsheet__nobr { white-space: nowrap; }
.scr-tips .tsheet__approx {
  display: inline-block;
  width: .62em; height: .5em;
  margin: 0 .04em;
  vertical-align: .08em;
  overflow: visible;
  fill: none; stroke: currentColor; stroke-width: 1.3px; stroke-linecap: square;
  vector-effect: non-scaling-stroke;
}
.scr-tips .tsheet__approx path { vector-effect: non-scaling-stroke; }

/* «Как делать» / «Что делать вместо»: numbered steps with big serif numerals. */
.scr-tips .tsheet__steps { margin: 0; padding: 0; list-style: none; }
.scr-tips .tsheet__steps li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: baseline;
  padding: 12px 0 13px;
  border-top: var(--hair, 1px) solid var(--rule-2);
}
.scr-tips .tsheet__steps li:first-child { border-top: var(--hair, 1px) solid var(--rule); }
.scr-tips .tsheet__steps li:last-child { border-bottom: var(--hair, 1px) solid var(--rule-2); }
.scr-tips .tsheet__n {
  font: 340 30px/1 var(--serif);
  letter-spacing: -.02em;
  font-variant-numeric: lining-nums;
  color: var(--ink);
}
.scr-tips .tsheet__step { font: 400 15px/1.5 var(--sans); color: var(--ink); text-wrap: pretty; }

/* Hatched boxes: hardmaxxing's permanent doctor note right under the spec (seen before the pinned
   action), the tip's own «Осторожно» after the steps. */
.scr-tips .tsheet__caution { margin-top: 24px; }
.scr-tips .tsheet__caution--doctor { margin-top: 20px; }
.scr-tips .tsheet__warn { margin: 0; }
.scr-tips .tsheet__warn b .ico,
.scr-tips .tsheet__warn b svg { width: 14px; height: 14px; flex: none; }

/* ---------- sheet footer ----------------------------------------------- */

.scr-tips.tfoot .btn svg { width: 18px; height: 18px; flex: none; }
/* components' .sheet__note, but a sentence — sentence case, 13 px (amendment A1), never caps */
.scr-tips .tfoot__note {
  margin-top: 6px;
  font: 400 var(--fs-note, 13px)/1.4 var(--sans);
  letter-spacing: 0; text-transform: none;
  text-align: center;
}

/* ---------- narrow phones (360) ---------------------------------------- */

@media (max-width: 374.98px) {
  .scr-tips .tsheet__steps li { grid-template-columns: 34px minmax(0, 1fr); }
}