/* Opus exhibition site - a deliberately boring, hand-written page. Light
   paper/ink palette, always - no dark mode. */

:root {
  --paper: #fbfaf7;
  --ink: #1a1a1a;
  --ink-soft: #55524c;
  --rule: #e2ded6;
  --accent: #9c5b3c;
  --accent-ink: #6e3f28;
  --nav-bg: var(--paper);
  --nav-ink: var(--ink);
  --panel-bg: #ffffff;
  --panel-ink: var(--ink);
  --code-bg: #f1efe9;
  --nav-h: 3.25rem;

  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.6;
}

h1,
h2,
h3 {
  line-height: 1.25;
  font-weight: 600;
}

a {
  color: var(--accent-ink);
}

a:hover {
  color: var(--accent);
}

code,
pre,
kbd {
  font-family: var(--font-mono);
  background: var(--code-bg);
  border-radius: 3px;
}

code,
kbd {
  padding: 0.1em 0.35em;
  font-size: 0.9em;
}

pre {
  padding: 1rem;
  overflow-x: auto;
}

pre code {
  background: none;
  padding: 0;
}

button {
  font: inherit;
  cursor: pointer;
}

/* The site's own default, distinct from the engine's (AppDefaults defaults to
   Horizontal): an explicit stylesheet rule rather than a JS-set property, so
   it composes with the render pane the same way a host page's own CSS would
   - removeProperty (an "unset"/reset control) falls back to this rule, not
   past it to the engine default. */
music-xml {
  --page-orientation: vertical;
}

/* --- Nav ------------------------------------------------------------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 1.25rem;
  background: var(--nav-bg);
  color: var(--nav-ink);
  border-bottom: 1px solid var(--rule);
}

.nav-brand {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--nav-ink);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.nav-samples {
  position: relative;
}

.nav-samples-button {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--nav-ink);
  padding: 0.35rem 0.7rem;
  font-size: 0.9rem;
}

.nav-samples-menu {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  display: flex;
  flex-direction: column;
  min-width: 14rem;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--panel-bg);
  color: var(--panel-ink);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  padding: 0.35rem;
}

/* An author rule always beats the UA stylesheet's `[hidden] { display: none }`,
   regardless of specificity - so the unconditional `display: flex` above would
   otherwise keep the menu visible even once JS sets `.hidden = true`. */
.nav-samples-menu[hidden] {
  display: none;
}

.nav-samples-menu a {
  padding: 0.4rem 0.6rem;
  border-radius: 4px;
  text-decoration: none;
  color: inherit;
  font-size: 0.9rem;
}

.nav-samples-menu a:hover {
  background: var(--code-bg);
}

.nav-links {
  margin-left: auto;
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
}

.nav-links a {
  color: var(--nav-ink);
  text-decoration: none;
  opacity: 0.8;
}

.nav-links a:hover {
  opacity: 1;
}

/* --- Landing page ------------------------------------------------------ */

.landing-main {
  max-width: 42rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 5rem;
}

.landing-main h1 {
  font-size: 1.9rem;
  margin-bottom: 0.25rem;
}

.landing-main .tagline {
  color: var(--ink-soft);
  margin-top: 0;
}

.landing-main section {
  margin: 2.5rem 0;
}

.landing-main section h2 {
  font-size: 1.2rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.4rem;
}

.record-tags {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.landing-main ul {
  padding-left: 1.3rem;
}

.cta-links {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.cta-links a {
  display: inline-block;
  padding: 0.5rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 4px;
  text-decoration: none;
  color: var(--accent-ink);
  font-size: 0.9rem;
}

.cta-links a:hover {
  background: var(--accent);
  color: #fff;
}

/* --- Render page --------------------------------------------------------- */

.render-main {
  position: relative;
  height: calc(100dvh - var(--nav-h));
  overflow: hidden;
}

.stage-wrap {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.stage-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.stage-header h1 {
  font-size: 1rem;
  margin: 0;
  font-family: var(--font-serif);
  flex: 1 1 auto;
  min-width: 8rem;
}

.doc-bytes {
  color: var(--ink-soft);
}

.doc-status {
  color: #a00;
  white-space: pre-wrap;
}

.zoom-control {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.zoom-control input[type="range"] {
  width: 8rem;
}

.stage {
  flex: 1 1 auto;
  overflow: auto;
  padding: 1.5rem;
  background: repeating-linear-gradient(45deg, var(--code-bg) 0 10px, transparent 10px 20px);
  background-color: var(--paper);
}

.stage music-xml {
  display: block;
  margin: 0 auto;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

/* Same author-vs-UA-stylesheet issue as .nav-samples-menu[hidden] above:
   without this, render.js setting scoreEl.hidden for the empty-state case
   would have no visual effect. */
.stage music-xml[hidden] {
  display: none;
}

.empty-state {
  max-width: 30rem;
  margin: 3rem auto;
  padding: 1.5rem;
  border: 1px dashed var(--rule);
  border-radius: 6px;
  background: #fff;
}

.empty-state ul {
  padding-left: 1.2rem;
}

/* --- Options panel -------------------------------------------------------- */

.panel-tab {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(0);
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px 0 0 6px;
  padding: 0.75rem 0.5rem;
  writing-mode: vertical-rl;
  font-size: 0.85rem;
  z-index: 5;
}

.panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(380px, 90vw);
  background: var(--panel-bg);
  color: var(--panel-ink);
  border-left: 1px solid var(--rule);
  transform: translateX(100%);
  transition: transform 0.2s ease;
  overflow: hidden;
  z-index: 4;
}

.panel.open {
  transform: translateX(0);
}

.panel-inner {
  height: 100%;
  overflow-y: auto;
  padding: 1rem;
}

.panel-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1rem;
  position: sticky;
  top: 0;
  background: var(--panel-bg);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--rule);
}

.panel-actions button {
  background: none;
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: inherit;
  padding: 0.4rem 0.7rem;
  font-size: 0.85rem;
}

.copy-status {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
}

.option-group {
  margin-bottom: 1.5rem;
}

.option-group h2 {
  font-size: 0.95rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 0 0 0.6rem;
}

.option {
  margin-bottom: 0.9rem;
}

.option-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
}

.option-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.option-controls input[type="number"] {
  width: 5rem;
  font-family: var(--font-mono);
}

.option-controls input[type="range"] {
  flex: 1 1 8rem;
  min-width: 4rem;
}

.option-controls input[type="text"] {
  flex: 1 1 auto;
  font-family: var(--font-mono);
}

.option-controls select {
  font-family: var(--font-mono);
}

.option-unit {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
  min-width: 2.5rem;
}

.option-help {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

/* --- 404 ------------------------------------------------------------------ */

.not-found-main {
  max-width: 32rem;
  margin: 4rem auto;
  padding: 0 1.25rem;
  text-align: center;
}

.not-found-main h1 {
  font-family: var(--font-mono);
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

/* --- Small screens ---------------------------------------------------- */

@media (max-width: 480px) {
  .site-nav {
    gap: 0.75rem;
    padding: 0 0.75rem;
  }

  .nav-links {
    gap: 0.6rem;
  }

  .panel {
    width: 90vw;
  }

  .zoom-control {
    margin-left: 0;
    flex-basis: 100%;
  }
}