/* THERMITE — core
 *
 * The palette is a temperature ramp and it carries meaning: cold steel for
 * anything waiting, oxide red for anything about to react, ember and pour for
 * work in progress, white-hot at the moment of linking, quenched cyan for a
 * finished ingot. Nothing is coloured for decoration.
 */

@font-face { font-family: 'ArchivoLocal'; src: local('Archivo'); font-display: swap; }

:root {
  /* --- the ramp ------------------------------------------------------- */
  --slag:      #0a0b0d;
  --iron:      #101317;
  --panel:     #161a20;
  --raised:    #1d222a;
  --ash:       #262c35;
  --rule:      #333a45;
  --scale:     #78828f;   /* cold labels */
  --steel:     #b6bfcb;   /* body */
  --bright:    #e9eef5;   /* headings */

  --oxide:     #b8390d;
  --ember:     #ff5f1f;
  --pour:      #ffa317;
  --whitehot:  #ffe6bd;
  --quench:    #2fd9bd;
  --fault:     #ff3f52;

  /* --- type ----------------------------------------------------------- */
  --display: 'Archivo', 'ArchivoLocal', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --rig-h: 56px;

  /* --- radius scale ---------------------------------------------------
     A scale, not a blanket value. Controls are pills because they are
     things you press; surfaces are softly rounded because they are things
     you read; the tiny diamond markers stay sharp, because they are the
     one bit of the foundry vernacular that should not be softened. */
  --r-xs:   7px;    /* code chips, inline pips */
  --r-sm:  10px;    /* inputs, log view, small panes */
  --r-md:  14px;    /* cards, sheets, dialogs, terminals */
  --r-lg:  20px;    /* station panels, drawers, large surfaces */
  --r-pill: 999px;  /* every button, tag, filter and toggle */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-in: cubic-bezier(.55,.06,.68,.19);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--slag);
  color: var(--steel);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body[data-mode='furnace'] { overflow: hidden; }

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 118%;
  letter-spacing: -0.02em;
  color: var(--bright);
  margin: 0;
  text-wrap: balance;
}

a { color: var(--pour); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--whitehot); }

:focus-visible {
  outline: 2px solid var(--pour);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--oxide); color: var(--whitehot); }

/* --- ambient layers --------------------------------------------------- */

#deck {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

#grain {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none;
  opacity: .035;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* --- rig (top bar) ----------------------------------------------------- */

.rig {
  position: fixed; top: 0; left: 0; right: 0; height: var(--rig-h);
  z-index: 60;
  display: flex; align-items: center; gap: 14px;
  flex-wrap: nowrap;
  padding: 0 clamp(16px, 3vw, 28px);
  background: linear-gradient(180deg, rgba(10,11,13,.94), rgba(10,11,13,.55) 70%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(51,58,69,.5);
}

.rig__mark {
  flex: none; white-space: nowrap;
  font-family: var(--display); font-weight: 900; font-stretch: 125%;
  font-size: 15px; letter-spacing: .16em; color: var(--bright);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 9px;
}
.rig__mark::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ember);
  box-shadow: 0 0 12px var(--ember), 0 0 26px rgba(255,95,31,.4);
  animation: pulse 2.6s var(--ease) infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.rig__spacer { flex: 1 1 0; min-width: 0; }
.rig .btn { flex: none; }

.rig__meter {
  font-family: var(--mono); font-size: 11px; color: var(--scale);
  letter-spacing: .06em; display: flex; align-items: center; gap: 7px;
}
.rig__meter b { color: var(--steel); font-weight: 500; }
.rig__meter[data-thin='true'] b { color: var(--pour); }

.rig__who {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12px; color: var(--steel);
}
.rig__who img {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--rule);
}

/* --- controls ---------------------------------------------------------- */

.btn {
  appearance: none; cursor: pointer;
  font-family: var(--mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 13px 26px;
  color: var(--slag);
  background: linear-gradient(135deg, var(--pour), var(--ember));
  border: 0; border-radius: var(--r-pill);
  position: relative; overflow: hidden;
  transition: transform .18s var(--ease), box-shadow .25s var(--ease), filter .2s;
  box-shadow: 0 0 0 rgba(255,95,31,0), 0 6px 22px rgba(0,0,0,.5);
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 0 26px rgba(255,95,31,.42), 0 8px 26px rgba(0,0,0,.55);
  filter: brightness(1.08);
}
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .35; cursor: not-allowed; filter: grayscale(.7); }

.btn--ghost {
  background: transparent; color: var(--steel);
  border: 1px solid var(--rule); border-radius: var(--r-pill); box-shadow: none;
}
.btn--ghost:hover:not(:disabled) {
  color: var(--bright); border-color: var(--pour); box-shadow: none; filter: none;
}
.btn--quench { background: linear-gradient(135deg, var(--quench), #14a58c); }
.btn--quench:hover:not(:disabled) { box-shadow: 0 0 26px rgba(47,217,189,.35), 0 8px 26px rgba(0,0,0,.55); }

.btn--small { padding: 8px 15px; font-size: 11px; }

.field {
  width: 100%;
  background: var(--iron);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  color: var(--bright);
  font-family: var(--mono); font-size: 13px;
  padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s;
}
.field:focus {
  outline: none; border-color: var(--pour);
  box-shadow: 0 0 0 1px var(--pour), 0 0 22px rgba(255,163,23,.14);
}
.field::placeholder { color: #5b6470; }

.eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--oxide);
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
}
.eyebrow::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--rule), transparent); }

.lede { font-size: 17px; color: var(--steel); max-width: 60ch; text-wrap: pretty; }
.muted { color: var(--scale); font-size: 13.5px; }
.mono { font-family: var(--mono); }

.tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 8px;
  border: 1px solid var(--rule); border-radius: var(--r-pill); color: var(--scale);
}
.tag[data-tone='hot'] { color: var(--pour); border-color: rgba(255,163,23,.4); }
.tag[data-tone='cold'] { color: var(--scale); }
.tag[data-tone='quench'] { color: var(--quench); border-color: rgba(47,217,189,.4); }
.tag[data-tone='fault'] { color: var(--fault); border-color: rgba(255,63,82,.4); }
.tag[data-tone='warm'] { color: var(--ember); border-color: rgba(255,95,31,.4); }

/* --- toasts ------------------------------------------------------------ */

#toasts {
  position: fixed; right: 20px; bottom: 20px; z-index: 200;
  display: flex; flex-direction: column; gap: 10px; max-width: 380px;
}
.toast {
  background: var(--panel); border: 1px solid var(--rule);
  border-left: 3px solid var(--pour);
  padding: 13px 16px; border-radius: var(--r-md);
  font-size: 13.5px; color: var(--steel);
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
  animation: toast-in .3s var(--ease);
}
.toast[data-kind='error'] { border-left-color: var(--fault); }
.toast[data-kind='good'] { border-left-color: var(--quench); }
.toast b { display: block; color: var(--bright); font-family: var(--mono);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; }
@keyframes toast-in { from { opacity: 0; transform: translateX(20px); } }

/* --- the spine ---------------------------------------------------------- */
/* Fixed, full-viewport, and stacked BELOW #descent on purpose: that is what
   makes the channel disappear behind a station panel and re-emerge past it. */

#spine {
  position: fixed; inset: 0; z-index: 5;      /* below the stations */
  pointer-events: none;
  overflow: visible;
}

/* The same thread, ghosted, ABOVE the content. Without this the line simply
   vanishes behind a panel; with it, you can see it running underneath, which
   is what makes the descent read as travelling along one continuous thread. */
#spine-ghost {
  position: fixed; inset: 0; z-index: 11;     /* above the stations */
  pointer-events: none;
  overflow: visible;
  mix-blend-mode: screen;
}
.spine__ghost {
  fill: none; stroke: #6f7b8c; stroke-width: 2;
  stroke-linecap: round; opacity: .16;
}
.spine__ghost-hot {
  fill: none; stroke: var(--ember); stroke-width: 2.5;
  stroke-linecap: round; opacity: .22;
  filter: blur(1.5px);
}

/* Outer strands: the thread braids and separates as it descends. */
.spine__strand {
  fill: none; stroke: var(--ash); stroke-width: 1;
  stroke-linecap: round; opacity: .5;
}

.spine__channel {
  fill: none; stroke: var(--ash); stroke-width: 2;
  stroke-linecap: round;
}
.spine__molten {
  fill: none; stroke-width: 3.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 9px rgba(255, 95, 31, .45));
}
.spine__crest {
  fill: none; stroke: var(--whitehot); stroke-width: 1.6;
  stroke-linecap: round; opacity: .55;
  filter: drop-shadow(0 0 12px rgba(255, 214, 150, .7));
}

.spine__halo { fill: var(--ember); opacity: .5; }
.spine__core { fill: var(--whitehot); }
.spine__head { transition: opacity .3s var(--ease); }

/* Navigation lives on the line itself: tapping points off the channel. */
.spine__nodes { pointer-events: none; }
.spine__node { pointer-events: auto; cursor: pointer; }
.spine__node .node__ring {
  fill: var(--slag); stroke: var(--rule); stroke-width: 1.5;
  transition: stroke .3s var(--ease), fill .3s var(--ease);
}
.spine__node .node__pip {
  fill: var(--rule);
  transition: fill .3s var(--ease), r .3s var(--ease);
}
.spine__node .node__label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; fill: var(--scale);
  transition: fill .3s var(--ease), opacity .3s var(--ease);
  opacity: 0;
}
.spine__node:hover .node__label,
.spine__node:focus-visible .node__label,
.spine__node[data-state='active'] .node__label { opacity: 1; }

.spine__node[data-state='ready'] .node__ring { stroke: #495260; }
.spine__node[data-state='done'] .node__ring { stroke: var(--quench); }
.spine__node[data-state='done'] .node__pip { fill: var(--quench); }
.spine__node[data-state='done'] .node__label { fill: var(--steel); }
.spine__node[data-state='active'] .node__ring {
  stroke: var(--pour); fill: #1a1408;
  filter: drop-shadow(0 0 10px rgba(255, 163, 23, .7));
}
.spine__node[data-state='active'] .node__pip { fill: var(--pour); r: 5; }
.spine__node[data-state='active'] .node__label { fill: var(--pour); }
.spine__node[data-state='locked'] { opacity: .4; cursor: not-allowed; }
.spine__node:focus-visible .node__ring { stroke: var(--pour); }
.spine__node:focus { outline: none; }

body[data-mode='furnace'] #spine, body[data-mode='furnace'] #spine-ghost,
body[data-mode='manual'] #spine,  body[data-mode='manual'] #spine-ghost,
body[data-mode='terms'] #spine,   body[data-mode='terms'] #spine-ghost {
  opacity: 0; transition: opacity .3s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .spine__crest, .spine__head { display: none; }
}

/* --- utility ----------------------------------------------------------- */

.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.spinner {
  display: inline-block; width: 13px; height: 13px;
  border: 1.5px solid var(--rule); border-top-color: var(--pour);
  border-radius: 50%; animation: spin .7s linear infinite;
  vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Below this the rate meter is the first thing worth dropping — it is
   diagnostic, and the Terms button is not. */
@media (max-width: 760px) {
  .rig__meter { display: none; }
  .rig__mark { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}