/* freeview.css — 裸眼/自由融合教学 + 立体图片墙 专用样式
   只给 /learn 与 /view 两个页面用；不改 ds.css，避免跟其它会话的版本号冲突。
   颜色全部走 ds.css 的变量，深色主题自动跟随。 */

.fv-box{margin:var(--s4) 0}
/* 首页卖点行：比主副标题强调一档，但不到标题体量 */
.fv-sell{font-weight:600;color:var(--accent-text)}
.fv-sell a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px}
.fv-step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s3)}
.fv-step h2{margin-top:0;display:flex;align-items:center;gap:10px;font-size:var(--fs-3)}
.fv-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);font-size:var(--fs-6);font-weight:700;flex:none}

.fv-technique{display:flex;gap:8px;flex-wrap:wrap;margin:var(--s2) 0}
.fv-tech{border:1px solid var(--line2);background:var(--panel2);color:var(--text2);border-radius:var(--r-pill);
  padding:8px 14px;min-height:36px;font-size:var(--fs-6);cursor:pointer}
.fv-tech.is-on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text);font-weight:600}

/* 融合靶（两个 ✚） */
.fv-stage{background:var(--stage-bg);border-radius:var(--r-card);padding:var(--s3);display:flex;
  align-items:center;justify-content:center;overflow:hidden;position:relative}
.fv-stage.img{padding:0;display:block;line-height:0}
.fv-stage.img img,.fv-stage.img canvas{display:block;width:100%;height:auto;border-radius:var(--r-card)}
.fv-dots{display:flex;justify-content:center;gap:var(--gap,200px);transition:gap .12s linear;max-width:100%}
.fv-dots i{font-style:normal;font-size:var(--dot-size,56px);line-height:1;color:#7fd8e8;text-shadow:0 0 18px rgba(79,230,247,.45)}
/* 窄屏：标记和间距一起收，否则 .fv-stage 的 overflow:hidden 会把两个 ✚ 切掉（320px 实测 261>230） */
@media (max-width:520px){ .fv-dots i{font-size:var(--dot-size,40px)} }

.fv-size{display:flex;align-items:center;gap:10px;margin:var(--s2) 0;font-size:var(--fs-6);color:var(--text3)}
.fv-size input{flex:1;max-width:320px}

.fv-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--s2)}
/* ds.css 只有 .doc .btn（实心主色），次级按钮在这里补，避免动 ds.css */
.fv-acts .btn.ghost,.fv-box .btn.ghost{background:transparent;color:var(--text2);border:1px solid var(--line2)}
.fv-acts .btn.ghost:hover,.fv-box .btn.ghost:hover{color:var(--text);border-color:var(--accent)}
.fv-hint{font-size:var(--fs-6);color:var(--text3);margin:10px 0 0;min-height:1.2em}

.fv-unlock img{width:100%;height:auto;border-radius:var(--r-card);display:block}

/* 三级降级卡 */
.fv-fb{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin:var(--s2) 0}
.fv-fbcard{text-align:left;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-card);
  padding:14px;cursor:pointer;display:flex;flex-direction:column;gap:6px;color:var(--text)}
.fv-fbcard:hover{border-color:var(--accent)}
.fv-fbcard b{font-size:var(--fs-5)}
.fv-fbcard span{font-size:var(--fs-6);color:var(--text3);line-height:1.45}
.fv-wiggle{width:100%;height:auto;aspect-ratio:32/9;background-image:url('/static/view/s1_5.jpg');
  background-size:200% 100%;background-repeat:no-repeat;border-radius:var(--r-card)}

/* SBS 标注（samples 页是页内样式，这里给 learn/view 用） */
.doc .sbs-tag{position:absolute;top:8px;font-size:var(--fs-6);font-weight:700;letter-spacing:.08em;color:#9fe8f6;
  background:rgba(3,10,16,.62);padding:3px 7px;border-radius:var(--r-ctl);line-height:1.4;z-index:2}
.doc .sbs-tag-l{left:8px}
.doc .sbs-tag-r{left:calc(50% + 8px)}

/* ---------- 图片墙 /view ---------- */
.wall-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.wall-daily{margin:var(--s3) 0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s3)}
.wall-daily h2{margin:0 0 6px;font-size:var(--fs-3)}
.wall-kicker{font-size:var(--fs-6);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);font-weight:700}
.streak{font-size:var(--fs-6);color:var(--text3)}

.wall-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:var(--s3);margin:var(--s3) 0}
.wall-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;display:flex;flex-direction:column}
.wall-stage{position:relative;background:var(--stage-bg);line-height:0}
.wall-stage img,.wall-stage canvas{display:block;width:100%;height:auto}
.wall-bar{display:flex;align-items:center;gap:8px;padding:10px 12px;flex-wrap:wrap}
.wall-tabs{display:flex;gap:4px;background:var(--panel2);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px}
.wall-tab{border:0;background:transparent;color:var(--text2);font-size:var(--fs-6);padding:10px 14px;min-height:44px;
  border-radius:var(--r-pill);cursor:pointer}
.wall-tab.is-on{background:var(--accent);color:var(--accent-ink);font-weight:600}
.wall-meta{padding:0 12px 12px;font-size:var(--fs-6);color:var(--text3);line-height:1.5}
.wall-meta a{display:inline-block;padding:4px 0;min-height:24px}
.wall-meta b{color:var(--text2)}
.wall-tag{position:absolute;top:8px;right:8px;z-index:2;font-size:var(--fs-6);font-weight:700;letter-spacing:.06em;
  color:#0b1a12;background:rgba(120,230,160,.9);padding:3px 7px;border-radius:var(--r-ctl)}
.wall-tag.mid{background:rgba(240,200,120,.92)}
.wall-tag.hard{background:rgba(240,140,110,.92)}
.wall-size{width:100%;margin:0 12px 10px}
.wall-wiggle{width:100%;aspect-ratio:32/9;background-size:200% 100%;background-repeat:no-repeat;border-radius:var(--r-card)}

@media (prefers-reduced-motion:reduce){
  .fv-dots{transition:none}
}

/* 触控与可读性收尾（场景矩阵实测：滑块 16px 高 / 复选框 18px / 页脚链接 23px） */
.fv-size input[type=range]{height:24px}
.fv-size input[type=checkbox]{width:24px;height:24px;margin-right:6px}
.doc .foot a{display:inline-block;padding:3px 0;min-height:26px}
/* 320px 实测：页头 logo 链接 23x26，差 1px 到 AA 的 24 */
.doc .top a:first-child{display:inline-flex;align-items:center;justify-content:center;min-width:26px;min-height:26px}
/* 键盘可达性：默认 auto/1px 焦点环在浅底上太弱，统一成 2px 强调色 */
.doc :is(button,a,input,select,textarea):focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- /view 移动端修正（2026-11-01 视觉评审）----------
   问题：32:9 图挤进 70px 高条带，单眼 125×70 根本没法融合；
        L/R 与难度角标压在画面上，正好挡住融合需要的边缘线索。 */
.wall-cap{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 12px 8px}
.wall-cap b{font-size:var(--fs-5)}
.wall-tier{position:static;font-size:var(--fs-6);font-weight:700;letter-spacing:.04em;padding:3px 8px;
  border-radius:var(--r-pill);background:var(--panel2);color:var(--text);white-space:nowrap}
.wall-tier.mid{background:rgba(240,200,120,.28)}
.wall-tier.hard{background:rgba(240,140,110,.28)}
.wall-stage{position:relative}
/* 中缝线：帮助双眼对齐，不遮挡内容 */
.lb-pair .lb-eye+.lb-eye{margin-left:0}  /* 中缝由 .lb-pair 的 gap 提供；列表页用单眼预览，不需要分界线 */
.wall-stage .wall-zoom{position:absolute;right:8px;bottom:8px;z-index:3;width:44px;height:44px;
  border:0;border-radius:var(--r-pill);background:rgba(10,14,18,.62);color:#F4F1EB;font-size:18px;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.wall-stage .wall-zoom:hover{background:rgba(10,14,18,.82)}

/* 放大查看 */
.lb{position:fixed;inset:0;z-index:99;background:#0b0d10;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:16px}
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:calc(100dvh - 90px);width:auto;border-radius:var(--r-card)}
.lb-close{position:absolute;top:12px;right:12px;width:44px;height:44px;border:0;border-radius:var(--r-pill);
  background:rgba(255,255,255,.14);color:#fff;font-size:18px;cursor:pointer}
.lb-hint{margin:12px 0 0;font-size:var(--fs-6);color:#c9c3ba;text-align:center}

/* 手机上：图片满宽、隐藏尺寸/单列开关（本来就是一列） */
@media (max-width:640px){
  .wall-grid{grid-template-columns:1fr}
  .wall-size-row{display:none}
  .wall-tabs{width:100%;justify-content:space-between}
  .wall-meta{font-size:var(--fs-6)}
}

/* ---------- 单眼预览 + 放大层（2026-11-01 VLM 评审后重构）----------
   列表只显示左眼预览（看起来就是一张普通照片），立体只在放大层里看：
   小缩略图无法融合，任何浮层压在一只眼上都破坏融合。 */
.wall-open{display:block;width:100%;border:0;padding:0;background:var(--stage-bg);cursor:zoom-in;position:relative}
.wall-eye{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:left center}
.wall-cta{padding:10px 12px 2px}
.wall-open-btn{width:100%;min-height:44px;border:1px solid var(--line2);background:var(--panel2);color:var(--text);
  font-size:var(--fs-5);font-weight:600;border-radius:var(--r-ctl);cursor:pointer}
.wall-open-btn:hover{border-color:var(--accent);color:var(--accent-text)}

.lb-pair{display:flex;gap:6px;align-items:center;justify-content:center;width:100%;max-width:min(96vw,1600px)}
.lb-eye{flex:1 1 50%;aspect-ratio:16/9;background-size:200% 100%;background-repeat:no-repeat;border-radius:4px;background-color:#000}
.lb-eye:first-child{background-position:left center}
.lb-eye:last-child{background-position:right center}
#lbCanvas{max-width:min(96vw,1600px);width:100%;height:auto;border-radius:4px}
.lb-bar{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:12px;max-width:96vw}
.lb-bar .wall-tabs{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18)}
.lb-bar .wall-tab{color:#E9E4DC}
.lb-bar .wall-tab.is-on{background:var(--accent);color:var(--accent-ink)}

/* 放大层：控制条自动隐藏 + 校准工具 + 竖屏提示 */
.lb-bar{transition:opacity .25s ease}
.lb-bar.is-hidden{opacity:0;pointer-events:none}
.lb-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.lb-tool{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#F4F1EB;font-size:var(--fs-6);cursor:pointer}
.lb-tool input[type=range]{width:110px}
.lb-rotate{position:absolute;inset:auto 16px 24px 16px;background:rgba(20,23,28,.92);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-card);padding:16px;text-align:center;color:#F4F1EB}
.lb-rotate[hidden]{display:none}
.lb-rotate p{margin:0 0 12px;font-size:var(--fs-5)}
.lb-tool.is-on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}

/* 深色主题：暖色胶囊 28% 叠在近黑底上会压对比（实测 Medium 3.95 < 4.5），
   降到 16% 并把文字提到最亮一档；浅色不受影响。 */
[data-theme="dark"] .wall-tier{background:rgba(240,200,120,.16);color:var(--text)}
[data-theme="dark"] .wall-tier.mid{background:rgba(240,200,120,.18)}
[data-theme="dark"] .wall-tier.hard{background:rgba(240,140,110,.18)}