/* SIGN IN in the new look (shell/Login.tsx, on next.higherimpactstrategies.com): the frame's sheet
   material on the sign-in ground. One plate, the address or the code in a pressed well, and the one loud
   key in HIS seafoam. The forms are the real /auth/code and /auth/verify, unchanged; only the look moves.
   Linked by Login.tsx under the new look alone, so arena's sign-in never loads it. */
@layer components {
  html[data-skin="new"]{--hue:var(--his-seafoam);
    --pl-well:color-mix(in srgb,var(--cut) 62%,var(--field));
    --pl-slab:color-mix(in srgb,var(--body) 66%,var(--field))}
  html[data-skin="new"] .login{width:min(440px,100vw);gap:18px;padding:24px 16px}
  html[data-skin="new"] .login_card{gap:14px;padding:34px 30px 30px;border-radius:22px;background:var(--body);
    box-shadow:var(--up-lg),0 30px 80px rgba(0,0,0,.6)}
  html[data-skin="new"] .login_brand{width:190px;margin-bottom:8px}
  html[data-skin="new"] .login_title{font:800 30px/1.1 var(--font-display);letter-spacing:-.02em;color:var(--ink)}
  html[data-skin="new"] .login_lede{font:400 var(--t-body)/1.55 var(--font-ui);color:var(--ink-3)}
  html[data-skin="new"] .login_lede b{color:var(--ink)}
  html[data-skin="new"] .login_form{gap:10px;margin-top:6px}
  html[data-skin="new"] .login_form .label{font:600 var(--t-meta)/1.3 var(--font-ui);letter-spacing:0;text-transform:none;color:var(--ink-2)}
  html[data-skin="new"] .login_form .field_input{height:50px;padding:0 16px;border:0;border-radius:13px;background:var(--pl-well);box-shadow:var(--in);
    font:450 var(--t-body)/1 var(--font-ui);color:var(--ink)}
  html[data-skin="new"] .login_form .field_input::placeholder{color:var(--ink-3)}
  html[data-skin="new"] .login_form .field_input:focus{outline:0;box-shadow:var(--in),0 0 0 1px color-mix(in srgb,var(--hue) 60%,transparent)}
  html[data-skin="new"] .login_form .login_code{height:60px;font:600 26px/1 var(--font-mono);letter-spacing:.34em;text-align:center}
  /* the one loud key: solid seafoam, dark words (the kit's .pl-key) */
  html[data-skin="new"] .login_form .button.is-primary{height:50px;margin-top:6px;border:0;border-radius:13px;background:var(--hue);color:#04110C;
    font:650 var(--t-body)/1 var(--font-ui);text-shadow:none;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.25),0 8px 24px color-mix(in srgb,var(--hue) 26%,transparent),0 2px 4px rgba(0,0,0,.5)}
  html[data-skin="new"] .login_form .button.is-primary::before{display:none}
  html[data-skin="new"] .login_form .button.is-primary:hover{filter:brightness(1.08)}
  html[data-skin="new"] .login_form .button.is-primary:active{transform:translateY(1px);box-shadow:inset 0 2px 6px rgba(0,0,0,.35)}
  html[data-skin="new"] .login_error{padding:10px 12px;border-radius:11px;background:var(--pl-well);box-shadow:var(--in);font:500 var(--t-control)/1.4 var(--font-ui)}
  html[data-skin="new"] .login_note{border-radius:11px;background:var(--pl-well)}
  html[data-skin="new"] .login_back{align-self:center;min-height:40px;display:inline-flex;align-items:center;padding:0 14px;border-radius:11px;
    font:500 var(--t-control)/1 var(--font-ui);color:var(--ink-3)}
  html[data-skin="new"] .login_back:hover{background:var(--face);box-shadow:var(--up);color:var(--ink)}
  html[data-skin="new"] .login_foot{font:400 var(--t-meta)/1.6 var(--font-ui);letter-spacing:0;color:var(--ink-3)}
  @media (max-width:420px){html[data-skin="new"] .login_card{padding:28px 20px 22px}}
  @media (prefers-reduced-motion:reduce){html[data-skin="new"] .login_form .button.is-primary:active{transform:none}}
}