/* ANTA Learn — shared styles for /learn/ pages. Tokens mirror member/funnel.css. */
:root{
  --paper:#F3F4F0; --sheet:#FFFFFF; --ink:#17181A; --ink-2:#4A4C50; --line:#DADCD5;
  --hl:#FFE14D; --see:#E9A800; --think:#4C6FD1; --build:#169C55; --prove:#D8412F;
  --cta:#FFD21F; --cta-edge:#17181A; --task:#FFF6C7; --task-edge:#E9A800;
  --track:#E4E6DF; --err-bg:#FDECEA; --err-ink:#8C1D12; --ok-bg:#E6F5EC; --ok-ink:#0E6B39;
  --shadow:0 1px 0 rgba(23,24,26,.06),0 10px 30px -12px rgba(23,24,26,.25);
  --f-display:"Bai Jamjuree","IBM Plex Sans Thai Looped",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Thai Looped","Sarabun",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{color-scheme:dark;--paper:#121315;--sheet:#1B1C1F;--ink:#EEEEE8;--ink-2:#AEB0AA;--line:#2E3034;
  --hl:#8A7300;--cta-edge:#000;--task:#2A2616;--track:#2A2C30;--err-bg:#3A1712;--err-ink:#FFB4A8;--ok-bg:#12301F;--ok-ink:#8FE0B0;
  --shadow:0 1px 0 rgba(0,0,0,.4),0 10px 30px -12px rgba(0,0,0,.7)}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.7 var(--f-body);padding-inline:16px;padding-block:0 64px;overflow-wrap:anywhere}
h1,h2,h3{font-family:var(--f-display);line-height:1.3;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
img,iframe,video{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--think);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:8px;background:var(--sheet);padding:8px 12px;border:2px solid var(--ink);border-radius:8px;z-index:10}
.skip-link:focus{left:16px}

/* top bar */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-block:18px;max-width:760px;margin-inline:auto;flex-wrap:wrap}
.brand{font:700 18px/1 var(--f-display);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.brand span{font:600 13px/1 var(--f-body);color:var(--ink-2);border:1px solid var(--line);border-radius:999px;padding:4px 8px}
.who{display:flex;align-items:center;gap:10px;font:500 14px/1.3 var(--f-body);color:var(--ink-2);min-width:0}
.who b{color:var(--ink);font-weight:600;max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linkbtn{background:none;border:0;padding:4px 2px;color:var(--ink-2);text-decoration:underline;font:500 14px/1.3 var(--f-body);cursor:pointer}
.linkbtn:hover{color:var(--ink)}

.wrap{max-width:760px;margin-inline:auto;display:flex;flex-direction:column;gap:22px}
.narrow{max-width:460px}
.muted{color:var(--ink-2);font-size:15px}
.eyebrow{font:600 14px/1.4 var(--f-body);color:var(--ink-2)}
.page-title{font-size:clamp(26px,5vw,36px);font-weight:700}

.card{background:var(--sheet);border:1px solid var(--line);border-radius:14px;padding:20px;display:grid;gap:12px;box-shadow:var(--shadow)}

/* CTA — same shape as the funnel */
.cta{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:var(--cta);color:#17181A;text-decoration:none;border:3px solid var(--cta-edge);border-radius:12px;padding:12px 20px;box-shadow:0 5px 0 var(--cta-edge);font:700 18px/1.3 var(--f-display);cursor:pointer;transition:transform .12s,box-shadow .12s;text-align:center}
.cta.block{display:flex;width:100%;padding:14px 20px;font-size:20px}
.cta:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--cta-edge)}
.cta:active{transform:translateY(5px);box-shadow:0 0 0 var(--cta-edge)}
.cta:disabled{opacity:.6;cursor:progress;transform:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--sheet);color:var(--ink);text-decoration:none;border:2px solid var(--ink);border-radius:10px;padding:10px 16px;font:600 16px/1.3 var(--f-display);cursor:pointer}
.btn:hover{background:var(--paper)}
.btn[aria-disabled=true]{opacity:.4;pointer-events:none;border-color:var(--line)}

/* progress */
.bar{height:10px;border-radius:999px;background:var(--track);overflow:hidden}
.bar > i{display:block;height:100%;background:var(--build);border-radius:inherit;transition:width .4s ease}
.bar-row{display:flex;justify-content:space-between;gap:12px;font:500 14px/1.4 var(--f-body);color:var(--ink-2);font-variant-numeric:tabular-nums}

/* catalog */
.courses{display:grid;gap:16px}
.course{position:relative;background:var(--sheet);border:1px solid var(--line);border-radius:14px;padding:20px;display:grid;gap:12px;box-shadow:var(--shadow);border-top:6px solid var(--c,var(--think))}
.course h2{font-size:22px}
.course h2 a{text-decoration:none}
.course h2 a::after{content:"";position:absolute;inset:0;border-radius:14px}
.course h2 a:focus-visible{outline:none}
.course:has(h2 a:focus-visible){outline:3px solid var(--think);outline-offset:3px}
.course .unlock{position:relative;z-index:1;justify-self:start}
.badge{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--f-body);border-radius:999px;padding:6px 10px;background:var(--paper);border:1px solid var(--line);color:var(--ink-2);justify-self:start}
.badge.lock{color:var(--prove);border-color:currentColor}
.badge.done{color:var(--ok-ink);background:var(--ok-bg);border-color:transparent}

/* notices */
.notice{border-radius:14px;padding:20px;display:grid;gap:10px;background:var(--sheet);border:2px solid var(--line)}
.notice.lockbox{border:3px dashed var(--prove);background:var(--task)}
.notice.lockbox h2{font-size:20px}
.notice.renew{border:3px solid var(--see);background:var(--task);margin-bottom:18px}
.notice.renew h2{font-size:20px}
.notice.empty{text-align:center;justify-items:center;padding-block:36px}
.err{background:var(--err-bg);color:var(--err-ink);border-radius:10px;padding:12px 14px;font-size:15px}
.ok{background:var(--ok-bg);color:var(--ok-ink);border-radius:10px;padding:12px 14px;font-size:15px}
.loading{color:var(--ink-2);font-size:15px;padding-block:24px;text-align:center}

/* syllabus */
.module{display:grid;gap:8px}
.module h2{font-size:18px;display:flex;gap:10px;align-items:baseline;justify-content:space-between}
.module h2 .n{font:600 13px/1 var(--f-body);color:var(--ink-2);white-space:nowrap}
.lessons{list-style:none;margin:0;padding:0;background:var(--sheet);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.lessons li + li{border-top:1px solid var(--line)}
.lrow{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:12px 14px;text-decoration:none;min-height:52px}
a.lrow:hover{background:var(--paper)}
a.lrow:focus-visible{outline-offset:-3px}
.lrow .ic{width:24px;height:24px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;font:700 14px/1 var(--f-display);color:var(--ink-2)}
.lrow.done .ic{background:var(--build);border-color:var(--build);color:#fff}
.lrow.locked{color:var(--ink-2)}
.lrow.locked .ic{border:0;border-radius:0}
.lrow .t{font-size:16px;line-height:1.5}
.lrow .d{font:500 13px/1 var(--f-body);color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}

/* lesson */
.crumbs{font:500 14px/1.5 var(--f-body);color:var(--ink-2)}
.crumbs a{color:var(--ink-2)}
.crumbs span[aria-hidden]{margin-inline:6px}
.video{position:relative;aspect-ratio:16/9;width:100%;border-radius:12px;overflow:hidden;background:#000;box-shadow:var(--shadow)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.md{font-size:17px;line-height:1.8}
.md > * + *{margin-top:14px}
.md h1,.md h2,.md h3,.md h4{margin-top:26px}
.md h1{font-size:26px}.md h2{font-size:22px}.md h3{font-size:19px}
.md ul,.md ol{padding-left:22px;margin-bottom:0}
.md li + li{margin-top:4px}
.md blockquote{margin-inline:0;border-left:5px solid var(--see);padding:4px 0 4px 16px;color:var(--ink-2)}
.md code{font:500 .9em/1.5 ui-monospace,Menlo,monospace;background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.md pre{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px;overflow-x:auto}
.md pre code{border:0;padding:0;background:none}
.md table{border-collapse:collapse;display:block;overflow-x:auto;max-width:100%}
.md th,.md td{border:1px solid var(--line);padding:6px 10px;text-align:left}
.md img{height:auto;border-radius:8px}
.md hr{border:0;border-top:1px solid var(--line)}
.md a{color:var(--think);text-underline-offset:3px}
.task{background:var(--task);border:2px solid var(--task-edge);border-left-width:8px;border-radius:12px;padding:18px 20px;display:grid;gap:10px}
.task h2{font-size:18px;display:flex;align-items:center;gap:8px}
.complete{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:3px solid var(--ink);border-radius:12px;padding:14px 18px;background:var(--sheet);color:var(--ink);font:700 18px/1.3 var(--f-display);cursor:pointer;box-shadow:0 5px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.complete .box{width:24px;height:24px;border:2px solid currentColor;border-radius:6px;display:grid;place-items:center;font-size:16px;flex:none}
.complete[aria-pressed=true]{background:var(--build);border-color:var(--build);color:#fff;box-shadow:0 5px 0 #0E6B39}
.complete:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--ink)}
.complete[aria-pressed=true]:hover{box-shadow:0 3px 0 #0E6B39}
.complete:disabled{opacity:.6;cursor:progress}
.pager{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pager > *{width:100%;min-height:48px;padding-inline:10px}
.pager .cta{font-size:16px;flex-direction:row}

/* login */
.tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:4px;gap:4px}
.tabs button{border:0;background:none;border-radius:9px;padding:10px 8px;font:600 16px/1.3 var(--f-display);color:var(--ink-2);cursor:pointer}
.tabs button[aria-selected=true]{background:var(--sheet);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.field{display:grid;gap:6px;font:600 15px/1.4 var(--f-body)}
.field input{font:400 17px/1.5 var(--f-body);color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:10px;padding:12px;width:100%;min-width:0}
.field input:focus-visible{border-color:var(--think);outline-offset:1px}
.field small{font:400 13px/1.4 var(--f-body);color:var(--ink-2)}
.info{font-size:14px;color:var(--ink-2);background:var(--sheet);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;gap:6px}

@media (max-width:420px){
  body{font-size:16px}
  .card,.course,.notice{padding:16px}
  .lrow{padding:12px;gap:8px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}