@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
@layer cinder.components {
  /* Compound with `.cinder-form-field` so `gap` out-specificities the shared
     base rule (`var(--cinder-space-1-5)`) regardless of stylesheet load
     order — json-editor's own gap is intentionally larger. */
  .cinder-json-editor,
  .cinder-json-editor.cinder-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-2);
  }

  /* FormFieldFrame's fixed render order is label, control, description,
     message, error; these `order` overrides restore the original
     label → description → input → feedback visual order. */
  .cinder-json-editor > .cinder-form-field__label {
    order: 1;
  }

  .cinder-json-editor > .cinder-form-field__description {
    order: 2;
  }

  .cinder-json-editor > .cinder-json-editor__input {
    order: 3;
  }

  .cinder-json-editor > .cinder-json-editor__feedback {
    order: 4;
  }

  /* `__label` and `__description` also carry FormFieldFrame's generic
     `.cinder-form-field__label` / `__description` classes (`__feedback` does
     not — it is fully custom-rendered via the `message` slot, never paired
     with a generic class) — compound with them so json-editor's typography
     out-specificities the shared base rule regardless of consumer import
     order (component sidecars carry layer membership, not ordering). */
  .cinder-json-editor__label,
  .cinder-json-editor__label.cinder-form-field__label {
    color: var(--cinder-text-default);
    font-size: var(--cinder-text-sm);
    font-weight: var(--cinder-font-semibold);
  }

  .cinder-json-editor__description,
  .cinder-json-editor__description.cinder-form-field__description,
  .cinder-json-editor__feedback {
    margin: 0;
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-sm);
  }

  .cinder-json-editor__input {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--cinder-space-1);
  }

  /* CodeMirror themes itself (see json-editor-enhancement.ts) because its injected rules are
     unlayered and would win over anything here; this host only reserves space until it mounts. */
  .cinder-json-editor__editor:empty {
    display: none;
  }

  /* The textarea is the whole editor until CodeMirror loads, and again if it cannot. It grows
     with its content where `field-sizing` exists and otherwise keeps the native `rows` height;
     in both cases it never opens as a large empty box. */
  .cinder-json-editor__textarea {
    display: block;
    box-sizing: border-box;
    inline-size: 100%;
    min-block-size: calc(3 * 1.5em + 2 * var(--cinder-space-2) + 2px);
    max-block-size: calc(
      var(--_cinder-json-editor-rows, 8) * 1.5em + 2 * var(--cinder-space-2) + 2px
    );
    resize: vertical;
    border: 1px solid var(--cinder-control-border);
    border-radius: var(--cinder-control-radius);
    padding: var(--cinder-space-2);
    background: var(--cinder-control-background);
    color: var(--cinder-text-default);
    font-family: var(--cinder-font-mono);
    font-size: var(--cinder-text-sm);
    line-height: 1.5;
    field-sizing: content;
  }

  .cinder-json-editor__textarea[hidden] {
    display: none;
  }

  .cinder-json-editor__toolbar {
    display: flex;
    justify-content: flex-end;
  }

  .cinder-json-editor__textarea:focus-visible {
    outline: var(--cinder-ring-width) solid transparent;
    /* Ring replaces the border while focused rather than stacking on it — the two
       together read as one heavier shape than either was designed to be. */
    border-color: transparent;
    box-shadow: var(--_cinder-focus-ring-shadow);
  }

  .cinder-json-editor__feedback--error {
    color: var(--cinder-status-danger-text);
  }

  @media (forced-colors: active) {
    .cinder-json-editor__textarea:focus-visible {
      outline: var(--cinder-ring-width) solid ButtonText;
      box-shadow: none;
    }
  }
}