@layer components {
  /* ——— Blank slate ———
     What a tool looks like before anything is in it: the same dashed outline
     the dock's add tile uses for "not there yet", a glyph, and one line saying
     what the thing is for. Never an illustration, never a button — the action
     already sits in the header above it.

     Two declarations, because everything else it needs — the row, the gap, the
     padding, the radius — the utilities already say. Only the dashed edge and
     the one size the glyph grows to are the component's own. */
  .blank-slate {
    /* Display is the component's own, not the .flex utility's: the state
       rule below must be able to take it away, and a utility would outvote
       this file from the utilities layer. */
    display: flex;
    max-inline-size: 34rem;
    border-style: dashed;

    .icon {
      --icon-size: 1.5rem;
    }
  }

  /* A slate standing after a live list: broadcasts fill and empty the list
     without a render, so both states stay in the DOM and :has() referees —
     rows cover the slate, an emptied list uncovers it. */
  ul:has(li) + .blank-slate {
    display: none;
  }

  /* ——— The card board's two slates ———
     Scoped to the board so they cannot reach the slates every other tool
     draws. An empty column says one of two things depending on whether you
     could drop into it, and card-columns.css already owns WHICH one shows
     (it swaps them at the 640px line and hides both the moment a card lands)
     — this is only how they look, and how they look is the app's own slate
     voice: a dashed hairline and faint ink, on the column's wash. Fizzy's
     tilt, tint and heavy edge went with the rest of its costume (user,
     2026-08-14). */
  .cards {
    .blank-slate {
      border: 1px dashed var(--color-line);
      border-radius: var(--border-radius);
      color: var(--color-ink-faint);
      display: block;
      max-inline-size: none;
      padding: 1.5ch 2ch;
    }
  }
}