/* ============================================================
   AltiGrad — the report stage
   ============================================================

   WHY THIS IS A SEPARATE FILE
   The check has two halves and they are not the same kind of surface. The intro
   and the quiz are a BRAND MOMENT: one navy band, one promise, one question at a
   time. The report is a DOCUMENT: ten scores, a ranked list, a twelve-week plan.
   Reading a document on a saturated navy gradient for two thousand pixels is the
   reason the report felt heavy — every card was a translucent white box on the
   same colour as every other card, and nothing had an edge.

   So the panel turns light the moment the report opens (`.is-report`, set in
   show() in assets/js/altigrad.js), and from there the report uses the same
   vocabulary as the rest of the site: white cards, one hairline each, the
   headline in ink, the supporting line in muted grey, green only for the thing
   that is going well. That is also what the score card is built from — a subject,
   a row of labelled facts, then the next action, exactly like a job card.

   Everything here is scoped to `.w2f-ag-panel.is-report` or to the score card
   itself, so the navy intro and quiz are untouched. The file is enqueued only on
   pages that render the tool, and it loads after main.css so these rules win
   without !important.

   THE SURFACE TOKENS
   The report sits on a very light slate (#f6f8fb) rather than pure white, so the
   white cards have something to sit on. It is the same relationship as the job
   board: page = tinted, card = white, hairline = #e5e7eb. */

.w2f-ag-panel.is-report {
  background: #f6f8fb;
  background-image: none;
  color: var(--c-text, #334155);
  box-shadow: 0 18px 44px rgba(15, 76, 129, .16);
  text-align: left;
  padding: 32px;
}

/* The dashboard renders the same report server-side, inside its own white card.
   It gets the same class so it inherits the ink-on-paper rules, but not the
   panel itself: a card inside a card would double every border on the page. */
.w2f-ag-panel.is-report.w2f-ag-report-inline {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* The report is a column of cards, not a centred poster. */
.w2f-ag-panel.is-report #w2f-ag-report { text-align: left; }

/* The stage carries a thin navy rule on the left, which reads as a bracket
   around the quiz on the band. On paper it is a stray line beside the cards. */
.w2f-ag-panel.is-report .w2f-ag-stage { border-left: 0; }

/* ============================================================
   THE SCORE CARD
   ============================================================ */

.w2f-ag-scorecard {
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 18px;
  padding: 24px;
  margin: 0 0 16px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
}

.w2f-ag-scorecard-top {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.w2f-ag-scorecard-copy { flex: 1 1 260px; min-width: 0; }

.w2f-ag-scorecard-eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--c-muted, #64748b);
}

/* The fact row. Four labelled columns, the same anatomy as the job card's
   location/experience/salary/work-mode row — one line, four answers. */
.w2f-ag-scorecard-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 18px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--c-border, #e5e7eb);
}

.w2f-ag-meta-cell { display: grid; gap: 4px; min-width: 0; }

.w2f-ag-meta-k {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-muted, #64748b);
}

.w2f-ag-meta-k svg { width: 12px; height: 12px; opacity: .8; }

.w2f-ag-meta-v {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-heading, #0f172a);
  overflow-wrap: anywhere;
}

.w2f-ag-meta-warn { color: #b45309; }
.w2f-ag-meta-ok { color: var(--c-success, #10b981); }

@media (max-width: 640px) {
  .w2f-ag-panel.is-report { padding: 18px 14px; border-radius: 18px; }
  .w2f-ag-scorecard { padding: 18px 16px; }
  .w2f-ag-scorecard-top { gap: 14px; }
  .w2f-ag-scorecard-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* Five bands wrapping into ragged two-and-one rows read as a broken list;
     a two-column grid reads as a scale. */
  .w2f-ag-panel.is-report .w2f-ag-scale {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .w2f-ag-panel.is-report .w2f-ag-scale-item { justify-content: flex-start; }
}

/* The half-second between submitting and the report: the panel has already
   turned light, so the loading state has to stop being white-on-navy text. */
.w2f-ag-panel.is-report .w2f-ag-loading { color: var(--c-muted, #64748b); }
.w2f-ag-panel.is-report .w2f-ag-spinner {
  border-color: rgba(148, 163, 184, .28);
  border-top-color: var(--c-accent, #10b981);
}

/* ============================================================
   THE RING
   ============================================================ */

.w2f-ag-panel.is-report .w2f-ag-ring { flex: 0 0 auto; }
.w2f-ag-panel.is-report .w2f-ag-ring-track { stroke: rgba(148, 163, 184, .22); }
.w2f-ag-panel.is-report .w2f-ag-ring-num b {
  color: var(--c-heading, #0f172a);
  font-size: 40px;
}
.w2f-ag-panel.is-report .w2f-ag-ring-num i { color: var(--c-muted, #64748b); }

/* ============================================================
   THE VERDICT
   ============================================================ */

.w2f-ag-panel.is-report .w2f-ag-verdict {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 800;
  color: var(--c-heading, #0f172a);
}
.w2f-ag-panel.is-report .w2f-ag-verdict-note {
  margin: 0;
  max-width: 52ch;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--c-muted, #64748b);
}

/* Why the number is the number — including a ceiling that held it down. */
.w2f-ag-panel.is-report .w2f-ag-score-note {
  margin: 14px 0 0;
  max-width: none;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(15, 76, 129, .05);
  border: 1px solid rgba(15, 76, 129, .12);
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-text, #334155);
}
.w2f-ag-panel.is-report .w2f-ag-score-note.is-capped {
  background: rgba(239, 68, 68, .07);
  border-color: rgba(239, 68, 68, .25);
  color: #991b1b;
}
.w2f-ag-panel.is-report .w2f-ag-todo {
  margin: 10px 0 0;
  max-width: none;
  font-size: 13.5px;
  font-weight: 700;
  color: #047857;
}

/* Where the score sits on the scale: the band you are in is the green one. */
.w2f-ag-panel.is-report .w2f-ag-scale {
  justify-content: flex-start;
  margin-top: 16px;
}
.w2f-ag-panel.is-report .w2f-ag-scale-item {
  background: var(--c-bg, #f1f5f9);
  border: 1px solid var(--c-border, #e5e7eb);
  color: var(--c-muted, #64748b);
}
.w2f-ag-panel.is-report .w2f-ag-scale-item i { color: #94a3b8; }
.w2f-ag-panel.is-report .w2f-ag-scale-item.is-on {
  background: rgba(16, 185, 129, .12);
  border-color: rgba(16, 185, 129, .45);
  color: #047857;
}
.w2f-ag-panel.is-report .w2f-ag-scale-item.is-on i { color: #059669; }

/* ============================================================
   THE CARDS
   ============================================================ */

.w2f-ag-panel.is-report .w2f-ag-report-box {
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 16px;
  padding: 20px 22px;
  margin: 0 0 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

.w2f-ag-panel.is-report .w2f-ag-report-title {
  color: var(--c-heading, #0f172a);
  font-size: 15.5px;
  margin-bottom: 8px;
}

.w2f-ag-panel.is-report .w2f-ag-report-sub {
  margin: -2px 0 14px;
  color: var(--c-muted, #64748b);
  font-size: 13px;
  line-height: 1.5;
}

/* The two-up row keeps its own margins so the cards align with the stack. */
.w2f-ag-panel.is-report .w2f-ag-report-grid { margin: 0 0 14px; gap: 14px; }
.w2f-ag-panel.is-report .w2f-ag-report-grid .w2f-ag-report-box { margin: 0; height: 100%; }

/* "Where to start" is the one card with a coloured edge — it is the answer. */
.w2f-ag-panel.is-report .w2f-ag-report-gap {
  background: rgba(16, 185, 129, .06);
  border-color: rgba(16, 185, 129, .35);
}
.w2f-ag-panel.is-report .w2f-ag-gap-text { color: var(--c-text, #334155); }
.w2f-ag-panel.is-report .w2f-ag-gap-text b { color: var(--c-heading, #0f172a); }

/* Today's first action — the brightest card in the free half. */
.w2f-ag-panel.is-report .w2f-ag-today {
  background: linear-gradient(135deg, rgba(16, 185, 129, .08), rgba(15, 76, 129, .05));
  border-color: rgba(16, 185, 129, .35);
}
.w2f-ag-panel.is-report .w2f-ag-today-text { color: var(--c-heading, #0f172a); }
.w2f-ag-panel.is-report .w2f-ag-today-note { color: var(--c-muted, #64748b); }

/* ============================================================
   CHIPS, LISTS, AND THE SMALLER BLOCKS
   ============================================================ */

.w2f-ag-panel.is-report .w2f-ag-role {
  background: var(--c-bg, #f1f5f9);
  border-color: var(--c-border, #e5e7eb);
  color: var(--c-heading, #0f172a);
}
.w2f-ag-panel.is-report .w2f-ag-role:hover {
  border-color: var(--c-accent, #10b981);
  color: #047857;
}

/* The barrier the visitor named: it is a red card, but a quiet one. */
.w2f-ag-panel.is-report .w2f-ag-barrier {
  background: rgba(239, 68, 68, .05);
  border-color: rgba(239, 68, 68, .22);
}
.w2f-ag-panel.is-report .w2f-ag-barrier-head { color: #991b1b; }
.w2f-ag-panel.is-report .w2f-ag-barrier-note { color: var(--c-text, #334155); }

/* Ranked focus */
.w2f-ag-panel.is-report .w2f-ag-focus-item {
  background: var(--c-bg, #f8fafc);
  border-color: var(--c-border, #e5e7eb);
}
.w2f-ag-panel.is-report .w2f-ag-focus-area { color: var(--c-heading, #0f172a); }
.w2f-ag-panel.is-report .w2f-ag-focus-why { color: var(--c-text, #334155); }
.w2f-ag-panel.is-report .w2f-ag-focus-step { color: #047857; }

/* Checklist for the track */
.w2f-ag-panel.is-report .w2f-ag-learn li {
  color: var(--c-text, #334155);
  border-bottom-color: var(--c-border, #e5e7eb);
}
.w2f-ag-panel.is-report .w2f-ag-learn li::before { color: var(--c-accent, #10b981); }

/* Strong areas */
.w2f-ag-panel.is-report .w2f-ag-strengths li { border-bottom-color: var(--c-border, #e5e7eb); }
.w2f-ag-panel.is-report .w2f-ag-strengths b { color: var(--c-heading, #0f172a); }
.w2f-ag-panel.is-report .w2f-ag-strengths i { color: #047857; }
.w2f-ag-panel.is-report .w2f-ag-strengths span { color: var(--c-muted, #64748b); }

/* The visitor's own words */
.w2f-ag-panel.is-report .w2f-ag-notes li,
.w2f-ag-panel.is-report .w2f-ag-notes-out li { border-bottom-color: var(--c-border, #e5e7eb); }
.w2f-ag-panel.is-report .w2f-ag-notes b,
.w2f-ag-panel.is-report .w2f-ag-notes-out b { color: #047857; }
.w2f-ag-panel.is-report .w2f-ag-notes span,
.w2f-ag-panel.is-report .w2f-ag-notes-out span { color: var(--c-text, #334155); }

/* ============================================================
   THE ROADMAP BLOCKS
   ============================================================ */

.w2f-ag-panel.is-report .w2f-ag-stage-card,
.w2f-ag-panel.is-report .w2f-ag-horizon {
  background: var(--c-bg, #f8fafc);
  border-color: var(--c-border, #e5e7eb);
}
.w2f-ag-panel.is-report .w2f-ag-horizon-long {
  background: rgba(16, 185, 129, .07);
  border-color: rgba(16, 185, 129, .3);
}
.w2f-ag-panel.is-report .w2f-ag-stage-title,
.w2f-ag-panel.is-report .w2f-ag-horizon-aim { color: var(--c-heading, #0f172a); }
.w2f-ag-panel.is-report .w2f-ag-stage-outcome,
.w2f-ag-panel.is-report .w2f-ag-horizon ul li { color: var(--c-text, #334155); }
.w2f-ag-panel.is-report .w2f-ag-stage-weeks,
.w2f-ag-panel.is-report .w2f-ag-horizon-window { color: #047857; }
.w2f-ag-panel.is-report .w2f-ag-stage-area {
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e5e7eb);
  color: var(--c-heading, #0f172a);
}
.w2f-ag-panel.is-report .w2f-ag-stage-area i { color: #047857; }
.w2f-ag-panel.is-report .w2f-ag-stage-actions li { color: var(--c-text, #334155); }
.w2f-ag-panel.is-report .w2f-ag-horizon-done {
  border-top-color: var(--c-border, #e5e7eb);
  color: var(--c-muted, #64748b);
}
.w2f-ag-panel.is-report .w2f-ag-horizon-done b { color: #047857; }

/* ------------------------------------------------------------
   THE WHITE TEXT THE NAVY PANEL LEFT BEHIND
   ------------------------------------------------------------
   Turning an element's container light does not turn its descendants dark, and
   every one of these was written as `rgba(255,255,255,…)` for the navy band:
   the per-question breakdown, the three quick wins, the stage finish line and
   the whole optional AI read. On the white cards they were not faint — they
   were invisible, which is a report that looks empty to the person reading it
   and perfectly fine to anyone reading the markup.

   This block is the rule that keeps it from happening again: anything inside
   `.is-report` that prints text has an explicit ink or muted ink colour, and
   nothing relies on inheriting from the panel it no longer sits on.
   ------------------------------------------------------------ */

/* The per-question breakdown and the hiring bar on every row. */
.w2f-ag-panel.is-report .w2f-ag-bd-area { color: var(--c-heading, #0f172a); }
.w2f-ag-panel.is-report .w2f-ag-bd-num { color: var(--c-heading, #0f172a); }
.w2f-ag-panel.is-report .w2f-ag-bd-row.is-above .w2f-ag-bd-num::after { color: #047857; }
.w2f-ag-panel.is-report .w2f-ag-bd-bar { background: rgba(148, 163, 184, .26); }
.w2f-ag-panel.is-report .w2f-ag-bd-bar u { background: #0f172a; }

/* The three quick wins. */
.w2f-ag-panel.is-report .w2f-ag-quick li {
  color: var(--c-text, #334155);
  border-bottom-color: var(--c-border, #e5e7eb);
}

/* Each stage's finish line — green, not the fluorescent mint it was. */
.w2f-ag-panel.is-report .w2f-ag-milestone {
  background: rgba(16, 185, 129, .08);
  border-color: rgba(16, 185, 129, .3);
  color: #065f46;
}

/* The optional AI read, laid on the light card the way the dashboard does it. */
.w2f-ag-panel.is-report .w2f-agai {
  color: var(--c-text, #334155);
  background: linear-gradient(150deg, rgba(15, 76, 129, .05), rgba(16, 185, 129, .05));
  border-color: var(--c-border, #e5e7eb);
}
.w2f-ag-panel.is-report .w2f-agai-title,
.w2f-ag-panel.is-report .w2f-agai-headline,
.w2f-ag-panel.is-report .w2f-agai-focus,
.w2f-ag-panel.is-report .w2f-agai-haim { color: var(--c-heading, #0f172a); }
.w2f-ag-panel.is-report .w2f-agai-read p,
.w2f-ag-panel.is-report .w2f-agai-week li,
.w2f-ag-panel.is-report .w2f-agai-stage li,
.w2f-ag-panel.is-report .w2f-agai-hcol li,
.w2f-ag-panel.is-report .w2f-agai-note,
.w2f-ag-panel.is-report .w2f-agai-loading-text { color: var(--c-text, #334155); }
.w2f-ag-panel.is-report .w2f-agai-week, .w2f-ag-panel.is-report .w2f-agai-plan,
.w2f-ag-panel.is-report .w2f-agai-horizons { border-top-color: var(--c-border, #e5e7eb); }
.w2f-ag-panel.is-report .w2f-agai-week h4,
.w2f-ag-panel.is-report .w2f-agai-plan h4,
.w2f-ag-panel.is-report .w2f-agai-horizons h4,
.w2f-ag-panel.is-report .w2f-agai-flag strong { color: var(--c-muted, #64748b); }
.w2f-ag-panel.is-report .w2f-agai-stage,
.w2f-ag-panel.is-report .w2f-agai-flag,
.w2f-ag-panel.is-report .w2f-agai-hcol { background: rgba(148, 163, 184, .1); border-color: var(--c-border, #e5e7eb); }
.w2f-ag-panel.is-report .w2f-agai-hcol-long { background: rgba(16, 185, 129, .1); border-color: rgba(16, 185, 129, .35); }
.w2f-ag-panel.is-report .w2f-agai-hwindow { color: #047857; }

/* Resources and next steps */
.w2f-ag-panel.is-report .w2f-ag-res-area { color: #047857; }
.w2f-ag-panel.is-report .w2f-ag-res-col li { color: var(--c-text, #334155); }
.w2f-ag-panel.is-report .w2f-ag-next-item {
  background: var(--c-bg, #f8fafc);
  border: 1px solid var(--c-border, #e5e7eb);
}
.w2f-ag-panel.is-report .w2f-ag-next-item:hover {
  background: var(--c-surface, #fff);
  border-color: rgba(16, 185, 129, .4);
}
.w2f-ag-panel.is-report .w2f-ag-next-item b { color: var(--c-heading, #0f172a); }
.w2f-ag-panel.is-report .w2f-ag-next-item span { color: var(--c-muted, #64748b); }

/* Progress drops and the footer line */
.w2f-ag-panel.is-report .w2f-ag-offline {
  background: rgba(234, 179, 8, .12);
  border-color: rgba(234, 179, 8, .4);
  color: #92400e;
  margin: 0 0 14px;
}
.w2f-ag-panel.is-report .w2f-ag-result-note { color: var(--c-muted, #64748b); }

/* ============================================================
   THE ROLE CARDS
   ============================================================
   Closed, a card is a row: the role on the left, what it pays and what is
   missing under it, and the fit meter on the right. That is the job board's
   card grammar applied to a match rather than a vacancy, so a reader can
   compare three roles without opening any of them. */

.w2f-ag-panel.is-report .w2f-ag-role-detail { gap: 12px; }

.w2f-ag-panel.is-report .w2f-ag-role-card {
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.w2f-ag-panel.is-report .w2f-ag-role-card:hover {
  border-color: rgba(16, 185, 129, .45);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
}
.w2f-ag-panel.is-report .w2f-ag-role-card[open] { border-color: rgba(16, 185, 129, .45); }

.w2f-ag-panel.is-report .w2f-ag-role-sum {
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
}
.w2f-ag-panel.is-report .w2f-ag-role-sum::before { color: var(--c-muted, #64748b); }

.w2f-ag-role-head { display: grid; gap: 5px; flex: 1 1 auto; min-width: 0; }
.w2f-ag-role-title { font-weight: 700; font-size: 15.5px; color: var(--c-heading, #0f172a); }

.w2f-ag-role-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.w2f-ag-role-facts span { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }
.w2f-ag-role-facts i {
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-muted, #64748b);
}
.w2f-ag-role-facts b {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-text, #334155);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 26ch;
}

.w2f-ag-role-fitwrap {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto 54px auto;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #047857;
}
.w2f-ag-role-fitwrap b { font-size: 13.5px; font-weight: 800; }
.w2f-ag-role-fitwrap em { font-style: normal; font-weight: 700; opacity: .8; }
.w2f-ag-role-meter {
  display: block;
  height: 6px;
  width: 54px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .25);
  overflow: hidden;
}
.w2f-ag-role-meter i { display: block; height: 100%; border-radius: inherit; background: var(--c-accent, #10b981); }
.w2f-ag-role-fit { display: none; }

.w2f-ag-role-cta { margin: 12px 0 0; }
.w2f-ag-role-cta a { font-weight: 700; font-size: 13.5px; color: #047857; }
.w2f-ag-role-cta a:hover { text-decoration: underline; }

@media (max-width: 560px) {
  .w2f-ag-panel.is-report .w2f-ag-role-sum { flex-wrap: wrap; gap: 8px; }
  .w2f-ag-role-facts b { max-width: 18ch; }
  .w2f-ag-role-fitwrap { grid-template-columns: auto auto auto; }
}

/* ============================================================
   BUTTONS AND THE GATE
   ============================================================
   The gate (the free-account form) sits in the same stage, so it inherits the
   light panel. Its labels were white for the navy band; on paper they have to
   be ink, and the form fields keep their own contrast. */

.w2f-ag-panel.is-report .w2f-ag-nav-ghost {
  color: var(--c-heading, #0f172a);
  border: 1px solid var(--c-border, #e5e7eb);
  background: var(--c-surface, #fff);
}
.w2f-ag-panel.is-report .w2f-ag-nav-ghost:hover {
  background: var(--c-bg, #f1f5f9);
  border-color: rgba(16, 185, 129, .4);
}

.w2f-ag-panel.is-report .w2f-ag-gate {
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
  margin: 0 auto;
}
.w2f-ag-panel.is-report .w2f-ag-question { color: var(--c-heading, #0f172a); }
.w2f-ag-panel.is-report .w2f-ag-gate-sub p { color: var(--c-muted, #64748b); }
.w2f-ag-panel.is-report .w2f-ag-gate-list li { color: var(--c-text, #334155); }
.w2f-ag-panel.is-report .w2f-ag-gate-alt { color: var(--c-muted, #64748b); }
.w2f-ag-panel.is-report .w2f-ag-gate-alt a { color: #047857; }
.w2f-ag-panel.is-report .w2f-ag-lead-form label { color: var(--c-muted, #64748b); }
.w2f-ag-panel.is-report .w2f-ag-privacy { color: var(--c-muted, #64748b); }
.w2f-ag-panel.is-report .w2f-ag-error { color: #b91c1c; }
.w2f-ag-panel.is-report .w2f-ag-consent span { color: var(--c-muted, #64748b); }

@media (max-width: 640px) {
  .w2f-ag-panel.is-report .w2f-ag-report-box { padding: 16px 15px; }
  .w2f-ag-panel.is-report .w2f-ag-gate { padding: 20px 16px; }
}

/* The share row — the only line on the report addressed to someone else. */
.w2f-ag-result-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 0;
  padding: 14px 18px;
  border: 1px dashed var(--c-border, #e5e7eb);
  border-radius: 14px;
  background: rgba(148, 163, 184, .06);
}
.w2f-ag-result-share > span {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-muted, #64748b);
}
.w2f-ag-panel.is-report .w2f-ag-result-share .w2f-ag-nav-ghost { margin-left: auto; }

/* Printing the plan: the cards keep their hairlines, the colour comes out. */
@media print {
  .w2f-ag-panel.is-report { background: #fff; box-shadow: none; }
  .w2f-ag-panel.is-report .w2f-ag-report-box,
  .w2f-ag-scorecard { box-shadow: none; break-inside: avoid; }
  .w2f-ag-panel.is-report .w2f-ag-result-cta,
  .w2f-ag-panel.is-report .w2f-ag-report-ad { display: none; }
}