/* actors.host dashboard. One font (Inter), square corners, cells everywhere. */

:root {
  --bg: #ffffff;
  --surface: #fafaf9;
  --raised: #ededeb;
  --line: #e4e4e1;
  --ink: #0a0a0a;
  --muted: #62625f;
  --accent: #00d95a;
  --accent-text: #007a35;
  --on-accent: #000000;
  --empty: #e9e9e6;
  --second: #1c1c1c;
  --warn: #b76b00;
  --bad: #c62828;
  --faint: #f1f1ef;
  --logo-edge: #c9c9c5;
  --logo-text: #008a3c;
  --game-edge: #e4e4e1;
  /* Shard owners beyond the first two. */
  --n2: #007a35;
  --n3: #8f8f8c;
  --n4: #7deaa9;
  --n5: #c4c4c0;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --surface: #080808;
    --raised: #1a1a1a;
    --line: #262626;
    --ink: #ffffff;
    --muted: #8f8f8f;
    --accent: #00ff66;
    --accent-text: #00ff66;
    --on-accent: #000000;
    --empty: #1f1f1f;
    --second: #e8e8e8;
    --warn: #ffb020;
    --bad: #ff4d4f;
    --faint: #141414;
    --logo-edge: #3a3a3a;
    --logo-text: #00ff66;
    --game-edge: #1f1f1f;
    --n2: #00994d;
    --n3: #8f8f8f;
    --n4: #b3ffd1;
    --n5: #4d4d4d;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #000000;
  --surface: #080808;
  --raised: #1a1a1a;
  --line: #262626;
  --ink: #ffffff;
  --muted: #8f8f8f;
  --accent: #00ff66;
  --accent-text: #00ff66;
  --on-accent: #000000;
  --empty: #1f1f1f;
  --second: #e8e8e8;
  --warn: #ffb020;
  --bad: #ff4d4f;
  --faint: #141414;
  --logo-edge: #3a3a3a;
  --logo-text: #00ff66;
  --game-edge: #1f1f1f;
  --n2: #00994d;
  --n3: #8f8f8f;
  --n4: #b3ffd1;
  --n5: #4d4d4d;
  color-scheme: dark;
}

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

html {
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  font-feature-settings: "tnum" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font-family: inherit;
  border-radius: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.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;
}

.skip {
  position: absolute;
  left: 16px;
  top: -64px;
  padding: 10px 16px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  z-index: 10;
}

.skip:focus {
  top: 16px;
}

/* ---- Logo ---- */

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  flex-shrink: 0;
}

.logo svg {
  display: block;
  flex-shrink: 0;
}

.logo .on {
  fill: var(--accent);
}

.logo .off {
  fill: none;
  stroke: var(--logo-edge);
  stroke-width: 0.5;
}

.logo-word {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
}

.logo-word span:first-child {
  color: var(--logo-text);
}

/* ---- Frame ---- */

.page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.page-main {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

.top {
  height: 88px;
  display: flex;
  align-items: center;
  gap: 48px;
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  gap: 4px;
  flex-grow: 1;
  min-width: 0;
}

.nav a {
  height: 40px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

.nav a:hover {
  color: var(--ink);
}

.nav a[aria-current="page"] {
  font-weight: 700;
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.icon-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}

.icon-btn:hover {
  border-color: var(--muted);
}

.theme-btn .sun {
  display: none;
}

.dark-ui .theme-btn .sun {
  display: block;
}

.dark-ui .theme-btn .moon {
  display: none;
}

.account {
  position: relative;
  flex-shrink: 0;
}

.account > button {
  width: 44px;
  height: 44px;
  background: var(--raised);
  border: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.menu {
  position: absolute;
  right: 0;
  top: 52px;
  min-width: 180px;
  background: var(--surface);
  border: 1px solid var(--line);
  z-index: 5;
}

.menu[hidden] {
  display: none;
}

.menu .who {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.menu button {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.menu button:hover {
  background: var(--raised);
}

.box {
  border: 1px solid var(--line);
  background: var(--surface);
  min-width: 0;
}

.box-head {
  padding: 28px 32px 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.count {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

.muted {
  color: var(--muted);
}

.row2 {
  display: flex;
  gap: 24px;
  align-items: stretch;
}

.grow {
  flex: 1 1 0;
  min-width: 0;
}

.plain {
  list-style: none;
  margin: 0;
  padding: 0;
}

.box-head.flush {
  padding: 0;
}

.stale .live {
  opacity: 0.45;
}

/* ---- Overview: status strip ---- */

.strip {
  display: flex;
  align-items: stretch;
}

.hero {
  width: 300px;
  flex-shrink: 0;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  border-right: 1px solid var(--line);
}

.hero-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sq {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: var(--accent);
}

.sq.warn {
  background: var(--warn);
}

.sq.bad {
  background: var(--bad);
}

.hero-region {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

.hero-word {
  font-size: 52px;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.95;
}

.hero-why {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.stat {
  flex: 1 1 0;
  min-width: 0;
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  border-right: 1px solid var(--line);
}

.stat:last-child {
  border-right: 0;
}

.label {
  font-size: 15px;
  font-weight: 500;
  color: var(--muted);
}

.big {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.big b {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.big span {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

/* ---- Shard map ---- */

.shards {
  width: 512px;
  flex-shrink: 0;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.shards .box-head,
.traffic .box-head {
  padding: 0;
}

.scopes {
  display: flex;
  gap: 4px;
}

.grid32 {
  display: grid;
  grid-template-columns: repeat(32, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  max-width: 446px;
  aspect-ratio: 1;
}

.grid32 i {
  display: block;
  background: var(--empty);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
}

.legend div {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
}

.legend span.muted {
  font-weight: 500;
}

.c0 {
  background: var(--accent) !important;
}
.c1 {
  background: var(--second) !important;
}
.c2 {
  background: var(--n2) !important;
}
.c3 {
  background: var(--n3) !important;
}
.c4 {
  background: var(--n4) !important;
}
.c5 {
  background: var(--n5) !important;
}

/* ---- Charts: columns of cells ---- */

.traffic {
  flex-grow: 1;
  min-width: 0;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.seg {
  display: flex;
  gap: 4px;
}

.seg button {
  height: 32px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.seg button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.chart-head .name {
  font-size: 15px;
  font-weight: 600;
}

.chart-head .val {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.chart-head .val b {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.chart-head .val span {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 94px;
}

.bars > div {
  flex: 1 1 0;
  min-width: 0;
  height: 94px;
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
}

.bars i {
  display: block;
  height: 10px;
  background: var(--faint);
}

.bars i.on {
  background: var(--accent);
}

.bars > div:last-child i.on {
  background: var(--ink);
}

/* ---- Tables ---- */

.thead,
.trow {
  display: grid;
  column-gap: 16px;
  padding: 0 32px;
}

.thead {
  padding-bottom: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.trow {
  align-items: center;
  padding-top: 16px;
  padding-bottom: 16px;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
}

.trow:last-child {
  border-bottom: 0;
}

a.trow:hover {
  background: var(--faint);
}

.trow > div {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.strong {
  font-weight: 700;
}

.nodes .thead,
.nodes .trow {
  grid-template-columns: minmax(0, 1.4fr) 80px 100px minmax(0, 1.8fr) minmax(0, 2fr) 90px 110px minmax(0, 0.8fr);
}

.nodes .trow {
  padding-top: 18px;
  padding-bottom: 18px;
}

.apps .thead,
.apps .trow {
  grid-template-columns: minmax(0, 1fr) 120px 100px 130px 110px;
}

.actors .thead,
.actors .trow {
  grid-template-columns: minmax(0, 1fr) 150px 140px 140px 140px;
}

.who-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.who-cell span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.dot {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  background: var(--accent);
}

.dot.warn {
  background: var(--warn);
}

.dot.bad {
  background: var(--bad);
}

.dot.idle {
  background: var(--muted);
}

.dot.second {
  background: var(--second);
}

.badge {
  height: 24px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 700;
  background: var(--accent);
  color: var(--on-accent);
}

.meter {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.meter > span {
  flex-shrink: 0;
}

/* 20 cells of up to 8 px: they narrow before the figure next to them is cut. */
.cells {
  display: flex;
  gap: 2px;
  flex: 0 1 198px;
  min-width: 40px;
}

.cells i {
  display: block;
  flex: 1 1 0;
  max-width: 8px;
  height: 16px;
  background: var(--empty);
}

.cells i.on {
  background: var(--accent);
}

.cells.warn i.on {
  background: var(--warn);
}

.cells.bad i.on {
  background: var(--bad);
}

.actor-name {
  display: flex;
  gap: 6px;
  min-width: 0;
}

.actor-name span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.empty-row {
  padding: 16px 32px 24px;
  font-size: 15px;
  color: var(--muted);
}

/* ---- Activity ---- */

.activity {
  width: 460px;
  flex-shrink: 0;
}

.event {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 32px;
  border-top: 1px solid var(--line);
}

.event .text {
  flex-grow: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event time {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}

/* ---- Node page ---- */

.node-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}

.node-title {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

.back:hover {
  color: var(--ink);
}

.title-line {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

h1 {
  margin: 0;
  font-size: 64px;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.9;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.title-line .badge {
  height: 30px;
  padding: 0 10px;
  font-size: 14px;
}

.facts {
  display: flex;
  gap: 40px;
  font-size: 15px;
  font-weight: 600;
}

.facts div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.facts span:first-child {
  color: var(--muted);
  font-weight: 500;
}

.gauges {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gauge {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-right: 1px solid var(--line);
  min-width: 0;
}

.gauge:last-child {
  border-right: 0;
}

.gauge .big span {
  white-space: nowrap;
}

.cells25 {
  display: grid;
  grid-template-columns: repeat(25, minmax(0, 1fr));
  gap: 2px;
}

.cells25 i {
  display: block;
  height: 18px;
  background: var(--empty);
}

.cells25 i.on {
  background: var(--accent);
}

.cells25.warn i.on {
  background: var(--warn);
}

.cells25.bad i.on {
  background: var(--bad);
}

.node-charts {
  flex: 1 1 0;
  min-width: 0;
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.limits {
  width: 440px;
  flex-shrink: 0;
}

.limits .box-head {
  padding-bottom: 12px;
}

.kv {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 32px;
  font-size: 15px;
  border-top: 1px solid var(--line);
}

.kv span:first-child {
  font-weight: 500;
  color: var(--muted);
}

.kv span:last-child {
  font-weight: 700;
}

.notice {
  padding: 28px 32px;
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}

/* ---- Sign in ---- */

.signin {
  min-height: 100vh;
  display: flex;
}

.signin-art {
  flex: 1 1 0;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  border-right: 1px solid var(--line);
  min-width: 0;
}

.play {
  display: flex;
  align-items: flex-end;
  gap: 32px;
}

.board {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  outline-offset: 6px;
  display: block;
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 2px;
  width: 278px;
  height: 558px;
}

.board-grid i {
  display: block;
  box-shadow: inset 0 0 0 1px var(--game-edge);
}

.board-grid i.lock {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.board-grid i.live {
  background: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.lines {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lines b {
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
}

.pad {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  width: 92px;
}

.pad button {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}

.pad button:hover {
  border-color: var(--muted);
}

.pad .wide {
  grid-column: span 2;
}

.signin-form {
  width: 560px;
  flex-shrink: 0;
  padding: 48px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.signin-form form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.signin-form h1 {
  margin: 0 0 8px;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field label {
  font-size: 15px;
  font-weight: 600;
}

.field input {
  height: 52px;
  padding: 0 16px;
  font-size: 16px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  outline: none;
}

.field input:focus {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.primary {
  height: 52px;
  margin-top: 8px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  cursor: pointer;
}

.error {
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid var(--bad);
  color: var(--bad);
}

.signin-mobile-logo {
  display: none;
}

/* ---- Narrow screens ---- */

@media (max-width: 1280px) {
  .activity {
    width: 380px;
  }
  .limits {
    width: 360px;
  }
}

@media (max-width: 1100px) {
  .page {
    padding: 0 24px 32px;
    gap: 24px;
  }
  .page-main {
    gap: 24px;
  }
  .top {
    gap: 24px;
  }
  .strip {
    flex-wrap: wrap;
  }
  .hero {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .row2 {
    flex-direction: column;
  }
  .shards,
  .activity,
  .limits {
    width: auto;
  }
  .gauges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gauge:nth-child(2) {
    border-right: 0;
  }
  .gauge:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
  /* Tables become stacked rows, each cell labelled. */
  .thead {
    display: none;
  }
  .nodes .trow,
  .apps .trow,
  .actors .trow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 12px;
  }
  .trow > div[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
  }
  .trow > div:first-child {
    grid-column: 1 / -1;
  }
  .trow > div {
    white-space: normal;
  }
  .node-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .facts div {
    align-items: flex-start;
  }
  .signin-form {
    width: 480px;
    padding: 48px;
  }
}

@media (max-width: 720px) {
  .page {
    padding: 0 16px 24px;
    gap: 16px;
  }
  .page-main {
    gap: 16px;
  }
  .top {
    height: auto;
    padding: 16px 0 0;
    flex-wrap: wrap;
    gap: 12px 16px;
  }
  .top > a:first-child {
    flex-grow: 1;
  }
  .nav {
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 8px;
  }
  .nav a {
    padding: 0 8px;
  }
  .stat {
    flex-basis: 50%;
    padding: 20px;
    border-bottom: 1px solid var(--line);
  }
  .stat:nth-child(even) {
    border-right: 1px solid var(--line);
  }
  .stat:nth-child(odd) {
    border-right: 0;
  }
  .stat:last-child {
    flex-basis: 100%;
    border-bottom: 0;
    border-right: 0;
  }
  .hero {
    padding: 20px;
  }
  .hero-word {
    font-size: 44px;
  }
  .big b {
    font-size: 32px;
  }
  .box-head {
    padding: 20px 20px 16px;
  }
  .shards,
  .traffic,
  .node-charts {
    padding: 20px;
  }
  .thead,
  .trow {
    padding-left: 20px;
    padding-right: 20px;
  }
  .event,
  .kv {
    padding-left: 20px;
    padding-right: 20px;
  }
  .gauges {
    grid-template-columns: minmax(0, 1fr);
  }
  .gauge {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 20px;
  }
  .gauge:last-child {
    border-bottom: 0;
  }
  h1 {
    font-size: 44px;
  }
  .facts {
    flex-wrap: wrap;
    gap: 16px 28px;
  }
  .bars {
    height: 64px;
  }
  .bars > div {
    height: 64px;
  }
  .bars i {
    height: 6px;
  }
  .signin {
    flex-direction: column;
  }
  .signin-art {
    display: none;
  }
  .signin-mobile-logo {
    display: flex;
    padding: 24px 16px 0;
  }
  .signin-form {
    width: auto;
    padding: 32px 16px;
    justify-content: flex-start;
  }
}

.box-head.end {
  justify-content: flex-end;
}