/* ── HERMES MISSION CONTROL — vluchtconsole-thema ─────────────────────────
   Fosfor-amber + cyaan telemetrie op diep zwart. Chakra Petch (display),
   IBM Plex Mono (data). Eén bron van waarheid voor alle pagina's. */

:root {
  --void:    #06080c;
  --panel:   #0b101a;
  --panel-2: #0f1622;
  --line:    #1b2536;
  --line-2:  #27364e;
  --amber:   #ffb454;
  --amber-2: #ffd9a0;
  --cyan:    #53d7e8;
  --ok:      #4ade80;
  --warn:    #ffd166;
  --err:     #ff5c5c;
  --ink:     #e6ecf5;
  --ink-2:   #8fa0b8;
  --ink-3:   #5a6a84;
  --font-d:  'Chakra Petch', sans-serif;
  --font-m:  'IBM Plex Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { color-scheme: dark; }

body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-m);
  font-size: 14px;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Atmosfeer: grid + glow + noise, vast op de achtergrond */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1100px 480px at 50% -140px, rgba(255,180,84,.07), transparent 65%),
    radial-gradient(900px 600px at 92% 110%, rgba(83,215,232,.05), transparent 60%),
    repeating-linear-gradient(0deg,  transparent 0 47px, rgba(120,150,200,.045) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(120,150,200,.045) 47px 48px);
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

::selection { background: rgba(255,180,84,.28); }

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

/* ── Topbar ── */
.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(15,22,34,.92), rgba(9,13,20,.88));
  backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 50;
}
.wordmark {
  font-family: var(--font-d); font-weight: 700; font-size: 1.25rem;
  letter-spacing: .22em; color: var(--ink); white-space: nowrap;
}
.wordmark .glyph { color: var(--amber); margin-right: 8px; }
.wordmark small {
  display: block; font-size: .58rem; letter-spacing: .48em;
  color: var(--ink-3); font-weight: 500; margin-top: -2px;
}
.topnav { display: flex; gap: 4px; margin-left: 10px; }
.topnav a {
  font-family: var(--font-d); font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); padding: 7px 14px; border: 1px solid transparent;
}
.topnav a:hover { color: var(--ink); text-decoration: none; border-color: var(--line-2); }
.topnav a.active {
  color: var(--amber); border-color: var(--line-2);
  background: rgba(255,180,84,.06);
}
.topbar .spacer { flex: 1; }
.clock {
  text-align: right; font-size: .8rem; color: var(--ink-2); line-height: 1.3;
}
.clock b { color: var(--amber); font-size: 1.05rem; font-weight: 600; letter-spacing: .08em; }
.logout { color: var(--ink-3); font-size: .75rem; margin-left: 8px; }

/* ── Layout ── */
.wrap { max-width: 1280px; margin: 0 auto; padding: 26px 22px 60px; }

.grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(12, 1fr);
}
.col-4  { grid-column: span 4; }
.col-6  { grid-column: span 6; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }
@media (max-width: 980px) { .col-4, .col-6, .col-8 { grid-column: span 12; } }

/* ── Panelen met hoekbrackets ── */
.panel {
  position: relative;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  padding: 18px 20px 20px;
  animation: panel-in .5s cubic-bezier(.2,.7,.2,1) both;
}
.panel::before, .panel::after {
  content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none;
}
.panel::before {
  top: -1px; left: -1px;
  border-top: 2px solid var(--amber); border-left: 2px solid var(--amber);
}
.panel::after {
  bottom: -1px; right: -1px;
  border-bottom: 2px solid var(--amber); border-right: 2px solid var(--amber);
}
.panel > h2 {
  font-family: var(--font-d); font-size: .8rem; font-weight: 700;
  letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2);
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px dashed var(--line-2);
}
.panel > h2 .idx { color: var(--amber); font-weight: 600; }
.panel > h2 .led { margin-left: auto; }

@keyframes panel-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.grid > :nth-child(1) { animation-delay: .05s; }
.grid > :nth-child(2) { animation-delay: .13s; }
.grid > :nth-child(3) { animation-delay: .21s; }
.grid > :nth-child(4) { animation-delay: .29s; }
.grid > :nth-child(5) { animation-delay: .37s; }

/* ── LEDs & statusregels ── */
.led {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block;
  background: var(--ink-3); flex: none;
}
.led.ok   { background: var(--ok);   box-shadow: 0 0 8px rgba(74,222,128,.7);  animation: pulse 2.4s infinite; }
.led.err  { background: var(--err);  box-shadow: 0 0 8px rgba(255,92,92,.7);   animation: pulse 1s infinite; }
.led.warn { background: var(--warn); box-shadow: 0 0 8px rgba(255,209,102,.7); }
@keyframes pulse { 50% { opacity: .45; } }

.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 2px; border-bottom: 1px solid rgba(27,37,54,.6);
  font-size: .84rem;
}
.row:last-child { border-bottom: 0; }
.row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .dim  { color: var(--ink-3); font-size: .75rem; }

/* ── Voortgangsbalken (projecten) ── */
.meter { height: 6px; background: var(--line); position: relative; flex: none; width: 120px; }
.meter i {
  position: absolute; inset: 0 auto 0 0; display: block;
  background: linear-gradient(90deg, var(--amber), var(--amber-2));
}
.meter.cyan i { background: linear-gradient(90deg, #2b93a3, var(--cyan)); }
.pct { color: var(--amber); font-size: .78rem; width: 42px; text-align: right; flex: none; }

/* ── Knoppen & inputs ── */
.btn {
  font-family: var(--font-d); font-weight: 600; font-size: .8rem;
  letter-spacing: .18em; text-transform: uppercase;
  background: var(--amber); color: #1a1206; border: 0;
  padding: 11px 18px; cursor: pointer; width: 100%;
}
.btn:hover { background: var(--amber-2); }
input[type=text], input[type=password], input[type=search] {
  width: 100%; background: rgba(6,8,12,.8); border: 1px solid var(--line-2);
  color: var(--ink); font-family: var(--font-m); font-size: .9rem;
  padding: 10px 12px; outline: none;
}
input:focus { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(255,180,84,.35); }

/* ── Login (toegangscontrole) ── */
.login-body { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.login-box {
  width: 100%; max-width: 400px; position: relative;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); padding: 34px 30px 30px;
}
.login-box::before, .login-box::after {
  content: ''; position: absolute; width: 18px; height: 18px;
}
.login-box::before { top: -1px; left: -1px; border-top: 2px solid var(--amber); border-left: 2px solid var(--amber); }
.login-box::after  { bottom: -1px; right: -1px; border-bottom: 2px solid var(--amber); border-right: 2px solid var(--amber); }
.login-box .glyph { font-size: 2rem; color: var(--amber); text-align: center; display: block; }
.login-box h1 {
  font-family: var(--font-d); font-weight: 700; letter-spacing: .3em;
  font-size: 1.3rem; text-align: center; margin: 8px 0 2px;
}
.login-box .sub {
  text-align: center; color: var(--ink-3); font-size: .72rem;
  letter-spacing: .28em; text-transform: uppercase; margin-bottom: 24px;
}
.login-box .sub::after { content: '_'; animation: blink 1.1s steps(1) infinite; color: var(--amber); }
@keyframes blink { 50% { opacity: 0; } }
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-2); margin-bottom: 6px; font-family: var(--font-d); font-weight: 600;
}
.alert {
  border: 1px solid rgba(255,92,92,.5); background: rgba(255,92,92,.08);
  color: #ffb3b3; font-size: .8rem; padding: 9px 12px; margin-bottom: 14px;
}
.note {
  border: 1px solid var(--line-2); background: rgba(83,215,232,.06);
  color: var(--cyan); font-size: .8rem; padding: 9px 12px; margin-bottom: 14px;
}

/* ── Brain-browser ── */
.brain-layout {
  display: grid; grid-template-columns: 290px 1fr; gap: 18px; align-items: start;
}
@media (max-width: 900px) { .brain-layout { grid-template-columns: 1fr; } }
.tree { max-height: calc(100vh - 210px); overflow: auto; font-size: .84rem; }
.tree ul { list-style: none; padding-left: 16px; }
.tree > ul { padding-left: 0; }
.tree li { margin: 1px 0; }
.tree .dirlbl {
  color: var(--ink-2); cursor: pointer; user-select: none;
  font-family: var(--font-d); font-weight: 600; font-size: .76rem;
  letter-spacing: .1em; text-transform: uppercase; padding: 3px 2px; display: block;
}
.tree .dirlbl::before { content: '▸ '; color: var(--amber); }
.tree li.open > .dirlbl::before { content: '▾ '; }
.tree li.closed > ul { display: none; }
.tree .notelink {
  display: block; padding: 2px 2px 2px 14px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tree .notelink:hover { color: var(--ink); text-decoration: none; background: rgba(255,180,84,.05); }
.tree .notelink.active { color: var(--amber); background: rgba(255,180,84,.08); }

.viewer { min-height: 420px; }
.viewer .meta { color: var(--ink-3); font-size: .74rem; margin-bottom: 14px; letter-spacing: .06em; }

.md { font-size: .92rem; color: var(--ink); }
.md h1, .md h2, .md h3, .md h4 {
  font-family: var(--font-d); color: var(--amber-2); margin: 20px 0 8px;
  letter-spacing: .04em; line-height: 1.25;
}
.md h1 { font-size: 1.5rem; color: var(--amber); }
.md h2 { font-size: 1.2rem; border-bottom: 1px dashed var(--line-2); padding-bottom: 6px; }
.md h3 { font-size: 1.02rem; }
.md p, .md ul, .md ol, .md blockquote, .md pre, .md table { margin-bottom: 12px; }
.md ul, .md ol { padding-left: 22px; }
.md li { margin: 3px 0; }
.md code {
  background: rgba(83,215,232,.08); color: var(--cyan);
  padding: 1px 5px; font-size: .85em;
}
.md pre {
  background: rgba(6,8,12,.85); border: 1px solid var(--line);
  padding: 12px 14px; overflow-x: auto;
}
.md pre code { background: none; padding: 0; color: var(--ink); }
.md blockquote { border-left: 3px solid var(--amber); padding: 4px 14px; color: var(--ink-2); }
.md a.wiki { color: var(--amber); border-bottom: 1px dotted var(--amber); }
.md a.wiki:hover { text-decoration: none; color: var(--amber-2); }
.md img { max-width: 100%; border: 1px solid var(--line-2); }
.md hr { border: 0; border-top: 1px dashed var(--line-2); margin: 18px 0; }
.md table { border-collapse: collapse; width: 100%; font-size: .84rem; }
.md th, .md td { border: 1px solid var(--line-2); padding: 6px 10px; text-align: left; }
.md th { color: var(--amber-2); font-family: var(--font-d); }
.md input[type=checkbox] { accent-color: var(--amber); margin-right: 6px; }

.search-hit { cursor: pointer; }
.search-hit mark { background: rgba(255,180,84,.3); color: var(--amber-2); }

.empty { color: var(--ink-3); text-align: center; padding: 60px 10px; letter-spacing: .1em; }

/* ── Comms-console ── */
.comms-log {
  min-height: 380px; max-height: calc(100vh - 330px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; padding: 6px 2px 14px;
}
.msg { display: flex; gap: 12px; align-items: flex-start; }
.msg .who {
  font-family: var(--font-d); font-weight: 700; font-size: .68rem;
  letter-spacing: .2em; padding: 3px 8px; flex: none; margin-top: 2px;
}
.msg.tx .who { color: var(--amber); border: 1px solid rgba(255,180,84,.45); }
.msg.rx .who { color: var(--cyan);  border: 1px solid rgba(83,215,232,.45); }
.msg .body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; padding-top: 2px; }
.msg.tx .body { color: var(--amber-2); }
.tele { color: var(--ink-3); font-size: .74rem; padding-left: 52px; letter-spacing: .04em; }

.comms-bar { display: flex; gap: 10px; border-top: 1px dashed var(--line-2); padding-top: 14px; }
.comms-bar select {
  background: rgba(6,8,12,.8); border: 1px solid var(--line-2); color: var(--cyan);
  font-family: var(--font-m); font-size: .82rem; padding: 0 8px; outline: none;
}
.comms-bar input { flex: 1; }
.comms-bar .btn { width: auto; padding: 0 22px; }
.comms-bar .btn.stop { background: var(--err); color: #2a0b0b; }
.comms-bar .btn.brain {
  background: none; color: var(--cyan); border: 1px solid rgba(83,215,232,.5);
}
.comms-bar .btn.brain:hover { background: rgba(83,215,232,.1); }
.msg.vault .who { color: var(--ok); border: 1px solid rgba(74,222,128,.45); }
.mic {
  width: 46px; flex: none; cursor: pointer; font-size: 1rem;
  background: rgba(6,8,12,.8); border: 1px solid var(--line-2); color: var(--ink-2);
}
.mic:hover { border-color: var(--amber); color: var(--amber); }
.mic.recording {
  color: var(--err); border-color: var(--err);
  animation: pulse 1s infinite; box-shadow: 0 0 12px rgba(255,92,92,.5);
}
.mic:disabled { opacity: .4; cursor: default; }
.comms-status {
  margin-top: 8px; color: var(--ink-3); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase;
}
.tag {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid var(--line-2); color: var(--ink-3); padding: 1px 7px;
}
.tag.lock { color: var(--warn); border-color: rgba(255,209,102,.4); }