/*
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 *
 * Copyright (c) 2026 Lior Ben-Gai
 *
 * Shared shell for every Oomph demo. A demo supplies three things and nothing
 * else: a #stage (its own renderer), a .readout row, and a #ruler. Keep the
 * chrome identical across demos so the differences on screen are the library's,
 * not the stylesheet's.
 */

:root {
  --ink: #111;
  --muted: #666;
  --line: #ddd;
  --paper: #fafafa;
  --panel: #fff;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font: 14px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}

a { color: inherit; }

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--line);
}

.site-header h1 {
  margin: 0;
  font-size: 15px;
  letter-spacing: .02em;
  font-weight: 700;
}

.site-header h1 a { text-decoration: none; }
.site-header h1 a:hover { text-decoration: underline; }
.site-header h1 span { color: var(--muted); font-weight: 400; }

.site-header nav { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; }

main {
  width: min(760px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 40px 0 72px;
}

/* The renderer. Each demo fills this however it likes. */
#stage {
  min-height: clamp(140px, 26vw, 240px);
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  overflow: hidden;
}

.readout {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 18px 0 30px;
}

.readout div { display: grid; gap: 3px; min-width: 0; }

.readout span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.readout b {
  font-size: 17px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

#ruler { width: 100%; }

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px 20px;
  margin-top: 22px;
}

.controls label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.controls input,
.controls select,
.controls button {
  font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid #bbb;
  border-radius: 3px;
  padding: 5px 7px;
  text-transform: none;
  letter-spacing: 0;
}

.controls button { cursor: pointer; }
.controls button:hover { border-color: var(--ink); }

.note {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  max-width: 64ch;
}

code {
  background: #ececec;
  padding: 1px 4px;
  border-radius: 3px;
}