/*
  The look of scrim's components.

  Deliberately kept out of tokens.css.  tokens.css is the file you replace to restyle
  everything; this one is the file you keep.  If the two were merged, or if this one
  imported that one, the swap would stop being a swap.

  Every colour here is a var() on a token name.  The only exception is --scene-background,
  which is an author's own value arriving from the document — content, not theme.

  The --callout-* and --tab-* properties are component-internal aliases, not tokens.
  They exist so a variant rule changes one line instead of five, and they only ever hold
  a var() on a real token.
*/

/* --------------------------------------------------------------------------- */
/* Callout                                                                      */
/* --------------------------------------------------------------------------- */

.scrim-callout {
  --callout-accent: var(--primary);

  /* The surface is the accent, heavily diluted into the card, so a callout sits on the
     page as a tint of its own meaning rather than as a second, unrelated colour. */
  --callout-surface: color-mix(in oklch, var(--callout-accent) 8%, var(--card));

  margin-block: 1.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid color-mix(in oklch, var(--callout-accent) 30%, var(--border));
  border-inline-start: 3px solid var(--callout-accent);
  border-radius: var(--radius);
  background: var(--callout-surface);
  color: var(--card-foreground);
}

.scrim-callout--note {
  --callout-accent: var(--primary);
}

.scrim-callout--warning {
  --callout-accent: var(--brand);
}

.scrim-callout--caution {
  --callout-accent: var(--destructive);
}

/* The one variant whose colour is not its own token.  See the note in tokens.css. */
.scrim-callout--check {
  --callout-accent: var(--accent-foreground);
  --callout-surface: var(--accent);
}

.scrim-callout__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  /* The label is a <p>, so its own top margin has to be taken away explicitly. */
  margin: 0 0 0.5rem;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--callout-accent);
}

.scrim-callout__icon {
  flex: none;
  width: 1.125em;
  height: 1.125em;
}

.scrim-callout__body > :first-child {
  margin-top: 0;
}

.scrim-callout__body > :last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------- */
/* Tabs                                                                         */
/* --------------------------------------------------------------------------- */

.scrim-tabs {
  margin-block: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--card-foreground);
  overflow: hidden;
}

.scrim-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem 0.25rem 0;
  border-bottom: 1px solid var(--border);
  background: var(--muted);
}

.scrim-tabs__trigger {
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: calc(var(--radius) / 2) calc(var(--radius) / 2) 0 0;
  padding: 0.5rem 0.875rem;
  background: transparent;
  color: var(--muted-foreground);
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}

.scrim-tabs__trigger:hover {
  color: var(--foreground);
  background: color-mix(in oklch, var(--foreground) 6%, transparent);
}

.scrim-tabs__trigger[aria-selected='true'] {
  color: var(--foreground);
  border-bottom-color: var(--primary);
  background: var(--card);
}

.scrim-tabs__trigger:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}

.scrim-tabs__panel {
  padding: 1rem;
}

/* The inactive panels stay in the DOM — find-in-page and deep links into a tab both
   depend on that — so the hidden attribute has to actually hide them. */
.scrim-tabs__panel[hidden] {
  display: none;
}

.scrim-tabs__panel > :first-child {
  margin-top: 0;
}

.scrim-tabs__panel > :last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------- */
/* Scene                                                                        */
/* --------------------------------------------------------------------------- */

/*
  Barely anything on purpose.  Track G owns what a scene does when the reader scrolls
  through it, and it reads --scene-background and [data-scrim-scene] to do it.  This
  rule only makes the declared background visible so the component can be looked at
  before that lands, and it is expected to be overridden rather than extended.
*/
.scrim-scene {
  margin-block: 1.25rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--scene-background, transparent);
}

.scrim-scene > :first-child {
  margin-top: 0;
}

.scrim-scene > :last-child {
  margin-bottom: 0;
}

/*
  A stage: something a scene drives, sitting outside the prose that drives it.

  Sticky rather than fixed, so it holds still only while its own scroll container has
  somewhere left to go, and then releases -- a fixed panel would sit over the footer.
  The height is the viewport minus the offset so a tall panel scrolls internally rather
  than spilling past the bottom of the screen.
*/
.scrim-stage[data-scrim-sticky] {
  position: sticky;
  top: var(--scrim-stage-top, 2rem);
  max-height: calc(100dvh - var(--scrim-stage-top, 2rem) * 2);
  overflow: auto;
}

/* With no driver a stage is just a box, and its content is in flow and readable.  A
   panel whose content only makes sense mid-animation is a panel that has lost the
   argument (RISKS.md R6). */
.scrim-stage {
  min-width: 0;
}

/*
  Prose beside a panel.

  One column until there is room for two, because two columns on a phone is a different
  design rather than a narrower one -- and below the breakpoint the stage stops sticking
  too, since there is nothing to hold it against.

  `align-items: start` is what makes sticky work at all here: a grid item stretches to
  the row height by default, and a stretched item has no room to move within its track.
*/
.scrim-alongside {
  display: grid;
  gap: 2rem;
  align-items: start;
}

@media (min-width: 60rem) {
  .scrim-alongside {
    grid-template-columns: 1fr 1fr;
  }

  /* The prose column holds everything that is not the panel, so several scenes can run
     past one stage -- which is the usual shape: one visual, many steps. */
  .scrim-alongside > :not(.scrim-stage) {
    grid-column: 1;
  }

  .scrim-alongside > .scrim-stage {
    grid-column: 2;
    grid-row: 1 / -1;
  }

  .scrim-alongside[data-scrim-stage-side='left'] > :not(.scrim-stage) {
    grid-column: 2;
  }

  .scrim-alongside[data-scrim-stage-side='left'] > .scrim-stage {
    grid-column: 1;
  }
}