/* ===================================================================
   free.css — the free report's TREATMENT, and its print rules.

   document.css says where things go. This says what they look like in
   the free report: colour, fills, type sizes, air. The deep audit has
   its own sheet, deep.css, re-treating the same structure.

   Contract: feed-check/CLASSES.md. Values: feed-check/tokens.css.
   Colours follow PALETTE-MAP.md's final table, exactly.

   ⚠ THE COLOUR RULE, AND IT HAS NO EXCEPTIONS:
       Blocks of colour with dark ink on top.
       NEVER coloured type on the cream.
   And on a colour fill, ONLY full --ink. --ink-soft and --ink-faint both
   fail on teal and on brown. PALETTE-MAP.md section E.

   ⚠ NO SEVERITY COLOURS. A card is never tinted by how bad it is.
   RULES.md section 3.

   ⚠ PRINT: the free PDF is drawn by WeasyPrint, with Chrome's print as
   the fallback. The print block at the bottom is written for WeasyPrint
   first and checked in Chrome. Print type is in points, set on its own
   terms — tokens.css says so. The page and its margins are in
   document.css; this sheet adds only the page numbers and running head.

   Written 11 September 2026.
   =================================================================== */


/* ============================================ THE REPORT, ON SCREEN ===
   22px body. Signed off on a phone, 6 September.
   ------------------------------------------------------------------- */

/* Hidden until an audit has been drawn. The page adds .on when it draws
   one and removes it for "Check another feed". Scoped to .free: the deep
   audit's root never carries .on, and must always show. */
.document.free:not(.on){ display: none }
.document.free{ padding-top: var(--s-4) }

.document.free{
  font-size: var(--t-body);
  line-height: var(--lh-body);
}

.document.free h1,
.document.free h2,
.document.free h3,
.document.free h4{
  font-weight: 600;
}


/* ================================================ PRINT FURNITURE === */

.print-head{
  font-size: var(--t-label);
  font-weight: var(--w-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--s-2);
}

.print-head-address{
  font-size: var(--t-small);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* "This is an example." It informs, it does not ask — so brown, not
   orange. The lighter brown for blocks with writing: ink on it 8.81:1. */
.example-bar{
  background: var(--brown-fill);
  color: var(--ink);
  font-size: var(--t-small);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  margin-bottom: var(--s-5);
}
.example-bar b{ font-weight: var(--w-label) }


/* ===================================================== THE COVER === */

.cover-kick{
  font-size: var(--t-label);
  color: var(--ink-faint);
}

.cover-title{ font-size: var(--t-show) }

.cover-sub{
  font-size: var(--t-secd);
  color: var(--ink-soft);
}
.cover-sub b{
  color: var(--ink);
  font-weight: var(--w-label);
}


/* ===================================================== SECTIONS ===
   A dark rule under every section heading — except "What this feed gets
   right", whose heading is a solid teal block. That, not a different
   hue, is what marks the good news. PALETTE-MAP.md D1.
   ------------------------------------------------------------------- */

.section-head{
  border-bottom: 2px solid var(--ink);
  padding-bottom: var(--s-2);
}

.section-head h3{ font-size: var(--t-sec) }

.section-count{
  font-size: var(--t-label);
  font-weight: var(--w-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}

.section-note{
  font-size: var(--t-secd);
  color: var(--ink-soft);
}

.section.good > .section-head{
  background: var(--teal);
  border-bottom: 0;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
}
/* On a fill, only full ink. */
.section.good > .section-head .section-count{ color: var(--ink) }


/* ========================================= READ AS · DIRECTORIES === */

.read-as-platform,
.directory-row,
.provenance-line{
  font-size: var(--t-secd);
}

.read-as-platform b{ font-weight: var(--w-label) }

.directory-address{ font-size: var(--t-small) }

.caveat,
.directories-foot{
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.provenance-address{ font-size: var(--t-small) }

/* How your show describes itself — the quoted description, and its note */
.show-desc-text{ font-size: var(--t-secd); color: var(--ink) }
.show-desc-note{ font-size: var(--t-small); color: var(--ink-soft) }


/* ================================================ THE KPI STRIP ===
   The one box that keeps the darker card cream — and the line, like every
   box. Hamish, 11 September.
   ------------------------------------------------------------------- */

/* Six across on a desktop screen at 22px type. The shared rule's 8em minimum
   fitted only five. */
.kpi{ grid-template-columns: repeat(auto-fit, minmax(6.5em, 1fr)) }

.kpi-item{
  background: var(--surface);
  border: var(--edge) solid var(--rule);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
}

.kpi-n{
  font-family: var(--face-head);
  font-size: var(--t-stat);
  font-weight: 600;
}

.kpi-k{
  font-size: var(--t-label);
  font-weight: var(--w-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-faint);
  line-height: 1.3;
}


/* ====================================== WHAT THIS ADDS UP TO ===
   A solid brown block — its own thing, not a continuation of the
   catalogue above it. Teal when nothing is wrong. Everything inside is
   full ink, because nothing quieter passes on a fill.
   ------------------------------------------------------------------- */

.verdict{
  background: var(--brown-fill);
  color: var(--ink);
}
.verdict.good{ background: var(--teal) }

.verdict h3{ font-size: var(--t-find) }

.verdict-line{ font-size: var(--t-lead) }

/* THE NEXT BAR — the route out. Added 18 September 2026, and moved OUT of the
   verdict block the same evening at Hamish's request: it is its own bar between
   the synthesis and "Where the problems sit", not a footer inside a finding.
   Three routes eventually — compare, an example, and upgrade. Two of the three
   have somewhere to point today; the compare page does not exist yet and the
   upgrade page cannot be honest until there is something to buy, so the beta
   offer holds that slot. */
.next-bar{
  background: var(--brown-fill);
  color: var(--ink);
  padding: var(--s-4);
  margin: var(--s-4) 0;
  border-radius: 6px;
}
.next-bar-line{
  font-size: var(--t-body);
  margin: 0 0 var(--s-3);
  max-width: 62ch;
}
.next-bar-btns{
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin: 0;
}
.next-bar-btns .beta-btn{ margin: 0 }

@media print{
  /* Nowhere to click on paper, and it is an offer rather than a finding.
     Standing rule 8: the free report is saved as a PDF, so this is checked. */
  .next-bar{ display: none }
}

.verdict li,
.verdict-calm{
  font-size: var(--t-secd);
}


/* ================================================ THE FINDINGS ===
   The page cream with a thin line round it — Hamish, 11 September. The
   evidence sits on the darker cream inside it, so it still shows. The
   remedy is a solid teal block. No shadow.
   ------------------------------------------------------------------- */

.finding{
  background: var(--ground);
  border: var(--edge) solid var(--rule);
}

/* The category label. TEXT, NOT A BLOCK — Hamish, 11 September. The brown
   fill read as a button and was the loudest thing on the card before the
   title. Now: the heading face at regular weight, larger, uppercase and
   spaced, in full ink. No fill, so ink on the card's cream: 13.63:1.
   Barlow Semi Condensed 400 is already shipped — no new font file. */
.finding-tag{
  font-family: var(--face-head);
  font-weight: 400;
  font-size: var(--t-secd);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--ink);
}

.finding-head h4{ font-size: var(--t-find) }

/* Ink, not teal: teal type fails on cream at any size. */
.finding-count{
  font-family: var(--face-head);
  font-size: var(--t-count);
  font-weight: 600;
  color: var(--ink);
}

.finding-why{ color: var(--ink-soft) }

.finding-where{
  background: var(--surface);
  color: var(--ink-soft);
  font-size: var(--t-secd);
  line-height: 1.5;
  border-radius: var(--radius-inner);
}

.finding-do{
  background: var(--teal);
  color: var(--ink);
  font-size: var(--t-do);
  border-radius: var(--radius-inner);
}


/* ============================ HOW TO CHECK A LINK · LIMITS · FREE ONLY === */

.how-to,
.limits{
  background: var(--ground);
  border: var(--edge) solid var(--rule);
  border-radius: var(--radius);
}

.how-to{ padding: var(--s-4) var(--s-5) }

/* Not the remedy block — it is a <p> too, and grey on teal fails. */
.how-to > p:not(.finding-do){
  max-width: var(--measure);
  color: var(--ink-soft);
}

/* The how-to's remedy still carries its label inside the block. */
.how-to .finding-do b{
  display: block;
  font-size: var(--t-label);
  font-weight: var(--w-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  margin-bottom: var(--s-1);
}

.limits h4{ font-size: var(--t-find) }

.limits p,
.limits li{
  font-size: var(--t-secd);
  color: var(--ink-soft);
}
.limits li b{ color: var(--ink) }

.limits-more{ margin: var(--s-4) 0 0 }


/* =================================================================
   ON PAPER
   WeasyPrint first; Chrome's print is the fallback and must still read.
   Sizes in points. Starting values are the print sheet both reports
   used before 11 September, which was proved on real audits.
   ================================================================= */

/* PAGE NUMBERS AND THE RUNNING HEAD. A page rule cannot read tokens, so
   no colour is set here: page numbers print in plain ink. The show's name
   is carried from .cover-title by string-set — WeasyPrint only; Chrome
   leaves the head blank, which is fine. Not on page one, where the cover
   already says it. */
/* CREAM TO THE EDGE OF THE PAPER. Hamish, 11 September.
   ⚠ The one colour written as a value rather than a token, and why: a page
   rule cannot read tokens. This is --ground from tokens.css. Change that,
   change this. The html rule further down does the same job in Chrome. */
@page{
  background: #F5F0E8;
  @top-left{
    content: string(show-title);
    font-family: "Barlow", sans-serif;
    font-size: 7.5pt;
  }
  @bottom-right{
    content: "Page " counter(page) " of " counter(pages);
    font-family: "Barlow", sans-serif;
    font-size: 7.5pt;
  }
}
@page :first{
  @top-left{ content: none }
}

@media print{

  /* The cream ground prints. WeasyPrint always prints backgrounds; the
     two lines below ask Chrome to as well. */
  html{
    background: var(--ground);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* ⚠ UP FROM 9.9pt ON 14 SEPTEMBER, TODO.md A5 item 4. One pixel, which is
     0.75pt — Hamish's call from the paper proof. Nothing else in this block
     is in pt-of-the-body, so no other size follows it. */
  .document.free{
    font-size: 10.65pt;
    line-height: 1.42;
  }

  .cover-title{ string-set: show-title content() }

  /* ---- furniture ---- */
  .print-head{ font-size: 7.4pt; margin-bottom: 4mm; padding-bottom: 1.5mm }
  .print-head-address{ font-size: 7.4pt }
  .example-bar{ font-size: 8.6pt; padding: 2mm 3mm; margin-bottom: 4mm }

  /* ---- cover ---- */
  .cover{ gap: 4mm; margin-bottom: 5mm }
  .cover-art{ width: 22mm; height: 22mm }
  .cover-kick{ font-size: 7.6pt }
  .cover-title{ font-size: 20pt; line-height: 1.06; margin: 1mm 0 }
  .cover-sub{ font-size: 10pt }

  /* ---- sections ---- */
  .section{ margin-top: 7mm }
  .section-head{ border-bottom-width: 1pt; padding-bottom: 1mm }
  .section.good > .section-head{ padding: 1.5mm 2.5mm }
  .section-head h3{ font-size: 13.5pt }
  .section-count{ font-size: 7.4pt }
  .section-note{ font-size: 8.8pt; margin: 2mm 0 3mm }

  .read-as-platform,
  .directory-row,
  .provenance-line{ font-size: 9.4pt }
  .read-as-label{ font-size: 7.4pt }
  .read-as-url,
  .directory-address,
  .provenance-address{ font-size: 8.4pt }
  .caveat,
  .directories-foot{ font-size: 8.4pt }
  .show-desc-text{ font-size: 9.4pt }
  .show-desc-note{ font-size: 8.4pt }

  /* ---- KPI: six across, because WeasyPrint cannot reflow ---- */
  .kpi{ grid-template-columns: repeat(6, 1fr); gap: 2mm; margin: 5mm 0 }
  .kpi-item{ padding: 2mm 2.5mm }
  .kpi-n{ font-size: 15pt }
  .kpi-k{ font-size: 7pt; margin-top: 1mm }

  /* ---- where the problems sit ---- */
  .dist-row{ grid-template-columns: 52mm 1fr; gap: 4mm; margin-bottom: 1.5mm }
  .dist-label{ font-size: 9.4pt; line-height: 1.3 }
  .dist-bar{ height: 4mm }
  .dist-foot{ font-size: 8.4pt; margin-top: 3mm }

  /* ---- catalogue captions ----
     RULE 3 says at least 10pt, bold. At 15.5mm a tile, "EP. 1,234" in
     Barlow does not fit; in Barlow Semi Condensed it does. */
  .tile-caption{
    font-family: var(--face-head);
    font-size: 10pt;
    letter-spacing: 0;
    padding-top: 1mm;
  }
  .tile-caption.is-date{ font-size: 7pt }

  /* ---- verdict ---- */
  .verdict{ margin: 9mm 0 5mm; padding: 4mm 5mm }
  .verdict h3{ font-size: 12pt; margin-bottom: 2mm }
  .verdict-line{ font-size: 11pt; margin-bottom: 2mm }
  .verdict li,
  .verdict-calm{ font-size: 9.2pt }

  /* ---- findings ---- */
  .finding{ padding: 3mm 3.5mm; margin-bottom: 2mm }
  .finding-tag{ font-size: 9pt; margin-bottom: 1mm }
  .finding-head{ gap: 3mm }
  .finding-head h4{ font-size: 11pt }
  .finding-count{ font-size: 13pt }
  .finding-why{ font-size: 9.4pt; margin-top: 1mm }
  .finding-detail{ margin-top: 1mm }
  .finding-where{ font-size: 8.8pt; padding: 2mm 2.5mm; margin: 2mm 0 }
  .finding-do{ font-size: 9.2pt; padding: 2mm 3mm; margin-top: 2mm }

  /* ---- how-to and limits ---- */
  .how-to{ padding: 4mm 5mm }
  .how-to{ break-inside: avoid }
  .how-to > p:not(.finding-do){ font-size: 9.2pt }
  .how-to .finding-do b{ font-size: 7pt }
  .finding-do-label{ font-size: 7pt; margin-bottom: 1mm }
  .limits{ margin-top: 9mm; padding: 4mm 5mm }
  .limits h4{ font-size: 12pt }
  .limits p,
  .limits li{ font-size: 9pt }

  /* The "See what the deep audit checks" button prints as a plain link.
     A button on paper looks like something to press; the address is still
     worth having. */
  .limits-more a{
    display: inline;
    background: none;
    border: 0;
    padding: 0;
    color: var(--ink);
    font-size: 9pt;
    text-decoration: underline;
  }
}