/*
 * Оформление содержимого сайтов, которое не привязано к теме (28.10): спойлеры основного сайта, карточки документов,
 * карточки сотрудников и анкеты «Методслужбы», меню раздела «Сведения» и сноска приказа № 1493.
 * Подключают темы, в которых своего оформления этого нет («Младшая», Google, Wix): цвета — из переменных темы,
 * селекторы в :where() — у темы своё правило всегда главнее.
 */
body{
  --kit-accent: var(--color-teal, var(--gs-link, var(--wx-link, #1a5f9c)));
  --kit-heading: var(--color-teal-dark, var(--gs-heading, var(--wx-heading, #1f2d3a)));
  --kit-text: var(--color-ink, var(--gs-ink, var(--wx-text, #222)));
  --kit-muted: var(--color-ink-soft, #5f6368);
  --kit-border: var(--color-border, #dadce0);
  --kit-card: var(--color-card, var(--gs-page-bg, var(--wx-page-bg, #fff)));
  --kit-soft: color-mix(in srgb, var(--kit-accent) 8%, var(--kit-card));
}

/* спойлеры: .sveden-details/.ddut-spoiler (основной сайт), details.spoiler (методслужба) */
:where(details.sveden-details, details.spoiler){ margin: 0 0 .8em; border: 1px solid var(--kit-border); border-radius: 10px; background: var(--kit-card); }
:where(details.sveden-details, details.spoiler) > summary{ cursor: pointer; position: relative; padding: .7rem 1rem .7rem 2.4rem; font-weight: 700; color: var(--kit-heading); list-style: none; line-height: 1.4; border-radius: 10px; }
:where(details.sveden-details, details.spoiler) > summary::-webkit-details-marker{ display: none; }
:where(details.sveden-details, details.spoiler) > summary::before{ content: ""; position: absolute; left: 1rem; top: 1.1rem; width: .45rem; height: .45rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .2s; }
:where(details.sveden-details, details.spoiler)[open] > summary::before{ transform: rotate(45deg); }
:where(details.sveden-details, details.spoiler)[open] > summary{ border-bottom: 1px solid var(--kit-border); border-radius: 10px 10px 0 0; }
:where(details.sveden-details, details.spoiler) > summary:hover{ background: var(--kit-soft); }
:where(.ddut-spoiler-body, .spoiler__body){ padding: .75rem 1rem; }
:where(.ddut-spoiler-body, .spoiler__body) > :first-child{ margin-top: 0; }
:where(.ddut-spoiler-body, .spoiler__body) > :last-child{ margin-bottom: 0; }
:where(.ddut-spoiler-body, .spoiler__body) :where(table){ display: block; max-width: 100%; overflow-x: auto; }

/* карточки документов (превью первой страницы, «Открыть») */
:where(.doc-card){ margin: 1em 0 1.4em; max-width: 640px; }
:where(a.doc-card__link){ display: flex; align-items: stretch; gap: 1rem; padding: .8rem; background: var(--kit-card); border: 1px solid var(--kit-border); border-radius: 10px; color: var(--kit-text); text-decoration: none; }
:where(a.doc-card__link):hover{ border-color: var(--kit-accent); box-shadow: 0 4px 14px rgba(0, 0, 0, .1); }
:where(.doc-card__thumb){ flex: 0 0 110px; align-self: flex-start; overflow: hidden; border: 1px solid var(--kit-border); border-radius: 6px; }
:where(.doc-card__thumb) img{ display: block; width: 100%; margin: 0; border-radius: 0; }
:where(.doc-card__icon){ flex: 0 0 110px; min-height: 140px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-weight: 800; color: #fff; background: var(--kit-accent); }
:where(.doc-card__icon--docx, .doc-card__icon--doc){ background: #2b579a; }
:where(.doc-card__icon--pptx, .doc-card__icon--ppt){ background: #b7472a; }
:where(.doc-card__icon--xlsx, .doc-card__icon--xls){ background: #217346; }
:where(.doc-card__body){ display: flex; flex-direction: column; justify-content: center; gap: .35rem; min-width: 0; }
:where(.doc-card__title){ font-weight: 700; line-height: 1.35; color: var(--kit-heading); overflow-wrap: anywhere; }
:where(.doc-card__meta){ font-size: .85rem; color: var(--kit-muted); }
:where(.doc-card__action){ align-self: flex-start; padding: .25rem .9rem; border: 1px solid var(--kit-accent); border-radius: 8px; color: var(--kit-accent); font-size: .9rem; font-weight: 700; }
:where(a.doc-card__link):hover :where(.doc-card__action){ background: var(--kit-accent); color: #fff; }

/* карточки сотрудников: сетка, фото 3:4, первая (руководитель) — во всю ширину */
:where(.staff-grid){ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin: 1em 0; }
:where(.staff-card){ display: flex; flex-direction: column; overflow: hidden; background: var(--kit-card); border: 1px solid var(--kit-border); border-radius: 10px; }
:where(.staff-card__photo){ position: relative; overflow: hidden; aspect-ratio: 3 / 4; background: var(--kit-soft); }
:where(.staff-card__photo) img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; margin: 0; border-radius: 0; max-width: none; }
:where(.staff-card__body){ padding: .9rem 1rem 1.1rem; border-top: 3px solid var(--kit-accent); }
:where(.staff-card__name){ margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 800; line-height: 1.3; color: var(--kit-heading); }
:where(.staff-card__pos){ margin: 0; font-size: .9rem; line-height: 1.4; color: var(--kit-muted); }
:where(.staff-card--lead){ grid-column: 1 / -1; flex-direction: row; }
:where(.staff-card--lead) :where(.staff-card__photo){ flex: 0 0 220px; }
:where(.staff-card--lead) :where(.staff-card__body){ align-self: center; padding: 1.5rem; border-top: 0; border-left: 3px solid var(--kit-accent); }

/* анкеты и тесты (как Google Формы) */
:where(.gf-form){ display: flex; flex-direction: column; gap: .8rem; max-width: 760px; }
:where(.gf-head, .gf-q, .gf-sec, .gf-page){ padding: 1.1rem 1.3rem; background: var(--kit-card); border: 1px solid var(--kit-border); border-radius: 10px; }
:where(.gf-head){ border-top: 6px solid var(--kit-accent); }
:where(.gf-q__title, .gf-head__title, .gf-sec__title){ font-weight: 700; color: var(--kit-heading); }
:where(.gf-req){ color: #b3261e; }
:where(.gf-q) :where(input[type=text], input[type=email], input[type=tel], textarea){ width: 100%; max-width: 100%; box-sizing: border-box; }

/* «Сведения»: меню раздела над текстом и сноска приказа № 1493 */
:where(.cms-infonav){ margin: 0 0 20px; background: var(--kit-card); border: 1px solid var(--kit-border); border-radius: 10px; }
:where(.cms-infonav) > summary{ cursor: pointer; padding: 10px 16px; font-weight: 700; color: var(--kit-heading); }
:where(.cms-infonav) ul{ display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px; margin: 0; padding: 0 12px 12px; list-style: none; }
:where(.cms-infonav) a{ display: block; padding: 6px 10px; border-radius: 8px; color: var(--kit-accent); text-decoration: none; font-size: .92rem; line-height: 1.35; }
:where(.cms-infonav) a:hover{ background: var(--kit-soft); }
:where(.cms-infonav) a[aria-current]{ background: var(--kit-accent); color: #fff; }
:where(.cms-footnote){ margin: 32px 0 0; padding-top: 16px; border-top: 1px solid var(--kit-border); font-size: .82rem; color: var(--kit-muted); }

@media (max-width: 640px){
  :where(.staff-grid){ grid-template-columns: 1fr 1fr; gap: 12px; }
  :where(.staff-card--lead) :where(.staff-card__photo){ flex-basis: 42%; }
  :where(.staff-card--lead) :where(.staff-card__body){ padding: .9rem; }
  :where(.doc-card__thumb, .doc-card__icon){ flex-basis: 80px; }
  :where(.doc-card__icon){ min-height: 100px; }
}