/* ==========================================================================
   Report design system. Loaded only by report.html, so nothing here can
   disturb the landing page or the app screens.

   Two rules govern every choice below:
   1. The PDF is the deliverable. Anything that only works on screen is a bug.
   2. Nothing may depend on a background printing. Chrome lets the user turn
      background graphics off, so every piece of text sits on white.
   ========================================================================== */

.rpt{
  --ink:#0d1117;
  --ink-2:#3d4757;          /* body text on white */
  --ink-3:#68738a;          /* secondary */
  --rule:#e4e8ef;
  --rule-2:#f0f3f8;
  --paper:#fff;

  --pass:#0e7c4a; --pass-bg:#e8f6ee;
  --warn:#b45309; --warn-bg:#fdf3e3;
  --fail:#be123c; --fail-bg:#fdeaee;
  --none:#64748b; --none-bg:#eef1f5;

  --gap:28px;
  --measure:74ch;

  color:var(--ink-2);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"cv05" 1,"ss01" 1;
}
.rpt-wrap{max-width:1040px;margin:0 auto;padding:0 24px}

.rpt h1,.rpt h2,.rpt h3,.rpt h4{color:var(--ink);letter-spacing:-.018em}
.rpt h2{font-size:1.55rem}
.rpt h3{font-size:1.06rem;margin-bottom:.35em}
.rpt h4{font-size:.98rem}
.rpt p{color:var(--ink-2)}
.rpt .lede{font-size:1.06rem;line-height:1.62;color:var(--ink-3);max-width:var(--measure)}
.rpt .note{font-size:.85rem;line-height:1.6;color:var(--ink-3);max-width:var(--measure)}
.rpt strong{color:var(--ink)}

/* --- cover ---------------------------------------------------------------- */
.cover{padding:14px 0 34px}
.cover-bar{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;
  padding-bottom:16px;border-bottom:2px solid var(--accent)}
.cover-bar img{max-height:46px;max-width:180px}
.cover-mark{font-size:1.15rem;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.cover-issued{margin-left:auto;text-align:right;font-size:.8rem;line-height:1.5;color:var(--ink-3)}
.cover-issued b{display:block;color:var(--ink);font-size:.92rem;letter-spacing:-.01em}

/* reset the landing page's pill-shaped .eyebrow back to a plain kicker */
.rpt .eyebrow{display:block;background:none;padding:0;border-radius:0;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:30px 0 12px}
.cover h1{font-size:2.9rem;line-height:1.08;letter-spacing:-.03em;margin:0 0 .4em;
  max-width:20ch;color:var(--ink)}
.cover-sub{font-size:1.08rem;line-height:1.6;color:var(--ink-3);max-width:66ch;margin:0}
.cover-sub .host{color:var(--ink);font-weight:600}

/* --- scorecard ------------------------------------------------------------ */
.scorecard{display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:center;
  margin-top:32px;padding:28px 30px;border:1px solid var(--rule);border-radius:14px;
  background:var(--paper)}
@media(max-width:720px){.scorecard{grid-template-columns:1fr;gap:24px}}

.gauge{width:152px;height:152px;flex:none}
.gauge circle{fill:none;stroke-width:11;transform:rotate(-90deg);transform-origin:60px 60px}
.gauge .track{stroke:#e9edf3}
.gauge .value{stroke:var(--sc);stroke-linecap:round;stroke-dasharray:var(--dash) 400}
.gauge .num{font-size:35px;font-weight:700;fill:var(--ink);text-anchor:middle;
  letter-spacing:-.02em}
.gauge .den{font-size:10px;font-weight:600;fill:var(--ink-3);text-anchor:middle;
  letter-spacing:.09em}

.verdict{font-size:1.5rem;font-weight:650;letter-spacing:-.02em;color:var(--ink);
  margin:0 0 6px}
.verdict-sub{margin:0 0 20px;color:var(--ink-3);max-width:58ch}

.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  border-top:1px solid var(--rule);padding-top:18px}
@media(max-width:520px){.kpis{grid-template-columns:repeat(3,1fr);gap:6px}}
.kpi b{display:block;font-size:1.85rem;font-weight:700;line-height:1.05;
  letter-spacing:-.025em;color:var(--ink)}
.kpi b .of{display:inline;font-size:.9rem;font-weight:600;color:var(--ink-3);letter-spacing:0}
.kpi > span{display:block;font-size:.72rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-top:3px}
@media(max-width:520px){.kpi b{font-size:1.4rem}.kpi > span{font-size:.62rem;letter-spacing:.05em}}

/* score scale: context for the number without inventing benchmark data */
.scale{margin-top:22px}
.scale-track{display:flex;height:7px;border-radius:99px;overflow:hidden;background:var(--rule)}
.scale-track i{display:block;height:100%}
.scale-track i:nth-child(1){width:40%;background:#f0b8c6}
.scale-track i:nth-child(2){width:30%;background:#f3d3a2}
.scale-track i:nth-child(3){width:30%;background:#a8d9c1}
.scale-mark{position:relative;height:0}
.scale-mark i{position:absolute;top:-13px;left:var(--at);width:3px;height:19px;
  border-radius:2px;background:var(--ink);transform:translateX(-50%)}
.scale-key{display:flex;justify-content:space-between;font-size:.68rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-top:10px}

/* --- contents ------------------------------------------------------------- */
.toc{margin:34px 0 0;padding:20px 24px;border:1px solid var(--rule);border-radius:12px}
.toc h2{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 12px}
.toc ol{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 32px}
@media(max-width:640px){.toc ol{grid-template-columns:1fr}}
.toc li{border-bottom:1px solid var(--rule-2)}
.toc li:last-child,.toc li:nth-last-child(2):nth-child(odd){border-bottom:0}
.toc a{display:flex;gap:12px;align-items:baseline;padding:9px 0;color:var(--ink);
  font-weight:550;font-size:.95rem}
.toc a:hover{color:var(--accent);text-decoration:none}
.toc a em{font-style:normal;font-variant-numeric:tabular-nums;font-size:.78rem;
  font-weight:700;color:var(--accent);letter-spacing:.04em}
.toc a span{margin-left:auto;font-size:.8rem;font-weight:500;color:var(--ink-3)}

/* --- sections ------------------------------------------------------------- */
.sec{padding:52px 0 8px;scroll-margin-top:20px}
.sec-head{border-top:2px solid var(--ink);padding-top:14px;margin-bottom:22px}
.sec-num{display:block;font-size:.72rem;font-weight:700;letter-spacing:.14em;
  color:var(--accent);margin-bottom:9px}
.sec-head h2{margin:0 0 .35em}
.sec-head .lede{margin:0}

.block{margin:26px 0}
.block-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:4px}
.block-head h3{margin:0}
.block > .note{margin:0 0 14px}
.panel{border:1px solid var(--rule);border-radius:12px;background:var(--paper);
  padding:20px 22px}

/* --- engines -------------------------------------------------------------- */
.engines{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.engine{border:1px solid var(--rule);border-radius:12px;padding:16px 18px}
.engine-name{display:flex;align-items:center;gap:8px;font-weight:650;color:var(--ink);
  font-size:.95rem;margin-bottom:8px}
.engine-rate{font-size:2.1rem;font-weight:700;line-height:1;letter-spacing:-.03em;
  color:var(--sc)}
.engine-of{font-size:.82rem;color:var(--ink-3);margin-top:5px}
.meter{height:6px;border-radius:99px;background:#eaeef4;overflow:hidden;margin-top:12px}
.meter i{display:block;height:100%;border-radius:99px;background:var(--sc)}

/* --- share of voice ------------------------------------------------------- */
table.data{width:100%;border-collapse:collapse;font-size:.92rem}
table.data th{text-align:left;font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);padding:0 10px 9px;
  border-bottom:1px solid var(--rule);white-space:nowrap}
table.data td{padding:12px 10px;border-bottom:1px solid var(--rule-2);vertical-align:top}
table.data tr:last-child td{border-bottom:0}
table.data th:first-child,table.data td:first-child{padding-left:0}
table.data th:last-child,table.data td:last-child{padding-right:0}

.sov-rank{width:26px;color:var(--ink-3);font-weight:600;font-size:.85rem}
.sov-name{font-weight:650;color:var(--ink)}
.sov-quote{font-size:.83rem;color:var(--ink-3);margin-top:3px;line-height:1.5}
.sov-share{width:250px}
.sov-pct{font-weight:700;color:var(--ink);font-size:.95rem}
.sov-count{font-size:.82rem;color:var(--ink-3);margin-left:5px;font-weight:500}
/* competitors read as neutral; only the client's row carries the accent */
.sov .meter i{background:#aab4c4}
.sov tr.is-you .meter i{background:var(--accent)}
.sov tr.is-you .sov-name,.sov tr.is-you .sov-pct{color:var(--accent)}
.sov tr.is-you td{background:var(--accent-wash)}
.sov tr.is-you td:first-child{border-radius:8px 0 0 8px}
.sov tr.is-you td:last-child{border-radius:0 8px 8px 0}

/* --- chips ---------------------------------------------------------------- */
.chip{display:inline-block;padding:3px 9px;border-radius:6px;font-size:.72rem;
  font-weight:700;letter-spacing:.02em;white-space:nowrap;border:1px solid transparent}
.chip-pass{background:var(--pass-bg);color:#0b5c37;border-color:#bfe5d1}
.chip-warn{background:var(--warn-bg);color:#8a4109;border-color:#f0d5a8}
.chip-fail{background:var(--fail-bg);color:#9b0f31;border-color:#f4c2cd}
.chip-none{background:var(--none-bg);color:#4a5568;border-color:#dde3ec}
.chip-soft{background:transparent;color:var(--ink-3);border-color:var(--rule);font-weight:600}

/* --- answer log ----------------------------------------------------------- */
.qa-q{font-weight:550;color:var(--ink);line-height:1.5}
.qa-engine{display:inline-block;margin-top:6px;font-size:.7rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.quote{border-left:2px solid var(--rule);padding:2px 0 2px 13px;margin-top:9px;
  font-size:.86rem;line-height:1.6;color:var(--ink-3)}
.quote.is-hit{border-left-color:var(--accent)}
.qa-verdict{width:132px;text-align:right}

/* --- issues (website health) ---------------------------------------------- */
.tally{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:26px}
@media(max-width:560px){.tally{grid-template-columns:1fr}}
.tally div{border:1px solid var(--rule);border-left-width:3px;border-radius:10px;
  padding:13px 16px}
.tally b{display:block;font-size:1.5rem;font-weight:700;letter-spacing:-.02em;
  line-height:1.1;color:var(--ink)}
.tally span{font-size:.78rem;font-weight:600;color:var(--ink-3)}
.tally .t-fail{border-left-color:var(--fail)}
.tally .t-warn{border-left-color:var(--warn)}
.tally .t-pass{border-left-color:var(--pass)}

.issue-group{margin-bottom:8px}
.issue-group > h3{display:flex;align-items:baseline;gap:9px;font-size:.75rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
  margin:26px 0 10px}
.issue-group > h3:before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.issue-group.g-fail > h3:before{background:var(--fail)}
.issue-group.g-warn > h3:before{background:var(--warn)}
.issue-group.g-pass > h3:before{background:var(--pass)}

.issue{display:grid;grid-template-columns:1fr;gap:0;padding:16px 18px;
  border:1px solid var(--rule);border-radius:10px;margin-bottom:9px;background:var(--paper)}
.issue-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:6px}
.issue-head h4{margin:0}
.issue-finding{margin:0;color:var(--ink)}
.issue-why{margin:5px 0 0;font-size:.86rem;line-height:1.6;color:var(--ink-3);
  max-width:var(--measure)}
.issue-fix{margin-top:12px;padding-top:11px;border-top:1px dashed var(--rule);
  font-size:.9rem;line-height:1.6}
.issue-fix b{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-right:8px}

/* passing checks collapse — they are reassurance, not work */
.passing{border:1px solid var(--rule);border-radius:10px;padding:0 18px}
.passing > summary{cursor:pointer;padding:14px 0;font-size:.9rem;font-weight:600;
  color:var(--ink);list-style:none;display:flex;align-items:center;gap:9px}
.passing > summary::-webkit-details-marker{display:none}
.passing > summary:after{content:"Show";margin-left:auto;font-size:.78rem;font-weight:600;
  color:var(--accent)}
.passing[open] > summary:after{content:"Hide"}
.passing > summary:before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--pass);flex:none}
.pass-list{margin:0;padding:0 0 16px;list-style:none;border-top:1px solid var(--rule-2)}
.pass-list li{display:flex;gap:12px;align-items:baseline;padding:9px 0;
  border-bottom:1px solid var(--rule-2);font-size:.9rem}
.pass-list li:last-child{border-bottom:0}
.pass-list b{color:var(--ink);font-weight:600;min-width:190px}
.pass-list span{color:var(--ink-3)}

/* --- snippets ------------------------------------------------------------- */
.snippet{border:1px solid #223049;border-radius:10px;overflow:hidden;margin:0 0 14px}
.snippet-bar{display:flex;align-items:center;gap:10px;background:#1a2438;
  padding:8px 12px;border-bottom:1px solid #2b3a55}
.snippet-bar b{font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:#93a3bd}
.copy-btn{margin-left:auto;background:#2f3f5c;color:#e6ecf7;border:0;padding:4px 12px;
  border-radius:6px;font-size:.72rem;font-weight:600;cursor:pointer;font-family:inherit}
.copy-btn:hover{background:#3d5177}
.snippet pre{margin:0;border-radius:0;max-height:440px;overflow:auto;
  background:#0f172a;color:#dbe4f3;padding:14px 16px;font-size:.78rem;line-height:1.6}

/* --- faq + gaps ----------------------------------------------------------- */
.faq{border-top:1px solid var(--rule-2);padding:14px 0}
.faq:first-of-type{border-top:0;padding-top:4px}
.faq b{display:block;color:var(--ink);font-size:.98rem;margin-bottom:5px}
.faq p{margin:0;font-size:.92rem;line-height:1.62;color:var(--ink-2);max-width:var(--measure)}

.gaps{list-style:none;margin:0;padding:0;counter-reset:g}
.gaps li{counter-increment:g;position:relative;padding:11px 0 11px 38px;
  border-bottom:1px solid var(--rule-2);color:var(--ink);font-size:.95rem}
.gaps li:last-child{border-bottom:0}
.gaps li:before{content:counter(g,decimal-leading-zero);position:absolute;left:0;top:11px;
  font-size:.78rem;font-weight:700;color:var(--accent);letter-spacing:.04em}

/* --- action plan ---------------------------------------------------------- */
.actions{display:block;list-style:none;margin:0;padding:0;counter-reset:p}
.actions li{counter-increment:p;display:grid;grid-template-columns:26px 1fr;gap:6px 14px;
  padding:14px 0;border-top:1px solid var(--rule-2)}
.actions li:first-child{border-top:0}
.actions li:before{content:counter(p);grid-row:span 2;width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:#fff;display:grid;place-items:center;font-size:.8rem;
  font-weight:700;margin-top:1px;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.actions b{grid-column:2;color:var(--ink);font-size:.98rem}
.actions span{grid-column:2;font-size:.88rem;line-height:1.6;color:var(--ink-3);
  max-width:var(--measure)}

/* --- callout -------------------------------------------------------------- */
.callout{border:1px solid var(--fail);border-left-width:3px;border-radius:8px;
  padding:13px 16px;margin-bottom:9px;font-size:.92rem;line-height:1.6;color:var(--ink)}

/* URLs and schema keys are long single tokens — they must break, not overhang */
.rpt :not(pre) > code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86em;background:#eef2f8;border:1px solid var(--rule);border-radius:5px;
  padding:1px 5px;color:var(--ink);overflow-wrap:anywhere}

/* --- sources -------------------------------------------------------------- */
.src-name{font-weight:650;color:var(--ink)}
.src-type{color:var(--ink-3);font-size:.88rem}

/* --- footer --------------------------------------------------------------- */
.rpt-foot{margin-top:56px;border-top:2px solid var(--ink);padding:20px 0 40px;
  display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;font-size:.86rem;
  color:var(--ink-3);line-height:1.6}
.rpt-foot .who strong{display:block;color:var(--ink);font-size:.95rem}
.rpt-foot .acts{margin-left:auto;display:flex;gap:10px}

/* ==========================================================================
   Phones. Clients open the shared link on a handset constantly, so the
   on-screen report has to hold up at 360px without sideways scrolling.
   ========================================================================== */
@media(max-width:640px){
  .rpt-wrap{padding:0 16px}
  .cover{padding-top:6px}
  .cover-bar{gap:10px;padding-bottom:14px}
  .cover-issued{margin-left:0;text-align:left;width:100%}
  .cover h1{font-size:clamp(1.9rem,8vw,2.9rem)}
  .cover-sub{font-size:1rem}
  .rpt .eyebrow{margin-top:22px}

  .scorecard{padding:20px 18px;margin-top:24px}
  .gauge{width:124px;height:124px}
  .verdict{font-size:1.28rem}

  .toc{padding:16px 18px}
  .sec{padding:38px 0 6px}
  .panel{padding:16px 14px}
  .block{margin:20px 0}

  /* tables: let the text columns breathe and pin the verdict column narrow.
     Headers must wrap here — a nowrap header sets the column's minimum width
     and would both clip itself and starve the name column beside it. */
  table.data{font-size:.88rem}
  table.data th{padding:0 6px 8px;white-space:normal}
  table.data td{padding:10px 6px}
  .sov-share{width:118px}
  .sov-count{display:block;margin-left:0}
  .qa-verdict{width:98px}
  .qa-verdict .chip{white-space:normal;text-align:center}

  /* stacked so a long check name can't shove the result off the edge */
  .pass-list li{flex-direction:column;gap:2px}
  .pass-list b{min-width:0}

  .issue{padding:14px}
  .snippet pre{font-size:.72rem}

  .rpt-foot{margin-top:38px;gap:18px}
  .rpt-foot .acts{margin-left:0;width:100%;flex-direction:column}
  .rpt-foot .acts .btn{width:100%}
}

/* ==========================================================================
   Print. The report is delivered as a PDF far more often than it is read in
   a browser, so this block is not an afterthought.
   ========================================================================== */
@media print{
  @page{margin:15mm 14mm}
  .rpt-wrap{max-width:none;padding:0}
  .rpt{font-size:10.5pt}

  /* keep semantic colour when the browser is willing to print it */
  .chip,.meter i,.scale-track i,.actions li:before,.gauge .value{
    print-color-adjust:exact;-webkit-print-color-adjust:exact}

  /* the cover owns page one */
  .cover{padding-top:0;break-after:page}
  .cover h1{font-size:26pt}
  .toc{break-inside:avoid}

  /* one section per page start, and never a heading stranded at a page foot */
  .sec{padding:0;break-before:page}
  .sec-head{break-after:avoid}
  .rpt h2,.rpt h3,.rpt h4,.block-head{break-after:avoid}
  /* only leaf items are atomic — letting .block and .panel split is what keeps
     the page from bailing out early and leaving a third of it blank */
  .engine,.issue,.faq,.tally,.callout,.actions li,
  table.data tr,.pass-list li{break-inside:avoid}

  /* code must never be clipped: on paper there is nothing to scroll */
  .snippet{border-color:#d6dde8;break-inside:auto}
  .snippet-bar{background:#eef2f8;border-bottom-color:#d6dde8}
  .snippet-bar b{color:#5b6675}
  .snippet pre{max-height:none;overflow:visible;background:#f7f9fc;color:#0f172a;
    white-space:pre-wrap;word-break:break-word;font-size:8.5pt;line-height:1.5}

  .copy-btn{display:none}
  .passing[open] > summary:after,.passing > summary:after{content:""}
  .rpt-foot{break-inside:avoid;margin-top:28px}
  .rpt a{color:var(--ink)}
}