/* KYMA · chords.css — chord strips (Compose panel and the Atmosphere harmony tile) */
.cstrips{--cs-fg:currentColor;display:grid;grid-template-columns:repeat(var(--n,7),minmax(0,1fr));gap:6px;touch-action:none;user-select:none;-webkit-user-select:none}
.cstrip{display:grid;grid-template-rows:auto 1fr;border-radius:12px;background:color-mix(in srgb,var(--cs-fg) 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cs-fg) 9%,transparent);overflow:hidden;min-width:0;transition:background .25s,box-shadow .25s}
.cstrip.on{background:color-mix(in srgb,var(--orange) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--orange) 55%,transparent)}
.cs-head{position:relative;display:grid;gap:2px;justify-items:start;padding:9px 10px 10px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;min-width:0}
.cs-head small{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;opacity:.6}
.cs-head b{font-weight:300;font-size:21px;letter-spacing:-.01em;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cs-head.long b{font-size:13px;font-weight:400;letter-spacing:.02em}
.cs-head kbd{position:absolute;top:8px;right:8px;font-family:var(--font-mono);font-size:9px;opacity:.38;border:0;background:none;padding:0}
.cs-head:hover{background:color-mix(in srgb,var(--cs-fg) 6%,transparent)}
.cs-head:focus-visible{outline:2px solid var(--orange);outline-offset:-2px;border-radius:12px}
.cs-head.hit{animation:cshead .5s ease-out}
@keyframes cshead{0%{background:color-mix(in srgb,var(--orange) 45%,transparent)}100%{background:transparent}}
.cs-body{display:flex;flex-direction:column-reverse;justify-content:space-between;gap:2px;padding:6px 8px 10px;min-height:var(--cs-h,150px);cursor:crosshair}
.cs-body i{position:relative;flex:1;min-height:12px;display:block}
.cs-body i::before{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;border-radius:2px;background:var(--cs-fg);opacity:.22;transform:translateY(-50%);transition:opacity .2s,height .2s}
.cs-body i.root::before{opacity:.42;height:2px}
.cs-body i::after{content:attr(data-name);position:absolute;right:0;top:50%;transform:translateY(-50%);font-family:var(--font-mono);font-size:8.5px;opacity:0;transition:opacity .4s}
.cstrip:hover .cs-body i::after{opacity:.35}
.cs-body i.hit::before{animation:csstring .55s ease-out}
.cs-body i.hit::after{animation:csname .9s ease-out}
@keyframes csstring{0%{opacity:1;height:4px;background:var(--orange)}100%{opacity:.22;height:1.5px}}
@keyframes csname{0%{opacity:1}100%{opacity:0}}
.cs-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cs-tools .grow{flex:1}
.cs-now{display:flex;align-items:baseline;gap:8px;min-width:0}
.cs-now b{font-weight:300;font-size:22px;letter-spacing:-.01em}
.cs-now small{font-family:var(--font-mono);font-size:10px;opacity:.6}
.cs-prog{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-height:28px}
.cs-prog .pchip .pc-go{min-width:36px}
.cs-prog .pchip.now .pc-go{background:#14171a;color:#eef1f0}
.cs-prog .empty{font-size:12px;opacity:.6}
@media (prefers-reduced-motion:reduce){.cs-head.hit,.cs-body i.hit::before,.cs-body i.hit::after{animation:none}}

/* Compose: the chord panel above the timeline */
.chordpanel{padding:12px 14px 14px;display:grid;gap:10px}
.chordpanel .cs-head small,.chordpanel .lbl{color:var(--muted)}
.chordpanel .sel{height:32px}
.chordpanel .cs-tools .lbl{margin-right:-2px}
.chordpanel .cs-mode button[data-v="rec"][aria-pressed="true"]{background:var(--warn,#e5484d);color:#fff}
.chordpanel .cs-hint{margin:0;font-size:12px;color:var(--muted)}
.btn[aria-pressed="true"].cs-toggle{background:var(--fg);color:var(--bg);border-color:var(--fg)}

@media (max-width:760px){.cstrips{gap:4px;--cs-h:120px}.cs-head{padding:8px 6px}.cs-head b{font-size:13.5px;font-weight:400}.cs-head{padding:7px 5px}.cs-head kbd{display:none}.cs-body{padding:4px 5px 8px}}