/* The few things React Native Web can't style. In a file of its own, so the content
   security policy needs no exception for it. */

html,
body,
#root {
  height: 100%;
  margin: 0;
}

/* Painted before any script runs, so a reload doesn't flash the wrong color. */
body {
  background: #f7eedc;
  overflow: hidden;
}

#root {
  display: flex;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #191020;
  }
}

/* Keyboard focus. Fields show their own by changing their border. */
:root {
  --focus: #4a1942;
}

@media (prefers-color-scheme: dark) {
  :root {
    --focus: #f7b52c;
  }
}

[role='button']:focus-visible,
[role='link']:focus-visible,
[role='switch']:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* On the plum rail, a plum ring wouldn't show. */
[role='navigation'] [role='button']:focus-visible,
[role='navigation'] [role='link']:focus-visible {
  outline-color: #f7b52c;
}

/* A slim scrollbar on a computer, in the colors of what it scrolls. */
@media (pointer: fine) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(120, 95, 115, 0.5) transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}