/* ===========================================================================
   Log In Concept — a sign-in card standing on a world you paint yourself.

   The card is deliberately quiet: neutral greys, one near-black action, large
   soft radii, filled fields that only gain an edge on focus, and shadows that
   are diffuse rather than drawn. It stays out of the way so the world behind
   it — which is the actual idea — carries the colour.

   Everything the canvas draws is a JS constant in app.js; no rule in this file
   can reach it. Restyle freely.
   =========================================================================== */

:root {
  --ink:       #111113;   /* headings, primary action */
  --ink-dim:   #6e6e76;   /* body, labels */
  --ink-faint: #a1a1aa;   /* placeholders */
  --surface:   #ffffff;
  --fill:      #f4f4f5;   /* resting field / secondary hover */
  --hairline:  #e8e8ec;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --r-card:  28px;
  --r-field: 14px;
  --r-pill:  999px;

  /* diffuse, layered — never a single hard drop */
  --shadow-card: 0 32px 64px -24px rgba(17,17,19,.22), 0 2px 8px rgba(17,17,19,.04);
  --shadow-float: 0 12px 28px -10px rgba(17,17,19,.16), 0 1px 3px rgba(17,17,19,.05);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: #fbfbfa;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input { font-family: inherit; }

.screen--auth { position: absolute; inset: 0; overflow: hidden; }

.auth-root {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(1100px 720px at 82% -8%, rgba(1,162,234,.10), transparent 60%),
    radial-gradient(900px 640px at 8% 108%, rgba(0,163,64,.10), transparent 55%),
    #fdfaf3;
}
#authStage { position: absolute; inset: 0; display: block; z-index: 0; touch-action: none; cursor: grab; }
#authStage.dragging { cursor: grabbing; }
#authStage.paint { cursor: crosshair; }
.vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(125% 125% at 50% 42%, transparent 62%, rgba(60,40,10,.05) 100%);
}

/* running commentary, bottom centre */
.hint {
  position: absolute; z-index: 20; left: 50%; bottom: 30px; transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 40px));
  padding: 10px 18px; background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: var(--r-pill); box-shadow: var(--shadow-float);
  text-align: center; font: 400 13px/1.45 var(--font); letter-spacing: -.01em;
  color: var(--ink-dim); pointer-events: none; transition: opacity .3s;
}
.hint:empty { opacity: 0; }

/* ---------------------------------------------------------------------------
   TOOL PALETTE — pinned right, opposite the form. The icons and the terrain
   colours inside them are untouched; only the rail around them is restyled.
   --------------------------------------------------------------------------- */
.palette {
  position: absolute; z-index: 20; right: 24px; top: 50%; transform: translateY(-50%);
  display: none; flex-direction: column; align-items: stretch; gap: 4px; width: 92px;
  padding: 10px; background: rgba(255,255,255,.9);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 22px; box-shadow: var(--shadow-float);
}
.palette.show { display: flex; }
.pal-cat {
  appearance: none; border: 0; border-radius: var(--r-pill); padding: 7px 4px;
  font: 500 12px var(--font); letter-spacing: -.01em;
  color: var(--ink-dim); background: transparent; cursor: pointer;
  transition: background .15s, color .15s;
}
.pal-cat:hover { background: var(--fill); color: var(--ink); }
.pal-cat.active { background: var(--ink); color: #fff; }
.pal-sep { height: 1px; background: var(--hairline); margin: 6px 4px; }
.pal-group { display: none; flex-direction: column; gap: 2px; }
.pal-group.show { display: flex; }
.pal-tool, .pal-collab {
  appearance: none; display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 0; border-radius: 14px; background: transparent;
  padding: 9px 2px 7px; cursor: pointer; color: var(--ink-dim);
  transition: background .15s, color .15s;
}
.pal-tool svg, .pal-collab svg { width: 22px; height: 22px; display: block; }
.pal-tool span, .pal-collab span { font: 500 10.5px var(--font); letter-spacing: -.01em; }
.pal-tool:hover, .pal-collab:hover { background: var(--fill); color: var(--ink); }
.pal-tool.active { background: var(--fill); color: var(--ink); }
.pal-collab { color: var(--ink-faint); }
.pal-collab.active { background: var(--fill); color: var(--ink); }
.pal-brushes { display: flex; gap: 2px; }
.pal-brushes button {
  appearance: none; flex: 1; min-width: 0; padding: 0; display: flex; align-items: center;
  justify-content: center; height: 28px; border: 0; border-radius: 10px;
  background: transparent; cursor: pointer; transition: background .15s;
}
.pal-brushes button i { display: block; border-radius: 50%; background: var(--ink-faint); transition: background .15s; }
.pal-brushes button:hover { background: var(--fill); }
.pal-brushes button.active { background: var(--fill); }
.pal-brushes button.active i { background: var(--ink); }

/* ↺ Randomize — created by app.js, bottom right */
.float-btn {
  position: absolute; z-index: 20; right: 24px; bottom: 26px; padding: 11px 18px;
  border: 0; border-radius: var(--r-pill); background: rgba(255,255,255,.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: var(--ink); font: 500 13px var(--font); letter-spacing: -.01em;
  cursor: pointer; box-shadow: var(--shadow-float);
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s, background .15s;
}
.float-btn:hover { background: #fff; transform: translateY(-1px); }
.float-btn:active { transform: translateY(0) scale(.985); }

/* ---------------------------------------------------------------------------
   THE CARD — anchored left. The off-centre composition is the point: the form
   holds one edge and the world runs out from under it.
   --------------------------------------------------------------------------- */
.wrap {
  position: absolute; inset: 0; z-index: 15; display: flex; align-items: center;
  justify-content: flex-start; pointer-events: none;
  padding: 20px 20px 20px clamp(24px, 6vw, 96px);
}
.card {
  pointer-events: auto; width: 420px; max-width: 100%; padding: 40px 36px 32px;
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
/* User name only applies to sign-up */
.card[data-mode="login"] .field--name { display: none; }

.title {
  font: 600 28px/1.15 var(--font); letter-spacing: -.035em;
  margin: 0 0 8px; color: var(--ink);
}
.sub { color: var(--ink-dim); font: 400 14px/1.55 var(--font); letter-spacing: -.01em; margin: 0 0 28px; }

label {
  display: block; font: 500 12.5px var(--font); letter-spacing: -.01em;
  color: var(--ink-dim); margin: 0 0 7px;
}
.field { display: block; margin-bottom: 14px; }
.field input {
  width: 100%; padding: 14px 16px; border: 1px solid transparent; border-radius: var(--r-field);
  background: var(--fill); color: var(--ink); font: 400 14.5px var(--font);
  letter-spacing: -.01em; outline: none;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.field input::placeholder { color: var(--ink-faint); }
.field input:hover { background: #efeff1; }
.field input:focus {
  background: var(--surface); border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(17,17,19,.07);
}

.row { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 22px; }
.card[data-mode="signup"] .row { display: none; }
.row label.cb {
  display: flex; align-items: center; gap: 9px; margin: 0; cursor: pointer;
  color: var(--ink-dim); font-size: 13px;
}
/* rounded checkbox, fills near-black when on */
.row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 18px; height: 18px; border: 1.5px solid #d6d6db; border-radius: 6px;
  background: var(--surface); cursor: pointer; display: grid; place-items: center;
  transition: background .15s, border-color .15s;
}
.row input[type="checkbox"]::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) scale(.6); opacity: 0;
  transition: opacity .12s, transform .12s;
}
.row input[type="checkbox"]:checked { background: var(--ink); border-color: var(--ink); }
.row input[type="checkbox"]:checked::after { opacity: 1; transform: rotate(-45deg) scale(1); }
.row a {
  color: var(--ink-dim); font-size: 13px; letter-spacing: -.01em;
  text-decoration: none; transition: color .15s;
}
.row a:hover { color: var(--ink); }

/* the primary action is inert by design — it still has to feel pressable */
.btn {
  width: 100%; padding: 15px; border: 0; border-radius: var(--r-pill); cursor: pointer;
  font: 500 14.5px var(--font); letter-spacing: -.01em;
  color: #fff; background: var(--ink);
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s, opacity .15s;
}
.btn:hover { box-shadow: 0 10px 24px -10px rgba(17,17,19,.6); transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.99); }

.divider {
  display: flex; align-items: center; gap: 14px; color: var(--ink-faint);
  font: 400 12.5px var(--font); letter-spacing: -.01em; text-transform: lowercase;
  margin: 26px 0 16px;
}
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: var(--hairline); }

.sso { display: flex; gap: 10px; }
.sso button {
  flex: 1; padding: 13px; border: 1px solid var(--hairline); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); font: 500 13.5px var(--font);
  letter-spacing: -.01em; cursor: pointer;
  transition: background .15s, border-color .15s, transform .18s cubic-bezier(.22,1,.36,1);
}
.sso button:hover { background: var(--fill); border-color: #dedee3; }
.sso button:active { transform: scale(.99); }

.foot {
  text-align: center; color: var(--ink-dim); font: 400 13px var(--font);
  letter-spacing: -.01em; margin: 26px 0 0;
}
.foot a {
  color: var(--ink); font-weight: 500; cursor: pointer; text-decoration: none;
  transition: opacity .15s;
}
.foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------------------------
   TEAMMATE CURSORS — left exactly as built. They belong to the world, not to
   the card.
   --------------------------------------------------------------------------- */
.auth-cursors {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 14;
}
.cursor {
  position: absolute; top: 0; left: 0;
  transform: translate(-3px, -3px); /* arrow tip lands on the left/top point */
  transition: opacity .45s ease;    /* position is driven each frame by JS (rAF) */
  will-change: left, top, opacity;
}
.cursor__arrow { display: block; width: 22px; height: 22px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.cursor__arrow path {
  fill: var(--c); stroke: #fff; stroke-width: 2.8;
  stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.cursor__tag {
  position: absolute; top: 15px; left: 11px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px 2px 2px; border-radius: var(--r-pill);
  background: var(--c); color: #fff; font: 500 11px var(--font); letter-spacing: -.01em;
  white-space: nowrap; box-shadow: 0 4px 12px -4px rgba(0,0,0,.45);
}
.cursor__face {
  width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid rgba(255,255,255,.9);
}
.cursor__face--init { display: grid; place-items: center; font-size: 8px; font-weight: 600; }

/* ---------------------------------------------------------------------------
   Small screens: the paint tools are a desktop delight. Keep the card clean
   and let the world simply sit behind it.
   --------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .wrap { justify-content: center; padding: 20px; }
  .card { width: 100%; padding: 32px 24px 26px; }
  /* the hint narrates the tools, and the tools are gone — so is the hint */
  .palette, .palette.show, .float-btn, .hint { display: none; }
}