/* <score-script> — the look of the `scorescript/embed` element.
 *
 * Part of the `scorescript` npm package. A page themes the element through
 * these custom properties and never needs to know its inner structure:
 *
 *   --score-script-font            the source's typeface (monospace)
 *   --score-script-font-size       default 12.5px
 *   --score-script-line-height     default 1.7
 *   --score-script-code-background the source pane
 *   --score-script-code-color      the source text
 *   --score-script-paper           the engraving's page
 *   --score-script-ink             the engraving's notes
 *   --score-script-border          the frame's lines
 *   --score-script-accent          focus ring and the Reset button's hover
 *   --score-script-problem         the message under the element
 *   --score-script-radius          corner radius of the frame (default 0)
 *
 * Its parts, for a page that wants to go further: .score-script-frame,
 * .score-script-source, .score-script-input, .score-script-reset,
 * .score-script-paper, .score-script-message.
 */

score-script {
  --_font: var(--score-script-font, ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace);
  --_code-background: var(--score-script-code-background, #f6f8fa);
  --_code-color: var(--score-script-code-color, #1f2328);
  --_paper: var(--score-script-paper, #ffffff);
  --_ink: var(--score-script-ink, #111111);
  --_border: var(--score-script-border, #d0d7de);
  --_accent: var(--score-script-accent, #285ea2);
  --_problem: var(--score-script-problem, #b42318);
  --_radius: var(--score-script-radius, 0);
  display: block;
  container-type: inline-size;
  min-width: 0;
}

@media (prefers-color-scheme: dark) {
  score-script {
    --_code-background: var(--score-script-code-background, #181a1d);
    --_code-color: var(--score-script-code-color, #d5d9df);
    --_border: var(--score-script-border, #ffffff24);
    --_accent: var(--score-script-accent, #8bb8ee);
    --_problem: var(--score-script-problem, #ef7177);
  }
}

score-script .score-script-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  border-radius: var(--_radius);
  overflow: hidden;
}

score-script .score-script-source {
  position: relative;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--_border);
  border-radius: var(--_radius) var(--_radius) 0 0;
  background: var(--_code-background);
  overflow-x: auto;
}

score-script .score-script-source pre {
  margin: 0;
}

score-script .score-script-source code,
score-script .score-script-input {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--_code-color);
  font: 400 var(--score-script-font-size, 12.5px) / var(--score-script-line-height, 1.7) var(--_font);
  white-space: pre;
  tab-size: 2;
}

score-script .score-script-input {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 3lh;
  resize: none;
  overflow: auto hidden;
  outline: none;
  caret-color: var(--_accent);
}

score-script .score-script-source:has(.score-script-input:focus-visible) {
  box-shadow: inset 0 0 0 1px var(--_accent);
}

score-script .score-script-reset {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 3px 9px;
  border: 1px solid var(--_border);
  border-radius: 4px;
  background: var(--_code-background);
  color: var(--_code-color);
  font: 500 12px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
}

score-script .score-script-reset:hover,
score-script .score-script-reset:focus-visible {
  border-color: var(--_accent);
  outline: none;
}

score-script .score-script-reset[hidden] {
  display: none;
}

score-script .score-script-paper {
  min-width: 0;
  padding: clamp(14px, 1.6vw, 24px);
  border: 1px solid var(--_border);
  border-top: 0;
  border-radius: 0 0 var(--_radius) var(--_radius);
  background: var(--_paper);
  color: var(--_ink);
}

score-script .score-script-paper img {
  display: block;
  width: 100%;
  height: auto;
}

score-script .score-script-message {
  margin: 8px 0 0;
  color: var(--_problem);
  font: 400 12.5px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

score-script .score-script-message[hidden] {
  display: none;
}

score-script[layout="score"] .score-script-source {
  display: none;
}

/* The engraving first, its source under it: what a page wants when the music is
   the point and the text is the caption. */
score-script[layout="under"] .score-script-paper {
  order: 1;
  border-top: 1px solid var(--_border);
  border-radius: var(--_radius) var(--_radius) 0 0;
}

score-script[layout="under"] .score-script-source {
  order: 2;
  border-top: 0;
  border-radius: 0 0 var(--_radius) var(--_radius);
}

score-script[layout="score"] .score-script-paper {
  border-top: 1px solid var(--_border);
  border-radius: var(--_radius);
}

@container (min-width: 720px) {
  score-script[layout="beside"] .score-script-frame {
    grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  }
  score-script[layout="beside"] .score-script-source {
    border-radius: var(--_radius) 0 0 var(--_radius);
  }
  score-script[layout="beside"] .score-script-paper {
    border-top: 1px solid var(--_border);
    border-left: 0;
    border-radius: 0 var(--_radius) var(--_radius) 0;
  }
}