/* burnin hosted webapp — InfluxData-style dark navy + magenta/blue gradient. */

:root {
  --navy-0: #050514;
  --navy-1: #0a0a29;
  --navy-2: #10104a;
  --ink: #eef0ff;
  --ink-dim: #a5abd6;
  --magenta: #d30971;
  --violet: #9b2aff;
  --blue: #22adf6;
  --gradient: linear-gradient(92deg, var(--magenta), var(--violet) 55%, var(--blue));
  --card: rgba(20, 22, 70, 0.45);
  --card-line: rgba(120, 130, 255, 0.18);
}

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

html { color-scheme: dark; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(120% 90% at 70% -10%, var(--navy-2) 0%, var(--navy-1) 45%, var(--navy-0) 100%);
  color: var(--ink);
  font: 16px/1.6 "Avenir Next", Avenir, "Segoe UI", "Helvetica Neue", sans-serif;
  overflow-x: hidden;
}

/* --- Atmosphere ------------------------------------------------------- */

.bg-glow {
  position: fixed;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
  animation: drift 24s ease-in-out infinite alternate;
}
.bg-glow-magenta { top: -25vmax; right: -18vmax; background: var(--magenta); }
.bg-glow-blue { bottom: -30vmax; left: -20vmax; background: var(--blue); animation-delay: -12s; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(4vmax, 3vmax, 0) scale(1.12); }
}

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

header, main, section, footer { position: relative; z-index: 1; }

/* --- Top bar ----------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem clamp(1.2rem, 5vw, 4rem);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.wordmark .mark { width: 1.5rem; height: 1.5rem; }

.topbar-tag {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  border: 1px solid var(--card-line);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
}

.topbar-nav { display: flex; align-items: center; gap: 1rem; }
.whoami { color: var(--ink-dim); font-size: 0.9rem; }

/* --- Hero -------------------------------------------------------------- */

.hero {
  padding: clamp(3rem, 10vh, 7rem) clamp(1.2rem, 5vw, 4rem) 2rem;
  max-width: 60rem;
}
.hero-compact { padding-top: clamp(2rem, 6vh, 4rem); }

/* Minimal logged-out landing: everything centered around the mark. */
.hero-center {
  margin: auto;
  max-width: none;
  padding-top: clamp(1rem, 6vh, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-center h1 {
  font-size: clamp(2.6rem, 7vw, 4.2rem);
  letter-spacing: 0.01em;
}
.lede-center { text-align: center; }
.foot-center { text-align: center; border-top: none; }

/* --- Flaming cuboctahedron ---------------------------------------------- */

.cubo {
  width: clamp(9rem, 22vw, 13rem);
  height: auto;
  margin-bottom: 1.2rem;
  overflow: visible;
}

.cubo .ember {
  opacity: 0.5;
  animation: ember-pulse 3.2s ease-in-out infinite;
}

.cubo .flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: flicker 1.6s ease-in-out infinite;
}
.cubo .f1 { animation-duration: 1.3s; }
.cubo .f2 { animation-duration: 1.7s; animation-delay: -0.4s; }
.cubo .f3 { animation-duration: 1.5s; animation-delay: -0.9s; }
.cubo .f4 { animation-duration: 2.1s; animation-delay: -0.2s; transform-origin: 100% 100%; }
.cubo .f5 { animation-duration: 1.9s; animation-delay: -1.1s; transform-origin: 0% 100%; }
.cubo .f6 { animation-duration: 1.8s; animation-delay: -0.6s; transform-origin: 100% 0%; }
.cubo .f7 { animation-duration: 1.4s; animation-delay: -1.3s; transform-origin: 0% 0%; }

@keyframes flicker {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.95; }
  35%      { transform: scale(1.12, 1.22) rotate(-2deg); opacity: 0.75; }
  70%      { transform: scale(0.92, 0.9) rotate(2deg); opacity: 1; }
}

@keyframes ember-pulse {
  0%, 100% { opacity: 0.38; }
  50%      { opacity: 0.6; }
}

.kicker {
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
  margin-bottom: 1rem;
}

h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.6rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.015em;
}

.lede {
  margin-top: 1.2rem;
  max-width: 38rem;
  color: var(--ink-dim);
  font-size: 1.08rem;
}

/* --- CTA --------------------------------------------------------------- */

.cta { margin-top: 2.4rem; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy-0);
  background: #fff;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 12px 40px -12px rgba(155, 42, 255, 0.55);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 16px 48px -12px rgba(211, 9, 113, 0.65);
}
.btn-primary .g-mark { width: 1.15rem; height: 1.15rem; }

.cta-note { margin-top: 0.7rem; font-size: 0.85rem; color: var(--ink-dim); }

.btn-ghost {
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid var(--card-line);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.btn-ghost:hover { border-color: var(--blue); background: rgba(34, 173, 246, 0.08); }

/* --- Peek cards --------------------------------------------------------- */

.peek {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  padding: 2.5rem clamp(1.2rem, 5vw, 4rem);
  max-width: 72rem;
}

.peek-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
  backdrop-filter: blur(6px);
  overflow: hidden;
}
.peek-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--gradient);
  opacity: 0.9;
}
.peek-card h3 { font-size: 1.02rem; margin-bottom: 0.4rem; letter-spacing: 0.01em; }
.peek-card p { color: var(--ink-dim); font-size: 0.92rem; }

.soon {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 0.4rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: rgba(34, 173, 246, 0.14);
  color: var(--blue);
}
.is-soon { opacity: 0.85; }

/* --- Footer / error ------------------------------------------------------ */

.foot {
  margin-top: auto;
  padding: 2rem clamp(1.2rem, 5vw, 4rem);
  color: var(--ink-dim);
  font-size: 0.82rem;
  border-top: 1px solid rgba(120, 130, 255, 0.1);
}

.error-page { display: grid; place-items: center; padding: 4rem 1rem; }
.error-page .card {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 14px;
  padding: 2.2rem 2.6rem;
  max-width: 28rem;
  text-align: center;
}
.error-page h1 {
  font-size: 2.6rem;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.6rem;
}
.error-page a { color: var(--blue); }

/* --- Fleet dashboard ----------------------------------------------------- */

.fleet {
  padding: 1.5rem clamp(1.2rem, 5vw, 4rem) 2rem;
  max-width: 90rem;
  width: 100%;
}

.fleet-status { color: var(--ink-dim); font-size: 0.95rem; padding: 0.5rem 0 1rem; }

.section { margin-bottom: 2.4rem; }
.section h2 {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 0.9rem;
}

.empty { color: var(--ink-dim); font-size: 0.92rem; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  gap: 1rem;
}

.fleet-card {
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  backdrop-filter: blur(6px);
  position: relative;
  overflow: hidden;
}
.fleet-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--gradient);
  opacity: 0.9;
}

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.55rem;
}
.card-head h3 { font-size: 1.02rem; overflow-wrap: anywhere; }

.mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85em; }
.dim { color: var(--ink-dim); }

.run-id {
  display: block;
  color: var(--ink-dim);
  font-size: 0.72rem;
  margin-bottom: 0.7rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meta-row {
  display: flex;
  gap: 0.8rem;
  padding: 0.22rem 0;
  font-size: 0.88rem;
  border-top: 1px solid rgba(120, 130, 255, 0.08);
}
.meta-row:first-of-type { border-top: none; }
.meta-label {
  flex: 0 0 5.2rem;
  color: var(--ink-dim);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-top: 0.12rem;
}
.meta-value { overflow-wrap: anywhere; }
.meta-value a { color: var(--blue); text-decoration: none; }
.meta-value a:hover { text-decoration: underline; }

.badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-ok   { background: rgba(62, 230, 160, 0.14); color: #3ee6a0; }
.badge-info { background: rgba(34, 173, 246, 0.14); color: var(--blue); }
.badge-warn { background: rgba(245, 194, 107, 0.14); color: #f5c26b; }
.badge-err  { background: rgba(211, 9, 113, 0.16); color: #ff5ea8; }

.spec-link { color: var(--ink); text-decoration: none; border-bottom: 1px solid rgba(34, 173, 246, 0.45); }
.spec-link:hover { color: var(--blue); }

.table-wrap { overflow-x: auto; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: 12px;
  overflow: hidden;
}
.data-table th {
  text-align: left;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  font-weight: 600;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--card-line);
  white-space: nowrap;
}
.data-table td {
  padding: 0.55rem 0.9rem;
  border-bottom: 1px solid rgba(120, 130, 255, 0.08);
  vertical-align: top;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: rgba(34, 173, 246, 0.05); }

.node-groups { margin-top: 0.7rem; }
.node-group { margin-top: 0.35rem; }
.node-group summary {
  cursor: pointer;
  font-size: 0.88rem;
  padding: 0.3rem 0;
  list-style-position: outside;
}
.node-group summary:hover { color: var(--blue); }
.node-group .data-table { margin: 0.4rem 0 0.6rem; font-size: 0.8rem; }

/* --- Spec README page ----------------------------------------------------- */

.spec-main {
  /* Card content lands at ~GitHub README width (~1010px) on desktop;
     full-bleed minus small gutters on mobile. */
  padding: 1.5rem clamp(0.8rem, 4vw, 2rem) 2rem;
  max-width: 72rem;
  width: 100%;
  margin: 0 auto;
}

/* The README renders in a white reading card (GitHub-light palette) on the
   dark page chrome — optimized for sustained reading, not brand atmosphere. */
.markdown-body {
  background: #ffffff;
  color: #1f2328;
  border-radius: 14px;
  padding: clamp(1.4rem, 4vw, 2.8rem);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 18px 50px -18px rgba(0, 0, 0, 0.6);
  font-size: 1rem;
  line-height: 1.65;
}
.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child { margin-bottom: 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3, .markdown-body h4 {
  margin: 1.5em 0 0.6em;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #1f2328;
}
.markdown-body h1 { font-size: 1.8rem; padding-bottom: 0.35em; border-bottom: 1px solid #d8dee4; }
.markdown-body h2 { font-size: 1.35rem; padding-bottom: 0.3em; border-bottom: 1px solid #e6e9ee; }
.markdown-body h3 { font-size: 1.1rem; }
.markdown-body p, .markdown-body ul, .markdown-body ol, .markdown-body blockquote { margin: 0.8em 0; }
.markdown-body ul, .markdown-body ol { padding-left: 1.7em; }
.markdown-body li + li { margin-top: 0.3em; }
.markdown-body a { color: #0969da; text-decoration: none; }
.markdown-body a:hover { text-decoration: underline; }
.markdown-body strong { font-weight: 650; }
.markdown-body code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: #f0f2f5;
  border-radius: 6px;
  padding: 0.15em 0.4em;
  color: #1f2328;
}
.markdown-body pre {
  background: #f6f8fa;
  border: 1px solid #e6e9ee;
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  overflow-x: auto;
  margin: 0.9em 0;
}
.markdown-body pre code { background: none; border: none; padding: 0; font-size: 0.84rem; line-height: 1.55; }
.markdown-body blockquote {
  border-left: 3px solid #d0d7de;
  padding: 0.1em 0 0.1em 1em;
  color: #59636e;
}
.markdown-body table {
  border-collapse: collapse;
  margin: 0.9em 0;
  display: block;
  overflow-x: auto;
  max-width: 100%;
}
.markdown-body th, .markdown-body td {
  border: 1px solid #d8dee4;
  padding: 0.45rem 0.8rem;
  font-size: 0.9rem;
}
.markdown-body th { background: #f6f8fa; font-weight: 600; }
.markdown-body tbody tr:nth-child(2n) { background: #fafbfc; }
.markdown-body hr { border: none; border-top: 1px solid #d8dee4; margin: 1.6em 0; }
.markdown-body img { max-width: 100%; }

/* --- Reveal animation ----------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}
.reveal:nth-of-type(2) { animation-delay: 0.08s; }
.reveal:nth-of-type(3) { animation-delay: 0.16s; }
.reveal:nth-of-type(4) { animation-delay: 0.24s; }
.reveal:nth-of-type(5) { animation-delay: 0.32s; }

.hero .reveal:nth-child(1) { animation-delay: 0.05s; }
.hero .reveal:nth-child(2) { animation-delay: 0.14s; }
.hero .reveal:nth-child(3) { animation-delay: 0.23s; }
.hero .reveal:nth-child(4) { animation-delay: 0.32s; }

@keyframes rise {
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
  .bg-glow { animation: none; }
  .cubo .flame, .cubo .ember { animation: none; }
}