/* Project styles. Bulma does the heavy lifting; this is only what it has no class for. */

.notification-stack {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 60;
  max-width: 24rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Accessibility axes (guidelines §10): target html[data-*], not only @media. */
html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-a11y-text="large"] {
  font-size: 112.5%;
}

html[data-a11y-text="extra-large"] {
  font-size: 131.25%;
}

html[data-a11y-contrast="high"] {
  --bulma-text-strong: #000;
  --bulma-border: #000;
}

html[data-a11y-contrast="low"] {
  --bulma-text-strong: #4a4a4a;
}

html[data-a11y-motion="reduced"] *,
html[data-a11y-motion="reduced"] *::before,
html[data-a11y-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* Dashboard bits */
.stars {
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.miss-bar {
  display: inline-block;
  height: 0.5rem;
  /* Width is set from data-miss-pct by project.js, so no inline style is needed. */
  width: calc(var(--miss-pct, 0) * 0.6px);
  min-width: 2px;
  background: var(--bulma-danger, #f14668);
  border-radius: 0.25rem;
  vertical-align: middle;
}

/* django-debug-toolbar's handle is fixed to the right edge and overlaps the last table
   column around 1250px. Dev only - base.html adds this class when `debug` is on. */
@media (min-width: 1000px) and (max-width: 1400px) {
  body.debug-toolbar-present main > .container {
    padding-right: 3.5rem;
  }
}

.pairing-code-fill {
  cursor: pointer;
  height: auto;
  padding: 0.35rem 0.75rem;
}

.pairing-code {
  font-family: var(--bulma-family-code, monospace);
  font-size: 1.75rem;
  letter-spacing: 0.25em;
}