/* * Experiment Controls — tool layout for playground experiment pages. * Provides the reusable "tool" layout (a site-nav header bar + a large stage/canvas + a scrolling * control sidebar on the right) and the layout for the native control panel inside it. The controls * themselves are native design-system elements (.slider-wrapper, .form-toggle, , input[type=color], .button,
) are styled by design-system.css and follow data-theme for free. */ .experiment-pane { display: flex; flex: 1 1 auto; /* fill the sidebar between the header and the pinned CTA */ flex-direction: column; gap: var(--space-l); padding: var(--space-l); min-height: 0; /* allow the pane to shrink so its own content scrolls */ overflow-y: auto; /* the controls scroll; the header + CTA stay put */ } /* Control rows inside a tab panel share the stack's vertical rhythm (the .tab-panel itself isn't a flex container). Exclude hidden panels so tabs.js's .is-hidden still removes them from layout. */ .experiment-pane .tab-panel:not(.is-hidden) { display: flex; flex-direction: column; gap: var(--space-l); } /* Settings readout — a copyable dump of the current control values, hidden until the #settings URL fragment reveals it (filled by experiment-controls.js). Dev/handoff affordance, so it's understated; 
 keeps the values monospaced and pre-wrap lets long values wrap. */
.experiment-settings {
  margin: auto 0 0; /* sit at the foot of the scrolling pane; scrolls with the controls when they overflow */
  padding: var(--space-s);
  border: 1px solid var(--border-faded);
  border-radius: var(--radius-s);
  background: var(--bg-faded-5);
  color: var(--text-secondary);
  font-size: var(--font-2xs);
  white-space: pre-wrap;
  word-break: break-word;
}

/* A single control: label (or .slider-header) above its input, with the live value inline. */
.control-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* setHidden() target — .control-row sets display:flex, which would otherwise beat the [hidden] UA rule. */
.control-row[hidden] {
  display: none;
}

/* Label-beside-control rows (toggles, colour) — label left, control right. */
.control-row.is-inline {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

/* Collapsible control groups use native 
/ (cms/disclosure.md). The component's
   default styling is tuned for styleguide code blocks (monospace + tiny); restyle the summary as a
   brand section header and drop the code-block treatment from the body. App-layer override only. */
.experiment-pane details {
  border: 0;
}

.experiment-pane summary {
  justify-content: space-between; /* title left, chevron (::after) right */
  padding: var(--space-s) 0;
  border-bottom: 1px solid var(--border-faded);
  font-family: var(--font-primary);
  font-size: var(--font-m); /* 18px — section titles a step above the 16px body */
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}

/* Move the disclosure chevron to the right: suppress the design system's left ::before caret and
   redraw the same caret as ::after at the end of the row (closed → points right, open → points down). */
.experiment-pane summary::before {
  display: none;
}

.experiment-pane summary::after {
  content: "";
  width: 1.5rem; /* matches .dropdown-chevron */
  height: 1.5rem;
  flex-shrink: 0;
  /* The brand chevron-down icon, drawn as a currentColor mask so it stays theme-aware (the sprite's
      can't be referenced from a pseudo-element). Rotates 180° on open, like .dropdown-chevron. */
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16.4L6 10.4L7.4 9L10.5858 12.1858C11.3668 12.9668 12.6332 12.9668 13.4142 12.1858L16.6 9L18 10.4L12 16.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 16.4L6 10.4L7.4 9L10.5858 12.1858C11.3668 12.9668 12.6332 12.9668 13.4142 12.1858L16.6 9L18 10.4L12 16.4Z'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--duration-2xs) var(--ease-out);
}

.experiment-pane details[open] > summary::after {
  transform: rotate(180deg);
}

.experiment-pane .disclosure-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  padding: var(--space-m) 0 0;
  border: 0; /* drop the styleguide content border */
  font: inherit; /* drop the styleguide monospace */
}

/* Preset row — the choices share the panel width evenly so they read as one segmented row instead
   of clustering at the left. flex-basis:0 + min-width:0 gives equal columns and lets them shrink in
   the narrow sidebar without wrapping. */
.experiment-presets {
  gap: var(--space-xs);
}

.experiment-presets .button {
  flex: 1 1 0;
  min-width: 0;
}

/* ------ RESPONSIVE ------ */

@media (max-width: 768px) {
  /* Stack the header over the stage over the control panel and fill the viewport exactly (no bottom
     gap). The panel takes the remaining height and scrolls internally — minmax(0,1fr) lets the track
     shrink below its content so the controls scroll inside instead of stretching the page. */
  .experiment {
    grid-template-columns: 1fr;
    grid-template-rows: auto 45vh minmax(0, 1fr); /* header, stage, panel — fallback for no dvh */
    grid-template-rows: auto 45dvh minmax(0, 1fr);
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh;
  }

  /* Collapsed (toggle): the panel hides and the stage fills the screen below the header. */
  .experiment.is-sidebar-hidden {
    grid-template-rows: auto minmax(0, 1fr); /* header, stage */
  }

  .experiment.is-sidebar-hidden .experiment-sidebar {
    display: none;
  }

  /* On mobile the panel sits in a short grid track, so scroll the WHOLE sidebar (CTA included) rather
     than pinning the CTA + scrolling only the pane — there isn't room to reserve space for the CTA. */
  .experiment-sidebar {
    height: auto;
    min-height: 0;
    overflow-y: auto;
    border-left: 0;
    border-top: 1px solid var(--border-faded);
  }

  .experiment-pane {
    flex: 0 0 auto; /* natural height; the whole sidebar scrolls, not just the pane */
    overflow-y: visible;
  }

  /* The panel stacks BELOW the stage on mobile, so collapsing "pushes it down". Move the toggle to
     the bottom-right and rotate the sidebar glyph 90° so it reads as a bottom-docked panel: with the
     icon swap (open ► / collapsed ◄), a uniform clockwise turn points the arrow DOWN when open
     ("push down to collapse") and UP when collapsed ("pull up to expand"). Purely visual — the
     aria-label still states the action. */
  .experiment-sidebar-toggle {
    top: auto;
    bottom: var(--space-m);
    right: var(--space-m);
  }

  .experiment-sidebar-toggle .svg-icn {
    transform: rotate(90deg);
  }

  /* Swap the full wordmark for the compact avatar mark — the wordmark is too wide for the slim bar. */
  .experiment-header-logo .experiment-logo-wordmark {
    display: none;
  }

  .experiment-header-logo .experiment-logo-mark {
    display: block;
  }
}