/*
 * Audit detail (views/pages/audit-detail.php) — page-specific rules from the
 * approved design's helmet plus the rich-text presentation and the print
 * stylesheet required by html-design/claude-code-notes.md §3.
 * Loaded via $pageContext['page_css'].
 */

/* ---- sticky rail: desktop only (≥1120px, from the design helmet) ---- */
[data-rail] a.rail-link {
  color: #9a9aa2;
}
[data-rail] a.rail-link .rl-num {
  color: #c8c8ce;
  font-weight: 600;
}
[data-rail] a.rail-link.is-active {
  color: var(--color-ink, #0b0b0c);
}
[data-rail] a.rail-link.is-active .rl-num {
  color: var(--color-accent, #ff6333);
}

/* ---- transcript <details>: mark rotates + to × when open ---- */
details[data-transcript][open] summary .t-mark {
  transform: rotate(45deg);
}

/* ---- rich text: executive summary lede paragraphs ---- */
.rt-lede p {
  font-size: 17px;
  line-height: 1.68;
  color: #27272a;
  text-wrap: pretty;
}
.rt-lede p + p {
  margin-top: 20px;
}

/* ---- rich text: problems / recommendations panels (findings idiom) ---- */
.rt-findings h3,
.rt-findings h4 {
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--color-line, #e7e4df);
}
.rt-findings h3:first-child,
.rt-findings h4:first-child {
  padding-top: 0;
  margin-top: 12px;
  border-top: 0;
}
.rt-fixes h3,
.rt-fixes h4 {
  padding-left: 16px;
  border-left: 2px solid var(--color-accent, #ff6333);
}
.rt-findings p,
.rt-findings li {
  margin-top: 7px;
  font-size: 14.5px;
  line-height: 1.6;
  color: #52525b;
  max-width: 56ch;
}
.rt-fixes p,
.rt-fixes li {
  padding-left: 16px;
}
.rt-findings ul,
.rt-findings ol {
  margin-top: 7px;
}

/* ---- rich text: key takeaways as the numbered ledger ---- */
.rt-takeaways ul,
.rt-takeaways ol {
  counter-reset: takeaway;
  display: flex;
  flex-direction: column;
}
.rt-takeaways li {
  counter-increment: takeaway;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--color-line, #e7e4df);
  font-size: 16px;
  line-height: 1.6;
  color: #27272a;
  max-width: 72ch;
  text-wrap: pretty;
}
.rt-takeaways li:last-child {
  border-bottom: 1px solid var(--color-line, #e7e4df);
}
.rt-takeaways li::before {
  content: counter(takeaway, decimal-leading-zero);
  font-family: "Clash Display", sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--color-accent, #ff6333);
  padding-top: 5px;
}

/* ---- rich text: transcript ---- */
.rt-transcript p {
  font-size: 14.5px;
  line-height: 1.7;
  color: #3f3f46;
}
.rt-transcript p + p {
  margin-top: 12px;
}

/* ---- print: expand everything, drop the chrome, flatten the sliders ---- */
@media print {
  /* Nav, rail, CTA band and footer do not print. */
  body > header,
  body > footer,
  [data-rail],
  [data-cookie-banner],
  #audit {
    display: none !important;
  }

  /* Reveal animations must not hide content on paper. */
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Every scorecard row and finding card prints expanded. */
  [data-acc-body],
  [data-accordion-body] {
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
  }

  /* On-screen controls have no meaning in print. */
  [data-print],
  [data-expand-all],
  [data-collapse-all],
  [data-totop],
  [data-acc-mark],
  [data-accordion-mark],
  [data-video-play] {
    display: none !important;
  }

  /* Before/after sliders stack as two static images. */
  [data-compare] {
    aspect-ratio: auto !important;
    cursor: default !important;
    background: #fff !important;
  }
  [data-compare] img {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin-bottom: 8px;
  }
  [data-compare-clip] {
    position: static !important;
    clip-path: none !important;
  }
  [data-compare-handle],
  [data-compare] > span {
    display: none !important;
  }
}