/* /ai-search-recommendations/ only (2026-11-11): the study told as the transcript it came from.
   Left: the exchange, set as type, not chat bubbles. Right: margin notes, a maple figure each, level with
   the moment it explains. Phones: notes fall in line under their message. Loads after data.css. */

.tx { margin-top: clamp(72px, 11vh, 120px); }
.tx-h { margin: 0 0 36px; max-width: 30ch; font: 700 clamp(1.4rem, 2.2vw, 1.9rem)/1.2 "Bricolage Grotesque", sans-serif; letter-spacing: -.01em; color: var(--text-primary); }
.tx-lead { margin: 0 0 24px; max-width: 62ch; color: var(--text-secondary); line-height: 1.55; }

.tx-body { border-top: 1px solid var(--line); }
.tx-row { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 340px); justify-content: space-between; gap: 24px clamp(40px, 6vw, 120px); align-items: start; padding: 18px 0; }
.tx-gap { height: clamp(28px, 5vh, 56px); border-bottom: 1px solid var(--line); margin-bottom: 0; }

.msg { margin: 0; }
.msg .who { display: block; margin-bottom: 10px; font: 500 .78rem/1.3 "JetBrains Mono", monospace; color: var(--text-muted); }
.msg p { margin: 0; }
.msg.ask p { font: 600 clamp(1.35rem, 2.3vw, 1.9rem)/1.3 "Instrument Sans", sans-serif; color: var(--text-primary); letter-spacing: -.005em; }
.msg.search { padding-left: 18px; border-left: 2px solid var(--maple); }
.msg.search p { font: 500 1.02rem/1.5 "JetBrains Mono", monospace; color: var(--text-primary); }
.msg.search em { font-style: normal; color: var(--maple); }
.msg.reply p { font: 400 1.08rem/1.65 "Instrument Sans", sans-serif; color: var(--text-secondary); max-width: 58ch; }
.msg .nosrc { margin-top: 14px; font: 500 .82rem/1.4 "JetBrains Mono", monospace; color: var(--text-muted); }
.src { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.src li { padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; font: 500 .8rem/1.2 "JetBrains Mono", monospace; color: var(--text-primary); }

.tx-note { padding-top: 4px; }
.tx-note b { display: block; font: 900 clamp(2.4rem, 3.6vw, 3.2rem)/.9 "Big Shoulders", sans-serif; font-variation-settings: "opsz" 72; color: var(--maple); }
.tx-note span { display: block; margin-top: 8px; font-size: .88rem; line-height: 1.5; color: var(--text-secondary); }

/* The prompts: things to paste, each with a copy button */
.pmt { position: relative; max-width: 720px; margin: 0 0 12px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 8px; }
.pmt .who { display: block; margin-bottom: 8px; font: 500 .78rem/1.3 "JetBrains Mono", monospace; color: var(--text-muted); }
.pmt p { margin: 0; padding-right: 72px; font: 500 1.02rem/1.5 "Instrument Sans", sans-serif; color: var(--text-primary); }
.pcopy { position: absolute; top: 16px; right: 16px; font: 600 .82rem/1 "Instrument Sans", sans-serif; color: var(--text-primary); background: none; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; cursor: pointer; }
.pcopy:hover { border-color: var(--text-muted); }
.pcopy:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 2px; }
.tx-check .pmt + .tx-lead { margin-top: 24px; }

@media (max-width: 900px) {
  .tx-row { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px 0; }
  .tx-note { padding: 14px 0 0 16px; border-left: 2px solid var(--maple); }
  .tx-note b { font-size: 2.4rem; }
}