/* ============================================================================
 * wb-calc.css —— 「并排计算器组」版式（日常计算台 / 出行计算台共用）
 * ----------------------------------------------------------------------------
 * 为什么单独一个文件，而不是塞进 wb-shell.css：
 *   外壳是「三栏流水线」的版式（左素材｜中主视图｜右配方），而这两个板块是
 *   「一屏铺开的卡片墙」——布局完全不同，硬塞只会让两边都长出一堆例外。
 *   共用的是**设计变量与按钮/输入框手感**（都来自 wb-shell.css），不是布局。
 *
 * 形态参考 Omni Calculator / RapidTables，但去掉它们的两个毛病：
 *   ① 不要「Calculate」按钮 —— 输入即算，省一次点击；
 *   ② 结果下面永远给一行「怎么算出来的」，不让人盲信一个数字。
 * ========================================================================== */

.wb-cb-body{flex:1;overflow:auto;min-height:0;padding:16px}
.wb-cb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;align-items:start}

/* ---------- 卡片 ---------- */
.wb-cb{background:var(--wb-surface);border:1px solid var(--wb-line2);border-radius:12px;padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.wb-cb:hover{border-color:#D8CDBE}
.wb-cb-h{display:flex;align-items:baseline;gap:8px}
.wb-cb-h b{font-size:14px;font-weight:650;color:var(--wb-ink)}
.wb-cb-h .sp{flex:1}
.wb-cb-tag{font-size:12px;color:var(--wb-ink3);border:1px solid var(--wb-line);border-radius:999px;padding:1px 7px}

/* 输入区：窄字段并排，宽字段（多行）独占一行 */
.wb-cb-in{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px 10px}
.wb-cb-in .wide{grid-column:1/-1}
.wb-cb-f{display:flex;flex-direction:column;gap:4px;min-width:0}
.wb-cb-f > span{font-size:12px;color:var(--wb-ink3)}
.wb-cb-f input,
.wb-cb-f select,
.wb-cb-f textarea{
  height:32px;padding:0 8px;border:1px solid var(--wb-line);border-radius:8px;background:var(--wb-bg);
  color:var(--wb-ink);font:inherit;min-width:0;width:100%;box-sizing:border-box
}
.wb-cb-f textarea{height:66px;padding:6px 8px;resize:vertical;line-height:1.5;font-family:ui-monospace,Consolas,monospace}
.wb-cb-f input:focus,
.wb-cb-f select:focus,
.wb-cb-f textarea:focus{outline:none;border-color:var(--brand)}
.wb-cb-f .num-out{font-variant-numeric:tabular-nums}

/* ---------- 结果 ---------- */
.wb-cb-out{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding-top:2px;border-top:1px dashed var(--wb-line);margin-top:2px;padding-top:10px}
.wb-cb-big{font-size:28px;line-height:1.1;font-weight:700;color:var(--wb-ink);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.wb-cb-unit{font-size:13px;color:var(--wb-ink2)}
.wb-cb-out .sp{flex:1}
.wb-cb-tone{font-size:12px;border-radius:999px;padding:2px 8px;white-space:nowrap}
.wb-cb-tone.ok{color:var(--wb-ok);background:var(--wb-ok50)}
.wb-cb-tone.warn{color:var(--wb-warn);background:var(--wb-warn50)}
.wb-cb-tone.risk{color:var(--wb-danger);background:var(--wb-danger50)}
.wb-cb-note{font-size:12px;line-height:1.65;color:var(--wb-ink3);word-break:break-word}
.wb-cb-hint{font-size:12px;line-height:1.65;color:var(--wb-ink3);opacity:.9;border-left:2px solid var(--wb-line);padding-left:8px}

/* ---------- 图形件 1：区间刻度（BMI） ---------- */
.wb-scale{position:relative;height:26px;border-radius:6px;overflow:hidden;background:var(--wb-line2);display:flex}
.wb-scale i{display:block;height:100%}
.wb-scale .s-warn{background:#F3D9A4}
.wb-scale .s-ok{background:#BFE3C6}
.wb-scale .s-risk{background:#F0BDB9}
.wb-scale u{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--wb-ink);border-radius:1px}
.wb-scale u::after{content:'';position:absolute;top:-4px;left:-3px;border:4px solid transparent;border-top-color:var(--wb-ink)}
.wb-scale-ax{display:flex;justify-content:space-between;font-size:10px;color:var(--wb-ink3);margin-top:3px}

/* ---------- 图形件 2：堆叠条（房贷本金/利息、复利本金/收益） ---------- */
.wb-stack{height:14px;border-radius:7px;overflow:hidden;display:flex;background:var(--wb-line2)}
.wb-stack i{display:block;height:100%}
.wb-stack .s-ok{background:#8FC7A0}
.wb-stack .s-risk{background:#E3A29C}
.wb-stack-lg{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:12px;color:var(--wb-ink2);margin-top:5px}
.wb-stack-lg .sw{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:5px;vertical-align:0}
.wb-stack-lg b{font-variant-numeric:tabular-nums;color:var(--wb-ink);font-weight:600;margin-left:5px}

/* ---------- 图形件 3：环形（百分比 / TOTP 倒计时 / 签证额度） ---------- */
.wb-dial-wrap{display:flex;align-items:center;gap:12px}
.wb-dial{flex:none}
.wb-dial-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.wb-dial-t b{font-size:16px;font-variant-numeric:tabular-nums;color:var(--wb-ink)}
.wb-dial-t span{font-size:12px;color:var(--wb-ink3)}

/* ---------- 图形件 4：24 小时刻度带（时区） ---------- */
.wb-band{position:relative;height:30px;border-radius:6px;background:var(--wb-line2);overflow:hidden}
.wb-band .work{position:absolute;top:0;bottom:0;background:#CFE6D4}
.wb-band .tick{position:absolute;top:0;bottom:0;width:1px;background:var(--wb-line)}
.wb-band .now{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--brand);border-radius:1px}
.wb-band .now b{position:absolute;top:-2px;left:4px;font-size:10px;color:var(--brand);white-space:nowrap;font-weight:650}
.wb-band-ax{display:flex;justify-content:space-between;font-size:10px;color:var(--wb-ink3);margin-top:3px}

/* ---------- 图形件 5：分项条（账单分摊） ---------- */
.wb-bars{display:flex;flex-direction:column;gap:5px}
.wb-bars .r{display:grid;grid-template-columns:34px 1fr 74px;gap:8px;align-items:center;font-size:12px;color:var(--wb-ink2)}
.wb-bars .r .t{height:10px;border-radius:5px;background:var(--wb-line2);overflow:hidden}
.wb-bars .r .t i{display:block;height:100%;background:var(--brand);opacity:.75}
.wb-bars .r b{text-align:right;font-variant-numeric:tabular-nums;color:var(--wb-ink);font-weight:600}

/* ---------- 二维码 ---------- */
.wb-qr{display:flex;gap:12px;align-items:flex-start}
.wb-qr img{width:120px;height:120px;border:1px solid var(--wb-line2);border-radius:8px;background:#fff;flex:none}
.wb-qr code{flex:1;font:11px/1.6 ui-monospace,Consolas,monospace;color:var(--wb-ink2);word-break:break-all;background:var(--wb-bg);border:1px solid var(--wb-line2);border-radius:8px;padding:8px}

/* ---------- 窄屏 ---------- */
@media (max-width:760px){
  .wb-cb-body{padding:12px}
  .wb-cb-grid{grid-template-columns:1fr}
}