/*
 * Status page styling. No framework, no web font, no build.
 *
 * Both colour schemes are defined because the page is read on a phone at
 * midnight as often as on a desktop, and prefers-color-scheme costs nothing.
 * System font stack for the same reason the rest of this repo vendors things:
 * a font request would be a second origin, which the CSP forbids anyway.
 */

:root {
  color-scheme: light dark;

  --bg: #f4f4f2;
  --card: #ffffff;
  --ink: #1b1c1a;
  --muted: #6b6f68;
  --line: #e2e2de;
  --accent: #4a7c33;

  --up: #4a9c3d;
  --waking: #c8862a;
  --down: #8a8f86;
  --gone: #9c5a3d;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181a;
    --card: #1e2124;
    --ink: #e8e9e6;
    --muted: #9aa09a;
    --line: #2e3236;
    --accent: #8bc46a;

    --up: #6cc45a;
    --waking: #e0a33f;
    --down: #7d837c;
    --gone: #c47a55;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
}

.card {
  width: 100%;
  max-width: 26rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.75rem;
}

.head h1 {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}

.sub {
  margin: 0.15rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

/* --- state ------------------------------------------------------------- */

.state {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.5rem 0 0.4rem;
}

.dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--down);
  flex: none;
}

.label {
  font-size: 1.15rem;
  font-weight: 650;
}

/* One class per state, set by app.js. Keeping the mapping here rather than in
   JS means the palette is entirely in this file. */
.is-running .dot { background: var(--up); }
.is-running .label { color: var(--up); }

.is-waking .dot { background: var(--waking); animation: pulse 1.4s ease-in-out infinite; }
.is-waking .label { color: var(--waking); }

.is-asleep .dot { background: var(--down); }
.is-asleep .label { color: var(--muted); }

.is-dormant .dot { background: var(--gone); }
.is-dormant .label { color: var(--gone); }

.is-unknown .dot { background: var(--down); }
.is-unknown .label { color: var(--muted); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Respect the OS setting. The pulse is decoration and nothing depends on it. */
@media (prefers-reduced-motion: reduce) {
  .is-waking .dot { animation: none; }
}

.detail {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* There is no "connect" block here on purpose. The page carries no server
   address -- see index.html and lambda/src/status.ts. */

/* --- players ----------------------------------------------------------- */

.players {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.players h2 {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.players ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.players li {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.9rem;
}

/* --- map link ----------------------------------------------------------- */

.map-link {
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}

.map-link a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.map-link a:hover {
  text-decoration: underline;
}

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

.foot {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted);
}

.foot p {
  margin: 0 0 0.5rem;
}

.foot p:last-child {
  margin-bottom: 0;
}

.stats {
  color: var(--ink);
}

/* The only code span left on the page, now that the address is gone: the
   slash command that is the actual way in. */
.wake code {
  color: var(--accent);
  font-weight: 600;
}

.updated {
  font-size: 0.78rem;
}