/* Sign in, Forgot your password and the other signed-out pages, measured
   from Bee Heard's (Scott's pick): a 64×80 mark, a 440px card with 32px
   padding, 46px fields and buttons, links under the card. Its colours, in
   tokens so dark mode still works, and its font, Hero New (Scott holds a
   licence covering Postboxey), only on these pages. */

@font-face { font-family: "Hero New"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/hero-new/hero-new-regular-43fa44c1.otf") format("opentype"); }
@font-face { font-family: "Hero New"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/hero-new/hero-new-semibold-2ea7b4d4.otf") format("opentype"); }
@font-face { font-family: "Hero New"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/hero-new/hero-new-bold-3c100b3a.otf") format("opentype"); }

:root {
  --sign-in-page: #f8f9f9; /* Quiet neutral's near-white (Bee Heard's cream was #fffdf8) */
  --sign-in-ink: var(--color-ink); /* the app's ink, as dark mode already uses (Bee Heard's was #252820) */
  --sign-in-label: var(--color-ink);
  --sign-in-subtle: var(--color-muted);
  --sign-in-divider: #7f7f7f;
  --sign-in-line: #e7e5e4; /* the app's hairline (--popup-line) */
  --sign-in-field-line: #d6d3d1; /* the app's rule grey (--color-rule) */
  --sign-in-button: var(--color-ink);
  --sign-in-button-hover: rgb(var(--ink-rgb) / 0.85);
  --sign-in-button-ink: #ffffff;
  --sign-in-font: "Hero New", var(--font);
  --sign-in-regular: 400;
  --sign-in-semibold: 600;
  --sign-in-bold: 700;
}

:root[data-appearance="dark"] {
  --sign-in-page: var(--color-bg);
  --sign-in-ink: var(--color-ink);
  --sign-in-label: var(--color-ink);
  --sign-in-subtle: var(--color-muted);
  --sign-in-divider: var(--color-muted);
  --sign-in-line: var(--color-line);
  --sign-in-field-line: var(--color-line);
  --sign-in-button: var(--color-ink);
  --sign-in-button-hover: var(--color-muted);
  --sign-in-button-ink: var(--color-bg);
}

@media (prefers-color-scheme: dark) {
  :root[data-appearance="system"] {
    --sign-in-page: var(--color-bg);
    --sign-in-ink: var(--color-ink);
    --sign-in-label: var(--color-ink);
    --sign-in-subtle: var(--color-muted);
    --sign-in-divider: var(--color-muted);
    --sign-in-line: var(--color-line);
    --sign-in-field-line: var(--color-line);
    --sign-in-button: var(--color-ink);
    --sign-in-button-hover: var(--color-muted);
    --sign-in-button-ink: var(--color-bg);
  }
}

.app-main.app-main--sign-in { max-width: none; margin: 0; padding: 0; }
body:has(.sign-in-page) { background: var(--sign-in-page); }

.sign-in-page { min-height: 100dvh; box-sizing: border-box; padding: clamp(32px, 5vh, 64px) 16px 48px; background: var(--sign-in-page); color: var(--sign-in-ink); font-family: var(--sign-in-font); font-size: 16px; line-height: 24px; font-weight: var(--sign-in-regular); }
.sign-in-shell { width: 100%; max-width: 440px; margin: 0 auto; }
/* The mark, then the name sliding out on hover, as Bee Heard's (64px
   closed, the name 78px in; 290px open, for "postboxey" at 205px) */
.sign-in-mark { position: relative; display: flex; align-items: center; width: 64px; height: 80px; margin: 0 auto 24px; overflow: hidden; border-radius: 8px; text-decoration: none; transition: width 350ms cubic-bezier(.22, 1, .36, 1); }
.sign-in-page a.sign-in-mark { text-decoration: none; }
.sign-in-mark__icon { position: relative; z-index: 1; flex-shrink: 0; width: 64px; height: 64px; background: var(--sign-in-page); }
.sign-in-mark__wordmark { position: absolute; top: 0; left: 78px; width: max-content; height: 80px; color: var(--sign-in-ink); font: 700 40px/80px var(--sign-in-font); letter-spacing: -1px; white-space: nowrap; opacity: 0; transform: translateX(-24px); clip-path: inset(0 100% 0 0); transition: opacity 250ms, transform 350ms cubic-bezier(.22, 1, .36, 1), clip-path 350ms cubic-bezier(.22, 1, .36, 1); }
.sign-in-mark:is(:hover, :focus-visible) { width: 290px; }
.sign-in-mark:is(:hover, :focus-visible) .sign-in-mark__wordmark { opacity: 1; transform: translateX(0); clip-path: inset(0); }
.sign-in-mark__accent { color: var(--color-accent); }
/* Without hover (a phone or iPad), the name slides out once on arrival,
   with the same motion, instead of waiting for a hover that can't come */
@media (hover: none) {
  .sign-in-mark { width: 290px; animation: sign-in-mark-open 350ms cubic-bezier(.22, 1, .36, 1) 400ms backwards; }
  .sign-in-mark__wordmark { opacity: 1; transform: none; clip-path: inset(0); animation: sign-in-mark-name 350ms cubic-bezier(.22, 1, .36, 1) 400ms backwards; }
}
@keyframes sign-in-mark-open { from { width: 64px; } }
@keyframes sign-in-mark-name { from { opacity: 0; transform: translateX(-24px); clip-path: inset(0 100% 0 0); } }
@media (prefers-reduced-motion: reduce) { .sign-in-mark, .sign-in-mark__wordmark { transition: none; animation: none; } }

.sign-in-card { box-sizing: border-box; padding: 32px; border: 1px solid var(--sign-in-line); border-radius: 12px; background: var(--color-sheet); box-shadow: 0 1px 2px rgb(0 0 0 / 20%); }
.sign-in-card h1 { margin: 0 0 12px; font-size: 22px; line-height: 30px; font-weight: var(--sign-in-bold); text-align: center; }
.sign-in-card p { margin: 0; }
.sign-in-page strong { font-weight: var(--sign-in-bold); }
.sign-in-card__notice { margin: 0 0 16px; color: var(--sign-in-subtle); font-size: 14px; line-height: 22px; text-align: center; }

.sign-in-intro { margin: 20px 0 24px; color: var(--sign-in-subtle); font-size: 16px; line-height: 24px; }
.sign-in-card .sign-in-intro { margin: 20px 0 24px; }

.sign-in-form { display: grid; gap: 16px; margin-top: 20px; }
.sign-in-form [hidden] { display: none; }
.sign-in-form label { display: block; margin-bottom: 6px; color: var(--sign-in-label); font-size: 16px; line-height: 22.4px; font-weight: var(--sign-in-semibold); }
.sign-in-form :is(input[type="email"], input[type="password"], input[type="text"]) { display: block; box-sizing: border-box; width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--sign-in-field-line); border-radius: 8px; background: var(--color-sheet); color: var(--sign-in-ink); font: var(--sign-in-regular) 16px/24px var(--sign-in-font); }
.sign-in-form input::placeholder { color: var(--sign-in-subtle); opacity: 0.8; }
.sign-in-form__submit { width: 100%; min-height: 46px; padding: 10px 16px; border: 0; border-radius: 8px; background: var(--sign-in-button); color: var(--sign-in-button-ink); font: var(--sign-in-semibold) 16px/24px var(--sign-in-font); cursor: pointer; transition: background-color 150ms; }
.sign-in-form__submit:hover:not(:disabled) { background: var(--sign-in-button-hover); }
.sign-in-form__submit:disabled { opacity: 0.5; cursor: not-allowed; }
.sign-in-card .sign-in-form__hint { margin-top: 6px; color: var(--sign-in-subtle); font-size: 14px; line-height: 21px; }
.sign-in-card .sign-in-form__error { margin: 0; color: rgb(201 36 0); font-size: 14px; line-height: 21px; text-align: center; }
.sign-in-card > .sign-in-form__error { margin-top: 16px; }

/* "Sign in with a passkey" in the place and style of Bee Heard's Google
   button, and the small note in the place of its legal line */
.sign-in-passkey { margin: 20px 0 0; }
.sign-in-passkey__button { display: flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--sign-in-field-line); border-radius: 8px; background: var(--color-sheet); color: var(--sign-in-ink); font: var(--sign-in-semibold) 16px/24px var(--sign-in-font); cursor: pointer; }
.sign-in-passkey__button:hover { border-color: #999f90; }
/* The drawing fills ~70% of its 24px box; enlarged so it fills 20px as Bee Heard's icon does, keeping the 20px layout box */
.sign-in-passkey__icon { width: 24px; height: 24px; margin: -2px; flex: none; color: #8f959b; }
.sign-in-card .sign-in-passkey .sign-in-form__error { margin-top: 12px; }
.sign-in-card .sign-in-note { margin-top: 20px; color: var(--sign-in-subtle); font-size: 12px; line-height: 18px; }
.sign-in-page .sign-in-note a { color: inherit; text-underline-offset: 2px; }

.sign-in-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--sign-in-divider); font-size: 17px; line-height: 23.8px; }
.sign-in-divider::before, .sign-in-divider::after { content: ""; flex: 1; height: 1px; background: var(--sign-in-line); }
.sign-in-card .sign-in-divider + .sign-in-intro { margin-top: 0; }

.sign-in-help { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--sign-in-line); font-size: 14px; line-height: 21px; }
.sign-in-help--plain { border-top: 0; padding-top: 0; margin-top: 20px; text-align: center; }

.sign-in-links { margin-top: 20px; font-size: 14px; line-height: 22px; text-align: center; }
.sign-in-links p { margin: 0; }
.sign-in-links p + p { margin-top: 12px; }

/* "New to [logo]? Ask your manager for an invite.", laid out as Bee Heard's
   sign-up line; the logo keeps the full logo's proportions (mark, then the
   lettering at about half its height) */
.sign-in-invite { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }
.sign-in-invite__logo { display: inline-flex; align-items: center; gap: 6px; }
.sign-in-invite__mark { display: block; width: 24px; height: 24px; }
.sign-in-invite__wordmark { width: 73.15px; height: 14.72px; margin-bottom: -2.72px; color: var(--sign-in-ink); } /* the p's and y's tails hang below the line */
.sign-in-invite__question { margin-left: -6px; }
.sign-in-page a { color: var(--sign-in-ink); text-decoration: underline; text-underline-offset: 3px; }
.sign-in-page a:hover { color: var(--sign-in-subtle); }
.sign-in-page a:focus-visible { outline: 2px solid var(--sign-in-ink); outline-offset: 3px; }
/* Fields get a quiet border change instead of a focus ring, as Bee Heard's */
.sign-in-form input:is(:focus, :focus-visible) { outline: none; box-shadow: none; border-color: #999f90; }

@media (max-width: 480px) {
  .sign-in-card { padding: 24px; }
}