/* Flora CEO: shell. Install + sign-in screens and settings. */

/* ---------- first-impression screens: one object, one line, one door ---------- */
.onboard {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column;
  background: radial-gradient(90% 55% at 50% 30%, rgba(0, 226, 124, .16), transparent 70%), var(--bg); overflow: hidden;
  padding: calc(var(--safe-t) + 20px) 28px calc(var(--safe-b) + 18px);
  animation: ob-in .45s var(--ease) both;
}
.onboard.leaving { animation: ob-out .4s var(--ease) forwards; }
.onboard-inner { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; max-width: 420px; width: 100%; margin: 0 auto; }
.onboard-hero { position: relative; width: 124px; height: 124px; animation: ob-rise .8s var(--spring) .05s both; }
.onboard-icon { width: 124px; height: 124px; border-radius: 28px; display: block; box-shadow: 0 30px 70px -18px rgba(0, 226, 124, .32), 0 10px 22px -10px #000, inset 0 0 0 .5px rgba(255, 255, 255, .25); }
.onboard-title { font: 400 56px/1 var(--font-display); letter-spacing: -.018em; margin-top: 34px; text-wrap: balance; font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "hlig" 0, "calt" 0; animation: ob-up .6s var(--ease) .2s both; }
.onboard-title em { font-style: italic; color: var(--green); padding-right: .04em; }
.install .onboard-title { font-size: 44px; }
.onboard-sub { font-size: 16px; line-height: 1.45; color: var(--ink-2); max-width: 310px; margin-top: 12px; text-wrap: pretty; animation: ob-up .6s var(--ease) .28s both; }
.onboard-foot { max-width: 420px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 4px; animation: ob-up .6s var(--ease) .36s both; }
.onboard-foot .link-btn { color: var(--ink-2); font-weight: 700; }
.si-code { width: 100%; max-width: 300px; margin-top: 24px; }
.si-input { text-align: center; font: 600 24px/1 var(--font-ui); letter-spacing: .18em; height: 58px; }
.si-input::placeholder { font-size: 16px; letter-spacing: 0; font-weight: 500; }
.si-err { min-height: 20px; margin-top: 10px; font-size: 13.5px; font-weight: 600; color: var(--coral-deep); }
.install-steps { list-style: none; margin: 26px 0 0; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 330px; animation: ob-up .6s var(--ease) .34s both; }
.install-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.4; color: var(--ink); font-weight: 500; }
.install-steps b { font-weight: 800; }
.step-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--font-ui); color: var(--on-green); background: var(--green); margin-top: -1px; }
.step-ic { display: inline-flex; vertical-align: -4px; color: var(--green-deep); }
.step-ic svg { width: 18px; height: 18px; }
@keyframes ob-in { from { opacity: 0; } }
@keyframes ob-out { to { opacity: 0; transform: scale(1.02); } }
@keyframes ob-rise { from { opacity: 0; transform: translateY(20px) scale(.92); } }
@keyframes ob-up { from { opacity: 0; transform: translateY(12px); } }

/* ---------- settings ---------- */
.settings-sheet .sheet-body { padding-bottom: 34px; }
.set-card { margin-top: 18px; }
.set-card.first { margin-top: 6px; }
.set-card.tight { margin-top: 0; }
.set-card .row { width: 100%; text-align: left; }
.set-card button.row:active { background: var(--fill); }
.set-ok { color: var(--green); }
.settings-sheet [data-seg="bibleVersion"] button { padding: 0; font-size: 12.5px; }
.set-about { text-align: center; margin: 28px 10px 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.set-about-name { font-size: 26px; }
.set-about p { max-width: 320px; line-height: 1.45; }

/* ---------- first paint ---------- */
html:not(.ready) .tabbar { opacity: 0; }
html.booting body { transition: none !important; }