/* UA3 learning paths — Campus Binge design language (CampusBinge.design v1.2.1). Light only. */
:root{
  /* colour roles (tokens.color) */
  --primary:#019543; --primary-deep:#017835; --on-primary:#FFFFFF; --accent:#46E67C;
  --primary-container:#C9F7D8; --on-primary-container:#01742D;
  --surface:#FFFFFF; --surface-tint:#ECFDF2; --surface-alt:#F7F7F7;
  --heading:#3C3C3C; --text:#4B4B4B; --text-muted:#6B6B6B; --text-faint:#AFAFAF;
  --outline:#E5E5E5; --outline-soft:#EFEFEF; --selection:#E3F3FE; --danger:#E5484D; --dark-silver:#707070;
  --sky:#1899E8; --sky-deep:#1279BF; --sky-wash:#E3F3FE;
  --mango:#FF9A1F; --mango-ink:#A95600; --mango-wash:#FFF0DC;
  --rose:#FF5A5F; --rose-ink:#C53238; --rose-wash:#FFE8E9;
  --berry:#8C6CFF; --berry-deep:#6A4FD6; --berry-wash:#F1EDFF;
  --sun:#FFC21A; --sun-ink:#5C4300; --sun-wash:#FFF6D6;
  --grad-text:linear-gradient(110deg in oklab,#017835,#019543);
  /* radius, elevation, motion */
  --r-chip:8px; --r-control:12px; --r-card:16px; --r-sheet:22px; --r-big:28px;
  --raised:0 0 0 1px rgb(15 23 19 / .05),0 1px 2px rgb(15 23 19 / .06),0 6px 16px -8px rgb(15 23 19 / .18);
  --press:0 0 0 1px rgb(15 23 19 / .06),0 1px 1px rgb(15 23 19 / .06);
  --primary-glow:0 8px 20px -10px rgb(1 149 67 / .7);
  --sticker:drop-shadow(0 12px 16px rgb(20 60 35 / .14));
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-spring:linear(0,.028,.1,.199,.314,.433,.549,.657,.753,.836,.904,.959,1,1.03,1.05,1.062,1.067,1.068,1.064,1.058,1.051,1.043,1.035,1.027,1.02,1.014,1.009,1.005,1.001,.999,.997,.996,1);
  /* step roles mapped onto support hues */
  --why:var(--mango-ink); --why-t:var(--mango-wash); --why-e:var(--mango);
  --def:var(--sky-deep); --def-t:var(--sky-wash); --def-e:var(--sky);
  --walk:var(--primary-deep); --walk-t:var(--surface-tint); --walk-e:var(--primary);
  --write:var(--berry-deep); --write-t:var(--berry-wash); --write-e:var(--berry);
  --trap:var(--rose-ink); --trap-t:var(--rose-wash); --trap-e:var(--rose);
  --display:"Poppins",system-ui,sans-serif; --body:"Montserrat",system-ui,sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
::selection{background:var(--selection)}
body{margin:0;background:var(--surface-alt);color:var(--text);font:500 16px/1.5 var(--body);font-feature-settings:"kern";-webkit-tap-highlight-color:transparent}
main{max-width:880px;margin:0 auto;padding:28px 20px 80px}
h1,h2,h3,h4{font-family:var(--display);color:var(--heading);text-wrap:balance}
h2{font-size:1.7rem;font-weight:700;line-height:1.15;letter-spacing:-.02em;margin:0 0 .3em}
h3{font-size:20px;font-weight:600;line-height:1.2;margin:1.4em 0 .4em}
h4{font-size:16px;font-weight:600;line-height:1.3;margin:1.1em 0 .3em}
p{margin:.55em 0;text-wrap:pretty}
strong,b{color:var(--heading);font-weight:700}
a{color:var(--primary-deep);text-underline-offset:2px}
code,kbd,.mono{font-family:var(--mono);font-size:.88em}
code{background:var(--surface-alt);border:1px solid var(--outline-soft);padding:.05em .35em;border-radius:6px;color:var(--heading)}
pre{font:13px/1.55 var(--mono);background:var(--heading);color:#F7F7F7;padding:14px 16px;border-radius:var(--r-control);overflow-x:auto;break-inside:avoid}
pre code{background:none;border:0;padding:0;color:inherit}
ul,ol{padding-left:1.3em;margin:.5em 0}
li{margin:.25em 0}
hr{border:0;border-top:1px solid var(--outline);margin:2em 0}
.small{font-size:14px;line-height:1.45;color:var(--text-muted)}
table,.num,.kbd-k{font-variant-numeric:tabular-nums}
mark{background:var(--primary-container);color:var(--on-primary-container);padding:0 .25em;border-radius:4px}
b.hl,strong.hl{color:var(--primary-deep)}
.gw{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.05em}
:focus-visible{outline:3px solid var(--sky);outline-offset:3px}

/* ---------- cover ---------- */
.cover{position:relative;background:var(--surface);border-radius:var(--r-big);box-shadow:var(--raised);padding:clamp(24px,4vw,44px);margin-bottom:28px;overflow:hidden}
.cover .kicker,.part .kicker{font:600 14px/1.3 var(--display);color:var(--primary-deep)}
.cover h1{font-size:clamp(36px,6vw,60px);font-weight:700;line-height:1.02;letter-spacing:-.04em;margin:.3em 0 .2em;max-width:15ch}
.cover .sub{color:var(--text-muted);font-size:clamp(16px,1.5vw,19px);line-height:1.55}
.cover .chips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--primary-container);color:var(--on-primary-container);border-radius:999px;height:32px;padding:0 13px;font:600 13.5px/1 var(--display)}
.cover .credit{margin-top:26px;padding-top:16px;border-top:1px solid var(--outline);font-size:14px;line-height:1.5;color:var(--text-muted)}
.cover .credit b{color:var(--heading)}
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 8px;font:600 14px/1.4 var(--display);color:var(--text-muted)}
.byline b{color:var(--heading)}
.byline .who{display:inline-flex;align-items:center;gap:7px}
.byline img{width:28px;height:28px;border-radius:999px;object-fit:cover;box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--outline)}
.foot .byline{justify-content:center;font-size:13px}
.cover .stk{position:absolute;right:clamp(12px,3vw,36px);top:clamp(12px,3vw,32px);width:clamp(84px,14vw,148px);height:auto;filter:var(--sticker);pointer-events:none}
.cover .has-stk{padding-right:clamp(90px,16vw,170px)}

/* ---------- contents + part headers ---------- */
.toc{background:var(--surface);border-radius:var(--r-big);box-shadow:var(--raised);padding:24px 28px;margin:0 0 28px}
.toc > h2{font-size:22px}
.toc h4{font:600 12px/1.3 var(--display);letter-spacing:.12em;text-transform:uppercase;margin:18px 0 6px}
.toc h4 a{color:var(--primary-deep);text-decoration:none}
.toc ol{columns:2;column-gap:28px;font-size:14px;line-height:1.45;padding-left:1.3em;margin:0}
.toc li{break-inside:avoid;margin:.3em 0}
.toc li::marker{color:var(--text-faint)}
.toc a{color:var(--text);text-decoration:none}
.toc .done a{color:var(--text-faint);text-decoration:line-through}
.part{margin:52px 0 18px;padding:0 0 12px;border-bottom:2px solid var(--primary)}
.part h2{font-size:clamp(30px,4.4vw,44px);font-weight:800;line-height:1.08;letter-spacing:-.028em;margin:.2em 0 0}
.part p{color:var(--text-muted);margin:.4em 0 0;font-size:17px;line-height:1.55}

/* ---------- topic card ---------- */
.topic{background:var(--surface);border-radius:var(--r-big);box-shadow:var(--raised);padding:clamp(20px,2.6vw,30px);margin:0 0 22px}
.topic-head{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;margin-bottom:6px}
.topic-head .num{font:600 12px/1 var(--display);letter-spacing:.12em;color:var(--text-faint)}
.topic-head h2{margin:.3em 0 0;font-size:clamp(22px,2.6vw,28px)}
.topic .syl{font-size:13px;line-height:1.45;color:var(--text-muted);margin:4px 0 10px}
.meta{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;font:600 12.5px/1 var(--display);background:var(--surface-alt);color:var(--text-muted);box-shadow:inset 0 0 0 1px var(--outline);white-space:nowrap}
.tag.hot{background:var(--primary);color:var(--on-primary);box-shadow:none}
.tag.warm{background:var(--primary-container);color:var(--on-primary-container);box-shadow:none}
.donebox{display:inline-flex;align-items:center;gap:8px;font:600 13.5px/1 var(--display);color:var(--text-muted);cursor:pointer;user-select:none;white-space:nowrap;min-height:44px;padding:0 4px}
.donebox input{width:20px;height:20px;accent-color:var(--primary);cursor:pointer}

/* steps: Why / Picture / Idea / Walk / Write / Traps / Check */
.step{margin:20px 0 0}
.step > .lab{display:flex;align-items:center;gap:8px;font:700 12px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px}
.step > .lab::before{content:"";width:8px;height:8px;border-radius:2px;background:currentColor}
.why,.idea,.walk,.trap{padding:14px 18px;border-radius:var(--r-card);box-shadow:inset 3px 0 0 var(--e)}
.why{background:var(--why-t);--e:var(--why-e)} .why > .lab{color:var(--why)}
.idea{background:var(--def-t);--e:var(--def-e)} .idea > .lab{color:var(--def)}
.walk{background:var(--walk-t);--e:var(--walk-e)} .walk > .lab{color:var(--walk)}
.trap{background:var(--trap-t);--e:var(--trap-e)} .trap > .lab{color:var(--trap)}
.write{background:var(--write-t);box-shadow:inset 0 0 0 1.5px var(--write-e);padding:16px 20px;border-radius:var(--r-card)}
.write > .lab{color:var(--write)}
.write .marks{margin-left:auto;font:600 12.5px/1 var(--display);letter-spacing:0;text-transform:none;color:var(--on-primary);background:var(--write-e);border-radius:999px;padding:5px 10px}
.plain > .lab{color:var(--text-muted)}
.check > .lab{color:var(--heading)}
.why,.idea,.walk,.trap{break-inside:avoid}
ol.steps{counter-reset:s;list-style:none;padding-left:0}
ol.steps > li{counter-increment:s;position:relative;padding-left:36px;margin:.6em 0}
ol.steps > li::before{content:counter(s);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:999px;background:var(--primary);color:var(--on-primary);font:700 12.5px/24px var(--display);text-align:center}

.formula{font:500 15px/1.55 var(--mono);color:var(--heading);background:var(--surface);box-shadow:inset 0 0 0 1px var(--outline);border-radius:var(--r-control);padding:10px 14px;margin:10px 0;overflow-x:auto;break-inside:avoid}

/* ---------- tables ---------- */
.tbl-wrap{overflow-x:auto;margin:12px 0}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:14px;line-height:1.45;background:var(--surface);border:1px solid var(--outline);border-radius:var(--r-control);overflow:hidden}
th,td{border-bottom:1px solid var(--outline);border-right:1px solid var(--outline-soft);padding:8px 11px;text-align:left;vertical-align:top}
tr:last-child > td{border-bottom:0}
th:last-child,td:last-child{border-right:0}
th{background:var(--surface-alt);font:600 13.5px/1.35 var(--display);color:var(--heading)}
td.c,th.c{text-align:center}
td.mono,th.mono{font-family:var(--mono);font-size:13px}
tr{break-inside:avoid}

/* ---------- figures ---------- */
figure.fig{margin:14px 0;padding:18px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--outline);border-radius:var(--r-card);break-inside:avoid}
figure.fig .canvas{overflow-x:auto}
figure.fig svg{display:block;margin:0 auto;max-width:100%;height:auto}
figure.fig figcaption{font-size:13px;line-height:1.45;color:var(--text-muted);margin-top:12px;text-align:center}
figure.fig figcaption b{color:var(--heading);font-family:var(--display);font-weight:600}
svg text{font-family:var(--body);font-weight:500;font-size:13px;fill:var(--heading)}
svg .t-sm{font-size:11px;fill:var(--text)}
svg .t-xs{font-size:10px;fill:var(--text-muted)}
svg .t-b{font-family:var(--display);font-weight:600}
svg .t-mono{font-family:var(--mono);font-size:11.5px}
svg .t-acc{fill:var(--primary-deep)}
svg .t-mut{fill:var(--text-muted)}
svg .t-def{fill:var(--def)} svg .t-walk{fill:var(--walk)} svg .t-trap{fill:var(--trap)}
svg .n{fill:var(--surface);stroke:var(--heading);stroke-width:1.25}
svg .n.focal{fill:var(--primary-container);stroke:var(--primary);stroke-width:1.6}
svg .n.store{fill:var(--surface-alt)}
svg .n.ext{fill:var(--surface-alt);stroke:var(--text-faint)}
svg .n.opt{stroke-dasharray:4 3}
svg .n.def{fill:var(--def-t);stroke:var(--def-e)}
svg .n.walk{fill:var(--walk-t);stroke:var(--walk-e)}
svg .n.trap{fill:var(--trap-t);stroke:var(--trap-e)}
svg .n.write{fill:var(--write-t);stroke:var(--write-e)}
svg .n.why{fill:var(--why-t);stroke:var(--why-e)}
svg .e{fill:none;stroke:var(--dark-silver);stroke-width:1.4}
svg .e.acc{stroke:var(--primary);stroke-width:1.9}
svg .e.dash{stroke-dasharray:5 4}
svg .e.ink{stroke:var(--heading)}
svg .grid{stroke:var(--outline-soft);stroke-width:1}
svg .axis{stroke:var(--text);stroke-width:1.2;fill:none}
svg .mask{fill:var(--surface)}
svg .dot{fill:var(--primary)}
svg .fill-acc{fill:var(--primary)} svg .fill-def{fill:var(--sky)} svg .fill-walk{fill:var(--accent)} svg .fill-trap{fill:var(--rose)} svg .fill-mut{fill:var(--outline)} svg .fill-ink{fill:var(--heading)}

/* ---------- questions (faq component) ---------- */
details.qa{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--raised);margin:10px 0;break-inside:avoid}
details.qa > summary{list-style:none;cursor:pointer;min-height:56px;padding:16px 20px;display:flex;gap:12px;align-items:baseline;font:700 16.5px/1.4 var(--display);color:var(--heading);border-radius:var(--r-card);user-select:none;-webkit-user-select:none}
details.qa > summary::-webkit-details-marker{display:none}
details.qa > summary:active{background:rgb(60 60 60 / .035)}
details.qa > summary .qn{font:600 12px/1.4 var(--display);letter-spacing:.08em;color:var(--text-faint);flex:none;min-width:2.6em}
details.qa > summary .q{flex:1}
details.qa > summary .mk{flex:none;align-self:center;font:600 12.5px/1 var(--display);color:var(--on-primary-container);background:var(--primary-container);border-radius:999px;padding:6px 10px}
details.qa > summary::after{content:"";flex:none;align-self:center;width:9px;height:9px;margin:0 2px 4px 4px;border-right:2.5px solid var(--primary-deep);border-bottom:2.5px solid var(--primary-deep);transform:rotate(45deg);transition:transform 300ms var(--ease-out)}
details.qa[open] > summary::after{transform:translateY(4px) rotate(225deg)}
details.qa .a{padding:4px 20px 18px;border-top:1px solid var(--outline-soft);font-weight:500}
details.qa.long{break-inside:auto}
.check details.qa,.why details.qa{box-shadow:var(--press)}
.mcq-opts{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;margin:8px 0 0;padding-left:0;list-style:none;font:500 15px/1.45 var(--body)}
.mcq-opts li::before{content:attr(data-o) ") ";font-weight:700;color:var(--text-muted)}

/* ---------- toolbar (nav component) ---------- */
.bar{position:sticky;top:0;z-index:5;background:rgb(255 255 255 / .96);box-shadow:0 1px 0 rgb(15 23 19 / .08),0 8px 24px -16px rgb(15 23 19 / .2)}
.bar-in{max-width:880px;margin:0 auto;padding:0 20px;min-height:64px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bar a.home{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;font:600 14.5px/1 var(--display);color:var(--primary-deep);background:var(--surface-tint);text-decoration:none}
.bar .grow{flex:1}
.prog{display:flex;align-items:center;gap:10px;font:600 13.5px/1 var(--display);color:var(--text-muted)}
.prog .track{width:110px;height:10px;border-radius:999px;background:#DDDDDD;overflow:hidden}
.prog .fill{display:block;height:100%;width:100%;background:var(--primary);transform-origin:left;transform:scaleX(0);transition:transform 450ms var(--ease-out)}
button.btn{display:inline-flex;align-items:center;height:40px;padding:0 16px;font:700 14px/1 var(--display);border:0;border-radius:999px;background:var(--surface-alt);color:var(--heading);box-shadow:inset 0 0 0 1px var(--outline);cursor:pointer;white-space:nowrap;user-select:none;touch-action:manipulation;transition:transform 450ms var(--ease-spring),background-color 160ms var(--ease-out)}
button.btn:active{transform:scale(.95);transition:transform 100ms var(--ease-out)}
button.btn[aria-pressed="true"]{background:var(--heading);color:var(--on-primary);box-shadow:none}
@media (hover:hover) and (pointer:fine){
  button.btn:hover{background:color-mix(in srgb,var(--surface-alt) 92%,black)}
  button.btn[aria-pressed="true"]:hover{background:color-mix(in srgb,var(--heading) 90%,black)}
  .toc a:hover{color:var(--primary-deep);text-decoration:underline}
}

.foot{margin-top:40px;text-align:center;font-size:13px;color:var(--text-muted)}

@media (max-width:640px){
  main{padding:20px 16px 64px}
  .toc ol{columns:1}
  .mcq-opts{grid-template-columns:1fr}
  .topic-head{flex-direction:column;gap:4px}
  .cover .has-stk{padding-right:0}
  .cover .stk{position:static;display:block;margin:0 0 8px}
  .bar-in{padding:6px 16px}
  .prog .track{width:70px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation:none!important}
  button.btn:active{transform:none}
}

/* ---------- print ---------- */
@media print{
  @page{size:A4;margin:16mm 14mm 18mm}
  body{background:#fff;font-size:10.4pt;line-height:1.5}
  main{max-width:none;padding:0}
  .bar,.donebox,.noprint{display:none!important}
  .gw{background:none;color:var(--primary-deep)}
  .cover{box-shadow:none;border-radius:0;padding:26mm 0 0;min-height:240mm;break-after:page;overflow:visible}
  .cover .stk{top:22mm;right:0}
  .toc{box-shadow:none;border-radius:0;padding:0;break-after:page}
  .part{break-before:page}
  .topic{box-shadow:none;border-radius:0;padding:0;margin:0 0 9mm}
  .topic + .topic{border-top:1px solid var(--outline);padding-top:6mm}
  details.qa{box-shadow:none;border:1px solid var(--outline)}
  details.qa > summary{min-height:0;padding:10px 14px;font-size:11pt}
  details.qa > summary::after{display:none}
  details.qa .a{padding:2px 14px 12px}
  pre{white-space:pre-wrap}
  a{color:inherit;text-decoration:none}
  h2,h3,h4{break-after:avoid}
}