/* onboarding.css — ATOM's first-run tour (5 paper steps) + returning lock screen.
   Owns everything inside #onboarding-root and #lock-root; room.css provides the
   fixed placement of those roots and the design tokens. Namespaced .ob- / .lk-
   so teammate layers never collide. Reference device: iPhone 13 mini (375×812). */

/* --- Shell -------------------------------------------------------------------- */

.ob,.lk{
  min-height:100%;
  display:flex;
  flex-direction:column;
  background:var(--bg) url('/art/paper-texture.svg') repeat;
  background-size:160px 160px;
  color:var(--ink);
  font-family:var(--serif);
  -webkit-tap-highlight-color:transparent;
}

/* --- Tour chrome: skip + dots --------------------------------------------------- */

.ob-topbar{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:16px;
  padding:calc(10px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) 0 14px;
  flex-shrink:0;
  font-size:12px;
}
.ob-topbar a{display:inline-flex;align-items:center;min-height:44px;color:var(--muted)}
.ob-skip{
  font-size:11px;
  color:var(--muted);
  padding:8px 10px;
  border-radius:6px;
  transition:color .2s,background .2s;
}
.ob-skip:hover{color:var(--lavender);background:#ffffff59}
.ob-skip[hidden]{display:none}

.ob-dots{
  position:absolute;
  bottom:calc(16px + env(safe-area-inset-bottom));
  left:0;
  right:0;
  display:flex;
  justify-content:center;
  gap:8px;
  z-index:3;
  pointer-events:none;
}
.ob-dot{
  width:7px;height:7px;border-radius:50%;
  background:#c4b49c;
  transition:background .3s ease,transform .3s ease;
}
.ob-dot.on{background:var(--lavender);transform:scale(1.3)}

/* --- Steps: stacked crossfade ------------------------------------------------------ */

.ob-stage{
  position:relative;
  flex:1;
  display:grid;
  min-height:0;
}
.ob-step{
  grid-area:1/1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:calc(26px + env(safe-area-inset-top)) 24px calc(46px + env(safe-area-inset-bottom));
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .45s ease,transform .45s ease,visibility 0s linear .45s;
}
.ob-step.is-active{
  opacity:1;
  visibility:visible;
  transform:none;
  transition:opacity .45s ease,transform .45s ease;
}
.ob-inner{
  width:min(430px,100%);
  margin:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.ob-eyebrow{
  font-size:9px;
  font-weight:500;
  letter-spacing:2px;
  color:var(--muted);
  margin-bottom:10px;
}
.ob-step h2{
  font-size:clamp(30px,8.5vw,44px);
  line-height:1.14;
  letter-spacing:-1px;
  margin:0 0 14px;
}
.ob-step h2:focus{outline:none}
.ob-copy{
  font-size:13px;
  line-height:1.85;
  color:var(--muted);
  margin:0 0 10px;
  max-width:340px;
  overflow-wrap:anywhere;
}
.ob-hand{
  font-family:var(--display);
  font-style:italic;
  color:var(--lavender);
  font-size:18px;
  margin-top:6px;
}
.ob-hand-rule{
  display:block;
  width:120px;
  border-bottom:1px solid #a49bbb;
  transform:rotate(1deg);
  margin:8px auto 0;
}

/* --- Art blocks ---------------------------------------------------------------------- */

.ob-art{flex-shrink:0;margin-bottom:16px}
.ob-art img{display:block;object-fit:contain}

.ob-bf{display:block;width:96px;height:88px;margin:0 auto 14px;animation:obFloat 6s ease-in-out infinite}
.ob-bf img{width:100%;height:100%;transform:rotate(6deg)}

.ob-scene{display:block;width:min(240px,64vw);height:auto;margin:0 auto}

.ob-knot{
  position:relative;
  width:220px;
  height:150px;
  margin:6px auto 10px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-user-select:none;
  user-select:none;
}
.ob-knot img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  transform:scale(.96);
  transition:opacity .4s ease,transform .4s ease;
  pointer-events:none;
}
.ob-knot img.is-shown{opacity:1;transform:none}
.ob-knot:focus-visible{outline:3px solid var(--lavender);outline-offset:6px;border-radius:8px}
.ob-knot-hint{
  font-size:10px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--muted);
  margin:2px 0 0;
  min-height:15px;
}
.ob-knot-hint.is-done{color:var(--lavender);text-transform:none;letter-spacing:.4px;font-style:italic}

@keyframes obFloat{50%{transform:translateY(-7px) rotate(-3deg)}}

/* --- Cards ------------------------------------------------------------------------------ */

.ob-card{
  width:min(360px,100%);
  text-align:left;
  background:var(--violet-paper);
  border:1px solid #cfc3da;
  border-left:4px solid var(--lavender);
  border-radius:9px;
  padding:13px 15px;
  margin:8px 0 4px;
}
.ob-card p{font-size:11px;line-height:1.8;color:var(--ink);margin:0;overflow-wrap:anywhere}
.ob-card .ob-card-eyebrow{
  display:block;
  font-size:8px;
  font-weight:500;
  letter-spacing:1.6px;
  color:var(--lavender);
  margin-bottom:5px;
}
.ob-card.is-warning{
  background:#f3e7d9;
  border-color:#dcc7a8;
  border-left-color:#8d413b;
}
.ob-card.is-warning p{color:#6d4232}
.ob-card.is-warning .ob-card-eyebrow{color:#8d413b}

/* --- Forms ------------------------------------------------------------------------------ */

.ob-form{width:min(340px,100%);display:flex;flex-direction:column;text-align:left}
.ob-form label{
  display:block;
  font-size:11px;
  color:var(--ink);
  margin:13px 0 7px;
}
.ob-form input[type="text"],.ob-form input[type="password"]{
  width:100%;
  padding:11px 12px;
  background:#fff8;
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--ink);
  font-size:16px;
  font-family:var(--serif);
}
.ob-form input::placeholder{color:#a99c8c}
.ob-form input:focus-visible{outline:2px solid var(--lavender);outline-offset:1px}

.ob-buttons{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:20px}
.ob-primary{
  background:#55517f;
  color:#fff;
  border:1px solid #55517f;
  border-radius:7px;
  padding:13px 22px;
  font-size:13px;
  min-width:200px;
  transition:background .2s,transform .15s ease;
}
.ob-primary:hover{background:#4a466f}
.ob-primary:active{transform:scale(.985)}
.ob-ghost{
  border:1px solid var(--line);
  border-radius:6px;
  padding:10px 16px;
  font-size:11px;
  color:var(--ink);
  background:#fff4;
  transition:background .2s;
}
.ob-ghost:hover{background:var(--violet-paper)}
.ob-next{margin-top:22px}

.ob-passkey-hint{font-size:10px;color:var(--muted);margin-top:7px}
.ob-or{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  color:var(--muted);
  font-size:9px;
  letter-spacing:1.6px;
  text-transform:uppercase;
  margin:16px 0 4px;
}
.ob-or::before,.ob-or::after{content:'';flex:1;border-top:1px solid var(--line)}

.ob-error{
  min-height:18px;
  margin:10px 0 0;
  font-size:11px;
  line-height:1.7;
  color:#8d413b;
  text-align:center;
  overflow-wrap:anywhere;
}
.ob-error:empty{margin:0}

.ob-optin{
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:min(320px,100%);
  text-align:left;
  font-size:12px;
  line-height:1.7;
  color:var(--ink);
  background:#fff4;
  border:1px solid var(--line);
  border-radius:8px;
  padding:12px 14px;
  margin:14px 0 2px;
  cursor:pointer;
}
.ob-optin input{
  flex-shrink:0;
  width:17px;height:17px;
  accent-color:var(--lavender);
  margin-top:3px;
}
.ob-optin small{display:block;font-size:10px;color:var(--muted)}

/* --- Lock screen -------------------------------------------------------------------------- */

.lk{align-items:center;justify-content:center;text-align:center;padding:24px}
.lk .lk-bf{display:block;width:88px;height:80px;margin:0 auto 12px;animation:obFloat 6s ease-in-out infinite}
.lk .lk-bf img{width:100%;height:100%;transform:rotate(6deg)}
.lk h2{font-size:clamp(30px,8.5vw,44px);letter-spacing:-1px;margin:0 0 10px}
.lk-copy{font-size:13px;color:var(--muted);margin:0 0 20px}
.lk-form{width:min(320px,100%);display:flex;flex-direction:column;text-align:left}
.lk-form label{display:block;font-size:11px;margin:0 0 7px}
.lk-form input[type="password"]{
  width:100%;
  padding:12px 13px;
  background:#fff8;
  border:1px solid var(--line);
  border-radius:6px;
  color:var(--ink);
  font-size:16px;
  font-family:var(--serif);
}
.lk-buttons{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:16px}
.lk-hint{font-size:10px;color:var(--muted);text-align:center;margin-top:8px}
.lk-or{
  display:flex;align-items:center;gap:10px;width:100%;
  color:var(--muted);font-size:9px;letter-spacing:1.6px;text-transform:uppercase;margin:14px 0 0;
}
.lk-or::before,.lk-or::after{content:'';flex:1;border-top:1px solid var(--line)}
.lk-error{
  min-height:18px;margin:12px 0 0;font-size:11px;color:#8d413b;text-align:center;overflow-wrap:anywhere;
}
.lk-error:empty{margin:0}
.lk-fade{animation:lkIn .5s ease both}
@keyframes lkIn{from{opacity:0;transform:translateY(10px)}}

/* Busy state shared by both screens */
.ob-busy{opacity:.55;cursor:wait;pointer-events:none}

/* --- Wide screens -------------------------------------------------------------------------- */

@media(min-width:700px){
  .ob-step h2{font-size:46px}
  .ob-scene{width:280px}
  .ob-bf{width:112px;height:102px}
}

/* --- Short screens (iPhone landscape-ish, small laptops) ------------------------------------- */

@media(max-height:640px){
  .ob-bf{width:74px;height:68px;margin-bottom:8px}
  .ob-art{margin-bottom:8px}
  .ob-scene{width:190px}
  .ob-step{padding-top:calc(14px + env(safe-area-inset-top))}
  .ob-step h2{font-size:28px;margin-bottom:8px}
  .ob-copy{margin-bottom:6px}
  .ob-hand{margin-top:2px}
  .ob-buttons{margin-top:12px}
}

/* --- Reduced motion: instant states ----------------------------------------------------------- */

@media(prefers-reduced-motion:reduce){
  .ob,.lk,.ob-step,.ob-bf,.ob-bf img,.ob-knot img,.ob-dot,.ob-primary,.lk .lk-bf,.lk-fade{
    animation:none!important;
    transition:none!important;
  }
  .ob-step{transform:none}
  .ob-knot img{transition:opacity .01s linear}
}

/* The wings tagline — Akraya's signature line (user-authored). */
.ob-tagline{font-family:'IM Fell English',Georgia,serif;font-style:italic;color:#2d3748;font-size:21px;line-height:1.35;margin-top:18px}
.ob-tagline-by{font-size:11px;color:#665f57;letter-spacing:.08em;margin-top:4px}
.ob-skip{display:none!important}