/* Heimdall — polar-night instrument
   Scandinavian minimalism × techno futurism.
   Two-colour semantics: glacial cyan = the watch / system / clear,
   signal amber = trains / blockages / alert.  (fire & ice) */

:root {
  --ground:   #0A0D13;   /* polar night, cold blue-graphite */
  --surface:  #0E121A;
  --surface-2:#12171F;
  --text:     #E7ECF1;   /* ice */
  --dim:      #5E6A79;    /* cold slate */
  --faint:    #333C49;

  --cyan:     #74E0D0;    /* glacial — the watch */
  --cyan-deep:#2D6B65;
  --amber:    #ECA24E;    /* signal lamp — the trains */
  --amber-deep:#6E4D26;

  --hair:        rgba(231,236,241,.07);
  --hair-strong: rgba(231,236,241,.13);

  --display: "Familjen Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --maxw: 1100px;
  --pad: clamp(20px, 5vw, 48px);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* faint cold vignette + a hair of grain-free atmosphere */
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(116,224,208,.045), transparent 60%);
  min-height: 100vh;
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; }

/* ---- Bifröst (the bridge Heimdall guards) -------------------------------- */
.bifrost {
  position: sticky; top: 0; z-index: 11;
  height: 2px; width: 100%;
  background: linear-gradient(90deg,
    var(--cyan) 0%, #6FB8E6 32%, #8C8CE8 50%, #C98CD0 64%, var(--amber) 100%);
  opacity: .85;
}

/* ---- masthead ------------------------------------------------------------ */
.masthead {
  position: sticky; top: 2px; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad);
  border-bottom: 1px solid var(--hair);
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  backdrop-filter: blur(10px);
}
.wordmark { display: flex; align-items: center; gap: 14px; }
.rune {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--hair-strong); border-radius: 7px;
  color: var(--cyan); font-size: 22px; line-height: 1;
  box-shadow: inset 0 0 18px rgba(116,224,208,.08);
}
.wordmark-text { display: flex; flex-direction: column; }
.name { font-weight: 700; letter-spacing: .22em; font-size: 15px; }
.tagline { color: var(--dim); font-size: 12px; letter-spacing: .01em; }

.link {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim);
}
.link-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); transition: background .3s, box-shadow .3s; }
.link[data-state="live"] { color: var(--cyan); }
.link[data-state="live"] .link-dot { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.link[data-state="down"] { color: var(--amber); }
.link[data-state="down"] .link-dot { background: var(--amber); }
/* preview: detector not installed yet — neutral slate, not an error */
.link[data-state="preview"] { color: var(--dim); }
.link[data-state="preview"] .link-dot { background: var(--dim); box-shadow: 0 0 8px rgba(94,106,121,.6); }

/* ---- preview notice (shown when HEIMDALL_LIVE is false) ------------------- */
.notice {
  position: relative;
  border-bottom: 1px solid var(--hair-strong);
  background:
    radial-gradient(120% 200% at 0% 0%, rgba(236,162,78,.10), transparent 60%),
    var(--surface);
}
.notice::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--amber); opacity: .85;
}
.notice-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 14px var(--pad);
  display: flex; align-items: flex-start; gap: 14px;
}
.notice-rune {
  flex: none; width: 26px; height: 26px; margin-top: 1px;
  display: grid; place-items: center;
  border: 1px solid var(--hair-strong); border-radius: 6px;
  color: var(--amber); font-size: 15px; line-height: 1;
}
.notice-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--dim); max-width: 92ch; }
.notice-text strong { color: var(--text); font-weight: 600; }

/* ---- layout -------------------------------------------------------------- */
main {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(28px, 6vw, 64px) var(--pad) 40px;
  display: flex; flex-direction: column;
  gap: clamp(36px, 6vw, 60px);
}

/* ---- hero / watch -------------------------------------------------------- */
.watch {
  display: grid;
  grid-template-columns: minmax(260px, 380px) 1fr;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
}
.signal { display: grid; place-items: center; }
.signal canvas { width: 100%; max-width: 380px; height: auto; display: block; }

.eyebrow {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 18px; padding: 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--dim);
}
.eyebrow-tick { width: 8px; height: 8px; background: var(--cyan); }
.watch[data-state="blocked"] .eyebrow-tick { background: var(--amber); }
.watch[data-state="offline"] .eyebrow-tick { background: var(--dim); }

.state {
  margin: 0; font-weight: 700;
  font-size: clamp(38px, 7vw, 66px); line-height: .98;
  letter-spacing: -.02em;
}
.watch[data-state="clear"]   .state { color: var(--text); }
.watch[data-state="blocked"] .state { color: var(--amber); text-shadow: 0 0 36px rgba(236,162,78,.28); }
.watch[data-state="offline"] .state { color: var(--dim); }

.state-detail { margin: 16px 0 0; color: var(--dim); font-size: 16px; max-width: 46ch; }

.readout-rows {
  display: flex; gap: 0; margin-top: 30px;
  border-top: 1px solid var(--hair);
}
.rr { flex: 1; padding: 18px 22px 4px 0; display: flex; flex-direction: column; gap: 6px; }
.rr + .rr { padding-left: 22px; border-left: 1px solid var(--hair); }
.rr-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.rr-value { font-size: 23px; font-weight: 500; }
.watch[data-state="blocked"] #primary-value { color: var(--amber); }

/* ---- acoustic trace ("what Heimdall hears") ------------------------------ */
.trace-lane { display: flex; flex-direction: column; gap: 12px; }
.trace-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.trace-head .eyebrow { margin: 0; }
#trace { width: 100%; height: 76px; display: block; }

/* ---- metrics ------------------------------------------------------------- */
.metrics {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
}
.metric { padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.metric + .metric { border-left: 1px solid var(--hair); }
.metric-value { font-size: 30px; font-weight: 500; letter-spacing: -.01em; }
.metric-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }

/* ---- blocks (card-less, hairline-led) ------------------------------------ */
.block { display: flex; flex-direction: column; gap: 20px; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.block-head h2 { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: .01em; }
.block-note { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.chart { width: 100%; overflow-x: auto; }
.chart svg { display: block; width: 100%; height: auto; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 56px); }

/* ---- SVG chart theming --------------------------------------------------- */
.bar-blocked { fill: var(--amber); }
.bar-track   { fill: var(--surface-2); }
.hbar        { fill: var(--amber); }
.axis-line   { stroke: var(--hair-strong); stroke-width: 1; }
.axis-text   { fill: var(--dim); font-family: var(--mono); font-size: 10px; letter-spacing: .04em; }
.empty { color: var(--dim); font-family: var(--mono); font-size: 12px; letter-spacing: .04em; padding: 30px 2px; }

/* ---- event lanes (daily rhythm) ------------------------------------------ */
.lane-label { fill: var(--dim); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; }

/* ---- subscribe CTA ------------------------------------------------------- */
.subscribe {
  display: grid; grid-template-columns: 1fr auto; gap: clamp(20px, 4vw, 44px);
  align-items: center;
  padding: clamp(22px, 4vw, 32px);
  border: 1px solid color-mix(in srgb, var(--cyan) 28%, var(--border));
  border-radius: 16px;
  background:
    radial-gradient(130% 120% at 0% 0%, rgba(116,224,208,.07), transparent 55%),
    var(--bg-panel);
}
.subscribe h2 { margin: 0 0 10px; font-size: clamp(20px, 3vw, 26px); font-weight: 700; letter-spacing: -.01em; }
.subscribe-text { margin: 0 0 20px; color: var(--dim); font-size: 15px; max-width: 56ch; }
.subscribe-btn {
  display: inline-block; font-family: var(--mono); font-size: 13px; letter-spacing: .04em;
  color: var(--ground); background: var(--cyan); border-radius: 8px;
  padding: 12px 20px; font-weight: 600;
  transition: transform .12s ease, box-shadow .2s ease;
  box-shadow: 0 0 0 rgba(116,224,208,0);
}
.subscribe-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(116,224,208,.22); }
.subscribe-count { margin: 14px 0 0; color: var(--faint); font-size: 12px; letter-spacing: .04em; }
.subscribe-qr {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: #fff; padding: 14px; border-radius: 12px;
}
.subscribe-qr img { display: block; width: 132px; height: 132px; image-rendering: pixelated; }
.subscribe-qr figcaption { color: #5b6675; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }

@media (max-width: 620px) {
  .subscribe { grid-template-columns: 1fr; justify-items: start; }
  .subscribe-qr { justify-self: center; }
}

/* ---- footer -------------------------------------------------------------- */
.footer {
  max-width: var(--maxw); margin: 0 auto; width: 100%;
  padding: 22px var(--pad) 40px;
  display: flex; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--hair);
  color: var(--faint); font-size: 11px; letter-spacing: .08em;
}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 760px) {
  .watch { grid-template-columns: 1fr; }
  .signal { order: -1; }
  .signal canvas { max-width: 300px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric:nth-child(3) { border-left: none; }
  .metric:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .split { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}