/* ============================================================
   Tuto — статьи и инструменты по шаблону (черновики/_шаблон/страница.html)
   Надстройка над article.css. Формат и правила — active_workspace/SEO/4_контент/ДИЗАЙН_СТАТЕЙ.md:
   коротко, без дат и подписей на виду; Sansation — только H1 и крупные числа, остальное Onest.
   ============================================================ */

/* ---------- шрифты: один текстовый шрифт ---------- */
.art-body h2,.art-body h3,.art-cta h2,.art-src h2,.art-next h2{font-family:'Onest',sans-serif;letter-spacing:-.01em;}
.art-body h2{font-weight:700;}
.art-body h3{font-weight:650;}
.art-lead{color:var(--ink);}
.art-doc h1+.art-lead{margin-top:1.1rem;}

/* ---------- таблица в карточке ---------- */
.art-body .art-table-wrap{margin-top:1rem;padding:.35rem .9rem .5rem;background:var(--surface);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);}
.art-body .art-table{margin-top:0;}
.art-body .art-table tr:last-child td{border-bottom:0;}
.art-body .art-table td.num,.art-body .art-table th.num{text-align:right;}
.art-body .art-table td.num{font-weight:600;}
/* таблица помещается в карточку и на узком телефоне: заголовки колонок переносятся (числа — нет), поля и шрифт меньше */
.art-body .art-table th.num{white-space:normal;}
@media (max-width:520px){
  .art-body .art-table-wrap{padding:.25rem .55rem .4rem;}
  .art-body .art-table{font-size:var(--fs-caption);}
  .art-body .art-table th,.art-body .art-table td{padding:.5rem .3rem;}
}

/* ---------- шаги кружками ---------- */
.art-body ol.art-steps{gap:.9rem;}
.art-body ol.art-steps li{padding-left:2.6rem;min-height:1.9rem;}
.art-body ol.art-steps li::before{content:counter(n);top:.05rem;width:1.8rem;height:1.8rem;border-radius:50%;
  display:grid;place-items:center;background:var(--navy);color:var(--bg);font-family:'Onest',sans-serif;
  font-size:.85rem;font-weight:700;}

/* ---------- одна плашка «важно» в тексте — как плашка-инсайт в приложении ----------
   (onboarding_insight_plate.dart: тёплая подложка lightOrange, знак инсайта акцентом). Первая фраза — <b>. */
.art-callout{position:relative;margin-top:1.2rem;padding:1.05rem 1.2rem 1.1rem 3.35rem;border-radius:var(--r);
  background:color-mix(in srgb,var(--light-orange) 52%,var(--surface));}
.art-callout::before{content:"";position:absolute;left:1.2rem;top:1.15rem;width:22px;height:22px;background:var(--accent);
  -webkit-mask:url(/assets/icons/insight.svg) center/contain no-repeat;mask:url(/assets/icons/insight.svg) center/contain no-repeat;}
.art-callout p{margin-top:0;color:var(--ink);}
.art-callout p+p{margin-top:.5rem;}
.art-callout b{font-weight:650;}

/* ---------- тёмный блок приложения внутри текста ---------- */
.art-body .calc-app{margin-top:clamp(2rem,4.5vw,2.6rem);}
.art-body .calc-app-list li{padding-left:0;}
.art-body .calc-app-list li::before{content:none;}
.art-body .calc-app p.calc-app-title{margin-top:0;color:var(--bg);font-size:clamp(1.35rem,1.2rem + .6vw,1.55rem);line-height:1.15;}
.art-body .calc-app .btn{color:var(--on-accent);text-decoration:none;}
/* простой вариант без карточек (если статье не нарисовали карточки) */
.art-cta--dark{position:relative;margin-top:clamp(2rem,4.5vw,2.6rem);padding:clamp(1.5rem,4vw,2.2rem);
  padding-right:clamp(4rem,10vw,5rem);border-radius:var(--r-lg);background:var(--navy);color:var(--bg);
  box-shadow:0 18px 40px rgba(43,41,56,.22);}
.art-cta--dark .art-cta-title{font-family:'Sansation',sans-serif;font-weight:700;font-size:clamp(1.3rem,1.15rem + .6vw,1.5rem);
  line-height:1.2;color:var(--bg);}
.art-cta--dark p{color:rgba(239,238,233,.82);margin-top:.6rem;}
.art-cta--dark .btn{margin-top:1.2rem;}
.art-cta-mark{position:absolute;top:20px;right:22px;width:36px;height:40px;
  background:color-mix(in srgb,var(--accent) 86%,#fff);
  -webkit-mask:url(/assets/pay/plus_mark.png) center/contain no-repeat;mask:url(/assets/pay/plus_mark.png) center/contain no-repeat;}
@media (max-width:620px){.art-cta--dark .btn{width:100%;}}

/* ---------- FAQ — раскрывашки лендинга (full.css .faq-item) без иконок и цвета: линия, вопрос, шеврон ---------- */
.art-faq{margin-top:clamp(2.2rem,5vw,2.8rem);}
.art-faq h2{font-family:'Onest',sans-serif;font-weight:700;font-size:var(--fs-h3);line-height:1.25;color:var(--ink);}
.art-faq .faq-list{margin-top:.9rem;display:flex;flex-direction:column;}
/* линии только между вопросами — сверху и снизу списка их нет (заказчик 27.09: «меньше линий») */
.faq-item + .faq-item{border-top:1px solid var(--outline);}
.faq-item > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:15px 0;}
.faq-item > summary::-webkit-details-marker{display:none;}
.faq-item > summary::marker{content:"";}
.faq-q{flex:1;min-width:0;font-family:'Onest',sans-serif;font-weight:600;font-size:clamp(.96rem,1.3vw,1.05rem);
  line-height:1.35;color:var(--ink);transition:color .18s var(--ease);}
.faq-item > summary:hover .faq-q{color:var(--accent);}
.faq-mk{flex:none;width:9px;height:9px;margin-right:4px;border-right:2px solid var(--ink-faint);border-bottom:2px solid var(--ink-faint);
  transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--ease),border-color .25s var(--ease);}
.faq-item[open] .faq-mk{transform:translateY(2px) rotate(-135deg);border-color:var(--ink);}
.faq-a{padding:0 28px 16px 0;}
.faq-a p{margin:0;max-width:60ch;font-family:'Onest',sans-serif;font-size:var(--fs-body);line-height:1.6;color:var(--ink-muted);}

/* ---------- предыдущая / следующая — одна карточка в самом низу, две половины через линию ---------- */
.art-pn{margin-top:clamp(2rem,4.5vw,2.6rem);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden;}
.pn-card{display:flex;flex-direction:column;gap:.4rem;padding:1.2rem 1.35rem 1.3rem;color:var(--ink);text-decoration:none;
  transition:background .2s var(--ease);}
.pn-card:hover{background:color-mix(in srgb,var(--bg) 45%,var(--surface));}
.pn-card small{font-family:'Onest',sans-serif;font-size:var(--fs-caption);font-weight:500;color:var(--ink-faint);}
.pn-card span{font-family:'Onest',sans-serif;font-size:var(--fs-body);font-weight:600;line-height:1.35;transition:color .18s var(--ease);}
.pn-card:hover span{color:var(--accent);}
.pn-card--next{border-left:1px solid var(--outline);text-align:right;}
@media (max-width:520px){
  .art-pn{grid-template-columns:minmax(0,1fr);}
  .pn-card--next{border-left:0;border-top:1px solid var(--outline);text-align:left;}
}

/* ---------- источники — свёрнуты ---------- */
details.art-src{margin-top:clamp(1.8rem,4vw,2.4rem);padding-top:0;border-top:0;}   /* без линии: у article.css она своя */
details.art-src summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.45rem;
  font-family:'Onest',sans-serif;font-size:var(--fs-small);font-weight:600;color:var(--ink-muted);}
details.art-src summary::-webkit-details-marker{display:none;}
details.art-src summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s var(--ease);}
details.art-src[open] summary::after{transform:rotate(-135deg) translateY(-1px);}

/* ---------- одна строка внизу: дата и кто отвечает за текст ---------- */
.art-updated{margin-top:1.4rem;font-family:'Onest',sans-serif;font-size:var(--fs-caption);color:var(--ink-faint);}
.art-updated a{color:var(--ink-faint);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--outline);}
.art-updated a:hover{color:var(--ink-muted);}

/* ---------- иллюстрация: сцена сторис приложения (story_view.dart) — цвет темы и картинка, без слов ----------
   Картинка по центру, чуть уходит за нижний край. */
.art-story{position:relative;margin:1.4rem 0 0;border-radius:var(--r-lg);overflow:hidden;background:var(--story-bg);
  aspect-ratio:2/1;display:flex;justify-content:center;align-items:flex-end;}
.art-story img{height:108%;width:auto;max-width:none;margin-bottom:-6%;display:block;}
.art-body .art-story{margin-top:1.4rem;}
@media (max-width:520px){.art-story{aspect-ratio:4/3;}.art-story img{height:100%;}}

/* ---------- хабы /blog/ и /instrumenty/ (_хабы.py): одна колонка белых плашек-статей, воздушно — только
   заголовок статьи целиком (на телефоне до трёх строк), без описаний и вступления; группы по темам. Вариант с картинкой
   (`hub-tile--pic`) — маленькая сцена сторис справа, на цвете своей темы ---------- */
.hub-group{margin-top:clamp(2.2rem,5vw,2.8rem);}
.hub-group:first-child{margin-top:clamp(1.4rem,3vw,1.8rem);}
.art-body .hub-group h2{font-size:var(--fs-lead);}
.hub-list{display:flex;flex-direction:column;gap:.85rem;margin-top:1rem;}
.art-body a.hub-tile{display:flex;align-items:center;gap:1.1rem;min-height:5.4rem;padding:1.35rem 1.5rem;background:var(--surface);
  border-radius:var(--r);box-shadow:var(--shadow-sm);color:var(--ink);text-decoration:none;
  font-family:'Onest',sans-serif;font-weight:600;font-size:1.06rem;line-height:1.4;transition:color .18s var(--ease),transform .2s var(--ease);}
.hub-tile span{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.art-body a.hub-tile:hover{color:var(--accent);transform:translateY(-1px);}
.art-body a.hub-tile--pic{padding:.8rem .8rem .8rem 1.5rem;}
.hub-tile i{flex:none;width:4.6rem;height:4.6rem;border-radius:14px;background:var(--story-bg);overflow:hidden;
  display:flex;align-items:flex-end;justify-content:center;}
.hub-tile i img{height:112%;width:auto;max-width:none;margin-bottom:-8%;display:block;}