/* The Drums dock (drums.js): one screen. The target (what it edits and
   where that plays) on top, the groove library on the left, the pattern in
   the middle, the song's drum clips below, and the song drummer folded
   under them.

   The song drummer (groove | sections | write) is laid out by the room the
   dock gives it (container queries):
   - wide: side by side, each scrolling on its own;
   - medium: the groove on the left, the sections over Write on the right;
   - narrow (a phone): one column, in order, the panel scrolling. */

.drums {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  container-type: size;
  container-name: drums;
}
/* ---------------------------------------------------------------- the screen */

.drums-screen {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "target target"
    "lib pattern"
    "map map";
  /* The dock's height, but never so short the pattern has no room: the
     panel scrolls instead (the song drummer's header follows below). */
  height: max(calc(100% - 34px), 340px);
  min-height: 0;
}
.drums.arranging .drums-screen {
  height: 420px;
}
.drums-target {
  grid-area: target;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 235, 190, 0.04), transparent);
}
.drums-target-pick .select {
  max-width: 240px;
  font-weight: 600;
}
.drums-where {
  font-size: 11.5px;
  color: var(--champagne);
}
.drums-where.none {
  color: var(--muted);
  font-style: italic;
}
.drums-badge {
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  font: 600 10px/1.4 var(--mono);
  color: var(--gold);
  white-space: nowrap;
}
.drums-target .drums-actions {
  align-items: center;
}
/* The target's clip runs into another time signature. */
.drums-cross {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}
.drums-busy {
  font-size: 10.5px;
  color: var(--gold-hi);
  animation: pulse 1.2s ease-in-out infinite;
}

/* The groove library. */
.drums-lib {
  grid-area: lib;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, #17141b, #0f0d12);
}
.drums-search {
  position: relative;
  display: flex;
  align-items: center;
  padding: 8px 10px 6px;
}
.drums-search > .glyph {
  position: absolute;
  left: 18px;
  width: 13px;
  height: 13px;
  color: var(--dim);
  pointer-events: none;
}
.drums-search .text-input {
  height: 26px;
  padding-left: 28px;
}
.drums-lib-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 6px 10px;
}
.drums-lib-style {
  margin: 8px 6px 3px;
  font: 600 9px/1 var(--sans);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}
.drums-lib-other {
  margin: 14px 6px 2px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 10px;
  font-style: italic;
  color: var(--muted);
}
.drums-lib-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 2px 2px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
}
.drums-lib-item:hover {
  background: rgba(212, 175, 55, 0.07);
  border-color: var(--line);
}
.drums-lib-item.on {
  background: linear-gradient(90deg, rgba(212, 175, 55, 0.18), rgba(212, 175, 55, 0.03));
  border-color: var(--line-2);
}
.drums-lib-item.on .drums-lib-name {
  color: var(--gold-hi);
}
.drums-lib-item.misfit {
  opacity: 0.4;
  cursor: not-allowed;
}
.drums-lib-item .btn {
  width: 22px;
  height: 22px;
  flex: none;
}
.drums-lib-item .btn .glyph {
  width: 11px;
  height: 11px;
}
.drums-lib-item.trying .btn {
  color: var(--gold-hi);
  border-color: var(--line-3);
}
.drums-lib-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
}
.drums-lib-meta {
  flex: none;
  font: 500 9.5px/1 var(--mono);
  color: var(--dim);
}

/* The pattern. */
.drums-pattern {
  grid-area: pattern;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 10px 14px 14px;
  overflow: auto;
}
.drums-pattern-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.drums-pattern-groove {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin-right: 6px;
}
.drums-seg {
  display: flex;
}
.drums-seg button {
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--line-2);
  border-left-width: 0;
  background: var(--ob-1);
  color: var(--text);
  font-size: 11px;
  white-space: nowrap;
}
.drums-seg button:first-child {
  border-left-width: 1px;
  border-radius: 6px 0 0 6px;
}
.drums-seg button:last-child {
  border-radius: 0 6px 6px 0;
}
.drums-seg button:hover {
  color: var(--gold-hi);
}
.drums-seg button.on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 34%, var(--ob-1)), var(--ob-1));
  color: var(--gold-hi);
  border-color: var(--line-3);
}
.drums-pattern-grid .drums-row {
  height: 16px;
}
.drums-pattern-grid .drums-cell {
  min-width: 5px;
  height: 12px;
}
.drums-pattern-grid .drums-cell.bar {
  margin-left: 7px;
}

/* The song. */
.drums-map {
  grid-area: map;
  padding: 6px 12px 8px;
  border-top: 1px solid var(--line);
}
.drums-map-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.drums-map-lanes {
  position: relative;
  padding-top: 14px;
  cursor: pointer;
}
.drums-map-ruler {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 12px;
}
.drums-map-bar {
  position: absolute;
  top: 0;
  padding-left: 2px;
  border-left: 1px solid var(--line-2);
  font: 500 9px/12px var(--mono);
  color: var(--dim);
}
.drums-map-lane {
  position: relative;
  height: 22px;
  margin-top: 2px;
  border-radius: 4px;
  background: var(--ob-0);
}
.drums-map-clip {
  position: absolute;
  top: 1px;
  bottom: 1px;
  min-width: 3px;
  padding: 0 4px;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  background: linear-gradient(180deg, #6d2c38, #4a1d26);
  font: 600 9.5px/19px var(--sans);
  color: var(--ivory);
  white-space: nowrap;
  text-overflow: ellipsis;
}
.drums-map-clip:hover {
  filter: brightness(1.25);
}
.drums-map-clip.on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 70%, #6d2c38), #5b3a12);
  border-color: var(--gold-hi);
  color: #1a1206;
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);
}
.drums-map-cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--gold-hi);
  box-shadow: 0 0 6px var(--gold);
  pointer-events: none;
}

/* The song drummer, folded under the song. */
.drums-arrange {
  border-top: 1px solid var(--line-2);
}
.drums-arrange-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  height: 34px;
  padding: 8px 12px 0;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
}
.drums-arrange-head .drums-title {
  font-size: 14px;
}
.drums-arrange-head .drums-sub {
  overflow: hidden;
  text-overflow: ellipsis;
}
.drums-arrange-start {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 12px 14px;
}
.drums-flow {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) 240px;
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "groove sections write";
  height: 420px;
  min-height: 0;
  border-top: 1px solid var(--line);
}
.drums-groove {
  grid-area: groove;
}
.drums-sections {
  grid-area: sections;
}
.drums-write {
  grid-area: write;
}
.drums-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 12px 12px 14px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
}
.drums-step:last-child {
  border-right: none;
}
.drums-groove {
  background: linear-gradient(180deg, #17141b, #0f0d12);
}

.drums-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.drums-title {
  font: italic 600 17px/1.1 var(--serif);
  color: var(--gold-hi);
}
.drums-sub {
  font-size: 10.5px;
  color: var(--muted);
}
.drums-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
}
.drums-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.drums-label {
  font: 600 9.5px/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.drums-field .select {
  max-width: 100%;
}
.drums-opts {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
}
.drums-stepper {
  display: flex;
  align-items: center;
  gap: 4px;
}
.drums-num {
  min-width: 2.6em;
  text-align: center;
  font: 600 12px/1 var(--mono);
  color: var(--champagne);
}

/* ---------------------------------------------------------------- groove */

.drums-pick {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.drums-pick .drums-field {
  flex: 1;
}
.drums-nav {
  display: flex;
  gap: 4px;
}
.drums-info {
  font: 500 10.5px/1.3 var(--mono);
  color: var(--champagne);
}
.drums-info.warn {
  color: var(--rose);
}
.drums-grids {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.drums-grid-title {
  font: 600 9.5px/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-mid);
  margin-bottom: 4px;
}
.drums-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 14px;
}
.drums-role {
  flex: none;
  width: 68px;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drums-cells {
  flex: 1;
  display: flex;
  gap: 2px;
  min-width: 0;
}
.drums-cell {
  flex: 1;
  height: 10px;
  border-radius: 2px;
  background: var(--ob-3);
}
.drums-cell {
  cursor: pointer;
}
.drums-cell:hover {
  outline: 1px solid var(--line-3);
}
.drums-cell.beat {
  margin-left: 3px;
  background: var(--ob-4);
}
.drums-cell.acc {
  background: var(--gold);
  box-shadow: 0 0 6px rgba(212, 175, 55, 0.4);
}
.drums-cell.hit {
  background: var(--gold-mid);
}
.drums-cell.ghost {
  background: var(--gold-lo);
}
.drums-cell.feather {
  background: #4a3c1d;
}

.drums-edited {
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--rose-deep);
  color: var(--ivory);
  letter-spacing: 0.06em;
}
.select.drums-add {
  margin-top: 4px;
  max-width: 140px;
  height: 22px;
  font-size: 10.5px;
}

/* ---------------------------------------------------------------- sections */

.drums-strip {
  flex: none;
  display: flex;
  gap: 3px;
  min-height: 54px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.drums-sec {
  min-width: 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  padding: 6px 7px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--lacquer);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.drums-sec.play-b {
  background: linear-gradient(180deg, #2a2213, #17130b);
}
.drums-sec.play-hits,
.drums-sec.play-count {
  background: linear-gradient(180deg, #2a1820, #170e12);
}
.drums-sec.play-rest {
  background: var(--ob-1);
  color: var(--dim);
}
.drums-sec.on {
  border-color: var(--gold);
  box-shadow: var(--glow);
}
.drums-sec-name {
  font: 600 11px/1.1 var(--sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drums-sec-meta {
  font: 500 10px/1 var(--mono);
  color: var(--champagne);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drums-edit {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ob-2);
}
.drums-name {
  width: 120px;
}
.drums-sec-acts {
  margin-left: auto;
}

/* ---------------------------------------------------------------- write */

.drums-kept {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.drums-kept-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--champagne);
}
.drums-kept-row.gone {
  color: var(--dim);
}
.drums-status {
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted);
}
.drums-status.warn {
  color: var(--rose);
}
.btn.drums-writebtn {
  height: 36px;
}
.btn.drums-remove {
  align-self: flex-start;
  opacity: 0.75;
}

.drums-field option.misfit {
  color: var(--muted);
}

/* ---------------------------------------------------------------- medium */

@container drums (max-width: 1299px) and (min-width: 760px) {
  .drums-flow {
    grid-template-columns: 320px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-areas:
      "groove sections"
      "groove write";
  }
  .drums-sections {
    border-right: none;
  }
  .drums-write {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    border-top: 1px solid var(--line);
  }
  .drums-write .drums-status {
    flex: 1;
    min-width: 160px;
  }
}

/* ---------------------------------------------------------------- narrow */

@container drums (max-width: 759px) {
  .drums-screen {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "target" "lib" "pattern" "map";
    height: auto;
  }
  .drums-lib {
    max-height: 220px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .drums-pattern {
    overflow: visible;
  }
  .drums-flow {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas: "groove" "sections" "write";
    height: auto;
  }
  .drums-step {
    overflow: visible;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
}