/* ══════════════════════════════════════════════════════════════════════
   widget.css — page shell for the standalone widget page (widget.html).

   widget.html is GENERATED from playground.html by scripts/build-widget-page.js
   and contains only the widget: no customization rail, no Design Workshop, no
   FAB, no site-preview nav, no view/mode rails — none of it in the DOM. This
   file is the small amount of page-level styling that isn't the widget itself.

   Hand-authored and stable; the generator never rewrites it.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Page surface ──────────────────────────────────────────────────────
   Default: the theme's page surface. `?bg=none` → transparent, so a capture
   agent can shoot the widget as a cut-out with no plate behind it; `?bg=<css>`
   pins an explicit colour. Both are applied pre-paint by the inline script in
   the generated head, so a capture never catches a flash of the default. */
/* Default is the recessed canvas the widget is normally seen on in the
   playground (--surface-sunk), so a default capture matches the familiar look.

   SPECIFICITY NOTE — these selectors are deliberately `html:has(body.widget-page)`
   rather than a bare `html`. swap.css carries
   `html:has(body.playground-body) { background: var(--surface-sunk) }` at (0,1,2),
   and the generated body keeps `playground-body` (the widget's own layout CSS
   depends on it). A bare `html[data-bg="none"]` is only (0,1,1) and silently
   loses that fight — which is exactly how `?bg=none` came out still painted.
   Matching the `:has()` shape ties or beats it, and widget.css loads last. */
:root { --widget-page-bg: var(--surface-sunk); }
html[data-bg="none"] { --widget-page-bg: transparent; }

html:has(body.widget-page),
body.widget-page {
  background: var(--widget-page-bg);
  min-height: 100%;
}
html[data-bg="none"]:has(body.widget-page),
html[data-bg="none"] body.widget-page {
  background: transparent;
}

/* ── Layout — the widget, centred, nothing else ────────────────────────
   The stage keeps its own column sizing; this only positions it. The
   playground's canvas insets and rail offsets don't apply here because
   .playground-canvas isn't in this document at all. */
body.widget-page {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-24);
  min-height: 100vh;
  box-sizing: border-box;
}

body.widget-page .widget-stage {
  /* Neutralise the canvas-relative vertical offset the playground applies —
     this page centres with flex instead. */
  margin: 0;
  margin-top: 0;
}

/* ── Phantom rail column ───────────────────────────────────────────────
   The dual + view-rail grid reserves a leading `rail` track
   (grid-template-columns: auto 416px 416px). The view/mode rails are stripped
   from this page's DOM, so that track would render as an empty column and
   push the widget off-centre. Re-declare the 2-column grid whenever the rail
   presentation is active but the rail itself is absent.

   Same root cause the embed-mode session hit; scoped here to .widget-page. */
body.widget-page[data-layout="dual"][data-presentation="view-rail"] .widget-stage,
body.widget-page[data-layout="dual"][data-presentation="mode-rail"] .widget-stage {
  grid-template-columns: 416px 416px;
  grid-template-areas: "form chart";
}

/* Single-panel presentations keep one column — no phantom track either. */
body.widget-page:not([data-layout="dual"]) .widget-stage {
  grid-template-columns: auto;
  grid-template-areas: "form";
}

/* ── ?lock=<mode> — one mode only ──────────────────────────────────────
   The mode is applied via lifiApplyMode; hiding the seg is the visual half.
   (The playground reaches this through the rail's single-presentation path,
   which isn't available on a rail-less page — see the note in widget.html.)

   Hiding the seg is only HALF the swap, though. The header holds two mutually
   exclusive things — the seg tabs and a static `[data-flow-title]` naming the
   locked mode — and swap.css hides the title by default, revealing it under
   `body[data-presentation="single"|"mode-rail"]`. A rail-less page sets no
   presentation, so hiding the seg alone left the header EMPTY: no tabs, and a
   title that was there with the right text ("Bridge") but still display:none.
   Reveal it here, so a locked widget names itself the way the playground's
   single presentation does. Mirrors that rule's shape (and out-specifies the
   0-2-0 default) rather than inventing a new selector. */
body.widget-page[data-widget-lock] [data-flow-seg] { display: none; }
body.widget-page[data-widget-lock] .screen-header--main [data-flow-title] { display: block; }

/* ── Defensive: nothing chrome-like should ever paint here ─────────────
   The generator excludes all of it from the DOM; this is a belt-and-braces
   guard so a future playground addition that slips through the extractor
   can't leak visible chrome into a capture. */
body.widget-page .playground-rail,
body.widget-page .ds-doc-variants-rail,
body.widget-page .drawer-handle,
body.widget-page .host-nav,
body.widget-page #dsFab,
body.widget-page .widget-stage__view-rail,
body.widget-page .widget-stage__mode-rail {
  display: none !important;
}

@media (max-width: 920px) {
  body.widget-page { padding: var(--space-16); align-items: flex-start; }
}