/* ==========================================================================
   家务劳动价值估算器 —— 专属样式（滑杆项目 + 工资条结算单）
   依赖 biz-kit.css v2 的变量与骨架；sp-cell 复用自待机电费工具样式
   ========================================================================== */

/* ---------- 面板：家务项目滑杆列表 ---------- */
.hv-items { display: grid; gap: 9px; margin-top: 12px; max-height: 285px; overflow-y: auto; padding-right: 2px; }

.hv-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) 46px;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--p-line);
    border-radius: 9px;
    background: var(--p-panel);
}

.hv-item.is-zero { opacity: .45; }

.hv-item-name { font-size: 12px; font-weight: 600; line-height: 1.35; }
.hv-item-name small { display: block; font-family: var(--bk-mono); font-weight: 400; font-size: 9.5px; color: var(--p-ink3); margin-top: 1px; }

.hv-item-slider {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px 54px;
    gap: 8px;
    align-items: center;
    min-width: 0;
}

.hv-item-slider input[type="range"] {
    width: 100%;
    height: 4px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 999px;
    background: var(--bk-line);
    outline: none;
    cursor: pointer;
}

.hv-item-slider input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--p-accent);
    border: 2.5px solid var(--p-bg);
    box-shadow: 0 0 0 1px var(--p-accent);
}

.hv-item-slider input[type="range"]::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--p-accent);
    border: 2.5px solid var(--p-bg);
}

.hv-item-slider .hv-min { font-family: var(--bk-mono); font-size: 11px; color: var(--p-ink); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hv-item-slider .hv-min b { color: var(--p-accent); font-weight: 700; }
.hv-item-slider .hv-days { display: flex; align-items: center; gap: 3px; font-size: 9.5px; color: var(--p-ink3); white-space: nowrap; }
.hv-item-slider .hv-days input { width: 100%; min-width: 0; border: 0; outline: none; background: var(--bk-card); border: 1px solid var(--p-line); border-radius: 6px; color: var(--p-ink); font-family: var(--bk-mono); font-size: 11px; padding: 3px 2px 3px 5px; text-align: center; }

/* ---------- 自定义项目 ---------- */
.hv-extra {
    margin-top: 11px;
    border: 1px dashed var(--p-line);
    border-radius: 9px;
    padding: 10px 12px 11px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 12px;
}

.hv-extra-row { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; gap: 8px; font-size: 11px; color: var(--p-ink3); }
.hv-extra-row .sp-cell input { border: 0; outline: none; background: transparent; color: var(--p-ink); font-family: var(--bk-mono); font-size: 12px; padding: 4px 0; width: 100%; min-width: 0; }
.hv-extra-row .sp-cell { padding: 0 8px; }

/* ---------- 工资条结算单 ---------- */
.hv-slip {
    margin-top: 4px;
    border: 1px solid var(--bk-line);
    border-radius: 10px;
    overflow: hidden;
    background: repeating-linear-gradient(0deg, transparent, transparent 35px, var(--bk-line2) 35px, var(--bk-line2) 36px);
}

.hv-slip-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--bk-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
}

.hv-slip-head span:last-child { font-family: var(--bk-mono); font-weight: 400; font-size: 11px; opacity: .85; }

.hv-slip-body { padding: 6px 18px 4px; }

.hv-slip-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px dotted var(--bk-line);
    font-size: 13px;
}

.hv-slip-row:last-child { border-bottom: 0; }

.hv-slip-row .hv-slip-name { color: var(--bk-ink2); }
.hv-slip-row .hv-slip-name b { color: var(--bk-ink); font-weight: 700; }
.hv-slip-row .hv-slip-calc { font-family: var(--bk-mono); font-size: 10px; color: var(--bk-ink3); }
.hv-slip-row .hv-slip-amt { font-family: var(--bk-mono); font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--bk-ink); white-space: nowrap; }

.hv-slip-row.is-empty { justify-content: center; color: var(--bk-ink3); font-size: 12px; border-bottom: 0; }

.hv-slip-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 18px;
    background: var(--bk-accent-soft);
    border-top: 1px dashed var(--bk-accent);
    font-size: 13px;
    font-weight: 700;
}

.hv-slip-total b { font-family: var(--bk-mono); font-size: 21px; color: var(--bk-accent); }
.hv-slip-total b i { font-style: normal; font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
    .hv-item { grid-template-columns: 78px minmax(0, 1fr); }
    .hv-item-name small { display: none; }
    .hv-item-slider { grid-column: 1 / -1; }
    .hv-extra { grid-template-columns: 1fr; }
    .hv-slip-head, .hv-slip-total { padding-left: 14px; padding-right: 14px; }
    .hv-slip-body { padding: 4px 14px 2px; }
    .hv-slip-row .hv-slip-calc { display: none; }
}