/* Fonts are loaded from Google Fonts in HTML head. Self-hosted font files are not bundled. */
:root{
  /* brand blue */
  --blue-50:#EAF0FF; --blue-100:#D6E2FF; --blue-200:#AEC4FF;
  --blue-400:#4E79F0; --blue-500:#2E5BEA; --blue-600:#1E50E0; --blue-700:#1A44C2; --blue-800:#16389E;
  /* hero navy gradient */
  --hero-from:#0B1B40; --hero-to:#1D4FD7; --navy-900:#0B1B40;
  /* ink / text */
  --ink:#0E1B2E; --ink-2:#1C2B40; --slate:#5B6B82; --slate-2:#8595AB; --slate-3:#AEB9CA;
  /* surfaces */
  --bg:#FFFFFF; --bg-alt:#F4F6FA; --bg-alt-2:#EEF2F8; --line:#E5EAF1; --line-2:#D9E0EA;
  /* gold accent */
  --gold-400:#F0B24A; --gold-500:#E8A33D; --gold-600:#D8902A;
  /* chip tints */
  --chip-blue-bg:#EAF0FF;   --chip-blue-fg:#2E5BEA;
  --chip-teal-bg:#E1F4ED;   --chip-teal-fg:#1F9E73;
  --chip-amber-bg:#FCEFD9;  --chip-amber-fg:#D8902A;
  --chip-violet-bg:#EFE9FB; --chip-violet-fg:#7C5CFC;
  /* radii */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  /* shadows (blue-tinted, soft) */
  --shadow-xs:0 1px 2px rgba(14,27,46,.05);
  --shadow-sm:0 2px 8px rgba(14,27,46,.06);
  --shadow-md:0 10px 30px rgba(14,27,46,.07);
  --shadow-lg:0 24px 60px rgba(14,27,46,.10);
  /* accent (action) */
  --accent:var(--blue-600); --accent-hover:var(--blue-700); --accent-soft:var(--blue-50);
  --accent-ring:rgba(30,80,224,.20);
  /* type */
  --font-sans:'Golos Text', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display:'Unbounded', 'Golos Text', 'Segoe UI', sans-serif;
  --mono:'SFMono-Regular', ui-monospace, 'Cascadia Code', Consolas, monospace;
  /* layout */
  --topbar-h:64px; --brand-w:300px; --sidebar-w:320px; --rail-w:288px; --read-w:760px;
}

*{box-sizing:border-box}
html,body{margin:0; padding:0}
body{font-family:var(--font-sans); color:var(--ink); background:var(--bg-alt);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.6}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-hover)}
button{font-family:inherit; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
::selection{background:var(--accent-soft)}
.scroll::-webkit-scrollbar{width:9px; height:9px}
.scroll::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:99px; border:2px solid var(--bg)}
.scroll::-webkit-scrollbar-thumb:hover{background:var(--slate-3)}

/* eyebrow: gold dash + uppercase blue label */
.eyebrow{display:inline-flex; align-items:center; gap:12px; font-size:13px; font-weight:700;
  letter-spacing:.10em; text-transform:uppercase; color:var(--blue-600)}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--gold-500); border-radius:2px}

.brand{display:flex; align-items:center; gap:10px; color:#fff}
.brand .logo{width:30px; height:30px; border-radius:8px; flex:0 0 30px;
  background:linear-gradient(135deg,var(--blue-500),var(--hero-to)); box-shadow:var(--shadow-sm)}
.brand .bn{display:flex; flex-direction:column; line-height:1.05}
.brand .bn b{font-family:var(--font-display); font-weight:700; font-size:15px; letter-spacing:-.01em}
.brand .bn span{font-size:10.5px; color:#9fb0cc; letter-spacing:.04em; text-transform:uppercase}

/* ==========================================================================
   СОСТОЯНИЕ A — Каталог
   ========================================================================== */
.catalog-body{background:var(--bg)}
.cat-topbar{position:sticky; top:0; z-index:30; height:var(--topbar-h); display:flex; align-items:center;
  gap:14px; padding:0 24px; background:var(--ink)}
.cat-topbar .crumb{color:#9fb0cc; font-size:13px; margin-left:6px}
.cat-topbar .crumb b{color:#fff; font-weight:600}
.cat-topbar .spacer{flex:1}

.layout-catalog{display:grid; grid-template-columns:var(--sidebar-w) 1fr; min-height:calc(100vh - var(--topbar-h))}
.courses-nav{border-right:1px solid var(--line); background:var(--bg); padding:22px 16px;
  position:sticky; top:var(--topbar-h); height:calc(100vh - var(--topbar-h)); overflow:auto}
.courses-nav .label{font-size:11px; letter-spacing:.10em; text-transform:uppercase; color:var(--slate-2);
  font-weight:700; margin:2px 10px 12px}
.courses-nav ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px}
.courses-nav a{display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:var(--r-md);
  color:var(--ink-2); font-weight:500; font-size:14.5px}
.courses-nav a:hover{background:var(--bg-alt)}
.courses-nav a .chip{width:30px; height:30px; border-radius:9px; flex:0 0 30px; display:grid; place-items:center;
  background:var(--chip-blue-bg); color:var(--chip-blue-fg)}
.courses-nav a .chip svg{width:17px; height:17px}
.courses-nav a .ttl{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.catalog-main{padding:46px 40px 90px; max-width:1100px}
.catalog-hero{margin-bottom:34px}
.catalog-hero .eyebrow{margin-bottom:16px}
.catalog-hero h1{font-family:var(--font-display); font-weight:800; font-size:42px; line-height:1.08;
  letter-spacing:-.01em; margin:0 0 12px}
.catalog-hero p{color:var(--slate); max-width:62ch; margin:0; font-size:18px; line-height:1.55}
.cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:18px}
.card-course{display:block; border:1px solid var(--line); border-radius:var(--r-xl); padding:22px;
  background:var(--bg); box-shadow:var(--shadow-sm); color:inherit; transition:border-color .15s, transform .15s, box-shadow .15s}
.card-course:hover{border-color:var(--blue-200); transform:translateY(-3px); box-shadow:var(--shadow-md)}
.card-course .ctop{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.card-course .cchip{width:46px; height:46px; border-radius:var(--r-md); flex:0 0 46px; display:grid; place-items:center;
  background:var(--chip-blue-bg); color:var(--chip-blue-fg)}
.card-course .cchip svg{width:24px; height:24px}
.card-course h3{font-family:var(--font-display); font-weight:700; font-size:19px; line-height:1.22; margin:0}
.card-course p{margin:0 0 16px; color:var(--slate); font-size:14.5px; line-height:1.5}
.card-course .meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:12.5px}
.pill{display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border-radius:var(--r-pill);
  background:var(--bg-alt); border:1px solid var(--line); color:var(--slate)}
.pill.level{color:var(--accent); background:var(--accent-soft); border-color:var(--blue-100)}
.pill.fmt{color:var(--chip-teal-fg); background:var(--chip-teal-bg); border-color:#c6eadd}
.pill.stale{color:#C8392F; background:#FCEAEA; border-color:#f3cdca}

/* ==========================================================================
   СОСТОЯНИЕ B — Постраничный ридер (1 глава = 1 страница)
   ========================================================================== */
.app{display:grid; grid-template-columns:var(--brand-w) 1fr; grid-template-rows:var(--topbar-h) 1fr;
  grid-template-areas:"brand top" "side main"; height:100vh; overflow:hidden}
.app[data-collapsed="true"]{--brand-w:96px}

.brandbar{grid-area:brand; display:flex; align-items:center; gap:12px; padding:0 18px;
  background:var(--ink); border-right:1px solid rgba(255,255,255,.06); overflow:hidden}
.app[data-collapsed="true"] .brand .bn{display:none}
.collapse-btn{margin-left:auto; width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:none; color:#cfe; transition:background .15s}
.collapse-btn:hover{background:rgba(255,255,255,.16)}
.collapse-btn svg{width:17px; height:17px}

.topbar{grid-area:top; display:flex; align-items:center; gap:18px; padding:0 24px; background:var(--bg);
  border-bottom:1px solid var(--line); z-index:20}
.crumbs{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--slate-2); min-width:0}
.crumbs .sep{color:var(--slate-3)}
.crumbs b{color:var(--ink); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar-search{margin-left:auto; position:relative; width:300px}
.topbar-search input{width:100%; height:40px; padding:0 14px 0 40px; border:1px solid var(--line);
  border-radius:var(--r-md); background:var(--bg-alt); font:inherit; font-size:14px; color:var(--ink); outline:none;
  transition:border-color .15s, background .15s, box-shadow .15s}
.topbar-search input::placeholder{color:var(--slate-3)}
.topbar-search input:focus{background:var(--bg); border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring)}
.topbar-search .s-ic{position:absolute; left:13px; top:11px; width:18px; height:18px; color:var(--slate-3); pointer-events:none}
.topbar-search .results{position:absolute; top:46px; left:0; right:0; background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg); overflow:hidden; z-index:50; display:none}
.topbar-search .results.open{display:block}
.topbar-search .results button{display:block; width:100%; text-align:left; padding:10px 14px; border:none; background:none;
  font:inherit; font-size:13.5px; color:var(--ink)}
.topbar-search .results button:hover{background:var(--accent-soft); color:var(--accent)}
.topbar-search .results .empty{padding:14px; color:var(--slate-3); font-size:13px}

.ring-wrap{display:flex; align-items:center; gap:10px; padding-left:4px}
.ring{position:relative; width:38px; height:38px}
.ring svg{transform:rotate(-90deg)}
.ring .ring-bg{stroke:var(--line)}
.ring .ring-fg{stroke:var(--accent); stroke-linecap:round; transition:stroke-dashoffset .5s ease}
.ring .ring-txt{position:absolute; inset:0; display:grid; place-items:center; font-size:10px; font-weight:700; color:var(--ink)}
.ring-label{font-size:12px; color:var(--slate-2); line-height:1.25}
.ring-label b{display:block; color:var(--ink); font-size:13px}

/* sidebar — список глав */
.sidebar{grid-area:side; background:var(--bg); border-right:1px solid var(--line);
  display:flex; flex-direction:column; overflow:hidden}
.course-head{padding:20px 20px 16px; border-bottom:1px solid var(--line); flex-shrink:0}
.course-head .pill{margin-bottom:12px; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase}
.course-head h2{font-family:var(--font-display); font-weight:800; font-size:20px; line-height:1.16;
  letter-spacing:-.01em; margin:0 0 4px; color:var(--ink)}
.course-head .sub{font-size:13px; color:var(--slate); margin-bottom:16px}
.prog-row{display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--slate-2); margin-bottom:7px}
.prog-row b{color:var(--ink); font-weight:700}
.prog-track{height:7px; background:var(--bg-alt-2); border-radius:99px; overflow:hidden}
.prog-fill{height:100%; width:0; background:var(--accent); border-radius:99px; transition:width .5s ease}
.app[data-collapsed="true"] .course-head{display:none}

.outline{flex:1; overflow-y:auto; padding:10px 12px 40px; list-style:none; margin:0}
.outline li{margin:1px 0}
.ch{display:flex; align-items:flex-start; gap:11px; width:100%; text-align:left; padding:9px 10px;
  border:none; background:none; border-radius:var(--r-sm); color:var(--slate); transition:background .12s, transform .12s; position:relative; line-height:1.3}
.ch:hover{background:var(--bg-alt)}
.ch.active{background:var(--accent-soft)}
.ch.active::before{content:""; position:absolute; left:0; top:7px; bottom:7px; width:3px; border-radius:99px; background:var(--accent)}
.ch .check{flex-shrink:0; width:20px; height:20px; border-radius:99px; margin-top:1px; border:1.5px solid var(--line-2);
  display:grid; place-items:center; color:transparent; transition:all .15s; background:var(--bg); font-size:11px; font-weight:700}
.ch.done .check{background:var(--accent); border-color:var(--accent); color:#fff}
.ch .cb{min-width:0; flex:1}
.ch .ct{font-size:13.5px; color:var(--ink); font-weight:500}
.ch.active .ct{color:var(--accent); font-weight:600}
.ch.done .ct{color:var(--slate-2)}
.ch .cm{font-size:11.5px; color:var(--slate-3); margin-top:1px; display:flex; gap:6px; align-items:center; white-space:nowrap}

/* Compact sidebar: progress rail instead of checkbox-looking empty circles. */
.app[data-collapsed="true"] .brandbar{justify-content:center; padding:0 10px; gap:8px}
.app[data-collapsed="true"] .brand{gap:0}
.app[data-collapsed="true"] .collapse-btn{margin-left:0; flex:0 0 30px}
.app[data-collapsed="true"] .outline{padding:14px 0 40px; display:flex; flex-direction:column; align-items:center; gap:8px}
.app[data-collapsed="true"] .outline li{width:100%; margin:0}
.app[data-collapsed="true"] .ch{width:58px; height:54px; margin:0 auto; padding:0; align-items:center; justify-content:center; gap:0; border-radius:16px}
.app[data-collapsed="true"] .ch:hover{background:var(--bg-alt); transform:translateY(-1px)}
.app[data-collapsed="true"] .ch.active{background:var(--accent-soft)}
.app[data-collapsed="true"] .ch.active::before{left:5px; top:10px; bottom:10px}
.app[data-collapsed="true"] .ch .cb{display:none}
.app[data-collapsed="true"] .ch .check{width:34px; height:34px; margin:0; border-radius:12px; background:var(--bg-alt); border-color:var(--line-2); color:var(--slate-2); font-family:var(--font-display); font-size:10.5px; line-height:1}
.app[data-collapsed="true"] .ch .check svg{display:none; width:14px; height:14px}
.app[data-collapsed="true"] .ch .check::before{content:attr(data-step); font-weight:700; letter-spacing:.02em}
.app[data-collapsed="true"] .ch.active .check{background:var(--accent); border-color:var(--accent); color:#fff; box-shadow:0 8px 18px rgba(30,80,224,.22)}
.app[data-collapsed="true"] .ch.done .check{background:var(--accent); border-color:var(--accent); color:#fff}
.app[data-collapsed="true"] .ch.done .check::before{display:none}
.app[data-collapsed="true"] .ch.done .check svg{display:block}

/* main reading area */
.main{grid-area:main; overflow-y:auto; background:var(--bg-alt)}
.main-inner{display:grid; gap:36px; padding:0 0 90px; grid-template-columns:minmax(0,1fr) var(--rail-w);
  max-width:1240px; margin:0 auto}
.article{min-width:0}

/* per-chapter hero (инфографика-заставка главы) */
.lesson-hero{margin:0 0 36px; padding:48px 48px 40px; background:linear-gradient(135deg,var(--hero-from),var(--hero-to));
  color:#fff; position:relative; overflow:hidden}
.lesson-hero::after{content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%;
  border:2px solid rgba(255,255,255,.10); box-shadow:0 0 0 40px rgba(255,255,255,.04), 0 0 0 90px rgba(255,255,255,.03)}
.lesson-hero .lh-kicker{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-400); margin-bottom:14px; display:flex; align-items:center; gap:10px}
.lesson-hero .lh-kicker::before{content:""; width:24px; height:2px; background:var(--gold-400); border-radius:2px}
.lesson-hero h1{font-family:var(--font-display); font-weight:800; font-size:38px; line-height:1.1;
  letter-spacing:-.015em; margin:0 0 16px; max-width:720px; position:relative}
.lesson-hero .lh-meta{display:flex; flex-wrap:wrap; gap:18px; font-size:14px; color:#cfe0ff; position:relative}
.lesson-hero .lh-meta span{display:flex; align-items:center; gap:7px}

.article-pad{padding:0 48px}

/* prose */
.prose{font-size:16px; line-height:1.72; color:var(--slate); max-width:var(--read-w)}
.prose > * + *{margin-top:16px}
.prose p{margin:0}
.prose strong{color:var(--ink); font-weight:600}
.prose h1{font-family:var(--font-display); font-weight:800; font-size:30px; line-height:1.14; color:var(--ink);
  letter-spacing:-.01em; margin:30px 0 6px}
.prose h2{font-family:var(--font-display); font-weight:700; font-size:21px; line-height:1.25; color:var(--ink);
  margin:32px 0 4px; letter-spacing:-.005em; scroll-margin-top:24px}
.prose h3{font-family:var(--font-display); font-weight:700; font-size:17px; line-height:1.3; color:var(--ink-2); margin:22px 0 4px}
.prose ul,.prose ol{margin:0; padding-left:22px}
.prose li{margin:5px 0}
.prose li::marker{color:var(--accent)}
.prose code{font-family:var(--mono); font-size:.88em; background:var(--bg-alt-2); color:var(--ink-2);
  padding:2px 6px; border-radius:6px}

/* phase badge */
.phase-badge{display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; padding:5px 12px; border-radius:var(--r-pill); margin:0 0 4px;
  background:var(--accent-soft); color:var(--accent)}

/* таблицы (исходные <table> учебника) */
.prose table{width:100%; border-collapse:separate; border-spacing:0; font-size:14px; border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; margin:4px 0}
.prose thead th{background:var(--bg-alt); color:var(--ink); text-align:left; font-weight:700; padding:12px 16px;
  border-bottom:1px solid var(--line); font-size:13px}
.prose tbody td{padding:11px 16px; border-bottom:1px solid var(--line); vertical-align:top; color:var(--slate)}
.prose tbody tr:last-child td{border-bottom:none}
.prose tbody tr:nth-child(even) td{background:#fbfcfe}
.prose tbody td:first-child{color:var(--ink); font-weight:500}

/* code-block (исходные блоки учебника) */
.code-block{background:var(--ink); color:#d7e3f7; padding:18px 20px; border-radius:var(--r-lg);
  font-family:var(--mono); font-size:13px; line-height:1.65; overflow-x:auto; white-space:pre; margin:2px 0;
  box-shadow:var(--shadow-md)}

/* callouts (исходные .callout/.callout-* учебника, перекрашены в гамму АМСУ) */
.callout{padding:16px 18px; border-radius:var(--r-lg); border:1px solid var(--cl-bd,var(--line));
  background:var(--cl-bg,var(--bg-alt)); font-size:15px; line-height:1.6; color:var(--ink-2); position:relative;
  border-left:4px solid var(--cl-fg,var(--accent))}
.callout strong:first-child{color:var(--cl-fg,var(--accent)); font-weight:700}
.callout{--cl-bg:var(--chip-blue-bg); --cl-fg:var(--chip-blue-fg); --cl-bd:#d4e0ff}
.callout-gold{--cl-bg:var(--chip-amber-bg); --cl-fg:var(--chip-amber-fg); --cl-bd:#f2deb8}
.callout-green{--cl-bg:#E6F6EC; --cl-fg:#1F8A4C; --cl-bd:#c6e9d2}
.callout-pink{--cl-bg:#FBE9F3; --cl-fg:#C13E84; --cl-bd:#f3cfe2}
.callout-red{--cl-bg:#FCEAEA; --cl-fg:#C8392F; --cl-bd:#f3cdca}
.callout-purple{--cl-bg:var(--chip-violet-bg); --cl-fg:var(--chip-violet-fg); --cl-bd:#e2d8f8}

.stale-banner{display:flex; gap:10px; align-items:flex-start; background:#FCEAEA; border:1px solid #f3cdca;
  color:#C8392F; padding:13px 16px; border-radius:var(--r-lg); margin:0 0 18px; font-size:14px}

/* footer: complete + pager */
.lesson-foot{padding:0 48px; max-width:calc(var(--read-w) + 0px)}
.complete-bar{display:flex; align-items:center; gap:16px; padding:18px 22px; border-radius:var(--r-xl);
  background:var(--bg); border:1px solid var(--line); box-shadow:var(--shadow-sm); margin:40px 0 24px}
.complete-bar .cb-txt{font-size:14px; color:var(--slate)}
.complete-bar .cb-txt b{display:block; color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:16px}
.complete-bar .cb-actions{margin-left:auto}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:600; font-size:14.5px;
  border-radius:var(--r-md); border:1px solid transparent; padding:12px 20px; transition:all .15s; white-space:nowrap}
.btn svg{width:18px; height:18px}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 12px 26px var(--accent-ring)}
.btn-primary:hover{background:var(--accent-hover); transform:translateY(-1px)}
.btn-done{background:var(--chip-teal-bg); color:var(--chip-teal-fg); border-color:#c6eadd; box-shadow:none}

.prevnext{display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0 48px; max-width:1240px}
.pn{display:flex; flex-direction:column; gap:4px; padding:16px 18px; text-align:left; background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r-lg); transition:all .15s; min-width:0; color:inherit}
.pn:hover{border-color:var(--accent); background:var(--accent-soft)}
.pn.disabled{opacity:.4; pointer-events:none}
.pn .pn-dir{font-size:12px; color:var(--slate-2)}
.pn.next{text-align:right; align-items:flex-end}
.pn .pn-title{font-weight:600; font-size:14.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}

/* right rail */
.rail{display:flex; flex-direction:column; gap:18px; position:sticky; top:0; align-self:start; padding:40px 24px 0 0}
.card{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-xl); padding:18px; box-shadow:var(--shadow-sm)}
.card h4{font-family:var(--font-display); font-weight:700; font-size:12px; letter-spacing:.02em; text-transform:uppercase;
  color:var(--slate-2); margin:0 0 14px; display:flex; align-items:center; gap:8px}
.card h4 svg{width:15px; height:15px; color:var(--accent)}
.minitoc{list-style:none; margin:0; padding:0}
.minitoc a{display:block; font-size:13.5px; color:var(--slate); padding:6px 0 6px 14px; border-left:2px solid var(--line); transition:all .12s}
.minitoc a:hover{color:var(--accent); border-color:var(--accent)}
.minitoc a.active{color:var(--accent); border-color:var(--accent); font-weight:600}
.meta-list{list-style:none; margin:0; padding:0; font-size:13px}
.meta-list li{display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--line-2)}
.meta-list li:last-child{border-bottom:none}
.meta-list .k{color:var(--slate-2)}
.meta-list .v{color:var(--ink); font-weight:600; text-align:right}

/* mobile */
.icon-btn{width:40px; height:40px; border-radius:var(--r-md); display:none; place-items:center; background:var(--bg-alt);
  border:1px solid var(--line); color:var(--slate)}
.icon-btn svg{width:19px; height:19px}
.scrim{display:none}

@media (max-width:1080px){
  .main-inner{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
}
@media (max-width:860px){
  .layout-catalog{grid-template-columns:1fr}
  .courses-nav{position:static; height:auto; border-right:none; border-bottom:1px solid var(--line)}
  .catalog-main{padding:28px 18px 70px}
  .catalog-hero h1{font-size:30px}
  .app{grid-template-columns:1fr; grid-template-rows:var(--topbar-h) 1fr; grid-template-areas:"top" "main"}
  .brandbar{display:none}
  .sidebar{position:fixed; top:0; left:0; bottom:0; width:min(86vw,340px); z-index:60; transform:translateX(-100%);
    transition:transform .28s ease; box-shadow:var(--shadow-lg)}
  .app[data-mobile-open="true"] .sidebar{transform:translateX(0)}
  .scrim{display:block; position:fixed; inset:0; background:rgba(11,27,64,.45); z-index:55; opacity:0; pointer-events:none; transition:opacity .25s}
  .app[data-mobile-open="true"] .scrim{opacity:1; pointer-events:auto}
  .icon-btn{display:grid}
  .topbar{padding:0 14px; gap:12px}
  .crumbs{display:none}
  .topbar-search{width:auto; flex:1; margin-left:0}
  .lesson-hero{margin:0 0 26px; padding:34px 18px 28px}
  .lesson-hero h1{font-size:27px}
  .article-pad,.lesson-foot,.prevnext{padding:0 18px}
  .prevnext{grid-template-columns:1fr}
  .main-inner{padding-bottom:70px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto !important; transition:none !important}}

/* фирменный логотип в брендбаре */
.brand .logo{background:url('../img/amsu-logo.png') center/contain no-repeat;border-radius:7px}

/* Patch: mobile compact reset */

@media (max-width:860px){
  .app[data-collapsed="true"] .course-head{display:block}
  .app[data-collapsed="true"] .outline{display:block; padding:10px 12px 40px}
  .app[data-collapsed="true"] .outline li{width:auto; margin:1px 0}
  .app[data-collapsed="true"] .ch{width:100%; height:auto; margin:0; padding:9px 10px; align-items:flex-start; justify-content:flex-start; gap:11px; border-radius:var(--r-sm)}
  .app[data-collapsed="true"] .ch .cb{display:block}
  .app[data-collapsed="true"] .ch .check{width:20px; height:20px; border-radius:99px; margin-top:1px; background:var(--bg); color:transparent; box-shadow:none}
  .app[data-collapsed="true"] .ch .check::before{content:""}
  .app[data-collapsed="true"] .ch.done .check svg{display:block}
}


/* ==========================================================================
   Agentic AI full course components
   Source-aligned blocks from Agentic_AI_Student_Handbook_AMSU_full_ru_v3.html
   ========================================================================== */
:root{
  --course-purple:#7C3AED;
  --course-teal:#0891B2;
  --course-pink:#DB2777;
  --course-orange:#F97316;
  --course-green:#16A34A;
  --course-red:#DC2626;
  --course-blue2:#1F4E79;
  --course-glossary-nav-bg:#EEF2FF;
  --course-glossary-nav-fg:#1D4ED8;
  --course-glossary-card-bg:#F8FAFC;
  --course-code-bg:#0B1220;
  --course-code-fg:#E2E8F0;
}

.prose .lead{font-size:18px;color:#334155;margin-bottom:18px}
.prose .small{font-size:13px}
.prose .muted{color:var(--slate)}
.prose .wide{overflow-x:auto;margin:18px 0}
.prose .wide table{min-width:700px}
.prose pre{background:var(--course-code-bg);color:var(--course-code-fg);border-radius:14px;padding:18px 20px;overflow:auto;font-size:13px;line-height:1.55;margin:18px 0}
.prose code,.prose .inline-code{font-family:var(--mono)}
.prose .inline-code{background:#EEF2FF;border:1px solid #C7D2FE;border-radius:6px;padding:1px 5px;color:#1D4ED8}

.prose .phase-strip{display:flex;gap:8px;flex-wrap:wrap;margin:5px 0 16px}
.prose .phase-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);font-weight:800;color:var(--slate);background:#fff}
.prose .phase-dot.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.prose .phase-label{display:inline-block;color:var(--course-blue2);font-weight:800;text-transform:uppercase;font-size:13px;letter-spacing:.06em;margin-bottom:6px}

.prose .callout{margin:18px 0}
.prose .callout-title{display:block;font-weight:800;color:#0F172A;margin-bottom:5px}
.prose .callout.term{--cl-bg:#FAF5FF;--cl-fg:var(--course-purple);--cl-bd:#E9D5FF}
.prose .callout.analogy{--cl-bg:#FFFBEB;--cl-fg:var(--gold-600);--cl-bd:#FDE68A}
.prose .callout.summary{--cl-bg:#ECFEFF;--cl-fg:var(--course-teal);--cl-bd:#BAE6FD}
.prose .callout.exercise{--cl-bg:#FFF7ED;--cl-fg:var(--course-orange);--cl-bd:#FED7AA}
.prose .callout.fact{--cl-bg:#FDF2F8;--cl-fg:var(--course-pink);--cl-bd:#FBCFE8}
.prose .callout.prereq{--cl-bg:#F0FDF4;--cl-fg:var(--course-green);--cl-bd:#BBF7D0}
.prose .callout.mistake{--cl-bg:#FEF2F2;--cl-fg:var(--course-red);--cl-bd:#FECACA}
.prose .callout .callout-title{color:var(--cl-fg,var(--accent))}

.prose .diagram{border:1px dashed #CBD5E1;border-radius:18px;background:#F8FAFC;padding:18px;margin:18px 0}
.prose .react-flow{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.prose .react-box{min-width:130px;text-align:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;font-weight:800}
.prose .arrow{color:var(--accent);font-weight:900}

.prose .glossary-nav{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 22px}
.prose .glossary-nav a{text-decoration:none;background:var(--course-glossary-nav-bg);color:var(--course-glossary-nav-fg);border-radius:999px;padding:6px 10px;font-weight:800;font-size:12px;transition:transform .15s, box-shadow .15s, background .15s}
.prose .glossary-nav a:hover{background:#DBEAFE;box-shadow:var(--shadow-xs);transform:translateY(-1px)}
.prose .glossary-letter{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);color:var(--course-blue2);font-family:var(--font-display);font-size:22px}
.prose .glossary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 12px}
.prose .term-card{background:var(--course-glossary-card-bg);border:1px solid var(--line);border-radius:14px;padding:13px 14px;color:var(--ink-2);line-height:1.55}
.prose .term-card strong{display:block;margin-bottom:4px;color:var(--ink);font-weight:800}

@media(max-width:900px){
  .prose .glossary-grid{grid-template-columns:1fr}
  .prose .wide table{min-width:640px}
}


/* ==========================================================================
   Agentic AI source import additions — verified v3 source
   ========================================================================== */
.prose .pills{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 20px}
.prose .pill{display:inline-flex;align-items:center;gap:7px;border:1px solid #D6E2FF;background:#EEF4FF;color:var(--accent);border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;letter-spacing:.01em}
.prose .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
.prose .hero-pdf{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border:1px solid #FDE68A;background:#FFFBEB;color:#92400E;border-radius:14px;padding:10px 14px;font-weight:800;box-shadow:var(--shadow-xs)}
.prose .hero-pdf:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.prose .source-card{border:1px solid var(--line);background:#FFFFFF;border-radius:18px;padding:18px 20px;box-shadow:var(--shadow-xs);margin:18px 0}
.prose .source-card strong{color:var(--ink)}
.prose .source-card em{color:var(--slate)}
.prose .card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 20px;box-shadow:var(--shadow-xs);margin:18px 0}
.prose .hero-source-note{font-size:14px;color:var(--slate);line-height:1.65}
.prose .phase-strip .step-circle,
.prose .step-circle{width:32px;height:32px;border-radius:50%;display:inline-grid;place-items:center;border:1px solid var(--line);font-weight:800;color:var(--slate);background:#fff;margin:0 3px 6px 0}
.prose .step-circle.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.prose .brand-pdf-icon{display:none}
.prose .footer{border-top:1px solid var(--line);margin-top:24px;padding-top:18px;color:var(--slate);font-size:14px}
.prose .copy{color:var(--slate);font-size:13px;line-height:1.6}


/* ==========================================================================
   Odysseus course components
   ========================================================================== */
.prose .course-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:22px 0}
.prose .stat-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:var(--shadow-xs)}
.prose .stat-card b{display:block;font-family:var(--font-display);font-size:24px;line-height:1;color:var(--accent);margin-bottom:6px}
.prose .stat-card span{font-size:13px;color:var(--slate);font-weight:700}
.prose .course-index{display:grid;grid-template-columns:1fr;gap:10px;counter-reset:course;margin:22px 0 0;padding:0;list-style:none}
.prose .course-index li{margin:0;padding:0}
.prose .course-index a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:16px;padding:14px 16px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow-xs);transition:transform .15s, box-shadow .15s, border-color .15s}
.prose .course-index a:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm);border-color:var(--accent)}
.prose .course-index strong{font-weight:800}
.prose .course-index span{font-size:12px;font-weight:700;color:var(--slate-2);white-space:nowrap}
.prose .table-wrap{overflow-x:auto;margin:16px 0;border-radius:var(--r-lg)}
.prose .table-wrap table{min-width:620px;margin:0}
.prose .odysseus-map .react-box{min-width:120px}
.prose blockquote{margin:18px 0;padding:16px 18px;border-left:4px solid var(--accent);background:var(--accent-soft);border-radius:var(--r-lg);color:var(--ink-2)}
.prose .code-block-native{border:1px solid rgba(255,255,255,.08)}
@media(max-width:900px){
  .prose .course-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prose .course-index a{grid-template-columns:1fr}
  .prose .course-index span{white-space:normal}
}