/* ============================================================
   «КОД ИНТЕЛЛЕКТА» — дизайн-токены и базовые компоненты курса
   Базируется на дизайн-коде Reezonly, адаптирован для школьной
   аудитории и проекторного показа. Подключать во ВСЕ артефакты.
   ============================================================ */

/* --- Шрифты: локальные Montserrat (пути от папки артефакта: скопируй
       fonts/ из style-guide/assets/fonts/ рядом с html) --- */
/* @import url('fonts/montserrat.css');  ← подключается в артефакте */

:root{
  /* --- Бренд (ядро Reezonly — НЕ менять) --- */
  --blue:      #3366FF;  /* фирменный синий: акценты, кнопки, обложки */
  --mint:      #1DFBAB;  /* мятный — ТОЛЬКО на тёмных/синих поверхностях */
  --ink:       #0B0D17;  /* почти чёрный: заголовки, тёмные слайды */
  --paper:     #EEF1F8;  /* фон светлых поверхностей */
  --card:      #FFFFFF;  /* карточки */
  --line:      #E2E7F2;  /* границы карточек (вместо теней!) */
  --blue-soft: #EDF2FF;  /* светло-синие плашки (промпт-карточки, чипы) */
  --blue-line: #D9E3FF;  /* границы светло-синих плашек */
  --body:      #414A5F;  /* основной текст */
  --dim:       #6A7288;  /* вторичный текст */
  --mute:      #9AA3B8;  /* служебный текст */

  /* --- Расширение для школьного курса --- */
  --coral:      #FF6B4A; /* энергия/внимание: важные факты, «стоп»-предупреждения */
  --coral-soft: #FFEFEA; /* подложка коралловых плашек */
  --coral-line: #FFD9CE;
  --amber:      #FFB930; /* игровые метки, «звёздочки», достижения */
  --amber-soft: #FFF4DC;
  --amber-line: #FFE3A8;
  --violet:     #7A5CFF; /* интерактив/уровни/код; второстепенный акцент */
  --violet-soft:#F1EDFF;
  --violet-line:#DFD6FF;
  --green:      #16B364; /* «верно», успех (не путать с mint!) */
  --green-soft: #E8F8EF;
  --green-line: #C4EDD6;

  /* --- Токен-плитки (фирменный приём курса: текст, разбитый на токены) --- */
  --tok-1: #EDF2FF; --tok-1-line:#D9E3FF; /* синий   */
  --tok-2: #E9FBF2; --tok-2-line:#C4EDD6; /* зелёный */
  --tok-3: #FFF4DC; --tok-3-line:#FFE3A8; /* янтарный*/
  --tok-4: #F1EDFF; --tok-4-line:#DFD6FF; /* фиолет  */
  --tok-5: #FFEFEA; --tok-5-line:#FFD9CE; /* коралл  */
}

*{ box-sizing:border-box; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  color:var(--ink); background:var(--paper);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

/* ============ ЛОГОТИП КУРСА (текстовый, как у Reezonly) ============ */
/* «код интеллекта.» — строчными, 800, точка синяя (на тёмном — мятная) */
.brand{ font-weight:800; letter-spacing:-0.02em; color:var(--ink); white-space:nowrap; }
.brand .dot{ color:var(--blue); }
.brand.on-dark{ color:#fff; }
.brand.on-dark .dot{ color:var(--mint); }
.brand .sub{ font-weight:600; color:var(--mute); }

/* ============ СЛАЙДЫ (дека 1280×720) ============ */
.slide{ width:1280px; height:720px; position:relative; overflow:hidden;
        background:var(--paper); page-break-after:always; }
.slide:last-child{ page-break-after:auto; }
.pad{ position:absolute; inset:0; padding:48px 64px 40px; display:flex; flex-direction:column; }
.bd{ flex:1; display:flex; flex-direction:column; justify-content:center; min-height:0; }

/* Шапка слайда: крошка главы слева + логотип справа.
   ВАЖНО (анти-нейрослоп, регламент 08): никакого uppercase и разрядки —
   обычный регистр, иерархия весом и цветом. */
.hdr{ display:flex; align-items:center; justify-content:space-between; }
.crumb{ font-size:14.5px; font-weight:700; color:var(--mute); }
.hdr .brand{ font-size:17px; }

/* Заголовочный блок */
.eyebrow{ color:var(--blue); font-size:16px; font-weight:700; letter-spacing:.02em; margin:14px 0 6px; }
h1.sl{ font-size:44px; line-height:1.08; font-weight:800; letter-spacing:-0.01em; margin:0 0 10px; color:var(--ink); }
.lead{ font-size:19px; line-height:1.45; color:var(--dim); font-weight:500; max-width:900px; margin:0; }

/* Номер страницы и футер */
.pageno{ position:absolute; right:28px; bottom:22px; font-size:13px; font-weight:700; color:var(--mute); }
.foot{ position:absolute; left:64px; bottom:22px; font-size:12.5px; font-weight:600; color:var(--mute); }

/* ============ КОМПОНЕНТЫ ============ */
.card{ background:var(--card); border:1.5px solid var(--line); border-radius:22px; padding:22px 24px; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.grid3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; }

/* Чек-строка с галочкой */
.ck{ display:flex; gap:12px; align-items:flex-start; font-size:17px; line-height:1.4; color:var(--body); font-weight:500; }
.ck svg{ flex:0 0 auto; margin-top:2px; }

/* Синий круг с номером шага */
.num{ width:34px; height:34px; border-radius:50%; background:var(--blue); color:#fff;
      display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:800; flex:0 0 auto; }

/* Чипы */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ background:var(--blue-soft); border:1.5px solid var(--blue-line); color:var(--ink);
       border-radius:999px; padding:7px 16px; font-size:15px; font-weight:600; }
.chip.coral{ background:var(--coral-soft); border-color:var(--coral-line); }
.chip.amber{ background:var(--amber-soft); border-color:var(--amber-line); }

/* Промпт-карточка (пример запроса к нейросети) */
.prompt{ background:var(--blue-soft); border:1.5px solid var(--blue-line); border-radius:16px;
         padding:14px 18px; font-size:16.5px; line-height:1.45; color:var(--ink); font-weight:500; }
.prompt .who{ font-size:13.5px; font-weight:700; color:var(--blue); display:block; margin-bottom:4px; }
.answer{ background:var(--card); border:1.5px solid var(--line); border-radius:16px;
         padding:14px 18px; font-size:16.5px; line-height:1.45; color:var(--body); font-weight:500; }
.answer .who{ font-size:13.5px; font-weight:700; color:var(--mute); display:block; margin-bottom:4px; }

/* Тёмный баннер с мятным акцентом */
.banner{ background:var(--ink); color:#fff; border-radius:22px; padding:24px 28px; }
.banner .hl{ color:var(--mint); font-weight:700; }

/* Внимание / предупреждение */
.alert{ background:var(--coral-soft); border:1.5px solid var(--coral-line); border-radius:16px;
        padding:14px 18px; font-size:16px; line-height:1.45; color:var(--ink); font-weight:500; }
.alert .tag{ color:var(--coral); font-weight:800; }

/* ============ ТОКЕН-ПЛИТКИ (фирменный приём) ============ */
.tokens{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.tok{ display:inline-block; border-radius:10px; padding:6px 10px; font-size:17px; font-weight:600; color:var(--ink);
      border:1.5px solid; }
.tok.t1{ background:var(--tok-1); border-color:var(--tok-1-line); }
.tok.t2{ background:var(--tok-2); border-color:var(--tok-2-line); }
.tok.t3{ background:var(--tok-3); border-color:var(--tok-3-line); }
.tok.t4{ background:var(--tok-4); border-color:var(--tok-4-line); }
.tok.t5{ background:var(--tok-5); border-color:var(--tok-5-line); }

/* ============ ПЕЧАТНЫЕ A4-ДОКУМЕНТЫ (памятка, раздатка, сценарий) ============ */
.a4{ width:210mm; min-height:297mm; background:#fff; margin:0 auto; position:relative;
     page-break-after:always; }
.a4:last-child{ page-break-after:auto; }
.a4 .inner{ padding:14mm 16mm; }

/* Ч/б-безопасные правила: в печатных материалах смысл НЕ передаётся только цветом.
   Для ч/б используем: заливку --ink, контурные рамки 1.5–2px, паттерны, жирность. */
.bw-head{ background:var(--ink); color:#fff; border-radius:14px; padding:10px 16px; }
.bw-box{ border:2px solid var(--ink); border-radius:14px; padding:12px 16px; }
.bw-box-dashed{ border:2px dashed #8a8f9c; border-radius:14px; padding:12px 16px; }
.writeline{ border-bottom:1.6px solid #B9BFCC; height:9mm; }

/* ============ PDF ============ */
@page{ margin:0; }
/* размер задаётся в артефакте:
   дека:      @page{ size:1280px 720px; }
   A4 портрет: @page{ size:210mm 297mm; }  */