/* Taam — report.css: everything that presents a taste profile or a household comparison.
   Builds on base.css (tokens, shared components). Three parts, then print:
     .res…   the client's result screen (js/ui/screens/result.js)
     .rp-… .rk…   the pieces of Taam.ui.report and the member report page (js/ui/report.js, screens/member.js)
     .cmp… .rp-compare…   the household comparison
   The member report is the page that prints (ux.md 6.3); its paper rules are at the end. */

/* ---------- client result (2.4) ---------- */

.res { display: grid; gap: var(--section-gap) var(--s-7); grid-template-columns: minmax(0, 1fr); }
.res__main { min-width: 0; }
.res__notice { margin-block-end: var(--s-5); }
.res__hero { display: flex; flex-direction: column; gap: var(--s-3); }
.res__hero .dim { max-width: 320px; }
/* The hero is not a .section, so the first section needs its gap spelled out. */
.res__hero + .section { margin-block-start: var(--section-gap); }
.res__traits { display: flex; flex-direction: column; gap: var(--s-1); }
.res__traits li { position: relative; padding-inline-start: 18px; }
/* A short drafting dash instead of a bullet. */
.res__traits li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.8em; width: 10px; height: 1.5px; background: var(--c-ink); }
.res__stale { color: var(--c-trace-ink); background: var(--c-trace-wash); padding: var(--s-2) var(--s-3); border-radius: var(--r-1); }
.res__credits { grid-column: 1 / -1; }
.res__next { min-width: 0; }

/* The client's strength bar has no figure: the length says it. */
.rp-clientbar { display: flex; max-width: 240px; margin-block-start: var(--s-1); }

/* Phone: the primary action stays in reach until the send panel itself is on screen. */
.res__bar {
  position: fixed; z-index: 5; inset-inline: 0; bottom: 0;
  padding: var(--s-3) max(var(--gutter), env(safe-area-inset-right, 0px)) calc(var(--s-3) + env(safe-area-inset-bottom, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
  background: var(--c-board); border-block-start: 1px solid var(--c-rule-strong);
}
@media (max-width: 599.98px) { .res { padding-block-end: calc(var(--btn-h) + var(--s-8)); } }

@media (min-width: 1100px) {
  .res { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
  .res__next { position: sticky; top: calc(var(--hdr-h) + var(--s-4)); }
}

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

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

.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-5); }

.rp-redlines { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }

.rp-flags { display: flex; flex-direction: column; gap: var(--s-3); }
.rp-flags li { display: flex; flex-direction: column; gap: 2px; padding-inline-start: var(--s-3); border-inline-start: 3px solid var(--c-trace); }

/* Verdict mark on an evidence photo: shape and colour both carry it. */
.rp-verdict {
  position: absolute; top: 4px; inset-inline-start: 4px; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-sheet); color: var(--c-ink); border: 1px solid var(--c-ink); border-radius: var(--r-1);
}
.rp-verdict .icon { width: 14px; height: 14px; stroke-width: 2; }
.rp-verdict--like { background: var(--c-blue); color: var(--c-sheet); border-color: var(--c-blue); }
.rp-verdict--love { background: var(--c-trace); }
.rp-verdict--no { color: var(--c-redline); border-color: var(--c-redline); }

/* Style ranking (2.8 section ב). Phone: stacked lines per style; from tablet: one row, six columns. */
.rk { display: flex; flex-direction: column; gap: var(--s-2); }
.rk__head { display: none; }
.rk__less { display: flex; flex-direction: column; gap: var(--s-2); margin-block-start: var(--s-4); }
.rk__row, .rk__head {
  grid-template-columns: 24px minmax(0, 1fr) 44px;
  column-gap: var(--s-3); align-items: center;
}
.rk__row {
  display: grid; row-gap: 2px; padding-block: var(--s-2); border-block-end: 1px solid var(--c-rule);
  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; padding-block-start: 2px; font: 400 0.8125rem/1.375rem var(--font-label); color: var(--c-pencil); }
.rk__style { grid-area: style; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 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 0.8125rem/1.125rem var(--font-label); letter-spacing: 0.02em; color: var(--c-graphite); }
.rk__more { grid-area: more; justify-self: end; }
.rk__photos { grid-area: photos; padding-block: var(--s-3) var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); }
.rk__note {
  font: 700 0.75rem/1rem var(--font-label); letter-spacing: 0.04em; color: var(--c-graphite);
  padding: 1px 6px; border: 1px solid var(--c-rule-strong); border-radius: var(--r-1); white-space: nowrap;
}
.rk__note--red { color: var(--c-redline); border-color: var(--c-redline); }
.rk__toggle .icon { transition: transform var(--t-2) var(--ease-std); transform: rotate(-90deg); }
.rk__toggle.is-open .icon { transform: rotate(90deg); }
@media (min-width: 600px) {
  .rk__row, .rk__head {
    display: grid;
    grid-template-columns: 24px minmax(150px, 1.3fr) minmax(130px, 1fr) 84px minmax(120px, 1fr) 44px;
  }
  .rk__row { min-height: 44px; padding-block: 0; grid-template-areas: "rank style pull conf basis more" "photos photos photos photos photos photos"; }
  .rk__rank { align-self: center; padding: 0; }
  .rk__head { font: 700 0.75rem/1rem var(--font-label); letter-spacing: 0.06em; color: var(--c-pencil); padding-block-end: var(--s-1); border-block-end: 1px solid var(--c-rule-strong); }
}

/* Photo groups (section ו). */
.rp-photos .ptile__hover .chip__name { font-size: 0.8125rem; }

/* ---------- member report page (2.8) ---------- */

.rp-layout { display: grid; grid-template-columns: minmax(0, 860px); gap: var(--s-7); align-items: start; }
.rp-main { min-width: 0; }
.rp-head { margin-block-end: var(--s-3); }
.rp-sec { scroll-margin-top: calc(var(--hdr-h) + var(--s-4)); }
.rp-sec:focus-visible { outline: none; }
.rp-main > .tblock + .rp-sec { margin-block-start: var(--section-gap); }
.rp-brief { font-size: 1.0625rem; line-height: 1.75rem; }
.rp-notes .field__input { background: var(--c-sheet); }

.rp-toc { position: sticky; top: calc(var(--hdr-h) + var(--s-5)); display: flex; flex-direction: column; gap: var(--s-2); }
.rp-toc ol { display: flex; flex-direction: column; border-inline-start: 1px solid var(--c-rule-strong); }
.rp-toc__link {
  display: flex; align-items: baseline; gap: var(--s-2); width: 100%; min-height: 32px; padding: 4px var(--s-3);
  font: 400 0.875rem/1.375rem var(--font-text); color: var(--c-graphite);
}
.rp-toc__link:hover { color: var(--c-ink); text-decoration: underline; text-underline-offset: 3px; }
.rp-toc__letter { flex: none; width: 14px; font: 700 0.75rem/1rem var(--font-label); color: var(--c-ink); }
@media (min-width: 1100px) {
  .rp-layout { grid-template-columns: minmax(0, 860px) minmax(132px, 180px); gap: var(--s-6); }
}

/* ---------- household comparison (2.7) ---------- */

.rp-compare { min-width: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.rp-compare__sec { margin-block-start: var(--s-6); min-width: 0; }
.rp-compare > .t-h2 + .rp-compare__sec { margin-block-start: var(--s-4); }

.rp-shared { display: flex; flex-direction: column; gap: var(--s-4); }
.rp-shared li { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.rp-shared .chip { flex: 1 1 240px; }
.rp-bubbles { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* A verdict that is neither "shared" nor a clash: plain, so the two coloured tags keep their meaning. */
.tag--plain { color: var(--c-graphite); background: var(--c-vellum); }

/* A member who rejected the photo (evidence drawer). Struck through as well, so it survives greyscale. */
.bubble--no { background: var(--c-redline-wash); color: var(--c-redline); border-color: var(--c-redline); text-decoration: line-through; }
.rp-legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.rp-legend__item { display: inline-flex; align-items: center; gap: 6px; }

/* Comparison rows (5.8.11). */
.cmp-wrap { min-width: 0; overflow-x: auto; }
.cmp { width: 100%; }
.cmp th, .cmp td { padding: 6px var(--s-2); vertical-align: middle; }
.cmp thead th { padding-block-end: var(--s-2); border-block-end: 1px solid var(--c-rule-strong); }
.cmp__member { display: inline-flex; align-items: center; gap: 6px; max-width: 120px; font: 400 0.875rem/1.375rem var(--font-text); }
.cmp__row { border-block-end: 1px solid var(--c-rule); height: 44px; }
.cmp__row > th { padding-block: 0; padding-inline-start: var(--s-3); border-inline-start: 3px solid transparent; }
/* The style name is the row's only control (it opens the evidence): a full 44px touch target (5.4). */
.cmp__row > th button.chip { min-height: 44px; }
.cmp__row--clash > th { border-inline-start-color: var(--c-redline); }
.cmp__cell .sbar { display: flex; min-width: 84px; }
.cmp__cell .sbar__track { flex: 0 0 40px; }
.cmp__none { font: 400 0.8125rem/1.125rem var(--font-label); color: var(--c-pencil); }
.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__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-4); height: auto; padding-block: var(--s-2); }
  .cmp th, .cmp td { padding: 0; }
  .cmp__row > th { order: 1; flex: 1 1 auto; padding-inline-start: var(--s-2); }
  .cmp__tag { order: 2; }
  .cmp__cell { order: 3; display: inline-flex; align-items: center; gap: 6px; }
  .cmp__cell:first-of-type { margin-inline-start: var(--s-3); }
  .cmp__row > th::after { content: ""; }
  .cmp__row::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
}

.rp-reco { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 600px) { .rp-reco { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 0.8fr); } }

.rp-talk { counter-reset: talk; display: flex; flex-direction: column; gap: var(--s-4); }
.rp-talk__item { counter-increment: talk; position: relative; padding-inline-start: 28px; display: flex; flex-direction: column; gap: var(--s-1); }
.rp-talk__item::before {
  content: counter(talk); position: absolute; inset-inline-start: 0; top: 2px;
  font: 700 0.8125rem/1.375rem var(--font-label); color: var(--c-pencil);
}
.rp-talk__bridge { --cols: 4; max-width: 360px; }

.rp-hhflags li { position: relative; padding-inline-start: var(--s-4); }
.rp-hhflags li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.75em; width: 8px; height: 1.5px; background: var(--c-trace-ink); }

/* ---------- 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 { 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-head { display: none; }

  .rp-main > .tblock { grid-template-columns: 2fr repeat(var(--cells, 4), minmax(0, 1fr)); }
  .rp-main > .tblock .tblock__main { grid-column: auto; }
  .rp-main > .tblock .tblock__cell:last-child:nth-child(even) { grid-column: auto; }

  .rp-main > .tblock .tblock__main, .rp-main > .tblock .tblock__cell { padding: 1.5mm 3mm; }
  .rp-main > .tblock .tblock__val { font-size: 11pt; line-height: 15pt; }

  /* Page 1 is meant to hold the title block and 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 (section ו) are forced onto a new page. */
  .section + .section, .rp-main > .tblock + .rp-sec { margin-block-start: 5mm; }
  .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-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__row, .rk__head { display: grid; grid-template-columns: 6mm 44mm minmax(0, 1fr) 22mm 52mm; column-gap: 3mm; }
  .rk__row { min-height: 7mm; padding: 0; break-inside: avoid; grid-template-areas: "rank style pull conf basis"; }
  .rk__head span:last-child { display: none; }
  .rk__note { font-size: 7pt; line-height: 9pt; }
  .rk__basis, .rk__rank { font-size: 8.5pt; line-height: 11pt; }
  .rk__less .dim { break-after: avoid; }
  .sbar--hatch .sbar__fill, .swatch--hatch::before, .ptile__flag, .rp-verdict { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  .rp-tags li, .rp-flags li { break-inside: avoid; }

  /* 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__group h3 { break-after: avoid; }
  .rp-photos .ptile__flag { 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;
  }
}