/* /app base layer. Owns: the four view shells, the onboarding grid (rail, stage, preview, mobile
   sheet), the screen transition states, and the creating layout. Nothing here styles a single screen
   or a single panel: those live in css/app/step-<id>.css and css/app/console*.css.
   Every colour, radius and easing comes from css/tokens.css. App-only variables are prefixed --app-.
   Load order: tokens.css, main.css, base.css, components.css, then the per-screen files. */

:root{
  --app-rail-w:220px;
  --app-preview-w:320px;
  --app-col-gap:clamp(24px,4vw,56px);
  --app-stage-max:720px;
  --app-pad-top:clamp(24px,4vw,56px);
  --app-sheet-peek:56px;
  --app-r-row:12px;
  --app-r-input:12px;
  --app-dur:.4s;
}
@media (prefers-reduced-motion:reduce){:root{--app-dur:0s}}

/* ---------- views ----------
   One view is visible at a time. The router sets body[data-view] and unhides the section; the
   [hidden] attribute (tokens.css) does the hiding, so a view is inert to screen readers too. */
body.app{background:var(--bg)}
/* the ground the glass reads against: three soft washes in the shader families over white, fixed,
   under everything, no graphics context. Alpha stays low so every composite still resolves near white. */
.app-field{position:fixed;inset:0;z-index:0;pointer-events:none;contain:strict;will-change:transform;background:
  radial-gradient(60% 55% at 12% 8%,rgba(36,87,255,.10),transparent 70%),
  radial-gradient(55% 60% at 90% 18%,rgba(110,75,255,.07),transparent 70%),
  radial-gradient(70% 60% at 70% 100%,rgba(15,163,107,.08),transparent 70%),
  var(--bg)}
.app-field::after{content:"";position:absolute;inset:0;opacity:.045;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
@media (prefers-reduced-transparency:reduce){.app-field{background:var(--bg)}.app-field::after{display:none}}
.app-main{position:relative;z-index:1;min-height:calc(100dvh - var(--nav-h));padding:var(--app-pad-top) 0 96px}
.v-auth,.v-onboard,.v-creating,.v-console{display:block}
.v-onboard{padding:0 0 0}
.v-console{padding:0}
body[data-view="onboard"] .app-main,
body[data-view="console"] .app-main{padding-top:0}

/* view crossfade: the router adds .is-leaving to the outgoing view for one frame */
.v-auth,.v-onboard,.v-creating,.v-console{transition:opacity .25s var(--ease)}
.is-leaving{opacity:0;pointer-events:none}

/* ---------- onboarding shell ---------- */
.ob-grid{
  display:grid;
  grid-template-columns:var(--app-rail-w) minmax(0,var(--app-stage-max)) var(--app-preview-w);
  gap:var(--app-col-gap);
  justify-content:center;
  max-width:var(--maxw);
  margin:0 auto;
  padding:var(--app-pad-top) var(--gutter) 96px;
  min-height:calc(100dvh - var(--nav-h));
  align-items:start;
}

/* rail (row styling lives in components.css) */
.ob-rail{position:sticky;top:calc(var(--nav-h) + 24px);display:flex;flex-direction:column;gap:20px}
.ob-rail-foot{display:flex;flex-direction:column;align-items:flex-start;gap:8px}

/* stage: one .screen at a time, mounted by the router into #app-root */
.ob-stage{position:relative;min-width:0}

/* preview rail */
.ob-preview{position:sticky;top:calc(var(--nav-h) + 24px);min-width:0}
.ob-sheet-bar{display:none}

/* mobile strip under the nav, desktop hides it */
.ob-mob{display:none}

/* ---------- screen transition states ----------
   Both states are declarative so GSAP can take over without fighting a transition, and so a
   reduced-motion visitor lands on the final state with no tween at all. */
.ob-stage .screen{display:none}
.ob-stage .screen.is-on{display:block}
.screen.is-enter{opacity:0;transform:translateY(24px)}
.screen.is-exit{opacity:0;transform:translateY(-20px)}
.screen.is-on:not(.is-enter):not(.is-exit){opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .screen.is-enter,.screen.is-exit{opacity:1;transform:none}
}

/* ---------- creating ---------- */
.v-creating .container{padding-top:var(--app-pad-top)}
.creating{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,40px);align-items:start}
.creating-l{min-width:0;display:grid;gap:16px}
.creating-r{min-width:0;display:grid;gap:16px;align-content:start}

/* ---------- tablet: rail becomes a strip, preview drops under the actions ---------- */
@media (max-width:1180px){
  :root{--app-preview-w:280px}
}
@media (max-width:1023px){
  .ob-grid{grid-template-columns:minmax(0,1fr);gap:24px;padding-top:20px}
  .ob-rail{position:static;flex-direction:row;align-items:center;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .ob-rail::-webkit-scrollbar{display:none}
  .ob-rail-foot{flex-direction:row;align-items:center;gap:12px;margin-left:auto;flex:none}
  .ob-preview{position:static;order:3}
  .ob-stage{order:2}
  .creating{grid-template-columns:1fr}
}

/* ---------- mobile: progress strip, full-width stage, preview as a bottom sheet ---------- */
@media (max-width:767px){
  .app-main{padding-bottom:120px}
  .ob-mob{display:block;position:sticky;top:var(--nav-h);z-index:12;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:0 20px 8px}
  .ob-mob-k{font-size:12px;color:var(--text-3);padding-top:8px}
  .ob-grid{padding:16px 20px 96px;gap:16px;min-height:auto}
  .ob-rail{display:none}

  /* actions pinned to the bottom, the screen keeps room for them */
  .ob-stage{padding-bottom:8px}
  .ob-stage .screen-f{position:fixed;left:0;right:0;bottom:0;z-index:14;display:flex;align-items:center;gap:10px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
  .ob-stage .screen-f .pill{flex:1}
  .ob-stage .screen-f .screen-hint{display:none}

  /* preview sheet: a 56 px peek bar that expands to 70 dvh */
  .ob-preview{position:fixed;left:0;right:0;bottom:0;z-index:16;background:var(--bg);border-top:1px solid var(--line);border-radius:var(--r-tile) var(--r-tile) 0 0;max-height:var(--app-sheet-peek);overflow:hidden;transition:max-height .35s var(--ease);padding:0}
  .ob-preview.is-open{max-height:70dvh;box-shadow:0 -20px 60px -30px rgba(10,10,20,.35)}
  .ob-sheet-bar{display:flex;align-items:center;gap:10px;width:100%;height:var(--app-sheet-peek);padding:0 20px;background:none;border:0;text-align:left;cursor:pointer}
  .ob-sheet-dot{width:20px;height:20px;border-radius:50%;background:var(--bg-3);flex:none}
  .ob-sheet-name{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ob-sheet-sw{display:inline-flex;gap:4px;margin-left:auto}
  .ob-sheet-sw i{width:10px;height:10px;border-radius:50%;display:block;background:var(--bg-3)}
  .ob-sheet-caret{flex:none;transform:rotate(-90deg);transition:transform .3s var(--ease);color:var(--text-3)}
  .ob-preview.is-open .ob-sheet-caret{transform:rotate(90deg)}
  .ob-preview-in{padding:0 20px 20px;overflow-y:auto;max-height:calc(70dvh - var(--app-sheet-peek));overscroll-behavior:contain}

  /* the sheet sits above the fixed actions, so lift them when it opens */
  body[data-sheet-open] .ob-stage .screen-f{transform:translateY(120%);pointer-events:none}
}
@media (max-width:767px) and (prefers-reduced-motion:reduce){
  .ob-preview,.ob-sheet-caret{transition:none}
}

/* ---------- console shell sits inside .container, not .app-main padding ---------- */
body[data-view="console"] .app-main{padding-bottom:0}

/* the product mark stands alone in the corner: no wordmark inside the system */
.nav-logo.is-mark img{height:21px;width:auto;display:block}
@media (max-width:520px){.nav-logo.is-mark img{height:19px}}

/* Legal links under the registration rail and the console rail */
.rail-legal{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:var(--text-3)}
.rail-legal a{color:var(--text-3);text-decoration:none}
.rail-legal a:hover,.rail-legal a:focus-visible{color:var(--text);text-decoration:underline}