/* PANOPT's public pages in the Situation Monitor's look.

   Loaded after each page's own <style>: it changes the look, never the
   words. Tokens are the Monitor's (src/ui/instrument.jsx): flat panels on
   the void, 1 px rules, 2 px corners, mono section heads; violet for brand
   and links, amber only for late or paused states. */

:root {
  color-scheme: dark;     /* dark-only pages: scrollbars and form controls follow */
  --bg: #05070e; --bg0: #05070e; --bg1: #0a0e1b; --bg2: #0a0e1b; --bg3: #10162a;
  --ink: #eef0f7; --t0: #ffffff; --t1: #eef0f7; --text: #c3c9ea; --t2: #c3c9ea;
  --muted: #8d93ab; --t3: #8d93ab; --dim: #7d839c;
  --line: #1a2034; --ln0: #1a2034; --ln1: #2a3150; --ln2: rgba(167, 139, 250, .38);
  --link: #c4b5fd; --acc2: #a78bfa;
  --mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
}

/* The header: the Monitor's bar, fixed, a violet wash over the panel with
   the wordmark at its left. */
html { scroll-padding-top: 68px; overflow-x: clip; }
body { padding-top: calc(52px + 2.4rem) !important; }
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 20;
  background: linear-gradient(90deg, rgba(139, 92, 246, .14), rgba(139, 92, 246, 0) 40%), #0a0e1b;
  border-bottom: 1px solid #1a2034;
}
.mast {
  position: fixed !important; top: 13px; left: 18px; z-index: 21; margin: 0 !important;
}
.mast img { width: 26px !important; height: 26px !important; }
.mast .name { font-size: .875rem !important; letter-spacing: .18em !important; color: var(--ink) !important; }
.mast .name em { color: #a78bfa !important; }

/* Headings: the display face at the Monitor's weight; section heads in mono
   capitals over a hairline, as the Monitor heads its panels. */
h1 { font-weight: 600 !important; letter-spacing: -.018em !important; }
h2 {
  font: 600 .72rem/1.35 var(--mono) !important; letter-spacing: .18em !important; text-transform: uppercase;
  color: var(--text) !important; margin: 2.6rem 0 1rem !important; padding-top: 1.1rem; border-top: 1px solid var(--line);
}
h2 time { letter-spacing: .06em; text-transform: none; }

a { color: var(--link); }
a:hover { color: #ffffff; }

/* Panels and buttons: square, flat, ruled */
.box, .card, .plan, .latency, .tablewrap, .index a, .stamp, .plan .tag .badge { border-radius: 2px !important; }
.box, .card, .plan, .tablewrap { background: #0a0e1b !important; border-color: #1a2034 !important; }
.box.unknown { background: rgba(224, 165, 58, .07) !important; border-color: rgba(224, 165, 58, .45) !important; }
.plan.feature {
  box-shadow: none !important; border-color: rgba(167, 139, 250, .38) !important;
  background: linear-gradient(180deg, rgba(139, 92, 246, .10), #0a0e1b 62%) !important;
}
.latency { background: #0a0e1b !important; }
thead th { background: #10162a !important; }
.cta {
  border-radius: 2px !important; font: 600 .68rem/1 var(--mono) !important; letter-spacing: .12em !important;
  text-transform: uppercase; padding: .8rem 1.1rem !important; box-shadow: none !important;
}
.cta.primary, a.cta:not(.ghost):not(.dead) { background: #7c3aed !important; color: #ffffff !important; }
.cta.primary:hover, a.cta:not(.ghost):not(.dead):hover { background: #8b5cf6 !important; filter: none !important; }
.cta.ghost { border-color: #2a3150 !important; }
.note { border-left-color: #e0a53a; }

/* Sign-up: a link at the right of the bar, and the band under a ledger's summary */
.topjoin {
  position: fixed; top: 11px; right: 18px; z-index: 21; font: 600 .66rem/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; color: #ffffff !important; background: #7c3aed; border-radius: 2px;
  padding: .62rem .8rem; text-decoration: none; white-space: nowrap;
}
.topjoin:hover { background: #8b5cf6; }

/* The bar's links, right of the wordmark: the ledgers, the method and pricing. Phones keep the
   in-page links and the footer (the bar has no room). */
.topnav {
  position: fixed; top: 0; left: 148px; height: 52px; z-index: 21; display: flex; align-items: center; gap: .1rem;
}
.topnav a {
  font: 600 .66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text) !important;
  text-decoration: none; padding: .7rem .6rem; border-radius: 2px;
}
.topnav a:hover { color: #ffffff !important; background: rgba(167, 139, 250, .1); }
.topnav a[aria-current="page"] { color: #c4b5fd !important; box-shadow: inset 0 -2px 0 #a78bfa; border-radius: 0; }
@media (max-width: 760px) { .topnav { display: none; } }

/* One footer on every page; its links tall enough to tap */
.foot { margin-top: 2.6rem !important; padding-top: 1.1rem; border-top: 1px solid var(--line); line-height: 2; }
.foot a { display: inline-block; padding: .3rem 0; line-height: 1.4; }

/* Evidence grades: outlined, as on the ledgers (the method page filled them) */
.grade[style*="--gc"] { background: transparent !important; color: var(--gc) !important; border: 1px solid var(--gc); }

/* Number tiles, the Monitor's (src/ui/instrument.jsx .in-tiles), sized for a page */
.in-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 6px; margin: 1rem 0 0; }
.in-tile {
  padding: .75rem .9rem; border-radius: 2px; background: #10162a; border: 1px solid #2a3150;
  border-top-color: rgba(167, 139, 250, .5); min-width: 0;
}
.in-tile b {
  display: block; font: 600 2.2rem/1.05 'Space Grotesk', system-ui, sans-serif; color: #ffffff;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap;
}
.in-tile b small { font: 500 .72rem/1 var(--mono); color: var(--dim); margin-left: .35rem; letter-spacing: 0; }
.in-tile span { display: block; margin-top: .45rem; font-size: .84rem; line-height: 1.4; color: var(--ink); }
.in-tile i { display: block; margin-top: .2rem; font: 400 .72rem/1.4 var(--mono); font-style: normal; color: var(--muted); }
@media (max-width: 560px) {
  .in-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .in-tile b { font-size: 1.7rem; }
}
.join {
  display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; margin: 1.4rem 0 0; padding: 1rem 1.1rem;
  border: 1px solid rgba(167, 139, 250, .38); border-radius: 2px;
  background: linear-gradient(90deg, rgba(139, 92, 246, .10), #0a0e1b 70%);
}
.join p { margin: 0; flex: 1 1 22rem; min-width: 0; }
.join p b { color: var(--ink); }
.join .cta { display: inline-block; text-decoration: none; white-space: nowrap; }

@media (max-width: 560px) {
  body { padding-top: calc(52px + 1.6rem) !important; }
  .mast { left: 14px; }
  .topjoin { right: 14px; }
}
@media print {
  body::before, .topjoin, .topnav, .join { display: none; }
  .mast { position: static !important; margin: 0 0 1.5rem !important; }
  body { padding-top: 0 !important; }
}