/*
 * Frontend audit implementation — 2026-08-07
 * Loaded after the portal and chrome stability layers so the review can remain
 * isolated in one reversible commit.
 */

:root {
  --dpd-audit-ink: #101820;
  --dpd-audit-muted: #5b6875;
  --dpd-audit-line: #d8e0e7;
  --dpd-audit-soft: #f4f7f9;
  --dpd-audit-yellow: #ffea00;
  --dpd-audit-teal: #1fc8b1;
}

/*
 * The portal-wide keyboard focus indicator.
 *
 * .dpd-portal-search-input opts out: it sits inside a container that already
 * shows focus on :focus-within, so this rule painted a second ring around the
 * ring. The palette supplies its own indicator -- see dpd-portal-search.php.
 * Opting out by name rather than out-specifying this rule, which is !important
 * on purpose.
 *
 * [data-dpd-support-search] opts out for the same reason: the Helper's ask bar
 * carries a standing yellow outline on the composer and deepens it on
 * :focus-within, so this rule drew a second yellow ring inside the first one.
 * Only the input opts out -- the Clear and Ask buttons beside it keep their
 * ring, because once focus is anywhere in the composer that ring is the only
 * thing saying WHICH of the three controls has it.
 */
body.dpd-member-surface :is(a, button, input, select, textarea, [tabindex]):not(.dpd-portal-search-input):not([data-dpd-support-search]):focus-visible,
body.page-template-template-contact :is(a, button, input, select, textarea, [tabindex]):not(.dpd-portal-search-input):not([data-dpd-support-search]):focus-visible {
  outline: 3px solid var(--dpd-audit-yellow) !important;
  outline-offset: 3px !important;
}

/* Dashboard alignment, card rhythm, and explicit actions. */

html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-v2-dashboard #dashboard .dashboard-head-left {
  box-sizing: border-box !important;
  padding-left: clamp(20px, 2vw, 30px) !important;
  padding-right: clamp(20px, 2vw, 30px) !important;
}

/* Operations card actions sit on a shared baseline. The cards in this row are
   already the same height, but each card's action row simply followed its own
   content, so the three yellow CTAs landed at three different heights and the
   row read as unfinished. Pinning the actions to the card floor lines them up.

   The cards are already position: relative with absolutely-positioned trailing
   children, so this follows the pattern the component already uses. Two of the
   three cards are grids that place this element into a named "actions" area,
   and an absolutely-positioned grid item with a definite grid position resolves
   its offsets against that area rather than the card — which is why the
   placement is cleared first. The class is repeated to out-specify the rule
   that assigns the area, the same approach this file already takes with
   #sub-page-main-content-wrapper elsewhere. The padding reserves the floor so
   the pinned row cannot sit on top of the card's own content, and :has() keeps
   that reservation off cards that have no actions to pin.

   The wrapper id is doubled on the padding rule because responsive-style-logout.css
   sets `padding: 18px !important` on these same cards from a longer selector.
   Without the doubling that rule wins, the floor is never reserved, and the
   pinned actions overlap the card's last content row. */
html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper .dpd-v2-admin-ops-grid .dpd-v2-admin-ops-card:has(> .dpd-v2-admin-ops-card__actions) {
  padding-bottom: 68px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-v2-admin-ops-grid .dpd-v2-admin-ops-card > .dpd-v2-admin-ops-card__actions.dpd-v2-admin-ops-card__actions.dpd-v2-admin-ops-card__actions {
  grid-area: auto !important;
  grid-column: auto !important;
  grid-row: auto !important;
  position: absolute !important;
  left: 18px !important;
  right: 18px !important;
  bottom: 18px !important;
  margin-top: 0 !important;
  flex-wrap: nowrap !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-v2-program-visual-grid,
html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-v2-admin-dashboard-grid {
  align-items: stretch !important;
  grid-auto-rows: max-content !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-v2-program-visual-grid > *,
html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-v2-program-card,
html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-v2-admin-dashboard-grid > * {
  height: auto !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .dpd-v2-program-visual-grid > .dpd-v2-program-card.dpd-v2-info-managed {
  align-self: stretch !important;
  height: auto !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-v2-program-card,
html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-v2-admin-dashboard-grid > * {
  display: flex !important;
  flex-direction: column !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .main-content-area-right #admin-program-visuals.dpd-v2-dashboard-section--program-visuals .mock-panel.is-dark.dpd-v2-program-card {
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 18px 42px rgba(7, 13, 19, 0.18) !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .dpd-v2-program-card__header {
  align-items: center !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .dpd-v2-program-card__title {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  flex: 1 1 auto !important;
  font-size: clamp(20px, 1.5vw, 24px) !important;
  line-height: 1.08 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .dpd-v2-program-card .dpd-v2-card-kicker {
  display: none !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell #admin-widget-signals.dpd-v2-admin-dashboard-widget {
  border-top: 1px solid rgba(16, 24, 32, 0.1) !important;
}

/*
 * Remove decorative "AI brow" edge rails from the admin dashboard. Status
 * remains explicit in the labels, chips, counts, and true data tracks.
 */
html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell #admin-widget-flow.dpd-v2-admin-dashboard-widget {
  background-image: linear-gradient(180deg, #ffffff 0%, #f7f9f9 100%) !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell #admin-widget-service .dpd-v2-admin-ops-stat {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell #admin-widget-service .dpd-v2-admin-service-list__item,
html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell #admin-widget-service .dpd-v2-admin-service-list__item:is(.is-ok, .is-warn, .is-bad) {
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell #admin-widget-activity .dpd-v2-admin-operations-metrics > span,
html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell #admin-widget-activity .dpd-v2-admin-operations-metrics > span:is(.is-ok, .is-warn, .is-bad) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-v2-program-card :is(.dpd-v2-program-card__action, .dpd-v2-action-row):last-child,
html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-v2-admin-dashboard-grid > * > .dpd-v2-action-row:last-child {
  margin-top: auto !important;
  padding-top: 16px !important;
}

html body.dpd-member-surface #dealer-session-console .dpd-v2-inline-summary {
  justify-content: flex-start !important;
}

html body.dpd-member-surface .dpd-v2-assisted-sessions__scope-copy {
  color: var(--dpd-audit-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  margin: 0 0 12px !important;
  max-width: 980px !important;
}

html body.dpd-member-surface #dealer-session-console .dpd-v2-results-pagination {
  justify-content: flex-end !important;
  margin: 16px 0 0 !important;
}

/* Notifications: compact feed, with management controls where the context starts. */
html body.dpd-member-surface #dpd-v2-updates-drawer .dpd-v2-updates-drawer__inner {
  width: min(440px, 100vw) !important;
}

html body.dpd-member-surface #dpd-v2-updates-drawer .dpd-v2-updates-drawer__header {
  padding: 20px 58px 14px 18px !important;
}

html body.dpd-member-surface #dpd-v2-updates-drawer .dpd-v2-updates-drawer__summary {
  margin-bottom: 10px !important;
}

html body.dpd-member-surface #dpd-v2-updates-drawer .dpd-v2-updates-drawer__header-actions {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

html body.dpd-member-surface #dpd-v2-updates-drawer .dpd-v2-updates-drawer__header-actions .mock-btn {
  align-items: center !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  flex: 0 0 36px !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 0 !important;
  width: 36px !important;
}

html body .dpd-audit-visually-hidden {
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

html body.dpd-member-surface #dpd-v2-updates-drawer .dpd-v2-updates-drawer__content {
  padding: 12px 14px 16px !important;
}

html body.dpd-member-surface #dpd-v2-updates-drawer .dpd-v2-updates-drawer__list {
  gap: 10px !important;
}

html body.dpd-member-surface #dpd-v2-updates-drawer .dpd-v2-updates-drawer__item {
  border: 1px solid var(--dpd-audit-line) !important;
  border-left-width: 1px !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  padding: 14px !important;
}

html body.dpd-member-surface #dpd-v2-updates-drawer .dpd-v2-updates-drawer__item.is-unread {
  background: #f3fbfa !important;
  border-color: #a8ded6 !important;
}

html body.dpd-member-surface #dpd-v2-updates-drawer .dpd-v2-updates-drawer__item-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin-top: 12px !important;
}

html body.dpd-member-surface #dpd-v2-updates-drawer .dpd-v2-updates-drawer__item-actions .mock-btn {
  background: #fff !important;
  border-color: var(--dpd-audit-line) !important;
  color: var(--dpd-audit-ink) !important;
  min-height: 32px !important;
  padding-inline: 11px !important;
}

/* Training: a single course action and an accessible, solid progress rail. */
html body.dpd-member-surface .dpd-v2-training-preview-card__meter {
  background: rgba(255, 255, 255, 0.28) !important;
  bottom: 14px !important;
  height: 7px !important;
  overflow: visible !important;
  right: 54px !important;
}

html body.dpd-member-surface .dpd-v2-training-preview-card__meter > span {
  background: var(--dpd-audit-teal) !important;
  box-shadow: none !important;
}

html body.dpd-member-surface .dpd-v2-training-preview-card__meter-value {
  color: #fff !important;
  font-size: 11px !important;
  font-variant-numeric: tabular-nums !important;
  left: calc(100% + 8px) !important;
  line-height: 1 !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

html body.dpd-member-surface .dpd-v2-training-preview-card__actions {
  justify-content: flex-end !important;
}

/* Tire Finder and selected-size states: remove decorative yellow brows. */
html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-guided-route--tire-finder .dpd-v2-finder-legacy-filter {
  border: 1px solid var(--dpd-audit-line) !important;
  border-top-width: 1px !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 28px rgba(16, 24, 32, 0.07) !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-guided-route--tire-finder .dpd-v2-finder-legacy-topline {
  padding: 20px 22px 14px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-guided-route--tire-finder .dpd-v2-finder-legacy-tabs {
  gap: 6px !important;
  padding: 0 22px 14px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-guided-route--tire-finder .dpd-v2-finder-legacy-tabs button {
  border: 1px solid var(--dpd-audit-line) !important;
  border-radius: 999px !important;
  min-height: 38px !important;
  padding: 0 15px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-guided-route--tire-finder .dpd-v2-finder-legacy-tabs button.is-active {
  background: var(--dpd-audit-ink) !important;
  border-color: var(--dpd-audit-ink) !important;
  color: #fff !important;
  /* The motorcycle tab (dpd-v2-portal.css) still carries a legacy
     -webkit-text-fill-color from when the active pill was yellow, which paints
     the label dark over this now-dark pill and hides it. Reset the fill so the
     white color above actually shows for every active tab. */
  -webkit-text-fill-color: #fff !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-guided-route--tire-finder .dpd-v2-finder-legacy-tabs button.is-active::after {
  content: none !important;
  display: none !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-guided-route--tire-finder .dpd-v2-finder-legacy-panels {
  padding: 16px 22px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-guided-route--tire-finder .dpd-v2-finder-bike-shortcuts--featured {
  padding: 14px 22px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-guided-route--tire-detail .dpd-v2-tire-size-selector__option {
  border-left-width: 1px !important;
  box-shadow: none !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-guided-route--tire-detail .dpd-v2-tire-size-selector__option.is-active {
  background: rgba(31, 200, 177, 0.12) !important;
  border-color: var(--dpd-audit-teal) !important;
  box-shadow: inset 0 0 0 1px var(--dpd-audit-teal) !important;
  transform: none !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-guided-route--tire-detail .dpd-v2-tire-size-selector__option:is(.is-active, :hover)::before,
html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-guided-route--tire-detail .dpd-v2-tire-size-selector__option:is(.is-active, :hover)::after {
  content: none !important;
  display: none !important;
}

html body.dpd-member-surface .dpd-v2-promo-download-card__header {
  justify-content: flex-end !important;
}

/* Downloads: treat additional files as compact rows, not oversized cards. */
html body.dpd-member-surface .dpd-v2-additional-list {
  gap: 10px !important;
}

html body.dpd-member-surface .dpd-v2-additional-card {
  align-items: center !important;
  border-left-width: 1px !important;
  box-shadow: none !important;
  gap: 14px !important;
  grid-template-columns: minmax(180px, 0.8fr) minmax(280px, 1.5fr) auto !important;
  padding: 14px 16px !important;
}

html body.dpd-member-surface .dpd-v2-additional-card__value {
  margin-bottom: 0 !important;
}

/* Data-heavy admin tools: rows are the default; cards remain an explicit option. */
html body.dpd-member-surface #sub-page-main-content-wrapper[class*="dpd-v2-admin-tool--"] .dpd-admin-cardified-wrap table.dpd-admin-cardified-table tbody tr,
html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-tire-points-screen .dpd-admin-cardified-wrap table.dpd-admin-cardified-table tbody tr {
  border-left-width: 1px !important;
  border-left-color: var(--dpd-audit-line) !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper[class*="dpd-v2-admin-tool--"] .dpd-admin-cardified-wrap table.dpd-admin-cardified-table tbody tr:is(.is-pending, .is-warning, .is-complete),
html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-tire-points-screen .dpd-admin-cardified-wrap table.dpd-admin-cardified-table tbody tr:is(.is-pending, .is-warning, .is-complete) {
  border-left-color: var(--dpd-audit-line) !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper[class*="dpd-v2-admin-tool--"] .dpd-admin-ops-card,
html body.dpd-member-surface #sub-page-main-content-wrapper[class*="dpd-v2-admin-tool--"] .dpd-admin-ops-table-card {
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06) !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-admin-tool--parents .dpd-admin-ops-card--parents-working {
  padding: 18px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-admin-tool--parents .dpd-admin-ops-parents-load-form {
  gap: 12px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-admin-tool--parents .dpd-admin-ops-parents-load-form textarea {
  min-height: 72px !important;
}

@media (min-width: 1000px) {
  html body.dpd-member-surface #sub-page-main-content-wrapper[class*="dpd-v2-admin-tool--"].dpd-admin-record-view-list .dpd-admin-cardified-wrap {
    overflow-x: auto !important;
    padding: 0 18px 18px !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper[class*="dpd-v2-admin-tool--"].dpd-admin-record-view-list .dpd-admin-cardified-wrap table.dpd-admin-cardified-table {
    background: #fff !important;
    border: 1px solid var(--dpd-audit-line) !important;
    border-collapse: separate !important;
    border-radius: 12px !important;
    border-spacing: 0 !important;
    display: table !important;
    min-width: 980px !important;
    overflow: hidden !important;
    table-layout: auto !important;
    width: 100% !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper[class*="dpd-v2-admin-tool--"].dpd-admin-record-view-list .dpd-admin-cardified-wrap table.dpd-admin-cardified-table thead {
    display: table-header-group !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper[class*="dpd-v2-admin-tool--"].dpd-admin-record-view-list .dpd-admin-cardified-wrap table.dpd-admin-cardified-table tbody {
    display: table-row-group !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper[class*="dpd-v2-admin-tool--"].dpd-admin-record-view-list .dpd-admin-cardified-wrap table.dpd-admin-cardified-table tbody tr {
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: table-row !important;
    padding: 0 !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper[class*="dpd-v2-admin-tool--"].dpd-admin-record-view-list .dpd-admin-cardified-wrap table.dpd-admin-cardified-table tbody tr:hover td {
    background: #f7fafb !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper[class*="dpd-v2-admin-tool--"].dpd-admin-record-view-list .dpd-admin-cardified-wrap table.dpd-admin-cardified-table tbody td,
  html body.dpd-member-surface #sub-page-main-content-wrapper[class*="dpd-v2-admin-tool--"].dpd-admin-record-view-list .dpd-admin-cardified-wrap table.dpd-admin-cardified-table tbody td:nth-child(n) {
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid #e5ebf0 !important;
    border-radius: 0 !important;
    color: var(--dpd-audit-ink) !important;
    display: table-cell !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    min-height: 0 !important;
    padding: 10px 12px !important;
    vertical-align: middle !important;
    white-space: normal !important;
    width: auto !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper[class*="dpd-v2-admin-tool--"].dpd-admin-record-view-list .dpd-admin-cardified-wrap table.dpd-admin-cardified-table tbody td::before {
    content: none !important;
    display: none !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper[class*="dpd-v2-admin-tool--"].dpd-admin-record-view-list .dpd-admin-cardified-wrap table.dpd-admin-cardified-table tbody td.is-empty {
    display: table-cell !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper[class*="dpd-v2-admin-tool--"].dpd-admin-record-view-list .dpd-admin-cardified-wrap table.dpd-admin-cardified-table :is(input, select) {
    min-height: 36px !important;
    padding: 7px 10px !important;
  }
}

/*
 * Audit redo: the view toggle was reporting List while higher-specificity
 * card rules still rendered each record as a poster-sized grid. Restore true
 * table geometry on desktop; the existing responsive cards remain below the
 * breakpoint.
 */
@media (min-width: 1000px) {
  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-portal-shell[class*="dpd-v2-admin-tool--"].dpd-admin-record-view-list .dpd-v2-admin-tool-frame .dpd-admin-cardified-wrap {
    overflow-x: auto !important;
    padding: 0 12px 16px !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-portal-shell[class*="dpd-v2-admin-tool--"].dpd-admin-record-view-list .dpd-v2-admin-tool-frame .dpd-admin-cardified-wrap table.dpd-admin-cardified-table {
    background: #fff !important;
    border: 1px solid var(--dpd-audit-line) !important;
    border-collapse: separate !important;
    border-radius: 10px !important;
    border-spacing: 0 !important;
    display: table !important;
    min-width: 1440px !important;
    overflow: hidden !important;
    table-layout: auto !important;
    width: 100% !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-portal-shell.dpd-v2-admin-tool--tire-points.dpd-admin-record-view-list .dpd-v2-admin-tool-frame .dpd-admin-cardified-wrap table.dpd-admin-cardified-table {
    min-width: 1680px !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-portal-shell[class*="dpd-v2-admin-tool--"].dpd-admin-record-view-list .dpd-v2-admin-tool-frame .dpd-admin-cardified-wrap table.dpd-admin-cardified-table thead {
    display: table-header-group !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-portal-shell[class*="dpd-v2-admin-tool--"].dpd-admin-record-view-list .dpd-v2-admin-tool-frame .dpd-admin-cardified-wrap table.dpd-admin-cardified-table tbody {
    display: table-row-group !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-portal-shell[class*="dpd-v2-admin-tool--"].dpd-admin-record-view-list .dpd-v2-admin-tool-frame .dpd-admin-cardified-wrap table.dpd-admin-cardified-table tbody tr,
  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-portal-shell.dpd-v2-admin-tool--tire-points.dpd-admin-record-view-list .dpd-v2-admin-tool-frame .dpd-tire-points-screen .dpd-tire-points-table-wrap table.dpd-admin-cardified-table tbody tr {
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: table-row !important;
    padding: 0 !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-portal-shell[class*="dpd-v2-admin-tool--"].dpd-admin-record-view-list .dpd-v2-admin-tool-frame .dpd-admin-cardified-wrap table.dpd-admin-cardified-table tbody td,
  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-portal-shell[class*="dpd-v2-admin-tool--"].dpd-admin-record-view-list .dpd-v2-admin-tool-frame .dpd-admin-cardified-wrap table.dpd-admin-cardified-table tbody td:nth-child(n),
  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-portal-shell.dpd-v2-admin-tool--tire-points.dpd-admin-record-view-list .dpd-v2-admin-tool-frame .dpd-tire-points-screen .dpd-tire-points-table-wrap table.dpd-admin-cardified-table tbody td,
  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-portal-shell.dpd-v2-admin-tool--tire-points.dpd-admin-record-view-list .dpd-v2-admin-tool-frame .dpd-tire-points-screen .dpd-tire-points-table-wrap table.dpd-admin-cardified-table tbody td:nth-child(n) {
    background: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid #e5ebf0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--dpd-audit-ink) !important;
    display: table-cell !important;
    font-size: 11px !important;
    grid-area: auto !important;
    grid-column: auto !important;
    line-height: 1.3 !important;
    min-height: 0 !important;
    padding: 8px 10px !important;
    vertical-align: middle !important;
    white-space: normal !important;
    width: auto !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-portal-shell[class*="dpd-v2-admin-tool--"].dpd-admin-record-view-list .dpd-v2-admin-tool-frame .dpd-admin-cardified-wrap table.dpd-admin-cardified-table tbody td::before,
  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-portal-shell.dpd-v2-admin-tool--tire-points.dpd-admin-record-view-list .dpd-v2-admin-tool-frame .dpd-tire-points-screen .dpd-tire-points-table-wrap table.dpd-admin-cardified-table tbody td::before {
    content: none !important;
    display: none !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-portal-shell[class*="dpd-v2-admin-tool--"].dpd-admin-record-view-list .dpd-v2-admin-tool-frame .dpd-admin-cardified-wrap table.dpd-admin-cardified-table tbody td.is-empty,
  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-portal-shell.dpd-v2-admin-tool--tire-points.dpd-admin-record-view-list .dpd-v2-admin-tool-frame .dpd-tire-points-screen .dpd-tire-points-table-wrap table.dpd-admin-cardified-table tbody td.is-empty:nth-child(n) {
    display: table-cell !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-portal-shell[class*="dpd-v2-admin-tool--"].dpd-admin-record-view-list .dpd-v2-admin-tool-frame .dpd-admin-cardified-wrap table.dpd-admin-cardified-table tbody td form {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-portal-shell[class*="dpd-v2-admin-tool--"].dpd-admin-record-view-list .dpd-v2-admin-tool-frame .dpd-admin-cardified-wrap :is(input, select, button, .btn, .dpd-admin-ops-inline-link) {
    font-size: 10px !important;
    min-height: 32px !important;
    padding: 5px 8px !important;
  }

  /* Registration details already live in the row's View Details modal. */

  /*
   * Tire Points exposes the full workflow from Review Sale. Keep the list to
   * its summary fields instead of repeating the 400px loyalty editor per row.
   */
  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-admin-tool--tire-points.dpd-admin-record-view-list .dpd-tire-points-table-wrap tbody td:nth-child(6) > :is(.dpd-tire-loyalty-card, p) {
    display: none !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-admin-tool--tire-points.dpd-admin-record-view-list .dpd-tire-points-table-wrap tbody td:nth-child(3) {
    min-width: 240px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-admin-tool--tire-points.dpd-admin-record-view-list .dpd-tire-points-table-wrap tbody td:nth-child(3) br {
    display: none !important;
  }
}

/* Parent hierarchy form: remove unused vertical space before records load. */
html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-admin-tool--parents .dpd-admin-ops-card--parents-working {
  gap: 10px !important;
  padding: 10px 0 !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-admin-tool--parents .dpd-admin-ops-parents-load-form {
  gap: 8px !important;
  padding: 12px 14px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-admin-tool--parents .dpd-admin-ops-parents-load-form textarea {
  min-height: 56px !important;
}

/* Support tickets: preserve readable columns and stack before the queue is squeezed. */
html body.dpd-member-surface .dpd-support-ops__grid {
  gap: 14px !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr) !important;
}

html body.dpd-member-surface .dpd-support-card {
  min-width: 0 !important;
  padding: 16px !important;
}

html body.dpd-member-surface .dpd-support-card:first-child {
  overflow-x: auto !important;
}

html body.dpd-member-surface .dpd-support-table {
  min-width: 620px !important;
  table-layout: fixed !important;
}

html body.dpd-member-surface .dpd-support-table :is(th, td) {
  overflow-wrap: anywhere !important;
  padding: 10px 8px !important;
  word-break: normal !important;
}

html body.dpd-member-surface .dpd-support-table :is(th, td):nth-child(1) { width: 31% !important; }
html body.dpd-member-surface .dpd-support-table :is(th, td):nth-child(2) { width: 30% !important; }
html body.dpd-member-surface .dpd-support-table :is(th, td):nth-child(3) { width: 18% !important; }
html body.dpd-member-surface .dpd-support-table :is(th, td):nth-child(4) { width: 21% !important; }

html body.dpd-member-surface .dpd-support-empty {
  padding: 18px !important;
}

/* Contact flow: remove the large inter-section gaps and keep the FAQ/form compact. */
html body.page-template-template-contact .sign-up-main-sec.dpd-contact-page.dpd-contact-page--routing-first {
  gap: 18px !important;
  padding-top: 18px !important;
  padding-bottom: 38px !important;
}

html body.page-template-template-contact .dpd-contact-page.dpd-contact-page--routing-first .dpd-contact-left-tools {
  gap: 18px !important;
}

html body.page-template-template-contact .dpd-contact-page.dpd-contact-page--routing-first .dpd-contact-support-dashboard,
html body.page-template-template-contact .dpd-contact-page.dpd-contact-page--routing-first .dpd-contact-support-paths,
html body.page-template-template-contact .dpd-contact-page.dpd-contact-page--routing-first .sign-up-main-right {
  margin-top: 0 !important;
}

html body.page-template-template-contact .dpd-contact-page.dpd-contact-page--routing-first .dpd-contact-support-paths {
  padding: clamp(22px, 2.5vw, 32px) !important;
}

html body.page-template-template-contact .dpd-contact-page.dpd-contact-page--routing-first .dpd-contact-support-paths h2 {
  font-size: clamp(32px, 3.6vw, 48px) !important;
}

html body.page-template-template-contact .dpd-contact-page.dpd-contact-page--routing-first .sign-up-main-right-con-top {
  gap: 16px !important;
  padding: 22px !important;
}

html body.page-template-template-contact .dpd-contact-page.dpd-contact-page--routing-first .dpd-contact-primary-form {
  margin-top: 14px !important;
  padding: clamp(18px, 2.4vw, 28px) !important;
}

@media (max-width: 1220px) {
  html body.dpd-member-surface .dpd-support-ops__grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 780px) {
  html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-v2-dashboard #dashboard .dashboard-head-left {
    padding-inline: 20px !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper :is(
    .dpd-v2-program-visual-grid,
    .dpd-v2-admin-dashboard-grid
  ) {
    align-items: start !important;
    grid-auto-rows: max-content !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-v2-program-visual-grid > *,
  html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-v2-program-card,
  html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-v2-admin-dashboard-grid > * {
    align-self: start !important;
    height: auto !important;
    min-height: 0 !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-v2-program-card :is(.dpd-v2-program-card__action, .dpd-v2-action-row):last-child,
  html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-v2-admin-dashboard-grid > * > .dpd-v2-action-row:last-child {
    margin-top: 0 !important;
    padding-top: 12px !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .main-content-area-right .dpd-v2-dashboard-section--program-visuals [data-dpd-program-visual="rewards"] .dpd-v2-program-flow-meter,
  html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .main-content-area-right .dpd-v2-dashboard-section--program-visuals [data-dpd-program-visual="submittingRebates"] .dpd-v2-program-card__action {
    margin-top: 0 !important;
  }

  html body.dpd-member-surface .dpd-v2-additional-card {
    align-items: start !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body.dpd-member-surface #dealer-session-console .dpd-v2-results-pagination {
    justify-content: center !important;
  }

  html body.dpd-member-surface .dpd-support-table {
    min-width: 0 !important;
  }

  html body.page-template-template-contact .sign-up-main-sec.dpd-contact-page.dpd-contact-page--routing-first {
    max-width: calc(100vw - 24px) !important;
    padding-top: 12px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .dpd-v2-training-preview-card__meter > span,
  html body .dpd-admin-record-card-row,
  html body .dpd-v2-tire-size-selector__option {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Admin review consoles -- Impersonation, Dealer Account Review, Account
   Access Review
   --------------------------------------------------------------------------
   Three panels on the Super Admin dashboard that do one job between them: find
   an account or an access rule, then act on it. They are where an operator
   takes over a dealer's account or changes what one can reach, so they are
   treated as an access checkpoint rather than as three more dashboard panels.

   They share this block rather than each growing a lookalike -- they were
   already sharing markup (.mock-panel, .mock-table, .mock-toolbar, .mock-chip,
   .mock-btn), so the alternative was three copies of one design drifting apart
   the first time one of them was touched.

   ONE LANGUAGE, BORROWED. The portal already has a designed instrument for
   "find one record among many, then act on it": the Dealers Master List ledger
   (dpd-master-list.css). This panel does the same job on a smaller stage, so it
   speaks the same language one size down -- same ink, same hairlines, same
   uppercase micro-labels, same mono identifiers, same text-link row actions --
   rather than inventing a fourth look. It is an embedded table, not a route, so
   it takes the ledger's grammar without the ledger's furniture: no dark command
   bar, no count readout, no page-wide bands. Control strip, table, pager.

   WHY THE PANEL LOOKED ASSEMBLED RATHER THAN DESIGNED. This block used to stop
   at the control header and leave the table, chips, buttons and pager to the
   shared .mock-* layer, which paints pills, glows and a Dunlop-yellow button in
   every row. So the header said "quiet, hairline, ink" and the table underneath
   said "fifteen identical yellow CTAs", and the two halves were visibly not the
   same design. The block now owns the whole panel, top to bottom.

   WHERE THE YELLOW GOES. Yellow marks the two things an operator actually does
   here: find an account, and open its session. Nothing else gets it -- the
   selected filter is ink, the pager is ink, the type tags are hairline. Fifteen
   yellow buttons in the action column meant yellow marked "a row exists", which
   is not a thing anyone does. It is now a 2px underline under a text link, the
   same treatment the master list gives the same action, so the column reads as
   fifteen accounts rather than fifteen buttons.

   Everything is scoped to :is(#assisted-sessions, #dealer-session-console, #accounts): .mock-btn, .mock-chip,
   .mock-panel and .mock-table are shared across the portal and must not move.
   ========================================================================== */

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) {
  /* The ledger's palette. Restated here rather than imported because
     dpd-master-list.css is scoped to the admin-tool routes and this panel is on
     the dashboard; the values are the ones in that sheet's :is() block. */
  --as-ink: #0d1520;
  --as-ink-2: #5b6876;
  --as-ink-3: #8b98a7;
  --as-line: #e4e9ef;
  --as-line-2: #ccd5df;
  --as-paper: #ffffff;
  --as-ground: #f4f7fa;
  --as-signal: var(--dpd-accent, #fff200);
  --as-halt: #b42318;
  --as-focus: #1d6fd0;

  --as-ui: acumin-pro-condensed, acumin-pro-semi-condensed, acumin-pro, "Helvetica Neue", Arial, sans-serif;
  --as-body: acumin-pro, "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Dealer numbers are identifiers, not prose -- same reasoning as the ledger. */
  --as-data: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* -- vertical rhythm --
   Three shared rules were stacking above the first control: the dashboard
   section's own padding-top (up to 48px), the heading's margin-bottom (up to
   28px) and the console's margin-top (14px). Ninety pixels of nothing before
   the scope line, on a panel whose whole job is to get you to the search field.
   The three are set here as one figure instead of three defaults that never
   knew about each other: a step above the heading, a smaller step under it. */

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) {
  /* The shell zeroes .main-content-sec padding, so every block in these panels
     was running flush to the card's edge -- the pager's text sat directly on
     the rounded corner, which is what read as broken rather than tight. The
     card gets its inset back here, once, for all three. */
  padding: 22px 24px 20px !important;
}

/* ...except where the collapsible bar is the top of the panel. The 22px above
   left a white strip over the gradient, which read as a gap in the card rather
   than as breathing room. The bar goes flush to the edge and the card clips it,
   so the gradient IS the top of the panel. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts).dpd-v2-command-center-detail {
  overflow: hidden !important;
  padding-top: 0 !important;
}

/* The collapse bar is the one thing that ignores the inset: it is the top of
   the card, edge to edge, and the card's overflow clips it to the corners. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-command-center-toggle {
  margin-left: -24px !important;
  margin-right: -24px !important;
  /* It is a <button>: width:auto is shrink-to-fit, so the negative margins alone
     left the bar stopping short of the card. Spelled out instead. */
  width: calc(100% + 48px) !important;
}

/* Collapsed means collapsed. The component hides the table but leaves the
   search row, the count and the pager standing, so a shut panel still offered a
   search box for rows nobody could see. Everything but the bar goes. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts).dpd-v2-command-center-detail.is-collapsed > *:not(.dpd-v2-command-center-toggle) {
  display: none !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) > .border-dotted-heading {
  margin-bottom: 10px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-assisted-sessions__console {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 0 !important;
}

/* -- intro --
   The scope sentence and the one term that changes how the tool is used share a
   baseline, so the rule of engagement reads as part of the description. */

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-assisted-sessions__intro {
  align-items: start !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 28px !important;
  justify-content: space-between !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-assisted-sessions__scope-copy {
  color: var(--as-ink-2) !important;
  flex: 1 1 420px !important;
  font-family: var(--as-body) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  max-width: 68ch !important;
}

/* The session expiry is the only thing on screen that says the session ends on
   its own, and it is a duration, so it is set in the data face. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-session-terms {
  background: var(--as-paper) !important;
  border: 1px solid var(--as-line-2) !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  list-style: none !important;
  margin: 2px 0 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-session-terms li {
  color: var(--as-ink-2) !important;
  font-family: var(--as-data) !important;
  font-size: 11px !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  margin: 0 !important;
  padding: 6px 11px !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-session-terms li + li {
  border-left: 1px solid var(--as-line) !important;
}

/* -- control strip --
   One band, one row. The ledger puts its finder on a dark ground because it is
   the only instrument on a full page; here the panel is a guest on the
   dashboard, so the same band is stated in ground grey at a smaller scale. */

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-assisted-sessions__controls {
  align-items: center !important;
  background: var(--as-ground) !important;
  border: 1px solid var(--as-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 14px !important;
  padding: 10px 12px !important;
}

/* Segmented filter. One connected group reads as "pick one of these", which is
   what the control does; five detached pills did not. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-assisted-sessions__filters {
  background: var(--as-paper) !important;
  border: 1px solid var(--as-line-2) !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-seg__item {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--as-ink-2) !important;
  font-family: var(--as-ui) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: background-color 120ms ease, color 120ms ease !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-seg__item + .dpd-v2-seg__item {
  border-left: 1px solid var(--as-line) !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-seg__item:hover {
  background: var(--as-ground) !important;
  color: var(--as-ink) !important;
}

/* Ink, not yellow: choosing which accounts to look at is not the act this
   panel exists for. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-seg__item[aria-current="page"] {
  background: var(--as-ink) !important;
  color: #fff !important;
}

/* -- find --
   The ledger's search bar, in paper instead of on the dark ground: the glyph
   sits inside the field, and the field and its button are one object. */

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-search-form {
  align-items: center !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex: 1 1 400px !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* The placeholder names four things you can search by, so the field is given
   room to say so and the inherited uppercasing is dropped -- it was clipping
   the sentence to "SEARCH NAME, DEALERSHIP, EM...". */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-search-form input[type="search"] {
  appearance: none !important;
  background: var(--as-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 18 18'%3E%3Ccircle cx='7.5' cy='7.5' r='5.5' fill='none' stroke='%238b98a7' stroke-width='1.6'/%3E%3Cpath d='M11.6 11.6 16 16' fill='none' stroke='%238b98a7' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 12px center !important;
  border: 1px solid var(--as-line-2) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--as-ink) !important;
  flex: 1 1 300px !important;
  font-family: var(--as-body) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  max-width: 460px !important;
  min-height: 36px !important;
  min-width: 0 !important;
  padding: 0 12px 0 36px !important;
  text-transform: none !important;
  transition: border-color 120ms ease !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-search-form input[type="search"]:focus {
  border-color: var(--as-ink) !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-search-form input[type="search"]::placeholder {
  color: var(--as-ink-3) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  opacity: 1 !important;
  text-transform: none !important;
}

/* One of the two yellows. Finding the account is half of what this panel is
   for, and this is the ledger's SEARCH button at the panel's smaller scale. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-search-form__submit {
  background: var(--as-signal) !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: var(--as-ink) !important;
  cursor: pointer !important;
  font-family: var(--as-ui) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  min-height: 36px !important;
  padding: 0 20px !important;
  text-transform: uppercase !important;
  transition: filter 120ms ease !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-search-form__submit:hover {
  filter: brightness(0.92) !important;
}

/* Clear and Audit history are secondary routes, not actions on this form. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-quiet-link {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--as-ink-2) !important;
  font-family: var(--as-body) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  padding: 0 !important;
  text-decoration: underline !important;
  text-decoration-color: var(--as-line-2) !important;
  text-transform: none !important;
  text-underline-offset: 3px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-quiet-link:hover {
  color: var(--as-ink) !important;
  text-decoration-color: currentColor !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-assisted-sessions__aside {
  margin: 0 0 0 auto !important;
}

/* -- the table --
   The ledger's rows at the panel's scale: hairline rules, no inner card, no
   zebra. Zebra striping plus a hover tint plus a card border was three devices
   doing one job, which is telling one row from the next. */

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .mock-panel {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-table-scroll {
  -webkit-overflow-scrolling: touch !important;
  overflow-x: auto !important;
  width: 100% !important;
}

/* No frame around the rows.
   The portal's accent theme paints a 1px inset ring in the user's accent colour
   onto panels and table shells (body.dashboard-accent-enabled ... box-shadow:
   inset 0 0 0 1px var(--dpd-user-line-accent), plus an accent border-left and a
   colour-mixed border-color). At this table's 26px radius that came out as a
   yellow rounded rectangle running down both edges: decoration the ledger does
   not have, in the one colour that is supposed to mean "this starts a session".

   Cleared on every container between the section and the rows rather than on
   the one rule that happens to be reaching it -- there are ~135 accent rules
   and they are not all scoped the same way, so naming one is a fix that lasts
   until the next theme is added. The rows are separated by their own hairlines;
   they do not need a frame as well. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) :is(.mock-panel, .dpd-v2-table-scroll, table.mock-table) {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) :is(.mock-panel, .dpd-v2-table-scroll)::before,
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) :is(.mock-panel, .dpd-v2-table-scroll)::after {
  content: none !important;
  display: none !important;
}

/* One frame, on the scroller, in hairline grey.
   The reset above clears the accent ring; the rows still want an edge, and it
   belongs on the element that actually scrolls rather than on the panel around
   it -- two nested frames was the double outline this started as. The radius
   matches the control strip above so the two bands read as one instrument, and
   the scroller's own overflow clips the header band into the top corners.

   Written as `div.dpd-v2-table-scroll`, not `.dpd-v2-table-scroll`: :is() takes
   the HIGHEST specificity of its arguments, so the reset above counts as
   `table.mock-table` (a class AND an element) and outranked the bare class here.
   The border silently never applied. The element qualifier levels it, and this
   rule comes second. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) div.dpd-v2-table-scroll {
  border: 1px solid var(--as-line) !important;
  border-radius: 10px !important;
}

/* The container's edge is the last row's edge; without this they double up. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table {
  background: transparent !important;
  border-collapse: collapse !important;
  color: var(--as-ink) !important;
  font-family: var(--as-body) !important;
  margin: 0 !important;
  min-width: 940px !important;
  width: 100% !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table thead th {
  background: var(--as-ground) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--as-line-2) !important;
  color: var(--as-ink-3) !important;
  font-family: var(--as-ui) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  line-height: 1.2 !important;
  padding: 10px 14px !important;
  text-align: left !important;
  text-transform: uppercase !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table tbody tr,
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table tbody tr:nth-child(even) {
  background: transparent !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table tbody td {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--as-line) !important;
  color: var(--as-ink-2) !important;
  font-size: 12.5px !important;
  line-height: 1.4 !important;
  padding: 11px 14px !important;
  vertical-align: middle !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table tbody tr:hover td {
  background: var(--as-ground) !important;
}

/* Account: the dealership leads, the person under it. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table tbody td:first-child strong {
  color: var(--as-ink) !important;
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
  /* Imported dealership names arrive in whatever case was typed; the ledger
     leaves them alone and lets weight carry the hierarchy instead. */
  text-transform: none !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table tbody td:first-child .dpd-v2-admin-row-meta {
  color: var(--as-ink-2) !important;
  display: block !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  margin-top: 2px !important;
  text-transform: none !important;
}

/* Identifiers get the data face and tabular figures, which turns the column
   into a spine you can run an eye down. Addressed per section on purpose: the
   three tables do not share a column order, and column 4 is a dealer number in
   one and a loyalty balance in the next. */
html body.dpd-member-surface #sub-page-main-content-wrapper #assisted-sessions table.mock-table tbody td:nth-child(4),
html body.dpd-member-surface #sub-page-main-content-wrapper #assisted-sessions table.mock-table tbody td:nth-child(5),
html body.dpd-member-surface #sub-page-main-content-wrapper #dealer-session-console table.mock-table tbody td:nth-child(3),
html body.dpd-member-surface #sub-page-main-content-wrapper #dealer-session-console table.mock-table tbody td:nth-child(5) {
  color: var(--as-ink) !important;
  font-family: var(--as-data) !important;
  font-size: 12.5px !important;
  font-variant-numeric: tabular-nums !important;
  font-weight: 600 !important;
}

/* Addresses arrive from the importer in whatever case was typed. */
html body.dpd-member-surface #sub-page-main-content-wrapper #assisted-sessions table.mock-table tbody td:nth-child(3),
html body.dpd-member-surface #sub-page-main-content-wrapper #dealer-session-console table.mock-table tbody td:nth-child(2) {
  overflow-wrap: anywhere !important;
  text-transform: lowercase !important;
}

/* Account type: the ledger's hairline tag, not a glowing pill. It is a label on
   a row, and fifteen of them stacked must not out-shout the fifteen names. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table .mock-chip {
  background: var(--as-paper) !important;
  border: 1px solid var(--as-line-2) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  color: var(--as-ink-2) !important;
  display: inline-block !important;
  font-family: var(--as-ui) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  line-height: 1 !important;
  padding: 4px 6px !important;
  text-transform: uppercase !important;
}

/* -- the action --
   The signature of the panel. Fifteen identical yellow buttons made yellow mean
   "a row exists"; as a text link with a signal underline it means "this starts
   a session", which is the only thing on the dashboard that does. Same
   treatment the master list gives the same action. */

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-dealer-session-actions {
  text-align: left !important;
  white-space: nowrap !important;
}

/* Stacked, like the master list's row actions: two buttons side by side in a
   12%-wide column wrapped onto two lines anyway, and did it differently in
   every row depending on the label lengths. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-dealer-session-actions {
  display: table-cell !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-dealer-session-actions .mock-btn {
  background: none !important;
  /* .mock-btn is built as a 40px pill: line-height 42px (mockup-local.css) and
     min-height 40px from the portal shell. Left in place on a text link, the
     box stayed 40px tall with 17px of text at the top -- so the underline sat
     twenty-odd pixels below the word it belongs to. Both have to go, and
     min-height is the one that survives resetting line-height alone. */
  line-height: 1.4 !important;
  min-height: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--as-line-2) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--as-ink) !important;
  display: block !important;
  font-family: var(--as-body) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  margin: 0 0 5px !important;
  padding: 0 0 1px !important;
  text-align: left !important;
  text-decoration: none !important;
  text-transform: none !important;
  transition: color 120ms ease, border-color 120ms ease !important;
  width: fit-content !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-dealer-session-actions .mock-btn:last-child {
  margin-bottom: 0 !important;
}

/* Only the one that starts a session gets the yellow. Review opens a record;
   Open session becomes that dealer. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-dealer-session-actions .mock-btn.yellow {
  border-bottom-color: var(--as-signal) !important;
  border-bottom-width: 2px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-dealer-session-actions .mock-btn:not(.yellow):hover {
  border-bottom-color: var(--as-ink) !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-dealer-session-actions .mock-btn:hover {
  color: var(--as-focus) !important;
}

/* A row that cannot be opened says so in the same place the link would be,
   quietly, rather than leaving the column blank. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-dealer-session-actions .dpd-v2-admin-row-meta {
  color: var(--as-ink-3) !important;
  font-size: 11.5px !important;
}

/* -- empty and error --
   An empty screen is an invitation to act, so it says what to do next rather
   than only what is missing. */

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table tbody td.dpd-v2-session-empty {
  padding: 40px 14px !important;
  text-align: center !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-session-empty strong {
  color: var(--as-ink) !important;
  display: block !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-session-empty span {
  color: var(--as-ink-2) !important;
  display: block !important;
  font-size: 12.5px !important;
  margin: 5px auto 0 !important;
  max-width: 62ch !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-session-empty--error strong {
  color: var(--as-halt) !important;
}

/* -- pager --
   Ink tiles, not yellow: turning the page is navigation, and the count beside
   them is a number, so it is set in the data face. */

/* No rule above the pager: the table box already closes with its own border, and
   a second hairline directly under it read as a doubled line with the page
   count crammed into the seam. The gap does the separating instead -- and it
   lives on the pager's own padding, because the section's layout swallows a
   bottom margin on the panel above it. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) :is(.dpd-v2-assisted-sessions__pagination, .dpd-v2-results-pagination) {
  align-items: center !important;
  border-top: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 18px 0 6px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) :is(.dpd-v2-assisted-sessions__pagination, .dpd-v2-results-pagination) .mock-chip {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--as-ink-3) !important;
  font-family: var(--as-ui) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  margin: 0 auto 0 0 !important;
  order: -1 !important;
  padding: 0 !important;
  text-transform: uppercase !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) :is(.dpd-v2-assisted-sessions__pagination, .dpd-v2-results-pagination) .mock-btn {
  align-items: center !important;
  background: var(--as-paper) !important;
  border: 1px solid var(--as-line-2) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--as-ink) !important;
  display: inline-flex !important;
  font-family: var(--as-ui) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  min-height: 32px !important;
  padding: 0 14px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  transition: border-color 120ms ease !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) :is(.dpd-v2-assisted-sessions__pagination, .dpd-v2-results-pagination) .mock-btn:hover {
  border-color: var(--as-ink) !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-metric-source {
  color: var(--as-ink-3) !important;
  font-family: var(--as-body) !important;
  font-size: 11.5px !important;
  line-height: 1.5 !important;
  margin: 12px 0 0 !important;
  max-width: 92ch !important;
}

/* -- row density --
   These rows carry four stacked facts in two of their columns (units / mapping
   / distributors, and status / sync), so a row was running to four lines and a
   page of twenty-five to a wall. The secondary lines go to the meta scale and
   tighten up: the fact stays, the shouting stops. */

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table tbody td .dpd-v2-admin-row-meta {
  color: var(--as-ink-3) !important;
  display: block !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  margin-top: 2px !important;
  text-transform: none !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table tbody td {
  padding: 10px 14px !important;
}

/* The loyalty cell's three lines are one fact and its two qualifiers. */
html body.dpd-member-surface #sub-page-main-content-wrapper #dealer-session-console table.mock-table tbody td:nth-child(4) {
  line-height: 1.35 !important;
}

/* Widths, because the browser was giving the three-line loyalty column more
   room than the dealership names and squeezing the actions until they wrapped.
   Auto layout with hints rather than fixed: the columns hold names of wildly
   different lengths and a fixed grid clipped them. */
html body.dpd-member-surface #sub-page-main-content-wrapper #dealer-session-console table.mock-table {
  table-layout: auto !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper #dealer-session-console table.mock-table :is(thead th, tbody td):nth-child(1) { width: 20% !important; }
html body.dpd-member-surface #sub-page-main-content-wrapper #dealer-session-console table.mock-table :is(thead th, tbody td):nth-child(4) { width: 12% !important; }
html body.dpd-member-surface #sub-page-main-content-wrapper #dealer-session-console table.mock-table :is(thead th, tbody td):nth-child(5) { width: 5% !important; }
html body.dpd-member-surface #sub-page-main-content-wrapper #dealer-session-console table.mock-table :is(thead th, tbody td):nth-child(8) { width: 11% !important; }

/* -- sort controls --
   dpd-admin-table-controls.js turns each heading into a button. Left as plain
   text with the caret showing only on hover or when a sort is applied, so the
   header row reads as labels rather than as a row of controls -- the same
   treatment the master list gives the same injected markup. */

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table thead th .dpd-table-sort-button {
  background: none !important;
  border: 0 !important;
  color: inherit !important;
  cursor: pointer !important;
  display: inline-flex !important;
  font: inherit !important;
  gap: 6px !important;
  justify-content: flex-start !important;
  letter-spacing: inherit !important;
  min-height: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  text-transform: inherit !important;
  width: auto !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table thead th .dpd-table-sort-button:hover {
  color: var(--as-ink) !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table thead .dpd-table-sort-button i {
  font-size: 9px !important;
  opacity: 0 !important;
  transition: opacity 120ms ease !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table thead th:hover .dpd-table-sort-button i,
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table thead th[aria-sort="ascending"] .dpd-table-sort-button i,
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table thead th[aria-sort="descending"] .dpd-table-sort-button i {
  opacity: 1 !important;
}

/* The sorted column, marked on the rule rather than by recolouring the label. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table thead th[aria-sort="ascending"],
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table thead th[aria-sort="descending"] {
  box-shadow: inset 0 -2px 0 var(--as-signal) !important;
  color: var(--as-ink) !important;
}

/* -- the other two consoles' controls --
   Dealer Account Review and Account Access Review carry their filters in a
   .mock-toolbar rather than the impersonation panel's bespoke markup. Same
   band, same scale: whichever panel you are in, the controls sit in one grey
   strip above the rows. */

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .mock-toolbar {
  align-items: center !important;
  background: var(--as-ground) !important;
  border: 1px solid var(--as-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 0 0 12px !important;
  padding: 10px 12px !important;
}

/* The Account Access Review toolbar sits inside the panel rather than above
   it, so it keeps its own edge off the table's. */
html body.dpd-member-surface #sub-page-main-content-wrapper #accounts .mock-panel > .mock-toolbar {
  margin-bottom: 12px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .mock-toolbar input[type="text"],
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .mock-toolbar input[type="search"] {
  appearance: none !important;
  background: var(--as-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 18 18'%3E%3Ccircle cx='7.5' cy='7.5' r='5.5' fill='none' stroke='%238b98a7' stroke-width='1.6'/%3E%3Cpath d='M11.6 11.6 16 16' fill='none' stroke='%238b98a7' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 12px center !important;
  border: 1px solid var(--as-line-2) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--as-ink) !important;
  flex: 1 1 300px !important;
  font-family: var(--as-body) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  max-width: 460px !important;
  min-height: 36px !important;
  min-width: 0 !important;
  padding: 0 12px 0 36px !important;
  text-transform: none !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .mock-toolbar input::placeholder {
  color: var(--as-ink-3) !important;
  font-size: 13.5px !important;
  letter-spacing: normal !important;
  opacity: 1 !important;
  /* The placeholder names three things you can search by; uppercasing it was
     clipping the sentence to "SEARCH DEALER NAME, DEALER". */
  text-transform: none !important;
}

/* Selects carry their own caret, in ink rather than the browser's stepper. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .mock-toolbar select {
  appearance: none !important;
  background: var(--as-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath fill='%235b6876' d='M0 0h9L4.5 6z'/%3E%3C/svg%3E") no-repeat right 10px center !important;
  border: 1px solid var(--as-line-2) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--as-ink) !important;
  cursor: pointer !important;
  font-family: var(--as-body) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  min-height: 36px !important;
  padding: 0 26px 0 10px !important;
  text-transform: none !important;
  width: auto !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .mock-toolbar select:hover {
  border-color: var(--as-ink-2) !important;
}

/* The toolbar's submit is the same SEARCH as the impersonation panel's. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .mock-toolbar button.mock-btn {
  background: var(--as-signal) !important;
  border: 0 !important;
  border-radius: 8px !important;
  color: var(--as-ink) !important;
  cursor: pointer !important;
  font-family: var(--as-ui) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  min-height: 36px !important;
  padding: 0 20px !important;
  text-transform: uppercase !important;
  transition: filter 120ms ease !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .mock-toolbar button.mock-btn:hover {
  filter: brightness(0.92) !important;
}

/* Clear resets the form; it is not a second thing to press. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .mock-toolbar a.mock-btn {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--as-ink-2) !important;
  font-family: var(--as-body) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
  min-height: 0 !important;
  padding: 0 !important;
  text-decoration: underline !important;
  text-decoration-color: var(--as-line-2) !important;
  text-transform: none !important;
  text-underline-offset: 3px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .mock-toolbar a.mock-btn:hover {
  color: var(--as-ink) !important;
  text-decoration-color: currentColor !important;
}

/* -- the count line --
   "Showing 25 of 8661 account records" is a readout, not a badge. As a white
   pill it read as something you could press, and on its own line below the
   toolbar it claimed the weight of a section heading for a status. It now sits
   in the empty space to the right of Search, on the row whose result it
   reports. */

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-inline-summary {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: block !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-inline-summary span {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--as-ink-3) !important;
  font-family: var(--as-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  /* Label tracking is for one-word labels. Across a whole sentence even 0.06em
     kept the words from holding together, so this reads as a sentence: normal
     tracking, sentence case, the muted body face. */
  letter-spacing: normal !important;
  padding: 0 !important;
  text-transform: none !important;
}

/* -- status chips --
   Three states, and only one of them is coloured. Teal ACTIVE next to teal
   CONNECTED next to yellow REVIEW meant every row was shouting, so the norm
   goes quiet and the exception keeps the colour -- the same rule the master
   list uses for a disabled dealer. */

/* The norm loses its box entirely. Twenty-five bordered ACTIVE rectangles down
   a column read as twenty-five input fields, and "this account is fine" is not
   news -- it is the condition of almost every row. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table .mock-chip.ok,
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table .mock-chip.neutral {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--as-ink-3) !important;
  padding: 0 !important;
}

/* Needs a human to look at it: ink, so it reads as louder than the norm
   without spending the yellow. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table .mock-chip.warn,
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table .mock-chip.review {
  background: var(--as-paper) !important;
  border-color: var(--as-ink) !important;
  color: var(--as-ink) !important;
}

/* The one state that stops an operator: a disabled account cannot be opened. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table .mock-chip.bad {
  background: #fdf5f4 !important;
  border-color: #e7b2ac !important;
  color: var(--as-halt) !important;
}

/* .mock-chip inherits a 32px min-height from the shell's pill sizing. Left in
   place around 12px of text it parked the word 3.5px from the top of the box
   and 16.5px from the bottom -- the same inherited-min-height problem the row
   actions had. Flex centres what is left. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) table.mock-table .mock-chip {
  align-items: center !important;
  display: inline-flex !important;
  justify-content: center !important;
  min-height: 0 !important;
}

/* The panel is named once.
   These sections are collapsible: dpd-v2-command-center-toggle injects a dark
   bar carrying the section's title, and the section's own heading sat directly
   underneath repeating it word for word. Hidden only where that bar exists --
   without the .dpd-v2-command-center-detail class there is nothing else naming
   the panel, and the heading has to stay. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-command-center-toggle ~ .border-dotted-heading {
  display: none !important;
}

/* -- quality floor -- */

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) :is(a, button, input):focus-visible {
  outline: 2px solid var(--as-focus) !important;
  outline-offset: 2px !important;
}

/* The collapse bar is dark and full-bleed, so a blue ring offset outside it drew
   a stray line across the card the moment anyone clicked the toggle. Same ring,
   in the bar's own accent, tucked inside its edge. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-command-center-toggle:focus-visible {
  outline: 2px solid var(--as-signal) !important;
  outline-offset: -4px !important;
}

@media (prefers-reduced-motion: reduce) {
  html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) * {
    transition: none !important;
  }
}

@media (max-width: 900px) {
  html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-assisted-sessions__filters,
  html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-search-form {
    width: 100% !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-seg__item {
    flex: 1 1 auto !important;
    text-align: center !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-assisted-sessions__aside {
    margin: 0 !important;
  }
}

/* ==========================================================================
   Customer Rebates — the submit action and the hero value
   --------------------------------------------------------------------------
   Appended here rather than to dpd-v2-portal.css because this sheet is the
   last one enqueued on a member route (priority 1210, after chrome-stability
   at 1205). The rebate-submit rule that already lives at dpd-v2-portal.css:
   27892 asks for a 54px button and loses — the button measured 40px on the
   rendered page — so scoping from this layer is what makes the change stick.
   ========================================================================== */

/* -- the submit action --
   The primary-path card offered three yellow controls in a row: Copy Link,
   Submit Rebate and Open Rewards Wallet. Nothing in that row said which one
   the page exists for. The hierarchy here is by KIND, not by size — Submit
   Rebate is the only filled control left on the card, and the wallet, which
   is navigation rather than an action on this card, steps down to a text
   link beside it. Sizing stays on the portal's own scale: 16px radius,
   condensed caps, #fff200, the same button language as the hero row. */

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell.dpd-v2-guided-route--rebates .dpd-v2-rebate-paths .dpd-v2-action-row {
  align-items: center !important;
  gap: 22px !important;
  margin-top: 20px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell.dpd-v2-guided-route--rebates .dpd-v2-rebate-paths .dpd-v2-action-row > a.dpd-v2-rebate-submit {
  align-items: center !important;
  background: #fff200 !important;
  border: 1px solid #fff200 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  color: #101820 !important;
  display: inline-flex !important;
  font-family: 'acumin-pro-condensed', sans-serif !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  height: auto !important;
  justify-content: center !important;
  letter-spacing: 0.18em !important;
  line-height: 1 !important;
  min-height: 50px !important;
  padding: 0 32px !important;
  text-align: center !important;
  white-space: nowrap !important;
  width: auto !important;
  -webkit-text-fill-color: #101820 !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell.dpd-v2-guided-route--rebates .dpd-v2-rebate-paths .dpd-v2-action-row > a.dpd-v2-rebate-submit:hover,
html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell.dpd-v2-guided-route--rebates .dpd-v2-rebate-paths .dpd-v2-action-row > a.dpd-v2-rebate-submit:focus-visible {
  background: #ffffff !important;
  border-color: #ffffff !important;
}

/* A link, not a button: no box, no height of its own, just the card's quiet
   text colour with an underline to say it goes somewhere. */
html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell.dpd-v2-guided-route--rebates .dpd-v2-rebate-paths .dpd-v2-action-row > a.dpd-v2-rebate-wallet {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.64) !important;
  display: inline-flex !important;
  font-family: 'acumin-pro-condensed', sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.18em !important;
  line-height: 1 !important;
  min-height: 0 !important;
  padding: 4px 0 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255, 255, 255, 0.28) !important;
  text-underline-offset: 5px !important;
  white-space: nowrap !important;
  width: auto !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.64) !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell.dpd-v2-guided-route--rebates .dpd-v2-rebate-paths .dpd-v2-action-row > a.dpd-v2-rebate-wallet:hover,
html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell.dpd-v2-guided-route--rebates .dpd-v2-rebate-paths .dpd-v2-action-row > a.dpd-v2-rebate-wallet:focus-visible {
  background: transparent !important;
  color: #ffffff !important;
  text-decoration-color: #fff200 !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* -- the hero value tile --
   The dollar figure is the reason a dealer submits at all, and at 340px wide
   with a 28px number it sat in the hero as a footnote. Widening the hero's
   summary column is enough on its own: the aside and the hero grid both size
   from --dpd-global-hero-summary-width, and below 1180px the hero stacks to a
   single column, so this only applies where there is room for it. */

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-guided-route--rebates {
  --dpd-global-hero-summary-width: clamp(300px, 29vw, 420px);
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-guided-route--rebates .video-header .dashboard-head-right-in {
  border: 2px solid rgba(255, 242, 0, 0.55) !important;
  border-radius: 22px !important;
  gap: 10px !important;
  max-width: none !important;
  padding: 24px 26px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-guided-route--rebates .video-header .dashboard-head-right-in > span {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 13px !important;
  letter-spacing: 0.14em !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-guided-route--rebates .video-header .dashboard-head-right-in h3 {
  color: #fff200 !important;
  font-size: clamp(52px, 4.6vw, 72px) !important;
  line-height: 0.88 !important;
  -webkit-text-fill-color: #fff200 !important;
}

/* The shared hero note truncates to a single nowrap line; with the tile this
   size the sentence has room to wrap and read in full. */
html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-guided-route--rebates .video-header .dashboard-head-right-in .dpd-v2-hero-side-note {
  color: rgba(255, 255, 255, 0.78) !important;
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

/* On a phone the row stacks; the button takes the full measure, the link
   stays a link and sits under it. */
@media (max-width: 767px) {
  html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell.dpd-v2-guided-route--rebates .dpd-v2-rebate-paths .dpd-v2-action-row {
    align-items: flex-start !important;
    gap: 16px !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell.dpd-v2-guided-route--rebates .dpd-v2-rebate-paths .dpd-v2-action-row > a.dpd-v2-rebate-submit {
    width: 100% !important;
  }
}

/* Collapsed, the card goes transparent (responsive-style-logout.css) so it no
   longer clips the bar to the card's corners -- the bar kept border-radius: 0
   and its -24px edge-to-edge overhang, so a shut panel showed a square slab
   wider than the card it belongs to. Collapsed, the bar IS the card: give it
   the card's own radius and drop the overhang. Expanded is untouched. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts).dpd-v2-command-center-detail.is-collapsed > .dpd-v2-command-center-toggle {
  border-radius: 18px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

/* Expanded, only the top corners are the card's; the bottom meets the content. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts).dpd-v2-command-center-detail:not(.is-collapsed) > .dpd-v2-command-center-toggle {
  border-radius: 18px 18px 0 0 !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-command-center-toggle {
  transition: border-radius 0.22s ease, margin 0.22s ease, width 0.22s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  html body.dpd-member-surface #sub-page-main-content-wrapper :is(#assisted-sessions, #dealer-session-console, #accounts) .dpd-v2-command-center-toggle {
    transition: none !important;
  }
}

/* Account menu identity chips: DEALER # / CUSTOMER ID / ROLE were truncating to
   "CUSTOMER…" and "Super Ad…" (Mario, 16 Sep). Three chips share a
   repeat(3, minmax(0, 1fr)) grid inside a ~350px panel — about 100px each — and
   dpd-chrome-stability.css:251 and :7565 both set nowrap + ellipsis on the label
   and value, so anything longer than the track was cut.

   responsive-style-logout.css:14603 already lets them wrap, but only inside a
   narrow-width media query: the desktop case was never covered. Same treatment
   at every width — the chips are two short lines instead of one clipped one. */
html body #dpd-account-dropdown .acc-drop-meta__item {
  align-content: start !important;
}

html body #dpd-account-dropdown .acc-drop-meta__item span,
html body #dpd-account-dropdown .acc-drop-meta__item strong,
html body #dpd-account-dropdown.dpd-account-dropdown .acc-drop-meta__item span,
html body #dpd-account-dropdown.dpd-account-dropdown .acc-drop-meta__item strong {
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: normal !important;
}

/* The value line is the one that runs long ("Super Admin", a long dealer
   number), so give it room to breathe on two lines. */
html body #dpd-account-dropdown .acc-drop-meta__item strong {
  line-height: 1.2 !important;
}

/* ---------------------------------------------------------------------------
   Dunlop Loyalty Program card — the row layout, at a specificity that wins.

   Two failed attempts, same root cause both times: specificity is resolved
   before source order, so appending later with !important proves nothing.

     the rule to beat   ... .mock-panel.is-dark.dpd-v2-program-card
                            .dpd-v2-loyalty-row        -> 1 id, 7 classes
     attempt 1          ... .dpd-v2-program-card--loyalty
                            .dpd-v2-loyalty-row        -> 1 id, 3 classes  (lost)
     attempt 2          ... .mock-panel.is-dark.dpd-v2-program-card
                            .dpd-v2-program-card--loyalty
                            .dpd-v2-loyalty-row        -> 1 id, 7 classes  (tie,
                            and it borrowed .mock-panel, a portal-wide class
                            this block is not allowed to touch outside the
                            three admin consoles)

   This one drops .mock-panel and adds [data-dpd-program-visual="loyalty"],
   which the card already carries: 1 id, 8 class-equivalents. It outranks the
   layout rule outright, and borrows no shared class to do it.

   The symptom: "PARTS UNLIMITED" wrapping onto the units value. It looked fine
   near 2000px only because the name fits on one line there.
   --------------------------------------------------------------------------- */
html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .is-dark.dpd-v2-program-card.dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-row {
  align-items: center !important;
  column-gap: 10px !important;
  display: grid !important;
  grid-template-columns: 14px minmax(0, 1fr) max-content !important;
  grid-template-rows: auto auto !important;
  row-gap: 6px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .is-dark.dpd-v2-program-card.dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-row__swatch {
  align-self: center !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .is-dark.dpd-v2-program-card.dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-row__identity {
  align-self: center !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

/* max-content: the value sizes to itself, so "32,525 units · 89%" always fits
   and never shares a track with a wrapping distributor name. */
html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .is-dark.dpd-v2-program-card.dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-row b {
  align-self: center !important;
  grid-column: 3 !important;
  grid-row: 1 !important;
  overflow: visible !important;
  text-align: right !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .is-dark.dpd-v2-program-card.dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-row__bar {
  grid-column: 2 / -1 !important;
  grid-row: 2 !important;
  width: auto !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .is-dark.dpd-v2-program-card.dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-kpis {
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)) !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .is-dark.dpd-v2-program-card.dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-kpis > span {
  align-content: start !important;
  min-width: 0 !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .is-dark.dpd-v2-program-card.dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-kpis em,
html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .is-dark.dpd-v2-program-card.dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-kpis strong {
  overflow: visible !important;
  overflow-wrap: anywhere !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .is-dark.dpd-v2-program-card.dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-kpis > span > a {
  display: block !important;
  text-align: center !important;
  white-space: normal !important;
  width: 100% !important;
}

/* style-main.css collapses the row to two tracks here and spans the value
   2 / -1. Answered at the same breakpoint, one class heavier. */
@media (max-width: 900px) {
  html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .is-dark.dpd-v2-program-card.dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-row {
    grid-template-columns: 14px minmax(0, 1fr) max-content !important;
    grid-template-rows: auto auto !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .is-dark.dpd-v2-program-card.dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-row b {
    grid-column: 3 !important;
    grid-row: 1 !important;
    text-align: right !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .is-dark.dpd-v2-program-card.dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-row__bar {
    grid-column: 2 / -1 !important;
    grid-row: 2 !important;
  }
}

@media (max-width: 760px) {
  html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .is-dark.dpd-v2-program-card.dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-kpis em,
  html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .is-dark.dpd-v2-program-card.dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-kpis strong {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }
}

/* Genuinely narrow: stack the value under the name instead of squeezing both. */
@media (max-width: 620px) {
  html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .is-dark.dpd-v2-program-card.dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-row {
    grid-template-columns: 14px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .is-dark.dpd-v2-program-card.dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-row b {
    grid-column: 2 !important;
    grid-row: 2 !important;
    text-align: left !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .is-dark.dpd-v2-program-card.dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-row__bar {
    grid-column: 2 !important;
    grid-row: 3 !important;
  }
}

/* ---------------------------------------------------------------------------
   Admin program visuals: give Loyalty a wider column, and stop the row
   stretching (Mario, 16 Sep — "it pushes the data down and the other widgets
   get extended").

   How the grid actually works: dpd-v2-portal.css:30015 lays six equal tracks on
   .has-strips[data-dpd-program-full][data-dpd-program-cards], and each full card
   takes `span 2` when data-dpd-program-full="3". Three identical thirds — which
   is why the Loyalty chips had nowhere to sit and stacked, making the card tall
   and dragging Rebate Activity and Tire Sales up to the same height with it.

   Seven tracks instead: Loyalty spans 3 (43%), the other two span 2 (28.5%
   each). Loyalty gets the width its chart, chips and distributor rows need, the
   other two lose little, and nothing wraps to a second row.

   The stretch was ours: dpd-frontend-audit.css:84 sets align-items: stretch on
   this grid (line 703 already uses start inside a media query). On the admin
   program grid each card should be its own height, so a tall Loyalty card no
   longer inflates its neighbours.

   Weight: the strip rules reach 1 id + 11 classes, so every override here adds
   [data-dpd-program-visual-grid] to outrank them. Breakpoints are left where
   they are — 761-1180px keeps its 3-span layout, and below 760px everything
   still stacks to one column.
   --------------------------------------------------------------------------- */
@media (min-width: 1181px) {
  /* Mario, 16 Sep: the uneven stacking was mine. #596 set start-alignment so a
     tall Loyalty card could not inflate its neighbours — but now that Loyalty is
     wider and therefore shorter, ragged card bottoms read worse than the problem
     it solved. Equal heights again; the wider column stays. */
  html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .dpd-v2-program-visual-grid.has-strips[data-dpd-program-visual-grid][data-dpd-program-full="3"][data-dpd-program-cards] {
    align-items: stretch !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  }

  /* Loyalty takes the extra track. */
  html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .dpd-v2-program-visual-grid.has-strips[data-dpd-program-visual-grid][data-dpd-program-full="3"][data-dpd-program-cards] > article.dpd-v2-program-card--loyalty:not(.is-minimized):not(.is-compact) {
    grid-column: span 3 !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .dpd-v2-program-visual-grid.has-strips[data-dpd-program-visual-grid][data-dpd-program-full="3"][data-dpd-program-cards] > article.dpd-v2-program-card:not(.dpd-v2-program-card--loyalty):not(.is-minimized):not(.is-compact) {
    grid-column: span 2 !important;
  }

  /* Strips and minimised cards still take the full width of the new track count. */
  html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .dpd-v2-program-visual-grid.has-strips[data-dpd-program-visual-grid][data-dpd-program-full="3"][data-dpd-program-cards] > article.dpd-v2-program-card.is-minimized,
  html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .dpd-v2-program-visual-grid.has-strips[data-dpd-program-visual-grid][data-dpd-program-full="3"][data-dpd-program-cards] > article.dpd-v2-program-card--loyalty.is-compact {
    grid-column: 1 / -1 !important;
  }

  /* Each card is its own height: a tall Loyalty card no longer inflates the
     two beside it. */
  /* The cards fill the row; their inner content stays top-aligned so a short
     card is not vertically centred in a tall box. */
  html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .dpd-v2-program-visual-grid.has-strips[data-dpd-program-visual-grid][data-dpd-program-full="3"][data-dpd-program-cards] > article.dpd-v2-program-card {
    align-content: start !important;
    align-self: stretch !important;
  }

  /* With the wider column the three chips fit side by side again instead of
     stacking into three full-width blocks. */
  html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .is-dark.dpd-v2-program-card.dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* The rebate CTA is the one thing this page exists for (client, 9-10 and 9-11:
   "make the SUBMIT REBATE button much more prominent"). It was a standard
   button sitting below the fold-line of the panel. */
html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-rbd__cta {
  border-radius: 999px !important;
  display: inline-flex !important;
  font-size: clamp(16px, 1.4vw, 20px) !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  min-height: 60px !important;
  padding: 0 38px !important;
  text-transform: uppercase !important;
}

/* The five live-site questions on the Rebate Desk (Mario, 16 Sep). A definition
   list, so the question reads as the question and the answer sits under it. */
html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-rbd__faq {
  display: grid !important;
  gap: 18px !important;
  margin: 0 !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-rbd__faq dt {
  font-weight: 800 !important;
  margin: 0 0 6px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-rbd__faq dd {
  margin: 0 !important;
  max-width: 70ch !important;
}

/* ---------------------------------------------------------------------------
   Loyalty: reserve the tallest panel, so choosing a dealer cannot move the row
   (Mario, 17 Sep — "these elements still jump and display larger other
   sections when loyalty is expanded").

   Cause: every dealer panel is pre-rendered and swapped by visibility. The
   panels differ in height (exultsdev has one distributor row, EXULTS Associate
   US 821 has six), so the card grew on selection and align-items: stretch —
   the equal-heights rule from #598, which the tests pin — passed that growth
   to Rebate Activity and Tire Sales.

   Fix: stack every panel in a single grid cell. The container is then always
   as tall as its tallest child, whichever one is showing, so the row never
   reflows. Hidden panels keep their space and are taken out of the accessibility
   tree and the tab order instead of being display:none.

   This deliberately does NOT touch align-items/align-self/align-content — the
   equal heights stay exactly as they are.
   --------------------------------------------------------------------------- */
html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-panels[data-dpd-loyalty-panels] {
  display: grid !important;
  grid-template-areas: "panel" !important;
  grid-template-columns: minmax(0, 1fr) !important;
  min-width: 0 !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-panels[data-dpd-loyalty-panels] > * {
  grid-area: panel !important;
  min-width: 0 !important;
}

/* The showing panel. */
html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-panels[data-dpd-loyalty-panels] > :not([hidden]) {
  opacity: 1 !important;
  pointer-events: auto !important;
  visibility: visible !important;
}

/* The reserved ones: still occupying the cell, but invisible and unreachable. */
html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-panels[data-dpd-loyalty-panels] > [hidden] {
  display: grid !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

/* The participation panel is a block, not the two-column chart grid. */
html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-panels[data-dpd-loyalty-panels] > .dpd-v2-loyalty-participation[hidden] {
  display: block !important;
}

/* ...but it reserves that height even when it has nothing to show.

   On the roll-up landing every panel in here is hidden -- the "all" chart-wrap by
   the sibling rule in dpd-v2-portal.css, the per-dealer ones by the server -- and
   the rules above keep each of them occupying the shared cell. So the block sat
   there at the height of the tallest dealer panel with nothing visible in it. It
   used to be beside the roll-up content in the card's second column, where it was
   masked by the content next to it; once every child of the card was made to span
   the full width it stacked underneath instead, as several hundred pixels of
   empty card.

   Reserving space is right the moment there IS a panel to keep still. Until then
   there is nothing to keep still, so collapse it. The first click is the only
   height change, and that one is the view genuinely changing.

   :has() is unsupported nowhere this portal runs, and if it ever is, the rule is
   skipped and the card is merely tall again. */
html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-panels[data-dpd-loyalty-panels]:not(:has(> :not([hidden]))) {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Tire Finder: saved motorcycles on the recall rail (Mario, 17 Sep; John Chen
   has asked for this repeatedly).

   The rail already showed what a dealer searched most. Starring is the
   deliberate version: the bikes they fit every week stay put instead of
   competing with whatever was searched this morning. The chip and its star are
   one visual unit but two buttons, so tapping the label runs the search and
   tapping the star saves it.
   --------------------------------------------------------------------------- */
/* The PAIR owns the pill (Mario, 18 Sep -- "cant see the star as it should be
   withing the pill").

   Previously the chip kept its own border, background and 999px radius from
   .dpd-fc-chip, while the star had border:0 and background:inherit. So the chip
   drew a complete pill of its own and the star floated beside it with no
   surface of its own -- two objects, not one, which is exactly what it looked
   like. Moving the surface up one level fixes it at the cause: the pair carries
   the border, the background and the radius, and both children sit inside it
   transparent and borderless. */
html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-fc-recall .dpd-fc-chip-pair {
  align-items: stretch !important;
  background: var(--fc-paper, #ffffff) !important;
  border: 1px solid var(--fc-line-2, #d8dde2) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  gap: 0 !important;
  overflow: hidden !important;
  transition: border-color 0.15s ease !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-fc-recall .dpd-fc-chip-pair:hover {
  border-color: var(--fc-ink, #10161d) !important;
}

/* Both halves are now surfaces-in-name-only: the pill behind them is the object. */
html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-fc-recall .dpd-fc-chip-pair .dpd-fc-chip {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 14px 0 4px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-fc-recall .dpd-fc-chip-pair .dpd-fc-chip:hover {
  background: transparent !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-fc-recall .dpd-fc-star {
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
  cursor: pointer !important;
  display: inline-flex !important;
  justify-content: center !important;
  min-width: 0 !important;
  opacity: 0.5 !important;
  padding: 0 4px 0 11px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-fc-recall .dpd-fc-star svg {
  height: 15px !important;
  width: 15px !important;
}

/* A filled shape needs more mass than a line icon to read at the same size. */
html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-fc-recall .dpd-fc-star[aria-pressed="true"] svg {
  height: 17px !important;
  width: 17px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-fc-recall .dpd-fc-star:hover,
html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-fc-recall .dpd-fc-star:focus-visible {
  opacity: 1 !important;
}

/* Saved: the glyph now carries its own fill (#fff200) and a dark stroke, set in
   starMark(), because colour:#fff200 alone painted the outline yellow too and
   the shape vanished into the white pill. This rule only has to stop the button
   dimming it -- it must NOT set colour, or currentColor would take the stroke
   back to yellow. */
html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-fc-recall .dpd-fc-star[aria-pressed="true"] {
  opacity: 1 !important;
}

/* Saved: the pill itself takes the Dunlop-yellow edge, so the whole chip reads
   as saved rather than the star looking like a separate badge stuck to it. */
html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-fc-recall .dpd-fc-chip-pair.is-starred {
  border-color: #fff200 !important;
}

@media (max-width: 760px) {
  html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-fc-recall .dpd-fc-star {
    min-width: 40px !important;
  }
}

/* ---------------------------------------------------------------------------
   Loyalty: no inner scroll. Centre the panel instead.
   (Mario, 17 Sep — "i dont like the inner scroll".)

   Three attempts, three complaints, and each fix caused the next:
     #596  each card its own height      -> ragged bottoms
     #598  equal heights again           -> picking a dealer moved the whole row
     #600  reserve the tallest panel     -> a void under one-distributor dealers
     #602  cap the list and scroll       -> a row clipped mid-height, reads broken

   What every version has to keep: the panels share one grid cell, so selecting
   a dealer cannot resize the card and cannot move Rebate Activity or Tire Sales.
   That part is right and stays.

   The remaining problem was only ever where the slack goes. Putting it under a
   short panel reads as an unfinished card; hiding it behind a scrollbar reads
   as broken. Putting it evenly ABOVE AND BELOW reads as a centred card, which
   is what a one-distributor dealer now gets. No scrollbar, no clipped row, no
   void, and all six distributors visible at once for the dealers who have six.
   --------------------------------------------------------------------------- */
html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-list {
  max-height: none !important;
  overflow: visible !important;
}

/* The stacking container centres whichever panel is showing. */
html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .dpd-v2-dashboard-section--program-visuals .dpd-v2-program-card--loyalty[data-dpd-program-visual="loyalty"] .dpd-v2-loyalty-panels[data-dpd-loyalty-panels] > * {
  align-content: center !important;
}


/* ---------------------------------------------------------------------------
   Tire Finder recall chips: the star IS the glyph (Mario, 18 Sep).

   The chip used to wear a circle-arrow and carry a separate star button beside
   it, so "featured" was expressed by a control rather than by the chip itself.
   The chip now draws the star: outline when the bike is merely recent, filled
   and Dunlop yellow when it is featured. The circle-arrow stays on the session
   Resume chip, which restores the last search and is a different action.

   The existing rule at ~2308 colours the sibling .dpd-fc-star button. This one
   colours the glyph inside the chip, which is a different element, so both are
   needed rather than one replacing the other.
   --------------------------------------------------------------------------- */

/* Superseded 18 Sep: the chip carries no glyph of its own any more. The single
   icon lives in .dpd-fc-star at the head of the pill -- circle-arrow while the
   bike is merely recent, filled Dunlop yellow once it is featured. Drawing a
   star in both places is what produced the double star. The colour rule for the
   saved state is the existing .dpd-fc-star[aria-pressed="true"] block above. */


/* ---------------------------------------------------------------------------
   One button type scale across the portal (Mario, 18 Sep: "make sure fonts and
   text are consistant in buttons through out the site").

   The cause: the main pill class is .mock-btn, defined in mockup-local.css --
   a PROTOTYPE stylesheet that is really enqueued on the portal
   (dpd-v2-core.php:4796-4807). It sets line-height:42px, letter-spacing:2px,
   font-weight:700 and no font-family, so buttons inherit whatever the
   surrounding block happens to use. That is why DOWNLOAD and WATCH VIDEO
   render in different faces on pages that sit side by side.

   Five unrelated button families are in play: .mock-btn (84 uses),
   .btn/.btn-primary, .dpd-modal-button, .lms-btn, .crs-btn and
   .dpd-admin-ops-btn. Rather than restyle each, they are given ONE type scale
   here -- face, size, weight, tracking and case only. Colour, shape, padding
   and state are deliberately untouched, so no button changes its identity or
   its hit area; they simply stop disagreeing about type.

   Reuses --dpd-chrome-font-ui (declared dpd-chrome-stability.css:12) instead of
   naming a face, so a future font change moves everything together.
   --------------------------------------------------------------------------- */

html body.dpd-member-surface #sub-page-main-content-wrapper :is(
  .mock-btn,
  .btn,
  .dpd-modal-button,
  .lms-btn,
  .crs-btn,
  .dpd-admin-ops-btn,
  .wp-block-button__link
) {
  font-family: var(--dpd-chrome-font-ui, "acumin-pro-semi-condensed", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}

/* The small variant keeps its smaller footprint but stays on the same scale,
   rather than dropping to a different face as it does today. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(.mock-btn, .btn).small {
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
}

/* Buttons that carry a count or a name read better without the wide tracking
   squeezing them -- "REVIEW 11,129 PENDING" is a sentence, not a label. */
html body.dpd-member-surface #sub-page-main-content-wrapper :is(.mock-btn, .btn)[data-dpd-count],
html body.dpd-member-surface #sub-page-main-content-wrapper .dpd-v2-rewards-primary-action {
  letter-spacing: 0.08em !important;
}

/* 18 Sep: five Super Admin widgets are hidden for launch (2.1), leaving Service
   Health alone in the metrics grid. A lone half-width card left an empty half
   row, so a card with no siblings takes the full row. */
html body.dpd-member-surface #sub-page-main-content-wrapper.dpd-v2-portal-shell .main-content-area-right .dpd-v2-dashboard-section--admin-command-widgets .dpd-v2-admin-dashboard-grid > .dpd-v2-admin-dashboard-widget:only-child {
  grid-column: 1 / -1 !important;
}

/* =========================================================================
   Compact member heroes -- 18 Sep 2026 (launch)
   Mario: the portal heroes were too tall for what they say, and the gaps
   between eyebrow, title and description read as empty space rather than
   rhythm. The My Account hero ran ~375px tall around three lines of text.

   Height now comes from the content, not a min-height: padding is trimmed,
   the title is a size smaller, and the eyebrow -> title -> description stack
   sits on one tight rhythm. Background image and hero media are untouched.

   Why the ID is written three times: route-specific rules (account, training,
   downloads, tire finder) carry a second ID such as #account-dashboard or
   #training-intro, so a single- or double-ID selector loses to them no matter
   where it sits in the cascade. Repeating #sub-page-main-content-wrapper is
   the legal way to outrank them without touching each of those rules.

   Tire detail keeps its own product hero (image-led), so it is left alone,
   and nothing here changes grid-template-columns -- the admin-tool hero's
   48px info column below 1180px still owns its layout.
   ========================================================================= */

html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper#sub-page-main-content-wrapper:not(.dpd-v2-guided-route--tire-detail) .video-header > .video-header-content,
html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper#sub-page-main-content-wrapper:not(.dpd-v2-guided-route--tire-detail) .video-header > .video-header-content.mock-static-bg {
  align-items: center !important;
  column-gap: clamp(20px, 3vw, 40px) !important;
  height: auto !important;
  min-height: 0 !important;
  padding: clamp(20px, 2vw, 28px) clamp(24px, 3.4vw, 48px) !important;
  row-gap: 16px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper#sub-page-main-content-wrapper:not(.dpd-v2-guided-route--tire-detail) .video-header .dashboard-head-left {
  align-content: center !important;
  gap: 6px !important;
}

/* Eyebrows: one size, one line-height, no stacked margins. A second eyebrow
   (e.g. "DEALER WORKSPACE" after the kicker) sits on the same rhythm. */
html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper#sub-page-main-content-wrapper:not(.dpd-v2-guided-route--tire-detail) .video-header .dashboard-head-left > .dpd-v2-hero-kicker,
html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper#sub-page-main-content-wrapper:not(.dpd-v2-guided-route--tire-detail) .video-header .dashboard-head-left > span {
  font-size: 11px !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper#sub-page-main-content-wrapper:not(.dpd-v2-guided-route--tire-detail) .video-header .dashboard-head-left h1,
html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper#sub-page-main-content-wrapper:not(.dpd-v2-guided-route--tire-detail) .video-header .dashboard-head-left h2 {
  font-size: clamp(26px, 2.2vw, 36px) !important;
  line-height: 1.02 !important;
  margin: 2px 0 0 !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper#sub-page-main-content-wrapper:not(.dpd-v2-guided-route--tire-detail) .video-header .dashboard-head-left h4,
html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper#sub-page-main-content-wrapper:not(.dpd-v2-guided-route--tire-detail) .video-header .dashboard-head-left > .dpd-v2-hero-dealership {
  font-size: 12px !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper#sub-page-main-content-wrapper:not(.dpd-v2-guided-route--tire-detail) .video-header .dashboard-head-left > p:not(.dpd-v2-hero-kicker):not(.dpd-v2-hero-dealership),
html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-v2-guided-route--training #training-intro #training-focus-copy {
  font-size: clamp(14px, 1vw, 16px) !important;
  line-height: 1.4 !important;
  margin: 4px 0 0 !important;
  max-width: 64ch !important;
}

/* The summary tile (Dunlop Dollars balance, account status, service health)
   sits centred against the copy instead of stretching the hero. Rebates keeps
   its deliberately large value tile (see "the hero value tile" above). */
html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper#sub-page-main-content-wrapper:not(.dpd-v2-guided-route--tire-detail) .video-header .dashboard-head-right {
  align-self: center !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper#sub-page-main-content-wrapper:not(.dpd-v2-guided-route--tire-detail):not(.dpd-v2-guided-route--rebates) .video-header .dashboard-head-right-in:not(.dpd-v2-admin-tool-focus-trigger) {
  gap: 6px !important;
  padding: 12px 14px !important;
}

/* Rewards Store builds its hero from its own classes, so it gets the same
   treatment by name. */
html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-rewards-store-shell .dpd-v2-rewards-flow-hero {
  gap: clamp(20px, 3vw, 40px) !important;
  min-height: 0 !important;
  padding: clamp(20px, 2vw, 28px) clamp(24px, 3.4vw, 48px) !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-rewards-store-shell .dpd-v2-rewards-flow-hero .dpd-v2-rewards-hero-copy span {
  margin-bottom: 6px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-rewards-store-shell .dpd-v2-rewards-flow-hero .dpd-v2-rewards-hero-copy h1 {
  font-size: clamp(26px, 2.2vw, 36px) !important;
  line-height: 1.02 !important;
  margin: 0 0 8px !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-rewards-store-shell .dpd-v2-rewards-flow-hero .dpd-v2-rewards-hero-copy p {
  font-size: clamp(14px, 1vw, 16px) !important;
  line-height: 1.4 !important;
}

html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-rewards-store-shell .dpd-v2-rewards-flow-hero .dpd-v2-rewards-hero-panel {
  gap: 10px !important;
  padding: 14px 16px !important;
}

@media (max-width: 760px) {
  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper#sub-page-main-content-wrapper:not(.dpd-v2-guided-route--tire-detail) .video-header > .video-header-content,
  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper#sub-page-main-content-wrapper:not(.dpd-v2-guided-route--tire-detail) .video-header > .video-header-content.mock-static-bg,
  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-rewards-store-shell .dpd-v2-rewards-flow-hero {
    padding: 18px !important;
    row-gap: 12px !important;
  }

  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper#sub-page-main-content-wrapper:not(.dpd-v2-guided-route--tire-detail) .video-header .dashboard-head-left h1,
  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper#sub-page-main-content-wrapper:not(.dpd-v2-guided-route--tire-detail) .video-header .dashboard-head-left h2,
  html body.dpd-member-surface #sub-page-main-content-wrapper#sub-page-main-content-wrapper.dpd-rewards-store-shell .dpd-v2-rewards-flow-hero .dpd-v2-rewards-hero-copy h1 {
    font-size: clamp(24px, 7.4vw, 30px) !important;
    max-width: none !important;
    overflow-wrap: anywhere !important;
  }
}