/* The sign-in screen — the front door, before the chassis in common.css exists for you.

   Copied from the Manyone Events sign-in screen (events.manyone.com/signin), measured off
   the live page rather than approximated: warm paper canvas, one 420px white card with 40px
   of padding, the wordmark as the heading, a single call to action, and one quiet line
   underneath. Both apps already share the --cv-* palette, so every value below resolves to
   a token that is literally the same colour on both sides.

   The one thing that is NOT a shared token is the button: manyone.com's signature is a
   fully rounded indigo pill with the label in the display italic, which is what Events uses
   here and what makes the screen read as Manyone rather than as a form. The suite's own
   .btn-primary (8px, Akkurat bold) is the right control INSIDE a tool, where it sits beside
   siblings in a toolbar; this is one button on an otherwise empty page. */

body {
  background: var(--cv-canvas);
  color: var(--cv-ink);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cv-s5) var(--cv-s5) var(--cv-s7);
}

.signin { width: 100%; max-width: 420px; }

.signin-card {
  background: var(--cv-surface);
  border: 1px solid var(--cv-line-onwhite);
  border-radius: var(--cv-r-sm);
  box-shadow: var(--cv-e2);
  padding: 40px;
}

/* The wordmark is the heading. The 2px nudge sits the logo on the text baseline: centring
   aligns the two boxes, but the SVG's box carries the y descender and the registered mark,
   so its letters otherwise ride high. Measured against the rendered baseline, not guessed —
   same correction, same reason, as the Events wordmark at this size. */
.signin-mark {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0;
}
.signin-mark img { height: 26px; width: auto; display: block; transform: translateY(2px); }
.signin-mark span {
  font-family: var(--display-font); font-style: italic; font-weight: 400;
  font-size: 24px; line-height: 1; color: var(--cv-muted);
  /* Never wrap. "Brand Tools" is two words where Events has one, so on a phone it broke to
     a second line and left the logo sitting beside a two-line block, off the baseline the
     nudge above exists to hold. The lockup shrinks a step instead — see the media query. */
  white-space: nowrap;
}

/* Sign-in failed. Danger tone, hidden until login.js has an error code to put in it. */
.signin-notice {
  margin-top: 20px;
  border: 1px solid rgba(192, 32, 21, .3);   /* --danger at 30% */
  background: var(--cv-danger-wash);                       /* danger wash, same value as the Events palette */
  color: var(--danger);
  border-radius: var(--cv-r-sm);
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.6;
}

.signin-action { margin-top: 32px; display: flex; justify-content: center; }

/* manyone.com's button: a fully rounded indigo pill, label in the display italic. The face
   carries no bold and has a smaller x-height than Akkurat, so the label runs a step larger
   than UI text and never asks for a synthesized weight. Height comes from the label rather
   than from padding — tall padding inflates the pill into a blob. */
.signin-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px; padding: 0 24px; border: 1px solid transparent; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--display-font); font-style: italic; font-weight: 400;
  font-size: 15px; line-height: 1; letter-spacing: normal; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: background var(--mo-quick) var(--mo-inout);
}
.signin-btn:hover { background: var(--accent-hover); }
.signin-btn:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: 2px; }

.signin-foot { margin-top: 24px; text-align: center; font-size: 12px; color: var(--cv-muted); }

/* Phones. 40px of card padding is generous on a 420px screen and a squeeze on a 320px one,
   so it comes in, and the wordmark steps down with it. Sized so the one-line lockup still
   clears the card's inner width at 320px (221px needed against 230px available), which is
   the narrowest screen worth designing for. */
@media (max-width: 480px) {
  body { padding: var(--cv-s5) var(--cv-s4) var(--cv-s6); }
  .signin-card { padding: 28px 24px; }
  .signin-mark { gap: 10px; }
  .signin-mark img { height: 23px; transform: translateY(2px); }
  .signin-mark span { font-size: 21px; }
}