/* ═══════════════════════════════════════════════════════════════════════════
   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;
}

.ar-page { background: var(--surface-1, #fafafa); margin: 0; padding: 2.5rem 1.25rem 4rem; }

/* 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.25rem; }
.ar-section > h2 { margin: 0 0 .1rem; }
.ar-section > .ar-lede { color: var(--text-2, #52525b); font-size: .875rem; margin: 0 0 .9rem; }

/* ── 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; }
.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; }

/* ── 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); }

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
  .ar-page { background: #fff; padding: 0; }
  .ar { max-width: none; font-size: 10.5pt; }
  .ar-cta, .ar-proof > button { display: none; }
  /* 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; }
  .ar-section { break-inside: avoid; margin-bottom: 1.1rem; }
  .ar-convo, .ar-fix { break-inside: avoid; }
  a[href]::after { content: ""; }
}