/* Déroulé des parties : une partie par ligne, commentaires toujours visibles */
.arrangement-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.arrangement-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 .6rem;
  padding: .2rem 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}
.arrangement-list li:last-child { border-bottom: 0; }
.arrangement-list-part { font-weight: 700; white-space: nowrap; }
.arrangement-list-note { font-style: italic; opacity: .85; overflow-wrap: anywhere; }

/* Colonne des vues band, chantre et projector */
.arrangement-side {
  position: fixed;
  top: var(--arrangement-top, 0px);
  right: 0;
  bottom: 0;
  z-index: 20;
  box-sizing: border-box;
  width: var(--arrangement-width, 240px);
  padding: .6rem .75rem .6rem 1rem;
  overflow-y: auto;
  background: color-mix(in oklab, Canvas, CanvasText 4%);
  border-left: 1px solid #8883;
}
.arrangement-side[hidden] { display: none; }

.arrangement-side-splitter {
  position: fixed;
  top: var(--arrangement-top, 0px);
  bottom: 0;
  right: calc(var(--arrangement-width, 240px) - 4px);
  width: 8px;
  cursor: col-resize;
  touch-action: none;
  background: color-mix(in oklab, Canvas, CanvasText 6%);
}
.arrangement-side-splitter:hover { background: color-mix(in oklab, Canvas, CanvasText 14%); }
body.arrangement-resizing { cursor: col-resize; user-select: none; -webkit-user-select: none; }

.arrangement-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .4rem;
}
.arrangement-side-close,
.arrangement-side-toggle { display: none; }
.arrangement-side-toggle[hidden] { display: none !important; }

/* Le cantique laisse la place à la colonne */
body.has-arrangement .page,
body.has-arrangement .wrap { margin-right: var(--arrangement-width, 240px); }
body.has-arrangement .band-footer { right: calc(var(--arrangement-width, 240px) + 12px); }
body.has-arrangement .footer { right: calc(var(--arrangement-width, 240px) + 1rem); }
body.has-arrangement .band-pip { right: calc(var(--arrangement-width, 240px) + .9rem); }

/* Téléphone : pas de colonne, un bouton affiche le déroulé par-dessus le cantique */
@media (max-width: 600px), (max-height: 600px) {
  body.has-arrangement .page,
  body.has-arrangement .wrap { margin-right: 0; }
  body.has-arrangement .band-footer { right: 12px; }
  body.has-arrangement .footer { right: 1rem; }
  body.has-arrangement .band-pip { right: .9rem; }

  .arrangement-side-splitter { display: none; }

  .arrangement-side {
    display: none;
    top: 0;
    z-index: 70;
    width: min(85vw, 340px);
    padding-left: .75rem;
    box-shadow: -4px 0 18px #0005;
  }
  .arrangement-side.is-open { display: block; }
  .arrangement-side[hidden] { display: none; }

  .arrangement-side-close {
    display: block;
    width: 2rem;
    height: 2rem;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
  }

  .arrangement-side-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: .75rem;
    bottom: 2rem;
    z-index: 60;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    border: 1px solid #8886;
    background: color-mix(in oklab, Canvas, CanvasText 6%);
    font-size: 1.3rem;
    cursor: pointer;
  }
}

@media print {
  .arrangement-side,
  .arrangement-side-toggle { display: none !important; }
  body.has-arrangement .page,
  body.has-arrangement .wrap { margin-right: 0; }
}