/* The report document.

   It should read as something commissioned and inspected, not as an article.
   The levers are a cover block with countable facts, a numbered section rail,
   findings with a hard visual start and end, monospace reserved strictly for
   evidence, and almost no horizontal rules. Whitespace and numbering carry the
   structure that rules were carrying before.

   The header is the landing page's own .m-top and .m-top-in, with the section
   nav left out. No header rules live here. */

.r-body { background: var(--m-void); }

/* Labels are set in letterspaced small caps. A hyphen inserted into one reads
   as a rendering fault, so hyphenation is off for every one of them. */
.r-stripe, .r-kicker, .r-secnum, .r-facts dt, .f-label, .f-num, .f-sev,
.f-stamp, .r-verdict span, .r-table thead th, .f-ev-k, .f-ev-v {
  hyphens: manual;
  -webkit-hyphens: manual;
}

/* Grid children default to min-width auto, which lets a long value push past
   the container edge instead of shrinking. The date used to run through the
   right hand border. */
.r-facts > div, .r-tablewrap, .f-ev { min-width: 0; }

/* Document identity. Small, fixed under the header, and the only ornament. */
/* Every micro-label on this page is cyan and every negative state magenta,
   both from the wordmark, so the document reads as the same thing as the
   site rather than a grey template. Grey is left to running copy. */
.r-stripe {
  max-width: var(--m-shell);
  margin: 0 auto;
  padding: 0.7rem var(--m-pad);
  color: var(--m-accent);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--m-hairline);
}

.r-doc {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  padding: 0 var(--m-pad);
}

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

.r-cover { padding: 3rem 0 2.5rem; border-bottom: 1px solid var(--m-hairline-strong); }

.r-kicker {
  color: var(--m-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.r-cover h1 {
  margin-top: 0.85rem;
  font-size: clamp(2rem, 5.5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 680;
  text-wrap: balance;
}

.r-domain { margin-top: 0.5rem; }
.r-domain code { font-size: 0.95rem; }

/* Countable facts. A reader should be able to see the size of the job before
   reading a sentence of it. */
.r-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 2rem;
  background: var(--m-hairline);
  border: 1px solid var(--m-hairline);
}

@media (min-width: 620px) { .r-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Labels wrap to different heights, so the values are pushed to the bottom of
   each cell instead of following the label. Without this the numbers sit on
   four different baselines and the row reads as broken. */
.r-facts > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0.95rem;
  background: var(--m-void);
}

/* One word each, and never hyphenated. hyphens: auto is inherited from body
   and was breaking a letterspaced uppercase label into PAGES IN-SPECTED. */
.r-facts dt {
  color: var(--m-accent);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.35;
  hyphens: manual;
}

.r-date {
  margin-top: 1rem;
  color: var(--m-muted);
  font-size: 0.9rem;
}

.r-facts dd {
  /* auto, not a fixed gap: labels wrap to one, two or three lines and the
     values have to sit on one baseline regardless. */
  margin: auto 0 0;
  padding-top: 0.5rem;
  color: var(--m-ink);
  font-size: 1.35rem;
  font-weight: 660;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* A judgement, not a score. Arbitrary numbers out of 100 are the thing this
   product exists to be the opposite of. */
.r-verdict {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--m-mark-stem);
  border-radius: var(--m-radius);
  color: var(--m-ink);
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.r-verdict span {
  color: var(--m-mark-stem);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.r-anon {
  margin-top: 1.75rem;
  color: var(--m-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* ---------- sections ---------- */

.r-sec { padding-top: 3.25rem; }

/* Numbers magenta, headers cyan. The two wordmark colours carry the rail so
   a reader can find a section by colour before reading a word of it. */
.r-sec > .r-secnum {
  color: var(--m-mark-stem);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
}

.r-sec > h2 {
  color: var(--m-accent);
  margin-top: 0.5rem;
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.r-sec > p {
  margin-top: 0.95rem;
  color: var(--m-muted);
  line-height: 1.65;
}

.r-sec strong { color: var(--m-ink); font-weight: 620; }

/* ---------- rejected automated findings ---------- */

.rej {
  margin-top: 1.5rem;
  padding: 1.15rem 1.25rem;
  border: 1px dashed var(--m-hairline-strong);
  border-radius: var(--m-radius);
}

.rej h3 {
  margin-top: 0.55rem;
  font-size: 1rem;
  font-weight: 640;
  color: var(--m-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-wrap: balance;
}

.rej-claim, .rej-why {
  margin-top: 0.6rem;
  color: var(--m-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

.rej-why .f-label { display: inline; margin-right: 0.4rem; }

.f-stamp {
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--m-mark-stem);
  border-radius: 2px;
  color: var(--m-mark-stem);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ---------- findings ---------- */

.finding {
  margin-top: 1.75rem;
  padding: 1.4rem 1.4rem 1.5rem;
  border: 1px solid var(--m-hairline);
  border-left: 2px solid var(--m-accent);
  border-radius: var(--m-radius);
  background: var(--m-raise);
}

.f-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.f-num {
  color: var(--m-mark-stem);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

.f-sev {
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Impact and effort are separate. Structured data is a moderate problem and a
   very cheap fix, and one chip cannot say both; ranking it High next to the
   location pages implied a size it does not have. Colour carries impact only,
   effort is plain text, so the header stays two chips rather than a dashboard. */
.f-sev-high     { color: var(--m-mark-stem); border: 1px solid var(--m-mark-stem); }
.f-sev-moderate { color: var(--m-muted);     border: 1px solid var(--m-hairline-strong); }
.f-sev-low      { color: var(--m-faint);     border: 1px solid var(--m-hairline); }

.f-effort {
  color: var(--m-faint);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  hyphens: manual;
}

.finding h3 {
  color: var(--m-accent);
  margin-top: 0.7rem;
  font-size: 1.14rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.f-block { margin-top: 1.15rem; }

.f-label {
  color: var(--m-accent);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.f-block p:not(.f-label) {
  margin-top: 0.4rem;
  color: var(--m-muted);
  line-height: 1.65;
}

/* A list of URLs, not prose. Justifying it stretches two paths across the
   column and reports as a runt on every measurement. */
.f-where { display: flex; flex-wrap: wrap; gap: 0.5rem; text-align: left; }

.f-miss { margin-top: 0.55rem; display: grid; gap: 0.35rem; }

.f-miss li {
  position: relative;
  padding-left: 1.15rem;
  color: var(--m-muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

.f-miss li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 1px;
  background: var(--m-mark-stem);
}

/* Evidence is the forensic part. Monospace is reserved for it and for URLs,
   and used nowhere else, so technical material has its own voice. */
.f-evs {
  margin-top: 0.55rem;
  display: grid;
  gap: 1px;
  background: var(--m-hairline);
  border: 1px solid var(--m-hairline);
}

.f-ev {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  background: var(--m-void);
}

.f-ev-k { color: var(--m-accent); font-size: 0.86rem; }

.f-ev-v {
  color: var(--m-ink);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

.f-note {
  margin-top: 1.15rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--m-hairline);
  color: var(--m-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* ---------- lists ---------- */

.r-short, .r-order { margin-top: 1.4rem; display: grid; gap: 0.85rem; counter-reset: s; }

.r-short li, .r-order li {
  position: relative;
  padding-left: 2.1rem;
  color: var(--m-muted);
  line-height: 1.6;
}

.r-short li::before, .r-order li::before {
  counter-increment: s;
  content: counter(s, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.1em;
  color: var(--m-accent);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.r-order li span { color: var(--m-ink); font-weight: 620; }

/* ---------- tables ---------- */

.r-tablewrap { margin-top: 1.4rem; overflow-x: auto; border: 1px solid var(--m-hairline); }

.r-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }

.r-table th, .r-table td {
  padding: 0.6rem 0.8rem;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--m-hairline);
}

.r-table thead th {
  color: var(--m-accent);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  background: var(--m-void-deep);
}

.r-table tbody th { color: var(--m-ink); font-weight: 600; }
.r-table tbody td { color: var(--m-muted); font-variant-numeric: tabular-nums; }
.r-table tbody tr:last-child th, .r-table tbody tr:last-child td { border-bottom: 0; }

.r-table .is-client th, .r-table .is-client td {
  background: var(--m-raise-2);
  color: var(--m-ink);
  font-weight: 620;
}

.r-matrix td { font-size: 0.82rem; }
.c-pass { color: var(--m-muted); }
.c-missing { color: var(--m-mark-stem); }
.c-needs-work { color: var(--m-mark-stem); }
.c-na { color: var(--m-faint); }

/* ---------- close ---------- */

.r-attest {
  margin-top: 3.25rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--m-hairline);
  color: var(--m-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

.r-cta {
  max-width: 46rem;
  margin: 3rem auto 0;
  padding: 1.75rem var(--m-pad) 3.5rem;
  border-top: 1px solid var(--m-hairline-strong);
  text-align: center;
}

.r-cta h2 { color: var(--m-accent); font-size: 1.35rem; font-weight: 650; text-wrap: balance; }

.r-cta p {
  max-width: 32rem;
  margin: 0.8rem auto 0;
  color: var(--m-muted);
}

.r-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1.5rem; }

/* Monospace is for evidence, URLs and markup. Nowhere else. */
.r-doc code {
  padding: 0.12em 0.4em;
  border: 1px solid var(--m-hairline);
  border-radius: 2px;
  background: var(--m-void-deep);
  color: var(--m-ink);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.86em;
  word-break: break-all;
}

/* Every block of running copy is justified, and nothing is hyphenated.

   Without hyphenation a justified line can only be evened by stretching word
   spaces, so the copy has to do the work instead: any block whose last line
   came up short was rewritten until it filled, checked by measuring the
   rendered line rather than by eye.

   That only holds if the column is a fixed width, and it is. .r-doc caps at
   46rem, so at any viewport of 800px or more the column is exactly 736px and
   the line breaks are identical. Copy tuned once is tuned for every desktop
   width. Justification therefore starts at 800px rather than 600: between
   those two the column is still growing, so tuned copy would break, and below
   600 a 45-character column cannot carry justification at all. Ragged right
   there has no runt to fix. */
.r-doc, .r-cta { hyphens: manual; -webkit-hyphens: manual; }

@media (min-width: 800px) {
  .r-sec > p,
  .f-block p:not(.f-label):not(.f-where),
  .rej-claim,
  .rej-why,
  .r-anon,
  .r-attest,
  .f-note,
  .r-short li,
  .r-order li,
  .f-miss li,
  .r-cta p {
    text-align: justify;
    text-justify: inter-word;
  }

  .r-doc h1, .r-sec > h2, .finding h3, .rej h3, .r-cta h2 { text-align: left; }
  .r-cta h2, .r-cta p { text-align: center; }
}

/* Hyphenation exists to keep justified lines even. On a ragged block it breaks
   a word for nothing, which is how the cover note read "including sec-tion 02"
   with a flush left right edge that never needed the help. */
.r-doc, .r-cta { hyphens: manual; -webkit-hyphens: manual; }

.is-justified { hyphens: auto; -webkit-hyphens: auto; }

@media (min-width: 600px) {
  .r-doc h1, .r-sec > h2, .finding h3, .rej h3 { text-align: left; }
}