/* lobby.css — Couch Campaign's front door and host page (BUILD-PLAN, Phase 6,
 * build 2). The table's own look, the join card's (table_app/static/app.css,
 * .join): its ground, its inks and its letters, so stepping from the door to
 * the table's "Who are you?" changes nothing but the words. Its own file, not
 * the table's: the lobby is a process of its own, and the table's page may be
 * down while the door is up. */

:root {
  color-scheme: dark;
  --ground: #0b0e13;
  --ground-lift: #10151d;
  --ground-card: #151b25;
  --ink: #e9e4da;
  --ink-dim: #a4a9b3;
  --ink-faint: #898f9c;
  --ink-strong: #fff8ea;
  --accent: #d8b67c;
  --rule: #2f3746;
  --warn: #d7725f;
  --prose: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --label: ui-sans-serif, -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --step: 1rem;
}

html, body { height: 100%; margin: 0; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--prose);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

[hidden] { display: none !important; }

/* The card, as the join screen's: one column, never wider than a phone held
 * upright, so a laptop shows the same thing a phone does. Held at the top,
 * not centred: centred, the tabs moved under the thumb as a tab's panel
 * changed height. */
.door {
  min-height: 100%;
  box-sizing: border-box;
  display: grid;
  place-items: start center;
  padding: max(calc(var(--step) * 1.5), 12vh) calc(var(--step) * 1.5) calc(var(--step) * 1.5);
}

.door__card { width: min(26rem, 100%); display: grid; gap: calc(var(--step) * 0.8); }

.door__eyebrow {
  margin: 0;
  font-family: var(--label);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}

/* The wordmark (wordmark.svg), atop the front door in the eyebrow's place,
 * centred over the card (Bryce, 2026-10-08). */
.door__brand { display: block; justify-self: center; width: min(16rem, 78%); height: auto; margin-bottom: calc(var(--step) * 0.4); }

.door__title { margin: 0; font-family: var(--prose); font-size: 1.5rem; font-weight: 400; color: var(--ink); }

.door__sub {
  margin: calc(var(--step) * 0.6) 0 0;
  font-family: var(--label);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ── the two tabs ───────────────────────────────────────────────────────
 * Play and Host (Bryce, 2026-10-06, B over A). Labels in the interface's
 * letters, the chosen one in the accent and underlined; the app opens on the
 * one used last. */
.door__tabs {
  display: flex;
  /* Centred under the wordmark, spread apart, each tab as wide as the
   * other (Bryce, 2026-10-08: "a little more intentional"). */
  justify-content: center;
  gap: calc(var(--step) * 2.2);
  border-bottom: 1px solid var(--rule);
  margin-bottom: calc(var(--step) * 0.4);
}

.door__tab {
  font-family: var(--label);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  min-width: 7.5rem;
  padding: calc(var(--step) * 0.65) calc(var(--step) * 0.8);
  text-align: center;
  cursor: pointer;
}

.door__tab[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }

@media (hover: hover) {
  .door__tab:hover:not([aria-selected="true"]) { color: var(--ink); }
}

.door__panel { display: grid; gap: calc(var(--step) * 0.8); }

/* ── fields and buttons, the join card's ─────────────────────────────── */
.door__form { display: grid; gap: calc(var(--step) * 0.5); }

.door__field {
  width: 100%;
  box-sizing: border-box;
  padding: calc(var(--step) * 0.8) calc(var(--step) * 0.9);
  font-family: var(--label);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--ink);
  background: var(--ground-lift);
  border: 1px solid var(--rule);
  border-radius: 0;
}

.door__field:focus { outline: none; border-color: var(--accent); }
.door__field::placeholder { color: var(--ink-faint); letter-spacing: 0.06em; }

/* The table code, a box a letter (Bryce, 2026-10-08), read off a TV across a
 * room, so typed large. */
.door__boxes { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--step) * 0.5); }
.door__box {
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 1 / 1.1;
  font-family: var(--label);
  font-size: 1.7rem;
  text-align: center;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--ground-lift);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.door__box:focus { outline: none; border-color: var(--accent); }

.btn {
  font-family: var(--label);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: calc(var(--step) * 0.75) calc(var(--step) * 0.9);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.btn--go { color: var(--accent); border-color: var(--accent); }
.btn--stop { color: var(--warn); border-color: var(--warn); }
.btn:disabled { opacity: 0.4; cursor: default; }

@media (hover: hover) {
  .btn:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-faint); }
  .btn--go:hover:not(:disabled) { background: var(--accent); color: var(--ground); }
}

.btn-row { display: flex; gap: calc(var(--step) * 0.5); }
.btn-row > .btn { flex: 1; }

.door__fixed { display: grid; gap: calc(var(--step) * 0.45); padding: calc(var(--step) * 0.3) 0; }
.door__links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(var(--step) * 0.6); }

/* A quiet way somewhere else, as the join card's "back to the table". */
.door__link {
  justify-self: start;
  font-family: var(--label);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: none;
  border: 0;
  padding: 0.2em 0;
  cursor: pointer;
  text-decoration: underline;
}
@media (hover: hover) { .door__link:hover { color: var(--ink-dim); } }
.door__link--warn { color: var(--warn); }

.door__note {
  margin: 0;
  min-height: 1.2em;
  font-family: var(--label);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.door__note[data-tone="warn"] { color: var(--warn); }

/* ── the Host tab's campaigns, rows as the join card's picks ─────────── */
.door__list { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--step) * 0.5); }

.door__pick {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8em;
  padding: calc(var(--step) * 0.8) calc(var(--step) * 0.9);
  font-family: var(--label);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--ground-lift);
  border: 1px solid var(--rule);
  border-radius: 3px;
  cursor: pointer;
  text-align: left;
}
@media (hover: hover) { .door__pick:hover { border-color: var(--accent); color: var(--accent); } }

.door__state { font-size: 0.6rem; letter-spacing: 0.12em; color: var(--ink-faint); white-space: nowrap; }
.door__state[data-live] { color: var(--accent); }

/* ── a campaign's key, shown once ────────────────────────────────────── */
.door__key {
  margin: 0;
  padding: calc(var(--step) * 1) calc(var(--step) * 0.9);
  display: grid;
  gap: 0.15em;
  font-family: var(--prose);
  font-size: 1.45rem;
  line-height: 1.35;
  color: var(--ink-strong);
  background: var(--ground-card);
  border: 1px solid var(--accent);
  border-radius: 3px;
  list-style: none;
}
.door__key li::before {
  content: counter(list-item);
  display: inline-block;
  width: 1.6em;
  font-family: var(--label);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  vertical-align: 0.25em;
}

/* ── the host page: the campaign's name, its session under it ────────── */
.host__title { font-size: 2.1rem; line-height: 1.15; overflow-wrap: anywhere; }
.host__session {
  margin: calc(var(--step) * -0.45) 0 0;
  font-family: var(--label);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.host__session:empty { display: none; }

/* ── the host page's settings, folded away until asked for ──────────── */
.host__settings { gap: calc(var(--step) * 0.6); padding-top: calc(var(--step) * 0.7); border-top: 1px solid var(--rule); }
.host__settings .door__field { padding: 0.55em 0.7em; font-size: 0.78rem; }
.host__settings .btn { padding: 0.6em 0.9em; }
.host__pair { display: grid; grid-template-columns: 3fr 2fr; gap: calc(var(--step) * 0.5); }
.host__row { display: grid; gap: calc(var(--step) * 0.25); }
.host__label {
  font-family: var(--label);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.host__check {
  display: flex;
  gap: 0.6em;
  align-items: center;
  font-family: var(--label);
  font-size: 0.78rem;
  color: var(--ink-dim);
  cursor: pointer;
}
.host__check input { margin: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
.host__rules { resize: vertical; min-height: 4.5em; font-family: var(--label); line-height: 1.45; }
.host__inline { display: flex; gap: calc(var(--step) * 0.5); }
.host__inline .door__field { flex: 1; min-width: 0; }
.host__more { flex-wrap: wrap; justify-content: flex-start; gap: calc(var(--step) * 0.5) calc(var(--step) * 1.1); }
.door__note:empty { display: none; }
.host__here { text-transform: none; letter-spacing: 0.02em; font-size: 0.74rem; color: var(--ink-dim); }
.host__fixed { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2em;
  font-family: var(--label); font-size: 0.78rem; color: var(--ink-dim); }
.host__fixed b { font-weight: 500; color: var(--ink); }
.host__rulestext { font-family: var(--label); font-size: 0.78rem; line-height: 1.45; color: var(--ink-dim);
  white-space: pre-wrap; padding: 0.55em 0.7em; border-left: 2px solid var(--rule); }
.host__line { display: flex; flex-wrap: wrap; gap: 0.2em 0.8em; align-items: baseline; }
select.door__field { appearance: auto; }

/* ── the host page's table code ──────────────────────────────────────── */
.host__code {
  margin: 0;
  padding: calc(var(--step) * 0.9) calc(var(--step) * 0.9) calc(var(--step) * 0.7);
  display: grid;
  justify-items: center;
  gap: 0.2em;
  background: var(--ground-card);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.host__letters {
  font-family: var(--label);
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  line-height: 1.2;
  color: var(--ink-strong);
}
.host__url {
  font-family: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}