/* <sg-empty>: layout and the three registers. Tokens only. */

sg-empty {
  display: block; container-type: inline-size;
  color: var(--sg-text, var(--sg-ink)); border-radius: var(--sg-radius-3, 8px);
}
/* hidden always wins, whatever display a skin sets */
sg-empty[hidden] { display: none !important; }
sg-empty h1, sg-empty h2, sg-empty h3 { margin: 0 0 var(--sg-space-2, 8px); font-family: var(--sg-font-display, inherit); line-height: var(--sg-leading-snug, 1.25); }
sg-empty p { margin: 0 0 var(--sg-space-3, 12px); max-width: var(--sg-measure-narrow, 46ch); color: var(--sg-text-soft, var(--sg-ink-soft)); }
sg-empty .sg-empty-body > :last-child { margin-bottom: 0; }

/* quiet, and the no-JavaScript look: plain words with room around them */
sg-empty { padding: var(--sg-space-5, 24px); border: var(--sg-hairline, 1px) solid var(--sg-rule); }
sg-empty[data-skin='quiet'] { display: flex; flex-wrap: wrap; gap: var(--sg-space-4, 16px) var(--sg-space-5, 24px); align-items: center; }
sg-empty[data-skin='quiet'] > .sg-empty-body { flex: 1 1 16rem; min-width: 0; }
.sg-empty-art { flex: none; width: 7.5rem; height: auto; }
.sg-empty-lines { fill: none; stroke: var(--sg-ink-soft); stroke-width: var(--sg-hairline, 1px); vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.sg-empty-marks { fill: var(--sg-ink-soft); opacity: 0.55; }
@container (max-width: 30rem) { .sg-empty-art { width: 6rem; } }

/* warm and playful: the scene above the words on a narrow box (capped, so the words
   stay in view), beside them from 32rem. It follows the words in the document and
   is shown first by `order`. */
sg-empty:is([data-skin='warm'], [data-skin='playful']) {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sg-space-4, 16px) var(--sg-space-6, 40px);
}
sg-empty .sg-empty-scene {
  order: -1; flex: 1 1 100%; min-width: 0; max-inline-size: min(100%, 18rem); margin-inline: auto;
  border-radius: var(--sg-radius-2, 4px); overflow: hidden;
}
sg-empty:is([data-skin='warm'], [data-skin='playful']) > .sg-empty-body { flex: 1 1 100%; min-width: 0; }
@container (min-width: 32rem) {
  sg-empty .sg-empty-scene { flex: 1.25 1 0; max-inline-size: none; margin-inline: 0; }
  sg-empty:is([data-skin='warm'], [data-skin='playful']) > .sg-empty-body { flex: 1 1 0; }
}