/* The Mac app's own look: design C of Adam's blind trial (16 Oct 2026), the
   one made to the Mac's conventions, which he picked for Build and Map and
   then asked for on Score and the chart list too. Everything here is under
   .drumchart-mac (native.js: the Mac app, or ?maclook in a browser), so the
   website and the iPad keep their own.

   This file is what every screen shares: the colours, the window's toolbar,
   buttons, the view switch, the play controls and the menus. Each screen's
   own layout is in mac-build.css, mac-map.css, mac-score.css and
   mac-home.css. The chart itself stays white paper, as everywhere. */

/* --- colours ------------------------------------------------------------ */
/* The Mac's own greys and blue rather than DrumChart's blue-tinted ones:
   a window, a toolbar a step lighter, a sidebar and panels between them. */
:root.drumchart-mac {
  color-scheme: dark;
  --ink: #ececef;
  --ink-soft: #a1a1a8;
  --ink-faint: #8e8e95;
  --line: #3a3a3f;
  --line-soft: #2f2f33;
  --chrome: #1e1e20;
  --paper: #252528;
  --raised: #323236;
  --accent: #0a84ff;
  --accent-soft: rgba(10, 132, 255, 0.24);
  --accent-fill: #0a84ff;
  --accent-ink: #ffffff;
  --wash: rgba(10, 132, 255, 0.14);
  --wash-firm: rgba(10, 132, 255, 0.26);
  --danger: #ff453a;
  --danger-line: #5c2723;
  --warn: #ffb340;
  --mac-warn-ink: #1d1d1f;
  --desk-build: #161618;
  --desk: #0f1012;
  --wave-bg: #17181b;
  --mac-toolbar: #2b2b2e;
  --mac-sidebar: #252528;
  --mac-control: #3b3b3f;
  --mac-control-hi: #46464b;
  --mac-seg-on: #5c5c63;
  --mac-menu: rgba(44, 44, 48, 0.97);
  --mac-wave: #7f8ba3;
  --glass: rgba(44, 44, 48, 0.94);
  --cell-beat: #26262a;
}



.drumchart-mac body {
  font: 13px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- buttons ------------------------------------------------------------ */
/* The Mac's push button: small, filled, a hairline of light on top. */
.drumchart-mac .btn {
  min-height: 24px;
  padding: 2px 10px;
  border: 0;
  border-radius: 6px;
  background: var(--mac-control);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.12), 0 0.5px 1px rgba(0, 0, 0, 0.35);
  font-size: 13px;
  color: var(--ink);
  gap: 5px;
}
.drumchart-mac .btn:hover { background: var(--mac-control-hi); }
.drumchart-mac .btn:active { transform: none; filter: brightness(0.92); }
.drumchart-mac .btn.primary { background: var(--accent-fill); color: var(--accent-ink); }
.drumchart-mac .btn.danger { color: var(--danger); }
.drumchart-mac .btn.small { min-height: 22px; padding: 1px 9px; font-size: 12px; }
.drumchart-mac .btn.tiny { min-height: 20px; padding: 1px 7px; font-size: 12px; }
.drumchart-mac .btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-soft); }
.drumchart-mac .icon-btn { min-width: 26px; min-height: 24px; padding: 2px 6px; }
.drumchart-mac select,
.drumchart-mac input[type="text"], .drumchart-mac input[type="number"], .drumchart-mac input:not([type]) {
  font: inherit;
  font-size: 13px;
}
.drumchart-mac :focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 1px; }

/* --- the window's toolbar ------------------------------------------------ */
/* One unified bar, 52 points tall as a Mac window's toolbar is: the way back
   and the chart's name on the left, Map / Build / Score in the middle, the
   play controls on the right, the same on every screen. */
.drumchart-mac .toolbar,
.drumchart-mac .av-bar {
  min-height: 52px;
  padding: 0 14px;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--mac-toolbar);
  border-bottom: 1px solid rgba(0, 0, 0, 0.45);
  gap: 8px;
}
/* "‹ Charts": a plain toolbar button, not a box. */
.drumchart-mac .toolbar .bar-left > .btn:first-child,
.drumchart-mac .av-bar .bar-left > .btn:first-child,
.drumchart-mac .mac-back {
  background: transparent;
  box-shadow: none;
  min-height: 28px;
  padding: 0 8px 0 4px;
  color: var(--ink);
  font-size: 13px;
}
.drumchart-mac .toolbar .bar-left > .btn:first-child:hover,
.drumchart-mac .av-bar .bar-left > .btn:first-child:hover { background: rgba(127, 127, 127, 0.16); }
/* The chart's name and what is under it, as a document window's title. */
.drumchart-mac .mac-doc { display: inline-flex; flex-direction: column; justify-content: center; min-width: 0; max-width: 300px; line-height: 1.2; }
.drumchart-mac .mac-doc-title { font-weight: 600; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drumchart-mac .mac-doc-sub { font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Map / Build / Score as the Mac's segmented control: the chosen one a
   raised grey, not a blue fill. */
.drumchart-mac .view-switch {
  background: rgba(0, 0, 0, 0.12);
  border: 0;
  box-shadow: inset 0 0 0 0.5px rgba(127, 127, 127, 0.25);
  border-radius: 7px;
  padding: 2px;
  gap: 0;
}
.drumchart-mac .view-switch .btn.view-tab {
  min-height: 24px;
  min-width: 66px;
  padding: 0 12px;
  border-radius: 5px;
  background: transparent;
  box-shadow: none;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: 13px;
}
.drumchart-mac .view-switch .btn.view-tab:hover:not(:disabled) { background: transparent; color: var(--ink); }
.drumchart-mac .view-switch .btn.view-tab.primary,
.drumchart-mac .view-switch .btn.view-tab.primary:hover {
  background: var(--mac-seg-on);
  color: var(--ink);
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* The play controls: icons only (the words go to the pointer's tooltip),
   Play a round blue button. As big as the website's (Adam, 26 Oct: they
   "feel smaller in comparison to the web app"): 28px buttons with 16px
   icons until then. */
.drumchart-mac .play-cluster.pc-bar { --pc-h: 36px; gap: 6px; }
.drumchart-mac .pc-bar .pc-label { display: none; }
.drumchart-mac .pc-bar .vm-split > button,
.drumchart-mac .pc-bar .vm-mix-btn,
.drumchart-mac .pc-bar .pc-loop {
  border: 0;
  background: rgba(127, 127, 127, 0.14);
  color: var(--ink);
  font-size: 13px;
  border-radius: 6px;
}
.drumchart-mac .pc-bar .pc-loop { width: 40px; padding: 0; }
.drumchart-mac .pc-bar .pc-loop:disabled { opacity: 0.35; cursor: default; }
.drumchart-mac .pc-bar .vm-split-main { width: 40px; }
.drumchart-mac .pc-bar .vm-split-door { width: 24px; }
.drumchart-mac .pc-bar .vm-mix-btn { width: 40px; }
.drumchart-mac .pc-bar .pc-tempo-tag { top: -6px; right: -6px; height: 14px; padding: 0 4px; font-size: 10px; line-height: 14px; }
.drumchart-mac .pc-bar .vm-icon svg, .drumchart-mac .pc-bar .vm-mix-btn svg { width: 20px; height: 20px; }
.drumchart-mac .pc-bar .vm-split > button:hover:not(:disabled),
.drumchart-mac .pc-bar .vm-mix-btn:hover,
.drumchart-mac .pc-bar .pc-loop:hover:not(:disabled) { background: rgba(127, 127, 127, 0.26); }
.drumchart-mac .pc-bar .vm-play { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-fill); color: #fff; border: 0; }
.drumchart-mac .pc-bar .vm-play svg { width: 19px; height: 19px; }
.drumchart-mac .pc-bar .vm-play.on { background: var(--accent-fill); }

/* --- menus ---------------------------------------------------------------- */
/* .mac-menu is a Mac pop-up menu drawn by the page (the insert menu, More…,
   Trim…): translucent, rows 22 points tall, the chosen row filled blue, the
   key it answers to on the right in grey. Popovers that hold controls (the
   mixer, the click) keep their own shape. */
.drumchart-mac .mac-menu {
  position: fixed;
  z-index: 900;
  min-width: 200px;
  padding: 5px;
  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), 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  font-size: 13px;
  color: var(--ink);
  display: flex;
  flex-direction: column;
}
.drumchart-mac .mac-menu-head { font-size: 11px; font-weight: 600; color: var(--ink-soft); padding: 2px 8px 3px; }
.drumchart-mac .mac-menu-item {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  min-height: 22px;
  padding: 0 10px 0 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  cursor: default;
}
.drumchart-mac .mac-menu-item .mac-menu-key { margin-left: auto; padding-left: 22px; color: var(--ink-soft); }
.drumchart-mac .mac-menu-item .mac-menu-ico { width: 16px; display: inline-flex; justify-content: center; }
.drumchart-mac .mac-menu-item .mac-menu-ico svg { width: 14px; height: 14px; }
.drumchart-mac .mac-menu-item:hover:not(:disabled),
.drumchart-mac .mac-menu-item:focus-visible:not(:disabled),
.drumchart-mac .mac-menu-item.hi { background: var(--accent-fill); color: #fff; outline: none; }
.drumchart-mac .mac-menu-item:hover:not(:disabled) .mac-menu-key,
.drumchart-mac .mac-menu-item.hi .mac-menu-key { color: rgba(255, 255, 255, 0.75); }
.drumchart-mac .mac-menu-item:disabled { color: var(--ink-faint); opacity: 0.6; }
.drumchart-mac .mac-menu-item.danger { color: var(--danger); }
.drumchart-mac .mac-menu-item.danger:hover:not(:disabled) { background: var(--danger); color: #fff; }
.drumchart-mac .mac-menu-sep { height: 1px; margin: 5px 8px; background: rgba(127, 127, 127, 0.3); }

/* Small caps headings in panels and sidebars, as the Mac draws them. */
.drumchart-mac .mac-cap { font-size: 11px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.02em; text-transform: uppercase; }

/* --- the window's own buttons --------------------------------------------- */
/* In the app the page runs up under the window's title bar, so the close,
   minimise and full-screen buttons sit over the top-left of every screen's
   bar. Nothing of the page's may sit under them: "‹ Charts" did, and a
   click on it closed the window, which quits the app (Adam, 19 Oct: "if I
   try to click back out into charts, it crashes"). */
.drumchart-app.drumchart-mac .toolbar,
.drumchart-app.drumchart-mac .av-bar,
.drumchart-app.drumchart-mac .vm-head { padding-left: 84px; }
/* With that room taken, a long chart name stops short of Map / Build /
   Score at the narrowest window (1024): it ends with … instead. */
.drumchart-app.drumchart-mac .mac-doc { max-width: min(300px, calc(50vw - 290px)); }

/* --- Settings ------------------------------------------------------------- */
/* DrumChart › Settings… (⌘,) and the gear on the chart list's toolbar
   (settingspage.js): the app's own choices on one sheet, laid out as a Mac
   settings pane is, the names in a column on the left, the controls beside
   them, a line under each saying what it does. */
.drumchart-mac .settings-overlay { background: rgba(0, 0, 0, 0.28); }
.drumchart-mac .settings-card {
  width: 520px;
  gap: 0;
  padding: 16px 20px 20px;
  border: 0.5px solid rgba(127, 127, 127, 0.35);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(0, 0, 0, 0.5);
}
.drumchart-mac .ms-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.drumchart-mac .ms-title { font-size: 15px; font-weight: 600; }
.drumchart-mac .ms-close { min-width: 22px; min-height: 22px; padding: 0; border-radius: 50%; background: rgba(127, 127, 127, 0.16); box-shadow: none; color: var(--ink-soft); }
.drumchart-mac .ms-close:hover { background: rgba(127, 127, 127, 0.3); color: var(--ink); }
.drumchart-mac .ms-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); align-items: start; }
.drumchart-mac .ms-row:last-child { border-bottom: 0; padding-bottom: 0; }
.drumchart-mac .ms-name { text-align: right; font-size: 13px; color: var(--ink); padding-top: 3px; }
.drumchart-mac .ms-control { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.drumchart-mac .ms-seg { display: inline-flex; }
.drumchart-mac .lp-choices.ms-seg .btn { flex: 0 0 auto; min-width: 72px; padding: 0 10px; white-space: nowrap; }
.drumchart-mac .lp-choices.ms-seg .btn.chosen { background: var(--mac-seg-on); border-color: transparent; color: var(--ink); font-weight: inherit; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.drumchart-mac .ms-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.drumchart-mac .ms-hint { font-size: 11px; line-height: 1.35; color: var(--ink-soft); }