/* ==========================================================================
   JB AtlaZZ | Version 210 | css/editor.css
   Created by Dean Senecal and Sparky
   Purpose: ChordPro editor, preview and editing controls
   Documentation updated: 2026-10-20
   Original creation date: not independently verified
   Maintenance: edit the named sections; keep change history in README_VERSION_210.txt
   ========================================================================== */

/* --- Song editor layout ---
   Maintenance: Controls raw editor and formatted preview; save logic is in editor.js.
*/
/* --- Editor workspace ---
   Maintenance: selectors below control this part of the editor interface.
   Change dimensions/colors here; check media-query overrides before adjusting widths.
*/
#editor-root {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: none;
  background: #dbdbdb;
  font-family: Arial,Helvetica,sans-serif;
}

#editor-root.open {
  display: block;
}

/* --- Additional component styles ---
   Maintenance: selectors below control this part of the editor interface.
   Change dimensions/colors here; check media-query overrides before adjusting widths.
*/
.edit-screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.edit-header {
  min-height: 92px;
  margin: 5px 10px 0;
  padding: 10px 16px;
  border-radius: 7px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.edit-song-info {
  min-width: 220px;
}

.edit-title {
  font-size: 18px;
  font-weight: 700;
}

.edit-meta {
  margin-top: 4px;
  font-size: 11px;
}

.edit-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 11px;
}

.edit-controls label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.edit-controls select {
  height: 30px;
  border: 1px solid #aaa;
  border-radius: 6px;
  background: #3b8ed0;
  color: #fff;
  font-weight: 700;
  padding: 0 8px;
}

/* --- Editing inputs and preview ---
   Maintenance: selectors below control this part of the editor interface.
   Change dimensions/colors here; check media-query overrides before adjusting widths.
*/
.edit-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* --- Additional component styles ---
   Maintenance: selectors below control this part of the editor interface.
   Change dimensions/colors here; check media-query overrides before adjusting widths.
*/
.edit-track {
  position: relative;
  width: 38px;
  height: 20px;
  border-radius: 999px;
  background: #aaa;
}

.edit-track span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: .15s;
}

/* --- Editing inputs and preview ---
   Maintenance: selectors below control this part of the editor interface.
   Change dimensions/colors here; check media-query overrides before adjusting widths.
*/
.edit-switch input:checked + .edit-track {
  background: #3b8ed0;
}

.edit-switch input:checked + .edit-track span {
  transform: translateX(18px);
}

/* --- Additional component styles ---
   Maintenance: selectors below control this part of the editor interface.
   Change dimensions/colors here; check media-query overrides before adjusting widths.
*/
.edit-button {
  height: 32px;
  min-width: 72px;
  border: 0;
  border-radius: 6px;
  background: #555;
  color: #fff;
  font-weight: 700;
}

.edit-button.save {
  background: #2e7d32;
}

.edit-labels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 9px 14px 5px;
  color: #555;
  font-size: 11px;
  letter-spacing: .4px;
}

.edit-labels strong {
  padding-left: 8px;
}

/* --- Editor workspace ---
   Maintenance: selectors below control this part of the editor interface.
   Change dimensions/colors here; check media-query overrides before adjusting widths.
*/
.edit-split {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 10px 10px;
}

.edit-split>* {
  min-width: 0;
  border: 1px solid #aaa;
  border-radius: 6px;
  background: #fff;
}

.edit-split textarea {
  resize: none;
  padding: 16px;
  outline: none;
  font: 16px/1.35 Consolas,monospace;
  white-space: pre;
  overflow: auto;
}

/* --- Editing inputs and preview ---
   Maintenance: selectors below control this part of the editor interface.
   Change dimensions/colors here; check media-query overrides before adjusting widths.
*/
.edit-preview {
  padding: 16px;
  overflow: auto;
  font: 16px/1.35 Consolas,monospace;
  white-space: pre;
}

.edit-preview.cpro-preview {
  white-space: pre;
}

.preview-section {
  margin: 12px 0 5px;
  font-weight: 700;
  color: #2e7d32;
}

/* --- Additional component styles ---
   Maintenance: selectors below control this part of the editor interface.
   Change dimensions/colors here; check media-query overrides before adjusting widths.
*/
.col-row {
  min-height: 1.35em;
  margin-bottom: 3px;
}

/* --- Editing inputs and preview ---
   Maintenance: selectors below control this part of the editor interface.
   Change dimensions/colors here; check media-query overrides before adjusting widths.
*/
.col-chords {
  font-weight: 700;
  color: #245ca6;
  white-space: pre;
}

/* --- Additional component styles ---
   Maintenance: selectors below control this part of the editor interface.
   Change dimensions/colors here; check media-query overrides before adjusting widths.
*/
.col-lyrics {
  white-space: pre;
}

.edit-metadata {
  margin: 6px 10px 0;
  background: #f0f0f0;
  border: 1px solid #bbb;
  border-radius: 6px;
  padding: 6px 10px;
}

.edit-metadata summary {
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  color: #555;
}

.edit-metadata-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(120px,1fr));
  gap: 7px 10px;
  padding-top: 8px;
}

.edit-metadata-grid label {
  font-size: 10px;
  font-weight: 700;
  color: #555;
}

/* --- Editing inputs and preview ---
   Maintenance: selectors below control this part of the editor interface.
   Change dimensions/colors here; check media-query overrides before adjusting widths.
*/
.edit-metadata-grid input {
  display: block;
  width: 100%;
  height: 28px;
  margin-top: 3px;
  border: 1px solid #aaa;
  border-radius: 5px;
  padding: 0 7px;
  background: #fff;
  color: #111;
}

/* --- Additional component styles ---
   Maintenance: selectors below control this part of the editor interface.
   Change dimensions/colors here; check media-query overrides before adjusting widths.
*/
.edit-metadata-grid .meta-wide {
  grid-column: span 2;
}


/* --- Responsive editor ---
   Maintenance: Viewport-dependent layout changes.
*/
/* --- Responsive layout ---
   Maintenance: selectors below control this part of the editor interface.
   Change dimensions/colors here; check media-query overrides before adjusting widths.
*/
@media (max-width:900px) {
/* --- Additional component styles ---
   Maintenance: selectors below control this part of the editor interface.
   Change dimensions/colors here; check media-query overrides before adjusting widths.
*/
.edit-header {
  align-items: flex-start;
}

.edit-song-info {
  min-width: 160px;
}

/* --- Editor workspace ---
   Maintenance: selectors below control this part of the editor interface.
   Change dimensions/colors here; check media-query overrides before adjusting widths.
*/
.edit-split textarea,.edit-preview {
  font-size: 14px;
}

/* --- Additional component styles ---
   Maintenance: selectors below control this part of the editor interface.
   Change dimensions/colors here; check media-query overrides before adjusting widths.
*/
.edit-metadata-grid {
  grid-template-columns: repeat(2,1fr);
}
}