/* ═══════════════════════════════════════════════════════════════
   dat-search-panel.css — DAT Search Loads tab (DAT-SEARCH-TAB-V1,
   2026-07-26). DAT Power 2 structure (dat-classic-spec §3), EMR
   tokens — dark AND light hold; zero hardcoded palette beyond the
   shared status hues. Every selector scoped under .ds-host.
   ═══════════════════════════════════════════════════════════════ */
.ds-host {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  background: var(--emr-bg);
  color: var(--emr-text);
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
}
.ds-host .ds-empty { padding: 40px; text-align: center; color: var(--emr-text-subtle); font-size: 13px; }
.ds-host .ds-empty-cell { padding: 28px; text-align: center; color: var(--emr-text-faint); }

/* ── Toolbar ── */
.ds-host .ds-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: var(--emr-bg-muted);
  border-bottom: 1px solid var(--emr-border-strong); flex-shrink: 0;
}
.ds-host .ds-toolbar-spacer { flex: 1; }
.ds-host .ds-banner {
  display: none; font-size: 11px; font-weight: 600; color: var(--emr-gold);
  background: rgba(255,183,10,.12); border: 1px solid rgba(255,183,10,.4);
  border-radius: 4px; padding: 3px 10px;
}
.ds-host .ds-banner.show { display: inline-block; }
.ds-host .ds-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--emr-bg); color: var(--emr-text);
  border: 1px solid var(--emr-border-strong);
  padding: 6px 12px; font-size: 11.5px; font-weight: 600;
  border-radius: 4px; cursor: pointer; font-family: inherit;
}
.ds-host .ds-btn:hover { background: var(--emr-bg-subtle); }
.ds-host .ds-btn.primary { background: var(--emr-gold); color: var(--accent-fg, #1a1a1a); border-color: var(--emr-gold); } /* dark-ok: text on solid gold */
.ds-host .ds-btn.xs { padding: 1px 6px; font-size: 10px; }
.ds-host .ds-btn.danger { color: var(--emr-status-red); }

/* ── Inline New Load Search band (DAT §3.2, charcoal-token) ── */
.ds-host .ds-band {
  display: none; align-items: flex-end; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; background: var(--emr-bg-subtle);
  border-bottom: 2px solid var(--emr-border-strong); flex-shrink: 0;
}
.ds-host .ds-band.show { display: flex; }
.ds-host .ds-field { display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
.ds-host .ds-field.ds-sm { min-width: 58px; max-width: 76px; }
/* OFFICE-SCOPE-V1 (2026-08-19): Mine|Office|All postings visibility.
   THEME (operator: "in white mode filter origin/dispatcher needs to be
   white too") — everything here rides the app-wide --emr-* tokens, the
   same vocabulary .ds-field inputs use, so light mode paints light. */
.ds-host .ds-scope-seg { display: inline-flex; border: 1px solid var(--emr-border-strong); border-radius: 6px; overflow: hidden; }
.ds-host .ds-scope-seg button { background: var(--emr-bg); border: 0; color: var(--emr-text-dim, var(--emr-text)); padding: 5px 11px; font-size: 11px; font-weight: 700; cursor: pointer; letter-spacing: .3px; }
.ds-host .ds-scope-seg button + button { border-left: 1px solid var(--emr-border-strong); }
.ds-host .ds-scope-seg button.active { background: rgba(255, 183, 10, .14); color: var(--gold, #F5A800); }
.ds-host .ds-post-filter { width: 190px; padding: 5px 9px; border: 1px solid var(--emr-border-strong); border-radius: 6px; background: var(--emr-bg); color: var(--emr-text); font-size: 11px; }
.ds-host .ds-post-filter::placeholder { color: var(--emr-text-dim, var(--emr-text)); opacity: .7; }
/* ~10 rows visible, then scroll (operator: "max can be seen is 10 then user can scroll"). */
.ds-host .ds-strip-wrap.ds-strip-capped { max-height: 318px; overflow-y: auto; }
.ds-host .ds-strip-wrap.ds-strip-capped thead th { position: sticky; top: 0; z-index: 2; }
/* STRIP-DIVIDER (2026-08-19): draggable split between searches and results,
   the live-feed divider idiom. */
.ds-host .ds-strip-divider { height: 5px; flex-shrink: 0; cursor: row-resize; background: var(--emr-border-strong); position: relative; transition: background .12s ease; }
.ds-host .ds-strip-divider:hover, .ds-host .ds-strip-divider:active { background: var(--emr-gold); }
.ds-host .ds-strip-divider::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 38px; height: 2px; background: rgba(128,128,128,.5); border-radius: 2px; pointer-events: none; }
.ds-host .ds-disp-chip { display: inline-block; border: 1px solid; border-radius: 4px; padding: 0 5px; font-size: 10px; font-weight: 800; letter-spacing: .3px; vertical-align: middle; }
.ds-host tr.ds-foreign td { opacity: .92; }
.ds-host .ds-view-only { font-size: 12px; opacity: .7; cursor: default; }
.ds-host .ds-foreign-note { background: rgba(107, 114, 128, .12); border: 1px solid var(--emr-border-strong); border-radius: 6px; padding: 6px 10px; font-size: 11px; color: var(--emr-text); margin: 4px 0 8px; }

/* DETAIL-COLS-V1 (2026-08-19): quote LEFT · insight stack MIDDLE · inline
   emails RIGHT ("stack the est net lane corridor and deadhead vertical …
   show any email inside the remaining space on the right"). */
/* ══ DETAIL PANEL LAYOUT (operator spec 2026-08-21) ═══════════════════
   THREE SYMMETRIC ZONES: signals · email+compose · map. Equal tracks,
   one card chrome, equal heights — "symmetric, not scattered".

   SCROLLPORT PINNING — the structural fix behind "empty space all over
   the place": the detail row's <td colspan> is as wide as the whole
   horizontally scrolling results TABLE (1,845px on a 1,440px screen
   with the full column set), so the panel painted its content into
   off-screen table space and left the visible right half black. The
   inner block is pinned to the VISIBLE scrollport instead: sticky
   against .ds-grid-wrap's left edge, width 100cqw of the dsscroll
   container (= the scrollport's inline size, resolved from the nearest
   ANCESTOR container, not from dspanel below). The sticky thead already
   proves sticky works inside this scroller. Fallback where container
   units are unsupported: width:100% = the old table-wide behavior. */
.ds-host tr.ds-detail .ds-detail-inner {
  position: sticky; left: 0;
  width: 100%; width: 100cqw;
  box-sizing: border-box;
  padding: 16px;
  /* Operator 2026-08-22 "a lot of empty space on the right", probed at
     1920px: the zone row was 1264px inside an 1864px inner — a LEGACY
     detail-inner rule further down (an old inline meta-strip style:
     flex + align-items:center + wrap) still matched the rebuilt panel,
     so the zone row sized to CONTENT instead of stretching. The detail
     body is a normal block: every child (header band, comments, zones)
     spans the full inner width at any screen size. */
  display: block;
}
/* Panel height = content height (operator 2026-08-21: "the detail space
   needs to be responsive too, no scrolling inside it should be needed").
   The min(460px,48vh) internal scroll cage is gone; the page scrolls.
   Only the mail LIST keeps a scoped scroll (below) — a 30-message
   thread must not make the panel 3,000px tall. */
.ds-host .ds-detail-inner { container-type: inline-size; container-name: dspanel; }

/* The three zones. EDGE-RESIZE + DRAG-REORDER (operator 2026-08-22 "each
   box should be draggable if mouse on the edge, no need for these lines —
   click and drag to reorder too"): NO handle elements. The engine tracks
   the pointer; near a box's right edge (zones) or bottom edge (stacked
   cards) the cursor flips to resize and a drag adjusts the ratio pair;
   a drag started on a box BODY (not on inputs/buttons/the map) lifts the
   box and drops it on a sibling to reorder. Ratios are FRACTIONS stored
   in dsView.rz rendered as fr tracks — proportional at every container
   width ("true responsive"); order rides the grid/flex `order` property.
   Nothing dragged → equal tracks, natural order, same look as before. */
.ds-host .ds-det-cols {
  display: grid; gap: 12px; align-items: stretch;
  grid-template-columns: var(--ds-zt, repeat(3, minmax(0, 1fr)));
}
.ds-host .ds-det-cols.ds-det-2col {
  grid-template-columns: var(--ds-zt, repeat(2, minmax(0, 1fr)));
}
.ds-host .ds-zone { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; }
/* Engine cursor states — set on the BOX under the pointer. */
.ds-host .ds-rz-edge-h, .ds-host .ds-rz-edge-h * { cursor: col-resize !important; }
.ds-host .ds-rz-edge-v, .ds-host .ds-rz-edge-v * { cursor: row-resize !important; }
.ds-host .ds-det-cols.ds-rz-resizing, .ds-host .ds-det-cols.ds-rz-resizing * { user-select: none; }
/* Reorder drag: the lifted box + the drop target. */
.ds-host .ds-rz-lifted { opacity: .55; outline: 2px dashed var(--emr-gold, #F5A800); outline-offset: 2px; }
.ds-host .ds-rz-target { outline: 2px solid var(--emr-gold, #F5A800); outline-offset: 2px; }
/* Collapse is driven by the PANEL's own width, not the viewport: the
   left nav rail expands and collapses, so a viewport breakpoint is
   wrong half the time. Stacked layout: width ratios don't apply. */
@container dspanel (max-width: 1020px) {
  .ds-host .ds-det-cols, .ds-host .ds-det-cols.ds-det-2col { grid-template-columns: 1fr; }
}
@supports not (container-type: inline-size) {
  @media (max-width: 1100px) {
    .ds-host .ds-det-cols, .ds-host .ds-det-cols.ds-det-2col { grid-template-columns: 1fr; }
  }
}

/* SIGNALS zone — EST NET · CORRIDOR · DEADHEAD · BACKHAUL 7d as one
   stack of full-width cards sharing the column height equally: no
   shrink-to-content, no ragged gap, bottoms line up with the sibling
   zones. Card typography lives with the other ds-vb-* rules below. */
.ds-host .ds-zone-signals .ds-insights {
  display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; margin-top: 0;
}
.ds-host .ds-zone-signals .ds-vb-seg {
  flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; gap: 2px;
  padding: 12px 14px; min-width: 0;
  background: var(--emr-bg, #fff);
  border: 1px solid var(--emr-border-strong, #2a2f3a); border-radius: 8px;
}
.ds-host .ds-zone-signals .ds-ins-loading { padding: 12px 14px; color: var(--emr-text-subtle); }

/* EMAIL zone — the quote HISTORY card (thread + the offer/run/email/call
   row, one act per operator 2026-08-22), then the compose card. */
.ds-host .ds-zone-mail .ds-mailwrap { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.ds-host .ds-zone-mail .ds-mail-pane { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 120px; overflow: auto; }
.ds-host .ds-zone-mail .ds-mail-list { flex: 1 1 auto; min-height: 0; }
/* grok G45 (sweep 4): with a real loaded thread the action row could end
   up below the squeezed card's fold — ↩ Send unreachable. The row pins
   sticky to the history card's bottom edge: the thread scrolls, the
   offer/run/email/call row NEVER leaves view, at any resize ratio. */
.ds-host .ds-zone-mail .ds-mailwrap .ds-quote-actions {
  position: sticky; bottom: 0; flex-shrink: 0;
  background: var(--emr-bg-elev1, var(--emr-bg, #0f1115));
  padding-top: 6px;
}

.ds-host .ds-quote-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ds-host .ds-quote-actions .ds-quote-price { width: 96px; font-variant-numeric: tabular-nums; }
/* EMPTY STATES never reserve more than one row — the empty thread
   renders a .ds-ins-hint line, and the freed space goes to the compose
   box below (flex:1 on .ds-quote), not to a hole. */
.ds-host .ds-mail-pane:has(.ds-ins-hint), .ds-host .ds-mail-pane:has(.ds-mail-empty) { min-height: 36px; flex: 0 0 auto; }
.ds-host .ds-mail-empty { min-height: 36px; display: flex; align-items: center; color: var(--emr-text-subtle); }
.ds-host .ds-zone-mail .ds-quote { flex: 1 1 auto; }
.ds-host .ds-zone-mail .ds-quote .ds-quote-msg { flex: 1 1 auto; min-height: 96px; }

/* MAP zone — fills its full third, stretches to the tallest sibling
   zone so the three bottoms line up. */
.ds-host .ds-zone-map .ds-minimap { flex: 1 1 auto; display: flex; flex-direction: column; margin-top: 0; }
.ds-host .ds-zone-map .ds-minimap-canvas { height: auto; flex: 1 1 auto; min-height: 300px; }

/* STACKING: the results header owns the top layer; panel content sits
   below it and must never paint through. white-space resets to normal
   here — the grid's nowrap td rule is for DATA cells, and inheriting it
   into the panel is why comments and the corridor advisory painted as
   one endless unwrapped line. */
.ds-host table.ds-grid thead th { z-index: 20; }
/* tbody-td selector depth needed: the data-cell nowrap rule is
   `.ds-host table.ds-grid tbody td` (0,2,3) and this must outrank it. */
/* padding:0 — the inner is exactly 100cqw wide; the data-cell 8px padding
   shifted it right and manufactured an 8px horizontal scrollbar. */
.ds-host table.ds-grid tbody tr.ds-detail > td { position: relative; z-index: 1; white-space: normal; padding: 0; }
/* OVERFLOW: grid/flex children default to min-width:auto and refuse to
   shrink below their content, which is how the corridor card and the
   advisory sentence once ran off the right edge. */
.ds-host .ds-detail-inner *, .ds-host .ds-det-cols > * { min-width: 0; }
.ds-host .ds-detail-inner .ds-corridor-signal,
.ds-host .ds-detail-inner .ds-detail-comments { overflow-wrap: anywhere; }

/* Mail pane chrome (shared with the zone rules above). */
.ds-host .ds-mail-pane { border: 1px solid var(--emr-border-strong); border-radius: 8px; padding: 8px 10px; background: var(--emr-bg); }
.ds-host .ds-mail-head { font-size: 10px; font-weight: 800; letter-spacing: .6px; color: var(--emr-text-dim, var(--emr-text)); margin-bottom: 6px; }
.ds-host .ds-mail-list { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.ds-host .ds-mail-pane .ds-msg { border: 1px solid var(--emr-border-strong); border-radius: 6px; padding: 5px 8px; }
/* Squeezed history card (resize engine marks the wrap ds-rz-tight): the
   pane gives up its 120px floor so the pinned action row is never clipped
   out of a user-shrunk card — the thread just gets shorter. */
.ds-host .ds-zone-mail .ds-mailwrap.ds-rz-tight .ds-mail-pane { min-height: 0; }

/* grok G45 residual (sweep 5): ↩ Send lives INSIDE the mail pane after the
   thread list — a long thread kept it below the pane's fold. Sticky to the
   pane's bottom edge, above the scrolling messages, with its own paint. */
.ds-host .ds-mail-reply {
  display: flex; gap: 6px; margin-top: 8px; align-items: flex-end;
  position: sticky; bottom: 0; z-index: 2; flex-shrink: 0;
  background: var(--emr-bg, #0f1115); padding-top: 6px;
}
.ds-host .ds-mail-reply textarea { flex: 1; padding: 5px 8px; font-size: 11.5px; background: var(--emr-bg); color: var(--emr-text); border: 1px solid var(--emr-border-strong); border-radius: 6px; font-family: inherit; resize: vertical; }

/* UNIT-AUTOMATCH-V1 (2026-08-19): candidate units under a manual search's origin. */
.ds-host .ds-unit-match-row { display: block; margin-top: 2px; }
.ds-host .ds-unit-chip { display: inline-block; border: 1px solid; border-radius: 4px; padding: 0 5px; margin-right: 4px; font-size: 10px; color: var(--emr-text-dim, var(--emr-text)); white-space: nowrap; cursor: default; }

/* SEARCH-CHUNK-V1 + STREAM-TRUTH-V1 (2026-08-19) */
.ds-host .ds-dat-total { font-size: 10px; color: var(--emr-text-subtle); margin-left: 6px; }
.ds-host .ds-stream-chip { display: inline-block; border: 1px solid #f59e0b; border-radius: 4px; padding: 0 4px; font-size: 11px; font-weight: 600; color: #b45309; background: rgba(245,158,11,.14); white-space: nowrap; cursor: help; }
html[data-theme="dark"] .ds-host .ds-stream-chip { color: #fcd34d; }

/* AVAIL-PLUS1 (2026-08-19): compact checkbox field — the box, not a text input. */
.ds-host .ds-field.ds-plus1 { min-width: 44px; max-width: 52px; align-items: center; }
.ds-host .ds-field.ds-plus1 input[type="checkbox"] { width: 16px; height: 16px; margin-top: 5px; accent-color: var(--gold, #F5A800); cursor: pointer; }
.ds-host .ds-field label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--emr-text-subtle);
}
.ds-host .ds-field input, .ds-host .ds-field select {
  padding: 4px 7px; font-size: 11.5px; width: 100%;
  background: var(--emr-bg); color: var(--emr-text);
  border: 1px solid var(--emr-border-strong); border-radius: 4px; font-family: inherit;
}
.ds-host .ds-field input:disabled { opacity: .45; }
.ds-host .ds-anyonly { display: flex; }
.ds-host .ds-anyonly button {
  padding: 4px 9px; font-size: 10px; font-weight: 700; cursor: pointer;
  background: var(--emr-bg); color: var(--emr-text-subtle);
  border: 1px solid var(--emr-border-strong); font-family: inherit;
}
.ds-host .ds-anyonly button:first-child { border-radius: 4px 0 0 4px; }
.ds-host .ds-anyonly button:last-child { border-radius: 0 4px 4px 0; border-left: 0; }
.ds-host .ds-anyonly button.active { background: var(--emr-status-blue); color: #fff; border-color: var(--emr-status-blue); } /* dark-ok: text on solid blue */
.ds-host .ds-band-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ds-host .ds-alarm-toggle { display: flex; align-items: center; gap: 4px; cursor: pointer; font-size: 14px; }

/* ── Saved-searches strip (DAT §3.1) ── */
.ds-host .ds-strip-wrap { flex-shrink: 0; max-height: 32%; overflow: auto; border-bottom: 2px solid var(--emr-border-strong); }
.ds-host table.ds-strip { width: 100%; border-collapse: collapse; }
.ds-host table.ds-strip thead th {
  position: sticky; top: 0; z-index: 1; text-align: left;
  padding: 4px 8px; background: var(--emr-bg-muted);
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--emr-text-subtle); border-bottom: 1px solid var(--emr-border-strong); white-space: nowrap;
}
.ds-host table.ds-strip tbody td {
  padding: 3px 8px; border-bottom: 1px solid var(--emr-border);
  white-space: nowrap; cursor: pointer;
}
.ds-host table.ds-strip tbody tr:hover td { background: var(--emr-bg-subtle); }
.ds-host table.ds-strip tbody tr.sel td { background: var(--emr-bg-subtle); font-weight: 700; }
.ds-host .ds-count {
  display: inline-block; min-width: 20px; text-align: center;
  border-radius: 999px; padding: 1px 6px; font-size: 10px; font-weight: 800;
  background: var(--emr-bg-subtle); color: var(--emr-text-faint);
  font-variant-numeric: tabular-nums;
}
.ds-host .ds-count.hot { background: var(--status-completed-bg, rgba(22,163,74,.18)); color: var(--status-completed, var(--emr-status-green)); }
.ds-host .ds-bell { background: none; border: 0; cursor: pointer; font-size: 13px; filter: grayscale(1); opacity: .5; }
.ds-host .ds-bell.on { filter: none; opacity: 1; }
.ds-host .ds-swap { cursor: pointer; font-weight: 800; color: var(--emr-status-blue); }
.ds-host .ds-swap:hover { text-decoration: underline; }
.ds-host .ds-pending {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--emr-gold); background: rgba(255,183,10,.12); border-radius: 3px; padding: 1px 5px;
}
.ds-host .ds-row-actions { text-align: right; }

/* ── Results (DAT §3.3, 22px flat rows) ── */
.ds-host .ds-results-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px; background: var(--emr-bg-muted);
  border-bottom: 1px solid var(--emr-border-strong); flex-shrink: 0;
}
.ds-host .ds-total {
  background: var(--status-completed-bg, rgba(22,163,74,.18));
  color: var(--status-completed, var(--emr-status-green));
  border-radius: 999px; padding: 2px 10px; font-size: 10.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ds-host .ds-pulled-note { font-size: 10.5px; color: var(--emr-text-subtle); }
/* The scroller is a named query container so the detail panel can size
   itself to the VISIBLE scrollport (100cqw), not the full table width.
   inline-size containment is safe here: the wrapper's width comes from
   its flex parent, never from the table content. */
.ds-host .ds-grid-wrap { flex: 1; overflow: auto; min-height: 0; container-type: inline-size; container-name: dsscroll; }
.ds-host table.ds-grid { width: 100%; border-collapse: collapse; }
.ds-host table.ds-grid thead th {
  position: sticky; top: 0; z-index: 1; text-align: left;
  padding: 4px 8px; background: var(--emr-bg-muted);
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--emr-text-subtle); border-bottom: 1px solid var(--emr-border-strong); white-space: nowrap;
}
.ds-host table.ds-grid tbody td {
  padding: 3px 8px; border-bottom: 1px solid var(--emr-border);
  white-space: nowrap; line-height: 1.3;
}
.ds-host table.ds-grid tbody tr[data-mid] { cursor: pointer; }
.ds-host table.ds-grid tbody tr[data-mid]:hover td { background: var(--emr-bg-subtle); }
.ds-host table.ds-grid tbody tr:nth-child(4n+1):not(.ds-detail) td { background: color-mix(in srgb, var(--emr-bg-muted) 38%, transparent); }
.ds-host .ds-mono { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }
.ds-host .ds-company { font-weight: 600; color: var(--emr-status-blue); }
/* New since last view — the DAT green gutter bar, EMR green token. */
.ds-host tr.fresh td:first-child { box-shadow: inset 4px 0 0 var(--status-completed, var(--emr-status-green)); }
/* Pulled by the poster after the search ran — strikethrough, never dropped. */
.ds-host tr.pulled td { text-decoration: line-through; opacity: .55; }

/* ── Expanded match detail + quote seam ── */
.ds-host tr.ds-detail > td { background: var(--emr-bg-muted); }
.ds-host .ds-detail-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 6px 4px; flex-wrap: wrap; font-size: 11.5px;
}
.ds-host .ds-quote { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.ds-host .ds-quote-row { display: flex; align-items: center; gap: 6px; }
.ds-host .ds-quote-msg {
  width: 100%; min-height: 40px; resize: vertical; padding: 6px 8px; font-size: 11.5px; line-height: 1.4;
  background: var(--emr-bg); color: var(--emr-text);
  border: 1px solid var(--emr-border-strong); border-radius: 4px; font-family: inherit;
}
.ds-host .ds-quote-msg:focus { outline: none; border-color: var(--emr-gold); }
.ds-host .ds-quote-price {
  width: 110px; padding: 4px 7px; font-size: 11.5px;
  background: var(--emr-bg); color: var(--emr-text);
  border: 1px solid var(--emr-border-strong); border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
}

/* ── Expanded-match EMR insights (Est Net / lane / deadhead) ── */
.ds-host .ds-insights { margin-top: 8px; }
.ds-host .ds-ins-loading { font-size: 11px; color: var(--emr-text-subtle); padding: 4px 0; }
.ds-host .ds-ins-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.ds-host .ds-ins-card {
  flex: 1; min-width: 180px;
  background: var(--emr-bg); border: 1px solid var(--emr-border); border-radius: 6px; padding: 8px 10px;
}
.ds-host .ds-ins-h {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--emr-text-subtle); margin-bottom: 4px;
}
.ds-host .ds-ins-h .ds-ins-sub { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--emr-text-faint); }
.ds-host .ds-ins-net {
  font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 800; color: var(--emr-text);
}
.ds-host .ds-ins-net.pos { color: var(--status-completed, var(--emr-status-green)); }
.ds-host .ds-ins-net.neg { color: var(--fin-negative, var(--emr-status-red)); }
.ds-host .ds-ins-line { font-size: 11px; color: var(--emr-text); margin-top: 3px; }
.ds-host .ds-ins-sub { color: var(--emr-text-subtle); font-size: 10px; }
.ds-host .ds-ins-verdict { margin-top: 4px; font-size: 11px; font-weight: 700; }
/* ── #61 at-a-glance insights: big verdict + $/day, one-line equation,
   chip facts, faint provenance footer, key:value lane rows ── */
.ds-host .ds-ins-main { flex: 1.6; }
.ds-host .ds-ins-toprow { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ds-host .ds-ins-day {
  font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 800; color: var(--emr-gold);
}
.ds-host .ds-ins-day-sub { font-size: 10px; font-weight: 700; color: var(--emr-text-subtle); margin-left: 1px; }
.ds-host .ds-ins-basis {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 1px;
  background: var(--emr-bg-subtle, #1b1e24); border: 1px solid var(--emr-border, #2a2f3a); color: var(--emr-text-dim, #94a3b8);
}
.ds-host .ds-ins-basis.posted { color: var(--emr-status-green, #22c55e); border-color: var(--emr-status-green, #22c55e); }
.ds-host .ds-ins-basis.tgt { color: var(--emr-gold, #f5a800); border-color: var(--emr-gold, #f5a800); }
.ds-host .ds-ins-basis.ovr { color: #60a5fa; border-color: #60a5fa; }
.ds-host .ds-ins-eq {
  margin-top: 4px; font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums;
  font-size: 11.5px; color: var(--emr-text);
}
.ds-host .ds-ins-eq i { font-style: normal; font-size: 11px; color: var(--emr-text-subtle); margin: 0 2px 0 3px; }
.ds-host .ds-ins-eq b.pos { color: var(--status-completed, var(--emr-status-green)); }
.ds-host .ds-ins-eq b.neg { color: var(--fin-negative, var(--emr-status-red)); }
.ds-host .ds-ins-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.ds-host .ds-ins-chip {
  font-size: 9.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  background: var(--emr-bg-subtle, #1b1e24); border: 1px solid var(--emr-border, #2a2f3a); color: var(--emr-text-dim, #94a3b8);
}
.ds-host .ds-ins-meta { margin-top: 6px; font-size: 11px; color: var(--emr-text-faint, #6b7280); text-align: right; }
.ds-host .ds-ins-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; margin-top: 3px; }
.ds-host .ds-ins-kv span { color: var(--emr-text-subtle); }
.ds-host .ds-ins-kv b { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; color: var(--emr-text); font-weight: 700; }
/* ── #63 header curation toggles (🚫 DNU / ⭐ preferred-only) ── */
.ds-host .ds-hdr-tgl { margin-left: 8px; font-size: 10px; padding: 2px 8px; }
.ds-host .ds-hdr-tgl.on { background: var(--emr-gold); color: #111; border-color: var(--emr-gold); font-weight: 800; }
/* ── #62 one-click ask from the list's email ── */
/* READ-ALOUD COLUMNS (operator 2026-08-19: "comments contact len wght rate
   in bold and black in white mode and white in black mode"). These five are
   what a dispatcher reads off the screen while on the phone, so they get the
   strongest text token — near-black on white, near-white on dark — at the
   user's chosen weight (⚙ View). --ds-cell-* are set per-user on .ds-host. */
.ds-host td.ds-contact,
.ds-host td.ds-comments,
.ds-host td[data-col="len"],
.ds-host td[data-col="wt"],
.ds-host td[data-col="rate"] {
  font-weight: var(--ds-cell-weight, 600);
  color: var(--emr-text, #0f172a);
  font-family: var(--ds-cell-font, inherit);
  font-size: var(--ds-cell-size, 11.5px);
}
.ds-host td.ds-contact a, .ds-host td[data-col="rate"] .ds-net { font-weight: var(--ds-cell-weight, 600); }
/* Both contacts stacked — phone над email, each on its own line. */
.ds-host td.ds-contact .ds-contact-line { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
/* Comments: the broker's own words — readable but never allowed to blow
   the row height out (full text is in the title + the detail pane). */
.ds-host td.ds-comments { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Inline offer box */
.ds-host td.ds-offer-cell { padding: 2px 4px; }
.ds-host .ds-offer-box {
  width: 74px; padding: 3px 6px; font-size: 11px; font-variant-numeric: tabular-nums;
  background: var(--emr-bg, #fff); color: var(--emr-text, #0f172a);
  border: 1px solid var(--emr-border-strong, #2a2f3a); border-radius: 4px;
}
.ds-host .ds-offer-box:focus { outline: none; border-color: var(--emr-gold); }
/* ⚙ View menu */
.ds-view-menu {
  /* Widened for the per-column B + px controls (operator 2026-08-21:
     "make that menus fit properly when clicked view button") — at
     252px the label, the two controls and the move arrows collided.
     max-width keeps it inside a narrow window rather than clipping. */
  position: fixed; z-index: 200; width: 340px; max-width: calc(100vw - 24px);
  max-height: 70vh; overflow-y: auto;
  background: var(--emr-bg, #fff); color: var(--emr-text, #0f172a);
  border: 1px solid var(--emr-border-strong, #2a2f3a); border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0,0,0,.28); padding: 8px 10px; font-size: 11.5px;
}
.ds-view-menu .ds-view-sec { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--emr-text-subtle); margin: 6px 0 4px; }
.ds-view-menu .ds-view-hint { font-weight: 600; letter-spacing: 0; text-transform: none; opacity: .8; }
/* ONE SHARED GRID for every popover row (review 2026-08-21: "the B
   checkboxes and the number inputs sit at slightly different x positions
   row to row and the input widths vary, so 16 rows read as ragged").
   Four fixed tracks — Show · Bold · Size · Order — so every control in a
   column lands on the same x, whatever the label length. Same disease as
   the detail panel, same cure: put them on a grid. */
.ds-view-menu .ds-view-row {
  display: grid; grid-template-columns: 1fr 34px 52px 46px;
  align-items: center; gap: 8px; padding: 2px 0;
}
.ds-view-menu .ds-view-row > label:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-view-menu .ds-view-row > input[type=checkbox],
.ds-view-menu .ds-view-row > select { justify-self: center; }
.ds-view-menu .ds-view-row > select { width: 100%; font-size: 10px; padding: 1px 2px; }
/* Column legend — a bare "B" repeated 16 times with an unlabelled number
   under it told nobody what either control was. */
.ds-view-menu .ds-view-head {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--emr-text-subtle); border-bottom: 1px solid var(--emr-border-strong, #2a2f3a);
  padding-bottom: 3px; margin-bottom: 3px;
}
.ds-view-menu .ds-view-head > span:not(:first-child) { text-align: center; }
.ds-view-menu .ds-view-row > label { flex: 1 1 auto; min-width: 0; }
.ds-view-menu .ds-view-row > label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* APPLY-TO-ALL row (operator 2026-08-21: "make option to adjust all at
   the same time so do not have to go one by one"). Sits above the list,
   visually separated so it is never mistaken for a column. */
.ds-view-menu .ds-view-all { border-bottom: 1px dashed var(--emr-border-strong, #2a2f3a); padding-bottom: 6px; margin-bottom: 4px; font-weight: 700; }
.ds-view-menu .ds-view-all .ds-view-px { width: 46px; }
.ds-view-menu .ds-view-row label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
/* The TEXT section's rows carry one label + one select — opt them out of
   the 4-track column grid so they don't inherit empty tracks. */
.ds-view-menu .ds-view-sec ~ .ds-view-row:not(.ds-view-all):not(.ds-view-head):not([data-col-key]) {
  display: flex; justify-content: space-between;
}
.ds-view-menu .ds-view-move button { background: none; border: 1px solid var(--emr-border-strong, #2a2f3a); border-radius: 4px; color: inherit; cursor: pointer; font-size: 11px; line-height: 1; padding: 2px 4px; }
.ds-view-menu .ds-view-move button[disabled] { opacity: .3; cursor: default; }
.ds-view-menu select { background: var(--emr-bg, #fff); color: var(--emr-text, #0f172a); border: 1px solid var(--emr-border-strong, #2a2f3a); border-radius: 4px; font-size: 11px; padding: 2px 4px; }
.ds-view-menu .ds-view-foot { margin-top: 8px; border-top: 1px solid var(--emr-border, #2a2f3a); padding-top: 6px; }
.ds-host .ds-quickask { color: var(--emr-text, #0f172a); text-decoration: underline dotted; text-underline-offset: 2px; }
.ds-host .ds-quickask:hover { color: var(--emr-gold); }
.ds-host .ds-ins-verdict.pos { color: var(--status-completed, var(--emr-status-green)); }
.ds-host .ds-ins-verdict.warn { color: var(--emr-gold); }
.ds-host .ds-ins-verdict.neg { color: var(--fin-negative, var(--emr-status-red)); }

/* ── Tab green dot (lives on the sub-tab button, OUTSIDE .ds-host —
   deliberately un-scoped selector, unique classname) ── */
.ds-tab-dot {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--status-completed, var(--emr-status-green));
  color: #1a1a1a; /* dark-ok: count text on solid green */
  font-size: 10px; font-weight: 800; line-height: 1;
  margin-left: 6px; vertical-align: middle;
  box-shadow: 0 0 6px var(--status-completed, var(--emr-status-green));
}
.ds-host .ds-call { text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }

/* ── Broker intel slide-out (click a match company) ─────────── */
.ds-host .ds-company-link { cursor: pointer; text-decoration: underline dotted var(--emr-gold); text-underline-offset: 2px; }
.ds-host .ds-company-link:hover { color: var(--emr-gold); }
/* #50 (2026-08-15): the drawer is BODY-mounted now (it must survive
   sub-tab pivots back to the posting board), so — like .ds-slideout
   below — its selectors are deliberately un-scoped, unique-classname. */
.ds-bx-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 340px; max-width: 92vw; background: var(--emr-bg-elevated, #14161a); border-left: 1px solid var(--emr-border, #2a2f3a); box-shadow: -8px 0 24px rgba(0,0,0,.4); transform: translateX(100%); transition: transform .2s ease; z-index: 1000; padding: 14px; overflow-y: auto; }
.ds-bx-drawer.open { transform: translateX(0); }
.ds-bx-drawer .ds-bx-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 10px; }
.ds-bx-drawer .ds-bx-title { font-size: 14px; font-weight: 800; color: var(--emr-text, #e5e7eb); }
.ds-bx-drawer .ds-bx-sub { font-size: 11px; color: var(--emr-text-dim, #94a3b8); margin-top: 2px; }
.ds-bx-drawer .ds-bx-close { background: transparent; border: none; color: var(--emr-text-dim, #94a3b8); font-size: 15px; cursor: pointer; }
.ds-bx-drawer .ds-bx-tag { display: inline-block; font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 10px; margin-bottom: 10px; }
.ds-bx-drawer .ds-bx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.ds-bx-drawer .ds-bx-stat { background: var(--emr-bg-subtle, #1b1e24); border: 1px solid var(--emr-border, #2a2f3a); border-radius: 6px; padding: 8px; }
.ds-bx-drawer .ds-bx-k { font-size: 11px; font-weight: 800; color: var(--emr-text-dim, #94a3b8); letter-spacing: .05em; }
.ds-bx-drawer .ds-bx-v { font-size: 15px; font-weight: 800; color: var(--emr-text, #e5e7eb); margin-top: 2px; }
.ds-bx-drawer .ds-bx-h { font-size: 10px; font-weight: 800; color: var(--emr-text-dim, #94a3b8); letter-spacing: .05em; margin: 8px 0 4px; }
.ds-bx-drawer .ds-bx-line { font-size: 12px; color: var(--emr-text, #e5e7eb); padding: 2px 0; }
.ds-bx-drawer .ds-bx-loading, .ds-bx-drawer .ds-bx-empty { font-size: 12px; color: var(--emr-text-dim, #94a3b8); padding: 12px 0; }

/* ── #50 negotiation coach — rides beside the quote text box in the
   detail row (.ds-host), in the run-quote slide-out (.ds-qslide, on
   <body>), and on the shared match card: un-scoped, unique classnames. */
/* #60 (operator 2026-08-16: "contact inteligence container box too
   small for text to fit — make it same width as the email box"):
   column layout — the coach spans the FULL quote-box width, stacked
   under the greeting textarea instead of squeezed beside it. */
.ds-quote-flex { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.ds-quote-flex .ds-quote-msg { flex: none; width: 100%; }
.ds-coach {
  flex: none; width: 100%; min-width: 0; font-size: 11px; line-height: 1.45;
  background: var(--emr-bg, #101216); border: 1px solid var(--emr-border, #2a2f3a);
  border-left: 3px solid var(--emr-gold, #f5a800); border-radius: 4px; padding: 7px 9px;
  color: var(--emr-text, #e5e7eb);
}
.ds-coach:empty { display: none; }
.ds-coach-hd { font-weight: 800; font-size: 11px; margin-bottom: 3px; color: var(--emr-gold, #f5a800); }
.ds-coach-hd.ds-coach-straight { color: var(--emr-status-green, #22c55e); }
.ds-coach-hd.ds-coach-price-tight, .ds-coach-hd.ds-coach-haggler { color: var(--emr-gold, #f5a800); }
.ds-coach-hd.ds-coach-thin { color: var(--emr-text-dim, #94a3b8); }
.ds-coach-line { color: var(--emr-text, #e5e7eb); margin-top: 2px; }
.ds-coach-line b { color: var(--emr-text-dim, #94a3b8); font-weight: 700; }
.ds-coach-facts { margin-top: 4px; font-size: 10px; color: var(--emr-text-subtle, #8b93a3); }
.ds-coach-loading { font-size: 10.5px; color: var(--emr-text-dim, #94a3b8); }
.ds-coach-q { margin-top: 10px; }

/* ── #51 driver-fit row — miles split + HOS + pace verdict. Lives in the
   detail row (.ds-host) AND on the shared .ds-match-card in the capacity
   drawer: un-scoped, unique classnames. */
.ds-fit-slot:empty { display: none; }
.ds-fit-row {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11px; padding: 4px 8px; margin: 4px 0; border-radius: 4px;
  background: var(--emr-bg, #101216); border: 1px solid var(--emr-border, #2a2f3a);
  color: var(--emr-text, #e5e7eb);
}
.ds-fit-row b { font-family: 'IBM Plex Mono', monospace; font-variant-numeric: tabular-nums; }
.ds-fit-row.ds-fit-na { border-left: 3px solid var(--emr-border, #2a2f3a); }
.ds-fit-row.ds-fit-ok { border-left: 3px solid var(--emr-status-green, #22c55e); }
.ds-fit-row.ds-fit-tight { border-left: 3px solid var(--emr-gold, #f5a800); }
.ds-fit-row.ds-fit-conflict { border-left: 3px solid var(--emr-status-red, #ef4444); }
.ds-fit-badge { font-weight: 800; font-size: 10px; letter-spacing: .03em; white-space: nowrap; }
.ds-fit-ok .ds-fit-badge { color: var(--emr-status-green, #22c55e); }
.ds-fit-tight .ds-fit-badge { color: var(--emr-gold, #f5a800); }
.ds-fit-conflict .ds-fit-badge { color: var(--emr-status-red, #ef4444); }
.ds-fit-drv { font-weight: 700; color: var(--emr-text-dim, #94a3b8); }
.ds-fit-dh, .ds-fit-sep { color: var(--emr-text-subtle, #8b93a3); }
.ds-fit-note { color: var(--emr-text-dim, #94a3b8); font-size: 10.5px; }
/* ── DAT-CLICK-TO-QUOTE ②: broker thread slide-out (mounted on <body>, so
   un-scoped selectors — theme vars with literal fallbacks) ── */
.ds-slideout {
  position: fixed; top: 0; right: 0; width: 380px; max-width: 92vw; height: 100vh;
  background: var(--emr-bg, #fff); color: var(--emr-text, #111);
  border-left: 3px solid var(--emr-gold, #F5A800);
  box-shadow: -4px 0 24px rgba(0,0,0,.28); z-index: 9000;
  display: flex; flex-direction: column; font-size: 13px;
  font-family: var(--emr-font-sans, Inter, system-ui, sans-serif); /* grok A7 */
}
.ds-slideout[hidden] { display: none; }
.ds-slideout-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--emr-border-strong, #ddd); font-size: 14px; }
.ds-slide-body { flex: 1; overflow-y: auto; padding: 12px 14px; }
.ds-msg { margin-bottom: 12px; }
.ds-msg-meta { font-size: 11px; color: var(--emr-text-subtle, #6b7280); margin-bottom: 3px; }
.ds-msg-body { white-space: pre-wrap; line-height: 1.4; padding: 8px 10px; background: var(--emr-bg-subtle, #f4f4f5); border-radius: 6px; }
.ds-slide-reply { display: flex; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--emr-border-strong, #ddd); }
.ds-slide-text { flex: 1; resize: vertical; padding: 6px 8px; font-family: inherit; font-size: 13px; background: var(--emr-bg, #fff); color: var(--emr-text, #111); border: 1px solid var(--emr-border-strong, #ddd); border-radius: 4px; }
.ds-slideout .ds-btn { padding: 4px 10px; font-size: 12px; cursor: pointer; border-radius: 4px; background: var(--emr-bg, #fff); color: var(--emr-text, #111); border: 1px solid var(--emr-border-strong, #ddd); }
.ds-slideout .ds-btn.primary { background: var(--emr-gold, #F5A800); color: #1a1a1a; border-color: var(--emr-gold, #F5A800); }
.ds-slideout .ds-btn.xs { padding: 1px 7px; }

/* ── One-click Dialpad dial on the board (tel: → Dialpad handler) ── */
.ds-host .ds-dial { color: var(--emr-text, #0f172a); text-decoration: none; white-space: nowrap; cursor: pointer; font-variant-numeric: tabular-nums; }
.ds-host .ds-dial:hover { text-decoration: underline; }

/* ── Est Net paint chip + past-haul badge (operator 2026-07-31) ── */
.ds-host .ds-net { font-weight: 800; font-variant-numeric: tabular-nums; }
.ds-host .ds-net.tgt { opacity: .8; font-weight: 700; } /* our-target (no broker rate) — muted */
/* #75 — the PRICE target beside the Est-Net figure (what we'd ask the broker) */
.ds-host .ds-price-tgt {
  font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--text3, #999); border: 1px dashed var(--border2, #444);
  border-radius: 999px; padding: 0 6px; white-space: nowrap;
}
.ds-host .ds-haul {
  display: inline-block; font-size: 11px; font-weight: 800; vertical-align: middle;
  padding: 0 4px; border-radius: 8px; margin-left: 4px;
  background: var(--emr-bg-subtle); color: var(--emr-text-subtle);
  border: 1px solid var(--emr-border-strong);
}
.ds-host .ds-haul-ctx {
  margin-top: 6px; font-size: 11px; color: var(--emr-text);
  background: var(--status-completed-bg, rgba(22,163,74,.10));
  border-left: 3px solid var(--status-completed, var(--emr-status-green));
  border-radius: 3px; padding: 4px 8px;
}
/* Est-Net row paint: painted rows read --ds-paint (set inline), overriding the
   zebra + hover td backgrounds. Appended last → wins on equal specificity. */
.ds-host table.ds-grid tbody tr[data-mid].ds-painted td { background: var(--ds-paint); }
/* STRATEGY TIER PAINT (operator 2026-08-04 "tier 1 match should be
   highlighted gold, tier two silver; tier 3 are the remaining"): row tints
   for strategy-search results. Declared BEFORE the response ladder so a
   broker DECISION still outranks tier flair. */
.ds-host table.ds-grid tbody tr[data-mid].ds-tier-row-1 td { background: rgba(255,183,10,.16); }
.ds-host table.ds-grid tbody tr[data-mid].ds-tier-row-2 td { background: rgba(148,163,184,.16); }
/* QUOTE-RESPONSE LADDER (mig 477, operator 2026-08-04): engagement paint —
   quoted → viewed purple → countered yellow / accepted bright green /
   declined red. Declared AFTER ds-painted so a decision tint WINS over the
   Est-Net paint; the chip beside Company carries the words + amount. */
.ds-host table.ds-grid tbody tr[data-mid].ds-resp-quoted   td { background: var(--emr-gold-tint, rgba(245,168,0,.08)); }
.ds-host table.ds-grid tbody tr[data-mid].ds-resp-viewed   td { background: rgba(168,85,247,.16); }
.ds-host table.ds-grid tbody tr[data-mid].ds-resp-countered td { background: rgba(245,158,11,.22); }
.ds-host table.ds-grid tbody tr[data-mid].ds-resp-accepted td { background: rgba(22,163,74,.28); }
.ds-host table.ds-grid tbody tr[data-mid].ds-resp-declined td { background: rgba(239,68,68,.16); }
.ds-host .ds-resp-chip { display:inline-block; font-size:10px; font-weight:800; border-radius:4px; padding:1px 6px; margin-left:6px; vertical-align:middle; letter-spacing:.03em; }
/* grok A5: quoted = WE ACTED — brand outline, not link-blue (which read as info
   and collided with the retired indigo family). Ladder colors above unchanged. */
.ds-host .ds-resp-chip.quoted   { background: transparent; border: 1px solid var(--emr-gold, #F5A800); color: var(--emr-gold, #F5A800); }
.ds-host .ds-resp-chip.viewed   { background:#a855f7; color:#fff; }
.ds-host .ds-resp-chip.countered{ background:#f59e0b; color:#1a1a1a; }
.ds-host .ds-resp-chip.accepted { background:#16a34a; color:#fff; }
.ds-host .ds-resp-chip.declined { background:#ef4444; color:#fff; }
.ds-host .ds-resp-chip.inquiry  { background:#64748b; color:#fff; } /* grok A5: neutral slate, indigo retired */
/* Chain reopen (2026-08-04): a chip with a persisted Gmail thread is a
   button — it opens the broker-thread slide-out (RC entry included). */
.ds-host .ds-resp-chip.ds-chip-link { cursor:pointer; }
.ds-host .ds-resp-chip.ds-chip-link:hover { filter:brightness(1.15); box-shadow:0 0 0 2px rgba(59,130,246,.35); }
.ds-msg-rc { border:1px solid #16a34a55; background:#16a34a12; border-radius:6px; padding:8px 10px; }
.ds-msg-rc .ds-msg-meta { color:#15803d; font-weight:700; }
/* STRATEGY tiers (operator 2026-08-02): the strip's deploy-all chip + per-match
   T1/T2/T3 location-tier chips (T1 gold = best margins for this driver). */
.ds-host .ds-strat-chip { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .05em; background: rgba(255,183,10,.16); color: var(--emr-gold, #F5A800); border: 1px solid rgba(255,183,10,.45); border-radius: 999px; padding: 1px 6px; vertical-align: middle; }
.ds-host .ds-tier-chip { display: inline-block; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 5px; vertical-align: middle; }
.ds-host .ds-tier-1 { background: rgba(255,183,10,.16); color: var(--emr-gold, #F5A800); border: 1px solid rgba(255,183,10,.45); }
.ds-host .ds-tier-2 { background: rgba(148,163,184,.12); color: var(--emr-text2, #cbd5e1); border: 1px solid rgba(148,163,184,.35); }
.ds-host .ds-tier-3 { background: rgba(148,163,184,.06); color: var(--emr-text3, #94a3b8); border: 1px solid rgba(148,163,184,.2); }
/* W28 (operator 2026-08-13): truck-linked searches ride the strip tagged with
   their unit #; EXPIRED = availability date passed (row dims, chip explains). */
.ds-host .ds-truck-chip { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .05em; background: rgba(56,189,248,.14); color: #38bdf8; border: 1px solid rgba(56,189,248,.45); border-radius: 999px; padding: 1px 6px; vertical-align: middle; }
.ds-host .ds-expired-chip { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .05em; background: rgba(239,68,68,.14); color: #ef4444; border: 1px solid rgba(239,68,68,.45); border-radius: 999px; padding: 1px 6px; vertical-align: middle; }
.ds-host tr.ds-expired td { opacity: .55; }
.ds-host tr.ds-expired td .ds-expired-chip { opacity: 1; }
/* ── DAT-CLICK-TO-QUOTE ③: Run-quote slide-out (full engine result + email) ── */
.ds-qslide {
  position: fixed; top: 0; right: 0; width: 380px; max-width: 92vw; height: 100vh;
  background: var(--emr-bg, #fff); color: var(--emr-text, #111);
  border-left: 3px solid var(--emr-gold, #F5A800);
  box-shadow: -4px 0 24px rgba(0,0,0,.28); z-index: 9001;
  display: flex; flex-direction: column; font-size: 13px;
  font-family: var(--emr-font-sans, Inter, system-ui, sans-serif); /* grok A7 */
}
.ds-qslide[hidden] { display: none; }
.ds-qslide-body { flex: 1; overflow-y: auto; padding: 14px; }
.ds-qslide .ds-btn { padding: 4px 10px; font-size: 12px; cursor: pointer; border-radius: 4px; background: var(--emr-bg, #fff); color: var(--emr-text, #111); border: 1px solid var(--emr-border-strong, #ddd); }
.ds-qslide .ds-btn.primary { background: var(--emr-gold, #F5A800); color: #1a1a1a; border-color: var(--emr-gold, #F5A800); }
.ds-qslide .ds-btn.xs { padding: 1px 7px; }
.ds-q-dec { font-size: 18px; font-weight: 700; padding: 6px 0 12px; }
.ds-q-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ds-q-cell { background: var(--emr-bg-subtle, #f4f4f5); border-radius: 6px; padding: 8px 10px; }
.ds-q-k { font-size: 10px; letter-spacing: .04em; color: var(--emr-text-subtle, #6b7280); }
.ds-q-v { font-size: 18px; font-weight: 700; line-height: 1.2; }
.ds-q-sub { font-size: 11px; color: var(--emr-text-subtle, #6b7280); margin-top: 2px; }
.ds-q-actions { margin-top: 14px; }
.ds-q-actions .ds-btn { width: 100%; padding: 9px; font-size: 13px; }
.ds-q-pos { color: var(--status-completed, var(--emr-status-green, #16a34a)); }
.ds-q-warn { color: var(--emr-gold, #F5A800); }
.ds-q-neg { color: var(--fin-negative, var(--emr-status-red, #dc2626)); }

/* ── #38 (operator 2026-08-15) — proper detail header + motion candy ── */
/* The detail row is a centering flex row — the old meta line floated
   mid-space in small type ("too small to read and in the middle of the
   opened space"). The header band takes the full first line. */
.ds-host .ds-detail-hdr { flex: 1 0 100%; }
.ds-host .ds-detail-comments { flex: 1 0 100%; }
/* Detail opens with a soft slide-in; fresh matches land with a green
   wash that fades; curation stars/bans pop on hover. */
.ds-host tr.ds-detail .ds-detail-inner { animation: dsDetailIn .18s ease-out; }
@keyframes dsDetailIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
.ds-host tr.fresh td { animation: dsFreshIn .8s ease-out; }
@keyframes dsFreshIn { from { background: color-mix(in srgb, var(--emr-status-green) 16%, transparent); } to { background: transparent; } }
.ds-host .ds-flag-btn { transition: transform .12s ease, filter .15s ease, opacity .15s ease; }
.ds-host .ds-flag-btn:hover { transform: scale(1.3); filter: none !important; opacity: 1 !important; }
.ds-host .ds-btn, .ds-host .ds-resp-chip { transition: transform .12s ease, background .15s ease; }
.ds-host .ds-btn:active { transform: scale(.96); }
.ds-host table.ds-grid tbody tr[data-mid] { transition: background .15s ease; }

/* ── #40 (operator 2026-08-15) — shared match card: truck-posting matches
   render at FULL search-loads parity via datSearchPanel.matchCardHtml.
   Density-first (Masterboard): three tight rows + one action row. ── */
.ds-match-card {
  border: 1px solid var(--border2, #334155);
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg2, #0f172a);
  animation: dsDetailIn .18s ease-out;
}
.ds-match-card.fresh { box-shadow: inset 3px 0 0 var(--emr-status-green, #22c55e); }
.ds-match-card.pulled { opacity: .55; }
.ds-match-card .ds-card-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.ds-match-card .ds-card-lane { font-size: 12px; color: var(--text, #e5e7eb); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-match-card .ds-card-age { margin-left: auto; font-size: 10px; color: var(--text3, #94a3b8); font-family: var(--mono, monospace); }
.ds-match-card .ds-card-co { font-size: 12px; font-weight: 800; color: var(--text, #fff); cursor: pointer; }
.ds-match-card .ds-card-co:hover { text-decoration: underline; }
.ds-match-card .ds-mc, .ds-match-card .ds-credit, .ds-match-card .ds-intel-chip, .ds-match-card .ds-cptd { font-size: 10px; font-weight: 700; }
.ds-match-card .ds-mc { color: var(--text3, #999); font-weight: 600; }
.ds-match-card .ds-card-rate { font-size: 13px; font-weight: 800; font-family: var(--mono, monospace); color: var(--text, #fff); }
.ds-match-card .ds-card-chip {
  font-size: 10px; font-weight: 700; color: var(--text2, #cbd5e1);
  background: var(--bg3, #1f2937); border: 1px solid var(--border2, #334155);
  border-radius: 999px; padding: 1px 7px; white-space: nowrap;
}
.ds-match-card .ds-card-comments { font-size: 10.5px; color: var(--text2, #cbd5e1); }
.ds-match-card .ds-card-comments b { color: var(--text3, #94a3b8); }
.ds-match-card .ds-card-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ds-match-card .cb-dat-price { width: 84px; }

/* ═══ QUOTE-DOCK-V1 (operator 2026-08-18) — Masterboard bottom quote dock ═══
   Pills reuse the .ds-resp-chip ladder hexes. Collapsed = 2 pill rows
   (newest on top; older rows clip); hovering expands the dock UPWARD
   (bottom-anchored absolute) to reveal the oldest. */
/* Dock shell rides theme tokens (operator 2026-08-19 "on white mode the
   dock needs to be white too") — light default here, the dark face is
   restored under html[data-theme="dark"] below with the original hexes. */
.ds-host #ds-quote-dock{position:absolute;left:10px;right:10px;bottom:8px;z-index:60;background:color-mix(in srgb, var(--emr-bg, #fff) 94%, transparent);border:1px solid var(--emr-border-strong, #2a2f3a);border-radius:8px;box-shadow:0 -2px 12px rgba(0,0,0,.14);padding:5px 6px}
.ds-host #ds-quote-dock .ds-dock-pills{display:flex;flex-wrap:wrap;gap:5px;max-height:72px;overflow:hidden}
.ds-host #ds-quote-dock:hover .ds-dock-pills{max-height:42vh;overflow-y:auto}
.ds-host .ds-dock-pill{position:relative;display:inline-flex;flex-direction:column;gap:1px;min-width:96px;max-width:150px;padding:4px 20px 4px 8px;border-radius:6px;border:1px solid;cursor:pointer;line-height:1.15}
.ds-host .ds-dock-lane{font-size:11px;font-weight:700;letter-spacing:.03em}
.ds-host .ds-dock-co{font-size:10px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-host .ds-dock-x{position:absolute;top:1px;right:2px;background:none;border:none;color:inherit;opacity:.55;font-size:10px;cursor:pointer;padding:2px;line-height:1}
.ds-host .ds-dock-x:hover{opacity:1}
.ds-host .ds-dock--quoted{background:rgba(59,130,246,.16);border-color:#3b82f6;color:#1d4ed8}
.ds-host .ds-dock--viewed{background:rgba(168,85,247,.16);border-color:#a855f7;color:#7e22ce}
.ds-host .ds-dock--accepted{background:rgba(22,163,74,.18);border-color:#16a34a;color:#15803d}
.ds-host .ds-dock--countered{background:rgba(245,158,11,.18);border-color:#f59e0b;color:#b45309}
.ds-host .ds-dock--declined{background:rgba(239,68,68,.16);border-color:#ef4444;color:#b91c1c}
.ds-host .ds-dock--inquiry{background:rgba(99,102,241,.16);border-color:#6366f1;color:#4338ca}
/* Pills for loads the poster pulled: still awaiting the reply, shown struck. */
.ds-host .ds-dock-pill.ds-dock-pulled .ds-dock-lane,
.ds-host .ds-dock-pill.ds-dock-pulled .ds-dock-co{text-decoration:line-through;opacity:.7}
html[data-theme="dark"] .ds-host #ds-quote-dock{background:rgba(17,19,24,.94);border-color:var(--border,#2a2f3a);box-shadow:0 -2px 12px rgba(0,0,0,.3)}
html[data-theme="dark"] .ds-host .ds-dock--quoted{color:#93c5fd}
html[data-theme="dark"] .ds-host .ds-dock--viewed{color:#d8b4fe}
html[data-theme="dark"] .ds-host .ds-dock--accepted{color:#86efac}
html[data-theme="dark"] .ds-host .ds-dock--countered{color:#fcd34d}
html[data-theme="dark"] .ds-host .ds-dock--declined{color:#fca5a5}
html[data-theme="dark"] .ds-host .ds-dock--inquiry{color:#c7d2fe}
.ds-host .ds-dock-flash{outline:2px solid var(--gold,#F5A800);outline-offset:2px;transition:outline .2s ease}

/* ═══ REFRESH-DOPAMINE-V1 (operator 2026-08-18) — the fun refresh button ═══
   3D bevel, pressable, icon spins while the fetch runs, and the whole
   board flashes a touch brighter when fresh matches land. */
/* Light theme (default): WHITE face, whiter than the page, black
   letters (operator 2026-08-18: "in white mode it should be white with
   black letters but whiter than the background"). Dark theme keeps the
   charcoal face below. */
.ds-host .ds-refresh-3d{background:linear-gradient(180deg,#ffffff 0%,#fafbfc 55%,#eef0f3 100%);border:1px solid #cfd5dd;border-bottom-color:#aeb6c1;border-radius:8px;box-shadow:0 3px 0 #c3cad3,0 5px 10px rgba(15,23,42,.14),inset 0 1px 0 #ffffff;color:#111827;font-weight:700;transform:translateY(0);transition:transform .08s ease,box-shadow .08s ease,filter .15s ease}
.ds-host .ds-refresh-3d:hover{filter:brightness(1.04)}
.ds-host .ds-refresh-3d:active{transform:translateY(3px);box-shadow:0 0 0 #c3cad3,0 1px 3px rgba(15,23,42,.2),inset 0 1px 0 #ffffff}
html[data-theme="dark"] .ds-host .ds-refresh-3d{background:linear-gradient(180deg,#3a4150 0%,#242a35 55%,#1b2029 100%);border:1px solid #4a5261;border-bottom-color:#141821;box-shadow:0 3px 0 #12161d,0 5px 10px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.14);color:#e5e9f0}
html[data-theme="dark"] .ds-host .ds-refresh-3d:hover{filter:brightness(1.12)}
html[data-theme="dark"] .ds-host .ds-refresh-3d:active{transform:translateY(3px);box-shadow:0 0 0 #12161d,0 1px 3px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1)}
.ds-host .ds-refresh-ico{display:inline-block;font-size:14px;line-height:1;transform-origin:50% 52%}
.ds-host .ds-refresh-3d.is-spinning .ds-refresh-ico{animation:dsRefreshSpin .55s linear infinite}
.ds-host .ds-refresh-3d.is-spinning{filter:brightness(1.18);box-shadow:0 3px 0 #12161d,0 5px 14px rgba(255,183,10,.25),inset 0 1px 0 rgba(255,255,255,.14)}
@keyframes dsRefreshSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.ds-host.ds-board-glow{animation:dsBoardGlow .45s ease-out}
@keyframes dsBoardGlow{0%{filter:brightness(1)}30%{filter:brightness(1.18)}100%{filter:brightness(1)}}

/* NEW-LOAD-GLOW (operator 2026-08-18) — a freshly-landed match runs a
   little brighter for its first 30 seconds, then settles. The negative
   animation-delay set inline keeps the fade continuous across re-renders. */
.ds-host .ds-match-card.ds-just-landed{animation:dsJustLanded 30s ease-out both}
@keyframes dsJustLanded{0%{filter:brightness(1.22);box-shadow:0 0 14px rgba(255,183,10,.28)}70%{filter:brightness(1.07);box-shadow:0 0 6px rgba(255,183,10,.12)}100%{filter:brightness(1);box-shadow:none}}

/* MINI ROUTE MAP + BACKHAUL + DETAIL COMMENTS (operator 2026-08-19) */
.ds-host .ds-minimap { margin-top: 8px; border: 1px solid var(--emr-border, #2a2f3a); border-radius: 8px; padding: 6px; background: var(--emr-bg, #fff); }
.ds-host .ds-minimap-canvas { height: 190px; border-radius: 6px; overflow: hidden; }
.ds-host .ds-minimap-canvas .leaflet-container { height: 100%; width: 100%; background: var(--emr-bg-muted, #eef2f7); }
.ds-host .ds-map-pin { color: var(--emr-text, #0f172a); font-size: 16px; line-height: 1; text-shadow: 0 0 3px var(--emr-bg, #fff), 0 0 3px var(--emr-bg, #fff); }
.ds-host .ds-map-del { color: #ef4444; }
.ds-host .ds-map-truck { font-size: 18px; line-height: 1; }
.ds-host .ds-minimap-cap[data-direct="1"] .ds-minimap-mi::after { content: ' · direct line'; font-weight: 600; opacity: .75; }
.ds-host .ds-minimap-cap { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-top: 4px; font-size: 10px; color: var(--emr-text-subtle); }
.ds-host .ds-minimap-cap .ds-minimap-mi { font-weight: 800; color: var(--emr-text); font-variant-numeric: tabular-nums; }
.ds-host .ds-ins-backhaul { margin-top: 6px; padding-top: 5px; border-top: 1px dashed var(--emr-border, #2a2f3a); font-size: 11px; color: var(--emr-text); }
.ds-host .ds-ins-backhaul .ds-bh-h { font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--emr-text-subtle); }
.ds-host .ds-ins-backhaul .ds-bh-rpm { font-variant-numeric: tabular-nums; color: var(--emr-text-dim, #94a3b8); }
.ds-host .ds-ins-backhaul .ds-bh-n { font-size: 10px; color: var(--emr-text-subtle); }
/* Detail comments: the broker's own words, read before quoting. */
.ds-host .ds-detail-comments { font-size: 13px; font-weight: 700; color: var(--emr-text, #0f172a); margin-bottom: 8px; line-height: 1.35; }
.ds-host .ds-detail-comments .ds-detail-comments-h { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--emr-text-subtle); margin-right: 4px; }

/* Panes fill their grid cell so the three columns read as one block. */
.ds-host .ds-det-mid .ds-mail-pane { flex: 1 1 auto; display: flex; flex-direction: column; }
.ds-host .ds-det-mid .ds-mail-list { flex: 1 1 auto; max-height: none; min-height: 120px; }
.ds-host .ds-det-right .ds-insights { flex: 0 0 auto; }
.ds-host .ds-det-left .ds-quote { flex: 1 1 auto; }
/* NO BLANKET svg RULE HERE. A stub-era `.ds-minimap svg { width:100%;
   height:auto }` (shipped with the Leaflet rewrite, 9d00cb2c) also matched
   LEAFLET'S OWN overlay pane, whose <svg> is absolutely positioned and
   sized by the library; overriding it broke the vector coordinate space,
   so the road route and the origin halo were added to the map and drawn
   INVISIBLE. Markers survived because divIcons are HTML, not SVG — which
   is exactly why it read as "the map shows pins but never a route".
   Leaflet's panes must keep their own geometry. */
/* Per-column emphasis + size controls in the ⚙ menu (Patrick 2026-08-20). */
.ds-host .ds-view-type { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.ds-host .ds-view-type label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; font-size: 10px; }
.ds-host .ds-view-type .ds-view-px { width: 46px; padding: 1px 4px; font-size: 10px; background: var(--bg2, #1a1f28); color: var(--text, #e5e9f0); border: 1px solid var(--border, #2a3441); border-radius: 3px; }
/* POST-TRUCK BAND — shares .ds-band/.ds-field with the search row so the
   two read as one control surface; only its own bits are styled here. */
.ds-host .ds-post-note { font-size: 11px; color: var(--emr-text-subtle); padding: 4px 0; }
.ds-host .ds-post-err { flex: 1 1 100%; margin-top: 4px; font-size: 11px; color: #ef4444; }
.ds-host .ds-post-live { font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #22c55e; margin-right: 6px; }
/* Retired-search reveal — the strip's quiet footer, not a row of data. */
.ds-host .ds-stale-exp-row td { text-align: center; padding: 5px 8px; opacity: .72; }
.ds-host .ds-stale-exp-row:hover td { opacity: 1; }
/* Held-results pill (DON'T-DISRUPT-ME) */
.ds-host .ds-held-pill {
  margin-left: 10px; padding: 2px 9px; font-size: 10px; font-weight: 700; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--emr-gold, #F5A800);
  background: color-mix(in srgb, var(--emr-gold, #F5A800) 16%, transparent);
  color: var(--emr-text, #0f172a);
}
.ds-host .ds-held-pill:hover { background: color-mix(in srgb, var(--emr-gold, #F5A800) 28%, transparent); }

/* CORRIDOR SIGNAL (operator 2026-08-20) — the 3×/day market read, stacked
   on top of the detail panes so it frames the load before the numbers. */
.ds-host .ds-corridor-signal:empty { display: none; }
/* ONE box (operator 2026-08-21: "the text needs to fold in to the same
   box"): the chrome lives on the CONTAINER, so the corridor read and the
   advisory sentence share it. The advisory used to hang below as loose
   text because the border sat on .ds-sig-row alone. */
.ds-host .ds-corridor-signal { margin: 0; border: 1px solid var(--emr-border-strong, #2a2f3a); border-radius: 8px; background: var(--emr-bg, #fff); padding: 8px 10px; }
.ds-host .ds-corridor-signal:has(.ds-sig-stale) { border-style: dashed; }
.ds-host .ds-sig-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0; border: 0; background: transparent; font-size: 11.5px; }
.ds-host .ds-sig-row.ds-sig-stale { opacity: .85; }
.ds-host .ds-sig-h { font-size: 11px; font-weight: 800; letter-spacing: .07em; color: var(--emr-text-subtle); }
.ds-host .ds-sig-side { font-weight: 700; padding: 1px 8px; border-radius: 999px; border: 1px solid transparent; cursor: help; }
.ds-host .ds-sig-side b { font-weight: 800; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; opacity: .75; margin-right: 3px; }
.ds-host .ds-sig-good { color: #15803d; background: rgba(22,163,74,.14); border-color: #16a34a; }
.ds-host .ds-sig-warn { color: #b45309; background: rgba(245,158,11,.14); border-color: #f59e0b; }
.ds-host .ds-sig-bad  { color: #b91c1c; background: rgba(239,68,68,.14); border-color: #ef4444; }
.ds-host .ds-sig-none { color: var(--emr-text-subtle); background: rgba(107,114,128,.12); border-color: var(--emr-border-strong, #2a2f3a); }
.ds-host .ds-sig-nat, .ds-host .ds-sig-dir { font-size: 10px; color: var(--emr-text-dim, #94a3b8); text-transform: capitalize; }
.ds-host .ds-sig-age { margin-left: auto; font-size: 10px; color: var(--emr-text-subtle); }
.ds-host .ds-sig-line { margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--emr-border, #2a2f3a); font-size: 11px; font-weight: 600; color: var(--emr-text); line-height: 1.4; }
html[data-theme="dark"] .ds-host .ds-sig-good { color: #86efac; }
html[data-theme="dark"] .ds-host .ds-sig-warn { color: #fcd34d; }
html[data-theme="dark"] .ds-host .ds-sig-bad  { color: #fca5a5; }
/* Origin made obvious on the map */
.ds-host .ds-map-pu { display: flex; align-items: center; justify-content: center; }
.ds-host .ds-map-pu .ds-pu-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--emr-gold, #F5A800); border: 2px solid #fff; box-shadow: 0 0 0 3px rgba(255,183,10,.35); }
.ds-host .ds-map-pu .ds-pu-tag,
.ds-host .ds-map-del .ds-del-tag { position: absolute; top: -13px; font-size: 8px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; color: var(--emr-text, #0f172a); background: var(--emr-bg, #fff); border-radius: 3px; padding: 0 3px; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
/* Delivery end mirrors the pickup pin — same shape, red instead of gold,
   so the two ends of the lane are told apart by colour, not by squinting. */
.ds-host .ds-map-del { display: flex; align-items: center; justify-content: center; }
.ds-host .ds-map-del .ds-del-dot { width: 11px; height: 11px; border-radius: 50%; background: #ef4444; border: 2px solid #fff; box-shadow: 0 0 0 3px rgba(239,68,68,.35); }

/* COLUMN RESIZE (operator 2026-08-20) — a grip per header; the colgroup
   carries the width so no <td> markup changes. */
/* NOT `position: relative` — that silently beat the `position: sticky`
   rule above (later, same specificity) and the column header stopped
   locking on scroll (Patrick, 2026-08-20: "this bar to stay while
   scrolling down not to disappear"). Sticky is itself a positioned
   element, so it anchors the grip just as well. */
.ds-host table.ds-grid thead th { position: sticky; top: 0; z-index: 3; }
.ds-host .ds-col-grip { position: absolute; top: 0; right: 0; width: 7px; height: 100%; cursor: col-resize; user-select: none; touch-action: none; }
.ds-host .ds-col-grip:hover { background: linear-gradient(to right, transparent, var(--emr-gold, #F5A800)); opacity: .55; }
body.ds-col-resizing { cursor: col-resize; user-select: none; }
body.ds-col-resizing .ds-host table.ds-grid { user-select: none; }
/* DRAG TO SWAP (2026-08-21): the carried header dims; the gold edge on a
   neighbour is the landing site. touch-action:none lets pointer capture
   own the gesture on touch screens too. */
.ds-host table.ds-grid thead th[data-col] { touch-action: none; }
body.ds-col-dragging { cursor: grabbing; user-select: none; }
.ds-host table.ds-grid thead th.ds-th-dragging { opacity: .45; }
.ds-host table.ds-grid thead th.ds-th-drop-before { box-shadow: inset 3px 0 0 var(--emr-gold, #F5A800); }
.ds-host table.ds-grid thead th.ds-th-drop-after { box-shadow: inset -3px 0 0 var(--emr-gold, #F5A800); }
/* With fixed layout the cells must clip rather than force the table wider. */
.ds-host table.ds-grid[style*="fixed"] td { overflow: hidden; text-overflow: ellipsis; }

/* CORRIDOR + COMMENTS BAND (operator 2026-08-20: side by side, not stacked).
   Equal fluid tracks; either alone fills the row; stacks under 900px. */
.ds-host .ds-detail-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: stretch; margin-bottom: 12px; }
.ds-host .ds-detail-band > * { min-width: 0; }
/* Matching chrome on both band boxes — the comments used to float as
   bare text beside the bordered corridor box. */
.ds-host .ds-detail-band .ds-detail-comments { flex: none; margin-bottom: 0; border: 1px solid var(--emr-border-strong, #2a2f3a); border-radius: 8px; background: var(--emr-bg, #fff); padding: 8px 10px; }
@media (max-width: 900px) { .ds-host .ds-detail-band { grid-template-columns: 1fr; } }

/* ══ SIGNAL CARD TYPOGRAPHY (2026-08-21) ═════════════════════════════
   The sticky "verdict bar" is retired — its segments now render as the
   SIGNALS zone's card stack (layout rules with the zone styles above;
   the ds-vb-* markup names carry over unchanged). What follows is the
   type system the cards share: label / hero / sub / equation / kv. */
.ds-host .ds-vb-lab {
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--emr-text-subtle); white-space: nowrap;
}
/* Hero: the one number the decision turns on. */
.ds-host .ds-vb-hero {
  position: relative; font-size: 30px; font-weight: 600; line-height: 1.05;
  font-variant-numeric: tabular-nums; cursor: default; outline: none;
}
.ds-host .ds-vb-sub, .ds-host .ds-vb-eq { font-variant-numeric: tabular-nums; }
.ds-host .ds-vb-sub { font-size: 12px; color: var(--emr-text-subtle); white-space: nowrap; }
.ds-host .ds-vb-eq { font-size: 12px; color: var(--emr-text-subtle); white-space: nowrap; }
.ds-host .ds-vb-eq i { font-style: normal; opacity: .7; margin: 0 3px 0 1px; }
.ds-host .ds-vb-val { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ds-host .ds-vb-none { color: var(--emr-text-subtle); font-weight: 400; }
/* Stacked figures right-align so decimal points line up. */
.ds-host .ds-vb-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; font-variant-numeric: tabular-nums; }
.ds-host .ds-vb-kv > span { color: var(--emr-text-subtle); }
.ds-host .ds-vb-kv > b { text-align: right; }
/* ONE status colour across hero, chip and corridor delta.
   vb-pos = profitable with NO corridor benchmark (the legacy teal of
   ds-ins-net.pos) — distinct from vb-good, which means at/above target. */
.ds-host .vb-good { color: #22c55e; }
.ds-host .vb-warn { color: #f59e0b; }
.ds-host .vb-bad  { color: #ef4444; }
.ds-host .vb-pos  { color: var(--status-completed, var(--emr-status-green)); }
/* Audit detail on hover/focus of the number — present, not in the way. */
.ds-host .ds-vb-audit {
  position: absolute; left: 0; top: 100%; z-index: 40; display: none;
  flex-wrap: wrap; gap: 4px; width: max-content; max-width: 320px;
  padding: 7px 9px; margin-top: 4px;
  background: var(--emr-bg-elevated, #141922); color: var(--emr-text);
  border: 1px solid var(--emr-border-strong, #2a2f3a); border-radius: 6px;
  box-shadow: 0 8px 22px rgba(0,0,0,.3); font-size: 11px; font-weight: 400;
}
.ds-host .ds-vb-hero:hover .ds-vb-audit,
.ds-host .ds-vb-hero:focus-visible .ds-vb-audit { display: flex; }

/* Lazy OFFER cell — the stand-in must occupy the same box as the input it
   becomes, or rows would twitch on first click (2026-08-21). */
.ds-host .ds-offer-stub {
  display: inline-block; min-width: 54px; padding: 2px 6px;
  border: 1px dashed var(--emr-border, #2a2f3a); border-radius: 4px;
  font-size: 11px; text-align: right; font-variant-numeric: tabular-nums;
  color: var(--emr-text-subtle); cursor: text; background: transparent;
}
.ds-host .ds-offer-stub:hover, .ds-host .ds-offer-stub:focus-visible {
  border-style: solid; color: var(--emr-text); outline: none;
}

/* ⚙ View ▸ tab strip (QUOTING TAB, operator 2026-08-21) — the quoting
   settings share the Brokerage Settings form; this is just the second
   door. Styles for the form itself come from bb-settings-style. */
.ds-view-menu .ds-view-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--emr-border-strong, #2a2f3a); margin-bottom: 8px; }
.ds-view-menu .ds-view-tab { background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; padding: 6px 12px; font-size: 11px; font-weight: 700; color: var(--emr-text-subtle); cursor: pointer; font-family: inherit; }
.ds-view-menu .ds-view-tab.on { color: var(--emr-text); border-bottom-color: var(--emr-gold, #F5A800); }
.ds-view-menu [data-ds-vpane="quoting"] .ds-vq-body { display: flex; flex-direction: column; gap: 6px; padding: 2px 2px 8px; }