/*
  filename: quick-research-filter.css
  description: Styling for the unified filter + group bar and the records list
    that replaces the scattered sections on /quick-research.html.
  Author: Rodrigo Careaga
  Date: 04-05-2026
*/

.qr-filter-bar {
  margin: 22px 0 14px 0;
  padding: 14px 16px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qr-fb-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.qr-fb-search {
  position: relative;
  flex: 1 1 320px;
  display: flex;
  align-items: center;
}

.qr-fb-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--muted);
  pointer-events: none;
}

.qr-fb-search input[type="search"] {
  width: 100%;
  padding: 10px 36px 10px 34px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink);
  font-size: 13px;
  transition: border-color 120ms var(--easing), box-shadow 120ms var(--easing);
}

.qr-fb-search input[type="search"]:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.qr-fb-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: var(--panel-3);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 1;
}

.qr-fb-search-clear:hover {
  background: var(--border);
  color: var(--ink);
}

.qr-fb-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0;
  border: 0;
}

.qr-fb-chips label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 120ms var(--easing), border-color 120ms var(--easing), color 120ms var(--easing);
  user-select: none;
}

.qr-fb-chips label:hover {
  border-color: var(--border-strong);
  background: var(--panel-3);
}

.qr-fb-chips input[type="radio"],
.qr-fb-chips input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  position: absolute;
  opacity: 0;
}

.qr-fb-chips label:has(input:checked) {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

.qr-fb-chips label:focus-within {
  outline: 2px solid var(--primary-hi);
  outline-offset: 2px;
}

.qr-fb-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}

.qr-fb-group-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 600;
}

.qr-fb-group select {
  padding: 7px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--ink);
  font-size: 12px;
  cursor: pointer;
  min-width: 120px;
}

.qr-fb-group select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.qr-fb-counter {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Unified records list ---------- */

.qr-records {
  margin: 8px 0 28px 0;
}

.qr-records-host {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.qr-group {
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;
}

.qr-group-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--panel-2);
  border: 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.qr-group-head:hover {
  background: var(--panel-3);
}

.qr-group-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: transform 150ms var(--easing);
}

.qr-group.is-collapsed .qr-group-caret {
  transform: rotate(-90deg);
}

.qr-group-label {
  flex: 1;
}

.qr-group-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  padding: 2px 7px;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.qr-rec-list {
  margin: 0;
  padding: 8px 12px 12px 12px;
  list-style: none;
}

.qr-rec-list .qr-rec {
  margin-top: 8px;
}

.qr-rec-list .qr-rec:first-child {
  margin-top: 0;
}

.qr-rec-attendees {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qr-records-empty {
  padding: 24px 16px;
  text-align: center;
  background: var(--panel-2);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--ink-2);
}

.qr-records-empty[hidden] {
  display: none;
}

/* ---------- Hide the legacy scattered sections once QRFilter is live ---------- */

.qr-legacy-hidden {
  display: none !important;
}

@media (max-width: 720px) {
  .qr-fb-counter {
    margin-left: 0;
    width: 100%;
  }
  .qr-fb-row {
    align-items: stretch;
  }
}

/* ============================================================ View toggle (Kanban / List) */
.qr-fb-view {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}
.qr-fb-view-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 7px 12px;
  font: 600 12px/1 Inter, system-ui, sans-serif;
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.02em;
  transition: background .12s, color .12s;
}
.qr-fb-view-btn + .qr-fb-view-btn { border-left: 1px solid var(--border); }
.qr-fb-view-btn:hover { background: var(--panel-2); color: var(--ink); }
.qr-fb-view-btn.is-active {
  background: var(--primary-soft);
  color: var(--primary);
}
[data-theme="dark"] .qr-fb-view-btn.is-active { color: #9fd1ff; }

/* ============================================================ Kanban board */
.qr-kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 14px;
  align-items: start;
  margin-top: 12px;
  contain: layout style;
}
.qr-kanban:has(.qr-kan-col[data-stage="other"]) {
  grid-template-columns: repeat(5, minmax(200px, 1fr));
}
@media (max-width: 1100px) {
  .qr-kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qr-kanban:has(.qr-kan-col[data-stage="other"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .qr-kanban,
  .qr-kanban:has(.qr-kan-col[data-stage="other"]) { grid-template-columns: 1fr; }
}

.qr-kan-col {
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 10px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  contain: layout style;
}
.qr-kan-col[data-stage="scheduled"] { border-top: 3px solid var(--yellow); }
.qr-kan-col[data-stage="pre"]       { border-top: 3px solid var(--primary); }
.qr-kan-col[data-stage="post"]      { border-top: 3px solid var(--teal); }
.qr-kan-col[data-stage="transcript"]{ border-top: 3px solid var(--pink); }
.qr-kan-col[data-stage="other"]     { border-top: 3px solid var(--border-strong); }

.qr-kan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px;
}
.qr-kan-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--muted);
}
.qr-kan-count {
  font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--panel-3);
  color: var(--ink-2);
}
.qr-kan-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 40px;
}
.qr-kan-empty {
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
  padding: 14px 6px;
  border: 1px dashed var(--border);
  border-radius: 8px;
}
.qr-kan-card {
  display: block;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.qr-kan-card:hover {
  transform: translateY(-1px);
  border-color: var(--primary);
  box-shadow: 0 4px 14px rgba(0, 119, 204, 0.10);
}
.qr-kan-card-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 3px;
  overflow-wrap: anywhere;
}
.qr-kan-card-sub {
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.35;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.qr-kan-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}
.qr-kan-card-att::before { content: "👥 "; opacity: 0.7; }

/* ============================================================ Per-customer color
   Same customer reads as the same hue across all Kanban columns and the list
   view. Hash-based modulo over 10 buckets, mapped to a Lochmara-friendly
   palette. The card uses the hue as a left border accent plus a dot before
   the title; subtle background tint on hover. */
.qr-kan-card[data-customer-color="0"], .qr-rec[data-customer-color="0"] { --qr-cust: #0B64DD; }
.qr-kan-card[data-customer-color="1"], .qr-rec[data-customer-color="1"] { --qr-cust: #00BFB3; }
.qr-kan-card[data-customer-color="2"], .qr-rec[data-customer-color="2"] { --qr-cust: #F04E98; }
.qr-kan-card[data-customer-color="3"], .qr-rec[data-customer-color="3"] { --qr-cust: #FEC514; }
.qr-kan-card[data-customer-color="4"], .qr-rec[data-customer-color="4"] { --qr-cust: #93C90E; }
.qr-kan-card[data-customer-color="5"], .qr-rec[data-customer-color="5"] { --qr-cust: #1BA9F5; }
.qr-kan-card[data-customer-color="6"], .qr-rec[data-customer-color="6"] { --qr-cust: #F58F2B; }
.qr-kan-card[data-customer-color="7"], .qr-rec[data-customer-color="7"] { --qr-cust: #7E57C2; }
.qr-kan-card[data-customer-color="8"], .qr-rec[data-customer-color="8"] { --qr-cust: #E91E63; }
.qr-kan-card[data-customer-color="9"], .qr-rec[data-customer-color="9"] { --qr-cust: #00ACC1; }

/* Kanban card uses the customer color as a left accent (4px) plus a small
   dot in the title row. Border-left overrides the default card border on
   the left edge only; full border still draws on the other 3 sides. */
.qr-kan-card[data-customer-color] {
  border-left: 4px solid var(--qr-cust, var(--primary));
  padding-left: 10px;
}
.qr-kan-card[data-customer-color]:hover {
  border-color: var(--qr-cust, var(--primary));
  box-shadow: 0 4px 14px color-mix(in srgb, var(--qr-cust, #0B64DD) 18%, transparent);
}
.qr-kan-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--qr-cust, var(--primary));
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* List view rows also pick up the customer color as a left accent so the
   same customer is recognizable when the user toggles to List. */
.qr-rec[data-customer-color] {
  border-left: 3px solid var(--qr-cust, var(--border));
  padding-left: 10px;
}

/* ============================================================ Mobile tap targets
   The Kanban/List view toggle, group select and group-head buttons live in
   the same toolbar; on a 375 px viewport they need 40 px+ tall hit pads. */
@media (max-width: 768px) {
  .qr-fb-view-btn { min-height: 40px; padding: 10px 14px; font-size: 12.5px; }
  .qr-fb-group select { min-height: 40px; padding: 9px 12px; font-size: 13px; }
  .qr-group-head { min-height: 44px; padding: 12px 14px; }
}

/* ============================================================ Customer-color legend
   Subtle one-line pill above the filter bar that explains why the same
   customer reads as the same hue across Kanban columns and the List view.
   Five small dots demonstrate the palette so the legend is self-documenting. */
.qr-legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 -2px 0;
  padding: 6px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.qr-legend-label {
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.06em;
}

.qr-legend-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.qr-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.qr-legend-dot.l0 { background: #0B64DD; }
.qr-legend-dot.l1 { background: #00BFB3; }
.qr-legend-dot.l2 { background: #F04E98; }
.qr-legend-dot.l3 { background: #FEC514; }
.qr-legend-dot.l4 { background: #93C90E; }

/* Workspace legend uses stage-coded dots so the FE can immediately decode the
   timeline colors. Yellow=scheduled, Lochmara=pre-meeting, teal=post-meeting,
   pink=transcript. */
.qr-legend-dot.stage-scheduled  { background: var(--yellow, #FEC514); }
.qr-legend-dot.stage-pre        { background: var(--primary, #0B64DD); }
.qr-legend-dot.stage-post       { background: var(--teal, #00BFB3); }
.qr-legend-dot.stage-transcript { background: var(--pink, #F04E98); }

.qr-legend-text {
  color: var(--muted);
}

/* ============================================================ Workspace view
   One card per customer, large name + colored tag on the left, horizontal
   timeline of artifacts on the right. Click a dot to jump to the artifact;
   click "Show all artifacts" to expand a chronological detail panel.
   FE Copilot is NOT a CRM (Salesforce is the system of record). The Workspace
   shows what the FE has PRODUCED, not what the customer is doing. */

.qr-customer-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

.qr-customer-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 5px solid var(--qr-cust, var(--primary));
  border-radius: 14px;
  padding: 16px 18px 14px 18px;
  transition: border-color 120ms var(--easing), box-shadow 120ms var(--easing);
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
}

.qr-customer-card:hover {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--qr-cust, #0B64DD) 14%, transparent);
}

.qr-customer-card:focus-visible {
  outline: 2px solid var(--qr-cust, var(--primary));
  outline-offset: 2px;
}

.qr-customer-card a,
.qr-customer-card button {
  cursor: pointer;
}

.qr-customer-card[data-customer-color="0"] { --qr-cust: #0B64DD; }
.qr-customer-card[data-customer-color="1"] { --qr-cust: #00BFB3; }
.qr-customer-card[data-customer-color="2"] { --qr-cust: #F04E98; }
.qr-customer-card[data-customer-color="3"] { --qr-cust: #FEC514; }
.qr-customer-card[data-customer-color="4"] { --qr-cust: #93C90E; }
.qr-customer-card[data-customer-color="5"] { --qr-cust: #1BA9F5; }
.qr-customer-card[data-customer-color="6"] { --qr-cust: #F58F2B; }
.qr-customer-card[data-customer-color="7"] { --qr-cust: #7E57C2; }
.qr-customer-card[data-customer-color="8"] { --qr-cust: #E91E63; }
.qr-customer-card[data-customer-color="9"] { --qr-cust: #00ACC1; }

.qr-customer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.qr-customer-tag {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--qr-cust, var(--primary));
  flex: 0 0 12px;
}

.qr-customer-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
  flex: 0 1 auto;
}

.qr-customer-industry {
  font-size: 11.5px;
  color: var(--muted);
  background: var(--panel-2);
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}

.qr-customer-counts {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.qr-customer-timeline-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.qr-customer-timeline-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 600;
}

.qr-customer-timeline {
  position: relative;
  height: 48px;
  background: var(--panel-2);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 0 14px;
}

.qr-customer-timeline-track {
  position: absolute;
  top: 50%;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--border);
  transform: translateY(-50%);
  border-radius: 2px;
}

.qr-customer-timeline-axis {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  background: var(--panel-2);
  padding: 0 4px;
  z-index: 1;
}

.qr-customer-timeline-axis.qr-axis-min { left: 0; }
.qr-customer-timeline-axis.qr-axis-max { right: 0; }

.qr-customer-dot {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dot-color, var(--primary));
  border: 2px solid var(--panel);
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer;
  transition: transform 120ms var(--easing), box-shadow 120ms var(--easing);
  text-decoration: none;
  z-index: 2;
}

/* Tappable hit pad: extend the click target to 32x32 without enlarging the
   visual dot (overlay via ::before). Mobile-friendly per FE feedback. */
.qr-customer-dot::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
}

.qr-customer-dot:hover,
.qr-customer-dot:focus-visible {
  transform: translateY(-50%) scale(1.45);
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--dot-color, var(--primary)), 0 4px 12px color-mix(in srgb, var(--dot-color, #0B64DD) 40%, transparent);
  outline: none;
}

.qr-customer-dot[data-stage="scheduled"]  { --dot-color: var(--yellow, #FEC514); }
.qr-customer-dot[data-stage="pre"]        { --dot-color: var(--primary, #0B64DD); }
.qr-customer-dot[data-stage="post"]       { --dot-color: var(--teal, #00BFB3); }
.qr-customer-dot[data-stage="transcript"] { --dot-color: var(--pink, #F04E98); }
.qr-customer-dot[data-stage="other"]      { --dot-color: var(--border-strong, #94a3b8); }

.qr-customer-dot-mark {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.qr-customer-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  color: var(--muted);
}

.qr-customer-foot-total {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink-2);
}

.qr-customer-foot-sched {
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--yellow, #FEC514) 18%, transparent);
  color: color-mix(in srgb, var(--yellow, #FEC514) 70%, var(--ink));
  font-weight: 600;
}

[data-theme="dark"] .qr-customer-foot-sched {
  color: var(--yellow, #FEC514);
}

.qr-customer-detail-toggle {
  margin-left: auto;
  appearance: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font: 600 11.5px/1 Inter, system-ui, sans-serif;
  color: var(--ink-2);
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}

.qr-customer-detail-toggle:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

.qr-customer-card.is-expanded .qr-customer-detail-toggle {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

.qr-customer-detail {
  border-top: 1px dashed var(--border);
  padding-top: 10px;
}

.qr-customer-detail[hidden] { display: none; }

.qr-customer-detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qr-customer-detail-heading {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
  padding: 0 0 6px 0;
}

.qr-customer-detail-empty {
  padding: 12px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

.qr-customer-detail-link {
  display: grid;
  grid-template-columns: 14px 110px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink);
  font-size: 12.5px;
  transition: background 120ms;
}

.qr-customer-detail-link:hover {
  background: var(--panel-2);
}

.qr-customer-detail-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot-color, var(--primary));
}

.qr-customer-detail-dot[data-stage="scheduled"]  { --dot-color: var(--yellow, #FEC514); }
.qr-customer-detail-dot[data-stage="pre"]        { --dot-color: var(--primary, #0B64DD); }
.qr-customer-detail-dot[data-stage="post"]       { --dot-color: var(--teal, #00BFB3); }
.qr-customer-detail-dot[data-stage="transcript"] { --dot-color: var(--pink, #F04E98); }
.qr-customer-detail-dot[data-stage="other"]      { --dot-color: var(--border-strong, #94a3b8); }

.qr-customer-detail-stage {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--ink-2);
}

.qr-customer-detail-title {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qr-customer-detail-date {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .qr-customer-card {
    padding: 14px;
    border-left-width: 4px;
  }
  .qr-customer-name { font-size: 15.5px; }
  .qr-customer-counts { width: 100%; margin-left: 0; }
  .qr-customer-timeline { height: 56px; }
  .qr-customer-detail-toggle { min-height: 36px; padding: 9px 14px; font-size: 12.5px; }
  .qr-customer-detail-link {
    grid-template-columns: 12px 1fr auto;
    grid-template-areas: "dot title date" "dot stage stage";
    gap: 6px 10px;
  }
  .qr-customer-detail-link .qr-customer-detail-dot { grid-area: dot; }
  .qr-customer-detail-link .qr-customer-detail-stage { grid-area: stage; font-size: 10px; }
  .qr-customer-detail-link .qr-customer-detail-title { grid-area: title; white-space: normal; }
  .qr-customer-detail-link .qr-customer-detail-date { grid-area: date; }
}