/* Life Hub sign-in page.
   Created: Sunday 2026-09-14
   Updated: Monday 2026-09-15

   Every colour is an --fs-* token from fresh-app.css, so a theme swap carries.
   The tokens live on .fresh-shell, so every rule here is scoped to it. */

/* The --fs-* set is scoped to .fresh-shell, and the document canvas takes its
   colour from the body, which sits above that scope. The body steps aside and
   the shell paints the ground, so no colour is written twice. */
body.si-body { background: transparent; }

.fresh-shell.si-shell {
  background: var(--fs-bg);
  color: var(--fs-text);
}

/* One column, centred on the page. Every line inside it is left-aligned. */
.fresh-shell .si-page {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 56px 24px;
}

.fresh-shell .si-column {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: min(480px, 100%);
}

/* The mark, the line and its note read as one group, so they sit closer to
   each other than the group sits to the card. */
.fresh-shell .si-brand {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fresh-shell .si-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--fs-font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fs-text);
}

.fresh-shell .si-heading {
  font-family: var(--fs-font-display);
  font-weight: 700;
  font-size: clamp(38px, 5vw, 46px);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--fs-text);
  margin: 0 0 10px;
}

/* One word of the heading takes the accent. On a light ground that is blurple. */
.fresh-shell .si-accent { color: var(--fs-primary); }

.fresh-shell .si-note {
  font-size: 16px;
  line-height: 1.5;
  color: var(--fs-muted);
  margin: 0;
}

.fresh-shell .si-card {
  width: 100%;
  background: var(--fs-surface);
  border-radius: var(--fs-radius-card);
  box-shadow: var(--fs-shadow-lift);
  padding: 40px;
}

.fresh-shell .si-title {
  font-family: var(--fs-font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fs-text);
  margin: 0 0 8px;
}

.fresh-shell .si-sub {
  font-size: 15px;
  line-height: 1.5;
  color: var(--fs-muted);
  margin: 0 0 28px;
}

.fresh-shell .si-field { margin-bottom: 20px; }

.fresh-shell .si-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--fs-text);
  margin-bottom: 8px;
}

.fresh-shell .si-input-wrap { position: relative; }

.fresh-shell .si-input {
  width: 100%;
  border: 0;
  border-radius: var(--fs-radius-md);
  background: var(--fs-surface-muted);
  color: var(--fs-text);
  font: inherit;
  font-size: 16px;
  padding: 14px 16px;
  outline: 0;
  transition: box-shadow var(--fs-dur) var(--fs-ease), background var(--fs-dur) var(--fs-ease);
}

.fresh-shell .si-input--with-toggle { padding-right: 52px; }

.fresh-shell .si-input::placeholder { color: var(--fs-muted-2); }

.fresh-shell .si-input:focus-visible {
  background: var(--fs-primary-050);
  box-shadow: 0 0 0 2px var(--fs-primary);
}

.fresh-shell .si-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: var(--fs-radius-sm);
  background: transparent;
  color: var(--fs-muted);
  cursor: pointer;
}

.fresh-shell .si-toggle:hover { color: var(--fs-text); }

.fresh-shell .si-toggle:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--fs-primary);
}

.fresh-shell .si-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  font-size: 14px;
  color: var(--fs-muted);
}

.fresh-shell .si-check {
  width: 18px;
  height: 18px;
  border-radius: var(--fs-radius-sm);
  accent-color: var(--fs-primary);
}

.fresh-shell .si-check:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--fs-primary); }

/* The one blurple call to action on this screen. */
.fresh-shell .si-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: var(--fs-radius-lg);
  background: var(--fs-primary);
  color: #fff;
  font-family: var(--fs-font-display);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--fs-shadow-primary);
  transition: background var(--fs-dur) var(--fs-ease), transform var(--fs-dur) var(--fs-ease),
    box-shadow var(--fs-dur) var(--fs-ease);
}

.fresh-shell a.si-submit { text-decoration: none; }
.fresh-shell .si-submit:hover { background: var(--fs-primary-hover); transform: translateY(-1px); }
.fresh-shell .si-submit:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--fs-primary-200), var(--fs-shadow-primary); }
.fresh-shell .si-submit[disabled] { opacity: 0.65; cursor: progress; transform: none; }

/* HTMX in flight: the spinner shows, the label steps aside. */
.fresh-shell .si-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  animation: si-spin 720ms linear infinite;
}

.fresh-shell .si-submit.htmx-request .si-spinner { display: inline-block; }

@keyframes si-spin { to { transform: rotate(360deg); } }

.fresh-shell .si-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 24px;
}

.fresh-shell .si-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--fs-primary);
  text-decoration: none;
}

.fresh-shell .si-link:hover { text-decoration: underline; }
.fresh-shell .si-link:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--fs-primary); border-radius: var(--fs-radius-sm); }

.fresh-shell .si-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-radius: var(--fs-radius-md);
  background: var(--fs-danger-100);
  color: var(--fs-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  padding: 12px 14px;
  margin-bottom: 20px;
}

/* A field's own error sits under its input. */
.fresh-shell .si-field .si-error { margin: 8px 0 0; }

.fresh-shell .si-error svg { flex: none; color: var(--fs-danger); margin-top: 1px; }

.fresh-shell .si-recaptcha { margin-bottom: 24px; }

/* Page-load reveal. A static screen is a bug. */
.fresh-shell .si-rise {
  opacity: 0;
  transform: translateY(14px);
  animation: si-rise var(--fs-dur-slow) var(--fs-ease) forwards;
  animation-delay: calc(var(--si-step, 0) * 90ms);
}

@keyframes si-rise { to { opacity: 1; transform: none; } }

/* Phone width. The narrow column keeps its gutters and its hierarchy. */
@media (max-width: 480px) {
  .fresh-shell .si-page { padding: 36px 16px; }
  .fresh-shell .si-column { gap: 28px; }
  .fresh-shell .si-card { padding: 28px 22px; }
  /* The page heading stays the dominant line at phone width. */
  .fresh-shell .si-title { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .fresh-shell .si-rise { animation: none; opacity: 1; transform: none; }
  .fresh-shell .si-submit:hover { transform: none; }
  .fresh-shell .si-spinner { animation-duration: 0s; }
}