/* Portfolio integration for the self-contained, light component exhibit.

   The exhibit ships as its own document: its own reset, its own type,
   its own colour, none of it layered. Everything the portfolio adds here
   is therefore either a class the exhibit does not use, or an explicit
   override placed after it.

   Two rules decide the treatment:

   1. The chrome is the site's. The masthead and footer come from
      templates/chrome.mjs — the same objects every other route renders —
      so the Components tab lands you on this site rather than a
      neighbouring one.

   2. The exhibit is a specimen sheet, and a specimen does not follow the
      theme. This is the same rule the case studies already apply to
      Signal Studio's own frames: the work keeps its own appearance, and
      the site sets it on a ground that says so. The exhibit is a light
      library; in dark mode it sits on the dark page as a lit sheet. */

:root {
  --exhibit-ink: #202223;
  --exhibit-muted: #656a73;
  --exhibit-paper: #fafafa;
  --exhibit-rule: #e7e8ea;
  /* the ground under the component rail, the exhibit's own shelf tint */
  --exhibit-shelf: #f7f7f8;
  /* the indigo's pressed state, fixed: the sheet never follows the theme */
  --exhibit-accent-hover: #4338ca;
  --exhibition-control: #f3f2f6;
  --exhibition-lilac: #f0ecfb;
  --exhibition-mint: #f0f7f3;
  --exhibition-warm: #faf7f0;
}

/* ── the exhibit's own chrome steps aside ──────────────────────────── */
.site > .site-header,
.site > .site-skip { display: none; }

/* ── the sheet ─────────────────────────────────────────────────────── */
/* In light the sheet and the page share a ground, so it runs full bleed
   and the page reads as one document. In dark it is a lit sheet on a
   dark ground, and gets an edge that says so. */
.exhibit-sheet { color-scheme: light; }
[data-theme="dark"] .exhibit-sheet {
  margin-inline: auto;
  max-width: var(--wide);
  border-inline: 1px solid var(--rule);
  box-shadow: var(--shadow-lift);
}

/* A note above the sheet, shown only where it is true: the library keeps
   its own light appearance while the rest of the site is dark. */
.exhibit-note {
  display: none;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--s3) var(--gutter);
  color: var(--graphite);
  font-family: var(--mono);
  font-size: var(--t-machine);
}
[data-theme="dark"] .exhibit-note { display: block; }

/* ── masthead corrections ──────────────────────────────────────────── */
/* The exhibit sets type on the document, unlayered, so the chrome states
   its own. Everything else the bundle declared at document level — the
   `a`, `button`, `h1,h2,h3,p` and `.icon-btn` rules that used to reach
   the masthead, the footer and the search dialog — is now confined to the
   exhibit sheet by the publisher, so the chrome needs no corrections of
   its own and renders exactly as it does on every other route. See
   adaptExhibitionStyles in tools/publish-motion-showcase.mjs. */
.masthead, .sitefoot, #palette { font-family: var(--ui); }

/* ── legibility fixes inside the exhibit ───────────────────────────── */
.nav-number, .position span, .gallery-footer > span {
  color: var(--exhibit-muted);
}
/* One indigo. The exhibit points with its own blue and fills its primary
   button with near-black; both become the site's accent, so a visitor
   crossing from the portfolio into the library is followed by one
   colour rather than met by a second one. */
.mc.tone-blue { --accent: var(--signal-indigo); }
.site .site-button-primary {
  background: var(--signal-indigo);
  border-color: transparent;
  color: var(--dot-white);
}
.site .site-button-primary:hover { background: var(--exhibit-accent-hover); color: var(--dot-white); }