/* ===========================================================
   Sign-in — V21 "THE MARQUEE" (v21.9.5)

   No photograph. The type is the brand moment: a marquee on the left
   (kicker, three-line headline, spectrum row) and a white card on the
   right carrying the rainbow rule as its top edge — the same frame the
   Home plate uses. Framed things get a rainbow rule; that is the system.

   Replaces the v21.5 dark split layout and its purple-indigo palette.

   The JS contract from js/auth.js: .atelier-auth-gate, #atelier-auth-form,
   #atelier-auth-email, #atelier-auth-password, #atelier-auth-status,
   .atelier-auth-signout, plus v21.9.5's #atelier-auth-eye,
   #atelier-auth-forgot, #atelier-auth-submit, .auth-card-body.

   Breakpoints (three steps):
     > 1080   marquee and card side by side
     600–1080 STACKS, marquee above the card — iPad in both orientations
     < 600    the card frame comes off; fields sit on the canvas
   =========================================================== */

/* ---------- CARRIED OVER UNCHANGED — not the sign-in screen ----------
   Hide the app itself until Supabase confirms a session.
   NOTE: `main` here is deliberately broad and matches ANY <main> in the
   document. That is what silently hid the Workroom's Maker Plan column in
   v21.9, when it was still a nested <main>. Don't add nested <main>
   elements, and think twice before widening this. */
body.atelier-auth-checking main,
body.atelier-auth-checking .app,
body.atelier-auth-signed-out main,
body.atelier-auth-signed-out .app {
  display: none !important;
}

/* ---------- The gate ---------- */
.atelier-auth-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 64px 44px;
  overflow-y: auto;
  background: var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--ui);
}
body.atelier-auth-signed-out .atelier-auth-gate { display: flex; }

/* The signature bar, across the very top of the page. */
.auth-rainbow {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--rainbow);
  z-index: 2;
}

.auth-inner {
  width: 100%;
  max-width: 1000px;
  display: flex;
  gap: 80px;
  align-items: center;
}

/* ---------- Left: the marquee ---------- */
.auth-marquee { flex: 0 1 auto; min-width: 0; }
.auth-kk {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 15px;
}
.atelier-auth-gate h1 {
  font-family: var(--disp);
  font-weight: 900;
  font-size: clamp(78px, 9vw, 132px);
  line-height: 0.84;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.atelier-auth-gate h1 span { display: block; }

.auth-spectrum { display: flex; gap: 6px; margin: 28px 0 0; }
.auth-spectrum i { width: 44px; height: 11px; }
.auth-spectrum i:nth-child(1) { background: var(--pink); }
.auth-spectrum i:nth-child(2) { background: var(--red); }
.auth-spectrum i:nth-child(3) { background: var(--orange); }
.auth-spectrum i:nth-child(4) { background: var(--yellow); }
.auth-spectrum i:nth-child(5) { background: var(--green); }
.auth-spectrum i:nth-child(6) { background: var(--blue); }
.auth-spectrum i:nth-child(7) { background: var(--purple); }

.auth-est {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 24px 0 0;
}

/* ---------- Right: the card ---------- */
.auth-card {
  width: 392px;
  flex: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 0;
  box-shadow: var(--sh-3);
}
.auth-card-rule { height: 5px; background: var(--rainbow); }
.auth-card-body { padding: 34px 32px 32px; }
.atelier-auth-gate h2 {
  font-family: var(--disp);
  font-weight: 900;
  font-size: 34px;
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 24px;
}

/* Real labels, above the field. Never placeholder-as-label. */
.auth-label {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mut);
  margin: 0 0 8px;
}
.auth-field { position: relative; margin: 0 0 18px; }
.atelier-auth-gate input[type="email"],
.atelier-auth-gate input[type="password"],
.atelier-auth-gate input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;                 /* comfortably past the 44px touch floor */
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  padding: 15px;
  font-family: var(--ui);
  font-size: 16px;                  /* 16px or iOS zooms the page on focus */
  background: var(--bg-flat);
  color: var(--ink);
}
.atelier-auth-gate input::placeholder { color: var(--faint); }
.atelier-auth-gate input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(224, 50, 47, 0.25);
}
/* Room for the Show/Hide control. */
#atelier-auth-password { padding-right: 76px; }
.auth-eye {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  cursor: pointer;
  /* An explicit floor, not padding arithmetic — at a 10px mono face the
     padding maths landed on 43px, one short. */
  min-height: 44px;
  padding: 0 12px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mut);
}
.auth-eye:hover { color: var(--ink); }
.auth-eye:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(224, 50, 47, 0.25);
}

.auth-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 2px 0 22px;
}
.auth-forgot {
  background: none;
  border: 0;
  padding: 6px 2px;
  cursor: pointer;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid currentColor;
}
.auth-forgot:hover { color: var(--red); }
.auth-forgot:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(224, 50, 47, 0.25);
}

.auth-submit {
  width: 100%;
  min-height: 52px;
  background: var(--red);
  color: var(--primary-fg);   /* v21.18: same #ffffff, but by intent */
  border: 0;
  border-radius: var(--r-xs);
  padding: 17px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}
/* v21.18: #c72a27 LEFT AS A LITERAL, deliberately. It is "the brand red,
   darkened for hover" and there is no token for that — --red is #e0322f and
   --accent-ink (#b8231f) is a *text* colour for red-on-tint, not a surface.
   The same literal appears three more times in css/styles.css (.primary.create,
   .ask-danger, .tabbar-fab.active), so it wants a --red-hover token of its
   own; that is a styles.css change, not a sign-in change, so it is not made
   here. */
.auth-submit:hover { background: #c72a27; }
.auth-submit:disabled { opacity: 0.6; cursor: default; }
.auth-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(224, 50, 47, 0.25);
}

/* Inline message, right under the button and near the fields it concerns.
   --mut on --panel clears 4.5:1; the error red is the darker ink-red, not the
   bright signature red, for the same reason. */
.atelier-auth-status {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mut);
  min-height: 1em;
}
/* v21.18: both were hard-coded. --accent-ink is the design system's readable
   red for text and --green-ink its readable green (v21.15), which is exactly
   what these two are. Measured on the white sheet: error 6.58 -> 6.37,
   ok 5.30 -> 5.15. Both stay well clear of 4.5. */
.atelier-auth-status.is-error { color: var(--accent-ink); font-weight: 600; }
.atelier-auth-status.is-ok { color: var(--green-ink); font-weight: 600; }

/* ---------- iPad and down: STACK ----------
   The marquee goes above the card, and the headline scales to the column so
   it never runs under it. */
@media (max-width: 1080px) {
  .atelier-auth-gate { align-items: flex-start; padding: 56px 40px; }
  .auth-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    max-width: 520px;
  }
  .atelier-auth-gate h1 { font-size: clamp(72px, 13vw, 104px); }
  .auth-card { width: 100%; }
  .auth-est { display: none; }
}

/* ---------- Phone: the card frame comes off ----------
   A bordered card inside a bordered screen is a box in a box. The fields sit
   straight on the canvas instead. */
@media (max-width: 600px) {
  .atelier-auth-gate { padding: 40px 24px; }
  .auth-inner { gap: 30px; }
  .atelier-auth-gate h1 { font-size: clamp(58px, 17vw, 76px); }
  .auth-spectrum { margin-top: 22px; }
  .auth-spectrum i { flex: 1; width: auto; height: 9px; }
  .auth-card { border: 0; box-shadow: none; background: transparent; }
  .auth-card-rule { display: none; }
  .auth-card-body { padding: 0; }
  .atelier-auth-gate h2 { display: none; }
  .atelier-auth-gate input[type="email"],
  .atelier-auth-gate input[type="password"],
  .atelier-auth-gate input[type="text"] { background: var(--panel); }
}

/* ---------- CARRIED OVER UNCHANGED — not the sign-in screen ----------
   Sign out.
   v21.5: was a purple pill; now a quiet ghost chip in the app's own language.
   v21.7.9: ABSOLUTE, not fixed — it sat over the gallery on every scroll for
   an action taken maybe once a session. It now lives at the top-right of the
   page and scrolls away like any other header element. */
.atelier-auth-signout {
  position: absolute;
  top: calc(var(--rainbow-h, 7px) + 12px);
  right: 16px;
  z-index: 46;
  display: none;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--panel);
  color: var(--mut);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.atelier-auth-signout:hover { color: var(--ink); border-color: var(--ink); }
body.atelier-auth-signed-in .atelier-auth-signout { display: block; }