/* Rekta Design, the site: 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 home panorama moves sideways, 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: 40rem; }
.light { font-weight: var(--rk-font-weight-light); }
code { font-family: var(--rk-font-mono); font-size: 0.9em; }
kbd.rk-key { font-family: inherit; }
.rk-sec .group-label, .detail .group-label { margin-top: var(--rk-space-l); }
.group-label + * { margin-top: var(--rk-space-xs) !important; }

/* 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); }

.levels { padding: var(--rk-space-m) 0; border-block: 1px solid var(--rk-text-contrast-low); }
.levels > * + * { margin-top: var(--rk-space-xs); }
.small-tiles { --rk-tile-unit: 6rem; }
.small-tiles .rk-tile { min-height: 6rem; }

/* Code: no box, a hairline above and below. */
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); }

/* Pictures: on the ground with a hairline edge, nothing rounded but the tile radius. */
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--rk-text-contrast-low); border-radius: var(--rk-radius-tile); }
.shot figcaption { margin-top: var(--rk-space-xs); }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: var(--rk-space-l) var(--rk-space-m); align-items: start; }

/* A picture made for one theme shows in that theme only: the system's, or the one chosen in the app bar. */
.only-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .only-dark { display: block !important; }
  :root:not([data-theme='light']) .only-light { display: none !important; }
}
:root[data-theme='dark'] .only-dark { display: block !important; }
:root[data-theme='dark'] .only-light { display: none !important; }

/* The sample of components on the web place. */
.sample { display: grid; gap: var(--rk-space-m); max-width: 30rem; }
.sample > .rk-toggle, .sample > .rk-segments { justify-self: start; }

/* The app bar: a link reads like its buttons; the mark is the square of the app icon. */
a.rk-ab { text-decoration: none; }
.mark { display: inline-block; width: 8px; height: 8px; background: var(--rk-status-success-full); }

/* Places below the home: one column. */
.detail { padding: 0 var(--rk-space-m) var(--rk-space-l); max-width: 44rem; }
.detail.wide { max-width: 72rem; }
.detail > * + * { margin-top: var(--rk-space-m); }

@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; }
  .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)); }
}