/* ============================================================
   css/login.css — the artist sign-in page, on the link.tattoo
   paper theme. Standalone: carries its own copy of the tokens
   so it never depends on the marketing stylesheet's load order.
   ============================================================ */
:root{
  --accent:#c22f2f; --gold:#7e6c3e; --live:#1f8a4c;
  --ink:#efe9dd; --ink2:#e8e3d7;
  --paper:#141412; --dim:#696761; --line:#dbd6cb;
  --mono:'Space Mono','SF Mono',Menlo,Consolas,monospace;
  --disp:'Anton','Helvetica Neue',Arial,sans-serif;
  --radius:14px; --radius-s:11px; --radius-pill:9999px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* the hidden attribute must beat every display rule on this page —
   without this, .google-btn's display:flex resurrects "hidden" elements */
[hidden]{display:none!important}
html,body{min-height:100%}
body{background:var(--ink);color:var(--paper);font:15px/1.5 var(--mono);
     -webkit-font-smoothing:antialiased;display:flex;flex-direction:column}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--ink)}

.page{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
      padding:48px 20px;gap:34px}

.brand{font-family:var(--disp);font-size:1.5rem;letter-spacing:.02em;text-decoration:none}
.brand b{color:var(--accent)}

/* ── card ── */
.card{width:100%;max-width:400px;background:var(--ink2);border:1px solid var(--line);
      border-radius:var(--radius);padding:34px 30px}
.card-title{font-family:var(--disp);font-weight:400;font-size:1.8rem;letter-spacing:.01em;
            text-transform:uppercase;margin-bottom:.4rem}
.card-sub{font-size:.76rem;color:var(--dim);letter-spacing:.2px;margin-bottom:1.7rem;line-height:1.6}

.claiming{font-size:.72rem;line-height:1.6;color:var(--dim);border-left:2px solid var(--live);
          padding-left:.8rem;margin-bottom:1.4rem}
.claiming b{color:var(--paper);font-weight:700}

/* ── fields ── */
.field{margin-bottom:1.1rem}
.field label{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:1.8px;
             color:var(--dim);margin-bottom:.4rem}
.field input{width:100%;padding:.85rem 1rem;background:var(--ink);border:1px solid var(--line);
             border-radius:var(--radius-s);color:var(--paper);font-family:var(--mono);
             font-size:.95rem;outline:none;transition:border-color .2s;-webkit-appearance:none}
.field input:focus{border-color:var(--accent)}
.field input::placeholder{color:rgba(20,20,18,.28)}

/* ── the handle field: the claim, inside the sign-up ── */
.handle-field{margin-bottom:1.4rem}
.handle-wrap{display:flex;align-items:stretch;border:1px solid var(--line);
  border-radius:var(--radius-s);background:var(--ink);overflow:hidden;
  transition:border-color .2s}
.handle-wrap:focus-within{border-color:var(--accent)}
.handle-prefix{display:flex;align-items:center;padding:0 .2rem 0 1rem;
  font-size:.9rem;color:var(--dim);white-space:nowrap}
.handle-wrap input{flex:1;min-width:0;border:0;background:none;outline:none;
  color:var(--paper);font-family:var(--mono);font-size:.95rem;
  padding:.85rem 1rem .85rem 0}
.handle-hint{margin-top:.4rem;font-size:.62rem;line-height:1.6;color:var(--dim)}
.handle-hint.bad{color:var(--accent)}
.handle-hint.good{color:var(--live)}

/* ── inline error ── */
.error-msg{display:none;background:color-mix(in srgb,var(--accent) 8%,transparent);
           border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
           border-radius:var(--radius-s);color:var(--accent);padding:.7rem .9rem;
           font-size:.76rem;line-height:1.5;margin-bottom:1rem;letter-spacing:.2px}
.error-msg.show{display:block}

/* ── buttons ── */
.submit-btn{width:100%;padding:.95rem;background:var(--accent);color:var(--ink);border:0;
            border-radius:var(--radius-pill);font-family:var(--mono);font-size:.74rem;
            font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;
            transition:filter .2s,transform .1s;margin-top:.25rem}
.submit-btn:hover{filter:brightness(1.08)}
.submit-btn:active{transform:scale(.985)}
.submit-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}

.spinner{display:inline-block;width:11px;height:11px;border:2px solid rgba(239,233,221,.35);
         border-top-color:var(--ink);border-radius:50%;animation:spin .7s linear infinite;
         margin-right:.6rem;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spinner{animation:none}}

.divider-row{display:flex;align-items:center;justify-content:center;gap:1rem;margin:1.4rem 0}
.divider-line{flex:1;height:1px;background:var(--line)}
.divider-text{font-size:.58rem;color:var(--dim);letter-spacing:2px}

.google-btn{width:100%;padding:.85rem;background:var(--ink);border:1px solid var(--line);
            border-radius:var(--radius-pill);color:var(--paper);font-family:var(--mono);
            font-size:.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;
            cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.75rem;
            transition:border-color .2s,background .2s}
.google-btn:hover{border-color:var(--paper);background:#fff}
.google-btn.primary{background:var(--paper);border-color:var(--paper);color:var(--ink);
                    padding:1rem}
.google-btn.primary:hover{background:#000;border-color:#000}
.google-icon{width:16px;height:16px;flex:none}

/* ── welcome back: one tap for a live session ── */
.session-box{margin-bottom:1.4rem}
.session-btn{text-transform:none;letter-spacing:.4px;font-size:.8rem}
.session-btn b{font-weight:700}
.session-alt{width:100%;margin-top:.7rem;padding:.5rem;background:none;border:0;
             color:var(--dim);font-family:var(--mono);font-size:.68rem;
             letter-spacing:.6px;cursor:pointer;text-decoration:underline;
             text-underline-offset:3px}
.session-alt:hover{color:var(--paper)}

.email-reveal{width:100%;padding:.85rem;background:none;border:1px solid var(--line);
              border-radius:var(--radius-pill);color:var(--paper);font-family:var(--mono);
              font-size:.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;
              cursor:pointer;transition:border-color .2s}
.email-reveal:hover{border-color:var(--paper)}
.email-form{margin-top:1.2rem}

.fineprint{margin-top:1.3rem;font-size:.62rem;line-height:1.7;color:var(--dim);
           text-align:center;letter-spacing:.2px}

/* ── mode toggle ── */
.invite-note{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid var(--line);
             font-size:.72rem;color:var(--dim);line-height:1.7;text-align:center}
.invite-note a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--line);
               transition:color .2s,border-color .2s}
.invite-note a:hover{color:var(--accent);border-color:var(--accent)}

.foot{text-align:center;padding:20px;font-size:.62rem;letter-spacing:.18em;
      text-transform:uppercase;color:var(--dim)}
.foot a{color:inherit}
.foot a:hover{color:var(--accent)}

@media(max-width:480px){.card{padding:26px 20px}.card-title{font-size:1.45rem}}