/* Tokens, the page column and the header come from ../shared/theme.css;
   this file holds only what is the page's own. Pages want all the room
   there is, so while music is open the column takes the whole window, and
   the page is exactly the window's height: the pages fill what the header
   leaves. The stand's own page is a list, and sits in a centered column. */

:root {
  --app-width: none;
}

button {
  font: inherit;
  color: inherit;
}

.app:not(.is-reading) {
  --app-width: 960px;
}

.app.is-reading {
  height: 100vh;
  height: 100dvh;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  gap: 12px;
}

/* --- the shelf: opening, and the music open ---------------------------------- */

.shelf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}

.tool,
.view {
  padding: 8px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.tool:disabled {
  cursor: default;
  opacity: 0.6;
}

.open-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
}

.open-button svg {
  display: block;
  flex: none;
}

.doc-title {
  flex: 1 1 12em;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edit-button,
.add-to-set,
.download-button,
.print-button {
  display: grid;
  place-items: center;
  padding: 8px 10px;
}

.download-button {
  color: inherit;
}

.save-state {
  font-size: 13px;
  color: var(--muted);
}

/* A set list being played: its name and where in it, between the entries either side. */
.set-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.set-prev {
  flex: none;
  padding: 6px 12px;
}

.set-where {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  overflow: hidden;
  white-space: nowrap;
}

.set-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.set-place {
  flex: none;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Where the entry ends, marked from where the reader is: lit where it ends on the pages showing. */
.set-ends {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.set-end {
  flex: none;
  padding: 6px 12px;
  font-size: 13px;
}

.set-end[aria-pressed='true'] {
  border-color: var(--accent);
  color: var(--accent);
}

.set-end-at {
  flex: none;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.set-end-clear {
  flex: none;
  padding: 2px 6px;
  background: none;
  border: 0;
  color: var(--muted);
  cursor: pointer;
}

.set-end-clear:hover {
  color: var(--ink);
}

/* Short of room, where the entry ends goes under the rest. */
@media (max-width: 800px) {
  .set-bar {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .set-ends {
    order: 1;
    flex-basis: 100%;
    justify-content: flex-end;
  }
}

.set-next {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 50%;
  display: flex;
  gap: 4px;
  padding: 6px 12px;
  white-space: nowrap;
}

.set-next-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Auto · 1 · 2, joined into one control like the language toggle. */
.view-pick {
  display: inline-flex;
  align-items: center;
}

.view {
  padding: 8px 12px;
  border-radius: 0;
  color: var(--muted);
}

.view + .view {
  border-left: 0;
}

.view:first-child {
  border-radius: 10px 0 0 10px;
}

.view:last-child {
  border-radius: 0 10px 10px 0;
}

.view.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.notice {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.notice.is-error {
  color: var(--danger);
}

.empty {
  margin: 8px 0 0;
  color: var(--muted);
}

/* --- how the stand works: a line under My scores, unfolding to the rest -------- */

.help {
  font-size: 14px;
  color: var(--muted);
}

.help-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  list-style: none;
  cursor: pointer;
}

.help-summary::-webkit-details-marker {
  display: none;
}

.help-more {
  color: var(--accent);
  white-space: nowrap;
}

.help-more::after {
  content: ' ›';
}

.help[open] .help-more::after {
  content: ' ⌄';
}

.help-summary:hover .help-more {
  text-decoration: underline;
}

/* Signed out it is the page's whole word, so nothing folds. */
.help.is-plain .help-summary {
  display: none;
}

.help.is-plain .empty {
  margin: 0;
}

/* --- the stand: the pages, and the way through them ------------------------- */

.stand {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg);
}

/* The pages' room, which clips them when they are pinched closer. The
   stand takes every touch on it — a pinch zooms the pages, not the site. */
.page-frame {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  touch-action: none;
}

/* Pinched, the pages are scaled as one, from their top left corner; their
   size in the layout is the frame's still, so nothing is engraved afresh. */
.pages {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transform-origin: 0 0;
}

.pages.is-zoomed {
  cursor: grab;
}

/* Paper is white whatever the page's theme: the music was printed on it. */
.pages canvas {
  display: block;
  background: #ffffff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.18);
}

/* A score is engraved on a page the shape of its share of the window, in
   black on white like the PDFs beside it. Its lines are drawn by sight
   reading's engraver, colored by ../shared/engraving.css. */
.score-page {
  --engraving: #000000;
  --staff: rgb(0 0 0 / 0.7);
  --muted: #555a63;
  flex: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
  color: #000000;
  background: #ffffff;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.18);
}

.score-page .system {
  display: block;
  flex: none;
  width: 100%;
  overflow: visible;
}

/* The engraver draws each bar a target to tap; here a tap turns the page. */
.score-page .bar-hit {
  fill: transparent;
}

/* Sizes are in staff spaces: the heading's font size is one. */
.score-heading {
  font-family: Georgia, "Times New Roman", "Noto Serif TC", serif;
}

.score-heading p {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.score-title {
  font-size: 3em;
  line-height: 1.6;
  text-align: center;
}

.score-subtitle {
  font-size: 1.6em;
  line-height: 1.5;
  text-align: center;
}

.score-composer {
  font-size: 1.5em;
  line-height: 1.6;
  text-align: right;
}

.pages.is-native {
  cursor: auto;
}

/* The browser's own viewer pinches for itself. */
.page-frame.is-native {
  touch-action: auto;
}

.native {
  width: 100%;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

/* The turns in the middle, under the music; what is set while playing at
   the end. Where the row is too narrow for both halves to match, the empty
   start gives way first, so the turns slide over rather than overlap. */
.turner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}

.turns {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 12px;
}

.turn {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 36px;
  padding: 0 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.turn:disabled {
  cursor: default;
  opacity: 0.4;
}

.turn svg {
  display: block;
}

/* The metronome, the view and full screen, at the row's end. */
.stand-tools {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* A score's size as a small and a large A, as sight reading has it, so the
   buttons read as type, not as the turns. */
.size-pick {
  display: flex;
  gap: 6px;
}

/* Set as a line of text, so the two As share a baseline, centered. */
.turn.size {
  display: inline-block;
  min-width: 40px;
  padding: 0 8px;
  font-size: 16px;
  line-height: 34px;
  text-align: center;
}

.size-a {
  font-size: 15px;
  font-weight: 700;
}

.size-a.is-small {
  font-size: 11px;
}

.fullscreen.is-active,
.ink-button.is-active,
.beat-more.is-active,
.view-more.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.page-count {
  min-width: 6em;
  white-space: nowrap;
  text-align: center;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* --- the metronome ---------------------------------------------------------------- */

/* Its button and the chevron to its dial, joined like Auto · 1 · 2. */
.beat-pick {
  display: flex;
}

.beat-pick .turn {
  border-radius: 0;
}

.beat-pick .turn:first-child {
  border-radius: 10px 0 0 10px;
}

.beat-pick .turn:last-child {
  border-left: 0;
  border-radius: 0 10px 10px 0;
}

.beat-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  --pulse: 0;
}

.beat-toggle.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

.beat-more {
  min-width: 30px;
  padding: 0 8px;
}

.beat-more svg {
  transition: transform 0.15s;
}

.beat-more.is-active svg {
  transform: rotate(180deg);
}

/* The beat, seen: a light in the button's corner, flashing on each click
   from the times they were booked at — brightest on the downbeat. */
.beat-light {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: calc(var(--pulse) * 0.75);
  pointer-events: none;
}

.beat-toggle.is-downbeat .beat-light {
  opacity: var(--pulse);
  transform: scale(1.4);
}

.beat-toggle.is-sub .beat-light {
  opacity: calc(var(--pulse) * 0.35);
}

/* The dial opens over the pages' bottom corner, above the row it came from. */
.stand {
  position: relative;
}

.beat-panel,
.mark-panel,
.view-panel {
  position: absolute;
  right: 0;
  bottom: 48px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(20rem, 100%);
  box-sizing: border-box;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 4px 18px rgb(0 0 0 / 0.18);
}

.stand:fullscreen .beat-panel,
.stand.is-filling .beat-panel,
.stand:fullscreen .mark-panel,
.stand.is-filling .mark-panel,
.stand:fullscreen .view-panel,
.stand.is-filling .view-panel {
  right: calc(8px + env(safe-area-inset-right, 0px));
  bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}

.beat-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nudge {
  min-width: 36px;
  height: 32px;
  padding: 0 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.nudge:disabled {
  cursor: default;
  opacity: 0.4;
}

.beat-readout {
  flex: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.beat-unit-note {
  align-self: center;
  margin-right: 2px;
}

.beat-unit-note:empty {
  display: none;
}

/* Drawn as sight reading draws it beside its tempo, a size up to stand by
   the larger number. */
.beat-unit-note svg {
  display: block;
  width: auto;
  height: 26px;
}

.beat-value {
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.beat-unit {
  font-size: 12px;
  color: var(--muted);
}

.beat-from {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.beat-from-name {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.beat-from-leave {
  font-size: 13px;
}

.beat-marking {
  margin: -6px 0 0;
  text-align: center;
  font-size: 13px;
  font-style: italic;
  color: var(--muted);
}

.beat-slider,
.beat-volume {
  flex: 1;
  min-width: 0;
  accent-color: var(--accent);
}

/* Tapped again and again: a quick pair is neither a selection of its word
   nor a zoom. */
.beat-tap {
  padding: 6px 14px;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.beat-label {
  flex: 1;
  font-size: 13px;
  color: var(--muted);
}

.beats-value {
  min-width: 1.6em;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Beat · eighths · triplets · sixteenths, each drawn as its rhythm. */
.beat-subs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.beat-sub {
  display: grid;
  place-items: center;
  height: 34px;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--muted);
  cursor: pointer;
}

.beat-sub + .beat-sub {
  border-left: 0;
}

.beat-sub:first-child {
  border-radius: 8px 0 0 8px;
}

.beat-sub:last-child {
  border-radius: 0 8px 8px 0;
}

.beat-sub.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* The rhythms and the beat's note are drawn in the color of their button. */
.beat-panel .icon-fill {
  fill: currentColor;
}

/* --- writing on a PDF's pages ----------------------------------------------------- */

/* Each page is its canvas with its marks over it, drawn in the page's own
   points; the marks take no touches, which go to the page under them. */
.pdf-page {
  position: relative;
  flex: none;
}

/* Halfway through a turn by halves, the next page's top half lies over this
   one's bottom half, a rule between them where the one gives way to the
   other. Each half is a window on its page, drawn whole behind it. */
.half-turn {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.half {
  position: relative;
  flex: none;
  overflow: hidden;
}

/* Two at a time, halfway through a turn by halves, the next view's first
   page takes the left side while the right is still being played: a bar
   over it says it is the one coming. */
.is-ahead {
  position: relative;
}

.is-ahead::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
  height: 4px;
  background: var(--accent);
  pointer-events: none;
}

.half.is-top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgb(0 0 0 / 0.35);
  pointer-events: none;
}

.ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ink path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A highlighter's yellow lies under the printed ink, as on paper. */
.ink-highlight {
  mix-blend-mode: multiply;
}

.pages.is-inking {
  cursor: crosshair;
  -webkit-touch-callout: none;
}

/* The pens, above the pages while writing: a room of their own, so they
   cover none of the music. */
.ink-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ink-pens {
  display: flex;
  gap: 4px;
}

.ink-pen.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* Each pen is its color; the paper is white whatever the theme, so each
   has a ring to be seen by on a dark one. */
.ink-swatch {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--pen);
  box-shadow: 0 0 0 1px var(--line);
}

.ink-swatch.is-wide {
  width: 18px;
  height: 10px;
  border-radius: 3px;
  opacity: 0.8;
}

.ink-bar .tool {
  height: 36px;
  padding: 0 12px;
}

.ink-clear.is-keeping,
.ink-bar .ink-clear-confirm {
  font-size: 14px;
  font-weight: 600;
}

.ink-bar .ink-clear-confirm {
  border-color: var(--danger);
  color: var(--danger);
}

.ink-done {
  margin-left: auto;
}

.ink-bar .ink-done {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.stand:fullscreen .ink-bar,
.stand.is-filling .ink-bar {
  padding: calc(6px + env(safe-area-inset-top, 0px)) calc(8px + env(safe-area-inset-right, 0px)) 6px
    calc(8px + env(safe-area-inset-left, 0px));
}

/* --- the size, and the pages at once ------------------------------------------- */

/* Two pages and the chevron to the panel, like the metronome's. */
.view-more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 8px;
}

.view-more svg + svg {
  transition: transform 0.15s;
}

.view-more.is-active svg + svg {
  transform: rotate(180deg);
}

.view-panel {
  width: auto;
  min-width: min(16rem, 100%);
}

.copy-panel {
  width: min(22rem, 100%);
}

.copy-text {
  margin: 0;
  line-height: 1.45;
}

.copy-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.view-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.view-label {
  font-size: 13px;
  color: var(--muted);
}

/* --- bookmarks ------------------------------------------------------------------- */

/* The page count is the way to them; its ribbon is filled, and in the
   accent, where the page showing is bookmarked. */
.page-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 0 8px;
  background: none;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
}

.page-mark:hover,
.page-mark.is-active {
  border-color: var(--line);
  background: var(--panel);
}

.page-mark svg {
  flex: none;
}

.page-mark.is-marked svg {
  color: var(--accent);
}

.page-mark.is-marked .mark-ribbon {
  fill: currentColor;
}

/* Over the pages, centered above the count it came from. */
.mark-panel {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  max-height: calc(100% - 64px);
  overflow-y: auto;
}

.stand:fullscreen .mark-panel,
.stand.is-filling .mark-panel {
  right: auto;
}

.mark-toggle.is-active,
.mark-end.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

.mark-empty {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.mark-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mark-list:empty {
  display: none;
}

.mark-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Its grip, to drag it to another place in the list; a saved score's too, and its bookmarks', in My scores. */
.mark-grip,
.library-grip,
.library-mark-grip {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 32px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--muted);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.mark-grip:hover,
.library-grip:hover,
.library-mark-grip:hover {
  color: var(--ink);
}

/* Dragged, it is lifted out of the rest, and the list is held still under it. */
.is-sorting {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

.is-sorting * {
  cursor: grabbing;
}

.mark-item.is-dragging,
.library-item.is-dragging,
.library-mark-item.is-dragging {
  opacity: 0.6;
}

.mark-item.is-dragging .mark-go {
  border-color: var(--accent);
  border-style: dashed;
}

.mark-dial {
  white-space: nowrap;
}

/* The bookmark whose dial the metronome is at. */
.mark-item.is-dialled .mark-place {
  color: var(--accent);
}

/* The page showing: its bookmark marked in the list. */
.mark-item.is-here .mark-go {
  border-color: var(--accent);
  color: var(--accent);
}

.mark-go {
  flex: none;
  min-width: 2.2em;
  height: 32px;
  padding: 0 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.mark-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mark-name {
  width: 100%;
  box-sizing: border-box;
  padding: 3px 6px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  color: inherit;
}

.mark-name:hover,
.mark-name:focus {
  border-color: var(--line);
  background: var(--bg);
}

.mark-place {
  padding: 0 7px;
  font-size: 12px;
  color: var(--muted);
}

/* Where what is played from it ends, to be let go back to the score's end. */
.mark-end-clear {
  padding: 0 4px;
  background: none;
  border: 0;
  font: inherit;
  color: var(--muted);
  cursor: pointer;
}

.mark-end-clear:hover {
  color: var(--ink);
}

.mark-remove {
  flex: none;
  width: 28px;
  height: 28px;
  background: none;
  border: 0;
  border-radius: 6px;
  font-size: 18px;
  color: var(--muted);
  cursor: pointer;
}

/* --- going anywhere in a long score --------------------------------------------------- */

/* Back to where the last jump left, just before the turns, in the room the
   row's empty start leaves; on a phone, over the pages' corner (below). */
.page-back {
  grid-column: 1;
  justify-self: end;
  display: inline-flex;
  gap: 4px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

/* The slider through the pages, where it is held over it, and the field
   for a page's or bar's number beside that. */
.mark-scrub {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.mark-scrub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.mark-scrub-place {
  min-width: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.mark-scrub-place.is-scrubbing {
  font-weight: 600;
  color: var(--accent);
}

.mark-goto {
  flex: none;
  display: flex;
  gap: 4px;
}

.mark-goto-input {
  width: 4.5em;
  height: 32px;
  box-sizing: border-box;
  padding: 0 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: inherit;
}

.mark-goto-input[aria-invalid='true'] {
  border-color: var(--danger);
}

.mark-goto-button {
  padding: 0 10px;
}

/* The bookmarks are ticked under the slider, at their pages: the thumb's
   centre runs a thumb's width short of the track's ends. */
.mark-scrub-track {
  --thumb: 16px;
  position: relative;
  padding-bottom: 6px;
}

.mark-scrub-range {
  display: block;
  width: 100%;
  margin: 0;
  accent-color: var(--accent);
}

.mark-scrub-ticks {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  pointer-events: none;
}

.mark-scrub-tick {
  position: absolute;
  top: 0;
  left: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--at));
  width: 2px;
  height: 6px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--accent);
}

/* The sections the score names itself, under the bookmarks. */
.mark-outline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.mark-outline-title {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.mark-outline-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.outline-go {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 4px 6px;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  text-align: start;
  color: inherit;
  cursor: pointer;
}

.outline-go:hover {
  border-color: var(--line);
  background: var(--bg);
}

.outline-go.is-nested {
  padding-inline-start: 20px;
}

/* The section the pages showing are in. */
.outline-go.is-here {
  border-color: var(--accent);
  color: var(--accent);
}

.outline-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.outline-place {
  flex: none;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* A phone's width holds the turns and bookmarks, the metronome, the view
   and full screen, closer set, the metronome's button keeping its icon and
   letting the tempo go. */
@media (max-width: 420px) {
  .turner,
  .turns,
  .stand-tools {
    gap: 4px;
  }

  .page-count {
    min-width: 3.2em;
  }

  .turn {
    min-width: 32px;
    padding: 0 6px;
  }

  .beat-more,
  .view-more {
    min-width: 24px;
    padding: 0 5px;
  }

  .page-mark {
    gap: 2px;
    padding: 0 3px;
  }

  /* No room left in the row: Back stands over the pages' corner above it. */
  .page-back {
    position: absolute;
    left: 8px;
    bottom: 48px;
    z-index: 1;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
  }

  .ink-bar,
  .ink-pens {
    gap: 4px;
  }

  .ink-bar .tool {
    padding: 0 10px;
  }

  .beat-tempo {
    display: none;
  }
}

/* The narrowest phones: closer still. */
@media (max-width: 340px) {
  .turns {
    gap: 4px;
  }

  /* A hair closer at the end, to make room for the pen. */
  .turner,
  .stand-tools {
    gap: 3px;
  }

  .page-count {
    min-width: 0;
  }

  .turn {
    min-width: 28px;
    padding: 0 5px;
  }

  .beat-toggle {
    padding: 0 5px;
  }

  .beat-more,
  .view-more {
    min-width: 22px;
    padding: 0 4px;
  }

  .page-mark {
    padding: 0 1px;
  }
}

/* Full screen, the stand is the screen, and the pages all of it: no air at
   the edges, and a hair between two. Its ground is paper, so a page drawn
   to the screen's height, narrower than it, runs on to the edges in white
   rather than standing between dark bars. Where the browser will not give
   a page the screen — an iPhone — the stand covers the window instead, all
   of it the browser leaves. */
.stand:fullscreen {
  padding: 0;
  gap: 0;
  background: #ffffff;
}

.stand:-webkit-full-screen {
  padding: 0;
  gap: 0;
  background: #ffffff;
}

.stand.is-filling {
  position: fixed;
  inset: 0;
  z-index: 2;
  padding: 0;
  gap: 0;
  background: #ffffff;
}

.stand:fullscreen .pages,
.stand.is-filling .pages {
  gap: 2px;
}

/* On a paper ground a page needs no shadow to stand out by: it would only
   draw a grey line down either side of it. */
.stand:fullscreen .pages canvas,
.stand.is-filling .pages canvas,
.stand:fullscreen .score-page,
.stand.is-filling .score-page {
  box-shadow: none;
}

/* The row lies over the pages' foot, out of sight until it is wanted; the
   music shows between its buttons, and a tap there still turns. */
.stand:fullscreen .turner,
.stand.is-filling .turner {
  position: absolute;
  left: calc(8px + env(safe-area-inset-left, 0px));
  right: calc(8px + env(safe-area-inset-right, 0px));
  bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}

.stand.is-showing-row .turner {
  opacity: 1;
}

.stand.is-showing-row .turner button {
  pointer-events: auto;
}

/* The page count has no box of its own, so over the paper it is given one. */
.stand:fullscreen .page-mark,
.stand.is-filling .page-mark {
  border-color: var(--line);
  background: var(--panel);
}

/* --- the account's scores ---------------------------------------------------------------- */

.library {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.library-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.library-title {
  margin: 0;
  font-size: 16px;
}

/* Signed in, My scores and the set lists are tabs, the heading theirs. */
.library-tabs {
  display: flex;
  gap: 4px;
}

.library-tab {
  padding: 4px 8px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.library-tab:hover {
  color: var(--ink);
}

.library-tab[aria-selected='true'] {
  border-bottom-color: var(--accent);
  color: var(--ink);
}

/* Edit, beside Open music, at the heading's end. */
.library-edit-toggle {
  margin-left: auto;
}

.library-edit-toggle.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.library-sign-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.library-sign-in-text {
  flex: 1 1 16em;
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.library-empty,
.library-offline {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.library-list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.library-list:empty {
  display: none;
}

.library-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 6px 4px 4px;
}

.library-item + .library-item {
  border-top: 1px solid var(--line);
}

/* It takes what the buttons leave, never more, so a long title is cut short
   rather than pushing them onto a line of their own. */
.library-open {
  flex: 1 1 0;
  color: inherit;
  text-decoration: none;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  background: none;
  border: 0;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
}

.library-open:hover:not([aria-disabled='true']) {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.library-open[aria-disabled='true'] {
  cursor: default;
  opacity: 0.6;
}

.library-item.is-open .library-open {
  color: var(--accent);
  font-weight: 600;
}

.library-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Short of room, the title is cut before its composer. */
.library-composer {
  flex: 0 0 auto;
  max-width: 12em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--muted);
}

.library-size {
  flex: none;
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
}

.library-add,
.library-edit,
.library-remove {
  flex: none;
  min-width: 32px;
  padding: 4px 8px;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
}

.library-add,
.library-edit {
  display: grid;
  place-items: center;
  align-self: stretch;
}

.library-add:hover:enabled,
.library-edit:hover:enabled,
.library-remove:hover:enabled {
  border-color: var(--line);
  color: var(--ink);
}

.library-remove.is-confirming,
.library-keep {
  flex: none;
  align-self: center;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.library-remove.is-confirming,
.library-remove.is-confirming:hover:enabled {
  border-color: var(--danger);
  color: var(--danger);
}

.library-keep {
  background: none;
  color: var(--ink);
}

.library-keep:hover {
  border-color: var(--ink);
}

/* How many bookmarks a score has, with a chevron: shows them under it, or folds them away. */
.library-fold {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: center;
  padding: 4px 6px 4px 8px;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.library-fold svg:first-child {
  color: var(--accent);
}

.library-fold:hover {
  border-color: var(--line);
  color: var(--ink);
}

.library-fold .chevron {
  transition: transform 0.15s;
}

.library-fold[aria-expanded='true'] .chevron {
  transform: rotate(180deg);
}

/* A saved score's bookmarks, under it, a row each, set in from its title: each opens it there. */
.library-marks {
  flex: 1 0 100%;
  display: flex;
  flex-direction: column;
  margin: -4px 0 0;
  padding: 0 0 6px 22px;
  list-style: none;
}

.library-mark-item {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.library-mark {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.library-mark svg {
  flex: none;
  align-self: center;
  color: var(--accent);
}

.library-mark:hover:not([aria-disabled='true']) {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.library-mark[aria-disabled='true'] {
  cursor: default;
  opacity: 0.6;
}

.library-mark-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Where it is, when it has a name, and its dial: after the name, at the row's end. */
.library-mark-place {
  flex: none;
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

/* Being edited: its name to type, and its ×. */
.library-mark-rename {
  flex: 1 1 8em;
  min-width: 0;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.library-mark-remove {
  flex: none;
  min-width: 32px;
  padding: 2px 8px;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
}

.library-mark-remove:hover {
  border-color: var(--line);
  color: var(--ink);
}

/* A bookmark's way into a set list, being edited: smaller, as its row is. */
.library-mark-item .library-add {
  min-width: 28px;
  padding: 2px 6px;
}

/* --- the set lists, beside My scores ------------------------------------------------- */

.setlists {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.setlists-list {
  align-self: stretch;
}

/* New set list, under them: a row still to be filled. */
.setlists-new {
  border-style: dashed;
  color: var(--muted);
}

.setlists-new:hover:enabled {
  color: var(--ink);
}

.setlist-item .library-fold:disabled {
  cursor: default;
  opacity: 0.6;
}

/* Kept on this device, every score in it: lit while kept, pulsing while its files come. */
.setlist-keep {
  flex: none;
  display: grid;
  place-items: center;
  align-self: center;
  min-width: 32px;
  padding: 4px 8px;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
}

.setlist-keep:hover {
  border-color: var(--line);
  color: var(--ink);
}

.setlist-keep[aria-pressed='true'] {
  color: var(--accent);
}

.setlist-keep.is-keeping svg {
  animation: keeping 1.2s ease-in-out infinite;
}

@keyframes keeping {
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .setlist-keep.is-keeping svg {
    animation: none;
  }
}

/* Its name, being edited, typed in place. */
.setlist-rename {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}

/* Its entries, numbered in the order they are played. */
.setlist-number {
  flex: none;
  min-width: 1.4em;
  font-size: 13px;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.setlist-entry.is-current .library-mark {
  color: var(--accent);
  font-weight: 600;
}

.setlist-entry-label {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 10px;
  font-size: 14px;
}

.setlist-entry-label.is-gone,
.setlist-entry .library-mark[aria-disabled='true'] .library-mark-name {
  color: var(--muted);
  font-style: italic;
}

/* --- adding to a set list: in the account dialog's look -------------------------------- */

.adder-what {
  margin: 4px 0 0;
  color: var(--muted);
}

.adder-starts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.adder-start {
  padding: 6px 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.adder-start[aria-checked='true'] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.adder-lists {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 50vh;
  overflow-y: auto;
}

.adder-list {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.adder-list + .adder-list {
  border-top: 1px solid var(--line);
}

.adder-list-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.adder-list-count {
  flex: none;
  font-size: 13px;
  color: var(--muted);
}

.adder-add {
  flex: none;
  padding: 6px 14px;
}

/* Too narrow for a piece on one line, it takes two, its title and composer
   over its kind and size, with its bookmarks' count beside it — and being
   edited, its grip at its start and the pencil and × at its end. */
@media (max-width: 600px) {
  .library-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 4px;
  }

  .library-list.is-editing .library-item {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
  }

  /* A set list keeps its way onto the device beside its count. */
  .library-list:not(.is-editing) .setlist-item {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  /* With no bookmarks to count, the title and the buttons keep their columns. */
  .library-list.is-editing .library-open {
    grid-column: 2;
  }

  .library-list.is-editing .library-item > .library-add {
    grid-column: 4;
  }

  .library-list.is-editing .library-edit,
  .library-list.is-editing .library-remove.is-confirming {
    grid-column: 5;
  }

  .library-list.is-editing .library-remove,
  .library-list.is-editing .library-keep {
    grid-column: 6;
  }

  /* A set list's name, being edited, has the title's column. */
  .library-list.is-editing .setlist-rename {
    grid-column: 2;
  }

  .library-list.is-editing .setlist-item > .library-fold {
    grid-column: 3;
  }

  .library-open {
    flex-wrap: wrap;
    row-gap: 2px;
  }

  .library-size {
    flex-basis: 100%;
    margin-left: 0;
  }

  .library-marks {
    grid-column: 1 / -1;
    padding-left: 12px;
  }

  /* A bookmark being edited: where it is, and its dial, under its name. */
  .library-list.is-editing .library-mark-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0 6px;
    padding-bottom: 4px;
  }

  .library-list.is-editing .library-mark-item:not(.setlist-entry) {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }

  .library-list.is-editing .library-mark-item:not(.setlist-entry) .library-mark-place {
    grid-row: 2;
    grid-column: 2;
    margin-left: 9px;
  }

  /* An entry being edited keeps its line. */
  .library-list.is-editing .setlist-entry {
    display: flex;
  }

  /* An entry's piece and pages, under its name, so a bookmark's name is not cut short. */
  .setlist-entry .library-mark,
  .setlist-entry-label {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 8px;
  }

  .setlist-entry .library-mark-place {
    grid-row: 2;
    grid-column: 2;
    margin-left: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .setlist-entry .library-mark-place:empty {
    display: none;
  }

  /* On a phone, the set list's name and the next entry share the row. */
  .set-where,
  .set-next {
    flex: 1 1 0;
    max-width: none;
  }

  .library-list.is-editing .library-marks {
    margin-top: 0;
  }
}

/* --- a score's credits ------------------------------------------------------------- */

.score-credits {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.score-credits a {
  color: inherit;
}

/* --- dropping a file ------------------------------------------------------------ */

.drop-veil {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--bg) 85%, transparent);
  border: 3px dashed var(--accent);
  pointer-events: none;
}

.drop-hint {
  font-size: 20px;
  font-weight: 700;
}

/* --- on paper ------------------------------------------------------------------ */

/* Printed, the music alone, a page to a sheet: the shell sets the sheets in
   .print-sheets and the paper in an @page rule of its own — a PDF's own size
   edge to edge, or for a score whatever is in the printer, the sheet keeping
   its margin. Never on screen. */
.print-sheets {
  display: none;
}

@media print {
  .has-print body {
    background: #ffffff;
  }

  .has-print body > :not(.print-sheets) {
    display: none !important;
  }

  .has-print .print-sheets {
    display: block;
  }

  /* Its size is set by the shell; a sheet a hair over the paper would push a
     blank one after it, so what overflows is cut. */
  .print-sheet {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
    margin: 0 auto;
    overflow: hidden;
    break-after: page;
    break-inside: avoid;
  }

  .print-sheet:last-child {
    break-after: auto;
  }

  .print-sheet img,
  .print-sheet canvas {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .print-sheet .score-page {
    box-shadow: none;
  }
}