/* intelligences.world — shared page chrome: vars, base, header, footer,
   broadcast banner, NOTIFY toggle, content-page typography. */

:root {
  --bg: #0a0a0a;
  --fg: #c8c8c8;
  --dim: #555;
  --ok: #4ade80;
  --warn: #facc15;
  --err: #f87171;
  --mute: #888;
  --line: #000000;
  --accent: #fff;
  --mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--fg);
  font-family: var(--mono); font-size: 14px;
  height: 100%;
  overflow: hidden;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
}
header {
  background: #000;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 20px; border-bottom: 1px solid var(--line);
  font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase;
}
header .brand { color: var(--accent); }
header .brand a { color: inherit; text-decoration: none; }
header .meta { color: var(--dim); }
.hidden { display:none !important; }
footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 40px; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line); background: var(--bg);
  font-size: 11px; color: var(--dim); letter-spacing: 0.15em; text-transform: uppercase;
}
footer .ticker {
  overflow: hidden; white-space: nowrap;
  flex: 1; margin: 0 20px; color: var(--mute);
}
footer a { color: var(--dim); text-decoration: none; }
footer a:hover { color: var(--ok); }
@keyframes blink { 50% { opacity: 0; } }
.live::before { content: "● "; color: var(--ok); animation: blink 1.5s infinite; }
#banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 99;
  background: var(--bg); color: var(--accent);
  border-bottom: 1px solid var(--ok);
  font-size: 13px; letter-spacing: 0.15em; text-transform: uppercase;
}
#banner a { color: var(--ok); text-decoration: underline; text-underline-offset: 3px; }
#banner .msg { padding: 14px 20px; border-bottom: 1px solid #1a1a1a; }
#banner .msg:last-child { border-bottom: none; }
#banner .close { float: right; cursor: pointer; color: var(--dim); padding: 0 6px; }
#banner .close:hover { color: var(--err); }
#bell { cursor: pointer; user-select: none; }
#bell.on { color: var(--ok); }

/* ---------- content pages (<main class="page">) ---------- */
main.page {
  position: relative; z-index: 2;
  max-width: 720px; margin: 0 auto;
  padding: 40px 20px 80px;
  height: calc(100vh - 90px);
  overflow: auto;
}
main.page h1 {
  color: var(--accent); font-size: 20px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase;
}
main.page h2 {
  color: var(--ok); font-size: 13px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: 2.5em;
}
main.page p, main.page li { line-height: 1.7; font-size: 13px; }
main.page a { color: var(--ok); text-underline-offset: 3px; }
main.page hr { border: none; border-top: 1px solid #1a1a1a; margin: 2em 0; }