/* Rekta Design, the showcase: page glue only. Every colour, space, size and duration is a Rekta token; the components
   are rekta.css. Compact: everything stacks and the page scrolls. Sideways (760px wide and taller than 480px): the app
   fills the window, the panorama moves sideways and each section scrolls inside itself. */
html, body { margin: 0; background: var(--rk-bg); color: var(--rk-text-primary); }
.app { box-sizing: border-box; min-height: 100dvh; padding-bottom: calc(var(--rk-appbar-height) + env(safe-area-inset-bottom)); }
.top { padding: var(--rk-space-m) var(--rk-space-m) var(--rk-space-s); }
.top > * + * { margin-top: var(--rk-space-xs); }
.top > .rk-crumb { margin-left: calc(-1 * var(--rk-space-xs)); padding-inline: var(--rk-space-xs); }
.place-home > .rk-pivot { padding-top: var(--rk-space-s); }

.note { font-size: var(--rk-font-size-xs); color: var(--rk-text-contrast-high); max-width: 36rem; }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--rk-space-s) var(--rk-space-m); }
.fields { display: grid; gap: var(--rk-space-m); max-width: 30rem; }
.rk-sec .group-label, .detail .group-label { margin-top: var(--rk-space-l); }
.group-label + * { margin-top: var(--rk-space-xs) !important; }
.tag-row { gap: var(--rk-space-s) var(--rk-space-l); }
code { font-family: var(--rk-font-mono); font-size: 0.9em; }
kbd.rk-key { font-family: inherit; }
.light { font-weight: var(--rk-font-weight-light); }

/* A term and its explanation, one per hairline row. */
.defs > li { display: block; }
.defs > li > b { display: block; }
.defs > li > span { display: block; color: var(--rk-text-contrast-high); }
.numbered { counter-reset: n; }
.numbered > li { counter-increment: n; }
.numbered > li > b::before { content: counter(n) '  '; font-variant-numeric: tabular-nums; color: var(--rk-text-contrast-medium); }

/* Colour: swatches; tiles that show their two fills. */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--rk-space-s) var(--rk-space-m); margin: 0; padding: 0; list-style: none; }
.swatches li { display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; column-gap: var(--rk-space-s); align-items: center; }
.swatch { grid-row: 1 / span 2; width: 28px; height: 28px; border-radius: var(--rk-radius-tile); box-shadow: inset 0 0 0 1px var(--rk-text-contrast-low); }
.tile-hex { color: inherit; }
.pairs b { font-weight: var(--rk-font-weight-medium); }

/* Typography. */
.levels { padding: var(--rk-space-m) 0; border-block: 1px solid var(--rk-text-contrast-low); }
.levels > * + * { margin-top: var(--rk-space-xs); }
.scale > li { align-items: baseline; }
.scale-sample { line-height: 1.1; }

/* Motion and feedback demos. */
.motion-demos { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--rk-space-l); }
.motion-demos > div > * + * { margin-top: var(--rk-space-s); }
.flip > li { align-items: center; padding-block: var(--rk-space-xs); }
.states { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--rk-space-m); }
.small-tiles { --rk-tile-unit: 5.5rem; }
.small-tiles .rk-tile { min-height: 5.5rem; }
pre.code { margin: 0; padding: var(--rk-space-m) 0; overflow-x: auto; border-block: 1px solid var(--rk-text-contrast-low); font-size: var(--rk-font-size-xs); line-height: var(--rk-line-height-body); }

/* Places below the home: a detail column, and the tokens' split. */
.detail { padding: 0 var(--rk-space-m) var(--rk-space-l); max-width: calc(4 * var(--rk-tile-unit) + 4 * var(--rk-space-s) + 2 * var(--rk-space-xl)); }
.detail > * + * { margin-top: var(--rk-space-m); }
.page-split { padding-inline: var(--rk-space-m); padding-bottom: var(--rk-space-l); }
.page-split .rk-filters { margin-bottom: var(--rk-space-m); }
.rk-split-detail > * + * { margin-top: var(--rk-space-m); }
#token-detail > * + * { margin-top: var(--rk-space-m); }
.token-swatches { display: flex; gap: var(--rk-space-s); }
.token-swatches > span { width: 48px; height: 48px; border-radius: var(--rk-radius-tile); box-shadow: inset 0 0 0 1px var(--rk-text-contrast-low); }
.token-name { font-family: var(--rk-font-mono); font-size: var(--rk-font-size-m); word-break: break-all; }
#tok-body td:last-child { font-family: var(--rk-font-mono); font-size: var(--rk-font-size-xs); word-break: break-all; }
.keys-list > li { align-items: center; }

/* The accent slot, set as a product would: one value per theme, apart from every status hue. */
:root[data-accent='plum'] { --rk-accent: #7d29ad; --rk-on-accent: #ffffff; }
@media (prefers-color-scheme: dark) { :root[data-accent='plum']:not([data-theme='light']) { --rk-accent: #c38aed; --rk-on-accent: #0e0e12; } }
:root[data-accent='plum'][data-theme='dark'] { --rk-accent: #c38aed; --rk-on-accent: #0e0e12; }

@media (min-width: 760px) and (min-height: 481px) {
  html, body { height: 100%; }
  .app { display: flex; flex-direction: column; height: 100%; min-height: 0; }
  .top { flex: none; padding-inline: var(--rk-space-xl); }
  .place-home > .rk-pivot { padding-top: var(--rk-space-m); }
  .rk-place { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .place-detail { overflow-y: auto; }
  .place-split { overflow: hidden; }
  .page-split { flex: 1 1 auto; padding: 0 var(--rk-space-xl); }
  .page-split > .rk-split-list { padding: 0 var(--rk-space-m) var(--rk-space-l) 0; }
  .page-split > .rk-split-detail { padding: 0 0 var(--rk-space-l) var(--rk-space-l); }
  .detail { padding-inline: var(--rk-space-xl); }
  .rk-panorama { flex: 1 1 auto; }
  .sec-wide { --rk-sec-w: calc(4 * var(--rk-tile-unit) + 4 * var(--rk-space-s)); }
}

/* Inputs: the tile builder beside its tile; the other inputs in a grid. */
.builder { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--rk-space-l); align-items: start; }
.builder-out { grid-template-columns: repeat(2, var(--rk-tile-unit)); grid-auto-rows: var(--rk-tile-unit); }
.builder-out > .rk-tile { min-height: var(--rk-tile-unit); }
.rk-choices-plain { margin: 0; padding: 0; border: 0; min-width: 0; }
.input-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--rk-space-m) var(--rk-space-l); }
.when { display: grid; grid-template-columns: 1fr 8rem; gap: var(--rk-space-s); }
.files > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--rk-space-m); align-items: center; }
.files .rk-progress { grid-column: 1 / -1; }
@media (max-width: 759.98px), (max-height: 480px) {
  .builder { grid-template-columns: 1fr; }
  .builder-out { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(8rem, auto); }
}

/* Desktop: a tree beside its detail; a toolbar of icon buttons; the release steps; the long list. */
.desk { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(0, 1.2fr); gap: var(--rk-space-l); align-items: start; }
.toolbar { display: flex; gap: 2px; margin-bottom: var(--rk-space-xs); border-bottom: 1px solid var(--rk-text-contrast-low); }
.toolbar .rk-ab { min-width: 40px; min-height: 40px; padding: 0; justify-content: center; }
.desk-detail { padding-top: var(--rk-space-xs); }
.desk-detail > * + * { margin-top: var(--rk-space-xs); }
.sort-list > li { justify-content: flex-start; align-items: center; gap: var(--rk-space-s); padding-block: 0; padding-left: 0; }
.sort-list > li > .rk-meta { margin-left: auto; }
.log { height: calc(8 * var(--rk-row-height)); }
.log .rk-virtual-row > :last-child { margin-left: auto; }
.log .rk-virtual-row > span:nth-child(3) { overflow: hidden; text-overflow: ellipsis; }
.log .rk-virtual-row > .rk-meta:first-child { min-width: 4.5em; }
.log .rk-virtual-row > .rk-tag { min-width: 5.2em; }

/* Live and undo. */
.live-tiles { grid-template-columns: repeat(auto-fill, var(--rk-tile-unit)); }
.live-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rk-space-s); margin-top: var(--rk-space-s); }
.live-controls { display: flex; flex-wrap: wrap; gap: var(--rk-space-s) var(--rk-space-xl); }
.history > li[data-undone] { color: var(--rk-text-contrast-medium); }
.history > li[data-undone] > b { font-weight: var(--rk-font-weight-regular); text-decoration: line-through; }
@media (max-width: 759.98px), (max-height: 480px) {
  .desk { grid-template-columns: 1fr; }
}

/* Data. */
.chart-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rk-space-s); margin-top: var(--rk-space-l) !important; }
.meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--rk-space-m) var(--rk-space-l); }
.signin > * + * { margin-top: var(--rk-space-s); }
.signin .rk-dots { margin-block: var(--rk-space-m); }

/* Icons and the app shell. */
.icon-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: 0 var(--rk-space-m); margin: 0; padding: 0; list-style: none; }
.icon-gallery > li { display: flex; align-items: center; gap: var(--rk-space-s); min-height: var(--rk-row-height); border-top: 1px solid var(--rk-text-contrast-low); }
.icon-gallery code { font-size: var(--rk-font-size-xs); color: var(--rk-text-contrast-high); }
.window { max-width: 36rem; border: 1px solid var(--rk-text-contrast-medium); border-radius: var(--rk-radius-s); overflow: hidden; }
.window .window-controls { display: flex; gap: 0; margin-left: auto; align-self: stretch; }
.window .window-controls > i { display: grid; place-items: center; width: 40px; border-left: 1px solid var(--rk-text-contrast-low); color: var(--rk-text-contrast-high); }
.window-body { padding: var(--rk-space-m); }
.window-body > * + * { margin-top: var(--rk-space-xs); }
.rk-btn .rk-icon { margin-left: -4px; }