/* 📖 资料视图的四种版式 —— 唯一的一份。
   index.html（访客读到的真页面）和 create.html（manage 里的风格缩略图）都引
   这个文件；缩略图就是把真页面缩小，所以「缩略图和真页面长得不一样」在结构上
   不可能发生。想加第十一种版式：在这里加一段 .ivX，在 info-view.js 的 STYLES
   里加一行，两边同时就有了。

   四种版式各自带调色板、scope 在自己的 class 下，所以互相不串、也不会漏进
   聊天页或 manage 页的 token。尺寸响应的是 CONTAINER 不是窗口：这块东西同时
   渲染在 App 的 WebView 里、manage 的缩略图里和整屏上——窗口宽度在那些地方
   什么都说明不了。用的人要给容器 container-type:inline-size 和
   container-name:iv。 */

/* ── feature · 特写 ── 默认版式，直接用品牌 token（DESIGN_TOKENS.md 规则 6）：
     纸、墨、line 都是 brand.css 的；章节小标和 kicker 是玫瑰的唯一落点。
     其余三种版式保留各自的调色板（--*2 只在自己的 class 下），不碰品牌变量。 */
  .ivF { --bg2:var(--bg); --ink2:var(--ink); --soft2:var(--ink-soft); --acc2:var(--accent); --gold2:var(--accent); --rule2:var(--line);
    background:var(--bg2); color:var(--ink2); min-height:100%;
    font-family:"Songti SC","Source Han Serif SC",Georgia,serif; }
  .ivF .w { max-width:760px; margin:0 auto; padding:0 26px 20px; }
  .ivF .hero { padding:38px 0 26px; border-bottom:2px solid var(--ink2); }
  .ivF .kick { font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--acc2);
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
  .ivF h1 { font-size:clamp(30px,7cqw,50px); line-height:1.12; margin:12px 0 0; font-weight:500; letter-spacing:-.01em; }
  .ivF .intro { font-size:17px; line-height:1.72; color:var(--soft2); margin-top:14px; font-style:italic; }
  .ivF h2 { font-size:24px; margin:38px 0 3px; font-weight:500; line-height:1.25; }
  .ivF h2 i { display:block; font-style:normal; font-size:10.5px; letter-spacing:.2em; color:var(--gold2);
    margin-bottom:9px; font-family:ui-monospace,Menlo,monospace; }
  .ivF p { font-size:16.5px; line-height:1.82; margin:12px 0; }
  .ivF .pull { border-left:3px solid var(--acc2); padding:3px 0 3px 18px; margin:28px 0;
    font-size:21px; line-height:1.36; color:var(--ink2); }
  .ivF .side { border-top:1px solid var(--rule2); border-bottom:1px solid var(--rule2); padding:18px 0; margin:30px 0; }
  .ivF .side h3 { font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft2);
    margin:0 0 10px; font-weight:500; font-family:ui-monospace,Menlo,monospace; }
  .ivF .side li { font-size:15.5px; line-height:1.74; margin-bottom:5px; }
  .ivF .side ul { padding-left:18px; }

  /* ── dossier · 档案 ── */
  .ivD { --bg2:#17151A; --panel2:#201D25; --ink2:#EFEAE3; --soft2:#94909C; --acc2:#D08C7A;
    --flag2:#C25A48; --rule2:#302C38; background:var(--bg2); color:var(--ink2); min-height:100%;
    font-family:system-ui,"PingFang SC",sans-serif; }
  .ivD .w { max-width:900px; margin:0 auto; padding:26px 22px 20px; }
  .ivD h1 { font-size:clamp(26px,8cqw,44px); font-weight:700; letter-spacing:-.02em; margin:0; line-height:1.05; }
  .ivD .tag { color:var(--acc2); font-size:13.5px; margin-top:7px; }
  .ivD .intro { color:var(--soft2); font-size:14px; line-height:1.7; margin-top:12px;
    border-bottom:1px solid var(--rule2); padding-bottom:18px; }
  .ivD .lbl { font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--soft2);
    margin:26px 0 10px; font-family:ui-monospace,Menlo,monospace; }
  .ivD .face { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule2); border:1px solid var(--rule2); }
  .ivD .face > div { background:var(--panel2); padding:16px 18px; }
  .ivD .face h3 { font-size:11.5px; letter-spacing:.06em; margin:0 0 11px; text-transform:uppercase; }
  .ivD .face .yes h3 { color:var(--acc2); } .ivD .face .no h3 { color:var(--flag2); }
  .ivD .face ul { margin:0; padding:0; }
  .ivD .face li { font-size:13px; line-height:1.65; margin-bottom:7px; list-style:none; padding-left:14px; position:relative; }
  .ivD .face .yes li::before { content:"+"; position:absolute; left:0; color:var(--acc2); }
  .ivD .face .no li::before { content:"\00d7"; position:absolute; left:0; color:var(--flag2); }
  .ivD .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1px;
    background:var(--rule2); border:1px solid var(--rule2); }
  .ivD .cell { background:var(--panel2); padding:15px 16px; }
  .ivD .cell h4 { font-size:13px; margin:0 0 6px; }
  .ivD .cell p { margin:0; font-size:12px; line-height:1.7; color:var(--soft2); }
  .ivD .meet { background:var(--panel2); border-left:3px solid var(--acc2); padding:16px 18px;
    margin-top:26px; font-size:13.5px; line-height:1.75; }

  /* ── poster · 刊头 ── */
  .ivP { --bg2:#FBFAF7; --ink2:#0A0A0A; --blue2:#1D2CE0; --grey2:#7A7A78; --rule2:#DEDCD6;
    background:var(--bg2); color:var(--ink2); min-height:100%;
    font-family:system-ui,"PingFang SC",sans-serif; }
  .ivP .w { max-width:1000px; margin:0 auto; padding:0 22px 20px; }
  .ivP .eyebrow { font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--blue2);
    padding-top:26px; font-family:ui-monospace,Menlo,monospace; }
  .ivP h1 { font-size:clamp(34px,13cqw,86px); line-height:1.02; letter-spacing:-.03em; margin:12px 0 0;
    font-weight:800; }
  .ivP .intro { font-size:14.5px; line-height:1.65; color:#33322F; margin:16px 0 0; max-width:46ch; }
  .ivP .band { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:0 16px;
    border-top:2px solid var(--ink2); border-bottom:1px solid var(--rule2); margin-top:24px; }
  .ivP .band > div { border-right:1px solid var(--rule2); padding:16px 0 18px; }
  .ivP .band > div:last-child { border-right:0; }
  .ivP .band b { display:block; font-size:clamp(17px,3.4cqw,26px); font-weight:800; letter-spacing:-.02em; line-height:1.1; }
  .ivP .blk { padding:22px 0 24px; border-bottom:1px solid var(--rule2); }
  .ivP .blk h2 { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--blue2);
    margin:0 0 10px; font-weight:500; font-family:ui-monospace,Menlo,monospace; }
  .ivP .blk h3 { font-size:clamp(18px,4cqw,28px); font-weight:800; letter-spacing:-.02em; line-height:1.14; margin:0 0 10px; }
  .ivP .blk p { font-size:14.5px; line-height:1.72; margin:0 0 9px; color:#2B2A28; }
  .ivP .blk li { font-size:14px; line-height:1.6; padding:7px 0; border-top:1px solid var(--rule2); list-style:none; }
  .ivP .blk ul { margin:0; padding:0; }
  .ivP .blk li:first-child { border-top:0; }
  .ivP .stripe { background:var(--ink2); color:var(--bg2); padding:20px 22px; margin-top:0; }
  .ivP .stripe i { font-style:normal; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
    color:#8C8C8A; display:block; font-family:ui-monospace,Menlo,monospace; }
  .ivP .stripe b { display:block; font-size:clamp(16px,3.6cqw,25px); font-weight:700; margin-top:6px; letter-spacing:-.015em; }

  /* ── catalog · 索引卡 ── */
  .ivC { --man2:#DFD3B4; --card2:#FBF7EC; --ink2:#2A251E; --red2:#A8412F; --blue2:#3A5A8C; --rule2:#CBBE9E;
    background:var(--man2); color:var(--ink2); min-height:100%;
    font-family:ui-monospace,"Courier New","PingFang SC",monospace; }
  .ivC .w { max-width:1000px; margin:0 auto; padding:24px 20px 20px; }
  .ivC .plate { border:2px solid var(--ink2); padding:13px 16px; background:var(--card2);
    display:flex; justify-content:space-between; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
  .ivC .plate b { font-size:19px; letter-spacing:.14em; }
  .ivC .plate span { font-size:10.5px; letter-spacing:.06em; }
  .ivC .sect { font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#6F6349;
    margin:24px 0 11px; border-bottom:1px solid var(--rule2); padding-bottom:6px; }
  .ivC .cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:15px; }
  .ivC .card { background:var(--card2); border:1px solid #BFB392; padding:16px 18px 22px; position:relative;
    background-image:repeating-linear-gradient(transparent 0 28px,#DCE4EE 28px 29px);
    background-position:0 42px; box-shadow:2px 3px 0 rgba(42,37,30,.12); }
  .ivC .card::before { content:""; position:absolute; left:50%; bottom:7px; width:12px; height:12px;
    border-radius:50%; background:var(--man2); box-shadow:inset 0 1px 2px rgba(0,0,0,.28); }
  .ivC .card .no { font-size:10px; letter-spacing:.16em; color:var(--blue2); }
  .ivC .card h3 { font-size:14.5px; margin:5px 0 10px; border-bottom:1px solid var(--red2);
    padding-bottom:7px; display:inline-block; }
  .ivC .card p { font-size:14px; line-height:28px; margin:0; color:#332C24;
    font-family:"Songti SC",Georgia,serif; }
  .ivC .card ul { margin:5px 0 0; padding-left:16px; }
  .ivC .card li { font-size:14px; line-height:28px; font-family:"Songti SC",Georgia,serif; }

  /* ── 追问入口 · 四种版式同一个位置（每节正文之后），同一个样子 ──
     用 currentColor + 透明度而不是各版式的调色板：换一个人的文档不用重新找它。
     缩略图（.iv-thumb）里藏掉：128px 下它只是一道糊线。 */
  .iv-ask { margin:6px 0 4px; }
  .iv-ask-btn { display:inline-flex; align-items:baseline; gap:8px; max-width:100%; padding:0;
    border:0; background:none; font:inherit; color:inherit; cursor:pointer; text-align:left; }
  /* pill 用各版式自己的强调色（feature = 品牌玫瑰，追问 pill 是它被允许的小面积之一）。 */
  .iv-ask-btn .pill { flex:0 0 auto; font-size:11.5px; line-height:1; padding:5px 10px; border-radius:999px;
    border:1px solid currentColor; color:var(--acc2); white-space:nowrap; font-family:system-ui,"PingFang SC",sans-serif; }
  .iv-ask-btn .q { font-size:13px; line-height:1.5; opacity:.6; }
  .iv-ask-btn:hover .q { opacity:1; }
  .iv-thumb .iv-ask { display:none; }
  .ivD .iv-ask { margin-top:10px; } .ivD .iv-ask-btn .q { color:var(--soft2); }
  .ivP .iv-ask-btn .pill { color:var(--blue2); }
  .ivC .iv-ask-btn .pill { color:var(--red2); }
  .ivC .iv-ask-btn .q { font-family:"Songti SC",Georgia,serif; }

  /* ── 常驻「问它…」输入条 · 贴在文档底部，样子跟版式走 ──
     wrapper 带着版式 class（index.html 的 ivAskBar），所以 --bg2/--ink2/--rule2
     和字体都到得了它；按钮和每一节的追问 pill 同源（描边 + 版式强调色）。
     min-height 归零：版式 class 自带 min-height:100%，那是给文档正文的。 */
  .iv-askbar { min-height:0 !important; padding:10px 20px 12px; border-top:1px solid var(--rule2);
    background:color-mix(in srgb, var(--bg2) 94%, transparent);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
  .iv-askbar form { display:flex; gap:10px; align-items:stretch; max-width:760px; margin:0 auto; }
  .iv-askbar input { flex:1; min-width:0; font:inherit; font-size:15px; line-height:1.4; padding:10px 14px;
    border:1px solid var(--rule2); border-radius:4px; background:color-mix(in srgb, var(--bg2) 60%, transparent);
    color:var(--ink2); outline:none; }
  .iv-askbar input::placeholder { color:var(--soft2, currentColor); opacity:.7; }
  .iv-askbar input:focus { border-color:var(--acc2); }
  .iv-askbar button { flex:0 0 auto; cursor:pointer; padding:0 16px; border-radius:999px;
    border:1px solid currentColor; background:none; color:var(--acc2); font-size:13px; font-weight:600;
    font-family:system-ui,"PingFang SC",sans-serif; }
  .iv-askbar button:hover { background:var(--acc2); color:var(--bg2); }
  .ivD.iv-askbar .w, .ivD.iv-askbar form { max-width:900px; }
  .ivD.iv-askbar input { background:var(--panel2); }
  .ivP.iv-askbar form { max-width:1000px; }
  .ivP.iv-askbar input { border-radius:0; }
  .ivP.iv-askbar button { color:var(--blue2); border-radius:0; }
  .ivP.iv-askbar button:hover { background:var(--blue2); color:var(--bg2); }
  .ivC.iv-askbar { background:color-mix(in srgb, var(--man2) 94%, transparent); }
  .ivC.iv-askbar form { max-width:1000px; }
  .ivC.iv-askbar input { background:var(--card2); border-color:#BFB392; }
  .ivC.iv-askbar button { color:var(--red2); }
  .ivC.iv-askbar button:hover { background:var(--red2); color:var(--card2); }

  @container iv (max-width:700px) {
    .ivD .face { grid-template-columns:1fr; }
    .ivD .grid { grid-template-columns:1fr; }
    .ivC .cards { grid-template-columns:1fr; }
    .ivP .band > div { border-right:0; border-bottom:1px solid var(--rule2); }
  }