/* panel.css — renn's door: signing in, and the little control panel */
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300; font-display: swap; src: url('../assets/fonts/fraunces-italic.woff2') format('woff2'); }
@font-face { font-family: 'Caveat'; font-weight: 600; font-display: swap; src: url('../assets/fonts/caveat.woff2') format('woff2'); }

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

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  color: #f6ead8;
  font: 400 1rem/1.5 system-ui, sans-serif;
  background:
    radial-gradient(ellipse at 60% 35%, rgb(255 170 90 / 0.25), transparent 55%),
    linear-gradient(180deg, #2a1c14, #120b07);
}

.door { width: min(420px, 100%); }

.door-counter {
  font: 400 0.95rem/1 ui-monospace, 'Courier New', monospace;
  letter-spacing: 0.08em;
  color: #ffd49a;
  opacity: 0.8;
}

h1 {
  margin: 8px 0 18px;
  font: italic 300 3rem/1 'Fraunces', Georgia, serif;
  text-shadow: 0 0 30px rgb(255 180 110 / 0.6);
}

h2 { margin-bottom: 12px; font: 600 1.8rem/1 'Caveat', cursive; }

.card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  border-radius: 16px;
  background: rgb(20 12 8 / 0.7);
  box-shadow: inset 0 0 0 1px rgb(255 220 170 / 0.14), 0 30px 60px rgb(0 0 0 / 0.5);
  backdrop-filter: blur(10px);
}

.lede { margin-bottom: 6px; font: 600 1.2rem/1.3 'Caveat', cursive; opacity: 0.8; }
a { color: #ffd49a; }
label { font-size: 0.85rem; opacity: 0.75; }

input {
  height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  color: #2a1a10;
  background: #f6ead8;
}

input:focus { outline: 2px solid #ff9f6a; outline-offset: 2px; }

button {
  margin-top: 10px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  font: 600 1.35rem/1 'Caveat', cursive;
  color: #2a1a10;
  background: linear-gradient(135deg, #ffd49a, #ff9f6a);
  cursor: pointer;
}

button:disabled { opacity: 0.7; }
button.ghost { margin: 0; padding: 0 16px; height: 36px; color: #f6ead8; background: rgb(255 255 255 / 0.1); }
.status { min-height: 1.2em; font-size: 0.9rem; color: #ffb3a1; }
.status[data-tone="ok"] { color: #a8f0c0; }
.people { margin: 10px 0; padding-left: 18px; }
.row { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
#createUserForm { display: flex; flex-direction: column; gap: 6px; }

/* no rounded corners anywhere: square edges only */
*, *::before, *::after { border-radius: 0 !important; }