/* ============================================================================
   VITRINE — AUTHENTICATION
   assets/vitrine.auth.css

   Requires: tokens · base · type · icon · button · input · state

   ---------------------------------------------------------------------------
   THE CARD IS WHAT MAKES AN AUTH SCREEN LOOK LIKE EVERY OTHER AUTH SCREEN

   So there isn't one. The form sits on the product's own ground — the same
   #0B0B0B as every signed-in page — with no box, no border and no shadow.
   What locates it is space, a measure, and the same ambient wash the album
   and artist heroes use, so signing in reads as the front door of this
   product rather than a generic gate in front of it.

   ---------------------------------------------------------------------------
   ONE COLUMN AT EVERY SIZE, AND THAT IS DELIBERATE

   The other pattern — a marketing panel on the left, the form on the right —
   is the SaaS convention, and half of it is decoration you have to write
   copy for. A single centred column is the same on a phone and a 1920px
   display, which means the thing you came to do is in the same place
   whatever you are holding. What changes with width is the measure and the
   air around it, not the arrangement.
   ========================================================================== */


/* ==========================================================================
   §1 · GROUND
   ========================================================================== */

.vt-auth {
  position: relative;
  isolation: isolate;

  min-block-size: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;

  padding-inline: var(--vt-gutter-mobile);
  padding-block: var(--vt-space-8) var(--vt-space-5);
  background-color: var(--vt-surface-ground);
  color: var(--vt-text-primary);
}

/* The same wash the heroes use — top-weighted, so the panel sits in light
   rather than on a flat plane. */
.vt-auth__ambient {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: min(52vh, 26rem);
  z-index: -1;
  pointer-events: none;
  background: var(--vt-ambient-wash);
}


/* ==========================================================================
   §2 · PANEL
   ========================================================================== */

.vt-auth__panel {
  inline-size: 100%;
  max-inline-size: 24rem;
  display: grid;
  /* Rows set their own spacing; a blanket gap would put the same distance
     between the heading and its lede as between two fields. */
  gap: 0;
}

.vt-auth--narrow .vt-auth__panel { max-inline-size: 20rem; }

.vt-auth__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--vt-space-2);
  justify-self: start;
  margin-block-end: var(--vt-space-6);

  color: var(--vt-text-primary);
  font-size: var(--vt-fs-sm);
  font-weight: var(--vt-fw-semibold);
  letter-spacing: var(--vt-ls-ui);
  text-decoration: none;
  border-radius: var(--vt-radius-full);
}
.vt-auth__brand img { border-radius: var(--vt-radius-sm); }
.vt-auth__brand:focus-visible {
  outline: var(--vt-focus-width) solid var(--vt-focus-color);
  outline-offset: var(--vt-focus-offset);
}

/* The one large line. Page-title size, not display size — the token set
   reserves the step above this for the now-playing title, and an auth screen
   is not the most important thing in the product. */
.vt-auth__heading {
  margin: 0;
  font-size: var(--vt-fs-2xl);
  font-weight: var(--vt-fw-bold);
  line-height: var(--vt-lh-tight);
  letter-spacing: var(--vt-ls-display);
}

.vt-auth__lede {
  margin: var(--vt-space-2) 0 0;
  color: var(--vt-text-secondary);
  font-size: var(--vt-fs-base);
  line-height: var(--vt-lh-snug);
}


/* ==========================================================================
   §3 · FORM
   ========================================================================== */

.vt-auth__form {
  display: grid;
  gap: var(--vt-space-4);
  margin-block-start: var(--vt-space-6);
}

/* Two fields that belong together on one line — first and last name. They
   stack below 380px, where two 45%-width inputs stop being usable. */
.vt-auth__pair {
  display: grid;
  gap: var(--vt-space-4);
}
/* 360, not 380: the common phone widths are 375, 390 and 414, and at 380
   every one of them stacked. Side by side saves a full field of height,
   which is the scarcest thing on the screen once a keyboard is up. */
@media (min-width: 360px) {
  .vt-auth__pair { grid-template-columns: 1fr 1fr; }
}

.vt-auth__submit { margin-block-start: var(--vt-space-2); }
.vt-auth__submit .vt-btn { inline-size: 100%; }


/* ==========================================================================
   §4 · NOTICE
   One shape for every server message, so a failure is recognisable before
   it is read.
   ========================================================================== */

.vt-auth__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--vt-space-2);

  margin: var(--vt-space-6) 0 0;
  padding: var(--vt-space-3) var(--vt-space-4);
  border-radius: var(--vt-radius-md);

  font-size: var(--vt-fs-sm);
  line-height: var(--vt-lh-snug);
}
.vt-auth__notice .vt-icon { flex: none; margin-block-start: 1px; }

.vt-auth__notice--error {
  background-color: var(--vt-danger-quiet);
  color: var(--vt-danger);
}
.vt-auth__notice--ok {
  background-color: var(--vt-success-quiet);
  color: var(--vt-success);
}


/* ==========================================================================
   §5 · CODE ENTRY
   Six boxes, one value. The boxes are a display of the code, not six
   separate answers — the form posts a single hidden field, exactly as the
   retired page did, so the server contract is unchanged.
   ========================================================================== */

.vt-auth__code {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--vt-space-2);
}

.vt-auth__digit {
  inline-size: 100%;
  min-inline-size: 0;
  block-size: 3.5rem;

  border: var(--vt-stroke-hairline) solid var(--vt-border-default);
  border-radius: var(--vt-radius-md);
  background-color: var(--vt-fill-quiet);
  color: var(--vt-text-primary);

  text-align: center;
  /* 16px minimum, or iOS zooms the page on focus and the layout the user
     was looking at is gone. */
  font-size: var(--vt-fs-md);
  font-weight: var(--vt-fw-semibold);
  font-variant-numeric: tabular-nums;

  transition: border-color var(--vt-dur-quick) var(--vt-ease-enter),
              background-color var(--vt-dur-quick) var(--vt-ease-enter);
}
.vt-auth__digit:focus {
  outline: none;
  border-color: var(--vt-border-strong);
  background-color: var(--vt-fill-hover);
}
.vt-auth__digit:focus-visible {
  outline: var(--vt-focus-width) solid var(--vt-focus-color);
  outline-offset: var(--vt-focus-offset);
}
.vt-auth__code[data-vt-invalid] .vt-auth__digit { border-color: var(--vt-danger); }

.vt-auth__resend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--vt-space-2);
  margin-block-start: var(--vt-space-4);
  min-block-size: var(--vt-hit-min);
  color: var(--vt-text-secondary);
  font-size: var(--vt-fs-sm);
}


/* ==========================================================================
   §6 · FOOT
   ========================================================================== */

.vt-auth__foot {
  margin: var(--vt-space-6) 0 0;
  color: var(--vt-text-secondary);
  font-size: var(--vt-fs-sm);
}
.vt-auth__foot a { color: var(--vt-text-primary); font-weight: var(--vt-fw-semibold); }

.vt-auth__legal {
  display: flex;
  align-items: center;
  gap: var(--vt-space-3);
  color: var(--vt-text-tertiary);
  font-size: var(--vt-fs-xs);
}
.vt-auth__legal a { color: inherit; text-decoration: none; }
.vt-auth__legal a:hover { color: var(--vt-text-secondary); text-decoration: underline; }


/* ==========================================================================
   §7 · WIDTH
   The arrangement does not change — only the measure and the air. See the
   head of this file for why there is no second column.
   ========================================================================== */

@media (min-width: 768px) {
  .vt-auth { padding-inline: var(--vt-space-8); padding-block: var(--vt-space-10) var(--vt-space-6); }
  .vt-auth__panel { max-inline-size: 26rem; }
  .vt-auth--narrow .vt-auth__panel { max-inline-size: 22rem; }
  .vt-auth__digit { block-size: 4rem; font-size: var(--vt-fs-lg); }
}


/* ==========================================================================
   §7b · TOUCH
   Auth is the one place in the product where every control is a form
   control, and where a mis-tap costs you the whole screen — so the sizes
   are checked here rather than inherited and hoped for.
   ========================================================================== */

@media (pointer: coarse) {
  /* The field's control box is comfortable; the <input> inside it was 37px,
     leaving a dead band at the top and bottom that looks like the field and
     focuses nothing when tapped. Stretching the input makes the box and the
     target the same object — the same fix the search bar needed. */
  .vt-auth .vt-field__control { --_h: 3.25rem; }        /* 52 */
  .vt-auth .vt-input { align-self: stretch; }

  /* The reveal button sits inside the password field, where a near-miss
     lands in the field itself — harmless, but it means the control needs a
     real target rather than a 32px glyph. */
  .vt-auth [data-vt-reveal] {
    inline-size: var(--vt-hit-min);
    block-size: var(--vt-hit-min);
  }

  /* Text links: the brand, the switch to the other screen, and the legal
     pair. All are small type by design, so the target is grown around the
     text rather than the text being grown. */
  .vt-auth__brand { min-block-size: var(--vt-hit-min); }
  .vt-auth__foot a,
  .vt-auth__legal a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--vt-hit-min);
  }

  /* The legal pair stands alone, so it can be widened to the minimum without
     disturbing anything. The links inside a sentence — "Already have an
     account? Log in" — deliberately are NOT widened: padding a word out to
     44px mid-sentence opens a visible gap in the middle of the line, and the
     target-size rule carves out links in running text for exactly that
     reason. */
  .vt-auth__legal a {
    justify-content: center;
    min-inline-size: var(--vt-hit-min);
  }

  /* Six boxes cannot all reach 44px at 320px with an 8px gap: 6x44 + 5x8 is
     304 in 288 of content. The gap gives way, not the target. */
  .vt-auth__digit { min-inline-size: 0; }
}

@media (max-width: 359.98px) {
  /* The shell narrows its gutter at this width and the auth page has to
     follow, or the six code boxes are squeezed to 43px inside a 280px
     measure instead of 44 inside 288. */
  .vt-auth { padding-inline: var(--vt-space-4); }
}

@media (pointer: coarse) and (max-width: 379.98px) {
  .vt-auth__code { gap: var(--vt-space-1); }
}


/* ==========================================================================
   §8 · MOBILE KEYBOARD
   assets/vitrine.auth.js publishes the occluded height as --vt-kb. The panel
   is centred in what is LEFT of the viewport rather than in the viewport, so
   the field you are typing into and the button that submits it are both
   still on screen with the keyboard up.
   ========================================================================== */

@media (max-width: 767.98px) {
  :root[data-vt-keyboard="1"] .vt-auth {
    /* Stop centring and start from the top: with 336px of keyboard up there
       is not enough height left to centre anything in, and a centred panel
       pushes its own submit button underneath the keys. */
    align-items: start;
    min-block-size: auto;
    padding-block-start: var(--vt-space-5);
    padding-block-end: calc(var(--vt-kb, 0px) + var(--vt-space-6));
  }
  :root[data-vt-keyboard="1"] .vt-auth__brand { margin-block-end: var(--vt-space-4); }
  /* The legal line is the first thing worth losing when space is short. */
  :root[data-vt-keyboard="1"] .vt-auth__legal { display: none; }
}