/* =========================================================
   МАТЕРІАЛИ ГУРТКА РОБОТОТЕХНІКИ
   Оформлення документів: зміст ліворуч, текст праворуч,
   схеми, таблиці КТП, картки правил, азбука Морзе.
   Конструктор кола має власний файл css/circuit.css.

   Токени артефакту (--accent, --panel…) відображені на
   токени порталу, щоб матеріали виглядали частиною сайту.
   ========================================================= */
.robo-doc{
  --accent:var(--primary); --accent-soft:var(--primary-l); --panel:var(--card);
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;
  display:grid; grid-template-columns:248px 1fr; gap:24px; align-items:start;
}
.robo-doc.no-toc{grid-template-columns:1fr}   /* розділ без змісту */
@media(max-width:900px){ .robo-doc{grid-template-columns:1fr} }

/* ===== зміст розділу ===== */
.robo-toc{
  position:sticky; top:86px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:14px;
  max-height:calc(100vh - 110px); overflow:auto;
}
@media(max-width:900px){ .robo-toc{position:static;max-height:none} }
.robo-toc .tt{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin:2px 0 8px}
.robo-toc a{display:block;padding:7px 10px;border-radius:9px;color:var(--ink);font-size:14px;cursor:pointer;line-height:1.35;text-decoration:none}
.robo-toc a:hover{background:var(--primary-l);color:var(--primary)}

/* ===== типографіка матеріалу ===== */
.robo-body{min-width:0;font-size:16px;line-height:1.6}
.robo-body h2{font-size:21px;margin:30px 0 10px;padding-top:14px;border-top:1px solid var(--line)}
.robo-body h3{font-size:17px;margin:22px 0 6px;color:var(--primary)}
.robo-body p{margin:10px 0}
.robo-body ul,.robo-body ol{margin:10px 0;padding-left:24px}
.robo-body li{margin:5px 0}
.robo-body a{color:var(--primary);font-weight:600;cursor:pointer;text-decoration:none}
.robo-body a:hover{text-decoration:underline}
.robo-body strong{font-weight:700}

.robo-body table{border-collapse:collapse;width:100%;margin:14px 0;font-size:14.5px;display:block;overflow-x:auto}
.robo-body th,.robo-body td{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
.robo-body th{background:var(--primary-l);font-weight:700}

.robo-body .hint{background:var(--primary-l);border-left:4px solid var(--primary);padding:10px 14px;border-radius:0 10px 10px 0;margin:14px 0}

/* кнопки всередині матеріалу — вигляд кнопок порталу */
.robo-body button.tool{
  font:inherit;font-size:14px;font-weight:600;background:var(--primary-l);color:var(--primary);
  border-radius:11px;padding:9px 16px;cursor:pointer;margin-right:8px;
}
.robo-body button.tool:hover{background:#e0ddfb}

/* ===== схеми ===== */
.robo-body figure.fig{
  margin:16px 0;padding:12px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);cursor:zoom-in;
}
.robo-body figure.fig svg{width:100%;height:auto;display:block;max-width:560px;margin:0 auto}
.robo-body figcaption{margin-top:8px;font-size:14px;color:var(--muted);text-align:center}

.robo-lightbox{
  display:none;position:fixed;inset:0;z-index:100;background:rgba(25,25,55,.8);
  align-items:center;justify-content:center;padding:20px;cursor:zoom-out;
}
.robo-lightbox.on{display:flex}
.robo-lightbox .box{background:#fff;border-radius:18px;padding:18px;max-width:1100px;width:100%;max-height:92vh;overflow:auto}
.robo-lightbox svg{width:100%;height:auto}
.robo-lightbox .cap{margin-top:8px;text-align:center;color:var(--muted);font-size:15px}
.robo-lightbox .acts{display:flex;gap:8px;justify-content:center;margin-top:12px;cursor:auto}

/* ===== правила гуртка ===== */
.robo-body .rules{margin:18px 0}
.robo-body .rule{
  display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;margin:10px 0;box-shadow:var(--shadow);
}
.robo-body .rule .rn{
  flex:none;width:44px;height:44px;border-radius:50%;background:var(--primary);color:#fff;
  font-size:22px;font-weight:700;display:grid;place-items:center;
}
.robo-body .rule .rtitle{font-size:18px;font-weight:700;line-height:1.3}
.robo-body .rule .rsub{margin-top:3px}
.robo-body .rule .rwhy{margin-top:7px;font-size:14px;color:var(--muted)}

/* ===== календарно-тематичне планування ===== */
.robo-body .ktphead .approve{display:flex;gap:40px;font-size:13.5px;color:var(--muted);line-height:1.4;margin:0 0 18px}
.robo-body .ktphead .approve span{flex:1}
.robo-body h2.ktptitle{border:none;padding-top:0;text-align:center;margin:6px 0 2px;font-size:22px}
.robo-body .ktpsub{text-align:center;margin:0 0 10px;font-size:16px}
.robo-body .ktpmeta{font-size:14.5px;color:var(--muted);margin:0 0 6px}
.robo-body [contenteditable]{
  background:var(--primary-l);border-radius:5px;padding:1px 6px;font-style:normal;
  min-width:52px;display:inline-block;outline:none;
}
.robo-body [contenteditable]:focus{box-shadow:0 0 0 2px var(--primary)}
.robo-body .ktpwrap{overflow-x:auto}
.robo-body table.ktp{display:table;width:100%;font-size:14px}
.robo-body table.ktp th{background:var(--primary-l);font-size:13px}
.robo-body table.ktp td.num{text-align:center;width:34px}
.robo-body table.ktp td.dt{width:78px}
.robo-body table.ktp td.h{text-align:center;width:44px}
.robo-body table.ktp td.note{width:104px}
.robo-body table.ktp td.res{color:var(--muted)}
.robo-body table.ktp tr.modrow td{background:var(--primary);color:#fff;font-weight:700}
.robo-body table.ktp tr.total td{font-weight:700}

/* ===== азбука Морзе ===== */
.robo-body .mgrid{overflow-x:auto;margin:14px 0}
.robo-body table.morse{width:100%;display:table;font-size:16px}
.robo-body table.morse th.ltr{background:var(--primary-l);text-align:center;width:42px;font-size:19px;padding:6px 4px}
.robo-body table.morse td.code{font-family:var(--mono);font-size:19px;letter-spacing:2px;white-space:nowrap;padding:6px 10px}
.robo-body table.morse th:empty,.robo-body table.morse td:empty{border:none;background:none}

/* ===== друк ===== */
@media print{
  header.topbar,.crumbs,.robo-toc,.robo-lightbox,.noprint{display:none!important}
  .robo-doc{display:block}
  .robo-body table{display:table}
  .robo-body figure.fig{break-inside:avoid;border:none;box-shadow:none}
  .robo-body h2{page-break-after:avoid}
}