/* ========= © Oskar Chmioła - Color Sounds 2025 ========= */
/* ========= TOKENS ========= */
:root{
  --font-base:16px; --font-small:13.5px; --font-xsmall:12px; --h1:22px;
  --bg1:#0b0f1a; --bg2:#141b2e; --txt:#eaf2ff; --muted:#c8d6ff;
  --glass:rgba(255,255,255,.08); --glass2:rgba(255,255,255,.06);
  --padLabel:14px; --kbdLabel:11px; --pressDepth:6px; --padRadius:14px;
  --pad-min:44px; --pad-ideal:5.2vmin; --pad-max:72px;
  --tip-font:15px; --app-scale:1;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  /* Fallbacks for mobile Safari: use 100vh in addition to 100svh so that the
     layout expands correctly on devices that do not yet support the svh unit */
  min-height:100vh;
  min-height:100svh;
  color:var(--txt);
  background:
    radial-gradient(1000px 700px at 10% -10%, #1b2550 0%, transparent 60%),
    radial-gradient(900px 800px at 120% 10%, #3b1a4c 0%, transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  font-family:ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial;
  font-size:var(--font-base);
  overflow:auto; user-select:none;
}

/* ========= HEADER ========= */
.bar{padding:6px 12px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border-bottom:1px solid rgba(255,255,255,.08)}
.bar .inner{max-width:1500px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
h1{margin:0;font-size:var(--h1);letter-spacing:.2px}
.subtitle{color:var(--muted);font-size:var(--font-small)}
.zoomControls{display:flex;align-items:center;gap:10px;padding:6px 10px;background:var(--glass2);border:1px solid rgba(255,255,255,.12);border-radius:10px;font-size:var(--font-small)}
.zoomControls input[type="range"]{width:160px}

/* ========= FOOTER (simplified, left-aligned) ========= */
.footer{
  position:fixed; left:0; right:0; bottom:0;
  height:22px; opacity:.95; z-index:10000;
  background:linear-gradient(0deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border-top:1px solid rgba(255,255,255,.16);
  display:flex; align-items:center;
}
.footer .inner{flex:1; display:flex; align-items:center; justify-content:flex-start; padding:0 12px; gap:10px; font-size:12px}
.footer a{color:var(--txt); text-decoration:none; font-weight:800}

/* ========= APP LAYOUT ========= */
#appWrap{width:100%;
  /* Fallback height for browsers without svh support */
  height:calc(100vh - 64px);
  height:calc(100svh - 64px);
  display:flex;justify-content:center;align-items:flex-start;overflow:auto}
#app{transform:scale(var(--app-scale));transform-origin:top center;width:1400px;padding:10px 12px 40px}

.panel{background:var(--glass);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:10px;backdrop-filter:blur(8px)}
.box{background:var(--glass);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:10px;display:grid;gap:8px}
.title{font-weight:800;font-size:15px}
.hstack{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hstack select,.hstack button{background:var(--glass2);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px 10px;color:var(--txt);cursor:pointer;font-size:var(--font-small)}
.pill{padding:7px 10px;border-radius:999px;background:var(--glass2);border:1px solid rgba(255,255,255,.12);font-size:var(--font-small)}

/* ========= TOP CONTROLS ========= */
.topGrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
@media(max-width:1200px){.topGrid{grid-template-columns:repeat(4,1fr)}}
.kit{background:var(--glass2);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px;display:grid;gap:6px}
.lab{font-size:var(--font-small);color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:8px}
.lab .key{font-size:11.5px;font-weight:800;padding:.22em .55em;border-radius:8px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.15)}
input[type="range"],select{width:100%} input[type="range"]{height:26px}
select,option{color:var(--txt);background:#101726;border-radius:10px;border:1px solid rgba(255,255,255,.15);padding:7px 9px;appearance:auto;font-size:var(--font-small)}

/* ========= TOOLTIPS ========= */
.hasTip{position:relative;cursor:help}
.hasTip::after{
  content:attr(data-tip);
  position:absolute;left:50%;bottom:calc(100% + 8px);transform:translate(-50%,6px);
  background:#0d1322;color:#eaf2ff;border:1px solid rgba(255,255,255,.18);
  padding:10px 12px;border-radius:10px;font-size:var(--tip-font);
  width:max-content;max-width:520px;line-height:1.32;opacity:0;pointer-events:none;
  transition:.14s ease;box-shadow:0 10px 24px rgba(0,0,0,.34);z-index:60
}
.hasTip:hover::after{opacity:1;transform:translate(-50%,0)}

/* ========= COLUMNS & PADS ========= */
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.col{display:grid;grid-template-rows:auto auto 1fr;gap:8px}
.colHead{display:flex;justify-content:space-between;align-items:center;gap:8px}
.colName{font-weight:800;font-size:14px}
.colCtrls{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.cbtn,.ckn{background:var(--glass2);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:7px 10px;font-size:var(--font-small)}
.cbtn{cursor:pointer} .cbtn.active{outline:2px solid #fff;background:rgba(255,255,255,.16)}
.ckn{display:flex;align-items:center;gap:8px} .ckn label{font-size:var(--font-xsmall);color:var(--muted);white-space:nowrap}
.ckn input[type="range"]{height:22px}

.padGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 10px}
.pad-wrap{position:relative;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.pad{
  position:relative;border-radius:var(--padRadius);aspect-ratio:1/1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;text-align:center;font-weight:900;
  height:clamp(var(--pad-min),var(--pad-ideal),var(--pad-max));
  font-size:var(--padLabel);color:#fff;overflow:hidden;outline:none;
  box-shadow:0 14px 28px rgba(0,0,0,.45),0 6px 0 rgba(0,0,0,.40),inset 0 0 0 1px rgba(255,255,255,.08);
  transition:transform .08s ease, filter .18s ease, box-shadow .10s ease; transform:translateY(0)
}
.pad::before{content:"";position:absolute;inset:0;background:radial-gradient(72% 72% at 30% 20%,rgba(255,255,255,.32),transparent 55%);mix-blend-mode:screen;pointer-events:none}
.pad .kbd{position:absolute;bottom:8px;right:8px;font-size:var(--kbdLabel);opacity:.95;text-shadow:0 1px 0 rgba(0,0,0,.4);pointer-events:none}
.pad .led{position:absolute;top:8px;left:8px;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.35);box-shadow:0 0 0 0 rgba(255,255,255,0);transition:box-shadow .18s ease,background .18s ease;pointer-events:none}
.pad.active{transform:translateY(var(--pressDepth));box-shadow:0 10px 22px rgba(0,0,0,.5),inset 0 0 0 2px rgba(255,255,255,.22),0 0 30px 10px rgba(255,255,255,.92);filter:brightness(1.16) saturate(1.28)}
.pad.active .led{background:#fff;box-shadow:0 0 10px 2px rgba(255,255,255,.9),0 0 30px 10px rgba(255,255,255,.92)}

/* colored hotspot button (matches color band); tooltip remains grey */
.pad .hotspot{
  position:absolute; top:6px; right:6px; width:26px; height:26px; border-radius:50%;
  background:linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.05));
  border:1px solid rgba(255,255,255,.35);
  display:grid; place-items:center; font-size:14px; line-height:1;
  opacity:.0; transform:scale(.88); transition:.12s ease; cursor:default; z-index:3;
  box-shadow:0 2px 6px rgba(0,0,0,.35), inset 0 0 0 1px rgba(0,0,0,.25);
}
.pad:hover .hotspot{opacity:1; transform:scale(1)}
.pad .hotspot::before{content:""; width:14px; height:14px; border-radius:50%; display:block; background:var(--hotspot-bg, #7aa2ff);}

/* dedicated button kept for accessibility / keyboard users */
.moreBtn{all:unset;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;background:var(--glass2);border:1px solid rgba(255,255,255,.12);border-radius:8px;font-size:18px}

/* ========= PAD MINI PANEL (popover) ========= */
/* small, near the pad, semi-transparent, no extra whitespace */
.pop{
  position:fixed; left:0; top:0; display:none;
  background:rgba(13,19,34,.88); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18); border-radius:10px;
  padding:8px; z-index:9999; width:220px; box-shadow:0 14px 36px rgba(0,0,0,.5);
}
.pop.show{display:block}
.pop h4{margin:0 0 6px 0;font-size:13px; color:var(--muted); font-weight:700}
.pop .meta{display:grid; gap:4px; font-size:12px; margin-bottom:6px}
.pop .chip{display:inline-flex; align-items:center; gap:6px; font-weight:800}
.pop .dot{width:10px; height:10px; border-radius:50%; display:inline-block; background:var(--chip, #7aa2ff); box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.pop .row{display:grid;grid-template-columns:auto 1fr;gap:8px;align-items:center;font-size:12px}
.pop input[type="range"]{height:22px}

/* ========= BOTTOM PANELS ========= */
.bottom{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.stack{display:grid;gap:8px}
.list{display:grid;gap:8px;max-height:260px;overflow:auto;padding-right:4px}
.item{display:grid;grid-template-columns:1fr auto auto auto auto;gap:8px;align-items:center;background:var(--glass2);border:1px solid rgba(255,255,255,.12);padding:8px 10px;border-radius:10px;font-size:var(--font-small)}
.item .btn{all:unset;cursor:pointer;padding:6px 9px;border-radius:8px;background:var(--glass);border:1px solid rgba(255,255,255,.12)}
audio{width:100%}

/* ========= TEMPO VIZ ========= */
.tempoViz{height:10px;border-radius:999px;background:var(--glass2);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.10);margin:6px 0 10px}
.tempoViz .pulse{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.6),rgba(255,255,255,.08));transform:translateX(-100%)}
#viewportInfo{opacity:.8;font-size:12px}

/* ========= UPLOADERS ========= */
.uploader{border:1px dashed rgba(255,255,255,.25);border-radius:10px;padding:8px;display:flex;gap:8px;align-items:center;justify-content:space-between}
.uploader.drag{background:rgba(255,255,255,.06)}
/* ========= RESPONSIVE LAYOUTS FOR MOBILE ========= */
/* Adjust layouts on smaller screens to avoid horizontal scrolling.  When the
   viewport width is below 900 px we reduce the number of columns to two;
   below 600 px we stack everything in a single column, including the
   bottom panels. */
@media (max-width: 900px) {
  .topGrid{grid-template-columns:repeat(2,1fr);}
  .cols{grid-template-columns:repeat(2,1fr);}
}
@media (max-width: 600px) {
  .topGrid{grid-template-columns:1fr;}
  .cols{grid-template-columns:1fr;}
  .bottom{grid-template-columns:1fr;}
}

/* ========= INLINE PAD SETTINGS (pinned under each pad across all sections) ========= */
.pad-settings{
  grid-column: 1 / -1;
  display:none;
  background:rgba(13,19,34,.92);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  padding:8px;
  box-shadow:0 10px 28px rgba(0,0,0,.45);
  gap:6px;
  font-size:12px;
}
.pad-settings.show{ display:grid; }
.pad-settings h4{ margin:0 0 6px 0; font-size:13px; color:var(--muted,#9aa3b2); font-weight:700; }
.pad-settings .meta{ opacity:.9; }
.pad-settings .row{ display:grid; grid-template-columns:auto 1fr; gap:8px; align-items:center; }
.pad-settings input[type="range"]{ height:22px; }

/* Keep the original popover in DOM, but hide it */
#padPop{ display:none !important; visibility:hidden !important; pointer-events:none !important; }


/* ===== Manual / Theory Tables ===== */
.manual {
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 14px;
  margin: 10px 0 14px;
  line-height: 1.55;
  font-size: 15px;
}
.manual h2, .manual h3 {
  margin: 8px 0 6px;
  font-size: 18px;
}
.manual h3 { font-size: 16px; color: var(--muted); }
.cs-table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 14px;
  font-size: 14px;
}
.cs-table th, .cs-table td {
  border: 1px solid rgba(255,255,255,.18);
  padding: 8px 10px;
  vertical-align: top;
}
.cs-table th {
  background: rgba(255,255,255,.06);
  text-align: left;
}
.cs-note {
  background: rgba(255,255,255,.05);
  border: 1px dashed rgba(255,255,255,.25);
  border-radius: 10px;
  padding: 10px;
  margin: 8px 0 12px;
  font-size: 14px;
}
.manual ol, .manual ul { padding-left: 1.1em; }
.manual .kbd {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
}
@media print {
  body { background: #fff; color: #000; }
  .bar, .footer, #appWrap, .tempoViz { display: none !important; }
  .manual { background: #fff; border-color: #000; }
  .cs-table th, .cs-table td { border-color: #000; color: #000; }
}


/* ===== EN manual helpers ===== */
.manual .badge{
  display:inline-block; padding:3px 8px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  font-size:12px; font-weight:700; margin-right:6px
}
.manual .howto{display:grid; gap:8px}
.manual .howto > li{margin:0 0 2px 0}
.manual .callout{
  background: rgba(255,255,255,.06);
  border-left: 3px solid rgba(255,255,255,.35);
  padding:10px 12px; border-radius:10px; margin:8px 0
}


/* === Floating Guide Toggle (top-left) === */
#guideToggle {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 99999;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.2);
  background: rgba(20,20,20,.6);
  color: #fff;
  font: 600 13px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  backdrop-filter: blur(6px);
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, opacity .12s ease, background .2s ease;
}
#guideToggle:hover { transform: translateY(-1px); background: rgba(20,20,20,.72); }
#guideToggle:active { transform: translateY(0); }
#guideToggle.kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
@media print { #guideToggle { display: none !important; } }