/* The Mac app's design (mac.css), map. */
/* Design C for Map (Adam's pick, 16 Oct 2026): the toolbar shared with every
   screen, the sections a sidebar down the left, the waveform with its
   overview, flags, ruler and meter chip, and two full-width rows under it,
   the beat grid's and the marking one. The structure is audioview.js's
   (macMap); this is how it looks. Everything is under .drumchart-mac. */

/* --- the window ------------------------------------------------------------ */
.drumchart-mac .audio-view {
  gap: 0;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--chrome);
}
.drumchart-mac .av-bar {
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.45);
  border-radius: 0;
}
.drumchart-mac .av-mac-back-ico { display: inline-flex; margin-right: -1px; }
.drumchart-mac .av-mac-back-ico svg { width: 16px; height: 16px; }
.drumchart-mac .av-mac-doc { flex: 0 1 auto; margin-left: 10px; }
.drumchart-mac .av-mac-doc .av-clock { min-width: 0; font-size: inherit; color: inherit; font-variant-numeric: tabular-nums; }

.drumchart-mac .av-body { gap: 0; }
.drumchart-mac .av-wave-col { padding: 10px 14px 10px; gap: 8px; }

/* --- the sections sidebar ---------------------------------------------------- */
.drumchart-mac .av-mac-sidebar {
  flex: 0 0 220px;
  width: 220px;
  padding: 14px 0 16px;
  background: var(--mac-sidebar);
  border: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 0;
}
.drumchart-mac .av-mac-cap { padding: 0 18px 8px; }
.drumchart-mac .av-mac-sidebar .av-section-list { gap: 2px; }
.drumchart-mac .av-mac-sidebar .av-sections-empty { margin: 6px 18px; font-size: 12px; color: var(--ink-soft); }
.drumchart-mac .av-msection {
  margin: 0 8px;
  padding: 5px 10px;
  min-height: 42px;
  border-radius: 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.drumchart-mac .av-msection:hover { background: rgba(127, 127, 127, 0.13); }
.drumchart-mac .av-msection-text { display: flex; flex-direction: column; min-width: 0; }
.drumchart-mac .av-msection-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drumchart-mac .av-msection-bars,
.drumchart-mac .av-msection-time {
  font-size: 11px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.drumchart-mac .av-msection-time { font-size: 11.5px; }
/* The section the playhead is in. */
.drumchart-mac .av-msection.at { background: var(--accent-fill); }
.drumchart-mac .av-msection.at .av-msection-name { color: var(--accent-ink); font-weight: 600; }
.drumchart-mac .av-msection.at .av-msection-bars { color: rgba(255, 255, 255, 0.8); }
.drumchart-mac .av-msection-from { color: var(--ink-soft); }
.drumchart-mac .av-msection.at .av-msection-from { color: rgba(255, 255, 255, 0.8); }
.drumchart-mac .av-msection.at .av-msection-time { color: var(--accent-ink); }
/* A name being typed: the field sits where the name was. */
.drumchart-mac .av-msection .name-field { display: flex; align-items: center; min-width: 0; }
.drumchart-mac .av-msection .av-section-name {
  flex: 1 1 auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  background: var(--raised);
  margin: 0 0 0 -4px;
  padding: 1px 4px;
  border-radius: 4px;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.drumchart-mac .av-msection .av-section-name:hover,
.drumchart-mac .av-msection .av-section-name:focus { background: var(--raised); }
.drumchart-mac .av-msection.at .name-field-toggle { color: var(--accent-ink); }
.drumchart-mac .av-mac-hint {
  margin: 14px 18px 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-faint);
}

/* --- the waveform -------------------------------------------------------------- */
.drumchart-mac .av-overview-wrap {
  flex: 0 0 40px;
  background: var(--wave-bg);
  border: 0;
  border-radius: 5px;
}
.drumchart-mac .av-viewport {
  border: 1.5px solid var(--ink-soft);
  background: rgba(127, 127, 127, 0.08);
  border-radius: 5px;
}
.drumchart-mac .av-stage {
  background: var(--wave-bg);
  border: 0;
  border-radius: 6px;
}
/* Section flags: a tab off the marker's line, name and time. */
.drumchart-mac .av-flag:not(.av-flag-meter) {
  transform: none;
  height: 19px;
  padding: 0 6px 0 6px;
  gap: 6px;
  border-radius: 0 5px 5px 0;
  background: var(--mac-control);
  color: var(--ink);
  font-size: 12px;
  box-shadow: 0 0.5px 1px rgba(0, 0, 0, 0.35);
}
.drumchart-mac .av-flag-time { opacity: 1; color: var(--ink-soft); }
.drumchart-mac .av-flag-x { color: inherit; opacity: 0.45; }
.drumchart-mac .av-flag-x:hover { opacity: 1; }
.drumchart-mac .av-flag-implied { background: transparent; border: 1px dashed var(--ink-soft); color: var(--ink-soft); box-shadow: none; }
.drumchart-mac .av-flag-implied .av-flag-time { color: var(--ink-soft); }
.drumchart-mac .av-flag-pin { font-size: 10px; }
/* The section the playhead is in. */
.drumchart-mac .av-flag.at:not(.av-flag-meter) { background: var(--ink); color: var(--chrome); }
.drumchart-mac .av-flag.at .av-flag-time { color: var(--chrome); opacity: 0.7; }
/* Time signatures: a solid amber chip with a pop-up arrow, big enough to
   read and plainly a button (Adam, 19 Oct: "a little bigger, and opaque"). */
.drumchart-mac .av-flag-meter {
  background: var(--warn);
  border: 0;
  border-radius: 5px;
  box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.45);
}
.drumchart-mac .av-flag-meter.av-flag-hold { background: var(--warn); }
.drumchart-mac .av-meter-chip {
  color: var(--mac-warn-ink);
  font-size: 12.5px;
  font-weight: 700;
  min-height: 22px;
  padding: 2px 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.drumchart-mac .av-meter-chip::after {
  content: '';
  width: 5px;
  height: 5px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.drumchart-mac .av-meter-chip:hover,
.drumchart-mac .av-flag-meter.open .av-meter-chip { background: rgba(0, 0, 0, 0.12); border-radius: 5px; }
.drumchart-mac .av-flag-unsure { box-shadow: 0 0 0 2px var(--wave-bg), 0 0 0 3px var(--warn); }
.drumchart-mac .av-meter-pop {
  background: var(--mac-menu);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 0.5px solid rgba(127, 127, 127, 0.35);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
/* Zoom, floating in the waveform's corner. */
.drumchart-mac .av-zoom-float {
  height: 28px;
  padding: 0;
  gap: 0;
  border-radius: 7px;
  background: var(--mac-menu);
  border: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 0 0 0.5px rgba(127, 127, 127, 0.3);
}
.drumchart-mac .av-zoom-float .btn {
  min-height: 28px;
  min-width: 28px;
  background: transparent;
  box-shadow: none;
}
.drumchart-mac .av-zoom-float .btn:hover { background: rgba(127, 127, 127, 0.16); }
.drumchart-mac .av-zoom-float .av-zoom-value { min-width: 44px; font-size: 12px; }

/* --- the two rows under it ------------------------------------------------------- */
.drumchart-mac .av-mac-row {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: var(--mac-toolbar);
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
}
.drumchart-mac .av-mac-beat { flex: 0 0 auto; display: flex; flex-direction: column; }
.drumchart-mac .av-mac-beatrow {
  min-height: 40px;
  border-top: 1px solid rgba(0, 0, 0, 0.45);
  border-bottom: 1px solid var(--line-soft);
}
.drumchart-mac .av-mac-beat .av-mac-beatrow:not(:last-child) { border-bottom-color: var(--line-soft); }
.drumchart-mac .av-mac-fixrow {
  min-height: 40px;
  gap: 18px;
  border-bottom: 1px solid var(--line-soft);
  padding-top: 0;
  border-top: 0;
}
.drumchart-mac .av-mac-ico { display: inline-flex; align-items: center; }
.drumchart-mac .av-mac-title { font-weight: 600; }
.drumchart-mac .av-mac-state,
.drumchart-mac .av-mac-label,
.drumchart-mac .av-mac-note { color: var(--ink-soft); font-size: 12px; }
.drumchart-mac .av-mac-note { overflow: hidden; text-overflow: ellipsis; }
.drumchart-mac .av-mac-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 16px;
  margin: 0 4px;
  background: var(--line);
}
.drumchart-mac .av-mac-row .av-bpm { font-weight: 400; font-size: 13px; }
.drumchart-mac .av-mac-row .spacer { flex: 1 1 auto; }

/* Snap: a small segmented control. */
.drumchart-mac .av-mac-seg {
  display: inline-flex;
  padding: 2px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.12);
  box-shadow: inset 0 0 0 0.5px rgba(127, 127, 127, 0.25);
}
.drumchart-mac .av-mac-seg button {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  color: var(--ink-soft);
  min-height: 18px;
  padding: 0 10px;
  border-radius: 5px;
}
.drumchart-mac .av-mac-seg button:hover { color: var(--ink); }
.drumchart-mac .av-mac-seg button.on {
  background: var(--mac-seg-on);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* "Fix it by hand": a disclosure triangle. */
.drumchart-mac .av-mac-disclose { align-self: center; font-size: 13px; color: var(--ink); gap: 5px; }
.drumchart-mac .av-mac-chev { display: inline-flex; color: var(--ink-soft); transition: transform 0.15s ease; }
.drumchart-mac .av-mac-disclose.open .av-mac-chev { transform: rotate(90deg); }
.drumchart-mac .av-mac-fixrow .av-fix-label { font-size: 12px; color: var(--ink-soft); }

/* The marking row. */
.drumchart-mac .av-markbar {
  min-height: 48px;
  border: 0;
  border-radius: 0;
  padding: 0 14px;
  gap: 6px;
  flex-wrap: nowrap;
}
.drumchart-mac .av-markbar.naming { outline: 0; box-shadow: inset 0 0 0 2px var(--accent); }
.drumchart-mac .av-mark-label { font-size: 12px; color: var(--ink-soft); margin-right: 2px; }
.drumchart-mac .av-mark-time { color: var(--ink); font-variant-numeric: tabular-nums; }
.drumchart-mac .av-markbar.naming .av-mark-label { color: var(--ink); font-weight: 600; }
.drumchart-mac .av-palette { flex: 0 1 auto; flex-wrap: nowrap; gap: 6px; align-items: center; min-width: 0; }
.drumchart-mac .btn.mark-kind { min-height: 26px; padding: 0 11px; font-size: 12.5px; }
.drumchart-mac .btn.mark-kind.danger { color: var(--danger); }
.drumchart-mac .av-mac-more { padding: 0 6px 0 11px; gap: 2px; }
.drumchart-mac .av-mac-popup { display: inline-flex; }
.drumchart-mac .av-mac-key {
  margin-left: 2px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  font: 11px -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.drumchart-mac .av-mac-sidebar-btn { padding: 0 7px; min-width: 30px; }
.drumchart-mac .av-mac-sidebar-btn svg { display: block; }
.drumchart-mac .av-mac-sidebar-btn.on { background: var(--accent-soft); color: var(--accent); }
.drumchart-mac .av-mac-trim { padding: 0 6px 0 9px; gap: 4px; }
.drumchart-mac .av-mac-plus { display: inline-flex; color: var(--warn); }
.drumchart-mac .av-mac-timechange.primary .av-mac-plus { color: inherit; }
.drumchart-mac .av-markbar .av-follow { font-size: 12px; color: var(--ink); gap: 6px; }
.drumchart-mac .av-markbar .av-follow input { accent-color: var(--accent); margin: 0; }

/* A narrower window: the buttons give up some padding before anything wraps. */
@media (max-width: 1180px) {
  .drumchart-mac .av-markbar { gap: 4px; padding: 0 10px; }
  .drumchart-mac .av-palette { gap: 4px; }
  .drumchart-mac .btn.mark-kind { padding: 0 8px; font-size: 12px; }
  .drumchart-mac .av-mac-more { padding: 0 4px 0 8px; }
  .drumchart-mac .av-mac-key { display: none; }
  .drumchart-mac .av-markbar .av-mac-sep { margin: 0 2px; }
}
@media (max-width: 1060px) {
  .drumchart-mac .av-mac-sidebar { flex-basis: 190px; width: 190px; }
  .drumchart-mac .av-mac-note { display: none; }
}

/* "Time 4/4 ▾" in the beat grid row: the song's time signature, in amber
   like its chip on the waveform, plainly a pop-up button. */
.drumchart-mac .av-mac-time { display: inline-flex; align-items: center; gap: 6px; }
.drumchart-mac .av-mac-time-btn { color: var(--warn); font-weight: 600; gap: 4px; }
.drumchart-mac .av-mac-time-btn.unsure { box-shadow: 0 0 0 1.5px var(--warn); }