/* Spend Control (2026-10-08) — assets/spend-control.js. Reads the v2 tokens
   from assets/lv2.css; controls use the shared --ctl-* classes, text the TYPE
   SCALE. KPI cards are Team Capacity's capQKpi (pmkt-capacity.css). */
#spend-control-view .sc-head{display:flex;align-items:stretch;justify-content:space-between;gap:24px;margin:4px 0 16px}
#spend-control-view .sc-head__l{min-width:0}
/* The insight box spans exactly the title block — top of the eyebrow to the
   bottom of the sub (stretch), its two lines centred inside (his note,
   2026-10-08: same height as the head, nothing taller). */
#spend-control-view .sc-head .sc-ins{flex:0 1 860px;max-width:860px;align-self:stretch;align-items:center;padding:0 16px;box-sizing:border-box}
#spend-control-view .sc-head .sc-ins .cap-ins__t{margin-bottom:2px}
#spend-control-view .sc-bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:0 0 14px}
#spend-control-view .sc-month{width:150px}
#spend-control-view .sc-q{width:200px}
#spend-control-view .sc-bar .ui-sel{max-width:200px}
#spend-control-view .sc-sp{flex:1}
#spend-control-view .sc-msg{padding:22px 24px;font-size:12.5px;color:var(--lv-muted)}
#spend-control-view .sc-kpis{margin-bottom:var(--lv-gap)}
#spend-control-view .sc-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--lv-gap);align-items:stretch}
@media (max-width:1100px){ #spend-control-view .sc-bento > *{grid-column:span 12 !important} }
#spend-control-view .sc-muted{color:var(--lv-faint)}

/* notes + edit strip */
#spend-control-view .sc-note{margin:0 0 12px;padding:9px 12px;border-radius:10px;font-size:12px;font-weight:600}
#spend-control-view .sc-note--ok{background:#ECFDF5;color:#047857}
#spend-control-view .sc-note--err{background:#FEF2F2;color:#B91C1C}
#spend-control-view .sc-edit{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;padding:12px 16px;margin:0 0 var(--lv-gap);font-size:12.5px}
#spend-control-view .sc-edit > b{color:var(--lv-text)}
#spend-control-view .sc-cap{display:flex;align-items:center;gap:8px}
#spend-control-view .sc-cap > span{font-weight:600;color:var(--lv-body)}
#spend-control-view .sc-cap > i{font-style:normal;font-size:11px;color:var(--lv-faint);min-width:110px;font-variant-numeric:tabular-nums}
#spend-control-view .sc-edit__h{font-size:var(--t-note);color:var(--lv-faint)}
#spend-control-view .sc-inp{width:130px;text-align:right}
#spend-control-view td .sc-inp{width:110px;height:28px}

/* By PIC — beside the chart; a PIC row filters the table */
#spend-control-view .sc-pics{display:grid;gap:6px}
#spend-control-view .sc-pic{display:grid;grid-template-columns:minmax(0,1fr) auto 58px;align-items:center;gap:12px;width:100%;
  padding:9px 10px;border:1px solid var(--lv-border-soft);border-radius:10px;background:var(--lv-surface);text-align:left;cursor:pointer;font:inherit;
  transition:background var(--lv-fast) var(--lv-ease),border-color var(--lv-fast) var(--lv-ease)}
#spend-control-view .sc-pic:hover{background:#F5F8FF}
#spend-control-view .sc-pic.is-on{border-color:#93C5FD;background:#EFF6FF}
#spend-control-view .sc-pic__n{display:flex;flex-direction:column;min-width:0}
#spend-control-view .sc-pic__n b{font-size:12.5px;color:var(--lv-text)}
#spend-control-view .sc-pic__n i{font-style:normal;font-size:var(--t-item-sub);color:var(--lv-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#spend-control-view .sc-pic__v{display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums}
#spend-control-view .sc-pic__v span{font-size:11px;color:var(--lv-muted)}
#spend-control-view .sc-pic__v b{font-size:12.5px;color:var(--lv-text)}
#spend-control-view .sc-pic__v i{font-style:normal;font-weight:500;color:var(--lv-faint);margin-left:3px}
#spend-control-view .sc-pic .sc-chg{text-align:right}

/* change chip — down is the ask this month, so it reads as the action, not as bad news */
#spend-control-view .sc-chg{display:inline-block;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--lv-muted)}
#spend-control-view .sc-chg.dn{color:#B45309}
#spend-control-view .sc-chg.up{color:#047857}
#spend-control-view .sc-tag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;background:#FEF2F2;color:#B91C1C}
#spend-control-view .sc-tag--ok{background:#ECFDF5;color:#047857}
#spend-control-view .sc-ends{font-weight:700;color:#B45309}

/* table — .ui-tbl.tbl-grid carries the global grid proportions (lv2.css);
   only what is particular to this table lives here. */
#spend-control-view .sc-scroll{max-height:calc(100vh - 230px);min-height:360px}
/* Every column shares the available width, including Project and Action.
   Below the minimum column width the table scrolls within its own container.
   Long values use ellipsis; the cell titles retain their full text. */
#spend-control-view{--sc-col-min:96px}
#spend-control-view .sc-tbl{width:100%;table-layout:fixed}
#spend-control-view .sc-tbl thead th{top:0;letter-spacing:.15px;box-sizing:border-box;height:calc(var(--ctl-h) + 2 * var(--grid-pad-y) + 1px);font-size:var(--t-item) !important;line-height:1.35;vertical-align:middle}
/* one <tbody> per project: hover lights the whole block, spanned cells included */
#spend-control-view .sc-tbl tbody.sc-g:hover td{background:var(--lv-bg)}
/* every block closes with a rule (lv2 drops it on a tbody's last row) */
#spend-control-view .sc-tbl tbody.sc-g tr:last-child td{border-bottom:1px solid var(--lv-border-soft)}
#spend-control-view .sc-tbl th,#spend-control-view .sc-tbl td{box-sizing:border-box;height:calc(var(--ctl-h) + 2 * var(--grid-pad-y) + 1px);padding-left:var(--grid-pad-x);padding-right:var(--grid-pad-x);font-size:var(--t-item) !important;line-height:1.35;vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
#spend-control-view .sc-tbl th:first-child{min-width:0}
#spend-control-view .sc-tbl td:first-child{max-width:none}
#spend-control-view .sc-tbl th:first-child,#spend-control-view .sc-tbl td:first-child{text-align:left}
#spend-control-view .sc-cell-text{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#spend-control-view .sc-tbl td.sc-rec b{color:var(--lv-primary);font-weight:800}
#spend-control-view .sc-tbl tr.is-unmapped td{background:#FFFBEB}
#spend-control-view .sc-tbl tr.is-pinned td{background:#FAF5FF}
#spend-control-view .sc-mb.is-pin{color:#6D28D9;font-weight:700}
#spend-control-view .sc-x{opacity:0}
#spend-control-view tr:hover .sc-x{opacity:1}
/* Match a regular control row, including its grid rule, with clearer totals. */
#spend-control-view .sc-tbl tfoot td{position:sticky;bottom:0;z-index:1;box-sizing:border-box;height:calc(var(--ctl-h) + 2 * var(--grid-pad-y) + 1px);font-size:var(--t-item);font-weight:700;line-height:1.35;vertical-align:middle}
#spend-control-view .sc-mbcell{display:inline-flex;width:100%;min-width:0;max-width:100%;align-items:center;justify-content:center;gap:6px}
#spend-control-view .sc-mb{display:inline-flex;min-width:0;max-width:100%;align-items:center;gap:5px;padding:2px 6px;margin:-2px -6px;border:1px solid transparent;border-radius:6px;background:none;font:inherit;color:inherit;cursor:pointer;font-variant-numeric:tabular-nums}
#spend-control-view .sc-mb i{font-style:normal;font-size:10px;color:var(--lv-faint);opacity:0;transition:opacity var(--lv-fast) var(--lv-ease)}
#spend-control-view tr:hover .sc-mb i{opacity:1}
#spend-control-view .sc-mb:hover{border-color:var(--lv-border-soft);background:var(--lv-surface)}
#spend-control-view .sc-x{border:0;background:none;color:var(--lv-faint);font-size:13px;line-height:1;padding:0 2px;cursor:pointer}
#spend-control-view .sc-x:hover{color:#B91C1C}

/* Daily plan controls stay within the existing row height. */
#spend-control-view .sc-daily.is-adjusted{color:var(--lv-primary);font-weight:700}
#spend-control-view .sc-tbl .sc-daily-inp{width:100%;min-width:0;max-width:112px;height:18px;margin:-2px 0;padding:0 6px;font-size:var(--t-item) !important;text-align:center;line-height:18px}
#spend-control-view .sc-tbl .sc-action-sel{width:84px;max-width:100%;height:20px;min-height:0;padding:0 6px;font-size:var(--t-item) !important;line-height:18px;appearance:none;-webkit-appearance:none;background-image:none;text-align:center;text-align-last:center}
#spend-control-view .sc-tbl .sc-tag{font-size:var(--t-item)}
#spend-control-view .sc-tbl td.sc-plan-month{font-weight:600}
#spend-control-view .sc-daily:focus-visible + .sc-x,#spend-control-view .sc-x:focus-visible{opacity:1}

/* The cap comparison remains per platform even when the table is filtered. */
#spend-control-view .sc-plan-summary{margin:0 0 var(--lv-gap);padding:12px 16px}
#spend-control-view .sc-plan-platforms{display:flex;flex-wrap:wrap;gap:10px 28px}
#spend-control-view .sc-plan-platform{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;font-size:var(--t-item);color:var(--lv-body);font-variant-numeric:tabular-nums}
#spend-control-view .sc-plan-platform b{color:var(--lv-text)}
#spend-control-view .sc-plan-room{color:var(--lv-muted)}
#spend-control-view .sc-plan-platform.is-over .sc-plan-room{color:var(--lv-danger-ink);font-weight:700}
#spend-control-view .sc-plan-help{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:8px;font-size:var(--t-note);color:var(--lv-muted)}

/* Phone + narrow: the insight sits under the title, never beside it (it
   squeezed the title to one word a line at 390px), and the KPI cards drop the
   small "per" chip so the label itself stays readable. */
@media (max-width:900px){
  #spend-control-view .sc-head{flex-direction:column;gap:12px}
  #spend-control-view .sc-head .sc-ins{flex:none;max-width:none;width:100%}
}
@media (max-width:767px){
  #spend-control-view .cap-q__per{display:none}
  #spend-control-view .sc-q{width:100%}
}
/* Enter saves the project budget for everyone (2026-10-13): the row says so. */
#spend-control-view .sc-mb i.sc-st{opacity:1;font-size:10.5px;font-weight:700;color:var(--lv-faint)}
#spend-control-view .sc-mb i.sc-st.is-ok{color:#047857}
/* The head and the Total row are one pair of bands — same size, weight, height
   and background (his note 2026-10-13; the P&L table's rule, 815fd61). */
#spend-control-view .sc-tbl thead th,#spend-control-view .sc-tbl tfoot td{font-size:var(--t-item) !important;font-weight:700 !important;line-height:1.35 !important;height:calc(var(--ctl-h) + 2 * var(--grid-pad-y) + 1px) !important;padding-top:0 !important;padding-bottom:0 !important;background:#F8FAFC !important}
#spend-control-view .sc-tbl thead th{letter-spacing:0;text-transform:none !important}
html[data-theme="dark"] #spend-control-view .sc-tbl thead th,html[data-theme="dark"] #spend-control-view .sc-tbl tfoot td{background:#1A1A1D !important}
/* Adjusted / day as a control (2026-10-13): the Action select's box — the
   same --ctl-* tokens — with × | figure | pencil in fixed slots, icons always
   visible, so it reads as editable and the figure is centred on every row. */
#spend-control-view .sc-dbox{display:inline-grid;grid-template-columns:22px minmax(0,1fr) 22px;align-items:center;width:100%;max-width:156px;height:var(--ctl-h);box-sizing:border-box;padding:0 3px;border:1px solid var(--ctl-border);border-radius:var(--ctl-radius);background:var(--ctl-bg);cursor:pointer;transition:border-color var(--lv-fast) var(--lv-ease),box-shadow var(--lv-fast) var(--lv-ease)}
#spend-control-view .sc-dbox:hover{border-color:#93C5FD}
#spend-control-view .sc-dbox__v{min-width:0;padding:0;border:0;background:none;font:inherit;font-size:var(--t-item);color:var(--lv-text);font-variant-numeric:tabular-nums;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
#spend-control-view .sc-dbox.is-adjusted .sc-dbox__v{color:var(--lv-primary);font-weight:700}
#spend-control-view .sc-dbox__x{display:grid;place-items:center;width:20px;height:20px;padding:0;border:0;border-radius:6px;background:none;color:var(--lv-faint);font-size:15px;line-height:1;cursor:pointer}
#spend-control-view button.sc-dbox__x:hover{color:#B91C1C;background:#FEF2F2}
#spend-control-view .sc-dbox__ic{display:grid;place-items:center;color:var(--lv-faint);font-size:12px;font-weight:800}
#spend-control-view .sc-dbox:hover .sc-dbox__ic{color:var(--lv-primary)}
#spend-control-view .sc-dbox__ic.is-ok{color:#047857}
#spend-control-view .sc-dbox.is-editing{grid-template-columns:minmax(0,1fr);border-color:var(--lv-primary);box-shadow:0 0 0 3px rgba(37,99,235,.12);cursor:text}
#spend-control-view .sc-tbl .sc-dbox__inp{width:100%;max-width:none;height:100%;min-width:0;margin:0;padding:0 8px;line-height:normal;border:0;outline:0;background:transparent;font:inherit;font-size:var(--t-item) !important;font-variant-numeric:tabular-nums;color:var(--lv-text);text-align:center}