/* =========================================================
   GEXI — public/shell/gx-radiance.css   (SU5 — capability + reasoning radiance islands)

   FUNCTIONAL layout for the three radiance islands (radiance.js): the CapabilityRail card grid, the ReasoningRail spine,
   the WorkItemCards poster grid. Token-driven (var(--*) only); the .gx-card base comes from gx-ui.css, gx-skin.css layers
   the premium glow. Mounted by SU6 (the Stage); loaded only under GEXI_SHELL → flag-off byte-identical.
   ========================================================= */

.gx-radiance { width: 100%; min-width: 0; }

/* ---- CapabilityRail — UX PHASE 2a (law #1): the tappable verb-menu GRID is RETIRED. What remains is one warm ambient
   line stating reach (.gx-stage-say) — the composer is the invitation, never a launcher of verbs-as-buttons. ---- */
.gx-stage-say { margin: 0; color: var(--muted); font-size: var(--text-sm); max-width: 46ch; line-height: 1.5; }
.gx-stage-say--dim { color: var(--faint, var(--muted)); font-size: var(--text-xs); }

/* ---- ReasoningRail — the producer's plan→make→critique→remediate→deliver, large, on a spine ---- */
.gx-radiance--reason { width: 100%; }
.gx-reason-spine {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding-left: var(--space-3); border-left: 2px solid var(--reason-rail, var(--line));
}

/* ---- WorkItemCards — the deliverable poster grid (finished-first) ---- */
.gx-work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-2); }
.gx-work-card {
  display: flex; flex-direction: column; gap: var(--space-1);
  min-width: 0; padding: var(--space-2); text-align: left; cursor: pointer; position: relative;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.gx-work-card:hover { border-color: var(--hairline-neon, var(--line)); }
.gx-work-card:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.gx-work-poster { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm, 8px); background: var(--void-2); }
.gx-work-title { font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.gx-work-cost { font-size: 10px; color: var(--faint, var(--muted)); font-variant-numeric: tabular-nums; }

/* ---- SU6 — the Stage canvas wrapper (idle ambient workspace / producing ReasoningRail + board) ---- */
.gx-stage-radiance { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); min-height: 100%; box-sizing: border-box; }
/* UX PHASE 2e — idle = an ambient WORKSPACE (top-aligned recent work), not a hero-centered second invitation. */
.gx-stage-idle { justify-content: flex-start; align-items: stretch; text-align: left; }
.gx-stage-idle .gx-radiance--caps { width: 100%; max-width: 560px; }
.gx-stage-board { display: flex; align-items: center; gap: var(--space-2); padding-bottom: var(--space-2); border-bottom: 0.5px solid var(--line); }
.gx-stage-board-t { font-weight: 640; font-size: var(--text-sm); color: var(--text); }
.gx-stage-board-cost { margin-left: auto; font-size: var(--text-xs); color: var(--faint, var(--muted)); font-variant-numeric: tabular-nums; }
/* a subtle producing emphasis on the stage (no width tween — the content swap + the reasoning spine carry the reveal). */
#gx-shell.gx-producing #gx-stage { background: var(--void); }

/* tap-taming for the Stage's touch targets (deliverable cards) — no blue flash / double-tap-zoom (mobile audit). */
.gx-work-card { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }