/* Cortex DS — TYPE: recessed. A register variant, OPTIONAL. Types are the third
   layer: tokens (base) → theme (client accent, themes/) → type (register variant,
   types/). Load AFTER tokens.css and after any client theme.

   FIRST DRAFT, 2026-08-29, from the owner: "apply the same recessed theme we have
   going with the landing page to the UI elements; we should explore this further."

   WHAT THE LANDING ACTUALLY DOES, read off the two screenshots rather than guessed:
   a group of cards does not sit loose on the page — it sits in a WELL. The well is a
   large-radius tray, one step deeper than the page, with no border of its own; the
   cards inside it stay panel-white, keep a smaller radius, and lift very slightly.
   The nav is the same move at control scale: a sunken track holding items, with the
   one you are on raised out of it. Depth is doing the grouping that a border does in
   the base register.

   THE ONE RULE THIS TYPE ADDS: depth runs one way. The ground recedes, panels sit on
   it, and the thing you are ON comes forward. Nothing else moves.

   WHAT IT DELIBERATELY DOES NOT TOUCH — the two things that structurally keep the
   product from wearing the landing's clothes, same carve-out house.css makes:
     - the client accent and the five --cx-accent-* steps;
     - the semantic hues. Teal still marks verified truth, amber still marks caution,
       and a state still reads as mark + word, never as depth. Depth groups; it never
       means. A recessed surface must never be the only thing saying something is
       wrong, because depth does not survive greyscale and does not reach a screen
       reader at all.

   NO NEW HUE: every surface below is derived with color-mix from tokens that already
   exist, so this file introduces no hex value of its own. Dark is handled by mixing
   toward --cx-ink rather than away from it, so the same declarations serve both.

   OPEN, and why this is a draft: the well wants a container the recipes do not have
   — today a "region" is an .cx-eyebrow followed by a sibling .cx-panel, with nothing
   wrapping the pair. So the well is expressed here on .cx-panel itself (the panel
   becomes the tray and its inner blocks raise), which reads correctly on a panel that
   holds cards and does nothing at all on a panel that holds a bare list. Wrapping a
   region is a MARKUP change and belongs to a ruling, not to a type file. */

:root {
  /* the tray: one step deeper than the app canvas, mixed from ink so it themes */
  --cx-well:        color-mix(in oklab, var(--cx-ground) 92%, var(--cx-ink));
  /* a control's sunken track — deeper than the panel it sits on */
  --cx-track:       color-mix(in oklab, var(--cx-panel-sunken) 88%, var(--cx-ink));
  /* the lift. Reuses the card shadow's weight; the package admits elevation in
     exactly three places and this type does not add a fourth kind, only more of the
     one that already exists. */
  --cx-lift:        0 1px 2px rgb(28 27 26 / .06), 0 0 0 .5px rgb(28 27 26 / .05);
  --cx-inset:       inset 0 1px 2px rgb(28 27 26 / .06);
  --cx-radius-well: 22px;
}

/* ── the tray ─────────────────────────────────────────────────────────────
   A panel that HOLDS cards becomes the well: it recedes, loses its hairline, and
   takes the larger radius. A panel that holds a bare register is untouched — there
   is nothing to raise, and a well with one flat thing in it is just a darker box. */
.cx-panel:has(> .cx-panel__bd > .cx-tiles),
.cx-panel:has(> .cx-panel__bd > .cx-conns),
.cx-panel:has(> .cx-panel__bd > .cx-docs),
.cx-panel:has(> .cx-panel__bd > .cx-charts) {
  background: var(--cx-well); border-color: transparent;
  border-radius: var(--cx-radius-well); }

/* the cards inside a tray come forward */
.cx-panel:has(> .cx-panel__bd > .cx-tiles) .cx-tile,
.cx-panel:has(> .cx-panel__bd > .cx-conns) .cx-conn,
.cx-panel:has(> .cx-panel__bd > .cx-docs)  .cx-doc,
.cx-panel:has(> .cx-panel__bd > .cx-charts) .cx-charts__cell {
  background: var(--cx-panel); border-color: transparent; box-shadow: var(--cx-lift); }

/* a tile group standing on the stage with no panel around it is its own tray */
.cx-stage-main > .cx-tiles, .cx-stage-main > .cx-mini {
  background: var(--cx-well); border-radius: var(--cx-radius-well);
  padding: var(--cx-s3); }
.cx-stage-main > .cx-tiles .cx-tile {
  background: var(--cx-panel); border-color: transparent; box-shadow: var(--cx-lift); }
/* the machine's rows RAISE but keep their own surface. Caught on the first render:
   setting --cx-panel here flattened the AI tint off .cx-mini > a, which is the
   AI-signal rule's surface and a ratified semantic. Depth groups; it never means —
   so it may lift a card, and it may never repaint one. */
.cx-stage-main > .cx-mini > a { box-shadow: var(--cx-lift); border-color: transparent; }

/* ── controls invert ──────────────────────────────────────────────────────
   In the base register a control is a raised outline on a flat ground. Here the
   track is sunken and the thing you are ON is raised out of it — the landing's nav,
   at component scale. The 44px floor and every semantic are untouched.

   THE FOCUS RING IS NOT UNTOUCHED, AND SAYING SO WAS THE BUG. The package draws focus
   as a box-shadow with `outline: none` and no fallback (components.css:31), and that
   rule is `:where(.cx-root) :focus-visible` — :where() contributes zero, so it computes
   at (0,1,0). Every selector below that sets box-shadow on a focusable element ties or
   beats it, and this file loads AFTER components.css. "Only fill, edge and shadow move"
   was precisely the mechanism that broke it: the ring IS the shadow. Measured
   2026-08-29 — a focused .cx-input under this type had no ring, no outline and (via the
   old line 98) no border either. The ring is re-asserted at the foot of this file. */
.cx-seg, .cx-tabs {
  background: var(--cx-track); border-color: transparent;
  box-shadow: var(--cx-inset); border-radius: var(--cx-radius-md); padding: 3px; }
.cx-seg > [aria-pressed="true"], .cx-tab[aria-selected="true"] {
  background: var(--cx-panel); box-shadow: var(--cx-lift);
  border-radius: var(--cx-radius-sm); }
/* the underline the base tab uses is the base's grouping device, not this one's */
.cx-tab[aria-selected="true"]::after { display: none; }

/* A SUNKEN SURFACE LIFTS ITS QUIET INK ONE STEP, the same rule the washed containers in
   components.css obey. --cx-ink-3 is validated on panel and ground; --cx-track is neither,
   and ink-3 lands at 3.66:1 on it in both themes against a 4.5 floor. ink-2 measures
   5.04:1 light. Audit check 9 found this by walking the DOM — check 8 could not, because
   no token pair names a surface a type file invents. Measured 2026-08-29. */
.cx-input, .cx-select > summary, .cx-search .cx-input, .cx-seg, .cx-tabs, .cx-rail-search .cx-input {
  --cx-ink-3: var(--cx-ink-2); }
.cx-input, .cx-select > summary, .cx-search .cx-input {
  background: var(--cx-track); border-color: transparent; box-shadow: var(--cx-inset); }
.cx-select > summary:hover { border-color: transparent; }

/* the rail's own search sits in the deepest surface on the page, so it inverts too */
.cx-rail-search .cx-input { background: var(--cx-track); box-shadow: var(--cx-inset); }

/* ── what stays raised ────────────────────────────────────────────────────
   The popover already floats and keeps its own shadow. The contextual panel stays a
   panel — it is the thing you are reading, so it must not recede. */
.cx-panel--sticky { background: var(--cx-panel); box-shadow: var(--cx-lift); }

/* ── the focus ring, re-asserted ──────────────────────────────────────────
   Must sit AFTER every box-shadow rule above and at or above their specificity.
   The competitors are (0,1,0) .cx-input, (0,1,1) .cx-select > summary, and three at
   (0,2,0) — .cx-search .cx-input, .cx-rail-search .cx-input, .cx-seg > [aria-pressed].
   Each selector here meets or beats its own competitor and comes later, so it wins
   without !important. .cx-stage-main > .cx-mini > a is deliberately NOT in this list:
   it matches no element in the package, and a dead selector in an a11y fix is a lie
   about coverage.

   RULE THIS TYPE ADDS, alongside "depth groups, it never means": any layer above
   components.css that sets box-shadow on a focusable element re-asserts the focus
   ring in the same file, because in this package the ring is a shadow. */
.cx-input:focus-visible,
.cx-search .cx-input:focus-visible,
.cx-rail-search .cx-input:focus-visible,
.cx-select > summary:focus-visible,
.cx-seg > [aria-pressed="true"]:focus-visible { box-shadow: var(--cx-focus-ring); }