/* ============================================================================
   KAR — recommendation profiles
   Each recommended car rendered as a dossier: photograph, identity, the fit
   reading against the user's own brief, the evidence, strengths and
   compromises given equal weight, the facts, and the next action.

   Two rules, unchanged from the first version of this file:
   1. Every card is identical — same frame, type, actions and width, whatever
      the manufacturer. Nothing here may key off a brand; visual weight reads
      as endorsement.
   2. The decision comes first: the reasoning sits beside and directly under
      the photograph, never pushed below it.
   ========================================================================= */

.rec-profile-grid { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
@media (min-width: 1180px) { .rec-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }

.rec-profile {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.rec-profile-plain { min-width: 0; padding: 18px 20px; background: var(--c-surface); border: 1px solid var(--c-rule); border-radius: var(--r-lg); }
.rec-profile-plain > .response-header:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ── Photograph ──────────────────────────────────────────────────────────── */
.rp-figure {
  position: relative; margin: 0;
  aspect-ratio: 16 / 10;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #e9e6df 0%, #d9d5cb 100%);
  overflow: hidden;
}
.rp-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-3) var(--ease); }
.rp-figure.has-photo .rp-photo { opacity: 1; }
.rp-silhouette { width: min(52%, 220px); height: auto; fill: none; stroke: var(--c-text-3); stroke-width: 1.4; stroke-linejoin: round; opacity: 0.35; }
.rp-figure.has-photo .rp-silhouette { display: none; }

.rp-figure.no-photo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  aspect-ratio: auto; min-height: 64px; padding: 0 16px 0 0;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-rule-soft);
}
.rp-figure.no-photo .rp-silhouette { order: 2; width: 88px; opacity: 0.3; }
.rp-figure.no-photo .rp-role { order: 1; position: static; }

/* Role — a flush-left label, the same on every card. */
.rp-role {
  position: absolute; top: 14px; left: 0; z-index: 1;
  max-width: calc(100% - 16px);
  padding: 6px 12px 6px 14px;
  background: var(--c-brand); color: #fff;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.3;
  overflow-wrap: anywhere;
}
.rp-credit {
  position: absolute; right: 8px; bottom: 8px; z-index: 1;
  padding: 2px 6px; border-radius: var(--r-sm);
  background: rgba(7, 13, 31, 0.6); color: #fff;
  font-size: var(--fs-2xs);
}
.rp-credit:hover, .rp-credit:focus-visible { background: rgba(7, 13, 31, 0.85); }

/* ── Identity & fit ──────────────────────────────────────────────────────── */
.rp-body { display: flex; flex-direction: column; gap: 16px; padding: 18px 20px 20px; min-width: 0; }
.rp-head { display: flex; align-items: flex-start; gap: 16px; }
.rp-titles { flex: 1; min-width: 0; }
.rp-name {
  margin: 0;
  font-family: var(--font-display); font-stretch: var(--stretch-display);
  font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); font-weight: 700;
  letter-spacing: -0.025em; line-height: 1.1;
  color: var(--c-text); overflow-wrap: anywhere;
}
.rp-sub { margin: 6px 0 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--c-text-3); overflow-wrap: anywhere; }

/* The fit reading is a COUNT of the user's own criteria. A thin ring makes it
   scannable; tone changes hue only, never size. */
.rp-fit { --rp-fit: 0%; flex: 0 0 auto; display: flex; align-items: center; gap: 10px; max-width: 46%; }
.rp-fit-ring {
  position: relative; flex: 0 0 auto;
  display: grid; place-content: center;
  width: 58px; height: 58px; border-radius: 50%;
  background: conic-gradient(var(--rp-fit-color) var(--rp-fit), var(--c-rule-soft) 0);
}
.rp-fit-ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--c-surface); }
.rp-fit.is-strong  { --rp-fit-color: var(--c-pos); }
.rp-fit.is-fair    { --rp-fit-color: var(--c-brand); }
.rp-fit.is-partial { --rp-fit-color: var(--c-warn); }
.rp-fit-num { position: relative; z-index: 1; font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.1; text-align: center; color: var(--c-text); }
.rp-fit-num strong { font-size: 1.25rem; font-weight: 500; }
.rp-fit-of { color: var(--c-text-3); font-size: var(--fs-xs); }
.rp-fit-label { min-width: 0; font-size: var(--fs-2xs); line-height: 1.35; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-text-3); overflow-wrap: anywhere; }

/* ── Statement ───────────────────────────────────────────────────────────── */
.rp-statement {
  margin: 0; padding: 2px 0 2px 14px;
  border-left: 2px solid var(--c-brand);
  font-size: var(--fs-md); line-height: 1.6; color: var(--c-text);
}
.rp-section-title { margin: 0 0 -8px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-3); }

/* ── Evidence — a checklist, not a cloud of pills ────────────────────────── */
.rp-chips { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-rule-soft); }
.rp-chip {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--c-rule-soft);
  font-size: var(--fs-sm); line-height: 1.45; color: var(--c-text);
  overflow-wrap: anywhere;
}
.rp-chip-tick { flex: 0 0 auto; color: var(--c-pos); font-weight: 700; }

/* ── Strengths and compromises, equal weight ─────────────────────────────── */
.rp-balance { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 560px) { .rp-balance { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.rp-col { min-width: 0; padding: 0; border: 0; background: none; }
.rp-col-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: var(--fs-2xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.rp-col-title::before { content: ""; width: 12px; height: 2px; background: currentColor; }
.rp-col-like .rp-col-title { color: var(--c-pos); }
.rp-col-consider .rp-col-title { color: var(--c-warn); }
.rp-col-list { display: grid; gap: 6px; margin: 0; padding-left: 1.05em; }
.rp-col-list li { font-size: var(--fs-sm); line-height: 1.55; color: var(--c-text-2); overflow-wrap: anywhere; }
.rp-col-like .rp-col-list li::marker { color: var(--c-pos); }
.rp-col-consider .rp-col-list li::marker { color: var(--c-warn); }
.rp-empty { color: var(--c-text-3); font-style: italic; }

/* ── Key facts ───────────────────────────────────────────────────────────── */
.rp-facts { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); margin: 0; border-top: 1px solid var(--c-rule-strong); }
.rp-facts dt { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--c-rule-soft); font-size: var(--fs-xs); font-weight: 500; color: var(--c-text-3); overflow-wrap: anywhere; }
.rp-facts dd { min-width: 0; margin: 0; padding: 9px 0; border-bottom: 1px solid var(--c-rule-soft); font-size: var(--fs-sm); color: var(--c-text); overflow-wrap: anywhere; }
@media (max-width: 460px) {
  .rp-facts { grid-template-columns: minmax(0, 1fr); }
  .rp-facts dt { padding-bottom: 0; border-bottom: 0; }
  .rp-facts dd { padding-top: 2px; }
}

/* ── Actions ─────────────────────────────────────────────────────────────── */
.rp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-action {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 14px;
  border: 1px solid var(--c-rule); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-text);
  font: inherit; font-size: var(--fs-sm); font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.rp-action:hover { border-color: var(--c-text); }
.rp-action:active { transform: translateY(1px); }
.rp-action.is-primary { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }
.rp-action.is-primary:hover { background: var(--c-brand-2); border-color: var(--c-brand-2); }
.rp-action[disabled] { opacity: 0.6; cursor: default; transform: none; }

/* ── Progressive disclosure ──────────────────────────────────────────────── */
.rp-more { padding-top: 10px; border-top: 1px solid var(--c-rule-soft); }
.rp-more-summary { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; list-style: none; cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--c-text-2); }
.rp-more-summary::-webkit-details-marker { display: none; }
.rp-more-summary::before { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--dur-2) var(--ease); }
.rp-more[open] .rp-more-summary::before { transform: rotate(45deg); }
.rp-more-summary:hover { color: var(--c-text); }
.rp-more-body { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.rp-more-line { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--c-text-2); overflow-wrap: anywhere; }
.rp-unknown-title { margin: 6px 0 0; font-size: var(--fs-xs); font-weight: 600; color: var(--c-text); }
.rp-unknown { display: grid; gap: 4px; margin: 0; padding-left: 1.05em; }
.rp-unknown li { font-size: var(--fs-sm); color: var(--c-text-3); }
.rp-unknown-note { margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--c-text-3); }

@media (max-width: 560px) {
  .rp-figure { aspect-ratio: 3 / 2; }
  .rp-body { padding: 16px; gap: 14px; }
  .rp-head { flex-direction: column; gap: 10px; }
  .rp-fit { max-width: 100%; }
  .rp-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-action { justify-content: center; text-align: center; }
  .rp-action.is-primary { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .rp-action, .rp-more-summary::before, .rp-photo { transition: none; }
}