/*
 * The document itself, over Tailwind's Preflight. No element gets a look here: buttons, fields,
 * and headings are styled by the components that render them.
 */

@layer base {
  :root {
    color-scheme: light dark;
    /* 15.5px at the browser's default size, and larger or smaller with the reader's setting. */
    font-size: 96.875%;
    line-height: 1.55;
    color: var(--color-ink);
    accent-color: var(--color-accent);
    caret-color: var(--color-accent-strong);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    interpolate-size: allow-keywords;
  }

  /* Light or Dark chosen in Preferences fixes the scheme every color follows. */
  :root[data-theme="light"] {
    color-scheme: light;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
  }

  body {
    background: var(--color-chrome);
  }

  ::selection {
    background: var(--color-selection);
    color: inherit;
  }

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

  /* A control's words are its name, not text to copy, so a press or a drag across it never
     selects them, as with a tag filter's heading or a menu's options. */
  :is(button, summary, [role="button"], [role="combobox"], [role="option"]) {
    -webkit-user-select: none;
    user-select: none;
  }

  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  a {
    text-decoration-line: underline;
    text-decoration-color: var(--color-faint);
    text-decoration-thickness: 1px;
    text-underline-offset: var(--underline-offset);
    transition: text-decoration-color var(--dur-feedback);
  }

  @media (hover: hover) {
    a:hover {
      text-decoration-color: var(--color-accent);
    }
  }

  input,
  select,
  textarea {
    font-size: max(var(--input-floor), 1em);
  }

  ::placeholder {
    color: var(--color-faint);
  }

  /* A search's clear button is a flat grey cross drawn like the app's icons, not the browser's. */
  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: calc(14rem / 15);
    height: calc(14rem / 15);
    margin: 0;
    margin-inline-start: 0.35rem;
    background: var(--color-muted);
    mask:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M17 7 7 17M7 7l10 10'/%3E%3C/svg%3E")
      center / contain no-repeat;
    cursor: pointer;
  }

  @media (hover: hover) {
    input[type="search"]::-webkit-search-cancel-button:hover {
      background: var(--color-ink);
    }
  }
}