/* ═══ HelpUsTech Sentinel v3 — enterprise design system (WCAG AA) ═══ */
:root {
  --obsidian:#080C14; --navy:#0F172A; --slate:#1E293B;
  --orange:#EA580C; --orange-hi:#F97316;
  --crimson-bg:#450A0A; --crimson-bd:#991B1B; --crimson-tx:#EF4444;
  --emerald:#10B981;
}
* { -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
body { background: var(--obsidian); letter-spacing:.01em; }

/* ── typography floor: nothing under 12px, body 14+ ── */
body, p, li, td, th { font-size: 14px; }
.text-sm { font-size: 14px !important; }
.text-xs { font-size: 12px !important; }

/* ── canvas texture ── */
body::before {
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 500px at 75% -5%, rgba(234,88,12,.055), transparent 60%),
    radial-gradient(900px 550px at 0% 100%, rgba(16,185,129,.045), transparent 60%),
    linear-gradient(rgba(30,41,59,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,41,59,.16) 1px, transparent 1px);
  background-size: auto, auto, 40px 40px, 40px 40px;
}
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }

/* ── nav tabs: orange active ── */
.tabbar { height: 48px; align-items:center; }
.nav-tab { display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600;
  color:#94a3b8; white-space:nowrap; padding:0 2px; border-bottom:2px solid transparent; transition:.2s; }
.nav-tab:hover { color:#f1f5f9; }
.nav-tab.tab-active { color:#fff; border-color:var(--orange-hi); }
.nav-tab.tab-active svg { color: var(--orange-hi); }

/* ── live dot ── */
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--emerald); display:inline-block;
  box-shadow:0 0 0 0 rgba(16,185,129,.5); animation:livePulse 2s infinite; }
@keyframes livePulse { 70%{box-shadow:0 0 0 8px rgba(16,185,129,0)} 100%{box-shadow:0 0 0 0 rgba(16,185,129,0)} }

/* ── shimmer headline words ── */
.shimmer { background:linear-gradient(90deg,#F97316,#10B981,#F97316); background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:shim 5s linear infinite; }
@keyframes shim { to{background-position:250% 0} }

/* ── 3D hero centerpiece ── */
.hero3d { position:relative; height:220px; perspective:900px; }
.holo-shield { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)
  rotateX(18deg) rotateY(-12deg); animation:holoSpin 14s linear infinite; transform-style:preserve-3d;
  filter:drop-shadow(0 22px 40px rgba(234,88,12,.25)); }
@keyframes holoSpin { 50%{transform:translate(-50%,-50%) rotateX(18deg) rotateY(12deg)} 100%{transform:translate(-50%,-50%) rotateX(18deg) rotateY(-12deg)} }
.orbit-ring { position:absolute; left:50%; top:50%; border:1px solid rgba(30,41,59,.9); border-radius:50%; transform-style:preserve-3d; }
.ring-1 { width:300px; height:300px; transform:translate(-50%,-50%) rotateX(68deg); animation:orbit 24s linear infinite; }
.ring-2 { width:200px; height:200px; transform:translate(-50%,-50%) rotateX(68deg) rotateZ(45deg); animation:orbit 16s linear infinite reverse; }
@keyframes orbit { to { transform:translate(-50%,-50%) rotateX(68deg) rotate(360deg); } }
.orbit-ring .node { position:absolute; width:10px; height:10px; border-radius:50%; top:-5px; left:50%; }
.node-emerald { background:var(--emerald); box-shadow:0 0 14px var(--emerald); animation:nodePulse 2.4s ease-in-out infinite; animation-delay:var(--d); }
.node-orange { background:var(--orange-hi); box-shadow:0 0 14px var(--orange-hi); animation:nodePulse 2.4s ease-in-out infinite; animation-delay:var(--d); }
@keyframes nodePulse { 0%,100%{transform:scale(1);opacity:.9} 50%{transform:scale(1.6);opacity:1} }
@media (max-width:767px){ .hero3d{height:180px} .ring-1{width:220px;height:220px} .ring-2{width:150px;height:150px} }

/* ── cards: 3D tactile depth ── */
.card-4d { background:var(--navy); border:1px solid var(--slate); border-top:1px solid rgba(255,255,255,.10);
  box-shadow:0 24px 48px -24px rgba(0,0,0,.55); transition:transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s, border-color .35s; }
.card-4d:hover { transform:translateY(-4px); box-shadow:0 36px 64px -28px rgba(0,0,0,.65); border-color:rgba(249,115,22,.35); }
.btn-4d { position:relative; overflow:hidden; }
.btn-4d::after { content:''; position:absolute; inset:0; background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.22) 50%,transparent 58%);
  transform:translateX(-130%); transition:transform .7s; }
.btn-4d:hover::after { transform:translateX(130%); }

/* ── terminal ── */
.terminal-bar { display:flex; align-items:center; gap:8px; background:#0B1220; padding:10px 14px; border-bottom:1px solid var(--slate); }
.tdot { width:11px; height:11px; border-radius:50%; }
.td-r{background:#ff5f57}.td-y{background:#febc2e}.td-g{background:#28c840}
.terminal-title { color:#64748b; font-size:12px; margin-left:6px; }

/* ── scan-expand animation ── */
.scan-expand { max-height:0; opacity:0; overflow:hidden; transition:max-height .8s cubic-bezier(.22,1,.36,1), opacity .5s, margin .5s; }
.scan-expand.expanded { max-height:640px; opacity:1; }

/* ── findings & badges (WCAG-scaled) ── */
.find-card { background:rgba(15,23,42,.85); border:1px solid var(--slate); border-left-width:3px; border-radius:12px; padding:16px 18px; }
.find-card.sev-ok { border-left-color:var(--emerald); }
.find-card.sev-warn { border-left-color:#F59E0B; }
.find-card.sev-bad { border-left-color:var(--crimson-tx); }
.find-card.sev-info { border-left-color:#38BDF8; }
.find-card .fw { font-weight:600; color:#fff; font-size:14px; }
.find-card .fmeta { font-size:12px; color:#94a3b8; }
.find-card .fdesc { font-size:13px; color:#94a3b8; line-height:1.6; margin-top:6px; }
.find-card .ffix { font-size:12px; margin-top:10px; background:var(--obsidian); border:1px solid var(--slate);
  border-radius:8px; padding:10px 12px; font-family:'JetBrains Mono',monospace; color:#F97316; word-break:break-all; }
.badge-chip { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  border-radius:999px; padding:5px 14px; letter-spacing:.06em; text-transform:uppercase; }
.badge-chip.ok { background:rgba(16,185,129,.12); color:var(--emerald); border:1px solid rgba(16,185,129,.4); }
.badge-chip.warn { background:rgba(245,158,11,.12); color:#F59E0B; border:1px solid rgba(245,158,11,.4); }
.badge-chip.bad { background:var(--crimson-bg); color:var(--crimson-tx); border:1px solid var(--crimson-bd); }
.badge-chip.info { background:rgba(56,189,248,.12); color:#38BDF8; border:1px solid rgba(56,189,248,.4); }

/* ── incident radar cards ── */
.radar-card { background:var(--navy); border:1px solid var(--slate); border-radius:14px; padding:18px; position:relative; overflow:hidden; }
.radar-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg, var(--crimson-tx), transparent); }
.radar-src { font-size:12px; color:#64748b; }
.radar-impact { font-size:13px; color:#cbd5e1; line-height:1.6; margin-top:8px; }
.radar-cve { font-family:'JetBrains Mono',monospace; font-size:12px; color:#38BDF8; }

/* ── rubric bars ── */
.bar-fill { transform-origin:left; transform:scaleX(0); transition:transform .8s cubic-bezier(.22,1,.36,1); }
.bar-fill.bar-on { transform:scaleX(1); }

/* ── result modal ── */
.result-backdrop { background:rgba(8,12,20,.78); backdrop-filter:blur(8px); }
.glass-strong { background:rgba(15,23,42,.92); backdrop-filter:blur(18px) saturate(1.2); }
.result-fit { display:flex; flex-direction:column; max-height:calc(100vh - 48px); overflow:hidden; }
.result-body { overflow-y:auto; flex:1; min-height:0; }
@media (max-width:767px){ .result-body{grid-template-columns:1fr} #findings-scroll{max-height:38vh} }
.result-body::-webkit-scrollbar, .findings-scroll::-webkit-scrollbar { width:6px; }
.result-body::-webkit-scrollbar-thumb, .findings-scroll::-webkit-scrollbar-thumb { background:var(--slate); border-radius:3px; }

/* ── accordion ── */
.acc-body { max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.22,1,.36,1); }
.acc-item.open .acc-body { max-height:320px; }
.acc-item.open .acc-sign { transform:rotate(45deg); }
.acc-sign { transition:transform .3s; }

/* ── lab grid ── */
.lab-card { background:var(--navy); border:1px solid var(--slate); border-radius:14px; padding:16px; }
.lab-card:hover { border-color:rgba(249,115,22,.4); }
.lab-pts { font-family:'JetBrains Mono',monospace; font-weight:600; }

/* docked chip */
#result-chip { display:none; }
#result-chip.chip-on { display:inline-flex; }
/* ── mobile compare pills ── */
.pill-btn { background: var(--navy); border: 1px solid var(--slate); color: #94a3b8;
  font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 999px; transition: .2s; }
.pill-btn:hover { color: #fff; border-color: rgba(249,115,22,.5); }
.pill-btn.pill-on { background: var(--orange); border-color: var(--orange-hi); color: #fff; }