/* ==========================================================================
   Intent matrix — interactive "buyer intent -> confidence lane" module (Wave 2
   #13, LO lander only). Progressive enhancement: the server-rendered
   `.im__table` (plain accessible table) is the no-JS / no-CSS baseline;
   assets/components/intent-matrix.js replaces it with `.im__list`, a set of
   `<button aria-expanded>` rows with a horizontal bar per intent. Self-
   contained via var() fallback chains so it drops into an interior dark page
   (styles.css tokens) without extra wiring — same approach as screen-stack.css.

   MARKUP CONTRACT:
   <section class="im" data-intent-matrix data-stage aria-labelledby="im-h">
     <p class="im__eyebrow">Try the sample</p>
     <h3 id="im-h" class="im__h">…</h3>
     <table class="im__table" data-im-table>…</table>   <!-- replaced by JS -->
     <p class="im__foot">… <a href="/sample/#/buyer-searches">…</a></p>
   </section>

   Behaviour:
   - No-JS: a plain table. No bars, no expand/collapse — every value is
     readable as static text.
   - JS: `.im__list` of `.im__row`s. `--i` on each row drives the entrance
     stagger. `app.js` adds `.is-staged` to `[data-stage]` once ~25% visible
     (or immediately under reduced motion / no-JS); bars grow from 0 to their
     final width only after that, respecting reduced motion (no growth —
     final width renders immediately).
   - Keyboard: each row is a real <button>; Enter/Space toggles it exactly
     like a mouse click, and focus-visible uses the site's global outline. -->
   ========================================================================== */

.im {
  --im-border: var(--color-border, rgba(255, 255, 255, 0.1));
  --im-surface: var(--color-surface-elevated, rgba(255, 255, 255, 0.04));
  --im-text: var(--color-text-primary, var(--color-text, #f3f5f7));
  --im-text-2: var(--color-text-secondary, #b7bec8);
  --im-text-3: var(--color-text-muted, #8b929c);
  --im-accent: var(--color-primary, #cc8066);
  --im-accent-rgb: var(--accent-rgb, 204, 128, 102);
  --im-weak: #ef7e72;
  --im-radius: var(--radius-lg, 16px);
  --im-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  margin-top: var(--space-7, 28px);
  padding: var(--space-7, 28px);
  border: 1px solid var(--im-border);
  border-radius: var(--im-radius);
  background: var(--im-surface);
}

.im__eyebrow {
  margin: 0 0 var(--space-2, 8px);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--im-text-2);
}
.im__h {
  margin: 0 0 var(--space-6, 24px);
  max-width: 44ch;
  font-family: var(--font-display, inherit);
  font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--im-text);
}

/* Visually hidden but reachable (table caption) */
.im__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- No-JS baseline table ---------- */
.im__table {
  width: 100%;
  border-collapse: collapse;
}
.im__table th,
.im__table td {
  padding: var(--space-3, 12px) var(--space-2, 8px);
  text-align: left;
  border-bottom: 1px dotted var(--im-border);
  font-size: 0.9375rem;
  color: var(--im-text);
}
.im__table th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--im-text-2);
}
.im__table td:last-child,
.im__table th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- JS-enhanced list ---------- */
.im__list {
  display: grid;
  gap: var(--space-2, 8px);
}

.im__row { position: relative; }

.im__btn {
  display: flex;
  align-items: center;
  gap: var(--space-4, 16px);
  width: 100%;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border: 1px solid transparent;
  border-radius: var(--radius-control, 9px);
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
  color: var(--im-text);
  transition: background 160ms var(--im-ease), border-color 160ms var(--im-ease);
}
.im__btn:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--im-border);
}
.im__btn::after {
  content: "+";
  flex: 0 0 auto;
  width: 1em;
  font-family: var(--font-mono);
  color: var(--im-text-3);
  text-align: center;
}
.im__btn[aria-expanded="true"]::after {
  content: "\2212";
  color: var(--im-accent);
}

.im__label {
  flex: 0 0 auto;
  width: clamp(9rem, 22vw, 15rem);
  font-size: 0.9375rem;
  font-weight: 500;
}

.im__bar {
  position: relative;
  flex: 1 1 auto;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.im__bar-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: rgb(var(--im-accent-rgb));
  transform-origin: left center;
  transform: scaleX(calc(var(--pct, 0) / 100));
}
.im__bar-fill--weak {
  background: var(--im-weak);
}

.im__pct {
  flex: 0 0 auto;
  min-width: 3ch;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--im-text);
}

.im__detail {
  padding: var(--space-1, 4px) var(--space-4, 16px) var(--space-4, 16px) calc(clamp(9rem, 22vw, 15rem) + var(--space-4, 16px) + var(--space-4, 16px));
}
.im__detail[hidden] { display: none; }
.im__status {
  margin: 0 0 var(--space-1, 4px);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--im-accent);
}
.im__note {
  margin: 0;
  max-width: 52ch;
  font-size: 0.875rem;
  color: var(--im-text-2);
}

.im__foot {
  margin: var(--space-6, 24px) 0 0;
  font-size: 0.875rem;
  color: var(--im-text-2);
}
.im__foot a {
  color: var(--im-accent);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
}

/* ---------- Bar growth on stage (motion-safe) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js .im[data-stage]:not(.is-staged) .im__bar-fill {
    transform: scaleX(0);
    transition: none;
  }
  html.js .im.is-staged .im__bar-fill {
    transition: transform 0.6s var(--im-ease) calc(var(--i, 0) * 90ms);
  }
}

/* ---------- Narrow viewports: label above the bar ---------- */
@media (max-width: 560px) {
  .im__btn {
    flex-wrap: wrap;
  }
  .im__label {
    width: 100%;
  }
  .im__detail {
    padding-left: var(--space-4, 16px);
  }
}