/* login screen — the family of marks + member picker + SMS-code sheet.
   Colour comes from tokens only; member tint arrives as --uc (data, not CSS). */

.lg { overflow: hidden; }

/* ---- background treatment ---- */
.lg-glow {
  position: absolute; top: -18%; left: 50%; transform: translateX(-50%);
  width: 150%; aspect-ratio: 1; pointer-events: none;
  background: radial-gradient(circle at 50% 42%,
    color-mix(in srgb, var(--accent) 10%, transparent) 0%,
    color-mix(in srgb, var(--accent) 4%, transparent) 32%,
    transparent 62%);
}
.lg-road {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.lg-road-line {
  fill: none; stroke: color-mix(in srgb, var(--text) 5%, transparent);
  stroke-width: 14; stroke-linecap: round;
}
.lg-road-dash {
  fill: none; stroke: color-mix(in srgb, var(--accent) 34%, transparent);
  stroke-width: 1.6; stroke-dasharray: 3 10; stroke-linecap: round;
}
.lg-road-pin { fill: color-mix(in srgb, var(--accent) 60%, transparent); }
.lg-road-pin-o {
  fill: none; stroke: color-mix(in srgb, var(--accent) 32%, transparent);
  stroke-width: 1.5;
  transform-box: fill-box; transform-origin: center;
  animation: lg-pin-pulse 2s var(--ease) infinite;
}
@keyframes lg-pin-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-road-pin-o { animation: none; }
}

/* tall phones: re-anchor the composition so the bottom fifth isn't dead space */
@media (min-height: 900px) {
  .lg-body { justify-content: flex-start; padding-top: calc(var(--safe-top) + 9vh); }
  .lg-brand { margin-bottom: var(--s-8); }
  .lg-picker { margin-top: 7vh; }
}

/* ---- layout ---- */
.lg-body {
  position: relative; z-index: 1;
  flex: 1; display: flex; flex-direction: column;
  justify-content: center;
  padding: calc(var(--safe-top) + var(--s-6)) var(--s-6) var(--s-6);
  min-height: 0;
}

/* ---- brand ---- */
.lg-brand { text-align: center; }
.lg-wordmark {
  font-size: clamp(3rem, 15vw, 3.75rem);
  font-weight: var(--fw-bold);
  letter-spacing: -0.05em;
  line-height: 1;
  animation: lg-rise var(--t-slow) var(--ease-out) both;
}
.lg-dot { color: var(--accent); }
.lg-tagline {
  margin-top: var(--s-3);
  font-size: var(--fs-md);
  color: var(--text-2);
  letter-spacing: 0.01em;
  animation: lg-rise var(--t-slow) var(--ease-out) 80ms both;
}
@keyframes lg-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---- picker ---- */
.lg-picker {
  padding-top: clamp(36px, 9vh, 84px);
}
.lg-label {
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
  text-align: center; margin-bottom: var(--s-5);
  animation: lg-rise var(--t-slow) var(--ease-out) 120ms both;
}
.lg-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5) var(--s-2);
  max-width: 340px; margin: 0 auto;
}
.lg-cell {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-2);
  padding: var(--s-1);
  transition: opacity var(--t-med) var(--ease), transform var(--t-fast) var(--ease);
  animation: lg-rise var(--t-slow) var(--ease-out) both;
  animation-delay: calc(160ms + var(--stagger, 0ms));
}
.lg-cell:active { transform: scale(0.94); }
.lg-cell-avatar {
  background: color-mix(in srgb, var(--uc) 16%, var(--bg-elev-1));
  border-color: color-mix(in srgb, var(--uc) 42%, transparent);
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-spring),
              border-color var(--t-med) var(--ease);
}
.lg-cell-name {
  font-size: var(--fs-sm); font-weight: var(--fw-med); color: var(--text-2);
  transition: color var(--t-fast) var(--ease);
}
/* the member's own mini-wordmark: the family of marks under the hero mark */
.lg-cell-brand {
  margin-top: calc(-1 * var(--s-1));
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  letter-spacing: -0.03em; line-height: 1;
  color: var(--text-3);
  transition: color var(--t-fast) var(--ease);
}
.lg-cell.selected .lg-cell-avatar {
  border-color: transparent;
  box-shadow: 0 0 0 2.5px var(--uc), 0 6px 20px color-mix(in srgb, var(--uc) 30%, transparent);
  transform: scale(1.06);
}
.lg-cell.selected .lg-cell-name { color: var(--text); font-weight: var(--fw-semi); }
.lg-cell.selected .lg-cell-brand { color: var(--text-2); }

/* skeletons while the roster loads */
.lg-skel-line { width: 52px; height: 11px; border-radius: 6px; }
.lg-skel-line-sm { width: 38px; height: 9px; margin-top: calc(-1 * var(--s-1)); }

/* roster fetch failed */
.lg-roster-err {
  grid-column: 1 / -1; text-align: center; color: var(--text-2);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  padding: var(--s-4) 0;
}

/* dim the rest once someone is picked (kill entrance animation first:
   its fill-mode would pin opacity at 1 and override the dim) */
.lg.picking .lg-cell { animation: none; }
.lg.picking .lg-cell:not(.selected) { opacity: 0.38; }
.lg.picking .lg-cell.selected { opacity: 1; }

/* ---- code sheet ---- */
.lg-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 500;
  background: var(--bg-elev-1);
  border-top: 1px solid var(--line-strong);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--shadow-sheet);
  padding: var(--s-5) var(--s-5) calc(var(--safe-bottom) + var(--s-6));
  transform: translateY(110%);
  transition: transform var(--t-slow) var(--ease-spring), visibility 0s var(--t-slow);
  visibility: hidden;
}
.lg-sheet.open { transform: translateY(0); visibility: visible; transition-delay: 0s; }
.lg-sheet.shake { animation: lg-shake 420ms var(--ease); }
@keyframes lg-shake {
  10%, 50%, 90% { transform: translateX(-7px); }
  30%, 70% { transform: translateX(7px); }
  100% { transform: none; }
}

.lg-sheet-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
.lg-sheet-avatar {
  background: color-mix(in srgb, var(--uc, var(--accent)) 16%, var(--bg-elev-1));
  border-color: color-mix(in srgb, var(--uc, var(--accent)) 42%, transparent);
}
.lg-sheet-who { flex: 1; min-width: 0; }
.lg-sheet-hi { font-size: var(--fs-lg); font-weight: var(--fw-semi); letter-spacing: -0.01em; }
.lg-sheet-sub { font-size: var(--fs-sm); color: var(--text-2); margin-top: 1px; }
.lg-sheet-close { color: var(--text-3); flex-shrink: 0; }
.lg-sheet-close svg { width: 20px; height: 20px; }
.lg-sheet-close:active { color: var(--text-2); transform: scale(0.92); }

/* ---- the six code boxes ---- */
.lg-otp {
  display: flex; justify-content: center; gap: var(--s-2);
  max-width: 320px; margin: 0 auto;
}
.lg-otp input {
  flex: 1; min-width: 0; max-width: 48px; height: 56px;
  text-align: center;
  font-size: var(--fs-xl); font-weight: var(--fw-semi);
  color: var(--text);
  background: var(--bg-elev-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  outline: none;
  caret-color: var(--accent);
  transition: border-color var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.lg-otp input:focus { border-color: var(--accent); }
.lg-otp input:disabled { opacity: 0.55; }
.lg-otp input::selection { background: var(--accent-dim); }
.lg-sheet.has-err .lg-otp input { border-color: color-mix(in srgb, var(--bad) 55%, transparent); }
.lg-sheet.has-err .lg-otp input:focus { border-color: var(--bad); } /* keep the caret box findable in the error state */
.lg-sheet.checking .lg-otp input { border-color: var(--line); }

/* ---- inline error (grows open under the boxes) ---- */
.lg-err {
  min-height: 0; max-height: 0; overflow: hidden;
  color: var(--bad); font-size: var(--fs-sm); font-weight: var(--fw-med);
  text-align: center;
  transition: max-height var(--t-med) var(--ease-out), padding var(--t-med) var(--ease-out);
}
.lg-sheet.has-err .lg-err { max-height: 60px; padding-top: var(--s-3); }

/* ---- resend ---- */
.lg-resend-row {
  display: flex; justify-content: center; align-items: baseline; gap: var(--s-1);
  margin-top: var(--s-3);
  font-size: var(--fs-sm); color: var(--text-2);
}
.lg-resend {
  min-height: 44px; padding: 0 var(--s-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  color: var(--text);
  text-decoration: underline; text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease);
}
.lg-resend:active { color: var(--text-2); }
.lg-resend[disabled] {
  color: var(--text-2); font-weight: var(--fw-med);
  text-decoration: none; cursor: default;
  font-variant-numeric: tabular-nums;
}

/* ---- small screens (320w / short heights) ---- */
@media (max-height: 700px) {
  .lg-wordmark { font-size: 2.6rem; }
  .lg-tagline { margin-top: var(--s-2); }
  .lg-picker { padding-top: var(--s-8); }
  .lg-grid { gap: var(--s-4) var(--s-2); }
  .lg-label { margin-bottom: var(--s-4); }
}
@media (max-width: 340px) {
  .lg-grid { gap: var(--s-4) var(--s-1); }
  .lg-body { padding-left: var(--s-4); padding-right: var(--s-4); }
  .lg-otp { gap: var(--s-1); }
}