/* ============================================================================
 * 拾阶 · shell.css —— 壳应用视觉层
 * 视觉基准：原型/index.html（米色系 + 宋体大标题）。
 * 变量与 engines/_common.js 的 TOKENS 保持同值，保证引擎渲染内容与壳无缝衔接。
 * 类名一律 sk- 前缀（shell/壳），与引擎的 sj- 前缀区分，避免规则互相覆盖。
 * ==========================================================================*/

:root{
  --bg:#F4F1E8;
  --card:#FBF9F2;
  --ink:#29271C;
  --sub:#6E6A58;
  --green:#2E6B4E;
  --green-dark:#24543E;
  --amber:#A9752C;
  --line:#DFD9C7;
  --red:#A8442E;
  --green-soft:#9CC7AF;
  --amber-text:#8A5E1E;
  /* 字号阶梯（docs/文案打磨-三上-2026-09/层次规范.md）：全站只用这五档，引擎样式引用同名变量 */
  --fs-title:24px;
  --fs-stem:20px;
  --fs-body:16px;
  --fs-text:15px;
  --fs-cap:13px;
}
@media (min-width:900px){
  :root{--fs-title:26px;--fs-stem:22px;--fs-body:17px;--fs-text:16px;--fs-cap:14px;}
  #app{max-width:640px;}
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-tap-highlight-color:transparent;
  min-height:100vh;
}
a{color:var(--green);text-decoration:none;}
.sk-serif{font-family:'Songti SC',STSong,serif;}

/* ---------------------------- 布局骨架 ---------------------------- */
#app{max-width:560px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);}
.sk-page{flex:1 1 auto;display:flex;flex-direction:column;gap:14px;padding:18px 18px 96px 18px;}
.sk-header{padding:14px 18px 0 18px;font-size:var(--fs-cap);color:var(--sub);letter-spacing:.5px;}
.sk-crumb{display:flex;align-items:center;gap:8px;font-size:var(--fs-text);color:var(--sub);min-height:44px;cursor:pointer;padding:10px 18px 4px 18px;}
.sk-crumb .sk-arrow{font-size:var(--fs-stem);color:var(--ink);}
.sk-crumb:focus-visible{outline:2px solid var(--green);outline-offset:2px;}

/* ---------------------------- 文本层级 ---------------------------- */
.sk-h-hero{font-size:30px;font-weight:700;line-height:1.3;}
.sk-h-title{font-size:var(--fs-title);font-weight:700;line-height:1.3;}
.sk-h-sub{font-size:var(--fs-body);font-weight:600;}
.sk-muted{color:var(--sub);}
.sk-muted-sm{color:var(--sub);font-size:var(--fs-cap);}
.sk-body{font-size:var(--fs-body);line-height:1.7;}

/* ---------------------------- 卡片 & 按钮 ---------------------------- */
.sk-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;}
.sk-card-title{font-size:var(--fs-cap);letter-spacing:2px;color:var(--green);margin-bottom:10px;font-weight:600;}

.sk-dark-card{background:var(--ink);color:var(--bg);border-radius:16px;padding:20px 18px;cursor:pointer;min-height:44px;}
.sk-dark-card .sk-muted2{color:#C9C4AE;}
.sk-dark-card:focus-visible{outline:2px solid var(--green-soft);outline-offset:3px;}

.sk-btn{border-radius:12px;text-align:center;padding:15px 0;font-size:var(--fs-body);font-weight:600;
  cursor:pointer;user-select:none;min-height:44px;display:flex;align-items:center;justify-content:center;}
.sk-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.sk-btn-primary{background:var(--ink);color:var(--bg);}
.sk-btn-primary:active{opacity:.85;}
.sk-btn-outline{border:1.5px solid var(--green);color:var(--green-dark);padding:13px 0;font-size:var(--fs-text);background:transparent;}
.sk-btn-outline:active{background:rgba(46,107,78,.08);}
.sk-btn[aria-disabled="true"]{opacity:.4;pointer-events:none;}

.sk-row{display:flex;align-items:center;gap:10px;}
.sk-row-between{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.sk-actions{display:flex;gap:10px;}
.sk-actions > .sk-btn{flex:1;}

/* ---------------------------- 首页 ---------------------------- */
.sk-search{border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;font-size:var(--fs-body);
  background:var(--card);color:var(--ink);width:100%;outline:none;font-family:inherit;min-height:44px;}
.sk-search::placeholder{color:var(--sub);}
.sk-search-row{position:relative;}
.sk-search-icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--sub);font-size:var(--fs-body);pointer-events:none;}

.sk-white-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 16px;cursor:pointer;min-height:44px;}
.sk-white-card:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.sk-white-card:active{opacity:.85;}

.sk-sec-links{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:var(--fs-text);color:var(--green-dark);}
.sk-sec-links .sk-link{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;}
.sk-sec-links .sk-link:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.sk-sec-links .sk-sep{color:var(--line);}

/* ---------------------------- 单元列表 ---------------------------- */
.sk-unit-list{display:flex;flex-direction:column;gap:10px;}
.sk-unit-row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;cursor:pointer;min-height:44px;}
.sk-unit-row:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.sk-unit-row:active{opacity:.85;}
.sk-unit-row.sk-practice-row{opacity:.85;}
.sk-unit-icon{width:12px;height:12px;border-radius:50%;background:var(--line);flex-shrink:0;}
.sk-unit-icon.done{background:var(--green);}
.sk-unit-icon.doing{background:var(--amber);}
.sk-unit-name{flex:1;font-size:var(--fs-body);font-weight:600;min-width:0;}
.sk-unit-name.sk-gray-label{font-weight:500;color:var(--sub);font-size:var(--fs-text);}
.sk-unit-progress{display:flex;flex-direction:column;align-items:flex-end;gap:5px;width:74px;flex-shrink:0;}
.sk-bar{height:6px;width:100%;background:var(--bg);border-radius:4px;overflow:hidden;}
.sk-bar > div{height:6px;border-radius:4px;background:var(--green);}
.sk-unit-progress-text{font-size:var(--fs-cap);color:var(--sub);}

/* ---------------------------- 单元导学 ---------------------------- */
.sk-point-head{display:flex;flex-direction:column;gap:3px;padding:2px 2px 0 2px;}
.sk-point-toc-row{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;}
.sk-point-toc-row + .sk-point-toc-row{margin-top:8px;}

.sk-mantra-card{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--green);
  border-radius:0 14px 14px 0;padding:16px 16px 6px 16px;}
.sk-mantra-line{font-size:var(--fs-stem);font-weight:700;line-height:1.5;color:var(--ink);}
.sk-mantra-line + .sk-mantra-line{margin-top:2px;}
.sk-faster{background:rgba(46,107,78,.10);border-radius:10px;padding:10px 12px;margin-top:10px;font-size:var(--fs-text);
  color:var(--green-dark);line-height:1.6;}
.sk-faster b{font-weight:700;}
.sk-why{margin-top:10px;}
.sk-why summary{cursor:pointer;font-size:var(--fs-cap);color:var(--green-dark);min-height:36px;display:flex;align-items:center;
  list-style:none;}
.sk-why summary::-webkit-details-marker{display:none;}
.sk-why summary::after{content:'▾';margin-left:4px;font-size:var(--fs-cap);}
.sk-why[open] summary::after{content:'▴';}
.sk-why summary:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.sk-why-body{font-size:var(--fs-text);color:var(--sub);line-height:1.7;padding:2px 0 10px 0;}
.sk-boundary{font-size:var(--fs-text);color:var(--sub);margin-top:8px;padding-bottom:10px;}

.sk-pit-list{display:flex;flex-direction:column;gap:8px;}
.sk-pit-item{background:rgba(169,117,44,.12);border:1px solid var(--line);border-left:3px solid var(--amber);
  border-radius:0 12px 12px 0;padding:12px 14px;}
.sk-pit-name{font-weight:700;color:var(--amber-text);font-size:var(--fs-text);margin-bottom:3px;}
.sk-pit-desc{font-size:var(--fs-text);color:var(--ink);line-height:1.7;}

.sk-example-steps{display:flex;flex-direction:column;gap:6px;margin-top:4px;}
.sk-example-step{display:flex;gap:8px;font-size:var(--fs-text);line-height:1.7;}
.sk-example-tag{color:var(--green-dark);font-weight:700;flex-shrink:0;}

.sk-bottom-cta{position:sticky;bottom:0;background:linear-gradient(to top,var(--bg) 70%,transparent);
  padding-top:16px;margin-top:4px;}

/* ---------------------------- 知识点页 ---------------------------- */
/* C0 屏序（essence → 心智模型 → 口诀 → 例子 → 坑表 → 上下站）：每段之间留出
   一屏一事的呼吸位，段与段的分隔靠间距，不靠分割线。 */
.sk-kp-sec{display:flex;flex-direction:column;margin-top:22px;}
.sk-kp-sec:first-of-type{margin-top:8px;}
.sk-essence{font-size:var(--fs-body);line-height:1.8;border-left:4px solid var(--green);border-radius:0 14px 14px 0;}
.sk-firsttouch{font-size:var(--fs-text);line-height:1.75;color:var(--sub);
  border-left:3px solid var(--amber);border-radius:0 14px 14px 0;background:rgba(169,117,44,.08);}
.sk-example-card{margin-bottom:10px;}
.sk-example-card:last-child{margin-bottom:0;}
/* 讲解页动手位：引擎 mountExample() 接管前是空盒子，没接管时不占地方 */
.sk-example-mount{margin:10px 0 2px;}
.sk-example-mount:empty{display:none;}

.sk-ladder{display:flex;gap:8px;}
.sk-ladder-2 .sk-ladder-cell{flex:1 1 0;}
.sk-ladder-cell{flex:1;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:10px 8px;text-align:center;font-size:var(--fs-cap);color:var(--sub);}
.sk-ladder-cell.sk-now{border:2px solid var(--green);color:var(--green-dark);font-weight:700;background:rgba(46,107,78,.08);}
.sk-ladder-label{font-size:var(--fs-cap);color:var(--sub);margin-bottom:4px;}

.sk-assoc{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:0 12px 12px 0;padding:12px 14px;font-size:var(--fs-text);color:var(--sub);line-height:1.7;}
.sk-assoc b{color:var(--green-dark);}

/* ---------------------------- 训练容器 ---------------------------- */
.sk-train-shell{display:flex;flex-direction:column;min-height:100vh;}
.sk-train-top{padding:12px 18px 8px 18px;position:sticky;top:0;background:var(--bg);z-index:5;}

/* 档位切换（课本/拓展/挑战）与档位小标签 —— P1-14 修复。标签故意不叠在引擎题卡上（曾经浮层
   遮住长题干文字），训练页挂在进度点这一行右侧（.sk-train-progress），回放/分享页挂在顶部
   横幅右侧（.sk-train-banner），两处都是题卡外的固定位置，任何长度题干都不会被挡。 */
.sk-tier-switch{display:flex;gap:8px;flex-wrap:wrap;}
.sk-tier-btn{border:1.5px solid var(--line);border-radius:99px;padding:6px 14px;font-size:var(--fs-cap);
  font-weight:600;color:var(--sub);background:var(--card);cursor:pointer;min-height:32px;
  display:inline-flex;align-items:center;}
.sk-tier-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.sk-tier-btn.active{border-color:var(--green);color:var(--green-dark);background:rgba(46,107,78,.12);}
.sk-tier-btn.disabled{opacity:.4;cursor:not-allowed;}
.sk-tier-badge{background:var(--ink);color:var(--bg);border-radius:99px;padding:3px 11px;
  font-size:var(--fs-cap);font-weight:600;letter-spacing:.5px;flex-shrink:0;white-space:nowrap;}

.sk-train-progress{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;}
.sk-dots{display:flex;gap:6px;flex-wrap:wrap;}
.sk-dot{width:9px;height:9px;border-radius:50%;background:var(--line);transition:background .2s,transform .2s;}
.sk-dot.on{background:var(--green);}
.sk-dot.wrong{background:var(--red);}
.sk-dot.skip{background:transparent;border:1.5px solid var(--green-soft);}
.sk-dot.current{transform:scale(1.35);background:var(--ink);}
.sk-train-mount{flex:1 1 auto;padding:6px 18px 24px 18px;}
.sk-train-banner{background:rgba(46,107,78,.10);border-left:3px solid var(--green);border-radius:0 12px 12px 0;
  padding:10px 14px;font-size:var(--fs-cap);color:var(--green-dark);margin:0 18px 4px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;}
.sk-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);background:var(--ink);
  color:var(--bg);padding:11px 18px;border-radius:99px;font-size:var(--fs-text);opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;max-width:86%;text-align:center;z-index:50;}
.sk-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.sk-preparing{display:flex;flex-direction:column;align-items:center;gap:14px;padding:48px 20px;text-align:center;}
.sk-preparing-icon{font-size:34px;}
.sk-preparing-text{font-size:var(--fs-body);color:var(--sub);line-height:1.7;}

/* ---------------------------- 结果页 ---------------------------- */
.sk-result-row{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:12px 14px;font-size:var(--fs-text);}
.sk-badge{border-radius:99px;font-size:var(--fs-cap);padding:3px 10px;flex-shrink:0;font-weight:600;}
.sk-badge.ok{background:rgba(46,107,78,.12);color:var(--green-dark);}
.sk-badge.corrected{background:rgba(169,117,44,.15);color:var(--amber-text);}
.sk-badge.skip{background:rgba(110,106,88,.15);color:var(--sub);}
.sk-result-idx{color:var(--sub);font-size:var(--fs-cap);flex-shrink:0;width:20px;}
.sk-result-label{flex:1;min-width:0;}
.sk-errtype-summary{display:flex;flex-wrap:wrap;gap:8px;}
.sk-errtype-chip{border:1px solid var(--line);border-radius:99px;padding:8px 14px;font-size:var(--fs-cap);color:var(--sub);}

/* ---------------------------- 历史 / 回放 ---------------------------- */
.sk-history-row{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:13px 14px;cursor:pointer;min-height:44px;}
.sk-history-row:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.sk-history-main{flex:1;min-width:0;}
.sk-history-title{font-size:var(--fs-text);font-weight:600;}
.sk-history-time{font-size:var(--fs-cap);color:var(--sub);margin-top:2px;}
.sk-empty{text-align:center;color:var(--sub);font-size:var(--fs-text);padding:40px 10px;}

/* ---------------------------- 搜索 ---------------------------- */
.sk-search-results{display:flex;flex-direction:column;gap:8px;}
.sk-search-hit{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 14px;cursor:pointer;min-height:44px;}
.sk-search-hit:focus-visible{outline:2px solid var(--green);outline-offset:2px;}
.sk-search-hit-name{font-size:var(--fs-text);font-weight:600;}
.sk-search-hit-path{font-size:var(--fs-cap);color:var(--sub);margin-top:2px;}

/* ---------------------------- dev 工具 ---------------------------- */
.sk-dev{margin-top:6px;}
.sk-dev summary{cursor:pointer;font-size:var(--fs-cap);color:var(--sub);min-height:44px;display:flex;align-items:center;list-style:none;}
.sk-dev summary::-webkit-details-marker{display:none;}
.sk-dev-body{display:flex;gap:8px;flex-wrap:wrap;padding-top:8px;}
.sk-dev-btn{border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:var(--fs-cap);color:var(--sub);
  cursor:pointer;background:var(--card);min-height:44px;display:inline-flex;align-items:center;}

/* ---------------------------- 加载/错误占位 ---------------------------- */
.sk-boot-fail{padding:40px 20px;text-align:center;color:var(--sub);font-size:var(--fs-text);line-height:1.8;}

@media (max-width:380px){
  .sk-h-hero{font-size:26px;}
}

/* 搜索空态：三年级不知道能搜什么，给几个知识点名当入口 */
.sk-search-hints{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.sk-search-hints .sk-muted-sm{width:100%;}
.sk-search-hint{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:9px 14px;
  font-size:var(--fs-text);color:var(--green-dark);cursor:pointer;min-height:40px;display:inline-flex;align-items:center;}
.sk-search-hint:focus-visible{outline:2px solid var(--green);outline-offset:2px;}

/* ---------------------------- 登录页（灰度） ---------------------------- */
.sk-login{justify-content:center;gap:22px;min-height:calc(100vh - 60px);padding-bottom:40px;}
.sk-login-hero{text-align:center;padding:10px 0 6px;}
.sk-login-form{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 18px;}
.sk-login-label{font-size:var(--fs-cap);color:var(--sub);margin-top:6px;}
.sk-login-form .sk-search{margin-bottom:2px;}
.sk-login-err{min-height:20px;font-size:var(--fs-text);color:var(--red);margin:2px 0 6px;}