:root {
  /* THE PALETTE IS THE CHARTER'S: the page links `/tokens.css` first (the
     front mounts it with its faces, `fab.charter.serve.mount`), so the door
     wears the product's cream, acid, radii and type. Only what the charter
     does not name is kept here. */
  --accent-deep: #d8ef62;
  /* The night's; the day room (`tokens.css`) says `light` over it. */
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { overflow: hidden; }

/* Both providers share one visual door; Google's face is the real button
   since 2026-10-13 (`googleSignIn`, a redirect and no popup). */
#google-btn {
  position: relative;
  width: 100%;
  height: 48px;
  overflow: hidden;
  border-radius: var(--radius-pill, 7px);
}
#google-face { position: absolute; inset: 0; }
#google-btn:focus-within #google-face {
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.34);
}

/* THE TWO DOORS, ALIKE (Jules, 2026-09-30): the same face, the same
   hairline, 48 px tall, the product's 7 px action corner. Not the acid — the
   one filled lime button is the prompt's, inside. The face is `--door`: dark
   at night, the day's panel by day (2026-10-01 — it was a literal, and the
   doors stayed dark on the cream). The logos keep their brands' colours. */
.door-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 48px;
  font: 600 14px/1 var(--sans);
  color: var(--ink);
  background: var(--door);
  border: 1px solid rgb(var(--ink-rgb) / 0.18);
  border-radius: var(--radius-pill, 7px);
  cursor: pointer;
  transition: background-color var(--wake), border-color var(--wake), transform var(--wake);
}
.door-btn.on { display: flex; }
.door-btn:hover { background: var(--door-live); border-color: var(--line-live); }
.door-btn:active { transform: scale(.97); }
.door-btn:disabled { opacity: .55; cursor: default; }
.door-btn svg { width: 18px; height: 18px; flex: none; }

[hidden] { display: none !important; }
#invite-btn { margin-top: 10px; }
#invite-form { display: grid; gap: 10px; text-align: left; }
#invite-form label { color: var(--ink-soft); font-size: 13px; }
#invite-form input {
  width: 100%; min-height: 48px; padding: 12px;
  font: inherit; color: var(--ink); background: var(--door);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
}
#invite-form input:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; }
#invite-code { text-transform: uppercase; letter-spacing: .15em; }
@media (max-height: 700px) {
  html, body { overflow-y: auto; }
}