/*
  Sample mode's own styles (dashboard-kit/sample/sample.css): the "Sample dashboard" banner on every screen, a
  "Sample" mark on every section, the demo's page beside the editor, and the demo's own photos to choose from.
  Colours come from the dashboard's variables, so each demo's sample wears that demo's brand. No em-dashes.
*/
.s-banner { position: relative; z-index: 60; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; justify-content: center;
  padding: 8px 16px; font-size: 13px; line-height: 1.4; text-align: center; background: var(--gold); color: var(--on-gold); }
.s-banner b { letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.s-banner a { color: inherit; font-weight: 600; text-decoration: underline; min-height: 32px; display: inline-flex; align-items: center; }
html[data-look="vivid"] .s-banner { background: linear-gradient(90deg, var(--v-b), var(--v-a)); color: var(--v-on); }
.s-banner .s-long { display: none; }
@media (min-width: 900px) {
  .s-banner { position: sticky; top: 0; }                               /* at a desk it stays in view, over the content column only */
  .s-banner .s-long { display: inline; } .s-banner .s-short { display: none; }
}

/* every section says it is a sample, before anything it draws */
html.is-sample [data-pane]::before { content: "Sample: made-up numbers, and nothing you do here is saved"; display: inline-block; margin: 0 0 10px;
  padding: 4px 10px; border-radius: 99px; font-size: 12px; letter-spacing: .04em; border: 1px solid var(--gold); color: var(--gold); }
html.is-sample[data-look="vivid"] [data-pane]::before { border-color: var(--v-line-2); color: var(--v-a); }

/* the editor: fields on the left, the demo's page on the right; on a phone, the page above the fields */
html.is-sample .bar .btn-quiet:first-child { display: none; }          /* the stage replaces Preview */
html.is-sample .field .file { display: none; }                         /* photos are chosen below, never uploaded */
.s-stage { margin: 0 0 14px; }
.s-stage-k { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
html[data-look="vivid"] .s-stage-k { color: var(--v-muted); }
.s-frame { position: relative; height: 56vh; min-height: 320px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
html[data-look="vivid"] .s-frame { border-color: var(--v-line-2); box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.s-frame iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; }
@media (min-width: 900px) {
  [data-pane="edit"].s-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 46%); column-gap: 24px; align-items: start; }
  [data-pane="edit"].s-edit > * { grid-column: 1; }
  [data-pane="edit"].s-edit > .s-stage { grid-column: 2; grid-row: 1 / span 60; position: sticky; top: 56px; margin: 0; }
  [data-pane="edit"].s-edit .s-frame { height: calc(100vh - 150px); }
  /* the page drawn at a desk's width, then scaled into the frame (the scale is set by sample.js) */
  [data-pane="edit"].s-edit .s-frame iframe { width: 1280px; height: calc((100vh - 150px) / var(--s-k, .5)); transform: scale(var(--s-k, .5)); transform-origin: 0 0; }
}

.s-picks { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 4px; margin-top: 8px; -webkit-overflow-scrolling: touch; }
.s-pick { flex: none; width: 76px; height: 56px; padding: 0; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: none; cursor: pointer; scroll-snap-align: start; }
.s-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s-pick[aria-pressed="true"] { border-color: var(--gold); }
html[data-look="vivid"] .s-pick[aria-pressed="true"] { border-color: var(--v-a); }
.s-pick:focus-visible { outline: 2px solid var(--focus, var(--gold)); outline-offset: 2px; }