/* 学习页统一骨架（P-13a，头脑风暴开工计划 L-06～L-18，2026-11-01）
   七门课的课页（article[data-ls-course]）与课程目录页（article[data-ls-home]）共用；标记由 build/lesson_skeleton.py 写进页面，
   交互在 assets/lesson-shell.js。各课样式表只管正文组件，外壳（标题区、时长行、提示框、免费标记、字号行宽、页尾下一节、本节目录）在这里统一。
   只用全站令牌（assets/ui.css，源头 build/theme_tokens.py）；本表排在各课样式表之后，选择器带 article[data-ls-*] 压过各课写法。 */

/* ---------- 字号与行宽（L-15）：阅读型正文 17px / 1.8，正文列 720 ---------- */
article.lesson[data-ls-course]{--maxw:calc(var(--measure,720px) + 76px);max-width:var(--maxw)}
article.lesson[data-ls-course].fl-lesson.fl-wide{max-width:var(--maxw)}
@media(min-width:1480px){article.lesson[data-ls-course]{--maxw:calc(var(--measure,720px) + 90px)}}
article[data-ls-course]{font-size:var(--fs-prose,17px);line-height:var(--lh-read,1.8)}
:root body article.lesson[data-ls-course] :is(p,li):not([class]):not(:where(.qs,.sk-frame,figure,table,.pa-paywall,.lsk-task,.lsk-st,footer,.tl-quiz-entry,.fl-player,.wy-player,.tl-endcard,nav,dl,.pa-term,[class*="grid"],[class*="card"]) *){font-size:var(--fs-prose,17px);line-height:var(--lh-read,1.8)}

/* 选择器前面带 :root body article.lesson：各课自己的标题类（.sec-label、.wy-h、.fl-h 等）优先级高，要压得住 */
/* ---------- 标题阶梯（L-16）：h1 36 / h2 24 / h3 18，手机 28 / 21 / 17；编号芯片是 h1 的 60% ---------- */
:root body article.lesson[data-ls-course] .lesson-header h1{display:block;font-size:var(--fs-l1,36px);line-height:1.3;letter-spacing:var(--ls-l1)}
:root body article.lesson[data-ls-course] h2:not(:where(.qs,.sk-frame,.pa-paywall,.lsk-task,.lsk-st,footer,.tl-quiz-entry,.tl-endcard,.ls-next,.ls-toc,aside.sidebar) *){font-size:var(--fs-l2,24px);line-height:1.35;letter-spacing:var(--ls-l2)}
/* 威科夫、交易实战的区块标题原来用 font 简写加 !important 写死 19px，只能同样带 !important 改字号 */
:root body article.lesson[data-ls-course] :is(h2.wy-h,h2.fl-h){font-size:var(--fs-l2,24px)!important;line-height:1.35!important}
:root body article.lesson[data-ls-course] h3:not(:where(.qs,.sk-frame,.pa-paywall,.lsk-task,.lsk-st,footer,.tl-quiz-entry,.tl-endcard,.ls-next,.ls-toc,svg) *){font-size:var(--fs-l3,18px);line-height:1.45}
article[data-ls-course] .lesson-header h1[data-ls-no]::before{content:attr(data-ls-no);display:inline-block;margin-right:12px;padding:2px 10px;border-radius:var(--r-sm,10px);background:var(--accent-soft);color:var(--accent-deep,var(--accent));font-size:.6em;font-weight:600;line-height:1.5;letter-spacing:0;vertical-align:.2em;font-variant-numeric:tabular-nums}
article[data-ls-course] .lesson-header h1 .ls-no{display:inline-block;margin-right:12px;padding:2px 10px;border-radius:var(--r-sm,10px);background:var(--accent-soft);color:var(--accent-deep,var(--accent));font-size:.6em;font-weight:600;line-height:1.5;letter-spacing:0;vertical-align:.2em;font-variant-numeric:tabular-nums}
article[data-ls-home] .lesson-header h1{font-size:var(--fs-display,44px)}

/* ---------- 面包屑与章节标签（L-07、L-06）：电脑上面包屑已写章名，标签只留节号；手机不显示面包屑（P-12），标签带章名 ---------- */
article[data-ls-course] .ls-crumb a:last-child{color:var(--sub)}
article[data-ls-course] .ls-kicker{display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 4px;line-height:1.7}
article[data-ls-course] .ls-kicker .ls-alias{color:var(--sub);font-weight:400}
article[data-ls-course] .ls-kicker .ls-free-all{margin-left:4px;color:var(--accent);font-weight:400;text-decoration:underline;text-underline-offset:3px;border:0;background:none;padding:0}
@media(min-width:641px){article[data-ls-course] .ls-kicker .ls-k-ch{display:none}}

/* ---------- 时长与组成一行（L-08）：约 n 分钟 · 视频 / 图解 / 练习 / 自测，线条图标 ---------- */
article[data-ls-course] .ls-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:14px 0 0;color:var(--mute);font-size:var(--fs-small,13px);line-height:1.6}
article[data-ls-course] .ls-meta>span{display:inline-flex;align-items:center;gap:5px}
article[data-ls-course] .ls-meta>span::before{content:none!important}
article[data-ls-course] .ls-meta .ls-dur{color:var(--sub);font-weight:600}
article[data-ls-course] .ls-meta .ls-ic{flex:none;width:14px;height:14px;color:var(--accent)}
article[data-ls-course] .ls-meta+.lsk-task,article[data-ls-course] .ls-meta+link+.lsk-task{margin-top:14px}
@media(max-width:640px){article[data-ls-course] .ls-meta .ls-ic{vertical-align:-2px;margin-right:3px}}

/* ---------- 免费标记一种样式（L-18）：绿色细描边胶囊，侧栏、章节标签、目录页同一个 ---------- */
:is(article[data-ls-course],article[data-ls-home],#courseNav) :is(.pa-nav-free,.rt-free,.pa-free,.pa-kick-free,.ls-free,.sb-trial,.trial-badge:not(.ls-free-all)){display:inline-flex;align-items:center;height:20px;margin-left:6px;padding:0 7px;border:1px solid var(--free-line);border-radius:var(--r-pill,999px);background:transparent;color:var(--free);font-size:var(--fs-tiny,12px);font-style:normal;font-weight:600;line-height:1;letter-spacing:0;vertical-align:1px;white-space:nowrap}
article[data-ls-course] .ls-kicker .ls-free{margin-left:0}
#courseNav .sb-tag{color:var(--free)}

/* ---------- 提示框四种（L-17）：结论 / 定义（金左边线 + 米底）、说明（无底 + 细边）、注意（红左边线）、免费 / 成功（绿） ---------- */
article[data-ls-course] :is(.tl-objective,.tldr,.key-line,.sm-concl,.hb-def,.dp-take,.dp-hint,.wy-slogan,.pa-shu-take,.fl-lb-take,.ls-note-key){border:0;border-left:3px solid var(--accent);border-radius:0 var(--r-sm,10px) var(--r-sm,10px) 0;background:var(--accent-soft);box-shadow:none}
article[data-ls-course] :is(.wy-next,.rt-note,.sm-peer,.dp-find,.pa-eq-note,.pa-trial-note,.hb-tip,.tl-hint,.ls-note-info){border:1px solid var(--line2);border-radius:var(--r-sm,10px);background:transparent;box-shadow:none}
article[data-ls-course] :is(.c2-mistake,.ls-note-warn){border:0;border-left:3px solid var(--err);border-radius:0 var(--r-sm,10px) var(--r-sm,10px) 0;background:var(--err-soft);box-shadow:none}
article[data-ls-course] :is(.ls-note-ok){border:0;border-left:3px solid var(--ok);border-radius:0 var(--r-sm,10px) var(--r-sm,10px) 0;background:var(--ok-soft)}
article[data-ls-course] :is(.tl-objective,.tldr,.sm-concl,.hb-def,.wy-slogan,.wy-next,.rt-note,.sm-peer,.pa-trial-note,.hb-tip,.c2-mistake,.ls-note-key,.ls-note-info,.ls-note-warn,.ls-note-ok){padding:14px 18px}
article[data-ls-course] :is(.tl-objective,.tldr,.sm-concl,.hb-def,.dp-take,.dp-hint,.wy-slogan,.pa-shu-take,.fl-lb-take)>:is(b,strong,span):first-child:not(:only-child){color:var(--accent-deep,var(--accent))}
article[data-ls-course] .hb-tip::before,article[data-ls-course] .wy-next>svg{color:var(--sub)}

/* ---------- 讲解画面（L-11）：画框里只留「教学示意」角标，联系方式在播放器下面一行 ---------- */
:is(article[data-ls-course],article[data-ls-home]) .sk-contact{display:none}
.sk-frame>.ls-demo{position:absolute;top:10px;right:12px;z-index:2;padding:2px 8px;border:1px solid var(--line);border-radius:var(--r-pill,999px);background:var(--card);color:var(--mute);font-size:var(--fs-tiny,12px);line-height:1.5;pointer-events:none}
.ls-qs-contact{margin:10px 0 0;color:var(--mute);font-size:var(--fs-small,13px);line-height:1.6}
.ls-qs-contact b{color:var(--sub);font-weight:600}
.ls-qs-contact .ls-demo-m{display:none}
/* 手机上画框标题占满一行，角标会压住标题：角标不放画框里，写进播放器下面那行 */
@media(max-width:640px){.sk-frame>.ls-demo{display:none}.ls-qs-contact .ls-demo-m{display:inline}}

/* ---------- 页尾「下一节」大卡（L-13）：一张主卡 + 一行次级链接 ---------- */
article[data-ls-course] nav.pager.ls-next{display:block;margin:28px 0 24px;padding:0;border:0}
article[data-ls-course] .ls-next .ls-next-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 16px;min-height:0;padding:20px 24px;border:1px solid var(--accent-line,var(--line2));border-radius:var(--r,16px);background:var(--card);color:var(--text);text-align:left;text-decoration:none;transition:border-color var(--dur-1,.12s),background var(--dur-1,.12s)}
article[data-ls-course] .ls-next .ls-next-card:hover{border-color:var(--accent);background:var(--accent-soft)}
article[data-ls-course] .ls-next .ls-next-k{grid-column:1;display:block;margin:0;color:var(--accent);font-size:var(--fs-small,13px);font-weight:600;font-variant-numeric:tabular-nums}
article[data-ls-course] .ls-next .ls-next-t{grid-column:1;color:var(--text);font-size:var(--fs-l3,18px);font-weight:600;line-height:1.45}
article[data-ls-course] .ls-next .ls-next-ar{grid-column:2;grid-row:1/span 2;color:var(--accent)}
article[data-ls-course] .ls-next .ls-next-sub{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 20px;margin:12px 4px 0;font-size:var(--fs-small,13px);line-height:1.6}
article[data-ls-course] .ls-next .ls-next-sub a{display:inline;min-height:0;padding:0;border:0;background:none;color:var(--sub);font-size:inherit;font-weight:400;text-decoration:none}
article[data-ls-course] .ls-next .ls-next-sub a:hover{color:var(--text);text-decoration:underline}
article[data-ls-course] .ls-next .ls-next-sub a:only-child{margin-left:auto}
@media(max-width:640px){article[data-ls-course] .ls-next .ls-next-card{padding:16px 18px}article[data-ls-course] .ls-next .ls-next-sub{flex-direction:column;align-items:flex-start}}
/* 读到 80%：电脑顶栏进度位置换成「下一节」小按钮 */
.tl-lbar .ls-topnext{display:none;align-items:center;gap:4px;height:30px;padding:0 12px;border:1px solid var(--accent-line,var(--line2));border-radius:var(--r-pill,999px);color:var(--accent);font-size:var(--fs-small,13px);font-weight:600;white-space:nowrap;text-decoration:none}
.tl-lbar .ls-topnext:hover{background:var(--accent-soft)}
:root.ls-topnext-on .tl-lbar .ls-topnext{display:inline-flex}
:root.ls-topnext-on .tl-lbar .progress-pill{display:none}

/* ---------- 本节目录（L-12）：≥1280 右栏跟随高亮，窄屏与手机是吸顶小标条（滚过标题区才出来） ---------- */
.ls-toc{position:fixed;z-index:20;top:calc(var(--ls-top,64px) + 32px);left:var(--ls-rail-x,auto);width:192px;max-height:calc(100vh - var(--ls-top,64px) - 64px);overflow:auto;overscroll-behavior:contain;padding:0 0 8px;transition:opacity var(--dur-2,.2s)}
.ls-toc[hidden]{display:none}
.ls-toc.is-off{opacity:0;pointer-events:none}
.ls-toc-h{margin:0 0 10px;color:var(--mute);font-size:var(--fs-small,13px);font-weight:600;letter-spacing:var(--ls-kicker)}
.ls-toc ol{margin:0;padding:0;list-style:none;border-left:1px solid var(--line2)}
.ls-toc a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;margin-left:-1px;padding:6px 0 6px 14px;border-left:2px solid transparent;color:var(--sub);font-size:var(--fs-small,13px);line-height:1.5;text-decoration:none}
.ls-toc a:hover{color:var(--text)}
.ls-toc a[aria-current="true"]{border-left-color:var(--accent);color:var(--text);font-weight:600}
.ls-tocbar{position:fixed;z-index:24;top:var(--ls-top,64px);left:var(--ls-bar-x,0);right:0;display:flex;gap:8px;overflow-x:auto;padding:6px max(16px,env(safe-area-inset-right)) 6px max(16px,env(safe-area-inset-left));border-bottom:1px solid var(--line);background:var(--glass,var(--card));-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);scrollbar-width:none;transform:translateY(-110%);opacity:0;pointer-events:none;transition:transform var(--dur-2,.2s) var(--ease,ease),opacity var(--dur-2,.2s)}
.ls-tocbar::-webkit-scrollbar{display:none}
.ls-tocbar[hidden]{display:none}
.ls-tocbar.on{transform:none;opacity:1;pointer-events:auto}
.ls-tocbar a{position:relative;flex:none;display:inline-block;max-width:15em;height:32px;line-height:30px;padding:0 12px;overflow:hidden;text-overflow:ellipsis;border:1px solid var(--line2);border-radius:var(--r-pill,999px);background:var(--card);color:var(--sub);font-size:var(--fs-small,13px);white-space:nowrap;text-decoration:none}
.ls-tocbar a::after{content:"";position:absolute;inset:-6px -2px}
.ls-tocbar a[aria-current="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-deep,var(--accent));font-weight:600}
body.nav-open .ls-tocbar,html.nx-lock .ls-tocbar{display:none}
@media print{.ls-toc,.ls-tocbar,.ls-topnext{display:none!important}}

/* 交易实战：视频连同右侧口诀 / 暂停题比正文列宽，按主栏宽度往两边放（宽度由 lesson-shell.js 算，没算出来就跟正文同宽） */
:root.ls-bw article[data-ls-course] .fl-video-side{width:var(--ls-bw);max-width:none;margin-left:calc((100% - var(--ls-bw)) / 2)}

/* ---------- 「接着学」卡（L-14）：课程目录页第一屏、专题课侧栏顶部 ---------- */
.ls-cont{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 16px;margin:20px 0;padding:16px 20px;border:1px solid var(--accent-line,var(--line2));border-radius:var(--r,16px);background:var(--card);color:var(--text);text-decoration:none}
.ls-cont[hidden]{display:none}
.ls-cont:hover{border-color:var(--accent)}
.ls-cont .ls-cont-k{grid-column:1;color:var(--accent);font-size:var(--fs-small,13px);font-weight:600}
.ls-cont .ls-cont-t{grid-column:1;color:var(--text);font-size:var(--fs-body,16px);font-weight:600;line-height:1.5}
.ls-cont .ls-cont-go{grid-column:2;grid-row:1/span 2;display:inline-flex;align-items:center;gap:4px;height:40px;padding:0 16px;border-radius:var(--r-pill,999px);background:var(--fill,var(--accent));color:var(--on-fill,var(--on-accent));font-size:var(--fs-aux,14px);font-weight:600;white-space:nowrap}
#courseNav .ls-cont{margin:10px 16px 6px;padding:10px 12px;gap:2px 10px;border-radius:var(--r-sm,10px)}
#courseNav .ls-cont .ls-cont-t{font-size:var(--fs-small,13px)}
#courseNav .ls-cont .ls-cont-go{height:32px;padding:0 10px;font-size:var(--fs-small,13px)}
@media(max-width:640px){.ls-cont{grid-template-columns:1fr}.ls-cont .ls-cont-go{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px}}

/* ---------- 反馈入口（L-32）：页尾次级链接那一行末尾「这节有问题」，点了打开「先选你的情况」弹层（assets/fb-pick.js） ---------- */
article[data-ls-course] .ls-next .ls-next-sub .ls-fb{display:inline-flex;align-items:center;gap:5px;min-height:0;margin:0 0 0 auto;padding:0;border:0;background:none;color:var(--sub);font:inherit;font-size:inherit;cursor:pointer}
article[data-ls-course] .ls-next .ls-next-sub .ls-fb:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}
article[data-ls-course] .ls-next .ls-next-sub .ls-fb svg{flex:none;color:var(--mute)}
article[data-ls-course] .ls-next .ls-next-sub .ls-fb::after{content:"";position:absolute;inset:-12px -6px}
article[data-ls-course] .ls-next .ls-next-sub .ls-fb{position:relative}
article[data-ls-course] .ls-next .ls-next-sub:has(.ls-fb){justify-content:flex-start}
@media(max-width:640px){article[data-ls-course] .ls-next .ls-next-sub .ls-fb{margin:4px 0 0}}

/* ---------- 专题课侧栏顶部价格一句（L-19）：单独开通 · 买过手册的人 · 六门全通更省 →；「持续更新」另一枚小标 ---------- */
#courseNav .sidebar-eyebrow.ls-px{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;color:var(--sub);font-size:var(--fs-small,13px);font-weight:400;letter-spacing:0;line-height:1.6;text-transform:none}
#courseNav .ls-px .hv-ios-x{display:inline}
#courseNav .ls-px .ls-px-more{display:inline-flex;align-items:center;gap:2px;color:var(--accent);font-weight:600;text-decoration:none;white-space:nowrap}
#courseNav .ls-px .ls-px-more:hover{text-decoration:underline;text-underline-offset:3px}
#courseNav .ls-px .ls-upd{display:inline-flex;align-items:center;height:20px;padding:0 7px;border:1px solid var(--line2);border-radius:var(--r-pill,999px);color:var(--sub);font-size:var(--fs-tiny,12px);font-weight:400}

/* ---------- P-13a 遗留（P-13c 补齐）：裸K、A股问答段（原 17 / 1.85），威科夫卡片里的目标、步骤、例子、用法列表（原 15～16px / 1.7～1.8）
   压到正文统一值 17 / 1.8；手机上和正文一起由令牌缩 ---------- */
:root body article.lesson[data-ls-course] :is(.ln-qa-a,.ln-more p,.ln-more li,.wy-prose,.wy-goals li,.wy-steps li,.wy-ex p,.wy-use-col li){font-size:var(--fs-prose,17px);line-height:var(--lh-read,1.8)}

/* ---------- 首屏就是最终版式（连续性 U1，2026-11-06，outputs/ui-continuity-2026-11-06/REPORT.md 第 5 节第 1 条）：原来课页宽屏加载后正文左移 99px、顶栏右侧左移 250px（CLS 约 0.138） ---------- */
/* 1. 宽屏正文：≥ 1280 有本节目录右栏时，正文和右栏作为一组在主栏里居中（原来 lesson-shell.js 跑完才写 margin-left）。
      一组宽 = 左内边距 38 + 正文 720 + 间隔 28 + 右栏 192 + 右边距 16 = 994，和 lesson-shell.js 的 toc() 同一组数；
      试看版小标题不到 3 个、没有右栏，照旧居中；脚本发现小标题不够（或主栏放不下）时加 ls-norail 退回居中 */
@media(min-width:1280px){:root body article.lesson[data-ls-course]:not(.fl-lesson):not([data-ls-trial]):not(.ls-norail){margin-left:max(0px,calc((100% - 994px) / 2));margin-right:auto}}
/* 2. 顶栏右侧预留宽度：account.js 挂上搜索、外观、登录、免费试看之前，右侧账号区按挂好后的宽度占位（访客；电脑 330、平板 272、手机 128）；
      手册页「更多」工具（收藏、分享、交流群、反馈，nav.js 挂）之前先由 LESSON_JS 放同宽占位 .tb-more-ph（每个 38，间隔 2）；
      旧的深浅色按钮（account.js 挂上外观按钮后本来就藏起来）一开始就不占位，App 里照旧 */
.tl-lbar .tb-more-ph{order:3;flex:none;display:block;width:calc(var(--n,1) * 38px + (var(--n,1) - 1) * 2px);height:38px}
.tl-lbar.tl-lb-more .tb-more-ph{width:38px}
:root:not([data-look="app"]) .tl-lbar .topbar-end>#themeToggle{display:none}
@media(min-width:861px){:root body .tl-lbar .tl-nv2-end:has([data-account]:empty){min-width:330px}}
@media(max-width:860px){.tl-lbar .tb-more-ph{width:38px}:root body .tl-lbar .tl-nv2-end:has([data-account]:empty){min-width:272px}}
@media(max-width:600px){.tl-lbar .tb-more-ph{display:none}:root body .tl-lbar .tl-nv2-end:has([data-account]:empty){min-width:128px}}
/* 3. 手册页侧栏：LESSON_JS 先挂 sb-on（侧栏铺满左列、顶栏从侧栏右边开始），目录树建好前侧栏里的静态链接先不露（同 trader.css 的 sb-wait） */
:root.sb-on #courseNav:not(.sb-built)>*{visibility:hidden}
/* 4. 目录页「接着学」卡：占位是同样大小的骨架（原来是 hidden，脚本填好后把下面整块推下 106px），填好后淡入；首屏脚本没跑（data-look 没写上）时不显示骨架 */
.ls-cont.ls-cont-sk{display:none;pointer-events:none}
:root[data-look] .ls-cont.ls-cont-sk{display:grid}
.ls-cont-sk>span{color:transparent!important;border-radius:var(--r-xs,6px);background:var(--hover)}
.ls-cont-sk .ls-cont-k{justify-self:start;width:9em}
.ls-cont-sk .ls-cont-t{justify-self:start;width:min(18em,100%)}
.ls-cont-sk .ls-cont-go{width:96px;background:var(--hover)!important}
.ls-cont.is-in{animation:ls-cont-in var(--dur-2,.2s) var(--ease,ease-out)}
@keyframes ls-cont-in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){.ls-cont.is-in{animation:none}}
/* 5. 手机（≤ 640）有视频的课页：任务条由 learn/lesson-skill.js（页面空闲时才载）挪到视频旁边；挪之前先不在标题区占位，
      免得首屏先画在标题下面、空闲时再整块挪走（正文上移约 67px）。没有视频的课页任务条不挪，照常显示 */
@media(max-width:640px){article.lesson:has(:is(section#quick.qs,section.wy-video,section#video,.hb-video))>header.lesson-header .lsk-task:not(.lsk-moved){display:none}}