/* ============================================================
   app.css — slayd.ai looks like the Slayd app (2026-10-05)

   Loads LAST in every page. Spec: docs/WEB_APP_SPEC.md.
   Values are the iOS app's AppColors.swift (light). The legacy tokens
   of slayd.css / sx.css / home.css are re-pointed here so every old
   surface recolours at once; new markup uses the --a-* tokens and the
   .a-* components below.
   ============================================================ */

:root{
  color-scheme: light;

  /* app palette */
  --a-ground:#FFFFFF;
  --a-book:#FBF4F7;
  --a-card:#FFFFFF;
  --a-surface:#F5F3F4;
  --a-mid:#EBE8E9;
  --a-border:#E8B8C8;
  --a-blush:#F5EAEC;
  --a-soft:#FCE8EE;
  --a-pink:#F166A8;
  /* rose TEXT on the pink tints: #C2417F on --a-soft is 4.11:1 and fails
     WCAG AA; this is 4.58 on --a-soft, 4.96 on --a-book, 5.37 on white */
  --a-rose-ink:#B83A77;
  --a-purple:#8092D4;
  --a-peri:#A6A8D9;
  --a-plum:#2A0F1A;
  --a-mauve:#5A3D48;
  --a-hint:rgba(90,61,72,.55);
  --a-green:#4CAF7D;
  --a-gold:#B49146;
  --a-red:#DC2626;
  --a-grad:linear-gradient(135deg,#F166A8 0%,#8092D4 60%,#A6A8D9 100%);
  --a-grad-soft:linear-gradient(135deg,rgba(241,102,168,.55),rgba(128,146,212,.55) 60%,rgba(166,168,217,.55));
  --a-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --a-shadow:0 6px 20px rgba(42,15,26,.08);
  --a-shadow-lg:0 14px 40px rgba(42,15,26,.14);
  --a-tab-h:64px;

  /* legacy tokens -> app palette (slayd.css, sx.css) */
  --cream:#FFFFFF; --card:#FFFFFF; --paper:#FFFFFF; --paper-2:#FFFFFF; --paper-3:#F5F3F4;
  --surface:#F5F3F4; --mid:#EBE8E9;
  --wash:#FBF4F7; --wash-warm:#FBF4F7; --wash-cool:#FBF4F7; --wash-flat:#FBF4F7;
  --lit-ground:none; --lit-ground-soft:none;
  --plum:#2A0F1A; --ink:#2A0F1A; --ink2:#5A3D48; --ink-2:#5A3D48; --ink-3:#5A3D48;
  --mauve:#5A3D48; --muted:#5A3D48; --mauve-2:rgba(90,61,72,.7); --hint:rgba(90,61,72,.55);
  --soft:rgba(90,61,72,.7); --ink-4:rgba(90,61,72,.55);
  --blush:#F5EAEC; --soft-pink:#FCE8EE;
  --border:#E8B8C8; --border-soft:rgba(232,184,200,.6); --border-strong:#E8B8C8;
  --line:#EBE8E9; --hairline:#EBE8E9; --hairline-2:#E8B8C8;
  --overlay:rgba(58,24,37,.45);
  --gradient:linear-gradient(135deg,#F166A8 0%,#8092D4 60%,#A6A8D9 100%);
  --gradient-h:linear-gradient(90deg,#F166A8 0%,#8092D4 100%);
  --gradient-tri:linear-gradient(135deg,#F166A8 0%,#8092D4 60%,#A6A8D9 100%);
  --gradient-btn:linear-gradient(135deg,#F166A8 0%,#8092D4 60%,#A6A8D9 100%);
  --g-border:linear-gradient(135deg,rgba(241,102,168,.45),rgba(128,146,212,.45));
  --g-border-strong:linear-gradient(135deg,rgba(241,102,168,.75),rgba(128,146,212,.75));
  --serif:var(--a-font); --sans:var(--a-font); --mono:var(--a-font);
  --red:#DC2626; --green:#4CAF7D; --gold:#B49146;
  --shadow-card:0 2px 10px rgba(42,15,26,.05);
  --shadow-elev:0 8px 24px rgba(42,15,26,.10);
  --shadow-rose:0 8px 20px rgba(241,102,168,.25);
  --grain:none;
}

html{font-size:16px;-webkit-text-size-adjust:100%}
body,body.page-wash{background:var(--a-book);color:var(--a-plum);font-family:var(--a-font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select,textarea{font-family:var(--a-font)}

/* Every legacy serif / mono moment becomes the app's sans. Headline
   italics were the "magazine" look; the app has none. */
:where(h1,h2,h3,h4,.serif,[class*="-title"],[class*="title-"],[class*="-name"],[class*="eyebrow"],[class*="kicker"],[class*="mono"]){
  font-family:var(--a-font) !important; font-style:normal !important}
:where([class*="eyebrow"],[class*="kicker"]){letter-spacing:1.5px !important}

/* ---------- buttons ---------- */
.a-btn,.btn-primary,.btn.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:50px;padding:0 20px;border:0;border-radius:14px;
  background:var(--a-grad) !important;color:#fff !important;
  font:700 16px/1.2 var(--a-font);letter-spacing:0;text-transform:none;
  box-shadow:0 6px 16px rgba(241,102,168,.22);cursor:pointer;text-decoration:none;
  transition:transform .12s ease,box-shadow .12s ease,opacity .12s}
.a-btn:hover,.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(241,102,168,.28)}
.a-btn:active,.btn-primary:active{transform:scale(.98)}
.a-btn[disabled],.btn-primary[disabled],.a-btn.is-busy{opacity:.55;cursor:default;transform:none;box-shadow:none}
.a-btn-2,.btn-secondary,.btn.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:0 18px;border-radius:14px;cursor:pointer;text-decoration:none;
  color:var(--a-plum) !important;font:600 15px/1.2 var(--a-font);text-transform:none;letter-spacing:0;
  border:1.2px solid transparent !important;box-shadow:none !important;
  background:linear-gradient(#fff,#fff) padding-box,var(--a-grad-soft) border-box !important}
.a-btn-2:hover,.btn-secondary:hover{background:linear-gradient(var(--a-soft),var(--a-soft)) padding-box,var(--a-grad-soft) border-box !important}
.a-btn-danger,.btn-danger{background:var(--a-red) !important;color:#fff !important;border:0;border-radius:14px;min-height:46px;font:700 15px var(--a-font)}
.a-link{color:var(--a-pink);font:600 15px var(--a-font);text-decoration:none;background:none;border:0;cursor:pointer;padding:6px 0}
.a-link:hover{text-decoration:underline}
.a-btn.full,.a-btn-2.full{width:100%}
@media(max-width:899px){
  .btn{min-height:44px}
}

/* ---------- inputs ---------- */
.a-input,.a-form input:not([type=checkbox]):not([type=radio]):not([type=range]),.a-form select,.a-form textarea{
  width:100%;min-height:52px;padding:0 16px;border-radius:14px;
  background:var(--a-surface);border:1px solid var(--a-border);color:var(--a-plum);
  font:500 17px var(--a-font);outline:none;-webkit-appearance:none;appearance:none}
.a-form textarea,textarea.a-input{padding:14px 16px;min-height:110px;line-height:1.45}
.a-input::placeholder,.a-form input::placeholder,.a-form textarea::placeholder{color:var(--a-hint)}
.a-input:focus,.a-form input:focus,.a-form select:focus,.a-form textarea:focus{border-color:var(--a-pink);box-shadow:0 0 0 3px rgba(241,102,168,.16);background:#fff}
@media(max-width:899px){
  /* iOS zooms the page on focus below 16px. Never let a field go there. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:max(16px,1em)}
}

/* ---------- cards, text ---------- */
.a-card{background:#fff;border-radius:18px;padding:16px;border:1.2px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,var(--a-grad-soft) border-box}
.a-card.plain{border:1px solid var(--a-mid);background:#fff}
.a-title{font:800 28px/1.15 var(--a-font);letter-spacing:-.4px;color:var(--a-plum);margin:0}
.a-sub{font:500 15px/1.45 var(--a-font);color:var(--a-mauve);margin:4px 0 0}
.a-eyebrow{font:700 12px/1 var(--a-font);letter-spacing:1.5px;text-transform:uppercase;color:var(--a-mauve)}
.a-pill{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 9px;border-radius:8px;
  font:700 12px var(--a-font);background:var(--a-soft);color:var(--a-rose-ink)}
.a-pill.ok{background:rgba(76,175,125,.14);color:#2F8A5C}
.a-pill.muted{background:var(--a-surface);color:var(--a-mauve)}
.a-pill.bad{background:rgba(220,38,38,.10);color:#B91C1C}
.a-chip{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:12px;background:var(--a-surface);
  color:var(--a-plum);font:600 14px var(--a-font);border:0;cursor:pointer;white-space:nowrap}
.a-chip.on{background:var(--a-soft);color:var(--a-rose-ink)}
.a-seg{display:flex;background:var(--a-surface);border-radius:12px;padding:3px;gap:3px}
.a-seg > *{flex:1;height:34px;border:0;border-radius:10px;background:none;font:600 14px var(--a-font);color:var(--a-mauve);cursor:pointer}
.a-seg > .on{background:var(--a-grad);color:#fff}
.a-row{display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 0;border-bottom:1px solid var(--a-mid)}
.a-row:last-child{border-bottom:0}
.a-av{width:44px;height:44px;flex:none;border-radius:12px;background:var(--a-blush);color:var(--a-pink);
  display:flex;align-items:center;justify-content:center;font:700 15px var(--a-font);object-fit:cover;overflow:hidden}

/* ---------- sticky CTA bar (phones) ---------- */
.a-cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);
  border-top:1px solid var(--a-mid);padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:12px}
.a-cta-bar .a-btn{flex:1}

/* ============================================================
   SHELL — bottom tab bar on phones, sidebar on desktop
   ============================================================ */
.app{background:var(--a-book)}
.topbar{background:rgba(255,255,255,.94) !important;border-bottom:1px solid var(--a-mid) !important;box-shadow:none !important}
.sidebar{background:#fff !important;border-right:1px solid var(--a-mid) !important}
.main{background:var(--a-book) !important}

.a-tabbar{display:none}
@media(max-width:899px){
  .a-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    height:calc(var(--a-tab-h) + env(safe-area-inset-bottom));padding:6px 6px env(safe-area-inset-bottom);
    background:rgba(255,255,255,.94);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);
    border-top:1px solid var(--a-mid)}
  .a-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    text-decoration:none;color:var(--a-mauve);font:600 10.5px var(--a-font);position:relative;
    -webkit-tap-highlight-color:transparent;min-width:0}
  .a-tab svg{width:24px;height:24px;stroke:currentColor}
  .a-tab.on{color:var(--a-plum);font-weight:800}
  .a-tab.on svg{stroke:var(--a-pink)}
  .a-tab .a-dot{position:absolute;top:2px;left:calc(50% + 8px);min-width:16px;height:16px;padding:0 4px;border-radius:8px;
    background:var(--a-pink);color:#fff;font:700 10px/16px var(--a-font);text-align:center}
  .app.has-tabbar .main{padding-bottom:calc(var(--a-tab-h) + env(safe-area-inset-bottom) + 24px) !important}
  .app.has-tabbar .topbar-burger,.app.has-tabbar .sidebar,.app.has-tabbar .nav-scrim{display:none !important}
  .app.has-tabbar .a-cta-bar{bottom:calc(var(--a-tab-h) + env(safe-area-inset-bottom))}
  .app.has-tabbar.hide-tabbar .a-tabbar{display:none}
  .app.has-tabbar.hide-tabbar .a-cta-bar{bottom:0}
  .main{padding:16px 16px 32px !important}
}

/* ============================================================
   SIGNED OUT — the app's sign-in screen (SignInView.swift)
   ============================================================ */
.a-auth{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:#fff}
.a-auth-main{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 24px 24px}
.a-auth-col{width:100%;max-width:400px;text-align:center}
.a-auth-mark{display:block;height:58px;width:auto;margin:0 auto}
.a-auth-tag{margin:18px 0 34px;font:500 19px/1.3 var(--a-font);color:var(--a-mauve)}
.a-auth-col .a-form{display:flex;flex-direction:column;gap:14px;text-align:left}
.a-auth-col .a-btn{width:100%;margin-top:4px}
.a-pw{position:relative}
.a-pw .a-input{padding-right:52px}
.a-pw button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;background:none;
  color:var(--a-mauve);cursor:pointer;display:flex;align-items:center;justify-content:center}
.a-auth-links{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:22px}
.a-auth-links .forgot{color:var(--a-plum);font:500 16px var(--a-font);background:none;border:0;cursor:pointer;padding:8px}
.a-auth-links .create{color:var(--a-pink);font:500 17px var(--a-font);background:none;border:0;cursor:pointer;padding:8px}
.a-auth-pro{margin-top:30px;padding-top:20px;border-top:1px solid var(--a-mid);font:500 14px var(--a-font);color:var(--a-mauve)}
.a-auth-pro a,.a-auth-pro button{color:var(--a-pink);font-weight:600;text-decoration:none;background:none;border:0;cursor:pointer;font-size:14px}
.a-auth-alert{margin:0 0 4px;padding:12px 14px;border-radius:12px;background:rgba(220,38,38,.08);color:#B91C1C;font:600 14px/1.4 var(--a-font);text-align:left}
.a-auth-alert.ok{background:rgba(76,175,125,.12);color:#2F8A5C}
.a-auth-foot{display:flex;justify-content:center;gap:22px;padding:18px 16px calc(18px + env(safe-area-inset-bottom));font:500 13px var(--a-font)}
.a-auth-foot a{color:var(--a-mauve);text-decoration:none}
.a-auth-foot a:hover{color:var(--a-plum)}

/* ============================================================
   THE sx-* DESIGN SYSTEM, RE-SKINNED TO THE APP (every surface that
   composes sx.css primitives — auth, wizard, modules — follows).
   Two-class selectors so they out-rank sx.css's unlayered cascade guard
   (0,1,1) as well as its layered component rules.
   ============================================================ */
.sx-btn.sx-btn,.sx-auth .sx-btn{font:600 15px/1.2 var(--a-font);letter-spacing:0;text-transform:none;border-radius:14px;min-height:46px;padding:0 20px}
.sx-btn.sx-btn-primary,.sx-auth .sx-btn-primary{background:var(--a-grad) !important;color:#fff !important;font-weight:700;font-size:16px;min-height:50px;box-shadow:0 6px 16px rgba(241,102,168,.22)}
.sx-btn.sx-btn-primary::after{display:none}
.sx-btn.sx-btn-ghost,.sx-auth .sx-btn-ghost{color:var(--a-plum);box-shadow:none;border:1.2px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,var(--a-grad-soft) border-box}
.sx-btn.sx-btn-dusk{background:var(--a-grad);color:#fff}
.sx-btn.is-busy .sx-btn-lab{font-family:var(--a-font);letter-spacing:0}
.sx-field .sx-field-lab,.sx-auth .sx-field-lab{font:600 14px var(--a-font);letter-spacing:0;text-transform:none;color:var(--a-plum);margin-bottom:8px}
.sx-field.sx-field :is(input,textarea,select),.sx-inp.sx-inp{min-height:52px;border-radius:14px;background:var(--a-surface);
  border:1px solid var(--a-border);font:500 17px var(--a-font);padding:0 16px;color:var(--a-plum)}
.sx-field.sx-field textarea{padding:14px 16px;min-height:110px}
.sx-field.sx-field :is(input,textarea):focus-visible{border-color:var(--a-pink);background:#fff;box-shadow:0 0 0 3px rgba(241,102,168,.16)}
.sx-field.is-err :is(input,textarea),.a-field.is-err .a-input{border-color:var(--a-red) !important}
.sx-eyebrow.sx-eyebrow{font:700 12px/1 var(--a-font);letter-spacing:1.5px;color:var(--a-mauve)}
.sx-eyebrow.sx-eyebrow::before{display:none}
:is(.sx-monument,.sx-d1,.sx-d2,.sx-d3,.sx-d4).sx-auth,.sx-auth :is(.sx-d1,.sx-d2,.sx-d3,.sx-d4),
body :is(.sx-monument,.sx-d1,.sx-d2,.sx-d3,.sx-d4){font-family:var(--a-font);font-style:normal;font-weight:800;letter-spacing:-.4px;color:var(--a-plum)}
body .sx-d3{font-size:26px;line-height:1.2}
body .sx-d4{font-size:21px;line-height:1.25}
body .sx-wordmark{font-family:var(--a-font);font-style:normal;font-weight:800}
.sx-alert.sx-alert{border:0;border-radius:12px;background:rgba(220,38,38,.08);color:#B91C1C;font:600 14px/1.45 var(--a-font);padding:12px 14px}

/* ---------- the landing (ui.js slaydLandingHtml) inside the shell ---------- */
.a-vh{position:absolute !important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0;padding:0}
.login:has(.a-auth){display:block;padding:0 !important;min-height:100vh;min-height:100dvh;background:#fff}
.login-inner:has(.a-auth){max-width:none !important;width:100%;padding:0 !important;margin:0 !important}
.a-auth #sxa-alert:empty{display:none}
.a-auth #sxa-alert{margin-bottom:12px;text-align:left}

/* ---------- auth sub-views (forgot, sent, wait, account error) ---------- */
.login:has(.sx-auth){background:#fff !important}
.sx-auth .sxa-card{border:0;box-shadow:none;background:#fff}
@media(min-width:600px){
  .sx-auth .sxa-card{border:1.2px solid transparent;border-radius:22px;box-shadow:var(--a-shadow);
    background:linear-gradient(#fff,#fff) padding-box,var(--a-grad-soft) border-box}
}
.sx-auth .sxa-top{background:none;align-items:center;padding:20px 24px 4px}
.sx-auth .sxa-top::before,.sx-auth .sxa-top::after{display:none}
.sxa-mark{display:block;height:38px;width:auto}
.sx-auth .sxa-body{padding:14px 24px 26px}
.sx-auth .sxa-body h1{text-align:center}
.sx-auth .sxa-lede{text-align:center;font:500 15px/1.5 var(--a-font);color:var(--a-mauve)}
.sx-auth .sxa-foot{border-top-color:var(--a-mid)}
.sx-auth .sxa-foot :is(a,button),.sx-auth .sxa-link{color:var(--a-pink)}
.sx-auth .sxa-wait .sxa-mark{height:46px}

/* ---------- "More" (index.html route portal-more) ---------- */
.a-more{max-width:640px;margin:0 auto}
.a-more .a-title{margin:4px 0 18px}
.a-more-h{margin:22px 4px 10px}
.a-more-card{padding:4px 0 !important;margin-bottom:12px}
.a-more-row{display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:0 16px;border:0;background:none;
  color:var(--a-plum);font:600 16px var(--a-font);text-decoration:none;cursor:pointer;text-align:left;border-bottom:1px solid var(--a-mid)}
.a-more-row:last-child{border-bottom:0}
.a-more-row:hover{background:var(--a-book)}
.a-more-ic{width:34px;height:34px;border-radius:10px;background:var(--a-soft);color:var(--a-pink);display:flex;align-items:center;justify-content:center;flex:none}
.a-more-ic svg,.a-more-ic .ic{width:18px;height:18px}
.a-more-lab{flex:1}
.a-more-row > svg:last-child{width:16px;height:16px;color:var(--a-hint)}
.a-more-out{color:var(--a-red)}
.a-more-out .a-more-ic{background:rgba(220,38,38,.08);color:var(--a-red)}

/* ---------- phone top bar: the app's compact header ---------- */
@media(max-width:899px){
  .app.has-tabbar .topbar{height:54px;padding:0 12px 0 16px;gap:10px}
  .app.has-tabbar .topbar-logo-img{height:26px;width:auto}
  .app.has-tabbar .role-pill,.app.has-tabbar .topbar-store,.app.has-tabbar .topbar-search{display:none !important}
}
@media(max-width:899px){
  .a-tab .ic,.a-tab > svg,.a-tab .ic svg{width:25px !important;height:25px !important;font-size:25px !important}
  .a-tab span:not(.a-dot){font-size:11px;letter-spacing:.1px}
}
/* the auth pages sit on plain white like the app: no page glows behind them */
.login:has(.sx-auth),.login:has(.a-auth){background:#fff !important;background-image:none !important}
.login:has(.sx-auth)::before,.login:has(.sx-auth)::after,.login:has(.a-auth)::before,.login:has(.a-auth)::after{display:none !important}
body:has(#login:not([hidden]) :is(.sx-auth,.a-auth)){background:#fff !important}
@media(max-width:599px){ .sx-auth .sxa-card{border-radius:0 !important} }
.role-pill{display:none !important}
/* signed out (guest storefront / #book): renderTabbar empties the bar and drops
   .has-tabbar, so the empty white bar must not sit over the sticky Book bars */
@media(max-width:899px){ .app:not(.has-tabbar) .a-tabbar{display:none} }

/* ---------- Support (ui.js route 'support') ---------- */
.a-sup .a-sub{margin:-8px 0 18px}
.a-sup-search{display:flex;gap:10px;margin-bottom:6px}
.a-sup-search .a-input{flex:1}
.a-sup-search .a-btn{min-width:52px;padding:0 14px}
.a-sup-sub{display:block;font:500 13px/1.35 var(--a-font);color:var(--a-mauve);margin-top:2px}
.a-sup .a-more-row{min-height:66px;padding-top:8px;padding-bottom:8px}
.a-sup-note{font:500 13px var(--a-font);color:var(--a-mauve);margin:4px 4px 0}

/* ---------- toasts never cover the bottom buttons (e2e 2026-10-05) ----------
   On a phone the stack sat bottom-right over the sticky Continue / Publish /
   the tab bar, and a tap on it dismissed the toast instead of pressing the
   button under it. Phones get it at the top; the container never takes taps. */
.toasts{pointer-events:none}
.toast{pointer-events:auto}
@media(max-width:899px){
  .toasts{top:calc(env(safe-area-inset-top,0px) + 64px);bottom:auto;left:16px;right:16px;align-items:stretch}
  .toast{min-width:0}
}