@layer components {
  /* ——— The ghost ———
     What an empty tool will hold, drawn in its own preview's shapes: a bar for
     each line of words, a disc for each face, in the hairline's ink (user,
     2026-10-07; HANSHI Deviations). The rows, circles, trays and columns are
     the preview's own classes, so the first real to-do lands exactly where
     the first ghost one stood; only the two shapes that stand in for
     content, and the quieting of the borrowed ones, live here. HTML rather
     than a picture, so dark mode and every size come free. */
  .ghost {
    display: flex;
    flex-direction: column;
    gap: var(--block-space-half);
  }

  /* Parameter: --ghost-width (default 100%). Sized in em, so a bar stays the
     height of the text it stands for. */
  .ghost__line {
    display: block;
    flex-shrink: 0;
    inline-size: var(--ghost-width, 100%);
    block-size: 0.5em;
    background-color: var(--color-line);
    border-radius: 1em;
  }

  .ghost__line--heading {
    block-size: 0.7em;
  }

  .ghost__line--meta {
    block-size: 0.35em;
  }

  /* A face, at whatever size the row gives its avatars. */
  .ghost__disc {
    --ghost-size: var(--avatar-size, 1.75rem);

    flex-shrink: 0;
    inline-size: var(--ghost-size);
    block-size: var(--ghost-size);
    background-color: var(--color-line);
    border-radius: 50%;
  }

  /* The preview's own shapes, quietened: a board with no hue yet, circles
     in hairline. */
  .ghost {
    .dock-tool__columns {
      --card-color: var(--color-ink-faint);
    }

    .todo-check {
      border-color: var(--color-line);
    }
  }

  /* A list's pie, at the tally's own size (tally.css). */
  .ghost__disc--tally {
    --ghost-size: var(--check-size, 1.25rem);
  }
}