/* LAYER 2: THE LAYOUT PIECES (Rob's 3-layer model, 11-09). Copied, never invented.
   Source: Tourney web2 src/ds/layout.css (BQ-4360, integrator copy 2f0e5c9436), which copies the Every Layout set
   (every-layout.dev: Stack, Cluster, Sidebar, Switcher, Grid, Center). Prefix rs- kept so a finding names the same piece.
   Rules: sizes in rem/em/%/ch only; no CSS `order` or row-reverse (DOM order = reading order); the ONLY fixed/sticky
   element a screen may use is .rs-pinned-bar. A screen never writes its own grid/flex rules: it composes these. */

.rs-stack { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--stack-space, 1rem); }
.rs-stack > * { margin-block: 0; }
.rs-stack.lg { --stack-space: 1.75rem; }
.rs-stack.sm { --stack-space: .5rem; }

.rs-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-space, .5rem); }
.rs-cluster.between { justify-content: space-between; }

.rs-sidebar { display: flex; flex-wrap: wrap; gap: var(--sidebar-gap, 1rem); }
.rs-sidebar > :first-child { flex-basis: var(--sidebar-width, 18rem); flex-grow: 1; }
.rs-sidebar > :last-child { flex-basis: 0; flex-grow: 999; min-inline-size: min(100%, var(--sidebar-content-min, 24rem)); }
/* label | value rows: the value column is the narrow one */
.rs-sidebar.kv > :first-child { flex-basis: 0; flex-grow: 999; min-inline-size: min(100%, 12rem); }
.rs-sidebar.kv > :last-child { flex-basis: auto; flex-grow: 1; min-inline-size: 0; }

.rs-switcher { display: flex; flex-wrap: wrap; gap: var(--switcher-gap, 1rem); }
.rs-switcher > * { flex-grow: 1; flex-basis: calc((var(--switcher-threshold, 40rem) - 100%) * 999); min-width: 0; }

.rs-autogrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr)); gap: var(--grid-gap, 1rem); }
.rs-autogrid.sm { --grid-min: 9.5rem; --grid-gap: .6rem; }

/* Center: Every Layout's content-box + gutters. Tourney's copy also set width:100%, which with gutters overflows by 2rem
   (caught by the 8-width check 11-10), so it is dropped here: a block fills its parent anyway. */
.rs-center { box-sizing: content-box; max-inline-size: var(--center-max, 72rem); margin-inline: auto; min-width: 0; padding-inline: var(--center-gutter, 1rem); }
.rs-center.narrow { --center-max: 40rem; }

/* THE ONE PINNED BAR. Phone/tablet (< 62rem): fixed above the tab bar, solid (never see-through), at most a third of
   the screen; kit.js measures it into --dock-h so the page leaves room under the content. Desktop: back in the flow.
   It holds the screen's ONE main action (a button or a row of buttons) and nothing else: a note above the button
   overlapped it at 320px x 200% text (kit check 11-10), so notes live in the page.
   (Tourney rules BQ-4371 ceiling + IN-0127 solid; breakpoint = the shell's 62rem.) */
.rs-pinned-bar {
  position: fixed; left: 0; right: 0; bottom: var(--tab-h, 0px); z-index: 25;
  display: flex; flex-direction: column; gap: .5rem;
  max-height: 33vh; max-height: 33dvh; overflow: hidden; box-sizing: border-box;
  padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -.25rem .75rem rgba(16, 20, 24, .06);
}
.rs-pinned-bar > :is(.btn, .rs-cluster) { flex: none; }
/* too tall to pin on this screen (kit.js measure(): bar + tab bar over 45% of the viewport): back in the flow */
.rs-pinned-bar.rs-unpin { position: static; max-height: none; overflow: visible; padding: 0; background: none; border: 0; box-shadow: none; }
@media (min-width: 62rem) {
  .rs-pinned-bar { position: static; max-height: none; overflow: visible; padding: 0; background: none; border: 0; box-shadow: none; }
}