/* Client dashboard styling for /reports/*. Mirrors the app's ReportView
   (metal-panel, orb, severity strip, findings list). Loaded after each
   page's inline styles so the dashboard look wins. */

:root {
  --bg: #000;
  --fg: hsl(0 0% 96%);
  --muted: hsl(0 0% 72%);
  --faint: hsl(225 12% 60%);
  --violet-1: hsl(320 85% 62%);
  --violet-3: hsl(320 95% 78%);
  --panel-bg-a: hsl(230 22% 16%);
  --panel-bg-b: hsl(230 30% 11%);
  --panel-bg-c: hsl(230 18% 15%);
  --panel-border: hsl(230 20% 24%);
  --panel-border-soft: hsla(230 26% 20% / 0.6);
  --code-bg: hsla(275 45% 5% / 0.85);
  --sev-crit: hsl(335 60% 58%);
  --sev-high: hsl(20 55% 60%);
  --sev-med: hsl(42 50% 62%);
  --sev-low: hsl(150 30% 60%);
  --sev-info: hsl(225 20% 68%);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #000 !important;
  color: var(--fg) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "calt" 0, "dlig" 0, "hlig" 0;
}
*, *::before, *::after {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "calt" 0, "dlig" 0, "hlig" 0;
}
a { color: var(--violet-3) !important; text-decoration: none !important; }
a:hover { text-decoration: underline !important; }

.wrap {
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 24px 16px 96px !important;
}

/* ===== Top nav (breadcrumb) ===== */
nav.top {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important;
  font-size: 14px !important; margin: 0 4px 24px !important;
  color: var(--muted) !important;
}
nav.top .brand,
nav.top a.brand {
  font-family: 'Instrument Serif', serif !important;
  font-size: 22px !important; color: var(--fg) !important;
  text-decoration: none !important;
}
nav.top .crumbs { color: var(--faint) !important; }
nav.top .crumbs a { color: var(--faint) !important; }

/* ===== Browser-chrome frame wrapping the whole dashboard body ===== */
.dash-frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(150deg, var(--panel-bg-a) 0%, var(--panel-bg-b) 45%, var(--panel-bg-c) 100%);
  border: 1px solid var(--panel-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 30px 60px -30px rgba(0, 0, 0, 0.8);
  isolation: isolate;
}
.chrome-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}
.chrome-dots { display: inline-flex; gap: 6px; align-items: center; }
.chrome-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.chrome-dot.r { background: hsla(0 65% 55% / 0.85); }
.chrome-dot.y { background: hsla(45 85% 55% / 0.85); }
.chrome-dot.g { background: hsla(140 55% 50% / 0.85); }
.chrome-url {
  margin-left: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chrome-side {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--faint);
  white-space: nowrap;
}
@media (max-width: 640px) { .chrome-side { display: none; } }

.dash-body {
  padding: 20px !important;
  display: flex; flex-direction: column; gap: 20px;
}
@media (min-width: 720px) {
  .dash-body { padding: 28px !important; gap: 24px; }
}

/* ===== Metal panel (main building block) ===== */
.metal-panel {
  position: relative;
  background: linear-gradient(150deg, var(--panel-bg-a) 0%, var(--panel-bg-b) 45%, var(--panel-bg-c) 100%) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 20px 40px -24px rgba(0, 0, 0, 0.7) !important;
  overflow: hidden;
  isolation: isolate;
  padding: 20px 24px !important;
}
.metal-panel > * { position: relative; z-index: 1; }
.metal-panel::before {
  content: '';
  position: absolute; inset: -1px;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.05) 45%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 55%, transparent 80%);
  transform: translateX(120%);
  animation: dash-sweep 60s linear infinite;
  pointer-events: none; z-index: 0;
}
.metal-panel:hover::before { animation: dash-sweep-hover 1.8s ease-out; }
.metal-panel::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.06; mix-blend-mode: overlay;
  pointer-events: none; z-index: 0;
}

@keyframes dash-sweep {
  0% { transform: translateX(-100%); }
  4% { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}
@keyframes dash-sweep-hover {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(120%); }
}

/* ===== Typography helpers ===== */
.text-faint { color: var(--faint) !important; }
.metal-emboss { text-shadow: 0 1px 0 rgba(255,255,255,0.15), 0 -1px 1px rgba(0,0,0,0.6); }
.num-tabular { font-variant-numeric: tabular-nums; }
.panel-label {
  color: var(--faint);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
  margin-bottom: 12px;
}

/* ===== Report header inside the frame ===== */
.report-header {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 16px;
}
.report-header .kicker {
  color: var(--faint); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.report-header h1 {
  font-family: 'Instrument Serif', serif !important;
  color: #fff !important;
  font-size: clamp(28px, 5vw, 40px) !important;
  line-height: 1.05 !important;
  margin: 8px 0 0 !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.15), 0 -1px 1px rgba(0,0,0,0.6);
  background: none !important; -webkit-text-fill-color: currentColor !important;
  filter: none !important;
}
.report-header .project { color: rgba(255,255,255,0.7); margin: 6px 0 0; font-size: 14px; }
.report-header .stamp { text-align: right; }
.report-header .stamp .window,
.report-header .stamp .delivered {
  font-family: 'JetBrains Mono', monospace;
  color: var(--faint); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
  display: block;
}
.report-header .stamp .delivered { margin-top: 4px; }

/* ===== Grids ===== */
.grid-orb {
  display: grid; gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .grid-orb { grid-template-columns: auto 1fr; } }
.grid-summary {
  display: grid; gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .grid-summary { grid-template-columns: 1.6fr 1fr; } }

/* ===== Severity distribution ===== */
.sev-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; text-align: center; }
.sev-cell .label {
  color: var(--faint); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
}
.sev-cell .num {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 24px; margin-top: 4px; font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,0.15), 0 -1px 1px rgba(0,0,0,0.6);
}
.sev-bar {
  margin-top: 20px; height: 8px; width: 100%;
  overflow: hidden; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
  display: flex;
}
.sev-bar span { display: block; height: 100%; }

.crit { color: var(--sev-crit); } .crit-bg { background: var(--sev-crit); }
.high { color: var(--sev-high); } .high-bg { background: var(--sev-high); }
.med  { color: var(--sev-med);  } .med-bg  { background: var(--sev-med); }
.low  { color: var(--sev-low);  } .low-bg  { background: var(--sev-low); }
.info { color: var(--sev-info); } .info-bg { background: var(--sev-info); }

/* ===== Risk orb ===== */
.risk-orb {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 180px; height: 180px; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.05) 20%, transparent 45%),
    conic-gradient(from 220deg,
      var(--risk-color, hsl(150 30% 60%)) 0%,
      var(--risk-color, hsl(150 30% 60%)) var(--risk-fill, 60%),
      hsl(230 25% 18%) var(--risk-fill, 60%),
      hsl(230 25% 18%) 100%);
  box-shadow:
    inset 0 0 30px rgba(0,0,0,0.6),
    0 20px 50px -20px var(--risk-color, hsla(150 30% 60% / 0.6)),
    0 0 0 1px rgba(255,255,255,0.08);
}
.risk-orb::before {
  content: ''; position: absolute; inset: 12px; border-radius: 50%;
  background: radial-gradient(circle at 50% 55%, hsl(230 25% 12%) 0%, hsl(230 30% 8%) 60%, hsl(230 40% 4%) 100%);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.7);
}
.risk-orb .content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
}
.risk-orb .cap { color: var(--faint); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; }
.risk-orb .n {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums; font-weight: 700;
  font-size: 40px; line-height: 1; margin-top: 4px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.15), 0 -1px 1px rgba(0,0,0,0.6);
}
.risk-orb .d {
  color: var(--faint);
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 10px; margin-top: 2px;
}
.orb-cell { display: flex; align-items: center; justify-content: center; }

/* ===== Engagement meta (dl.facts inside metal-panel) ===== */
dl.facts {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 13px !important;
}
dl.facts dt {
  color: var(--faint) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  margin: 0 0 2px !important;
  font-weight: 500 !important;
}
dl.facts dd {
  margin: 0 !important;
  color: rgba(255,255,255,0.92) !important;
  font-weight: 400 !important;
  font-size: 13.5px !important;
}
dl.facts code {
  background: rgba(255,255,255,0.06);
  color: hsl(200 90% 82%);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
}

/* ===== Executive summary paragraph inside metal-panel ===== */
.exec p, .metal-panel p.lede {
  margin: 0 0 12px !important;
  font-size: 14px !important;
  color: rgba(255,255,255,0.9) !important;
  line-height: 1.75 !important;
}
.exec p:last-child { margin-bottom: 0 !important; }

/* ===== Findings list (dashboard style) ===== */
.findings-header {
  display: flex; align-items: baseline;
  justify-content: space-between; margin-bottom: 12px;
}
.findings-header h2 {
  font-family: 'Instrument Serif', serif !important;
  color: #fff !important; font-size: 24px !important;
  margin: 0 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.15), 0 -1px 1px rgba(0,0,0,0.6);
}
.findings-header .count {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  color: var(--faint); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
}
.findings-panel { padding: 0 !important; }
.findings-panel .finding { border-bottom: 1px solid var(--panel-border-soft); }
.findings-panel .finding:last-child { border-bottom: none; }
.finding .row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 16px; align-items: center;
  padding: 12px 20px; text-decoration: none !important;
}
.finding .row:hover { background: rgba(255,255,255,0.03); }
.finding .lead { display: flex; align-items: center; gap: 12px; }
.finding .idx {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  color: var(--faint); font-size: 11px; width: 32px;
}
.finding .dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
}
.finding .sev {
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; width: 72px;
}
.finding .body-row { min-width: 0; }
.finding .title {
  color: #fff !important; font-size: 14px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.finding .body-row .meta {
  color: var(--faint); font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.finding .tail {
  display: flex; align-items: center; gap: 16px;
}
.finding .cvss {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  color: var(--faint); font-size: 11px;
}
.finding .status {
  color: var(--faint); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.12em;
}
.finding .toggle { color: var(--faint); font-size: 14px; }

.finding .expand {
  padding: 4px 20px 24px;
  display: grid; gap: 20px; grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .finding .expand { grid-template-columns: 1fr 1fr; }
}
.field-label {
  color: var(--faint); font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.14em;
  margin-bottom: 8px;
}
.field-body {
  color: rgba(255,255,255,0.9);
  font-size: 13px; line-height: 1.75;
}
.field-body p { margin: 0 0 10px; }
.field-body p:last-child { margin: 0; }
.field-full { grid-column: 1 / -1; }

/* ===== Code + evidence ===== */
pre {
  background: var(--code-bg) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  overflow-x: auto !important;
  margin: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12.5px !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,0.92) !important;
}
pre code {
  background: none !important; padding: 0 !important;
  color: inherit !important; font-size: inherit !important;
  border-radius: 0 !important;
}
code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88em;
  background: rgba(255,255,255,0.06) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  color: hsl(200 90% 82%) !important;
}

/* ===== Tables ===== */
table { width: 100%; border-collapse: collapse; margin: 4px 0 8px; font-size: 13px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--panel-border-soft); }
th {
  color: var(--faint) !important;
  font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
}
td { color: rgba(255,255,255,0.88); }

/* ===== References ===== */
ul.refs { list-style: none; padding: 0; margin: 0; }
ul.refs li { padding: 4px 0; font-size: 13px; color: rgba(255,255,255,0.85); }

/* ===== Retest strip ===== */
.retest-strip {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-radius: 14px;
  background: rgba(255,255,255,0.02);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  font-size: 13px; color: var(--muted);
}
.retest-strip .dot-ok {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: hsl(140 75% 60%); margin-right: 8px; vertical-align: middle;
}
.retest-strip .primary { color: #fff; }
.retest-strip a { color: var(--violet-3) !important; font-weight: 600; }

/* ===== Legacy callouts (kept from prior markup, restyled) ===== */
.callout, .cta, .poc, .notice {
  position: relative;
  background: linear-gradient(150deg, var(--panel-bg-a) 0%, var(--panel-bg-b) 45%, var(--panel-bg-c) 100%) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: 14px !important;
  padding: 16px 20px !important;
  margin: 18px 0 !important;
  color: rgba(255,255,255,0.88) !important;
  font-size: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 20px 40px -24px rgba(0,0,0,0.7) !important;
  overflow: hidden;
  isolation: isolate;
}
.callout strong, .notice strong, .cta strong { color: #fff !important; }
.poc {
  padding: 0 !important;
  border-left: 3px solid var(--violet-1) !important;
}
.poc .label {
  display: block !important;
  padding: 12px 16px 6px !important;
  color: var(--faint) !important;
  font-size: 10px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-weight: 700 !important;
}
.poc pre {
  border-radius: 0 !important;
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  background: rgba(0,0,0,0.55) !important;
  margin: 0 !important;
}
.poc p {
  margin: 10px 16px 12px !important;
  font-size: 13px !important;
  color: var(--muted) !important;
}
.cta h3 {
  margin: 0 0 6px !important;
  font-family: 'Instrument Serif', serif !important;
  font-size: 22px !important; color: #fff !important;
}
.cta p { margin: 0 0 10px !important; color: var(--muted) !important; font-size: 14px !important; }

/* ===== Article prose (inside .metal-panel typically) ===== */
article header { margin-bottom: 0 !important; }
article .tag-row { display: none !important; }
article > header p.byline { display: none !important; }

article h2 {
  font-family: 'Instrument Serif', serif !important;
  color: #fff !important;
  font-size: 24px !important;
  margin: 28px 0 12px !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.15), 0 -1px 1px rgba(0,0,0,0.6);
  letter-spacing: -0.01em !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  filter: none !important;
}
article h3 { font-size: 15px !important; margin: 22px 0 8px !important; color: #fff !important; }
article p { margin: 0 0 14px !important; color: rgba(255,255,255,0.88) !important; line-height: 1.75 !important; font-size: 14.5px !important; }
article ul {
  margin: 8px 0 16px 0 !important;
  padding-left: 20px !important;
  color: rgba(255,255,255,0.88) !important;
  font-size: 14px !important; line-height: 1.75 !important;
}
article li { margin: 4px 0 !important; }

/* ===== Reports index (list of engagements) ===== */
ul.posts {
  list-style: none !important;
  padding: 0 !important; margin: 0 !important;
  display: grid !important; gap: 14px !important;
}
ul.posts li {
  position: relative;
  background: linear-gradient(150deg, var(--panel-bg-a) 0%, var(--panel-bg-b) 45%, var(--panel-bg-c) 100%) !important;
  border: 1px solid var(--panel-border) !important;
  border-radius: 14px !important;
  padding: 20px 22px !important;
  transition: transform 0.2s ease;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.5),
    0 20px 40px -24px rgba(0,0,0,0.7);
}
ul.posts li:hover { transform: translateY(-2px); }
ul.posts a.title {
  display: block !important;
  font-family: 'Instrument Serif', serif !important;
  font-size: 22px !important;
  color: #fff !important;
  margin-bottom: 8px !important;
  text-decoration: none !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.15), 0 -1px 1px rgba(0,0,0,0.6);
}
ul.posts .meta {
  display: flex !important; flex-wrap: wrap !important; gap: 10px !important;
  font-size: 12px !important; color: var(--faint) !important;
  margin-bottom: 12px !important;
  align-items: center !important;
  font-family: 'JetBrains Mono', monospace !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}
ul.posts .meta time { color: var(--faint) !important; }
ul.posts .tag {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.85) !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  font-size: 10px !important; font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
ul.posts p {
  margin: 0 !important;
  color: rgba(255,255,255,0.75) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

/* Sev tag colours (badge inside list rows) */
.tag.sev-crit { color: var(--sev-crit) !important; border-color: hsla(335 60% 58% / 0.35) !important; background: hsla(335 60% 30% / 0.15) !important; }
.tag.sev-high { color: var(--sev-high) !important; border-color: hsla(20 55% 60% / 0.35) !important; background: hsla(20 55% 30% / 0.15) !important; }
.tag.sev-med  { color: var(--sev-med)  !important; border-color: hsla(42 50% 62% / 0.35) !important; background: hsla(42 50% 30% / 0.15) !important; }
.tag.sev-low  { color: var(--sev-low)  !important; border-color: hsla(150 30% 60% / 0.35) !important; background: hsla(150 30% 30% / 0.15) !important; }

/* ===== Notice styling override (index) ===== */
.notice { margin: 0 0 20px !important; }

/* ===== Footer ===== */
footer.page {
  margin-top: 32px !important;
  padding: 16px 4px 0 !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  color: var(--faint) !important; font-size: 13px !important;
  display: flex !important; justify-content: space-between !important;
  flex-wrap: wrap !important; gap: 12px !important;
}