/* Should-cost build-up and negotiating position. Namespaced sc- and checked
   against the site's body classes. */
.sc-section { padding: 8px 0 60px; }

.sc-card, .sc-out, .sc-neg {
   background: var(--bg-card);
   border: 1px solid var(--border-dark, rgba(255,255,255,.08));
   border-radius: var(--radius-lg, 16px);
   padding: 22px 24px;
   margin-bottom: 16px;
   max-width: 860px;
}
.sc-card h2, .sc-neg h2 {
   font-size: 16.5px; font-weight: 700; color: var(--text-bright); margin: 0 0 14px;
}
.sc-card--neg { border-color: rgba(240,165,30,.26); }
.sc-hint {
   font-size: 12.5px; line-height: 1.65; color: var(--text-dim);
   margin: -6px 0 16px; max-width: 64ch;
}

.sc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px,1fr)); gap: 13px; }
.sc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sc-field > span { font-size: 12px; font-weight: 600; color: var(--text-mid); }
.sc-field > span small { display: block; font-weight: 500; font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.sc-field input {
   background: var(--bg-black); border: 1px solid rgba(255,255,255,.12); border-radius: 9px;
   padding: 10px 11px; color: var(--text-bright); font: inherit; font-size: 14px;
   font-variant-numeric: tabular-nums; width: 100%; min-width: 0;
}
.sc-field input:focus { outline: none; border-color: rgba(240,165,30,.55); }

.sc-headline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.sc-headline__label {
   flex-basis: 100%; font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
   text-transform: uppercase; color: var(--gold);
}
.sc-headline__num {
   font-size: clamp(28px,6vw,38px); font-weight: 800; color: var(--text-bright);
   letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.sc-headline__qty { font-size: 13px; color: var(--text-dim); }

.sc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sc-table td { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.05); color: var(--text-mid); }
.sc-table td small { display: block; font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.sc-t__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sc-t__sum td { border-bottom: 0; border-top: 1px solid rgba(255,255,255,.16); padding-top: 12px;
   color: var(--text-bright); font-weight: 700; font-size: 15px; }

.sc-gap {
   margin: 0 0 20px; padding: 14px 16px; border-radius: 10px; font-size: 13.5px; line-height: 1.65;
   color: var(--text-mid); border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.03);
}
.sc-gap strong { display: block; margin-bottom: 5px; color: var(--text-bright); }
.sc-gap.is-ok   { background: rgba(34,197,94,.08);  border-color: rgba(34,197,94,.28); }
.sc-gap.is-mid  { background: rgba(255,255,255,.03); }
.sc-gap.is-high { background: var(--gold-pale); border-color: rgba(240,165,30,.32); }
.sc-gap.is-high strong { color: var(--gold-text,#F5BC45); }
.sc-gap.is-wide { background: var(--red-pale); border-color: var(--red-border); }
.sc-gap.is-wide strong { color: #FF8A7A; }

.sc-pos { display: grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap: 12px; }
.sc-pos__item {
   background: var(--bg-black); border: 1px solid rgba(255,255,255,.09);
   border-radius: 12px; padding: 15px 16px; display: flex; flex-direction: column; gap: 5px;
}
.sc-pos__item.is-target { border-color: rgba(240,165,30,.4); background: var(--gold-pale); }
.sc-pos__item > span {
   font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim);
}
.sc-pos__item.is-target > span { color: var(--gold); }
.sc-pos__item > strong {
   font-size: 20px; font-weight: 800; color: var(--text-bright);
   font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.sc-pos__item > small { font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }

.sc-saving {
   margin: 16px 0 0; padding: 12px 14px; border-radius: 10px; font-size: 13.5px;
   color: #4ADE80; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.26);
}
.sc-note { margin: 16px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-dim); max-width: 66ch; }

@media (max-width: 620px) { .sc-card, .sc-out, .sc-neg { padding: 16px; } }

.sc-scope {
   max-width: 860px;
   margin: 0 0 16px;
   padding: 13px 16px;
   background: rgba(255,255,255,.03);
   border: 1px solid rgba(255,255,255,.09);
   border-left: 3px solid var(--gold);
   border-radius: 10px;
   font-size: 13px;
   line-height: 1.65;
   color: var(--text-mid);
}
.sc-scope strong { color: var(--text-bright); }

/* A withheld figure reads as a deliberate choice, not a broken one. */
.sc-saving.is-withheld {
   color: var(--text-dim);
   background: rgba(255,255,255,.03);
   border-color: rgba(255,255,255,.1);
}

/* ── Components ─────────────────────────────────────────────────────────── */
/* One slot to start; the rest reveal as they are needed, so a simple part is
   no more work than before while an assembly is finally modellable. */
.sc-comp {
   background: var(--bg-black);
   border: 1px solid rgba(255,255,255,.09);
   border-radius: 12px;
   padding: 16px 18px;
   margin-bottom: 12px;
}
.sc-comp__head { display: flex; gap: 10px; align-items: center; margin-bottom: 13px; }
.sc-comp__name {
   flex: 1; min-width: 0; background: transparent; border: 0;
   border-bottom: 1px solid rgba(255,255,255,.13);
   color: var(--text-bright); font: inherit; font-size: 14.5px; font-weight: 700; padding: 4px 2px;
}
.sc-comp__name:focus { outline: none; border-bottom-color: var(--gold); }
.sc-comp__name::placeholder { color: var(--text-dim); font-weight: 500; }
.sc-comp__del {
   flex: none; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.12);
   border-radius: 8px; background: transparent; color: var(--text-dim);
   font-size: 17px; line-height: 1; cursor: pointer;
}
.sc-comp__del:hover { color: #FF8A7A; border-color: var(--red-border); }

.sc-addcomp {
   width: 100%; border: 1px dashed rgba(240,165,30,.4); background: transparent;
   color: var(--gold-text,#F5BC45); font: inherit; font-size: 13.5px; font-weight: 650;
   padding: 12px; border-radius: 10px; cursor: pointer; margin-bottom: 16px;
}
.sc-addcomp:hover { background: var(--gold-pale); }
.sc-grid--qty { max-width: 200px; }