/* The portal's Home (web/merchant/home.js). Panels, metrics and tables are
   the shared ones in invoices.css; this adds the set-up guide, the chart,
   the balance card and the to-do rows. */
.hm{--hm-up:#12b76a;--hm-down:#f04438;--hm-amber:#f79009;--hm-track:#ececec}
.hm-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:16px}
.hm-head h2{margin:0 0 6px;font-size:24px;font-weight:600;letter-spacing:-.01em}
.hm-head .meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px;color:var(--subtle)}
.hm-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:2px 9px;border-radius:999px;white-space:nowrap;background:var(--surface-3);color:var(--muted)}
.hm-pill.good{background:var(--good-wash);color:var(--good)}
.hm-pill.warn{background:var(--warn-wash);color:var(--warn)}
.hm-pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.hm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:20px}
.hm-grid > .iv-panel{margin-bottom:0}
@media (max-width:1000px){.hm-grid{grid-template-columns:minmax(0,1fr)}}
.hm-card{padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-width:0;height:100%;box-sizing:border-box}
.hm-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hm-card-head h3{margin:0;font-size:14px;font-weight:600}
.hm-card-head .sub{font-size:12px;color:var(--subtle);margin-top:2px}
.hm-link{border:0;background:none;padding:0;font:500 12px var(--font-sans);color:var(--ink);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.hm-link:hover{text-decoration:underline}
/* set-up guide */
.hm-setup-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px;padding:16px 20px}
.hm-setup-head h3{margin:0 0 4px;font-size:15px;font-weight:600}
.hm-setup-head .sub{font-size:13px;color:var(--subtle)}
.hm-progress{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.hm-segs{display:flex;gap:4px}
.hm-segs i{width:22px;height:4px;border-radius:2px;background:var(--line)}
.hm-segs i.on{background:var(--ink)}
.hm-banner{display:flex;align-items:center;gap:10px;padding:9px 20px;background:var(--warn-wash);border-top:1px solid #fde68a;border-bottom:1px solid #fde68a;font-size:13px;color:var(--warn)}
.hm-banner .dot{width:7px;height:7px;border-radius:50%;background:var(--hm-amber);flex-shrink:0}
.hm-setup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--line-soft)}
.hm-setup.flush{border-top:0}
@media (max-width:900px){.hm-setup{grid-template-columns:minmax(0,1fr)}}
.hm-detail{padding:24px;display:flex;flex-direction:column;gap:12px;background:var(--surface-2);min-width:0}
.hm-detail .kicker{display:flex;align-items:center;gap:8px;font:11px var(--font-mono);letter-spacing:.06em;color:var(--subtle);text-transform:uppercase}
.hm-detail .chip{font:500 11px var(--font-sans);letter-spacing:0;text-transform:none;padding:2px 8px;border-radius:999px;background:var(--ink);color:#fff}
.hm-detail .chip.soft{background:var(--surface-3);color:var(--muted)}
.hm-detail .chip.done{background:var(--good-wash);color:var(--good)}
.hm-detail h4{margin:0;font-size:20px;font-weight:600;letter-spacing:-.01em}
.hm-detail p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.5}
.hm-detail ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-2)}
.hm-detail li::before{content:"";display:inline-block;width:10px;height:1px;background:var(--subtle);vertical-align:middle;margin-right:10px}
.hm-detail .acts{display:flex;align-items:center;gap:16px;margin-top:6px;flex-wrap:wrap}
.hm-steps{display:flex;flex-direction:column;padding:8px 0;min-width:0}
.hm-step{display:flex;align-items:center;gap:14px;padding:11px 20px;border:0;background:none;text-align:left;cursor:pointer;font:inherit;width:100%;box-sizing:border-box}
.hm-step:hover{background:var(--surface-2)}
.hm-step.on{background:var(--surface-3);box-shadow:inset 2px 0 0 var(--ink)}
.hm-step .mark{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font:11px var(--font-mono);color:var(--subtle);flex-shrink:0;background:var(--surface)}
.hm-step.on .mark{border-color:var(--ink);color:var(--ink)}
.hm-step.done .mark{background:var(--ink);border-color:var(--ink);color:#fff}
.hm-step .txt{flex:1;min-width:0}
.hm-step .t{font-size:13px;font-weight:500;color:var(--ink)}
.hm-step.done:not(.on) .t{color:var(--subtle)}
.hm-step .d{font-size:12px;color:var(--subtle);margin-top:1px}
.hm-step .opt{font-size:11px;color:var(--subtle)}
/* chart */
.hm-legend{display:flex;gap:14px;font-size:12px;color:var(--subtle)}
.hm-legend span{display:inline-flex;align-items:center;gap:6px}
.hm-legend i{width:8px;height:8px;border-radius:2px;display:inline-block}
.hm-split{display:flex;flex-direction:column;height:200px}
.hm-split .up,.hm-split .down{display:flex;gap:2px}
.hm-split .up{flex:3;align-items:flex-end;border-bottom:1px solid var(--line)}
.hm-split .down{flex:1;align-items:flex-start}
.hm-split span{flex:1;min-width:2px}
.hm-split .up span{background:var(--hm-up);border-radius:2px 2px 0 0}
.hm-split .down span{background:var(--hm-down);border-radius:0 0 2px 2px}
.hm-axis{display:flex;justify-content:space-between;font:11px var(--font-mono);color:var(--subtle)}
.hm-empty{display:flex;align-items:center;justify-content:center;flex:1;min-height:160px;font-size:13px;color:var(--subtle);text-align:center}
/* balance */
.hm-avail .k{font-size:12px;color:var(--subtle)}
.hm-avail .v{font-size:30px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:2px}
.hm-kv{display:flex;flex-direction:column}
.hm-kv div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--line-soft);font-size:13px;color:var(--ink-2)}
.hm-kv b{font:500 12px var(--font-mono);color:var(--ink)}
/* to-do rows */
.hm-rows{display:flex;flex-direction:column}
.hm-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line-soft);min-width:0}
.hm-row:first-child{border-top:0}
.hm-row .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--line)}
.hm-row .dot.bad{background:var(--hm-down)}.hm-row .dot.warn{background:var(--hm-amber)}.hm-row .dot.soft{background:#a3a3a3}
.hm-row .txt{flex:1;min-width:0}
.hm-row .t{font-size:13px;color:var(--ink)}
.hm-row .m{font-size:12px;color:var(--subtle);margin-top:2px;overflow-wrap:anywhere}
.hm-clear{font-size:13px;color:var(--subtle);padding:16px 0}
/* invoice tiles */
.hm-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:560px){.hm-tiles{grid-template-columns:minmax(0,1fr)}}
.hm-tile{border:1px solid var(--line);border-radius:8px;padding:12px;min-width:0}
.hm-tile .k{font-size:12px;color:var(--subtle)}
.hm-tile .v{font-size:18px;font-weight:500;font-variant-numeric:tabular-nums;margin-top:4px;overflow-wrap:anywhere}
.hm-tile .v.bad{color:var(--bad)}
.hm-tile .s{font-size:12px;color:var(--subtle);margin-top:4px}
.hm-quiet .v{color:var(--subtle)!important}