/* 电镀与表面处理成本计算器 —— 工单/凭单风格
   与 base.css 的通用底座配合，只写本页专属结构。 */

/* 面积录入方式：分段式（非胶囊，区别于通用 chips） */
.ep-mode {
    display: flex;
    gap: 0;
    border: 1px solid var(--d3-line-2);
    border-radius: var(--d3-radius-sm);
    overflow: hidden;
    background: var(--d3-paper);
    margin-bottom: 13px;
}
.ep-mode label {
    flex: 1 1 0;
    position: relative;
    cursor: pointer;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--d3-ink-3);
    padding: 9px 8px;
    transition: background .15s ease, color .15s ease;
    user-select: none;
}
.ep-mode label + label { border-left: 1px solid var(--d3-line-2); }
.ep-mode input { position: absolute; opacity: 0; pointer-events: none; }
.ep-mode label:hover { color: var(--d3-ink); }
.ep-mode input:checked + span { color: var(--d3-accent); }
.ep-mode label:has(input:checked) {
    background: rgba(var(--d3-accent-rgb), .10);
    box-shadow: inset 0 -2px 0 var(--d3-accent);
    color: var(--d3-accent);
}
.ep-mode input:focus-visible + span { outline: 2px solid rgba(var(--d3-accent-rgb), .55); outline-offset: 3px; }

/* 形状估算自动写入时，面积框不可编辑 */
.d3-io.ep-readonly { background: var(--d3-card-2); border-style: dashed; }
.d3-io.ep-readonly input { color: var(--d3-ink-2); cursor: default; }

/* 形状估算区 */
.ep-shape {
    border: 1px dashed var(--d3-line-2);
    border-radius: var(--d3-radius-sm);
    padding: 13px;
    margin-bottom: 13px;
    background: rgba(var(--d3-accent-rgb), .035);
}
.ep-shape[hidden] { display: none; }
.ep-shape .d3-fields { gap: 11px 12px; }
.ep-shape .d3-hint { margin-top: 9px; }

/* 操作按钮 */
.ep-actions { display: flex; gap: 7px; }

.ep-btn {
    appearance: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1;
    padding: 8px 13px;
    border-radius: 7px;
    border: 1px solid var(--d3-accent);
    background: var(--d3-accent);
    color: var(--d3-accent-ink);
    transition: filter .15s ease, background .15s ease, color .15s ease;
    white-space: nowrap;
}
.ep-btn:hover { filter: brightness(1.06); }
.ep-btn:active { transform: translateY(1px); }

.ep-btn-ghost {
    background: transparent;
    color: var(--d3-ink-2);
    border-color: var(--d3-line-2);
}
.ep-btn-ghost:hover {
    color: var(--d3-ink);
    border-color: var(--d3-ink-3);
    filter: none;
}

/* 右侧凭单 */
.ep-aside { position: sticky; top: 78px; }

.ep-ticket {
    position: relative;
    padding: 0 0 16px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .02), 0 12px 28px -24px rgba(0, 0, 0, .5);
}

.ep-ticket-head {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 18px;
    border-bottom: 1px dashed var(--d3-line-2);
    font-family: var(--d3-mono);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--d3-ink-3);
    background: rgba(var(--d3-accent-rgb), .05);
}
.ep-tag {
    margin-left: auto;
    font-family: var(--d3-sans);
    letter-spacing: 0;
    text-transform: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--d3-accent);
    border: 1px solid rgba(var(--d3-accent-rgb), .35);
    background: rgba(var(--d3-accent-rgb), .09);
    border-radius: 999px;
    padding: 2px 8px;
}

/* 双主数字 */
.ep-two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 18px 0;
}
.ep-two > div { min-width: 0; }
.ep-two-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--d3-ink-3);
    margin-bottom: 4px;
    letter-spacing: .01em;
}
.ep-big-accent { color: var(--d3-accent); }
.ep-two .d3-big { font-size: clamp(26px, 3.4vw, 34px); }
.ep-two > div + div {
    border-left: 1px dashed var(--d3-line);
    padding-left: 14px;
}

.ep-ticket .d3-kv { margin: 14px 18px 0; }

.ep-stack-title {
    display: flex; align-items: baseline; gap: 8px;
    padding: 0 18px;
    margin: 16px 0 8px;
    font-size: 12px;
    font-weight: 650;
    color: var(--d3-ink-2);
}
.ep-stack-title span:last-child {
    margin-left: auto;
    font-family: var(--d3-mono);
    font-size: 10.5px;
    font-weight: 400;
    color: var(--d3-ink-3);
    letter-spacing: .04em;
}
.ep-ticket .d3-stack { margin: 0 18px; }
.ep-ticket .d3-legend { margin: 10px 18px 0; }

/* 派生小指标 */
.ep-mini {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
    list-style: none;
    margin: 14px 18px 0;
    padding-top: 12px;
    border-top: 1px dashed var(--d3-line);
}
.ep-mini li {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 12px;
    color: var(--d3-ink-3);
    min-width: 0;
}
.ep-mini li b {
    margin-left: auto;
    font-family: var(--d3-mono);
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--d3-ink);
    white-space: nowrap;
}

.ep-alerts { display: grid; gap: 8px; padding: 0 18px; }
.ep-alerts:not(:empty) { margin-top: 14px; }
.ep-alerts .d3-alert { font-size: 12.5px; padding: 8px 11px; }

/* 批量对照 */
.ep-batch { margin-top: 14px; }
.ep-batch .d3-table { min-width: 560px; }
.ep-batch tr.is-current td {
    background: rgba(var(--d3-accent-rgb), .08);
    font-weight: 700;
}
.ep-batch tr.is-current td:first-child::before {
    content: "当前 ";
    font-size: 10.5px;
    font-weight: 600;
    color: var(--d3-accent);
}

@media (max-width: 960px) {
    .ep-aside { position: static; }
}

@media (max-width: 640px) {
    .ep-two { padding: 14px 15px 0; gap: 10px; }
    .ep-two .d3-big { font-size: 25px; }
    .ep-two > div + div { padding-left: 10px; }
    .ep-ticket .d3-kv,
    .ep-ticket .d3-stack,
    .ep-ticket .d3-legend,
    .ep-mini,
    .ep-alerts,
    .ep-stack-title { margin-left: 15px; margin-right: 15px; padding-left: 0; padding-right: 0; }
    .ep-stack-title { padding-left: 0; padding-right: 0; }
    .ep-ticket-head { padding: 10px 15px; }
    .ep-mini { grid-template-columns: minmax(0, 1fr); }
    .ep-mode label { padding: 9px 4px; }
}

:root[data-theme="dark"] .ep-shape { background: rgba(var(--d3-accent-rgb), .07); }
:root[data-theme="dark"] .ep-ticket { box-shadow: none; }