/* Разделы: hero раздела, крошки, заголовки, вводный абзац, «Keep reading»,
   плитки-цифры, пары «было / стало», таймлайн, панель виджета. */

/* ---------- hero раздела ---------- */
.tb-hero--sec .tb-hero__lead{max-width:70ch}
.tb-crumbs{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 6px;
  font-size:var(--font-size-0);color:var(--tb-muted);margin-bottom:var(--size-3);
  letter-spacing:var(--font-letterspacing-1);
}
.tb-crumbs a{color:var(--tb-hot-ink);text-decoration:none}
.tb-crumbs .tb-i{width:12px;height:12px;opacity:.7}
.tb-crumbs span{color:var(--tb-text)}

/* ---------- заголовки секций ---------- */
.tb-kicker{
  display:block;font-family:var(--tb-font);font-size:var(--font-size-0);font-weight:var(--font-weight-6);
  letter-spacing:var(--font-letterspacing-4);text-transform:uppercase;color:var(--tb-hot-ink);margin-bottom:6px;
}
.tb-hbar{border-left:4px solid var(--tb-hot);padding-left:14px;margin-bottom:var(--size-4)}
.tb-hbar h2{margin:0}
.tb-hline{display:flex;align-items:center;gap:16px;margin-bottom:var(--size-4)}
.tb-hline h2{margin:0;flex:none;max-width:100%}
.tb-hline::after{content:"";flex:1 1 auto;height:2px;background:linear-gradient(90deg,var(--tb-line) 0%,transparent 100%)}
@media (max-width:599px){.tb-hline::after{display:none}}
.tb-hcenter{text-align:center;max-width:760px;margin:0 auto var(--size-5)}
.tb-hcenter h2{margin-bottom:var(--size-2)}
.tb-hcenter p{color:var(--tb-muted)}
.tb-hbadge{display:flex;align-items:center;gap:14px;margin-bottom:var(--size-4)}
.tb-hbadge h2{margin:0}
.tb-hbadge>span{
  width:46px;height:46px;flex:none;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,var(--tb-brand) 0%,var(--tb-hot) 130%);color:#fff;
}
.tb-hbadge>span .tb-i{width:24px;height:24px}
.tb-lead{font-size:var(--font-size-2);color:var(--tb-text);line-height:var(--font-lineheight-3)}
.tb-seclead{color:var(--tb-muted);margin-top:-6px}
section h3{color:#fff}

/* ---------- Keep reading ---------- */
.tb-keep{list-style:none;margin:0;padding:0;display:grid;gap:var(--size-4)}
.tb-keep a{
  display:flex;align-items:center;gap:14px;height:100%;padding:16px 18px;text-decoration:none;color:var(--tb-text);
  border:var(--border-size-1) solid var(--tb-line);border-radius:14px;
  background:linear-gradient(120deg,rgba(143,0,255,.18) 0%,rgba(47,17,65,.9) 70%);
}
.tb-keep__ico{
  width:44px;height:44px;flex:none;border-radius:var(--radius-round);display:flex;align-items:center;justify-content:center;
  background:var(--tb-surface-2);color:var(--tb-hot-ink);
}
.tb-keep__ico .tb-i{width:22px;height:22px}
.tb-keep__t{flex:1 1 auto;min-width:0}
.tb-keep__t b{display:block;font-family:var(--tb-font);font-size:var(--font-size-2)}
.tb-keep__t span{display:block;font-size:var(--font-size-0);color:var(--tb-muted)}
.tb-keep__go{width:20px;height:20px;color:var(--tb-hot);flex:none}
@media (min-width:760px){.tb-keep{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.tb-keep a:hover{border-color:var(--tb-hot)}}

/* ---------- плитки с большими цифрами ---------- */
.tb-kpis{list-style:none;margin:0 0 var(--size-5);padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tb-kpis li{
  position:relative;overflow:hidden;border-radius:14px;padding:16px 14px;
  background:linear-gradient(150deg,#5a0fa6 0%,#2f1141 75%);border:var(--border-size-1) solid var(--tb-line);
}
.tb-kpis li:nth-child(even){background:linear-gradient(150deg,#b8360f 0%,#3a1450 80%)}
.tb-kpis .tb-i{width:22px;height:22px;color:rgba(255,255,255,.8);margin-bottom:8px;display:block}
.tb-kpis b{display:block;font-family:var(--tb-font);font-weight:var(--font-weight-8);font-size:var(--font-size-5);line-height:1;color:#fff}
.tb-kpis span{display:block;font-size:var(--font-size-0);color:rgba(255,255,255,.78);margin-top:6px}
@media (min-width:760px){.tb-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}

/* ---------- было / стало ---------- */
.tb-vs{display:grid;gap:12px}
.tb-vs>div{
  display:grid;grid-template-columns:1fr;gap:6px;align-items:center;padding:14px 16px;
  border:var(--border-size-1) solid var(--tb-line);border-radius:var(--radius-2);background:var(--tb-surface);
}
.tb-vs__old{margin:0;color:var(--tb-muted);text-decoration:line-through;text-decoration-color:rgba(255,66,0,.7)}
.tb-vs__new{margin:0;color:#fff;font-weight:var(--font-weight-6)}
.tb-vs .tb-i{width:20px;height:20px;color:var(--tb-hot);transform:rotate(90deg)}
.tb-vs__note{margin:0;font-size:var(--font-size-0);color:var(--tb-muted);grid-column:1/-1}
@media (min-width:760px){
  .tb-vs>div{grid-template-columns:1fr 28px 1fr}
  .tb-vs .tb-i{transform:none}
}

/* ---------- таймлайн ---------- */
.tb-timeline{list-style:none;margin:0;padding:0 0 0 22px;position:relative}
.tb-timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--tb-brand) 0%,var(--tb-hot) 100%)}
.tb-timeline li{position:relative;padding:0 0 var(--size-5) 18px}
.tb-timeline li:last-child{padding-bottom:0}
.tb-timeline li::before{
  content:"";position:absolute;left:-22px;top:5px;width:14px;height:14px;border-radius:var(--radius-round);
  background:var(--tb-bg);border:3px solid var(--tb-hot);
}
.tb-timeline time{display:block;font-size:var(--font-size-0);color:var(--tb-hot-ink);font-weight:var(--font-weight-6);letter-spacing:var(--font-letterspacing-1)}
.tb-timeline h3{margin:2px 0 4px;font-size:var(--font-size-2)}
.tb-timeline p{margin:0;font-size:var(--font-size-0);color:var(--tb-muted)}

/* ---------- панель виджета ---------- */
.tb-tool{
  border:var(--border-size-1) solid var(--tb-brand-soft);border-radius:18px;padding:var(--size-5) var(--size-4);
  background:radial-gradient(120% 90% at 0% 0%,rgba(143,0,255,.28) 0%,rgba(32,2,42,.96) 60%);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
@media (min-width:600px){.tb-tool{padding:var(--size-6)}}
.tb-tool h3{display:flex;align-items:center;gap:10px;font-size:var(--font-size-3);margin-bottom:var(--size-4)}
.tb-tool h3 .tb-i{width:24px;height:24px;color:var(--tb-hot)}
.tb-tool__form{display:grid;gap:var(--size-4);margin-bottom:var(--size-5)}
@media (min-width:760px){.tb-tool__form{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tb-tool label{display:grid;gap:6px;font-size:var(--font-size-0);color:var(--tb-muted);font-weight:var(--font-weight-6)}
.tb-tool label output,.tb-tool label b{color:#fff;font-family:var(--tb-font);font-size:var(--font-size-1)}
.tb-tool select,.tb-tool input[type="number"]{
  width:100%;min-width:0;background:var(--tb-bg);color:var(--tb-text);border:var(--border-size-1) solid var(--tb-line);
  border-radius:10px;padding:10px 12px;font:inherit;font-size:var(--font-size-1);
}
.tb-tool input[type="range"]{width:100%;accent-color:var(--tb-hot);height:24px}
.tb-tool__out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.tb-tool__out>div{border-radius:12px;background:rgba(255,255,255,.05);border:var(--border-size-1) solid var(--tb-line-soft);padding:12px}
.tb-tool__out span{display:block;font-size:var(--font-size-0);color:var(--tb-muted)}
.tb-tool__out b{display:block;font-family:var(--tb-font);font-weight:var(--font-weight-8);font-size:var(--font-size-4);color:#fff;margin-top:4px}
@media (min-width:760px){.tb-tool__out.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tb-tool__msg{
  margin-top:var(--size-4);padding:12px 14px;border-radius:12px;background:rgba(255,66,0,.12);
  border-left:4px solid var(--tb-hot);font-size:var(--font-size-0);color:var(--tb-text);
}
.tb-tool__note{margin:var(--size-3) 0 0;font-size:var(--font-size-0);color:var(--tb-muted)}

/* ---------- фильтр-чипы и сортируемая таблица ---------- */
.tb-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--size-4)}
.tb-filter button{
  border:var(--border-size-1) solid var(--tb-line);background:var(--tb-surface);color:var(--tb-muted);
  border-radius:var(--radius-round);padding:8px 14px;font:inherit;font-size:.875rem;font-weight:var(--font-weight-6);cursor:pointer;
}
.tb-filter button[aria-pressed="true"]{background:var(--tb-hot);border-color:var(--tb-hot);color:#fff}
table.tb-t th button{
  background:none;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
}
table.tb-t th button .tb-i{width:14px;height:14px;opacity:.7}
table.tb-t th[aria-sort] button .tb-i{opacity:1;color:var(--tb-hot-ink)}
table.tb-t td.tb-num{font-family:var(--tb-font);font-weight:var(--font-weight-6);color:var(--tb-hot-ink);white-space:nowrap}
.tb-gcell{display:flex;align-items:center;gap:10px;color:#fff;font-weight:var(--font-weight-6)}
.tb-gcell img{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none}
.tb-empty{padding:14px;color:var(--tb-muted);font-size:var(--font-size-0)}

/* ---------- иллюстрация раздела ---------- */
.tb-figure{margin:var(--size-5) 0}
.tb-figure img{width:100%;height:auto;border-radius:14px;border:var(--border-size-1) solid var(--tb-line)}
.tb-figure figcaption{font-size:var(--font-size-0);color:var(--tb-muted);margin-top:8px}
.tb-figure--narrow{max-width:560px}

/* ---------- ритм: после компонента — отступ, у последнего блока секции хвоста нет ---------- */
:is(.tb-tablewrap,.tb-games,.tb-numwall,.tb-steps,.tb-vs,.tb-checks,.tb-sec3,.tb-support,.tb-defn,.tb-weights,.tb-qcards,
  .tb-cols,.tb-people,.tb-person,.tb-tool,.tb-timeline,.tb-myths,.tb-themes,.tb-fix,.tb-checklist,.tb-kpis,.tb-pc,
  .tb-paynote,.tb-offers,.tb-dep,.tb-rtp,.tb-cta-band,.tb-figure,.tb-passport,.tb-verdict,.tb-plain,.tb-meter__t,
  .tb-pay,.tb-callout,.tb-tip,.tb-note,.tb-swipe) + :not(.tb-swipe):not(.tb-meter){margin-top:var(--size-5)}
.tb-tool__out{margin-top:var(--size-5)}
.tb-wrap > :first-child,.tb-split > .tb-wrap > * > :first-child{margin-top:0}
.tb-wrap > :last-child,.tb-split > .tb-wrap > * > :last-child{margin-bottom:0}
.tb-wrap > script + *{margin-top:var(--size-5)}