/* Майстерня стратега — дизайн-система курсу.
   База: ідентичність портфоліо «Економіка довіри» (Spectral + Spectral SC + Onest,
   тепла бумага, винний акцент). Відмінність курсу — мотив зошита: тонкі лінійки,
   чорнильно-синій акцент лише для блоків «твоя черга». Theme-aware: усі кольори —
   токени на :root, перевизначаються для тёмної теми. */

:root{
  --paper:#faf7f2; --raise:#ffffff; --sunken:#f2efe7; --sunken-2:#ece7dd;
  --ink:#1c1b19; --body:#35322d; --muted:#6b6660; --faint:#938d84;
  --line:#e2dfd6; --line-soft:#ebe8df;
  --wine:#7a2233; --wine-deep:#5e1a27; --wine-soft:#f4e8ea;
  --blue:#2f5473; --blue-deep:#233f57; --blue-soft:#e8eef3;
  --pos:#2e6b4f; --pos-soft:#e7efe9;
  --neg:#9b2c2c; --neg-soft:#f6e9e7;
  --amber:#9a6a12;
  --shadow:0 1px 2px rgba(28,27,25,.05), 0 12px 32px -16px rgba(28,27,25,.22);
  --radius:10px;
  --maxw:722px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#16150f; --raise:#1e1c17; --sunken:#232019; --sunken-2:#2b2820;
    --ink:#efe9dd; --body:#cfc8b9; --muted:#948d7f; --faint:#7c7566;
    --line:#302c24; --line-soft:#26231c;
    --wine:#dd909c; --wine-deep:#e9aab4; --wine-soft:#2a1a1e;
    --blue:#8fb6cf; --blue-deep:#a7c8dd; --blue-soft:#182530;
    --pos:#6cbf98; --pos-soft:#16241d;
    --neg:#e58c8c; --neg-soft:#2a1a19;
    --amber:#d3a24a;
    --shadow:0 1px 2px rgba(0,0,0,.32), 0 12px 32px -16px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --paper:#16150f; --raise:#1e1c17; --sunken:#232019; --sunken-2:#2b2820;
  --ink:#efe9dd; --body:#cfc8b9; --muted:#948d7f; --faint:#7c7566;
  --line:#302c24; --line-soft:#26231c;
  --wine:#dd909c; --wine-deep:#e9aab4; --wine-soft:#2a1a1e;
  --blue:#8fb6cf; --blue-deep:#a7c8dd; --blue-soft:#182530;
  --pos:#6cbf98; --pos-soft:#16241d;
  --neg:#e58c8c; --neg-soft:#2a1a19;
  --amber:#d3a24a;
  --shadow:0 1px 2px rgba(0,0,0,.32), 0 12px 32px -16px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:Onest,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:Spectral,Georgia,"Times New Roman",serif; color:var(--ink); font-weight:600; margin:0; text-wrap:balance; letter-spacing:-.012em}
p{margin:0}
a{color:var(--wine); text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{text-decoration:underline}
b,strong{color:var(--ink); font-weight:600}
code,kbd{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.88em; background:var(--sunken); padding:.08em .38em; border-radius:4px}
hr{border:0; border-top:1px solid var(--line); margin:34px 0}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:3px}

/* ── смужка прогресу ─────────────────────────────────────────── */
.progressbar{position:sticky; top:0; left:0; z-index:40; height:3px; width:100%; background:var(--line-soft)}
.progressbar .fill{height:100%; width:0; background:var(--wine); transition:width .4s ease}

/* ── перемикач теми ─────────────────────────────────────────── */
.theme-toggle{
  position:fixed; top:12px; right:14px; z-index:50;
  font-family:Onest,sans-serif; font-size:12px; letter-spacing:.04em;
  background:var(--paper); color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:5px 11px; cursor:pointer;
}
.theme-toggle:hover{color:var(--ink); border-color:var(--wine)}

/* ── розмітка ───────────────────────────────────────────────── */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px 120px}
.wrap.wide{max-width:940px}
main.lesson{max-width:var(--maxw); margin:0 auto; padding:0 22px 120px}

.crumb{font-family:Onest,sans-serif; font-size:12.5px; color:var(--muted); padding:26px 92px 0 0; display:flex; gap:8px; flex-wrap:wrap}
.crumb a{color:var(--muted)} .crumb a:hover{color:var(--ink)}
.crumb span{color:var(--faint)}

.eyebrow{font-family:"Spectral SC",Spectral,serif; font-weight:600; font-size:13px; letter-spacing:.03em; color:var(--muted); text-transform:lowercase; margin:22px 0 0}

h1{font-size:clamp(30px,5.4vw,44px); line-height:1.08; margin:10px 0 0}
.lesson h1 + .stand, .wrap h1 + .stand{
  font-family:Spectral,Georgia,serif; font-size:clamp(17px,2.2vw,20px); line-height:1.5;
  color:var(--body); margin:18px 0 0; max-width:60ch;
}
.lesson h2{font-size:clamp(21px,3.3vw,27px); margin:52px 0 0; padding-top:22px; border-top:1px solid var(--line)}
.lesson h3{font-size:18px; margin:30px 0 0}
.lesson p{margin:14px 0 0; max-width:66ch}
.lesson ul,.lesson ol{margin:14px 0 0; padding-left:22px; max-width:66ch}
.lesson li{margin:6px 0}
.lesson li::marker{color:var(--faint)}

.num-chip{font-family:"Spectral SC",serif; font-weight:600; font-variant-numeric:tabular-nums; color:var(--wine)}

/* ── картки / вставки ───────────────────────────────────────── */
.card{background:var(--raise); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin:20px 0 0; box-shadow:var(--shadow)}
.card > :first-child{margin-top:0}

.example{border-left:3px solid var(--wine); background:var(--wine-soft); border-radius:0 var(--radius) var(--radius) 0; padding:16px 18px; margin:22px 0 0}
.example .lab{font-family:"Spectral SC",serif; font-weight:600; font-size:12.5px; letter-spacing:.03em; color:var(--wine); text-transform:lowercase}
.example p{margin-top:8px}
.example a{font-weight:600}

.mistake{border-left:3px solid var(--neg); background:var(--neg-soft); border-radius:0 var(--radius) var(--radius) 0; padding:14px 18px; margin:18px 0 0}
.mistake .lab{font-family:"Spectral SC",serif; font-weight:600; font-size:12.5px; letter-spacing:.03em; color:var(--neg); text-transform:lowercase}

.say{border:1px solid var(--line); border-top:3px solid var(--amber); border-radius:var(--radius); padding:16px 18px; margin:24px 0 0; background:var(--raise)}
.say .lab{font-family:"Spectral SC",serif; font-weight:600; font-size:12.5px; letter-spacing:.03em; color:var(--amber); text-transform:lowercase}
.say blockquote{margin:8px 0 0; font-family:Spectral,Georgia,serif; font-size:16.5px; line-height:1.55; color:var(--ink); font-style:italic}

.keyfig{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin:22px 0 0}
.keyfig div{background:var(--raise); padding:13px 15px}
.keyfig .v{font-family:Spectral,Georgia,serif; font-weight:700; font-size:22px; color:var(--ink); line-height:1.1; font-variant-numeric:tabular-nums}
.keyfig .c{font-size:12.5px; color:var(--muted); margin-top:3px}

.tag{font-family:ui-monospace,Menlo,monospace; font-size:.82em; font-weight:600; padding:.05em .3em; border-radius:3px}
.tag.s{color:var(--pos); background:var(--pos-soft)}
.tag.m{color:var(--amber); background:var(--wine-soft)}
.tag.d{color:var(--blue); background:var(--blue-soft)}

/* ── «твоя черга»: інтерактив і завдання ────────────────────── */
.turn{border-left:3px solid var(--blue); background:var(--blue-soft); border-radius:0 var(--radius) var(--radius) 0; padding:18px 20px; margin:26px 0 0}
.turn > .lab{display:block; font-family:"Spectral SC",serif; font-weight:600; font-size:12.5px; letter-spacing:.04em; color:var(--blue-deep); text-transform:lowercase; margin-bottom:4px}
.turn .task{font-size:15px; color:var(--body); margin:4px 0 12px}
.turn h3{color:var(--ink); font-size:17px; margin:0 0 4px}

/* квіз */
.ic-quiz .q{font-weight:600; color:var(--ink); margin:0 0 10px}
.ic-quiz .opts{display:flex; flex-direction:column; gap:8px}
.ic-quiz button.opt{
  text-align:left; font:inherit; color:var(--body); background:var(--raise);
  border:1px solid var(--line); border-radius:8px; padding:10px 13px; cursor:pointer; transition:border-color .12s, background .12s;
}
.ic-quiz button.opt:hover{border-color:var(--blue)}
.ic-quiz button.opt.correct{border-color:var(--pos); background:var(--pos-soft); color:var(--ink)}
.ic-quiz button.opt.wrong{border-color:var(--neg); background:var(--neg-soft)}
.ic-quiz button.opt[disabled]{cursor:default; opacity:.75}
.ic-quiz button.opt.correct[disabled],.ic-quiz button.opt.wrong[disabled]{opacity:1}
.ic-quiz .ex{margin:12px 0 0; padding:11px 13px; background:var(--raise); border:1px solid var(--line); border-radius:8px; font-size:14.5px; color:var(--body)}
.ic-quiz .ex b{color:var(--ink)}

/* розстав по порядку */
.ic-order ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.ic-order li{
  display:flex; gap:10px; align-items:flex-start; font:inherit; color:var(--body);
  background:var(--raise); border:1px solid var(--line); border-radius:8px; padding:10px 12px; cursor:pointer;
}
.ic-order li:hover{border-color:var(--blue)}
.ic-order li .n{font-family:"Spectral SC",serif; font-weight:700; color:var(--faint); min-width:1.4em; font-variant-numeric:tabular-nums}
.ic-order li.picked{border-color:var(--blue); background:var(--blue-soft)}
.ic-order li.picked .n{color:var(--blue-deep)}
.ic-order li.ok{border-color:var(--pos); background:var(--pos-soft)}
.ic-order li.bad{border-color:var(--neg); background:var(--neg-soft)}
.ic-order li[disabled]{cursor:default}

/* розклади по кошиках */
.ic-tagit .item{background:var(--raise); border:1px solid var(--line); border-radius:8px; padding:11px 13px; margin:0 0 10px}
.ic-tagit .item .txt{color:var(--body); font-size:14.5px}
.ic-tagit .item .btns{display:flex; gap:6px; flex-wrap:wrap; margin-top:9px}
.ic-tagit .item button{font:inherit; font-size:13px; color:var(--body); background:var(--sunken); border:1px solid var(--line); border-radius:999px; padding:4px 12px; cursor:pointer}
.ic-tagit .item button:hover{border-color:var(--blue)}
.ic-tagit .item button.chosen{background:var(--blue-soft); border-color:var(--blue); color:var(--blue-deep)}
.ic-tagit .item.ok{border-color:var(--pos)}
.ic-tagit .item.ok button.chosen{background:var(--pos-soft); border-color:var(--pos); color:var(--ink)}
.ic-tagit .item.bad{border-color:var(--neg)}
.ic-tagit .item.bad button.chosen{background:var(--neg-soft); border-color:var(--neg)}
.ic-tagit .item .why{margin-top:8px; font-size:13.5px; color:var(--muted)}

/* знайди хибний рядок */
.ic-spot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.ic-spot li{background:var(--raise); border:1px solid var(--line); border-radius:8px; padding:10px 12px; cursor:pointer; color:var(--body); font-size:14.5px}
.ic-spot li:hover{border-color:var(--blue)}
.ic-spot li.ok{border-color:var(--pos); background:var(--pos-soft)}
.ic-spot li.miss{border-color:var(--neg); background:var(--neg-soft)}
.ic-spot li .why{display:block; margin-top:7px; font-size:13px; color:var(--muted)}

/* пари термін↔визначення */
.ic-match{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ic-match .col{display:flex; flex-direction:column; gap:8px}
.ic-match button{font:inherit; text-align:left; font-size:13.5px; color:var(--body); background:var(--raise); border:1px solid var(--line); border-radius:8px; padding:9px 11px; cursor:pointer}
.ic-match button:hover{border-color:var(--blue)}
.ic-match button.sel{border-color:var(--blue); background:var(--blue-soft)}
.ic-match button.done{border-color:var(--pos); background:var(--pos-soft); color:var(--ink); cursor:default}
.ic-match button.nope{border-color:var(--neg); background:var(--neg-soft)}
@media(max-width:520px){.ic-match{grid-template-columns:1fr}}

/* картки питання↔відповідь */
.ic-flash{display:flex; flex-direction:column; gap:10px}
.ic-flash .fc{background:var(--raise); border:1px solid var(--line); border-radius:8px; padding:14px 16px; cursor:pointer}
.ic-flash .fc .q{font-weight:600; color:var(--ink)}
.ic-flash .fc .a{margin-top:9px; font-size:14.5px; color:var(--body); border-top:1px solid var(--line-soft); padding-top:9px}
.ic-flash .fc .a[hidden]{display:none}
.ic-flash .fc .hint{font-size:12px; color:var(--faint); margin-top:8px}

/* міні-калькулятор */
.ic-calc{display:flex; flex-direction:column; gap:12px}
.ic-calc .row{display:flex; flex-direction:column; gap:5px}
.ic-calc label{font-size:13.5px; color:var(--muted)}
.ic-calc input[type=range]{width:100%; accent-color:var(--wine)}
.ic-calc .out{background:var(--raise); border:1px solid var(--line); border-radius:8px; padding:12px 14px; font-size:14.5px; color:var(--body)}
.ic-calc .out b{color:var(--ink); font-variant-numeric:tabular-nums}
.ic-calc .presets{display:flex; gap:6px; flex-wrap:wrap}
.ic-calc .presets button{font:inherit; font-size:12.5px; color:var(--body); background:var(--sunken); border:1px solid var(--line); border-radius:999px; padding:4px 11px; cursor:pointer}
.ic-calc .presets button:hover{border-color:var(--blue)}

/* чек-лист завдання */
.ic-assign label{display:flex; gap:9px; align-items:flex-start; font-size:14.5px; color:var(--body); margin:8px 0; cursor:pointer}
.ic-assign input[type=checkbox]{margin-top:3px; accent-color:var(--blue); width:15px; height:15px; flex:none}
.ic-assign .done-note{margin-top:12px; padding:10px 13px; background:var(--pos-soft); border:1px solid var(--pos); border-radius:8px; font-size:14px; color:var(--ink)}
.ic-assign .done-note[hidden]{display:none}

.ic-feedback{margin-top:11px; font-size:13.5px; font-weight:600}
.ic-feedback.good{color:var(--pos)} .ic-feedback.bad{color:var(--neg)}
.ic-reset{font:inherit; font-size:12.5px; color:var(--muted); background:none; border:0; text-decoration:underline; cursor:pointer; padding:0; margin-top:10px}

/* без JS видно суть */
.ic-fallback{margin-top:10px}
.ic-fallback summary{cursor:pointer; color:var(--wine); font-size:13.5px}
.js .ic-fallback{display:none}

/* ── відмітка проходження ───────────────────────────────────── */
.lesson-done{margin:40px 0 0; padding:18px 20px; border:1px dashed var(--line); border-radius:var(--radius); background:var(--sunken); text-align:center}
.lesson-done button{
  font:inherit; font-weight:600; font-size:14.5px; color:#fff; background:var(--wine);
  border:0; border-radius:999px; padding:9px 20px; cursor:pointer;
}
:root[data-theme="dark"] .lesson-done button,
:root:not([data-theme="light"]) .lesson-done button{color:#1b1410}
.lesson-done button:hover{background:var(--wine-deep)}
.lesson-done.is-done{border-color:var(--pos); border-style:solid; background:var(--pos-soft)}
.lesson-done.is-done button{background:transparent; color:var(--pos); border:1px solid var(--pos)}
.lesson-done .state{display:block; font-size:13px; color:var(--muted); margin-bottom:9px}

/* ── навігація між уроками ──────────────────────────────────── */
.lesson-nav{display:flex; justify-content:space-between; gap:12px; margin:44px 0 0; border-top:1px solid var(--line); padding-top:20px; font-family:Onest,sans-serif}
.lesson-nav a{display:flex; flex-direction:column; gap:2px; text-decoration:none; color:var(--muted); font-size:13px; max-width:46%}
.lesson-nav a:hover{color:var(--ink)}
.lesson-nav a .dir{font-family:"Spectral SC",serif; font-size:11.5px; letter-spacing:.04em; text-transform:lowercase}
.lesson-nav a .t{color:var(--ink); font-size:14.5px}
.lesson-nav a.next{text-align:right; margin-left:auto}
.lesson-nav a.disabled{visibility:hidden}

/* ── хаб і сторінка частини ─────────────────────────────────── */
.hero{padding:74px 0 30px; border-bottom:1px solid var(--line)}
.hero .kicker{font-family:"Spectral SC",serif; font-weight:600; font-size:13px; letter-spacing:.03em; color:var(--muted); text-transform:lowercase}
.hero h1{font-size:clamp(34px,7vw,58px); line-height:1.03; margin:16px 0 0}
.hero .lede{font-size:clamp(17px,2.3vw,20px); color:var(--body); max-width:52ch; margin:20px 0 0; font-family:Spectral,Georgia,serif; line-height:1.5}
.hero .meta{font-family:Onest,sans-serif; font-size:13px; color:var(--muted); margin:18px 0 0; max-width:46em; line-height:1.7}

.ring{display:flex; align-items:center; gap:16px; margin:26px 0 0}
.ring svg{flex:none}
.ring .rlabel{font-family:Onest,sans-serif; font-size:13.5px; color:var(--muted)}
.ring .rlabel b{display:block; font-family:Spectral,serif; font-size:20px; color:var(--ink)}

.parts{list-style:none; margin:34px 0 0; padding:0; display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.parts li{background:var(--raise)}
.parts a, .parts .locked{display:grid; grid-template-columns:2.6em 1fr auto; gap:14px; align-items:baseline; padding:15px 18px; text-decoration:none; color:var(--body)}
.parts a:hover{background:var(--sunken)}
.parts .pn{font-family:"Spectral SC",serif; font-weight:700; font-size:15px; color:var(--wine); font-variant-numeric:tabular-nums}
.parts .pt{display:block; color:var(--ink); font-weight:600; font-size:15.5px}
.parts .pd{display:block; font-size:13px; color:var(--muted); margin-top:3px}
.parts .pstat{font-family:Onest,sans-serif; font-size:11.5px; letter-spacing:.03em; color:var(--faint); white-space:nowrap; align-self:center}
.parts .pstat.started{color:var(--blue)}
.parts .pstat.done{color:var(--pos)}
.parts .locked{opacity:.55}
.parts .locked .pn{color:var(--faint)}

.lesson-list{list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
.lesson-list li{background:var(--raise)}
.lesson-list a{display:grid; grid-template-columns:2.6em 1fr auto; gap:14px; align-items:baseline; padding:14px 18px; text-decoration:none; color:var(--body)}
.lesson-list a:hover{background:var(--sunken)}
.lesson-list .ln{font-family:"Spectral SC",serif; font-weight:700; color:var(--wine); font-variant-numeric:tabular-nums}
.lesson-list .lt{display:block; color:var(--ink); font-size:15px}
.lesson-list .lc{display:block; font-size:13px; color:var(--muted); margin-top:2px}
.lesson-list .lcheck{font-size:14px; color:var(--faint); align-self:center}
.lesson-list .lcheck.done{color:var(--pos)}

.continue{display:inline-block; margin:22px 0 0; font-family:Onest,sans-serif; font-weight:600; font-size:14.5px}

footer{margin-top:70px; padding:24px 0 90px; border-top:1px solid var(--line); font-size:13px; line-height:1.65; color:var(--muted); max-width:46em}
footer a{color:var(--muted)}

@media (max-width:600px){
  body{font-size:15.5px}
  .hero{padding:56px 0 26px}
  .parts a, .parts .locked, .lesson-list a{grid-template-columns:2.2em 1fr; }
  .parts .pstat, .lesson-list .lcheck{grid-column:2; align-self:auto; margin-top:4px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}