/* Community board.
   Direction: dark instrument panel. Chosen because this is a status surface people
   leave open on a second monitor for hours, and because the one thing that must be
   readable at a glance across a room is "which city has slots" — which needs a high
   contrast ratio against a calm background, not a bright one. */

:root {
  --bg: oklch(15% 0.012 265);
  --bg-grad: oklch(19% 0.02 270);
  --surface: oklch(21% 0.014 265 / 0.72);
  --surface-raised: oklch(26% 0.016 265 / 0.75);
  --edge: oklch(100% 0 0 / 0.09);
  --edge-strong: oklch(100% 0 0 / 0.16);

  --text: oklch(97% 0 0);
  --text-dim: oklch(80% 0.008 265);
  --text-faint: oklch(66% 0.01 265);

  /* GREEN IS SEMANTIC — it means "a slot is open" and nothing else. It was also being used for every
     primary button, focus ring and brand dot, which spent the only colour in the product that carries
     information. Chrome now uses the brand cyan sampled from the logo. */
  --open: oklch(80% 0.19 148);
  --open-bg: oklch(80% 0.19 148 / 0.13);
  --brand: #54c5fb;
  --brand-ink: #041126;
  --accent: #fa7c56;
  --none: oklch(66% 0.012 265);
  --stale: oklch(80% 0.15 78);

  --space: clamp(1rem, 0.6rem + 1.6vw, 2rem);
  --radius: 14px;
  --radius-sm: 9px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; }

/* Author `display` rules beat the UA stylesheet's `[hidden] { display: none }`, so
   every element below that sets display AND toggles `hidden` would stay visible —
   which is exactly what left the token gate rendered above the board. Restore the
   attribute's meaning once, globally, rather than remembering it at each call site. */
[hidden] { display: none !important; }

body {
  min-height: 100vh;
  background:
    radial-gradient(120% 90% at 12% -10%, var(--bg-grad), transparent 60%),
    var(--bg);
  color: var(--text);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  padding: var(--space);
}

/* --- gate --- */
.gate { min-height: 90vh; display: grid; place-items: center; }
.gate-card {
  width: min(400px, 100%);
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 28px;
  display: grid;
  gap: 12px;
  backdrop-filter: blur(12px);
}
.gate-card h1 { font-size: 20px; letter-spacing: -0.01em; }
.gate-card p { color: var(--text-faint); font-size: 13px; }
label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-faint); }
input {
  width: 100%;
  background: oklch(12% 0 0 / 0.55);
  border: 1px solid var(--edge-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 11px 12px;
  font: 14px var(--mono);
}
input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }
button {
  background: var(--brand);
  color: var(--brand-ink);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 11px 18px;
  font: 600 14px var(--sans);
  cursor: pointer;
  transition: transform 160ms var(--ease), filter 160ms var(--ease);
}
button:hover { filter: brightness(1.08); }
button:active { transform: scale(0.985); }
button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.ghost {
  background: transparent;
  color: var(--text-faint);
  border: 1px solid var(--edge-strong);
  font-weight: 500;
  padding: 6px 11px;
  font-size: 12px;
}
.ghost:hover { color: var(--text); filter: none; }
.gate-note { color: var(--stale); min-height: 1.2em; }

/* --- bar --- */
.bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 18px; border-bottom: 1px solid var(--edge); margin-bottom: 22px;
}
.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand h1 { font-size: 17px; letter-spacing: -0.01em; font-weight: 600; }
.mark {
  width: 9px; height: 9px; border-radius: 50%;
  /* The brand dot in the header bar — chrome, not a slot state. */
  background: var(--brand); box-shadow: 0 0 0 4px oklch(76% 0.14 232 / 0.2);
}
.bar-meta { display: flex; align-items: center; gap: 10px; }
.chip {
  font: 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-faint); border: 1px solid var(--edge-strong);
  border-radius: 999px; padding: 5px 9px;
}
.pulse { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-faint); }
.pulse i { width: 6px; height: 6px; border-radius: 50%; background: var(--open); animation: blip 2s var(--ease) infinite; }
@keyframes blip { 50% { opacity: 0.25; transform: scale(0.7); } }

/* --- summary. Scale contrast does the hierarchy work, not colour. --- */
.summary {
  display: grid; gap: 10px; margin-bottom: 22px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.stat {
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--radius); padding: 15px 16px;
  display: grid; gap: 3px;
}
.stat-value { font: 600 27px/1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat-label { font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.07em; }

h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint); margin-bottom: 11px; }

/* --- location cards --- */
.cards { list-style: none; padding: 0; display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.card {
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--radius); padding: 15px 16px;
  display: grid; gap: 9px;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.card:hover { transform: translateY(-1px); border-color: var(--edge-strong); }
/* Open slots earn the only saturated surface on the page. Nothing else competes. */
.card[data-open="true"] { background: var(--open-bg); border-color: oklch(80% 0.19 148 / 0.4); }
.card-top { display: flex; align-items: baseline; gap: 9px; }
.city { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.card[data-open="true"] .city { color: var(--open); }
.days { margin-left: auto; font: 600 13px var(--mono); color: var(--none); font-variant-numeric: tabular-nums; }
.card[data-open="true"] .days { color: var(--open); font-size: 15px; }
.card-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-faint); }
.card-meta b { color: var(--text-dim); font-weight: 500; }
.age[data-stale="true"] { color: var(--stale); }

.peers { list-style: none; padding: 0; display: grid; gap: 6px; margin-top: 4px; }
.peer {
  display: flex; gap: 10px; align-items: center;
  background: var(--surface-raised); border: 1px solid var(--edge);
  border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px;
}
.peer .age { margin-left: auto; font: 11px var(--mono); color: var(--text-faint); }

.notice {
  background: oklch(80% 0.15 78 / 0.12); border: 1px solid oklch(80% 0.15 78 / 0.35);
  color: var(--stale); border-radius: var(--radius-sm);
  padding: 10px 13px; font-size: 13px; margin-bottom: 18px;
}
.empty { color: var(--text-faint); font-size: 13px; padding: 22px 0; }

.foot {
  margin-top: 30px; padding-top: 16px; border-top: 1px solid var(--edge);
  display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between;
  font-size: 11px; color: var(--text-faint);
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --- owner panel ---
   Visually separated from the read-only board above because these controls change
   other people's experience, and a destructive action should not sit flush against
   a status readout. */
.admin-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); margin-bottom: 20px; }
.admin-card {
  background: var(--surface-raised); border: 1px solid var(--edge);
  border-radius: var(--radius); padding: 16px; display: grid; gap: 8px; align-content: start;
}
.admin-card h3 { font-size: 13px; font-weight: 600; letter-spacing: -0.005em; }
.admin-note { font-size: 11px; color: var(--text-faint); line-height: 1.45; }
.admin-note b { color: var(--stale); font-weight: 600; }
.admin-card output {
  font: 11px/1.5 var(--mono); background: oklch(12% 0 0 / 0.6);
  border: 1px solid var(--edge-strong); border-radius: var(--radius-sm);
  padding: 9px 10px; word-break: break-all; color: var(--open);
}
.roster-heading { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); margin: 0 0 10px; }
.roster { list-style: none; padding: 0; display: grid; gap: 6px; }
.roster li {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px;
}
.roster .who { font-weight: 500; }
.roster .role { font: 10px var(--mono); text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); border: 1px solid var(--edge-strong); border-radius: 999px; padding: 2px 7px; }
.roster .when { margin-left: auto; font: 11px var(--mono); color: var(--text-faint); }
.roster .revoke {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; border: 1px solid oklch(62% 0.2 22 / 0.5);
  color: oklch(72% 0.19 22); font-size: 11px; padding: 4px 9px; font-weight: 500;
}
.roster .revoke svg { width: 12px; height: 12px; flex: none; }
.roster .revoke:hover { background: oklch(62% 0.2 22 / 0.16); filter: none; }
.roster li[data-active="false"] { opacity: .45; }