:root {
  --ink: #2b2a26;
  --muted: #7a756b;
  --rule: #e3ddd0;
  --bg: #f7f3ea;
  --panel: #fbf8f1;
  --card: #fffdf8;
  --accent: #8a2b2b;
  --accent-soft: #f3e8e8;
  --rubric: #8a2b2b;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  line-height: 1.5;
  overflow: hidden;
}

.editor {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------- Top bar ---------- */

.editor__bar {
  display: grid;
  /* Match the three-pane body columns so each side cell sits exactly over its
     pane and the middle cell leaves the preview document open to the top. */
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr) 280px;
  align-items: stretch;
  gap: 0;
  background: var(--bg);
  flex: 0 0 auto;
}

/* Side cells carry the panel background + divider so the source and settings
   columns visually run up to the top; the middle cell stays open (preview bg). */
.editor__bar-col {
  display: flex;
  align-items: center;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
  padding: 0.6rem 1.1rem;
  min-width: 0;
}

.editor__bar-col--left {
  background: var(--panel);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.editor__bar-col--mid {
  background: var(--bg);
  justify-content: center;
}

.editor__bar-col--right {
  justify-content: flex-end;
  background: var(--panel);
  border-left: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.editor__nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.editor__brand {
  margin-right: 0.25rem;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.editor__brand:hover { color: var(--accent); }

.doc-titlebar__group {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  flex-wrap: nowrap;
}

.doc-titlebar__group .btn-sm {
  flex: 0 0 auto;
  white-space: nowrap;
}

.doc-title__wrap {
  display: inline-flex;
  justify-content: center;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 14rem;
}

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

.btn-sm {
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
}

/* Document title in the top menu bar. */
.doc-title {
  display: inline-block;
  width: auto;
  min-width: 0;
  max-width: 14rem;
  text-align: center;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
}

.doc-title[hidden] {
  display: none !important;
}

/* Editable title (no id loaded) looks like a text field on hover/focus. */
input.doc-title:hover { border-color: var(--rule); background: var(--card); }
input.doc-title:focus { outline: none; border-color: var(--accent); background: var(--card); }

/* Title loaded from a catalog id is a plain text link: no border/box. */
.doc-title--link {
  display: inline-block;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-color: transparent;
  background: transparent;
}

.doc-title--link:hover {
  color: var(--accent);
  border-color: transparent;
  background: transparent;
}

.btn {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.42rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }

.btn:disabled {
  color: var(--muted);
  cursor: default;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.btn-primary:hover:not(:disabled) { filter: brightness(1.08); color: #fff; }

.btn-ghost { background: transparent; color: var(--muted); }
.btn-ghost:hover:not(:disabled) { background: var(--accent-soft); }

/* ---------- Export menu ---------- */

.export-menu {
  position: relative;
}

.export-menu__panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  z-index: 40;
  min-width: 11.5rem;
  padding: 0.45rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.export-menu__panel[hidden] { display: none; }

.export-menu__group {
  padding: 0.2rem 0;
}

.export-menu__group + .export-menu__group {
  margin-top: 0.25rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--rule);
}

.export-menu__label {
  display: block;
  padding: 0.15rem 0.55rem 0.3rem;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}

.export-menu__item {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.84rem;
  padding: 0.42rem 0.55rem;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.export-menu__item:hover:not(:disabled) {
  background: var(--accent-soft);
  color: var(--accent);
}

.export-menu__item:disabled {
  opacity: 0.45;
  cursor: default;
}

/* ---------- Three-pane body ---------- */

.editor__body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr) 280px;
  min-height: 0;
}

.pane {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.pane--source { border-right: 1px solid var(--rule); background: var(--panel); }
.pane--settings { border-left: 1px solid var(--rule); background: var(--panel); }
.pane--preview { background: var(--bg); }

.pane__head {
  flex: 0 0 auto;
  min-height: 2.85rem;
  box-sizing: border-box;
  padding: 0.4rem 1rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

/* Document title header above the preview: centered, blends with preview bg. */
.pane__head--doc {
  justify-content: center;
  background: var(--bg);
}

.pane__hint {
  font-size: 0.72rem;
  color: var(--muted);
  font-style: italic;
}

.pane__badge {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}

.pane__title {
  margin: 0;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  font-weight: 700;
}

.pane__scroll {
  flex: 1 1 auto;
  overflow: auto;
  scrollbar-gutter: stable;
  padding: 1rem;
}

/* ---------- Source editor ---------- */

.field { margin-bottom: 0.7rem; }

.field__label {
  display: block;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 0.2rem;
}

/* Text input + color box sit on one row; the swatch is a compact square. */
.field__row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.field__row .field__input { flex: 1 1 auto; min-width: 0; }

/* Per-element text color swatch: a slim vertical rectangle beside the input.
   Background is driven by JS: white when no color is set (text follows the
   page color), or the chosen color when one is set. Grey border always, red
   border on hover in either state. */
.color-box {
  position: relative;
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.7rem;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background-color: #ffffff;
  cursor: pointer;
  overflow: hidden;
}

.color-box:hover {
  border-color: var(--accent);
}

.color-box:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.color-box--inline {
  width: 1rem;
  height: 1.4rem;
}

.color-box__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  opacity: 0;
  cursor: pointer;
}

.color-box.is-linked .color-box__input { pointer-events: auto; }
.color-box:not(.is-linked) .color-box__input { pointer-events: none; }

.section-divider--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.field__input,
.field__select {
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
}

.field__input:focus,
.field__select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.field-row { display: flex; gap: 0.6rem; }
.field-row .field { flex: 1; }

.btn-block {
  width: 100%;
  margin-bottom: 0.9rem;
}

.insert-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.5rem;
}

.insert-btn {
  font: inherit;
  font-size: 0.72rem;
  padding: 0.22rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}

.insert-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.gabc-wrap {
  position: relative;
  width: 100%;
  min-height: 16rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
}

.gabc-highlight,
.gabc-editor {
  margin: 0;
  padding: 0.7rem 0.8rem;
  font-family: "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", monospace;
  font-size: 0.85rem;
  line-height: 1.55;
  tab-size: 2;
  white-space: pre;
  overflow-wrap: normal;
  word-wrap: normal;
}

.gabc-highlight {
  position: absolute;
  inset: 0;
  overflow: auto;
  pointer-events: none;
  color: transparent;
  border: none;
  background: transparent;
}

.gabc-highlight .hl-notes { color: #2d5a3d; }
.gabc-highlight .hl-nabc { color: #8a5b2b; font-style: italic; }
.gabc-highlight .hl-pipe { color: var(--accent); font-weight: 700; }
.gabc-highlight .hl-paren { color: var(--muted); }
.gabc-highlight .hl-pitch { color: #3a5f8a; }
.gabc-highlight .hl-bar { color: var(--accent); }
.gabc-highlight .hl-clef { color: #5a3d8a; font-weight: 600; }
.gabc-highlight .hl-rubric { color: var(--rubric); font-weight: 700; }
.gabc-highlight .hl-tag { color: var(--muted); }
.gabc-highlight .hl-comment { color: var(--muted); font-style: italic; }
.gabc-highlight .hl-error {
  color: transparent;
  background: rgba(138, 43, 43, 0.18);
  border-radius: 2px;
}
.gabc-highlight .hl-warning {
  color: transparent;
  background: rgba(138, 122, 91, 0.2);
  border-radius: 2px;
}

.gabc-editor {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 16rem;
  resize: vertical;
  border: none;
  background: transparent;
  color: var(--ink);
  caret-color: var(--ink);
  overflow: auto;
}

.gabc-editor:focus {
  outline: none;
}

.gabc-wrap:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.gabc-editor.is-synced {
  box-shadow: inset 3px 0 0 var(--accent);
}

.diag-list {
  list-style: none;
  margin: 0.65rem 0 0;
  padding: 0;
}

.diag-list li { margin-bottom: 0.35rem; }

.diag-btn {
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 0.78rem;
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: var(--card);
  cursor: pointer;
}

.diag-btn--error { border-color: rgba(138, 43, 43, 0.35); color: var(--accent); }
.diag-btn--warning { border-color: rgba(138, 122, 91, 0.45); color: #6d5a32; }
.diag-btn--info { border-color: var(--rule); color: var(--muted); }
.diag-btn:hover { background: var(--accent-soft); }

.output-pane {
  margin: 0;
  padding: 0.65rem 0.75rem;
  min-height: 4rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--card);
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.55;
  white-space: pre-wrap;
  color: var(--ink);
}

.autosave-hint {
  margin: 1rem 0 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.autosave-hint.is-dirty {
  color: var(--accent);
  font-weight: 600;
}

.syllable-hit {
  cursor: pointer;
}

.syllable-hit.is-active tspan,
.syllable-hit.is-active {
  fill: var(--accent) !important;
  font-weight: 600;
}

.syllable-hit.is-active use,
.syllable-hit.is-active path:not(.StaffLine):not(.DividerLine):not(.NeumeLine) {
  filter: sepia(0.35) saturate(2.8) hue-rotate(310deg) brightness(0.92);
}

.syllable-hit.is-active rect.DividerLine {
  fill: var(--accent) !important;
}

.gabc-editor::selection {
  background: rgba(138, 43, 43, 0.22);
}

.source-hint {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
}

.source-hint code {
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 0.05rem 0.3rem;
  font-size: 0.78rem;
}

.section-divider {
  margin: 1.1rem 0 0.7rem;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  border-top: 1px solid var(--rule);
  padding-top: 0.7rem;
}

.text-copy-btn {
  font: inherit;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease;
}

.text-copy-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- Preview / paper ---------- */

.preview-stage {
  flex: 1 1 auto;
  overflow: auto;
  scrollbar-gutter: stable;
  /* The menu bar already contributes 0.6rem below the buttons, so add no extra
     top padding here. That makes the gap below the title buttons (down to the
     document) equal the gap above them (top of bar to button). */
  padding: 0 1.5rem 1.5rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.paper {
  background: var(--card);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--rule);
  /* Default to US Letter @ 96dpi so the first paint matches the initial
     preset and the page does not visibly resize on load. JS overrides
     width/height/padding inline once the document settings are applied. */
  width: 816px;
  min-height: 1056px;
  padding: 72px;
  flex: 0 0 auto;
}

.paper__head {
  text-align: center;
  margin-bottom: 1rem;
}

.paper__supertitle {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.paper__title {
  font-size: 1.7rem;
  font-weight: 600;
  margin: 0.1rem 0;
}

.paper__subtitle {
  font-size: 1rem;
  font-style: italic;
  color: var(--muted);
}

.paper__sideline {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

.paper__annotation {
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.paper__notation { width: 100%; }
.paper__notation.is-rendering {
  position: relative;
  opacity: 0.55;
  pointer-events: none;
  transition: opacity 0.08s ease;
}
.paper__notation.is-rendering::after {
  content: "Engraving…";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 1.5rem;
  font-size: 0.85rem;
  color: var(--muted);
  pointer-events: none;
}
.paper__notation svg { display: block; width: 100%; height: auto; }

.paper__error {
  color: var(--accent);
  font-size: 0.9rem;
  text-align: center;
  padding: 1.5rem 0;
}

.paper__footer {
  margin-top: 1.1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
  text-align: center;
  font-size: 0.72rem;
  color: var(--muted);
}

.paper__footer a {
  color: var(--accent);
  text-decoration: none;
}

.paper__footer a:hover { text-decoration: underline; }

/* Rubric (red text) recoloring: exsurge tags red lyrics/specials with .red */
.paper__notation .red,
.paper__notation text.red,
.paper__notation tspan.red {
  fill: var(--rubric) !important;
}

/* alignment variants applied to the paper head + side lines */
.paper.align-left .paper__head,
.paper.align-left .paper__annotation { text-align: left; }
.paper.align-right .paper__head,
.paper.align-right .paper__annotation { text-align: right; }

/* ---------- Settings rail ---------- */

.control { margin-bottom: 0.9rem; }

.control__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  margin-bottom: 0.25rem;
}

.control__value {
  font-size: 0.74rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.control__hint {
  margin: 0.3rem 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.35;
}

.control input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}

.control__select,
.control__number {
  width: 100%;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--card);
  color: var(--ink);
}

.control__row { display: flex; gap: 0.5rem; }
.control__row .control { flex: 1; }
.control__row > .btn { flex: 1 1 0; width: auto; }

.control__color {
  width: 100%;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--card);
  cursor: pointer;
}

.seg {
  display: inline-flex;
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: 999px;
  overflow: hidden;
  background: var(--card);
}

.seg button {
  flex: 1;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  padding: 0.32rem 0.4rem;
  cursor: pointer;
}

.seg button.is-active {
  background: var(--accent);
  color: #fff;
}

.toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.85rem;
}

.toggle input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .editor__body {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(0, auto);
    overflow: auto;
  }
  .editor__bar {
    grid-template-columns: 1fr;
    background: var(--panel);
    border-bottom: 1px solid var(--rule);
  }
  .editor__bar-col--left,
  .editor__bar-col--right {
    border: none;
  }
  .editor__bar-col--mid { justify-content: flex-start; }
  .editor__bar-col--right { justify-content: flex-start; }
  .pane { overflow: visible; }
  .pane__scroll, .preview-stage { overflow: visible; }
  .pane--source, .pane--settings { border: none; border-bottom: 1px solid var(--rule); }
  .editor { height: auto; min-height: 100vh; overflow: auto; }
  body { overflow: auto; }
}

/* ---------- Print ---------- */

@media print {
  @page { margin: 0; }
  .editor__bar, .pane--source, .pane--settings, .pane__head { display: none !important; }
  .editor, .editor__body, .pane--preview, .preview-stage {
    display: block; height: auto; overflow: visible; padding: 0; background: #fff;
  }
  .paper { box-shadow: none; border: none; }
}