/* ============================================================================
   LIGHTHOUSE REDESIGN — ported component system (motion-graphic language)
   Source: Lighthouse Redesign Prototype/lighthouse-redesign.html (vanilla).
   ALL classes are namespaced `lh-` to coexist with the live app's existing
   .card/.btn/.tag/.table/.feed/.chip classes — never clobber a hook.
   Colours resolve through the app's --accent* tokens so the whole set is
   theme-aware and recolours with the palette.
   ========================================================================== */
:root{
  --lh-radius: 14px;
}

/* ---------- cross-tab consistency: metric numbers in mono ----------
   The redesign's "instrument" look uses IBM Plex Mono for every prominent
   metric number. The Overview gauges/trend already do; this propagates it to
   the big stat/score/count numbers across the other tabs. Loaded after the
   tab CSS so it wins; these classes don't set font-family themselves. */
.ring-value, .admin-stat-value, .key-metric-value,
.influencer-metric-value, .influencer-score-value, .influencer-stat-value,
.stat-value, .citation-stat-value, .citation-source-count-value,
.geo-metric-value, .geo-page-score-value, .geo-score-grade, .geo-score-value,
.geo-score-card-main, .benchmark-value, .brand-stat-value, .product-metric-value,
.association-percent, .similarity-score, .competitor-stat-value, .data-proof-value,
.pillar-count, .xci-metric-value,
.trf-kpi-value, .trf-stat-val,
.detail-stat-value, .insight-stat-value, .semantic-signal-value, .theme-detail-stat-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ---------- entrance + skeleton motion ---------- */
.lh-enter{opacity:0;transform:translateY(10px);animation:lhRise .5s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes lhRise{to{opacity:1;transform:none}}
.lh-shim{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);
  transform:translateX(-100%);animation:lhShim 1.1s ease forwards}
@keyframes lhShim{to{transform:translateX(100%)}}

/* ---------- card ---------- */
.lh-card{background:linear-gradient(180deg,rgba(16,29,44,.5),rgba(12,22,34,.5));border:1px solid var(--hull);
  border-radius:var(--lh-radius);padding:16px 18px;position:relative;overflow:hidden}
.lh-card.lh-pad0{padding:0}
.lh-card h3,.lh-card .lh-h3{margin:0 0 2px;font-size:12px;font-family:var(--font-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--mist);font-weight:500}
.lh-card .lh-sub{font-size:11.5px;color:var(--dim);font-family:var(--font-mono);margin-bottom:10px}
.lh-card .lh-corner{position:absolute;top:14px;right:16px;font-family:var(--font-mono);font-size:11px;color:var(--dim)}

/* ---------- grid ---------- */
.lh-grid{display:grid;gap:14px}
.lh-g2{grid-template-columns:repeat(2,1fr)}.lh-g3{grid-template-columns:repeat(3,1fr)}
.lh-g4{grid-template-columns:repeat(4,1fr)}.lh-g6{grid-template-columns:repeat(6,1fr)}
.lh-col-2{grid-column:span 2}.lh-col-3{grid-column:span 3}.lh-col-4{grid-column:span 4}
@media(max-width:1200px){.lh-g4{grid-template-columns:repeat(2,1fr)}.lh-g6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.lh-g2,.lh-g3,.lh-g4,.lh-g6{grid-template-columns:1fr}}

/* ---------- KPI tile ---------- */
.lh-kpi{display:flex;flex-direction:column;gap:0}
.lh-kpi .lh-lab{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mist)}
.lh-kpi .lh-lab .lh-cd{width:7px;height:7px;border-radius:2px;flex:0 0 7px}
.lh-kpi .lh-num{font-family:var(--font-mono);font-weight:600;font-size:34px;margin-top:10px;line-height:1;color:var(--foam)}
.lh-kpi .lh-foot{margin-top:8px;display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11.5px;color:var(--dim)}
.lh-delta{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:7px}
.lh-delta.lh-up{color:var(--accent-green);background:rgba(34,197,94,.12)}
.lh-delta.lh-down{color:var(--accent-red);background:rgba(239,68,68,.12)}
.lh-delta svg{width:9px;height:9px;fill:currentColor;stroke:none}

/* ---------- bars / wave-fill ---------- */
.lh-bars{display:flex;flex-direction:column;gap:14px}
.lh-barrow{display:grid;grid-template-columns:120px 1fr 56px;align-items:center;gap:12px}
.lh-barrow .lh-nm{font-size:14px;font-weight:500}.lh-barrow .lh-nm.lh-you{color:var(--coral);font-weight:700}
.lh-barrow canvas{width:100%;height:28px;display:block}
.lh-barrow .lh-vl{font-family:var(--font-mono);font-weight:600;font-size:15px;text-align:right}
.lh-barrow .lh-vl.lh-you{color:var(--foam)}.lh-barrow .lh-vl.lh-dim{color:var(--mist)}

/* ---------- data table ---------- */
table.lh-dt{width:100%;border-collapse:collapse;font-size:13px}
table.lh-dt th{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--hull);font-weight:500;position:sticky;top:0;background:var(--panel)}
table.lh-dt td{padding:11px 12px;border-bottom:1px solid rgba(27,38,54,.6);vertical-align:middle}
table.lh-dt tr:hover td{background:rgba(16,29,44,.5)}
table.lh-dt td.lh-num,table.lh-dt th.lh-num{font-family:var(--font-mono);text-align:right}
.lh-tw{display:inline-block;height:6px;border-radius:3px;background:#1b2636;width:90px;vertical-align:middle;overflow:hidden}
.lh-tw>i{display:block;height:100%;border-radius:3px}

/* ---------- chips / tags ---------- */
.lh-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;padding:3px 9px;border-radius:20px;
  border:1px solid var(--hull2);color:var(--mist);background:#0c1724}
.lh-chip .lh-d{width:6px;height:6px;border-radius:50%}
.lh-tag{font-family:var(--font-mono);font-size:10.5px;padding:2px 8px;border-radius:6px}
.lh-tag.lh-g{color:var(--accent-green);background:rgba(34,197,94,.12)} .lh-tag.lh-r{color:#fca5a5;background:rgba(239,68,68,.12)}
.lh-tag.lh-y{color:var(--goldtip);background:rgba(232,168,48,.14)} .lh-tag.lh-b{color:#93c5fd;background:rgba(59,130,246,.14)}
.lh-tag.lh-m{color:var(--mist);background:#13212f}

/* ---------- sparkline / donut canvases ---------- */
canvas.lh-spark{width:100%;height:64px;display:block}
.lh-donutwrap{position:relative;display:grid;place-items:center}
.lh-donutwrap canvas{display:block}
.lh-donutwrap .lh-ctr{position:absolute;text-align:center}
.lh-donutwrap .lh-ctr b{font-family:var(--font-mono);font-weight:600;font-size:34px;display:block;line-height:1;color:var(--foam)}
.lh-donutwrap .lh-ctr small{font-family:var(--font-mono);font-size:10.5px;color:var(--mist);letter-spacing:.1em}

/* ---------- lighthouse-lamp loader (easter egg) ---------- */
.lh-lamp{--s:54px;width:var(--s);height:var(--s);position:relative;display:inline-block}
.lh-lamp .lh-beam{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(232,168,48,.55) 0deg 26deg, transparent 26deg 180deg, rgba(232,168,48,.30) 180deg 200deg, transparent 200deg 360deg);
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 32%, #000 33%); mask:radial-gradient(circle at 50% 50%, transparent 32%, #000 33%);
  animation:lhSpin 2.4s linear infinite}
@keyframes lhSpin{to{transform:rotate(360deg)}}
.lh-lamp .lh-house{position:absolute;inset:0;display:grid;place-items:center;color:var(--accent)}
.lh-lamp .lh-house svg{width:48%;height:48%;stroke:var(--accent);fill:none;stroke-width:1.6}
.lh-loadwrap{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:50px;color:var(--mist);font-family:var(--font-mono);font-size:12px}

/* ---------- feed / legend / misc ---------- */
.lh-legend{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11px;color:var(--mist)}
.lh-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:middle}
.lh-feed .lh-it{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid rgba(27,38,54,.6)}
.lh-feed .lh-it:last-child{border:0}
.lh-feed .lh-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex:0 0 8px}
.lh-feed .lh-it b{font-weight:600;font-size:13px}.lh-feed .lh-it p{margin:2px 0 0;color:var(--mist);font-size:12px}
.lh-feed .lh-it time{margin-left:auto;font-family:var(--font-mono);font-size:10.5px;color:var(--dim);white-space:nowrap}
.lh-hint{font-family:var(--font-mono);font-size:11px;color:var(--dim)}
.lh-eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

/* ---------- sub-tab bar ---------- */
.lh-subtabs{display:flex;gap:2px;border-bottom:1px solid var(--hull);margin-bottom:14px;flex-wrap:wrap}
.lh-subtab{font-family:var(--font-display);font-size:12.5px;color:var(--mist);background:transparent;border:0;border-bottom:2px solid transparent;padding:8px 12px;cursor:pointer}
.lh-subtab.active{color:var(--foam);border-bottom-color:var(--accent)}
.lh-subtab:hover{color:var(--foam)}

/* ---------- banner ---------- */
.lh-banner{display:flex;gap:12px;align-items:flex-start;background:linear-gradient(135deg,rgba(232,168,48,.08),rgba(11,27,46,.35));border:1px solid var(--hull);border-radius:12px;padding:13px 15px;margin-bottom:16px}
.lh-banner .lh-bi{display:flex;align-items:center;color:var(--accent);flex:0 0 auto}
.lh-banner .lh-bi svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.lh-banner b{display:block;margin-bottom:3px;font-size:13.5px;color:var(--foam)}
.lh-banner p{margin:0;color:var(--mist);font-size:12.5px;line-height:1.5}

/* ---------- key/value, headings, dials ---------- */
.lh-kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid rgba(27,38,54,.6);font-size:13px}
.lh-kv:last-child{border:0}.lh-kv .lh-k{color:var(--mist)}.lh-kv .lh-v{font-family:var(--font-mono);font-weight:500;text-align:right;color:var(--foam)}
.lh-subhead{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:20px 0 10px}
.lh-gradechip{display:inline-block;font-family:var(--font-mono);font-weight:600;font-size:13px;padding:3px 10px;border-radius:7px;background:rgba(34,197,94,.14);color:var(--accent-green)}

/* ---------- steps / funnel ---------- */
.lh-steps{display:flex;flex-direction:column;gap:8px}
.lh-step{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid var(--hull);border-radius:10px;background:var(--panel)}
.lh-step .lh-n{width:24px;height:24px;border-radius:7px;background:#13212f;display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;color:var(--accent);flex:0 0 24px}
.lh-step .lh-ic{display:flex;color:var(--accent)}.lh-step .lh-ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.lh-step b{font-size:13.5px;color:var(--foam)}.lh-step .lh-ty{font-family:var(--font-mono);font-size:10.5px;color:var(--dim);margin-left:auto}
.lh-funnel{display:flex;gap:8px;flex-wrap:wrap}
.lh-funnel .lh-fstage{flex:1;min-width:120px;text-align:center;padding:14px 8px;border-radius:10px;border:1px solid var(--hull);background:var(--panel)}

/* ---------- buttons (mirror the prototype .btn for ported chrome only) ---------- */
.lh-btn{font-family:var(--font-display);font-size:12.5px;font-weight:500;border:1px solid var(--hull2);background:var(--panel);
  color:var(--foam);padding:8px 13px;border-radius:9px;cursor:pointer;display:inline-flex;gap:7px;align-items:center}
.lh-btn:hover{border-color:var(--accent);color:var(--accent)}
.lh-btn.lh-gold{background:var(--accent);color:#13130a;border-color:var(--accent);font-weight:600}
.lh-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

/* ---------- inline svg icon defaults (one unified set) ---------- */
.lh-ic-inline{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.lh-ic-inline svg{stroke:currentColor;fill:none;stroke-width:2;width:1em;height:1em}

/* ---------- emoji-replacement inline icon (from the sweep) ---------- */
.lh-em{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;
  vertical-align:-0.14em;color:inherit;flex:0 0 auto}
.lh-em svg{width:1em;height:1em;stroke:currentColor;fill:none}
/* give the icon a hair of breathing room when it leads a label */
.lh-em + *{margin-left:0}

/* ---------- buoy markers (trend-line end points) ---------- */
.lh-buoy{filter:drop-shadow(0 0 2px currentColor)}
.lh-buoy-halo{transform-box:fill-box;transform-origin:center;animation:lhBuoyBob 2.6s ease-in-out infinite}
@keyframes lhBuoyBob{0%,100%{opacity:.28;r:4.5px}50%{opacity:.12;r:6px}}
@media (prefers-reduced-motion: reduce){ .lh-buoy-halo{animation:none} }

/* ---------- LIVE pill (topbar) ---------- */
.lh-livepill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11px;
  font-weight:600;letter-spacing:.08em;color:var(--accent-green);border:1px solid rgba(34,197,94,.4);
  background:rgba(34,197,94,.1);padding:5px 10px;border-radius:20px;white-space:nowrap;flex:0 0 auto}
.lh-livepill .lh-livedot{width:6px;height:6px;border-radius:50%;background:var(--accent-green);animation:lhBlink 2.4s infinite}
@keyframes lhBlink{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion: reduce){ .lh-livepill .lh-livedot{animation:none} }
@media (max-width: 1100px){ .lh-livepill{display:none} }

/* ---------- beacon-lamp spinner (re-skins the app's loading spinners) ----------
   Converts the generic border-spin loaders into a rotating gold beacon beam.
   Pure CSS override — touches no markup or hooks. Inline-styled spinners that
   already use var(--accent) keep their gold ring. */
.spinner, .loading-spinner, .im-spinner, .crawl-spinner, .strategy-loading-spinner {
  border: none !important;
  background:
    conic-gradient(from 0deg,
      rgba(232,168,48,.65) 0deg 26deg, transparent 26deg 180deg,
      rgba(232,168,48,.35) 180deg 200deg, transparent 200deg 360deg) !important;
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 32%, #000 33%);
          mask: radial-gradient(circle at 50% 50%, transparent 32%, #000 33%);
  border-radius: 50%;
  animation: lhSpin 2.4s linear infinite !important;
}
@media (prefers-reduced-motion: reduce){
  .spinner, .loading-spinner, .im-spinner, .crawl-spinner, .strategy-loading-spinner{ animation: none !important; }
}

/* ---------- reduced motion: snap data in, drop pulses/shimmer ---------- */
@media (prefers-reduced-motion: reduce){
  .lh-enter{animation:none;opacity:1;transform:none}
  .lh-shim{display:none}
  .lh-lamp .lh-beam{animation:none}
}