/**
 * Design System — self-contained stylesheet.
 *
 * Plain, hand-authored CSS on purpose: this folder is meant to be dropped into
 * any theme without depending on that theme's build pipeline. It references
 * this project's CSS custom-property tokens (--color-*, --spacing-*, --size-*,
 * etc.) for visual consistency — a theme without an equivalent token system
 * will still render structurally correctly, just without themed colors/scale.
 *
 * Only enqueued on the Design System template itself — see design-system.php.
 */

/* ============================================================
 * Full-width override
 *
 * header.php opens <main id="primary" class="site-main constrain constrain--l">
 * before this template runs, capping content at --constrain-l (1100px) and
 * centering it. The Design System wants the full viewport instead, so
 * design-system.php adds a `page-design-system` body class and this rule
 * neutralizes the cap — scoped to this template only, everywhere else on the
 * site is unaffected. If dropping this folder into a theme with a different
 * main-content wrapper/class, update this selector to match.
 * ============================================================ */

body.page-design-system .site-main {
  max-width: none;
  padding-inline: 0;
}

/* ============================================================
 * Shell — sidebar nav + main preview/source pane
 * ============================================================ */

.ds-shell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

@media (min-width: 48em) {
  .ds-shell {
    flex-direction: row;
    align-items: flex-start;
  }
}

.ds-shell__nav {
  flex-shrink: 0;
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--grey-1);
  background: var(--grey-0);
}

@media (min-width: 48em) {
  .ds-shell__nav {
    width: 15rem;
    min-height: 100vh;
    border-bottom: none;
    border-right: 1px solid var(--grey-1);
    position: sticky;
    top: 0;
  }
}

/* Hidden entirely (not just visually collapsed) when the sidebar is toggled
   off — .ds-shell__main is already `flex: 1` (below), so it naturally fills
   the freed-up width with no extra rule needed here. */
.ds-shell--nav-hidden .ds-shell__nav {
  display: none;
}

/* ------------------------------------------------------------
 * Sidebar show/hide toggle buttons — script.js applies/removes
 * .ds-shell--nav-hidden on .ds-shell and persists the choice (cookie) across
 * page loads, since every entry click here is a real navigation, not an SPA
 * route change. The two buttons are mutually exclusive (only one is ever
 * visible at a time) and both target the same #ds-shell-nav via
 * aria-controls/aria-expanded.
 * ------------------------------------------------------------ */

.ds-shell__nav-toggle,
.ds-shell__main-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-1);
  border: 1px solid var(--grey-1);
  border-radius: var(--radius-small);
  background: var(--white);
  color: var(--grey-6);
  font-family: var(--font-secondary);
  font-size: var(--size-0);
  line-height: var(--line-tight);
  padding: var(--spacing-1) var(--spacing-2);
  cursor: pointer;
  white-space: nowrap;
}

.ds-shell__nav-toggle:hover,
.ds-shell__nav-toggle:focus-visible,
.ds-shell__main-toggle:hover,
.ds-shell__main-toggle:focus-visible {
  background: var(--grey-1);
  color: var(--color-text-heading-primary);
}

.ds-shell__nav-toggle {
  margin-bottom: var(--spacing-3);
}

/* Floating panel — sits at the true top-left corner of &__main, ignoring its
   padding (position: relative on &__main below, near its own rule), rather
   than being inset by it like normal content. &__main-toggle inside toggles
   with .ds-shell--nav-hidden same as before; &__padding-toggle (the "Remove
   padding" checkbox) is a sibling that always renders here regardless of
   sidebar state — "right below the button" when the button happens to be
   visible, alone in this spot when it isn't. The background/shadow keeps it
   legible over whatever page content (e.g. the entry title) it may sit above
   when the sidebar is shown and the button is hidden. */
.ds-shell__main-controls {
  position: absolute;
  top: var(--spacing-2);
  left: var(--spacing-2);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2);
  background: var(--white);
  padding: var(--spacing-2);
  border-radius: var(--radius-small);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Hidden by default — script.js reveals this once .ds-shell--nav-hidden is
   active (see the rule below). Without JS this never appears, matching
   .ds-shell__nav never actually being hidden in that case either. */
.ds-shell__main-toggle {
  display: none;
}

.ds-shell--nav-hidden .ds-shell__main-toggle {
  display: inline-flex;
}

.ds-shell__padding-toggle {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  font-family: var(--font-secondary);
  font-size: var(--size-0);
  line-height: var(--line-tight);
  color: var(--grey-6);
  cursor: pointer;
  white-space: nowrap;
}

.ds-shell__nav-title {
  display: block;
  font-family: var(--font-primary);
  font-size: var(--size-4);
  font-weight: var(--weight-bold);
  color: var(--color-text-heading-primary);
  margin-bottom: var(--spacing-3);
  text-decoration: none;
}

.ds-shell__nav-title:hover,
.ds-shell__nav-title:focus-visible {
  color: var(--color-primary);
}

.ds-shell__nav-empty {
  font-size: var(--size-0);
  color: var(--grey-4);
}

.ds-shell__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.ds-shell__nav-list--nested {
  margin-left: var(--spacing-3);
}

.ds-shell__nav-folder-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-1);
  list-style: none;
  cursor: pointer;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-small);
  font-family: var(--font-secondary);
  font-size: var(--size-0);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: var(--line-tight);
  color: var(--grey-5);
}

.ds-shell__nav-folder-label::-webkit-details-marker {
  display: none;
}

.ds-shell__nav-folder-label:hover,
.ds-shell__nav-folder-label:focus-visible {
  background: var(--grey-1);
  color: var(--color-text-heading-primary);
}

/* The site-wide +/- marker (scss/base/_base.scss, summary::before) is sized
   for content accordions (--size-5) — too big for this compact sidebar.
   Everything else about it (content, color, font, spacing) is left as-is. */
.ds-shell summary::before {
  font-size: var(--size-2);
}

.ds-shell__nav-link {
  display: block;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-small);
  font-size: var(--size-0);
  line-height: var(--line-tight);
  color: var(--grey-6);
  text-decoration: none;
}

.ds-shell__nav-link:hover,
.ds-shell__nav-link:focus-visible {
  background: var(--grey-1);
  color: var(--color-text-heading-primary);
}

.ds-shell__nav-link.is-active {
  /* --color-primary against white text falls under 4.5:1 at this font size —
     --color-primary-dark clears ~6.9:1. */
  background: var(--color-primary-dark);
  color: var(--white);
  font-weight: var(--weight-semibold);
}

.ds-shell__main {
  position: relative; /* containing block for &__main-controls */
  flex: 1;
  min-width: 0;
  /* padding-block-start extra-generous (not just matching &__main-controls'
     own top offset) so the entry title/intro always clears the floating
     panel — it needs more than the panel's own height because the panel
     sits on top of, not before, this padding. */
  padding-block: var(--spacing-12) var(--spacing-8);
  padding-inline: var(--spacing-2);
}

@media (min-width: 48em) {
  .ds-shell__main {
    padding-block: var(--spacing-13) var(--spacing-10);
  }
}

/* "Remove padding" checkbox (&__padding-toggle, above) toggles this via
   script.js — for testing components in edge-to-edge containers that don't
   normally have any gutters. padding-inline only: padding-block (top/bottom)
   is left alone no matter what, since &__main-controls (the floating
   sidebar/padding buttons) needs that top clearance to avoid sitting on top
   of the entry title/intro. */
.ds-shell--no-main-padding .ds-shell__main {
  padding-inline: 0;
}

.ds-shell__landing-title,
.ds-shell__entry-title {
  font-family: var(--font-primary);
  font-size: var(--size-heading-h1-fluid);
  line-height: var(--line-tight);
  margin-bottom: var(--spacing-4);
}

.ds-shell__landing-intro,
.ds-shell__entry-description {
  font-size: var(--size-3);
  color: var(--grey-5);
}

.ds-shell__entry-header {
  margin-bottom: var(--spacing-9);
  padding-bottom: var(--spacing-6);
  border-bottom: 2px solid var(--grey-1);
}

.ds-shell__preview {
  margin-bottom: var(--spacing-10);
}

/* ---- Playground ---- */

.ds-shell__playground {
  margin-bottom: var(--spacing-10);
  padding: var(--spacing-6);
  background: var(--grey-0);
  border: 1px solid var(--grey-1);
  border-radius: var(--radius-default);
}

.ds-shell__playground-title {
  font-family: var(--font-secondary);
  font-size: var(--size-2);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--spacing-2);
}

.ds-shell__playground-intro {
  font-size: var(--size-0);
  color: var(--grey-4);
  margin-bottom: var(--spacing-5);
}

.ds-shell__playground-preview {
  padding: var(--spacing-6);
  margin-bottom: var(--spacing-6);
  background: var(--white);
  border: 1px solid var(--grey-1);
  border-radius: var(--radius-default);
}

@media (prefers-reduced-motion: no-preference) {
  .ds-shell__playground-preview {
    transition: opacity 0.1s ease;
  }

  .ds-shell__playground-preview[aria-busy='true'] {
    opacity: 0.5;
  }
}

.ds-shell__controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-4);
}

@media (min-width: 48em) {
  .ds-shell__controls {
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  }
}

.ds-shell__control {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.ds-shell__control--full {
  grid-column: 1 / -1;
}

.ds-shell__control-label {
  font-size: var(--size-0);
  font-weight: var(--weight-semibold);
  color: var(--grey-6);
}

.ds-shell__control-input {
  font-family: var(--font-secondary);
  font-size: var(--size-1);
  color: var(--color-text-body-primary);
  padding: var(--spacing-2) var(--spacing-3);
  border: 1px solid var(--grey-2);
  border-radius: var(--radius-small);
  background: var(--white);
}

.ds-shell__control-input--textarea {
  width: 100%;
  resize: vertical;
  font-family: var(--font-secondary);
  line-height: var(--line-normal);
}

.ds-shell__control-input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.ds-shell__usage {
  margin-bottom: var(--spacing-10);
}

.ds-shell__usage-title {
  font-family: var(--font-secondary);
  font-size: var(--size-2);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--spacing-4);
}

.ds-shell__usage-label {
  font-size: var(--size-0);
  font-weight: var(--weight-semibold);
  color: var(--grey-5);
  margin-bottom: var(--spacing-2);
}

.ds-shell__usage-label:not(:first-child) {
  margin-top: var(--spacing-6);
}

.ds-shell__code-block {
  /* A <div>, not a <pre> — PHP 8.3+ wraps highlight_string()/highlight_file()
     output in its own <pre><code>, so we can't add a second one without
     nesting invalidly. Older PHP returns bare <code> with no whitespace
     preservation of its own, so white-space: pre here (rather than relying on
     a <pre> that may not exist) keeps line breaks/indentation correct either
     way. highlight_file() assumes a light background — the default PHP ini
     colors (blue/green/red/orange) have poor contrast on a dark surface. */
  margin: 0;
  padding: var(--spacing-6);
  background: var(--white);
  border: 1px solid var(--grey-1);
  border-radius: var(--radius-default);
  overflow-x: auto;
  white-space: pre;
  font-size: var(--size-0);
  line-height: var(--line-normal);
}

.ds-shell__code-block pre {
  margin: 0;
}

.ds-shell__code-block code {
  font-family: var(--font-mono);
}

/* ============================================================
 * Shared demo-entry building blocks — used across entries/*.php
 * ============================================================ */

.ds-note {
  font-size: var(--size-1);
  color: var(--grey-4);
  margin-bottom: var(--spacing-5);
  font-style: italic;
}

.ds-subsection__title {
  font-family: var(--font-secondary);
  font-size: var(--size-3);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.5px;
  margin-top: var(--spacing-8);
  margin-bottom: var(--spacing-4);
  color: var(--grey-6);
}

/* ---- Live sample (typography entry) ---- */

.ds-live-sample {
  padding: var(--spacing-8) var(--spacing-9);
  border: 1px solid var(--grey-1);
  border-radius: var(--radius-default);
  background: var(--white);
  max-width: 45rem;
}

.ds-live-sample > * + * {
  margin-top: var(--spacing-5);
}

.ds-live-sample ul {
  padding-left: var(--spacing-6);
  list-style: disc;
}

.ds-live-sample ul li + li {
  margin-top: var(--spacing-2);
}

/* ---- Headings (typography entry) ---- */

.ds-heading-row {
  display: grid;
  grid-template-columns: 15rem 1fr;
  align-items: start;
  gap: var(--spacing-6);
  padding: var(--spacing-5) 0;
  border-bottom: 1px solid var(--grey-1);
}

@media (min-width: 48em) {
  .ds-heading-row {
    grid-template-columns: 17.5rem 1fr;
  }
}

.ds-heading-row__meta {
  padding-top: var(--spacing-1);
}

.ds-heading-row__meta code {
  display: block;
  font-size: var(--size-0);
  font-weight: var(--weight-bold);
  color: var(--grey-6);
  margin-bottom: var(--spacing-2);
}

.ds-heading-row__meta small {
  display: block;
  font-size: var(--size-0);
  color: var(--grey-4);
  line-height: var(--line-normal);
}

.ds-heading-sample {
  margin: 0;
  font-style: normal;
}

.ds-heading-sample--underline {
  text-decoration: underline;
}

/* ---- Buttons entry ---- */

.ds-button-rows {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.ds-button-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
  padding: var(--spacing-6);
  border-radius: var(--radius-default);
}

.ds-button-row--light {
  background: var(--grey-0);
}

.ds-button-row--orange {
  background: var(--color-secondary);
}

.ds-button-row--green {
  background: var(--color-brand-1);
}

.ds-button-row--blue {
  background: var(--color-primary);
}

.ds-button-row--purple {
  background: var(--color-brand-2);
}

.ds-button-row__meta {
  flex: 1;
}

.ds-button-row__meta code {
  display: block;
  font-size: var(--size-1);
  font-weight: var(--weight-bold);
  color: var(--white);
  margin-bottom: var(--spacing-1);
}

.ds-button-row__meta small {
  font-size: var(--size-0);
  color: rgba(255, 255, 255, 0.75);
}

.ds-button-row--light .ds-button-row__meta code {
  color: var(--grey-7);
}

.ds-button-row--light .ds-button-row__meta small {
  color: var(--grey-4);
}

/* ---- Color swatches (colors entry) ---- */

.ds-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-4);
}

.ds-swatch {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.ds-swatch__color {
  display: block;
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius-default);
}

.ds-swatch__color--bordered {
  border: 1px solid var(--grey-1);
}

.ds-swatch__label {
  font-size: var(--size-0);
  font-family: var(--font-mono);
  max-width: 5.625rem;
  line-height: var(--line-normal);
  color: var(--grey-6);
}

.ds-swatch__label code {
  display: block;
  font-weight: var(--weight-bold);
  margin-bottom: 0.125rem;
}

/* ---- Semantic text tokens (colors entry) ---- */

.ds-semantic-text {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--grey-1);
  border-radius: var(--radius-default);
  overflow: hidden;
}

.ds-semantic-text__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-6);
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--grey-1);
  background: var(--grey-0);
}

.ds-semantic-text__row:last-child {
  border-bottom: none;
}

.ds-semantic-text__row code {
  font-size: var(--size-0);
  min-width: 16.25rem;
  color: var(--grey-5);
  flex-shrink: 0;
}

.ds-semantic-text__row span {
  font-family: var(--font-secondary);
  font-size: var(--size-3);
}

/* ---- Typography scale ---- */

.ds-type-families {
  margin-bottom: var(--spacing-6);
}

.ds-type-families__label {
  display: block;
  font-size: var(--size-0);
  color: var(--grey-4);
  margin-top: var(--spacing-2);
}

.ds-type-scale {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.ds-type-row {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-5);
  padding: var(--spacing-2) 0;
  border-bottom: 1px solid var(--grey-1);
}

.ds-type-row__label {
  font-size: var(--size-0);
  font-family: var(--font-mono);
  min-width: 12.5rem;
  color: var(--grey-4);
  flex-shrink: 0;
}

.ds-type-row__sample {
  font-family: var(--font-primary);
  line-height: var(--line-tighter);
  color: var(--color-primary-darker);
}

.ds-weights {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ds-weight-row {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-5);
  padding: var(--spacing-3) 0;
  border-bottom: 1px solid var(--grey-1);
}

.ds-weight-row code {
  font-size: var(--size-0);
  min-width: 15rem;
  flex-shrink: 0;
  color: var(--grey-4);
}

.ds-line-heights {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.ds-line-height-row code {
  display: block;
  font-size: var(--size-0);
  color: var(--grey-4);
  margin-bottom: var(--spacing-2);
}

.ds-line-height-row p {
  margin: 0;
  color: var(--color-primary-darker);
}

/* ---- Spacing scale ---- */

.ds-spacing-scale {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.ds-spacing-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.ds-spacing-row__label {
  font-size: var(--size-0);
  font-family: var(--font-mono);
  min-width: 13.75rem;
  color: var(--grey-4);
  flex-shrink: 0;
}

.ds-spacing-row__bar {
  display: block;
  height: var(--spacing-4);
  background: var(--color-primary);
  border-radius: var(--radius-small);
  min-width: 0.125rem;
}

/* ---- Constraints (layout entry) ---- */

.ds-constrains {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.ds-constrain-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.ds-constrain-row__bar {
  display: block;
  height: var(--spacing-6);
  background: var(--color-primary-light);
  border-radius: var(--radius-small);
}

.ds-constrain-row__meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.ds-constrain-row__meta code {
  font-size: var(--size-0);
  color: var(--grey-6);
}

.ds-constrain-row__meta small {
  font-size: var(--size-0);
  color: var(--grey-4);
}

/* ---- Radius ---- */

.ds-radius-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-6);
}

.ds-radius-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-2);
}

.ds-radius-item code {
  font-size: var(--size-0);
  color: var(--grey-6);
}

.ds-radius-item small {
  font-size: var(--size-0);
  color: var(--grey-4);
}

.ds-radius-box {
  display: block;
  width: 5rem;
  height: 5rem;
  background: var(--color-primary);
}

/* ---- Gutters (spacing entry) ---- */

.ds-gutter-row {
  margin-bottom: var(--spacing-6);
}

.ds-gutter-row code {
  display: block;
  font-size: var(--size-0);
  color: var(--grey-4);
  margin-bottom: var(--spacing-3);
}

.ds-gutter-demo {
  display: flex;
  align-items: center;
  height: var(--spacing-8);
}

.ds-gutter-demo__box {
  display: block;
  width: 5rem;
  height: 100%;
  background: var(--color-primary);
  border-radius: var(--radius-small);
  flex-shrink: 0;
}

.ds-gutter-demo__gap {
  display: block;
  height: 0.125rem;
  flex: 1;
  background: var(--color-secondary);
  position: relative;
}

.ds-gutter-demo__gap::before,
.ds-gutter-demo__gap::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0.0625rem;
  height: var(--spacing-5);
  background: var(--color-secondary);
}

.ds-gutter-demo__gap::before {
  left: 0;
}

.ds-gutter-demo__gap::after {
  right: 0;
}

/* ---- Card demo layout ---- */

.ds-card-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--spacing-8);
}

.ds-card-demo__item {
  width: 100%;
}

.ds-card-demo__item--with-image {
  max-width: 37.5rem;
}

.ds-card-demo__item--text-only {
  max-width: 25rem;
}

/* ---- Accent Blade demo ---- */

.ds-accent-blade-grid {
  display: grid;
  gap: var(--spacing-4);
  grid-template-columns: 1fr; /* mobile/tablet: stacked */
  padding: var(--spacing-4) 0;
}

@media (min-width: 64em) {
  .ds-accent-blade-grid {
    grid-template-columns: 1fr 1fr; /* desktop: clip-right / clip-left side by side */
  }
}

/* ---- Professional card demo layout ---- */

.ds-professional-card-demo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
}

.ds-professional-card-demo__item {
  width: 100%;
  max-width: 15.625rem;
}

.ds-professional-card-demo__label {
  font-size: var(--size-0);
  font-weight: var(--weight-bold);
  color: var(--grey-4);
  margin-bottom: var(--spacing-2);
}