/* WIRE DESK, ported to a standalone page.

   Values are copied from ui/src/styles/theme.css rather than imported: this
   page is a separate deploy target with no build step, and a broken shared
   import would take down the public site to save a duplicated block. */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-latin-wdth-normal.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('fonts/ibm-plex-sans-latin-wdth-normal.woff2') format('woff2-variations');
  font-weight: 100 700;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper-000: #fbf9f5;
  --paper-050: #f2efe9;
  --paper-100: #e9e5dc;
  --paper-200: #d6d1c7;
  --ink-400: #8a8378;
  --ink-600: #57514a;
  --ink-900: #14110f;
  --signal: #c1272d;
  --gate: #1f5c4a;
  --live: #b4690e;
  --display: 'Archivo', system-ui, sans-serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper-000: #1c1815;
    --paper-050: #15120e;
    --paper-100: #262119;
    --paper-200: #3a332a;
    --ink-400: #8a8378;
    --ink-600: #a9a196;
    --ink-900: #f2efe9;
    --signal: #e05a5a;
    --gate: #5fae94;
    --live: #d9a521;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper-050);
  color: var(--ink-900);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* The bar is the only fixed chrome on the page: identity on the left, the one
   action on the right. It stays put so the sign-in link is never more than a
   glance away, however far down the ledger someone has scrolled. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--paper-050) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--paper-200);
}

.topbar-inner {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  text-decoration: none;
}
.wordmark img { display: block; height: 1.4375rem; width: auto; }

.signin {
  flex: none;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  padding: 0.4375rem 0.875rem;
  border: 1px solid var(--ink-900);
  border-radius: 2px;
  color: var(--paper-000);
  background: var(--ink-900);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.signin:hover { opacity: 0.82; text-decoration: none; }

main { max-width: 46rem; margin: 0 auto; padding: 2rem 1.5rem 6rem; }

section { padding: 3rem 0; border-top: 1px solid var(--paper-200); }
section:first-of-type { border-top: 0; }

h1 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 6vw, 3rem);
  font-stretch: 88%;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  text-wrap: balance;
}

h2 {
  font-family: var(--display);
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-400);
  margin: 0 0 0.75rem;
}

p { margin: 0 0 1rem; color: var(--ink-600); }
a { color: var(--ink-900); text-decoration-color: var(--paper-200); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

.data { font-family: var(--mono); font-variant-numeric: tabular-nums; }

table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
caption { caption-side: bottom; padding-top: 1rem; color: var(--ink-400); font-size: 0.8125rem; text-align: left; }
th, td { padding: 0.5rem 0.5rem 0.5rem 0; border-bottom: 1px solid var(--paper-200); text-align: left; }
th {
  font-family: var(--mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-400);
  font-weight: 400;
}
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.failed { color: var(--signal); }

.ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 1.5rem 1rem; }
.ledger div { border-top: 2px solid var(--ink-900); padding-top: 0.5rem; }
.ledger dt { font-size: 0.6875rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-400); }
.ledger dd { margin: 0.25rem 0 0; font-family: var(--mono); font-size: 1.5rem; font-variant-numeric: tabular-nums; }

.wire { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0; list-style: none; }
.wire li { flex: 1 1 7rem; border-top: 2px solid var(--paper-200); padding-top: 0.5rem; font-size: 0.8125rem; }
.wire li.kill { border-top-color: var(--signal); }
.wire li.adversary { border-top-color: var(--live); }
.wire b { display: block; font-family: var(--display); font-weight: 600; }
.wire span { font-family: var(--mono); font-size: 0.6875rem; color: var(--ink-400); }

@media (max-width: 34rem) {
  section { padding: 2rem 0; }
  .topbar-inner { padding: 0.625rem 1rem; }
  main { padding-left: 1rem; padding-right: 1rem; }
}