/* 平板屏幕（room/js/tablet-os.js）的样式：iPadOS 风格的浅色系统界面。
   字体与配色沿用 room.css 的变量；类名一律 tos- 前缀。
   受 CSS 3D 变换限制：不用 fixed / vw / vh / backdrop-filter；
   任何可点元素及其祖先都不能带 transform（静态、hover、过渡都不行），
   页面滑入滑出只动 left，hover 只改阴影与背景色。 */

.tos{
 width:1080px;height:731px;position:relative;overflow:clip;box-sizing:border-box;border-radius:0;
 font:400 14px/1.6 var(--sans);color:var(--ink);
 background:linear-gradient(168deg,#f7f9fa 0%,#eef2f4 46%,#e7eef0 100%);
 --tone:var(--green);--tone-bg:var(--tint-green);
}
/* 复位包在 :where() 里压到零特异性，否则 .tos button / .tos a 会盖掉下面各组件自己的背景与文字颜色。 */
.tos *{box-sizing:border-box}
.tos :where(h1,h2,h3,h4,p,figure,figcaption){margin:0}
.tos :where(ul,ol){margin:0;padding:0;list-style:none}
.tos :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.tos :where(a){color:inherit;text-decoration:none}
.tos :where(img){display:block}
.tos .tos-i{width:16px;height:16px;flex:0 0 auto}

/* ---------- 状态栏 / home 指示条 ---------- */
.tos-status{position:absolute;left:0;right:0;top:0;height:34px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;color:var(--ink-2);font-size:13px;font-weight:600;letter-spacing:.02em}
.tos-clock{font-variant-numeric:tabular-nums}
.tos-status-right{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2)}
.tos-i-wifi{width:17px;height:17px}
.tos-i-batt{width:25px;height:17px}

.tos-homebar{position:absolute;left:0;right:0;bottom:0;height:26px;display:grid;place-items:center}
.tos-homebar span{display:block;width:158px;height:5px;border-radius:3px;background:rgba(34,49,63,.26);transition:background .2s}
.tos-homebar:hover span{background:rgba(34,49,63,.42)}
.tos.is-deep .tos-homebar span{background:var(--green-deep);opacity:.5}

/* ---------- 页栈与滑入滑出 ---------- */
/* clip 而不是 hidden：hidden 的盒子仍能被 iframe 里的 focus/scrollIntoView 程序化滚动，
   整层滚偏后 DOM 就和 WebGL 上的洞错位。 */
.tos-stack{position:absolute;left:0;right:0;top:34px;bottom:26px;overflow:clip}
/* 页面滑动用 left 而不是 transform：这块 DOM 贴在 CSS3D 的 3D 变换里，Chrome 对“自身有 transform（含刚做完 transform 过渡）”的子树命中测试会失效，
   页面里的按钮就点不到；left 走布局，不产生合成层，点得稳。 */
.tos-page{
 position:absolute;top:0;bottom:0;left:0;width:100%;display:flex;flex-direction:column;
 background:linear-gradient(168deg,#f7f9fa 0%,#eef2f4 46%,#e7eef0 100%);
 box-shadow:-18px 0 40px -20px rgba(16,38,30,.3);
 transition:left .3s cubic-bezier(.32,.72,0,1),opacity .3s ease;
}
/* 推入的页面始终不透明，否则滑动时会看见下层页面重影。 */
.tos-page.is-from-right{transition:none;left:100%}
.tos-page.is-leaving{left:100%;pointer-events:none}
.tos-page.is-behind{left:-4%;opacity:.3;pointer-events:none}

.tos-body{flex:1 1 auto;min-height:0}
.tos-scroll{overflow:auto;padding:18px 28px 26px;display:flex;flex-direction:column;gap:12px}
/* 滚动容器里的块不许被压缩，否则长图会被截断而不是滚动。 */
.tos-scroll>*{flex:0 0 auto}
.tos-scroll::-webkit-scrollbar,.tos-read-scroll::-webkit-scrollbar{width:8px}
.tos-scroll::-webkit-scrollbar-thumb,.tos-read-scroll::-webkit-scrollbar-thumb{background:rgba(86,102,122,.28);border-radius:4px}
.tos-scroll::-webkit-scrollbar-track,.tos-read-scroll::-webkit-scrollbar-track{background:transparent}

/* ---------- 通用零件 ---------- */
.tos-kicker{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;letter-spacing:.06em;color:var(--green-deep);font-style:normal}
.tos-kicker .tos-i{width:15px;height:15px}
.tos-en{font-style:normal;font-size:11.5px;letter-spacing:.05em;color:var(--ink-3)}
.tos-sub{font:600 14px/1.4 var(--serif);letter-spacing:.06em;color:var(--green-deep)}
.tos-note{font-size:13.5px;line-height:1.75;color:var(--ink-2)}
.tos-period{font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tos-hand{font-family:var(--hand);font-size:14.5px;line-height:1.4;color:var(--green-ink);font-style:normal}
.tos-chev{color:var(--ink-3);display:grid;place-items:center}
.tos-chev .tos-i{width:20px;height:20px}
.tos-more{font-style:normal;display:inline-flex;align-items:center;gap:2px;font-size:12.5px;font-weight:500;color:var(--tone)}
.tos-more .tos-i{width:14px;height:14px}

.tos-card,.tos-tile,.tos-post,.tos-entry,.tos-panel,.tos-role,.tos-hero{
 border-radius:20px;background:var(--paper);
 box-shadow:0 12px 30px -20px rgba(38,74,64,.45),0 1px 2px rgba(38,74,64,.05);
}
/* hover 只加深阴影，不做任何位移或缩放：祖先一旦有 transform，3D 里的命中测试就会丢。 */
.tos-tile,.tos-post,.tos-entry,.tos-cover{transition:box-shadow .2s ease,background-color .2s ease}
.tos-tile:hover,.tos-post:hover,.tos-entry:hover,.tos-cover:hover{box-shadow:0 18px 38px -18px rgba(38,74,64,.55),0 1px 3px rgba(38,74,64,.1)}

.tos-chips{display:flex;flex-wrap:wrap;gap:8px}
.tos-chip{font-style:normal;padding:5px 12px;border-radius:999px;background:var(--tint-green);color:var(--green-deep);font-size:12.5px}

/* ---------- 配图容器与加载失败兑底 ---------- */
/* 图片是后加的模拟配图，可能还没生成：<img> 加载失败时被 JS 摘掉，
   剩下这层按 tone 着色的淡渐变加图标，不会出现浏览器的破图。 */
.tos-shotbox{position:relative;display:block;overflow:hidden;border-radius:16px;background:linear-gradient(148deg,var(--tone-bg) 0%,#fbfdfc 74%,#f4f7f6 100%);box-shadow:inset 0 0 0 1px var(--line)}
.tos-shotbox>img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.tos-shot-ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--tone);opacity:.42}
.tos-shot-ph .tos-i{width:34px;height:34px}
.tos-mockmark{position:absolute;z-index:2;top:8px;left:8px;font-style:normal;font-size:10px;letter-spacing:.1em;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.88);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line)}
.tos-shotbox.is-empty .tos-mockmark{display:none}
.tos-shot-cap{position:absolute;z-index:2;left:9px;bottom:9px;font-style:normal;font-size:11px;padding:3px 10px;border-radius:999px;background:rgba(16,38,30,.42);color:rgba(255,255,255,.94)}
.tos-shotbox.is-empty .tos-shot-cap{background:rgba(255,255,255,.88);color:var(--ink-3);box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- 主屏 ---------- */
.tos-home{display:flex;flex-direction:column;gap:16px;padding:18px 28px 16px;overflow:hidden}
.tos-home-head{display:grid;gap:4px}
.tos-home-head h1{font:600 25px/1.3 var(--serif);letter-spacing:.02em}
.tos-home-grid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:46% 1fr;gap:16px}
.tos-home-col{display:grid;grid-template-rows:1fr 1fr;gap:16px;min-height:0}

.tos-tile{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:20px 18px}
.tos-logo{width:60px;height:60px;border-radius:15px;object-fit:contain;background:#fff;padding:4px;box-shadow:inset 0 0 0 1px var(--line)}
.tos-tile-copy{display:grid;gap:3px;min-width:0}
.tos-tile-name{font:600 19px/1.35 var(--serif)}
.tos-tile-meta{font-style:normal;font-size:13px;color:var(--ink-2)}
.tos-tile-period{font-style:normal;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tos-tile-note{font-style:normal;margin-top:5px;font-size:12.5px;line-height:1.6;color:var(--ink-2);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}

.tos-cover{position:relative;min-height:0;border-radius:22px;overflow:hidden;box-shadow:0 18px 40px -24px rgba(24,54,44,.6),0 1px 2px rgba(38,74,64,.08)}
.tos-cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tos-cover-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,38,30,.04) 0%,rgba(16,38,30,.28) 42%,rgba(13,33,26,.78) 78%,rgba(11,30,24,.9) 100%)}
.tos-cover-copy{position:absolute;left:26px;right:26px;bottom:26px;display:grid;gap:8px;color:#fff}
.tos-cover-tag{justify-self:start;font-style:normal;padding:4px 13px;border-radius:999px;background:rgba(255,255,255,.22);box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);font-size:12.5px;letter-spacing:.08em}
.tos-cover-copy strong{font:600 27px/1.35 var(--serif);text-shadow:0 2px 12px rgba(10,26,20,.4)}
.tos-cover-sub{font-style:normal;font-size:14px;color:rgba(255,255,255,.9)}
.tos-cover-hint{font-family:var(--hand);font-style:normal;font-size:15.5px;color:#dff3e6;display:inline-flex;align-items:center;gap:2px}
.tos-cover-hint .tos-i{width:15px;height:15px}
.tos-cover-cap{position:absolute;top:16px;right:18px;font-size:11.5px;color:rgba(255,255,255,.88);background:rgba(16,38,30,.34);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);padding:4px 11px;border-radius:999px}

/* ---------- 导航栏 ---------- */
.tos-nav{flex:0 0 auto;display:grid;grid-template-columns:130px 1fr minmax(130px,auto);align-items:center;gap:10px;padding:9px 20px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.86)}
.tos-nav-tail{display:inline-flex;align-items:center;justify-content:flex-end;gap:8px}
.tos-tool{display:inline-flex;align-items:center;white-space:nowrap;padding:7px 13px;border-radius:11px;font-size:12.5px;font-weight:500;color:var(--ink-2);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s ease,color .2s ease}
.tos-tool:hover{color:var(--green-deep);box-shadow:inset 0 0 0 1px var(--green)}
.tos-back{display:inline-flex;align-items:center;gap:1px;justify-self:start;padding:6px 12px 6px 6px;border-radius:12px;color:var(--green-deep);font-size:14px;font-weight:500;transition:background-color .2s ease}
.tos-back .tos-i{width:20px;height:20px}
.tos-back:hover{background:var(--tint-green)}
.tos-nav-title{min-width:0;text-align:center}
.tos-nav-title h2{font:600 17px/1.35 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tos-nav-title p{font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- 学校详情 ---------- */
.tos-hero{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:18px}
.tos-logo-lg{width:84px;height:84px;border-radius:18px;padding:6px}
.tos-hero-name{font:600 24px/1.35 var(--serif)}
.tos-metarow{display:flex;flex-wrap:wrap;gap:10px}
.tos-metarow li{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;color:var(--ink-2)}
.tos-metarow .tos-i{width:15px;height:15px;color:var(--green)}
.tos-entry{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:16px 18px;margin-top:2px}
.tos-entry-ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--tint-green);color:var(--green-deep)}
.tos-entry-ico .tos-i{width:22px;height:22px}
.tos-entry-copy{display:grid;gap:3px}
.tos-entry-copy strong{font:600 16.5px/1.35 var(--serif)}
.tos-entry-copy em{font-style:normal;font-size:12.5px;color:var(--ink-3)}
.tos-entry-go{color:var(--green);display:grid;place-items:center}
.tos-entry-go .tos-i{width:20px;height:20px}
.tos-panel{display:grid;gap:10px;padding:16px 18px}
.tos-course-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tos-course{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center;padding:13px 15px;border-radius:16px;background:var(--tint-green);color:var(--green-deep)}
.tos-course .tos-i{width:19px;height:19px}
.tos-course strong{font:600 14px/1.45 var(--serif);color:var(--ink)}

/* 照片条 */
.tos-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.tos-strip .tos-figure img{height:176px}

/* ---------- 校园经历（一整页） ---------- */
.tos-role{display:grid;grid-template-columns:1fr 300px;gap:22px;align-items:start;padding:18px}
.tos-role-id{display:grid;gap:5px;align-content:start;min-width:0}
.tos-role h3{font:600 22px/1.3 var(--serif)}
.tos-role .tos-chips{margin-top:6px}
.tos-shotbox-role{width:300px;height:186px;border-radius:14px}

/* 叙述段落：一行不超过约 44 个字，读起来不费劲 */
.tos-story{display:grid;gap:10px;max-width:880px}

/* 照片墙：三列瀑布流（CSS columns），每张照片按原始比例完整显示，不做任何裁切 */
.tos-wall{columns:3;column-gap:14px}
.tos-wall>li{break-inside:avoid;margin:0 0 14px;min-width:0}
.tos-wall .tos-figure img{height:auto;object-fit:unset;display:block}

.tos-figure{border-radius:18px;overflow:hidden;background:var(--paper);box-shadow:0 12px 30px -20px rgba(38,74,64,.45),0 1px 2px rgba(38,74,64,.05)}
.tos-figure img{width:100%;height:188px;object-fit:cover}
.tos-figure figcaption{padding:8px 13px;font-size:12px;color:var(--ink-3)}
/* 照片缺失时 bindShots 摘掉 <img>，留下同尺寸的淡底，不出现破图 */
.tos-figure.is-empty{background:linear-gradient(148deg,var(--tone-bg) 0%,#fbfdfc 74%,#f4f7f6 100%)}
.tos-strip .tos-figure.is-empty{min-height:176px}

/* ---------- 推文入口卡 ---------- */
.tos-posts{display:grid;gap:8px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.tos-post-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tos-post{display:grid;grid-template-rows:auto 1fr;gap:0;padding:0;overflow:hidden}
.tos-shotbox-post{width:100%;height:164px;border-radius:20px 20px 0 0;box-shadow:none}
.tos-shotbox-post>img{object-position:top center}
.tos-post-copy{display:grid;gap:5px;align-content:start;min-width:0;padding:14px 16px 16px}
.tos-post-copy strong{font:600 16px/1.45 var(--serif)}
.tos-post-meta{font-style:normal;font-size:11.5px;line-height:1.5;color:var(--ink-3);font-variant-numeric:tabular-nums}
.tos-post .tos-more{margin-top:4px;color:var(--green-deep)}

/* ---------- 推文阅读页：iframe 里的离线镜像 ---------- */
/* overflow:clip 而不是 hidden：hidden 仍是滚动容器，iframe 内的 focus/scrollIntoView
   会把整页滚偏，DOM 与 WebGL 上的洞就错位（同 main.js 对 #css3d 的处理）。 */
/* 镜像页收成手机阅读的宽度（540px）居中，两侧留浅灰白边，像把手机屏幕放在平板里读：
   微信正文在这个宽度下就是手机版式，图片和字号都不会被拉得过粗。 */
.tos-live{position:relative;overflow:clip;background:#eef0f2}
.tos-frame{position:absolute;left:50%;top:0;width:540px;height:100%;margin-left:-270px;border:0;display:block;background:#fff;
 box-shadow:0 0 0 1px rgba(20,40,34,.06),0 18px 50px -30px rgba(20,40,34,.35)}
/* 镜像文件缺失时（iframe 报错被摘掉）容器上露出一句提示 */
.tos-live.is-missing::after{content:'离线镜像未生成：运行 node scripts/mirror-mp-article.mjs 重新抓取，或用右上「微信原文 ↗」查看。';
 position:absolute;left:40px;right:40px;top:42%;text-align:center;font-size:14px;line-height:1.9;color:var(--ink-2)}

/* ---------- 推文阅读页：无镜像时的长截图兜底 ---------- */
/* 阅读区自己滚动，进度条和提示留在不滚动的外层（不能用 fixed）。 */
.tos-read{position:relative;overflow:hidden}
.tos-read-scroll{position:absolute;inset:0;overflow:auto;padding:18px 40px 28px 28px;overscroll-behavior:contain}
.tos-read-inner{width:640px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
/* 长图容器绝不能被 flex 压扁，否则读者滚不到底。 */
.tos-read-inner>*{flex:0 0 auto}
.tos-read-head{display:grid;gap:6px;padding:18px 20px;border-radius:20px;background:var(--paper);box-shadow:0 12px 30px -20px rgba(38,74,64,.45),0 1px 2px rgba(38,74,64,.05)}
.tos-read-head h3{font:600 22px/1.4 var(--serif)}
.tos-shotbox-read{border-radius:18px;box-shadow:0 14px 34px -22px rgba(38,74,64,.5),inset 0 0 0 1px var(--line)}
.tos-shotbox-read>img{height:auto}
.tos-shotbox-read.is-empty{min-height:420px}
.tos-read-foot{display:flex;align-items:center;gap:12px;padding:2px 0 8px}
.tos-next{display:inline-flex;align-items:center;gap:3px;padding:10px 18px;border-radius:999px;background:var(--tint-green);color:var(--green-deep);font-size:13.5px;font-weight:500;transition:background-color .2s ease}
.tos-next .tos-i{width:15px;height:15px}
.tos-next:hover{background:#cee9db}
.tos-out{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:999px;background:var(--green);color:#fff;font-size:13.5px;font-weight:500;transition:background-color .2s ease}
.tos-out:hover{background:var(--green-deep)}

/* 进度条与提示要压在长图上面：长图为了盖住兑底层带了 z-index:1。 */
.tos-prog{position:absolute;z-index:3;right:14px;top:18px;bottom:22px;width:4px;border-radius:2px;background:rgba(86,102,122,.16);overflow:hidden}
.tos-prog i{display:block;width:100%;height:7%;border-radius:2px;background:var(--green);transition:height .12s linear}
.tos-readhint{position:absolute;z-index:3;left:0;right:0;bottom:16px;text-align:center;font-style:normal;pointer-events:none;opacity:1;transition:opacity .3s ease}
.tos-readhint span{display:inline-block;padding:6px 16px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 10px 24px -14px rgba(38,74,64,.6),inset 0 0 0 1px var(--line);font-family:var(--hand);font-size:15px;color:var(--green-ink)}
.tos-readhint.is-off{opacity:0}

/* ---------- 减少动态效果 ---------- */
@media (prefers-reduced-motion:reduce){
 .tos-page,.tos-tile,.tos-post,.tos-entry,.tos-cover,.tos-tool,.tos-next,.tos-out,.tos-back,.tos-homebar span,.tos-prog i,.tos-readhint{transition:none}
 .tos-page.is-from-right,.tos-page.is-leaving{left:0;opacity:1}
}