/* The learner's first run. Ported from onboarding-demo.html and scoped under
   #ob-root, because the demo used bare .step / .pick / .cta / .opt - names
   generic enough that the app is one stylesheet away from colliding with them.
   Nothing in here can apply outside the onboarding container.

   REWRITTEN BECAUSE IT WAS NOT VALID CSS. Whatever did the scoping walked the
   file prefixing "#ob-root " onto anything that looked like a selector, and a
   keyframe step looks exactly like a selector. It produced

       @keyframes nebIn{to{opacity:1}#ob-root }{#ob-root .ob-dot{ ...

   - "#ob-root" inside the keyframes block, the block closed with "}{", and the
   braces left unbalanced 80 to 75. A parser meeting that discards the rest of
   the file, so every rule below the first mangled keyframe never applied:
   .inp was an unstyled default input two sizes too small, and .say fell
   through to a card style in style.css and grew a border it was never meant
   to have. The first run has looked wrong since the day it was ported.

   Keyframes carry no prefix on purpose - their steps are not selectors, and
   their names are already unique to this file. */

#ob-root {
  height: 100%; margin: 0; color: #ededf6;
  background-color: #05040b;
  background-image:
    radial-gradient(80% 55% at 50% 30%, rgba(124,111,247,.15) 0%, rgba(124,111,247,0) 62%),
    radial-gradient(70% 50% at 15% 85%, rgba(72,132,224,.09) 0%, rgba(72,132,224,0) 60%),
    linear-gradient(180deg,#07060f 0%,#05040b 55%,#030209 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  display: flex; flex-direction: column; overflow: hidden;
}

/* ── the sky ─────────────────────────────────────────────────────────── */
#ob-root .ob-sky { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0 }
#ob-root .ob-neb { position: absolute; border-radius: 50%; filter: blur(52px); opacity: 0;
                   animation: nebIn 1.6s ease-out .3s forwards }
#ob-root .ob-neb.n1 { width: 52vmax; height: 36vmax; left: -10vmax; top: -8vmax;
  background: radial-gradient(circle, rgba(124,111,247,.28), rgba(124,111,247,0) 68%) }
#ob-root .ob-neb.n2 { width: 44vmax; height: 44vmax; right: -12vmax; bottom: -14vmax;
  background: radial-gradient(circle, rgba(72,132,224,.14), rgba(72,132,224,0) 66%) }
#ob-root .ob-dot { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s);
  border-radius: 50%; background: rgba(214,208,255,.9);
  animation: obIn .9s ease-out var(--d) backwards, obTw var(--tw) ease-in-out var(--d) infinite }

@keyframes nebIn { to { opacity: 1 } }
@keyframes obIn  { from { opacity: 0; transform: scale(.3) } to { opacity: 1; transform: scale(1) } }
@keyframes obTw  { 0%, 100% { opacity: var(--lo) } 50% { opacity: 1 } }
@keyframes stepIn { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

@media (prefers-reduced-motion: reduce) {
  #ob-root .ob-dot { animation: none; opacity: .55 }
  #ob-root .ob-neb { animation: none; opacity: 1 }
  #ob-root .step.on { animation: none }
}

/* ── frame ───────────────────────────────────────────────────────────── */
#ob-root .ob-head, #ob-root .ob-body { position: relative; z-index: 1 }
#ob-root .ob-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px 0;
                    max-width: 600px; margin: 0 auto; width: 100%; box-sizing: border-box }
#ob-root .ob-back { background: none; border: none; color: var(--text3); font-size: 30px;
                    line-height: 1; cursor: pointer; padding: 0 2px }
#ob-root .ob-back:hover { color: var(--text) }
#ob-root .ob-back[disabled] { opacity: .25; cursor: default }
#ob-root .ob-top { display: flex; gap: 6px; flex: 1 }
#ob-root .seg { flex: 1; height: 5px; border-radius: 99px; background: rgba(255,255,255,.09); overflow: hidden }
#ob-root .seg i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--accent);
                  transition: width .55s cubic-bezier(.22,1,.36,1) }
#ob-root .seg.done i, #ob-root .seg.on i { width: 100% }

/* A screen taller than the window must still reach its own button. This was
   `align-items:center` on a fixed-height flex child with overflow hidden, so
   the reveal - the longest screen, and the only one a learner cannot skip -
   had its Continue button clipped off the bottom with no way to scroll to it. */
#ob-root .ob-body { flex: 1; display: flex; align-items: center; justify-content: center;
                    padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch }
#ob-root .step { max-width: 460px; width: 100%; text-align: center; display: none;
                 margin: auto 0; padding-bottom: 8px }
#ob-root .step.on { display: block; animation: stepIn .5s cubic-bezier(.22,1,.36,1) }

/* ── content ─────────────────────────────────────────────────────────── */
#ob-root .big { width: 96px; height: 96px; margin: 0 auto 22px }
#ob-root .big .vela-star { width: 96px !important; height: 96px !important; left: 0 !important; top: 0 !important }
#ob-root .big .vela-glow { inset: -22px }
#ob-root h2 { font-size: 23px; line-height: 1.35; margin: 0 0 10px; font-weight: 800 }
/* No border, no background: .say is a paragraph. style.css has its own .say
   and it wins the moment this file stops parsing, which is how these turned
   into bordered cards. */
#ob-root p.say { font-size: 14.5px; color: var(--text2); line-height: 1.65; margin: 0 0 24px;
                 background: none; border: none; padding: 0 }
#ob-root .fine { font-size: 12px; color: var(--text3); line-height: 1.6; margin-top: 16px }
#ob-root .qmeta { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
                  color: var(--accent2); margin-bottom: 14px }

#ob-root .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px,1fr));
                 gap: 10px; margin-bottom: 24px }
#ob-root .pick { padding: 16px 10px; border-radius: 14px; border: 1.5px solid var(--border);
                 background: var(--bg2); color: var(--text); font-size: 15px; font-weight: 700;
                 cursor: pointer; transition: .15s }
#ob-root .pick:hover { border-color: var(--accent) }
#ob-root .pick.sel { border-color: var(--accent); background: var(--accent-bg) }
#ob-root .pick.tall { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px }
#ob-root .pick.tall span { font-size: 13.5px }

#ob-root .opts { display: flex; flex-direction: column; gap: 9px; margin-bottom: 18px; text-align: left }
#ob-root .opt { padding: 13px 15px; border-radius: 12px; border: 1.5px solid var(--border);
                background: var(--bg2); color: var(--text); font-size: 14px; line-height: 1.45;
                cursor: pointer; transition: .15s }
#ob-root .opt:hover { border-color: var(--accent) }

#ob-root .cta { width: 100%; padding: 15px; border: none; border-radius: 14px; background: var(--accent);
                color: #fff; font-size: 16px; font-weight: 800; cursor: pointer }
#ob-root .cta[disabled] { opacity: .4; cursor: not-allowed }

/* Full width, same height as the buttons around it, and centred like the rest
   of the screen. It was rendering as a browser default input a third this size. */
#ob-root .inp { width: 100%; box-sizing: border-box; padding: 15px 16px; border-radius: 14px;
                border: 1.5px solid var(--border); background: var(--bg2); color: var(--text);
                font-family: inherit; font-size: 16px; font-weight: 600; text-align: center;
                margin-bottom: 14px; transition: border-color .15s }
#ob-root .inp:focus { outline: none; border-color: var(--accent) }
#ob-root .inp::placeholder { color: var(--text3); font-weight: 500 }

/* ── reveal ──────────────────────────────────────────────────────────── */
#ob-root .bar { height: 9px; border-radius: 99px; background: rgba(255,255,255,.08);
                overflow: hidden; margin: 8px 0 6px }
#ob-root .bar i { display: block; height: 100%; border-radius: 99px;
                  background: linear-gradient(90deg, var(--accent), var(--accent2));
                  width: 0; transition: width 1.1s cubic-bezier(.22,1,.36,1) }
#ob-root .rrow { display: flex; justify-content: space-between; align-items: center;
                 padding: 11px 14px; border-radius: 11px; background: rgba(255,255,255,.035);
                 border: 1px solid rgba(190,180,255,.10); margin-bottom: 7px; font-size: 14px }
#ob-root .rrow .ok { color: #5fd39b; font-weight: 600; font-size: 12.5px; letter-spacing: .02em }
#ob-root .rrow .no { color: rgba(237,237,246,.5); font-weight: 600; font-size: 12.5px; letter-spacing: .02em }
#ob-root .panel { background: var(--bg2); border: 1px solid var(--border); border-radius: 14px;
                  padding: 16px; margin-bottom: 16px; text-align: left }
#ob-root .pt { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
               color: var(--text3); margin-bottom: 9px }
#ob-root .plist { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.75; color: var(--text2) }

/* ── brand ───────────────────────────────────────────────────────────── */
#ob-root .brandmark { display: flex; align-items: center; justify-content: center; gap: 11px; margin-bottom: 6px }
#ob-root .brandmark img { width: 34px; height: 34px }
/* Matched to .optima-wordmark-loading in style.css, which is the real lockup:
   serif, light weight, widely tracked, uppercase, with the glow behind it. The
   letters are separate elements so the last one can take the purple gradient. */
#ob-root .brandmark .ob-word { display: flex; font-family: var(--font-serif); font-size: 26px;
  font-weight: 400; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.88); text-shadow: 0 0 22px rgba(124,111,247,.30) }
#ob-root .tagline { font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
                    color: rgba(190,180,255,.5); font-weight: 700; margin: 0 }
#ob-root .ill, #ob-root .ill-lg { display: block }
#ob-root .scene { display: flex; justify-content: center; margin-bottom: 2px; opacity: .95 }

/* ── consent / legal bits the demo used ──────────────────────────────── */
#ob-root .tick { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 13px;
                 border-radius: 12px; border: 1px solid var(--border); background: var(--bg2);
                 margin-bottom: 16px; cursor: pointer }
#ob-root .tick input { width: 19px; height: 19px; margin: 1px 0 0; accent-color: var(--accent); flex-shrink: 0 }
#ob-root .tick span { font-size: 12.5px; line-height: 1.6; color: var(--text2) }
#ob-root .lnk { background: none; border: none; color: var(--accent2); text-decoration: underline;
                cursor: pointer; font-size: 12px; padding: 0 }

/* THE SUBJECT SCREEN IS THE ONLY TALL ONE, so it is the only one that docks its
   button. Eighteen subjects is about 1150px of chips in a 750px phone window:
   with the button at the natural end of the flow a learner picked their seven
   subjects at the top of the list and then had to scroll the whole way back
   down past the ones they had just said no to, to reach a button whose label
   had changed while they could not see it. Sticky to .ob-body, which is the
   scroll container; the fade is so chips pass under it rather than touch it.
   bottom is -20px, not 0, because .ob-body carries 20px of padding: pinned at 0
   the dock stops at the padding edge and a 20px strip of chips shows BELOW the
   button, which reads as a rendering fault. It is pulled into that padding and
   given the height back as its own, so the solid part of the fade reaches the
   real bottom of the window. */
#ob-root .cta-dock { position: sticky; bottom: -20px; margin-top: 18px; padding: 18px 0 26px;
  background: linear-gradient(180deg, rgba(5,4,11,0) 0%, #05040b 34%) }
#ob-root .cta-dock .cta { margin: 0 }

/* THE ADULT WELCOME SITS OVER THE APP, not inside a page. A teacher's welcome
   is not a destination - it has no URL, no back button and nothing to return
   to - so it is a fixed layer that is removed when it is done, rather than a
   route that would end up in the history of a tour nobody wants to revisit.
   #ob-root inside it is height:100%, so it fills this and nothing else. */
.ob-overlay { position: fixed; inset: 0; z-index: 9000 }

/* The daily goal's identity label, under the number. A goal screen that offers
   10 / 20 / 30 / 60 asks how many minutes you have; one that says "a real habit"
   under the 20 asks what kind of learner you are, which is the question people
   actually answer. Muted, and brightened only on the chosen chip, so the number
   stays the thing you read first. */
#ob-root .pick.tall small { display:block; font-size: 11px; font-weight: 600; margin-top: 2px;
  color: var(--text3); letter-spacing: .01em }
#ob-root .pick.tall.sel small { color: var(--accent2) }

/* The warm-up's feedback: a verdict, then the question's own explanation. It
   was a single bold line with 20px reserved for it, which is the right shape
   for "Correct." and the wrong one for the 140-odd characters that now follow. */
#ob-root .ob-fb { min-height: 20px; text-align: left; font-size: 13px; font-weight: 600 }
#ob-root .ob-fb span { display: block; margin-top: 6px; font-size: 13px; font-weight: 500;
  line-height: 1.6; color: var(--text2) }