/* Phase AA: make rate cards feel like a calculator builder, not a spreadsheet.
   Declutter pass: one compact header + a table-first layout. Sections are
   separated by 1px hairlines (var(--border), matching .divider) instead of
   large whitespace gaps — DS Rule §1 (no whitespace-as-separator). */
.qf-builder-hero {
  margin: 0 0 8px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--border);
}
.qf-builder-hero-top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.qf-builder-hero-lead {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.qf-builder-kicker {
  color: var(--accent);
  font: 700 11px var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.qf-builder-hero h2 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -.035em;
}
.qf-builder-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.qf-builder-actions button {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-btn);
  padding: 8px 12px;
  background: rgba(255,255,255,.035);
  color: var(--ink-soft);
  font-weight: 750;
  cursor: pointer;
}
.qf-builder-actions button:hover {
  border-color: var(--accent);
  color: var(--ink);
}
/* ── Single help-cue pattern: a top-left `?` disclosure. Reused for every
   section header on the rate page so there is exactly one help affordance. */
.qf-help-cue {
  position: relative;
  flex: 0 0 auto;
}
.qf-help-cue > summary {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--muted);
  font: 750 12px var(--font-mono);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.qf-help-cue > summary::-webkit-details-marker { display: none; }
.qf-help-cue[open] > summary,
.qf-help-cue > summary:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.qf-help-cue-body {
  position: absolute;
  top: 32px;
  left: 0;
  z-index: 5;
  width: 300px;
  max-width: 80vw;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
  padding: 12px;
}
.qf-help-cue-body strong { display: block; color: var(--ink); margin-bottom: 8px; }
.qf-help-cue-body ol { margin: 0; padding-left: 16px; color: var(--ink-soft); font-size: 13px; }
.qf-help-cue-body p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
/* Compact inline hint links replace the old accent-on-accent .notice tips. */
.qf-rate-hint {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.qf-rate-hint a { color: var(--accent); }
.qf-rate-scan {
  margin: 8px 0;
  display: block;
}
.qf-rate-scan-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.qf-rate-scan-stats button {
  display: grid;
  align-content: center;
  gap: 5px;
  min-height: 76px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface);
  color: var(--ink-soft);
  text-align: left;
  padding: 11px;
  cursor: pointer;
}
.qf-rate-scan-stats button:hover,
.qf-rate-scan-stats button.active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-soft);
}
.qf-rate-scan-stats span {
  color: var(--muted);
  font-size: 11px;
}
.qf-rate-scan-stats strong {
  color: var(--ink);
  font-size: 22px;
  letter-spacing: -.04em;
}
.qf-rate-table-wrap {
  position: relative;
  padding-top: 16px; /* room for the pill so overflow-x clipping never eats it */
  overflow-x: auto; max-width: 100%; min-width: 0; /* TABLE scrolls, never the page — wrap pinned to its column at every width (min-width:0 stops a grid/flex ancestor growing it to the table's intrinsic ~1413px) */
}
.qf-rate-table-wrap::before {
  content: 'Rate builder';
  position: absolute;
  top: 2px;
  left: 18px;
  padding: 4px 8px;
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--border);
  font: 700 10px var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  z-index: 2;
}
.qf-rate-table-wrap .table {
  margin-top: 6px;
  /* Rate cards carry more columns ($/MI, MIN, FLAT, FUEL%, MARGIN%, ENABLED +
     actions) than the other grids. Let the table grow to its natural width so
     the wrap's overflow-x actually scrolls, instead of compressing columns and
     clipping the Duplicate/Delete/NEEDS PRICE action cell at the right edge. */
  width: max-content;
  min-width: 100%;
}
/* Last cell holds Duplicate + Delete + the status badge. Let them wrap
   cleanly and stay right-aligned inside the cell so "NEEDS PRICE" never
   spills over the row edge (desktop or mobile 375). */
.qf-rate-table-wrap tbody td:last-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 96px;
}
.qf-rate-table-wrap tbody tr {
  transition: all .2s ease;
}
.qf-rate-table-wrap tbody tr:hover {
  box-shadow: inset 3px 0 0 var(--accent);
}
.qf-rate-table-wrap tbody tr.qf-rate-row-gap {
  box-shadow: inset 3px 0 0 var(--warning);
}
.qf-rate-table-wrap tbody tr.qf-rate-row-disabled {
  opacity: .72;
  box-shadow: inset 3px 0 0 var(--muted);
}
.qf-rate-table-wrap tbody tr.qf-rate-row-ready {
  box-shadow: inset 3px 0 0 var(--success);
}
.qf-rate-table-wrap td:first-child,
.qf-rate-table-wrap th:first-child {
  padding-left: 18px;
}
.qf-rate-row-status {
  display: inline-flex;
  margin-left: 0;
  padding: 4px 7px;
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  color: var(--muted);
  font: 700 10px var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.qf-rate-row-gap .qf-rate-row-status { color: var(--warning); }
.qf-rate-row-ready .qf-rate-row-status { color: var(--success); }
/* Phase BG: rate save states and duplicate action.
   Declutter pass: the panel is now just the live-status chip, flush against
   the header rhythm (no card chrome). */
.qf-rate-save-panel {
  display: flex;
  align-items: center;
  margin: 8px 0;
}
.qf-rate-live {
  border: 1px solid var(--border);
  border-radius: var(--radius-btn);
  padding: 8px 11px;
  color: var(--muted);
  background: var(--surface);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}
.qf-rate-live[data-mode="saving"] {
  border-color: rgba(51, 86, 238,.45);
  color: var(--accent-2);
}
.qf-rate-live[data-mode="saved"] {
  border-color: rgba(51, 86, 238,.42);
  color: var(--success);
}
.qf-rate-live[data-mode="error"] {
  border-color: rgba(239,68,68,.48);
  color: var(--danger);
}
.qf-rate-duplicate-btn {
  margin-right: 0;
  border-style: dashed !important;
}
.qf-rate-duplicate-btn:disabled {
  opacity: .65;
  cursor: progress;
}
/* ── Fuel-surcharge segment toggle: selected = scoped outline+tint, NOT a
   global solid .btn-primary fill (mirrors the compliant scan-chip selected
   style above). Scoped to .qf-fsc-seg so .btn-primary is untouched globally. */
.qf-fsc-seg.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-soft);
}
/* ── Disclosure summaries (FSC explanation + LTL editor body). */
.qf-fsc-details > summary,
.qf-ltl-details > summary {
  cursor: pointer;
  color: var(--ink-soft);
  font-weight: 650;
  font-size: 13px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.qf-fsc-details > summary::-webkit-details-marker,
.qf-ltl-details > summary::-webkit-details-marker { display: none; }
.qf-fsc-details > summary::before,
.qf-ltl-details > summary::before {
  content: '▸';
  color: var(--muted);
  font-size: 11px;
}
.qf-fsc-details[open] > summary::before,
.qf-ltl-details[open] > summary::before { content: '▾'; }
.qf-ltl-details > summary > span { color: var(--ink); }
@media (max-width: 900px) {
  .qf-builder-hero-top { display: grid; }
  .qf-builder-actions { justify-content: flex-start; }
  .qf-rate-scan-stats { grid-template-columns: 1fr 1fr; }
  .qf-rate-live { justify-self: start; }
  /* Fuel-surcharge segmented buttons: guarantee a >=44px HIG tap height on
     touch/mobile (desktop btn-sm height is untouched — this is scoped here). */
  .qf-fsc-seg { min-height: 44px; }
}
@media (max-width: 540px) {
  .qf-rate-scan-stats { grid-template-columns: 1fr; }
}

/* ── Mobile reflow: the wide rate grid becomes one stacked card per row ──
   Each <td> turns into a labelled field line (label via ::before from the
   cell's data-label). No horizontal scroll; every input/select/checkbox and
   the Duplicate/Delete actions stay fully usable and inline-save intact.
   Desktop (>640px) keeps the original scrollable table untouched. */
@media (max-width: 640px) {
  .qf-rate-table-wrap { overflow-x: visible; padding-top: 0; }
  .qf-rate-table-wrap::before { display: none; }
  .qf-rate-table-wrap .table { width: 100%; min-width: 0; margin-top: 0; }
  .qf-rate-table-wrap thead { display: none; } /* column headers become inline data-labels */
  .qf-rate-table-wrap table,
  .qf-rate-table-wrap tbody { display: block; width: 100%; }
  .qf-rate-table-wrap tbody tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    padding: 4px 13px 8px;
    margin-bottom: 12px;
    box-shadow: none;
  }
  .qf-rate-table-wrap tbody tr[hidden] { display: none; }
  .qf-rate-table-wrap tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
  }
  .qf-rate-table-wrap tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--muted);
    font: 700 11px var(--font-mono);
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  .qf-rate-table-wrap tbody td .input,
  .qf-rate-table-wrap tbody td select {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left !important;
  }
  .qf-rate-table-wrap tbody td input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
  }
  /* Actions cell (Duplicate + Delete + status badge) — full-width button row. */
  .qf-rate-table-wrap tbody td:last-child {
    border-bottom: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 11px;
  }
  .qf-rate-table-wrap tbody td:last-child::before { display: none; }
  .qf-rate-table-wrap tbody td:last-child .btn { flex: 1 1 auto; }
}

/* ── Rate grid: fit its container at desktop widths so the ENABLED checkbox
   and the Delete action are always reachable without horizontal scrolling.
   They previously sat past the right edge because the table grew to its
   intrinsic ~1150–1413px via `width:max-content` (set earlier in this file);
   this later, equal-specificity rule wins at desktop widths and lets the
   inputs shrink to share the row instead of forcing a wide table. Scoped to
   ≥641px so the ≤640 stacked-card reflow above is untouched. Appended at EOF
   to keep the spacing/color guard line-based baselines stable. ──────────── */
@media (min-width: 641px) {
  .qf-rate-table-wrap .table { width: 100%; }
  .qf-rate-table-wrap tbody td .input,
  .qf-rate-table-wrap tbody td select {
    width: 100% !important;
    min-width: 0;
  }
}

/* Inline reason shown by a rate row when toggling ENABLED is rejected (409:
   another enabled card already covers this service+equipment). Reverts the box
   and explains why, so the toggle is never a silent no-op. */
.qf-rate-enabled-err {
  display: block;
  width: 100%;
  margin-top: 8px;
  color: var(--danger);
  font-size: 12px;
  line-height: 1.45;
}

/* ── Add-ons page search (mirrors the rate-cards / lead-queue portal search).
   Global file, but .qf-addons-searchbar only renders on the Add-ons editor. */
.qf-addons-searchbar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(255, 255, 255, .024);
}
.qf-addons-searchbar label { display: grid; gap: 4px; }
.qf-addons-searchbar label span { color: var(--muted); font-size: 12px; }
.qf-addons-searchbar input {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-btn);
  background: var(--surface-2);
  color: var(--ink);
  padding: 12px 16px;
  font-size: 13.5px;
  outline: none;
}
.qf-addons-searchbar input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.qf-addons-search-count {
  justify-self: end;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-btn);
  background: var(--accent-soft);
  color: var(--accent);
  padding: 8px 12px;
  font-size: 12px;
  white-space: nowrap;
}
.qf-addons-nomatch { margin-top: 4px; }
@media (max-width: 560px) {
  .qf-addons-searchbar { grid-template-columns: 1fr; }
  .qf-addons-search-count { justify-self: start; }
}

/* ── Mode-first rate cards: the switcher shell + per-mode editors ─────────
   The tab bar (.qf-tabs) is now a mode switcher (Drayage / FTL / LTL /
   Hotshot). "Also run:" starts a mode the carrier doesn't yet run; the editor
   below is a purpose-built surface for the active mode. Tokens only — keeps
   check-hardcoded-colors baselines stable and stays theme-aware. */
.qf-mode-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
}
.qf-mode-editor { margin-top: 16px; }
/* Section header: help cue pinned TOP-LEFT (single ? disclosure), title right
   of it — matches the one-help-affordance rule used across the rate page. */
.qf-mode-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
}
.qf-mode-head-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink);
}
.qf-drayage-zones { margin-top: 4px; }
/* LTL fast-start: two equal shortcut cards (upload tariff · discount off a
   base tariff), stacking to one column on a phone. */
.qf-ltl-shortcuts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 4px 0 12px;
}
.qf-ltl-shortcut {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  padding: 16px;
}
.qf-ltl-shortcut-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
}
@media (max-width: 640px) {
  .qf-ltl-shortcuts { grid-template-columns: 1fr; }
}