/* Chopped Beats, restyled to match Pocket Beats: true black, EB Garamond names, wide-tracked Inter labels,
   sharp corners, turquoise for "live", yellow for record and attention, yellow chip for the tour.
   Loaded after app.css. Always dark: the light theme is not offered here. */
:root, :root[data-theme="light"] {
  --bg: #000; --bg2: #0b0b0b; --bg3: #141414;
  --ink: #faf9f7; --stone: #9a9890; --rule: #2a2826;
  --accent: #22e6d4; --yellow: #ede400;
  --clip: #1c1b1a; --clip-ink: #d9d6d0; --sel: #faf9f7; --sel-ink: #000;
  --player-glow: rgba(34, 230, 212, .3);
  color-scheme: dark;
}
body.is-recording { --accent: var(--yellow); --player-glow: rgba(237, 228, 0, .35); }

/* header */
.top { gap: 10px; border-bottom: 1px solid var(--rule); }
.brand { font-family: var(--serif); font-size: 1.55rem; letter-spacing: -.01em; }
.brand em, .brand:hover em { font-style: normal; color: inherit; -webkit-background-clip: border-box; background-clip: border-box;
  background: linear-gradient(var(--yellow), var(--yellow)) 0 95% / 100% .09em no-repeat; }
.home-link { border-radius: 0; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; font-weight: 500; }
.proj-name { font-family: var(--serif); font-size: 17px !important; }

/* buttons, fields */
.btn { border-radius: 0; border-color: rgba(250,249,247,.55); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; font-weight: 600; min-height: 32px; }
.btn:hover { border-color: var(--ink); }
.btn.small { min-height: 26px; font-size: 10px; }
.btn.icon { padding: 0; min-height: 32px; }
.btn.primary, .btn.toggle[aria-pressed="true"] { background: var(--ink); color: #000; border-color: var(--ink); }
.btn.rec { color: var(--yellow); border-color: var(--yellow); }
.btn.rec.on { background: var(--yellow); color: #000; border-color: var(--yellow); }
.btn.danger:hover { border-color: #ff5a4d; color: #ff5a4d; }
input[type="number"], input[type="text"], input[type="search"], select { border-radius: 0; background: #000; border-color: var(--rule); }
input[type="range"] { accent-color: var(--accent); }
.lbl, .inspector h3, .th .rec-target { letter-spacing: .14em; }
.lbl { font-size: 11px; }

/* panels: sharper, a touch more air */
.transport, .pads { background: var(--bg2); }
.player { border-radius: 0; background: #0b0b0b; border-color: rgba(250,249,247,.4); }
.menu, .menu button, .toast, .modal-card, .keys kbd, .fs-lic, .proj-act, .th-btn { border-radius: 0; }
.modal-card { background: #0b0b0b; }
.modal-card h2, .tour-card h2, .empty-tl h3, .inspector h2 { font-family: var(--serif); }
.modal { background: rgba(0,0,0,.72); }

/* the sounds + inspector headings read like Pocket Beats labels */
.library h2, .inspector h2 { font-size: 22px; letter-spacing: -.01em; }

/* pads: Pocket Beats pads, in miniature */
.pad { border-radius: 0; background: #0b0b0b; border-color: var(--rule); }
.pad .n { font-family: var(--serif); font-size: 15px; }
.pad .k { letter-spacing: .12em; }
.pad.hit { background: rgba(34,230,212,.22); color: var(--ink); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), 0 0 18px rgba(34,230,212,.22); }
.pad.over { border-color: var(--accent); }
.seq-grid .st { border-radius: 0; background: #000; }
.seq-grid .st.beat { background: #141414; }
.seq-grid .st.on { background: var(--accent); border-color: var(--accent); }
.seq-grid .st.now { outline-color: var(--yellow); }

/* timeline accents */
.playhead { background: var(--accent); }
.clip { border-radius: 0; }

/* the tour is a yellow chip, like the Pocket Beats tips */
.tour-card { background: var(--yellow); color: #141414; border: 0; border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%); padding-bottom: 34px; }
.tour-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.04) 3px 4px); }
.tour-card p { color: rgba(20,20,20,.82); }
.tour-card .tour-step { color: #141414; opacity: .7; letter-spacing: .16em; font-weight: 600; }
.tour-card .btn { border-color: #141414; color: #141414; background: transparent; }
.tour-card .btn:hover { background: rgba(20,20,20,.1); }
.tour-card .btn.primary { background: #141414; color: var(--yellow); border-color: #141414; }
.tour-spot { outline-color: var(--yellow); }
.spark { background: var(--accent); }
.spark:nth-child(3n) { background: var(--yellow); }