/* Taam: report.css. Everything that presents a taste profile or a household comparison in the studio.
   Builds on base.css (tokens, tiles, shared components; docs/look/system.md 4.7 and 4.8). Parts, then print:
     .rp-...  .rk...          the pieces of Taam.ui.report (js/ui/report.js)
     .rp-layout .rp-main ...  the member report page (js/ui/screens/member.js): tiles on a nine-column grid, a rail
     .rp-compare .cmp ...     the household comparison: a column of tiles
   The client's result page (.res...) is dressed in css/client.css; it only borrows the pieces marked "shared".
   The member report is the page that prints (ux.md 6.3); its paper rules are at the end. */

/* ---------- pieces shared with the client's result ---------- */

.rp-scales { display: flex; flex-direction: column; gap: var(--s-4); }
.rp-scales--client { gap: var(--s-5); }

/* The client's styles: the start screen's style rows, one under the other. */
.rp-cstyles, .rp-cstyles__list { display: grid; gap: var(--s-5); min-width: 0; }

/* The credits list that ends every report: small and flowing, each photo's number and credit kept together. */
.rp-credits { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.rp-credits .rp-credits__title { font: 600 14px/1.4 var(--font); color: var(--ink-2); letter-spacing: 0; }
.rp-credits__list { display: flex; flex-wrap: wrap; gap: 2px var(--s-4); }
.rp-credits__list li { display: inline-flex; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.rp-credits__no { flex: none; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.rp-credits__list a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* Touch: each credit is a row tall enough for a finger; the link's own padding fills the row. */
@media (pointer: coarse) {
  .rp-credits__list { row-gap: 0; }
  .rp-credits__list li { align-items: center; min-height: 44px; }
  .rp-credits__list a { padding-block: 12px; }
}

/* ---------- report pieces ---------- */

/* Leading styles beside the portrait: the palette at the length of its score. */
.rp-lead { display: grid; gap: var(--s-4); }
.rp-lead .chip--lg .chip__name { font-size: 18px; }
.rp-lead .swatch--lg i { height: 32px; }

/* Red lines: an inner tile in the danger wash; the words carry the meaning. */
.rp-redbox { display: grid; gap: var(--s-3); }
.rp-redbox__title { display: flex; align-items: center; gap: 6px; font: 600 15px/1.3 var(--font); color: var(--danger); }
.rp-redbox__title .icon { width: 18px; height: 18px; }
.rp-redlines { display: grid; gap: var(--s-2); }
.rp-redlines li { display: grid; gap: 2px; min-width: 0; }

.rp-two { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .rp-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rp-tags { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); }

.rp-rel__level { display: grid; gap: 2px; }
.rp-flags { display: grid; gap: var(--s-2); }
.rp-flags li {
  position: relative; display: grid; gap: 2px;
  padding: 12px 16px; padding-inline-start: 36px; border-radius: var(--r-sm); background: var(--ground);
}
.rp-flags li::before {
  content: ""; position: absolute; inset-inline-start: 16px; top: 18px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--brass);
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.rp-flags__label { font: 600 15px/1.3 var(--font); }

/* Verdict mark on an evidence photo: the three answer buttons in miniature. */
.rp-verdict {
  position: absolute; z-index: 1; top: 8px; inset-inline-start: 8px; width: 24px; height: 24px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--ivory); color: var(--ink);
}
.rp-verdict .icon { width: 13px; height: 13px; stroke-width: 2.25; }
.rp-verdict--like { background: var(--accent); color: var(--on-accent); }
.rp-verdict--love { background: var(--brass); }

/* Style ranking. Phone: one soft block per style, its lines stacked; from tablet: one row, six columns, zebra. */
.rk { display: grid; gap: var(--s-2); min-width: 0; }
.rk__list { display: grid; gap: 6px; }
.rk__head { display: none; }
.rk__less { display: grid; gap: var(--s-2); margin-block-start: var(--s-4); }
.rk__lesshead { padding-inline: 14px; font-weight: 600; color: var(--ink-2); }
.rk__row, .rk__head {
  grid-template-columns: 28px minmax(0, 1fr) 44px;
  column-gap: var(--s-3); align-items: center;
}
.rk__row {
  display: grid; row-gap: 4px; padding: 10px 14px; border-radius: var(--r-sm); background: var(--ground);
  grid-template-areas: "rank style more" "rank pull pull" "rank conf conf" "rank basis basis" "photos photos photos";
}
.rk__rank {
  grid-area: rank; align-self: start; width: 24px; height: 24px; margin-block-start: 10px;
  display: grid; place-items: center; border-radius: 50%; background: var(--tile);
  font: 600 13px/1 var(--font); color: var(--ink-2);
}
.rk__style { grid-area: style; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s-2); min-width: 0; }
.rk__pull { grid-area: pull; min-width: 0; }
.rk__pull .sbar { display: flex; }
.rk__conf { grid-area: conf; }
.rk__basis { grid-area: basis; font: 400 14px/1.4 var(--font); color: var(--ink-2); }
.rk__more { grid-area: more; justify-self: end; }
.rk__photos {
  grid-area: photos; display: grid; gap: var(--s-3);
  margin-block: 6px 4px; padding: var(--s-4); border-radius: var(--r-sm); background: var(--tile);
}
.rk__note:not(.tag) { display: inline-flex; padding: 0; }
.rk__toggle .icon { transition: transform .3s var(--ease); transform: rotate(-90deg); }
.rk__toggle.is-open .icon { transform: rotate(90deg); }
@media (min-width: 600px) {
  .rk__row, .rk__head {
    display: grid;
    grid-template-columns: 28px minmax(170px, 1.5fr) minmax(130px, 1fr) 76px minmax(120px, 1.1fr) 44px;
  }
  .rk__row {
    min-height: 52px; padding-block: 4px;
    grid-template-areas: "rank style pull conf basis more" "photos photos photos photos photos photos";
  }
  .rk__rank { align-self: center; margin: 0; }
  .rk__head { padding: 0 14px 2px; font: 400 14px/1.4 var(--font); color: var(--ink-3); }
  .rk__list > .rk__row:nth-child(even):not(.is-open) { background: none; }
  .rk__list > .rk__row:nth-child(even):not(.is-open) .rk__rank { background: var(--ground); }
}

/* Photo groups. */
.rp-photos__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.rp-photos .fact { background: var(--tile); }
.rp-photos .ptile__hover .chip__name { font-size: 14px; font-weight: 400; }
/* One line per caption: the number whole, the room cut with an ellipsis when the tile is narrow. */
.rp-photos .ptile__cap > * { white-space: nowrap; }
.rp-photos .ptile__cap > bdi { flex: none; }
.rp-photos .ptile__cap > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---------- member report page ---------- */

.rp-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-2) var(--s-4); margin-block-end: var(--s-3);
}
.rp-top .crumb { margin: 0; }

/* No result yet: the empty state runs the width of the page grid, its actions at the end. */
.rp-noresult .empty { max-width: none; }
.rp-noresult .rp-answers { margin-block-start: var(--s-3); }
@media (min-width: 900px) {
  .rp-noresult .empty {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-1) var(--s-5);
  }
  .rp-noresult .empty > .ph--glyph { grid-row: 1 / span 2; margin: 0; }
  .rp-noresult .empty > :is(h1, .empty__body) { grid-column: 2; }
  .rp-noresult .empty > h1:nth-last-child(2) { grid-row: 1 / span 2; }
  .rp-noresult .empty__actions { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
}

.rp-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-tiles); min-width: 0; }
.rp-main > * { min-width: 0; }
.rp-sec { scroll-margin-top: calc(var(--sticky-top) + var(--s-4)); }
.rp-sec:focus-visible { outline: none; }
.rp-sec--credits { padding-inline: var(--s-2); }

/* The summary tile: the title, the facts of this report, and under them the rounds the report is read by. */
.rp-sum > .rp-rounds, .rp-sum > .rp-answers { grid-column: 1 / -1; margin: 0; }
.rp-rounds { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
@media (min-width: 900px) {
  .rp-sum { grid-template-columns: auto minmax(0, 1fr); }
  .rp-sum .stat { flex: 1 1 0; }
}

/* The portrait: the title and the brief at the start; the leading styles and the red lines beside them. */
.rp-portrait { display: grid; gap: var(--s-5); }
.rp-portrait__text { min-width: 0; }
.rp-portrait__side { display: grid; gap: var(--s-4); align-content: start; min-width: 0; }
.rp-brief { font: 400 17px/1.65 var(--font); text-wrap: pretty; }
@media (min-width: 900px) {
  .rp-portrait--side { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); column-gap: var(--s-7); }
}

@media (min-width: 600px) {
  .rp-main { grid-template-columns: repeat(9, minmax(0, 1fr)); }
  .rp-main > * { grid-column: 1 / -1; }
  .rp-main > .rp-sec--materials, .rp-main > .rp-sec--rel { grid-column: span 5; }
  .rp-main > .rp-sec--moods, .rp-main > .rp-notes { grid-column: span 4; }
}
@media (min-width: 1100px) {
  /* The seven scales stand beside the materials and the moods, and the three end level. */
  .rp-main > .rp-sec--scales { grid-column: 1 / span 5; grid-row: span 2; }
  .rp-main > .rp-sec--materials, .rp-main > .rp-sec--moods { grid-column: 6 / span 4; }
  /* The seven rows share the height the two tiles beside them give, so the tile does not end in a blank block. */
  .rp-main > .rp-sec--scales { display: flex; flex-direction: column; }
  .rp-sec--scales > .stack, .rp-sec--scales .rp-scales { flex: 1 1 auto; }
  .rp-sec--scales .rp-scales { justify-content: space-between; }
}

/* The rail: what is in the report, and its two actions. */
.rp-rail { position: sticky; top: calc(var(--sticky-top) + var(--s-4)); }
.rp-rail__tile { display: grid; gap: var(--s-5); }
.rp-toc { display: grid; gap: var(--s-2); }
.rp-toc ol { display: grid; gap: 2px; margin-inline: calc(-1 * var(--s-3)); }
.rp-toc__link {
  display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 var(--s-3);
  border-radius: var(--pill); font: 400 15px/1.3 var(--font); color: var(--ink);
  transition: background .3s var(--ease);
}
.rp-toc__link:focus-visible { border-radius: var(--pill); outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) { .rp-toc__link:hover { background: var(--tile); } }
.rp-rail__actions { display: grid; gap: var(--s-2); }

/* ---------- household comparison ---------- */

.rp-compare { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-tiles); }
.rp-compare > * { min-width: 0; }
/* "Nothing to compare yet": a stone tile as tall as what it says. The mark and the words, then the three
   steps to a comparison as inner tiles, the one the household is at in the accent. */
.rp-compare__off { display: flex; flex-direction: column; gap: var(--s-5); }
.rp-compare__offhead { display: flex; align-items: flex-start; gap: var(--s-4); min-width: 0; }
.rp-compare__offhead p { color: var(--ink-2); }
.rp-steps { display: grid; gap: var(--s-2); }
.rp-steps__item {
  display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: 12px 16px;
  border-radius: var(--r-sm); background: var(--tile); color: var(--ink-2); font: 400 15px/1.4 var(--font);
}
.rp-steps__no {
  flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  background: var(--wash); color: var(--ink-2); font: 600 15px/1 var(--font);
}
.rp-steps__no .icon { width: 14px; height: 14px; stroke-width: 2.25; }
.rp-steps__item.is-done .rp-steps__no { background: var(--ok-wash); color: var(--ok); }
.rp-steps__item.is-now { color: var(--ink); font-weight: 600; }
.rp-steps__item.is-now .rp-steps__no { background: var(--accent); color: var(--on-accent); }
@media (min-width: 900px) { .rp-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); } .rp-steps__item { align-items: flex-start; } }
/* The title of the column stands inside its first tile (the recommendation), over that tile's own heading. */
.rp-compare__head { display: grid; gap: var(--s-2); margin-block-end: var(--s-5); }
.rp-compare__head ~ .sec-head .sec-head__title { font: 600 18px/1.3 var(--font); color: var(--accent-soft); }
/* A shared board of one or two photos: the words, and the photos beside them at a size worth looking at. */
@media (min-width: 600px) {
  .rp-board--few { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-6); align-content: start; align-items: start; }
  .rp-board--few > * { grid-column: 2; }
  .rp-board--few > .pgrid { grid-column: 1; grid-row: 1 / span 4; --cols: var(--few, 1); width: calc(var(--few, 1) * 200px); }
}
.rp-compare__credits { padding-inline: var(--s-2); }

.rp-hhflags li { position: relative; padding-inline-start: 18px; }
.rp-hhflags li::before {
  content: ""; position: absolute; inset-inline-start: 2px; top: .55em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--accent);
}

.rp-shared { display: grid; gap: var(--s-2); }
.rp-shared li {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-2) var(--s-4);
  padding: 14px 16px; border-radius: var(--r-sm); background: var(--ground); min-width: 0;
}
.rp-shared .chip { flex: 1 1 220px; }
@media (min-width: 900px) { .rp-shared { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rp-bubbles { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* Comparison rows: zebra, no lines. A clash is said by its tag. */
.cmp-wrap { min-width: 0; overflow-x: auto; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0 4px; }
.cmp th, .cmp td { padding: 4px var(--s-3); vertical-align: middle; }
.cmp thead th { padding-block: 0 2px; font: 400 14px/1.4 var(--font); color: var(--ink-3); }
.cmp__member { display: inline-flex; align-items: center; gap: 6px; max-width: 140px; }
.cmp__row > * { height: 52px; }
.cmp tbody tr:nth-child(odd) > * { background: var(--ground); }
.cmp tbody tr > :first-child { border-start-start-radius: var(--r-sm); border-end-start-radius: var(--r-sm); }
.cmp tbody tr > :last-child { border-start-end-radius: var(--r-sm); border-end-end-radius: var(--r-sm); }
/* The style name is the row's only control (it opens the evidence): a full 44px touch target. */
.cmp__row > th button.chip { min-height: 44px; }
.cmp__cell .sbar { display: flex; min-width: 84px; }
.cmp__cell .sbar__track { flex: 0 0 40px; }
.cmp__none { font: 400 14px/1.4 var(--font); color: var(--ink-3); }
.cmp__tag { text-align: end; white-space: nowrap; }
@media (max-width: 599.98px) {
  /* Two lines per style: chip and tag, then every member's bubble and bar. */
  .cmp, .cmp tbody { display: block; }
  .cmp thead { display: none; }
  .cmp tbody { display: grid; gap: 6px; }
  .cmp__row {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4);
    padding: 6px 14px 10px; border-radius: var(--r-sm); background: var(--ground);
  }
  .cmp th, .cmp td { padding: 0; }
  .cmp__row > *, .cmp tbody tr:nth-child(odd) > * { height: auto; background: none; }
  .cmp__row > th { order: 1; flex: 1 1 auto; }
  .cmp__tag { order: 2; }
  .cmp__cell { order: 3; display: inline-flex; align-items: center; gap: 6px; }
  .cmp__row::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
}

/* The recommendation, on the dark tile: base, accents, what to avoid. */
.rp-reco { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
.rp-reco__col { display: grid; gap: var(--s-3); align-content: start; justify-items: start; min-width: 0; }
.rp-reco .chip--avoid .chip__name { color: var(--ivory-2); }
@media (min-width: 900px) {
  .rp-reco { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr); column-gap: var(--s-6); }
}

/* Talking points: numbered steps. */
.rp-talk { counter-reset: talk; display: grid; gap: var(--s-4); }
.rp-talk__item { counter-increment: talk; position: relative; min-height: 28px; padding-inline-start: 44px; display: grid; gap: var(--s-1); align-content: start; }
.rp-talk__item::before {
  content: counter(talk); position: absolute; inset-inline-start: 0; top: 0; width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); font: 600 15px/1 var(--font);
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.rp-talk__item > p:first-child { padding-block-start: 2px; }
.rp-talk__bridge { --cols: 4; max-width: 420px; }
@media (min-width: 1280px) { .rp-talk { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); } }

/* ---------- print: the member report (6.3). The shared paper rules are in base.css. ---------- */

.rp-footer { position: fixed; inset-inline: 0; bottom: 0; }
/* The wrapper that reserves the footer's band on paper is no table on screen. */
.rp-sheet, .rp-sheet > tbody, .rp-sheet > tbody > tr, .rp-sheet > tbody > tr > td { display: block; padding: 0; }
.rp-sheet > tfoot { display: none; }

@media print {
  .rp-layout, .rp-main, .rp-portrait, .rp-portrait__side { display: block; }
  /* Room for the running footer on every page: a fixed element repeats per page but reserves nothing,
     a table footer group repeats per page and does. */
  .rp-sheet { display: table; width: 100%; table-layout: fixed; }
  .rp-sheet > tbody { display: table-row-group; }
  .rp-sheet > tbody > tr, .rp-sheet > tfoot > tr { display: table-row; }
  .rp-sheet > tbody > tr > td { display: table-cell; }
  .rp-sheet > tfoot { display: table-footer-group; }
  .rp-sheet__foot { height: 12mm; padding: 0; }
  .rp-footer { display: flex !important; flex-direction: column; gap: 1mm; background: #fff; }
  .rp-top { display: none; }

  /* Black on white: the greys of the screen are not for paper. */
  .rp-report, .rp-report .t-cap, .rp-report .c-ink-2, .rp-report .c-ink-3, .rp-report .stat__cap,
  .rp-report .conf, .rp-report .scale__pole, .rp-report .scale__end, .rp-report .sbar__fig, .rp-report .sbar__range,
  .rp-report .ptile__cap, .rp-report .ptile__credit, .rp-report .mtile__count, .rp-report .mood__count,
  .rp-report .chip__name, .rk__basis, .rk__rank, .rk__head, .rk__lesshead, .rp-credits__title, .rp-credits__no,
  .rp-footer .t-cap { color: #000; }

  /* Page 1 is meant to hold the summary and the first three sections, so everything on it is set tight:
     the seven scales print as two columns of one-line rows. What does not fit simply flows on;
     only the photos are forced onto a new page. */
  .rp-sum { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 6mm; }
  .rp-sum .sum__stats { margin: 0; }
  .rp-sum .stat { padding-block: 0; }
  .rp-sum .stat__val--text { font-size: 10pt; line-height: 13pt; }
  .rp-report .tag { background: none; color: #000; outline: 0.5pt solid #000; outline-offset: -0.5pt; }
  .rp-redbox__title { color: #000; }
  /* The kind of portrait and its one-sentence explanation share a line. */
  .rp-portrait .stack { --gap: 2mm; }
  .rp-portrait .stack--2 { display: block; }
  .rp-persona ~ .t-cap { display: inline; }
  .rp-credits .rp-credits__title { font-size: 9pt; line-height: 13pt; }
  .rk { gap: 1mm; }
  .rp-persona + .t-cap::after { content: ": "; }
  .rp-sec { margin-block-start: 4mm; }
  .rp-report .sec-head { margin-block-end: 2mm; }
  .rp-sec--photos { break-before: page; margin-block-start: 0 !important; }
  .rp-brief { font-size: 10pt; line-height: 15pt; max-width: none; }
  .rp-portrait__side { margin-block-start: 2mm; }
  .rp-redbox { display: flex; flex-wrap: wrap; align-items: center; gap: 1mm 4mm; }
  .rp-redbox__title { font-size: 9pt; line-height: 13pt; }
  .rp-redbox__title .icon { display: none; }
  .rp-redlines { display: flex; flex-wrap: wrap; gap: 1mm 4mm; }
  .rp-redlines li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2mm; }
  .rp-report .rp-scales { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5mm 8mm; }
  .rp-report .scale--named {
    grid-template-columns: 70px 40px minmax(48px, 1fr) 40px minmax(0, auto);
    grid-template-areas: "name neg line pos end"; column-gap: 2mm;
  }
  .rp-report .scale__name { grid-column: auto; grid-area: name; font-size: 9pt; line-height: 13pt; }

  /* Ranking: one 7mm line per style, evidence text kept, the photos behind it left out. */
  .rk__list { gap: 0; }
  .rk__row, .rk__head { display: grid; grid-template-columns: 6mm 60mm minmax(0, 1fr) 20mm 46mm; column-gap: 3mm; }
  .rk__style { flex-wrap: nowrap; gap: 0 1.5mm; }
  .rk__row {
    min-height: 7mm; padding: 0; border-radius: 0; background: none !important; break-inside: avoid;
    grid-template-areas: "rank style pull conf basis";
  }
  .rk__head { padding: 0; }
  .rk__head span:last-child { display: none; }
  .rk__rank { display: block; width: auto; height: auto; margin: 0; align-self: center; background: none !important; font-weight: 400; }
  .rk__note, .rk__note .tag { min-height: 0; padding-block: 0; padding-inline: 1.5mm; font-size: 7pt; line-height: 9pt; }
  .rk__note .icon { display: none; }
  .rk__basis, .rk__rank { font-size: 8.5pt; line-height: 11pt; }
  .rk__less { margin-block-start: 2mm; gap: 1mm; }
  .rk__lesshead { padding: 0; break-after: avoid; }
  .sbar--soft .sbar__fill, .swatch--avoid, .ptile__heart, .rp-verdict { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  .rp-tags li, .rp-flags li { break-inside: avoid; }
  .rp-flags li { padding: 0; padding-inline-start: 4mm; border-radius: 0; background: none; }
  .rp-flags li::before { inset-inline-start: 0; top: 1.4mm; width: 2mm; height: 2mm; }
  .rp-flags__label { font-size: 9pt; line-height: 13pt; }

  /* Photos: 6 per row (18 at most) for loved and liked, 8 per row (16 at most) for rejected; number only. */
  .rp-photos .pgrid { --cols: 6; gap: 1.5mm; }
  .rp-photos__group--disliked .pgrid { --cols: 8; }
  .rp-photos .rp-print-cut { display: none; }
  .rp-photos .ptile__cap span { display: none; }
  .rp-photos .photo img { opacity: 1 !important; }      /* never print a photo caught mid fade-in */
  .rp-photos__head { break-after: avoid; }
  .rp-photos .fact { height: auto; padding: 0; background: none; color: #000; font-size: 8.5pt; }
  .rp-photos .ptile__heart { outline: 0.5pt solid #000; }

  .rp-notes__paper {
    min-height: 24mm; padding: 2mm 3mm; border: 0.5pt solid #000; white-space: normal;
    background-image: repeating-linear-gradient(to bottom, transparent 0 14.5pt, rgba(0,0,0,.25) 14.5pt 15pt);
    line-height: 15pt; font-size: 10pt;
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
}