/* ── Quote Tracker Styles ──────────────────────────────────── */

/* Icon button (edit pencil, etc.) */
.btn-icon {
  background: none;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  color: var(--arl-text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 8px;
  margin-left: 6px;
  transition: color 0.15s, border-color 0.15s;
}
.btn-icon:hover { color: var(--arl-primary); border-color: var(--arl-primary); }

/* Outline button: the kit's secondary look, white with a grey edge ("One FORGE look" step 3).
   Its size comes from .btn and .btn-sm, which every outline button also carries. It still
   lives here, where it always has, so the cascade around it does not move. */
.btn-outline {
  background: var(--fk-surface);
  border: 1px solid var(--fk-line);
  color: var(--fk-ink);
  box-shadow: var(--fk-shadow-xs);
  margin-left: 6px;
}
/* A pressed toggle (aria-pressed) keeps its own blue look under the pointer. */
.btn-outline:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--fk-canvas); color: var(--fk-ink); }

/* Customer search results */
.qt-customer-results {
  max-height: 300px;
  overflow-y: auto;
  margin-top: 8px;
}
.qt-customer-row {
  padding: 10px 12px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.qt-customer-row:hover {
  border-color: var(--arl-primary);
  background: rgba(0,96,175,0.04);
}
.qt-customer-row-name {
  font-family: var(--arl-font-accent);
  font-weight: 700;
  font-size: 14px;
  color: var(--arl-text);
}
.qt-customer-row-meta {
  font-size: 12px;
  color: var(--arl-text-muted);
  margin-top: 2px;
}
/* Link-customer modal: contextual suggestion section */
.qt-customer-suggest-head {
  font-family: var(--arl-font-accent);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--arl-text-muted);
  margin: 12px 0 6px;
}
.qt-customer-suggest-head:first-child { margin-top: 0; }
.qt-customer-row--suggested {
  border-left: 3px solid var(--arl-primary);
  background: rgba(0, 96, 175, 0.03);
}
.qt-customer-tier {
  display: inline-block;
  font-family: var(--arl-font-accent);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 10px;
  margin-left: 6px;
  vertical-align: middle;
}
.qt-tier-exact { background: var(--arl-success); color: #fff; }
.qt-tier-strong { background: var(--arl-primary); color: #fff; }
.qt-tier-weak { background: var(--arl-border); color: var(--arl-text-secondary); }

/* Sibling quotes banner (multi-lane) */
.qt-sibling-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: rgba(0,96,175,0.06);
  border: 1px solid rgba(0,96,175,0.15);
  border-radius: var(--arl-radius);
  margin-bottom: 16px;
}
.qt-sibling-label {
  font-family: var(--arl-font-accent);
  font-size: 12px;
  font-weight: 600;
  color: var(--arl-text-muted);
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.qt-sibling-nav {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  overflow-x: auto;
}
.qt-sibling-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--arl-border);
  background: var(--arl-white);
  color: var(--arl-text-muted);
  font-family: var(--arl-font-accent);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
}
.qt-sibling-link:hover {
  border-color: var(--arl-primary);
  color: var(--arl-primary);
  background: rgba(0,96,175,0.06);
}
.qt-sibling-link.active {
  background: var(--arl-primary);
  color: var(--arl-white);
  border-color: var(--arl-primary);
  cursor: default;
}

/* Checkbox column */
.qt-th-check, .qt-td-check {
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  text-align: center;
  padding: 4px !important;
}
.qt-checkbox {
  cursor: pointer;
  width: 15px;
  height: 15px;
  accent-color: var(--arl-primary);
}
.qt-row.selected {
  background: rgba(0,96,175,0.06) !important;
}
.qt-row.selected:hover {
  background: rgba(0,96,175,0.10) !important;
}

/* Bulk action bar */
.qt-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--arl-white);
  border: 1px solid var(--arl-primary);
  border-radius: var(--arl-radius);
  margin-bottom: 10px;
}
.qt-bulk-bar.hidden { display: none; }
.qt-bulk-count {
  font-family: var(--arl-font-accent);
  font-size: 12px;
  font-weight: 700;
  color: var(--arl-primary);
  letter-spacing: 0.3px;
}
/* Brief flash when a selection is rejected for exceeding the bulk cap. */
.qt-bulk-count.qt-bulk-count-warn {
  color: var(--arl-danger, #c0392b);
}
/* Disabled row checkboxes at the bulk cap read as clearly non-interactive. */
.qt-checkbox:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Status dropdown */
.qt-status-dropdown {
  position: relative;
}
.qt-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 4px;
  background: var(--arl-white);
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  min-width: 160px;
  z-index: 100;
  overflow: hidden;
}
.qt-dropdown-menu.hidden { display: none; }
.qt-dropdown-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  border: none;
  background: none;
  font-family: var(--arl-font-accent);
  font-size: 12px;
  font-weight: 600;
  color: var(--arl-text);
  cursor: pointer;
  letter-spacing: 0.3px;
}
.qt-dropdown-menu button:hover {
  background: rgba(0,96,175,0.06);
  color: var(--arl-primary);
}

/* Bulk edit modal extras */
.qt-bulk-hint {
  font-size: 12px;
  color: var(--arl-text-muted);
  margin-bottom: 12px;
  padding: 6px 10px;
  background: rgba(0,96,175,0.04);
  border-radius: var(--arl-radius);
}
.qt-bulk-profile-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--arl-primary);
  color: var(--arl-white);
  border-radius: var(--arl-radius);
  font-family: var(--arl-font-accent);
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
}
.qt-bulk-profile-badge button {
  background: none;
  border: none;
  color: var(--arl-white);
  font-size: 14px;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.8;
}
.qt-bulk-profile-badge button:hover { opacity: 1; }

/* Link to Quote modal */
.qt-link-context {
  background: rgba(0,96,175,0.04);
  border-radius: var(--arl-radius);
  padding: 10px 14px;
  margin-bottom: 12px;
}
.qt-link-context-label {
  font-family: var(--arl-font-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--arl-text-muted);
  text-transform: uppercase;
  margin-top: 6px;
}
.qt-link-context-label:first-child { margin-top: 0; }
.qt-link-context-value {
  font-size: 13px;
  color: var(--arl-text);
  margin-bottom: 2px;
}
.qt-link-results {
  max-height: 300px;
  overflow-y: auto;
}
.qt-link-row {
  padding: 10px 12px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.qt-link-row:hover {
  border-color: var(--arl-primary);
  background: rgba(0,96,175,0.04);
}
.qt-link-row.selected {
  border-color: var(--arl-primary);
  background: rgba(0,96,175,0.08);
  box-shadow: 0 0 0 1px var(--arl-primary);
}
.qt-link-row-lane {
  font-family: var(--arl-font-accent);
  font-weight: 700;
  font-size: 13px;
  color: var(--arl-text);
}
.qt-link-row-meta {
  font-size: 12px;
  color: var(--arl-text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.qt-link-section-label {
  font-family: var(--arl-font-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--arl-text-muted);
  margin: 12px 0 6px;
}
.qt-link-section-label:first-child { margin-top: 0; }
.qt-link-section-exact { color: var(--arl-success, #1a7f37); }
.qt-link-row-exact {
  border-color: var(--arl-success, #1a7f37);
  background: rgba(26,127,55,0.05);
}
.qt-link-row-exact:hover {
  border-color: var(--arl-success, #1a7f37);
  background: rgba(26,127,55,0.10);
}
.qt-link-badge {
  display: inline-block;
  font-family: var(--arl-font-accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--arl-white);
  background: var(--arl-success, #1a7f37);
  border-radius: 8px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Multi-stop / round-trip badge on a linked shipment's destination. */
.qt-stop-badge {
  display: inline-block;
  font-family: var(--arl-font-accent);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--arl-white);
  background: var(--arl-primary, #2563eb);
  border-radius: 8px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
  cursor: default;
}
.qt-stop-badge-round {
  background: var(--arl-accent, #b45309);
}

/* Linked shipments table */
.qt-shipment-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--arl-primary);
  color: var(--arl-white);
  font-family: var(--arl-font-accent);
  font-size: 11px;
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  padding: 0 6px;
  margin-left: 8px;
  vertical-align: middle;
}
.qt-shipments-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.qt-shipments-table th {
  font-family: var(--arl-font-accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--arl-text-muted);
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--arl-border);
}
.qt-shipments-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  color: var(--arl-text);
}
.qt-shipments-table a {
  color: var(--arl-primary);
  text-decoration: none;
  font-weight: 600;
}
.qt-shipments-table a:hover { text-decoration: underline; }

/* Lane intelligence inline filters */
.qt-lane-filters {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 2px 0 10px;
  border-bottom: 1px solid var(--arl-border);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.qt-lane-filter-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.qt-lane-filter-group label {
  font-family: var(--arl-font-accent);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--arl-text-muted);
}
.qt-lane-filter-group select,
.qt-lane-filter-group input[type="number"] {
  font-family: var(--arl-font-body);
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  background: var(--arl-bg-card);
  color: var(--arl-text);
}
.qt-lane-filter-group select { min-width: 130px; }
.qt-lane-radius-input {
  display: flex;
  align-items: center;
  gap: 4px;
}
.qt-lane-radius-input input[type="number"] {
  width: 60px;
  text-align: center;
}
.qt-lane-radius-input span {
  font-size: 12px;
  color: var(--arl-text-muted);
}
.qt-lane-refresh {
  align-self: flex-end;
  margin-bottom: 1px;
}

/* Import dropzone */
.qt-import-dropzone {
  border: 2px dashed var(--arl-border);
  border-radius: var(--arl-radius-lg);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.qt-import-dropzone:hover,
.qt-import-dragover {
  border-color: var(--arl-primary);
  background: rgba(0,96,175,0.03);
}

.qt-import-dropzone-content p {
  margin: 10px 0 4px;
  font-size: 0.9rem;
  color: var(--arl-text-secondary);
}

.qt-import-dropzone-content a {
  color: var(--arl-primary);
  font-weight: 600;
  text-decoration: none;
}

.qt-import-dropzone-content a:hover {
  text-decoration: underline;
}

/* Sortable columns */
.qt-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.qt-sortable:hover {
  color: var(--arl-primary);
}

.qt-sorted {
  color: var(--arl-primary);
}

.qt-sort-icon {
  font-size: 0.7rem;
  opacity: 0.7;
}

/* Inline editing */
.qt-inline-input {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--arl-primary);
  border-radius: var(--arl-radius);
  font-size: 0.85rem;
  font-family: var(--arl-font-body);
  background: var(--arl-white);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,96,175,0.15);
}

.qt-cell-bdr {
  cursor: text;
  min-width: 140px;
}

.qt-cell-bdr:hover {
  background: rgba(0,96,175,0.05);
  border-radius: 3px;
}

/* Editable detail fields */
.qt-field-editable span {
  cursor: text;
  padding: 2px 4px;
  border-radius: 3px;
  transition: background 0.15s;
}

.qt-field-editable span:hover {
  background: rgba(0,96,175,0.06);
}

.qt-field-editable .qt-edit-row {
  display: flex;
  gap: 6px;
  align-items: center;
  width: 100%;
}

.qt-field-editable .qt-inline-input {
  flex: 1;
  min-width: 0;
}

.qt-field-editable .qt-inline-input.qt-input-city { flex: 3; }
.qt-field-editable .qt-inline-input.qt-input-state { flex: 1; max-width: 50px; text-transform: uppercase; }
.qt-field-editable .qt-inline-input.qt-input-zip { flex: 1.5; max-width: 70px; }

/* Queue View */
.qt-queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}

.qt-queue-header h2 {
  font-family: var(--arl-font-heading);
  text-transform: uppercase;
  font-size: 1.3rem;
  margin: 0;
}

.qt-queue-count {
  font-family: var(--arl-font-body);
  font-size: 0.85rem;
  color: var(--arl-text-secondary);
}

/* Filter Tabs: the kit's tabs (.fk-tab in forge-kit.css). The bar scrolls sideways, and a
   scroller clips what hangs below it, so the line is drawn inside the bar (an inset
   shadow) and the active tab's underline sits on it rather than below it. Drawn as a
   border it was clipped, and no tab showed which one was on. */
.qt-filter-bar {
  display: flex;
  gap: 22px;
  margin-bottom: 16px;
  box-shadow: inset 0 -1px 0 var(--fk-line);
  padding-bottom: 0;
  overflow-x: auto;
}
/* Right-aligned action group in the filter bar — Clear filters (#108) + Clean
   Up Orphan Wins. margin-left:auto pushes the group to the far right; the group
   stays intact whether one or both buttons are visible. */
.qt-filter-bar-actions { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; flex-shrink: 0; }

/* ── Hide inboxes (feedback #130) ─────────────────────────────────────────── */
/* Anchored in the queue HEADER, not the filter bar: that bar is `overflow-x: auto`,
   which forces overflow-y to auto as well, and a 340px panel hanging off a 40px
   scroll box gets clipped. */
.qt-hide-inboxes { position: relative; flex-shrink: 0; }
.qt-hide-inboxes > summary {
  cursor: pointer; list-style: none; white-space: nowrap;
  font-size: 0.78rem; padding: 4px 10px; border-radius: var(--arl-radius);
  border: 1px solid var(--arl-border); background: var(--arl-white);
  color: var(--arl-text-secondary);
}
.qt-hide-inboxes > summary::-webkit-details-marker { display: none; }
.qt-hide-inboxes > summary:hover { border-color: var(--arl-primary); color: var(--arl-primary-dark); }
/* An active filter must be visible with the panel CLOSED, or rows go missing with
   no on-screen reason — the class of confusion #123 and #135 both came from. */
.qt-hide-inboxes.is-active > summary {
  border-color: var(--arl-primary); background: var(--arl-primary); color: var(--arl-text-on-dark); font-weight: 600;
}
/* On the header band the closed menu reads like the band's other buttons: the kit's glass,
   white words ("One FORGE look" step 3). An active filter keeps its blue. */
main .module-band .qt-hide-inboxes > summary {
  background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); color: var(--fk-white);
  font-family: var(--fk-font-ui); font-size: var(--fk-type-sm); font-weight: 600;
  padding: 6px 11px; border-radius: var(--fk-radius-md);
}
main .module-band .qt-hide-inboxes > summary:hover { background: rgba(255, 255, 255, 0.14); color: var(--fk-white); }
main .module-band .qt-hide-inboxes.is-active > summary { background: var(--fk-blue-600); border-color: var(--fk-blue-600); color: var(--fk-white); }
/* The scroll region is the LIST, not the panel. With `overflow-y: auto` on the
   panel itself, the help text scrolled away and — worse — Done and the
   unfilterable note sat below the fold behind 33 identities, which is the same
   place Derek already failed to find a button ("you cannot ... hit apply
   anywhere"). A fix for a discoverability complaint must not need scrolling to
   discover. Panel is a flex column so the list takes the slack and the note +
   actions stay pinned as its last rows. */
.qt-hide-inboxes-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  width: 320px; max-height: 60vh;
  display: flex; flex-direction: column;
  background: var(--arl-white); border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius-lg); box-shadow: var(--arl-shadow-lg); padding: 12px;
  /* Its own ink beside its own white (#321): it opens out of the dark header band, which
     colours everything in it near-white, and a colour inherited from the band read white on
     white here (names and shared inboxes) from #596 (2026-10-20). */
  color: var(--fk-ink);
}
.qt-hide-inboxes-help { font-size: 0.72rem; color: var(--arl-text-muted); margin: 0 0 8px; line-height: 1.4; }
/* The filter's blind spot, stated. A quote with no rep and no recorded inbox
   cannot be hidden by anything in this list, and silence about that is what made
   the whole control read as broken (#130 reopened). */
.qt-hide-inboxes-note {
  font-size: 0.72rem; line-height: 1.4; margin: 0 0 10px;
  padding: 6px 8px; border-radius: 4px;
  color: var(--arl-text-secondary); background: var(--arl-surface-light);
  border-left: 2px solid var(--arl-border);
}
/* Done sits opposite "Show all again" — the panel is a dropdown, and a dropdown
   needs a way out that is not "click the summary again". */
.qt-hide-inboxes-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* min-height:0 is load-bearing: a flex item will not shrink below its content
   without it, so the list would push Done out of the panel instead of scrolling. */
.qt-hide-inboxes-list {
  display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px;
  overflow-y: auto; min-height: 0; flex: 1 1 auto;
}
/* Never scroll away — they are the two things the reopen said were unreachable. */
.qt-hide-inboxes-note, .qt-hide-inboxes-actions { flex: 0 0 auto; }
.qt-hide-inbox-row {
  display: flex; align-items: center; gap: 8px; padding: 4px 6px;
  border-radius: 4px; font-size: 0.78rem; cursor: pointer;
}
.qt-hide-inbox-row:hover { background: var(--arl-surface-light); }
.qt-hide-inbox-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-hide-inboxes-addr { color: var(--arl-text-muted); font-size: 0.7rem; }
/* The switch (#323) under the list: pinned like the note and the actions, so it never scrolls
   away behind 60 identities, with a rule above it because it hides by the office that ran the
   load, not by a person. Its line under the label wraps; a person's row stays one line. */
.qt-hide-agent-office {
  flex: 0 0 auto; margin-bottom: 10px; padding-top: 8px;
  border-top: 1px solid var(--arl-border); border-radius: 0;
}
.qt-hide-agent-office .qt-hide-inbox-name { white-space: normal; }
.qt-hide-agent-office-why { display: block; }
.qt-hide-inbox-count {
  flex: none; font-variant-numeric: tabular-nums; font-size: 0.7rem;
  color: var(--arl-text-muted); background: var(--arl-surface); border-radius: 999px; padding: 1px 7px;
}
/* The panel is a light surface inside the dark header band (#321). The band turns its outline
   buttons to glass (styles.css, main .module-band .btn-outline), which on this white panel made
   "Show all again" white on white from #596 (2026-10-20): one stray click cleared the list
   unseen. Here it keeps the outline button's light look and hover, the same tokens as
   .btn-outline above, in a rule that outranks the band's. */
main .module-band .qt-hide-inboxes-menu .btn-outline {
  background: var(--fk-surface); border-color: var(--fk-line); color: var(--fk-ink); box-shadow: var(--fk-shadow-xs);
}
main .module-band .qt-hide-inboxes-menu .btn-outline:hover:not(:disabled) { background: var(--fk-canvas); color: var(--fk-ink); }

.qt-filter-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 0 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-md);
  font-weight: 600;
  color: var(--fk-ink-2);
  cursor: pointer;
  white-space: nowrap;
}

.qt-filter-tab:hover {
  color: var(--fk-ink);
}
.qt-filter-tab:focus-visible { outline: none; box-shadow: var(--fk-focus-ring); border-radius: var(--fk-radius-sm); }

.qt-filter-tab.active {
  color: var(--fk-ink);
  border-bottom-color: var(--fk-blue-600);
}

/* Queue Table */
.qt-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--arl-font-body);
  font-size: 0.85rem;

  /* Height of the column-label row, FORCED rather than measured, so the filter
     row's sticky offset below can be expressed in CSS. Paired with the
     `height` + `box-sizing` rule on that row — change one and change both.
     (Same device as .qt-cust-hist-scroll, which pins 31px for a denser table.) */
  --qt-th-h: 37px;
}

/* Both header rows stay put while the list scrolls (feedback #123).
 *
 * This rule ALREADY said `position: sticky; top: 0` and still looked broken, for
 * two compounding reasons:
 *
 *  1. `top: 0` is the top of the VIEWPORT — the page is what scrolls here (`main`
 *     has no height or overflow of its own) — and the app header is sticky there
 *     at z-index 100. So the header stuck perfectly, underneath the black bar,
 *     at z-index 1. Hence --app-content-top and a z-index above the rows.
 *
 *  2. thead held TWO rows, both <th>, so both matched this selector and stuck at
 *     `top: 0`, one on top of the other: a second pinned row needs an offset of its
 *     own. Since "One FORGE look" step 4 (2026-10-29) the Quotes list pins one row, its
 *     filters having moved to the filter bar above it.
 *
 * z-index 20: above tbody, below the app header (100) and modals (200), so a
 * pinned header can never cover a dialog.
 */
.qt-table thead th {
  background: var(--arl-surface);
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--arl-text-secondary);
  position: sticky;
  top: var(--app-content-top);
  z-index: 20;
  /* box-shadow, not border-bottom: with `border-collapse: collapse` the bottom
     border is shared with the row below and paints with THAT row, so it slides
     away from a pinned header. A shadow belongs to this cell and travels with it. */
  box-shadow: 0 2px 0 var(--arl-border);
}

.qt-table thead tr:first-child th {
  height: var(--qt-th-h);
  box-sizing: border-box;
}

/* ── The Quotes list, folded ("One FORGE look" step 4, 2026-10-29) ─────────────────────
   Eight columns where there were eighteen, so it fits a 1280px laptop (Keith: "Fold the
   money"). One white card holds the status tabs, the filter bar and the table. Its single
   row of headings stays pinned (the .qt-table thead th rule above), each naming the parts
   of its cell, and each part is a sort button. The widths are fixed, the customer and the
   lane share the rest, and a phone scrolls the table sideways in its own box. */
.qt-list-card { margin-bottom: 12px; }
.qt-list-card .qt-filter-bar { margin-bottom: 0; padding: 0 14px; }
.qt-list-card .qt-bulk-bar { margin: 10px 14px; }
.qt-filterbar .fk-search { width: 220px; }
.qt-filterbar .fk-filter input { width: 7ch; }
.qt-filterbar .fk-filter input.qt-filter-state { width: 3.2em; }

.qt-table.qt-quotes-list {
  --qt-th-h: 46px;
  table-layout: fixed;
  min-width: 920px;
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-sm);
}
.qt-quotes-list col.qt-c-check { width: 34px; }
.qt-quotes-list col.qt-c-quote { width: 80px; }
.qt-quotes-list col.qt-c-status { width: 112px; }
.qt-quotes-list col.qt-c-money { width: 158px; }
.qt-quotes-list col.qt-c-bdr { width: 50px; }

.qt-quotes-list thead th {
  padding: 6px 10px;
  vertical-align: top;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-xs);
  color: var(--fk-ink-2);
  background: var(--fk-gray-50);
  box-shadow: 0 1px 0 var(--fk-line);
}
.qt-th-title { display: block; font-weight: 600; color: var(--fk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qt-th-parts { display: block; margin-top: 2px; font-weight: 500; color: var(--fk-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qt-th-parts .fk-sort-btn { color: var(--fk-ink-2); }
.qt-quotes-list thead .fk-sort-btn.is-sorted { color: var(--fk-link); }

.qt-quotes-list tbody td { padding: 7px 10px; }
/* A cell's first line and the line under it. Each clips with an ellipsis, except while a
   part of it is being edited in place, when the editor needs the room. */
.qt-quotes-list .qt-line { display: flex; align-items: baseline; gap: 4px; min-width: 0; white-space: nowrap; overflow: hidden; }
.qt-quotes-list .qt-sub { display: block; margin-top: 2px; font-size: var(--fk-type-xs); color: var(--fk-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qt-quotes-list :is(.qt-line, .qt-sub):has(input, select, .qt-loc-editing) { overflow: visible; }
.qt-quotes-list .qt-sub-unassigned { font-style: italic; }
.qt-quotes-list .qt-sub-label { margin-right: 4px; }
.qt-quotes-list .qt-sub-sep { margin: 0 6px; }
.qt-quotes-list .qt-part { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; border-radius: var(--fk-radius-sm); }
.qt-quotes-list .qt-arrow { flex: none; color: var(--fk-ink-3); }
.qt-quotes-list .qt-cell-editable:has(> input, > select) { display: block; flex: 1; min-width: 72px; }

.qt-quotes-list .qt-col-quote .qt-cell-qnum { display: block; color: var(--fk-ink); }
.qt-quotes-list .qt-col-customer .qt-customer-link { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A duplicate or review flag wraps under the status chip rather than off the column. */
.qt-quotes-list .qt-col-status :is(.qt-dup-pill, .qt-review-badge) { margin: 3px 0 0; }

/* The lane's ends edit in place: the city, state and ZIP boxes open over the cell. */
.qt-quotes-list td.qt-col-lane { position: relative; }
.qt-quotes-list .qt-col-lane .qt-loc-editing {
  position: absolute;
  top: 4px;
  left: 6px;
  z-index: 5;
  display: block;
  width: 270px;
  max-width: none;
  padding: 4px;
  background: var(--fk-surface);
  border-radius: var(--fk-radius-md);
  box-shadow: var(--fk-shadow-lg);
}

/* The money: the sell, its margin on the right, and under them the buy and the count. Each
   part keeps its cell helper's class (the margin's colour, a live estimate's "~" and italic,
   a moving load dimmed); only the column-level dressing is undone here. */
/* The first line: the price and the count on the left, the margin on the right. The count
   gives way first when the line is short, so the price and the margin are never cut. */
.qt-quotes-list tbody td.qt-col-money { padding-left: 8px; padding-right: 8px; }
.qt-quotes-list .qt-col-money .qt-line > :is(.qt-cell-rate, .qt-cell-margin) { flex: none; }
.qt-quotes-list .qt-col-money .qt-line > .qt-cell-margin { margin-left: auto; }
.qt-quotes-list .qt-count { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fk-type-xs); color: var(--fk-ink-3); }
.qt-quotes-list .qt-count .qt-sub-sep { margin: 0 4px 0 0; }
.qt-quotes-list .qt-unknown { color: var(--fk-ink-3); }
.qt-quotes-list .qt-none { color: var(--fk-ink-3); font-size: var(--fk-type-xs); }
.qt-quotes-list .qt-col-money span.qt-group-start { border-left: 0; }
.qt-quotes-list .qt-col-money .qt-cell-rate,
.qt-quotes-list .qt-col-money .qt-cell-margin { font-family: var(--fk-font-ui); }
.qt-quotes-list .qt-col-money .qt-sub .qt-cell-rate { font-weight: 500; }
.qt-quotes-list .qt-col-money .qt-not-quoted { display: inline; margin-left: 4px; }
.qt-quotes-list .qt-col-money .fk-chip { height: 18px; padding: 0 7px; }
/* Room for every part: the rate tool's badge in normal case, and a changed price marked by its
   arrow alone, the first price in its tooltip (qtRenegBadge's title says it in full). */
.qt-quotes-list .qt-col-money .qt-src-badge { margin-left: 3px; padding: 1px 4px; text-transform: none; letter-spacing: 0; }
.qt-quotes-list .qt-col-money .qt-reneg { width: 1.6em; margin-left: 3px; padding: 1px 3px; overflow: hidden; white-space: nowrap; text-overflow: clip; vertical-align: baseline; cursor: help; }
.qt-quotes-list .qt-col-money .qt-proxy-chip { margin-left: 3px; }

/* The BDR, by initials; the picker opens over the row, wide enough to search. */
.qt-quotes-list td.qt-col-bdr { position: relative; text-align: center; }
.qt-quotes-list .qt-col-bdr .fk-avatar { margin-right: 0; }
.qt-quotes-list .qt-col-bdr .qt-bdr { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-quotes-list .qt-col-bdr .qt-bdr:has(.up-picker) {
  position: absolute;
  top: 50%;
  right: 6px;
  z-index: 6;
  width: 230px;
  overflow: visible;
  transform: translateY(-50%);
  text-align: left;
}

/* Where each group starts, down the whole column. */
.qt-table .qt-group-start {
  border-left: 1px solid var(--fk-line);
}

/* TAI's numbers on a load that is still moving can change: dimmed + italic, the
   .qt-buy-live device, so the margin colour still reads through. */
.qt-tai-open {
  opacity: 0.6;
  font-style: italic;
}
/* "not quoted" under a Quoted Sell dash; "N delivered" under Loads Booked. */
.qt-not-quoted,
.qt-loads-sub {
  display: block;
  font-size: var(--fk-type-xs);
  font-weight: 400;
  font-family: var(--fk-font-ui);
  color: var(--fk-ink-3);
  white-space: nowrap;
}
.qt-cell-loads {
  text-align: center;
}
/* The quote number (2026-10-27): Q + a running count, read and said aloud, so its digits
   line up and it never wraps. On the quote page it sits first on the dark band. */
.qt-cell-qnum {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
  color: var(--fk-ink-2);
}
.qt-filter-qnum {
  width: 72px;
}
.qt-quote-number {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin-right: 8px;
}
main .module-band .qt-quote-number {
  color: var(--fk-white);
}
/* Loads in TAI, on the quote page: money right-aligned, a canceled load greyed (its row
   says Canceled and "not counted"), and the one-line note under the table. */
.qt-tai-loads .qt-num {
  text-align: right;
  white-space: nowrap;
}
.qt-tai-loads tr.qt-tai-canceled td {
  color: var(--fk-ink-3);
}
.qt-tai-loads-note {
  margin: 8px 0 0;
  font-size: var(--fk-type-xs);
  color: var(--fk-ink-2);
}

.qt-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--arl-border);
  vertical-align: middle;
}

.qt-row {
  transition: background 0.1s;
}

.qt-row:hover {
  background: var(--arl-surface-light);
}

.qt-cell-customer {
  font-weight: 600;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A customer's name in a list: bold, and underlined only under the pointer ("One FORGE
   look" step 4). The dashed underline on every name read as a page of links. */
.qt-customer-link {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.qt-customer-link:hover {
  color: var(--fk-link);
  text-decoration: underline;
}

.qt-filter-input {
  width: 100%;
  padding: 3px 6px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  font-size: 0.75rem;
  font-family: var(--arl-font-body);
  background: var(--arl-white);
  outline: none;
  box-sizing: border-box;
}
.qt-filter-input:focus {
  border-color: var(--arl-primary);
  box-shadow: 0 0 0 2px rgba(0,96,175,0.12);
}
select.qt-filter-input {
  padding: 3px 2px;
}
/* Origin/Destination filter: city box (substring) + a narrow state box that
   matches the 2-char state code EXACTLY (feedback #84). */
.qt-loc-filter { display: flex; gap: 4px; align-items: center; }
.qt-loc-filter .qt-filter-input { min-width: 0; } /* let the city box shrink in the flex row */
.qt-filter-state { flex: 0 0 auto; width: 3.2em; text-align: center; text-transform: uppercase; }
.qt-filter-state::placeholder { text-transform: none; }

/* Editable queue cells */
.qt-cell-editable {
  cursor: text;
  position: relative;
}
.qt-cell-editable:hover {
  background: rgba(0,96,175,0.05);
}

/* Location inline edit row */
.qt-loc-edit-row {
  display: flex;
  gap: 4px;
}
.qt-loc-city { flex: 3; min-width: 0; }
.qt-loc-state { flex: 1; min-width: 0; max-width: 36px; text-transform: uppercase; }
.qt-loc-zip { flex: 1; min-width: 0; max-width: 52px; }

.qt-cell-rate {
  font-weight: 600;
  font-family: var(--arl-font-accent);
}

/* Queue Buy / Est Margin % / Tool columns (#63) */
.qt-cell-margin {
  text-align: right;
  font-weight: 600;
  font-family: var(--arl-font-accent);
  font-variant-numeric: tabular-nums;
}
.qt-margin-neg { color: #b91c1c; }   /* selling below buy */
.qt-margin-low { color: #b45309; }   /* thin margin (<10%) */
.qt-margin-high { color: #15803d; }  /* unusually high (≥25%) */
.qt-cell-tool { text-align: center; }
.qt-cell-tool .qt-src-badge { margin-left: 0; }

/* A buy the rate tools produced but nobody has frozen onto the quote yet (#120).
   Dimmed + italic rather than a fixed color, so it stays legible whatever the
   surrounding text color is. The leading "~" in the cell is the primary signal;
   this is the reinforcement. */
.qt-buy-live {
  opacity: 0.75;
  font-style: italic;
  font-weight: 500;
}
/* …but NOT on the margin cell. Its red/amber/green band is the whole point of
   that column (#63), and dimming the -12% red drops it to ~3.4:1 against the
   page — under WCAG AA. Italic alone marks it as provisional there; the "~" on
   the Buy cell right beside it carries the rest. */
.qt-cell-margin.qt-buy-live { opacity: 1; }

.qt-empty {
  text-align: center;
  padding: 32px;
  color: var(--arl-text-muted);
  font-style: italic;
}

.qt-loading {
  text-align: center;
  padding: 24px;
  color: var(--arl-text-secondary);
}

/* Status chips: the kit's chip (.fk-chip in forge-kit.css), with a dot because each one is
   a state. */
.qt-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px;
  border-radius: var(--fk-radius-pill);
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.qt-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* One meaning per state. Identified waits on a person like Needs Customer: it has no rate
   yet, and the amber is how a BDR finds what still needs one. Ignored is dismissed, so it
   is parked with Expired. */
.qt-status-needs_customer,
.qt-status-identified { color: var(--fk-attention); background: var(--fk-attention-bg); box-shadow: inset 0 0 0 1px var(--fk-attention-line); }
.qt-status-quoted { color: var(--fk-moving); background: var(--fk-moving-bg); box-shadow: inset 0 0 0 1px var(--fk-moving-line); }
.qt-status-won { color: var(--fk-done); background: var(--fk-done-bg); box-shadow: inset 0 0 0 1px var(--fk-done-line); }
.qt-status-lost,
.qt-status-parse_failed { color: var(--fk-broken); background: var(--fk-broken-bg); box-shadow: inset 0 0 0 1px var(--fk-broken-line); }
.qt-status-expired,
.qt-status-ignored,
.qt-status-canceled { color: var(--fk-parked); background: var(--fk-parked-bg); box-shadow: inset 0 0 0 1px var(--fk-parked-line); }
/* #276: a win whose TAI load was canceled. Parked, because it is neither a loss nor a
   lapse, and its edge is dashed so it is not read as Expired. outline, not border: a
   border would make this chip 2px taller than every other one in the column. */
.qt-status-canceled {
  box-shadow: none;
  outline: 1px dashed var(--fk-gray-400);
  outline-offset: -1px;
}

/* "Needs Customer" filter tab — flag for attention without screaming.
   Count shown next to the Needs Customer, Parse Failed and Review tabs when there are rows:
   the kit's count (.fk-count). The count carries the flag, not the word: amber for rows
   waiting on a person, red for Parse Failed, where something broke. With no rows the count
   hides and the tab is a plain tab. */
.qt-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--fk-radius-pill);
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-xs);
  font-weight: 700;
  line-height: 1;
  background: var(--fk-gray-150);
  color: var(--fk-ink);
}
.qt-filter-tab-attention .qt-tab-count { background: var(--fk-attention-bg); color: var(--fk-attention); box-shadow: inset 0 0 0 1px var(--fk-attention-line); }
.qt-filter-tab[data-filter="parse_failed"] .qt-tab-count { background: var(--fk-red-600); color: var(--fk-white); box-shadow: none; }
.qt-tab-count.hidden { display: none; }
/* Parse Failed tab hides entirely when its count is 0 (empty most of the time) */
.qt-filter-tab.hidden { display: none; }

/* Detail-view banner that mirrors load-builder's Needs Customer state */
.qt-needs-customer-banner {
  background: #FFF7ED;
  border: 1px solid #FED7AA;
  border-left: 4px solid #C2410C;
  padding: 12px 16px;
  margin: 12px 0;
  border-radius: 4px;
  color: #7C2D12;
  font-size: 0.9rem;
}
.qt-needs-customer-banner strong { color: #C2410C; }
.qt-needs-customer-banner .sender-email {
  font-style: italic;
  color: #92400E;
}

/* Inline profile-match suggestion banner (unlinked quotes / unmatched wins) */
.qt-suggest-banner {
  background: #EFF6FF;
  border: 1px solid #BFDBFE;
  border-left: 4px solid var(--arl-primary);
  padding: 12px 16px;
  margin: 12px 0;
  border-radius: 4px;
}
.qt-suggest-banner-head {
  font-family: var(--arl-font-accent);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--arl-text);
  margin-bottom: 8px;
}
.qt-suggest-banner-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0;
}
.qt-suggest-banner-row + .qt-suggest-banner-row { border-top: 1px solid #DBEAFE; }
.qt-suggest-banner-name {
  font-family: var(--arl-font-accent);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--arl-text);
}
.qt-suggest-banner-reason {
  font-size: 0.8rem;
  color: var(--arl-text-muted);
  flex: 1;
  min-width: 120px;
}
.qt-suggest-banner-row .btn { margin-left: auto; }
.qt-suggest-banner-foot {
  font-size: 0.8rem;
  color: var(--arl-text-secondary);
  margin-top: 8px;
}

/* Detail-view banner for a parse_failed quote (AI outage), mirrors load-builder */
.qt-parse-failed-banner {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-left: 4px solid #B91C1C;
  padding: 12px 16px;
  margin: 12px 0;
  border-radius: 4px;
  color: #7F1D1D;
  font-size: 0.9rem;
}
.qt-parse-failed-banner strong { color: #B91C1C; }
.qt-parse-failed-banner .sender-email {
  font-style: italic;
  color: #991B1B;
}
.qt-parse-failed-reason {
  margin: 6px 0;
  font-family: ui-monospace, monospace;
  font-size: 0.82rem;
  color: #991B1B;
}

/* Detail View */
/* The quote page opens under the header band (#qt-detail-view in index.html). The
   customer's name in its title links to their page. */
.qt-detail-band-link { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(255, 255, 255, 0.45); }
.qt-detail-band-link:hover { border-bottom-style: solid; border-bottom-color: var(--fk-white); }

.qt-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 20px;
  margin-bottom: 16px;
  align-items: start;
}

@media (max-width: 900px) {
  .qt-detail-grid { grid-template-columns: 1fr; }
}

/* Left column wrapper: stacks Shipment Details + Linked Shipments under one grid track */
.qt-detail-col { min-width: 0; }

.qt-detail-card {
  background: var(--arl-white);
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}

.qt-detail-card h3 {
  font-family: var(--arl-font-accent);
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 14px;
  color: var(--arl-text);
}

.qt-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.qt-field label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--arl-text-muted);
  margin-bottom: 2px;
}

.qt-field span {
  font-size: 0.9rem;
  color: var(--arl-text);
}

.qt-notes {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--arl-border);
}

.qt-notes p {
  font-size: 0.85rem;
  color: var(--arl-text-secondary);
  line-height: 1.5;
  margin: 4px 0 0;
}

.qt-linked {
  margin-top: 12px;
}

.qt-linked a {
  color: var(--arl-primary);
  font-weight: 600;
  font-size: 0.85rem;
}

/* Activity Timeline */
.qt-activity-timeline {
  max-height: 400px;
  overflow-y: auto;
}

/* In plain words ("One FORGE look" step 6): the icon in its meaning's round, then what
   happened, the details, and who and when. */
.qt-activity-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--fk-line);
}

.qt-activity-item:last-child { border-bottom: none; }

.qt-activity-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 4px; }

.qt-activity-action {
  font-weight: 600;
  font-size: var(--fk-type-md);
  color: var(--fk-ink);
}

.qt-activity-detail {
  font-size: var(--fk-type-sm);
  color: var(--fk-ink-2);
  overflow-wrap: anywhere;
}

.qt-activity-meta {
  font-size: var(--fk-type-xs);
  color: var(--fk-ink-3);
}

/* Lane Intelligence Panel */
.qt-lane-section {
  min-width: 0; /* allow grid child to shrink instead of overflowing its column */
}

.qt-lane-controls {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.qt-lane-input-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qt-lane-input-group label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--arl-text-muted);
}

.qt-lane-input-group input[type="text"],
.qt-lane-input-group select {
  padding: 6px 10px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  font-size: 0.85rem;
  width: 100px;
}

.qt-lane-input-group input[type="range"] {
  width: 120px;
}

.qt-lane-radius-label {
  font-size: 0.8rem;
  color: var(--arl-text-secondary);
  min-width: 40px;
}

.qt-lane-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--arl-surface-light);
  border-radius: var(--arl-radius);
  margin-bottom: 10px;
}

.qt-lane-route {
  font-weight: 700;
  font-family: var(--arl-font-accent);
  font-size: 0.95rem;
}

.qt-lane-radius {
  font-size: 0.8rem;
  color: var(--arl-text-secondary);
}

/* Lane Tiers (details/summary) */
.qt-lane-tier {
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  margin-bottom: 8px;
}

.qt-lane-tier summary {
  padding: 10px 14px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--arl-surface-light);
  border-radius: var(--arl-radius);
}

.qt-lane-tier[open] summary {
  border-bottom: 1px solid var(--arl-border);
  border-radius: var(--arl-radius) var(--arl-radius) 0 0;
}

.qt-lane-count {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--arl-text-muted);
}

.qt-lane-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.qt-lane-table thead th {
  background: var(--arl-surface);
  padding: 6px 10px;
  text-align: left;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--arl-text-secondary);
}

.qt-lane-table tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--arl-border);
}

/* Org Aggregate Stats */
.qt-org-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px;
}

.qt-org-stat label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--arl-text-muted);
  margin-bottom: 2px;
}

.qt-org-stat span {
  font-size: 1rem;
  font-weight: 700;
  font-family: var(--arl-font-accent);
  color: var(--arl-text);
}

/* Mileage provenance chip ($/mi trustworthiness): PCMiler vs estimate vs mixed */
.qt-mi-src {
  display: inline-block;
  font-family: var(--arl-font-accent);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.5;
  padding: 0 5px;
  border-radius: 8px;
  vertical-align: middle;
  margin-left: 4px;
  cursor: help;
}
.qt-mi-src-pcmiler { background: var(--arl-success); color: #fff; }
.qt-mi-src-mixed { background: #FEF3C7; color: #92400E; }
.qt-mi-src-est { background: var(--arl-border); color: var(--arl-text-secondary); }

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

/* DAT Market block — collapsible live-market benchmark shown beside the historical tiers */
.qt-dat-market {
  margin-bottom: 10px;
  background: var(--arl-surface-light);
  border: 1px solid var(--arl-border);
  border-left: 4px solid var(--arl-primary);
  border-radius: var(--arl-radius-lg);
}
.qt-dat-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 14px;
  cursor: pointer;
  list-style: none;
}
.qt-dat-summary::-webkit-details-marker { display: none; }
.qt-dat-summary::before {
  content: '\25B8'; /* ▸ */
  color: var(--arl-text-muted);
  font-size: 0.75rem;
}
.qt-dat-market[open] .qt-dat-summary::before { content: '\25BE'; /* ▾ */ }
.qt-dat-summary-figure {
  font-family: var(--arl-font-accent);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--arl-text);
}
.qt-dat-badge {
  font-family: var(--arl-font-accent);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: var(--arl-primary);
  padding: 3px 8px;
  border-radius: 4px;
}
.qt-dat-sub { font-size: 0.78rem; color: var(--arl-text-muted); }
.qt-dat-market .qt-org-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 4px 14px 10px;
}
.qt-dat-foot {
  padding: 0 14px 12px;
  font-size: 0.72rem;
  color: var(--arl-text-muted);
}
@media (max-width: 640px) {
  .qt-dat-market .qt-org-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Triumph (Greenscreens) block — own card beside DAT (never blended). Reuses the
   DAT summary/body structure with a distinct green accent so the two read apart. */
.qt-gs-market {
  margin-bottom: 10px;
  background: var(--arl-surface-light);
  border: 1px solid var(--arl-border);
  border-left: 4px solid #1f9d57; /* Triumph/Greenscreens accent — distinct from DAT */
  border-radius: var(--arl-radius-lg);
}
.qt-gs-market .qt-dat-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 14px; cursor: pointer; list-style: none; }
.qt-gs-market .qt-dat-summary::-webkit-details-marker { display: none; }
.qt-gs-market .qt-dat-summary::before { content: '\25B8'; color: var(--arl-text-muted); font-size: 0.75rem; }
.qt-gs-market[open] .qt-dat-summary::before { content: '\25BE'; }
.qt-gs-badge {
  font-family: var(--arl-font-accent);
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: #1f9d57;
  padding: 3px 8px;
  border-radius: 4px;
}
.qt-gs-market .qt-org-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 4px 14px 10px; }
@media (max-width: 640px) {
  .qt-gs-market .qt-org-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Expected-carrier-rate source flip control */
.qt-expected-source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 2px;
  padding: 8px 12px;
  background: var(--arl-surface-light);
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  font-size: 0.82rem;
}
.qt-expected-source-label { color: var(--arl-text-muted); }
.qt-expected-source-btns { display: flex; gap: 6px; flex-wrap: wrap; }

/* "What we sent" hover — shows the exact inputs behind a rate (zips, trailer, pickup) */
.qt-rate-inputs { position: relative; display: inline-flex; align-items: center; cursor: help; }
.qt-rate-inputs-icon {
  font-size: 0.72rem; color: var(--arl-text-muted);
  border: 1px solid var(--arl-border); border-radius: 10px; padding: 1px 7px; white-space: nowrap;
}
.qt-rate-inputs:hover .qt-rate-inputs-icon, .qt-rate-inputs:focus .qt-rate-inputs-icon { color: var(--arl-text); border-color: #1f9d57; }
.qt-rate-inputs-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 240px; display: none; flex-direction: column; gap: 4px;
  background: var(--arl-surface); border: 1px solid var(--arl-border); border-left: 3px solid #1f9d57;
  border-radius: var(--arl-radius); padding: 10px 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.14);
  font-size: 0.8rem; text-align: left; cursor: default; white-space: normal;
}
.qt-rate-inputs:hover .qt-rate-inputs-pop, .qt-rate-inputs:focus-within .qt-rate-inputs-pop { display: flex; }
.qt-rate-inputs-title { font-family: var(--arl-font-accent); font-weight: 800; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: #1f9d57; margin-bottom: 2px; }
.qt-rate-inputs-row { display: flex; justify-content: space-between; gap: 16px; }
.qt-rate-inputs-row label { color: var(--arl-text-muted); }
.qt-rate-inputs-row span { color: var(--arl-text); font-weight: 600; text-align: right; }
/* DAT variant — tint the accent to the DAT card colour (primary) instead of Triumph green */
.qt-rate-inputs--dat .qt-rate-inputs-pop { border-left-color: var(--arl-primary); }
.qt-rate-inputs--dat .qt-rate-inputs-title { color: var(--arl-primary); }
.qt-rate-inputs--dat:hover .qt-rate-inputs-icon, .qt-rate-inputs--dat:focus .qt-rate-inputs-icon { border-color: var(--arl-primary); }

/* Stale rate — red "inputs changed" badge + refresh button on the rate card summary */
.qt-rate-stale {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em;
  color: #c62828; background: rgba(198, 40, 40, 0.10);
  border: 1px solid rgba(198, 40, 40, 0.40); border-radius: 10px; padding: 1px 8px;
}
.qt-rate-refresh.btn {
  border: 1px solid #c62828; color: #fff; background: #c62828;
  font-weight: 700; padding: 2px 10px;
}
.qt-rate-refresh.btn:hover { background: #a91f1f; border-color: #a91f1f; }
.qt-rate-refresh.btn:disabled { opacity: 0.6; cursor: default; }
/* #105: "not pulled yet" placeholder — same card chrome (.qt-gs-market/.qt-dat-market
   wrapper) with an inline row, since it has no <summary> to lay it out. */
.qt-rate-empty { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 14px; }
.qt-rate-empty .qt-dat-sub { color: var(--arl-text-muted); }
.qt-rate-empty .qt-rate-refresh.btn { margin-left: auto; }

/* ── #151: LTL, so there is deliberately no rate ────────────────────────────────
   Distinguished from "not pulled yet" on purpose. That state is a job to do and
   carries a Pull button; this one is a settled answer and carries none, because
   offering the button on an LTL quote invites a click that the server correctly
   refuses — which would make the gate look broken rather than deliberate. */
.qt-rate-na { opacity: 0.72; }
.qt-rate-na .qt-rate-na-why {
  margin-left: auto;
  font-size: 11px;
  color: var(--arl-text-muted);
  text-decoration: underline dotted;
  cursor: help;
}

/* Only LTL gets a chip: it changes what the page DOES (both rate cards go away),
   so the reason should be findable in a glance. Truckload renders as plain text —
   it is the ordinary case, and 9,000 chips would be wallpaper. */
/* ⚠ NO `cursor: help` here, deliberately. The first version had it and the browser
   showed `.qt-field-editable span { cursor: text }` winning on specificity — and
   that rule is RIGHT. The chip sits inside a click-to-edit field, so clicking it
   opens the Service select; a help cursor would promise a tooltip where a click
   does something else entirely. The `title` still shows on hover, which is the part
   that matters. (`.qt-rate-na-why` DOES keep cursor: help — it is in a rate card,
   nothing there is editable, and hovering is genuinely all it does.) */
.qt-service-chip {
  display: inline-block;
  font-family: var(--arl-font-accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 3px;
}
.qt-service-ltl {
  background: var(--arl-surface);
  color: var(--arl-text-secondary);
}
/* A stale card draws a red left border so it's obvious even when collapsed */
.qt-gs-market:has(.qt-rate-stale), .qt-dat-market:has(.qt-rate-stale) { border-left-color: #c62828; }

/* Lane Headline — suggested-sell pricing band */
.qt-lane-headline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 11px 16px;
  margin-bottom: 10px;
  background: var(--arl-surface-light);
  border-radius: var(--arl-radius-lg);
  border-left: 4px solid var(--arl-primary);
}
.qt-lane-headline--customer { border-left-color: var(--arl-success); }
.qt-lane-headline--organization { border-left-color: var(--arl-primary); }
.qt-lane-headline--network { border-left-color: var(--arl-dark); }
.qt-lane-headline--empty { border-left-color: var(--arl-border); }

.qt-lane-headline-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--arl-text-muted);
  margin-bottom: 2px;
}
.qt-lane-headline-value {
  font-family: var(--arl-font-accent);
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--arl-text);
  line-height: 1.1;
}
.qt-lane-headline-rpm {
  font-size: 1rem;
  font-weight: 600;
  color: var(--arl-text-secondary);
  margin-left: 6px;
}
.qt-lane-headline-meta { text-align: right; }
.qt-lane-headline-source {
  font-size: 0.78rem;
  color: var(--arl-text-secondary);
  margin-bottom: 4px;
}
.qt-lane-headline-sub {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  font-size: 0.82rem;
  color: var(--arl-text-secondary);
}
.qt-lane-headline-sub strong { color: var(--arl-text); font-family: var(--arl-font-accent); }
/* "Last Sold $2,595 · 4 days ago". Deliberately styled like its siblings rather
   than accented: --arl-accent is the ARL red this app uses for danger, and a red
   price in a row of neutral stats reads as a warning about the number. Its
   position — first in the band — is the emphasis. The age is set quieter and
   un-italic: it is context for the number, not an aside. */
.qt-lane-headline-last em {
  font-style: normal;
  opacity: 0.75;
  margin-left: 4px;
}
.qt-lane-lastsold-when {
  color: var(--arl-text-secondary);
  font-size: 0.85em;
  white-space: nowrap;
}
.qt-lane-headline-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--arl-text-secondary);
}

/* Empty-tier state with widen action */
.qt-lane-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px;
}
.qt-lane-widen {
  background: var(--arl-white);
  border: 1px solid var(--arl-primary);
  color: var(--arl-primary);
  font-family: var(--arl-font-accent);
  font-weight: 600;
  font-size: 0.8rem;
  padding: 5px 12px;
  border-radius: var(--arl-radius);
  cursor: pointer;
}
.qt-lane-widen:hover { background: var(--arl-primary); color: #fff; }

/* Tier body + clickable shipment count + org scope selector */
.qt-tier-body { padding: 0; }
.qt-lane-count-link {
  cursor: pointer;
  color: var(--arl-primary);
  font-weight: 600;
  white-space: nowrap;
}
.qt-lane-count-link:hover { text-decoration: underline; }
.qt-lane-orgsel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--arl-border);
  background: var(--arl-surface-alt);
}
.qt-lane-orgsel label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--arl-text-muted);
}
.qt-lane-orgsel select {
  padding: 5px 10px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  font-size: 0.85rem;
  max-width: 320px;
}

/* Load-list drill-down popup */
.qt-loads-overlay {
  position: fixed;
  inset: 0;
  background: rgba(1, 10, 25, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}
.qt-loads-modal {
  background: var(--arl-white);
  border-radius: var(--arl-radius-lg);
  box-shadow: var(--arl-shadow-lg);
  width: min(960px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.qt-loads-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--arl-border);
  background: var(--arl-surface-light);
}
.qt-loads-head h3 {
  margin: 0;
  font-family: var(--arl-font-heading);
  font-size: 1.05rem;
  color: var(--arl-text);
}
.qt-loads-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--arl-text-muted);
  cursor: pointer;
  padding: 0 4px;
}
.qt-loads-close:hover { color: var(--arl-text); }
.qt-loads-body { overflow: auto; padding: 0; }
.qt-loads-note {
  padding: 8px 18px;
  font-size: 0.8rem;
  color: var(--arl-text-secondary);
  background: var(--arl-surface-alt);
  border-bottom: 1px solid var(--arl-border);
}
.qt-loads-scroll { overflow-x: auto; }
.qt-loads-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.qt-loads-table thead th {
  position: sticky;
  top: 0;
  background: var(--arl-surface);
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--arl-text-secondary);
  white-space: nowrap;
}
.qt-loads-table tbody td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--arl-border);
  white-space: nowrap;
}
.qt-loads-table tbody tr:hover { background: var(--arl-surface-light); }
.qt-loads-subtle {
  font-size: 0.72rem;
  color: var(--arl-text-secondary);
  margin-top: 2px;
}

/* Analytics Cards */
.qt-analytics-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

@media (max-width: 700px) {
  .qt-analytics-cards { grid-template-columns: repeat(2, 1fr); }
}

.qt-analytics-card {
  background: var(--arl-white);
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius-lg);
  padding: 18px;
  text-align: center;
}

.qt-analytics-value {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  font-family: var(--arl-font-accent);
  color: var(--arl-primary);
}

.qt-analytics-label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--arl-text-muted);
  margin-top: 4px;
}

/* QT Nav Header */
.qt-header {
  display: flex;
  gap: 4px;
  margin-bottom: 0;
}

/* The page's tabs (Quotes, Analytics): the kit's tabs, in their own row along the band's
   bottom edge like every page's tabs (.fk-page-tabs), and on dark there. */
.qt-nav-tabs { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 4px 22px; border-bottom: 1px solid var(--fk-line); }
.qt-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: -1px;
  padding: 10px 0 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-md);
  font-weight: 600;
  color: var(--fk-ink-2);
  cursor: pointer;
  white-space: nowrap;
}

.qt-nav-btn:hover { color: var(--fk-ink); }
.qt-nav-btn:focus-visible { outline: none; box-shadow: var(--fk-focus-ring); border-radius: var(--fk-radius-sm); }
.qt-nav-btn.active { color: var(--fk-ink); border-bottom-color: var(--fk-blue-600); }
main .module-band.qt-queue-header:has(> .qt-nav-tabs) { padding-bottom: 0; }
main .module-band .qt-nav-tabs { border-bottom-color: rgba(255, 255, 255, 0.1); }
main .module-band .qt-nav-btn { color: rgba(255, 255, 255, 0.62); }
main .module-band .qt-nav-btn:hover { color: var(--fk-white); }
main .module-band .qt-nav-btn.active { color: var(--fk-white); border-bottom-color: var(--fk-blue-400); }

/* New Quote Modal */
.qt-new-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.qt-new-form-grid .form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qt-new-form-grid label {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--arl-text-muted);
}

.qt-new-form-grid input,
.qt-new-form-grid select,
.qt-new-form-grid textarea {
  padding: 7px 10px;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius);
  font-size: 0.88rem;
  font-family: var(--arl-font-body);
}

.qt-new-form-grid .form-group-full {
  grid-column: 1 / -1;
}

/* Equipment Group Help Tooltip */
.qt-equipment-help {
  position: relative;
  display: inline-block;
  margin-left: 6px;
}

.qt-help-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--arl-border);
  color: var(--arl-text-secondary);
  font-size: 0.7rem;
  font-weight: 700;
  cursor: help;
  vertical-align: middle;
  transition: background 0.15s;
}

.qt-help-icon:hover {
  background: var(--arl-primary-light);
  color: var(--arl-white);
}

.qt-help-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  width: 520px;
  max-height: 400px;
  overflow-y: auto;
  background: var(--arl-white);
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius-lg);
  box-shadow: var(--arl-shadow-lg);
  padding: 16px;
  z-index: 200;
}

.qt-equipment-help:hover .qt-help-tooltip,
.qt-equipment-help:focus-within .qt-help-tooltip {
  display: block;
}

.qt-help-tooltip h4 {
  font-family: var(--arl-font-accent);
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0 0 6px;
}

.qt-help-tooltip p {
  font-size: 0.8rem;
  color: var(--arl-text-secondary);
  margin: 0 0 10px;
  line-height: 1.4;
}

.qt-eqgrp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.qt-eqgrp-table thead th {
  background: var(--arl-surface);
  padding: 5px 8px;
  text-align: left;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  color: var(--arl-text-secondary);
}

.qt-eqgrp-table tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--arl-border);
  vertical-align: top;
}

.qt-eqgrp-name {
  font-weight: 600;
  white-space: nowrap;
  color: var(--arl-primary);
}

.qt-eqgrp-types {
  color: var(--arl-text-secondary);
  line-height: 1.4;
}

/* Standalone Lane Lookup Card */
.qt-lane-lookup-card {
  margin-top: 12px;
}

/* ── Possible-duplicate pill (queue) + merge modal ───────────── */
.qt-dup-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  vertical-align: middle;
}
.qt-dup-pill-strong {
  background: #fce8d5;
  color: #9a4a00;
  border: 1px solid #f0b27a;
}
.qt-dup-pill-strong:hover { background: #f8d9bb; }
.qt-dup-pill-soft {
  background: var(--arl-surface-alt);
  color: var(--arl-text-secondary);
  border: 1px solid var(--arl-border);
}
.qt-dup-pill-soft:hover { background: var(--arl-surface-light); }

.qt-merge-modal-box { width: min(720px, 100%); }
.qt-merge-context {
  padding: 12px 18px 6px;
  font-size: 0.9rem;
  color: var(--arl-text);
}
.qt-merge-note {
  margin: 0 18px 12px;
  padding: 9px 12px;
  border-radius: var(--arl-radius);
  font-size: 0.82rem;
  line-height: 1.4;
}
.qt-merge-note-strong { background: #fcf0e3; color: #8a4500; border: 1px solid #f0b27a; }
.qt-merge-note-soft { background: var(--arl-surface-alt); color: var(--arl-text-secondary); border: 1px solid var(--arl-border); }

/* Pipedrive-style side-by-side comparison */
.qt-merge-modal-box { width: min(880px, 100%); }
.qt-merge-compare-scroll { overflow-x: auto; padding: 0 18px; }
.qt-merge-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.qt-merge-compare th,
.qt-merge-compare td {
  padding: 7px 12px;
  border: 1px solid var(--arl-border);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.qt-merge-compare thead th { background: var(--arl-surface); font-size: 0.72rem; }
.qt-merge-field-label {
  font-weight: 600;
  color: var(--arl-text-secondary);
  background: var(--arl-surface-light);
  white-space: nowrap;
}
.qt-merge-col-primary { background: #eef4ff; }
.qt-merge-result-col { background: #eafaef; font-weight: 500; }
.qt-merge-compare thead .qt-merge-result-col { background: #d8f1e0; }
.qt-merge-pick { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; font-weight: 600; color: var(--arl-text); text-transform: none; }
.qt-merge-fill-tag {
  display: inline-block;
  font-size: 0.62rem;
  padding: 0 5px;
  border-radius: 8px;
  background: #cdeed8;
  color: #1d6b3a;
  vertical-align: middle;
}
.qt-merge-fill-src { color: #1d6b3a; }
.qt-merge-warn {
  margin: 10px 18px 0;
  padding: 8px 12px;
  border-radius: var(--arl-radius);
  background: #fcf0e3;
  color: #8a4500;
  border: 1px solid #f0b27a;
  font-size: 0.82rem;
}
.qt-merge-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 18px;
  border-top: 1px solid var(--arl-border);
  background: var(--arl-surface-light);
}

/* ── Customer LIST: search + filter toolbar ──────────────────── */
.qt-cust-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
.qt-cust-search {
  flex: 0 1 300px;
  min-width: 180px;
  box-sizing: border-box;
  padding: 7px 10px;
  font-size: 0.85rem;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius-sm, 4px);
  background: var(--arl-white);
}
.qt-cust-select {
  box-sizing: border-box;
  padding: 7px 10px;
  font-size: 0.85rem;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius-sm, 4px);
  background: var(--arl-white);
}
.qt-cust-search:focus,
.qt-cust-select:focus {
  outline: none;
  border-color: var(--arl-primary);
}

/* ── BDR Performance page ─────────────────────────────────────── */
.qt-bdr-custom-range {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.qt-bdr-range-sep { font-size: 0.8rem; color: var(--arl-text-secondary); }

/* Margin: expected vs realized */
.qt-bdr-margin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.qt-bdr-margin-card {
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius-sm, 6px);
  padding: 14px 16px;
  background: var(--arl-surface-alt);
}
.qt-bdr-margin-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--arl-text-secondary);
}
.qt-bdr-margin-value {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 4px;
  color: var(--arl-text-primary, #1a1a1a);
}
.qt-bdr-margin-sub { font-size: 0.78rem; color: var(--arl-text-muted); margin-top: 2px; }
.qt-bdr-margin-card.pos .qt-bdr-margin-value { color: var(--arl-success, #1a7f4b); }
.qt-bdr-margin-card.neg .qt-bdr-margin-value { color: var(--arl-danger, #c0392b); }
@media (max-width: 640px) { .qt-bdr-margin-grid { grid-template-columns: 1fr; } }

/* Weekly trend chart */
.qt-bdr-legend {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 0.78rem;
  color: var(--arl-text-secondary);
  margin-bottom: 8px;
}
.qt-bdr-swatch {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 2px;
  margin-right: 5px;
  vertical-align: middle;
}
.qt-bdr-trend-max { margin-left: auto; }
.qt-bdr-trend-svg {
  width: 100%;
  height: 170px;
  display: block;
}
.qt-bdr-trend-axis {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--arl-text-muted);
  margin-top: 2px;
}

/* Loss reasons */
.qt-bdr-loss-list { display: flex; flex-direction: column; gap: 6px; }
.qt-bdr-loss-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2fr auto;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
}
.qt-bdr-loss-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-bdr-loss-bar {
  background: var(--arl-surface-alt);
  border-radius: 3px;
  height: 12px;
  overflow: hidden;
}
.qt-bdr-loss-bar i {
  display: block;
  height: 100%;
  background: var(--arl-primary);
  border-radius: 3px;
}
.qt-bdr-loss-count { font-variant-numeric: tabular-nums; color: var(--arl-text-secondary); }

/* Manage Teams editor */
.qt-bdr-team-edit {
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius-sm, 4px);
  padding: 10px;
  margin-bottom: 10px;
}
.qt-bdr-team-edit-head {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.qt-bdr-team-edit-head .qt-cust-select { flex: 1 1 auto; }
.qt-bdr-team-members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px 12px;
  max-height: 220px;
  overflow-y: auto;
}
.qt-bdr-member {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  cursor: pointer;
}

/* ── Customer-page Quote History: filter row + count ─────────── */
.qt-cust-history-table .qt-cust-filter-row td {
  padding: 4px 6px;
  background: var(--arl-surface-alt);
  border-bottom: 1px solid var(--arl-border);
}
.qt-cust-history-table .qt-cust-filter-row input,
.qt-cust-history-table .qt-cust-filter-row select {
  width: 100%;
  box-sizing: border-box;
  padding: 4px 6px;
  font-size: 0.78rem;
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius-sm, 4px);
  background: var(--arl-white);
}
/* #102 — origin/destination filters split into a city box + a 2-letter state
   box, mirroring the main queue. The width:100% rule above would stretch both;
   scope a flex override so the city box flexes and the ST box stays compact. */
.qt-cust-history-table .qt-cust-filter-row .qt-loc-filter { display: flex; gap: 4px; align-items: center; }
.qt-cust-history-table .qt-cust-filter-row .qt-loc-filter input { width: auto; }
.qt-cust-history-table .qt-cust-filter-row .qt-loc-filter .qt-cust-city { flex: 1 1 auto; min-width: 0; }
.qt-cust-history-table .qt-cust-filter-row .qt-loc-filter .qt-filter-state { flex: 0 0 3.4em; width: 3.4em; text-align: center; text-transform: uppercase; }
.qt-cust-history-table .qt-cust-filter-row .qt-loc-filter .qt-filter-state::placeholder { text-transform: none; }
.qt-cust-history-table thead .qt-cust-sortable:hover { color: var(--arl-primary); }
.qt-cust-history-table tr.selected { background: var(--arl-surface-light); }
.qt-cust-history-count {
  margin-top: 8px;
  font-size: 0.76rem;
  color: var(--arl-text-secondary);
}

/* ── Front Comment Builder (Phase 2) — condensed accordion + note preview ── */
.qt-cb-sub { font-size: 0.76rem; color: var(--arl-text-secondary); margin-top: 2px; }

/* Segmented mode control (This customer / Org default) */
.qt-cb-modeswitch { display: inline-flex; background: #f1f2f7; border-radius: 9px; padding: 3px; }
.qt-cb-modebtn { padding: 6px 12px; font-size: 0.78rem; font-weight: 600; background: transparent; border: none;
  cursor: pointer; color: var(--arl-text-secondary); border-radius: 7px; transition: .15s; }
.qt-cb-modebtn.active { background: #fff; color: var(--arl-primary, #2f3aa3); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.qt-cb { margin-top: 14px; }
.qt-cb-body { display: grid; grid-template-columns: 1fr 320px; gap: 18px; align-items: start; }
.qt-cb-build { min-width: 0; }

/* Build header + Add-widget menu */
.qt-cb-build-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.qt-cb-build-lbl { font-size: 0.68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--arl-text-secondary); }
.qt-cb-addwrap { position: relative; }
.qt-cb-add { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--arl-border, #e0e0e8); background: #fff;
  color: var(--arl-primary, #2f3aa3); font-weight: 600; font-size: 0.78rem; padding: 7px 12px; border-radius: 9px; cursor: pointer; }
.qt-cb-add:hover { background: #eef0fb; border-color: #c9cdf0; }
.qt-cb-menu { position: absolute; right: 0; top: 38px; z-index: 30; width: 250px; background: #fff;
  border: 1px solid var(--arl-border, #e0e0e8); border-radius: 12px; box-shadow: 0 8px 28px rgba(20,22,40,.16); padding: 6px; display: none; }
.qt-cb-menu.open { display: block; }
.qt-cb-menu-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 9px; border-radius: 8px; cursor: pointer; }
.qt-cb-menu-item:hover { background: #eef0fb; }
.qt-cb-menu-ic { font-size: 15px; line-height: 1.3; }
.qt-cb-menu-t { font-weight: 600; font-size: 0.82rem; display: block; }
.qt-cb-menu-d { font-size: 0.72rem; color: var(--arl-text-secondary); display: block; }

/* Block list (accordion) */
.qt-cb-list { display: flex; flex-direction: column; gap: 8px; min-height: 60px; }
.qt-cb-empty { color: var(--arl-text-secondary); font-size: 0.82rem; text-align: center; padding: 26px 8px;
  border: 1px dashed var(--arl-border, #cfcfe0); border-radius: 10px; }
.qt-cb-blk { border: 1px solid var(--arl-border, #e0e0e8); border-radius: 10px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.qt-cb-blk:hover { border-color: #d7d9ea; }
.qt-cb-blk.drag-over { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.qt-cb-blk-head { display: flex; align-items: center; gap: 10px; padding: 9px 11px; cursor: pointer; }
.qt-cb-handle { cursor: grab; color: #c2c5d6; font-size: 13px; }
.qt-cb-blk-ic { width: 26px; height: 26px; border-radius: 7px; background: #eef0fb; display: grid; place-items: center; font-size: 14px; flex: none; }
.qt-cb-blk-meta { min-width: 0; flex: 1; }
.qt-cb-blk-name { font-size: 0.82rem; font-weight: 650; display: block; }
.qt-cb-blk-sum { font-size: 0.72rem; color: var(--arl-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.qt-cb-chev { color: #a9adc2; transition: transform .15s; font-size: 11px; }
.qt-cb-blk.open .qt-cb-chev { transform: rotate(90deg); }
.qt-cb-blk-x { border: 0; background: transparent; color: #bfc3d4; font-size: 14px; cursor: pointer; padding: 2px 5px; border-radius: 6px; }
.qt-cb-blk-x:hover { background: #fdeceb; color: #c0392b; }
.qt-cb-blk-body { display: none; padding: 2px 12px 12px 47px; }
.qt-cb-blk.open .qt-cb-blk-body { display: block; }

/* Option editors */
.qt-cb-opts { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.qt-cb-opts-muted { color: var(--arl-text-secondary); font-size: 0.78rem; font-style: italic; }
.qt-cb-opt { display: flex; flex-direction: column; gap: 4px; }
.qt-cb-opt > span { font-size: 0.64rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--arl-text-secondary); }
.qt-cb-opt input[type=text], .qt-cb-opt select, .qt-cb-opt textarea { font-size: 0.82rem; padding: 6px 8px;
  border: 1px solid var(--arl-border, #d8d8e0); border-radius: 7px; min-width: 120px; background: #fff; }
.qt-cb-opt input[type=text]:focus, .qt-cb-opt select:focus, .qt-cb-opt textarea:focus { outline: 0; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.12); }
.qt-cb-opt-full { flex: 1 1 100%; }
.qt-cb-opt-full textarea { width: 100%; resize: vertical; }
.qt-cb-opt-check { flex-direction: row; align-items: center; gap: 7px; }
.qt-cb-opt-check span { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 0.8rem; color: var(--arl-text); }
.qt-cb-fields { flex: 1 1 100%; }
.qt-cb-fields-label { display: block; font-size: 0.64rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--arl-text-secondary); margin-bottom: 6px; }
.qt-cb-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qt-cb-chip { font-size: 0.72rem; padding: 4px 10px; border: 1px solid var(--arl-border, #d8d8e0); border-radius: 20px;
  cursor: pointer; color: var(--arl-text-secondary); user-select: none; transition: .12s; }
.qt-cb-chip:hover { border-color: #c9cdf0; }
.qt-cb-chip.on { background: var(--arl-primary, #2f3aa3); color: #fff; border-color: var(--arl-primary, #2f3aa3); }
.qt-cb-chip input { display: none; }

/* Preview as a Front internal note */
.qt-cb-side { position: sticky; top: 12px; }
.qt-cb-pv-lbl { font-size: 0.68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--arl-text-secondary);
  margin-bottom: 8px; display: flex; justify-content: space-between; align-items: baseline; }
.qt-cb-sample { text-transform: none; letter-spacing: 0; font-weight: 500; font-style: italic; font-size: 0.68rem; color: #9aa; }
.qt-cb-note { background: #fff; border: 1px solid var(--arl-border, #e0e0e8); border-radius: 12px; box-shadow: 0 1px 2px rgba(20,22,40,.04), 0 4px 16px rgba(20,22,40,.06); overflow: hidden; }
.qt-cb-note-top { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: #fcfcff; border-bottom: 1px solid #eef0f5; }
.qt-cb-note-av { width: 24px; height: 24px; border-radius: 50%; background: var(--arl-primary, #2f3aa3); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.qt-cb-note-by { font-size: 12px; font-weight: 600; line-height: 1.2; }
.qt-cb-note-by small { display: block; font-weight: 500; color: var(--arl-text-secondary); font-size: 10.5px; }
.qt-cb-note-body { padding: 13px 14px; white-space: pre-wrap; word-break: break-word; font-size: 0.78rem; line-height: 1.6; color: #23252f; }
.qt-cb-note-body a { color: #3b82f6; text-decoration: none; }

/* Actions */
.qt-cb-actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid #eef0f5; }
.qt-cb-status { font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: 20px; background: #eef0f5; color: var(--arl-text-secondary); }
.qt-cb-status.dirty { background: #fdf1df; color: #b26a00; }

@media (max-width: 760px) { .qt-cb-body { grid-template-columns: 1fr; } .qt-cb-side { position: static; } }

/* ── Rate Engine source badges (quote detail) ───────────────────────────── */
.qt-src-badge { display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.03em; padding: 1px 5px; border-radius: 8px; margin-left: 5px; vertical-align: middle; text-transform: uppercase; }
.qt-src-engine { background: #e8f0fe; color: #1a56db; }
.qt-src-triumph { background: #e6f6ec; color: #18794e; }
.qt-src-dat { background: #eef0ff; color: #4b4bce; }
.qt-src-manual { background: #f3f3f5; color: #666; }
/* #142: not a rate tool — the carrier cost actually paid on the covered load. Distinct
   from the four tool badges on purpose: these rows were never quoted by anyone. */
.qt-src-load { background: #fdf0e6; color: #9a4f13; }
/* #201: the stored rate came from a truckload-priced source but the quote is marked LTL.
   Deliberately louder than the five source badges beside it — those say where a number
   came from, this one says the number answers a different question than the one asked. */
.qt-src-mismatch { background: #fdecec; color: #b42318; border: 1px solid #f3b9b4; cursor: help; }

/* Hazmat chip on the queue (#90) — high-visibility so a quoter sees why a rate
   may run high at a glance. Derived from the quote's commodity text. */
.qt-hazmat-chip {
  display: inline-block; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 1px 5px; border-radius: 8px; vertical-align: middle; text-transform: uppercase;
  background: #fdecec; color: #b42318; border: 1px solid #f5c2c0;
}
/* "Rate quoted off of" control (#83) — visually distinct from the live
   Expected-carrier source control it sits beside. */
.qt-quoted-buy { border-top: 1px dashed var(--arl-border, #e0e0e0); margin-top: 8px; padding-top: 8px; }

/* Proxy-rated equipment (#88): Conestoga/Step Deck/RGN priced as plain Flatbed
   by Triumph/DAT. Amber (caution, not error) so reps know to add the premium. */
.qt-proxy-chip {
  display: inline-block; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.03em;
  padding: 1px 4px; border-radius: 8px; margin-left: 4px; vertical-align: middle;
  background: #fff4e5; color: #8a5300; border: 1px solid #f2d199; cursor: help;
}
.qt-proxy-note {
  margin-top: 8px; padding: 8px 10px; border-radius: 6px;
  background: #fff8ee; border: 1px solid #f2d199; color: #8a5300;
  font-size: 0.82rem; line-height: 1.35;
}

/* Re-negotiated marker (feedback #64): shows the opening offer next to the
   final rate on the quote list + detail. Muted amber, non-intrusive. */
.qt-reneg { display: inline-block; font-size: 0.68rem; font-weight: 600; color: #92600a; background: #fdf3e0; padding: 1px 6px; border-radius: 8px; margin-left: 6px; white-space: nowrap; vertical-align: middle; }

/* Review queue (feedback #64 Phase 2): the AI-flagged-win/loss marker + the
   detail banner where an operator confirms or dismisses. */
.qt-review-badge { display: inline-block; font-size: 0.66rem; font-weight: 700; padding: 1px 6px; border-radius: 8px; margin-left: 6px; white-space: nowrap; vertical-align: middle; }
.qt-review-badge.qt-review-won { color: #18794e; background: #e6f6ec; }
.qt-review-badge.qt-review-lost { color: #b4232a; background: #fdeaea; }
.qt-review-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 12px 0; padding: 12px 16px; border-radius: 10px; border: 1px solid #f0d9a8; background: #fdf6e8; }
.qt-review-banner.qt-review-lost { border-color: #f0bcbc; background: #fdeeee; }
.qt-review-banner-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qt-review-banner-text strong { font-size: 0.9rem; }
.qt-review-reason { font-size: 0.82rem; color: var(--arl-text-secondary); }
.qt-review-hint { font-size: 0.74rem; color: var(--arl-text-secondary); }
.qt-review-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }

.qt-re-breakdown { margin-top: 10px; padding: 10px 12px; background: #f7f9fc; border: 1px solid #e3e8f0; border-radius: 8px; }
.qt-re-bd-head { font-size: 0.74rem; font-weight: 700; color: var(--arl-text-secondary); margin-bottom: 6px; }
.qt-re-bd-cfg { font-weight: 500; font-size: 0.68rem; color: #999; margin-left: 4px; }
.qt-re-bd-line { display: flex; justify-content: space-between; gap: 12px; font-size: 0.8rem; padding: 2px 0; }
.qt-re-bd-k { color: var(--arl-text-secondary); white-space: nowrap; }
.qt-re-bd-v { text-align: right; }
.qt-re-bd-warn { color: #b91c1c; font-weight: 600; white-space: nowrap; }

/* ── Rate Engine modal ──────────────────────────────────────────────────── */
.qt-re-modal-box { max-width: 880px; width: 94vw; }
.qt-re-body { max-height: 80vh; overflow-y: auto; }
.btn-xs { padding: 3px 8px; font-size: var(--fk-type-xs); line-height: 1.3; border-radius: var(--fk-radius-sm); }
.qt-re-modebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.qt-re-modeswitch { display: inline-flex; gap: 6px; }
.qt-re-modehint { font-size: 0.76rem; color: var(--arl-text-secondary); flex: 1; min-width: 220px; }
/* The kit's tabs (.fk-tab in forge-kit.css). */
.qt-re-tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; border-bottom: 1px solid var(--fk-line); margin-bottom: 12px; }
.qt-re-tab { display: inline-flex; align-items: center; gap: 7px; margin-bottom: -1px; padding: 10px 0 11px; border: 0; border-bottom: 2px solid transparent; background: none; font-family: var(--fk-font-ui); font-size: var(--fk-type-md); font-weight: 600; color: var(--fk-ink-2); cursor: pointer; white-space: nowrap; }
.qt-re-tab:hover { color: var(--fk-ink); }
.qt-re-tab:focus-visible { outline: none; box-shadow: var(--fk-focus-ring); border-radius: var(--fk-radius-sm); }
.qt-re-tab.active { color: var(--fk-ink); border-bottom-color: var(--fk-blue-600); }
.qt-re-intro { font-size: 0.78rem; color: var(--arl-text-secondary); margin-bottom: 10px; }
.qt-re-rule { border: 1px solid #e0e4ec; border-radius: 8px; padding: 12px; margin-bottom: 12px; background: #fff; }
.qt-re-rule-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.qt-re-rule-label { flex: 1; padding: 5px 8px; border: 1px solid #d7dbe3; border-radius: 6px; font-size: 0.82rem; font-weight: 600; }
.qt-re-rule-ord { display: inline-flex; gap: 4px; }
.qt-re-sublabel { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #8a90a0; margin: 8px 0 5px; }
.qt-re-catchall { font-weight: 500; text-transform: none; letter-spacing: 0; color: #b26a00; }
.qt-re-conds { padding: 6px 0; }
.qt-re-cond { display: flex; gap: 6px; align-items: center; margin-bottom: 5px; flex-wrap: wrap; }
.qt-re-cond select, .qt-re-cond input { padding: 4px 7px; border: 1px solid #d7dbe3; border-radius: 6px; font-size: 0.8rem; }
.qt-re-val { min-width: 90px; }
.qt-re-range { display: inline-flex; align-items: center; gap: 4px; }
.qt-re-range input { width: 80px; }
.qt-re-sources, .qt-re-markup { border-top: 1px dashed #e3e8f0; padding-top: 8px; margin-top: 8px; }
.qt-re-src { display: flex; gap: 6px; align-items: center; margin-bottom: 5px; }
.qt-re-src select { padding: 4px 7px; border: 1px solid #d7dbe3; border-radius: 6px; font-size: 0.8rem; }
.qt-re-weight { width: 64px; padding: 4px 7px; border: 1px solid #d7dbe3; border-radius: 6px; font-size: 0.8rem; }
.qt-re-weight-unit { font-size: 0.72rem; color: #8a90a0; }
.qt-re-adjust { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.qt-re-adjust label { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; }
.qt-re-adjust input { width: 72px; padding: 4px 7px; border: 1px solid #d7dbe3; border-radius: 6px; }
.qt-re-markup-row { display: flex; gap: 8px; align-items: center; }
.qt-re-markup-row input { width: 110px; padding: 5px 8px; border: 1px solid #d7dbe3; border-radius: 6px; }
.qt-re-hint { font-size: 0.74rem; color: var(--arl-text-secondary); margin-top: 4px; }
.qt-re-hint-warn { color: #b45309; font-weight: 600; }
/* Optional min/max $ on a markup rule. Narrower than the method inputs above —
   these are exceptions, not the primary control, and shouldn't compete with it. */
.qt-re-clamps { margin-top: 2px; }
.qt-re-clamps label { display: inline-flex; align-items: center; gap: 4px; font-size: 0.82rem; }
.qt-re-clamps input { width: 84px; }
.qt-re-clamps-bad input { border-color: #b91c1c; }
.qt-re-addrule { margin-top: 4px; }
.qt-re-tester { margin-top: 16px; padding: 12px; background: #f7f9fc; border: 1px solid #e3e8f0; border-radius: 8px; }
.qt-re-tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 10px; }
.qt-re-tf { display: flex; flex-direction: column; gap: 3px; font-size: 0.74rem; color: var(--arl-text-secondary); }
.qt-re-tf input, .qt-re-tf select { padding: 5px 7px; border: 1px solid #d7dbe3; border-radius: 6px; font-size: 0.82rem; }
.qt-re-tresult { margin-top: 10px; }
.qt-re-tline { display: flex; justify-content: space-between; gap: 12px; font-size: 0.86rem; padding: 4px 0; border-top: 1px solid #e8ebf1; }
.qt-re-tline span:first-child { color: var(--arl-text-secondary); font-weight: 600; }

/* Save-confirmation chrome — persistent at-a-glance signal of save state. */
.qt-re-savedline { font-size: 0.78rem; color: var(--arl-text-secondary); margin: 10px 0 4px; text-align: right; }
.qt-re-savedline-dirty { color: #b26a00; font-weight: 600; }
.qt-re-saved { background: #2ea54e !important; border-color: #2ea54e !important; cursor: default; }
.qt-re-saved:disabled { opacity: 1 !important; }
.qt-re-warn { margin: 12px 0; padding: 9px 12px; background: #fff8e6; border: 1px solid #ffd66b; border-radius: 8px; color: #6b4500; font-size: 0.82rem; line-height: 1.4; }

/* Customer-form save chrome — mirrors the rate-engine modal pattern. */
.qt-cust-saveline { font-size: 0.78rem; color: var(--arl-text-secondary); margin-top: 12px; text-align: right; min-height: 1.1em; }
.qt-cust-saveline-dirty { color: #b26a00; font-weight: 600; }
.qt-cust-saved { background: #2ea54e !important; border-color: #2ea54e !important; cursor: default; }
.qt-cust-saved:disabled { opacity: 1 !important; }

/* Comment-template builder Save chrome — same pattern as rate-engine + customer-form. */
.qt-cb-savedline { font-size: 0.72rem; color: var(--arl-text-secondary); }
.qt-cb-saved { background: #2ea54e !important; border-color: #2ea54e !important; cursor: default; }
.qt-cb-saved:disabled { opacity: 1 !important; }

/* ── Rate Engine read-only summary (qt-re-sum-*) ───────────────────────────
   At-a-glance audit of the active config in the customer-profile card.
   Compact one-line-per-rule grid + audit verdict/flag chips. Semantic colors
   (crit red / warn amber / ok green) are deliberate — spotting stub configs is
   the whole point. */
.qt-re-sum { margin-top: 10px; font-size: 0.78rem; line-height: 1.5; }
.qt-re-sum-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.qt-re-sum-prov { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.5px; padding: 2px 7px; border-radius: 3px; text-transform: uppercase; }
.qt-re-sum-prov-custom { background: #1e40af; color: #fff; }
.qt-re-sum-prov-org { background: #64748b; color: #fff; }
.qt-re-sum-prov-builtin { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
.qt-re-sum-counts { font-size: 0.7rem; color: var(--arl-text-secondary); }
.qt-re-sum-verdict { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.5px; padding: 2px 7px; border-radius: 3px; text-transform: uppercase; margin-left: auto; }
.qt-re-sum-verdict-crit { background: #b91c1c; color: #fff; }
.qt-re-sum-verdict-warn { background: #f59e0b; color: #1f2937; }
.qt-re-sum-verdict-ok { background: #16a34a; color: #fff; }

.qt-re-sum-flags { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 8px; border-radius: 6px; background: #fef2f2; border: 1px solid #fecaca; margin: 0 0 8px 0; }
.qt-re-sum-flag { font-size: 0.7rem; font-weight: 600; padding: 2px 7px; border-radius: 3px; }
.qt-re-sum-flag-crit { background: #b91c1c; color: #fff; }
.qt-re-sum-flag-warn { background: #fde68a; color: #78350f; }

.qt-re-sum-secthead { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #94a3b8; margin: 8px 0 2px; }
/* Outcome (sources + adjustment / markup) carries the most important data, so it
   gets the widest flexible track and is allowed to WRAP rather than clip — losing
   "×1.05" off the end of the blend is worse than losing a tail condition. Label +
   condition still ellipsis-truncate (full text in their title tooltip). */
.qt-re-sum-row { display: grid; grid-template-columns: 18px minmax(110px, 1.1fr) minmax(140px, 1.9fr) minmax(170px, 2.2fr); gap: 10px; align-items: start; padding: 3px 0; border-bottom: 1px dashed #eef1f6; }
.qt-re-sum-row:last-child { border-bottom: none; }
.qt-re-sum-row-inert { background: #fffbeb; }
.qt-re-sum-idx { color: #cbd5e1; font-variant-numeric: tabular-nums; }
.qt-re-sum-lbl { font-weight: 600; color: var(--arl-text-primary, #0f172a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-re-sum-cond { color: var(--arl-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qt-re-sum-out { font-size: 0.72rem; color: #0f172a; text-align: right; overflow-wrap: anywhere; }
.qt-re-sum-adj { color: #0369a1; font-weight: 600; margin-left: 4px; }
.qt-re-sum-catchall { font-size: 0.58rem; background: #fde68a; color: #78350f; padding: 1px 5px; border-radius: 2px; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; }
.qt-re-sum-nolabel { color: #94a3b8; font-style: italic; font-weight: 400; }
.qt-re-sum-inert { display: inline-block; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.5px; padding: 0 5px; border-radius: 2px; background: #b91c1c; color: #fff; }
.qt-re-sum-empty { font-size: 0.72rem; color: #94a3b8; font-style: italic; padding: 2px 0 2px 28px; }
/* Dollar safeguards on a markup rule — same visual weight as the ×/+ adjustment
   chip on a carrier rule, since both answer "what else does this rule do?". */
.qt-re-sum-clamp { color: #0369a1; font-weight: 600; margin-left: 4px; white-space: nowrap; }
.qt-re-sum-clamp-bad { color: #b91c1c; }
.qt-re-sum-none { font-size: 0.78rem; color: var(--arl-text-secondary); font-style: italic; margin-top: 6px; }
/* Narrow viewport: restack the 4-col grid so condition + outcome reflow under the
   label instead of crushing (mirrors the other QT surfaces' 640px breakpoints). */
@media (max-width: 640px) {
  .qt-re-sum-row { grid-template-columns: 18px 1fr; }
  .qt-re-sum-cond, .qt-re-sum-out { grid-column: 2; white-space: normal; text-align: left; overflow: visible; text-overflow: clip; }
}

/* ── Customer Detail: command view ──────────────────────────────────────
   One-screen layout: identity band (back + name + chips + KPI strip) over a
   two-track body — profile rail (left) + tabbed workspace (right). The view
   is locked to the viewport height; only the workspace panels and the rail
   scroll internally, so the page itself never scrolls on desktop. Colors stay
   on the --arl-* palette (html2canvas 1.4.1 can't parse oklch/color-mix). */

#qt-customer-detail-view:not(.hidden) {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px); /* 56px sticky header + 12px main-wide padding × 2 */
  min-height: 480px;          /* very short windows fall back to page scroll */
}
body.impersonating #qt-customer-detail-view:not(.hidden) {
  height: calc(100vh - 112px); /* + the 32px impersonation banner */
}
#qt-customer-detail-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 12px;
}

/* The header band (index.html: the way back, the name, its chips) keeps its height; the
   page under it takes the rest of the locked view. */
.qt-cust-page-band { flex: none; }

/* The KPI strip under the band */
.qt-cust-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--arl-white);
  border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius-lg);
  padding: 10px 18px;
  flex: none;
}
.qt-cust-chip {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--arl-text-secondary);
  background: var(--arl-surface-light);
  border: 1px solid var(--arl-border);
  border-radius: 10px;
  padding: 1px 8px;
  white-space: nowrap;
}
.qt-cust-chip-muted { background: transparent; border-color: transparent; color: var(--arl-text-muted); }
/* The same chips on the header band. */
.qt-cust-page-band .qt-cust-chip { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.88); }
.qt-cust-page-band .qt-cust-chip-muted { background: transparent; border-color: transparent; color: rgba(255, 255, 255, 0.6); }
/* "Not ingesting email" keeps its warning on the band (the glass rule above would repaint it). */
.qt-cust-page-band .qt-cust-chip-off { background: var(--fk-attention-bg); border-color: var(--fk-attention-line); color: var(--fk-attention); }

/* A value we genuinely do not have, as opposed to a field that isn't shown (#140).
   Used by the "Sent To" row, which used to vanish when empty. */
.qt-muted { color: var(--arl-text-muted); font-style: italic; }

/* Auto-ignore (#143): a customer whose email we deliberately no longer read.
   Amber rather than the accent red — this is a chosen state, not an error, and it
   sits next to the BDR-owner chip where red would read as "something is wrong". */
.qt-cust-chip-off {
  background: #FFEDD5;
  border-color: #FDBA74;
  color: #9A3412;
}
/* #200: the roster chip beside the customer count is a BUTTON — a chip you click to
   filter the list to the accounts with ingestion off. `.qt-cust-chip` was written for a
   <span> and sets neither font-family nor cursor, so a button wearing it renders in the
   browser's default font with an arrow cursor. Scoped to `button` so the span chips on
   every customer row and the detail header are untouched. */
button.qt-cust-chip {
  font-family: inherit;
  line-height: 1.5;
  cursor: pointer;
}
button.qt-cust-chip:hover { filter: brightness(0.97); }

/* The control itself. Lives below the profile form's Save row and is NOT part of
   it — auto-ignore has its own quotes:manage route and applies on confirm, so it
   must not look like a field waiting to be saved. */
/* Closed by (#291 follow-up): a block of its own, outside the profile form, like auto-ignore. */
.qt-closedby {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--arl-border);
  border-radius: 6px;
  background: var(--arl-surface-light);
}
.qt-closedby-text { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.qt-closedby-text strong { font-size: 0.8rem; color: var(--arl-text-primary); }
.qt-closedby-text span { font-size: 0.72rem; line-height: 1.35; color: var(--arl-text-secondary); }
.qt-closedby-auto { display: block; margin-top: 3px; font-size: 0.68rem; color: var(--arl-text-muted); }

.qt-autoignore {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--arl-border);
  border-radius: 6px;
  background: var(--arl-surface-light);
}
.qt-autoignore-on { border-color: #FDBA74; background: #FFF7ED; }
.qt-autoignore-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qt-autoignore-text strong { font-size: 0.8rem; color: var(--arl-text-primary); }
.qt-autoignore-text span { font-size: 0.72rem; line-height: 1.35; color: var(--arl-text-secondary); }
.qt-autoignore-stamp { font-size: 0.68rem; color: var(--arl-text-muted); margin-top: 2px; }
.qt-autoignore button { flex-shrink: 0; white-space: nowrap; }

/* KPI strip */
.qt-cust-kpis { display: flex; align-items: stretch; flex-wrap: wrap; }
.qt-cust-kpi { padding: 2px 16px; border-left: 1px solid var(--arl-border); min-width: 76px; }
.qt-cust-kpi:first-child { border-left: none; padding-left: 0; }
.qt-cust-kpi label {
  display: block;
  font-size: 0.64rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--arl-text-muted);
  margin-bottom: 1px;
  white-space: nowrap;
}
.qt-cust-kpi span {
  font-size: 0.95rem;
  font-weight: 700;
  font-family: var(--arl-font-accent);
  color: var(--arl-text);
  white-space: nowrap;
}

/* Two-track body: profile rail + workspace */
.qt-cust-body {
  display: grid;
  grid-template-columns: minmax(330px, 390px) minmax(0, 1fr);
  gap: 14px;
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.qt-cust-rail { margin-bottom: 0; overflow-y: auto; min-height: 0; }
.qt-cust-rail .qt-new-form-grid { gap: 10px; }
.qt-cust-rail .form-group label { font-size: 0.68rem; }
/* The rail is a scroll container, so the BDR picker's absolutely-positioned
   results dropdown is clipped by it. Cap the list shorter here; the focusin
   handler in renderQtCustomerDetail scrolls the rail to make room below. */
.qt-cust-rail .up-results { max-height: 200px; }
.qt-cust-saverow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.qt-cust-saverow .qt-cust-saveline { margin-top: 0; text-align: left; flex: 1; }

.qt-cust-work {
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding-top: 12px;
}

/* Workspace tabs: the kit's tabs and counts (.fk-tab, .fk-count in forge-kit.css) */
.qt-cust-tabs { display: flex; gap: 4px 22px; border-bottom: 1px solid var(--fk-line); flex: none; }
.qt-cust-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: -1px;
  padding: 10px 0 11px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-md);
  font-weight: 600;
  color: var(--fk-ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.qt-cust-tab:hover { color: var(--fk-ink); }
.qt-cust-tab:focus-visible { outline: none; box-shadow: var(--fk-focus-ring); border-radius: var(--fk-radius-sm); }
.qt-cust-tab.active { color: var(--fk-ink); border-bottom-color: var(--fk-blue-600); }
.qt-cust-tabcount {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--fk-radius-pill);
  font-family: var(--fk-font-ui);
  font-size: var(--fk-type-xs);
  font-weight: 700;
  line-height: 1;
  background: var(--fk-gray-150);
  color: var(--fk-ink);
}
.qt-cust-tab.active .qt-cust-tabcount { background: var(--fk-blue-600); color: var(--fk-white); }

/* Panels: each fills the workspace and scrolls internally */
.qt-cust-panels { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.qt-cust-panel { flex: 1; min-height: 0; overflow-y: auto; padding-top: 12px; }
.qt-cust-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  flex: none;
}

/* Quote History panel: toolbar / scrolling table / pinned count */
#qt-cust-panel-history { overflow: hidden; display: flex; flex-direction: column; }
.qt-cust-hist-toolbar { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.qt-cust-hist-toolbar:not(:empty) { padding-bottom: 8px; }
#qt-cust-quotes { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.qt-cust-hist-scroll { flex: 1; min-height: 0; overflow: auto; }
.qt-cust-hist-scroll thead th {
  position: sticky;
  top: 0;
  background: var(--arl-white);
  z-index: 2;
  box-shadow: 0 1px 0 var(--arl-border);
}
.qt-cust-hist-scroll thead tr:first-child th { height: 31px; box-sizing: border-box; }
.qt-cust-hist-scroll .qt-cust-filter-row td {
  position: sticky;
  top: 31px; /* pinned th height above — kept in lock-step by the height rule */
  background: var(--arl-surface-alt); /* keep the filter row's own tint (opaque for sticky) */
  z-index: 2;
  box-shadow: 0 1px 0 var(--arl-border);
}
.qt-cust-history-count { flex: none; padding-top: 6px; }
/* One-line rows: wrapped city/equipment/date text was inflating rows to ~2×
   height at mid widths. The region x-scrolls (sticky headers keep context). */
.qt-cust-history-table td { white-space: nowrap; }
/* Cap the widest columns (origin/dest/equipment/BDR) — hover shows the full
   value and the row itself click-throughs to the quote. */
.qt-cust-history-table td.qt-cust-cell-clip { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.qt-cust-history-table td:nth-child(7) { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }

/* ── Two-card focus layout: expand one card, collapse the other to a strip ── */
.qt-cust-cardhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.qt-cust-cardhead h3 { margin: 0; }
.qt-cust-expand {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--arl-border);
  border-radius: 6px;
  background: var(--arl-white);
  color: var(--arl-text-secondary);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.qt-cust-expand:hover { color: var(--arl-primary); border-color: var(--arl-primary); }
.qt-cust-expand.active { color: var(--arl-primary); border-color: var(--arl-primary); background: var(--arl-surface-light); }
.qt-cust-tabs .qt-cust-expand { margin-left: auto; align-self: center; }

/* Collapsed strip — hidden until its card is collapsed (desktop rules below). */
.qt-cust-collapsed-bar {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: 1;
  width: 100%;
  padding: 14px 0;
  cursor: pointer;
}
.qt-cust-collapsed-bar:hover .qt-cust-collapsed-label,
.qt-cust-collapsed-bar:hover .qt-cust-collapsed-icon { color: var(--arl-primary); }
.qt-cust-collapsed-icon { color: var(--arl-primary); font-size: 1.1rem; font-weight: 700; }
.qt-cust-collapsed-label {
  writing-mode: vertical-rl;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--arl-text-secondary);
}

/* Collapse is desktop-only; below 1150px the cards stack and this is inert. */
@media (min-width: 1151px) {
  .qt-cust-body.layout-left { grid-template-columns: minmax(0, 1fr) 46px; }
  .qt-cust-body.layout-right { grid-template-columns: 46px minmax(0, 1fr); }
  .qt-cust-body.layout-right .qt-cust-rail,
  .qt-cust-body.layout-left .qt-cust-work {
    display: flex;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
  }
  .qt-cust-body.layout-right .qt-cust-rail > *:not(.qt-cust-collapsed-bar),
  .qt-cust-body.layout-left .qt-cust-work > *:not(.qt-cust-collapsed-bar) { display: none; }
  .qt-cust-body.layout-right .qt-cust-rail > .qt-cust-collapsed-bar,
  .qt-cust-body.layout-left .qt-cust-work > .qt-cust-collapsed-bar { display: flex; }
}

/* Stacked fallback below 1150px: natural page flow, workspace keeps a
   usable height, KPI strip wraps under the identity row. */
@media (max-width: 1150px) {
  #qt-customer-detail-view:not(.hidden),
  body.impersonating #qt-customer-detail-view:not(.hidden) { height: auto; min-height: 0; }
  .qt-cust-body { grid-template-columns: 1fr; }
  .qt-cust-rail { overflow-y: visible; }
  .qt-cust-work { min-height: 60vh; }
  /* In stacked flow the workspace no longer has a fixed height, so cap the
     table region here or a 1000-quote history scrolls the page forever. */
  .qt-cust-hist-scroll { max-height: 70vh; }
  .qt-cust-kpis { width: 100%; }
  .qt-cust-kpi { border-left: none; padding: 2px 16px 2px 0; }
  /* No two-card split when stacked — the expand toggles have nothing to collapse. */
  .qt-cust-expand { display: none; }
}

/* ── Comment template library (#106) ───────────────────────── */
.qt-cb-libwrap { position: relative; display: inline-block; }
.qt-cb-libmenu {
  position: absolute; bottom: calc(100% + 6px); right: 0; z-index: 40;
  min-width: 320px; max-width: 420px; max-height: 340px; overflow-y: auto;
  background: var(--arl-white, #fff); border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius); box-shadow: 0 8px 24px rgba(0,0,0,0.18); padding: 6px;
}
.qt-cb-libmenu-empty { padding: 12px; color: var(--arl-text-muted); font-size: 0.85rem; }
.qt-cb-librow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; }
.qt-cb-librow:hover { background: var(--arl-bg, #f6f6f4); }
.qt-cb-libname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--arl-text); font-size: 0.9rem; }
.qt-cb-libmeta { color: var(--arl-text-muted); font-size: 0.75rem; white-space: nowrap; }
.qt-cb-libdel { border: none; background: none; color: var(--arl-text-muted); cursor: pointer; font-size: 0.9rem; padding: 2px 6px; border-radius: 4px; }
.qt-cb-libdel:hover { color: var(--arl-danger, #c0392b); background: var(--arl-bg, #f6f6f4); }
.qt-cb-libfoot { border-top: 1px solid var(--arl-border); margin-top: 6px; padding-top: 8px; display: flex; justify-content: flex-end; }

/* ── Apply-to-customers modal (#106) ───────────────────────── */
.qt-apply-overlay {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.45); padding: 24px;
}
.qt-apply-dialog {
  background: var(--arl-white, #fff); border: 1px solid var(--arl-border); border-radius: var(--arl-radius);
  width: 100%; max-width: 560px; max-height: 86vh; display: flex; flex-direction: column;
  box-shadow: 0 16px 48px rgba(0,0,0,0.30);
}
.qt-apply-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--arl-border); }
.qt-apply-head h3 { margin: 0; font-size: 1.05rem; color: var(--arl-text); }
.qt-apply-x { border: none; background: none; font-size: 1.1rem; cursor: pointer; color: var(--arl-text-muted); }
.qt-apply-bodywrap { padding: 16px 18px; overflow-y: auto; }
.qt-apply-lbl { display: block; font-size: 0.85rem; color: var(--arl-text-muted); margin-bottom: 12px; }
.qt-apply-lbl .qt-input { display: block; width: 100%; margin-top: 4px; }
.qt-apply-listhead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.qt-apply-listhead .qt-input { flex: 1; }
.qt-apply-all { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--arl-text-muted); white-space: nowrap; }
.qt-apply-list { border: 1px solid var(--arl-border); border-radius: 6px; max-height: 300px; overflow-y: auto; }
.qt-apply-row { display: flex; align-items: center; gap: 10px; padding: 7px 12px; font-size: 0.9rem; color: var(--arl-text); cursor: pointer; border-bottom: 1px solid var(--arl-border); }
.qt-apply-row:last-child { border-bottom: none; }
.qt-apply-row:hover { background: var(--arl-bg, #f6f6f4); }
.qt-apply-empty { padding: 14px; color: var(--arl-text-muted); font-size: 0.85rem; }
.qt-apply-result { margin-top: 12px; }
.qt-apply-ok { color: var(--arl-success, #1e7e34); font-size: 0.9rem; padding: 8px 0; }
.qt-apply-warn { color: var(--arl-text); background: var(--arl-warn-bg, #fff6e5); border: 1px solid var(--arl-warn, #e0a800); border-radius: 6px; padding: 8px 10px; margin-top: 8px; font-size: 0.85rem; }
.qt-apply-names { display: block; color: var(--arl-text-muted); margin: 4px 0 8px; }
.qt-apply-foot { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--arl-border); }
.qt-apply-countlbl { font-size: 0.85rem; color: var(--arl-text-muted); }

/* ── Saved rate-engine presets (#71) ───────────────────────── */
.qt-re-presetwrap { position: relative; display: inline-block; }
.qt-re-presetmenu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  min-width: 300px; max-width: 400px; max-height: 320px; overflow-y: auto;
  background: var(--arl-white, #fff); border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius); box-shadow: 0 8px 24px rgba(0,0,0,0.18); padding: 6px;
}
.qt-re-presetempty { padding: 12px; color: var(--arl-text-muted); font-size: 0.85rem; }
.qt-re-presetrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; }
.qt-re-presetrow:hover { background: var(--arl-bg, #f6f6f4); }
.qt-re-presetname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--arl-text); font-size: 0.9rem; }
.qt-re-presettag { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--arl-text-muted); border: 1px solid var(--arl-border); border-radius: 4px; padding: 1px 5px; }
.qt-re-presetdel { border: none; background: none; color: var(--arl-text-muted); cursor: pointer; font-size: 0.9rem; padding: 2px 6px; border-radius: 4px; }
.qt-re-presetdel:hover { color: var(--arl-danger, #c0392b); background: var(--arl-bg, #f6f6f4); }
/* Preset-menu footer — "Apply to customers…" bulk apply (#111), mirrors .qt-cb-libfoot */
.qt-re-presetfoot { border-top: 1px solid var(--arl-border); margin-top: 6px; padding-top: 8px; display: flex; justify-content: flex-end; }

/* ── Rate-engine cleaner screen (#71) ──────────────────────── */
.qt-re-modebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.qt-re-modeactions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.qt-re-modehint { color: var(--arl-text-muted); font-size: 0.82rem; margin: 6px 0 10px; }

/* Empty-customer onboarding card */
.qt-re-onboard { border: 1px dashed var(--arl-border); border-radius: var(--arl-radius); background: var(--arl-bg, #f6f6f4); padding: 16px 18px; margin: 4px 0 12px; }
.qt-re-onboard-title { font-family: var(--arl-font-accent, inherit); font-size: 0.98rem; color: var(--arl-text); margin-bottom: 4px; }
.qt-re-onboard-sub { color: var(--arl-text-secondary, var(--arl-text-muted)); font-size: 0.85rem; margin-bottom: 12px; }
.qt-re-onboard-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.qt-re-onboard-hint { color: var(--arl-text-muted); font-size: 0.78rem; margin-top: 10px; }

/* Collapsible lane tester */
.qt-re-tester { border: 1px solid var(--arl-border); border-radius: var(--arl-radius); margin-top: 14px; background: var(--arl-white, #fff); }
.qt-re-tester > .qt-re-tgrid,
.qt-re-tester > button,
.qt-re-tester > .qt-re-tresult { margin: 12px; }
.qt-re-tester-sum { cursor: pointer; padding: 10px 14px; font-size: 0.85rem; color: var(--arl-text); list-style: none; user-select: none; font-family: var(--arl-font-accent, inherit); }
.qt-re-tester-sum::-webkit-details-marker { display: none; }
.qt-re-tester-sum::before { content: '▸ '; color: var(--arl-text-muted); }
.qt-re-tester[open] > .qt-re-tester-sum { border-bottom: 1px solid var(--arl-border); }
.qt-re-tester[open] > .qt-re-tester-sum::before { content: '▾ '; }

/* ── RFP / Bulk Quoting (strawman) ─────────────────────────────────────────
   Deliberately plain: these screens exist to be edited with Nouhaila on the
   17th, so nothing here is worth polishing before she has seen it. The page's title,
   its way back and the bid's status sit in the header band (rfp.js, rfpPage). */
.rfp-sub { margin: 4px 0 0; font-size: 0.85rem; color: var(--arl-text-secondary); }
.rfp-loading, .rfp-empty { padding: 28px; text-align: center; color: var(--arl-text-secondary); }
.rfp-error { padding: 16px; background: var(--arl-error-light); color: var(--arl-error); border-radius: var(--arl-radius); }

.rfp-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; background: var(--arl-white); border-radius: var(--arl-radius); overflow: hidden; }
.rfp-table th { text-align: left; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--arl-text-muted); padding: 9px 12px; border-bottom: 2px solid var(--arl-border); white-space: nowrap; }
.rfp-table td { padding: 9px 12px; border-bottom: 1px solid var(--arl-border); }
.rfp-table tbody tr:hover { background: var(--arl-surface-light); }
/* #189: `overflow` — the SHORTHAND — not `overflow-x`.
   `.rfp-table` above sets `overflow: hidden` (it clips the border-radius), which
   sets BOTH axes. Overriding only the x axis here left `overflow-y: hidden` in
   place, so with max-height every one of these tables permanently clipped its own
   tail: no scrollbar, no wheel scroll, nothing. Measured on Nouhaila's real
   41-column bid file, 8 of 41 rows were reachable and 1,668px were not; on a
   100-lane Lanes table, 8 of 100 with 4,487px unreachable — a broker could not
   review the bid they had just priced. Live since 2026-08-08. */
.rfp-table-sm { font-size: 0.8rem; margin-top: 10px; display: block; overflow: auto; max-height: 460px; }
/* The mapping screen is a one-time setup step where the operator has to look at
   EVERY column, so it gets no inner scroller at all — a 460px viewport nested
   inside the page scroll is what made 33 of 41 columns look absent. Same escape
   `.rfp-preview` already uses. */
.rfp-table-map { max-height: none; }
.rfp-name { font-weight: 600; }
.rfp-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rfp-muted { color: var(--arl-text-muted); }
.rfp-why { color: var(--arl-warning); font-size: 0.76rem; }
.rfp-table tr.is-invalid { background: var(--arl-warning-light); }

.rfp-chip { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 8px; border-radius: 3px; background: var(--arl-surface); color: var(--arl-text-secondary); }
.rfp-chip-priced, .rfp-chip-complete { background: var(--arl-success-light); color: var(--arl-success); }
.rfp-flag { font-size: 0.6rem; margin-left: 5px; padding: 1px 5px; border-radius: 2px; background: var(--arl-warning-light); color: var(--arl-warning); text-transform: uppercase; }
/* #182: mileage provenance. Deliberately NOT .rfp-flag's warning colour — a
   lane priced off DAT miles instead of the customer's is information, not a
   problem, and colouring it orange would send brokers hunting for a fault. */
.rfp-src { font-size: 0.6rem; margin-left: 5px; padding: 1px 5px; border-radius: 2px; background: var(--arl-surface); color: var(--arl-text-secondary); text-transform: uppercase; cursor: help; }
.rfp-field { font-family: ui-monospace, Consolas, monospace; font-size: 0.74rem; background: var(--arl-surface); padding: 2px 6px; border-radius: 3px; color: var(--arl-primary-dark); }

.rfp-rail { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 20px; flex-wrap: wrap; }
.rfp-rail li { display: flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--arl-text-muted); padding: 6px 12px; border-radius: 999px; background: var(--arl-surface-light); }
.rfp-rail li.is-done { color: var(--arl-success); }
.rfp-rail li.is-at { background: var(--arl-primary); color: var(--arl-text-on-dark); font-weight: 600; }
.rfp-rail-dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; display: inline-grid; place-items: center; font-size: 0.6rem; }

.rfp-panel { background: var(--arl-white); border: 1px solid var(--arl-border); border-radius: var(--arl-radius-lg); padding: 18px; }
.rfp-panel h3 { margin: 18px 0 4px; font-size: 0.95rem; }
.rfp-panel h3:first-child { margin-top: 0; }
.rfp-stats { display: flex; gap: 22px; margin-bottom: 16px; }
.rfp-stat b { display: block; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.rfp-stat span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--arl-text-muted); }
.rfp-stat.is-warn b { color: var(--arl-warning); }
.rfp-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px 0; }
.rfp-inline { display: inline-flex; gap: 8px; align-items: center; font-size: 0.8rem; color: var(--arl-text-secondary); }
.rfp-msg { font-size: 0.8rem; color: var(--arl-text-secondary); min-height: 18px; margin-top: 6px; }
/* #190: which customer a bid is for — it decides whose markup ladder prices it. */
.rfp-cust { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: 0.8rem; position: relative; }
.rfp-cust-name { font-weight: 600; color: var(--arl-primary-dark); }
/* Not a warning colour: an unlinked bid is the normal state for a prospect, and
   most customers' ladders are copies of the default anyway. It is a fact to state,
   not a fault to shout about. */
.rfp-cust-none { color: var(--arl-text-secondary); }
.rfp-cust-btn { font-family: var(--fk-font-ui); font-size: var(--fk-type-xs); font-weight: 600; padding: 3px 8px; border-radius: var(--fk-radius-sm); border: 1px solid var(--fk-line); background: var(--fk-surface); color: var(--fk-ink-2); cursor: pointer; }
.rfp-cust-btn:hover { background: var(--fk-canvas); color: var(--fk-ink); }
.rfp-cust-pick { position: absolute; top: 100%; left: 0; z-index: 20; width: 340px; background: var(--arl-white); border: 1px solid var(--arl-border); border-radius: 6px; padding: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.10); }
.rfp-cust-pick input { width: 100%; padding: 6px 8px; font-size: 0.8rem; border: 1px solid var(--arl-border); border-radius: 4px; }
/* overflow SHORTHAND, for the same reason as .rfp-table-sm (#189): a capped box
   whose base sets overflow:hidden makes its own tail unreachable. */
.rfp-cust-results { max-height: 240px; overflow: auto; margin-top: 6px; }
.rfp-cust-row { padding: 6px 8px; border-radius: 4px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
.rfp-cust-row:hover { background: var(--arl-surface-light); }
.rfp-cust-hint { padding: 6px 8px; color: var(--arl-text-muted); font-size: 0.76rem; }

/* #182: the per-bid mileage choice, sitting under the basis line it changes. */
.rfp-miles-pick { margin: 2px 0 14px; }
/* .rfp-msg carries margin-top/min-height for block use; inside this inline-flex
   row they push its text off the select's baseline and stretch the row. */
.rfp-miles-pick .rfp-msg { margin-top: 0; min-height: 0; }
.rfp-note { font-size: 0.8rem; background: var(--arl-surface-light); padding: 9px 12px; border-radius: var(--arl-radius); margin: 10px 0; }
.rfp-note-ask { background: var(--arl-warning-light); color: var(--arl-warning); }
.rfp-pick { font-size: 0.76rem; padding: 3px 6px; border: 1px solid var(--arl-border); border-radius: 4px; background: var(--arl-white); max-width: 220px; }
.rfp-pick.is-set { border-color: var(--arl-primary); color: var(--arl-primary-dark); font-weight: 600; }

/* ── Step rail: reachable steps go back (feedback #133) ───────────────────── */
/* The button carries the padding the <li> used to, so a clickable and a locked
   step sit on the same baseline and the pill does not change size. Font and
   colour are inherited so the button looks like the text it replaced. */
.rfp-rail li.is-clickable { padding: 0; }
.rfp-rail-btn { display: flex; align-items: center; gap: 7px; padding: 6px 12px; border: 0;
  border-radius: 999px; background: none; color: inherit; font: inherit; cursor: pointer; }
.rfp-rail-btn:hover { background: var(--arl-surface-hover, rgba(0, 0, 0, 0.06)); }
.rfp-rail li.is-at .rfp-rail-btn:hover { background: var(--arl-primary-dark); }
.rfp-rail-btn:focus-visible { outline: 2px solid var(--arl-primary); outline-offset: 1px; }
.rfp-rail li.is-locked { opacity: 0.55; cursor: not-allowed; }

/* ── Whole-file constants on the mapping screen (feedback #133) ───────────── */
.rfp-consts { margin: 14px 0; padding: 12px 14px; border: 1px dashed var(--arl-border);
  border-radius: var(--arl-radius); background: var(--arl-surface-light); }
.rfp-consts h4 { margin: 0 0 2px; font-size: 0.85rem; }
.rfp-const { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 0.8rem; }
.rfp-const > span { min-width: 150px; color: var(--arl-text-secondary); }
.rfp-const input { font-size: 0.8rem; padding: 4px 8px; border: 1px solid var(--arl-border);
  border-radius: 4px; background: var(--arl-white); min-width: 220px; }
.rfp-const em { font-style: normal; font-size: 0.72rem; }

/* ── One end typed once, the other read from a colour (feedback #146) ─────── */
/* Same dashed-box language as .rfp-consts above: both are "the file does not say
   this, so tell us here", and they sit next to each other on the mapping screen. */
.rfp-fixed { margin: 14px 0; padding: 12px 14px; border: 1px dashed var(--arl-border);
  border-radius: var(--arl-radius); background: var(--arl-surface-light); }
.rfp-fixed h4 { margin: 0 0 2px; font-size: 0.85rem; }
.rfp-fixed h5 { margin: 12px 0 2px; font-size: 0.78rem; }
.rfp-fixed-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.rfp-fixed-in { display: flex; flex-direction: column; gap: 3px; font-size: 0.72rem; }
.rfp-fixed-in > span { color: var(--arl-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.rfp-fixed-in input { font-size: 0.8rem; padding: 4px 8px; border: 1px solid var(--arl-border);
  border-radius: 4px; background: var(--arl-white); min-width: 150px; }
.rfp-fixed-in input[size="4"] { min-width: 60px; }
.rfp-fixed-in input[size="8"] { min-width: 90px; }

/* Getting the direction backwards is the one mistake here that produces a whole
   file of plausible wrong money, so undoing it is a real control, not a link. */
.rfp-swap { font-size: 0.74rem; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--arl-border); background: var(--arl-white); color: var(--arl-text-secondary); }
.rfp-swap:hover { border-color: var(--arl-primary); color: var(--arl-primary-dark); }
.rfp-swap:focus-visible { outline: 2px solid var(--arl-primary); outline-offset: 1px; }

.rfp-rules { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--arl-border); }
.rfp-rule-group { margin-top: 10px; }
.rfp-rule-where { display: block; font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--arl-text-muted); margin-bottom: 4px; }
.rfp-rule { display: flex; align-items: center; gap: 10px; margin-top: 5px; font-size: 0.8rem; }
.rfp-rule-name { display: flex; flex-direction: column; min-width: 190px; line-height: 1.25; }
.rfp-rule-name em { font-style: normal; font-size: 0.7rem; }
.rfp-rule-val { font-size: 0.8rem; padding: 4px 8px; border: 1px solid var(--arl-border);
  border-radius: 4px; background: var(--arl-white); min-width: 140px; }
/* An empty value is a rule the server refuses, and the select above it looks set.
   Mark the input, or the disabled Confirm button has no visible cause. */
.rfp-rule-val.is-empty { border-color: var(--arl-warning); background: var(--arl-warning-light); }

/* The colour itself, so the operator matches what they can see in Excel rather
   than a hex code. `is-none` has to be VISIBLE — an invisible swatch for "no
   colour" reads as a rendering failure, not as an option. */
.rfp-swatch { display: inline-grid; place-items: center; width: 18px; height: 18px;
  border-radius: 3px; border: 1px solid var(--arl-border); font-weight: 700;
  font-size: 0.72rem; font-style: normal; flex: 0 0 auto; background: var(--arl-white); }
.rfp-swatch.is-none { background: repeating-linear-gradient(45deg,
  var(--arl-surface) 0 3px, var(--arl-white) 3px 6px); }

.rfp-preview { margin-top: 12px; }
.rfp-preview h5 { margin: 0 0 2px; font-size: 0.78rem; }
/* Narrower than the lane table it previews: five sample rows never need to scroll,
   and a 460px max-height box around three rows looks broken. */
.rfp-preview .rfp-table-sm { max-height: none; margin-top: 6px; }

/* ── Which markup schedule will price this bid (feedback #134) ────────────── */
.rfp-markup { margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--arl-border);
  border-radius: var(--arl-radius); background: var(--arl-surface-light); }
.rfp-markup h4 { margin: 0 0 8px; font-size: 0.85rem; }
.rfp-bands { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 6px; }
.rfp-bands li { display: flex; align-items: baseline; gap: 6px; background: var(--arl-white);
  border: 1px solid var(--arl-border); border-radius: 999px; padding: 4px 11px; font-size: 0.76rem; }
.rfp-bands li span { color: var(--arl-text-muted); }
.rfp-bands li b { font-variant-numeric: tabular-nums; color: var(--arl-primary-dark); }

/* ── Delete a bid (feedback #133) ─────────────────────────────────────────── */
.rfp-row-actions { text-align: right; white-space: nowrap; }
.rfp-del { font-size: 0.72rem; padding: 3px 9px; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--arl-border); background: var(--arl-white); color: var(--arl-text-muted); }
.rfp-del:hover { border-color: var(--arl-danger, #C62828); color: var(--arl-danger, #C62828); }

/* ── #172: markup tab as mileage-tier tables ──────────────────────────────
   Replaces ~330px stacked cards with ~33px rows. Colours are --arl-* tokens
   only; widths are fixed on the inputs (doubled class, to out-specify the
   generic `.qt-re-tiers input` rule) because a money column stretched across
   the 880px modal reads as a text field and stops lining up with its header. */
.qt-re-tier-wrap { overflow-x: auto; margin: 6px 0 2px; }
.qt-re-tiers { width: auto; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.qt-re-tiers th {
  font-family: var(--arl-font-accent); font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--arl-text-muted); font-weight: 600;
  text-align: left; padding: 0 8px 6px; white-space: nowrap;
}
.qt-re-tiers th.qt-re-tier-n, .qt-re-tiers td.qt-re-tier-n { text-align: right; }
.qt-re-tiers td { padding: 3px 8px; vertical-align: middle; }
.qt-re-tiers tbody tr:nth-child(odd) { background: var(--arl-surface-subtle, #f7f9fb); }
/* Min-above-max marks the two inputs, matching .qt-re-clamps-bad above — a
   whole red row overstates a recoverable typo. */
.qt-re-tiers tr.qt-re-tier-bad input { border-color: var(--arl-danger, #b91c1c); }
.qt-re-tier-cell { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.qt-re-tiers input {
  box-sizing: border-box; padding: 5px 8px; font-size: 13px; text-align: right;
  border: 1px solid var(--arl-border); border-radius: 4px;
  background: var(--arl-white); color: var(--arl-text);
  font-variant-numeric: tabular-nums;
}
.qt-re-tiers input:disabled { background: var(--arl-surface-subtle, #eef2f5); color: var(--arl-text-muted); }
.qt-re-tiers .qt-re-tw-from.qt-re-tw-from, .qt-re-tiers .qt-re-tw-to.qt-re-tw-to { width: 96px; }
.qt-re-tiers .qt-re-tw-min.qt-re-tw-min { width: 108px; }
.qt-re-tiers .qt-re-tw-val.qt-re-tw-val { width: 88px; }
.qt-re-tier-affix { color: var(--arl-text-muted); font-size: 12px; padding: 0 1px; }
.qt-re-tier-ge { color: var(--arl-text-muted); font-size: 12px; padding-right: 2px; }
.qt-re-tier-act { width: 1%; white-space: nowrap; }
.qt-re-tier-btn {
  background: none; border: none; cursor: pointer; font-size: 14px; line-height: 1;
  padding: 4px 6px; color: var(--arl-text-muted); border-radius: 4px;
}
.qt-re-tier-btn:hover { background: var(--arl-surface-subtle, #eef2f5); color: var(--arl-danger, #d64545); }
.qt-re-tier-unit { font-size: 11px; padding: 2px 4px; max-width: 150px; }
.qt-re-tier-group {
  display: flex; align-items: center; gap: 6px; margin: 14px 0 2px;
  font-size: 12px; color: var(--arl-text-secondary);
}
.qt-re-tier-chip {
  background: var(--arl-surface-subtle, #eef2f5); border: 1px solid var(--arl-border);
  border-radius: 999px; padding: 2px 10px; font-size: 12px; color: var(--arl-text);
}

/* #172: where the carrier rate comes from, shown instead of "no rules" when a
   customer has no carrier blend — the normal setup for 135 of 137 customers. */
.qt-re-sum-prov-note {
  font-size: 12px; color: var(--arl-text-secondary);
  padding: 6px 0 2px; line-height: 1.5;
}

/* ─── Quote lane map (#193) ────────────────────────────────────────
 * Every colour goes through an --arl-* token, which the suite enforces for this
 * stylesheet. That is not bureaucracy here: the tokens are redefined for the
 * dark theme, so a bare hex would give a light-grey country on a dark card.
 * The fallback after each token is only reached if the token is ever removed.
 */

.lm-wrap { margin: 0 0 14px; }
.lm-svg {
  width: 100%;
  height: auto;
  display: block;
  background: var(--arl-surface-light, #F5F5F5);
  border: 1px solid var(--arl-border, #E0E0E0);
  border-radius: 6px;
}
.lm-svg.lm-dragging { cursor: grabbing; }
.lm-svg { cursor: grab; touch-action: none; }
/* The land itself — deliberately quiet. It is orientation, not the subject,
 * and it must not compete with two small pins drawn on top of it. */
.lm-land {
  fill: var(--arl-border, #E0E0E0);
  stroke: none;
}
/* Six tints for the states (#263), assigned by a greedy colouring so no two
 * states that touch share one. Quiet on purpose — the point is to separate one
 * state from the next, not to categorise them, and anything louder turns the
 * backdrop into the subject. Mixing toward the card background keeps them quiet
 * in both themes without needing a second set of tokens.
 *
 * ⚠ SIX DISTINCT HUES, and the first attempt did not have them. It mixed
 * toward primary, text-secondary, success, warning and white — but
 * text-secondary is #666 and white is #FFF, so three of the six came out as
 * near-identical greys against a #E0E0E0 base. On screen, half the country was
 * one colour and states ran together, which is the exact confusion the tinting
 * exists to remove. Every tint now carries real hue — hue is what separates
 * them, not how strong the mix is, so they stay near 74% and stay quiet.
 *
 * Verified by rendering the map and looking at it, not by reading the values. */
.lm-state-0 { fill: color-mix(in srgb, var(--arl-border, #E0E0E0) 74%, var(--arl-primary-light, #3388C7)); }
.lm-state-1 { fill: color-mix(in srgb, var(--arl-border, #E0E0E0) 74%, var(--arl-warning, #D97706)); }
.lm-state-2 { fill: color-mix(in srgb, var(--arl-border, #E0E0E0) 74%, var(--arl-success, #16A34A)); }
.lm-state-3 { fill: color-mix(in srgb, var(--arl-border, #E0E0E0) 76%, var(--arl-error, #E11A22)); }
.lm-state-4 { fill: color-mix(in srgb, var(--arl-border, #E0E0E0) 55%, var(--arl-text-muted, #999999)); }
.lm-state-5 { fill: color-mix(in srgb, var(--arl-border, #E0E0E0) 78%, var(--arl-primary-dark, #00437A)); }
.lm-state-label {
  fill: var(--arl-text-muted, #999999);
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  user-select: none;
}
.lm-city-dot { fill: var(--arl-text-secondary, #666666); }
.lm-city-label {
  fill: var(--arl-text-primary, #1A1A1A);
  pointer-events: none;
  user-select: none;
  /* The land behind a label can be any of six tints, so the name needs its own
   * contrast rather than relying on what happens to be underneath it.
   * non-scaling-stroke for the same reason as the pin: a halo measured in user
   * units grows relative to the text as you zoom in and swallows it. */
  paint-order: stroke;
  stroke: var(--arl-surface-light, #F5F5F5);
  stroke-width: 2.5px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.lm-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.lm-spacer { flex: 1 1 auto; }
.lm-btn {
  font: inherit;
  font-size: 12px;
  padding: 3px 9px;
  border: 1px solid var(--arl-border, #E0E0E0);
  background: var(--arl-white, #FFFFFF);
  color: var(--arl-text-secondary, #666666);
  border-radius: 4px;
  cursor: pointer;
  line-height: 1.5;
}
.lm-btn:hover:not(:disabled) {
  border-color: var(--arl-primary, #E11A22);
  color: var(--arl-primary, #E11A22);
}
.lm-btn:disabled { opacity: 0.45; cursor: default; }
.lm-btn-zoom { width: 28px; text-align: center; padding: 3px 0; }
/* #264 — the link out to Google Maps. An <a>, not a <button>, because it is
 * navigation: middle-click and "open in new tab" have to work, and it needs no
 * JavaScript at all. Styled to match .lm-btn so the control bar reads as one
 * row of controls rather than a row plus a stray link. */
.lm-maps-btn {
  font: inherit;
  font-size: 12px;
  padding: 3px 9px;
  border: 1px solid var(--arl-border, #E0E0E0);
  background: var(--arl-white, #FFFFFF);
  color: var(--arl-text-secondary, #666666);
  border-radius: 4px;
  line-height: 1.5;
  text-decoration: none;
  white-space: nowrap;
}
.lm-maps-btn:hover {
  border-color: var(--arl-primary, #0060AF);
  color: var(--arl-primary, #0060AF);
  text-decoration: none;
}
/* #264 — the inline Google map, expanded on click. Nothing is requested from
 * Google until then; see the note in lane-map.js for why that is the design
 * and not an optimisation. */
.lm-embed {
  margin-top: 8px;
  border: 1px solid var(--arl-border, #E0E0E0);
  border-radius: 6px;
  overflow: hidden;
}
.lm-embed[hidden] { display: none; }
.lm-embed-frame {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}
.lm-embed-out {
  display: block;
  padding: 6px 10px;
  font-size: 12px;
  border-top: 1px solid var(--arl-border, #E0E0E0);
  background: var(--arl-surface-light, #F5F5F5);
  color: var(--arl-text-secondary, #666666);
  text-decoration: none;
}
.lm-embed-out:hover { color: var(--arl-primary, #0060AF); }
/* The toggle reads as pressed while the panel is open. */
.lm-maps-btn-open {
  border-color: var(--arl-primary, #0060AF);
  color: var(--arl-primary, #0060AF);
  background: var(--arl-surface-light, #F5F5F5);
}
/* The standalone form, shown only when there is no map to put a button on. */
.lm-maps-standalone {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 14px;
}
.lm-maps-note {
  font-size: 12px;
  color: var(--arl-text-muted, #999999);
}
.lm-hint {
  margin-left: auto;
  color: var(--arl-text-muted, #999999);
  font-size: 11px;
}
/* ── The lane, and the two ends of it ──────────────────────────────────────
 * The endpoints are the SUBJECT of this map; the towns and the land are
 * context. Before this they were the only two places on it without a name, so
 * the eye went to the towns around them instead and you had to read the legend
 * underneath to find the lane. */
.lm-lane {
  stroke: var(--arl-text-primary, #1A1A1A);
  stroke-width: 2;
  stroke-dasharray: 7 5;
  stroke-linecap: round;
  /* Non-scaling on both this and the casing, so the lane keeps one weight at
   * every zoom instead of thickening as you go in. */
  vector-effect: non-scaling-stroke;
  fill: none;
}
/* A white under-stroke, because the dashed line crosses six different state
 * tints and vanishes over the darker ones. */
.lm-lane-casing {
  stroke: var(--arl-white, #FFFFFF);
  stroke-width: 5.5;
  stroke-linecap: round;
  opacity: 0.9;
  vector-effect: non-scaling-stroke;
  fill: none;
}
/* Which way the freight moves. The map already implies it; this says it. */
.lm-lane-arrow > path {
  fill: var(--arl-text-primary, #1A1A1A);
  stroke: var(--arl-white, #FFFFFF);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.lm-end-label {
  font-weight: 700;
  dominant-baseline: middle;
  pointer-events: none;
  user-select: none;
  /* Heavier halo than a town label: this one has to stay readable over the
   * lane line, a pin and whatever state tint is underneath. */
  paint-order: stroke;
  stroke: var(--arl-surface-light, #F5F5F5);
  stroke-width: 3.5px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* ⚠ The label is the ONLY thing distinguishing the two ends for anyone with
 * red-green colour blindness — roughly one man in twelve. Before it, colour
 * was carrying that on its own. */
.lm-end-origin { fill: var(--arl-success, #16A34A); }
.lm-end-dest { fill: var(--arl-error, #E11A22); }
.lm-pin {
  stroke: var(--arl-white, #FFFFFF);
  stroke-width: 2;
  /* ⚠ WITHOUT non-scaling-stroke the ring is measured in USER units, so it
   * keeps its size while the pin's radius shrinks with the zoom — at a lane-level
   * view the white ring is wider than the pin and both endpoints render as white
   * blobs with a speck of colour in the middle. The radius is scaled in JS; the
   * stroke has to be told separately, because nothing scales it. */
  vector-effect: non-scaling-stroke;
}
.lm-pin-origin { fill: var(--arl-success, #16A34A); }
.lm-pin-dest { fill: var(--arl-error, #E11A22); }
.lm-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--arl-text-secondary, #666666);
  flex-wrap: wrap;
}
.lm-key {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
}
.lm-key-origin { background: var(--arl-success, #16A34A); }
.lm-key-dest { background: var(--arl-error, #E11A22); }
.lm-arrow { color: var(--arl-text-muted, #999999); }
.lm-note {
  margin-top: 4px;
  font-size: 11px;
  color: var(--arl-warning, #D97706);
}

/* ── BDR Control Center (#237) ────────────────────────────────────────────── */
/* Lives in this stylesheet rather than its own so index.html gains no second
   <link>. Every colour is a brand token — a literal here is how a page drifts
   away from the rest of the app one shade at a time. */

.qt-cc-wrap { padding: 16px 0; container: qt-cc / inline-size; }

/* #256 item 5: the totals for the customers shown, five of the kit's number tiles above the
   tabs. The tiles step down by the page's own width, not the window's, so the sidebar is
   counted: three then two to a row, before a dollar figure would outgrow its tile. Two to a
   row, the Margin takes a row of its own ($4,259,645 is wider than half a phone) and
   Margin % moves up beside Win %. */
.qt-cc-totals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@container qt-cc (max-width: 900px) { .qt-cc-totals { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container qt-cc (max-width: 540px) {
  .qt-cc-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .qt-cc-total-margin { grid-column: span 2; }
}
/* The narrowest phones (360px and below): a smaller figure in a tighter tile, so 13,741 still
   fits half the row. */
@container qt-cc (max-width: 300px) {
  .qt-cc-total { padding: 12px; }
  .qt-cc-total .fk-kpi-value { font-size: var(--fk-type-xl); }
}
.qt-cc-totals-off { font-size: var(--fk-type-sm); color: var(--fk-ink-2); margin: 0 0 12px; }

/* "One FORGE look" step 6: the equipment as the kit's tabs, then one card holding the
   filter bar (search, BDR, the count), the summary, the edit line and the table. */
.qt-cc-tabs { margin-bottom: 12px; }
.qt-cc-card { overflow: hidden; }
.qt-cc-card > .qt-cc-summary,
.qt-cc-card > .qt-cc-edited { margin-left: 16px; margin-right: 16px; }

.qt-cc-summary { font-size: var(--fk-type-sm); color: var(--fk-ink-2); margin: 10px 16px; }
.qt-cc-summary strong { color: var(--arl-error); }

/* #256: the line that says what an inline edit just changed. Quiet — one band on one
   customer is a small, expected act. It is always there for an editor (the hint, then
   the last change), and both states share one min-height, so a save never pushes the
   table down under the cursor. */
.qt-cc-edited {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
  padding: 8px 12px; border-radius: var(--arl-radius); font-size: 13px;
  min-height: 42px; box-sizing: border-box;
  background: var(--arl-surface-light); border: 1px solid var(--arl-border);
}
.qt-cc-edited-hint { color: var(--arl-text-muted); font-size: 12px; }

/* The table can be wider than the pane with ten bands on it; scroll the table,
   never the page. */
.qt-cc-tablewrap { overflow-x: auto; }
.qt-cc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.qt-cc-table th, .qt-cc-table td {
  padding: 6px 10px; border-bottom: 1px solid var(--fk-gray-150); text-align: left;
  white-space: nowrap;
}
/* The kit's table headings (forge-kit.css .fk-table th): small grey words on a pale row. */
.qt-cc-table thead th {
  position: sticky; top: 0; background: var(--fk-gray-50);
  vertical-align: bottom; font-weight: 600; font-size: var(--fk-type-xs); color: var(--fk-ink-2);
  border-bottom-color: var(--fk-line);
}
.qt-cc-table tbody tr:hover { background: var(--fk-blue-50); }
.qt-cc-table .qt-cc-name { white-space: normal; min-width: 180px; }
/* A customer reads as a name, in bold, and shows it opens on hover: the kit's list link,
   not the browser's blue underline (Quote Tracker's customers list draws its own so). */
.qt-cc-table .qt-cc-name a { color: var(--fk-ink); font-weight: 600; text-decoration: none; }
.qt-cc-table .qt-cc-name a:hover { color: var(--fk-link); text-decoration: underline; }

.qt-cc-col-label { display: block; }

/* The evidence strip under each column header. Deliberately quiet — it informs a
   judgement, it is not a verdict. */
.qt-cc-ev { font-size: 10px; font-weight: 400; color: var(--arl-text-muted); margin-top: 2px; }
.qt-cc-ev-over { color: var(--arl-success); }
.qt-cc-ev-under { color: var(--arl-warning); }
.qt-cc-ev-n { color: var(--arl-text-muted); font-weight: 400; }
.qt-cc-ev-none { visibility: hidden; }

.qt-cc-cell { text-align: right; font-variant-numeric: tabular-nums; }
/* #256: a percentage a BDR may change looks like it can be clicked, and says so again
   on keyboard focus — each one is a tab stop. The outline sits INSIDE the cell so the
   row does not shift by a pixel when it appears. */
.qt-cc-cell-edit { cursor: pointer; }
.qt-cc-cell-edit:hover, .qt-cc-cell-edit:focus {
  outline: 1px dashed var(--arl-primary); outline-offset: -3px;
}
.qt-cc-cell-input {
  width: 5em; padding: 2px 4px; font: inherit; text-align: right;
  border: 1px solid var(--arl-primary); border-radius: var(--arl-radius);
  background: var(--arl-white); color: var(--arl-text);
}
.qt-cc-saving { opacity: 0.55; }
/* 'no rule' and 'no ladder' are WORDS, never a blank or a 0 — a 0 would assert a
   0% margin, which is a different fact. */
.qt-cc-none { color: var(--arl-text-muted); font-style: italic; font-size: 12px; }
.qt-cc-blocked { color: var(--arl-error); font-style: italic; font-size: 12px; }
.qt-cc-mixed { color: var(--arl-text-secondary); font-size: 12px; }
.qt-cc-partial { color: var(--arl-warning); }

.qt-cc-cov { text-align: right; font-variant-numeric: tabular-nums; }
.qt-cc-cov-weak { color: var(--arl-warning); }
.qt-cc-cov-none { color: var(--arl-text-muted); }
.qt-cc-cov-n { color: var(--arl-text-muted); font-size: 11px; }

/* What auto-quote has actually done for a customer (#252). Three states, and
   they must not look alike: a measured result, "nothing yet", and "could not
   read". Every colour goes through an --arl-* token — the tokens are redefined
   for the dark theme, so a bare hex renders wrong on one of them. */
.qt-cc-aq { font-size: 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qt-cc-aq-none { color: var(--arl-text-muted); }
.qt-cc-aq-unknown { color: var(--arl-warning); }
.qt-cc-aq-warn { color: var(--arl-error); }

.qt-cc-toggle {
  min-width: 46px; padding: 3px 10px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--arl-border); background: var(--arl-surface);
  color: var(--arl-text-secondary); font-size: 12px;
}
.qt-cc-toggle.is-on {
  background: var(--arl-success); border-color: var(--arl-success);
  color: var(--arl-text-on-dark);
}

/* #252: the mode control is a four-state <select>, because two of the states
   email the customer and an on/off pill cannot say which one is set. */
.qt-cc-modesel {
  padding: 2px 6px; border-radius: 6px; cursor: pointer; font-size: 12px;
  border: 1px solid var(--arl-border); background: var(--arl-surface);
  color: var(--arl-text);
}
/* 🔴 A mode that can reach a CUSTOMER looks different from one that cannot.
   `draft` and `send` both put text on the customer's thread; `off` and `stamp`
   are internal. Someone scanning 292 rows for "who is armed" must be able to
   see it without reading each label. Amber rather than green: this is a state to
   notice, not a state to feel good about. */
.qt-cc-modesel-live {
  border-color: var(--arl-warning);
  background: var(--arl-warning-light);
  font-weight: 600;
}
.qt-cc-mode-ro { font-size: 12px; color: var(--arl-text-secondary); }
/* Hard-disabled where the engine demonstrably cannot price the customer. Arming one
   of those stamps nothing and raises no error, and the BDR concludes the feature is
   broken rather than that the data is thin. */
.qt-cc-mode-blocked {
  font-size: 12px; color: var(--arl-text-muted); font-style: italic; cursor: help;
}


/* ── #252 auto-quote reply builder ────────────────────────────────────────
   The builder itself reuses .qt-cb-* wholesale. Only the preview chrome is
   new, because this one is an EMAIL rather than an internal note and needs to
   look like one — an operator judging customer-facing wording against a
   preview styled like a Front comment will misjudge it.

   ⚠️ .qt-rb-mail-body deliberately does NOT set `white-space: pre-wrap` the way
   .qt-cb-note-body does. That rule is correct for the comment builder, whose
   body is plain text with real newlines. This body is HTML from the server,
   where line breaks come from block elements — pre-wrap here would add a second
   blank line after every <p> and make the preview disagree with what the
   customer actually receives. */
.qt-rb-mail {
  background: var(--arl-white, #fff);
  border: 1px solid var(--arl-border, #e0e0e8);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(20,22,40,.04), 0 4px 16px rgba(20,22,40,.06);
  overflow: hidden;
}
.qt-rb-mail-head {
  padding: 9px 12px;
  background: var(--arl-surface-alt, #fcfcff);
  border-bottom: 1px solid var(--arl-border, #eef0f5);
  font-size: 11px;
  line-height: 1.5;
  color: var(--arl-text-secondary);
}
.qt-rb-mail-head b { color: var(--arl-text, #23252f); font-weight: 600; }
.qt-rb-mail-body {
  padding: 14px;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--arl-text, #23252f);
  word-break: break-word;
}
/* The rendered reply ships its own inline styles for the mail client, so keep
   the container's opinions minimal — anything set here that the email does not
   carry makes the preview a flattering lie. */
.qt-rb-mail-body table { border-collapse: collapse; }
.qt-rb-mail-body a { color: var(--arl-primary, #3b82f6); text-decoration: none; }
/* --arl-error, not --arl-danger: the latter does not exist, so that fallback
   would have silently applied on every theme while looking token-driven. */
.qt-rb-mail-err {
  color: var(--arl-error, #b3261e);
  font-size: 0.78rem;
  line-height: 1.5;
}
.qt-cb-menu-group {
  padding: 6px 10px 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--arl-text-secondary);
}