/* Student and teacher login pages. */
.login-switch { margin-top: var(--space-300); padding-top: var(--space-200); border-top: 1px solid var(--border); }
.role-notice { border: 1px solid var(--teal); background: var(--teal-tint); }
.role-notice p { margin: 0 0 var(--space-200); }

/* Teacher portal: a dark green hero so it is never mistaken for the student page. The green reaches the page edges and up to the top bar, and ends below the hero text. */
.portal-hero { margin-bottom: var(--space-300); padding-bottom: var(--space-300); color: #CFE3D6; background-color: var(--green-800);
  border-image: linear-gradient(var(--green-800), var(--green-800)) fill 0 / 0 / var(--space-600) 100vmax 0; }
.portal-hero p { margin: 0; }
.portal-head { display: flex; align-items: center; gap: var(--space-200); margin-bottom: var(--space-200); color: #FFFFFF; }
.portal-head h1 { margin: 0; color: #FFFFFF; }
.portal-head .eyebrow { margin-bottom: var(--space-25); color: var(--green-300); }
.portal-mark { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 16px; background: var(--teal); }
.portal-mark svg { width: 30px; height: 30px; fill: none; stroke: #FFFFFF; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.portal-card { border-top: 4px solid var(--teal); }

/* "Forgot password?" under the password box. */
.forgot-link { align-self: flex-end; margin-top: calc(-1 * var(--space-100)); font-size: 0.875rem; }
.terms-note { font-size: 0.875rem; }

/* "Continue with Google": Google's own button look (white, grey outline, the four-colour G).
   The two greys are Google's brand values, so they are not design tokens. */
.google-signin { display: flex; flex-direction: column; gap: var(--space-200); }
.google-button { display: flex; align-items: center; justify-content: center; gap: var(--space-100);
  min-height: 44px; padding: var(--space-75) var(--space-200); border: 1px solid #747775; border-radius: var(--radius-control);
  background: var(--surface); color: #1F1F1F; font-weight: 600; text-decoration: none; }
.google-button:hover { background: var(--green-50); color: #1F1F1F; box-shadow: var(--shadow-card); }
.google-button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.google-g { flex: none; width: 20px; height: 20px; }
.or-divider { display: flex; align-items: center; gap: var(--space-100); margin: 0; color: var(--ink-2); font-size: 0.875rem; }
.or-divider::before, .or-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }