/*
  Hand-written accessibility rules, loaded after app.css by templates/base.html.
  app.css is built by Tailwind (npm run build) and can only hold classes it found when it was last built, so
  what the contrast and keyboard pass needed beyond those lives here. Colours meet WCAG 2.1 AA on the site's dark
  backgrounds (slate-950 #020617, slate-900 #0f172a): 4.5:1 for text, 3:1 for borders and focus indicators.
*/

/* "Skip to main content": the first thing Tab reaches on every page, shown only while it has focus. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  background: #a5b4fc; /* indigo-300; #020617 text on it is 10.1:1 */
  color: #020617;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* The skip link's target: focused by script-free fragment navigation, no ring needed around the whole page. */
main:focus { outline: none; }

/* A visible keyboard focus indicator on everything that can take focus. indigo-300 (#a5b4fc) is at least 3:1 against
   every background it can sit on: 10.1 on slate-950, 9.0 on slate-900, 3.2 on the darkest end of the brand gradient. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid #a5b4fc;
  outline-offset: 2px;
}

/* Brand gradients with white text that passes 4.5:1 (the lighter 500/400 shades it replaces were 2.7 to 4.5:1). */
.bg-brand { background-image: linear-gradient(to right, #4f46e5, #7c3aed); color: #fff; }           /* indigo-600 -> violet-600: 6.3 / 5.7 */
a.bg-brand:hover, button.bg-brand:hover:not(:disabled) { background-image: linear-gradient(to right, #4338ca, #6d28d9); } /* 700s: 7.9 / 7.1 */
.bg-brand-accent { background-image: linear-gradient(to right, #4f46e5, #a21caf); color: #fff; }    /* indigo-600 -> fuchsia-700: 6.3 / 6.3 */
a.bg-brand-accent:hover, button.bg-brand-accent:hover:not(:disabled) { background-image: linear-gradient(to right, #4338ca, #86198f); }
/* The large gradient panels (sign-in brand panel, dashboard welcome): indigo-700 -> violet-700 -> fuchsia-700. */
.bg-brand-panel { background-image: linear-gradient(to bottom right, #4338ca, #6d28d9, #a21caf); color: #fff; }
/* A light button on a brand panel: white text stays above 4.9:1; hover darkens instead of lightening. */
.btn-on-brand { background-color: rgba(255, 255, 255, 0.15); color: #fff; }
.btn-on-brand:hover { background-color: rgba(0, 0, 0, 0.15); }

/* "Continue with Google" in Google's dark theme (https://developers.google.com/identity/branding-guidelines):
   #E3E3E3 on #131314 is 14.5:1; the #8E918F border is 6.3:1 on slate-950. Hover/press tint per the guidelines. */
.gsi-button { background-color: #131314; border: 1px solid #8e918f; color: #e3e3e3; }
.gsi-button:hover { background-color: #1f1f20; }
.gsi-button:active { background-color: #2a2a2b; }

/* Tailwind classes the templates use that the last app.css build did not include. Same definitions Tailwind 3.4
   generates, so a rebuild changes nothing. */
.border-slate-500 { --tw-border-opacity: 1; border-color: rgb(100 116 139 / var(--tw-border-opacity)); } /* input borders: 4.2:1 on slate-950, 3.8:1 on slate-900 */
.border-red-500 { --tw-border-opacity: 1; border-color: rgb(239 68 68 / var(--tw-border-opacity)); }
.placeholder-slate-400::placeholder { --tw-placeholder-opacity: 1; color: rgb(148 163 184 / var(--tw-placeholder-opacity)); } /* 7.0:1 on slate-900 */
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.pb-8 { padding-bottom: 2rem; }
.self-start { align-self: flex-start; }
@media (min-width: 768px) { .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The mobile sidebar, while slid out of view, is also out of the Tab order and hidden from screen readers.
   visibility switches after the slide (transition), so closing still animates. */
@media (max-width: 1023.98px) {
  #sidebar { transition-property: transform, visibility; }
  #sidebar.-translate-x-full { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  #sidebar { transition: none; }
}