/*
 * Surface-specific browser primitives.
 *
 * Most Stage Mate styling lives in Reagent components. This file also owns
 * browser primitives and the static presentation of ProseMirror-owned DOM.
 * Calculated positions, sizes, and user-defined colours remain inline.
 */

/* Independent visibility scopes must not nest: each controls its marked descendants. */
[data-descendants-visible] [data-visibility-target] {
  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1),
              visibility 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

[data-descendants-visible="true"] [data-visibility-target] {
  opacity: 1;
  visibility: visible;
}

[data-descendants-visible="false"] [data-visibility-target] {
  opacity: 0;
  visibility: hidden;
}

.stagemate-scrollbar,
.stagemate-edit-scrollbar,
.stagemate-dark-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: var(--stagemate-scrollbar-thumb) var(--stagemate-scrollbar-track);
}

.stagemate-edit-scrollbar,
.stagemate-scrollbar-light {
  --stagemate-scrollbar-track: #f8fafc;
  --stagemate-scrollbar-thumb: #cbd5e1;
  --stagemate-scrollbar-thumb-hover: #94a3b8;
}

.stagemate-dark-scrollbar,
.stagemate-scrollbar-dark {
  --stagemate-scrollbar-track: #0f172a;
  --stagemate-scrollbar-thumb: #334155;
  --stagemate-scrollbar-thumb-hover: #475569;
}

.stagemate-scrollbar::-webkit-scrollbar,
.stagemate-edit-scrollbar::-webkit-scrollbar,
.stagemate-dark-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 0;
  background: var(--stagemate-scrollbar-track);
}

.stagemate-scrollbar::-webkit-scrollbar-track,
.stagemate-edit-scrollbar::-webkit-scrollbar-track,
.stagemate-dark-scrollbar::-webkit-scrollbar-track {
  background: var(--stagemate-scrollbar-track);
}

.stagemate-scrollbar::-webkit-scrollbar-thumb,
.stagemate-edit-scrollbar::-webkit-scrollbar-thumb,
.stagemate-dark-scrollbar::-webkit-scrollbar-thumb {
  background: var(--stagemate-scrollbar-thumb);
  border: 2px solid var(--stagemate-scrollbar-track);
  border-radius: 9999px;
}

.stagemate-scrollbar::-webkit-scrollbar-thumb:hover,
.stagemate-edit-scrollbar::-webkit-scrollbar-thumb:hover,
.stagemate-dark-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--stagemate-scrollbar-thumb-hover);
}

/* Editor tokens live at the root because drag previews and the role picker
   are mounted under body, outside the document. Only genuinely shared design
   decisions belong here; component-specific dimensions stay with the component. */
.song-editor-focus {
  position: fixed;
  inset: 0;
  z-index: 40;
  border-radius: 0;
}
.song-editor-toolbar-more { display: none; }
@media (max-width: 639px) {
  .song-editor-toolbar-roles,
  .song-editor-toolbar-zoom { display: none; }
  .song-editor-toolbar-more { display: block; }
  [data-testid="song-editor-toolbar"] { flex-wrap: nowrap; gap: .5rem; }
}

:root {
  --song-editor-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --song-editor-sans: ui-sans-serif, system-ui;
  --song-editor-chord-color: #b45309;
  --song-editor-text-color: #0f172a;
  --song-editor-help-color: #94a3b8;
  --song-editor-muted-color: #64748b;
  --song-editor-border-color: #cbd5e1;
  --song-editor-lyric-top: 1.45rem;
  --song-editor-chord-top: .35rem;
  --song-editor-text-size: 1rem;
}

/* The editor viewport owns both scroll axes. Do not hide its horizontal bar
   with the shared vertical-only scrollbar treatment above. */
.song-editor-scroll::-webkit-scrollbar {
  height: 8px;
}

@keyframes song-editor-v2-caret-blink {
  0%, 49% { opacity: 1; }
  50%, 99% { opacity: 0; }
  100% { opacity: 1; }
}

.ProseMirror {
  position: relative;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  white-space: break-spaces;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0;
}

.ProseMirror pre {
  white-space: pre-wrap;
}

.song-editor-v2-chord-lane-caret {
  animation: song-editor-v2-caret-blink 1.06s infinite;
  pointer-events: none;
}

.song-editor-v2-vocal-role,
.song-editor-v2-layout-spacer[data-vocal-role-spacer] {
  border-radius: 0;
}

/* One presentation for empty lines; the shell includes the entire gutter. */
.song-editor-v2-block-shell {
  position: relative;
  margin-left: calc(-1 * var(--song-editor-gutter-width));
  padding-left: var(--song-editor-gutter-width);
}
.song-editor-v2-gutter {
  -webkit-user-select: none;
  user-select: none;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--song-editor-gutter-width);
}
.song-editor-v2-line-content { min-height: 1.55em; }
.song-editor-v2-row-handle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: .1rem;
  width: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--song-editor-muted-color);
  font: 600 1rem/1.5 var(--song-editor-sans);
  cursor: grab;
  touch-action: none;
  visibility: hidden;
}
.song-editor-v2-block-shell:is(:hover, :focus-within) .song-editor-v2-row-handle {
  visibility: visible;
}
.song-editor-v2-row-handle:active { cursor: grabbing; }
/* Touch uses taps and native scrolling, not desktop drag gestures. */
@media (any-pointer: coarse) {
  .song-editor-v2-row-handle {
    visibility: visible;
    min-height: 2.75rem;
    cursor: pointer;
    touch-action: auto;
  }
  .song-editor-v2-document .song-editor-v2-chord { touch-action: auto; }
  .song-editor-v2-document .song-editor-v2-section-timestamp-action {
    visibility: visible;
    opacity: 1;
  }
}
.song-editor-v2-row-actions {
  width: 17rem;
  max-height: 75vh;
  overflow-y: auto;
  padding: .5rem;
  border: 1px solid var(--song-editor-border-color);
  border-radius: .6rem;
  background: white;
  color: var(--song-editor-text-color);
  box-shadow: 0 10px 28px rgba(15,23,42,.2);
}
.song-editor-v2-row-action {
  display: block;
  width: 100%;
  padding: .45rem .6rem;
  text-align: left;
  border-radius: .3rem;
}
.song-editor-v2-row-action:is(:hover, :focus-visible) { background: #eff6ff; }
.song-editor-v2-row-action:disabled { opacity: .45; cursor: not-allowed; }
.song-editor-v2-row-actions-title, .song-editor-v2-row-actions-warning {
  padding: .45rem .6rem;
  font-size: .8rem;
  color: var(--song-editor-muted-color);
}
.song-editor-v2-row-actions-title {
  font-weight: 600;
}
.song-editor-v2-row-action + .song-editor-v2-row-actions-title {
  margin-top: .35rem;
  padding-top: .65rem;
  border-top: 1px solid var(--song-editor-border-color);
}
.song-editor-v2-drop-boundary {
  position: fixed;
  height: 3px;
  background: #2563eb;
  pointer-events: none;
  z-index: 1001;
}
/* Metadata participates when its block, not merely its text, is selected. */
.song-editor-v2-block-shell :is(.song-editor-v2-section-timestamp-action, [data-instruction-targeting-host]) {
  -webkit-user-select: none;
  user-select: none;
}
.song-editor-v2-block-shell[data-block-selected="true"] :is(.song-editor-v2-section-timestamp-action, [data-instruction-targeting-host]) {
  background-color: Highlight;
  color: HighlightText;
}
.song-editor-v2-line-help {
  position: absolute;
  top: var(--song-editor-lyric-top);
  left: .3rem;
  font: 500 1rem/1.5 var(--song-editor-sans);
  color: var(--song-editor-help-color);
  pointer-events: none;
  white-space: nowrap;
}
.song-editor-v2-block-shell[data-line-active]:has([data-empty="true"]),
.song-editor-v2-document:not(:has(.song-editor-v2-block-shell[data-line-active] [data-empty="true"])) .song-editor-v2-block-shell:has([data-empty="true"]):hover {
  --empty-line-help: visible;
}
.song-editor-v2-line-help,
.song-editor-v2-gutter .song-editor-v2-block-plus { visibility: var(--empty-line-help, hidden); }
.song-editor-v2--blank-draft { --empty-line-help: visible; }
.song-editor-v2-chord-lane--hinted::before,
.song-editor-v2-music-line[data-empty="true"] .song-editor-v2-chord-lane::before {
  content: "Add chord";
  position: absolute;
  top: var(--song-editor-chord-top);
  left: .5rem;
  font: 600 .72rem/1.2 var(--song-editor-sans);
  color: var(--song-editor-help-color);
  pointer-events: none;
}
.song-editor-v2-music-line[data-empty="true"] .song-editor-v2-chord-lane::before {
  visibility: var(--empty-line-help, hidden);
}
.ProseMirror-focused .song-editor-v2-block-shell[data-line-active] .song-editor-v2-music-line[data-empty="true"]:not(:has(.song-editor-v2-chord-lane-caret)) .song-editor-v2-line-help::before {
  content: "";
  position: absolute;
  left: -.3rem;
  top: .075rem;
  width: 1px;
  height: 1.35rem;
  background: var(--song-editor-text-color);
  animation: song-editor-v2-caret-blink 1.06s infinite;
}

/* Chrome places ProseMirror's separator on a new line when a zero-width chord
   atom ends a music line. Keep the trailing break, which provides the editable
   end position, but remove the separator that creates the phantom row. */
.song-editor-v2-line-content > .song-editor-v2-inline-chord-token
  + img.ProseMirror-separator {
  display: none !important;
}

/* V2 editor DOM widgets: static presentation. Coordinates and role colours stay inline. */
.song-editor-v2-document {
  /* Fixed slots for row actions and insertion; content never shifts on hover. */
  --song-editor-gutter-width: 3.5rem;
  --song-editor-lyric-top: calc(var(--song-editor-text-size) * 1.16);
  --song-editor-chord-top: calc(var(--song-editor-text-size) * .28);
  min-height: 24rem;
  padding: 1.25rem 1.5rem 4rem;
  padding-left: var(--song-editor-gutter-width);
  outline: none;
}

.song-editor-v2-music-line {
  position: relative;
  min-height: calc(var(--song-editor-text-size) * 2.68);
  padding-top: var(--song-editor-lyric-top);
  white-space: pre-wrap;
  color: var(--song-editor-text-color);
  font: 500 var(--song-editor-text-size)/1.55 var(--song-editor-mono);
  outline: none;
}

.song-editor-v2-inline-chord-token {
  display: inline-block;
  width: 0;
  height: 0;
  overflow: hidden;
  line-height: 0;
}

/* Both serialized markup and the interactive NodeView share their frame. */
.song-instruction-text,
.song-editor-v2-instruction-text {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  font-style: italic;
}

.song-section-title {
  font-family: Raleway, ui-sans-serif, system-ui, sans-serif;
  font-size: calc(var(--song-text-size, 1rem) * 1.3);
  font-weight: 700;
  line-height: 1.35;
}

.song-editor-v2-section-heading {
  --song-text-size: var(--song-editor-text-size);
}

.song-editor-v2-instruction {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .25rem 0;
  padding: .25rem 0;
  color: #be123c;
  font-size: calc(var(--song-editor-text-size) * 1.1);
  line-height: 1.4;
  outline: none;
}

.song-editor-v2-instruction-text { min-width: 0; flex: 0 1 auto; }

/* Empty semantic blocks need their own visual caret: their editable text
   container has no rendered character for the browser to paint a native one. */
.song-editor-v2-section-heading [data-section-title],
.song-editor-v2-instruction-text { position: relative; }
.ProseMirror-focused .song-editor-v2-block-shell[data-block-active]
  .song-editor-v2-section-heading[data-empty="true"] [data-section-title]::before,
.ProseMirror-focused .song-editor-v2-block-shell[data-block-active]
  .song-editor-v2-instruction[data-empty="true"] .song-editor-v2-instruction-text::before {
  content: "";
  position: absolute;
  top: .1em;
  left: 0;
  width: 1px;
  height: 1.15em;
  background: currentColor;
  pointer-events: none;
  animation: song-editor-v2-caret-blink 1.06s infinite;
}

.song-editor-v2-chord[data-gesture] { cursor: grabbing; }
.song-editor-v2-chord[data-gesture="dragging"] { opacity: .35; }
.song-editor-v2-section-timestamp-action[data-timestamp-invalid="true"] {
  color: #dc2626;
}

/* Equal headroom above/below the former 1em box prevents clipped descenders
   without moving the text-box centre. Both editing modes share these metrics. */
.song-editor-v2-chord,
.song-editor-v2-chord-input {
  position: absolute;
  top: calc(var(--song-editor-chord-top) - .2em);
  font: 700 var(--song-editor-text-size)/1.4 var(--song-editor-mono);
  height: 1.4em;
  color: var(--song-editor-chord-color);
}

.song-editor-v2-chord-input {
  border: 0;
  border-radius: 0;
  outline: none;
  background: transparent;
  caret-color: var(--song-editor-chord-color);
  margin: 0;
  padding: 0;
  box-shadow: none;
  appearance: none;
  z-index: 20;
}

.song-editor-v2-chord {
  background: transparent;
  border-radius: .15rem;
  white-space: nowrap;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
  z-index: 3;
}

.song-editor-v2-chord-anchor[data-document-selected="true"] .song-editor-v2-chord {
  background: #bfdbfe;
}

.song-editor-v2-layout-spacer {
  display: inline;
  pointer-events: none;
  user-select: none;
}

.song-editor-v2-chord-lane {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1.35rem;
  z-index: 1;
  cursor: text;
}

.song-editor-v2-chord-lane-caret {
  border-radius: 1px;
  top: var(--song-editor-chord-top);
  width: 2px;
  background: var(--song-editor-chord-color);
  opacity: .95;
  z-index: 10;
  position: absolute;
  box-shadow: 0 0 0 1px rgba(255,255,255,.8);
  height: var(--song-editor-text-size);
}

.song-editor-v2-chord-anchor {
  /* The atom occupies no lyric width; its control sits in the chord row. */
  overflow: visible;
  pointer-events: auto;
  user-select: none;
}

.song-editor-v2-chord-drag-overlay {
  white-space: nowrap;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none;
  color: var(--song-editor-chord-color);
}

/* Row previews contain inert copies of the actual editor rendering. */
.song-editor-v2-row-drag-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  pointer-events: none;
  color: var(--song-editor-text-color);
  background: rgba(255,255,255,.96);
  border-width: 1px;
  border-style: solid;
  border-radius: .45rem;
  box-shadow: 0 10px 28px rgba(15,23,42,.2);
}

.song-editor-v2-character-probe {
  position: absolute;
  visibility: hidden;
  width: 1ch;
  pointer-events: none;
}

.song-editor-v2-row-drag-preview {
  max-width: 80vw;
  max-height: 55vh;
  overflow: hidden;
  opacity: .9;
  border-color: var(--song-editor-border-color);
}
.song-editor-v2-row-drag-preview :is(.song-editor-v2-gutter, .song-editor-v2-chord-lane-caret, .song-editor-v2-line-help) { visibility: hidden; }
.song-editor-v2-row-drag-preview .song-editor-v2-document { margin: 0; min-height: 0; padding-bottom: 1.25rem; }
.song-editor-v2-row-drag-preview[data-truncated]::after {
  content: "More rows…";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 1rem .5rem;
  background: linear-gradient(transparent, white 70%);
  font: 500 .85rem/1.5 var(--song-editor-sans);
}

.song-editor-v2-block-menu-empty {
  padding: .55rem;
  color: var(--song-editor-help-color);
}

.song-editor-v2-block-command {
  background: transparent;
  color: var(--song-editor-text-color);
  border-radius: .45rem;
  width: 100%;
  cursor: pointer;
  flex-direction: column;
  padding: .5rem .6rem;
  gap: .1rem;
  text-align: left;
  display: flex;
  border: 0;
}

.song-editor-v2-block-menu-header,
.song-editor-v2-block-command small {
  color: var(--song-editor-muted-color);
}

.song-editor-v2-block-menu-header {
  padding: .3rem .55rem;
  font-size: .78rem;
}

.song-editor-v2-block-command[data-selected="true"] {
  background: #f1f5f9;
}

.song-editor-v2-block-menu {
  width: 18rem;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  background: #ffffff;
  font: 500 .9rem/1.35 var(--song-editor-sans);
  padding: .4rem;
  z-index: 1000;
  position: fixed;
  box-shadow: 0 14px 34px rgba(15,23,42,.18);
  left: 0;
}

.song-editor-v2-block-plus {
  position: absolute;
  top: 50%;
  left: 1.85rem;
  width: 1.5rem;
  transform: translateY(-50%);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--song-editor-muted-color);
  font: 400 1.55rem/1 var(--song-editor-sans);
  cursor: pointer;
}

.song-editor-v2-role-palette {
  background: rgba(255,255,255,.98);
  max-width: calc(100vw - 16px);
  flex-wrap: wrap;
  padding: .35rem;
  gap: .3rem;
  z-index: 1000;
  display: flex;
  position: fixed;
  box-shadow: 0 10px 28px rgba(15,23,42,.2);
  align-items: center;
}

/* Shared popup frame. The block menu is anchored in the line; the role picker
   floats over the viewport, hence their separate positioning and shadows. */
.song-editor-v2-block-menu,
.song-editor-v2-role-palette {
  border: 1px solid var(--song-editor-border-color);
  border-radius: .65rem;
}

.song-editor-v2-floating-role-clear,
.song-editor-v2-floating-role-action,
.song-editor-v2-floating-role-new,
.song-editor-v2-floating-role-new-submit,
.song-editor-v2-floating-role-new-cancel {
  padding: .35rem .55rem;
  border: 1px solid transparent;
  border-radius: .4rem;
  font: 700 .78rem/1.2 var(--song-editor-sans);
  cursor: pointer;
}

/* Clear is neutral and outlined; part actions receive their assigned palette
   colours inline. Geometry is shared across each treatment. */
.song-editor-v2-floating-role-clear {
  border-color: var(--song-editor-border-color);
  background: #ffffff;
  color: #475569;
}

.song-editor-v2-pending-vocal-part-selection {
  background: rgba(59, 130, 246, .22) !important;
  box-shadow: inset 0 -2px #3b82f6;
  border-radius: .15rem;
}

.song-editor-v2-floating-role-new {
  border-color: #99f6e4;
  background: #f0fdfa;
  color: #115e59;
}

.song-editor-v2-floating-role-new-form {
  display: flex;
  align-items: center;
  gap: .3rem;
}

.song-editor-v2-floating-role-new-input {
  width: min(10rem, 38vw);
  border: 1px solid var(--song-editor-border-color);
  border-radius: .4rem;
  background: #ffffff;
  color: #0f172a;
  font: 500 .82rem/1.2 var(--song-editor-sans);
  padding: .35rem .5rem;
}

.song-editor-v2-floating-role-new-input:focus {
  border-color: #14b8a6;
  outline: 2px solid #99f6e4;
  outline-offset: 0;
}

.song-editor-v2-floating-role-new-submit {
  background: #0f766e;
  color: #ffffff;
}

.song-editor-v2-floating-role-new-cancel {
  border-color: var(--song-editor-border-color);
  background: #ffffff;
  color: #475569;
}