/* Shared comprehensive-audit report styles (URL Audit + Grid Audit).
 * Rendered by /assets/js/url-audit-report.js into #report-mount / #grid-report-mount.
 * Token fallback chains resolve on both pages:
 *   card bg  -> var(--surface, var(--bg))            (tool.html has --surface; url-audit has --bg)
 *   alt bg   -> var(--bg-alt, var(--surface2, ...))  (url-audit has --bg-alt; tool.html has --surface2)
 * Canvas charts theme themselves at draw time (see TH() in the JS), so this file
 * only styles the HTML scaffolding. PDF export forces light theme before capture.
 */
/* ============================================================
     WB_URLAUDIT_REPORT - comprehensive plain-language report.
     Rendered by /assets/js/url-audit-report.js into #report-mount.
     Card-per-section, canvas charts, color-coded tiers. PDF-safe:
     inner pieces carry page-break-inside:avoid; the PDF export forces
     light theme before capture so every value below reads correctly.
     ============================================================ */
  :root, #report-mount { --ur-success:#1e8e3e; --ur-accent:#1a73e8; --ur-warning:#f9ab00; --ur-danger:#d93025; }
  .ur-block {
    border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px;
    margin: 0 0 18px; background: var(--surface, var(--bg));
  }
  [data-theme="dark"] .ur-block { background: var(--surface, var(--bg)); border-color: var(--border); }
  .ur-block canvas { max-width: 100% !important; height: auto !important; display: block; }

  /* Section header: numbered badge + title + plain-language intro */
  .ur-shead { display: flex; gap: 13px; align-items: flex-start; margin: 0 0 16px; page-break-inside: avoid; break-inside: avoid; }
  .ur-snum {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
    background: var(--accent); color: #fff; font-weight: 700; font-size: 14px;
    display: flex; align-items: center; justify-content: center; margin-top: 1px;
  }
  .ur-stitle { margin: 0 0 3px; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
  .ur-sintro { margin: 0; font-size: 13px; line-height: 1.6; color: var(--text-muted); }
  .ur-sintro b, .ur-wv b { color: var(--text); }

  /* Executive summary */
  .ur-exec { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
  .ur-gaugewrap { text-align: center; flex-shrink: 0; page-break-inside: avoid; break-inside: avoid; }
  .ur-tierword { font-size: 15px; font-weight: 700; margin-top: -6px; }
  .ur-execright { flex: 1; min-width: 240px; }
  .ur-verdict { font-size: 15px; line-height: 1.5; color: var(--text); margin-bottom: 14px; }
  .ur-tiles { display: flex; gap: 10px; flex-wrap: wrap; }
  .ur-tile {
    display: flex; align-items: center; gap: 9px; flex: 1; min-width: 130px;
    border: 1px solid var(--border); border-radius: 11px; padding: 11px 13px; background: var(--bg-alt, var(--surface2, #f4f6f9));
    page-break-inside: avoid; break-inside: avoid;
  }
  .ur-tiledot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
  .ur-tileval { font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.1; }
  .ur-tilelabel { font-size: 11px; color: var(--text-muted); }
  .ur-findings { list-style: none; margin: 18px 0 0; padding: 0; }
  .ur-findings li {
    display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.55;
    color: var(--text); padding: 7px 0; border-top: 1px solid var(--border);
    page-break-inside: avoid; break-inside: avoid;
  }
  .ur-findings li:first-child { border-top: none; }
  .ur-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }

  /* Why-it-matters explainer grid */
  .ur-why { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 18px; }
  @media (max-width: 640px) { .ur-why { grid-template-columns: 1fr; } }
  .ur-why > div { background: var(--bg-alt, var(--surface2, #f4f6f9)); border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; page-break-inside: avoid; break-inside: avoid; }
  .ur-wl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent); margin-bottom: 5px; }
  .ur-wv { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }

  /* Map + distribution */
  .ur-mapgrid { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
  .ur-choro { text-align: center; flex-shrink: 0; page-break-inside: avoid; break-inside: avoid; }
  .ur-coldist { flex: 1; min-width: 280px; page-break-inside: avoid; break-inside: avoid; }
  .ur-charttitle { font-size: 12px; font-weight: 700; color: var(--text); margin: 0 0 8px; }
  .ur-legend { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; font-size: 11px; color: var(--text-muted); }
  .ur-legchip i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
  .ur-legcenter { color: var(--accent); font-weight: 600; }

  /* Snippet preview */
  .ur-snippet { border: 1px solid var(--border); border-radius: 11px; padding: 13px 16px; background: var(--surface, var(--bg)); page-break-inside: avoid; break-inside: avoid; }
  .ur-sn-url { font-size: 12.5px; color: #1a7239; margin-bottom: 3px; overflow-wrap: anywhere; }
  .ur-sn-title { font-size: 17px; color: #1a0dab; line-height: 1.3; margin-bottom: 3px; overflow-wrap: anywhere; }
  .ur-sn-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
  [data-theme="dark"] .ur-sn-url { color: #62b67a; }
  [data-theme="dark"] .ur-sn-title { color: #8ab4f8; }

  /* Health + keyword checks */
  .ur-healthrow { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
  .ur-healthdonut { flex-shrink: 0; page-break-inside: avoid; break-inside: avoid; }
  .ur-checks { flex: 1; min-width: 260px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 16px; }
  @media (max-width: 720px) { .ur-checks { grid-template-columns: 1fr; } }
  .ur-check { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; padding: 4px 0; line-height: 1.45; page-break-inside: avoid; break-inside: avoid; }
  .ur-check b { color: var(--text); font-weight: 600; }
  .ur-check { color: var(--text-muted); }
  .ur-checkic { flex-shrink: 0; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; margin-top: 1px; }
  .ur-check.pass .ur-checkic { background: var(--ur-success); }
  .ur-check.fail .ur-checkic { background: var(--ur-danger); }
  .ur-checkfix { display: block; font-style: italic; margin-top: 1px; color: var(--text-muted); }

  /* Keyword pills */
  .ur-kwpills { display: flex; gap: 9px; flex-wrap: wrap; }
  .ur-kwpill { display: flex; align-items: center; gap: 7px; border: 1.5px solid; border-radius: 999px; padding: 6px 13px 6px 7px; font-size: 12.5px; font-weight: 600; color: var(--text); page-break-inside: avoid; break-inside: avoid; }
  .ur-kwpill-ic { width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }

  /* Trend + baseline */
  .ur-trendbanner, .ur-projected { border: 1.5px solid; border-radius: 11px; padding: 12px 16px; font-size: 13px; line-height: 1.5; margin: 0 0 14px; page-break-inside: avoid; break-inside: avoid; }
  .ur-projected { margin: 16px 0 0; }
  .ur-baseline { display: flex; gap: 14px; align-items: flex-start; background: var(--bg-alt, var(--surface2, #f4f6f9)); border: 1px dashed var(--border); border-radius: 11px; padding: 16px 18px; page-break-inside: avoid; break-inside: avoid; }
  .ur-baseicon { font-size: 28px; line-height: 1; }
  .ur-basetitle { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
  .ur-basebody { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); }

  /* Recommendations */
  .ur-recs { display: flex; flex-direction: column; gap: 9px; }
  .ur-rec { display: flex; gap: 11px; align-items: flex-start; border: 1px solid var(--border); border-radius: 11px; padding: 12px 14px; background: var(--surface, var(--bg)); page-break-inside: avoid; break-inside: avoid; }
  .ur-recpri { flex-shrink: 0; font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; margin-top: 1px; }
  .ur-pri-high { background: rgba(217,48,37,.12); color: #b3261e; }
  .ur-pri-med  { background: rgba(249,171,0,.18); color: #8a6d00; }
  .ur-pri-low  { background: rgba(26,115,232,.10); color: var(--accent); }
  [data-theme="dark"] .ur-pri-high { background: rgba(217,48,37,.2); color:#ffa198; }
  [data-theme="dark"] .ur-pri-med  { background: rgba(249,171,0,.15); color:#ffd970; }
  .ur-rectext { font-size: 13px; line-height: 1.5; color: var(--text); }
  .ur-recgain { font-size: 11.5px; color: #1a7239; margin-top: 4px; font-weight: 500; }
  [data-theme="dark"] .ur-recgain { color: #7ee2a8; }

  /* Action plan */
  .ur-plan { margin: 0; padding: 0 0 0 4px; list-style: none; counter-reset: ur-step; }
  .ur-plan li { position: relative; padding: 12px 12px 12px 44px; border: 1px solid var(--border); border-radius: 11px; margin-bottom: 9px; page-break-inside: avoid; break-inside: avoid; }
  .ur-plan li::before {
    counter-increment: ur-step; content: counter(ur-step);
    position: absolute; left: 12px; top: 12px; width: 24px; height: 24px; border-radius: 50%;
    background: var(--accent); color: #fff; font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
  }
  .ur-plantitle { font-size: 13px; line-height: 1.5; color: var(--text); }
  .ur-planmeta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
  .ur-effort { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); background: var(--bg-alt, var(--surface2, #f4f6f9)); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; }
  .ur-plangain { font-size: 11.5px; color: #1a7239; }
  [data-theme="dark"] .ur-plangain { color: #7ee2a8; }

  .ur-empty { font-size: 13px; color: var(--text-muted); font-style: italic; margin: 4px 0; }

/* ── Grid Audit extras: discovered-competitor list + review benchmark cards ── */
.ur-complist { display: flex; flex-direction: column; gap: 8px; }
.ur-comprow { display: flex; gap: 11px; align-items: center; border: 1px solid var(--border); border-radius: 11px; padding: 10px 13px; background: var(--surface, var(--bg)); page-break-inside: avoid; break-inside: avoid; }
.ur-comprank { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-alt, var(--surface2, #f4f6f9)); color: var(--text); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.ur-compname { font-size: 13px; font-weight: 600; color: var(--text); }
.ur-compmeta { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.ur-benchgrid { display: flex; gap: 12px; flex-wrap: wrap; }
.ur-benchcard { flex: 1; min-width: 150px; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--bg-alt, var(--surface2, #f4f6f9)); text-align: center; page-break-inside: avoid; break-inside: avoid; }
.ur-benchval { font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.15; margin: 3px 0; }
.ur-benchlabel { font-size: 11.5px; color: var(--text-muted); }
.ur-benchsub { font-size: 11px; margin-top: 5px; font-weight: 700; }

/* ── Reviews breakdown section ── */
.ur-rvgrid { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.ur-rvtiles { display: flex; gap: 12px; flex-wrap: wrap; flex: 1; min-width: 250px; }
.ur-rvtile { flex: 1; min-width: 118px; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--bg-alt, var(--surface2, #f4f6f9)); text-align: center; page-break-inside: avoid; break-inside: avoid; }
.ur-rvtile .ur-rvval { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.1; }
.ur-rvtile .ur-rvlabel { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }
.ur-rvbars { flex: 1; min-width: 260px; page-break-inside: avoid; break-inside: avoid; }
.ur-rvrow { display: flex; align-items: center; gap: 9px; padding: 3px 0; font-size: 12px; color: var(--text-muted); }
.ur-rvrow .ur-rvstar { width: 34px; font-weight: 700; color: var(--text); flex-shrink: 0; text-align: right; }
.ur-rvrow .ur-rvtrack { flex: 1; height: 12px; border-radius: 6px; background: var(--bg-alt, var(--surface2, #eef1f5)); overflow: hidden; }
.ur-rvrow .ur-rvfill { height: 100%; border-radius: 6px; }
.ur-rvrow .ur-rvn { width: 20px; flex-shrink: 0; font-weight: 600; color: var(--text); }
.ur-rvnote { font-size: 11px; color: var(--text-muted); font-style: italic; margin-top: 7px; }
.ur-rvtrendline { border: 1.5px solid; border-radius: 11px; padding: 12px 16px; font-size: 13px; line-height: 1.5; margin-top: 16px; page-break-inside: avoid; break-inside: avoid; }

/* ── Google Business Profile checkup ── */
.ur-gbp-meter { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.ur-gbp-items { display: flex; flex-direction: column; gap: 9px; }
.ur-gbp-item { border: 1px solid var(--border); border-radius: 11px; padding: 11px 14px; background: var(--surface, var(--bg)); page-break-inside: avoid; break-inside: avoid; }
.ur-gbp-head { display: flex; align-items: center; gap: 9px; }
.ur-gbp-ic { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ur-gbp-item.ok .ur-gbp-ic { background: var(--ur-success); }
.ur-gbp-item.miss .ur-gbp-ic { background: var(--ur-danger); }
.ur-gbp-item.warn .ur-gbp-ic { background: var(--ur-warning); }
.ur-gbp-label { font-size: 13px; font-weight: 700; color: var(--text); }
.ur-gbp-state { margin-left: auto; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 9px; border-radius: 999px; flex-shrink: 0; }
.ur-gbp-item.ok .ur-gbp-state { background: rgba(30,142,62,.12); color: #1a7239; }
.ur-gbp-item.miss .ur-gbp-state { background: rgba(217,48,37,.12); color: #b3261e; }
.ur-gbp-item.warn .ur-gbp-state { background: rgba(249,171,0,.18); color: #8a6d00; }
[data-theme="dark"] .ur-gbp-item.ok .ur-gbp-state { background: rgba(30,142,62,.22); color: #7ee2a8; }
[data-theme="dark"] .ur-gbp-item.miss .ur-gbp-state { background: rgba(217,48,37,.2); color: #ffa198; }
[data-theme="dark"] .ur-gbp-item.warn .ur-gbp-state { background: rgba(249,171,0,.15); color: #ffd970; }
.ur-gbp-detail { font-size: 12px; color: var(--text-muted); margin: 3px 0 0 27px; line-height: 1.5; }
.ur-gbp-why { font-size: 12px; color: var(--text-muted); margin: 6px 0 0 27px; line-height: 1.55; border-left: 3px solid var(--border); padding-left: 10px; }
.ur-gbp-why b { color: var(--text); }
.ur-gbp-subhead { font-size: 12px; font-weight: 700; color: var(--text); margin: 18px 0 8px; text-transform: uppercase; letter-spacing: .04em; }

/* ── PDF cover page ── */
.ur-cover { height: 1010px; display: flex; flex-direction: column; padding: 30px 8px 0; page-break-after: always; break-after: page; }
.ur-cover-brandrow { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 1px solid #d6dbe2; padding-bottom: 22px; }
.ur-cover-brand { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 26px; color: #202124; }
.ur-cover-brand span { color: #1a73e8; }
.ur-cover-sub { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #5f6368; margin-top: 5px; }
.ur-cover-chip { background: #202124; color: #fff; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 7px 16px; }
.ur-cover-kicker { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #1a73e8; font-weight: 700; margin: 44px 0 12px; }
.ur-cover-title { font-family: 'Syne', sans-serif; font-size: 33px; line-height: 1.2; font-weight: 800; color: #202124; max-width: 560px; margin: 0 0 36px; }
.ur-cover-score { display: flex; align-items: center; gap: 18px; margin: 0 0 40px; }
.ur-cover-ring { width: 108px; height: 108px; border-radius: 50%; border: 9px solid; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; }
.ur-cover-ring b { font-size: 34px; color: #202124; line-height: 1; }
.ur-cover-ring span { font-size: 9.5px; color: #5f6368; text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; }
.ur-cover-scoreword { font-size: 17px; font-weight: 700; }
.ur-cover-scoresub { font-size: 12.5px; color: #5f6368; margin-top: 3px; max-width: 330px; line-height: 1.5; }
.ur-cover-prep { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #5f6368; margin-bottom: 7px; }
.ur-cover-biz { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.ur-cover-mono { width: 52px; height: 52px; border-radius: 14px; background: #1a73e8; color: #fff; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ur-cover-bizname { font-family: 'Syne', sans-serif; font-size: 27px; font-weight: 700; color: #202124; line-height: 1.2; }
.ur-cover-kw { font-size: 14px; color: #5f6368; margin: 2px 0 34px; }
.ur-cover-kw b { color: #1a73e8; }
.ur-cover-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 620px; }
.ur-covercard { background: #f5f7fa; border-left: 3px solid #1a73e8; border-radius: 8px; padding: 13px 16px; }
.ur-covercard .ur-cl { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #5f6368; margin-bottom: 4px; }
.ur-covercard .ur-cv { font-size: 15px; font-weight: 700; color: #202124; }
.ur-cover-foot { margin-top: auto; border-top: 1px solid #d6dbe2; padding: 18px 0 12px; display: flex; justify-content: space-between; font-size: 12px; color: #5f6368; }
.ur-cover-foot b { color: #202124; }

/* ── PDF closing (CTA) page ── */
.ur-close { page-break-before: always; break-before: page; padding: 26px 8px 0; }
.ur-close-brand { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 19px; color: #202124; padding-bottom: 16px; border-bottom: 1px solid #d6dbe2; margin-bottom: 26px; }
.ur-close-brand span { color: #1a73e8; }
.ur-close-hero { background: linear-gradient(120deg, #1a4fd8, #4f8bff); border-radius: 18px; padding: 34px 36px; color: #fff; margin-bottom: 30px; }
.ur-close-hero h2 { font-family: 'Syne', sans-serif; font-size: 27px; margin: 0 0 12px; line-height: 1.25; color: #fff; }
.ur-close-hero p { margin: 0; font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.94); max-width: 620px; }
.ur-close-what { font-family: 'Syne', sans-serif; font-size: 17px; font-weight: 700; color: #202124; margin: 0 0 14px; }
.ur-close-services { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 30px; }
.ur-closecard { background: #f5f7fa; border: 1px solid #e4e8ee; border-radius: 12px; padding: 15px 18px; }
.ur-closecard b { display: block; font-size: 13.5px; color: #202124; margin-bottom: 5px; }
.ur-closecard div { font-size: 12px; color: #5f6368; line-height: 1.55; }
.ur-close-contact { background: #16191d; border-radius: 16px; padding: 22px 26px; color: #fff; margin-bottom: 22px; }
.ur-close-contact h3 { font-family: 'Syne', sans-serif; font-size: 15px; margin: 0 0 12px; color: #fff; }
.ur-close-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 12.5px; }
.ur-close-row:last-child { border-bottom: none; }
.ur-close-row span { color: rgba(255,255,255,.55); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; }
.ur-close-row b { color: #fff; font-weight: 600; }
.ur-close-thanks { text-align: center; font-size: 12px; color: #5f6368; padding: 6px 0 14px; }
.ur-gbp-item.check .ur-gbp-ic { background: var(--ur-accent); }
.ur-gbp-item.check .ur-gbp-state { background: rgba(26,115,232,.12); color: var(--accent); }
[data-theme="dark"] .ur-gbp-item.check .ur-gbp-state { background: rgba(79,139,255,.16); color: #6aa0ff; }