/* Curriculum page (CurriculumPage.astro, 2026-10-27). Sleek system: flat solid cards + 1px hairline
   (sleek.css --sk-surf/--sk-line), three type sizes (--fs-h/--fs-b/--fs-s), mono gold small labels,
   one motion speed (--dur/--ease). Both themes come from the shared tokens. */
html:not(#kvs) main section.cu{margin-top:clamp(64px,10vh,120px)}
html:not(#kvs) main section.cu:first-of-type{margin-top:clamp(120px,18vh,220px)}
html:not(#kvs) main .cu-intro__sub{margin:0 0 clamp(22px,3vw,32px);color:var(--g-fg);font-size:var(--fs-b);line-height:var(--lh-b)}
html:not(#kvs) main .cu-key{padding:clamp(22px,3.4vw,36px);border:1px solid var(--g-gold);border-radius:18px;background:color-mix(in srgb,var(--g-gold) 7%,transparent)}
html:not(#kvs) main .cu-key .tk{justify-content:center;margin:0 0 14px}
html:not(#kvs) main .cu-key h2{margin:0 0 14px}
html:not(#kvs) main .cu-key p:not(.tk){margin:0;font-size:var(--fs-b);line-height:var(--lh-b);color:var(--g-fg)}

/* realm picker */
html:not(#kvs) main .cu-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(24px,3.4vw,36px);padding:0}
html:not(#kvs) main .cu-tabs[hidden]{display:none}
html:not(#kvs) main .cu-tab{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:44px;padding:8px 14px;
  border:1px solid var(--sk-line);border-radius:12px;background:transparent;color:var(--g-fg);font:inherit;cursor:pointer;text-align:left;
  transition:border-color var(--dur) var(--ease),background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
html:not(#kvs) main .cu-tab__n{font-size:var(--fs-b);font-weight:600;line-height:1.15;letter-spacing:-.01em}
html:not(#kvs) main .cu-tab__s{font:500 var(--fs-s)/1 var(--t-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--g-mut)}
html:not(#kvs) main .cu-tab:hover{border-color:color-mix(in srgb,var(--g-gold) 55%,var(--sk-line))}
html:not(#kvs) main .cu-tab[aria-selected="true"]{border-color:var(--g-gold);background:color-mix(in srgb,var(--g-gold) 12%,transparent)}
html:not(#kvs) main .cu-tab[aria-selected="true"] .cu-tab__s{color:var(--g-gold)}
html:not(#kvs) main .cu-tab:focus-visible{outline:2px solid var(--g-gold);outline-offset:2px}
@media (max-width:760px){
  html:not(#kvs) main .cu-tabs{flex-wrap:nowrap;overflow-x:auto;margin-left:calc(-1 * clamp(28px,5vw,60px));margin-right:calc(-1 * clamp(28px,5vw,60px));
    padding:2px clamp(28px,5vw,60px) 6px;scroll-padding:0 clamp(28px,5vw,60px);scrollbar-width:none}
  html:not(#kvs) main .cu-tabs::-webkit-scrollbar{display:none}
  html:not(#kvs) main .cu-tab{flex:0 0 auto}
}

/* panels: without JS all stacked with a hairline between */
html:not(#kvs) main .cu-panel+.cu-panel{margin-top:clamp(36px,5vw,56px);padding-top:clamp(36px,5vw,56px);border-top:1px solid var(--sk-line)}
html:not(#kvs) main .cu-pick.is-js .cu-panel{margin-top:0;padding-top:0;border-top:0}
html:not(#kvs) main .cu-panel[hidden]{display:none}
html:not(#kvs) main .cu-panel__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;margin:0 0 clamp(18px,2.6vw,28px)}
html:not(#kvs) main .cu-panel__top h2{margin:0}
html:not(#kvs) main .cu-dot{color:var(--g-mut);font-weight:400}
html:not(#kvs) main .cu-st{display:inline-flex;align-items:center;height:28px;padding:0 12px;border:1px solid var(--sk-line);border-radius:999px;
  font:500 var(--fs-s)/1 var(--t-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--g-mut);white-space:nowrap}
html:not(#kvs) main .cu-st--beta{border-color:var(--g-gold);color:var(--g-gold)}

/* levels */
html:not(#kvs) main .cu-lv{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
html:not(#kvs) main .cu-lv__r{margin:0;padding:18px 20px;border:1px solid var(--sk-line);border-radius:14px;background:transparent}
html:not(#kvs) main .cu-lv__h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0 0 10px}
html:not(#kvs) main .cu-lv__n{font:500 var(--fs-s)/1.2 var(--t-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--g-gold)}
html:not(#kvs) main .cu-lv__a{font-size:var(--fs-s);line-height:1.2;color:var(--g-mut)}
html:not(#kvs) main .cu-lv__r ul{margin:0;padding:0 0 0 1.1em}
html:not(#kvs) main .cu-lv__r li li,html:not(#kvs) main .cu-lv__r p{margin:0;font-size:var(--fs-b);line-height:1.5;font-weight:var(--fw-b);color:var(--g-fg)}
html:not(#kvs) main .cu-lv__r li li+li{margin-top:4px}
html:not(#kvs) main .cu-lv__r li::marker{color:var(--g-gold)}
html[lang="zh"]:not(#kvs) main :is(.cu-lv__n,.cu-st,.cu-tab__s){letter-spacing:.04em}

/* built into every realm */
html:not(#kvs) main .cu-built .tk{justify-content:center;text-align:center}
html:not(#kvs) main .cu-built h2{margin:0 0 clamp(22px,3vw,32px)}
html:not(#kvs) main .cu-built__g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
html:not(#kvs) main .cu-built__g li{margin:0;padding:18px 20px;border:1px solid var(--sk-line);border-radius:14px}
html:not(#kvs) main .cu-built__g h3{margin:0 0 6px;color:var(--g-fg)}
html:not(#kvs) main .cu-built__g p{margin:0;font-size:var(--fs-b);line-height:1.5;color:var(--g-fg)}
/* level + habit cards read as lists: always left-aligned with gold bullets (the site centres text on phones) */
html:not(#kvs) main :is(.cu-lv__r,.cu-lv__r p,.cu-built__g li,.cu-built__g p,.cu-panel__top){text-align:left}
html:not(#kvs) main .cu-lv__r ul{list-style:disc outside}
html:not(#kvs) main .cu-lv__r ul>li{display:list-item;text-align:left}
/* eyebrows always centred (user 2026-10-27) */
html:not(#kvs) main .cu-key :is(.tk,h2,p),html:not(#kvs) main .cu-built>.tk{text-align:center;justify-content:center}
html:not(#kvs) main .cu-key .tk{white-space:nowrap}

/* how we teach reading + parent view (2026-10-27, branch trust) */
html:not(#kvs) main .cu-read__g{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
html:not(#kvs) main .cu-read__n{display:block;margin:0 0 10px;font:500 var(--fs-s)/1 var(--t-mono);letter-spacing:.14em;color:var(--g-gold)}
html:not(#kvs) main .cu-par>.tk,html:not(#kvs) main .cu-read>.tk{text-align:center;justify-content:center;white-space:nowrap}
html:not(#kvs) main .cu-par h2{margin:0 0 14px}
html:not(#kvs) main .cu-par__p{max-width:560px;margin:0 auto;text-align:center;font-size:var(--fs-b);line-height:var(--lh-b);color:var(--g-fg)}
html:not(#kvs) main .cu-par__pill{margin:18px 0 clamp(24px,3.4vw,36px);text-align:center}
html:not(#kvs) main .cu-par__pill span{display:inline-flex;align-items:center;height:28px;padding:0 12px;border:1px solid var(--g-gold);border-radius:999px;
  font:500 var(--fs-s)/1 var(--t-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--g-gold);white-space:nowrap}
html:not(#kvs) main .cu-note{max-width:440px;margin:0 auto;padding:20px 22px;border:1px solid var(--sk-line);border-radius:20px;text-align:left;
  background:color-mix(in srgb,var(--g-fg) 3%,transparent);box-shadow:0 18px 40px -28px rgba(0,0,0,.45)}
html:not(#kvs) main .cu-note__top{display:flex;align-items:center;gap:12px;padding:0 0 14px;margin:0 0 4px;border-bottom:1px solid var(--sk-line)}
html:not(#kvs) main .cu-note__av{display:inline-grid;place-items:center;flex:0 0 36px;height:36px;border-radius:50%;
  background:color-mix(in srgb,var(--g-gold) 18%,transparent);color:var(--g-gold);font-weight:600}
html:not(#kvs) main .cu-note__who{display:flex;flex-direction:column;gap:3px;text-align:left}
html:not(#kvs) main .cu-note__who strong{font-size:var(--fs-b);line-height:1.2;color:var(--g-fg)}
html:not(#kvs) main .cu-note__who span{font:500 var(--fs-s)/1.2 var(--t-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--g-mut)}
html:not(#kvs) main .cu-note__rows{margin:0;text-align:left}
html:not(#kvs) main .cu-note__rows>div{padding:12px 0;border-top:1px solid var(--sk-line)}
html:not(#kvs) main .cu-note__rows>div:first-child{border-top:0}
html:not(#kvs) main .cu-note__rows dt{margin:0 0 4px;font:500 var(--fs-s)/1.2 var(--t-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--g-gold)}
html:not(#kvs) main .cu-note__rows dd{margin:0;font-size:var(--fs-b);line-height:1.5;color:var(--g-fg)}
html[lang="zh"]:not(#kvs) main :is(.cu-note__rows dt,.cu-note__who span,.cu-par__pill span){letter-spacing:.04em}
