/* ============================================================================
   VITRINE — BASE
   assets/vitrine.base.css

   Requires: assets/vitrine.tokens.css

   The reset the system has been missing. Phase 7 deliberately left it out so
   the token file could guarantee it changed nothing; eight component sheets
   were then built on top of that absence, and it surfaced as a sidebar
   measuring 264px against a 240px token.

   ---------------------------------------------------------------------------
   WHY IT IS STILL NOT GLOBAL

   Twelve pages still run on the retired system. A `*` reset in the document
   head would restyle every one of them tonight. So this applies in two
   precise places instead:

     1. EVERY VITRINE ELEMENT, anywhere — matched on the class prefix. This
        is what makes a component measure the same whatever page hosts it.
        Without it, the live app gets border-box from Bootstrap and the lab
        does not, so the same sidebar is 240 in one and 264 in the other.

     2. EVERYTHING INSIDE .vt-app — the new shell owns its subtree
        completely, so inside it a real reset is safe.

   When the retired system is deleted, §1 collapses into a plain `*` rule and
   the scope on §2 goes away.
   ========================================================================== */


/* ==========================================================================
   §1 · EVERY VITRINE ELEMENT, WHEREVER IT LIVES
   `[class^="vt-"]` catches an element whose class list starts with vt-;
   `[class*=" vt-"]` catches one where it appears later. Together they match
   every component and every BEM child, and nothing that is not ours.
   ========================================================================== */

[class^="vt-"], [class^="vt-"]::before, [class^="vt-"]::after,
[class*=" vt-"], [class*=" vt-"]::before, [class*=" vt-"]::after {
  box-sizing: border-box;
}


/* ==========================================================================
   §2 · THE APPLICATION SUBTREE
   ========================================================================== */

.vt-app,
.vt-app *,
.vt-app *::before,
.vt-app *::after {
  box-sizing: border-box;
}

.vt-app {
  /* Tells the engine to render form controls, scrollbars and the caret dark.
     Deliberately not in the token file, which is guaranteed inert. */
  color-scheme: dark;

  margin: 0;
  background-color: var(--vt-surface-ground);
  color: var(--vt-text-primary);
  font-family: var(--vt-font-ui);
  font-size: var(--vt-fs-base);
  line-height: var(--vt-lh-normal);
  letter-spacing: var(--vt-ls-ui);

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;

  /* Stops iOS inflating type in landscape, which silently breaks a scale
     that has been tuned in rem. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Replaced elements are block by default: an inline <img> picks up a
   baseline gap that shows as a few unexplained pixels under every cover. */
.vt-app :where(img, svg, video, canvas, picture) {
  display: block;
  max-inline-size: 100%;
}

.vt-app :where(button, input, select, textarea) { font: inherit; color: inherit; }
.vt-app :where(button) { background: none; border: 0; }

/* One focus policy for anything that does not define its own. Never
   `outline: none` without a designed replacement. */
.vt-app :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--vt-focus-width) solid var(--vt-focus-color);
  outline-offset: var(--vt-focus-offset);
}
.vt-app :where(a, button):focus:not(:focus-visible) { outline: none; }

.vt-app ::selection { background-color: var(--vt-fill-strong); color: var(--vt-text-primary); }

.vt-app :where(ul, ol):where([role="list"]) { list-style: none; margin: 0; padding: 0; }

/* THE `hidden` ATTRIBUTE MUST WIN.
   The UA sheet's `[hidden] { display: none }` is beaten by any author rule
   that sets display — which is nearly every layout class in this system. The
   result is an element that reports hidden === true, is removed from the
   accessibility tree, and is still on the screen: a control the user can see
   and press but which the code believes is not there.

   Found on Search, where the type filters stayed visible in the resting
   state because `.vt-filters { display: flex }` outranked the attribute.
   !important is correct here and nowhere else: `hidden` is a statement about
   whether the element exists to the user, not a styling preference. */
.vt-app [hidden] { display: none !important; }


/* ==========================================================================
   §3 · SCROLLBARS
   Quiet, and only where something actually scrolls.
   ========================================================================== */

.vt-app :where(*) {
  scrollbar-width: thin;
  scrollbar-color: var(--vt-border-default) transparent;
}
.vt-app :where(*)::-webkit-scrollbar { inline-size: var(--vt-space-2); block-size: var(--vt-space-2); }
.vt-app :where(*)::-webkit-scrollbar-track { background: transparent; }
.vt-app :where(*)::-webkit-scrollbar-thumb {
  background-color: var(--vt-border-default);
  border-radius: var(--vt-radius-full);
}
.vt-app :where(*)::-webkit-scrollbar-thumb:hover { background-color: var(--vt-border-strong); }


/* ==========================================================================
   §4 · MOTION FLOOR
   Every animated property in the system resolves timing through a --vt-dur-*
   token, so the token override in vitrine.tokens.css already disables motion
   product-wide. This is the backstop for anything that slipped through with
   a literal duration.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .vt-app :where(*) {
    animation-duration: 1ms !important;   /* not 0: transitionend must still fire */
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}