/* ITIL 5 Learn — site styles
   Layout: persistent left sidebar + one focused content column (Notion/Linear feel).
   Palette: warm neutrals; caramel → brown gradient used ONLY on lesson covers and primary buttons.
   Dark mode is true OLED black. --accent = primary / "today"; --warm = lighter amber ("target", tips). */

:root{
  --bg:#FFFDFA; --side:#F7F2EC; --surface:#FFFFFF; --ink:#2A2019; --muted:#665A4E; --faint:#74675A; --line:#E9DFD3; --hover:#F2EAE0;
  --accent:#7A4526; --accent-soft:#F5EADF; --on-accent:#FFFFFF;
  --warm:#8F5520; --warm-soft:#FBF0E2;
  --ok:#2F7049; --ok-soft:#E7F2EA;
  --bad:#A23D29; --bad-soft:#FBE9E5;
  --grad:linear-gradient(135deg,#EDBE85 0%,#B9733A 55%,#6E3F22 100%);
  --grad-btn:linear-gradient(135deg,#96592B 0%,#6E3F22 100%);
  --shadow:0 1px 2px rgba(42,32,25,.05),0 12px 32px -16px rgba(42,32,25,.22);
  --font:"Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:"Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sbw:252px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000; --side:#0A0807; --surface:#110E0B; --ink:#F3ECE4; --muted:#B5A899; --faint:#9A8D7D; --line:#2A231C; --hover:#1A1511;
    --accent:#E1A260; --accent-soft:#1E150D; --on-accent:#1A0F05;
    --warm:#F2D2A2; --warm-soft:#211910;
    --ok:#8CCBA2; --ok-soft:#102018;
    --bad:#F09A86; --bad-soft:#2A120D;
    --grad:linear-gradient(135deg,#F5D3A1 0%,#D08B4C 50%,#6B3F24 100%);
    --grad-btn:linear-gradient(135deg,#F2C68D 0%,#C9834A 100%);
    --shadow:none;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#000000; --side:#0A0807; --surface:#110E0B; --ink:#F3ECE4; --muted:#B5A899; --faint:#9A8D7D; --line:#2A231C; --hover:#1A1511;
  --accent:#E1A260; --accent-soft:#1E150D; --on-accent:#1A0F05;
  --warm:#F2D2A2; --warm-soft:#211910;
  --ok:#8CCBA2; --ok-soft:#102018;
  --bad:#F09A86; --bad-soft:#2A120D;
  --grad:linear-gradient(135deg,#F5D3A1 0%,#D08B4C 50%,#6B3F24 100%);
  --grad-btn:linear-gradient(135deg,#F2C68D 0%,#C9834A 100%);
  --shadow:none;
  color-scheme:dark;
}

/* ---------- language switching ---------- */
html[data-lang="id"] [data-l="en"],
html:not([data-lang="id"]) [data-l="id"]{display:none !important}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:600;letter-spacing:-.015em;line-height:1.25}
p{margin:0}
ul,ol{margin:0;padding:0}
img,svg{max-width:100%}
a{color:var(--accent);text-underline-offset:2px}
button,input,select,textarea{font:inherit;color:inherit}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,label:focus-within{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none !important}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;border-radius:8px;z-index:50}
.skip:focus{left:max(8px, env(safe-area-inset-left, 0px))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- app shell ---------- */
.app{display:grid;grid-template-columns:var(--sbw) minmax(0,1fr);min-height:100vh}
.sb{background:var(--side);border-right:1px solid var(--line);padding:14px 10px 16px;padding-top:max(14px, env(safe-area-inset-top, 0px));display:flex;flex-direction:column;gap:14px;position:sticky;top:0;height:100vh;overflow-y:auto;min-width:0}
.sb-top{display:flex;align-items:center;gap:9px;padding:2px 8px;text-decoration:none;color:var(--ink)}
.mark{width:24px;height:24px;border-radius:7px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.sb-top b{font-weight:600;font-size:15px}
.search{position:relative;margin:0 2px}
.search input{width:100%;padding:7px 34px 7px 32px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-size:14px;color:var(--ink)}
.search input::placeholder{color:var(--faint)}
.search input:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.search>svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:14px;height:14px;color:var(--faint);pointer-events:none}
.search kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:11px;color:var(--faint);border:1px solid var(--line);border-radius:4px;padding:0 5px;pointer-events:none}
.sresults{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);z-index:20;max-height:340px;overflow:auto;padding:4px}
.sresults a{display:grid;gap:1px;padding:7px 10px;border-radius:7px;text-decoration:none;color:var(--ink);font-size:14px}
.sresults a small{color:var(--faint);font-size:12px}
.sresults a:hover,.sresults a.on{background:var(--hover)}
.sresults p{padding:8px 10px;color:var(--faint);font-size:13px}
.grp{display:grid;gap:1px}
.grp>p{font-size:12px;color:var(--faint);padding:4px 10px;font-weight:500}
.it{display:flex;align-items:center;gap:9px;padding:5px 10px;border-radius:7px;color:var(--muted);font-size:14px;text-decoration:none;min-width:0}
.it:hover{background:var(--hover);color:var(--ink)}
.it svg{width:16px;height:16px;flex:none}
.it .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.it.on{background:var(--hover);color:var(--ink);font-weight:500}
.it.sub{padding-left:35px;font-size:13.5px}
.it .dot{width:7px;height:7px;border-radius:50%;margin-left:auto;flex:none}
.it .dot.here{background:var(--warm)}
.it .dot.done{background:var(--ok)}
.it .cnt,.it .soon{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--faint);white-space:nowrap}
.it.dis{cursor:default}
.it.dis:hover{background:none;color:var(--muted)}
.sb-foot{margin-top:auto;display:flex;gap:6px;align-items:center;padding:0 4px;flex-wrap:wrap}
.mini{display:inline-flex;border:1px solid var(--line);border-radius:7px;padding:2px;background:var(--surface)}
.mini button{font-size:12px;font-weight:500;border:0;border-radius:5px;padding:3px 9px;background:transparent;color:var(--muted);cursor:pointer}
.mini button[aria-pressed="true"]{background:var(--hover);color:var(--ink)}
.ic-btn{width:30px;height:30px;border-radius:7px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.ic-btn svg{width:15px;height:15px}
.ic-btn:hover{color:var(--ink)}

.mtop{display:none}
.main{padding:48px clamp(20px,5vw,72px) 56px;min-width:0}
.col{max-width:700px;margin:0 auto;display:grid;gap:26px}
.col.wide{max-width:960px}
.site-foot{border-top:1px solid var(--line);padding-block:20px 28px;padding-left:max(20px, env(safe-area-inset-left, 0px));padding-right:max(20px, env(safe-area-inset-right, 0px));font-size:13px;color:var(--faint)}
.site-foot .in{max-width:700px;margin:0 auto;display:grid;gap:4px}
.scrim{display:none}

@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .sb{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);z-index:40;transform:translateX(-102%);transition:transform .2s ease;padding-left:max(10px, env(safe-area-inset-left, 0px));box-shadow:var(--shadow)}
  body.nav-open .sb{transform:none}
  body.nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:35}
  .mtop{display:flex;align-items:center;gap:10px;padding:10px 16px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));border-bottom:1px solid var(--line);background:var(--side);position:sticky;top:env(safe-area-inset-top, 0px);z-index:30}
  body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top, 0px);z-index:31;background:var(--side)}
  .mtop .burger{width:34px;height:34px;border:0;background:none;display:grid;place-items:center;cursor:pointer;color:var(--muted);margin-left:-8px}
  .mtop .burger svg{width:20px;height:20px}
  .mtop b{font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .mtop .mini{margin-left:auto}
  .main{padding:28px max(16px, env(safe-area-inset-right, 0px)) 40px max(16px, env(safe-area-inset-left, 0px))}
}
@media (prefers-reduced-motion:reduce){.sb{transition:none}}

/* ---------- buttons, tags ---------- */
.btn{font-weight:500;font-size:14.5px;border-radius:9px;padding:9px 15px;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:7px;text-decoration:none;line-height:1.3}
.btn.pri{background:var(--grad-btn);color:var(--on-accent)}
.btn.sec{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.sec:hover{background:var(--hover)}
.btn.ghost{background:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--ink);background:var(--hover)}
.btn.danger{background:var(--bad-soft);color:var(--bad)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn svg{width:15px;height:15px}
.btns{display:flex;flex-wrap:wrap;gap:8px}
.kb{font-family:var(--mono);font-size:11px;border:1px solid currentColor;border-radius:4px;padding:0 5px;opacity:.6}
.tag{font-size:12px;padding:1px 8px;border-radius:5px;background:var(--hover);color:var(--ink);white-space:nowrap;display:inline-block}
.tag.a{background:var(--accent-soft);color:var(--accent)}
.tag.w{background:var(--warm-soft);color:var(--warm)}
.tag.ok{background:var(--ok-soft);color:var(--ok)}
.lbl{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.muted{color:var(--muted)}

/* ---------- home ---------- */
.hello{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:8px 20px;align-items:center}
.hello h1{font-size:clamp(28px,3.6vw,34px);line-height:1.2}
.hello p{color:var(--muted);font-size:17px;max-width:54ch;margin-top:8px}
.sun{width:120px;height:90px;display:block}
.choices{display:grid;gap:10px}
.choice{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none;color:var(--ink)}
.choice:hover{background:var(--hover)}
.spot{width:56px;height:56px;display:block}
.choice h2{font-size:16.5px}
.choice p{color:var(--muted);font-size:14.5px;margin-top:2px}
.choice .go{color:var(--faint);font-size:18px}
.cont{display:flex;align-items:center;gap:14px;padding:13px 15px;border-radius:12px;background:var(--warm-soft);flex-wrap:wrap}
.cont .k{font-size:13px;color:var(--warm);font-weight:600}
.cont b{font-weight:600}
.cont .grow{flex:1;min-width:180px;display:grid;gap:1px}
.cont small{color:var(--muted);font-size:13px}
.path{display:grid;gap:10px}
.path h2{font-size:13.5px;font-weight:500;color:var(--faint)}
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.step{display:grid;gap:6px;min-width:0;text-decoration:none}
.step i{height:4px;border-radius:99px;background:var(--line);display:block;overflow:hidden}
.step i b{display:block;height:100%;background:var(--accent);border-radius:99px}
.step span{font-size:12.5px;color:var(--muted);line-height:1.35}
.step.here span{color:var(--ink);font-weight:500}
@media (max-width:560px){.hello{grid-template-columns:1fr}.sun{display:none}.choice{grid-template-columns:44px minmax(0,1fr)}.choice .go{display:none}.spot{width:44px;height:44px}.steps{grid-template-columns:1fr 1fr}}

/* ---------- index lists (learn, practices) ---------- */
.ph{display:grid;gap:8px}
.ph h1{font-size:clamp(28px,3.6vw,34px)}
.ph p{color:var(--muted);font-size:17px;max-width:60ch}
.mods{display:grid;gap:10px}
.mod{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:start;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--surface);text-decoration:none;color:var(--ink)}
a.mod:hover{background:var(--hover)}
.mod .n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:14px;border:1.5px solid var(--line);color:var(--muted)}
.mod.done .n{background:var(--ok);border-color:var(--ok);color:var(--surface)}
.mod.here .n{border-color:var(--warm);color:var(--warm)}
.mod h2{font-size:16.5px}
.mod p{color:var(--muted);font-size:14.5px;margin-top:2px}
.mod .les{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mod.soon{opacity:.75}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filters input{flex:1;min-width:200px;padding:8px 12px;border-radius:9px;border:1px solid var(--line);background:var(--surface)}
.chipf{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:5px 12px;font-size:13.5px;cursor:pointer;color:var(--muted)}
.chipf[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.pgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pcard{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:14px 16px;display:grid;gap:6px;align-content:start;min-width:0}
.pcard h2,.pcard h3{font-size:15.5px}
.pcard p{color:var(--muted);font-size:14px}
.pcard .meta{display:flex;gap:6px;flex-wrap:wrap}
.pcount{font-size:13px;color:var(--faint)}
@media (max-width:640px){.pgrid{grid-template-columns:1fr}}

/* ---------- lesson (doc) ---------- */
.doc{display:grid;gap:20px}
.crumbs{font-size:13px;color:var(--faint);display:flex;gap:6px;flex-wrap:wrap}
.crumbs a{color:var(--faint);text-decoration:none}
.crumbs a:hover{color:var(--ink)}
.cover{height:132px;border-radius:14px;background:var(--grad);position:relative;overflow:hidden}
.cover svg{position:absolute;inset:0;width:100%;height:100%}
.doc-ic{width:58px;height:58px;margin-top:-50px;margin-left:16px;position:relative;display:grid;place-items:center;border-radius:15px;background:var(--surface);border:1px solid var(--line);color:var(--accent)}
.doc-ic svg{width:28px;height:28px}
.doc h1{font-size:clamp(28px,3.8vw,38px);line-height:1.15;font-weight:700}
.props{display:grid;grid-template-columns:120px minmax(0,1fr);gap:5px 12px;font-size:14px;padding-bottom:18px;border-bottom:1px solid var(--line);margin:0}
.props dt{color:var(--faint)}
.props dd{margin:0;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.prose{display:grid;gap:16px;font-size:16.5px;line-height:1.72}
.prose h2{font-size:22px;margin-top:14px}
.prose h3{font-size:17.5px;margin-top:6px}
.prose ul,.prose ol{padding-left:22px;display:grid;gap:6px}
.prose li::marker{color:var(--faint)}
.prose strong{font-weight:600}
.term{border-bottom:1.5px dashed var(--faint);cursor:help;position:relative}
.tipbox{position:fixed;width:min(300px,calc(100vw - 32px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:13.5px;line-height:1.45;z-index:60;box-shadow:var(--shadow);pointer-events:auto}
.tipbox b{display:block;font-weight:600;margin-bottom:2px}
.tipbox a{display:inline-block;margin-top:6px;font-size:12.5px}
.callout{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding:14px 16px;border-radius:10px;background:var(--accent-soft);font-size:15.5px;line-height:1.6}
.callout>svg{width:20px;height:20px;color:var(--accent);margin-top:2px}
.callout.warm{background:var(--warm-soft)}
.callout.warm>svg{color:var(--warm)}
.callout.plain{background:var(--hover)}
.callout.plain>svg{color:var(--muted)}
.callout b.h{font-weight:600;display:block;margin-bottom:3px}
.callout ul{display:grid;gap:5px;margin-top:4px;list-style:none;padding:0}
.callout li{padding-left:14px;position:relative}
.callout li::before{content:"";position:absolute;left:2px;top:.72em;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.5}
figure{margin:0}
.fig{border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:10px;background:var(--surface)}
.fig .scroll{overflow-x:auto}
.fig svg{width:100%;height:auto;display:block;margin:0 auto}
.fig figcaption{font-size:13.5px;color:var(--faint);text-align:center}
.fig .s-soft{fill:var(--accent-soft);stroke:var(--accent)}
.fig .s-card{fill:var(--bg);stroke:var(--line)}
.fig .s-acc{fill:var(--accent)}
.fig .s-warm{fill:var(--warm-soft);stroke:var(--warm)}
.fig .s-line{stroke:var(--accent);fill:none}
.fig .s-faint{stroke:var(--faint);fill:none}
.fig .t-lab{fill:var(--ink);font-family:var(--font);font-size:13px;font-weight:600}
.fig .t-sm{fill:var(--muted);font-family:var(--font);font-size:11.5px}
.fig .t-acc{fill:var(--accent);font-family:var(--font);font-size:14px;font-weight:700}
.fig .t-on{fill:var(--on-accent);font-family:var(--font);font-size:12.5px;font-weight:600}
details.ex{border:1px solid var(--line);border-radius:10px;background:var(--surface)}
details.ex summary{cursor:pointer;padding:12px 14px;font-weight:500;list-style:none;display:flex;gap:9px;align-items:center}
details.ex summary::-webkit-details-marker{display:none}
details.ex summary::before{content:"";flex:none;width:0;height:0;border-left:5px solid var(--muted);border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform .15s}
details.ex[open] summary::before{transform:rotate(90deg)}
details.ex summary .tag{margin-left:auto}
details.ex .exb{padding:0 16px 16px 28px;color:var(--muted);display:grid;gap:10px;font-size:15.5px}
details.ex .exb strong{color:var(--ink);font-weight:600}
@media (prefers-reduced-motion:reduce){details.ex summary::before{transition:none}}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
.tbl table{border-collapse:collapse;width:100%;font-size:14.5px;min-width:520px}
.tbl th,.tbl td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-weight:600;background:var(--hover);font-size:13px}
.tbl tr:last-child td{border-bottom:0}
.dend{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--line)}
.done-btn[aria-pressed="true"]{background:var(--ok-soft);color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok)}
.src{font-size:13px;color:var(--faint)}
.pgrid-gp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none;padding:0 !important;counter-reset:gp}
.pgrid-gp li{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:12px 14px;display:grid;gap:4px;counter-increment:gp;font-size:15px;line-height:1.55}
.pgrid-gp li b{font-weight:600;display:flex;gap:8px}
.pgrid-gp li b::before{content:counter(gp);color:var(--accent);font-family:var(--mono);font-size:13px;padding-top:2px}
.pgrid-gp li span{color:var(--muted)}
@media (max-width:640px){.pgrid-gp{grid-template-columns:1fr}}

/* ---------- glossary ---------- */
.gl{display:grid;gap:0;border-top:1px solid var(--line)}
.gl article{display:grid;grid-template-columns:200px minmax(0,1fr);gap:4px 20px;padding:14px 0;border-bottom:1px solid var(--line)}
.gl h2{font-size:15.5px}
.gl p{color:var(--muted);font-size:15px}
.gl p+p{margin-top:4px}
.gl article:target{background:var(--warm-soft);border-radius:8px;padding-inline:10px}
@media (max-width:600px){.gl article{grid-template-columns:1fr}}

/* ---------- assessment ---------- */
.card{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:18px;display:grid;gap:14px;min-width:0}
.card h2{font-size:18px}
.field{display:grid;gap:6px}
.field label{font-size:14px;font-weight:500}
.field input{padding:9px 12px;border-radius:9px;border:1px solid var(--line);background:var(--bg);width:100%}
.pick{display:grid;gap:16px}
.pick fieldset{border:0;padding:0;margin:0;display:grid;gap:6px}
.pick legend{font-size:13px;color:var(--faint);font-weight:500;margin-bottom:6px;padding:0}
.pick .opts2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.chk{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:var(--bg);cursor:pointer;font-size:14.5px;line-height:1.4}
.chk input{margin-top:2px;accent-color:var(--accent);flex:none}
.chk:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
@media (max-width:600px){.pick .opts2{grid-template-columns:1fr}}
.stickybar{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--line);padding-block:12px calc(12px + env(safe-area-inset-bottom, 0px));display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;z-index:5}
.wz{display:grid;gap:22px}
.wz-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--faint)}
.saved{display:inline-flex;gap:6px;align-items:center}
.saved i{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.segbar{display:flex;gap:4px}
.segbar i{height:4px;border-radius:99px;background:var(--line);display:block;flex:1}
.segbar i.d{background:var(--accent)}
.segbar i.c{background:var(--warm)}
.wz h1{font-size:clamp(23px,3vw,29px);line-height:1.25}
.wz .qhelp{color:var(--muted);font-size:15.5px;margin-top:-10px}
.phase{display:flex;gap:6px;flex-wrap:wrap}
.phb{display:inline-flex;gap:8px;align-items:center;font-size:13.5px;padding:5px 12px 5px 6px;border-radius:99px;border:1px solid var(--line);color:var(--muted);background:var(--surface);cursor:pointer}
.phb .n{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:600;background:var(--hover)}
.phb[aria-pressed="true"]{border-color:var(--accent);color:var(--ink)}
.phb[aria-pressed="true"] .n{background:var(--accent);color:var(--on-accent)}
.phb.ok .n{background:var(--ok);color:var(--bg)}
.opts{display:grid;gap:7px}
.opt{display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:12px;align-items:start;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);cursor:pointer;width:100%}
.opt:hover{background:var(--hover)}
.opt .k{font-family:var(--mono);font-size:12px;width:22px;height:22px;border-radius:5px;border:1px solid var(--line);display:grid;place-items:center;color:var(--faint);margin-top:1px}
.opt b{font-weight:600;display:block}
.opt .d{color:var(--muted);font-size:14.5px;line-height:1.5}
.opt .mks{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;align-self:center}
.mk{font-size:12px;font-weight:500;padding:2px 8px;border-radius:99px;white-space:nowrap}
.mk.c{background:var(--accent);color:var(--on-accent)}
.mk.t{background:var(--warm);color:var(--bg)}
.opt.is-cur{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-soft)}
.opt.is-cur .k{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.opt.is-tgt{border-color:var(--warm);border-style:dashed;box-shadow:inset 0 0 0 1px var(--warm);background:var(--warm-soft)}
.opt.is-tgt .k{background:var(--warm);border-color:var(--warm);color:var(--bg)}
.opt.is-cur.is-tgt{border-style:solid}
.opt[aria-disabled="true"]{opacity:.4;cursor:not-allowed}
.opt[aria-disabled="true"]:hover{background:var(--surface)}
.phb:disabled{opacity:.5;cursor:not-allowed}
.wz-note{font-size:14.5px;color:var(--muted)}
.wz-note b{color:var(--ink);font-weight:600}
.wz-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
@media (max-width:520px){.opt{grid-template-columns:24px minmax(0,1fr)}.opt .mks{grid-column:2;justify-content:flex-start}}
.res-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.res-sum div{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:12px 14px;display:grid;gap:2px}
.res-sum b{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.res-sum div>span{font-size:13px;color:var(--faint)}
@media (max-width:520px){.res-sum{grid-template-columns:1fr}}
.legend{display:flex;gap:16px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.legend .lc{background:var(--accent)}
.legend .lt{background:var(--warm-soft);box-shadow:inset 0 0 0 1.5px var(--warm)}
.bars{display:grid;gap:4px}
.brow{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) 92px;gap:14px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.brow:last-child{border-bottom:0}
.brow .nm{font-size:14.5px;font-weight:500;overflow-wrap:anywhere}
.brow .v{font-family:var(--mono);font-size:12.5px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.track{position:relative;height:12px;border-radius:99px;background:var(--hover)}
.track .t{position:absolute;inset:0 auto 0 0;border-radius:99px;background:var(--warm-soft);box-shadow:inset 0 0 0 1.5px var(--warm)}
.track .c{position:absolute;inset:2px auto 2px 2px;border-radius:99px;background:var(--accent)}
.ticks{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr) 92px;gap:14px;font-family:var(--mono);font-size:11px;color:var(--faint)}
.ticks span{display:flex;justify-content:space-between}
@media (max-width:600px){.brow,.ticks{grid-template-columns:minmax(0,1fr) 80px}.brow .track{grid-column:1/-1;grid-row:2}.ticks{display:none}}
.pdet{border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.pdet summary{cursor:pointer;padding:13px 16px;display:flex;gap:10px;align-items:center;list-style:none;font-weight:500}
.pdet summary::-webkit-details-marker{display:none}
.pdet summary .tag{margin-left:auto}
.pdet .in{padding:0 16px 16px;display:grid;gap:10px}
.qrow{display:grid;gap:4px;padding:10px 12px;border-radius:9px;background:var(--bg);border:1px solid var(--line)}
.qrow .top{display:flex;justify-content:space-between;gap:10px;font-size:14.5px;font-weight:500}
.qrow .top .lv{font-family:var(--mono);font-size:12.5px;color:var(--muted);white-space:nowrap}
.qrow p{font-size:14px;color:var(--muted)}
.qrow p b{color:var(--ink);font-weight:600}
.confirm{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-radius:10px;background:var(--bad-soft);color:var(--bad);font-size:14.5px}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:9px 16px;border-radius:9px;font-size:14px;z-index:70;max-width:calc(100vw - 32px)}
.empty{border:1px dashed var(--line);border-radius:12px;padding:22px;text-align:center;color:var(--muted);display:grid;gap:10px;justify-items:center}

@media (prefers-reduced-motion:no-preference){
  .opt,.choice,.mod,.phb,.chk,.btn,.it{transition:background-color .15s,border-color .15s,box-shadow .15s,color .15s}
}
@media print{
  .sb,.mtop,.site-foot,.stickybar,.btns,.dend{display:none !important}
  .app{display:block}
  body{background:#fff;color:#000}
}

/* ---------- lifecycle activity cards ---------- */
.acts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.act{border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:16px;display:grid;gap:10px;align-content:start;font-size:15px;line-height:1.6;min-width:0}
.act h3{font-size:18px;margin:0}
.act h3 .term{border-bottom-color:var(--accent)}
.act dl{display:grid;gap:8px;margin:0}
.act dt{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.act dd{margin:2px 0 0;color:var(--muted)}
.act dd em{color:var(--ink);font-style:normal;font-weight:500}
.ptags{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ptags .lbl{width:100%;font-size:11.5px}
.ptags a{text-decoration:none}
.ptags a:hover{text-decoration:underline}
@media (max-width:680px){.acts{grid-template-columns:1fr}}

/* ---------- practice guides ---------- */
.prose .flow{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;counter-reset:f}
.flow li{counter-increment:f;flex:1 1 180px;border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:10px 12px;font-size:14.5px;line-height:1.45;min-width:0}
.flow li::before{content:counter(f);display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:11px;font-weight:600;margin-right:7px;vertical-align:1px}
.flow li b{font-weight:600}
.flow li span{display:block;color:var(--muted);font-size:13.5px;margin-top:4px}
.prose .lvls{list-style:none;display:grid;gap:6px;padding:0}
.lvls li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font-size:15px;line-height:1.5}
.lvls li b{font-weight:600}
.lvls li b small{display:block;color:var(--faint);font-weight:500;font-size:12px}
.lvls li:nth-child(3){border-color:var(--accent)}
@media (max-width:560px){.lvls li{grid-template-columns:1fr;gap:2px}}
.purpose{font-size:17px;line-height:1.6}