/* Shared pieces of the sign-in flow: screen layout, phone and code fields, player card, lock-screen notification, system alert.
   Used by OnboardingFlow.html and Prototype.html. Load after proposal-kit.css. */
/* one screen of the flow: content on top, actions pinned to the bottom */
.ob { height: 100%; box-sizing: border-box; padding: 64px var(--space-5) var(--space-7); display: flex; flex-direction: column; gap: var(--space-5); }
.ob-back { align-self: flex-start; margin: -12px 0 0; }
.ob h1 { margin: 0; font-family: var(--font-fa-display); font-weight: 400; font-size: 32px; line-height: 46px; }
.ob-lead { margin: 0; color: var(--text-secondary); }
.ob-grow { flex: 1; }
.ob-actions { display: flex; flex-direction: column; gap: var(--space-2); }
.ob-fine { margin: 0; color: var(--text-muted); text-align: center; }
.ob-card { background: var(--surface-2); border: var(--stroke-hairline) solid var(--border); border-radius: var(--radius-card); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.ob-card h3 { margin: 0; font-family: var(--font-fa-display); font-weight: 400; font-size: 18px; line-height: 30px; }
.ob-feat { display: flex; align-items: center; gap: var(--space-3); margin: 0; }
.ob-feat .px-ic { color: var(--text-primary); }
.ob-word { margin: 0; font-family: var(--font-fa-display); font-size: 52px; line-height: 60px; }

/* phone number field */
.ob-field { display: flex; flex-direction: column; gap: var(--space-2); }
.ob-field label { color: var(--text-secondary); }
.ob-input { box-sizing: border-box; width: 100%; height: 56px; padding: 0 var(--space-4); background: var(--surface-1); color: var(--text-primary); border: var(--stroke-control) solid var(--border-strong); border-radius: var(--radius-canvas); font-family: var(--font-fa-display); font-size: 22px; letter-spacing: 2px; direction: ltr; text-align: left; }
.ob-input::placeholder { color: var(--text-muted); opacity: 1; }
.ob-input:focus-visible { outline: none; border-color: var(--text-primary); box-shadow: var(--focus-ring); }
.ob-field.is-error .ob-input { border-color: var(--danger-ink); border-width: 2px; }
.ob-hint { margin: 0; color: var(--text-muted); }
.ob-err { display: flex; align-items: flex-start; gap: var(--space-1); margin: 0; color: var(--danger-ink); }

/* one-time code: one real input (autocomplete=one-time-code) over five drawn boxes */
.ob-otp { position: relative; direction: ltr; }
.ob-otp input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; font-size: 16px; cursor: text; }
.ob-otp-boxes { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-2); pointer-events: none; }
.ob-otp-box { height: 60px; display: flex; align-items: center; justify-content: center; background: var(--surface-1); border: var(--stroke-control) solid var(--border-strong); border-radius: var(--radius-canvas); font-family: var(--font-fa-display); font-size: 26px; color: var(--text-primary); box-sizing: border-box; }
.ob-otp-box.is-cur { border-color: var(--text-primary); }
.ob-otp input:focus-visible + .ob-otp-boxes .ob-otp-box.is-cur { box-shadow: var(--focus-ring); }
.ob-otp.is-error .ob-otp-box { border-color: var(--danger-ink); border-width: 2px; }
.ob-otp.is-ok .ob-otp-box { border-color: var(--progress); }
.ob-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.ob-meta p { margin: 0; color: var(--text-secondary); }

/* the player card the club created */
.ob-player { display: flex; align-items: center; gap: var(--space-4); }
.ob-num { width: 64px; height: 64px; flex: none; border-radius: var(--radius-full); background: var(--surface-1); border: var(--stroke-control) solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-family: var(--font-fa-display); font-size: 26px; }
.ob-player h3 { margin: 0; font-family: var(--font-fa-display); font-weight: 400; font-size: 22px; line-height: 34px; }
.ob-player p { margin: 0; color: var(--text-secondary); }
.ob-rows { display: flex; flex-direction: column; }
.ob-rows > div { display: flex; justify-content: space-between; min-height: 44px; align-items: center; border-top: var(--stroke-hairline) solid var(--border); }
.ob-rows > div:first-child { border-top: 0; }
.ob-rows span:first-child { color: var(--text-secondary); }

/* lock screen + notifications */
.ob-lock { height: 100%; box-sizing: border-box; padding: 64px var(--space-5) var(--space-7); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); background: var(--watch-ground); }
.ob-lock-time { font-family: var(--font-fa-display); font-size: 80px; line-height: 88px; }
.ob-note { width: 100%; box-sizing: border-box; padding: var(--space-4); border-radius: var(--radius-card); background: var(--glass-fill); border: var(--stroke-control) solid var(--glass-stroke); -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(180%); backdrop-filter: blur(var(--blur-glass)) saturate(180%); box-shadow: var(--shadow-glass); display: flex; gap: var(--space-3); align-items: flex-start; }
.ob-appicon { width: 38px; height: 38px; flex: none; border-radius: var(--radius-canvas); background: var(--progress); color: var(--on-progress); display: flex; align-items: center; justify-content: center; }
.ob-appicon.is-msg { background: var(--surface-1); color: var(--text-primary); border: var(--stroke-hairline) solid var(--border); }
.ob-note-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ob-note-top { display: flex; justify-content: space-between; color: var(--glass-ink-secondary); }
.ob-note-body p { margin: 0; }

/* the system permission alert (drawn, not ours) */
.ob-scrim { position: absolute; inset: 0; z-index: 45; background: var(--scrim); display: flex; align-items: center; justify-content: center; padding: 0 44px; }
.ob-alert { width: 100%; border-radius: var(--radius-card); background: var(--surface-2); border: var(--stroke-hairline) solid var(--border); box-shadow: var(--shadow-glass); overflow: hidden; text-align: center; }
.ob-alert-body { padding: var(--space-5) var(--space-5) var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.ob-alert-body p { margin: 0; }
.ob-alert-acts { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--stroke-hairline) solid var(--border); }
.ob-alert-acts > * { min-height: 44px; display: flex; align-items: center; justify-content: center; }
.ob-alert-acts > * + * { border-inline-start: var(--stroke-hairline) solid var(--border); font-weight: 500; }

.ob-kit-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.ob-alert-acts button { background: none; border: 0; padding: 0; font-family: inherit; font-size: inherit; line-height: inherit; color: var(--text-primary); cursor: pointer; }
.ob-alert-acts button:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.ob-scroll { overflow-y: auto; }