/* Design System v2 — base. */

@layer base {
  html {
    font-family: var(--font-body);
    color: var(--color-ink);
    background-color: var(--color-bg);
  }

  html,
  body {
    block-size: var(--viewport-block-size);
    overflow: hidden;
    overscroll-behavior: none;
  }

  * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-scrollbar) transparent;
  }

  ::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
  }

  ::-webkit-scrollbar-thumb {
    border-radius: var(--radius-pill);
    background-color: var(--color-scrollbar);
  }

  @media (any-hover: none) {
    * {
      scrollbar-width: none;
    }

    ::-webkit-scrollbar {
      display: none;
    }
  }

  /* The owner's ruling of 2026-10-26: nothing is ever ringed or outlined for having focus. */
  :focus,
  :focus-visible {
    outline: none;
  }
}

@layer utilities {
  /* NOT a Tailwind leftover. `.hidden` is the VENDOR CONTRACT of
   * tailwindcss-stimulus-components, whose four registered controllers
   * (app/javascript/controllers/index.js: alert, dropdown, tabs, toggle) hide
   * an element by adding this exact class name and nothing else: the transition
   * helper defaults `toggleClass` to "hidden", and `Tabs#showTab` hardcodes
   * `classList.add("hidden")`. Neither is configurable per element without
   * restating the class on every call site.
   *
   * With no rule for it, the first v2 dropdown, tab set or toggle would have a
   * control that "closes" by adding a class that does nothing, and would sit
   * permanently open with no error anywhere. The rule is one line and it is
   * owed to the library, not to the design language — which is why it is a
   * utility and not a component: `native` and `platform` still override it.
   *
   * It leaves when the library does. */
  .hidden {
    display: none;
  }
}

@layer native {
  /* Both classes, and why CSS must author against them rather than against a
   * media query: docs/canon/ux-patterns.md, "The two platform flags on <html>". */
  html.hotwire-native .hide-on-native {
    display: none !important;
  }
}

@layer platform {
  html.standalone .hide-in-standalone {
    display: none !important;
  }

  html:not(.standalone) .hide-in-browser {
    display: none !important;
  }
}