/* 通风系统图样板（图纸模板库 · 第一张试样），作用域 .tool-root.tool-vent
   设计原则：屏幕上是图纸，打印就是 A3 横向；不引第三方库，纯 CSS + 内联 SVG。 */

.tool-vent{
  --vt-line:#1f2937;
  --vt-line-2:#334155;
  --vt-grid:#e2e8f0;
  --vt-ex:#b45309;          /* 排风 */
  --vt-sup:#1d4ed8;         /* 补风 */
  --vt-mute:#64748b;
  --vt-paper:#fff;
  --vt-paper-2:#fbfcfd;
  background:var(--bg-subtle);
  color:var(--text);
  font:14.5px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
.tool-vent,.tool-vent *{box-sizing:border-box}
.tool-vent .container{max-width:1400px;margin:0 auto;padding:0 20px}

/* 页头 */
.tool-vent .tool-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:34px 2px 12px}
.tool-vent .tool-head h1{font-size:20px;margin:0;font-weight:650;letter-spacing:.2px}
.tool-vent .tool-head .sub{color:var(--text-faint);font-size:12.5px}
.tool-vent .tool-head .badge{margin-left:auto;font-size:12px;color:var(--brand);background:var(--brand-soft);border:1px solid color-mix(in srgb,var(--brand) 22%,transparent);border-radius:999px;padding:2px 10px}

/* 页签 */
.tool-vent .tabs{display:flex;gap:6px;flex-wrap:wrap;padding:0 2px 12px;border-bottom:1px solid var(--border)}
.tool-vent .tabs button{
  font:inherit;font-size:13px;padding:7px 13px;border:1px solid var(--border);background:var(--bg-elevated);
  color:var(--text-soft);border-radius:8px;cursor:pointer;display:flex;gap:7px;align-items:center
}
.tool-vent .tabs button .no{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:var(--text-faint)}
.tool-vent .tabs button[aria-selected="true"]{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);font-weight:600}
.tool-vent .tabs button[aria-selected="true"] .no{color:var(--brand)}
.tool-vent .tabs .spacer{margin-left:auto;display:flex;gap:6px;align-items:center}
.tool-vent .tabs .spacer button{font-size:12.5px}
.tool-vent .tabs .spacer .tip{font-size:11.5px;color:var(--text-faint);margin-right:4px}

/* 图纸 */
.tool-vent .sheet-wrap{padding:16px 2px 40px}
.tool-vent .sheet{
  display:none;background:var(--vt-paper);border:1.5px solid var(--vt-line);
  box-shadow:0 1px 2px rgba(15,23,42,.06),0 12px 32px -18px rgba(15,23,42,.28);
  padding:14px 16px 0;
}
.tool-vent .sheet.on{display:block!important;border:1.2px solid #000;box-shadow:none;padding:4mm 4mm 0;width:290mm;margin:0 auto}
.tool-vent .sheet-canvas{position:relative;background:var(--vt-paper)}
.tool-vent .sheet-canvas svg{display:block;width:100%;height:auto}
/* 图幅角标 */
.tool-vent .sheet::before{
  content:"A3 420×297　横　1:100";position:absolute;right:20px;bottom:calc(100% + 4px);
  font-size:11px;color:var(--text-faint)
}
.tool-vent .sheet{position:relative}
.tool-vent #s1::before{content:"A3 420×297　横　1:100"}
.tool-vent #s2::before{content:"A3 420×297　横　示意（不按比例）"}
.tool-vent #s3::before{content:"A3 420×297　横　图例与图层（表格页）"}
.tool-vent #s4::before{content:"A3 420×297　横　设备表与规则（表格页）"}

/* 图签 */
.tool-vent .sheet-foot{display:flex;gap:14px;align-items:flex-end;padding:10px 0 12px;border-top:1px solid var(--vt-line);margin-top:8px}
.tool-vent .sheet-note{flex:1;min-width:0;font-size:11.5px;line-height:1.7;color:var(--vt-mute)}
.tool-vent .sheet-note b{color:var(--vt-line-2)}
.tool-vent .sheet-note ol{margin:2px 0 0 16px;padding:0}
.tool-vent .tb{border:1.2px solid var(--vt-line);border-collapse:collapse;font-size:11px;flex:0 0 auto}
.tool-vent .tb td{border:.6px solid var(--vt-line);padding:3px 7px;color:var(--vt-line-2)}
.tool-vent .tb .k{background:var(--vt-paper-2);color:var(--vt-mute);white-space:nowrap}
.tool-vent .tb .v{font-weight:600;color:var(--vt-line)}
.tool-vent .tb .t{font-size:12.5px;font-weight:700;letter-spacing:.4px}

/* 图例 / 表格类页面 */
.tool-vent .grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:980px){.tool-vent .grid2{grid-template-columns:1fr}}
.tool-vent h3.sec{font-size:13.5px;margin:20px 0 8px;font-weight:650;color:var(--vt-line);display:flex;align-items:center;gap:8px}
.tool-vent h3.sec .n{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:var(--brand);background:var(--brand-soft);border-radius:4px;padding:1px 6px}
.tool-vent table.dt{width:100%;border-collapse:collapse;font-size:12.5px;background:#fff;border:1px solid var(--border)}
.tool-vent table.dt th{background:var(--vt-paper-2);font-weight:600;color:var(--vt-line-2);text-align:left;padding:6px 9px;border:1px solid var(--border);font-size:12px;white-space:nowrap}
.tool-vent table.dt td{padding:5px 9px;border:1px solid var(--border);color:var(--vt-line-2);vertical-align:top}
.tool-vent table.dt td.num{font-family:ui-monospace,Consolas,monospace;text-align:right;white-space:nowrap}
.tool-vent table.dt tr.sum td{background:#fffdf6;font-weight:600}
.tool-vent table.dt td.fill{background:#fcfcfd;color:#cbd5e1}
.tool-vent .sw{display:inline-block;width:26px;height:0;border-top-width:3px;vertical-align:middle;margin-right:6px}
.tool-vent .mono{font-family:ui-monospace,Consolas,monospace;font-size:12px;color:var(--vt-line-2)}
.tool-vent .tagline{font-size:11.5px;color:var(--text-faint);margin:-2px 0 10px}
.tool-vent ol.rules{margin:0;padding-left:20px;font-size:13px;line-height:1.85;color:var(--vt-line-2)}
.tool-vent ol.rules b{color:var(--vt-line)}
.tool-vent .warn{background:#fffdf6;border:1px solid #f2e2bd;border-left:3px solid #d97706;border-radius:6px;padding:9px 12px;font-size:12.5px;color:#7c4a03;margin:10px 0}
.tool-vent .warn b{color:#92400e}

/* 手机 / 窄屏：图幅不再钉死 290mm（会撑出横向滚动条把整页压扁），
   改成按容器宽度排版，图幅内容保持 760px 可读宽度，超出的部分在图纸内左右滑动 */
@media (max-width:1100px){
  .tool-vent .container{padding:0 14px}
  .tool-vent .tool-head{padding:20px 2px 10px;gap:6px}
  .tool-vent .tool-head h1{font-size:18px}
  .tool-vent .tool-head .badge{margin-left:0}
  .tool-vent .tabs{padding-bottom:10px}
  .tool-vent .tabs button{font-size:12.5px;padding:6px 10px}
  .tool-vent .tabs .spacer{margin-left:0;width:100%;justify-content:space-between}
  .tool-vent .tabs .spacer .tip{display:none}

  .tool-vent .sheet-wrap{padding:12px 0 32px}
  .tool-vent .sheet.on{
    width:auto;
    margin:0 2px;
    padding:10px 10px 0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  /* 图纸与图签统一按可读宽度排版，随图纸一起横向滑动 */
  .tool-vent .sheet.on > .sheet-canvas,
  .tool-vent .sheet.on > .sheet-foot{min-width:720px}
  /* 图幅角标挂在图框外面，滑动容器会裁掉它，窄屏直接不显示 */
  .tool-vent .sheet::before{display:none}
  .tool-vent .sheet-foot{flex-wrap:nowrap}
  .tool-vent .tb{font-size:10.5px}
}

/* 滑动提示：只在能滑动的时候有意义，桌面端不显示 */
.tool-vent .pan-hint{display:none}
@media (max-width:1100px){
  .tool-vent .pan-hint{
    display:flex;align-items:center;gap:6px;margin:10px 2px 0;
    font-size:12px;color:var(--text-faint)
  }
  .tool-vent .pan-hint .icon{width:14px;height:14px}
  /* 图幅能整张放下时由脚本加 hidden，别让提示白占一行 */
  .tool-vent .pan-hint[hidden]{display:none}
}

/* 打印：每张图一页 A3 横向 */
@media print{
  @page{size:A3 landscape;margin:8mm}
  .tool-vent .tabs,.tool-vent .tool-head,.site-header,.site-footer,.foot-nav,nav,footer{display:none!important}
  .tool-vent{background:#fff}
  html,body{margin:0!important;padding:0!important;background:#fff}
  .tool-vent .container{max-width:none;padding:0;margin:0}
  .tool-vent .sheet-wrap{padding:0}
  /* 一次只打印当前图幅：图幅内内容统一缩放到一页 A3，不跨页断开 */
  .tool-vent .sheet{display:none!important}
  .tool-vent .sheet.on{display:block!important;border:1.2px solid #000;box-shadow:none;padding:4mm 4mm 0;width:290mm;margin:0 auto}
      .tool-vent #s3.on{width:280mm}
  .tool-vent #s4.on{width:280mm}

  .tool-vent .sheet::before{display:none}
  .tool-vent table.dt,.tool-vent .tb{font-size:9pt}
}