/* ВЫШКА · Академия — премиальный слой кабинета поверх кита «СИГНАЛ» (signal.css).
   Совместимость: использует токены кита --bg/--surface/--elev/--border/--border-strong/
   --text/--muted/--accent/--accent-fill/--accent-ink/--accent-soft/--accent2/--success/
   --danger/--r-sm/--r/--r-lg/--r-pill/--sh-1..3/--dur/--ease/--maxw — НЕ переопределяет их.
   Academy-токены — только под префиксом --ac-*. §ACADEMY-CSS */

:root{
  --ac-warn:#F5B84D;
  --ac-ice:color-mix(in srgb, #7DD3FC 30%, var(--surface));
  --ac-ice-border:color-mix(in srgb, #38BDF8 55%, var(--border));
  --ac-ice-ink:#0C4A6E;
  --ac-gap:16px;
  --ac-gap-lg:24px;
  --ac-ring:64px;
  --ac-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  /* §UX-7 (AA): signal.css красит текущую крошку в var(--faint,#8a93a3), а токен
     нигде не был определён → фолбэк #8a93a3 на --bg #F5F6F9 = 2.86:1 (провал).
     #59616E на #F5F6F9 = 5.78:1, на #FFFFFF = 6.25:1 — AA для мелкого текста. */
  --faint:#59616E;
  /* §UX-7 (AA): teal-текст. #0E9E88 на белом = 3.35:1 (провал при 12.5px).
     #0B7A69 на #FFFFFF = 5.25:1, на --bg #F5F6F9 = 4.86:1 — AA ≥4.5:1. */
  --ac-teal-ink:#0B7A69;
}
:root[data-theme="dark"]{
  --ac-ice:color-mix(in srgb, #7DD3FC 22%, var(--surface));
  --ac-ice-border:color-mix(in srgb, #38BDF8 45%, var(--border));
  --ac-ice-ink:#BAE6FD;
  /* §UX-7: тёмная тема. #9BA4B4 на #0B0D11 = 7.74:1, на #14181F = 7.09:1. */
  --faint:#9BA4B4;
  /* §UX-7: #3FD9C0 на #14181F = 10.08:1, на #0B0D11 = 11.02:1 — с запасом. */
  --ac-teal-ink:#3FD9C0;
}

/* ---------------- shell ---------------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:1500;background:var(--accent-fill);color:var(--accent-ink);font-weight:700;font-size:14px;padding:10px 18px;border-radius:0 0 var(--r) 0;text-decoration:none}
.skip-link:focus{left:0}

.app-main{display:block;padding-top:8px;padding-bottom:72px;min-height:62vh}
.app-main:focus{outline:none}

/* кнопка темы: солнце в светлой, луна в тёмной */
.theme-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;padding:0;border-radius:var(--r);border:1px solid var(--border-strong);background:transparent;color:var(--text);cursor:pointer;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform 90ms var(--ease)}
.theme-btn:hover{background:var(--surface)}
.theme-btn:active{transform:scale(.94)}
.theme-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .ico-moon{display:none}
:root[data-theme="dark"] .theme-btn .ico-sun{display:none}
:root[data-theme="dark"] .theme-btn .ico-moon{display:block}

/* трофей-чип: тил зарезервирован под слой мотивации.
   §UX-7: текст/иконка — --ac-teal-ink (AA ≥4.5:1), фон/рамка остаются на --accent2 */
.trophy-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 12px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;color:var(--ac-teal-ink);background:color-mix(in srgb, var(--accent2) 9%, transparent);border:1px solid color-mix(in srgb, var(--accent2) 28%, transparent);font-variant-numeric:tabular-nums;white-space:nowrap}
.trophy-chip svg{width:14px;height:14px;flex:none;stroke:var(--ac-teal-ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.trophy-chip[hidden]{display:none}

/* активный пункт навигации кабинета */
.academy-nav a{position:relative;padding:4px 0;transition:color var(--dur) var(--ease)}
.academy-nav a.is-active,
.academy-nav a[aria-current="page"]{color:var(--text);font-weight:600}
.academy-nav a.is-active::after,
.academy-nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:var(--accent)}

/* футер кабинета */
.foot-row{display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;align-items:baseline}
.foot-note{color:var(--muted)}

/* ---------------- boot skeleton ---------------- */
.boot-skeleton{padding:36px 0 12px}
.sk{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--text) 6%, transparent),transparent);animation:ac-shimmer 1.4s var(--ease) infinite}
.sk-title{height:44px;max-width:420px;margin-bottom:24px;border-radius:var(--r)}
.sk-grid{display:grid;grid-template-columns:1fr;gap:var(--ac-gap)}
.sk-tile{height:140px}
@media(min-width:768px){
  .sk-grid{grid-template-columns:repeat(3,1fr)}
  .sk-wide{grid-column:span 2}
}
@keyframes ac-shimmer{to{transform:translateX(100%)}}
/* ---------------- dashboard (#/) ---------------- */
.dash{display:flex;flex-direction:column;gap:32px;padding:24px 0 0}
.dash h2{font-size:1.25rem;letter-spacing:-.01em}

/* герой «Следующий шаг» */
.next-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:14px;background:linear-gradient(135deg,var(--accent-soft) 0%,var(--surface) 62%);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:28px 24px}
.next-hero::before{content:"";position:absolute;top:-90px;right:-70px;width:260px;height:260px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb, var(--accent) 13%, transparent),transparent 70%);pointer-events:none}
.next-hero-label{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.next-hero-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.next-title{font-size:clamp(1.5rem,3.8vw,2.25rem);line-height:1.15;letter-spacing:-.015em;max-width:24ch;text-wrap:balance}
.next-meta{color:var(--muted);font-size:14.5px;font-variant-numeric:tabular-nums}
.next-cta{align-self:stretch;position:relative;z-index:1}
@media(min-width:768px){
  .next-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;align-items:center;column-gap:32px;padding:32px}
  .next-hero-label,.next-title,.next-meta{grid-column:1}
  .next-cta{grid-column:2;grid-row:1 / span 3;align-self:center;justify-self:end}
}

/* плитки метрик */
.stats-row{display:grid;grid-template-columns:1fr;gap:var(--ac-gap)}
@media(min-width:560px){.stats-row{grid-template-columns:repeat(3,1fr)}}
.stat-tile{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:20px;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease)}
@media(hover:hover) and (pointer:fine){
  .stat-tile:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
}
.stat-num{font-size:clamp(1.7rem,3vw,2.1rem);font-weight:700;letter-spacing:-.02em;line-height:1.05;color:var(--text);font-variant-numeric:tabular-nums}
.stat-label{font-size:13px;color:var(--muted);line-height:1.4}
/* полоса стрика — §UX-4: единица НЕДЕЛИ; дата под кругом, не внутри; легенда */
.streak-strip{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:16px 20px}
.streak-title{width:100%;margin:0;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.streak-week{display:flex;gap:10px}
.streak-cell{display:inline-flex;flex-direction:column;align-items:center;gap:4px;flex:none}
.streak-date{font-size:10.5px;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.streak-legend{width:100%;margin:0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.streak-day{position:relative;width:28px;height:28px;flex:none;border-radius:50%;border:1.5px solid var(--border-strong);background:var(--bg);display:inline-flex;align-items:center;justify-content:center;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.streak-day.is-done{background:var(--accent2);border-color:var(--accent2);color:transparent}
.streak-day.is-done::after{content:"";position:absolute;left:8px;top:9px;width:10px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
:root[data-theme="dark"] .streak-day.is-done::after{border-color:#0B0D11}
.streak-day.is-frozen{background:var(--ac-ice);border-color:var(--ac-ice-border);color:transparent}
.streak-day.is-frozen::before{content:"❄";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;color:var(--ac-ice-ink)}
.streak-day.is-today{border-color:var(--accent);color:var(--accent)}
@media(prefers-reduced-motion:no-preference){
  .streak-day.is-today{animation:ac-pulse 2s var(--ease) infinite}
}
@keyframes ac-pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 42%, transparent)}
  70%{box-shadow:0 0 0 8px transparent}
  100%{box-shadow:0 0 0 0 transparent}
}
.streak-note{margin-left:auto;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}

/* сетка модулей */
.modules-grid{display:grid;grid-template-columns:1fr;gap:var(--ac-gap)}
@media(min-width:768px){.modules-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.modules-grid{grid-template-columns:repeat(3,1fr)}}
.module-card{display:flex;flex-direction:column;gap:10px;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:22px;color:var(--text);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
@media(hover:hover) and (pointer:fine){
  .module-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--border-strong)}
}
.module-title{margin:4px 0 0;font-size:1.1rem;line-height:1.3}
.module-goal{color:var(--muted);font-size:14.5px;line-height:1.5;flex:1}
.module-meta{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:6px;border-top:1px solid var(--border)}

/* кольцо прогресса модуля (svg 64px) */
.ring{width:var(--ac-ring);height:var(--ac-ring);flex:none}
.ring-svg{display:block;width:100%;height:100%}
.ring-bg{fill:none;stroke:var(--border);stroke-width:6}
.ring-fg{fill:none;stroke:var(--accent);stroke-width:6;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 600ms var(--ease)}
.ring-txt{fill:var(--text);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;text-anchor:middle;dominant-baseline:central}
/* полка артефактов */
.shelf{display:flex;flex-direction:column;gap:16px}
.shelf-row{display:grid;grid-template-columns:1fr;gap:var(--ac-gap)}
@media(min-width:640px){.shelf-row{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.shelf-row{grid-template-columns:repeat(3,1fr)}}

.artifact-card{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;background:linear-gradient(180deg,color-mix(in srgb, var(--accent2) 7%, var(--surface)) 0%,var(--surface) 46%);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:20px 20px 16px;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.artifact-card::before{content:"✦";position:absolute;top:14px;right:16px;font-size:15px;line-height:1;color:var(--accent2)}
@media(hover:hover) and (pointer:fine){
  .artifact-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--border-strong)}
}
.artifact-lesson{font-weight:600;font-size:15px;line-height:1.35;color:var(--text);padding-right:26px}
.artifact-note{color:var(--muted);font-size:14px;line-height:1.5;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.artifact-date{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.artifact-module{align-self:flex-start;font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-soft);border-radius:var(--r-pill);padding:3px 10px}
.shelf-empty{border:1.5px dashed var(--border-strong);border-radius:var(--r-lg);padding:28px 20px;text-align:center;color:var(--muted);font-size:14.5px}

/* витрина «как школу собирали агенты» */
.backstage-tile{background:var(--elev);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:22px}
.backstage-head{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;margin-bottom:10px}
.backstage-head svg{width:18px;height:18px;flex:none;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.backstage-body{color:var(--muted);font-size:14.5px;line-height:1.6}
.backstage-body p{margin:0 0 10px}
.backstage-body p:last-child{margin-bottom:0}

/* ---------------- module view (#/module/<id>) ---------------- */
.module-view{padding:0 0 48px}
.module-head{padding:0 0 24px;border-bottom:1px solid var(--border);margin-bottom:20px}
.module-head h1{margin:12px 0 10px;font-size:clamp(1.6rem,4.2vw,2.4rem)}
.module-head .module-goal{max-width:62ch;flex:none}
.bar{height:6px;max-width:420px;border-radius:var(--r-pill);background:var(--accent-soft);margin-top:20px;overflow:hidden}
.bar-fill{height:100%;border-radius:inherit;background:var(--accent);transition:width 600ms var(--ease)}

.lesson-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.lesson-item a{display:flex;align-items:center;gap:14px;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-1);padding:14px 18px;color:var(--text);transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease)}
@media(hover:hover) and (pointer:fine){
  .lesson-item a:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--border-strong)}
}
.lesson-status{width:26px;height:26px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--border-strong)}
.lesson-status svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lesson-item-title{flex:1;min-width:0;font-weight:600;font-size:15px;line-height:1.4}
.lesson-item-meta{font-size:13px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.lesson-item.is-done .lesson-status{color:var(--success)}
.lesson-item.is-done .lesson-item-title{color:var(--muted);font-weight:500}
.lesson-item.is-next a{border-color:var(--accent);background:linear-gradient(90deg,var(--accent-soft) 0%,var(--surface) 55%)}
.lesson-item.is-next .lesson-status{color:var(--accent)}
@media(max-width:520px){
  .lesson-item a{flex-wrap:wrap;row-gap:4px}
  .lesson-item-meta{width:100%;padding-left:40px}
}
/* ---------------- lesson (#/lesson/<slug>) ---------------- */
.lesson-layout{display:block;padding:0 0 48px}
@media(min-width:1080px){
  .lesson-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:40px;align-items:start}
}

/* сайдбар: мобайл — горизонтальные скролл-чипсы сверху, desktop — вертикальный список */
.lesson-side{margin:12px 0 20px;min-width:0}
.side-module-title{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.side-list{list-style:none;margin:0;padding:0 0 6px;display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.side-list li{flex:none;font-size:13.5px;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease)}
.side-list li a{display:block;max-width:230px;padding:7px 14px;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-list li:hover{border-color:var(--border-strong);color:var(--text)}
.side-list li.is-done{color:var(--success);border-color:color-mix(in srgb, var(--success) 35%, var(--border))}
.side-list li.is-current{color:var(--accent);background:var(--accent-soft);border-color:var(--accent);font-weight:600}
@media(min-width:1080px){
  .lesson-side{position:sticky;top:86px;margin:16px 0 0}
  .side-list{flex-direction:column;gap:4px;overflow:visible;padding:0}
  .side-list li{border-radius:var(--r);background:transparent;border-color:transparent}
  .side-list li a{max-width:none;white-space:normal;padding:9px 12px;line-height:1.4}
  .side-list li:hover{background:var(--surface);border-color:var(--border)}
  .side-list li.is-done{border-color:transparent}
  .side-list li.is-current{background:var(--accent-soft);border-color:transparent;box-shadow:inset 3px 0 0 var(--accent)}
}

/* шапка урока и бейджи */
.lesson-body{min-width:0}
.lesson-head{padding:0 0 20px;border-bottom:1px solid var(--border)}
.lesson-head h1{margin:12px 0 14px;font-size:clamp(1.6rem,4.2vw,2.3rem);max-width:28ch;text-wrap:balance}
.badges{display:flex;flex-wrap:wrap;gap:8px}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);padding:4px 11px;font-variant-numeric:tabular-nums;white-space:nowrap}
.badge svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* §UX-7: текст бейджа — --ac-teal-ink (AA) */
.badge-artifact{color:var(--ac-teal-ink);background:color-mix(in srgb, var(--accent2) 8%, var(--surface));border-color:color-mix(in srgb, var(--accent2) 32%, var(--border))}
.badge-artifact::before{content:"✦";font-size:11px;line-height:1}

/* контент урока — читабельная проза */
.lesson-content{max-width:68ch;padding:28px 0 8px;font-size:17px;line-height:1.65;color:var(--text)}
.lesson-content p{margin:0 0 16px}
.lesson-content h2{font-size:1.45rem;line-height:1.25;margin:40px 0 14px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.lesson-content h3{font-size:1.15rem;line-height:1.3;margin:28px 0 10px}
.lesson-content h2:first-child,.lesson-content h3:first-child{margin-top:0}
.lesson-content ul,.lesson-content ol{margin:0 0 16px;padding-left:24px}
.lesson-content li{margin-bottom:8px}
.lesson-content li:last-child{margin-bottom:0}
.lesson-content a{text-decoration:underline;text-underline-offset:3px}
.lesson-content code{font-family:var(--ac-mono);font-size:.86em;background:var(--accent-soft);border-radius:6px;padding:2px 6px}
.lesson-content pre{background:#10141C;color:#ECEFF4;border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;margin:0 0 18px;overflow-x:auto;font-size:14px;line-height:1.6}
.lesson-content pre code{background:transparent;color:inherit;padding:0;font-size:inherit;border-radius:0}
:root[data-theme="dark"] .lesson-content pre{background:var(--elev);color:var(--text)}
.lesson-content blockquote{margin:0 0 18px;padding:6px 0 6px 18px;border-left:3px solid var(--accent);color:var(--muted)}
.lesson-content blockquote p:last-child{margin-bottom:0}
.lesson-content table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:0 0 18px;font-size:15px}
.lesson-content th,.lesson-content td{border:1px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top}
.lesson-content thead th{background:var(--surface);font-size:13px;font-weight:700;color:var(--muted)}
.lesson-content hr{border:none;border-top:1px solid var(--border);margin:28px 0}

/* чек-листы «- [ ]»: крупные квадраты */
.lesson-content li:has(> input[type="checkbox"]){list-style:none;display:flex;align-items:flex-start;gap:10px;margin-left:-24px}
.lesson-content input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:20px;height:20px;flex:none;margin:3px 0 0;border:2px solid var(--border-strong);border-radius:6px;background:var(--surface)}
.lesson-content input[type="checkbox"]:checked{background:var(--accent-fill);border-color:var(--accent-fill)}
.lesson-content input[type="checkbox"]:checked::after{content:"";display:block;width:9px;height:5px;margin:3px auto 0;border-left:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);transform:rotate(-45deg)}
/* гейт артефакта — «засчитать урок» */
.artifact-gate{margin:36px 0 8px;max-width:68ch;display:flex;flex-direction:column;gap:14px;background:var(--accent-soft);border:1.5px solid var(--accent);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:24px;transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.artifact-gate h2{margin:0;padding:0;border:none;font-size:1.2rem}
.artifact-gate label{display:flex;align-items:flex-start;gap:12px;font-size:15px;font-weight:500;line-height:1.45;cursor:pointer}
#gateCheck{appearance:none;-webkit-appearance:none;width:22px;height:22px;flex:none;margin:1px 0 0;border:2px solid var(--border-strong);border-radius:7px;background:var(--surface);cursor:pointer;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
#gateCheck:checked{background:var(--accent-fill);border-color:var(--accent-fill)}
#gateCheck:checked::after{content:"";display:block;width:10px;height:5px;margin:4px auto 0;border-left:2.5px solid var(--accent-ink);border-bottom:2.5px solid var(--accent-ink);transform:rotate(-45deg)}
#gateNote{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font:inherit;font-size:15px;padding:11px 13px}
#gateNote::placeholder{color:var(--muted)}
#gateBtn{align-self:flex-start}
#gateBtn[disabled]{opacity:.55;cursor:not-allowed}
#gateBtn[disabled]:hover{filter:none}
#gateBtn[disabled]:active{transform:none}

/* done-state гейта: зелёный + галочка-анимация */
.artifact-gate.gate-done,
.artifact-gate:has(> .gate-done){border-color:var(--success);background:color-mix(in srgb, var(--success) 8%, var(--surface))}
.gate-done{display:flex;flex-direction:column;gap:10px;color:var(--text);font-size:15px;line-height:1.5}
.gate-done svg{width:30px;height:30px;flex:none;stroke:var(--success);fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
@media(prefers-reduced-motion:no-preference){
  .gate-done svg path,.gate-done svg polyline{stroke-dasharray:48;stroke-dashoffset:48;animation:ac-check 300ms var(--ease) 80ms forwards}
}
@keyframes ac-check{to{stroke-dashoffset:0}}
.gate-done .gate-note,.gate-done em{color:var(--muted);font-style:normal}
.gate-undo{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 14px;border-radius:var(--r);border:1.5px solid var(--border-strong);background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:color var(--dur) var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.gate-undo:hover{color:var(--text);background:var(--surface)}

/* навигация по урокам */
.lesson-nav{display:flex;justify-content:space-between;gap:12px;max-width:68ch;margin-top:32px;padding-top:20px;border-top:1px solid var(--border)}
.lesson-prev,.lesson-next{max-width:48%}
.lesson-next{margin-left:auto}
@media(max-width:520px){
  .lesson-nav{flex-direction:column}
  .lesson-prev,.lesson-next{max-width:none;width:100%;margin-left:0}
}

/* ---------------- portfolio (#/portfolio) ---------------- */
.portfolio-view{display:flex;flex-direction:column;gap:24px;padding:24px 0 48px}
.portfolio-view h1{font-size:clamp(1.7rem,4.2vw,2.4rem)}
.portfolio-sub{color:var(--muted);font-size:15.5px;max-width:62ch;margin-top:-14px}
.portfolio-grid{display:grid;grid-template-columns:1fr;gap:var(--ac-gap)}
@media(min-width:640px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.portfolio-grid{grid-template-columns:repeat(3,1fr)}}
#portfolioExport{align-self:flex-start}

/* сертификат: открыт — тонкая «гильошированная» рамка */
.cert-block{position:relative;background:var(--surface);border:1px solid color-mix(in srgb, var(--accent) 45%, var(--border));border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:32px 28px;overflow:hidden}
.cert-block::before{content:"";position:absolute;inset:9px;border-radius:calc(var(--r-lg) - 6px);padding:1.5px;background:repeating-linear-gradient(45deg,color-mix(in srgb, var(--accent) 55%, transparent) 0 2px,transparent 2px 6px);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none}
.cert-title{font-size:1.3rem;font-weight:700;letter-spacing:-.01em;margin:0 0 8px}
.cert-body{color:var(--muted);font-size:14.5px;line-height:1.6;max-width:56ch;margin:0 0 18px}
#certExport{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r);border:1.5px solid var(--accent);background:transparent;color:var(--accent);font:inherit;font-weight:700;cursor:pointer;transition:background var(--dur) var(--ease),transform 90ms var(--ease)}
#certExport:hover{background:var(--accent-soft)}
#certExport:active{transform:scale(.975)}

/* сертификат заблокирован */
.cert-block.is-locked{border:1.5px dashed var(--border-strong);box-shadow:none;background:transparent}
.cert-block.is-locked::before{display:none}
.cert-block.is-locked .cert-title{color:var(--muted)}
.cert-block.is-locked .cert-body{color:var(--muted)}
.cert-locked-note{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;font-weight:500}
.cert-locked-note::before{content:"";width:18px;height:18px;flex:none;background:var(--muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10V8a6 6 0 0 1 12 0v2h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h1zm2 0h8V8a4 4 0 0 0-8 0v2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 10V8a6 6 0 0 1 12 0v2h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-9a1 1 0 0 1 1-1h1zm2 0h8V8a4 4 0 0 0-8 0v2z'/%3E%3C/svg%3E") center/contain no-repeat}
/* ---------------- settings (#/settings) ---------------- */
.settings-view{max-width:680px;padding:24px 0 48px}
.settings-view h1{font-size:clamp(1.7rem,4.2vw,2.4rem);margin-bottom:20px}
.setting-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:18px 0;border-bottom:1px solid var(--border)}
.setting-row:last-of-type{border-bottom:none}
.setting-row>label{font-weight:600;font-size:15px;color:var(--text);flex:1 1 220px;min-width:0}
.setting-row input[type="text"],
.setting-row input:not([type]){flex:0 1 280px;min-width:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);color:var(--text);font:inherit;font-size:15px;padding:10px 13px}
.setting-row input[type="text"]::placeholder{color:var(--muted)}
.setting-row input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:22px;height:22px;flex:none;border:2px solid var(--border-strong);border-radius:7px;background:var(--surface);cursor:pointer;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.setting-row input[type="checkbox"]:checked{background:var(--accent-fill);border-color:var(--accent-fill)}
.setting-row input[type="checkbox"]:checked::after{content:"";display:block;width:10px;height:5px;margin:4px auto 0;border-left:2.5px solid var(--accent-ink);border-bottom:2.5px solid var(--accent-ink);transform:rotate(-45deg)}
/* кнопки-настройки без .btn — привести к ghost-кнопке кита */
#setTheme,#setExport,#setImport{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 16px;border-radius:var(--r);border:1.5px solid var(--border-strong);background:transparent;color:var(--text);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform 90ms var(--ease)}
#setTheme:hover,#setExport:hover,#setImport:hover{background:var(--surface)}
#setTheme:active,#setExport:active,#setImport:active{transform:scale(.975)}
/* опасная зона */
.btn-danger{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r);border:1.5px solid var(--danger);background:var(--danger);color:#fff;font:inherit;font-weight:700;cursor:pointer;transition:filter var(--dur) var(--ease),transform 90ms var(--ease)}
.btn-danger:hover{filter:brightness(1.07)}
.btn-danger:active{transform:scale(.975)}
:root[data-theme="dark"] .btn-danger{color:#0B0D11}

/* ---------------- onboarding (#/onboarding) ---------------- */
.onboarding{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:28px;padding:40px 0 64px}
.onboarding h1{font-size:clamp(1.6rem,4.2vw,2.3rem);text-wrap:balance}
.steps-bar{display:flex;align-items:center;gap:10px}
.step-dot{width:10px;height:10px;flex:none;border-radius:50%;background:var(--border-strong);transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.step-dot.is-active{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);transform:scale(1.15)}
.step-dot.is-done{background:var(--accent2)}

.goal-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:560px){.goal-grid{grid-template-columns:1fr 1fr}}
.time-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:560px){.time-grid{grid-template-columns:repeat(3,1fr)}}

.goal-card,.time-card{min-height:96px;display:flex;align-items:center;gap:12px;padding:20px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-1);color:var(--text);font:inherit;font-size:15.5px;font-weight:600;line-height:1.4;text-align:left;cursor:pointer;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease),background var(--dur) var(--ease)}
.time-card{justify-content:center;text-align:center}
@media(hover:hover) and (pointer:fine){
  .goal-card:hover,.time-card:hover{transform:translateY(-2px);box-shadow:var(--sh-2);border-color:var(--border-strong)}
}
.goal-card:active,.time-card:active{transform:scale(.985)}
.goal-card.is-selected,.goal-card.is-active,.goal-card[aria-pressed="true"],
.time-card.is-selected,.time-card.is-active,.time-card[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:var(--sh-1)}
.goal-card svg,.time-card svg{width:22px;height:22px;flex:none;stroke:var(--accent);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

.estimate{background:var(--accent-soft);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;font-size:14.5px;line-height:1.5;color:var(--text)}
.estimate b{font-variant-numeric:tabular-nums}
/* ---------------- a11y: видимый фокус на всём интерактивном ---------------- */
button:focus-visible,
.theme-btn:focus-visible,
.goal-card:focus-visible,
.time-card:focus-visible,
.gate-undo:focus-visible,
.btn-danger:focus-visible,
#setTheme:focus-visible,#setExport:focus-visible,#setImport:focus-visible,#certExport:focus-visible,
.module-card:focus-visible,
.lesson-item a:focus-visible,
.side-list li a:focus-visible,
input[type="checkbox"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip-link:focus-visible{outline:2px solid var(--accent-ink);outline-offset:-4px}

/* ---------------- dark: тени темнее уже в ките; точечные правки контраста ---------------- */
:root[data-theme="dark"] .next-hero{background:linear-gradient(135deg,var(--accent-soft) 0%,var(--surface) 66%)}
:root[data-theme="dark"] .next-hero::before{background:radial-gradient(closest-side,color-mix(in srgb, var(--accent) 17%, transparent),transparent 70%)}
:root[data-theme="dark"] .artifact-card{background:linear-gradient(180deg,color-mix(in srgb, var(--accent2) 9%, var(--surface)) 0%,var(--surface) 46%)}
:root[data-theme="dark"] .lesson-content code{color:var(--text)}
:root[data-theme="dark"] .cert-block{background:var(--elev)}
:root[data-theme="dark"] .sk{background:var(--elev)}
:root[data-theme="dark"] .streak-day{background:var(--surface)}

/* ---------------- узкие экраны (≈360px) ---------------- */
@media(max-width:520px){
  .dash{gap:24px;padding-top:16px}
  .next-hero{padding:22px 18px}
  .next-cta{width:100%}
  .streak-strip{gap:10px 16px;padding:14px 16px}
  .streak-note{margin-left:0;width:100%}
  .module-card{padding:18px}
  .artifact-gate{padding:20px 16px}
  .lesson-content{font-size:16.5px}
  .settings-view .setting-row{align-items:flex-start;flex-direction:column}
  .setting-row input[type="text"]{width:100%;flex:none}
  .onboarding{padding-top:28px;gap:22px}
  .goal-card,.time-card{min-height:84px;padding:16px}
}

/* ---------------- reduced motion: всё статично ---------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .sk::after{animation:none;transform:none;background:none}
  .streak-day.is-today{animation:none;box-shadow:0 0 0 3px var(--accent-soft)}
  .stat-tile:hover,.module-card:hover,.artifact-card:hover,.lesson-item a:hover,
  .goal-card:hover,.time-card:hover{transform:none}
  .bar-fill,.ring-fg{transition:none}
}

/* ---------------- премиальный полиш ---------------- */
::selection{background:color-mix(in srgb, var(--accent) 24%, transparent)}

/* мягкое появление вьюхи при смене роута (гасится reduced-motion выше) */
@media(prefers-reduced-motion:no-preference){
  .app-main>section{animation:ac-view-in 240ms var(--ease) both}
}
@keyframes ac-view-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}

/* тонкий скроллбар горизонтальной ленты уроков */
.side-list::-webkit-scrollbar{height:6px}
.side-list::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:3px}
.side-list::-webkit-scrollbar-track{background:transparent}

/* проза: остальные элементы markdown-рендера */
.lesson-content img{border-radius:var(--r);border:1px solid var(--border)}
.lesson-content figure{margin:0 0 18px}
.lesson-content figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.lesson-content kbd{font-family:var(--ac-mono);font-size:.82em;background:var(--surface);border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:6px;padding:2px 7px}
.lesson-content mark{background:color-mix(in srgb, var(--ac-warn) 35%, transparent);color:inherit;border-radius:3px;padding:0 3px}

/* сворачиваемый блок «сверить с эталоном» */
.lesson-content details{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:2px 16px;margin:0 0 18px}
.lesson-content summary{cursor:pointer;font-weight:600;padding:12px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.lesson-content summary::-webkit-details-marker{display:none}
.lesson-content summary::after{content:"+";color:var(--accent);font-size:19px;font-weight:700;line-height:1}
.lesson-content details[open] summary::after{content:"–"}
.lesson-content details>*:not(summary){margin-bottom:14px}

/* амбер-колаут «где ИИ ошибается» (дизайн-брифовый discernment-вариант) */
.lesson-content aside,
.lesson-content .callout-warn{background:var(--elev);border:1px solid var(--border);border-left:3px solid var(--ac-warn);border-radius:var(--r);padding:16px 18px;margin:0 0 18px;font-size:15.5px}
.lesson-content aside>p:last-child,
.lesson-content .callout-warn>p:last-child{margin-bottom:0}

/* печать: портфель и сертификат в чистом виде */
@media print{
  .nav,.foot,.skip-link,.lesson-nav,.lesson-side,#portfolioExport,#certExport,.theme-btn{display:none !important}
  body{background:#fff;color:#000}
  .artifact-card,.cert-block,.stat-tile{box-shadow:none;break-inside:avoid}
}


/* ── fix-round v1 (после браузерной верификации) ───────────────────────── */
/* программный фокус-таргет маршрута — без визуального кольца (не интерактивен) */
#app h1[tabindex="-1"]:focus,#app h1[tabindex="-1"]:focus-visible,
#app h2[tabindex="-1"]:focus,#app h2[tabindex="-1"]:focus-visible{outline:none}

/* мобильная навигация: кит прячет .nav-links <900px — для 3 ссылок ЛК бургер не нужен,
   показываем компактный ряд второй строкой шапки */
@media(max-width:899px){
  .nav-in{flex-wrap:wrap;height:auto;min-height:62px;padding:8px 0;row-gap:2px}
  .nav-links.academy-nav{display:flex;order:3;width:100%;gap:16px;margin-left:0;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .nav-links.academy-nav a{white-space:nowrap;font-size:14px;padding:4px 0}
  .nav-cta{margin-left:auto}
}

/* ── fix-round v2 (аудит: UX/CODE/HON) ─────────────────────────────────── */

/* §UX-5/§UX-4: скрытый визуально, но доступный AT текст */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* §UX-3: подсказка у выключенной кнопки гейта (самоаттестация) */
.gate-hint{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}

/* §UX-1: живое подтверждение после «Засчитать урок» */
.gate-flash{margin:0;font-size:14.5px;font-weight:600;color:var(--success)}

/* §UX-3: пустая заметка показана как пустая, а не как чужой текст */
.artifact-note-empty,.gate-done-note-empty{color:var(--muted);font-style:italic}
.gate-done-note-empty{font-size:14px;margin:0}

/* §UX-6: карточка ошибки загрузки/рендера в системе карточек */
.boot-error-card{max-width:560px;margin:48px auto;display:flex;flex-direction:column;gap:14px;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--danger);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:28px 26px}
.boot-error-card h1{font-size:1.35rem;line-height:1.3;margin:0}
.boot-error-card h1:focus,.boot-error-card h1:focus-visible{outline:none}
.boot-error-card p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
.boot-error-card .btn{align-self:flex-start}
.boot-error-actions{display:flex;gap:10px;flex-wrap:wrap}

/* §PROD-07: тост «сохраните копию портфеля» */
.ac-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:1300;display:flex;align-items:center;gap:14px;max-width:min(92vw,560px);background:var(--elev);border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:14px 16px}
.ac-toast-text{font-size:14px;line-height:1.5;color:var(--text)}
.ac-toast-link{flex:none;font-size:14px;font-weight:700;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.ac-toast-close{flex:none;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:var(--r);background:transparent;color:var(--muted);font:inherit;font-size:15px;cursor:pointer}
.ac-toast-close:hover{background:var(--surface);color:var(--text)}
@media(prefers-reduced-motion:no-preference){
  .ac-toast{animation:ac-toast-in 220ms var(--ease) both}
}
@keyframes ac-toast-in{from{opacity:0;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%)}}

/* §PROD-07: дисклеймер хрупкости localStorage в портфеле */
.portfolio-disclaimer{margin:-8px 0 0;max-width:70ch;background:color-mix(in srgb, var(--ac-warn) 12%, var(--surface));border:1px solid color-mix(in srgb, var(--ac-warn) 45%, var(--border));border-radius:var(--r);padding:12px 16px;font-size:13.5px;line-height:1.55;color:var(--text)}
.portfolio-disclaimer a{text-decoration:underline;text-underline-offset:3px}

/* §UX-8/§HON-2: подсказки в блоке сертификата */
.cert-name-hint{margin:0 0 6px;font-size:14.5px;color:var(--muted);font-style:italic}
.cert-name-hint a{text-decoration:underline;text-underline-offset:3px}
.cert-id-note,.cert-attest-note{color:var(--muted);font-size:12.5px}
.cert-attest-note{margin-top:8px;line-height:1.5}

/* §UX-2/§UX-9: контролы онбординга и видимый счётчик шагов */
.steps-count{margin-left:6px;font-size:13px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.ob-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ob-skip{margin-left:auto}
@media(max-width:520px){
  .ob-controls .btn{width:100%}
  .ob-skip{margin-left:0}
}

/* §UX-8: печать — код читаем (браузеры срезают тёмные фоны), служебное скрыто */
@media print{
  .lesson-content pre{background:#fff !important;color:#111 !important;border:1px solid #888}
  .lesson-content pre code,.lesson-content code{background:none !important;color:#111 !important}
  .ac-toast,.portfolio-disclaimer,.cert-name-hint,.gate-hint{display:none !important}
}