/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */

/*
 * Shared styleguide stylesheet - the single source of truth for every sandbox
 * environment's styleguide presentation.
 *
 * Delivered by scripts/copy-shared-styleguide.mjs into each environment's vendor
 * directory, exactly as the shared renderer modules are. Do not edit a vendored
 * copy: it is generated, gitignored, and overwritten on the next prestart or
 * prebuild. Edit this file.
 *
 * This replaced four drifted copies (env_react 1071 lines, env_vue 1100,
 * env_html 1052, env_angular 345). Two categories were deliberately NOT folded
 * in, and each environment keeps them locally instead:
 *
 *   1. Document-level reset ("*", ":root", "body") - env_html has no bundler and
 *      owns its own document reset; the bundled environments set theirs in their
 *      own global stylesheet. A shared sheet must not fight either.
 *   2. env_angular's token-display vocabulary (".swatch", ".token-row",
 *      ".token-group") - that environment renders a genuinely different DOM for
 *      the five data sections, driven by one generic manifest component instead
 *      of five bespoke ones. Those rules match markup no other environment emits.
 *
 * ".iris-components-card*" rules are deliberately absent. That markup is
 * rendered inside the shared custom element's shadow root together with
 * COMPONENTS_SECTION_STYLES, so a document-scope rule for it can never match.
 * Three environments carried ~33 such rules each as dead code.
 *
 * @created 2026-08-06 at 16:57 GMT+2 +02:00 [Europe/Berlin] @moersel
 */

/*
 * Siemens Inner Source License v1.5
 *
 * SPDX-FileCopyrightText: 2026 Siemens AG
 * SPDX-License-Identifier: LicenseRef-SISL-1.5
 */

/* Copy affordances are real <button> elements (WCAG 2.1.1).

   Every copy row — `.color-swatch`, `.token-item`, `.spacing-row`,
   `.dimension-chip`, `.semantic-token`, `.layout-token` — is a real
   `<button type="button">` rather than a click-only `<div>`, so it is reachable by
   Tab and activated by Enter and Space with no key handler of our own. The element
   semantics changed; the class names did not.

   This reset has one job: strip the UA button styling a `<div>` never had, WITHOUT
   overriding any declaration below. `:where()` contributes zero specificity, so the
   whole selector weighs `button` alone (0,0,1) — under every `.class` rule in this
   sheet, and over the UA sheet. That matters concretely: `.dimension-chip` sets its
   own monospace 12px, and a `font: inherit` at class specificity would silently eat
   it.

   This lives here rather than per environment because all four render these rows as
   buttons, and a copy that reaches only three leaves the fourth showing UA chrome:
   env_react was missing it and rendered every `.token-item` with a `2px outset`
   border, centred text and the UA font. It is not the document-level reset the
   header excludes — it matches only these row classes, never `*`, `:root` or
   `body`. */
button:where(
    .color-swatch,
    .token-item,
    .spacing-row,
    .dimension-chip,
    .semantic-token,
    .layout-token
  ) {
  appearance: none;
  border: 0;
  margin: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* `.layout-token` has no `display` below, so its children relied on being
   block-level `<div>`s. Inside a button they are `<span>`s (a button's content
   model is phrasing content), and `.layout-token__preview`'s `margin-bottom` and
   `.layout-token__pad-demo`'s inline `padding` only apply to a block box — hence
   this restore. Deliberately at class specificity, not inside `:where()`, because
   it must win over this sheet's silence. */
button.layout-token .layout-token__preview,
button.layout-token .layout-token__pad-demo,
button.layout-token .layout-token__box,
button.layout-token .layout-token__pad-inner {
  display: block;
}

/* Visible focus for the copy affordances (WCAG 2.4.7, 1.4.11).

   The ring is two bands, and the inner one carries the contrast requirement.
   `--iris-ui-focus` is a single value that does not adapt per theme, and on the
   lighter of the surfaces these rows sit on it falls below the 3:1 non-text
   minimum. `shared/theme/theme-toolbar.js` is the authority for which themes are
   selectable, and `.semantic-token` rows render inside a theme-scoped wrapper, so
   those surfaces are reachable rather than hypothetical. The measured per-theme
   figures live on DESYS-876, not here, because they are values of the installed
   iris package that nothing in this repository can recompute.

   So a `currentColor` band fills the `outline-offset` gap, abutting the row on its
   inner edge and the brand ring on its outer one. The reset above sets
   `color: inherit`, so it is the row's own text colour: high-contrast against the
   surface it sits on by construction, on every theme including a user-customised
   one, and it tracks the text rather than restating a token. Being a plain keyword
   it also cannot be invalid at computed-value time, which a `var()` here could —
   that would drop the whole `box-shadow` and leave only the sub-3:1 ring.

   `--iris-ui-focus` deliberately carries no fallback. If it does not resolve, the
   `outline` shorthand is invalid at computed-value time and yields
   `outline-style: none` — the UA ring does not return either, so the band is the
   whole indicator. That is preferable to hardcoding a hex that claims to equal a
   token it cannot be checked against.

   Do not fix the underlying token by redefining `--iris-ui-focus` in this sheet:
   that masks an iris-core defect behind a sandbox-local value. */
button:where(
    .color-swatch,
    .token-item,
    .spacing-row,
    .dimension-chip,
    .semantic-token,
    .layout-token
  ):focus-visible {
  outline: var(--iris-border-width-medium, 2px) solid var(--iris-ui-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px currentColor;
}

/* Styleguide chrome/layout/border styles.
   Applicable surfaces (color/background/border-color/gap/padding/width/height/
   border-width/border-radius) consume the shipped iris runtime CSS custom
   properties (var(--...)) from iris.css under the fixed .iris-ui-theme-light
   shell, instead of hardcoded literal copies (DESYS-691, Req 2,3,4,9).
   Typography (font-size/weight/line-height/etc.), margins, and the per-card
   live-preview machinery (.iris-components-card__theme-toggle / __theme-btn /
   __preview-theme / __preview-inner) are intentionally NOT migrated here.
   Retained literals (no corresponding variable in the allowed families) are
   recorded in the build-time-primitive audit.
   @updated 2026-06-23 at 14:38 GMT+2 +02:00 [Europe/Berlin] @moersel */

.styleguide {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--iris-pad-xxx-large);
  font-family: 'SiemensSans Pro VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Two columns: the sticky back-navigation rail, then the styleguide itself.
     The rail must be a sibling of the sticky nav (not nested in the header) so
     that it keeps sticking after the header scrolls away. */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--iris-gap-xx-large);
  align-items: start;
}

/* The manifest-invalid state stacks its two children instead of placing them
   side by side: it has no sticky nav for a side rail to align against, and the
   error alert reads better at full measure than squeezed beside a mostly empty
   gutter. The rail IS rendered in this state (see the rule below) — it is the
   only way off a page whose styleguide has failed, so do not remove either
   rule on the assumption that the error branch has no back-link. */
.styleguide--error {
  grid-template-columns: minmax(0, 1fr);
}

/* The error state has no sticky nav, so there is nothing for the rail to pin
   against or align its centre to — the negative margin-top that centres the
   button on the nav would just pull it off the top of the page. It becomes a
   plain static row above the title instead. These are the same four
   declarations the narrow-viewport rule below applies, for the same reason
   (no side-by-side rail); they are repeated rather than shared because a
   media query and a state class cannot be combined into one selector, and a
   modifier class would have to be threaded through both framework templates
   to save four lines. */
.styleguide--error .styleguide__backlink-rail {
  position: static;
  height: auto;
  margin-top: 0;
  margin-bottom: var(--iris-gap-large);
}

/* Grid children can overflow their track without this. */
.styleguide__body {
  min-width: 0;
}

@media (max-width: 720px) {
  .styleguide {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
}

/* Back-navigation rail. Sticky rather than absolute, because the button has two
   resting positions: before any scrolling it is vertically centred on the page
   title, and once the page scrolls it comes to rest vertically centred on the
   sticky section navigation.

   Both are derived from two measured heights declared once below:
     --styleguide-title-line  the title's line box (32px title x 1.2 line-height)
     --styleguide-nav-height  the sticky nav (16px padding twice, a 35px button,
                              and its 1px bottom border)

   The rail is exactly as tall as the stuck nav and centres its child, so when it
   pins at top: 0 the button lands on the nav's centre line. The negative
   margin-top then shifts the *unscrolled* position up so the button's centre
   matches the title's centre instead. Only this item moves — it is in its own
   grid column, so the styleguide body is unaffected.

   The two heights are identical to env_html's because `.styleguide__nav` and
   `.styleguide__nav-btn` carry the same padding, border and font-size in both. */
.styleguide__backlink-rail {
  --styleguide-title-line: calc(32px * 1.2);
  --styleguide-nav-height: calc(
    (var(--iris-pad-x-large) * 2) + 35px + var(--iris-border-width-small)
  );

  position: sticky;
  top: 0;
  height: var(--styleguide-nav-height);
  margin-top: calc((var(--styleguide-title-line) - var(--styleguide-nav-height)) / 2);
  display: flex;
  align-items: center;
  /* Above the sticky nav (z-index 100) so it is never overlapped while pinned. */
  z-index: 101;
}

.styleguide__backlink {
  white-space: nowrap;
}

/* Narrow viewports have no room for a left rail: drop it back into the flow
   above the title, where it neither sticks nor reserves a column. */
@media (max-width: 720px) {
  .styleguide__backlink-rail {
    position: static;
    height: auto;
    margin-top: 0;
    margin-bottom: var(--iris-gap-large);
  }
}

.styleguide__header {
  margin-bottom: 32px;
  padding-bottom: var(--iris-pad-xxx-large);
  border-bottom: var(--iris-border-width-small) solid var(--iris-ui-3);
}

.styleguide__title {
  font-size: 32px;
  font-weight: 700;
  color: var(--iris-text-1);
  margin: 0 0 8px;
}

.styleguide__subtitle {
  font-size: 16px;
  color: var(--iris-text-3);
  margin: 0;
}

.styleguide__nav {
  position: sticky;
  top: 0;
  background: var(--iris-base-0);
  padding: var(--iris-pad-x-large) 0;
  margin-bottom: 24px;
  border-bottom: var(--iris-border-width-small) solid var(--iris-ui-3);
  z-index: 100;
  display: flex;
  gap: var(--iris-gap-small);
  flex-wrap: wrap;
}

.styleguide__nav-btn {
  padding: var(--iris-pad-medium) var(--iris-pad-x-large);
  border: var(--iris-border-width-small) solid var(--iris-ui-3);
  background: var(--iris-base-0);
  border-radius: var(--iris-border-radius-x-small);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.styleguide__nav-btn:hover {
  background: var(--iris-base-hover);
}

.styleguide__nav-btn.active {
  background: var(--iris-base-inverse-1);
  color: var(--iris-text-inverse-1);
  border-color: var(--iris-action-border-1);
}

.styleguide__content {
  min-height: 60vh;
}

.styleguide__section-wrapper {
  scroll-margin-top: 100px;
}

.styleguide__footer {
  margin-top: 48px;
  padding-top: var(--iris-pad-xxx-large);
  border-top: var(--iris-border-width-small) solid var(--iris-ui-3);
  color: var(--iris-text-3);
  font-size: 14px;
}

.styleguide__footer a {
  color: var(--iris-text-highlight-interactive);
  margin-left: 8px;
}

/* Manifest-invalid error state (Requirement 3.7)
   @created 2026-06-19 at 13:39 GMT+2 +02:00 [Europe/Berlin] @moersel
   @updated 2026-06-23 at 10:35 GMT+2 +02:00 [Europe/Berlin] @moersel */
.styleguide__manifest-error {
  margin-top: 24px;
  padding: var(--iris-pad-xxx-large);
  border: var(--iris-border-width-small) solid #d72339;
  border-left: var(--iris-border-width-x-large) solid #d72339;
  border-radius: var(--iris-border-radius-x-small);
  background: var(--iris-base-danger);
  color: var(--iris-text-3);
}

.styleguide__manifest-error-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--iris-text-danger);
}

.styleguide__manifest-error-text {
  margin: 0 0 16px;
  font-size: 14px;
}

.styleguide__manifest-error-list {
  margin: 0;
  padding-left: var(--iris-pad-xx-large);
  font-size: 13px;
  font-family: monospace;
  color: var(--iris-text-1);
}

.styleguide__manifest-error-list li {
  margin-bottom: 4px;
}

/* Section Styles */
.styleguide-section {
  margin-bottom: 48px;
}

.styleguide-section__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--iris-text-1);
  margin: 0 0 8px;
}

.styleguide-section__subtitle {
  font-size: 18px;
  font-weight: 600;
  color: var(--iris-text-1);
  margin: 32px 0 16px;
}

.styleguide-section__description {
  font-size: 14px;
  color: var(--iris-text-3);
  margin: 0 0 24px;
}

.styleguide-section__helper {
  font-size: 14px;
  color: var(--iris-text-3);
  margin: 0 0 16px;
}

.styleguide-section__search {
  margin-bottom: 24px;
}

/* The search field is a form control, so it consumes the `--iris-forms-*` family
   rather than the generic chrome families. env_react used `--iris-ui-3` /
   `--iris-action-border-2` here and env_vue used `--iris-forms-border-1` /
   `--iris-forms-ui-interactive-1`; env_vue's is the semantically correct pair for
   an input and is what this shared sheet adopts. Both variables are shipped by
   iris-core. */
.search-input {
  width: 100%;
  max-width: 400px;
  padding: var(--iris-pad-large) var(--iris-pad-x-large);
  border: var(--iris-border-width-small) solid var(--iris-forms-border-1);
  border-radius: var(--iris-border-radius-x-small);
  font-size: 14px;
}

.search-input:focus {
  outline: none;
  border-color: var(--iris-forms-ui-interactive-1);
}

/* Color Swatch Styles */
.color-section {
  margin-bottom: 32px;
}

.color-section__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--iris-text-1);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.color-section__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--iris-gap-small);
}

.color-swatch {
  display: flex;
  align-items: center;
  gap: var(--iris-gap-medium);
  padding: var(--iris-pad-medium);
  border: var(--iris-border-width-small) solid var(--iris-ui-3);
  border-radius: var(--iris-border-radius-x-small);
  cursor: pointer;
  transition: all 0.2s;
}

.color-swatch:hover {
  border-color: var(--iris-action-border-2);
  background: var(--iris-base-hover);
}

.color-swatch__preview {
  position: relative;
  width: var(--iris-width-40);
  height: var(--iris-height-40);
  border-radius: var(--iris-border-radius-x-small);
  flex-shrink: 0;
  border: var(--iris-border-width-small) solid var(--iris-ui-3);
  overflow: hidden;
}

/* Decorative transparency checkerboard underlay (no corresponding iris variable;
   recorded in the Variable_Audit). The translucent primitive fill above shows it
   through; opaque fills cover it. */
.color-swatch__checker {
  position: absolute;
  inset: 0;
  background-image: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%);
  background-size: 8px 8px;
}

/* The colour comes solely from the generated `.sgp-swatch--<name>` paint class
   (build-resolved literal); never an inline literal or runtime var(). */
.color-swatch__fill {
  position: absolute;
  inset: 0;
}

.color-swatch__info {
  display: flex;
  flex-direction: column;
  gap: var(--iris-gap-xx-small);
  flex: 1;
  min-width: 0;
}

.color-swatch__name {
  font-size: 11px;
  color: var(--iris-text-1);
  word-break: break-all;
}

.color-swatch__value {
  font-size: 11px;
  color: var(--iris-text-3);
  font-family: monospace;
}

.color-swatch__copied {
  font-size: 10px;
  color: var(--iris-text-success);
  font-weight: 600;
}

/* Typography Styles */
.token-list {
  display: flex;
  flex-direction: column;
  gap: var(--iris-gap-small);
}

.token-item {
  display: flex;
  align-items: center;
  gap: var(--iris-gap-large);
  padding: var(--iris-pad-medium) var(--iris-pad-large);
  background: var(--iris-base-2);
  border-radius: var(--iris-border-radius-x-small);
}

.token-item__name {
  font-size: 12px;
  color: var(--iris-text-3);
  font-family: monospace;
  min-width: 250px;
}

.token-item__value {
  font-size: 14px;
  color: var(--iris-text-1);
}

.token-item__preview {
  font-size: 16px;
  color: var(--iris-text-1);
}

.typography-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--iris-gap-xx-large);
}

.typography-presets__category {
  background: var(--iris-base-2);
  padding: var(--iris-pad-x-large);
  border-radius: var(--iris-border-radius-x-small);
}

.typography-presets__category-name {
  /* Declares a themed colour rather than inheriting. Measured as pure
     rgb(0, 0, 0) — i.e. the UA default, not any iris token — because no
     ancestor in this subtree sets one. That looks fine on a light background
     and disappears against a dark theme scope, which is why these
     sub-headings vanished under Dark. */
  color: var(--iris-text-1);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
  text-transform: capitalize;
}

.typography-presets__list {
  display: flex;
  flex-direction: column;
  gap: var(--iris-gap-small);
}

.typography-presets__item code {
  font-size: 12px;
  background: var(--iris-base-0);
  padding: var(--iris-pad-x-small) var(--iris-pad-medium);
  border-radius: var(--iris-border-radius-xx-small);
}

.breakpoints-list {
  display: flex;
  gap: var(--iris-gap-large);
  flex-wrap: wrap;
}

.breakpoint-item {
  display: flex;
  flex-direction: column;
  padding: var(--iris-pad-large) var(--iris-pad-x-large);
  background: var(--iris-base-2);
  border-radius: var(--iris-border-radius-x-small);
}

.breakpoint-item__name {
  font-size: 12px;
  color: var(--iris-text-3);
}

.breakpoint-item__width {
  font-size: 16px;
  font-weight: 600;
  color: var(--iris-text-1);
}

/* Shared: drift indicator + build-time SCSS-source primitive label.
   Canonical home for these classes — React sections (Spacing, Colors,
   Typography, …) reuse them; do NOT inline per-section copies.
   @created 2026-06-19 at 13:39 GMT+2 +02:00 [Europe/Berlin] @moersel
   @updated 2026-06-23 at 10:35 GMT+2 +02:00 [Europe/Berlin] @moersel */
.token-drift {
  font-size: 12px;
  font-style: italic;
  font-weight: 600;
  color: var(--iris-text-warning);
}

.token-drift__swatch {
  width: var(--iris-width-24);
  height: var(--iris-height-24);
  border-radius: var(--iris-border-radius-x-small);
  flex-shrink: 0;
  border: var(--iris-border-width-small) dashed #a5470d;
  background-color: var(--iris-base-2);
  background-image: repeating-linear-gradient(
    45deg,
    var(--iris-ui-3) 0,
    var(--iris-ui-3) 2px,
    transparent 2px,
    transparent 6px
  );
}

.primitive-label {
  display: inline-block;
  margin: 0 0 12px;
  padding: var(--iris-pad-x-small) 10px;
  border: var(--iris-border-width-small) solid #e9c32a;
  border-radius: var(--iris-border-radius-x-small);
  background: var(--iris-base-caution);
  /* Themed, not hardcoded: the background above is theme-scoped, so a fixed
     foreground here means the badge's text does NOT follow it across light /
     sand / dark — legible in one theme and not the others. iris ships
     --iris-text-caution as the counterpart to --iris-base-caution, so use it.
     The border below has no shipped caution token, so it stays literal. */
  color: var(--iris-text-caution);
  font-size: 12px;
  font-weight: 600;
}

/* Spacing Styles */
.spacing-table {
  display: flex;
  flex-direction: column;
  gap: var(--iris-gap-x-small);
  margin-bottom: 24px;
}

.spacing-row {
  display: grid;
  grid-template-columns: 200px 1fr 80px auto;
  align-items: center;
  gap: var(--iris-gap-large);
  padding: var(--iris-pad-medium) var(--iris-pad-large);
  background: var(--iris-base-2);
  border-radius: var(--iris-border-radius-x-small);
  cursor: pointer;
  transition: all 0.2s;
}

.spacing-row:hover {
  background: var(--iris-base-hover);
}

.spacing-row__name {
  font-size: 12px;
  font-family: monospace;
  color: var(--iris-text-1);
}

.spacing-row__visual {
  display: flex;
  align-items: center;
}

.spacing-row__box {
  height: var(--iris-height-12);
  background: #00ffb9;
  border-radius: var(--iris-border-radius-xx-small);
}

.spacing-row__value {
  font-size: 12px;
  color: var(--iris-text-3);
}

.spacing-row__copied {
  font-size: 11px;
  color: var(--iris-text-success);
  font-weight: 600;
}

.dimensions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--iris-gap-small);
}

.dimension-chip {
  padding: var(--iris-pad-small) var(--iris-pad-large);
  background: var(--iris-base-2);
  border-radius: var(--iris-border-radius-x-small);
  font-size: 12px;
  font-family: monospace;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.dimension-chip:hover {
  background: var(--iris-base-hover);
}

.dimension-chip__copied {
  position: absolute;
  right: -4px;
  top: -4px;
  color: var(--iris-text-success);
}

/* Theme Styles */
.theme-previews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--iris-gap-xx-large);
  margin-bottom: 32px;
}

.theme-preview {
  border: var(--iris-border-width-small) solid var(--iris-ui-3);
  border-radius: var(--iris-border-radius-small);
  overflow: hidden;
}

.theme-preview__header {
  padding: var(--iris-pad-large) var(--iris-pad-x-large);
  background: var(--iris-base-inverse-1);
  color: var(--iris-text-inverse-1);
}

.theme-preview__name {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.theme-preview__samples {
  display: flex;
}

.theme-sample {
  flex: 1;
  padding: var(--iris-pad-xxx-large) var(--iris-pad-large);
  text-align: center;
  font-size: 11px;
}

.theme-preview__ui {
  display: flex;
  gap: var(--iris-gap-small);
  padding: var(--iris-pad-large);
  background: var(--iris-base-2);
}

.theme-ui-sample {
  width: var(--iris-width-24);
  height: var(--iris-height-24);
  border-radius: var(--iris-border-radius-x-small);
  border: var(--iris-border-width-small) solid var(--iris-ui-3);
}

.theme-selector {
  display: flex;
  gap: var(--iris-gap-small);
  margin-bottom: 24px;
}

.theme-selector__btn {
  padding: var(--iris-pad-medium) var(--iris-pad-xxx-large);
  border: var(--iris-border-width-small) solid var(--iris-ui-3);
  background: var(--iris-base-0);
  border-radius: var(--iris-border-radius-x-small);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s;
}

.theme-selector__btn.active {
  background: var(--iris-base-inverse-1);
  color: var(--iris-text-inverse-1);
  border-color: var(--iris-action-border-1);
}

.semantic-tokens {
  display: flex;
  flex-direction: column;
  gap: var(--iris-gap-xxxx-large);
}

.semantic-group__title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--iris-text-1);
}

.semantic-group__tokens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--iris-gap-small);
}

.semantic-token {
  display: flex;
  align-items: center;
  gap: var(--iris-gap-small);
  padding: var(--iris-pad-medium);
  /* Themed surface: the .semantic-tokens wrapper carries the active
     .iris-ui-theme-<name> scope, so --base-1/--text-1 resolve to the selected
     theme. This makes each tile adopt the theme's surface (e.g. dark bg under
     Dark) so the themed swatch + text are readable in context (DESYS-691). */
  background: var(--iris-base-1);
  color: var(--iris-text-1);
  border: var(--iris-border-width-small) solid var(--iris-ui-3);
  border-radius: var(--iris-border-radius-x-small);
  cursor: pointer;
  transition: all 0.2s;
}

.semantic-token:hover {
  border-color: var(--iris-action-border-2);
}

.semantic-token__swatch {
  width: var(--iris-width-24);
  height: var(--iris-height-24);
  border-radius: var(--iris-border-radius-x-small);
  flex-shrink: 0;
  border: var(--iris-border-width-small) solid var(--iris-ui-3);
}

.semantic-token__name {
  font-size: 11px;
  color: var(--iris-text-1);
  flex: 1;
}

.semantic-token__value {
  font-size: 10px;
  color: var(--iris-text-3);
  font-family: monospace;
}

.semantic-token__copied {
  font-size: 10px;
  color: var(--iris-text-success);
  font-weight: 600;
}

/* Component Layout Styles */
.layout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--iris-gap-large);
  margin-bottom: 32px;
}

.layout-token {
  padding: var(--iris-pad-large);
  border: var(--iris-border-width-small) solid var(--iris-ui-3);
  border-radius: var(--iris-border-radius-x-small);
  cursor: pointer;
  transition: all 0.2s;
}

.layout-token:hover {
  border-color: var(--iris-action-border-2);
}





.layout-token__preview {
  margin-bottom: 8px;
}

.layout-token__boxes {
  display: flex;
}

.layout-token__box {
  width: var(--iris-width-24);
  height: var(--iris-height-24);
  background: #00ffb9;
  border-radius: var(--iris-border-radius-xx-small);
}

.layout-token__pad-demo {
  background: #00ffb9;
  border-radius: var(--iris-border-radius-x-small);
}

.layout-token__pad-inner {
  background: var(--iris-base-0);
  height: var(--iris-height-16);
  border-radius: var(--iris-border-radius-xx-small);
}

.layout-token__info {
  display: flex;
  flex-direction: column;
  gap: var(--iris-gap-xx-small);
}

.layout-token__name {
  font-size: 11px;
  color: var(--iris-text-1);
  font-family: monospace;
}

.layout-token__value {
  font-size: 11px;
  color: var(--iris-text-3);
}

.layout-token__copied {
  font-size: 10px;
  color: var(--iris-text-success);
  font-weight: 600;
}

/* The sixth and last copy-confirmation sibling. Typography rows had no copy
   affordance at all until the keyboard-accessibility work added one, so this
   rule did not exist here and three environments each grew a local copy of it
   instead. env_react grew none, and its confirmation rendered as the UA default
   — 13.3px black at weight 400 where every other environment showed 10px
   success-green at 600. Declarations are identical to its five siblings above
   on purpose: the confirmation must not look different per row type. */
.token-item__copied {
  font-size: 10px;
  color: var(--iris-text-success);
  font-weight: 600;
}

.usage-example {
  background: #1e1e1e;
  border-radius: var(--iris-border-radius-small);
  padding: var(--iris-pad-x-large);
  overflow-x: auto;
  margin-bottom: 24px;
}

.usage-example__code {
  color: #d4d4d4;
  font-family: 'Fira Code', monospace;
  font-size: 13px;
  margin: 0;
  white-space: pre;
}

.interactive-demo {
  display: flex;
  gap: var(--iris-gap-large);
  flex-wrap: wrap;
}

.demo-component {
  display: flex;
  background: var(--iris-base-2);
  border: var(--iris-border-width-small) solid var(--iris-ui-3);
  border-radius: var(--iris-border-radius-x-small);
}

.demo-component__item {
  padding: var(--iris-pad-medium) var(--iris-pad-x-large);
  background: #00ffb9;
  color: var(--iris-text-1);
  border-radius: var(--iris-border-radius-xx-small);
  font-size: 12px;
  font-weight: 600;
}

/* Responsive refinements at the narrow breakpoint. Recovered from
   env_html/styleguide.css, which was the only copy that carried them: it had
   responsive rules for .styleguide__title, .spacing-row, .token-item and
   .token-item__name that env_react (this sheet's base) never received. The
   vocabulary is shared by every environment, so these are promoted here rather
   than left behind in one environment. */
@media (max-width: 720px) {
  .styleguide__title {
    font-size: 28px;
  }

  .spacing-row {
    grid-template-columns: 1fr;
  }

  .token-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--iris-gap-small);
  }

  .token-item__name {
    min-width: 0;
  }
}

/* A nested <iris-button> needs its own block-level box.
 *
 * MEASURED, not inferred: `CSS.getMatchedStylesForNode` returns ZERO `display`
 * declarations for either iris-button host on this page, so the difference
 * between them does not come from the cascade at all. iris-core ships no
 * `:host { display: … }` for iris-button, which leaves the host at the
 * custom-element default `display: inline`.
 *
 * On a preview surface that default is masked rather than fixed:
 * `::slotted([slot^="preview-"])` (components-section-styles.mjs) is a flex
 * container, and a flex item is blockified — so a TOP-LEVEL iris-button
 * computes `display: block` and measures its real 40px. An iris-button nested
 * inside another iris component is a child of that component, not a flex item
 * of the preview wrapper, so it keeps `display: inline` and collapses to a 19px
 * line box while its own shadow <button> (inline-flex) is 40px tall — it
 * overflows its own layout box and everything laid out under it. The tooltip
 * preview's "Hover target" button is the case that surfaced it.
 *
 * The rule lives here, in the DOCUMENT sheet, because it has to: the nested
 * button is a DESCENDANT of the slotted wrapper and therefore in the light DOM.
 * `::slotted()` matches only top-level assigned nodes, so a shadow-side rule
 * cannot reach it — while a document rule can, and does.
 *
 * `inline-block` rather than `block`: it establishes the block container the
 * button needs (height resolves to its 40px content) without stretching a
 * tooltip trigger to the full width of a centred preview. Top-level buttons are
 * unaffected — flex blockification promotes `inline-block` to `block`, which is
 * what they already computed.
 */
[slot^='preview-'] iris-button {
  display: inline-block;
}