/* ============================================================
   Social Bingo — Forms
   New components (not yet in design-system.md §10 — document on merge)
   ============================================================ */

.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:var(--sp-4); }
/* Direct child only — a nested <label> (e.g. .option, .check) must not inherit this */
.field > label{
  font-size:var(--fs-xs); font-weight:800; letter-spacing:0.8px; text-transform:uppercase;
  color:var(--magenta-soft);
}
.input,.select,.textarea{
  font-family:var(--font-body); font-size:15px; font-weight:600; color:var(--cream);
  background:rgba(0,0,0,0.25); border:1.5px solid var(--border-strong);
  border-radius:var(--radius-md); padding:13px 15px; width:100%; min-height:48px;
  transition:border-color var(--dur-base) ease, background var(--dur-base) ease;
}
.input::placeholder,.textarea::placeholder{ color:rgba(255,243,224,0.4); font-weight:400; }
.input:hover,.select:hover,.textarea:hover{ border-color:rgba(255,255,255,0.32); }
.input:focus,.select:focus,.textarea:focus{ outline:none; border-color:var(--gold); background:rgba(0,0,0,0.35); }
.textarea{ min-height:110px; resize:vertical; line-height:1.5; }
.select{ appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff3e0' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:12px; padding-right:40px;
}
.field-help{ font-size:12px; color:var(--text-muted); }
.field-error{ font-size:12px; font-weight:700; color:var(--danger); display:flex; align-items:center; gap:5px; }
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{ border-color:var(--danger); }

/* Inline form (email capture) */
.form-inline{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.form-inline .input{ flex:1 1 240px; width:auto; }

/* Checkbox / radio */
.check{ display:flex; align-items:flex-start; gap:var(--sp-3); cursor:pointer; font-size:14px; line-height:1.5; }
.check input{ appearance:none; width:22px; height:22px; flex-shrink:0; margin:0; cursor:pointer;
  border:2px solid var(--border-strong); border-radius:6px; background:rgba(0,0,0,0.25);
  transition:background var(--dur-fast), border-color var(--dur-fast); }
.check input[type="radio"]{ border-radius:50%; }
.check input:checked{ background:var(--magenta); border-color:var(--magenta); }
.check input:checked::after{ content:"✓"; display:block; text-align:center; color:#fff; font-size:14px; font-weight:800; line-height:18px; }
.check input[type="radio"]:checked::after{ content:""; width:8px; height:8px; border-radius:50%; background:#fff; margin:5px auto; }

/* Segmented code input (login verification) */
.code-input{ display:flex; gap:var(--sp-2); justify-content:center; }
.code-input input{
  width:52px; height:64px; text-align:center; padding:0;
  font-family:var(--font-display); font-weight:700; font-size:28px; color:var(--cream);
  background:rgba(0,0,0,0.28); border:2px solid var(--border-strong); border-radius:var(--radius-md);
  transition:border-color var(--dur-fast), transform var(--dur-fast);
}
.code-input input:focus{ outline:none; border-color:var(--gold); transform:translateY(-2px); }
.code-input.is-error input{ border-color:var(--danger); animation:shake 0.35s ease; }
@keyframes shake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);} 75%{transform:translateX(6px);} }
@media (max-width:400px){ .code-input input{ width:44px; height:56px; font-size:24px; } }

/* Avatar picker (emoji + colour) */
.avatar-picker{ display:flex; flex-direction:column; gap:var(--sp-4); align-items:center; }
.avatar-preview{
  width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:46px; box-shadow:var(--shadow-md), 0 0 0 4px rgba(255,255,255,0.12);
}
.swatch-row{ display:flex; gap:var(--sp-2); flex-wrap:wrap; justify-content:center; }
.swatch{
  width:36px; height:36px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0;
  transition:transform var(--dur-fast) var(--ease-pop);
}
.swatch[aria-pressed="true"]{ border-color:var(--cream); transform:scale(1.12); }
.emoji-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); gap:var(--sp-2); width:100%; max-height:180px; overflow-y:auto; }
.emoji-grid button{
  aspect-ratio:1/1; font-size:22px; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-sm); cursor:pointer; transition:background var(--dur-fast), transform var(--dur-fast);
}
.emoji-grid button:hover{ background:var(--surface-hover); transform:scale(1.08); }
.emoji-grid button[aria-pressed="true"]{ background:var(--magenta); border-color:var(--magenta); }

/* ---------- Option cards (radio group that looks like buttons) ---------- */
.option-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(118px,1fr)); gap:var(--sp-2); }
.option{
  position:relative; display:block; cursor:pointer;
  text-transform:none; letter-spacing:normal; color:var(--text);
}
.option input{ position:absolute; opacity:0; width:0; height:0; }
.option .opt{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  text-align:center; min-height:74px; padding:12px 10px;
  background:rgba(0,0,0,0.22); border:1.5px solid var(--border-strong);
  border-radius:var(--radius-md);
  transition:border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
}
.option .opt .ico{ font-size:20px; line-height:1; }
.option .opt .lbl{ font-family:var(--font-display); font-weight:600; font-size:14px; }
.option .opt .hint{ font-size:11px; color:var(--text-dim); font-weight:700; }
.option:hover .opt{ border-color:rgba(255,255,255,0.35); }
.option input:checked + .opt{ border-color:var(--magenta); background:rgba(255,47,135,0.14); }
.option input:focus-visible + .opt{ outline:3px solid var(--gold); outline-offset:2px; }

/* ---------- Password field ---------- */
.pw-wrap{ position:relative; }
.pw-wrap .input{ padding-right:64px; }
.pw-toggle{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; padding:8px 10px;
  font-family:var(--font-body); font-size:11px; font-weight:800; letter-spacing:0.5px;
  text-transform:uppercase; color:var(--text-muted);
}
.pw-toggle:hover{ color:var(--cream); }

/* Strength meter — feedback, not a gate (R-PWD-06) */
.pw-meter{ display:flex; gap:var(--sp-1); margin-top:8px; }
.pw-meter i{ flex:1; height:4px; border-radius:99px; background:var(--surface-strong); transition:background var(--dur-base); }
.pw-meter.s1 i:nth-child(1){ background:var(--danger); }
.pw-meter.s2 i:nth-child(-n+2){ background:var(--o); }
.pw-meter.s3 i:nth-child(-n+3){ background:var(--gold); }
.pw-meter.s4 i{ background:var(--teal); }
.pw-hint{ font-size:12px; margin-top:6px; color:var(--text-muted); min-height:18px; }
.pw-hint.is-bad{ color:var(--danger); font-weight:700; }
.pw-hint.is-good{ color:var(--teal); font-weight:700; }


/* ---------- Toggle rows ----------
   A real checkbox with its paint replaced, not a div pretending to be one.
   That keeps the keyboard, the label click target, and normal form submission
   — no JS, nothing to wire up, and it still works if a script fails.

   `.switch-row` was already in the room forms and had no rules anywhere, so
   every "toggle" in admin was rendering as a plain tick box. */
.switch-row{
  display:flex; align-items:flex-start; gap:var(--sp-3);
  cursor:pointer; padding:var(--sp-2) 0;
}
.switch-row input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  flex:0 0 auto; position:relative; margin:1px 0 0;
  width:42px; height:24px; border-radius:999px;
  background:var(--surface-strong); border:1px solid var(--border);
  cursor:pointer; transition:background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.switch-row input[type="checkbox"]::after{
  content:''; position:absolute; top:2px; left:2px;
  width:18px; height:18px; border-radius:50%;
  background:var(--cream);
  transition:transform var(--dur-fast) ease, background var(--dur-fast) ease;
}
.switch-row input[type="checkbox"]:checked{ background:var(--teal); border-color:var(--teal); }
.switch-row input[type="checkbox"]:checked::after{ transform:translateX(18px); background:#04372f; }
.switch-row input[type="checkbox"]:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.switch-row input[type="checkbox"]:disabled{ opacity:0.5; cursor:not-allowed; }

.switch-row > span{ flex:1; min-width:0; line-height:1.45; }
.switch-row b{ display:block; font-weight:800; }

@media (prefers-reduced-motion:reduce){
  .switch-row input[type="checkbox"],
  .switch-row input[type="checkbox"]::after{ transition:none; }
}