/* ProfiPlace — оформление статьи базы знаний.
   Все правила висят на .art-body и голых тегах. В контенте CMS
   не должно быть ни одного класса и ни одного инлайн-стиля.

   figure/figcaption создаёт wiki.js из обычного <img> — руками их не пишут. */

@font-face{
  font-family:'Open Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/open-sans-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Open Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/open-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

.art-body{
  /* Светлая тема — палитра основного сайта ProfiPlace */
  --text:#2A2A2A;
  --text-2:#4B5563;
  --muted:#6B7280;
  --faint:#9CA3AF;
  --rule:#E5E7EB;
  --rule-strong:#CDCDCD;
  --accent:#0595D6;
  --surface:#FFFFFF;
  --mat:#F5F5F5;
  --note-bg:rgba(5,149,214,.07);
  --note-fg:#0359A9;
  --note-line:#0595D6;
  --mono:'Cascadia Mono',Consolas,'SF Mono',ui-monospace,monospace;

  max-width:680px;
  color:var(--text);
  font:400 16.5px/1.7 'Open Sans','Segoe UI',system-ui,-apple-system,sans-serif;
}

/* Тёмная тема статьи — только если не выбрано светлое явно (data-theme на :root) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .art-body{
    --text:#EDEAE3; --text-2:#D6D2C9; --muted:#A8A399; --faint:#8A857C;
    --rule:#2E2E2B; --rule-strong:#3D3D39; --accent:#7FB2E8;
    --surface:#1A1A19; --mat:#232321;
    --note-bg:#2A2416; --note-fg:#E0BE72; --note-line:#5C4A1E;
  }
}

/* ---------- текст ---------- */
.art-body p{margin:0 0 16px;color:var(--text-2)}
.art-body p:first-child{font-size:17px;color:var(--muted);margin-bottom:32px}

/* Вариант с заголовками. Если секции размечены <p>, правило просто не сработает. */
.art-body h2{
  margin:40px 0 12px;
  font:600 21px/1.4 inherit;
  letter-spacing:-.022em;
  color:var(--text);
}
.art-body h2:first-child{margin-top:0}

.art-body a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.art-body a:hover{text-decoration-thickness:2px}

.art-body strong{font-weight:600;color:var(--text)}

/* ---------- шаги ---------- */
.art-body ol{
  counter-reset:step;
  list-style:none;
  margin:24px 0;
  padding:0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.art-body ol > li{
  counter-increment:step;
  display:grid;
  grid-template-columns:46px minmax(0,1fr);
  gap:16px;
  padding:16px 0;
  color:var(--text-2);
}
.art-body ol > li + li{border-top:1px solid var(--rule)}
.art-body ol > li::before{
  content:counter(step,decimal-leading-zero);
  font:500 12px/1.45 var(--mono);
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums;
  color:var(--accent);
  padding-top:4px;
  padding-right:16px;
  text-align:right;
  border-right:1px solid var(--rule);
}

/* ---------- ссылки «читайте дальше» ---------- */
.art-body ul{list-style:none;margin:16px 0 0;padding:0}
.art-body ul > li{border-bottom:1px solid var(--rule)}
.art-body ul > li:first-child{border-top:1px solid var(--rule)}
.art-body ul > li > a{
  display:block;
  padding:13px 0;
  color:var(--text-2);
  text-decoration:none;
  transition:color .16s,padding-left .16s;
}
.art-body ul > li > a:hover{color:var(--accent);padding-left:6px}

/* ---------- сноска ---------- */
.art-body blockquote{
  margin:24px 0;
  padding:16px 24px;
  background:var(--note-bg);
  color:var(--note-fg);
  border-left:2px solid var(--note-line);
  border-radius:0 5px 5px 0;
  font-size:15px;
}
.art-body blockquote p{margin:0;color:inherit}

/* ---------- скриншот ---------- */
/* Голый <img> — до того, как отработает wiki.js, и если он не отработает вовсе. */
.art-body img{
  display:block;
  max-width:100%;
  height:auto;
  border:1px solid var(--rule);
  border-radius:8px;
  background:var(--surface);
}

/* Структура, которую строит wiki.js */
.art-body figure{
  margin:24px 0;
  border:1px solid var(--rule);
  border-radius:8px;
  overflow:hidden;
  background:var(--mat);
}
.art-body figure button{
  display:block;
  width:100%;
  padding:16px;
  border:0;
  background:none;
  cursor:zoom-in;
  transition:background .2s;
}
.art-body figure button:hover{background:rgba(23,23,26,.04)}
.art-body figure img{
  border:0;
  border-radius:3px;
  max-height:520px;
  object-fit:contain;
  width:100%;
}
.art-body figcaption{
  border-top:1px solid var(--rule);
  background:var(--surface);
  padding:9px 16px;
  font:500 11px/1.5 var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--faint);
}

/* ---------- лайтбокс (создаётся скриптом) ---------- */
dialog.wiki-zoom{
  border:1px solid var(--rule-strong);
  border-radius:8px;
  padding:0;
  width:min(1400px,94vw);
  max-width:94vw;
  max-height:94vh;
  background:var(--surface);
  color:var(--text);
  box-shadow:0 30px 110px rgba(0,0,0,.35);
}
dialog.wiki-zoom::backdrop{background:rgba(10,10,12,.62)}
dialog.wiki-zoom > div:first-child{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  border-bottom:1px solid var(--rule);padding:10px 16px;
  font:500 11px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);
}
dialog.wiki-zoom button{
  border:0;background:none;cursor:pointer;color:inherit;
  font:inherit;padding:4px 8px;border-radius:4px;
}
dialog.wiki-zoom button:hover{background:var(--mat)}
dialog.wiki-zoom > div:last-child{overflow:auto;max-height:82vh;padding:16px;background:var(--mat)}
dialog.wiki-zoom img{display:block;max-width:100%;height:auto;margin:0 auto;background:var(--surface);border-radius:4px}

/* ---------- мелкие экраны ---------- */
@media (max-width:560px){
  .art-body{font-size:16px}
  .art-body ol > li{grid-template-columns:34px minmax(0,1fr);gap:12px}
  .art-body ol > li::before{padding-right:12px}
  .art-body figure button{padding:8px}
  dialog.wiki-zoom img{max-width:none;width:auto;min-width:100%}
}

@media (prefers-reduced-motion:reduce){
  .art-body *{transition-duration:.01ms !important}
}

/* ---------- печать ---------- */
@media print{
  .art-body{max-width:none;font-size:11pt;color:#000}
  .art-body figure{break-inside:avoid}
  .art-body figure img{max-height:340px}
  .art-body figure button{padding:0}
  .art-body a{color:#000}
}