/* Liquid Glass design system. ConciergeMatch surfaces only. */

.conciergematch-bg {
  position: relative;
  min-height: 100vh;
  background: linear-gradient(135deg, #F5EFE6 0%, #EFE6D6 100%);
  overflow-x: hidden;
}

/* Floating soft radial-gradient blobs give backdrop-filter chromatic content to refract. */
.conciergematch-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle 480px at 18% 12%, rgba(184, 149, 107, 0.48), transparent 60%),
    radial-gradient(circle 600px at 82% 25%, rgba(30, 41, 59, 0.32), transparent 65%),
    radial-gradient(circle 520px at 25% 78%, rgba(184, 149, 107, 0.40), transparent 60%),
    radial-gradient(circle 440px at 78% 88%, rgba(245, 239, 230, 0.62), transparent 60%),
    radial-gradient(circle 360px at 50% 50%, rgba(184, 149, 107, 0.22), transparent 70%);
  animation: lg-float 24s ease-in-out infinite alternate;
}

/* Subtle grain so the frosted surfaces have texture to soften. */
.conciergematch-bg::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@keyframes lg-float {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-3%, 2%) scale(1.04); }
}

/* Keep ConciergeMatch content above the background layers. */
.conciergematch-bg > * {
  position: relative;
  z-index: 1;
}

/* dev-0.13.3 (Phase A root cause): the rule above sets position:relative on EVERY
   direct child of body, including the shared header and the body-appended auth
   dropdown — both of which must stay position:fixed. On the listing detail page
   (the only top-level page with body.conciergematch-bg) this forced the OPEN
   dropdown to render as a relative block at the very bottom of the document
   instead of under the person icon, so the click appeared to do nothing. The
   .open rule only re-asserted z-index, never position, which is why three prior
   z-index patches failed. Restore fixed positioning with a higher-specificity
   selector (0,2,0 beats the universal 0,1,0); top/right still come from
   .auth-dropdown. */
.conciergematch-bg > .auth-dropdown { position: fixed; z-index: 10000; }

/* dev-0.32 (CM mobile nav fix): the same .conciergematch-bg > * rule above gave
   the shared header z-index:1, trapping its descendant off-canvas mobile menu
   (z-index:999) BELOW the page card (.cm-wrap, also a z-index:1 sibling painted
   later in the DOM). The open hamburger menu therefore slid in behind the card.
   A higher-specificity rule (0,2,0 beats the universal 0,1,0) restores the
   header's own stacking level so its menu paints above the card. */
.conciergematch-bg > .site-header { z-index: 1000; }

@media (prefers-reduced-motion: reduce) {
  .conciergematch-bg::before { animation: none; }
}

.lg-surface {
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(22px) saturate(1.7) contrast(1.06);
  -webkit-backdrop-filter: blur(22px) saturate(1.7) contrast(1.06);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 22px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 0 0 1px rgba(184, 149, 107, 0.10),
    0 14px 48px rgba(30, 41, 59, 0.14);
  will-change: backdrop-filter;
}

.lg-elevated {
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(32px) saturate(1.85) contrast(1.08);
  -webkit-backdrop-filter: blur(32px) saturate(1.85) contrast(1.08);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 26px;
  padding: 36px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 0 0 1px rgba(184, 149, 107, 0.12),
    0 22px 64px rgba(30, 41, 59, 0.18);
  will-change: backdrop-filter;
}

.lg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(180deg, rgba(184, 149, 107, 0.98), rgba(184, 149, 107, 0.85));
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 14px;
  color: white;
  font-weight: 600;
  font-family: 'Montserrat', Arial, sans-serif;
  padding: 14px 28px;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.3) inset,
    0 4px 16px rgba(184, 149, 107, 0.30);
}

.lg-button:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 8px 24px rgba(184, 149, 107, 0.40); }
.lg-button:active { transform: translateY(0); }
.lg-button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.lg-button.lg-listening { background: linear-gradient(180deg, #b91c1c, #991b1b); animation: lg-pulse 1.4s ease-in-out infinite; }
@keyframes lg-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.4); } 50% { box-shadow: 0 0 0 12px rgba(185, 28, 28, 0); } }

.lg-modal {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(34px) saturate(1.9);
  -webkit-backdrop-filter: blur(34px) saturate(1.9);
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(30, 41, 59, 0.30);
}

.lg-missing { box-shadow: 0 0 0 2px rgba(184, 149, 107, 0.7), 0 0 16px rgba(184, 149, 107, 0.25); animation: lg-missing-pulse 2.4s ease-in-out infinite; }
@keyframes lg-missing-pulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(184, 149, 107, 0.7), 0 0 16px rgba(184, 149, 107, 0.25); } 50% { box-shadow: 0 0 0 2px rgba(184, 149, 107, 0.9), 0 0 24px rgba(184, 149, 107, 0.45); } }

/* Enriched signal cards */
.lg-signal-card { background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); border: 1px solid rgba(184, 149, 107, 0.22); border-radius: 16px; padding: 16px 20px; margin-bottom: 12px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 6px 20px rgba(30, 41, 59, 0.08); }
.lg-signal-category { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: #B8956B; margin-bottom: 6px; }
.lg-signal-observation { font-size: 14px; color: #1E293B; margin-bottom: 6px; line-height: 1.5; }
.lg-signal-quote { font-size: 12px; color: #6B7280; font-style: italic; }
.lg-signal-polarity { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; margin-left: 8px; }
.lg-signal-positive { background: rgba(34, 197, 94, 0.15); color: var(--status-success); }
.lg-signal-negative { background: rgba(239, 68, 68, 0.15); color: var(--status-negative); }
.lg-signal-neutral { background: rgba(156, 163, 175, 0.15); color: var(--text-secondary); }
.lg-signal-dismiss { float: right; background: none; border: none; color: var(--text-muted-readable); cursor: pointer; font-size: 16px; }
.lg-signal-dismissed { opacity: 0.4; text-decoration: line-through; }

/* Chrome refraction (silently no-ops elsewhere) */
@supports (backdrop-filter: url(#lg-refraction)) {
  .lg-refractive { backdrop-filter: url(#lg-refraction) blur(12px) saturate(1.6); }
}

/* Tier 1 blurred photo container */
.tier1-photo-wrap { position: relative; overflow: hidden; border-radius: 18px 18px 0 0; aspect-ratio: 16/10; }
.tier1-photo { width: 100%; height: 100%; object-fit: cover; filter: blur(28px) saturate(1.15); transform: scale(1.08); transition: filter 0.4s ease; }
/* dev-0.32: gold "Private" / "NAH Listed" pill on a Tier 1 match card. */
.tier1-badge { position: absolute; top: 12px; left: 12px; z-index: 3; padding: 4px 10px; background: linear-gradient(135deg, #B8956B, #a6845d); color: #fff; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 6px; box-shadow: 0 2px 8px rgba(184, 149, 107, 0.4); }
.tier1-card:hover .tier1-photo { filter: blur(24px) saturate(1.25); }
.tier1-lock {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: rgba(30, 41, 59, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-radius: 50%; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
  color: white; font-size: 28px;
}
.tier1-lock-microcopy {
  position: absolute; bottom: 16px; left: 16px; right: 16px; text-align: center;
  color: white; font-size: 13px; font-weight: 500;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* ConciergeMatch layout helpers */
.cm-wrap { max-width: 820px; margin: 0 auto; padding: calc(var(--header-height) + var(--space-xs)) 20px 80px; }
.cm-wrap-wide { max-width: 1140px; margin: 0 auto; padding: calc(var(--header-height) + var(--space-md)) 20px 80px; }
@media (max-width: 768px) {
  .cm-wrap, .cm-wrap-wide { padding-top: calc(var(--header-height) + var(--space-xs)); }
}
/* dev-0.41: trim the dead space between the fixed header and the card heading on ConciergeMatch pages. The card carries its own 36px top pad on top of the header clearance, which read as too much air above the H1. */
.conciergematch-bg .cm-wrap { padding-top: calc(var(--header-height) - var(--space-sm)); }
.conciergematch-bg .lg-elevated { padding-top: 24px; }
@media (max-width: 768px) {
  .conciergematch-bg .cm-wrap { padding-top: calc(var(--header-height) - var(--space-sm)); }
  .conciergematch-bg .lg-elevated { padding-top: 18px; }
}
.cm-textarea {
  width: 100%; box-sizing: border-box; border-radius: 14px; border: 1px solid rgba(184, 149, 107, 0.35);
  background: rgba(255, 255, 255, 0.7); padding: 16px 18px; font-family: 'Outfit', 'Montserrat', Arial, sans-serif;
  font-size: 16px; line-height: 1.6; color: #1E293B; resize: vertical;
}
.cm-textarea:focus { outline: none; border-color: #B8956B; box-shadow: 0 0 0 3px rgba(184, 149, 107, 0.18); }
.cm-counter { text-align: right; font-size: 12px; color: var(--text-muted-readable); margin-top: 6px; }
.cm-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.cm-link { color: #B8956B; font-size: 14px; font-weight: 600; text-decoration: none; }
.cm-link:hover { text-decoration: underline; }
.cm-full { width: 100%; text-align: center; margin-top: 22px; }
.cm-field { display: block; margin-bottom: 14px; }
.cm-field label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
.cm-field input, .cm-field select { width: 100%; box-sizing: border-box; padding: 11px 14px; border-radius: 10px; border: 1px solid rgba(184, 149, 107, 0.3); background: rgba(255,255,255,0.8); font-size: 16px; color: #1E293B; }
.cm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cm-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.cm-section { margin-bottom: 20px; padding: 22px 26px; }
.cm-accordion-head { display: flex; align-items: center; justify-content: space-between; cursor: pointer; user-select: none; }
.cm-accordion-head h3 { margin: 0; font-size: 18px; color: #1E293B; }
.cm-accordion-icon { transition: transform 0.25s ease; color: #B8956B; display: inline-flex; }
.cm-accordion.open .cm-accordion-icon { transform: rotate(180deg); }
.cm-accordion-body { display: none; margin-top: 14px; }
.cm-accordion.open .cm-accordion-body { display: block; }
.cm-microcopy { font-size: 13px; color: #6B7280; line-height: 1.55; margin: 6px 0 14px; }
.cm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(184, 149, 107, 0.35); background: rgba(255,255,255,0.7); font-size: 13px; color: #1E293B; cursor: default; }
.cm-chip button { background: none; border: none; color: var(--text-muted-readable); cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
.cm-chip-want { border-color: rgba(34, 197, 94, 0.4); background: rgba(34, 197, 94, 0.08); }
.cm-chip-nice { border-color: rgba(184, 149, 107, 0.4); background: rgba(184, 149, 107, 0.08); }
.cm-chip-avoid { border-color: rgba(239, 68, 68, 0.4); background: rgba(239, 68, 68, 0.08); }
.cm-add-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cm-add-row input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(184,149,107,0.3); font-size: 16px; }
.cm-add-row select { padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(184,149,107,0.3); font-size: 16px; }
.cm-add-btn { background: rgba(184, 149, 107, 0.15); border: 1px solid rgba(184,149,107,0.4); color: #8a6d4a; border-radius: 10px; padding: 9px 16px; font-size: 14px; cursor: pointer; }
/* Narrow phones: the select takes its own line so the input + Add button
   share the next row and the button never pushes off-screen. */
@media (max-width: 480px) {
  .cm-add-row select { flex: 1 1 100%; }
}
.cm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 22px; margin-top: 28px; }
.tier1-card { display: flex; flex-direction: column; overflow: hidden; }
.tier1-body { padding: 18px 20px 22px; }
.tier1-archetype { font-size: 16px; font-weight: 700; color: #1E293B; margin: 0 0 4px; }
.tier1-band { font-size: 15px; color: #B8956B; font-weight: 600; margin: 0 0 10px; }
.tier1-specs { font-size: 13px; color: #6B7280; margin: 0 0 14px; }
.tier1-score { font-size: 30px; font-weight: 800; color: #1E293B; line-height: 1; }
.tier1-score-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted-readable); margin-bottom: 14px; }
.tier1-bullets { list-style: none; padding: 0; margin: 0 0 18px; }
.tier1-bullets li { font-size: 13px; color: #374151; padding-left: 18px; position: relative; margin-bottom: 6px; }
.tier1-bullets li::before { content: '\2713'; position: absolute; left: 0; color: #B8956B; font-weight: 700; }
.cm-radio-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.cm-radio-row label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #374151; padding: 8px 14px; border: 1px solid rgba(184,149,107,0.3); border-radius: 10px; background: rgba(255,255,255,0.7); cursor: pointer; }

@media (max-width: 860px) {
  .cm-cards { grid-template-columns: 1fr; }
  .cm-grid-3 { grid-template-columns: 1fr; }
  .cm-grid-2 { grid-template-columns: 1fr; }
}

/* dev-0.6.1: Lucide inline icon helpers */
.lg-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.lg-icon-lg { width: 32px; height: 32px; }
.lg-icon-sm { width: 14px; height: 14px; }

/* dev-0.6.1: header clearance for ConciergeMatch routes that do NOT manage
   their own top padding. dev-0.12: cm-wrap / cm-wrap-wide are excluded because
   this element-qualified selector (specificity 0,1,1) was silently overriding
   their lighter .cm-wrap rule (0,1,0), reintroducing a ~84px gap below the
   header no matter how much .cm-wrap padding was reduced. Let cm-wrap own it. */
.conciergematch-bg main:not(.cm-wrap):not(.cm-wrap-wide),
.conciergematch-bg .conciergematch-main {
  padding-top: calc(var(--header-height, 80px) + var(--space-2xl, 64px));
  padding-bottom: var(--space-3xl, 96px);
}

/* dev-0.6.2: let the floating blobs show through the legacy form's opaque
   section so the glass surfaces have chromatic content to refract. */
.conciergematch-bg .intake-section { background: transparent; }

/* dev-0.6.1: "Need inspiration?" collapsible on intake */
.lg-inspiration { margin: 16px 0; }
.lg-inspiration-trigger {
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: #374151; font-weight: 500; user-select: none;
  list-style: none;
}
.lg-inspiration-trigger::-webkit-details-marker { display: none; }
.lg-inspiration[open] .lg-inspiration-trigger .lg-icon { transform: rotate(180deg); }
.lg-inspiration-trigger .lg-icon { transition: transform 0.25s ease; color: #B8956B; }
.lg-inspiration-body { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.lg-inspiration-hint { font-size: 12px; color: var(--text-muted-readable); margin: 0 0 4px; }
.lg-example {
  text-align: left; background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(184, 149, 107, 0.2); border-radius: 12px;
  padding: 14px 16px; cursor: pointer; font-family: inherit; font-size: 13px;
  color: #374151; line-height: 1.5; transition: all 0.2s ease;
}
.lg-example:hover { background: rgba(255, 255, 255, 0.85); border-color: rgba(184, 149, 107, 0.4); transform: translateY(-1px); }

/* dev-0.6.1: loading spinner */
.lg-spinner { display: inline-block; animation: lg-spin 1.2s linear infinite; }
@keyframes lg-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* dev-0.6.1: signal-card dismiss icon button */
.lg-signal-dismiss .lg-icon { display: block; }

/* dev-0.6.2: per-card "Why this match" explainer bullets */
.match-explainers { margin: 4px 0 14px; }
.match-explainers-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted-readable); margin-bottom: 8px; }
.explainer-list, .explainer-mismatches { list-style: none; padding: 0; margin: 0 0 6px 0; }
.explainer-list li, .explainer-mismatches li { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 5px; font-size: 13px; line-height: 1.4; }
.explainer-positive { color: var(--status-success); }
.explainer-info { color: var(--status-warning); }
.explainer-list .lg-icon, .explainer-mismatches .lg-icon { flex-shrink: 0; margin-top: 1px; }

/* dev-0.6.2: empty-state relaxation suggestions */
.empty-state-relaxations { margin: 28px 0; }
.relaxation-options { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.relaxation-apply { display: flex; align-items: center; justify-content: space-between; width: 100%; text-align: left; gap: 16px; }
.relaxation-label { flex: 1; }
.relaxation-action { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.relaxation-action .lg-icon { stroke: #ffffff; }

/* dev-0.56: explicit placeholder color (light). The funnel inputs had no
   placeholder color, so the browser default varied by engine. Pin it to the
   decorative warm gray (matches the default feel). opacity:1 stops Firefox
   from further dimming it. The dark variant lives in the media query below. */
.cm-textarea::placeholder,
.cm-field input::placeholder { color: #9CA3AF; opacity: 1; }

/* ============================================================
   dev-0.56: ConciergeMatch funnel dark-mode support.

   These Liquid Glass surfaces are hardcoded LIGHT (translucent-white
   frosted cards, a champagne page gradient) with dark paired text. The
   shared nav/footer (css/styles.css) already flip via prefers-color-scheme,
   but the funnel body did not, so in OS dark mode the cards stayed light
   while their dark text (and, worse, the variable-driven text) vanished.

   Rule: flip each surface AND its paired text TOGETHER so nothing is
   ever dark-on-dark. Every declaration below lives inside this media
   query, so light mode is byte-for-byte unchanged. Palette is taken
   straight from the styles.css dark var block:
     surface white -> rgba(38,50,68,a)  (#263244 deep slate)
     border        -> #3D4A5C family
     #1E293B text  -> #F5EFE6 (champagne)
     #374151 text  -> #D1CCC3 (secondary)
     #6B7280/#64748B text -> #B0B7C3 (readable muted)
   ============================================================ */
@media (prefers-color-scheme: dark) {

  /* Page background: champagne gradient -> deep slate gradient. The
     ::before glow blobs are left as-is; on a dark page they read as soft
     brand glows and still give the frosted surfaces content to refract. */
  .conciergematch-bg { background: linear-gradient(135deg, #1E293B 0%, #151D2B 100%); }

  /* Frosted surfaces + borders. */
  .lg-surface { background: rgba(38, 50, 68, 0.55); border-color: rgba(61, 74, 92, 0.6); }
  .lg-elevated { background: rgba(38, 50, 68, 0.7); border-color: rgba(61, 74, 92, 0.65); }
  .lg-modal { background: rgba(30, 41, 59, 0.9); }
  .lg-signal-card { background: rgba(38, 50, 68, 0.6); border-color: rgba(184, 149, 107, 0.3); }
  .lg-example { background: rgba(38, 50, 68, 0.6); border-color: rgba(184, 149, 107, 0.3); color: #D1CCC3; }
  .lg-example:hover { background: rgba(38, 50, 68, 0.82); border-color: rgba(184, 149, 107, 0.5); }

  /* Form controls: light input -> dark input, dark text -> champagne. */
  .cm-textarea { background: rgba(38, 50, 68, 0.7); border-color: rgba(184, 149, 107, 0.45); color: #F5EFE6; }
  .cm-field input, .cm-field select { background: rgba(38, 50, 68, 0.75); border-color: rgba(184, 149, 107, 0.4); color: #F5EFE6; }
  .cm-add-row input, .cm-add-row select { background: rgba(38, 50, 68, 0.75); border-color: rgba(184, 149, 107, 0.4); color: #F5EFE6; }
  .cm-chip { background: rgba(38, 50, 68, 0.7); border-color: rgba(184, 149, 107, 0.45); color: #F5EFE6; }
  .cm-radio-row label { background: rgba(38, 50, 68, 0.7); border-color: rgba(184, 149, 107, 0.4); color: #D1CCC3; }
  /* dev-0.59: the add-signal button's deep gold (#8a6d4a) is too dark on the
     dark funnel surface; lift it to a champagne-gold. Light #8a6d4a unchanged. */
  .cm-add-btn { color: #D4B896; }

  /* Dark placeholder (paired with the light rule above the media query). */
  .cm-textarea::placeholder,
  .cm-field input::placeholder { color: #94A0AE; opacity: 1; }

  /* Paired text on the now-dark surfaces. */
  .cm-field label { color: #D1CCC3; }
  .cm-accordion-head h3 { color: #F5EFE6; }
  .cm-microcopy { color: #B0B7C3; }
  .lg-inspiration-trigger { color: #D1CCC3; }
  .lg-signal-observation { color: #F5EFE6; }
  .lg-signal-quote { color: #B0B7C3; }

  /* Tier 1 anonymized match cards ride .lg-surface, so their paired text
     must flip too or the results page reads dark-on-dark. Structure,
     scoring and the reveal ladder are untouched (color only). */
  .tier1-archetype { color: #F5EFE6; }
  .tier1-score { color: #F5EFE6; }
  .tier1-specs { color: #B0B7C3; }
  .tier1-bullets li { color: #D1CCC3; }
}