/* ============================================================
   Vision Proctor — cyan + slate, "monitoring" aesthetic
   ============================================================ */
:root {
  --bg:           #F7FAFB;
  --bg-soft:      #EBF2F5;
  --bg-elevated:  #FFFFFF;
  --fg:           #0B2230;
  --fg-soft:      #1E3A4A;
  --muted:        #5F7686;
  --border:       #DCE6EC;
  --border-strong:#BCD0DA;

  --brand:        #0E7490;
  --brand-strong: #0B5566;
  --brand-soft:   #CFFAFE;
  --accent:       #06B6D4;

  --good:         #16A34A;
  --warn:         #F59E0B;
  --danger:       #DC2626;
  --idle:         #94A3B8;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(11,34,48,0.08);
  --shadow-md: 0 8px 24px rgba(11,34,48,0.10), 0 2px 6px rgba(11,34,48,0.05);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --container: 1180px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--fg); background: var(--bg);
  font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color 120ms, border-color 120ms; }
a:hover { color: var(--brand); }

h1, h2, h3 { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.5em; color: var(--fg); }
h1 { font-size: clamp(2rem, 4vw + 1rem, 3.3rem); line-height: 1.06; }
h2 { font-size: clamp(1.4rem, 1.6vw + 1rem, 2.1rem); line-height: 1.15; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0 0 1em 0; }
.muted { color: var(--muted); }
.small { font-size: 0.88rem; }
code, .mono { font-family: var(--font-mono); font-size: 0.9em; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 1.25rem; }
.row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: rgba(247,250,251,0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header .row { padding: 0.85rem 0; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 0.7rem; color: var(--brand); }
.brand .mark {
  width: 42px; height: 42px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center;
}
.brand .wordmark { line-height: 1.1; display: flex; flex-direction: column; }
.brand .wordmark span { font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; }
.brand .wordmark small { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted); font-weight: 600; }
.nav { display: flex; gap: 1.3rem; }
.nav a { color: var(--muted); font-weight: 500; font-size: 0.93rem; }
.nav a:hover { color: var(--brand); }

/* Hero */
.hero { padding: 4rem 0 3.5rem; text-align: center; }
.hero .eyebrow {
  display: inline-block; padding: 0.35em 0.95em;
  border: 1px solid var(--brand-soft); border-radius: 999px;
  background: rgba(14,116,144,0.06); color: var(--brand);
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
  margin-bottom: 1.25rem;
}
.hero h1 .accent { color: var(--brand); }
.hero .lede { max-width: 64ch; margin: 0 auto 1.5rem; color: var(--muted); font-size: 1.05rem; }
.hero-actions { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.6em 1.25em;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font: inherit; font-weight: 600; font-size: 0.92rem;
  cursor: pointer; transition: all 120ms;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.btn-secondary { background: #fff; color: var(--fg); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--brand); color: var(--brand); }

.section { padding: 3.5rem 0; }
.section-muted { background: var(--bg-soft); }
.section-head { margin-bottom: 1.5rem; }
.section-head .eyebrow {
  display: inline-block; color: var(--brand);
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  margin-bottom: 0.45rem;
}

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* ===== Proctor layout ===== */
.proctor-layout {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr);
  gap: 1.5rem;
}
@media (max-width: 900px) { .proctor-layout { grid-template-columns: 1fr; } }

.cam-wrap {
  position: relative;
  background: #0B2230;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/3;
  min-height: 360px;
}
.cam-wrap video, .cam-wrap canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.cam-wrap video { transform: scaleX(-1); }   /* mirror like a typical webcam app */
.cam-wrap canvas { pointer-events: none; transform: scaleX(-1); }

.cam-banner {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(11,34,48,0.85);
  color: #fff;
  text-align: center;
  z-index: 2;
}
.cam-banner span { display: block; margin-bottom: 1rem; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.02em; }
.cam-banner.hidden { display: none; }

.cam-stats {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.cam-stats .stat {
  background: rgba(0,0,0,0.6); color: #fff;
  padding: 0.3em 0.7em; border-radius: 999px;
  font-size: 0.74rem;
  display: inline-flex; align-items: center; gap: 0.5em;
  backdrop-filter: blur(4px);
}
.cam-stats .lbl { color: rgba(255,255,255,0.65); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.62rem; }

/* ===== Side panel ===== */
.panel { padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; }
.panel h3 { margin: 0; }
.status {
  display: grid; grid-template-columns: 18px 1fr;
  gap: 0.85rem; align-items: center;
  padding: 0.85rem 1rem;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
}
.status-light {
  width: 14px; height: 14px; border-radius: 999px;
  background: var(--idle);
  box-shadow: 0 0 0 0 currentColor;
  animation: pulse-dot 1.6s ease-in-out infinite;
  color: var(--idle);
}
.status-light[data-state="ok"]    { background: var(--good); color: var(--good); }
.status-light[data-state="warn"]  { background: var(--warn); color: var(--warn); }
.status-light[data-state="bad"]   { background: var(--danger); color: var(--danger); }
.status-light[data-state="idle"]  { background: var(--idle); color: var(--idle); animation: none; }
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 0 5px transparent; opacity: 0.5; }
}
.status strong { font-size: 1rem; }

.signals { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.signals li {
  display: grid; grid-template-columns: 14px 1fr auto;
  gap: 0.6rem; align-items: center;
  padding: 0.5rem 0.7rem;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.signals .dot { width: 10px; height: 10px; border-radius: 999px; background: var(--idle); }
.signals li[data-state="ok"]   .dot { background: var(--good); }
.signals li[data-state="warn"] .dot { background: var(--warn); }
.signals li[data-state="bad"]  .dot { background: var(--danger); }
.signals .val { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); }

.log {
  list-style: none; padding: 0; margin: 0;
  max-height: 200px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.3rem;
  font-size: 0.82rem;
}
.log li {
  padding: 0.35rem 0.6rem;
  background: var(--bg-soft);
  border-left: 3px solid var(--idle);
  border-radius: 4px;
  display: grid; grid-template-columns: 64px 1fr;
  gap: 0.5rem;
  animation: log-in 220ms ease;
}
.log li.warn  { border-left-color: var(--warn); }
.log li.bad   { border-left-color: var(--danger); }
.log li time { font-family: var(--font-mono); color: var(--muted); }
@keyframes log-in {
  from { opacity: 0; transform: translateX(4px); } to { opacity: 1; transform: translateX(0); }
}

/* ===== How section ===== */
.how-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.how-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  position: relative;
}
.how-card .how-num {
  font-family: var(--font-mono);
  color: var(--brand);
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  display: inline-block;
}
.how-card h3 { margin: 0.25rem 0 0.4rem; color: var(--fg); }

/* Footer */
.site-footer { background: var(--bg-soft); border-top: 1px solid var(--border); }
.site-footer .legal { padding: 1rem 0 1.5rem; font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--border); }
.footlist { list-style: none; padding: 0; margin: 0.5rem 0 0; }
.footlist li a { display: block; padding: 0.2rem 0; color: var(--muted); font-size: 0.9rem; }
.footlist li a:hover { color: var(--brand); }