/*
 * Application Cost Summary — pane styles.
 * Doc 32 batch-2 §3. Style-guide compliant; no hex literals (§3.1).
 */

.lp-pane {

    container-type: inline-size;
}

.lp-cost-summary-body { padding: 20px var(--lp-pane-pad-x); }

/* Hero number */
.lp-cost-summary-hero {
    text-align: center;
    margin-bottom: 4px;
    padding: 8px 0 14px;
}

.lp-cost-summary-hero-num {
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    color: var(--lp-pane-amber-900);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.lp-cost-summary-hero-label {
    font-size: 11px;
    color: var(--lp-pane-ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 6px;
}

/* Budget bar */
.lp-cost-summary-budget {
    margin-top: 14px;
    font-size: 13px;
    color: var(--lp-pane-ink);
    text-align: left;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

.lp-cost-summary-budget-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: baseline;
}

.lp-cost-summary-budget-label {
    color: var(--lp-pane-ink-dim);
    font-size: 12px;
}

.lp-cost-summary-budget-track {
    grid-column: 1 / -1;
    height: 12px;
    background: var(--lp-pane-amber-100);
    border-radius: 6px;
    overflow: hidden;
    margin: 6px 0 4px;
}

.lp-cost-summary-budget-fill {
    height: 100%;
    background: var(--lp-pane-amber-700);
    transition: width 220ms ease;
}

.lp-cost-summary-budget-fill--warn { background: var(--lp-pane-amber-700); }
.lp-cost-summary-budget-fill--crit { background: var(--lp-pane-status-critical-ink); }

.lp-cost-summary-budget-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: var(--lp-pane-ink-dim);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.lp-cost-summary-budget-forecast {
    margin-top: 6px;
    font-size: 12px;
    color: var(--lp-pane-amber-900);
    text-align: center;
}

/* Top services */
.lp-cost-summary-services { margin: 0 calc(-1 * var(--lp-pane-pad-x)); }

.lp-cost-summary-svc-row {
    display: grid;
    grid-template-columns: minmax(100px, 180px) auto auto auto;
    grid-template-areas:
        "name cost delta delta"
        "bar  bar  bar  bar";
    gap: 4px 12px;
    align-items: center;
    padding: 12px var(--lp-pane-pad-x);
    border-bottom: 1px solid var(--lp-pane-divider);
    font-size: 13px;
}

.lp-cost-summary-svc-row:last-child { border-bottom: 0; }

.lp-cost-summary-svc-name {
    grid-area: name;
    color: var(--lp-pane-amber-900);
    font-weight: 600;
}

.lp-cost-summary-svc-cost {
    grid-area: cost;
    color: var(--lp-pane-amber-900);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.lp-cost-summary-svc-delta {
    grid-area: delta;
    color: var(--lp-pane-ink-dim);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.lp-cost-summary-svc-delta--up   { color: var(--lp-pane-amber-700); }
.lp-cost-summary-svc-delta--down { color: var(--lp-pane-status-ok-ink); }
.lp-cost-summary-svc-delta--high { color: var(--lp-pane-status-critical-ink); font-weight: 600; }

.lp-cost-summary-svc-bar {
    grid-area: bar;
    height: 8px;
    background: var(--lp-pane-amber-100);
    border-radius: 4px;
    overflow: hidden;
}

.lp-cost-summary-svc-fill {
    height: 100%;
    background: var(--lp-pane-amber-700);
    transition: width 220ms ease;
}

/* Anomalies */
.lp-cost-summary-anomaly {
    background: var(--lp-pane-amber-50);
    border-left: 3px solid var(--lp-pane-amber-700);
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--lp-pane-ink);
    border-radius: var(--lp-pane-radius-sm);
}

.lp-cost-summary-anomaly:last-child { margin-bottom: 0; }

.lp-cost-summary-anomaly strong { color: var(--lp-pane-amber-900); font-weight: 600; }

.lp-cost-summary-anomaly-meta {
    color: var(--lp-pane-ink-dim);
    font-size: 12px;
    margin-top: 4px;
}

@container (max-width: 520px) {
    .lp-cost-summary-body { padding: 16px 12px; }
    .lp-cost-summary-hero-num { font-size: 30px; }
    .lp-pane-section-end { margin-left: -12px; margin-right: -12px; }
    .lp-pane-subhead     { margin-left: -12px; margin-right: -12px; padding: 8px 12px; }
    .lp-cost-summary-services { margin-left: -12px; margin-right: -12px; }
    .lp-cost-summary-svc-row { padding: 10px 12px; gap: 4px 8px; }
}

@media (max-width: 520px) {
    .lp-cost-summary-body { padding: 16px 12px; }
    .lp-cost-summary-hero-num { font-size: 30px; }
    .lp-pane-section-end { margin-left: -12px; margin-right: -12px; }
    .lp-pane-subhead     { margin-left: -12px; margin-right: -12px; padding: 8px 12px; }
    .lp-cost-summary-services { margin-left: -12px; margin-right: -12px; }
    .lp-cost-summary-svc-row { padding: 10px 12px; gap: 4px 8px; }
}