/* The react-native-web root reset (https://necolas.github.io/react-native-web/docs/setup/#root-element),
   kept in a file so the Content-Security-Policy needs no inline styles. */
html,
body {
  height: 100%;
  background-color: #72010f;
}
/* Body scrolling is off: <ScrollView> scrolls. */
body {
  overflow: hidden;
}
#root {
  display: flex;
  height: 100%;
  flex: 1;
}

/* Keyboard focus (docs/design/web-platform.md section 4): a visible ring on every control reached
   with the keyboard, never on a mouse click (:focus-visible). Two tones, so it shows on paper and on
   the oxblood and velvet chrome alike: the theme's tint as the ring, the page colour in the gap.
   The colours are set by the app from its theme (src/theme/ThemeProvider.tsx, webThemeVariables). */
:focus-visible {
  outline: 2px solid var(--whimsy-focus, #72010f) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--whimsy-focus-gap, #f5ead6) !important;
}

/* Hover (pointer devices only): a faint wash over rows and buttons, laid over their own colour
   as a background image so it never replaces it. Disabled controls get none. */
@media (hover: hover) {
  [role="button"]:not([aria-disabled="true"]):hover,
  [role="link"]:not([aria-disabled="true"]):hover,
  [role="checkbox"]:not([aria-disabled="true"]):hover,
  [role="radio"]:not([aria-disabled="true"]):hover,
  [role="switch"]:not([aria-disabled="true"]):hover,
  [role="menuitem"]:not([aria-disabled="true"]):hover,
  [role="tab"]:not([aria-disabled="true"]):hover {
    background-image: linear-gradient(var(--whimsy-hover, rgba(60, 20, 10, 0.07)), var(--whimsy-hover, rgba(60, 20, 10, 0.07)));
  }
}