/* Control-plane layer on top of Organic.
 *
 * organic.css is a verbatim copy of `design-source/organic.css` so it stays diffable
 * against a re-export — nothing control-plane-specific belongs in it. Everything
 * here is built from its tokens; no new colours, spacing or radii are invented.
 */

.page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--space-4) var(--space-8);
}

.nav {
  max-width: 1000px;
  margin: 0 auto;
  padding-inline: var(--space-4);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

/* The address a customer hands to players — the one thing on the page they copy,
   so it gets display type rather than being another table cell. */
.address {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 22px;
  letter-spacing: -0.01em;
  word-break: break-all;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.form-row .field {
  flex: 1 1 150px;
  min-width: 0;
}

.form-row .field.narrow { flex: 0 1 120px; }

/* Tables carry addresses and ports, so digits must line up and long values must
   scroll inside the card rather than widening the page. */
.table-scroll { overflow-x: auto; }
.table td, .table th { white-space: nowrap; }
.table td.wrap { white-space: normal; }
.table { font-variant-numeric: tabular-nums; }

.state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.state::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-neutral-400);
}

.state-online::before { background: var(--color-accent-2-600); }
.state-waiting::before { background: var(--color-accent-500); }

.notice {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: calc(var(--radius-lg) * 1.15);
  background: var(--color-surface);
  border-left: 4px solid var(--color-accent-2-600);
}

.notice-warn { border-left-color: var(--color-accent-600); }

.token-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  word-break: break-all;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-neutral-100);
}

.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

.auth-grid {
  display: grid;
  gap: var(--space-6);
  align-items: start;
  margin-top: var(--space-6);
}

@media (min-width: 760px) {
  .auth-grid { grid-template-columns: 1fr 1fr; }
}

.lede {
  font-size: 17px;
  max-width: 46ch;
}

.empty {
  margin: 0;
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.inline-form { display: inline; }

/* The Organic palette is a single deliberate light scheme. `only light` is the
   opt-out Chromium honours for its auto-dark ("dark mode for websites") feature,
   which otherwise inverts the cream into a brown nobody designed. The body colours
   are also set explicitly so nothing is left for a browser theme to fill in. */
:root { color-scheme: only light; }
body { background: var(--color-bg); color: var(--color-text); }

/* ---- The design's shell (design-source/Dashboard.dc.html) ---------------------- */

/* Pill buttons and inputs everywhere, as the design draws them. Set here rather
   than in organic.css so that file stays a verbatim copy of the export. */
.btn { border-radius: 999px; }
.input { border-radius: 999px; }

.dash {
  min-height: 100vh;
  background: var(--color-bg);
}

/* The signed-in header: the hairline spans the page, the content sits in the same
   1180px column as the landing header and the dashboard body, so the brand mark and
   pills line up with everything below them. */
.dash-header-bar {
  border-bottom: 1px solid var(--color-divider);
}

.dash-header {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-8);
  max-width: 1180px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* The rooster mark, one treatment everywhere. The artwork is a dark rounded tile on
   an opaque white square, so the radius clips the white corners away; every surface
   then shows the same chip, only the size varies. */
.brand-mark,
.site-mark,
.hero-band .disc,
.home-rooster {
  border-radius: 24%;
  flex: none;
  display: block;
}

.brand-mark,
.site-mark {
  width: 30px;
  height: 30px;
}

.site-mark-small {
  width: 20px;
  height: 20px;
}

.home-rooster-panel {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}

.home-rooster {
  width: 44px;
  height: 44px;
}

/* The card's first line: the mark and the kicker sit together, inside the card. */
.home-rooster-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.brand-name {
  font-family: var(--font-heading);
  font-size: 19px;
}

.pill-nav {
  display: flex;
  gap: var(--space-1);
  margin-left: var(--space-4);
  flex-wrap: wrap;
}

.pill-nav a {
  text-decoration: none;
  color: var(--color-neutral-700);
  font-weight: 600;
  font-size: 14px;
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
}

.pill-nav a.on {
  color: var(--color-text);
  background: var(--color-surface);
}

.dash-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.dash-body {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* The reassurance banner the design puts at the top of the main column. */
.hero-band {
  background: var(--color-accent-100);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.hero-band .disc {
  width: 44px;
  height: 44px;
  flex: none;
}

.hero-band h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  margin: 0 0 2px;
}

.hero-band p {
  margin: 0;
  font-size: 13.5px;
  color: var(--color-accent-900);
}

/* Stat tiles, as on the design's tunnel header. */
.stat-row {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.stat-tile {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  min-width: 118px;
}

.stat-tile .label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}

.stat-tile .value {
  font-family: var(--font-heading);
  font-size: 30px;
  line-height: 1.2;
}

.section-title {
  font-family: var(--font-heading);
  font-size: 24px;
  margin: 0 0 var(--space-3);
}