/**
 * root Design System - documentation styles: live preview
 *
 * Linked by `scripts/_docs-shell.mjs` on every page. The two-column live example every
 * fenced HTML block on a component page renders as, generated by
 * `scripts/_docs-generate.mjs` (ADR-014). Same constraints as the rest of the shell: zero
 * CSS classes - element, `[data-part]` and attribute selectors only - zero inline styles,
 * and every value a root foundation token.
 */

/* Two previews per snippet, one per scheme, side by side.
   They collapse to one column when there is no room for two, which is also what the
   foundations' columns do. */
[data-part="preview-schemes"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  gap: var(--root-s--sm);

  margin: var(--root-s--md) 0;
}

/* A `root-card`, so the ground, the ink, the border and the radius are the component's -
   and because its ground and ink are the page's own pair, a column that pins
   `color-scheme` resolves them to *that* column's scheme rather than to the reader's,
   which is exactly what a two-column demo needs. What is left here is the layout, and one
   remap: a card hides its overflow, and an example that positions something outside its box
   would be clipped by it. */
[data-part="preview"] {
  --root-card--overflow: visible;

  /* No lift on a preview card. Every card answers the pointer now (`Card/lib/styles/
     _states.css`), and this one is not a card being shown - it is the frame around the
     component that is, so a reader reaching in to click a button or drag a slider would
     have the whole example rise under their hand first. The shadow and the frame stay
     wherever they are; only the movement is stilled, through the token the component
     publishes for exactly this. */
  --root-card--hover--lift: 0;
  --root-card--hover--box-shadow: var(--root-card--box-shadow--base);
  --root-card--hover--border-color: var(--root-card--border-color);

  /* `row` stated, not left to the default: a card lays itself out `column nowrap`, so a
     rule that only says `display: flex` inherits the column from it - and every example
     became a full-width item, which pinned the anchored badges to a box wider than the
     avatar they mark. */
  display: flex;
  flex-flow: row wrap;
  place-content: start;
  place-items: start;
  gap: var(--root-s--sm);
  padding: var(--root-s--xl);

  /* A focus ring that can be looked at. The foundations page draws the ring rather than
     asking the reader to tab through live controls - one ring at a time, in one scheme -
     and a component page documenting focus has the same problem. `data-demo="focus"` in a
     snippet marks the example that should wear it, and this draws it from the same tokens
     `_focus.css` uses, on the same element the real ring lands on.

     Which element that is depends on the control, and the three arms below are the three
     `_focus.css` itself names:

       - a tick control hides its input inside the `[field-wrapper]` that draws its box,
         and the real ring goes on the *label* - the whole row, so a keyboard reader is
         told what the control is for and not only where it is. This drew it on the
         wrapper instead, which is the 16-to-24px box: a square around the tick with the
         words beside it left outside, which is the shape the real ring was moved off
         years-deep in `_focus.css`'s own comment;
       - a box field's ring goes on its `[field-wrapper]`, which is the box;
       - anything else wears its own.

     The docs' own marker, not a component API - which is why it says `demo` out loud. */
  :is(
      label:has(> [field-wrapper] > [sr-only][data-demo="focus"]),
      [field-wrapper]:has(> [data-demo="focus"]:not([sr-only])),
      [data-demo="focus"]:not([sr-only])
    ) {
    outline: var(--root-f--outline-width) var(--root-f--outline-style) var(--root-f--outline-color);
    outline-offset: var(--root-f--outline-offset);
  }

  /* The scheme's name, drawn by the column itself: a heading here would land inside the
     page's outline between two real ones, and an extra element in every preview is one
     more thing between the reader and the component. */
  &[data-scheme]::before {
    content: attr(data-scheme);

    flex-basis: 100%;

    color: var(--docs-muted);
    font-size: var(--root-t--font-size--xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* The two fixed-scheme columns pin `color-scheme`, so every `light-dark()` inside a
     column resolves to *that* column's scheme rather than to the reader's - the only way a
     live component can be shown in the scheme it is not being read in. The docs tokens are
     re-pointed with it, because the card's ground, border and ink belong to the column and
     not to the page. */
  &[data-scheme="light"] {
    color-scheme: light;

    --docs-text: var(--root-c--dark);
    --docs-bg: var(--root-c--light);
    --docs-surface: var(--root-c--light);
    --docs-elevated: var(--root-c--light);
    --docs-muted: var(--root-c--default-700--light);
    --docs-border: var(--root-c--neutral-300--light);
  }

  &[data-scheme="dark"] {
    color-scheme: dark;

    --docs-text: var(--root-c--light);
    --docs-bg: var(--root-c--dark);
    --docs-surface: var(--root-c--dark);
    --docs-elevated: var(--root-c--dark);
    --docs-muted: var(--root-c--neutral-200--dark);
    --docs-border: var(--root-c--neutral-700--dark);
  }
}

/* The showcase's form demo lays itself out, because a form is a column of fields and the
   preview is a row: without this the six controls wrapped as siblings and the composition
   the demo exists to show was not on screen. */
[data-part="demo-form"] {
  display: flex;
  flex-flow: column;
  gap: var(--root-s--md);
  align-items: start;
  min-width: 28rem;
}