/* Shared ivory auth design system — Login, Beta signup, Beta verify.
   Self-contained pages (Layout = null) link this + the Fraunces/Jakarta fonts.
   Palette = the ChairTime brand default of /alternative: --amber is the accent
   (logo blue), the background's second glow is the logo green. */
:root {
  --paper:#f5f8f9; --paper-2:#e9f0f3; --card:#ffffff; --ink:#15202a; --ink-soft:#4e5b66;
  --ink-faint:#7f8b95; --line:#dae4ea; --amber:#2474b0; --amber-deep:#1c6399; --amber-wash:#dcebf7;
  --good:#3f7a1e; --err:#b3261e; --on-accent:#ffffff;
  --shadow:0 30px 70px -30px rgba(21,32,42,.35);
}
* { box-sizing:border-box; }
body {
  margin:0; min-height:100dvh; display:flex; align-items:center; justify-content:center;
  padding:2rem 1.25rem; background:var(--paper); color:var(--ink);
  font-family:"Plus Jakarta Sans",-apple-system,sans-serif; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 520px at 85% -10%, color-mix(in srgb, var(--amber) 12%, transparent), transparent 60%),
    radial-gradient(760px 520px at -8% 12%, color-mix(in srgb, #4a8020 8%, transparent), transparent 55%);
  background-attachment:fixed;
}
a { color:inherit; text-decoration:none; }

.card { width:min(440px,100%); background:var(--card); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); padding:2.4rem 2.2rem 2rem; }
.brand { display:inline-flex; align-items:center; gap:.55rem; font-family:"Fraunces",serif; font-weight:600; font-size:1.15rem; letter-spacing:-.02em; }
.brand .brand-logo { display:block; }

.eyebrow { margin:1.6rem 0 .3rem; font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--amber-deep); }
h1 { margin:0 0 .35rem; font-family:"Fraunces",serif; font-weight:600; font-size:2rem; letter-spacing:-.02em; }
.sub { margin:0 0 1.5rem; color:var(--ink-soft); font-size:.95rem; }

.alert { border-radius:12px; padding:.75rem .9rem; font-size:.9rem; margin-bottom:1rem; }
.alert-error { background:color-mix(in srgb, var(--err) 8%, transparent); border:1px solid color-mix(in srgb, var(--err) 30%, transparent); color:var(--err); }
.alert-info { background:var(--amber-wash); border:1px solid color-mix(in srgb, var(--amber) 30%, transparent); color:var(--amber-deep); }
.alert-ok { background:color-mix(in srgb, var(--good) 10%, transparent); border:1px solid color-mix(in srgb, var(--good) 30%, transparent); color:var(--good); }
.alert a { color:inherit; text-decoration:underline; }

.field { margin-bottom:1rem; }
.field label, .field-row label { display:block; font-size:.85rem; font-weight:600; color:var(--ink-soft); margin-bottom:.4rem; }
.field input, .field-row input {
  width:100%; padding:.8rem .9rem; font-family:inherit; font-size:.98rem; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:11px; transition:border-color .12s ease, box-shadow .12s ease;
}
.field input:focus, .field-row input:focus { outline:none; border-color:var(--amber); box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 18%, transparent); }
.field .error, .error { display:block; margin-top:.35rem; font-size:.82rem; color:var(--err); }
.field .hint { display:block; margin-top:.35rem; font-size:.8rem; color:var(--ink-faint); }
.field-row { display:flex; gap:.75rem; margin-bottom:1rem; }
.field-row > div { flex:1; min-width:0; }

.check { display:flex; align-items:flex-start; gap:.55rem; font-size:.88rem; color:var(--ink-soft); cursor:pointer; margin:.2rem 0 1.3rem; }
.check input { width:16px; height:16px; margin-top:2px; flex:0 0 auto; accent-color:var(--amber-deep); }
.check a { color:var(--amber-deep); font-weight:600; text-decoration:underline; }

.btn-primary {
  width:100%; display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 1.2rem; font-family:inherit; font-size:1rem; font-weight:700; border:none; border-radius:12px;
  background:var(--amber); color:var(--on-accent); cursor:pointer;
  box-shadow:0 12px 26px -12px color-mix(in srgb, var(--amber) 70%, transparent);
  transition:transform .14s ease, background .14s ease;
}
.btn-primary:hover { transform:translateY(-1px); background:var(--amber-deep); color:#fff; }

.divider { display:flex; align-items:center; gap:.9rem; margin:1.5rem 0; color:var(--ink-faint); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.divider::before, .divider::after { content:""; flex:1; height:1px; background:var(--line); }

/* Google — official multicolour mark on a clean white button */
.gbtn {
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:.65rem;
  padding:.82rem 1rem; font-family:inherit; font-size:.96rem; font-weight:600; color:#3c4043;
  background:#fff; border:1.5px solid var(--line); border-radius:12px; cursor:pointer;
  transition:background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.gbtn:hover { background:#faf8f3; border-color:#cabfa9; box-shadow:0 6px 16px -10px rgba(25,23,19,.4); }
.gbtn svg { width:18px; height:18px; flex:0 0 auto; }
.gbtn.disabled { cursor:not-allowed; color:var(--ink-faint); }

.foot { margin-top:1.5rem; text-align:center; font-size:.92rem; color:var(--ink-soft); }
.foot a { color:var(--amber-deep); font-weight:600; }
.foot a:hover { text-decoration:underline; }
.backhome { display:block; text-align:center; margin-top:1.1rem; font-size:.85rem; color:var(--ink-faint); }
.backhome:hover { color:var(--ink-soft); }

/* Beta data-safety notice */
.notice { display:flex; gap:.7rem; align-items:flex-start; margin:.3rem 0 1.2rem; padding:.85rem 1rem; border:1px solid color-mix(in srgb, var(--amber) 22%, transparent); background:var(--amber-wash); border-radius:12px; font-size:.83rem; line-height:1.45; color:var(--ink-soft); }
.notice strong { color:var(--ink); }
.notice .ico { color:var(--amber-deep); flex:0 0 auto; font-size:18px; margin-top:1px; }

/* Privacy section — beta signup. Reads as a control panel, not an
   advisory: paper-toned rather than amber-washed so it sits apart from
   .notice, with the switch as the only saturated thing in the block. The
   on/off explainer swaps purely in CSS off the hidden checkbox, so the
   copy stays honest with no JS. */
.section-rule { display:flex; align-items:center; gap:.9rem; margin:1.6rem 0 .9rem; }
.section-rule::after { content:""; flex:1; height:1px; background:var(--line); }
.section-rule h2 { margin:0; font-family:"Fraunces",Georgia,serif; font-size:1.02rem; font-weight:600; color:var(--ink); letter-spacing:-.01em; }

.privacy { position:relative; border:1.5px solid var(--line); background:var(--paper-2); border-radius:14px; padding:.95rem 1.05rem 1rem; margin-bottom:1.2rem; }
.privacy-input { position:absolute; width:1px; height:1px; opacity:0; margin:0; pointer-events:none; }
.privacy-row { display:flex; align-items:flex-start; gap:.9rem; cursor:pointer; }
.privacy-row .ico { color:var(--ink-soft); flex:0 0 auto; font-size:20px; margin-top:1px; transition:color .16s ease; }
.privacy-label { flex:1; min-width:0; }
.privacy-title { display:block; font-size:.93rem; font-weight:700; color:var(--ink); line-height:1.3; }
.privacy-sub { display:block; margin-top:.2rem; font-size:.82rem; line-height:1.45; color:var(--ink-soft); }

/* Track + knob. 2px inset knob, translate on check — the whole switch is
   a single span so the label stays one hit target. */
.switch { flex:0 0 auto; position:relative; width:42px; height:24px; margin-top:.1rem; border-radius:999px; background:#fff; border:1.5px solid var(--line); transition:background .18s ease, border-color .18s ease; }
.switch::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:999px; background:var(--ink-faint); box-shadow:0 1px 3px rgba(25,23,19,.28); transition:transform .18s cubic-bezier(.2,.9,.3,1.4), background .18s ease; }
.privacy-input:checked ~ .privacy-row .switch { background:var(--amber-deep); border-color:var(--amber-deep); }
.privacy-input:checked ~ .privacy-row .switch::after { transform:translateX(19px); background:#fff; }
.privacy-input:checked ~ .privacy-row .ico { color:var(--amber-deep); }
.privacy-input:focus-visible ~ .privacy-row .switch { box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 30%, transparent); }

/* Consequence readout — exactly one of the two is ever in the flow. */
.privacy-state { display:none; margin:.85rem 0 0; padding:.6rem .75rem; border-radius:10px; font-size:.81rem; line-height:1.45; }
.privacy-state strong { font-weight:700; }
.state-off { background:color-mix(in srgb, var(--good) 9%, transparent); border:1px solid color-mix(in srgb, var(--good) 26%, transparent); color:color-mix(in srgb, var(--good) 82%, var(--ink)); }
.state-on { background:var(--amber-wash); border:1px solid color-mix(in srgb, var(--amber) 32%, transparent); color:var(--amber-deep); }
.privacy-input:not(:checked) ~ .state-off { display:block; }
.privacy-input:checked ~ .state-on { display:block; }

/* Always-true footnote: diagnostics keep flowing either way. */
.privacy-foot { display:flex; gap:.5rem; align-items:flex-start; margin:.7rem 0 0; font-size:.78rem; line-height:1.45; color:var(--ink-faint); }
.privacy-foot .ico { font-size:16px; margin-top:1px; flex:0 0 auto; }

/* Verify-code screen */
.otp { width:100%; text-align:center; letter-spacing:.5em; font-family:ui-monospace,"SF Mono",monospace; font-size:1.7rem; font-weight:600; padding:.85rem; border:1.5px solid var(--line); border-radius:12px; background:#fff; color:var(--ink); }
.otp:focus { outline:none; border-color:var(--amber); box-shadow:0 0 0 3px color-mix(in srgb, var(--amber) 18%, transparent); }
.resend { margin-top:1.2rem; text-align:center; font-size:.88rem; color:var(--ink-soft); }
.resend button { background:none; border:none; color:var(--amber-deep); font-weight:600; font-family:inherit; font-size:.88rem; cursor:pointer; text-decoration:underline; padding:0; }
.resend button:disabled { color:var(--ink-faint); cursor:default; text-decoration:none; }
.micro { display:block; text-align:center; margin-top:.7rem; font-size:.8rem; color:var(--ink-faint); }