/* Spawnpoint: day sky by day, night sky in dark mode.
   Status colours come from the game world: grass = online, gold = starting/queued,
   stone = off, redstone = needs attention. */
:root {
  --bg: #dbe9f1;
  --panel: #f2f8fb;
  --line: #a6c0ce;
  --text: #2e2219;
  --muted: #62534a;
  --code-bg: #e6f0f5;
  --focus: #1f5fbf;

  --grass: #3f7a24;   --grass-edge: #2b5618;   --grass-drop: #1c3a0f;
  --gold: #e3a82b;    --gold-edge: #a97811;    --gold-drop: #6e4d07;
  --stone: #9aa0a5;   --stone-edge: #6c7176;   --stone-drop: #464a4e;
  --red: #b8322a;     --red-edge: #86211b;     --red-drop: #561410;

  --pixel: "Pixelify Sans", ui-monospace, monospace;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e1a2b;
    --panel: #15263c;
    --line: #2c4566;
    --text: #e8eef5;
    --muted: #a5b6c8;
    --code-bg: #0e1a2b;
    --focus: #8ab8ff;
    --stone: #7c8389; --stone-edge: #565c62; --stone-drop: #2f3337;
    color-scheme: dark;
  }
}

[hidden] { display: none !important; }
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* ---------- header ---------- */
.top {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.wordmark {
  font: 700 1.375rem/1 var(--pixel);
  color: var(--text);
  text-decoration: none;
}
.who { display: flex; gap: 14px; align-items: baseline; color: var(--muted); font-size: 0.9375rem; min-width: 0; }
#who-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

main { max-width: 720px; margin: 0 auto; padding: 8px 16px 72px; }

/* ---------- type ---------- */
h1 {
  font: 700 clamp(2.1rem, 7vw, 3.4rem)/1.04 var(--pixel);
  margin: 40px 0 18px;
  max-width: 15ch;
}
h2 { font: 700 1.5rem/1.2 var(--pixel); margin: 0; }
h3 { font: 700 1.5rem/1.15 var(--pixel); margin: 0 0 6px; overflow-wrap: anywhere; }
.lede { font-size: 1.125rem; color: var(--muted); max-width: 52ch; margin: 0 0 28px; }
code {
  font: 500 1.0625rem/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  background: var(--code-bg);
  padding: 2px 6px;
}
.quiet-note { color: var(--muted); }

/* ---------- the block: a status swatch with a pixel bevel ---------- */
.block {
  --c: var(--stone); --e: var(--stone-edge);
  width: 52px; height: 52px; flex: none;
  background: var(--c);
  box-shadow: inset -6px -6px 0 var(--e), inset 6px 6px 0 rgb(255 255 255 / 0.3);
}
[data-tone="grass"], [data-status="online"] .block { --c: var(--grass); --e: var(--grass-edge); }
[data-tone="gold"], [data-status="starting"] .block, [data-status="queued"] .block { --c: var(--gold); --e: var(--gold-edge); }
[data-status="stopping"] .block { --c: var(--gold); --e: var(--gold-edge); }
[data-status="error"] .block { --c: var(--red); --e: var(--red-edge); }

/* the one moving thing: while starting, the block is "built" from the bottom up */
@media (prefers-reduced-motion: no-preference) {
  [data-status="starting"] .block { animation: build 2.4s steps(4, end) infinite; }
  @keyframes build {
    from { clip-path: inset(100% 0 0 0); }
    to   { clip-path: inset(0 0 0 0); }
  }
}

/* ---------- block button: the bold element ---------- */
.block-btn {
  --b: var(--grass); --b-edge: var(--grass-edge); --b-drop: var(--grass-drop); --b-text: #fff;
  font: 700 1.2rem/1 var(--pixel);
  color: var(--b-text);
  background: var(--b);
  border: 0;
  border-radius: 0;
  padding: 15px 24px 13px;
  margin-bottom: 4px;
  cursor: pointer;
  box-shadow: inset -4px -4px 0 var(--b-edge), inset 4px 4px 0 rgb(255 255 255 / 0.25), 0 4px 0 var(--b-drop);
  transition: transform 60ms, box-shadow 60ms;
}
.block-btn:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow: inset -4px -4px 0 var(--b-edge), inset 4px 4px 0 rgb(255 255 255 / 0.25), 0 0 0 var(--b-drop);
}
.block-btn.stop  { --b: var(--red);  --b-edge: var(--red-edge);  --b-drop: var(--red-drop); }
.block-btn.quiet { --b: var(--gold); --b-edge: var(--gold-edge); --b-drop: var(--gold-drop); --b-text: #2e2219; }
.block-btn:disabled { --b: var(--stone); --b-edge: var(--stone-edge); --b-drop: var(--stone-drop); --b-text: #23272a; cursor: default; }
.block-btn:focus-visible, .link:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.link {
  font: 500 0.9375rem/1.4 var(--sans);
  color: var(--text);
  background: none;
  border: 0;
  padding: 4px 2px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link.danger { color: var(--red); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .link.danger { color: #ff8a80; } }

/* ---------- how it works (a real sequence, so an ordered list) ---------- */
.lifecycle {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
  max-width: 560px;
}
.lifecycle li { display: flex; gap: 16px; align-items: flex-start; }
.lifecycle .block { width: 36px; height: 36px; box-shadow: inset -4px -4px 0 var(--e), inset 4px 4px 0 rgb(255 255 255 / 0.3); }
.lifecycle .step { color: var(--muted); }
.lifecycle .step strong { display: block; font: 700 1.0625rem/1.3 var(--pixel); color: var(--text); }

/* ---------- servers ---------- */
.row-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 28px 0 14px; }
.capacity { margin: 0; color: var(--muted); font-size: 0.9375rem; }
.empty { color: var(--muted); margin: 0 0 8px; }

.server {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 18px;
  padding: 20px;
  margin-bottom: 16px;
  background: var(--panel);
  border: 2px solid var(--line);
}
.server .info { min-width: 0; }
.state { margin: 0 0 10px; }
.state strong { font-weight: 600; }
.meta { margin: 8px 0 0; color: var(--muted); font-size: 0.9375rem; }
.address { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 4px 0 4px; }
.address code { font-size: 1.25rem; padding: 6px 10px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.how { margin: 4px 0 0; font-size: 0.9375rem; color: var(--muted); }
.server .actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.panel-error { grid-column: 1 / -1; margin: 0; }
.panel-error:empty { display: none; }

/* ---------- create form ---------- */
.create { margin-top: 40px; padding-top: 28px; border-top: 2px solid var(--line); display: grid; gap: 18px; max-width: 460px; }
.create h2 { margin-bottom: 2px; }
.create label { display: grid; gap: 6px; font-weight: 600; }
.create input[type="text"], .create input:not([type]), .create select {
  font: 400 1rem/1.4 var(--sans);
  color: var(--text);
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 0;
  padding: 10px 12px;
  width: 100%;
}
.create .check { grid-template-columns: auto 1fr; align-items: start; gap: 10px; font-weight: 600; }
.create .check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--grass); }
.hint { display: block; font-weight: 400; font-size: 0.875rem; color: var(--muted); }
.hint.inline { display: inline; margin-left: 4px; }
code.small { font-size: 0.875rem; padding: 1px 4px; }
.create .block-btn { justify-self: start; }

.form-error { color: var(--red); margin: 8px 0 0; min-height: 0; }
.form-error:empty { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .form-error { color: #ff8a80; } }

@media (max-width: 480px) {
  .server { padding: 16px; gap: 12px 14px; }
  .server > .block { width: 40px; height: 40px; box-shadow: inset -5px -5px 0 var(--e), inset 5px 5px 0 rgb(255 255 255 / 0.3); }
  .address code { font-size: 1.0625rem; }
  h1 { margin-top: 24px; }
}

/* ---------- notices (dashboard + admin) ---------- */
.notice {
  margin: 0 0 16px;
  padding: 12px 16px;
  background: var(--panel);
  border: 2px solid var(--gold-edge);
  border-left-width: 8px;
}
.notice:empty { display: none; }
.warn { margin: 8px 0 0; color: var(--red); font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .warn { color: #ff8a80; } }

/* ---------- admin panel ---------- */
main.wide { max-width: 960px; }
.top:has(+ main.wide) { max-width: 960px; }
.tag {
  font: 700 0.75rem/1 var(--pixel);
  vertical-align: middle;
  padding: 4px 6px 3px;
  margin-left: 6px;
  color: #2e2219;
  background: var(--gold);
  box-shadow: inset -2px -2px 0 var(--gold-edge);
}
.section-title { margin: 36px 0 14px; }
.row-head:has(> h2) { margin-top: 36px; }

.controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px 24px;
  align-items: center;
  margin-top: 28px;
  padding: 20px;
  background: var(--panel);
  border: 2px solid var(--line);
}
.controls .state { margin: 6px 0 0; max-width: 52ch; }
.controls .actions { display: flex; flex-wrap: wrap; gap: 12px; }
.controls .panel-error { grid-column: 1 / -1; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0;
}
.stat { padding: 16px; background: var(--panel); border: 2px solid var(--line); }
.stat dt { color: var(--muted); font-size: 0.9375rem; }
.stat dd { margin: 4px 0 0; }
.stat-value { display: block; font: 700 1.75rem/1.15 var(--pixel); }

.panel { padding: 20px; background: var(--panel); border: 2px solid var(--line); }
.panel .meta:first-of-type { margin-top: 14px; }
.big { margin: 0 0 12px; font-size: 1.125rem; }
.big strong { font: 700 2rem/1.1 var(--pixel); margin-right: 6px; }

/* budget meter: a row of pixel "blocks" filling up, with marks at 50% and 90% */
.meter {
  --c: var(--stone); --e: var(--stone-edge);
  position: relative;
  height: 28px;
  background: var(--code-bg);
  border: 2px solid var(--line);
}
.meter[data-tone="grass"] { --c: var(--grass); --e: var(--grass-edge); }
.meter[data-tone="gold"] { --c: var(--gold); --e: var(--gold-edge); }
.meter[data-tone="red"] { --c: var(--red); --e: var(--red-edge); }
.meter .fill {
  position: absolute; inset: 0 auto 0 0;
  background: var(--c);
  box-shadow: inset -4px -4px 0 var(--e), inset 4px 4px 0 rgb(255 255 255 / 0.25);
}
.meter .mark { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text); opacity: 0.5; }
.meter-scale { position: relative; height: 1.2em; margin: 4px 0 0; color: var(--muted); font-size: 0.8125rem; }
.meter-scale span { position: absolute; transform: translateX(-50%); }
.meter-scale span:first-child { transform: none; }
.meter-scale span:last-child { transform: translateX(-100%); }

.tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
table.usage { width: 100%; border-collapse: collapse; background: var(--panel); border: 2px solid var(--line); }
.usage caption { text-align: left; font: 700 1.0625rem/1.3 var(--pixel); padding: 0 0 8px; }
.usage th, .usage td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.usage th { font-weight: 600; color: var(--muted); font-size: 0.875rem; }
.usage .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.usage .total td { font-weight: 600; border-bottom: 0; }
.usage td.empty { color: var(--muted); }
.updated { margin-top: 28px; font-size: 0.875rem; }

@media (max-width: 600px) {
  .controls { grid-template-columns: 1fr; padding: 16px; }
  .big strong { font-size: 1.6rem; }
  .top:has(+ main.wide) #who-email { display: none; }
  .stat-value { font-size: 1.4rem; }
}