/* Кнопки и ссылки-действия. Прямые углы. Модификатор меняет токены кнопки, а не правило.
   .btn          — контурная: лист, рамка 1.5px тушью; наведение — заливка тушью (вторичные действия)
   .btn--sm      — малая контурная: действия в штампах и строках, кнопки баннера cookie
   .btn--case    — «Смотреть кейс»: заливка тушью, наведение — синий чернил
   .btn--ribbon, .btn--ribbon-solid — белые в синей ленте
   .btn-tg       — главное действие, Telegram: единственная синяя на экране
   .quiet        — тихая текстовая: подчёркнутый текст 600 15px без рамки («Копировать», «Назад»)
   .link, .link--big, .out — ссылки-действия со стрелкой */

.btn {
  --btn-pad: 11px 18px;
  --btn-gap: 10px;
  --btn-fs: var(--fs-annotation);
  --btn-line: 1.5px;
  --btn-bg: var(--sheet, var(--paper));   /* бумага листа: на кальке кнопка не светлее листа */
  --btn-fg: var(--ink);
  --btn-border: var(--ink);
  --btn-bg-on: var(--ink);        /* наведение и фокус */
  --btn-fg-on: var(--paper);
  --btn-border-on: var(--btn-bg-on);

  display: inline-flex; align-items: center; gap: var(--btn-gap);
  padding: var(--btn-pad);
  border: var(--btn-line) solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 600 var(--btn-fs)/1.2 var(--sans);
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.btn:hover, .btn:focus-visible { background: var(--btn-bg-on); border-color: var(--btn-border-on); color: var(--btn-fg-on); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn .ic--arrow { width: 22px; height: 11px; }

.btn--sm { --btn-pad: 8px 14px; --btn-gap: 8px; --btn-fs: var(--fs-label); }
.btn--sm .ic { width: 18px; height: 18px; }

.btn--case { --btn-bg: var(--ink); --btn-fg: var(--paper); --btn-bg-on: var(--blue-ink); --btn-fg-on: var(--on-blue); }

.btn--ribbon { --btn-bg: transparent; --btn-border: var(--on-blue); --btn-fg: var(--on-blue); --btn-bg-on: var(--on-blue); --btn-fg-on: var(--blue-ink); }
.btn--ribbon-solid { --btn-bg: var(--on-blue); --btn-border: var(--on-blue); --btn-fg: var(--blue-ink); --btn-bg-on: var(--blue-tint); --btn-border-on: var(--blue-tint); --btn-fg-on: var(--blue-ink); }
.btn--ribbon-solid .ic { width: 20px; height: 20px; }

/* ---------- Главное действие: Telegram ---------- */

/* текст всегда «Написать в Telegram», под ним @mrLexndr или время ответа (small) */
.btn-tg {
  --tg-pad: 14px 20px;
  --tg-fs: var(--fs-title);

  position: relative;
  display: inline-flex; align-items: center; gap: 14px;
  padding: var(--tg-pad);
  background: var(--blue); color: var(--on-blue);
  font: 600 var(--tg-fs)/1.1 var(--sans);
  text-decoration: none;
  transition: background .25s;
  /* печать «Согласовано» в покое увеличена (scale 1.5): за кнопку не выходит и ширины странице не даёт */
  overflow: clip; overflow-clip-margin: 8px;
}
.btn-tg .ic { width: 28px; height: 28px; }
.btn-tg small { display: block; margin-top: 3px; font: 400 var(--fs-caption)/1.4 var(--sans); opacity: .9; }
.btn-tg:hover, .btn-tg:focus-visible { background: var(--blue-ink); color: var(--on-blue); }
.btn-tg:active { transform: translateY(1px); }

/* ---------- Тихая текстовая ---------- */

.quiet {
  padding: 4px 0;
  background: none; border: 0;
  font: 600 var(--fs-label)/1.35 var(--sans); color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--thin); text-underline-offset: .22em;
  cursor: pointer;
}
.quiet:hover, .quiet:focus-visible { color: var(--blue); text-decoration-color: currentColor; }

/* ---------- Ссылки-действия ---------- */

/* «Все кейсы →»: 600 с подчёркиванием */
.link { display: inline-flex; align-items: center; gap: 10px; padding: 4px 0; font-weight: 600; text-decoration-line: underline; }

/* крупная: линия тушью снизу вместо подчёркивания */
.link--big {
  gap: 12px; padding: 0 0 4px;
  font-size: var(--fs-figure);
  text-decoration: none;
  border-bottom: 1.5px solid var(--ink);
}
.link--big:hover, .link--big:focus-visible { border-color: var(--blue); }

/* наружу: «Открыть сайт ↗» */
.out { display: inline-flex; align-items: center; gap: 6px; padding: 3px 0; font-weight: 600; font-size: var(--fs-small); text-decoration: underline; }
.out .ic--out { transition: transform .35s var(--ease); }
.out:hover .ic--out, .out:focus-visible .ic--out { transform: translate(2px, -2px); }

/* Telegram строкой в тексте */
.tg-link { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font-weight: 600; color: var(--blue); text-decoration: underline; text-decoration-color: currentColor; }
.tg-link .ic { width: 20px; height: 20px; }
.tg-link:hover, .tg-link:focus-visible { color: var(--blue-ink); }