/* report() (SITE-28): a research report as an object. Markup: src/v2/system/report/report.mjs; motion: report.js.
   Founder ref: design/research/v2/founder/report-object-ref.webp. Built from the v2 tokens: a tinted frame with a
   header bar (the variant's tone), a white body on hairlines, Bolton title, Geist Mono eyebrow, lime pixel badges. */

.rp { --rp-w: 372px; position: relative; width: min(100%, var(--rp-w)); padding: 0 5px 5px; border-radius: 14px;
  background: color-mix(in oklab, var(--tone-soft, var(--lilac-soft)) 88%, var(--tone, #7F89EC) 12%);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--tone, #7F89EC) 22%, transparent), var(--shadow-lg); text-align: left; }
.rp-bar { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 10px; font: 500 15px/1 var(--font-body); letter-spacing: -.01em; color: var(--tone-ink, var(--ink)); }
.rp-bar .pix-avatar { width: 26px; height: 26px; background: rgb(255 255 255 / .7); }
.rp-bar .pix-avatar svg { width: 14px; height: 14px; }
.rp-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px 16px 12px; border-radius: 10px; background: var(--canvas); box-shadow: 0 0 0 1px rgb(21 19 15 / .06); }
.rp-eyebrow { font: 500 11px/1.2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-58); }
.rp-title { margin-top: -4px; font: 500 19px/1.2 var(--font-display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.rp-finding { font-size: 14px; line-height: 1.45; color: var(--ink-80); text-wrap: pretty; }

/* Thumbnails with lime pixel badges (the ref's score chips) */
.rp-thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 2px; }
.rp-thumb { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 6px; background: var(--paper-2); box-shadow: 0 0 0 1px rgb(21 19 15 / .06); }
.rp-thumb .ck-ph, .rp-thumb img { width: 100%; height: 100%; }
.rp-thumb img { object-fit: cover; }
.rp-badge { position: absolute; left: 4px; top: 4px; padding: 3px 4px 2px; border-radius: 3px; background: var(--lime); color: var(--lime-ink); font-variant-numeric: tabular-nums; box-shadow: 0 1px 2px rgb(21 19 15 / .2); }

/* Reddit threads */
.rp-threads { display: grid; gap: 6px; }
.rp-thread { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 10px 8px 8px; border-radius: 8px; background: var(--paper); }
.rp-up { display: inline-flex; align-items: center; justify-content: center; gap: 3px; height: 26px; border-radius: 6px; background: var(--canvas); color: var(--peach-ink); box-shadow: inset 0 0 0 1px rgb(21 19 15 / .08); }
.rp-up svg { width: 9px; height: 9px; }
.rp-thread__t { display: grid; gap: 3px; font-size: 14px; line-height: 1.3; color: var(--ink-80); }
.rp-thread__t .pixel-ui { color: var(--ink-58); }

/* Quotes: audience language, checked word for word */
.rp-quotes { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-quotes li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 10px 10px 10px 3px; background: var(--paper); font: italic 400 17px/1.15 var(--font-serif); color: var(--ink-80); }
.rp-quotes .rp-quote--cited { display: grid; gap: 4px; padding: 8px 12px; width: 100%; }
.rp-quote--cited > span { display: inline-flex; align-items: center; gap: 8px; }
.rp-by { font: 400 12px/1.3 var(--font-body); font-style: normal; color: var(--ink-58); }
.rp-check { width: 18px; height: 18px; display: grid; place-items: center; flex: none; border-radius: 50%; background: var(--lime); color: var(--lime-ink); }
.rp-check svg { width: 10px; height: 10px; }

/* The table: hairline rows, mono numbers */
.rp-table { width: 100%; border-collapse: collapse; margin-top: 2px; font-size: 14px; }
.rp-table thead th { padding: 6px 0 8px; text-align: right; font: 400 var(--t-pixel)/1 var(--font-pixel-ui); text-transform: uppercase; color: var(--ink-58); }
.rp-table thead th:first-child { text-align: left; }
.rp-table tbody tr { background: linear-gradient(var(--hairline), var(--hairline)) 0 0 / 100% 1px no-repeat; }
.rp-table tbody th { padding: 9px 8px 9px 0; text-align: left; font-weight: 450; color: var(--ink); }
.rp-table td { padding: 9px 0 9px 10px; text-align: right; font: 500 14px/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-80); white-space: nowrap; }
.rp[data-variant="persona"] .rp-table td:nth-child(2) { font: 400 14px/1.3 var(--font-body); text-align: left; white-space: normal; color: var(--ink-64); }
.rp[data-variant="persona"] .rp-table thead th:nth-child(2) { text-align: left; padding-left: 10px; }
.rp-foot { display: flex; align-items: center; gap: 8px; padding-top: 8px; border-top: 1px solid var(--hairline); font-size: 12px; line-height: 1.3; color: var(--ink-58); }
.rp-illus { flex: none; height: 22px; font-size: 11px; background: var(--paper); box-shadow: none; }

/* Motion states (report.js adds .is-in; without JS or with reduced motion everything is simply there) */
html.rp-js [data-report]:not(.is-done) [data-rp] { opacity: 0; }
html.rp-js [data-report]:not(.is-done) .rp-table tbody tr { background-size: 0% 1px; }
.rp-table tbody tr { transition: background-size 700ms var(--ease-out); }
html.rp-js [data-report] [data-rp].is-in { opacity: 1; transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
html.rp-js [data-report] .rp-table tbody tr.is-in { background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) { html.rp-js [data-report] [data-rp] { opacity: 1; } html.rp-js [data-report] .rp-table tbody tr { background-size: 100% 1px; } }

/* ── The prompt card ── */
.rp-prompt { display: grid; gap: 12px; width: 240px; padding: 16px 18px 20px; border-radius: 14px; background: rgb(255 255 255 / .92); box-shadow: 0 0 0 1px rgb(21 19 15 / .08), var(--shadow-md); }
.rp-prompt__mark { width: 28px; height: 24px; image-rendering: pixelated; }
.rp-prompt p { font: 500 19px/1.25 var(--font-display); letter-spacing: -.02em; color: var(--ink); min-height: 4.9em; }
.rp-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--orange); animation: rp-caret 1s steps(1) infinite; }
@keyframes rp-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rp-caret { animation: none; } }

/* ── The composition: prompt behind left, report in front, photo tilted right ── */
.rp-stage { position: relative; display: grid; justify-items: center; gap: 14px; width: 100%; }
.rp-pick { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; position: relative; z-index: 5; }
.rp-pick__b { height: 44px; padding: 0 14px; cursor: pointer; transition: background-color 200ms, color 200ms; }
.rp-pick__b[aria-selected="true"] { background: var(--ink); color: #fff; border-color: transparent; }
.rp-stage__set { position: relative; display: grid; width: 100%; justify-items: center; }
.rp-stage__v { grid-area: 1 / 1; position: relative; display: grid; justify-items: end; align-items: start; align-content: start; width: 100%; z-index: 2; }
.rp-stage__v.is-off { visibility: hidden; }
/* The prompt sits in the space left of the report, so every word of it reads (it never runs under the card). */
.rp-stage__v .rp-prompt { position: absolute; left: 0; top: 56px; z-index: -1; rotate: -3deg; width: clamp(150px, calc(100% - var(--rp-w) - clamp(0px, 9%, 64px) - 14px), 240px); padding: 14px 14px 18px; }
.rp-stage__v .rp-prompt p { font-size: 17px; }
.rp-stage__v .rp { z-index: 1; margin-right: clamp(0px, 9%, 64px); }
.rp-photo { grid-area: 1 / 1; justify-self: end; align-self: end; position: relative; z-index: 0; width: 176px; aspect-ratio: 4 / 5; margin: 0 0 40px; overflow: hidden; border-radius: 14px; rotate: 7deg; box-shadow: var(--shadow-lg); }
.rp-photo .ck-ph, .rp-photo img { width: 100%; height: 100%; }
.rp-photo img { object-fit: cover; }
@media (max-width: 760px) {
  .rp { --rp-w: 340px; }
  .rp-stage__v { justify-items: center; }
  .rp-stage__v .rp { margin-right: 0; }
  .rp-stage__v .rp-prompt { position: relative; left: auto; top: auto; rotate: none; width: min(100%, 340px); margin-bottom: -10px; padding: 12px 14px 22px; z-index: 0; }
  .rp-stage__v .rp-prompt p { font-size: 16px; min-height: 2.6em; }
  .rp-stage__v .rp-prompt__mark { display: none; }
  .rp-photo { display: none; }
  .rp-body { padding: 14px 12px 10px; }
}
/* The picker chips are 44 px tap targets at every width (SITE-26 M4), 8 px apart. */
.rp-pick { gap: 8px; }
@media (max-width: 960px) { .rp-pick__b { font-size: 13px; } }