/* ВШО — дизайн-система освітніх матеріалів (SAMI).
   Джерело бренд-примітивів: брендбук «Всеукраїнська школа онлайн».
   Архітектура токенів: примітиви → семантика (осі «предмет» × «клас») → компоненти.
   Слайд = 1280×720 (16:9). Реальний лейаут браузера — flexbox/grid. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root{
  /* ── 1. ПРИМІТИВИ (незмінна палітра бренду) ── */
  --navy:#172142; --blue:#506EFF; --green:#29CF7B; --yellow:#FFBD00;
  --white:#FFFFFF; --gray:#EDEEF0; --gray-fg:#5B6472;
  /* розширення для семантики предметів (гармонізовані з брендом) */
  --violet:#7C5CFF; --teal:#17B3B0; --coral:#F2683C; --indigo:#3F5BD9;

  --font:'Montserrat',system-ui,sans-serif;
  --pad:72px; --radius:24px;

  /* ── 2. СЕМАНТИКА (значення за замовчуванням) ── */
  --ink:var(--navy);            /* основний текст на світлому */
  --ink-invert:var(--white);    /* текст на темному */
  --surface:var(--white);       /* тло контентного слайда */
  --surface-dark:var(--navy);   /* тло титулу/підсумку */
  --accent:var(--blue);         /* акцент ПРЕДМЕТА для ЗАЛИВОК/рамок/булетів */
  --accent-ink:#2F45C7;         /* текст-безпечний акцент (≥4.5:1 на білому) для ТЕКСТУ */
  --accent-2:var(--yellow);     /* другорядний акцент (рефлексія, декор) */
  --highlight:var(--green);     /* підсвітка (плашка ВШО на темному) */
  /* КЛАС — незалежна вісь: власний токен, не змішується з акцентом предмета */
  --grade:var(--navy);          /* тон чипа рівня */
  --grade-label:"";             /* підпис рівня */
}

/* ── Ось А «ПРЕДМЕТ» (незалежна): керує ЛИШЕ --accent ── */
[data-subject="pravo"]       { --accent:var(--blue);   --accent-ink:#2F45C7; }
[data-subject="istoriya"]    { --accent:var(--yellow); --accent-ink:#9A6200; --accent-2:var(--coral); }
[data-subject="geografiya"]  { --accent:var(--green);  --accent-ink:#12854C; }
[data-subject="ukr-mova-lit"]{ --accent:var(--violet); --accent-ink:#5B3FD6; --accent-2:var(--yellow); }
/* STEM-кластер */
[data-subject="him-bio"]     { --accent:var(--teal);   --accent-ink:#0E7C7A; }
[data-subject="mat-fiz"]     { --accent:var(--indigo); --accent-ink:#2F45C7; }
[data-subject="informatyka"] { --accent:var(--blue);   --accent-ink:#2F45C7; }
[data-subject="tehnologii"]  { --accent:var(--coral);  --accent-ink:#C0431C; }

/* ── Ось Б «КЛАС» (незалежна): керує ЛИШЕ --grade/--grade-label ──
   Осі ортогональні: будь-який предмет × будь-який клас — комбінуються вільно,
   бо читають різні токени й не перекривають один одного. */
[data-grade="9"]  { --grade:#2B3A67; --grade-label:"9 клас";  }
[data-grade="10"] { --grade:#3F5BD9; --grade-label:"10 клас"; }
[data-grade="11"] { --grade:#17739B; --grade-label:"11 клас"; }

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:#c9ccd4;padding:24px;display:flex;flex-direction:column;gap:24px;align-items:center}

/* ── слайд-каркас ── */
.slide{
  position:relative;width:1280px;height:720px;overflow:hidden;
  background:var(--surface);border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.18);
  display:flex;flex-direction:column;padding:var(--pad);
}
.slide.navy{background:var(--surface-dark);color:var(--ink-invert)}

/* декор */
.ring{position:absolute;border-radius:50%;border:3px solid var(--accent-2);opacity:.5}
.ring.tr{width:220px;height:220px;top:-70px;right:-60px}
.ring.br{width:260px;height:260px;bottom:-90px;right:80px;border-color:var(--highlight)}

/* знак-трансформер (логотип — завжди всі 3 бренд-кольори) */
.mark{position:relative;width:150px;height:118px;flex:0 0 auto}
.mark i{position:absolute;display:block}
.mark .s1{width:92px;height:92px;border-radius:24px;background:var(--blue);left:0;top:22px}
.mark .s2{width:70px;height:70px;border-radius:50%;background:var(--yellow);left:74px;top:0}
.mark .s3{width:54px;height:54px;border-radius:16px;background:var(--green);left:60px;top:64px}

/* шапка контентного слайда */
.head{display:flex;flex-direction:column;gap:14px;flex:0 0 auto}
.eyebrow{font-size:20px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink)}
.slide.navy .eyebrow{color:var(--highlight)}
h1.title{font-size:40px;font-weight:700;line-height:1.1;color:var(--ink)}
.slide.navy h1.title{color:var(--ink-invert)}
.bar{width:210px;height:10px;border-radius:5px;background:var(--accent)}
.lead{font-size:26px;font-weight:500;line-height:1.4;color:var(--ink);max-width:1000px}

/* тіло */
.body{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:20px;min-height:0}
.body.top{justify-content:flex-start;padding-top:28px}
ul.bul{list-style:none;display:flex;flex-direction:column;gap:22px}
ul.bul li{display:flex;gap:18px;align-items:flex-start;font-size:27px;font-weight:500;line-height:1.35;color:var(--ink)}
.slide.navy ul.bul li{color:var(--ink-invert)}
ul.bul li::before{content:"";flex:0 0 auto;width:20px;height:20px;border-radius:6px;background:var(--accent);margin-top:9px}
.slide.navy ul.bul li::before{background:var(--highlight)}

/* титул */
.title-slide{justify-content:space-between}
.title-slide .big{font-size:52px;font-weight:800;line-height:1.13;color:var(--ink-invert)}
.title-slide .sub{font-size:24px;font-weight:500;color:var(--highlight);margin-top:18px}
.pill{align-self:flex-start;margin-top:26px;background:var(--yellow);color:var(--navy);
  font-weight:700;font-size:22px;letter-spacing:.02em;padding:14px 26px;border-radius:16px}
.grade-chip{display:inline-block;margin-left:12px;background:var(--grade);color:#fff;
  font-size:16px;font-weight:700;padding:4px 14px;border-radius:9999px;vertical-align:middle}
.grade-chip::after{content:var(--grade-label)}   /* підпис керується виключно віссю КЛАС */

/* завдання */
.rail{position:absolute;left:0;top:0;width:34px;height:100%;background:var(--accent)}
.badge{align-self:flex-start;background:var(--navy);color:var(--white);font-weight:700;
  font-size:24px;letter-spacing:.03em;padding:12px 26px;border-radius:28px;margin-bottom:22px}
.badge .star{color:var(--accent-2)}
.task-body{font-size:29px;font-weight:500;line-height:1.5;color:var(--ink);max-width:1040px}
.task-meta{margin-top:26px;font-size:24px;font-weight:600;color:var(--accent-ink)}

/* відкриті запитання */
.qframe{position:absolute;inset:40px;border:8px solid var(--accent);border-radius:28px}
.qwrap{position:relative;z-index:1;display:flex;flex-direction:column;gap:26px;justify-content:center;flex:1}
.qwrap .q{display:flex;gap:18px;align-items:flex-start;font-size:30px;font-weight:500;line-height:1.35;color:var(--ink)}
.qwrap .q::before{content:"";flex:0 0 auto;width:18px;height:18px;border-radius:6px;background:var(--accent-2);margin-top:10px}

/* картка-джерело */
.src-card{margin:auto;width:900px;background:var(--white);border-radius:28px;padding:56px 64px;
  box-shadow:0 12px 40px rgba(0,0,0,.28);position:relative}
.src-card .quote{font-size:34px;font-weight:700;line-height:1.3;color:var(--navy)}
.src-card .sub2{font-size:28px;font-weight:500;color:var(--navy);margin-top:18px;line-height:1.35}
.src-card .attr{margin-top:26px;font-size:22px;font-weight:700;color:var(--accent-ink);border-top:4px solid var(--highlight);padding-top:18px;display:inline-block}
.src-q{position:absolute;top:-30px;left:52px;font-size:100px;font-weight:800;color:var(--accent-2);line-height:1}

/* підсумок / джерела */
.reflect{margin-top:8px;font-size:26px;font-weight:600;color:var(--accent-2)}
ol.refs{list-style:none;counter-reset:r;display:flex;flex-direction:column;gap:16px;font-size:19px;line-height:1.4;color:var(--ink)}
ol.refs li{counter-increment:r;display:flex;gap:14px}
ol.refs li::before{content:counter(r);flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:var(--gray);
  color:var(--ink);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:16px}

/* зона схеми */
.scheme{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;margin-top:20px}
.scheme svg{width:100%;height:100%;max-height:430px}
.page-no{position:absolute;bottom:26px;right:32px;font-size:16px;font-weight:600;color:var(--gray-fg)}
.slide.navy .page-no{color:rgba(255,255,255,.5)}

/* ── друк деку у PDF (headless Chrome --print-to-pdf) ──
   Кожен слайд .slide — окрема сторінка розміром 1280×720 (16:9), без тіней і
   полів, щоб експорт збігався з екранним лейаутом слайда. */
@media print{
  @page{size:1280px 720px;margin:0}
  body{padding:0;gap:0;background:#fff}
  .slide{break-after:page;page-break-after:always;box-shadow:none;border-radius:0}
  .slide:last-child{break-after:auto;page-break-after:auto}
}