/* PK2 AI Advisors · the sample report
   Layout only, for /assessment/sample/ and for the two report pages embedded
   in the deliverable section of /assessment/. Every colour, size, and spacing
   value resolves through tokens.css, and the type, grounds, labels, and
   hairlines all come from site.css.

   Load order: tokens.css, site.css, the page's own sheet, report-sample.css.

   The one idea here: a report page is a sheet. White ground, hairline edge,
   generous padding, a footer strip that carries the page number and the notice
   that none of the numbers are real. Two of the nine take slate, three carry a
   gold block, the same way the owner's template does.

   No hex value appears in this file.
*/

/* ---------------------------------------------------------- the notice -- */

/* Said once at the top of the page and again on every sheet. The gold wash and
   the rule are the whole treatment: it is a note, not a warning. */
.sample-notice {
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--gold-soft);
  border-left: var(--strike) solid var(--gold);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--size-mono);
  line-height: 1.5;
}

/* ------------------------------------------------------------- the stack -- */

/* The intro section above already carries its own bottom step, so the stack
   opens flush and only pays the gap between sheets. */
.report-stack-section { padding-top: 0; }

.report-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.report-page {
  padding: var(--space-6) var(--space-5);
  background: var(--sheet);
  border: var(--hair) solid var(--hairline);
}

/* .ground-ink loads before this sheet, so the slate pages take their ground
   back here rather than losing it to .report-page. */
.report-page.ground-ink {
  background: var(--ink);
  border-color: var(--hairline-inv);
}

/* One flow rule for the inside of a sheet: the eyebrow sits tight to the
   title, everything after it takes a full step, and the footer strip takes
   the largest one. */
.report-page > * + * { margin-top: var(--space-5); }
.report-page > .report-title { margin-top: var(--space-eyebrow); }
.report-page > .report-page-foot { margin-top: var(--space-6); }

.report-prepared {
  font-size: var(--size-body-lg);
  color: var(--text);
}

/* The footer strip. The page number and the notice, ruled off from the page. */
.report-page-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-3);
  border-top: var(--hair) solid var(--hairline);
}

.report-page.ground-ink .report-page-foot { border-top-color: var(--hairline-inv); }

.rp-page-num {
  color: var(--gold-text);
  letter-spacing: 0.08em;
}

.report-page.ground-ink .rp-page-num { color: var(--gold); }

.rp-page-note {
  line-height: 1.4;
  color: var(--text-muted);
}

.report-page.ground-ink .rp-page-note { color: var(--muted-inv); }

/* ------------------------------------------------------ shared furniture -- */

/* Cream card. The one container the report uses for a named block of copy. */
.rp-card {
  padding: var(--space-4);
  background: var(--paper-2);
}

.rp-card > * + * { margin-top: var(--space-2); }

.rp-card-body { font-size: var(--size-small); line-height: 1.6; }

.rp-cards {
  display: grid;
  grid-template-columns: repeat(var(--rp-cols, 2), minmax(0, 1fr));
  gap: var(--space-4);
}

.rp-cards-3 { --rp-cols: 3; }

/* Gold block. The figure the page is built around. */
.rp-gold {
  padding: var(--space-5);
  background: var(--gold);
  color: var(--on-gold);
}

.rp-gold > * + * { margin-top: var(--space-2); }
.rp-gold .label,
.rp-gold p { color: var(--on-gold); }

.rp-figure {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: var(--size-display-lg);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}

.rp-gold-line {
  font-size: var(--size-body-lg);
  line-height: 1.4;
}

.rp-gold-note {
  font-size: var(--size-small);
  line-height: 1.5;
}

/* A mono aside under a page's content: assumptions, prices, the arithmetic. */
.rp-footnote {
  max-width: var(--measure-lead);
  line-height: 1.5;
}

/* ------------------------------------------------------------ 01 cover -- */

.rp-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--hair) solid var(--hairline);
}

.rp-meta-value {
  margin-top: var(--space-2);
  font-size: var(--size-small);
  line-height: 1.5;
  color: var(--ink);
}

/* ------------------------------------------- 03 impact vs. effort matrix -- */

/* Three columns: the vertical axis labels, then the two quadrant columns. The
   last row carries the horizontal axis under them. */
.rp-matrix {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
}

.rp-axis-y { align-self: center; }
.rp-axis-x { text-align: center; }

.rp-quad {
  padding: var(--space-4);
  background: var(--paper-2);
}

.rp-quad > * + * { margin-top: var(--space-2); }

.rp-quad-gold {
  background: var(--gold);
  color: var(--on-gold);
}

.rp-quad-gold .label { color: var(--on-gold); }

.rp-quad-caption {
  font-size: var(--size-small);
  line-height: 1.5;
}

.rp-quad-list {
  padding-left: var(--space-4);
  font-size: var(--size-small);
  line-height: 1.6;
}

/* The six wins, named on the quadrant they sit in. White chips, because the
   only thing that reads cleanly on a gold fill is the sheet itself. */
.rp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
}

.rp-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--sheet);
  color: var(--ink);
  font-size: var(--size-small);
  line-height: 1.3;
}

.rp-chip-num {
  font-size: var(--size-label);
  color: var(--gold-text);
}

/* -------------------------------------------------------- 04 quick wins -- */

.rp-wins {
  list-style: none;
  border-top: var(--hair) solid var(--hairline);
}

.rp-win {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr) max-content;
  gap: var(--space-3) var(--space-4);
  align-items: baseline;
  padding-block: var(--space-4);
  border-bottom: var(--hair) solid var(--hairline);
}

.rp-win-num { color: var(--text-muted); }

.rp-win-problem,
.rp-win-fix {
  font-size: var(--size-small);
  line-height: 1.6;
}

.rp-win-fix { color: var(--ink); }

.rp-win-arrow { color: var(--gold-text); }

.rp-win-back {
  text-align: right;
  white-space: nowrap;
  color: var(--gold-text);
}

.rp-wins-total {
  font-size: var(--size-small);
  line-height: 1.6;
  max-width: var(--measure-lead);
}

/* ------------------------------------------------ 05 recommended solutions -- */

.rp-tool > * + * { margin-top: var(--space-2); }

.rp-tool-num { color: var(--gold-text); }

.rp-specs {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--hair) solid var(--hairline);
}

.rp-spec {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.rp-spec + .rp-spec { margin-top: var(--space-1); }

.rp-spec dd {
  text-align: right;
  color: var(--ink);
}

/* ------------------------------------------------------ 06 the 4-day plan -- */

.rp-days {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
}

.rp-day {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-3);
  border-top: var(--hair) solid var(--hairline-inv);
}

.rp-day > * + * { margin-top: var(--space-2); }

.rp-day-num {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: var(--size-display-lg);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: lining-nums tabular-nums;
}

.rp-day-body {
  font-size: var(--size-small);
  line-height: 1.6;
}

/* Only ever set on the slate page, so it takes the inverse muted directly.
   The four tool lines sit on one baseline at the foot of the columns, whatever
   the day's copy runs to. */
.rp-day-tool {
  margin-top: auto;
  padding-top: var(--space-3);
  color: var(--muted-inv);
}

/* -------------------------------------------------- 07 after quick wins -- */

.rp-next {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
}

.rp-next-item {
  padding-top: var(--space-3);
  border-top: var(--hair) solid var(--hairline);
}

.rp-next-num {
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: var(--size-display-lg);
  line-height: 1;
  color: var(--gold-text);
  font-variant-numeric: lining-nums tabular-nums;
}

.rp-next-body {
  font-size: var(--size-small);
  line-height: 1.6;
}

/* ---------------------------------------------------- 08 financial impact -- */

.rp-money {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4);
}

/* The block stretches to the height of the three cards beside it, so its
   contents centre in it rather than sitting at the top of a gold field. */
.rp-money-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rp-money-side {
  display: grid;
  align-content: start;
  gap: var(--space-4);
}

.rp-money-value {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 600;
  font-size: var(--size-h3);
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}

/* ---------------------------------------------------------- 09 next steps -- */

.rp-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
}

.rp-step {
  padding-top: var(--space-3);
  border-top: var(--hair) solid var(--hairline-inv);
}

.rp-step-body {
  margin-top: var(--space-2);
  font-size: var(--size-body);
  line-height: 1.6;
}

/* The template's booking bar. Type on a gold fill, with no href behind it:
   there is nothing to book on a sample, so there is nothing to tab to. */
.rp-cta {
  padding: var(--space-4) var(--space-5);
  background: var(--gold);
}

.rp-cta-text {
  color: var(--on-gold);
  font-weight: 500;
  font-size: var(--size-body-lg);
  line-height: 1.3;
}

.rp-cta-note {
  color: var(--muted-inv);
}

.report-page > .rp-cta-note { margin-top: var(--space-2); }

/* ------------------------------------------------- embedded on /assessment/ -- */

/* The deliverable section renders pages 02 and 08 inline. They are capped at
   the lead's column and centred under the section head, so the two sheets read
   as an object on the page rather than as the page itself. */
.deliverable-sample {
  max-width: var(--measure-lead);
  margin-top: var(--space-heading);
  margin-inline: auto;
}

.deliverable-sample .sample-notice { margin-top: 0; }
.deliverable-sample-pages { margin-top: var(--space-5); }
.deliverable-sample-link { margin-top: var(--space-5); }

/* --------------------------------------------------------------- closer -- */

/* The closing block's internal rhythm. Restated here because this page loads
   tokens, site, and this sheet and nothing else, and the two steps live in
   the assessment page's own sheet. */
.closer-action { margin-top: var(--space-5); }
.closer-micro  { margin-top: var(--space-3); }

/* --------------------------------------------------------------- narrow -- */

@media (max-width: 1024px) {
  .rp-days,
  .rp-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .rp-cards-3 { --rp-cols: 2; }

  /* Five columns is four columns of copy at this width. The number keeps its
     own column and the problem, the fix, and the minutes stack beside it.
     Placement is explicit, because dropping the arrow out of the flow would
     otherwise land the fix in the column the arrow was sized for. */
  .rp-win {
    grid-template-columns: max-content minmax(0, 1fr);
    row-gap: var(--space-2);
  }
  .rp-win-num     { grid-column: 1; grid-row: 1 / span 3; }
  .rp-win-problem { grid-column: 2; grid-row: 1; }
  .rp-win-arrow   { display: none; }
  .rp-win-fix     { grid-column: 2; grid-row: 2; font-weight: 500; }
  .rp-win-back    { grid-column: 2; grid-row: 3; text-align: left; }
}

@media (max-width: 640px) {
  .report-page { padding: var(--space-5) var(--space-4); }

  .rp-cards,
  .rp-days,
  .rp-meta,
  .rp-next,
  .rp-steps,
  .rp-money { grid-template-columns: minmax(0, 1fr); }

  .rp-cards-3 { --rp-cols: 1; }

  /* The matrix stops being a matrix on a phone. Each quadrant already names
     its own position in words, so the axis labels go and the four blocks
     read down the page in the order the report ranks them. */
  .rp-matrix { grid-template-columns: minmax(0, 1fr); }
  .rp-axis { display: none; }

  .rp-win {
    display: block;
    padding-block: var(--space-3);
  }
  .rp-win > * + * { margin-top: var(--space-2); }
  .rp-win-fix  { font-weight: 500; }
  .rp-win-back { text-align: left; }
}

/* ---------------------------------------------------------------- print -- */

/* The sheets are already pages. Printed, each one takes a page of its own and
   keeps its ground: a slate page that prints white is a different document. */
@media print {
  .site-header,
  .site-footer,
  .skip-link { display: none; }

  body,
  .report-page,
  .rp-card,
  .rp-quad,
  .rp-gold,
  .rp-chip,
  .rp-cta,
  .section-closer {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .report-page {
    padding: var(--space-4);
    break-before: page;
    page-break-before: always;
    break-inside: avoid;
  }

  /* Printed, the stack's gap is the page break. */
  .report-stack { gap: 0; }

  .report-stack > .report-page:first-child {
    break-before: auto;
    page-break-before: auto;
  }
}