/* Shared foundation for every page: design tokens, base
   elements, and the small components used across student and admin screens.
   The site is always shown in light mode, whatever the device setting.
   Page stylesheets build on these tokens instead of hard-coding colors. */
:root {
  color-scheme: light only;
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --brand: #f5c400;
  --brand-hover: #ffd21f;
  --brand-border: #c99f00;
  --brand-ink: #171c20;
  --brand-tint: #fff5c7;
  --brand-tint-2: #fffbea;
  --brand-line: #ead9a0;
  --brand-text: #6b5300;
  --navy: #17232d;
  --navy-ink: #ffffff;
  --navy-muted: #c9d2d7;
  --navy-line: rgba(255, 255, 255, 0.14);

  --bg: #f2f4f5;
  --surface: #ffffff;
  --surface-2: #f7f9fa;
  --surface-3: #eef1f3;
  --hover: #f2f4f5;
  --ink: #1d252c;
  --ink-2: #3d4a53;
  --muted: #5b6871;
  --faint: #7d8991;
  --line: #dde2e5;
  --line-2: #eceff1;
  --field-border: #b9c3ca;

  --success: #157a4c;
  --success-tint: #eaf6ef;
  --success-line: #b9dfca;
  --danger: #b3342d;
  --danger-tint: #fff1ef;
  --danger-line: #ecc0bb;
  --warning: #855700;
  --warning-tint: #fff5d6;
  --warning-line: #ecd48f;
  --info: #245f8b;
  --info-tint: #edf4fa;
  --info-line: #c4d9ea;
  --neutral: #4a5c69;
  --neutral-tint: #edf1f4;

  --focus: #8a6a00;
  --backdrop: rgba(12, 20, 27, 0.6);
  --shadow-sm: 0 1px 2px rgba(20, 30, 38, 0.06);
  --shadow: 0 8px 24px rgba(20, 30, 38, 0.07);
  --shadow-lg: 0 24px 70px rgba(12, 20, 27, 0.28);
  --shadow-card: 0 18px 50px rgba(20, 30, 38, 0.1);
  --ring: 0 0 0 4px rgba(245, 196, 0, 0.25);
  --glow: rgba(245, 196, 0, 0.12);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --control-h: 50px;

  /* Motion: short, and only transform/opacity so phones stay smooth. */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-fast: 0.16s;
  --motion: 0.28s;
  --motion-slow: 0.42s;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  min-width: 0;
  /* Keep headers from shifting between short and long pages. */
  scrollbar-gutter: stable;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
input::placeholder,
textarea::placeholder {
  color: var(--faint);
  opacity: 1;
}
a {
  color: var(--brand-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--ink);
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
[tabindex="-1"]:focus {
  outline: none;
}
::selection {
  background: var(--brand);
  color: var(--brand-ink);
}
[hidden],
.hidden {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: absolute;
  z-index: 100;
  top: -100px;
  left: 12px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-weight: 700;
}
.skip-link:focus {
  top: 12px;
}
.top-strip {
  height: 5px;
  background: var(--brand);
}

/* Footer shared by every page. */
.site-footer {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 18px 0 30px;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
}
.site-footer strong {
  color: var(--ink-2);
}

/* Buttons for shared components (dialogs, retry states, toasts). */
.ui-btn {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  color: var(--brand-ink);
  background: var(--brand);
  font-size: 0.9rem;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}
.ui-btn:hover {
  color: var(--brand-ink);
  background: var(--brand-hover);
}
.ui-btn.secondary {
  border-color: var(--field-border);
  color: var(--ink);
  background: var(--surface);
}
.ui-btn.secondary:hover {
  background: var(--hover);
}
.ui-btn.danger {
  border-color: var(--danger-line);
  color: var(--danger);
  background: var(--danger-tint);
}
.ui-btn:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Confirmation dialog used for sign-out and administrator confirmations. */
.ui-dialog {
  width: min(440px, calc(100% - 28px));
  max-height: calc(100dvh - 28px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 18px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.ui-dialog::backdrop {
  background: var(--backdrop);
}
.ui-dialog-card {
  padding: 28px;
  border-top: 5px solid var(--brand);
  text-align: center;
}
.ui-dialog.is-danger .ui-dialog-card {
  border-top-color: var(--danger);
}
.ui-dialog-icon {
  display: grid;
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  border-radius: 50%;
  place-items: center;
  color: var(--brand-text);
  background: var(--brand-tint);
  font-size: 1.4rem;
  font-weight: 900;
}
.ui-dialog.is-danger .ui-dialog-icon {
  color: var(--danger);
  background: var(--danger-tint);
}
.ui-dialog-icon svg {
  width: 24px;
  height: 24px;
}
.ui-dialog h2 {
  margin: 0;
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.ui-dialog p {
  margin: 10px auto 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;
}
.ui-dialog-error {
  color: var(--danger) !important;
  font-weight: 650;
}
.ui-dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 24px;
}
@media (max-width: 420px) {
  .ui-dialog-card {
    padding: 24px 20px 20px;
  }
  .ui-dialog-actions {
    grid-template-columns: 1fr;
  }
  .ui-dialog-actions .secondary {
    order: 2;
  }
}

/* Password fields: one Show/Hide control everywhere. */
.password-field {
  position: relative;
  display: flex;
}
.password-field input {
  padding-right: 76px;
}
.reveal-button {
  position: absolute;
  top: 6px;
  right: 6px;
  bottom: 6px;
  min-width: 58px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  color: var(--brand-text);
  background: transparent;
  font-size: 0.8rem;
  font-weight: 750;
  cursor: pointer;
}
.reveal-button:hover {
  background: var(--brand-tint);
}
.caps-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 0;
  color: var(--warning);
  font-size: 0.8rem;
  font-weight: 650;
}
.caps-hint::before {
  content: "⇪";
  font-weight: 800;
}

/* Password requirement checklist shared by sign-in setup and resets. */
.password-rules {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.82rem;
}
.password-rules li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.password-rules li::before {
  flex-shrink: 0;
  width: 1em;
  content: "○";
  font-weight: 700;
  text-align: center;
}
.password-rules li.is-valid {
  color: var(--success);
}
.password-rules li.is-valid::before {
  content: "✓";
}
.match-hint.is-valid {
  color: var(--success) !important;
}

/* Loading states. */
.loading {
  display: inline-block;
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  vertical-align: -3px;
  animation: ui-spin 0.7s linear infinite;
}
.skeleton {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-3);
}
/* The highlight slides with transform, so the shimmer never repaints. */
.skeleton::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  content: "";
  transform: translateX(-100%);
  animation: ui-shimmer 1.4s ease-in-out infinite;
}
.skeleton-line {
  height: 12px;
  margin: 8px 0;
}
@keyframes ui-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes ui-shimmer {
  to {
    transform: translateX(100%);
  }
}

/* Inline message with a retry action. */
.state-message {
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: 460px;
  margin: 40px auto;
  padding: 28px;
  border: 1px solid var(--danger-line);
  border-radius: var(--radius-lg);
  color: var(--ink-2);
  background: var(--danger-tint);
  text-align: center;
}
.state-message p {
  margin: 0;
}

/* Shared motion. Every animation uses transform and opacity only, runs once,
   and finishes in under half a second (the first-login welcome excepted). */
@keyframes ui-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes ui-rise-in {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }
}
@keyframes ui-slide-in {
  from {
    opacity: 0;
    transform: translate3d(18px, 0, 0);
  }
}
@keyframes ui-pop-in {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
}
@keyframes ui-dialog-in {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0) scale(0.97);
  }
}
@keyframes ui-shake {
  20% {
    transform: translate3d(-6px, 0, 0);
  }
  40% {
    transform: translate3d(5px, 0, 0);
  }
  60% {
    transform: translate3d(-3px, 0, 0);
  }
  80% {
    transform: translate3d(2px, 0, 0);
  }
}
/* A ring that swells and fades once, used to draw the eye without looping. */
@keyframes ui-ring {
  from {
    opacity: 0.7;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.12, 1.35);
  }
}

/* Student pages ease in; the shared header stays put like an app shell.
   Pages whose content arrives later only fade here and animate that content
   when it appears. */
.page-shell,
.policy-document {
  animation: ui-rise-in var(--motion-slow) var(--ease-out) backwards;
}
.portal-main,
.security-main,
.sr-main {
  animation: ui-fade-in var(--motion) ease-out backwards;
}
body:not([data-admin-page]) .state-message {
  animation: ui-rise-in var(--motion) var(--ease-out) backwards;
}
.is-shaking {
  animation: ui-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.password-rules li.is-valid::before {
  animation: ui-pop-in var(--motion) var(--ease-spring);
}

/* Student popups grow in gently. Administrator pages keep instant dialogs. */
body:not([data-admin-page]) dialog[open] {
  animation: ui-dialog-in var(--motion) var(--ease-out);
}
body:not([data-admin-page]) dialog[open]::backdrop {
  animation: ui-fade-in var(--motion) ease-out;
}

/* Tap feedback: a quick press-in on buttons and links styled as buttons. */
body:not([data-admin-page]) .ui-btn,
.button,
.primary-button,
.enrollment-actions button,
.security-main :where(button:not(.reveal-button), .button) {
  transition:
    transform var(--motion-fast) var(--ease-out),
    background-color var(--motion-fast);
}
body:not([data-admin-page]) .ui-btn:active:not(:disabled),
.button:active:not(:disabled),
.primary-button:active:not(:disabled),
.enrollment-actions button:active:not(:disabled),
.security-main
  :where(button:not(.reveal-button), .button):active:not(:disabled) {
  transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}
@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}