/* ============================================================
   SERVO OS | the ecosystem, as a live machine operating system
   ============================================================ */
:root {
  --bg: #07100b;
  --bg-raise: #0b1610;
  --ink: #e8f2ea;
  --ink-dim: #93a89a;
  --ink-faint: #5c6f63;
  --accent: #8cff66;
  --accent-dim: #8cff6626;
  --amber: #ffd166;
  --slate: #6b7d72;
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.045);
  --glass: rgba(255, 255, 255, 0.025);
  --font-head: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --maxw: 1180px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--ink); font-family: var(--font-head); font-size: 16px; line-height: 1.6; min-height: 100vh; }
.mono { font-family: var(--font-mono); }

.grid-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(140, 255, 102, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 255, 102, 0.022) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, black 40%, transparent 100%);
}

/* ---------------------------------------------------------- boot overlay */
.boot {
  position: fixed; inset: 0; z-index: 200; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); cursor: pointer;
  transition: opacity 0.5s ease;
}
.boot.gone { opacity: 0; pointer-events: none; }
.boot-inner { width: min(560px, 88vw); }
.boot-line { font-size: 13px; color: var(--ink-dim); white-space: pre; line-height: 1.9; }
.boot-line .ok { color: var(--accent); }
.boot-ready { color: var(--accent); font-size: 15px; letter-spacing: 0.1em; margin-top: 10px; }
.boot-skip { position: fixed; bottom: 26px; right: 30px; font-size: 11px; letter-spacing: 0.14em; color: var(--ink-faint); }
.cursor::after { content: "_"; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------------------------------------------------------- OS bar */
.osbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 18px;
  padding: 12px 30px;
  background: rgba(7, 16, 11, 0.86); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--ink-dim);
}
.osbar .brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
.osbar .brand img { width: 20px; height: 20px; }
.osbar .brand b { font-family: var(--font-head); font-weight: 700; letter-spacing: 0.05em; font-size: 15px; }
.osbar .sep { color: var(--ink-faint); }
.osbar .right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.osbar a.home { color: var(--ink-dim); text-decoration: none; }
.osbar a.home:hover { color: var(--accent); }
.osbar .clock { color: var(--accent); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 9px var(--accent); animation: pulse 2.2s infinite; display: inline-block; }
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---------------------------------------------------------- shell */
.wrap { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 46px 30px 40px; }
.head .tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--accent); }
.head h1 { font-size: clamp(30px, 5.2vw, 50px); font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; margin-top: 6px; }
.head p { color: var(--ink-dim); margin-top: 12px; max-width: 640px; }

.legend { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-dim); }
.legend span { display: flex; align-items: center; gap: 8px; }
.led { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.led-live { background: var(--accent); box-shadow: 0 0 9px var(--accent); animation: pulse 2.2s infinite; }
.led-build { background: var(--amber); box-shadow: 0 0 9px rgba(255, 209, 102, 0.6); animation: flicker 1.4s steps(2) infinite; }
.led-plan { background: var(--slate); }
@keyframes flicker { 50% { opacity: 0.4; } }

/* ---------------------------------------------------------- module map */
.map { position: relative; margin: 44px auto 0; }
.links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; }
.link-path { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 5 4; opacity: 0; filter: drop-shadow(0 0 4px rgba(140, 255, 102, 0.5)); transition: opacity 0.25s; }
.link-path.on { opacity: 0.9; animation: dash 18s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -200; } }

.tier { position: relative; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin-bottom: 18px; }
.tier-label {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; color: var(--ink-faint);
  writing-mode: vertical-rl; text-orientation: mixed;
}

.mod {
  width: 246px; background: linear-gradient(160deg, var(--bg-raise), var(--bg));
  border: 1px solid var(--line); display: flex; flex-direction: column;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.mod-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-faint);
}
.mod-bar .k { flex: 1; }
.mod-bar .st { color: var(--ink-dim); }
.mod-body { padding: 16px 16px 14px; flex: 1; }
.mod-name { font-family: var(--font-head); font-weight: 600; font-size: 17px; letter-spacing: 0.01em; }
.mod-desc { color: var(--ink-dim); font-size: 12.5px; margin-top: 7px; }
.mod-foot { padding: 0 16px 14px; }
.mod-launch {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-decoration: none; padding: 7px 12px;
}
.mod-launch.go { background: var(--accent); color: #06110a; }
.mod-launch.go:hover { box-shadow: 0 0 18px var(--accent-dim); }
.mod-launch.ext { border: 1px solid var(--line); color: var(--ink-dim); }
.mod-launch.ext:hover { border-color: var(--accent); color: var(--accent); }
.mod-launch.idle { color: var(--ink-faint); font-size: 10px; letter-spacing: 0.14em; padding-left: 0; }

/* status accents */
.mod[data-status="live"] .mod-bar .st { color: var(--accent); }
.mod[data-status="build"] .mod-bar .st { color: var(--amber); }
.mod[data-status="plan"] { border-style: dashed; }
.mod[data-status="plan"] .mod-body { opacity: 0.9; }

/* hover / focus states driven by JS */
.mod.hot { border-color: var(--accent); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(140, 255, 102, 0.3); transform: translateY(-3px); z-index: 3; }
.mod.dep { border-color: rgba(140, 255, 102, 0.5); }
.map.focusing .mod:not(.hot):not(.dep) { opacity: 0.32; }

/* ---------------------------------------------------------- footer */
.foot { position: relative; z-index: 1; border-top: 1px solid var(--line-soft); padding: 26px 30px; margin-top: 40px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-faint); text-align: center; }
.foot a { color: var(--ink-dim); text-decoration: none; }
.foot a:hover { color: var(--accent); }

@media (max-width: 820px) {
  .osbar { padding: 11px 16px; gap: 12px; flex-wrap: wrap; }
  .osbar .hide-sm { display: none; }
  .wrap { padding: 32px 16px 30px; }
  .links { display: none; }               /* dependency lines only on desktop */
  .tier { gap: 14px; }
  .tier-label { display: none; }
  .mod { width: 100%; max-width: 340px; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot, .led-live, .led-build, .link-path.on, .cursor::after { animation: none; }
}