/* ==========================================================================
   ARKENSTONE — COSTS / PROFITABILITY (L1). Reuses finance.css primitives
   (fin-kpi, fin-ar, fin-drill-tbl, fin-modal, fin-pill, fin-card…); this adds
   the segment toggle, the P&L cards, the AP worklist and the per-project panel.
   ========================================================================== */

/* ── segment toggle (Receivables | Profitability) ── */
.fin-segbar-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.fin-seg-tools { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.fin-segbar { display: inline-flex; gap: 4px; background: var(--color-surface-raised, rgba(0,0,0,.04)); border: 1px solid var(--color-border-rule); border-radius: 10px; padding: 3px; }
.fin-seg-btn { font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; background: none; color: var(--color-ink-muted); border-radius: 8px; padding: 7px 15px; display: inline-flex; align-items: center; gap: 6px; transition: all .14s; }
.fin-seg-btn:hover { color: var(--color-ink); }
.fin-seg-btn.active { background: var(--color-surface-card); color: var(--color-ink); box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.fin-seg-btn.active i { color: var(--gold); }

/* ── "estimate" tag (trust = openly approximate) ── */
.cost-est { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8a7f68; background: rgba(138,127,104,.14); border-radius: 5px; padding: 2px 6px; margin-left: 8px; vertical-align: middle; }

/* ── KPI strip (reuses .fin-kpi) ── */
.cost-kpi-strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cost-kpi-pct { font-size: 12px; font-weight: 600; color: var(--color-ink-muted); margin-left: 4px; }
.cost-kpi-loss .fin-kpi-val { color: #c0392b; }
.cost-kpi-loss > i { color: #c0392b; }

/* ── project margin cards ── */
.cost-hint { font-size: 11.5px; color: var(--color-ink-muted); font-weight: 500; }
.cost-pnl-cards { margin-bottom: 20px; }
.cost-pnl-card.cost-loss { border-color: rgba(192,57,43,.4); }
.cost-margin-line { font-size: 18px; font-weight: 700; color: #2d8c50; margin: 8px 0 2px; }
.cost-margin-line.cost-neg { color: #c0392b; }
.cost-margin-pct { font-size: 11px; font-weight: 600; color: var(--color-ink-muted); margin-left: 8px; }
.cost-bar { height: 6px; margin: 6px 0; }
.cost-bar-ok { background: #2d8c50; }
.cost-bar-warn { background: #c98a1a; }
.cost-bar-over { background: #c0392b; }
.cost-out { color: #b5651d; font-weight: 600; }
.cost-pos { color: #2d8c50; }
.cost-neg { color: #c0392b; }

/* ── supplier-costs worklist (reuses .fin-drill-tbl) ── */
.cost-exp-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cost-view-toggle { display: inline-flex; gap: 3px; background: var(--color-surface-raised, rgba(0,0,0,.04)); border: 1px solid var(--color-border-rule); border-radius: 8px; padding: 2px; }
.cost-vt-btn { font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; border: none; background: none; color: var(--color-ink-muted); border-radius: 6px; padding: 5px 11px; display: inline-flex; align-items: center; gap: 5px; transition: all .12s; }
.cost-vt-btn:hover { color: var(--color-ink); }
.cost-vt-btn.active { background: var(--color-surface-card); color: var(--color-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.cost-vt-btn.active i { color: var(--gold); }
.cost-exp-filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ── Overview: ranked composition bars (magnitude → single hue; label = identity) ── */
.cost-ov { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding: 6px 2px; }
.cost-ov-block { min-width: 0; }
.cost-ov-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-ink-muted); margin-bottom: 12px; }
.cost-ov-head .fin-muted { font-weight: 600; text-transform: none; letter-spacing: 0; }
.cost-ov-row { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; align-items: center; gap: 12px; padding: 5px 0; }
.cost-ov-label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--color-ink); min-width: 0; }
.cost-ov-label .fin-nm { max-width: 150px; }
.cost-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; display: inline-block; }
.cost-dot.cost-cat-materials { background: #2C5F8A; } .cost-dot.cost-cat-subcontractor { background: #a55a12; }
.cost-dot.cost-cat-logistics { background: #6a4fb0; } .cost-dot.cost-cat-services { background: #0d9488; } .cost-dot.cost-cat-other { background: #8a7f68; }
.cost-ov-count { font-size: 10px; font-weight: 700; color: var(--color-ink-faint, #b3a890); background: var(--color-surface-raised, rgba(0,0,0,.05)); border-radius: 999px; padding: 0 6px; }
.cost-ov-track { height: 12px; background: var(--color-surface-raised, rgba(0,0,0,.05)); border-radius: 6px; overflow: hidden; }
.cost-ov-fill { display: block; height: 100%; background: #b5651d; border-radius: 6px; min-width: 3px; }
.cost-ov-val { font-size: 13px; font-weight: 700; color: var(--color-ink); white-space: nowrap; text-align: right; }
.cost-ov-pct { font-size: 11px; font-weight: 600; color: var(--color-ink-muted); margin-left: 6px; }
.cost-fil-grp { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.cost-fil-grp + .cost-fil-grp { border-left: 1px solid var(--color-border); padding-left: 10px; }
.cost-exp-tbl { font-size: 13px; }
.cost-exp-actions { white-space: nowrap; }
.cost-exp-row:hover td { background: var(--color-surface-raised, rgba(201,162,39,.06)); }
.cost-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-radius: 5px; padding: 2px 7px; white-space: nowrap; }
.cost-cat-materials     { background: rgba(44,95,138,.13); color: #2C5F8A; }
.cost-cat-subcontractor { background: rgba(176,101,29,.15); color: #a55a12; }
.cost-cat-logistics     { background: rgba(124,92,191,.13); color: #6a4fb0; }
.cost-cat-services      { background: rgba(13,148,136,.14); color: #0d9488; }
.cost-cat-other         { background: rgba(0,0,0,.06); color: var(--color-ink-muted); }

/* ── suppliers modal ── */
.cost-sup-list { display: flex; flex-direction: column; gap: 8px; }
.cost-sup-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--color-border-rule); border-radius: 9px; }
.cost-sup-info { flex: 1; min-width: 0; font-size: 13.5px; }
.cost-sup-act { display: inline-flex; gap: 4px; flex-shrink: 0; }
.cost-ai-supplier:not(:empty) { font-size: 12px; color: var(--color-ink-muted); background: rgba(201,162,39,.08); border-radius: 8px; padding: 8px 10px; margin-top: 10px; display: flex; gap: 6px; align-items: flex-start; }
.cost-ai-supplier i { color: var(--gold); margin-top: 1px; }

/* ── per-project profitability panel (inside the receivables detail) ── */
.cost-panel .cost-est { margin-left: 8px; }
.cost-panel-body { padding: 4px 2px 2px; }
.cost-pp { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cost-pp-nums { display: flex; flex-direction: column; gap: 2px; }
.cost-pnl-row { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; padding: 7px 10px; border-radius: 8px; }
.cost-pnl-row span { color: var(--color-ink-muted); }
.cost-pnl-row b { color: var(--color-ink); font-size: 14px; }
.cost-out-row b { color: #b5651d; }
.cost-pnl-row.cost-pos { background: rgba(45,140,80,.08); } .cost-pnl-row.cost-pos b { color: #2d8c50; font-size: 16px; }
.cost-pnl-row.cost-neg { background: rgba(192,57,43,.08); } .cost-pnl-row.cost-neg b { color: #c0392b; font-size: 16px; }
.cost-pp-later { font-size: 11.5px; color: var(--color-ink-faint, #b3a890); display: flex; align-items: center; gap: 5px; padding: 8px 10px 2px; }
.cost-pp-side { border-left: 1px solid var(--color-border); padding-left: 16px; }
.cost-pp-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-ink-muted); margin-bottom: 8px; }
.cost-pp-exp { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--color-border); }
.cost-pp-exp-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.cost-pp-exp-main .fin-nm { max-width: 150px; }
.cost-pp-pill { font-size: 9px; padding: 1px 6px; }
.cost-pp-exp-amt { flex-shrink: 0; font-weight: 600; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.cost-pp-due { font-size: 10px; font-weight: 500; color: #b5651d; }
.cost-pp-exp-act { flex-shrink: 0; display: inline-flex; gap: 2px; }
.cost-cur-file { font-size: 12px; color: var(--color-ink-muted); margin-top: 10px; background: var(--color-surface-raised, rgba(0,0,0,.03)); border-radius: 8px; padding: 8px 10px; }
.cost-cur-file i { color: var(--gold); margin-right: 4px; }

.fin-loading-sm { padding: 20px; font-size: 13px; text-align: center; color: var(--color-ink-muted); }

/* ── Zoho connect modal ── */
.cost-zoho-help { font-size: 12.5px; color: var(--color-ink-muted); background: var(--color-surface-raised, rgba(0,0,0,.03)); border-radius: 10px; padding: 11px 13px; margin-bottom: 14px; line-height: 1.5; }
.cost-zoho-help > i { color: var(--gold); margin-right: 4px; }
.cost-zoho-scopes { margin-top: 9px; display: flex; flex-direction: column; gap: 4px; }
.cost-zoho-scopes b { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-ink-muted); }
.cost-zoho-scopes code { font-size: 11px; color: var(--color-ink); background: var(--color-surface-card); border: 1px solid var(--color-border-rule); border-radius: 7px; padding: 7px 9px; word-break: break-all; user-select: all; }
.cost-z-why { font-size: 11px; color: var(--color-ink-muted); white-space: normal; max-width: 200px; }
.cost-z-tbl tr.cost-z-review td { background: rgba(201,138,26,.06); }
/* ── Zoho document library ── */
.fin-lib-controls { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--color-border); }
.fin-lib-controls .fin-drill-search { flex: 1 1 180px; min-width: 150px; }
.fin-lib-sel { font-size: 12px; padding: 6px 9px; width: auto; min-width: 110px; }
.ztype { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-radius: 5px; padding: 2px 7px; white-space: nowrap; }
.ztype-invoice { background: rgba(44,95,138,.13); color: #2C5F8A; }
.ztype-credit  { background: rgba(192,57,43,.13); color: #c0392b; }
.ztype-receipt { background: rgba(45,140,80,.14); color: #2d8c50; }
.ztype-bill    { background: rgba(181,101,29,.14); color: #b5651d; }   /* money-out: supplier bills */
.ztype-vpmt    { background: rgba(15,118,110,.14); color: #0f766e; }   /* money-out: vendor payments */
.ztext-invoice { color: #2C5F8A; } .ztext-credit { color: #c0392b; } .ztext-receipt { color: #2d8c50; } .ztext-bill { color: #b5651d; }
.zrow-invoice td:first-child { box-shadow: inset 3px 0 0 #2C5F8A; }
.zrow-creditnote td:first-child { box-shadow: inset 3px 0 0 #c0392b; }
.zrow-payment td:first-child { box-shadow: inset 3px 0 0 #2d8c50; }
.zrow-bill td:first-child { box-shadow: inset 3px 0 0 #b5651d; }
.zrow-vendorpayment td:first-child { box-shadow: inset 3px 0 0 #0f766e; }
.fin-chip-div { width: 1px; align-self: stretch; background: var(--color-border); margin: 2px 4px; }

/* attach-source chooser (library vs device) */
.fin-attach-chooser { width: 460px; max-width: 94vw; }
.fin-attach-opts { display: flex; flex-direction: column; gap: 10px; padding: 18px; }
.fin-attach-opt { display: block; width: 100%; text-align: left; border: 1px solid var(--color-border-rule); border-radius: 12px; background: var(--color-surface-raised, rgba(0,0,0,.02)); padding: 14px 16px 14px 46px; position: relative; cursor: pointer; transition: border-color .12s, background .12s; }
.fin-attach-opt:hover { border-color: var(--color-accent, #b5651d); background: var(--color-surface, rgba(0,0,0,.04)); }
.fin-attach-opt > i { position: absolute; left: 15px; top: 15px; font-size: 20px; color: var(--color-accent, #b5651d); }
.fin-attach-opt > b { display: block; font-size: 14px; color: var(--color-ink); }
.fin-attach-opt > span { display: block; font-size: 12px; color: var(--color-ink-muted); margin-top: 2px; }
.fin-lib-attach-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; flex-wrap: wrap; }
.fin-lib-attach-name { font-size: 12.5px; color: #2d8c50; font-weight: 600; }
.fin-lib-proj { color: #2C5F8A; cursor: pointer; }
.fin-lib-proj:hover { text-decoration: underline; }
.fin-lib-group { margin-bottom: 14px; }
.fin-lib-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; background: var(--color-surface-raised, rgba(0,0,0,.03)); font-size: 12.5px; font-weight: 700; color: var(--color-ink); position: sticky; top: 0; z-index: 1; }
.fin-lib-group-meta { font-size: 11px; font-weight: 600; color: var(--color-ink-muted); }
.fin-lib .cost-z-tbl th { position: static; }

.cost-z-projcell { min-width: 210px; }
.cost-z-cell { display: flex; align-items: center; gap: 4px; }
.cost-z-assign { font-size: 12px; padding: 5px 8px; max-width: 200px; }
.cost-z-bulk { flex-shrink: 0; color: var(--gold); }
.cost-z-bulk:hover { color: var(--color-ink); }

/* ── responsive ── */
@media (max-width: 1024px) { .cost-kpi-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
    .cost-pp { grid-template-columns: 1fr; }
    .cost-ov { grid-template-columns: 1fr; gap: 18px; }
    .cost-ov-row { grid-template-columns: minmax(100px, 40%) 1fr auto; }
    .cost-pp-side { border-left: none; padding-left: 0; border-top: 1px solid var(--color-border); padding-top: 12px; }
    /* the supplier-costs table opts out of the global mobile card-table (registry.css @767) — stays a swipeable table */
    .cost-exp-tbl { display: table; width: 100%; }
    .cost-exp-tbl thead { display: table-header-group; }
    .cost-exp-tbl tbody { display: table-row-group; }
    .cost-exp-tbl tr { display: table-row; background: transparent; border: 0; border-radius: 0; margin: 0; }
    .cost-exp-tbl th { display: table-cell; }
    .cost-exp-tbl td { display: table-cell; border-bottom: 1px solid var(--color-border); }
}
@media (max-width: 600px) {
    .cost-kpi-strip { grid-template-columns: repeat(2, 1fr); }
    .fin-seg-btn { padding: 7px 12px; }
}

/* ── L2: team cost rates modal ── */
.fin-modal.cost-rates-modal, .fin-modal.cost-oh-modal { width: 1320px; max-width: 96vw; }
/* fixed layout + real column widths → the table fits the modal, no clipping, no h-scroll */
.cost-rates-modal .fin-drill-scroll, .cost-oh-modal .fin-drill-scroll { overflow-x: auto; }
/* higher specificity than .fin-drill-tbl so fixed layout wins; clip cells so the base
   white-space:nowrap can't spill content past the table + get clipped by the modal */
.fin-drill-tbl.cost-rates-tbl, .fin-drill-tbl.cost-oh-tbl { table-layout: fixed !important; width: 100%; }
.cost-rates-tbl th, .cost-rates-tbl td, .cost-oh-tbl th, .cost-oh-tbl td { overflow: hidden; text-overflow: ellipsis; }
.cost-rates-tbl th:nth-child(2), .cost-rates-tbl td:nth-child(2) { width: 172px; }
.cost-rates-tbl th:nth-child(3), .cost-rates-tbl td:nth-child(3) { width: 108px; }
.cost-rates-tbl th:nth-child(4), .cost-rates-tbl td:nth-child(4) { width: 96px; }
.cost-rates-tbl th:nth-child(5), .cost-rates-tbl td:nth-child(5) { width: 84px; }
.cost-rates-tbl .cost-rate-input { width: 100%; box-sizing: border-box; }

/* ── L3: overhead panel + modal ── */
.cost-oh-panel { margin-bottom: 18px; }
.cost-oh-head-r { display: inline-flex; align-items: center; gap: 12px; }
.cost-oh-total { font-size: 13px; font-weight: 700; color: var(--color-ink); }
.cost-oh-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 2px 2px; }
.cost-oh-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--color-ink); background: var(--color-surface-raised, rgba(0,0,0,.03)); border: 1px solid var(--color-border-rule); border-radius: 8px; padding: 5px 10px; }
.cost-oh-chip b { color: var(--color-ink); }
.cost-oh-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.cost-oh-rent { background: #2C5F8A; } .cost-oh-utilities { background: #0d9488; } .cost-oh-software { background: #6a4fb0; }
.cost-oh-admin { background: #8a7f68; } .cost-oh-insurance { background: #a55a12; } .cost-oh-other { background: #b3a890; }
.cost-oh-note { font-size: 11.5px; color: var(--color-ink-faint, #b3a890); display: flex; align-items: center; gap: 5px; padding: 8px 2px 2px; }
.cost-oh-empty { font-size: 12.5px; color: var(--color-ink-muted); padding: 8px 2px; }
.cost-oh-empty a, .cost-oh-empty2 a { color: var(--color-accent, #a9743e); cursor: pointer; text-decoration: underline; }

.cost-oh-intro { background: rgba(44,95,138,.09); border-radius: 9px; padding: 10px 12px; font-size: 12.5px; color: var(--color-ink); margin-bottom: 12px; display: flex; gap: 7px; align-items: flex-start; }
.cost-oh-total-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px 12px; font-size: 13.5px; border-bottom: 1px solid var(--color-border-rule); margin-bottom: 8px; }
.cost-oh-total-row b { color: var(--color-ink); font-size: 15px; }
.cost-oh-tl { color: var(--color-ink-muted); }
.cost-oh-total-act { margin-left: auto; display: inline-flex; gap: 8px; }
/* overhead items table (Item · Category · Monthly · Actions) — fixed, fits the modal */
.cost-oh-tbl td { padding: 8px 10px; }
.cost-oh-tbl th:nth-child(2), .cost-oh-tbl td:nth-child(2) { width: 130px; }
.cost-oh-tbl th:nth-child(3), .cost-oh-tbl td:nth-child(3) { width: 150px; }
.cost-oh-tbl th:nth-child(4), .cost-oh-tbl td:nth-child(4) { width: 118px; }
.cost-oh-tbl td:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cost-oh-acts { white-space: nowrap; }
.cost-oh-off td { opacity: .5; }
.cost-oh-src { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: rgba(44,95,138,.13); color: #2C5F8A; border-radius: 4px; padding: 1px 5px; margin-left: 5px; }
.cost-cat-oh { background: rgba(0,0,0,.06); color: var(--color-ink-muted); }
/* smart colour-coded overhead categories (tinted chips) */
.cost-cat-oh.cost-oh-rent { background: rgba(44,95,138,.13); color: #2C5F8A; }
.cost-cat-oh.cost-oh-utilities { background: rgba(13,148,136,.14); color: #0d9488; }
.cost-cat-oh.cost-oh-software { background: rgba(106,79,176,.13); color: #6a4fb0; }
.cost-cat-oh.cost-oh-admin { background: rgba(138,127,104,.18); color: #7a6f56; }
.cost-cat-oh.cost-oh-insurance { background: rgba(165,90,18,.14); color: #a55a12; }
.cost-cat-oh.cost-oh-other { background: rgba(0,0,0,.06); color: var(--color-ink-muted); }
/* enable/disable toggle — green when on, muted when off */
.cost-oh-tgl-on i { color: #2d8c50; }
.cost-oh-tgl-off i { color: var(--color-ink-faint, #b3a890); }
.cost-oh-empty2 { text-align: center; color: var(--color-ink-muted); padding: 16px; }

/* ── Zoho expense-account classify modal (robust/dynamic rework) ── */
.cost-ohz-toolbar { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.cost-ohz-controls-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cost-ohz-controls-row .fin-drill-search { flex: 1 1 200px; min-width: 180px; }
.cost-ohz-bulk-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cost-ohz-sort { width: auto; min-width: 150px; padding: 6px 9px; font-size: 12.5px; }

/* fixed layout + explicit column widths so long account names never push the
   table wider than the modal (same fix pattern as the rates/overhead tables).
   Column 1 holds a name PLUS a wrapping suggestion sentence beneath it, so it
   resets the base .fin-drill-tbl nowrap to wrap normally rather than truncate —
   the other columns (figures/select/pills) are short, fixed-width, and fine as-is. */
.fin-drill-tbl.cost-ohz-tbl { table-layout: fixed !important; width: 100%; }
.cost-ohz-tbl th, .cost-ohz-tbl td { vertical-align: top; padding: 10px; }
.cost-ohz-tbl td:first-child { white-space: normal; }
.cost-ohz-tbl th:nth-child(2), .cost-ohz-tbl td:nth-child(2) { width: 120px; }
.cost-ohz-tbl th:nth-child(3), .cost-ohz-tbl td:nth-child(3) { width: 140px; }
.cost-ohz-tbl th:nth-child(4), .cost-ohz-tbl td:nth-child(4) { width: 130px; }
.cost-ohz-tbl th:nth-child(5), .cost-ohz-tbl td:nth-child(5) { width: 230px; }

.cost-ohz-acct { display: flex; align-items: flex-start; gap: 6px; font-size: 13px; color: var(--color-ink); line-height: 1.35; }
.cost-ohz-acct i { margin-top: 2px; }   /* keep the one-off icon aligned to the first line when the name wraps */
.cost-ohz-oneoff { color: #c98a1a; font-size: 14px; flex-shrink: 0; cursor: help; }
.cost-ohz-suggest { font-size: 11.5px; color: var(--color-ink-muted); margin-top: 4px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cost-ohz-suggest i { color: var(--gold); }
.cost-ohz-suggest b { color: var(--color-ink); }
.cost-ohz-suggest a { color: var(--color-accent, #a9743e); cursor: pointer; text-decoration: underline; font-weight: 600; }
.cost-ohz-cat { width: 100%; box-sizing: border-box; font-size: 12px; padding: 5px 7px; }

.cost-ohz-pills { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.cost-ohz-pill { font-size: 11.5px; font-weight: 700; border: 1px solid var(--color-border-rule); background: transparent; color: var(--color-ink-muted); border-radius: 20px; padding: 5px 11px; cursor: pointer; transition: all .12s; white-space: nowrap; }
.cost-ohz-pill:hover { border-color: var(--color-accent, #a9743e); color: var(--color-ink); }
.cost-ohz-p-overhead.active { background: rgba(181,101,29,.15); border-color: #b5651d; color: #b5651d; }
.cost-ohz-p-direct.active { background: rgba(44,95,138,.13); border-color: #2C5F8A; color: #2C5F8A; }
.cost-ohz-p-exclude.active { background: rgba(0,0,0,.08); border-color: var(--color-ink-muted); color: var(--color-ink-muted); }
/* subtle row tint so the eye can scan classified-vs-not at a glance */
.cost-ohz-row-overhead td:first-child { box-shadow: inset 3px 0 0 #b5651d; }
.cost-ohz-row-direct td:first-child { box-shadow: inset 3px 0 0 #2C5F8A; }
.cost-ohz-row-exclude td:first-child { box-shadow: inset 3px 0 0 var(--color-ink-faint, #b3a890); opacity: .6; }
.cost-rates-intro { background: rgba(44,95,138,.09); border-radius: 9px; padding: 10px 12px; font-size: 12.5px; color: var(--color-ink); margin-bottom: 12px; display: flex; gap: 7px; align-items: flex-start; }
.cost-rates-settings { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border-rule); }
.cost-set-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--color-ink-muted); }
.cost-rate-input { border: 1px solid var(--color-border-rule); border-radius: 8px; padding: 7px 10px; font-size: 13px; background: var(--color-surface, #fff); color: var(--color-ink); width: 130px; text-align: right; }
.cost-rate-input:focus { outline: none; border-color: var(--color-accent, #a9743e); }
.cost-set-f .cost-rate-input { width: 90px; }
.cost-rates-recompute { margin-left: auto; display: inline-flex; align-items: center; gap: 9px; }
.cost-rates-last { font-size: 11.5px; color: var(--color-ink-muted); }
.cost-rates-tbl th, .cost-rates-tbl td { padding: 8px 10px; }
.cost-rates-tbl td .cost-rate-role { display: block; font-size: 11px; color: var(--color-ink-muted); margin-top: 1px; }
.cost-rate-hr { font-weight: 600; color: var(--color-ink); white-space: nowrap; }
.cost-rate-src { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 5px; }
.cost-src-set { background: rgba(45,140,80,.14); color: #2d8c50; }
.cost-src-role { background: rgba(181,101,29,.14); color: #b5651d; }
.cost-src-none { background: rgba(0,0,0,.07); color: var(--color-ink-muted); }