/* ============================================================
   ROOM — Request access (conversational, one question at a time)
   Inherits tokens from room.css (:root). Metallic / platinum.
   ============================================================ */

/* progress + top bar */
.tf-progress{position:fixed;top:0;left:0;right:0;height:4px;z-index:60;background:rgba(11,11,12,.08)}
.tf-bar{display:block;height:100%;width:0;
  background:linear-gradient(90deg,#9aa0a8,#1b1d20);transition:width .45s cubic-bezier(.4,0,.2,1)}
.tf-top{position:fixed;top:0;left:0;right:0;z-index:55;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:18px clamp(20px,5vw,48px)}
.tf-back{justify-self:start;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey);display:inline-flex;gap:8px;align-items:center;background:none;border:none;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .2s,color .2s}
.tf-back.show{opacity:1;pointer-events:auto}
.tf-back:hover{color:var(--ink)}
.tf-mark{justify-self:center;font-weight:800;font-size:.92rem;letter-spacing:.4em;padding-left:.4em;
  background:var(--chrome-ink);-webkit-background-clip:text;background-clip:text;color:transparent}
.tf-count{justify-self:end;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--grey-soft)}

/* stage */
.tf-stage{min-height:100vh;min-height:100svh;display:grid;align-items:center;
  padding:96px clamp(22px,6vw,40px) 70px}
.tf-form{width:100%;max-width:640px;margin:0 auto;position:relative}

/* steps — stacked by default (no-JS fallback); JS switches to one-at-a-time */
.tf-step{margin-bottom:64px}
.tf-form.tf-active .tf-step{display:none;margin-bottom:0}
.tf-form.tf-active .tf-step.is-active{display:block;animation:tf-in .5s cubic-bezier(.2,.7,.2,1)}
@keyframes tf-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.tf-step.shake{animation:tf-shake .4s}
@keyframes tf-shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}

.tf-eyebrow{font-family:var(--mono);font-size:.8rem;letter-spacing:.12em;color:var(--grey);
  display:inline-flex;align-items:center;gap:9px;margin-bottom:18px}
.tf-eyebrow .ar{color:var(--ink)}
.tf-q{font-weight:700;font-size:clamp(1.6rem,4.2vw,2.6rem);letter-spacing:-.025em;line-height:1.08;
  margin-bottom:14px;text-wrap:balance}
.tf-q .opt{color:var(--grey-soft);font-weight:400;font-size:.62em;letter-spacing:0}
.tf-help{color:var(--grey);font-size:1.05rem;line-height:1.5;margin-bottom:28px;max-width:46ch}

/* inputs */
.tf-field{margin-bottom:30px}
.tf-input{width:100%;font:inherit;font-size:clamp(1.2rem,2.6vw,1.7rem);font-weight:500;color:var(--ink);
  background:transparent;border:none;border-bottom:2px solid var(--silver);padding:10px 2px;outline:none;
  transition:border-color .2s}
.tf-input::placeholder{color:var(--grey-soft);font-weight:400}
.tf-input:focus{border-color:var(--ink)}
.tf-textarea{width:100%;font:inherit;font-size:clamp(1.08rem,2vw,1.35rem);color:var(--ink);line-height:1.5;
  background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:16px;padding:16px 18px;outline:none;
  min-height:130px;resize:vertical}
.tf-textarea::placeholder{color:var(--grey-soft)}
.tf-textarea:focus{background:#fff;box-shadow:0 0 0 3px rgba(199,204,210,.35)}

/* multi-select chips */
.tf-chips{display:flex;flex-direction:column;gap:11px;margin-bottom:30px}
.tf-chip{position:relative;display:flex;align-items:center;gap:14px;padding:15px 17px;border-radius:14px;
  background:rgba(255,255,255,.6);border:1px solid var(--line);cursor:pointer;font-size:1.05rem;font-weight:500;
  color:var(--ink);transition:background .15s,border-color .15s,box-shadow .15s}
.tf-chip:hover{background:#fff}
.tf-chip input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.tf-chip .key{font-family:var(--mono);font-size:.78rem;font-weight:700;width:27px;height:27px;border-radius:8px;
  border:1px solid var(--line);display:grid;place-items:center;flex-shrink:0;background:#fff;color:var(--grey);
  transition:background .15s,color .15s,border-color .15s}
.tf-chip.sel{border-color:var(--ink);background:#fff;box-shadow:0 0 0 1.5px var(--ink)}
.tf-chip.sel .key{background:var(--ink);color:var(--platinum);border-color:var(--ink)}

/* actions */
.tf-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.tf-enter{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--grey-soft)}
.tf-enter b{color:var(--grey);font-weight:700}

/* welcome + done */
.tf-step--welcome .tf-q{font-size:clamp(2rem,5vw,3.2rem)}
.tf-done{text-align:center}
.tf-done .tf-check{width:64px;height:64px;border-radius:50%;margin:0 auto 26px;display:grid;place-items:center;
  font-size:1.7rem;color:var(--platinum);background:linear-gradient(180deg,#2a2d31,var(--ink));
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 18px 40px -18px rgba(0,0,0,.6)}
.tf-done .tf-q{font-size:clamp(2rem,5vw,3rem)}
.tf-done .tf-help{margin-inline:auto}
.tf-done .tf-actions{justify-content:center}

/* no-JS notice */
.tf-noscript{max-width:520px;margin:0 auto;padding:20px 22px;border-radius:14px;text-align:center;
  background:rgba(255,255,255,.7);border:1px solid var(--line);color:var(--grey)}
.hidden-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:560px){
  .tf-mark{display:none}
  .tf-top{grid-template-columns:1fr auto}
}