/* rex/crm/lib/checkup-visuals.css — 保單健診三個視覺元件（樣式移植自 rex/A&H/index.html 簡易卡／走勢圖）
   @version 4.989.16
   色彩走頁面既有 token（--card/--ink/--mut/--border-soft/--acc），缺值時退回 assets/design-tokens.css 的 canonical 名稱。 */
.cv-bwrap,.cv-trend{--cv-card:var(--card,#fff);--cv-ink:var(--ink,#1e293b);--cv-mut:var(--mut,var(--ink-mut,#64748b));--cv-bd:var(--border-soft,#e2e8f0);--cv-acc:var(--acc,#4338ca);--cv-soft:rgba(100,116,139,.08);}
.cv-seg{display:inline-flex;gap:4px;padding:3px;border:1px solid var(--cv-bd);border-radius:10px;background:var(--cv-card);margin-bottom:8px}
.cv-segb{border:0;background:transparent;color:var(--cv-mut);font:inherit;font-size:13px;font-weight:700;padding:6px 14px;border-radius:7px;cursor:pointer}
.cv-segb.on{background:var(--cv-acc);color:#fff}
.cv-note,.cv-hint,.cv-foot{font-size:12px;color:var(--cv-mut);line-height:1.6;margin:4px 0 12px}
.cv-foot{margin-top:12px}
.cv-empty{font-size:13px;color:var(--cv-mut);padding:8px 0}
.cv-pend{font-size:11.5px;color:var(--cv-mut);margin-top:8px}

/* ── ① 簡易卡 ── */
.cv-simple{display:grid;grid-template-columns:1fr;gap:12px}
.cv-cat{background:var(--cv-soft);border-left:3px solid #B8C5D1;border-radius:12px;padding:14px 14px 16px}
.cv-cat-h{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cv-cat-ic{font-size:20px;opacity:.85}
.cv-cat-t{font-size:15px;font-weight:800;color:var(--cv-ink);letter-spacing:1px}
.cv-sub+.cv-sub{margin-top:14px}
.cv-subt{display:inline-block;font-size:11px;font-weight:700;color:#6B7C8A;background:#E8EEF3;border-radius:4px;padding:3px 10px;margin-bottom:8px;letter-spacing:1px}
.cv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.cv-card{position:relative;background:var(--cv-card);border-radius:8px;padding:14px 10px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px;box-shadow:0 1px 3px rgba(20,40,60,.06);transition:box-shadow .2s,transform .15s}
.cv-card:hover{box-shadow:0 4px 12px rgba(20,40,60,.1);transform:translateY(-1px)}
.cv-ic{font-size:22px;line-height:1;opacity:.75}
.cv-t{font-size:11.5px;font-weight:700;color:var(--cv-ink)}
.cv-v{font-size:19px;font-weight:700;color:var(--cv-ink);font-variant-numeric:tabular-nums;line-height:1.15;margin-top:2px}
.cv-u{font-size:12px;color:#8895A2;font-weight:500;margin-left:3px}
.cv-ded{font-size:10px;color:#8895A2}
.cv-chips{display:flex;flex-wrap:wrap;gap:3px;justify-content:center;margin-top:6px}
.cv-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px 2px 6px;border-radius:3px;background:#F2F5F8;color:#6B7C8A;font-size:9.5px;font-weight:600;letter-spacing:.5px}
.cv-chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--cv-co,#B8C5D1)}
.cv-card.has-tip{cursor:help}
.cv-card.has-tip::after{content:"ⓘ";position:absolute;top:6px;right:8px;font-size:11px;color:#B8C5D1}
.cv-card.has-tip::before{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(calc(-50% + var(--tip-dx,0px)));box-sizing:border-box;background:rgba(13,42,58,.95);color:#fff;font-size:11px;font-weight:500;padding:8px 12px;border-radius:8px;width:max-content;max-width:min(320px,90vw);white-space:normal;word-break:break-word;text-align:left;line-height:1.6;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s;z-index:9999;box-shadow:0 6px 18px rgba(0,0,0,.22)}
.cv-card.has-tip:hover,.cv-card.has-tip:focus{z-index:9999}
.cv-card.has-tip:hover::before,.cv-card.has-tip:focus::before{opacity:1;visibility:visible}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .cv-subt,:root:not([data-theme=light]) .cv-chip{background:#334155;color:#cbd5e1}}
[data-theme=dark] .cv-subt,[data-theme=dark] .cv-chip{background:#334155;color:#cbd5e1}

/* ── ② 人形圖：A&H HMAP_STYLE 是淺色設計稿，深色模式下也維持白底 ── */
.cv-figwrap{background:#fff;border-radius:12px;padding:8px 0;overflow-x:auto}

/* ── ③ 保費走勢圖 ── */
.cv-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:8px}
.cv-lbl{font-size:12px;color:var(--cv-mut);font-weight:700}
.cv-div{width:1px;height:18px;background:var(--cv-bd);margin:0 4px}
.cv-tg,.cv-pre{border:1px solid var(--cv-bd);background:var(--cv-card);color:var(--cv-ink);font:inherit;font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px;cursor:pointer}
.cv-tg.on,.cv-pre.on{background:var(--cv-acc);border-color:var(--cv-acc);color:#fff}
.cv-pre{font-size:11.5px;padding:4px 10px}
.cv-rng{display:inline-flex;flex-direction:column;width:180px;max-width:48vw}
.cv-slider{width:100%;accent-color:var(--cv-acc)}
.cv-ticks{display:flex;justify-content:space-between;font-size:10px;color:var(--cv-mut)}
.cv-rngv{font-size:12.5px;font-weight:800;color:var(--cv-acc)}
.cv-sw{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--cv-ink);cursor:pointer}
.cv-sw input{position:absolute;opacity:0;width:1px;height:1px}
.cv-swk{width:34px;height:20px;border-radius:10px;background:#cbd5e1;position:relative;transition:background .2s;flex:none}
.cv-swk::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .2s}
.cv-sw input:checked+.cv-swk{background:var(--cv-acc)}
.cv-sw input:checked+.cv-swk::after{left:16px}
.cv-sw input:focus-visible+.cv-swk{outline:2px solid var(--cv-acc);outline-offset:2px}
.cv-infbox{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px}
.cv-infr{width:60px;padding:4px 6px;border:1px solid var(--cv-bd);border-radius:6px;background:var(--cv-card);color:var(--cv-ink);font:inherit;font-size:12.5px}
.cv-src{font-size:10px;color:var(--cv-mut)}
.cv-chartwrap{position:relative;border:1px solid var(--cv-bd);border-radius:12px;background:var(--cv-card);padding:6px;touch-action:pan-y}
.cv-chart{display:block;width:100%;height:auto}
.cv-grid{stroke:var(--cv-bd);stroke-width:1}
.cv-ax{fill:var(--cv-mut);font-size:13px}
.cv-hl{stroke:var(--cv-mut);stroke-width:1;stroke-dasharray:4 3}
.cv-tt{position:absolute;pointer-events:none;background:rgba(13,42,58,.95);color:#fff;border-radius:8px;padding:8px 12px;font-size:12px;min-width:180px;max-width:min(300px,80vw);opacity:0;transition:opacity .12s;z-index:20;box-shadow:0 6px 18px rgba(0,0,0,.22)}
.cv-tt.show{opacity:1}
.cv-tt-h{font-weight:800;margin-bottom:4px}
.cv-tt-h small{opacity:.7;font-weight:500;margin-left:6px}
.cv-tt-r{display:flex;justify-content:space-between;gap:12px;line-height:1.7}
.cv-tt-r i,.cv-legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}
.cv-tt-tot{border-top:1px solid rgba(255,255,255,.2);margin-top:2px;padding-top:2px}
.cv-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--cv-ink);margin:8px 2px 0}
.cv-ytitle{font-size:14px;font-weight:800;color:var(--cv-ink);margin:16px 0 8px}
.cv-ygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px}
.cv-yc{border:1px solid var(--cv-bd);border-radius:8px;padding:6px 8px;text-align:center;background:var(--cv-card)}
.cv-yc.zero{opacity:.45}
.cv-ya{font-size:11px;color:var(--cv-mut)}
.cv-yf{font-size:14px;font-weight:800;color:var(--cv-ink);font-variant-numeric:tabular-nums}
.cv-yr{font-size:10.5px;color:#b45309}
.cv-yr em{font-style:normal;font-size:9.5px;opacity:.8}
@media (max-width:560px){
  .cv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cv-v{font-size:17px}
  .cv-ygrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cv-div{display:none}
  .cv-ax{font-size:22px}
}
@media print{
  .cv-card.has-tip::before,.cv-card.has-tip::after,.cv-tt{display:none!important}
  .cv-cat,.cv-card,.cv-yc{break-inside:avoid}
}