/* Общие токены и базовые стили сайта курса «Проектно-технологическая практика». См. ../STYLE.md */

:root{
  --ink:#14181f;
  --ink-2:#1b212b;
  --paper:#ece7da;
  --paper-2:#e2ddce;
  --line:#c9c2ac;
  --text:#2a2620;
  --text-dim:#5c5648;
  --signal:#c97a2e;
  --signal-ink:#8f551a;
  --nn:#3e7cb1;
  --gd:#b14c7c;
  --rl:#4c8c6b;
  --par:#7a58ad;
  --tile:#f4f0e4;
  --good:#4c8c6b;
  --bad:#b1503f;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#14181f;
    --paper-2:#1b212b;
    --line:#33394450;
    --text:#e7e2d3;
    --text-dim:#9a927c;
    --signal:#e19a52;
    --signal-ink:#f0b579;
    --tile:#1e2530;
  }
}
:root[data-theme="dark"]{
  --paper:#14181f;
  --paper-2:#1b212b;
  --line:#33394450;
  --text:#e7e2d3;
  --text-dim:#9a927c;
  --signal:#e19a52;
  --signal-ink:#f0b579;
  --tile:#1e2530;
}
:root[data-theme="light"]{
  --paper:#ece7da;
  --paper-2:#e2ddce;
  --line:#c9c2ac;
  --text:#2a2620;
  --text-dim:#5c5648;
  --signal:#c97a2e;
  --signal-ink:#8f551a;
  --tile:#f4f0e4;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:"Segoe UI","Helvetica Neue",Arial,sans-serif;
  line-height:1.6;
}
.mono{
  font-family:Consolas,"SF Mono","Cascadia Mono",ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4{
  font-family:Rockwell,"Roboto Slab",Georgia,serif;
  text-wrap:balance;
  margin:0 0 .6rem;
  font-weight:400;
}
a{color:var(--signal-ink);}
p{margin:0 0 1rem;}

.page{max-width:860px;margin:0 auto;padding:0 clamp(1.2rem,4vw,3rem) 5rem;}

.crumbs{
  font-family:Consolas,"SF Mono",ui-monospace,monospace;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--text-dim);
  /* закреплённая шапка: остаётся сверху при прокрутке */
  position:sticky; top:0; z-index:55;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  margin:0;
  padding:.8rem clamp(1.2rem,4vw,3rem) .8rem
          calc(max(0px, 50vw - 430px) + clamp(1.2rem,4vw,3rem));
}
.crumbs a{color:var(--text-dim); text-decoration:none; border-bottom:1px solid transparent;}
.crumbs a:hover{color:var(--text); border-color:var(--signal);}

.doc-head{border-bottom:2px solid var(--text); padding-bottom:1.4rem; margin-bottom:2rem;}
.doc-head .kicker{
  font-family:Consolas,"SF Mono",ui-monospace,monospace;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--signal-ink); display:flex; gap:.6rem; align-items:center; margin-bottom:.7rem;
}
.doc-head .kicker::before{content:""; width:.5rem; height:.5rem; background:var(--signal); display:inline-block;}
.doc-head h1{font-size:clamp(1.6rem,3.6vw,2.4rem);}

/* Брифинг: о теме / аннотация / пререквизиты / мотивация */
.brief{
  background:var(--paper-2);
  border:1px solid var(--line);
  padding:1.3rem 1.5rem;
  margin:0 0 2rem;
  display:grid;
  gap:1rem;
}
.brief dt{
  font-family:Consolas,"SF Mono",ui-monospace,monospace;
  font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-dim); margin-bottom:.3rem;
}
.brief dd{margin:0;}
.brief ul{margin:0; padding-left:1.2rem;}
.brief li{margin-bottom:.25rem;}

section{margin:2.2rem 0;}
section > h2{
  font-size:1.35rem;
  border-bottom:1px solid var(--line);
  padding-bottom:.5rem;
  margin-bottom:1rem;
}
section h3{font-size:1.1rem; margin-top:1.6rem;}

.eq{overflow-x:auto; margin:1rem 0;}
.eq-num{float:right; color:var(--text-dim); font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.85rem;}

/* Типичная ошибка — инлайн-врезка рядом с темой */
.mistake{
  border-left:3px solid var(--bad);
  background:var(--paper-2);
  padding:.8rem 1rem;
  margin:1.2rem 0;
  font-size:.95rem;
}
.mistake .label{
  font-family:Consolas,"SF Mono",ui-monospace,monospace;
  font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--bad); display:block; margin-bottom:.35rem;
}

/* Тренажёр */
.trainer{
  border:1px solid var(--line);
  background:var(--paper-2);
  padding:1.3rem;
  margin:1.4rem 0;
}
.trainer .trainer-label{
  font-family:Consolas,"SF Mono",ui-monospace,monospace;
  font-size:.7rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--signal-ink); margin-bottom:.8rem; display:block;
}
.trainer .illustrative{
  font-size:.78rem; color:var(--text-dim); margin-top:.6rem;
}

/* Контрольные вопросы — флеш-карты */
.selfcheck{list-style:none; margin:0; padding:0; display:grid; gap:.6rem;}
.selfcheck li{border:1px solid var(--line); background:var(--paper-2);}
.selfcheck button.q{
  width:100%; text-align:left; padding:.8rem 6.5rem .8rem 1rem;
  background:none; border:none; color:var(--text); font:inherit; cursor:pointer;
  display:block; position:relative;
}
.selfcheck button.q:focus-visible{outline:2px solid var(--signal); outline-offset:-2px;}
.selfcheck button.q::after{content:"развернуть"; font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.7rem; color:var(--text-dim); text-transform:uppercase; position:absolute; right:1rem; top:1rem;}
.selfcheck li[data-open="true"] button.q::after{content:"свернуть";}
.selfcheck .a{
  padding:0 1rem; max-height:0; overflow:hidden; color:var(--text-dim);
  transition:max-height .2s ease, padding .2s ease;
}
.selfcheck li[data-open="true"] .a{padding:0 1rem 1rem; max-height:20rem;}

.sources{font-size:.92rem; padding-left:1.3rem;}
.sources li{margin-bottom:.5rem;}

.figure{margin:1.4rem 0; text-align:center;}
.figure img{max-width:100%; height:auto; border:1px solid var(--line); background:#fff;}
.figure figcaption{
  font-size:.8rem; color:var(--text-dim); margin-top:.5rem;
  font-family:Consolas,"SF Mono",ui-monospace,monospace;
}

.epigraph{
  margin:1.4rem 0; padding-left:1.2rem; border-left:3px solid var(--line);
  font-style:italic; color:var(--text-dim);
}
.epigraph p{margin:0 0 .3rem;}
.epigraph .attr{
  display:block; text-align:right; font-style:normal; font-size:.85rem;
}

/* Схема: заголовок-рамка + ветви (замена скриншотов SmartArt) */
.scheme{margin:1.4rem 0;}
.scheme .scheme-title{
  border:2px solid var(--text);
  padding:.8rem 1.2rem;
  text-align:center;
  font-size:1.05rem;
  max-width:26rem;
  margin:0 auto 1rem;
}
.scheme .scheme-branches{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}
@media (max-width:560px){ .scheme .scheme-branches{grid-template-columns:1fr;} }
.scheme .branch{
  border:1px solid var(--line);
  background:var(--paper-2);
  padding:.8rem 1rem;
  text-align:center;
}
.scheme .branch .name{
  font-family:Rockwell,"Roboto Slab",Georgia,serif;
  font-size:1rem; margin-bottom:.4rem;
}
.scheme .branch .cond{font-size:.82rem; color:var(--text-dim);}

.patterns{display:grid; grid-template-columns:1fr; gap:1rem; margin:1.2rem 0;}
.patterns .figure{margin:0;}
.patterns img{width:100%;}

pre.code{
  background:var(--tile);
  border:1px solid var(--line);
  padding:1rem 1.2rem;
  overflow-x:auto;
  font-family:Consolas,"SF Mono","Cascadia Mono",ui-monospace,monospace;
  font-size:.86rem;
  line-height:1.55;
  margin:1.2rem 0;
}
pre.code .c{color:var(--text-dim); font-style:italic;}
pre.code .kw{color:var(--nn);}
pre.code .fn{color:var(--rl);}
pre.code .num{color:var(--signal-ink);}
pre.code .str{color:var(--gd);}

.net-diagram{display:block; margin:0 auto;}
.net-diagram circle{fill:var(--tile); stroke:var(--text); stroke-width:1.5;}
.net-diagram circle.out{fill:var(--signal); stroke:var(--signal-ink);}
.net-diagram line{stroke:var(--text-dim); stroke-width:1;}
.net-diagram .arrow-fwd{stroke:var(--signal-ink); fill:none; stroke-width:2;}
.net-diagram .arrow-bwd{stroke:var(--nn); fill:none; stroke-width:2;}
.net-diagram text{fill:var(--text); font-family:Consolas,"SF Mono",ui-monospace,monospace;}
.net-diagram .caption{fill:var(--text-dim); font-size:.6rem;}

.mouse-diagram{display:block; margin:0 auto;}
.mouse-diagram path, .mouse-diagram ellipse, .mouse-diagram circle.eye{
  fill:none; stroke:var(--text); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
}
.mouse-diagram circle.eye{fill:var(--text); stroke:none;}
.mouse-diagram rect.window{fill:none; stroke:var(--signal); stroke-width:2.5;}

.arch-table{width:100%; border-collapse:collapse; font-size:.86rem;}
.arch-table th, .arch-table td{
  border:1px solid var(--line); padding:.4rem .6rem; text-align:center;
  font-family:Consolas,"SF Mono",ui-monospace,monospace;
}
.arch-table th{color:var(--text-dim); font-weight:400;}
.arch-table td:first-child, .arch-table th:first-child{text-align:left;}

/* Схема-цепочка слоёв архитектуры (конспект 7 и далее) */
.arch-chain{display:flex; flex-wrap:wrap; align-items:stretch; gap:.35rem; margin:1.1rem 0;}
.arch-chain .st{
  border:1px solid var(--text); background:var(--tile); padding:.3rem .5rem;
  font-family:Consolas,"SF Mono","Cascadia Mono",ui-monospace,monospace;
  font-size:.72rem; line-height:1.4; text-align:center;
  display:flex; flex-direction:column; justify-content:center;
}
.arch-chain .st small{color:var(--text-dim); font-size:.92em;}
.arch-chain .st.pool{border-style:dashed;}
.arch-chain .st.fc{background:var(--paper-2);}
.arch-chain .arr{align-self:center; color:var(--text-dim); font-size:.85rem;}
.arch-caption{font-size:.85rem; color:var(--text-dim); margin:-.4rem 0 1rem;}

/* Схема Inception-модуля: вход → параллельные ветки → конкатенация */
.inception-scheme{display:grid; gap:.5rem; justify-items:center; margin:1.1rem 0;}
.inception-branches{display:grid; grid-template-columns:repeat(4, minmax(7rem, 1fr)); gap:.5rem; width:100%;}
.inception-branches .branch-col{display:grid; gap:.35rem; align-content:end;}
.inception-scheme .st, .inception-branches .st{
  border:1px solid var(--text); background:var(--tile); padding:.3rem .5rem;
  font-family:Consolas,"SF Mono","Cascadia Mono",ui-monospace,monospace;
  font-size:.72rem; line-height:1.4; text-align:center;
}
.inception-scheme .st.wide{width:100%; box-sizing:border-box; background:var(--paper-2);}
.inception-scheme .arr{color:var(--text-dim); font-size:.85rem;}
@media (max-width:640px){ .inception-branches{grid-template-columns:repeat(2, 1fr);} }

/* Оглавление траектории (нейросеть/index.html и будущие траектории) */
.toc{list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:.7rem;}
.toc > li > a, .toc > li.toc-soon{
  display:flex; gap:1rem; align-items:baseline;
  background:var(--paper-2); border:1px solid var(--line);
  border-left:4px solid var(--track-color, var(--signal));
  padding:.8rem 1rem; text-decoration:none; color:var(--text);
}
.toc > li > a:hover{border-color:var(--track-color, var(--signal));}
.toc-num{color:var(--signal-ink); font-size:.9rem;}
.toc-body{display:grid; gap:.15rem;}
.toc-title{font-family:Rockwell,"Roboto Slab",Georgia,serif; font-size:1.02rem;}
.toc-desc{font-size:.85rem; color:var(--text-dim);}
.toc-soon{opacity:.55; border-left-style:dashed;}
.toc-soon .toc-num{color:var(--text-dim);}

/* Навигация между конспектами (низ страницы) */
.pagenav{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:3rem; padding-top:1.2rem; border-top:2px solid var(--text);
}
.pagenav a{
  text-decoration:none; color:var(--text);
  border-bottom:1px solid transparent;
}
.pagenav a:hover{border-color:var(--signal);}
.pagenav .dir{
  display:block; font-family:Consolas,"SF Mono",ui-monospace,monospace;
  font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:var(--text-dim);
}
.pagenav .next{text-align:right; margin-left:auto;}

@media (prefers-reduced-motion: reduce){
  .selfcheck .a{transition:none;}
}

/* ---- навигация конспектов (assets/nav.js) ---- */

/* оглавление текущей страницы — лёгкая колонка слева, ниже крошек */
#snav{
  position:fixed; top:7.5rem; z-index:40;
  width:230px; max-height:calc(100vh - 10rem); overflow-y:auto;
  font-size:.8rem; line-height:1.45; padding-right:.5rem;
  --nav-accent:var(--signal);
}
#snav::-webkit-scrollbar{width:6px;}
#snav::-webkit-scrollbar-thumb{background:var(--line);}
.snav-toc-title{
  font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.82em;
  text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim);
  margin-bottom:.45rem;
}
.snav-toc{list-style:none; margin:0; padding:0; border-left:1px solid var(--line);}
.snav-toc li{margin:0; padding:.14rem 0;}
.snav-toc li.sub a{padding-left:1.4rem;}
.snav-toc a{
  color:var(--text); text-decoration:none; display:block;
  border-left:2px solid transparent; margin-left:-1.5px; padding-left:.6rem;
}
.snav-toc a:hover{color:var(--signal-ink);}
.snav-toc a.active{color:var(--signal-ink); font-weight:600; border-left-color:var(--nav-accent);}
@media (max-width:1399px){ #snav{display:none;} }
/* на широких экранах раскладка как в «Мат. моделировании»: слева умеренный
   отступ (~11% окна), широкая колонка текста, оглавление у правого края окна */
@media (min-width:1400px){
  :root{
    --colml:clamp(3rem, 11vw, 220px);
    --colw:min(1320px, calc(100vw - var(--colml) - 294px));
  }
  /* широкая раскладка — только на страницах с боковым оглавлением (конспектах) */
  body.has-snav .page{
    max-width:none;
    width:var(--colw);
    margin-left:var(--colml);
    margin-right:0;
    font-size:clamp(1.05rem, .55rem + .6vw, 1.18rem);
  }
  body.has-snav .crumbs{padding-left:calc(var(--colml) + clamp(1.2rem,4vw,3rem));}
  /* оглавления траекторий: та же резиновая ширина, но без резерва под оглавление */
  body.nav-index .page, body.nav-index .page.wide{
    max-width:none;
    width:min(1320px, calc(100vw - var(--colml) - 4rem));
    margin-left:var(--colml);
    margin-right:0;
    font-size:clamp(1.05rem, .55rem + .6vw, 1.18rem);
  }
  body.nav-index .crumbs{padding-left:calc(var(--colml) + clamp(1.2rem,4vw,3rem));}
  #snav{
    /* вплотную к колонке текста, шрифт ~85% основного */
    left:calc(var(--colml) + var(--colw) + 1.25rem);
    width:250px;
    font-size:clamp(.9rem, .45rem + .5vw, 1.03rem);
  }
}

/* круглая кнопка «Список занятий курса» + раскрывающийся список */
#course-fab{
  position:fixed; right:1.6rem; bottom:1.2rem; z-index:61;
  width:3rem; height:3rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.15rem; cursor:pointer; border:none;
  background:var(--nav-accent); color:var(--paper);
  box-shadow:0 2px 10px rgba(0,0,0,.28);
  --nav-accent:var(--signal);
}
#course-fab:hover{filter:brightness(1.08);}
#course-fab:focus-visible{outline:2px solid var(--text); outline-offset:2px;}
#course-fab.open{filter:brightness(.92);}
#course-pop{
  position:fixed; right:1.6rem; bottom:4.9rem; z-index:60;
  width:min(320px, calc(100vw - 2.4rem)); max-height:calc(100vh - 8rem); overflow-y:auto;
  background:var(--tile); border:1px solid var(--line);
  box-shadow:0 8px 28px rgba(0,0,0,.3);
  padding:.9rem 1rem 1rem; font-size:.82rem; line-height:1.4;
  --nav-accent:var(--signal);
}
#course-pop::-webkit-scrollbar{width:8px;}
#course-pop::-webkit-scrollbar-thumb{background:var(--line);}
.cpop-title{
  font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.78rem;
  letter-spacing:.05em;
  padding-bottom:.5rem; margin-bottom:.4rem; border-bottom:1px solid var(--line);
}
.cpop-title a{color:var(--nav-accent); text-decoration:none;}
.cpop-title a:hover{text-decoration:underline;}
.cpop-list{
  list-style:none; margin:0; padding:0;
}
.cpop-list li{margin:0; padding:.24rem .5rem;}
.cpop-list a{color:var(--text-dim); text-decoration:none; display:block;}
.cpop-list a:hover{color:var(--signal-ink);}
.cpop-list .cpop-sep{
  font-family:Consolas,"SF Mono",ui-monospace,monospace; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.07em; color:var(--nav-accent);
  padding-top:.65rem;
}
.cpop-list .cpop-current{
  color:var(--text); font-weight:600;
  border-left:2px solid var(--nav-accent);
  background:color-mix(in srgb, var(--nav-accent) 10%, transparent);
}
@media print{ #snav, #course-fab, #course-pop{display:none !important;} }