/* OP/AL — shared tool design system ("the rule")
   ------------------------------------------------------------------
   Canonical chrome for every tool in the Applied Learning Lab.
   Light editorial: Untitled Sans + mono, black accent, hairline rules,
   sharp corners. This is the Lake Opeka language — all tools match it.
   more-than.design
*/

/* Brand fonts — served from the site's shared fonts folder. */
@font-face {
  font-family: 'Untitled Sans';
  src: url('/shared/fonts/untitled-sans-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Untitled Sans';
  src: url('/shared/fonts/untitled-sans-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sidepiece-HoneyPie';
  src: url('/shared/fonts/Sidepiece-HoneyPie.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --opal-bg:          #ffffff;
  --opal-panel:       #f4f4f4;
  --opal-line:        #e2e2e2;
  --opal-hairline:    #e2e2e2;
  --opal-ink:         #111111;
  --opal-mid:         #4d4d54;
  --opal-muted:       #7c7c84;
  --opal-accent:      #111111;
  --opal-accent-soft: #333333;
  --opal-on-accent:   #ffffff;
  --opal-cobalt:      #1c39bb;
  --opal-pink:        #ff94c9;
  --opal-radius:      10px;             /* rounded across all controls */
  --opal-controls-w:  320px;            /* standard control-panel width */
  --opal-font-sans:   'Untitled Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --opal-font-display:'Sidepiece-HoneyPie', 'Untitled Sans', sans-serif;
  --opal-font-serif:  var(--opal-font-display);   /* back-compat alias */
  --opal-font-mono:   'SF Mono', ui-monospace, Menlo, Consolas, 'Courier New', monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--opal-bg);
  color: var(--opal-ink);
  font-family: var(--opal-font-sans);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

/* ---------- Top bar ---------- */
.opal-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 24px;
  border-bottom: 1px solid #ececec;
  background: #ffffff;
  position: sticky; top: 0; z-index: 10;
}
.opal-brand { display: flex; align-items: center; gap: 14px; color: var(--opal-ink); text-decoration: none; }
.opal-brand .opal-mark,
.opal-brand svg { height: 26px; width: auto; display: block; }
.opal-brand .opal-mark svg,
.opal-brand .opal-mark img { height: 26px; width: auto; display: block; }
.opal-brand .opal-divider { width: 1px; height: 16px; background: var(--opal-line); }
.opal-brand .opal-product {
  font-family: var(--opal-font-sans);
  font-style: normal;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8a8a8a;
}
.opal-topbar .opal-meta {
  font-family: var(--opal-font-mono);
  font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--opal-muted);
}
.opal-topbar .opal-meta a { text-decoration: none; }
.opal-topbar .opal-meta a:hover { color: var(--opal-ink); }

/* ---------- Sub-header (name · description · version) ----------
   Sits directly under the topbar on every tool, so they all read as
   one lab. Injected by Opal.mountTopbar({ name, desc, version }). */
.opal-subhead {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 44px; padding: 0 24px;
  border-bottom: 1px solid var(--opal-line);
  background: #ffffff;
}
.opal-subhead__id { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.opal-subhead__name { font-family: var(--opal-font-display); font-size: 15px; letter-spacing: 0.01em; white-space: nowrap; }
.opal-subhead__desc {
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--opal-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.opal-subhead__ver {
  font-family: var(--opal-font-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--opal-muted); flex: none;
}

/* ---------- Unified shell: topbar (56) → subhead (44) → body ----------
   Body splits into a centered canvas stage + a fixed-width control rail on
   the right. Every tool shares this geometry. */
.opal-shell { display: grid; grid-template-rows: 56px 44px 1fr; height: 100vh; overflow: hidden; }
.opal-shell__body { display: grid; grid-template-columns: 1fr var(--opal-controls-w); min-height: 0; }
.opal-stage {
  min-width: 0; overflow: hidden; background: #f5f5f5; position: relative;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.opal-controls {
  border-left: 1px solid var(--opal-line); background: #ffffff;
  overflow-y: auto; padding: 18px; min-width: 0;
}

/* ---------- App shell (sidebar + main) ---------- */
.opal-app {
  display: grid;
  grid-template-columns: 340px 1fr;
  min-height: calc(100vh - 57px);
}
.opal-sidebar {
  background: var(--opal-bg);
  border-right: 1px solid var(--opal-line);
  padding: 22px;
  overflow-y: auto;
  max-height: calc(100vh - 57px);
}
.opal-main {
  padding: 32px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: #f5f5f5;
}

/* ---------- Type ---------- */
.opal-h1 {
  font-family: var(--opal-font-display);
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 2px;
  letter-spacing: -0.01em;
}
.opal-sub {
  color: var(--opal-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
}

/* ---------- Form ---------- */
.opal-label {
  display: block;
  font-size: 10px;
  color: var(--opal-mid);
  margin: 14px 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 400;
}
.opal-input,
.opal-select,
.opal-textarea {
  width: 100%;
  background: var(--opal-panel);
  border: 1px solid var(--opal-line);
  color: var(--opal-ink);
  padding: 8px 10px;
  border-radius: var(--opal-radius);
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.opal-input:focus,
.opal-select:focus,
.opal-textarea:focus {
  outline: none;
  border-color: var(--opal-ink);
  background: #fff;
}
.opal-textarea { resize: vertical; min-height: 80px; }
.opal-row { display: flex; gap: 8px; }
.opal-row > * { flex: 1; }

/* Pill sliders: light-gray rounded track + tall rounded white handle */
input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; background: transparent; cursor: pointer;
}
input[type=range]::-webkit-slider-runnable-track { background: #eaeaea; height: 22px; border-radius: 11px; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 26px; border-radius: 8px;
  background: #fff; border: 1px solid var(--opal-line); box-shadow: 0 1px 4px rgba(0,0,0,.2); margin-top: -2px;
}
input[type=range]::-webkit-slider-thumb:hover { border-color: var(--opal-muted); }
input[type=range]::-moz-range-track { background: #eaeaea; height: 22px; border-radius: 11px; }
input[type=range]::-moz-range-thumb { width: 16px; height: 26px; border-radius: 8px; background: #fff; border: 1px solid var(--opal-line); box-shadow: 0 1px 4px rgba(0,0,0,.2); }
input[type=file] { font-size: 12px; color: var(--opal-muted); font-family: inherit; }

.opal-btn {
  background: var(--opal-accent);
  color: var(--opal-on-accent);
  border: 1px solid var(--opal-accent);
  padding: 10px 14px;
  border-radius: var(--opal-radius);
  font-weight: 400;
  cursor: pointer;
  width: 100%;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
}
.opal-btn:hover { background: var(--opal-accent-soft); border-color: var(--opal-accent-soft); }
.opal-btn.secondary {
  background: transparent;
  color: var(--opal-ink);
  border: 1px solid var(--opal-line);
}
.opal-btn.secondary:hover { background: var(--opal-panel); border-color: var(--opal-ink); }

.opal-segments {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.opal-segments button {
  background: var(--opal-panel);
  border: 1px solid var(--opal-line);
  padding: 9px 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  font-family: inherit;
  color: var(--opal-mid);
  border-radius: var(--opal-radius);
  transition: all 0.15s ease;
}
.opal-segments button:hover:not(.active) { color: var(--opal-ink); border-color: var(--opal-muted); }
.opal-segments button.active {
  background: var(--opal-accent);
  color: var(--opal-on-accent);
  border-color: var(--opal-accent);
}

.opal-hint {
  font-size: 12px;
  color: var(--opal-muted);
  margin-top: 6px;
  line-height: 1.45;
}

details.opal-section {
  margin-top: 18px;
  border-top: 1px solid var(--opal-line);
  padding-top: 14px;
}
details.opal-section > summary {
  cursor: pointer;
  font-size: 10px;
  color: var(--opal-mid);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 400;
  list-style: none;
}
details.opal-section > summary::-webkit-details-marker { display: none; }
details.opal-section > summary::after { content: ' +'; }
details.opal-section[open] > summary::after { content: ' −'; }

/* ---------- Stage control zones (consistent on every tool) ----------
   Bottom-left  = export (PNG / SVG / save)
   Bottom-right = playback transport (animate / freeze / record) */
.opal-stage-actions   { position: absolute; left: 18px;  bottom: 18px; z-index: 5; display: flex; align-items: center; gap: 8px; }
.opal-stage-transport { position: absolute; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 5; display: flex; align-items: center; gap: 8px; }
.opal-stage-actions .sep, .opal-stage-transport .sep { width: 1px; height: 18px; background: var(--opal-line); margin: 0 2px; }
.opal-stage-actions button,
.opal-stage-transport button {
  background: var(--opal-bg); border: 1px solid var(--opal-line); color: var(--opal-ink);
  padding: 8px 14px; font-family: var(--opal-font-sans);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  border-radius: var(--opal-radius);
  cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.opal-stage-actions button:hover,
.opal-stage-transport button:hover { border-color: var(--opal-ink); }
.opal-stage-actions button.primary,
.opal-stage-transport button.primary { background: var(--opal-accent); border-color: var(--opal-accent); color: #fff; }
.opal-stage-actions button.primary:hover,
.opal-stage-transport button.primary:hover { background: var(--opal-accent-soft); border-color: var(--opal-accent-soft); }
.opal-stage-actions button.rec,
.opal-stage-transport button.rec { color: #e0202a; }
.opal-stage-actions button.rec:hover,
.opal-stage-transport button.rec:hover { border-color: #e0202a; }

/* ---------- Canvas frame ---------- */
.opal-canvas-wrap {
  background: #fff;
  padding: 20px;
  border: 1px solid var(--opal-line);
  border-radius: var(--opal-radius);
  box-shadow: 0 12px 40px -18px rgba(0, 0, 0, 0.18);
}
.opal-canvas-wrap canvas {
  max-width: 100%;
  max-height: calc(100vh - 160px);
  height: auto;
  display: block;
  background: #fff;
  cursor: grab;
}
.opal-canvas-wrap canvas:active { cursor: grabbing; }

/* ---------- Tool grid (optional landing markup) ---------- */
.opal-grid { max-width: 1100px; margin: 60px auto; padding: 0 32px; }
.opal-grid-head { margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--opal-line); }
.opal-grid-head h2 { font-family: var(--opal-font-display); font-size: 40px; font-weight: 400; margin: 0 0 8px; letter-spacing: -0.01em; }
.opal-grid-head p { margin: 0; color: var(--opal-muted); max-width: 560px; }
.opal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.opal-card {
  display: block; text-decoration: none; color: inherit;
  background: #fff; border: 1px solid var(--opal-line);
  border-radius: var(--opal-radius); padding: 22px;
  transition: border-color 0.15s, transform 0.15s;
}
.opal-card:hover { border-color: var(--opal-ink); transform: translateY(-1px); }
.opal-card .opal-card-eyebrow { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--opal-muted); margin-bottom: 10px; }
.opal-card h3 { font-family: var(--opal-font-display); font-weight: 400; font-size: 22px; margin: 0 0 6px; }
.opal-card p { margin: 0; font-size: 13px; color: var(--opal-muted); line-height: 1.5; }

/* ── Play ───────────────────────────────────────────────────────────────────
   The instrument with its dock put away, for the Reactive Design artifact. The
   engine and its defaults are untouched; what goes is everything that sets a
   parameter, so what is left is the artwork and the one gesture it answers. */
html.is-play .opal-topbar,
html.is-play .opal-subhead,
html.is-play #dock,
html.is-play #sizeDock,
html.is-play #hint,
html.is-play #status,
html.is-play #recDot,
html.is-play #exitFs,
html.is-play .opal-sessions-pop,
html.is-play #dropHint,
html.is-play #output,
html.is-play .opal-export,
html.is-play .group.out { display: none !important; }

html.is-play, html.is-play body { margin: 0 !important; padding: 0 !important; overflow: hidden !important; height: 100% !important; background: #000; }
html.is-play #wrap, html.is-play #stagewrap { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; margin: 0 !important; }
html.is-play #wrap > canvas, html.is-play #stagewrap > canvas,
html.is-play #wrap > svg {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  margin: 0 !important; border: 0 !important; border-radius: 0 !important;
  max-width: none !important; max-height: none !important; display: block;
}