/* The report is a document, not a page of the site.
   It carries its own palette scoped to .doc and does NOT follow the theme:
   this is meant to be printed, forwarded, and attached to an email, and a
   document has one appearance. Geist for prose, Geist Mono for measured data,
   and the wordmark is the only pixel type on the page.
   No green anywhere, and the verdict headline is ink, not an accent. */

.doc {
  --paper: #ffffff;
  --ground: #f4f4f1;
  --raised: #fafaf8;
  --ink: #17171b;
  --muted: #56565f;
  --line: #c4c4bc;
  /* A technical document reads on its rules. Block frames, dividers and table
     outlines are near-black; only in-table row separators stay a hairline. */
  --rule: #17171b;

  /* The real VGA accents, used as FILLS with near-black text on them. As text
     on paper they are unreadable: #00ff66 is 1.5:1 and #00e5ff is 1.6:1 on
     white. So each hue has two values, and the rule is absolute:
     bright = a filled chip or a bar, dark = anything set as text. */
  --critical: #ff00ff;
  --high: #ffe800;
  --medium: #00e5ff;
  --clean: #00ff66;

  --critical-ink: #9c0074;
  --high-ink: #7a4a00;
  --medium-ink: #005263;
  --clean-ink: #00682a;

  --on-bright: #08080c;

  background: var(--ground);
  color: var(--ink);
  font-family: 'Geist', system-ui, sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  font-variant-ligatures: normal;
}
.doc::before { display: none; }

.doc code,
.doc .num,
.doc .score,
.doc table,
.doc .tl-ms,
.doc .rpt-meta dd { font-family: 'Geist Mono', ui-monospace, monospace; }

.doc a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ------------------------------------------------------------- sample bar */

.sample-bar {
  background: var(--raised);
  border-bottom: 1px solid var(--line);
  padding: 0.9rem var(--gutter);
}
.sample-bar p { max-width: 900px; margin: 0 auto; font-size: 13px; color: var(--muted); }
.sample-bar b { color: var(--ink); font-weight: 600; }

.sheet {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) 5rem;
}

/* --------------------------------------------------------- bordered block */

/* One hairline grid: the container is the line colour and each cell paints
   over it, so every divider is exactly 1px and every cell is exactly equal. */
.block {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  /* ul/dl bring their own padding; without this the container colour shows
     as a bar down the left of the block. */
  margin: 0;
  padding: 0;
}
.block > * { background: var(--paper); padding: 0.85rem 1rem 0.9rem; margin: 0; }

/* ---------------------------------------------------------------- masthead */

.rpt-head { margin-bottom: 1.75rem; }
.rpt-head .mark { color: var(--ink); }
.rpt-kind {
  margin: 0.3rem 0 1.1rem;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.rpt-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px) {
  /* Columns at least as wide as their content, otherwise equal, so no value
     is ever hyphenated across two lines. */
  .rpt-meta { grid-template-columns: repeat(3, minmax(max-content, 1fr)); }
}
.rpt-meta dt {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.rpt-meta dd {
  margin: 0.3rem 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  white-space: nowrap;
}

/* ----------------------------------------------------------------- verdict */

.step-label {
  margin: 0 0 0.6rem;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.verdict-block { padding: 2.25rem 0 2.5rem; border-bottom: 1px solid var(--line); }
/* Label and severity sit on one line. Stacking eyebrow, chip and headline put
   three things above the sentence that matters. */
.verdict-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.1rem;
}
.verdict-head .step-label { margin: 0; }
.verdict-block h1 {
  font-family: inherit;
  font-size: clamp(1.6rem, 3.6vw, 2.35rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 1rem;
  max-width: 22ch;
}
.severity {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border: 1px solid currentColor;
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.severity.critical { background: var(--critical); color: var(--on-bright); border-color: var(--critical); }
.severity.medium { background: var(--medium); color: var(--on-bright); border-color: var(--medium); }
.severity.clean { background: var(--clean); color: var(--on-bright); border-color: var(--clean); }

.verdict-lede { max-width: 64ch; margin: 0 0 0.85rem; }
.verdict-lede strong { font-weight: 600; }
.do-this { color: var(--ink); }

.scoreboard { list-style: none; margin-top: 1.9rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .scoreboard { grid-template-columns: repeat(4, 1fr); } }
.scoreboard li { display: flex; flex-direction: column; gap: 0.35rem; }
.score .of {
  font-size: 0.62em;
  color: var(--muted);
  padding: 0 0.08em;
}
.score {
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.score-label { font-size: 12px; line-height: 1.4; color: var(--muted); }

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

.rpt-section { padding: 2.5rem 0; border-bottom: 1px solid var(--line); }
.rpt-section:last-of-type { border-bottom: 0; }
.rpt-section h2 {
  font-family: inherit;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 0.85rem;
}
.section-lede { max-width: 68ch; margin: 0 0 1.75rem; color: var(--muted); }

/* ------------------------------------------------------------------- fixes */

.fixes { counter-reset: fix; list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }

/* Each change is its own bordered block. The number sits in a tile built from
   exactly the same font, padding and border as the tag opposite it, so the two
   are the same height and share a centre line. */
.fix {
  counter-increment: fix;
  border: 1px solid var(--rule);
  padding: 1rem 1.15rem 1.15rem;
}
.fix-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.55rem;
}
/* One height for both chips, declared rather than inferred: aspect-ratio
   cannot resolve against a height that is itself content-driven. */
.fix-head { --chip-h: 21px; }
.fix-head::before,
.fix-tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: var(--chip-h);
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 0.45rem;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.fix-head::before {
  content: counter(fix);
  /* Square: width is derived from the height the shared chip metrics produce,
     rather than guessed with a min-width. */
  justify-content: center;
  width: var(--chip-h);
  padding-inline: 0;
  color: var(--ink);
}
.fix h3 {
  flex: 1;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}
.fix p { max-width: 66ch; margin: 0; color: var(--muted); font-size: 14px; }
.fix-tag { color: var(--muted); }
/* Filled like every other chip in the document, so the vibrant palette is
   consistent wherever a chip appears. */
.fix-tag.critical { background: var(--critical); color: var(--on-bright); border-color: var(--critical); }
.fix-tag.high { background: var(--high); color: var(--on-bright); border-color: var(--high); }
.fix-tag.clean { background: var(--clean); color: var(--on-bright); border-color: var(--clean); }

/* ---------------------------------------------------------------- timeline */

.no-consent {
  margin-bottom: 1.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--critical-ink);
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--critical-ink);
}

.tl-page { margin-bottom: 1.9rem; }
.tl-page h3 {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  margin: 0 0 0.7rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--ink);
}
.tl-page code { font-family: 'Geist Mono', monospace; font-size: 11.5px; font-weight: 400; color: var(--muted); overflow-wrap: anywhere; }

.tl-row {
  display: grid;
  grid-template-columns: 15rem 1fr 4.5rem;
  align-items: center;
  gap: 0 1rem;
  padding: 0.28rem 0;
  font-size: 12.5px;
}
.tl-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-who span { color: var(--muted); }
.tl-ms { text-align: right; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tl-track { position: relative; height: 9px; background: var(--raised); border: 1px solid var(--line); }
.tl-bar { position: absolute; inset-block: 0; left: 0; }
.tl-bar.critical { background: var(--critical); }
.tl-bar.high { background: var(--high); }
.tl-bar.medium { background: var(--medium); }

@media (max-width: 680px) {
  .tl-row { grid-template-columns: 1fr 4rem; grid-template-areas: 'who ms' 'track track'; }
  .tl-who { grid-area: who; }
  .tl-ms { grid-area: ms; }
  .tl-track { grid-area: track; margin: 0.25rem 0 0.4rem; }
}

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

.doc .tablewrap { border: 1px solid var(--rule); overflow-x: auto; }
.doc table { width: 100%; border-collapse: collapse; }
/* Fixed layout so every row lines up on the same columns regardless of what a
   scanned site happens to name its cookies. */
.doc .cookie-table { table-layout: fixed; }
.doc .cookie-table code { font-size: 12px; overflow-wrap: anywhere; }
.doc .domain { font-size: 10.5px; overflow-wrap: anywhere; }
/* Prose belongs in the prose face even inside a table. Set by and Lasts are
   labels, not identifiers, so they match Purpose exactly rather than sitting
   in the mono face with the cookie name. */
.doc .purpose,
.doc .cookie-table .setby,
.doc .cookie-table .lasts {
  font-family: 'Geist', sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  text-align: left;
}
/* Five ruled columns: a divider after every cell but the last. */
.doc .cookie-table th,
.doc .cookie-table td { border-right: 1px solid var(--line); }
.doc .cookie-table th:last-child,
.doc .cookie-table td:last-child { border-right: 0; }
.doc .cookie-table .tag-marketing,
.doc .cookie-table .tag-analytics,
.doc .cookie-table .tag-necessary { font-size: 9px; letter-spacing: 0.06em; padding: 0.06rem 0.34rem; }
.doc td code { overflow-wrap: anywhere; }
.doc thead th {
  font-family: 'Geist', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--raised);
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.doc tbody td {
  font-size: 12.5px;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  background: var(--paper);
}
.doc tbody tr:last-child td { border-bottom: 0; }
.doc td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.doc .dim { color: var(--muted); }
.still { color: var(--critical-ink); font-weight: 500; }
.stopped { color: var(--clean-ink); }

.tag-marketing, .tag-analytics, .tag-necessary {
  display: inline-block;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.08rem 0.4rem;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.tag-marketing { background: var(--critical); color: var(--on-bright); border-color: var(--critical); }
.tag-analytics { background: var(--medium); color: var(--on-bright); border-color: var(--medium); }
.tag-necessary { background: var(--clean); color: var(--on-bright); border-color: var(--clean); }

.callout {
  margin: 1.4rem 0 0;
  padding: 0.9rem 1.05rem;
  border: 1px solid var(--rule);
  background: var(--raised);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

/* ------------------------------------------------------------------ method */

.method { margin: 0; padding: 0; list-style: none; max-width: 68ch; }
.method li { position: relative; padding-left: 1.4rem; margin-bottom: 0.8rem; font-size: 14px; color: var(--muted); }
.method li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border: 1px solid var(--muted);
}

.rpt-foot {
  margin: 2.25rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  color: var(--muted);
}

/* ------------------------------------------------------------------- print */

@media print {
  .sample-bar { display: none; }
  body::before { display: none !important; }
  .doc { background: #fff; }
  .sheet { max-width: none; padding: 0; }
  .fix, .tl-page, .scoreboard, .callout, .rpt-meta { break-inside: avoid; }
  .rpt-section h2, .verdict-block h1 { break-after: avoid; }
  table { break-inside: auto; }
  tr { break-inside: avoid; }
  thead { display: table-header-group; }
}