/* ============================================================
   ALGOSYNTH — the original sequencer, dressed in the Iside Systems
   stylesheet. Palette, type and spacing come from assets/site.css;
   this file restyles the app's own markup.
   ============================================================ */
body.algo{display:flex;flex-direction:column;min-height:100vh;overflow:hidden}
#app{display:flex;flex-direction:column;flex:1;min-height:0}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:12px clamp(14px,3vw,26px);border-bottom:1px solid var(--line);background:var(--bg);
  position:sticky;top:0;z-index:40}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.brand .glyph{width:20px;height:20px;border:1.5px solid var(--ink);position:relative;flex:0 0 auto}
.brand .glyph::after{content:"";position:absolute;inset:4px;border:1.5px solid var(--acc)}
.brand b{font-weight:500;font-size:15px;letter-spacing:-.02em}
.brand span{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim)}
.brand:hover span{color:var(--acc)}
.sep{width:1px;height:22px;background:var(--line);flex:0 0 auto}
.transport,.io{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.io{margin-left:auto}

.btn{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:7px 11px;border:1px solid var(--line);background:none;color:var(--dim);cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;white-space:nowrap}
.btn:hover{color:var(--ink);border-color:var(--ink)}
.btn.full{width:100%;margin-bottom:6px}
.btn.subtle{opacity:.85}
.btn.pulse{border-color:var(--acc);color:var(--acc)}
#playToggle{min-width:96px;text-align:center}
#playToggle[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:#fff}
#audioToggle[aria-pressed="true"]{border-color:var(--ink);color:var(--ink)}

.control{display:flex;align-items:center;gap:8px}
.control > span{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap}
.control input[type=number]{width:62px;font-family:var(--mono);font-size:12px;color:var(--ink);
  background:none;border:1px solid var(--line);padding:6px 7px;text-align:right}
.control input[type=range]{width:96px;accent-color:var(--acc)}
.control select{font-family:var(--mono);font-size:11px;color:var(--ink);background:var(--bg);
  border:1px solid var(--line);padding:6px 7px;max-width:180px}
.control input:focus,.control select:focus{outline:none;border-color:var(--acc)}

/* ---------- layout ---------- */
.main{flex:1;display:grid;grid-template-columns:clamp(230px,20vw,280px) minmax(0,1fr);min-height:0}
.sidebar{border-right:1px solid var(--line);overflow-y:auto;padding:16px 16px 40px;background:var(--bg)}
.tracks{overflow-y:auto;padding:16px clamp(14px,2vw,24px) 40px}
.tracks-container{display:flex;flex-direction:column;gap:14px}

.divider{height:1px;background:var(--line);margin:16px 0}
.section-title{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);margin-bottom:10px}
.row{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:8px}
.hint{margin-top:16px;font-size:12px;line-height:1.6;color:var(--dim)}
.list{width:100%;font-family:var(--mono);font-size:11.5px;color:var(--ink);background:none;
  border:1px solid var(--line);padding:6px}
.list:focus{outline:none;border-color:var(--acc)}
.song-list{list-style:none;font-family:var(--mono);font-size:11.5px;color:var(--dim);
  margin:8px 0;padding:0}
.song-list li{padding:5px 0;border-bottom:1px solid var(--line-soft)}

/* ---------- one track ---------- */
.track{border:1px solid var(--line);padding:12px 14px 14px;background:var(--bg)}
.track-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.track-title{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--acc);flex:0 0 auto}
.track-controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.steps{display:flex;gap:3px;flex-wrap:wrap}
.step{width:24px;height:24px;border:1px solid var(--line);background:none;cursor:pointer;
  transition:background .15s,border-color .15s}
.step:hover{border-color:var(--ink)}
.step.active{background:rgba(var(--ink-rgb),.62);border-color:rgba(var(--ink-rgb),.62)}
.step.playhead{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.step.active.playhead{background:var(--acc);border-color:var(--acc)}

/* ---------- background canvas ---------- */
#viz{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5}

/* ---------- guide, notice, small screen ---------- */
.asmall{display:none;flex:1;align-items:center;justify-content:center;
  padding:12vh clamp(20px,7vw,60px);text-align:center}
.asmall .in{max-width:420px}
.asmall h2{font-size:clamp(24px,6vw,34px);letter-spacing:-.03em;margin-bottom:16px}
.asmall p{font-size:15.5px;line-height:1.75;color:var(--dim);margin-inline:auto}
.asmall .req{margin-top:22px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--acc)}
.asmall .back{display:inline-block;margin-top:26px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-decoration:none;
  border-bottom:1px solid var(--line)}
.asmall .back:hover{color:var(--acc);border-bottom-color:var(--acc)}

@media(max-width:900px){
  body.algo{overflow:auto}
  .main,.topbar .transport,.topbar .io{display:none}
  .asmall{display:flex}
}

.aguide{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.6);
  display:flex;align-items:flex-start;justify-content:center;padding:6vh 20px;overflow-y:auto;
  opacity:0;transition:opacity .35s}
.aguide.in{opacity:1}
.aguide[hidden]{display:none}
.aguide .sheet{background:var(--bg);border:1px solid var(--line);max-width:760px;width:100%;
  padding:clamp(24px,4vw,44px);transform:translateY(12px);
  transition:transform .4s cubic-bezier(.16,1,.3,1)}
.aguide.in .sheet{transform:none}
.aguide h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.03em}
.aguide .intro{font-size:16px;line-height:1.7;color:var(--dim);margin-top:14px;max-width:62ch}
.aguide h3{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--acc);margin:30px 0 6px}
.aguide .step-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:center;
  padding:16px 0;border-bottom:1px solid var(--line-soft)}
.aguide .step-row p{font-size:15px;line-height:1.65;color:var(--dim);margin:0}
.aguide .step-row b{color:var(--ink);font-weight:500}
.aguide svg{width:150px;height:84px;display:block;border:1px solid var(--line)}
.aguide .close{margin-top:26px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;padding:12px 22px;border:1px solid var(--ink);background:var(--ink);
  color:var(--bg);cursor:pointer}
.aguide .close:hover{background:var(--acc);border-color:var(--acc);color:#fff}
@media(max-width:640px){.aguide .step-row{grid-template-columns:1fr;gap:12px}.aguide svg{width:100%}}