/* The example pages: their frame only. Everything inside an example is the
   system's own (dist/arabesque.css). Tokens only, logical properties only. */
body { margin: 0; }
/* Below the sticky site header (5rem): where a link lands, and a sticky
   "On this page". */
.ex-main [id] { scroll-margin-block-start: calc(5rem + var(--al-space-6)); }
.ex-main .al-toc { inset-block-start: calc(5rem + var(--al-space-6)); }
.ex-main { padding-block: var(--al-space-8) var(--al-space-16); display: flex; flex-direction: column; gap: var(--al-space-6); }
.ex-main > * { margin: 0; }
.ex-title { font-family: var(--al-font-display); font-size: var(--al-text-3xl); font-weight: var(--al-weight-regular); letter-spacing: var(--al-tracking-tight); }
.ex-spec { color: var(--al-color-text-muted); }
.ex-example { display: flex; flex-direction: column; gap: var(--al-space-4); padding: var(--al-space-6); border: var(--al-border-hairline) solid var(--al-color-line); border-radius: var(--al-radius-sm); background: var(--al-color-surface); min-inline-size: 0; }
.ex-h { margin: 0; font-size: var(--al-text-sm); font-weight: var(--al-weight-medium); color: var(--al-color-text-muted); }

/* Embedded in the documents' site (?embed, client.tsx): the demo alone, on
   the surface, its height the page's. */
.ex-embedded { background: var(--al-color-surface); }
.ex-embed { display: flex; flex-direction: column; gap: var(--al-space-4); padding: var(--al-space-6); }

/* Inside the examples, as in the showcase (showcase.css). */
.ex-form { --al-grid-min: 15rem; align-items: start; }
.ex-narrow { max-inline-size: 28rem; }
.ex-frame { padding: var(--al-space-5); border: var(--al-border-hairline) dashed var(--al-color-line-strong); border-radius: var(--al-radius-sm); }
.ex-shell { min-block-size: 0; border: var(--al-border-hairline) solid var(--al-color-line); border-radius: var(--al-radius-sm); overflow: hidden; }
.ex-shell .al-sidebar { position: static; block-size: auto; min-block-size: 16rem; }
@media (max-width: 52rem) { .ex-shell .al-sidebar { min-block-size: 0; } }
.ex-shell__main { padding: var(--al-space-5); }
.ex-flush .al-site-header { position: static; }
/* The page's own is in its corner; the demo's stays in its frame, shown. */
.ex-back-to-top .al-back-to-top, .ex-back-to-top .al-back-to-top[data-al-hidden] { position: static; align-self: start; opacity: 1; translate: none; visibility: visible; }
.ex-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--al-space-2); }
.ex-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--al-space-2) var(--al-space-4); padding-block: var(--al-space-1); }
.ex-list > li > .al-rollback-note { flex-basis: 100%; }
.ex-marks { align-items: flex-end; }
.ex-pattern { min-block-size: 14rem; }
.ex-hero { min-block-size: 18rem; border: var(--al-border-hairline) solid var(--al-color-line); border-radius: var(--al-radius-sm); }
.ex-hero__body { padding: var(--al-space-8) var(--al-space-6); }
.ex-hero__title { margin: 0; max-inline-size: 12ch; font-size: var(--al-text-3xl); }
.ex-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: var(--al-space-2); list-style: none; margin: 0; padding: 0; }
.ex-icons li { display: flex; align-items: center; gap: var(--al-space-2); padding: var(--al-space-2); border: var(--al-border-hairline) solid var(--al-color-line); border-radius: var(--al-radius-sm); font-family: var(--al-font-mono); font-size: var(--al-text-xs); }

/* The gallery. */
.ex-cover { border-block-end: var(--al-border-hairline) solid var(--al-color-line); }
.ex-cover__body { padding-block: var(--al-space-12) var(--al-space-16); }
.ex-cover__title { margin: 0; max-inline-size: 14ch; }
.ex-cover__lede { margin: var(--al-space-6) 0 0; max-inline-size: 48ch; }
.ex-group { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--al-space-5); padding-block-start: var(--al-space-6); border-block-start: var(--al-border-hairline) solid var(--al-color-line); }
.ex-group__h { margin: 0; font-size: var(--al-text-lg); font-weight: var(--al-weight-medium); }
.ex-group__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--al-space-3); }
@media (max-width: 40rem) {
  .ex-group { grid-template-columns: minmax(0, 1fr); }
}
.ex-pattern--small { min-block-size: 8rem; max-inline-size: 20rem; }
.ex-spinners { align-items: center; }
.ex-sections .al-section { padding-block: var(--al-space-8); }
.ex-toc { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: var(--al-space-8); align-items: start; }
.ex-toc h3 { margin: 0; font-size: var(--al-text-lg); font-weight: var(--al-weight-medium); }
.ex-toc section { min-block-size: 12rem; }
@media (max-width: 52rem) { .ex-toc { grid-template-columns: minmax(0, 1fr); } }

/* The foundations (examples/src/foundations.tsx): swatches, the type scale, space, motion. */
.ex-label { font-size: var(--al-text-sm); color: var(--al-color-text-muted); font-weight: var(--al-weight-medium); margin: 0; }
.ex-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--al-space-3); }
.ex-swatch { display: flex; flex-direction: column; border: var(--al-border-hairline) solid var(--al-color-line); border-radius: var(--al-radius-sm); overflow: hidden; background: var(--al-color-surface); }
.ex-swatch__chip { display: grid; place-items: center; block-size: 3rem; border-block-end: var(--al-border-hairline) solid var(--al-color-line); font-weight: var(--al-weight-medium); }
.ex-swatch__name { padding: var(--al-space-2) var(--al-space-3) 0; font-family: var(--al-font-mono); font-size: var(--al-text-xs); overflow-wrap: anywhere; }
.ex-swatch__role { padding: 0 var(--al-space-3) var(--al-space-2); font-size: var(--al-text-xs); color: var(--al-color-text-muted); }

.ex-type { display: flex; flex-direction: column; gap: var(--al-space-3); }
.ex-type__row { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--al-space-4); align-items: baseline; border-block-end: var(--al-border-hairline) solid var(--al-color-line); padding-block-end: var(--al-space-2); }
.ex-type__row > code { font-size: var(--al-text-xs); color: var(--al-color-text-muted); }
/* The sentence on one line, cut off at the edge as Google Fonts does. */
.ex-type__row > span { display: grid; min-inline-size: 0; }
.ex-type__row > span > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }

.ex-space { display: flex; flex-direction: column; gap: var(--al-space-1-5); }
.ex-space__row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--al-space-4); align-items: center; font-size: var(--al-text-xs); }
.ex-space__bar { block-size: 0.5rem; background: var(--al-color-accent); border-radius: 1px; }

.ex-motion { display: inline-block; inline-size: 1.5rem; block-size: 1.5rem; border-radius: var(--al-radius-sm); background: var(--al-color-accent); transition: transform var(--al-duration-base) var(--al-ease-standard); }
.ex-motion.is-moved { transform: translateX(4rem); }
.ex-motion.is-moved:dir(rtl) { transform: translateX(-4rem); }
/* Token names read left to right, but sit on the page's side. */
:dir(rtl) > code[dir="ltr"] { text-align: right; }