/* =====================================================================
   CRO Audit — isolated stylesheet (plan rule R1: additive, no leakage).
   Every rule is scoped under .nra-root so it cannot affect the existing
   Growth Report (.esr-*) or any other CRM page.
   ===================================================================== */

.nra-root { --nra-bg:#0a1124; --nra-panel:rgba(255,255,255,0.03); --nra-panel-2:rgba(255,255,255,0.05);
  --nra-line:rgba(255,255,255,0.08); --nra-ink:#e8f0fe; --nra-dim:#9db3cc;
  --nra-red:#ff4d6d; --nra-ora:#ff8c42; --nra-yel:#f5c518; --nra-cyan:#00e5c8; --nra-grn:#00e5a0; --nra-blue:#1a6fff;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--nra-ink); }

.nra-root *, .nra-root *::before, .nra-root *::after { box-sizing:border-box; }
/* The CRO Audit IS one card: width matches the existing report column (.esr-content max-width:960),
   the tabs sit at the top of this card, and only the section content below them swaps. */
.nra-root .nra-main { max-width:960px; width:100%; margin:0 auto; padding:24px 26px 30px;
  background:linear-gradient(160deg,rgba(255,255,255,0.045),rgba(255,255,255,0.015));
  border:1px solid var(--nra-line); border-radius:18px; }

/* Inner sections are no longer their own cards — they're the content area of the one CRO card. */
.nra-root .nra-hero-box, .nra-root .nra-section-box { background:transparent; border:none; border-radius:0; padding:0; }

/* "CRO Audit" tag at the top of the card */
.nra-root .nra-card-head { margin-bottom:14px; }
.nra-root .nra-card-tag { display:inline-flex; align-items:center; padding:4px 12px; border-radius:8px;
  background:rgba(0,229,200,0.14); border:1px solid rgba(0,229,200,0.3); color:var(--nra-cyan);
  font-size:12px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }

/* Section tabs — single row (replace the prev/next footer buttons) */
.nra-root .nra-tabs { display:flex; flex-wrap:nowrap; gap:2px; margin-bottom:22px;
  border-bottom:1px solid var(--nra-line); overflow-x:auto; }
.nra-root .nra-tab { padding:9px 12px; border:none; background:transparent; color:var(--nra-dim);
  font-size:12.5px; font-weight:700; cursor:pointer; border-bottom:2px solid transparent; border-radius:8px 8px 0 0; white-space:nowrap; }
.nra-root .nra-tab:hover { color:var(--nra-ink); }
.nra-root .nra-tab.nra-tab-active { color:var(--nra-ink); border-bottom-color:var(--nra-cyan); background:rgba(255,255,255,0.03); }

/* Page sections — only the active page is shown */
.nra-root .nra-page-section { display:none; animation:nra-fade .35s ease; }
.nra-root .nra-page-section.nra-page-active { display:block; }
@keyframes nra-fade { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes nra-twinkle { from{opacity:.35} to{opacity:1} }

/* Boxes */
.nra-root .nra-hero-box, .nra-root .nra-section-box {
  background:linear-gradient(160deg,rgba(255,255,255,0.045),rgba(255,255,255,0.015));
  border:1px solid var(--nra-line); border-radius:18px; padding:28px; }

/* Header */
.nra-root .nra-header-inner { display:flex; gap:28px; justify-content:space-between; flex-wrap:wrap; }
.nra-root .nra-header-left { flex:1; min-width:280px; }
.nra-root .nra-logo-badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:8px;
  background:rgba(0,229,200,0.14); border:1px solid rgba(0,229,200,0.3); margin-bottom:12px; }
.nra-root .nra-logo-text { font-size:12px; font-weight:800; letter-spacing:1px; color:var(--nra-cyan); text-transform:uppercase; }
.nra-root .nra-client-name { font-size:26px; font-weight:800; margin-bottom:2px; }
.nra-root .nra-client-url { font-size:14px; color:var(--nra-dim); margin-bottom:12px; }
.nra-root .nra-meta-tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.nra-root .nra-meta-tag { font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px;
  background:var(--nra-panel-2); border:1px solid var(--nra-line); color:var(--nra-dim); }
.nra-root .nra-audit-date { font-size:11px; color:var(--nra-dim); }
.nra-root .nra-tldr-divider { height:1px; background:var(--nra-line); margin:26px 0; }

/* KPI row */
.nra-root .nra-tldr-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; }
.nra-root .nra-score-card { grid-row:span 1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--nra-panel); border:1px solid var(--nra-line); border-radius:14px; padding:16px; text-align:center; }
.nra-root .nra-score-label { font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--nra-dim); margin-bottom:8px; }
.nra-root .nra-score-ring { position:relative; width:90px; height:90px; }
.nra-root .nra-score-ring svg { transform:rotate(-90deg); }
.nra-root .nra-track { fill:none; stroke:rgba(255,255,255,0.08); stroke-width:8; }
.nra-root .nra-fill { fill:none; stroke:var(--nra-cyan); stroke-width:8; stroke-linecap:round;
  stroke-dasharray:276; stroke-dashoffset:276; transition:stroke-dashoffset 1s ease; }
.nra-root .nra-score-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; }
.nra-root .nra-score-sub { font-size:10px; color:var(--nra-dim); margin-top:8px; }

/* Summary "Section scores" — distinct ring-card row (replaces overall score + metric bars). */
.nra-root .nra-secscores-label { font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  color:var(--nra-dim); margin:22px 0 14px; }
.nra-root .nra-secscores { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:14px; }
.nra-root .nra-secscore-card { display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:12px; background:var(--nra-panel); border:1px solid var(--nra-line); border-radius:16px; padding:20px 14px; text-align:center; }
.nra-root .nra-secscore-ring { position:relative; width:78px; height:78px; }
.nra-root .nra-secscore-ring svg { transform:rotate(-90deg); }
.nra-root .nra-secscore-num { position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:800; }
.nra-root .nra-secscore-name { display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:12.5px; font-weight:700; color:var(--nra-ink); }

/* Small "avg section score" chip on the Executive Summary eyebrow. */
.nra-root .nra-exec-avg { display:inline-flex; align-items:baseline; gap:5px; margin-left:10px;
  padding:2px 9px; border-radius:20px; background:rgba(0,229,200,0.1); border:1px solid rgba(0,229,200,0.28);
  vertical-align:middle; }
.nra-root .nra-exec-avg-num { font-size:14px; font-weight:800; color:var(--nra-cyan); line-height:1; }
.nra-root .nra-exec-avg-lbl { font-size:9.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  color:var(--nra-dim); }
.nra-root .nra-metric-card { background:var(--nra-panel); border:1px solid var(--nra-line); border-radius:14px; padding:16px; }
.nra-root .nra-metric-info-row { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.nra-root .nra-metric-name { font-size:12px; font-weight:700; color:var(--nra-ink); }
.nra-root .nra-metric-info-icon { width:18px; height:18px; border-radius:50%; border:1px solid var(--nra-line);
  background:transparent; color:var(--nra-dim); font-size:11px; font-weight:800; cursor:pointer; line-height:1; }
.nra-root .nra-metric-pct { font-size:24px; font-weight:800; margin-bottom:8px; }
.nra-root .nra-metric-bar-wrap { height:6px; border-radius:6px; background:rgba(255,255,255,0.07); overflow:hidden; }
.nra-root .nra-metric-bar { height:100%; background:linear-gradient(90deg,var(--nra-cyan),var(--nra-blue)); border-radius:6px; }

/* Tooltips */
/* Self-contained (no .nra-root scope / no CSS vars) so it survives being
   reparented to <body> by openTT() to escape transformed ancestors. */
.nra-float-tt { position:fixed; z-index:100000; max-width:300px; padding:14px 16px; border-radius:12px;
  background:#0d1530; border:1px solid rgba(255,255,255,0.08); box-shadow:0 18px 48px rgba(0,0,0,0.5);
  color:#e8f0fe; }
.nra-float-tt .nra-tt-title { font-size:13px; font-weight:800; margin-bottom:6px; color:#e8f0fe; }
.nra-float-tt .nra-tt-desc { font-size:12px; color:#9db3cc; line-height:1.6; margin-bottom:8px; }
.nra-float-tt .nra-tt-link { font-size:12px; font-weight:700; color:#00e5c8; }

/* TLDR hero */
.nra-root .nra-tldr-hero { margin:28px 0 8px; }
.nra-root .nra-tldr-eyebrow { font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--nra-cyan); margin-bottom:10px; }
.nra-root .nra-tldr-headline { font-size:22px; font-weight:800; line-height:1.4; }
.nra-root .nra-tldr-highlight { color:var(--nra-grn); }
.nra-root .nra-tldr-sub { font-size:13px; color:var(--nra-dim); line-height:1.7; margin-top:10px; max-width:720px; }

.nra-root .nra-tldr-findings-label { font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--nra-ink); margin:26px 0 14px; }
.nra-root .nra-tldr-findings-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; }
.nra-root .nra-tldr-fcard-link { display:block; }
.nra-root .nra-tldr-fcard { background:var(--nra-panel); border:1px solid var(--nra-line); border-radius:14px; padding:16px;
  height:100%; display:flex; flex-direction:column; transition:border-color .2s,transform .2s; }
.nra-root .nra-tldr-fcard:hover { border-color:rgba(0,229,200,0.4); transform:translateY(-2px); }
.nra-root .nra-tldr-fcard-num { font-size:20px; font-weight:800; color:var(--nra-cyan); margin-bottom:8px; }
.nra-root .nra-tldr-fcard-title { font-size:14px; font-weight:800; margin-bottom:8px; line-height:1.35; }
.nra-root .nra-tldr-fcard-desc { font-size:12px; color:var(--nra-dim); line-height:1.6; }
.nra-root .nra-tldr-fcard-spacer { flex:1; min-height:8px; }
.nra-root .nra-tldr-fcard-cta { font-size:12px; font-weight:800; color:var(--nra-cyan); }

/* Footer nav */
.nra-root .nra-page-footer-nav { display:flex; align-items:center; justify-content:space-between; margin-top:24px; gap:12px; }
.nra-root .nra-pfn-btn { padding:10px 18px; border-radius:10px; border:1px solid var(--nra-line);
  background:var(--nra-panel-2); color:var(--nra-ink); font-size:13px; font-weight:700; cursor:pointer; }
.nra-root .nra-pfn-btn:hover:not([disabled]) { border-color:rgba(0,229,200,0.4); }
.nra-root .nra-pfn-btn[disabled] { opacity:.4; cursor:default; }
.nra-root .nra-pfn-label { font-size:12px; color:var(--nra-dim); }

/* Deep dive headers */
.nra-root .nra-deepdive-eyebrow { font-size:11px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--nra-cyan); margin-bottom:8px; }
.nra-root .nra-deepdive-header { display:flex; gap:20px; justify-content:space-between; align-items:flex-start; margin-bottom:18px; flex-wrap:wrap; }
.nra-root .nra-deepdive-title { font-size:22px; font-weight:800; margin-bottom:8px; }
.nra-root .nra-deepdive-sub { font-size:13px; color:var(--nra-dim); line-height:1.7; max-width:640px; }
.nra-root .nra-deepdive-score-pill { width:180px; background:var(--nra-panel); border:1px solid var(--nra-line); border-radius:14px; padding:16px; text-align:center; }
.nra-root .nra-deepdive-score-num { font-size:34px; font-weight:800; }
.nra-root .nra-deepdive-score-label { font-size:11px; font-weight:700; color:var(--nra-dim); margin-top:4px; }
.nra-root .nra-deepdive-score-bench { font-size:11px; color:var(--nra-dim); margin-top:6px; }

/* Critical findings */
.nra-root .nra-cf-card { background:transparent; }
.nra-root .nra-cf-top { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.nra-root .nra-cf-num { font-size:20px; font-weight:800; color:var(--nra-cyan); }
.nra-root .nra-cf-title { font-size:17px; font-weight:800; flex:1; }
.nra-root .nra-badge { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.5px;
  text-transform:uppercase; padding:4px 10px; border-radius:20px; }
.nra-root .nra-badge-dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.nra-root .nra-badge-critical { color:var(--nra-red); background:rgba(255,77,109,0.14); border:1px solid rgba(255,77,109,0.3); }
.nra-root .nra-badge-high { color:var(--nra-ora); background:rgba(255,140,66,0.14); border:1px solid rgba(255,140,66,0.3); }
.nra-root .nra-cf-desc { font-size:13px; color:var(--nra-dim); line-height:1.75; margin-bottom:18px; }
.nra-root .nra-cf-cols { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.nra-root .nra-cf-col-pm, .nra-root .nra-cf-col-diy { background:var(--nra-panel); border:1px solid var(--nra-line); border-radius:14px; padding:18px; }
.nra-root .nra-cf-col-pm { border-color:rgba(0,229,200,0.25); }
.nra-root .nra-cf-col-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.nra-root .nra-cf-col-title { font-size:13px; font-weight:800; }
.nra-root .nra-cf-auto-tag { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; color:var(--nra-cyan);
  background:rgba(0,229,200,0.14); padding:2px 8px; border-radius:20px; }
.nra-root .nra-cf-col-intro { font-size:12px; color:var(--nra-dim); line-height:1.6; margin-bottom:10px; }
.nra-root .nra-cf-col-list { font-size:12px; color:var(--nra-ink); line-height:1.7; padding-left:18px; }
.nra-root .nra-cf-col-list li { margin-bottom:6px; }
.nra-root .nra-cf-deeplink { display:inline-block; margin-top:14px; font-size:12px; font-weight:700; color:var(--nra-cyan); }

/* Video */
.nra-root .nra-video-wrap { position:relative; margin-top:14px; border-radius:10px; overflow:hidden; aspect-ratio:16/9; background:#000; cursor:pointer; }
.nra-root .nra-video-thumb { width:100%; height:100%; object-fit:cover; }
.nra-root .nra-video-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.nra-root .nra-video-play svg { width:54px; height:54px; fill:#fff; filter:drop-shadow(0 4px 12px rgba(0,0,0,.6)); }
.nra-root .nra-video-wrap iframe { display:none; width:100%; height:100%; border:0; }
.nra-root .nra-video-wrap.nra-video-playing iframe { display:block; }
.nra-root .nra-video-wrap.nra-video-playing .nra-video-thumb,
.nra-root .nra-video-wrap.nra-video-playing .nra-video-play { display:none; }

/* Section labels & expand */
.nra-root .nra-analytics-section-label { font-size:13px; font-weight:800; color:var(--nra-ink); margin:24px 0 10px; }
.nra-root .nra-expand-btn { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:10px;
  border:1px solid var(--nra-line); background:var(--nra-panel-2); color:var(--nra-ink); font-size:12px; font-weight:700; cursor:pointer; margin-bottom:10px; }
.nra-root .nra-expand-icon { transition:transform .2s; font-size:10px; }
.nra-root .nra-expand-btn.nra-open .nra-expand-icon { transform:rotate(180deg); }

/* Checklist */
.nra-root .nra-checklist { display:flex; flex-direction:column; gap:8px; }
.nra-root .nra-checklist.nra-collapsed { display:none; }
.nra-root .nra-traffic-grid.nra-collapsed, .nra-root .nra-perf-grid.nra-collapsed, .nra-root .nra-geo-collapse.nra-collapsed { display:none; }
.nra-root .nra-checklist-item { display:flex; gap:12px; padding:12px 14px; border-radius:10px;
  background:var(--nra-panel); border:1px solid var(--nra-line); }
.nra-root .nra-checklist-icon { width:22px; height:22px; flex-shrink:0; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }
.nra-root .nra-pass .nra-checklist-icon { background:rgba(0,229,160,0.16); color:var(--nra-grn); }
.nra-root .nra-fail .nra-checklist-icon { background:rgba(255,77,109,0.16); color:var(--nra-red); }
.nra-root .nra-na .nra-checklist-icon { background:rgba(157,179,204,0.16); color:var(--nra-dim); }
.nra-root .nra-checklist-title { font-size:13px; font-weight:700; margin-bottom:3px; }
.nra-root .nra-checklist-desc { font-size:12px; color:var(--nra-dim); line-height:1.6; }
.nra-root .nra-na-tag { display:inline-block; margin-left:8px; font-size:10px; font-weight:800; text-transform:uppercase;
  letter-spacing:.5px; color:var(--nra-dim); background:rgba(157,179,204,0.14); padding:1px 7px; border-radius:20px; vertical-align:middle; }

/* Traffic */
.nra-root .nra-traffic-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.nra-root .nra-traffic-card { background:var(--nra-panel); border:1px solid var(--nra-line); border-radius:12px; padding:14px; }
.nra-root .nra-traffic-card-wide { grid-column:1/-1; }
.nra-root .nra-traffic-label { font-size:11px; font-weight:700; color:var(--nra-dim); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.nra-root .nra-traffic-value { font-size:22px; font-weight:800; }
.nra-root .nra-traffic-trend { font-size:11px; margin-top:6px; }
.nra-root .nra-trend-down { color:var(--nra-red); }
.nra-root .nra-trend-up { color:var(--nra-grn); }
.nra-root .nra-traffic-bench { font-size:11px; color:var(--nra-dim); margin-top:6px; }
.nra-root .nra-traffic-bar-wrap { height:6px; border-radius:6px; background:rgba(255,255,255,0.07); overflow:hidden; margin-top:8px; }
.nra-root .nra-traffic-bar { height:100%; border-radius:6px; background:linear-gradient(90deg,var(--nra-cyan),var(--nra-blue)); }
.nra-root .nra-traffic-split { display:flex; gap:4px; margin-top:8px; height:8px; }
.nra-root .nra-traffic-split-bar { border-radius:4px; height:100%; }
.nra-root .nra-traffic-split-labels { display:flex; justify-content:space-between; font-size:10px; color:var(--nra-dim); margin-top:6px; }
.nra-root .nra-source-bars { display:flex; flex-direction:column; gap:8px; }
.nra-root .nra-source-row { display:flex; align-items:center; gap:10px; }
.nra-root .nra-source-label { width:120px; font-size:12px; color:var(--nra-dim); }
.nra-root .nra-source-bar-wrap { flex:1; height:8px; border-radius:6px; background:rgba(255,255,255,0.07); overflow:hidden; }
.nra-root .nra-source-bar { height:100%; background:rgba(0,229,200,0.7); border-radius:6px; }
.nra-root .nra-source-pct { width:42px; text-align:right; font-size:12px; font-weight:700; }

/* Performance */
.nra-root .nra-perf-grid { display:grid; grid-template-columns:repeat(2,auto) 1fr; gap:16px; align-items:start; }
.nra-root .nra-perf-card { background:var(--nra-panel); border:1px solid var(--nra-line); border-radius:12px; padding:16px; text-align:center; }
.nra-root .nra-perf-device { font-size:12px; font-weight:700; color:var(--nra-dim); margin-bottom:8px; }
.nra-root .nra-perf-ring-wrap { position:relative; width:80px; height:80px; margin:0 auto; }
.nra-root .nra-perf-score { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; }
.nra-root .nra-perf-label { font-size:10px; color:var(--nra-dim); margin-top:8px; }
.nra-root .nra-perf-metrics { background:var(--nra-panel); border:1px solid var(--nra-line); border-radius:12px; padding:8px 16px; }
.nra-root .nra-perf-metric { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--nra-line); }
.nra-root .nra-perf-metric-name { font-size:13px; font-weight:700; }
.nra-root .nra-perf-metric-sub { font-size:11px; color:var(--nra-dim); font-weight:400; margin-left:4px; }
.nra-root .nra-perf-metric-val { font-size:16px; font-weight:800; }
.nra-root .nra-perf-metric-status { font-size:11px; }
.nra-root .nra-perf-pass { color:var(--nra-grn); } .nra-root .nra-perf-warn { color:var(--nra-yel); } .nra-root .nra-perf-fail { color:var(--nra-red); }

/* GEO */
.nra-root .nra-geo-intro { font-size:13px; color:var(--nra-dim); line-height:1.7; margin:10px 0 14px; max-width:720px; }
.nra-root .nra-geo-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.nra-root .nra-geo-card { background:var(--nra-panel); border:1px solid var(--nra-line); border-radius:12px; padding:16px; }
.nra-root .nra-geo-query { font-size:13px; font-weight:800; margin-bottom:10px; }
.nra-root .nra-geo-badge { display:inline-block; font-size:11px; font-weight:800; padding:3px 10px; border-radius:20px; margin-bottom:10px; }
.nra-root .nra-geo-not-mentioned { color:var(--nra-red); background:rgba(255,77,109,0.14); border:1px solid rgba(255,77,109,0.3); }
.nra-root .nra-geo-mentioned { color:var(--nra-grn); background:rgba(0,229,160,0.14); border:1px solid rgba(0,229,160,0.3); }
.nra-root .nra-geo-response { font-size:12px; color:var(--nra-dim); line-height:1.7; }
.nra-root .nra-geo-summary { display:flex; gap:14px; margin-top:16px; padding:16px; border-radius:12px;
  background:rgba(255,77,109,0.07); border:1px solid rgba(255,77,109,0.2); }
.nra-root .nra-geo-summary-icon { font-size:22px; }
.nra-root .nra-geo-summary-title { font-size:14px; font-weight:800; margin-bottom:6px; }
.nra-root .nra-geo-summary-desc { font-size:12px; color:var(--nra-dim); line-height:1.7; }

/* Responsive */
@media (max-width:720px){
  .nra-root .nra-cf-cols { grid-template-columns:1fr; }
  .nra-root .nra-perf-grid { grid-template-columns:1fr 1fr; }
}