/* Factory theme extension for authenticated internal surfaces only. */
:root[data-theme="light"] .ar-login-page,
:root[data-theme="light"] .ar-instructions-page,
:root[data-theme="light"] .ar-admin-page {
  color: var(--text-primary);
  background: var(--surface-0);
}

.ar-login-page,
.ar-instructions-page,
.ar-admin-page {
  min-height: 100vh;
  color: var(--text-primary);
  background: var(--surface-0);
  font-family: var(--font-ui);
}

.ar-login-page .skip-link,
.ar-instructions-page .skip-link,
.ar-admin-page .skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  transform: translateY(-180%);
}

.ar-login-page .skip-link:focus,
.ar-instructions-page .skip-link:focus,
.ar-admin-page .skip-link:focus {
  transform: translateY(0);
}

.ar-login-page .ar-theme-toggle,
.ar-instructions-page .ar-theme-toggle {
  position: fixed;
  z-index: 60;
  top: 16px;
  right: 16px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-primary);
}

.ar-admin-page .ar-theme-toggle {
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-primary);
}

.ar-login-page .animate-fade-in {
  width: min(100% - 32px, 440px);
  margin: auto;
  animation-duration: var(--motion-slow);
}

.ar-login-page .glass-card,
.ar-admin-page .card,
.ar-instructions-page .card,
.ar-instructions-page .toc {
  background: var(--surface-raised);
  border-color: var(--border-default);
  box-shadow: var(--shadow-panel);
}

.ar-login-page .glass-card { border-radius: var(--radius-lg); }

.ar-login-page .input-field,
.ar-admin-page .input-field {
  background: var(--surface-0);
  border-color: var(--border-default);
  color: var(--text-primary);
  font-family: var(--font-ui);
}


.ar-login-page .input-field::placeholder,
.ar-admin-page .input-field::placeholder {
  color: var(--text-dim);
  opacity: 1;
}

.ar-login-page .btn-primary:disabled {
  background: var(--surface-2);
  border-color: var(--border-default);
  color: var(--text-dim);
  filter: none;
}
.ar-login-page .input-group label,
.ar-instructions-page h1,
.ar-instructions-page h2,
.ar-admin-page h2,
.ar-admin-page .font-header {
  color: var(--text-primary);
  font-family: var(--font-display) !important;
}

.ar-login-page .btn-primary,
.ar-admin-page .btn-primary {
  background: var(--primary);
  border: 1px solid var(--primary);
  box-shadow: none;
  color: var(--on-primary);
}

.ar-login-page .btn-primary:hover,
.ar-admin-page .btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: none;
  transform: none;
}

.ar-instructions-page table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.ar-instructions-page .page-wrapper { max-width: 960px; }
.ar-instructions-page .back-link,
.ar-instructions-page .page-subtitle,
.ar-instructions-page p,
.ar-instructions-page li { color: var(--text-muted); }
.ar-instructions-page h1 span { color: var(--primary); }
.ar-instructions-page h2 { border-color: var(--border-default); }
.ar-instructions-page .toc a { color: var(--text-muted); }
.ar-instructions-page .toc a:hover { color: var(--text-primary); background: var(--surface-2); }

.ar-admin-page::before,
.ar-admin-page .starry-container { display: none; }
.ar-admin-page .navbar-glass {
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-default);
}
.ar-admin-page .btn-secondary { background: var(--surface-2); border-color: var(--border-default); color: var(--text-primary); }
.ar-admin-page .text-white { color: var(--text-primary) !important; }
.ar-admin-page .text-muted { color: var(--text-muted) !important; }
.ar-admin-page table { color: var(--text-primary); }

.ar-login-page :focus-visible,
.ar-instructions-page :focus-visible,
.ar-admin-page :focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Semantic status utilities for admin.html (replaces raw Tailwind arbitrary
   color classes, which are no-ops under the precompiled tailwind.min.css). */
.ar-admin-page .u-text-danger { color: var(--danger) !important; }
.ar-admin-page .u-text-primary { color: var(--primary) !important; }
.ar-admin-page .u-text-success { color: var(--success) !important; }
.ar-admin-page .u-bg-danger { background: var(--error-bg) !important; }
.ar-admin-page .u-bg-primary { background: color-mix(in srgb, var(--primary) 15%, transparent) !important; }
.ar-admin-page .u-bg-success { background: var(--success-bg) !important; }
.ar-admin-page .u-border { border-color: var(--border-default) !important; }
.ar-admin-page .u-border-danger { border-color: var(--danger) !important; }
.ar-admin-page .u-border-primary { border-color: var(--primary) !important; }
.ar-admin-page .u-accent-primary { accent-color: var(--primary) !important; }
.ar-admin-page .u-bg-surface { background: var(--surface-1) !important; }
.ar-admin-page .u-bg-surface-2 { background: var(--surface-1) !important; }
.ar-admin-page .u-bg-surface-2:hover { background: var(--surface-2) !important; }
.ar-admin-page button.u-bg-primary:hover { background: var(--primary) !important; color: var(--on-primary) !important; }
.ar-admin-page button.u-bg-danger:hover { background: var(--danger) !important; color: var(--on-primary) !important; }

@media (max-width: 700px) {

  .ar-login-page .glass-card { padding: 24px; }
  .ar-instructions-page .page-wrapper { padding: 72px 16px 48px; }
  .ar-admin-page .navbar-glass { height: auto; min-height: 64px; }
  .ar-admin-page main { padding-top: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .ar-login-page *, .ar-instructions-page *, .ar-admin-page * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}