/* web/static/parents.css — «Родителям» /parents, редизайн v2 (29.09).
   Первый экран — классы главной (home.css подключается раньше: .hm-hero,
   .hm-cam, .hm-modes, .hm-facts, .hm-demo), здесь — подписи под режим и
   блоки ниже. Токены — из style.css. */

.pa-hero .eyebrow{margin:0 0 14px}

/* Подписи под выбранный режим. Без :has() остаются подписи проверки. */
.pa-explain{display:none}
.pa-cam:has(input[value="explain"]:checked) .pa-check{display:none}
.pa-cam:has(input[value="explain"]:checked) .pa-explain{display:inline}
.pa-cam .hm-zone .field-hint{display:block}
/* Кнопка внизу ведёт к карточке: не прятать её под прилипшей шапкой. */
#hero-drop{scroll-margin-top:96px}

.pa-sec h2{margin:0 0 20px}
.pa-lead{margin:-8px 0 20px;max-width:44em;font-size:16.5px}

/* Три ситуации */
.pa-sits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pa-sit{display:grid;align-content:start;gap:10px;padding:20px 20px 18px;border-radius:20px;background:var(--card);
  border:1px solid var(--border)}
.pa-sit p{margin:0;font-size:15.5px;line-height:1.5;color:var(--muted)}
.pa-sit p b{color:var(--ink)}
.pa-sit .pa-q{font-size:17.5px;font-weight:800;line-height:1.35;letter-spacing:-.01em;color:var(--ink)}
.pa-tag{justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:var(--pill);
  background:var(--accent-soft);color:var(--accent-ink);font-size:13.5px;font-weight:700}
.pa-tag .ico{width:16px;height:16px}

/* Пример проверки */
.pa-demo .hm-demo-photo svg{width:160px;height:120px}
/* Ширина надписи задана textLength: при 22 px «3/7» вылезала за листок
   (стенд 29.09), а черта ошибки должна стоять ровно под ответом. */
.pa-demo-sum{font:600 19px 'Onest',system-ui,sans-serif;fill:var(--ink)}
.pa-demo-mark{fill:none;stroke:var(--danger);stroke-width:2.5;stroke-linecap:round}
.pa-res{display:grid;gap:10px}
.pa-verdict{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;font-size:21px;font-weight:800;letter-spacing:-.01em}
.pa-verdict span{padding:3px 9px;border-radius:var(--pill);background:var(--danger-soft);color:var(--danger);
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pa-chk{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15.5px;line-height:1.45}
.pa-chk li{display:grid;grid-template-columns:24px 1fr;gap:8px}
.pa-x{display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;font-size:13px;font-weight:900;
  background:var(--danger-soft);color:var(--danger)}
.pa-fix{margin:0;padding:10px 12px;border-radius:12px;background:var(--paper);font-size:15px}
.pa-res .hm-demo-tag{margin:0}

/* По классам */
.pa-grades{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pa-grade{display:grid;align-content:start;gap:6px;padding:16px 18px;border-radius:18px;background:var(--card);border:1px solid var(--border)}
.pa-grade b{font-size:15px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink)}
.pa-grade span{font-size:15px;line-height:1.5}
.pa-grade a{margin-top:4px;font-size:14.5px;font-weight:700;text-decoration:none}
@media (hover:hover) and (pointer:fine){.pa-grade a:hover{text-decoration:underline}}

/* Помощник, а не решебник */
.pa-not{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;max-width:960px}
.pa-not>div{padding:18px 20px;border-radius:18px;border:1px solid var(--border);background:var(--card)}
.pa-not>.pa-us{border-color:var(--accent);background:linear-gradient(180deg,var(--wash),var(--card) 60%)}
.pa-not h3{margin:0 0 8px;font-size:17px}
.pa-not ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:15px;color:var(--muted)}
.pa-together{list-style:none;counter-reset:s;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;max-width:960px}
.pa-together li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:10px;font-size:15px;line-height:1.45;color:var(--muted)}
.pa-together li::before{content:counter(s);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-ink);font-weight:800;font-size:14px}
.pa-together b{color:var(--ink)}

/* Деньги и приватность */
.pa-calm{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pa-calm li{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:16px 18px;border-radius:18px;background:var(--card);
  border:1px solid var(--border);font-size:15px;line-height:1.5;color:var(--muted)}
.pa-calm .ico{width:24px;height:24px}
.pa-calm b{display:block;color:var(--ink);font-size:16px}

/* Финал: на ПК картинка слева, на телефоне — без неё */
.pa-final{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;align-items:center;padding:32px 36px;border-radius:24px;
  background:var(--accent-soft)}
.pa-final img{display:block;width:260px;height:auto;border-radius:18px}
.pa-final h2{margin:0 0 10px}
.pa-final p{margin:0 0 16px;color:var(--muted)}
.pa-final p:last-child{margin:0}

@media(max-width:959px){
  .pa-hero .eyebrow{order:0;margin-bottom:10px}
  .pa-sits,.pa-calm{grid-template-columns:1fr}
  .pa-grades{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:759px){
  .pa-hero .eyebrow{display:none}
  .pa-hero.hm-hero{padding-top:16px}
  .pa-sec h2{margin-bottom:16px}
  .pa-sit{padding:16px}
  .pa-sit .pa-q{font-size:16.5px}
  .pa-demo .hm-demo-photo svg{width:80px;height:60px}
  .pa-verdict{font-size:19px}
  .pa-chk{font-size:15px}
  .pa-grades,.pa-not,.pa-together{grid-template-columns:1fr}
  .pa-final{grid-template-columns:1fr;padding:26px 18px;text-align:center}
  .pa-final img{display:none}
}
/* «Сфотографировать тетрадь» и «…задание» — в одну строку на 320–374 px
   (как на странице ЕГЭ). */
@media(max-width:374px){
  .pa-cam #hero-drop-submit{font-size:15.5px}
}
@media(max-width:339px){
  .pa-cam #hero-drop-submit{font-size:14.5px}
}