/* ==========================================================
   Thoroughbred Intelligence: client report stylesheet
   ----------------------------------------------------------
   Loaded ONLY by pages in /reports/. Every report page links
   ../styles.css first (fonts, tokens, base, table.data) and
   then this file. Nothing here belongs in styles.css and
   nothing here is used by the public site.

   Report pages are unlisted documents, not site pages. They
   carry no site nav, no footer nav and no subscribe block.
   ========================================================== */

/* ---------- Report-only tokens ---------- */
:root {
  --report-wrap: 1240px;
  --report-col: 760px;
  --confid: #16211B;
}

/* ---------- Confidential bar ---------- */
.confid-bar {
  background: var(--confid);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 0;
}
.confid-bar .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 24px;
  width: min(100% - 48px, var(--report-wrap));
}
.confid-bar span { display: block; }
.confid-bar .confid-ref {
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #A9BCB3;
}

/* ---------- Masthead ---------- */
.report-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.report-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  min-height: 92px;
  width: min(100% - 48px, var(--report-wrap));
}
.report-brand { display: flex; align-items: center; }
.report-brand img { width: auto; height: 52px; }
.report-kind {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slate);
  text-align: right;
}
.report-kind span {
  display: block;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: none;
  font-size: 13px;
  color: var(--muted);
  margin-top: 5px;
}

/* ---------- Page shell ---------- */
.report {
  width: min(100% - 48px, var(--report-wrap));
  margin-inline: auto;
  padding: 56px 0 96px;
}

/* Sidebar contents on wide screens, stacked everywhere else */
.report-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
@media (min-width: 1080px) {
  .report-layout {
    grid-template-columns: 216px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
  }
}

.report-body { max-width: var(--report-col); }

/* ---------- Cover block ---------- */
.report-cover { margin-bottom: 48px; }

.report-eyebrow {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 16px;
}
.report-eyebrow::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--gold);
  margin-bottom: 16px;
}

.report-cover h1 {
  font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.022em;
  margin: 0 0 14px;
  max-width: 18ch;
}
.report-cover .hip {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.34em;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 10px;
}

.report-sub {
  font-size: 1.28rem;
  line-height: 1.5;
  color: var(--slate);
  max-width: 46ch;
  margin: 0 0 8px;
}

.report-credit {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  margin: 28px 0 0;
  padding-top: 16px;
}
.report-credit strong { color: var(--ink); font-weight: 600; }

/* ---------- Lot identification card ---------- */
.lot-card {
  background: var(--mist);
  border-radius: 6px;
  padding: 26px 30px;
  margin: 0 0 44px;
  font-family: var(--font-ui);
}
.lot-card h2 {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 18px;
}
.lot-card dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px 32px;
  margin: 0;
}
.lot-card dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: 3px;
}
.lot-card dd {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

/* ---------- Contents ---------- */
.report-toc {
  font-family: var(--font-ui);
  font-size: 14px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  margin: 0 0 44px;
}
.report-toc h2 {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.report-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
}
.report-toc li { margin: 0 0 9px; counter-increment: toc; }
.report-toc a {
  display: flex;
  gap: 10px;
  color: var(--slate);
  text-decoration: none;
  line-height: 1.35;
}
.report-toc a::before {
  content: counter(toc, decimal-leading-zero);
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.report-toc a:hover { color: var(--green-deep); }
.report-toc a[aria-current="true"] { color: var(--ink); font-weight: 600; }

@media (min-width: 1080px) {
  .report-toc {
    position: sticky;
    top: 32px;
    margin: 0;
    border-top: 2px solid var(--ink);
    padding-top: 18px;
  }
}

/* ---------- Video ---------- */
.report-video { margin: 0 0 44px; }
.report-video .video-frame {
  border-radius: 6px;
  box-shadow: 0 24px 48px -30px rgba(22, 33, 27, 0.55);
  background: var(--ink);
}
.report-video figcaption {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 12px;
}
.report-video .video-label {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 12px;
}

/* ---------- Conformation photo ---------- */
.report-photo { margin: 0 0 44px; }
.report-photo img {
  width: 100%;
  border-radius: 6px;
  border: 1px solid var(--rule);
}
.report-photo figcaption {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 10px;
}

/* ---------- Report prose ---------- */
.report-prose { font-size: 1.1875rem; line-height: 1.68; }
.report-prose > section { scroll-margin-top: 24px; }

.report-prose h2 {
  font-size: 1.7rem;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
  padding-top: 26px;
  border-top: 2px solid var(--ink);
}
.report-prose section + section h2 { margin-top: 56px; }
.report-prose h3 {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 2em 0 0.6em;
}
.report-prose p { margin: 0 0 1.05em; }
.report-prose ul, .report-prose ol { padding-left: 1.2em; margin: 0 0 1.05em; }
.report-prose li { margin-bottom: 0.45em; }

/* The one-sentence finding that opens a section */
.finding {
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--ink);
  border-left: 3px solid var(--green);
  padding: 2px 0 2px 20px;
  margin: 0 0 1.4em;
}
.finding strong { font-weight: 600; }

/* An emphasised phrase inside body prose */
.report-prose .key { font-weight: 600; color: var(--ink); }

/* Amber-ruled block for a risk, caveat or uncertainty */
.caveat {
  border-left: 3px solid var(--gold);
  padding-left: 18px;
  margin: 1.8em 0;
}
.caveat p:last-child { margin-bottom: 0; }

/* Grey panel for scope notes and method statements */
.scope-panel {
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
  background: var(--mist);
  border-radius: 6px;
  padding: 18px 22px;
  margin: 1.8em 0;
}
.scope-panel p:last-child { margin-bottom: 0; }
.scope-panel strong { color: var(--ink); }

/* ---------- Metric strip ---------- */
ul.metrics,
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  list-style: none;
  margin: 1.8em 0;
  padding: 0;
  font-family: var(--font-ui);
}
ul.metrics li,
.metrics li {
  background: var(--paper);
  padding: 18px 20px;
  margin: 0;
}
.metrics .metric-value {
  display: block;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.metrics .metric-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin-top: 7px;
  line-height: 1.35;
}

/* ---------- Projection summary ---------- */
.projection {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--green);
  border-radius: 6px;
  padding: 30px 32px;
  margin: 1.8em 0;
  box-shadow: 0 22px 44px -32px rgba(22, 33, 27, 0.45);
}
.projection h3 {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 16px;
}
.projection dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 12px 28px;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
}
.projection dt { color: var(--slate); }
.projection dd { margin: 0; font-weight: 600; color: var(--ink); }
@media (max-width: 560px) {
  .projection dl { grid-template-columns: 1fr; gap: 3px 0; }
  .projection dd { margin-bottom: 12px; }
}

/* ---------- Tables inside a report ---------- */
.report-prose .table-wrap { overflow-x: auto; margin: 1.8em 0; }
.report-prose table.data { font-size: 14px; }

/* styles.css gives every th the heavy 2px rule, which is right for a column
   header and wrong for a row header. Row headers get the ordinary row rule. */
table.data tbody th {
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
}

.table-note {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 8px;
}

/* ---------- Basis and limitations ---------- */
.report-basis {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  margin-top: 64px;
  padding-top: 22px;
}
.report-basis h2 {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 10px;
}
.report-basis p { margin: 0 0 0.9em; }
.report-basis p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.report-footer {
  border-top: 1px solid var(--rule);
  padding: 26px 0 40px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--muted);
}
.report-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  width: min(100% - 48px, var(--report-wrap));
}
.report-footer p { margin: 0; }
.report-footer a { color: var(--slate); }
.report-footer a:hover { color: var(--green-deep); }

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .report-header .wrap { min-height: 74px; padding: 14px 0; }
  .report-brand img { height: 36px; }
  .report-kind { text-align: left; font-size: 11px; }
  .report { padding: 36px 0 64px; }
  .lot-card { padding: 22px; }
  .projection { padding: 24px 22px; }
  .report-prose { font-size: 1.125rem; }
  .finding { font-size: 1.15rem; }
}

/* ---------- Print: the report is also the PDF ---------- */
@media print {
  @page { margin: 16mm 14mm 18mm; }

  body { font-size: 10.5pt; line-height: 1.45; background: #fff; }

  .confid-bar {
    background: #fff !important;
    color: #16211B !important;
    border-bottom: 1px solid #D5E1DB;
    padding: 0 0 6pt;
  }
  .confid-bar .confid-ref { color: #6B766F !important; }
  .confid-bar .wrap,
  .report-header .wrap,
  .report-footer .wrap,
  .report { width: 100%; }

  .report-header { border-bottom: 1.5pt solid #16211B; }
  .report-brand img { height: 34pt; }
  .report { padding: 18pt 0 0; }

  .report-layout { display: block; }
  .report-toc { display: none; }
  .report-body { max-width: none; }

  .report-video { display: none; }
  .report-video-print-note { display: block !important; }

  .report-photo { break-inside: avoid; page-break-inside: avoid; }
  .report-photo img { max-height: 110mm; object-fit: contain; border: 0.5pt solid #D5E1DB; }

  .report-cover h1 { font-size: 24pt; }
  .report-sub { font-size: 12pt; }
  .report-prose { font-size: 10.5pt; }
  .report-prose h2 {
    font-size: 14pt;
    break-after: avoid;
    page-break-after: avoid;
    border-top: 1.2pt solid #16211B;
    padding-top: 10pt;
  }
  .report-prose section + section h2 { margin-top: 20pt; }
  .report-prose section { break-inside: auto; }

  .finding, .projection, .metrics, .lot-card, .scope-panel, .caveat, table.data {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .projection, .metrics { box-shadow: none; }
  .lot-card, .scope-panel, .metrics li { background: #EDF5F1 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  a { color: #16211B; text-decoration: none; }
  .report-footer { border-top: 0.5pt solid #D5E1DB; padding: 10pt 0 0; }
}

.report-video-print-note { display: none; }


/* =======================================================================
   PUBLIC SAMPLE MEMOS
   The private client copies under /reports/ do not carry this. These pages
   are public marketing, so they need a route back into the site.
   ======================================================================= */
.sample-nav {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  font-family: var(--font-ui);
  font-size: 13px;
}
.sample-nav .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px 24px;
  padding-top: 11px;
  padding-bottom: 11px;
}
.sample-nav p { margin: 0; }
.sample-crumbs { color: var(--muted); }
.sample-crumbs a { color: var(--green-deep); text-decoration: none; }
.sample-crumbs a:hover { text-decoration: underline; }
.sample-crumbs span[aria-hidden] { padding: 0 4px; color: var(--field); }
.sample-links { display: flex; gap: 18px; }
.sample-links a { color: var(--slate); text-decoration: none; }
.sample-links a:hover { color: var(--green-deep); text-decoration: underline; }

@media (max-width: 620px) {
  .sample-nav .wrap { flex-direction: column; align-items: flex-start; }
  .sample-links { gap: 14px; flex-wrap: wrap; }
}

@media print {
  .sample-nav { display: none; }
}