/* XZ RAID 容量与重建时间计算器 —— 前端样式
   由 staging/raid-calculator/raid-calculator.fragment.html 自动拆分生成，
   **不要直接改这个文件**。改样式请改片段，然后跑: python tools\build_raid_page.py
   设计令牌对齐站内样式基准（public-ip-check / .xzip），见 docs/tool-style-baseline.md */

/* ── 控件根：居中限宽 + 盒模型复位 + 不覆盖站点字体 ──
   令牌取自 docs/tool-style-baseline.md 第 2 节（与基准页 .xzip 同值） */
.xzrd{
  --xzrd-ink:#0f172a; --xzrd-ink2:#64748b; --xzrd-ink3:#94a3b8; --xzrd-ink4:#b9c2cf;
  --xzrd-line:#e6eaf2; --xzrd-divider:#eef2f7; --xzrd-soft:#f1f5f9;
  --xzrd-brand:#2f6bff; --xzrd-off:#94a3b8;
  --xzrd-ok:#16a34a; --xzrd-warn:#f59e0b; --xzrd-warn-ink:#d97706; --xzrd-bad:#dc2626;
  --xzrd-idle:#cbd5e1;
  --xzrd-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  box-sizing:border-box;
  max-width:min(760px,100%);   /* ④ 居中限宽 */
  margin:8px auto 4px;
  font-family:inherit;         /* ③ 不覆盖站点字体 */
  color:var(--xzrd-ink);
}
.xzrd,.xzrd *,.xzrd *::before,.xzrd *::after{box-sizing:border-box}   /* ① 盒模型复位 */

/* ── 外层卡片 ── */
.xzrd .xz-card{
  border:1px solid var(--xzrd-line); border-radius:20px; padding:26px 22px;
  background:linear-gradient(180deg,#fbfcff,#fff);
}
.xzrd h3{margin:0 0 6px; font-size:20px; font-weight:600; line-height:1.4; font-family:inherit; color:var(--xzrd-ink)}
/* ② 干掉主题的装饰字符：Sakurairo 给 h3→"#"、h4→">"、h5→"~"，h3~h5 必须全列 */
.xzrd h1::before,.xzrd h1::after,
.xzrd h2::before,.xzrd h2::after,
.xzrd h3::before,.xzrd h3::after,
.xzrd h4::before,.xzrd h4::after,
.xzrd h5::before,.xzrd h5::after,
.xzrd h6::before,.xzrd h6::after{content:none !important; display:none !important}
.xzrd .xz-sub{
  margin:0 auto 18px; max-width:596px;
  font-size:14px; line-height:1.85; color:var(--xzrd-ink2);
}

/* ── 分区（输入 / 结果 / 重建 / 口径 / 对照表） ── */
.xzrd .xzrd-sec{
  border:1px solid var(--xzrd-line); border-radius:16px; padding:16px 18px;
  background:#fff; margin-top:14px;
}
.xzrd .xzrd-sec-t{
  display:flex; align-items:center; gap:8px; margin:0 0 12px;
  font-size:15px; font-weight:600; line-height:1.5; color:var(--xzrd-ink);
}
.xzrd .xzrd-sec-t i{
  width:4px; height:15px; border-radius:2px; flex:0 0 4px;
  background:var(--xzrd-brand);
}
.xzrd .xzrd-sub-t{
  margin:14px 0 4px; font-size:13px; font-weight:600; line-height:1.6; color:var(--xzrd-ink);
}

/* ── 输入区 ── */
.xzrd .xzrd-lab{margin:0 0 8px; font-size:12.5px; line-height:1.6; color:var(--xzrd-ink2)}
.xzrd .xzrd-seg{display:flex; flex-wrap:wrap; gap:8px}
.xzrd .xzrd-seg button{
  appearance:none; font-family:inherit; font-size:13.4px; font-weight:600; line-height:1.4;
  cursor:pointer; padding:8px 15px; border-radius:999px; color:var(--xzrd-ink2);
  background:#fff; border:1px solid var(--xzrd-line); text-shadow:none; transition:.18s;
}
.xzrd .xzrd-seg button:hover{border-color:#cbd5e1; transform:translateY(-1px)}
.xzrd .xzrd-seg button.is-on{color:#fff; background:var(--xzrd-brand); border-color:var(--xzrd-brand)}
.xzrd .xzrd-hint{margin:9px 0 0; font-size:12.5px; line-height:1.7; color:var(--xzrd-ink3)}
.xzrd .xzrd-fields{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px}
.xzrd .xzrd-f{display:flex; flex-direction:column; gap:6px; min-width:0}
.xzrd .xzrd-f > span{font-size:12.5px; line-height:1.5; color:var(--xzrd-ink2)}
.xzrd .xzrd-f input,.xzrd .xzrd-f select{
  font-family:inherit; font-size:14.5px; line-height:1.5; color:var(--xzrd-ink);
  background:#fff; border:1px solid var(--xzrd-line); border-radius:12px;
  padding:9px 12px; width:100%; min-width:0; text-shadow:none;
}
.xzrd .xzrd-f input:focus,.xzrd .xzrd-f select:focus{
  outline:none; border-color:var(--xzrd-brand); box-shadow:0 0 0 3px rgba(47,107,255,.13);
}
.xzrd .xzrd-f-cap{display:flex; gap:8px}
.xzrd .xzrd-f-cap input{flex:1 1 auto; min-width:0}
.xzrd .xzrd-f-cap select{flex:0 0 190px}
.xzrd .xzrd-f > span b{color:var(--xzrd-ink3); font-weight:400}

/* ── 折叠区（高级假设）——Sakurairo 会把 details/summary 改成弹性盒，必须拉回来 ── */
.xzrd details.xzrd-fold{
  display:block !important; width:100% !important;
  border:1px solid var(--xzrd-line); border-radius:14px; padding:12px 15px;
  background:var(--xzrd-soft); margin:14px 0 0;
}
.xzrd details.xzrd-fold > summary{
  display:block !important; width:auto !important; float:none !important;
  text-align:left !important; list-style:none !important;
  cursor:pointer; font-size:13.4px; font-weight:600; color:var(--xzrd-ink);
  position:relative; padding:0 26px 0 0; margin:0; line-height:1.6;
}
.xzrd details.xzrd-fold > summary::-webkit-details-marker{display:none !important}
.xzrd details.xzrd-fold > summary::marker{content:none !important}
.xzrd details.xzrd-fold > summary::after{
  content:"+" !important; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-size:18px; font-weight:400; color:var(--xzrd-ink3); line-height:1;
}
.xzrd details.xzrd-fold[open] > summary::after{content:"−" !important}

/* ── 指标小框 ── */
.xzrd .xz-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.xzrd .xz-grid-box{grid-auto-rows:104px}
.xzrd .xz-box{
  border:1px solid var(--xzrd-line); border-radius:16px; padding:13px 17px; background:#fff;
  display:flex; flex-direction:column; justify-content:center; overflow:hidden;
}
.xzrd .xz-box-t{
  font-size:12.4px; line-height:1.5; color:var(--xzrd-ink2); margin-bottom:5px;
  flex:0 0 auto; display:flex; align-items:center; gap:6px;
}
.xzrd .xz-box-v{
  font-size:17px; font-weight:600; line-height:1.4; color:var(--xzrd-ink);
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.xzrd .xz-box-v.none{font-size:15px; font-weight:400; color:var(--xzrd-ink3)}
.xzrd .xz-box-n{
  margin-top:3px; font-size:12px; line-height:1.55; color:var(--xzrd-ink3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.xzrd .xz-dot{
  width:8px; height:8px; border-radius:50%; flex:0 0 8px;
  background:var(--xzrd-idle); display:inline-block;
}
.xzrd .xz-dot.ok{background:var(--xzrd-ok)}
.xzrd .xz-dot.warn{background:var(--xzrd-warn)}
.xzrd .xz-dot.bad{background:var(--xzrd-bad)}

/* ── 键值行 ── */
.xzrd .xzrd-rows{border:1px solid var(--xzrd-line); border-radius:16px; background:#fff; padding:6px 15px}
.xzrd .xzrd-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:8px 0; border-top:1px solid var(--xzrd-divider);
}
.xzrd .xzrd-row:first-child{border-top:0}
.xzrd .xzrd-row-k{font-size:12.8px; line-height:1.7; color:var(--xzrd-ink2); flex:0 0 auto}
.xzrd .xzrd-row-v{
  font-size:14px; font-weight:600; line-height:1.6; color:var(--xzrd-ink);
  font-variant-numeric:tabular-nums; text-align:right;
}
.xzrd .xzrd-row-v.xzrd-row-n{font-size:12.6px; font-weight:400; color:var(--xzrd-ink3); text-align:right; max-width:64%}
.xzrd .xzrd-row-v.xzrd-ok{color:var(--xzrd-ok)}
.xzrd .xzrd-row-v.xzrd-warn2{color:var(--xzrd-warn-ink)}
.xzrd .xzrd-row-v.xzrd-bad2{color:var(--xzrd-bad)}

/* ── URE 概率条 ── */
.xzrd .xzrd-ure{display:flex; align-items:center; gap:10px; padding:5px 0}
.xzrd .xzrd-ure-k{flex:0 0 120px; font-size:12.3px; line-height:1.5; color:var(--xzrd-ink2)}
.xzrd .xzrd-ure-bar{flex:1 1 auto; height:8px; border-radius:99px; background:var(--xzrd-soft); overflow:hidden; min-width:40px}
.xzrd .xzrd-ure-bar i{display:block; height:100%; border-radius:99px; background:var(--xzrd-warn); width:0}
.xzrd .xzrd-ure-bar i.lv-bad{background:var(--xzrd-bad)}
.xzrd .xzrd-ure-bar i.lv-ok{background:var(--xzrd-ok)}
.xzrd .xzrd-ure-v{
  flex:0 0 58px; text-align:right; font-size:13px; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--xzrd-ink);
}
.xzrd .xzrd-ure-v.lv-bad{color:var(--xzrd-bad)}
.xzrd .xzrd-ure-v.lv-ok{color:var(--xzrd-ok)}

/* ── 提示条（错误 / 风险提醒） ── */
.xzrd .xzrd-err,.xzrd .xzrd-warn{
  margin:12px 0 0; padding:11px 14px; border-radius:12px;
  font-size:13.2px; line-height:1.75;
}
.xzrd .xzrd-err{border:1px solid #fecaca; background:#fff5f5; color:var(--xzrd-bad)}
.xzrd .xzrd-warn{border:1px solid #fde68a; background:#fffbeb; color:#b45309}
.xzrd .xzrd-err.is-off,.xzrd .xzrd-warn.is-off{display:none !important}
/* 隐藏用类，不用属性选择器：主题注册过与「隐藏内容」同名的短代码，会把这类属性选择器替换掉 */
.xzrd .is-off{display:none !important}

/* ── 操作区 ── */
.xzrd .xz-act{text-align:center; margin-top:16px}
.xzrd .xz-btn{
  display:inline-block; cursor:pointer; border:0; padding:12px 34px; border-radius:999px;
  font-family:inherit; font-size:15px; font-weight:600; color:#fff;
  background:var(--xzrd-brand); text-shadow:none; transition:.2s;
}
.xzrd .xz-btn:hover{transform:translateY(-1px)}
.xzrd .xz-btn[disabled]{background:var(--xzrd-off); cursor:default; transform:none}

/* ── 级别对照表 ── */
.xzrd table.xzrd-tbl{width:100%; border-collapse:collapse; font-size:12.7px; color:var(--xzrd-ink)}
.xzrd table.xzrd-tbl th,.xzrd table.xzrd-tbl td{
  border:1px solid var(--xzrd-line); padding:8px 10px; text-align:left;
  vertical-align:top; line-height:1.6;
}
.xzrd table.xzrd-tbl th{
  background:var(--xzrd-soft); color:var(--xzrd-ink2); font-weight:600; font-size:12.3px; white-space:nowrap;
}
.xzrd table.xzrd-tbl td{color:var(--xzrd-ink2)}
.xzrd table.xzrd-tbl td:first-child{color:var(--xzrd-ink); font-weight:600; white-space:nowrap}
.xzrd table.xzrd-tbl td.xzrd-tbl-num{font-variant-numeric:tabular-nums; white-space:nowrap}

/* ── 脚注 ── */
.xzrd .xz-note{margin:14px auto 0; font-size:12px; color:var(--xzrd-ink3); line-height:1.8; text-align:center}

/* ── 响应式（唯一断点 640px，与基准一致） ── */
@media (max-width:640px){
  .xzrd .xz-sub{max-width:none}
  .xzrd .xz-grid{grid-template-columns:1fr}
  .xzrd .xz-grid-box{grid-auto-rows:auto}
  .xzrd .xz-box{padding:12px 15px}
  .xzrd .xzrd-fields{grid-template-columns:1fr}
  .xzrd .xzrd-f-cap select{flex:0 0 150px}
  .xzrd .xzrd-sec{padding:14px 14px}
  .xzrd .xzrd-row{flex-direction:column; align-items:flex-start; gap:2px}
  .xzrd .xzrd-row-v,.xzrd .xzrd-row-v.xzrd-row-n{text-align:left; max-width:none}
  .xzrd .xzrd-ure{flex-wrap:wrap}
  .xzrd .xzrd-ure-k{flex:0 0 100%}
  /* 对照表在窄屏改成一张张卡片，避免横向滚动；每个 td 上的 data-l 就是这里用的列名 */
  .xzrd table.xzrd-tbl thead{display:none}
  .xzrd table.xzrd-tbl,.xzrd table.xzrd-tbl tbody,.xzrd table.xzrd-tbl tr,.xzrd table.xzrd-tbl td{display:block; width:100%}
  .xzrd table.xzrd-tbl tr{border:1px solid var(--xzrd-line); border-radius:12px; margin-bottom:10px; padding:7px 12px}
  .xzrd table.xzrd-tbl td{border:0; padding:3px 0; display:flex; gap:10px}
  .xzrd table.xzrd-tbl td::before{
    content:attr(data-l); flex:0 0 72px; color:var(--xzrd-ink3); font-size:12.2px; font-weight:400;
  }
  .xzrd table.xzrd-tbl td:first-child{font-size:13.4px}
}