/* Режим статей — вид 10/10 (Дизайн, аудит docs/design/07, шаги 1–2 CTO 10.10).
   Подключается после app.css на index.html, статья.html, вход.html. Только оформление: данные и логика — app.js.
   Почему так: О2 — одна шапка без капителей; О7 — без сырых мелочей; статья читается картинками; шаблон — виджет. */

/* ——— шапка: слева назад-кнопка или знак HOOK, без капителей-разделов ——— */
.status { height:56px; padding:0 calc(var(--step) * 3); font:600 15px/1 "Onest"; letter-spacing:-.01em; }
.status > span:last-child { display:none; }                       /* «СТАТЬИ», «ЛИЧНЫЙ БРЕНД» капителями — убраны */
.status b { font:700 17px/1 "Onest"; letter-spacing:.06em; color:var(--ink); }
.status a[href="index.html"] { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px 0 10px; border-radius:18px;
  color:var(--ink) !important; background:var(--glass); box-shadow:inset 0 1px 0 var(--hi), 0 0 0 1px var(--line); font-size:14px; }
.top .cap { display:none; }                                         /* серое «Статьи» над заголовком — дубль шапки */

/* ——— лента ——— */
#продолжения h2, #заголовок-ленты { font:700 26px/1.1 "Onest"; letter-spacing:-.035em; margin:calc(var(--step) * 3) 0 calc(var(--step) * 1.5); }
.chips#темы { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin:0 calc(var(--step) * -3); padding:0 calc(var(--step) * 3); }
.chips#темы::-webkit-scrollbar { display:none; }
.search span { font-size:0; width:18px; height:18px; background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='11' cy='11' r='6.5'/><path d='M20 20l-4-4'/></svg>") center/contain no-repeat; }
#лента .card { display:block; overflow:hidden; padding:0; margin-bottom:calc(var(--step) * 1.5); }
#лента .card a { display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center; padding:12px; color:inherit; text-decoration:none; }
#лента .card .th { width:96px; height:96px; border-radius:14px; background:var(--s2) center/cover; box-shadow:0 0 0 1px var(--line); }
#лента .card h3 { font:600 16px/1.25 "Onest"; letter-spacing:-.015em; }
#лента .card .meta { margin-top:6px; }
#лента .card a.без-картинки { grid-template-columns:1fr; padding:16px; }
.top:has(> .cap:only-child) { display:none; }

/* ——— статья: заголовок, мета, чтение ——— */
#заголовок { font:700 28px/1.08 "Onest" !important; letter-spacing:-.04em; text-wrap:balance; }
header.row .star { width:40px; height:40px; flex:none; border-radius:20px; font-size:0; background:var(--glass); box-shadow:inset 0 1px 0 var(--hi), 0 0 0 1px var(--line); }
header.row .star::before { content:""; display:block; width:20px; height:20px; margin:auto; background:var(--ink2);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'><path d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8L3.5 9.7l5.9-.9z'/></svg>") center/contain no-repeat; }
header.row .star.on::before { background:var(--acc); -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L12 16.9l-5.2 2.7 1-5.8L3.5 9.7l5.9-.9z'/></svg>"); }
#мета { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px; }
#мета span { font:500 12.5px/1 "Onest"; padding:7px 11px; border-radius:12px; color:var(--ink2); background:var(--fill-1); }
#мета span:first-child { color:var(--acc); background:color-mix(in srgb, var(--acc) 12%, transparent); }
#инфографика { border-radius:var(--r-card) !important; box-shadow:var(--sh-card); margin:18px 0 6px !important; }
article#тело { font:400 16.5px/1.55 "Onest"; color:color-mix(in srgb, var(--ink) 88%, transparent); }
article#тело h2 { font:700 22px/1.15 "Onest"; letter-spacing:-.03em; color:var(--ink); margin:40px 0 12px; text-wrap:balance; }
article#тело p { text-wrap:pretty; }
article#тело b { color:var(--ink); font-weight:600; }
article#тело a.in { color:var(--acc); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--acc) 40%, transparent); }
figure.рис img { box-shadow:var(--sh-card); }

/* «Подробнее» — кнопка-строка с шевроном, а не треугольник браузера */
details.подробнее { padding:0; background:var(--fill-0); box-shadow:inset 0 0 0 1px var(--line); border-radius:14px; }
details.подробнее summary { list-style:none; display:flex; align-items:center; justify-content:space-between; padding:13px 16px;
  font:600 14px/1 "Onest"; color:var(--acc); }
details.подробнее summary::-webkit-details-marker { display:none; }
details.подробнее summary::after { content:""; width:16px; height:16px; background:currentColor; transition:transform .25s var(--ease);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") center/contain no-repeat; }
details.подробнее[open] summary::after { transform:rotate(180deg); }
details.подробнее > :not(summary) { margin:0 16px 12px !important; font-size:15px; }
details.подробнее li { margin-left:18px; }

/* шаблон — виджет с кнопкой «Скопировать» (кнопку ставит app.js) */
article#тело table { border-collapse:separate !important; border-spacing:0; border-radius:var(--r-card); overflow:hidden;
  background:var(--s2); box-shadow:inset 0 1px 0 var(--hi), 0 0 0 1px var(--line); font:400 15px/1.4 "Onest" !important; }
article#тело table tr:first-child { display:none; }                 /* «Поле / Что написать» — шапка таблицы лишняя */
article#тело td { padding:13px 16px !important; border-bottom:1px dashed var(--line) !important; vertical-align:top; }
article#тело td:first-child { width:92px; white-space:nowrap; color:var(--acc); font-weight:600; font-size:13.5px; }
article#тело table:has(+ .шаблон-копия) { border-radius:var(--r-card) var(--r-card) 0 0; margin-bottom:0 !important; }
.шаблон-копия { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; height:48px; margin:0 0 18px; border:0;
  box-shadow:inset 0 0 0 1px var(--line);
  border-radius:0 0 var(--r-card) var(--r-card); font:600 14px/1 "Onest"; color:var(--ink); background:var(--fill-1); cursor:pointer; }

/* практические шаги: галочки — да; кнопка у каждого шага в режиме статей — нет (одна строка ниже) */
body[data-режим="статьи"] #шаги [data-ассистент] { display:none; }
#шаги-блок h2, #связанные-блок h2 { font:700 22px/1.15 "Onest"; letter-spacing:-.03em; margin:40px 0 12px; }
#шаги .step { align-items:flex-start; }
#шаги .step p { font:500 15.5px/1.4 "Onest"; margin:2px 0 0; }
#шаги .step .box { display:block; width:24px; height:24px; border-radius:8px; }   /* был inline span — ширина не применялась, галочки не было видно */
.скоро-шаги { display:flex; gap:12px; align-items:center; margin-top:14px; padding:14px 16px; border-radius:16px; font:500 14px/1.4 "Onest";
  color:var(--ink2); background:var(--fill-0); box-shadow:inset 0 0 0 1px var(--line); }
.скоро-шаги i { flex:none; width:22px; height:22px; background:var(--acc);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='8.5'/><path d='M12 7.5V12l3 2'/></svg>") center/contain no-repeat; }

/* связанные статьи — карточки с картинкой; текстовый список «Что читать дальше» убирает app.js */
#связанные .card a { display:grid; grid-template-columns:72px 1fr auto; gap:12px; align-items:center; padding:10px 12px; color:inherit; text-decoration:none; }
#связанные .card .th { width:72px; height:72px; border-radius:12px; background:var(--s2) center/cover; }
#связанные .card h3 { font:600 15px/1.3 "Onest"; }
#связанные .card a::after { content:"→"; color:var(--acc); font-weight:600; }
main > .foot { margin-top:28px; }

/* прогресс чтения — тонкая полоса под шапкой (ширину ставит app.js по прокрутке) */
.чтение { position:fixed; left:0; right:0; top:0; height:3px; z-index:20; background:transparent; }
.чтение i { display:block; height:100%; width:0; background:var(--bar); border-radius:0 2px 2px 0; }

/* ——— экран «скоро» — приглашение, а не серая строка ——— */
.скоро { min-height:calc(100dvh - 70px); display:flex; flex-direction:column; justify-content:center; text-align:center; gap:16px; padding:0 0 24px; }
.скоро .знак { width:96px; height:96px; margin:0 auto; border-radius:48px; display:flex; align-items:center; justify-content:center; background:var(--s2);
  box-shadow:inset 0 1px 0 var(--hi), 0 0 0 1px var(--line), 0 24px 48px rgba(0,0,0,.45); }
.скоро .знак svg { width:56px; height:auto; }
.скоро h1 { font:700 32px/1.05 "Onest"; letter-spacing:-.045em; text-wrap:balance; }
.скоро p { font:400 16.5px/1.45 "Onest"; color:var(--ink2); text-wrap:balance; }
.скоро p.новые { font:600 13px/1 "Onest"; letter-spacing:.02em; color:var(--acc); }
/* три обложки 4:5 рядом, лёгкий наклон, без наложения — ничего не обрезается */
.скоро .веер { display:flex; justify-content:center; gap:10px; margin:10px 0 6px; }
.скоро .веер img { width:31%; aspect-ratio:4/5; object-fit:contain; border-radius:12px; box-shadow:var(--sh-cover); }
.скоро .веер img:nth-child(1) { transform:rotate(-4deg) translateY(8px); }
.скоро .веер img:nth-child(3) { transform:rotate(4deg) translateY(8px); }
.скоро .btn { margin-top:8px; }