/* base.css, components.css and timeline.css are linked directly from index.html.
   Importing them from here made the browser fetch this file, parse it, and only
   then start on the other three — two round trips before anything was styled. */

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

html, body, *, *::before, *::after { -webkit-tap-highlight-color: transparent; }

button, a, summary, [role="button"],
.import-choice, .kebab, .timeline-node, .drop-zone {
  -webkit-touch-callout: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

/* :focus-visible already fires only for keyboard and assistive navigation, so it
   belongs at every pointer type. Gating it behind (pointer:fine) left anyone on a
   touchscreen laptop tabbing through the app with no visible focus at all. */
:where(button, a, input, select, textarea, summary, [role="button"], [tabindex]):focus { outline: none; }
:where(button, a, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Hover states on a touchscreen stick after the finger lifts, so they are lifts
   and shadows that never come back down. Drop the effect, keep the focus ring. */
@media (hover: none) {
  .icon-button:hover { background: transparent; transform: none; }
  .button:hover { transform: none; box-shadow: none; }
  .project-card:hover { transform: none; box-shadow: none; border-color: var(--line); }
  .kebab:hover, .popover button:hover { background: transparent; }
  .import-choice:hover { transform: none; border-color: var(--line); background: var(--surface); }
  .timeline-node:hover { transform: none; }
}