@layer components {
  /* ── Editor shell ─────────────────────────────── */
  .editor {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-4);
  }

  .editor__toolbar {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    min-block-size:  1.5rem;
  }

  .editor__status {
    font-size:  var(--text-sm);
    color:      var(--color-text-muted);
  }

  .editor__status[data-state="error"] {
    color: var(--color-danger);
  }

  /* ── Canvas ───────────────────────────────────── */
  .editor-canvas {
    border:          1px solid var(--color-border);
    border-radius:   var(--radius);
    padding-block:   var(--space-6);
    padding-inline:  var(--space-10);
    min-block-size:  16rem;
    background:      var(--color-surface);
  }

  /* ── Individual block ─────────────────────────── */
  .block {
    position: relative;
  }

  /* contenteditable elements inside blocks */
  .block__text {
    display:    block;
    width:      100%;
    outline:    none;
    min-height: 1.5em;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break:  break-word;
  }

  .block [contenteditable]:focus {
    outline: none;
  }

  .block__text:empty::before {
    content: attr(data-placeholder);
    color:   var(--color-text-muted);
    pointer-events: none;
  }

  /* List block */
  .block__list {
    padding-inline-start: var(--space-6);
    margin-block: 0;
  }

  .block__list li {
    outline: none;
    min-height: 1.5em;
    line-height: 1.7;
  }

  .block__list li:empty::before {
    content: "List item";
    color:   var(--color-text-muted);
    pointer-events: none;
  }

  /* ── Cover image slot ────────────────────────── */
  .cover-image-slot {
    border:        1px dashed var(--color-border);
    border-radius: var(--radius);
    overflow:      hidden;
    position:      relative;
  }

  .cover-image-slot__placeholder {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-1);
    block-size:      10rem;
    color:           var(--color-text-muted);
    font-size:       var(--text-sm);
    cursor:          pointer;
    background:      var(--color-bg);
  }

  .cover-image-slot__placeholder:hover {
    background: var(--color-border);
  }

  .cover-image-slot__hint {
    font-size:  var(--text-sm);
    color:      var(--color-text-muted);
    margin-block-start: var(--space-1);
  }

  .cover-image-slot__preview {
    display:    block;
    width:      100%;
    max-height: 20rem;
    object-fit: cover;
  }

  .cover-image-slot__remove {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-end:  var(--space-2);
    background: var(--color-surface);
    border:     1px solid var(--color-border);
  }

  [data-loading="true"] .cover-image-slot__placeholder {
    opacity: 0.5;
    pointer-events: none;
  }

  /* ── Image block ──────────────────────────────── */
  .block__image-wrap {
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    overflow:      hidden;
  }

  .block__image-preview {
    display:    block;
    width:      100%;
    max-height: 24rem;
    object-fit: contain;
    background: var(--color-bg);
  }

  .block__image-alt {
    display:    block;
    width:      100%;
    border:     none;
    border-block-start: 1px solid var(--color-border);
    padding:    var(--space-2) var(--space-3);
    font:       inherit;
    font-size:  var(--text-sm);
    color:      var(--color-text-muted);
    background: var(--color-surface);
    outline:    none;
  }

  .block__image-placeholder {
    display:         flex;
    align-items:     center;
    justify-content: center;
    block-size:      8rem;
    color:           var(--color-text-muted);
    font-size:       var(--text-sm);
    background:      var(--color-bg);
  }

  .block__image-error {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    block-size:      5rem;
    color:           var(--color-danger);
    font-size:       var(--text-sm);
  }

  /* ── Block hover highlight ───────────────────── */
  .block {
    position:            relative;
    border-radius:       var(--radius);
    padding-inline:      var(--space-2);
    margin-inline:       calc(-1 * var(--space-2));
    transition:          background 0.1s;
  }

  .block:hover {
    background: var(--color-bg);
  }

  .block--active {
    background: var(--color-bg);
    box-shadow: inset 2px 0 0 var(--color-accent);
  }

  /* ── Left-side add button ────────────────────── */
  .block__add-btn {
    position:           absolute;
    inset-inline-start: calc(-1 * var(--space-6));
    inset-block-start:  0.2em;

    appearance: none;
    background: none;
    border:     none;
    padding:    0;
    cursor:     grab;
    color:      var(--color-text-muted);
    display:    flex;
    align-items: center;
    justify-content: center;
    width:      1.25rem;
    height:     1.25rem;
    opacity:    0;
    transition: opacity 0.1s;
  }

  .block:hover .block__add-btn,
  .block--menu-open .block__add-btn {
    opacity: 1;
  }

  .block__add-btn:hover {
    color: var(--color-text);
  }

  /* ── Block type menu ──────────────────────────── */
  .block-menu {
    position:      absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index:       200;
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow:    0 4px 12px oklch(0% 0 0 / 0.08);
    padding-block: var(--space-1);
    min-inline-size: 10rem;
    display:       flex;
    flex-direction: column;
  }

  .block-menu button {
    appearance:  none;
    background:  none;
    border:      none;
    padding:     var(--space-2) var(--space-4);
    text-align:  left;
    font:        inherit;
    font-size:   var(--text-sm);
    color:       var(--color-text);
    cursor:      pointer;
  }

  .block-menu button:hover {
    background: var(--color-bg);
  }
}