/* ============================================================================
 * Array Operator — Portfolio Command Center (command-center.css)
 *
 * The fleet-scale front door for owners running many arrays. Sits ABOVE the
 * per-site fleet tree (sandbox) on the Arrays tab. KPI strip + a triage queue
 * of every flagged inverter across the whole portfolio, sorted by $ at stake.
 * Uses the existing dark-solarpunk tokens (--good/--warn/--bad/--sky/--ink).
 * ==========================================================================*/

#commandCenter{ margin-top:18px; }

/* ---- header ---- */
.cc-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.cc-headmain{ min-width:0; }
.cc-head h2{ font-size:21px; font-weight:760; letter-spacing:-.01em; color:var(--ink); }
.cc-head .cc-sub{ color:var(--faint); font-size:13px; margin-top:2px; }
/* one-line portfolio summary that replaces the old KPI box grid */
.cc-summary{ font-size:15px; line-height:1.5; color:var(--muted); margin-top:6px; max-width:62ch; }
.cc-summary b{ color:var(--ink); font-weight:720; font-variant-numeric:tabular-nums; }
.cc-summary b.ok{ color:var(--good2); }
.cc-summary b.warn{ color:var(--warn); }
.cc-summary .cc-summary-sub{ color:var(--faint); font-size:13px; font-variant-numeric:tabular-nums; }
.cc-summary .cc-summary-note{ display:block; color:var(--faint); font-size:12.5px; margin-top:3px; }
.cc-asof{ color:var(--faint); font-size:12px; font-variant-numeric:tabular-nums; }
.cc-asof b{ color:var(--good); }

/* ---- KPI strip ---- */
.cc-kpis{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:18px; }
@media(max-width:1100px){ .cc-kpis{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:620px){ .cc-kpis{ grid-template-columns:repeat(2,1fr); } }
.cc-kpi{
  /* Use the shared card tokens (like .tr-stat) so these KPIs follow the day/night
     theme instead of staying locked to the night-only hardcoded gradient. */
  background:linear-gradient(168deg,var(--card),var(--card2)); border:1px solid var(--line);
  border-radius:16px; padding:14px 16px; position:relative; overflow:hidden;
}
.cc-kpi .k{ font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); font-weight:650; }
.cc-kpi .v{ font-size:27px; font-weight:780; letter-spacing:-.02em; color:var(--ink); margin-top:6px; font-variant-numeric:tabular-nums; line-height:1.04; }
.cc-kpi .s{ font-size:12px; color:var(--muted); margin-top:3px; }
.cc-kpi.risk .v{ color:var(--bad); text-shadow:0 0 22px rgba(255,107,107,.25); }
.cc-kpi.recovered .v{ color:var(--good2); text-shadow:0 0 22px rgba(63,214,138,.25); }
.cc-kpi.flagged .v{ color:var(--warn); }
.cc-kpi.healthy .v{ color:var(--good2); }
/* tiny health meter under the % */
.cc-meter{ height:5px; border-radius:99px; background:rgba(255,255,255,.07); margin-top:9px; overflow:hidden; }
.cc-meter i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--good),var(--good2)); }

/* ---- toolbar ---- */
.cc-tools{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.cc-search{ position:relative; flex:1 1 220px; min-width:180px; }
.cc-search input{
  width:100%; box-sizing:border-box; background:var(--bg2); border:1px solid var(--line);
  border-radius:10px; padding:9px 12px 9px 32px; color:var(--ink); font-size:13.5px; outline:none;
}
.cc-search input:focus{ border-color:rgba(63,214,138,.5); }
.cc-search::before{ content:"⌕"; position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--faint); font-size:15px; }
.cc-chips{ display:inline-flex; gap:6px; background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:3px; }
.cc-chip{
  border:0; background:transparent; color:var(--muted); font-size:12.5px; font-weight:600;
  padding:6px 11px; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
}
.cc-chip:hover{ color:var(--ink); }
.cc-chip.on{ background:rgba(255,255,255,.07); color:var(--ink); }
.cc-chip .n{ font-variant-numeric:tabular-nums; font-size:11px; color:var(--faint); }
.cc-chip.on .n{ color:var(--ink); }
.cc-chip .d{ width:7px; height:7px; border-radius:50%; }
.cc-chip .d.crit{ background:var(--bad); } .cc-chip .d.under{ background:var(--warn); } .cc-chip .d.quiet{ background:var(--sky); }
.cc-sel{ background:var(--bg2); border:1px solid var(--line); border-radius:10px; color:var(--ink); font-size:12.5px; padding:8px 10px; cursor:pointer; }
.cc-spacer{ flex:1; }

/* bulk action bar (appears when rows selected) */
.cc-bulk{ display:none; align-items:center; gap:10px; }
.cc-bulk.show{ display:inline-flex; }
.cc-bulk .cnt{ font-size:12.5px; color:var(--muted); }
.cc-bulk .cnt b{ color:var(--ink); }
.cc-btn{ border:0; border-radius:9px; padding:8px 14px; font-size:12.5px; font-weight:680; cursor:pointer; }
.cc-btn.primary{ background:var(--good); color:#06281a; }
.cc-btn.primary:hover{ background:var(--good2); }
.cc-btn.ghost{ background:transparent; border:1px solid var(--line); color:var(--muted); }
.cc-btn.ghost:hover{ color:var(--ink); border-color:var(--good); }

/* ---- triage table ---- */
.cc-tablewrap{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:rgba(255,255,255,.012); }
.cc-table{ width:100%; border-collapse:collapse; font-size:13px; }
.cc-table thead th{
  text-align:left; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--faint);
  font-weight:650; padding:11px 14px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.02);
  white-space:nowrap; user-select:none;
}
.cc-table th.sortable{ cursor:pointer; }
.cc-table th.sortable:hover{ color:var(--muted); }
.cc-table th .arrow{ color:var(--good); margin-left:3px; }
.cc-table th.num, .cc-table td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.cc-table tbody tr.row{ border-bottom:1px solid rgba(255,255,255,.04); cursor:pointer; transition:background .12s; }
.cc-table tbody tr.row:hover{ background:rgba(255,255,255,.03); }
.cc-table tbody tr.row.sel{ background:rgba(63,214,138,.06); }
.cc-table td{ padding:11px 14px; vertical-align:middle; color:var(--ink); }
.cc-table td.shrink{ width:1%; white-space:nowrap; }
.cc-sevdot{ width:9px; height:9px; border-radius:50%; display:inline-block; flex:0 0 auto; }
.cc-sevdot.crit{ background:var(--bad); box-shadow:0 0 9px rgba(255,107,107,.6); }
.cc-sevdot.under{ background:var(--warn); box-shadow:0 0 9px rgba(255,180,84,.5); }
.cc-sevdot.quiet{ background:var(--sky); box-shadow:0 0 9px rgba(94,194,255,.5); }
.cc-site{ font-weight:650; color:var(--ink); }
.cc-site small{ display:block; color:var(--faint); font-weight:500; font-size:11.5px; margin-top:1px; }
.cc-inv{ color:var(--muted); }
.cc-inv b{ color:var(--ink); font-weight:600; }
/* deep-link to the inverter's vendor monitoring portal (per flagged row) */
.cc-vendor-link{ display:inline-block; margin-top:5px; font-size:11.5px; font-weight:650;
  color:#3b82f6; text-decoration:none; white-space:nowrap; }
.cc-vendor-link:hover{ text-decoration:underline; }
/* two parallel "open in…" links per row: the vendor portal + OUR inverter view */
.cc-inv-links{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:5px; }
.cc-inv-links .cc-vendor-link{ margin-top:0; }
/* the inverter-view link is a <button> — strip native chrome so it reads as a link */
button.cc-inv-link{ background:none; border:0; padding:0; font:inherit; cursor:pointer; color:var(--ao-oct,#7c3aed); }
button.cc-inv-link:hover{ text-decoration:underline; }
/* per-row primary action button (was a dead label) */
.cc-actcell{ white-space:nowrap; }
.cc-actbtn{ border:0; border-radius:8px; padding:7px 12px; font-size:12px; font-weight:680;
  cursor:pointer; white-space:nowrap; line-height:1.1; transition:filter .14s ease, transform .14s ease; }
.cc-actbtn:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.cc-actbtn.ea{ background:var(--ao-oct,#7c3aed); color:#fff; }
.cc-actbtn.claim{ background:var(--good,#2563eb); color:#fff; }
.cc-verdict{ font-size:12.5px; }
.cc-verdict.crit{ color:var(--bad); } .cc-verdict.under{ color:var(--warn); } .cc-verdict.quiet{ color:var(--sky); }
.cc-pi{ font-weight:700; color:var(--ink); }
.cc-pi small{ color:var(--faint); font-weight:500; }
.cc-loss{ font-weight:720; color:var(--bad); }
.cc-state{ font-size:11px; font-weight:650; padding:3px 9px; border-radius:99px; white-space:nowrap; }
.cc-state.new{ background:rgba(255,255,255,.06); color:var(--muted); }
.cc-state.progress{ background:rgba(94,194,255,.14); color:var(--sky); }
.cc-state.snoozed{ background:rgba(255,255,255,.04); color:var(--faint); }
.cc-check{ width:15px; height:15px; accent-color:var(--good); cursor:pointer; }

/* expand drawer */
.cc-drawer td{ padding:0; }
.cc-drawer .inner{
  padding:16px 18px 18px; background:rgba(2,6,12,.45); border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:1fr; gap:18px;
}
.cc-drawer h4{ font-size:13px; color:var(--ink); font-weight:700; margin:0 0 6px; }
.cc-drawer p{ margin:0 0 10px; color:var(--muted); font-size:13px; line-height:1.55; }
.cc-drawer p b{ color:var(--ink); }
.cc-evidence{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:8px 0 12px; }
.cc-evidence .e{ background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:10px; padding:9px 11px; }
.cc-evidence .en{ font-size:18px; font-weight:760; color:var(--ink); font-variant-numeric:tabular-nums; }
.cc-evidence .ec{ font-size:11px; color:var(--faint); margin-top:1px; }
.cc-rec{ display:flex; gap:10px; align-items:baseline; background:var(--day-tile,rgba(255,255,255,.03));
  border-left:3px solid var(--ao-oct,#7c3aed); border-radius:8px; padding:10px 12px; margin:2px 0 2px;
  font-size:12.5px; color:var(--ink); line-height:1.5; }
.cc-rec b{ color:var(--good2); }
.cc-rec-k{ flex:none; font-size:10px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ao-oct,#7c3aed); padding-top:1px; }
/* drawer action toolbar: EA repair (octarine = the AI), deep-links, workflow */
.cc-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:4px; }
.cc-act{ display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); border-radius:9px;
  background:var(--card,#fff); color:var(--ink); padding:8px 13px; font-size:12.5px; font-weight:640;
  cursor:pointer; text-decoration:none; white-space:nowrap; transition:border-color .14s ease, transform .14s ease, background .14s ease; }
.cc-act:hover{ transform:translateY(-1px); border-color:var(--ao-oct,#7c3aed); }
.cc-act.ea{ background:var(--ao-oct,#7c3aed); border-color:var(--ao-oct,#7c3aed); color:#fff; }
.cc-act.ea:hover{ filter:brightness(1.06); border-color:var(--ao-oct,#7c3aed); }
.cc-act.ghost{ background:transparent; color:var(--muted); font-weight:600; }
.cc-act.ghost:hover{ color:var(--ink); }
.cc-act.ghost.on{ color:var(--good2); border-color:var(--good); }
.cc-act-sp{ flex:1 1 auto; }
@media (max-width:600px){ .cc-act-sp{ flex-basis:100%; height:0; } }

.cc-empty{ padding:34px 16px; text-align:center; color:var(--faint); font-size:13.5px; }
.cc-foot{ color:var(--faint); font-size:12px; margin-top:10px; line-height:1.6; }
/* Per-array recoverable $ chips under the attention table (insurance/claims). */
.cc-arrisk-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.cc-arrisk{
  display:inline-flex; align-items:baseline; gap:6px;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  font-size:12px; font-weight:700; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.cc-arrisk b{ font-weight:700; color:var(--muted); max-width:14em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cc-arrisk small{ font-size:10px; font-weight:600; color:var(--faint); }

/* divider that demotes the old fleet tree to a per-site drill-down */
.cc-treedivider{ display:flex; align-items:baseline; gap:10px; margin:30px 0 4px; padding-top:20px; border-top:1px solid var(--line); }
.cc-treedivider h3{ font-size:16px; font-weight:700; color:var(--ink); }
.cc-treedivider span{ color:var(--faint); font-size:12.5px; }

/* ---- collapsible triage header — a big, obviously-clickable bar ---- */
.cc-collapsible{
  cursor:pointer; user-select:none; align-items:center;
  border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.025);
  padding:16px 18px; margin:30px 0 0;
  transition:background .14s, border-color .14s, box-shadow .14s;
}
.cc-collapsible:hover{
  background:rgba(63,214,138,.07); border-color:rgba(63,214,138,.45);
  box-shadow:0 10px 28px -16px rgba(63,214,138,.55);
}
.cc-collapsible h3{ font-size:17px; }
.cc-collapsible:hover h3{ color:var(--good2); }
/* chevron in an accent disc */
.cc-collapsible .cc-chevron{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:28px; height:28px; border-radius:50%; background:rgba(63,214,138,.16);
  color:var(--good2); font-size:12px; line-height:1;
  transition:transform var(--motion-fast) var(--ease-out), background .14s; transform:rotate(90deg);
}
.cc-collapsible.collapsed .cc-chevron{ transform:rotate(0deg); }
.cc-collapsible:hover .cc-chevron{ background:rgba(63,214,138,.28); }
.cc-collapsible .cc-spacerflex{ flex:1; }
/* the Show / Hide pill — filled accent, large hit target */
.cc-collapsible .cc-collapse-hint{
  align-self:center; white-space:nowrap; font-size:13.5px; font-weight:720; color:#06281a;
  background:linear-gradient(180deg,var(--good2),var(--good)); border-radius:11px;
  padding:10px 18px; box-shadow:0 6px 18px -6px rgba(63,214,138,.6); transition:filter .14s, transform .08s;
}
.cc-collapsible:hover .cc-collapse-hint{ filter:brightness(1.08); }
.cc-collapsible:active .cc-collapse-hint{ transform:translateY(1px); }

/* ---- fleet-tree full-screen mode (CSS overlay; robust in any webview) ---- */
body.sb-fs-lock{ overflow:hidden; }
#sbWrap.sb-fs{
  position:fixed; inset:0; z-index:9000; width:100vw; max-width:100vw;
  left:0; margin:0; transform:none; padding:0; border:0; border-radius:0; background:var(--bg);
}
#sbWrap.sb-fs .sb-viewport{ height:100vh !important; max-height:none; }
#sbWrap.sb-fs .sb-foot{ display:none; }

/* ---- fleet-tree sandbox: tight sides, canvas fills the whole card ----
 * Align it to the content column (page gutters), then FLOAT the controls over
 * the top-right of the canvas instead of giving them a header row — so the fleet
 * tree fills the entire card and extends up beneath the buttons. */
#sbWrap{ position:relative; left:auto; transform:none; width:100%; max-width:100%; margin-left:0; margin-right:0; padding:14px; }

/* controls float over the canvas, top-right */
.sb-head{ position:absolute; top:14px; right:14px; left:14px; width:auto; margin:0; z-index:6; gap:10px; pointer-events:none; }
/* left cluster (Overview / Tree-view + Show-all) floats top-LEFT */
.sb-head-left{ position:absolute; top:0; left:0; pointer-events:none; }
.sb-head-left .sb-head-btns{ pointer-events:auto; }
/* the Vendor⇄Utility slider sits in sb-head-left but OUTSIDE sb-head-btns, so it
   needs its own pointer-events re-enable or the parent's none swallows its clicks.
   position+z-index guarantee it stacks ABOVE the canvas/viewport (which can form
   its own stacking context via transform) so nothing can cover it. */
.sb-head-left .sb-streamtoggle{ pointer-events:auto !important; position:relative; z-index:8;
  background:rgba(8,12,18,.6); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  margin-top:8px; margin-left:0; }
.sb-head-left .sb-streamtoggle .sb-stream-seg{ pointer-events:auto !important; }
.sb-head-actions{ position:absolute; top:0; right:0; pointer-events:auto; align-items:flex-end; gap:9px; }
/* frosted clusters so buttons + legend stay legible over the fleet behind them */
.sb-head-btns{ background:rgba(8,12,18,.6); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); border:1px solid var(--line); border-radius:13px; padding:6px; }
.sb-legend{ background:rgba(8,12,18,.55); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); border:1px solid var(--line); border-radius:11px; padding:5px 11px; }

/* the canvas viewport now fills the card top-to-bottom (no header row above it) */
.sb-viewport{ height:min(80vh,720px); min-height:560px; }

/* ============================================================================
 * Reports tab — automatic billing reports (reports.js / .rb-*)
 * ==========================================================================*/
.rb-upload{ margin-bottom:18px; }
.rb-drop{ display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;
  margin-top:16px; padding:30px 18px; border:1.5px dashed var(--line); border-radius:16px;
  background:rgba(255,255,255,.02); cursor:pointer; transition:border-color .15s, background .15s; }
.rb-drop:hover, .rb-drop-over{ border-color:rgba(63,214,138,.55); background:rgba(63,214,138,.06); }
.rb-drop-ico{ font-size:22px; color:var(--good); }
.rb-drop-main{ font-weight:650; color:var(--ink); font-size:14.5px; }
.rb-drop-sub{ font-size:12px; color:var(--faint); }
.rb-status{ display:inline-block; font-size:12.5px; margin-top:10px; color:var(--muted); }
.rb-status.rb-ok{ color:var(--good); } .rb-status.rb-err{ color:var(--bad); }
.rb-status.rb-busy{ color:var(--sky); }
.rb-sub-status{ margin-top:0; }

.rb-preview{ margin-bottom:18px; }
.rb-matchgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:13px; margin:14px 0 4px; }
.rb-matchgrid > div{ display:flex; flex-direction:column; gap:3px; }
.rb-k{ font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); }
.rb-v{ font-size:15px; font-weight:620; color:var(--ink); }
.rb-amt{ color:var(--good); }
.rb-warn{ margin:12px 0; padding:10px 13px; border-radius:10px; font-size:12.5px; line-height:1.5;
  background:rgba(255,180,84,.09); border:1px solid rgba(255,180,84,.3); color:var(--warn); }

.rb-controls{ display:flex; flex-wrap:wrap; gap:18px; margin:18px 0 4px; }
.rb-ctl{ display:flex; flex-direction:column; gap:7px; }
.rb-ctl .rl{ font-size:11.5px; font-weight:600; color:var(--muted); letter-spacing:.02em; }
.rb-seg{ display:inline-flex; background:rgba(255,255,255,.04); border:1px solid var(--line);
  border-radius:11px; padding:3px; gap:2px; }
.rb-seg button{ border:0; background:transparent; color:var(--muted); font:600 12.5px/1 inherit;
  padding:8px 13px; border-radius:8px; cursor:pointer; transition:background .12s,color .12s; }
.rb-seg button:hover{ color:var(--ink); }
.rb-seg button.on{ background:rgba(63,214,138,.16); color:var(--good2); }
.rb-slider button.on{ background:rgba(94,194,255,.16); color:var(--sky); }
.rb-checks{ display:flex; flex-direction:column; gap:7px; }
.rb-checks label{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ink); cursor:pointer; }
.rb-emails{ display:flex; gap:14px; flex-wrap:wrap; margin-top:16px; }
.rb-emails .rep-fld{ flex:1; min-width:190px; }
.rb-actions{ display:flex; align-items:center; gap:11px; margin-top:18px; flex-wrap:wrap; }
.rb-save{ background:var(--good); color:#06231a; border:0; padding:10px 18px; border-radius:10px;
  font-weight:700; cursor:pointer; }
.rb-cancel{ background:transparent; border:1px solid var(--line); color:var(--muted);
  padding:10px 16px; border-radius:10px; cursor:pointer; }

/* ---- sample-spreadsheet hint (upload card) ---- */
.rb-sample-hint{ margin:12px 0 0; font-size:12.5px; line-height:1.55; color:var(--faint); }
.rb-sample-link{ color:var(--sky); font-weight:600; text-decoration:none; }
.rb-sample-link:hover{ text-decoration:underline; }

/* ---- bulk offtaker import (review table) ---- */
.rb-bulk-tablewrap{ margin-top:14px; max-height:360px; overflow:auto; border:1px solid var(--line); border-radius:10px; }
.rb-bulk-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.rb-bulk-table th{ position:sticky; top:0; background:var(--card2,var(--card)); text-align:left;
  padding:8px 10px; font-weight:650; color:var(--muted); border-bottom:1px solid var(--line); }
.rb-bulk-table td{ padding:7px 10px; border-bottom:1px solid var(--line); color:var(--ink); white-space:nowrap; }
.rb-bulk-table td:nth-child(5), .rb-bulk-table td:nth-child(6){ white-space:normal; }
.rb-bulk-table tr.rb-bulk-ok td:last-child{ color:var(--good); }
.rb-bulk-table tr.rb-bulk-err{ background:rgba(220,38,38,.05); }
.rb-bulk-table tr.rb-bulk-err td:last-child{ color:var(--bad); }

/* ---- bulk import: review & correct (correctable array match + confidence) ---- */
.rb-rev-summary{ display:flex; align-items:center; gap:9px; font-size:13px; margin:6px 2px 2px; }
.rb-rev-summary b{ font-weight:750; }
.rb-rev-sum-ok{ color:var(--good); } .rb-rev-sum-warn{ color:var(--warn); } .rb-rev-sum-bad{ color:var(--bad); }
.rb-rev-sum-sep{ color:var(--faint); }
.rb-rev-table td{ white-space:normal; vertical-align:top; }
.rb-rev-table .rb-rev-in{ width:100%; box-sizing:border-box; background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:8px; color:var(--ink); padding:6px 8px; font:inherit; font-size:12.5px; }
.rb-rev-table .rb-rev-in:focus{ outline:none; border-color:rgba(94,194,255,.55); background:rgba(94,194,255,.05); }
.rb-rev-table .rb-rev-pct .rb-rev-in, .rb-rev-table .rb-rev-disc .rb-rev-in{ max-width:90px; }
.rb-rev-name{ min-width:150px; } .rb-rev-arr{ min-width:260px; } .rb-rev-email{ min-width:150px; }
.rb-rev-arrbox{ display:flex; align-items:center; gap:7px; }
.rb-rev-arrbox .rb-rev-arrsel{ flex:1 1 auto; cursor:pointer; }
.rb-rev-subbox{ display:flex; align-items:center; gap:7px; margin-top:5px; }
.rb-rev-subbox .rb-rev-subsel{ flex:1 1 auto; cursor:pointer; }
.rb-rev-raw{ font-size:10.5px; color:var(--faint); margin-top:3px; }
.rb-rev-err{ font-size:11px; color:var(--bad); margin-top:3px; }
/* confidence badge */
.rb-conf{ flex:0 0 auto; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px; white-space:nowrap; }
.rb-conf-ok{ color:var(--sky); background:rgba(94,194,255,.14); }
.rb-conf-warn{ color:#8a6414; background:rgba(245,158,11,.16); }
.rb-conf-bad{ color:var(--bad); background:rgba(220,38,38,.12); }
.rb-conf-confirm{ border:0; cursor:pointer; font:inherit; font-size:10.5px; font-weight:700; }
.rb-conf-confirm:hover{ background:rgba(245,158,11,.28); }
/* status pill */
.rb-pill{ font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:999px; white-space:nowrap; }
.rb-pill-ok{ color:var(--good); background:rgba(63,214,138,.14); }
.rb-pill-warn{ color:#8a6414; background:rgba(245,158,11,.16); }
.rb-pill-bad{ color:var(--bad); background:rgba(220,38,38,.12); }
.rb-rev-table tr.rb-rev-needs_review{ background:rgba(245,158,11,.05); }
.rb-rev-table tr.rb-rev-blocked{ background:rgba(220,38,38,.05); }

/* ---- PHASE 1: column-mapping review ("We read your spreadsheet") ---- */
.rb-col-via{ color:var(--faint); font-style:italic; }
.rb-col-warns{ font-size:12px; color:#8a6414; background:rgba(245,158,11,.10);
  border:1px solid rgba(245,158,11,.28); border-radius:9px; padding:7px 11px; margin:2px 2px 12px; }
/* two-up: field map on the left, live data preview on the right; stacks when narrow */
.rb-col-grid{ display:grid; grid-template-columns:minmax(280px,1fr) minmax(300px,1.35fr);
  gap:16px; align-items:start; }
@media (max-width:820px){ .rb-col-grid{ grid-template-columns:1fr; } }
.rb-col-mapcard, .rb-col-prevcard{ border:1px solid var(--line); border-radius:12px;
  background:rgba(255,255,255,.012); padding:12px 13px; }
.rb-col-maptable{ width:100%; border-collapse:collapse; font-size:12.5px; }
.rb-col-maptable thead th{ text-align:left; font-size:10.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--faint); font-weight:650; padding:0 8px 8px; }
.rb-col-maptable td{ padding:6px 8px; border-top:1px solid var(--line); vertical-align:middle; }
.rb-col-maptable tbody tr:first-child td{ border-top:0; }
.rb-col-flabel{ color:var(--ink); font-weight:600; white-space:nowrap; }
.rb-col-star{ color:var(--bad); font-weight:800; }
.rb-col-frow.rb-col-missing{ background:rgba(220,38,38,.05); }
.rb-col-select{ width:100%; box-sizing:border-box; background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:8px; color:var(--ink); font-size:12.5px;
  padding:6px 8px; cursor:pointer; }
.rb-col-select:focus{ outline:none; border-color:rgba(94,194,255,.55); background:rgba(94,194,255,.05); }
.rb-col-fbadge{ text-align:right; white-space:nowrap; }
.rb-col-badge{ display:inline-block; }
.rb-col-skip{ font-size:10.5px; font-weight:700; color:var(--faint); }
.rb-col-pick{ font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px;
  color:var(--faint); background:rgba(255,255,255,.06); white-space:nowrap; }
/* live data preview — assigned columns tint sky-blue to mirror the confidence accent */
.rb-col-prevlabel{ font-size:11px; color:var(--faint); margin-bottom:8px; }
.rb-col-prevwrap{ max-height:280px; overflow:auto; border:1px solid var(--line); border-radius:9px; }
.rb-col-prevtable{ width:100%; border-collapse:collapse; font-size:11.5px; }
.rb-col-prevtable th, .rb-col-prevtable td{ padding:6px 9px; border-bottom:1px solid var(--line);
  border-right:1px solid var(--line); text-align:left; white-space:nowrap; color:var(--ink); }
.rb-col-prevtable th:last-child, .rb-col-prevtable td:last-child{ border-right:0; }
.rb-col-pth{ position:sticky; top:0; background:var(--card2,var(--card)); vertical-align:top; }
.rb-col-pcol{ display:block; font-size:9.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--faint); font-weight:650; }
.rb-col-phdr{ display:block; color:var(--ink); font-weight:650; margin-top:1px; }
.rb-col-ptag{ display:inline-block; margin-top:4px; font-size:9.5px; font-weight:750;
  color:var(--sky); background:rgba(94,194,255,.16); border-radius:999px; padding:1px 7px; }
.rb-col-ptd{ color:var(--muted); font-variant-numeric:tabular-nums; }
.rb-col-pon{ background:rgba(94,194,255,.09); }
.rb-col-pth.rb-col-pon{ background:rgba(94,194,255,.16); }
.rb-col-prevempty{ color:var(--faint); font-style:italic; text-align:center; padding:14px; }
/* gate note + compact summary on Phase 2 */
.rb-col-gate{ font-size:12px; color:var(--bad); }
.rb-col-summary{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; font-size:12px;
  color:var(--muted); background:rgba(94,194,255,.06); border:1px solid rgba(94,194,255,.22);
  border-radius:9px; padding:7px 11px; margin:6px 2px 2px; }
.rb-col-sumhead{ font-weight:700; color:var(--faint); text-transform:uppercase;
  letter-spacing:.05em; font-size:10.5px; }
.rb-col-sumpart b{ color:var(--ink); font-weight:650; }
.rb-col-sumsep{ color:var(--faint); }
.rb-col-sumchange{ margin-left:auto; background:transparent; border:0; cursor:pointer;
  color:var(--sky); font:inherit; font-size:12px; font-weight:650; padding:0; text-decoration:underline; }
.rb-col-sumchange:hover{ color:var(--good); }

/* ---- add a customer manually ---- */
.rb-manual-toggle{ margin-top:18px; display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; }
.rb-manual-toggle h3{ font-size:15.5px; }
.rb-manual-toggle p{ font-size:12.5px; color:var(--faint); line-height:1.5; max-width:46ch; }
.rb-manual-toggle .rb-btn{ white-space:nowrap; }
.rb-manual-form{ margin-top:18px; }
/* unified Add-an-offtaker panel (Type it in / Upload a spreadsheet tabs) */
.rb-add-head{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.rb-add-head h3{ margin:0; }
.rb-add-tabs{ display:inline-flex; gap:2px; background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:12px; padding:3px; }
.rb-add-tabs button{ background:transparent; border:0; color:var(--muted); cursor:pointer;
  font-size:12.5px; font-weight:600; padding:6px 13px; border-radius:9px; }
.rb-add-tabs button.on{ background:rgba(63,214,138,.16); color:var(--good); }
.rb-add-head .rb-cancel{ margin-left:auto; }
.rb-add-sub{ color:var(--faint); font-size:12.5px; margin:8px 2px 14px; }
/* wizard spreadsheet path */
.rb-wiz-upload{ margin-top:16px; padding-top:14px; border-top:1px dashed var(--line);
  display:flex; flex-direction:column; gap:7px; }
.rb-wiz-or{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--faint); align-self:center; }
.rb-wiz-uplabel{ display:block; cursor:pointer; font-size:13px; color:var(--muted);
  background:rgba(255,255,255,.03); border:1px dashed var(--line); border-radius:10px;
  padding:12px 14px; line-height:1.5; }
.rb-wiz-uplabel:hover{ border-color:rgba(63,214,138,.5); }
.rb-wiz-uplabel b{ color:var(--ink); }
.rb-wiz-cust-saved{ font-size:11.5px; font-weight:700; color:var(--good);
  background:rgba(63,214,138,.1); border-radius:999px; padding:2px 9px; }
/* Two fixed columns (was auto-fit): at 3+ auto-columns the Solar-credit-rate cell
   wrapped DIAGONAL to the share field, breaking Bruce's "rate right next to or
   below the share" (C5). Two columns pin the money pair side by side at every
   desktop width and mirror the accordion editor's .rb-cust-grid language. */
.rb-mform-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; margin:14px 0 4px; }
@media(max-width:680px){ .rb-mform-grid{ grid-template-columns:1fr; } }
.rb-mform-grid .rep-fld{ display:flex; flex-direction:column; gap:6px; }
.rb-mform-grid input, .rb-mform-grid select{ width:100%; box-sizing:border-box;
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:10px;
  color:var(--ink); padding:9px 11px; font:inherit; font-size:13.5px; }
.rb-mform-grid input:focus, .rb-mform-grid select:focus{ outline:none;
  border-color:rgba(94,194,255,.55); background:rgba(94,194,255,.05); }
.rb-mform-grid select{ cursor:pointer; }

/* ---- searchable net meter group combobox (Ford 2026-07-09) ----------------
   Overlays a type-to-filter input on the native <select>, which stays in the DOM
   (visually hidden) as the value/onchange source of truth. Themed via variables so
   it reads on both the dark default and the light (day) theme; the .nmg-combo-input
   also inherits the day-mode `.rep-fld input` white-field rule for free. */
.nmg-combo{ position:relative; }
.rb-mform-grid select.nmg-combo-native{ position:absolute; opacity:0; width:1px; height:1px;
  padding:0; margin:0; border:0; pointer-events:none; }
.nmg-combo-input{ width:100%; box-sizing:border-box; background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:10px; color:var(--ink);
  padding:9px 30px 9px 11px; font:inherit; font-size:13.5px; cursor:text; }
.nmg-combo-input:focus{ outline:none; border-color:rgba(94,194,255,.55); background:rgba(94,194,255,.05); }
.nmg-combo-caret{ position:absolute; right:11px; top:50%; transform:translateY(-50%);
  font-size:11px; color:var(--faint); cursor:pointer; transition:transform var(--motion-fast) var(--ease-out); }
.nmg-combo.is-open .nmg-combo-caret{ transform:translateY(-50%) rotate(180deg); }
.nmg-combo-list{ position:absolute; z-index:46; left:0; right:0; top:calc(100% + 4px);
  max-height:288px; overflow-y:auto; background:var(--card); border:1px solid var(--line);
  border-radius:11px; padding:5px; display:flex; flex-direction:column; gap:2px;
  box-shadow:0 14px 40px -12px rgba(15,23,42,.4); }
/* THE ACTUAL BUG (Ford, 2026-07-09, after 6 rounds of chasing the JS): `display:flex`
   above is an AUTHOR rule that OVERRIDES the UA `[hidden]{display:none}` (author beats
   UA at equal specificity), so `list.hidden = true` set the attribute but the list
   stayed VISIBLE — it never collapsed no matter what the JS did. The exact same trap
   was already fixed for .rb-track-global higher up. This restores the hide. */
.nmg-combo-list[hidden]{ display:none !important; }
/* flex:0 0 auto is load-bearing: the list is a flex column with a max-height, so
   without it the default flex-shrink:1 crushes each row from ~36px down to ~18px
   and clips the text whenever there are more groups than fit — that was the
   overlapping/"messed up" list. Fixed rows keep full height and the list scrolls. */
.nmg-combo-item{ display:block; width:100%; flex:0 0 auto; text-align:left; border:1px solid transparent;
  background:transparent; color:var(--ink); font:inherit; font-size:13px; line-height:1.35;
  padding:8px 10px; border-radius:8px; cursor:pointer; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.nmg-combo-item:hover, .nmg-combo-item.is-active{ border-color:rgba(94,194,255,.5); background:rgba(94,194,255,.10); }
.nmg-combo-item.is-sel{ font-weight:700; }
.nmg-combo-none{ flex:0 0 auto; padding:9px 10px; font-size:12.5px; color:var(--faint); }

/* ---- field hint (under an input) ---- */
.rb-fld-hint{ font-size:11px; color:var(--faint); margin-top:3px; line-height:1.4; }

/* ---- array-first "Invoices from:" resolution line + override picker ---- */
.rb-arr-billline{ display:block; font-size:11.5px; line-height:1.45; margin-top:5px; min-height:0; }
.rb-arr-billline:empty{ display:none; }
.rb-arr-billline.rb-arr-hasbill{ color:var(--faint); }
.rb-arr-billline.rb-arr-hasbill b{ color:var(--sky); font-weight:650; }
.rb-arr-billline.rb-arr-nobill{ color:#8a6414; background:rgba(245,158,11,.09);
  border:1px solid rgba(245,158,11,.3); border-radius:8px; padding:6px 9px; margin-top:7px; }
.rb-arr-override{ margin-top:9px; }
.rb-arr-override .rl{ font-size:11.5px; color:var(--muted); }

/* ---- BCC info note (add-offtaker form) ---- */
.rb-bcc-note{ font-size:12.5px; color:var(--faint); line-height:1.5; margin:16px 0 0;
  background:rgba(94,194,255,.06); border:1px solid var(--line); border-radius:10px; padding:11px 14px; }
.rb-bcc-note b{ color:var(--ink); }
.rb-autosend-note{ font-size:12.5px; color:var(--faint); line-height:1.5; margin:12px 0 0;
  background:rgba(245,158,11,.07); border:1px solid rgba(245,158,11,.25); border-radius:10px; padding:11px 14px; }
.rb-autosend-note b{ color:var(--ink); }

/* ---- Fleet-wide settings folds (master rate + master email) — collapsed by default ---- */
.rb-fleet-fold{
  margin:0 0 10px; padding:0;
  border-radius:14px; border:1px solid var(--line);
  background:linear-gradient(165deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  max-width:none; width:100%; box-sizing:border-box;
  list-style:none;
}
.rb-fleet-fold-sum{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 14px;
  cursor:pointer; list-style:none;
  padding:12px 16px;
  font-weight:700; color:var(--ink);
  user-select:none;
}
.rb-fleet-fold-sum::-webkit-details-marker{ display:none; }
.rb-fleet-fold-sum::before{
  content:"▸"; display:inline-block; width:1em; margin-right:2px;
  color:var(--faint); font-weight:700; transition:transform .12s;
}
.rb-fleet-fold[open] > .rb-fleet-fold-sum::before{ transform:rotate(90deg); }
.rb-fleet-fold-title{ font-size:14px; font-weight:750; letter-spacing:-.01em; }
.rb-fleet-fold-hint{ font-size:12px; font-weight:550; color:var(--faint); }
.rb-fleet-fold-body{ padding:0 16px 16px; }
.rb-fleet-fold-body > .rb-gr-main,
.rb-fleet-fold-body > .rb-mm-head{ margin-bottom:12px; }

/* ---- global default rate bar (master solar credit rate for all offtakers) ---- */
.rb-globalrate.rb-fleet-fold{ /* fold shell above */ }
.rb-globalrate .rb-gr-main{ flex:1 1 280px; min-width:0; }
.rb-globalrate .rb-gr-main h3{ font-size:15.5px; margin:0 0 .25em; font-weight:750; letter-spacing:-.01em; }
.rb-globalrate .rb-gr-main p{ font-size:12.5px; color:var(--faint); line-height:1.5; max-width:72ch; margin:0; }
.rb-globalrate .rb-gr-main p b{ color:var(--ink); font-weight:650; }

/* ── Master offtaker email (body inside fold) ── */
.rb-mastermail.rb-fleet-fold{ margin:0 0 14px; }
.rb-mm-sectionlab{
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--faint); margin:0 0 10px;
}
.rb-mm-head{ margin-bottom:14px; }
.rb-mm-main{ min-width:0; }
.rb-mm-main h3{ font-size:15.5px; margin:0 0 .35em; font-weight:750; letter-spacing:-.01em; }
.rb-mm-main p{ font-size:12.5px; color:var(--faint); line-height:1.55; max-width:78ch; margin:0; }
.rb-mm-main p b{ color:var(--ink); font-weight:650; }
/* Soft stage around preview + CTA — quiet, not brand-primary fill */
.rb-mm-stage{
  border-radius:16px;
  padding:16px 16px 18px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
}
.rb-mm-eyebrow{
  font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--faint); margin:0 0 10px;
}
.rb-mm-preview{
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--card,#fff); box-shadow:0 1px 0 rgba(15,23,42,.03);
  cursor:pointer;
  transition:box-shadow .15s, border-color .15s;
}
.rb-mm-preview:hover{
  border-color:rgba(37,99,235,.35);
  box-shadow:0 6px 18px -12px rgba(37,99,235,.35);
}
.rb-mm-preview:focus-visible{
  outline:2px solid var(--good,#2563eb); outline-offset:2px;
}
.rb-mm-env{
  padding:14px 18px; font-size:12.5px; color:var(--muted);
  border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:7px;
}
.rb-mm-envlab{
  display:inline-block; min-width:4.5rem; font-size:10px; font-weight:700;
  letter-spacing:.05em; color:var(--faint); margin-right:6px;
}
.rb-mm-subj{ color:var(--ink); font-weight:650; }
.rb-mm-body{
  padding:16px 18px; font-size:13px; line-height:1.55; color:var(--ink);
  max-height:240px; overflow-y:auto; min-height:88px;
}
.rb-mm-body p{ margin:0 0 .65em; }
.rb-mm-body p:last-child{ margin-bottom:0; }
.rb-mm-mute{ color:var(--faint); font-size:12.5px; }
.rb-mm-foot{
  padding:10px 18px 12px; font-size:11.5px; color:var(--faint);
  border-top:1px solid var(--line);
}
/* Quiet secondary CTA — not brand-primary fill (Ford 2026-07-20: undo blue/primary bar) */
.rb-mm-cta,
#rbMasterEmailOpen.rb-mm-cta{
  display:flex; width:100%; box-sizing:border-box;
  margin:0 0 14px; padding:12px 16px;
  justify-content:flex-start; align-items:center; gap:12px;
  text-align:left;
  font-weight:650; font-size:14px; line-height:1.25;
  background:rgba(255,255,255,.04);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:12px;
  cursor:pointer;
  box-shadow:none;
  transition:border-color .12s, background .12s;
}
.rb-mm-cta:hover,
#rbMasterEmailOpen.rb-mm-cta:hover{
  filter:none;
  background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.18);
  box-shadow:none;
}
.rb-mm-cta:active,
#rbMasterEmailOpen.rb-mm-cta:active{
  transform:none;
}
.rb-mm-cta-ico{
  flex:none; width:34px; height:34px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); font-size:15px;
}
.rb-mm-cta-label{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.rb-mm-cta-title{ font-weight:700; letter-spacing:-.01em; }
.rb-mm-cta-sub{
  font-size:11.5px; font-weight:550; color:var(--faint); opacity:1; letter-spacing:0;
}
.rb-mm-status{ margin-top:10px; font-size:12px; color:var(--faint); min-height:1em; }
.rb-mm-retry{
  background:none; border:0; padding:0; color:var(--good,#2563eb);
  font:inherit; font-weight:650; cursor:pointer; text-decoration:underline;
}
/* invoice-template upload card — operator's own format */
.rb-tpl{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:16px; }
.rb-tpl .rb-tpl-main h3{ font-size:15.5px; margin:.2em 0 .15em; }
.rb-tpl .rb-tpl-main p{ font-size:12.5px; color:var(--faint); line-height:1.5; max-width:52ch; margin:0; }
.rb-tpl-ctl{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rb-tpl-status{ font-size:12.5px; color:var(--faint); }
.rb-tpl-status.rb-tpl-have{ color:var(--ink); }
.rb-tpl-status.rb-err{ color:#e06666; }
.rb-tpl-edit{ flex-basis:100%; width:100%; margin-top:14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.rb-tpl-fmt-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); font-weight:600; }
.rb-tpl-enable{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); cursor:pointer; }
.rb-tpl-adv{ margin-top:8px; }
.rb-tpl-adv summary{ cursor:pointer; font-size:12.5px; color:var(--sky); }
.rb-tpl-tokens{ font-size:11.5px; color:var(--faint); line-height:1.9; margin:8px 0; }
.rb-tpl-tokens code{ background:rgba(94,194,255,.1); color:var(--sky); padding:1px 5px; border-radius:5px; }
.rb-tpl-html{ width:100%; box-sizing:border-box; min-height:220px; resize:vertical;
  font:12px/1.5 ui-monospace,Menlo,Consolas,monospace; background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:10px; color:var(--ink); padding:10px; }
.rb-tpl-html:focus{ outline:none; border-color:rgba(94,194,255,.55); }
.rb-tpl-editbtns{ display:flex; align-items:center; gap:10px; margin-top:8px; flex-wrap:wrap; }
.rb-tpl-estatus{ font-size:12px; color:var(--faint); }
/* drag & drop a template file onto the box */
.rb-tpl{ position:relative; }
.rb-tpl-drophint{ font-size:11.5px; color:var(--faint); margin:8px 0 0; }
.rb-tpl-drag{ outline:2px dashed var(--good,#2563eb); outline-offset:6px; border-radius:12px;
  background:rgba(37,99,235,.04); }
.rb-tpl-drag::after{ content:"⬆  Drop your invoice file to upload"; position:absolute; inset:0; z-index:6;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px;
  color:var(--good,#2563eb); background:rgba(237,243,255,.95); border-radius:12px; pointer-events:none; }
/* template box folded into the bottom of the approval card so the page reads as
   one element: strip its own card chrome + sit it under a divider. */
.rb-tpl-divider{ height:1px; background:var(--line); margin:22px 0 0; }
.rb-inbox .rb-tpl.rep-card{ border:0 !important; box-shadow:none !important;
  background:transparent !important; padding:18px 0 0 !important; margin:0 !important; border-radius:0 !important; }
/* compare buttons sit UNDER the approval invoice preview (top margin, not bottom) */
/* compare buttons sit ABOVE the invoice preview and STRETCH to its full width
   (each takes half) so the preview block reads more square */
.rb-invfmt-btns{ margin:12px 0 12px !important; }
.rb-invfmt-btns button{ flex:1 1 0; justify-content:center; }
.rb-tpl-estatus.rb-ok{ color:#3fb950; }
.rb-tpl-estatus.rb-err{ color:#e06666; }

/* ── invoice template (left) + file library (right) share one row ── */
.rb-tpl-row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px;
  align-items:stretch; margin-bottom:16px; }
@media(max-width:980px){ .rb-tpl-row{ grid-template-columns:1fr; } }
.rb-tpl-row .rb-tpl{ margin-bottom:0; }   /* the row owns the margin now */

/* file library — every stored file for the operator, latest featured */
.rb-files{ display:flex; flex-direction:column; min-width:0; }
.rb-files-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:13px; }
.rb-files-head h3{ font-size:15.5px; margin:0; }
.rb-files-count{ font-size:12px; color:var(--faint); }
.rb-files-body{ flex:1 1 auto; min-width:0; }
.rb-files-empty{ font-size:12.5px; color:var(--faint); line-height:1.6; padding:14px 0; max-width:42ch; }

/* featured (latest upload) — center stage */
.rb-file-feat{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:5px;
  width:100%; box-sizing:border-box; position:relative; cursor:pointer; padding:20px 16px 16px;
  border:1.5px solid rgba(94,194,255,.30); border-radius:14px;
  background:linear-gradient(180deg,rgba(94,194,255,.08),rgba(94,194,255,.02));
  transition:border-color .15s, transform .12s; }
.rb-file-feat:hover{ border-color:rgba(94,194,255,.62); transform:translateY(-1px); }
.rb-file-feat .badge{ position:absolute; top:10px; left:12px; font-size:9px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; color:var(--sky); background:rgba(94,194,255,.16); padding:3px 8px; border-radius:20px; }
.rb-file-feat .ico{ font-size:42px; line-height:1; margin-top:10px; }
.rb-file-feat .name{ font-size:13.5px; font-weight:720; color:var(--ink); word-break:break-word; max-width:36ch; line-height:1.35; }
.rb-file-feat .role{ font-size:11.5px; color:var(--faint); }
.rb-file-feat .meta{ font-size:11px; color:var(--sky); margin-top:3px; font-weight:600; }

/* the rest — compact, tappable rows */
.rb-files-list{ display:flex; flex-direction:column; gap:7px; margin-top:12px; }
.rb-file{ display:flex; align-items:center; gap:11px; width:100%; box-sizing:border-box; text-align:left;
  background:transparent; border:1px solid var(--line); border-radius:10px; padding:9px 11px; cursor:pointer;
  transition:border-color .15s, background .15s; }
.rb-file:hover{ border-color:rgba(94,194,255,.5); background:rgba(94,194,255,.04); }
.rb-file .ico{ font-size:18px; flex:0 0 auto; }
.rb-file .meta{ flex:1 1 auto; min-width:0; }
.rb-file .meta b{ display:block; font-size:12.5px; color:var(--ink); font-weight:650;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rb-file .meta small{ display:block; font-size:11px; color:var(--faint);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rb-file .when{ flex:0 0 auto; font-size:10.5px; color:var(--faint); white-space:nowrap; }
.rb-files-status{ font-size:11.5px; color:#e06666; margin-top:8px; }

/* Suggestion #16 — directory folders + search for account "Your files" */
.rb-files-toolbar{ margin-top:12px; }
.rb-files-search{ width:100%; box-sizing:border-box; font:inherit; font-size:12.5px;
  padding:9px 12px; border-radius:10px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); }
.rb-files-search:focus{ outline:none; border-color:rgba(94,194,255,.62);
  box-shadow:0 0 0 3px rgba(94,194,255,.14); }
.rb-files-dirlist{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.rb-files-dir{ border:1px solid var(--line); border-radius:12px; overflow:hidden;
  background:var(--card); }
.rb-files-dir-head{ display:flex; align-items:center; gap:8px; width:100%;
  box-sizing:border-box; text-align:left; padding:9px 12px; border:0;
  background:rgba(94,194,255,.06); color:var(--ink); cursor:pointer; font:inherit; }
.rb-files-dir-head:hover{ background:rgba(94,194,255,.11); }
.rb-files-dir-chev{ display:inline-block; font-size:11px; color:var(--muted);
  transition:transform .15s ease; width:12px; }
.rb-files-dir.is-collapsed .rb-files-dir-chev{ transform:rotate(-90deg); }
.rb-files-dir-name{ flex:1 1 auto; min-width:0; font-size:12.5px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rb-files-dir-count{ flex:0 0 auto; font-size:11px; font-weight:650; color:var(--muted);
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:1px 8px; font-variant-numeric:tabular-nums; }
.rb-files-dir-body{ display:flex; flex-direction:column; gap:6px; padding:8px; }
.rb-files-dir-body .rb-file{ margin:0; }
#acctFilesSearchEmpty{ margin-top:10px; }

/* file library hosted in a Master Account settings row (label | files | —) */
.acct-files-row{ align-items:start; }
.acct-files-row .r-k{ padding-top:3px; }
.acct-files-row .r-k .rb-files-count{ display:block; margin-top:4px; font-size:10.5px;
  font-weight:500; letter-spacing:0; text-transform:none; color:var(--faint); }
.acct-files-row .r-v{ font-weight:initial; }
/* Align controls on the INPUT row (not mid-label) so Save rate sits with the boxes */
.rb-gr-ctl{ display:flex; align-items:flex-end; gap:8px; flex-wrap:wrap; }
.rb-gr-ctl .rb-gr-dollar{ color:var(--muted); font-weight:700; }
.rb-gr-ctl .rb-gr-unit{ color:var(--faint); font-size:12.5px; }
.rb-gr-ctl input{ width:96px; box-sizing:border-box; background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:10px; color:var(--ink);
  padding:9px 11px; font:inherit; font-size:13.5px; text-align:right; }
.rb-gr-ctl input:focus{ outline:none; border-color:rgba(94,194,255,.55);
  background:rgba(94,194,255,.05); }
/* discount-model: two labeled fields + live effective-rate line */
.rb-globalrate{ align-items:flex-start; }
.rb-gr-field{ display:inline-flex; flex-direction:column; gap:4px; }
.rb-gr-lbl{ font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.02em; line-height:1.2; }
/* Invisible label spacer so Save rate shares the same column geometry as the fields */
.rb-gr-lbl-spacer{ visibility:hidden; user-select:none; pointer-events:none; }
.rb-gr-save{ justify-content:flex-end; }
.rb-gr-save .ao-btn{
  min-height:38px; display:inline-flex; align-items:center; justify-content:center;
  box-sizing:border-box;
}
.rb-gr-inwrap{ display:inline-flex; align-items:center; gap:6px; }
.rb-gr-eff{ flex-basis:100%; margin-top:10px; font-size:12px; color:var(--muted);
  border-top:1px solid var(--line); padding-top:9px; }
.rb-gr-eff b{ color:var(--good); }

/* ---- per-customer rate chip + inline editor ---- */
.rb-chip-rate{ background:rgba(94,194,255,.12); color:var(--sky); border-color:rgba(94,194,255,.3); }
.rb-rate-edit{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px;
  color:var(--faint); background:rgba(255,255,255,.03); border:1px solid var(--line);
  border-radius:9px; padding:3px 8px; }
.rb-rate-edit input.rb-rate-input{ width:64px; box-sizing:border-box; background:transparent;
  border:0; color:var(--ink); font:inherit; font-size:12.5px; text-align:right; padding:2px 0; }
.rb-rate-edit input.rb-rate-input:focus{ outline:none; }

/* ---- Reports subtabs (Invoice generator / Quarterly reports / Customers) ---- */
.rb-subtabs{ display:flex; gap:8px; margin:4px 0 18px; border-bottom:1px solid var(--line); padding-bottom:0; }
/* bare toolbar (no subtabs) — just the right-aligned Setup button, no tab underline */
.rb-subtabs-bare{ border-bottom:0; margin:0 0 4px; min-height:0; }
.rb-subtab{ background:transparent; border:0; border-bottom:2px solid transparent; color:var(--faint);
  font:inherit; font-size:14px; font-weight:600; padding:9px 14px 11px; cursor:pointer; margin-bottom:-1px; }
.rb-subtab:hover{ color:var(--muted); }
.rb-subtab.on{ color:var(--ink); border-bottom-color:var(--good); }
.rb-setup-link{ background:transparent; border:1px solid var(--line);
  border-radius:8px; color:var(--muted); font:inherit; font-size:12.5px; font-weight:600;
  padding:5px 12px; cursor:pointer; align-self:center; }
.rb-setup-link:hover{ color:var(--ink); border-color:rgba(63,214,138,.5); }

/* ---- first-run setup wizard ---- */
.rb-wiz{ max-width:760px; margin:0 auto; }
.rb-wiz-head{ position:relative; text-align:center; margin:8px 0 22px; }
.rb-wiz-head h2{ font-size:24px; margin:.25em 0 .15em; color:var(--ink); }
.rb-wiz-head p{ color:var(--muted); font-size:14px; }
.rb-wiz-skip{ position:absolute; top:0; right:0; background:transparent; border:0;
  color:var(--faint); font:inherit; font-size:12.5px; cursor:pointer; }
.rb-wiz-skip:hover{ color:var(--muted); }
.rb-wiz-steps{ display:flex; justify-content:center; gap:0; list-style:none; padding:0;
  margin:0 0 24px; flex-wrap:wrap; }
.rb-wiz-steps li{ display:flex; align-items:center; gap:8px; color:var(--faint);
  font-size:13px; font-weight:600; padding:0 18px; position:relative; }
.rb-wiz-steps li:not(:last-child)::after{ content:""; width:28px; height:1px;
  background:var(--line); margin-left:14px; }
.rb-wiz-steps li.on{ color:var(--ink); }
.rb-wiz-steps li.done{ color:var(--good); }
.rb-wiz-num{ display:inline-flex; align-items:center; justify-content:center; width:24px;
  height:24px; border-radius:50%; background:rgba(255,255,255,.06); color:inherit;
  font-size:12px; border:1px solid var(--line); }
.rb-wiz-steps li.on .rb-wiz-num{ background:var(--good); color:#06140d; border-color:var(--good); }
.rb-wiz-steps li.done .rb-wiz-num{ background:rgba(63,214,138,.15); border-color:rgba(63,214,138,.4); }
.rb-wiz-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px; }
.rb-wiz-card h3{ font-size:18px; margin:0 0 .35em; color:var(--ink); }
.rb-wiz-card > p{ color:var(--muted); font-size:13.5px; line-height:1.55; margin:0 0 18px; max-width:60ch; }
.rb-wiz-hint{ font-size:12px; color:var(--faint); margin-top:14px !important; }
.rb-wiz-arrays{ display:flex; flex-direction:column; gap:10px; }
.rb-wiz-arr{ display:flex; align-items:center; gap:16px; background:rgba(255,255,255,.03);
  border:1px solid var(--line); border-radius:12px; padding:12px 16px; }
.rb-wiz-arr-main{ flex:1; display:flex; flex-direction:column; gap:2px; }
.rb-wiz-arr-main b{ color:var(--ink); font-size:14.5px; }
.rb-wiz-arr-sub{ font-size:11.5px; color:var(--faint); }
.rb-wiz-yr{ display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--muted); }
.rb-wiz-yr-input{ width:90px; background:rgba(255,255,255,.04); border:1px solid var(--line);
  border-radius:8px; color:var(--ink); padding:7px 10px; font:inherit; font-size:13.5px; text-align:center; }
.rb-wiz-arr-rate{ min-width:96px; text-align:right; font-size:13px; color:var(--good); font-weight:600; }
.rb-wiz-rate{ display:flex; gap:24px; flex-wrap:wrap; align-items:flex-end; }
.rb-wiz-custs{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
/* Multi-array picker in step 3: checkbox per array + its own ownership %. */
.rb-wiz-arraysel{ display:flex; flex-direction:column; gap:6px; width:100%;
  border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  background:rgba(255,255,255,.02); }
.rb-wiz-arraysel-lbl{ font-size:12px; color:var(--muted); margin-bottom:2px; }
.rb-wiz-asrow{ display:flex; align-items:center; gap:10px; padding:5px 2px; }
.rb-wiz-asrow input[type=checkbox]{ width:16px; height:16px; flex:none; accent-color:var(--good); }
.rb-wiz-aname{ flex:1; font-size:13.5px; color:var(--ink); }
.rb-wiz-apct-wrap{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
.rb-wiz-apct{ width:64px; background:rgba(255,255,255,.04); border:1px solid var(--line);
  border-radius:7px; color:var(--ink); padding:5px 8px; font:inherit; font-size:13px; text-align:center; }
.rb-wiz-apct:disabled{ opacity:.4; }
.rb-wiz-cust-row{ display:flex; justify-content:space-between; align-items:center;
  background:rgba(63,214,138,.06); border:1px solid rgba(63,214,138,.2); border-radius:10px;
  padding:9px 14px; font-size:13px; color:var(--ink); }
.rb-wiz-cust-del{ background:transparent; border:0; color:var(--bad); font:inherit;
  font-size:12px; cursor:pointer; }
.rb-wiz-empty{ color:var(--faint); font-size:13px; font-style:italic; padding:8px 0; }
.rb-wiz-cust-form{ display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; padding:14px; }
.rb-wiz-cust-form input, .rb-wiz-cust-form select{ background:rgba(255,255,255,.05);
  border:1px solid var(--line); border-radius:8px; color:var(--ink); padding:8px 11px;
  font:inherit; font-size:13px; }
.rb-wiz-cust-form #rbWizCName{ flex:1; min-width:150px; }
.rb-wiz-cust-form #rbWizCEmail{ flex:1; min-width:170px; }
.rb-wiz-inwrap{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:var(--faint); }
.rb-wiz-inwrap input{ width:78px; }
.rb-wiz-review{ display:flex; flex-direction:column; gap:12px; }
.rb-wiz-rev-item{ display:flex; flex-direction:column; gap:2px; background:rgba(255,255,255,.03);
  border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
.rb-wiz-rev-item .rl{ font-size:11px; font-weight:600; color:var(--muted); letter-spacing:.02em; }
.rb-wiz-rev-item b{ color:var(--ink); font-size:15px; }
.rb-wiz-rev-item .sub{ font-size:12px; color:var(--faint); }
.rb-wiz-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:24px; gap:12px; }


/* ---- Quarterly report panel ---- */
.rb-q-head h3{ font-size:16px; margin:.2em 0 .15em; }
.rb-q-head p{ font-size:12.5px; color:var(--faint); line-height:1.5; max-width:60ch; }
.rb-q-controls{ display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; }
.rb-q-controls .rep-fld{ display:flex; flex-direction:column; gap:6px; min-width:200px; }
.rb-q-controls select{ width:100%; box-sizing:border-box; background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:10px; color:var(--ink); padding:9px 11px; font:inherit; font-size:13.5px; cursor:pointer; }
.rb-q-invoice{ margin-top:16px; }
.rb-q-inv-h{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.rb-q-inv-h h4{ font-size:15px; margin:0; }
.rb-q-src{ font-size:11.5px; color:var(--faint); }
.rb-q-stats{ display:flex; gap:26px; flex-wrap:wrap; margin:14px 0 6px; }
.rb-q-stats .st{ display:flex; flex-direction:column; gap:2px; }
.rb-q-stats .st b{ font-size:20px; color:var(--ink); }
.rb-q-stats .st span{ font-size:11.5px; color:var(--faint); }
.rb-q-math{ font-size:13px; color:var(--muted); margin:6px 0 0; }
.rb-q-math .rb-q-period{ color:var(--faint); }
.rb-q-charts{ margin-top:16px; }
.rb-q-charts h4{ font-size:15px; margin:0 0 10px; }
.rb-q-chart{ margin-bottom:18px; }
.rb-q-chart-wide .rb-q-chart-cap{ color:var(--good); font-weight:600; }
.rb-q-chart-wide{ background:rgba(63,214,138,.04); border:1px solid rgba(63,214,138,.16);
  border-radius:14px; padding:14px 14px 8px; }
.rb-q-chart-cap{ font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--faint); margin-bottom:6px; }
.rb-q-canvas{ width:100%; min-height:180px; }
.rb-q-actions{ display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap; }

/* ---- Customers subtab (edit offtakers) ---- */
.rb-cust-head h3{ font-size:16px; margin:.2em 0 .15em; }
.rb-cust-head p{ font-size:12.5px; color:var(--faint); line-height:1.5; max-width:64ch; }
.rb-cust-head-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.rb-cust-head-row > button{ flex:none; align-self:center; white-space:nowrap; }
.rb-cust{ margin-top:14px; max-width:none; }
.rb-cust-top{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.rb-cust-title{ font-size:15px; font-weight:680; color:var(--ink); }
.rb-cust-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; }
@media(max-width:680px){ .rb-cust-grid{ grid-template-columns:1fr; } }
.rb-cust-grid .rep-fld{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.rb-cust-grid .rep-fld .rl{ font-size:11.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.05em; }
.rb-cust-grid input, .rb-cust-grid select{ width:100%; box-sizing:border-box; background:rgba(255,255,255,.04);
  border:1px solid var(--line); border-radius:10px; color:var(--ink); padding:9px 11px; font:inherit; font-size:13.5px; }
.rb-cust-grid select{ cursor:pointer; }
.rb-cust-grid input:focus, .rb-cust-grid select:focus{ outline:none; border-color:rgba(94,194,255,.55); background:rgba(94,194,255,.05); }
.rb-cust-grid .rb-fld-hint{ font-size:11px; color:var(--faint); }
.rb-cust-acts{ display:flex; align-items:center; gap:12px; margin-top:16px; flex-wrap:wrap; }

/* ---- inline live offtaker editor under each approval draft ---- */
.rb-offedit{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:13px; }
.rb-offedit-h{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.rb-offedit-h .rl{ font-size:13px; font-weight:700; color:var(--ink);
  text-transform:none; letter-spacing:0; }
.rb-offedit-hint{ font-size:11.5px; color:var(--faint); }
.rb-offedit-grid{ gap:12px 16px; }
/* Align inputs across the 2-col edit grid even when one label wraps to two lines (Expected share vs Solar credit rate) — Ford 2026-07-07. Reserving two lines of label height keeps the boxes on a shared baseline. */
.rb-offedit-grid .rep-fld > .rl{ display:block; min-height:2.7em; }
.rb-offedit-status{ font-size:12px; min-height:15px; }
/* Offtaker-editor redesign (Ford 2026-07-10): the flat 14-field grid was hard to scan.
   Group into labeled sections, fold rare overrides into Advanced, hints → ⓘ tooltips.
   Sections reuse .rb-cust-grid so they stay 2-col desktop / 1-col mobile. */
.rb-fsec{ margin-top:20px; }
.rb-fsec:first-of-type{ margin-top:10px; }
.rb-fsec-h{ display:flex; align-items:center; gap:12px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.09em; color:var(--faint); margin:0 0 12px; }
.rb-fsec-h::after{ content:""; flex:1; height:1px; background:var(--line); }
/* Short, single-line labels now (detail lives in ⓘ tooltips), so drop the 2-line
   reserve that the flat grid needed and align labels + their ⓘ inline. */
.rb-fgrid .rep-fld > .rl{ min-height:0; display:flex; align-items:center; flex-wrap:wrap; }
.rb-fgrid .rb-fgrid-full{ grid-column:1 / -1; }
.rb-fadv{ margin-top:18px; border:1px solid var(--line); border-radius:11px; overflow:hidden; }
.rb-fadv > summary{ cursor:pointer; list-style:none; padding:12px 15px; font-size:12px;
  color:var(--faint); display:flex; align-items:center; gap:9px; user-select:none; }
.rb-fadv > summary::-webkit-details-marker{ display:none; }
.rb-fadv > summary::before{ content:"▸"; font-size:11px; transition:transform var(--motion-fast) var(--ease-out); }
.rb-fadv[open] > summary::before{ transform:rotate(90deg); }
.rb-fadv[open] > summary{ border-bottom:1px solid var(--line); color:var(--ink); }
.rb-fadv .rb-cust-grid{ padding:15px; }
/* Invoice-time utility resync banner (stale bill → hands-off re-sync). */
.rb-resync{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px;
  padding:9px 12px; border:1px solid #bfdbfe; background:#eff6ff; border-radius:9px;
  font-size:13px; color:#1e3a5f; }
.rb-resync-msg{ font-weight:600; }
.rb-resync-btn{ margin-left:auto; border:1px solid #2563eb; background:#fff; color:#1d4ed8;
  cursor:pointer; border-radius:7px; padding:4px 11px; font-size:12.5px; font-weight:600; white-space:nowrap; }
.rb-resync-btn:hover{ background:#2563eb; color:#fff; }
.rb-resync-btn:disabled{ opacity:.55; cursor:default; }
.rb-resync-status{ flex-basis:100%; font-size:12px; color:#475569; }
.rb-resync-regen{ border:0; background:none; color:#1d4ed8; cursor:pointer; font-weight:600;
  text-decoration:underline; padding:0; font-size:12px; }

/* ---- editable draft email (approval inbox) ---- */
.rb-draft-email{ margin:14px 0 4px; display:flex; flex-direction:column; gap:6px; }
.rb-draft-email .rl{ font-size:11.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.05em; }
.rb-email-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.rb-email-src{
  font-size:11px; font-weight:700; letter-spacing:.02em;
  padding:3px 9px; border-radius:999px; white-space:nowrap;
}
.rb-email-src-master{
  background:rgba(37,99,235,.10); color:#1d4ed8;
  border:1px solid rgba(37,99,235,.22);
}
.rb-email-src-custom{
  background:rgba(245,158,11,.14); color:#b45309;
  border:1px solid rgba(245,158,11,.32);
}
.rb-email-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:2px; }
.rb-email-revert{
  flex:none; font-size:12px; font-weight:650; padding:6px 12px;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
  color:var(--ink); border-radius:10px; cursor:pointer;
}
.rb-email-revert:hover{ border-color:rgba(37,99,235,.4); color:#1d4ed8; }
.rb-email-revert:disabled{ opacity:.55; cursor:wait; }
.rb-draft-msg{ width:100%; box-sizing:border-box; background:#eef5ff;
  border:1px solid rgba(37,99,235,.22); border-radius:10px; color:var(--ink); padding:12px 14px;
  font:inherit; font-size:13px; line-height:1.55; resize:vertical; min-height:140px;
  overflow:hidden; }
.rb-draft-msg:focus{ outline:none; border-color:rgba(37,99,235,.5); background:#e6f0ff; }
.rb-draft-email-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rb-draft-msg-hint{ font-size:11.5px; color:var(--faint); }

/* ---- auto-attach GMP toggle (draft card) ---- */
.rb-gmp-toggle-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:4px 0 6px; }
.rb-gmp-switch{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink); cursor:pointer; }
.rb-gmp-switch input{ width:15px; height:15px; cursor:pointer; accent-color:var(--good); }
.rb-gmp-auto-status{ font-size:11.5px; }
.rb-gmp-ready{ color:var(--good); }
.rb-gmp-pending{ color:var(--warn); }
.rb-gmp-no_gmp{ color:var(--faint); }
.rb-gmp-manual{ margin:2px 0 4px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
/* manual GMP-bill upload — the fallback when auto-capture hasn't run yet */
.rb-gmp-upload-link{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; font-size:11.5px;
  font-weight:700; color:var(--good,#047857); padding:4px 9px; border:1px dashed var(--good,#047857);
  border-radius:8px; background:rgba(63,214,138,.06); }
.rb-gmp-upload-link:hover{ background:rgba(63,214,138,.14); }
.rb-gmp-upload-stat{ font-size:11px; }
.rb-gmp-upload-stat.rb-busy{ color:var(--muted); }
.rb-gmp-upload-stat.rb-err{ color:var(--bad,#dc2626); }

/* ---- bring-your-own generation spreadsheet ("our magic" auto-updater) ---- */
.rb-track{ margin-top:14px; padding:13px 14px; border:1px solid #e2e9ef;
  border-radius:12px; background:linear-gradient(168deg,#f7fafc,#f1f6fb);
  display:flex; flex-direction:column; gap:11px; }
.rb-track-h{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.rb-track-h .rl{ font-size:13px; font-weight:740; color:#16202b;
  text-transform:none; letter-spacing:0; }
.rb-track-hint{ font-size:11.5px; color:#7a8a98; }
.rb-track-detected{ display:flex; flex-direction:column; gap:8px; }
.rb-track-map{ display:flex; flex-wrap:wrap; gap:6px; }
.rb-track-chip{ font-size:11px; color:#2a3947; background:#fff;
  border:1px solid #dde6ee; border-radius:7px; padding:3px 8px; }
.rb-track-chip b{ color:#0a7d4f; font-weight:740; }
.rb-track-meta{ font-size:11px; color:#7a8a98; font-variant-numeric:tabular-nums; }
.rb-track-meta b{ color:#2a3947; font-weight:680; }
.rb-track-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rb-track-dl{ border:0; cursor:pointer; font:inherit; font-size:12.5px; font-weight:740;
  color:#fff; background:linear-gradient(180deg,#2563eb,#1d4fd7); border-radius:9px;
  padding:8px 14px; box-shadow:0 1px 0 rgba(13,42,107,.18); transition:filter .12s, transform .08s; }
.rb-track-dl:hover{ filter:brightness(1.06); }
.rb-track-dl:active{ transform:translateY(1px); }
.rb-track-up{ display:inline-flex; align-items:center; gap:5px; cursor:pointer; font-size:11.5px;
  font-weight:700; color:#0a7d4f; padding:7px 11px; border:1px dashed #0a7d4f;
  border-radius:8px; background:rgba(10,125,79,.05); }
.rb-track-up:hover{ background:rgba(10,125,79,.11); }
.rb-track-rm{ border:0; background:none; cursor:pointer; font:inherit; font-size:11.5px;
  font-weight:640; color:#9aa7b3; text-decoration:underline; padding:0; }
.rb-track-rm:hover{ color:#dc2626; }
.rb-track-stat{ font-size:11.5px; }
.rb-track-stat.rb-busy{ color:#5a6b7b; }
.rb-track-stat.rb-ok{ color:#0a7d4f; }
.rb-track-stat.rb-err{ color:#dc2626; }
.rb-track-warn{ font-size:11px; color:#9a6a00; background:#fff8e8;
  border:1px solid #f1e2bd; border-radius:8px; padding:6px 9px; }
/* Invoice collection roll-up on the offtaker generation spreadsheet card */
.rb-track-collect{ display:flex; flex-wrap:wrap; gap:6px; }
.rb-track-chip-money b{ color:#1565c0; }
.rb-track-chip-paid b{ color:#0a7d4f; }
.rb-track-chip-open b{ color:#b45309; }
.rb-track-pays{ display:flex; flex-direction:column; gap:6px; }
.rb-track-pays-h{ font-size:11px; font-weight:740; letter-spacing:.04em;
  text-transform:uppercase; color:#5a6b7b; }
.rb-track-pays-scroll{ overflow-x:auto; border:1px solid #e2e9ef; border-radius:9px;
  background:#fff; }
.rb-track-paytable{ width:100%; border-collapse:collapse; font-size:12px;
  font-variant-numeric:tabular-nums; }
.rb-track-paytable th{ text-align:left; font-size:10.5px; font-weight:720;
  letter-spacing:.03em; text-transform:uppercase; color:#7a8a98;
  padding:7px 9px; border-bottom:1px solid #e8eef4; background:#f7fafc; white-space:nowrap; }
.rb-track-paytable td{ padding:7px 9px; border-bottom:1px solid #f0f4f8; color:#2a3947;
  white-space:nowrap; }
.rb-track-paytable tr:last-child td{ border-bottom:0; }
.rb-track-paytable td.rb-num{ text-align:right; font-weight:680; color:#16202b; }
.rb-track-paytable td.rb-muted{ color:#9aa7b3; font-size:11px; }
.rb-track-payst{ display:inline-block; font-size:10.5px; font-weight:720;
  letter-spacing:.02em; padding:2px 7px; border-radius:999px; }
.rb-track-payst-paid{ background:rgba(10,125,79,.12); color:#0a7d4f; }
.rb-track-payst-open{ background:rgba(180,83,9,.12); color:#b45309; }
.rb-track-payst-other{ background:rgba(90,107,123,.12); color:#5a6b7b; }
.rb-track-payempty{ font-size:12px; color:#7a8a98; line-height:1.45;
  padding:8px 10px; background:rgba(255,255,255,.65); border:1px dashed #d5dee8;
  border-radius:8px; }
.rb-track-paymore{ font-size:11px; color:#7a8a98; padding:0 2px; }
/* Each offtaker's OWN sheet, nested inside its accordion card. A blue left accent
   marks it as nested; the operator-wide MASTER sheet sits at the top of the page. */
.rb-track-sub{ margin-top:12px; border-left:3px solid #2563eb;
  background:linear-gradient(168deg,#f7fafc,#eef4fb); }
.rb-track-sub[hidden]{ display:none !important; }
/* VEC/SmartHub bill-PDF upload inside the offtaker editor — reads generation +
   the bill's own net-metering credit rate off the PDF so the invoice auto-prices. */
.rb-vecbill{ margin-top:12px; padding:12px 14px; border:1px solid #e2e9ef; border-radius:12px;
  border-left:3px solid #2563eb; background:linear-gradient(168deg,#f7fafc,#eef4fb);
  display:flex; flex-direction:column; gap:8px; }
.rb-vecbill-h .rl{ font-size:13px; font-weight:740; color:#16202b; text-transform:none; letter-spacing:0; }
.rb-vecbill-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rb-vecbill-stat{ font-size:11.5px; }
.rb-vecbill-stat.rb-busy{ color:#5a6b7b; } .rb-vecbill-stat.rb-ok{ color:#0a7d4f; } .rb-vecbill-stat.rb-err{ color:#dc2626; }

.rb-listwrap{ margin-top:8px; }
.rb-sub{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  background:linear-gradient(165deg,var(--card),var(--card2)); border:1px solid var(--line);
  border-radius:14px; padding:14px 16px; margin-bottom:11px; }
.rb-sub.rb-paused{ opacity:.6; }
.rb-sub-name{ font-size:15px; font-weight:680; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.rb-sub-meta{ font-size:12px; color:var(--faint); margin-top:4px; }
/* the plain-English summary sentence (who gets what % of which bill, how often) */
.rb-sub-sentence{ font-size:13.5px; line-height:1.5; color:var(--muted); margin:6px 0 5px; }
.rb-sub-sentence b{ color:var(--ink); font-weight:680; }
.rb-sub-rate{ font-size:12px; color:var(--muted); margin-top:3px; }
.rb-sub-rate b{ color:var(--ink); }
.rb-rate-prov{ font-size:10.5px; color:var(--sky); background:rgba(94,194,255,.1);
  border:1px solid rgba(94,194,255,.25); border-radius:20px; padding:1px 7px; margin-left:6px; }
.rb-chip{ font-size:10.5px; font-weight:600; letter-spacing:.02em; padding:3px 8px; border-radius:20px;
  background:rgba(255,255,255,.06); color:var(--muted); }
.rb-chip-live{ background:rgba(94,194,255,.16); color:var(--sky); }
.rb-chip-off{ background:rgba(255,107,107,.14); color:var(--bad); }
.rb-sub-acts{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
/* collapsible per-offtaker controls (Edit toggle reveals .rb-sub-more) */
.rb-edit-toggle{ font-weight:600; }
.rb-sub-more{ flex-basis:100%; display:flex; flex-direction:column; gap:10px;
  margin-top:10px; padding-top:11px; border-top:1px solid var(--line); }
.rb-sub-more[hidden]{ display:none; }
.rb-more-row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.rb-more-lbl{ font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--faint); }

/* ===================== OFFTAKER ACCORDION (.rb-acc) =========================
 * Each offtaker is ONE clickable accordion card. Collapsed = the summary header
 * (name + status chips + the plain-English line + Next/last meta). Click anywhere
 * on the header to expand the full draft inline; click the header again to collapse.
 * One open at a time. Cold, flat-matte, high-contrast, dense — the AO day palette:
 * white cards, slate-200 hairlines, ink text, utility-blue accent, octarine signature
 * on the open card's spine. (--line/--ink/--good resolve to the day tokens here.) */
/* The global spreadsheet-tracker box is display:flex via .rep-card, which beat the
   [hidden] UA display:none and left an empty white card above the list when the
   feature is off. Force hidden to actually hide. */
.rb-track-global[hidden]{ display:none !important; }
.rb-acc-lead{ font-size:13px; line-height:1.5; color:var(--muted,#475569); margin:0 2px 12px;
  letter-spacing:-.005em; }
.rb-acc-lead b{ color:var(--ink,#0f172a); font-weight:750; }

/* ---- GMP vs non-GMP segmented filter (Piece 4) ----------------------------- */
/* A segmented strip over the ONE offtaker list (not a separate tab/page). Shown
   only when the fleet mixes GMP-bill-bound offtakers with non-GMP ones. Matches
   the .rb-seg segmented-control language in the day palette. */
.rb-ofilter{ display:inline-flex; gap:2px; padding:3px; margin:0 2px 12px;
  background:var(--card2,#f8fafc); border:1px solid var(--line,#e2e8f0); border-radius:10px; }
.rb-ofilter-chip{ border:0; background:transparent; cursor:pointer;
  font:650 12px/1 inherit; color:var(--muted,#475569); padding:6px 11px; border-radius:8px;
  display:inline-flex; align-items:center; gap:6px; transition:background .12s ease,color .12s ease; }
.rb-ofilter-chip:hover{ color:var(--ink,#0f172a); }
.rb-ofilter-chip.on{ background:rgba(37,99,235,.12); color:var(--good,#2563eb); }
.rb-ofilter-n{ font-size:10.5px; font-weight:700; color:var(--faint,#94a3b8);
  background:var(--day-hover,rgba(15,23,42,.05)); border-radius:20px; padding:1px 7px; min-width:16px; text-align:center; }
.rb-ofilter-chip.on .rb-ofilter-n{ color:var(--good,#2563eb); background:rgba(37,99,235,.14); }

/* Find-an-offtaker search — one clean full-width field (no nested input box).
   Filter chips sit below it. */
.rb-listtools{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 14px; }
.rb-listtools-searchfirst{ flex-direction:column; align-items:stretch; gap:12px; }
.rb-listtools .rb-ofilter{ margin:0; align-self:flex-start; }
.rb-listtools .rb-osearch{ margin:0; width:100%; max-width:none; }
.rb-osearch{ display:flex; align-items:center; gap:10px; flex:1 1 auto; width:100%;
  max-width:none; min-width:0; box-sizing:border-box;
  background:#fff; border:1px solid rgba(37,99,235,.22); border-radius:12px;
  padding:10px 14px;
  box-shadow:0 1px 3px rgba(15,23,42,.05); }
.rb-osearch-lg{ min-height:44px; }
.rb-osearch:focus-within{ border-color:rgba(37,99,235,.55);
  box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.rb-osearch-ico{ display:inline-flex; align-items:center; justify-content:center;
  flex:none; width:18px; height:18px; color:#64748b; opacity:.9; }
.rb-osearch-ico svg{ width:18px; height:18px; display:block; }
/* Flatten the native <input type=search> chrome — it paints its own inner
   border/bezel on Chromium, which is the "box inside a box" in screenshots. */
.rb-osearch input,
.rb-osearch input[type="search"]{
  -webkit-appearance:none !important; appearance:none !important;
  border:0 !important; outline:0 !important; box-shadow:none !important;
  background:transparent !important; border-radius:0 !important;
  flex:1; min-width:0; margin:0; padding:0;
  font:600 15px/1.35 inherit; color:var(--ink,#0f172a); letter-spacing:-.01em;
}
.rb-osearch input:focus,
.rb-osearch input:focus-visible{
  border:0 !important; outline:0 !important; box-shadow:none !important;
}
.rb-osearch input::-webkit-search-decoration,
.rb-osearch input::-webkit-search-cancel-button,
.rb-osearch input::-webkit-search-results-button,
.rb-osearch input::-webkit-search-results-decoration{
  -webkit-appearance:none; appearance:none; display:none;
}
.rb-osearch input::placeholder{ color:#94a3b8; font-weight:500; }
.rb-osearch-hint{ font-size:12px; font-weight:650; color:#64748b;
  background:rgba(15,23,42,.04); border:0;
  border-radius:999px; padding:4px 10px; white-space:nowrap; flex:none;
  font-variant-numeric:tabular-nums; }
/* Search match count — quiet emerald pill while filtering. */
.rb-osearch-n{ font-size:12px; font-weight:700; color:#047857;
  background:rgba(16,185,129,.12); border:0;
  border-radius:999px; padding:4px 10px; white-space:nowrap; flex:none;
  font-variant-numeric:tabular-nums; }

/* Reconciliation-in-progress: a small spinner + faint pulse so a slow bill audit
   reads as WORKING, never frozen (sim finding: Paul stared at a static "…" for
   ~60s on a big fleet and couldn't tell it wasn't stuck). */
.rb2-spin{ display:inline-block; width:15px; height:15px; border-radius:50%;
  border:2px solid rgba(16,185,129,.25); border-top-color:#059669;
  animation:rb2spin .8s linear infinite; vertical-align:-2px; }
@keyframes rb2spin{ to{ transform:rotate(360deg); } }
.rb2-kpi-checking{ animation:rb2kpipulse 1.9s ease-in-out infinite; }
.rb2-kpi-checking small{ color:#047857; }
@keyframes rb2kpipulse{ 0%,100%{ opacity:1; } 50%{ opacity:.74; } }

/* Deep-link arrival flash: when a "Review & send" email lands the operator on a
   specific offtaker's review card, pulse an emerald ring + tint so they land
   squarely on the right invoice instead of hunting the list. */
.rb-acc-flash{ animation:rb-acc-flash-kf 1.3s ease-out 2; border-radius:12px; }
@keyframes rb-acc-flash-kf{
  0%   { box-shadow:0 0 0 3px rgba(16,185,129,.6);  background-color:rgba(16,185,129,.10); }
  100% { box-shadow:0 0 0 3px rgba(16,185,129,0);   background-color:transparent; }
}

/* ═══ Offtaker Invoice Generator redesign (Ford-approved mock, 2026-07-03):
   header band (title + KPI strip) · send-pipeline band · connection rail ·
   sticky action bar · restyled hierarchy. Day palette; octarine only as the
   sheet's top hairline signature. Legacy ids untouched — rb2-* is the frame. ═══ */
/* The three bands are now SEPARATE FLOATING CARDS (Ford 2026-07-05: "make these
   three elements separate — rounded corners, floating cards"). .rb2 is no longer
   a card itself — it's a transparent column that gaps its children apart; each
   child (.rb2-head / .rb2-pipe / .rb2-listwrap / .rb-au) carries its own radius,
   border and float shadow. display:none children (hidden pipe, inactive tab view)
   are NOT flex items, so gaps only ever fall between the visible cards. */
.rb2{position:relative;display:flex;flex-direction:column;gap:14px;
  background:transparent;border:0;box-shadow:none;overflow:visible;
  /* ═══ SOLARPUNK NEPOOL-OPERATOR PALETTE, scoped to the generator ═══
     Ford 2026-07-05: "redesign with the solarpunk NEPOOL operator style".
     The NEPOOL app (web/app tokens.css + ClientCard.tsx) grounds everything on
     warm CREAM (#faf8f5) with white inner cards, cream/wood hairlines, and colour
     only as small emerald/amber/sky accent chips — NOT a saturated colour wash
     (which is why lime→purple→emerald all felt wrong). We warm every rb-* border
     and inner surface at once by overriding the shared vars here. */
  --so-cream:#faf8f5; --so-cream-bd:#e8e2d9; --so-wood:#8c4e1c; --so-wood-bd:#e6d4bd;
  --so-emerald:#059669; --so-shadow-card:0 2px 8px 0 rgba(0,0,0,.06),0 1px 2px -1px rgba(0,0,0,.04);
  --line:#e8e2d9;                     /* every inner hairline → warm cream */
  --card2:#ffffff;                    /* inner rows (rail, provider heads) → white on cream */
  --day-hover:rgba(140,78,28,.06);    /* warm ochre hover, not cool slate */
}
.rb2-sp{flex:1}

/* header band — title row on top, a full-width KPI strip below (Ford 2026-07-07:
   the old title-left / KPIs-right split wrapped + left big dead zones on the right;
   stacking + stretching the 4 KPIs across the full width removes them). */
.rb2-head{display:flex;flex-direction:column;gap:18px;
  padding:22px 28px 20px;
  border:1px solid var(--so-cream-bd);border-radius:14px;
  background:var(--so-cream);
  box-shadow:var(--so-shadow-card)}
.rb2-id h1{margin:0;font-size:20px;font-weight:780;letter-spacing:-.015em;color:var(--ink,#0f172a)}
.rb2-id p{margin:6px 0 0;color:var(--muted,#475569);font-size:12.5px;max-width:54ch}
.rb2-subtabs{margin-top:13px}
/* Tabs + a slim glance-line share one row (Ford 2026-07-10 declutter). The old
   4-card KPI grid restated the send-pipeline band, so it's gone — #rb2Kpis now
   renders ONE inline status line: offtaker + array counts, then the reconcile
   signal (the only fact the pipeline doesn't carry). */
.rb2-tabrow{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-top:13px;
  border-bottom:1px solid var(--so-cream-bd)}
.rb2-tabrow .rb2-subtabs{margin:0;border-bottom:0}
.rb2-kpis{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto;
  padding-bottom:9px;font-size:12px;color:var(--muted,#475569)}
.rb2-gl-i b{color:var(--ink,#0f172a);font-weight:750;font-variant-numeric:tabular-nums}
.rb2-gl-dot{color:var(--so-cream-bd,#cbb89d)}
.rb2-gl-ok{color:#047857;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.rb2-gl-check{font-size:13px;line-height:1}
.rb2-gl-checking{color:var(--faint,#94a3b8);display:inline-flex;align-items:center;gap:6px}
.rb2-gl-flag{display:inline-flex;align-items:center;color:#92600a;background:rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.34);border-radius:999px;padding:4px 11px;font-weight:640;
  cursor:pointer;font-variant-numeric:tabular-nums;transition:background .15s}
.rb2-gl-flag:hover{background:rgba(245,158,11,.19)}

/* send-pipeline band — its own floating card, warm cream ground (state cells
   keep their emerald/amber/blue/slate accent tints) */
.rb2-pipe{padding:16px 40px 18px;
  border:1px solid var(--so-cream-bd);border-radius:14px;
  background:var(--so-cream);box-shadow:var(--so-shadow-card)}
.rb2-pipe-label{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap;position:relative}
.rb2-pipe-label h2{margin:0;font:700 10.5px/1 inherit;letter-spacing:.09em;
  text-transform:uppercase;color:var(--faint,#94a3b8)}
.rb2-rules{color:var(--faint,#94a3b8);font-size:10.5px}
.rb2-runstamp{color:var(--faint,#94a3b8);font-size:10.5px;white-space:nowrap}
.rb2-runstamp b{color:var(--muted,#475569)}
.rb2-draftstat{font:640 10.5px/1 inherit;color:var(--good,#2563eb);
  background:rgba(37,99,235,.10);border:1px solid rgba(37,99,235,.24);
  border-radius:999px;padding:5px 10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.rb2-pipe-ctl{display:flex;align-items:center;gap:7px;position:relative}
.rb2-ctlbtn{padding:5px 10px;font-size:11px;border-radius:8px}
.rb2-ctlpop{position:absolute;right:0;top:calc(100% + 8px);width:280px;background:var(--card,#fff);
  border:1px solid var(--line,#e2e8f0);border-radius:12px;
  box-shadow:0 12px 40px -12px rgba(15,23,42,.25);padding:13px;z-index:45}
.rb2-ctlpop p{margin:0 0 11px;font-size:12px;color:var(--muted,#475569);line-height:1.5}
.rb2-ctlpop p b{color:var(--ink,#0f172a)}
.rb2-ctlpop-row{display:flex;gap:8px;justify-content:flex-end}
.rb2-pswitch{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line,#e2e8f0);
  background:var(--card,#fff);border-radius:999px;padding:4px 10px 4px 5px;
  font:640 11px/1 inherit;color:var(--muted,#475569);cursor:pointer;
  transition:border-color .15s,background .15s,color .15s}
.rb2-knob{width:24px;height:14px;border-radius:999px;background:var(--line,#e2e8f0);
  position:relative;transition:background .18s;flex:none}
.rb2-knob::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;
  border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.3);transition:left .18s}
.rb2-pipe.paused .rb2-pswitch{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.12);color:#92600a}
.rb2-pipe.paused .rb2-knob{background:#d97706}
.rb2-pipe.paused .rb2-knob::after{left:12px}
.rb2-pausechip{font:700 9.5px/1 inherit;letter-spacing:.07em;color:#92600a;
  background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.35);
  border-radius:999px;padding:4px 9px}
/* Prominent delivery-mode control (Ford 2026-07-10): lifted out of the crammed header
   into its own wide, tinted row so the Approve-to-send / Auto-send default is obvious
   and easy to hit — big buttons, min-width so each reads as a real choice. */
.rb2-moderow{display:flex;align-items:center;gap:14px;margin:0 0 14px;flex-wrap:wrap;
  background:rgba(37,99,235,.05);border:1px solid rgba(37,99,235,.16);
  border-radius:12px;padding:10px 14px}
.rb2-moderow .rb2-modelab{font:640 12.5px/1.35 inherit;color:var(--muted,#475569)}
.rb2-moderow .rb2-modeslider{margin-left:auto;padding:4px}
.rb2-moderow .rb2-modeslider button{font:640 14px/1 inherit;padding:11px 26px;
  border-radius:9px;min-width:150px}
@media(max-width:640px){
  .rb2-moderow .rb2-modeslider{margin-left:0;width:100%}
  .rb2-moderow .rb2-modeslider button{flex:1 1 0;min-width:0;padding:11px 10px}
}
.rb2-pipe-row{display:flex;align-items:stretch;gap:0}
/* Energy-balls animation removed (Ford 2026-07-14) — pipeline stages only. */
.rb2-pcell{flex:1 1 0;min-width:160px;border:1px solid var(--line,#e2e8f0);background:var(--card,#fff);
  padding:11px 14px 10px;position:relative;transition:background .13s}
.rb2-pcell:first-child{border-radius:10px 0 0 10px}
.rb2-pcell:last-child{border-radius:0 10px 10px 0}
.rb2-pcell + .rb2-pcell{border-left:0}
.rb2-pcell[role="button"]{cursor:pointer}
.rb2-pcell::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;
  border-radius:3px 3px 0 0}
/* each pipeline part reads as a soft colour zone keyed to its state (Ford:
   "different colours for the different pipeline parts — June is green, etc.") */
.rb2-pcell.done{background:rgba(4,120,87,.13);border-color:rgba(4,120,87,.3)}
.rb2-pcell.now{background:rgba(217,119,6,.15);border-color:rgba(217,119,6,.34)}
.rb2-pcell.sched{background:rgba(37,99,235,.13);border-color:rgba(37,99,235,.3)}
.rb2-pcell.later{background:rgba(100,116,139,.12);border-color:rgba(100,116,139,.28)}
.rb2-pcell.done[role="button"]:hover{background:rgba(4,120,87,.19)}
.rb2-pcell.done::before{background:#047857}
.rb2-pcell.now::before{background:#d97706}
.rb2-pcell.sched::before{background:var(--good,#2563eb)}
.rb2-pcell.later::before{background:var(--line,#e2e8f0)}
.rb2-when{display:flex;align-items:baseline;gap:7px;margin-bottom:6px;flex-wrap:wrap}
.rb2-when b{font:700 10.5px/1 inherit;letter-spacing:.06em;text-transform:uppercase}
.rb2-pcell.done .rb2-when b{color:#047857}
.rb2-pcell.now .rb2-when b{color:#92600a}
.rb2-pcell.sched .rb2-when b{color:var(--good,#2563eb)}
.rb2-pcell.later .rb2-when b{color:var(--faint,#94a3b8)}
.rb2-when small{color:var(--faint,#94a3b8);font-size:10px}
.rb2-big{font-size:18px;font-weight:750;letter-spacing:-.02em;color:var(--ink,#0f172a);
  font-variant-numeric:tabular-nums}
.rb2-big span{font-size:11.5px;font-weight:600;color:var(--muted,#475569);letter-spacing:0}
.rb2-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.rb2-pc{font:640 10px/1 inherit;border-radius:999px;padding:4px 8px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.rb2-pc.g{color:#047857;background:#ecfdf5}
.rb2-pc.b{color:var(--good,#2563eb);background:rgba(37,99,235,.09)}
.rb2-pc.m{color:var(--muted,#475569);background:var(--day-hover,rgba(15,23,42,.05))}
.rb2-pc.a{color:#92600a;background:rgba(245,158,11,.12)}
.rb2-nowmark{flex:0 0 auto;display:flex;align-items:center;justify-content:center;position:relative;padding:0 7px}
.rb2-nowmark::before{content:"";position:absolute;top:-5px;bottom:-5px;left:50%;
  border-left:2px dashed rgba(245,158,11,.45)}
/* Clean date pill on the "now" divider: a white chip so it reads crisply over the
   dashed line, TODAY eyebrow above the actual date (Ford 2026-07-11). */
.rb2-now-pill{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:1px;
  background:#fff;border:1px solid rgba(245,158,11,.42);border-radius:10px;padding:4px 9px;
  box-shadow:0 1px 4px rgba(245,158,11,.2)}
.rb2-now-pill em{font:800 7.5px/1.2 inherit;letter-spacing:.13em;text-transform:uppercase;color:#b45309;font-style:normal}
.rb2-now-pill b{font:800 12px/1.05 inherit;color:#92600a;white-space:nowrap}
.rb2-pipe.paused .rb2-pcell.sched::before,.rb2-pipe.paused .rb2-pcell.later::before{background:var(--line,#e2e8f0)}
.rb2-pipe.paused .rb2-pcell.sched .rb2-when b,.rb2-pipe.paused .rb2-pcell.later .rb2-when b{color:var(--faint,#94a3b8)}
.rb2-pipe.paused .rb2-pcell.sched .rb2-chips,.rb2-pipe.paused .rb2-pcell.later .rb2-chips{opacity:.5}
.rb2-pausednote{font:640 10.5px/1.45 inherit;color:#92600a;margin-top:7px}

/* connection rail — the plumbing host restyled as one slim line */
/* connection rail — now folded into the toolbar row as one slim inline status
   (Ford 2026-07-10 declutter); no longer a bordered white card. */
.rb2-rail{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0;font-size:12px}
.rb2-controls .rb2-rail,.rb2-controls .rb-gmpbills-status{margin:0}
.rb2-rail:empty{display:none}
.rb2-rail > *{margin:0!important}
.rb2-rail .rb-gmp-ok{padding:0;color:#047857;font-weight:600;white-space:nowrap}
.rb-gmp-arpill{display:inline-flex;align-items:center;gap:5px;font:600 11px/1 inherit;
  color:#92600a;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.32);
  border-radius:999px;padding:5px 10px;cursor:pointer;text-decoration:none;white-space:nowrap}
.rb-gmp-arpill:hover{background:rgba(245,158,11,.18);text-decoration:none}

/* sticky action bar — the offtaker list floats on a punchy solarpunk-emerald
   ground (Ford 2026-07-05: dropped the octarine/purple; lime rejected earlier —
   this is the app's own night-theme emerald #10b981, verdant not lime), rows lift */
.rb2-listwrap{padding:20px 40px 30px;border-radius:14px;
  border:1px solid var(--so-cream-bd);
  background:var(--so-cream);
  box-shadow:var(--so-shadow-card)}
.rb2 > .rb-au{padding:20px 40px 30px;border-radius:14px;   /* Bill audit view = its own floating card too */
  border:1px solid var(--so-cream-bd);background:var(--so-cream);
  box-shadow:var(--so-shadow-card)}
/* toolbar sits on its own white squircle now (Ford 2026-07-10) — matches the
   Invoice-archive + provider cards below it instead of floating as a bare strip.
   Still sticky so the actions stay reachable while the list scrolls. */
.rb2-controls{position:sticky;top:8px;z-index:22;display:flex;align-items:center;gap:12px;
  padding:12px 16px;margin-bottom:12px;background:#fff;
  border:1px solid var(--so-cream-bd);border-radius:12px;box-shadow:var(--so-shadow-card);flex-wrap:wrap}
.rb2-controls-label{font-size:14.5px;font-weight:750;letter-spacing:-.01em;color:var(--ink,#0f172a)}
/* When "＋ Add an offtaker" scrolls the add panel into view (Ford 2026-07-10), keep its
   top clear of the sticky .rb2-controls bar above it so the "New offtaker" heading isn't
   tucked underneath. */
.rb-add-panel{ scroll-margin-top:70px; }
.rb2-actions{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
/* tidy toolbar (Ford 2026-07-10): all five actions stay — just lighter + tighter so
   the row reads calm next to the inline rail status. Primary stays a touch bigger. */
.rb2-actions .rb-btn{padding:7px 11px;font-size:11.5px;font-weight:640;border-radius:8px}
.rb2-actions .ao-btn-primary.rb-btn{padding:7px 13px}
.rb2-exportwrap{position:relative}
.rb2-exportpop{position:absolute;left:0;top:calc(100% + 8px);width:320px;max-width:calc(100vw - 32px);background:var(--card,#fff);
  border:1px solid var(--line,#e2e8f0);border-radius:12px;
  box-shadow:0 12px 40px -12px rgba(15,23,42,.25);padding:14px;z-index:44}
.rb2-exportpop-h{font-size:12.5px;font-weight:700;color:var(--ink,#0f172a);margin-bottom:3px}
.rb2-exportpop-p{margin:0 0 12px;font-size:11px;color:var(--faint,#94a3b8);line-height:1.45}
/* Stacked export form: labelled controls, one per row. */
.rb2-export{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.rb-exf{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:600;
  color:var(--ink,#0f172a);letter-spacing:-.005em}
.rb-exf-opt{font-weight:500;color:var(--faint,#94a3b8)}
.rb-export-sel,.rb-export-date,.rb-export-acct,.rb-export-memo{
  width:100%;box-sizing:border-box;height:34px;padding:0 10px;font-size:12.5px;font-weight:500;
  color:var(--ink,#0f172a);background:var(--day-hover,#f8fafc);
  border:1px solid var(--line,#e2e8f0);border-radius:8px;appearance:none;outline:none}
.rb-export-sel{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;padding-right:26px}
.rb-export-sel:focus,.rb-export-date:focus,.rb-export-acct:focus,.rb-export-memo:focus{
  border-color:var(--brand,#2563eb);background:var(--card,#fff)}
.rb-export-note{margin:2px 0 0;font-size:10.5px;line-height:1.4;color:var(--faint,#94a3b8);
  padding:8px 10px;background:var(--day-hover,rgba(15,23,42,.04));border-radius:8px}
.rb-export-go{width:100%;justify-content:center;margin-top:2px}
.rb-export-stat{width:100%;font-size:11px;min-height:1em}

/* hierarchy accents */
.rb2-provsp{flex:1}
.rb2-provbar{display:inline-flex;align-items:center;gap:8px;margin-left:10px}
.rb2-minitrack{width:110px;height:5px;border-radius:4px;background:var(--day-hover,rgba(15,23,42,.06));
  overflow:hidden;display:inline-block}
.rb2-minitrack i{display:block;height:100%;border-radius:4px;background:var(--good,#2563eb);opacity:.75}
.rb2-provbar small{color:var(--faint,#94a3b8);font-size:10.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.rb2-provflag{font:650 10.5px/1 inherit;color:#92600a;background:rgba(245,158,11,.12);
  border:1px solid rgba(245,158,11,.3);border-radius:999px;padding:4px 9px;margin-left:10px;white-space:nowrap}
.rb2-meter{display:inline-block;width:78px;height:5px;border-radius:4px;vertical-align:middle;
  background:var(--day-hover,rgba(15,23,42,.06));overflow:hidden;margin-right:8px}
.rb2-meter i{display:block;height:100%;border-radius:4px;background:#047857}
.rb2-meter.warn i,.rb2-meter.under i{background:#d97706}

@media (max-width:1100px){
  .rb2-pipe-row{flex-wrap:wrap;gap:8px}
  .rb2-pcell{border-radius:10px!important;border-left:1px solid var(--line,#e2e8f0)!important;min-width:150px}
  .rb2-nowmark{display:none}
}
@media (max-width:700px){
  .rb2-head{padding:18px 16px 14px}
  .rb2-pipe{padding:12px 16px 14px}
  .rb2-listwrap{padding:12px 14px 22px}
}

/* Notification bubble on the Bill audit sub-nav button (top-right corner).
   Shows how many offtakers the audit has flagged. Hidden at zero. */
.rb-au-genbadge{
  position:absolute; top:-6px; right:-6px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; margin:0;
  font:800 10px/1 system-ui, -apple-system, sans-serif;
  color:#fff; background:#e11d48; /* rose — attention bubble */
  border:2px solid #fff; border-radius:999px;
  box-shadow:0 2px 6px -1px rgba(190,18,60,.45);
  white-space:nowrap; pointer-events:none;
  letter-spacing:-.02em;
}
/* Same trap as .nmg-combo-list: author display:flex beats [hidden]. */
.rb-au-genbadge[hidden]{ display:none !important; }
.rb-au-sum-why{ font-size:10.5px; font-weight:500; color:var(--faint,#94a3b8); margin-left:6px; }

/* ── Offtaker email studio — the MASS email customizer (full-screen overlay).
      Mirrors the NEPOOL Template Studio: preview LEFT, editor RIGHT, floating
      Ask-AI. Day palette, same control language as the rb-* toolbar. ── */
.rb-es-overlay{ position:fixed; inset:0; z-index:9000; display:flex; flex-direction:column;
  background:var(--bg,#f1f5f9); }
/* display:flex on these would override the `hidden` attribute's display:none —
   without this, the hidden chat panel still intercepts clicks over the editor. */
.rb-es-overlay[hidden], .rb-es-chat[hidden]{ display:none; }
.rb-es-head{ display:flex; align-items:center; gap:14px; padding:12px 22px;
  background:var(--card,#fff); border-bottom:1px solid var(--line,#e2e8f0); }
.rb-es-head > div{ flex:1; min-width:0; }
.rb-es-head b{ font-size:15px; color:var(--ink,#0f172a); }
.rb-es-sub{ display:block; font-size:11.5px; color:var(--muted,#475569); margin-top:2px; }
.rb-es-status{ font-size:11.5px; color:var(--faint,#94a3b8); white-space:nowrap; }
.rb-es-status.rb-es-err{ color:#dc2626; }
.rb-es-x{ border:0; background:transparent; cursor:pointer; font-size:15px;
  color:var(--faint,#94a3b8); width:30px; height:30px; border-radius:50%; }
.rb-es-x:hover{ background:var(--day-hover,rgba(15,23,42,.05)); color:var(--ink,#0f172a); }
.rb-es-cols{ display:flex; flex:1; min-height:0; overflow:hidden; }
.rb-es-left{ width:56%; overflow-y:auto; padding:18px 22px; border-right:1px solid var(--line,#e2e8f0); }
.rb-es-right{ width:44%; overflow-y:auto; padding:18px 22px; display:flex;
  flex-direction:column; gap:10px; }
.rb-es-prevlabel{ font:700 10.5px/1 inherit; letter-spacing:.08em; color:var(--faint,#94a3b8);
  margin-bottom:10px; text-transform:uppercase; }
.rb-es-prevlabel span{ text-transform:none; letter-spacing:0; font-weight:500; margin-left:6px; }
.rb-es-mail{ background:var(--card,#fff); border:1px solid var(--line,#e2e8f0);
  border-radius:14px; box-shadow:0 8px 30px -18px rgba(15,23,42,.25); overflow:hidden; }
.rb-es-mail-subj{ font:700 16px/1.35 inherit; color:var(--ink,#0f172a);
  padding:16px 20px 10px; border-bottom:1px solid var(--day-hover,rgba(15,23,42,.05)); }
.rb-es-mail-env{ padding:10px 20px; font-size:12px; color:var(--muted,#475569);
  border-bottom:1px solid var(--day-hover,rgba(15,23,42,.05)); display:grid; gap:3px; }
.rb-es-envlab{ font-weight:700; font-size:10px; color:var(--faint,#94a3b8); margin-right:5px; }
.rb-es-envvia{ color:var(--faint,#94a3b8); }
.rb-es-mail-body{ padding:18px 20px; font-size:14px; line-height:1.6; color:var(--ink,#0f172a); }
.rb-es-mail-body p{ margin:0 0 13px; }
.rb-es-mail-body p:last-child{ margin-bottom:0; }
.rb-es-mail-att{ padding:11px 20px; background:var(--card2,#f8fafc);
  border-top:1px solid var(--line,#e2e8f0); font-size:11.5px; color:var(--muted,#475569); }
.rb-es-toklabel{ font-size:11px; color:var(--faint,#94a3b8); }
.rb-es-tokens{ display:flex; flex-wrap:wrap; gap:5px; }
.rb-es-token{ border:1px solid var(--line,#e2e8f0); background:var(--card,#fff);
  border-radius:20px; padding:3px 10px; font:600 11px/1.4 ui-monospace,monospace;
  color:var(--muted,#475569); cursor:pointer; }
.rb-es-token:hover{ border-color:rgba(37,99,235,.45); color:var(--good,#2563eb);
  background:rgba(37,99,235,.06); }
.rb-es-lab{ font-size:11px; font-weight:600; color:var(--muted,#475569); margin-top:4px; }
.rb-es-input, .rb-es-ta{ width:100%; border:1px solid var(--line,#e2e8f0); border-radius:10px;
  background:var(--card,#fff); padding:8px 11px; font:500 12.5px/1.5 inherit;
  color:var(--ink,#0f172a); outline:0; box-sizing:border-box; }
.rb-es-ta{ font-family:ui-monospace,monospace; font-size:12px; resize:vertical; }
.rb-es-input:focus, .rb-es-ta:focus{ border-color:rgba(37,99,235,.45);
  box-shadow:0 0 0 3px rgba(37,99,235,.08); }
.rb-es-hint{ font-size:11px; color:var(--faint,#94a3b8); margin:2px 0 0; }
.rb-es-signoff{ border:1px solid var(--line,#e2e8f0); border-radius:12px;
  background:var(--card,#fff); padding:12px 14px; display:flex; flex-direction:column; gap:8px; }
.rb-es-signoff b{ font-size:12.5px; color:var(--ink,#0f172a); }
.rb-es-actions{ display:flex; align-items:center; gap:12px; margin-top:4px; }
.rb-es-reset{ border:0; background:transparent; cursor:pointer; font-size:11.5px;
  color:var(--faint,#94a3b8); text-decoration:underline; text-underline-offset:2px; }
.rb-es-reset:hover{ color:var(--ink,#0f172a); }
.rb-es-ai{ position:absolute; right:26px; top:50%; transform:translateY(-50%); z-index:20;
  border:0; cursor:pointer; background:var(--good,#2563eb); color:#fff; border-radius:999px;
  padding:11px 20px; font:600 14px/1 inherit; box-shadow:0 10px 30px -10px rgba(37,99,235,.6),
  0 0 0 3px rgba(37,99,235,.15); }
.rb-es-ai:hover{ filter:brightness(1.08); }
.rb-es-chat{ position:absolute; right:26px; top:50%; transform:translateY(-50%); z-index:21;
  width:330px; height:420px; display:flex; flex-direction:column; background:var(--card,#fff);
  border:1px solid var(--line,#e2e8f0); border-radius:16px;
  box-shadow:0 22px 60px -20px rgba(15,23,42,.4); overflow:hidden; }
.rb-es-chat-head{ display:flex; align-items:center; justify-content:space-between;
  padding:8px 8px 8px 14px; font:700 10.5px/1 inherit; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted,#475569);
  background:var(--card2,#f8fafc); border-bottom:1px solid var(--line,#e2e8f0); }
.rb-es-chat-msgs{ flex:1; overflow-y:auto; padding:12px; display:flex;
  flex-direction:column; gap:7px; }
.rb-es-msg{ max-width:88%; border:1px solid var(--line,#e2e8f0); background:var(--card,#fff);
  border-radius:12px; padding:7px 11px; font-size:12px; line-height:1.5;
  color:var(--ink,#0f172a); align-self:flex-start; white-space:pre-wrap; }
.rb-es-msg-me{ align-self:flex-end; background:var(--day-hover,rgba(15,23,42,.05)); border-color:transparent; }
.rb-es-chat-hint{ font-size:11.5px; color:var(--faint,#94a3b8); line-height:1.55; }
.rb-es-chat-in{ display:flex; align-items:flex-end; gap:7px; padding:10px; border-top:1px solid var(--line,#e2e8f0); }
.rb-es-chat-in textarea{ flex:1; border:1px solid var(--line,#e2e8f0); border-radius:9px;
  padding:7px 10px; font:500 12px/1.4 inherit; color:var(--ink,#0f172a); outline:0;
  resize:none; min-height:34px; max-height:132px; overflow-y:auto; }
.rb-es-chat-in textarea:focus{ border-color:rgba(37,99,235,.45); }
@media (max-width: 900px){
  .rb-es-cols{ flex-direction:column; overflow-y:auto; }
  .rb-es-left, .rb-es-right{ width:auto; border-right:0; }
  .rb-es-ai, .rb-es-chat{ right:14px; top:auto; bottom:16px; transform:none; }
  .rb-es-chat{ height:min(60vh, 420px); width:min(92vw, 330px); }
}

/* Inline ⓘ info marker (tooltip via title=) next to a field label. */
.rb-info{ display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px;
  margin-left:5px; border-radius:50%; font-size:10px; font-weight:700; cursor:help;
  color:var(--sky,#0ea5e9); background:rgba(14,165,233,.12); vertical-align:middle; }

/* Expected-GMP-rate helper: when the commission-year lookup resolves, the field hint
   goes from muted default copy to an emphasized reference line (octarine-signature
   accent — a computed, "the system knows this" affordance). */
.rb-rate-hint-on{ color:var(--ink,#0f172a) !important;
  border-left:2px solid var(--octarine,#a368ff); padding-left:8px; margin-left:-2px; }
.rb-rate-hint-on b{ color:var(--octarine,#a368ff); }

/* Solar-credit-rate read-only line (Bruce C6): for bill-scraped (GMP) offtakers the
   rate is not typed — it IS the bill's own net-metering credit rate. Same octarine
   "the system knows this" treatment as the expected-rate helper; the rate value
   itself carries the accent. */
.rb-rate-auto{ font-size:12px; line-height:1.5; color:var(--muted,#475569);
  border-left:2px solid var(--octarine,#a368ff); padding-left:8px; margin-left:-2px; }
.rb-rate-auto b{ color:var(--octarine,#a368ff); font-weight:700; }
/* A lingering manual override on a bill-priced offtaker: amber = state to review. */
.rb-rate-warn{ border-left-color:rgba(245,158,11,.75); }
.rb-rate-warn b{ color:#b45309; }
.rb-rate-clear{ align-self:flex-start; margin-top:4px; font-size:11.5px; }

/* ---- Required-field marking (Bruce C5) ------------------------------------ */
/* "Mandatory entries should have a unique coloring, optional ones can be clear."
   .req is applied ONLY to fields whose blank value actually blocks a save — modal:
   saveManual's guards (group / bill pick / name / share % / email); accordion
   editor: the ofPatchBody(null) fields (name / utility account / share %). One flat
   treatment: a small square chip on the label + a faint accent tint on the control —
   no glow, no asterisk soup. The accent rides var(--good) (utility blue in the AO
   day palette, emerald in dark). The conditional bill picker (#rbmUtilityWrap)
   carries .req but is [hidden] until it's genuinely required, so the marking stays
   truthful by construction. Optional fields keep the clear default look. */
.rep-fld.req > .rl::before{ content:""; display:inline-block; width:7px; height:7px;
  border-radius:2px; background:var(--good,#2563eb); margin-right:6px; }
.rep-fld.req > input, .rep-fld.req > select{
  background:rgba(63,214,138,.06); border-color:rgba(63,214,138,.35); }
/* Keep the form's own focus language (the base rule above otherwise outranks the
   sheet-order focus rules and would freeze the border on focus). */
.rep-fld.req > input:focus, .rep-fld.req > select:focus{
  border-color:rgba(94,194,255,.55); }
/* Day palette (AO default): blue-tinted white + blue-slate hairline. !important +
   the extra .req class outrank theme-day's white-field reset; theme-day's :focus
   rule still wins the cascade at equal specificity, so focus feedback survives. */
html[data-theme="day"] .rep-fld.req > input,
html[data-theme="day"] .rep-fld.req > select{
  background:#eef4ff !important; border-color:#b5c9ec !important; }
/* Legend — once per form, decodes the chip. Same glyph, same accent. */
.rb-req-legend{ font-size:11px; color:var(--faint,#94a3b8); margin:0 2px; }
.rb-req-legend::before{ content:""; display:inline-block; width:7px; height:7px;
  border-radius:2px; background:var(--good,#2563eb); margin-right:6px; }

/* ---- offtaker list: utility (provider) → utility account → offtaker (>5 offtakers) ---- */
/* TOP level — provider bucket (GMP / VEC / WEC). Whole header collapses all its utility
   accounts at once (Ford: "organized by utility... THOSE can be collapsed and expanded").
   Heavier than the account header so the hierarchy reads top-down at a glance. */
.rb-prov{ margin-bottom:16px; }
.rb-prov-head{ display:flex; align-items:center; gap:10px; padding:12px 15px;
  background:#fff; border:1px solid var(--so-cream-bd,#e8e2d9);
  border-left:3px solid var(--so-emerald,#059669); border-radius:12px;
  box-shadow:var(--so-shadow-card); cursor:pointer; user-select:none; }
.rb-prov-head:hover{ background:#fffdfa; box-shadow:0 4px 14px -3px rgba(140,78,28,.14); }
.rb-prov.collapsed .rb-prov-head{ }
.rb-prov-caret{ display:inline-block; width:13px; text-align:center; font-size:12px;
  color:var(--muted,#475569); transition:transform var(--motion-fast) var(--ease-out); flex:none; }
.rb-prov-head[aria-expanded="false"] .rb-prov-caret{ transform:rotate(-90deg); }
.rb-prov-label{ font-size:13.5px; font-weight:800; letter-spacing:.02em; color:var(--ink,#0f172a); }
.rb-prov-count{ font-size:11.5px; color:var(--faint,#94a3b8); }
.rb-prov-rows{ padding:10px 0 2px 14px; }   /* indent the utility accounts under their provider */

/* MIDDLE level — one utility account's offtakers. */
.rb-grp{ margin-bottom:14px; }
/* The whole group header collapses/expands its offtaker cards (Ford: "click on GMP
   Appalachian Community Array 1 and it should collapse all of the offtakers into it").
   Reads as clickable; the caret mirrors the vendor-sheet collapse gesture. */
.rb-grp-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:7px 4px;
  margin-bottom:6px; border-bottom:1px solid var(--line,#e2e8f0);
  cursor:pointer; user-select:none; border-radius:6px 6px 0 0; }
.rb-grp-head:hover{ background:var(--day-hover,rgba(15,23,42,.035)); }
.rb-grp-caret{ display:inline-block; width:12px; text-align:center; font-size:11px;
  color:var(--faint,#94a3b8); transition:transform var(--motion-fast) var(--ease-out); flex:none; }
.rb-grp-head[aria-expanded="false"] .rb-grp-caret{ transform:rotate(-90deg); }
.rb-grp.collapsed .rb-grp-head{ border-bottom-color:transparent; margin-bottom:0; }
/* Each master net-meter group is a subtly-tinted floating card (Ford 2026-07-10),
   like the offtaker-details sections — so the masters (Chester / Londonderry /
   Waterford …) read apart at a glance. Colour is stable per array. The offtaker
   cards inside stay white, sitting on the tint (same as the sections' white pills). */
.rb-grp-tinted{ padding:6px 12px 8px; border-radius:14px; margin-bottom:14px;
  border:1px solid var(--grp-bd,rgba(100,116,139,.22));
  background:var(--grp-bg,rgba(100,116,139,.06)); box-shadow:0 1px 2px rgba(15,23,42,.04); }
.rb-grp-tinted .rb-grp-head{ border-bottom-color:var(--grp-bd,rgba(100,116,139,.22)); }
.rb-grp-tinted .rb-grp-label{ color:var(--grp-ink,var(--ink,#0f172a)); }
.rb-grp-tinted .rb-grp-caret{ color:var(--grp-ink,var(--faint,#94a3b8)); }
.rb-grp-tinted .rb-grp-head:hover{ background:rgba(255,255,255,.35); }
/* 2-TONE ZEBRA (Ford 2026-07-12): the old 8-hue-per-array rainbow was replaced by
   a subtle alternating band keyed off row position (data-grp-tone = index % 2).
   Same two tones for every group, alternating — a consistent pattern with a reason
   (adjacent-row separation), not a meaningless per-array hue. Labels stay ONE ink
   (default var(--ink)) — text has no reason to switch color. */
.rb-grp-tinted[data-grp-tone="0"]{ --grp-bg:rgba(37,99,235,.05);   --grp-bd:rgba(37,99,235,.18); }
.rb-grp-tinted[data-grp-tone="1"]{ --grp-bg:rgba(100,116,139,.055); --grp-bd:rgba(100,116,139,.20); }
/* "+ Add offtaker" on a master header — a quiet ghost pill that pushes to the right
   (next to the % pill) and picks up the group's tone. One click to add another
   offtaker onto this same master (Ford 2026-07-10). */
.rb-grp-add{ margin-left:auto; font:inherit; font-size:11px; font-weight:650; line-height:1.4;
  color:var(--grp-ink,var(--muted,#475569)); background:rgba(255,255,255,.55);
  border:1px solid var(--grp-bd,rgba(100,116,139,.28)); border-radius:20px;
  padding:3px 10px; cursor:pointer; white-space:nowrap;
  transition:background .12s ease, box-shadow .12s ease; }
.rb-grp-add:hover{ background:#fff; box-shadow:0 1px 5px rgba(15,23,42,.14); }
.rb-grp-add:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--grp-bd,rgba(37,99,235,.4)); }
.rb-grp-label{ font-size:12.5px; font-weight:750; color:var(--ink,#0f172a); letter-spacing:-.005em; }
.rb-grp-count{ font-size:11.5px; color:var(--faint,#94a3b8); }
/* With the add-pill consuming the auto margin, the % pill sits right after it. */
.rb-grp-add + .rb-grp-pctwrap{ margin-left:8px; }
.rb-grp-pctwrap{ margin-left:auto; position:relative; display:inline-flex; }
.rb-grp-pct{ font-size:11px; font-weight:650; padding:3px 9px; border-radius:20px; cursor:default; }
.rb-grp-pct-ok{ background:rgba(37,99,235,.10); color:var(--good,#2563eb); }
.rb-grp-pct-warn{ background:rgba(255,107,107,.12); color:var(--bad,#dc2626); }
/* Hover/focus breakdown popover — "show me how it was calculated" (Ford). Each
   offtaker's share listed, then summed. Pure CSS reveal; appears above the pill. */
.rb-grp-pct-pop{ display:none; position:absolute; top:calc(100% + 8px); right:0; z-index:40;
  min-width:230px; max-width:300px; padding:9px 11px; border-radius:11px;
  background:var(--card,#fff); border:1px solid var(--line,#e2e8f0);
  box-shadow:0 10px 30px rgba(15,23,42,.16); font-weight:500; cursor:default;
  flex-direction:column; gap:3px; }
.rb-grp-pctwrap:hover .rb-grp-pct-pop,
.rb-grp-pctwrap:focus-within .rb-grp-pct-pop{ display:flex; }
.rb-grp-pop-title{ font-size:10.5px; font-weight:700; letter-spacing:.01em; color:var(--faint,#94a3b8);
  text-transform:uppercase; margin-bottom:4px; line-height:1.35; }
.rb-grp-pop-row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font-size:12px; color:var(--ink,#0f172a); }
.rb-grp-pop-who{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rb-grp-pop-pct{ font-variant-numeric:tabular-nums; font-weight:650; color:var(--muted,#475569); flex:none; }
.rb-grp-pop-sum{ margin-top:5px; padding-top:6px; border-top:1px solid var(--line,#e2e8f0); font-weight:750; }
.rb-grp-pop-sum .rb-grp-pop-who{ color:var(--ink,#0f172a); }
.rb-grp-pop-sum-ok .rb-grp-pop-pct{ color:var(--good,#2563eb); }
.rb-grp-pop-sum-warn .rb-grp-pop-pct{ color:var(--bad,#dc2626); }
/* over/under-allocation explainer line inside the popover (#22) */
.rb-grp-pop-note{ margin-top:5px; font-size:11px; line-height:1.4; color:var(--muted,#475569); }
.rb-acc{ border:1px solid var(--line,#e2e8f0); border-radius:13px; background:var(--card,#fff);
  margin-bottom:9px; overflow:hidden; transition:border-color .13s ease, box-shadow .13s ease; }
.rb-acc.rb-paused{ opacity:.6; }
.rb-acc:hover{ border-color:#cbd5e1; }
/* The open card lifts forward (dolly, not scale) with an octarine left spine. */
.rb-acc[data-open="true"]{ border-color:#cbd5e1;
  box-shadow:0 1px 2px -1px rgba(15,23,42,.06), 0 10px 30px -14px rgba(15,23,42,.22);
  border-left:2px solid var(--octarine,#a368ff); }
/* The clickable header strip — the WHOLE row is the toggle button. */
.rb-acc-head{ display:flex; align-items:flex-start; gap:11px; padding:13px 15px; cursor:pointer;
  user-select:none; transition:background .12s ease; }
.rb-acc-head:hover{ background:rgba(37,99,235,.04); }
.rb-acc-head:focus-visible{ outline:none; background:rgba(37,99,235,.06);
  box-shadow:inset 0 0 0 2px rgba(37,99,235,.35); border-radius:12px; }
.rb-acc[data-open="true"] .rb-acc-head{ background:rgba(37,99,235,.045); border-bottom:1px solid var(--line,#e2e8f0); }
.rb-acc-caret{ flex:0 0 auto; margin-top:2px; color:var(--faint,#94a3b8); font-size:12px; line-height:1.4;
  transition:transform var(--motion-fast) var(--ease-out), color .12s ease; }
.rb-acc[data-open="true"] .rb-acc-caret{ transform:rotate(90deg); color:var(--good,#2563eb); }
.rb-acc-head-main{ flex:1 1 auto; min-width:0; }
/* Delete-offtaker controls — made discoverable (Paul couldn't find delete). The row
   icon is muted at rest but lights up red the moment you hover the row; the expanded
   card carries a clearly-labeled "Delete offtaker" button. */
.rb-acc-del{ margin-left:auto; align-self:center; flex:none; background:none; border:0;
  color:var(--faint,#94a3b8); cursor:pointer; font-size:16px; line-height:1; padding:6px 9px;
  border-radius:7px; transition:background .12s ease, color .12s ease, transform .12s ease; }
.rb-acc-head:hover .rb-acc-del{ color:var(--bad,#e5484d); }
.rb-acc-del:hover{ background:rgba(229,72,77,.12); color:var(--bad,#e5484d); transform:scale(1.08); }
/* Matches the site's neutral button language (.rb-btn / .vs-closetabs): a clean card-
   background button with the --line border, quiet by default, that reveals its danger
   (red) only on hover — same treatment as the other delete affordances. */
.rb-offedit-del{ margin-left:auto; align-self:center; flex:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; background:var(--card,#fff);
  border:1px solid var(--line,#e2e8f0); color:var(--muted,#64748b);
  font-family:inherit; font-weight:600; font-size:12.5px; line-height:1; padding:8px 13px; border-radius:9px;
  transition:background .12s ease, border-color .12s ease, color .12s ease; }
.rb-offedit-del:hover{ background:rgba(229,72,77,.08); border-color:rgba(229,72,77,.55);
  color:var(--bad,#e5484d); }
.rb-offedit-del:active{ transform:translateY(.5px); }
/* Simplified expanded card — top review bar + collapsible <details> sections (Ford 2026-06-28).
   The send decision + summary sit up top; everything else folds away so the card opens calm. */
.rb-reviewbar{ display:flex; justify-content:space-between; align-items:center; gap:12px;
  flex-wrap:wrap; padding:2px 0 14px; }
.rb-reviewbar-sum{ font-size:13px; color:var(--ink2,#475569); }
.rb-reviewbar .rb-review-acts{ margin:0; }
/* Colour-dotted, tinted collapsible sections — NEPOOL client-card aesthetic
   (Ford 2026-07-04). Each section is a FULLY-TINTED floating card (green /
   orange / blue), a colour dot + uppercase label in the header, form fields on
   white pills inside — matching the NEPOOL report card exactly. */
.rb-sec{ --tone:#94a3b8; --tone-bg:rgba(100,116,139,.09); --tone-bd:rgba(100,116,139,.24); --tone-ink:#475569;
  border:1px solid var(--tone-bd); border-radius:14px; margin-bottom:11px;
  background:var(--tone-bg); overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.05); }
.rb-sec[data-tone="emerald"]{ --tone:#10b981; --tone-bg:rgba(16,185,129,.11); --tone-bd:rgba(16,185,129,.28); --tone-ink:#047857; }
.rb-sec[data-tone="amber"]{ --tone:#f59e0b; --tone-bg:rgba(245,158,11,.12); --tone-bd:rgba(245,158,11,.32); --tone-ink:#92600a; }
.rb-sec[data-tone="sky"]{ --tone:#0ea5e9; --tone-bg:rgba(14,165,233,.11); --tone-bd:rgba(14,165,233,.3); --tone-ink:#0369a1; }
.rb-sec[data-tone="violet"]{ --tone:#8b5cf6; --tone-bg:rgba(139,92,246,.11); --tone-bd:rgba(139,92,246,.3); --tone-ink:#6d28d9; }
.rb-sec > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:11px;
  padding:13px 15px; font-size:13px; color:var(--ink,#0f172a); user-select:none; background:transparent; }
.rb-sec > summary::-webkit-details-marker{ display:none; }
.rb-sec > summary:hover{ background:rgba(255,255,255,.28); }
/* The disclosure caret is a real, obvious toggle target (Ford 2026-07-11 — the old
   11px arrow was too small to read as a dropdown). A fixed 20px box keeps the rotation
   centered so the row never shifts as sections open/close. */
.rb-sec-caret{ font-style:normal; color:var(--tone); font-size:17px; line-height:1; opacity:1;
  width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; flex:none;
  transition:transform var(--motion-fast) var(--ease-out); }
.rb-sec[open] > summary .rb-sec-caret{ transform:rotate(90deg); }
.rb-sec-dot{ width:9px; height:9px; border-radius:50%; background:var(--tone); flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--tone) 18%, transparent); }
.rb-sec-t{ font-weight:700; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--tone-ink); }
.rb-sec-sub{ margin-left:auto; font-size:11px; color:var(--tone-ink); opacity:.7; font-weight:600; }
.rb-sec[open] > summary .rb-sec-sub{ display:none; }
.rb-sec-body{ padding:4px 14px 14px; background:transparent; }
/* form fields sit on white pills so they read cleanly on the tint (like the
   reference card's white TO/CC/EVERY rows) */
.rb-sec-body input:not([type="checkbox"]):not([type="radio"]),
.rb-sec-body select, .rb-sec-body textarea{ background:var(--card,#fff); }
.rb-sec-empty{ font-size:12.5px; color:var(--faint,#94a3b8); margin:6px 0; }
.rb-sec .rb-calc-h{ display:none; }
.rb-acc-name{ font-size:15px; font-weight:700; color:var(--ink,#0f172a); display:flex; align-items:center;
  gap:7px; flex-wrap:wrap; line-height:1.3; }
.rb-acc-sentence{ font-size:13px; line-height:1.5; color:var(--muted,#475569); margin:5px 0 4px; }
.rb-acc-sentence b{ color:var(--ink,#0f172a); font-weight:680; }
.rb-acc-meta{ font-size:11.5px; color:var(--faint,#94a3b8); font-variant-numeric:tabular-nums; }
/* Template <-> billing-model mismatch (e.g. a non-budget offtaker on a fixed-budget template) — surfaced so a silent fall-back to the standard invoice is visible. */
.rb-acc-warn{ font-size:12px; line-height:1.45; color:#8a5a00; background:rgba(214,158,46,.12); border:1px solid rgba(214,158,46,.35); border-radius:8px; padding:6px 9px; margin:4px 0 6px; display:flex; gap:6px; }
/* "$X ready" pill on a card that has a draft awaiting approval — utility blue. */
.rb-chip-ready{ background:rgba(37,99,235,.12); color:var(--good,#2563eb); font-weight:750; }
/* Status-first leading dot on each offtaker card (rb-acc-status-dot): one glance
   down the column tells you which reports need action (ready = blue) vs paused,
   already sent (green), or idle (hollow). Same halo language as .rb-sec-dot. */
.rb-acc-dot{ width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--faint,#94a3b8);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--faint,#94a3b8) 16%, transparent); }
.rb-acc-dot-ready{ background:var(--good,#2563eb);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--good,#2563eb) 20%, transparent); }
.rb-acc-dot-sent{ background:#10b981;
  box-shadow:0 0 0 3px color-mix(in srgb, #10b981 18%, transparent); }
.rb-acc-dot-paused{ background:var(--faint,#94a3b8); box-shadow:none; opacity:.55; }
.rb-acc-dot-idle{ background:transparent; box-shadow:inset 0 0 0 1.5px var(--faint,#94a3b8); }
/* The expanded body — holds the full draft review (.rb-acc-inner > .rb-layout). */
.rb-acc-body{ padding:0; }
.rb-acc-body[hidden]{ display:none; }
.rb-acc-inner{ padding:16px 16px 18px; animation:rbaccin .16s var(--ease-out); }
@keyframes rbaccin{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }
/* The draft card inside the open accordion is a flat panel, not a floating card —
   the accordion IS the card; the draft is its contents. */
.rb-acc-inner .rb-draft{ border:0 !important; box-shadow:none !important; background:transparent !important;
  padding:0; }
.rb-acc-inner .rb-layout{ margin-top:2px; }
/* Source-data outage banner on an array card — makes it explicit the data gap
   is at the vendor/source, not Array Operator. Amber = attention, not failure. */
.sb-srcout{ display:flex; align-items:flex-start; gap:9px; margin:9px 0 6px;
  padding:10px 12px; border-radius:11px;
  background:linear-gradient(180deg,rgba(245,158,11,.26),rgba(245,158,11,.12));
  border:1px solid rgba(245,158,11,.6);
  box-shadow:0 0 0 1px rgba(245,158,11,.18),0 6px 18px -8px rgba(245,158,11,.45); }
.sb-srcout-ic{ color:#ffb020; font-size:16px; line-height:1.3; flex:none;
  filter:drop-shadow(0 0 5px rgba(245,158,11,.6)); }
.sb-srcout-txt{ font-size:12px; line-height:1.5; color:#f4e3c4; }
.sb-srcout-txt b{ color:#ffd479; font-weight:800; display:block; margin-bottom:2px; font-size:12.5px; }
/* Capture-freshness line on extension-captured arrays — calm/informational (NOT an
   alarm): states "Last synced Xh ago" when our scrape is older than the live window. */
.sb-fresh{ display:flex; align-items:center; gap:7px; margin:7px 0 5px; padding:6px 10px;
  border-radius:9px; font-size:11.5px; line-height:1.4; font-weight:600;
  background:rgba(148,163,184,.12); border:1px solid rgba(148,163,184,.28); color:var(--muted,#8b97a8); }
.sb-fresh-dot{ width:7px; height:7px; border-radius:50%; flex:none;
  background:#94a3b8; box-shadow:0 0 5px rgba(148,163,184,.7); }
.sb-fresh--stale .sb-fresh-dot{ background:#cbd5e1; }
/* Demo / cloud-capture: calm green "always on" (no Open-to-sync CTA) */
.sb-fresh--live{
  background:rgba(16,185,129,.10); border-color:rgba(16,185,129,.28); color:#047857;
}
.sb-fresh--live .sb-fresh-dot{
  background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.18);
}
.sb-fresh-cta{ opacity:.72; font-weight:600; }
.sb-fresh-txt{ flex:1 1 auto; min-width:0; }
/* Demo brand row: plain vendor chip + cloud-capture note */
.sb-cloud-cap{
  display:inline-flex; align-items:center; gap:3px;
  margin-left:6px; font-size:10.5px; font-weight:700; letter-spacing:.01em;
  color:#047857; background:rgba(16,185,129,.10); border:1px solid rgba(16,185,129,.22);
  border-radius:999px; padding:2px 8px; white-space:nowrap;
}

/* ── Plan entitlements: locked tabs + the login plan-picker + the upgrade popup ── */
.tabbar .tab.locked{ opacity:.5; }
.tabbar .tab.locked .tab-lock{ margin-left:5px; font-size:11px; filter:grayscale(1); }
.tabbar .tab.locked:hover{ opacity:.62; cursor:pointer; }
.ao-modal-ov{ position:fixed; inset:0; z-index:9000; background:rgba(15,23,42,.55);
  backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:20px; }
.ao-modal.ao-plan{ background:#fff; border-radius:20px; max-width:760px; width:100%;
  box-shadow:0 24px 70px rgba(2,6,23,.4); padding:26px 26px 20px; }
.ao-plan-h h2{ margin:0 0 4px; font-size:21px; font-weight:800; color:#0f172a; }
.ao-plan-h p{ margin:0 0 18px; font-size:13.5px; color:#64748b; }
.ao-plan-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media(max-width:640px){ .ao-plan-cards{ grid-template-columns:1fr; } }
.ao-plan-card{ display:flex; flex-direction:column; gap:5px; text-align:left; cursor:pointer;
  border:1.5px solid #e2e8f0; background:#f8fafc; border-radius:15px; padding:16px 15px;
  transition:border-color .12s, background .12s, transform .08s; }
.ao-plan-card:hover{ border-color:#2563eb; background:#eff6ff; transform:translateY(-2px); }
.ao-plan-card.on{ border-color:#2563eb; background:#eff6ff; }
.ao-plan-card .ico{ font-size:24px; }
.ao-plan-card .t{ font-size:15px; font-weight:750; color:#0f172a; }
.ao-plan-card .d{ font-size:12px; color:#64748b; line-height:1.45; min-height:34px; }
.ao-plan-card .p{ margin-top:4px; font-size:12.5px; font-weight:700; color:#2563eb; }
.ao-plan-close{ margin-top:14px; background:none; border:none; color:#64748b; font-size:12.5px; cursor:pointer; text-decoration:underline; }
.ao-plan-msg{ margin-top:10px; font-size:12.5px; color:#64748b; min-height:16px; }
.ao-upgrade-pop{ position:absolute; z-index:9500; width:260px; background:#fff; border:1px solid #e2e8f0;
  border-radius:13px; box-shadow:0 14px 40px rgba(2,6,23,.28); padding:13px 14px; }
.ao-up-arrow{ position:absolute; top:-7px; left:22px; width:13px; height:13px; background:#fff;
  border-left:1px solid #e2e8f0; border-top:1px solid #e2e8f0; transform:rotate(45deg); }
.ao-upgrade-pop b{ display:block; font-size:13px; color:#0f172a; }
.ao-upgrade-pop p{ margin:3px 0 10px; font-size:12px; color:#64748b; line-height:1.45; }
.ao-up-actions{ display:flex; flex-direction:column; gap:7px; }
.ao-up-btn{ border:1px solid #e2e8f0; background:#fff; border-radius:9px; padding:7px 10px; font-size:12.5px; font-weight:650; color:#0f172a; cursor:pointer; }
.ao-up-btn.primary{ background:#2563eb; border-color:#2563eb; color:#fff; }
.ao-up-btn.ghost{ color:#64748b; }
.ao-up-btn:hover{ filter:brightness(.97); }

/* ── Itemized monthly bill (Master Account "Your bill") ── */
.ao-bill{ display:flex; flex-direction:column; gap:0; min-width:250px; }
.ao-bill-line{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:5px 0; }
.ao-bill-line .bl-k{ display:flex; flex-direction:column; gap:1px; }
.ao-bill-line .bl-k b{ font-size:12.5px; color:#0f172a; font-weight:680; }
.ao-bill-line .bl-calc{ font-size:11.5px; color:#64748b; }
.ao-bill-line .bl-desc{ font-size:10.5px; color:#94a3b8; line-height:1.4; margin-top:2px; max-width:42ch; }
.ao-bill-line .bl-v{ font-size:13.5px; font-weight:680; color:#0f172a; white-space:nowrap; }
.ao-bill-total{ display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  margin-top:5px; padding:9px 12px; border-radius:11px; background:#ecfdf5; border:1px solid #a7f3d0; }
.ao-bill-total > span:first-child{ font-size:12.5px; font-weight:750; color:#065f46; }
.ao-bill-tot-v{ font-size:19px; font-weight:820; color:#047857; white-space:nowrap; }
.ao-bill-tot-v small{ font-size:12px; font-weight:600; color:#059669; margin-left:1px; }
.ao-bill-ctx{ margin-top:7px; font-size:11.5px; color:#64748b; }
.ao-bill-empty, .ao-bill-load{ font-size:12.5px; color:#94a3b8; }
/* Trial / complimentary banner — a prominent element at the top of "Your bill".
   Amber = a regular trial counting down; octarine = an indefinite (comped) tester. */
.ao-bill-trial{ display:flex; align-items:center; gap:11px; margin-bottom:10px; padding:9px 12px;
  border-radius:11px; background:#fffbeb; border:1px solid #fde68a; }
.ao-bill-trial-ic{ flex:0 0 auto; font-size:17px; line-height:1; }
.ao-bill-trial-tx{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.ao-bill-trial-tx b{ font-size:12.5px; font-weight:760; color:#92400e; }
.ao-bill-trial-tx > span{ font-size:11px; color:#a16207; line-height:1.4; }
.ao-bill-trial-badge{ margin-left:auto; flex:0 0 auto; font-size:9.5px; font-weight:800; letter-spacing:.06em;
  color:#b45309; background:#fef3c7; border:1px solid #fcd34d; border-radius:999px; padding:2px 8px; white-space:nowrap; }
.ao-bill-trial--comp{ background:rgba(33,150,243,.08); border-color:rgba(33,150,243,.28); }
.ao-bill-trial--comp .ao-bill-trial-tx b{ color:#1565C0; }
.ao-bill-trial--comp .ao-bill-trial-tx > span{ color:#2196F3; }
.ao-bill-trial--comp .ao-bill-trial-badge{ color:#1565C0; background:rgba(33,150,243,.12); border-color:rgba(33,150,243,.32); }
/* Unified billing — plan tag, AI Pro upgrade, soft free-sample line */
.ao-bill-plan-tag{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#64748b; margin:0 0 6px; }
.ao-bill-soft{ font-size:12px; font-weight:650; color:#059669; }
.ao-bill-model-note{ font-size:10.5px; color:#94a3b8; line-height:1.45; margin:8px 0 2px; max-width:52ch; }
/* Collection skim — not part of monthly total (transparency row) */
.ao-bill-collect{ margin-top:6px; padding:8px 0 4px; border-top:1px dashed rgba(14,165,233,.22); }
.ao-bill-collect .bl-k b{ color:#0c4a6e; }
.ao-bill-collect .bl-calc{ color:#0369a1; font-weight:650; }
.ao-bill-collect-v .ao-bill-soft{ color:#0369a1; font-size:11px; letter-spacing:.02em; }
.ao-bill-ai{ margin-top:12px; padding:12px 14px; border-radius:12px;
  background:linear-gradient(165deg, rgba(16,185,129,.1), rgba(16,185,129,.04));
  border:1px solid rgba(16,185,129,.28); display:flex; flex-direction:column; gap:6px; }
.ao-bill-ai-h{ font-size:13px; color:#065f46; }
.ao-bill-ai-s{ font-size:11.5px; color:#64748b; line-height:1.45; max-width:48ch; }
.ao-bill-ai-btn{ align-self:flex-start; margin-top:4px; }
/* little click-to-sync button right next to "Last synced …" */
.sb-fresh-sync{ display:inline-flex; align-items:center; justify-content:center; flex:none;
  padding:3px 7px; border:1px solid rgba(148,163,184,.42); border-radius:7px;
  background:rgba(255,255,255,.6); color:inherit; cursor:pointer; font:inherit; line-height:1;
  transition:background .12s,border-color .12s,color .12s,transform .12s; }
.sb-fresh-sync:hover{ background:#047857; border-color:#047857; color:#fff; transform:translateY(-1px); }
.sb-fresh-sync:active{ transform:translateY(0); }
.sb-fresh-sync svg{ display:block; }
.sb-fresh-install{ flex:none; font-weight:700; color:#047857; text-decoration:none; white-space:nowrap; }
.sb-fresh-install:hover{ text-decoration:underline; }
.sb-fresh-ic{ display:inline-flex; flex:none; }
/* states */
.sb-fresh--warn{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.4); color:#92600a; }
.sb-fresh--warn .sb-fresh-dot{ background:#f59e0b; box-shadow:0 0 5px rgba(245,158,11,.6); }
.sb-fresh--syncing{ background:rgba(4,120,87,.1); border-color:rgba(4,120,87,.32); color:#065f46; }
.sb-fresh--syncing .sb-fresh-ic{ animation:sb-fresh-spin .9s linear infinite; }
@keyframes sb-fresh-spin{ to{ transform:rotate(360deg); } }
/* Auto-login hint — subtle tip on extension-captured arrays when vault creds not saved yet */
.sb-autologin-hint{ display:flex; align-items:flex-start; gap:8px; margin:8px 0 4px;
  padding:8px 11px; border-radius:9px; font-size:11.5px; line-height:1.45;
  background:rgba(37,99,235,.07); border:1px solid rgba(37,99,235,.22); color:var(--fg2); }
.sb-autologin-hint:empty{ display:none; }
/* Gap state — this array is actually stale (a real coverage gap), so the nudge
   carries amber urgency instead of the calm blue of the generic tip. */
.sb-autologin-hint.gap{ background:rgba(245,158,11,.09); border-color:rgba(245,158,11,.34); }
.sb-al-ic{ flex:none; font-size:13px; line-height:1.4; }
.sb-autologin-hint a.sb-al-link{ color:var(--good2); text-decoration:none; white-space:nowrap; }
.sb-autologin-hint.gap a.sb-al-link{ color:#f59e0b; }
.sb-autologin-hint a.sb-al-link:hover{ text-decoration:underline; }
/* whole-card emphasis when the source feed is dark — an unmistakable amber frame
   + a top "SOURCE OFFLINE" ribbon so it can't be missed at a glance. */
.sb-array--srcout{ border-color:rgba(245,158,11,.65) !important;
  box-shadow:0 0 0 1px rgba(245,158,11,.5),0 0 26px -4px rgba(245,158,11,.5) !important; }
.sb-array--srcout::after{ content:"⚠ SOURCE OFFLINE"; position:absolute; top:0; right:0;
  font-size:9.5px; font-weight:800; letter-spacing:.07em; color:#1a1206;
  background:linear-gradient(90deg,#f5b942,#ffce72); padding:3px 9px;
  border-bottom-left-radius:9px; z-index:4; }
/* offtaker details folded into the Edit panel */
.rb-more-details{ display:flex; flex-direction:column; gap:9px; width:100%;
  padding-top:11px; border-top:1px dashed var(--line); }
.rb-more-details .rb-cust-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.rb-more-details > button{ align-self:flex-start; }
@media(max-width:640px){ .rb-more-details .rb-cust-grid{ grid-template-columns:1fr; } }
/* offtakers header: title + [Setup · Link GMP · Add offtaker] on ONE row. It's the
 * first thing in the panel, so cancel cc-treedivider's big top margin/padding/border
 * (which otherwise leaves an empty band + an orphan divider line at the top). */
.rb-list-head{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:6px; padding-top:0; border-top:0; }
.rb-list-head > button{ flex:none; align-self:center; white-space:nowrap; }
.rb-mini button{ padding:6px 10px; font-size:11.5px; }
.rb-btn{ background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--ink);
  padding:7px 12px; border-radius:9px; font-size:12.5px; cursor:pointer; text-decoration:none; }
.rb-btn:hover{ background:rgba(255,255,255,.09); }
.rb-danger{ color:var(--bad); }

/* head-action cluster: Link GMP utility bills + Add an offtaker */
.rb-head-actions{ display:flex; align-items:center; gap:8px; flex:none; align-self:center; flex-wrap:wrap; justify-content:flex-end; }
.rb-head-actions > button{ white-space:nowrap; }
/* Accounting export (QuickBooks Online / Desktop / Xero) — the stacked form
   lives in the export popover; its field styling is in the .rb2-export block
   above. These are the shared status-line colors + the [hidden] guard. */
.rb-export[hidden]{ display:none; }
.rb-export-acct::placeholder,.rb-export-memo::placeholder{ color:var(--faint,#94a3b8); }
.rb-export-stat.rb-busy{ color:var(--muted,#475569); }
.rb-export-stat.rb-ok{ color:#0a7d4f; font-weight:650; }
.rb-export-stat.rb-err{ color:var(--bad,#e5484d); font-weight:600; }

/* ── Invoice archive (monthly directory) ─────────────────────────────────────
   A collapsible portfolio-level directory: months → arrays → offtakers, with
   honest availability badges + a per-month .zip download. Day palette, mirrors
   the .rb-sec collapsible pattern. */
.rb-arch{ margin:12px 0 4px; border:1px solid var(--line,#e2e8f0); border-radius:12px; background:var(--card,#fff); overflow:hidden; }
.rb-arch[hidden]{ display:none; }
.rb-arch-sum{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px;
  padding:11px 14px; font-size:13px; color:var(--ink,#16202b); user-select:none; }
.rb-arch-sum::-webkit-details-marker{ display:none; }
.rb-arch-sum:hover{ background:rgba(37,99,235,.04); }
.rb-arch[open] > .rb-arch-sum .rb-sec-caret{ transform:rotate(90deg); color:var(--good,#2563eb); }
.rb-arch-t{ font-weight:700; }
.rb-arch-sub{ margin-left:auto; font-size:11.5px; color:var(--faint,#94a3b8); }
.rb-arch[open] > .rb-arch-sum .rb-arch-sub{ display:none; }
.rb-arch-body{ padding:2px 14px 14px; }
.rb-arch-empty{ font-size:12.5px; color:var(--faint,#94a3b8); margin:8px 2px 4px; line-height:1.5; }
/* one month block */
.rb-arch-month{ border-top:1px solid #eef2f6; padding:12px 0 4px; }
.rb-arch-month:first-child{ border-top:0; padding-top:6px; }
.rb-arch-month-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.rb-arch-month-title{ font-size:14px; font-weight:750; color:var(--ink,#16202b); }
.rb-arch-month-count{ font-size:11.5px; font-weight:600; color:var(--faint,#94a3b8); margin-left:7px; font-variant-numeric:tabular-nums; }
.rb-arch-zip{ margin-left:auto; white-space:nowrap; }
.rb-arch-zip-stat{ font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--muted,#475569); flex-basis:100%; text-align:right; }
.rb-arch-zip-stat:empty{ display:none; }
.rb-arch-zip-stat.rb-ok{ color:#0a7d4f; font-weight:650; }
.rb-arch-zip-stat.rb-err{ color:var(--bad,#e5484d); font-weight:600; }
/* array subdirectory */
.rb-arch-array{ border:1px solid #eef2f6; border-radius:10px; padding:9px 12px; margin-bottom:8px; background:rgba(2,6,23,.008); }
.rb-arch-array-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:6px; }
.rb-arch-array-name{ font-size:13px; font-weight:680; color:var(--ink,#16202b); }
/* offtaker row */
.rb-arch-off{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 0 4px 12px; border-left:2px solid #eef2f6; }
.rb-arch-off + .rb-arch-off{ margin-top:2px; }
.rb-arch-off-name{ font-size:12.5px; color:#41505f; }
.rb-arch-off-none{ font-size:12px; color:var(--faint,#94a3b8); padding:2px 0 2px 12px; }
.rb-arch-badges{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.rb-arch-badge{ font-size:11px; font-weight:650; padding:2px 8px; border-radius:20px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.rb-arch-yes{ color:#0a7d4f; background:rgba(10,125,79,.1); }
.rb-arch-no{ color:var(--faint,#94a3b8); background:rgba(148,163,184,.12); }
@media(max-width:640px){ .rb-arch-zip{ margin-left:0; } .rb-arch-off{ flex-direction:column; align-items:flex-start; gap:3px; } }

/* ── Utility bill archive (PDFs on file, grouped by year) ────────────────── */
.rb-bill-arch{ margin-top:10px; }
.rb-bill-timescale-hint{
  font-size:12px; color:var(--faint,#94a3b8); line-height:1.45;
  margin:4px 2px 12px; padding:0;
}
/* Year buckets */
.rb-bill-year{
  border:1px solid #e8eef5; border-radius:12px; margin-bottom:10px;
  background:linear-gradient(180deg, rgba(37,99,235,.03), rgba(2,6,23,.01));
  overflow:hidden;
}
.rb-bill-year-sum{
  list-style:none; cursor:pointer; display:flex; align-items:center; gap:9px;
  padding:11px 14px; user-select:none;
}
.rb-bill-year-sum::-webkit-details-marker{ display:none; }
.rb-bill-year-sum:hover{ background:rgba(37,99,235,.05); }
.rb-bill-year[open] > .rb-bill-year-sum .rb-sec-caret{ transform:rotate(90deg); color:var(--good,#2563eb); }
.rb-bill-year-label{
  font-size:15px; font-weight:780; letter-spacing:-.02em; color:var(--ink,#16202b);
  font-variant-numeric:tabular-nums;
}
.rb-bill-year-count{
  margin-left:auto; font-size:11.5px; font-weight:650; color:var(--faint,#94a3b8);
  font-variant-numeric:tabular-nums;
}
.rb-bill-year-body{ padding:0 12px 12px; }
.rb-bill-list{ display:flex; flex-direction:column; gap:6px; padding-top:2px; }
/* Timeline rail down the left of each year bucket */
.rb-bill-list-timeline{ gap:0; position:relative; }
.rb-bill-row{
  display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap;
  padding:10px 12px 10px 4px; border:0; border-radius:0;
  background:transparent; position:relative;
}
.rb-bill-list-timeline .rb-bill-row + .rb-bill-row{ border-top:1px solid rgba(20,60,120,.06); }
.rb-bill-time{
  flex:0 0 14px; width:14px; position:relative; align-self:stretch;
  display:flex; flex-direction:column; align-items:center; padding-top:5px;
}
.rb-bill-time-dot{
  width:9px; height:9px; border-radius:50%; flex:0 0 auto;
  background:var(--sky-primary,#2196f3);
  box-shadow:0 0 0 3px rgba(33,150,243,.18);
  z-index:1;
}
.rb-bill-time-rail{
  flex:1 1 auto; width:2px; margin-top:4px; min-height:12px;
  background:linear-gradient(180deg, rgba(33,150,243,.35), rgba(33,150,243,.08));
  border-radius:1px;
}
.rb-bill-list-timeline .rb-bill-row:last-child .rb-bill-time-rail{ display:none; }
.rb-bill-main{ min-width:0; flex:1 1 180px; display:flex; flex-direction:column; gap:3px; padding-top:1px; }
.rb-bill-name{ font-size:13px; font-weight:680; color:var(--ink,#16202b); }
.rb-bill-period{ display:flex; flex-direction:column; gap:1px; }
.rb-bill-period-label{
  font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--faint,#94a3b8);
}
.rb-bill-period-range{
  font-size:13px; font-weight:650; color:#334155;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.rb-bill-meta{ font-size:11.5px; color:var(--faint,#94a3b8); }
.rb-bill-dl{ white-space:nowrap; flex:0 0 auto; margin-top:2px; }
.rb-bill-dl-stat{ font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--muted,#475569); min-width:1.2em; align-self:center; }
.rb-bill-dl-stat:empty{ display:none; }
.rb-bill-dl-stat.rb-ok{ color:#0a7d4f; font-weight:650; }
.rb-bill-dl-stat.rb-err{ color:var(--bad,#e5484d); font-weight:600; max-width:28ch; }
.rb-bill-dl-stat.rb-busy{ color:var(--muted,#475569); }
@media(max-width:640px){
  .rb-bill-row{ flex-direction:column; align-items:flex-start; padding-left:0; }
  .rb-bill-time{ display:none; }
  .rb-bill-dl{ width:100%; }
}

/* GMP-bills connection status under the offtakers header */
.rb-gmpbills-status{ margin:10px 0 4px; }
.rb-gmpbills-status:empty{ display:none; }
.rb-gmp-empty{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:rgba(252,166,23,.08); border:1px solid rgba(252,166,23,.35);
  color:var(--ink); padding:9px 12px; border-radius:10px; font-size:12.5px; }
.rb-gmp-ok{ color:var(--good,#4caf50); font-size:12.5px; padding:4px 2px; }
.rb-gmp-inline-link{ color:var(--accent,#FCA617); font-weight:600; cursor:pointer; white-space:nowrap; text-decoration:none; }
.rb-gmp-inline-link:hover{ text-decoration:underline; }
/* automation nudge: bills exist but no saved utility login → invoices aren't hands-free yet */
.rb-gmp-auto-nudge{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px;
  background:rgba(63,214,138,.07); border:1px solid rgba(63,214,138,.3);
  color:var(--ink); padding:9px 12px; border-radius:10px; font-size:12.5px; }
@media(max-width:640px){ .rb-head-actions{ width:100%; justify-content:flex-start; } }
/* wizard GMP step */
.rb-wiz-gmp-status{ margin:8px 0 14px; }
.rb-wiz-gmp-none{ color:var(--faint); }
.rb-wiz-gmp-some{ color:var(--accent,#FCA617); }
.rb-wiz-gmp-ok{ color:var(--good,#4caf50); font-weight:600; }
.rb-wiz-gmp-list{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:5px; }
.rb-wiz-gmp-list li{ display:flex; justify-content:space-between; gap:12px; font-size:12.5px;
  padding:6px 10px; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:8px; }
.rb-wiz-gmp-list .sub{ color:var(--faint); white-space:nowrap; }
.rb-wiz-gmp-actions{ margin-bottom:6px; }

/* ---- two-column reports layout: form (left) + live document preview (right) ---- */
.rb-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; align-items:start; }
@media(max-width:1080px){ .rb-layout{ grid-template-columns:1fr; } }
.rb-col-form{ min-width:0; }
.rb-col-form .rep-card{ max-width:none; }     /* fill the column, not the global 700px cap */
.rb-col-doc{ position:sticky; top:18px; min-width:0; display:flex; flex-direction:column; gap:14px; }
@media(max-width:1080px){ .rb-col-doc{ position:static; } }
.rb-doc-cap{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); font-weight:650; margin:0 2px 9px; }
/* ── Review header above the live preview: send actions + calc dashboard (Paul redesign) ── */
.rb-review-acts{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rb-btn-lg{ font-size:14px; font-weight:760; padding:11px 22px; }
.rb-email-saved{ font-size:11px; font-weight:600; color:var(--good,#0a7d4f); text-transform:none; letter-spacing:0; }
html.sky .rb-email-src-master{ background:rgba(33,150,243,.12); color:#1565c0; border-color:rgba(33,150,243,.28); }
html.sky .rb-email-src-custom{ background:rgba(245,158,11,.12); color:#c2410c; border-color:rgba(245,158,11,.3); }
html.sky .rb-email-revert{ background:rgba(255,255,255,.9); }
.rb-calc{ background:#fff; border:1px solid #e6edf3; border-radius:14px; padding:14px 16px; box-shadow:0 1px 2px rgba(16,32,43,.04); }
/* The calc dashboard now sits in the form column between the offtaker name and the
   cover email — give it breathing room above (the email block supplies the gap below). */
.rb-draft .rb-calc{ margin-top:12px; }
.rb-calc-h{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#5a6b7b; font-weight:700; margin-bottom:8px; }
.rb-calc-row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid #eef2f6; }
.rb-calc-row:last-child{ border-bottom:0; }
.rb-calc-k{ color:#5a6b7b; font-size:13px; display:flex; flex-direction:column; gap:2px; }
.rb-calc-k small{ color:#90a0b0; font-size:11px; }
.rb-calc-v{ color:#16202b; font-size:14px; font-weight:680; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rb-calc-eq{ color:#0a7d4f; font-weight:700; }
.rb-calc-link{ border:0; background:none; color:#0a7d4f; font:inherit; font-size:12px; font-weight:700; cursor:pointer; padding:0 0 0 4px; text-decoration:underline; }
.rb-calc-row.sub .rb-calc-v{ color:#5a6b7b; font-weight:640; }
.rb-calc-row.total{ border-bottom:0; padding-top:10px; margin-top:2px; border-top:2px solid #16202b; }
.rb-calc-row.total .rb-calc-k{ color:#16202b; font-weight:800; font-size:14px; }
.rb-calc-row.total .rb-calc-v{ color:#0a7d4f; font-size:18px; font-weight:850; }

/* Group-host bill anatomy strip (Generated · Host consumed · Group excess · …) */
.rb-anat{ margin:10px 0 12px; padding:10px 12px; border-radius:12px; border:1px solid #e6edf3;
  background:linear-gradient(180deg,#f7fafc,#fff); }
.rb-anat-has-warn{ border-color:rgba(214,158,46,.45); background:linear-gradient(180deg,rgba(255,247,232,.9),#fff); }
.rb-anat-h{ font-size:11px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; color:#5a6b7b; margin-bottom:8px; }
.rb-anat-h small{ text-transform:none; letter-spacing:0; font-weight:500; color:#90a0b0; margin-left:6px; }
.rb-anat-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.rb-anat-chip{ display:flex; flex-direction:column; gap:2px; min-width:5.5em; padding:6px 9px;
  border-radius:10px; background:rgba(16,32,43,.03); border:1px solid #eef2f6; }
.rb-anat-k{ font-size:10px; letter-spacing:.04em; text-transform:uppercase; font-weight:700; color:#90a0b0; }
.rb-anat-v{ font-size:13px; font-weight:750; color:#16202b; font-variant-numeric:tabular-nums; }
.rb-anat-warns{ margin-top:8px; display:flex; flex-direction:column; gap:4px; }
.rb-anat-warn{ font-size:12px; line-height:1.4; color:#8a6414; font-weight:600; }
.rb-anat-compact{ margin:8px 0 0; padding:8px 10px; }
.rb-anat-compact .rb-anat-chip{ padding:5px 8px; min-width:4.8em; }
.rb-anat-compact .rb-anat-v{ font-size:12.5px; }

/* How to read a GMP group host bill */
.rb-gmp-help{ margin:0 0 12px; border:1px solid #e6edf3; border-radius:12px; background:#fff;
  box-shadow:0 1px 2px rgba(16,32,43,.03); }
.rb-gmp-help > summary{ cursor:pointer; list-style:none; padding:10px 14px; font-size:12.5px;
  font-weight:700; color:#0a7d4f; display:flex; align-items:center; gap:8px; }
.rb-gmp-help > summary::-webkit-details-marker{ display:none; }
.rb-gmp-help > summary::before{ content:"▸"; font-size:11px; color:#90a0b0; transition:transform .12s; }
.rb-gmp-help[open] > summary::before{ transform:rotate(90deg); }
.rb-gmp-help-body{ padding:0 14px 12px; font-size:13px; line-height:1.5; color:#3a4a58; }
.rb-gmp-help-body p{ margin:0 0 8px; }
.rb-gmp-help-body ul{ margin:0 0 10px; padding-left:1.15em; }
.rb-gmp-help-body li{ margin:3px 0; }
.rb-gmp-help-ex{ margin-top:8px; padding:10px 12px; border-radius:10px; background:#f4f8f6;
  border:1px solid #dce8e2; }
.rb-gmp-help-ex-h{ font-size:11px; letter-spacing:.05em; text-transform:uppercase; font-weight:750;
  color:#0a7d4f; margin-bottom:4px; }
.rb-gmp-help-ex-p{ margin:0; font-size:12.5px; color:#3a4a58; }

/* ── Bill accuracy check ─────────────────────────────────────────────────────
   The per-offtaker GMP-allocation cross-check + production-vs-bill panel, woven
   into the invoice-review flow. Day palette (white cards, slate ink, emerald for
   good, amber — NOT red — for soft flags). Tone classes: .rb-bac-ok (emerald),
   .rb-bac-warn (amber), .rb-bac-mute (quiet grey for honest "not-run-yet" states). */
.rb-bac{ display:flex; flex-direction:column; gap:10px; }
.rb-bac-block{ background:#fff; border:1px solid #e6edf3; border-radius:12px; padding:12px 14px; }
.rb-bac-block.rb-bac-flag{ border-color:rgba(214,158,46,.5); background:linear-gradient(180deg,rgba(255,247,232,.9),#fff); box-shadow:0 1px 2px rgba(120,90,20,.06); }
.rb-bac-blabel{ display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:#5a6b7b; font-weight:700; margin-bottom:9px; }
.rb-bac-blabel small{ text-transform:none; letter-spacing:0; font-weight:500; color:#90a0b0; font-size:11px; margin-left:auto; }
.rb-bac-flag .rb-bac-blabel{ color:#8a6414; }
.rb-bac-flagicon{ color:#d69e2e; font-size:13px; }
.rb-bac-atstake{ margin-left:auto; text-transform:none; letter-spacing:0; font-size:12px; font-weight:800; color:#8a6414; background:rgba(214,158,46,.16); border-radius:8px; padding:2px 9px; }
.rb-bac-ok-pill{ margin-left:auto; text-transform:none; letter-spacing:0; font-size:11.5px; font-weight:700; color:#0a7d4f; }
/* array-level production-vs-bill rows */
.rb-bac-arow{ padding:8px 0; border-bottom:1px solid #eef2f6; }
.rb-bac-arow:last-child{ border-bottom:0; padding-bottom:0; }
.rb-bac-arow:first-of-type{ padding-top:0; }
.rb-bac-atop{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.rb-bac-aname{ font-size:13px; font-weight:650; color:#16202b; }
.rb-bac-verdict{ font-size:11.5px; font-weight:700; white-space:nowrap; }
.rb-bac-cmp{ display:block; margin-top:3px; font-size:13.5px; color:#16202b; font-variant-numeric:tabular-nums; font-weight:640; }
.rb-bac-vs{ color:#90a0b0; font-weight:500; font-size:12px; padding:0 2px; }
.rb-bac-delta{ margin-left:6px; font-weight:800; }
.rb-bac-reason{ margin-top:4px; font-size:12px; line-height:1.45; color:#7a5a12; }
/* tone classes */
.rb-bac-ok{ color:#0a7d4f; }
.rb-bac-warn{ color:#b7791f; }
.rb-bac-mute{ color:#90a0b0; }
/* the mismatch figure grid — credited / expected / implied / group-excess */
.rb-bac-figs{ display:grid; grid-template-columns:repeat(2,1fr); gap:9px 14px; margin:2px 0 4px; }
.rb-bac-fig{ display:flex; flex-direction:column; gap:2px; }
.rb-bac-fig b{ font-size:16px; font-weight:800; color:#16202b; font-variant-numeric:tabular-nums; line-height:1.05; }
.rb-bac-fig span{ font-size:11px; color:#7b8794; line-height:1.35; }
.rb-bac-fig-imp b{ color:#b7791f; }        /* the number GMP implied — on neither bill */
.rb-bac-note{ font-size:12.5px; line-height:1.55; color:#5a6b7b; margin-top:6px; }
.rb-bac-flag .rb-bac-note{ color:#6b5316; }
.rb-bac-note.rb-bac-mute{ color:#90a0b0; }
/* top-level summary chip in the generator hero (.rb-acc-lead) */
.rb-bac-summary{ margin-left:8px; }
.rb-bac-chip{ display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:750;
  color:#8a6414; background:rgba(214,158,46,.14); border:1px solid rgba(214,158,46,.4);
  border-radius:20px; padding:3px 11px; cursor:pointer; vertical-align:middle;
  font-variant-numeric:tabular-nums; transition:background .12s ease, border-color .12s ease; }
.rb-bac-chip:hover{ background:rgba(214,158,46,.22); border-color:rgba(214,158,46,.6); }
.rb-bac-chip:focus-visible{ outline:2px solid rgba(214,158,46,.6); outline-offset:2px; }
.rb-bac-clean{ font-size:12px; font-weight:600; color:#0a7d4f; vertical-align:middle; margin-left:2px; }
@media (max-width:560px){ .rb-bac-figs{ grid-template-columns:1fr; } }

/* ── Generation-time cross-check strip (Bruce) ──────────────────────────────
   Pops up at the top of the draft card the moment an invoice is generated.
   Quiet emerald one-liner when GMP's share matches the operator's; a prominent
   amber warning with the real numbers when it doesn't. Empty host collapses. */
.rb-xcheck-host:empty{ display:none; }
.rb-xcheck-host{ display:block; margin:2px 0 10px; }
.rb-xcheck-ok{ font-size:12.5px; font-weight:650; color:#0a7d4f; padding:7px 11px;
  background:rgba(10,125,79,.06); border:1px solid rgba(10,125,79,.22); border-radius:10px; }
.rb-xcheck-ok small{ font-weight:500; color:#4a8a6d; font-variant-numeric:tabular-nums; }
.rb-xcheck-flag{ border:1px solid rgba(214,158,46,.55); border-radius:12px; padding:11px 14px;
  background:linear-gradient(180deg,rgba(255,247,232,.95),#fff); box-shadow:0 1px 3px rgba(120,90,20,.08); }
.rb-xcheck-head{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:800;
  color:#8a6414; margin-bottom:8px; }
.rb-xcheck-ico{ color:#d69e2e; font-size:14px; }
.rb-xcheck-figs{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px 14px; margin-bottom:7px; }
.rb-xcheck-fig{ display:flex; flex-direction:column; gap:1px; }
.rb-xcheck-fig b{ font-size:15px; font-weight:800; color:#16202b; font-variant-numeric:tabular-nums; line-height:1.1; }
.rb-xcheck-fig small{ font-size:11px; color:#7b8794; line-height:1.35; }
.rb-xcheck-note{ font-size:12px; line-height:1.5; color:#6b5316; }
@media (max-width:560px){ .rb-xcheck-figs{ grid-template-columns:1fr; } }

/* ── Bill audit sandbox ──────────────────────────────────────────────────────
   Organize the fleet the way GMP allocates it: the array's MASTER utility bill on
   top, each offtaker's own bill underneath, flagged amber when GMP's credited kWh
   ≠ share × group excess. Day palette (white cards, slate ink, emerald good, amber
   warn — NOT red, octarine section accent). Reuses the .rb-subtab toggle language. */
.rb-au{ margin-top:2px; }
.rb-au-head{ margin:2px 2px 12px; }
.rb-au-title{ font-size:16px; font-weight:750; color:var(--ink,#16202b); display:flex; align-items:center; gap:9px; }
.rb-au-eyebrow{ font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--octarine,#a368ff); background:rgba(163,104,255,.1); border:1px solid rgba(163,104,255,.28); border-radius:999px; padding:2px 9px; }
.rb-au-lead{ font-size:12.5px; line-height:1.5; color:var(--muted,#475569); margin:6px 0 0; max-width:74ch; }
.rb-au-lead b{ color:var(--ink,#16202b); font-weight:660; }
/* tenant summary line */
.rb-au-summary{ font-size:13px; color:var(--muted,#475569); font-variant-numeric:tabular-nums; margin:0 2px 12px; }
.rb-au-summary b{ color:var(--ink,#16202b); font-weight:720; }
.rb-au-sum-flagged{ font-weight:600; }
.rb-au-summary.rb-au-sum-flag .rb-au-sum-flagged{ color:#8a6414; }
.rb-au-summary.rb-au-sum-flag .rb-au-sum-flagged b{ color:#8a6414; }
.rb-au-summary:not(.rb-au-sum-flag) .rb-au-sum-flagged{ color:#0a7d4f; }
.rb-au-summary:not(.rb-au-sum-flag) .rb-au-sum-flagged b{ color:#0a7d4f; }
/* per-utility sub-tabs */
.rb-au-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin:0 0 14px; }
.rb-au-tab{ display:inline-flex; align-items:center; gap:6px; background:var(--card,#fff); border:1px solid var(--line,#e2e8f0); color:var(--muted,#475569); font:640 12.5px/1 inherit; padding:8px 13px; border-radius:9px; cursor:pointer; transition:border-color .12s ease, color .12s ease; }
.rb-au-tab:hover{ color:var(--ink,#16202b); border-color:#cbd5e1; }
.rb-au-tab.on{ color:var(--ink,#16202b); border-color:var(--octarine,#a368ff); box-shadow:inset 0 -2px 0 var(--octarine,#a368ff); }
.rb-au-tab-flag{ font-size:10.5px; font-weight:800; color:#8a6414; background:rgba(214,158,46,.16); border-radius:999px; padding:1px 7px; font-variant-numeric:tabular-nums; }
/* one array card = master bill row + offtaker rows */
.rb-au-cards{ display:flex; flex-direction:column; gap:14px; }
.rb-au-card{ background:var(--card,#fff); border:1px solid #e6edf3; border-radius:14px; overflow:hidden; box-shadow:0 1px 2px rgba(16,32,43,.04); }
.rb-au-card-flag{ border-color:rgba(214,158,46,.45); }
.rb-au-master{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:13px 16px; background:linear-gradient(180deg,#f7f9fc,#fff); border-bottom:2px solid #16202b; }
.rb-au-card-flag .rb-au-master{ border-bottom-color:#d69e2e; background:linear-gradient(180deg,rgba(255,247,232,.85),#fff); }
.rb-au-master-name{ font-size:14.5px; font-weight:780; color:var(--ink,#16202b); display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.rb-au-card-badge{ font-size:11px; font-weight:800; color:#8a6414; background:rgba(214,158,46,.16); border-radius:999px; padding:2px 9px; }
.rb-au-master-meta{ display:flex; align-items:baseline; gap:14px; font-size:12.5px; color:var(--muted,#5a6b7b); font-variant-numeric:tabular-nums; }
.rb-au-excess b{ color:var(--ink,#16202b); font-weight:750; }
.rb-au-rate{ color:#0a7d4f; font-weight:700; }
/* offtaker rows under the master bill */
.rb-au-offs{ padding:4px 16px 12px; }
.rb-au-off{ padding:10px 0; border-bottom:1px solid #eef2f6; }
.rb-au-off:last-child{ border-bottom:0; }
.rb-au-off-top{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.rb-au-off-name{ font-size:13px; font-weight:650; color:var(--ink,#16202b); display:flex; align-items:center; gap:6px; }
.rb-au-off-share{ font-size:11.5px; color:var(--faint,#90a0b0); font-variant-numeric:tabular-nums; white-space:nowrap; }
/* Collapsed drawers — matching + awaiting-data offtakers, and fully-clean arrays,
   tuck away so only flagged items show by default (Bill audit). */
.rb-au-collapsed{ border-top:1px solid #eef2f6; }
.rb-au-collapsed-sum{ cursor:pointer; list-style:none; user-select:none; font-size:12px; font-weight:680; color:#0a7d4f; padding:9px 16px; display:flex; align-items:center; gap:8px; font-variant-numeric:tabular-nums; }
.rb-au-collapsed-sum::-webkit-details-marker{ display:none; }
.rb-au-collapsed-sum::before{ content:"\25B8"; font-size:10px; color:#90a0b0; transition:transform var(--motion-fast) var(--ease-out); }
.rb-au-collapsed[open] > .rb-au-collapsed-sum::before{ transform:rotate(90deg); }
.rb-au-collapsed-sum:hover{ color:#0b6b45; }
.rb-au-offs-drawer{ padding-top:2px; }
.rb-au-clean-drawer{ margin-top:2px; background:var(--card,#fff); border:1px solid #e6edf3; border-radius:14px; box-shadow:0 1px 2px rgba(16,32,43,.04); }
.rb-au-cards-drawer{ padding:6px 12px 12px; }
.rb-au-empty-clean{ font-size:13px; color:#0a7d4f; font-weight:650; padding:18px 4px; }
.rb-au-figs{ display:flex; align-items:baseline; gap:20px; flex-wrap:wrap; margin-top:5px; }
.rb-au-fig{ display:inline-flex; flex-direction:column; gap:1px; }
.rb-au-fig b{ font-size:14px; font-weight:720; color:var(--ink,#16202b); font-variant-numeric:tabular-nums; line-height:1.05; }
.rb-au-fig small{ font-size:10.5px; color:var(--faint,#90a0b0); }
.rb-au-fig-delta b{ color:#b7791f; }
.rb-au-ok{ font-size:12.5px; font-weight:700; color:#0a7d4f; align-self:center; }
.rb-au-atstake{ align-self:center; font-size:12px; font-weight:800; color:#8a6414; background:rgba(214,158,46,.16); border-radius:8px; padding:2px 9px; white-space:nowrap; }
/* the flagged (mismatch) offtaker row — amber, the catch */
.rb-au-flag{ margin:4px -16px; padding:10px 16px; background:linear-gradient(180deg,rgba(255,247,232,.7),transparent); border-left:3px solid #d69e2e; }
.rb-au-flag .rb-au-off-name{ color:#8a6414; }
.rb-au-flagicon{ color:#d69e2e; }
.rb-au-note{ font-size:12px; line-height:1.5; color:#6b5316; margin-top:6px; }
.rb-au-note.rb-au-mute{ color:#90a0b0; }
.rb-au-quiet .rb-au-off-name{ color:#5a6b7b; font-weight:600; }
/* empty + loading states */
.rb-au-empty{ font-size:13px; line-height:1.6; color:var(--faint,#94a3b8); padding:26px 4px; max-width:68ch; }
.rb-au-loading{ font-size:13px; color:var(--faint,#94a3b8); padding:22px 4px; }
@media (max-width:560px){ .rb-au-figs{ gap:14px; } .rb-au-master{ gap:8px; } }

/* placeholder shown before a spreadsheet is matched */
.rb-doc-empty{ border:1.5px dashed var(--line); border-radius:16px; padding:46px 28px; text-align:center; }
.rb-doc-empty .ico{ font-size:30px; display:block; margin-bottom:10px; opacity:.75; }
.rb-doc-empty b{ display:block; color:var(--muted); font-weight:680; font-size:14.5px; margin-bottom:6px; }
.rb-doc-empty div{ color:var(--faint); font-size:12.5px; line-height:1.55; max-width:340px; margin:0 auto; }

/* the "paper" — a light document so it reads as the real PDF on the dark app */
.rb-doc-paper{ background:#fff; color:#16202b; border-radius:14px; overflow:hidden;
  box-shadow:0 26px 70px -30px rgba(0,0,0,.75); font-size:13px; }
.rb-doc-band{ background:linear-gradient(120deg,#0f3d2e,#0a2a20); color:#eafff5;
  padding:18px 22px; display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.rb-doc-band .brand{ font-weight:800; font-size:16px; letter-spacing:-.01em; }
.rb-doc-band .brand small{ display:block; font-weight:500; font-size:11px; color:#8fdcc0; margin-top:3px; }
.rb-doc-band .doctype{ text-align:right; font-weight:800; font-size:15px; letter-spacing:.1em; }
.rb-doc-band .doctype small{ display:block; font-weight:500; font-size:11px; color:#8fdcc0; letter-spacing:0; margin-top:3px; }
.rb-doc-body{ padding:20px 22px; }
.rb-doc-parties{ display:flex; justify-content:space-between; gap:18px; margin-bottom:14px; }
.rb-doc-parties .lab{ font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:#8a98a6; }
.rb-doc-parties b{ display:block; font-size:14px; color:#16202b; margin-top:3px; }
.rb-doc-parties .sub{ font-size:12px; color:#5a6b7b; }
.rb-doc-table{ width:100%; border-collapse:collapse; }
.rb-doc-table th{ text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.05em;
  color:#8a98a6; border-bottom:1px solid #e3e9ef; padding:8px 0; }
.rb-doc-table td{ padding:12px 0; border-bottom:1px solid #eef2f6; vertical-align:top; line-height:1.45; }
.rb-doc-table td small{ color:#5a6b7b; }
.rb-doc-table .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.rb-doc-total td{ border-bottom:0; font-weight:800; font-size:15px; padding-top:13px; }
.rb-doc-total .amt{ color:#0a7d4f; }
.rb-doc-summary{ margin-top:16px; border-top:1px dashed #dde4ea; padding-top:14px; }
.rb-doc-summary h4{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#5a6b7b; margin:0 0 10px; }
.rb-doc-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.rb-doc-stats .st{ background:#f3f7fa; border-radius:10px; padding:10px 12px; }
.rb-doc-stats .st b{ display:block; font-size:18px; color:#16202b; font-variant-numeric:tabular-nums; }
.rb-doc-stats .st span{ font-size:10.5px; color:#5a6b7b; }
.rb-doc-note{ margin:11px 0 0; font-size:12px; line-height:1.55; color:#5a6b7b; }
.rb-doc-foot{ background:#f7f9fb; border-top:1px solid #eef2f6; padding:12px 22px;
  font-size:11.5px; color:#5a6b7b; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
.rb-doc-badges{ display:flex; gap:6px; flex-wrap:wrap; }
.rb-doc-badge{ background:#e8f5ee; color:#0a7d4f; font-weight:700; font-size:10px; padding:3px 8px; border-radius:20px; }
.rb-doc-badge.pending{ background:#fdf0d8; color:#9a6a00; }

/* live invoice preview beside the approval draft — let the inbox span full width
 * so the form (left) + the rendered invoice paper (right) sit side by side. */
.rb-inbox{ max-width:none; }
/* the offtaker's cover email, rendered live inside the preview paper */
.rb-doc-msg{ margin:0 0 14px; background:#f3f7fa; border:1px solid #e3e9ef; border-radius:10px;
  padding:11px 13px; font-size:12px; color:#3a4a5a; line-height:1.5; white-space:pre-wrap; }
.rb-doc-msg .lab{ display:block; font-size:10px; letter-spacing:.07em; text-transform:uppercase;
  color:#8a98a6; margin-bottom:5px; }
.rb-doc-hint{ font-size:11.5px; color:var(--faint); margin:9px 2px 0; line-height:1.5; }
/* the operator's own uploaded template, rendered live (token-filled) on white */
.rb-doc-frame{ width:100%; height:780px; border:0; background:#fff; border-radius:14px;
  box-shadow:0 26px 70px -30px rgba(0,0,0,.75); display:block; }
/* template card preview: paint JUST the invoice page (pdf.js canvas) on white — no
 * browser PDF-viewer toolbar / thumbnail rail / dark canvas around it. */
/* the two "view default format / view your template" buttons above the preview */
.rb-tpl-prevbtns{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 10px; }
/* the two preview buttons act as a toggle for the inline pane — highlight the active one */
.rb-tpl-prevbtns button.on{ background:rgba(37,99,235,.10); border-color:var(--good); color:var(--good); font-weight:680; }
.rb-tpl-paper{ background:#fff; border-radius:14px; overflow:hidden; display:block;
  box-shadow:0 26px 70px -30px rgba(0,0,0,.75); min-height:120px; }
.rb-tpl-paper canvas{ display:block; width:100%; height:auto; }
.rb-tpl-paper canvas.rb-tpl-zoomable{ cursor:zoom-in; }
.rb-tpl-load{ padding:46px 16px; text-align:center; color:var(--faint); font-size:12px; }
/* Click-to-enlarge lightbox — a big, crisp view of the invoice to read every number. */
.rb-tpl-lightbox{ position:fixed; inset:0; z-index:10000; background:rgba(8,12,18,.84);
  display:flex; align-items:flex-start; justify-content:center; overflow:auto;
  padding:28px 16px; cursor:zoom-out; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.rb-tpl-lb-inner{ background:#fff; border-radius:10px; min-width:200px; min-height:120px;
  box-shadow:0 36px 100px -24px rgba(0,0,0,.85); }
.rb-tpl-lb-inner canvas{ display:block; border-radius:10px; }
/* "Press Esc to go back" toast — teaches the close gesture, then fades. Never blocks
   the click-anywhere-to-close (pointer-events:none). */
.rb-tpl-lb-hint{ position:fixed; top:18px; left:50%; z-index:1; pointer-events:none;
  background:rgba(15,23,42,.92); color:#e8eef6; font-size:13px; font-weight:600; white-space:nowrap;
  padding:9px 16px; border-radius:999px; box-shadow:0 10px 30px -10px rgba(0,0,0,.7);
  animation:rbLbHint 5s ease-in-out both; }
.rb-tpl-lb-hint kbd{ font:inherit; font-weight:800; background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28); border-radius:6px; padding:1px 7px; margin:0 3px; }
@keyframes rbLbHint{ 0%{opacity:0;transform:translate(-50%,-10px)} 9%{opacity:1;transform:translate(-50%,0)}
  80%{opacity:1;transform:translate(-50%,0)} 100%{opacity:0;transform:translate(-50%,-8px)} }
/* fallback native-viewer height (only used if pdf.js can't load) */
.rb-tpl-frame{ width:100%; height:560px; border:0; display:block; }
.rb-tpl-layout{ margin-bottom:16px; }

/* ── faithful EMAIL reproduction (envelope + cover body + attachment chips) ── */
.rb-eml{ background:#fff; color:#16202b; border-radius:14px; overflow:hidden;
  box-shadow:0 26px 70px -30px rgba(0,0,0,.75); font-size:13px; }
.rb-eml-head{ background:#f7f9fb; border-bottom:1px solid #e6ecf1; padding:13px 18px; }
.rb-eml-head .row{ display:flex; gap:10px; padding:3px 0; align-items:baseline; }
.rb-eml-head .k{ flex:0 0 56px; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  color:#8a98a6; font-weight:650; }
.rb-eml-head .v{ flex:1 1 auto; min-width:0; font-size:13px; color:#2b3a47; word-break:break-word; }
.rb-eml-head .v small{ color:#8a98a6; font-size:11.5px; }
.rb-eml-head .v.subj{ font-weight:700; color:#16202b; }
.rb-eml-body{ padding:18px; }
.rb-eml-note{ background:#f3f7fa; border:1px solid #e3e9ef; border-radius:10px; padding:12px 14px;
  font-size:13px; line-height:1.6; color:#2f3e4c; margin-bottom:15px; }
.rb-eml-figs{ width:100%; border-collapse:collapse; font-size:13px; }
.rb-eml-figs td{ padding:7px 0; border-bottom:1px solid #eef2f6; }
.rb-eml-figs td:last-child{ text-align:right; font-variant-numeric:tabular-nums; color:#16202b; }
.rb-eml-figs td:first-child{ color:#5a6b7b; }
.rb-eml-figs tr.due td{ border-bottom:0; padding-top:11px; font-weight:800; }
.rb-eml-figs tr.due td:last-child{ color:#0a7d4f; font-size:15px; }
.rb-eml-attline{ font-size:12.5px; color:#5a6b7b; margin:14px 0 0; }
.rb-eml-atts{ border-top:1px solid #eef2f6; background:#fbfcfd; padding:13px 18px; }
.rb-eml-atts .lab{ font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:#8a98a6;
  font-weight:650; margin-bottom:9px; }
.rb-eml-att{ display:flex; align-items:center; gap:11px; width:100%; box-sizing:border-box; text-align:left;
  font:inherit; color:inherit; background:#fff; border:1px solid #e6ecf1; border-radius:10px;
  padding:10px 12px; margin-top:8px; cursor:pointer; transition:border-color .15s, transform .1s, box-shadow .15s; }
.rb-eml-att:not(.disabled):hover{ border-color:rgba(94,194,255,.62);
  box-shadow:0 4px 14px -8px rgba(94,194,255,.6); transform:translateY(-1px); }
.rb-eml-att.disabled{ cursor:default; }
.rb-eml-att .ico{ font-size:19px; line-height:1; flex:0 0 auto; }
.rb-eml-att .meta{ flex:1 1 auto; min-width:0; }
.rb-eml-att .meta b{ display:block; font-size:12.5px; color:#16202b; font-weight:680;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rb-eml-att .meta small{ display:block; font-size:11px; color:#7a8a98; margin-top:1px; }
.rb-eml-att .tag{ flex:0 0 auto; font-size:9.5px; font-weight:800; letter-spacing:.04em;
  padding:3px 8px; border-radius:20px; background:#e8f5ee; color:#0a7d4f; }
.rb-eml-att.pending{ border-style:dashed; background:#fffdf8; }
.rb-eml-att.pending .ico{ opacity:.5; }
.rb-eml-att.pending .tag{ background:#fdf0d8; color:#9a6a00; }

/* ============================ TRENDS TAB (.tr-*) ============================
 * Portfolio-wide multi-year trends. Dark solarpunk tokens; mirrors the report
 * card styling. Inline SVG chart, seasonal grid, per-array table. */
.tr-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:8px 0 20px; }
.tr-stat{ background:rgba(255,255,255,.018); border:1px solid var(--line); border-radius:14px; padding:14px 16px; }
.tr-k{ font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--faint); font-weight:650; }
.tr-v{ font-size:23px; font-weight:780; letter-spacing:-.02em; color:var(--ink); margin-top:5px; font-variant-numeric:tabular-nums; line-height:1.05; }
.tr-v.pos{ color:var(--good2,#3fd68a); }
.tr-v.neg{ color:var(--bad,#ff6b6b); }

.tr-block{ background:rgba(255,255,255,.012); border:1px solid var(--line); border-radius:16px; padding:18px 20px; margin-bottom:18px; }
.tr-block-h{ font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; }
.tr-block-sub{ font-size:12.5px; color:var(--faint); margin-top:3px; }

.tr-legend{ display:flex; flex-wrap:wrap; gap:10px 16px; margin:12px 0 4px; }
.tr-leg{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.tr-dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }

.tr-svg{ width:100%; height:auto; display:block; margin-top:6px; }

.tr-sgrid{ display:grid; grid-template-columns:repeat(6,1fr); gap:9px; margin-top:13px; }
.tr-scard{ background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:11px; padding:9px 11px; }
.tr-sm{ font-size:10px; letter-spacing:.05em; color:var(--faint); font-weight:650; }
.tr-sv{ font-size:17px; font-weight:760; color:var(--ink); margin-top:2px; font-variant-numeric:tabular-nums; }
.tr-delta{ display:inline-block; margin-top:4px; font-size:11px; font-weight:680; padding:2px 7px; border-radius:20px; font-variant-numeric:tabular-nums; }
.tr-delta.up{ background:rgba(63,214,138,.13); color:var(--good2,#3fd68a); }
.tr-delta.down{ background:rgba(255,107,107,.13); color:var(--bad,#ff6b6b); }
.tr-delta.flat{ background:rgba(255,255,255,.05); color:var(--faint); }

.tr-tablewrap{ border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:13px; }
.tr-table{ width:100%; border-collapse:collapse; font-size:13px; }
.tr-table thead th{ text-align:left; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); font-weight:650; padding:10px 14px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.02); }
.tr-table td{ padding:10px 14px; color:var(--ink); border-bottom:1px solid rgba(255,255,255,.04); }
.tr-table tbody tr:last-child td{ border-bottom:none; }
.tr-aname{ font-weight:600; }
.tr-anum{ text-align:right; font-variant-numeric:tabular-nums; }
.tr-ayears{ color:var(--faint); font-variant-numeric:tabular-nums; }

.tr-empty{ text-align:center; padding:54px 20px; color:var(--faint); }
.tr-empty-ic{ font-size:30px; }
.tr-empty-h{ font-size:16px; font-weight:720; color:var(--muted); margin-top:10px; }
.tr-empty-p{ font-size:13px; line-height:1.6; max-width:46ch; margin:7px auto 0; }

/* Mobile: stat row 2-up, seasonal 3-up. */
@media (max-width:640px){
  .tr-stats{ grid-template-columns:repeat(2,1fr); }
  .tr-sgrid{ grid-template-columns:repeat(3,1fr); }
}

/* ===================== APPROVAL INBOX (.rb-inbox / .rb-draft) =====================
 * Paul's draft → review → approve & send. Drafted reports await the operator's
 * approval; the GMP utility invoice can be attached before sending. */
.rb-inbox-wrap{ margin-bottom:20px; }
.rb-inbox{ border:1px solid var(--good,#3fd68a); box-shadow:0 0 0 1px rgba(63,214,138,.12), 0 8px 30px rgba(0,0,0,.18); }
.rb-inbox-h{ margin-bottom:14px; display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.rb-inbox-h-main{ flex:1 1 360px; min-width:0; }
.rb-inbox-h h3{ margin:4px 0 2px; }
.rb-inbox-h p{ font-size:13px; color:var(--faint); margin:0; max-width:62ch; line-height:1.55; }
/* offtaker picker — a CUSTOM dropdown (not a native <select>, so we own the menu
   design + nothing gets clipped); picking an offtaker switches the whole section. */
/* Clean, quiet offtaker picker — a label + a plain dropdown that matches the
   page's form fields (subtle line border, blue only on interaction). */
.rb-inbox-pick{ flex:0 0 auto; display:flex; flex-direction:column; gap:5px; align-items:stretch;
  min-width:240px; max-width:310px; }
.rb-pick-lab{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:600; color:var(--faint); }
.rb-pick{ position:relative; width:100%; }
.rb-pick-btn{ width:100%; display:flex; align-items:center; gap:10px; text-align:left; cursor:pointer;
  font:inherit; color:var(--ink,#0f172a); padding:9px 13px; border:1px solid var(--line,#e2e8f0);
  border-radius:10px; background:var(--card,#fff); transition:border-color .12s, box-shadow .12s; }
.rb-pick-btn:hover{ border-color:var(--good,#2563eb); }
.rb-pick[data-open="true"] .rb-pick-btn{ border-color:var(--good,#2563eb); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.rb-pick-btn:focus-visible{ outline:none; border-color:var(--good,#2563eb); box-shadow:0 0 0 3px rgba(37,99,235,.12); }
.rb-pick-btn-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.rb-pick-btn-name{ font-size:15px; font-weight:700; line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rb-pick-btn-sub{ font-size:11.5px; font-weight:500; color:var(--faint); line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rb-pick-caret{ flex:0 0 auto; color:var(--faint,#8b97a8); font-size:11px; transition:transform var(--motion-fast) var(--ease-out); }
.rb-pick[data-open="true"] .rb-pick-caret{ transform:rotate(180deg); }
.rb-pick-menu{ position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60; max-height:330px;
  overflow-y:auto; display:flex; flex-direction:column; gap:2px; padding:6px; border:1px solid var(--line);
  border-radius:12px; background:linear-gradient(165deg,var(--card,#fff),var(--card2,#f8fafc));
  box-shadow:0 18px 44px -20px rgba(2,6,23,.40); animation:rbpickin .16s var(--ease-out); }
.rb-pick-menu[hidden]{ display:none; }
@keyframes rbpickin{ from{opacity:0; transform:translateY(-5px)} to{opacity:1; transform:none} }
.rb-pick-item{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  border:0; background:none; font:inherit; color:var(--ink); padding:10px 12px; border-radius:8px; }
.rb-pick-item:hover, .rb-pick-item.kbd{ background:rgba(37,99,235,.06); }
.rb-pick-item.active{ background:rgba(37,99,235,.10); }
.rb-pick-item-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px; }
.rb-pick-item-name{ font-size:14px; font-weight:600; line-height:1.25; }
.rb-pick-item-sub{ font-size:11.5px; font-weight:500; color:var(--muted); line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rb-pick-pill{ flex:0 0 auto; font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 7px; border-radius:999px; }
.rb-pick-pill.ready{ color:#065f46; background:rgba(16,185,129,.18); }
.rb-pick-pill.todraft{ color:var(--muted); background:var(--day-chip,#eef2f7); }
.rb-pick-sub{ font-size:11px; color:var(--faint); }
/* invoice version-history dropdown (older drafts per offtaker) */
/* pickers row: "Billing period" (draft which cycle) + "Version" (view an older draft) */
.rb-pickrow{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:6px; }
.rb-pickrow:empty{ display:none; }
.rb-ver-lab{ font-size:11px; color:var(--faint); display:flex; align-items:center; gap:6px; margin-top:2px; }
.rb-ver-pick{ font:inherit; font-size:12px; font-weight:600; color:var(--ink); background:var(--card2,#f8fafc);
  border:1px solid var(--line); border-radius:7px; padding:3px 7px; cursor:pointer; max-width:240px; }
.rb-ver-pick:hover{ border-color:var(--good,#2563eb); }
.rb-ver-banner{ background:rgba(217,119,6,.10); border:1px solid rgba(217,119,6,.3); color:var(--gold2,#b45309);
  font-size:12px; font-weight:600; border-radius:9px; padding:8px 12px; margin-bottom:10px; }
/* on-demand draft: loading + graceful empty states in the body column */
.rb-draft-loading{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:11px; padding:30px 16px; color:var(--muted); }
.rb-spin{ width:26px; height:26px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--good,#047857); animation:rbspin .8s linear infinite; }
@keyframes rbspin{ to{ transform:rotate(360deg) } }
.rb-draft-empty{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.rb-empty-why{ color:var(--muted); font-size:13px; line-height:1.5; margin:2px 0 4px; }

/* ============================ VENDOR-DATA SPREADSHEET VIEW ============================ */
/* Sub-view toggle (Sandbox | Spreadsheet) — floats at the top of the Vendor-data tab. */
#panelDashboard{ position:relative; }
/* Fleet Triage sub-nav: Dashboard | Table | Sandbox (3 pills). */
#panelDashboard .ft-sub-seg{
  max-width: min(100%, 420px);
}
/* Fleet Triage | Table | Sandbox: soft enter (was hard cut; animation-audit HARD_SNAP) */
#panelDashboard .ft-sub.ft-sub-enter{
  animation: ftSubEnter .42s cubic-bezier(.22,1,.36,1) both;
}
@keyframes ftSubEnter{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  #panelDashboard .ft-sub.ft-sub-enter{ animation: none; }
}

/* Analysis | Trends | Resources sub-hop: soft enter (was hard .active cut) */
#panelAnalysis.an-sub-enter,
#panelTrends.an-sub-enter,
#panelResources.an-sub-enter{
  animation: anSubEnter .48s cubic-bezier(.22,1,.36,1) both;
}
@keyframes anSubEnter{
  from{ opacity:0; transform: translateY(12px); }
  to{ opacity:1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  #panelAnalysis.an-sub-enter,
  #panelTrends.an-sub-enter,
  #panelResources.an-sub-enter{ animation: none; }
}

/* Sub-nav strip (Ford 2026-07-16): flex-centers the pill in the band between
   the tabbar bottom and the main content card top.
   Tabbar has margin-bottom ~10–14px of empty air that counts as "above" the
   pill; equal strip padding then sits the pill low. Use LIGHTER top / HEAVIER
   bottom padding so: tabbarMb + padTop ≈ padBottom → geometric mid of the band. */
.ao-subnav{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  /* Tabbar margin-bottom (~10px) is upper air in the tabbar→card band.
     padTop 0 + padBottom 10 ≈ tabbar mb so the pill midpoint lands on the
     geometric middle (Ford: was sitting low with equal 14/14 padding). */
  padding: 0 0 10px;
  position: relative;
  z-index: 55;
  min-height: 0;
}
.ao-subnav .vs-seg{
  margin: 0 !important; /* strip owns vertical rhythm */
}

/* Sub-view toggle scale (shared). Margins live on .ao-subnav, not the pill. */
.vs-seg{ display:flex; width:fit-content; margin:0 auto; position:relative; z-index:55;
  gap:2px; padding:4px; border-radius:11px; border:1px solid var(--line,#e2e8f0);
  background:var(--card,#fff); box-shadow:0 2px 12px -5px rgba(15,23,42,.35);
  align-items:center; box-sizing:border-box; }
/* Invoices twin of Analysis .an-sub-seg — same scale (not denser). */
#panelReports{
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  /* Room for fixed Setup (BL) + Alerts (BR) fabs */
  padding-bottom: 96px;
}
#panelReports .inv-sub-seg{
  margin: 0;
  z-index: 20; /* well under #eaPanel (99970) */
  padding: 4px;
  gap: 2px;
  /* Four pills since THE FOLD (Offtakers | Bill audit | Trends | Generation
     reports) — the old 420px cap made the 4th spill out of the track. */
  max-width: min(100%, 640px);
  box-sizing: border-box;
  position: relative;
  align-items: center;
}
#panelReports .inv-sub-seg .vs-seg-btn{
  position: relative; /* anchor for the top-right flag bubble */
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 18px;
  border-radius: 999px;
  white-space: nowrap;
}
#panelReports .inv-sub-seg .rb-au-genbadge{
  position:absolute; top:-5px; right:-5px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:17px; height:17px; padding:0 5px; margin:0;
  border-radius:999px; font-size:10px; font-weight:800;
  background:#e11d48; color:#fff; border:2px solid #fff;
  box-shadow:0 2px 6px -1px rgba(190,18,60,.4);
  line-height:1; pointer-events:none;
}
#panelReports .inv-sub-seg .vs-seg-btn.on .rb-au-genbadge{
  background:#e11d48; color:#fff; border-color:#fff;
}
#panelReports .rb2-tabrow--kpis-only{
  display:flex; justify-content:flex-end; margin:0 0 4px; border:0;
}
#panelReports .rb2-tabrow--kpis-only .rb2-kpis{ margin:0; }
/* EA dock: content column already inset via .wrap; never break out to 100vw */
body.ea-shell-open #panelReports,
body.ea-shell-open #panelReports .rb2,
body.ea-shell-open #panelReports #reportsRoot,
body.ea-shell-open #panelAnalysis,
body.ea-shell-open #panelTrends,
body.ea-shell-open #panelResources{
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}
/* Analysis secondary nav (3 items): safe sizing when EA open */
body.ea-shell-open .ao-subnav .an-sub-seg,
body.ea-shell-open .an-sub-seg{
  max-width: min(100%, 400px);
}
/* Invoices secondary nav has FOUR pills since THE FOLD (Offtakers | Bill audit
   | Trends | Generation reports). The old 400px cap clipped the 'Generation
   reports' pill when the EA shell narrows the column. Use the full column and
   scroll on the pathological narrow case rather than clip. */
body.ea-shell-open .ao-subnav .inv-sub-seg,
body.ea-shell-open #panelReports .inv-sub-seg{
  max-width: 100%;
  overflow-x: auto;
}
/* Content sheets sit flush under the sub-nav strip (no extra top margin that
   un-centers the pill in the banner→card band). */
#panelDashboard > #sheetWrap,
#panelDashboard > #sbWrap,
#panelDashboard > #ftDash{
  margin-top: 0 !important;
}
#panelAnalysis > #analysisRoot,
#panelTrends > #trendsRoot,
#panelResources > #rsHost,
#panelReports > #reportsRoot{
  margin-top: 0;
}
/* Kill content-sheet top margins that un-center the sub-nav pill */
#panelAnalysis .an-wrap,
#panelTrends .an-wrap{
  margin-top: 0 !important;
}
#panelReports .rb2,
#panelReports .rb-subpanel.rb2{
  margin-top: 0 !important;
}

.vs-seg-btn{ border:0; cursor:pointer; font:inherit; font-size:12.5px; font-weight:700; color:var(--muted,#64748b);
  padding:7px 18px; border-radius:8px; background:none; transition:background .12s, color .12s, box-shadow .12s;
  line-height:1.25; display:inline-flex; align-items:center; justify-content:center; }
.vs-seg-btn.on{ background:var(--good,#2563eb); color:#fff; box-shadow:0 1px 4px -1px rgba(37,99,235,.5); }
/* Resting affordance for the INACTIVE option so the control reads as a two-state
   toggle at a glance (not one styled button next to plain text). Subtle inset
   fill + slightly darker ink invites the click without competing with the active
   blue; hover/focus then lift it further. */
.vs-seg-btn:not(.on){ background:var(--day-hover,rgba(15,23,42,.045)); color:var(--ink,#0f172a); opacity:.78; }
.vs-seg-btn:not(.on):hover,
.vs-seg-btn:not(.on):focus-visible{ background:var(--day-hover,rgba(15,23,42,.08)); color:var(--ink,#0f172a); opacity:1; outline:none; }

/* The spreadsheet panel itself.
   Fit the full table in the viewport — NO horizontal scroll (Ford 2026-07-16).
   When EA rail is open we densify columns; we never force min-width past 100%. */
#sheetWrap{
  padding:16px 16px 48px; max-width:1280px; margin:0 auto;
  width:100%; box-sizing:border-box; min-width:0; overflow:hidden;
}
.vs-headrow{ margin:0 2px 14px; }
.vs-headrow h2{ font-size:20px; font-weight:760; color:var(--ink); margin:0 0 2px; letter-spacing:-.01em; }
.vs-sub{ font-size:13px; color:var(--muted); }
.vs-hint{ margin-top:6px; font-size:12px; line-height:1.45; color:var(--muted); max-width:680px; }
.vs-hint strong{ color:var(--good,#2563eb); font-weight:650; }
.vs-scroll{
  /* Vertical scroll for many rows only — never horizontal (hideous per Ford) */
  overflow-x:hidden;
  overflow-y:auto;
  width:100%;
  max-width:100%;
  min-width:0;
  border:1px solid var(--line); border-radius:14px;
  background:var(--card,#fff); box-shadow:0 1px 3px rgba(15,23,42,.06);
  /* Branded thin blue scrollbar (not the fat OS grey track) */
  scrollbar-width: thin;
  scrollbar-color: #60a5fa transparent;
}
.vs-scroll::-webkit-scrollbar{ width:8px; height:8px; }
.vs-scroll::-webkit-scrollbar-track{
  background: transparent;
  margin: 6px 0;
  border-radius: 999px;
}
.vs-scroll::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, #93c5fd 0%, #3b82f6 55%, #2563eb 100%);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  min-height: 36px;
}
.vs-scroll::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(180deg, #60a5fa 0%, #2563eb 100%);
  border: 1px solid transparent;
  background-clip: padding-box;
}
.vs-scroll::-webkit-scrollbar-corner{ background: transparent; }
/* 9 columns: Vendor | Name | Output | Units | Live kW | Today | 14-day | Status | Synced
   (Vendor first — Ford 2026-07-16). Name gets the flex room so inverter labels don't clip. */
.vs-row{ display:grid;
  grid-template-columns:
    minmax(118px,.72fr)   /* vendor — fits long uppercased names (SolarEdge, AlsoEnergy) */
    minmax(0,1.5fr)       /* name / array / inverter */
    56px                  /* gauge (Output) */
    minmax(48px,.55fr)    /* units count / peer */
    minmax(68px,.8fr)     /* live kW */
    minmax(72px,.85fr)    /* today */
    minmax(72px,104px)    /* 14-day spark */
    minmax(0,1.1fr)       /* status */
    minmax(0,.72fr);      /* synced / details */
  align-items:center; gap:8px; padding:10px 12px;
  box-sizing:border-box; text-align:left;
  width:100%;
  min-width:0;
}
/* Output gauge column — a little speedometer of % of nameplate. Given a roomy column and
   centered so it sits between Vendor and Inverters without a big empty gap on either side. */
.vs-c-gauge{ display:flex; align-items:center; justify-content:center; }
.vs-colhead .vs-c-gauge{ justify-content:center; text-align:center; }
.vs-gauge{ display:inline-flex; align-items:center; justify-content:center; width:60px; line-height:0; }
.vs-gauge svg{ width:60px; height:31px; display:block; overflow:visible; }
.vs-gauge-empty{ width:60px; height:31px; }
/* Empty track = the not-yet-reached part of the dial; the colored fill is the energy so far. */
.vs-gg-track{ stroke:var(--gg-track,#e6e9ef); }
.vs-gg-fill{ filter:drop-shadow(0 .5px .6px rgba(15,23,42,.12)); }
.vs-gg-needle{ stroke:var(--card,#fff); stroke-width:.4; }
.vs-gauge-idle{ filter:grayscale(1); opacity:.42; }   /* resting (not daylight) — don't alarm */
/* Entrance sweep: the fill rises from empty and the needle swings up from the left to its
   value — once, when the sheet first scrolls into view (JS toggles .vs-sweep on #vsBody). */
@keyframes vsGgFill{ from{ stroke-dashoffset:100; } to{ stroke-dashoffset:var(--gg-off,100); } }
@keyframes vsGgNeedle{ from{ transform:rotate(var(--gg-rot,0deg)); } to{ transform:rotate(0deg); } }
.vs-sweep .vs-gg-fill{ animation:vsGgFill .95s cubic-bezier(.16,1,.3,1) both; }
.vs-sweep .vs-gg-nwrap{ animation:vsGgNeedle .95s cubic-bezier(.16,1,.3,1) both;
  transform-box:view-box; transform-origin:50px 46px; }
@media (prefers-reduced-motion: reduce){
  .vs-sweep .vs-gg-fill, .vs-sweep .vs-gg-nwrap{ animation:none; }
}
.vs-colhead{ font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:700;
  color:var(--faint); background:var(--bg2,#eef2f7); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:5; }
/* .vs-vhead is ALSO a .vs-row (same element carries both classes) — it inherits the
   real 7-column grid so every column (inverters/live now/today/status/synced) lines up
   under its header, and rolls up a genuine summary instead of just a vendor label. */
/* HIERARCHY (Ford 2026-07-10): three DISTINCT visual languages so expanding the tree
   never loses you. A per-vendor colored left bar (--vc, set inline per group) runs the
   whole subtree as a container; the vendor row is a bold color-tinted section band, array
   rows are plain white, inverter rows a faint tint indented deeper. */
/* Vendor accent = ONE cohesive Sky azure for every group (--vc, #2196F3 = --sky-primary),
   not a per-vendor rainbow and not the muddy neutral gray it briefly became (Ford
   2026-07-12: "make it less gray, redesign the colors"). Every group inherits this single
   --vc, so the left spine, the frosted header band (color-mix below + the sky override in
   theme-sky-triage.css), the caret and the hover all read as cool blue glass that belongs
   to the Sky palette — uniform across vendors, alive instead of gray. */
.vs-vgroup{ --vc:#2196f3; border-left:3px solid var(--vc); }
.vs-vhead{ padding:12px 16px 10px;
  background:color-mix(in srgb, var(--vc,#64748b) 10%, var(--card,#fff));
  border-top:1px solid var(--line);
  border-bottom:1px solid color-mix(in srgb, var(--vc,#64748b) 24%, var(--line)); }
.vs-vhead .vs-vbadge{ font-size:13px; font-weight:900; letter-spacing:.04em; }
.vs-vhead .vs-vcollapse-caret{ color:var(--vc,#64748b); }
/* The WHOLE vendor header row collapses/expands its arrays (Ford: "click anywhere in
   the row of the vendor... not just this tiny button"). It reads as clickable; the
   portal buttons inside keep their own pointer affordance + stopPropagation. Same
   caret-rotation language as the per-array .vs-caret so the gestures read identically. */
.vs-vhead[data-vcollapse]{ cursor:pointer; user-select:none; }
.vs-vhead[data-vcollapse]:hover{ background:color-mix(in srgb, var(--vc,#64748b) 17%, var(--card,#fff)); }
/* Vendor caret inherits the shared .vs-caret size; only its rotation differs (it's ▸ too
   now, so collapsed = pointing right, expanded = rotated down — same gesture as the array). */
.vs-vhead[aria-expanded="true"] .vs-vcollapse-caret{ transform:rotate(90deg); color:var(--good,#2563eb); }
.vs-vgroup.collapsed .vs-vhead{ border-bottom-color:transparent; }
.vs-vnote{ padding:5px 16px 7px; background:var(--card2,#f8fafc); border-bottom:1px solid var(--line);
  font-size:11.5px; line-height:1.4; color:var(--gold2,#b45309); }
.vs-vbadge{ font-size:11.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; color:var(--good,#2563eb); }
/* Vendor name as a button → opens the vendor portal. Reset button chrome, keep the
   colored text, and read as a link (pointer + hover underline). */
button.vs-vbadge{ background:none; border:0; padding:0; margin:0; cursor:pointer;
  font-family:inherit; line-height:inherit; }
button.vs-vbadge:hover{ text-decoration:underline; }
/* Vendor group NAMES are ONE uniform accent (the base .vs-vbadge brand blue) — Ford
   2026-07-12 removed the per-vendor RAINBOW ("remove the colors of the vendors, it looks
   weird and unprofessional, doesn't match our thing"). No per-vendor color override here
   or in theme-day.css; every vendor name inherits the same blue in day + sky. */
.vs-vcount{ font-size:11px; color:var(--faint); }
.vs-vlag{ font-size:10.5px; font-weight:700; color:var(--good,#2563eb); background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.28); border-radius:999px; padding:2px 10px; letter-spacing:.02em; cursor:pointer;
  white-space:nowrap; font-family:inherit; line-height:1.4; display:inline-flex; align-items:center; gap:4px;
  transition:background .12s, border-color .12s, color .12s; }
.vs-vlag:hover{ background:rgba(37,99,235,.18); border-color:var(--good,#2563eb); color:var(--good,#2563eb); }
.vs-vlag-sub{ font-weight:500; color:var(--muted); }
.vs-vlag:active{ transform:translateY(.5px); }
.vs-vlag-ic{ display:inline-block; font-weight:700; }
.vs-vlag.vs-refreshing{ cursor:progress; background:rgba(37,99,235,.14); border-color:var(--good,#2563eb); }
.vs-vlag.vs-refreshing .vs-vlag-ic{ animation:rbspin .7s linear infinite; }
.vs-vlag.vs-vlag-done{ color:#065f46; background:rgba(16,185,129,.16); border-color:rgba(16,185,129,.40); cursor:default; }
.vs-vlag.vs-vlag-err{ color:#b91c1c; background:rgba(220,38,38,.12); border-color:rgba(220,38,38,.38); }
.vs-vlag.vs-vlag-err:hover{ background:rgba(220,38,38,.20); }
.vs-arr{ border:0; background:var(--card,#fff); font:inherit; cursor:pointer; color:var(--ink); border-bottom:1px solid var(--line); }
.vs-arr .vs-c-name{ padding-left:16px; }
.vs-arr:hover{ background:var(--day-hover,rgba(15,23,42,.045)); }
.vs-arr.open{ background:rgba(37,99,235,.06); }
/* One caret for all three tiers (vendor / array / inverter): same glyph (▸), same size,
   centered in a fixed box so they line up and read consistently — points right when
   collapsed, rotates down when open. (Ford 2026-07-12: bigger + same size + nicer.) */
.vs-caret{ display:inline-block; width:17px; min-width:17px; text-align:center; font-size:12.5px;
  line-height:1; color:var(--muted,#64748b); transition:transform var(--motion-fast) var(--ease-out); flex:none; }
.vs-arr.open .vs-caret{ transform:rotate(90deg); color:var(--good,#2563eb); }
.vs-c-name{ font-weight:650; display:flex; align-items:center; gap:7px; min-width:0; overflow:hidden; }
/* Two-line inverter label: primary name + meta under it (no more mid-word clip of
   "S/N … · STP 20KTL…" jammed on one ellipsis line). */
.vs-inv-name{ align-items:flex-start; padding-top:1px; }
.vs-inv-name-stack{
  display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto;
}
.vs-inv-name-stack .vs-editable{
  display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vs-inv-sub{
  display:block; font-size:11px; font-weight:500; line-height:1.25;
  color:var(--muted,#64748b);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:100%;
}
.vs-c-vendor{ min-width:0; display:flex; align-items:center; gap:6px; overflow:hidden; }
.vs-c-vendor-empty{ /* spacer so inverter rows keep the 9-col grid aligned */ }
.vs-colhead .vs-c-vendor,
.vs-colhead .vs-c-name,
.vs-colhead .vs-c-inv,
.vs-colhead .vs-c-pow,
.vs-colhead .vs-c-today,
.vs-colhead .vs-c-spark,
.vs-colhead .vs-c-status,
.vs-colhead .vs-c-fresh{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Row-TYPE glyphs (Ford 2026-07-13): a 2×2-panel mark on array rows, a device+sine mark on
   inverter rows, so you can see what you're looking at. Sized to the text, centered on the
   line (works inside the inverter name's baseline flex too), muted so they're a quiet cue —
   never an interactive target. */
.vs-rowicon{ width:15px; height:15px; flex:none; align-self:center; color:var(--muted,#64748b); opacity:.85; }
/* Inline-editable array / inverter names (Spreadsheet view) — mirrors .sb-editable.
   A faint hover affordance (underline + a small pencil) signals the name is editable;
   editing gets a clear focus outline. The pencil is on the editable span only, so the
   caret + meta don't pick it up. */
.vs-editable{ cursor:text; border-radius:5px; padding:0 3px; margin:0 -3px; outline:1px solid transparent; outline-offset:1px; transition:outline-color .12s, background-color .12s; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vs-editable:hover{ outline-color:rgba(37,99,235,.30); text-decoration:underline dotted rgba(37,99,235,.45); text-underline-offset:3px; }
.vs-editable:hover::after{ content:"✎"; font-size:10px; color:var(--good,#2563eb); margin-left:5px; opacity:.7; }
.vs-editable.vs-editing{ outline:1px solid var(--good,#2563eb); outline-offset:1px; background:rgba(37,99,235,.08); text-decoration:none; cursor:text; overflow:visible; text-overflow:clip; }
.vs-editable.vs-editing::after{ content:none; }
/* Real <input> used while renaming — spaces, paste, and multi-word names work
   reliably (contenteditable was eating Space / losing caret on re-render). */
.vs-name-input{
  font: inherit; font-weight: inherit; color: inherit;
  border: 1px solid var(--good, #2563eb);
  border-radius: 6px;
  background: rgba(37,99,235,.08);
  padding: 2px 6px;
  margin: 0 -3px;
  outline: none;
  min-width: 8ch;
  max-width: min(48ch, 70vw);
  box-shadow: 0 0 0 2px rgba(37,99,235,.15);
  white-space: pre; /* preserve typed spaces */
}
/* Numeric/value columns right-align (header label + every row's figure share the
   SAME right edge) so a column of different-width numbers reads as one straight
   line instead of a ragged left edge — standard spreadsheet convention. Applies to
   the header cells too (COLS reuses these same classes), and to both per-array
   rows and the vendor-group rollup row, so the whole table stays one consistent
   grid regardless of row type. */
.vs-c-inv, .vs-c-pow, .vs-c-today, .vs-c-status, .vs-c-fresh{ text-align:right; min-width:0; }
.vs-c-inv, .vs-c-pow, .vs-c-today{
  font-variant-numeric:tabular-nums; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vs-c-fresh{ font-size:11.5px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* "Producing X of Y" (Ford 2026-07-18): the live number keeps the ink weight; the
   " / 7.6 kW" ceiling rides muted beside it so the eye lands on the live value
   first and reads the ratio second. Never wraps — the pair is one glance. */
.vs-pow-max{ color:var(--faint); font-weight:400; }
/* Frozen feed: dim the stale live value, amber the "N min ago" so a paused feed never reads as current. */
.vs-c-pow.vs-stale{ color:var(--muted); font-weight:400; }
.vs-c-pow.vs-stale .vs-pow-max{ color:var(--faint); }
/* "· N% of rated" rides next to the inverter's live kW (was misplaced under the Today=kWh column) — secondary weight so the kW reads as primary. */
.vs-pct-rated{ color:var(--muted); font-weight:400; font-size:11.5px; }
/* Today's kWh is an ESTIMATE (smeared from a utility bill), not a measured reading —
   mute it and tag "est." so it can never be mistaken for metered production. */
.vs-c-today.vs-est{ color:var(--muted); }
.vs-est-tag{ font-size:10px; font-weight:600; letter-spacing:.04em; color:var(--gold2,#b45309); text-transform:uppercase; }
/* Status cell: pills only (spark lives in .vs-c-spark). */
.vs-c-status{
  display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center;
  gap:4px; min-width:0; max-width:100%;
}
/* Dedicated 14-day graph column — fluid within track, gap before Status */
.vs-c-spark{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-width:0;
  max-width:100%;
  padding-right:6px;
  box-sizing:border-box;
  line-height:0;
  overflow:hidden;
}
.vs-colhead .vs-c-spark{
  font-size:10px;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--faint);
  line-height:1.15;
  justify-content:flex-start;
}
/* "latest data 36m ago" used to render gold+bold, which read as an ALARM when
   nothing is wrong (Ford 2026-07-11): the vendor portal publishes on its own
   cadence and our sync is live — a 36-minute-old source reading is normal. Match
   "synced now" exactly (faint, normal weight) so the SYNCED column reads calm; the
   honest source-age detail still lives in the cell's hover tooltip. */
.vs-c-fresh.vs-stale-syn{ color:var(--faint); font-weight:inherit; }
.vs-vchip{ font-size:11.5px; font-weight:600; color:var(--muted); }
/* Pills size to their text (inline-flex + max-content) so the tinted background
   always fully wraps the label — never a clipped orange bar under "UNDERPERFORMING"
   with letters hanging past the capsule (Ford 2026-07-14). */
.vs-pill{
  display:inline-flex; align-items:center; justify-content:center;
  box-sizing:border-box;
  font-size:12px; font-weight:800; letter-spacing:.02em; text-transform:uppercase;
  padding:5px 12px; border-radius:999px; white-space:nowrap; line-height:1.2;
  /* auto + max-width 100% so Status track can shrink when EA rail is open
     (max-content forced horizontal overflow / hideous scroll) */
  width:auto; max-width:100%; min-width:0;
  overflow:hidden; text-overflow:ellipsis;
}
/* Vendor/array status: single-line pill (ellipsis if squeezed). Multi-issue
   vendors render as separate .vs-pill siblings (see vendorStatusHtml) instead
   of one long "A · B" string that wrapped into two overlapping capsules. */
.vs-c-status .vs-pill{
  white-space:nowrap; max-width:100%; text-align:center;
  overflow:hidden; text-overflow:ellipsis;
  -webkit-box-decoration-break:unset; box-decoration-break:unset;
}
.vs-pill.ok{ color:#065f46; background:rgba(16,185,129,.20); }
.vs-pill.warn{ color:#92400e; background:rgba(217,119,6,.28); }
.vs-pill.bad{ color:#991b1b; background:rgba(220,38,38,.22); }
/* watch = soft live/feed state (cyan) — deliberately calmer than amber warn, matches
   the overview grid's "Watching N" / "Feed behind" chip so the two views read alike. */
.vs-pill.watch{ color:#0e7490; background:rgba(8,145,178,.20); }
.vs-pill.muted{ color:var(--muted); background:var(--day-chip,#eef2f7); }
/* Expanded inverter list. The vendor color is carried ONLY by the group's left bar
   (.vs-vgroup border-left) — NO background flood (Ford: "just hold the little line on
   the left... don't let the color follow all the way down"). So the wrap is plain card. */
.vs-inv-wrap{ background:var(--card,#fff); border-bottom:1px solid var(--line); }
/* Inverter rows share the SAME 9-column grid as vendor/array rows (incl. 14-day
   spark). Gauge + every column line up in one straight vertical column. */
.vs-inv{ cursor:pointer; border-top:1px solid var(--line,#e2e8f0); }
.vs-inv:focus-visible{ outline:2px solid var(--good,#2563eb); outline-offset:-2px; border-radius:6px; }
.vs-inv:first-child{ border-top:0; }
.vs-inv:hover{ background:rgba(37,99,235,.04); }
/* flash a row when deep-linked here from the Fleet Triage queue (focusInverter) */
.vs-row-flash{ animation:vsRowFlash 2.1s ease-out 1; border-radius:8px; }
@keyframes vsRowFlash{
  0%{ background:var(--ao-oct-soft,rgba(124,58,237,.16)); box-shadow:inset 0 0 0 2px var(--ao-oct,#7c3aed); }
  70%{ background:var(--ao-oct-soft,rgba(124,58,237,.10)); box-shadow:inset 0 0 0 2px rgba(124,58,237,.35); }
  100%{ background:transparent; box-shadow:inset 0 0 0 2px transparent; }
}
@media (prefers-reduced-motion:reduce){ .vs-row-flash{ animation:none; box-shadow:inset 0 0 0 2px var(--ao-oct,#7c3aed); } }
/* Inverter name sits in the Name column only (col 2). An empty Vendor cell keeps
   Live kW / Today / Status under the correct headers — spanning cols 1–2 was why
   "Live now" drifted and labels clipped (Ford 2026-07-16). */
.vs-inv-name{
  padding-left:12px;
  align-items:flex-start;
  /* do NOT set grid-column — must stay in Name track */
}
.vs-inv-name .vs-editable,
.vs-inv-name-stack .vs-editable{
  font-weight:600; color:var(--ink,#0f172a);
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vs-inv-peercol{ font-variant-numeric:tabular-nums; color:var(--muted); }
.vs-inv-nospark{ font-size:10.5px; color:var(--faint); font-style:italic; }
.vs-inv-empty{ padding:12px 16px 12px 42px; color:var(--faint); font-size:12.5px; }
/* "Details →" opens the full-screen 14-day chart (sits in the Synced column, right-aligned). */
.vs-inv-details{ font:inherit; font-size:12px; font-weight:600; cursor:pointer; color:var(--good,#2563eb);
  background:transparent; border:1px solid transparent; border-radius:7px; padding:4px 8px; white-space:nowrap;
  transition:background .12s, border-color .12s; }
.vs-inv-details:hover{ background:rgba(37,99,235,.08); border-color:rgba(37,99,235,.4); }
/* Spark lives in .vs-c-spark (own grid column). Scales to track width. */
.vs-inv-rowspark-wrap{
  width:100%;
  max-width:104px;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  line-height:0;
  opacity:.95;
  overflow:hidden;
}
.vs-c-status .vs-pill{
  max-width:100%;
  width:auto;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex-shrink:1;
  min-width:0;
}
.vs-inv-rowspark{
  display:block;
  width:100%;
  max-width:104px;
  height:24px;
  flex-shrink:1;
}
.vs-inv-rowspark rect{ fill:var(--good,#2563eb); opacity:.78; }
.vs-inv-rowspark .vs-spark-empty{ fill:var(--line,#e6e9ef); opacity:1; }
.vs-inv:hover .vs-inv-rowspark rect{ opacity:.92; }
.vs-inv-nospark{ font-size:10px; line-height:1.2; white-space:normal; color:var(--faint); font-style:italic; }
/* Phones: drop spark + densify — still no horizontal scroll */
@media(max-width:760px){
  .vs-row{
    grid-template-columns:
      minmax(72px,.55fr) minmax(0,1.4fr) 48px minmax(40px,.5fr)
      minmax(56px,.75fr) minmax(64px,.8fr)
      minmax(64px,88px) minmax(0,1.05fr) minmax(0,.65fr);
    gap:6px; padding:8px 10px;
    width:100%; min-width:0;
  }
  .vs-inv-rowspark-wrap, .vs-inv-rowspark{ max-width:80px; height:22px; }
}
@media(max-width:640px){
  .vs-inv-name{ padding-left:8px; }
  .vs-c-spark, .vs-colhead .vs-c-spark, .vs-inv-rowspark-wrap{ display:none !important; }
  .vs-row{
    grid-template-columns:
      minmax(64px,.5fr) minmax(0,1.45fr) 44px minmax(36px,.45fr)
      minmax(56px,.8fr) minmax(60px,.85fr)
      0px minmax(0,1.1fr) minmax(0,.65fr);
    gap:6px; width:100%; min-width:0;
  }
}

/* ── Full-screen inverter detail: the interactive 14-day chart (Ford + Martin 2026-07-12) ── */
.vs-dc-ov{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  background:rgba(15,23,42,.55); backdrop-filter:blur(2px); padding:24px; }
.vs-dc-modal{ position:relative; width:min(880px,96vw); max-height:92vh; overflow:auto; background:var(--card,#fff);
  border:1px solid var(--line,#e2e8f0); border-radius:16px; box-shadow:0 30px 80px -24px rgba(15,23,42,.5);
  padding:22px 24px 26px; }
.vs-dc-x{ position:absolute; top:14px; right:14px; width:32px; height:32px; border-radius:8px; border:1px solid var(--line);
  background:var(--card); color:var(--muted); font-size:14px; cursor:pointer; line-height:1; transition:color .12s, border-color .12s; }
.vs-dc-x:hover{ color:var(--bad,#e5484d); border-color:rgba(229,72,77,.5); }
.vs-dc-head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 40px 2px 0; }
.vs-dc-head h3{ margin:0; font-size:19px; font-weight:760; letter-spacing:-.01em; color:var(--ink,#0f172a); }
.vs-dc-sub{ font-size:13px; color:var(--faint); }
.vs-dc-diag{ margin:12px 0 2px; font-size:13px; line-height:1.5; color:var(--muted);
  background:var(--bg2,#f1f5f9); border:1px solid var(--line); border-radius:10px; padding:10px 13px; }
.vs-dc-diag.warn{ color:var(--gold2,#b45309); background:rgba(217,119,6,.08); border-color:rgba(217,119,6,.3); font-weight:600; }
.vs-dc-stats{ display:flex; flex-wrap:wrap; gap:14px 30px; margin:15px 0 6px; }
.vs-dc-stat{ display:flex; flex-direction:column; gap:2px; }
.vs-dc-k{ font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); }
.vs-dc-v{ font-size:15px; font-weight:650; color:var(--ink,#0f172a); font-variant-numeric:tabular-nums; }
.vs-dc-chartwrap{ margin-top:16px; border-top:1px solid var(--line); padding-top:14px; }
.vs-dc-chart-h{ font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); margin-bottom:10px; }
.vs-dc-legend{ font-weight:500; text-transform:none; letter-spacing:0; }
.vs-dc-svg{ width:100%; height:auto; display:block; }
.vs-dc-svg .vs-dc-bar{ fill:var(--good,#2563eb); opacity:.85; transition:opacity .1s ease; }
.vs-dc-svg .vs-dc-bar:hover{ opacity:1; }
.vs-dc-svg .vs-dc-empty{ fill:var(--line,#e6e9ef); opacity:1; }
.vs-dc-svg .vs-dc-grid{ stroke:var(--line,#e6e9ef); stroke-width:1; }
.vs-dc-svg .vs-dc-ylab, .vs-dc-svg .vs-dc-xlab{ fill:var(--faint,#94a3b8); font-size:11px; }
.vs-dc-svg .vs-dc-peer{ fill:none; stroke:var(--ink,#0f172a); stroke-width:1.5; stroke-dasharray:4 3; opacity:.5; vector-effect:non-scaling-stroke; }
.vs-dc-nohist{ color:var(--faint); font-size:13px; padding:24px 0; text-align:center; }

/* ── OUTAGE LOG (inverter detail overlay, after the 14-day chart) ───────────────
   "When did it go offline, and why?" Each episode is a two-column row: WHEN on the
   left (range + duration), the CAUSE sentence on the right, with a left spine whose
   colour encodes WHO the cause points at — not how loud it is:
     vendor_code  red     the hardware named its own fault (fact)
     unit         amber   this inverter alone, while its neighbours produced
     site_wide    cyan    the whole site went dark → NOT this unit (the calm "watch"
                          tone from the alerting palette, deliberately not fault-amber)
     no_data      slate   the feed went quiet; production unknown, not zero
     unknown      slate   we genuinely cannot tell, and we say so
   An ONGOING episode is a live problem, not history, so it overrides the spine to red,
   tints its whole row, and carries a pulsing dot — it must never read as an archive
   entry. Estimates always wear the dashed `est.` chip (never the solid fact chip). */
.vs-dc-ol-load,
.vs-dc-ol-clean,
.vs-dc-ol-err{ font-size:13px; line-height:1.55; padding:16px 0; color:var(--muted); }
.vs-dc-ol-load{ color:var(--faint); }
.vs-dc-ol-clean{ color:var(--muted); }
.vs-dc-ol-err{ color:var(--bad,#dc2626); }
.vs-dc-ol-retry{ margin-left:8px; font:inherit; font-weight:650; cursor:pointer; padding:3px 10px;
  border-radius:7px; border:1px solid var(--line); background:transparent; color:var(--ink,#0f172a); }
.vs-dc-ol-retry:hover{ border-color:var(--ink,#0f172a); }

.vs-dc-eps{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.vs-dc-ep{ display:grid; grid-template-columns:minmax(132px,168px) 1fr; gap:4px 18px;
  padding:11px 14px 11px 13px; border:1px solid var(--line); border-left:3px solid var(--faint,#94a3b8);
  border-radius:10px; background:transparent; }
.vs-dc-ep[data-kind="vendor_code"]{ border-left-color:var(--bad,#dc2626); }
.vs-dc-ep[data-kind="unit"]{ border-left-color:#d97706; }
.vs-dc-ep[data-kind="site_wide"]{ border-left-color:#0e7490; }

.vs-dc-ep-when{ display:flex; flex-direction:column; gap:3px; }
.vs-dc-ep-range{ font-size:13.5px; font-weight:700; color:var(--ink,#0f172a); font-variant-numeric:tabular-nums; }
.vs-dc-ep-dur{ font-size:11px; font-weight:650; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); }
.vs-dc-ep-live{ font-size:11px; font-weight:750; letter-spacing:.04em; text-transform:uppercase;
  color:var(--bad,#dc2626); display:inline-flex; align-items:center; gap:5px; }
.vs-dc-ep-live::first-letter{ font-size:14px; }   /* the ● reads as a status dot */

.vs-dc-ep-kind{ font-size:10px; font-weight:750; letter-spacing:.06em; text-transform:uppercase;
  color:var(--faint); margin-bottom:3px; }
.vs-dc-ep-cause{ margin:0; font-size:13px; line-height:1.55; color:var(--muted); }
.vs-dc-ep-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }

/* Ongoing = a live problem. Loud enough to separate from history, quiet enough that a
   log of five old outages doesn't turn the sheet into a wall of red. */
/* border-left-color MUST come after the border-color shorthand — the shorthand resets
   all four sides, so declaring the spine first silently loses it (it rendered a pale
   rgba(220,38,38,.24) instead of solid red until live DOM verification caught it). */
.vs-dc-ep.live{ background:rgba(220,38,38,.05); border-color:rgba(220,38,38,.22);
  border-left-color:var(--bad,#dc2626); }
.vs-dc-ep.live .vs-dc-ep-range{ color:var(--bad,#dc2626); }
.vs-dc-ep.live .vs-dc-ep-cause{ color:var(--ink,#0f172a); }
.vs-dc-ep.live .vs-dc-ep-live{ animation:vsDcPulse 2.4s ease-in-out infinite; }
@keyframes vsDcPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.45; } }
@media (prefers-reduced-motion: reduce){ .vs-dc-ep.live .vs-dc-ep-live{ animation:none; } }

/* Chips. `code` is the vendor's own words (a fact — solid, monospaced, quoted-feeling);
   `est` is ours (dashed border = "modelled, not measured"); `tick` links the alert. */
.vs-dc-chip{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:650;
  padding:3px 9px; border-radius:999px; border:1px solid var(--line); color:var(--muted);
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vs-dc-chip.code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:10.5px; font-weight:600;
  letter-spacing:.01em; color:#7f1d1d; background:rgba(220,38,38,.08); border-color:rgba(220,38,38,.28); }
.vs-dc-chip.est{ border-style:dashed; color:var(--faint); }
.vs-dc-chip.tick{ color:#0e7490; background:rgba(14,116,144,.07); border-color:rgba(14,116,144,.25); }
.vs-dc-chip.tick.sev-critical{ color:#991b1b; background:rgba(220,38,38,.07); border-color:rgba(220,38,38,.25); }

@media (max-width:640px){
  .vs-dc-ep{ grid-template-columns:1fr; gap:6px; }
  .vs-dc-ep-when{ flex-direction:row; align-items:baseline; gap:10px; flex-wrap:wrap; }
}

/* ── Array COMPARISON DECK (Ford 2026-07-13): every inverter as an off-axis, isometric
   stack of cohort-scaled mini-charts, fanned strongest→weakest so the spread reads at a
   glance; click a card to pull it into the focus chart above. Uses one shared perspective
   so the whole deck reads as a physical stack of cards receding up-and-right. ── */
.vs-cmp-wrap{ margin-top:20px; border-top:1px solid var(--line); padding-top:15px; }
.vs-cmp-h{ font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--faint); margin-bottom:6px; }
.vs-cmp-sub{ font-weight:500; text-transform:none; letter-spacing:0; }
.vs-cmp-stage{ position:relative; perspective:1700px; perspective-origin:62% 26%;
  /* Absolutely-positioned tilted cards don't contribute layout height, so reserve it from
     the card count: base card + a step per extra card in the fan. */
  min-height:calc(196px + (var(--n,4) - 1) * 34px); margin:6px 0 4px; transform-style:preserve-3d; }
.vs-cmp-card{ position:absolute; left:0; top:0; width:min(72%, 430px);
  display:flex; flex-direction:column; gap:7px; padding:11px 15px 12px;
  background:var(--card,#fff); border:1px solid var(--line,#e2e8f0); border-radius:15px;
  box-shadow:0 20px 44px -24px rgba(15,23,42,.55); cursor:pointer; text-align:left;
  font:inherit; color:var(--ink); will-change:transform;
  /* The fan: each card steps down-right and tilts into an isometric plane. Strongest (i=0)
     sits front-lower-left with the highest z-index; weaker cards recede up-right behind it. */
  transform:
    translate3d(calc(var(--i) * 34px), calc(var(--i) * 30px), calc(var(--i) * -46px))
    rotateX(30deg) rotateZ(-25deg);
  transform-origin:top left;
  z-index:calc(90 - var(--i));
  transition:transform .34s cubic-bezier(.16,1,.3,1), box-shadow .22s ease, border-color .18s ease, opacity .22s ease; }
/* Left status spine so a flagged inverter is visible even while its card is deep in the fan. */
.vs-cmp-card::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px;
  border-radius:3px; background:var(--good,#2563eb); opacity:.9; }
.vs-cmp-card.st-warn::before{ background:var(--warn,#d97706); }
.vs-cmp-card.st-bad::before{ background:var(--bad,#dc2626); }
.vs-cmp-card.st-muted::before{ background:var(--muted,#94a3b8); }
.vs-cmp-card.st-ok::before{ background:#16a34a; }
.vs-cmp-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.vs-cmp-name{ font-size:12.5px; font-weight:650; color:var(--ink,#0f172a);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.vs-cmp-peer{ font-size:12px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; flex:0 0 auto; }
.vs-cmp-spark{ display:block; line-height:0; }
.vs-cmp-sparksvg{ display:block; width:100%; height:52px; }
.vs-cmp-sparksvg rect{ fill:var(--good,#2563eb); opacity:.82; }
.vs-cmp-sparksvg .vs-spark-empty{ fill:var(--line,#e6e9ef); opacity:1; }
.vs-cmp-card.st-warn .vs-cmp-sparksvg rect{ fill:var(--warn,#d97706); }
.vs-cmp-card.st-bad .vs-cmp-sparksvg rect{ fill:var(--bad,#dc2626); }
.vs-cmp-foot{ display:flex; }
.vs-cmp-foot .vs-pill{ font-size:10.5px; padding:2px 8px; }
/* Hover: flatten + lift a card out of the fan so it's fully readable, without committing. */
.vs-cmp-card:hover{ transform:
    translate3d(calc(var(--i) * 34px), calc(var(--i) * 30px - 8px), 42px)
    rotateX(12deg) rotateZ(-9deg) scale(1.015);
  z-index:150; box-shadow:0 30px 60px -26px rgba(15,23,42,.5); }
/* Selected: pulled fully forward, face-on, ringed — the card whose chart fills the focus above. */
.vs-cmp-card.on{ transform:
    translate3d(calc(var(--i) * 34px), calc(var(--i) * 30px - 12px), 80px)
    rotateX(0deg) rotateZ(0deg) scale(1.03);
  z-index:200; border-color:var(--good,#2563eb);
  box-shadow:0 34px 74px -26px rgba(37,99,235,.5); }
.vs-cmp-card.on.st-warn{ border-color:var(--warn,#d97706); box-shadow:0 34px 74px -26px rgba(217,119,6,.5); }
.vs-cmp-card.on.st-bad{ border-color:var(--bad,#dc2626); box-shadow:0 34px 74px -26px rgba(220,38,38,.5); }
.vs-cmp-card:focus-visible{ outline:2px solid var(--good,#2563eb); outline-offset:2px; }
/* Phones / narrow: drop the 3D fan for a plain vertical list of full-width mini-charts —
   the comparison still reads, without the tilt overflowing a small screen. */
@media(max-width:680px){
  .vs-cmp-stage{ perspective:none; min-height:0 !important; display:flex; flex-direction:column; gap:10px; }
  .vs-cmp-card{ position:static; width:100%; transform:none !important; box-shadow:0 6px 18px -12px rgba(15,23,42,.4); z-index:auto !important; }
  .vs-cmp-card.on{ transform:none !important; }
}
@media (prefers-reduced-motion: reduce){ .vs-cmp-card{ transition:box-shadow .2s ease, border-color .18s ease; } }

/* Stale-feed recovery banner inside an expanded array row — explains the paused
   feed and offers a one-click portal open (extension re-captures on open). */
.vs-src-recover{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:8px 16px 4px 42px; padding:8px 12px; border-radius:9px;
  background:rgba(217,119,6,.08); border:1px solid rgba(217,119,6,.30); }
.vs-src-recover-txt{ flex:1 1 220px; font-size:12px; line-height:1.4; color:var(--ink,#0f172a); }
.vs-src-recover-btn{ flex:0 0 auto; font:inherit; font-size:11px; font-weight:700; cursor:pointer;
  color:#fff; background:var(--warn,#d97706); border:0; border-radius:7px; padding:6px 12px;
  transition:filter .12s, transform .08s; }
.vs-src-recover-btn:hover{ filter:brightness(1.06); }
.vs-src-recover-btn:active{ transform:translateY(.5px); }
/* Click an inverter row → detail panel (diagnosis, peer comparison, 14-day output + sparkline).
   Row layout, hover/open states + caret live with the .vs-inv rules above. */
.vs-inv-detail{ background:color-mix(in srgb, var(--good,#2563eb) 4%, var(--card,#fff)); border-bottom:1px solid var(--line);
  padding:12px 18px 14px 52px; display:flex; flex-wrap:wrap; gap:14px 28px; align-items:flex-start; }
.vs-id-diag{ flex-basis:100%; font-size:13px; font-weight:600; color:var(--ink); }
.vs-id-grid{ display:flex; flex-wrap:wrap; gap:14px 26px; }
.vs-id-cell{ display:flex; flex-direction:column; gap:2px; }
.vs-id-k{ font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); }
.vs-id-v{ font-size:13px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }
.vs-id-sparkwrap{ margin-left:auto; }
.vs-id-sparklabel{ font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); margin-bottom:5px; }
.vs-id-spark{ display:block; width:240px; height:40px; }
.vs-id-spark rect{ fill:var(--good,#2563eb); opacity:.85; }
/* Neighbor-average overlay: a faint dashed line on the shared cohort scale. */
.vs-id-peerline{ fill:none; stroke:var(--ink,#0f172a); stroke-width:1.25; stroke-dasharray:3 2;
  opacity:.42; vector-effect:non-scaling-stroke; }
.vs-id-peerkey{ font-weight:600; color:var(--faint); text-transform:none; letter-spacing:0; }
.vs-id-nospark{ font-size:11.5px; color:var(--faint); max-width:240px; align-self:center; }
.vs-empty{ padding:60px 20px; text-align:center; color:var(--faint); font-size:14px; }
.vs-empty-soft{ padding:24px 16px; font-size:13px; }

/* First-paint fleet skeleton (post-onboarding / cold load) */
.vs-loading-skel{ max-width:520px; margin:40px auto; text-align:left; }
.vs-loading-title{ font-size:15px; font-weight:720; color:var(--ink,#0E1420); margin:0 0 4px; }
.vs-loading-sub{ font-size:12.5px; color:var(--muted,#4C596B); margin:0 0 18px; line-height:1.4; }
.vs-skel-stack{ display:flex; flex-direction:column; gap:10px; }
.vs-skel-row{ display:flex; gap:10px; align-items:center; }
.vs-skel-bar{
  height:14px; border-radius:8px; flex:1 1 auto;
  background:linear-gradient(90deg, rgba(15,23,42,.06), rgba(15,23,42,.12), rgba(15,23,42,.06));
  background-size:200% 100%;
  animation:vsShimmer 2.2s ease-in-out infinite;
}
.vs-skel-bar.w40{ flex:0 0 40%; max-width:40%; }
.vs-skel-bar.w55{ flex:0 0 55%; max-width:55%; }
.vs-skel-bar.w35{ flex:0 0 35%; max-width:35%; }
.vs-skel-bar.w20{ flex:0 0 20%; max-width:20%; }
.vs-skel-bar.w22{ flex:0 0 22%; max-width:22%; }
.vs-skel-bar.w18{ flex:0 0 18%; max-width:18%; }
.vs-skel-bar.w15{ flex:0 0 15%; max-width:15%; }
.vs-skel-bar.w14{ flex:0 0 14%; max-width:14%; }
.vs-skel-bar.w12{ flex:0 0 12%; max-width:12%; }
.vs-count-refreshing{ color:var(--accent,#1976D2); }
.vs-inv-more{
  display:block; width:100%; margin:4px 0 10px; padding:10px 14px;
  border:1px dashed rgba(15,23,42,.16); border-radius:10px;
  background:rgba(15,23,42,.03); color:var(--ink,#0E1420);
  font:inherit; font-size:12.5px; font-weight:650; cursor:pointer; text-align:center;
}
.vs-inv-more:hover{ background:rgba(15,23,42,.06); border-color:rgba(15,23,42,.28); }
@media (prefers-reduced-motion: reduce){
  .vs-skel-bar{ animation:none !important; }
}

.vs-pending.is-collecting{
  border-color:rgba(22,163,74,.28);
  background:linear-gradient(135deg, rgba(22,163,74,.08), rgba(255,255,255,.7) 55%, rgba(211,242,206,.12));
}
.vs-pending.is-collecting .vs-pending-badge,
.vs-pending.is-collecting .vs-pending-stat{ color:#15803d; }
.vs-pending.is-collecting .vs-pending-pulse{
  background:#22c55e; box-shadow:0 0 0 0 rgba(34,197,94,.4);
}
.vs-collect-ghosts{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.vs-collect-ghost{
  display:flex; gap:10px; align-items:center; opacity:.85;
  padding:8px 10px; border-radius:10px;
  background:rgba(15,23,42,.03); border:1px dashed rgba(15,23,42,.10);
}
.vs-row.vs-arr.is-enter{
  animation:vsArrIn .45s ease both;
}
@keyframes vsArrIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}
/* Expand array → inverter block enters (was hard cut). Use layout-affecting
   motion (max-height + translate) so full-viewport capture can see it. */
.vs-inv-wrap.is-enter{
  animation:vsExpandIn .48s cubic-bezier(.22,1,.36,1) both;
  overflow:hidden;
}
.vs-inv-wrap.is-enter .vs-inv{
  animation:vsArrIn .42s ease both;
  animation-delay:calc(0.028s * var(--vi, 0));
}
@keyframes vsExpandIn{
  from{ opacity:0; transform:translateY(14px); max-height:0; }
  to{ opacity:1; transform:none; max-height:2400px; }
}
@media (prefers-reduced-motion: reduce){
  .vs-row.vs-arr.is-enter{ animation:none !important; }
  .vs-inv-wrap.is-enter,
  .vs-inv-wrap.is-enter .vs-inv{ animation:none !important; }
}

/* Pending vendor — just-connected, waiting for fleet-tree to show arrays */
.vs-pending{
  margin:0 0 14px; border-radius:16px; overflow:hidden;
  border:1px solid rgba(33,150,243,.28);
  background:linear-gradient(135deg, rgba(33,150,243,.08), rgba(255,255,255,.7) 55%, rgba(211,242,206,.15));
  box-shadow:0 6px 20px rgba(20,60,120,.06);
  /* No continuous remount animation — only .is-enter on first paint */
}
.vs-pending.is-enter{
  animation:vsPendingIn .4s ease both;
}
@keyframes vsPendingIn{
  from{ opacity:0; transform:translateY(6px) }
  to{ opacity:1; transform:none }
}
.vs-pending-head{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-bottom:1px solid rgba(33,150,243,.12);
}
.vs-pending-badge{
  font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase;
  color:#1976D2;
}
.vs-pending-pulse{
  width:10px; height:10px; border-radius:50%; flex:0 0 auto;
  background:#2196F3;
  box-shadow:0 0 0 0 rgba(33,150,243,.45);
  /* Slower, calmer pulse — less "alarm blink" */
  animation:vsPulse 2.4s ease-out infinite;
}
@keyframes vsPulse{
  0%{ box-shadow:0 0 0 0 rgba(33,150,243,.4); opacity:1 }
  70%{ box-shadow:0 0 0 8px rgba(33,150,243,0); opacity:.85 }
  100%{ box-shadow:0 0 0 0 rgba(33,150,243,0); opacity:1 }
}
.vs-pending-stat{
  margin-left:auto; font-size:12px; font-weight:720; color:#1976D2;
}
.vs-pending-body{ padding:14px 16px 16px }
.vs-pending-skel{
  height:12px; border-radius:8px; margin-bottom:8px; max-width:70%;
  background:linear-gradient(90deg, rgba(33,150,243,.10), rgba(33,150,243,.18), rgba(33,150,243,.10));
  background-size:200% 100%;
  /* Gentler shimmer so it doesn't feel like a full refresh */
  animation:vsShimmer 2.2s ease-in-out infinite;
}
.vs-pending-skel-short{ max-width:42%; margin-bottom:12px }
@keyframes vsShimmer{
  0%{ background-position:100% 0 }
  100%{ background-position:-100% 0 }
}
.vs-pending-copy{
  margin:0; font-size:12.5px; line-height:1.45; color:var(--muted,#4C596B);
}
.vs-pending-copy b{ color:var(--ink,#0E1420); font-weight:720 }
/* Stuck / failed — stay visible (never vanish without an answer) */
.vs-pending.is-stuck{
  border-color:rgba(217,119,6,.35);
  background:linear-gradient(135deg, rgba(251,191,36,.12), rgba(255,255,255,.75) 55%);
}
.vs-pending.is-stuck .vs-pending-badge,
.vs-pending.is-stuck .vs-pending-stat{ color:#b45309; }
.vs-pending.is-stuck .vs-pending-pulse{ background:#f59e0b; box-shadow:0 0 0 0 rgba(245,158,11,.4); }
.vs-pending.is-failed{
  border-color:rgba(220,38,38,.28);
  background:linear-gradient(135deg, rgba(254,226,226,.55), rgba(255,255,255,.8) 55%);
}
.vs-pending.is-failed .vs-pending-badge,
.vs-pending.is-failed .vs-pending-stat{ color:#b91c1c; }
.vs-pending.is-failed .vs-pending-pulse{
  background:#ef4444; animation:none; box-shadow:none; opacity:.9;
}
@media (prefers-reduced-motion: reduce){
  .vs-pending.is-enter, .vs-pending-pulse, .vs-pending-skel{ animation:none !important; }
}
/* search + sortable headers */
/* Toolbar stacks into rows: the title/hint block, then a buttons row, then a
   full-width search row sitting directly above the table it filters. */
.vs-topbar{ display:flex; flex-direction:column; gap:14px; margin:0 2px 14px; }
.vs-headrow{ margin:0; }
/* Buttons row: [+ Add vendor] on the left, bulk fleet ops pushed to the right. */
.vs-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.vs-actions-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-left:auto; }
/* Full-width search, directly above the column headers. */
.vs-searchrow{ width:100%; }
.vs-addbtn{ display:inline-flex; align-items:center; gap:6px; cursor:pointer; border:0;
  border-radius:9px; padding:9px 16px; font:inherit; font-size:13px; font-weight:650; color:#fff;
  white-space:nowrap; background:linear-gradient(180deg,#3b82f6,#1d4ed8);
  box-shadow:0 4px 14px -4px rgba(29,78,216,.45); transition:filter .12s, transform .04s; }
.vs-addbtn:hover{ filter:brightness(1.06); }
.vs-addbtn:active{ transform:translateY(1px); }
/* Sync all vendors — one click refreshes every vendor in the background. */
.vs-syncall{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; border:0;
  border-radius:9px; padding:9px 16px; font:inherit; font-size:13px; font-weight:650; color:#fff;
  white-space:nowrap; background:linear-gradient(180deg,#10b981,#059669);
  box-shadow:0 4px 14px -4px rgba(5,150,105,.45); transition:filter .12s, transform .04s; }
.vs-syncall:hover{ filter:brightness(1.06); }
.vs-syncall:active{ transform:translateY(1px); }
.vs-syncall:disabled, .vs-syncall.on{ cursor:default; filter:saturate(.85) brightness(.98); }
.vs-spin{ display:inline-block; width:12px; height:12px; border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff; border-radius:50%; animation:vs-spin .7s linear infinite; vertical-align:-1px; }
@keyframes vs-spin{ to{ transform:rotate(360deg); } }
/* Close all vendor tabs — secondary, neutral; turns red on hover. */
.vs-closetabs{ display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid #d7dee7; border-radius:9px; padding:9px 14px; font:inherit; font-size:13px;
  font-weight:600; color:#475569; white-space:nowrap; background:#fff; transition:all .12s; }
.vs-closetabs:hover{ border-color:#fca5a5; color:#b91c1c; background:#fef2f2; }
.vs-closetabs:active{ transform:translateY(1px); }
.vs-closetabs:disabled{ cursor:default; opacity:.7; }
.vs-search{ width:100%; font:inherit; font-size:13px; color:var(--ink,#0f172a);
  padding:8px 12px; border:1px solid var(--line,#e2e8f0); border-radius:9px; background:var(--card,#fff);
  transition:border-color .12s, box-shadow .12s; }
.vs-search:focus{ outline:none; border-color:var(--good,#2563eb); box-shadow:0 0 0 3px rgba(37,99,235,.16); }
.vs-search::placeholder{ color:var(--faint); }
.vs-sortable{ cursor:pointer; user-select:none; }
.vs-sortable:hover{ color:var(--ink,#0f172a); }
.vs-colhead .vs-sortable.on{ color:var(--good,#2563eb); }
/* ARRAY-header "Expand all / Collapse all" toggle (Ford 2026-07-10) — a small ghost
   pill beside the ARRAY label; one click opens every vendor group + array so all the
   inverter rows show at once. Header cell needs overflow:visible so the pill isn't clipped. */
.vs-namehead{ overflow:visible; }
.vs-expandall{ font:inherit; font-size:10px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--good,#2563eb); background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.22); border-radius:20px; padding:2px 9px; cursor:pointer;
  white-space:nowrap; line-height:1.5; flex:none; transition:background .12s ease; }
.vs-expandall:hover{ background:rgba(37,99,235,.14); }
.vs-expandall:active{ transform:translateY(1px); }
.vs-expandall:focus-visible{ outline:none; box-shadow:0 0 0 2px rgba(37,99,235,.4); }
.vs-sc{ font-style:normal; font-size:9px; }

/* ===== DASHBOARD tab — owner health home (reuses the .fc-* card + .cc-* queue) ===== */
#panelDashboard .dash-wrap{ max-width:1120px; margin:0 auto; padding:16px 20px 52px; }
.dash-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:0 2px 12px; }
.dash-head h2{ font-size:22px; font-weight:760; letter-spacing:-.01em; color:var(--ink); margin:0; }
.dash-prod{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; color:var(--muted); }
.dash-prod .dp b{ color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }
.dash-prod .dp-dot{ color:var(--faint); }
.dash-prod .dp-loading{ color:var(--faint); font-style:italic; }
/* Loading skeleton — shimmer bars that mirror the kW/kWh/arrays segments so the
   strip previews its final shape (no layout jump when the real numbers land). */
.dash-prod .dp-skel{ display:inline-flex; align-items:center; }
.dash-prod .dp-skel-bar{ display:inline-block; height:13px; border-radius:5px;
  background:linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.12) 37%, rgba(255,255,255,.05) 63%);
  background-size:280% 100%; animation:dpShimmer 1.25s ease-in-out infinite; }
.dash-prod .dp-skel-bar.w-kw{ width:62px; }
.dash-prod .dp-skel-bar.w-kwh{ width:78px; }
.dash-prod .dp-skel-bar.w-arr{ width:108px; }
.dash-prod .dp-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@keyframes dpShimmer{ 0%{ background-position:140% 0; } 100%{ background-position:-140% 0; } }
@media (prefers-reduced-motion: reduce){ .dash-prod .dp-skel-bar{ animation:none; } }
.dash-prod .dp-stale{ color:var(--warn,#b9722a); cursor:help; }
.dash-prod .dp-stale b{ color:var(--warn,#b9722a); }
/* asleep = feeds frozen because the sun is down at their site — calm/muted, not
   the alarming amber of a genuine daytime "paused" feed (#31) */
.dash-prod .dp-asleep{ color:var(--ink2,#64748b); cursor:help; }
.dash-prod .dp-asleep b{ color:var(--ink2,#64748b); }
.dash-attn{ margin:24px 2px 10px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dash-attn h3{ font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); margin:0; }
.dash-attn h3.all-clear{ color:var(--good,#137a4a); }
/* Fleet-level Energy Agent affordance — octarine marks the AI; a quiet outline
   (not a filled block) so it never competes with the per-row filled asks. */
.cc-fleet-ask{ flex:0 0 auto; border:1px solid rgba(124,58,237,.42); background:rgba(124,58,237,.08);
  color:var(--ao-oct,#7c3aed); border-radius:999px; padding:6px 13px; font-size:12px; font-weight:680;
  line-height:1.1; cursor:pointer; transition:background .15s ease, transform .12s ease; }
.cc-fleet-ask:hover{ background:rgba(124,58,237,.14); transform:translateY(-1px); }
.cc-fleet-ask:active{ transform:translateY(0); }
.cc-fleet-ask:focus-visible{ outline:2px solid var(--ao-oct,#7c3aed); outline-offset:2px; }
@media (max-width:430px){ .cc-fleet-ask{ padding:5px 10px; font-size:11px; } }
@media (prefers-reduced-motion:reduce){ .cc-fleet-ask{ transition:none; } .cc-fleet-ask:hover{ transform:none; } }

/* ── Modeled production target card (expected vs actual) ─────────────────────
   Lives between the commander card and the attention queue. Calm by default;
   amber accent only when a sustained fleet-wide shortfall trips. */
#fleetTarget:empty{ display:none; }
.ft-card{ margin:14px 0 4px; padding:15px 17px; border-radius:14px;
  background:var(--card,#fff); border:1px solid var(--line,#e2e8f0); }
.ft-card.warn{ border-color:rgba(245,158,11,.5); box-shadow:0 0 0 1px rgba(245,158,11,.18); }
.ft-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.ft-title{ font-size:13px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--faint); }
.ft-pct{ display:flex; align-items:baseline; gap:6px; }
.ft-pct b{ font-size:26px; font-weight:780; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1; }
.ft-pct b span{ font-size:15px; font-weight:680; color:var(--muted); }
.ft-pct small{ font-size:11px; color:var(--faint); }
.ft-track{ position:relative; height:10px; margin:12px 0 11px; border-radius:6px;
  background:rgba(148,163,184,.18); overflow:hidden; }
.ft-fill{ position:absolute; left:0; top:0; bottom:0; border-radius:6px;
  background:var(--good2,#2563eb); transition:width .5s cubic-bezier(.4,0,.2,1); }
.ft-fill.ok{ background:var(--good2,#2563eb); }
.ft-fill.soft{ background:#7c8aa0; }
.ft-fill.warn{ background:#f59e0b; }
.ft-mark{ position:absolute; top:-2px; bottom:-2px; width:2px; transform:translateX(-1px);
  background:var(--ink,#0f172a); opacity:.55; border-radius:2px; }
.ft-row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.ft-verdict{ font-size:13.5px; font-weight:680; color:var(--ink); }
.ft-verdict.warn{ color:#b45309; }
.ft-verdict.ok{ color:var(--good,#137a4a); }
.ft-nums{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.ft-note{ font-size:11.5px; color:var(--faint); line-height:1.5; margin-top:9px; }
.ft-note b{ color:var(--muted); font-weight:650; }
.ft-cov{ display:block; margin-top:3px; opacity:.85; }
/* ── weather-aware predicted-vs-actual additions ── */
.fc-badge{ display:inline-block; margin-left:7px; padding:2px 7px; border-radius:999px;
  font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--good2,#2563eb); background:rgba(37,99,235,.10); vertical-align:middle; }
.fc-spot{ margin:2px 0 9px; padding:8px 11px; border-radius:10px; font-size:12px; line-height:1.5;
  color:var(--muted); background:rgba(245,200,66,.10); border:1px solid rgba(234,179,8,.22); }
.fc-spot-ic{ margin-right:4px; }
.fc-spot b{ color:var(--ink); font-weight:700; font-variant-numeric:tabular-nums; }
.fc-spot b.good{ color:var(--good,#137a4a); } .fc-spot b.bad{ color:#b45309; }
.fc-toggle{ display:inline; margin-left:6px; padding:0; border:0; background:none; cursor:pointer;
  font:inherit; font-size:11.5px; font-weight:650; color:var(--good2,#2563eb); text-decoration:underline;
  text-underline-offset:2px; }
.fc-toggle:hover{ opacity:.8; }
.fc-how{ margin-top:11px; padding-top:11px; border-top:1px dashed var(--line,#e2e8f0); }
.fc-how-eq{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:var(--muted);
  background:var(--card2,#f8fafc); border:1px solid var(--line,#e2e8f0); border-radius:8px;
  padding:8px 10px; margin-bottom:11px; line-height:1.5; overflow-x:auto; }
.fc-how-dl{ display:grid; grid-template-columns:auto 1fr; gap:5px 14px; margin:0; }
.fc-how-dl dt{ font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--faint); white-space:nowrap; padding-top:1px; }
.fc-how-dl dd{ margin:0; font-size:12px; line-height:1.55; color:var(--muted); }
.fc-how-dl dd b{ color:var(--ink); font-weight:680; }
.fc-how-dl dd em{ font-style:italic; color:var(--faint); }
.fc-how-foot{ margin-top:11px; font-size:11.5px; line-height:1.55; color:var(--faint); }
.fc-how-foot b{ color:var(--muted); font-weight:650; }
@media(max-width:560px){ .fc-how-dl{ grid-template-columns:1fr; gap:2px 0; }
  .fc-how-dl dt{ margin-top:7px; } }
/* The triage queue + commander card were authored for the dark marketing surface; on the
   day-themed dashboard, repaint their translucent-white chrome with theme tokens so it reads. */
#panelDashboard .cc-tablewrap{ background:var(--card,#fff); border-color:var(--line); }
#panelDashboard .cc-table tbody tr.row{ border-bottom:1px solid var(--line); }
#panelDashboard .cc-table tbody tr.row:hover{ background:var(--day-hover,rgba(15,23,42,.04)); }
#panelDashboard .cc-table tbody tr.row.sel{ background:rgba(37,99,235,.07); }
#panelDashboard .cc-table tbody tr.cc-drawer .inner{ background:var(--card2,#f8fafc); border-radius:12px; }
#panelDashboard .cc-foot{ color:var(--faint); }
#panelDashboard .cc-search input{ background:var(--card,#fff); border:1px solid var(--line); color:var(--ink); }

.rb-draft{ border:1.5px solid var(--line); border-radius:16px; padding:16px 18px; margin-top:12px;
  background:var(--card,#fff);
  box-shadow:0 4px 14px -3px rgba(15,23,42,.10),0 2px 4px -1px rgba(15,23,42,.05); }
/* avatar + eyebrow header, like the NEPOOL client card */
.rb-draft-top{ display:flex; align-items:center; gap:11px; margin-bottom:12px; }
.rb-draft-avatar{ display:grid; place-items:center; width:36px; height:36px; flex:none;
  border-radius:50%; background:rgba(37,99,235,.10); color:var(--good,#2563eb);
  font:800 12.5px/1 inherit; letter-spacing:.02em; }
.rb-draft-hd{ min-width:0; flex:1; }
.rb-draft-eyebrow{ display:block; font:700 9.5px/1 inherit; letter-spacing:.11em;
  text-transform:uppercase; color:var(--good,#2563eb); opacity:.82; margin-bottom:3px; }
.rb-draft-name{ font-size:15.5px; font-weight:740; color:var(--ink); line-height:1.2; }
.rb-draft-period{ font-size:11.5px; color:var(--faint); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rb-draft-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:13px 0; }
.rb-draft-grid > div{ background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:10px; padding:9px 11px; display:flex; flex-direction:column; gap:3px; }
.rb-draft-grid .rb-k{ font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); font-weight:650; }
.rb-draft-grid .rb-v{ font-size:16px; font-weight:740; color:var(--ink); font-variant-numeric:tabular-nums; }
.rb-draft-grid .rb-amt{ color:var(--good2,#3fd68a); }

.rb-draft-gmp{ margin:6px 0 12px; }
.rb-gmp-ok{ font-size:12.5px; color:var(--good2,#3fd68a); font-weight:600; }
.rb-gmp-attach{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); cursor:pointer; border:1px dashed var(--line); border-radius:9px; padding:7px 12px; transition:border-color .15s, color .15s; }
.rb-gmp-attach:hover{ border-color:var(--good,#3fd68a); color:var(--ink); }

.rb-draft-acts{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; width:100%; }
.rb-draft-acts > .rb-btn{ flex:1 1 0; min-width:0; justify-content:center; }
/* attachment-controls box, dropped to its own full-width line below the send buttons
   (auto-attach GMP + opt-in AO summary). */
.rb-draft-attach{ flex-basis:100%; margin-left:0; display:flex; flex-direction:column; gap:7px; align-items:flex-start;
  padding:9px 13px; border:1px solid var(--line,#e2e8f0); border-radius:10px; background:rgba(148,163,184,.06); }
.rb-draft-attach .rb-gmp-auto-status{ font-size:11.5px; }
.rb-draft-note{ font-size:12px; color:var(--faint); margin:11px 0 0; line-height:1.5; }

@media (max-width:640px){
  .rb-draft-grid{ grid-template-columns:repeat(2,1fr); }
}



/* V2 offtaker pay-links — Connect nudge on Reports
   Brand via var(--good): sky/day → blue primary; dark theme keeps its green.
   Hardcoded emerald (#047857 / #059669) was off-brand under the sky theme. */
.rb-pay-banner{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 14px; padding:12px 14px;
  border-radius:12px;
  background:linear-gradient(165deg, color-mix(in srgb, var(--good,#2196F3) 12%, #fff), color-mix(in srgb, var(--good,#2196F3) 4%, #fff));
  border:1px solid color-mix(in srgb, var(--good,#2196F3) 28%, transparent);
  color:var(--ink,#0f172a); font-size:13.5px; line-height:1.4;
}
.rb-pay-banner[hidden]{ display:none !important; }
.rb-pay-banner-ic{ font-size:18px; flex:0 0 auto; }
.rb-pay-banner-tx{ flex:1 1 200px; min-width:0; }
.rb-pay-banner-tx b{ color:var(--good,#1976D2); }
.rb-pay-banner-cta{
  flex:0 0 auto; font-weight:700; font-size:13px; text-decoration:none;
  color:#fff;
  background:linear-gradient(180deg, color-mix(in srgb, #fff 18%, var(--good,#2196F3)), var(--good,#2196F3));
  padding:8px 14px; border-radius:10px;
  box-shadow:0 6px 16px -6px color-mix(in srgb, var(--good,#2196F3) 55%, transparent);
  transition:transform .14s ease, filter .14s ease, box-shadow .14s ease;
}
.rb-pay-banner-cta:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
  box-shadow:0 9px 22px -7px color-mix(in srgb, var(--good,#2196F3) 60%, transparent);
}

/* V2 hand-holding online-pay setup card (Master Account) */
.acct-pay-setup{ display:block; padding:0; border:0; background:transparent; }
.acct-pay-setup .r-k, .acct-pay-setup .r-a{ display:none; }
.ao-pay-card{ width:100%; }
.ao-pay-card-load{ padding:18px 16px; color:var(--faint,#64748b); font-size:13.5px; }
.ao-pay-inner{
  border-radius:14px; padding:16px 18px 14px;
  border:1px solid color-mix(in srgb, var(--good,#2196F3) 28%, transparent);
  background:linear-gradient(165deg, color-mix(in srgb, var(--good,#2196F3) 12%, #fff), rgba(255,255,255,.55));
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset;
}
.ao-pay-inner.is-ready{
  border-color:color-mix(in srgb, var(--good,#2196F3) 40%, transparent);
  background:linear-gradient(165deg, color-mix(in srgb, var(--good,#2196F3) 18%, #fff), rgba(255,255,255,.6));
}
.ao-pay-inner.is-almost{
  border-color:rgba(217,119,6,.3);
  background:linear-gradient(165deg, rgba(251,191,36,.14), rgba(255,255,255,.55));
}
.ao-pay-inner.is-err{
  border-color:rgba(185,28,28,.25);
  background:linear-gradient(165deg, rgba(254,226,226,.5), rgba(255,255,255,.55));
}
.ao-pay-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:8px; }
.ao-pay-badge{
  flex:0 0 auto; font-size:10px; font-weight:800; letter-spacing:.06em;
  padding:4px 8px; border-radius:999px; background:var(--good,#2196F3); color:#fff;
}
.ao-pay-inner.is-off .ao-pay-badge{ background:#64748b; }
.ao-pay-inner.is-almost .ao-pay-badge{ background:#d97706; }
.ao-pay-inner.is-err .ao-pay-badge{ background:#b91c1c; }
.ao-pay-k{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--faint,#64748b); }
.ao-pay-title{ font-size:16px; font-weight:800; color:var(--ink,#0f172a); line-height:1.25; margin-top:2px; }
.ao-pay-body{ font-size:13.5px; line-height:1.45; color:var(--ink,#0f172a); opacity:.9; margin:0 0 12px; }
.ao-pay-body b{ color:var(--good,#1976D2); }
.ao-pay-steps{
  list-style:none; margin:0 0 14px; padding:0; display:grid; gap:8px;
}
.ao-pay-steps li{ display:flex; gap:10px; align-items:flex-start; }
.ao-pay-step-n{
  flex:0 0 22px; height:22px; border-radius:50%;
  background:var(--good,#2196F3); color:#fff; font-size:11px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.ao-pay-inner.is-almost .ao-pay-step-n{ background:#d97706; }
.ao-pay-step-t{ display:flex; flex-direction:column; gap:1px; font-size:13px; }
.ao-pay-step-t b{ color:var(--ink,#0f172a); }
.ao-pay-step-t small{ color:var(--faint,#64748b); font-size:12px; }
.ao-pay-foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:12px;
}
.ao-pay-cta{ min-width:200px; }
.ao-pay-fee{ font-size:12px; color:var(--faint,#64748b); }
.ao-pay-inner .acct-msg{ margin-top:10px; }

/* ── Energy Agent / hands-off rail open ───────────────────────────────────
   Densify so the FULL table still fits in the remaining width — no horizontal
   scroll. Column order MUST match the base grid:
   Vendor | Name | Output | Units | Live kW | Today | 14-day | Status | Synced

   Important: media queries use *viewport* width, but the EA rail steals ~388px of
   content. So viewport-based "drop spark under 1280" never fires on a 1440 laptop
   with the rail open — Synced was minmax(0,…) and got clipped to "…" / "ago".
   Always densify on shell-open; give Synced a hard min-width. */
body.ea-shell-open #sheetWrap,
body.ho-shell-open #sheetWrap{
  max-width:none;
  width:100%;
  min-width:0;
  padding:8px 6px 28px;
  overflow-x:hidden;
  overflow-y:visible;
  box-sizing:border-box;
}
body.ea-shell-open .vs-topbar,
body.ho-shell-open .vs-topbar{
  margin-bottom:6px;
}
body.ea-shell-open .vs-hint,
body.ho-shell-open .vs-hint{
  display:none; /* reclaim vertical room when rail is open */
}
body.ea-shell-open .vs-scroll,
body.ho-shell-open .vs-scroll{
  overflow-x:hidden;
  overflow-y:auto;
  width:100%;
  max-width:100%;
  min-width:0;
}
/* KEEP the 14-day graph when the rail is open (Ford 2026-07-16). This used to
   `display:none` the spark column + every per-inverter rowspark "to free ~80px",
   which also killed the graphs on expanded inverters and left the freed space
   inflating the other tracks into dead columns. The dock is a floating card now
   and the content column only loses ~200px, so the graphs fit — they're the point
   of this view. Narrower tiers below drop the gauge/units first instead. */
body.ea-shell-open .vs-row,
body.ho-shell-open .vs-row{
  /* Metric columns are sized to their CONTENT and Name (the only variable-length
     cell) absorbs all the slack. The old `fr` share on every column is what made
     the dead space: each metric track grew far wider than the "—" / "OK" /
     "synced 2m" / 104px graph inside it. */
  grid-template-columns:
    72px                  /* vendor */
    minmax(0,1fr)         /* name — takes the slack */
    40px                  /* gauge */
    44px                  /* units */
    64px                  /* live kW */
    66px                  /* today */
    108px                 /* spark — fits the 14-day graph exactly */
    88px                  /* status */
    94px;                 /* synced — "synced 12m" / "25d ago" never clips */
  width:100%;
  min-width:0;
  gap:4px;
  padding:7px 6px;
  box-sizing:border-box;
}
/* Synced / Details: never ellipsize into "ago" alone — hard min + no overflow hide */
body.ea-shell-open .vs-c-fresh,
body.ho-shell-open .vs-c-fresh{
  min-width:92px;
  max-width:100%;
  overflow:visible;
  text-overflow:clip;
  white-space:nowrap;
  font-size:11px;
  font-variant-numeric:tabular-nums;
}
body.ea-shell-open .vs-colhead .vs-c-fresh,
body.ho-shell-open .vs-colhead .vs-c-fresh{
  overflow:hidden; /* header label "Synced" is short */
}
/* Expand-all stays a REAL, labelled button with the rail open (Ford 2026-07-16:
   "the expand button is now just this little arrow instead of a nice expand
   button"). It was font-size:0 + a ::before "↕" glyph; the Name track has ample
   room now that the spark keeps its own column, so the label fits. */
body.ea-shell-open .vs-expandall,
body.ho-shell-open .vs-expandall{
  font-size:9.5px;
  letter-spacing:.03em;
  padding:3px 8px;
  width:auto;
  flex-shrink:0;
  white-space:nowrap;
}
body.ea-shell-open .vs-namehead,
body.ho-shell-open .vs-namehead{
  gap:4px;
  min-width:0;
}
/* Compact "Open vendor to sync" chip — full label was eating the Name track */
body.ea-shell-open .vs-vlag,
body.ho-shell-open .vs-vlag{
  font-size:0;
  letter-spacing:0;
  padding:2px 7px;
  gap:0;
  max-width:4.5rem;
}
body.ea-shell-open .vs-vlag::before,
body.ho-shell-open .vs-vlag::before{
  content:"↗ sync";
  font-size:10px;
  font-weight:700;
  letter-spacing:.02em;
}
body.ea-shell-open .vs-vlag .vs-vlag-ic,
body.ea-shell-open .vs-vlag .vs-vlag-sub,
body.ho-shell-open .vs-vlag .vs-vlag-ic,
body.ho-shell-open .vs-vlag .vs-vlag-sub{
  display:none;
}
body.ea-shell-open .vs-gauge,
body.ea-shell-open .vs-gauge svg,
body.ea-shell-open .vs-gauge-empty,
body.ho-shell-open .vs-gauge,
body.ho-shell-open .vs-gauge svg,
body.ho-shell-open .vs-gauge-empty{
  width:40px;
  height:21px;
}
body.ea-shell-open .vs-c-pow,
body.ea-shell-open .vs-c-today,
body.ho-shell-open .vs-c-pow,
body.ho-shell-open .vs-c-today{
  white-space:nowrap !important;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
  font-size:12px;
}
body.ea-shell-open .vs-colhead,
body.ho-shell-open .vs-colhead{
  font-size:9px;
  letter-spacing:.04em;
  gap:4px;
  padding:6px;
}
body.ea-shell-open .vs-colhead .vs-c-pow,
body.ea-shell-open .vs-colhead .vs-c-today,
body.ea-shell-open .vs-colhead .vs-c-spark,
body.ho-shell-open .vs-colhead .vs-c-pow,
body.ho-shell-open .vs-colhead .vs-c-today,
body.ho-shell-open .vs-colhead .vs-c-spark{
  white-space:nowrap;
  line-height:1.15;
  font-size:8.5px;
  letter-spacing:.02em;
}
body.ea-shell-open .vs-pill,
body.ho-shell-open .vs-pill{
  font-size:10px;
  padding:3px 6px;
  max-width:100%;
}
body.ea-shell-open .vs-c-status,
body.ho-shell-open .vs-c-status{
  min-width:0;
}
body.ea-shell-open .vs-inv-details,
body.ho-shell-open .vs-inv-details{
  font-size:10.5px;
  padding:2px 5px;
  white-space:nowrap;
}
body.ea-shell-open .vs-inv-sub,
body.ho-shell-open .vs-inv-sub{
  font-size:10px;
}
/* Tighter desktops + rail: drop the Output gauge first (least informative — it's
   blank at night anyway), but KEEP the 14-day graph. */
@media(max-width:1360px){
  body.ea-shell-open .vs-c-gauge,
  body.ea-shell-open .vs-colhead .vs-c-gauge,
  body.ho-shell-open .vs-c-gauge,
  body.ho-shell-open .vs-colhead .vs-c-gauge{
    display:none !important;
  }
  body.ea-shell-open .vs-row,
  body.ho-shell-open .vs-row{
    grid-template-columns:
      68px                  /* vendor */
      minmax(0,1fr)         /* name — takes the slack */
      0px                   /* gauge hidden */
      42px                  /* units */
      62px                  /* live kW */
      64px                  /* today */
      104px                 /* spark — kept */
      86px                  /* status */
      92px;                 /* synced */
  }
}
/* Very tight remaining content (≈ laptop + rail): drop Units too — the 14-day
   graph still survives, it's the reason to be on this screen. */
@media(max-width:1150px){
  body.ea-shell-open .vs-c-inv,
  body.ea-shell-open .vs-colhead .vs-c-inv,
  body.ho-shell-open .vs-c-inv,
  body.ho-shell-open .vs-colhead .vs-c-inv{
    display:none !important;
  }
  body.ea-shell-open .vs-row,
  body.ho-shell-open .vs-row{
    grid-template-columns:
      64px                  /* vendor */
      minmax(0,1fr)         /* name — takes the slack */
      0px                   /* gauge hidden */
      0px                   /* units hidden */
      60px                  /* live kW */
      62px                  /* today */
      96px                  /* spark — kept */
      82px                  /* status */
      90px;                 /* synced */
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INVOICES LANDING 2026-07-28 — Data source → Array → Offtaker + THE RAIL
   (Ford-approved sketch: sketches/invoices-landing-redesign). The send-pipeline
   band is gone; its facts live in a sticky right rail that MINIMIZES to an icon
   strip while an offtaker editor is open. Day palette here; sky skin follows in
   theme-sky-reports.css. Editor-level styles untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
.rb2-main{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
.rb2-main.rb2-editing{grid-template-columns:minmax(0,1fr) 56px}
.rb2-listcol{min-width:0;display:flex;flex-direction:column;gap:14px}
.rb2-railslot{position:sticky;top:8px;display:flex;flex-direction:column;gap:12px;min-width:0}
.rb2-railfull{display:flex;flex-direction:column;gap:12px}

/* cycle card — the pipeline's surviving essentials */
.rb2-railcycle{border:1px solid var(--so-cream-bd);border-radius:14px;
  background:var(--so-cream);box-shadow:var(--so-shadow-card);padding:15px 17px}
.rb2-rc-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rb2-rc-eyebrow{font:700 10.5px/1 inherit;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint,#94a3b8)}
.rb2-rc-big{margin-top:8px;font-size:22px;font-weight:800;letter-spacing:-.02em;
  color:var(--ink,#0f172a);font-variant-numeric:tabular-nums}
.rb2-rc-big span{font-size:13px;font-weight:650;color:var(--muted,#475569);letter-spacing:0}
.rb2-rc-cap{margin-top:2px;font-size:11.5px;color:var(--faint,#94a3b8);
  font-variant-numeric:tabular-nums}
.rb2-rc-review{width:100%;margin-top:12px;justify-content:center;padding:9px 14px;font-size:13px}
.rb2-rc-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.rb2-rc-rows{display:flex;flex-direction:column;gap:7px;margin-top:13px;padding-top:11px;
  border-top:1px solid var(--so-cream-bd)}
.rb2-rc-row{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted,#475569);
  flex-wrap:wrap;font-variant-numeric:tabular-nums;border-radius:8px}
.rb2-rc-row[role="button"]{cursor:pointer;margin:0 -6px;padding:3px 6px}
.rb2-rc-row[role="button"]:hover{background:var(--day-hover,rgba(140,78,28,.06))}
.rb2-rc-row b{color:var(--ink,#0f172a);font-weight:700}
.rb2-rc-check{color:#059669;font-weight:800}
.rb2-rc-dot{width:7px;height:7px;border-radius:999px;background:#94a3b8;flex:none}
.rb2-rc-quiet{font-size:10.5px;color:var(--faint,#94a3b8)}
.rb2-railcycle .rb2-moderow{margin-top:13px;padding-top:11px;border-top:1px solid var(--so-cream-bd);
  display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.rb2-railcycle .rb2-modelab{font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint,#94a3b8)}

/* tools card — every portfolio action, one quiet vertical list */
.rb2-railtools{border:1px solid var(--so-cream-bd);border-radius:14px;
  background:var(--so-cream);box-shadow:var(--so-shadow-card);
  padding:7px;display:flex;flex-direction:column;gap:2px}
.rb2-railtools > .rb-btn, .rb2-railtools .rb2-exportwrap > .rb-btn{
  width:100%;justify-content:flex-start;text-align:left;
  padding:9px 12px;font-size:12px;font-weight:640;border:0;background:transparent;
  border-radius:9px;box-shadow:none}
.rb2-railtools > .rb-btn:hover, .rb2-railtools .rb2-exportwrap > .rb-btn:hover{
  background:var(--day-hover,rgba(140,78,28,.06))}
.rb2-railtools .rb2-railadd{color:#047857;font-weight:750}
.rb2-railtools .rb2-exportwrap{position:relative;width:100%}
.rb2-railtools .rb2-exportpop{left:auto;right:0}

/* the minimized strip (editing state) */
.rb2-railmini{border:1px solid var(--so-cream-bd);border-radius:14px;
  background:var(--so-cream);box-shadow:var(--so-shadow-card);
  padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:6px}
.rb2-rm{width:38px;height:38px;display:grid;place-items:center;cursor:pointer;
  border:1px solid transparent;border-radius:10px;background:transparent;
  color:var(--muted,#475569);font-size:15px;font-weight:650}
.rb2-rm:hover{background:var(--day-hover,rgba(140,78,28,.06));color:var(--ink,#0f172a)}
.rb2-rm-badge{border-radius:999px;background:rgba(245,158,11,.14);color:#92600a;
  font-weight:750;font-size:13px;font-variant-numeric:tabular-nums}
.rb2-rm-badge:hover{background:rgba(245,158,11,.22);color:#92600a}

/* master-rate CHIP in the Your offtakers bar (popover editor, same ids) */
.rb2-ratechip{position:relative}
.rb2-ratechip-sum{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:640;color:var(--muted,#475569);
  background:var(--card2,#fff);border:1px solid var(--line,#e8e2d9);border-radius:999px;
  padding:5px 11px;white-space:nowrap;font-variant-numeric:tabular-nums}
.rb2-ratechip-sum::-webkit-details-marker{display:none}
.rb2-ratechip-sum:hover{border-color:#94a3b8;color:var(--ink,#0f172a)}
.rb2-ratechip-sum b{color:var(--ink,#0f172a);font-weight:750}
.rb2-ratechip-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:40;
  width:480px;max-width:calc(100vw - 32px);
  background:var(--card,#fff);border:1px solid var(--line,#e2e8f0);border-radius:14px;
  box-shadow:0 18px 50px -12px rgba(15,23,42,.18);padding:14px 16px}

/* tether chip on every array row */
.rb-grp-tether{display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  font-size:10.5px;font-weight:700;white-space:nowrap;
  color:#1565C0;background:rgba(37,99,235,.08);
  border:1px solid rgba(37,99,235,.26);border-radius:999px;padding:4px 10px}
.rb-grp-tether:hover{background:rgba(37,99,235,.14)}
.rb-grp-tether--none{color:#1565C0;background:var(--card2,#fff);
  border:1px dashed rgba(37,99,235,.55)}
.rb2-srcline{font-size:10.5px;color:var(--faint,#94a3b8);font-variant-numeric:tabular-nums}
.rb2-srcline--warn{color:#92600a}
.rb-prov--none .rb-prov-head{opacity:.92}

/* stacked layout — tablets and phones: rail becomes a full-width card ABOVE
   the list; the mini strip never shows (no room economy to win on one column) */
@media (max-width:1000px){
  .rb2-main{display:flex;flex-direction:column}
  .rb2-main.rb2-editing{display:flex}
  .rb2-railslot{position:static;order:-1}
  .rb2-railmini{display:none!important}
  .rb2-railfull[hidden]{display:flex} /* editing keeps the rail visible when stacked */
  .rb2-ratechip-pop{width:min(480px,calc(100vw - 32px))}
}

/* [hidden] must beat the base display rules above (the rail swaps full/mini
   via the hidden attribute; without these the two would render together) */
.rb2-railfull[hidden]{display:none}
.rb2-railmini[hidden]{display:none}
.rb2-rm[hidden]{display:none}
.rb2-railcycle[hidden]{display:none}
@media (max-width:1000px){
  /* stacked layout: the full rail stays visible even while editing */
  .rb2-railfull[hidden]{display:flex}
}

/* ── landing2 follow-ups (Ford 2026-07-28 screenshot review) ─────────────────
   1 · mode slider must stay in its lane inside the 300px rail card */
.rb2-railcycle{overflow:hidden}
.rb2-railcycle .rb2-moderow{width:100%;min-width:0;box-sizing:border-box}
.rb2-railcycle .rb-seg.rb2-modeslider{display:flex;width:100%;box-sizing:border-box}
.rb2-railcycle .rb2-modeslider button{flex:1 1 0;min-width:0;padding:7px 6px;
  font-size:11px;line-height:1.25;white-space:normal;text-align:center}
/* 2 · master rate is a rail TOOL row now (moved off the Your-offtakers bar) */
.rb2-railtools .rb2-ratechip{width:100%}
.rb2-railtools .rb2-ratechip-sum{display:flex;width:100%;align-items:center;gap:5px;
  background:transparent;border:0;border-radius:9px;box-shadow:none;
  padding:9px 12px;font-size:12px;font-weight:640;color:var(--muted,#475569);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rb2-railtools .rb2-ratechip-sum:hover{background:var(--day-hover,rgba(140,78,28,.06));
  border:0;color:var(--ink,#0f172a)}
.rb2-railtools .rb2-ratechip-pop{top:auto;bottom:calc(100% + 8px)}
/* 3 · re-minimize control — visible only while a card is open AND the full
   rail was brought back with « */
.rb2-railhide{display:none;align-self:flex-end;appearance:none;cursor:pointer;
  border:0;background:transparent;border-radius:8px;padding:4px 9px;
  font-size:10.5px;font-weight:650;color:var(--faint,#94a3b8);margin-bottom:-6px}
.rb2-railhide:hover{background:var(--day-hover,rgba(140,78,28,.06));color:var(--ink,#0f172a)}
#rb2Main.rb2-hasopen .rb2-railfull:not([hidden]) .rb2-railhide{display:inline-flex}

/* ── landing3: the rail tools card, rebalanced (Ford 2026-07-28: "more texture
   and space and color in between the buttons"). Rows = tinted icon chip +
   label; hairlines split grow-the-book / send-and-connect / settings. ────── */
.rb2-railtools{padding:9px;gap:3px}
.rb2-railtools .rb-btn.rb2-tool,
.rb2-railtools .rb2-ratechip-sum.rb2-tool{
  display:flex;align-items:center;gap:11px;width:100%;box-sizing:border-box;
  padding:8px 9px;font-size:12px;font-weight:650;color:var(--muted,#475569);
  border:0;background:transparent;border-radius:11px;box-shadow:none;
  text-align:left;white-space:nowrap;cursor:pointer}
.rb2-railtools .rb-btn.rb2-tool:hover,
.rb2-railtools .rb2-ratechip-sum.rb2-tool:hover{
  background:var(--day-hover,rgba(140,78,28,.06));color:var(--ink,#0f172a);
  border:0;box-shadow:none}
.rb2-tl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.rb2-ti{width:27px;height:27px;flex:none;display:grid;place-items:center;
  border-radius:9px;font-size:13px;line-height:1;font-weight:700}
.rb2-ti--add{background:var(--good,#2563eb);color:#fff;font-size:15px}
.rb2-ti--bulk{background:rgba(8,145,178,.13);color:#0e7490}
.rb2-ti--export{background:rgba(13,148,136,.13);color:#0f766e}
.rb2-ti--email{background:rgba(79,70,229,.11);color:#4f46e5}
.rb2-ti--link{background:rgba(5,150,105,.12);color:#047857}
.rb2-ti--rate{background:rgba(71,85,105,.12);color:#475569;font-weight:800}
.rb2-tv{flex:none;font-size:11px;color:var(--muted,#475569);
  background:rgba(71,85,105,.08);border-radius:999px;padding:3px 10px;
  font-variant-numeric:tabular-nums}
.rb2-tv b{font-weight:700;color:var(--ink,#0f172a)}
.rb2-toolsep{height:1px;background:var(--line,#e8e2d9);margin:5px 9px;flex:none}
/* the rail's rate row must not inherit the old global-rate CARD shell */
.rb2-railtools .rb2-ratechip.rb-globalrate{padding:0;margin:0;border:0;
  background:transparent;box-shadow:none;border-radius:11px;width:100%}
/* landing4: Master email + Master rate are a matched pair — same indigo
   family, same anatomy, identical label ink and row height */
.rb2-ti--rate{background:rgba(79,70,229,.11);color:#4f46e5}
.rb2-railtools .rb-btn.rb2-tool,
.rb2-railtools .rb2-ratechip-sum.rb2-tool{min-height:45px;
  color:var(--muted,#475569);font-weight:650}
/* all six tool labels share one ink (the rate summary isn't an .ao-btn, so
   without this it rendered a step lighter than its five button siblings) */
.rb2-railtools .rb2-tool .rb2-tl{color:var(--ink,#0f172a)}

/* ── landing5: while editing, the editor takes the WHOLE sheet width and the
   mini strip floats OUT into the page margin (Ford 2026-07-28: no cutoff
   dead-space column). Fixed to the viewport edge, so it also survives scroll
   as the always-reachable restore control. */
#rb2Main.rb2-editing{grid-template-columns:minmax(0,1fr)}
#rb2Main.rb2-editing .rb2-railslot{position:static}
#rb2Main.rb2-editing .rb2-railmini{position:fixed;right:8px;top:clamp(120px,24vh,230px);
  z-index:60;box-shadow:0 10px 34px -8px rgba(15,23,42,.28)}
/* landing5b: the master pair's chips are BOTH solid indigo squircles with
   white glyphs (Ford: "make master rate look the same as master email" —
   the ✉ was rendering solid via the color-emoji font while $ stayed thin
   text; solid + text-presentation makes the pair deterministic). */
.rb2-railtools .rb2-ti--email,
.rb2-railtools .rb2-ti--rate{background:#6366f1;color:#fff;font-weight:800}

/* ── landing6 ────────────────────────────────────────────────────────────────
   1 · The rate row wears the SAME white pill as its five .rb-btn siblings
   (the theme buttons get a white pill from the button system; the summary
   isn't a .rb-btn, so it alone rendered flat — Ford's screenshot). */
.rb2-railtools .rb2-ratechip-sum.rb2-tool{
  background:#fff!important;border:1px solid var(--line,#e8e2d9)!important;
  border-radius:999px!important;
  box-shadow:0 2px 10px rgba(20,60,120,.07)}
.rb2-railtools .rb2-ratechip-sum.rb2-tool:hover{background:#fff!important}
/* archive chips (rail entry rows) */
.rb2-ti--arch{background:rgba(180,83,9,.12);color:#92600a}
.rb2-ti--billarch{background:rgba(100,116,139,.13);color:#475569}

/* ── landing7: chip makeover — ONE treatment for all eight (Ford: "some are
   just gray or a really light shade... common theme"). Every chip is a solid
   colored squircle with a white glyph. */
.rb2-ti--bulk{background:#0891b2;color:#fff}
.rb2-ti--export{background:#0d9488;color:#fff}
.rb2-ti--link{background:#059669;color:#fff}
.rb2-ti--arch{background:#d97706;color:#fff}
.rb2-ti--billarch{background:#64748b;color:#fff}