/* code-generator@1.0.1 */
/* Optical-code generator. Only dictionary variables (--brick-*); the code
   itself keeps its own colors inside the canvas. Works from 360 px up. */

[data-code-generator] {
  container-type: inline-size;
  color: var(--brick-color-text);
  font-family: var(--brick-font-sans);
  line-height: var(--brick-line-height);
}

[data-code-generator] [hidden] { display: none !important; }

[data-code-generator] [data-cg-intro],
[data-code-generator] [data-cg-hint] {
  margin: var(--brick-space-1) 0 var(--brick-space-3);
  color: var(--brick-color-muted);
  font-size: var(--brick-font-size-sm);
}

[data-code-generator] [data-cg-layout] {
  display: grid;
  gap: var(--brick-space-6);
}

@container (min-width: 50rem) {
  [data-code-generator] [data-cg-layout] {
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    align-items: start;
  }
  [data-code-generator] [data-cg-output] {
    position: sticky;
    top: var(--brick-space-4);
  }
}

[data-code-generator] form { margin: 0; }

[data-code-generator] fieldset {
  min-width: 0;
  margin: 0 0 var(--brick-space-4);
  padding: var(--brick-space-4);
  border: var(--brick-border-width) solid var(--brick-color-border);
  border-radius: var(--brick-radius);
  background: var(--brick-color-surface);
}

[data-code-generator] fieldset fieldset {
  padding: var(--brick-space-2) 0 0;
  border: 0;
  background: transparent;
}

[data-code-generator] legend {
  padding: 0 var(--brick-space-1);
  font-weight: var(--brick-font-weight-bold);
}

[data-code-generator] fieldset fieldset > legend {
  padding: 0;
  font-size: var(--brick-font-size-sm);
}

[data-code-generator] label {
  display: block;
  margin: var(--brick-space-3) 0 var(--brick-space-1);
  font-weight: var(--brick-font-weight-bold);
  font-size: var(--brick-font-size-sm);
}

[data-code-generator] input:not([type="radio"]):not([type="checkbox"]):not([type="color"]):not([type="file"]),
[data-code-generator] select,
[data-code-generator] textarea {
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--brick-space-2) var(--brick-space-3);
  font: inherit;
  font-weight: var(--brick-font-weight-normal);
  color: var(--brick-color-text);
  background: var(--brick-color-bg);
  border: var(--brick-border-width) solid var(--brick-color-border);
  border-radius: var(--brick-radius);
}

[data-code-generator] textarea { resize: vertical; }

[data-code-generator] input[type="file"] {
  display: block;
  width: 100%;
  max-width: 100%;
  font: inherit;
  font-size: var(--brick-font-size-sm);
  color: var(--brick-color-text);
}

[data-code-generator] [aria-invalid="true"] { border-color: var(--brick-color-danger); }

[data-code-generator] [data-cg-error] {
  margin: var(--brick-space-1) 0 0;
  color: var(--brick-color-danger);
  font-size: var(--brick-font-size-sm);
}

[data-code-generator] [data-cg-row] { margin-bottom: var(--brick-space-4); }
[data-code-generator] [data-cg-row] > label:first-child { margin-top: 0; }

/* Choice groups: radios as chips. */
[data-code-generator] [data-cg-choices] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--brick-space-2);
}

[data-code-generator] [data-cg-choices] > legend { margin-bottom: var(--brick-space-2); }

[data-code-generator] [data-cg-choices] > label {
  display: inline-flex;
  align-items: center;
  gap: var(--brick-space-2);
  margin: 0;
  padding: var(--brick-space-2) var(--brick-space-3);
  font-weight: var(--brick-font-weight-normal);
  background: var(--brick-color-bg);
  border: var(--brick-border-width) solid var(--brick-color-border);
  border-radius: var(--brick-radius);
  cursor: pointer;
  transition: border-color var(--brick-transition), background var(--brick-transition);
}

[data-code-generator] [data-cg-choices] > label:has(input:checked) {
  border-color: var(--brick-color-primary);
  box-shadow: inset 0 0 0 1px var(--brick-color-primary);
}

[data-code-generator] input[type="radio"],
[data-code-generator] input[type="checkbox"] {
  display: inline-block;
  width: auto;
  margin: 0;
  accent-color: var(--brick-color-primary);
}

[data-code-generator] [data-cg-colors] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--brick-space-4);
}

[data-code-generator] [data-cg-colors] label {
  display: inline-flex;
  align-items: center;
  gap: var(--brick-space-2);
  margin: 0;
}

[data-code-generator] input[type="color"] {
  inline-size: var(--brick-space-8);
  block-size: var(--brick-space-8);
  padding: calc(var(--brick-space-1) / 2);
  background: var(--brick-color-bg);
  border: var(--brick-border-width) solid var(--brick-color-border);
  border-radius: var(--brick-radius-sm);
  cursor: pointer;
}

[data-code-generator] details { margin-top: var(--brick-space-3); }

[data-code-generator] summary {
  cursor: pointer;
  color: var(--brick-color-primary);
  font-weight: var(--brick-font-weight-bold);
  font-size: var(--brick-font-size-sm);
}

/* Buttons (base from classless-base; secondary as action-button). */
[data-code-generator] button {
  margin-top: var(--brick-space-2);
  padding: var(--brick-space-2) var(--brick-space-4);
  font: inherit;
  font-weight: var(--brick-font-weight-bold);
  color: var(--brick-color-primary-ink);
  background: var(--brick-color-primary);
  border: var(--brick-border-width) solid var(--brick-color-primary);
  border-radius: var(--brick-radius);
  cursor: pointer;
}

[data-code-generator] button[data-variant="secondary"] {
  color: var(--brick-color-primary);
  background: transparent;
}

[data-code-generator] button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-code-generator] [data-cg-actions] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--brick-space-2);
  margin-bottom: var(--brick-space-4);
}

[data-code-generator] [data-cg-actions] button { flex: 1 1 auto; }

/* Visible keyboard focus everywhere. */
[data-code-generator] :is(input, select, textarea, button, summary):focus-visible,
[data-code-generator] [data-cg-choices] > label:has(input:focus-visible) {
  outline: 2px solid var(--brick-color-focus);
  outline-offset: 2px;
}

[data-code-generator] [data-cg-choices] input[type="radio"]:focus-visible { outline: none; }

/* Preview: a neutral surface frames the code; the code keeps its own background. */
[data-code-generator] [data-cg-preview] {
  display: grid;
  place-items: center;
  min-height: 14rem;
  margin: 0 0 var(--brick-space-3);
  padding: var(--brick-space-4);
  background: var(--brick-color-surface);
  border: var(--brick-border-width) solid var(--brick-color-border);
  border-radius: var(--brick-radius-lg);
}

[data-code-generator] [data-cg-canvas] {
  display: block;
  width: 100%;
  max-width: 18rem;
  height: auto;
  border-radius: var(--brick-radius-sm);
  box-shadow: var(--brick-shadow);
  image-rendering: pixelated;
}

[data-code-generator] [data-cg-canvas][data-shape="wide"] { max-width: 100%; }

[data-code-generator] [data-cg-placeholder] {
  color: var(--brick-color-muted);
  font-size: var(--brick-font-size-sm);
  text-align: center;
}

[data-code-generator] [data-cg-status] {
  min-height: 1.5em;
  margin: 0 0 var(--brick-space-3);
  font-size: var(--brick-font-size-sm);
}

[data-code-generator] [data-cg-status][data-tone="error"] { color: var(--brick-color-danger); }
[data-code-generator] [data-cg-status][data-tone="success"] { color: var(--brick-color-success); }

[data-code-generator] [data-cg-meta] {
  margin: var(--brick-space-2) 0;
  color: var(--brick-color-muted);
  font-size: var(--brick-font-size-xs);
}

[data-code-generator] [data-cg-payload] {
  max-height: 12rem;
  margin: 0;
  padding: var(--brick-space-3);
  overflow: auto;
  font-family: var(--brick-font-mono);
  font-size: var(--brick-font-size-xs);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--brick-color-surface);
  border: var(--brick-border-width) solid var(--brick-color-border);
  border-radius: var(--brick-radius);
}

[data-code-generator] [data-cg-payload]:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  [data-code-generator] * { transition: none !important; }
}