/*!
 * junior-common.css —— 初中数学几何模型演示系统 公共样式
 * 已改为与线上 /mathlab/junior 一致的浅色风格（米白底 + 蓝色主色 + 圆角卡片）
 * 类名与结构完全保留，只换了配色，25 个模型页无需改动。
 */

/* 拉丁字母统一 Times New Roman 斜体（数学排版惯例）。
   ⚠️ 实测踩过两条弯路，别再走：
   ① 不能用 local('Times New Roman') 再声明 font-style:italic —— Chrome 拿到的仍是正体
      （实测渲染宽度 123.3，与 normal 完全相同）；
   ② 必须直接 local('Times New Roman Italic')，即斜体的完整字体名
      （实测 116.6，与真斜体一致）。
   另外也不要在 body 上写 font-style:italic 来"催"斜体：那会把数字一并拉斜，
   中文还要靠 font-synthesis 去兜。让 face 自带斜字形、body 保持 normal 更干净。
   ① 字母(A-Z a-z) → 斜体字形
   ② 数字(0-9)     → 正体字形（数学惯例：变量用斜、数值用正）
   中文不匹配任何 face，自动回退到中文字体并保持正体。 */
@font-face {
    font-family: 'JLat';
    src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'), local('Times New Roman-Italic');
    unicode-range: U+0041-005A, U+0061-007A;
}
@font-face {
    font-family: 'JLat';
    src: local('Times New Roman'), local('Times'), local('Liberation Serif'),
         local('Nimbus Roman'), local('Tinos'), local('Noto Serif');
    unicode-range: U+0030-0039;
}

:root {
    --bg: #fffaf0;
    --bg-2: #ffffff;
    --panel: #ffffff;
    --panel-2: #f4f9ff;
    --border: #d8e9f8;
    --text: #20344c;
    --text-2: #6c8095;
    --accent: #2fa8ff;
    --accent-2: #168bd8;
    --gold: #ffad0a;
    --green: #32d05f;
    --red: #ff5b5b;
    --purple: #8b5cf6;
    --panel-w: 460px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
    background: var(--bg);
    color: var(--text);
    /* 字母走 JLat 的 italic face → 数字走 JLat 的 normal face → 中文落雅黑 */
    font-family: 'JLat', 'Times New Roman', Georgia, -apple-system, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, serif;
    font-size: 14px;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    /* 不要在这里写 font-style:italic —— 字母的斜度由 JLat 的斜体 face 字形本身提供，
       写 italic 只会把数字一并拉斜（详见上方 @font-face 注释）。
       font-synthesis:none 是保险：万一回退到没有斜体变体的中文字体，也不会被合成倾斜。 */
    font-synthesis: none;
}

/* ========== 数学排版约定 ========== */
/* 变量/函数名/数字沿用 Times New Roman，与线上初中系统一致 */
.mv { font-family: 'JLat', 'Times New Roman', serif; font-style: italic; }   /* 变量：斜体 */
.mf { font-family: 'JLat', 'Times New Roman', serif; }                       /* 函数名：字母斜、数值正 */
.mn { font-family: 'JLat', 'Times New Roman', serif; }                       /* 数值：字母斜、数量正 */

/* ========== 主布局 ========== */
.app { display: flex; height: 100vh; width: 100vw; overflow: hidden; }

.stage {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-2);
    position: relative;
}

.stage-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: linear-gradient(90deg, #ffffff, #f8fbff);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.stage-head .badge {
    font-size: 11px;
    padding: 3px 9px;
    border-radius: 10px;
    background: rgba(47,168,255,0.12);
    border: 1px solid rgba(47,168,255,0.35);
    color: var(--accent-2);
    letter-spacing: .3px;
    white-space: nowrap;
}
.stage-head h1 { font-size: 16px; font-weight: 700; letter-spacing: .3px; }
.stage-head h1 em {
    font-style: italic;
    font-weight: 400;
    font-size: 12.5px;
    color: var(--text-2);
    margin-left: 8px;
}
.stage-head .linked {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--text-2);
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px 10px;
    transition: .2s;
    background: #fff;
}
.stage-head .linked:hover { color: var(--accent-2); border-color: var(--accent); }

.canvas-wrap { flex: 1; position: relative; min-height: 0; }
.canvas-wrap canvas { display: block; width: 100%; height: 100%; cursor: grab; }

/* ========== 控制条 ========== */
.ctrl-bar {
    flex-shrink: 0;
    background: #ffffff;
    border-top: 1px solid var(--border);
    padding: 9px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.ctrl-group { display: flex; align-items: center; gap: 7px; }
.ctrl-label { font-size: 12px; color: var(--text-2); white-space: nowrap; }

.scene-btn {
    font-family: inherit;
    font-size: 12.5px;
    color: var(--text);
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px 12px;
    cursor: pointer;
    transition: .18s;
    white-space: nowrap;
}
.scene-btn:hover { background: #eaf6ff; border-color: #9fd4ff; }
.scene-btn.active {
    background: rgba(47,168,255,0.14);
    border-color: var(--accent-2);
    color: var(--accent-2);
    box-shadow: 0 0 0 1px rgba(47,168,255,0.3);
}
.scene-btn.small { padding: 4px 10px; font-size: 12px; }

input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    height: 20px;
    background: transparent;
    cursor: pointer;
    width: 110px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 15px; width: 15px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid #fff;
    margin-top: -5.5px;
    box-shadow: 0 0 6px rgba(47,168,255,.5);
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%; height: 4px;
    background: #d8e9f8; border-radius: 2px;
}
input[type=range]::-moz-range-thumb {
    height: 13px; width: 13px; border-radius: 50%;
    background: var(--accent); border: 2px solid #fff;
}
input[type=range]::-moz-range-track { height: 4px; background: #d8e9f8; border-radius: 2px; }

.val-badge {
    font-family: 'JLat', 'Times New Roman', serif;
    font-size: 12.5px;
    color: #e08b00;
    min-width: 46px;
    text-align: center;
    background: rgba(255,173,10,0.12);
    border: 1px solid rgba(255,173,10,0.35);
    border-radius: 6px;
    padding: 2px 6px;
}

/* 演示区的操作/结论说明：放在画布【下方】的独立条带，不再浮在画布上。
   ⚠️ 2026-10-04 用户反馈：移动端这条浮层会挡住图形，已改为画布下方的静态条。
   对应地，HTML 里 .hint-tip 也已从 .canvas-wrap 内移到 .canvas-wrap 之后
   （Geo.resize() 用画布父元素尺寸算画布大小，留在这个容器里会把说明条的高度算进去）。 */
.hint-tip {
    position: static;
    flex-shrink: 0;
    font-size: 11.5px;
    color: var(--text-2);
    background: #f8fbff;
    border-top: 1px solid var(--border);
    padding: 6px 14px;
    line-height: 1.7;
    pointer-events: none;
}
.hud {
    position: absolute;
    right: 14px; top: 12px;
    font-size: 12px;
    background: rgba(255,255,255,0.94);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 8px 12px;
    line-height: 1.75;
    pointer-events: none;
    max-width: 62%;
    color: var(--text);
}
.hud b { color: var(--accent-2); font-weight: 600; }
.hud .k { color: var(--text-2); }

/* ========== 讲解面板 ========== */
.panel {
    width: var(--panel-w);
    flex-shrink: 0;
    background: var(--panel);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 32px rgba(31,42,54,.08);
}

.panel-nav {
    display: flex;
    gap: 2px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: #f8fbff;
    flex-shrink: 0;
    overflow-x: auto;
}
.panel-nav::-webkit-scrollbar { height: 0; }
.panel-nav button {
    flex: 1;
    min-width: 56px;
    font-family: inherit;
    font-size: 12px;
    color: var(--text-2);
    background: transparent;
    border: none;
    border-radius: 7px;
    padding: 6px 4px;
    cursor: pointer;
    transition: .18s;
    white-space: nowrap;
}
.panel-nav button:hover { color: var(--text); background: #eaf6ff; }
.panel-nav button.active { color: var(--accent-2); background: rgba(47,168,255,.14); }

.scroller {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px 60px;
    scroll-behavior: smooth;
}
.scroller::-webkit-scrollbar { width: 5px; }
.scroller::-webkit-scrollbar-track { background: transparent; }
.scroller::-webkit-scrollbar-thumb { background: #d8e9f8; border-radius: 3px; }
.scroller::-webkit-scrollbar-thumb:hover { background: #b9d9f2; }

.sec { margin-bottom: 26px; scroll-margin-top: 12px; }
.sec-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text);
    padding-bottom: 8px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.sec-title .no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 21px; height: 21px;
    border-radius: 6px;
    font-size: 12px;
    background: rgba(47,168,255,.14);
    border: 1px solid rgba(47,168,255,.35);
    color: var(--accent-2);
    flex-shrink: 0;
}
.sec p { line-height: 1.92; color: #34414e; margin-bottom: 10px; font-size: 13.6px; }
.sec p:last-child { margin-bottom: 0; }
.sec ul, .sec ol { margin: 0 0 10px 20px; line-height: 1.92; color: #34414e; font-size: 13.6px; }
.sec li { margin-bottom: 5px; }
.sec li::marker { color: var(--accent); }

.kv {
    color: #e08b00;
    font-family: 'JLat', 'Times New Roman', serif;
    font-weight: 600;
}
.hl { color: var(--accent-2); font-weight: 600; }
.hl-g { color: #1fae46; font-weight: 600; }
.hl-r { color: #e63c3c; font-weight: 600; }

/* 结论卡 */
.concl {
    background: linear-gradient(135deg, rgba(47,168,255,.08), rgba(50,208,95,.06));
    border: 1px solid rgba(47,168,255,.3);
    border-left: 3px solid var(--accent);
    border-radius: 9px;
    padding: 12px 14px;
    margin: 12px 0;
}
.concl .tag {
    display: inline-block;
    font-size: 11px;
    color: var(--accent-2);
    background: rgba(47,168,255,.12);
    border-radius: 5px;
    padding: 2px 8px;
    margin-bottom: 8px;
    letter-spacing: .5px;
}
.concl .body { line-height: 1.95; font-size: 13.6px; color: var(--text); }

/* 公式块 */
.formula {
    background: #f4f9ff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 11px 14px;
    margin: 11px 0;
    text-align: center;
    font-family: 'JLat', 'Times New Roman', 'Microsoft YaHei', serif;
    font-size: 13.5px;
    color: var(--text);
    overflow-x: auto;
    letter-spacing: .3px;
}
.formula .mv { color: var(--accent-2); }

/* 图形说明小卡 */
.fig {
    display: block;
    background: #f4f9ff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 10px 0;
    font-size: 13px;
    line-height: 1.8;
}
.fig .ic {
    /* 宽度随内容自适应：原为固定 24px，放不下「(1) 解法一」「求面积比」这类标签，会被压成竖排 */
    min-width: 24px; min-height: 24px;
    padding: 2px 6px; box-sizing: border-box;
    white-space: nowrap;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 6px;
    font-size: 12px; line-height: 1.35;
    background: rgba(139,92,246,.14);
    color: var(--purple);
    border: 1px solid rgba(139,92,246,.3);
}
.fig .ic.gold { background: rgba(255,173,10,.16); color: #e08b00; border-color: rgba(255,173,10,.35); }
.fig .ic.green { background: rgba(50,208,95,.16); color: #1fae46; border-color: rgba(50,208,95,.35); }
.fig .ic.red { background: rgba(255,91,91,.14); color: #e63c3c; border-color: rgba(255,91,91,.35); }

/* 例题步骤 */
.step {
    border-left: 2px solid var(--border);
    padding: 0 0 0 14px;
    margin: 0 0 14px 4px;
    position: relative;
}
.step::before {
    content: attr(data-no);
    position: absolute;
    left: -11px; top: 1px;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: var(--panel);
    border: 2px solid var(--accent);
    color: var(--accent-2);
    font-size: 10.5px;
    display: flex; align-items: center; justify-content: center;
    font-family: 'JLat', 'Times New Roman', serif;
}
.step .st { color: var(--accent-2); font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.step p { margin-bottom: 6px; }

/* 真题区 */
.exam {
    background: rgba(255,173,10,.07);
    border: 1px solid rgba(255,173,10,.3);
    border-radius: 9px;
    padding: 13px 15px;
    margin: 12px 0;
}
.exam-head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 9px;
    font-size: 12px;
    color: #e08b00;
    letter-spacing: .4px;
}
.exam-head .src {
    font-size: 11px;
    background: rgba(255,173,10,.16);
    border: 1px solid rgba(255,173,10,.35);
    border-radius: 5px;
    padding: 2px 8px;
    color: #e08b00;
}
.exam-body { line-height: 1.95; font-size: 13.6px; color: var(--text); }
.exam-body .q { margin-bottom: 8px; }

/* ========== 真题配图（内联 SVG 重绘，2026-10-04 起替换掉原来的位图） ==========
   ⚠️ 文字一律走 JLat：SVG 里的 <text> 也是 DOM 文本，unicode-range 同样生效，
      所以 A、B、C 这些点字母会是新罗马斜体，中文/数字自动落中文字体保持正体。 */
.exam-fig {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 6px auto 12px;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
}
.exam-fig .l { stroke: #34414e; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.exam-fig .lx { stroke: #2fa8ff; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.exam-fig .ld { stroke: #94a3b8; stroke-width: 1.2; fill: none; stroke-dasharray: 4 3; }
.exam-fig .ra { stroke: #94a3b8; stroke-width: 1.2; fill: none; }
.exam-fig .arc { stroke: #ff5b5b; stroke-width: 1.2; fill: none; }
.exam-fig .tick { stroke: #e63c3c; stroke-width: 1.2; fill: none; }
.exam-fig .dot { fill: #20344c; }
.exam-fig .sh { fill: #dbeafe; stroke: none; }
.exam-fig .wf { fill: #fff; stroke: #34414e; stroke-width: 1.6; }
.exam-fig text { font-family: 'JLat', 'Times New Roman', serif; font-size: 12.5px; fill: #20344c; }
details.ans {
    margin-top: 10px;
    border-top: 1px dashed rgba(255,173,10,.4);
    padding-top: 9px;
}
details.ans summary {
    cursor: pointer;
    font-size: 12.5px;
    color: #e08b00;
    list-style: none;
    user-select: none;
}
details.ans summary::-webkit-details-marker { display: none; }
details.ans summary::before { content: '▸ '; }
details.ans[open] summary::before { content: '▾ '; }
details.ans .ans-body { padding-top: 9px; line-height: 1.95; font-size: 13.4px; color: #34414e; }

/* 页脚 */
.panel-foot {
    flex-shrink: 0;
    padding: 8px 16px;
    border-top: 1px solid var(--border);
    font-size: 11px;
    color: var(--text-2);
    display: flex;
    justify-content: space-between;
    gap: 10px;
    background: #f8fbff;
}
.panel-foot a { color: var(--text-2); text-decoration: none; }
.panel-foot a:hover { color: var(--accent); }

/* ========== 响应式 ========== */
@media (max-width: 980px) {
    body { overflow: auto; }
    .app { flex-direction: column; height: auto; min-height: 100vh; }
    /* 移动端：stage 高度交给内容自己撑（说明条移到画布下方后若再锁死 68vh，
       画布会被标题/说明条/控制条挤到只剩 200px 左右），画布区域给固定高度。 */
    .stage { height: auto; min-height: 0; }
    /* 画布区改成纵向 flex：画布占满剩余高度，实时数据条排在画布下方（不再浮在图上） */
    .canvas-wrap { flex: none; height: 62vh; min-height: 300px; display: flex; flex-direction: column; }
    .canvas-wrap canvas { flex: 1; min-height: 0; height: auto; }
    .panel { width: 100%; border-left: none; border-top: 1px solid var(--border); height: auto; }
    .scroller { overflow: visible; height: auto; }
    .panel-nav { position: sticky; top: 0; z-index: 5; background: var(--panel); }
    .hud {
        position: static; order: 2;
        max-width: 100%; margin: 6px 12px 0;
        font-size: 11px;
        background: #f4f9ff;
    }
    .hint-tip { font-size: 11px; padding: 5px 12px; }
}

/* ========== 嵌入模式 embed：2026-10-04 ==========
   用途：模型页被 iframe 调用时（AI 拍照解题「命中已有模型」就是这种场景），
   不要显示整站外壳，只保留「画布 + 控制条」。

   为什么必须做：整页塞进小框会有两个后果——
   ① .stage-head 标题栏 + .panel 右侧讲解面板白占大量空间；
   ② iframe 宽度通常 < 980px，会命中下面的 @media (max-width:980px)，
      .app 变成竖排，讲解面板整块掉到画布下方（实测高达 2557px），
      于是画面被压成顶部一条，看上去就是"网页全挤在左下"。

   进入方式：页内脚本检测到 ?embed=1 或 self!==top 时给 <html> 加 .embed。
   注意规则必须写在 @media 之后（本段在文件末尾），否则压不住断点里的写法。 */
html.embed,
html.embed body { height: 100%; overflow: hidden; }
html.embed .app { flex-direction: row !important; height: 100vh; width: 100vw; }
html.embed .stage { height: 100%; background: #fff; }

html.embed .stage-head,
html.embed .panel,
html.embed .panel-foot { display: none !important; }

html.embed .canvas-wrap { flex: 1 1 auto !important; height: auto !important; min-height: 0; }
html.embed .canvas-wrap canvas { display: block; width: 100%; height: 100%; }

/* 控制条保留（拖动/动画/场景切换都靠它），但压缩留白，必要时内部滚动 */
html.embed .ctrl-bar { padding: 7px 10px; gap: 8px 14px; max-height: 34vh; overflow-y: auto; }
html.embed .ctrl-bar::-webkit-scrollbar { width: 0; height: 0; }
html.embed .hint-tip { font-size: 11px; padding: 5px 12px; }