/* Dismantix application shell — designed to the Corporate Visual Identity
 * (docs/Dismantix_Brand_Kit/06_CVI): Inter Display headings, Inter body,
 * soft tinted status chips with coloured dots, teal primary / outlined
 * secondary buttons, white cards on light neutral, generous air. */

:root {
  --dx-font-display: "InterDisplay", "Inter Display", "Inter", system-ui, sans-serif;
  --dx-font-body: "Inter", system-ui, sans-serif;
  /* CVI chip tints */
  --dx-tint-mint: #E4F7EF;
  --dx-tint-blue: #E3EEFB;
  --dx-tint-amber: #FBF1DB;
  --dx-tint-red: #FBE9E9;
  --dx-tint-neutral: #EDF1F4;
  --dx-teal-dark: #00815F;
  --dx-shadow: 0 1px 3px rgba(24, 42, 52, 0.06);
}

* { box-sizing: border-box; }

html { font-size: 16px; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--dx-font-body);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--dx-charcoal);
  background: var(--dx-light-neutral);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--dx-font-display);
  color: var(--dx-charcoal);
  letter-spacing: -0.01em;
}

h1 { font-size: 26px; font-weight: 800; margin: 0 0 4px; }
h1 + .dx-muted { margin-top: 0; margin-bottom: var(--dx-space-6); font-size: 15px; }
h2 { font-size: 17px; font-weight: 700; margin: 0 0 var(--dx-space-3); }

a { color: var(--dx-teal); }

p { margin: 0 0 var(--dx-space-3); }

/* ---------- Shell ---------- */

.dx-app { display: flex; min-height: 100vh; }

.dx-sidebar {
  width: 236px;
  flex-shrink: 0;
  background: var(--dx-charcoal);
  color: var(--dx-white);
  display: flex;
  flex-direction: column;
  padding: var(--dx-space-6) var(--dx-space-4) var(--dx-space-4);
}

.dx-sidebar__logo { padding: 0 var(--dx-space-2) var(--dx-space-8); }
.dx-sidebar__logo img { width: 168px; display: block; }

.dx-nav { display: flex; flex-direction: column; gap: 2px; }

.dx-nav a {
  color: #C9D4DB;
  text-decoration: none;
  padding: 9px var(--dx-space-4);
  border-radius: var(--dx-radius-md);
  font-size: 14.5px;
  font-weight: 500;
}

.dx-nav a:hover { background: var(--dx-deep-slate); color: var(--dx-white); }
.dx-nav a.active { background: var(--dx-teal); color: var(--dx-white); font-weight: 600; }

.dx-main {
  flex: 1;
  padding: var(--dx-space-8) 40px 64px;
  min-width: 0;
}

/* Centre the working area within the space right of the sidebar */
.dx-main > * {
  max-width: 1240px;
  margin-inline: auto;
}

.dx-sidebar__footer {
  margin-top: auto;
  padding-top: var(--dx-space-4);
  border-top: 1px solid var(--dx-deep-slate);
}

.dx-sidebar__user {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--dx-space-2) var(--dx-space-2) var(--dx-space-3);
  font-size: 14px;
}

.dx-sidebar__user span { color: #8FA0AB; font-size: 12px; }

/* ---------- Cards ---------- */

.dx-card {
  background: var(--dx-white);
  border: 1px solid var(--dx-border);
  border-radius: var(--dx-radius-lg);
  padding: var(--dx-space-6);
  box-shadow: var(--dx-shadow);
  margin-bottom: var(--dx-space-4);
}

.dx-card--table { padding: 0; overflow-x: auto; }
.dx-card--form { max-width: 560px; }
.dx-card__title { padding: var(--dx-space-6) var(--dx-space-6) 0; margin: 0 0 var(--dx-space-2); }
.dx-card__note { padding: 0 var(--dx-space-6) var(--dx-space-4); font-size: 13px; }

.dx-muted { color: var(--dx-muted); }

.dx-page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--dx-space-4); }
.dx-page-head h1 { margin-bottom: 0; }

/* ---------- KPI tiles ---------- */

.dx-kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--dx-space-4);
  margin-bottom: var(--dx-space-6);
}

.dx-kpi {
  background: var(--dx-white);
  border: 1px solid var(--dx-border);
  border-radius: var(--dx-radius-md);
  padding: var(--dx-space-4) var(--dx-space-4) var(--dx-space-3);
  box-shadow: var(--dx-shadow);
}

.dx-kpi__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dx-muted);
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dx-kpi__value {
  font-family: var(--dx-font-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.dx-kpi__value--kpi { font-size: 24px; }
.dx-kpi__value--small { font-size: 17px; font-weight: 600; }
a.dx-kpi--link { text-decoration: none; color: inherit; display: block; cursor: pointer;
  transition: border-color .12s, box-shadow .12s; }
a.dx-kpi--link:hover { border-color: var(--dx-teal); box-shadow: 0 3px 10px rgba(0, 110, 100, .12); }
a.dx-kpi--active { border-color: var(--dx-teal); background: #f2faf8;
  box-shadow: inset 0 0 0 1px var(--dx-teal); }

/* ---------- Buttons (CVI: solid teal primary, outlined secondary) ------- */

.dx-button {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--dx-white);
  background: var(--dx-teal);
  border: 1px solid var(--dx-teal);
  border-radius: var(--dx-radius-md);
  padding: 9px 18px;
  cursor: pointer;
  transition: background 0.12s;
}

.dx-button:hover { background: var(--dx-teal-dark); border-color: var(--dx-teal-dark); }

.dx-button--small { font-size: 13px; padding: 5px 12px; border-radius: var(--dx-radius-sm); }

.dx-button--ghost,
.dx-button--ghost-light {
  background: var(--dx-white);
  color: var(--dx-teal);
  border: 1px solid var(--dx-teal);
}

.dx-button--ghost:hover, .dx-button--ghost-light:hover { background: var(--dx-tint-mint); }

.dx-sidebar .dx-button--ghost {
  background: transparent;
  color: #C9D4DB;
  border-color: var(--dx-deep-slate);
  width: 100%;
}

.dx-sidebar .dx-button--ghost:hover { background: var(--dx-deep-slate); color: var(--dx-white); }

.dx-button--danger { background: var(--dx-white); color: var(--dx-status-red); border-color: var(--dx-status-red); }
.dx-button--danger:hover { background: var(--dx-tint-red); }

/* ---------- Forms ---------- */

.dx-form { display: flex; flex-direction: column; gap: var(--dx-space-4); }

.dx-field { display: flex; flex-direction: column; gap: 6px; }
.dx-field--inline { flex-direction: row; align-items: center; gap: var(--dx-space-2); }

.dx-field label { font-size: 13px; font-weight: 600; color: var(--dx-muted); }

.dx-field input, .dx-search input[type="search"], .dx-toolbar select, .dx-filters select,
.dx-search select, .dx-quote input, .dx-quote select {
  font: inherit;
  font-size: 14px;
  padding: 8px 12px;
  border: 1px solid var(--dx-border);
  border-radius: var(--dx-radius-sm);
  background: var(--dx-white);
  color: var(--dx-charcoal);
}

.dx-field input:focus, .dx-search input:focus, .dx-toolbar select:focus, .dx-filters select:focus {
  outline: 2px solid var(--dx-mint);
  outline-offset: 1px;
  border-color: var(--dx-teal);
}

/* ---------- Flash ---------- */

.dx-flash {
  padding: var(--dx-space-3) var(--dx-space-4);
  border-radius: var(--dx-radius-md);
  margin-bottom: var(--dx-space-4);
  font-size: 14px;
}

.dx-flash--alert { background: var(--dx-tint-red); color: #9C3030; border: 1px solid #F0C4C4; }
.dx-flash--notice { background: var(--dx-tint-mint); color: var(--dx-teal-dark); border: 1px solid #BEE8D8; }

/* ---------- Status chips (CVI: tinted pill + coloured dot) -------------- */

.dx-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background: var(--dx-tint-neutral);
  color: var(--dx-charcoal);
  white-space: nowrap;
}

.dx-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chip-dot, var(--dx-muted));
  flex-shrink: 0;
}

/* positive */
.dx-badge--in_stock, .dx-badge--open, .dx-badge--processed, .dx-badge--completed,
.dx-badge--accepted, .dx-badge--submitted, .dx-badge--quoted, .dx-badge--active {
  background: var(--dx-tint-mint);
  --chip-dot: var(--dx-teal);
}

/* informational */
.dx-badge--reserved { background: var(--dx-tint-blue); --chip-dot: var(--dx-status-blue); }

/* attention */
.dx-badge--on_hold, .dx-badge--no_stock, .dx-badge--running, .dx-badge--low {
  background: var(--dx-tint-amber);
  --chip-dot: var(--dx-status-amber);
}

/* problems */
.dx-badge--invalid_signature, .dx-badge--invalid_payload, .dx-badge--failed, .dx-badge--rejected {
  background: var(--dx-tint-red);
  --chip-dot: var(--dx-status-red);
}

/* neutral / lifecycle-over */
.dx-badge--unavailable, .dx-badge--expired, .dx-badge--withdrawn, .dx-badge--closed,
.dx-badge--received, .dx-badge--duplicate, .dx-badge--draft, .dx-badge--pending {
  background: var(--dx-tint-neutral);
  color: var(--dx-muted);
  --chip-dot: var(--dx-muted);
}

/* identity chips — no dot */
.dx-badge--source, .dx-badge--value, .dx-badge--role,
[class*="dx-band--"] { gap: 0; }
.dx-badge--source::before, .dx-badge--value::before, .dx-badge--role::before,
[class*="dx-band--"]::before { display: none; }

.dx-badge--source { background: var(--dx-charcoal); color: var(--dx-white); font-weight: 600; }
.dx-badge--role { background: var(--dx-deep-slate); color: var(--dx-white); margin: 1px; }
.dx-badge--value {
  background: var(--dx-white);
  color: var(--dx-teal-dark);
  border: 1px solid var(--dx-mint);
  font-variant-numeric: tabular-nums;
}

/* confidence bands */
.dx-band--exact { background: var(--dx-teal); color: var(--dx-white); }
.dx-band--strong { background: var(--dx-tint-mint); color: var(--dx-teal-dark); }
.dx-band--probable { background: var(--dx-tint-amber); color: #8A5A00; }
.dx-band--weak { background: var(--dx-tint-neutral); color: var(--dx-muted); }

/* ---------- Tables ---------- */

.dx-table { width: 100%; border-collapse: collapse; font-size: 14px; }

.dx-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--dx-muted);
  padding: var(--dx-space-3) var(--dx-space-4);
  border-bottom: 1px solid var(--dx-border);
  white-space: nowrap;
}

.dx-table td {
  padding: var(--dx-space-3) var(--dx-space-4);
  border-bottom: 1px solid var(--dx-light-neutral);
  vertical-align: top;
}

.dx-table tbody tr:hover { background: #FAFCFD; }
.dx-table tbody tr:last-child td { border-bottom: none; }

/* ---------- Search / filters / toolbar ---------- */

.dx-search { display: flex; gap: var(--dx-space-2); margin-bottom: var(--dx-space-4); flex-wrap: wrap; }
.dx-search input[type="search"] { flex: 1; max-width: 480px; }

.dx-result-count { margin-block: var(--dx-space-2); font-size: 13px; }

.dx-filters { display: flex; gap: var(--dx-space-2); align-items: center; margin-bottom: var(--dx-space-4); flex-wrap: wrap; }
.dx-filters label {
  display: flex; gap: 6px; align-items: center;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--dx-border);
  border-radius: var(--dx-radius-sm);
  background: var(--dx-white);
}

.dx-toolbar { display: flex; gap: var(--dx-space-4); align-items: stretch; margin-bottom: var(--dx-space-6); flex-wrap: wrap; }
.dx-toolbar__group:first-child { flex: 1 1 560px; min-width: 0; }
.dx-toolbar__group--sort { flex: 0 0 auto; align-self: flex-start; }

.dx-toolbar__group {
  display: flex;
  gap: var(--dx-space-2);
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid var(--dx-border);
  border-radius: var(--dx-radius-md);
  padding: var(--dx-space-3) var(--dx-space-4);
  background: var(--dx-white);
  box-shadow: var(--dx-shadow);
  margin: 0;
}

.dx-toolbar__group legend {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dx-muted);
  padding: 0 6px;
}

.dx-toolbar__group--sort { border-color: var(--dx-teal); }
.dx-toolbar__group--sort legend { color: var(--dx-teal); }

.dx-toolbar label {
  display: flex; gap: 6px; align-items: center;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--dx-border);
  border-radius: var(--dx-radius-sm);
  background: var(--dx-white);
}

/* ---------- Pagination ---------- */

.dx-pagination { display: flex; gap: 6px; margin-top: var(--dx-space-4); flex-wrap: wrap; }
.dx-pagination a { text-decoration: none; }
.dx-page-current { background: var(--dx-teal); color: var(--dx-white); border-color: var(--dx-teal); cursor: default; }

/* ---------- Demand request cards ---------- */

details.dx-request { padding: 0; }

.dx-request__summary {
  display: grid;
  grid-template-columns: 14px 170px minmax(160px, 1fr) 70px max-content max-content;
  gap: var(--dx-space-4);
  align-items: center;
  padding: var(--dx-space-4) var(--dx-space-6);
  cursor: pointer;
  list-style: none;
  border-radius: var(--dx-radius-lg);
}

.dx-request__summary::-webkit-details-marker { display: none; }

.dx-request__summary::before {
  content: "▸";
  color: var(--dx-muted);
  font-size: 13px;
  transition: transform 0.15s;
}

details[open] > .dx-request__summary::before { transform: rotate(90deg); }
details[open] > .dx-request__summary { border-radius: var(--dx-radius-lg) var(--dx-radius-lg) 0 0; }
.dx-request__summary:hover { background: #FAFCFD; }

.dx-request__cell { display: inline-flex; align-items: center; gap: var(--dx-space-2); flex-wrap: wrap; }
.dx-request__cell:last-child { justify-content: flex-end; }
.dx-request__vehicle { font-size: 15px; }

.dx-request__body {
  padding: var(--dx-space-4) var(--dx-space-6) var(--dx-space-6);
  border-top: 1px solid var(--dx-light-neutral);
}

@media (max-width: 900px) {
  .dx-request__summary { display: flex; flex-wrap: wrap; }
}

/* ---------- Demand lines & candidates ---------- */

.dx-line {
  margin-top: var(--dx-space-4);
  padding: var(--dx-space-4);
  background: #FAFCFD;
  border: 1px solid var(--dx-light-neutral);
  border-radius: var(--dx-radius-md);
}

.dx-line__header {
  display: flex;
  gap: var(--dx-space-3);
  align-items: center;
  margin-bottom: var(--dx-space-3);
  flex-wrap: wrap;
}

.dx-line__header strong { font-size: 15px; }
.dx-line__none { margin: 0; font-size: 13px; }

.dx-line .dx-table { background: var(--dx-white); border: 1px solid var(--dx-light-neutral); border-radius: var(--dx-radius-sm); }

.dx-evidence { max-width: 340px; }

.dx-evidence__item {
  display: inline-block;
  background: var(--dx-light-neutral);
  border-radius: 5px;
  padding: 2px 8px;
  margin: 1px;
  font-size: 11.5px;
  color: var(--dx-muted);
}

.dx-evidence__warning {
  display: inline-block;
  background: var(--dx-tint-amber);
  color: #8A5A00;
  border-radius: 5px;
  padding: 2px 8px;
  margin: 1px;
  font-size: 11.5px;
  font-weight: 600;
}

.dx-actions { white-space: nowrap; }
.dx-actions form { display: inline-block; }

/* Reject dropdown menu */
.dx-reject-menu { position: relative; display: inline-block; }
.dx-reject-menu summary { list-style: none; display: inline-block; }
.dx-reject-menu summary::-webkit-details-marker { display: none; }

.dx-reject-menu__list {
  position: absolute;
  right: 0;
  z-index: 20;
  margin-top: 6px;
  background: var(--dx-white);
  border: 1px solid var(--dx-border);
  border-radius: var(--dx-radius-md);
  box-shadow: 0 8px 24px rgba(24, 42, 52, 0.16);
  min-width: 170px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.dx-reject-menu__list form { display: block; }

.dx-reject-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 13.5px;
  padding: 9px 14px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--dx-status-red);
}

.dx-reject-menu__item:hover { background: var(--dx-tint-red); }

/* ---------- Quote panel ---------- */

.dx-quote {
  margin-top: var(--dx-space-6);
  padding: var(--dx-space-4);
  background: var(--dx-tint-mint);
  border: 1px solid #BEE8D8;
  border-radius: var(--dx-radius-md);
}

.dx-quote .dx-table { background: var(--dx-white); border-radius: var(--dx-radius-sm); margin-bottom: var(--dx-space-3); }

.dx-input--qty { width: 60px; }
.dx-input--price { width: 96px; }
.dx-input--note { width: 150px; }

.dx-quote input, .dx-quote select { padding: 5px 8px; font-size: 13px; }

/* ---------- Auth ---------- */

.dx-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--dx-light-neutral);
}

.dx-auth__panel {
  width: 400px;
  max-width: 92vw;
  background: var(--dx-white);
  border: 1px solid var(--dx-border);
  border-radius: var(--dx-radius-lg);
  box-shadow: var(--dx-shadow);
  padding: 40px;
}

.dx-auth__logo { width: 210px; display: block; margin-bottom: var(--dx-space-8); }

/* ---------- Help ---------- */

.dx-help { margin-bottom: var(--dx-space-4); }
.dx-help h2 { margin-top: 0; }
.dx-help-toc { margin-bottom: var(--dx-space-4); font-size: 14px; }

/* Request photo strip (streamed through the supplier API session) */
.dx-photos {
  display: flex;
  gap: var(--dx-space-2);
  flex-wrap: wrap;
  margin-bottom: var(--dx-space-3);
}

.dx-photos .dx-photos__thumb img {
  height: 108px;
  width: 144px;
  object-fit: cover;
  border-radius: var(--dx-radius-sm);
  border: 1px solid var(--dx-border);
  background: var(--dx-tint-neutral);
}

.dx-photos .dx-photos__thumb img:hover { outline: 2px solid var(--dx-mint); }

/* Photo gallery lightbox */
.dx-photos__thumb {
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}

/* Full-screen gallery: the image gets the entire viewport; clicking it
   toggles 1:1 native pixels (pan by scrolling) for quality inspection. */
.dx-gallery {
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  background: rgba(13, 22, 27, 0.97);
}

.dx-gallery::backdrop { background: rgba(13, 22, 27, 0.9); }

.dx-gallery__frame {
  position: relative;
  width: 100%;
  height: calc(100dvh - 52px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

/* Original size by default — never upscale small sources into blur;
   only cap when the photo exceeds the viewport (then click for 1:1). */
dialog.dx-gallery .dx-gallery__frame img {
  width: auto;
  height: auto;
  max-width: 96vw;
  max-height: calc(100dvh - 64px);
  display: block;
}

dialog.dx-gallery .dx-gallery__frame img.is-zoomed {
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  object-fit: unset;
  cursor: zoom-out;
  margin: auto;
}

.dx-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  font-size: 40px;
  line-height: 1;
  padding: var(--dx-space-3) var(--dx-space-4);
  background: rgba(24, 42, 52, 0.55);
  border: none;
  color: var(--dx-white);
  cursor: pointer;
  border-radius: var(--dx-radius-md);
}

.dx-gallery__nav--prev { left: 14px; }
.dx-gallery__nav--next { right: 14px; }
.dx-gallery__nav:hover { background: rgba(24, 42, 52, 0.9); }

.dx-gallery__bar {
  height: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--dx-space-6);
}

.dx-gallery__counter { color: #C9D4DB; font-size: 13px; }

/* Photo-available indicator on collapsed request cards */
.dx-photo-flag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--dx-teal-dark);
  background: var(--dx-tint-mint);
  border-radius: 999px;
  padding: 1px 9px;
}

/* OEM part number chips — monospace; --hit marks a number the request asked for */
.dx-oem {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--dx-muted);
  background: var(--dx-tint-neutral);
  border-radius: 4px;
  padding: 1px 6px;
  margin: 1px 2px 0 0;
}

.dx-oem--hit {
  color: var(--dx-white);
  background: var(--dx-teal);
  font-weight: 600;
}

/* Request meta row: details left, actions right, one aligned line */
.dx-request__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--dx-space-4);
  flex-wrap: wrap;
  margin-bottom: var(--dx-space-3);
}

.dx-request__meta-info {
  display: inline-flex;
  align-items: center;
  gap: var(--dx-space-2);
  flex-wrap: wrap;
}

.dx-request__meta-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--dx-space-2);
  margin-left: auto;
}

.dx-request__meta-actions form { display: inline-block; }

/* Stock photo thumb with count overlay — own table column, roomy */
.dx-photo-cell { width: 140px; vertical-align: middle; }

.dx-stock-photos { display: inline-block; }
.dx-stock-photos .dx-photos__thumb { position: relative; display: block; }
.dx-stock-photos .dx-photos__thumb img {
  height: 96px;
  width: 128px;
  object-fit: cover;
  border-radius: var(--dx-radius-md);
  border: 1px solid var(--dx-border);
  box-shadow: var(--dx-shadow);
  display: block;
}
.dx-stock-photos .dx-photos__thumb img:hover { outline: 2px solid var(--dx-mint); }

.dx-stock-photos__count {
  position: absolute;
  right: 5px;
  bottom: 5px;
  background: rgba(24, 42, 52, 0.78);
  color: var(--dx-white);
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 4px;
  padding: 0 5px;
}

/* Multi-select part-count pills */
.dx-parts-filter { display: inline-flex; align-items: center; gap: 4px; }

.dx-parts-filter__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--dx-muted);
  margin-right: 2px;
}

.dx-check-pill { position: relative; cursor: pointer; }
.dx-check-pill input { position: absolute; opacity: 0; pointer-events: none; }

.dx-check-pill span {
  display: inline-block;
  min-width: 30px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 8px;
  border: 1px solid var(--dx-border);
  border-radius: 999px;
  background: var(--dx-white);
  color: var(--dx-muted);
}

.dx-check-pill input:checked + span {
  background: var(--dx-teal);
  border-color: var(--dx-teal);
  color: var(--dx-white);
}

.dx-check-pill:hover span { border-color: var(--dx-teal); }

/* Second summary line: vehicle identifiers + requested parts */
.dx-request__idline {
  grid-column: 2 / -1;
  display: flex;
  gap: var(--dx-space-2);
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2px;
}

.dx-idchip {
  font-size: 12.5px;
  color: var(--dx-charcoal);
  background: var(--dx-light-neutral);
  border-radius: 6px;
  padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}

.dx-idchip b {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dx-muted);
  margin-right: 3px;
}

.dx-idchip--parts { background: var(--dx-tint-mint); }

/* Verified-number entry */
.dx-verify-form { display: inline-flex; gap: 4px; align-items: center; }
.dx-ai-panel { margin: 8px 0 2px; border: 1px solid #cfe3e0; border-left: 3px solid #0e7472;
  border-radius: 0 10px 10px 0; background: linear-gradient(180deg, #f7fbfa, #fff);
  padding: 10px 14px; }
.dx-ai-panel__head { display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.dx-ai-panel__title { font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #0e7472; }
.dx-ai-panel__meta { font-size: 11px; color: #8a9491; }
.dx-ai-panel__context { font-size: 12px; color: #45564f; font-style: italic; margin: 0 0 8px;
  padding: 6px 10px; background: #f0f6f4; border-radius: 6px; max-width: 75ch; }
.dx-ai-hit__basis { flex-basis: 100%; font-size: 11px; color: #45564f; cursor: help; }
.dx-chipmenu__basis { display: block; font-size: 11px; color: #45564f; padding: 6px 10px 2px;
  font-style: italic; white-space: normal; max-width: 260px; }
.dx-ai-panel__hits { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.dx-ai-hit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #e7f4f1; border: 1px solid #9fccc5; border-radius: 8px; padding: 6px 10px; }
.dx-ai-hit__tick { width: 18px; height: 18px; border-radius: 50%; background: #0e7472;
  color: #fff; font-size: 11px; display: inline-flex; align-items: center;
  justify-content: center; flex: none; }
.dx-ai-hit__number { font-family: ui-monospace, monospace; font-weight: 700; font-size: 13px;
  color: #0b4f4d; }
.dx-ai-hit__stock { font-size: 11px; font-weight: 600; color: #3f7a34; text-transform: uppercase;
  letter-spacing: .05em; }
.dx-ai-hit__use { margin-left: auto; }
.dx-badge--ai { background: #e7f4f1; color: #0b4f4d; border: 1px solid #9fccc5; font-weight: 700; }
.dx-badge--aden { background: #f4f1ea; color: #5a4a2a; border: 1px solid #e0d6c2; font-weight: 700; }
.dx-ptq { display: block; margin: 0 0 8px; }
.dx-ptq__badge { margin-right: 6px; }
.dx-ptq__badge--warn { background: #fbe9e9; color: #9c3030; border: 1px solid #f0c4c4; font-weight: 700; }
.dx-ptq__badge--ours { background: #e3eefb; color: #2b5797; border: 1px solid #bcd4f0; font-weight: 700; }
.dx-ptq__none { font-size: 12px; }
.dx-badge--assignee { background: #fdf3e3; color: #8a5a16; border: 1px solid #e8cf9e; font-weight: 700; }
/* Cases assigned to me: unmistakable in the list… */
.dx-request--mine { border-left: 4px solid #d99b2b; background: #fffcf4; }
.dx-request--mine > summary:hover { background: #fdf6e6; }
/* …and the card I'm working in stands out from its neighbours. */
details.dx-request[open] { border-color: var(--dx-teal); box-shadow: 0 8px 24px rgba(0, 110, 100, 0.14); }
details.dx-request[open] > summary { background: #f2faf8; border-bottom: 1px solid #d9e8e4; }
details.dx-request--mine[open] { border-left-color: #d99b2b; box-shadow: 0 8px 24px rgba(170, 120, 20, 0.16); }
details.dx-request--mine[open] > summary { background: #fdf6e6; border-bottom-color: #eeddb9; }
.dx-viewtabs { display: flex; gap: 4px; margin: 0 0 10px; border-bottom: 2px solid #dce4e1; }
.dx-viewtabs__tab { padding: 8px 18px 7px; font-size: 14px; font-weight: 600; color: #5a6b67;
  text-decoration: none; border: 2px solid transparent; border-bottom: none;
  border-radius: 8px 8px 0 0; margin-bottom: -2px; }
.dx-viewtabs__tab:hover { color: #0e7472; background: #f0f6f4; }
.dx-viewtabs__tab--active { color: #0e7472; background: #fff; border-color: #dce4e1;
  border-bottom: 2px solid #fff; }
.dx-button--disabled, .dx-button--disabled:hover { background: #e6eae8; color: #8a9491;
  border-color: #d5dbd8; cursor: not-allowed; box-shadow: none; }
.dx-price-hist { display: block; font-size: 11px; color: #0e7472; margin-top: 3px;
  font-variant-numeric: tabular-nums; cursor: help; border-bottom: 1px dotted #9fccc5;
  width: fit-content; }
.dx-ai-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fff; border: 1px solid #cfe3e0; border-radius: 8px; padding: 6px 10px;
  margin-left: 26px; }
.dx-ai-item__what { display: flex; flex-direction: column; min-width: 150px; font-size: 13px; }
.dx-ai-item__vehicle { font-size: 12px; max-width: 220px; }
.dx-ai-item__avail { font-size: 12px; font-variant-numeric: tabular-nums; color: #5a6b67; }
.dx-ai-item__price { font-size: 13px; font-weight: 600; }
.dx-ai-item__select { margin-left: auto; }
.dx-ai-panel__guesses { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.dx-ai-lead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dx-ai-lead__basis { font-size: 11.5px; color: #45564f; max-width: 72ch; }
.dx-ai-panel__stale { font-size: 11.5px; color: #8a9491; font-style: italic; }
.dx-ai-panel__guess-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em;
  color: #8a9491; font-weight: 700; }
.dx-ai-chip { display: inline-flex; align-items: center; font-family: ui-monospace, monospace;
  font-size: 12px; padding: 2px 8px; border-radius: 10px; border: 1px dashed #b9c4c1;
  color: #5a6b67; background: #fff; }
.dx-search-menu__item--ai { background: #f2faf8; border: 1px dashed #9fccc5; }
.dx-search-menu__item--ai:hover { background: #e3f0ee; }
.dx-sweep__detail { margin-top: 6px; font-size: 12px; color: #5a6b67;
  font-variant-numeric: tabular-nums; }
.dx-line__certain-label { font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #3f7a34; margin: 8px 0 4px; }
.dx-line-pick { display: flex; gap: 6px; align-items: center; margin: 8px 0 4px; }
.dx-line-pick__input { flex: 1; max-width: 420px; font-size: 13px; padding: 6px 10px;
  border: 1px solid #cfd8d5; border-radius: 7px; }
.dx-line-pick__input:focus { outline: 2px solid #0e747255; border-color: #0e7472; }
.dx-line-pick__results { margin-top: 4px; }
.dx-aden-fallback { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 4px; padding: 7px 12px; background: #f4f1ea; border-left: 3px solid #8a5a16;
  border-radius: 0 8px 8px 0; font-size: 12.5px; color: #5a4a2a; }
.dx-aden-fallback__label { font-weight: 600; }
.dx-aden-fallback__query { font-family: ui-monospace, monospace; font-weight: 700;
  background: #fff; padding: 1px 8px; border-radius: 5px; border: 1px solid #e0d6c2; }
.dx-aden-fallback__why { font-size: 11px; color: #8a7a55; font-style: italic; }
.dx-idchip--menu { position: relative; cursor: pointer; }
.dx-idchip--menu:hover { border-color: #0e7472; color: #0e7472; }
.dx-idchip__caret { font-size: 8px; opacity: .55; }
.dx-gallery__close { position: absolute; top: 14px; right: 16px; z-index: 5;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .45); color: #fff; font-size: 17px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; }
.dx-gallery__close:hover { background: rgba(0, 0, 0, .7); border-color: #fff; }
.dx-gallery__close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dx-chipmenu[hidden] { display: none; } /* display:flex below would otherwise defeat [hidden] */
.dx-chipmenu { position: absolute; z-index: 45; top: calc(100% + 5px); left: 0;
  min-width: 230px; background: #fff; border: 1px solid #dce4e1; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(28, 40, 38, .16); padding: 6px; display: flex;
  flex-direction: column; gap: 1px; text-transform: none; font-weight: 400;
  letter-spacing: normal; white-space: normal; cursor: default; }
.dx-chipmenu__section { font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #8a9491; padding: 7px 10px 3px;
  font-family: ui-monospace, monospace; }
.dx-chipmenu__section:not(:first-child) { border-top: 1px solid #eef2f0; margin-top: 5px; }
.dx-chipmenu__item { display: block; padding: 6px 10px; border-radius: 6px; font-size: 13px;
  font-weight: 600; color: #1c2826; text-decoration: none; cursor: pointer; }
.dx-chipmenu__item:hover { background: #e3f0ee; color: #0e7472; }
.dx-copied-tip { position: fixed; z-index: 200; background: #1c2826; color: #fff;
  font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 6px;
  pointer-events: none; opacity: 0; transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.dx-copied-tip--show { opacity: 1; transform: translateY(0); }
[data-copy] { cursor: context-menu; }
.dx-probe { font-size: 10.5px; font-weight: 600; margin-left: 8px; }
.dx-probe--ok { color: #3f7a34; }
.dx-probe--none { color: #a33b3b; }
.dx-probe--warn { color: #8a5a16; font-weight: 500; font-style: italic; display: block; margin-left: 0; }
.dx-search-menu { position: relative; display: inline-block; }
.dx-search-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.dx-search-menu > summary::-webkit-details-marker { display: none; }
.dx-search-menu__toggle { display: inline-flex; align-items: center; gap: 5px; }
.dx-search-menu__icon { flex: none; opacity: .75; }
.dx-search-menu__caret { font-size: 9px; opacity: .6; transition: transform .15s ease; }
.dx-search-menu[open] .dx-search-menu__caret { transform: rotate(180deg); }
.dx-search-menu[open] > summary { background: #0e7472; color: #fff; border-color: #0e7472; }
.dx-search-menu__panel { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  width: 264px; background: #fff; border: 1px solid #dce4e1; border-radius: 10px;
  box-shadow: 0 10px 28px rgba(28, 40, 38, .16); padding: 8px; }
.dx-search-menu__section { font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #8a9491; padding: 8px 10px 4px; }
.dx-search-menu__section:not(:first-child) { border-top: 1px solid #eef2f0; margin-top: 6px; }
.dx-search-menu__item { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px;
  border-radius: 7px; text-decoration: none; background: none; border: 0; text-align: left;
  width: 100%; cursor: pointer; font: inherit; box-sizing: border-box; }
.dx-search-menu__item:hover { background: #e3f0ee; }
.dx-search-menu__name { font-size: 13px; font-weight: 600; color: #1c2826; }
.dx-search-menu__hint { font-size: 11px; color: #8a9491; font-family: ui-monospace, monospace; }
.dx-search-menu__item--button form { display: contents; }
.dx-search-menu__verify { display: flex; gap: 6px; padding: 4px 10px 6px; }
.dx-search-menu__verify .dx-verify-form__input { flex: 1; min-width: 0; }
.dx-rematch-all { display: flex; justify-content: flex-end; gap: 8px; margin: 0 0 8px; }
.dx-sweep { background: linear-gradient(135deg, #e9f4f2, #f3faf8); border: 1px solid #bcd9d5;
  border-radius: 10px; padding: 12px 16px; margin: 0 0 14px;
  box-shadow: 0 2px 8px rgba(14, 116, 114, .08); transition: opacity .5s ease; }
.dx-sweep__head { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; margin-bottom: 8px; }
.dx-sweep__label { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: #0e5654; }
.dx-sweep__pulse { width: 8px; height: 8px; border-radius: 50%; background: #0e7472;
  animation: dx-pulse 1.4s ease-in-out infinite; }
.dx-sweep__count { color: #5a6b67; font-variant-numeric: tabular-nums; }
.dx-sweep__track { height: 6px; background: rgba(14, 116, 114, .12); border-radius: 3px; overflow: hidden; }
.dx-sweep__bar { height: 100%; background: linear-gradient(90deg, #0e7472, #159a97);
  border-radius: 3px; transition: width .5s ease; }
.dx-sweep__track--indeterminate .dx-sweep__bar { width: 100% !important;
  background: repeating-linear-gradient(45deg, #0e7472 0 12px, #3f9a97 12px 24px);
  background-size: 34px 100%; animation: dx-slide 1.1s linear infinite; }
.dx-sweep--done { border-color: #a9cf9d; background: linear-gradient(135deg, #eef7ea, #f6fbf3); }
.dx-sweep--done .dx-sweep__label { color: #3f7a34; }
.dx-sweep--done .dx-sweep__pulse { display: none; }
.dx-sweep--done .dx-sweep__bar { background: #7fb069; animation: none; }
@keyframes dx-pulse { 0%, 100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@keyframes dx-slide { from { background-position: 0 0; } to { background-position: 34px 0; } }
@media (prefers-reduced-motion: reduce) {
  .dx-sweep__pulse, .dx-search-menu__caret { animation: none; transition: none; }
  .dx-sweep__track--indeterminate .dx-sweep__bar { animation: none; }
}

.dx-verify-form__input {
  font: inherit;
  font-size: 13px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  width: 170px;
  padding: 4px 8px;
  border: 1px solid var(--dx-border);
  border-radius: var(--dx-radius-sm);
}

/* --- Async action toasts (Turbo Stream confirmations) ------------------- */
.dx-toasts {
  position: fixed; bottom: 20px; right: 20px; z-index: 300;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
.dx-toast {
  pointer-events: auto; cursor: pointer;
  max-width: 380px; padding: 10px 14px; border-radius: 8px;
  font-size: 13.5px; line-height: 1.35;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
  animation: dx-toast-in 0.22s ease-out;
}
.dx-toast--notice { background: var(--dx-teal-dark); color: #fff; }
.dx-toast--alert { background: #9C3030; color: #fff; }
.dx-toast--out { opacity: 0; transform: translateY(6px); transition: opacity 0.25s, transform 0.25s; }
@keyframes dx-toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dx-toast { animation: none; }
  .dx-toast--out { transition: none; }
}

/* --- Quote panel (auto-draft) ------------------------------------------- */
.dx-quote__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.dx-quote__hint { font-size: 12.5px; }

/* --- Part card grid: one tile per requested part, one detail in focus -- */
.dx-parts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 8px; margin: 10px 0 4px; }
.dx-part-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  text-align: left; padding: 9px 12px; border-radius: 9px; cursor: pointer;
  background: var(--dx-white); border: 1px solid var(--dx-light-neutral);
  font: inherit; transition: border-color 0.12s, box-shadow 0.12s; }
.dx-part-tile:hover { border-color: var(--dx-teal); }
.dx-part-tile--active { border-color: var(--dx-teal); box-shadow: 0 0 0 2px #0e747233;
  background: #f2faf8; }
.dx-part-tile__name { font-weight: 700; font-size: 13.5px; color: var(--dx-charcoal); }
.dx-part-tile__pos { font-size: 11.5px; color: var(--dx-muted); }
.dx-part-tile__state { font-size: 11.5px; font-weight: 600; color: #5a6b67; }
.dx-part-tile__state b { font-weight: 800; margin-right: 2px; }
.dx-part-tile--selected { border-left: 3px solid #3f7a34; }
.dx-part-tile--selected .dx-part-tile__state { color: #3f7a34; }
.dx-part-tile--found .dx-part-tile__state,
.dx-part-tile--verified .dx-part-tile__state { color: #0b4f4d; }
.dx-part-tile--found { border-left: 3px solid #0e7472; }
.dx-part-tile--no_stock { opacity: 0.62; }
.dx-part-tile--closed { opacity: 0.62; }
.dx-part-detail { margin-top: 6px; }

/* --- WANTS pills: the exact requested parts, big and stateful --------- */
.dx-request__wants { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dx-request__wants-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--dx-muted); }
.dx-want { display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 13.5px; font-weight: 650; color: var(--dx-charcoal);
  background: var(--dx-tint-mint); border: 1px solid #bee8d8;
  border-radius: 8px; padding: 3px 10px; }
.dx-want b { font-weight: 800; }
.dx-want__pos { font-size: 11px; font-weight: 700; color: #0b4f4d;
  text-transform: uppercase; letter-spacing: 0.04em; }
.dx-want--selected { background: #e8f5e4; border-color: #b5dcac; color: #2c5e23; }
.dx-want--selected .dx-want__pos { color: #3f7a34; }
.dx-want--found, .dx-want--verified { background: #e7f4f1; border-color: #9fccc5; color: #0b4f4d; }
.dx-want--no_stock { background: #f2f2f2; border-color: #ddd; color: #8a9491;
  text-decoration: line-through; }
.dx-want--open { background: var(--dx-white); border-color: #cfd8d5; }
.dx-want--closed { background: #f2f2f2; border-color: #ddd; color: #8a9491; }

/* --- Unified stock-found list (exact / AI / ADEN / search) ------------- */
.dx-stockfound { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; }
.dx-stockfound__head { display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 6px; }
.dx-stockfound__title { font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #0b4f4d; }
.dx-stockfound__meta { font-size: 11px; color: var(--dx-muted); }
.dx-stock-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--dx-white); border: 1px solid var(--dx-light-neutral);
  border-radius: 8px; padding: 6px 10px; }
.dx-stock-row--exact { border-color: #b5dcac; }
.dx-stock-row--ai { border-color: #cfe3e0; }
.dx-stock-row--aden { border-color: #e0d6c2; }
.dx-stock-row__tag { flex: 0 0 64px; font-size: 10.5px; font-weight: 800;
  letter-spacing: .03em; cursor: help; }
.dx-stock-row--exact .dx-stock-row__tag { color: #3f7a34; }
.dx-stock-row--ai .dx-stock-row__tag { color: #0b4f4d; }
.dx-stock-row--aden .dx-stock-row__tag { color: #8a5a16; }
.dx-stock-row--search .dx-stock-row__tag { color: #5a6b67; }
.dx-stock-row__what { display: flex; flex-direction: column; min-width: 150px; font-size: 13px; }
.dx-stock-row__vehicle { font-size: 12px; max-width: 230px; }
.dx-stock-row__loc { font-size: 12px; }
.dx-stock-row__avail { font-size: 12px; font-variant-numeric: tabular-nums; color: #5a6b67; }
.dx-stock-row__price { font-size: 13px; font-weight: 600; }
.dx-stock-row__actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.dx-line-pick-frame { display: flex; flex-direction: column; gap: 6px; }

/* --- ONE proposed part, alternatives on request ----------------------- */
.dx-proposal { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px;
  padding: 8px 10px 6px; background: #f6faf9; border: 1px solid #9fccc5;
  border-left: 3px solid #0b4f4d; border-radius: 8px; }
.dx-proposal__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dx-proposal__label { font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #0b4f4d; cursor: help; }
.dx-proposal__band { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.dx-proposal__why { font-size: 11.5px; color: #3f7a34; cursor: help; }
.dx-proposal .dx-stock-row { border-color: #cfe3e0; }
.dx-proposal__evidence { display: flex; flex-wrap: wrap; gap: 4px; }
.dx-proposal__fit { display: flex; gap: 6px; }
.dx-proposal__foot { display: flex; align-items: center; gap: 8px; }
.dx-proposal__hint { font-size: 11.5px; }

/* Connector pins on electrical parts — states the unknown out loud */
.dx-pins { display: flex; align-items: baseline; gap: 6px; padding: 5px 9px;
  border-radius: 7px; font-size: 12px; border: 1px solid transparent; }
.dx-pins__icon { font-weight: 800; flex: 0 0 auto; }
.dx-pins--agree { background: #eef7ec; border-color: #b5dcac; color: #2c5e23; }
.dx-pins--stock_only { background: #f3f7f7; border-color: #cfe3e0; color: #0b4f4d; }
.dx-pins--unknown_stock, .dx-pins--unknown_both { background: #fdf6e8; border-color: #e3cf9c;
  color: #7a5611; }
.dx-pins--conflict { background: #fbecea; border-color: #d9a79f; color: #8d2f22; font-weight: 600; }

/* The repairer's own words, in the identity region beside the rego, VIN
   and engine. This is the request being described, so it belongs with the
   rest of what was asked rather than beside our answer - and it sits
   inside the summary so it reads before the card is expanded.
   Blue, not amber: information, not a question we are asking. */
.dx-askednote { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap;
  width: 100%; margin: 6px 0 2px; padding: 7px 11px; border-radius: 0 8px 8px 0;
  background: #eef4fb; border: 1px solid #c3d6ea;
  border-left: 3px solid var(--dx-status-blue); font-size: 13px; }
.dx-askednote__label { flex: 0 0 auto; font-size: 9.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: #2a5a8f; }
.dx-askednote__text { color: #1d3a5c; line-height: 1.45; }
.dx-askednote__list { list-style: none; margin: 0; padding: 0; flex: 1 1 100%;
  display: flex; flex-direction: column; gap: 3px; }
.dx-askednote__list li { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
/* Which part each note qualifies - "Only Need indicator Lens" means
   nothing unless you know what it is about. */
.dx-askednote__part { flex: 0 0 auto; font-weight: 700; color: #2a5a8f;
  font-size: 11.5px; }
.dx-askednote__more { font-size: 11.5px; color: #2a5a8f; }

/* ONE question per line, replacing the stacked determinacy + clarification
   panels (which answered the same question with different counts on 55% of
   open lines). Amber, indented under the suggestion, quieter than it -
   it is a follow-up, not a competing answer. */
.dx-ask { margin: 0 0 8px 10px; padding: 9px 12px; font-size: 13px;
  background: #fdf9ef; border: 1px solid #e3cf9c;
  border-left: 3px solid #c47a00; border-radius: 0 8px 8px 0; }
.dx-ask--missing { background: var(--dx-light-neutral);
  border-color: var(--dx-border); border-left-color: var(--dx-muted); }
.dx-ask__q { margin: 0 0 7px; color: #5a430f; line-height: 1.45; }
.dx-ask--missing .dx-ask__q { color: #3d4c57; }
.dx-ask__q strong { color: #3a2c08; }
.dx-ask--missing .dx-ask__q strong { color: var(--dx-charcoal); }
.dx-ask__list { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px; }
/* One row per choice: what differs, the tag, the price, one button. The
   shared part name is already on the suggestion above, so repeating it on
   every row would be the clutter this replaces. */
.dx-ask__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 5px 9px; background: var(--dx-white);
  border: 1px solid #ecdfbe; border-radius: var(--dx-radius-sm); }
.dx-ask__row--lead { border-color: #9fccc5; background: #f6faf9; }
.dx-ask__what { flex: 1 1 160px; font-weight: 600; text-transform: capitalize; }
.dx-ask__ours { margin-left: 7px; padding: 1px 7px; border-radius: 999px;
  background: #eef7ec; border: 1px solid #b5dcac; color: #2c5e23;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; }
.dx-ask__tag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--dx-muted); }
.dx-ask__price { font-variant-numeric: tabular-nums; font-weight: 600;
  min-width: 52px; text-align: right; }
.dx-ask__pick { display: inline; }
.dx-ask__hint { margin: 7px 0 0; font-size: 11.5px; color: #6b4e13; }

/* Our reasoning, folded away. A 0-100 score, a band name and a median of
   seven chips reading "exact_name +25" are how WE decided; the operator is
   deciding whether the part is right. */
.dx-why { margin: 4px 0 2px; }
.dx-why__toggle { cursor: pointer; font-size: 11.5px; color: var(--dx-muted);
  display: inline-flex; align-items: baseline; gap: 8px; }
.dx-why__toggle:hover { color: var(--dx-charcoal); }
.dx-why__score { font-variant-numeric: tabular-nums; }
.dx-why__body { margin-top: 6px; }
.dx-proposal__warnings { display: flex; flex-wrap: wrap; gap: 5px; }

/* The Learning page: one disputed case at a time. The two answers sit side
   by side because the judgement IS the comparison - everything else is
   context, and the buttons must be the only thing competing for attention. */
.dx-tr__intro { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; max-width: 78ch; }
.dx-tr__rate { margin: 0 0 14px; padding: 9px 12px; font-size: 13px;
  background: #fdf6e8; border: 1px solid #e3cf9c; border-left: 3px solid #c47a00;
  border-radius: 0 7px 7px 0; color: #6b4e13; }
.dx-tr__tabs { margin-bottom: 14px; }
.dx-tr__list { display: flex; flex-direction: column; gap: 12px; }
.dx-tr { padding: 12px 14px; border: 1px solid var(--dx-border);
  border-radius: 10px; background: var(--dx-white); }
.dx-tr__label { display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--dx-muted); }
.dx-tr__ask { margin-bottom: 10px; font-size: 14px; }
.dx-tr__comment { margin-top: 4px; font-size: 12.5px; color: #4a5560; font-style: italic; }
/* Explaining the two columns once, at the top, rather than hoping the
   labels carry it. Owner: "I dont understand the choices." */
.dx-tr__legend { margin: 0 0 16px; padding: 12px 15px; border-radius: 10px;
  background: var(--dx-light-neutral); border: 1px solid var(--dx-border);
  font-size: 13.5px; line-height: 1.5; }
.dx-tr__legend p { margin: 0 0 7px; }
.dx-tr__legend p:last-child { margin-bottom: 0; }
.dx-tr__legend ul { margin: 0 0 7px; padding-left: 18px; }
.dx-tr__legend li { margin-bottom: 3px; }
.dx-tr__asof { margin-top: 3px; font-size: 10.5px; color: var(--dx-muted);
  font-style: italic; }

/* The verdict, asked as a question and grouped by the answer to it: was
   the quoted part right, or was it not what the request asked for? Five
   flat buttons made the reviewer infer that distinction themselves. */
.dx-tr__ask-verdict { margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--dx-border); }
.dx-tr__verdict-q { margin: 0 0 10px; font-size: 14px; font-weight: 650; }
.dx-tr__group { margin-bottom: 10px; }
.dx-tr__group:last-child { margin-bottom: 0; }
.dx-tr__group-head { font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dx-muted); margin-bottom: 5px;
  padding-bottom: 3px; border-bottom: 1px dashed var(--dx-border); }
.dx-tr__group--ours .dx-tr__group-head { color: #8d2f22; }
.dx-tr__group--theirs .dx-tr__group-head { color: #6b4e13; }
.dx-tr__choice { display: flex; gap: 11px; align-items: baseline;
  flex-wrap: wrap; margin-bottom: 6px; }
.dx-tr__choice .dx-tr__pick { flex: 0 0 auto; min-width: 190px; }
.dx-tr__choice .dx-tr__btn { width: 100%; text-align: left; }
.dx-tr__choice-help { flex: 1 1 260px; font-size: 12px; line-height: 1.45;
  color: var(--dx-charcoal); }
/* A concrete case, because the difference between a substitution and a bad
   pairing is not visible in a four-word label. */
.dx-tr__eg { display: block; margin-top: 2px; color: var(--dx-muted);
  font-style: italic; }

/* When. These are historical records - the loaded set spans 2023 to now -
   and a reviewer who assumes a recent request will mark us wrong for a
   decision that was right at the time. */
.dx-tr__when-head { display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; justify-content: space-between; }
.dx-tr__date { font-size: 12px; color: var(--dx-muted);
  font-variant-numeric: tabular-nums; cursor: help; }
.dx-tr__stale { margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  background: #fdf6e8; border: 1px solid #e3cf9c; color: #6b4e13;
  font-size: 10.5px; font-weight: 600; }
.dx-tr__rego { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .04em; }

/* The request, in full. A verdict given on thin context becomes the
   correction factor on every accuracy figure we quote, so this half of the
   card earns the space. */
.dx-tr__wording { display: block; margin: 2px 0 8px; font-size: 15px; line-height: 1.35; }
.dx-tr__facts { display: grid; gap: 4px 20px; margin: 0 0 9px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.dx-tr__facts > div { display: flex; gap: 7px; align-items: baseline; font-size: 12.5px; }
.dx-tr__facts dt { flex: 0 0 auto; margin: 0; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--dx-muted); }
.dx-tr__facts dd { margin: 0; color: var(--dx-charcoal); }
.dx-tr__caution { color: #8a5a16; font-size: 11.5px; }
/* Never truncated: the deciding detail is routinely at the end. */
.dx-tr__comment { margin: 0 0 4px; padding: 8px 12px; border-radius: 0 8px 8px 0;
  background: var(--dx-light-neutral); border-left: 3px solid var(--dx-border); }
.dx-tr__comment p { margin: 3px 0 0; font-size: 13px; line-height: 1.45;
  color: var(--dx-charcoal); font-style: italic; }
.dx-tr__nocomment { margin: 0 0 4px; font-size: 12px; color: var(--dx-muted); }

.dx-tr__answers { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 10px; }
.dx-tr__answer { padding: 8px 11px; border-radius: 8px; font-size: 13px;
  background: var(--dx-light-neutral); border: 1px solid var(--dx-border); }
.dx-tr__answer--truth { background: #f6faf9; border-color: #9fccc5; }
.dx-tr__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.dx-tr__pick { display: inline; }
.dx-tr__btn { font-size: 12px; }
.dx-tr__btn--missed { background: #8d2f22; border-color: #8d2f22; }
.dx-tr__btn--substituted { background: #b06e00; border-color: #b06e00; }
.dx-tr__btn--pairing_error { background: #5c6670; border-color: #5c6670; }
.dx-tr__btn--unsure { background: var(--dx-white); color: var(--dx-charcoal);
  border: 1px solid var(--dx-border); }
.dx-tr__verdict { padding: 7px 11px; border-radius: 7px; font-size: 12.5px;
  background: var(--dx-light-neutral); border-left: 3px solid var(--dx-muted); }
.dx-tr__verdict--missed { border-left-color: #8d2f22; background: #fbf4f3; }
.dx-tr__verdict--substituted { border-left-color: #b06e00; background: #fdf9ef; }
.dx-tr__verdict--pairing_error { border-left-color: #5c6670; }
.dx-tr__when { float: right; }
.dx-tr__foot { margin: 12px 0 0; font-size: 12px; }

/* One question at a time. Everything here is sized for someone who knows
   parts and does not want to read a table: big type, big targets, nothing
   else competing for the screen. */
.dx-q { max-width: 640px; margin: 0 auto; }
.dx-q__said { margin: 0 0 16px; padding: 9px 13px; border-radius: 8px;
  background: #eef7ec; border: 1px solid #b5dcac; color: #2c5e23;
  font-size: 13.5px; font-weight: 600; }
.dx-q__meta { display: flex; gap: 14px; align-items: baseline; margin-bottom: 14px;
  font-size: 12px; color: var(--dx-muted); }
.dx-q__count { font-variant-numeric: tabular-nums; }
.dx-q__today { color: #2c5e23; font-weight: 600; }
.dx-q__headline { margin: 0 0 8px; font-size: 24px; line-height: 1.3;
  font-weight: 650; letter-spacing: -.015em; text-wrap: balance; }
.dx-q__context { margin: 0 0 4px; font-size: 13px; color: var(--dx-muted); }
.dx-q__detail { margin: 0 0 18px; font-size: 14px; color: #3d4c57; line-height: 1.5; }

/* One tap per answer: no choosing and then confirming. */
.dx-q__choices { display: flex; flex-direction: column; gap: 9px; }
.dx-q__inline { display: block; }
.dx-q__choice { display: block; width: 100%; text-align: left;
  padding: 15px 18px; border-radius: 10px; cursor: pointer;
  background: var(--dx-white); border: 2px solid var(--dx-border);
  font-size: 16.5px; font-weight: 600; color: var(--dx-charcoal); }
.dx-q__choice:hover { border-color: var(--dx-teal); background: #f6faf9; }
.dx-q__choice--yes:hover, .dx-q__choice--always:hover {
  border-color: #2c5e23; background: #eef7ec; }
.dx-q__choice--no:hover { border-color: #8d2f22; background: #fbf4f3; }
.dx-q__choice--skip, .dx-q__choice--sometimes { font-weight: 500; }
.dx-q__choice .dx-q__hint { display: block; margin-top: 2px; font-size: 12.5px;
  font-weight: 400; color: var(--dx-muted); }

.dx-q__options { list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-direction: column; gap: 6px; }
.dx-q__options label { display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 9px; cursor: pointer;
  background: var(--dx-white); border: 2px solid var(--dx-border); font-size: 14.5px; }
.dx-q__options label:hover { border-color: var(--dx-teal); background: #f6faf9; }
.dx-q__options input { flex: 0 0 auto; width: 19px; height: 19px; }
.dx-q__options .dx-q__label { flex: 1 1 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.dx-q__options .dx-q__hint { flex: 0 0 auto; font-size: 11.5px; color: var(--dx-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.dx-q__actions { display: flex; gap: 9px; align-items: center; }

/* None of the above right? Search for the one you would actually look in.
   Six ranked guesses are sometimes all wrong, and skipping a question the
   specialist could have answered wastes the only person who knows. The
   found options are visually continuous with the suggested ones, because
   they submit with the same form and the same Save button. */
.dx-q__options--found { margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--dx-border); }
.dx-q__foundnote { margin: 10px 0 0; font-size: 12.5px; color: var(--dx-muted); }
.dx-q__search { margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--dx-border); display: flex; flex-wrap: wrap;
  gap: 8px; align-items: center; }
.dx-q__searchinput { flex: 1 1 220px; min-width: 0; padding: 10px 12px;
  border: 2px solid var(--dx-border); border-radius: 9px; font-size: 14px;
  font-family: inherit; background: var(--dx-white); color: var(--dx-charcoal); }
.dx-q__searchinput:focus { outline: none; border-color: var(--dx-teal); }
.dx-q__searchnote { flex: 1 1 100%; margin: 0; font-size: 12.5px;
  color: var(--dx-muted); line-height: 1.45; }

/* As easy to skip as to answer. */
.dx-q__skip { margin-top: 20px; background: none; border: none; cursor: pointer;
  padding: 6px 0; font-size: 13px; color: var(--dx-muted);
  text-decoration: underline; text-underline-offset: 3px; }
.dx-q__skip:hover { color: var(--dx-charcoal); }
.dx-q__done { text-align: center; padding: 30px 10px; }
.dx-q__done h1 { margin: 0 0 8px; font-size: 22px; }
.dx-q__done p { margin: 0 auto 18px; max-width: 46ch; color: var(--dx-muted); }

/* The mapping screen: which shelf categories does this part type live
   under? Opens above the table, because a specialist works down the
   busiest classes and must not lose their place. */
.dx-map { margin: 0 0 14px; padding: 14px 16px; background: var(--dx-white);
  border: 1px solid var(--dx-border); border-left: 3px solid var(--dx-teal);
  border-radius: 0 10px 10px 0; box-shadow: 0 8px 22px -18px rgba(24,42,52,.35); }
.dx-map__q { margin: 0 0 11px; font-size: 16px; line-height: 1.4; }
.dx-map__list { list-style: none; margin: 0 0 9px; padding: 0;
  display: flex; flex-direction: column; gap: 4px; }
.dx-map__list label { display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; background: var(--dx-light-neutral);
  border: 1px solid var(--dx-border); border-radius: 7px; cursor: pointer;
  font-size: 13.5px; }
.dx-map__list label:hover { border-color: var(--dx-teal); }
.dx-map__list input { flex: 0 0 auto; width: 16px; height: 16px; }
.dx-map__cat { flex: 1 1 220px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.dx-map__units { flex: 0 0 auto; color: var(--dx-muted); font-size: 11.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.dx-map__hint { margin: 0 0 11px; font-size: 12px; color: var(--dx-muted); }
.dx-map__actions { display: flex; gap: 8px; align-items: center; }
/* "map it" rather than a bare 0: a count of nothing is not a call to
   action, and these are the classes that need one most. */
.dx-pc__map { text-decoration: none; color: var(--dx-charcoal); font-weight: 600; }
.dx-pc__map--none { padding: 1px 8px; border-radius: 999px; background: #fdf6e8;
  border: 1px solid #e3cf9c; color: #8a5a16; font-size: 11.5px; font-weight: 700; }
.dx-pc__map--none:hover { background: #f8ecd0; }

/* Part classes: a dense table that is read by eye and corrected by hand,
   so the three-state toggles have to be legible at a glance and "not
   determined" must look different from "no" rather than quieter. */
.dx-pc__head h1 { margin: 0 0 4px; font-size: 20px; letter-spacing: -.01em; }
.dx-pc__intro { margin: 0 0 14px; font-size: 13px; line-height: 1.5; max-width: 76ch; }
.dx-pc__filters { display: flex; flex-wrap: wrap; align-items: center;
  gap: 10px 16px; margin-bottom: 12px; }
.dx-pc__search { display: flex; gap: 6px; align-items: center; }
.dx-pc__tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.dx-pc__tab { padding: 4px 10px; border-radius: 999px; font-size: 12.5px;
  text-decoration: none; color: var(--dx-charcoal);
  border: 1px solid var(--dx-border); background: var(--dx-white); }
.dx-pc__tab--on { background: var(--dx-charcoal); color: var(--dx-white);
  border-color: var(--dx-charcoal); }
.dx-pc__note { margin: 0 0 12px; padding: 8px 11px; font-size: 12.5px;
  background: #fdf6e8; border: 1px solid #e3cf9c; border-radius: 7px;
  color: #6b4e13; }
/* Wide table scrolls inside its own box; the page must never scroll sideways. */
.dx-pc__scroll { overflow-x: auto; }
.dx-pc__table { font-size: 12.5px; }
.dx-pc__table th { white-space: nowrap; cursor: help; }
.dx-pc__row--reviewed { background: #f6faf9; }
.dx-pc__slug { font-size: 11px; color: var(--dx-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.dx-pc__num { text-align: right; font-variant-numeric: tabular-nums; }
.dx-pc__zero { color: var(--dx-status-red); font-weight: 700; }
.dx-pc__toggle { text-align: center; }
.dx-tri__form { display: inline; }
.dx-tri { display: inline-block; min-width: 42px; padding: 2px 8px;
  border-radius: 999px; font-size: 11.5px; font-weight: 700; cursor: pointer;
  border: 1px solid transparent; text-transform: lowercase; }
.dx-tri--true { background: #eef7ec; border-color: #b5dcac; color: #2c5e23; }
.dx-tri--false { background: #f3f5f7; border-color: var(--dx-border); color: #5c6670; }
/* Not determined: dashed, so it reads as an open question, not a no. */
.dx-tri--unknown { background: var(--dx-white); border-style: dashed;
  border-color: #c0a469; color: #8a5a16; }
.dx-pc__words { max-width: 240px; }
.dx-pc__word { display: inline-block; padding: 1px 6px; margin: 1px 2px 1px 0;
  border-radius: 4px; background: var(--dx-light-neutral);
  border: 1px solid var(--dx-border); font-size: 11px; }
.dx-pc__source { font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; font-weight: 700; }
.dx-pc__source--reviewed { color: #0b4f4d; }
.dx-pc__source--derived { color: var(--dx-muted); }
.dx-pc__source--none { color: #8a5a16; }
.dx-pc__foot { margin: 12px 0 0; font-size: 12px; line-height: 1.5; }

/* What we know and what is missing. Shown ABOVE the proposal, because
   when a request cannot pin the part down that is the headline and the
   proposal is a shortlist. Deliberately plain: this is an admission, and
   dressing it up would be the distortion the owner asked us to avoid. */
.dx-determinacy { display: flex; flex-direction: column; gap: 6px;
  margin: 8px 0 4px; padding: 8px 11px; border-radius: 8px;
  background: var(--dx-light-neutral); border: 1px solid var(--dx-border);
  border-left: 3px solid var(--dx-muted); font-size: 12.5px; }
.dx-determinacy--unidentified { border-left-color: #8d2f22; background: #fbf4f3; }
.dx-determinacy__head { display: flex; align-items: baseline; gap: 7px; }
.dx-determinacy__icon { font-weight: 800; color: var(--dx-muted); }
.dx-determinacy--unidentified .dx-determinacy__icon { color: #8d2f22; }
.dx-determinacy__state { font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #4a5560; }
.dx-determinacy__known { list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 4px 14px; }
.dx-determinacy__known li { display: flex; gap: 5px; align-items: baseline; }
.dx-determinacy__label { font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--dx-muted); }
.dx-determinacy__missing { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 5px 7px; margin: 2px 0 0; }
.dx-determinacy__missing-label { font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #8a5a16; }
.dx-determinacy__item { padding: 2px 8px; border-radius: 999px;
  background: #fdf6e8; border: 1px solid #e3cf9c; color: #6b4e13;
  font-weight: 600; }
.dx-determinacy__note { margin: 2px 0 0; font-size: 11.5px; line-height: 1.4; }

/* A clarification is NOT a list of competing proposals: the part is
   settled and only the variant is open. Styled as a question attached to
   the proposal above it - amber (the house "needs a human" colour, as on
   unknown pin counts), indented under the proposal, and deliberately
   quieter than the proposal block so it reads as a follow-up rather than
   a second answer competing with the first. */
.dx-clarify { display: flex; flex-direction: column; gap: 6px;
  margin: 0 0 6px 10px; padding: 7px 10px; background: #fdf9ef;
  border: 1px solid #e3cf9c; border-left: 3px solid #c47a00;
  border-radius: 0 8px 8px 0; font-size: 12.5px; }
.dx-clarify__head { display: flex; align-items: baseline; gap: 7px; }
.dx-clarify__icon { flex: 0 0 auto; font-weight: 800; color: #c47a00;
  font-size: 14px; line-height: 1.2; }
.dx-clarify__q { color: #6b4e13; }
.dx-clarify__q strong { color: #4a360c; }
.dx-clarify__list { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 3px; }
.dx-clarify__variant { display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; padding: 4px 7px; background: var(--dx-white);
  border: 1px solid #ecdfbe; border-radius: var(--dx-radius-sm); }
/* The one already proposed above - marked so the operator can see that
   confirming it is a choice too, not a no-op. */
.dx-clarify__variant--lead { border-color: #9fccc5; background: #f6faf9; }
.dx-clarify__desc { flex: 1 1 200px; font-weight: 500; }
.dx-clarify__pins { flex: 0 0 auto; padding: 1px 6px; border-radius: 999px;
  background: #eef3f7; border: 1px solid var(--dx-border); font-size: 11.5px;
  font-weight: 600; font-variant-numeric: tabular-nums; cursor: help; }
.dx-clarify__price { font-variant-numeric: tabular-nums; font-weight: 600; }
.dx-clarify__actions { flex: 0 0 auto; margin-left: auto; }
.dx-clarify__pick { display: inline; }
.dx-clarify__foot { font-size: 11.5px; line-height: 1.35; }

/* Evidence chips: the points carry a sign, so the strip must not prefix
   "+" unconditionally - see DemandHelper#evidence_chip. */
.dx-evidence__item--cap .dx-evidence__pts { color: var(--dx-status-red); font-weight: 600; }
.dx-evidence__item--earn .dx-evidence__pts { font-weight: 600; }
.dx-evidence__item--note { opacity: .85; font-style: italic; }
.dx-evidence__pts { font-variant-numeric: tabular-nums; }

/* Found, but not certain. Deliberately cooler and plainer than the
   suggestion block: the operator must be able to tell at a glance that
   nothing here is confirmed. Measured on 45 days of traced quotes, 157 of
   the 734 lines that used to show an empty card had the exact part sitting
   at the top of this list. */
.dx-closest { margin: 8px 0 4px; padding: 9px 11px; border-radius: 0 8px 8px 0;
  background: var(--dx-light-neutral); border: 1px solid var(--dx-border);
  border-left: 3px solid var(--dx-muted); }
.dx-closest__head { display: flex; align-items: baseline; gap: 10px;
  flex-wrap: wrap; margin-bottom: 6px; }
.dx-closest__label { font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #4a5560; }
.dx-closest__caveat { font-size: 11.5px; font-style: italic; }
.dx-closest .dx-stock-row { background: var(--dx-white); }

.dx-noproposal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 4px; padding: 7px 10px; background: var(--dx-white);
  border: 1px dashed #cfd8d5; border-radius: 8px; font-size: 12.5px; }
.dx-noproposal__label { font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #8a5a16; cursor: help; }

.dx-alternatives { display: block; }
.dx-alternatives--open { margin: 6px 0 2px; padding: 6px 8px 2px;
  border: 1px solid var(--dx-light-neutral); border-radius: 8px; background: #fcfdfd; }
.dx-alternatives__head { display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.dx-alternatives__title { font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #5a6b67; }

/* Collapsed alternatives once a part is on the quote */
.dx-other-options { margin: 6px 0 2px; }
.dx-other-options > summary { list-style: none; width: fit-content; }
.dx-other-options > summary::-webkit-details-marker { display: none; }
.dx-other-options[open] > summary { margin-bottom: 6px; }

/* AI evidence & leads, one click away */
.dx-ai-evidence { margin: 2px 0; }
.dx-ai-evidence > summary { cursor: pointer; font-size: 11.5px; font-weight: 700;
  color: #0b4f4d; width: fit-content; padding: 2px 0; }
.dx-ai-evidence[open] { border-left: 3px solid #0e7472; padding-left: 10px;
  background: linear-gradient(180deg, #f7fbfa, #fff); border-radius: 0 8px 8px 0;
  padding-top: 4px; padding-bottom: 6px; }

/* --- Per-part quality: ADEN grade + condition badges -------------------- */
.dx-grade { display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px;
  font-size: 11.5px; font-weight: 800; cursor: help; }
.dx-grade--a { background: #e8f5e4; color: #2c5e23; border: 1px solid #b5dcac; }
.dx-grade--b { background: #fdf3e3; color: #8a5a16; border: 1px solid #e8cf9e; }
.dx-grade--c { background: #fbe9e9; color: #9c3030; border: 1px solid #f0c4c4; }
.dx-grade--x { background: #f2f2f2; color: #8a9491; border: 1px solid #ddd; }
.dx-cond { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: .05em; }
.dx-cond--new { background: #e3eefb; color: #2b5797; border: 1px solid #bcd4f0; }
.dx-cond--aftermarket { background: #f4eafb; color: #6b3f97; border: 1px solid #ddc6f0; }
.dx-stock-row__quality { font-size: 12px; color: #45564f; max-width: 46ch; }
.dx-stockfound__hint { font-size: 11px; color: var(--dx-muted); font-style: italic; }

/* --- Master-card groups: one ADEN master, its physical units inside ---- */
.dx-master { border: 1px solid #cfd8d5; border-left: 3px solid var(--dx-teal);
  border-radius: 0 10px 10px 0; padding: 8px 10px; display: flex;
  flex-direction: column; gap: 6px; background: #fafcfb; }
.dx-master__head { font-size: 12.5px; color: var(--dx-charcoal); }
.dx-master__count { font-weight: 800; color: #0b4f4d; }
.dx-stock-row__note { font-size: 11.5px; color: #8a5a16; font-style: italic; }

/* --- Standalone case page ---------------------------------------------- */
.dx-case-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.dx-case-head__back { font-size: 13px; color: #0e7472; text-decoration: none; width: fit-content; }
.dx-case-head__back:hover { text-decoration: underline; }
.dx-case-head__title { margin: 0; }
.dx-case-head__title .dx-muted { font-size: 0.65em; font-weight: 500; }
.dx-request__number { color: inherit; text-decoration: none; border-bottom: 1px dotted #9fccc5; }
.dx-request__number:hover { color: #0e7472; }

/* GP № (the master's genuine part number) + wrong-side filter note */
.dx-oem--gp { background: #e3eefb; border-color: #bcd4f0; color: #2b5797; font-weight: 700; }
.dx-stockfound__hiddennote { font-size: 12px; margin: 2px 0; }

/* Master-card id on every found part (tag alone is not identity) */
.dx-oem--master { background: #e7f4f1; border-color: #9fccc5; color: #0b4f4d; font-weight: 700; }

/* Tiny definition labels in front of identifiers — "TAG X613705", "MASTER HC11*…" */
.dx-chip-label { font-size: 8.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; opacity: .62; margin-right: 4px; }

/* Catalogue-check master rows inside the banner */
.dx-mc { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 1px 0 1px 8px; border-left: 2px solid #cfd8d5; margin-left: 4px; }

/* Fit check on quote-bound parts: pass quietly, doubt loudly */
.dx-fitcheck--pass { background: #e7f4ec; color: #1c6b3c; border: 1px solid #b5dcc4; }
.dx-fitcheck--doubt { background: #fdeceb; color: #8f2318; border: 1px solid #f0b9b3;
  font-weight: 700; max-width: 46ch; }

/* Auto-search humility: unconfident guesses sit behind a click */
.dx-noconf { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: #6b5d2e; background: #fbf8ee; border: 1px dashed #d9cf9f;
  border-radius: 8px; padding: 7px 10px; }
.dx-noconf__mark { font-weight: 800; color: #b8860b; }
.dx-probable > .dx-probable__summary { cursor: pointer; font-size: 12px; color: #0e7472;
  list-style: none; padding: 4px 2px; user-select: none; width: fit-content; }
.dx-probable > .dx-probable__summary:hover { text-decoration: underline; }
.dx-probable > .dx-probable__summary::-webkit-details-marker { display: none; }
.dx-probable[open] > .dx-probable__summary { color: var(--dx-muted); }
.dx-probable { display: flex; flex-direction: column; gap: 8px; }

/* The "most likely" result card leads the list */
.dx-master--top { border-left-color: #b8860b; background: #fffdf4; border-color: #e2d8b8; }
.dx-master__badge { font-size: 10px; font-weight: 800; letter-spacing: .05em;
  color: #7a5b0a; background: #fdf3d0; border: 1px solid #ecd98f;
  border-radius: 6px; padding: 1px 7px; margin-right: 4px; }

/* Fold-away long result lists: extra units within a master, weaker masters below */
.dx-master__more > .dx-master__more-summary,
.dx-groups-more > .dx-groups-more__summary {
  cursor: pointer; font-size: 12px; color: #0e7472; list-style: none;
  padding: 3px 2px; user-select: none; width: fit-content; }
.dx-master__more > .dx-master__more-summary:hover,
.dx-groups-more > .dx-groups-more__summary:hover { text-decoration: underline; }
.dx-master__more > .dx-master__more-summary::-webkit-details-marker,
.dx-groups-more > .dx-groups-more__summary::-webkit-details-marker { display: none; }
.dx-master__more[open] > .dx-master__more-summary,
.dx-groups-more[open] > .dx-groups-more__summary { color: var(--dx-muted); }
.dx-master__more { display: flex; flex-direction: column; gap: 6px; }
.dx-groups-more { display: flex; flex-direction: column; gap: 8px; margin-top: 2px;
  border-top: 1px dashed #cfd8d5; padding-top: 4px; }

/* Case-scoped searches are make-constrained — say so */
.dx-line-pick__make { font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  color: #0b4f4d; background: #e7f4f1; border: 1px solid #9fccc5;
  border-radius: 6px; padding: 2px 8px; cursor: help; white-space: nowrap; }

/* --- ADEN Lookup: the enquiry screen, webified ------------------------- */
.dx-lookup-form { display: flex; gap: 8px; margin: 4px 0 6px; }
.dx-lookup-form__input { flex: 1; max-width: 640px; font-family: ui-monospace, monospace;
  font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 10px 14px; border: 2px solid #cfd8d5; border-radius: 9px; }
.dx-lookup-form__input:focus { outline: none; border-color: var(--dx-teal); }
.dx-lookup-hint { font-size: 12.5px; max-width: 90ch; }
.dx-lookup-hint code { background: var(--dx-light-neutral); padding: 1px 6px; border-radius: 5px; }
.dx-lookup-model { display: inline-flex; align-items: baseline; gap: 8px; margin: 6px 0 10px;
  padding: 6px 14px; background: #e8f5e4; border: 1px solid #b5dcac; border-radius: 8px;
  font-size: 14px; color: #2c5e23; }
.dx-lookup-model__via { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: #3f7a34; font-weight: 700; }
.dx-lookup-pick { display: flex; flex-direction: column; gap: 4px; }
.dx-lookup-pick__option { padding: 7px 12px; border-radius: 7px; text-decoration: none;
  color: var(--dx-charcoal); }
.dx-lookup-pick__option:hover { background: #f0f6f4; }
.dx-lookup-section { display: flex; flex-direction: column; gap: 6px; }
.dx-lookup-section__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dx-lookup-section__luc { font-weight: 800; background: var(--dx-light-neutral);
  padding: 2px 9px; border-radius: 6px; font-size: 14px; }
.dx-lookup-section__resolved { font-weight: 700; color: #0b4f4d; }
.dx-lookup-section__stats { font-size: 12px; color: #0e7472; margin-left: auto;
  font-variant-numeric: tabular-nums; cursor: help; border-bottom: 1px dotted #9fccc5; }

/* What a colleague quoted in PT, with our sales ledger alongside */
.dx-ptq__lines { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 2px; }
.dx-ptq__line { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; padding-left: 10px; border-left: 2px solid #f0c4c4; }
.dx-ptq__line-desc { color: var(--dx-charcoal); }
.dx-ptq__line-stats { color: #0e7472; font-variant-numeric: tabular-nums; cursor: help;
  border-bottom: 1px dotted #9fccc5; }

/* Learned master card identified but shelf empty */
.dx-learned-nostock { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 7px 12px; background: #f2faf8; border-left: 3px solid #0e7472;
  border-radius: 0 8px 8px 0; font-size: 12.5px; }
.dx-learned-nostock__tick { color: #3f7a34; font-weight: 800; }
.dx-learned-nostock__none { color: #9c3030; font-weight: 700; }
.dx-learned-nostock__desc { color: #45564f; font-style: italic; }
.dx-part-tile--known_no_stock { border-left: 3px solid #0e7472; opacity: 0.85; }
.dx-part-tile--known_no_stock .dx-part-tile__state { color: #9c3030; }
.dx-want--known_no_stock { background: #f2faf8; border-color: #9fccc5; color: #0b4f4d; }

.dx-lookup-model--inline { margin: 2px 0 4px; font-size: 12.5px; padding: 4px 10px; }

/* What the colleague's quote was linked to in ADEN */
.dx-ptq__link { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 12.5px; padding-left: 10px; border-left: 2px solid #9fccc5; }
.dx-ptq__link-label { font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; color: #0b4f4d; }
.dx-ptq__link-stock--yes { color: #2c5e23; font-weight: 700; }
.dx-ptq__link-stock--no { color: #9c3030; font-weight: 700; }

/* The master a colleague's PT quote was linked to — the surest match */
.dx-stock-row--pt { border-color: #bcd4f0; background: #f7faff; }
.dx-stock-row--pt .dx-stock-row__tag { color: #2b5797; }
.dx-linked-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .03em;
  background: #e3eefb; color: #2b5797; border: 1px solid #bcd4f0;
  border-radius: 6px; padding: 1px 7px; width: fit-content; }

/* Quote-history frequency on master groups: ranks without deciding */
.dx-rank-chip { font-size: 10.5px; font-weight: 700; color: #0b4f4d;
  background: #e7f4f1; border: 1px solid #9fccc5; border-radius: 6px;
  padding: 1px 7px; cursor: help; }

.dx-stockfound__empty { display: flex; flex-direction: column; gap: 4px;
  padding: 8px 12px; background: #fbf9f4; border-left: 3px solid #d99b2b;
  border-radius: 0 8px 8px 0; }