/* Kindware — вид «мини-апп» для внутренних страниц (программы и справочник).
   Цветная шапка, разделы-карточки с мягкой тенью, цветные акценты страницы.
   Подключается ПОСЛЕ page.css и chto-delat.css. Цвет страницы — --bg на <body>. */

/* шапка: цвет страницы с лёгким переходом и светлым пятном; :where — чтобы страница могла задать своё */
:where(body.pg) .pg-hero{
  background:
    radial-gradient(60% 55% at 92% 0%, rgb(255 255 255 / .16), transparent 70%),
    linear-gradient(155deg, color-mix(in srgb, var(--bg) 94%, #fff) 0%, color-mix(in srgb, var(--bg) 70%, #000) 100%);
  border-radius:0 0 28px 28px;
}

/* разделы статьи — карточки */
body.pg .pg-body article{gap:14px;padding-block:28px 40px}
body.pg .pg-body article > section:not(.pg-cta):not(:has(> .tiles)){
  padding:20px;gap:var(--s2);
  border:1px solid var(--line);border-radius:24px;
  background:linear-gradient(180deg, var(--night-2), color-mix(in srgb, var(--night-2) 88%, #000));
  box-shadow:0 14px 32px -20px rgb(0 0 0 / .7);
}
body.pg .pg-body article > section.tool{padding:20px;border-radius:24px}
body.pg .pg-body article > section:has(> .tiles){gap:var(--s1)}

/* точка цвета страницы перед заголовком раздела */
body.pg .pg-body article > section:not(.pg-cta) > h2:not(.sr-only)::before{
  content:"";display:inline-block;width:10px;height:10px;margin-right:10px;border-radius:50%;
  background:color-mix(in srgb, var(--bg) 55%, #fff);vertical-align:.12em;
}

/* галочки: цвет страницы вместо коралла */
body.pg .chk{border-top:0}
body.pg .chk input:checked{background-color:var(--bg);border-color:color-mix(in srgb, var(--bg) 55%, #fff)}
body.pg .chk input:focus-visible{outline-color:color-mix(in srgb, var(--bg) 55%, #fff)}

/* блок «Открыть…» — цветная карточка страницы */
body.pg .pg-body .pg-cta{
  border:0;border-radius:24px;color:#fff;
  background:
    radial-gradient(60% 70% at 100% 0%, rgb(255 255 255 / .14), transparent 70%),
    linear-gradient(150deg, var(--bg), color-mix(in srgb, var(--bg) 68%, #000));
}
body.pg .pg-body .pg-cta p,body.pg .pg-body .pg-cta h2{color:#fff}

/* кнопки и ссылки в шапке — мягче */
:where(body.pg) .pill{box-shadow:0 8px 20px -10px rgb(0 0 0 / .5)}

@media (max-width:420px){
  body.pg .pg-body article > section:not(.pg-cta):not(:has(> .tiles)),body.pg .pg-body article > section.tool{padding:16px;border-radius:20px}
}

/* на бумаге — без карточек и теней */
@media print{
  :where(body.pg) .pg-hero{background:none !important;border-radius:0 !important}
  body.pg .pg-body article > section,body.pg .pg-body .pg-cta{background:none !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;padding:0 !important}
  body.pg .pg-body article > section > h2::before{display:none !important}
}