/*
 * Mokawala Style Lab V1
 * Internal visual QA only. Not part of public product UI.
 */

.mkw-lab {
  min-block-size: 100vh;
  padding-block: var(--wp--preset--spacing--48, 48px) var(--wp--preset--spacing--96, 96px);
  background: var(--wp--preset--color--canvas, #F7F4EF);
}

.mkw-lab__inner {
  inline-size: min(
    calc(100% - (2 * var(--mkw-page-pad))),
    var(--wp--custom--layout--product-max, 1240px)
  );
  margin-inline: auto;
}

.mkw-lab__header {
  display: grid;
  gap: var(--wp--preset--spacing--16, 16px);
  margin-block-end: var(--wp--preset--spacing--64, 64px);
  padding-block-end: var(--wp--preset--spacing--32, 32px);
  border-block-end: 1px solid var(--wp--preset--color--border, #DDD8D0);
}

.mkw-lab__kicker,
.mkw-lab__caption {
  margin: 0;
  color: var(--wp--preset--color--text-muted, #62605C);
  font-size: var(--wp--preset--font-size--ui, 15px);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.mkw-lab__header h1,
.mkw-lab__header p {
  margin: 0;
}

.mkw-lab__header p {
  max-inline-size: 760px;
  color: var(--wp--preset--color--text-muted, #62605C);
}

.mkw-lab__section {
  display: grid;
  gap: var(--wp--preset--spacing--24, 24px);
  margin-block-start: var(--wp--preset--spacing--64, 64px);
}

.mkw-lab__section-head {
  display: grid;
  gap: var(--wp--preset--spacing--8, 8px);
  max-inline-size: 760px;
}

.mkw-lab__section-head h2,
.mkw-lab__section-head p {
  margin: 0;
}

.mkw-lab__section-head p {
  color: var(--wp--preset--color--text-muted, #62605C);
}

.mkw-lab__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--24, 24px);
}

.mkw-lab__grid--tight {
  gap: var(--wp--preset--spacing--16, 16px);
}

.mkw-lab__stack {
  display: grid;
  gap: var(--wp--preset--spacing--16, 16px);
}

.mkw-lab__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--wp--preset--spacing--12, 12px);
}

.mkw-lab__panel {
  display: grid;
  gap: var(--wp--preset--spacing--16, 16px);
  padding: var(--wp--preset--spacing--24, 24px);
  border: 1px solid var(--wp--preset--color--border, #DDD8D0);
  border-radius: var(--wp--custom--radius--panel, 16px);
  background: var(--wp--preset--color--surface, #FFFFFF);
}

.mkw-lab__panel--soft {
  background: var(--wp--preset--color--surface-soft, #F0ECE6);
}

.mkw-lab__panel--dark {
  background: var(--wp--preset--color--ink, #171717);
  border-color: var(--wp--preset--color--ink, #171717);
  color: var(--wp--preset--color--surface, #FFFFFF);
}

.mkw-lab__panel--dark .mkw-lab__caption {
  color: var(--wp--preset--color--border, #DDD8D0);
}

.mkw-lab__language {
  display: grid;
  gap: var(--wp--preset--spacing--16, 16px);
}

.mkw-lab__language[lang|="ar"] {
  font-family: var(--wp--preset--font-family--arabic, "IBM Plex Sans Arabic", "Noto Sans Arabic", Arial, sans-serif);
  font-size: var(--wp--preset--font-size--body-arabic, 17px);
  line-height: 1.7;
}

.mkw-lab__language[lang|="ar"] .mkw-lab__caption {
  letter-spacing: 0;
}

.mkw-lab__language[lang|="fr"],
.mkw-lab__language[lang|="en"] {
  font-family: var(--wp--preset--font-family--latin, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: var(--wp--preset--font-size--body-latin, 16px);
  line-height: 1.6;
}

.mkw-lab__language h3,
.mkw-lab__language p {
  margin: 0;
}

.mkw-lab__type-sample {
  display: grid;
  gap: var(--wp--preset--spacing--12, 12px);
}

.mkw-lab__type-sample > * {
  margin: 0;
}

.mkw-lab__swatches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--wp--preset--spacing--12, 12px);
}

.mkw-lab__swatch {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: var(--wp--preset--spacing--12, 12px);
  min-block-size: 64px;
  padding: var(--wp--preset--spacing--8, 8px);
  border: 1px solid var(--wp--preset--color--border, #DDD8D0);
  border-radius: var(--wp--custom--radius--input, 12px);
  background: var(--wp--preset--color--surface, #FFFFFF);
}

.mkw-lab__swatch-mark {
  inline-size: 48px;
  block-size: 48px;
  border: 1px solid var(--wp--preset--color--border, #DDD8D0);
  border-radius: var(--wp--custom--radius--button, 10px);
}

.mkw-lab__swatch[data-color="canvas"] .mkw-lab__swatch-mark {
  background: var(--wp--preset--color--canvas, #F7F4EF);
}

.mkw-lab__swatch[data-color="surface"] .mkw-lab__swatch-mark {
  background: var(--wp--preset--color--surface, #FFFFFF);
}

.mkw-lab__swatch[data-color="surface-soft"] .mkw-lab__swatch-mark {
  background: var(--wp--preset--color--surface-soft, #F0ECE6);
}

.mkw-lab__swatch[data-color="ink"] .mkw-lab__swatch-mark {
  background: var(--wp--preset--color--ink, #171717);
}

.mkw-lab__swatch[data-color="muted"] .mkw-lab__swatch-mark {
  background: var(--wp--preset--color--text-muted, #62605C);
}

.mkw-lab__swatch[data-color="border"] .mkw-lab__swatch-mark {
  background: var(--wp--preset--color--border, #DDD8D0);
}

.mkw-lab__swatch[data-color="accent"] .mkw-lab__swatch-mark {
  background: var(--wp--preset--color--accent, #F25A24);
}

.mkw-lab__swatch[data-color="accent-soft"] .mkw-lab__swatch-mark {
  background: var(--wp--preset--color--accent-soft, #FFF0E9);
}

.mkw-lab__swatch strong,
.mkw-lab__swatch span {
  display: block;
}

.mkw-lab__swatch span {
  color: var(--wp--preset--color--text-muted, #62605C);
  font-size: 13px;
}

.mkw-lab__demo-label {
  display: inline-flex;
  inline-size: fit-content;
  align-items: center;
  min-block-size: 28px;
  padding-block: 4px;
  padding-inline: 10px;
  border: 1px solid var(--wp--preset--color--warning, #9A6700);
  border-radius: 999px;
  color: var(--wp--preset--color--warning, #9A6700);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.mkw-lab__weight {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--16, 16px);
}

.mkw-lab__weight span {
  min-inline-size: 88px;
}

.mkw-lab__weight [data-weight="400"] { font-weight: 400; }
.mkw-lab__weight [data-weight="500"] { font-weight: 500; }
.mkw-lab__weight [data-weight="600"] { font-weight: 600; }
.mkw-lab__weight [data-weight="700"] { font-weight: 700; }

.mkw-lab__form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--wp--preset--spacing--16, 16px);
}

.mkw-lab__rule {
  block-size: 1px;
  border: 0;
  background: var(--wp--preset--color--border, #DDD8D0);
}

@media (min-width: 768px) {
  .mkw-lab__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mkw-lab__swatches {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mkw-lab__form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .mkw-lab {
    padding-block-start: var(--wp--preset--spacing--64, 64px);
  }

  .mkw-lab__grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}