/* Публичная часть «Хроники-Школы»: стиль D поверх существующей вёрстки.
   Подключается после инлайнового <style> страницы и после css/tokens.css.
   Здесь только то, что относится ко всем страницам: переменные старой темы
   переводятся на токены стиля D, плюс блоки, которых раньше не было. */

/* --- старые имена переменных отображаем на токены стиля D --- */
:root {
  --bg: var(--w-50);
  --card: var(--surface);
  --ink: var(--w-900);
  --muted: var(--w-600);
  --line: var(--w-200);
  --accent: var(--o-600);
  --accent2: var(--o-500);
  --soft: var(--o-50);
  --sky: var(--o-500);
  --sky-soft: var(--o-50);
  --green-soft: var(--o-50);
}

/* --- блок входов по задачам (первый экран главной) --- */
.cs-tasks {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  margin: var(--sp-5) 0 var(--sp-6);
}
.cs-task {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  min-height: 176px;
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--norm) var(--ease), box-shadow var(--norm) var(--ease);
}
.cs-task:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.cs-task .ico {
  width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center; font-size: 22px;
  background: var(--accent-soft);
}
.cs-task h2, .cs-task h3 { margin: 0; font: 800 var(--fs-h3)/1.25 var(--font-head); }
.cs-task p { margin: 0; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.5; }
.cs-task .go { margin-top: auto; font-weight: 800; color: var(--accent-text); font-size: var(--fs-small); }
/* первая плитка — самая крупная по спросу, поэтому тёплая заливка */
.cs-task.first {
  background: var(--grad-warm);
  color: var(--accent-bright-ink);
  border-color: transparent;
  box-shadow: var(--shadow-warm);
}
.cs-task.first .ico { background: rgba(255, 255, 255, .34); }
.cs-task.first p, .cs-task.first .go { color: var(--accent-bright-ink); }

.cs-roles-title {
  margin: var(--sp-6) 0 var(--sp-3);
  font: 800 var(--fs-h3)/1.2 var(--font-head);
}
.cs-roles-title small { display: block; font: 400 var(--fs-small)/1.5 var(--font-sans); color: var(--ink-2); margin-top: 4px; }

/* --- правовой блок с реквизитами оператора (показывается только когда они есть) --- */
.cs-operator { margin-top: var(--sp-5); padding: var(--sp-4); border-radius: var(--radius); background: var(--surface-2); }
.cs-operator dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; font-size: var(--fs-small); }
.cs-operator dt { color: var(--ink-2); }
.cs-operator dd { margin: 0; font-weight: 600; }
.cs-operator:empty { display: none; }

/* --- мелочи, которые чинит стиль D --- */
.cs-note { display: flex; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--radius); background: var(--accent-soft); align-items: flex-start; }
@media (prefers-reduced-motion: reduce) { .cs-task { transition: none; } }

/* --- контраст в первом экране главной: правки после проверки Lighthouse ---
   Яркий оранжевый (--o-500) на белом даёт 3,04:1 — для текста он не годится,
   поэтому метки и подписи используют текстовый оттенок. */
.door .tag { color: var(--accent-text); }
.door.tutor .tag { color: #FFD9B8; }
.door.tutor .peek small,
.door.tutor .peek b { color: #E4D7CC; }
.door .peek small { color: var(--w-700); opacity: 1; }   /* было opacity .75 — давало 3,95:1 */

/* плитки задач всегда выровнены по левому краю, даже внутри центрированного первого экрана */
.cs-tasks, .cs-task, .cs-roles-title { text-align: left; }

/* на широком экране пять входов встают в один ряд */
@media (min-width: 1180px) { .cs-tasks { grid-template-columns: repeat(5, 1fr); } }

/* Широкие таблицы (перевод баллов, структура работы) на телефоне растягивали
   страницу целиком: появлялся горизонтальный скролл всего документа и текст
   уезжал за край. Прокручиваем саму таблицу внутри карточки. */
.card:has(table){overflow-x:auto;-webkit-overflow-scrolling:touch}
.card table{min-width:100%}
@media (max-width:520px){
  .card table{font-size:14px}
  .card table th,.card table td{white-space:nowrap}
}


/* Два столбца — только когда они помещаются. Раньше ширина задавалась в самой
   разметке и на телефоне колонки оставались узкими полосками, а текст уезжал
   за край экрана. */
.info.two{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:720px){ .info.two{grid-template-columns:minmax(0,1fr)} }

/* Широкая таблица прокручивается сама, а не тянет за собой страницу.
   Правило для карточек уже есть выше; это — для таблиц без карточки. */
main table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-collapse:collapse}
@media (max-width:520px){ main table th, main table td{white-space:nowrap;font-size:14px} }


/* Кнопка не может быть шире экрана: на 320 px длинная подпись выносила
   вёрстку за край. Текст переносится, кнопка остаётся кликабельной. */
.btn{max-width:100%}
@media (max-width:420px){
  .btn{white-space:normal;text-align:center;line-height:1.25;padding-top:11px;padding-bottom:11px;height:auto;min-height:var(--tap,46px)}
}


/* Логотип и кнопка в шапке переносятся, когда не помещаются в строку. */
header.top .wrap{flex-wrap:wrap;row-gap:10px}
@media (max-width:420px){
  header.top .btn{margin-left:0;width:100%;font-size:14px}
  header.top .brand{max-width:100%}
}