/* ============================================================
   SharkNinja · Virality Investment Dashboard
   Design system — light / clean
   ============================================================ */
:root {
  /* surfaces */
  --bg:        #F5F6F9;
  --bg-2:      #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #EDF0F5;
  --border:    #E4E8EF;
  --border-2:  #D2D9E4;

  /* text */
  --text:   #161B25;
  --muted:  #5C6779;
  --faint:  #97A1B2;

  /* heat scale (cool -> hot = low -> high virality) */
  --cool:   #0EA5A0;  /* teal */
  --warm:   #F59E0B;  /* amber */
  --hot:    #F2542D;  /* coral */
  --blaze:  #E11D6B;  /* magenta */

  --reach:  #F2542D;
  --engage: #0EA5A0;
  --gold:   #C7820B;       /* readable amber for text */
  --gold-bg:#FBEFD3;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 12px 32px -16px rgba(28,40,75,0.22);
  --shadow-sm: 0 4px 14px -8px rgba(28,40,75,0.18);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  background:
    radial-gradient(1100px 620px at 82% -10%, rgba(242,84,45,0.06), transparent 60%),
    radial-gradient(900px 600px at 4% 0%, rgba(14,165,160,0.05), transparent 55%),
    var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
h1,h2,h3,h4 { margin: 0; font-weight: 650; letter-spacing: -0.02em; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
em { font-style: normal; color: var(--hot); }

/* ---------- password gate ---------- */
body.locked { overflow: hidden; }
.gate {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background:
    radial-gradient(1000px 600px at 80% -10%, rgba(242,84,45,0.10), transparent 60%),
    radial-gradient(800px 600px at 5% 0%, rgba(14,165,160,0.08), transparent 55%),
    var(--bg);
}
.gate-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  padding: 36px 34px; width: min(92vw, 380px); box-shadow: var(--shadow); text-align: center;
}
.gate .wordmark { margin-bottom: 20px; }
.gate h2 { font-size: 19px; }
.gate p { color: var(--muted); font-size: 13.5px; margin-top: 8px; }
.gate form { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.gate input {
  font: inherit; font-size: 15px; padding: 12px 14px; text-align: center;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text);
}
.gate input:focus { outline: none; border-color: var(--hot); box-shadow: 0 0 0 3px rgba(242,84,45,.15); }
.gate button {
  font: inherit; font-weight: 650; font-size: 14px; color: #fff;
  background: linear-gradient(135deg, var(--hot), var(--blaze)); border: 0; border-radius: 10px;
  padding: 12px; cursor: pointer;
}
.gate button:hover { filter: brightness(1.05); }
.gate .err { color: var(--hot); font-size: 12.5px; min-height: 16px; font-weight: 550; }

/* ---------- layout shell ---------- */
.app { max-width: 1280px; margin: 0 auto; padding: 0 28px 90px; }

header.top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 22px;
  padding: 14px 28px;
  margin: 0 -28px 0;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.brand { display:flex; align-items:center; flex: 1 1 0; min-width: 0; padding-left: 16px; }
.header-spacer { flex: 1 1 0; }
.wordmark { display:flex; align-items:center; gap:9px; user-select:none; }
.wm-shark { font-style: italic; font-weight: 800; font-size: 23px; letter-spacing: -0.03em; color: var(--text); }
.wm-bar { width: 2.5px; height: 22px; background: var(--text); border-radius: 2px; transform: skewX(-2deg); }
.wm-ninja { font-weight: 800; font-size: 23px; letter-spacing: 0.01em; color: var(--text); }

nav.tabs { display:flex; gap:4px; flex: 0 0 auto; flex-wrap: wrap; justify-content: center; }
nav.tabs button {
  font: inherit; font-size: 13.5px; font-weight: 550;
  color: var(--muted); background: transparent; border: 0;
  padding: 8px 14px; border-radius: 10px; cursor: pointer; transition: .16s;
}
nav.tabs button:hover { color: var(--text); background: var(--surface-2); }
nav.tabs button.active { color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-2); }

/* ---------- hero ---------- */
.hero { padding: 52px 0 28px; }
.hero .eyebrow {
  color: var(--hot); font-size: 12.5px; font-weight: 650; letter-spacing: 0.14em;
  text-transform: uppercase; margin-bottom: 14px;
}
.hero h1 { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.04; max-width: 16ch; color: var(--text); }
.hero h1 .accent { background: linear-gradient(100deg, var(--warm), var(--hot) 48%, var(--blaze)); -webkit-background-clip:text; background-clip:text; color: transparent; }
.hero p.lede { color: var(--muted); font-size: 16px; max-width: 60ch; margin-top: 16px; }

/* ---------- explainer ---------- */
.explainer { margin-top: 20px; }
.explainer .ex-head h3 { font-size: 17px; }
.explainer .ex-head p { color: var(--muted); font-size: 14px; margin-top: 6px; max-width: 80ch; }
.ex-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin: 18px 0; }
.ex-item { background: var(--bg); border:1px solid var(--border); border-radius: 12px; padding: 16px; }
.ex-item h4 { font-size: 14px; margin-top: 10px; }
.ex-item p { color: var(--muted); font-size: 13px; margin-top: 6px; }
.ex-icon { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; font-size:15px; font-weight:700; color:#fff; }
.ex-icon.reach { background: var(--reach); }
.ex-icon.engage { background: var(--engage); }
.ex-icon.score { background: linear-gradient(90deg, var(--cool), var(--warm), var(--hot), var(--blaze)); }
.b-high { color: var(--hot); font-weight:700; }
.b-mid { color: var(--gold); font-weight:700; }
.b-poor { color: var(--faint); font-weight:700; }
.ex-note { background: rgba(242,84,45,.05); border:1px solid rgba(242,84,45,.18); border-radius: 12px; padding: 14px 16px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.ex-note b { color: var(--text); }

/* ---------- KPI row ---------- */
.kpis { display:grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin: 28px 0 8px; }
.kpi {
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 18px 16px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.kpi::before { content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background: linear-gradient(90deg, var(--hot), var(--blaze)); opacity:.9; }
.kpi.cool::before { background: linear-gradient(90deg, var(--cool), #38bdf8); }
.kpi .label { color: var(--muted); font-size: 12.5px; font-weight: 550; }
.kpi .val { font-size: 34px; font-weight: 700; letter-spacing: -0.03em; margin-top: 6px; color: var(--text); }
.kpi .foot { color: var(--faint); font-size: 12px; margin-top: 4px; }

/* ---------- panels / cards ---------- */
.section { display: none; padding-top: 26px; }
.section.active { display: block; animation: fade .35s ease; }
@keyframes fade { from { opacity:0; transform: translateY(8px);} to {opacity:1; transform:none;} }

.section-head { margin: 8px 0 18px; }
.section-head .kicker { color: var(--hot); font-size:12px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; }
.section-head h2 { font-size: 26px; margin-top: 6px; }
.section-head p { color: var(--muted); max-width: 72ch; margin-top: 8px; font-size: 14.5px; }

.panel {
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-sm);
}
.panel h3 { font-size: 16px; }
.panel .ph-sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.grid-2 { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; }

/* ---------- filter chips ---------- */
.filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin: 4px 0 16px; }
.filters .flabel { color: var(--faint); font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin-right:2px; }
.chip {
  font: inherit; font-size: 13px; font-weight: 550;
  color: var(--muted); background: var(--surface); border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: .14s;
}
.chip:hover { color: var(--text); border-color: var(--border-2); }
.chip.on { color: #fff; background: var(--text); border-color: var(--text); }
.chip.reach.on { background: var(--reach); border-color: var(--reach); color:#fff; }
.chip.engage.on { background: var(--engage); border-color: var(--engage); color:#fff; }

/* ---------- scatter / svg ---------- */
.viz-wrap { position: relative; }
svg text { fill: var(--muted); font-family: var(--font); }
.axis line, .axis path { stroke: var(--border); }
.gridline { stroke: var(--border); stroke-dasharray: 2 4; opacity: .9; }
.quad-label { fill: var(--faint); font-size: 11.5px; font-weight: 600; letter-spacing:.04em; text-transform: uppercase; }
.sweet { fill: rgba(242,84,45,0.07); stroke: rgba(242,84,45,0.40); stroke-width: 1; stroke-dasharray: 4 4; }
.maplab { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; }
.maplab.muted { fill: var(--faint); font-weight: 600; letter-spacing: 0; }
.maplab.quad { fill: var(--muted); text-transform: uppercase; }
.maplab.accent { fill: var(--hot); }
.maplab-bg { fill: rgba(255,255,255,0.92); stroke: var(--border); stroke-width: 1; }

/* 2×2 quadrant key — mirrors the chart layout */
.quadkey-wrap { display:grid; grid-template-columns: 18px 1fr; grid-template-areas: "y grid" ". x"; gap:8px; margin-top:18px; max-width:640px; }
.quadkey-axisY { grid-area:y; writing-mode: vertical-rl; transform: rotate(180deg); text-align:center; font-size:10.5px; color:var(--faint); font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.quadkey-axisX { grid-area:x; text-align:center; font-size:10.5px; color:var(--faint); font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-top:2px; }
.quadkey { grid-area:grid; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.qk-cell { background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:11px 13px; }
.qk-cell.sweet { background: rgba(242,84,45,.06); border-color: rgba(242,84,45,.32); }
.qk-name { font-size:12.5px; font-weight:700; color:var(--text); }
.qk-cell.sweet .qk-name { color:var(--hot); }
.qk-desc { font-size:11.5px; color:var(--muted); margin-top:3px; }
.dot { stroke: #fff; stroke-width: 1; cursor: pointer; transition: opacity .15s; }
.dot:hover { stroke: var(--text); stroke-width: 1.5; }
.dot.dim { opacity: 0.10; }

/* tooltip */
.tip {
  position: fixed; pointer-events: none; z-index: 100;
  background: #fff; border: 1px solid var(--border-2);
  border-radius: 12px; padding: 12px 14px; min-width: 200px; max-width: 280px;
  box-shadow: 0 16px 40px -12px rgba(28,40,75,.28); opacity: 0; transition: opacity .12s;
  font-size: 13px; color: var(--text);
}
.tip h4 { font-size: 14px; margin-bottom: 6px; }
.tip .row { display:flex; justify-content:space-between; gap:14px; color: var(--muted); margin: 2px 0; }
.tip .row b { color: var(--text); font-variant-numeric: tabular-nums; }
.tip .tag { display:inline-block; font-size:11px; padding:2px 8px; border-radius:999px; margin-top:8px; font-weight:600; }
.tip p { margin: 0; }

/* legend */
.legend { display:flex; gap:18px; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:12.5px; margin-top:10px; }
.legend .sw { width:12px; height:12px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:-1px;}
.legend b { color: var(--text); }
.heatbar { height:10px; width:160px; border-radius:999px;
  background: linear-gradient(90deg, var(--cool), var(--warm), var(--hot), var(--blaze)); display:inline-block; vertical-align:-1px; }

/* ---------- driver bars ---------- */
.driver { display:grid; grid-template-columns: 230px 1fr 46px; gap: 14px; align-items:center; padding: 9px 0; border-bottom: 1px solid var(--border); cursor:default;}
.driver:last-child { border-bottom: 0; }
.driver:hover { background: var(--surface-2); border-radius: 8px; }
.driver .lev { font-size: 13.5px; font-weight: 550; }
.driver .lev small { display:block; color: var(--faint); font-weight: 400; font-size: 11.5px; }
.driver .track { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.driver .fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--warm), var(--hot)); }
.driver .fill.neg { background: linear-gradient(90deg, #94A3B8, #64748B); }
.driver .sig { text-align:right; font-variant-numeric: tabular-nums; font-weight:650; font-size:13px; }
.driver .dirbadge { font-size:10px; font-weight:700; padding:1px 6px; border-radius:5px; margin-left:6px; vertical-align:1px;}
.dirbadge.up { background: rgba(242,84,45,.12); color: var(--hot); }
.dirbadge.down { background: rgba(100,116,139,.14); color: #64748B; }

/* ---------- recommendation cards ---------- */
.rec { display:flex; gap:18px; padding: 20px; align-items:flex-start; }
.rec .rank { font-size: 30px; font-weight: 800; width: 40px; flex:none; letter-spacing:-.04em;
  background: linear-gradient(135deg,var(--warm),var(--blaze)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.rec .body { flex:1; }
.rec h3 { font-size: 17px; }
.rec .thesis { color: var(--muted); font-size: 14px; margin: 7px 0 12px; }
.rec ul { margin: 0; padding-left: 18px; color: var(--text); font-size: 13.5px; }
.rec ul li { margin: 4px 0; }
.rec .meta { display:flex; gap:10px; align-items:center; margin-top:12px; }
.badge { font-size: 11.5px; font-weight: 650; padding: 4px 10px; border-radius: 999px; }
.badge.hi { background: rgba(242,84,45,.12); color: var(--hot); }
.badge.med { background: var(--gold-bg); color: var(--gold); }
.alloc-pill { font-size:12px; color:var(--muted); }
.alloc-pill b { color: var(--text); }

/* do / avoid */
.dolist, .avoidlist { list-style:none; margin:0; padding:0; }
.dolist li, .avoidlist li { padding: 8px 0 8px 28px; position:relative; font-size:13.5px; border-bottom:1px solid var(--border); }
.dolist li:last-child, .avoidlist li:last-child { border-bottom:0; }
.dolist li::before { content:"✓"; position:absolute; left:0; color: var(--cool); font-weight:700; }
.avoidlist li::before { content:"✕"; position:absolute; left:0; color: var(--hot); font-weight:700; }

.callout { border-left: 3px solid var(--hot); background: rgba(242,84,45,.05); border-radius: 0 12px 12px 0; padding: 16px 18px; }
.callout h4 { color: var(--hot); font-size:14px; }
.callout p { color: var(--muted); font-size:13.5px; margin-top:6px; }

/* method note */
.method { background: var(--surface-2); border:1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-top:16px; }
.method h4 { font-size: 12.5px; text-transform:uppercase; letter-spacing:.08em; color: var(--muted); }
.method p { font-size: 13px; color: var(--muted); margin:8px 0 0; line-height:1.6; }
.method b { color: var(--text); }

/* ---------- simulator ---------- */
.sim { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.sim .controls { display:flex; flex-direction:column; gap: 15px; }
.ctrl label { display:block; font-size:12.5px; color:var(--muted); font-weight:550; margin-bottom:7px; }
.seg { display:flex; gap:6px; flex-wrap:wrap; }
.seg button { font:inherit; font-size:12.5px; font-weight:550; color:var(--muted);
  background:var(--surface); border:1px solid var(--border); padding:7px 12px; border-radius:9px; cursor:pointer; transition:.14s; }
.seg button:hover { color:var(--text); border-color: var(--border-2); }
.seg button.sel { background: rgba(242,84,45,.08); color:var(--hot); border-color: var(--hot); box-shadow: inset 0 0 0 1px var(--hot); }
.ctrl input[type=range] { width:100%; accent-color: var(--hot); }
.rangeval { float:right; color:var(--text); font-variant-numeric:tabular-nums; }

.gauge-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gauge-score { font-size: 64px; font-weight: 800; letter-spacing:-.04em; line-height:1; margin-top:6px; }
.gauge-band { font-size: 14px; font-weight:650; margin-top:8px; padding:5px 14px; border-radius:999px; }
.contrib { margin-top:18px; }
.contrib .c-row { display:grid; grid-template-columns: 160px 1fr; gap:10px; align-items:center; font-size:12.5px; padding:5px 0; }
.contrib .cbar { height:8px; border-radius:999px; background:var(--surface-2); position:relative; }
.contrib .cbar .cfill { position:absolute; top:0; bottom:0; border-radius:999px; }

/* ---------- explorer table ---------- */
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }
.toolbar input[type=search] { font:inherit; font-size:13.5px; color:var(--text); background:var(--surface);
  border:1px solid var(--border); border-radius:10px; padding:9px 14px; min-width:240px; }
.toolbar input::placeholder { color: var(--faint); }
.tbl-wrap { overflow-x:auto; border:1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
table { border-collapse: collapse; width:100%; font-size:12px; }
thead .head-row th { text-align:left; padding:9px 9px; color:var(--muted); font-weight:600; font-size:10.5px;
  text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid var(--border);
  cursor:pointer; white-space:nowrap; position:sticky; top:0; background: var(--bg-2); z-index:3; }
thead .head-row th:hover { color: var(--text); }
thead th .arrow { color: var(--hot); }
tbody td { padding: 8px 9px; border-bottom:1px solid var(--border); white-space:nowrap; color: var(--text); }

/* per-column filter row */
thead .filter-row th { padding:6px 9px 9px; background: var(--bg-2); border-bottom:1px solid var(--border-2);
  vertical-align:top; cursor:default; position:sticky; top:33px; z-index:2; }
.col-filter { width:100%; max-width:128px; font:inherit; font-size:11px; color:var(--text);
  background:var(--surface); border:1px solid var(--border); border-radius:7px; padding:4px 6px; cursor:pointer; }
.col-filter:hover { border-color: var(--border-2); }
.filt-hint { font-size:10px; color:var(--faint); white-space:nowrap; }
.rng-val { font-size:10px; color:var(--muted); font-weight:650; white-space:nowrap; margin-bottom:3px; font-variant-numeric:tabular-nums; }
.dual { position:relative; height:18px; width:100%; min-width:84px; }
.dual::before { content:""; position:absolute; top:7px; left:0; right:0; height:4px; background:var(--surface-2); border-radius:2px; }
.dual .rng-fill { position:absolute; top:7px; height:4px; background:var(--hot); border-radius:2px; }
.dual input[type=range]{ position:absolute; top:1px; left:0; width:100%; height:16px; margin:0;
  background:none; -webkit-appearance:none; appearance:none; pointer-events:none; }
.dual input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; pointer-events:auto; width:13px; height:13px;
  border-radius:50%; background:#fff; border:2px solid var(--hot); cursor:pointer; box-shadow:0 1px 3px rgba(28,40,75,.25); }
.dual input[type=range]::-moz-range-thumb{ pointer-events:auto; width:13px; height:13px;
  border-radius:50%; background:#fff; border:2px solid var(--hot); cursor:pointer; }

/* let the dataset table use the full viewport width on big screens */
@media (min-width: 1300px) {
  #dataset { width: calc(100vw - 56px); margin-left: calc(640px - 50vw); }
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
tbody td.num { font-variant-numeric: tabular-nums; }
.tlink { color: var(--text); font-weight: 600; text-decoration: none; border-bottom: 1px dashed var(--border-2); }
.tlink:hover { color: var(--hot); border-bottom-color: var(--hot); }
.openlink { color: var(--hot); font-weight: 600; text-decoration: none; font-size: 12px; white-space: nowrap; }
.openlink:hover { text-decoration: underline; }
.pill { font-size:11px; font-weight:600; padding:2px 9px; border-radius:999px; }
.scoredot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:7px; vertical-align:0; }

.footnote { color: var(--faint); font-size:12px; margin-top:14px; line-height:1.6; }
.mt { margin-top:16px; } .mt-lg { margin-top:24px; }
.row-between { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }

@media (max-width: 960px) {
  .kpis, .grid-3 { grid-template-columns: repeat(2,1fr); }
  .grid-2, .sim { grid-template-columns: 1fr; }
  nav.tabs { width:100%; order:3; }
}