/* The four kinds of work, one colour each (the approved services colour system, quarterback preview
   2026-10-15-services-colour/DESIGN-NOTES.md): green = get found, teal = answer, amber = automate, violet = run.
   The one owner of these colours: the lens chips (js/lens/lens-layers.js reads --layer-*), the lens timeline, the service
   groups, "We use it on ourselves first" and the proof flow all take them from here. tokens.css is a byte-for-byte kit
   copy, so they live here. Used only on small marks (dots, tags, icon plates, hairlines), never as filled panels.
   --layer-*: the mark colour; --layer-*-ink: the same hue dark enough for small text on white (4.5:1). */
:root {
  --layer-found: #2a9d5c;    --layer-found-ink: #146045;
  --layer-answer: #087e96;   --layer-answer-ink: #055768;
  --layer-automate: #d59a1a; --layer-automate-ink: #8a5a00;
  --layer-run: #5b43a0;      --layer-run-ink: #5b43a0;
}
.layer--found { --c: var(--layer-found); --c-ink: var(--layer-found-ink); }
.layer--answer { --c: var(--layer-answer); --c-ink: var(--layer-answer-ink); }
.layer--automate { --c: var(--layer-automate); --c-ink: var(--layer-automate-ink); }
.layer--run { --c: var(--layer-run); --c-ink: var(--layer-run-ink); }

/* The tag: a dot plus mono caps in the layer's ink. Square-ish, flat, never a button. */
.layer-tag {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin: 0;
  font: 600 0.72rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-ink);
}
.layer-tag::before, .layer-dot { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
/* An icon plate: the line icon in the layer's colour on a faint wash of it. */
.layer-icon {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px;
  color: var(--c-ink); background: color-mix(in srgb, var(--c) 10%, #fff); border: 1px solid color-mix(in srgb, var(--c) 22%, #fff);
}
.layer-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }