/* Somewhere — the login screen.

   Standalone on purpose. This is a public static asset served before
   a session exists, so it cannot lean on
   app.css: the shared sheet stays behind the gate along with the modules it
   styles. Anything here that looks like a copy of an app.css rule is one, and
   that duplication is the price of not publishing the app's stylesheet to the
   internet.

   Nothing below re-declares a Nocturne token — every colour, radius, shadow
   and font comes from nocturne.css. House rules apply as everywhere else:
   outlined buttons only, accent as a line or a glow and never a flood, no pure
   black or white, elevation is the hairline shadow, headings never above 500,
   transitions 120-160ms (200ms on the step change). */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

html, body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  color-scheme: dark;
  margin: 0;
}
html { -webkit-text-size-adjust: 100%; }
body { font-size: 15px; line-height: 1.55; }

.wordmark {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.012em;
  font-size: 1.35em;
  line-height: 1;
}

/* -- layout ---------------------------------------------------------------- */

.login {
  max-width: 420px;
  margin: 0 auto;
  padding: 14vh 20px calc(40px + env(safe-area-inset-bottom));
  padding-top: max(14vh, calc(40px + env(safe-area-inset-top)));
}
.login-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 21px;
  margin-bottom: 26px;
}
/* The one accent flood in this file, and it is 8px across: the brand dot. */
.login-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 16%, transparent);
}
.login-step { animation: login-in 200ms ease-out both; }
.login-google { border-bottom: 1px solid var(--color-divider); padding-bottom: 18px; margin-bottom: 22px; }
.login-google .btn { width: 100%; min-height: 44px; white-space: normal; }
.login-google .login-kicker { margin: 12px 0 0; }
@media (prefers-reduced-motion: reduce) { .login-step { animation: none; } }
@keyframes login-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
/* .picker-title (shared, above) is the picker's heading in both hosts.
   .login-kicker is only for the screen's own status lines. */
.login-kicker {
  margin: 0 0 16px;
  text-align: center;
  font-size: 13px;
  color: var(--color-neutral-400);
}
.login-title {
  margin: 0 0 20px;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 22px;
}

/* -- step 1: who's travelling --------------------------------------------- */

/* The picker is ONE component across the product: the pre-auth screen here and
   the in-app switcher core.js opens must not be two different things. This
   screen cannot link app.css (the server refuses it without a session), so the
   block below is a verbatim copy of app.css's, between the same two markers,
   and a test fails the build if the two ever drift apart.

   The markup differs — sign-in needs a disabled state for a profile with no
   PIN, the switcher needs a watch count — but the classes and the paint are
   shared. */

/* PICKER-SHARED-START */
.picker-title {
  text-align: center; margin: 6px 0 22px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 22px; line-height: 1.12; letter-spacing: -0.015em;
}
.picker-title .mono { font-size: 13px; }
.profile-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.profile-pick {
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  background: var(--color-surface); box-shadow: var(--shadow-sm);
  border: 0; border-radius: var(--radius-md);
  padding: 18px 10px 14px; cursor: pointer; color: var(--color-text);
  font-family: inherit; font-size: 15px; -webkit-tap-highlight-color: transparent;
  transition: box-shadow 140ms ease-out;
}
.profile-pick:hover { box-shadow: 0 0 0 1px var(--color-neutral-700); }
.profile-pick.active { box-shadow: 0 0 0 1px var(--color-accent-700); }
.profile-pick[disabled] { cursor: not-allowed; opacity: 0.55; }
.profile-pick[disabled]:hover { box-shadow: var(--shadow-sm); }
.profile-pick-name { font-size: 15px; }
/* Reserved so a card with a sub and a card without are the same height. */
.profile-pick-sub { font-size: 11px; color: var(--color-neutral-600); min-height: 1.4em; }
/* The initial is a MARK, not a swatch: a hairline square and accent text. A
   64px block of accent-800 was the largest saturated fill in the product and
   the house rule is that the accent is a line, never a flood. */
.profile-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--radius-sm);
  background: var(--vf-field);
  box-shadow: inset 0 0 0 1px var(--color-accent-700);
  color: var(--color-accent-300); font-size: 12px; line-height: 1;
}
.profile-avatar.big {
  width: 56px; height: 56px; border-radius: var(--radius-md);
  font-size: 24px; margin: 0 auto;
}
/* PICKER-SHARED-END */

/* Skeleton for the pre-JS paint: shaped like the content it becomes, never a
   spinner and never a fake name. */
.profile-pick.skeleton { pointer-events: none; }
.profile-pick.skeleton .profile-avatar { box-shadow: inset 0 0 0 1px var(--color-neutral-800); }
.login-bar {
  width: 62%; height: 10px; border-radius: var(--radius-sm);
  background: var(--color-neutral-800);
}
.profile-pick.skeleton .profile-avatar, .login-bar {
  animation: login-pulse 1.4s ease-in-out infinite;
}
@keyframes login-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  .profile-pick.skeleton .profile-avatar, .login-bar { animation: none; }
}

/* -- step 2: the PIN ------------------------------------------------------- */

.login-who {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.login-who-name { font-size: 17px; }

.login-form { display: block; }
.login-label {
  display: block;
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--color-neutral-400);
  margin-bottom: 6px;
}
/* The PIN field. Centred, tracked out, and tall enough to be a comfortable
   phone target — this is the one control the whole screen exists for. */
.login-pin {
  width: 100%;
  box-sizing: border-box;
  min-height: 48px;
  padding: 10px 12px;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 22px;
  letter-spacing: 0.42em;
  text-align: center;
  text-indent: 0.42em;  /* re-centres text that the tracking pushes left */
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  transition: border-color 140ms ease-out;
}
.login-pin:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.login-pin:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
/* Wrong PIN: a hairline in the accent ramp. There is no red in this system and
   this screen is not the place to invent one. */
.login-form.is-bad .login-pin { border-color: var(--color-accent-600); }

.login-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.login-actions .btn { flex: 1 1 auto; min-height: 44px; }
.login-actions .btn.login-back { flex: 0 0 auto; }

/* Matches app.css's .form-msg: the reserved line keeps the button from jumping
   when an error appears. */
.login-msg {
  color: var(--color-accent-300);
  font-size: 12.5px;
  margin-top: 10px;
  min-height: 1.1em;
  text-align: center;
}
.login-foot {
  margin: 26px 0 0;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--color-neutral-600);
}
.login-foot:empty { display: none; }
.login-foot code {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: var(--color-neutral-400);
}

@media (max-width: 430px) {
  .login { padding-top: max(9vh, calc(28px + env(safe-area-inset-top))); }
  .login-actions { flex-direction: column-reverse; }
  .login-actions .btn { width: 100%; }
}