/* App report components, shared by index.html (live reports + the
   landing demo) and ideas.html (the library). Built by report.js; the
   per-section bodies (Demand, Competitors, …) still come from each page's
   own render* helpers and use the generic classes at the bottom. */

.report{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-xl);padding:clamp(18px,3vw,28px);display:grid;gap:18px;overflow:hidden}
.report > *{position:relative;z-index:1}
.report .rglow{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.report .rglow i{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5}
.report .rglow i:nth-child(1){width:46%;aspect-ratio:1;left:-8%;top:-30%;background:radial-gradient(circle,var(--glow-teal),transparent 65%)}
.report .rglow i:nth-child(2){width:50%;aspect-ratio:1;right:-10%;top:-34%;background:radial-gradient(circle,var(--glow-gold),transparent 62%)}

.rhead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 24px;align-items:start}
.rhead > div:first-child{min-width:0}
.rhead h2,.rhead h3{font-family:var(--disp);font-weight:600;letter-spacing:-.02em;font-size:clamp(21px,2.8vw,28px);line-height:1.15;max-width:26ch;margin:6px 0 0;text-wrap:balance}
.rmeta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.rsub{font-family:var(--mono);font-size:11.5px;color:var(--slate);margin-top:10px;overflow-wrap:anywhere}
.pill{display:inline-flex;align-items:center;gap:5px;font:500 12px/1 var(--body);border-radius:var(--radius-pill);padding:6px 10px;border:1px solid var(--line);color:var(--slate);white-space:nowrap}
.pill.good{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,transparent);background:color-mix(in srgb,var(--good) 10%,transparent)}
.pill.warn{color:var(--gold-ink);border-color:color-mix(in srgb,var(--gold) 45%,transparent);background:color-mix(in srgb,var(--gold) 10%,transparent)}
.pill.cool{color:var(--teal);border-color:color-mix(in srgb,var(--teal) 45%,transparent);background:color-mix(in srgb,var(--teal) 8%,transparent)}
.pill.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 8%,transparent)}

.money{display:grid;justify-items:end;gap:3px;text-align:right;border-radius:var(--radius-md);padding:2px 0}
.money small{font-size:12px;color:var(--slate);max-width:30ch}
.money b{font-family:var(--disp);font-weight:700;font-size:clamp(26px,3.4vw,38px);letter-spacing:-.03em;line-height:1.05;background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent}

.verdictbox{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:16px 18px;border-radius:var(--radius-md);border:1px solid var(--line);background:var(--surface);font-size:15px;line-height:1.55}
.verdictbox .vmark{width:24px;height:24px;margin-top:2px}
.verdictbox.open{background:linear-gradient(var(--card),var(--card)) padding-box,var(--spectrum) border-box;border-color:transparent}
.verdictbox.saturated{border-color:color-mix(in srgb,var(--gold) 40%,var(--line))}
.verdictbox .tag{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:5px}
.verdictbox .internalmark{color:var(--gold-ink);letter-spacing:.04em;text-transform:none}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,128px),1fr));gap:10px}
.tile{padding:13px 15px;display:grid;gap:6px;align-content:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}
.tile .k{font-size:12.5px;color:var(--slate)}
.tile .v{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tile .v b{font-family:var(--disp);font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1}
.tile .v span{font-size:12.5px;color:var(--slate)}
.tile .tnote{font-size:12px;color:var(--slate);overflow-wrap:anywhere}
.meter{height:5px;border-radius:5px;background:var(--line-soft);overflow:hidden}
.meter i{display:block;height:100%;border-radius:inherit;background:var(--spectrum)}

.sources{display:grid;gap:9px;padding:15px 17px;border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
.src{display:grid;grid-template-columns:110px 1fr 76px;gap:12px;align-items:center;font-size:13px}
.src .lane{height:8px;border-radius:8px;background:var(--line-soft);overflow:hidden}
.src .lane i{display:block;height:100%;border-radius:inherit}
.src .val{text-align:right;color:var(--slate);font-family:var(--mono);font-size:12px;white-space:nowrap}

.ractions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ghostbtn,.pdfbtn,.export{display:inline-flex;align-items:center;gap:6px;font:500 13px/1 var(--body);background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-pill);padding:9px 14px;cursor:pointer;white-space:nowrap;transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.ghostbtn:hover,.pdfbtn:hover,.export:hover{border-color:var(--copper);color:var(--copper)}

/* ---- the detailed sections under the summary ---- */
.rsections{display:grid;gap:0;border-top:1px solid var(--line)}
.report .section{margin:0;padding:16px 0;border-bottom:1px solid var(--line)}
.report .section:last-child{border-bottom:0}
.report .section h3{font-family:var(--disp);font-weight:600;font-size:17px;letter-spacing:-.01em;margin-bottom:8px}
.subhead{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--slate);margin:12px 0 5px}
.note{font-size:13px;color:var(--slate);margin-top:8px}

.verdict{display:inline-flex;align-items:center;font:500 12px/1 var(--body);padding:6px 10px;border-radius:var(--radius-pill);margin:2px 8px 10px 0;border:1px solid var(--line);color:var(--slate)}
.verdict.open{color:var(--good);border-color:color-mix(in srgb,var(--good) 45%,transparent);background:color-mix(in srgb,var(--good) 10%,transparent)}
.verdict.saturated{color:var(--gold-ink);border-color:color-mix(in srgb,var(--gold) 45%,transparent);background:color-mix(in srgb,var(--gold) 10%,transparent)}
.verdict.big{font-size:14px;padding:8px 14px}
.revenue{display:inline-block;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--gold-ink);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);background:color-mix(in srgb,var(--gold) 10%,transparent);padding:5px 10px;border-radius:var(--radius-pill);white-space:nowrap}
.revenue.big{font-family:var(--disp);font-weight:700;font-size:24px;letter-spacing:-.02em;border:0;background:var(--spectrum);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0;white-space:normal}

.gauges{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.gauge{display:inline-block;font-family:var(--mono);font-size:12px;border:1px solid var(--line);border-radius:var(--radius-md);padding:9px 12px;background:var(--surface);min-width:170px;margin:2px 8px 4px 0}
.gauge .glabel{color:var(--slate);text-transform:uppercase;letter-spacing:.08em;font-size:10px;display:block;margin-bottom:4px}
.gauge b{font-family:var(--disp);font-size:18px;font-weight:600;color:var(--ink)}
.gauge .bar,.gauge .bar-i{height:5px;background:var(--line-soft);border-radius:5px;overflow:hidden;margin-top:6px}
.gauge .bar i,.gauge .bar-i i{display:block;height:100%;border-radius:inherit;background:var(--spectrum)}
.gauge.hard .bar i,.gauge.hard .bar-i i{background:linear-gradient(100deg,var(--slate),var(--ink-soft))}
.gauge.big{min-width:230px;padding:12px 16px}
.gauge.big .bar{height:8px}

table{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:12px;margin-top:6px}
th{font-weight:500;text-align:left;color:var(--slate);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;padding:7px 10px 7px 0;border-bottom:1px solid var(--line)}
td{padding:7px 10px 7px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
td.num{text-align:right;white-space:nowrap}
.quote{border-left:2px solid var(--gold);padding:7px 12px;margin:8px 0;color:var(--ink-soft);font-size:13.5px;background:color-mix(in srgb,var(--gold) 4%,transparent);border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.quote .stars{font-family:var(--mono);font-size:10.5px;color:var(--gold-ink);display:block;margin-bottom:2px}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;font-size:13px;margin:6px 0 4px}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:9px 12px;overflow-wrap:anywhere}
.fact .flabel{display:block;color:var(--slate);font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.tainted{background:color-mix(in srgb,var(--bad) 8%,var(--card));border:1px solid color-mix(in srgb,var(--bad) 45%,transparent);border-radius:var(--radius-md);padding:10px 14px;font-family:var(--mono);font-size:12px;color:var(--bad)}
.agenttrace{font-size:12.5px}
.agenttrace summary{cursor:pointer;font-family:var(--mono);font-size:11.5px;color:var(--slate)}
.agenttrace ul{margin:8px 0 0;padding-left:18px;font-family:var(--mono);font-size:11px;color:var(--ink-soft);line-height:1.6;overflow-wrap:anywhere}
.agenttrace code{color:var(--gold-ink)}
.internalmark{color:var(--gold-ink)}

@media (max-width:640px){
  .rhead{grid-template-columns:1fr}
  .money{justify-items:start;text-align:left}
  .src{grid-template-columns:84px 1fr 64px}
}