/* ═══════════════════════════════════════════════════════════════════════════
   THE ASSESSMENT REPORT — one stylesheet for the /assess result, the VP
   printable, the shared link and the member's Detailed report.

   There were two renderers with two sets of styles over one stored scan, which
   is why the same finding could look like a headline in one and a footnote in
   the other. One stylesheet is half of what stops that; the shared renderer is
   the other half.

   Reads platform tokens (--brand, --text-2, --surface-2 …) with fallbacks, so
   it works inside /manage, inside /vp, and on a bare shared page that loads
   nothing but /theme.css.
   ═══════════════════════════════════════════════════════════════════════════ */

.ar {
  /* Local aliases ONLY for the tokens this component genuinely reshapes.
     `--text-2` and `--text-3` are read directly at each use site instead of
     being aliased: an alias that shadows a platform token reads like a token
     of its own, and the theme guard is right to want the widely-read ones
     declared by the theme rather than invented by a component. */
  --ar-ink: var(--text-1, #18181b);
  --ar-line: var(--border, rgba(0, 0, 0, .1));
  --ar-card: var(--surface-2, #fff);
  --ar-sunk: var(--surface-3, rgba(0, 0, 0, .03));
  --ar-accent: var(--brand, #6366f1);
  --ar-accent-text: var(--brand-text, var(--brand, #4f46e5));
  --ar-good: #15803d;
  --ar-warn: #b45309;
  --ar-bad: #b91c1c;

  color: var(--ar-ink);
  font: 400 15px/1.6 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  max-width: 46rem;
  margin: 0 auto;
}

/* The font is declared HERE as well as on `.ar` because the toolbar sits
   outside the report: on /r/:token the page is nothing but this class, so the
   export control was rendering in the browser's default serif while the report
   under it was sans. A control that does not look like the document it belongs
   to reads as something the page picked up from somewhere else. */
.ar-page {
  background: var(--surface-1, #fafafa); margin: 0; padding: 2.5rem 1.25rem 4rem;
  font: 400 15px/1.6 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  color: var(--text-1, #18181b);
}

/* Quick must stay readable at 320px — that is a real phone, not a test size. */
@media (max-width: 26rem) { .ar { font-size: 14.5px; } }

.ar h1, .ar h2, .ar h3 { line-height: 1.25; margin: 0; font-weight: 650; letter-spacing: -.011em; }
.ar h1 { font-size: 1.6rem; }
.ar h2 { font-size: 1.12rem; }
.ar h3 { font-size: .95rem; }
.ar p { margin: 0; }

.ar-section { margin: 0 0 2.75rem; }
.ar-section > h2 { margin: 0 0 .1rem; }
.ar-lede { color: var(--text-2, #52525b); font-size: .875rem; margin: 0 0 .9rem; }

/* ── Parts and chapters ───────────────────────────────────────────────────
   The document has five parts, and part one has seven questions inside it.

   It used to have five numbered "steps", which counted to five and only ever
   printed four — no section was assigned to the fifth gate. And it had to file
   ten sections under "belongs to no stage", because "where did it learn this"
   is not a step a buyer takes; it is the mechanism that decides the steps.

   A PART opens once, with a rule the full measure of the page. A CHAPTER opens
   under it. The two weights are deliberately far apart: a reader flicking
   through a printed copy should be able to find part four without reading. */
.ar-part {
  margin: 4.5rem 0 2rem;
  padding-top: 1.4rem;
  border-top: 3px solid var(--ar-ink);
}
.ar-part:first-of-type { margin-top: 2.5rem; }
.ar-part-n {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-3, #a1a1aa);
}
.ar-part-t { font-size: 1.75rem; margin: .35rem 0 .4rem; letter-spacing: -.022em; }
.ar-part-b { color: var(--text-2, #52525b); font-size: .95rem; line-height: 1.65; max-width: 38rem; }

/* The order, in one line each. A contents page for part one — and the "hands
   on" column is what makes the seven read as one test rather than seven
   separate surveys. */
.ar-spine { font-size: .84rem; }
.ar-spine td { vertical-align: top; }
.ar-spine-n { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.ar-chapter {
  margin: 2.75rem 0 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ar-ink);
}
.ar-part + .ar-chapter { margin-top: 1.6rem; }
.ar-chapter-n {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ar-accent-text);
}
/* The buyer's move, or the word "mechanism". Three of the seven questions are
   not moves a buyer makes, and printing them as gates is what made the funnel
   read as something that lies. */
.ar-move {
  margin-left: .55rem; padding-left: .55rem;
  border-left: 1px solid var(--ar-line);
  color: var(--text-3, #a1a1aa); font-weight: 600;
}
.ar-chapter-t { font-size: 1.4rem; margin: .35rem 0 .4rem; letter-spacing: -.018em; }

/* What we actually put to the assistant. Set as evidence, not as prose — the
   reader is entitled to see the question before the answer. */
.ar-chapter-asked {
  font-size: .875rem; line-height: 1.6; color: var(--ar-ink);
  background: var(--ar-sunk); border-radius: .5rem;
  padding: .65rem .85rem; margin: 0 0 .7rem; max-width: 40rem;
}
.ar-chapter-asked > span {
  display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--text-3, #a1a1aa); margin-bottom: .2rem;
}
.ar-chapter-q { color: var(--text-2, #52525b); font-size: .95rem; line-height: 1.65; max-width: 38rem; }

/* What a strong answer means, what a weak one costs, and how it is fixed.
   Under EVERY chapter, including the ones that came back empty: a chapter that
   states a finding and stops is the defect this whole spine exists to remove. */
.ar-chapter-read {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .1rem 1.4rem; margin: 1.1rem 0 0;
}
.ar-cr { padding: .7rem 0 .7rem .85rem; border-left: 3px solid var(--ar-line); }
.ar-cr[data-tone="good"] { border-left-color: var(--ar-good); }
.ar-cr[data-tone="bad"]  { border-left-color: var(--ar-bad); }
.ar-cr[data-tone="do"]   { border-left-color: var(--ar-accent); }
.ar-cr dt {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-3, #a1a1aa); margin-bottom: .2rem;
}
.ar-cr[data-tone="good"] dt { color: var(--ar-good); }
.ar-cr[data-tone="bad"] dt  { color: var(--ar-bad); }
.ar-cr[data-tone="do"] dt   { color: var(--ar-accent-text); }
.ar-cr dd { margin: 0; font-size: .855rem; line-height: 1.6; color: var(--text-2, #52525b); }

/* How the test continues. A "no" used to print an absence; it now routes the
   test, and the branch it took is printed so the reader can see why the next
   question is the one it is. */
.ar-branch { margin-top: 1.1rem; border: 1px solid var(--ar-line); border-radius: .55rem; overflow: hidden; }
.ar-branch-h {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-3, #a1a1aa); padding: .5rem .85rem; background: var(--ar-sunk);
}
.ar-branch-r {
  display: grid; grid-template-columns: 12rem 1fr; gap: .2rem 1rem;
  padding: .55rem .85rem; font-size: .845rem; line-height: 1.55;
  border-top: 1px solid var(--ar-line);
}
.ar-branch-r > b { font-weight: 640; }
.ar-branch-r > span { color: var(--text-2, #52525b); }
@media (max-width: 34rem) { .ar-branch-r { grid-template-columns: 1fr; } }

/* What this question hands the next one. The join that makes seven questions
   one test. */
.ar-hands { margin-top: .9rem; font-size: .82rem; color: var(--text-2, #52525b); }
.ar-hands > span {
  font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  font-size: .68rem; color: var(--text-3, #a1a1aa); margin-right: .4rem;
}

/* ── The section frame ────────────────────────────────────────────────────
   Every section answers a customer's question and costs something later. The
   frame states both before the evidence, so a reader who knows nothing about
   how any of this is measured can still tell what was asked and why it
   matters. */
.ar-sec-head { margin: 0 0 1rem; }
.ar-sec-title { font-size: 1.02rem; margin: 0; }

/* The customer's own words. A quotation, not a heading — it is what makes a
   share-of-voice number legible to somebody who has never heard the phrase. */
.ar-question {
  font-size: .95rem; font-style: italic; color: var(--ar-ink);
  margin: .3rem 0 .45rem;
}
.ar-q-text::before { content: "\201C"; }
.ar-q-text::after  { content: "\201D"; }
/* A question the OWNER is asking us. Not something anybody said to an
   assistant, so it is not dressed as a quotation. */
.ar-question.is-owner { font-style: normal; }
.ar-question.is-owner .ar-q-text::before,
.ar-question.is-owner .ar-q-text::after { content: none; }

.ar-why { color: var(--text-2, #52525b); font-size: .875rem; max-width: 40rem; }

/* What the verdict's denominator is made of. Under the verdict and NOT inside
   the evidence drawer: "2 of 12 answers" is the first sentence of the report,
   and a reader should not have to open anything to find out what twelve is. */
.ar-basis { color: var(--text-2, #52525b); font-size: .85rem; margin: .5rem 0 0; }

/* What failing here costs later. Deliberately quiet — it is a consequence, not
   an alarm, and a page of red is a page nobody finishes. */
.ar-costs {
  margin-top: .45rem; font-size: .78rem; font-weight: 600;
  color: var(--ar-warn);
}

/* "We looked and found nothing" — never a zero, never a blank. */
.ar-unmeasured {
  color: var(--text-2, #52525b); font-size: .875rem;
  background: var(--ar-sunk); border-radius: .4rem;
  padding: .7rem .85rem;
}

.ar-subsection { margin-top: 1.6rem; }
.ar-subsection > h3 { margin: 0 0 .15rem; }

/* Facts an assistant asserts that are not true. */
.ar-wrong { margin: 0; padding-left: 1.1rem; }
.ar-wrong > li { margin-bottom: .4rem; color: var(--ar-bad); }

/* ── Header ──────────────────────────────────────────────────────────────── */
.ar-head { border-bottom: 1px solid var(--ar-line); padding-bottom: 1.1rem; margin-bottom: 1.75rem; }
.ar-kicker {
  display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline;
  color: var(--text-3, #a1a1aa); font-size: .75rem; text-transform: uppercase; letter-spacing: .07em;
}
.ar-head h1 { margin: .45rem 0 .3rem; }
.ar-sub { color: var(--text-2, #52525b); font-size: .9rem; }

/* ── The verdict ─────────────────────────────────────────────────────────── */
.ar-verdict { border-left: 3px solid var(--ar-accent); padding: .1rem 0 .1rem 1rem; margin: 0 0 1rem; }
.ar-verdict h2 { font-size: 1.22rem; }
.ar-verdict p { color: var(--text-2, #52525b); margin-top: .45rem; }
.ar-verdict[data-state="blocked"], .ar-verdict[data-state="invisible"] { border-left-color: var(--ar-bad); }
.ar-verdict[data-state="losing"] { border-left-color: var(--ar-warn); }
.ar-verdict[data-state="strong"] { border-left-color: var(--ar-good); }
.ar-verdict[data-state="unmeasured"] { border-left-color: var(--text-3, #a1a1aa); }

/* ── Metrics ─────────────────────────────────────────────────────────────── */
.ar-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .6rem; }
.ar-metric { background: var(--ar-sunk); border-radius: .55rem; padding: .7rem .8rem; }
.ar-metric dt { color: var(--text-3, #a1a1aa); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.ar-metric dd { margin: .2rem 0 0; font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Unmeasured is a WORD, never a zero and never a dash that reads as one. */
.ar-metric dd.is-unmeasured { font-size: .9rem; font-weight: 500; color: var(--text-3, #a1a1aa); }

/* ── The Hundred ─────────────────────────────────────────────────────────── */
.ar-hundred { margin-top: .4rem; }
.ar-hundred-cap { color: var(--text-2, #52525b); font-size: .82rem; margin-bottom: .6rem; }
.ar-stage { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: center; padding: .42rem 0; }
/* An unmeasured stage keeps its row and loses its bar. Four of them stacked at
   full height, each with its own reason underneath, is a screen of grey that
   reads as failure — when what it actually says is "we could not see this from
   outside your business". Quiet, compact, and still present. */
.ar-stage.is-unmeasured { padding: .2rem 0; }
.ar-stage.is-unmeasured .ar-stage-bar { display: none; }
.ar-stage.is-unmeasured .ar-stage-label { font-size: .82rem; }
.ar-stage.is-unmeasured .ar-stage-why { font-size: .72rem; margin-top: -.1rem; }
.ar-stage + .ar-stage { border-top: 1px solid var(--ar-line); }
.ar-stage-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--ar-sunk); overflow: hidden; }
.ar-stage-bar > i { display: block; height: 100%; background: var(--ar-accent); }
.ar-stage-label { font-size: .88rem; }
.ar-stage-n { font-variant-numeric: tabular-nums; font-weight: 700; }
/* Open and grey, not absent. An unmeasured stage that is hidden makes the
   funnel look like it ends where our evidence ends. */
.ar-stage.is-unmeasured { opacity: .55; }
.ar-stage.is-unmeasured .ar-stage-n { font-weight: 500; font-size: .8rem; color: var(--text-3, #a1a1aa); }
.ar-stage-why { grid-column: 1 / -1; color: var(--text-3, #a1a1aa); font-size: .76rem; }

/* The cold-vs-warm diagnosis. Carries a left rule like the verdict, because it
   is the same kind of statement one level down: a conclusion, not a reading. */
.ar-diff { border-left: 3px solid var(--ar-accent); padding-left: .9rem; margin-bottom: 1.1rem; }
.ar-diff[data-state="consistent"] { border-left-color: var(--ar-good); }
.ar-diff[data-state="clarity"], .ar-diff[data-state="stale"] { border-left-color: var(--ar-warn); }
.ar-diff-h { font-weight: 650; font-size: 1rem; }
.ar-diff-m { color: var(--text-2, #52525b); font-size: .875rem; margin-top: .3rem; }

/* Won and lost, side by side. The PAIRING is the finding — a list of strengths
   on its own is a brochure, and the whole point of asking the open question was
   to learn where the business is not the answer. */
/* Up to four columns now — won, lost, lost-on-purpose, and won-but-unwanted.
   auto-fit rather than a fixed pair, because a business with no declined work
   still gets two columns and one with a full negative positioning gets four
   without a second rule. */
.ar-sit { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.1rem; }
@media (max-width: 34rem) { .ar-sit { grid-template-columns: 1fr; } }
.ar-sit-col > ul { margin: .3rem 0 0 1rem; padding: 0; }
.ar-sit-col li { margin-bottom: .35rem; font-size: .875rem; }
.ar-sit-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.ar-sit-h[data-tone="good"] { color: var(--ar-good); }
.ar-sit-h[data-tone="bad"] { color: var(--ar-bad); }
/* Declined work is neither good nor bad — it is a decision, and colouring it
   either way re-states the judgement this column exists to remove. */
.ar-sit-h[data-tone="neutral"] { color: var(--text-2, #52525b); }
.ar-sit-why { display: block; color: var(--text-2, #52525b); font-size: .8rem; margin-top: .15rem; }
/* An assistant's own words, quoted. Set apart from our checks because the
   difference in provenance is the whole point of the section. */
/* ── The appendix ─────────────────────────────────────────────────────────── */
.ar-apx { border: 1px solid var(--ar-line, #e4e4e7); border-radius: 8px; padding: .8rem 1rem; margin-bottom: .7rem; }
.ar-apx-h { display: flex; justify-content: space-between; align-items: baseline; }
.ar-apx-s { font-variant-numeric: tabular-nums; font-weight: 700; }
.ar-apx-a { font-size: .8rem; color: var(--text-3, #71717a); margin: .2rem 0 .6rem; line-height: 1.5; }
.ar-apx-r { border-top: 1px solid var(--ar-line, #e4e4e7); padding: .55rem 0; }
.ar-apx-q { font-size: .875rem; font-weight: 600; }
.ar-apx-w { font-size: .78rem; color: var(--text-3, #71717a); margin-top: .15rem; }
.ar-apx-e { font-size: .82rem; color: var(--text-2, #52525b); margin: .3rem 0; line-height: 1.55;
  padding-left: .7rem; border-left: 2px solid var(--ar-line, #e4e4e7); }
.ar-apx-v { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3, #71717a); }
.ar-apx-v[data-v="pass"] { color: var(--ar-good); }
.ar-apx-v[data-v="absent"] { color: var(--ar-bad); }
.ar-apx-v[data-v="partial"] { color: var(--ar-warn); }

.ar-asked { margin-left: .5rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-3, #71717a); font-style: normal; white-space: nowrap; }

/* What a fix is worth, beside who does it. */
.ar-pts { font-size: .75rem; color: var(--text-3, #71717a); font-variant-numeric: tabular-nums;
  white-space: nowrap; margin-left: .5rem; }

/* ── The seven restored sections ───────────────────────────────────────── */
.ar-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.ar-chip { border: 1px solid var(--ar-line, #e4e4e7); border-radius: 999px;
  padding: .15rem .6rem; font-size: .8rem; }
.ar-chip[data-tone="gap"] { border-color: var(--ar-warn); color: var(--ar-warn); }
.ar-pair { display: grid; grid-template-columns: 12rem 1fr; gap: .6rem 1rem;
  padding: .55rem 0; border-top: 1px solid var(--ar-line, #e4e4e7); align-items: start; }
.ar-pair:first-child { border-top: 0; }
.ar-pair-l { font-size: .8rem; color: var(--text-3, #71717a); }
@media (max-width: 34rem) { .ar-pair { grid-template-columns: 1fr; gap: .3rem; } }

/* The projected answer. Set as a quotation because it is one — of something
   nobody has said yet, which is why the note beside it is not optional. */
.ar-becomes { margin: .6rem 0; padding: .8rem 1rem; border-left: 3px solid var(--ar-line, #e4e4e7);
  background: var(--ar-soft, #f4f4f5); font-size: .875rem; line-height: 1.6; }
.ar-score-line { font-size: .9rem; margin: 0 0 .4rem; }
.ar-bd-bar > span { display: block; height: .55rem; background: var(--ar-soft, #f4f4f5);
  border-radius: 3px; overflow: hidden; min-width: 6rem; }
.ar-bd-bar i { display: block; height: 100%; background: var(--ar-good); }
.ar-you { font-weight: 650; }
.ar-dim { color: var(--text-3, #71717a); }
.ar-works { margin: 0; padding-left: 1.1rem; font-size: .875rem; line-height: 1.8; }
.ar-cell-good { color: var(--ar-good); }
.ar-ok { color: var(--ar-good); font-size: .875rem; }
.ar-bad-note { color: var(--ar-bad); font-size: .875rem; }

/* What this section is, before why it matters. One sentence, plain. */
.ar-what { font-size: .9rem; line-height: 1.6; margin: .35rem 0 0; }

/* ── How to read this ──────────────────────────────────────────────────────
   Collapsed by default on screen so a reader who already knows is not slowed
   down, and OPEN in print, because a document read away from the page cannot
   be expanded. */
.ar-read { margin-top: .9rem; border-top: 1px solid var(--ar-line, #e4e4e7); padding-top: .6rem; }
.ar-read > summary { cursor: pointer; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-3, #71717a); font-weight: 600; }
.ar-read dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .9rem; margin: .6rem 0 0; }
.ar-read dt { font-size: .78rem; color: var(--text-3, #71717a); white-space: nowrap; }
.ar-read dd { margin: 0; font-size: .85rem; line-height: 1.55; }
@media (max-width: 34rem) {
  .ar-read dl { grid-template-columns: 1fr; gap: .1rem; }
  .ar-read dt { margin-top: .5rem; }
}
@media print {
  .ar-read[open] > summary, .ar-read > summary { list-style: none; }
  .ar-read > dl, .ar-read dl { display: grid !important; }
  .ar-read:not([open]) dl { display: grid !important; }
}

/* ── The way out of the browser ───────────────────────────────────────────
   Hidden when printing, or it lands in the PDF.

   IT USED TO BE `.ar-btn`, WHICH IS ALSO THE CALL-TO-ACTION CLASS. The CTA
   rules are declared later in this file, so they won every time: the quiet
   secondary control at the top of the report was being painted as a solid
   brand-filled button identical to "Sign up for Presence". Two different jobs
   cannot share a class and stay two different jobs. */
.ar-toolbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: flex-end; align-items: center; gap: .6rem;
  max-width: 54rem; margin: 0 auto; padding: .8rem 1.5rem;
}
.ar-tool {
  font: inherit; font-size: .82rem; font-weight: 560; letter-spacing: -.005em;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .95rem; border-radius: 7px;
  border: 1px solid var(--ar-line); background: var(--ar-card);
  color: var(--ar-ink); cursor: pointer;
  /* The control is a <button> on a page that prints itself and an <a> on one
     that downloads a file. An anchor arrives underlined, which made the same
     control look like two different things depending on the page. */
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: background .12s ease, border-color .12s ease;
}
.ar-tool:hover { background: var(--ar-sunk); border-color: var(--text-3, #a1a1aa); }
.ar-tool:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }
.ar-tool svg { width: 14px; height: 14px; flex: none; }
/* The mailed-copy line. Left of the export button, muted, and it wraps to its
   own row on a phone rather than squeezing the control it sits beside. */
.ar-toolbar { flex-wrap: wrap; }
.ar-tool-note {
  margin-right: auto; font-size: .78rem; line-height: 1.45;
  color: var(--text-2, #52525b);
}
.ar-tool-note b { font-weight: 600; color: var(--ar-ink); }
.ar-tool-link {
  font: inherit; font-size: inherit; padding: 0; border: 0; background: none;
  color: var(--ar-accent); font-weight: 560; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.ar-tool-link:disabled { color: var(--text-3, #71717a); cursor: default; text-decoration: none; }
.ar-tool-link:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }
@media (max-width: 32rem) { .ar-tool-note { margin: 0 0 .5rem; flex: 1 1 100%; } }

@media print { .ar-toolbar { display: none !important; } }

/* ── The scoreboard ────────────────────────────────────────────────────────
   Twelve rows, worst first. The bar is you against the rival scored on the
   IDENTICAL questions — the comparison is the finding, and a score on its own
   is a number without a scale. */
.ar-board { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ar-board th { text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3, #71717a); padding: .5rem .6rem; border-bottom: 1px solid var(--ar-line, #e4e4e7); font-weight: 600; }
.ar-board td { padding: .7rem .6rem; border-bottom: 1px solid var(--ar-line, #e4e4e7); vertical-align: top; }
.ar-board-n { font-weight: 650; font-size: .95rem; }
.ar-board-w { color: var(--text-3, #71717a); font-size: .8rem; margin-top: .15rem; line-height: 1.45; }
.ar-board-bars { min-width: 14rem; }
.ar-bar { position: relative; height: 1.15rem; background: var(--ar-soft, #f4f4f5);
  border-radius: 3px; margin-bottom: .3rem; overflow: hidden; }
.ar-bar > i { display: block; height: 100%; background: var(--ar-good); }
.ar-bar > i[data-band="red"] { background: var(--ar-bad); }
.ar-bar > i[data-band="amber"] { background: var(--ar-warn); }
.ar-bar-rival { background: var(--text-3, #71717a) !important; opacity: .45; }
.ar-bar-l { position: absolute; right: .4rem; top: 0; line-height: 1.15rem;
  font-size: .7rem; color: var(--text-2, #52525b); z-index: 1; }
.ar-bar-none { font-size: .75rem; color: var(--text-3, #71717a); line-height: 1.45; }
.ar-num { text-align: right; }
.ar-board-s { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ar-board-s[data-band="red"] { color: var(--ar-bad); }
.ar-board-s[data-band="amber"] { color: var(--ar-warn); }
.ar-board-s[data-band="green"] { color: var(--ar-good); }

/* ── Where it broke ───────────────────────────────────────────────────────── */
.ar-break { border: 1px solid var(--ar-line, #e4e4e7); border-radius: 8px;
  padding: .9rem 1rem; margin-bottom: .7rem; }
.ar-break-h { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ar-break-s { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ar-break-s[data-band="red"] { color: var(--ar-bad); }
.ar-break-s[data-band="amber"] { color: var(--ar-warn); }
.ar-break-s[data-band="green"] { color: var(--ar-good); }
.ar-break-m { font-size: .8rem; color: var(--text-3, #71717a); margin: .3rem 0 .5rem; }
.ar-break-q { margin: 0 0 .35rem; padding-left: .7rem; border-left: 3px solid var(--ar-line, #e4e4e7);
  font-weight: 650; font-size: .9rem; }
.ar-break-a { margin: 0 0 .4rem .7rem; font-size: .85rem; color: var(--text-2, #52525b); line-height: 1.55; }
.ar-break-w, .ar-break-n { font-size: .82rem; margin: .25rem 0 0; line-height: 1.5; }

.ar-why { margin: .3rem 0 0 1rem; padding: 0; }
.ar-why li { margin-bottom: .45rem; font-size: .875rem; }
.ar-quote { font-style: italic; color: var(--text-2, #52525b); }
.ar-tight { margin: 0; padding-left: 1rem; }
.ar-tight li { margin-bottom: .25rem; }

.ar-bucket + .ar-bucket { margin-top: 1.6rem; }
.ar-bucket-t { font-size: .95rem; margin: 0 0 .1rem; }
.ar-bucket-b { color: var(--text-2, #52525b); font-size: .82rem; margin: 0 0 .7rem; }

/* ── Notes, trust, disagreements ─────────────────────────────────────────── */
.ar-note { color: var(--text-2, #52525b); font-size: .85rem; margin-top: .7rem; }
.ar-trust-head { font-size: .95rem; margin-bottom: .8rem; }
.ar-trust-head .ar-tag { text-transform: capitalize; margin-right: .35rem; }
/* The value that disagrees, not the whole row. Colouring the row makes the
   record look as suspect as the thing contradicting it. */
.ar-cell-bad { color: var(--ar-bad); }

/* ── Conversations ───────────────────────────────────────────────────────── */
.ar-convo { border: 1px solid var(--ar-line); border-radius: .6rem; padding: .85rem 1rem; margin-bottom: .7rem; background: var(--ar-card); }
.ar-convo-q { font-weight: 600; font-size: .95rem; }
.ar-convo-meta { color: var(--text-3, #a1a1aa); font-size: .74rem; margin-top: .2rem; }
.ar-quote {
  margin: .6rem 0 0; padding: .55rem .75rem; background: var(--ar-sunk);
  border-radius: .4rem; font-size: .86rem; color: var(--text-2, #52525b); white-space: pre-wrap;
}
.ar-convo-out { margin-top: .55rem; font-size: .85rem; }

/* ── Competitors ─────────────────────────────────────────────────────────── */
.ar-table-wrap { overflow-x: auto; }
.ar-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.ar-table th, .ar-table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--ar-line); }
.ar-table th { color: var(--text-3, #a1a1aa); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.ar-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Fixes ───────────────────────────────────────────────────────────────── */
.ar-fix { border: 1px solid var(--ar-line); border-radius: .6rem; padding: .85rem 1rem; margin-bottom: .7rem; background: var(--ar-card); }
.ar-fix-top { display: flex; gap: .6rem; align-items: baseline; justify-content: space-between; }
.ar-fix h3 { flex: 1; }
.ar-fix-why { color: var(--text-2, #52525b); font-size: .87rem; margin-top: .35rem; }
.ar-fix-do { margin-top: .55rem; font-size: .89rem; }
.ar-fix-do b { font-weight: 650; }

/* Traffic light meaning is never colour alone — the word is always there. */
.ar-tag {
  display: inline-block; font-size: .68rem; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; padding: .16rem .42rem; border-radius: .3rem;
  background: var(--ar-sunk); color: var(--text-2, #52525b); white-space: nowrap;
}
.ar-tag[data-owner="website"] { color: var(--ar-warn); }
.ar-tag[data-owner="agoria"] { color: var(--ar-accent-text); }
.ar-tag[data-tone="bad"] { color: var(--ar-bad); }
.ar-tag[data-tone="good"] { color: var(--ar-good); }

/* ── Evidence drawers ────────────────────────────────────────────────────── */
.ar-proof { margin-top: .5rem; }
.ar-proof > button {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: .78rem; color: var(--ar-accent-text); font-weight: 600;
}
.ar-proof > button:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 3px; border-radius: .2rem; }
.ar-proof-body { margin-top: .45rem; font-size: .82rem; color: var(--text-2, #52525b); }
.ar-proof-body[hidden] { display: none; }

/* ── Potential ───────────────────────────────────────────────────────────── */
.ar-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .6rem; }
.ar-compare > div { background: var(--ar-sunk); border-radius: .55rem; padding: .7rem .8rem; }
.ar-compare dt { color: var(--text-3, #a1a1aa); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; }
.ar-compare dd { margin: .2rem 0 0; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* A projected number says so wherever it appears — chart, sentence, export. */
.ar-projected::after {
  content: "projected"; display: block; font-size: .64rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3, #a1a1aa); font-weight: 600; margin-top: .1rem;
}

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.ar-cta { border: 1px solid var(--ar-line); border-radius: .7rem; padding: 1.15rem 1.25rem; background: var(--ar-sunk); }
.ar-cta h2 { font-size: 1.05rem; }
.ar-cta p { color: var(--text-2, #52525b); font-size: .89rem; margin-top: .4rem; }
.ar-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .95rem; }
.ar-btn {
  display: inline-block; text-decoration: none; font-weight: 620; font-size: .9rem;
  padding: .6rem 1.05rem; border-radius: .5rem;
  background: var(--ar-accent); color: var(--brand-on, #fff);
}
.ar-btn.is-secondary { background: transparent; color: var(--ar-accent-text); box-shadow: inset 0 0 0 1px var(--ar-line); }
.ar-btn:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }

.ar-foot { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--ar-line); color: var(--text-3, #a1a1aa); font-size: .76rem; }
.ar-foot a { color: var(--ar-accent-text); }
/* ── Q3 · what a buyer could not find out ─────────────────────────────────
   A bar reading "Offerings & pricing 4 / 11" is a score. "The assistant could
   not find out what it costs" is a finding, and only one of the two is
   something an owner can go and do. */
.ar-crit { border: 1px solid var(--ar-line); border-radius: .6rem; overflow: hidden; }
.ar-crit-r { padding: .75rem .9rem; border-top: 1px solid var(--ar-line); }
.ar-crit-r:first-child { border-top: 0; }
.ar-crit-r[data-state="absent"] { background: color-mix(in srgb, var(--ar-bad) 4%, transparent); }
.ar-crit-q { font-weight: 620; font-size: .92rem; }
.ar-crit-m { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-top: .3rem; }
.ar-crit-l { font-size: .82rem; color: var(--text-2, #52525b); }
.ar-crit-x { margin-top: .4rem; font-size: .84rem; color: var(--text-2, #52525b); }

/* ── Q7 · the order the work happens in ─────────────────────────────────── */
.ar-order { margin: .5rem 0 0; padding-left: 1.2rem; }
.ar-order li { margin-bottom: .55rem; font-size: .9rem; }
.ar-order-w { display: block; color: var(--text-2, #52525b); font-size: .82rem; margin-top: .1rem; }

/* ── Q4's second list ─────────────────────────────────────────────────────
   Not a fix list. Nothing here is broken, and styling it like the repairs is
   how it gets read as a twelfth repair and skipped. */
.ar-win { margin: 0; padding-left: 1.2rem; }
.ar-win li { margin-bottom: .6rem; font-size: .95rem; }
.ar-win-w { display: block; color: var(--text-2, #52525b); font-size: .84rem; margin-top: .15rem; }

/* ── Q4's branch ──────────────────────────────────────────────────────────
   Four ranked outcomes where the report used to carry one bit. The colour is
   the finding: "knows you and picked somebody else" and "has never heard of
   you" need opposite work, and they used to print the same paragraph. */
.ar-outcome { border-left: 3px solid var(--ar-accent); padding: .1rem 0 .1rem 1rem; margin: 0 0 1.2rem; }
.ar-outcome[data-state="first"] { border-left-color: var(--ar-good); }
.ar-outcome[data-state="named"] { border-left-color: var(--ar-warn); }
.ar-outcome[data-state="known-not-picked"], .ar-outcome[data-state="unknown"] { border-left-color: var(--ar-bad); }
.ar-outcome-h { font-size: 1.05rem; font-weight: 650; letter-spacing: -.011em; }
.ar-outcome-m { color: var(--text-2, #52525b); font-size: .89rem; line-height: 1.6; margin-top: .35rem; }
.ar-outcome-a { margin-top: .7rem; }
.ar-outcome-a > span {
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em;
  color: var(--text-3, #a1a1aa);
}
.ar-outcome-a ul { margin: .25rem 0 0 1.1rem; padding: 0; }
.ar-outcome-a li { font-size: .855rem; font-style: italic; color: var(--text-2, #52525b); margin-bottom: .15rem; }

/* ── Part three · the gap ─────────────────────────────────────────────────
   The sentence follows the numbers and is chosen by them. "Most of what is
   missing is already there" printed above a three-point difference is what
   made the whole exercise look not worth doing. */
.ar-ceiling dd { color: var(--ar-accent-text); }
.ar-gap-s {
  margin-top: 1rem; font-size: .95rem; line-height: 1.65; max-width: 38rem;
  padding-left: .9rem; border-left: 3px solid var(--ar-good);
}
.ar-gap-s[data-kind="small"] { border-left-color: var(--ar-warn); }

/* ── Part four · provenance ───────────────────────────────────────────────
   Which question produced a recommendation, and where the work happens.
   Without the second, everything defaults to "change your website" — and for
   anything an assistant learned from a third-party listing that is the wrong
   site to change. */
.ar-fix-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.ar-prov {
  font-size: .7rem; letter-spacing: .01em; padding: .15rem .5rem; border-radius: 4px;
  background: var(--ar-sunk); color: var(--text-2, #52525b); white-space: nowrap;
}
.ar-where { background: transparent; box-shadow: inset 0 0 0 1px var(--ar-line); }

/* ── The cover and the contents ───────────────────────────────────────────
   PRINT ONLY. A document that gets forwarded, printed and taken into a meeting
   needs a front page with a name and a date on it; a scrolling web page needs
   neither, which is why both are hidden on screen rather than styled for it. */
.ar-cover, .ar-contents { display: none; }

/* ── Print ─────────────────────────────────────────────────────────────── */
@media print {
  /* ── Page geometry ─────────────────────────────────────────────────────
     A named page with real margins. A PDF people take into a meeting is a
     document, and a document with browser default margins is a screenshot. */
  @page { size: A4; margin: 18mm 16mm 20mm; }
  @page :first { margin: 0; }

  html, body { background: #fff; }
  .ar-page { background: #fff; padding: 0; margin: 0; }
  .ar { max-width: none; font-size: 10pt; line-height: 1.5; color: #18181b; }

  /* ── The cover ─────────────────────────────────────────────────────── */
  .ar-cover {
    display: flex; flex-direction: column; justify-content: flex-end;
    box-sizing: border-box;
    min-height: 100vh; padding: 24mm 20mm 22mm;
    break-after: page;
    border-top: 10mm solid var(--ar-accent, #6366f1);
  }
  .ar-cover-k {
    font-size: 8.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
    color: #71717a;
  }
  .ar-cover-t { font-size: 30pt; line-height: 1.08; letter-spacing: -.025em; margin: 4mm 0 2mm; }
  .ar-cover-s { font-size: 11pt; color: #52525b; }
  .ar-cover-v {
    font-size: 13pt; line-height: 1.4; margin: 10mm 0 0; max-width: 120mm;
    padding-left: 4mm; border-left: 2pt solid var(--ar-accent, #6366f1);
  }
  .ar-cover-f {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 3mm 8mm;
    margin: 14mm 0 0; padding-top: 4mm; border-top: .5pt solid #d4d4d8; max-width: 130mm;
  }
  .ar-cover-f dt { font-size: 7.5pt; text-transform: uppercase; letter-spacing: .1em; color: #a1a1aa; }
  .ar-cover-f dd { margin: .5mm 0 0; font-size: 10pt; }
  .ar-cover-n { margin-top: 8mm; font-size: 8pt; color: #a1a1aa; }

  /* ── The contents ──────────────────────────────────────────────────── */
  .ar-contents { display: block; break-after: page; }
  .ar-contents h2 { font-size: 16pt; margin-bottom: 6mm; }
  .ar-contents ol { list-style: none; margin: 0; padding: 0; }
  .ar-contents-p {
    font-size: 8pt; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
    color: #a1a1aa; margin: 6mm 0 1.5mm; padding-top: 1.5mm; border-top: .5pt solid #e4e4e7;
  }
  .ar-contents-p:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  .ar-contents-c { font-size: 10.5pt; padding: 1.2mm 0; }
  .ar-contents-n { display: inline-block; min-width: 9mm; font-weight: 700; color: var(--ar-accent-text, #4f46e5); }

  /* ── What does not belong on paper ─────────────────────────────────── */
  .ar-cta, .ar-proof > button, .ar-toolbar { display: none !important; }
  /* Drawers chosen for print open; the rest stay shut. Dumping every
     transcript into a three-page Quick document defeats the format. */
  .ar-proof-body[hidden] { display: none; }
  .ar-proof-body[data-print="1"][hidden] { display: block; }

  /* ── Breaks ────────────────────────────────────────────────────────────
     A part starts a new page. A chapter's frame must never be orphaned from
     its evidence: a page ending on "Question 4 of 7 · Chosen" and starting the
     next one on a table is a document that reads as though a page is missing. */
  .ar-part { break-before: page; break-after: avoid; margin-top: 0; padding-top: 0; border-top: 0; }
  .ar-part-t { font-size: 20pt; }
  .ar-chapter { break-inside: avoid; break-after: avoid; margin-top: 8mm; }
  .ar-chapter-t { font-size: 14pt; }
  .ar-chapter-read, .ar-branch { break-inside: avoid; }
  .ar-section { break-inside: avoid; margin-bottom: 6mm; }
  .ar-sec-head { break-after: avoid; break-inside: avoid; }
  .ar-sec-head > h2, .ar-sec-head > h3 { break-after: avoid; }
  .ar-convo, .ar-fix, .ar-crit-r, .ar-apx, .ar-break, .ar-outcome { break-inside: avoid; }
  table, tr { break-inside: avoid; }
  thead { display: table-header-group; }

  /* ── Ink ───────────────────────────────────────────────────────────────
     Bars and fills have to be told to print. A readiness chart that renders as
     four empty outlines is worse than no chart: the reader assumes the values
     are zero. */
  .ar-bar > i, .ar-stage-bar > i, .ar-bd-bar i, .ar-cover, .ar-crit-r[data-state="absent"],
  .ar-chapter-asked, .ar-branch-h, .ar-prov, .ar-metric, .ar-unmeasured, .ar-becomes {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  /* The costs line is the one piece of colour worth keeping on paper. */
  .ar-costs { color: #7c4a03; }
  a[href]::after { content: ""; }
  /* Every "How to read this" is open on paper — there is nothing to click. */
  .ar-read[open] > summary, .ar-read > summary { list-style: none; }
  .ar-read dl, .ar-read:not([open]) dl { display: grid !important; }
}