/* Semantic Integrity Lab -- static stylesheet. No external fonts/CDNs
   (self-hosted only, matches CSP default-src 'self'). System font stack
   for speed and native feel on every platform. */

/* Utility classes -- used instead of inline style="" attributes
   everywhere in this app's templates. Deliberate: this CSP's
   `style-src 'self'` (no 'unsafe-inline') means an inline style
   attribute is silently dropped by the browser rather than applied --
   using classes here is a correctness requirement, not just tidiness
   (an earlier draft used inline styles for the hero logo's sizing,
   which the browser then ignored, rendering the image at its full
   natural size -- exactly the "logo takes over the page" bug this was
   built to fix). */
.mt-0 { margin-top: 0; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-0 { margin-bottom: 0; }
.mb-10 { margin-bottom: 10px; }
.m-0 { margin: 0; }
.w-auto { width: auto; }
.narrow-420 { max-width: 420px; }
.narrow-460 { max-width: 460px; }
.text-xs { font-size: 0.78rem; }
.small-btn { margin-top: 0; padding: 5px 10px; font-size: 0.8rem; }
.logout-btn { margin-top: 0; padding: 6px 14px; font-size: 0.85rem; }
.panel-warn { border-color: var(--warn); }
.panel-accent { border-color: var(--accent-dim); }
.hero-logo { width: 150px; max-width: 40%; height: auto; filter: drop-shadow(0 0 18px rgba(79, 163, 255, 0.3)); }
.text-center-tight { text-align: center; margin: 4px 0 22px; }
.inline-form { display: inline; }
.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row-mt8 { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.checkbox-row-mt12 { display: flex; align-items: center; gap: 8px; margin-top: 12px; }

:root {
  --bg: #0b0f14;
  --bg-panel: #121821;
  --bg-panel-2: #171f2b;
  --border: #263244;
  --text: #e7edf5;
  --text-dim: #9fb0c3;
  --text-faint: #6b7a8d;
  --accent: #4fa3ff;
  --accent-dim: #2a5c8f;
  --ok: #3ecf8e;
  --warn: #e8b339;
  --bad: #e8556b;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 8px;
  --max-width: 980px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
}

/* Futuristic space backdrop -- pure CSS, no images, no JavaScript
   (matches CSP script-src 'none'). Three layers:
     1. `html`'s own background -- static "planet" glows, calm, never moves.
     2. `.spacefx-stars` -- a fixed, viewport-covering starfield that
        slowly drifts (GPU-cheap background-position animation, not a
        layout-affecting one).
     3. `.spacefx-ship` x2 -- small CSS-drawn craft that cross the sky
        occasionally on a long, slow, looping path.
   All decorative: aria-hidden, pointer-events:none, and fully disabled
   under prefers-reduced-motion so this never fights an evaluator's own
   accessibility settings. Real content sits in its own stacking context
   above this layer (see header/main/footer `position:relative`). */
html {
  background-color: var(--bg);
  background-image:
    radial-gradient(1200px 800px at 88% -10%, rgba(79, 163, 255, 0.22), transparent 60%),
    radial-gradient(900px 700px at 50% 8%, rgba(120, 190, 255, 0.10), transparent 55%),
    radial-gradient(800px 600px at -10% 105%, rgba(60, 110, 190, 0.14), transparent 60%);
  background-repeat: no-repeat, no-repeat, no-repeat;
}

body { background: transparent; min-height: 100vh; position: relative; }

.spacefx-stars {
  position: fixed;
  inset: -20% -20%;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, rgba(220, 235, 255, 0.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 90px 120px, rgba(220, 235, 255, 0.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 150px 60px, rgba(220, 235, 255, 0.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 200px 170px, rgba(220, 235, 255, 0.38) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 260px 40px, rgba(220, 235, 255, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 320px 140px, rgba(220, 235, 255, 0.32) 50%, transparent 51%);
  background-repeat: repeat;
  background-size: 340px 200px;
}

@media (prefers-reduced-motion: no-preference) {
  .spacefx-stars { animation: sil-drift-stars 160s linear infinite; }
  .spacefx-ship { animation-play-state: running; }
}
@media (prefers-reduced-motion: reduce) {
  .spacefx-stars, .spacefx-ship { animation: none !important; }
}

@keyframes sil-drift-stars {
  from { background-position: 0 0; }
  to   { background-position: -1360px 800px; }
}

.spacefx-ship {
  position: fixed;
  top: 0; left: 0;
  z-index: 0;
  pointer-events: none;
  width: 10px;
  height: 4px;
  opacity: 0;
  animation: sil-fly-across 34s ease-in-out infinite;
}

.spacefx-ship::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, #cfe4ff 70%, #ffffff);
  clip-path: polygon(0% 50%, 78% 15%, 100% 50%, 78% 85%);
  box-shadow: 0 0 8px 1px rgba(150, 200, 255, 0.8);
}

.spacefx-ship::after {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 90px;
  height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(150, 200, 255, 0.55));
}

.spacefx-ship-2 {
  width: 7px;
  height: 3px;
  animation-name: sil-fly-across-2;
  animation-duration: 47s;
  animation-delay: 11s;
}

@keyframes sil-fly-across {
  0%   { transform: translate(-8vw, 22vh) rotate(6deg) scale(1); opacity: 0; }
  4%   { opacity: 0.85; }
  46%  { opacity: 0.85; }
  50%  { transform: translate(108vw, 8vh) rotate(6deg) scale(1); opacity: 0; }
  100% { transform: translate(108vw, 8vh) rotate(6deg) scale(1); opacity: 0; }
}

@keyframes sil-fly-across-2 {
  0%   { transform: translate(-8vw, 78vh) rotate(-4deg) scale(1); opacity: 0; }
  55%  { opacity: 0; }
  59%  { opacity: 0.7; }
  97%  { opacity: 0.7; }
  100% { transform: translate(108vw, 62vh) rotate(-4deg) scale(1); opacity: 0; }
}

header.topbar, main, footer.sitefoot { position: relative; z-index: 1; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 20px;
}

header.topbar {
  border-bottom: 1px solid var(--border);
  background: rgba(18, 24, 33, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

header.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
  flex-wrap: wrap;
  gap: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  letter-spacing: 0.01em;
}

.brand img.mark {
  height: 28px;
  max-height: 28px;
  width: auto;
  max-width: 60px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 6px rgba(79, 163, 255, 0.35));
}

.brand .brandtext { display: flex; flex-direction: column; }

.brand small {
  display: block;
  font-weight: 400;
  color: var(--text-faint);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

nav.mainnav {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

nav.mainnav a { color: var(--text-dim); font-size: 0.92rem; }
nav.mainnav a:hover { color: var(--text); text-decoration: none; }

main { padding: 34px 0 60px; }

h1 { font-size: 1.7rem; margin: 0 0 8px; }
h2 { font-size: 1.25rem; margin: 28px 0 12px; }
h3 { font-size: 1.02rem; margin: 20px 0 8px; color: var(--text-dim); }
p { color: var(--text-dim); }
p.lead { font-size: 1.08rem; color: var(--text); max-width: 62ch; }

.panel {
  background: rgba(18, 24, 33, 0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 20px;
}

.panel-tight { padding: 14px 18px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

@media (max-width: 720px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--text-faint); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
tr:last-child td { border-bottom: none; }
.table-scroll { overflow-x: auto; }

.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--border);
  color: var(--text-dim);
  background: var(--bg-panel-2);
  white-space: nowrap;
}

.badge-ok { color: var(--ok); border-color: var(--ok); }
.badge-warn { color: var(--warn); border-color: var(--warn); }
.badge-bad { color: var(--bad); border-color: var(--bad); }
.badge-neutral { color: var(--text-dim); }

.verdict-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin: 14px 0;
}

.verdict-card {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.verdict-card .label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-faint);
  margin-bottom: 6px;
}

.verdict-card .value { font-size: 1.05rem; font-weight: 700; }
.verdict-card .explain { margin-top: 6px; font-size: 0.85rem; color: var(--text-dim); }

form { margin: 0; }

label { display: block; font-size: 0.85rem; color: var(--text-dim); margin: 14px 0 5px; }
label:first-child { margin-top: 0; }

input[type=text], input[type=email], input[type=password], textarea, select {
  width: 100%;
  padding: 9px 11px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.95rem;
}

textarea { resize: vertical; min-height: 64px; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent-dim); border-color: var(--accent); }

.help { font-size: 0.78rem; color: var(--text-faint); margin-top: 4px; }

.btn {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 6px;
  border: 1px solid var(--accent-dim);
  background: var(--accent-dim);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 16px;
}

.btn:hover { background: var(--accent); border-color: var(--accent); text-decoration: none; }
.btn-secondary { background: transparent; border-color: var(--border); color: var(--text-dim); }
.btn-secondary:hover { border-color: var(--text-dim); color: var(--text); background: transparent; }
.btn-danger { background: transparent; border-color: var(--bad); color: var(--bad); }
.btn-danger:hover { background: var(--bad); color: #fff; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.alert { padding: 12px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 0.9rem; }
.alert-error { background: rgba(232, 85, 107, 0.1); border: 1px solid var(--bad); color: var(--bad); }
.alert-ok { background: rgba(62, 207, 142, 0.1); border: 1px solid var(--ok); color: var(--ok); }
.alert-info { background: rgba(79, 163, 255, 0.08); border: 1px solid var(--accent-dim); color: var(--accent); }

code, pre, .mono { font-family: var(--mono); }
pre {
  background: #050708;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
  overflow-x: auto;
  font-size: 0.82rem;
  color: #b9d4ee;
}

.muted { color: var(--text-faint); font-size: 0.85rem; }
.hr { border: none; border-top: 1px solid var(--border); margin: 22px 0; }

.layer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  margin: 3px 6px 3px 0;
}

.pillbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }

footer.sitefoot {
  border-top: 1px solid var(--border);
  padding: 22px 0;
  color: var(--text-faint);
  font-size: 0.8rem;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-faint);
}

.stat-tile {
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}
.stat-tile .n { font-size: 1.6rem; font-weight: 700; }
.stat-tile .lbl { font-size: 0.75rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }

/* ── Back-to-top + smooth scroll (added for cross-site nav consistency) ── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 5;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(18, 24, 33, 0.85);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 1.1rem;
  text-decoration: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.back-to-top:hover {
  color: var(--accent);
  border-color: var(--accent-dim);
  text-decoration: none;
  transform: translateY(-2px);
}

/* ── Hero: futuristic space backdrop (pure CSS, no assets, no JS —
   CSP is script-src 'none', so all motion/interaction here is CSS
   transitions/animations/:hover only) ─────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  margin: -24px -24px 32px;
  padding: 96px 24px 72px;
  min-height: 82vh;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0 0 var(--radius) var(--radius);
  text-align: center;
  background:
    radial-gradient(ellipse 900px 500px at 18% -10%, rgba(79, 163, 255, 0.20), transparent 60%),
    radial-gradient(ellipse 700px 500px at 88% 10%, rgba(120, 90, 220, 0.16), transparent 60%),
    radial-gradient(1200px 700px at 50% 120%, rgba(62, 207, 142, 0.08), transparent 60%),
    linear-gradient(180deg, #060a10 0%, #0b0f14 100%);
  transition: background-color 0.6s ease;
}
.hero-warp {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(79, 163, 255, 0.16) 0%, rgba(79, 163, 255, 0.05) 24%, transparent 55%);
  animation: sil-warp-pulse 6s ease-in-out infinite;
}
@keyframes sil-warp-pulse {
  0%, 100% { transform: scale(0.96); opacity: 0.7; }
  50%      { transform: scale(1.05); opacity: 1; }
}
/* Stars/ships in the hero itself are the pre-existing, more polished
   site-wide `.spacefx-stars`/`.spacefx-ship` system (defined earlier in
   this file, originally inherited from the Lab's stylesheet but never
   actually wired into any template until now) -- reused here rather
   than duplicated, and now also placed in base.html so the effect
   continues on every page, not just the hero. An earlier draft of this
   hero defined its own second, colliding `.hero-stars`/`.hero-ship`
   set with `@keyframes` names that shadowed the pre-existing ones
   (`sil-drift-stars`/`sil-fly-across`/`sil-fly-across-2`); removed. */
.hero-content { position: relative; z-index: 1; }
.hero .hero-logo { width: 96px; max-width: 30%; margin-bottom: 8px; }
.hero-kicker {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  border-radius: 999px;
  padding: 4px 14px;
  margin-bottom: 18px;
}
.hero h1 { font-size: 2.35rem; line-height: 1.2; max-width: 760px; margin: 0 auto 16px; }
.hero .lead { max-width: 640px; margin: 0 auto 28px; }

/* ── Product grid, proof strip ─────────────────────────────────────────── */
.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 32px 0; }
.product-card { padding: 18px; }
.product-card h3 { font-size: 1rem; }
.product-card p { font-size: 0.88rem; color: var(--text-dim); margin-bottom: 0; }
.proof-strip { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; padding: 20px 0; }
.proof-item { text-align: center; }
.proof-item .proof-value { font-size: 1.4rem; font-weight: 600; color: var(--accent); }
.proof-item .proof-label { font-size: 0.78rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; }

/* ── Hero scroll cue ──────────────────────────────────────────────────── */
.hero-scroll-cue {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 34px;
  border: 2px solid var(--text-faint);
  border-radius: 12px;
  opacity: 0.7;
}
.hero-scroll-cue::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 4px;
  height: 8px;
  margin-left: -2px;
  border-radius: 2px;
  background: var(--accent);
  animation: sil-scroll-cue 1.8s ease-in-out infinite;
}
@keyframes sil-scroll-cue {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ── Interactive product cards: lift + glow on hover/focus, pure CSS ──── */
.product-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  will-change: transform;
}
.product-card:hover, .product-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--accent-dim);
  box-shadow: 0 10px 32px -12px rgba(79, 163, 255, 0.45);
}

/* ── CTA buttons: subtle continuous glow, brighter on hover/focus ─────── */
.hero .btn {
  position: relative;
  animation: sil-cta-glow 3.2s ease-in-out infinite;
}
.hero .btn:hover, .hero .btn:focus-visible {
  animation: none;
  box-shadow: 0 0 0 3px rgba(79, 163, 255, 0.35), 0 0 24px rgba(79, 163, 255, 0.5);
  transform: translateY(-1px);
}
@keyframes sil-cta-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79, 163, 255, 0.0); }
  50%      { box-shadow: 0 0 18px 1px rgba(79, 163, 255, 0.25); }
}

/* ── Continue the starfield faintly past the hero (scoped to body's own
   background so the rest of the page still reads clearly) ───────────── */
body {
  background-image:
    radial-gradient(1px 1px at 8% 12%, rgba(200, 220, 255, 0.35) 100%, transparent 60%),
    radial-gradient(1px 1px at 92% 8%, rgba(200, 220, 255, 0.3) 100%, transparent 60%),
    radial-gradient(1px 1px at 50% 4%, rgba(200, 220, 255, 0.25) 100%, transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

@media (prefers-reduced-motion: reduce) {
  .hero-warp, .hero-stars-far, .hero-scroll-cue::before, .hero .btn { animation: none; }
  .product-card { transition: none; }
}

@media (max-width: 640px) {
  .hero { min-height: auto; padding: 56px 20px 44px; }
}

/* ── Extra polish pass: gradient headline, glowing logo, richer panels ── */
.hero h1 {
  background: linear-gradient(120deg, #ffffff 0%, #cfe4ff 45%, #7fb8ff 70%, #ffffff 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sil-headline-sheen 8s ease-in-out infinite;
}
@keyframes sil-headline-sheen {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}
.hero .hero-logo {
  animation: sil-logo-pulse 4s ease-in-out infinite;
}
@keyframes sil-logo-pulse {
  0%, 100% { filter: drop-shadow(0 0 12px rgba(79, 163, 255, 0.35)); }
  50%      { filter: drop-shadow(0 0 26px rgba(79, 163, 255, 0.65)); }
}
.hero-kicker {
  animation: sil-kicker-glow 3s ease-in-out infinite;
}
@keyframes sil-kicker-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(79, 163, 255, 0); }
  50%      { box-shadow: 0 0 14px rgba(79, 163, 255, 0.35); }
}
.panel {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.panel:hover {
  border-color: var(--accent-dim);
}
.panel-accent {
  position: relative;
  overflow: hidden;
}
.panel-accent::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(79, 163, 255, 0.08) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: sil-sheen-sweep 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sil-sheen-sweep {
  0%   { background-position: -60% 0; }
  100% { background-position: 160% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero .hero-logo, .hero-kicker, .panel-accent::before { animation: none; }
}

.footer-links { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0; }
.footer-links a { color: var(--text-dim); }
.footer-links a:hover { color: var(--accent); }

/* ── Smooth cross-page transitions (no JS -- CSS-only View Transitions
   API for same-origin navigation; browsers without support simply
   ignore this and navigate as before, zero risk). ── */
@view-transition {
  navigation: auto;
}
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}