/* Blueprint palette. This site is a stand-in and should look like one: the page
   regions are drawn as labelled placeholders, and the only thing rendered in
   full detail is the mechanism the demo is about. Amber always means "the
   identifier and the things that carry it", here and in the console. */

:root {
  --bg: #0F1216;
  --surface: #161A20;
  --sunken: #1C212A;
  --ink: #E6E8EE;
  --muted: #8A93A3;
  --faint: #5C6473;
  --line: #262C35;
  --accent: #4FBEC7;
  --signal: #E3A653;
  --ok: #57C98A;
  --off: #6E7787;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
  padding-bottom: 160px;
}

a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.mono { font-family: var(--mono); }

/* ---------------------------------------------------------------- header */

header {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 13px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.brand { font-weight: 800; font-size: 19px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.brand span { color: var(--accent); }

.standin {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  border: 1px dashed rgba(227, 166, 83, .5);
  border-radius: 3px;
  padding: 3px 7px;
  white-space: nowrap;
}

header nav { display: flex; gap: 16px; margin-right: auto; }
header nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
header nav a[aria-current] { color: var(--ink); }

.account { display: flex; align-items: center; gap: 10px; }
.who { font-size: 13px; color: var(--muted); font-family: var(--mono); }
.who em { font-style: normal; color: var(--ink); }

.btn {
  display: inline-block;
  background: var(--accent);
  color: #06201F;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 8px 15px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}
.btn.ghost { background: transparent; color: var(--muted); border-color: var(--line); font-weight: 500; }
.btn.big { padding: 12px 22px; font-size: 15px; }

/* ---------------------------------------------------------------- layout */

main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 20px 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: 28px;
  align-items: start;
}

@media (max-width: 860px) {
  main { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

h1 { font-size: 26px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 6px; }
.sub { color: var(--muted); margin: 0 0 22px; font-size: 15px; max-width: 52ch; }

/* The one thing on this page that is not a wireframe, because it is the one thing
   a player is meant to act on. */
.cta {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(79,190,199,.10), rgba(79,190,199,.03));
  border: 1px solid rgba(79,190,199,.35);
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 22px;
}
.cta > div { flex: 1 1 260px; }
.cta h2 { margin: 0 0 5px; font-size: 18px; letter-spacing: -0.01em; }
.cta p { margin: 0; font-size: 14px; color: var(--muted); }
.cta .btn { white-space: nowrap; }

/* ---------------------------------------------------------------- wireframe */

.wire {
  border: 1px dashed var(--line);
  border-radius: 8px;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.012) 0 8px,
      transparent 8px 16px);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 14px;
}

.wire > .wlabel {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.bars { display: flex; flex-direction: column; gap: 9px; }
.bar { height: 12px; border-radius: 3px; background: var(--sunken); }
.bar.w80 { width: 80%; } .bar.w60 { width: 60%; } .bar.w45 { width: 45%; } .bar.w30 { width: 30%; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.cell {
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  background: var(--sunken);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--faint);
}

.rows { display: flex; flex-direction: column; gap: 8px; }
.rowline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px 13px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
}
.rowline b { color: var(--muted); font-weight: 500; }

/* ---------------------------------------------------------------- mechanism panel */

.mech {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
  position: sticky;
  top: 20px;
}

.mech h2 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  margin: 0;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--sunken);
}

.mech .block { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.mech .block:last-child { border-bottom: 0; }

.state { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; }
.state + .state { margin-top: 10px; }
.state .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--muted); }
.state .v { font-weight: 600; font-size: 13px; }
.state .v.on { color: var(--ok); }
.state .v.off { color: var(--off); }

.payload {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.7;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px;
  margin: 10px 0 0;
  overflow-x: auto;
  color: var(--muted);
  white-space: pre;
}
.payload .key { color: var(--faint); }
.payload .val { color: var(--signal); }
.payload .none { color: var(--faint); font-style: italic; }

.blocknote { font-size: 12px; color: var(--faint); margin: 10px 0 0; line-height: 1.5; }

.beacon {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
}
.beacon .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--line);
  flex: none;
}
.beacon.fired .dot { background: var(--signal); box-shadow: 0 0 0 4px rgba(227,166,83,.16); }
.beacon.fired { color: var(--signal); }

@keyframes ping { from { box-shadow: 0 0 0 0 rgba(227,166,83,.5); } to { box-shadow: 0 0 0 12px rgba(227,166,83,0); } }
.beacon.just .dot { animation: ping .9s ease-out; }
@media (prefers-reduced-motion: reduce) { .beacon.just .dot { animation: none; } }

/* ---------------------------------------------------------------- login */

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 26px; }
.loginform { display: flex; flex-direction: column; gap: 15px; max-width: 400px; }
.loginform label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); font-family: var(--mono); letter-spacing: 0.05em; }
.loginform select, .loginform input {
  background: var(--sunken);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 11px 12px;
  font-size: 15px;
  font-family: inherit;
}

code { background: var(--sunken); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; font-family: var(--mono); font-size: 0.88em; }

/* ---------------------------------------------------------------- footer */

footer {
  max-width: 1080px;
  margin: 32px auto 0;
  padding: 20px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 12.5px;
}
footer p { margin: 0 0 6px; }
footer a { color: var(--muted); }

/* ---------------------------------------------------------------- consent */

.consent {
  position: fixed;
  left: 14px; right: 14px; bottom: 14px;
  max-width: 640px;
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 15px 17px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  box-shadow: 0 12px 34px rgba(0,0,0,.5);
}
.consent p { margin: 0; font-size: 13.5px; color: var(--muted); flex: 1 1 240px; }
.consent strong { color: var(--ink); }
.consent form { display: flex; gap: 8px; }