// THE RACK'S LAYOUT TOKENS — plain data, deliberately NOT "use client" (see
// ./channelColumnPresets.ts for why: a server component importing a value from
// a client module gets a client reference, not the value).
//
// Tailwind v4 (`app/globals.css`, no config) finds classes by scanning source
// for complete literals, so every entry is a whole class string. Never build
// one (`z-${n}`): it would not be generated.

// THE LAYER LADDER, top to bottom:
//
//   popover  > thead > groupHeader > identity
//
// - popover: the Tier cell's Advanced panel (ChannelTierSelect). It opens over
//   the rows below AND over the thead when its row sits just under it; it used
//   to TIE the thead at z-30 and win only by coming later in the DOM.
// - thead: the column header pins to the top of the scroll region, over
//   everything that scrolls under it, group headers included.
// - groupHeader: a section's header row pins under the thead (md+ only — below
//   md the region does not scroll vertically) and carries the five station
//   buttons, so it must paint over the pinned identity cells of the rows
//   scrolling up beneath it.
// - identity: the checkbox and Slug cells pinned to the left. BOTH at the same
//   level. Two sibling cells at one z-index paint in DOM order, and the Slug
//   cell comes later, so it covers the 4 px the two overlap (RACK_IDENTITY) —
//   which is what closes the seam between them. `20ee34db` closed that seam by
//   lifting the Slug cell to z-20 instead, which TIED it with the group header:
//   scrolled down and right, the slug band of every later row painted over the
//   group header and swallowed clicks on its stations (operator report
//   2026-09-24). A higher Slug z re-creates that tie; do not.
//
// - deck (off the ladder's order, beside it): the selection deck pins to the
//   bottom of the SCREEN below md (ChannelSelectionDeck), over whatever part of
//   the page scrolls under it; on md+ it is static and z does nothing.
//
// `groupHeader` carries its `md:` prefix because the sticky it orders is md+
// only (ChannelGroupHeaderRow).
export const RACK_LAYERS = {
  popover: "z-40",
  thead: "z-30",
  groupHeader: "md:z-20",
  identity: "z-10",
  deck: "z-20",
} as const;

// THE PINNED IDENTITY COLUMN'S GEOMETRY.
//
// Invariant: `slugLeft` (32 px) < `checkboxWidth` (36 px). The Slug cell pins
// 4 px INSIDE the checkbox cell, and that overlap is the seam closer (see
// `identity` above). A cell's width is a floor under auto table layout, so the
// checkbox cell never renders narrower and the gap cannot reopen. Equal values
// reopen the sub-pixel seam `20ee34db` found — the scrolled columns showing
// through a hairline between the two pins. rackLayout.test.ts holds this.
export const RACK_IDENTITY = {
  checkboxWidth: "w-9",
  slugLeft: "left-8",
} as const;

// One pipeline band column's width, header and cell alike — the meter bridge.
export const RACK_BRIDGE = "w-24 min-w-20";