/* login.css — small additions for the login/signup panel, layered on plan.css. */

.login-page { max-width: 460px; }
/* The language picker made the header's buttons too wide to sit beside the logo in this narrow column (it was drawn on top
   of the logo text on a desktop screen). Let the buttons wrap onto their own line, on the right, instead. */
.login-page .app-header { flex-wrap: wrap; }
.login-page .header-actions { margin-left: auto; }
.login-page .brand-text h1 span { white-space: nowrap; } /* "Log in" moves down as a unit instead of leaving "in" alone on a line */
.login-panel { display: flex; flex-direction: column; gap: 16px; }

.role-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.role-tab {
  flex: 1; padding: 10px 12px; border-radius: 10px 10px 0 0; border: none; background: transparent;
  color: var(--muted); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
}
.role-tab.is-active { color: var(--accent); background: rgba(var(--accent-rgb), 0.1); }

.login-error {
  padding: 10px 14px; border-radius: 10px; background: rgba(var(--alert-rgb), 0.14); border: 1px solid var(--warn);
  color: var(--ink); font-size: 13.5px;
}
.login-note {
  padding: 10px 14px; border-radius: 10px; background: rgba(var(--accent-rgb), 0.1); border: 1px solid var(--accent);
  color: var(--ink); font-size: 13.5px;
}

.signup-toggle { text-align: center; }
.signup-title { font-size: 15px; font-weight: 700; color: var(--ink); margin: 4px 0 0; }
.field-hint { font-size: 11.5px; color: var(--muted); }

/* "Sign in another way": each way is a button with its one-line explanation underneath */
.forgot-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.forgot-choice .field-hint { margin: 0; }

/* the emailed sign-in link's landing page */
.signin-card { display: flex; flex-direction: column; gap: 14px; }
.signin-lead { margin: 0; font-size: 17px; color: var(--ink); }
.signin-retry { margin: 0; font-size: 14px; }

/* "Watch the 2-minute intro" under the card, and the dialog that plays it */
.intro-video-row { display: flex; justify-content: center; margin-top: 14px; }
.intro-video-dialog video { display: block; width: 100%; max-height: min(66dvh, 540px); background: #000; border-radius: 12px; }
.intro-video-dialog .dialog-note { margin: 10px 0 0; }
.intro-video-row[hidden] { display: none; }

/* English / Hindi captions switch above the video */
.intro-lang { display: flex; gap: 6px; margin: 2px 0 10px; }
.intro-lang button { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--ink-soft); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.intro-lang button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }