/* ===================================================================
   THE CEREMONY SURFACE — sign-in, the second factor, refusals before a
   session, on the emerald/night theme.

   The brand reserves emerald for ceremony (sign-in, lock, PDF covers,
   splash) and porcelain for every working screen. It is the only surface a
   person sees before they are anyone, so it says who the app is and nothing
   about what it holds.

   All colour comes from the .night token block in brand.css; the kit
   (kit.css) is loaded first, so a field or a button here is the kit's,
   re-coloured by the night tokens. Tokens only — tests/test_brand_tokens.py.
   =================================================================== */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--night-bg);color:var(--night-ink);
     font-family:var(--font-ui);font-size:14px;line-height:1.55;
     -webkit-font-smoothing:antialiased;display:grid;place-items:center}

.rite{width:min(520px,calc(100vw - 32px));text-align:center;padding:40px 0 64px}
/* The hero lockup, L1. The mark is inline (see ceremony.html) and cropped to
   its ring, so 18px IS the gap to the wordmark. */
.rite-mark{width:96px;margin:0 auto 20px;display:flex;justify-content:center}
.rite-word{font-family:var(--font-voice);font-size:44px;font-weight:600;
  color:var(--night-accent);letter-spacing:.02em;margin:0;line-height:1.1}
.rite-sub{font-family:var(--font-engrave);font-size:11px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink-muted);margin:8px 0 0}
.rite-body{margin-top:34px;text-align:left}

.rite h2{font-family:var(--font-voice);font-size:21px;font-weight:600;color:var(--night-accent);
  margin:0 0 8px;text-align:center}
.rite p{color:var(--ink-muted);font-size:13.5px;margin:0 0 12px;text-align:center}
.rite p.lead{color:var(--night-ink);font-size:14.5px}
.rite p.err,.rite .err{color:var(--night-accent);font-weight:600}
.rite p.left,.rite .left{text-align:left}
.rite .note{font-size:12.5px;max-width:46ch;margin-left:auto;margin-right:auto}
.rite a{color:var(--night-accent)}
.rite code,.rite .mono{font-family:var(--font-code);font-size:12px;color:var(--night-ink)}
.rite b{color:var(--night-ink)}
.rite .eyebrow{display:block;text-align:center;color:var(--night-accent);margin:0 0 6px}

.rite-panel{background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:16px 18px;margin:16px 0;text-align:left}
.rite-panel>p{text-align:left}
.rite-panel .note{margin-left:0;max-width:none}
.rite-panel>p.center{text-align:center}
.rite-panel .mfa-qr+p{margin-top:12px}
.rite-panel>p:last-child{margin-bottom:0}
.rite-panel ul{margin:8px 0 0;padding-left:20px}
.rite-panel .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}

/* The one action. Square, engraved — this is a threshold, not a form. */
.rite button,.rite .rite-btn{display:inline-block;background:transparent;border:1px solid var(--night-accent);
  color:var(--night-accent);border-radius:0;padding:12px 32px;min-height:0;
  font-family:var(--font-engrave);font-size:11px;font-weight:400;letter-spacing:.2em;
  text-transform:uppercase;cursor:pointer;text-decoration:none;line-height:1.2}
.rite button:hover,.rite .rite-btn:hover{background:var(--night-accent);color:var(--night-bg)}
.rite button.pri,.rite .rite-btn.pri{background:var(--night-accent);color:var(--night-bg)}
.rite button.pri:hover{background:var(--brand-hover)}
.rite .actions{text-align:center;margin:18px 0 0}
.rite .actions p{margin-top:12px}
.rite .back{margin-top:22px}

/* the dev sign-in list — local only, and it should look provisional */
.rite-users-wrap{overflow-x:auto}
table.rite-users{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
table.rite-users th{text-align:left;padding:7px 9px;font-size:10.5px;font-weight:400;
  font-family:var(--font-engrave);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-muted);border-bottom:1px solid var(--line)}
table.rite-users td{padding:7px 9px;border-bottom:1px solid var(--line);vertical-align:middle}
table.rite-users button{padding:5px 14px;font-size:10px;letter-spacing:.14em}
.rite-users .role{font-family:var(--font-engrave);font-size:9.5px;letter-spacing:.12em;
  border:1px solid var(--line);border-radius:3px;padding:2px 7px;color:var(--night-accent);white-space:nowrap}

/* ── the second factor ────────────────────────────────────────────────────
   ⚠ The QR needs a WHITE ground regardless of theme. A scanner reads dark
   modules on a light field, and the ceremony page is dark — rendered on the
   night background the code is unreadable and the failure looks like a broken
   phone rather than a styling choice. */
.mfa-qr{display:block;margin:0 auto;background:var(--qr-ground);padding:8px;border-radius:6px}

/* Six digits, spaced so they can be read back off a phone without losing
   your place. Tabular figures, as every number in Manas. */
.rite input.mfa-code{font-size:24px;letter-spacing:6px;text-align:center;width:11ch;max-width:100%;
  font-family:var(--font-code);font-variant-numeric:tabular-nums;padding:10px 8px;
  background:var(--night-bg);color:var(--night-accent);
  border:1px solid var(--night-accent);border-radius:0;display:block;margin:6px auto 14px}
.rite input.mfa-code:focus{border-color:var(--night-accent);outline:2px solid var(--night-accent);outline-offset:3px}

.mfa-recovery{columns:2;font-family:var(--font-code);margin-top:10px;
  text-align:left;letter-spacing:.05em;line-height:1.9;color:var(--night-ink)}
.mfa-secret{font-family:var(--font-code);letter-spacing:2px;word-break:break-all}

@media (max-width:480px){
  .rite{padding-top:28px}
  .rite-word{font-size:38px}
  .mfa-recovery{columns:1}
}