/* Core neutraliser — DECLARED differences from core, so the page renders on the
 * baseline the APEC artifact was designed on (a claude.ai artifact page: browser
 * defaults + 05-artifact-base.css + the artifact's own stylesheet).
 *
 * 1. Tailwind preflight. The artifact shipped no reset beyond its own
 *    `*{box-sizing:border-box}`. Preflight lives in @layer base, so this rule sits
 *    in the same layer and rolls every property back past it with `revert-layer`
 *    (NOT `revert`, which would also discard HTML presentational attributes).
 *    Unlayered CSS (the artifact's) still wins over it; utilities are untouched.
 *    The ::-webkit-* parts are listed because preflight resets them too (date input
 *    padding made /coaches 1px short per date field).
 * 2. Core's film-grain overlay on <body class="grain">.
 * Scoped to pages carrying the APEC header, so /admin keeps core's look.
 */
@layer base {
  :root:has([data-apec-chrome]),
  :root:has([data-apec-chrome]) *,
  :root:has([data-apec-chrome]) ::before,
  :root:has([data-apec-chrome]) ::after,
  :root:has([data-apec-chrome]) ::marker,
  :root:has([data-apec-chrome]) ::placeholder,
  :root:has([data-apec-chrome]) ::backdrop,
  :root:has([data-apec-chrome]) ::file-selector-button,
  :root:has([data-apec-chrome]) ::-webkit-date-and-time-value,
  :root:has([data-apec-chrome]) ::-webkit-datetime-edit,
  :root:has([data-apec-chrome]) ::-webkit-datetime-edit-fields-wrapper,
  :root:has([data-apec-chrome]) ::-webkit-datetime-edit-year-field,
  :root:has([data-apec-chrome]) ::-webkit-datetime-edit-month-field,
  :root:has([data-apec-chrome]) ::-webkit-datetime-edit-day-field,
  :root:has([data-apec-chrome]) ::-webkit-datetime-edit-hour-field,
  :root:has([data-apec-chrome]) ::-webkit-datetime-edit-minute-field,
  :root:has([data-apec-chrome]) ::-webkit-datetime-edit-second-field,
  :root:has([data-apec-chrome]) ::-webkit-datetime-edit-millisecond-field,
  :root:has([data-apec-chrome]) ::-webkit-datetime-edit-meridiem-field,
  :root:has([data-apec-chrome]) ::-webkit-inner-spin-button,
  :root:has([data-apec-chrome]) ::-webkit-outer-spin-button,
  :root:has([data-apec-chrome]) ::-webkit-search-decoration,
  :root:has([data-apec-chrome]) ::-webkit-calendar-picker-indicator {
    all: revert-layer;
  }
}

:where(:root:has([data-apec-chrome])) {
  --grain-opacity: 0;
}
:where(:root:has([data-apec-chrome])) .grain::after { content: none; }