/* PK2 AI Advisors · fixes
   The /fixes/ index, the two fix pages, and the fixes section on the home
   page. Nothing here is a new component. The cards are .grid-card from
   week-grid.css in the .case-cards grid from case-studies.css; the fix pages
   are the assessment page's own sections from assessment.css. This sheet only
   spaces the few lines those components don't already place.

   No hex value appears in this file. Every value resolves through tokens.css.

   Load order: tokens.css, site.css, then the component sheets the page uses,
   then fixes.css.
*/

/* The line under the cards that points somewhere else: to the Assessment on
   the index, to the index on the home page. Same step the other body-copy
   closers take. */
.fixes-more {
  margin-top: var(--space-5);
  max-width: var(--measure);
}

/* The price on a card reads as a fact, not as more description. It and the
   foot under it sit at the bottom of the card, so when one description runs a
   line longer the two cards still line up price to price and link to link.
   The grid stretches both cards to the same height; the auto margin takes up
   the slack above the price instead of above the foot. */
.case-cards .grid-card-body.fix-card-price {
  margin-top: auto;
  color: var(--ink);
}
.fix-card-price + .grid-card-foot { margin-top: 0; }

/* -------------------------------------------------------- the fix pages -- */

/* The included and need-from-you lists sit in the body column of a split, so
   they start level with the eyebrow beside them rather than one step below
   it, which is where .report-rows puts a list that follows a heading. */
.fix-list { margin-top: 0; }

/* The sample sheet. Built from report-sample.css: the spec rows hold the
   job card's fields and the email's headers, and the rules below set the
   email's own lines and its two drawn buttons. The buttons are spans with no
   href, so they take no pointer and no hover. */
.fix-sample-body > * + * { margin-top: var(--space-2); }

.fix-sample-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.fix-sample-actions > * {
  cursor: default;
  pointer-events: none;
}

/* A long field on the job card wraps under its own right edge rather than
   pushing its label off the left. */
.fix-sample-specs dd { max-width: 70%; }

/* On a phone the value column is too narrow to hold a sentence flush right,
   so each label stacks above its value, both on the left edge. */
@media (max-width: 640px) {
  .fix-sample-specs .rp-spec {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
  .fix-sample-specs .rp-spec + .rp-spec { margin-top: var(--space-3); }
  .fix-sample-specs dd {
    max-width: none;
    text-align: left;
  }
}