/* ===========================================================================
   WAITING: the van, parked and idling, while the panel reads.
   =========================================================================== */
#wait{text-align:center; padding-top:16vh}
#wait .shout.small{font-size:var(--head); color:var(--white); margin-top:8px}
.van-wait{width:100vw; margin:0 0 20px calc(50% - 50vw); overflow:hidden; display:flex; justify-content:center}
.van-wait .vn-travel{width:min(70vw,280px)}

/* ===========================================================================
   THE REPORT. The cascade: the answer and the meter (always open), the three
   boxes (always open), then each review behind one drawer. White cards on
   the red room, as everywhere else. One label voice: small grey caps.
   =========================================================================== */
.room.wide#report{max-width:1100px}
.rp-lab{font-family:var(--label); font-weight:500; font-size:var(--quiet); letter-spacing:.14em; text-transform:uppercase; color:var(--mid); margin:0}

/* the top card */
.rp-hero{background:var(--white); color:var(--ink); border-radius:var(--r-card); padding:32px 36px 22px; display:flex; flex-direction:column; gap:28px}
.rp-top{display:flex; flex-wrap:wrap; align-items:flex-end; gap:32px 56px}
.rp-answer{flex:999 1 440px; min-width:0; display:flex; flex-direction:column}
.rp-q{font-size:var(--talk); font-weight:600; margin:6px 0 28px}
.rp-reckon{color:var(--red); margin-bottom:8px}
.rp-head{font-family:var(--display); font-weight:400; font-size:var(--title); line-height:.95; letter-spacing:.01em; margin:0 0 10px}
.rp-sub{font-size:var(--talk); line-height:1.4; color:var(--ink-soft); margin:0; max-width:480px}
.rp-nowrite{margin-top:4px}

/* the meter: one bar each, a name on its left, no numbers */
.rp-meter{flex:1 1 300px; min-width:0; display:flex; flex-direction:column; gap:16px}
.rp-meter > .rp-lab{text-align:right}
.rp-bars{display:grid; grid-template-columns:max-content minmax(0,1fr); align-items:center; gap:14px 14px}
.rp-mname{font-size:var(--say); font-weight:500; text-align:right; white-space:nowrap}
.rp-track{display:block; height:10px; border-radius:var(--pill); background:var(--paper); overflow:hidden}
.rp-track i{display:block; height:100%; border-radius:var(--pill); background:var(--red)}

/* what they saw, small, at the foot of the card */
.rp-saw{display:flex; flex-wrap:wrap; gap:4px 14px; align-items:baseline; margin:0; padding-top:16px; border-top:1px solid var(--border); font-size:var(--say); line-height:1.5; color:var(--ink-soft)}
.rp-saw b{color:var(--ink); font-weight:600}
.rp-saw > span:last-child{flex:1 1 360px; min-width:0}

/* the second card: tabs, the three boxes, their own words */
.rp-card{background:var(--white); color:var(--ink); border-radius:var(--r-card); padding:22px 36px 0; margin-top:12px}
.rp-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px}
.rp-tab{background:var(--paper); border:2px solid transparent; border-radius:var(--pill); padding:6px 18px 4px; cursor:pointer; font-family:var(--display); font-size:var(--lead); line-height:1; letter-spacing:.04em; color:var(--ink-soft)}
.rp-tab.on{background:var(--white); border-color:var(--ink); color:var(--ink)}
.rp-tab:focus-visible{outline:3px solid var(--ink); outline-offset:2px}
.rp-boxes{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:28px 40px; padding-bottom:28px}
.rp-box{min-width:0}
.rp-bh{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:400; font-size:var(--head); line-height:1; letter-spacing:.02em; margin:0 0 16px; padding-top:3px}
.rp-bi{display:inline-flex; color:var(--red); flex:none}
.rp-bi svg{width:24px; height:24px}
.rp-box ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px}
.rp-box p{margin:0; font-size:var(--talk); line-height:1.45}
.rp-box small{display:block; margin-top:3px; font-size:var(--quiet); color:var(--mid)}
.rp-none{color:var(--mid); margin:0 0 28px}

/* in their own words: a bar along the bottom of the card */
.rp-words{border-top:1px solid var(--border); margin:0 -36px; padding:0 36px}
.rp-more{display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:0; padding:14px 0; cursor:pointer; font-family:var(--label); font-weight:500; font-size:var(--quiet); letter-spacing:.14em; text-transform:uppercase; color:var(--ink)}
.rp-more:focus-visible{outline:3px solid var(--ink); outline-offset:2px}
.rp-chev{width:34px; height:34px; border-radius:50%; background:var(--paper); display:inline-flex; align-items:center; justify-content:center; transition:transform .2s, background .2s; flex:none}
.rp-chev svg{width:14px; height:14px}
.rp-more[aria-expanded="true"] .rp-chev{transform:rotate(180deg); background:var(--ink); color:var(--white)}
.rp-saids{display:flex; flex-direction:column; gap:24px; padding:6px 0 28px}
.rp-said{display:flex; flex-direction:column; gap:10px}
.rp-sname{margin:0; font-family:var(--display); font-size:var(--head); line-height:1; letter-spacing:.02em}
.rp-sname span{color:var(--red)}
.rp-own{margin:0; background:var(--paper); border-radius:var(--r-input); padding:12px 16px; font-weight:500; display:flex; flex-direction:column; gap:4px}
.rp-chat{background:var(--paper); border-radius:var(--r-card) var(--r-card) var(--r-card) 4px; padding:16px 18px; font-size:var(--talk); line-height:1.6}
.rp-chat p{margin:0 0 10px} .rp-chat p:last-child{margin:0}

/* the buttons: two outlines, one filled */
.rp-btns{margin-top:24px}
.pill.rp-pdf{margin-left:auto; background:var(--ink); color:var(--white)}
@media (prefers-reduced-motion:no-preference){
  .rp-saids{animation:rpPop .28s cubic-bezier(.3,1.3,.6,1)}
  @keyframes rpPop{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
}
@media (max-width:760px){
  .rp-hero{padding:22px 20px 18px; gap:22px}
  .rp-card{padding:18px 20px 0}
  .rp-words{margin:0 -20px; padding:0 20px}
  .rp-meter > .rp-lab{text-align:left}
  .pill.rp-pdf{margin-left:0}
}

/* THE PDF. Hidden on screen; when printing, it's the only thing there. */
#print{display:none}
@media print{
  @page{size:A4; margin:14mm}
  body{background:var(--white) !important; color:var(--ink)}
  body > *:not(#print){display:none !important}
  #print{display:block}
  *{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .pr-sheet{break-after:page; display:flex; flex-direction:column; gap:18px}
  .pr-sheet:last-child{break-after:auto}
  .pr-top{display:flex; justify-content:space-between; font-family:var(--label); font-weight:500; font-size:var(--whisper); letter-spacing:.14em; text-transform:uppercase; color:var(--mid); border-bottom:1px solid var(--border); padding-bottom:8px}
  .pr-top span:first-child{display:inline-flex; align-items:center; gap:8px; color:var(--ink)}
  .pr-top i{width:12px; height:12px; border-radius:50%; background:var(--red)}
  .pr-title{font-family:var(--display); font-weight:400; font-size:var(--shout); line-height:.86; margin:16px 0 0}
  .pr-title span{color:var(--red)}
  .pr-meta{display:flex; gap:48px; border-top:2px solid var(--ink); padding-top:10px; font-size:var(--say)}
  .pr-sheet .rp-hero{padding:0; border-radius:0}
  .pr-sheet .rp-boxes{border-top:2px solid var(--ink); padding:16px 0 0}
  .rp-head{font-size:var(--head)}
  .pr-h{font-family:var(--display); font-weight:400; font-size:var(--head); letter-spacing:.03em; color:var(--red); margin:8px 0 0}
  .rp-chev,.rp-more{display:none}
  .pr-sheet .rp-said{border-top:2px solid var(--ink); padding-top:14px}
  .pr-sheet .rp-sname{font-size:var(--lead)}
  .rp-chat{border:1px solid var(--border); background:var(--white)}
  *,*::before,*::after{animation:none !important; transition:none !important}
  .rp-box li{break-inside:avoid}
  .pr-note{font-size:var(--quiet); color:var(--ink-soft)}
}