/* The FinUI site's layout, and nothing else: every part on the page is a FinUI component, which draws itself; a test
   holds this file to placing them (pages-lay-out.test.mjs). The landing's preview frame loads it too, for the page
   drawn in it. */
.demo { --site-top: 56px; display: flex; flex-direction: column; min-height: 100vh; }
.demo-loading { padding: 40px; }
/* Out of sight until the keyboard comes to it. */
.site-skip:not(:focus) { position: absolute; top: -100px; left: 12px; }
.site-skip:focus { position: absolute; top: 10px; left: 12px; z-index: 40; }
.site-main { flex: 1; width: 100%; max-width: 1480px; margin: 0 auto; padding: 18px 24px 40px; }
.site-foot { width: 100%; max-width: 1480px; margin: 0 auto; padding: 18px 24px 28px; }
.site-page { display: grid; gap: 16px; }

/* ---- the landing: the hero fills the first screen, everything in FinUI follows */
.landing-hero { min-height: calc(100vh - var(--site-top) - 36px); padding-bottom: 12px; }
.landing-looks { display: grid; gap: 8px; }
.landing-preview { height: clamp(440px, calc(100vh - var(--site-top) - 72px), 820px); overflow: hidden; }
.landing-preview > .fui-card__body { height: 100%; padding: 0; }
.landing-preview iframe { display: block; width: 100%; height: 100%; border: 0; }
.landing-preview__body { padding: 22px; }
.demo-living { max-width: 980px; margin: 0 auto; }
.landing-group { display: grid; gap: 14px; padding-top: 34px; }
.landing-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }

/* ---- a workbench: the list of its kind, then the example as large as the screen allows with its switches beside it */
.wb { --bench-h: clamp(380px, calc(100vh - var(--site-top) - 156px), 940px); display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px; align-items: start; }
.wb-side { position: sticky; top: calc(var(--site-top) + 18px); }
/* The list scrolls in itself, never with the page. */
.wb-side .fui-sections__nav { position: static; max-height: calc(100vh - var(--site-top) - 36px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; }
.wb-find { margin-bottom: 10px; }
.wb-find .fui-field__input { width: 100%; }
.wb-side .fui-sections__group[hidden], .wb-side .fui-sections__link[hidden] { display: none; }
.wb-side.is-long .fui-sections__link .icon { display: none; }
/* A long list (the components) fits the screen as it is: two columns of names under their groups, three where there
   is room: sixty-odd components in two ran past the foot of a laptop's screen. */
@media (min-width: 901px) {
  .wb-side.is-long .fui-sections__nav { gap: 12px; }
  .wb-side.is-long .fui-sections__group { display: block; columns: 2; column-gap: 4px; }
  .wb-side.is-long .fui-sections__group-title { column-span: all; }
  .wb-side.is-long .fui-sections__link { padding: 4px 8px; break-inside: avoid; }
  .wb-side.is-long .fui-sections__link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 1100px) {
  .wb:has(> .wb-side.is-long) { grid-template-columns: 330px minmax(0, 1fr); }
  .wb-side.is-long .fui-sections__group { columns: 3; column-gap: 2px; }
  .wb-side.is-long .fui-sections__link { padding: 3px 6px; }
}
.wb-main { display: grid; gap: 14px; min-width: 0; }
.wb-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* As tall as its example needs, between a stage worth the name and the screen; the switches beside it as tall. */
.wb-bench { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 12px; max-height: var(--bench-h); }
.wb-canvas { min-width: 0; min-height: 0; }
.wb-canvas > .demo-frames { height: 100%; }
.wb-canvas .demo-frame { display: flex; flex-direction: column; align-items: safe center; justify-content: safe center; height: 100%; min-height: 380px; max-height: var(--bench-h); overflow: auto; }
.wb-canvas .demo-frame > * { max-width: 100%; }
.wb-canvas .demo-frames.is-phone { display: flex; justify-content: center; }
.wb-panel { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; }
.wb-panel .fui-setting-row__rows > .fui-setting-row { padding-top: 8px; padding-bottom: 8px; }
/* A choice stands under its name, from the left, in the panel's whole width. */
.wb-panel .demo-play__control--choice { flex-direction: column; align-items: stretch; gap: 6px; }
.wb-panel .demo-play__control--choice .fui-setting-row__control { justify-content: flex-start; }
.demo-play__select { width: 100%; }

/* A block: its preview and its code take turns in one place. */
.wb-area { max-height: var(--bench-h); }
.wb-area[data-tab="preview"] > .wb-codebox, .wb-area[data-tab="code"] > .wb-bench { display: none; }
.wb-codebox { height: var(--bench-h); }
.wb-area .demo-frame > * { width: min(100%, 520px); }
/* A wide block (a dashboard, a library, a page) takes the whole stage. */
.wb-area.is-wide .demo-frame > * { width: 100%; }

.wb-docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 12px; align-items: start; margin-top: 12px; }

/* ---- frames, and what the foundation lists in them */
.demo-frames { display: grid; gap: 12px; }
.demo-frames.is-both { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.demo-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px 6px; width: 100%; }
.demo-icon__still, .demo-icon__moving { display: inline-grid; }
.demo-icon { display: flex; align-items: center; gap: 8px; min-width: 0; }
.demo-icon .mono { overflow: hidden; text-overflow: ellipsis; }
.demo-icon__about { display: grid; min-width: 0; }
.demo-icon__files { display: flex; gap: 8px; }
.demo-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; width: 100%; }
.demo-swatch { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* The page in the landing's preview. */
.demo-stack { display: grid; gap: 16px; }
.demo-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

@media (max-width: 1080px) {
  .landing-hero { min-height: 0; padding-top: 14px; }
  .landing-preview { height: 520px; }
}
@media (max-width: 900px) {
  .wb { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .wb-side { position: static; }
  .wb-side .fui-sections__nav { max-height: none; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .wb-bench, .wb-area { max-height: none; }
  .wb-bench { grid-template-columns: minmax(0, 1fr); }
  .wb-canvas .demo-frame { height: auto; min-height: 240px; max-height: none; }
  .wb-codebox { height: auto; }
}
@media (max-width: 560px) {
  .site-main, .site-foot { padding-left: 14px; padding-right: 14px; }
  .landing-preview { height: 440px; }
}