/* looper.css : online looper. Hard-coded colours only inside the .display panel. */
#looper .lp-top .lp-start { flex: 2 1 170px; }
#looper .lp-top .lp-demo { flex: 1 1 150px; white-space: nowrap; }
#looper .lp-privacy { margin: 10px 0; }
#looper .lp-gate { margin: 0 0 12px; border-color: var(--warn); }
#looper .lp-gate p { margin: 0 0 8px; }
#looper [data-in-notice] { margin: 0 0 12px; }
#looper .lp-display { padding: 14px 16px; }
#looper .lp-status { color: #e7e5e4; }
#looper[data-phase="rec1"] .lp-status, #looper[data-phase="over"] .lp-status { color: #f87171; }
#looper[data-phase="play"] .lp-status { color: #4ade80; }
#looper .lp-sub { min-height: 1.6em; margin-top: 2px; }
#looper .lp-track { position: relative; height: 10px; border-radius: 5px; background: #292524; overflow: hidden; margin-top: 10px; }
#looper .lp-track i { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: #e7e5e4; }
#looper[data-phase="rec1"] .lp-track i, #looper[data-phase="over"] .lp-track i { background: #f87171; }
#looper .lp-btns { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 8px; margin-top: 12px; }
#looper .lp-btns .btn { padding-left: 10px; padding-right: 10px; white-space: nowrap; }
#looper .lp-rec[aria-pressed="true"] { background: var(--bad); border-color: var(--bad); color: #fff; }
#looper .lp-layers { margin-top: 10px; }
#looper .lp-layers .chip { min-height: 40px; }
#looper .lp-layers .chip[aria-pressed="false"] { text-decoration: line-through; }
#looper [data-rec-note] { margin: 6px 0 0; }
#looper .lp-io { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
#looper .lp-meterbox { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px 6px; background: var(--card); min-width: 0; }
#looper .lp-meter { position: relative; height: 10px; border-radius: 5px; background: var(--strong); overflow: hidden; margin: 4px 0 6px; }
#looper .lp-meter i { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: var(--ok); }
#looper .lp-meter i.hot { background: var(--bad); }
#looper .lp-slider { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--body); flex: 1 1 200px; min-width: 0; }
#looper .lp-slider output { color: var(--ink); font-variant-numeric: tabular-nums; margin-left: 4px; }
#looper input[type="range"] { width: 100%; min-height: 32px; margin: 0; }
#looper .lp-set { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-top: 14px; }
#looper .lp-set select, #looper .lp-set input[type="number"] { min-height: 44px; max-width: 100%; }
#looper .lp-set label.field { min-width: 0; flex-wrap: wrap; }
#looper .lp-set [data-sound] { max-width: 260px; }
#looper .lp-set input[type="number"] { width: 84px; }
#looper .lp-set .chip, #looper .lp-latrow .chip { min-height: 44px; }
#looper .lp-devrow { margin-top: 10px; }
#looper .lp-dev { flex: 1 1 220px; min-width: 0; }
#looper .lp-dev select { flex: 1; min-width: 0; max-width: 100%; min-height: 44px; }
#looper [data-in-chwrap] select { min-height: 44px; }
#looper .lp-latrow { display: flex; align-items: flex-end; gap: 10px; margin-top: 10px; }
#looper .lp-lat { margin: 6px 0 0; }
#looper .lp-keys { margin: 8px 0 0; }
@media (max-width: 640px) {
  #looper .lp-btns { grid-template-columns: 1fr 1fr; }
  #looper .lp-btns .lp-rec { grid-column: 1 / -1; }
  #looper .lp-io { gap: 8px; }
  #looper .lp-meterbox { padding: 6px 10px 4px; }
  #looper .lp-set [data-sound] { max-width: 100%; }
}
@media (hover: none) { #looper .lp-keys { display: none; } }