/* Sign-in screens, "Kente board": every authPage() screen (js/views/auth/shared.js) and offline.html.
   Tokens only (tokens.css). Kente gold/green/red are decorative fills; text stays on opaque surfaces.
   All motion is inside the one prefers-reduced-motion: no-preference block at the end. */
.login{position:relative;isolation:isolate;min-height:100%;display:grid;place-items:center;gap:var(--s-8);overflow-x:hidden;
  padding:calc(var(--s-6) + env(safe-area-inset-top,0px)) var(--s-4) calc(var(--s-6) + env(safe-area-inset-bottom,0px));
  background:radial-gradient(70vmax 55vmax at 0% 0%,var(--glow-gold),transparent 62%),radial-gradient(70vmax 60vmax at 100% 100%,var(--glow-green),transparent 64%),var(--auth-bg)}
.auth-glow{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;display:none}
.auth-glow i{position:absolute;width:70vmax;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--glow-gold),transparent);top:-30vmax;left:-20vmax}
.auth-glow i+i{background:radial-gradient(closest-side,var(--glow-red),transparent);top:auto;left:auto;bottom:-35vmax;right:-15vmax}

/* the card: opaque, with a woven kente strip along its top edge */
.auth-side,.auth-slot,.auth-rise{width:100%;display:grid;place-items:center;min-width:0}
.auth-side{position:relative;isolation:isolate}
.login .auth-card{position:relative;z-index:1;width:min(400px,100%);display:flex;flex-direction:column;gap:var(--s-4);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:calc(var(--s-8) + 6px) var(--s-8) var(--s-6);box-shadow:var(--auth-shadow)}
.login .auth-card.wide{width:min(600px,100%)}
.auth-card::before,.kente-rule{content:"";display:block;height:6px;
  background:repeating-linear-gradient(90deg,var(--kente-gold) 0 14px,var(--kente-ink) 14px 17px,var(--kente-green) 17px 26px,var(--kente-ink) 26px 29px,var(--kente-gold) 29px 33px,var(--kente-red) 33px 41px,var(--kente-ink) 41px 44px)}
.auth-card::before{position:absolute;inset:0 0 auto}
.login .brand{padding:0;margin-bottom:var(--s-1)}
.login h1{font-size:1.75rem}
.auth-card .crumb{margin-bottom:var(--s-1)}
.auth-sub{margin-top:6px}
.login .btn.primary{min-height:44px;margin-top:var(--s-1);font-size:var(--t-md)}
.login .btn.primary:active{background:var(--accent-hover)}
.btn.is-busy{cursor:progress}
.btn.is-busy::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent}
.auth-card.has-error{border-color:var(--bad);box-shadow:var(--auth-shadow),0 0 0 1px var(--bad)}
.auth-remember{color:var(--ink-2)}
.auth-remember input{width:16px;height:16px;accent-color:var(--accent)}
.auth-foot{justify-content:center}
.auth-links{justify-content:space-between}
.auth-aside{text-align:right}

/* brand story + drifting kanban cards: wide screens only */
.auth-story,.auth-scene{display:none}
@media (min-width:960px){
  .login.auth-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,6vw,112px);padding-inline:clamp(48px,6vw,112px)}
  .auth-split .auth-story{display:grid;gap:var(--s-6);max-width:30rem;justify-self:end}
  .auth-split .auth-scene{display:block;position:absolute;inset:0;z-index:0;pointer-events:none}
  .auth-split.is-wide{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
}
@media (min-width:960px) and (max-width:1199px){
  .login.auth-split.is-wide{grid-template-columns:minmax(0,1fr)}
  .auth-split.is-wide .auth-story{display:none}
}
.auth-pitch{font:750 clamp(2.4rem,1.1rem + 2.6vw,3.6rem)/1.02 var(--f-display);font-variation-settings:"opsz" 96;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.kente-rule{width:88px;border-radius:2px}
.auth-points{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3);color:var(--ink-2);font-size:var(--t-md);max-width:28rem}
.auth-points li{display:grid;grid-template-columns:12px 1fr;gap:var(--s-3);align-items:baseline}
.auth-points li::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--kente-gold);translate:0 1px}
.auth-points li:nth-child(2)::before{background:var(--kente-green)}
.auth-points li:nth-child(3)::before{background:var(--kente-red)}
.kc{position:absolute;width:152px;padding:10px 12px 10px 16px;display:grid;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-2);rotate:var(--tilt,0deg);--kc:var(--b-pine)}
.kc::before{content:"";position:absolute;inset:9px auto 9px 0;width:4px;border-radius:0 3px 3px 0;background:var(--kc)}
.kc b{font:600 var(--t-xs)/1.2 var(--f-body);color:var(--muted)}
.kc i{height:6px;border-radius:3px;background:var(--sunken)}
.kc i+i{width:64%}
.kc-foot{display:flex;justify-content:space-between;align-items:center}
.kc-tag{width:34px;height:8px;border-radius:4px;background:var(--kc);opacity:.75}
.kc-who{width:16px;height:16px;border-radius:50%;background:var(--kente-gold);box-shadow:0 0 0 2px var(--card)}
.kc-badge{font:700 10px/1 var(--f-body);padding:3px 7px;border-radius:var(--r-pill);background:var(--kente-gold);color:var(--on-gold)}
.kc-pipeline{top:7%;left:-4%;--tilt:-6deg}
.kc-uat{top:4%;right:-15%;--tilt:5deg;--kc:var(--b-sky)}
.kc-sprint{top:44%;right:-9%;--tilt:-3deg;--kc:var(--b-plum)}
.kc-marketing{bottom:9%;left:-9%;--tilt:4deg;--kc:var(--b-clay)}
.kc-won{bottom:4%;right:-12%;--tilt:-4deg}
:root[data-theme="dark"] .kc{border-color:var(--line-strong);opacity:.9}
:root[data-theme="dark"] .kc i{background:var(--line-strong)}
@media (max-width:760px){.login .auth-card{padding:calc(var(--s-6) + 6px) var(--s-5) var(--s-5)}}

@media (prefers-reduced-motion:no-preference){
  .auth-glow{display:block}
  .auth-glow i{animation:auth-glow 26s ease-in-out infinite alternate}
  .auth-glow i+i{animation-duration:34s;animation-delay:-9s}
  .auth-rise{animation:auth-rise .6s var(--ease-emph) both}
  .auth-card>*{animation:auth-rise .5s var(--ease-emph) both}
  .auth-card>:nth-child(2){animation-delay:.06s}
  .auth-card>:nth-child(3){animation-delay:.12s}
  .auth-card>:nth-child(4){animation-delay:.18s}
  .auth-card>:nth-child(5){animation-delay:.24s}
  .auth-card>:nth-child(n+6){animation-delay:.3s}
  .auth-story>*{animation:auth-rise .7s var(--ease-emph) both}
  .auth-story>:nth-child(2){animation-delay:.12s}
  .auth-story>:nth-child(3){animation-delay:.2s}
  .kc{animation:auth-fade 1s var(--ease-out) .3s both,kc-drift 11s ease-in-out infinite alternate}
  .kc:nth-child(2){animation-duration:1s,14s;animation-delay:.4s,-4s}
  .kc:nth-child(3){animation-duration:1s,12s;animation-delay:.5s,-7s}
  .kc:nth-child(4){animation-duration:1s,15s;animation-delay:.6s,-2s}
  .kc:nth-child(5){animation-duration:1s,13s;animation-delay:.7s,-10s}
  .login .btn.primary{transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-medium) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
  .login .btn.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--btn-lift)}
  .login .btn.primary:active:not(:disabled){transform:translateY(0) scale(.98);box-shadow:none}
  .login .input{transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-medium) var(--ease-out)}
  .btn.is-busy::before{animation:auth-spin .7s linear infinite}
  .auth-card.shake{animation:auth-shake .42s var(--ease-out)}
  @keyframes auth-rise{from{opacity:0;transform:translateY(14px)}}
  @keyframes auth-fade{from{opacity:0}}
  @keyframes kc-drift{to{transform:translate3d(6px,-16px,0)}}
  @keyframes auth-glow{to{transform:translate3d(12vw,8vh,0) scale(1.15)}}
  @keyframes auth-spin{to{transform:rotate(1turn)}}
  @keyframes auth-shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
}