/* Client report — module styles. Colours from Foundations only. The sheet is the document; it prints alone. */
.rp { display: grid; gap: 14px; padding: 16px 14px 40px; }
.rp.wide { max-width: 1320px; margin: 0 auto; padding: 24px 28px 48px; gap: 16px; }
.rp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rp-head h1 { font: var(--t-page); margin: 0; }
.rp-head p { margin: 4px 0 0; font: var(--t-small); color: var(--muted); }
.rp-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.rp-side { position: sticky; top: 76px; }

/* the sheet */
.rp-sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 40px 48px; display: grid; gap: 0; max-width: 860px; }
.rp-cover { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.rp-eyebrow { font: var(--t-label); text-transform: uppercase; letter-spacing: .08em; color: var(--accent-text); }
.rp-cover h1 { font: 600 30px/1.2 var(--font); margin: 6px 0 4px; letter-spacing: -.01em; }
.rp-cover p { margin: 0; font: var(--t-body); color: var(--muted); }
.rp-note { margin-top: 20px; padding: 14px 16px; background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-s); font: var(--t-body); }
.rp-sec { padding: 28px 0; border-bottom: 1px solid var(--line); display: grid; gap: 16px; }
.rp-sec h2 { margin: 0; font: 600 19px/1.3 var(--font); display: flex; align-items: baseline; gap: 12px; }
.rp-num { font: 600 13px var(--mono); color: var(--faint); }
.rp-sec h3 { margin: 0; font: 600 14px/1.35 var(--font); color: var(--text); }
.rp-lede { margin: 0; font: var(--t-body); color: var(--muted); }
.rp-fine { margin: 0; font: var(--t-small); color: var(--faint); }
.rp-foot { padding-top: 18px; font: var(--t-small); color: var(--faint); }
.rp-out { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line-2); font: var(--t-small); color: var(--faint); }
.rp-link { font: 600 13px var(--font); color: var(--accent-text); }
.rp-link:hover { text-decoration: underline; }

/* figures */
.rp-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-s); overflow: hidden; }
.rp-fig { padding: 14px 16px; display: grid; gap: 2px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rp-fig:nth-child(3n) { border-right: 0; }
.rp-fig:nth-last-child(-n+3) { border-bottom: 0; }
.rp-fig > span { font: var(--t-small); color: var(--muted); }
.rp-fig b { font: 600 26px/1.2 var(--font); font-variant-numeric: tabular-nums; color: var(--text); }
.rp-fig b small { font: 500 15px var(--font); color: var(--muted); margin-left: 2px; }
.rp-fig b.warn { color: var(--warn); }
.rp-fig > small { font: var(--t-small); color: var(--faint); }
.rp-find { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.rp-find li { font: var(--t-body); }
.rp-find li span { display: block; color: var(--muted); font: var(--t-small); margin-top: 2px; }

/* execution */
.rp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rp-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rp-stat { display: grid; gap: 8px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-s); }
.rp-stat p { margin: 0; font: var(--t-small); color: var(--muted); }
.rp-stat p.rp-big { font: 600 28px/1.1 var(--font); color: var(--text); font-variant-numeric: tabular-nums; }
.rp-big small { font: 500 14px var(--font); color: var(--muted); }
.rp-bar { display: block; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.rp-bar i { display: block; height: 100%; background: var(--line-3); }
.rp-bar.ours i { background: var(--accent); }
.rp-list { list-style: none; margin: 0; padding: 0; display: grid; }
.rp-list li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font: var(--t-small); }
.rp-list li:last-child { border-bottom: 0; }
.rp-list b { font-variant-numeric: tabular-nums; }
.rp-bul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font: var(--t-small); color: var(--text); }

/* share and answers */
.rp-share { display: grid; gap: 10px; }
.rp-share + .rp-share { padding-top: 16px; border-top: 1px solid var(--line); }
.rp-sh { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rp-sh > span { font: var(--t-small); color: var(--muted); }
.rp-sh > span b { font: 600 18px var(--font); color: var(--text); }
.rp-sh em { font-style: normal; font-weight: 600; }
.rp-sh em.up { color: var(--good); }
.rp-sh em.down { color: var(--bad); }
.rp-bars { display: grid; gap: 6px; }
.rp-brow { display: grid; grid-template-columns: 130px minmax(0, 1fr) 42px; gap: 10px; align-items: center; font: var(--t-small); }
.rp-brow > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-brow b { text-align: right; font: 600 12.5px var(--mono); font-variant-numeric: tabular-nums; }
.rp-brow.ours > span:first-child, .rp-brow.ours b { color: var(--accent-text); font-weight: 600; }
.rp-q { display: grid; gap: 6px; align-content: start; }
.rp-q .rp-brow { grid-template-columns: minmax(0, 1fr) 60px 38px; }
.rp-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rp-quote { margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-s); display: grid; gap: 10px; align-content: start; }
.rp-quote blockquote { margin: 0; font: 500 14.5px/1.5 var(--font); color: var(--text); }
.rp-quote figcaption { font: var(--t-small); color: var(--muted); }
.rp-quote figcaption .du-tag { margin-right: 6px; }
.rp-quote small { color: var(--faint); }

/* projects, competitors, photos */
.rp-projs, .rp-comps { display: grid; gap: 16px; }
.rp-proj { display: grid; gap: 8px; }
.rp-proj p, .rp-comp p { margin: 0; font: var(--t-small); color: var(--muted); }
.rp-comp { display: grid; gap: 6px; }
.rp-comp p small { color: var(--faint); margin-left: 4px; }
.rp-over { color: var(--bad); font-weight: 600; }
.rp-photos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rp-photos figure { margin: 0; display: grid; gap: 6px; }
.rp-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--sunk); }
.rp-photos figcaption { font: var(--t-small); color: var(--muted); }

/* before you send */
.rp-ctrlb { display: grid; gap: 18px; }
.rp-ch { margin: 0 0 8px; font: var(--t-label); text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }
.rp-check { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--sunk); }
.rp-check.warn { border-color: var(--warn-line); background: var(--warn-bg); }
.rp-check b { font: 600 13.5px var(--font); }
.rp-check p { margin: 0; font: var(--t-small); color: var(--muted); }
.rp-check .du-btn { justify-self: start; }
.rp-inc { display: flex; align-items: center; gap: 10px; padding: 6px 0; font: var(--t-body); cursor: pointer; }
.rp-inc input { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.rp-inc input:disabled + span { color: var(--muted); }
.rp-acts { display: grid; gap: 8px; }
.rp-acts .du-btn { justify-content: center; }
.rp-ctrl textarea { width: 100%; box-sizing: border-box; resize: vertical; }

@media (max-width: 1100px) { .rp-cols { grid-template-columns: minmax(0, 1fr); } .rp-side { position: static; } }
@media (max-width: 720px) {
  .rp { padding: 12px 12px 24px; gap: 12px; }
  .rp-head h1 { font-size: 24px; }
  .rp-period { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); }
  .rp-sheet { padding: 22px 18px; }
  .rp-cover h1 { font-size: 24px; }
  .rp-figs { grid-template-columns: 1fr 1fr; }
  .rp-fig:nth-child(3n) { border-right: 1px solid var(--line); }
  .rp-fig:nth-child(2n) { border-right: 0; }
  .rp-fig:nth-last-child(-n+3) { border-bottom: 1px solid var(--line); }
  .rp-fig:nth-last-child(-n+2) { border-bottom: 0; }
  .rp-grid2, .rp-grid3, .rp-quotes { grid-template-columns: minmax(0, 1fr); }
  .rp-brow { grid-template-columns: 104px minmax(0, 1fr) 40px; }
  .rp-photos { grid-template-columns: 1fr 1fr; }
  .rp-sec h2 { font-size: 17px; }
}

/* print: the document alone, as the client will read it */
@media print {
  .rp { padding: 0; display: block; }
  .rp-head, .rp-side, .rp-ctrl, .rp-out, .du-banner { display: none !important; }
  .rp-cols { display: block; }
  .rp-sheet { border: 0; box-shadow: none; padding: 0; max-width: none; }
  .rp-sec { break-inside: avoid-page; }
  .rp-quote, .rp-stat, .rp-photos figure { break-inside: avoid; }
}

/* phone controls */
.rp-acts.two { grid-template-columns: 1fr 1fr; }
.rp-ctrl .rp-check.warn { grid-template-columns: 1fr; }
.rp-ctrl .rp-check .rp-link { justify-self: start; }

.rp-strong { color: var(--text); font: 500 16px/1.45 var(--font); }
.rp-stat p.rp-big.rp-bad { color: var(--bad); }
.rp-big.rp-bad + .rp-bar i { background: var(--bad); }