/* The ground (Instrument look). The page itself is the grille: a faint dot every 12px from the
   workspace's corner. Plates sit on it and hide it; a dot field such as the cast map is set onto the
   same points (lattice_controller.js). While research runs, ground_controller.js passes a slow band of
   light across the dots that show; when nothing runs, the ground is still.
   Every page, in both layouts (Peter, 2026-10-28: Reading too). In Reading there are no plates, so the
   dots run behind the text; they are faint enough to read through, and text set straight on the ground
   keeps a halo of it. */
html[data-look="instrument"][data-zones] .main {
  --ground-dot: color-mix(in oklch, var(--on-surface) 7%, var(--surface-page));
  --ground-lit: color-mix(in oklch, var(--on-surface) 55%, var(--surface-page));
  background-image: radial-gradient(circle at 6px 6px, var(--ground-dot) 1px, transparent 1.6px);
  background-size: 12px 12px;
  background-position: 0 0;
}
/* the wave canvas sits under the page's flow (z-index -1, no new stacking context, so nothing in the
   workspace can rise above the navigation or the tab bar). The page's colour is painted by <html> itself,
   so the body (which is .app) can stay clear and the canvas shows between the two. Painting it on
   <html> is also what lets a palette change the ground. */
html[data-look="instrument"] { background-color: var(--surface-page); }
html[data-look="instrument"] body.app { background-color: transparent; }
html[data-look="instrument"] .ground { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
html[data-look="instrument"] .ground__wave { display: block; width: 100%; height: 100%; }
html:not([data-look="instrument"]) .ground { display: none; }
/* text set straight on the ground keeps a halo of the ground, so lit dots never run through its letters */
html[data-look="instrument"] .main :is(.page-head, .home-head, .section__head, .cast-map__caption, .study-bar__crumbs) :is(h1, h2, h3, p, span, a, strong, em, time) {
  &:not(.btn, .btn *, .chip, .chip *) { text-shadow: 0 0 2px var(--surface-page), 0 0 5px var(--surface-page), 0 0 9px var(--surface-page); }
}

/* An empty collection (Instrument look): a strip of the grille, dim, with its first dot lit, the place the
   first persona, source or simulation will take. The only dot in the app that stands for one not yet made. */
html[data-look="instrument"] .main :is(.conversation-empty, .empty-state, .saved-research-empty)::before {
  content: ""; display: block; width: 108px; height: 36px; margin-bottom: 18px;
  background:
    radial-gradient(circle at 6px 6px, var(--action-live) 3.5px, transparent 4.2px) 0 12px / 12px 12px no-repeat,
    radial-gradient(circle at 6px 6px, var(--line-strong) 1.4px, transparent 2px) 0 0 / 12px 12px;
}