/* ============================================================================
   Scalp Engine — sign in / create account.
   Loads AFTER core.css and only adds what this one page needs.
   Every colour comes from a core.css token; no palette is redefined here.
   Motion is composed from the core library (.fx-rise .fx-float .draw .pill);
   the only new keyframes are the ones core.css does not have (spinner, the
   slow mark rotation) — and prefers-reduced-motion already kills both because
   core.css clamps every animation globally.
   ========================================================================= */

/* ------------------------------------------------------------------ skip */
.auth-skip{
  position:absolute;left:-9999px;top:0;z-index:60;
  padding:11px 18px;font-size:13.5px;font-weight:600;
  background:var(--slab);border:1px solid var(--edge-2);
  border-radius:0 0 var(--r) 0;
}
.auth-skip:focus{left:0}

/* --------------------------------------------------- decorative aperture */
/* Fixed, so it can never add a scrollbar or push the card around. */
.auth-halo{
  position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:0;pointer-events:none;display:grid;place-items:center;
}
.auth-halo-in{
  position:relative;width:min(780px,164vw);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 50% 46%,var(--beam-dim) 0%,transparent 62%);
}
.auth-halo-in::before,.auth-halo-in::after{
  content:"";position:absolute;border-radius:50%;border:1px solid var(--edge);
}
.auth-halo-in::before{inset:11%}
.auth-halo-in::after{inset:27%;border-style:dashed;opacity:.7}

/* ----------------------------------------------------------------- stage */
.auth-stage{
  position:relative;z-index:1;
  min-height:100vh;min-height:100dvh;
  display:flex;padding:44px 20px 40px;
}
.auth-lane{margin:auto;width:min(452px,100%)}

.auth-back{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:600;color:var(--ink-2);
  padding:6px 12px 6px 8px;border-radius:var(--r-pill);
  margin-bottom:16px;transition:color .18s,background .18s;
}
.auth-back svg{width:15px;height:15px}
.auth-back:hover{color:var(--ink);background:var(--glass)}

/* ------------------------------------------------------------------ card */
.auth-card{padding:26px 26px 22px;border-radius:var(--r-xl)}
.auth-card:focus-visible{outline-offset:5px}

.auth-head{display:flex;align-items:flex-start;gap:14px}
.auth-head-txt{flex:1 1 auto;min-width:0}
.auth-title{font-size:26px;line-height:1.15;letter-spacing:-.026em;font-weight:750;margin-top:4px}
.auth-tag{flex:none;margin-top:5px;font-size:9.5px;letter-spacing:1.1px;padding:4px 9px}

.mark-ring{flex:none;width:46px;height:46px;display:block}
.mark-ring svg{width:100%;height:100%;overflow:visible}
.mk-spin{transform-origin:50% 50%;animation:mk-turn 26s linear infinite}
@keyframes mk-turn{to{transform:rotate(360deg)}}

.auth-sub{margin-top:12px;font-size:14px;line-height:1.55;color:var(--ink-2)}

.auth-checking{
  display:flex;align-items:center;gap:9px;margin-top:14px;
  font-size:12.5px;color:var(--ink-2);
  padding:9px 13px;border-radius:var(--r-sm);
  background:var(--glass);border:1px solid var(--edge);
}
.auth-checking[hidden]{display:none}

/* ------------------------------------------------------ segmented switch */
.seg{
  position:relative;display:grid;grid-template-columns:1fr 1fr;
  margin-top:20px;padding:4px;border-radius:var(--r-pill);
  background:var(--well-3);border:1px solid var(--edge);
}
.seg-pill{
  position:absolute;left:4px;top:4px;
  width:calc(50% - 4px);height:calc(100% - 8px);
  border-radius:var(--r-pill);background:var(--sweep);
  box-shadow:0 4px 18px -8px var(--beam-cast-2);
  transform:translateX(0);
  transition:transform .42s var(--ease);
  will-change:transform;
}
.seg[data-mode="register"] .seg-pill{transform:translateX(100%)}
.seg-btn{
  position:relative;z-index:1;padding:10px 8px;border-radius:var(--r-pill);
  font-size:13.5px;font-weight:650;letter-spacing:-.005em;color:var(--ink-2);
  transition:color .32s var(--ease);
}
.seg-btn:hover{color:var(--ink)}
.seg-btn[aria-selected="true"]{color:var(--on-beam)}
.seg-btn:focus-visible{outline-offset:-2px}
.seg-btn:disabled{cursor:not-allowed;opacity:.6}

/* ---------------------------------------------------------------- banner */
.banner{
  display:none;align-items:flex-start;gap:10px;
  margin-top:16px;padding:12px 12px 12px 14px;
  border-radius:var(--r);font-size:13px;line-height:1.5;
  border:1px solid var(--edge-2);background:var(--glass-2);color:var(--ink-2);
  border-left-width:3px;
}
.banner.is-on{display:flex;animation:pop .32s var(--ease)}
.banner-ico{flex:none;width:17px;height:17px;margin-top:1px;color:var(--ink-3)}
.banner-ico svg{width:100%;height:100%}
.banner-text{flex:1 1 auto;min-width:0}
.banner-text b{color:var(--ink);font-weight:650}
.banner-x{
  flex:none;width:24px;height:24px;display:grid;place-items:center;
  border-radius:var(--r-xs);color:var(--ink-3);transition:color .16s,background .16s;
}
.banner-x svg{width:14px;height:14px}
.banner-x:hover{color:var(--ink);background:var(--glass-2)}
.banner.err{border-color:var(--short);border-left-color:var(--short);background:var(--short-dim)}
.banner.err .banner-ico{color:var(--short)}
.banner.warn{border-color:var(--hold);border-left-color:var(--hold);background:var(--hold-dim)}
.banner.warn .banner-ico{color:var(--hold)}
.banner.ok{border-color:var(--long);border-left-color:var(--long);background:var(--long-dim)}
.banner.ok .banner-ico{color:var(--long)}
.banner.info{border-color:var(--beam-2-edge);border-left-color:var(--beam-2);background:var(--beam-2-dim)}
.banner.info .banner-ico{color:var(--beam-2)}

/* ---------------------------------------------------------------- panels */
.panels{display:grid;position:relative;transition:height .34s var(--ease)}
.panels.is-morph{overflow:hidden}
.panel{
  grid-area:1/1;padding:0;                /* core.css gives `section` 96px */
  transition:opacity .28s var(--ease),transform .28s var(--ease);
}
.panel[hidden]{display:none}
.panel.is-enter{opacity:0;transform:translateY(10px)}
.panel.is-exit{opacity:0;transform:translateY(-10px);pointer-events:none}

/* ------------------------------------------------------------------ form */
.auth-form{margin-top:18px;display:grid;gap:14px}
.fld{min-width:0}
.fld .label{margin-bottom:7px;color:var(--ink-2)}
.auth-form .input::placeholder{color:var(--ink-3)}
.opt{color:var(--ink-3);font-weight:500;letter-spacing:0;text-transform:none}
.err-text:empty{display:none}
.hint{margin-top:7px;font-size:11.5px;line-height:1.5;color:var(--ink-2);opacity:.92}

/* password field + show/hide */
.pw{position:relative}
.pw .input{padding-right:48px}
.pw-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;display:grid;place-items:center;
  border-radius:var(--r-xs);color:var(--ink-3);transition:color .16s,background .16s;
}
.pw-toggle svg{width:18px;height:18px}
.pw-toggle:hover{color:var(--ink);background:var(--glass-2)}
.pw-toggle .ico-eye-off{display:none}
.pw-toggle[aria-pressed="true"] .ico-eye{display:none}
.pw-toggle[aria-pressed="true"] .ico-eye-off{display:block}
.pw-toggle[aria-pressed="true"]{color:var(--beam-2)}

/* strength meter — guidance, never a gate */
.meter-row{display:flex;align-items:center;gap:11px;margin-top:10px}
.meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;flex:1 1 auto;min-width:0}
.meter i{height:4px;border-radius:var(--r-pill);background:var(--edge);transition:background .3s var(--ease)}
.meter[data-score="1"] i:nth-child(-n+1){background:var(--short)}
.meter[data-score="2"] i:nth-child(-n+2){background:var(--hold)}
.meter[data-score="3"] i:nth-child(-n+3){background:var(--beam-2)}
.meter[data-score="4"] i{background:var(--long)}
.meter-label{
  flex:none;font-family:var(--mono);font-size:10.5px;letter-spacing:1px;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;
}
.meter-label[data-score="1"]{color:var(--short)}
.meter-label[data-score="2"]{color:var(--hold)}
.meter-label[data-score="3"]{color:var(--beam-2)}
.meter-label[data-score="4"]{color:var(--long)}

/* acknowledgement */
.check{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.check input{
  appearance:none;-webkit-appearance:none;flex:none;position:relative;
  width:18px;height:18px;margin-top:1px;cursor:pointer;
  border:1px solid var(--edge-2);border-radius:5px;background:var(--well-3);
  transition:background .18s,border-color .18s;
}
.check input:hover{border-color:var(--ink-4)}
.check input:checked{background:var(--sweep);border-color:transparent}
.check input:checked::after{
  content:"";position:absolute;left:5.5px;top:1.5px;width:5px;height:10px;
  border:2px solid var(--on-beam);border-top:0;border-left:0;transform:rotate(42deg);
}
.check input[aria-invalid="true"]{border-color:var(--short)}

/* submit + in-button spinner */
.auth-submit{margin-top:4px;min-height:47px}
.spinner{
  display:none;flex:none;width:15px;height:15px;border-radius:50%;
  border:2px solid var(--spin-track);border-top-color:currentColor;
  animation:auth-spin .72s linear infinite;
}
@keyframes auth-spin{to{transform:rotate(360deg)}}
.auth-submit.is-busy .spinner{display:block}
/* Busy is not disabled-looking: .btn:disabled drops to .4 opacity, which makes
   the dark ink on the gradient unreadable exactly when it is saying something. */
.auth-submit.is-busy:disabled{opacity:.85;cursor:progress}
.auth-checking .spinner{display:block;color:var(--ink-3);border-color:var(--edge-2);border-top-color:currentColor}

.auth-swap{margin-top:14px;text-align:center;font-size:12.5px;color:var(--ink-2)}
.linkish{
  color:var(--beam-2);font-weight:650;font-size:12.5px;
  border-bottom:1px solid transparent;border-radius:2px;
}
.linkish:hover{border-bottom-color:currentColor}
.linkish:disabled{opacity:.5;cursor:not-allowed;border-bottom-color:transparent}
.banner-act{display:inline;font-size:inherit;white-space:nowrap}

/* ----------------------------------------------------------------- trust */

.auth-risk{
  margin-top:16px;text-align:center;
  font-size:11.5px;line-height:1.6;color:var(--ink-2);
}
.auth-risk a{color:var(--ink);border-bottom:1px solid var(--edge-2)}
.auth-risk a:hover{border-bottom-color:var(--ink-2)}

/* ------------------------------------------------------------ responsive */
@media (max-width:520px){
  .auth-stage{padding:26px 14px 30px}
  .auth-card{padding:20px 18px 18px;border-radius:var(--r-lg)}
  .auth-title{font-size:23px}
  .auth-tag{display:none}
  .mark-ring{width:40px;height:40px}
  .auth-sub{font-size:13.5px}
  .seg-btn{font-size:13px;padding:10px 4px}
  .auth-back{margin-bottom:12px}
}
@media (max-width:400px){
  .auth-card{padding:18px 15px 16px}
  .auth-title{font-size:21px}
  .auth-head{gap:11px}
}

/* Wider viewports: the aperture reads better slightly larger. */
@media (min-width:900px){
  .auth-halo-in{width:min(900px,90vw)}
}