/* display: 16-colour grid sink (spec v0.2.3). Cell colours come only from
   the --c0..--c15 custom properties the adapter sets on #display from the
   palette; geometry comes from --w, --cell-w, --cell-h, --gap, which the
   adapter measures. The backdrop and the inset outline exist so the grid
   stays visible while every cell is index 0 (nothing drawn until a source
   holds the display). */
#tool-root { max-width: none; }
.display {
  --display-backdrop: #3a3a3a;
  --display-outline: rgba(255, 255, 255, 0.12);
  display: grid;
  grid-template-columns: repeat(var(--w, 40), var(--cell-w, 8px));
  grid-auto-rows: var(--cell-h, 8px);
  gap: var(--gap, 0px);
  width: max-content;
  max-width: 100%;
  margin: 1rem 0;
  padding: var(--gap, 0px);
  background: var(--display-backdrop);
  overflow: hidden;
  box-sizing: border-box;
}
.display i {
  display: block;
  width: var(--cell-w, 8px);
  height: var(--cell-h, 8px);
  box-shadow: inset 0 0 0 1px var(--display-outline);
  background: var(--c0);
}
.display i[data-c="0"]  { background: var(--c0); }
.display i[data-c="1"]  { background: var(--c1); }
.display i[data-c="2"]  { background: var(--c2); }
.display i[data-c="3"]  { background: var(--c3); }
.display i[data-c="4"]  { background: var(--c4); }
.display i[data-c="5"]  { background: var(--c5); }
.display i[data-c="6"]  { background: var(--c6); }
.display i[data-c="7"]  { background: var(--c7); }
.display i[data-c="8"]  { background: var(--c8); }
.display i[data-c="9"]  { background: var(--c9); }
.display i[data-c="10"] { background: var(--c10); }
.display i[data-c="11"] { background: var(--c11); }
.display i[data-c="12"] { background: var(--c12); }
.display i[data-c="13"] { background: var(--c13); }
.display i[data-c="14"] { background: var(--c14); }
.display i[data-c="15"] { background: var(--c15); }

#display-error {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.9rem;
  margin: 1rem 0;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid #b91c1c;
  background: #fee2e2;
  color: #7f1d1d;
}

.display-footer { margin-top: 1rem; font-size: 0.8rem; color: #6b7280; }
.display-presets ul, .display-demos ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.display-presets li, .display-demos li { margin: 0 0 0.25rem; break-inside: avoid; }
.display-presets a, .display-demos a { font-family: 'IBM Plex Mono', monospace; }
.display-presets a[aria-current="page"], .display-demos a[aria-current="true"] { font-weight: 600; text-decoration: none; }
.display-presets small, .display-demos small { color: #9ca3af; }
.display-spec { margin: 0.75rem 0 0; }
.display-demos { margin-top: 0.75rem; font-size: 0.8rem; color: #6b7280; }
@media (max-width: 40rem) { .display-presets ul, .display-demos ul { columns: 1; } }