/* On top of µCSS (vendor/mucss): only what it lacks, with its variables so
   that themes and dark mode apply here too. */

/* A recovery key or an app password, shown once: easy to read and copy. */
.key {
  display: inline-block;
  padding: var(--mu-spacing);
  border: 2px dashed var(--mu-form-element-border-color);
  border-radius: var(--mu-border-radius);
  font-family: var(--mu-font-family-monospace);
  font-size: 1.3rem;
  letter-spacing: 0.05em;
  user-select: all;
}

/* The first access wizard's steps, the current one marked. */
ol.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  padding: 0;
  color: var(--mu-muted-color);
  font-size: 0.9rem;
  list-style-position: inside;
}
ol.steps li {
  list-style: decimal inside;
  margin: 0;
}
ol.steps [aria-current="step"] {
  color: var(--mu-color);
  font-weight: 700;
}

/* Secondary information, e.g. an error's technical details. */
.muted {
  color: var(--mu-muted-color);
  font-size: 0.9rem;
}

/* Django's form errors, next to the field. */
.errorlist {
  margin: 0 0 var(--mu-spacing);
  padding: 0;
  list-style: none;
  color: var(--mu-error);
}

/* Several forms in a row, e.g. confirm and skip. */
form + form {
  margin-top: var(--mu-spacing);
}

/* µCSS 1.4.9's light theme puts white text on a pale button background
   (about 1.6:1, well under WCAG's 4.5:1): the theme's own darker shades
   instead, so another theme still applies. */
[data-theme="light"] {
  --mu-primary-background: var(--mu-primary);
  --mu-primary-hover-background: var(--mu-primary-hover);
  --mu-secondary-background: var(--mu-secondary);
  --mu-secondary-hover-background: var(--mu-secondary-hover);
}
@media not (prefers-color-scheme: dark) {
  :root:not([data-theme="dark"]) {
    --mu-primary-background: var(--mu-primary);
    --mu-primary-hover-background: var(--mu-primary-hover);
    --mu-secondary-background: var(--mu-secondary);
    --mu-secondary-hover-background: var(--mu-secondary-hover);
  }
}

/* Short pages of forms: a column narrower than µCSS's containers. */
body > header > .container,
body > main.container,
body > footer.container {
  max-width: 46rem;
}

/* The menu items stay whole when the header wraps. */
body > header .navbar-menu li {
  white-space: nowrap;
}

/* The header's name, with the logo. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--mu-color);
}

/* The panel's cards: side by side when there is room. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--mu-spacing);
}
.cards > article {
  margin: 0;
}
.cards ul {
  margin-bottom: 0;
}

/* Footer: quiet, separated from the content. */
body > footer {
  margin-top: calc(var(--mu-spacing) * 3);
  padding-top: var(--mu-spacing);
  border-top: var(--mu-border-width) solid var(--mu-muted-border-color);
  color: var(--mu-muted-color);
}

/* Inputs for short values (a 6-digit code, a name): not the full column. */
input.short {
  max-width: 20rem;
}

/* Two blocks side by side when there is room, e.g. a QR code and its key. */
.side-by-side {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mu-spacing);
  margin-bottom: var(--mu-spacing);
}
.side-by-side > * {
  margin-bottom: 0;
}
.side-by-side > p {
  flex: 1 1 16rem;
}
.side-by-side > .key,
.side-by-side > .copy {
  flex: 0 1 auto;
}