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

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

  .editor__toolbar label {
    margin-block-end: 0;
  }

  .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);
  }

  /* ── Link toolbar ─────────────────────────────── */
  .link-toolbar {
    position:      fixed;
    z-index:       300;
    display:       flex;
    align-items:   center;
    gap:           var(--space-1);
    background:    var(--color-text);
    border-radius: var(--radius);
    padding:       var(--space-1) var(--space-2);
    box-shadow:    0 4px 12px oklch(0% 0 0 / 0.15);
  }

  .link-toolbar[hidden] {
    display: none;
  }

  .link-toolbar__sep {
    width:      1px;
    align-self: stretch;
    background: oklch(100% 0 0 / 0.2);
    margin-inline: var(--space-1);
  }

  .link-toolbar__bold,
  .link-toolbar__italic,
  .link-toolbar__btn,
  .link-toolbar__apply,
  .link-toolbar__remove {
    appearance:  none;
    background:  none;
    border:      none;
    color:       var(--color-surface);
    font:        inherit;
    font-size:   var(--text-sm);
    cursor:      pointer;
    padding:     var(--space-1) var(--space-2);
    border-radius: calc(var(--radius) - 2px);
    white-space: nowrap;
  }

  .link-toolbar__bold:hover,
  .link-toolbar__italic:hover,
  .link-toolbar__btn:hover,
  .link-toolbar__apply:hover {
    background: oklch(100% 0 0 / 0.12);
  }

  .link-toolbar__remove:hover {
    background: oklch(100% 0 0 / 0.12);
    color:      oklch(80% 0.12 20);
  }

  .link-toolbar__input-wrap {
    display:     flex;
    align-items: center;
    gap:         var(--space-1);
  }

  .link-toolbar__url {
    background:    oklch(100% 0 0 / 0.1);
    border:        1px solid oklch(100% 0 0 / 0.2);
    border-radius: calc(var(--radius) - 2px);
    color:         var(--color-surface);
    font:          inherit;
    font-size:     var(--text-sm);
    padding:       var(--space-1) var(--space-2);
    inline-size:   16rem;
    outline:       none;
  }

  .link-toolbar__url::placeholder {
    color: oklch(100% 0 0 / 0.4);
  }

  .link-toolbar__url:focus {
    border-color: oklch(100% 0 0 / 0.5);
  }

  /* Links inside contenteditable blocks */
  .block__text a,
  .block__list a {
    color:           var(--color-accent);
    text-decoration: underline;
    cursor:          text;
  }

  .block__text strong, .block__text b,
  .block__list strong, .block__list b { font-weight: 700; }

  .block__text em, .block__text i,
  .block__list em, .block__list i { font-style: italic; }
}