/* sample-frame.css — the sample workspace beside a screen waiting for its first reading (sample-frame.js; lane ONB
   Q9). Brand-kit tokens only (docs/brand-kit.md), scoped to `.sf`. The label bar is part of the frame's box, above
   it, so the two cannot be scrolled apart.

   The last block styles the sample DOCUMENT itself, the framed /sample/<view> (app.html on the demo data), and is why
   app.html links this sheet from its head. */
.sf { margin: 12px 24px 18px; border: 1px solid var(--line-light); border-radius: 14px; overflow: hidden; background: var(--surface); }
.sf-bar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 9px 14px;
  border-bottom: 1px solid var(--line-light); background: var(--wash-hover); font-size: var(--text-sm); color: var(--ink); }
.sf-bar span { font-size: var(--text-xs); color: var(--muted); }
.sf-frame { display: block; width: 100%; height: min(72vh, 720px); border: 0; background: var(--surface); }
.sf-next { margin: 0; padding: 9px 14px; border-top: 1px solid var(--line-light); font-size: var(--text-xs); color: var(--muted); }
@media (max-width: 640px) { .sf { margin: 10px 12px 14px; } .sf-frame { height: 64vh; } }
@media print { .sf { display: none; } }

/* THE SAMPLE DOCUMENT (SAMPLE-j1, 2026-10-11): the framed /sample/<view> draws the demo screen's content under its own
   sample badge, and none of the shell around a screen: no rail (its logo, Browse/Agent switch, search, workspace and
   product pickers, Measure links, user chip and question count), no frame header (the title, Ask agent, Export), no
   global header, agency bar or menu scrim. The label above the frame is the host's, and the badge stays inside
   (demo-data.js): a sample figure is never on screen without words saying it is a sample. data-sample is on the root
   before first paint (app.html's head), so the rail never paints first. display:none, not a covering layer: nothing
   of the shell is left to tab to or to read. The rail's width is 0 where it is gone, as in embed mode (console.css). */
html[data-sample] { --rail-w: 0px; }
html[data-sample] .v2-rail,
html[data-sample] #frame-head,
html[data-sample] .hdr,
html[data-sample] .client-bar,
html[data-sample] .nav-scrim { display: none; }