/* =========================================================
   Externalsight — Scanner Reference  |  Operator Console  v20260510
   Design tokens mirror landing.v20260509
   ========================================================= */

:root {
  --ob-bg:          #07090C;
  --ob-bg-alt:      #0B0E13;
  --ob-panel:       #10141B;
  --ob-panel2:      #161B23;
  --ob-panel3:      #1C2330;
  --ob-ink:         #E8ECF2;
  --ob-ink-soft:    #B6BFCE;
  --ob-ink-mute:    #6B7689;
  --ob-ink-dim:     #48505F;
  --ob-line:        rgba(255,255,255,0.055);
  --ob-line-strong: rgba(255,255,255,0.12);
  --ob-accent:      #5EE9F0;
  --ob-accent-soft: rgba(94,233,240,0.13);
  --ob-accent-glow: rgba(94,233,240,0.07);
  --ob-success:     #4ADE80;
  --ob-warn:        #FBBF24;
  --ob-danger:      #FB7185;
  --ob-purple:      #A78BFA;
  --ob-orange:      #FB923C;
}

*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0; padding: 0;
  background: var(--ob-bg);
  color: var(--ob-ink);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { text-decoration: none; color: inherit; }
button { font-family: inherit; }

/* ── Reading progress bar ─────────────────────────────── */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--ob-accent), var(--ob-purple) 60%, transparent);
  z-index: 300;
  pointer-events: none;
  transition: width 80ms linear;
  box-shadow: 0 0 12px rgba(94,233,240,0.5);
}

/* =========================================================
   NAV — mirrors landing.v20260509 ob-nav
   ========================================================= */
.ob-nav {
  position: sticky;
  top: 0; z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  height: 56px;
  background: rgba(7,9,12,0.92);
  border-bottom: 1px solid var(--ob-line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.ob-nav-brand {
  display: flex;
  align-items: center;
  gap: 9px;
}

.ob-nav-brand-icon {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid var(--ob-line-strong);
  background: var(--ob-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.ob-nav-brand-icon img { display: block; }

.ob-nav-brand-name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ob-ink);
  letter-spacing: 0;
}

.ob-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: 40px;
}

.ob-nav-links a {
  font-size: 13px;
  color: var(--ob-ink-soft);
  font-weight: 450;
  transition: color 150ms;
}
.ob-nav-links a:hover { color: var(--ob-ink); }
.ob-nav-links a.active {
  color: var(--ob-accent);
  font-weight: 500;
}

.ob-nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.ob-nav-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid rgba(74,222,128,0.2);
  background: rgba(74,222,128,0.07);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  color: var(--ob-success);
  letter-spacing: 0;
}

.ob-nav-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ob-success);
  box-shadow: 0 0 8px var(--ob-success);
}

.ob-nav-signin {
  font-size: 13px;
  color: var(--ob-ink-soft);
  transition: color 150ms;
}
.ob-nav-signin:hover { color: var(--ob-ink); }

.ob-nav-cta {
  padding: 8px 14px;
  border-radius: 6px;
  background: var(--ob-accent);
  color: #03252A;
  font-size: 12.5px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 150ms;
  display: inline-block;
}
.ob-nav-cta:hover { opacity: 0.88; }

/* =========================================================
   SHELL
   ========================================================= */
.learn-shell {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px 120px;
}

/* =========================================================
   HERO
   ========================================================= */
.learn-hero {
  position: relative;
  padding: 72px 0 52px;
  overflow: hidden;
  border-bottom: 1px solid var(--ob-line);
}

/* Grid decoration */
.learn-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--ob-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--ob-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 10% 0%, black 0%, transparent 70%);
  mask-image: radial-gradient(ellipse 80% 100% at 10% 0%, black 0%, transparent 70%);
  opacity: 0.45;
  pointer-events: none;
}

/* Glow */
.learn-hero::after {
  content: '';
  position: absolute;
  top: -150px; right: -200px;
  width: 700px; height: 500px;
  background: radial-gradient(circle, rgba(94,233,240,0.08) 0%, transparent 60%);
  pointer-events: none;
}

.learn-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 4px;
  background: var(--ob-accent-soft);
  color: var(--ob-accent);
  font-family: 'Geist Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  position: relative;
  margin-bottom: 20px;
}

.learn-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: 0;
  margin: 0 0 16px;
  color: var(--ob-ink);
  position: relative;
  max-width: 700px;
}

.learn-hero-sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ob-ink-soft);
  margin: 0 0 28px;
  max-width: 620px;
  position: relative;
}

/* Stat pills */
.learn-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  position: relative;
}

.learn-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border-radius: 6px;
  border: 1px solid var(--ob-line);
  background: var(--ob-panel);
  font-family: 'Geist Mono', monospace;
  font-size: 11.5px;
  color: var(--ob-ink-soft);
  font-weight: 500;
}
.learn-stat-pill svg { width: 13px; height: 13px; color: var(--ob-accent); }

/* =========================================================
   BODY — sidebar + content
   ========================================================= */
.learn-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 52px;
  padding-top: 52px;
  align-items: start;
}

/* =========================================================
   SIDEBAR
   ========================================================= */
.learn-sidebar {
  position: sticky;
  top: 72px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.learn-sidebar::-webkit-scrollbar { display: none; }

.nav-label {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--ob-ink-mute);
  margin-bottom: 14px;
  padding-left: 14px;
}

.nav-list {
  list-style: none;
  padding: 0; margin: 0;
  border-left: 1px solid var(--ob-line);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-list a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 12px;
  color: var(--ob-ink-mute);
  border-left: 2px solid transparent;
  margin-left: -1px;
  border-radius: 0 4px 4px 0;
  transition: color 150ms, border-color 150ms, background 150ms;
  line-height: 1.4;
}
.nav-list a:hover {
  color: var(--ob-ink-soft);
  border-left-color: rgba(94,233,240,0.35);
  background: var(--ob-accent-glow);
}
.nav-list a.active {
  color: var(--ob-accent);
  font-weight: 600;
  border-left-color: var(--ob-accent);
  background: var(--ob-accent-soft);
}

.nav-icon {
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ob-ink-dim);
  background: var(--ob-panel2);
  border: 1px solid var(--ob-line);
  border-radius: 4px;
  padding: 1px 5px;
  flex-shrink: 0;
}
.nav-list a.active .nav-icon {
  background: var(--ob-accent-soft);
  color: var(--ob-accent);
  border-color: rgba(94,233,240,0.22);
}

.nav-count {
  margin-left: auto;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ob-ink-dim);
  flex-shrink: 0;
}

/* =========================================================
   CONTENT
   ========================================================= */
.learn-content { min-width: 0; }

/* ── Category section ─────────────────────────────────── */
.category-section {
  margin-bottom: 60px;
  scroll-margin-top: 80px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.category-section:not(.in-view) {
  opacity: 1;
  transform: none;
}

.category-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 28px;
  background: var(--ob-panel);
  border: 1px solid var(--ob-line);
  border-radius: 10px;
  margin-bottom: 12px;
}

.cat-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--ob-accent-soft);
  border: 1px solid rgba(94,233,240,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ob-accent);
  flex-shrink: 0;
}
.cat-icon svg { width: 18px; height: 18px; }

.cat-title-block { flex: 1; }

.cat-title-block h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--ob-ink);
  margin: 0 0 7px;
  letter-spacing: 0;
}

.cat-title-block p {
  font-size: 13.5px;
  color: var(--ob-ink-soft);
  margin: 0;
  line-height: 1.55;
}

.cat-score-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 4px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  background: var(--ob-panel2);
  color: var(--ob-ink-mute);
  border: 1px solid var(--ob-line);
  letter-spacing: 0;
  white-space: nowrap;
  align-self: flex-start;
}

/* ── Scanner card ─────────────────────────────────────── */
.scanner-card {
  background: var(--ob-panel);
  border: 1px solid var(--ob-line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.sc-head {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--ob-line);
  background: var(--ob-panel2);
}

.sc-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.issue-code {
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--ob-accent);
  background: var(--ob-accent-soft);
  border: 1px solid rgba(94,233,240,0.2);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0;
}

.sev-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}
.sev-critical { background: rgba(251,113,133,0.15); color: var(--ob-danger); border: 1px solid rgba(251,113,133,0.25); }
.sev-high     { background: rgba(251,146,60,0.12);  color: var(--ob-orange); border: 1px solid rgba(251,146,60,0.22); }
.sev-medium   { background: rgba(251,191,36,0.12);  color: var(--ob-warn);   border: 1px solid rgba(251,191,36,0.22); }
.sev-low      { background: rgba(74,222,128,0.1);   color: var(--ob-success); border: 1px solid rgba(74,222,128,0.2); }
.sev-info     { background: rgba(107,118,137,0.12); color: var(--ob-ink-mute); border: 1px solid var(--ob-line); }

.sc-phase {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  color: var(--ob-ink-mute);
  border: 1px solid var(--ob-line);
  border-radius: 4px;
  padding: 2px 7px;
  letter-spacing: 0;
}

.sc-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ob-ink);
  margin: 0;
  letter-spacing: 0;
}

/* Card body */
.sc-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sc-section h4 {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ob-ink-mute);
  margin: 0 0 10px;
}

.sc-section p {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ob-ink-soft);
  margin: 0 0 10px;
}
.sc-section p:last-child { margin-bottom: 0; }

.sc-section strong { color: var(--ob-ink); font-weight: 600; }

.sc-section code {
  font-family: 'Geist Mono', monospace;
  font-size: 0.84em;
  background: rgba(94,233,240,0.07);
  color: var(--ob-accent);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(94,233,240,0.14);
}

.signal-field-guide {
  border: 1px solid var(--ob-line);
  border-radius: 8px;
  display: grid;
  overflow: hidden;
}

.signal-field-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.85fr) minmax(180px, 1.1fr) minmax(190px, 1.15fr) minmax(190px, 1.15fr);
  min-width: 0;
}

.signal-field-row + .signal-field-row {
  border-top: 1px solid var(--ob-line);
}

.signal-field-row > span {
  color: var(--ob-ink-soft);
  font-size: 12.5px;
  line-height: 1.65;
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 12px 14px;
}

.signal-field-row > span + span {
  border-left: 1px solid var(--ob-line);
}

.signal-field-row--head {
  background: var(--ob-panel2);
}

.signal-field-row--head > span {
  color: var(--ob-ink-mute);
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.signal-field-row code {
  font-family: 'Geist Mono', monospace;
  font-size: 0.84em;
  background: rgba(94,233,240,0.07);
  border: 1px solid rgba(94,233,240,0.14);
  border-radius: 4px;
  color: var(--ob-accent);
  padding: 2px 6px;
}

.signal-detail-tools {
  align-items: end;
  background:
    linear-gradient(135deg, rgba(94,233,240,0.09), transparent 34%),
    rgba(8, 12, 18, 0.82);
  border: 1px solid rgba(94,233,240,0.13);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(280px, 1fr) minmax(170px, 0.36fr) minmax(190px, 0.42fr);
  margin-bottom: 14px;
  padding: 14px;
}

.signal-detail-search-field,
.signal-filter-field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.signal-detail-tools label {
  color: var(--ob-ink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.signal-detail-search-field label::after {
  color: var(--ob-ink-mute);
  content: "304 references";
  display: block;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  margin-top: 5px;
  text-transform: uppercase;
}

.signal-detail-tools input,
.signal-detail-tools select {
  background: #0D1220;
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 7px;
  color: var(--ob-ink);
  font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  min-height: 42px;
  min-width: 0;
  outline: 0;
  padding: 10px 12px;
  width: 100%;
}

.signal-detail-tools input::placeholder {
  color: #667085;
  opacity: 1;
}

.signal-detail-tools input:focus,
.signal-detail-tools select:focus {
  border-color: rgba(94,233,240,0.68);
  box-shadow: 0 0 0 3px rgba(94,233,240,0.12);
}

.signal-detail-notice {
  align-items: center;
  background: rgba(94,233,240,0.08);
  border: 1px solid rgba(94,233,240,0.22);
  border-radius: 8px;
  color: #CFFAFE;
  display: flex;
  font-size: 13px;
  gap: 9px;
  margin-bottom: 14px;
  padding: 10px 12px;
}

.signal-detail-notice[hidden] {
  display: none;
}

.signal-detail-notice::before {
  background: var(--ob-accent);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(94,233,240,0.5);
  content: "";
  flex: 0 0 auto;
  height: 7px;
  width: 7px;
}

.signal-detail-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.signal-detail-grid--selected {
  grid-template-columns: 1fr;
}

.signal-detail-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 42%),
    #0E131C;
  border: 1px solid rgba(148,163,184,0.12);
  border-radius: 8px;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.signal-detail-card::before {
  background: linear-gradient(180deg, rgba(94,233,240,0.78), rgba(167,139,250,0.42));
  content: "";
  inset: 0 auto 0 0;
  opacity: 0.38;
  position: absolute;
  width: 3px;
}

.signal-detail-card--selected {
  background:
    linear-gradient(135deg, rgba(94,233,240,0.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.045), transparent 44%),
    #0D141D;
  border-color: rgba(94,233,240,0.38);
  box-shadow: 0 20px 48px rgba(0,0,0,0.22), 0 0 0 1px rgba(94,233,240,0.08);
}

.signal-detail-card--selected::before {
  opacity: 1;
  width: 4px;
}

.signal-detail-card-head {
  align-items: flex-start;
  border-bottom: 1px solid rgba(148,163,184,0.1);
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 16px 18px 14px 20px;
}

.signal-detail-category {
  color: var(--ob-accent);
  display: block;
  font: 700 10px/1.2 'Geist Mono', monospace;
  letter-spacing: 0;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.signal-detail-card-head h3 {
  color: var(--ob-ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.24;
  margin: 0;
}

.signal-detail-badges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.signal-type-badge,
.signal-source-badge,
.signal-review-badge {
  border: 1px solid rgba(148,163,184,0.16);
  border-radius: 999px;
  color: var(--ob-ink-soft);
  display: inline-flex;
  font: 700 10px/1.2 'Geist Mono', monospace;
  letter-spacing: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  padding: 5px 8px;
  text-transform: uppercase;
}

.signal-source-badge {
  background: rgba(148,163,184,0.07);
}

.signal-review-badge {
  background: rgba(251,191,36,0.09);
  border-color: rgba(251,191,36,0.26);
  color: #FDE68A;
}

.signal-type-badge--confirmed_observation { background: rgba(34,197,94,0.09); border-color: rgba(34,197,94,0.24); color: #BBF7D0; }
.signal-type-badge--candidate_signal { background: rgba(251,191,36,0.09); border-color: rgba(251,191,36,0.26); color: #FDE68A; }
.signal-type-badge--informational_metadata,
.signal-type-badge--derived_summary { background: rgba(148,163,184,0.08); color: #CBD5E1; }
.signal-type-badge--coverage_limitation,
.signal-type-badge--unavailable_or_unknown { background: rgba(148,163,184,0.06); border-color: rgba(148,163,184,0.2); color: #94A3B8; }
.signal-type-badge--historical_or_passive_evidence,
.signal-type-badge--third_party_intelligence { background: rgba(59,130,246,0.09); border-color: rgba(59,130,246,0.24); color: #BFDBFE; }

.signal-detail-index {
  align-items: center;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(148,163,184,0.13);
  border-radius: 6px;
  color: var(--ob-ink-mute);
  display: inline-flex;
  flex: 0 0 auto;
  font: 700 10px/1 'Geist Mono', monospace;
  height: 26px;
  justify-content: center;
  letter-spacing: 0;
  min-width: 32px;
}

.signal-detail-copy {
  display: grid;
  gap: 0;
  margin: 0;
}

.signal-detail-block {
  border-bottom: 1px solid rgba(148,163,184,0.08);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(118px, 0.28fr) minmax(0, 1fr);
  margin: 0;
  padding: 13px 18px 13px 20px;
}

.signal-detail-block:last-child {
  border-bottom: 0;
}

.signal-detail-copy dt {
  color: #8EA0B8;
  font: 700 10px/1.35 'Geist Mono', monospace;
  letter-spacing: 0;
  margin: 2px 0 0;
  text-transform: uppercase;
}

.signal-detail-copy dd {
  color: var(--ob-ink-soft);
  font-size: 13.5px;
  line-height: 1.56;
  margin: 0;
}

.signal-detail-block--impact dd {
  color: #FDE68A;
}

.signal-detail-advanced {
  border-top: 1px solid rgba(148,163,184,0.1);
}

.signal-detail-advanced summary {
  color: var(--ob-ink);
  cursor: pointer;
  font: 700 11px/1.3 'Geist Mono', monospace;
  letter-spacing: 0;
  list-style-position: inside;
  padding: 13px 18px 13px 20px;
  text-transform: uppercase;
}

.signal-detail-advanced .signal-detail-block:last-child {
  border-bottom: 0;
}

.sc-section ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sc-section ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--ob-ink-soft);
  line-height: 1.7;
  padding: 7px 12px;
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--ob-line);
  border-radius: 6px;
}
.sc-section ul li::before {
  content: "→";
  color: var(--ob-accent);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Result examples */
.sc-results {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

.sr-pass,
.sr-finding {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--ob-line);
}

.sr-pass { border-color: rgba(74,222,128,0.2); }
.sr-finding { border-color: rgba(251,113,133,0.2); }

.sr-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ob-line);
}
.sr-label svg { width: 11px; height: 11px; }

.sr-pass .sr-label {
  background: rgba(74,222,128,0.07);
  color: var(--ob-success);
  border-bottom-color: rgba(74,222,128,0.15);
}
.sr-finding .sr-label {
  background: rgba(251,113,133,0.07);
  color: var(--ob-danger);
  border-bottom-color: rgba(251,113,133,0.15);
}

.sr-output {
  margin: 0;
  padding: 12px;
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  line-height: 1.65;
  color: var(--ob-ink-soft);
  background: rgba(255,255,255,0.015);
  white-space: pre;
  overflow-x: auto;
}

/* DAST badge */
.dast-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  background: rgba(167,139,250,0.12);
  color: var(--ob-purple);
  border: 1px solid rgba(167,139,250,0.22);
}

/* Block remediation examples */
.sc-code {
  margin: 2px 0 12px;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid rgba(94,233,240,0.16);
  background: rgba(255,255,255,0.018);
  color: var(--ob-accent);
  font-family: 'Geist Mono', monospace;
  font-size: 11px;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
}

.sc-code code {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}

/* Card footer framework tags */
.sc-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 13px 22px 14px;
  border-top: 1px solid var(--ob-line);
  background: rgba(255,255,255,0.012);
}

.sc-foot-label {
  margin-right: 4px;
  color: var(--ob-ink-dim);
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.fw-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid var(--ob-line);
  border-radius: 4px;
  background: var(--ob-panel2);
  color: var(--ob-ink-soft);
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
}

.fw-owasp { color: var(--ob-orange); background: rgba(251,146,60,0.08); border-color: rgba(251,146,60,0.25); }
.fw-asvs  { color: #60a5fa; background: rgba(96,165,250,0.08); border-color: rgba(96,165,250,0.24); }
.fw-cis   { color: var(--ob-success); background: rgba(74,222,128,0.08); border-color: rgba(74,222,128,0.22); }
.fw-nist  { color: var(--ob-purple); background: rgba(167,139,250,0.08); border-color: rgba(167,139,250,0.24); }
.fw-mitre { color: #f472b6; background: rgba(244,114,182,0.08); border-color: rgba(244,114,182,0.22); }
.fw-cwe   { color: #fb7185; background: rgba(251,113,133,0.08); border-color: rgba(251,113,133,0.22); }
.fw-rfc   { color: #94a3b8; background: rgba(148,163,184,0.08); border-color: rgba(148,163,184,0.2); }
.fw-cvss  { color: var(--ob-warn); background: rgba(251,191,36,0.08); border-color: rgba(251,191,36,0.24); }

/* ── Framework refs table ─────────────────────────────── */
.sc-framework {
  border: 1px solid var(--ob-line);
  border-radius: 8px;
  overflow: hidden;
  margin-top: 4px;
}

.sc-fw-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--ob-line);
  font-size: 12.5px;
}
.sc-fw-row:last-child { border-bottom: none; }

.sc-fw-label {
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--ob-ink-dim);
  width: 80px;
  flex-shrink: 0;
}

.sc-fw-val { color: var(--ob-ink-soft); }

/* =========================================================
   BACK TO TOP
   ========================================================= */
#back-to-top {
  position: fixed;
  bottom: 32px; right: 32px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(94,233,240,0.08);
  border: 1px solid rgba(94,233,240,0.2);
  color: var(--ob-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 250ms, transform 250ms, background 150ms, box-shadow 150ms;
  z-index: 50;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#back-to-top svg { pointer-events: none; }
#back-to-top.visible { opacity: 1; transform: translateY(0); }
#back-to-top:hover {
  background: rgba(94,233,240,0.16);
  border-color: var(--ob-accent);
  box-shadow: 0 0 20px rgba(94,233,240,0.2);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1000px) {
  .learn-body { grid-template-columns: 1fr; gap: 0; }
  .learn-sidebar { display: none; }
  .learn-shell { padding: 0 24px 100px; }
  .signal-field-row { grid-template-columns: 1fr 1fr; }
  .signal-field-row > span:nth-child(3) { border-left: 0; border-top: 1px solid var(--ob-line); }
  .signal-field-row > span:nth-child(4) { border-top: 1px solid var(--ob-line); }
  .signal-detail-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .ob-nav { padding: 0 20px; }
  .ob-nav-links { display: none; }
  .ob-nav-status { display: none; }
  .ob-nav > div:first-child { min-width: 0; }
  .ob-nav-brand { min-width: 0; }
  .ob-nav-brand-name { white-space: nowrap; }
  .ob-nav-right { gap: 10px; flex-shrink: 0; }
  .ob-nav-signin { display: none; }
  .ob-nav-cta { padding: 8px 12px; font-size: 12px; white-space: nowrap; }
  .learn-shell { padding: 0 18px 80px; }
  .learn-hero { padding: 56px 0 36px; }
  .learn-stats { align-items: stretch; flex-direction: column; }
  .learn-stat-pill { width: 100%; }
  .category-header {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 20px;
  }
  .cat-score-tag {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .scanner-card,
  .sc-head,
  .sc-body,
  .sc-foot,
  .sc-section,
  .signal-detail-card,
  .signal-detail-block {
    min-width: 0;
  }
  .sc-section code,
  .signal-detail-card code,
  .issue-code {
    overflow-wrap: anywhere;
    white-space: normal;
    word-break: break-word;
  }
  .sc-section ul li {
    display: block;
  }
  .sc-section ul li::before {
    display: inline-block;
    margin-right: 10px;
  }
  .sc-results { grid-template-columns: 1fr; }
  .signal-field-row { grid-template-columns: 1fr; }
  .signal-field-row > span + span { border-left: 0; border-top: 1px solid var(--ob-line); }
  .signal-detail-tools { grid-template-columns: 1fr; }
  .signal-detail-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .signal-detail-index {
    justify-self: start;
  }
  .signal-detail-block {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}