/* The first-launch steps: the dragon, one line on the welcome, plain labels after. Nothing else on the page. */
#onboard { position:fixed; inset:0; z-index:15; background:var(--paper); color:var(--body); display:grid; grid-template-rows:52px 1fr; }
#onboard.leaving { animation:fadeOut var(--t-out) var(--ease-in) forwards; }
#onboard .ob-top { display:flex; align-items:center; padding:0 22px 0 18px; -webkit-app-region:drag; }
.mac #onboard .ob-top { padding-left:88px; }
#onboard .ob-dashes { margin-left:auto; display:flex; gap:4px; }
#onboard .ob-dashes i { display:block; width:20px; height:3px; border-radius:2px; background:var(--line); transition:background var(--t-in) var(--ease-out); }
#onboard .ob-dashes i.on { background:var(--acc); }
#onboard .ob-mid { display:flex; flex-direction:column; align-items:center; min-height:0; overflow-y:auto; padding:0 24px; }
/* the same room under the steps as the bar above; when a long step scrolls it stays below the last button */
#onboard .ob-mid::after { content:""; flex:none; height:52px; }
#onboard .ob-step { width:440px; max-width:100%; margin-block:auto; }
#onboard .ob-step.wide { width:780px; }
#onboard .ob-step.hello { width:fit-content; max-width:700px; }
#onboard .ob-guide { width:50px; height:50px; display:block; margin:0 0 16px -6px; -webkit-user-drag:none; }
#onboard .ob-hero { width:140px; height:140px; display:block; margin:0 0 18px -15px; overflow:visible; -webkit-user-drag:none; }
/* headings here are plain blocks, not the app's h1 row (style.css), so the welcome's two lines stack */
#onboard h1 { display:block; font-family:var(--serif); font-weight:400; font-size:40px; line-height:1.1; color:var(--ink); letter-spacing:-.012em; margin:0 0 28px; text-wrap:balance; }
#onboard h1.display { font-size:64px; letter-spacing:-.02em; margin-bottom:34px; }
#onboard h1.display span { display:block; }
/* the first time the steps open, the rest of the line and the buttons arrive as the dragon lands (--land, from dragon.js) */
#onboard .hello.intro h1 span:last-child { animation:fadeUp .4s var(--ease-out) var(--land) backwards; }
#onboard .hello.intro .ob-acts { animation:obLate .4s var(--ease-out) var(--land) backwards; }
@keyframes obLate { from { opacity:0; transform:translateY(6px); visibility:hidden; } }

.ob-btn { height:40px; padding:0 18px; border-radius:10px; font:500 14px/1 var(--font); display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; transition:opacity .12s, transform .1s, background .12s; }
.ob-btn:active { transform:scale(.98); }
.ob-btn.primary { background:var(--acc); color:#fff; }
html[data-theme="dark"] .ob-btn.primary { color:#12161a; }
.ob-btn.primary:hover { opacity:.9; }
.ob-btn:disabled { opacity:.45; cursor:default; }
.ob-btn.line { width:100%; background:var(--paper); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); }
.ob-btn.line:hover { background:var(--line-soft); }
.ob-btn.text { color:var(--muted); padding:0 10px; }
.ob-btn.text:hover { color:var(--ink); }
.ob-btn.acc { color:var(--acc-ink); }
.ob-btn .g { width:17px; height:17px; }
.ob-acts { display:flex; align-items:center; gap:8px; margin-top:26px; }
.ob-acts .spacer { flex:1; }
.ob-back { color:var(--muted); font-size:14px; font-weight:500; height:40px; }
.ob-back:hover { color:var(--ink); }
.ob-links { display:flex; gap:20px; margin-top:16px; font-size:13px; }
.ob-links button { color:var(--acc-ink); font-weight:500; }
.ob-links button:hover { text-decoration:underline; text-underline-offset:2px; }
.ob-err { font-size:13px; color:var(--warn); margin-top:10px; }
.ob-err:empty { display:none; }

.ob-in { display:block; width:100%; height:44px; border:0; border-radius:10px; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); padding:0 14px; font-size:15px; color:var(--ink); margin-bottom:10px; outline:0; user-select:text; -webkit-user-select:text; transition:box-shadow .12s; }
.ob-in::placeholder { color:var(--faint); }
.ob-in:focus { box-shadow:inset 0 0 0 1px var(--acc), 0 0 0 4px var(--acc-soft); }
textarea.ob-in { height:112px; padding:12px 14px; line-height:1.55; resize:none; }
.ob-or { display:flex; align-items:center; gap:12px; color:var(--faint); font-size:12px; margin:16px 0; }
.ob-or::before, .ob-or::after { content:""; flex:1; height:1px; background:var(--line); }

.ob-code { display:flex; gap:10px; }
.ob-code input { width:52px; height:62px; border:0; border-radius:12px; box-shadow:inset 0 0 0 1px var(--line); background:var(--paper); text-align:center; font:400 29px var(--serif); color:var(--ink); outline:0; caret-color:var(--acc); user-select:text; -webkit-user-select:text; }
.ob-code input:nth-child(4) { margin-left:12px; }
.ob-code input:focus { box-shadow:inset 0 0 0 1.5px var(--acc), 0 0 0 4px var(--acc-soft); }
/* the reset code's screen: the new password under the code */
.ob-code + .ob-in { margin-top:14px; }

.ob-tiles { display:grid; grid-template-columns:repeat(5, 1fr); gap:10px; }
.ob-tile { height:80px; border-radius:14px; background:var(--paper); box-shadow:inset 0 0 0 1px var(--line); padding:14px 16px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; text-align:left; transition:box-shadow .12s, background .12s; }
.ob-tile:hover { box-shadow:inset 0 0 0 1px var(--faint); }
.ob-tile .ob-logo { display:block; width:28px; height:28px; color:var(--ink); }
.ob-tile .ob-logo svg { display:block; width:28px; height:28px; }
.ob-tile small { font-size:12.5px; color:var(--acc-ink); font-weight:500; }
.ob-tile.on { box-shadow:inset 0 0 0 1.5px var(--acc); background:color-mix(in srgb, var(--acc) 5%, var(--paper)); }
.ob-tile:disabled { opacity:.6; cursor:default; }
.ob-row { display:flex; align-items:center; width:100%; margin-top:12px; padding:16px 18px; border-radius:14px; box-shadow:inset 0 0 0 1px var(--line); font-weight:600; font-size:14.5px; color:var(--ink); text-align:left; }
.ob-switch { margin-left:auto; width:36px; height:22px; border-radius:11px; background:var(--line); position:relative; flex:none; transition:background var(--t-in) var(--ease-out); }
.ob-switch::after { content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform var(--t-in) var(--ease-out); }
.ob-switch.on { background:var(--acc); }
.ob-switch.on::after { transform:translateX(14px); }

.ob-choice { display:block; width:100%; text-align:left; position:relative; padding:16px 18px 16px 48px; border-radius:14px; box-shadow:inset 0 0 0 1px var(--line); margin-bottom:10px; font-weight:600; font-size:15px; color:var(--ink); transition:box-shadow .12s, background .12s; }
.ob-choice::before { content:""; position:absolute; left:18px; top:17px; width:16px; height:16px; border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--faint); transition:box-shadow var(--t-in) var(--ease-out); }
.ob-choice.on { box-shadow:inset 0 0 0 1.5px var(--acc); background:color-mix(in srgb, var(--acc) 5%, var(--paper)); }
.ob-choice.on::before { box-shadow:inset 0 0 0 5px var(--acc); }
.ob-rules { margin:2px 0 8px; }

/* keyboard focus keeps each control's own shape; the app's plain ring would square them off */
#onboard :is(.ob-btn, .ob-tile, .ob-choice, .ob-row, .ob-back, .ob-links button):focus-visible { outline:2px solid var(--faint); outline-offset:2px; }
#onboard .ob-btn:focus-visible { border-radius:10px; }
#onboard :is(.ob-tile, .ob-choice, .ob-row):focus-visible { border-radius:14px; }

/* a step slides 12px the way you are going; the old one leaves the same way */
#onboard .ob-step.fwd-in { animation:obFwdIn var(--t-in) var(--ease-out); }
#onboard .ob-step.back-in { animation:obBackIn var(--t-in) var(--ease-out); }
#onboard .ob-step.fwd-out { animation:obFwdOut var(--t-out) var(--ease-in) forwards; }
#onboard .ob-step.back-out { animation:obBackOut var(--t-out) var(--ease-in) forwards; }
@keyframes obFwdIn { from { opacity:0; transform:translateX(12px); } }
@keyframes obBackIn { from { opacity:0; transform:translateX(-12px); } }
@keyframes obFwdOut { to { opacity:0; transform:translateX(-12px); } }
@keyframes obBackOut { to { opacity:0; transform:translateX(12px); } }