/* Irivi · static/app/docs.css（REFACTOR_PLAN 3.8 文档阅读页：使用手册 + 协议与政策）
   对照 design/ui-2026-10-21/docs/docs.html：左侧固定目录、右侧正文最宽 720px；竖屏时目录收为正文上方吸顶小栏。
   正文字体与段落见 static/app/reading.css（.irivi-article）。只改排版，不改条文。 */
html body[data-page="manual"]>main>.page-header,html body[data-page="agreement"]>main>.page-header{display:none}
html body[data-page="manual"]>main,html body[data-page="agreement"]>main{max-width:1180px}
html body .irivi-docs,html body .irivi-docs .manual-content{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;align-items:start;color:var(--ink)}
html body .irivi-docs.is-manual{display:block}
html body .irivi-docs :is(h1,h2,h3,h4,p){margin-top:0}

/* 左侧目录 */
html body .irivi-docs-toc{position:sticky;top:calc(var(--topbar-h) + 20px);max-height:calc(100vh - var(--topbar-h) - 40px);overflow:auto;padding:12px 0 24px;scrollbar-width:thin}
html body .irivi-docs-toc h4{margin:0 0 8px;padding:0 12px;font-size:12px;font-weight:800;color:var(--ink-3)}
html body .irivi-docs-toc h4+nav{margin-bottom:22px}
html body .irivi-docs-toc nav{display:flex;flex-direction:column;gap:2px}
html body .irivi-docs-toc nav>strong{display:none}
html body .irivi-docs-toc a{display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:var(--r-sm);font-size:14px;color:var(--ink-2);text-decoration:none;transition:background-color var(--t-base),color var(--t-base)}
html body .irivi-docs-toc a:hover{background:var(--soft);color:var(--ink)}
html body .irivi-docs-toc a.is-on,html body .irivi-docs-toc a[aria-current="page"],html body .irivi-docs-toc a[aria-current="location"]{background:var(--brand-soft);color:var(--brand);font-weight:800}
html body .irivi-docs-list a i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--c)}
html body .irivi-docs-mtoc{display:none}

/* 正文头部 */
html body .irivi-docs-article{min-width:0;max-width:720px}
html body .irivi-docs-head{padding-bottom:24px;margin-bottom:28px;border-bottom:1px solid var(--line)}
html body .irivi-docs-tag{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:var(--r-pill);background:var(--c);color:#fff;font-size:12px;font-weight:800}
html body .irivi-docs-head h1{margin:14px 0 0;font-size:34px;font-weight:900;line-height:1.25;letter-spacing:-.01em}
html body .irivi-docs-lead{margin:8px 0 0;color:var(--ink-2);font-size:15px}
html body .irivi-docs-meta{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:10px;font-size:13px;color:var(--ink-3)}
html body .irivi-docs-meta strong{color:var(--ink-2)}
html body .irivi-docs-draft,html body .irivi-docs-note{display:flex;align-items:flex-start;gap:10px;margin:18px 0 0;padding:12px 14px;border-radius:var(--r-md);background:var(--warn-soft);color:var(--warn);font-size:13px;line-height:1.6;border:0;text-align:left}
html body .irivi-docs-note{background:var(--soft);color:var(--ink-2)}
html body .irivi-docs-draft svg{width:18px;height:18px;flex:none;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* 协议正文：条款编号单独一列 */
html body .irivi-docs-body h2{display:flex;align-items:center;gap:12px;margin:40px 0 14px;scroll-margin-top:calc(var(--topbar-h) + 16px)}
html body .irivi-docs-body h2:first-child{margin-top:0}
html body .irivi-docs-no{display:inline-flex;align-items:center;height:26px;padding:0 8px;border-radius:var(--r-xs);background:var(--brand-soft);color:var(--brand);font-family:var(--f-ui);font-size:13px;font-weight:900;white-space:nowrap}
html body .irivi-docs-clause{display:grid;grid-template-columns:50px minmax(0,1fr);gap:0 0;margin:0 0 6px}
html body .irivi-docs-clause p{margin:0}
html body .irivi-docs-n{padding-top:3px;font-family:var(--f-num);font-size:13px;font-weight:800;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* 上一篇 / 下一篇 */
html body .irivi-docs-next{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:48px}
html body .irivi-docs-next a{display:block;padding:18px 16px;border:1px solid var(--line);border-radius:var(--r-md);color:var(--ink);text-decoration:none;transition:border-color var(--t-base),box-shadow var(--t-base),transform var(--t-fast) var(--ease-out)}
html body .irivi-docs-next a:hover{border-color:var(--brand);box-shadow:var(--shadow-card);transform:translateY(-1px)}
html body .irivi-docs-next a.is-next{grid-column:2;text-align:right}
html body .irivi-docs-next small{display:block;font-size:12px;color:var(--ink-3)}
html body .irivi-docs-next b{display:block;margin-top:4px;font-size:15px;font-weight:900}

/* 使用手册：入口卡、编号竖线步骤、章节分隔、QQ 群 */
html body .irivi-docs-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 36px}
html body .irivi-docs-cards a{position:relative;display:flex;flex-direction:column;gap:10px;padding:16px 14px 14px;border-radius:var(--r-md);background:color-mix(in srgb,var(--c) 10%,#fff);color:color-mix(in srgb,var(--c) 75%,#000);text-decoration:none;overflow:hidden;transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-base)}
html body .irivi-docs-cards a:hover{transform:translateY(-1px);box-shadow:var(--shadow-card)}
html body .irivi-docs-cards i{position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c)}
html body .irivi-docs-cards svg{width:22px;height:22px;fill:none;stroke:var(--c);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
html body .irivi-docs-cards b{font-size:14px;font-weight:900;font-family:var(--f-ui)}
html body .is-manual article{padding:0 0 32px;margin:0 0 32px;border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--topbar-h) + 16px)}
html body .is-manual article:last-child{border-bottom:0}
html body .is-manual article ol{counter-reset:step;list-style:none;padding:0;margin:0 0 16px}
html body .is-manual article ol>li{position:relative;counter-increment:step;margin:0;padding:0 0 14px 44px}
html body .is-manual article ol>li::before{content:counter(step);position:absolute;left:0;top:2px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;font-family:var(--f-num);font-size:13px;font-weight:900}
html body .is-manual article ol>li:not(:last-child)::after{content:"";position:absolute;left:13px;top:34px;bottom:2px;width:2px;background:var(--brand-soft)}
html body .is-manual article details{margin:0 0 10px;padding:12px 16px;border-radius:var(--r-md);background:var(--soft)}
html body .is-manual article summary{font-family:var(--f-ui);font-weight:800;cursor:pointer}
html body .is-manual .manual-links{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:12px;font-family:var(--f-ui);font-size:14px}
html body .irivi-docs-help{margin:8px 0 0;padding:16px 18px;border-radius:var(--r-md);background:var(--brand-soft);color:var(--ink-2);font-size:14px}
html body .irivi-docs-help strong{color:var(--brand);font-family:var(--f-num)}
html body .irivi-docs+.irivi-site-footer,html body .irivi-docs .irivi-site-footer{max-width:none}

/* 竖屏：目录收为正文上方吸顶小栏，点开为下拉 */
@media (max-aspect-ratio:1/1){
  html body .irivi-docs,html body .irivi-docs .manual-content{grid-template-columns:minmax(0,1fr);gap:0}
  html body .irivi-docs-mtoc{position:sticky;top:var(--topbar-h);z-index:20;display:flex;align-items:center;gap:8px;width:calc(100% + 24px);margin:-16px -12px 16px;padding:0 12px;height:44px;border:0;border-bottom:1px solid var(--line);background:rgba(255,255,255,.97);color:var(--ink);font:inherit;font-size:14px;font-weight:800;text-align:left;cursor:pointer}
  html body .irivi-docs-mtoc svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round}
  html body .irivi-docs-mtoc span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html body .irivi-docs-mtoc small{color:var(--brand);font-size:12px}
  html body .irivi-docs-toc{display:none;position:fixed;top:calc(var(--topbar-h) + 44px);left:0;right:0;z-index:25;max-height:60vh;padding:12px;background:#fff;box-shadow:0 18px 30px rgba(36,20,70,.14);border-radius:0 0 var(--r-lg) var(--r-lg)}
  html body .irivi-docs-toc.is-open{display:block;animation:iriviPopIn var(--t-base) var(--ease-out)}
  html body .irivi-docs-head h1{font-size:26px}
  html body .irivi-docs-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body .irivi-docs-clause{grid-template-columns:40px minmax(0,1fr)}
  html body .irivi-docs-next{grid-template-columns:1fr}
  html body .irivi-docs-next a.is-next{grid-column:1}
}
/* 旧 manual-content 卡片外观（style.css 等）在新阅读页上不用 */
html body .is-manual .manual-content article{background:none!important;box-shadow:none!important;border-radius:0!important;padding:0 0 32px!important}
html body .is-manual .manual-content .manual-toc{position:static;padding:0;margin:0;border:0;background:none;box-shadow:none}
/* 关于 Irivi / 经营者信息（/about，about.html）：两列事实表，窄屏上下排 */
html body .irivi-docs-facts{margin:0 0 8px;padding:0;border-radius:var(--r-md);background:var(--soft);overflow:hidden}
html body .irivi-docs-facts>div{display:grid;grid-template-columns:minmax(120px,30%) 1fr;gap:4px 16px;padding:12px 16px;border-top:1px solid var(--line, rgba(0,0,0,.06))}
html body .irivi-docs-facts>div:first-child{border-top:0}
html body .irivi-docs-facts dt{color:var(--ink-3, var(--ink-2));font-size:13px}
html body .irivi-docs-facts dd{margin:0;color:var(--ink);font-size:14px;word-break:break-word}
html body .irivi-docs-facts a,html body .irivi-docs-links a{color:var(--brand)}
html body .irivi-docs-links{margin:0;padding-left:1.2em;line-height:2}
@media (max-width:640px){html body .irivi-docs-facts>div{grid-template-columns:1fr}}