/* native.css — the parts of the page the browser draws for us.
 *
 * These are the pieces that ignore the design until they are told about it:
 * text selection, scrollbars, autofilled fields and the keyboard focus ring.
 * color-scheme (declared in tokens.css) already tells the browser which way to
 * render form controls, the search field's clear button and the textarea
 * resize grip; the rest is aligned here.
 *
 * Loaded after the components so its focus rules win. */

::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

/* Scrollbars. The standard properties cover Firefox and current Chromium;
   the -webkit- rules below are the fallback for older Chromium and Safari.
   Thin, inset from the edge and with no track, which is what the platform
   draws once a pointer stops touching it. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--field-hover) transparent;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--field-hover);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background-color: var(--muted-2); }

/* Chrome paints autofilled inputs with its own yellow and keeps it through
   theme changes. There is no property that overrides the fill, but a large
   inset box-shadow covers it. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 100px var(--raised) inset;
  caret-color: var(--ink);
}

/* Keyboard focus. The design removes outlines from buttons and inputs,
   which leaves keyboard users with nothing to follow; :focus-visible restores it
   without showing a ring on mouse clicks. The offset is what makes it read as a
   ring around the control rather than a second border drawn on it. The outline
   follows the element's own border-radius by itself; setting a radius here
   would overwrite the shape of whatever was focused. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Fields already answer focus with a border colour and a ring, so they opt out
   of the outline rather than showing both. */
.field:focus-visible,
.search input:focus-visible,
.tax-row input:focus-visible {
  outline: none;
}

/* A tap should not wait 300ms to find out whether it was a double, and it
   should not paint the platform's grey flash over a surface that already
   answers with one of its own. */
button, a, .row, .nav-item, .dd-opt, .dd-btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}