/* =====================================================================
   PRIYAN Digital Growth Score™ — the report
   ---------------------------------------------------------------------
   Loaded only by the report page. Builds on the tokens in main.css.

   Score colour is set once, here, by the five level classes named in the
   implementation prompt. Nothing in JavaScript or PHP picks a colour —
   the model says which bucket a score is in and the stylesheet decides
   what that looks like. Colour is never the only signal: every bar and
   row also carries its number and its status in text.

   Every level colour clears 4.5:1 against both white and its own soft
   background, because these are used on 13px uppercase labels.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1  SCORE LEVELS — the one place score colour is decided
   --------------------------------------------------------------------- */
.score-low      { --level: #C8452F; --level-soft: #FDEDEA; --level-bd: #F3C9C6; }
.score-medium   { --level: #8A5A14; --level-soft: #FDF6E6; --level-bd: #EFD9A8; }
.score-good     { --level: #3F51C4; --level-soft: #EFF1FF; --level-bd: #D5DAFF; }
.score-strong   { --level: #1F8377; --level-soft: #E4F7F4; --level-bd: #C4EBE6; }
.score-ready    { --level: #16694F; --level-soft: #E3F5EC; --level-bd: #BCE4D2; }

/* ---------------------------------------------------------------------
   2  PAGE SHELL
   --------------------------------------------------------------------- */
.report-shell {
  padding: calc(var(--s-9) + 2rem) 0 var(--s-9);
  background: var(--offwhite);
}
.report-shell__notice { max-width: 54rem; margin: 0 auto var(--s-7); }
.report-shell__intro {
  max-width: 44rem; margin: 0 auto var(--s-7);
  text-align: center;
}
.report-shell__title { font-size: var(--fs-h2); margin: .3rem 0 .6rem; }
.report-shell__intro .btn-row { justify-content: center; margin-top: var(--s-6); }
.no-js [data-print] { display: none; }

/* ---------------------------------------------------------------------
   3  THE REPORT DOCUMENT
   Three sections that read as three pages, on a paper-like surface so it
   is obvious this is a document rather than another marketing section.
   --------------------------------------------------------------------- */
.report {
  max-width: 60rem;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card, 20px);
  overflow: hidden;
  box-shadow: 0 24px 60px -32px rgba(11, 16, 32, .35);
}
.report__page { padding: var(--s-8) var(--s-7); }
.report__page + .report__page { border-top: 1px solid var(--line); }
.report__page--cover { background: linear-gradient(180deg, var(--offwhite), var(--white) 40%); }

.report__head {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  align-items: flex-start; justify-content: space-between;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--line);
}
.report__eyebrow {
  margin: 0 0 .3rem;
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-subtle);
}
.report__title { font-size: var(--fs-h3); margin: 0; }

.report__h1 { font-size: var(--fs-h3); margin: 0 0 .4rem; }
.report__h2 {
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-subtle);
  margin: 0 0 var(--s-4);
}
.report__lead { color: var(--text-muted); margin: 0 0 var(--s-6); max-width: 44rem; }

/* --- Who and when --------------------------------------------------- */
.report__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-7);
  margin: var(--s-5) 0 var(--s-7);
}
.report__meta div { min-width: 0; }
.report__meta dt {
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: .2rem;
}
.report__meta dd { margin: 0; font-weight: 700; color: var(--ink); }
.report__id { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* ---------------------------------------------------------------------
   4  THE SCORE
   --------------------------------------------------------------------- */
.report__score {
  display: grid; gap: var(--s-7);
  align-items: center;
}
@media (min-width: 760px) {
  .report__score { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: var(--s-8); }
}

.report-dial { text-align: center; }
.report-dial svg { width: 100%; max-width: 15rem; height: auto; display: block; margin: 0 auto; }
.report-dial__track { stroke: var(--line); }
.report-dial__value { stroke: var(--level, var(--accent)); transition: stroke-dashoffset .8s var(--ease, ease); }
.report-dial__num {
  font-size: 3.4rem; font-weight: 800; fill: var(--ink);
  font-variant-numeric: tabular-nums;
}
.report-dial__den { font-size: .95rem; fill: var(--text-subtle); font-weight: 600; }
.report-dial__band {
  display: inline-block;
  margin: var(--s-4) 0 0;
  padding: .35rem .85rem;
  border-radius: 999px;
  background: var(--level-soft, var(--accent-soft));
  border: 1px solid var(--level-bd, var(--line));
  color: var(--level, var(--accent-ink));
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}

/* --- Category bars --------------------------------------------------- */
.cat-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.cat-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.5rem;
  grid-template-areas: "label score" "track track";
  gap: .3rem .75rem;
  align-items: center;
}
@media (min-width: 560px) {
  .cat-bar {
    grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) 2.5rem;
    grid-template-areas: "label track score";
    gap: .75rem;
  }
}
.cat-bar__label { grid-area: label; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.cat-bar__track {
  grid-area: track;
  height: 10px; border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.cat-bar__track i {
  display: block; height: 100%;
  border-radius: inherit;
  background: var(--level, var(--accent));
}
.cat-bar__score {
  grid-area: score; text-align: right;
  font-weight: 800; color: var(--level, var(--ink));
  font-variant-numeric: tabular-nums;
}

/* --- The written summary --------------------------------------------- */
.report__summary {
  margin: var(--s-7) 0 0;
  padding: var(--s-5) var(--s-6);
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 12px 12px 0;
}
.report__summary p { margin: 0; color: #3B4470; }

/* --- Strengths and gaps ---------------------------------------------- */
.report__cols { display: grid; gap: var(--s-7); margin-top: var(--s-7); }
@media (min-width: 760px) { .report__cols { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }

.report-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.report-list li { display: flex; gap: .75rem; align-items: flex-start; font-size: var(--fs-sm); }
.report-list li p { margin: 0; color: var(--text-muted); }
.report-list .icon { flex: none; margin-top: .15rem; }
.report-list--good .icon { color: var(--accent-2-ink); }
.report-list--gap .icon { color: #8A5A14; }

.report-list__title {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  font-weight: 700; color: var(--ink) !important;
  margin-bottom: .2rem !important;
}
.report-list__score {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs); font-weight: 800;
  padding: .1rem .45rem;
  border-radius: 5px;
  background: var(--offwhite);
  border: 1px solid var(--line);
  color: var(--text-muted);
}
.report-list__note {
  font-size: var(--fs-xs); font-weight: 500;
  color: var(--text-subtle); font-style: italic;
}
.report__none { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; }

/* --- Priority pill ---------------------------------------------------- */
.pill {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 999px;
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .04em;
  border: 1px solid var(--line);
  background: var(--offwhite);
  color: var(--text-muted);
}
.pill--high            { background: #FDEDEA; border-color: #F3C9C6; color: #A33622; }
.pill--medium-high     { background: #FDF6E6; border-color: #EFD9A8; color: #8A5A14; }
.pill--medium          { background: #EFF1FF; border-color: #D5DAFF; color: #3F51C4; }
.pill--low-maintain    { background: #E4F7F4; border-color: #C4EBE6; color: #1A6E63; }

/* ---------------------------------------------------------------------
   5  SNAPSHOT
   --------------------------------------------------------------------- */
.snapshot { display: grid; gap: var(--s-5); }
@media (min-width: 700px) { .snapshot { grid-template-columns: 1fr 1fr; } }

.snapshot__row {
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-left: 4px solid var(--level, var(--line));
  border-radius: 12px;
  background: var(--white);
  min-width: 0;
}
.snapshot__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
}
.snapshot__name { font-size: var(--fs-h4); margin: 0; }
.snapshot__score {
  font-size: 1.6rem; font-weight: 800; color: var(--level, var(--ink));
  font-variant-numeric: tabular-nums;
}
.snapshot__score small { font-size: .8rem; font-weight: 700; color: var(--text-subtle); }

.snapshot__status {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem;
  margin: .35rem 0 .6rem;
  font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--level, var(--text-muted));
}
.snapshot__status .dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--level, var(--text-subtle));
  flex: none;
}
.snapshot__priority {
  color: var(--text-subtle); font-weight: 600;
  letter-spacing: .02em; text-transform: none;
}
.snapshot__desc { margin: 0 0 .6rem; font-size: var(--fs-sm); color: var(--text-muted); }
.snapshot__weight { font-size: var(--fs-xs); color: var(--text-subtle); }

/* ---------------------------------------------------------------------
   6  OPPORTUNITIES
   --------------------------------------------------------------------- */
.opps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); counter-reset: opp; }
.opp {
  display: flex; gap: var(--s-5); align-items: flex-start;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--offwhite);
  min-width: 0;
}
.opp__num {
  flex: none;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink); color: #fff;
  font-weight: 800; font-size: var(--fs-sm);
}
.opp__body { min-width: 0; }
.opp__title {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: var(--fs-h4); margin: 0 0 .6rem;
}
.opp__detail { margin: 0; display: grid; gap: .15rem; }
.opp__detail dt {
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-subtle);
  margin-top: .6rem;
}
.opp__detail dt:first-child { margin-top: 0; }
.opp__detail dd { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* ---------------------------------------------------------------------
   7  ROADMAP
   --------------------------------------------------------------------- */
.roadmap { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
@media (min-width: 760px) { .roadmap { grid-template-columns: repeat(3, 1fr); } }

.roadmap__stage {
  padding: var(--s-5);
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--white);
  min-width: 0;
}
.roadmap__stage--now  { border-color: #D5DAFF; background: var(--accent-soft); }
.roadmap__stage--next { border-color: #C4EBE6; background: #E4F7F4; }
.roadmap__when {
  margin: 0 0 .4rem;
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
}
.roadmap__what { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* ---------------------------------------------------------------------
   8  RECOMMENDED SERVICES
   --------------------------------------------------------------------- */
.rec-grid { display: grid; gap: var(--s-5); }
@media (min-width: 760px) { .rec-grid { grid-template-columns: repeat(3, 1fr); } }

.rec {
  display: flex; flex-direction: column; gap: .5rem;
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--white);
  min-width: 0;
}
.rec__rank {
  margin: 0;
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink);
}
.rec__name { font-size: var(--fs-h4); margin: 0; }
.rec__reason { margin: 0; font-size: var(--fs-sm); color: var(--ink); font-weight: 600; }
.rec__action { margin: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.rec .link-arrow { margin-top: auto; padding-top: .5rem; font-size: var(--fs-sm); }

/* ---------------------------------------------------------------------
   9  CLOSING
   --------------------------------------------------------------------- */
.report-cta {
  margin-top: var(--s-9);
  padding: var(--s-7) var(--s-6);
  border-radius: 16px;
  background: var(--ink);
  color: #fff;
  text-align: center;
}
.report-cta__title { font-size: var(--fs-h3); margin: 0 0 .5rem; color: #fff; }
.report-cta__lead { margin: 0 auto var(--s-6); max-width: 34rem; color: rgba(255, 255, 255, .78); font-size: var(--fs-sm); }
.report-cta .btn-row { justify-content: center; }

.report__foot {
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
  text-align: center;
}
.report__foot-brand {
  margin: 0 0 .3rem;
  font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
}
.report__foot-id {
  margin: 0 0 var(--s-4);
  font-size: var(--fs-xs); color: var(--text-subtle);
  font-variant-numeric: tabular-nums;
}
.report__disclaimer {
  margin: .5rem auto 0; max-width: 46rem;
  font-size: var(--fs-xs); line-height: 1.6; color: var(--text-subtle);
}

/* ---------------------------------------------------------------------
   10  NARROW SCREENS
   --------------------------------------------------------------------- */
@media (max-width: 640px) {
  .report-shell { padding-top: calc(var(--s-8) + 2rem); }
  .report { border-radius: 16px; }
  .report__page { padding: var(--s-6) var(--s-5); }
  .report__meta { gap: var(--s-4) var(--s-6); }
  .opp { flex-direction: column; gap: var(--s-4); }
  .report-cta { padding: var(--s-6) var(--s-5); }
}

/* Grid and flex children must be allowed to shrink, or a long service
   name pushes the document wider than the viewport. */
.report__score > *, .report__cols > *, .snapshot > *, .roadmap > *, .rec-grid > * { min-width: 0; }

/* ---------------------------------------------------------------------
   11  A LINK THAT DID NOT RESOLVE
   No report is rendered in this state, so the page needs to stand on
   its own rather than act as a caption above one.
   --------------------------------------------------------------------- */
.report-miss {
  max-width: 40rem;
  margin: 0 auto;
  padding: var(--s-8) var(--s-6);
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-card, 20px);
}
.report-miss__title { font-size: var(--fs-h3); margin: 0 0 .6rem; }
.report-miss .btn-row { flex-wrap: wrap; justify-content: center; }

/* =====================================================================
   12  PRINT
   ---------------------------------------------------------------------
   A report is a document, and people print documents. The three
   sections are laid out as three sheets: score, detail, plan.

   Two things are deliberately kept in colour. The score dial and the
   category bars are the report — printing them grey would throw away
   the thing the reader came for — so they are marked
   print-color-adjust: exact. Everything else drops to black on white.

   Nothing here needs a PDF service: the browser's own "Save as PDF"
   produces the file, which is why the layout has to be right rather
   than merely present.
   ===================================================================== */
/* Both of these exist only on paper. Declared before the print block so
   the print rules win on source order rather than on !important. */
.print-foot { display: none; }
.report-cta__print { display: none; }

@page {
  size: A4;
  /* Room at the foot for the running footer below. */
  margin: 14mm 12mm 18mm;
}

@media print {

  /* --- The page around the report ---------------------------------- */
  .report-shell {
    padding: 0 !important;
    background: #fff !important;
  }
  .report-shell .shell { max-width: none; padding: 0; }

  /* The screen intro is chrome: a heading, two buttons and a line about
     keeping the link. On paper the document speaks for itself. */
  .report-shell__intro,
  .report-shell__notice,
  .breadcrumbs,
  /* The report carries its own footer, with the audit ID. The site one
     would be a second, contradictory ending. */
  .site-footer,
  [data-print] { display: none !important; }

  /* --- The document ------------------------------------------------- */
  .report {
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: #fff !important;
  }
  .report__page {
    padding: 0 0 6mm;
    background: #fff !important;
    border: 0;
  }
  /* Score, detail, plan — one sheet each. */
  .report__page + .report__page {
    break-before: page;
    padding-top: 4mm;
  }

  /* --- Typography ---------------------------------------------------- */
  body { font-size: 10.5pt; line-height: 1.45; color: #000; }
  .report__title { font-size: 16pt; }
  .report__h1 { font-size: 14pt; }
  .report__h2 { font-size: 8pt; }
  .snapshot__name, .opp__title, .rec__name { font-size: 11.5pt; }
  .report__lead, .report-list li, .snapshot__desc, .opp__detail dd,
  .roadmap__what, .rec__reason, .rec__action { font-size: 9.5pt; }
  .report__disclaimer, .snapshot__weight, .report__foot-id { font-size: 8pt; }

  /* --- Keep the score legible -------------------------------------- */
  /* The one place colour is worth ink: these carry the finding. */
  .report-dial__value,
  .cat-bar__track i,
  .cat-bar__score,
  .snapshot__score,
  .snapshot__status .dot,
  .snapshot__row,
  .report-dial__band,
  .pill {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .report-dial svg { max-width: 46mm; }
  .report-dial__num { font-size: 2.6rem; }
  .cat-bar__track { background: #E6E8EF !important; }

  /* --- Nothing splits across a page break --------------------------- */
  .report__summary,
  .report-list li,
  .cat-bar,
  .snapshot__row,
  .opp,
  .roadmap__stage,
  .rec,
  .report__foot,
  .report-cta { break-inside: avoid; page-break-inside: avoid; }

  .report__h1, .report__h2, .snapshot__name, .opp__title {
    break-after: avoid; page-break-after: avoid;
  }

  /* --- Panels that are dark on screen ------------------------------- */
  .report-cta {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #C9CFDD;
    margin-top: 8mm;
    padding: 6mm;
  }
  .report-cta__title { color: #000 !important; font-size: 12pt; }
  .report-cta__lead { color: #333 !important; }
  .report__page--cover { background: #fff !important; }
  .report__summary { background: #F4F6FF !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* A button does nothing on paper; the contact line replaces it. */
  .report-cta .btn-row { display: none !important; }
  .report-cta__print {
    display: block;
    margin: 0;
    font-size: 10pt;
    font-weight: 700;
    color: #000;
  }

  /* --- Links people might type back in ------------------------------ */
  /* main.css appends the href for absolute links; these are root-relative,
     so the full address is carried in an attribute instead. */
  .rec .link-arrow::after {
    content: " " attr(data-print-url);
    font-weight: 500;
    font-size: 8.5pt;
    color: #555;
  }
  .rec .link-arrow { color: #000 !important; }
  .rec .link-arrow span[aria-hidden] { display: none; }

  /* --- The running footer ------------------------------------------- */
  /* Repeated on every sheet by Chrome, so a page that gets separated
     still says which audit it belongs to. */
  .print-foot {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 2mm;
    border-top: 1px solid #D8DCE6;
    font-size: 7.5pt;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #555;
  }

  /* --- Fitting four sheets ------------------------------------------ */
  /* The snapshot and the opportunities are each a sheet’s worth, so they
     get one each rather than one and a half. */
  .report__h1--break { break-before: page; page-break-before: page; padding-top: 4mm; }

  .snapshot__row { padding: 4mm; }
  .snapshot__desc { margin-bottom: 2mm; }
  .opp { padding: 4mm; gap: 4mm; }
  .opp__title { margin-bottom: 2mm; }
  .opp__detail dt { margin-top: 3mm; }
  .rec { padding: 4mm; gap: 2mm; }
  .rec-grid { gap: 4mm; }
  .roadmap { gap: 4mm; }
  .roadmap__stage { padding: 4mm; }
  .notice { padding: 4mm; margin-top: 5mm !important; }

  /* The screen spacing utilities are generous by design; on paper the
     same gaps were costing a whole extra sheet. */
  .report .mt-9 { margin-top: 6mm !important; }
  .report .mt-8 { margin-top: 5mm !important; }
  .report__lead { margin-bottom: 4mm; }

  .report-cta { margin-top: 6mm; padding: 5mm; }
  .report-cta__lead { margin-bottom: 3mm; }
  .report__foot { margin-top: 5mm; padding-top: 4mm; }
  .report__disclaimer { margin-top: 2mm; line-height: 1.4; }

  /* --- Odds and ends ------------------------------------------------ */
  .report__meta { gap: 4mm 8mm; margin-bottom: 6mm; }
  .snapshot { gap: 4mm; }
  .opps { gap: 5mm; }
  .opp__num { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .report-miss .btn-row { display: none !important; }
}