/* The signed-in app: one light theme, white + purple (owner's brief 2026-11-11; the login screen is the reference).
   Everything here is scoped to :root.in-app (set by app.js only while the app shell is shown), so the frozen login screen,
   the public pages and the pricing cards keep their own look. Brand colours from public/brand.json (#623be8 / #4a28c4).
   Motion: one curve cubic-bezier(.22,1,.36,1); pages 320 ms, controls 220 ms; close is faster than open; transform/opacity only. */
:root.in-app{color-scheme:light;
  --bg:#f7f6fd;--card:#fff;--card-2:#f4f2fc;--line:#e9e5f6;--line-2:#d8d1ef;--ink:#16133a;--muted:#5b587a;
  --brand:#623be8;--brand-d:#4a28c4;--brand-hi:#7350f0;--brand-l:#efeafe;--on-brand:#fff;--ring:#623be8;
  --field:#fff;--hover:#f4f1fd;--hl:rgba(255,255,255,.9);
  --shadow-1:0 1px 2px rgba(74,40,196,.06),0 8px 22px -14px rgba(74,40,196,.28);
  --shadow-2:0 2px 6px rgba(74,40,196,.08),0 26px 50px -20px rgba(74,40,196,.36);
  --shadow-brand:0 8px 20px -8px rgba(98,59,232,.55);
  --r:18px;--r-s:12px;--ease:cubic-bezier(.22,1,.36,1);--t-fast:.12s;--t:.22s;--t-slow:.32s}
:root.in-app body{background:linear-gradient(180deg,#fcfbff 0,#f6f3fe 55%,#f1edfd 100%) fixed}

/* soft background shapes: two lavender glows at the edges, low contrast, fixed behind everything */
.in-app .app::before{position:fixed;inset:0;height:auto;background:
  radial-gradient(38rem 30rem at 92% -6%,rgba(139,108,255,.16),transparent 70%),
  radial-gradient(34rem 28rem at -8% 108%,rgba(98,59,232,.10),transparent 70%),
  radial-gradient(22rem 18rem at 12% 8%,rgba(186,170,255,.12),transparent 70%)}

/* ---- top bar: white glass, ink text, purple only for what is active ---- */
.in-app .topbar{background:rgba(255,255,255,.78);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);color:var(--ink);box-shadow:0 1px 0 var(--line),0 12px 30px -24px rgba(74,40,196,.45)}
.in-app .topbar::after{height:1px;opacity:.45;animation:none;background:linear-gradient(90deg,transparent,var(--brand) 30%,#b9a7ff 50%,var(--brand) 70%,transparent)}
.in-app .topbar .logo{color:var(--ink)}.in-app .topbar .logo img{background:var(--brand-l)}
.in-app .snav{color:var(--muted)}.in-app .snav:hover{background:var(--hover);color:var(--ink)}.in-app .snav.on{color:var(--brand-d)}
.in-app .sections .sec-ind{background:var(--brand-l);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 16%,transparent)}
.in-app .sections:not(.has-ind) .snav.on{background:var(--brand-l)}
.in-app .topbar .pill,.in-app .topbar .icon-btn{background:#fff;color:var(--ink);border:1px solid var(--line-2)}
.in-app .topbar .pill:hover,.in-app .topbar .icon-btn:hover{background:var(--hover);border-color:color-mix(in srgb,var(--brand) 35%,var(--line-2))}
.in-app .topbar .kbd-btn{color:var(--muted)}.in-app .topbar .kbd-btn kbd{border-color:var(--line-2);color:var(--muted);background:var(--card-2)}
.in-app .topbar .upgrade{background:var(--brand-l);color:var(--brand-d);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 22%,transparent)}
.in-app .bell-badge{border-color:#fff}

/* ---- surfaces ---- */
.in-app .card{border-color:var(--line);box-shadow:inset 0 1px 0 var(--hl),var(--shadow-1)}
.in-app .page-sub{color:var(--muted)}
.in-app h1,.in-app h2,.in-app h3{font-weight:650}

/* ---- buttons: primary = the login Sign in gradient; secondary = white with purple text; press 0.98 ---- */
.in-app .btn{min-height:44px}.in-app .btn.sm{min-height:36px}
.in-app .btn.primary{background:linear-gradient(135deg,#6d48ee,#623be8 40%,#4a28c4 80%,#3d3fcf);border-color:transparent;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),var(--shadow-brand)}
.in-app .btn.primary:hover{background:linear-gradient(135deg,#6d48ee,#623be8 40%,#4a28c4 80%,#3d3fcf);filter:brightness(1.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 26px -10px rgba(98,59,232,.7)}
.in-app .btn:not(.primary):not(.danger):not(.ghost){background:#fff;color:var(--brand-d);border-color:color-mix(in srgb,var(--brand) 26%,var(--line-2))}
.in-app .btn:not(.primary):not(.danger):not(.ghost):hover{background:var(--brand-l);border-color:color-mix(in srgb,var(--brand) 45%,var(--line-2))}
.in-app .btn:active,.in-app .qa:active,.in-app .net-opt:active:not(:disabled){transform:scale(.98)}
.in-app :focus-visible{outline:2px solid var(--ring);outline-offset:2px}

/* ---- status badges: readable at a glance (dot + word) ---- */
.in-app .badge{font-size:.78rem;padding:.18em .7em;font-weight:650;border:1px solid transparent}
.in-app .b-published,.in-app .b-active,.in-app .b-ok{background:#e4f6ec;color:#0d6b3b;border-color:#bfe8d1}
.in-app .b-failed,.in-app .b-needs_reauth,.in-app .b-needs_check,.in-app .b-err{background:#fdecea;color:#a3271a;border-color:#f6c9c3}
.in-app .b-publishing,.in-app .b-pending_approval,.in-app .b-partial,.in-app .b-warn{background:#fff3dd;color:#7a4d00;border-color:#f6dca8}
.in-app .b-scheduled,.in-app .b-pending,.in-app .b-info{background:var(--brand-l);color:var(--brand-d);border-color:color-mix(in srgb,var(--brand) 20%,transparent)}

/* ---- composer: a calm numbered flow (1 Destinations, 2 Content, 3 Media, 4 When) ---- */
.in-app .composer{counter-reset:cstep}
.in-app .cstep{counter-increment:cstep}
.in-app .cstep h2{display:flex;align-items:center;gap:.6rem}
.in-app .cstep h2::before{content:counter(cstep);flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;background:var(--brand-l);color:var(--brand-d);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 18%,transparent)}
.in-app .cstep:focus-within{border-color:color-mix(in srgb,var(--brand) 40%,var(--line));box-shadow:inset 0 1px 0 var(--hl),0 0 0 4px color-mix(in srgb,var(--brand) 10%,transparent),var(--shadow-1)}
.in-app .cstep:focus-within h2::before{background:var(--brand);color:#fff}

/* ---- motion: Apple-like, calm and quick ---- */
.in-app .page[data-flow=enter]{--dx:0px;--dy:10px} /* month/week slides keep their sideways --dx */
.in-app .page[data-flow=enter]>[data-u],.in-app .page[data-flow=enter] [data-u]{animation:rise .32s var(--ease) both;animation-delay:calc(var(--i,0)*40ms)}
.in-app .page[data-flow=soft]{animation:fade .16s var(--ease) both}
.in-app .modal-bg{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:rgba(36,22,92,.28);animation:fade .2s var(--ease) both}
.in-app .modal{border-radius:22px;animation:sheetIn .28s var(--ease) both}
.in-app .modal-bg.closing{animation:fadeOut .14s var(--ease-in) both}.in-app .modal-bg.closing .modal{animation:sheetOut .14s var(--ease-in) both}
.in-app #toasts{top:4.6rem;bottom:auto}
.in-app .toast{animation:toastIn .28s var(--ease) both}
/* rows and cards further down the page reveal once, as they scroll into view (motion.js revealOnView) */
.in-app .rv{opacity:0;transform:translate3d(0,10px,0)}
.in-app .rv.rv-in{opacity:1;transform:none;transition:opacity .32s var(--ease),transform .32s var(--ease);transition-delay:calc(var(--rv,0)*40ms)}
@keyframes sheetIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes sheetOut{to{opacity:0;transform:scale(.98)}}

@media(max-width:860px){.in-app .topbar{background:rgba(255,255,255,.9)}}
@media(prefers-reduced-motion:reduce){
  .in-app .page[data-flow] [data-u],.in-app .modal,.in-app .toast{animation:fade .16s linear both!important;animation-delay:0s!important}
  .in-app .rv{opacity:1;transform:none}.in-app .rv.rv-in{transition:none}
  .in-app .btn:active,.in-app .qa:active,.in-app .net-opt:active:not(:disabled){transform:none}
}