/* Business costs and the job calculator (pipeline items #62 and #66). Admin only.
   Built on the design system: .ds- components plus these few layout rules, tokens only
   (docs/design-system.md rules 1 and 7; listed in tests/design-system.test.js BUILT_ON_TOKENS).
   #66: the page is two halves with a key-figures summary that stays in view on desktop (a side
   column) AND on iPad (a bar docked at the bottom). Motion is short (200ms at most), on colour,
   border and shadow only, and is switched off under prefers-reduced-motion. design-system.css has
   no motion tokens and is the only sheet that may declare a --ds- property, so durations are literal. */

.cost-header{align-items:flex-start}
.cost-header-side{display:grid;justify-items:end;gap:var(--ds-space-2)}
.cost-admin-badge{font-size:var(--ds-text-sm)}
.cost-period{display:inline-flex;gap:var(--ds-space-1);padding:var(--ds-space-1);border:1px solid var(--ds-line);border-radius:var(--ds-radius-pill);background:var(--ds-surface)}
.cost-period .ds-btn{min-height:var(--ds-touch);border-radius:var(--ds-radius-pill);transition:background-color 120ms ease,color 120ms ease,border-color 120ms ease}
.cost-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:var(--ds-space-4);align-items:start}
.cost-main{display:grid;gap:var(--ds-space-6);min-width:0}
.cost-half{display:grid;gap:var(--ds-space-4)}
.cost-half-head h2{margin:0;font:800 var(--ds-text-xl)/1.2 var(--ds-font-heading);color:var(--ds-ink-strong)}
.cost-half-head .ds-lede{margin:var(--ds-space-1) 0 0}
.cost-sub{margin:var(--ds-space-3) 0 var(--ds-space-2);font:800 var(--ds-text-md)/1.3 var(--ds-font-heading);color:var(--ds-ink)}
.cost-groups{display:grid;gap:var(--ds-space-4)}
.cost-group{display:grid;gap:var(--ds-space-3);border:1px solid var(--ds-line);transition:border-color 150ms ease,box-shadow 150ms ease}
.cost-group:focus-within{border-color:var(--ds-primary);box-shadow:var(--ds-shadow)}
.cost-group-custom{border-style:dashed}
.cost-group-total{color:var(--ds-ink-strong);font-weight:800}
.cost-group-tools{display:flex;flex-wrap:wrap;gap:var(--ds-space-3);align-items:end}
.cost-lines{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--ds-space-3)}
.cost-line{display:grid;gap:var(--ds-space-1);align-content:start;padding:var(--ds-space-2);border-radius:var(--ds-radius-sm);background:var(--ds-surface)}
.cost-line-custom{background:var(--ds-primary-soft)}
.cost-line select{min-height:var(--ds-touch)}
.cost-other{color:var(--ds-ink-soft);font-variant-numeric:tabular-nums}
.cost-note{color:var(--ds-text-muted);font-size:var(--ds-text-sm)}
.cost-add,.cost-remove{min-height:var(--ds-touch);justify-self:start}
.cost-add-group{display:flex;flex-wrap:wrap;gap:var(--ds-space-3);align-items:end}
.cost-fixed-total{display:grid;gap:var(--ds-space-1);border:2px solid var(--ds-ink-strong)}
.cost-big{margin:0}
.cost-big-figure{font-family:var(--ds-font-heading);font-size:var(--ds-text-xxl);color:var(--ds-ink-strong)}
.cost-big-other{margin:0;color:var(--ds-ink-soft);font-weight:700}
.cost-fixed-total small{color:var(--ds-text-muted)}
.cost-controls{display:grid;gap:var(--ds-space-3)}
.cost-profit-mode{display:flex;flex-wrap:wrap;gap:var(--ds-space-3);border:0;margin:0;padding:0}
.cost-profit-mode legend{font-weight:800;color:var(--ds-ink);margin-bottom:var(--ds-space-2)}
.cost-choice{display:inline-flex;align-items:center;gap:var(--ds-space-2);min-height:var(--ds-touch);padding:0 var(--ds-space-3);border:1px solid var(--ds-line);border-radius:var(--ds-radius-pill);background:var(--ds-white);transition:border-color 120ms ease,background-color 120ms ease}
.cost-choice:has(input:checked){border-color:var(--ds-primary);background:var(--ds-primary-soft)}
.cost-sliders{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--ds-space-3)}
.cost-slider{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:var(--ds-space-2);align-items:end}
.cost-slider input[type="range"]{width:100%;min-height:var(--ds-touch);accent-color:var(--ds-primary)}
.cost-fixed-profit{display:flex;flex-wrap:wrap;gap:var(--ds-space-3);align-items:end}
.cost-fixed-profit select{min-height:var(--ds-touch)}
.cost-earn-out{display:grid;gap:var(--ds-space-2)}
.cost-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--ds-space-3)}
.cost-mode{display:grid;gap:var(--ds-space-1);border:1px solid var(--ds-line);transition:border-color 150ms ease,box-shadow 150ms ease}
.cost-mode-chosen{border-color:var(--ds-success);box-shadow:var(--ds-shadow-sm)}
.cost-mode-figure{margin:0}
.cost-mode-figure strong{font-family:var(--ds-font-heading);font-size:var(--ds-text-xl);color:var(--ds-ink-strong)}
.cost-mode small{color:var(--ds-text-muted)}
.cost-workings dt small{display:block;color:var(--ds-text-muted);font-size:var(--ds-text-xs)}
.cost-vat{margin-top:var(--ds-space-2)}
.cost-summary{position:sticky;top:var(--ds-space-4);display:grid;gap:var(--ds-space-2);z-index:5}
.cost-summary-list{display:grid;gap:var(--ds-space-2);margin:0}
.cost-summary-list div{display:grid;gap:2px}
.cost-summary-list dt{color:var(--ds-text-muted);font-size:var(--ds-text-sm)}
.cost-summary-list dd{margin:0;text-align:left;font-family:var(--ds-font-heading);font-size:var(--ds-text-lg);font-weight:800;color:var(--ds-ink-strong);border-radius:var(--ds-radius-sm);transition:background-color 150ms ease,color 150ms ease}
.cost-summary-list small{color:var(--ds-text-muted);font-size:var(--ds-text-xs)}
.cost-changed{background:var(--ds-primary-soft)}

/* Item #62's pieces, still used by the save card and by the job calculator dialog (job-costing.js). */
.cost-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--ds-space-3)}
.cost-results .cost-stat,.cost-earn-stats .cost-stat{display:grid;gap:var(--ds-space-1)}
.cost-stat span{color:var(--ds-text-muted);font-size:var(--ds-text-sm)}
.cost-stat strong{font-family:var(--ds-font-heading);font-size:var(--ds-text-xl);color:var(--ds-ink-strong);text-align:left}
.cost-stat small{color:var(--ds-text-muted)}
.cost-accountant{border-left:4px solid var(--ds-warning);background:var(--ds-warning-wash);color:var(--ds-warning-ink);padding:var(--ds-space-2) var(--ds-space-3);border-radius:var(--ds-radius-sm)}
.cost-rate-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--ds-space-3);align-items:end;border:1px solid var(--ds-line);border-radius:var(--ds-radius);padding:var(--ds-space-3);margin-top:var(--ds-space-3)}
.cost-save{display:flex;flex-wrap:wrap;gap:var(--ds-space-3);align-items:end;margin:var(--ds-space-3) 0}
.cost-history li,.cost-rates li{display:flex;justify-content:space-between;gap:var(--ds-space-3);align-items:center}
.cost-job-dialog{width:min(960px,96vw)}
.cost-job-grid{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:var(--ds-space-4);align-items:start}
.cost-job-inputs{display:grid;gap:var(--ds-space-3);border:1px solid var(--ds-line);border-radius:var(--ds-radius);padding:var(--ds-space-3)}
.cost-figures{display:grid;gap:var(--ds-space-1);margin:0 0 var(--ds-space-3)}
.cost-figures div{display:flex;justify-content:space-between;gap:var(--ds-space-3);padding:var(--ds-space-1) 0;border-bottom:1px solid var(--ds-line)}
.cost-figures dt{color:var(--ds-ink-soft)}
.cost-figures dd{margin:0}
.cost-passthrough dt,.cost-passthrough dd{color:var(--ds-text-muted)}
.cost-total dt,.cost-total dd{font-weight:700;color:var(--ds-ink-strong)}
.cost-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* iPad and narrower: one column, and the summary becomes a bar docked at the bottom of the
   screen. It stays sticky (item #62 made it static here, so iPad had no summary in view). */
@media (max-width:1180px){
 .cost-layout,.cost-job-grid{grid-template-columns:1fr}
 .cost-summary{position:sticky;top:auto;bottom:0;grid-template-columns:auto 1fr;align-items:center;padding:var(--ds-space-2) var(--ds-space-3);border-top:2px solid var(--ds-ink-strong);box-shadow:var(--ds-shadow)}
 .cost-summary-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ds-space-3)}
 .cost-summary-list dd{font-size:var(--ds-text-md)}
 .cost-header-side{justify-items:start}
 .cost-period .ds-btn,.cost-add,.cost-remove,.cost-choice{min-height:var(--ds-touch)}
}
@media (max-width:700px){
 .cost-summary-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cost-slider{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
 .cost-page *,.cost-page{transition:none!important}
}